+
+
Fantastic-startkit
+ 简单好用的 Vue3 项目启动套件
+ 
diff --git a/.vitepress/theme/components/ZoomImg.vue b/.vitepress/theme/components/ZoomImg.vue
new file mode 100644
index 0000000..a8110fa
--- /dev/null
+++ b/.vitepress/theme/components/ZoomImg.vue
@@ -0,0 +1,13 @@
+
+
+
+ ![]()
+:::
+
+
+
+
+## 使用说明
+
+- 购买者可将本产品用于任意「**符合国家法律法规**」的应用平台，禁止用于黄赌毒等危害国家安全与稳定的网站。
+- 本产品购买后可用于开发商业项目，不限制域名和项目数量。
+- 购买者需保证不传播产品源码，不得直接对本产品（或简单包装成同类产品）进行二次转售或发布。无论有意或无意，我们有权利收回产品授权及更新权限。
+- 本产品的源码（包含全部源码，及部分源码片段），在未经我们许可下，不可以用于任何形式的开源项目，否则我们有权利收回产品授权及更新权限。
+- 因使用本产品所产生的损害及风险，包括但不限于个人损害、商业赢利丧失、贸易中断、商业信息丢失或任何其它经济损失，需由购买者自行承担，我们不承担任何责任。
+- 虚拟物品不支持退货退款。
+- 最终解释权归 Fantastic-mobile 所有。
+
+## 专业版与基础版区别
+
+
+
\ No newline at end of file
diff --git a/components/auth-all.md b/components/auth-all.md
new file mode 100644
index 0000000..7f7cf92
--- /dev/null
+++ b/components/auth-all.md
@@ -0,0 +1,13 @@
+# AuthAll 鉴权
+
+## Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| :---- | :------------------------------------------------------------------ | :------------- | :----- | :----- |
+| value | 权限数据，如果传入为 array 时，全部匹配则鉴权通过，并显示 slot 内容 | array / string | - | - |
+
+## Slots
+
+| name | 说明 |
+| :--- | :------------------- |
+| - | 需要鉴权的 HTML 内容 |
\ No newline at end of file
diff --git a/components/auth.md b/components/auth.md
new file mode 100644
index 0000000..5283ced
--- /dev/null
+++ b/components/auth.md
@@ -0,0 +1,13 @@
+# Auth 鉴权
+
+## Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| :---- | :------------------------------------------------------------------------ | :------------- | :----- | :----- |
+| value | 权限数据，如果传入为 array 时，匹配到其中一项则鉴权通过，并显示 slot 内容 | array / string | - | - |
+
+## Slots
+
+| name | 说明 |
+| :--- | :------------------- |
+| - | 需要鉴权的 HTML 内容 |
\ No newline at end of file
diff --git a/components/index.md b/components/index.md
new file mode 100644
index 0000000..43f466e
--- /dev/null
+++ b/components/index.md
@@ -0,0 +1,32 @@
+# 介绍
+
+框架提供一系列的组件方便快速开发。
+
+## 基础组件
+
+基础组件由 [Vant](https://vant-ui.github.io/vant) 提供。
+
+
+
+## 内建组件
+
+为了实现 UI 组件库可替换，框架内建了一些组件，这些组件仅服务于框架自身，所以不建议在业务页面内使用。但如果你需要对框架进行二次开发，并保证视觉上的一致性，这时候你就会需要用到它们。
+
+内建组件存放在 `/src/ui-kit/` 目录下，并配置了使用时自动引入。
+
+你也可以点击 [基础版](https://fantastic-mobile.github.io/basic-example/#/component/built-in) 或 [专业版](https://fantastic-mobile.github.io/pro-example/#/component/built-in) 查看内建组件示例页面。
+
+## 扩展组件
+
+扩展组件为框架封装的组件，组件源码完全开放，如果觉得用着不顺手，可以到 `/src/components/` 目录下找到对应组件自行修改。
\ No newline at end of file
diff --git a/components/page-main.md b/components/page-main.md
new file mode 100644
index 0000000..e219a9b
--- /dev/null
+++ b/components/page-main.md
@@ -0,0 +1,16 @@
+# PageMain 内容块
+
+## Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| :------- | :----------------------------------- | :------ | :----- | :----- |
+| title | 标题 | string | - | - |
+| collaspe | 是否折叠 | boolean | - | false |
+| height | 展示高度，当 collaspe 为 true 时生效 | string | - | - |
+
+## Slots
+
+| name | 说明 |
+| :---- | :----------------- |
+| - | 内容区的 HTML 内容 |
+| title | 标题区的 HTML 内容 |
\ No newline at end of file
diff --git a/components/sparkline.md b/components/sparkline.md
new file mode 100644
index 0000000..2bf5961
--- /dev/null
+++ b/components/sparkline.md
@@ -0,0 +1,15 @@
+# Sparkline 迷你图 ` 自定义块进行语言维护，可访问 `/src/views/feature/function/i18n.vue` 查看示例。
+
+更多 [vue-i18n](https://vue-i18n.intlify.dev/) 的使用技巧请参考官方文档。
+
+## 与服务端交互
+
+所有的请求均会在请求头里带上 [`Accept-Language`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Accept-Language) ，后端可根据这一状态信息做动态数据国际化处理。
diff --git a/guide/intro.md b/guide/intro.md
new file mode 100644
index 0000000..31ef34e
--- /dev/null
+++ b/guide/intro.md
@@ -0,0 +1,13 @@
+# 文档说明
+
+::: tip ⭐⭐⭐⭐⭐
+相信你已经准备或正在使用 Fantastic-mobile 进行开发工作了，在此之前，希望你可以去 **Github** 或者 **Gitee(码云)** 帮我点个 ⭐ ，这将是对我极大的鼓励。
+
+[](https://github.com/fantastic-mobile/basic)
+
+[](https://gitee.com/fantastic-mobile/basic)
+:::
+
+文档中标记 ` 组件是本框架区别于其他 H5 框架的最重要的特性。它提供了页面整体布局的基础，包括顶部导航栏、顶部标签栏、返回顶部、记录滚动位置等特性。
+
+## 基本用法
+
+```vue
+
+
+
+
+
+```
+
+本组件不是一个可以随处使用的组件，它必须应用在根节点，并且一个页面里只能有一个 `` 组件。
+
+## Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| :------------------------------------------------- | :--------------------------------------------------------------------------------------- | :---------------- | :---------------------------------------- | :----- |
+| titleCenter
+
+
+
+```
+
+#### path
+
+跳转路由地址
+
+| 类型 | 默认值 | 说明 |
+| :----: | :----: | :----------- |
+| string | / | 跳转路由地址 |
+
+#### icon
+
+| 类型 | 默认值 | 说明 |
+| :----: | :----: | :------- |
+| string | / | 显示图标 |
+
+该项配置最终会通过 `` 和 `` 组件，具体使用如下：
+
+```vue-html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## 鉴权指令
+
+对于单个元素，也提供了 `v-auth` 和 `v-auth-all` 鉴权指令，使用上对比鉴权组件更方便，当然它能做的事情也更简单。
+
+```vue-html
+
+
+
+
+
+
+
+
+```
+
+## 鉴权函数
+
+鉴权组件和鉴权指令控制的是页面上的元素，而鉴权函数则更多是使用在业务流程代码里的权限判断。
+
+```ts
+import useAuth from '@/utils/composables/useAuth'
+const { auth, authAll } = useAuth()
+
+// 单权限验证，返回 true 或 false
+auth('department.create')
+
+// 多权限验证，用户只要具备其中任何一个权限，则验证通过，返回 true 或 false
+auth(['department.create', 'department.edit'])
+
+// 多权限验证，用户必须具备全部权限，才验证通过，返回 true 或 false
+authAll(['department.create', 'department.edit'])
+```
+
+## 小技巧
+
+由于权限配置不涉及角色，所以在实现上会更灵活，开发者可自行扩展出角色层，根据不同角色动态设置该角色所拥有的权限，然后用户与角色挂钩，这样就无需繁琐的给每个用户重复分配权限。
+
+当然了，业务有大有小，针对一些简单场景，对权限没有这么多复杂的要求，也可以将角色直接配置到 `auth` 里。
+
+```vue
+
+
+
+
+
+```
+
+如上所示，如果用户是 `admin` 权限，则可以访问该路由。
diff --git a/guide/q-a.md b/guide/q-a.md
new file mode 100644
index 0000000..530de05
--- /dev/null
+++ b/guide/q-a.md
@@ -0,0 +1,97 @@
+# 常见问题
+
+## 安装依赖时有警告
+
+{data-zoomable}
+
+这是一个可以无视的警告，因为依赖已经安装成功了。
+
+如果对这个问题感兴趣，可以浏览下这个 [issue](https://github.com/pnpm/pnpm/issues/4183) ，里面有给出一个忽略警告的方案，就是在 `package.json` 中添加：
+
+```json
+{
+ "pnpm": {
+ "peerDependencyRules": {
+ "ignoreMissing": [
+ "postcss",
+ "rollup"
+ ]
+ }
+ }
+}
+```
+
+这样你下次再安装依赖的时候，就不会出现该警告了。
+
+## 为什么本地开发环境首次载入很慢
+
+主要是 Vite 的原因，具体可以阅读这篇文章了解《[为什么有人说 vite 快，有人却说 vite 慢？](https://juejin.cn/post/7129041114174062628)》。
+
+Vite 4.3 显著提升了开发服务器的性能，具体可以阅读这篇文章了解《[Vite 4.3 is out!](https://vitejs.dev/blog/announcing-vite4-3.html)》，同时框架 v3.0.0 版本开始，vite 也升级到了 4.3 版本。
+
+## 项目 URL 里的 # 号能不能去掉
+
+这是因为路由默认使用的是 Hash 模式，你可以在 `/src/router/index.ts` 修改为 HTML5 模式，但需要注意，开启 HTML5 模式，服务器也需要做相应的配置调整，详细可阅读《[Vue-router 不同的历史模式](https://next.router.vuejs.org/zh/guide/essentials/history-mode.html)》。
+
+## 页面切换后显示空白
+
+因为路由切换有使用到 `` 动画，而 `` 组件无法处理多个根节点的组件，所以请检查路由对应所有的页面文件的根节点是否均为单个。
+
+错误示例：
+
+```vue
+
+
+
+
+
| Fantastic-mobile 专业版 | +|
|---|---|
|
+ 限时优惠：￥369.00
+ 原价：￥599.00
+ |
+ |
|
+ |
+
+ |
+
| 专业版用户可加入专业版微信群（群内提供框架技术支持），除此之外，每一位专业版用户可免费绑定一位开发者（不支持换绑），绑定的开发者同样可加入专业版微信群，额外绑定更多开发者为 100 元/人。 | +|
| ⭐功能与服务⭐ | +基础版 | +专业版 | +
|---|---|---|
| 长期维护更新，提供新特性 | +✅ | +|
| 开发与构建工具 | +Vue 3 / Vite | +|
| UI 组件库 | +默认使用 Vant ，可替换成任意 UI 组件库 | +|
| 主题风格 | +明亮 1 款 / 暗黑 1 款 | +明亮 6 款 / 暗黑 6 款 | +
| 布局组件 | +部分功能 | +完整功能 | +
| 导航栏预设按钮（布局组件） | ++ | ✅ | +
| 导航栏模式（布局组件） | ++ | ✅ | +
| 导航栏标题非居中（布局组件） | ++ | ✅ | +
| 导航栏自定义标题（布局组件） | ++ | ✅ | +
| 多套标签栏（布局组件） | ++ | ✅ | +
| 标签栏角标（布局组件） | ++ | ✅ | +
| 全方位权限验证 | +✅ | +✅ | +
| 扩展组件 | +5 个 | +6 个 | +
| 国际化 | ++ | ✅ | +
| Mock 数据 | +✅ | +✅ | +
| 错误日志上报 | ++ | ✅ | +
| 业务应用静态页面 | ++ | ✅ | +
| 团队代码规范 | +✅ | +✅ | +
| 框架版权信息 | +需保留 | +可删除 | +
| 技术支持 | ++ 查看 + | +|
| 演示地址 | ++ 访问 + | ++ 访问 + | +
你有该权限
+ +你没有该权限
+ +你有该权限
+ +你没有该权限
+ +你有该权限
+ +你没有该权限
+ +text h1
+text h2
+ + + + 没有节点也是不行的 + +``` + +正确示例： + +```vue + +
+
+
+
+
+ text h1
+text h2
+
+ 这样就没问题啦
+
+
+```
+
+相关 [Issue](https://github.com/vuejs/vue-next/issues/1850) 说明。
+
+## 开发环境修改代码后，路由跳转导致页面空白
+
+参考这个 [issue](https://github.com/vuejs/core/issues/7121) ，未来 Vue 官方可能会修复这个问题，目前只能手动刷新浏览器。
+
+## 构建报错，提示内存溢出
+
+构建时失败并在错误信息里提示 `Reached heap limit Allocation failed - JavaScript heap out of memory` 。
+
+你可以执行 `pnpm add cross-env -D` 安装 cross-env 依赖，并在 `package.json` 里修改构建脚本指令：
+
+```json {3}
+{
+ "scripts": {
+ "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vue-tsc --noEmit && vite build"
+ }
+}
+```
+
+其中 8192 表示内存空间大小。
+
+## 不会 TypeScript 怎么办
+
+不管个人还是团队、产品或者项目，从长远考虑我们都建议你学习 TypeScript，因为它是未来的趋势，而且大部分框架、库、插件都是用 TypeScript 开发的，足以证明它是构建一款成熟稳健产品的基石。
+
+但考虑到实际情况，会各种客观原因存在，如果必须要用传统 JavaScript 进行开发，你可以在 `tsconfig.json` 里将 `allowJs` 设置为 `true` 即可，框架原有的 TypeScript 代码不会受到影响，并且你也可以在项目中使用 JavaScript 编写代码。
diff --git a/guide/ready.md b/guide/ready.md
new file mode 100644
index 0000000..3d39e74
--- /dev/null
+++ b/guide/ready.md
@@ -0,0 +1,83 @@
+# 准备工作
+
+## 源码
+
+阅读开发文档前，请确保手上已经有 Fantastic-mobile 源码，因为文档中提及的内容，都是需要在本地项目中编写或修改代码并运行才能呈现的。
+
+:::tip 源码分为两种：
+- **框架源码** 不含示例代码，可直接用于实际开发
+- **演示源码** 同演示站，在框架源码基础上，提供了大量示例代码
+:::
+
+### 基础版
+
+到 [Github Releases](https://github.com/fantastic-mobile/basic/releases) 页面下载最新版本的压缩包，如下图所示：
+
+
+
+或者也可以从 Github/Gitee 上拉取源码，但需要注意，直接拉取源码可能会包含未发布的内容，最终发布时可能会有变动，请谨慎使用。
+
+::: code-group
+
+```sh [从 Github 拉取]
+# 拉取框架源码
+git clone https://github.com/fantastic-mobile/basic.git
+# 拉取演示源码
+git clone -b example https://github.com/fantastic-mobile/basic.git
+```
+
+```sh [从 Gitee 拉取]
+# 拉取框架源码
+git clone https://gitee.com/fantastic-mobile/basic.git
+# 拉取演示源码
+git clone -b example https://gitee.com/fantastic-mobile/basic.git
+```
+
+:::
+
+### 专业版
+
+专业版用户会被邀请加入到 [Fantastic-mobile](https://github.com/fantastic-mobile) Github 官方组织，加入组织后可访问[专业版私有仓库](https://github.com/fantastic-mobile/pro)，源码获取方式和基础版无差异，只是源码仓库不同。
+
+如果你想获取专业版源码，可以点[这里](../buy)去购买。
+
+## 开发环境
+
+使用本框架前，需要在本地依次安装好 [Node.js](https://nodejs.org/), [pnpm](https://pnpm.io/zh/), [Git](https://git-scm.com/)(非必须) 和 [Visual Studio Code](https://code.visualstudio.com/)。
+
+::: warning 注意
+在 [package.json](https://github.com/fantastic-mobile/basic/blob/main/package.json#L4-L6) 文件中有限制 node 要求版本，建议使用最新 LTS 版本。
+:::
+
+然后在 Visual Studio Code 里安装好以下扩展：
+
+- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+- [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+- [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss)
+
+在 Visual Studio Code 里打开源码文件夹，右下角会自动提示需要安装的依赖，直接点击安装即可。
+
+{data-zoomable}
+
+::: tip 额外推荐
+以上为开发时必备扩展，以下则是作者推荐安装的扩展，安装它们将在一定程度上提升开发效率。
+
+- [Chinese (Simplified) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans) 中文语言包
+- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) 在代码中高亮颜色
+- [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) 高亮显示匹配的标签
+- [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview) 图片预览
+- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 彩虹缩进提示
+:::
+
+## 技术栈
+
+了解并熟悉框架使用到的技术栈，能让你使用本框架更得心应手。
+
+- [Vite](https://cn.vitejs.dev/)
+- [Vue 3](https://cn.vuejs.org/) ([v3 迁移指南](https://v3-migration.vuejs.org/))
+- [Vue Router](https://router.vuejs.org/zh/) ([unplugin-vue-router](https://github.com/posva/unplugin-vue-router) 基于文件的类型化路由)
+- [Pinia](https://pinia.vuejs.org/zh/)
+- [UnoCSS](https://unocss.dev/)
diff --git a/guide/router.md b/guide/router.md
index 1ba6510..b01ccb8 100644
--- a/guide/router.md
+++ b/guide/router.md
@@ -1,141 +1,115 @@
# 路由
-路由实现了自动注册，路由配置存放在 `/src/router/modules/` 目录下，每一个 ts 文件会被视为一个路由模块，可参考 `/src/router/modules/example.ts` 文件。
-
-更多使用技巧请移步至 Vue-router [官方文档](https://next.router.vuejs.org/zh/)。
-
-## 基于文件系统的路由
-
-> 该特性由 [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) 和 [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) 提供支持。
-
-传统使用路由的方式需要手动编写路由，而基于文件系统的路由则会根据文件的目录结构自动生成路由结构，从而节省开发周期。
-
-默认未开启该模式，如果需要启用，到 `/src/router/index.ts` 文件里找到下面代码片段，通过开启/关闭注释修改成下面这样：
-
-```ts {2-13,16-20}
-// 注释以下代码
-// const routesContext: any = import.meta.glob('./modules/*.ts', { eager: true })
-// Object.keys(routesContext).forEach((v) => {
-// routes.push(routesContext[v].default)
-// })
-// routes.push({
-// path: '/:pathMatch(.*)*',
-// component: () => import('@/views/[...all].vue'),
-// meta: {
-// title: '找不到页面',
-// },
-// })
-// routes = routes.flat()
-
-// 开启以下代码
-import { setupLayouts } from 'virtual:meta-layouts'
-import generatedRoutes from 'virtual:generated-pages'
-generatedRoutes.forEach(v => {
- routes.push(v?.meta?.layout != false ? setupLayouts([v])[0] : v)
-})
-```
+框架无需手动配置路由，而是基于文件系统自动生成路由，意味着开发者只需在 `/src/views/` 目录下创建文件，就会根据文件目录自动生成对应的路由，该能力由 [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) 提供。
-启用基于文件系统的路由后，`/src/router/modules/` 目录将不再被需要，而 `/src/views/` 目录下的文件会自动被注册成路由。
+## 配置规范
+
+如果对 [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) 的规范还不了解，建议先阅读官方文档。框架在此基础上，预设了一些规范。以下面的目录结构为例：
```
-文件系统 路由地址 路由 name
-
-views
-├─ example
-│ ├─ components
-│ │ └─ List
-│ │ └─ index.vue
-│ ├─ params
-│ │ └─ [id].vue /example/params/:id example-params
-│ ├─ axios.vue /example/axios example-axios
-│ ├─ cookie.vue /example/cookie example-cookie
-│ └─ svgicon.vue /example/svgicon example-svgicon
-├─ [...all].vue /:all(.*)* all
-├─ index.vue / index
-└─ login.vue /login login
+目录结构 路由地址 路由 name
+
+src/views/
+├── _about
+│ └── index.vue
+├── example
+│ ├── _test.vue
+│ ├── components
+│ │ └── dialog.vue
+│ ├── svgicon.vue /example/svgicon /example/svgicon
+│ └── index.vue /example /example/
+├── cart
+│ ├── detail
+│ │ └── [id].vue /cart/detail/:id /cart/detail/[id]
+│ └── index.vue /cart /cart/
+├── news
+│ ├── detail.[id].vue /news/detail/:id /news/detail.[id]
+│ └── index.vue /news /news/
+├── [...all].vue /:all(.*) /[...all]
+├── index.vue / /
+└── login.vue /login /login
```
-通过上面的示例，可以看出几个特性：
-
-- 使用路由参数需通过 `[ ]` 将参数名包裹，并设为文件名
-- 文件夹不会生成路由，例如 example 文件夹并没有生成 `/example` 路由
-- 路由 name 会根据文件的目录结构自动生成，并用 `-` 连接，可确保 name 的唯一性
-- 所有 components 目录均不会生成路由
-
----
-
-默认生成的所有路由均为嵌套路由，父级 component 指向 `/src/layout/index.vue` 组件，即：
-
-```ts
-// 生成的路由
-{
- path: '/login',
- component: () => import('/src/layout/index.vue'),
- children: [
- {
- path: '',
- component: () => import('/src/views/login.vue'),
- name: 'login',
- meta: {
- layout: 'index',
- },
- },
- ],
-}
-```
+通过上面的示例，可以看出几个规范：
-你可以在 SFC 单文件组件里设置 layout ：
+- 文件夹或文件名开头为 `_` 的不会生成路由
+- 所有 `components` 文件夹下的文件均不会生成路由
+- `index.vue` 文件会生成一个空路由，例如 `/src/views/news/index.vue` -> `/news` 路由
+- 路由参数通过 `[ ]` 将参数名包裹，例如 `/src/views/user_[id].vue` -> `/user_:id` 路由。设置可以添加多个参数 `/src/views/product_[skuId]_[seoDescription].vue`
+- 路由 name 默认为文件路径，也可通过 `definePage()` 在 `.vue` 文件内设置并覆盖
-```vue {1-4}
-
-meta:
- layout: example
-
+::: warning 注意
+默认生成的路由可能为嵌套路由，但为了用一套 API 统一处理页面缓存，框架会将所有路由均处理成一级路由，并在 `App.vue` 里处理缓存逻辑。意味着如果同时创建 `/src/views/users/index.vue` 和 `/src/views/users.vue` 组件，`/src/views/users/index.vue` 不会在 `/src/views/users.vue` 的 `` 中呈现。
-
-
-meta:
- layout: false
-
+通过 `definePage()` 可以修改路由对象或添加路由元信息：
+
+```vue {2-7}
+
- ![]()
-
-::: details 在线预览
-
-:::
-
-### 抢先预购
-
-:::tip 说明
-正式发布时会区分 **基础版** 和 **专业版** ，基础版开源免费，基于 MIT 协议，专业版首发定价为 **￥369** 元。
-:::
-
-现在购买专业版只需 ￥269.00 元。同时为了回馈老客户，如果你是 [Fantastic-admin](https://fantastic-admin.github.io/) 或 [One-step-admin](https://one-step-admin.github.io/) 专业版用户，现在购买只需 ￥199.00 元。
-
-预购的用户可以提前加入官方 Github 组织，获取未发布的代码，以及参与框架的开发讨论，详情请加作者微信进行在线咨询。
-
-
login 页面
-
-```
+这也意味着 `/src/views/users/detail/[id].vue` 和 `/src/views/users/detail.[id].vue` 生成的路由和行为都是一样的，只有路由 name 有区别。
-```ts {4,11}
-// 生成的路由
-{
- path: '/login',
- component: () => import('/src/layout/example.vue'),
- children: [
- {
- path: '',
- component: () => import('/src/views/login.vue'),
- name: 'login',
- meta: {
- layout: 'example',
- },
- },
- ],
-}
-```
+这与 [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) 默认行为略有不同。
+:::
-同样也可以设置成 `layout: false` ，这样该路由就不会生成嵌套路由。
+## definePage()
-```vue {1-4}
-login 页面
+
```
-```ts
-// 生成的路由
-{
- path: '/login',
- component: () => import('/src/views/login.vue'),
- name: 'login',
- meta: {
- layout: false,
- },
-}
-```
\ No newline at end of file
+:::danger 警告
+不能在 `definePage()` 中使用变量，因为其传递的参数会在构建时提取并从 `
+```
+
+## 组件 name
+
+`
+
+
+```
+
+Vue 3.3 开始，你可以使用 `defineOptions` 在 `
+```
diff --git a/guide/watermark.md b/guide/watermark.md
new file mode 100644
index 0000000..ba07063
--- /dev/null
+++ b/guide/watermark.md
@@ -0,0 +1,39 @@
+# 页面水印