The shell: the app mark at both ends of the header, the two top-level
entries between them, and the second-level menu on the right. That menu is
driven entirely by `route.meta.section`, so a route declares which menu it
belongs to and a deep link renders the right one on first paint; routes with
no section (the welcome page) show none.
Screens:
/ welcome, with live template and field counts so the
page doubles as a connectivity check
/papers 论文, content still to be decided
/templates/list the template table: search, create, edit, preview,
delete, batch delete, pagination
/templates/fields the field library: the same CRUD, plus level filter
The template form is the centre of it. Fields are chosen from the flat
library by clicking — any subset, any order, the same field more than once —
and the selection is always rendered sorted by `sort`, so editing a number
reorders the outline immediately. Repeats and duplicate sorts are surfaced as
warnings rather than blocked, because a repeat is often deliberate and a tie
is legal; a "自动排序" button renumbers the selection 1..N. The panel on the
right of the picker opens 字段管理 in a second tab, so a half-filled form is
never lost to a navigation.
The preview drawer renders the outline exactly as it will read, at each
field's own size and colour, with the sort value shown alongside — the
quickest way to confirm the ordering before writing against a template.
Also in this change:
- ApiError now extends Error. It was a plain object, so the common
`error instanceof Error ? error.message : ...` idiom fell through to a
generic message and threw away what the server actually said — such as
which template name is already taken. Server messages now reach the user.
- font colours are normalised client-side on blur, matching the backend,
so a hand-typed rgb(255, 0, 0) is tidied up rather than rejected later.
- api/health.ts is removed: the rewritten welcome page was its only
consumer, and the counts already prove connectivity.
Element Plus ships no html/body reset, so the browser default
`body { margin: 8px }` applied, while the app shell was declared
`min-height: 100vh`. The document therefore measured one viewport plus
8px: a vertical scrollbar was permanently visible on the right edge even
for short pages, every page was pushed 8px off the intended 20px gutter,
and the window and .el-main both scrolled.
Add src/styles/base.css, imported once from main.ts after Element Plus,
which now owns the reset and the shell contract:
- html/body/#app/.app-shell are exactly one viewport tall with no margin;
body never scrolls, so the window has no scrollbar
- .app-main is the single scroll container (min-height: 0, overflow-y
auto, overflow-x hidden) with a slim low-contrast scrollbar that only
shows when content truly exceeds the viewport
- global guards against content escaping the gutter: media max-width,
wrapping for long code strings
- shared .page helper for a consistent per-view vertical rhythm
Also let the header menu track its content box, so its active underline
stays flush with the header separator instead of spilling past it, and
drop the now-unused RouterLink import.
govin