refactor: 侧边栏折叠按钮从 Header 移至侧边栏底部

- 移除 Header 左侧折叠按钮，改用 TDesign Menu operations 渲染底部折叠按钮
- Header 品牌名与版本号使用 brand-group 基线对齐
- 侧边栏折叠宽度从 80px 对齐 TDesign 默认 64px
- 更新相关测试和 DEVELOPMENT.md 文档

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">

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}>

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 {