fix(webui): 自定义背景完全不可用 —— 「图片」档进不去
现象:点「图片」后背景反而被关掉,上传控件永远不出现 ⇒ 自定义图片在 UI 上
完全不可达(用户看到的正是"自定义背景不正常")。
根因:`normalizeBackground` 把「kind=image 但还没有图片数据」折叠成 `none`
(这条判据本身是对的 —— 读盘时那确实是脏数据),但 store 的 `commit()` 每次
patch 都要过一遍它,于是 `setKind('image')` 这一瞬间就被折叠回去;而上传控件
只在 `kind === 'image'` 下渲染 ⇒ 鸡生蛋问题,用户永远走不到选文件那一步。
修法:给归一化加 `keepEmptyImage`。
- 读盘(`readStored`)保持严格:空图片状态是脏数据,退回 none。
- 交互(`commit`)保留瞬态:允许"已选图片档、还没挑文件"这个中间状态存在。
静止态的不变量没有放松,放松的只是正在选图的那一瞬间;`applyBackground` 对
空图片本来就不铺开(不会出现 `url("")`)。
判据(都验过"修复前会红"):
· 新增 `test/components/BackgroundPicker.test.tsx` —— 点「图片」后选文件控件
必须出现、选完图背景必须亮、失败必须说原因、选「无」必须能关掉。
**扰动验证**:把修复撤掉 → 组件 3 红 + store 1 红;恢复 → 22 全绿。
· `test/stores/background.test.ts` 补 2 条:交互进入图片档要留住 /
瞬态落盘后重读必须退回 none。
线上验证(真浏览器,部署后):线上 bundle 换成 index-CSFGa8wa.js 后 ——
点「图片」→ `kind=image` 保持 → 上传 16KB 小图与 9MB 大图都成功
(大图压缩到 1790KB)→ 刷新后仍在 → 全程无页面错误。
顺带:应用内**从未出现**过品牌图标。`BrandMarkIcon` 只用在登录页与首启页
(都是登录前界面),登录后的日常界面里一处都没有。侧栏顶端加上品牌标记
(点它回收件箱)。favicon 那条链本来就是好的(3 个 link 都 200、类型正确、
图标内容正确),已在验证中确认。
This commit is contained in:
@ -7,6 +7,7 @@ import {
|
||||
clampBlur,
|
||||
clampDim,
|
||||
normalizeBackground,
|
||||
readStored,
|
||||
useBackgroundStore
|
||||
} from '../../src/stores/backgroundStore';
|
||||
|
||||
@ -62,6 +63,29 @@ describe('脏数据归一化', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('★ 交互进入「图片」档时必须留住(否则上传控件永远不出现)', () => {
|
||||
// 这是线上真实缺陷:点「图片」→ commit 里那次严格归一化把 kind 折叠回 none
|
||||
// → 上传控件(只在 kind==='image' 下渲染)从不出现,自定义图片完全不可达,
|
||||
// 而且背景被顺手关掉(用户看到的正是"点了没反应、背景还没了")。
|
||||
useBackgroundStore.getState().reset();
|
||||
useBackgroundStore.getState().setKind('image');
|
||||
expect(useBackgroundStore.getState().kind).toBe('image');
|
||||
|
||||
// 反向对照:没有图片数据时**不该**真的铺开背景(静止态的不变量仍在)
|
||||
expect(document.documentElement.dataset.bg).toBe('off');
|
||||
expect(document.documentElement.style.getPropertyValue('--bg-image')).toBe('');
|
||||
});
|
||||
|
||||
it('★ 瞬态里的空图片状态被持久化后,重读必须退回 none(静止态不放松)', () => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({ kind: 'image', imageDataUrl: '', dim: 30, blur: 10 }));
|
||||
const back = readStored();
|
||||
expect(back.kind).toBe('none');
|
||||
// 用户接着选图片仍能成功(不是"坏状态卡死")
|
||||
useBackgroundStore.getState().setImage('data:image/jpeg;base64,EEEE');
|
||||
expect(useBackgroundStore.getState().kind).toBe('image');
|
||||
expect(document.documentElement.dataset.bg).toBe('on');
|
||||
});
|
||||
|
||||
it('kind=image 但没有可用图片时退回 none', () => {
|
||||
// 图片可能被浏览器清理或写坏。留一个空壳 image 状态会让界面显示「已选图片」
|
||||
// 却什么都没有 —— 不如退回 none,至少状态是诚实的
|
||||
|
||||
Reference in New Issue
Block a user