short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 提升形态筛选区控件对比度

Browse Source 
让筛选区内的搜索框和下拉框使用页面表面色，避免与浅灰容器背景融合，并补充样式契约测试。
This commit is contained in:
GouJ
2026-09-08 10:10:06 +08:00
committed by GitHub
parent 769407cb14
commit 42c40383dc
3 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design-qa.md
+25 -29
View File
@@ -1,48 +1,46 @@
# Design QA # Design QA
- Source visual truth: - Source visual truth: `/workspace/scratch/6e52996114b8/upload/a17fe159-829a-4938-9b65-3955b6d6f2e5.png`
- `/workspace/scratch/6e52996114b8/upload/75026374-fe20-45b3-9596-b704e404f14e.png` - Source pixel dimensions: `494 × 326`.
- `/workspace/scratch/6e52996114b8/upload/672c002e-13b3-4a89-88ae-657cce7b1554.png`
- `/workspace/scratch/6e52996114b8/upload/bddc4895-360d-48d0-b248-d384283085bc.png`
- Source pixel dimensions: `466 × 307`, `486 × 213`, `496 × 358`.
- Intended implementation viewport: mobile dark theme, approximately `393px` CSS width. - Intended implementation viewport: mobile dark theme, approximately `393px` CSS width.
- Implementation screenshot: unavailable. - Implementation screenshot: unavailable.
- CSS size and density normalization: unavailable because the implementation could not be opened in the cloud browser. - CSS size and density normalization: unavailable because the implementation could not be opened in the cloud browser.
- State: 形态图片默认筛选、分镜设计已完成统计、镜头生产首帧工具栏。 - State: 形态图片页默认筛选状态。
## Full-view comparison evidence ## Full-view comparison evidence
The three source images were opened and inspected. The first source shows two checkbox filters consuming a full mobile row and a redundant result count beside the layout switch. The second and third sources show desktop flex toolbar behavior wrapping on mobile, leaving unused horizontal regions before actions or after metrics. The source screenshot was opened and inspected. It shows the filter container and its search/select controls using nearly identical gray values, so the controls lose their boundaries and read as one continuous surface.
The implementation passed formatting, TypeScript, focused component tests, and the production build. A local Sites preview started successfully at the required port, but the cloud browser rejected `terminal.local` with `net::ERR_BLOCKED_BY_CLIENT`. Therefore no browser-rendered implementation evidence is available. The component now keeps the lighter grouping background while overriding its inherited `--app-field` and `--app-field-hover` values with `--app-surface`. In the dark theme this separates the approximately `#2c2c2c` group from the `#191919` controls; the same token relationship also preserves contrast in the light theme.
A local Sites preview started successfully, but the cloud browser rejected `terminal.local` with `net::ERR_BLOCKED_BY_CLIENT`. Therefore no browser-rendered implementation screenshot is available.
## Focused region comparison evidence ## Focused region comparison evidence
- 形态筛选：两个复选框合并为“全部状态 / 缺少主图 / 身份过期”单选下拉；筛选容器使用统一 `12px` 内边距和更浅的混合背景；`460px` 以下隐藏结果数量，并让状态下拉与布局切换并排。 - Filter group: keeps `12px` equal padding and the lighter token-derived background requested in the previous iteration.
- 分镜设计：`760px` 以下工具栏改为单列网格，剧集、统计、操作分别占满整行；统计两端分布，操作从左侧开始排列。 - Search and select controls: now inherit the darker page-surface token inside this group, restoring a clear nested-control boundary without adding borders or changing sizing.
- 镜头生产：`760px` 以下隐藏与镜头目录重复的“本集 N 镜”统计，工具栏操作从左侧连续排列。
These are code-level checks only and do not replace a rendered focused-region comparison. These are code-level checks only and do not replace a rendered focused-region comparison.
## Required fidelity surfaces ## Required fidelity surfaces
- Fonts and typography: existing project font stack, sizes, weights, truncation, and copy were preserved; browser comparison is blocked. - Fonts and typography: unchanged; browser comparison is blocked.
- Spacing and layout rhythm: component-local responsive rules remove the marked mobile gaps and keep the existing compact header density; exact browser measurement is blocked. - Spacing and layout rhythm: the existing `12px` padding and two-row mobile grid are unchanged.
- Colors and visual tokens: the filter background remains based on `--app-subtle` and is lightened with `color-mix`; browser sampling is blocked. - Colors and visual tokens: the group/control contrast is corrected with existing theme tokens; browser sampling is blocked.
- Image quality and asset fidelity: no image assets or crop rules changed. - Image quality and asset fidelity: no image or crop behavior changed.
- Copy and content: existing product copy remains unchanged except the two checkbox labels now appear as equivalent dropdown options; the mobile-only duplicate shot count is visually hidden. - Copy and content: unchanged.
## Findings ## Findings
- [P1] Browser-rendered comparison unavailable - [P1] Browser-rendered comparison unavailable
- Location: all three target mobile states. - Location: 形态图片筛选区。
- Evidence: the preview process is healthy, but the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for `http://terminal.local:4173/`. - Evidence: the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for the healthy local preview.
- Impact: exact responsive spacing, rendered Naive UI select behavior, primary interactions, and console state cannot be visually certified. - Impact: exact rendered contrast, hover/focus states, interaction behavior, and console state cannot be visually certified.
- Fix: open the same branch in an available browser with project data, capture the three target routes at `393px` width, and rerun this comparison. - Fix: open this branch in an available browser with project data and capture the filter area at the same mobile width.
## Primary interactions tested ## Primary interactions tested
Automated component tests cover search, subject type and image-status dropdown filtering, result count changes, layout switching, affected-shot selection, and reset behavior. Browser interactions were not available. Automated tests protect the local field-token override together with the existing filter layout and theme contract. All 275 tests pass. Browser interactions were unavailable.
## Console errors checked ## Console errors checked
@@ -50,16 +48,14 @@ Not checked because the page could not be opened in the cloud browser.
## Comparison history ## Comparison history
- Iteration 1: replaced the checkbox row, removed the mobile result count, and changed both workflow toolbars to deterministic mobile rows based on the three source annotations. - Iteration 1: identified insufficient contrast caused by the outer group (`#2c2c2c`) and controls (`#2b2b2b`) rendering at nearly the same value.
- Iteration 2: updated component contracts and interaction tests after the filter changed from checkboxes to a select. All focused tests passed; browser capture remained blocked. - Iteration 2: changed only the filter region's inherited input tokens to `--app-surface`, retained the existing outer background and layout, and passed the full test/build suite. Browser capture remained blocked.
## Implementation checklist ## Implementation checklist
- [x] Replace the two image-state checkboxes with one dropdown. - [x] Preserve the lighter filter-group background.
- [x] Hide the mobile result count and keep the layout switch available. - [x] Restore distinct search/select control surfaces in dark and light themes.
- [x] Use equal filter-container padding and a lighter token-derived background. - [x] Add a style-contract regression assertion.
- [x] Remove marked mobile toolbar gaps in storyboard and production. - [ ] Capture and compare the rendered mobile state in the cloud browser.
- [x] Hide the duplicate mobile shot count in production.
- [ ] Capture and compare the three rendered states in the cloud browser.
final result: blocked final result: blocked
src/features/subject-images/SubjectImagesPage.vue
+3
View File
@@ -859,6 +859,9 @@ async function showStaleForms() {
} }
.form-image-filter-region { .form-image-filter-region {
@apply my-4 p-3; @apply my-4 p-3;
/* 外层使用浅灰分组，输入与下拉恢复为表面色，避免同色后失去控件边界。 */
--app-field: var(--app-surface);
--app-field-hover: var(--app-surface);
background: color-mix(in srgb, var(--app-subtle) 96%, white); background: color-mix(in srgb, var(--app-subtle) 96%, white);
container-type: inline-size; container-type: inline-size;
} }
tests/components/ui/flatTheme.test.ts
+1 -1
View File
@@ -184,7 +184,7 @@ describe('全站平面主题', () => {
// DOM 环境不计算几何；保护容器宽度断点和居中契约，真实坐标仍需浏览器验收。 // DOM 环境不计算几何；保护容器宽度断点和居中契约，真实坐标仍需浏览器验收。
const css = readAllStyles() const css = readAllStyles()
expect(css).toMatch( expect(css).toMatch(
/\.form-image-filter-region\s*\{[^}]*padding:\s*12px;[^}]*background:\s*color-mix\(in srgb, var\(--app-subtle\) 96%, white\);/ /\.form-image-filter-region\s*\{[^}]*padding:\s*12px;[^}]*--app-field:\s*var\(--app-surface\);[^}]*--app-field-hover:\s*var\(--app-surface\);[^}]*background:\s*color-mix\(in srgb, var\(--app-subtle\) 96%, white\);/
) )
expect(css).toMatch(/\.form-image-toolbar\s*\{[^}]*align-items:\s*center;[^}]*gap:\s*12px 16px;/) expect(css).toMatch(/\.form-image-toolbar\s*\{[^}]*align-items:\s*center;[^}]*gap:\s*12px 16px;/)
expect(css).toMatch( expect(css).toMatch(