From a8105264cd34de9c30151ca1bc41b3c79f3b0a55 Mon Sep 17 00:00:00 2001
From: claude_dev <claude-dev@sanguo.local>
Date: Sat, 11 Jul 2026 22:53:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(layout):=20=E9=A1=B6=E6=A0=8F=E8=A2=AB?=
 =?UTF-8?q?=E6=8C=A4=E6=88=90=E7=AA=84=E6=9D=A1=E3=80=81=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=8C=BA=E8=B7=91=E5=88=B0=E4=B8=AD=E5=A4=AE=E4=B8=8D=E5=9C=A8?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8A=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因: Layout 内层 <el-container> 用原生 <header>(非 <el-header>),
element-plus 不会自动转纵向 → flex-direction 保持 row, header 与 el-main
横向并排, header 被挤成 308px 窄条(应满宽 ~992px), 用户区(头像/用户名/登出)
随 justify-content 落到屏幕中央, 不在右上角。

修复:
- 内层 <el-container direction="vertical"> 强制纵向 → header 回到顶部满宽栏,
  el-main 在下; 用户区回到右上角
- 顶栏静态口号 "投研·回测·模拟 控制台" 换成动态面包屑(分组/页名, 按路由推断)
---
 frontend/src/views/Layout.vue | 43 +++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index dd77fe8..dda3e4a 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -14,6 +14,27 @@ const activeMenu = computed(() => {
   return p
 })
 
+// 顶栏动态页名（按路由推断，替代静态口号占位）
+const PAGE_TITLE: Array<{ match: RegExp; group: string; title: string }> = [
+  { match: /^\/dashboard$/, group: '工作台', title: '工作台' },
+  { match: /^\/backtest\/new$/, group: '回测', title: '新建回测' },
+  { match: /^\/backtest\/optimize$/, group: '回测', title: '参数优化' },
+  { match: /^\/backtest\/history$/, group: '回测', title: '历史任务' },
+  { match: /^\/backtest\/progress\//, group: '回测', title: '任务进度' },
+  { match: /^\/backtest\/result\//, group: '回测', title: '回测结果' },
+  { match: /^\/factor\/new$/, group: '投研', title: '因子分析' },
+  { match: /^\/factor\/progress\//, group: '投研', title: '因子分析进度' },
+  { match: /^\/factor\/result\//, group: '投研', title: '因子分析结果' },
+  { match: /^\/paper\/new$/, group: '模拟', title: '新建模拟盘' },
+  { match: /^\/paper\/result\//, group: '模拟', title: '模拟盘结果' },
+  { match: /^\/paper\/live\//, group: '模拟', title: '实走监控' },
+  { match: /^\/paper$/, group: '模拟', title: '模拟交易' },
+]
+const pageMeta = computed(() => {
+  const p = route.path
+  return PAGE_TITLE.find((r) => r.match.test(p)) ?? { group: '', title: '控制台' }
+})
+
 function navigate(path: string): void {
   router.push(path)
 }
@@ -64,9 +85,13 @@ function onLogout(): void {
       <div class="sidebar-foot">v2 · 量化研究台</div>
     </aside>
 
-    <el-container>
+    <el-container direction="vertical">
       <header class="header">
-        <span class="sys-name">投研 · 回测 · 模拟 控制台</span>
+        <div class="sys-crumb">
+          <span v-if="pageMeta.group" class="sys-group">{{ pageMeta.group }}</span>
+          <span v-if="pageMeta.group" class="sys-sep">/</span>
+          <span class="sys-name">{{ pageMeta.title }}</span>
+        </div>
         <div class="user-area">
           <span class="user-avatar">{{ (auth.username ?? '?').slice(0, 1).toUpperCase() }}</span>
           <span class="user-name">{{ auth.username }}</span>
@@ -157,6 +182,20 @@ function onLogout(): void {
   background: var(--bg-card);
   border-bottom: 1px solid var(--border);
 }
+.sys-crumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sys-group {
+  font-size: 13px;
+  color: var(--text-3);
+  font-weight: 500;
+}
+.sys-sep {
+  color: var(--border-2);
+  font-size: 13px;
+}
 .sys-name {
   font-size: 13px;
   font-weight: 600;