diff --git a/templates/icontest.html b/templates/icontest.html
new file mode 100644
index 0000000..e22c016
--- /dev/null
+++ b/templates/icontest.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index b75ff11..edbe4d2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -35,6 +35,29 @@
transition: background-color 0.3s ease, color 0.3s ease;
}
+ /* 新增私有卡片标记样式 */
+ .private-badge {
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 30px 30px 0;
+ border-color: transparent #f8961e transparent transparent;
+ border-radius: 0 12px 0 0; /* 只圆角右上角 */
+ }
+
+ .private-badge::after {
+ content: "私";
+ position: absolute;
+ top: 2px;
+ right: -25px;
+ color: white;
+ font-size: 10px;
+ transform: rotate(45deg);
+ }
+
img, svg {
vertical-align: middle;
margin-bottom: 7px !important;
@@ -333,15 +356,45 @@
overflow-x: auto;
padding-bottom: 10px;
scrollbar-width: thin;
- scrollbar-color: var(--primary-color) transparent;
+ scrollbar-color: #c2c3c9d6;
justify-content: center; /* 默认居中 */
padding: 0 20px; /* 添加内边距 */
+ scroll-behavior: smooth;
+ position: relative;
}
/* 当内容超出时靠左 */
.filter-row.scrollable {
justify-content: flex-start;
}
+
+/* 新增的滚动指示器 */
+.filter-row::before,
+.filter-row::after {
+ content: '';
+ position: sticky;
+ top: 0;
+ width: 40px;
+ height: 100%;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.filter-row::before {
+ left: 0;
+ background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
+}
+
+.filter-row::after {
+ right: 0;
+ background: linear-gradient(270deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
+}
+
+body.dark-theme .filter-row::before,
+body.dark-theme .filter-row::after {
+ background: linear-gradient(90deg, rgba(30,30,30,0.8) 0%, rgba(30,30,30,0) 100%);
+}
+
/* 自定义滚动条样式 */
.filter-row::-webkit-scrollbar {
height: 6px;
@@ -377,13 +430,13 @@
}
/* 一级标签样式 */
.filter-btn[data-level="1"] {
- font-size: 15px;
- padding: 4px 18px;
+ font-size: 13px;
+ padding: 4px 12px;
}
/* 二级标签样式 */
.filter-btn[data-level="2"] {
font-size: 13px;
- padding: 6px 12px;
+ padding: 4px 12px;
}
/* 分类选择器颜色 */
.filter-btn.dev {
@@ -419,9 +472,19 @@
overflow-x: auto;
padding-bottom: 10px;
scrollbar-width: thin;
- scrollbar-color: var(--primary-color) transparent;
+ scrollbar-color: #c2c3c9d6;
justify-content: center; /* 默认居中 */
padding: 0 20px; /* 添加内边距 */
+ scroll-behavior: smooth;
+ position: relative;
+}
+
+/* 私有主分类 */
+.category-title .badge {
+ font-size: 12px;
+ padding: 3px 6px;
+ vertical-align: middle;
+ margin-left: 8px;
}
/* 当内容超出时靠左 */
@@ -429,6 +492,33 @@
justify-content: flex-start;
}
+/* 新增的滚动指示器 */
+.secondary-filters-container::before,
+.secondary-filters-container::after {
+ content: '';
+ position: sticky;
+ top: 0;
+ width: 40px;
+ height: 100%;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.secondary-filters-container::before {
+ left: 0;
+ background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
+}
+
+.secondary-filters-container::after {
+ right: 0;
+ background: linear-gradient(270deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
+}
+
+body.dark-theme .secondary-filters-container::before,
+body.dark-theme .secondary-filters-container::after {
+ background: linear-gradient(90deg, rgba(30,30,30,0.8) 0%, rgba(30,30,30,0) 100%);
+}
+
/* 自定义二级筛选容器的滚动条样式 */
.secondary-filters-container::-webkit-scrollbar {
height: 6px;
@@ -813,7 +903,7 @@
});
}
- // 按权重对分类进行排序
+ // 按权重对分类进行排序（无论是否登录都排序）
categories = Object.fromEntries(
Object.entries(categories).sort((a, b) => {
const weightA = a[1].weight || 0;
@@ -835,671 +925,728 @@
}
});
- // 渲染界面
- renderFilters();
- renderApps();
- loadingSpinner.style.display = 'none';
- primaryFilters.querySelector('[data-filter="all"]').textContent = '全部';
- } 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; // 降序排列
+ })
+ );
+}
+});
+
+// 渲染界面
+renderFilters();
+renderApps();
+loadingSpinner.style.display = 'none';
+primaryFilters.querySelector('[data-filter="all"]').textContent = '全部';
+ } catch (error) {
+ console.error('加载数据失败:', error);
+ appListContainer.innerHTML = `
+
+ 加载数据失败，请刷新页面重试
+
+ `;
+ }
+}
+
+// 更新登录按钮状态
+function updateLoginButton() {
+if (isLoggedIn) {
+ loginBtn.innerHTML = '
';
+ loginBtn.href = '/logout';
+ loginBtn.title = '退出登录';
+ adminBtn.href = '/manage'; // 已登录时直接跳转到管理页面
+} else {
+ loginBtn.innerHTML = '
';
+ loginBtn.href = '/login';
+ loginBtn.title = '登录';
+ adminBtn.href = '/login?next=/manage'; // 未登录时跳转到登录页面
+}
+}
+
+// 根据分类ID获取对应的颜色类
+function getColorForCategory(categoryId) {
+return categoryId;
+}
+
+// 生成筛选按钮
+function renderFilters() {
+// 生成一级标签
+primaryFilters.innerHTML = '';
+const allPrimaryBtn = document.createElement('button');
+allPrimaryBtn.className = 'filter-btn active';
+allPrimaryBtn.textContent = '全部';
+allPrimaryBtn.dataset.level = '1';
+allPrimaryBtn.dataset.filter = 'all';
+allPrimaryBtn.addEventListener('click', () => {
+ setFilter('all', 'all');
+ showAllSecondaryFilters();
+ setAllPrimaryCaretDown(true);
+});
+primaryFilters.appendChild(allPrimaryBtn);
+
+// 添加一级标签按钮（从分类数据生成）
+Object.entries(categories).forEach(([catId, catData]) => {
+ const btn = document.createElement('button');
+ btn.className = `filter-btn ${catId}`;
+ btn.innerHTML = `
${catData.name}`;
+ btn.dataset.level = '1';
+ btn.dataset.filter = catId;
+ // 确保有颜色时才设置背景色
+ if (catData.color) {
+ btn.style.backgroundColor = catData.color;
+ btn.style.color = getContrastColor(catData.color);
+ }
+ btn.addEventListener('click', (e) => {
+ if (currentExpandedPrimary === catId) {
+ // 如果点击的是已展开的一级分类，则显示所有二级分类
+ showAllSecondaryFilters();
+ setFilter('all', 'all');
+ setAllPrimaryCaretDown(true);
+ } else {
+ // 否则展开该一级分类下的二级分类
+ expandSecondary(catId);
+ setFilter(catId, 'all');
+ setAllPrimaryCaretDown(false);
+ setPrimaryCaretDown(catId, true);
+ }
+ });
+ primaryFilters.appendChild(btn);
+});
+
+// 初始加载时显示所有二级标签
+showAllSecondaryFilters();
+}
+
+// 设置所有一级标签箭头的展开/收起状态
+function setAllPrimaryCaretDown(shouldDown) {
+const primaryBtns = primaryFilters.querySelectorAll('[data-level="1"]');
+primaryBtns.forEach(btn => {
+ if (btn.dataset.filter !== 'all') {
+ const caret = btn.querySelector('.caret');
+ if (caret) {
+ if (shouldDown) {
+ caret.classList.add('down');
+ } else {
+ caret.classList.remove('down');
+ }
+ }
+ }
+});
+}
+
+// 设置特定一级标签箭头的展开/收起状态
+function setPrimaryCaretDown(primaryId, shouldDown) {
+const btn = primaryFilters.querySelector(`[data-filter="${primaryId}"]`);
+if (btn) {
+ const caret = btn.querySelector('.caret');
+ if (caret) {
+ if (shouldDown) {
+ caret.classList.add('down');
+ } else {
+ caret.classList.remove('down');
+ }
+ }
+}
+}
+
+// 显示所有二级标签
+function showAllSecondaryFilters() {
+collapseAllSecondary();
+
+const container = document.createElement('div');
+container.className = 'secondary-filters-container show';
+container.id = 'secondary-all';
+
+const allSecondaryBtn = document.createElement('button');
+allSecondaryBtn.className = 'filter-btn active';
+allSecondaryBtn.textContent = '全部';
+allSecondaryBtn.dataset.level = '2';
+allSecondaryBtn.dataset.filter = 'all';
+allSecondaryBtn.addEventListener('click', () => {
+ setFilter('all', 'all');
+});
+container.appendChild(allSecondaryBtn);
+
+// 添加所有二级标签按钮（从分类数据生成）
+Object.entries(categories).forEach(([mainCatId, mainCatData]) => {
+ Object.entries(mainCatData.sub).forEach(([subCatId, subCatData]) => {
+ const btn = document.createElement('button');
+ btn.className = `filter-btn ${mainCatId}`;
+ 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', () => {
+ setFilter('all', subCatId);
+ });
+ container.appendChild(btn);
+ });
+});
+
+secondaryFiltersWrapper.innerHTML = '';
+secondaryFiltersWrapper.appendChild(container);
+currentExpandedPrimary = null;
+
+// 为新创建的二级筛选容器添加滚轮事件
+addWheelEventToContainer(container);
+}
+
+// 展开二级标签
+function expandSecondary(primaryFilterId) {
+collapseAllSecondary();
+
+const primaryBtn = primaryFilters.querySelector(`[data-filter="${primaryFilterId}"]`);
+if (primaryBtn && categories[primaryFilterId]) {
+ const container = document.createElement('div');
+ container.className = 'secondary-filters-container show';
+ container.id = `secondary-${primaryFilterId}`;
+
+ const allSecondaryBtn = document.createElement('button');
+ allSecondaryBtn.className = 'filter-btn active';
+ allSecondaryBtn.textContent = '全部';
+ allSecondaryBtn.dataset.level = '2';
+ allSecondaryBtn.dataset.filter = 'all';
+ allSecondaryBtn.addEventListener('click', () => {
+ setFilter(primaryFilterId, 'all');
+ });
+ 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', () => {
+ setFilter(primaryFilterId, subCatId);
+ });
+ container.appendChild(btn);
+ });
+
+ secondaryFiltersWrapper.innerHTML = '';
+ secondaryFiltersWrapper.appendChild(container);
+ currentExpandedPrimary = primaryFilterId;
+
+ // 为新创建的二级筛选容器添加滚轮事件
+ addWheelEventToContainer(container);
+}
+}
+
+// 收起所有二级标签
+function collapseAllSecondary() {
+secondaryFiltersWrapper.innerHTML = '';
+currentExpandedPrimary = null;
+}
+
+// 为滚动容器添加滚轮事件
+function addWheelEventToContainer(container) {
+container.addEventListener('wheel', (e) => {
+ if (e.deltaY !== 0) {
+ e.preventDefault();
+ container.scrollLeft += e.deltaY;
+ }
+});
+}
+
+// 设置当前筛选条件
+function setFilter(primaryFilter, secondaryFilter) {
+currentPrimaryFilter = primaryFilter;
+currentSecondaryFilter = secondaryFilter;
+
+// 更新按钮激活状态
+document.querySelectorAll('.filter-btn').forEach(btn => {
+ btn.classList.remove('active');
+});
+
+// 激活一级标签按钮
+if (primaryFilter === 'all') {
+ primaryFilters.querySelector('[data-filter="all"]').classList.add('active');
+} else {
+ const primaryBtn = primaryFilters.querySelector(`[data-filter="${primaryFilter}"]`);
+ if (primaryBtn) primaryBtn.classList.add('active');
+}
+
+// 激活二级标签按钮
+if (secondaryFilter === 'all') {
+ const container = document.querySelector('.secondary-filters-container');
+ if (container) {
+ const allBtn = container.querySelector('[data-filter="all"]');
+ if (allBtn) allBtn.classList.add('active');
+ }
+} else {
+ const secondaryBtn = document.querySelector(`[data-filter="${secondaryFilter}"]`);
+ if (secondaryBtn) secondaryBtn.classList.add('active');
+}
+
+// 重新渲染应用列表
+renderApps();
+}
+
+// 渲染应用列表
+function renderApps() {
+ appListContainer.innerHTML = '';
+
+ // 按一级标签分组
+ Object.entries(categories).forEach(([mainCatId, mainCatData]) => {
+ const groupApps = apps.filter(app => app.category.main === mainCatId);
+
+ // 应用筛选条件
+ let filteredGroupApps = groupApps;
+
+ // 一级标签筛选
+ if (currentPrimaryFilter !== 'all' && currentPrimaryFilter !== mainCatId) {
+ return; // 跳过不匹配的一级标签组
+ }
+
+ // 二级标签筛选
+ if (currentSecondaryFilter !== 'all') {
+ filteredGroupApps = filteredGroupApps.filter(app =>
+ app.category.sub === currentSecondaryFilter
+ );
+
+ if (filteredGroupApps.length === 0) {
+ return;
+ }
+ }
+
+ // 对应用按权重排序（权重越大越靠前）
+ filteredGroupApps.sort((a, b) => {
+ const weightA = a.weight || 0;
+ const weightB = b.weight || 0;
+ return weightB - weightA; // 降序排列
+ });
+
+ // 获取该分类下第一个应用的图标（如果有应用的话）
+ const firstAppIcon = filteredGroupApps.length > 0 ?
+ filteredGroupApps[0].icon :
+ 'fa-cube'; // 默认图标
+
+ // 创建分类组
+ const groupDiv = document.createElement('div');
+ groupDiv.className = 'app-group';
+
+ // 检查该主分类是否为私有分类且用户已登录
+ const isPrivateCategory = mainCatData.private && isLoggedIn;
+
+ // 添加分类标题（使用第一个应用的图标）
+ const titleDiv = document.createElement('div');
+ titleDiv.className = 'category-title';
+ titleDiv.innerHTML = `
${mainCatData.name}`;
+
+ // 如果是私有分类且已登录，添加私有标记
+ if (isPrivateCategory) {
+ const privateBadge = document.createElement('span');
+ privateBadge.className = 'badge bg-warning text-dark ms-2';
+ privateBadge.textContent = '私有';
+ titleDiv.appendChild(privateBadge);
+ }
+
+ groupDiv.appendChild(titleDiv);
+
+ // 创建应用列表
+ const appList = document.createElement('div');
+ appList.className = 'app-list';
+
+ // 添加应用卡片
+ filteredGroupApps.forEach(app => {
+ const subCatName = categories[app.category.main]?.sub[app.category.sub]?.name || app.category.sub;
+ const subCatColor = categories[app.category.main]?.sub[app.category.sub]?.color || mainCatData.color;
+
+ const appItem = document.createElement('a');
+ appItem.className = `app-item ${settings.card_style === 'compact' ? 'compact' : ''}`;
+ appItem.href = app.url;
+ appItem.target = '_blank';
+
+ // 如果是私有应用且已登录，添加私有标记
+ if (app.private && isLoggedIn) {
+ const privateBadge = document.createElement('div');
+ privateBadge.className = 'private-badge';
+ appItem.appendChild(privateBadge);
+ }
+
+ // 添加聊天气泡描述提示框
+ const descriptionDiv = document.createElement('div');
+ descriptionDiv.className = 'app-description';
+ descriptionDiv.textContent = app.description || '暂无描述';
+
+ // 判断是Font Awesome图标还是自定义图片
+ const iconHtml = app.icon.startsWith('/') || app.icon.startsWith('http') ?
+ `
` :
+ `
`;
+
+ appItem.innerHTML += `
+
+ ${iconHtml}
+
+
+
${app.title}
+
${new URL(app.url).hostname}
+
+ ${subCatName}
+
`;
- }
- }
- // 更新登录按钮状态
- function updateLoginButton() {
- if (isLoggedIn) {
- loginBtn.innerHTML = '
';
- loginBtn.href = '/logout';
- loginBtn.title = '退出登录';
- adminBtn.href = '/manage'; // 已登录时直接跳转到管理页面
+ appItem.prepend(descriptionDiv);
+ appList.appendChild(appItem);
+ });
+
+ groupDiv.appendChild(appList);
+ appListContainer.appendChild(groupDiv);
+ });
+
+ // 如果没有显示任何分类组，显示无结果提示
+ if (appListContainer.children.length === 0) {
+ const noResults = document.createElement('div');
+ noResults.className = 'no-results';
+ noResults.textContent = '没有找到匹配的应用';
+ appListContainer.appendChild(noResults);
+ }
+}
+
+// 辅助函数：计算对比色
+function getContrastColor(hexColor) {
+if (!hexColor) return '#ffffff';
+
+// 转换hex颜色为RGB
+const r = parseInt(hexColor.substr(1, 2), 16);
+const g = parseInt(hexColor.substr(3, 2), 16);
+const b = parseInt(hexColor.substr(5, 2), 16);
+
+// 计算亮度
+const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+// 根据亮度返回黑色或白色
+return brightness > 128 ? '#000000' : '#ffffff';
+}
+
+// 全局设置
+let settings = {
+theme: 'auto',
+card_style: 'normal',
+search_history: []
+};
+
+// 加载设置
+async function loadSettings() {
+try {
+ // 检查是否登录
+ isLoggedIn = await checkLoginStatus();
+
+ // 获取游客默认背景设置
+ const guestResponse = await fetch('/api/guest_settings');
+ const guestSettings = await guestResponse.json();
+
+ if (isLoggedIn) {
+ // 如果已登录，从服务器获取系统设置
+ const response = await fetch('/api/settings');
+ settings = await response.json();
+
+ // 设置背景图片
+ const lightBg = settings.bg_image === 'none' ? 'none' :
+ (settings.bg_image || '/static/background_light.jpg');
+ const darkBg = settings.dark_bg_image === 'none' ? 'none' :
+ (settings.dark_bg_image || '/static/background_dark.jpg');
+
+ setBackgroundImages(lightBg, darkBg);
+ } else {
+ // 如果未登录，先检查本地存储
+ const localSettings = localStorage.getItem('navSettings');
+ if (localSettings) {
+ const localSettingsObj = JSON.parse(localSettings);
+ // 从本地存储加载主题和卡片样式
+ settings.theme = localSettingsObj.theme || guestSettings.theme;
+ settings.card_style = localSettingsObj.card_style || guestSettings.card_style;
+ settings.search_history = localSettingsObj.search_history || [];
} else {
- loginBtn.innerHTML = '
';
- loginBtn.href = '/login';
- loginBtn.title = '登录';
- adminBtn.href = '/login?next=/manage'; // 未登录时跳转到登录页面
- }
- }
-
- // 根据分类ID获取对应的颜色类
- function getColorForCategory(categoryId) {
- return categoryId;
- }
-
- // 生成筛选按钮
- function renderFilters() {
- // 生成一级标签
- primaryFilters.innerHTML = '';
- const allPrimaryBtn = document.createElement('button');
- allPrimaryBtn.className = 'filter-btn active';
- allPrimaryBtn.textContent = '全部';
- allPrimaryBtn.dataset.level = '1';
- allPrimaryBtn.dataset.filter = 'all';
- allPrimaryBtn.addEventListener('click', () => {
- setFilter('all', 'all');
- showAllSecondaryFilters();
- setAllPrimaryCaretDown(true);
- });
- primaryFilters.appendChild(allPrimaryBtn);
-
- // 添加一级标签按钮（从分类数据生成）
- Object.entries(categories).forEach(([catId, catData]) => {
- const btn = document.createElement('button');
- btn.className = `filter-btn ${catId}`;
- btn.innerHTML = `
${catData.name}`;
- btn.dataset.level = '1';
- btn.dataset.filter = catId;
- // 确保有颜色时才设置背景色
- if (catData.color) {
- btn.style.backgroundColor = catData.color;
- btn.style.color = getContrastColor(catData.color);
- }
- btn.addEventListener('click', (e) => {
- if (currentExpandedPrimary === catId) {
- // 如果点击的是已展开的一级分类，则显示所有二级分类
- showAllSecondaryFilters();
- setFilter('all', 'all');
- setAllPrimaryCaretDown(true);
- } else {
- // 否则展开该一级分类下的二级分类
- expandSecondary(catId);
- setFilter(catId, 'all');
- setAllPrimaryCaretDown(false);
- setPrimaryCaretDown(catId, true);
- }
- });
- primaryFilters.appendChild(btn);
- });
-
- // 初始加载时显示所有二级标签
- showAllSecondaryFilters();
- }
-
- // 设置所有一级标签箭头的展开/收起状态
- function setAllPrimaryCaretDown(shouldDown) {
- const primaryBtns = primaryFilters.querySelectorAll('[data-level="1"]');
- primaryBtns.forEach(btn => {
- if (btn.dataset.filter !== 'all') {
- const caret = btn.querySelector('.caret');
- if (caret) {
- if (shouldDown) {
- caret.classList.add('down');
- } else {
- caret.classList.remove('down');
- }
- }
- }
- });
- }
-
- // 设置特定一级标签箭头的展开/收起状态
- function setPrimaryCaretDown(primaryId, shouldDown) {
- const btn = primaryFilters.querySelector(`[data-filter="${primaryId}"]`);
- if (btn) {
- const caret = btn.querySelector('.caret');
- if (caret) {
- if (shouldDown) {
- caret.classList.add('down');
- } else {
- caret.classList.remove('down');
- }
- }
- }
- }
-
- // 显示所有二级标签
- function showAllSecondaryFilters() {
- collapseAllSecondary();
-
- const container = document.createElement('div');
- container.className = 'secondary-filters-container show';
- container.id = 'secondary-all';
-
- const allSecondaryBtn = document.createElement('button');
- allSecondaryBtn.className = 'filter-btn active';
- allSecondaryBtn.textContent = '全部';
- allSecondaryBtn.dataset.level = '2';
- allSecondaryBtn.dataset.filter = 'all';
- allSecondaryBtn.addEventListener('click', () => {
- setFilter('all', 'all');
- });
- container.appendChild(allSecondaryBtn);
-
- // 添加所有二级标签按钮（从分类数据生成）
- Object.entries(categories).forEach(([mainCatId, mainCatData]) => {
- Object.entries(mainCatData.sub).forEach(([subCatId, subCatData]) => {
- const btn = document.createElement('button');
- btn.className = `filter-btn ${mainCatId}`;
- 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', () => {
- setFilter('all', subCatId);
- });
- container.appendChild(btn);
- });
- });
-
- secondaryFiltersWrapper.innerHTML = '';
- secondaryFiltersWrapper.appendChild(container);
- currentExpandedPrimary = null;
- }
-
- // 展开二级标签
- function expandSecondary(primaryFilterId) {
- collapseAllSecondary();
-
- const primaryBtn = primaryFilters.querySelector(`[data-filter="${primaryFilterId}"]`);
- if (primaryBtn && categories[primaryFilterId]) {
- const container = document.createElement('div');
- container.className = 'secondary-filters-container show';
- container.id = `secondary-${primaryFilterId}`;
-
- const allSecondaryBtn = document.createElement('button');
- allSecondaryBtn.className = 'filter-btn active';
- allSecondaryBtn.textContent = '全部';
- allSecondaryBtn.dataset.level = '2';
- allSecondaryBtn.dataset.filter = 'all';
- allSecondaryBtn.addEventListener('click', () => {
- setFilter(primaryFilterId, 'all');
- });
- 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', () => {
- setFilter(primaryFilterId, subCatId);
- });
- container.appendChild(btn);
- });
-
- secondaryFiltersWrapper.innerHTML = '';
- secondaryFiltersWrapper.appendChild(container);
- currentExpandedPrimary = primaryFilterId;
- }
- }
-
- // 收起所有二级标签
- function collapseAllSecondary() {
- secondaryFiltersWrapper.innerHTML = '';
- currentExpandedPrimary = null;
- }
-
- // 设置当前筛选条件
- function setFilter(primaryFilter, secondaryFilter) {
- currentPrimaryFilter = primaryFilter;
- currentSecondaryFilter = secondaryFilter;
-
- // 更新按钮激活状态
- document.querySelectorAll('.filter-btn').forEach(btn => {
- btn.classList.remove('active');
- });
-
- // 激活一级标签按钮
- if (primaryFilter === 'all') {
- primaryFilters.querySelector('[data-filter="all"]').classList.add('active');
- } else {
- const primaryBtn = primaryFilters.querySelector(`[data-filter="${primaryFilter}"]`);
- if (primaryBtn) primaryBtn.classList.add('active');
+ // 首次访问，使用接口返回的默认配置
+ settings.theme = guestSettings.theme;
+ settings.card_style = guestSettings.card_style;
}
- // 激活二级标签按钮
- if (secondaryFilter === 'all') {
- const container = document.querySelector('.secondary-filters-container');
- if (container) {
- const allBtn = container.querySelector('[data-filter="all"]');
- if (allBtn) allBtn.classList.add('active');
- }
- } else {
- const secondaryBtn = document.querySelector(`[data-filter="${secondaryFilter}"]`);
- if (secondaryBtn) secondaryBtn.classList.add('active');
- }
+ // 设置背景图片（始终使用服务器配置）
+ const lightBg = guestSettings.bg_image === 'none' ? 'none' :
+ (guestSettings.bg_image || '/static/background_light.jpg');
+ const darkBg = guestSettings.dark_bg_image === 'none' ? 'none' :
+ (guestSettings.dark_bg_image || '/static/background_dark.jpg');
- // 重新渲染应用列表
- renderApps();
+ setBackgroundImages(lightBg, darkBg);
}
- // 渲染应用列表
- function renderApps() {
- appListContainer.innerHTML = '';
+ applySettings();
+} catch (error) {
+ console.error('加载设置失败:', error);
+}
+}
- // 按一级标签分组
- Object.entries(categories).forEach(([mainCatId, mainCatData]) => {
- const groupApps = apps.filter(app => app.category.main === mainCatId);
+// 设置背景图片
+function setBackgroundImages(lightImage, darkImage) {
+// 移除现有的视频背景
+document.querySelectorAll('.video-bg-container').forEach(el => el.remove());
- // 应用筛选条件
- let filteredGroupApps = groupApps;
+// 处理明亮模式背景
+if (lightImage && lightImage.endsWith('.mp4')) {
+ const lightVideoContainer = document.createElement('div');
+ lightVideoContainer.className = 'video-bg-container bg-light';
+ lightVideoContainer.style.display = document.body.classList.contains('dark-theme') ? 'none' : 'block';
- // 一级标签筛选
- if (currentPrimaryFilter !== 'all' && currentPrimaryFilter !== mainCatId) {
- return; // 跳过不匹配的一级标签组
- }
+ const lightVideo = document.createElement('video');
+ lightVideo.className = 'video-bg';
+ lightVideo.src = lightImage;
+ lightVideo.autoplay = true;
+ lightVideo.loop = true;
+ lightVideo.muted = true;
+ lightVideo.playsInline = true;
- // 二级标签筛选
- if (currentSecondaryFilter !== 'all') {
- filteredGroupApps = filteredGroupApps.filter(app =>
- app.category.sub === currentSecondaryFilter
- );
+ lightVideoContainer.appendChild(lightVideo);
+ document.body.appendChild(lightVideoContainer);
+} else {
+ document.documentElement.style.setProperty('--bg-image', lightImage === 'none' ? 'none' : `url('${lightImage}')`);
+}
- if (filteredGroupApps.length === 0) {
- return;
- }
- }
+// 处理暗黑模式背景
+if (darkImage && darkImage.endsWith('.mp4')) {
+ const darkVideoContainer = document.createElement('div');
+ darkVideoContainer.className = 'video-bg-container bg-dark';
+ darkVideoContainer.style.display = document.body.classList.contains('dark-theme') ? 'block' : 'none';
- // 对应用按权重排序（权重越大越靠前）
- filteredGroupApps.sort((a, b) => {
- const weightA = a.weight || 0;
- const weightB = b.weight || 0;
- return weightB - weightA; // 降序排列
- });
+ const darkVideo = document.createElement('video');
+ darkVideo.className = 'video-bg';
+ darkVideo.src = darkImage;
+ darkVideo.autoplay = true;
+ darkVideo.loop = true;
+ darkVideo.muted = true;
+ darkVideo.playsInline = true;
- // 获取该分类下第一个应用的图标（如果有应用的话）
- const firstAppIcon = filteredGroupApps.length > 0 ?
- filteredGroupApps[0].icon :
- 'fa-cube'; // 默认图标
+ darkVideoContainer.appendChild(darkVideo);
+ document.body.appendChild(darkVideoContainer);
+} else {
+ document.documentElement.style.setProperty('--dark-bg-image', darkImage === 'none' ? 'none' : `url('${darkImage}')`);
+}
- // 创建分类组
- const groupDiv = document.createElement('div');
- groupDiv.className = 'app-group';
+// 添加背景加载完成的类
+setTimeout(() => {
+ document.body.classList.add('bg-loaded');
+}, 100);
+}
- // 添加分类标题（使用第一个应用的图标）
- const titleDiv = document.createElement('div');
- titleDiv.className = 'category-title';
- titleDiv.innerHTML = `
${mainCatData.name}`;
- groupDiv.appendChild(titleDiv);
+// 检查登录状态
+async function checkLoginStatus() {
+try {
+ const response = await fetch('/api/check_login');
+ const data = await response.json();
+ return data.logged_in;
+} catch (error) {
+ console.error('检查登录状态失败:', error);
+ return false;
+}
+}
- // 创建应用列表
- const appList = document.createElement('div');
- appList.className = 'app-list';
+// 应用设置
+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');
- // 添加应用卡片
- filteredGroupApps.forEach(app => {
- const subCatName = categories[app.category.main]?.sub[app.category.sub]?.name || app.category.sub;
- const subCatColor = categories[app.category.main]?.sub[app.category.sub]?.color || mainCatData.color;
+ // 显示/隐藏视频背景
+ 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');
- const appItem = document.createElement('a');
- appItem.className = `app-item ${settings.card_style === 'compact' ? 'compact' : ''}`;
- appItem.href = app.url;
- appItem.target = '_blank';
+ // 显示/隐藏视频背景
+ 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 descriptionDiv = document.createElement('div');
- descriptionDiv.className = 'app-description';
- descriptionDiv.textContent = app.description || '暂无描述';
+// 应用卡片样式
+document.querySelectorAll('.app-item').forEach(item => {
+ item.classList.toggle('compact', settings.card_style === 'compact');
+});
- // 判断是Font Awesome图标还是自定义图片
- const iconHtml = app.icon.startsWith('/') || app.icon.startsWith('http') ?
- `
` :
- `
`;
+// 更新主题按钮状态
+updateThemeButtonIcon();
+}
- appItem.innerHTML = `
-
- ${iconHtml}
-
-
-
${app.title}
-
${new URL(app.url).hostname}
-
- ${subCatName}
-
-
- `;
+// 更新主题按钮图标
+function updateThemeButtonIcon() {
+const themeToggle = document.getElementById('themeToggle');
+if (document.body.classList.contains('dark-theme')) {
+ themeToggle.textContent = '☀️';
+ themeToggle.title = '切换至明亮模式';
+} else {
+ themeToggle.textContent = '🌙';
+ themeToggle.title = '切换至暗黑模式';
+}
+}
- appItem.prepend(descriptionDiv);
- appList.appendChild(appItem);
- });
-
- groupDiv.appendChild(appList);
- appListContainer.appendChild(groupDiv);
- });
-
- // 如果没有显示任何分类组，显示无结果提示
- if (appListContainer.children.length === 0) {
- const noResults = document.createElement('div');
- noResults.className = 'no-results';
- noResults.textContent = '没有找到匹配的应用';
- appListContainer.appendChild(noResults);
- }
- }
-
- // 辅助函数：计算对比色
- function getContrastColor(hexColor) {
- if (!hexColor) return '#ffffff';
-
- // 转换hex颜色为RGB
- const r = parseInt(hexColor.substr(1, 2), 16);
- const g = parseInt(hexColor.substr(3, 2), 16);
- const b = parseInt(hexColor.substr(5, 2), 16);
-
- // 计算亮度
- const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-
- // 根据亮度返回黑色或白色
- return brightness > 128 ? '#000000' : '#ffffff';
- }
-
- // 全局设置
- let settings = {
- theme: 'auto',
- card_style: 'normal',
- search_history: []
+// 保存设置
+function saveSettings() {
+if (isLoggedIn) {
+ fetch('/api/settings', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(settings)
+ });
+} else {
+ // 游客只保存主题和卡片样式到本地
+ const settingsToSave = {
+ theme: settings.theme,
+ card_style: settings.card_style,
+ search_history: settings.search_history
};
+ localStorage.setItem('navSettings', JSON.stringify(settingsToSave));
+}
+}
- // 加载设置
- async function loadSettings() {
- try {
- // 检查是否登录
- isLoggedIn = await checkLoginStatus();
+// 搜索功能
+function setupSearch() {
+const searchInput = document.getElementById('searchInput');
+const searchResults = document.getElementById('searchResults');
+let searchTimeout;
- // 获取游客默认背景设置
- const guestResponse = await fetch('/api/guest_settings');
- const guestSettings = await guestResponse.json();
-
- if (isLoggedIn) {
- // 如果已登录，从服务器获取系统设置
- const response = await fetch('/api/settings');
- settings = await response.json();
-
- // 设置背景图片
- const lightBg = settings.bg_image === 'none' ? 'none' :
- (settings.bg_image || '/static/background_light.jpg');
- const darkBg = settings.dark_bg_image === 'none' ? 'none' :
- (settings.dark_bg_image || '/static/background_dark.jpg');
-
- setBackgroundImages(lightBg, darkBg);
- } else {
- // 如果未登录，先检查本地存储
- const localSettings = localStorage.getItem('navSettings');
- if (localSettings) {
- const localSettingsObj = JSON.parse(localSettings);
- // 从本地存储加载主题和卡片样式
- settings.theme = localSettingsObj.theme || guestSettings.theme;
- settings.card_style = localSettingsObj.card_style || guestSettings.card_style;
- settings.search_history = localSettingsObj.search_history || [];
- } else {
- // 首次访问，使用接口返回的默认配置
- settings.theme = guestSettings.theme;
- settings.card_style = guestSettings.card_style;
- }
-
- // 设置背景图片（始终使用服务器配置）
- const lightBg = guestSettings.bg_image === 'none' ? 'none' :
- (guestSettings.bg_image || '/static/background_light.jpg');
- const darkBg = guestSettings.dark_bg_image === 'none' ? 'none' :
- (guestSettings.dark_bg_image || '/static/background_dark.jpg');
-
- setBackgroundImages(lightBg, darkBg);
- }
-
- applySettings();
- } catch (error) {
- console.error('加载设置失败:', error);
- }
- }
-
- // 设置背景图片
- function setBackgroundImages(lightImage, darkImage) {
- // 移除现有的视频背景
- document.querySelectorAll('.video-bg-container').forEach(el => el.remove());
-
- // 处理明亮模式背景
- if (lightImage && lightImage.endsWith('.mp4')) {
- const lightVideoContainer = document.createElement('div');
- lightVideoContainer.className = 'video-bg-container bg-light';
- lightVideoContainer.style.display = document.body.classList.contains('dark-theme') ? 'none' : 'block';
-
- const lightVideo = document.createElement('video');
- lightVideo.className = 'video-bg';
- lightVideo.src = lightImage;
- lightVideo.autoplay = true;
- lightVideo.loop = true;
- lightVideo.muted = true;
- lightVideo.playsInline = true;
-
- lightVideoContainer.appendChild(lightVideo);
- document.body.appendChild(lightVideoContainer);
- } else {
- document.documentElement.style.setProperty('--bg-image', lightImage === 'none' ? 'none' : `url('${lightImage}')`);
- }
-
- // 处理暗黑模式背景
- if (darkImage && darkImage.endsWith('.mp4')) {
- const darkVideoContainer = document.createElement('div');
- darkVideoContainer.className = 'video-bg-container bg-dark';
- darkVideoContainer.style.display = document.body.classList.contains('dark-theme') ? 'block' : 'none';
-
- const darkVideo = document.createElement('video');
- darkVideo.className = 'video-bg';
- darkVideo.src = darkImage;
- darkVideo.autoplay = true;
- darkVideo.loop = true;
- darkVideo.muted = true;
- darkVideo.playsInline = true;
-
- darkVideoContainer.appendChild(darkVideo);
- document.body.appendChild(darkVideoContainer);
- } else {
- document.documentElement.style.setProperty('--dark-bg-image', darkImage === 'none' ? 'none' : `url('${darkImage}')`);
- }
-
- // 添加背景加载完成的类
- setTimeout(() => {
- document.body.classList.add('bg-loaded');
- }, 100);
- }
-
- // 检查登录状态
- async function checkLoginStatus() {
- try {
- const response = await fetch('/api/check_login');
- const data = await response.json();
- return data.logged_in;
- } catch (error) {
- console.error('检查登录状态失败:', error);
- return false;
- }
- }
-
- // 应用设置
- function applySettings() {
- // 应用主题
- document.body.classList.remove('dark-theme', 'light-theme');
- if (settings.theme === 'dark' ||
- (settings.theme === 'auto' && window.matchMedia('(prefers-color-sscheme: 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();
- }
-
- // 更新主题按钮图标
- function updateThemeButtonIcon() {
- const themeToggle = document.getElementById('themeToggle');
- if (document.body.classList.contains('dark-theme')) {
- themeToggle.textContent = '☀️';
- themeToggle.title = '切换至明亮模式';
- } else {
- themeToggle.textContent = '🌙';
- themeToggle.title = '切换至暗黑模式';
- }
- }
-
- // 保存设置
- function saveSettings() {
- if (isLoggedIn) {
- fetch('/api/settings', {
+searchInput.addEventListener('input', () => {
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(() => {
+ const keyword = searchInput.value.trim();
+ if (keyword.length > 0) {
+ fetch('/api/search', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
- body: JSON.stringify(settings)
+ body: JSON.stringify({ keyword })
+ })
+ .then(response => response.json())
+ .then(results => {
+ searchResults.innerHTML = '';
+ if (results.length > 0) {
+ results.forEach(app => {
+ const item = document.createElement('div');
+ item.className = 'search-result-item';
+ item.innerHTML = `
+
${app.title}
+
${app.url}
+ `;
+ item.addEventListener('click', () => {
+ window.open(app.url, '_blank');
+ });
+ searchResults.appendChild(item);
+ });
+ searchResults.style.display = 'block';
+ } else {
+ searchResults.innerHTML = '
无搜索结果
';
+ searchResults.style.display = 'block';
+ }
});
} else {
- // 游客只保存主题和卡片样式到本地
- const settingsToSave = {
- theme: settings.theme,
- card_style: settings.card_style,
- search_history: settings.search_history
- };
- localStorage.setItem('navSettings', JSON.stringify(settingsToSave));
+ searchResults.style.display = 'none';
}
+ }, 300);
+});
+
+document.addEventListener('click', (e) => {
+ if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
+ searchResults.style.display = 'none';
+ }
+});
+}
+
+// 主题切换功能
+function setupThemeSwitcher() {
+const themeToggle = document.getElementById('themeToggle');
+
+themeToggle.addEventListener('click', () => {
+ // 只在明亮和暗黑之间切换
+ if (document.body.classList.contains('dark-theme')) {
+ settings.theme = 'light';
+ document.body.classList.remove('dark-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');
+ } else {
+ settings.theme = 'dark';
+ 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');
}
- // 搜索功能
- function setupSearch() {
- const searchInput = document.getElementById('searchInput');
- const searchResults = document.getElementById('searchResults');
- let searchTimeout;
+ updateThemeButtonIcon();
+ saveSettings();
+});
+}
- searchInput.addEventListener('input', () => {
- clearTimeout(searchTimeout);
- searchTimeout = setTimeout(() => {
- const keyword = searchInput.value.trim();
- if (keyword.length > 0) {
- fetch('/api/search', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ keyword })
- })
- .then(response => response.json())
- .then(results => {
- searchResults.innerHTML = '';
- if (results.length > 0) {
- results.forEach(app => {
- const item = document.createElement('div');
- item.className = 'search-result-item';
- item.innerHTML = `
-
${app.title}
-
${app.url}
- `;
- item.addEventListener('click', () => {
- window.open(app.url, '_blank');
- });
- searchResults.appendChild(item);
- });
- searchResults.style.display = 'block';
- } else {
- searchResults.innerHTML = '
无搜索结果
';
- searchResults.style.display = 'block';
- }
- });
- } else {
- searchResults.style.display = 'none';
- }
- }, 300);
- });
+// 简洁模式切换
+function setupCompactToggle() {
+const compactToggle = document.getElementById('compactToggle');
+compactToggle.addEventListener('click', () => {
+ settings.card_style = settings.card_style === 'compact' ? 'normal' : 'compact';
+ applySettings();
+ saveSettings();
+});
+}
- document.addEventListener('click', (e) => {
- if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
- searchResults.style.display = 'none';
- }
- });
- }
+// 后台管理按钮点击事件
+function setupAdminButton() {
+adminBtn.addEventListener('click', async (e) => {
+ if (!isLoggedIn) {
+ e.preventDefault();
+ const loginCheck = await fetch('/api/check_login');
+ const loginData = await loginCheck.json();
- // 主题切换功能
- function setupThemeSwitcher() {
- const themeToggle = document.getElementById('themeToggle');
-
- themeToggle.addEventListener('click', () => {
- // 只在明亮和暗黑之间切换
- if (document.body.classList.contains('dark-theme')) {
- settings.theme = 'light';
- document.body.classList.remove('dark-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');
- } else {
- settings.theme = 'dark';
- 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');
- }
-
- updateThemeButtonIcon();
- saveSettings();
- });
- }
-
- // 简洁模式切换
- function setupCompactToggle() {
- const compactToggle = document.getElementById('compactToggle');
- compactToggle.addEventListener('click', () => {
- settings.card_style = settings.card_style === 'compact' ? 'normal' : 'compact';
- applySettings();
- saveSettings();
- });
- }
-
- // 后台管理按钮点击事件
- function setupAdminButton() {
- adminBtn.addEventListener('click', async (e) => {
- if (!isLoggedIn) {
- e.preventDefault();
- const loginCheck = await fetch('/api/check_login');
- const loginData = await loginCheck.json();
-
- if (!loginData.logged_in) {
- window.location.href = '/login?next=/manage';
- } else {
- window.location.href = '/manage';
- }
- }
- });
- }
-
- // 页面加载完成后初始化
- document.addEventListener('DOMContentLoaded', () => {
- loadData();
- loadSettings();
- setupSearch();
- setupThemeSwitcher();
- setupCompactToggle();
- setupAdminButton();
- });
-function checkScrollable() {
- document.querySelectorAll('.filter-row, .secondary-filters-container').forEach(container => {
- // 检查内容宽度是否大于容器宽度
- const isScrollable = container.scrollWidth > container.clientWidth;
-
- if(isScrollable) {
- container.classList.add('scrollable');
+ if (!loginData.logged_in) {
+ window.location.href = '/login?next=/manage';
} else {
- container.classList.remove('scrollable');
+ window.location.href = '/manage';
}
- });
+ }
+});
+}
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', () => {
+loadData();
+loadSettings();
+setupSearch();
+setupThemeSwitcher();
+setupCompactToggle();
+setupAdminButton();
+
+// 为静态的一级筛选容器添加滚轮事件
+primaryFilters.addEventListener('wheel', (e) => {
+ if (e.deltaY !== 0) {
+ e.preventDefault();
+ primaryFilters.scrollLeft += e.deltaY;
+ }
+});
+});
+
+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');
+ }
+});
}
// 初始化时检查
@@ -1508,8 +1655,8 @@ window.addEventListener('load', checkScrollable);
window.addEventListener('resize', checkScrollable);
// 内容变化时检查（如筛选器更新后）
new MutationObserver(checkScrollable).observe(document.body, {
- childList: true,
- subtree: true
+childList: true,
+subtree: true
});