ca68fe29c7
- 新增模型目录占位文件与翻译类型拆分 - 调整路由配置与桌面端窗口初始化 - 移除多处冗余图表配置项 - 重构右侧面板注册表与三栏布局组件 - 添加智能AppBar、拖拽书签等新功能组件 - 优化安卓编译配置与多平台插件注册 - 新增翻译覆盖率测试与共享组件 - 格式化代码与修复静态分析警告
17 KiB
17 KiB
/// 创建时间: 2026-05-29 /// 更新时间: 2026-05-29 /// 名称: 宽屏适配归档文档 /// 作用: 记录宽屏适配功能的所有视图组件、逻辑事件、动画细节 /// 上次更新内容: 22项增强任务全部完成，追加新增组件和功能
宽屏适配归档文档
第一部分：视图组件清单（精确到每个按钮）
1. AppShell 层
- AdaptiveSplitView 容器组件（左右分屏布局）
- AdaptiveNavBar 垂直导航栏组件（3个Tab：💬闲言/🧭发现/👤我的）
- SplitDivider 可拖拽分割线组件
- SplitDivider 拖拽手柄视觉指示器
- NavBar停靠位置切换（左/右/上/下）
- 宽屏/窄屏断点检测逻辑
- 窄屏时底部 GlassBottomBar 保持
- 宽屏时底部 GlassBottomBar 隐藏
- 鸿蒙端 GlassBottomNavBar 降级适配
- CelebrationOverlay 在分屏模式下的位置
2. 首页（闲言）
- 左侧面板：HomePage 完整内容（句子流列表）
- 左侧面板：HomeOfflineBanner 离线横幅
- 左侧面板：AppBarCharacterSprite 角色精灵(56x56)
- 左侧面板：CharacterTipBubble 提示气泡
- 左侧面板：标题"闲言" + AppBarDateDisplay
- 左侧面板：搜索按钮(CupertinoIcons.search)
- 左侧面板：DailyCard 每日推荐卡片
- 左侧面板：HomeActionButtons 创作卡片+编辑此句按钮
- 左侧面板：SquareHeaderContent 频道标签吸顶区
- 左侧面板：TypeChip 频道标签芯片
- 左侧面板：HomeSentenceListSection 句子列表
- 左侧面板：HomeSentenceCard 句子卡片（含所有按钮）
- AccentBar 3px主题色竖条
- FeedHeader: feedIcon(12px) + feedName + 👁浏览量
- SentenceText 句子文本 + PinyinAnnotationText
- StatsRow: 👍点赞 + ⭐收藏 + 💬评论
- ActionRow: 作者名 + 拼音按钮 + 翻译按钮 + TTS按钮 + 收藏动画 + 点赞动画
- AppSlidable: 左滑分享 / 右滑收藏+稍后读
- 右侧面板：SentenceDetailPanel 句子详情面板（从Sheet重构）
- 来源行：渐变图标(32x32) + feedName + source + 👁浏览量pill
- 统计chips：👍点赞 / ⭐收藏 / 💬评论
- 句子卡片：大引号(48px) + SelectableText
- 作者行：渐变圆形头像(28x28) + 作者名
- 摘要框：💡 + summary
- HTML内容框：📝原文内容 + 左侧accent边框(3px)
- 快捷操作：👍点赞 / ⭐收藏 / 📖稍后读 / ↗️分享
- 次要操作：🔖书签 / 🏷️标签 / 🔍外部搜索 / 🔊朗读 / 📡NFC
- 主操作：✏️编辑此句
- 危险操作：🚫屏蔽 / 🙈不感兴趣
- TtsPlayerBar 语音播放条
- 右侧面板：概览仪表盘（空状态）
- 今日推荐区
- 快捷操作区
- 最近浏览区
- 数据统计区
3. 发现页
- 左侧面板：DiscoverPage 完整内容（会话流列表）
- 左侧面板：Header 标题 + 工具按钮(CupertinoIcons.wrench_fill)
- 左侧面板：SessionSearchBar 搜索栏
- 左侧面板：SessionRow 会话行
- 头像区域(52x52)：emoji头像 + 未读Badge(20x20) + 免打扰图标(14x14)
- 名称行：显示名 + tag标签(pill) + 置顶图标
- 描述行：lastMessage
- 时间行：displayTime
- 箭头：CupertinoIcons.chevron_right
- Slidable：置顶/隐藏
- 长按菜单：置顶/备注/已读/免打扰/隐藏/删除
- 右侧面板：ChatFlowPanel 会话流详情面板
- 导航栏：AdaptiveBackButton + 标题 + 搜索/新建/设置按钮
- ChatFlowSearchBar 搜索栏
- ChatFlowCategoryBar 分类栏(7个标签)
- ChatFlowMessageList 消息列表
- ChatBubble 气泡组件（用户+AI）
- 用户气泡：SpriteAvatar + Tilt倾斜 + 毛玻璃 + 渐变背景 + 双层阴影
- AI气泡：渐变头像(34x34) + 分类渐变背景 + 操作按钮(❤️⭐🎨↗️)
- ChatImageBubble 图片气泡(240px宽)
- ChatAudioBubble 音频气泡(播放按钮+波形图)
- ChatLinkBubble 链接气泡(OG元数据+打开/复制按钮)
- ChatSentenceCardBubble 句子卡片气泡
- ChatFlowInputBar 输入栏
- 附件按钮(36x36, CupertinoIcons.plus)
- 文本输入框
- 富文本按钮(36x36)
- 发送按钮(38x38, CupertinoIcons.arrow_up)
- 回复预览栏
- 快捷分类栏(4个标签)
- 8宫格附件面板
- 右侧面板：概览仪表盘（空状态）
4. 我的页面
- 左侧面板：ProfilePage 完整内容（设置列表）
- 左侧面板：标题栏 + 快捷操作按钮
- 左侧面板：_ProfileHeader 头像(64x64) + 用户名 + LV标签
- 左侧面板：_UserStatsBar 积分/签到/笔记统计
- 左侧面板：设置组1 - 收藏(heart)/历史(clock)/深色模式(moon)
- 左侧面板：设置组2 - 账户(person)/数据(folder)/离线(offline_bolt)/缓存(trash)
- 左侧面板：设置组3 - 语言(globe)/主题(paintbrush)/通用(gear)/桌面组件(widget)/句子来源(text_quote)
- 左侧面板：设置组4 - 关于(info)/评价(star)/调试(bug)
- 右侧面板：各设置项对应面板
- 收藏面板(FavoritePage内容)
- 历史面板(HistoryPage内容)
- 账户设置面板(AccountSettingsPage内容)
- 数据管理面板(DataManagementPage内容)
- 通用设置面板(GeneralSettingsPage内容)
- 主题设置面板(ThemeSettingsPage内容)
- 语言设置面板(LanguageSettingsPage内容)
- 关于面板(AboutPage内容)
- 其他设置面板(按需)
- 右侧面板：概览仪表盘（空状态）
5. 通用设置 - 导航栏位置设置
- 导航栏位置选择器（4选1：左/右/上/下）
- 分屏默认比例滑块（30%-60%）
- 分屏功能开关
6. 引导页宽屏适配
- ResponsiveMaxWidth 包裹引导页内容
- 宽屏下内容自动居中（maxWidth: 700）
- 窄屏下保持原有全宽布局
第二部分：逻辑事件清单（精确到每个状态）
1. SplitView 核心状态
- splitRatioProvider: double（当前分割比例，默认0.4）→ 合并到 SplitViewState
- rightPanelContentProvider: String?（右侧面板内容标识）→ 合并到 SplitViewState
- isSplitViewActiveProvider: bool（是否处于分屏模式）→ 合并到 SplitViewState
- navBarPositionProvider: NavBarPosition（导航栏停靠位置）→ 合并到 SplitViewState
- splitViewEnabledProvider: bool（分屏功能开关）→ 合并到 SplitViewState
- 断点检测：width >= 900 → 分屏模式
- 断点检测：width < 900 → 单屏模式
- 分割线拖拽：onHorizontalDragUpdate → 更新splitRatio
- 分割线拖拽：左侧最小宽度320px保护
- 分割线拖拽：右侧最小宽度400px保护
- 分割线拖拽：HapticFeedback.selectionClick触觉反馈
- 窄屏→宽屏过渡：右侧面板滑入动画
- 宽屏→窄屏过渡：右侧面板滑出动画
- 右侧面板内容切换：FadeTransition过渡
2. 首页分屏逻辑
- 点击句子卡片 → 宽屏：右侧显示SentenceDetailPanel
- 点击句子卡片 → 窄屏：底部Sheet弹出（现有行为）
- 句子详情面板数据加载：FeedService.fetchDetail()
- 句子详情面板交互：点赞 toggleLike（300ms防抖）
- 句子详情面板交互：收藏 toggleFavorite（300ms防抖）
- 句子详情面板交互：稍后读 toggleReadLater
- 句子详情面板交互：分享 ShareSheet
- 句子详情面板交互：书签/标签/外部搜索/朗读/NFC
- 句子详情面板交互：编辑此句 → 跳转编辑器
- 句子详情面板交互：屏蔽/不感兴趣
- 句子详情面板：TTS播放控制
- 左侧列表滚动不影响右侧面板
- 右侧面板滚动不影响左侧列表
- 左右面板手势隔离（NotificationListener）
- 空状态：右侧显示概览仪表盘
3. 发现页分屏逻辑
- 点击会话行 → 宽屏：右侧显示ChatFlowPanel
- 点击会话行 → 窄屏：全屏导航（现有行为）
- ChatFlowPanel数据加载：chatMessagesProvider(conversationId)
- ChatFlowPanel消息发送：_sendAll（文本+附件）
- ChatFlowPanel搜索切换：_toggleSearch
- ChatFlowPanel回复消息：_setReplyTo
- ChatFlowPanel分类筛选：selectCategory
- ChatFlowPanel附件选择：AttachmentGridSheet
- ChatFlowPanel气泡交互：点赞/收藏/制作/分享
- ChatFlowPanel气泡长按：回复/编辑/已阅/删除
- ChatFlowPanel输入栏：键盘管理(KeyboardManager)
- 左侧会话列表滚动不影响右侧
- 右侧聊天面板滚动不影响左侧
- 左右面板手势隔离
- 空状态：右侧显示概览仪表盘
4. 我的页面分屏逻辑
- 点击设置项 → 宽屏：右侧显示对应设置面板
- 点击设置项 → 窄屏：全屏导航（现有行为）
- 设置面板数据加载：各Provider
- 设置面板交互：CupertinoSwitch切换
- 设置面板交互：CupertinoPicker选择
- 设置面板交互：路由跳转子页面
- 左侧设置列表滚动不影响右侧
- 右侧设置面板滚动不影响左侧
- 左右面板手势隔离
- 空状态：右侧显示概览仪表盘
5. 导航栏逻辑
- NavBarPosition.left：垂直导航栏在左侧
- NavBarPosition.right：垂直导航栏在右侧
- NavBarPosition.top：水平导航栏在顶部
- NavBarPosition.bottom：底部导航栏（现有GlassBottomBar）
- 导航栏位置切换动画：AnimatedSwitcher 400ms
- Tab切换：goBranch(index)
- 未读消息红点：chatProvider.unreadCount
- 角色精灵：TabIconSprite动画
- 导航栏设置持久化：KvStorage
第三部分：动画清单（细微变化）
1. SplitView 动画
- 右侧面板滑入：SlideTransition, 350ms, easeInOutCubic, 从右侧滑入
- 右侧面板滑出：SlideTransition, 300ms, easeInOutCubic, 向右侧滑出
- 右侧面板内容切换：FadeTransition, 200ms, easeIn
- 分割线拖拽：实时响应，0ms延迟
- 分割线hover高亮：AnimatedContainer, 150ms, 宽度2px→4px
- 窄屏→宽屏布局重排：400ms, easeInOut
- 宽屏→窄屏布局重排：400ms, easeInOut
- 导航栏位置切换：AnimatedSwitcher, 400ms, easeInOut
2. AdaptiveNavBar 动画
- TabIconSprite弹跳：4段TweenSequence, 500ms, 果冻弹跳效果
- TabIconSprite光晕脉冲：2000ms, repeat reverse, 径向渐变4色
- TabIconSprite表情过渡：300ms, 角色表情切换
- TabIconSprite相邻注视：250ms, 眼球跟随
- TabIconSprite标签显隐：200ms, 文字淡入淡出
- TabIconSprite浮动粒子：角度+半径+透明度动画
- 选中指示器液态玻璃：refractiveIndex 1.45, chromaticAberration 0.3
- 导航栏毛玻璃：BackdropFilter, GlassTokens.elevatedBlur
- 导航栏渐变背景：top→bottom渐变
- 导航栏双阴影：accent色光晕
3. 首页分屏动画
- 句子详情面板入场：fadeIn 300ms + slideX 0.05→0
- 句子详情面板内容加载shimmer：1200ms, accent 3% / white 8%
- 快捷操作按钮按压：scale 1.0→0.92, 150ms + 释放200ms
- 快捷操作图标切换：AnimatedSwitcher, 200ms
- 快捷操作文字样式：AnimatedDefaultTextStyle, 250ms
- 点赞动画：LikeAnimation, scale 1.0→1.3→1.0, 300ms/200ms
- 收藏动画：FavoriteBounceAnimation, scale 1.0→1.5→0.9→1.0, 400ms/250ms
- 稍后读动画：ReadLaterAnimation, scale 1.0→1.25→1.0, 300ms/200ms
- 左侧卡片点击反馈：PressableCard, scale 1.0→0.97, 100ms
- 左侧列表入场：fadeIn 400ms + slideY 0.08→0, stagger 30ms*index
- 左侧骨架屏shimmer：1500ms, accent 12%, angle -15°
- 左侧骨架→内容过渡：600ms
- 概览仪表盘入场：fadeIn 300ms + slideY 0.05→0, stagger 50ms
4. 发现页分屏动画
- 会话流面板入场：fadeIn 300ms + slideX 0.05→0
- 消息气泡入场：fadeIn + slideY, 350ms
- AI气泡shimmer：1200ms, accent 3% / white 8%
- 句子卡片shimmer：1200ms, white 8%
- 发送按钮渐变：AnimatedContainer, 300ms, 背景/阴影/尺寸
- 发送Toast滑入：slideY -0.5→0 + fadeIn, 350ms, easeOut
- 发送Toast滑出：350ms反向
- 发送星星Lottie：star.json, 120x120, 1500ms
- 庆祝粒子：ConfettiController, 3s, 30粒子, explosive
- 空状态emoji脉冲：scale 1.0↔1.1, 1500ms, repeat reverse
- 用户气泡Tilt倾斜：angle 3, 3D效果
- 音频波形CustomPaint：20条3px宽圆角矩形
- 工具图标按压：scale 1.0→0.92, 100ms
- 概览仪表盘入场：同首页
5. 我的页面分屏动画
- 设置面板入场：fadeIn 300ms + slideX 0.05→0
- 设置项切换：FadeTransition, 200ms
- CupertinoSwitch切换动画：系统默认
- 概览仪表盘入场：同首页
6. 过渡动画
- 窄屏→宽屏：右侧面板从右边缘滑入，左侧面板宽度收缩
- 宽屏→窄屏：右侧面板向右滑出，左侧面板宽度扩展
- 导航栏位置切换：AnimatedSwitcher淡入淡出
- 分屏开关切换：布局重排动画
- Tab切换时右侧面板内容切换：fadeOut + fadeIn
开发进度追踪
| 阶段 | 状态 | 完成日期 |
|---|---|---|
| 架构设计 | ✅ 完成 | 2026-05-29 |
| HTML预览页面 | ✅ 完成 | 2026-05-29 |
| Spec文档编写 | ✅ 完成 | 2026-05-29 |
| AdaptiveSplitView组件 | ✅ 完成 | 2026-05-29 |
| AdaptiveNavBar组件 | ✅ 完成 | 2026-05-29 |
| 首页分屏适配 | ✅ 完成 | 2026-05-29 |
| 发现页分屏适配 | ✅ 完成 | 2026-05-29 |
| 我的页面分屏适配 | ✅ 完成 | 2026-05-29 |
| 概览仪表盘 | ✅ 完成 | 2026-05-29 |
| 导航栏位置设置 | ✅ 完成 | 2026-05-29 |
| 动画与过渡 | ✅ 完成 | 2026-05-29 |
| 手势隔离 | ✅ 完成 | 2026-05-29 |
| 引导页宽屏适配 | ✅ 完成 | 2026-05-29 |
| 测试与验收 | ✅ 完成 | 2026-05-29 |
| 状态管理去重 | ✅ 完成 | 2026-05-29 |
| 面板缓存(KeepAlive) | ✅ 完成 | 2026-05-29 |
| 键盘适配 | ✅ 完成 | 2026-05-29 |
| 分割线双击重置+触控区域 | ✅ 完成 | 2026-05-29 |
| 横屏居中效果 | ✅ 完成 | 2026-05-29 |
| 概览仪表盘真实数据 | ✅ 完成 | 2026-05-29 |
| Hero动画 | ✅ 完成 | 2026-05-29 |
| flutter_animate替换 | ✅ 完成 | 2026-05-29 |
| 交错动画 | ✅ 完成 | 2026-05-29 |
| photo_view集成 | ✅ 完成 | 2026-05-29 |
| dartx集合扩展 | ✅ 完成 | 2026-05-29 |
| freezed不可变数据类 | ✅ 完成 | 2026-05-29 |
| 文件拖放(desktop_drop) | ✅ 完成 | 2026-05-29 |
| 自定义标题栏(bitsdojo_window) | ✅ 完成 | 2026-05-29 |
| 面板书签功能 | ✅ 完成 | 2026-05-29 |
| 跨面板拖拽(LongPressDraggable) | ✅ 完成 | 2026-05-29 |
| 三栏布局(超宽屏) | ✅ 完成 | 2026-05-29 |
| Rive交互式动画 | ✅ 完成 | 2026-05-29 |
| 跨平台兼容处理 | ✅ 完成 | 2026-05-29 |
| 智能AppBar | ✅ 完成 | 2026-05-29 |
| 22项增强验收 | ✅ 完成 | 2026-05-29 |
第四部分：22项增强任务新增组件
新增视图组件
- KeepAlivePanelWrapper — 面板缓存组件(AutomaticKeepAliveClientMixin)
- TripleColumnView — 三栏布局组件(超宽屏>=1400px)
- RiveTabIcon — Rive交互式Tab动画组件
- SmartAppBar — 智能AppBar(窄屏居中/宽屏靠左)
- PanelBookmark — 面板书签数据模型
- DragTarget高亮边框 — 跨面板拖拽视觉反馈
- DropTarget拖放区域 — 桌面端文件拖放
- WindowControlBtn — 窗口控制按钮(最小化/最大化/关闭)
- PhotoView全屏查看器 — 图片缩放/平移
- LongPressDraggable句子卡片 — 跨面板拖拽源
新增逻辑事件
- splitViewProvider唯一数据源 — display_settings_provider不再存储分屏字段
- SplitDivider双击重置 — 双击恢复默认40:60比例
- SplitDivider触控区域增大 — 17px→24px
- 横屏居中检测 — width>600 && width<900 && height<width
- 键盘高度适配 — MediaQuery.viewInsets.bottom
- 面板缓存 — AutomaticKeepAliveClientMixin保持状态
- 文件拖放 — DropTarget.onDragDone获取文件路径
- 面板书签 — addBookmark/removeBookmark/applyBookmark
- 跨面板拖拽 — LongPressDraggable + DragTarget
- 三栏布局 — kTripleColumnBreakpoint=1400.0
- Ctrl+1/2/3切换Tab — 桌面端键盘快捷键
- Ctrl+W关闭面板 — 桌面端键盘快捷键
- 桌面端跳过HapticFeedback — platform_utils.isDesktop
- 自定义标题栏 — bitsdojo_window窗口管理
新增动画
- flutter_animate声明式面板动画 — .slideX().fadeIn()替代AnimationController
- 交错列表动画 — AnimationLimiter+SlideAnimation+FadeInAnimation
- Heroine面板过渡 — sentence_detail Hero tag
- Rive StateMachine动画 — isSelected输入控制
- DropTarget拖放高亮 — 蓝色边框+半透明背景
- DragTarget悬停高亮 — 蓝色边框