Просмотр исходного кода

🎨 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
t0ng7u 7 месяцев назад
Родитель
Сommit
4558eb41fc
1 измененных файлов с 19 добавлено и 16 удалено
  1. 19 16
      web/src/components/layout/SiderBar.js

+ 19 - 16
web/src/components/layout/SiderBar.js

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