Restyle the web UI as a dark trading terminal

- Single palette (web/src/styles/palette.ts) taken from the Stitch
  design, exposed as ap-* UnoCSS colors and --ap-* CSS variables and
  used for Element Plus dark theme overrides, KLineChart and the news
  iframe; zero radius, JetBrains Mono / Space Grotesk bundled locally
- New sidebar and header layout; trading page, plan card and analysis
  drawer follow the design; other pages use the same panels
- Status API reports today's closed trades, wins and net PnL, shown as
  today's PnL and win rate on the trading page

web/src/pages/chat/components/ContextTab.vue

@@ -80,9 +80,9 @@ load()
     <div class="min-h-0 flex flex-1 gap-3">
       <textarea
         v-model="content" placeholder="目标、已确认的结论、待办…（Markdown）"
-        class="box-border flex-1 resize-none border rounded border-solid border-[var(--el-border-color)] p-3 text-sm leading-6 font-mono outline-none focus:border-[var(--el-color-primary)]"
+        class="box-border flex-1 resize-none border border-ap-line border-solid bg-ap-sunken p-3 text-sm text-ap-text leading-6 font-mono outline-none focus:border-ap-brand"
       />
-      <el-scrollbar class="flex-1 border rounded border-solid border-[var(--el-border-color-lighter)]">
+      <el-scrollbar class="flex-1 border border-ap-line border-solid bg-ap-panel-low">
         <div class="markdown-body p-3" v-html="preview" />
       </el-scrollbar>
     </div>

web/src/pages/chat/components/MessageList.vue

