From 4b826567b80823f8eb264f756806d9202fc52390 Mon Sep 17 00:00:00 2001 From: govin Date: Fri, 18 Sep 2026 16:35:24 +0800 Subject: [PATCH] frontend: move the second-level menu to the left of the content The rail was on the right. It now leads the row instead, so the section menu reads as a conventional left-hand navigation column. Which side it lands on was never a stylesheet decision: `.app-body` is a flex row and the aside is simply its first child now, with `.app-main` after it. The only style change that had to follow is the rail's separator, which moves from its left edge to its right, plus the collapse tooltip's placement. The global shell contract in base.css now says this explicitly, so the next person to move the rail knows the side comes from DOM order rather than from a rule in that file. --- docs/OVERVIEW.md | 16 ++++++++++------ frontend/src/App.vue | 12 +++++++----- frontend/src/components/SectionAside.vue | 9 +++++---- frontend/src/styles/base.css | 9 ++++++--- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/docs/OVERVIEW.md b/docs/OVERVIEW.md index d7182d6..789604b 100644 --- a/docs/OVERVIEW.md +++ b/docs/OVERVIEW.md @@ -147,18 +147,22 @@ Conventions worth knowing: ``` ┌──────────────────────────────────────────────────────────┐ │ [book mark] paper-doc 论文 模板 [mark] │ header -├──────────────────────────────────────┬───────────────────┤ -│ │ 模板配置 │ second-level -│ │ 模板列表 │ menu, right -│ │ 字段管理 │ -└──────────────────────────────────────┴───────────────────┘ +├───────────────────┬──────────────────────────────────────┤ +│ 模板配置 │ │ second-level +│ 模板列表 │ │ menu, left +│ 字段管理 │ │ +└───────────────────┴──────────────────────────────────────┘ ``` The mark appears at both ends of the header. The second-level menu sits on the -**right** and is driven entirely by `route.meta.section`, so a route declares +**left** and is driven entirely by `route.meta.section`, so a route declares which menu it belongs to and deep links render correctly on first paint. Routes without a `section` (the welcome page) show no menu. +Which side the menu lands on follows from its DOM order inside the flex row in +`App.vue` — first child, left — so moving it is a one-block change there rather +than a stylesheet override. + ### Routes | Path | View | Section | diff --git a/frontend/src/App.vue b/frontend/src/App.vue index ad46a14..6c57f21 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -3,9 +3,9 @@ * Application shell. * * Three bands, in this order: a header holding the mark, the two top-level - * sections, and the mark again at the far right; then the content area; then - * the second-level menu on the right, present only on routes that declare a - * `section` in their meta. + * sections, and the mark again at the far right; then the row below it, which + * is the second-level menu on the left followed by the content area. The menu + * is present only on routes that declare a `section` in their meta. */ import { computed } from 'vue' import { RouterView, RouterLink, useRoute } from 'vue-router' @@ -65,11 +65,13 @@ const section = computed(() => (route.meta.section as string | undefined) ?? '') + + + - - diff --git a/frontend/src/components/SectionAside.vue b/frontend/src/components/SectionAside.vue index 7cd7fa8..a67cec6 100644 --- a/frontend/src/components/SectionAside.vue +++ b/frontend/src/components/SectionAside.vue @@ -1,6 +1,6 @@