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

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。