jiaolongzhen/AI-Health
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
335a3e64403a52c100a2ca582e470bb6a7f6109d
AI-Health/docs/superpowers/plans/2026-07-06-ui-system-first-pass.md
MingNian 1c020b8ae5 feat: UI 系统中心化 + 趋势图重构 + 法律文档 H5 上线 
- UI 系统: 新增 design_tokens / module_visuals / app_buttons / app_status_badge / app_toast / ai_content 六个共享模块; 28 个页面接入, SnackBar 全部替换为 AppToast
- 趋势图: 直线折线 + 渐变填充 + 阴影; 去网格线; X 轴日+月份分隔; Y 轴整数刻度最多 4 个; 点击数据点/录入记录显示上方浮层, 选中点变实心
- 法律文档 H5: 后端 wwwroot 托管隐私政策/服务协议/关于/个人信息收集清单/第三方 SDK 清单 + 索引页; Program.cs 启用 UseDefaultFiles + UseStaticFiles
- 其他: auth_provider 登录流程调整; api_client IP 适配; 主页智能体栏间距优化
2026-07-08 21:25:07 +08:00

4.7 KiB
Raw Blame History

UI System First Pass Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Build the first pass of the app-wide UI system and migrate the highest-impact frontend surfaces to the agreed typography, color, icon, layout, button, feedback, and AI content rules.

Architecture: Centralize design decisions in token and common widget files, then migrate pages by replacing local hardcoded visuals with shared module visuals and components. Keep this pass focused on visible consistency and maintainability without adding the full accessibility-mode feature yet.

Tech Stack: Flutter, Riverpod, shadcn_ui Lucide icons, flutter_markdown.

Task 1: Design Tokens And Common Widgets

Files:

  • Modify: health_app/lib/core/app_colors.dart

  • Modify: health_app/lib/core/app_theme.dart

  • Create: health_app/lib/core/app_design_tokens.dart

  • Create: health_app/lib/core/app_module_visuals.dart

  • Create: health_app/lib/widgets/app_buttons.dart

  • Create: health_app/lib/widgets/app_status_badge.dart

  • Create: health_app/lib/widgets/app_toast.dart

  • Create: health_app/lib/widgets/ai_content.dart

  • Add typography, spacing, radius, shadow, module color, and module icon tokens.

  • Add reusable gradient-outline button and module-aware buttons.

  • Add top-center toast helper for light feedback.

  • Add shared AI Markdown renderer and plain text cleaner.

  • Run flutter analyze.

Task 2: AI Conversation And Cards

Files:

  • Modify: health_app/lib/pages/home/widgets/chat_messages_view.dart

  • Modify: health_app/lib/pages/home/home_page.dart

  • Apply shared AI content renderer to AI bubbles.

  • Normalize user bubble, AI bubble, attachments, AI generated note, and Markdown typography.

  • Update intelligent agent visuals to use shared module icons and colors, including dumbbell for exercise and pill for medication.

  • Preserve gradient-outline white-background buttons in agent welcome cards.

  • Keep today health card gradient outline and ensure empty medication windows still show a light status.

  • Run flutter analyze lib/pages/home/widgets/chat_messages_view.dart lib/pages/home/home_page.dart.

Task 3: Sidebar

Files:

  • Modify: health_app/lib/widgets/health_drawer.dart

  • Keep current structure: user header, health dashboard, common functions, conversation records.

  • Convert user header to no-frame layout with settings on the right.

  • Keep health dashboard as a light panel.

  • Convert common functions to a two-column light matrix without heavy per-item cards.

  • Keep conversation records as lightweight rows with summary left and date right.

  • Run flutter analyze lib/widgets/health_drawer.dart.

Task 4: Core Management Pages

Files:

  • Modify: health_app/lib/widgets/enterprise_widgets.dart

  • Modify: health_app/lib/pages/medication/medication_list_page.dart

  • Modify: health_app/lib/pages/medication/medication_checkin_page.dart

  • Modify: health_app/lib/pages/remaining_pages.dart

  • Modify: health_app/lib/pages/report/report_pages.dart

  • Modify: health_app/lib/pages/report/ai_analysis_page.dart

  • Modify: health_app/lib/pages/notifications/notification_center_page.dart

  • Update summary panels to avoid repeating page titles and reduce icon emphasis.

  • Apply module colors and Lucide icons to medication, exercise, reports, and notifications.

  • Apply shared AI content renderer to report AI text to prevent visible raw Markdown markers such as **.

  • Normalize list title/subtitle/tag sizes and row heights.

  • Run targeted flutter analyze on modified files.

Task 5: Profile, Health Archive, Diet, Device

Files:

  • Modify: health_app/lib/pages/profile/profile_page.dart

  • Modify: health_app/lib/pages/remaining_pages.dart

  • Modify: health_app/lib/pages/diet/diet_capture_page.dart

  • Modify: health_app/lib/pages/device/device_management_page.dart

  • Modify: health_app/lib/widgets/ble_sync_dialog.dart

  • Use two-column short-field layout where appropriate in profile/health archive surfaces already in scope.

  • Apply module tokens to diet and device surfaces.

  • Improve Bluetooth/device panels with shared radius, typography, and module colors.

  • Replace obvious bottom SnackBar style feedback in touched flows with top-center toast where low-risk.

  • Run targeted flutter analyze on modified files.

Task 6: Full Verification

Files:

  • Test: health_app

  • Run flutter analyze.

  • If available and practical, run a smoke test or build command for the Flutter app.

  • Summarize changed files and any deferred surfaces.