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

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

miniprogram/pages/drug-guide/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar"
+  }
+}

miniprogram/pages/drug-guide/index.scss

@@ -0,0 +1,55 @@
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 60rpx;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+.drug-header {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 30rpx 40rpx 30rpx;
+  background: linear-gradient(135deg, #4A90D9, #357ABD);
+}
+
+.header-img { width: 100rpx; height: 100rpx; margin-bottom: 16rpx; }
+
+.drug-meta { display: flex; gap: 14rpx; }
+
+.meta-item {
+  font-size: 22rpx; color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 6rpx 20rpx; border-radius: 20rpx;
+}
+
+.meta-item.rx { background: rgba(255, 59, 48, 0.3); }
+
+.section {
+  margin: 24rpx 30rpx; background: #ffffff;
+  border-radius: 20rpx; padding: 30rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+
+.section.warning { border-left: 6rpx solid #FF6B35; }
+.section.tip { border-left: 6rpx solid #07C160; background: #f0faf5; }
+
+.section-title { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; }
+.section-content { font-size: 28rpx; color: #555; line-height: 1.8; }
+
+.info-row {
+  display: flex; justify-content: space-between;
+  padding: 16rpx 0; border-top: 1rpx solid #f0f0f0; margin-top: 16rpx;
+}
+
+.info-label { font-size: 24rpx; color: #999; }
+.info-value { font-size: 24rpx; color: #333; font-weight: 500; }
+.info-value.price { color: #FF6B35; font-weight: 600; }
+
+.precaution-item { font-size: 26rpx; color: #666; line-height: 1.9; margin-bottom: 6rpx; }
+
+.disclaimer { text-align: center; font-size: 22rpx; color: #ccc; padding: 30rpx; }
+
+.empty-page { display: flex; align-items: center; justify-content: center; }
+.empty-msg { text-align: center; }
+.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
+.empty-text { font-size: 30rpx; color: #999; }

miniprogram/pages/drug-guide/index.ts

@@ -0,0 +1,23 @@
+import { wikiDrugs } from '../../utils/drug-data';
+import type { WikiDrug } from '../../utils/drug-data';
+import { getDrugImage } from '../../utils/drug-images';
+
+Page({
+  data: {
+    drug: {} as WikiDrug,
+    drugImage: '',
+  },
+  onLoad(options: Record<string, string>) {
+    const id = Number(options.id);
+    const drug = wikiDrugs[id];
+    if (drug) {
+      this.setData({
+        drug,
+        drugImage: getDrugImage(drug.category),
+      });
+      wx.setNavigationBarTitle({ title: drug.name });
+    } else {
+      wx.showToast({ title: '未找到药品信息', icon: 'none' });
+    }
+  },
+});

miniprogram/pages/drug-guide/index.wxml

@@ -0,0 +1,63 @@
+<view class="page" wx:if="{{drug.id}}">
+  <navigation-bar title="{{drug.name}}" back="{{true}}" color="white" background="#4A90D9" />
+
+  <view class="drug-header">
+    <image class="header-img" src="{{drugImage}}" mode="aspectFit" />
+    <view class="drug-meta">
+      <view class="meta-item">{{drug.category}}</view>
+      <view class="meta-item">{{drug.form}}</view>
+      <view class="meta-item" wx:if="{{drug.isOTC}}">OTC</view>
+      <view class="meta-item rx" wx:else>Rx</view>
+    </view>
+  </view>
+
+  <view class="section">
+    <view class="section-title">📋 药品简介</view>
+    <view class="section-content">{{drug.description}}</view>
+    <view class="info-row" wx:if="{{drug.manufacturer}}">
+      <view class="info-label">生产厂家</view>
+      <view class="info-value">{{drug.manufacturer}}</view>
+    </view>
+    <view class="info-row" wx:if="{{drug.price}}">
+      <view class="info-label">参考价格</view>
+      <view class="info-value price">{{drug.price}}</view>
+    </view>
+  </view>
+
+  <view class="section">
+    <view class="section-title">💡 用法用量</view>
+    <view class="section-content">{{drug.usage || drug.dosage}}</view>
+  </view>
+
+  <view class="section">
+    <view class="section-title">⏰ 服用时间</view>
+    <view class="section-content">{{drug.timing}}</view>
+  </view>
+
+  <view class="section warning">
+    <view class="section-title">⚠️ 注意事项</view>
+    <view class="section-content">
+      <view wx:for="{{drug.precautions}}" wx:key="index" class="precaution-item">{{index + 1}}. {{item}}</view>
+    </view>
+  </view>
+
+  <view class="section">
+    <view class="section-title">🩺 不良反应</view>
+    <view class="section-content">{{drug.sideEffects}}</view>
+  </view>
+
+  <view class="section tip">
+    <view class="section-title">📌 温馨提示</view>
+    <view class="section-content">{{drug.tip}}</view>
+  </view>
+
+  <view class="disclaimer">本内容仅供参考，具体用药请遵医嘱</view>
+</view>
+
+<view class="page empty-page" wx:else>
+  <navigation-bar title="药品详情" back="{{true}}" color="black" background="#ffffff" />
+  <view class="empty-msg">
+    <view class="empty-icon">🔍</view>
+    <view class="empty-text">未找到药品信息</view>
+  </view>
+</view>