20260624214849

code/app/app-rn/.workbuddy/memory/2026-06-24.md

@@ -0,0 +1,69 @@
+## 2026-06-24
+
+- 改进登录页 loading 交互：
+  - 创建 `src/hooks/useLoading.ts`：基于 sonner-native 的 toast.loading / toast.success / toast.error / toast.dismiss 封装，提供 `startLoading`、`stopLoading`、`withLoading` 和 `isLoading` 状态。
+  - 创建 `src/components/LoadingOverlay.tsx`：全屏半透明遮罩，`pointerEvents="auto"` 在 loading 时拦截页面所有点击事件。
+  - 重写 `src/app/(main)/auth/login.tsx`：
+    - 移除按钮级 Spinner 和 `loading` state。
+    - 微信/QQ/测试登录全部使用 `useLoading` 的 `startLoading`/`stopLoading`。
+    - Loading 时页面禁止点击（通过 `LoadingOverlay` 实现）。
+    - 错误信息统一用 `toast.error` 显示，避免使用按钮级 loading。
+  - 三轮迭代优化 `src/components/layout/tabbar.tsx` 中心按钮突起效果：
+    - V1（球面版）：64×64 三色强渐变 + 白色底座 + 高光 → 过于突兀复杂。
+    - V2（极简版）：48×48 纯色 #5FAF7B + 浅阴影 → 太扁平，无突起感。
+    - V3（现代分层版，最终）：50×50、top:-6、两色微渐变（#6CC587→#4D9E6A）、1.5px 白色窄边收光、底部投影椭圆、悬浮阴影（elevation:8 / shadowRadius:12 / opacity:0.12）。参考 Dimensional Layering + Soft UI Evolution 风格，有突起感但克制不过度。
+  - V6（全量重构）：用户反馈多次微调后仍不满意，决定从头重构整个 tabbar 组件。
+    - 设计系统：参考 Apple Bento Grid 风格——20px 圆角白色条、极轻阴影、干净克制。
+    - 常量驱动：ICON_SIZE=20、LABEL_SIZE=10、BAR_HEIGHT=56、BAR_RADIUS=20、CENTER_SIZE=44、CENTER_LIFT=-5、COLOR_ACTIVE=#10B981、COLOR_IDLE=#9CA3AF。
+    - 大改动：
+      - tabbar：圆角 999→20，不要胶囊形，更像 Apple 风格浮动条。shadow 从多层降为单层。
+      - 普通 TabItem：icon 24→20，label 10px，间距 2px。选中态线宽加粗（strokeWidth 2.2 vs 1.8），视觉权重自然。
+      - CenterButton：去掉 LinearGradient（纯色更适合工具类），44×44 纯色 #10B981 圆钮 + 同色系阴影（shadowColor=#10B981，opacity 0.35），top:-5 微突起。保留脉冲动画。
+      - 统一 color 常量在文件顶部，后续调色改一处即可。
+    - 去掉 expo-linear-gradient 依赖（不再使用渐变）。
+  - V7（阴影调整失败，V8 重构）：
+    - 尝试用 `react-native-shadow-2` 的 `Shadow` 组件模仿 navbar 弥散阴影，导致 tabbar 渲染/样式完全错误。回退到原生阴影。
+    - V8（Soft UI Evolution）：参考 ui-ux-pro-max 搜索结果的 Soft UI Evolution 风格——极轻阴影、微妙深度。
+    - 移除 `react-native-shadow-2` 依赖。shadowColor 统一用 `#000`，bar: shadowOpacity 0.06 / elevation 2 / shadowRadius 10；中心按钮外圈白色（58×58）+ 内圈绿色（52×52），外圈投影 shadowOpacity 0.08 / elevation 3。
+    - CENTER_SIZE 44→52，CENTER_LIFT -5→-8，LABEL_SIZE 10→11，BAR_RADIUS 20→16。
+    - 中心按钮结构：外圈白色圆（bar 相同材质）+ 内圈绿色圆，产生"从 bar 表面隆起"的自然嵌套感。不再使用绿色色感阴影。
+    - V9（统一 shadow-2xl）：
+      - bar 阴影：去掉手动 shadow 属性，改用 NativeWind `shadow-2xl`（与 navbar 的 groupShadow/titleShadown 一致）。
+      - 中心按钮：完全去掉阴影（centerOuter 无任何 shadow/elevation），纯白色外圈 + 绿色内圈，干净利落。
+    - V10（比例协调优化）：
+      - 问题：52×52 绿色面积太大，22px icon 占比仅 42%，显得空。
+      - 调整：CENTER_SIZE 52→42（绿色区域缩小 19%），CENTER_ICON 22→24（icon 增大），icon/绿色面积比从 42%→57%。
+      - 外圈 ring 从 3px→4px 常量化（CENTER_RING=4），外圈整体 50×50。
+      - CENTER_LIFT -8→-5，不飞太高。
+    - V11（极简嵌入）：
+      - 方向转变：不再向上突起，中心按钮嵌入 bar 内居中，纯粹靠颜色区分。
+      - 去掉白色外圈结构，简化为单层 40×40 纯色绿色圆。
+      - icon 24，icon:button 直径比 60%（24/40），视觉饱满。
+      - centerSlot 改为 justifyContent: "center"，按钮在 56px bar 内垂直居中，和其他 tab 同一基线。
+      - 保留脉冲动画和弹性按压缩放。
+    - V12（极简化，最终）：
+      - 用户决定完全放弃中心突起效果。移除整个 `CenterButton` 组件（含 pulse 呼吸动画、弹性回弹、绿色背景、白圈等）。
+      - 中心 tab 复用普通 `TabItem`，与其他 tab icon/label/尺寸完全一致。
+      - 通过 `showMarker={tab.isCenter}` 在标签下方渲染一个 4×4 小圆点作为"中间标志"，颜色跟随选中态（绿/灰）。
+      - 清理 `withRepeat`、`Easing` import。移除 `centerSlot`、`centerButton` 样式。
+      - 最终：用户反复调整中心 tab 的突起/标记/背景效果均不满意，最终全部去掉，五个 tab 完全一致，不再区分 center。`isCenter` 字段保留在类型中但组件不再读取。
+- 重构首页 `src/app/(main)/(tabs)/home/index.tsx`：
+  - 快捷工具从列表布局改为**宫格布局**（3列 grid），icon 在上 + title 在下。
+  - GridItem: 白色圆角卡片 `rounded-2xl` + `shadow-sm`，icon 区域 44×44 浅绿底（`#10B98118`），title 13px 灰色。
+  - 外容器白卡包裹所有宫格 cell，统一圆角和间距（gap-2.5, p-3）。
+  - 统一设计语言：所有区域卡片均用 `rounded-2xl shadow-sm`（16px 圆角 + 统一阴影）。
+  - SectionTitle 复用为组件：左侧绿色竖条 + uppercase 灰色标题。
+  - 最近动态也包入白卡，时间轴线条统一 `#E5E7EB`，空状态中心展示。
+  - 统一颜色常量 `GREEN = "#10B981"`，用于全部 accent 色。
+    - V13（微背景高亮，最终）：
+      - 用户认为小圆点不协调。
+      - 去掉小圆点，改为中心 tab 背景包裹层微背景：
+      - `showMarker` tab 使用 `centerBg` 包裹 icon+label。
+      - 未选中：`rgba(16, 185, 129, 0.06)`（极淡绿，几乎不可见）。
+      - 选中：`rgba(16, 185, 129, 0.12)`（微微加深，隐约可见）。
+      - padding 12×6，borderRadius 12。不突兀，仅靠颜色暗示"这个 tab 是特殊的"。
+
+- 用户明确要求不使用视觉常量（const GREEN 等），全部使用 Tailwind CSS 类。
+  - GridItem 的 Icon 不设置 color prop，使用默认颜色。
+  - 头部布局重构：问候语和辅助文字放一行，空间名单行，大数字和"天"放一行，时分秒单独一行，更紧凑不分散。字体缩小（24px 空间名 / 40px 数字）。
+- 首页重构：删除时间计时和问候语，仅保留家庭名称居中显示 (28px bold centered)。时间轴点改为 heroui-native Avatar，匹配 activities 页风格。时间轴列宽 10→28px，内容间距 pb-4→pb-6。