feat(CharList): set unavailable tags as dimmed #264
Conversation
…ator class to visually de-emphasize unrelated branches
There was a problem hiding this comment.
Pull Request Overview
This PR implements visual feedback for unavailable filter tags in the CharList widget by dimming them with 0.45 opacity. When a profession or other filter is selected, tags that would result in no matching characters are automatically dimmed to improve the filtering experience.
- Added dimming functionality to show unavailable filter combinations
- Implemented computation logic to determine which tags should be dimmed based on current selections
- Added visual styling with 0.45 opacity for dimmed filter tags
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/widgets/CharList/index.vue | Added dimmedMaps computation and watcher logic to determine unavailable filter tags |
| src/components/FilterRow.vue | Added dimmedLabels prop to pass dimming state to individual checkboxes |
| src/components/Checkbox.vue | Added dimmed prop and CSS styling to visually dim unavailable options |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| function computeDimmedMaps() { | ||
| for (let fi = 0; fi < props.filters.length; fi++) { | ||
| const fg = props.filters[fi]; | ||
| for (let fj = 0; fj < fg.filter.length; fj++) { | ||
| const f = fg.filter[fj]; | ||
| const labels = flat(f.cbt); | ||
| const map: Record<string, boolean> = {}; | ||
| // 创建 states 副本 | ||
| const tempStates = states.map((group) => | ||
| group.map((s) => ({ | ||
| both: s.both, | ||
| selected: { ...s.selected }, | ||
| meta: s.meta, | ||
| })), | ||
| ); | ||
| const originalSelected = tempStates[fi][fj].selected; | ||
| for (const label of labels) { | ||
| // 临时替换选中项为仅包含当前 label | ||
| tempStates[fi][fj].selected = { [label]: true }; | ||
| const exists = props.source.some((char) => { | ||
| for (const g of tempStates) { | ||
| for (const sf of g) { | ||
| if (!predicate(sf as State, char)) return false; | ||
| } | ||
| } | ||
| return true; | ||
| }); | ||
| map[label] = !exists; | ||
| } | ||
| tempStates[fi][fj].selected = originalSelected; | ||
| dimmedMaps[fi][fj] = map; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
The computeDimmedMaps function has O(n³) complexity with nested loops over filters, labels, and source data. This could cause performance issues with large datasets. Consider implementing memoization or debouncing to avoid unnecessary recalculations, especially since it runs on every state change.
| computeDimmedMaps(); | ||
| watch( | ||
| states, | ||
| () => { | ||
| computeDimmedMaps(); | ||
| }, | ||
| { deep: true }, | ||
| ); |
There was a problem hiding this comment.
The deep watcher on states triggers computeDimmedMaps() on every state change, which could be expensive. Consider using nextTick or debouncing to batch multiple rapid changes, or implement more granular watching to only recompute when relevant parts of the state change.
1 participant
在 CharList Widget 中，将“选中后无结果”的筛选标签设置为 dimmed（不透明度 0.45），实现选择职业后自动在视觉上淡化无关分支，提升筛选体验的直观性。