feat(web): 前端全局重构专业量化后台(深色+红涨绿跌+设计系统)

- 设计系统 styles/tokens.css: 深色token(#0d1117底/#161b22卡片) + 红涨绿跌
  (--up#f85149/--down#3fb950) + 品牌蓝#1890ff + 间距/圆角/阴影/mono
- Element Plus深色(element-dark.css + dark/css-vars)+reset
- 删Vite脚手架残留(style.css重写/HelloWorld/hero/vite/vue资源)
- Layout重构(深色专业侧边)+Login+图表统一深色(useChart/echartsDark)
- 新建paper/Live.vue实走监控(step状态/净值/持仓/今日信号10s轮询)
- 业务页套.page头, 保留所有功能/路由/api
- 验证: vue-tsc --noEmit ✅ + npm run build ✅

frontend/src/styles/element-dark.css

@@ -0,0 +1,138 @@
+/* Element Plus 深色覆盖 —— html.dark 已启用 EP 官方深色，此处精修到量化主题 */
+html.dark {
+  /* 主色 → 品牌 */
+  --el-color-primary: #1890ff;
+  --el-color-primary-light-3: #2f7fce;
+  --el-color-primary-light-5: #1f5e9c;
+  --el-color-primary-light-7: #164670;
+  --el-color-primary-light-8: #113a5e;
+  --el-color-primary-light-9: #0e2f4d;
+  --el-color-primary-dark-2: #3a9eff;
+
+  /* 背景层级 */
+  --el-bg-color: var(--bg-card);
+  --el-bg-color-page: var(--bg);
+  --el-bg-color-overlay: var(--bg-overlay);
+
+  /* 文字 */
+  --el-text-color-primary: var(--text);
+  --el-text-color-regular: var(--text-2);
+  --el-text-color-secondary: var(--text-3);
+  --el-text-color-placeholder: var(--text-3);
+  --el-text-color-disabled: #4b5158;
+
+  /* 边框 */
+  --el-border-color: var(--border);
+  --el-border-color-light: var(--border-2);
+  --el-border-color-lighter: var(--border-2);
+  --el-border-color-extra-light: var(--border-2);
+  --el-border-color-dark: var(--border);
+  --el-border-color-darker: var(--border);
+
+  /* 填充 */
+  --el-fill-color: var(--bg-hover);
+  --el-fill-color-light: var(--bg-card);
+  --el-fill-color-lighter: var(--bg-card);
+  --el-fill-color-extra-light: var(--bg-card);
+  --el-fill-color-dark: var(--bg-hover);
+  --el-fill-color-darker: var(--bg-hover);
+  --el-fill-color-blank: transparent;
+
+  /* 遮罩/禁用 */
+  --el-mask-color: rgba(1, 4, 9, 0.72);
+  --el-disabled-bg-color: var(--bg-card);
+  --el-disabled-text-color: var(--text-3);
+  --el-disabled-border-color: var(--border-2);
+
+  /* 语义色（danger 用红、success 用绿，契合涨跌但保持语义） */
+  --el-color-success: #3fb950;
+  --el-color-warning: #d29922;
+  --el-color-danger: #f85149;
+  --el-color-error: #f85149;
+  --el-color-info: #8b949e;
+}
+
+/* 组件细节精修 */
+html.dark {
+  /* 卡片更紧凑、去多余阴影 */
+  .el-card {
+    background-color: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--r-md);
+    box-shadow: none;
+  }
+  .el-card__header {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+    font-weight: 600;
+    color: var(--text);
+  }
+  .el-card__body {
+    padding: 16px;
+  }
+
+  /* 表格密度 */
+  .el-table {
+    --el-table-bg-color: transparent;
+    --el-table-tr-bg-color: transparent;
+    --el-table-row-hover-bg-color: var(--bg-hover);
+    --el-table-header-bg-color: var(--bg-hover);
+    --el-table-border-color: var(--border-2);
+    --el-table-border: 1px solid var(--border-2);
+    --el-table-text-color: var(--text);
+    --el-table-header-text-color: var(--text-2);
+    font-size: 13px;
+  }
+  .el-table th.el-table__cell {
+    background-color: var(--bg-hover) !important;
+    font-weight: 600;
+  }
+  .el-table .cell {
+    line-height: 1.5;
+  }
+
+  /* 菜单 */
+  .el-menu {
+    --el-menu-bg-color: transparent;
+    --el-menu-text-color: var(--text-2);
+    --el-menu-hover-bg-color: var(--bg-hover);
+    --el-menu-active-color: var(--brand);
+    border-right: none;
+  }
+  .el-menu-item.is-active,
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    color: var(--brand);
+  }
+
+  /* 输入/选择器贴主题 */
+  .el-input__wrapper,
+  .el-textarea__inner,
+  .el-select__wrapper {
+    background-color: var(--bg) !important;
+    box-shadow: 0 0 0 1px var(--border) inset !important;
+  }
+  .el-input__wrapper:hover,
+  .el-select__wrapper:hover {
+    box-shadow: 0 0 0 1px var(--brand) inset !important;
+  }
+  .el-input.is-focus .el-input__wrapper,
+  .el-select__wrapper.is-focused {
+    box-shadow: 0 0 0 1px var(--brand) inset !important;
+  }
+
+  /* 描述列表/标签页 边框 */
+  .el-descriptions__border {
+    background-color: transparent;
+  }
+
+  /* 滚动条贴深色 */
+  .el-scrollbar__bar {
+    opacity: 0.5;
+  }
+
+  /* 数字用等宽（涨跌色由业务层控制） */
+  .num {
+    font-family: var(--mono);
+    font-variant-numeric: tabular-nums;
+  }
+}

