diff --git a/README.md b/README.md index c0746ad..be4da57 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ - [x] 不登录时一级分类和二级分类按钮没有颜色 - [x] 应用编辑页面没有回显带入图片 - [x] 游客通过接口能查看私有应用 +- [ ] 游客样式保存到本地 ## 待开发功能 ⏳ @@ -36,6 +37,8 @@ 4. 新增应用界面便捷增加图标图片 5. 每行卡片数量支持自定义（4个、5个、6个、8个） 6. 首页底线明暗变化 +7. 视频背景首次加载卡顿优化,懒载背景白色和灰色 +8. 静态页面生成 ### 功能增强 1. 网站图标自动获取功能 @@ -49,7 +52,8 @@ 9. 音乐悬浮窗 10. 视频支持切片 11. 视频播放声音开关 - +12. 自定义卡片挂件 +13. 自定义元素 ### 批量操作 1. 应用批量选择功能： - 批量删除 diff --git a/app.py b/app.py index ea47242..8d76cdc 100644 --- a/app.py +++ b/app.py @@ -46,7 +46,43 @@ SETTINGS_FILE = os.path.join(DATA_DIR, 'settings.json') GUEST_SETTINGS_FILE = os.path.join(DATA_DIR, 'guest_settings.json') +# 主题设置文件路径 +THEME_SETTINGS_FILE = os.path.join(DATA_DIR, 'data/theme_settings.json') + +def load_theme_settings(): + """加载主题设置""" + default_settings = { + 'light': { + 'primary_color': '#4361ee', + 'title_color': '#4361ee', + 'opacity': 0.3, + 'bg_color': '#ffffff' + }, + 'dark': { + 'primary_color': '#4361ee', + 'title_color': '#4361ee', + 'opacity': 0.7, + 'bg_color': '#1e1e1e' + } + } + + try: + if os.path.exists(THEME_SETTINGS_FILE): + with open(THEME_SETTINGS_FILE, 'r', encoding='utf-8') as f: + return json.load(f) + return default_settings + except Exception as e: + print(f"加载主题设置失败: {e}") + return default_settings + +def save_theme_settings(settings): + """保存主题设置""" + try: + with open(THEME_SETTINGS_FILE, 'w', encoding='utf-8') as f: + json.dump(settings, f, ensure_ascii=False, indent=4) + except Exception as e: + print(f"保存主题设置失败: {e}") def migrate_settings(settings): """迁移旧版设置到新版格式""" if 'admin_password' in settings: @@ -221,12 +257,21 @@ def save_attachments(data): with open(ATTACHMENTS_FILE, 'w', encoding='utf-8') as f: json.dump(data, f, ensure_ascii=False, indent=2) + def add_attachment(filename, file_type): attachments = load_attachments() + file_size = 0 + for folder in [LOGO_FOLDER, BACKGROUND_FOLDER, VIDEO_FOLDER, ICON_FOLDER]: + filepath = os.path.join(folder, filename) + if os.path.exists(filepath): + file_size = os.path.getsize(filepath) + break + attachments.append({ 'filename': filename, 'type': file_type, - 'upload_time': datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S') + 'upload_time': datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S'), + 'size': file_size }) save_attachments(attachments) @@ -362,11 +407,36 @@ def captcha(): return response +@app.route('/api/theme_settings', methods=['GET', 'POST']) +def handle_theme_settings(): + if request.method == 'POST': + if 'username' not in session: + return jsonify({'error': 'Unauthorized'}), 401 + + data = request.json + # 验证数据格式 + required_fields = ['light', 'dark'] + for mode in required_fields: + if mode not in data: + return jsonify({'error': f'Missing {mode} settings'}), 400 + for field in ['primary_color', 'title_color', 'opacity', 'bg_color']: + if field not in data[mode]: + return jsonify({'error': f'Missing {field} in {mode} settings'}), 400 + + # 保存设置 + save_theme_settings(data) + return jsonify({'status': 'success'}) + + # GET请求返回当前主题设置 + return jsonify(load_theme_settings()) + + @app.route('/settings', methods=['GET', 'POST']) @login_required def system_settings(): settings = load_settings() - guest_settings = load_guest_settings() # 加载游客设置 + theme_settings = load_theme_settings() + guest_settings = load_guest_settings() attachments = load_attachments() if request.method == 'POST': @@ -460,10 +530,12 @@ def system_settings(): if old_password and new_password and confirm_password: if not check_password_hash(settings.get('admin_password_hash', ''), old_password): flash('原密码错误', 'danger') - return render_template('settings.html', settings=settings, icons=load_icons(), attachments=attachments) + return render_template('settings.html', settings=settings, icons=load_icons(), + attachments=attachments) if new_password != confirm_password: flash('新密码不匹配', 'danger') - return render_template('settings.html', settings=settings, icons=load_icons(), attachments=attachments) + return render_template('settings.html', settings=settings, icons=load_icons(), + attachments=attachments) settings['admin_password_hash'] = generate_password_hash(new_password) save_settings(settings) @@ -473,16 +545,17 @@ def system_settings(): except Exception as e: print(f"保存设置时出错: {e}") flash('保存设置时出错', 'danger') - return render_template('settings.html', settings=settings, icons=load_icons(), attachments=attachments) + return render_template('settings.html', settings=settings_to_return, theme_settings=theme_settings, guest_settings=guest_settings, icons=load_icons(), attachments=attachments) # 从返回的settings中移除密码哈希 settings_to_return = settings.copy() settings_to_return.pop('admin_password_hash', None) return render_template('settings.html', - settings=settings_to_return, - guest_settings=guest_settings, - icons=load_icons(), - attachments=attachments) + settings=settings_to_return, + theme_settings=theme_settings, + guest_settings=guest_settings, + icons=load_icons(), + attachments=attachments) # 添加附件管理路由 @@ -491,12 +564,25 @@ def system_settings(): def manage_attachments(): type_filter = request.args.get('type', 'all') search_query = request.args.get('search', '').lower() + sort_order = request.args.get('sort', 'desc') # 默认按时间倒序 page = int(request.args.get('page', 1)) per_page = 10 # 每页显示10条数据 settings = load_settings() attachments = load_attachments() + # 添加文件大小信息 + for attachment in attachments: + file_found = False + for folder in [LOGO_FOLDER, BACKGROUND_FOLDER, VIDEO_FOLDER, ICON_FOLDER]: + filepath = os.path.join(folder, attachment['filename']) + if os.path.exists(filepath): + attachment['size'] = os.path.getsize(filepath) + file_found = True + break + if not file_found: + attachment['size'] = 0 + # 应用筛选 filtered_attachments = [] for attachment in attachments: @@ -510,6 +596,12 @@ def manage_attachments(): filtered_attachments.append(attachment) + # 排序处理 + filtered_attachments.sort( + key=lambda x: x['upload_time'], + reverse=(sort_order == 'desc') + ) + # 分页处理 total_pages = ceil(len(filtered_attachments) / per_page) paginated_attachments = filtered_attachments[(page - 1) * per_page: page * per_page] @@ -520,7 +612,8 @@ def manage_attachments(): current_page=page, total_pages=total_pages, search_query=search_query, - type_filter=type_filter) + type_filter=type_filter, + sort_order=sort_order) @app.route('/upload_attachment', methods=['POST']) diff --git a/templates/attachments.html b/templates/attachments.html index dc1c551..01821b0 100644 --- a/templates/attachments.html +++ b/templates/attachments.html @@ -23,7 +23,7 @@
-
@@ -36,20 +36,21 @@
附件列表
-
- - - {% if type_filter != 'all' or search_query %} - 重置 + 重置 {% endif %}
@@ -63,7 +64,17 @@ 预览 文件名 类型 - 上传时间 + 文件大小 + + + 上传时间 + {% if sort_order == 'desc' %} + + {% else %} + + {% endif %} + + 操作 @@ -95,6 +106,7 @@ 图标图片 {% endif %} + {{ attachment.size|filesizeformat }} {{ attachment.upload_time }}
@@ -106,7 +118,7 @@ {% else %} - 没有找到匹配的附件 + 没有找到匹配的附件 {% endfor %} @@ -148,6 +160,7 @@ 图标图片 {% endif %}

