docs: 新增 UI 主题与图标资源文档

AGENTS.md

@@ -73,6 +73,7 @@ harmony-client/
 | 测试 Testing | `docs/testing.md` |
 | 构建/签名/部署 Build & Deploy | `docs/build-deploy.md` |
 | 分支模型与 Git 规范 Git Workflow | `docs/git-workflow.md` |
+| UI 主题与图标 Theme & Icons | `docs/ui-theme.md` |
 
 ## Common Tasks
 

docs/ui-theme.md

@@ -0,0 +1,34 @@
+# UI 主题与图标资源
+
+> 品牌视觉对齐「明缘云道场」微信小程序（`wechat-clock-mini`）。
+> 色值 token 定义在 `uikit/src/main/ets/theme/Theme.ets`（`AppColor`），组件内禁止散落魔法值。
+
+## 品牌色板
+
+| Token | 值 | 用途 |
+|---|---|---|
+| `primary` | `#C67B30` | 品牌主色（金） |
+| `textPrimary` | `#2C1810` | 主文本（深棕） |
+| `textSecondary` | `#5A4A3A` | 次文本（暖棕） |
+| `background` | `#FDFBF7` | 页面背景（米白） |
+| `tabBg` | `#FFFFFF` | 底部导航背景 |
+| `tabInactive` | `#5A4A3A` | 底部导航未选中 |
+| `tabActive` | `#C67B30` | 底部导航选中（金） |
+
+## 底部导航图标
+
+四 tab（首页 / 打卡 / 计划 / 我的）入口在 `entry/src/main/ets/pages/Index.ets`，图标来源是小程序 `wechat-clock-mini/assets/tabbar/` 的 8 张 PNG，已复制到 `entry/src/main/resources/base/media/`（`-active` 重命名为 `_active` 以符合资源名规范）：
+
+| tab | 普通 | 选中 |
+|---|---|---|
+| 首页 | `home.png` | `home_active.png` |
+| 打卡 | `checkin.png` | `checkin_active.png` |
+| 计划 | `plan.png` | `plan_active.png` |
+| 我的 | `profile.png` | `profile_active.png` |
+
+关键决策与实现约定：
+
+- **选中态 = 换文件，不用 `fillColor` 着色。** `-active` 与普通版是同一图形、仅填充色不同（`#5A4A3A` → `#C67B30`）；`Image.fillColor` 对 PNG 无效且会压平抗锯齿，故按选中态切换 `Image` 资源。
+- **复用小程序的真实 PNG，保证像素级一致**，而非像 `android-client`（另一小程序客户端）那样用 Material 图标近似。`android-client` 可作为结构参考，但非像素级对齐。
+- **尺寸**：24×24 vp，`objectFit(ImageFit.Contain)` 保留图标自带透明留白，缩放后与小程序观感一致。
+- **主题无需改动**：`tabInactive/tabActive/tabBg` 已与小程序 `app.json` 的 `tabBar.color/selectedColor/backgroundColor` 完全一致。

entry/src/main/ets/pages/Index.ets

@@ -17,22 +17,22 @@ struct Index {
       TabContent() {
         HomePage({ onGoLogin: () => { this.currentIndex = 3; } })
       }
-      .tabBar(this.tabBarBuilder(0, '首页', '🏠'))
+      .tabBar(this.tabBarBuilder(0, '首页', $r('app.media.home'), $r('app.media.home_active')))
 
       TabContent() {
         CheckinPage({ onGoLogin: () => { this.currentIndex = 3; } })
       }
-      .tabBar(this.tabBarBuilder(1, '打卡', '✅'))
+      .tabBar(this.tabBarBuilder(1, '打卡', $r('app.media.checkin'), $r('app.media.checkin_active')))
 
       TabContent() {
         PlanPage({ onGoLogin: () => { this.currentIndex = 3; } })
       }
-      .tabBar(this.tabBarBuilder(2, '计划', '📝'))
+      .tabBar(this.tabBarBuilder(2, '计划', $r('app.media.plan'), $r('app.media.plan_active')))
 
       TabContent() {
         ProfilePage()
       }
-      .tabBar(this.tabBarBuilder(3, '我的', '👤'))
+      .tabBar(this.tabBarBuilder(3, '我的', $r('app.media.profile'), $r('app.media.profile_active')))
     }
     .onChange((index: number) => {
       this.currentIndex = index;
@@ -43,10 +43,12 @@ struct Index {
   }
 
   @Builder
-  tabBarBuilder(index: number, title: string, icon: string) {
+  tabBarBuilder(index: number, title: string, normalIcon: Resource, activeIcon: Resource) {
     Column({ space: 2 }) {
-      Text(icon)
+      Image(index === this.currentIndex ? activeIcon : normalIcon)
-        .fontSize(20)
+        .width(24)
+        .height(24)
+        .objectFit(ImageFit.Contain)
       Text(title)
         .fontSize(AppFontSize.caption)
         .fontColor(index === this.currentIndex ? AppColor.tabActive : AppColor.tabInactive)