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/views/Layout.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
+const route = useRoute()
 const auth = useAuthStore()
 
+// 实走监控入口需要 aid，从模拟结果页进入；侧栏保持分组激活即可
+const activeMenu = computed(() => {
+  const p = route.path
+  if (p.startsWith('/paper')) return p
+  return p
+})
+
 function navigate(path: string): void {
   router.push(path)
 }
@@ -17,35 +26,53 @@ function onLogout(): void {
 
 <template>
   <el-container class="layout">
-    <el-aside width="200px" class="sidebar">
-      <div class="logo">三国量化</div>
-      <el-menu :default-active="$route.path" @select="navigate">
+    <aside class="sidebar">
+      <div class="logo">
+        <span class="logo-mark">SG</span>
+        <span class="logo-text">三国量化</span>
+      </div>
+      <el-menu :default-active="activeMenu" class="nav" @select="navigate">
         <el-sub-menu index="backtest">
-          <template #title><span>📊 回测</span></template>
+          <template #title>
+            <span class="nav-label">回测</span>
+          </template>
           <el-menu-item index="/backtest/new">新建回测</el-menu-item>
           <el-menu-item index="/backtest/optimize">参数优化</el-menu-item>
           <el-menu-item index="/backtest/history">历史任务</el-menu-item>
         </el-sub-menu>
-        <el-menu-item index="/factor/new">
-          <span>🔬 投研</span>
-        </el-menu-item>
-        <el-menu-item index="/paper/new">
-          <span>🧪 模拟</span>
-        </el-menu-item>
+
+        <el-sub-menu index="factor">
+          <template #title>
+            <span class="nav-label">投研</span>
+          </template>
+          <el-menu-item index="/factor/new">因子分析</el-menu-item>
+        </el-sub-menu>
+
+        <el-sub-menu index="paper">
+          <template #title>
+            <span class="nav-label">模拟</span>
+          </template>
+          <el-menu-item index="/paper/new">新建模拟盘</el-menu-item>
+        </el-sub-menu>
+
         <el-menu-item index="live" disabled>
-          <span>💰 实盘 <em class="muted">（D 期 · 国金 QMT）</em></span>
+          <span class="nav-label">实盘 <em class="nav-tip">国金 QMT · D 期</em></span>
         </el-menu-item>
       </el-menu>
-    </el-aside>
+      <div class="sidebar-foot">v2 · 量化研究台</div>
+    </aside>
+
     <el-container>
-      <el-header class="header">
-        <span class="sys-name">投研 + 回测 控制台</span>
+      <header class="header">
+        <span class="sys-name">投研 · 回测 · 模拟 控制台</span>
         <div class="user-area">
-          <span>{{ auth.username }}</span>
+          <span class="user-avatar">{{ (auth.username ?? '?').slice(0, 1).toUpperCase() }}</span>
+          <span class="user-name">{{ auth.username }}</span>
+          <span class="sep">|</span>
           <el-button link type="primary" @click="onLogout">登出</el-button>
         </div>
-      </el-header>
-      <el-main>
+      </header>
+      <el-main class="main">
         <router-view />
       </el-main>
     </el-container>
@@ -53,50 +80,112 @@ function onLogout(): void {
 </template>
 
 <style scoped>
-.layout {
-  height: 100vh;
-}
+.layout { height: 100vh; }
+
 .sidebar {
-  background: #001529;
-  color: #fff;
+  width: var(--sidebar-w);
+  background: var(--bg);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
 }
 .logo {
-  height: 60px;
-  line-height: 60px;
-  text-align: center;
-  font-size: 18px;
-  color: #fff;
-  background: #002140;
+  height: var(--header-h);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
 }
+.logo-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--r-sm);
+  background: var(--brand);
+  color: #fff;
+  font-weight: 700;
+  font-size: 12px;
+  font-family: var(--mono);
+}
+.logo-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: 0.5px;
+}
+
+.nav {
+  flex: 1;
+  padding: 8px;
+  border-right: none;
+}
+:deep(.nav .el-menu-item),
+:deep(.nav .el-sub-menu__title) {
+  height: 38px;
+  line-height: 38px;
+  border-radius: var(--r-sm);
+  margin: 2px 0;
+}
+.nav-label { font-size: 13px; }
+.nav-tip {
+  color: var(--text-3);
+  font-style: normal;
+  font-size: 11px;
+  margin-left: 4px;
+}
+
+.sidebar-foot {
+  padding: 10px 16px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--text-3);
+  font-family: var(--mono);
+}
+
 .header {
+  height: var(--header-h);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
-  border-bottom: 1px solid #eee;
+  padding: 0 20px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
 }
 .sys-name {
+  font-size: 13px;
   font-weight: 600;
+  color: var(--text);
+  letter-spacing: 0.4px;
 }
 .user-area {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-2);
 }
