diff --git a/web/static/css/style.css b/web/static/css/style.css
index 0a2be192..d5fc3d60 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -2355,6 +2355,98 @@ header {
padding: 24px;
}
+/* 设置页面布局 */
+.settings-layout {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ background: var(--bg-primary);
+}
+
+/* 设置侧边栏 */
+.settings-sidebar {
+ width: 200px;
+ background: var(--bg-primary);
+ border-right: 1px solid var(--border-color);
+ flex-shrink: 0;
+ padding: 0;
+}
+
+.settings-nav {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ padding: 0;
+}
+
+.settings-nav-item {
+ padding: 14px 20px;
+ cursor: pointer;
+ color: var(--text-primary);
+ font-size: 0.9375rem;
+ transition: all 0.2s ease;
+ background: transparent;
+ border-left: 3px solid transparent;
+ position: relative;
+}
+
+.settings-nav-item:hover {
+ background: var(--bg-secondary);
+}
+
+.settings-nav-item.active {
+ background: rgba(0, 102, 255, 0.08);
+ color: var(--accent-color);
+ font-weight: 500;
+ border-left-color: var(--accent-color);
+}
+
+/* 设置内容区域 */
+.settings-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 24px 32px;
+ background: var(--bg-primary);
+}
+
+.settings-section-content {
+ display: none;
+}
+
+.settings-section-content.active {
+ display: block;
+}
+
+.settings-section-header {
+ margin-bottom: 32px;
+}
+
+.settings-section-header h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 0;
+}
+
+.settings-subsection {
+ margin-bottom: 24px;
+ padding: 0;
+}
+
+.settings-subsection h4 {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin-bottom: 16px;
+}
+
+.settings-description {
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+ margin-bottom: 24px;
+ line-height: 1.6;
+}
+
.settings-section {
margin-bottom: 32px;
}
diff --git a/web/static/js/settings.js b/web/static/js/settings.js
index 8e3869cd..c59f9f70 100644
--- a/web/static/js/settings.js
+++ b/web/static/js/settings.js
@@ -17,6 +17,27 @@ let toolsPagination = {
totalPages: 0
};
+// 切换设置分类
+function switchSettingsSection(section) {
+ // 更新导航项状态
+ document.querySelectorAll('.settings-nav-item').forEach(item => {
+ item.classList.remove('active');
+ });
+ const activeNavItem = document.querySelector(`.settings-nav-item[data-section="${section}"]`);
+ if (activeNavItem) {
+ activeNavItem.classList.add('active');
+ }
+
+ // 更新内容区域显示
+ document.querySelectorAll('.settings-section-content').forEach(content => {
+ content.classList.remove('active');
+ });
+ const activeContent = document.getElementById(`settings-section-${section}`);
+ if (activeContent) {
+ activeContent.classList.add('active');
+ }
+}
+
// 打开设置
async function openSettings() {
// 切换到设置页面
@@ -34,6 +55,9 @@ async function openSettings() {
document.querySelectorAll('.form-group input').forEach(input => {
input.classList.remove('error');
});
+
+ // 默认显示基本设置
+ switchSettingsSection('basic');
}
// 关闭设置（保留函数以兼容旧代码，但现在不需要关闭功能）
diff --git a/web/templates/index.html b/web/templates/index.html
index 523f92ce..71a3b3f6 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -238,64 +238,92 @@
-