2026-04-16-desktop-sidebar-navigation-design.md 3.6 KB
Desktop Sidebar Navigation Design
Summary
The desktop pages for AI问答, AI写作, 安全培训, 隐患提示, and 考试工坊 should share one left-side navigation sidebar. The AI写作, 安全培训, and 考试工坊 sidebar buttons must mirror the existing mode buttons below the Chat input, not route to the standalone legacy pages.
Selected Approach
Use option 1: extend shudao-vue-frontend/src/components/Sidebar.vue.
This keeps the change centralized. The existing pages already import and render <Sidebar />, so updating the shared component adds the navigation buttons consistently. Chat.vue passes its current mode into the sidebar and handles sidebar mode selections with the same setMode() function used by the input-area buttons.
Target Routes
The sidebar will expose these route buttons:
| Label | Behavior | Route fallback |
|---|---|---|
| AI问答 | Chat mode ai-qa when already on Chat |
/chat |
| 隐患提示 | Route to the independent 隐患提示 page | /hazard-detection |
| AI写作 | Chat mode ai-writing when already on Chat |
/chat?mode=ai-writing |
| 安全培训 | Chat mode safety-training when already on Chat |
/chat?mode=safety-training |
| 考试工坊 | Chat mode exam-workshop when already on Chat |
/chat?mode=exam-workshop |
All target routes and Chat mode-query initialization already exist, so no router-table changes are required.
Component Design
Sidebar.vue will become data-driven:
- Define a
navItemsarray containing label, route name, legacy path, icon, optional Chat mode, and route fallback target. - Render the menu with
v-for. - If the current page is Chat and the nav item has a Chat mode, emit
select-modeinstead of routing. - Otherwise use
router.push(item.target). - Use the current route name plus the active Chat mode to apply the active style.
- Keep the logo click behavior that routes back to
/.
This avoids duplicated template blocks and keeps the sidebar behavior aligned with the existing Chat mode chips.
Visual Design
The sidebar will keep the existing desktop layout:
- Fixed narrow left rail, currently 80px wide.
- Logo at the top.
- Vertical navigation items below the logo.
- Each button uses an icon above the text.
- Hover state uses a subtle translucent highlight.
- Active state uses stronger icon highlight, slight scale, white text, and stronger font weight.
The user referenced an image for button style, but the image is not available in the current conversation context. Implementation will therefore match the existing Sidebar.vue visual language. If the image is provided later, the visual tokens can be adjusted without changing the routing logic.
Affected Pages
These existing desktop pages should receive the updated sidebar automatically because they already render <Sidebar />:
shudao-vue-frontend/src/views/Chat.vueshudao-vue-frontend/src/views/AIWriting.vueshudao-vue-frontend/src/views/SafetyHazard.vueshudao-vue-frontend/src/views/HazardDetection.vueshudao-vue-frontend/src/views/ExamWorkshop.vue
Mobile navigation is out of scope because mobile already has separate tab and drawer components.
Testing
Implementation should be verified with:
- A focused component test or equivalent static test that confirms the sidebar renders the five navigation labels and marks the current route active.
- A build check for the Vue frontend.
- Manual navigation verification on
/chat,/ai-writing,/safety-hazard,/hazard-detection, and/exam-workshop.
Out Of Scope
- Adding new backend APIs.
- Changing mobile navigation.
- Redesigning the history sidebar.
- Creating new route pages.