u

code/base-project/base-vue/packages/ao-design/src/button/index.scss

@@ -5,54 +5,69 @@ $btn-prefix: #{$prefix}-btn;
 $btn-hover-bgcolor: #f4f5f5;
 $btn-active-bgcolor: #eceded;
 
-/* ====== 通用颜色交互函数（新版写法） ====== */
 @function color-hover($color, $amount: 8%) {
-  $l: color.channel($color, 'lightness', $space: hsl);
-  @if $l > 50% {
-    // 亮色：向暗靠近
-    @return color.scale($color, $lightness: -$amount);
-  } @else {
-    // 暗色：向亮靠近
-    @return color.scale($color, $lightness: $amount);
-  }
+  @return color.scale($color, $lightness: -$amount);
 }
 
 @function color-active($color, $amount: 12%) {
-  $l: color.channel($color, 'lightness', $space: hsl);
-  @if $l > 50% {
-    @return color.scale($color, $lightness: -$amount);
-  } @else {
-    @return color.scale($color, $lightness: $amount);
-  }
+  @return color.scale($color, $lightness: -$amount);
 }
 
 .#{$btn-prefix} {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
   box-sizing: border-box;
+  outline: none;
+  vertical-align: middle;
   user-select: none;
+  vertical-align: middle;
   border-radius: 2px;
-  border: 1px solid transparent;
   cursor: pointer;
   transition: all 0.2s ease;
   font-weight: 500;
+  border: 1px solid transparent;
+
+  &-small {
+    height: 24px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+
+  &-medium {
+    height: 28px;
+    padding: 0 14px;
+    font-size: 13px;
+  }
+
+  &-large {
+    height: 32px;
+    padding: 0 16px;
+    font-size: 14px;
+  }
+
   &-block {
     width: 100%;
   }
 
   &-icon-left {
-    margin-right: 4px;
     display: inline-flex;
     align-items: center;
   }
+
   &-icon-right {
-    margin-left: 4px;
     display: inline-flex;
     align-items: center;
   }
 
+  &-icon-left-has-text {
+    margin-right: 4px;
+  }
+
+  &-icon-right-has-text {
+    margin-left: 4px;
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;
@@ -176,23 +191,4 @@ $btn-active-bgcolor: #eceded;
       }
     }
   }
-
-  /* ===== 尺寸 ===== */
-  &-small {
-    height: 24px;
-    padding: 0 12px;
-    font-size: 12px;
-  }
-
-  &-medium {
-    height: 28px;
-    padding: 0 14px;
-    font-size: 12px;
-  }
-
-  &-large {
-    height: 32px;
-    padding: 0 16px;
-    font-size: 13px;
-  }
 }

code/base-project/base-vue/packages/ao-design/src/button/index.tsx

@@ -36,35 +36,39 @@ export default defineComponent({
       const map = { small: 14, medium: 16, large: 16 }
       return map[props.size]
     })
+    const hasContent = !!slots.default?.().length
 
-    return () => (
-      <button class={cls.value} disabled={props.disabled || props.loading}>
-        {/* 左侧图标 */}
-        {props.iconPosition === 'left' && (props.loading || props.icon) && (
-          <Icon
-            icon={props.loading ? 'mingcute:loading-line' : props.icon}
-            class={`${prefixCls}-icon-left`}
-            spin={props.loading}
-            width={iconSize.value}
-            height={iconSize.value}
-          />
-        )}
+    return () => {
+      return (
+        <button class={cls.value} disabled={props.disabled || props.loading}>
+          {props.iconPosition === 'left' && (props.loading || props.icon) && (
+            <Icon
+              icon={props.loading ? 'mingcute:loading-line' : props.icon}
+              class={[
+                `${prefixCls}-icon-left`,
+                hasContent ? `${prefixCls}-icon-left-has-text` : '',
+              ]}
+              spin={props.loading}
+              size={iconSize.value}
+            />
+          )}
 
-        {/* 插槽文本 */}
-        <span>
-          {slots.default?.()}
-        </span>
+          <span>
+            {slots.default?.()}
+          </span>
 
-        {/* 右侧图标 */}
-        {props.iconPosition === 'right' && props.icon && (
-          <Icon
-            icon={props.icon}
-            class={`${prefixCls}-icon-right`}
-            width={iconSize.value}
-            height={iconSize.value}
-          />
-        )}
-      </button>
-    )
+          {props.iconPosition === 'right' && props.icon && (
+            <Icon
+              icon={props.icon}
+              class={[
+                `${prefixCls}-icon-right`,
+                hasContent ? `${prefixCls}-icon-right-has-text` : '',
+              ]}
+              size={iconSize.value}
+            />
+          )}
+        </button>
+      )
+    }
   },
 })