4.2 KiB
4.2 KiB
2026-05-28 记录
关爱模式（Care Mode）开发日志
已完成
基础设施
stores/careMode.js— Pinia store，state 含 enabled，action 含 toggle/enable/disable/restore，持久化到 uni.setStorageSync- JS 注入 CSS 变量方案：store
_syncRootClass()对document.documentElement.style.setProperty()逐条注入 px 值，绕过 uni-app H5 编译 rpx 问题 restore()在App.vue onLaunch调用，加载持久化状态并同步 DOMuni.scss重构：:root为基础变量，:root.care-mode为 1.5x 覆盖；去掉了page选择器防止继承链断裂- 常量
NORMAL_VARS/CARE_VARS定义在模块顶层，含完整 CSS 变量集（font-size, spacing, color, btn-min-height, input-height, border-radius 等） - 辅助函数
getRpxRatio()(screenWidth / 750) 和buildPxVars()动态转 px uni.scss中所有 H5 CSS 变量值用 px（非 rpx），因浏览器不认 rpx 作为 CSS 变量值- 调试用全局函数
__toggleCareMode()挂载到 window，可在 console 直接调用 stores/index.js中 export careMode- 登录按钮使用 computed
buttonStyle（因u-buttoncustom-style不支持 CSS 变量）
登录页 (pages/login/login.vue)
- 所有硬编码样式 ->
var(--xxx)替换（~11 处） - 登录按钮 width 使用
buttonWidth: '80%'（不变），font-size/input-height 通过 CSS 变量控制
首页 (pages/index/index.vue)
- 53 处
var(--)替换 showMoreActions()使用 ActionSheet：两选项「开启/关闭关爱模式」「退出登录」- 文字描述全部 1.5x 显示
入库出库选器改造（4 个文件）
pages/inbound/production.vue— 68 处 CSS 变量，生产入库（无价格逻辑）pages/inbound/purchase.vue— 90 处 CSS 变量，采购入库（含价格/金额/供应商选器）pages/outbound/material.vue— 68 处 CSS 变量，领料出库（无价格逻辑）pages/outbound/sales.vue— 93 处 CSS 变量，销售出库（含价格/金额/客户选器）
技术决策
- CSS class → JS 注入转换：因
:root.care-mode在 uni-app H5 编译后page元素阻断了继承链，改用 JS 对document.documentElement.style.setProperty()直接注入 - 删除
uni.scss的page选择器：page作为中间元素接收 CSS 变量但不会传递给子元素，导致页面var(--)都落在 fallback - 1.5x 缩放系数：用户指定的比值；
CARE_VARS = NORMAL_VARS × 1.5 u-buttoncustom-style 不支持 CSS 变量：改用 computed 返回样式对象
待办
- 7 个已回滚页面需要重新 CSS 变量改造（首页和 4 个选器已重做完成，仍需检查 stocktake, inventory 等）
- 检查
/pages/inbound/history,/pages/inventory/inventory,/pages/inventory/stock,/pages/supplier/index,/pages/supplier/supplierDetail,/pages/outbound/history,/pages/inventory/warehouse是否需要 Care Mode 支持 - 添加其他页面的 manual toggle 入口（actionSheet）
- 小程序
<page-meta>支持（未来事项）
当前焦点
用户已确认登录页 OK，首页改造完成，4 个入库出库选器改造完成。等待用户反馈看 H5 效果，再决定下一步。
入库出库历史记录（2 个文件）
pages/inbound/history.vue— 67 处 CSS 变量，含搜索、卡片列表、撤销按钮、空状态pages/outbound/history.vue— 66 处 CSS 变量，含客户/价格/金额展示
库存与安全库存（2 个文件）
pages/inventory/index.vue— 42 处 CSS 变量，含搜索、分类筛选、库存卡片、低库存 tagpages/inventory/safe-stock.vue— 30 处 CSS 变量，含信息卡片、表单输入、保存/删除按钮
库存盘点（2 个文件）
pages/stocktake/index.vue— 75 处 CSS 变量，含搜索、分类筛选、盘点卡片、实盘输入、底部操作栏pages/stocktake/history.vue— 60 处 CSS 变量，含时间筛选 tabs、历史卡片、空状态
未检查页面（待确认是否需要 Care Mode 支持）
/pages/inventory/stock(不存在)/pages/inventory/warehouse(不存在)/pages/supplier/index/pages/supplier/supplierDetail