-.muted {
-  color: #999;
-  font-style: normal;
-  font-size: 12px;
+.user-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  color: var(--text-2);
+  font-size: 11px;
+  font-weight: 600;
 }
-:deep(.el-menu) {
-  background: transparent;
-  border-right: none;
-}
-:deep(.el-menu-item) {
-  color: #ccc;
-}
-:deep(.el-menu-item.is-active) {
-  color: #fff;
-  background: #1890ff;
+.user-name { color: var(--text); }
+.sep { color: var(--border); }
+
+.main {
+  background: var(--bg);
+  padding: 20px;
 }
 </style>

frontend/src/views/Login.vue

@@ -34,20 +34,32 @@ async function onSubmit(): Promise<void> {
 
 <template>
   <div class="login-wrap">
-    <el-card class="login-card">
-      <template #header>
-        <h2 class="login-title">三国量化研究台</h2>
-      </template>
+    <div class="login-card">
+      <div class="brand">
+        <span class="brand-mark">SG</span>
+        <div class="brand-text">
+          <h1 class="brand-title">三国量化研究台</h1>
+          <p class="brand-sub">Sanguo Quant Research Terminal</p>
+        </div>
+      </div>
       <el-form label-position="top" @submit.prevent="onSubmit">
         <el-form-item label="用户名">
           <el-input v-model="form.username" placeholder="admin" />
         </el-form-item>
         <el-form-item label="密码">
-          <el-input v-model="form.password" type="password" show-password placeholder="请输入密码" @keyup.enter="onSubmit" />
+          <el-input
+            v-model="form.password"
+            type="password"
+            show-password
+            placeholder="请输入密码"
+            @keyup.enter="onSubmit"
+          />
         </el-form-item>
-        <el-button type="primary" :loading="loading" style="width: 100%" @click="onSubmit">登录</el-button>
+        <el-button type="primary" :loading="loading" class="submit" @click="onSubmit">
+          登录
+        </el-button>
       </el-form>
-    </el-card>
+    </div>
   </div>
 </template>
 
@@ -57,13 +69,51 @@ async function onSubmit(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f0f2f5;
+  background:
+    radial-gradient(circle at 70% 20%, rgba(24, 144, 255, 0.08), transparent 50%),
+    radial-gradient(circle at 20% 80%, rgba(248, 81, 73, 0.05), transparent 45%),
+    var(--bg);
 }
 .login-card {
   width: 360px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  padding: 32px;
+  box-shadow: var(--shadow);
 }
-.login-title {
-  margin: 0;
-  text-align: center;
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 28px;
+}
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--r-md);
+  background: var(--brand);
+  color: #fff;
+  font-weight: 700;
+  font-size: 16px;
+  font-family: var(--mono);
+}
+.brand-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+}
+.brand-sub {
+  font-size: 11px;
+  color: var(--text-3);
+  letter-spacing: 0.5px;
+  font-family: var(--mono);
+}
+.submit {
+  width: 100%;
+  margin-top: 8px;
 }
 </style>

frontend/src/views/backtest/History.vue

