4e2e3abc30
The writing surface was capped at 900px and centred, on the reasoning that a narrower text column reads better. That is true of a document viewer, but this page is also the editing surface: each paragraph's heading sits on the left of its row and its edit button on the right, and capping the sheet left those two floating in the middle of the panel — 385px of nothing on each side at 1920, and worse on a wider screen. It reads as a broken layout, not a measure. The sheet now fills the card. Measured in a browser at 2560/1920/1440/1280/1024 wide, the row spans the panel with a 37px inset on both sides at every width, the edit button lands on the right inset, and nothing overflows horizontally. Note for later: prose now uses the full width too, which is 106 字/行 at 1920 and 149 字/行 at 2560. If that proves too long to read comfortably, the fix is a max-width on `.paragraph-body` alone — the heading, the edit button and the row's hover highlight would stay full width.
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