@@ -51,7 +51,7 @@ function prettyResult(result: string) {
 <template>
   <div class="flex flex-col gap-4">
     <div v-for="item in items" :key="item.key" :class="item.kind === 'user' ? 'self-end max-w-3/4' : 'self-stretch'">
-      <div v-if="item.kind === 'user'" class="whitespace-pre-wrap rounded-lg bg-[var(--el-color-primary-light-9)] px-3 py-2 text-sm">
+      <div v-if="item.kind === 'user'" class="whitespace-pre-wrap border-l-2 border-l-ap-brand border-l-solid bg-ap-panel-high px-3 py-2 font-sans text-sm">
         {{ item.text }}
       </div>
       <div v-else class="flex flex-col gap-2">
@@ -71,7 +71,7 @@ function prettyResult(result: string) {
                 <span class="truncate text-[var(--el-text-color-secondary)] font-mono">{{ JSON.stringify(call.arguments) }}</span>
               </div>
             </template>
-            <pre class="m-0 max-h-80 overflow-auto whitespace-pre-wrap break-all rounded bg-[var(--el-fill-color-light)] p-2 text-xs">{{ call.result === null ? "等待结果…" : prettyResult(call.result) }}</pre>
+            <pre class="m-0 max-h-80 overflow-auto whitespace-pre-wrap break-all border border-ap-line border-solid bg-ap-panel-low p-2 text-xs">{{ call.result === null ? "等待结果…" : prettyResult(call.result) }}</pre>
           </el-collapse-item>
         </el-collapse>
         <div v-if="item.stopped" class="text-xs text-[var(--el-text-color-secondary)]">
@@ -84,6 +84,9 @@ function prettyResult(result: string) {
 </template>
 
 <style scoped>
+.tool-cards {
+  border: 1px solid var(--ap-line);
+}
 .tool-cards :deep(.el-collapse-item__header) {
   height: 32px;
   line-height: 32px;

web/src/pages/chat/index.vue

@@ -218,14 +218,16 @@ loadSkills()
     <el-tabs v-model="activeTab" class="chat-tabs min-h-0 flex flex-1 flex-col">
       <el-tab-pane label="Chat" name="chat" class="h-full">
         <div class="h-full flex gap-3">
-          <el-card class="w-72 shrink-0" body-class="h-full box-border flex flex-col gap-2" shadow="never">
-            <div class="flex items-center justify-between text-sm font-bold">
-              Skills
-              <el-button link size="small" @click="router.push('/skills')">
-                去管理
-              </el-button>
-            </div>
-            <div class="text-xs text-[var(--el-text-color-secondary)]">
+          <el-card class="w-72 flex shrink-0 flex-col" body-class="min-h-0 flex-1 box-border flex flex-col gap-2" shadow="never">
+            <template #header>
+              <div class="w-full flex items-center justify-between">
+                Skills
+                <el-button link type="primary" size="small" @click="router.push('/skills')">
+                  去管理
+                </el-button>
+              </div>
+            </template>
+            <div class="text-xs text-ap-muted">
               点击查看草稿与已发布版本的差异并发布；黄色为本次 Chat 刚改过的
             </div>
             <div class="min-h-0 flex-1">
@@ -242,7 +244,7 @@ loadSkills()
                 <el-option v-for="e in EFFORTS" :key="e" :value="e" :label="`思考强度：${e}`" />
               </el-select>
               <el-tooltip content="下一轮发给模型的 system prompt（含已发布 skills、CONTEXT.md）与历史消息的估算大小" placement="bottom">
-                <span class="text-xs" :class="tokenRatio > 0.8 ? 'text-red-500 font-bold' : 'text-[var(--el-text-color-secondary)]'">
+                <span class="text-xs" :class="tokenRatio > 0.8 ? 'text-ap-down font-bold' : 'text-[var(--el-text-color-secondary)]'">
                   上下文约 {{ estimatedTokens.toLocaleString() }}{{ provider ? ` / ${provider.context_window.toLocaleString()}` : "" }} token
                 </span>
               </el-tooltip>

web/src/pages/crawler/components/SourcePanel.vue

@@ -124,7 +124,7 @@ loadLatest()
         {{ formatTime(source.last_success_at) }}
       </el-descriptions-item>
       <el-descriptions-item label="连续失败">
-        <span :class="{ 'text-red-500 font-bold': source.consecutive_failures > 0 }">{{ source.consecutive_failures }}</span>
+        <span :class="{ 'text-ap-down font-bold': source.consecutive_failures > 0 }">{{ source.consecutive_failures }}</span>
       </el-descriptions-item>
       <el-descriptions-item label="下次运行">
         {{ formatTime(source.paused_until && source.paused_until > (source.process?.next_run_at ?? "") ? source.paused_until : source.process?.next_run_at) }}
@@ -157,7 +157,7 @@ loadLatest()
         </div>
       </el-descriptions-item>
       <el-descriptions-item v-if="source.last_error" label="最近错误" :span="4">
-        <span class="whitespace-pre-wrap text-xs text-red-500">{{ source.last_error }}</span>
+        <span class="whitespace-pre-wrap text-xs text-ap-down">{{ source.last_error }}</span>
       </el-descriptions-item>
     </el-descriptions>
 
@@ -171,7 +171,7 @@ loadLatest()
         </template>
         <div v-for="item in latest" :key="item.id" class="mb-2 text-sm">
           <span class="mr-2 text-xs text-[var(--el-text-color-secondary)]">{{ formatTime(item.published_at, "MM-DD HH:mm") }}</span>
-          <el-link :href="item.url" target="_blank">
+          <el-link :href="item.url" target="_blank" class="font-sans">
             {{ item.title || item.excerpt.slice(0, 60) }}
           </el-link>
         </div>
@@ -189,10 +189,10 @@ loadLatest()
             <el-switch v-model="autoScroll" active-text="自动滚动" size="small" />
           </div>
         </template>
-        <div ref="logBox" class="min-h-0 flex-1 overflow-auto rounded bg-[#1e1e1e] p-2 text-xs text-[#d4d4d4] font-mono leading-5">
+        <div ref="logBox" class="min-h-0 flex-1 overflow-auto border border-ap-line border-solid bg-ap-sunken p-2 text-xs text-ap-text font-mono leading-5">
           <div v-for="log in visibleLogs" :key="log.id" class="whitespace-pre-wrap break-all">
-            <span class="text-[#808080]">{{ formatTime(log.ts) }}</span>
-            <span :class="{ 'text-yellow-400': log.level === 'WARNING', 'text-red-400': log.level === 'ERROR' || log.level === 'CRITICAL' }" class="mx-2">{{ log.level }}</span>{{ log.message }}
+            <span class="text-ap-faint">{{ formatTime(log.ts) }}</span>
+            <span :class="{ 'text-ap-warn': log.level === 'WARNING', 'text-ap-down': log.level === 'ERROR' || log.level === 'CRITICAL' }" class="mx-2">{{ log.level }}</span>{{ log.message }}
           </div>
         </div>
       </el-card>

web/src/pages/crawler/index.vue

@@ -73,14 +73,14 @@ refresh().then(() => Promise.all(info.value!.sources.map(s => loadHistory(s.code
 
 <template>
   <div v-if="info" class="h-full flex flex-col gap-3">
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 border border-ap-line border-solid bg-ap-panel px-3 py-2">
       <el-tag :type="info.manager_alive ? 'success' : 'danger'">
-        {{ info.manager_alive ? "管理进程运行中" : "管理进程未运行" }}
+        <i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" :class="{ 'animate-pulse': info.manager_alive }" />{{ info.manager_alive ? "管理进程运行中" : "管理进程未运行" }}
       </el-tag>
       <el-tag :type="connected ? 'success' : 'danger'">
-        {{ connected ? "日志推送已连接" : "日志推送断开" }}
+        <i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" />{{ connected ? "日志推送已连接" : "日志推送断开" }}
       </el-tag>
-      <span class="text-sm text-[var(--el-text-color-secondary)]">数据库 {{ formatBytes(info.db_size_bytes) }}</span>
+      <span class="text-xs text-ap-muted">数据库 <b class="text-ap-text">{{ formatBytes(info.db_size_bytes) }}</b></span>
       <div class="flex-1" />
       <el-button type="danger" :loading="restarting.size > 0" @click="restart('all')">
         重启全部采集
@@ -89,7 +89,7 @@ refresh().then(() => Promise.all(info.value!.sources.map(s => loadHistory(s.code
     <el-tabs v-model="activeTab" type="border-card" class="crawler-tabs min-h-0 flex flex-1 flex-col">
       <el-tab-pane v-for="source in info.sources" :key="source.code" :name="source.code" class="h-full">
         <template #label>
-          <span :class="{ 'text-red-500 font-bold': source.consecutive_failures >= FAILURE_ALERT }">
+          <span :class="{ 'text-ap-down font-bold': source.consecutive_failures >= FAILURE_ALERT }">
             {{ source.name }}
           </span>
           <el-badge v-if="source.consecutive_failures >= FAILURE_ALERT" :value="source.consecutive_failures" class="ml-1" />

web/src/pages/login/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { DataLine } from "@element-plus/icons-vue"
 import { useUserStore } from "@/pinia/user"
 
 const route = useRoute()
@@ -20,14 +21,20 @@ async function submit() {
 </script>
 
 <template>
-  <div class="h-full flex-center">
-    <el-card class="w-90">
-      <template #header>
-        <div class="text-center text-lg font-bold">
-          AlphaPulse
+  <div class="login-bg h-full flex-center">
+    <div class="w-90 border border-ap-line border-solid bg-ap-panel">
+      <div class="h-14 flex flex-col justify-center border-b border-b-ap-line border-b-solid bg-ap-panel-high px-4">
+        <div class="flex items-center gap-2 font-head text-lg text-ap-brand font-bold tracking-wider">
+          <el-icon :size="20">
+            <DataLine />
+          </el-icon>
+          ALPHAPULSE
         </div>
-      </template>
-      <el-form :model="form" @submit.prevent="submit">
+        <div class="text-[10px] text-ap-muted tracking-[0.2em]">
+          新闻 · 行情 · AI 分析 · 模拟盘
+        </div>
+      </div>
+      <el-form :model="form" class="p-5" @submit.prevent="submit">
         <el-form-item>
           <el-input v-model="form.username" placeholder="用户名" autocomplete="username" />
         </el-form-item>
@@ -38,6 +45,16 @@ async function submit() {
           登录
         </el-button>
       </el-form>
-    </el-card>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.login-bg {
+  background-color: var(--ap-bg);
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--ap-line) 25%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--ap-line) 25%, transparent) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+</style>

web/src/pages/market/chart.ts

@@ -1,9 +1,13 @@
 import type { DeepPartial, Period, Styles } from "klinecharts"
+import { PALETTE } from "@/styles/palette"
 
-export const UP = "#0ecb81"
-export const DOWN = "#f6465d"
-const GRID = "#2b3139"
-const TEXT = "#848e9c"
+export const UP = PALETTE.candleUp
+export const DOWN = PALETTE.candleDown
+const GRID = PALETTE.panelHighest
+const AXIS = PALETTE.line
+const TEXT = PALETTE.faint
+// canvas 读不到 CSS 变量，字体直接写；未设置时 KLineChart 默认 Helvetica Neue，缺字体时会回退成衬线体
+const FONT = `"JetBrains Mono Variable", ui-monospace, "PingFang SC", "Microsoft YaHei", monospace`
 
 /** “分时”用 1m 数据画面积图，与币安一致 */
 export const TIME_LINE = "time"
@@ -59,7 +63,7 @@ export function toPeriod(interval: string): Period {
   return { type, span }
 }
 
-/** 在内置 dark 主题上覆盖币安配色 */
+/** 在内置 dark 主题上覆盖：币安涨跌色 + 站点配色与字体 */
 export const BINANCE_STYLES: DeepPartial<Styles> = {
   grid: {
     horizontal: { color: GRID },
@@ -78,13 +82,22 @@ export const BINANCE_STYLES: DeepPartial<Styles> = {
       noChangeWickColor: TEXT
     },
     priceMark: {
-      last: { upColor: UP, downColor: DOWN, noChangeColor: TEXT }
-    }
+      high: { textFamily: FONT },
+      low: { textFamily: FONT },
+      last: { upColor: UP, downColor: DOWN, noChangeColor: TEXT, text: { family: FONT } }
+    },
+    tooltip: { title: { family: FONT }, legend: { family: FONT } }
   },
   indicator: {
-    ohlc: { upColor: UP, downColor: DOWN, noChangeColor: TEXT }
+    ohlc: { upColor: UP, downColor: DOWN, noChangeColor: TEXT },
+    lastValueMark: { text: { family: FONT } },
+    tooltip: { title: { family: FONT }, legend: { family: FONT } }
   },
-  xAxis: { axisLine: { color: GRID }, tickText: { color: TEXT } },
-  yAxis: { axisLine: { color: GRID }, tickText: { color: TEXT } },
-  separator: { color: GRID }
+  xAxis: { axisLine: { color: AXIS }, tickText: { color: TEXT, family: FONT } },
+  yAxis: { axisLine: { color: AXIS }, tickText: { color: TEXT, family: FONT } },
+  crosshair: {
+    horizontal: { text: { family: FONT } },
+    vertical: { text: { family: FONT } }
+  },
+  separator: { color: AXIS }
 }

web/src/pages/market/index.vue

@@ -189,9 +189,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="market h-full flex flex-col overflow-hidden rounded bg-[#161a1e] text-[#eaecef]">
+  <div class="market h-full flex flex-col overflow-hidden border border-ap-line border-solid bg-ap-panel text-ap-text">
     <!-- 顶栏：交易对与 24h 行情 -->
-    <div class="flex flex-wrap items-center gap-6 border-b border-b-solid border-[#2b3139] px-4 py-2">
+    <div class="flex flex-wrap items-center gap-6 border-b border-b-solid border-ap-line px-4 py-2">
       <el-select
         :model-value="`${selection.market}:${selection.symbol}`" filterable class="symbol-select w-52"
         @change="selectSymbol"
@@ -202,7 +202,7 @@ onBeforeUnmount(() => {
             :value="`${s.market}:${s.symbol}`" :label="`${s.base}/${s.quote}${s.market === 'um' ? ' 永续' : ''}`"
           >
             <span>{{ s.base }}/{{ s.quote }}</span>
-            <span v-if="s.status !== 'ready'" class="float-right text-xs text-[#f0b90b]">{{ s.status === "error" ? "出错" : "补齐中" }}</span>
+            <span v-if="s.status !== 'ready'" class="float-right text-xs text-ap-brand">{{ s.status === "error" ? "出错" : "补齐中" }}</span>
           </el-option>
         </el-option-group>
       </el-select>
@@ -232,8 +232,8 @@ onBeforeUnmount(() => {
         <div>{{ formatBig(ticker.quoteVolume) }}</div>
       </div>
       <div class="flex-1" />
-      <span class="text-xs" :class="connected ? 'text-[#0ecb81]' : 'text-[#f6465d]'">● {{ connected ? "实时" : "断开" }}</span>
-      <el-button size="small" type="warning" @click="addVisible = true">
+      <span class="text-xs" :class="connected ? 'text-ap-up' : 'text-ap-down'">● {{ connected ? "实时" : "断开" }}</span>
+      <el-button size="small" type="primary" @click="addVisible = true">
         新增交易对
       </el-button>
       <el-button size="small" @click="managerVisible = true">
@@ -242,7 +242,7 @@ onBeforeUnmount(() => {
     </div>
 
     <!-- 周期与指标工具栏 -->
-    <div class="flex items-center gap-1 border-b border-b-solid border-[#2b3139] px-3 py-1 text-sm">
+    <div class="flex items-center gap-1 border-b border-b-solid border-ap-line px-3 py-1 text-sm">
       <span
         v-for="i in favorites.filter(f => intervals.includes(f))" :key="i"
         class="tool" :class="{ active: interval === i }" @click="interval = i"
@@ -318,18 +318,18 @@ onBeforeUnmount(() => {
         </el-radio-group>
       </el-popover>
       <div class="flex-1" />
-      <span v-if="backfillProgress !== null" class="text-xs text-[#f0b90b]">
+      <span v-if="backfillProgress !== null" class="text-xs text-ap-brand">
         {{ INTERVAL_LABELS[dataInterval] }} 历史数据补齐中 {{ backfillProgress }}%，最新部分暂未完整
       </span>
     </div>
 
     <div class="min-h-0 flex flex-1">
       <!-- 画线工具栏 -->
-      <div class="flex flex-col gap-1 border-r border-r-solid border-[#2b3139] p-1 text-xs">
+      <div class="flex flex-col gap-1 border-r border-r-solid border-ap-line p-1 text-xs">
         <span v-for="tool in DRAW_TOOLS" :key="tool.name" class="tool text-center" :title="tool.label" @click="chart?.createOverlay(tool.name)">
           {{ tool.label }}
         </span>
-        <span class="tool text-center text-[#f6465d]" title="清除全部画线" @click="chart?.removeOverlay()">清除</span>
+        <span class="tool text-center text-ap-down" title="清除全部画线" @click="chart?.removeOverlay()">清除</span>
       </div>
       <div ref="chartEl" class="min-w-0 flex-1" />
     </div>
@@ -344,28 +344,27 @@ onBeforeUnmount(() => {
   font-size: 12px;
 }
 .stat > div:first-child {
-  color: #848e9c;
+  color: var(--ap-muted);
 }
 .tool {
   padding: 2px 8px;
-  border-radius: 4px;
-  color: #848e9c;
+  color: var(--ap-muted);
   cursor: pointer;
   white-space: nowrap;
 }
 .tool:hover {
-  color: #eaecef;
-  background: #2b3139;
+  color: var(--ap-text);
+  background: var(--ap-panel-highest);
 }
 .tool.active {
-  color: #f0b90b;
+  color: var(--ap-brand);
 }
 .symbol-select :deep(.el-select__wrapper) {
-  background: #2b3139;
+  background: var(--ap-panel-high);
   box-shadow: none;
 }
 .symbol-select :deep(.el-select__selected-item) {
-  color: #eaecef;
+  color: var(--ap-text);
   font-weight: 600;
 }
 </style>

web/src/pages/news/components/NewsDrawer.vue

@@ -2,6 +2,7 @@
 import type { NewsDetail, Revision } from "@/apis/news"
 import { getNews, listRevisions } from "@/apis/news"
 import { useSourceNames } from "@/composables/useSourceNames"
+import { PALETTE } from "@/styles/palette"
 import { diffLines, formatTime, htmlToLines } from "@/utils/text"
 
 const newsId = defineModel<number | null>({ required: true })
@@ -27,7 +28,7 @@ watch(newsId, async (id) => {
 // 第三方正文放进无脚本权限的 sandbox iframe，避免其中的脚本访问本站
 const srcdoc = computed(() => detail.value && `<!doctype html><html><head><meta charset="utf-8">
 <meta name="referrer" content="no-referrer"><base target="_blank">
-<style>body{font:15px/1.8 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#303133;margin:0 4px}img{max-width:100%;height:auto}</style>
+<style>:root{color-scheme:dark;background:${PALETTE.panel}}body{font:15px/1.8 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:${PALETTE.text};margin:0 4px}a{color:${PALETTE.brand}}img{max-width:100%;height:auto}</style>
 </head><body>${detail.value.content_html}</body></html>`)
 
 const diff = computed(() => {
@@ -44,11 +45,11 @@ const diff = computed(() => {
 <template>
   <el-drawer :model-value="newsId != null" size="50%" :with-header="false" @close="newsId = null">
     <div v-if="detail" class="h-full flex flex-col gap-3">
-      <div class="text-lg font-bold">
+      <div class="font-sans text-lg font-bold">
         {{ detail.title || detail.excerpt.slice(0, 60) }}
       </div>
       <div class="flex flex-wrap items-center gap-2 text-sm text-[var(--el-text-color-secondary)]">
-        <el-tag size="small">
+        <el-tag size="small" type="info">
           {{ sourceNames[detail.source_code] ?? detail.source_code }}
         </el-tag>
         <span>{{ formatTime(detail.published_at, "YYYY-MM-DD HH:mm:ss") }}</span>
@@ -76,7 +77,7 @@ const diff = computed(() => {
           <div class="text-sm leading-7">
             <div
               v-for="(line, i) in diff" :key="i"
-              :class="{ 'bg-green-100': line.type === 'add', 'bg-red-100 line-through': line.type === 'del' }"
+              :class="{ 'diff-add': line.type === 'add', 'diff-del': line.type === 'del' }"
               class="px-2"
             >
               {{ line.type === "add" ? "+ " : line.type === "del" ? "- " : "  " }}{{ line.text }}

web/src/pages/news/index.vue

@@ -71,7 +71,7 @@ load()
 
 <template>
   <div class="h-full flex flex-col gap-3">
-    <div class="flex flex-wrap items-center gap-3">
+    <div class="flex flex-wrap items-center gap-3 border border-ap-line border-solid bg-ap-panel px-3 py-2">
       <el-checkbox-group v-model="filters.source" @change="search">
         <el-checkbox-button v-for="(name, code) in sourceNames" :key="code" :value="code">
           {{ name }}
@@ -85,8 +85,9 @@ load()
       <el-button type="primary" @click="search">
         查询
       </el-button>
+      <div class="flex-1" />
       <el-tag :type="connected ? 'success' : 'danger'" size="small">
-        {{ connected ? "实时推送已连接" : "实时推送断开" }}
+        <i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" />{{ connected ? "实时推送已连接" : "实时推送断开" }}
       </el-tag>
     </div>
 
@@ -95,14 +96,14 @@ load()
       class="cursor-pointer" @click="search"
     />
 
-    <div ref="listBox" v-loading="loading" class="min-h-0 flex-1 overflow-auto">
+    <div ref="listBox" v-loading="loading" class="min-h-0 flex-1 overflow-auto border border-ap-line border-solid bg-ap-panel">
       <div
         v-for="item in items" :key="item.id"
-        class="cursor-pointer border-b border-b-solid border-[var(--el-border-color-lighter)] px-2 py-3 hover:bg-[var(--el-fill-color-light)]"
+        class="cursor-pointer border-b border-b-ap-line/50 border-b-solid px-3 py-2.5 hover:bg-ap-panel-high"
         @click="openedId = item.id"
       >
         <div class="mb-1 flex items-center gap-2 text-xs text-[var(--el-text-color-secondary)]">
-          <el-tag size="small">
+          <el-tag size="small" type="info">
             {{ sourceNames[item.source_code] ?? item.source_code }}
           </el-tag>
           <span>{{ formatTime(item.published_at) }}</span>
@@ -113,10 +114,10 @@ load()
             付费
           </el-tag>
         </div>
-        <div v-if="item.title" class="font-bold">
+        <div v-if="item.title" class="mb-0.5 font-sans text-[14px] font-bold">
           {{ item.title }}
         </div>
-        <div class="line-clamp-3 text-sm text-[var(--el-text-color-regular)]">
+        <div class="line-clamp-3 font-sans text-[13px] text-ap-muted leading-relaxed">
           {{ item.summary || item.excerpt }}
         </div>
       </div>

web/src/pages/settings/index.vue

@@ -131,64 +131,67 @@ loadExchange()
 
 <template>
   <div class="flex flex-col gap-3">
-    <div class="flex items-center justify-between">
-      <div>
-        <span class="text-lg font-bold">模型配置</span>
-        <span class="ml-3 text-xs text-[var(--el-text-color-secondary)]">通过 Sub2API 等中转接入；API key 加密存储，页面只显示末 4 位</span>
-      </div>
-      <el-button type="primary" @click="openCreate">
-        新增配置
-      </el-button>
-    </div>
-
-    <el-table :data="providers" border>
-      <el-table-column label="名称" min-width="120">
-        <template #default="{ row }">
-          {{ row.name }}
-          <el-tag v-if="row.is_default" size="small" type="success" class="ml-1">
-            默认
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="协议" min-width="200">
-        <template #default="{ row }">
-          {{ PROTOCOL_LABELS[row.protocol as keyof typeof PROTOCOL_LABELS] }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="base_url" label="Base URL" min-width="200" />
-      <el-table-column prop="model" label="模型" min-width="150" />
-      <el-table-column label="思考强度" width="90">
-        <template #default="{ row }">
-          {{ (row as Provider).reasoning_effort ?? "-" }}
-        </template>
-      </el-table-column>
-      <el-table-column label="API Key" width="100">
-        <template #default="{ row }">
-          ****{{ row.api_key_hint }}
-        </template>
-      </el-table-column>
-      <el-table-column label="更新时间" width="130">
-        <template #default="{ row }">
-          {{ formatTime(row.updated_at, "MM-DD HH:mm") }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="250" fixed="right">
-        <template #default="{ row }">
-          <el-button link type="primary" :loading="testing === row.id" @click="test(row as Provider)">
-            测试连接
+    <el-card shadow="never" body-class="p-0!">
+      <template #header>
+        <div class="w-full flex items-center justify-between gap-3">
+          <div>
+            模型配置
+            <span class="ml-3 text-[11px] text-ap-muted font-normal font-mono">通过 Sub2API 等中转接入；API key 加密存储，页面只显示末 4 位</span>
+          </div>
+          <el-button size="small" type="primary" @click="openCreate">
+            新增配置
           </el-button>
-          <el-button link @click="openEdit(row as Provider)">
-            编辑
-          </el-button>
-          <el-button v-if="!row.is_default" link @click="setDefault(row as Provider)">
-            设为默认
-          </el-button>
-          <el-button link type="danger" @click="remove(row as Provider)">
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </div>
+      </template>
+      <el-table :data="providers">
+        <el-table-column label="名称" min-width="110">
+          <template #default="{ row }">
+            {{ row.name }}
+            <el-tag v-if="row.is_default" size="small" type="success" class="ml-1">
+              默认
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="协议" min-width="230" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ PROTOCOL_LABELS[row.protocol as keyof typeof PROTOCOL_LABELS] }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="base_url" label="Base URL" min-width="220" show-overflow-tooltip />
+        <el-table-column prop="model" label="模型" min-width="160" show-overflow-tooltip />
+        <el-table-column label="思考强度" width="80">
+          <template #default="{ row }">
+            {{ (row as Provider).reasoning_effort ?? "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="API Key" width="90">
+          <template #default="{ row }">
+            ****{{ row.api_key_hint }}
+          </template>
+        </el-table-column>
+        <el-table-column label="更新时间" width="110">
+          <template #default="{ row }">
+            {{ formatTime(row.updated_at, "MM-DD HH:mm") }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" :loading="testing === row.id" @click="test(row as Provider)">
+              测试连接
+            </el-button>
+            <el-button link @click="openEdit(row as Provider)">
+              编辑
+            </el-button>
+            <el-button v-if="!row.is_default" link @click="setDefault(row as Provider)">
+              设为默认
+            </el-button>
+            <el-button link type="danger" @click="remove(row as Provider)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
     <el-dialog v-model="dialogVisible" :title="editingId === null ? '新增模型配置' : '编辑模型配置'" width="560px">
       <el-form :model="form" label-width="100px">
@@ -245,37 +248,41 @@ loadExchange()
       </template>
     </el-dialog>
 
-    <div class="mt-4 flex items-center justify-between">
-      <div>
-        <span class="text-lg font-bold">币安模拟盘</span>
-        <span class="ml-3 text-xs text-[var(--el-text-color-secondary)]">只连接币安模拟盘（demo-fapi.binance.com）；在 demo.binance.com 的 API 管理创建 key，并开启合约交易权限</span>
-      </div>
-      <div>
-        <el-button :disabled="!exchange?.configured" :loading="exchangeTesting" @click="runExchangeTest">
-          测试连接
-        </el-button>
-        <el-button type="primary" :disabled="exchange?.running" @click="openExchangeEdit">
-          {{ exchange?.configured ? "修改 key" : "填写 key" }}
-        </el-button>
-        <el-button v-if="exchange?.configured" type="danger" plain :disabled="exchange.running" @click="removeExchange">
-          删除
-        </el-button>
-      </div>
-    </div>
-    <el-descriptions v-if="exchange" :column="3" border>
-      <el-descriptions-item label="API Key">
-        {{ exchange.configured ? `****${exchange.api_key_hint}` : "未配置" }}
-      </el-descriptions-item>
-      <el-descriptions-item label="状态">
-        <el-tag v-if="exchange.running" type="success" size="small">
-          交易中（停止后才能修改 key）
-        </el-tag>
-        <span v-else>未运行</span>
-      </el-descriptions-item>
-      <el-descriptions-item label="更新时间">
-        {{ exchange.updated_at ? formatTime(exchange.updated_at, "MM-DD HH:mm") : "-" }}
-      </el-descriptions-item>
-    </el-descriptions>
+    <el-card shadow="never">
+      <template #header>
+        <div class="w-full flex items-center justify-between gap-3">
+          <div>
+            币安模拟盘
+            <span class="ml-3 text-[11px] text-ap-muted font-normal font-mono">只连接币安模拟盘（demo-fapi.binance.com）；在 demo.binance.com 的 API 管理创建 key，并开启合约交易权限</span>
+          </div>
+          <div class="flex shrink-0">
+            <el-button size="small" :disabled="!exchange?.configured" :loading="exchangeTesting" @click="runExchangeTest">
+              测试连接
+            </el-button>
+            <el-button size="small" type="primary" :disabled="exchange?.running" @click="openExchangeEdit">
+              {{ exchange?.configured ? "修改 key" : "填写 key" }}
+            </el-button>
+            <el-button v-if="exchange?.configured" size="small" type="danger" plain :disabled="exchange.running" @click="removeExchange">
+              删除
+            </el-button>
+          </div>
+        </div>
+      </template>
+      <el-descriptions v-if="exchange" :column="3" border size="small">
+        <el-descriptions-item label="API Key">
+          {{ exchange.configured ? `****${exchange.api_key_hint}` : "未配置" }}
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag v-if="exchange.running" type="success" size="small">
+            交易中（停止后才能修改 key）
+          </el-tag>
+          <span v-else>未运行</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="更新时间">
+          {{ exchange.updated_at ? formatTime(exchange.updated_at, "MM-DD HH:mm") : "-" }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
 
     <el-dialog v-model="exchangeDialogVisible" title="币安模拟盘 API key" width="560px">
       <el-form :model="exchangeForm" label-width="100px">

web/src/pages/skills/index.vue

@@ -145,9 +145,9 @@ loadTree()
         <div class="min-h-0 flex flex-1 gap-3">
           <textarea
             v-model="content" placeholder="用 Markdown 写下投资经验、判断流程或输出规范"
-            class="box-border flex-1 resize-none border rounded border-solid border-[var(--el-border-color)] p-3 text-sm leading-6 font-mono outline-none focus:border-[var(--el-color-primary)]"
+            class="box-border flex-1 resize-none border border-ap-line border-solid bg-ap-sunken p-3 text-sm text-ap-text leading-6 font-mono outline-none focus:border-ap-brand"
           />
-          <el-scrollbar class="flex-1 border rounded border-solid border-[var(--el-border-color-lighter)]">
+          <el-scrollbar class="flex-1 border border-ap-line border-solid bg-ap-panel-low">
             <!-- markdown-it 已关闭 html，内容中的标签按文本显示 -->
             <div class="markdown-body p-3" v-html="preview" />
           </el-scrollbar>

web/src/pages/trading/components/AnalysisDrawer.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type { AnalysisDetail } from "@/apis/trading"
+import { Cpu } from "@element-plus/icons-vue"
 import { getAnalysis } from "@/apis/trading"
 import { renderMarkdown } from "@/utils/markdown"
-import { formatTime } from "@/utils/text"
+import { formatDuration, formatTime } from "@/utils/text"
 
 const props = defineProps<{ analysisId: number | null }>()
 const visible = defineModel<boolean>({ required: true })
@@ -36,32 +37,78 @@ function pretty(raw: string | undefined) {
 </script>
 
 <template>
-  <el-drawer v-model="visible" :title="detail ? `分析 #${detail.id} · ${detail.symbol}` : '分析'" size="55%">
+  <el-drawer v-model="visible" size="55%">
+    <template #header>
+      <div class="min-w-0 flex items-center gap-2">
+        <el-icon class="text-ap-brand" :size="18">
+          <Cpu />
+        </el-icon>
+        <div class="min-w-0 flex flex-col">
+          <span class="font-head text-sm text-ap-text font-bold">{{ detail ? `分析 #${detail.id} · ${detail.symbol}` : "分析" }}</span>
+          <span v-if="detail" class="truncate text-[10px] text-ap-muted">
+            {{ formatTime(detail.started_at) }} – {{ formatTime(detail.finished_at) }} · {{ detail.reasons.join("；") }}{{ detail.dry_run ? " · 试运行" : "" }}
+          </span>
+        </div>
+      </div>
+    </template>
     <div v-if="detail" class="flex flex-col gap-3 text-sm">
-      <div class="text-xs text-[var(--el-text-color-secondary)]">
-        {{ formatTime(detail.started_at) }} – {{ formatTime(detail.finished_at) }} · {{ detail.reasons.join("；") }}
-        · {{ detail.model }}{{ detail.reasoning_effort ? ` / ${detail.reasoning_effort}` : "" }}
-        · {{ detail.usage?.input_tokens.toLocaleString() }} / {{ detail.usage?.output_tokens.toLocaleString() }} token
-        {{ detail.dry_run ? "· 试运行" : "" }}
+      <div class="grid grid-cols-4 gap-2 border border-ap-line border-solid bg-ap-sunken p-3 text-xs">
+        <div>
+          <div class="text-[10px] text-ap-muted">
+            分析 ID
+          </div>
+          <b>#{{ detail.id }}</b>
+        </div>
+        <div>
+          <div class="text-[10px] text-ap-muted">
+            耗时
+          </div>
+          <b class="text-ap-brand">{{ detail.finished_at ? formatDuration(detail.started_at, detail.finished_at) : "-" }}</b>
+        </div>
+        <div>
+          <div class="text-[10px] text-ap-muted">
+            token 输入 / 输出
+          </div>
+          <b>{{ detail.usage?.input_tokens.toLocaleString() ?? "-" }} / {{ detail.usage?.output_tokens.toLocaleString() ?? "-" }}</b>
+        </div>
+        <div>
+          <div class="text-[10px] text-ap-muted">
+            模型 / 思考强度
+          </div>
+          <b class="text-ap-up">{{ detail.model ?? "-" }}{{ detail.reasoning_effort ? ` / ${detail.reasoning_effort}` : "" }}</b>
+        </div>
       </div>
       <el-alert v-if="detail.error" type="error" :closable="false" :title="detail.error" />
-      <!-- markdown-it 已关闭 html，模型输出中的标签按文本显示 -->
-      <div v-if="detail.text" class="markdown-body" v-html="renderMarkdown(detail.text)" />
-      <el-collapse>
-        <template v-for="(m, i) in detail.transcript ?? []" :key="i">
-          <el-collapse-item v-if="m.role === 'user'" :name="`u${i}`" :title="i === 0 ? '发给模型的数据（账户、持仓、预取行情）' : '程序提示'">
-            <pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ m.text }}</pre>
-          </el-collapse-item>
-          <template v-else-if="m.role === 'assistant'">
-            <el-collapse-item v-for="call in m.tool_calls" :key="call.id" :name="call.id">
-              <template #title>
-                <span class="inline-block max-w-[90%] truncate text-xs font-mono">{{ call.name }} {{ JSON.stringify(call.arguments) }}</span>
-              </template>
-              <pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ pretty(toolResults.get(call.id)) }}</pre>
-            </el-collapse-item>
-          </template>
+      <el-card v-if="detail.text" shadow="never" class="bg-ap-panel-low!">
+        <template #header>
+          模型分析
         </template>
-      </el-collapse>
+        <!-- markdown-it 已关闭 html，模型输出中的标签按文本显示 -->
+        <div class="markdown-body" v-html="renderMarkdown(detail.text)" />
+      </el-card>
+      <el-card shadow="never" class="bg-ap-panel-low!" body-class="p-0!">
+        <template #header>
+          输入数据与工具调用 ({{ toolResults.size }})
+        </template>
+        <el-collapse>
+          <template v-for="(m, i) in detail.transcript ?? []" :key="i">
+            <el-collapse-item v-if="m.role === 'user'" :name="`u${i}`" :title="i === 0 ? '发给模型的数据（账户、持仓、预取行情）' : '程序提示'">
+              <pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ m.text }}</pre>
+            </el-collapse-item>
+            <template v-else-if="m.role === 'assistant'">
+              <el-collapse-item v-for="call in m.tool_calls" :key="call.id" :name="call.id">
+                <template #title>
+                  <span class="text-xs">
+                    <b class="text-ap-up">{{ call.name }}</b>
+                    <span class="ml-2 text-ap-muted">{{ JSON.stringify(call.arguments) }}</span>
+                  </span>
+                </template>
+                <pre class="m-0 max-h-120 overflow-auto whitespace-pre-wrap break-all text-xs">{{ pretty(toolResults.get(call.id)) }}</pre>
+              </el-collapse-item>
+            </template>
+          </template>
+        </el-collapse>
+      </el-card>
     </div>
     <div v-else v-loading="true" class="h-40" />
   </el-drawer>

web/src/pages/trading/components/PlanCard.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { Analysis, OrderRow, PlanCondition, TradingSymbol } from "@/apis/trading"
+import { Clock, Cpu, Refresh, TopRight, Warning } from "@element-plus/icons-vue"
 import { CLOSE_REASON_LABELS, PLAN_STATUS_LABELS, TAKE_PROFIT_STEPS } from "@/apis/trading"
-import { formatTime } from "@/utils/text"
+import { formatDuration, formatTime } from "@/utils/text"
 
 /** analysis：执行中的计划，没有时为最近一次分析；latest：最近一次分析（与 analysis 不同时另行提示） */
 const props = defineProps<{ symbol: TradingSymbol, analysis: Analysis | null, latest: Analysis | null, orders: OrderRow[], requesting: boolean }>()
@@ -20,6 +21,7 @@ const decision = computed(() => props.analysis?.decision ?? null)
 const sizing = computed(() => props.analysis?.sizing ?? null)
 const busy = computed(() => props.requesting || props.symbol.analyzing || !!props.symbol.analysis_requested_at)
 const elapsed = computed(() => props.analysis ? Math.max(0, Math.round((now.value - new Date(props.analysis.started_at).getTime()) / 1000)) : 0)
+const duration = computed(() => props.analysis?.finished_at ? formatDuration(props.analysis.started_at, props.analysis.finished_at) : "")
 
 function filled(purpose: "entry" | "tp", leg: number) {
   const total = props.orders.filter(o => o.purpose === purpose && o.leg === leg).reduce((sum, o) => sum + Number(o.filled_qty), 0)
@@ -55,55 +57,64 @@ const ladder = computed(() => sizing.value?.entry && entryRow.value
 </script>
 
 <template>
-  <div class="border border-[var(--el-border-color)] rounded border-solid p-3">
-    <div class="mb-2 flex items-center gap-2">
-      <span class="font-bold">{{ symbol.symbol }}</span>
-      <span class="text-xs text-[var(--el-text-color-secondary)]">短线做波动（区间内挂限价单，最长持仓 4 小时）</span>
+  <div class="border border-ap-line border-solid bg-ap-panel-low p-4">
+    <div class="mb-3 flex items-center gap-2 border-b border-b-ap-line border-b-solid pb-2.5">
+      <el-icon class="text-ap-brand" :size="18">
+        <Cpu />
+      </el-icon>
+      <span class="font-head text-base font-bold">{{ symbol.symbol }}</span>
+      <span class="text-xs text-ap-muted">短线做波动（区间内挂限价单，最长持仓 4 小时）</span>
       <div class="flex-1" />
-      <el-button v-if="analysis && analysis.status !== 'running'" link type="primary" @click="emit('detail', analysis.id)">
+      <el-link v-if="analysis && analysis.status !== 'running'" type="primary" @click="emit('detail', analysis.id)">
         查看完整分析
-      </el-button>
-      <el-button size="small" type="primary" :loading="busy" @click="emit('analyze')">
+        <el-icon class="ml-0.5">
+          <TopRight />
+        </el-icon>
+      </el-link>
+      <el-button type="primary" :loading="busy" @click="emit('analyze')">
         {{ busy ? "分析中" : "立即分析" }}
       </el-button>
     </div>
 
-    <div v-if="!analysis" class="text-sm text-[var(--el-text-color-secondary)]">
+    <div v-if="!analysis" class="state-strip">
       还没有分析。引擎停止时点「立即分析」为试运行：计划只记录，不下单。
     </div>
-    <div v-else-if="analysis.status === 'running'" class="text-sm text-[var(--el-text-color-secondary)]">
-      模型分析中，已用 {{ elapsed }} 秒（通常 1–3 分钟）…
+    <div v-else-if="analysis.status === 'running'" class="state-strip">
+      <i class="mr-2.5 inline-block h-1.5 w-1.5 animate-ping bg-ap-brand" />模型分析中，已用 {{ elapsed }} 秒（通常 1–3 分钟）…
     </div>
     <el-alert v-else-if="analysis.status === 'failed'" type="error" :closable="false" show-icon>
       {{ formatTime(analysis.started_at) }} 分析失败：{{ analysis.error }}
     </el-alert>
 
-    <div v-else-if="decision" class="flex flex-col gap-2 text-sm">
+    <div v-else-if="decision" class="flex flex-col gap-3">
       <div class="flex flex-wrap items-center gap-2">
-        <el-tag v-if="analysis.dry_run" type="info" size="small">
+        <el-tag v-if="analysis.dry_run" type="info">
           试运行
         </el-tag>
-        <el-tag v-if="analysis.plan_status" type="success" effect="dark" size="small">
+        <el-tag v-if="analysis.plan_status" type="success">
           {{ PLAN_STATUS_LABELS[analysis.plan_status] }}
         </el-tag>
-        <el-tag size="small">
+        <el-tag type="primary">
           {{ ACTION_LABELS[decision.action] }}
         </el-tag>
-        <el-tag v-if="decision.direction" :type="decision.direction === 'long' ? 'success' : 'danger'" size="small">
+        <el-tag v-if="decision.direction" :type="decision.direction === 'long' ? 'success' : 'danger'">
           {{ decision.direction === "long" ? "做多" : "做空" }}
         </el-tag>
-        <el-tag v-if="decision.confidence" type="warning" size="small">
+        <el-tag v-if="decision.confidence" type="warning">
           置信度{{ CONFIDENCE_LABELS[decision.confidence] }}
         </el-tag>
-        <span class="text-xs text-[var(--el-text-color-secondary)]">
+        <span class="text-[11px] text-ap-muted">
           {{ formatTime(analysis.started_at) }} · {{ analysis.reasons.join("；") }} · {{ analysis.model }}{{ analysis.reasoning_effort ? ` / ${analysis.reasoning_effort}` : "" }}
+          {{ duration ? `· 耗时 ${duration}` : "" }}
           · {{ analysis.usage?.input_tokens.toLocaleString() }} / {{ analysis.usage?.output_tokens.toLocaleString() }} token
         </span>
       </div>
-      <div class="font-bold">
+
+      <div class="border-l-4 border-l-ap-brand border-l-solid bg-ap-panel px-3 py-2.5 font-sans text-[15px] font-bold">
         {{ decision.summary }}
       </div>
-      <div v-if="latest && latest.id !== analysis.id" class="text-xs text-[var(--el-text-color-secondary)]">
+
+      <div v-if="latest && latest.id !== analysis.id" class="text-xs text-ap-muted">
         最近一次分析 #{{ latest.id }}（{{ formatTime(latest.started_at) }}）：
         <template v-if="latest.status === 'done'">
           {{ latest.decision?.summary }}
@@ -111,56 +122,106 @@ const ladder = computed(() => sizing.value?.entry && entryRow.value
         <template v-else>
           {{ latest.status === "running" ? "分析中" : `失败：${latest.error}` }}
         </template>
-        <el-link type="primary" underline="never" class="ml-1 text-xs!" @click="emit('detail', latest.id)">
+        <el-link type="primary" class="ml-1 text-xs!" @click="emit('detail', latest.id)">
           查看
         </el-link>
       </div>
-      <div v-if="analysis.valid_until || analysis.close_deadline" class="flex flex-wrap gap-x-6">
-        <span v-if="analysis.plan_status === 'pending' && analysis.valid_until"><span class="label">限价单有效至</span>{{ formatTime(analysis.valid_until, "MM-DD HH:mm") }}（剩 {{ countdown(analysis.valid_until) }}）</span>
-        <span v-if="analysis.first_fill_at"><span class="label">入场</span>{{ formatTime(analysis.first_fill_at, "MM-DD HH:mm") }}</span>
-        <span v-if="analysis.close_deadline"><span class="label">最晚平仓</span>{{ formatTime(analysis.close_deadline, "MM-DD HH:mm") }}（剩 {{ countdown(analysis.close_deadline) }}）</span>
+
+      <div v-if="analysis.valid_until || analysis.first_fill_at || analysis.close_deadline" class="flex flex-wrap items-center gap-x-5 gap-y-1 border border-ap-line border-solid bg-ap-sunken px-3 py-1.5 text-xs">
+        <el-icon class="text-ap-up" :size="15">
+          <Clock />
+        </el-icon>
+        <span v-if="analysis.plan_status === 'pending' && analysis.valid_until">
+          限价单有效至 {{ formatTime(analysis.valid_until, "MM-DD HH:mm") }}<b class="ml-1 text-ap-brand">（剩 {{ countdown(analysis.valid_until) }}）</b>
+        </span>
+        <span v-if="analysis.first_fill_at">入场 {{ formatTime(analysis.first_fill_at, "MM-DD HH:mm") }}</span>
+        <span v-if="analysis.close_deadline">
+          最晚平仓 {{ formatTime(analysis.close_deadline, "MM-DD HH:mm") }}<b class="ml-1 text-ap-brand">（剩 {{ countdown(analysis.close_deadline) }}）</b>
+        </span>
       </div>
-      <div v-if="analysis.result">
-        <span class="label">结果</span>{{ CLOSE_REASON_LABELS[analysis.close_reason ?? ""] ?? analysis.close_reason }}，净盈亏 {{ analysis.result.net }} USDT（手续费 {{ analysis.result.commission }}）
+
+      <div v-if="analysis.result" class="text-sm">
+        <span class="label">结果</span>{{ CLOSE_REASON_LABELS[analysis.close_reason ?? ""] ?? analysis.close_reason }}，净盈亏
+        <b :class="Number(analysis.result.net) >= 0 ? 'text-ap-up' : 'text-ap-down'">{{ analysis.result.net }} USDT</b>（手续费 {{ analysis.result.commission }}）
+      </div>
+
+      <div class="font-sans text-[13px] leading-relaxed">
+        <span class="label">为什么</span>{{ decision.reasons }}
       </div>
-      <div><span class="label">为什么</span>{{ decision.reasons }}</div>
 
       <template v-if="decision.action === 'plan' && decision.setup && sizing?.entry">
-        <div class="grid grid-cols-2 gap-x-6 gap-y-1">
-          <div>
-            <span class="label">{{ long ? "支撑区" : "压力区" }}</span>{{ sizing.setup.zone_low }} – {{ sizing.setup.zone_high }} · {{ decision.setup.basis }}
+        <div class="grid grid-cols-2 border border-ap-line border-solid bg-ap-panel-high text-xs">
+          <div class="flex flex-col gap-1.5 p-3">
+            <div class="param">
+              <span>{{ long ? "支撑区" : "压力区" }}</span>
+              <b :class="long ? 'text-ap-up' : 'text-ap-down'">{{ sizing.setup.zone_low }} – {{ sizing.setup.zone_high }}</b>
+            </div>
+            <div class="font-sans text-[11px] text-ap-muted">
+              {{ decision.setup.basis }}
+            </div>
+            <div class="param">
+              <span>限价{{ long ? "做多" : "做空" }}</span>
+              <b>{{ sizing.entry.price }} × {{ sizing.entry.quantity }}</b>
+            </div>
+            <div class="text-[11px] text-ap-muted">
+              已成交 {{ filled("entry", 0) }}{{ entryRow?.avg_price ? `，均价 ${entryRow.avg_price}` : "" }}；名义 {{ sizing.entry.notional }} USDT，{{ sizing.entry.leverage }} 倍交易资金
+            </div>
           </div>
-          <div>
-            <span class="label">限价{{ long ? "做多" : "做空" }}</span>{{ sizing.entry.price }} × {{ sizing.entry.quantity }}，已成交 {{ filled("entry", 0) }}{{ entryRow?.avg_price ? `，均价 ${entryRow.avg_price}` : "" }}
-            （名义 {{ sizing.entry.notional }} USDT，{{ sizing.entry.leverage }} 倍交易资金）
-          </div>
-          <div>
-            <span class="label">止损</span>{{ currentStop ?? sizing.entry.stop }}（初始 {{ sizing.entry.stop }}，距挂单价 {{ sizing.entry.stop_pct }}%；区间远端外 0.5×ATR(5m)、距挂单价至少 1×ATR(5m)，止盈 1 后移到保本价）
-          </div>
-          <div>
-            <span class="label">止损亏损</span>{{ sizing.entry.risk_at_stop }} USDT（交易资金的 {{ sizing.entry.risk_pct }}%）{{ sizing.entry.capped_by_leverage ? "，受 3 倍上限限制" : "" }}
+          <div class="flex flex-col gap-1.5 border-l border-l-ap-line border-l-solid p-3">
+            <div class="param">
+              <span>止损</span>
+              <b class="text-ap-down">{{ currentStop ?? sizing.entry.stop }}</b>
+            </div>
+            <div class="param">
+              <span>初始止损 / 距挂单价</span>
+              <span>{{ sizing.entry.stop }} / {{ sizing.entry.stop_pct }}%</span>
+            </div>
+            <div class="param">
+              <span>止损亏损</span>
+              <b class="text-ap-down">{{ sizing.entry.risk_at_stop }} USDT（交易资金的 {{ sizing.entry.risk_pct }}%）</b>
+            </div>
+            <div class="text-[11px] text-ap-muted">
+              区间远端外 0.5×ATR(5m)、距挂单价至少 1×ATR(5m)；止盈 1 后移到保本价{{ sizing.entry.capped_by_leverage ? "；受 3 倍上限限制" : "" }}
+            </div>
           </div>
         </div>
-        <el-table v-if="ladder.length" :data="ladder" border size="small">
-          <el-table-column label="分批止盈" min-width="90">
-            <template #default="{ row }">
-              止盈 {{ row.leg + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="move" label="距成交均价" min-width="90" />
-          <el-table-column prop="ratio" label="平仓比例" min-width="80" />
-          <el-table-column prop="price" label="价格" min-width="100" />
-          <el-table-column prop="filled" label="已成交" min-width="80" />
-        </el-table>
+
+        <div v-if="ladder.length">
+          <div class="panel-title mb-1.5">
+            分批止盈
+          </div>
+          <el-table :data="ladder" border size="small">
+            <el-table-column label="分批止盈" min-width="90">
+              <template #default="{ row }">
+                <b class="text-ap-up">止盈 {{ row.leg + 1 }}</b>
+              </template>
+            </el-table-column>
+            <el-table-column prop="move" label="距成交均价" min-width="90" align="right" />
+            <el-table-column prop="ratio" label="平仓比例" min-width="80" align="right" />
+            <el-table-column label="价格" min-width="100" align="right">
+              <template #default="{ row }">
+                <b>{{ row.price }}</b>
+              </template>
+            </el-table-column>
+            <el-table-column prop="filled" label="已成交" min-width="80" align="center" />
+          </el-table>
+        </div>
       </template>
 
-      <div v-if="decision.reevaluate.length">
-        <span class="label">重新判断</span>
-        <div v-for="(c, i) in decision.reevaluate" :key="i" class="ml-2">
-          · {{ condition(c) }}：{{ c.basis }}
+      <div class="flex flex-col gap-1.5 border border-ap-line border-solid bg-ap-sunken p-2.5 font-sans text-xs">
+        <div v-for="(c, i) in decision.reevaluate" :key="i" class="flex items-start gap-1.5 text-ap-brand">
+          <el-icon class="mt-0.5 shrink-0">
+            <Refresh />
+          </el-icon>
+          <span><b>重新判断：</b>{{ condition(c) }}：{{ c.basis }}</span>
+        </div>
+        <div class="flex items-start gap-1.5 text-ap-down" :class="{ 'border-t border-t-ap-line border-t-solid pt-1.5': decision.reevaluate.length }">
+          <el-icon class="mt-0.5 shrink-0">
+            <Warning />
+          </el-icon>
+          <span><b>风险：</b>{{ decision.risks }}</span>
         </div>
       </div>
-      <div><span class="label">风险</span>{{ decision.risks }}</div>
     </div>
   </div>
 </template>
@@ -168,7 +229,28 @@ const ladder = computed(() => sizing.value?.entry && entryRow.value
 <style scoped>
 .label {
   margin-right: 8px;
-  color: var(--el-text-color-secondary);
+  color: var(--ap-muted);
+  font-family: var(--ap-font-mono);
   font-size: 12px;
 }
+.state-strip {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border: 1px solid var(--ap-line);
+  background: var(--ap-panel-highest);
+  color: var(--ap-muted);
+  font-size: 12px;
+}
+.param {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid color-mix(in srgb, var(--ap-line) 60%, transparent);
+}
+.param > span:first-child {
+  color: var(--ap-muted);
+  font-size: 11px;
+}
 </style>

web/src/pages/trading/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Effort, Provider } from "@/apis/settings"
 import type { Analysis, OrderRow, SnapshotPosition, TradingEvent, TradingStatus, TradingSymbol } from "@/apis/trading"
+import { DataAnalysis } from "@element-plus/icons-vue"
 import { EFFORTS, listProviders } from "@/apis/settings"
 import { deleteSymbol, getStatus, getSymbolPlan, isOwnOrder, listAnalyses, listEvents, listSymbols, patchConfig, requestAnalysis, startTrading, stopTrading } from "@/apis/trading"
 import { usePersisted } from "@/utils/storage"
@@ -11,7 +12,7 @@ import PlanCard from "./components/PlanCard.vue"
 
 const STATUS_REFRESH_MS = 3000
 const EVENTS_PAGE = 50
-const LEVEL_TYPES = { info: "primary", warn: "warning", error: "danger" } as const
+const LEVEL_DOTS = { info: "bg-ap-faint", warn: "bg-ap-warn", error: "bg-ap-down" } as const
 
 const status = ref<TradingStatus>()
 const symbols = ref<TradingSymbol[]>([])
@@ -52,17 +53,33 @@ const symbolOrders = computed(() => {
   ].sort((a, b) => b.time - a.time)
 })
 
+/** 价格、数量：千分位，保留原有小数 */
 function num(value: string) {
-  return String(Number(value))
+  return Number(value).toLocaleString("en-US", { maximumFractionDigits: 8 })
 }
 
 function money(value: string | undefined) {
-  return value === undefined ? "-" : Number(value).toFixed(2)
+  return value === undefined ? "-" : Number(value).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+
+function signedMoney(value: string | undefined) {
+  return value !== undefined && Number(value) > 0 ? `+${money(value)}` : money(value)
 }
 
 function pnlClass(value: string) {
   const n = Number(value)
-  return n > 0 ? "text-[var(--el-color-success)]" : n < 0 ? "text-[var(--el-color-danger)]" : ""
+  return n > 0 ? "text-ap-up" : n < 0 ? "text-ap-down" : ""
+}
+
+const winRate = computed(() => {
+  const { trades, wins } = status.value!.today
+  return trades ? `${(wins / trades * 100).toFixed(1)}%` : "-"
+})
+
+/** 交易币种列表第二行：该币的持仓 */
+function positionLine(symbol: string) {
+  const p = positions.value.find(x => x.symbol === symbol)
+  return p ? { text: `${p.leverage}x ${p.side === "LONG" ? "多" : "空"} · ${num(p.amount)}`, long: p.side === "LONG" } : null
 }
 
 /** 持仓当前生效的止损、止盈触发价：取交易所上平仓方向的挂单 */
@@ -192,10 +209,10 @@ async function toggleRunning() {
 
 async function editCapital() {
   const { value } = await ElMessageBox.prompt(
-    `仓位按交易资金计算：单笔风险短线 1%、长线 2%，所有仓位名义价值合计不超过 3 倍（逐仓 3 倍时保证金合计不超过交易资金）。不能超过账户权益 ${money(account.value?.margin_balance)} USDT；账户权益低于它时按权益计算。`,
+    `仓位按交易资金计算：单笔风险 1%（置信度低时 0.5%），所有仓位名义价值合计不超过 3 倍（逐仓 3 倍时保证金合计不超过交易资金）。不能超过账户权益 ${money(account.value?.margin_balance)} USDT；账户权益低于它时按权益计算。`,
     "设置交易资金（USDT）",
     {
-      inputValue: status.value!.capital_usdt ? num(status.value!.capital_usdt) : "",
+      inputValue: status.value!.capital_usdt ? String(Number(status.value!.capital_usdt)) : "",
       inputPattern: /^(?:[1-9]\d*|0)(?:\.\d{1,2})?$/,
       inputErrorMessage: "请输入正数，最多两位小数",
       confirmButtonText: "保存"
@@ -237,67 +254,70 @@ onBeforeUnmount(() => clearInterval(timer))
 </script>
 
 <template>
-  <div v-if="status" class="h-full flex flex-col gap-3">
-    <!-- 顶部：引擎状态、启停、账户 -->
-    <div class="flex flex-wrap items-center gap-x-6 gap-y-2 border border-[var(--el-border-color)] rounded border-solid px-4 py-3">
-      <div class="flex items-center gap-2">
-        <el-tag v-if="snapshot" type="success" effect="dark">
-          引擎在线
-        </el-tag>
-        <el-tag v-else type="info" effect="dark">
-          引擎离线
+  <div v-if="status" class="h-full flex flex-col gap-2">
+    <!-- 状态栏：引擎、启停、账户与今日统计、模型 -->
+    <div class="flex flex-col gap-2 border border-ap-line border-solid bg-ap-panel px-3 py-2.5">
+      <div class="flex flex-wrap items-center gap-2">
+        <el-tag :type="snapshot ? 'success' : 'info'">
+          <i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" :class="{ 'animate-pulse': snapshot }" />{{ snapshot ? "引擎在线" : "引擎离线" }}
         </el-tag>
         <el-tag :type="status.running ? 'success' : 'info'">
-          {{ status.running ? "交易中" : "已停止" }}
+          <i class="mr-1.5 inline-block h-1.5 w-1.5 bg-current" />{{ status.running ? "交易中" : "已停止" }}
         </el-tag>
         <el-button
-          :type="status.running ? 'danger' : 'primary'" :loading="toggling"
+          size="small" :type="status.running ? 'danger' : 'primary'" :loading="toggling"
           :disabled="!status.running && (!status.configured || !status.capital_usdt)"
           @click="toggleRunning"
         >
           {{ status.running ? "停止" : "开始行情交易" }}
         </el-button>
+        <div class="flex-1" />
+        <span class="metric mr-2">
+          <span class="key">今日分析</span>{{ status.today.analyses }} / {{ status.today.limit }}
+          <span class="key ml-1.5">token</span>{{ status.today.input_tokens.toLocaleString() }} / {{ status.today.output_tokens.toLocaleString() }}
+        </span>
+        <el-select
+          :model-value="status.provider_id" class="w-64" clearable :value-on-clear="null" placeholder="跟随默认配置"
+          @update:model-value="changeProvider"
+        >
+          <template #prefix>
+            <span class="text-[11px] text-ap-muted">模型:</span>
+          </template>
+          <el-option v-for="p in providers" :key="p.id" :value="p.id" :label="`${p.name}（${p.model}）`" />
+        </el-select>
+        <el-select
+          :model-value="status.reasoning_effort" class="w-36" clearable :value-on-clear="null" placeholder="跟随配置"
+          @update:model-value="changeEffort"
+        >
+          <template #prefix>
+            <span class="text-[11px] text-ap-muted">思考:</span>
+          </template>
+          <el-option v-for="e in EFFORTS" :key="e" :value="e" :label="e" />
+        </el-select>
       </div>
-      <div class="stat">
-        <span>交易资金</span>
-        <template v-if="status.capital_usdt">
-          {{ money(status.capital_usdt) }} USDT
-          <span v-if="status.effective_capital && Number(status.effective_capital) < Number(status.capital_usdt)" class="text-[var(--el-color-warning)]!">
-            （权益不足，按 {{ money(status.effective_capital) }}）
-          </span>
-        </template>
-        <b v-else class="text-[var(--el-color-danger)]">未设置</b>
-        <el-link type="primary" underline="never" class="ml-1" @click="editCapital">
-          设置
-        </el-link>
+      <div class="flex flex-wrap items-center gap-y-1">
+        <span class="metric">
+          <span class="key">交易资金</span>
+          <template v-if="status.capital_usdt">
+            <b>{{ money(status.capital_usdt) }}</b><span class="unit">USDT</span>
+            <span v-if="status.effective_capital && Number(status.effective_capital) < Number(status.capital_usdt)" class="ml-1 text-ap-warn">
+              （权益不足，按 {{ money(status.effective_capital) }}）
+            </span>
+          </template>
+          <b v-else class="text-ap-down">未设置</b>
+          <el-link type="primary" class="ml-1.5 text-[11px]!" @click="editCapital">设置</el-link>
+        </span>
+        <span class="metric"><span class="key">账户权益</span><b>{{ money(account?.margin_balance) }}</b><span class="unit">USDT</span></span>
+        <span class="metric"><span class="key">可用</span><b>{{ money(account?.available_balance) }}</b><span class="unit">USDT</span></span>
+        <span class="metric">
+          <span class="key">未实现盈亏</span><b :class="pnlClass(account?.unrealized_pnl ?? '0')">{{ signedMoney(account?.unrealized_pnl) }}</b>
+        </span>
+        <span class="metric">
+          <span class="key">今日收益</span><b :class="pnlClass(status.today.net_pnl)">{{ signedMoney(status.today.net_pnl) }}</b><span class="unit">USDT</span>
+        </span>
+        <span class="metric"><span class="key">今日交易</span><b>{{ status.today.trades }}</b><span class="unit">笔</span></span>
+        <span class="metric"><span class="key">胜率</span><b class="text-ap-brand">{{ winRate }}</b></span>
       </div>
-      <div class="stat">
-        <span>账户权益</span>{{ money(account?.margin_balance) }} USDT
-      </div>
-      <div class="stat">
-        <span>可用</span>{{ money(account?.available_balance) }} USDT
-      </div>
-      <div class="stat">
-        <span>未实现盈亏</span>
-        <b :class="pnlClass(account?.unrealized_pnl ?? '0')">{{ money(account?.unrealized_pnl) }}</b>
-      </div>
-      <div class="stat">
-        <span>今日分析</span>{{ status.today.analyses }} / {{ status.today.limit }}
-        <span class="ml-1">token</span>{{ status.today.input_tokens.toLocaleString() }} / {{ status.today.output_tokens.toLocaleString() }}
-      </div>
-      <div class="flex-1" />
-      <el-select
-        :model-value="status.provider_id" class="w-56" clearable :value-on-clear="null" placeholder="模型：跟随默认配置"
-        @update:model-value="changeProvider"
-      >
-        <el-option v-for="p in providers" :key="p.id" :value="p.id" :label="`${p.name}（${p.model}）`" />
-      </el-select>
-      <el-select
-        :model-value="status.reasoning_effort" class="w-40" clearable :value-on-clear="null" placeholder="思考强度：跟随配置"
-        @update:model-value="changeEffort"
-      >
-        <el-option v-for="e in EFFORTS" :key="e" :value="e" :label="e" />
-      </el-select>
     </div>
 
     <el-alert v-if="!status.configured" type="warning" :closable="false" show-icon>
@@ -311,165 +331,195 @@ onBeforeUnmount(() => clearInterval(timer))
     </el-alert>
 
     <!-- 持仓 -->
-    <el-table :data="positions" border size="small" empty-text="没有持仓">
-      <el-table-column prop="symbol" label="币种" min-width="110" />
-      <el-table-column label="方向" width="70">
-        <template #default="{ row }">
-          <el-tag :type="row.side === 'LONG' ? 'success' : 'danger'" size="small">
-            {{ row.side === "LONG" ? "多" : "空" }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="数量" min-width="90">
-        <template #default="{ row }">
-          {{ num(row.amount) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="开仓价" min-width="100">
-        <template #default="{ row }">
-          {{ num(row.entry_price) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="保本价" min-width="100">
-        <template #default="{ row }">
-          {{ Number(row.break_even_price).toFixed(2) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="标记价" min-width="100">
-        <template #default="{ row }">
-          {{ Number(row.mark_price).toFixed(2) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="未实现盈亏" min-width="100">
-        <template #default="{ row }">
-          <span :class="pnlClass(row.unrealized_pnl)">{{ money(row.unrealized_pnl) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="强平价" min-width="100">
-        <template #default="{ row }">
-          {{ Number(row.liquidation_price) ? Number(row.liquidation_price).toFixed(2) : "-" }}
-        </template>
-      </el-table-column>
-      <el-table-column label="杠杆" width="110">
-        <template #default="{ row }">
-          {{ row.leverage }}x {{ row.margin_type === "ISOLATED" ? "逐仓" : "全仓" }}
-        </template>
-      </el-table-column>
-      <el-table-column label="止损 / 止盈" min-width="140">
-        <template #default="{ row }">
-          {{ exitPrices(row as SnapshotPosition).stop }} / {{ exitPrices(row as SnapshotPosition).target }}
-        </template>
-      </el-table-column>
-      <el-table-column label="平仓倒计时" width="100">
-        <template #default="{ row }">
-          {{ closeCountdown(row.symbol) }}
-        </template>
-      </el-table-column>
-    </el-table>
+    <el-card shadow="never" body-class="p-0!">
+      <template #header>
+        <i class="inline-block h-1.5 w-1.5" :class="positions.length ? 'bg-ap-up' : 'bg-ap-faint'" />
+        <span>持仓 ({{ positions.length }})</span>
+      </template>
+      <el-table :data="positions" size="small" empty-text="没有持仓">
+        <el-table-column label="币种" min-width="130">
+          <template #default="{ row }">
+            <span class="text-ap-brand font-bold">{{ row.symbol }}</span>
+            <el-tag size="small" type="info" class="ml-1.5">
+              永续
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="方向" width="70">
+          <template #default="{ row }">
+            <el-tag :type="row.side === 'LONG' ? 'success' : 'danger'" size="small">
+              {{ row.side === "LONG" ? "多" : "空" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" min-width="90" align="right">
+          <template #default="{ row }">
+            {{ num(row.amount) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="开仓价" min-width="100" align="right">
+          <template #default="{ row }">
+            {{ num(row.entry_price) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="保本价" min-width="100" align="right">
+          <template #default="{ row }">
+            <span class="text-ap-muted">{{ money(row.break_even_price) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="标记价" min-width="100" align="right">
+          <template #default="{ row }">
+            <b>{{ money(row.mark_price) }}</b>
+          </template>
+        </el-table-column>
+        <el-table-column label="未实现盈亏" min-width="100" align="right">
+          <template #default="{ row }">
+            <b :class="pnlClass(row.unrealized_pnl)">{{ signedMoney(row.unrealized_pnl) }}</b>
+          </template>
+        </el-table-column>
+        <el-table-column label="强平价" min-width="100" align="right">
+          <template #default="{ row }">
+            {{ Number(row.liquidation_price) ? money(row.liquidation_price) : "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="杠杆" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" type="info">
+              {{ row.leverage }}x {{ row.margin_type === "ISOLATED" ? "逐仓" : "全仓" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="止损 / 止盈" min-width="160" align="center">
+          <template #default="{ row }">
+            <span class="text-ap-down">{{ exitPrices(row as SnapshotPosition).stop }}</span>
+            /
+            <span class="text-ap-up">{{ exitPrices(row as SnapshotPosition).target }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="平仓倒计时" width="100" align="center">
+          <template #default="{ row }">
+            <b class="text-ap-brand">{{ closeCountdown(row.symbol) }}</b>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
-    <div class="min-h-0 flex flex-1 gap-3">
-      <!-- 侧边栏：交易币种 -->
-      <div class="w-60 flex flex-col border border-[var(--el-border-color)] rounded border-solid">
-        <div class="flex items-center justify-between border-b border-b-[var(--el-border-color)] border-b-solid px-3 py-2">
-          <span class="font-bold">交易币种</span>
-          <el-button size="small" type="primary" @click="addVisible = true">
-            新增
-          </el-button>
-        </div>
-        <el-scrollbar class="flex-1">
+    <div class="min-h-0 flex flex-1 gap-2">
+      <!-- 交易币种 -->
+      <el-card shadow="never" class="w-60 flex shrink-0 flex-col" body-class="p-0! min-h-0 flex-1">
+        <template #header>
+          <div class="w-full flex items-center justify-between">
+            <span>交易币种 ({{ symbols.length }})</span>
+            <el-button size="small" type="primary" @click="addVisible = true">
+              新增
+            </el-button>
+          </div>
+        </template>
+        <el-scrollbar>
           <div
-            v-for="s in symbols" :key="s.symbol"
-            class="cursor-pointer border-b border-b-[var(--el-border-color-lighter)] border-b-solid px-3 py-2"
-            :class="s.symbol === selected ? 'bg-[var(--el-color-primary-light-9)]' : ''"
+            v-for="s in symbols" :key="s.symbol" class="symbol-item" :class="{ active: s.symbol === selected }"
             @click="selected = s.symbol"
           >
             <div class="flex items-center justify-between">
-              <span class="font-bold">{{ s.symbol }}</span>
+              <span class="text-sm font-bold">{{ s.symbol }}</span>
               <el-tag :type="symbolState(s).type" size="small">
                 {{ symbolState(s).label }}
               </el-tag>
             </div>
-            <div class="mt-1 flex justify-end text-xs">
-              <el-link type="danger" underline="never" class="text-xs!" @click.stop="remove(s)">
+            <div class="mt-1 flex items-center justify-between text-[11px]">
+              <span v-if="positionLine(s.symbol)" class="font-semibold" :class="positionLine(s.symbol)!.long ? 'text-ap-up' : 'text-ap-down'">
+                {{ positionLine(s.symbol)!.text }}
+              </span>
+              <span v-else />
+              <el-link type="danger" class="text-[11px]!" @click.stop="remove(s)">
                 删除
               </el-link>
             </div>
           </div>
           <el-empty v-if="!symbols.length" description="还没有交易币种" :image-size="60" />
         </el-scrollbar>
-      </div>
+      </el-card>
 
-      <!-- 主区域：当前计划、挂单、时间线 -->
-      <el-scrollbar class="flex-1">
-        <div class="flex flex-col gap-3 pr-2">
-          <PlanCard
-            v-if="current" :symbol="current" :analysis="livePlan ?? latestAnalysis" :latest="latestAnalysis" :orders="planOrders"
-            :requesting="requesting"
-            @analyze="analyze" @detail="openAnalysis"
-          />
+      <!-- 当前币种：计划、挂单、时间线 -->
+      <el-card shadow="never" class="min-w-0 flex flex-1 flex-col" body-class="p-0! min-h-0 flex-1">
+        <template #header>
+          <el-icon class="text-ap-brand">
+            <DataAnalysis />
+          </el-icon>
+          <span>{{ current ? `${current.symbol} · 交易计划` : "交易计划" }}</span>
+        </template>
+        <el-scrollbar>
+          <div class="flex flex-col gap-3 p-3">
+            <PlanCard
+              v-if="current" :symbol="current" :analysis="livePlan ?? latestAnalysis" :latest="latestAnalysis" :orders="planOrders"
+              :requesting="requesting"
+              @analyze="analyze" @detail="openAnalysis"
+            />
 
-          <div v-if="current">
-            <div class="mb-2 font-bold">
-              当前挂单
-            </div>
-            <el-table :data="symbolOrders" border size="small" empty-text="没有挂单">
-              <el-table-column label="类型" min-width="150">
-                <template #default="{ row }">
-                  {{ row.type }}
-                  <el-tag v-if="row.conditional" size="small" class="ml-1">
-                    条件单
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="方向" width="110">
-                <template #default="{ row }">
-                  {{ row.side === "BUY" ? "买" : "卖" }}{{ row.reduce_only ? "（只减仓）" : "" }}
-                </template>
-              </el-table-column>
-              <el-table-column prop="priceText" label="价格" min-width="130" />
-              <el-table-column label="数量" min-width="100">
-                <template #default="{ row }">
-                  {{ row.quantity === "全部持仓" ? row.quantity : num(row.quantity) }}
-                </template>
-              </el-table-column>
-              <el-table-column label="来源" width="80">
-                <template #default="{ row }">
-                  {{ isOwnOrder(row.client_id) ? "本程序" : "手动" }}
-                </template>
-              </el-table-column>
-              <el-table-column label="时间" width="130">
-                <template #default="{ row }">
-                  {{ formatTime(new Date(row.time).toISOString(), "MM-DD HH:mm:ss") }}
-                </template>
-              </el-table-column>
-            </el-table>
+            <el-card v-if="current" shadow="never" class="sub-card" body-class="p-0!">
+              <template #header>
+                当前挂单 ({{ symbolOrders.length }})
+              </template>
+              <el-table :data="symbolOrders" size="small" empty-text="没有挂单">
+                <el-table-column label="类型" min-width="150">
+                  <template #default="{ row }">
+                    {{ row.type }}
+                    <el-tag v-if="row.conditional" size="small" type="info" class="ml-1">
+                      条件单
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="方向" width="110">
+                  <template #default="{ row }">
+                    <b :class="row.side === 'BUY' ? 'text-ap-up' : 'text-ap-down'">{{ row.side === "BUY" ? "买" : "卖" }}</b>{{ row.reduce_only ? "（只减仓）" : "" }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="priceText" label="价格 / 触发" min-width="130" align="right" />
+                <el-table-column label="数量" min-width="100" align="right">
+                  <template #default="{ row }">
+                    {{ row.quantity === "全部持仓" ? row.quantity : num(row.quantity) }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="来源" width="80">
+                  <template #default="{ row }">
+                    <span class="text-ap-muted">{{ isOwnOrder(row.client_id) ? "本程序" : "手动" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="时间" width="130" align="center">
+                  <template #default="{ row }">
+                    <span class="text-ap-muted">{{ formatTime(new Date(row.time).toISOString()) }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+
+            <el-card shadow="never" class="sub-card">
+              <template #header>
+                时间线
+              </template>
+              <div v-if="events.length" class="ml-1.5 border-l border-l-ap-line border-l-solid">
+                <div v-for="e in events" :key="e.id" class="relative pb-3 pl-5 last:pb-1">
+                  <i class="absolute left-[-6px] top-1 h-2.5 w-2.5 border-2 border-ap-panel-low border-solid" :class="LEVEL_DOTS[e.level]" />
+                  <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+                    <span class="text-ap-brand font-bold">{{ formatTime(e.created_at) }}</span>
+                    <el-tag size="small" type="info">
+                      {{ e.symbol ?? "账户" }}
+                    </el-tag>
+                    <span :class="e.level === 'error' ? 'text-ap-down' : ''">{{ e.message }}</span>
+                    <el-link v-if="e.analysis_id && e.kind !== 'analysis_started'" type="primary" @click="openAnalysis(e.analysis_id)">
+                      查看分析
+                    </el-link>
+                  </div>
+                </div>
+              </div>
+              <el-empty v-else description="还没有事件" :image-size="60" />
+              <el-button v-if="events.length && !eventsExhausted" link type="primary" class="mt-1" @click="loadMoreEvents">
+                加载更早的事件
+              </el-button>
+            </el-card>
           </div>
-
-          <div>
-            <div class="mb-2 font-bold">
-              时间线
-            </div>
-            <el-timeline v-if="events.length" class="pl-1">
-              <el-timeline-item
-                v-for="e in events" :key="e.id" :timestamp="formatTime(e.created_at)" :type="LEVEL_TYPES[e.level]"
-                placement="top"
-              >
-                <el-tag size="small" type="info" class="mr-2">
-                  {{ e.symbol ?? "账户" }}
-                </el-tag>
-                <span :class="e.level === 'error' ? 'text-[var(--el-color-danger)]' : ''">{{ e.message }}</span>
-                <el-link v-if="e.analysis_id && e.kind !== 'analysis_started'" type="primary" underline="never" class="ml-2" @click="openAnalysis(e.analysis_id)">
-                  查看分析
-                </el-link>
-              </el-timeline-item>
-            </el-timeline>
-            <el-empty v-else description="还没有事件" :image-size="60" />
-            <el-button v-if="events.length && !eventsExhausted" link type="primary" @click="loadMoreEvents">
-              加载更早的事件
-            </el-button>
-          </div>
-        </div>
-      </el-scrollbar>
+        </el-scrollbar>
+      </el-card>
     </div>
 
     <AddSymbolDialog v-model="addVisible" @added="onAdded" />
@@ -478,12 +528,43 @@ onBeforeUnmount(() => clearInterval(timer))
 </template>
 
 <style scoped>
-.stat {
-  font-size: 14px;
-}
-.stat span {
-  margin-right: 6px;
-  color: var(--el-text-color-secondary);
+.metric {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
   font-size: 12px;
 }
+.metric + .metric::before {
+  content: "|";
+  margin: 0 10px 0 5px;
+  color: var(--ap-line);
+}
+.metric .key {
+  color: var(--ap-muted);
+  font-size: 11px;
+}
+.metric .unit {
+  color: var(--ap-muted);
+  font-size: 10px;
+}
+.symbol-item {
+  padding: 10px 12px;
+  border-bottom: 1px solid color-mix(in srgb, var(--ap-line) 50%, transparent);
+  border-left: 2px solid transparent;
+  cursor: pointer;
+}
+.symbol-item:hover {
+  background: var(--ap-panel-highest);
+}
+.symbol-item.active {
+  border-left-color: var(--ap-brand);
+  background: var(--ap-panel-high);
+}
+.sub-card {
+  --el-card-bg-color: var(--ap-panel-low);
+}
+.sub-card :deep(.el-table) {
+  --el-table-bg-color: var(--ap-panel-low);
+  --el-table-tr-bg-color: var(--ap-panel-low);
+}
 </style>