🎨 feat(sidebar): replace custom collapse button with Semi UI Button

* Replaced the handmade collapse/expand div with Semi UI `<Button>`
  * Uses `theme="outline"` and `type="tertiary"` for outlined style
  * Shows icon + text when sidebar is expanded, icon-only when collapsed
* Added `iconOnly` prop and dynamic padding to remove extra text area in collapsed state
* Ensured full-width layout with consistent padding for both states
* Updated imports to include `Button` from `@douyinfe/semi-ui`
* Maintains tooltip content for accessibility and better UX

web/src/components/layout/SiderBar.js

@@ -13,7 +13,7 @@ import {
 import {
   Nav,
   Divider,
-  Tooltip,
+  Button,
 } from '@douyinfe/semi-ui';
 
 const routerMap = {
@@ -407,22 +407,25 @@ const SiderBar = ({ onNavigate = () => { } }) => {
       </Nav>
 
       {/* 底部折叠按钮 */}
-      <div
+      <div className="sidebar-collapse-button">
-        className="sidebar-collapse-button"
+        <Button
-        onClick={() => {
+          theme="outline"
-          toggleCollapsed();
+          type="tertiary"
-        }}
+          size="small"
-      >
+          icon={
-        <Tooltip content={collapsed ? t('展开侧边栏') : t('收起侧边栏')} position="right">
+            <ChevronLeft
-          <div className="sidebar-collapse-button-inner">
+              size={16}
-            <span
+              strokeWidth={2.5}
-              className="sidebar-collapse-icon-container"
+              color="var(--semi-color-text-2)"
               style={{ transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
-            >
+            />
-              <ChevronLeft size={16} strokeWidth={2.5} color="var(--semi-color-text-2)" />
+          }
-            </span>
+          onClick={toggleCollapsed}
-          </div>
+          iconOnly={collapsed}
-        </Tooltip>
+          style={collapsed ? { padding: '4px', width: '100%' } : { padding: '4px 12px', width: '100%' }}
+        >
+          {!collapsed ? t('收起侧边栏') : null}
+        </Button>
       </div>
     </div>
   );