frontend/src/styles/reset.css

@@ -0,0 +1,91 @@
+/* 全局 reset —— 后台基础：深色 / 紧凑 / 高数据密度 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 13px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4 {
+  margin: 0;
+  font-weight: 600;
+  color: var(--text);
+}
+
+p { margin: 0; }
+
+a {
+  color: var(--brand);
+  text-decoration: none;
+}
+
+/* 深色滚动条 */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover { background: #424a53; }
+
+/* ====== 布局工具类 ====== */
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+
+.page-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  padding-bottom: var(--sp-2);
+  border-bottom: 1px solid var(--border);
+}
+
+.page-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.page-subtitle {
+  font-size: 12px;
+  color: var(--text-3);
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+  letter-spacing: 0.3px;
+}
+
+/* 涨跌色工具 */
+.up { color: var(--up); }
+.down { color: var(--down); }
+.muted { color: var(--text-3); }
+
+/* 紧凑表单 */
+.el-form-item { margin-bottom: 16px; }
+
+/* 链接按钮无下划线 */
+.el-button.is-link { font-weight: 500; }

frontend/src/styles/tokens.css

@@ -0,0 +1,51 @@
+/* 量化后台设计 token —— 深色 / 高密度 / 红涨绿跌（A股惯例） */
+:root {
+  /* 背景层级 */
+  --bg: #0d1117;          /* 主背景 */
+  --bg-card: #161b22;     /* 卡片/面板 */
+  --bg-hover: #1c2128;    /* 悬停/表头 */
+  --bg-overlay: #1c2128;  /* 弹层 */
+
+  /* 文字 */
+  --text: #e6edf3;        /* 主 */
+  --text-2: #8b949e;      /* 次 */
+  --text-3: #6e7681;      /* 弱/占位 */
+
+  /* 语义色：红涨绿跌 */
+  --up: #f85149;          /* 涨/红 */
+  --down: #3fb950;        /* 跌/绿 */
+  --brand: #1890ff;       /* 品牌/链接/激活 */
+  --warn: #d29922;
+  --danger: #f85149;
+
+  /* 边框 */
+  --border: #30363d;
+  --border-2: #21262d;    /* 更弱的分隔线 */
+
+  /* 间距 */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 24px;
+  --sp-6: 32px;
+
+  /* 圆角 */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+
+  /* 阴影 */
+  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+
+  /* 字体 */
+  --mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, sans-serif;
+
+  /* 布局 */
+  --sidebar-w: 208px;
+  --header-h: 52px;
+
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+}