feat:重构按钮和icon组件

2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "addGlobalClass": true
+}
@@ -0,0 +1,33 @@
+@import '../../style/theme.less';
+@import '../../assets/fonts/iconfont.less';
+
+.toy-icon-root {
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    font-size: inherit;
+    color: inherit;
+    line-height: 1;
+    box-sizing: border-box;
+
+    &--image {
+        width: @font-size-icon;
+        height: @font-size-icon;
+    }
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+
+    /* 内层 text 显示 iconfont 字形 */
+    > text {
+        display: inline-block;
+        line-height: 1;
+        font-style: normal;
+    }
+}
@@ -0,0 +1,95 @@
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+        addGlobalClass: true,
+    },
+    properties: {
+        name: {
+            type: String,
+            value: '',
+        },
+        color: {
+            type: String,
+            value: '',
+        },
+        size: {
+            type: String,
+            value: '',
+        },
+        classPrefix: {
+            type: String,
+            value: 'toy-icon',
+        },
+        style: {
+            type: String,
+            value: '',
+        },
+    },
+    externalClasses: ['custom-class', 'ext-class'],
+    data: {
+        isImage: false,
+        rootClassName: '',
+        rootStyle: '',
+        fontGlyphClass: '',
+    },
+    observers: {
+        'name,color,size,classPrefix,style': function () {
+            this.syncViewState();
+        },
+    },
+    lifetimes: {
+        attached() {
+            this.syncViewState();
+        },
+    },
+    methods: {
+        syncViewState() {
+            const { name, color, size, classPrefix, style } = this.data;
+            const isImage = this.isImageSource(name);
+            const normalizedSize = this.normalizeUnit(size);
+            const classNames = ['toy-icon-root'];
+            let fontGlyphClass = '';
+
+            if (isImage) {
+                classNames.push('toy-icon-root--image');
+            } else {
+                const parts: string[] = [];
+                if (classPrefix) {
+                    parts.push(classPrefix);
+                }
+                if (name) {
+                    parts.push(`${classPrefix}-${name}`);
+                }
+                fontGlyphClass = parts.join(' ');
+            }
+
+            const styleSegments = [style];
+            if (normalizedSize) {
+                styleSegments.push(`font-size:${normalizedSize}`);
+                if (isImage) {
+                    styleSegments.push(`width:${normalizedSize}`);
+                    styleSegments.push(`height:${normalizedSize}`);
+                }
+            }
+            if (color && !isImage) {
+                styleSegments.push(`color:${color}`);
+            }
+
+            this.setData({
+                isImage,
+                rootClassName: classNames.join(' '),
+                rootStyle: styleSegments.filter(Boolean).join(';'),
+                fontGlyphClass,
+            });
+        },
+        isImageSource(name: string) {
+            return /^(https?:\/\/|data:|\/|\.{1,2}\/)/.test(name);
+        },
+        normalizeUnit(value: string) {
+            if (!value) {
+                return '';
+            }
+            return /^\d+(\.\d+)?$/.test(value) ? `${value}rpx` : value;
+        },
+    },
+});
@@ -0,0 +1,10 @@
+<view
+    wx:if="{{isImage}}"
+    class="{{rootClassName}} custom-class ext-class"
+    style="{{rootStyle}}">
+    <image src="{{name}}" mode="aspectFit" class="toy-icon-root__image" />
+</view>
+<!-- 字体图标：内层 text 承载 iconfont（::before），外层 view 负责布局与 externalClass -->
+<view wx:else class="{{rootClassName}} custom-class ext-class" style="{{rootStyle}}">
+    <text class="{{fontGlyphClass}}"></text>
+</view>