From 13d1fea5fb0417660c85d4dfdfcb30f3601667ee Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Mon, 25 May 2026 00:00:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E6=8C=89=E9=92=AE=E4=BB=8E=20Header=20?=
 =?UTF-8?q?=E7=A7=BB=E8=87=B3=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 Header 左侧折叠按钮，改用 TDesign Menu operations 渲染底部折叠按钮
- Header 品牌名与版本号使用 brand-group 基线对齐
- 侧边栏折叠宽度从 80px 对齐 TDesign 默认 64px
- 更新相关测试和 DEVELOPMENT.md 文档
---
 DEVELOPMENT.md                              |  8 ++--
 src/web/app.tsx                             | 16 ++++----
 src/web/components/Sidebar/index.tsx        | 17 +++++++--
 src/web/styles.css                          | 16 ++++++--
 tests/web/App.test.tsx                      | 17 +++++++++
 tests/web/components/Sidebar/index.test.tsx | 42 +++++++++++++++++++--
 6 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index c0d233a..63fb5ae 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -38,7 +38,7 @@ src/
      app.ts          应用全局常量（name、title、subtitle、description）
   web/              React 前端（通过 Vite 构建）
     index.html      HTML 入口
-    app.tsx         根组件（Admin 布局：Header + Sidebar + Content）
+     app.tsx         根组件（Admin 布局：Header + Sidebar + Content + 版本号展示）
     main.tsx        入口（BrowserRouter + QueryClient 挂载 + ErrorBoundary + ReactQueryDevtools + TDesign CSS 导入）
     routes.tsx      路由配置（定义所有页面路由）
     styles.css      全局样式与自定义 CSS 变量
@@ -55,7 +55,7 @@ src/
     components/     UI 组件
       ErrorBoundary.tsx  React 错误边界，捕获渲染异常并展示降级 UI
       Sidebar/
-        index.tsx   侧边栏菜单组件（TDesign Menu + 折叠控制）
+         index.tsx   侧边栏菜单组件（TDesign Menu + 底部折叠按钮）
     hooks/          React hooks
       use-theme-preference.ts  主题偏好 hook（system/light/dark，localStorage 记忆 + matchMedia 监听）
       use-sidebar-collapsed.ts 侧边栏折叠状态 hook（localStorage 记忆）
@@ -268,10 +268,10 @@ main.tsx
                 │   ├── useThemePreference() ── Header 主题模式 RadioGroup（系统/明亮/黑暗）
                 │   ├── useSidebarCollapsed() ── 侧边栏折叠状态（localStorage 记忆）
                 │   ├── Layout
-                │   │   ├── Header（折叠按钮 + 品牌名 + 页标题 + 主题切换）
+                 │   │   ├── Header（品牌名 + 版本号 + 页标题 + 主题切换）
                 │   │   └── Layout（嵌套）
                 │   │       ├── Aside
-                │   │       │   └── Sidebar（TDesign Menu，菜单项点击导航）
+                 │   │       │   └── Sidebar（TDesign Menu + 底部折叠按钮，菜单项点击导航）
                 │   │       └── Content
                 │   │           └── AppRoutes（路由配置）
                 │   │               ├── / → DashboardPage（欢迎语 + /api/meta 联调）
diff --git a/src/web/app.tsx b/src/web/app.tsx
index 232c500..323d469 100644
--- a/src/web/app.tsx
+++ b/src/web/app.tsx
@@ -1,8 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
 import { useLocation } from "react-router";
-import { ChevronLeftIcon, ChevronRightIcon } from "tdesign-icons-react";
-import { Button, Layout, RadioGroup } from "tdesign-react";
+import { Layout, RadioGroup } from "tdesign-react";
 
 import type { MetaResponse } from "../shared/api";
 
