u

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

@@ -5,29 +5,50 @@ import { getPrefixCls } from '../_utils/getPrefixCls'
 import './index.scss'
 
 export default defineComponent({
-  name: 'Icon',
+  name: 'AIcon',
+  inheritAttrs: false,
   props: {
     icon: { type: String as PropType<string>, required: true },
-    width: { type: Number, default: 16 },
-    height: { type: Number, default: 16 },
+    size: { type: Number, default: 16 },
     color: { type: String, default: 'currentColor' },
     spin: { type: Boolean, default: false },
     rotate: { type: Number, default: 360 },
+    onClick: Function as PropType<(e: MouseEvent) => void>, // 明确 MouseEvent 类型
   },
-  setup(props) {
+  setup(props, { attrs }) {
     const prefixCls = getPrefixCls('icon')
+
+    // 安全调用 onClick
+    const handleClick = (e: MouseEvent) => {
+      props.onClick?.(e)
+      // 如果 attrs 上也传了 onClick，做类型断言
+      if (attrs.onClick) {
+        (attrs.onClick as (e: MouseEvent) => void)(e)
+      }
+    }
+
     return () => (
-      <Icon
-        icon={props.icon}
-        width={props.width}
-        height={props.height}
+      <i
+        class={props.spin ? `${prefixCls}-spin` : ''}
         style={{
+          'display': 'inline-flex',
+          'alignItems': 'center',
+          'justifyContent': 'center',
           'color': props.color,
-          'verticalAlign': 'middle',
           '--rotate-angle': `${props.rotate}deg`,
         }}
-        class={props.spin ? `${prefixCls}-spin` : ''}
-      />
+        onClick={handleClick}
+      >
+        <Icon
+          {...attrs}
+          icon={props.icon}
+          width={props.size}
+          height={props.size}
+          style={{
+            verticalAlign: 'middle',
+          }}
+        />
+      </i>
     )
   },
 })