初始化鸿蒙应用展示平台项目 - 前后端分离架构
This commit is contained in:
Nvex
423
templates/app_edit.html
Executable file
423
templates/app_edit.html
Executable file
@@ -0,0 +1,423 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% include 'admin_nav.html' %}
|
||||
|
||||
<div class="admin-container">
|
||||
<div class="admin-content">
|
||||
<div class="admin-card">
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<i class="fas fa-edit"></i>
|
||||
<h3>应用详情 (Top50热门应用)</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应用选择部分 -->
|
||||
<div class="app-selector">
|
||||
<form class="search-form" method="GET" action="/admin/app/edit">
|
||||
<div class="search-wrapper">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" name="search" placeholder="搜索应用..." value="{{ search }}">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="apps-list">
|
||||
{% for app in apps %}
|
||||
<div class="app-item {% if selected_app and selected_app.id == app.id %}selected{% endif %}"
|
||||
onclick="window.location.href='/admin/app/edit/{{ app.id }}'">
|
||||
<div class="app-icon">
|
||||
{% if 'http' in app.icon_path %}
|
||||
<img src="{{ app.icon_path }}" alt="{{ app.name }}">
|
||||
{% else %}
|
||||
<img src="{{ url_for('static', filename='uploads/' + app.icon_path) }}" alt="{{ app.name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name-category">
|
||||
<h4>{{ app.name }}</h4>
|
||||
<div class="app-meta">
|
||||
<span class="category">{{ app.category_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="search-count">搜索 {{ app.search_count }} 次</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if selected_app %}
|
||||
<form method="POST" class="app-edit-form" action="/admin/app/edit/{{ selected_app.id }}">
|
||||
<div class="basic-info">
|
||||
<div class="current-icon">
|
||||
{% if 'http' in selected_app.icon_path %}
|
||||
<img src="{{ selected_app.icon_path }}" alt="{{ selected_app.name }}">
|
||||
{% else %}
|
||||
<img src="{{ url_for('static', filename='uploads/' + selected_app.icon_path) }}" alt="{{ selected_app.name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="basic-fields">
|
||||
<div class="form-group">
|
||||
<label for="name">应用名称</label>
|
||||
<input type="text" id="name" name="name" value="{{ selected_app.name }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="category">分类</label>
|
||||
<select id="category" name="category_id" required>
|
||||
{% for category in categories %}
|
||||
<option value="{{ category.id }}" {% if selected_app.category_id == category.id %}selected{% endif %}>
|
||||
{{ category.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">应用描述</label>
|
||||
<textarea id="description" name="description">{{ selected_app.description or '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="version">版本号</label>
|
||||
<input type="text" id="version" name="version" value="{{ selected_app.version or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="update_date">更新日期</label>
|
||||
<input type="date" id="update_date" name="update_date" value="{{ selected_app.update_date or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="developer">开发者</label>
|
||||
<input type="text" id="developer" name="developer" value="{{ selected_app.developer or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="visit_url">访问链接 (选填)</label>
|
||||
<input type="url"
|
||||
id="visit_url"
|
||||
name="visit_url"
|
||||
value="{{ selected_app.visit_url or '' }}"
|
||||
placeholder="http://example.com">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="download_url">下载链接 (选填)</label>
|
||||
<input type="url"
|
||||
id="download_url"
|
||||
name="download_url"
|
||||
value="{{ selected_app.download_url or '' }}"
|
||||
placeholder="http://example.com/download">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-save"></i> 保存更改
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.app-selector {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.apps-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
min-width: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.app-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.app-item.selected {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.app-item .app-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-item .app-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-item .app-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-item .app-info .app-name-category {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-item .app-info h4 {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-item .app-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.search-count {
|
||||
font-size: 10px;
|
||||
color: #007AFF;
|
||||
background-color: #E3F2FD;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.current-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.current-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.basic-fields {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.basic-fields .form-group {
|
||||
margin: 0; /* 移除默认的外边距 */
|
||||
}
|
||||
|
||||
.basic-fields input,
|
||||
.basic-fields select {
|
||||
margin-top: 4px; /* 减小标签和输入框的间距 */
|
||||
}
|
||||
|
||||
.app-edit-form {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.apps-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.apps-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.apps-list::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.apps-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.apps-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d2d2d7;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #1d1d1f;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.category-select:hover {
|
||||
border-color: #0066cc;
|
||||
}
|
||||
|
||||
.category-select:focus {
|
||||
outline: none;
|
||||
border-color: #0066cc;
|
||||
box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
|
||||
}
|
||||
|
||||
.search-form {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 添加通知显示函数
|
||||
function showNotification(message, type = 'success') {
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `notification ${type}`;
|
||||
notification.textContent = message;
|
||||
|
||||
notification.style.position = 'fixed';
|
||||
notification.style.bottom = '20px';
|
||||
notification.style.right = '20px';
|
||||
notification.style.padding = '10px 20px';
|
||||
notification.style.borderRadius = '4px';
|
||||
notification.style.backgroundColor = type === 'success' ? '#4CAF50' : '#f44336';
|
||||
notification.style.color = 'white';
|
||||
notification.style.zIndex = '1000';
|
||||
notification.style.opacity = '0';
|
||||
notification.style.transform = 'translateY(20px)';
|
||||
notification.style.transition = 'all 0.3s ease';
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.opacity = '1';
|
||||
notification.style.transform = 'translateY(0)';
|
||||
}, 10);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.opacity = '0';
|
||||
notification.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 修改表单提交处理函数
|
||||
document.querySelector('.app-edit-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(this);
|
||||
|
||||
fetch(this.action, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showNotification('保存成功', 'success');
|
||||
} else {
|
||||
showNotification(data.error || '保存失败', 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showNotification('保存失败，请重试', 'error');
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
// 添加动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes fadeInOut {
|
||||
0% { opacity: 0; transform: translateY(20px); }
|
||||
10% { opacity: 1; transform: translateY(0); }
|
||||
90% { opacity: 1; transform: translateY(0); }
|
||||
100% { opacity: 0; transform: translateY(-20px); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// 添加分类筛选函数
|
||||
function filterByCategory(categoryId) {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
if (categoryId) {
|
||||
searchParams.set('category', categoryId);
|
||||
} else {
|
||||
searchParams.delete('category');
|
||||
}
|
||||
window.location.href = `${window.location.pathname}?${searchParams.toString()}`;
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user