---
url: /cases.md
---
# 案例

组件文档讲的是「单个组件怎么用」，本分区讲的是「整页怎么拼」。每个案例都是一份
完整的页面级模板：真实文案、真实数据结构，源码就是案例页里的那段 `<script setup>`
与模板，直接拷走、替换文案，就是一个可上线的起点。

## 在线案例

## 怎么用这些案例

1. **在线浏览**：每个案例页的顶部就是跑在「浏览器舞台」里的整页预览，可以点击、筛选、编辑，明暗主题切换全局生效。
2. **拷贝源码**：案例页的 `.md` 文件（`docs-web/cases/`）就是完整源码，模板 + 数据 + 样式在一个文件里，没有隐藏依赖。
3. **对照组件文档改**：换文案、换数据只动 `<script setup>` 里的数组；某个组件的完整 Props 与插槽，回[组件总览](/components/overview)查。

## 场景路线图

| 场景 | 案例规划 | 状态 |
| --- | --- | --- |
| 企业官网 / 产品营销页 | [企业官网](/cases/corporate) | 已上线 |
| 内容站 / 个人博客 | [个人博客](/cases/blog) | 已上线 |
| 轻应用 / 工具型界面 | [云笔记工作台](/cases/notes) | 已上线 |
| 活动落地页 | 发布会、限时活动的单屏转化页 | 规划中 |
| 作品集主页 | 设计师 / 摄影师的作品陈列 | 规划中 |

有想看的场景，欢迎在仓库提 issue。

## 搭建心法

三个案例拆开看，套路是一致的：

* **版块化思维**：页面 = 一串版块。`EvSection` 的眉题 + 标题 + 描述三件套统一了每个版块的开头节奏，版块之间的留白交给组件自己。
* **数据进数组**：文案、卡片、FAQ、定价方案全部收进 `<script setup>` 的数组，模板只留一个 `v-for`。改版就是改数据，不是改结构。
* **动效节制**：`EvHero` 的 `reveal` 入场、`EvFeatureGrid` 的 `stagger` 交错、至多一处 `EvCarousel` 或 `EvMarquee`——整页有两处动效记忆点就足够，多了就吵。