feat: 电子药箱小程序 - 4Tab药品管理

- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡
- 药品百科: 搜索 + 分类筛选 + 20种药品静态数据
- 惠教中心: 4条药品使用指南课程
- 我的: 家庭成员信息管理
- 自定义TabBar + navigation-bar组件
- SVG药品分类插图

miniprogram/components/tag/tag.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/tag/tag.scss

@@ -0,0 +1,12 @@
+/* components/tag/tag.wxss */
+.tag {
+    display: inline-block;
+    margin-inline-end: 16rpx;
+    padding-inline: 14rpx;
+    height: auto;
+    border-radius: 8rpx;
+    border: 1px solid transparent;
+    font-size: 24rpx;
+    line-height: 40rpx;
+    vertical-align: middle;
+}

miniprogram/components/tag/tag.ts

@@ -0,0 +1,98 @@
+const colorMap: Record<string, any> = {
+    orange: {
+        color: '#d46b08',
+        background: '#fff7e6',
+        borderColor: '#ffd591',
+        fillBackgroundColor: '#FAAD14',
+    },
+    blue: {
+        color: '#0958d9',
+        background: '#e6f4ff',
+        borderColor: '#91caff',
+        fillBackgroundColor: '#1890FF'
+    },
+    green: {
+        color: '#389e0d',
+        background: '#f6ffed',
+        borderColor: '#b7eb8f',
+        fillBackgroundColor: '#52C41A'
+    },
+    red: {
+        color: '#cf1322',
+        background: '#fff1f0',
+        borderColor: '#ffa39e',
+        fillBackgroundColor: '#FF4D4F'
+    }
+}
+
+Component({
+    properties: {
+        color: {
+            type: String,
+            value: ''
+        },
+        fill: {
+            type: Boolean,
+            value: false
+        },
+        propStyle: {
+            type: Object,
+            value: {}
+        }
+    },
+    data: {
+        tagStyle: ''
+    },
+    lifetimes: {
+        attached() {
+            const that = this as any;
+            let style = ''
+            const { color, fill } = that.properties
+            if (color && colorMap[color]) {
+                const cfg = colorMap[color]
+                if (fill) {
+                    style = `color:#fff;background:${cfg.fillBackgroundColor};border-color:${cfg.fillBackgroundColor};`
+                } else {
+                    style = `color:${cfg.color};background:${cfg.background};border-color:${cfg.borderColor};`
+                }
+            }
+            //如果是16进制颜色
+            else if (that.isHexColor(color)) {
+                if (fill) {
+                    style = `color:#fff;background:${color};border-color:${color};`
+                } else {
+                    style = `color:${color};background:${that.hexToRgba(color, 0.1)};border-color:${color};`
+                }
+            }
+            //默认灰色
+            else {
+                if (fill) {
+                    style = `color:#fff;background:#595959;border-color:#595959;`
+                } else {
+                    style = `color:#595959;background:#fafafa;border-color:#d9d9d9;`
+                }
+            }
+            that.setData({ tagStyle: style })
+        }
+    },
+    methods: {
+        //判断是否是合法16进制颜色
+        isHexColor(str: string) {
+            return /^#([A-Fa-f0-9]{3}){1,2}$/.test(str)
+        },
+        //16进制转rgba
+        hexToRgba(hex: string, alpha = 1) {
+            let r = 0, g = 0, b = 0
+            if (hex.length === 4) {
+                r = parseInt(hex[1] + hex[1], 16)
+                g = parseInt(hex[2] + hex[2], 16)
+                b = parseInt(hex[3] + hex[3], 16)
+            } else if (hex.length === 7) {
+                r = parseInt(hex.slice(1, 3), 16)
+                g = parseInt(hex.slice(3, 5), 16)
+                b = parseInt(hex.slice(5, 7), 16)
+            }
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`
+        }
+    }
+})

miniprogram/components/tag/tag.wxml

@@ -0,0 +1,4 @@
+<!--components/tag/tag.wxml-->
+<view class="tag" style="{{tagStyle}}{{propStyle}}">
+  <slot></slot>
+</view>