+

{{ attachment.size|filesizeformat }}

{{ attachment.upload_time }}

+ + + + + + +

{% if settings and settings.show_logo %} @@ -987,6 +1248,7 @@ body.dark-theme .secondary-filters-container::after { let apps = []; let categories = {}; let isLoggedIn = false; + let themeSettingsLoaded = false; // 添加全局变量标记是否已加载主题设置 // DOM元素 const appListContainer = document.getElementById('appListContainer'); @@ -1003,148 +1265,217 @@ body.dark-theme .secondary-filters-container::after { let activeSecondaryFilter = null; // 新增：当前激活的二级筛选 // 从后端加载数据 - async function loadData() { - try { - // 检查登录状态 - const loginCheck = await fetch('/api/check_login'); - const loginData = await loginCheck.json(); - isLoggedIn = loginData.logged_in; +async function loadData() { + try { + // 检查登录状态 + const loginCheck = await fetch('/api/check_login'); + const loginData = await loginCheck.json(); + isLoggedIn = loginData.logged_in; - // 更新登录按钮状态 - updateLoginButton(); + // 更新登录按钮状态 + updateLoginButton(); - // 加载应用数据 - const appsResponse = await fetch('/api/apps'); - apps = await appsResponse.json(); + // 加载应用数据 + const appsResponse = await fetch('/api/apps'); + apps = await appsResponse.json(); - // 加载分类数据 - const categoriesResponse = await fetch('/api/categories'); - categories = await categoriesResponse.json(); + // 加载分类数据 + const categoriesResponse = await fetch('/api/categories'); + categories = await categoriesResponse.json(); - // 动态添加CSS变量 - const style = document.createElement('style'); - let cssVariables = ''; + // 动态添加CSS变量 + const style = document.createElement('style'); + let cssVariables = ''; - Object.entries(categories).forEach(([catId, catData]) => { - // 为主分类添加颜色变量 - cssVariables += `:root { --${catId}-color: ${catData.color}; }\n`; + Object.entries(categories).forEach(([catId, catData]) => { + // 为主分类添加颜色变量 + cssVariables += `:root { --${catId}-color: ${catData.color}; }\n`; - // 为子分类添加颜色变量 - if (catData.sub) { - Object.entries(catData.sub).forEach(([subId, subData]) => { - if (subData.color) { - cssVariables += `:root { --${subId}-color: ${subData.color}; }\n`; + // 为子分类添加颜色变量 + if (catData.sub) { + Object.entries(catData.sub).forEach(([subId, subData]) => { + if (subData.color) { + cssVariables += `:root { --${subId}-color: ${subData.color}; }\n`; + } + }); + } + }); + + style.textContent = cssVariables; + document.head.appendChild(style); + + // 转换应用数据结构，添加tags数组 + apps = apps.map(app => { + const mainCat = app.category.main; + const subCat = app.category.sub; + const mainCatName = categories[mainCat]?.name || mainCat; + const subCatName = categories[mainCat]?.sub[subCat]?.name || subCat; + const subCatColor = categories[mainCat]?.sub[subCat]?.color || categories[mainCat]?.color; + + return { + ...app, + tags: [ + { + level: 1, + id: mainCat, + name: mainCatName, + color: categories[mainCat]?.color + }, + { + level: 2, + id: subCat, + name: subCatName, + color: subCatColor + } + ] + }; + }); + + // 过滤掉私有分类的应用 + if (!isLoggedIn) { + apps = apps.filter(app => { + const mainCat = app.category.main; + const subCat = app.category.sub; + // 检查主分类是否私有 + const isMainPrivate = categories[mainCat]?.private || false; + // 检查子分类是否私有 + const isSubPrivate = categories[mainCat]?.sub_private?.[subCat] || false; + return !isMainPrivate && !isSubPrivate; + }); + + // 过滤掉私有分类 + Object.keys(categories).forEach(catId => { + if (categories[catId].private) { + delete categories[catId]; + } else if (categories[catId].sub_private) { + Object.keys(categories[catId].sub_private).forEach(subId => { + if (categories[catId].sub_private[subId]) { + delete categories[catId].sub[subId]; } }); } }); + } - style.textContent = cssVariables; - document.head.appendChild(style); + // 按权重对分类进行排序（无论是否登录都排序） + categories = Object.fromEntries( + Object.entries(categories).sort((a, b) => { + const weightA = a[1].weight || 0; + const weightB = b[1].weight || 0; + return weightB - weightA; // 降序排列 + }) + ); - // 转换应用数据结构，添加tags数组 - apps = apps.map(app => { - const mainCat = app.category.main; - const subCat = app.category.sub; - const mainCatName = categories[mainCat]?.name || mainCat; - const subCatName = categories[mainCat]?.sub[subCat]?.name || subCat; - const subCatColor = categories[mainCat]?.sub[subCat]?.color || categories[mainCat]?.color; - - return { - ...app, - tags: [ - { - level: 1, - id: mainCat, - name: mainCatName, - color: categories[mainCat]?.color - }, - { - level: 2, - id: subCat, - name: subCatName, - color: subCatColor - } - ] - }; - }); - - // 过滤掉私有分类的应用 - if (!isLoggedIn) { - apps = apps.filter(app => { - const mainCat = app.category.main; - const subCat = app.category.sub; - // 检查主分类是否私有 - const isMainPrivate = categories[mainCat]?.private || false; - // 检查子分类是否私有 - const isSubPrivate = categories[mainCat]?.sub_private?.[subCat] || false; - return !isMainPrivate && !isSubPrivate; - }); - - // 过滤掉私有分类 - Object.keys(categories).forEach(catId => { - if (categories[catId].private) { - delete categories[catId]; - } else if (categories[catId].sub_private) { - Object.keys(categories[catId].sub_private).forEach(subId => { - if (categories[catId].sub_private[subId]) { - delete categories[catId].sub[subId]; - } - }); - } - }); + // 对每个主分类下的子分类也按权重排序 + Object.values(categories).forEach(cat => { + if (cat.sub) { + cat.sub = Object.fromEntries( + Object.entries(cat.sub).sort((a, b) => { + const weightA = a[1].weight || 0; + const weightB = b[1].weight || 0; + return weightB - weightA; // 降序排列 + }) + ); } + }); - // 按权重对分类进行排序（无论是否登录都排序） - categories = Object.fromEntries( - Object.entries(categories).sort((a, b) => { - const weightA = a[1].weight || 0; - const weightB = b[1].weight || 0; - return weightB - weightA; // 降序排列 - }) - ); + // 渲染界面 + renderFilters(); + renderApps(); + loadingSpinner.style.display = 'none'; + primaryFilters.querySelector('[data-filter="all"]').textContent = '全部'; - // 对每个主分类下的子分类也按权重排序 - Object.values(categories).forEach(cat => { - if (cat.sub) { - cat.sub = Object.fromEntries( - Object.entries(cat.sub).sort((a, b) => { - const weightA = a[1].weight || 0; - const weightB = b[1].weight || 0; - return weightB - weightA; // 降序排列 - }) - ); - } - }); + // 修复分类按钮滑动问题 + setupFilterScroll(); + } catch (error) { + console.error('加载数据失败:', error); + appListContainer.innerHTML = ` +
+ 加载数据失败，请刷新页面重试 +
+ `; + } +} - // 对每个主分类下的子分类也按权重排序 - Object.values(categories).forEach(cat => { - if (cat.sub) { - cat.sub = Object.fromEntries( - Object.entries(cat.sub).sort((a, b) => { - const weightA = a[1].weight || 0; - const weightB = b[1].weight || 0; - return weightB - weightA; // 降序排列 - }) - ); - } - }); +// 新增的修复分类按钮滑动问题的函数 +function setupFilterScroll() { + const filterRow = document.querySelector('.filter-row'); + const secondaryFilters = document.querySelector('.secondary-filters-container'); - // 渲染界面 - renderFilters(); - renderApps(); - loadingSpinner.style.display = 'none'; - primaryFilters.querySelector('[data-filter="all"]').textContent = '全部'; - } catch (error) { - console.error('加载数据失败:', error); - appListContainer.innerHTML = ` -
- 加载数据失败，请刷新页面重试 -
- `; + // 检查是否需要显示滚动条并调整对齐方式 + function checkScrollable() { + // 处理主筛选行 + if (filterRow.scrollWidth > filterRow.clientWidth) { + filterRow.classList.add('scrollable'); + filterRow.classList.remove('centered'); + filterRow.style.justifyContent = 'flex-start'; + } else { + filterRow.classList.remove('scrollable'); + filterRow.classList.add('centered'); + filterRow.style.justifyContent = 'center'; + } + + // 处理二级筛选行 + if (secondaryFilters) { + if (secondaryFilters.scrollWidth > secondaryFilters.clientWidth) { + secondaryFilters.classList.add('scrollable'); + secondaryFilters.classList.remove('centered'); + secondaryFilters.style.justifyContent = 'flex-start'; + } else { + secondaryFilters.classList.remove('scrollable'); + secondaryFilters.classList.add('centered'); + secondaryFilters.style.justifyContent = 'center'; + } } } + // 添加滚动事件监听 + filterRow.addEventListener('scroll', () => { + // 添加滚动到边缘时的样式变化 + if (filterRow.scrollLeft === 0) { + filterRow.classList.add('scroll-start'); + filterRow.classList.remove('scroll-middle'); + } else if (filterRow.scrollLeft + filterRow.clientWidth >= filterRow.scrollWidth - 1) { + filterRow.classList.add('scroll-end'); + filterRow.classList.remove('scroll-middle'); + } else { + filterRow.classList.add('scroll-middle'); + filterRow.classList.remove('scroll-start', 'scroll-end'); + } + }); + + if (secondaryFilters) { + secondaryFilters.addEventListener('scroll', () => { + if (secondaryFilters.scrollLeft === 0) { + secondaryFilters.classList.add('scroll-start'); + secondaryFilters.classList.remove('scroll-middle'); + } else if (secondaryFilters.scrollLeft + secondaryFilters.clientWidth >= secondaryFilters.scrollWidth - 1) { + secondaryFilters.classList.add('scroll-end'); + secondaryFilters.classList.remove('scroll-middle'); + } else { + secondaryFilters.classList.add('scroll-middle'); + secondaryFilters.classList.remove('scroll-start', 'scroll-end'); + } + }); + } + + // 初始检查 + checkScrollable(); + window.addEventListener('resize', checkScrollable); + + // 添加平滑滚动行为 + filterRow.style.scrollBehavior = 'smooth'; + if (secondaryFilters) { + secondaryFilters.style.scrollBehavior = 'smooth'; + } + + // 确保按钮可以滑动到最边缘 + filterRow.style.padding = '0 15px'; + if (secondaryFilters) { + secondaryFilters.style.padding = '0 15px'; + } +} + // 更新登录按钮状态 function updateLoginButton() { if (isLoggedIn) { @@ -1321,37 +1652,37 @@ body.dark-theme .secondary-filters-container::after { setFilter(primaryFilterId, 'all'); activeSecondaryFilter = null; // 重置二级筛选状态 }); - container.appendChild(allSecondaryBtn); + container.appendChild(allSecondaryBtn); - Object.entries(categories[primaryFilterId].sub).forEach(([subCatId, subCatData]) => { - const btn = document.createElement('button'); - btn.className = `filter-btn ${primaryFilterId}`; - btn.textContent = subCatData.name; - btn.dataset.level = '2'; - btn.dataset.filter = subCatId; - btn.style.backgroundColor = subCatData.color; - btn.style.color = getContrastColor(subCatData.color); - btn.addEventListener('click', () => { - // 如果点击的是当前激活的二级筛选，则取消筛选 - if (activeSecondaryFilter === subCatId) { - setFilter(primaryFilterId, 'all'); - activeSecondaryFilter = null; - } else { - setFilter(primaryFilterId, subCatId); - activeSecondaryFilter = subCatId; - } - }); - container.appendChild(btn); + Object.entries(categories[primaryFilterId].sub).forEach(([subCatId, subCatData]) => { + const btn = document.createElement('button'); + btn.className = `filter-btn ${primaryFilterId}`; + btn.textContent = subCatData.name; + btn.dataset.level = '2'; + btn.dataset.filter = subCatId; + btn.style.backgroundColor = subCatData.color; + btn.style.color = getContrastColor(subCatData.color); + btn.addEventListener('click', () => { + // 如果点击的是当前激活的二级筛选，则取消筛选 + if (activeSecondaryFilter === subCatId) { + setFilter(primaryFilterId, 'all'); + activeSecondaryFilter = null; + } else { + setFilter(primaryFilterId, subCatId); + activeSecondaryFilter = subCatId; + } }); + container.appendChild(btn); + }); - secondaryFiltersWrapper.innerHTML = ''; - secondaryFiltersWrapper.appendChild(container); - currentExpandedPrimary = primaryFilterId; + secondaryFiltersWrapper.innerHTML = ''; + secondaryFiltersWrapper.appendChild(container); + currentExpandedPrimary = primaryFilterId; - // 为新创建的二级筛选容器添加滚轮事件 - addWheelEventToContainer(container); - } + // 为新创建的二级筛选容器添加滚轮事件 + addWheelEventToContainer(container); } +} // 收起所有二级标签 function collapseAllSecondary() { @@ -1539,6 +1870,15 @@ body.dark-theme .secondary-filters-container::after { }); } + + // 辅助函数：十六进制颜色转RGBA + function hexToRgba(hex, alpha) { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; + } + // 辅助函数：计算对比色 function getContrastColor(hexColor) { if (!hexColor) return '#ffffff'; @@ -1677,34 +2017,96 @@ body.dark-theme .secondary-filters-container::after { } } - // 应用设置 - function applySettings() { - // 应用主题 - document.body.classList.remove('dark-theme', 'light-theme'); - if (settings.theme === 'dark' || - (settings.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) { - document.body.classList.add('dark-theme'); + // 应用主题样式 +function applyThemeStyles(settings) { + const isDark = document.body.classList.contains('dark-theme'); + const theme = isDark ? settings.dark : settings.light; - // 显示/隐藏视频背景 - document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'none'); - document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'block'); - } else if (settings.theme === 'light') { - document.body.classList.add('light-theme'); + // 更新CSS变量 + document.documentElement.style.setProperty('--primary-color', theme.primary_color); + document.documentElement.style.setProperty('--title-color', theme.title_color); - // 显示/隐藏视频背景 - document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'block'); - document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'none'); + // 更新卡片、筛选器和按钮的透明度和背景色 + const opacity = theme.opacity; + const bgColor = theme.bg_color; + const cardBg = hexToRgba(bgColor, opacity); + const filterBg = hexToRgba(bgColor, opacity); + const floatingBtnBg = hexToRgba(bgColor, opacity); + + // 同时更新明亮和暗黑模式的CSS变量 + document.documentElement.style.setProperty('--card-bg-light', hexToRgba(settings.light.bg_color, settings.light.opacity)); + document.documentElement.style.setProperty('--filter-bg-light', hexToRgba(settings.light.bg_color, settings.light.opacity)); + document.documentElement.style.setProperty('--floating-btn-bg-light', hexToRgba(settings.light.bg_color, settings.light.opacity)); + + document.documentElement.style.setProperty('--card-bg-dark', hexToRgba(settings.dark.bg_color, settings.dark.opacity)); + document.documentElement.style.setProperty('--filter-bg-dark', hexToRgba(settings.dark.bg_color, settings.dark.opacity)); + document.documentElement.style.setProperty('--floating-btn-bg-dark', hexToRgba(settings.dark.bg_color, settings.dark.opacity)); + + // 更新当前显示的卡片、筛选器和按钮 + document.querySelectorAll('.app-item').forEach(item => { + item.style.backgroundColor = cardBg; + }); + + document.querySelector('.filter-container').style.backgroundColor = filterBg; + document.querySelectorAll('.floating-btn').forEach(btn => { + btn.style.backgroundColor = floatingBtnBg; + }); +} + +// 新增函数：从UI获取当前设置并应用样式 +function applyThemeStylesFromUI() { + const settings = { + light: { + primary_color: document.getElementById('lightPrimaryColor').value, + title_color: document.getElementById('lightTitleColor').value, + opacity: parseFloat(document.getElementById('lightOpacity').value), + bg_color: document.getElementById('lightBgColor').value + }, + dark: { + primary_color: document.getElementById('darkPrimaryColor').value, + title_color: document.getElementById('darkTitleColor').value, + opacity: parseFloat(document.getElementById('darkOpacity').value), + bg_color: document.getElementById('darkBgColor').value } + }; + applyThemeStyles(settings); +} - // 应用卡片样式 - document.querySelectorAll('.app-item').forEach(item => { - item.classList.toggle('compact', settings.card_style === 'compact'); - }); - // 更新主题按钮状态 - updateThemeButtonIcon(); + // 应用设置 +function applySettings() { + // 应用主题 + document.body.classList.remove('dark-theme', 'light-theme'); + if (settings.theme === 'dark' || + (settings.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + document.body.classList.add('dark-theme'); + + // 显示/隐藏视频背景 + document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'none'); + document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'block'); + } else if (settings.theme === 'light') { + document.body.classList.add('light-theme'); + + // 显示/隐藏视频背景 + document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'block'); + document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'none'); } + // 应用卡片样式 + document.querySelectorAll('.app-item').forEach(item => { + item.classList.toggle('compact', settings.card_style === 'compact'); + }); + + // 更新主题按钮状态 + updateThemeButtonIcon(); + + // 修改这里：不再直接调用 loadThemeSettings，而是从UI获取当前设置 + if (themeSettingsLoaded) { + applyThemeStylesFromUI(); + } else { + loadThemeSettings(); // 首次加载时调用 + } +} // 更新主题按钮图标 function updateThemeButtonIcon() { const themeToggle = document.getElementById('themeToggle'); @@ -1756,7 +2158,7 @@ body.dark-theme .secondary-filters-container::after { }, body: JSON.stringify({ keyword }) }) - .then(response => response.json()) + .then(response =>response.json()) .then(results => { searchResults.innerHTML = ''; if (results.length > 0) { @@ -1821,6 +2223,10 @@ body.dark-theme .secondary-filters-container::after { // 更新本地设置（仅主题） settings.theme = newTheme; + // 触发自定义事件通知主题已更改 + const themeChangedEvent = new Event('themeChanged'); + document.dispatchEvent(themeChangedEvent); + // 保存设置（不会影响后台的背景设置） if (isLoggedIn) { // 已登录用户只更新主题设置 @@ -1866,8 +2272,6 @@ body.dark-theme .secondary-filters-container::after { if (!loginData.logged_in) { window.location.href = '/login?next=/manage'; - } else { - window.location.href = '/manage'; } } }); @@ -1875,7 +2279,6 @@ body.dark-theme .secondary-filters-container::after { // 返回顶部功能 function setupBackToTop() { - // 监听滚动事件 window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTopBtn.style.display = 'flex'; @@ -1884,9 +2287,7 @@ body.dark-theme .secondary-filters-container::after { } }); - // 点击返回顶部按钮 backToTopBtn.addEventListener('click', () => { - // 平滑滚动到顶部 window.scrollTo({ top: 0, behavior: 'smooth' @@ -1894,197 +2295,425 @@ body.dark-theme .secondary-filters-container::after { }); } -// 右键菜单功能 -function setupContextMenu() { - const contextMenu = document.getElementById('contextMenu'); - let currentApp = null; - let currentAppIndex = -1; + // 右键菜单功能 + function setupContextMenu() { + const contextMenu = document.getElementById('contextMenu'); + let currentApp = null; + let currentAppIndex = -1; - // 显示右键菜单 - document.addEventListener('contextmenu', (e) => { - // 检查是否点击的是应用卡片 - const appItem = e.target.closest('.app-item'); - if (appItem) { - e.preventDefault(); + document.addEventListener('contextmenu', (e) => { + const appItem = e.target.closest('.app-item'); + if (appItem) { + e.preventDefault(); + currentApp = apps.find(app => app.title === appItem.querySelector('.app-title').textContent); + currentAppIndex = apps.findIndex(app => app.title === appItem.querySelector('.app-title').textContent); - // 找到对应的应用数据 - const appTitle = appItem.querySelector('.app-title').textContent; - currentApp = apps.find(app => app.title === appTitle); - currentAppIndex = apps.findIndex(app => app.title === appTitle); + contextMenu.style.left = `${e.pageX}px`; + contextMenu.style.top = `${e.pageY}px`; + contextMenu.style.display = 'block'; - // 更新菜单位置 - contextMenu.style.left = `${e.pageX}px`; - contextMenu.style.top = `${e.pageY}px`; - contextMenu.style.display = 'block'; - - // 根据主题设置菜单样式 - if (document.body.classList.contains('dark-theme')) { - contextMenu.classList.add('dark'); - contextMenu.querySelectorAll('.context-menu-item').forEach(item => item.classList.add('dark')); - contextMenu.querySelectorAll('.context-menu-divider').forEach(divider => divider.classList.add('dark')); - } else { - contextMenu.classList.remove('dark'); - contextMenu.querySelectorAll('.context-menu-item').forEach(item => item.classList.remove('dark')); - contextMenu.querySelectorAll('.context-menu-divider').forEach(divider => divider.classList.remove('dark')); - } - - // 显示/隐藏编辑和删除按钮（仅管理员可见） - const editItem = contextMenu.querySelector('[data-action="edit"]'); - const deleteItem = contextMenu.querySelector('[data-action="delete"]'); - - if (isLoggedIn) { - editItem.style.display = 'block'; - deleteItem.style.display = 'block'; - } else { - editItem.style.display = 'none'; - deleteItem.style.display = 'none'; - } - } - }); - - // 隐藏右键菜单 - document.addEventListener('click', (e) => { - if (!contextMenu.contains(e.target)) { - contextMenu.style.display = 'none'; - } - }); - - // 菜单项点击处理 - contextMenu.addEventListener('click', (e) => { - const menuItem = e.target.closest('.context-menu-item'); - if (!menuItem || !currentApp) return; - - const action = menuItem.dataset.action; - - switch (action) { - case 'open': - window.open(currentApp.url, '_blank'); - break; - - case 'copy': - if (navigator.clipboard && navigator.clipboard.writeText) { - navigator.clipboard.writeText(currentApp.url) - .then(() => { - showCopyNotification('已复制到剪贴板'); - }) - .catch(err => { - console.error('复制失败:', err); - fallbackCopyText(currentApp.url); - }); + if (document.body.classList.contains('dark-theme')) { + contextMenu.classList.add('dark'); } else { - fallbackCopyText(currentApp.url); + contextMenu.classList.remove('dark'); } - break; - case 'edit': - if (isLoggedIn) { - window.location.href = `/app/edit/${currentAppIndex}`; - } - break; - - case 'delete': - if (isLoggedIn) { - if (confirm(`确定要删除 "${currentApp.title}" 吗？`)) { - fetch(`/app/delete/${currentAppIndex}`, { - method: 'GET' - }) - .then(response => { - if (response.ok) { - // 重新加载数据 - loadData(); - } else { - alert('删除失败'); - } - }) - .catch(error => { - console.error('删除失败:', error); - alert('删除失败'); - }); - } - } - break; - } - - contextMenu.style.display = 'none'; - }); -} - -// 在DOMContentLoaded事件中添加setupContextMenu调用 -document.addEventListener('DOMContentLoaded', () => { - loadData(); - loadSettings(); - setupSearch(); - setupThemeSwitcher(); - setupCompactToggle(); - setupAdminButton(); - setupBackToTop(); - setupContextMenu(); // 添加右键菜单功能 - - // 为静态的一级筛选容器添加滚轮事件 - primaryFilters.addEventListener('wheel', (e) => { - if (e.deltaY !== 0) { - e.preventDefault(); - primaryFilters.scrollLeft += e.deltaY; - } - }); -}); - - -// 显示复制成功的提示 -function showCopyNotification(message) { - const notification = document.createElement('div'); - notification.className = 'copy-notification'; - notification.textContent = message; - document.body.appendChild(notification); - - setTimeout(() => { - notification.classList.add('fade-out'); - setTimeout(() => notification.remove(), 300); - }, 1000); -} - -// 备用的复制方法 -function fallbackCopyText(text) { - const textarea = document.createElement('textarea'); - textarea.value = text; - textarea.style.position = 'fixed'; // 防止页面滚动 - document.body.appendChild(textarea); - textarea.select(); - - try { - const successful = document.execCommand('copy'); - const msg = successful ? '已复制到剪贴板' : '复制失败，请手动复制'; - showCopyNotification(msg); - } catch (err) { - console.error('备用复制方法失败:', err); - showCopyNotification('复制失败，请手动复制'); - } - - document.body.removeChild(textarea); -} - - function checkScrollable() { - document.querySelectorAll('.filter-row, .secondary-filters-container').forEach(container => { - // 检查内容宽度是否大于容器宽度 - const isScrollable = container.scrollWidth > container.clientWidth; - - if(isScrollable) { - container.classList.add('scrollable'); - } else { - container.classList.remove('scrollable'); + const editItem = contextMenu.querySelector('[data-action="edit"]'); + const deleteItem = contextMenu.querySelector('[data-action="delete"]'); + editItem.style.display = isLoggedIn ? 'block' : 'none'; + deleteItem.style.display = isLoggedIn ? 'block' : 'none'; } }); + + document.addEventListener('click', (e) => { + if (!contextMenu.contains(e.target)) { + contextMenu.style.display = 'none'; + } + }); + + contextMenu.addEventListener('click', (e) => { + const menuItem = e.target.closest('.context-menu-item'); + if (!menuItem || !currentApp) return; + + const action = menuItem.dataset.action; + switch (action) { + case 'open': + window.open(currentApp.url, '_blank'); + break; + case 'copy': + navigator.clipboard.writeText(currentApp.url) + .then(() => showNotification('已复制到剪贴板')) + .catch(() => fallbackCopyText(currentApp.url)); + break; + case 'edit': + if (isLoggedIn) window.location.href = `/app/edit/${currentAppIndex}`; + break; + case 'delete': + if (isLoggedIn && confirm(`确定要删除 "${currentApp.title}" 吗？`)) { + fetch(`/app/delete/${currentAppIndex}`, { method: 'GET' }) + .then(response => response.ok && loadData()) + .catch(error => console.error('删除失败:', error)); + } + break; + } + contextMenu.style.display = 'none'; + }); } - // 初始化时检查 - window.addEventListener('load', checkScrollable); - // 窗口大小改变时检查 - window.addEventListener('resize', checkScrollable); - // 内容变化时检查（如筛选器更新后） - new MutationObserver(checkScrollable).observe(document.body, { - childList: true, - subtree: true + // 主题样式设置功能 +// 修改后的主题样式设置功能 +function setupThemeSettings() { + const settingsPanel = document.querySelector('.theme-settings-panel'); + const settingsToggle = document.querySelector('.settings-toggle'); + const resetBtn = document.getElementById('resetThemeSettings'); + const saveBtn = document.getElementById('saveThemeSettings'); + + settingsPanel.classList.add('collapsed'); + + // 点击展开/收起面板 + settingsToggle.addEventListener('click', (e) => { + e.stopPropagation(); + settingsPanel.classList.toggle('collapsed'); + }); + + // 点击页面其他区域收起面板 + document.addEventListener('click', (e) => { + if (!settingsPanel.contains(e.target) && !settingsPanel.classList.contains('collapsed')) { + settingsPanel.classList.add('collapsed'); + } + }); + + // 阻止面板内部点击事件冒泡 + settingsPanel.addEventListener('click', (e) => { + e.stopPropagation(); + }); + + // 当前主题设置缓存 + let currentThemeSettings = null; + + // 确保登录状态是最新的 + async function checkLoginStatus() { + try { + const response = await fetch('/api/check_login'); + const data = await response.json(); + isLoggedIn = data.logged_in; + return isLoggedIn; + } catch (error) { + console.error('检查登录状态失败:', error); + return false; + } + } + + // 加载主题设置 + async function loadThemeSettings() { + // 确保获取最新的登录状态 + const loggedIn = await checkLoginStatus(); + + if (loggedIn) { + // 登录用户从后端加载配置 + try { + const response = await fetch('/api/theme_settings'); + if (!response.ok) throw new Error('获取主题设置失败'); + currentThemeSettings = await response.json(); + updateUIWithSettings(currentThemeSettings); + themeSettingsLoaded = true; + applyCurrentThemeSettings(); + // 登录后清除本地存储的主题设置 + localStorage.removeItem('themeSettings'); + } catch (error) { + console.error('从后端加载主题设置失败:', error); + // 如果后端加载失败，尝试从本地加载（如果有） + const localSettings = localStorage.getItem('themeSettings'); + if (localSettings) { + currentThemeSettings = JSON.parse(localSettings); + updateUIWithSettings(currentThemeSettings); + themeSettingsLoaded = true; + applyCurrentThemeSettings(); + } else { + // 使用默认设置 + currentThemeSettings = getDefaultThemeSettings(); + updateUIWithSettings(currentThemeSettings); + themeSettingsLoaded = true; + applyCurrentThemeSettings(); + } + } + } else { + // 未登录用户从本地存储加载配置 + const localSettings = localStorage.getItem('themeSettings'); + if (localSettings) { + currentThemeSettings = JSON.parse(localSettings); + updateUIWithSettings(currentThemeSettings); + themeSettingsLoaded = true; + applyCurrentThemeSettings(); + } else { + // 使用默认设置 + currentThemeSettings = getDefaultThemeSettings(); + updateUIWithSettings(currentThemeSettings); + themeSettingsLoaded = true; + applyCurrentThemeSettings(); + } + } + } + + // 应用当前主题设置（根据当前是暗黑还是明亮模式） + function applyCurrentThemeSettings() { + if (!currentThemeSettings) return; + + const isDark = document.body.classList.contains('dark-theme'); + const theme = isDark ? currentThemeSettings.dark : currentThemeSettings.light; + + // 更新CSS变量 + document.documentElement.style.setProperty('--primary-color', theme.primary_color); + document.documentElement.style.setProperty('--title-color', theme.title_color); + + // 更新卡片、筛选器和按钮的透明度和背景色 + const cardBg = hexToRgba(theme.bg_color, theme.opacity); + const filterBg = hexToRgba(theme.bg_color, theme.opacity); + const floatingBtnBg = hexToRgba(theme.bg_color, theme.opacity); + + document.documentElement.style.setProperty('--card-bg-light', hexToRgba(currentThemeSettings.light.bg_color, currentThemeSettings.light.opacity)); + document.documentElement.style.setProperty('--filter-bg-light', hexToRgba(currentThemeSettings.light.bg_color, currentThemeSettings.light.opacity)); + document.documentElement.style.setProperty('--floating-btn-bg-light', hexToRgba(currentThemeSettings.light.bg_color, currentThemeSettings.light.opacity)); + + document.documentElement.style.setProperty('--card-bg-dark', hexToRgba(currentThemeSettings.dark.bg_color, currentThemeSettings.dark.opacity)); + document.documentElement.style.setProperty('--filter-bg-dark', hexToRgba(currentThemeSettings.dark.bg_color, currentThemeSettings.dark.opacity)); + document.documentElement.style.setProperty('--floating-btn-bg-dark', hexToRgba(currentThemeSettings.dark.bg_color, currentThemeSettings.dark.opacity)); + + // 更新当前显示的卡片、筛选器和按钮 + document.querySelectorAll('.app-item').forEach(item => { + item.style.backgroundColor = cardBg; + }); + + document.querySelector('.filter-container').style.backgroundColor = filterBg; + document.querySelectorAll('.floating-btn').forEach(btn => { + btn.style.backgroundColor = floatingBtnBg; + }); + } + + // 其他辅助函数... + function updateUIWithSettings(settings) { + document.getElementById('lightPrimaryColor').value = settings.light.primary_color; + document.getElementById('lightTitleColor').value = settings.light.title_color; + document.getElementById('lightOpacity').value = settings.light.opacity; + document.getElementById('lightBgColor').value = settings.light.bg_color; + document.querySelector('#lightOpacity + .opacity-value').textContent = `${Math.round(settings.light.opacity * 100)}%`; + + document.getElementById('darkPrimaryColor').value = settings.dark.primary_color; + document.getElementById('darkTitleColor').value = settings.dark.title_color; + document.getElementById('darkOpacity').value = settings.dark.opacity; + document.getElementById('darkBgColor').value = settings.dark.bg_color; + document.querySelector('#darkOpacity + .opacity-value').textContent = `${Math.round(settings.dark.opacity * 100)}%`; + } + + function getDefaultThemeSettings() { + return { + light: { + primary_color: '#4361ee', + title_color: '#4361ee', + opacity: 0.3, + bg_color: '#ffffff' + }, + dark: { + primary_color: '#4361ee', + title_color: '#4361ee', + opacity: 0.7, + bg_color: '#1e1e1e' + } + }; + } + + // 保存主题设置 + async function saveThemeSettings() { + const settings = { + light: { + primary_color: document.getElementById('lightPrimaryColor').value, + title_color: document.getElementById('lightTitleColor').value, + opacity: parseFloat(document.getElementById('lightOpacity').value), + bg_color: document.getElementById('lightBgColor').value + }, + dark: { + primary_color: document.getElementById('darkPrimaryColor').value, + title_color: document.getElementById('darkTitleColor').value, + opacity: parseFloat(document.getElementById('darkOpacity').value), + bg_color: document.getElementById('darkBgColor').value + } + }; + + // 确保获取最新的登录状态 + const loggedIn = await checkLoginStatus(); + + currentThemeSettings = settings; + + if (loggedIn) { + try { + const response = await fetch('/api/theme_settings', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(settings) + }); + + if (response.ok) { + showNotification('主题设置已保存'); + // 登录用户保存成功后清除本地存储 + localStorage.removeItem('themeSettings'); + } else { + showNotification('保存失败', 'error'); + } + } catch (error) { + console.error('保存主题设置失败:', error); + showNotification('保存失败', 'error'); + } + } else { + // 未登录用户保存到本地 + localStorage.setItem('themeSettings', JSON.stringify(settings)); + showNotification('主题设置已保存到本地'); + } + + // 立即应用新设置 + applyCurrentThemeSettings(); + } + + resetBtn.addEventListener('click', () => { + const defaultSettings = getDefaultThemeSettings(); + updateUIWithSettings(defaultSettings); + currentThemeSettings = defaultSettings; + applyCurrentThemeSettings(); + }); + + saveBtn.addEventListener('click', saveThemeSettings); + + ['lightPrimaryColor', 'lightTitleColor', 'lightOpacity', 'lightBgColor'].forEach(id => { + document.getElementById(id).addEventListener('input', () => updateLivePreview('light')); + }); + + ['darkPrimaryColor', 'darkTitleColor', 'darkOpacity', 'darkBgColor'].forEach(id => { + document.getElementById(id).addEventListener('input', () => updateLivePreview('dark')); + }); + + function updateLivePreview(mode) { + const settings = { + light: { + primary_color: document.getElementById('lightPrimaryColor').value, + title_color: document.getElementById('lightTitleColor').value, + opacity: parseFloat(document.getElementById('lightOpacity').value), + bg_color: document.getElementById('lightBgColor').value + }, + dark: { + primary_color: document.getElementById('darkPrimaryColor').value, + title_color: document.getElementById('darkTitleColor').value, + opacity: parseFloat(document.getElementById('darkOpacity').value), + bg_color: document.getElementById('darkBgColor').value + } + }; + + if (mode === 'light') { + document.querySelector('#lightOpacity + .opacity-value').textContent = `${Math.round(settings.light.opacity * 100)}%`; + } else { + document.querySelector('#darkOpacity + .opacity-value').textContent = `${Math.round(settings.dark.opacity * 100)}%`; + } + + // 更新预览但不保存 + currentThemeSettings = settings; + applyCurrentThemeSettings(); + } + + // 监听主题切换事件 + document.addEventListener('themeChanged', () => { + if (currentThemeSettings) { + applyCurrentThemeSettings(); + } + }); + + // 监听登录状态变化 + document.addEventListener('loginStatusChanged', loadThemeSettings); + + // 初始化加载主题设置 + loadThemeSettings(); +} + + // 显示通知 + function showNotification(message, type = 'success') { + const notification = document.createElement('div'); + notification.className = `notification ${type}`; + notification.textContent = message; + document.body.appendChild(notification); + + setTimeout(() => { + notification.classList.add('fade-out'); + setTimeout(() => notification.remove(), 300); + }, 3000); + } + + // 备用的复制方法 + function fallbackCopyText(text) { + const textarea = document.createElement('textarea'); + textarea.value = text; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand('copy'); + document.body.removeChild(textarea); + showNotification('已复制到剪贴板'); + } + + // 初始化 + document.addEventListener('DOMContentLoaded', () => { + loadData(); + loadSettings(); + setupSearch(); + setupThemeSwitcher(); + setupCompactToggle(); + setupAdminButton(); + setupBackToTop(); + setupContextMenu(); + setupThemeSettings(); }); + + \ No newline at end of file