2026/9/5 8:29:28
FEATURED · 精选文章 
第 4 篇布局骨架——页面壳、栅格、卡片本篇目标把「统一布局」做成几个固定的布局组件。之后每个页面 布局骨架 一份 schemaAI 不碰布局布局由这几个组件锁定。1. 布局拆成四个固定件组件职责放哪PageShell整个页面的外层内边距、最大宽度、纵向节奏src/components/layout/PageShell.vuePageHeader页头标题 右侧操作区src/components/layout/PageHeader.vueSectionCard内容卡片白底、圆角、可带标题src/components/layout/SectionCard.vueFormGrid表单单栅格字段按列排布、自动换行src/components/layout/FormGrid.vue这四个组件是本系列自研的代码很短、可自由改。布局规则全部内聚在这里后续所有页面共用等于「布局写死」的落地实现。2. 逐个实现PageShell.vuescript setup langts defineProps{ maxWidth?: string }() /script template div classmin-h-screen bg-background main classmx-auto w-full px-[var(--spacing-page)] py-[var(--spacing-page)] :style{ maxWidth: maxWidth ?? 960px } slot / /main /div /templatePageHeader.vuescript setup langts defineProps{ title: string; description?: string }() /script template div classmb-[var(--spacing-page)] flex flex-wrap items-center justify-between gap-4 div h1 classtext-[var(--text-title)] font-semibold text-foreground{{ title }}/h1 p v-ifdescription classmt-1 text-[var(--text-caption)] text-muted-foreground {{ description }} /p /div div classflex items-center gap-2slot nameactions //div /div /templateSectionCard.vuescript setup langts defineProps{ title?: string }() /script template section classrounded-[var(--radius-lg)] border border-border bg-card p-[var(--spacing-card)] h2 v-iftitle classmb-4 text-[var(--text-body)] font-semibold text-foreground {{ title }} /h2 slot / /section /templateFormGrid.vuescript setup langts import { computed } from vue const props defineProps{ columns?: number }() // 每格最小宽度窄屏自动换行成单列 const style computed(() ({ gridTemplateColumns: repeat(${props.columns ?? 2}, minmax(0, 1fr)), })) /script template div classgrid gap-[var(--spacing-field)] :stylestyle slot / /div /template说明columns默认 2 列。移动端如果想强制单列可在 FormGrid 内加一条媒体查询或用 Tailwind 的响应式类自行调整本系列保持简单字段多时第 6 篇的 span 属性可跨列。3. 组合成一个「固定壳」示例script setup langts import PageShell from /components/layout/PageShell.vue import PageHeader from /components/layout/PageHeader.vue import SectionCard from /components/layout/SectionCard.vue import FormGrid from /components/layout/FormGrid.vue import { Button } from /components/ui/button /script template PageShell PageHeader title客户资料 description统一样式的表单页示例 template #actionsButton保存/Button/template /PageHeader SectionCard title基本信息 FormGrid :columns2 div这里放第 6 篇的 SchemaForm 渲染结果/div /FormGrid /SectionCard /PageShell /template4. 为什么这能锁死布局页边距、最大宽度、卡片圆角、字段间距全部在四个组件里写死新页面只需「用这四个组件拼壳 塞 schema」布局不可能歪AI 无论生成多少页都进同一个壳5. 验证复制上面代码跑pnpm dev确认标题 / 卡片 / 操作区位置正常。把FormGrid的columns改成 3看是否自动变三列缩窄浏览器窗口到手机宽度确认能换行。修改--spacing-page第 3 篇变量整页留白跟着变 → 布局与 Tokens 联动成功。本篇小结布局被收敛成 PageShell / PageHeader / SectionCard / FormGrid 四个组件所有页面共用布局固定下一步定义「每次变」的那部分——第 5 篇Schema 设计
第 4 篇：布局骨架——页面壳、栅格、卡片
第 4 篇布局骨架——页面壳、栅格、卡片本篇目标把「统一布局」做成几个固定的布局组件。之后每个页面 布局骨架 一份 schemaAI 不碰布局布局由这几个组件锁定。1. 布局拆成四个固定件组件职责放哪PageShell整个页面的外层内边距、最大宽度、纵向节奏src/components/layout/PageShell.vuePageHeader页头标题 右侧操作区src/components/layout/PageHeader.vueSectionCard内容卡片白底、圆角、可带标题src/components/layout/SectionCard.vueFormGrid表单单栅格字段按列排布、自动换行src/components/layout/FormGrid.vue这四个组件是本系列自研的代码很短、可自由改。布局规则全部内聚在这里后续所有页面共用等于「布局写死」的落地实现。2. 逐个实现PageShell.vuescript setup langts defineProps{ maxWidth?: string }() /script template div classmin-h-screen bg-background main classmx-auto w-full px-[var(--spacing-page)] py-[var(--spacing-page)] :style{ maxWidth: maxWidth ?? 960px } slot / /main /div /templatePageHeader.vuescript setup langts defineProps{ title: string; description?: string }() /script template div classmb-[var(--spacing-page)] flex flex-wrap items-center justify-between gap-4 div h1 classtext-[var(--text-title)] font-semibold text-foreground{{ title }}/h1 p v-ifdescription classmt-1 text-[var(--text-caption)] text-muted-foreground {{ description }} /p /div div classflex items-center gap-2slot nameactions //div /div /templateSectionCard.vuescript setup langts defineProps{ title?: string }() /script template section classrounded-[var(--radius-lg)] border border-border bg-card p-[var(--spacing-card)] h2 v-iftitle classmb-4 text-[var(--text-body)] font-semibold text-foreground {{ title }} /h2 slot / /section /templateFormGrid.vuescript setup langts import { computed } from vue const props defineProps{ columns?: number }() // 每格最小宽度窄屏自动换行成单列 const style computed(() ({ gridTemplateColumns: repeat(${props.columns ?? 2}, minmax(0, 1fr)), })) /script template div classgrid gap-[var(--spacing-field)] :stylestyle slot / /div /template说明columns默认 2 列。移动端如果想强制单列可在 FormGrid 内加一条媒体查询或用 Tailwind 的响应式类自行调整本系列保持简单字段多时第 6 篇的 span 属性可跨列。3. 组合成一个「固定壳」示例script setup langts import PageShell from /components/layout/PageShell.vue import PageHeader from /components/layout/PageHeader.vue import SectionCard from /components/layout/SectionCard.vue import FormGrid from /components/layout/FormGrid.vue import { Button } from /components/ui/button /script template PageShell PageHeader title客户资料 description统一样式的表单页示例 template #actionsButton保存/Button/template /PageHeader SectionCard title基本信息 FormGrid :columns2 div这里放第 6 篇的 SchemaForm 渲染结果/div /FormGrid /SectionCard /PageShell /template4. 为什么这能锁死布局页边距、最大宽度、卡片圆角、字段间距全部在四个组件里写死新页面只需「用这四个组件拼壳 塞 schema」布局不可能歪AI 无论生成多少页都进同一个壳5. 验证复制上面代码跑pnpm dev确认标题 / 卡片 / 操作区位置正常。把FormGrid的columns改成 3看是否自动变三列缩窄浏览器窗口到手机宽度确认能换行。修改--spacing-page第 3 篇变量整页留白跟着变 → 布局与 Tokens 联动成功。本篇小结布局被收敛成 PageShell / PageHeader / SectionCard / FormGrid 四个组件所有页面共用布局固定下一步定义「每次变」的那部分——第 5 篇Schema 设计 
