feat: batch update - gift card breakdown spec, backend APIs, miniprogram pages, ETL finance recharge, docs & migrations

2026-03-20 01:43:48 +08:00
parent 075caf067f
commit 79f9a0e1da
437 changed files with 118603 additions and 976 deletions
--- a/apps/DEMO-miniprogram/miniprogram/app.json
+++ b/apps/DEMO-miniprogram/miniprogram/app.json
@@ -0,0 +1,54 @@
+{
+  "pages": [
+    "pages/login/login",
+    "pages/apply/apply",
+    "pages/reviewing/reviewing",
+    "pages/no-permission/no-permission",
+    "pages/task-list/task-list",
+    "pages/board-finance/board-finance",
+    "pages/my-profile/my-profile",
+    "pages/task-detail/task-detail",
+    "pages/notes/notes",
+    "pages/performance/performance",
+    "pages/performance-records/performance-records",
+    "pages/board-customer/board-customer",
+    "pages/board-coach/board-coach",
+    "pages/customer-detail/customer-detail",
+    "pages/customer-service-records/customer-service-records",
+    "pages/coach-detail/coach-detail",
+    "pages/chat/chat",
+    "pages/chat-history/chat-history",
+    "pages/dev-tools/dev-tools"
+  ],
+  "tabBar": {
+    "custom": true,
+    "color": "#8b8b8b",
+    "selectedColor": "#0052d9",
+    "backgroundColor": "#ffffff",
+    "borderStyle": "white",
+    "list": [
+      {
+        "pagePath": "pages/task-list/task-list",
+        "text": "任务"
+      },
+      {
+        "pagePath": "pages/board-finance/board-finance",
+        "text": "看板"
+      },
+      {
+        "pagePath": "pages/my-profile/my-profile",
+        "text": "我的"
+      }
+    ]
+  },
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "球房运营助手",
+    "navigationBarBackgroundColor": "#ffffff"
+  },
+  "usingComponents": {
+    "dev-fab": "/components/dev-fab/dev-fab"
+  },
+  "componentFramework": "glass-easel",
+  "lazyCodeLoading": "requiredComponents"
+}
--- a/apps/DEMO-miniprogram/miniprogram/app.miniapp.json
+++ b/apps/DEMO-miniprogram/miniprogram/app.miniapp.json
@@ -0,0 +1,5 @@
+{
+	"adapteByMiniprogram": {
+		"userName": "gh_521029c3a9c7"
+	}
+}
--- a/apps/DEMO-miniprogram/miniprogram/app.ts
+++ b/apps/DEMO-miniprogram/miniprogram/app.ts
@@ -0,0 +1,29 @@
+// app.ts
+// DEMO 演示版 — 跳过真实鉴权，有 token 直接进主页，无 token 停留登录页
+
+App<IAppOption>({
+  globalData: {},
+
+  onLaunch() {
+    // 从 Storage 恢复 token 和用户信息
+    const token = wx.getStorageSync("token")
+    if (token) {
+      this.globalData.token = token
+      this.globalData.refreshToken = wx.getStorageSync("refreshToken")
+      const userId = wx.getStorageSync("userId")
+      if (userId) {
+        this.globalData.authUser = {
+          userId,
+          status: wx.getStorageSync("userStatus") || "approved",
+          role: wx.getStorageSync("userRole") || '',
+          storeName: wx.getStorageSync("storeName") || '',
+          coachLevel: wx.getStorageSync("coachLevel") || '',
+          avatar: wx.getStorageSync("avatar") || '',
+        }
+      }
+      // DEMO：有 token 直接进主页，不调用真实 API
+      wx.reLaunch({ url: "/pages/task-list/task-list" })
+    }
+    // 无 token → 停留在 login 页（首页已设为 login）
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/app.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/app.wxss
@@ -0,0 +1,529 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 
+
+/* ============================================
+ * 设计 Token 全局变量（基于 design-tokens.json）
+ * ============================================ */
+page {
+  /* 颜色 */
+  --color-primary: #0052d9;
+  --color-primary-light: #ecf2fe;
+  --color-success: #00a870;
+  --color-warning: #ed7b2f;
+  --color-error: #e34d59;
+  --color-gray-1: #f3f3f3;
+  --color-gray-2: #eeeeee;
+  --color-gray-3: #e7e7e7;
+  --color-gray-4: #dcdcdc;
+  --color-gray-5: #c5c5c5;
+  --color-gray-6: #a6a6a6;
+  --color-gray-7: #8b8b8b;
+  --color-gray-8: #777777;
+  --color-gray-9: #5e5e5e;
+  --color-gray-10: #4b4b4b;
+  --color-gray-11: #393939;
+  --color-gray-12: #2c2c2c;
+  --color-gray-13: #242424;
+
+  /* 字号 */
+  --font-xs: 24rpx;
+  --font-sm: 28rpx;
+  --font-base: 32rpx;
+  --font-lg: 36rpx;
+  --font-xl: 40rpx;
+  --font-2xl: 48rpx;
+
+  /* 圆角 */
+  --radius-sm: 8rpx;
+  --radius-md: 16rpx;
+  --radius-lg: 24rpx;
+  --radius-xl: 32rpx;
+
+  /* 阴影 */
+  --shadow-lg: 0 8rpx 32rpx rgba(0,0,0,0.06);
+  --shadow-xl: 0 16rpx 48rpx rgba(0,0,0,0.08);
+
+  /* 间距基准 */
+  --spacing-base: 8rpx;
+
+  /* TDesign 主题覆盖 */
+  --td-brand-color: #0052d9;
+  --td-brand-color-light: #ecf2fe;
+  --td-success-color: #00a870;
+  --td-warning-color: #ed7b2f;
+  --td-error-color: #e34d59;
+
+  /* 页面默认样式 */
+  background-color: var(--color-gray-1);
+  font-size: var(--font-base);
+  color: var(--color-gray-13);
+  /* Emoji 字体回退链：确保真机（Android/iOS）能正确渲染 Emoji
+   * 不设置此项时，部分 Android 机型渲染引擎会断开 Emoji 字体回退，导致显示方块或空白
+   * PingFang SC / Helvetica 负责汉字和拉丁字符，后两项负责 Emoji */
+  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Helvetica,
+               "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
+}
+
+/* ============================================
+ * 通用工具类
+ * ============================================ */
+
+/* 安全区适配 */
+.safe-area-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.safe-area-top {
+  padding-top: env(safe-area-inset-top);
+}
+
+/* 文本省略 */
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Flex 布局 */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.flex-1 {
+  flex: 1;
+}
+
+/* ============================================
+ * VI 设计系统 - 完整颜色常量库
+ * 基于 docs/miniprogram-dev/VI-DESIGN-SYSTEM.md v1.0
+ * ============================================ */
+
+/* --- 1. 任务分类配色（4 种） --- */
+page {
+  /* 高优先召回 */
+  --task-high-priority-border: #dc2626;
+  --task-high-priority-from: #b91c1c;
+  --task-high-priority-to: #dc2626;
+
+  /* 优先召回 */
+  --task-priority-recall-border: #f97316;
+  --task-priority-recall-from: #ea580c;
+  --task-priority-recall-to: #f97316;
+
+  /* 客户回访 */
+  --task-callback-border: #14b8a6;
+  --task-callback-from: #0d9488;
+  --task-callback-to: #14b8a6;
+
+  /* 关系构建 */
+  --task-relationship-border: #f472b6;
+  --task-relationship-from: #ec4899;
+  --task-relationship-to: #f472b6;
+
+  /* --- 2. 客户标签配色（6 种） --- */
+  /* 客户基础 */
+  --tag-basic-text: #0052d9;
+  --tag-basic-bg: #ecf2fe;
+  --tag-basic-border: #bfdbfe;
+
+  /* 消费习惯 */
+  --tag-consume-text: #00a870;
+  --tag-consume-bg: #e6f7f0;
+  --tag-consume-border: #a7f3d0;
+
+  /* 玩法偏好 */
+  --tag-hobby-text: #ed7b2f;
+  --tag-hobby-bg: #fff3e6;
+  --tag-hobby-border: #fed7aa;
+
+  /* 促销偏好 */
+  --tag-promo-text: #d4a017;
+  --tag-promo-bg: #fffbeb;
+  --tag-promo-border: #fef3c7;
+
+  /* 社交关系 */
+  --tag-social-text: #764ba2;
+  --tag-social-bg: #f3e8ff;
+  --tag-social-border: #e9d5ff;
+
+  /* 重要反馈 */
+  --tag-feedback-text: #e34d59;
+  --tag-feedback-bg: #ffe6e8;
+  --tag-feedback-border: #fecdd3;
+
+  /* --- 3. 关系等级配色（4 种） --- */
+  /* 很好 (💖) */
+  --rel-excellent-from: #e91e63;
+  --rel-excellent-to: #f472b6;
+  --rel-excellent-shadow: rgba(233,30,99,0.30);
+
+  /* 良好 (🧡) */
+  --rel-good-from: #ea580c;
+  --rel-good-to: #fb923c;
+  --rel-good-shadow: rgba(234,88,12,0.30);
+
+  /* 一般 (💛) */
+  --rel-normal-from: #eab308;
+  --rel-normal-to: #fbbf24;
+  --rel-normal-shadow: rgba(234,179,8,0.30);
+
+  /* 待发展 (💙) */
+  --rel-poor-from: #64748b;
+  --rel-poor-to: #94a3b8;
+  --rel-poor-shadow: rgba(100,116,139,0.30);
+
+  /* --- 4. 置顶/放弃状态 --- */
+  /* 置顶 */
+  --status-pinned-glow: #f59e0b;
+  --status-pinned-shadow-light: rgba(245, 158, 11, 0.12);
+  --status-pinned-shadow-glow: rgba(245, 158, 11, 0.08);
+
+  /* 放弃 */
+  --status-abandoned-border: #d1d5db;
+  --status-abandoned-text: #9ca3af;
+  --status-abandoned-opacity: 0.55;
+
+  /* --- 5. 助教等级配色（4 级 + 星级） --- */
+  /* 初级 */
+  --coach-junior-text: #0052d9;
+  --coach-junior-bg: #ecf2fe;
+  --coach-junior-border: #bfdbfe;
+
+  /* 中级 */
+  --coach-middle-text: #ed7b2f;
+  --coach-middle-bg: #fff3e6;
+  --coach-middle-border: #fed7aa;
+
+  /* 高级 */
+  --coach-senior-text: #e91e63;
+  --coach-senior-bg: #ffe6e8;
+  --coach-senior-border: #fecdd3;
+
+  /* 星级 */
+  --coach-star-text: #fbbf24;
+  --coach-star-bg: #fffef0;
+  --coach-star-border: #fef3c7;
+
+  /* --- 颜色变体（用于透明度和阴影） --- */
+  /* 错误色变体 */
+  --color-error-light: #ffe6e8;
+  --color-error-lighter: #fff5f5;
+  --color-error-shadow: rgba(227, 77, 89, 0.3);
+  --color-error-shadow-light: rgba(227, 77, 89, 0.18);
+  --color-error-shadow-lighter: rgba(227, 77, 89, 0.06);
+  --color-error-shadow-minimal: rgba(227, 77, 89, 0.1);
+  --color-error-shadow-micro: rgba(227, 77, 89, 0.03);
+
+  /* 警告色变体 */
+  --color-warning-light: #fff3e6;
+  --color-warning-shadow: rgba(237, 123, 47, 0.3);
+  --color-warning-shadow-light: rgba(237, 123, 47, 0.18);
+  --color-warning-shadow-lighter: rgba(237, 123, 47, 0.06);
+  --color-warning-shadow-minimal: rgba(237, 123, 47, 0.1);
+  --color-warning-shadow-micro: rgba(237, 123, 47, 0.03);
+
+  /* 主色变体 */
+  --color-primary-shadow: rgba(0, 82, 217, 0.3);
+  --color-primary-shadow-light: rgba(0, 82, 217, 0.18);
+  --color-primary-shadow-lighter: rgba(0, 82, 217, 0.06);
+  --color-primary-shadow-minimal: rgba(0, 82, 217, 0.1);
+  --color-primary-shadow-micro: rgba(0, 82, 217, 0.03);
+
+  /* 成功色变体 */
+  --color-success-shadow-minimal: rgba(0, 168, 112, 0.1);
+
+  /* 白色和透明 */
+  --color-white: #ffffff;
+  --color-white-overlay-light: rgba(255, 255, 255, 0.95);
+  --color-white-overlay-lighter: rgba(255, 255, 255, 0.2);
+  --color-white-overlay-minimal: rgba(255, 255, 255, 0.1);
+
+  /* 新增：简化的颜色别名（用于页面样式） */
+  --bg-primary: var(--color-gray-1);
+  --bg-secondary: var(--color-white);
+  --bg-tertiary: var(--color-gray-1);
+  --text-primary: var(--color-gray-13);
+  --text-secondary: var(--color-gray-7);
+  --text-tertiary: var(--color-gray-6);
+  --text-disabled: var(--color-gray-5);
+  --border-light: var(--color-gray-2);
+  --shadow-xs: 0 2rpx 8rpx rgba(0,0,0,0.03);
+  --shadow-sm: 0 8rpx 28rpx rgba(0,0,0,0.06);
+
+  /* 状态色的数值变体 */
+  --error-300: #fda4af;
+  --error-400: #f87171;
+  --error-500: var(--color-error);
+  --warning-300: #fcd34d;
+  --warning-500: var(--color-warning);
+  --warning-600: #ed7b2f;
+  --success-500: var(--color-success);
+
+  /* 主色的数值变体和装饰点 */
+  --primary-500: #3b82f6;
+  --primary-dot-cyan: #22d3ee;
+  --primary-dot-cyan-shadow: rgba(34, 211, 238, 0.4);
+  --primary-dot-blue: #93c5fd;
+  --primary-dot-blue-shadow: rgba(147, 197, 253, 0.4);
+  --primary-shadow-minimal: rgba(0, 82, 217, 0.1);
+}
+
+/* ============================================
+ * 全局 Toast 加载态（不白屏，fixed 浮层）
+ * 用法：<view class="g-toast-loading" wx:if="{{pageState === 'loading'}}">
+ * ============================================ */
+.g-toast-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  pointer-events: none;
+}
+
+.g-toast-loading-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+  background: rgba(36, 36, 36, 0.72);
+  border-radius: 24rpx;
+  padding: 36rpx 52rpx;
+  pointer-events: auto;
+  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
+}
+
+.g-toast-loading-text {
+  font-size: 24rpx;
+  color: #ffffff;
+  line-height: 32rpx;
+}
+
+/* ============================================
+ * 头像颜色系统 §8（基于 VI-DESIGN-SYSTEM.md v1.1）
+ * 24 种渐变色，统一类名：.avatar-{key}
+ * 适用于客户头像、助教头像等所有圆形/圆角方形头像
+ * ============================================ */
+.avatar-blue     { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
+.avatar-indigo   { background: linear-gradient(135deg, #818cf8, #4f46e5); }
+.avatar-violet   { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
+.avatar-purple   { background: linear-gradient(135deg, #c084fc, #9333ea); }
+.avatar-fuchsia  { background: linear-gradient(135deg, #bd58c8, #7a1486); }
+.avatar-pink     { background: linear-gradient(135deg, #d44d96, #b83077); }
+.avatar-rose     { background: linear-gradient(135deg, #d05060, #aa1535); }
+.avatar-red      { background: linear-gradient(135deg, #c85050, #a81c1c); }
+.avatar-orange   { background: linear-gradient(135deg, #cc6e22, #b04208); }
+.avatar-amber    { background: linear-gradient(135deg, #fbbf24, #d97706); }
+.avatar-yellow   { background: linear-gradient(135deg, #facc15, #ca8a04); }
+.avatar-lime     { background: linear-gradient(135deg, #a3e635, #65a30d); }
+.avatar-green    { background: linear-gradient(135deg, #4ade80, #16a34a); }
+.avatar-emerald  { background: linear-gradient(135deg, #34d399, #059669); }
+.avatar-teal     { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
+.avatar-cyan     { background: linear-gradient(135deg, #22d3ee, #0891b2); }
+.avatar-sky      { background: linear-gradient(135deg, #38bdf8, #0284c7); }
+.avatar-slate    { background: linear-gradient(135deg, #94a3b8, #475569); }
+.avatar-coral    { background: linear-gradient(135deg, #cc6245, #ad3512); }
+.avatar-mint     { background: linear-gradient(135deg, #67e8f9, #0891b2); }
+.avatar-lavender { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
+.avatar-gold     { background: linear-gradient(135deg, #fcd34d, #b45309); }
+.avatar-crimson  { background: linear-gradient(135deg, #c42844, #750d28); }
+.avatar-ocean    { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
+
+/* ============================================
+ * AI 图标配色系统（基于 docs/h5_ui/css/ai-icons.css）
+ * 6 种配色 + 2 个系列（inline-icon / title-badge）
+ * ============================================ */
+
+/* --- 默认配色（靛色 fallback） --- */
+.ai-inline-icon, .ai-title-badge {
+  --ai-from: #667eea;
+  --ai-to: #a78bfa;
+  --ai-from-deep: #4a5fc7;
+  --ai-to-deep: #667eea;
+}
+
+/* --- 6 种配色类 --- */
+.ai-color-red    { --ai-from: #e74c3c; --ai-to: #f39c9c; --ai-from-deep: #c0392b; --ai-to-deep: #e74c3c; }
+.ai-color-orange { --ai-from: #e67e22; --ai-to: #f5c77e; --ai-from-deep: #ca6c17; --ai-to-deep: #e67e22; }
+.ai-color-yellow { --ai-from: #d4a017; --ai-to: #f7dc6f; --ai-from-deep: #b8860b; --ai-to-deep: #d4a017; }
+.ai-color-blue   { --ai-from: #2980b9; --ai-to: #7ec8e3; --ai-from-deep: #1a5276; --ai-to-deep: #2980b9; }
+.ai-color-indigo { --ai-from: #667eea; --ai-to: #a78bfa; --ai-from-deep: #4a5fc7; --ai-to-deep: #667eea; }
+.ai-color-purple { --ai-from: #764ba2; --ai-to: #c084fc; --ai-from-deep: #5b3080; --ai-to-deep: #764ba2; }
+
+/* --- 1. ai-inline-icon（行首小图标，H5 16px → 28rpx） --- */
+.ai-inline-icon {
+  display: inline-block;
+  width: 30rpx;
+  height: 30rpx;
+  /* color-mix 不支持，用渐变近似：45% from + white 混合 */
+  background: linear-gradient(135deg, var(--ai-from), var(--ai-to));
+  opacity: 0.65;
+  border-radius: 6rpx;
+  margin: 0 6rpx 0 0;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  vertical-align: baseline;
+  transform: translateY(0.1em);
+}
+
+/* 内部机器人图片 */
+.ai-inline-icon .ai-inline-icon-img {
+  width: 30rpx;
+  height: 30rpx;
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: block;
+}
+
+/* 微光扫过动画（12s 周期） */
+.ai-inline-icon::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+    45deg,
+    transparent 30%,
+    rgba(255,255,255,0.18) 45%,
+    rgba(255,255,255,0.22) 50%,
+    rgba(255,255,255,0.18) 55%,
+    transparent 70%
+  );
+  animation: ai-shimmer 12s ease-in-out infinite;
+}
+
+/* --- 2. ai-title-badge（标题行右侧标识） --- */
+.ai-title-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6rpx;
+  padding: 0rpx 18rpx 0rpx 6rpx;
+  /* 浅色背景：用低透明度渐变近似 color-mix 8%-10% */
+  background: linear-gradient(135deg,
+    rgba(102,126,234,0.08),
+    rgba(167,139,250,0.10)
+  );
+  border: 2rpx solid rgba(102,126,234,0.35);
+  border-radius: 18rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: var(--ai-from-deep);
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  line-height: 1.4;
+  animation: ai-pulse 3s ease-in-out infinite;
+}
+
+/* 各配色的 badge 背景和边框覆盖 */
+.ai-color-red .ai-title-badge,
+.ai-title-badge.ai-color-red {
+  background: linear-gradient(135deg, rgba(231,76,60,0.08), rgba(243,156,156,0.10));
+  border-color: rgba(231,76,60,0.35);
+}
+.ai-color-orange .ai-title-badge,
+.ai-title-badge.ai-color-orange {
+  background: linear-gradient(135deg, rgba(230,126,34,0.08), rgba(245,199,126,0.10));
+  border-color: rgba(230,126,34,0.35);
+}
+.ai-color-yellow .ai-title-badge,
+.ai-title-badge.ai-color-yellow {
+  background: linear-gradient(135deg, rgba(212,160,23,0.08), rgba(247,220,111,0.10));
+  border-color: rgba(212,160,23,0.35);
+}
+.ai-color-blue .ai-title-badge,
+.ai-title-badge.ai-color-blue {
+  background: linear-gradient(135deg, rgba(41,128,185,0.08), rgba(126,200,227,0.10));
+  border-color: rgba(41,128,185,0.35);
+}
+.ai-color-indigo .ai-title-badge,
+.ai-title-badge.ai-color-indigo {
+  background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(167,139,250,0.10));
+  border-color: rgba(102,126,234,0.35);
+}
+.ai-color-purple .ai-title-badge,
+.ai-title-badge.ai-color-purple {
+  background: linear-gradient(135deg, rgba(118,75,162,0.08), rgba(192,132,252,0.10));
+  border-color: rgba(118,75,162,0.35);
+}
+
+/* badge 内机器人图标容器 */
+.ai-title-badge-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42rpx;
+  height: 42rpx;
+  flex-shrink: 0;
+}
+.ai-title-badge-icon .ai-title-badge-icon-img {
+  height: 36rpx;
+}
+
+/* 为 SVG 的 currentColor 设置颜色（描边和眼睛使用） */
+.ai-color-red .ai-title-badge-icon    { color: #c0392b; }
+.ai-color-orange .ai-title-badge-icon { color: #ca6c17; }
+.ai-color-yellow .ai-title-badge-icon { color: #b8860b; }
+.ai-color-blue .ai-title-badge-icon   { color: #1a5276; }
+.ai-color-indigo .ai-title-badge-icon { color: #4a5fc7; }
+.ai-color-purple .ai-title-badge-icon { color: #5b3080; }
+
+/* 高光扫过（14s 周期，复用 ai-shimmer） */
+.ai-title-badge::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+    45deg,
+    transparent 30%,
+    rgba(255,255,255,0.15) 43%,
+    rgba(255,255,255,0.22) 50%,
+    rgba(255,255,255,0.15) 57%,
+    transparent 70%
+  );
+  animation: ai-shimmer 14s ease-in-out infinite;
+}
+
+/* --- 动画关键帧 --- */
+@keyframes ai-shimmer {
+  0%, 100% { transform: translateX(-100%) rotate(45deg); }
+  50%      { transform: translateX(100%) rotate(45deg); }
+}
+
+@keyframes ai-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(102,126,234,0); }
+  50%      { box-shadow: 0 0 16rpx 4rpx rgba(102,126,234,0.35); }
+}
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/ai-robot-sm.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/ai-robot-sm.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 白色填充版机器人（用于 ai-inline-icon 渐变背景上） -->
+  <rect x="5" y="7" width="14" height="12" rx="4" fill="white"/>
+  <path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="12" cy="3" r="1.5" fill="white"/>
+  <circle cx="9" cy="11.5" r="2" fill="white" opacity="0.5"/>
+  <circle cx="15" cy="11.5" r="2" fill="white" opacity="0.5"/>
+  <circle cx="9.5" cy="11" r="0.7" fill="white"/>
+  <circle cx="15.5" cy="11" r="0.7" fill="white"/>
+  <path d="M9.5 15C10 16 14 16 14.5 15" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
+  <rect x="3" y="10" width="2" height="4" rx="1" fill="white"/>
+  <rect x="19" y="10" width="2" height="4" rx="1" fill="white"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/ai-robot-title.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/ai-robot-title.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
+  <!-- AI 机器人 title badge icon — indigo 配色，用于标题徽章 -->
+  <!-- 对齐 H5 ai-icons.css .ai-title-badge-icon, 默认 indigo: #667eea → #a78bfa -->
+  <rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/>
+  <path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/>
+  <circle cx="9" cy="11.5" r="2" fill="#667eea"/>
+  <circle cx="15" cy="11.5" r="2" fill="#667eea"/>
+  <circle cx="9.5" cy="11" r="0.7" fill="white"/>
+  <circle cx="15.5" cy="11" r="0.7" fill="white"/>
+  <path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/>
+  <circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
+  <circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
+  <rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/>
+  <rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/arrow-left.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2">
+  <polyline points="15 18 9 12 15 6"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/chart.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/chart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00a870">
+  <path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/chat-gray.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/chat-gray.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a6a6a6">
+  <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/chat.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/chat.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ed7b2f">
+  <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/check-bold.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/check-bold.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3">
+  <polyline points="20 6 9 17 4 12"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/check-circle.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/check-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/clock.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/clock.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+  <circle cx="12" cy="12" r="10"/>
+  <polyline points="12 6 12 12 16 14"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/forbidden.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/forbidden.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+  <circle cx="12" cy="12" r="10"/>
+  <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/help-circle.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/help-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a6a6a6">
+  <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/icon-ai-float.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/icon-ai-float.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/icon-ai-inline.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/icon-ai-inline.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/info-circle.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/info-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#0052d9">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/info-error.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/info-error.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#e34d59">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/info-warning.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/info-warning.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ed7b2f">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/logout.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/logout.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#5e5e5e" stroke-width="2">
+  <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
+  <polyline points="16 17 21 12 16 7"/>
+  <line x1="21" y1="12" x2="9" y2="12"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-board-active.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-board-active.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-board.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-board.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-my-active.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-my-active.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-my.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-my.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-task-active.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-task-active.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-task.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/tab-task.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/task.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/task.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#0052d9">
+  <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/wechat.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/_archived/wechat.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
+  <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.32.32 0 0 0 .165-.054l1.9-1.106a.96.96 0 0 1 .465-.116.94.94 0 0 1 .272.04 10.6 10.6 0 0 0 2.822.384c.136 0 .271-.002.405-.009a6.9 6.9 0 0 1-.315-2.053c0-3.694 3.614-6.69 8.076-6.69.233 0 .463.01.691.027C16.964 4.837 13.132 2.188 8.691 2.188zm-2.97 5.28a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zm5.96 0a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zM24 14.2c0-3.355-3.4-6.08-7.59-6.08s-7.59 2.725-7.59 6.08c0 3.356 3.4 6.08 7.59 6.08.772 0 1.515-.094 2.215-.268a.77.77 0 0 1 .224-.033.79.79 0 0 1 .382.095l1.565.912a.26.26 0 0 0 .135.044c.13 0 .238-.108.238-.242 0-.06-.024-.117-.04-.175l-.32-1.218a.48.48 0 0 1 .175-.547C22.95 17.89 24 16.165 24 14.2zm-10.14-.426a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7zm5.1 0a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/ai-robot-badge.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/ai-robot-badge.svg
@@ -0,0 +1,28 @@
+<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- ????? - ???? + ????? -->
+  <rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="#1e3a5f" stroke-width="1.8" stroke-opacity="0.5"/>
+  
+  <!-- ?? - ?? + ????? -->
+  <path d="M12 7V4" stroke="white" stroke-width="2.8" stroke-linecap="round"/>
+  <path d="M12 7V4" stroke="#1e3a5f" stroke-width="1.4" stroke-linecap="round" stroke-opacity="0.5"/>
+  <circle cx="12" cy="3" r="1.5" fill="white" stroke="#1e3a5f" stroke-width="1.2" stroke-opacity="0.5"/>
+  
+  <!-- ?? -->
+  <circle cx="9" cy="11.5" r="2" fill="#667eea"/>
+  <circle cx="15" cy="11.5" r="2" fill="#667eea"/>
+  
+  <!-- ???? -->
+  <circle cx="9.5" cy="11" r="0.7" fill="white"/>
+  <circle cx="15.5" cy="11" r="0.7" fill="white"/>
+  
+  <!-- ???? -->
+  <path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/>
+  
+  <!-- ?? -->
+  <circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/>
+  <circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/>
+  
+  <!-- ?? - ?? + ????? -->
+  <rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="#1e3a5f" stroke-width="1.2" stroke-opacity="0.5"/>
+  <rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="#1e3a5f" stroke-width="1.2" stroke-opacity="0.5"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/ai-robot-inline.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/ai-robot-inline.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
+  <!-- AI 机器人 inline icon — 白色版，用于深色背景行首 -->
+  <!-- 对齐 H5 task-list 中内联 SVG 结构 -->
+  <rect x="5" y="7" width="14" height="12" rx="4" fill="white"/>
+  <path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="12" cy="3" r="1.5" fill="white"/>
+  <circle cx="9" cy="11.5" r="2" fill="#667eea"/>
+  <circle cx="15" cy="11.5" r="2" fill="#667eea"/>
+  <circle cx="9.5" cy="11" r="0.7" fill="white"/>
+  <circle cx="15.5" cy="11" r="0.7" fill="white"/>
+  <path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/>
+  <circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
+  <circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
+  <rect x="3" y="10" width="2" height="4" rx="1" fill="white"/>
+  <rect x="19" y="10" width="2" height="4" rx="1" fill="white"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/ai-robot.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/ai-robot.svg
@@ -0,0 +1,21 @@
+<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 机器人头部 -->
+  <rect x="5" y="7" width="14" height="12" rx="4" fill="white"/>
+  <!-- 天线 -->
+  <path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="12" cy="3" r="1.5" fill="white"/>
+  <!-- 眼睛 -->
+  <circle cx="9" cy="11.5" r="2" fill="#667eea"/>
+  <circle cx="15" cy="11.5" r="2" fill="#667eea"/>
+  <!-- 眼睛高光 -->
+  <circle cx="9.5" cy="11" r="0.7" fill="white"/>
+  <circle cx="15.5" cy="11" r="0.7" fill="white"/>
+  <!-- 微笑嘴巴 -->
+  <path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/>
+  <!-- 腮红 -->
+  <circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
+  <circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/>
+  <!-- 耳朵 -->
+  <rect x="3" y="10" width="2" height="4" rx="1" fill="white"/>
+  <rect x="19" y="10" width="2" height="4" rx="1" fill="white"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/ball-black.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/ball-black.svg
@@ -0,0 +1,18 @@
+<!-- 黑色台球 - 大号8 -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="ballGradient" cx="35%" cy="35%">
+      <stop offset="0%" style="stop-color:#3a3a3a;stop-opacity:1" />
+      <stop offset="70%" style="stop-color:#1f2937;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0f0f0f;stop-opacity:1" />
+    </radialGradient>
+  </defs>
+  <!-- 球体 -->
+  <circle cx="24" cy="24" r="18" fill="url(#ballGradient)"/>
+  <!-- 高光 -->
+  <ellipse cx="18" cy="16" rx="6" ry="4" fill="white" opacity="0.3"/>
+  <!-- 白色圆圈 -->
+  <circle cx="24" cy="24" r="8" fill="white"/>
+  <!-- 数字8 -->
+  <text x="24" y="29" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#1f2937" text-anchor="middle">8</text>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/ball-gray.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/ball-gray.svg
@@ -0,0 +1,18 @@
+<!-- 灰色台球 - 大号8 -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="ballGrayGradient" cx="35%" cy="35%">
+      <stop offset="0%" style="stop-color:#d0d0d0;stop-opacity:1" />
+      <stop offset="70%" style="stop-color:#c5c5c5;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#a6a6a6;stop-opacity:1" />
+    </radialGradient>
+  </defs>
+  <!-- 球体 -->
+  <circle cx="24" cy="24" r="18" fill="url(#ballGrayGradient)" opacity="0.5"/>
+  <!-- 高光 -->
+  <ellipse cx="18" cy="16" rx="6" ry="4" fill="white" opacity="0.3"/>
+  <!-- 白色圆圈 -->
+  <circle cx="24" cy="24" r="8" fill="white" opacity="0.6"/>
+  <!-- 数字8 -->
+  <text x="24" y="29" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#a6a6a6" text-anchor="middle" opacity="0.6">8</text>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/feature-ai.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/feature-ai.svg
@@ -0,0 +1,97 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="none">
+  <defs>
+    <!-- 主背景渐变：橙色 -->
+    <linearGradient id="ag" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#ffab5e"/>
+      <stop offset="100%" stop-color="#e05a00"/>
+    </linearGradient>
+    <!-- 头部面板渐变 -->
+    <linearGradient id="head" x1="20" y1="26" x2="60" y2="66" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#fff3e0"/>
+      <stop offset="100%" stop-color="#ffe0b2"/>
+    </linearGradient>
+    <!-- 眼睛渐变 -->
+    <linearGradient id="eye" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#ff8c42"/>
+      <stop offset="100%" stop-color="#c94f00"/>
+    </linearGradient>
+    <!-- 口部渐变 -->
+    <linearGradient id="mouth" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#ff8c42"/>
+      <stop offset="100%" stop-color="#e05a00"/>
+    </linearGradient>
+    <!-- 投影 -->
+    <filter id="as" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#c94f00" flood-opacity="0.32"/>
+    </filter>
+    <!-- 头部光泽 -->
+    <filter id="hs" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#ffab5e" flood-opacity="0.5"/>
+    </filter>
+    <!-- 眼睛外发光 -->
+    <filter id="eyeglow" x="-60%" y="-60%" width="220%" height="220%">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <!-- 天线发光 -->
+    <filter id="antglow" x="-80%" y="-80%" width="360%" height="360%">
+      <feGaussianBlur stdDeviation="2" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+
+  <!-- ── 外层背景圆角面板 ── -->
+  <rect x="8" y="8" width="64" height="64" rx="18" fill="url(#ag)" filter="url(#as)"/>
+
+  <!-- ── 顶部高光条 ── -->
+  <rect x="8" y="8" width="64" height="22" rx="18" fill="white" opacity="0.10"/>
+
+  <!-- ── 天线（高对比度，纯白单杆，辨识度优先） ── -->
+  <line x1="40" y1="23" x2="40" y2="10" stroke="white" stroke-width="5" stroke-linecap="round"/>
+  <!-- 天线球：白色大球 + 橙色芯 + 高光 -->
+  <circle cx="40" cy="7" r="6" fill="white"/>
+  <circle cx="40" cy="7" r="3.2" fill="#ff8c42"/>
+  <circle cx="38.8" cy="5.8" r="1.1" fill="white" opacity="0.9"/>
+
+  <!-- ── 机器人头部主体 ── -->
+  <rect x="18" y="24" width="44" height="36" rx="10" fill="url(#head)" filter="url(#hs)"/>
+
+  <!-- 头部顶部高光线 -->
+  <rect x="24" y="25" width="32" height="3" rx="1.5" fill="white" opacity="0.55"/>
+
+  <!-- ── 耳朵（只保留外轮廓三面，内侧开口贴合头部无边界线） ── -->
+  <!-- 左耳：填充先铺，再用外轮廓 path 三面描边（左/上/下弧），右侧开口不画线 -->
+  <rect x="11" y="33" width="8" height="14" rx="4" fill="#ffd4a8"/>
+  <!-- 用头部同色覆盖右侧接缝描边区域 -->
+  <rect x="17" y="33" width="3" height="14" fill="#ffd4a8"/>
+  <path d="M19 33 Q11 33 11 37 L11 43 Q11 47 19 47" stroke="#ffab5e" stroke-width="1.8" fill="none" stroke-linecap="round"/>
+
+  <!-- 右耳：同理，左侧开口不画线 -->
+  <rect x="61" y="33" width="8" height="14" rx="4" fill="#ffd4a8"/>
+  <rect x="61" y="33" width="3" height="14" fill="#ffd4a8"/>
+  <path d="M61 33 Q69 33 69 37 L69 43 Q69 47 61 47" stroke="#ffab5e" stroke-width="1.8" fill="none" stroke-linecap="round"/>
+
+  <!-- ── 眼睛（渐变 + 双高光 + 发光） ── -->
+  <!-- 左眼 -->
+  <circle cx="31" cy="37" r="5.5" fill="url(#eye)" filter="url(#eyeglow)"/>
+  <circle cx="31" cy="37" r="4.5" fill="url(#eye)"/>
+  <circle cx="29.5" cy="35.5" r="1.6" fill="white" opacity="0.9"/>
+  <circle cx="33" cy="38.5" r="0.8" fill="white" opacity="0.5"/>
+  <!-- 右眼 -->
+  <circle cx="49" cy="37" r="5.5" fill="url(#eye)" filter="url(#eyeglow)"/>
+  <circle cx="49" cy="37" r="4.5" fill="url(#eye)"/>
+  <circle cx="47.5" cy="35.5" r="1.6" fill="white" opacity="0.9"/>
+  <circle cx="51" cy="38.5" r="0.8" fill="white" opacity="0.5"/>
+
+  <!-- ── 腮红（红色系，更明显） ── -->
+  <ellipse cx="23.5" cy="46" rx="5" ry="3.2" fill="#f4756a" opacity="0.65"/>
+  <ellipse cx="56.5" cy="46" rx="5" ry="3.2" fill="#f4756a" opacity="0.65"/>
+
+  <!-- ── 微笑嘴巴 ── -->
+  <path d="M30 49 Q40 56 50 49" stroke="url(#mouth)" stroke-width="2.2" stroke-linecap="round" fill="none"/>
+  <path d="M34 50.5 Q40 55 46 50.5" fill="white" opacity="0.55"/>
+
+  <!-- ── 右上角单颗星形闪光 ── -->
+  <path d="M65 13 L66.2 16 L69.5 16 L67 18 L68 21 L65 19.2 L62 21 L63 18 L60.5 16 L63.8 16 Z"
+    fill="#fff3e0" opacity="0.65"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/feature-board.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/feature-board.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#00c896"/>
+      <stop offset="100%" stop-color="#008c6a"/>
+    </linearGradient>
+    <linearGradient id="bar1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#6fffd4"/>
+      <stop offset="100%" stop-color="#00c896"/>
+    </linearGradient>
+    <linearGradient id="bar2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#a0ffe0"/>
+    </linearGradient>
+    <linearGradient id="bar3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#6fffd4"/>
+      <stop offset="100%" stop-color="#00a870"/>
+    </linearGradient>
+    <filter id="bs" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#008c6a" flood-opacity="0.35"/>
+    </filter>
+  </defs>
+  <!-- background panel -->
+  <rect x="10" y="10" width="60" height="60" rx="14" fill="url(#bg)" filter="url(#bs)"/>
+  <!-- grid lines -->
+  <line x1="18" y1="55" x2="62" y2="55" stroke="white" stroke-opacity="0.2" stroke-width="1"/>
+  <line x1="18" y1="45" x2="62" y2="45" stroke="white" stroke-opacity="0.15" stroke-width="1"/>
+  <line x1="18" y1="35" x2="62" y2="35" stroke="white" stroke-opacity="0.1" stroke-width="1"/>
+  <!-- bars -->
+  <rect x="20" y="38" width="10" height="17" rx="3" fill="url(#bar2)" opacity="0.85"/>
+  <rect x="34" y="28" width="10" height="27" rx="3" fill="white" opacity="0.95"/>
+  <rect x="48" y="33" width="10" height="22" rx="3" fill="url(#bar2)" opacity="0.85"/>
+  <!-- trend line -->
+  <polyline points="25,37 39,25 53,30" stroke="#ffffcc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.7"/>
+  <circle cx="25" cy="37" r="2.5" fill="#fff" opacity="0.9"/>
+  <circle cx="39" cy="25" r="2.5" fill="#fff" opacity="0.9"/>
+  <circle cx="53" cy="30" r="2.5" fill="#fff" opacity="0.9"/>
+  <!-- bottom axis -->
+  <line x1="18" y1="57" x2="62" y2="57" stroke="white" stroke-opacity="0.4" stroke-width="1.5"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/feature-task.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/feature-task.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="none">
+  <defs>
+    <linearGradient id="tg" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#4f8ef7"/>
+      <stop offset="100%" stop-color="#1a5fd8"/>
+    </linearGradient>
+    <linearGradient id="tg2" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#7ab4ff"/>
+      <stop offset="100%" stop-color="#4f8ef7"/>
+    </linearGradient>
+    <filter id="ts" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#1a5fd8" flood-opacity="0.35"/>
+    </filter>
+  </defs>
+  <!-- clipboard body -->
+  <rect x="16" y="14" width="48" height="56" rx="8" fill="url(#tg)" filter="url(#ts)"/>
+  <!-- clip top tab -->
+  <rect x="28" y="10" width="24" height="12" rx="6" fill="#7ab4ff"/>
+  <!-- white card shine -->
+  <rect x="22" y="28" width="36" height="5" rx="2.5" fill="white" opacity="0.9"/>
+  <rect x="22" y="38" width="28" height="4" rx="2" fill="white" opacity="0.6"/>
+  <rect x="22" y="47" width="32" height="4" rx="2" fill="white" opacity="0.6"/>
+  <rect x="22" y="56" width="20" height="4" rx="2" fill="white" opacity="0.4"/>
+  <!-- check circle -->
+  <circle cx="60" cy="58" r="12" fill="#fff" opacity="0.15"/>
+  <circle cx="60" cy="58" r="9" fill="#e8f1ff" stroke="#7ab4ff" stroke-width="1.5"/>
+  <polyline points="55.5,58 58.5,61 64.5,55" stroke="#1a5fd8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/heart-empty.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/heart-empty.svg
@@ -0,0 +1,11 @@
+<!-- 空心爱心 - 华丽版 -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="heartStroke" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff6b9d;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#e34d59;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#c9184a;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <path d="M24 42L20.55 38.85C11.4 30.48 5.25 24.87 5.25 18C5.25 12.39 9.39 8.25 15 8.25C18.09 8.25 21.06 9.69 23.25 12C25.44 9.69 28.41 8.25 31.5 8.25C37.11 8.25 41.25 12.39 41.25 18C41.25 24.87 35.1 30.48 25.95 38.85L24 42Z" stroke="url(#heartStroke)" stroke-width="2.5" fill="none"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/heart-filled.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/heart-filled.svg
@@ -0,0 +1,22 @@
+<!-- 实心爱心 - 华丽版 -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 外发光 -->
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="heartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff6b9d;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#e34d59;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#c9184a;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- 主体爱心 -->
+  <path d="M24 42L20.55 38.85C11.4 30.48 5.25 24.87 5.25 18C5.25 12.39 9.39 8.25 15 8.25C18.09 8.25 21.06 9.69 23.25 12C25.44 9.69 28.41 8.25 31.5 8.25C37.11 8.25 41.25 12.39 41.25 18C41.25 24.87 35.1 30.48 25.95 38.85L24 42Z" fill="url(#heartGradient)" filter="url(#glow)"/>
+  <!-- 高光 -->
+  <path d="M15 8.25C12.5 8.25 10.3 9.2 8.8 10.8C10.5 9.5 12.6 8.8 15 8.8C17.5 8.8 19.8 9.8 21.5 11.5C20 9.5 17.7 8.25 15 8.25Z" fill="white" opacity="0.4"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/icon-clock-circle.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/icon-clock-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+  <circle cx="12" cy="12" r="10"/>
+  <polyline points="12 6 12 12 16 14"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/icon-forbidden.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/icon-forbidden.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+  <circle cx="12" cy="12" r="10"/>
+  <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/icon-wechat.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/icon-wechat.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
+  <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.32.32 0 0 0 .165-.054l1.9-1.106a.96.96 0 0 1 .465-.116.94.94 0 0 1 .272.04 10.6 10.6 0 0 0 2.822.384c.136 0 .271-.002.405-.009a6.9 6.9 0 0 1-.315-2.053c0-3.694 3.614-6.69 8.076-6.69.233 0 .463.01.691.027C16.964 4.837 13.132 2.188 8.691 2.188zm-2.97 5.28a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zm5.96 0a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zM24 14.2c0-3.355-3.4-6.08-7.59-6.08s-7.59 2.725-7.59 6.08c0 3.356 3.4 6.08 7.59 6.08.772 0 1.515-.094 2.215-.268a.77.77 0 0 1 .224-.033.79.79 0 0 1 .382.095l1.565.912a.26.26 0 0 0 .135.044c.13 0 .238-.108.238-.242 0-.06-.024-.117-.04-.175l-.32-1.218a.48.48 0 0 1 .175-.547C22.95 17.89 24 16.165 24 14.2zm-10.14-.426a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7zm5.1 0a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7z"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/logo-billiard.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/logo-billiard.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
+  <circle cx="12" cy="12" r="10" fill="white" opacity="0.3"/>
+  <circle cx="12" cy="12" r="6" fill="white"/>
+  <circle cx="12" cy="12" r="2" fill="white"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/menu-chat.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/menu-chat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M6 9a3 3 0 013-3h14a3 3 0 013 3v11a3 3 0 01-3 3h-5l-5 4v-4H9a3 3 0 01-3-3V9z" stroke="#00a870" stroke-width="2" fill="none"/><path d="M10.5 12.5h11" stroke="#00a870" stroke-width="1.6" stroke-linecap="round" opacity="0.6"/><path d="M10.5 16h7" stroke="#00a870" stroke-width="1.6" stroke-linecap="round" opacity="0.6"/><path d="M27 5l1 2.5 2.5 1-2.5 1L27 12l-1-2.5L23.5 8.5l2.5-1L27 5z" fill="#00a870"/></svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/menu-logout.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/menu-logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M12.5 10.5A11 11 0 1023.5 10.5" stroke="#e34d59" stroke-width="2.2" stroke-linecap="round" fill="none"/><path d="M18 7v10" stroke="#e34d59" stroke-width="2.4" stroke-linecap="round"/><circle cx="18" cy="23" r="2" fill="#e34d59" opacity="0.25"/></svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/menu-notes.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/menu-notes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><rect x="6" y="8" width="18" height="22" rx="3" stroke="#0052d9" stroke-width="2" fill="none"/><path d="M10 14h10" stroke="#0052d9" stroke-width="1.8" stroke-linecap="round"/><path d="M10 18h10" stroke="#0052d9" stroke-width="1.8" stroke-linecap="round"/><path d="M10 22h6" stroke="#0052d9" stroke-width="1.8" stroke-linecap="round"/><path d="M22 6l4 4-9 9-5 1 1-5 9-9z" fill="#0052d9" opacity="0.9"/><path d="M22 6l4 4" stroke="white" stroke-width="1" opacity="0.4"/><rect x="24.5" y="4" width="3" height="3" rx="1" fill="#60a5fa" transform="rotate(45 26 5.5)"/></svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/send-arrow-gray.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/send-arrow-gray.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M6 20L34 8 22 34 18 22 6 20z" fill="#bbbbbb"/></svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/send-arrow-white.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/send-arrow-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M6 20L34 8 22 34 18 22 6 20z" fill="#ffffff"/></svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/send-arrow.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/send-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M6 20L34 8 22 34 18 22 6 20z" fill="currentColor"/></svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-board-nav-active.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-board-nav-active.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="13" width="4" height="8" rx="1" fill="#0052d9" stroke="#0052d9" stroke-width="1"/>
+  <rect x="10" y="8" width="4" height="13" rx="1" fill="#0052d9" stroke="#0052d9" stroke-width="1"/>
+  <rect x="16" y="3" width="4" height="18" rx="1" fill="#0052d9" stroke="#0052d9" stroke-width="1"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-board-nav.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-board-nav.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="13" width="4" height="8" rx="1" stroke="#8b8b8b" stroke-width="1.5"/>
+  <rect x="10" y="8" width="4" height="13" rx="1" stroke="#8b8b8b" stroke-width="1.5"/>
+  <rect x="16" y="3" width="4" height="18" rx="1" stroke="#8b8b8b" stroke-width="1.5"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-my-nav-active.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-my-nav-active.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="7" r="4" fill="#0052d9" stroke="#0052d9" stroke-width="1"/>
+  <path d="M5.5 21a6.5 6.5 0 0113 0h-13z" fill="#0052d9" stroke="#0052d9" stroke-width="1"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-my-nav.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-my-nav.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="7" r="4" stroke="#8b8b8b" stroke-width="1.5"/>
+  <path d="M5.5 21a6.5 6.5 0 0113 0h-13z" stroke="#8b8b8b" stroke-width="1.5"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-task-nav-active.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-task-nav-active.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="5" y="4" width="14" height="17" rx="2" fill="#0052d9" stroke="#0052d9" stroke-width="1"/>
+  <rect x="8" y="2" width="8" height="4" rx="1" fill="#0052d9" stroke="#0052d9" stroke-width="1"/>
+  <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-task-nav.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/icons/tab-task-nav.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="5" y="4" width="14" height="17" rx="2" stroke="#8b8b8b" stroke-width="1.5"/>
+  <rect x="8" y="2" width="8" height="4" rx="1" stroke="#8b8b8b" stroke-width="1.5"/>
+  <path d="M9 12l2 2 4-4" stroke="#8b8b8b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/avatar-coach.png
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/avatar-coach.png
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-blue-light-aurora.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-blue-light-aurora.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#1a6dd9"/>
+      <stop offset="15%" stop-color="#1a6dd9"/>
+      <stop offset="40%" stop-color="#4087e9"/>
+      <stop offset="60%" stop-color="#4087e9"/>
+      <stop offset="85%" stop-color="#6ba8f8"/>
+      <stop offset="100%" stop-color="#6ba8f8"/>
+    </linearGradient>
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.25"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.18"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="25%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="40%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="65%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.15"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+  <rect width="750" height="580" fill="url(#main)"/>
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <rect width="750" height="580" fill="url(#glowBR)"/>
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <rect width="750" height="580" fill="url(#glowTR)"/>
+  <g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-combined.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-combined.svg
@@ -0,0 +1,103 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <!-- 主渐变 theme-blue -->
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#002d80"/>
+      <stop offset="15%" stop-color="#002d80"/>
+      <stop offset="40%" stop-color="#0052d9"/>
+      <stop offset="60%" stop-color="#0052d9"/>
+      <stop offset="85%" stop-color="#2b7de9"/>
+      <stop offset="100%" stop-color="#2b7de9"/>
+    </linearGradient>
+    <!-- 丝绸光带 -->
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <!-- 左上角深色 -->
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.25"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <!-- 顶部深色 -->
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.18"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <!-- 左侧光晕 -->
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <!-- 右下角光晕 -->
+    <radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <!-- 底部高光 -->
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="25%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <!-- 右上角光晕 -->
+    <radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="40%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="65%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <!-- Aurora 丝带渐变 -->
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.15"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+
+  <!-- 主渐变 -->
+  <rect width="750" height="580" fill="url(#main)"/>
+  <!-- 丝绸光带 -->
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <!-- 左上角深色 -->
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <!-- 顶部深色 -->
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <!-- 左侧光晕 -->
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <!-- 右下角光晕 -->
+  <rect width="750" height="580" fill="url(#glowBR)"/>
+  <!-- 底部高光 -->
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <!-- 右上角光晕 -->
+  <rect width="750" height="580" fill="url(#glowTR)"/>
+
+  <!-- Aurora 丝带
+       原始 CSS: viewBox 400×200, background-size:480px 160px, background-position:center 40px, opacity:0.5
+       H5 画布 412px 宽 → 小程序 750rpx 宽，缩放比 750/412=1.820
+       x: (412-480)/2=-34 → -34×1.820=-61.9
+       y: 40px → 40×1.820=72.8
+       scale.x: 1.2×1.820=2.184
+       scale.y: 0.8×1.820=1.456
+  -->
+  <g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-coral-aurora.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-coral-aurora.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#be4a62"/>
+      <stop offset="15%" stop-color="#be4a62"/>
+      <stop offset="40%" stop-color="#d4617a"/>
+      <stop offset="60%" stop-color="#d4617a"/>
+      <stop offset="85%" stop-color="#e8899a"/>
+      <stop offset="100%" stop-color="#e8899a"/>
+    </linearGradient>
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.25"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.18"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="25%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="40%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="65%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.15"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+  <rect width="750" height="580" fill="url(#main)"/>
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <rect width="750" height="580" fill="url(#glowBR)"/>
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <rect width="750" height="580" fill="url(#glowTR)"/>
+  <g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-dark-gold-aurora.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-dark-gold-aurora.svg
@@ -0,0 +1,78 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <!-- theme-dark-gold: 深色黑金，右下角金色光晕 -->
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#1a1a1a"/>
+      <stop offset="40%" stop-color="#2a2520"/>
+      <stop offset="100%" stop-color="#1f1c18"/>
+    </linearGradient>
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.03"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.08"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.08"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.03"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.3"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.2"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.06"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <!-- 金色右下光晕 (::after dark-gold 特殊处理) -->
+    <radialGradient id="glowGold" cx="0.6" cy="0.7" r="0.6" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="#ffc400" stop-opacity="0.25"/>
+      <stop offset="50%" stop-color="#ffbb00" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="goldDiag" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ffbb00" stop-opacity="0"/>
+      <stop offset="30%" stop-color="#ffbb00" stop-opacity="0.15"/>
+      <stop offset="60%" stop-color="#ffb700" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="#ffb700" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="#ffc400" stop-opacity="0.1"/>
+      <stop offset="25%" stop-color="#ffc400" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.3"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.2"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.2"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+  <rect width="750" height="580" fill="url(#main)"/>
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <!-- 金色光晕 -->
+  <rect width="750" height="580" fill="url(#glowGold)"/>
+  <rect width="750" height="580" fill="url(#goldDiag)"/>
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <!-- Aurora 丝带（opacity 降低，配合深色主题） -->
+  <g opacity="0.35" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.15" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-orange-aurora.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-orange-aurora.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#9a3412"/>
+      <stop offset="15%" stop-color="#9a3412"/>
+      <stop offset="40%" stop-color="#ea580c"/>
+      <stop offset="60%" stop-color="#ea580c"/>
+      <stop offset="85%" stop-color="#f97316"/>
+      <stop offset="100%" stop-color="#f97316"/>
+    </linearGradient>
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.25"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.18"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="25%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="40%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="65%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.15"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+  <rect width="750" height="580" fill="url(#main)"/>
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <rect width="750" height="580" fill="url(#glowBR)"/>
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <rect width="750" height="580" fill="url(#glowTR)"/>
+  <g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-pink-aurora.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-pink-aurora.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#9d174d"/>
+      <stop offset="15%" stop-color="#9d174d"/>
+      <stop offset="40%" stop-color="#db2777"/>
+      <stop offset="60%" stop-color="#db2777"/>
+      <stop offset="85%" stop-color="#ec4899"/>
+      <stop offset="100%" stop-color="#ec4899"/>
+    </linearGradient>
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.25"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.18"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="25%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="40%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="65%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.15"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+  <rect width="750" height="580" fill="url(#main)"/>
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <rect width="750" height="580" fill="url(#glowBR)"/>
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <rect width="750" height="580" fill="url(#glowTR)"/>
+  <g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-red-aurora.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-red-aurora.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#991b1b"/>
+      <stop offset="15%" stop-color="#991b1b"/>
+      <stop offset="40%" stop-color="#dc2626"/>
+      <stop offset="60%" stop-color="#dc2626"/>
+      <stop offset="85%" stop-color="#ef4444"/>
+      <stop offset="100%" stop-color="#ef4444"/>
+    </linearGradient>
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.25"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.18"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="25%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="40%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="65%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.15"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+  <rect width="750" height="580" fill="url(#main)"/>
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <rect width="750" height="580" fill="url(#glowBR)"/>
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <rect width="750" height="580" fill="url(#glowTR)"/>
+  <g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-teal-aurora.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/banner-bg-teal-aurora.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
+      <stop offset="0%" stop-color="#0f766e"/>
+      <stop offset="15%" stop-color="#0f766e"/>
+      <stop offset="40%" stop-color="#14b8a6"/>
+      <stop offset="60%" stop-color="#14b8a6"/>
+      <stop offset="85%" stop-color="#2dd4bf"/>
+      <stop offset="100%" stop-color="#2dd4bf"/>
+    </linearGradient>
+    <linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="20%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="45%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="80%" stop-color="white" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="black" stop-opacity="0.25"/>
+      <stop offset="45%" stop-color="black" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0.18"/>
+      <stop offset="40%" stop-color="black" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.25"/>
+      <stop offset="55%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
+      <stop offset="0%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="25%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="40%" stop-color="white" stop-opacity="0.1"/>
+      <stop offset="65%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="black" stop-opacity="0.15"/>
+      <stop offset="50%" stop-color="white" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="30%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="70%" stop-color="white" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
+  </defs>
+  <rect width="750" height="580" fill="url(#main)"/>
+  <rect width="750" height="580" fill="url(#silk)"/>
+  <rect width="750" height="580" fill="url(#darkTL)"/>
+  <rect width="750" height="580" fill="url(#darkTop)"/>
+  <rect width="750" height="580" fill="url(#glowL)"/>
+  <rect width="750" height="580" fill="url(#glowBR)"/>
+  <rect width="750" height="580" fill="url(#edgeHL)"/>
+  <rect width="750" height="580" fill="url(#glowTR)"/>
+  <g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
+    <path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
+    <path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
+    <path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
+    <path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
+  </g>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/login-bg-animated.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/login-bg-animated.svg
@@ -0,0 +1,122 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="750" height="1334" viewBox="0 0 750 1334" fill="none">
+  <defs>
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="750" y2="1334" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#dbeafe"/>
+      <stop offset="50%" stop-color="#eff6ff"/>
+      <stop offset="100%" stop-color="#dbeafe"/>
+    </linearGradient>
+    <!-- orb gradients -->
+    <radialGradient id="orb1" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#93c5fd" stop-opacity="0.55"/>
+      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="orb2" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#67e8f9" stop-opacity="0.45"/>
+      <stop offset="100%" stop-color="#06b6d4" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="orb3" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#a5b4fc" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="orb4" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#bfdbfe" stop-opacity="0.5"/>
+      <stop offset="100%" stop-color="#2563eb" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <!-- base gradient fill -->
+  <rect width="750" height="1334" fill="url(#bgGrad)"/>
+
+  <!-- mesh grid (subtle) -->
+  <g opacity="0.06" stroke="#3b82f6" stroke-width="1">
+    <line x1="0" y1="133" x2="750" y2="133"/>
+    <line x1="0" y1="267" x2="750" y2="267"/>
+    <line x1="0" y1="400" x2="750" y2="400"/>
+    <line x1="0" y1="534" x2="750" y2="534"/>
+    <line x1="0" y1="667" x2="750" y2="667"/>
+    <line x1="0" y1="800" x2="750" y2="800"/>
+    <line x1="0" y1="934" x2="750" y2="934"/>
+    <line x1="0" y1="1067" x2="750" y2="1067"/>
+    <line x1="0" y1="1200" x2="750" y2="1200"/>
+    <line x1="75" y1="0" x2="75" y2="1334"/>
+    <line x1="150" y1="0" x2="150" y2="1334"/>
+    <line x1="225" y1="0" x2="225" y2="1334"/>
+    <line x1="300" y1="0" x2="300" y2="1334"/>
+    <line x1="375" y1="0" x2="375" y2="1334"/>
+    <line x1="450" y1="0" x2="450" y2="1334"/>
+    <line x1="525" y1="0" x2="525" y2="1334"/>
+    <line x1="600" y1="0" x2="600" y2="1334"/>
+    <line x1="675" y1="0" x2="675" y2="1334"/>
+  </g>
+
+  <!-- floating orb 1 (top-left) -->
+  <ellipse cx="120" cy="220" rx="200" ry="200" fill="url(#orb1)">
+    <animateTransform attributeName="transform" type="translate" values="0,0; 30,25; -15,40; 0,0" dur="8s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"/>
+    <animate attributeName="opacity" values="0.7;1;0.6;0.7" dur="8s" repeatCount="indefinite"/>
+  </ellipse>
+
+  <!-- floating orb 2 (top-right) -->
+  <ellipse cx="650" cy="300" rx="180" ry="180" fill="url(#orb2)">
+    <animateTransform attributeName="transform" type="translate" values="0,0; -25,20; 10,-30; 0,0" dur="9s" begin="-2s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"/>
+    <animate attributeName="opacity" values="0.6;0.9;0.5;0.6" dur="9s" begin="-2s" repeatCount="indefinite"/>
+  </ellipse>
+
+  <!-- floating orb 3 (mid) -->
+  <ellipse cx="375" cy="700" rx="240" ry="160" fill="url(#orb3)">
+    <animateTransform attributeName="transform" type="translate" values="0,0; 20,-20; -20,15; 0,0" dur="11s" begin="-4s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"/>
+    <animate attributeName="opacity" values="0.5;0.8;0.4;0.5" dur="11s" begin="-4s" repeatCount="indefinite"/>
+  </ellipse>
+
+  <!-- floating orb 4 (bottom) -->
+  <ellipse cx="200" cy="1100" rx="220" ry="220" fill="url(#orb4)">
+    <animateTransform attributeName="transform" type="translate" values="0,0; 35,-15; -10,25; 0,0" dur="10s" begin="-6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"/>
+    <animate attributeName="opacity" values="0.6;0.9;0.5;0.6" dur="10s" begin="-6s" repeatCount="indefinite"/>
+  </ellipse>
+
+  <!-- floating orb 5 (bottom-right) -->
+  <ellipse cx="600" cy="1050" rx="170" ry="170" fill="url(#orb2)">
+    <animateTransform attributeName="transform" type="translate" values="0,0; -20,30; 15,-20; 0,0" dur="7s" begin="-3s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"/>
+    <animate attributeName="opacity" values="0.5;0.8;0.45;0.5" dur="7s" begin="-3s" repeatCount="indefinite"/>
+  </ellipse>
+
+  <!-- decorative ring 1 -->
+  <circle cx="100" cy="450" r="60" stroke="#3b82f6" stroke-width="1.5" fill="none" opacity="0.12">
+    <animate attributeName="r" values="60;72;60" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.12;0.22;0.12" dur="6s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="100" cy="450" r="40" stroke="#3b82f6" stroke-width="1" fill="none" opacity="0.08">
+    <animate attributeName="r" values="40;50;40" dur="6s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- decorative ring 2 -->
+  <circle cx="660" cy="900" r="55" stroke="#06b6d4" stroke-width="1.5" fill="none" opacity="0.12">
+    <animate attributeName="r" values="55;67;55" dur="7s" begin="-2s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.12;0.2;0.12" dur="7s" begin="-2s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- floating particles -->
+  <circle cx="180" cy="580" r="4" fill="#3b82f6" opacity="0.3">
+    <animate attributeName="cy" values="580;555;580" dur="5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.3;0.6;0.3" dur="5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="560" cy="480" r="3" fill="#06b6d4" opacity="0.25">
+    <animate attributeName="cy" values="480;460;480" dur="6s" begin="-1s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.25;0.5;0.25" dur="6s" begin="-1s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="330" cy="900" r="3.5" fill="#6366f1" opacity="0.25">
+    <animate attributeName="cy" values="900;880;900" dur="7s" begin="-3s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.25;0.5;0.25" dur="7s" begin="-3s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="500" cy="750" r="2.5" fill="#3b82f6" opacity="0.2">
+    <animate attributeName="cy" values="750;732;750" dur="4.5s" begin="-2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="80" cy="830" r="3" fill="#93c5fd" opacity="0.3">
+    <animate attributeName="cy" values="830;812;830" dur="8s" begin="-5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- diamond sparkles -->
+  <g opacity="0.18">
+    <polygon points="420,150 425,160 420,170 415,160" fill="#3b82f6">
+      <animate attributeName="opacity" values="0.18;0.4;0.18" dur="3s" repeatCount="indefinite"/>
+    </polygon>
+    <polygon points="670,550 674,558 670,566 666,558" 
--- a/apps/DEMO-miniprogram/miniprogram/assets/images/stamp-badge.svg
+++ b/apps/DEMO-miniprogram/miniprogram/assets/images/stamp-badge.svg
@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95" width="95" height="95">
+  <defs>
+    <filter id="textBlur">
+      <feGaussianBlur stdDeviation="0.73"/>
+    </filter>
+    <!-- 内圆填充：从边框向圆心的单向光路，边缘不透明→圆心透明 -->
+    <radialGradient id="innerLight" cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="white" stop-opacity="0"/>
+      <stop offset="60%" stop-color="white" stop-opacity="0.18"/>
+      <stop offset="82%" stop-color="white" stop-opacity="0.38"/>
+      <stop offset="95%" stop-color="white" stop-opacity="0.75"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0.95"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="95" height="95" fill="transparent"/>
+
+  <!-- 外圆：更鲜艳红色 -->
+  <circle cx="47.5" cy="47.5" r="44.75"
+    fill="transparent"
+    stroke="rgb(255, 45, 45)"
+    stroke-width="5.5"/>
+
+  <!-- 内圆填充：从边框向圆心的光路渐变 -->
+  <circle cx="47.5" cy="47.5" r="40.25"
+    fill="url(#innerLight)"/>
+
+  <!-- 内圆：纯白描边，无发光 -->
+  <circle cx="47.5" cy="47.5" r="40.25"
+    fill="none"
+    stroke="rgb(255, 255, 255)"
+    stroke-width="3.65"/>
+
+  <!-- 👍 Emoji -->
+  <text x="47.5" y="33"
+    font-size="33"
+    text-anchor="middle"
+    dominant-baseline="middle"
+    fill="#000">👍</text>
+
+  <!-- 白色描边层 -->
+  <text x="47.5" y="72"
+    font-family="sans-serif, -apple-system, BlinkMacSystemFont"
+    font-size="20"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="rgba(255,255,255,0.95)"
+    stroke="rgba(255,255,255,0.95)"
+    stroke-width="4"
+    paint-order="stroke">已完成</text>
+
+  <!-- 模糊白色光晕层 -->
+  <text x="47.5" y="72"
+    font-family="sans-serif, -apple-system, BlinkMacSystemFont"
+    font-size="20"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="rgba(255,255,255,0.9)"
+    opacity="0.9"
+    filter="url(#textBlur)">已完成</text>
+
+  <!-- 红色文字主体：更鲜艳 -->
+  <text x="47.5" y="72"
+    font-family="sans-serif, -apple-system, BlinkMacSystemFont"
+    font-size="20"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="rgb(235, 25, 25)">已完成</text>
+</svg>
--- a/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.ts
@@ -0,0 +1,84 @@
+Component({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    customerName: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    content: '',
+    error: false,
+    keyboardHeight: 0,
+    canSave: false,
+  },
+
+  observers: {
+    visible(val: boolean) {
+      if (val) {
+        // 打开弹窗时重置
+        this.setData({
+          content: '',
+          error: false,
+          keyboardHeight: 0,
+          canSave: false,
+        })
+      } else {
+        // 关闭时重置键盘高度
+        this.setData({ keyboardHeight: 0 })
+      }
+    },
+    // 内容变化时重新计算 canSave
+    content(val: string) {
+      this.setData({
+        canSave: val.trim().length > 0,
+      })
+    },
+  },
+
+  methods: {
+    /** 文本输入 */
+    onContentInput(e: WechatMiniprogram.CustomEvent<{ value: string }>) {
+      this.setData({ content: e.detail.value, error: false })
+    },
+
+    /** 键盘弹出 */
+    onTextareaFocus(e: WechatMiniprogram.InputEvent) {
+      let height = (e as any).detail?.height ?? 0
+      // 修复：首次激活时键盘高度可能为0，需要设置最小值确保弹窗移动
+      if (height === 0) {
+        height = 260  // 微信小程序默认键盘高度约 260px
+      }
+      this.setData({ keyboardHeight: height })
+    },
+
+    /** 键盘收起 */
+    onTextareaBlur() {
+      this.setData({ keyboardHeight: 0 })
+    },
+
+    /** 确认放弃 */
+    onConfirm() {
+      if (!this.data.canSave) {
+        this.setData({ error: true })
+        return
+      }
+
+      this.triggerEvent('confirm', {
+        reason: this.data.content.trim(),
+      })
+    },
+
+    /** 取消 */
+    onCancel() {
+      this.triggerEvent('cancel')
+    },
+
+    /** 阻止冒泡 */
+    noop() {},
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.wxml
@@ -0,0 +1,53 @@
+<view class="modal-overlay {{keyboardHeight > 0 ? 'modal-overlay--keyboard-open' : ''}}" wx:if="{{visible}}" catchtap="onCancel" catchtouchmove="noop">
+  <view class="modal-container" catchtap="noop">
+    <!-- 头部 -->
+    <view class="modal-header">
+      <view class="header-left">
+        <text class="modal-emoji">⚠️</text>
+        <text class="modal-title">放弃 <text class="modal-name">{{customerName}}</text></text>
+      </view>
+      <view class="modal-close" bindtap="onCancel" hover-class="modal-close--hover">
+        <t-icon name="close" size="40rpx" color="#8b8b8b" />
+      </view>
+    </view>
+
+    <!-- 描述 -->
+    <view class="modal-desc-wrap">
+      <text class="modal-desc">确定放弃该客户的维护任务？请填写原因：</text>
+    </view>
+
+    <!-- 文本输入 -->
+    <view class="textarea-section">
+      <textarea
+        class="abandon-textarea"
+        placeholder="请输入放弃原因（必填）"
+        value="{{content}}"
+        bindinput="onContentInput"
+        bindfocus="onTextareaFocus"
+        bindblur="onTextareaBlur"
+        maxlength="200"
+        auto-height
+        adjust-position="{{false}}"
+        placeholder-class="textarea-placeholder"
+      />
+    </view>
+
+    <!-- 错误提示 -->
+    <view class="error-wrap" wx:if="{{error}}">
+      <text class="error-text">请输入放弃原因后再提交</text>
+    </view>
+
+    <!-- 键盘弹出时的占位，防止内容被遮挡 -->
+    <view wx:if="{{keyboardHeight > 0}}" style="height: {{keyboardHeight}}px;"></view>
+
+    <!-- 保存按钮 -->
+    <view class="modal-footer {{keyboardHeight > 0 ? 'modal-footer--float' : ''}}" style="{{keyboardHeight > 0 ? 'bottom: ' + keyboardHeight + 'px;' : ''}}">
+      <view class="confirm-btn {{!canSave ? 'disabled' : ''}}" bindtap="onConfirm" hover-class="{{canSave ? 'confirm-btn--hover' : ''}}">
+        <text class="confirm-text">确认放弃</text>
+      </view>
+      <view class="cancel-btn" bindtap="onCancel" hover-class="cancel-btn--hover">
+        <text class="cancel-text">取消</text>
+      </view>
+    </view>
+  </view>
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/abandon-modal/abandon-modal.wxss
@@ -0,0 +1,192 @@
+/* 放弃弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1000;
+  transition: align-items 0.3s ease;
+}
+
+/* 键盘弹出时，弹窗移到顶部 */
+.modal-overlay--keyboard-open {
+  align-items: flex-start;
+}
+
+.modal-container {
+  width: 100%;
+  background: #fff;
+  border-radius: 48rpx 48rpx 0 0;
+  padding: 40rpx 40rpx 60rpx;
+  max-height: 80vh;
+  overflow-y: auto;
+  transition: border-radius 0.3s ease;
+}
+
+/* 键盘弹出时，改为全圆角 */
+.modal-overlay--keyboard-open .modal-container {
+  border-radius: 0 0 48rpx 48rpx;
+  max-height: none;
+}
+
+/* 头部 */
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32rpx;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.modal-emoji {
+  font-size: 32rpx;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  line-height: 44rpx;
+  font-weight: 600;
+  color: #242424;
+}
+
+.modal-name {
+  color: #e34d59;
+}
+
+.modal-close {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: transparent;
+}
+
+.modal-close--hover {
+  background: #f3f3f3;
+}
+
+/* 描述 */
+.modal-desc-wrap {
+  margin-bottom: 32rpx;
+}
+
+.modal-desc {
+  font-size: 26rpx;
+  line-height: 36rpx;
+  color: #8b8b8b;
+}
+
+/* 文本输入 */
+.textarea-section {
+  margin-bottom: 32rpx;
+}
+
+.abandon-textarea {
+  width: 100%;
+  min-height: 240rpx;
+  padding: 24rpx;
+  background: #f3f3f3;
+  border-radius: 24rpx;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #242424;
+  border: 2rpx solid #f3f3f3;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.abandon-textarea:focus {
+  border-color: #0052d9;
+  background: #fff;
+}
+
+.textarea-placeholder {
+  color: #a6a6a6;
+}
+
+/* 错误提示 */
+.error-wrap {
+  margin-bottom: 16rpx;
+}
+
+.error-text {
+  font-size: 22rpx;
+  line-height: 32rpx;
+  color: #e34d59;
+}
+
+/* 底部按钮 */
+.modal-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+/* 键盘弹出时固定在键盘上方 */
+.modal-footer--float {
+  position: fixed;
+  left: 0;
+  right: 0;
+  padding: 12rpx 40rpx 16rpx;
+  background: #fff;
+  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
+  z-index: 1001;
+}
+
+.confirm-btn {
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e34d59, #f87171);
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 24rpx rgba(227, 77, 89, 0.3);
+}
+
+.confirm-btn.disabled {
+  background: #e7e7e7;
+  box-shadow: none;
+}
+
+.confirm-text {
+  font-size: 32rpx;
+  line-height: 44rpx;
+  font-weight: 600;
+  color: #fff;
+}
+
+.confirm-btn.disabled .confirm-text {
+  color: #a6a6a6;
+}
+
+.confirm-btn--hover {
+  opacity: 0.85;
+}
+
+.cancel-btn {
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cancel-text {
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: #a6a6a6;
+}
+
+.cancel-btn--hover .cancel-text {
+  color: #5e5e5e;
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.ts
@@ -0,0 +1,39 @@
+Component({
+  properties: {
+    /** 是否显示 */
+    visible: {
+      type: Boolean,
+      value: true,
+    },
+    /** 跳转目标页面 */
+    targetUrl: {
+      type: String,
+      value: '/pages/chat/chat',
+    },
+    /** 可选：携带客户 ID 参数 */
+    customerId: {
+      type: String,
+      value: '',
+    },
+    /** 距底部距离（rpx），TabBar 页面用 200，非 TabBar 页面用 120 */
+    bottom: {
+      type: Number,
+      value: 200,
+    },
+  },
+
+  methods: {
+    onTap() {
+      let url = this.data.targetUrl
+      if (this.data.customerId) {
+        url += `?customerId=${this.data.customerId}`
+      }
+      wx.navigateTo({
+        url,
+        fail: () => {
+          wx.showToast({ title: '页面跳转失败', icon: 'none' })
+        },
+      })
+    },
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.wxml
@@ -0,0 +1,14 @@
+<!-- AI 悬浮对话按钮 — SVG 机器人 + 渐变流动背景 -->
+<view
+  class="ai-float-btn-container"
+  wx:if="{{visible}}"
+  style="bottom: {{bottom}}rpx"
+  bindtap="onTap"
+>
+  <view class="ai-float-btn">
+    <!-- 高光叠加层 -->
+    <view class="ai-float-btn-highlight"></view>
+    <!-- 机器人 SVG（小程序用 image 引用） -->
+    <image class="ai-icon-svg" src="/assets/icons/ai-robot.svg" mode="aspectFit" />
+  </view>
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-float-button/ai-float-button.wxss
@@ -0,0 +1,56 @@
+/* AI 悬浮按钮 — 忠于 H5 原型：渐变流动背景 + 机器人 SVG */
+/* H5: 56px → 56×2×0.875 = 98rpx */
+
+.ai-float-btn-container {
+  position: fixed;
+  right: 28rpx;
+  z-index: 100;
+}
+
+.ai-float-btn {
+  width: 98rpx;
+  height: 98rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  /* 渐变动画背景 — 忠于 H5 原型 */
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);
+  background-size: 400% 400%;
+  animation: gradientShift 8s ease infinite;
+  box-shadow: 0 8rpx 40rpx rgba(102, 126, 234, 0.4);
+}
+
+.ai-float-btn:active {
+  transform: scale(0.95);
+}
+
+/* 高光叠加层 */
+.ai-float-btn-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+/* 背景渐变流动动画 */
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  25% { background-position: 50% 100%; }
+  50% { background-position: 100% 50%; }
+  75% { background-position: 50% 0%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* SVG 图标 H5: 30px → 52rpx */
+.ai-icon-svg {
+  height: 60rpx;
+  position: relative;
+  z-index: 1;
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.ts
@@ -0,0 +1,38 @@
+Component({
+  options: {
+    styleIsolation: 'shared',
+  },
+
+  /**
+   * ai-inline-icon — 行首 AI 小图标组件
+   *
+   * ## 用法
+   * 1. 在页面/组件的 .json 中注册：
+   *    "ai-inline-icon": "/components/ai-inline-icon/ai-inline-icon"
+   *
+   * 2. 在 WXML 中使用：
+   *    <!-- 固定配色 -->
+   *    <ai-inline-icon color="indigo" />
+   *
+   *    <!-- 页面随机配色（推荐） -->
+   *    <ai-inline-icon color="{{aiColor}}" />
+   *
+   * ## color 可选值
+   *    red | orange | yellow | blue | indigo（默认）| purple
+   *
+   * ## 样式来源
+   *    全局 app.wxss：.ai-inline-icon + .ai-color-*
+   *
+   * ## 页面随机配色初始化（复制到 Page.onLoad）
+   *    const AI_COLORS = ['red','orange','yellow','blue','indigo','purple']
+   *    const aiColor = AI_COLORS[Math.floor(Math.random() * AI_COLORS.length)]
+   *    this.setData({ aiColor })
+   */
+  properties: {
+    /** 颜色系列：red | orange | yellow | blue | indigo | purple */
+    color: {
+      type: String,
+      value: 'indigo',
+    },
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.wxml
@@ -0,0 +1,3 @@
+<view class="ai-inline-icon ai-color-{{color}}">
+  <image class="ai-inline-icon-img" src="/assets/icons/ai-robot-inline.svg" mode="aspectFit" />
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-inline-icon/ai-inline-icon.wxss
@@ -0,0 +1,4 @@
+/* 引入全局 AI 样式 */
+@import "../../app.wxss";
+
+/* 组件内样式继承全局定义 */
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.ts
@@ -0,0 +1,49 @@
+Component({
+  options: {
+    styleIsolation: 'shared',
+  },
+
+  /**
+   * ai-title-badge — 标题行 AI 徽章组件
+   *
+   * ## 用法
+   * 1. 在页面/组件的 .json 中注册：
+   *    "ai-title-badge": "/components/ai-title-badge/ai-title-badge"
+   *
+   * 2. 在 WXML 中使用：
+   *    <!-- 固定配色，默认文字 -->
+   *    <ai-title-badge color="indigo" />
+   *
+   *    <!-- 自定义文字 -->
+   *    <ai-title-badge color="blue" label="AI 建议" />
+   *
+   *    <!-- 页面随机配色（推荐） -->
+   *    <ai-title-badge color="{{aiColor}}" />
+   *
+   * ## color 可选值
+   *    red | orange | yellow | blue | indigo（默认）| purple
+   *
+   * ## label 默认值
+   *    "AI智能洞察"
+   *
+   * ## 样式来源
+   *    全局 app.wxss：.ai-title-badge + .ai-color-*
+   *
+   * ## 页面随机配色初始化（复制到 Page.onLoad）
+   *    const AI_COLORS = ['red','orange','yellow','blue','indigo','purple']
+   *    const aiColor = AI_COLORS[Math.floor(Math.random() * AI_COLORS.length)]
+   *    this.setData({ aiColor })
+   */
+  properties: {
+    /** 颜色系列：red | orange | yellow | blue | indigo | purple */
+    color: {
+      type: String,
+      value: 'indigo',
+    },
+    /** 徽章文字，默认「AI智能洞察」 */
+    label: {
+      type: String,
+      value: 'AI智能洞察',
+    },
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.wxml
@@ -0,0 +1,6 @@
+<view class="ai-title-badge ai-color-{{color}}">
+  <view class="ai-title-badge-icon">
+    <image class="ai-title-badge-icon-img" src="/assets/icons/ai-robot-badge.svg" mode="aspectFit" />
+  </view>
+  <text>{{label}}</text>
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/ai-title-badge/ai-title-badge.wxss
@@ -0,0 +1,4 @@
+/* 引入全局 AI 样式 */
+@import "../../app.wxss";
+
+/* 组件内样式继承全局定义 */
--- a/apps/DEMO-miniprogram/miniprogram/components/banner/banner.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/banner/banner.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/banner/banner.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/banner/banner.ts
@@ -0,0 +1,26 @@
+Component({
+  properties: {
+    /** Banner 主题色 */
+    theme: {
+      type: String,
+      value: 'blue',
+    },
+    /** Banner 标题 */
+    title: {
+      type: String,
+      value: '',
+    },
+    /** 指标列表 [{label, value}] */
+    metrics: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  methods: {
+    /** 背景图加载失败时降级为纯渐变色（CSS 已处理） */
+    onBgError() {
+      // 背景图加载失败，CSS 渐变色自动降级，无需额外处理
+    },
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/banner/banner.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/banner/banner.wxml
@@ -0,0 +1,12 @@
+<view class="banner banner--{{theme}}">
+  <view class="banner-bg"></view>
+  <view class="banner-overlay">
+    <text class="banner-title">{{title}}</text>
+    <view class="banner-metrics">
+      <view class="metric-item" wx:for="{{metrics}}" wx:key="label">
+        <text class="metric-value">{{item.value}}</text>
+        <text class="metric-label">{{item.label}}</text>
+      </view>
+    </view>
+  </view>
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/banner/banner.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/banner/banner.wxss
@@ -0,0 +1,66 @@
+.banner {
+  position: relative;
+  width: 100%;
+  height: 280rpx;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.banner-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* 主题渐变降级（背景图加载失败时） */
+.banner--blue { background: linear-gradient(135deg, #0052d9, #0080ff); }
+.banner--red { background: linear-gradient(135deg, #e34d59, #ff6b6b); }
+.banner--orange { background: linear-gradient(135deg, #ed7b2f, #ffaa44); }
+.banner--pink { background: linear-gradient(135deg, #d94da0, #ff6bcc); }
+.banner--teal { background: linear-gradient(135deg, #00a870, #00d68f); }
+.banner--coral { background: linear-gradient(135deg, #e06c5a, #ff8a7a); }
+.banner--dark-gold { background: linear-gradient(135deg, #8b6914, #c9a227); }
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+}
+
+.banner-title {
+  font-size: var(--font-lg);
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 16rpx;
+}
+
+.banner-metrics {
+  display: flex;
+  gap: 40rpx;
+}
+
+.metric-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.metric-value {
+  font-size: var(--font-2xl);
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.metric-label {
+  font-size: var(--font-xs);
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 4rpx;
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.ts
@@ -0,0 +1,25 @@
+// 自定义底部导航栏 — 非 TabBar 页面模拟系统导航
+Component({
+  properties: {
+    /** 当前激活的 tab: task / board / my */
+    active: {
+      type: String,
+      value: 'board',
+    },
+  },
+
+  methods: {
+    onTap(e: WechatMiniprogram.TouchEvent) {
+      const tab = e.currentTarget.dataset.tab as string
+      if (tab === this.data.active) return
+
+      if (tab === 'task') {
+        wx.switchTab({ url: '/pages/task-list/task-list' })
+      } else if (tab === 'board') {
+        wx.switchTab({ url: '/pages/board-finance/board-finance' })
+      } else if (tab === 'my') {
+        wx.switchTab({ url: '/pages/my-profile/my-profile' })
+      }
+    },
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.wxml
@@ -0,0 +1,39 @@
+<!-- 自定义底部导航栏 — 用于非 TabBar 的看板子页面，SVG icon 忠于 H5 原型 -->
+<view class="tab-bar">
+  <view
+    class="tab-bar-item {{active === 'task' ? 'tab-bar-item--active' : ''}}"
+    bindtap="onTap"
+    data-tab="task"
+  >
+    <image
+      class="tab-bar-icon"
+      src="{{active === 'task' ? '/assets/icons/tab-task-nav-active.svg' : '/assets/icons/tab-task-nav.svg'}}"
+      mode="aspectFit"
+    />
+    <text class="tab-bar-label">任务</text>
+  </view>
+  <view
+    class="tab-bar-item {{active === 'board' ? 'tab-bar-item--active' : ''}}"
+    bindtap="onTap"
+    data-tab="board"
+  >
+    <image
+      class="tab-bar-icon"
+      src="{{active === 'board' ? '/assets/icons/tab-board-nav-active.svg' : '/assets/icons/tab-board-nav.svg'}}"
+      mode="aspectFit"
+    />
+    <text class="tab-bar-label">看板</text>
+  </view>
+  <view
+    class="tab-bar-item {{active === 'my' ? 'tab-bar-item--active' : ''}}"
+    bindtap="onTap"
+    data-tab="my"
+  >
+    <image
+      class="tab-bar-icon"
+      src="{{active === 'my' ? '/assets/icons/tab-my-nav-active.svg' : '/assets/icons/tab-my-nav.svg'}}"
+      mode="aspectFit"
+    />
+    <text class="tab-bar-label">我的</text>
+  </view>
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/board-tab-bar/board-tab-bar.wxss
@@ -0,0 +1,39 @@
+/* 自定义底部导航栏 — 模拟系统 TabBar 外观 */
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 100rpx;
+  background: #ffffff;
+  border-top: 1rpx solid #eeeeee;
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: 50;
+}
+
+.tab-bar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 4rpx;
+}
+
+.tab-bar-icon {
+  width: 44rpx;
+  height: 44rpx;
+}
+
+.tab-bar-label {
+  font-size: 20rpx;
+  color: #8b8b8b;
+}
+
+.tab-bar-item--active .tab-bar-label {
+  color: #0052d9;
+  font-weight: 500;
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.ts
@@ -0,0 +1,30 @@
+Component({
+  properties: {
+    tag: {
+      type: String,
+      value: '',
+    },
+    category: {
+      type: String,
+      value: 'primary',
+    },
+    emoji: {
+      type: String,
+      value: '',
+    },
+    title: {
+      type: String,
+      value: '',
+    },
+    source: {
+      type: String,
+      value: '',
+    },
+    content: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {},
+  methods: {},
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.wxml
@@ -0,0 +1,14 @@
+<view class="clue-item">
+  <view class="clue-tag clue-tag-{{category}}">
+    <text class="clue-tag-text">{{tag}}</text>
+  </view>
+  <view class="clue-content">
+    <view class="clue-text-container">
+      <text class="clue-text"><text class="clue-emoji">{{emoji}}</text> {{title}}</text>
+      <text class="clue-source">{{source}}</text>
+    </view>
+  </view>
+  <view class="clue-desc" wx:if="{{content}}">
+    <text class="clue-desc-text">{{content}}</text>
+  </view>
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/clue-card/clue-card.wxss
@@ -0,0 +1,122 @@
+.clue-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 18rpx;
+  padding: 22rpx;
+  background: #fafafa;
+  border-radius: 22rpx;
+  border: 2rpx solid var(--color-gray-4);
+}
+
+.clue-tag {
+  width: 72rpx;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6rpx;
+  flex-shrink: 0;
+}
+
+.clue-tag-text {
+  font-size: 22rpx;
+  line-height: 1.3;
+  font-weight: 500;
+  text-align: center;
+  white-space: pre-line;
+}
+
+/* VI 规范 2.1 六种客户标签配色 */
+/* 客户基础 — 蓝色 */
+.clue-tag-primary {
+  background: rgba(0, 82, 217, 0.10);
+  color: #0052d9;
+}
+
+/* 消费习惯 — 绿色 */
+.clue-tag-success {
+  background: rgba(0, 168, 112, 0.10);
+  color: #00a870;
+}
+
+/* 玩法偏好 — 橙色 */
+.clue-tag-orange {
+  background: rgba(237, 123, 47, 0.12);
+  color: #ed7b2f;
+}
+
+/* 促销偏好 — 金色 */
+.clue-tag-gold {
+  background: rgba(251, 191, 36, 0.15);
+  color: #d4920a;
+}
+
+/* 社交关系 — 紫色 */
+.clue-tag-purple {
+  background: rgba(123, 97, 255, 0.10);
+  color: #7b61ff;
+}
+
+/* 重要反馈 — 红色 */
+.clue-tag-error {
+  background: rgba(227, 77, 89, 0.10);
+  color: #e34d59;
+}
+
+/* 粉色（社交关系别名） */
+.clue-tag-pink {
+  background: rgba(233, 30, 99, 0.10);
+  color: #e91e63;
+}
+
+/* warning 别名（促销偏好） */
+.clue-tag-warning {
+  background: rgba(251, 191, 36, 0.15);
+  color: #d4920a;
+}
+
+.clue-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.clue-text-container {
+  position: relative;
+  height: 72rpx;
+  overflow: hidden;
+  line-height: 36rpx;
+}
+
+.clue-emoji {
+  font-size: 28rpx;
+}
+
+.clue-text {
+  font-size: 26rpx;
+  line-height: 36rpx;
+  color: var(--color-gray-13);
+  word-break: break-all;
+}
+
+.clue-source {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  color: var(--color-gray-7);
+  white-space: nowrap;
+  background: linear-gradient(to left, #fafafa 70%, transparent);
+  padding-left: 50rpx;
+  z-index: 1;
+}
+
+.clue-desc {
+  line-height: 30rpx;
+}
+
+.clue-desc-text {
+  font-size: 22rpx;
+  color: var(--color-gray-9);
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.ts
@@ -0,0 +1,81 @@
+/**
+ * coach-level-tag 助教等级标签组件
+ * 基于 VI 设计系统 §5 助教等级配色
+ *
+ * 用法：
+ *   <coach-level-tag level="star" />
+ *   <coach-level-tag level="{{detail.level}}" bgColor="rgba(255,255,255,0.15)" shadowColor="rgba(0,0,0,0.6)" />
+ *
+ * 属性：
+ *   level:       'star' | 'senior' | 'middle' | 'junior'（英文 key）
+ *   bgColor:     半透明背景色，默认 '' (使用 CSS 各等级默认色)
+ *   shadowColor: 文字阴影颜色，默认 '' (使用 CSS 默认 rgba(0,0,0,1))
+ */
+
+const LEVEL_MAP: Record<string, { cls: string; label: string }> = {
+  star:   { cls: 'level-star',   label: '⭐ 星级' },
+  senior: { cls: 'level-senior', label: '高级' },
+  middle: { cls: 'level-middle', label: '中级' },
+  junior: { cls: 'level-junior', label: '初级' },
+  // 兼容旧中文 key，过渡期保留
+  '星级': { cls: 'level-star',   label: '⭐ 星级' },
+  '高级': { cls: 'level-senior', label: '高级' },
+  '中级': { cls: 'level-middle', label: '中级' },
+  '初级': { cls: 'level-junior', label: '初级' },
+}
+
+Component({
+  properties: {
+    /** 等级 key：star | senior | middle | junior */
+    level: {
+      type: String,
+      value: '',
+      observer(this: any, val: string) {
+        this._updateStyle()
+      },
+    },
+    /** 自定义半透明背景色，例如 "rgba(255,255,255,0.15)"，留空使用默认 */
+    bgColor: {
+      type: String,
+      value: '',
+      observer(this: any) {
+        this._updateStyle()
+      },
+    },
+    /** 自定义文字阴影颜色，例如 "rgba(0,0,0,0.4)"，留空使用默认 */
+    shadowColor: {
+      type: String,
+      value: '',
+      observer(this: any) {
+        this._updateStyle()
+      },
+    },
+  },
+
+  data: {
+    cls: 'level-junior',
+    label: '',
+    tagStyle: '',
+  },
+
+  methods: {
+    _updateStyle(this: any) {
+      const val = this.data.level
+      const info = LEVEL_MAP[val] ?? { cls: 'level-junior', label: val }
+      const styles: string[] = []
+      if (this.data.bgColor)     styles.push(`background:${this.data.bgColor}`)
+      if (this.data.shadowColor) styles.push(`text-shadow:0 0 6rpx ${this.data.shadowColor}`)
+      this.setData({
+        cls: info.cls,
+        label: info.label,
+        tagStyle: styles.join(';'),
+      })
+    },
+  },
+
+  lifetimes: {
+    attached(this: any) {
+      this._updateStyle()
+    },
+  },
+})
--- a/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.wxml
+++ b/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.wxml
@@ -0,0 +1,4 @@
+<!-- coach-level-tag 助教等级标签 -->
+<view class="coach-level-tag-v">
+  <text class="coach-level-tag {{cls}}" style="{{tagStyle}}">{{label}}</text>
+</view>
--- a/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.wxss
+++ b/apps/DEMO-miniprogram/miniprogram/components/coach-level-tag/coach-level-tag.wxss
@@ -0,0 +1,42 @@
+/* coach-level-tag 助教等级标签组件样式
+ * 基于 VI 设计系统 §5 助教等级配色
+ */
+
+ .coach-level-tag-v {
+  line-height: 32rpx;
+}
+
+.coach-level-tag {
+  display: inline-block;
+  padding: 4rpx 16rpx;
+  border-radius: 24rpx;
+  font-size: 22rpx;
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-weight: 700;
+  text-shadow: 0 0 6rpx rgb(0, 0, 0);
+}
+
+/* ⭐ 星级 — 金黄色 */
+.level-star {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.15);
+}
+
+/* 高级 — 粉色 */
+.level-senior {
+  color: #e91e63;
+  background: rgba(233, 30, 99, 0.12);
+}
+
+/* 中级 — 橙色 */
+.level-middle {
+  color: #ed7b2f;
+  background: rgba(237, 123, 47, 0.12);
+}
+
+/* 初级 — 蓝色 */
+.level-junior {
+  color: #0052d9;
+  background: rgba(0, 82, 217, 0.10);
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/dev-fab/dev-fab.json
+++ b/apps/DEMO-miniprogram/miniprogram/components/dev-fab/dev-fab.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/apps/DEMO-miniprogram/miniprogram/components/dev-fab/dev-fab.ts
+++ b/apps/DEMO-miniprogram/miniprogram/components/dev-fab/dev-fab.ts
@@ -0,0 +1,28 @@
+/**
+ * 开发调试浮动按钮组件
+ *
+ * 仅在 develop 环境下显示，点击跳转到 dev-tools 页面。
+ * 使用 movable-view 实现可拖拽。
+ */
+Component({
+  data: {
+    visible: false,
+    x: 580,  // 初始位置：右下角附近（rpx 换算后的 px 近似值）
+    y: 1100,
+  },
+
+  lifetimes: {
+    attached() {
+      // 仅 develop 环境显示
+      const accountInfo = wx.getAccountInfoSync()
+      const env = accountInfo.miniProgram.envVersion
+      this.setData({ visible: env === "develop" })
+    },
+  },
+
+  methods: {
+    goDevTools() {
+      wx.navigateTo({ url: "/pages/dev-tools/dev-tools" })
+    },
+  },
+})
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M6 9a3 3 0 013-3h14a3 3 0 013 3v11a3 3 0 01-3 3h-5l-5 4v-4H9a3 3 0 01-3-3V9z" stroke="#00a870" stroke-width="2" fill="none"/><path d="M10.5 12.5h11" stroke="#00a870" stroke-width="1.6" stroke-linecap="round" opacity="0.6"/><path d="M10.5 16h7" stroke="#00a870" stroke-width="1.6" stroke-linecap="round" opacity="0.6"/><path d="M27 5l1 2.5 2.5 1-2.5 1L27 12l-1-2.5L23.5 8.5l2.5-1L27 5z" fill="#00a870"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M12.5 10.5A11 11 0 1023.5 10.5" stroke="#e34d59" stroke-width="2.2" stroke-linecap="round" fill="none"/><path d="M18 7v10" stroke="#e34d59" stroke-width="2.4" stroke-linecap="round"/><circle cx="18" cy="23" r="2" fill="#e34d59" opacity="0.25"/></svg>`