@@ -50,11 +49,10 @@ export function App() {
     <Layout className="app-layout">
       <Header className="app-header">
         <div className="app-header-left">
-          <Button className="app-sidebar-toggle" onClick={toggleCollapsed} shape="square" variant="text">
-            {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-          </Button>
-          <span className="app-brand">{APP.title}</span>
-          {versionDisplay && <span className="app-version">{versionDisplay}</span>}
+          <span className="app-brand-group">
+            <span className="app-brand">{APP.title}</span>
+            {versionDisplay && <span className="app-version">{versionDisplay}</span>}
+          </span>
           <span className="app-page-title">{pageTitle}</span>
         </div>
         <div className="app-header-right">
@@ -68,8 +66,8 @@ export function App() {
         </div>
       </Header>
       <Layout>
-        <Aside className="app-sidebar" width={collapsed ? "80px" : "232px"}>
-          <Sidebar collapsed={collapsed} />
+        <Aside className="app-sidebar" width={collapsed ? "64px" : "232px"}>
+          <Sidebar collapsed={collapsed} onToggleCollapsed={toggleCollapsed} />
         </Aside>
         <Layout>
           <Content className="app-content">
diff --git a/src/web/components/Sidebar/index.tsx b/src/web/components/Sidebar/index.tsx
index e801b3c..ac8d6d5 100644
--- a/src/web/components/Sidebar/index.tsx
+++ b/src/web/components/Sidebar/index.tsx
@@ -1,5 +1,6 @@
 import { useLocation, useNavigate } from "react-router";
-import { Menu } from "tdesign-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "tdesign-icons-react";
+import { Button, Menu } from "tdesign-react";
 
 import { MENU_ITEMS } from "../../menu";
 
@@ -7,9 +8,10 @@ const { MenuItem } = Menu;
 
 interface SidebarProps {
   collapsed: boolean;
+  onToggleCollapsed: () => void;
 }
 
-export function Sidebar({ collapsed }: SidebarProps) {
+export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -29,8 +31,17 @@ export function Sidebar({ collapsed }: SidebarProps) {
       className="app-sidebar-menu"
       collapsed={collapsed}
       onChange={handleMenuChange}
+      operations={
+        <Button
+          className="app-sidebar-collapse-btn"
+          icon={collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+          onClick={onToggleCollapsed}
+          shape="square"
+          variant="text"
+        />
+      }
       value={activeValue}
-      width={collapsed ? "80px" : "232px"}
+      width={collapsed ? "64px" : "232px"}
     >
       {MENU_ITEMS.map((item) => (
         <MenuItem icon={item.icon} key={item.value} value={item.value}>
diff --git a/src/web/styles.css b/src/web/styles.css
index f4c76b8..4a1c821 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -30,8 +30,10 @@
   gap: var(--td-comp-margin-s);
 }
 
-.app-sidebar-toggle {
-  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
+.app-brand-group {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--td-comp-margin-s);
 }
 
 .app-brand {
@@ -39,14 +41,20 @@
   color: var(--td-text-color-primary);
   font-size: calc(var(--td-font-size-title-large) + 6px);
   font-weight: 700;
-  line-height: 64px;
+  line-height: 1;
 }
 
 .app-version {
   color: var(--td-text-color-placeholder);
   font-size: var(--td-font-size-body-small);
   font-weight: 400;
-  line-height: 64px;
+  line-height: 1;
+}
+
+.app-sidebar-collapse-btn {
+  width: 100%;
+  justify-content: center;
+  color: var(--td-text-color-secondary);
 }
 
 .app-page-title {
diff --git a/tests/web/App.test.tsx b/tests/web/App.test.tsx
index 876ad20..95a4ef5 100644
--- a/tests/web/App.test.tsx
+++ b/tests/web/App.test.tsx
@@ -44,4 +44,21 @@ describe("App", () => {
     expect(screen.getAllByText("用户管理").length).toBeGreaterThan(0);
     expect(screen.getAllByText("系统设置").length).toBeGreaterThan(0);
   });
+
+  test("Header 不包含侧边栏折叠按钮", () => {
+    window.fetch = (async () => {
+      return new Response(
+        JSON.stringify({ ok: true, service: "test-app", timestamp: new Date().toISOString(), version: "0.1.0" }),
+        {
+          headers: { "Content-Type": "application/json" },
+          status: 200,
+        },
+      );
+    }) as unknown as typeof fetch;
+
+    renderWithProviders(createElement(App));
+
+    const toggleButtons = document.querySelectorAll(".app-sidebar-toggle");
+    expect(toggleButtons.length).toBe(0);
+  });
 });
diff --git a/tests/web/components/Sidebar/index.test.tsx b/tests/web/components/Sidebar/index.test.tsx
index 216cb3a..35c22e7 100644
--- a/tests/web/components/Sidebar/index.test.tsx
+++ b/tests/web/components/Sidebar/index.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import { screen } from "@testing-library/react";
 import { describe, expect, test } from "bun:test";
 import { createElement } from "react";
@@ -7,7 +8,7 @@ import { renderWithProviders } from "../../test-utils";
 
 describe("Sidebar", () => {
   test("渲染菜单项", () => {
-    renderWithProviders(createElement(Sidebar, { collapsed: false }));
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }));
 
     expect(screen.getByText("仪表盘")).not.toBeNull();
     expect(screen.getByText("用户管理")).not.toBeNull();
@@ -15,7 +16,7 @@ describe("Sidebar", () => {
   });
 
   test("折叠状态下仍渲染菜单项", () => {
-    renderWithProviders(createElement(Sidebar, { collapsed: true }));
+    renderWithProviders(createElement(Sidebar, { collapsed: true, onToggleCollapsed: () => {} }));
 
     expect(screen.getByText("仪表盘")).not.toBeNull();
     expect(screen.getByText("用户管理")).not.toBeNull();
@@ -23,7 +24,42 @@ describe("Sidebar", () => {
   });
 
   test("高亮当前路由对应的菜单项", () => {
-    renderWithProviders(createElement(Sidebar, { collapsed: false }), { initialRoute: "/users" });
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }), {
+      initialRoute: "/users",
+    });
+
+    const activeItem = document.querySelector(".t-is-active");
+    expect(activeItem).not.toBeNull();
+    expect(activeItem?.textContent).toContain("用户管理");
+  });
+
+  test("展开态底部渲染折叠按钮", () => {
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }));
+
+    const collapseBtn = document.querySelector(".app-sidebar-collapse-btn");
+    expect(collapseBtn).not.toBeNull();
+  });
+
+  test("点击底部按钮调用 onToggleCollapsed", () => {
+    let called = false;
+    const onToggle = () => {
+      called = true;
+    };
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: onToggle }));
+
+    const btn = document.querySelector<HTMLButtonElement>(".app-sidebar-collapse-btn");
+    expect(btn).not.toBeNull();
+    btn!.click();
+    expect(called).toBe(true);
+  });
+
+  test("折叠态底部按钮仍渲染且菜单项高亮不变", () => {
+    renderWithProviders(createElement(Sidebar, { collapsed: true, onToggleCollapsed: () => {} }), {
+      initialRoute: "/users",
+    });
+
+    const collapseBtn = document.querySelector(".app-sidebar-collapse-btn");
+    expect(collapseBtn).not.toBeNull();
 
     const activeItem = document.querySelector(".t-is-active");
     expect(activeItem).not.toBeNull();