前端优化: 审查队列页面增加侧边栏分类 rework review queue with internal sidebar workspace#172
Closed
YumemiDream wants to merge 4 commits into
Closed
前端优化: 审查队列页面增加侧边栏分类 rework review queue with internal sidebar workspace#172YumemiDream wants to merge 4 commits into
YumemiDream wants to merge 4 commits into
Conversation
- Add a dedicated review workspace layout with sticky sidebar containing 6 category buttons: persona / style / jargon / persona-state / reviewed / batches - Each button shows live count badges; counts update whenever persona, style, jargon, persona-state, backup or batch data is loaded - Add setReviewTab(tab) / updateReviewNavCounts(counts) helpers and bind button clicks + page-revisit restore (state.reviews.tab) - Add new integration test test_dashboard_review_queue_uses_sidebar_categories to lock in the new structure
Contributor
Reviewer's GuideRefactors the review queue dashboard section into a sidebar-driven tabbed workspace with six categorized panels, adds JS helpers to manage active tabs and sidebar counters, wires them into existing data rendering and navigation, adjusts responsive CSS, and introduces a regression test to ensure the new sidebar structure remains intact. Sequence diagram for review tab switching via sidebarsequenceDiagram
actor Reviewer
participant ReviewSidebar as review_nav_btn
participant DashboardJS as setReviewTab
participant Panels as review_tab_panel
Reviewer->>ReviewSidebar: click [data-review-tab]
ReviewSidebar->>DashboardJS: setReviewTab(tab)
DashboardJS->>DashboardJS: validate tab
DashboardJS->>ReviewSidebar: toggle active class
DashboardJS->>ReviewSidebar: set aria-selected
DashboardJS->>Panels: toggle active class
DashboardJS->>Panels: set hidden flag
Flow diagram for updating review sidebar countersflowchart TD
A[state.data] --> B[updateReviewNavCounts]
B --> C[compute personaBacklog
styleBacklog
pendingJargon
backupTotal
reviewedTotal
batchTotal]
C --> D[setText reviewSidebarSummary]
C --> E[setText reviewNavPersonaCount]
C --> F[setText reviewNavStyleCount]
C --> G[setText reviewNavJargonCount]
C --> H[setText reviewNavPersonaStateCount]
C --> I[setText reviewNavReviewedCount]
C --> J[setText reviewNavBatchCount]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- The sidebar tab controls currently only use
aria-selected; consider adding appropriate ARIA roles (e.g.role="tablist"on the nav androle="tab"/role="tabpanel"on buttons/panels) to make the new review workspace more accessible to screen readers. - The list of valid review tabs is hardcoded in multiple places (
setReviewTab,getReviewTabForInsightTarget, HTMLdata-review-tab/data-review-panel), which makes it easy for them to drift out of sync; it may be worth centralizing the tab IDs in one data structure and deriving both JS logic and markup from it where possible.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The sidebar tab controls currently only use `aria-selected`; consider adding appropriate ARIA roles (e.g. `role="tablist"` on the nav and `role="tab"`/`role="tabpanel"` on buttons/panels) to make the new review workspace more accessible to screen readers.
- The list of valid review tabs is hardcoded in multiple places (`setReviewTab`, `getReviewTabForInsightTarget`, HTML `data-review-tab`/`data-review-panel`), which makes it easy for them to drift out of sync; it may be worth centralizing the tab IDs in one data structure and deriving both JS logic and markup from it where possible.
## Individual Comments
### Comment 1
<location path="web_res/static/html/dashboard.html" line_range="920-929" />
<code_context>
+ gap: 16px;
+ }
+
+ .review-tab-panel.active {
+ display: grid;
+ }
</code_context>
<issue_to_address>
**suggestion:** Consider aligning ARIA roles/attributes with the tabbed navigation semantics.
The current use of `aria-selected` on the sidebar buttons and `hidden` on panels is close to a tab interface. To improve accessibility, add tab roles: `role="tablist"` on the nav container, `role="tab"` on each `.review-nav-btn`, and `role="tabpanel"` on each `.review-tab-panel`, linked via `id`/`aria-controls` so assistive technologies recognize this as a tabset.
Suggested implementation:
```
<div class="review-sidebar" role="tablist">
```
```
<button class="review-nav-btn" role="tab"
```
```
<div class="review-tab-panel" role="tabpanel"
```
To fully align with tab semantics, you should also:
1. Ensure each tab button has a unique `id` (e.g. `id="review-tab-overview"`) and an `aria-controls` attribute pointing to its panel (e.g. `aria-controls="review-panel-overview"`).
2. Ensure each `.review-tab-panel` has a matching unique `id` (e.g. `id="review-panel-overview"`) and an `aria-labelledby` pointing back to the tab `id`.
3. Confirm that the existing JS that toggles `aria-selected` and `hidden` continues to work with these new attributes; if necessary, update it to:
- Set `aria-selected="true"` on the active tab and `"false"` on inactive tabs.
- Set `hidden` on inactive panels and remove `hidden` from the active panel based on the `aria-controls` / `id` linkage rather than class names alone.
4. If the nav container for `.review-nav-btn` is not exactly `.review-sidebar`, adjust the first SEARCH/REPLACE to target the actual container element that wraps the set of review nav buttons and add `role="tablist"` there instead.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+920
to
+929
| .review-tab-panel.active { | ||
| display: grid; | ||
| } | ||
|
|
||
| .review-split-grid { | ||
| display: grid; | ||
| grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); | ||
| gap: 16px; | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
suggestion: Consider aligning ARIA roles/attributes with the tabbed navigation semantics.
The current use of aria-selected on the sidebar buttons and hidden on panels is close to a tab interface. To improve accessibility, add tab roles: role="tablist" on the nav container, role="tab" on each .review-nav-btn, and role="tabpanel" on each .review-tab-panel, linked via id/aria-controls so assistive technologies recognize this as a tabset.
Suggested implementation:
<div class="review-sidebar" role="tablist">
<button class="review-nav-btn" role="tab"
<div class="review-tab-panel" role="tabpanel"
To fully align with tab semantics, you should also:
- Ensure each tab button has a unique
id(e.g.id="review-tab-overview") and anaria-controlsattribute pointing to its panel (e.g.aria-controls="review-panel-overview"). - Ensure each
.review-tab-panelhas a matching uniqueid(e.g.id="review-panel-overview") and anaria-labelledbypointing back to the tabid. - Confirm that the existing JS that toggles
aria-selectedandhiddencontinues to work with these new attributes; if necessary, update it to:- Set
aria-selected="true"on the active tab and"false"on inactive tabs. - Set
hiddenon inactive panels and removehiddenfrom the active panel based on thearia-controls/idlinkage rather than class names alone.
- Set
- If the nav container for
.review-nav-btnis not exactly.review-sidebar, adjust the first SEARCH/REPLACE to target the actual container element that wraps the set of review nav buttons and addrole="tablist"there instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
描述
背景
原版审查队列页（
#page-reviews）是一个 2 列网格布局，所有面板（人格状态、备份、待审人格、风格审查、已审历史、黑话、批次）平铺在一起。随着面板增多，页面
越来越长，用户需要不断滚动才能在"概览"和"待办操作"之间切换。
改动
将审查队列重构为"左侧固定侧边栏 + 右侧内容区"布局，按功能分为 6 个分类，
每个分类可一键切换，无需滚动。
6 个分类
personastylejargonpersona-statereviewedbatches视觉
position: sticky侧边栏，桌面端始终可见pageInkeyframes)交互
setReviewTab(tab)JS 函数：切换active类 + 显示对应 sectionupdateReviewNavCounts(counts)JS 函数：实时更新侧边栏角标state.reviews.tab持久化当前 tab，刷新页面/返回时恢复aria-selected同步无障碍属性后端
无任何后端改动。所有改动均在
web_res/static/html/dashboard.html一个文件内完成。配套测试
tests/integration/test_webui_static_assets.py新增test_dashboard_review_queue_uses_sidebar_categories，断言关键字符串（CSS 类、data 属性、JS 函数名）必须存在，防止未来误删侧边栏结构。
风险评估
原有 render 函数无需修改
测试