@@ -29,10 +29,14 @@ function open(row: TaskListItem): void {
 </script>
 
 <template>
-  <el-card v-loading="loading">
-    <template #header>
-      <h3>历史任务</h3>
-    </template>
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">历史任务</h2>
+        <p class="page-subtitle">回测 / 因子分析 任务列表</p>
+      </div>
+    </div>
+    <el-card v-loading="loading">
     <el-table :data="tasks" stripe size="small" empty-text="暂无历史任务">
       <el-table-column prop="task_id" label="任务 ID" min-width="220" />
       <el-table-column prop="type" label="类型" width="80" />
@@ -47,5 +51,6 @@ function open(row: TaskListItem): void {
         </template>
       </el-table-column>
     </el-table>
-  </el-card>
+    </el-card>
+  </div>
 </template>

frontend/src/views/backtest/New.vue

@@ -77,10 +77,14 @@ async function onSubmit(): Promise<void> {
 </script>
 
 <template>
-  <el-card v-loading="loading">
-    <template #header>
-      <h3>新建回测</h3>
-    </template>
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">新建回测</h2>
+        <p class="page-subtitle">选择策略与标的，提交后进入进度跟踪</p>
+      </div>
+    </div>
+    <el-card v-loading="loading">
     <el-form :model="form" label-width="120px">
       <el-form-item label="策略">
         <el-select v-model="form.strategy" placeholder="选择策略" style="width: 280px">
@@ -103,5 +107,6 @@ async function onSubmit(): Promise<void> {
         <el-button type="primary" :loading="submitting" @click="onSubmit">提交回测</el-button>
       </el-form-item>
     </el-form>
-  </el-card>
+    </el-card>
+  </div>
 </template>

frontend/src/views/backtest/Optimize.vue

@@ -90,10 +90,14 @@ async function onSubmit(): Promise<void> {
 </script>
 
 <template>
-  <el-card v-loading="loading || polling" :element-loading-text="stageText || '优化中…'">
-    <template #header>
-      <h3>参数优化</h3>
-    </template>
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">参数优化</h2>
+        <p class="page-subtitle">参数网格搜索 · 自动轮询结果</p>
+      </div>
+    </div>
+    <el-card v-loading="loading || polling" :element-loading-text="stageText || '优化中…'">
     <el-form :model="form" label-width="120px">
       <el-form-item label="策略">
         <el-select v-model="form.strategy" style="width: 280px">
@@ -129,5 +133,6 @@ async function onSubmit(): Promise<void> {
         <template #default="{ row }">{{ fmt(row.statistics?.[k]) }}</template>
       </el-table-column>
     </el-table>
-  </el-card>
+    </el-card>
+  </div>
 </template>

frontend/src/views/backtest/Progress.vue

@@ -26,19 +26,30 @@ function pct(): number {
 </script>
 
 <template>
-  <el-card>
-    <h3>回测进行中</h3>
-    <p>任务 ID：{{ taskId }}</p>
-    <p>
-      状态：
-      <el-tag :type="status === 'done' ? 'success' : status === 'failed' ? 'danger' : 'warning'">
-        {{ status }}
-      </el-tag>
-    </p>
-    <p>阶段：{{ stage || '—' }}</p>
-    <el-progress
-      :percentage="pct()"
-      :status="status === 'failed' ? 'exception' : status === 'done' ? 'success' : undefined"
-    />
-  </el-card>
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">任务进行中</h2>
+        <p class="page-subtitle">任务 ID：{{ taskId }}</p>
+      </div>
+    </div>
+    <el-card>
+      <p class="progress-status">
+        状态：
+        <el-tag :type="status === 'done' ? 'success' : status === 'failed' ? 'danger' : 'warning'">
+          {{ status }}
+        </el-tag>
+      </p>
+      <p class="progress-stage">阶段：{{ stage || '—' }}</p>
+      <el-progress
+        :percentage="pct()"
+        :status="status === 'failed' ? 'exception' : status === 'done' ? 'success' : undefined"
+      />
+    </el-card>
+  </div>
 </template>
+
+<style scoped>
+.progress-status { margin-bottom: 8px; }
+.progress-stage { margin-bottom: 16px; color: var(--text-2); }
+</style>

frontend/src/views/backtest/Result.vue

@@ -51,9 +51,15 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-loading="loading">
+  <div v-loading="loading" class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">回测结果 <span class="muted">{{ taskId }}</span></h2>
+        <p class="page-subtitle">统计指标 / 资金曲线 / K 线买卖点 / 成交明细</p>
+      </div>
+    </div>
     <el-card>
-      <template #header><h3>统计指标</h3></template>
+      <template #header><span class="section-title">统计指标</span></template>
       <el-descriptions :column="4" border>
         <el-descriptions-item v-for="e in statEntries" :key="e.key" :label="e.key">
           {{ e.value }}
@@ -61,17 +67,17 @@ onMounted(async () => {
       </el-descriptions>
     </el-card>
 
-    <el-row :gutter="16" style="margin-top: 16px">
+    <el-row :gutter="16">
       <el-col :span="12"><el-card><EquityChart :data="equity" /></el-card></el-col>
       <el-col :span="12"><el-card><DailyPnlChart :data="pnl" /></el-card></el-col>
     </el-row>
 
-    <el-card style="margin-top: 16px">
+    <el-card>
       <KlineChart :kline="kline" :trades="trades" />
     </el-card>
 
-    <el-card style="margin-top: 16px">
-      <template #header><h3>成交记录</h3></template>
+    <el-card>
+      <template #header><span class="section-title">成交记录</span></template>
       <TradesTable :trades="trades" />
     </el-card>
   </div>

frontend/src/views/factor/New.vue

@@ -55,10 +55,14 @@ async function onSubmit(): Promise<void> {
 </script>
 
 <template>
-  <el-card v-loading="loading">
-    <template #header>
-      <h3>新建因子分析</h3>
-    </template>
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">因子分析</h2>
+        <p class="page-subtitle">IC 横截面分析（≥2 标的）· 生成 tears 报告</p>
+      </div>
+    </div>
+    <el-card v-loading="loading">
     <el-form label-width="140px">
       <el-form-item label="因子">
         <el-select v-model="form.factor_names" multiple placeholder="选择因子" style="width: 380px">
@@ -78,5 +82,6 @@ async function onSubmit(): Promise<void> {
         <el-button type="primary" :loading="submitting" @click="onSubmit">提交分析</el-button>
       </el-form-item>
     </el-form>
-  </el-card>
+    </el-card>
+  </div>
 </template>

frontend/src/views/factor/Result.vue

@@ -53,11 +53,15 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-loading="loading">
+  <div v-loading="loading" class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">因子分析结果 <span class="muted">{{ taskId }}</span></h2>
+        <p class="page-subtitle">IC 统计 / tears 报告</p>
+      </div>
+    </div>
     <el-card>
-      <template #header>
-        <h3>IC 统计</h3>
-      </template>
+      <template #header><span class="section-title">IC 统计</span></template>
       <el-table :data="rows" stripe size="small" empty-text="无 IC 数据">
         <el-table-column prop="factor" label="因子" width="120" />
         <el-table-column prop="period" label="周期" width="80" />
@@ -79,10 +83,8 @@ onMounted(async () => {
       </el-table>
     </el-card>
 
-    <el-card v-for="f in factors" :key="f" style="margin-top: 16px">
-      <template #header>
-        <h3>tears 报告 — {{ f }}</h3>
-      </template>
+    <el-card v-for="f in factors" :key="f">
+      <template #header><span class="section-title">tears 报告 — {{ f }}</span></template>
       <iframe :src="reportUrl(taskId, f)" style="width: 100%; height: 600px; border: 0" />
     </el-card>
   </div>

frontend/src/views/paper/Live.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  getPaper, getEquity, getPositions, getPending, getTrades,
+  type PaperAccount, type BalancePoint, type PositionRow, type PendingOrder, type PaperTrade,
+} from '@/api/paper'
+import type { EquityPoint } from '@/api/backtest'
+import EquityChart from '@/components/charts/EquityChart.vue'
+
+const route = useRoute()
+const aid = Number(route.params.aid)
+
+const loading = ref(true)
+const account = ref<PaperAccount | null>(null)
+const equity = ref<BalancePoint[]>([])
+const positions = ref<PositionRow[]>([])
+const pending = ref<PendingOrder[]>([])
+const trades = ref<PaperTrade[]>([])
+let timer: ReturnType<typeof setInterval> | null = null
+
+const statusType = computed(() => {
+  const s = account.value?.status ?? ''
+  if (s === 'running') return 'warning'
+  if (s === 'done') return 'success'
+  if (s === 'failed') return 'danger'
+  return 'info'
+})
+
+const equitySeries = computed<EquityPoint[]>(() =>
+  equity.value.map((p) => ({ date: p.date, balance: p.total_equity })),
+)
+
+const todayStr = new Date().toISOString().slice(0, 10)
+const todayTrades = computed(() =>
+  trades.value.filter((t) => String(t.bar_date).slice(0, 10) === todayStr),
+)
+
+function orDash(v: string | null | undefined): string {
+  return v && v !== 'None' ? v : '—'
+}
+
+async function load(): Promise<void> {
+  try {
+    const [acc, eq, pos, pend, tr] = await Promise.all([
+      getPaper(aid), getEquity(aid), getPositions(aid), getPending(aid), getTrades(aid),
+    ])
+    account.value = acc
+    equity.value = eq
+    positions.value = pos
+    pending.value = pend
+    trades.value = tr
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  void load()
+  timer = setInterval(load, 10000)
+})
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<template>
+  <div v-loading="loading" class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">实走监控 <span class="muted">#{{ aid }}</span></h2>
+        <p class="page-subtitle">实走（live）模式每日定时 step · 每 10s 刷新</p>
+      </div>
+      <el-tag v-if="account" :type="statusType" effect="dark" size="large">
+        {{ account.status }}
+      </el-tag>
+    </div>
+
+    <!-- step 状态卡片 -->
+    <div class="stat-row">
+      <div class="stat">
+        <span class="stat-label">模式</span>
+        <span class="stat-value">{{ account?.mode ?? '—' }}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">频率</span>
+        <span class="stat-value">{{ account?.interval ?? '—' }}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">上次运行</span>
+        <span class="stat-value num">{{ orDash(account?.last_run_date) }}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">下次运行</span>
+        <span class="stat-value num">{{ orDash(account?.next_run_at) }}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">检查点</span>
+        <span class="stat-value num">{{ orDash(account?.checkpoint_date) }}</span>
+      </div>
+    </div>
+
+    <el-alert
+      v-if="account?.error_msg"
+      type="error"
+      :title="account.error_msg"
+      :closable="false"
+    />
+
+    <!-- 净值曲线 -->
+    <el-card>
+      <template #header><span class="section-title">账户净值</span></template>
+      <EquityChart :data="equitySeries" />
+    </el-card>
+
+    <el-row :gutter="16">
+      <!-- 持仓 -->
+      <el-col :span="12">
+        <el-card>
+          <template #header><span class="section-title">当前持仓</span></template>
+          <el-table :data="positions" size="small" empty-text="无持仓">
+            <el-table-column prop="symbol" label="标的" min-width="90" />
+            <el-table-column prop="volume" label="总持仓" width="90" class-name="num" />
+            <el-table-column prop="frozen" label="冻结" width="80" class-name="num" />
+            <el-table-column prop="avg_price" label="均价" width="90" class-name="num" />
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <!-- 待成交（跨日 pending） -->
+      <el-col :span="12">
+        <el-card>
+          <template #header><span class="section-title">待成交（跨日 Pending）</span></template>
+          <el-table :data="pending" size="small" empty-text="无待成交订单">
+            <el-table-column prop="strategy_id" label="策略" min-width="120" />
+            <el-table-column prop="symbol" label="标的" width="90" />
+            <el-table-column prop="side" label="方向" width="70" />
+            <el-table-column prop="volume" label="数量" width="80" class-name="num" />
+            <el-table-column prop="price" label="价格" width="90" class-name="num" />
+            <el-table-column label="类型" width="70">
+              <template #default="{ row }">{{ row.is_market ? '市价' : '限价' }}</template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 今日信号 -->
+    <el-card>
+      <template #header><span class="section-title">今日成交信号</span></template>
+      <el-table :data="todayTrades" size="small" empty-text="今日无成交">
+        <el-table-column prop="bar_date" label="时间" min-width="140" />
+        <el-table-column prop="strategy_id" label="策略" min-width="120" />
+        <el-table-column prop="symbol" label="标的" width="90" />
+        <el-table-column label="方向" width="70">
+          <template #default="{ row }">
+            <span :class="row.direction === '买' ? 'up' : 'down'">{{ row.direction }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="price" label="价格" width="90" class-name="num" />
+        <el-table-column prop="volume" label="数量" width="80" class-name="num" />
+        <el-table-column prop="reject_reason" label="拒因" min-width="100" />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--sp-3);
+}
+.stat {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.stat-label {
+  font-size: 11px;
+  color: var(--text-3);
+  letter-spacing: 0.3px;
+}
+.stat-value {
+  font-size: 15px;
+  color: var(--text);
+  font-weight: 600;
+}
+
+@media (max-width: 1100px) {
+  .stat-row { grid-template-columns: repeat(2, 1fr); }
+}
+</style>

frontend/src/views/paper/New.vue

@@ -35,7 +35,14 @@ function onSymbols(v: string): void {
 </script>
 
 <template>
-  <el-card header="新建模拟盘">
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">新建模拟盘</h2>
+        <p class="page-subtitle">回放（replay）或实走（live）· 支持日频 / 15 分钟</p>
+      </div>
+    </div>
+    <el-card>
     <el-form :model="form" label-width="120px">
       <el-form-item label="模式">
         <el-select v-model="form.mode">
@@ -72,5 +79,6 @@ function onSymbols(v: string): void {
         <el-button type="primary" :loading="loading" @click="onSubmit">创建模拟盘</el-button>
       </el-form-item>
     </el-form>
-  </el-card>
+    </el-card>
+  </div>
 </template>

frontend/src/views/paper/Result.vue

@@ -1,23 +1,26 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import {
   getEquity, getTrades, getStrategies, getPaper,
   type BalancePoint, type PaperTrade, type StrategySummary,
 } from '@/api/paper'
 
 const route = useRoute()
+const router = useRouter()
 const aid = Number(route.params.id)
 const equity = ref<BalancePoint[]>([])
 const trades = ref<PaperTrade[]>([])
 const strategies = ref<StrategySummary[]>([])
 const status = ref<string>('')
+const mode = ref<string>('')
 let timer: ReturnType<typeof setInterval> | null = null
 
 async function load(): Promise<void> {
   try {
     const acc = await getPaper(aid)
     status.value = acc.status
+    mode.value = acc.mode
   } catch {
     /* ignore */
   }
@@ -26,6 +29,10 @@ async function load(): Promise<void> {
   strategies.value = await getStrategies(aid)
 }
 
+function toLive(): void {
+  router.push(`/paper/live/${aid}`)
+}
+
 onMounted(() => {
   void load()
   timer = setInterval(async () => {
@@ -46,43 +53,53 @@ function rowClass({ row }: { row: PaperTrade }): string {
 </script>
 
 <template>
-  <div>
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">模拟盘结果 <span class="muted">#{{ aid }}</span></h2>
+        <p class="page-subtitle">模式：{{ mode || '—' }} · 状态：{{ status || '—' }}</p>
+      </div>
+      <el-button v-if="mode === 'live'" type="primary" @click="toLive">进入实走监控 →</el-button>
+    </div>
+
     <el-alert
       v-if="status === 'running' || status === 'pending' || status === 'created'"
       type="info"
       :closable="false"
-      style="margin-bottom: 16px"
     >
       回放进行中（{{ status }}）…每 3 秒刷新，完成自动停止
     </el-alert>
-    <el-alert v-else-if="status === 'failed'" type="error" :closable="false" style="margin-bottom: 16px">
+    <el-alert v-else-if="status === 'failed'" type="error" :closable="false">
       回放失败
     </el-alert>
 
-    <el-card header="账户净值" style="margin-bottom: 16px">
+    <el-card>
+      <template #header><span class="section-title">账户净值</span></template>
       <el-table :data="equity" size="small" max-height="240">
         <el-table-column prop="date" label="日期" />
-        <el-table-column prop="total_equity" label="总净值" />
-        <el-table-column prop="cash" label="现金" />
-        <el-table-column prop="market_value" label="市值" />
+        <el-table-column prop="total_equity" label="总净值" class-name="num" />
+        <el-table-column prop="cash" label="现金" class-name="num" />
+        <el-table-column prop="market_value" label="市值" class-name="num" />
       </el-table>
     </el-card>
-    <el-card header="分策略归因" style="margin-bottom: 16px">
+    <el-card>
+      <template #header><span class="section-title">分策略归因</span></template>
       <el-table :data="strategies" size="small">
         <el-table-column prop="strategy_id" label="策略" />
-        <el-table-column prop="filled" label="成交" />
-        <el-table-column prop="rejected" label="拒单" />
-        <el-table-column prop="commission" label="费用" />
+        <el-table-column prop="filled" label="成交" class-name="num" />
+        <el-table-column prop="rejected" label="拒单" class-name="num" />
+        <el-table-column prop="commission" label="费用" class-name="num" />
       </el-table>
     </el-card>
-    <el-card header="成交明细（拒单高亮）">
+    <el-card>
+      <template #header><span class="section-title">成交明细（拒单高亮）</span></template>
       <el-table :data="trades" size="small" :row-class-name="rowClass">
         <el-table-column prop="bar_date" label="日期" />
         <el-table-column prop="strategy_id" label="策略" />
         <el-table-column prop="symbol" label="标的" />
         <el-table-column prop="direction" label="方向" />
-        <el-table-column prop="price" label="价格" />
-        <el-table-column prop="volume" label="数量" />
+        <el-table-column prop="price" label="价格" class-name="num" />
+        <el-table-column prop="volume" label="数量" class-name="num" />
         <el-table-column prop="reject_reason" label="拒因" />
       </el-table>
     </el-card>
@@ -91,6 +108,6 @@ function rowClass({ row }: { row: PaperTrade }): string {
 
 <style scoped>
 :deep(.rejected-row) {
-  color: #f56c6c;
+  color: var(--danger);
 }
 </style>