u

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

@@ -1,14 +1,70 @@
 import { computed, defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
+import Icon from '../icon'
+import './index.scss'
 
 export default defineComponent({
-  name: 'AButton',
+  name: 'Button',
   props: {
-    type: { type: String as () => 'primary' | 'danger' | 'default', default: 'default' },
+    type: {
+      type: String as () => 'solid' | 'outline' | 'text' | 'dashed',
+      default: 'solid',
+    },
+    status: {
+      type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'normal',
+      default: 'normal',
+    },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: { type: String, default: '' },
+    iconPosition: { type: String as () => 'left' | 'right', default: 'left' },
+    size: { type: String as () => 'small' | 'medium' | 'large', default: 'medium' },
+    block: { type: Boolean, default: false },
   },
   setup(props, { slots }) {
     const prefixCls = getPrefixCls('btn')
-    const cls = computed(() => [prefixCls, `${prefixCls}-${props.type}`])
-    return () => <button class={cls.value}>{slots.default?.()}</button>
+
+    const cls = computed(() => [
+      prefixCls,
+      `${prefixCls}-${props.type}`,
+      `${prefixCls}-status-${props.status}`,
+      `${prefixCls}-${props.size}`,
+      props.block && `${prefixCls}-block`,
+    ])
+
+    const iconSize = computed(() => {
+      const map = { small: 14, medium: 16, large: 16 }
+      return map[props.size]
+    })
+
+    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}
+          />
+        )}
+
+        {/* 插槽文本 */}
+        <span>
+          {slots.default?.()}
+        </span>
+
+        {/* 右侧图标 */}
+        {props.iconPosition === 'right' && props.icon && (
+          <Icon
+            icon={props.icon}
+            class={`${prefixCls}-icon-right`}
+            width={iconSize.value}
+            height={iconSize.value}
+          />
+        )}
+      </button>
+    )
   },
 })