chore: v0.1.6 UI优化 - 两列网格布局、暗色适配、系统配置浮窗保存、退出登录统一到侧边栏

packages/frontend/src/App.vue

@@ -26,43 +26,107 @@ onMounted(() => {
 </script>
 
 <style>
+/* =============================================
+   CloudSearch Design System — Global Tokens
+   ============================================= */
 :root {
-  --bg: #f5f7fa;
+  /* ── Backgrounds ── */
+  --bg: #f0f2f5;
   --bg-card: #ffffff;
   --bg-input: #f5f7fa;
-  --text: #303133;
-  --text2: #909399;
-  --text3: #c0c4cc;
-  --border: #e4e7ed;
+  --bg-page: #f0f2f5;
+  --bg-card-header: linear-gradient(135deg, #f8f9fc 0%, #eef1f8 100%);
+
+  /* ── Text ── */
+  --text: #1d2129;
+  --text-secondary: #4e5969;
+  --text-tertiary: #86909c;
+  --text-placeholder: #c9cdd4;
+
+  /* ── Borders ── */
+  --border: #e5e6eb;
+  --border-light: #f2f3f5;
+
+  /* ── Primary ── */
   --primary: #409eff;
+  --primary-hover: #66b1ff;
   --primary-light: rgba(64, 158, 255, 0.08);
-  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-  --hover: #f5f7fa;
+  --primary-soft: #ecf5ff;
+
+  /* ── Shadows ── */
+  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
+
+  /* ── Radius ── */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+
+  /* ── Sizing ── */
+  --sidebar-w: 240px;
 }
 
 [data-theme="dark"] {
   --bg: #141414;
-  --bg-card: #1f1f1f;
+  --bg-card: #1d1d1d;
   --bg-input: #2a2a2a;
+  --bg-page: #0f0f0f;
+  --bg-card-header: linear-gradient(135deg, #1d1d1d 0%, #1a1a1a 100%);
+
   --text: #e5e5e5;
-  --text2: #999999;
-  --text3: #666666;
+  --text-secondary: #999999;
+  --text-tertiary: #666666;
+  --text-placeholder: #555555;
+
   --border: #333333;
+  --border-light: #2a2a2a;
+
   --primary: #409eff;
+  --primary-hover: #66b1ff;
   --primary-light: rgba(64, 158, 255, 0.15);
-  --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-  --hover: #2a2a2a;
+  --primary-soft: rgba(64, 158, 255, 0.1);
+
+  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
 [data-theme="dark"] body { background: var(--bg); color: var(--text); }
-[data-theme="dark"] .el-card, [data-theme="dark"] .el-dialog, [data-theme="dark"] .el-menu { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; }
-[data-theme="dark"] .el-input__wrapper, [data-theme="dark"] .el-select .el-input__wrapper { background-color: var(--bg-input) !important; border-color: var(--border) !important; }
-[data-theme="dark"] .el-input__inner, [data-theme="dark"] .el-textarea__inner { background-color: var(--bg-input) !important; color: var(--text) !important; }
-[data-theme="dark"] .el-button--default { background: var(--bg-card); border-color: var(--border); color: var(--text); }
-[data-theme="dark"] .rank-panel, [data-theme="dark"] .rank-item { background: var(--bg-card); border-color: var(--border); }
-[data-theme="dark"] .panel-title, [data-theme="dark"] .rank-name, [data-theme="dark"] .card-title { color: var(--text); }
-[data-theme="dark"] .card-meta, [data-theme="dark"] .rank-cnt, [data-theme="dark"] .panel-footer span:first-child { color: var(--text2); }
-[data-theme="dark"] .site-footer { background: var(--bg-card); border-color: var(--border); color: var(--text2); }
+[data-theme="dark"] .el-card,
+[data-theme="dark"] .el-dialog,
+[data-theme="dark"] .el-menu,
+[data-theme="dark"] .el-table,
+[data-theme="dark"] .el-select-dropdown,
+[data-theme="dark"] .el-popover {
+  --el-bg-color: var(--bg-card) !important;
+  --el-border-color: var(--border) !important;
+  --el-text-color-primary: var(--text) !important;
+}
+[data-theme="dark"] .el-dialog__body,
+[data-theme="dark"] .el-table__body td {
+  background-color: var(--bg-card) !important;
+}
+[data-theme="dark"] .el-table__header th {
+  background-color: #262626 !important;
+}
+[data-theme="dark"] .el-input__wrapper,
+[data-theme="dark"] .el-select .el-input__wrapper {
+  background-color: var(--bg-input) !important;
+  border-color: var(--border) !important;
+  box-shadow: 0 0 0 1px var(--border) inset !important;
+}
+[data-theme="dark"] .el-input__inner,
+[data-theme="dark"] .el-textarea__inner {
+  background-color: var(--bg-input) !important;
+  color: var(--text) !important;
+}
+[data-theme="dark"] .el-button--default {
+  background: var(--bg-card);
+  border-color: var(--border);
+  color: var(--text);
+}
 
 .theme-toggle {
   position: fixed;
@@ -79,10 +143,51 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-md);
   transition: all 0.3s;
 }
 .theme-toggle:hover { transform: scale(1.1); border-color: var(--primary); }
 
-#app { min-height: 100vh; background: var(--bg); color: var(--text); }
+#app { min-height: 100vh; background: var(--bg-page); color: var(--text); }
+
+/* ── Global element-plus overrides ── */
+.el-card {
+  border-radius: var(--radius-lg) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-sm) !important;
+  transition: box-shadow 0.2s ease;
+}
+.el-card:hover {
+  box-shadow: var(--shadow-md) !important;
+}
+.el-card__header {
+  padding: 16px 20px !important;
+  border-bottom: 1px solid var(--border-light) !important;
+  font-weight: 600;
+  font-size: 14px;
+  background: var(--bg-card-header);
+}
+.el-card__body {
+  padding: 20px !important;
+}
+
+/* ── Typography helpers ── */
+.form-tip {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.6;
+}
+.page-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+}
+.section-divider {
+  border-top: 1px solid var(--border-light);
+  margin: 20px 0;
+}
+
+/* ── Fade transition ── */
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>