From f7fd41b88f161ed73b57dad732ed024704fd6449 Mon Sep 17 00:00:00 2001 From: liumangmang Date: Tue, 24 Mar 2026 15:09:47 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=20nav=20swap=20?= =?UTF-8?q?=E8=A7=84=E6=A0=BC=E4=B8=8E=E8=AE=A1=E5=88=92=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/superpowers/plans/2026-03-24-nav-swap.md | 105 ++++++++++++++++++ .../specs/2026-03-24-nav-swap-design.md | 60 ++++++++++ 2 files changed, 165 insertions(+) create mode 100644 docs/superpowers/plans/2026-03-24-nav-swap.md create mode 100644 docs/superpowers/specs/2026-03-24-nav-swap-design.md diff --git a/docs/superpowers/plans/2026-03-24-nav-swap.md b/docs/superpowers/plans/2026-03-24-nav-swap.md new file mode 100644 index 0000000..8c6e6cf --- /dev/null +++ b/docs/superpowers/plans/2026-03-24-nav-swap.md @@ -0,0 +1,105 @@ +# Nav Swap Implementation Plan + +> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Swap the sidebar order so `连接列表` appears above `传输` without changing routing or behavior. + +**Architecture:** This is a template-only frontend change in the shared main layout. The implementation keeps the existing `RouterLink` blocks, active-state logic, click handlers, icons, and labels intact, and only reorders the two navigation entries in `frontend/src/layouts/MainLayout.vue`. + +**Tech Stack:** Vue 3, TypeScript, Vite, Tailwind CSS, vue-tsc + +--- + +## File Structure + +- Modify: `frontend/src/layouts/MainLayout.vue` + - Contains the sidebar navigation template. + - Only the relative position of the `/connections` and `/transfers` `RouterLink` blocks should change. +- Verify: `frontend/src/router/index.ts` + - Confirms the default redirect remains `/connections` and does not need modification. +- Verify: `docs/superpowers/specs/2026-03-24-nav-swap-design.md` + - Source of truth for this tiny UI change. + +### Task 1: Reorder Sidebar Navigation Entries + +**Files:** +- Modify: `frontend/src/layouts/MainLayout.vue` +- Verify: `frontend/src/router/index.ts` +- Verify: `docs/superpowers/specs/2026-03-24-nav-swap-design.md` + +- [ ] **Step 1: Check workspace state before editing** + +Review `git status` and confirm there are no unrelated user changes in `frontend/src/layouts/MainLayout.vue` that must be preserved. Do not revert unrelated modifications. + +- [ ] **Step 2: Inspect the existing sidebar navigation blocks** + +Confirm that `frontend/src/layouts/MainLayout.vue` currently renders the `RouterLink` for `/transfers` before the `RouterLink` for `/connections`, and verify that both links already contain the correct label, icon, `aria-label`, active-state class, and `@click="closeSidebar"` behavior. + +- [ ] **Step 3: Write the minimal implementation by swapping the two blocks** + +Move the entire `/connections` `RouterLink` block so it appears before the `/transfers` `RouterLink` block. + +Keep all existing content unchanged: + +```vue + + +``` + +```vue + + +``` + +- [ ] **Step 4: Verify no route behavior changed** + +Read `frontend/src/router/index.ts` and confirm these lines are still untouched: + +```ts +{ + path: '', + name: 'Home', + redirect: '/connections', +} +``` + +- [ ] **Step 5: Run the frontend verification build** + +Run: `npm run build` in `frontend/` + +Expected: +- `vue-tsc -b` passes +- Vite production build completes successfully + +- [ ] **Step 6: Manually verify the UI behavior** + +Check the sidebar in the app and confirm: +- `连接列表` is above `传输` +- Clicking each item still opens the same page +- Active highlighting still matches the current route +- Mobile sidebar uses the same order + +- [ ] **Step 7: Commit the focused change if requested** + +Only if the user asks for a commit: + +```bash +git add frontend/src/layouts/MainLayout.vue +git commit -m "fix: reorder sidebar navigation items" +``` diff --git a/docs/superpowers/specs/2026-03-24-nav-swap-design.md b/docs/superpowers/specs/2026-03-24-nav-swap-design.md new file mode 100644 index 0000000..8e6988c --- /dev/null +++ b/docs/superpowers/specs/2026-03-24-nav-swap-design.md @@ -0,0 +1,60 @@ +# 2026-03-24 Nav Swap: Transfers and Connections + +## Background + +The user wants to swap the visual order of the `传输` and `连接列表` entries in the left sidebar navigation. + +## Goal + +- Show `连接列表` above `传输` in the sidebar. +- Keep the order consistent on desktop and mobile sidebar layouts. +- Preserve existing navigation behavior, active-state highlighting, labels, and icons. + +## Non-Goals + +- Do not change routing structure or auth behavior. +- Do not change the default redirect to `/connections`. +- Do not refactor the sidebar into config-driven navigation. +- Do not make unrelated UI or style changes. + +## Current State + +In `frontend/src/layouts/MainLayout.vue`, the sidebar navigation currently renders: + +1. `RouterLink` to `/transfers` +2. `RouterLink` to `/connections` + +The default app entry remains `/connections` via `frontend/src/router/index.ts`. + +## Selected Approach + +Use the smallest possible template-only change: + +- In `frontend/src/layouts/MainLayout.vue`, move the `RouterLink` block for `/connections` so it appears before the `RouterLink` block for `/transfers`. + +This is preferred because it: + +- solves the request directly, +- avoids unnecessary abstraction, +- keeps behavior unchanged, +- minimizes regression risk. + +## Behavior Kept Unchanged + +- `closeSidebar` still runs on click. +- Active-state classes based on `route.path` stay the same. +- `aria-label` values stay the same. +- Existing icons (`Server`, `ArrowLeftRight`) stay paired with the same entries. +- Terminal tab section remains below the main navigation items. + +## Acceptance Criteria + +- The sidebar shows `连接列表` first and `传输` second. +- Clicking either item still navigates to the same route. +- Active highlighting still works for both routes. +- Mobile sidebar uses the same order. + +## Verification + +- Run `npm run build` in `frontend/`. +- Manually confirm the sidebar order and route highlighting.