本地备份：主包优化前完整版本，可随时回退

Co-authored-by: Cursor <cursoragent@cursor.com>

components/chenghao-tag/chenghao-tag.js

@@ -1,73 +1,106 @@
 // components/chenghao-tag/chenghao-tag.js
 const app = getApp();
 
+const PILL_SHAPES = ['pill', 'rectangle', 'rounded'];
+
 Component({
   properties: {
     mingcheng: { type: String, value: '' },
-    texiaoJson: { type: Object, value: {} }
+    texiaoJson: { type: Object, value: {} },
   },
   data: {
-    // 默认值：宽152，高52，六边形，无背景图，无动画，白色字
-    width: 152,
-    height: 52,
-    shapeClass: 'liubianxing',   // 保证至少不是矩形
+    inlineStyle: '',
+    shapeClass: 'tag-pill',
     animationClass: '',
-    bgStyle: '',
     textColor: '#FFFFFF',
     textSize: 22,
-    imageUrl: ''
+    imageUrl: '',
+    isPill: true,
+  },
+  observers: {
+    'texiaoJson, mingcheng': function () {
+      this._applyConfig(this.properties.texiaoJson);
+    },
   },
   lifetimes: {
     attached() {
-      const cfg = this.properties.texiaoJson || {};
-      
-      // 1. 尺寸（稍大一些，一行能放3~4个）
-      const width = cfg.width || 152;
-      const height = cfg.height || 52;
+      this._applyConfig(this.properties.texiaoJson);
+    },
+  },
+  methods: {
+    _applyConfig(raw) {
+      const cfg = raw || {};
+      const ossImageUrl = app.globalData.ossImageUrl || '';
 
-      // 2. 背景处理：优先背景图，否则用渐变/纯色
+      // 无 shape：身份装饰标签 / 自定义色圆角标；有 shape：考核称号等特殊形状
+      const isPill = !cfg.shape || PILL_SHAPES.includes(cfg.shape);
+
+      if (isPill) {
+        const height = Number(cfg.height) || 44;
+        const minWidth = Number(cfg.width) || 72;
+        const solidColor = cfg.bg_color || cfg.background || cfg.color;
+        let bgStyle = '';
+        if (cfg.bg_gradient) {
+          bgStyle = `background: ${cfg.bg_gradient};`;
+        } else if (solidColor) {
+          bgStyle = `background: ${solidColor};`;
+        } else {
+          bgStyle = 'background: linear-gradient(135deg, #FFD700, #FF8C00);';
+        }
+        const flash = cfg.flash || cfg.animation === 'shine' || cfg.animation === 'glow';
+        let animationClass = cfg.animation || '';
+        if (flash && !animationClass) {
+          animationClass = 'pill-flash';
+        }
+        const borderColor = cfg.borderColor || cfg.border_color;
+        const borderStyle = borderColor ? `border: 2rpx solid ${borderColor};` : '';
+        const textColor = cfg.text_color || cfg.textColor || '#FFFFFF';
+        this.setData({
+          isPill: true,
+          shapeClass: 'tag-pill',
+          animationClass,
+          inlineStyle: `min-width: ${minWidth}rpx; height: ${height}rpx; padding: 0 18rpx; ${bgStyle} ${borderStyle}`,
+          textColor,
+          textSize: cfg.text_size || 22,
+          imageUrl: '',
+        });
+        return;
+      }
+
+      const width = Number(cfg.width) || 152;
+      const height = Number(cfg.height) || 52;
       let bgStyle = '';
       let imageUrl = '';
       if (cfg.image_url) {
-        const ossImageUrl = app.globalData.ossImageUrl || '';
-        imageUrl = cfg.image_url.startsWith('http') 
-          ? cfg.image_url 
+        imageUrl = cfg.image_url.startsWith('http')
+          ? cfg.image_url
           : ossImageUrl + cfg.image_url;
       } else if (cfg.bg_gradient) {
         bgStyle = `background: ${cfg.bg_gradient};`;
       } else if (cfg.bg_color) {
         bgStyle = `background: ${cfg.bg_color};`;
       } else {
-        // 默认金橙渐变
-        bgStyle = `background: linear-gradient(135deg, #FFD700, #FF8C00);`;
+        bgStyle = 'background: linear-gradient(135deg, #FFD700, #FF8C00);';
       }
 
-      // 3. 形状（后端传入 shape 字段，默认 liubianxing）
-      const shapeClass = cfg.shape || 'liubianxing';
-
-      // 4. 动画
-      const animationClass = cfg.animation || '';
-
-      // 5. 文字
-      const textColor = cfg.text_color || '#FFFFFF';
-      const textSize = cfg.text_size || 22;
-
       this.setData({
-        width, height,
-        bgStyle, imageUrl,
-        shapeClass, animationClass,
-        textColor, textSize
+        isPill: false,
+        inlineStyle: `width: ${width}rpx; height: ${height}rpx; ${bgStyle}`,
+        shapeClass: cfg.shape || 'liubianxing',
+        animationClass: cfg.animation || '',
+        textColor: cfg.text_color || '#FFFFFF',
+        textSize: cfg.text_size || 22,
+        imageUrl,
       });
-    }
-  },
-  methods: {
-    // 背景图加载失败时回退为纯色背景
+    },
+
     onImageError() {
       this.setData({ imageUrl: '' });
-      // 如果 bgStyle 为空，给个默认背景
-      if (!this.data.bgStyle) {
-        this.setData({ bgStyle: 'background: linear-gradient(135deg, #FFD700, #FF8C00);' });
+      if (!this.data.inlineStyle.includes('background')) {
+        this.setData({
+          inlineStyle: this.data.inlineStyle + ' background: linear-gradient(135deg, #FFD700, #FF8C00);',
+        });
       }
-    }
-  }
-});
+    },
+  },
+});