 rosercode
|
75e75ad190
|
feat: 前端适配移动端与小屏并优化触屏图表交互
新增断点基础设施与响应式布局，使手机（<768px）与平板（768–1023px）下可正常浏览和操作，桌面端（≥1024px）布局保持原有形态不变；引入此前未被入口引用的全局样式文件，使全局小屏兜底规则生效，并修复小屏分页控件被裁切、触屏端图表点击误触直接跳转的问题。
变更内容：
- 断点基础设施：新增 `frontend/src/composables/useBreakpoints.ts`（isMobile / isTablet / isDesktop / viewportWidth / isTouch），作为全站统一断点与触屏判定来源
- 全局样式：`frontend/src/main.ts` 引入 `./style.css`（此前从未被引入，导致其中规则一直无效），使弹层 max-width 92vw、body 防横向溢出等兜底规则实际生效
- 主布局 `views/Layout.vue`：小屏侧栏收起为 NDrawer、Header 增加菜单按钮，切回桌面自动收起；内容区高度改用 dvh，内边距随断点收窄；新增三语文案 `layout.menu`
- 表格：为列宽可能超出窄屏的 NDataTable 统一补 `:scroll-x`（收支记录、邮箱账单、规则/分类/标签/渠道、账单预览、AI 使用、关系编辑等）
- 弹窗：为固定宽度弹窗补 `max-width: 92vw`（分类/标签/渠道/规则、收支新增编辑与原始数据与一键设置、通知渠道、登录与注册卡片）
- 栅格与图表：`Dashboard.vue` / `SqlQuery.vue` 栅格改用断点列（responsive="screen"），图表高度随断点降低
- 浮窗：`FloatingPanel.vue` 按视口约束宽高、最小尺寸随视口下调；`AiQueryWindow.vue` / `EmojiPicker.vue` 小屏自适应
- 表单与列表：左标签表单小屏改为顶部标签（AI 配置、数据库配置、通知配置、邮箱账单弹窗）；未换行 NSpace 与关系编辑器成员行小屏可换行
- 分页修复：≤1023px 下 `.n-pagination` 允许换行、居中、高度自适应（naive-ui 运行期注入样式优先级更高，用 !important 覆盖），表格内置分页容器同步居中，避免页大小选择与跳页输入被裁到视口外
- 触屏图表交互：`Dashboard.vue` 触屏端点击趋势柱或饼图扇区时按点击坐标弹出确认气泡（「查看明细 / 取消」），确认后才跳转；`handleTrendBlankClick` 在触屏端直接返回、禁用「绘图区整列可点」；桌面端保持点击即跳转；新增三语文案 `dashboard.chartActionHint` / `dashboard.chartActionView`
说明：
- 桌面端布局与跳转逻辑不变，点击柱子直接跳转、不显示气泡
- 分页控件在窄屏换行显示，页大小可切换、跳页输入可见可用
- 触屏端滑动/缩放不触发跳转（仅图形本体点击且需二次确认）
- 采用「基础可用适配」范围，未做移动端卡片式重排；断点统一走 `useBreakpoints`，后续新增页面按工作区 `AGENTS.md`《前端响应式适配（移动端 / 小屏）》约定实现
验证：
- 测试环境（5174）以 375 / 768 / 800 / 1280 宽度遍历统计面板、收支记录、分类管理、设置、邮箱账单、日志、智能查数等页面，均无横向溢出；手机端侧栏抽屉可开合；分页控件均在视口内且页大小可切换
- 触屏（375，hasTouch）点柱子/饼图扇区弹出确认气泡且不跳转，点空白不弹不跳，点「查看明细」跳转 `/transactions` 并写入筛选偏好；桌面（1280）点柱子直接跳转
- `./package.sh` 构建成功（bootJar + bootGuiJar，含前端 build）
- `npx vue-tsc -b --force` 类型检查通过
|
2026-09-30 17:10:07 +08:00 |
|