govin
0d0aa20be2
The logo block stopped wherever its text happened to end (~140px) while the rail below it is 208px, so the left edge was a step rather than a column. Both now read `asideWidth()` from src/layout.ts, so they cannot drift apart, and collapsing the rail narrows the logo block with it — the wordmark is dropped and the mark centres in the 56px strip. The block also carries the rail's separator up through the header, so the column reads as one piece. The header's own 20px padding had to go for this to work: the logo block has to start at x=0 to be flush with the rail, so the nav and the right-hand mark now own their insets. The mark's inset comes from the same `ASIDE_INSET` as the rail's section title, so the two line up. A side effect worth keeping: the rail is 208px and the top nav's first item and .el-main are each inset a further 20px by their own Element Plus defaults, so the nav text, the page body and the page header all start on one vertical line. The widths live in a module rather than CSS custom properties because el-aside takes its width through a prop and would otherwise fight an inline style.
frontend
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VS Code + Vue (Official) (and disable Vetur).
Recommended Browser Setup
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- Firefox:
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
Customize configuration
See Vite Configuration Reference.
Project Setup
pnpm install
Compile and Hot-Reload for Development
pnpm dev
Type-Check, Compile and Minify for Production
pnpm build