提示信息
# 页面规范审计报告
本项目已完成核心 UI 适配，严格遵循 `docs/组件库.html` 的极简主义设计规范。以下是全站页面的审计结果以及与组件库的设计映射。
---
## 1. 全站页面审计清单 (Full Page Audit)
| 页面名称 | 文件路径 | 状态 | 核心适配说明 |
| :--- | :--- | :--- | :--- |
| **启动页** | `lib/features/splash/splash_page.dart` | ✅ | 已对齐极简背景与 Logo 比例 |
| **隐私协议** | `lib/features/privacy/privacy_page.dart` | ✅ | 已适配主题卡片、投影与主按钮 |
| **登录页** | `lib/features/auth/login_page.dart` | ✅ | 已适配标准输入框与投影 |
| **主页壳层** | `lib/features/main/main_shell_page.dart` | ✅ | 下栏图标已根据极简规范对齐 |
| **信号广场 (Tab)** | `lib/features/main/tabs/signal_tab.dart` | ✅ | 卡片圆角动态适配 |
| **消息列表 (Tab)** | `lib/features/main/tabs/messages_tab.dart` | ✅ | 移除硬编码颜色，对齐 Cell 规范 |
| **个人中心 (Tab)** | `lib/features/main/tabs/profile_tab.dart` | ✅ | 已使用 AppCell 分组架构 |
| **发布信号** | `lib/features/signal/publish_signal_page.dart` | ✅ | 移除分类色彩，对齐黑白极简 |
| **会话/聊天页** | `lib/features/chat/chat_page.dart` | ✅ | 气泡圆角与高对比度配色已适配 |
| **聊天设置** | `lib/features/chat/chat_settings_page.dart` | ✅ | 全面使用 AppCell 规范 |
| **信号详情** | `lib/features/signal/signal_detail_page.dart` | ✅ | 已修复按钮投影与背景色 |
| **信号收件箱** | `lib/features/signal/signal_inbox_page.dart` | ✅ | 对齐消息列表规范 |
| **用户主页** | `lib/features/user/user_profile_page.dart` | ✅ | 间距与卡片规范已对齐 |
| **编辑资料** | `lib/features/profile/edit_profile_page.dart` | ✅ | 输入框与表单对齐 |
| **实名认证** | `lib/features/verification/verification_page.dart` | ✅ | 已集成标准 ID 卡键盘 |
| **系统设置** | `lib/features/settings/settings_page.dart` | ✅ | 全面采用 AppCell 分组 |
| **显示设置** | `lib/features/settings/display_settings_page.dart` | ✅ | 包含主题预览，符合规范 |
| **账号与安全** | `lib/features/settings/account_security_page.dart` | ✅ | 单元格对齐 |
| **隐私设置** | `lib/features/settings/privacy_settings_page.dart` | ✅ | 单元格对齐 |
| **黑名单管理** | `lib/features/settings/blacklist_page.dart` | ✅ | 列表项标准化 |
| **青少年模式** | `lib/features/settings/youth_mode_page.dart` | ✅ | 内容排版对齐 |
| **关于我们** | `lib/features/settings/about_page.dart` | ✅ | Logo 与按钮对齐 |
| **存储管理** | `lib/features/settings/cache_management_page.dart` | ✅ | 精简模式适配 |
| **商城首页** | `lib/features/shop/shop_page.dart` | ✅ | 卡片与价格字体对齐 |
| **商品详情** | `lib/features/shop/product_detail_page.dart` | ✅ | 底部操作栏对齐 |
| **举报页面** | `lib/features/report/report_page.dart` | ✅ | 适配语义化 Token |
---
## 2. 组件库设计映射 (Design to Code Mapping)
依据 `组件库.html` 的五个主要章节，以下是 HTML 组件与 Flutter 对应文件的详细映射。
### 1. 基础规范 (Foundation)
- **边距与留白 (Spacing)**: `lib/theme/app_spacing.dart` (AppSpacing 类)
- **品牌配色 (Colors)**: `lib/theme/app_colors.dart` (AppColors 类与 AppColorsExt 扩展)
- **分割线 (AppDivider)**: `lib/widgets/app_divider.dart`
### 2. 导航与结构 (Navigation & Structure)
- **顶部导航 (AppNavBar)**: `lib/widgets/nav/app_nav_bar.dart`
- **透明/沉浸式导航**: `lib/widgets/nav/app_transparent_nav_bar.dart`
- **主底部导航**: `lib/widgets/nav/app_bottom_nav_bar.dart`
- **搜索导航栏**: `lib/widgets/nav/app_search_nav_bar.dart`
- **聊天导航栏**: `lib/widgets/nav/app_chat_nav_bar.dart`
- **聊天底部输入栏**: `lib/features/chat/widgets/chat_input_bar.dart`
### 3. 列表与数据展示 (Lists & Display)
- **列表视图 (AppListView)**: `lib/widgets/app_list_view.dart`
- **标准单元格 (AppCell)**: `lib/widgets/app_cell.dart`
- **头像系统 (CustomAvatar)**: `lib/widgets/custom_avatar.dart`
- **徽章 (AppBadge)**: `lib/widgets/app_badge.dart`
- **标签排版 (AppTag)**: `lib/widgets/app_tag.dart`
- **聊天气泡 (ChatBubble)**: `lib/features/chat/widgets/chat_bubble.dart`
- **语音条 (VoicePill)**: `lib/features/chat/widgets/chat_voice_pill.dart`
### 4. 交互反馈与骨架 (Feedback & States)
- **侧滑操作 (AppSwipeCell)**: `lib/widgets/app_swipe_cell.dart`
- **骨架屏 (AppSkeleton)**: `lib/widgets/app_skeleton.dart`
- **缺省页 (AppEmptyState)**: `lib/widgets/app_empty_state.dart`
- **轻提示 (AppToast)**: `lib/widgets/app_toast.dart`
- **标准弹窗 (AppDialog)**: `lib/widgets/app_dialog.dart`
- **功能菜单 (AppActionSheet)**: `lib/widgets/app_action_sheet.dart`
- **全局加载 (AppLoading)**: `lib/widgets/app_loading.dart`
### 5. 表单与录入 (Form & Entry)
- **标准输入框 (AppInput)**: `lib/widgets/app_input.dart`
- **复选框 (AppCheckbox)**: `lib/widgets/app_checkbox.dart`
- **单选框 (AppRadio)**: `lib/widgets/app_radio.dart`
- **开关 (AppSwitch)**: `lib/widgets/app_switch.dart`
- **数字键盘 (AppIdCardKeyboard)**: `lib/widgets/app_id_card_keyboard.dart`
- **胶囊按钮 (AppCapsuleButton)**: `lib/widgets/app_capsule_button.dart`
- **主操作按钮**: `lib/widgets/primary_action_button.dart`
---
## 3. 设计一致性备注 (375px 对齐方案)
> [!TIP]
> **关于 375px 宽度对齐**：
> 由于 HTML 组件库基于 375px 视口设计，Flutter 中的逻辑像素（Logical Pixels）与 HTML 中的像素（px）是 1:1 对应的。
> - 在 `ComponentShowcasePage` 中，我们建议在大屏预览时使用 `375px` 的 `ConstrainedBox` 以模拟移动端真实布局效果。
> - 所有的 `AppSpacing.md` (16px) 对应 HTML 中的 `m-md` (16px)，无需人工二次换算。
**审计人**: Antigravity
**更新日期**: 2026-03-20