退出功能不弄框,弱化点

src/components/IconButton.tsx

@@ -11,6 +11,11 @@ export interface IconButtonProps extends Omit<ButtonProps, 'icon'> {
   iconSize?: IconSize;
   /* 新增：是否禁用 */
   disabled?: boolean;
+  /**
+   * 是否渲染为无边框按钮。为 true 时会使用 Ant Design 的 `text` 类型按钮，
+   * 从而去除默认的边框和背景样式。
+   */
+  borderless?: boolean;
 }
 
 const presetSize: Record<Exclude<IconSize, number>, number> = {
@@ -25,8 +30,14 @@ export const IconButton: React.FC<IconButtonProps> = ({
   iconSize = 'middle',
   disabled = false,
   className,
+  borderless = false,
+  type = 'default',
   ...rest
 }) => {
+  // 当 borderless 为 true 时使用 Ant Design 的 text 按钮类型，
+  // 这会去掉默认的边框和背景，仅保留文字/图标。
+  const finalType = borderless ? 'text' : type;
+
   const size = typeof iconSize === 'number' ? iconSize : presetSize[iconSize];
 
   /* ---------- 方案 B 需要 token ---------- */
@@ -43,16 +54,16 @@ export const IconButton: React.FC<IconButtonProps> = ({
     }
   >(icon)
     ? cloneElement(icon, {
-        className: classNames(icon.props.className, {
-          'opacity-50 grayscale': disabled, // 方案 A
-        }),
-        style: {
-          width: size,
-          height: size,
-          // color: disabled ? token.colorTextDisabled : undefined, // 方案 B
-          ...icon.props.style,
-        },
-      })
+      className: classNames(icon.props.className, {
+        'opacity-50 grayscale': disabled, // 方案 A
+      }),
+      style: {
+        width: size,
+        height: size,
+        // color: disabled ? token.colorTextDisabled : undefined, // 方案 B
+        ...icon.props.style,
+      },
+    })
     : icon;
 
   const flexClass = classNames(
@@ -62,7 +73,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
   );
 
   return (
-    <Button className={flexClass} disabled={disabled} {...rest}>
+    <Button className={flexClass} disabled={disabled} type={finalType} {...rest}>
       {iconPlace === 'top' && clonedIcon}
       {iconPlace === 'left' && clonedIcon}
       {rest.children}

src/layouts/BottomBar.tsx

@@ -111,6 +111,7 @@ const BottomBar: React.FC = () => {
                                 state="normal"
                             />
                         }
+                        borderless={true}
                         iconPlace="left"
                         iconSize={32}
                         type="default"