From f6c2dcead8c87691adc10aca89d21ec75410db67 Mon Sep 17 00:00:00 2001
From: yuxuanhui <ud.k2007@gmail.com>
Date: Wed, 9 Sep 2026 08:34:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E4=BE=A7=E6=A0=8F?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=92=8C=E5=90=8C=E6=AD=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .scratch/sidebar-layout/issues/01-shell.md |  12 +++
 frontend/src/pages/AlphaPage.tsx           | 111 +++++++++------------
 frontend/src/style.css                     |  57 ++++-------
 frontend/tests/alpha-management.spec.ts    |   6 +-
 4 files changed, 84 insertions(+), 102 deletions(-)
 create mode 100644 .scratch/sidebar-layout/issues/01-shell.md

diff --git a/.scratch/sidebar-layout/issues/01-shell.md b/.scratch/sidebar-layout/issues/01-shell.md
new file mode 100644
index 0000000..ce568ee
--- /dev/null
+++ b/.scratch/sidebar-layout/issues/01-shell.md
@@ -0,0 +1,12 @@
+# 侧栏与工作空间布局
+Type: task
+Status: resolved
+
+## Scope
+按 oppein-design-propotype 重构侧栏：230/64px、用户菜单、命令入口、最近访问、语义色与窄屏隐藏。右侧仅保留配置、Bot、同步任务三个图标，压缩顶部占用。保留业务页面与未提交改动，不部署。
+
+## Validation
+构建；侧栏展开/收起、最近访问关闭、用户菜单、三个入口、主题、窄屏与现有工作空间回归。
+
+## Answer
+已完成侧栏、用户菜单、快捷导航、最近访问及三个图标入口。保留现有平级业务导航，不新增语言系统或移动抽屉。构建通过；13 项相关端到端用例通过，最后的侧栏复验通过；已查看展开浅色、收起深色与窄屏截图。未部署。
diff --git a/frontend/src/pages/AlphaPage.tsx b/frontend/src/pages/AlphaPage.tsx
index ad62cd1..0f96054 100644
--- a/frontend/src/pages/AlphaPage.tsx
+++ b/frontend/src/pages/AlphaPage.tsx
@@ -479,60 +479,6 @@ export function AlphaPage({
     account?.connection_status === "expired";
   return (
     <>
-      <div className="page-heading">
-        <div>
-          <h1>Alpha 管理</h1>
-        </div>
-        <div className="inline-actions">
-          <Button type="tertiary" onClick={() => setImporting(true)}>
-            导入 Alpha ID
-          </Button>
-          <Button
-            theme="solid"
-            disabled={!connected}
-            onClick={() => {
-              setSyncingScope(submission);
-              onOverlay();
-            }}
-          >
-            按天同步
-          </Button>
-          {submission === "SUBMITTED" && (
-            <Button
-              loading={busy === "full_sync"}
-              disabled={!connected}
-              onClick={() => void newTask("full_sync")}
-            >
-              全量同步已提交
-            </Button>
-          )}
-        </div>
-      </div>
-      <div className="library-stats">
-        <div>
-          <span>已同步 Alpha</span>
-          <strong>{Number(facets.total ?? 0).toLocaleString()}</strong>
-        </div>
-        <div>
-          <span>我的收藏</span>
-          <strong>{Number(facets.favorites ?? 0).toLocaleString()}</strong>
-        </div>
-        <div>
-          <span>覆盖地区</span>
-          <strong>
-            {Array.isArray(facets.region) ? facets.region.length : 0}
-          </strong>
-        </div>
-        <div className="last-sync">
-          <span>最近数据更新</span>
-          <strong>
-            {formatTime(
-              typeof facets.last_sync === "string" ? facets.last_sync : null,
-              account?.timezone,
-            )}
-          </strong>
-        </div>
-      </div>
       {!connected && (
         <Banner
           type="info"
@@ -548,15 +494,26 @@ export function AlphaPage({
       )}
       {error && <Banner type="danger" description={error} />}
       <section className="library-panel" ref={tablePanel}>
-        <Tabs
-          className="alpha-submission-tabs"
-          activeKey={submission}
-          onChange={changeSubmission}
-          tabList={[
-            { itemKey: "UNSUBMITTED", tab: "待提交" },
-            { itemKey: "SUBMITTED", tab: "已提交" },
-          ]}
-        />
+        <div className="alpha-tabs-header">
+          <Tabs
+            className="alpha-submission-tabs"
+            activeKey={submission}
+            onChange={changeSubmission}
+            tabList={[
+              { itemKey: "UNSUBMITTED", tab: "待提交" },
+              { itemKey: "SUBMITTED", tab: "已提交" },
+            ]}
+          />
+          <span className="alpha-last-sync">
+            最近数据更新{" "}
+            <span>
+              {formatTime(
+                typeof facets.last_sync === "string" ? facets.last_sync : null,
+                account?.timezone,
+              )}
+            </span>
+          </span>
+        </div>
         <SavedViews
           filters={{ ...filters, submission, sort, direction, limit: pageSize }}
           columns={visibleColumns}
@@ -856,6 +813,34 @@ export function AlphaPage({
                 导出
               </Button>
             </a>
+            <Button
+              size="small"
+              type="tertiary"
+              onClick={() => setImporting(true)}
+            >
+              导入 Alpha ID
+            </Button>
+            <Button
+              size="small"
+              theme="solid"
+              disabled={!connected}
+              onClick={() => {
+                setSyncingScope(submission);
+                onOverlay();
+              }}
+            >
+              按天同步
+            </Button>
+            {submission === "SUBMITTED" && (
+              <Button
+                size="small"
+                loading={busy === "full_sync"}
+                disabled={!connected}
+                onClick={() => void newTask("full_sync")}
+              >
+                全量同步已提交
+              </Button>
+            )}
             <Popover
               trigger="click"
               position="bottomRight"
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 6dd00e8..ae18188 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -161,36 +161,6 @@ label:not(.semi-checkbox):not(.semi-radio) {
   flex-direction: column;
   overflow: hidden;
 }
-.library-stats {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  gap: var(--space-4);
-  padding: 0 0 var(--space-3);
-  flex-wrap: wrap;
-}
-.library-stats > div {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-2);
-}
-.library-stats span {
-  font-size: 12px;
-  color: var(--muted);
-}
-.library-stats strong {
-  font-size: 16px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-.library-stats .last-sync {
-  margin-left: auto;
-}
-.library-stats .last-sync strong {
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--muted);
-}
 .library-panel {
   display: flex;
   flex-direction: column;
@@ -210,9 +180,28 @@ label:not(.semi-checkbox):not(.semi-radio) {
   max-height: 44%;
   overflow: auto;
 }
-.alpha-submission-tabs {
+.alpha-tabs-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
   flex-shrink: 0;
   padding: 0 var(--space-3);
+  border-bottom: 1px solid var(--line);
+}
+.alpha-submission-tabs {
+  min-width: 0;
+  flex-shrink: 0;
+}
+.alpha-last-sync {
+  margin-left: auto;
+  padding: var(--space-2) 0;
+  color: var(--muted);
+  font-size: 12px;
+  text-align: right;
+}
+.alpha-last-sync > span {
+  display: inline-block;
+  font-variant-numeric: tabular-nums;
 }
 .alpha-submission-tabs .semi-tabs-content {
   display: none;
@@ -782,9 +771,6 @@ label:not(.semi-checkbox):not(.semi-radio) {
   .advanced-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .library-stats .last-sync {
-    display: none;
-  }
   .preferences-grid {
     grid-template-columns: 1fr 1fr;
   }
@@ -804,9 +790,6 @@ label:not(.semi-checkbox):not(.semi-radio) {
     align-items: flex-start;
     flex-wrap: wrap;
   }
-  .library-stats {
-    gap: var(--space-3);
-  }
   .primary-filters {
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/frontend/tests/alpha-management.spec.ts b/frontend/tests/alpha-management.spec.ts
index cdb34ec..0e299c6 100644
--- a/frontend/tests/alpha-management.spec.ts
+++ b/frontend/tests/alpha-management.spec.ts
@@ -9,7 +9,7 @@ test("submission tabs, day selection, local correlation and reload", async ({
   await page.getByLabel("密码", { exact: true }).fill("browser-test-password");
   await page.getByRole("button", { name: "进入工作空间" }).click();
   await expect(
-    page.getByRole("heading", { name: "Alpha 管理", exact: true }),
+    page.getByRole("tab", { name: "待提交", exact: true }),
   ).toBeVisible();
   const headers = { "X-WQ-Request": "1" };
   const credentials = await page.request.put("/api/v1/account/credentials", {
@@ -118,7 +118,9 @@ test("submission tabs, day selection, local correlation and reload", async ({
   await page.reload();
   await page.getByRole("textbox", { name: "搜索 Alpha" }).fill("TEST0004");
   await page.getByRole("button", { name: "查询", exact: true }).click();
-  await expect(page.locator(".alpha-table:visible")).toContainText("相关性偏高");
+  await expect(page.locator(".alpha-table:visible")).toContainText(
+    "相关性偏高",
+  );
   await page.getByRole("tab", { name: "已提交", exact: true }).click();
   await expect(
     page.getByRole("button", { name: "全量同步已提交" }),