简体中文
模板
演练场（Playground）里的每个完整页面都是一个极佳的实践起点。在这里，你可以直观查看组件在真实业务场景中的排版组合方式。选中模板后，对应的完整 Vue 源码会直接呈现在内置编辑器中，右侧预览也会跟随当前主题与深色模式即时响应。
你还可以通过在链接后添加 ?template= 参数直接跳转到指定模板，例如：空白页模板。
- 空白页模板（Blank）：包含基础的页面标题和内容区，没有多余的导航或复杂组件，适合用来从零开始搭建页面；
- 业务场景模板：其余模板预先组装好了后台仪表盘、AI 对话、任务看板等结构。当你需要类似结构时，直接基于它们二次修改能减少搭建步骤。
以下是所有内置模板的汇总列表，点击右侧的模板名称即可在演练场中直接打开查看并调试代码：
开始
| 模板 | 打开 |
|---|---|
| 主题展示 | theme-showcase |
AI 对话
| 模板 | 打开 |
|---|---|
| AI 对话 | ai-chat |
| AI 对话落地页 | ai-chat-landing |
内容
| 模板 | 打开 |
|---|---|
| 卡片网格 | library |
| 文档目录 | documentation |
| 文档设计 | documentation-design |
| 技术文档 | documentation-technical |
| 订单详情 | detail-page |
| 商品详情 | product-detail |
| 工作项详情 | work-item-detail |
仪表盘
| 模板 | 打开 |
|---|---|
| 分析仪表盘 | dashboard |
| 数据仪表盘 | dashboard-comparison |
| 高管摘要仪表盘 | dashboard-scorecard |
| 漏斗与群组仪表盘 | dashboard-cohort-funnel |
| 项目组合仪表盘 | dashboard-composition |
| 项目状态仪表盘 | dashboard-progress |
| 服务监控仪表盘 | dashboard-alert-rail |
表单
| 模板 | 打开 |
|---|---|
| 结账表单 | payment-form |
| 结账向导 | checkout-wizard |
| 联系表单 | contact-form |
| 对话框向导 | form-wizard-dialog |
| 表单向导 | form-wizard |
| 内联向导 | form-wizard-inline |
| 双列表单 | form-two-column |
| 纵向向导 | form-wizard-vertical |
画廊
| 模板 | 打开 |
|---|---|
| 居中主视觉 | centered-hero |
| 经典画廊 | classic-gallery |
| 画廊主视觉 | gallery-hero |
| 混合画廊 | mixed-gallery |
| 商品画廊 | product-gallery |
| 侧边画廊 | side-gallery |
登录
| 模板 | 打开 |
|---|---|
| 登录卡片 | login-card |
| 分屏登录 | login-split |
| SSO 登录 | login-sso |
设置
| 模板 | 打开 |
|---|---|
| 设置对话框 | settings-dialog |
| 设置表单 | settings |
| 设置面板 | settings-sidebar |
框架
| 模板 | 打开 |
|---|---|
| 空白页 | blank |
| 顶栏 + 侧栏 | shell-nav |
| 侧边导航 | shell-side-nav |
| 顶部导航 | shell-top-nav |
表格
| 模板 | 打开 |
|---|---|
| 可折叠表格 | table-collapsible |
| 对比表格 | table-comparison |
| 可筛选表格 | table-filter |
| 分组表格 | table-grouped |
| 收件箱表格 | table-inbox |
| 可搜索表格 | table-page |
| 树形表格 | table-tree |
工具
| 模板 | 打开 |
|---|---|
| 画布编辑器 | canvas-editor |
| 文件浏览器 | file-explorer |
| IDE | ide |
| 看板 | kanban-board |
| 页面编辑器 | editor |