添加新的阅读页面入口，更新自定义标签栏以使用 SVG 图标，优化分享按钮样式和布局，提升用户体验。

2026-02-04 12:36:26 +08:00
parent fa9e1e59ce
commit 23436dc9e8
24 changed files with 2096 additions and 176 deletions
--- a/miniprogram/components/icon/icon.js
+++ b/miniprogram/components/icon/icon.js
@@ -0,0 +1,83 @@
+// components/icon/icon.js
+Component({
+  properties: {
+    // 图标名称
+    name: {
+      type: String,
+      value: 'share',
+      observer: 'updateIcon'
+    },
+    // 图标大小（rpx）
+    size: {
+      type: Number,
+      value: 48
+    },
+    // 图标颜色
+    color: {
+      type: String,
+      value: '#ffffff',
+      observer: 'updateIcon'
+    },
+    // 自定义类名
+    customClass: {
+      type: String,
+      value: ''
+    },
+    // 自定义样式
+    customStyle: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    svgData: ''
+  },
+
+  lifetimes: {
+    attached() {
+      this.updateIcon()
+    }
+  },
+
+  methods: {
+    // SVG 图标数据映射
+    getSvgPath(name) {
+      const svgMap = {
+        'share': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>',
+        
+        'arrow-up-right': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>',
+        
+        'chevron-left': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>',
+        
+        'search': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+        
+        'heart': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>'
+      }
+      
+      return svgMap[name] || ''
+    },
+
+    // 更新图标
+    updateIcon() {
+      const { name, color } = this.data
+      let svgString = this.getSvgPath(name)
+      
+      if (svgString) {
+        // 替换颜色占位符
+        svgString = svgString.replace(/COLOR/g, color)
+        
+        // 转换为 Base64 Data URL
+        const svgData = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`
+        
+        this.setData({
+          svgData: svgData
+        })
+      } else {
+        this.setData({
+          svgData: ''
+        })
+      }
+    }
+  }
+})