💪
先进的技术栈
Vite + Vue3 + Vue-router + Pinia + UnoCSS + TypeScript ，采用业内先进的技术栈，使框架始终保持新鲜
作者其他作品
',2),pi=[vi];function fi(o,e){return s(),u("div",null,pi)}const hi=$(mi,[["render",fi],["__scopeId","data-v-13b2f7c0"]]),_i={key:0},gi=["src"],bi=_({__name:"ZoomImg",props:{src:String},setup(o){return(e,t)=>o.src?(s(),u("p",_i,[v("img",{"data-zoomable":"",src:i($e)(o.src),loading:"lazy"},null,8,gi)])):h("",!0)}}),$i={...Xe,Layout(){return Ae(Xe.Layout,null,{"aside-bottom":()=>Ae(hi)})},setup(){const{frontmatter:o}=Rt(et()),e=me(),t=()=>{ci("[data-zoomable]",{background:"var(--vp-c-bg)"})};te(()=>t()),x(()=>e.path,()=>De(()=>t())),si({repo:"fantastic-mobile/fantastic-mobile.github.io",repoId:"R_kgDOL53UCw",category:"Announcements",categoryId:"DIC_kwDOL53UC84CfRvQ",mapping:"pathname",inputPosition:"top",lang:"zh-CN",lightTheme:"light",darkTheme:"transparent_dark",loading:!0},{frontmatter:o,route:e},!0)},enhanceApp({app:o}){o.component("Badge",ct),o.component("ZoomImg",bi)}};export{$i as R,Ns as c,w as u};
diff --git a/assets/components_auth-all.md.DA7uNEaz.js b/assets/components_auth-all.md.DA7uNEaz.js
new file mode 100644
index 0000000..5561e6e
--- /dev/null
+++ b/assets/components_auth-all.md.DA7uNEaz.js
@@ -0,0 +1 @@
+import{_ as t,c as e,o as a,a5 as l}from"./chunks/framework.D-J1Cv1C.js";const u=JSON.parse('{"title":"AuthAll 鉴权","description":"","frontmatter":{},"headers":[],"relativePath":"components/auth-all.md","filePath":"components/auth-all.md"}'),s={name:"components/auth-all.md"},o=l('AuthAll 鉴权
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 权限数据，如果传入为 array 时，全部匹配则鉴权通过，并显示 slot 内容 | array / string | - | - |
Slots
| name | 说明 |
|---|---|
| - | 需要鉴权的 HTML 内容 |
Auth 鉴权
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 权限数据，如果传入为 array 时，匹配到其中一项则鉴权通过，并显示 slot 内容 | array / string | - | - |
Slots
| name | 说明 |
|---|---|
| - | 需要鉴权的 HTML 内容 |
介绍
框架提供一系列的组件方便快速开发。
基础组件
基础组件由 Vant 提供。
替换组件库
如果你不喜欢 Vant ，或者你想要将老项目迁移到 Fantastic-mobile 上，但老项目里使用的组件库并不是 Vant ，框架也提供了组件库替换移方案：
如果你想使用的组件库不在上述方案中，可以通过参考任何一份方案，理解替换的整理思路，并自行替换，别担心会很复杂，我们已经将大部分工作做好了。
内建组件
为了实现 UI 组件库可替换，框架内建了一些组件，这些组件仅服务于框架自身，所以不建议在业务页面内使用。但如果你需要对框架进行二次开发，并保证视觉上的一致性，这时候你就会需要用到它们。
内建组件存放在 /src/ui-kit/ 目录下，并配置了使用时自动引入。
扩展组件
扩展组件为框架封装的组件，组件源码完全开放，如果觉得用着不顺手，可以到 /src/components/ 目录下找到对应组件自行修改。
PageMain 内容块
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 标题 | string | - | - |
| collaspe | 是否折叠 | boolean | - | false |
| height | 展示高度，当 collaspe 为 true 时生效 | string | - | - |
Slots
| name | 说明 |
|---|---|
| - | 内容区的 HTML 内容 |
| title | 标题区的 HTML 内容 |
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 迷你图数据，支持一维数组和对象数组，当为对象数组时，对象内参数为 {tooltip: 'xxx', value: 1} | array | - | - |
| width | 展示宽度 | number | - | 100 |
| height | 展示高度 | number | - | 30 |
| stroke-width | 折线宽度 | number | - | 3 |
| stroke-color | 折线颜色 | string | - | #dc2b33 |
| fill-color | 填充颜色 | string | - | - |
| cursor-color | 鼠标 hover 时辅助线颜色 | string | - | #dc2b33 |
| spot-color | 鼠标 hover 时辅助点颜色 | string | - | #dc2b33 |
| tooltip | 鼠标 hover 时是否显示文字提示 | boolean | - | false |
SvgIcon SVG图标
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | svg 文件名 / Iconify 图标名，详细可阅读《图标》 | string | - | - |
| flip | 翻转方式，支持水平、垂直以及同时翻转 | string | horizontal / vertical / both | - |
| rotate | 旋转角度 | number | 0 - 360 | 0 |
| color | 颜色 | string | ||
| size | 尺寸 | string / number |
Trend 趋势标记
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 内容 | string | - | - |
| type | 类型 | string | up / down | up |
| prefix | 前缀 | string | - | - |
| suffix | 后缀 | string | - | - |
| reverse | 颜色反转 | boolean | - | false |
常用 API
接口请求
详细可阅读《与服务端交互 - 接口请求》。
ts
import api from '@/api'
+
+api.get()
+api.post()鉴权
详细可阅读《权限 - 鉴权函数》。
ts
const { auth, authAll } = useAuth()
+
+auth()
+authAll()页面
刷新
ts
`,10),r={id:"设置自定义标题",tabindex:"-1"},o=i("a",{class:"header-anchor",href:"#设置自定义标题","aria-label":'Permalink to "设置自定义标题 const { reload } = useMainPage()
+
+reload()ts
`,1),E={id:"重置自定义标题",tabindex:"-1"},g=i("a",{class:"header-anchor",href:"#重置自定义标题","aria-label":'Permalink to "重置自定义标题 const { setCustomTitle } = useMainPage()
+
+setCustomTitle(title)ts
const { resetCustomTitle } = useMainPage()
+
+resetCustomTitle()事件总线
基于 mitt 简单封装，使用方法请查阅官方文档。
ts
`,4),_={id:"日期",tabindex:"-1"},u=i("a",{class:"header-anchor",href:"#日期","aria-label":'Permalink to "日期 import eventBus from '@/utils/eventBus'
+
+eventBus.on()
+eventBus.emit()
+eventBus.off()基于 dayjs 简单封装，使用方法请查阅官方文档。
ts
`,2);function b(C,m,v,B,A,T){const t=h("Badge");return p(),l("div",null,[d,i("h3",r,[s("设置自定义标题 "),e(t,{type:"pro",text:"专业版"}),s(),o]),c,i("h3",E,[s("重置自定义标题 "),e(t,{type:"pro",text:"专业版"}),s(),g]),y,i("h2",_,[s("日期 "),e(t,{type:"pro",text:"专业版"}),s(),u]),F])}const P=n(k,[["render",b]]);export{x as __pageData,P as default};
diff --git a/assets/guide_api.md.BmpN9bDB.lean.js b/assets/guide_api.md.BmpN9bDB.lean.js
new file mode 100644
index 0000000..afa34b6
--- /dev/null
+++ b/assets/guide_api.md.BmpN9bDB.lean.js
@@ -0,0 +1 @@
+import{_ as n,D as h,c as l,j as i,a as s,I as e,a5 as a,o as p}from"./chunks/framework.D-J1Cv1C.js";const x=JSON.parse('{"title":"常用 API","description":"","frontmatter":{},"headers":[],"relativePath":"guide/api.md","filePath":"guide/api.md"}'),k={name:"guide/api.md"},d=a("",10),r={id:"设置自定义标题",tabindex:"-1"},o=i("a",{class:"header-anchor",href:"#设置自定义标题","aria-label":'Permalink to "设置自定义标题 import dayjs from '@/utils/dayjs'
+
+dayjs()与服务端交互
框架使用 Axios 做为异步请求工具，并进行了简单的封装。
接口请求
设置 baseURL
在根目录 .env.* 文件里的 VITE_APP_API_BASEURL 这个参数就是配置 axios 的 baseURL 。
例如项目的真实接口请求地址为：
http://api.test.com/news/listhttp://api.test.com/news/createhttp://api.test.com/shop/info
则可设置为 VITE_APP_API_BASEURL = http://api.test.com/ 。
请求调用
常用的 GET 和 POST 请求可使用以下的方法：
ts
import api from '@/api'
+
+// GET 请求
+api.get('news/list', {
+ params: {
+ page: 1,
+ size: 10,
+ },
+}).then((res) => {
+ // 后续业务代码
+})
+
+// POST 请求
+api.post('news/create', {
+ title: '新闻标题',
+ content: '新闻内容',
+}).then((res) => {
+ // 后续业务代码
+})拦截器
在 /src/api/index.ts 文件里实例化了 axios 对象，并对 request 和 response 设置了拦截器，拦截器的用处就是拦截每一次的请求和响应，然后做一些全局的处理。例如接口响应报错，可以在拦截器里用统一的报错提示来展示，方便业务开发。但因为每个公司提供的接口标准不同，所以该文件拦截器部分的代码，需要开发者根据实际情况去修改调整。
代码很简单，首先初始化 axios 对象，然后 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就分别是请求和响应的拦截代码了。
参考代码里只做了简单的拦截处理，例如请求的时候会自动带上 token ，响应的时候会根据错误信息判断是登录失效还是接口报错，并做相应动作。
模块管理
如果项目里的接口很多，推荐根据模块来统一管理接口，目录为 /src/api/modules/ 。
跨域处理
生产环境的跨域需要服务端去解决，开发环境的跨域问题可在本地设置代理解决。如果本地开发环境请求接口提示跨域，可以设置 .env.development 文件里 VITE_OPEN_PROXY = true 开启代理。
ts
import api from '@/api'
+
+api.get('news/list') // http://localhost:9000/proxy/news/list
+api.post('news/add') // http://localhost:9000/proxy/news/add开启代理后，原有请求都会被指向到本地 http://localhost:9000/proxy ，因为 /proxy 匹配到了 vite.config.ts 里代理部分的设置，所以实际是请求依旧是 VITE_APP_API_BASEURL 所设置的地址。
ts
server: {
+ // vite.config.ts 中 proxy 配置，该配置即用于代理 API 请求
+ proxy: {
+ '/proxy': {
+ target: loadEnv(mode, process.cwd()).VITE_APP_API_BASEURL,
+ changeOrigin: command === 'serve' && loadEnv(mode, process.cwd()).VITE_OPEN_PROXY == 'true',
+ rewrite: path => path.replace(/\\/proxy/, ''),
+ },
+ },
+},多数据源
如果项目里需要从多个不同地址的数据源请求数据，你有两种方式可以实现。
如果只是几个接口需求从其它数据源请求，你可以使用覆盖 baseURL 的方式：
ts
import api from '@/api'
+
+api.get('/new/list', {
+ baseURL: 'http://baidu.com/', // 直接覆盖 baseURL
+})这种方式的前提是，两个数据源的 request 和 response 规则要保持一致，因为只是覆盖 baseURL ，拦截器还是用的同一套规则。
所以如果两个数据源的请求和响应是完全不同的标准，你需要给第二个数据源单独实例化一个 axios 对象。首先在 .env.* 文件里配置第二个数据源的 baseURL ：
# 命名可随意，以 VITE_APP_ 开头即可
+VITE_APP_API_BASEURL_2 = 此处填写接口地址然后把 /src/api/index.ts 文件复制一份，例如就叫 /src/api/index2.ts ，并且将代码中使用到 VITE_APP_API_BASEURL 也替换为 VITE_APP_API_BASEURL_2 ，这样你就可以在页面中通过引入不同的文件分别请求两个数据源了：
ts
import api from '@/api'
+import api2 from '@/api/index2'
+
+// 请求默认数据源
+api.get('/new/list')
+// 请求第 2 个数据源
+api2.get('/new/list')需注意，如果第二个数据源也需要开启跨域处理的话，需要在 /src/api/index2.ts 里定一个新的 proxy 路径，例如 /proxy2/ ：
ts
const api = axios.create({
+ baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy2/' : import.meta.env.VITE_APP_API_BASEURL_2,
+ timeout: 10000,
+ responseType: 'json',
+})同时在 vite.config.ts 里增加一段新的 proxy 配置：
ts
server: {
+ // vite.config.ts 中 proxy 配置，该配置即用于代理 API 请求
+ proxy: {
+ '/proxy': {
+ target: loadEnv(mode, process.cwd()).VITE_APP_API_BASEURL,
+ changeOrigin: command === 'serve' && loadEnv(mode, process.cwd()).VITE_OPEN_PROXY == 'true',
+ rewrite: path => path.replace(/\\/proxy/, ''),
+ },
+ '/proxy2': {
+ target: loadEnv(mode, process.cwd()).VITE_APP_API_BASEURL_2,
+ changeOrigin: command === 'serve' && loadEnv(mode, process.cwd()).VITE_OPEN_PROXY == 'true',
+ rewrite: path => path.replace(/\\/proxy2/, ''),
+ },
+ },
+},Mock
Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。
开发环境 mock
mock 文件存放在 /src/mock/ 下，建议按照不同模块区分文件夹。文件新增或修改后会自动更新，不需要手动重启，可以在代码控制台查看日志信息。
以下为示例代码：
ts
import { defineFakeRoute } from 'vite-plugin-fake-server/client'
+import Mock from 'mockjs'
+
+export default defineFakeRoute([
+ {
+ url: '/mock/news/list',
+ method: 'get',
+ response: () => {
+ return {
+ error: '',
+ status: 1,
+ data: Mock.mock({
+ 'list|5-10': [
+ {
+ title: '@ctitle',
+ },
+ ],
+ }),
+ }
+ },
+ },
+])参数获取：
- GET：
({ query }) => { } - POST：
({ body }) => { }
为了让 mock 接口与真实接口共存，即项目开发中，部分请求 mock 接口，部分请求真实接口。需要在配置 mock 接口的时候，给 url 参数统一设置 /mock/ 前缀，并在调用接口的时候，使用 baseURL 强制修改此次请求的地址。
如下所示，其中 news/list 会请求本地的 mock 接口，而 news/create 依旧请求真实接口，即使开启跨域代理也不影响。
ts
import api from '@/api'
+
+api.get('news/list', {
+ baseURL: '/mock/',
+ params: {
+ page: 1,
+ size: 10,
+ },
+}).then((res) => {
+ // 后续业务代码
+})
+
+api.post('news/create', {
+ title: '新闻标题',
+ content: '新闻内容',
+}).then((res) => {
+ // 后续业务代码
+})生产环境 mock
注意
生产环境一般都是调用真实接口，如果需要使用 mock 也只适用于一些简单的示例网站及预览网站。
框架默认已经配置好生产环境 mock ，如果不想让生产环境里的请求走 mock ，可在接口调用处删除 baseURL 设置，或直接删除 mock 接口文件。
需要注意一点，如果项目中有涉及到上传功能，请彻底关闭线上环境 mock ，在环境配置里设置 VITE_BUILD_MOCK = false ，不然线上环境将会报错。
开发环境与生产环境使用 mock 差异不大，比较大的区别是生产环境里调用 mock 接口，在控制台内看不到接口请求日志。
`,52),k=[p];function l(t,e,E,d,r,g){return a(),i("div",null,k)}const y=s(h,[["render",l]]);export{o as __pageData,y as default}; diff --git a/assets/guide_axios.md.eiRrRE32.lean.js b/assets/guide_axios.md.eiRrRE32.lean.js new file mode 100644 index 0000000..78b6c03 --- /dev/null +++ b/assets/guide_axios.md.eiRrRE32.lean.js @@ -0,0 +1 @@ +import{_ as s,c as i,o as a,a5 as n}from"./chunks/framework.D-J1Cv1C.js";const o=JSON.parse('{"title":"与服务端交互","description":"","frontmatter":{},"headers":[],"relativePath":"guide/axios.md","filePath":"guide/axios.md"}'),h={name:"guide/axios.md"},p=n("",52),k=[p];function l(t,e,E,d,r,g){return a(),i("div",null,k)}const y=s(h,[["render",l]]);export{o as __pageData,y as default}; diff --git a/assets/guide_build.md.DEKENzfd.js b/assets/guide_build.md.DEKENzfd.js new file mode 100644 index 0000000..2a65ed5 --- /dev/null +++ b/assets/guide_build.md.DEKENzfd.js @@ -0,0 +1,13 @@ +import{_ as p,D as t,c as i,j as e,a,I as o,a5 as s,o as c}from"./chunks/framework.D-J1Cv1C.js";const C=JSON.parse('{"title":"构建与预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/build.md","filePath":"guide/build.md"}'),d={name:"guide/build.md"},l=s(`构建与预览
构建
项目开发完成之后，可以执行 pnpm run build 命令进行构建，构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件。
如果是需要构建测试环境，则执行 pnpm run build:test 命令，对应会在根目录生成 dist-test 文件夹。
TIP
如果最终访问地址为域名非根节点，如 https://www.example.com/app，则需要在 vite.config.ts 中设置 base 选项为 /app/，否则会出现资源引用错误。
预览
生成好的 dist 文件夹一般需要部署至服务器才算部署发布成功，但为了保证构建出来的文件能正常运行，开发者通常希望能在本地先预览一下，可执行 pnpm run serve 或 pnpm run serve:test 命令预览不同环境构建出的文件夹。
压缩
在环境配置文件里设置 VITE_BUILD_COMPRESS 即可在构建时生成 .gz 或 .br 文件。
# 单独开启 gzip
+VITE_BUILD_COMPRESS = gzip
+
+# 单独开启 brotli ，brotli 是比 gzip 压缩率更高的算法
+VITE_BUILD_COMPRESS = brotli
+
+# 或者也可以都开启，两者可以共存
+VITE_BUILD_COMPRESS = gzip,brotli两者均需要 nginx 安装指定模块并开启后才会生效。
`,11),r={id:"生成存档",tabindex:"-1"},_=e("a",{class:"header-anchor",href:"#生成存档","aria-label":'Permalink to "生成存档在环境配置文件里设置 VITE_BUILD_ARCHIVE 即可在构建完后成生成 .zip 或 .tar.gz 文件。
# 生成 zip
+VITE_BUILD_ARCHIVE = zip
+
+# 生成 tar.gz
+VITE_BUILD_ARCHIVE = tar其它设置
# 是否在打包时生成 sourcemap
+VITE_BUILD_SOURCEMAP = true更新日志
只记录 feat/fix 以及破坏性变更。
0.1.0
正式发布
正式发布
代码规范
建议
请确保已阅读《准备工作 - 开发环境》，并且按照文档说明安装好相关软件及扩展。
为保证代码风格统一，请使用 Visual Studio Code 做为开发 IDE ，框架源码里已提供相关配置文件，可直接测试效果：在保存代码时，会自动对当前文件进行代码格式化操作。
IDE 配置
配置文件为 .editorconfig ，通常情况下无需做任何修改。
ESLint 配置
配置文件为 eslint.config.js ，框架使用 antfu/eslint-config 做为基础规范，如果你对默认的规则有异议，可以查阅 ESLint 官网规则并在 eslint.config.js 文件中进行覆盖。
当你对规则进行修改后，原有的代码可能会因为规则的变动导致编辑器大量提示错误，你可以通过运行 pnpm run lint:eslint 进行一次格式校验，如果规则支持自动修复，则会将不符合规则的代码自动进行格式化。
TIP
通过修改 eslint.config.js 中 ignores 配置可忽略无需做代码规范校验的目录或文件，例如在项目中导入了一些第三方的插件代码或组件代码，我们就可以将其进行忽略。
StyleLint 配置
配置文件为 stylelint.config.js ，如果你对默认的规则有异议，可以查阅 Stylelint 官网规则并在 stylelint.config.js 文件中进行修改。
当你对规则进行修改后，原有的代码可能会因为规则的变动导致编辑器大量提示错误，你可以通过运行 pnpm run lint:stylelint 进行一次格式校验，如果规则支持自动修复，则会将不符合规则的代码自动进行格式化。
TIP
通过修改 stylelint.config.js 中 ignoreFiles 配置可忽略无需做代码规范校验的文件，例如在项目中导入了一些第三方的插件代码或组件代码，我们就可以将其进行忽略。
simple-git-hooks 和 lint-staged
由于 IDE 能做的事比较有限，只能对代码的书写规范进行格式化，对于一些无法自动修复的错误代码，如果没有改正到就被推送到 git 仓库，在多人协作开发时，可能会影响到别人的开发体验。所以框架集成了 simple-git-hooks 和 lint-staged 这两个依赖来解决这一问题。
在提交代码时， simple-git-hooks 会通过 lint-staged 对本次提交变更的文件进行分别进行 eslint 和 stylelint 检测，如果有报错，则会阻止本次代码提交，直到开发者修改完所有错误代码后，才允许提交到 git 仓库，这样可以确保 git 仓库里的代码不会有不规范的代码。
注意
请确保在安装依赖前，已经使用 git init 对项目进行过 git 环境初始化，如果你在安装依赖后再初始化了 git 环境，请在 git 环境初始化之后再执行一遍 pnpm install 安装命令。
此外，如果 git 仓库目录和框架目录并非同一个，则需要在 package.json 中修改 postinstall 脚本，切换到 git 所在目录。例如 git 目录是 project/ ，而框架目录是 project/fantastic-mobile/ ，则在 package.json 里找到 simple-git-hooks 配置并修改：
json
"simple-git-hooks": {
+ "pre-commit": "cd ./fantastic-mobile/ && pnpm lint-staged",
+ "preserveUnused": true
+}修改后重新执行一下 pnpm install 即可。
移除
如果不想在 git 提交时强制进行代码规范校验，可以在 package.json 中移除 simple-git-hooks 配置：
json
{
+ "scripts": {
+ "postinstall": "simple-git-hooks",
+ },
+ "simple-git-hooks": {
+ "pre-commit": "pnpm lint-staged",
+ "preserveUnused": true
+ },
+}然后手动删除 .git/hooks/pre-commit 文件即可。
配置
环境配置
默认提供三套环境配置，分别为：
yaml
# 应用配置面板
+VITE_APP_SETTING = true
+# 页面标题
+VITE_APP_TITLE = Fantastic-mobile
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+
+# 是否开启代理
+VITE_OPEN_PROXY = false
+# 是否开启开发者工具
+VITE_OPEN_DEVTOOLS = falseyaml
# 应用配置面板
+VITE_APP_SETTING = false
+# 页面标题
+VITE_APP_TITLE = Fantastic-mobile
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+
+# 是否在打包时启用 Mock
+VITE_BUILD_MOCK = true
+# 在构建时生成 sourcemap
+VITE_BUILD_SOURCEMAP = true
+# 在构建时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS =
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =yaml
# 应用配置面板
+VITE_APP_SETTING = false
+# 页面标题
+VITE_APP_TITLE = Fantastic-mobile
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+
+# 是否在打包时启用 Mock
+VITE_BUILD_MOCK = false
+# 在构建时生成 sourcemap
+VITE_BUILD_SOURCEMAP = false
+# 在构建时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip,brotli
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =其中 VITE_APP_SETTING VITE_APP_TITLE VITE_APP_API_BASEURL VITE_APP_DEBUG_TOOL 为必要配置，即不管是在开发、测试，还是生产环境都需要使用到。而其余配置则在不同环境下有不同用途，例如开发环境用于本地开发使用，测试环境和生产环境用于构建使用。
开发者可根据实际业务需求进行扩展，如果对这块不熟悉，请阅读 Vite - 环境变量和模式 章节。
注意
VITE_APP_SETTING 该变量是开启应用配置面板，目的是方便开发者在开发阶段调试，生产环境下默认关闭，也建议关闭。
应用配置（框架配置）
请在 /src/settings.ts 文件中进行配置，而 /src/settings.default.ts 为框架的默认配置，请勿在该文件内修改。
关于配置的类型定义，可以在 /src/types/globals.d.ts 文件中查阅。
ts
// 这是基础版演示源码里的自定义配置示例
+const globalSettings: Settings.all = {
+ app: {
+ enablePermission: true,
+ enableDynamicTitle: true,
+ },
+ tabbar: {
+ list: [
+ {
+ path: '/feature',
+ icon: 'i-ic:sharp-auto-awesome',
+ activeIcon: 'i-ic:twotone-auto-awesome',
+ text: '特色',
+ },
+ {
+ path: '/',
+ icon: 'i-ic:sharp-home',
+ activeIcon: 'i-ic:twotone-home',
+ text: '主页',
+ },
+ {
+ path: '/user',
+ icon: 'i-ic:baseline-person',
+ activeIcon: 'i-ic:twotone-person',
+ text: '我的',
+ },
+ ],
+ },
+ copyright: {
+ dates: '2024-present',
+ company: 'Fantastic-mobile',
+ website: 'https://fantastic-mobile.github.io',
+ },
+}注意
文档中提供的配置介绍，如果在本地的开发环境使用中报错或者无法生效，说明你使用的版本不支持或者配置参数有变动，你可以打开 /src/settings.default.ts 查看当前版本的完整配置作为参考。
并且如果你使用的是 Visual Studio Code ，鼠标悬浮到属性上时，会有属性的介绍：
开发者工具
INFO
该特性由 Vue DevTools Next 提供技术支持。
使用介绍
在 .env.development 开发环境配置文件中开启：
yaml
# 是否开启开发者工具
+VITE_OPEN_DEVTOOLS = true开启后，在本地运行时，默认会在页面底部中间显示一个开发者工具按钮，点击即可打开开发者工具。
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enableErrorLog: true,
+ },
+}然后需要到 /src/utils/error.log.ts 文件里编写业务代码，框架为方便演示，将错误日志记录在 sessionStorage 里。
开发者需要根据实际业务情况修改代码，例如将增加上报信息，记录用户账号、token等数据，并且将错误日志进行上报。
由于开启错误日志监控后，Vue 相关的错误都不会在控制台里显示，所以在开发环境下即使开启错误日志也不会被启用，如果需要在开发环境下测试，可在 /src/util/error.log.ts 里修改开启的条件判断。
用户访问使用了自定义字体的页面时，会自动下载字体文件，字体文件有大有小，所以不建议在非英文环境中使用。
框架预设了 Digital 7 的两套字体，除此之外，你也可以通过以下方法引入你需要的自定义字体。
找字体
访问 DaFont 或其它字体下载网站，下载 .ttf 格式的字体文件。
生成字体
因为 .ttf 格式的字体文件不是浏览器支持的字体格式，所以需要通过 .ttf 生成其它格式的字体文件。
访问 Font Squirrel，上传 .ttf 文件，并按照下面设置后，点击下载。
使用
将上一步下载的压缩包解压并放入 /src/assets/fonts/ 目录下，注意按文件夹区分，随后引入文件夹中的 stylesheet.css 即可使用，以 Digital 7 字体为例：
scss
@import '../../assets/fonts/digital-7/stylesheet.css';
+.digital-7 {
+ font-family: 'digital-7regular';
+}字体的 font-family 名称在 stylesheet.css 里查看。
另外你也可以将 @import '../../assets/fonts/digital-7/stylesheet.css'; 这句代码放到全局引入，这样所有页面就都可以通过设置 font-family: 'digital-7regular'; 直接使用了。
全局资源
图片
框架用到的图片资源都放在 /src/assets/images/ 目录下，可自行新建文件夹分类管理。
样式
样式存放目录为 /src/assets/styles/ ，因为 Vue 的文件特性，页面样式建议写在 .vue 文件里，所以该目录只存放全局样式，方便统一管理。
此目录下还有一个特殊目录，即 /src/assets/styles/resources/ ，这是全局 SCSS 资源目录，首先这个目录里只支持 .scss 文件，其次在这个目录里的文件，无需在页面上引用即可生效并使用。
同样，精灵图目录下生成的 SCSS 资源也是全局可调用的。
说明
全局 SCSS 资源并不是全局样式，是变量、@mixin 、@function 这些东西
组件
公共组件
说明
公共组件在使用时，无需手动引入，框架会在你使用时自动引入，该特性由 unplugin-vue-components 提供支持。
公共组件存放在 /src/components/ 目录下，每个组件按文件夹进行区分。
每个组件的文件夹内至少保留一个文件名为 index.vue 的组件入口（可参考 SvgIcon 组件），文件夹名称即为组件名。
推荐使用 pnpm new 指令进行组件生成，详细可查看《代码文件自动生成》。
局部组件
局部组件没有提供专门的存放目录，我们建议采用就近原则，你可以在每个模块的文件夹下，建立一个 components 文件夹专门用于存放局部组件。
INFO
该特性由 vue-i18n 提供技术支持。
vscode 扩展
如果使用 vscode 进行开发，推荐安装 i18n Ally 这个扩展。
安装该扩展后，代码里可以实时查看对应语言的内容。
语言包
语言包存放在 /src/locales/lang/ 目录下，因为 Element Plus 本身也有自己的语言包，所以在做国际化支持的时候，框架的语言包和 Element Plus 的语言包需要进行数据合并，可点击这里查看 Element Plus 的语言包文件。
假设你已经在 /src/locales/lang/ 目录下新增并配置好了一个日文语言包 ja.json ，然后你需要到 /src/locales/index.ts 文件里做以下调整：
ts
import elementLocaleZhCN from 'element-plus/dist/locale/zh-cn.mjs'
+import elementLocaleZhTW from 'element-plus/dist/locale/zh-tw.mjs'
+import elementLocaleEn from 'element-plus/dist/locale/en.mjs'
+// 引入 Element Plus 的日文语言包
+import elementLocaleJa from 'element-plus/dist/locale/ja.mjs'
+
+function getElementLocales() {
+ const locales: {
+ [key: string]: any
+ } = {}
+ for (const key in messages) {
+ locales[key] = {}
+ switch (key) {
+ case 'zh-cn':
+ Object.assign(locales[key], elementLocaleZhCN, { labelName: '中文(简体)' })
+ break
+ case 'zh-tw':
+ Object.assign(locales[key], elementLocaleZhTW, { labelName: '中文(繁體)' })
+ break
+ case 'en':
+ Object.assign(locales[key], elementLocaleEn, { labelName: 'English' })
+ break
+ // 在这里增加一个 case 选项，其中 labelName 会在语言选择器里显示
+ case 'ja':
+ Object.assign(locales[key], elementLocaleJa, { labelName: '日本語' })
+ break
+ }
+ }
+ return locales
+}路由设置
以中文(简体)为例，打开 /src/locales/lang/zh-cn.json 文件可以看到路由相关的配置，在 route 对象里可以扩展需要开启国际化支持的路由。
json
{
+ "pages": {
+ "navbar": {
+ "root": "导航栏",
+ "default": "默认导航栏",
+ "none": "无导航栏"
+ }
+ }
+}如果需要新增某个路由的国际化支持，光设置好中文(简体)的还不行，其它语言包文件里也要同步添加。当都设置好后，可在该路由的 title 参数上直接设置对应 key 值，例如：
ts
meta: {
+ title: 'pages.navbar.default',
+},单页组件
如果每个页面都要做国际化支持，那语言包文件就会变得无比庞大且难以维护，推荐在每个页面组件里使用 <i18n> 自定义块进行语言维护，可访问 /src/views/feature/function/i18n.vue 查看示例。
更多 vue-i18n 的使用技巧请参考官方文档。
与服务端交互
所有的请求均会在请求头里带上 Accept-Language ，后端可根据这一状态信息做动态数据国际化处理。
文档说明
⭐⭐⭐⭐⭐
相信你已经准备或正在使用 Fantastic-mobile 进行开发工作了，在此之前，希望你可以去 Github 或者 Gitee(码云) 帮我点个 ⭐ ，这将是对我极大的鼓励。
页面缓存
注意
开启缓存必须保证每个页面组件必须设置 name ，并且确保 name 唯一。
我们只要在需要进行缓存的路由 meta 对象里配置 cache 参数即可。这个参数可接受以下 3 种类型：
booleanstringstring[]
boolean 很好理解，当设置为 true 时，该页面只要一被访问，就会被缓存。例如有一个新闻管理的模块，我们把新闻列表页设置为 cache: true 后并访问，然后从新闻列表页点击某条记录进入新闻详情页，这时候再从新闻详情页返回新闻列表页时，新闻列表页上的数据是不会重新加载，而是保留了当时离开时的状态。
但这个方案也有一个弊端，就是该页面一旦访问就永久被缓存住了（除非手动进行浏览器刷新），如果用户从新闻列表页进入的不是新闻详情页，而是其它模块的页面，比如上一级页面，这时候其实是不希望新闻列表页被缓存的。这种情况下，框架支持设置 string 和 string[] 两个类型的参数值。
首先不管设置 string 还是 string[] ，你需要设置的值，都是路由的 name 。
怎么理解呢？还是用上面的例子，如果有两个模块，一个新闻管理，一个用户管理。当从新闻列表页进入新闻详情页的时候，需要对新闻列表页进行缓存，而从新闻列表页进入用户列表页，则不需要对新闻列表页进行缓存，我们就可以对新闻列表页的路由设置成：
src/views/
+└── news/
+ ├── [id].vue
+ └── index.vuevue
<!-- /src/views/news/index.vue -->
+<script setup lang="ts">
+definePage({
+ meta: {
+ title: '新闻列表页',
+ cache: '/news/[id]',
+ },
+})
+</script>这表示从新闻列表页进入新闻详情页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。
当然也可将 cache 设置成 name 数组。
src/views/
+└── news/
+ ├── create.vue
+ ├── detail.[id].vue
+ └── index.vuevue
<!-- /src/views/news/index.vue -->
+<script setup lang="ts">
+definePage({
+ meta: {
+ title: '新闻列表页',
+ cache: ['/news/detail.[id]', '/news/create'],
+ },
+})
+</script>这样就表示从新闻列表页进入新闻详情页或新增新闻页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。
还有一种场景，就是某个页面始终开启缓存，仅在某些特定条件下才关闭缓存。例如有一个新闻管理的模块，我们希望新增新闻页始终开启缓存，因为在进行新增操作时，可能需要跳转到新闻分类管理的页面进行新增分类的操作，或者是其他页面进行一些操作，当返回新增新闻页时，需要将它缓存。一旦新闻新增成功，返回到新闻列表页时，新增新闻页就不再需要缓存了。
我们只要在需要进行缓存的路由 meta 对象里配置 noCache 参数即可。这个参数可接受以下 2 种类型：
stringstring[]
针对上述场景，我们就可以对新增新闻页的路由设置成：
src/views/
+└── news/
+ ├── create.vue
+ └── index.vuevue
`,22),p=[e];function l(h,k,g,r,d,E){return a(),i("div",null,p)}const y=s(t,[["render",l]]);export{o as __pageData,y as default};
diff --git a/assets/guide_keep-alive.md.BguaEZ4O.lean.js b/assets/guide_keep-alive.md.BguaEZ4O.lean.js
new file mode 100644
index 0000000..a62a65f
--- /dev/null
+++ b/assets/guide_keep-alive.md.BguaEZ4O.lean.js
@@ -0,0 +1 @@
+import{_ as s,c as i,o as a,a5 as n}from"./chunks/framework.D-J1Cv1C.js";const o=JSON.parse('{"title":"页面缓存","description":"","frontmatter":{},"headers":[],"relativePath":"guide/keep-alive.md","filePath":"guide/keep-alive.md"}'),t={name:"guide/keep-alive.md"},e=n("",22),p=[e];function l(h,k,g,r,d,E){return a(),i("div",null,p)}const y=s(t,[["render",l]]);export{o as __pageData,y as default};
diff --git a/assets/guide_login.md.CmsD9wCN.js b/assets/guide_login.md.CmsD9wCN.js
new file mode 100644
index 0000000..4414c2b
--- /dev/null
+++ b/assets/guide_login.md.CmsD9wCN.js
@@ -0,0 +1 @@
+import{_ as e,c as o,o as i,a5 as c}from"./chunks/framework.D-J1Cv1C.js";const g=JSON.parse('{"title":"登录","description":"","frontmatter":{},"headers":[],"relativePath":"guide/login.md","filePath":"guide/login.md"}'),l={name:"guide/login.md"},t=c('<!-- /src/views/news/create.vue -->
+<script setup lang="ts">
+definePage({
+ meta: {
+ title: '新增新闻页',
+ cache: true,
+ noCache: '/news/',
+ },
+})
+</script>登录
说明
如果业务不需要用户体系，可以直接将 /src/views/login.vue 文件删除或修改为 _login.vue ，这样就不会生成登录路由。
开发者在接入登录功能的时候，经常会遇到一些问题，比如：
- 替换真实接口后，无法正常登录
- 登录接口请求成功，但依旧提示登录
- ...
针对这些问题你需要依次检查以下几点：
- 在
.env.development里检查接口请求地址是否正确。 - 在
/src/api/index.ts里修改响应拦截器里的代码，按照实际情况进行调整。例如什么状态下是请求成功，什么状态下是请求异常，并进行错误提示。 - 在
/src/api/modules/user.ts里修改login函数，确保接口可以请求成功。 - 在
/src/store/modules/user.ts里修改isLogin计算属性，这部分需要根据实际存储的用户信息去判断是否登录。
移动端支持
本套件支持使用 vw/vh 做为移动端的布局单位，并默认集成了 postcss-px2vp 插件。
使用也很简单，只需将根目录下 postcss.config.js 文件里的注释代码开启即可：
js
module.exports = {
+ plugins: {
+ 'postcss-px2vp': {
+ // 需要转换的单位，默认为"px"
+ unitToConvert: 'px',
+ // 设计稿的视口宽度
+ viewportWidth: 320,
+ // 单位转换后保留的精度
+ unitPrecision: 5,
+ // 能转化为 vw 的属性列表
+ propList: ['*'],
+ // 希望使用的视口单位
+ viewportUnit: 'vw',
+ // 字体使用的视口单位
+ fontViewportUnit: 'vw',
+ // 需要忽略的 CSS 选择器，不会转为视口单位，使用原有的 px 等单位
+ selectorBlackList: [],
+ // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
+ minPixelValue: 1,
+ // 媒体查询里的单位是否需要转换单位
+ mediaQuery: false,
+ // 是否直接更换属性值，而不添加备用属性
+ replace: true,
+ // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+ exclude: [],
+ },
+ autoprefixer: {},
+ },
+}最后在开发中就可以直接使用 px 了，最终输出就是 vw 。
`,5),p=[l];function t(e,k,E,g,d,r){return a(),i("div",null,p)}const y=s(h,[["render",t]]);export{o as __pageData,y as default}; diff --git a/assets/guide_mobile-support.md.Dbl0b72M.lean.js b/assets/guide_mobile-support.md.Dbl0b72M.lean.js new file mode 100644 index 0000000..65e29bc --- /dev/null +++ b/assets/guide_mobile-support.md.Dbl0b72M.lean.js @@ -0,0 +1 @@ +import{_ as s,c as i,o as a,a5 as n}from"./chunks/framework.D-J1Cv1C.js";const o=JSON.parse('{"title":"移动端支持","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mobile-support.md","filePath":"guide/mobile-support.md"}'),h={name:"guide/mobile-support.md"},l=n("",5),p=[l];function t(e,k,E,g,d,r){return a(),i("div",null,p)}const y=s(h,[["render",t]]);export{o as __pageData,y as default}; diff --git a/assets/guide_page-layout.md.CqsasEls.js b/assets/guide_page-layout.md.CqsasEls.js new file mode 100644 index 0000000..7f71d97 --- /dev/null +++ b/assets/guide_page-layout.md.CqsasEls.js @@ -0,0 +1,75 @@ +import{_ as l,D as n,c as h,j as s,a as t,I as a,a5 as e,o as p}from"./chunks/framework.D-J1Cv1C.js";const Vs=JSON.parse('{"title":"PageLayout 组件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/page-layout.md","filePath":"guide/page-layout.md"}'),d={name:"guide/page-layout.md"},k=e(`PageLayout 组件
<PageLayout> 组件是本框架区别于其他 H5 框架的最重要的特性。它提供了页面整体布局的基础，包括顶部导航栏、顶部标签栏、返回顶部、记录滚动位置等特性。
基本用法
vue
<template>
+ <PageLayout :navbar="false" tabbar copyright>
+ <!-- ... -->
+ </PageLayout>
+</template>本组件不是一个可以随处使用的组件，它必须应用在根节点，并且一个页面里只能有一个 <PageLayout> 组件。
Props
`,6),g={tabindex:"0"},E=s("thead",null,[s("tr",null,[s("th",{style:{"text-align":"left"}},"参数"),s("th",{style:{"text-align":"left"}},"说明"),s("th",{style:{"text-align":"left"}},"类型"),s("th",{style:{"text-align":"left"}},"可选值"),s("th",{style:{"text-align":"left"}},"默认值")])],-1),r={style:{"text-align":"left"}},o=s("td",{style:{"text-align":"left"}},"导航栏标题是否居中",-1),y=s("td",{style:{"text-align":"left"}},"boolean",-1),c=s("td",{style:{"text-align":"left"}},"-",-1),_=s("td",{style:{"text-align":"left"}},"true",-1),b=s("tr",null,[s("td",{style:{"text-align":"left"}},"navbar"),s("td",{style:{"text-align":"left"}},[t("是否启用导航栏，默认使用应用配置 "),s("code",null,"navbar.enable")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),x={style:{"text-align":"left"}},F=s("td",{style:{"text-align":"left"}},[t("导航栏模式，默认使用应用配置 "),s("code",null,"navbar.mode")],-1),u=s("td",{style:{"text-align":"left"}},"string",-1),f=s("td",{style:{"text-align":"left"}},"static / fixed / show-hide-fixed / sticky",-1),C=s("td",{style:{"text-align":"left"}},"-",-1),v={style:{"text-align":"left"}},m=s("td",{style:{"text-align":"left"}},"从预设中设置展示在导航栏左侧的图标按钮",-1),B=s("td",{style:{"text-align":"left"}},"string / string[]",-1),A=s("td",{style:{"text-align":"left"}},"back / home / forward / i18n",-1),D=s("td",{style:{"text-align":"left"}},"-",-1),P={style:{"text-align":"left"}},T=s("td",{style:{"text-align":"left"}},"从预设中选择展示在导航栏右侧的图标按钮",-1),S=s("td",{style:{"text-align":"left"}},"string / string[]",-1),q=s("td",{style:{"text-align":"left"}},"back / home / forward / i18n",-1),I=s("td",{style:{"text-align":"left"}},"-",-1),V=s("tr",null,[s("td",{style:{"text-align":"left"}},"tabbar"),s("td",{style:{"text-align":"left"}},[t("是否启用标签栏，默认使用应用配置 "),s("code",null,"tabbar.enable")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),N={style:{"text-align":"left"}},L=s("td",{style:{"text-align":"left"}},"标签栏名称，如果应用配置里配置了多套标签栏，需设置当前页面使用哪套标签栏，默认使用第一套",-1),w=s("td",{style:{"text-align":"left"}},"string",-1),R=s("td",{style:{"text-align":"left"}},"-",-1),$=s("td",{style:{"text-align":"left"}},"-",-1),M=s("tr",null,[s("td",{style:{"text-align":"left"}},"copyright"),s("td",{style:{"text-align":"left"}},[t("是否展示底部版权信息，默认使用应用配置 "),s("code",null,"copyright.enable")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),j=s("tr",null,[s("td",{style:{"text-align":"left"}},"backTop"),s("td",{style:{"text-align":"left"}},[t("是否启用返回顶部按钮，默认使用应用配置 "),s("code",null,"app.enableBackTop")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),H={style:{"text-align":"left"}},J=s("td",{style:{"text-align":"left"}},"是否记忆滚动位置（前提条件：需开启页面缓存）",-1),O=s("td",{style:{"text-align":"left"}},"boolean",-1),W=s("td",{style:{"text-align":"left"}},"-",-1),z=s("td",{style:{"text-align":"left"}},"-",-1),G={style:{"text-align":"left"}},K=s("td",{style:{"text-align":"left"}},"设置竖向滚动条位置",-1),Q=s("td",{style:{"text-align":"left"}},"number",-1),U=s("td",{style:{"text-align":"left"}},"-",-1),X=s("td",{style:{"text-align":"left"}},"-",-1),Y={style:{"text-align":"left"}},Z=s("td",{style:{"text-align":"left"}},"设置横向滚动条位置",-1),ss=s("td",{style:{"text-align":"left"}},"number",-1),ts=s("td",{style:{"text-align":"left"}},"-",-1),is=s("td",{style:{"text-align":"left"}},"-",-1),as={style:{"text-align":"left"}},es=s("td",{style:{"text-align":"left"}},"是否在设置滚动条位置时使用动画过渡",-1),ls=s("td",{style:{"text-align":"left"}},"boolean",-1),ns=s("td",{style:{"text-align":"left"}},"-",-1),hs=s("td",{style:{"text-align":"left"}},"-",-1),ps=e('Slots
| 插槽名 | 说明 |
|---|---|
| - | 页面区域 |
| navbar | 导航栏标题区域 |
| navbar-start | 导航栏左侧图标区域 |
| navbar-end | 导航栏右侧图标区域 |
| tabbar | 标签栏区域 |
Events
',3),ds={tabindex:"0"},ks=s("thead",null,[s("tr",null,[s("th",{style:{"text-align":"left"}},"事件名"),s("th",{style:{"text-align":"left"}},"说明")])],-1),gs=s("tr",null,[s("td",{style:{"text-align":"left"}},"scroll"),s("td",{style:{"text-align":"left"}},"页面滚动时触发")],-1),Es={style:{"text-align":"left"}},rs=s("td",{style:{"text-align":"left"}},"页面滚动到顶部时触发",-1),os={style:{"text-align":"left"}},ys=s("td",{style:{"text-align":"left"}},"页面滚动到底部时触发",-1),cs=e(`导航栏
enable
可以将导航栏全局开启，这样所有页面默认都会显示导航栏。
ts
const globalSettings: Settings.all = {
+ navbar: {
+ enable: true,
+ },
+}或者也可以提供一段正则表达式，例如下面这段配置表示页面在微信环境下默认不显示导航栏：
ts
`,6),_s={id:"mode",tabindex:"-1"},bs=s("a",{class:"header-anchor",href:"#mode","aria-label":'Permalink to "mode const globalSettings: Settings.all = {
+ navbar: {
+ enable: !/MicroMessenger/i.test(window.navigator.userAgent),
+ },
+}全局设置导航栏模式，默认为 static
'static'静止，跟随页面滚动'fixed'固定，不跟随页面滚动，始终固定在顶部'show-hide-fixed'显隐固定，默认隐藏，页面滚动时显示'sticky'粘性，页面往下滚动时隐藏，往上滚动时显示
ts
const globalSettings: Settings.all = {
+ navbar: {
+ mode: 'fixed',
+ },
+}标签栏
enable
可以将标签栏全局开启，这样所有页面默认都会显示标签栏。
ts
const globalSettings: Settings.all = {
+ tabbar: {
+ enable: true,
+ },
+}list
标签栏展示数据：
ts
const globalSettings: Settings.all = {
+ tabbar: {
+ list: [
+ {
+ path: '/',
+ icon: 'i-ic:sharp-home',
+ text: '主页',
+ },
+ {
+ path: '/user',
+ icon: 'i-ic:baseline-person',
+ text: '我的',
+ },
+ ],
+ },
+}专业版支持配置多套标签栏，然后通过 tabbarName 属性指定当前页面使用哪套标签栏：
ts
const globalSettings: Settings.all = {
+ tabbar: {
+ list: [
+ {
+ name: 'tabbar1',
+ list: [
+ {
+ path: '/',
+ icon: 'i-ic:sharp-home',
+ text: '主页',
+ },
+ {
+ path: '/user',
+ icon: 'i-ic:baseline-person',
+ text: '我的',
+ },
+ ],
+ },
+ {
+ name: 'tabbar2',
+ list: [
+ {
+ path: '/list',
+ icon: 'i-ic:sharp-list',
+ text: '列表',
+ },
+ {
+ path: '/setting',
+ icon: 'i-ic:sharp-settings',
+ text: '设置',
+ },
+ ],
+ },
+ ],
+ },
+}vue
<template>
+ <PageLayout tabbar-name="tabbar2">
+ <!-- ... -->
+ </PageLayout>
+</template>path
跳转路由地址
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 跳转路由地址 |
icon
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 显示图标 |
该项配置最终会通过 <SvgIcon /> 组件进行展示，意味着你可以使用自定义图标，也可使用 Iconify 提供的图标，详细可阅读《图标》。
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 激活时显示图标 |
该项配置最终会通过 <SvgIcon /> 组件进行展示，意味着你可以使用自定义图标，也可使用 Iconify 提供的图标，详细可阅读《图标》。
text
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 显示文字 |
设置不同的类型值，展示效果也会不同。
boolean展示形式为点，当值为 false 时隐藏number展示形式为文本，当值小于等于 0 时隐藏string展示形式为文本，当值为空时隐藏
如果标记需要动态更新，请设置为箭头函数形式，并返回外部变量，例如搭配 pinia 一起使用。
ts
',4);function Bs(As,Ds,Ps,Ts,Ss,qs){const i=n("Badge");return p(),h("div",null,[k,s("table",g,[E,s("tbody",null,[s("tr",null,[s("td",r,[t("titleCenter "),a(i,{type:"pro",text:"专业版"})]),o,y,c,_]),b,s("tr",null,[s("td",x,[t("navbarMode "),a(i,{type:"pro",text:"专业版"})]),F,u,f,C]),s("tr",null,[s("td",v,[t("navbarStartSide "),a(i,{type:"pro",text:"专业版"})]),m,B,A,D]),s("tr",null,[s("td",P,[t("navbarEndSide "),a(i,{type:"pro",text:"专业版"})]),T,S,q,I]),V,s("tr",null,[s("td",N,[t("tabbarName "),a(i,{type:"pro",text:"专业版"})]),L,w,R,$]),M,j,s("tr",null,[s("td",H,[t("savedPosition "),a(i,{type:"pro",text:"专业版"})]),J,O,W,z]),s("tr",null,[s("td",G,[t("scrollTop "),a(i,{type:"pro",text:"专业版"}),t(),a(i,{type:"tip",text:"v0.2.0 新增"})]),K,Q,U,X]),s("tr",null,[s("td",Y,[t("scrollLeft "),a(i,{type:"pro",text:"专业版"}),t(),a(i,{type:"tip",text:"v0.2.0 新增"})]),Z,ss,ts,is]),s("tr",null,[s("td",as,[t("scrollWithAnimation "),a(i,{type:"pro",text:"专业版"}),t(),a(i,{type:"tip",text:"v0.2.0 新增"})]),es,ls,ns,hs])])]),ps,s("table",ds,[ks,s("tbody",null,[gs,s("tr",null,[s("td",Es,[t("reachTop "),a(i,{type:"tip",text:"v0.2.0 新增"})]),rs]),s("tr",null,[s("td",os,[t("reachBottom "),a(i,{type:"tip",text:"v0.2.0 新增"})]),ys])])]),cs,s("h3",_s,[t("mode "),a(i,{type:"pro",text:"专业版"}),t(),bs]),xs,s("h4",Fs,[t("activeIcon "),a(i,{type:"pro",text:"专业版"}),t(),us]),fs,s("h4",Cs,[t("badge "),a(i,{type:"pro",text:"专业版"}),t(),vs]),ms])}const Ns=l(d,[["render",Bs]]);export{Vs as __pageData,Ns as default};
diff --git a/assets/guide_page-layout.md.CqsasEls.lean.js b/assets/guide_page-layout.md.CqsasEls.lean.js
new file mode 100644
index 0000000..1ca8672
--- /dev/null
+++ b/assets/guide_page-layout.md.CqsasEls.lean.js
@@ -0,0 +1 @@
+import{_ as l,D as n,c as h,j as s,a as t,I as a,a5 as e,o as p}from"./chunks/framework.D-J1Cv1C.js";const Vs=JSON.parse('{"title":"PageLayout 组件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/page-layout.md","filePath":"guide/page-layout.md"}'),d={name:"guide/page-layout.md"},k=e("",6),g={tabindex:"0"},E=s("thead",null,[s("tr",null,[s("th",{style:{"text-align":"left"}},"参数"),s("th",{style:{"text-align":"left"}},"说明"),s("th",{style:{"text-align":"left"}},"类型"),s("th",{style:{"text-align":"left"}},"可选值"),s("th",{style:{"text-align":"left"}},"默认值")])],-1),r={style:{"text-align":"left"}},o=s("td",{style:{"text-align":"left"}},"导航栏标题是否居中",-1),y=s("td",{style:{"text-align":"left"}},"boolean",-1),c=s("td",{style:{"text-align":"left"}},"-",-1),_=s("td",{style:{"text-align":"left"}},"true",-1),b=s("tr",null,[s("td",{style:{"text-align":"left"}},"navbar"),s("td",{style:{"text-align":"left"}},[t("是否启用导航栏，默认使用应用配置 "),s("code",null,"navbar.enable")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),x={style:{"text-align":"left"}},F=s("td",{style:{"text-align":"left"}},[t("导航栏模式，默认使用应用配置 "),s("code",null,"navbar.mode")],-1),u=s("td",{style:{"text-align":"left"}},"string",-1),f=s("td",{style:{"text-align":"left"}},"static / fixed / show-hide-fixed / sticky",-1),C=s("td",{style:{"text-align":"left"}},"-",-1),v={style:{"text-align":"left"}},m=s("td",{style:{"text-align":"left"}},"从预设中设置展示在导航栏左侧的图标按钮",-1),B=s("td",{style:{"text-align":"left"}},"string / string[]",-1),A=s("td",{style:{"text-align":"left"}},"back / home / forward / i18n",-1),D=s("td",{style:{"text-align":"left"}},"-",-1),P={style:{"text-align":"left"}},T=s("td",{style:{"text-align":"left"}},"从预设中选择展示在导航栏右侧的图标按钮",-1),S=s("td",{style:{"text-align":"left"}},"string / string[]",-1),q=s("td",{style:{"text-align":"left"}},"back / home / forward / i18n",-1),I=s("td",{style:{"text-align":"left"}},"-",-1),V=s("tr",null,[s("td",{style:{"text-align":"left"}},"tabbar"),s("td",{style:{"text-align":"left"}},[t("是否启用标签栏，默认使用应用配置 "),s("code",null,"tabbar.enable")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),N={style:{"text-align":"left"}},L=s("td",{style:{"text-align":"left"}},"标签栏名称，如果应用配置里配置了多套标签栏，需设置当前页面使用哪套标签栏，默认使用第一套",-1),w=s("td",{style:{"text-align":"left"}},"string",-1),R=s("td",{style:{"text-align":"left"}},"-",-1),$=s("td",{style:{"text-align":"left"}},"-",-1),M=s("tr",null,[s("td",{style:{"text-align":"left"}},"copyright"),s("td",{style:{"text-align":"left"}},[t("是否展示底部版权信息，默认使用应用配置 "),s("code",null,"copyright.enable")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),j=s("tr",null,[s("td",{style:{"text-align":"left"}},"backTop"),s("td",{style:{"text-align":"left"}},[t("是否启用返回顶部按钮，默认使用应用配置 "),s("code",null,"app.enableBackTop")]),s("td",{style:{"text-align":"left"}},"boolean"),s("td",{style:{"text-align":"left"}},"-"),s("td",{style:{"text-align":"left"}},"-")],-1),H={style:{"text-align":"left"}},J=s("td",{style:{"text-align":"left"}},"是否记忆滚动位置（前提条件：需开启页面缓存）",-1),O=s("td",{style:{"text-align":"left"}},"boolean",-1),W=s("td",{style:{"text-align":"left"}},"-",-1),z=s("td",{style:{"text-align":"left"}},"-",-1),G={style:{"text-align":"left"}},K=s("td",{style:{"text-align":"left"}},"设置竖向滚动条位置",-1),Q=s("td",{style:{"text-align":"left"}},"number",-1),U=s("td",{style:{"text-align":"left"}},"-",-1),X=s("td",{style:{"text-align":"left"}},"-",-1),Y={style:{"text-align":"left"}},Z=s("td",{style:{"text-align":"left"}},"设置横向滚动条位置",-1),ss=s("td",{style:{"text-align":"left"}},"number",-1),ts=s("td",{style:{"text-align":"left"}},"-",-1),is=s("td",{style:{"text-align":"left"}},"-",-1),as={style:{"text-align":"left"}},es=s("td",{style:{"text-align":"left"}},"是否在设置滚动条位置时使用动画过渡",-1),ls=s("td",{style:{"text-align":"left"}},"boolean",-1),ns=s("td",{style:{"text-align":"left"}},"-",-1),hs=s("td",{style:{"text-align":"left"}},"-",-1),ps=e("",3),ds={tabindex:"0"},ks=s("thead",null,[s("tr",null,[s("th",{style:{"text-align":"left"}},"事件名"),s("th",{style:{"text-align":"left"}},"说明")])],-1),gs=s("tr",null,[s("td",{style:{"text-align":"left"}},"scroll"),s("td",{style:{"text-align":"left"}},"页面滚动时触发")],-1),Es={style:{"text-align":"left"}},rs=s("td",{style:{"text-align":"left"}},"页面滚动到顶部时触发",-1),os={style:{"text-align":"left"}},ys=s("td",{style:{"text-align":"left"}},"页面滚动到底部时触发",-1),cs=e("",6),_s={id:"mode",tabindex:"-1"},bs=s("a",{class:"header-anchor",href:"#mode","aria-label":'Permalink to "mode badge: () => globalStore.number权限
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enablePermission: true,
+ },
+}然后在 /src/api/modules/user.ts 文件里找到 getPermissions 的方法，该方法用于登录成功后获取用户权限。在实际开发中，需要手动进行修改，框架默认通过 mock 模拟获取用户权限。
在演示源码中，默认提供了两组权限，你可以在“权限验证”导航里切换帐号查看不同权限下的效果。如果使用的不是 admin 或 test 用户名登录，则在导航栏里看不到“权限验证”导航入口。
路由权限
在路由的 meta 配置项中，其中有一个 auth 参数，这个就是用来配置路由的权限，一个路由可以配置多个权限，当配置多个权限时，只要满足其中任何一个，则视为用户有访问该路由的权限，如下：
ts
meta: {
+ auth: ['news.browse', 'news.edit'],
+},框架内部鉴权的逻辑是字符串比对，所以建议对权限有个统一的格式，例如为 xxx.yyy ，其中 xxx 表示模块名， yyy 表示操作类型。那么上面那个例子就表示：
news.browse新闻模块的浏览权限news.edit新闻模块的编辑权限
路由权限是比较暴力的，即没有权限则该路由页面无法访问，并且也不会在导航栏中显示。但在实际业务中，遇到更多的情况通常是，可以访问路由页面，但会根据不同权限，使用页面里的不同功能，这时候就需要用到下面三种鉴权方式。
鉴权组件
页面中某个模块，当前用户具备该权限是如何显示，不具备该权限又是如何显示，针对这样的需求，框架提供了 <Auth> 和 <AuthAll> 组件，具体使用如下：
template
<!-- 单权限验证 -->
+<Auth :value="'department.create'">
+ <p>你有该权限</p>
+ <template #no-auth>
+ <p>你没有该权限</p>
+ </template>
+</Auth>
+
+<!-- 多权限验证，用户只要具备其中任何一个权限，则验证通过 -->
+<Auth :value="['department.create', 'department.edit']">
+ <p>你有该权限</p>
+ <template #no-auth>
+ <p>你没有该权限</p>
+ </template>
+</Auth>
+
+<!-- 多权限验证，用户必须具备全部权限，才验证通过 -->
+<AuthAll :value="['department.create', 'department.edit']">
+ <p>你有该权限</p>
+ <template #no-auth>
+ <p>你没有该权限</p>
+ </template>
+</AuthAll>鉴权指令
对于单个元素，也提供了 v-auth 和 v-auth-all 鉴权指令，使用上对比鉴权组件更方便，当然它能做的事情也更简单。
template
<!-- 单权限验证 -->
+<button v-auth="'department.create'">新增部门</button>
+
+<!-- 多权限验证，用户只要具备其中任何一个权限，则验证通过 -->
+<button v-auth="['department.create', 'department.edit']">新增部门</button>
+
+<!-- 多权限验证，用户必须具备全部权限，才验证通过 -->
+<button v-auth-all="['department.create', 'department.edit']">新增部门</button>鉴权函数
鉴权组件和鉴权指令控制的是页面上的元素，而鉴权函数则更多是使用在业务流程代码里的权限判断。
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
<script setup lang="ts">
+definePage({
+ meta: {
+ auth: 'admin'
+ },
+})
+</script>
+
+<template>
+ <!-- ... -->
+</template>如上所示，如果用户是 admin 权限，则可以访问该路由。
代码文件自动生成
开发过程中，避免不了手动去频繁创建页面、组件等文件，并且还要在文件里写一些必要的代码，是不是觉得很麻烦？现在你可以用更简洁的方式来处理这一切。
说明
该功能基于 plop 实现，在扩展新的模式前，请先详细阅读 plop 文档。
本套件默认提供了 3 种模式，通过 pnpm run new 指令可以自行选择。
page页面文件component组件文件store全局状态文件
除了默认提供的 3 种模式，你还可以自定义新的模式，其原理就是通过预设模板，按照特定规则创建文件或者文件夹。
预设模板文件存放在 ./plop-templates/ 目录下，并在 ./plopfile.js 文件里进行引用，你可以参考现有 3 种模式的目录结构进行创建新的模板。
page
page 模式下，只能在 /src/views/ 目录下选择指定的文件夹进行生成，生成的文件中，部分关键位置会被替换掉，例如 <page-header /> 中的 title 会按照你输入的中文名称替换，页面的 name 会根据当前文件目录和文件名自动生成，确保唯一。
component
component 模式可以选择生成的是全局组件还是局部组件，全局组件生成目录为 /src/components/ ，局部组件则在 /src/views/ 目录下选择指定的文件夹进行生成。
store
store 模式则会在 /src/store/modules/ 目录下生成一个对应的文件。
常见问题
安装依赖时有警告
这是一个可以无视的警告，因为依赖已经安装成功了。
如果对这个问题感兴趣，可以浏览下这个 issue ，里面有给出一个忽略警告的方案，就是在 package.json 中添加：
json
{
+ "pnpm": {
+ "peerDependencyRules": {
+ "ignoreMissing": [
+ "postcss",
+ "rollup"
+ ]
+ }
+ }
+}这样你下次再安装依赖的时候，就不会出现该警告了。
为什么本地开发环境首次载入很慢
主要是 Vite 的原因，具体可以阅读这篇文章了解《为什么有人说 vite 快，有人却说 vite 慢？》。
Vite 4.3 显著提升了开发服务器的性能，具体可以阅读这篇文章了解《Vite 4.3 is out!》，同时框架 v3.0.0 版本开始，vite 也升级到了 4.3 版本。
项目 URL 里的 # 号能不能去掉
这是因为路由默认使用的是 Hash 模式，你可以在 /src/router/index.ts 修改为 HTML5 模式，但需要注意，开启 HTML5 模式，服务器也需要做相应的配置调整，详细可阅读《Vue-router 不同的历史模式》。
页面切换后显示空白
因为路由切换有使用到 <transition> 动画，而 <transition> 组件无法处理多个根节点的组件，所以请检查路由对应所有的页面文件的根节点是否均为单个。
错误示例：
vue
<template>
+ <!-- 需要注意，注释也会被视为一个节点 -->
+ <h1>text h1</h1>
+ <h2>text h2</h2>
+</template>
+
+<template>
+ 没有节点也是不行的
+</template>正确示例：
vue
<template>
+ <div>
+ <h1>text h1</h1>
+ <h2>text h2</h2>
+ </div>
+</template>
+
+<template>
+ <div>
+ 这样就没问题啦
+ <div>
+</template>相关 Issue 说明。
开发环境修改代码后，路由跳转导致页面空白
参考这个 issue ，未来 Vue 官方可能会修复这个问题，目前只能手动刷新浏览器。
构建报错，提示内存溢出
构建时失败并在错误信息里提示 Reached heap limit Allocation failed - JavaScript heap out of memory 。
你可以执行 pnpm add cross-env -D 安装 cross-env 依赖，并在 package.json 里修改构建脚本指令：
json
{
+ "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 编写代码。
准备工作
源码
阅读开发文档前，请确保手上已经有 Fantastic-mobile 源码，因为文档中提及的内容，都是需要在本地项目中编写或修改代码并运行才能呈现的。
源码分为两种：
- 框架源码 不含示例代码，可直接用于实际开发
- 演示源码 同演示站，在框架源码基础上，提供了大量示例代码
基础版
到 Github Releases 页面下载最新版本的压缩包，如下图所示：
或者也可以从 Github/Gitee 上拉取源码，但需要注意，直接拉取源码可能会包含未发布的内容，最终发布时可能会有变动，请谨慎使用。
sh
# 拉取框架源码
+git clone https://github.com/fantastic-mobile/basic.git
+# 拉取演示源码
+git clone -b example https://github.com/fantastic-mobile/basic.gitsh
# 拉取框架源码
+git clone https://gitee.com/fantastic-mobile/basic.git
+# 拉取演示源码
+git clone -b example https://gitee.com/fantastic-mobile/basic.git专业版
专业版用户会被邀请加入到 Fantastic-mobile Github 官方组织，加入组织后可访问专业版私有仓库，源码获取方式和基础版无差异，只是源码仓库不同。
如果你想获取专业版源码，可以点这里去购买。
开发环境
使用本框架前，需要在本地依次安装好 Node.js, pnpm, Git(非必须) 和 Visual Studio Code。
注意
在 package.json 文件中有限制 node 要求版本，建议使用最新 LTS 版本。
然后在 Visual Studio Code 里安装好以下扩展：
在 Visual Studio Code 里打开源码文件夹，右下角会自动提示需要安装的依赖，直接点击安装即可。
额外推荐
以上为开发时必备扩展，以下则是作者推荐安装的扩展，安装它们将在一定程度上提升开发效率。
- Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包
- Color Highlight 在代码中高亮颜色
- Highlight Matching Tag 高亮显示匹配的标签
- Image preview 图片预览
- indent-rainbow 彩虹缩进提示
技术栈
了解并熟悉框架使用到的技术栈，能让你使用本框架更得心应手。
- Vite
- Vue 3 (v3 迁移指南)
- Vue Router (unplugin-vue-router 基于文件的类型化路由)
- Pinia
- UnoCSS
替换为 NutUI
由于框架默认使用的是 Vant 组件库，并且演示源码中大量示例也使用了 Vant，如果你需要使用 NutUI，请拉取框架源码分支，或者到 Github Releases 页面下载框架源码压缩包。
专业版用户也同样，请到专业版仓库下载框架源码。
安装
sh
# 安装依赖
+pnpm install
+
+# 安装 NutUI
+pnpm add @nutui/nutui @nutui/touch-emulator代码调整
基础版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import NutUI from '@nutui/nutui'
+import '@nutui/nutui/dist/style.css'
+import '@nutui/touch-emulator'
+
+function install(app: App) {
+ app.use(NutUI)
+}
+
+export default { install }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { Locale } from '@nutui/nutui'
+import zhCN from '@nutui/nutui/dist/packages/locale/lang/zh-CN'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+Locale.use('zh-CN', zhCN)
+</script>
+
+<template>
+ <NutConfigProvider :theme="settingsStore.currentColorScheme" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </NutConfigProvider>
+</template>专业版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import NutUI from '@nutui/nutui'
+import '@nutui/nutui/dist/style.css'
+import '@nutui/touch-emulator'
+import zhCN from '@nutui/nutui/dist/packages/locale/lang/zh-CN'
+import enUS from '@nutui/nutui/dist/packages/locale/lang/en-US'
+
+function install(app: App) {
+ app.use(NutUI)
+}
+
+// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
+const locales: Record<string, any> = {
+ 'zh-cn': zhCN,
+ 'en-us': enUS,
+}
+
+export default { install }
+export { locales }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { Locale } from 'vant'
+import { locales } from './index'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.lang, () => {
+ Locale.use(settingsStore.lang, locales[settingsStore.lang])
+})
+</script>
+
+<template>
+ <NutConfigProvider :theme="settingsStore.currentColorScheme" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </NutConfigProvider>
+</template>修改登录页
由于登录页使用了 Vant 组件，并且删除会导致框架无法正常使用，所以此处需要开发者自行修改或者重新制作登录页，或者也可以参考下方示例中已经修改好的登录页。
卸载
sh
# 卸载 Vant
+pnpm remove vant @vant/touch-emulator完成
至此，你已经将框架中的 Vant 组件库替换为 NutUI 组件库，并且可以开始使用 NutUI 进行业务开发了。
示例
如果对上述的步骤还有不清楚的地方，可以访问此仓库查看示例源码，以及此链接查看示例网站。
替换为 Varlet
由于框架默认使用的是 Vant 组件库，并且演示源码中大量示例也使用了 Vant，如果你需要使用 Varlet，请拉取框架源码分支，或者到 Github Releases 页面下载框架源码压缩包。
专业版用户也同样，请到专业版仓库下载框架源码。
安装
sh
# 安装依赖
+pnpm install
+
+# 安装 NutUI
+pnpm add @varlet/ui @varlet/touch-emulator代码调整
基础版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import Varlet from '@varlet/ui'
+import '@varlet/ui/es/style'
+import '@varlet/touch-emulator'
+
+function install(app: App) {
+ app.use(Varlet)
+}
+
+export default { install }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { Locale, StyleProvider, Themes } from '@varlet/ui'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.currentColorScheme, (val) => {
+ if (val === 'light') {
+ StyleProvider(null)
+ }
+ else {
+ StyleProvider(Themes.dark)
+ }
+})
+</script>
+
+<template>
+ <VarLocaleProvider locale="zh-CN" :messages="Locale.zhCN" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </VarLocaleProvider>
+</template>专业版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import Varlet, { Locale } from '@varlet/ui'
+import '@varlet/ui/es/style'
+import '@varlet/touch-emulator'
+import enUS from 'vant/es/locale/lang/en-US'
+import zhCN from 'vant/es/locale/lang/zh-CN'
+
+function install(app: App) {
+ app.use(Varlet)
+}
+
+// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
+const locales: Record<string, any> = {
+ 'zh-cn': Locale.zhCN,
+ 'en-us': Locale.enUS,
+}
+
+export default { install }
+export { locales }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { locales } from './index'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.currentColorScheme, (val) => {
+ if (val === 'light') {
+ StyleProvider(null)
+ }
+ else {
+ StyleProvider(Themes.dark)
+ }
+})
+</script>
+
+<template>
+ <VarLocaleProvider :locale="settingsStore.lang" :messages="locales[settingsStore.lang]" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </VarLocaleProvider>
+</template>修改登录页
由于登录页使用了 Vant 组件，并且删除会导致框架无法正常使用，所以此处需要开发者自行修改或者重新制作登录页，或者也可以参考下方示例中已经修改好的登录页。
卸载
sh
# 卸载 Vant
+pnpm remove vant @vant/touch-emulator完成
至此，你已经将框架中的 Vant 组件库替换为 Varlet 组件库，并且可以开始使用 Varlet 进行业务开发了。
示例
如果对上述的步骤还有不清楚的地方，可以访问此仓库查看示例源码，以及此链接查看示例网站。
路由
框架无需手动配置路由，而是基于文件系统自动生成路由，意味着开发者只需在 /src/views/ 目录下创建文件，就会根据文件目录自动生成对应的路由，该能力由 unplugin-vue-router 提供。
配置规范
如果对 unplugin-vue-router 的规范还不了解，建议先阅读官方文档。框架在此基础上，预设了一些规范。以下面的目录结构为例：
目录结构 路由地址 路由 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通过上面的示例，可以看出几个规范：
- 文件夹或文件名开头为
_的不会生成路由 - 所有
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文件内设置并覆盖
注意
默认生成的路由可能为嵌套路由，但为了用一套 API 统一处理页面缓存，框架会将所有路由均处理成一级路由，并在 App.vue 里处理缓存逻辑。意味着如果同时创建 /src/views/users/index.vue 和 /src/views/users.vue 组件，/src/views/users/index.vue 不会在 /src/views/users.vue 的 <RouterView> 中呈现。
这也意味着 /src/views/users/detail/[id].vue 和 /src/views/users/detail.[id].vue 生成的路由和行为都是一样的，只有路由 name 有区别。
这与 unplugin-vue-router 默认行为略有不同。
definePage()
通过 definePage() 可以修改路由对象或添加路由元信息：
vue
<script setup lang="ts">
+definePage({
+ name: 'example',
+ meta: {
+ title: '示例'
+ },
+})
+</script>
+
+<template>
+ <!-- ... -->
+</template>警告
不能在 definePage() 中使用变量，因为其传递的参数会在构建时提取并从 <script setup> 中删除。
路由元信息
title
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 浏览器及页面中展示的标题 |
支持设置 i18n 对应的 key 值，详细可阅读《国际化》。
cache
| 类型 | 默认值 | 说明 |
|---|---|---|
| boolean / string / string[] | / | 是否对该页面进行缓存 |
boolean设置为 true 时，该路由页面会被一直缓存string设置某个目标路由的 name ，表示当前路由页面跳转到设置的 name 对应的路由页面时，则将当前路由页面进行缓存，否则不缓存string[]，可设置一个目标路由的 name 数组
当类型为 string 或 string[] 时，可以更精细的去控制页面缓存的逻辑。例如从列表页进入详情页，则需要将列表页进行缓存；而从列表页进入其它页面，则无需将列表页进行缓存。详细可阅读《页面缓存》。
noCache
| 类型 | 默认值 | 说明 |
|---|---|---|
| string / string[] | / | 是否对该页面清除缓存，需设置 cache 才会生效 |
string设置某个目标路由的 name ，表示当前路由页面跳转到设置的 name 对应的路由页面时，则将当前路由页面清除缓存，否则不清除缓存string[]，可设置一个目标路由的 name 数组
该属性通常搭配 cache: true 使用，可以更精细的去控制页面取消缓存的逻辑。详细可阅读《页面缓存》。
auth
| 类型 | 默认值 | 说明 |
|---|---|---|
| boolean / string / string[] | / | 该路由访问权限 |
boolean设置为true时，该路由仅登录用户可访问string设置某个权限的名称，表示当前路由仅允许具备该权限的用户可访问string[]设置多个权限的名称数组，表示当前路由允许具备其中一个权限的用户可访问
当类型为 string 或 string[] 时，可以更精细的去控制页面权限，不具备访问权限则会显示 403 页面，详细可阅读《权限 - 路由权限》。
开始
准备工作完成后，在源码文件夹根目录下依次执行以下命令：
sh
# 安装依赖
+# 注意，必须使用 pnpm 安装依赖，请勿使用 npm 或 yarn 安装依赖
+pnpm install
+
+# 运行
+pnpm run dev运行成功后，会自动访问页面，默认地址为 http://localhost:9000
报错
如果无法正常安装依赖，可能是因为 npm 默认源无法访问，可以尝试执行 pnpm config set registry https://registry.npmmirror.com/ 切换为国内 npmmirror 镜像源（也可以使用 nrm 一键切换源），然后删除根目录下 /node_modules 文件夹并重新安装依赖。
如果依旧无法运行（基本不太可能），可尝试删除根目录下 /node_modules 文件夹与 pnpm-lock.yaml 文件后，再删除 package.json 中 "preinstall": "npx only-allow pnpm" 这句脚本，最后使用 npm / yarn 或其他包管理工具进行安装依赖。但需要清楚一点，这样操作后，将无法与官方环境锁定的依赖包版本保持一致，可能会出现无法预知的问题，非必要情况下，请勿使用该方案。
由于 localStorage 和 sessionStorage 的同源策略，同一域名下的 storage 数据会共享。如果你恰好需要在同一域名下部署两套(及以上)系统，不可避免会出现 storage 数据冲突，框架提供了一个 storage 类来解决这个问题。
解决同源 storage 数据冲突的方式就是增加前缀区分，首先需要在应用配置中设置一个唯一且不重名的前缀：
ts
const globalSettings: Settings.all = {
+ app: {
+ storagePrefix: 'fm_',
+ },
+}然后在需要使用到 storage 的地方引入：
ts
import storage from '@/utils/storage'这个类封装了 setItem() ，getItem() ，removeItem() ，clear() 方法，同时还增加了一个 has() 方法用来判断对象是否存在：
ts
// localStorage
+storage.local.has(key)
+storage.local.get(key)
+storage.local.set(key, value)
+storage.local.remove(key)
+storage.local.clear()
+
+// sessionStorage
+storage.session.has(key)
+storage.session.get(key)
+storage.session.set(key, value)
+storage.session.remove(key)
+storage.session.clear()注意
由于 localStorage 有容量上限，一般为 5M ，如果一同域名下部署两套系统，意味着两套系统共享 5M 容量，所以不建议在同一域名部署太多套系统，避免出现 localStorage 不够用的情况。
全局状态管理
TIP
Pinia 已正式成为 Vue.js 官方状态库，如果你对 Pinia 还不熟悉，除了通过 Pinia 官网学习外，我还收集了一些文字/视频的介绍，可以帮助你快速上手。
全局状态文件存放在 /src/store/modules/ 目录下，请按模块进行区分。同时请保证文件名和文件内唯一ID保持一致，建议使用 pnpm new 指令进行创建。
例如新建一个 example.ts 的文件：
ts
const useExampleStore = defineStore(
+ // 唯一ID
+ 'example',
+ () => {
+ const someThing = ref(0)
+
+ return {
+ someThing,
+ }
+ },
+)
+
+export default useExampleStore使用方法：
ts
`,7),l=[t];function p(h,k,r,d,o,c){return a(),i("div",null,l)}const y=s(n,[["render",p]]);export{g as __pageData,y as default};
diff --git a/assets/guide_store.md.BpEcm4ka.lean.js b/assets/guide_store.md.BpEcm4ka.lean.js
new file mode 100644
index 0000000..a9b43cb
--- /dev/null
+++ b/assets/guide_store.md.BpEcm4ka.lean.js
@@ -0,0 +1 @@
+import{_ as s,c as i,o as a,a5 as e}from"./chunks/framework.D-J1Cv1C.js";const g=JSON.parse('{"title":"全局状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/store.md","filePath":"guide/store.md"}'),n={name:"guide/store.md"},t=e("",7),l=[t];function p(h,k,r,d,o,c){return a(),i("div",null,l)}const y=s(n,[["render",p]]);export{g as __pageData,y as default};
diff --git a/assets/guide_svg-icon.md.Ce1T8AF7.js b/assets/guide_svg-icon.md.Ce1T8AF7.js
new file mode 100644
index 0000000..6870331
--- /dev/null
+++ b/assets/guide_svg-icon.md.Ce1T8AF7.js
@@ -0,0 +1,12 @@
+import{_ as s,c as i,o as a,a5 as t,ag as n,ah as e}from"./chunks/framework.D-J1Cv1C.js";const u=JSON.parse('{"title":"图标","description":"","frontmatter":{},"headers":[],"relativePath":"guide/svg-icon.md","filePath":"guide/svg-icon.md"}'),l={name:"guide/svg-icon.md"},h=t(`import useExampleStore from '@/store/modules/example'
+const exampleStore = useExampleStore()
+
+exampleStore.someThing图标
框架提供了三种使用图标的方式，你可以根据自己的使用需求自行选择。
自定义图标
你可以去阿里巴巴矢量图标库，或者其它支持下载 SVG 图标文件的网站，又或者是设计师绘制的 SVG 文件，将准备好的 SVG 图标文件放到 /src/assets/icons/ 目录下，然后在页面中就可以通过 SvgIcon 组件使用了，name 就是 svg 的文件名。
vue
<!-- /src/assets/icons/example.svg -->
+<SvgIcon name="example" />Iconify 图标
介绍
Iconify 提供 100+ 套图标集，有 100,000+ 个图标可以免费使用。
除了可以在 Iconify 官网上查找搜需要的图标，你还可以在 Icônes 网站 上查找，这是一个基于 Iconify 的在线图标搜索网站，它比 Iconify 官网的操作更直观。
Unocss 方案
说明
Unocss 方案采用了 CSS 去处理图标的展示，框架大部分核心模块里采用的是这种方式，如果你对其中的技术细节感兴趣，可以阅读这篇 Unocss 作者的《聊聊纯 CSS 图标》这篇文章。
框架已经做好了所有配置，使用方式也极为简单，你只需进入 Iconify 官网 上查找 Iconify 提供的所有图标，然后点击需要使用的图标，复制图标名称，在任意原生 HTML 标签上通过设置 class ，格式为 i-{集合名}:{图标名}，例如：
vue
<div class="i-ep:arrow-right" />
+<i class="i-ep:search" />当然你同样也可以通过 SvgIcon 使用它。
vue
<SvgIcon name="i-ep:arrow-right" />在使用 Unocss 图标时，需要注意以下两点：
图标字符串不支持拼接
vue<!-- 这样不会生效 --> +<SvgIcon :name="'i-ep' + ':search'" />图标字符串不支持异步返回
vue<!-- 这样不会生效 --> +<!-- 假设 name 是异步请求返回的数据，name 为 i-ep:search --> +<SvgIcon :name="name" />
如果确实有以上需求，你可以使用 Iconify 原生提供的方案。
Iconify 原生方案
说明
框架保留了 Iconify 官方提供的使用方式，格式为 {集合名}:{图标名} 。
vue
<script setup>
+import { Icon } from '@iconify/vue'
+</script>
+
+<template>
+ <Icon icon="ep:arrow-right" />
+</template>当然这么使用并没有很方便，依旧还是需要手动导入一个 Icon 组件。如果你也觉得麻烦的话，那么你可以使用 SvgIcon 组件来展示，框架已经帮你做好的所有处理。
vue
`,24),p=[h];function k(o,r,c,d,E,g){return a(),i("div",null,p)}const v=s(l,[["render",k]]);export{u as __pageData,v as default};
diff --git a/assets/guide_svg-icon.md.Ce1T8AF7.lean.js b/assets/guide_svg-icon.md.Ce1T8AF7.lean.js
new file mode 100644
index 0000000..8c1be02
--- /dev/null
+++ b/assets/guide_svg-icon.md.Ce1T8AF7.lean.js
@@ -0,0 +1 @@
+import{_ as s,c as i,o as a,a5 as t,ag as n,ah as e}from"./chunks/framework.D-J1Cv1C.js";const u=JSON.parse('{"title":"图标","description":"","frontmatter":{},"headers":[],"relativePath":"guide/svg-icon.md","filePath":"guide/svg-icon.md"}'),l={name:"guide/svg-icon.md"},h=t("",24),p=[h];function k(o,r,c,d,E,g){return a(),i("div",null,p)}const v=s(l,[["render",k]]);export{u as __pageData,v as default};
diff --git a/assets/guide_theme.md.DoCHY_Cl.js b/assets/guide_theme.md.DoCHY_Cl.js
new file mode 100644
index 0000000..6528fff
--- /dev/null
+++ b/assets/guide_theme.md.DoCHY_Cl.js
@@ -0,0 +1,129 @@
+import{_ as k,D as l,c as p,j as i,a as s,I as h,a5 as a,o as t,ai as e}from"./chunks/framework.D-J1Cv1C.js";const _=JSON.parse('{"title":"主题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/theme.md","filePath":"guide/theme.md"}'),E={name:"guide/theme.md"},r=a(`<SvgIcon name="ep:arrow-right" />主题
框架主题
主题配色存放在 /themes/index.ts 文件中，基础版和专业版内容略有不同。
基础版
ts
import { hex2rgba } from '@unocss/preset-mini/utils'
+
+export const lightTheme = {
+ // 颜色主题
+ 'color-scheme': 'light',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
+ '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+ // 主体
+ '--g-bg': '#f2f2f2',
+ '--g-container-bg': '#fff',
+ '--g-border-color': '#DCDFE6',
+ // 导航栏
+ '--g-navbar-bg': '#fff',
+ '--g-navbar-color': '#0f0f0f',
+ // 标签栏
+ '--g-tabbar-bg': '#fff',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#0f0f0f',
+}
+
+export const darkTheme = {
+ // 颜色主题
+ 'color-scheme': 'dark',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#e5e5e5')!.join(' '),
+ '--ui-text': hex2rgba('#242b33')!.join(' '),
+ // 主体
+ '--g-bg': '#0a0a0a',
+ '--g-container-bg': '#141414',
+ '--g-border-color': '#15191e',
+ // 导航栏
+ '--g-navbar-bg': '#141414',
+ '--g-navbar-color': '#e5e5e5',
+ // 标签栏
+ '--g-tabbar-bg': '#141414',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#e5e5e5',
+}专业版
与基础版不同，专业版默认提供了 12 款主题，明亮和暗黑模式各 6 款，并且主题在运行时共存，可实现动态切换。
ts
import { hex2rgba } from '@unocss/preset-mini/utils'
+
+export default {
+ light: {
+ // 颜色主题
+ 'color-scheme': 'light',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
+ '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+ // 主体
+ '--g-bg': '#f2f2f2',
+ '--g-container-bg': '#fff',
+ '--g-border-color': '#DCDFE6',
+ // 导航栏
+ '--g-navbar-bg': '#fff',
+ '--g-navbar-color': '#0f0f0f',
+ // 标签栏
+ '--g-tabbar-bg': '#fff',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#0f0f0f',
+ },
+ ...
+ dark: {
+ // 颜色主题
+ 'color-scheme': 'dark',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#e5e5e5')!.join(' '),
+ '--ui-text': hex2rgba('#242b33')!.join(' '),
+ // 主体
+ '--g-bg': '#0a0a0a',
+ '--g-container-bg': '#141414',
+ '--g-border-color': '#15191e',
+ // 导航栏
+ '--g-navbar-bg': '#141414',
+ '--g-navbar-color': '#e5e5e5',
+ // 标签栏
+ '--g-tabbar-bg': '#141414',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#e5e5e5',
+ },
+ ...
+}如果框架提供的主题风格满足不了你的需求，你还可以自定义新的主题。
ts
import { hex2rgba } from '@unocss/preset-mini/utils'
+
+export default {
+ newThemeName: { // 主题名称
+ // 颜色主题
+ 'color-scheme': 'light',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
+ '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+ // 主体
+ '--g-bg': '#f2f2f2',
+ '--g-container-bg': '#fff',
+ '--g-border-color': '#DCDFE6',
+ // 导航栏
+ '--g-navbar-bg': '#fff',
+ '--g-navbar-color': '#0f0f0f',
+ // 标签栏
+ '--g-tabbar-bg': '#fff',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#0f0f0f',
+ },
+}最后在应用配置中使用该主题：
ts
const globalSettings: Settings.all = {
+ app: {
+ // 如果主题是暗黑模式下使用的，则 darkTheme: 'newThemeName'
+ lightTheme: 'newThemeName',
+ },
+}颜色方案
在应用配置中设置：
ts
`,16),g={id:"哀悼模式",tabindex:"-1"},d=i("a",{class:"header-anchor",href:"#哀悼模式","aria-label":'Permalink to "哀悼模式 const globalSettings: Settings.all = {
+ app: {
+ /**
+ * 留空跟随系统
+ * light 明亮模式
+ * dark 暗黑模式
+ */
+ colorScheme: '',
+ },
+}在应用配置中设置：
ts
`,2),y={id:"色弱模式",tabindex:"-1"},c=i("a",{class:"header-anchor",href:"#色弱模式","aria-label":'Permalink to "色弱模式 const globalSettings: Settings.all = {
+ app: {
+ enableMournMode: true,
+ },
+}在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enableColorAmblyopiaMode: true,
+ },
+}开发注意
如果只在明亮或暗黑模式中，选择其中一种模式进行业务开发，那没有什么需要注意的，你可以按照以往的开发习惯进行开发，这也是框架推荐的方式。
但如果需要让用户可以自己选择明亮或暗黑模式，或者是根据浏览器主题来判断是使用明亮还是暗黑模式。这时候开发则需要注意，业务页面里使用到的颜色将不能写成固定值（例如 color 、background-color 、border-color 、box-shadow 等有涉及到颜色的属性），因为同一个色值是无法顾及到明亮和暗黑两种模式的。
这时候我们建议使用 UnoCSS 进行样式编写，例如 text-dark dark-text-white 、bg-green dark-bg-red 。如果你不习惯使用 UnoCSS ，那也可以使用下面这种方法，在页面中去自定义一些颜色。
scss
div {
+ color: #000;
+
+ [data-theme="dark"] & {
+ color: #fff;
+ }
+}最后分享一篇关于暗黑模式的文章《教你巧用UI设计中的暗黑模式——Dark Mode》，希望帮助你更好地在暗黑模式下开发出优秀的页面。
`,8);function C(B,b,D,A,f,u){const n=l("Badge");return t(),p("div",null,[r,i("h2",g,[s("哀悼模式 "),h(n,{type:"tip",text:"v0.2.0 新增"}),s(),d]),F,i("h2",y,[s("色弱模式 "),h(n,{type:"tip",text:"v0.2.0 新增"}),s(),c]),o])}const v=k(E,[["render",C]]);export{_ as __pageData,v as default}; diff --git a/assets/guide_theme.md.DoCHY_Cl.lean.js b/assets/guide_theme.md.DoCHY_Cl.lean.js new file mode 100644 index 0000000..f2f4795 --- /dev/null +++ b/assets/guide_theme.md.DoCHY_Cl.lean.js @@ -0,0 +1 @@ +import{_ as k,D as l,c as p,j as i,a as s,I as h,a5 as a,o as t,ai as e}from"./chunks/framework.D-J1Cv1C.js";const _=JSON.parse('{"title":"主题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/theme.md","filePath":"guide/theme.md"}'),E={name:"guide/theme.md"},r=a("",16),g={id:"哀悼模式",tabindex:"-1"},d=i("a",{class:"header-anchor",href:"#哀悼模式","aria-label":'Permalink to "哀悼模式动态标题
让网页标题显示路由配置的 meta.title 字段。
使用
在应用配置中设置：
ts
`,5),l=[n];function h(p,d,k,r,o,c){return a(),i("div",null,l)}const _=s(e,[["render",h]]);export{E as __pageData,_ as default};
diff --git a/assets/guide_title.md.4qYTrMaW.lean.js b/assets/guide_title.md.4qYTrMaW.lean.js
new file mode 100644
index 0000000..21088d0
--- /dev/null
+++ b/assets/guide_title.md.4qYTrMaW.lean.js
@@ -0,0 +1 @@
+import{_ as s,c as i,o as a,a5 as t}from"./chunks/framework.D-J1Cv1C.js";const E=JSON.parse('{"title":"动态标题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/title.md","filePath":"guide/title.md"}'),e={name:"guide/title.md"},n=t("",5),l=[n];function h(p,d,k,r,o,c){return a(),i("div",null,l)}const _=s(e,[["render",h]]);export{E as __pageData,_ as default};
diff --git a/assets/guide_upgrade.md.MYKFZrm3.js b/assets/guide_upgrade.md.MYKFZrm3.js
new file mode 100644
index 0000000..8f31be5
--- /dev/null
+++ b/assets/guide_upgrade.md.MYKFZrm3.js
@@ -0,0 +1 @@
+import{_ as e,c as a,o as t,a5 as o}from"./chunks/framework.D-J1Cv1C.js";const g=JSON.parse('{"title":"框架更新","description":"","frontmatter":{},"headers":[],"relativePath":"guide/upgrade.md","filePath":"guide/upgrade.md"}'),r={name:"guide/upgrade.md"},i=o('const globalSettings: Settings.all = {
+ app: {
+ enableDynamicTitle: true,
+ },
+}框架更新
首先明确一点，Fantastic-mobile 无法像 npm 的插件一样更新，不仅我们的框架如此，其实大部分 H5 开发框架都是如此。
因为本质上这类框架其实是一个初始框架，开发者会根据自身需求去修改，然后基于业务开展业务代码编写。所以一旦下载开始使用，基本是无法更新的，你在哪个时间点开始使用，项目就固定在什么版本了。
那有没有解决办法么？其实也有，参考如下：
- 在基于 Fantastic-mobile 做项目开发时尽量避免框架自带模块或组件的改动，或者改动地方做一个文档记录，可以清楚知道改动了哪些，这样当你需要进行新版本更新时，按照之前记录的文档可以有个大致的迁移方案，而业务代码则可以直接拷贝过去。
- 我们尽量在提交代码时标明每次提交改动的变更记录说明，这样你可以选择性的更新部分新代码到项目中，也就是局部更新。这种方案也是作者在公司内部项目经常使用的，因为大部分项目是无需全局更新到新版的，只需将必要的一些新特性或 bug 修复同步到原有项目中即可。
- 使用文件比较工具，例如 Beyond Compare，这款工具可以直接对比文件夹，可以清晰的列出文件夹内所有文件的差异，可以协助升级工作开展。
使用 Composition API 开发
Composition API 是 Vue3 全新提供的一种语法，对于从 Vue2 就在使用的开发者，如果一时半会没办法立马上手 Composition API ，你依旧可以在项目中使用 Options API 做开发。当然我们更建议你使用 Composition API 进行开发，它比 Options API 更灵活且易读。
使用
如果你还不熟悉 Composition API ，那么我们建议你阅读 Vue3 官方文档了解；如果你已经熟悉 Composition API ，那么我们建议你在开发的时候，使用 <script setup> 语法糖进行开发，它将提高很多开发上的效率。
同时得益于 unplugin-auto-import 的特性，在 <script setup> 里无需导入相关 API ，该依赖会自动导入（默认支持 vue，vue-router 和 pinia ）。
vue
<script setup lang="ts">
+// 无需手动 import 相关 API
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+const route = useRoute()
+const router = useRouter()
+console.log(route.path)
+router.push('/dashboard')
+</script>组件 name
<script setup> 可以和普通的 <script> 一起使用，所以可以这样定义组件 name：
vue
<script lang="ts">
+export default {
+ name: 'componentName',
+}
+</script>
+
+<script setup lang="ts">
+...
+</script>Vue 3.3 开始，你可以使用 defineOptions 在 <script setup> 里定义组件的 name：
vue
`,11),h=[p];function l(e,k,r,E,d,o){return a(),i("div",null,h)}const y=s(t,[["render",l]]);export{c as __pageData,y as default};
diff --git a/assets/guide_vue3-composition-api.md.BWg9K3cK.lean.js b/assets/guide_vue3-composition-api.md.BWg9K3cK.lean.js
new file mode 100644
index 0000000..1047be5
--- /dev/null
+++ b/assets/guide_vue3-composition-api.md.BWg9K3cK.lean.js
@@ -0,0 +1 @@
+import{_ as s,c as i,o as a,a5 as n}from"./chunks/framework.D-J1Cv1C.js";const c=JSON.parse('{"title":"使用 Composition API 开发","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3-composition-api.md","filePath":"guide/vue3-composition-api.md"}'),t={name:"guide/vue3-composition-api.md"},p=n("",11),h=[p];function l(e,k,r,E,d,o){return a(),i("div",null,h)}const y=s(t,[["render",l]]);export{c as __pageData,y as default};
diff --git a/assets/guide_watermark.md.hhPmfVdr.js b/assets/guide_watermark.md.hhPmfVdr.js
new file mode 100644
index 0000000..346018b
--- /dev/null
+++ b/assets/guide_watermark.md.hhPmfVdr.js
@@ -0,0 +1,17 @@
+import{_ as t,D as n,c as e,j as a,a as s,I as p,a5 as l,o as h,aj as k}from"./chunks/framework.D-J1Cv1C.js";const b=JSON.parse('{"title":"页面水印","description":"","frontmatter":{},"headers":[],"relativePath":"guide/watermark.md","filePath":"guide/watermark.md"}'),r={name:"guide/watermark.md"},d={id:"页面水印",tabindex:"-1"},E=a("a",{class:"header-anchor",href:"#页面水印","aria-label":'Permalink to "页面水印 <script setup lang="ts">
+defineOptions({
+ name: 'ComponentName',
+})
+</script>使用
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enableWatermark: true,
+ },
+}效果如下：
设置水印内容
在 /src/store/modules/watermark.ts 中可修改水印展示内容，以及其他水印相关配置。
水印同时支持动态更新，示例：
vue
`,9);function g(c,y,m,F,u,_){const i=n("Badge");return h(),e("div",null,[a("h1",d,[s("页面水印 "),p(i,{type:"pro",text:"专业版"}),s(),E]),o])}const B=t(r,[["render",g]]);export{b as __pageData,B as default};
diff --git a/assets/guide_watermark.md.hhPmfVdr.lean.js b/assets/guide_watermark.md.hhPmfVdr.lean.js
new file mode 100644
index 0000000..55b682e
--- /dev/null
+++ b/assets/guide_watermark.md.hhPmfVdr.lean.js
@@ -0,0 +1 @@
+import{_ as t,D as n,c as e,j as a,a as s,I as p,a5 as l,o as h,aj as k}from"./chunks/framework.D-J1Cv1C.js";const b=JSON.parse('{"title":"页面水印","description":"","frontmatter":{},"headers":[],"relativePath":"guide/watermark.md","filePath":"guide/watermark.md"}'),r={name:"guide/watermark.md"},d={id:"页面水印",tabindex:"-1"},E=a("a",{class:"header-anchor",href:"#页面水印","aria-label":'Permalink to "页面水印 <script setup lang="ts">
+import useWatermarkStore from '@/store/modules/watermark'
+
+const watermarkStore = useWatermarkStore()
+
+watermarkStore.update({
+ text: '设置水印',
+ // 更多设置项请查看 /src/utils/watermark.ts 中 settingsType 类型定义
+})
+
+// 重置水印，恢复到默认设置
+watermarkStore.update()
+</script>为什么选择我们 ?
是模板，更是框架
Fantastic-mobile 与市面上大部分移动端 H5 模板不同之处在于，它针对通用场景提供了一套标准且易于扩展设计，通过简单的配置即可轻松完成页面的设计和布局。同时也提供了一些常用的组件和工具函数，让开发者可以更加专注于业务逻辑的开发。
这也是为什么我们自称为「框架」，而不仅仅是「模板」的原因。
如果你在使用过 Fantastic-mobile 后，认为它还达不到你心中框架的标准，也请告诉我们有哪些可改进的地方，因为我们最终的目标是希望 Fantastic-mobile 能够成为你的得力助手，让你的开发工作高效且愉快。
为什么不是它们 ?
以上 3 款模板都很成熟，也是社区内人气较高的项目。但正如上面所说，Fantastic-mobile 从一开始就不打算仅仅只是做一个 H5 模版。所以，如果你正在做技术选型，不如先了解一下我们这款框架，再决定是否要继续使用其他 H5 模板。
并且你不需要担心技术栈上的差异，因为 Vue3 整体的生态已经非常成熟，几乎形成了一套社区默认的技术栈。也就是说，以上 3 款模板和 Fantastic-mobile 使用到的技术栈，几乎是一样的。
用一句简单的话概括就是：人无我有，人有我优。
',10),i=[n];function s(l,h,c,_,p,m){return a(),t("div",null,i)}const b=e(o,[["render",s]]);export{d as __pageData,b as default}; diff --git a/assets/guide_why.md.DvOsftQ3.lean.js b/assets/guide_why.md.DvOsftQ3.lean.js new file mode 100644 index 0000000..fb3eac2 --- /dev/null +++ b/assets/guide_why.md.DvOsftQ3.lean.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a,a5 as r}from"./chunks/framework.D-J1Cv1C.js";const d=JSON.parse('{"title":"为什么选择我们 ?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/why.md","filePath":"guide/why.md"}'),o={name:"guide/why.md"},n=r("",10),i=[n];function s(l,h,c,_,p,m){return a(),t("div",null,i)}const b=e(o,[["render",s]]);export{d as __pageData,b as default}; diff --git a/assets/index.md.CO37Rkx6.js b/assets/index.md.CO37Rkx6.js new file mode 100644 index 0000000..1fa30eb --- /dev/null +++ b/assets/index.md.CO37Rkx6.js @@ -0,0 +1 @@ +import{_ as t,c as e,o as i}from"./chunks/framework.D-J1Cv1C.js";const p=JSON.parse('{"title":"Fantastic-mobile","titleTemplate":"开箱即用的移动端 H5 框架","description":"","frontmatter":{"layout":"home","title":"Fantastic-mobile","titleTemplate":"开箱即用的移动端 H5 框架","hero":{"name":"Fantastic-mobile","text":"自成一派的 H5 框架","tagline":"开箱即用，提供舒适开发体验","image":{"src":"/logo-with-shadow.png","alt":"Fantastic-mobile"},"actions":[{"theme":"brand","text":"开始","link":"/guide/intro"},{"theme":"alt","text":"为什么选我们 ?","link":"/guide/why"},{"theme":"alt","text":"更新日志","link":"/guide/changelog"},{"theme":"cta buy","text":"专业版，限时优惠价 369 元","link":"/buy"},{"theme":"cta","text":"演示地址：基础版 ↗","link":"https://fantastic-mobile.github.io/basic-example"},{"theme":"cta","text":"演示地址：专业版 ↗","link":"https://fantastic-mobile.github.io/pro-example"}]},"features":[{"icon":"💪","title":"先进的技术栈","details":"Vite + Vue3 + Vue-router + Pinia + UnoCSS + TypeScript ，采用业内先进的技术栈，使框架始终保持新鲜"},{"icon":"🗺️","title":"文件系统路由","details":"根据文件夹及文件目录，自动生成路由，并提供友好的 TypeScript 支持"},{"icon":"🔑","title":"全场景权限验证","details":"内置鉴权组件、鉴权指令和鉴权函数，真正实现各种场景下的权限验证"},{"icon":"🧊","title":"页面缓存","details":"轻松设置页面缓存，应对各种需求场景，并提供简单易懂的 API 方便开发者快速集成"},{"icon":"🌐","title":"面向国际","details":"内置业内通用国际化解决方案，通过简单配置实现多国语言切换"},{"icon":"📦","title":"丰富的组件","details":"内置常用组件，提高开发效率；同时提供组件快速生成工具"}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),a={name:"index.md"};function n(l,o,c,s,m,r){return i(),e("div")}const h=t(a,[["render",n]]);export{p as __pageData,h as default}; diff --git a/assets/index.md.CO37Rkx6.lean.js b/assets/index.md.CO37Rkx6.lean.js new file mode 100644 index 0000000..1fa30eb --- /dev/null +++ b/assets/index.md.CO37Rkx6.lean.js @@ -0,0 +1 @@ +import{_ as t,c as e,o as i}from"./chunks/framework.D-J1Cv1C.js";const p=JSON.parse('{"title":"Fantastic-mobile","titleTemplate":"开箱即用的移动端 H5 框架","description":"","frontmatter":{"layout":"home","title":"Fantastic-mobile","titleTemplate":"开箱即用的移动端 H5 框架","hero":{"name":"Fantastic-mobile","text":"自成一派的 H5 框架","tagline":"开箱即用，提供舒适开发体验","image":{"src":"/logo-with-shadow.png","alt":"Fantastic-mobile"},"actions":[{"theme":"brand","text":"开始","link":"/guide/intro"},{"theme":"alt","text":"为什么选我们 ?","link":"/guide/why"},{"theme":"alt","text":"更新日志","link":"/guide/changelog"},{"theme":"cta buy","text":"专业版，限时优惠价 369 元","link":"/buy"},{"theme":"cta","text":"演示地址：基础版 ↗","link":"https://fantastic-mobile.github.io/basic-example"},{"theme":"cta","text":"演示地址：专业版 ↗","link":"https://fantastic-mobile.github.io/pro-example"}]},"features":[{"icon":"💪","title":"先进的技术栈","details":"Vite + Vue3 + Vue-router + Pinia + UnoCSS + TypeScript ，采用业内先进的技术栈，使框架始终保持新鲜"},{"icon":"🗺️","title":"文件系统路由","details":"根据文件夹及文件目录，自动生成路由，并提供友好的 TypeScript 支持"},{"icon":"🔑","title":"全场景权限验证","details":"内置鉴权组件、鉴权指令和鉴权函数，真正实现各种场景下的权限验证"},{"icon":"🧊","title":"页面缓存","details":"轻松设置页面缓存，应对各种需求场景，并提供简单易懂的 API 方便开发者快速集成"},{"icon":"🌐","title":"面向国际","details":"内置业内通用国际化解决方案，通过简单配置实现多国语言切换"},{"icon":"📦","title":"丰富的组件","details":"内置常用组件，提高开发效率；同时提供组件快速生成工具"}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),a={name:"index.md"};function n(l,o,c,s,m,r){return i(),e("div")}const h=t(a,[["render",n]]);export{p as __pageData,h as default}; diff --git a/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 b/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 new file mode 100644 index 0000000..b6b603d Binary files /dev/null and b/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 differ diff --git a/assets/inter-italic-cyrillic.By2_1cv3.woff2 b/assets/inter-italic-cyrillic.By2_1cv3.woff2 new file mode 100644 index 0000000..def40a4 Binary files /dev/null and b/assets/inter-italic-cyrillic.By2_1cv3.woff2 differ diff --git a/assets/inter-italic-greek-ext.1u6EdAuj.woff2 b/assets/inter-italic-greek-ext.1u6EdAuj.woff2 new file mode 100644 index 0000000..e070c3d Binary files /dev/null and b/assets/inter-italic-greek-ext.1u6EdAuj.woff2 differ diff --git a/assets/inter-italic-greek.DJ8dCoTZ.woff2 b/assets/inter-italic-greek.DJ8dCoTZ.woff2 new file mode 100644 index 0000000..a3c16ca Binary files /dev/null and b/assets/inter-italic-greek.DJ8dCoTZ.woff2 differ diff --git a/assets/inter-italic-latin-ext.CN1xVJS-.woff2 b/assets/inter-italic-latin-ext.CN1xVJS-.woff2 new file mode 100644 index 0000000..2210a89 Binary files /dev/null and b/assets/inter-italic-latin-ext.CN1xVJS-.woff2 differ diff --git a/assets/inter-italic-latin.C2AdPX0b.woff2 b/assets/inter-italic-latin.C2AdPX0b.woff2 new file mode 100644 index 0000000..790d62d Binary files /dev/null and b/assets/inter-italic-latin.C2AdPX0b.woff2 differ diff --git a/assets/inter-italic-vietnamese.BSbpV94h.woff2 b/assets/inter-italic-vietnamese.BSbpV94h.woff2 new file mode 100644 index 0000000..1eec077 Binary files /dev/null and b/assets/inter-italic-vietnamese.BSbpV94h.woff2 differ diff --git a/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 b/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 new file mode 100644 index 0000000..2cfe615 Binary files /dev/null and b/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 differ diff --git a/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 b/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 new file mode 100644 index 0000000..e3886dd Binary files /dev/null and b/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 differ diff --git a/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 b/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 new file mode 100644 index 0000000..36d6748 Binary files /dev/null and b/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 differ diff --git a/assets/inter-roman-greek.BBVDIX6e.woff2 b/assets/inter-roman-greek.BBVDIX6e.woff2 new file mode 100644 index 0000000..2bed1e8 Binary files /dev/null and b/assets/inter-roman-greek.BBVDIX6e.woff2 differ diff --git a/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 b/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 new file mode 100644 index 0000000..9a8d1e2 Binary files /dev/null and b/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 differ diff --git a/assets/inter-roman-latin.Di8DUHzh.woff2 b/assets/inter-roman-latin.Di8DUHzh.woff2 new file mode 100644 index 0000000..07d3c53 Binary files /dev/null and b/assets/inter-roman-latin.Di8DUHzh.woff2 differ diff --git a/assets/inter-roman-vietnamese.BjW4sHH5.woff2 b/assets/inter-roman-vietnamese.BjW4sHH5.woff2 new file mode 100644 index 0000000..57bdc22 Binary files /dev/null and b/assets/inter-roman-vietnamese.BjW4sHH5.woff2 differ diff --git a/assets/style.CEn7_h9_.css b/assets/style.CEn7_h9_.css new file mode 100644 index 0000000..2719944 --- /dev/null +++ b/assets/style.CEn7_h9_.css @@ -0,0 +1 @@ +@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-roman-cyrillic.C5lxZ8CY.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-roman-greek-ext.CqjqNYQ-.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-roman-greek.BBVDIX6e.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-roman-vietnamese.BjW4sHH5.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-roman-latin-ext.4ZJIpNVo.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-roman-latin.Di8DUHzh.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/inter-italic-cyrillic-ext.r48I6akx.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/inter-italic-cyrillic.By2_1cv3.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/inter-italic-greek-ext.1u6EdAuj.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/inter-italic-greek.DJ8dCoTZ.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/inter-italic-vietnamese.BSbpV94h.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/inter-italic-latin-ext.CN1xVJS-.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/inter-italic-latin.C2AdPX0b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Punctuation SC;font-weight:400;src:local("PingFang SC Regular"),local("Noto Sans CJK SC"),local("Microsoft YaHei");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:500;src:local("PingFang SC Medium"),local("Noto Sans CJK SC"),local("Microsoft YaHei");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:600;src:local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:700;src:local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-purple-1: #6f42c1;--vp-c-purple-2: #7e4cc9;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-purple-1: #c8abfa;--vp-c-purple-2: #a879e6;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-note-1: var(--vp-c-brand-1);--vp-c-note-2: var(--vp-c-brand-2);--vp-c-note-3: var(--vp-c-brand-3);--vp-c-note-soft: var(--vp-c-brand-soft);--vp-c-success-1: var(--vp-c-green-1);--vp-c-success-2: var(--vp-c-green-2);--vp-c-success-3: var(--vp-c-green-3);--vp-c-success-soft: var(--vp-c-green-soft);--vp-c-important-1: var(--vp-c-purple-1);--vp-c-important-2: var(--vp-c-purple-2);--vp-c-important-3: var(--vp-c-purple-3);--vp-c-important-soft: var(--vp-c-purple-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft);--vp-c-caution-1: var(--vp-c-red-1);--vp-c-caution-2: var(--vp-c-red-2);--vp-c-caution-3: var(--vp-c-red-3);--vp-c-caution-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}:root:where(:lang(zh)){--vp-font-family-base: "Punctuation SC", "Inter", ui-sans-serif, system-ui, "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Heiti SC", "Microsoft YaHei", "DengXian", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}@media (min-width: 960px){:root{--vp-z-index-sidebar: 25}}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-success-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);--vp-code-line-diff-remove-color: var(--vp-c-danger-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);--vp-code-line-warning-color: var(--vp-c-warning-soft);--vp-code-line-error-color: var(--vp-c-danger-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-note-border: transparent;--vp-custom-block-note-text: var(--vp-c-text-1);--vp-custom-block-note-bg: var(--vp-c-default-soft);--vp-custom-block-note-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-tip-soft);--vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);--vp-custom-block-important-border: transparent;--vp-custom-block-important-text: var(--vp-c-text-1);--vp-custom-block-important-bg: var(--vp-c-important-soft);--vp-custom-block-important-code-bg: var(--vp-c-important-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-caution-border: transparent;--vp-custom-block-caution-text: var(--vp-c-text-1);--vp-custom-block-caution-bg: var(--vp-c-caution-soft);--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-default-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}.hide-nav{--vp-nav-height: 0px}.hide-nav .VPSidebar{--vp-nav-height: 22px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-tip-1);--vp-badge-tip-bg: var(--vp-c-tip-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}mjx-container{overflow-x:auto}mjx-container>svg{display:inline-block;margin:auto}[class^=vpi-],[class*=" vpi-"],.vp-icon{width:1em;height:1em}[class^=vpi-].bg,[class*=" vpi-"].bg,.vp-icon.bg{background-size:100% 100%;background-color:transparent}[class^=vpi-]:not(.bg),[class*=" vpi-"]:not(.bg),.vp-icon:not(.bg){-webkit-mask:var(--icon) no-repeat;mask:var(--icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit}.vpi-align-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E")}.vpi-arrow-right,.vpi-arrow-down,.vpi-arrow-left,.vpi-arrow-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}.vpi-chevron-right,.vpi-chevron-down,.vpi-chevron-left,.vpi-chevron-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}.vpi-chevron-down,.vpi-arrow-down{transform:rotate(90deg)}.vpi-chevron-left,.vpi-arrow-left{transform:rotate(180deg)}.vpi-chevron-up,.vpi-arrow-up{transform:rotate(-90deg)}.vpi-square-pen{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E")}.vpi-plus{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E")}.vpi-sun{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E")}.vpi-moon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E")}.vpi-more-horizontal{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E")}.vpi-languages{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E")}.vpi-heart{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E")}.vpi-search{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}.vpi-layout-list{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E")}.vpi-delete{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E")}.vpi-corner-down-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E")}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E")}.vpi-social-discord{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E")}.vpi-social-facebook{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E")}.vpi-social-github{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}.vpi-social-instagram{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.03.084c-1.277.06-2.149.264-2.91.563a5.874 5.874 0 0 0-2.124 1.388 5.878 5.878 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076.008 8.354-.005 8.764.001 12.023c.007 3.259.021 3.667.083 4.947.061 1.277.264 2.149.563 2.911.308.789.72 1.457 1.388 2.123a5.872 5.872 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552 1.278.056 1.689.069 4.947.063 3.257-.007 3.668-.021 4.947-.082 1.28-.06 2.147-.265 2.91-.563a5.881 5.881 0 0 0 2.123-1.388 5.881 5.881 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912.056-1.28.07-1.69.063-4.948-.006-3.258-.02-3.667-.081-4.947-.06-1.28-.264-2.148-.564-2.911a5.892 5.892 0 0 0-1.387-2.123 5.857 5.857 0 0 0-2.128-1.38C19.074.322 18.202.12 16.924.066 15.647.009 15.236-.006 11.977 0 8.718.008 8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.736 3.736 0 0 1-1.382-.895 3.695 3.695 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228-.06-1.264-.072-1.644-.08-4.848-.006-3.204.006-3.583.061-4.848.05-1.169.246-1.805.408-2.228.216-.561.477-.96.895-1.382a3.705 3.705 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417 1.265-.06 1.644-.072 4.848-.08 3.203-.006 3.583.006 4.85.062 1.168.05 1.804.244 2.227.408.56.216.96.475 1.382.895.421.42.681.817.9 1.378.165.422.362 1.056.417 2.227.06 1.265.074 1.645.08 4.848.005 3.203-.006 3.583-.061 4.848-.051 1.17-.245 1.805-.408 2.23-.216.56-.477.96-.896 1.38a3.705 3.705 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418-1.266.06-1.645.072-4.85.079-3.204.007-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442 1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024 6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16 4 4 0 0 1 8 12.008'/%3E%3C/svg%3E")}.vpi-social-linkedin{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E")}.vpi-social-mastodon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E")}.vpi-social-npm{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z'/%3E%3C/svg%3E")}.vpi-social-slack{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E")}.vpi-social-twitter,.vpi-social-x{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E")}.vpi-social-youtube{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E")}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover,.custom-block.info a:hover>code{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.note{border-color:var(--vp-custom-block-note-border);color:var(--vp-custom-block-note-text);background-color:var(--vp-custom-block-note-bg)}.custom-block.note a,.custom-block.note code{color:var(--vp-c-brand-1)}.custom-block.note a:hover,.custom-block.note a:hover>code{color:var(--vp-c-brand-2)}.custom-block.note code{background-color:var(--vp-custom-block-note-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-tip-1)}.custom-block.tip a:hover,.custom-block.tip a:hover>code{color:var(--vp-c-tip-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.important{border-color:var(--vp-custom-block-important-border);color:var(--vp-custom-block-important-text);background-color:var(--vp-custom-block-important-bg)}.custom-block.important a,.custom-block.important code{color:var(--vp-c-important-1)}.custom-block.important a:hover,.custom-block.important a:hover>code{color:var(--vp-c-important-2)}.custom-block.important code{background-color:var(--vp-custom-block-important-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover,.custom-block.warning a:hover>code{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover,.custom-block.danger a:hover>code{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.caution{border-color:var(--vp-custom-block-caution-border);color:var(--vp-custom-block-caution-text);background-color:var(--vp-custom-block-caution-bg)}.custom-block.caution a,.custom-block.caution code{color:var(--vp-c-caution-1)}.custom-block.caution a:hover,.custom-block.caution a:hover>code{color:var(--vp-c-caution-2)}.custom-block.caution code{background-color:var(--vp-custom-block-caution-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover,.custom-block.details a:hover>code{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code span{color:var(--shiki-dark, inherit)}html:not(.dark) .vp-code span{color:var(--shiki-light, inherit)}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:hover{color:var(--vp-c-brand-2)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{background-color:var(--vp-c-bg);border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code{color:var(--vp-code-link-color)}.vp-doc a:hover>code{color:var(--vp-code-link-hover-color)}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.external-link-icon-enabled :is(.vp-doc a[href*="://"],.vp-doc a[target=_blank]):after{content:"";color:currentColor}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin:0 0 4px!important;text-align:center;letter-spacing:1px!important;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.VPBadge.small{padding:0 6px;line-height:18px;font-size:10px;transform:translateY(-8px)}.VPDocFooter .VPBadge{display:none}.vp-doc h1>.VPBadge{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge{vertical-align:middle}.vp-doc h4>.VPBadge,.vp-doc h5>.VPBadge,.vp-doc h6>.VPBadge{vertical-align:middle;line-height:18px}.VPBadge.info{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-6fd38c7d]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-6fd38c7d],.VPBackdrop.fade-leave-to[data-v-6fd38c7d]{opacity:0}.VPBackdrop.fade-leave-active[data-v-6fd38c7d]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-6fd38c7d]{display:none}}.NotFound[data-v-baaf7634]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-baaf7634]{padding:96px 32px 168px}}.code[data-v-baaf7634]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-baaf7634]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-baaf7634]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-baaf7634]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-baaf7634]{padding-top:20px}.link[data-v-baaf7634]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-baaf7634]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-e416873c]{position:relative;z-index:1}.nested[data-v-e416873c]{padding-right:16px;padding-left:16px}.outline-link[data-v-e416873c]{display:block;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s}.outline-link[data-v-e416873c]:hover,.outline-link.active[data-v-e416873c]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-e416873c]{padding-left:13px}.VPDocAsideOutline[data-v-173bcab0]{display:none}.VPDocAsideOutline.has-outline[data-v-173bcab0]{display:block}.content[data-v-173bcab0]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-173bcab0]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-173bcab0]{line-height:32px;font-size:14px;font-weight:600}.VPDocAside[data-v-c4496806]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-c4496806]{flex-grow:1}.VPDocAside[data-v-c4496806] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-c4496806] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-c4496806] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-b2c3180a]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-b2c3180a]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-5e7854d9]{margin-top:64px}.edit-info[data-v-5e7854d9]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-5e7854d9]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-5e7854d9]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-5e7854d9]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-5e7854d9]{margin-right:8px}.prev-next[data-v-5e7854d9]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-5e7854d9]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-5e7854d9]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-5e7854d9]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-5e7854d9]{margin-left:auto;text-align:right}.desc[data-v-5e7854d9]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-5e7854d9]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDoc[data-v-e4c2a608]{padding:32px 24px 96px;width:100%}@media (min-width: 768px){.VPDoc[data-v-e4c2a608]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-e4c2a608]{padding:48px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-e4c2a608]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-e4c2a608]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-e4c2a608]{display:flex;justify-content:center}.VPDoc .aside[data-v-e4c2a608]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-e4c2a608]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-e4c2a608]{max-width:1104px}}.container[data-v-e4c2a608]{margin:0 auto;width:100%}.aside[data-v-e4c2a608]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-e4c2a608]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-e4c2a608]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-e4c2a608]::-webkit-scrollbar{display:none}.aside-curtain[data-v-e4c2a608]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-e4c2a608]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));padding-bottom:32px}.content[data-v-e4c2a608]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-e4c2a608]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-e4c2a608]{order:1;margin:0;min-width:640px}}.content-container[data-v-e4c2a608]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-e4c2a608]{max-width:688px}.VPButton[data-v-58a288e4]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-58a288e4]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-58a288e4]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-58a288e4]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-58a288e4]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-58a288e4]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-58a288e4]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-58a288e4]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-58a288e4]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-58a288e4]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-58a288e4]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-58a288e4]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-58a288e4]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-66129518]{display:none}.dark .VPImage.light[data-v-66129518]{display:none}.VPHero[data-v-d23dfec6]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-d23dfec6]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-d23dfec6]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-d23dfec6]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-d23dfec6]{flex-direction:row}}.main[data-v-d23dfec6]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-d23dfec6]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-d23dfec6]{text-align:left}}@media (min-width: 960px){.main[data-v-d23dfec6]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-d23dfec6]{max-width:592px}}.name[data-v-d23dfec6],.text[data-v-d23dfec6]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-d23dfec6],.VPHero.has-image .text[data-v-d23dfec6]{margin:0 auto}.name[data-v-d23dfec6]{color:var(--vp-home-hero-name-color)}.clip[data-v-d23dfec6]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-d23dfec6],.text[data-v-d23dfec6]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-d23dfec6],.text[data-v-d23dfec6]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-d23dfec6],.VPHero.has-image .text[data-v-d23dfec6]{margin:0}}.tagline[data-v-d23dfec6]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-d23dfec6]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-d23dfec6]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-d23dfec6]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-d23dfec6]{margin:0}}.actions[data-v-d23dfec6]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-d23dfec6]{justify-content:center}@media (min-width: 640px){.actions[data-v-d23dfec6]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-d23dfec6]{justify-content:flex-start}}.action[data-v-d23dfec6]{flex-shrink:0;padding:6px}.image[data-v-d23dfec6]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-d23dfec6]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-d23dfec6]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-d23dfec6]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-d23dfec6]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-d23dfec6]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-d23dfec6]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-d23dfec6]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-d23dfec6]{width:320px;height:320px}}[data-v-d23dfec6] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-d23dfec6] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-d23dfec6] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-54a50e5e]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-54a50e5e]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-54a50e5e]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-54a50e5e]>.VPImage{margin-bottom:20px}.icon[data-v-54a50e5e]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-54a50e5e]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-54a50e5e]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-54a50e5e]{padding-top:8px}.link-text-value[data-v-54a50e5e]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-54a50e5e]{margin-left:6px}.VPFeatures[data-v-4507f11b]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-4507f11b]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-4507f11b]{padding:0 64px}}.container[data-v-4507f11b]{margin:0 auto;max-width:1152px}.items[data-v-4507f11b]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-4507f11b]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-4507f11b],.item.grid-4[data-v-4507f11b],.item.grid-6[data-v-4507f11b]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-4507f11b],.item.grid-4[data-v-4507f11b]{width:50%}.item.grid-3[data-v-4507f11b],.item.grid-6[data-v-4507f11b]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-4507f11b]{width:25%}}.container[data-v-2f26f998]{margin:auto;width:100%;max-width:1280px;padding:0 24px}@media (min-width: 640px){.container[data-v-2f26f998]{padding:0 48px}}@media (min-width: 960px){.container[data-v-2f26f998]{width:100%;padding:0 64px}}.vp-doc[data-v-2f26f998] .VPHomeSponsors,.vp-doc[data-v-2f26f998] .VPTeamPage{margin-left:var(--vp-offset, calc(50% - 50vw) );margin-right:var(--vp-offset, calc(50% - 50vw) )}.vp-doc[data-v-2f26f998] .VPHomeSponsors h2{border-top:none;letter-spacing:normal}.vp-doc[data-v-2f26f998] .VPHomeSponsors a,.vp-doc[data-v-2f26f998] .VPTeamPage a{text-decoration:none}.VPHome[data-v-6fa276e3]{margin-bottom:96px}@media (min-width: 768px){.VPHome[data-v-6fa276e3]{margin-bottom:128px}}.VPContent[data-v-e01aebcb]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-e01aebcb]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-e01aebcb]{margin:0}@media (min-width: 960px){.VPContent[data-v-e01aebcb]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-e01aebcb]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-e01aebcb]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-058c9c44]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-058c9c44]{display:none}.VPFooter[data-v-058c9c44] a{text-decoration-line:underline;text-underline-offset:2px;transition:color .25s}.VPFooter[data-v-058c9c44] a:hover{color:var(--vp-c-text-1)}@media (min-width: 768px){.VPFooter[data-v-058c9c44]{padding:32px}}.container[data-v-058c9c44]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-058c9c44],.copyright[data-v-058c9c44]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-cf9a8269]{padding:12px 20px 11px}@media (min-width: 960px){.VPLocalNavOutlineDropdown[data-v-cf9a8269]{padding:12px 36px 11px}}.VPLocalNavOutlineDropdown button[data-v-cf9a8269]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-cf9a8269]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-cf9a8269]{color:var(--vp-c-text-1)}.icon[data-v-cf9a8269]{display:inline-block;vertical-align:middle;margin-left:2px;font-size:14px;transform:rotate(0);transition:transform .25s}@media (min-width: 960px){.VPLocalNavOutlineDropdown button[data-v-cf9a8269]{font-size:14px}.icon[data-v-cf9a8269]{font-size:16px}}.open>.icon[data-v-cf9a8269]{transform:rotate(90deg)}.items[data-v-cf9a8269]{position:absolute;top:40px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}@media (min-width: 960px){.items[data-v-cf9a8269]{right:auto;left:calc(var(--vp-sidebar-width) + 32px);width:320px}}.header[data-v-cf9a8269]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-cf9a8269]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-cf9a8269]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-cf9a8269]{transition:all .2s ease-out}.flyout-leave-active[data-v-cf9a8269]{transition:all .15s ease-in}.flyout-enter-from[data-v-cf9a8269],.flyout-leave-to[data-v-cf9a8269]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-ffae9a67]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-ffae9a67]{position:fixed}@media (min-width: 960px){.VPLocalNav[data-v-ffae9a67]{top:var(--vp-nav-height)}.VPLocalNav.has-sidebar[data-v-ffae9a67]{padding-left:var(--vp-sidebar-width)}.VPLocalNav.empty[data-v-ffae9a67]{display:none}}@media (min-width: 1280px){.VPLocalNav[data-v-ffae9a67]{display:none}}@media (min-width: 1440px){.VPLocalNav.has-sidebar[data-v-ffae9a67]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.container[data-v-ffae9a67]{display:flex;justify-content:space-between;align-items:center}.menu[data-v-ffae9a67]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-ffae9a67]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-ffae9a67]{padding:0 32px}}@media (min-width: 960px){.menu[data-v-ffae9a67]{display:none}}.menu-icon[data-v-ffae9a67]{margin-right:8px;font-size:14px}.VPOutlineDropdown[data-v-ffae9a67]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-ffae9a67]{padding:12px 32px 11px}}.VPSwitch[data-v-4e6eee23]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-4e6eee23]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-4e6eee23]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-4e6eee23]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-4e6eee23] [class^=vpi-]{position:absolute;top:3px;left:3px;width:12px;height:12px;color:var(--vp-c-text-2)}.dark .icon[data-v-4e6eee23] [class^=vpi-]{color:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-f4b445d6]{opacity:1}.moon[data-v-f4b445d6],.dark .sun[data-v-f4b445d6]{opacity:0}.dark .moon[data-v-f4b445d6]{opacity:1}.dark .VPSwitchAppearance[data-v-f4b445d6] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-c8debaca]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-c8debaca]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-148ccee4]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-148ccee4]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-148ccee4]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-148ccee4]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-81836f58]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-81836f58]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-81836f58]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-81836f58]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-b6ca2d55]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-b6ca2d55] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-b6ca2d55] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-b6ca2d55] .group:last-child{padding-bottom:0}.VPMenu[data-v-b6ca2d55] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-b6ca2d55] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-b6ca2d55] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-b6ca2d55] .action{padding-left:24px}.VPFlyout[data-v-5c7784f0]{position:relative}.VPFlyout[data-v-5c7784f0]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-5c7784f0]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-5c7784f0]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-5c7784f0]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-5c7784f0]{color:var(--vp-c-brand-2)}.VPFlyout:hover .menu[data-v-5c7784f0],.button[aria-expanded=true]+.menu[data-v-5c7784f0]{opacity:1;visibility:visible;transform:translateY(0)}.button[aria-expanded=false]+.menu[data-v-5c7784f0]{opacity:0;visibility:hidden;transform:translateY(0)}.button[data-v-5c7784f0]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-5c7784f0]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-5c7784f0]{margin-right:0;font-size:16px}.text-icon[data-v-5c7784f0]{margin-left:4px;font-size:14px}.icon[data-v-5c7784f0]{font-size:20px;transition:fill .25s}.menu[data-v-5c7784f0]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-0b9403eb]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-0b9403eb]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-0b9403eb]>svg,.VPSocialLink[data-v-0b9403eb]>[class^=vpi-social-]{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-e3ff33b4]{display:flex;justify-content:center}.VPNavBarExtra[data-v-7aa10c87]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-7aa10c87]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-7aa10c87]{display:none}}.trans-title[data-v-7aa10c87]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-7aa10c87],.item.social-links[data-v-7aa10c87]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-7aa10c87]{min-width:176px}.appearance-action[data-v-7aa10c87]{margin-right:-2px}.social-links-list[data-v-7aa10c87]{margin:-4px -8px}.VPNavBarHamburger[data-v-e985d409]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e985d409]{display:none}}.container[data-v-e985d409]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e985d409]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e985d409]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e985d409]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e985d409]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e985d409]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e985d409]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e985d409],.VPNavBarHamburger.active:hover .middle[data-v-e985d409],.VPNavBarHamburger.active:hover .bottom[data-v-e985d409]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e985d409],.middle[data-v-e985d409],.bottom[data-v-e985d409]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e985d409]{top:0;left:0;transform:translate(0)}.middle[data-v-e985d409]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e985d409]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-f8eda10f]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-f8eda10f],.VPNavBarMenuLink[data-v-f8eda10f]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-a160c3e1]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-a160c3e1]{display:flex}}/*! @docsearch/css 3.6.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 rgba(3,4,9,.30196078431372547);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}.DocSearch-Button-Key--pressed{transform:translate3d(0,1px,0);box-shadow:var(--docsearch-key-pressed-shadow)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}[class*=DocSearch]{--docsearch-primary-color: var(--vp-c-brand-1);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-background: transparent;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark [class*=DocSearch]{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-default-soft);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button-Key--pressed{transform:none;box-shadow:none}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand-1);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:0!important}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"Ctrl";font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"⌘"}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.DocSearch-Search-Icon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E")}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand-1);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-default-soft)}.DocSearch-Screen-Icon>svg{margin:auto}.VPNavBarSocialLinks[data-v-c9c77adc]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-c9c77adc]{display:flex;align-items:center}}.title[data-v-13f93eac]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-13f93eac]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-13f93eac]{border-bottom-color:var(--vp-c-divider)}}[data-v-13f93eac] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-976f6f40]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-976f6f40]{display:flex;align-items:center}}.title[data-v-976f6f40]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-03344f85]{position:relative;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap;transition:background-color .5s}.VPNavBar[data-v-03344f85]:not(.home){background-color:var(--vp-nav-bg-color)}@media (min-width: 960px){.VPNavBar[data-v-03344f85]:not(.home){background-color:transparent}.VPNavBar[data-v-03344f85]:not(.has-sidebar):not(.home.top){background-color:var(--vp-nav-bg-color)}}.wrapper[data-v-03344f85]{padding:0 8px 0 24px}@media (min-width: 768px){.wrapper[data-v-03344f85]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar .wrapper[data-v-03344f85]{padding:0}}.container[data-v-03344f85]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-03344f85],.container>.content[data-v-03344f85]{pointer-events:none}.container[data-v-03344f85] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-03344f85]{max-width:100%}}.title[data-v-03344f85]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-03344f85]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-03344f85]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-03344f85]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-03344f85]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-03344f85]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-03344f85]{display:flex;justify-content:flex-end;align-items:center;height:var(--vp-nav-height);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.home.top) .content-body[data-v-03344f85]{position:relative;background-color:var(--vp-nav-bg-color)}.VPNavBar:not(.has-sidebar):not(.home.top) .content-body[data-v-03344f85]{background-color:transparent}}@media (max-width: 767px){.content-body[data-v-03344f85]{column-gap:.5rem}}.menu+.translations[data-v-03344f85]:before,.menu+.appearance[data-v-03344f85]:before,.menu+.social-links[data-v-03344f85]:before,.translations+.appearance[data-v-03344f85]:before,.appearance+.social-links[data-v-03344f85]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-03344f85]:before,.translations+.appearance[data-v-03344f85]:before{margin-right:16px}.appearance+.social-links[data-v-03344f85]:before{margin-left:16px}.social-links[data-v-03344f85]{margin-right:-8px}.divider[data-v-03344f85]{width:100%;height:1px}@media (min-width: 960px){.VPNavBar.has-sidebar .divider[data-v-03344f85]{padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .divider[data-v-03344f85]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.divider-line[data-v-03344f85]{width:100%;height:1px;transition:background-color .5s}.VPNavBar:not(.home) .divider-line[data-v-03344f85]{background-color:var(--vp-c-gutter)}@media (min-width: 960px){.VPNavBar:not(.home.top) .divider-line[data-v-03344f85]{background-color:var(--vp-c-gutter)}.VPNavBar:not(.has-sidebar):not(.home.top) .divider[data-v-03344f85]{background-color:var(--vp-c-gutter)}}.VPNavScreenAppearance[data-v-1c473a56]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-1c473a56]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-41ce1968]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-41ce1968]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-fa0ae97a]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-fa0ae97a]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-6168904f]{display:block}.title[data-v-6168904f]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-0c1ce2b1]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-0c1ce2b1]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-0c1ce2b1]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-0c1ce2b1]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-0c1ce2b1]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-0c1ce2b1]{transform:rotate(45deg)}.button[data-v-0c1ce2b1]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-0c1ce2b1]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-0c1ce2b1]{transition:transform .25s}.group[data-v-0c1ce2b1]:first-child{padding-top:0}.group+.group[data-v-0c1ce2b1],.group+.item[data-v-0c1ce2b1]{padding-top:4px}.VPNavScreenTranslations[data-v-502ed004]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-502ed004]{height:auto}.title[data-v-502ed004]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-502ed004]{font-size:16px}.icon.lang[data-v-502ed004]{margin-right:8px}.icon.chevron[data-v-502ed004]{margin-left:4px}.list[data-v-502ed004]{padding:4px 0 0 24px}.link[data-v-502ed004]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-ccef021a]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-ccef021a],.VPNavScreen.fade-leave-active[data-v-ccef021a]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-ccef021a],.VPNavScreen.fade-leave-active .container[data-v-ccef021a]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-ccef021a],.VPNavScreen.fade-leave-to[data-v-ccef021a]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-ccef021a],.VPNavScreen.fade-leave-to .container[data-v-ccef021a]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-ccef021a]{display:none}}.container[data-v-ccef021a]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-ccef021a],.menu+.appearance[data-v-ccef021a],.translations+.appearance[data-v-ccef021a]{margin-top:24px}.menu+.social-links[data-v-ccef021a]{margin-top:16px}.appearance+.social-links[data-v-ccef021a]{margin-top:16px}.VPNav[data-v-60c4bcb3]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-60c4bcb3]{position:fixed}}.VPSidebarItem.level-0[data-v-6820daf2]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-6820daf2]{padding-bottom:10px}.item[data-v-6820daf2]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-6820daf2]{cursor:pointer}.indicator[data-v-6820daf2]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-6820daf2],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-6820daf2],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-6820daf2],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-6820daf2]{background-color:var(--vp-c-brand-1)}.link[data-v-6820daf2]{display:flex;align-items:center;flex-grow:1}.text[data-v-6820daf2]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-6820daf2]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-6820daf2],.VPSidebarItem.level-2 .text[data-v-6820daf2],.VPSidebarItem.level-3 .text[data-v-6820daf2],.VPSidebarItem.level-4 .text[data-v-6820daf2],.VPSidebarItem.level-5 .text[data-v-6820daf2]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-6820daf2],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-6820daf2],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-6820daf2],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-6820daf2],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-6820daf2],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-6820daf2]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-6820daf2],.VPSidebarItem.level-1.has-active>.item>.text[data-v-6820daf2],.VPSidebarItem.level-2.has-active>.item>.text[data-v-6820daf2],.VPSidebarItem.level-3.has-active>.item>.text[data-v-6820daf2],.VPSidebarItem.level-4.has-active>.item>.text[data-v-6820daf2],.VPSidebarItem.level-5.has-active>.item>.text[data-v-6820daf2],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-6820daf2],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-6820daf2],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-6820daf2],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-6820daf2],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-6820daf2],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-6820daf2]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-6820daf2],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-6820daf2],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-6820daf2],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-6820daf2],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-6820daf2],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-6820daf2]{color:var(--vp-c-brand-1)}.caret[data-v-6820daf2]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-6820daf2]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-6820daf2]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-6820daf2]{font-size:18px;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-6820daf2]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-6820daf2],.VPSidebarItem.level-2 .items[data-v-6820daf2],.VPSidebarItem.level-3 .items[data-v-6820daf2],.VPSidebarItem.level-4 .items[data-v-6820daf2],.VPSidebarItem.level-5 .items[data-v-6820daf2]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-6820daf2]{display:none}.VPSidebar[data-v-8e6b745e]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-8e6b745e]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-8e6b745e]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-8e6b745e]{padding-top:var(--vp-nav-height);width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-8e6b745e]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-8e6b745e]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-8e6b745e]{outline:0}.group+.group[data-v-8e6b745e]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-8e6b745e]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSkipLink[data-v-8934bb3d]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-8934bb3d]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-8934bb3d]{top:14px;left:16px}}.Layout[data-v-839be2d9]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-0ba66496]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPHomeSponsors[data-v-0ba66496]{margin:96px 0}@media (min-width: 768px){.VPHomeSponsors[data-v-0ba66496]{margin:128px 0}}.VPHomeSponsors[data-v-0ba66496]{padding:0 24px}@media (min-width: 768px){.VPHomeSponsors[data-v-0ba66496]{padding:0 48px}}@media (min-width: 960px){.VPHomeSponsors[data-v-0ba66496]{padding:0 64px}}.container[data-v-0ba66496]{margin:0 auto;max-width:1152px}.love[data-v-0ba66496]{margin:0 auto;width:fit-content;font-size:28px;color:var(--vp-c-text-3)}.icon[data-v-0ba66496]{display:inline-block}.message[data-v-0ba66496]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-0ba66496]{padding-top:32px}.action[data-v-0ba66496]{padding-top:40px;text-align:center}.VPTeamPage[data-v-dcbf514f]{margin:96px 0}@media (min-width: 768px){.VPTeamPage[data-v-dcbf514f]{margin:128px 0}}.VPHome .VPTeamPageTitle[data-v-dcbf514f-s]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPTeamPageSection+.VPTeamPageSection[data-v-dcbf514f-s],.VPTeamMembers+.VPTeamPageSection[data-v-dcbf514f-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-dcbf514f-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-dcbf514f-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-dcbf514f-s],.VPTeamMembers+.VPTeamPageSection[data-v-dcbf514f-s]{margin-top:96px}}.VPTeamMembers[data-v-dcbf514f-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-dcbf514f-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-dcbf514f-s]{padding:0 64px}}.VPTeamPageTitle[data-v-3b50f985]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-3b50f985]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-3b50f985]{padding:80px 64px 48px}}.title[data-v-3b50f985]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-3b50f985]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-3b50f985]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-3b50f985]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-20676b58]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-20676b58]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-20676b58]{padding:0 64px}}.title[data-v-20676b58]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-20676b58]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-20676b58]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-20676b58]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-20676b58]{padding-top:40px}.VPTeamMembersItem[data-v-c2c0cc4a]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-c2c0cc4a]{padding:32px}.VPTeamMembersItem.small .data[data-v-c2c0cc4a]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-c2c0cc4a]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-c2c0cc4a]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-c2c0cc4a]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-c2c0cc4a]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-c2c0cc4a]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-c2c0cc4a]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-c2c0cc4a]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-c2c0cc4a]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-c2c0cc4a]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-c2c0cc4a]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-c2c0cc4a]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-c2c0cc4a]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-c2c0cc4a]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-c2c0cc4a]{text-align:center}.avatar[data-v-c2c0cc4a]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-c2c0cc4a]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-c2c0cc4a]{margin:0;font-weight:600}.affiliation[data-v-c2c0cc4a]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-c2c0cc4a]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-c2c0cc4a]:hover{color:var(--vp-c-brand-1)}.desc[data-v-c2c0cc4a]{margin:0 auto}.desc[data-v-c2c0cc4a] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-c2c0cc4a]{display:flex;justify-content:center;height:56px}.sp-link[data-v-c2c0cc4a]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-c2c0cc4a]:hover,.sp .sp-link.link[data-v-c2c0cc4a]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-c2c0cc4a]{margin-right:8px;font-size:16px}.VPTeamMembers.small .container[data-v-161e45be]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-161e45be]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-161e45be]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-161e45be]{max-width:876px}.VPTeamMembers.medium .container[data-v-161e45be]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-161e45be]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-161e45be]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-161e45be]{max-width:760px}.container[data-v-161e45be]{display:grid;gap:24px;margin:0 auto;max-width:1152px}@font-face{font-family:Fira Code;src:url(/assets/FiraCode-Light.fY4l71KA.woff2) format("woff2"),url(/assets/FiraCode-Light.B1hbeU4w.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Fira Code;src:url(/assets/FiraCode-Regular.jAL9VymT.woff2) format("woff2"),url(/assets/FiraCode-Regular.B8-kG0vS.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Fira Code;src:url(/assets/FiraCode-Medium.-YTCSZkP.woff2) format("woff2"),url(/assets/FiraCode-Medium.B7pixCnj.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Fira Code;src:url(/assets/FiraCode-SemiBold.BiAOBdH0.woff2) format("woff2"),url(/assets/FiraCode-SemiBold.C_qsBl7p.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Fira Code;src:url(/assets/FiraCode-Bold.DzhvDiv4.woff2) format("woff2"),url(/assets/FiraCode-Bold.DeMYoWdo.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Fira Code VF;src:url(/assets/FiraCode-VF.Bc8wnsZt.woff2) format("woff2-variations"),url(/assets/FiraCode-VF.B-gPkBGS.woff) format("woff-variations");font-weight:300 700;font-style:normal}:root{--vp-sidebar-width: 294px}:root{--vp-font-family-mono: ui-monospace, SFMono-Regular, "Fira Code", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-home-hero-name-color: transparent;--vp-home-hero-name-background: -webkit-linear-gradient( 120deg, #AE3FF5 30%, #6EC0F9 );--vp-home-hero-image-background-image: linear-gradient( -45deg, #6EC0F9 50%, #0eeeee 50% );--vp-home-hero-image-filter: blur(40px)}@media (min-width: 640px){:root{--vp-home-hero-image-filter: blur(56px)}}@media (min-width: 960px){:root{--vp-home-hero-image-filter: blur(72px)}}.VPFeature{position:relative}.VPFeature .icon{margin-bottom:8px}.VPFeature .title{position:absolute;top:36px;left:85px;font-size:18px}.medium-zoom-overlay{z-index:30}.medium-zoom-image{z-index:30;max-height:500px}.VPBadge.pro{border-color:#daa520;color:#333;background-color:#e7c605}a.cta{text-align:center;border-radius:8px}a.cta:hover{border-color:var(--vp-c-brand);background-color:var(--c-bg-accent)}a.cta.buy{border-color:#daa520}.sponsors-aside-text[data-v-13b2f7c0]{color:var(--vp-c-text-3);display:block;margin:3em 0 1em;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px}.sponsor-container[data-v-13b2f7c0]{--max-width: 100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--max-width),1fr));column-gap:4px}.sponsor-item[data-v-13b2f7c0]{margin:2px 0;background-color:var(--vp-c-bg-soft);display:flex;justify-content:center;align-items:center;gap:12px;padding-inline:20px;border-radius:2px;transition:background-color .2s ease;height:calc(var(--max-width) / 2 - 6px);font-size:13px}.sponsor-item.action[data-v-13b2f7c0]{font-size:11px;color:var(--vt-c-text-3)}.sponsor-item img[data-v-13b2f7c0]{max-width:calc(var(--max-width) - 30px);max-height:calc(var(--max-width) / 2 - 20px)}.sponsor-item .info[data-v-13b2f7c0]{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px}.sponsor-item .info .main[data-v-13b2f7c0]{font-weight:700;font-size:14px;line-height:1.5;color:var(--vp-c-text-1)}.sponsor-item .info .sub[data-v-13b2f7c0]{font-size:12px;line-height:1.2;color:var(--vp-c-text-3)}.special .sponsor-item[data-v-13b2f7c0]{height:160px}.special .sponsor-item img[data-v-13b2f7c0]{max-width:300px;max-height:150px}.dark .aside .sponsor-item[data-v-13b2f7c0],.dark .landing .sponsor-item[data-v-13b2f7c0]{background-color:var(--vp-c-gray-soft)}.aside .sponsor-item img[data-v-13b2f7c0],.landing .sponsor-item img[data-v-13b2f7c0]{transition:filter .2s ease}.dark .aside .sponsor-item img[data-v-13b2f7c0],.dark .landing .sponsor-item img[data-v-13b2f7c0]{filter:grayscale(1) invert(1)}.dark .sponsor-item:hover img[data-v-13b2f7c0]{filter:none}.sponsor-container.platinum.aside[data-v-13b2f7c0]{--max-width: 110px;column-gap:1px}.aside .sponsor-item[data-v-13b2f7c0]{margin:1px 0}.aside .special .sponsor-item[data-v-13b2f7c0]{width:100%;height:70px}.aside .special .sponsor-item img[data-v-13b2f7c0]{max-width:120px;max-height:36px}.VPLocalSearchBox[data-v-50b67a39]{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;display:flex}.backdrop[data-v-50b67a39]{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--vp-backdrop-bg-color);transition:opacity .5s}.shell[data-v-50b67a39]{position:relative;padding:12px;margin:64px auto;display:flex;flex-direction:column;gap:16px;background:var(--vp-local-search-bg);width:min(100vw - 60px,900px);height:min-content;max-height:min(100vh - 128px,900px);border-radius:6px}@media (max-width: 767px){.shell[data-v-50b67a39]{margin:0;width:100vw;height:100vh;max-height:none;border-radius:0}}.search-bar[data-v-50b67a39]{border:1px solid var(--vp-c-divider);border-radius:4px;display:flex;align-items:center;padding:0 12px;cursor:text}@media (max-width: 767px){.search-bar[data-v-50b67a39]{padding:0 8px}}.search-bar[data-v-50b67a39]:focus-within{border-color:var(--vp-c-brand-1)}.local-search-icon[data-v-50b67a39]{display:block;font-size:18px}.navigate-icon[data-v-50b67a39]{display:block;font-size:14px}.search-icon[data-v-50b67a39]{margin:8px}@media (max-width: 767px){.search-icon[data-v-50b67a39]{display:none}}.search-input[data-v-50b67a39]{padding:6px 12px;font-size:inherit;width:100%}@media (max-width: 767px){.search-input[data-v-50b67a39]{padding:6px 4px}}.search-actions[data-v-50b67a39]{display:flex;gap:4px}@media (any-pointer: coarse){.search-actions[data-v-50b67a39]{gap:8px}}@media (min-width: 769px){.search-actions.before[data-v-50b67a39]{display:none}}.search-actions button[data-v-50b67a39]{padding:8px}.search-actions button[data-v-50b67a39]:not([disabled]):hover,.toggle-layout-button.detailed-list[data-v-50b67a39]{color:var(--vp-c-brand-1)}.search-actions button.clear-button[data-v-50b67a39]:disabled{opacity:.37}.search-keyboard-shortcuts[data-v-50b67a39]{font-size:.8rem;opacity:75%;display:flex;flex-wrap:wrap;gap:16px;line-height:14px}.search-keyboard-shortcuts span[data-v-50b67a39]{display:flex;align-items:center;gap:4px}@media (max-width: 767px){.search-keyboard-shortcuts[data-v-50b67a39]{display:none}}.search-keyboard-shortcuts kbd[data-v-50b67a39]{background:#8080801a;border-radius:4px;padding:3px 6px;min-width:24px;display:inline-block;text-align:center;vertical-align:middle;border:1px solid rgba(128,128,128,.15);box-shadow:0 2px 2px #0000001a}.results[data-v-50b67a39]{display:flex;flex-direction:column;gap:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.result[data-v-50b67a39]{display:flex;align-items:center;gap:8px;border-radius:4px;transition:none;line-height:1rem;border:solid 2px var(--vp-local-search-result-border);outline:none}.result>div[data-v-50b67a39]{margin:12px;width:100%;overflow:hidden}@media (max-width: 767px){.result>div[data-v-50b67a39]{margin:8px}}.titles[data-v-50b67a39]{display:flex;flex-wrap:wrap;gap:4px;position:relative;z-index:1001;padding:2px 0}.title[data-v-50b67a39]{display:flex;align-items:center;gap:4px}.title.main[data-v-50b67a39]{font-weight:500}.title-icon[data-v-50b67a39]{opacity:.5;font-weight:500;color:var(--vp-c-brand-1)}.title svg[data-v-50b67a39]{opacity:.5}.result.selected[data-v-50b67a39]{--vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);border-color:var(--vp-local-search-result-selected-border)}.excerpt-wrapper[data-v-50b67a39]{position:relative}.excerpt[data-v-50b67a39]{opacity:75%;pointer-events:none;max-height:140px;overflow:hidden;position:relative;opacity:.5;margin-top:4px}.result.selected .excerpt[data-v-50b67a39]{opacity:1}.excerpt[data-v-50b67a39] *{font-size:.8rem!important;line-height:130%!important}.titles[data-v-50b67a39] mark,.excerpt[data-v-50b67a39] mark{background-color:var(--vp-local-search-highlight-bg);color:var(--vp-local-search-highlight-text);border-radius:2px;padding:0 2px}.excerpt[data-v-50b67a39] .vp-code-group .tabs{display:none}.excerpt[data-v-50b67a39] .vp-code-group div[class*=language-]{border-radius:8px!important}.excerpt-gradient-bottom[data-v-50b67a39]{position:absolute;bottom:-1px;left:0;width:100%;height:8px;background:linear-gradient(transparent,var(--vp-local-search-result-bg));z-index:1000}.excerpt-gradient-top[data-v-50b67a39]{position:absolute;top:-1px;left:0;width:100%;height:8px;background:linear-gradient(var(--vp-local-search-result-bg),transparent);z-index:1000}.result.selected .titles[data-v-50b67a39],.result.selected .title-icon[data-v-50b67a39]{color:var(--vp-c-brand-1)!important}.no-results[data-v-50b67a39]{font-size:.9rem;text-align:center;padding:12px}svg[data-v-50b67a39]{flex:none} diff --git a/assets/support.md.B0h1OKPf.js b/assets/support.md.B0h1OKPf.js new file mode 100644 index 0000000..5ecb294 --- /dev/null +++ b/assets/support.md.B0h1OKPf.js @@ -0,0 +1 @@ +import{_ as e,c as a,o as t,a5 as r}from"./chunks/framework.D-J1Cv1C.js";const f=JSON.parse('{"title":"技术支持","description":"","frontmatter":{},"headers":[],"relativePath":"support.md","filePath":"support.md"}'),s={name:"support.md"},o=r('技术支持
基础版
在使用框架的过程中难免会遇到问题，优先推荐在仓库提交 Issue ，你可以更详细描述问题产生的操作步骤，或者提供完整的最小复现，这样做可以让更多的人参与讨论，也方便后人查阅。
专业版
购买专业版的用户会邀请到专业版的微信群，并在群内提供技术支持。
',6),i=[o];function l(n,c,_,h,p,u){return t(),a("div",null,i)}const m=e(s,[["render",l]]);export{f as __pageData,m as default}; diff --git a/assets/support.md.B0h1OKPf.lean.js b/assets/support.md.B0h1OKPf.lean.js new file mode 100644 index 0000000..8dc97b7 --- /dev/null +++ b/assets/support.md.B0h1OKPf.lean.js @@ -0,0 +1 @@ +import{_ as e,c as a,o as t,a5 as r}from"./chunks/framework.D-J1Cv1C.js";const f=JSON.parse('{"title":"技术支持","description":"","frontmatter":{},"headers":[],"relativePath":"support.md","filePath":"support.md"}'),s={name:"support.md"},o=r("",6),i=[o];function l(n,c,_,h,p,u){return t(),a("div",null,i)}const m=e(s,[["render",l]]);export{f as __pageData,m as default}; diff --git a/buy.html b/buy.html new file mode 100644 index 0000000..a906d81 --- /dev/null +++ b/buy.html @@ -0,0 +1,28 @@ + + + + + + Skip to content 
购买专业版
专业版超值优惠合集①：Fantastic-mobile ＋ Fantastic-admin
原价：￥599.00 Fantastic-mobile ＋ ￥1199.00 Fantastic-admin ＝ ￥1798.00
合集优惠价：￥1099.00 (本价格不参与任何限时优惠活动)
请加作者微信进行购买
专业版超值优惠合集②：Fantastic-mobile ＋ One-step-admin
原价：￥599.00 Fantastic-mobile ＋ ￥999.00 One-step-admin ＝ ￥1598.00
合集优惠价：￥899.00 (本价格不参与任何限时优惠活动)
请加作者微信进行购买
专业版超值优惠合集③：Fantastic-mobile ＋ Fantastic-admin ＋ One-step-admin
原价：￥599.00 Fantastic-mobile ＋ ￥1199.00 Fantastic-admin ＋ ￥999.00 One-step-admin ＝ ￥2797.00
合集优惠价：￥1499.00 (本价格不参与任何限时优惠活动)
请加作者微信进行购买
购买流程
- 请先加作者微信进行在线咨询。
- 通过微信或支付宝扫码支付，并在备注里留下手机/微信/QQ/邮箱等任意一种联系方式。
- 支付成功后需提供：
- 付款截图凭证
- 授权邮箱号（常用邮箱）。专业版客户的唯一凭证，用于接收框架相关通知公告的唯一方式，但通常情况下我们不会随意打扰你。
- Github 用户名。专业版源码托管在 Github 平台，需提供你的 Github 用户名，我们会邀请你加入组织。
- 同意邀请后，进入专业版开发者私有组织，获取源码。
支付方式
领红包
若你打算使用支付宝进行付款，可以先扫下面这个二维码领取红包。
| Fantastic-mobile 专业版 | |
|---|---|
限时优惠：￥369.00 原价：￥599.00 | |
 |  |
| 专业版用户可加入专业版微信群（群内提供框架技术支持），除此之外，每一位专业版用户可免费绑定一位开发者（不支持换绑），绑定的开发者同样可加入专业版微信群，额外绑定更多开发者为 100 元/人。 | |
使用说明
- 购买者可将本产品用于任意「符合国家法律法规」的应用平台，禁止用于黄赌毒等危害国家安全与稳定的网站。
- 本产品购买后可用于开发商业项目，不限制域名和项目数量。
- 购买者需保证不传播产品源码，不得直接对本产品（或简单包装成同类产品）进行二次转售或发布。无论有意或无意，我们有权利收回产品授权及更新权限。
- 本产品的源码（包含全部源码，及部分源码片段），在未经我们许可下，不可以用于任何形式的开源项目，否则我们有权利收回产品授权及更新权限。
- 因使用本产品所产生的损害及风险，包括但不限于个人损害、商业赢利丧失、贸易中断、商业信息丢失或任何其它经济损失，需由购买者自行承担，我们不承担任何责任。
- 虚拟物品不支持退货退款。
- 最终解释权归 Fantastic-mobile 所有。
专业版与基础版区别
| ⭐功能与服务⭐ | 基础版 | 专业版 |
|---|---|---|
| 长期维护更新，提供新特性 | ✅ | |
| 开发与构建工具 | Vue 3 / Vite | |
| UI 组件库 | 默认使用 Vant ，可替换成任意 UI 组件库 | |
| 主题风格 | 明亮 1 款 / 暗黑 1 款 | 明亮 6 款 / 暗黑 6 款 |
| 布局组件 | 部分功能 | 完整功能 |
| 导航栏预设按钮（布局组件） | ✅ | |
| 导航栏模式（布局组件） | ✅ | |
| 导航栏标题非居中（布局组件） | ✅ | |
| 导航栏自定义标题（布局组件） | ✅ | |
| 多套标签栏（布局组件） | ✅ | |
| 标签栏角标（布局组件） | ✅ | |
| 全方位权限验证 | ✅ | ✅ |
| 扩展组件 | 5 个 | 6 个 |
| 国际化 | ✅ | |
| Mock 数据 | ✅ | ✅ |
| 错误日志上报 | ✅ | |
| 业务应用静态页面 | ✅ | |
| 团队代码规范 | ✅ | ✅ |
| 框架版权信息 | 需保留 | 可删除 |
| 技术支持 | 查看 | |
| 演示地址 | 访问 | 访问 |
Skip to content
介绍
框架提供一系列的组件方便快速开发。
基础组件
基础组件由 Vant 提供。
替换组件库
如果你不喜欢 Vant ，或者你想要将老项目迁移到 Fantastic-mobile 上，但老项目里使用的组件库并不是 Vant ，框架也提供了组件库替换移方案：
如果你想使用的组件库不在上述方案中，可以通过参考任何一份方案，理解替换的整理思路，并自行替换，别担心会很复杂，我们已经将大部分工作做好了。
内建组件
为了实现 UI 组件库可替换，框架内建了一些组件，这些组件仅服务于框架自身，所以不建议在业务页面内使用。但如果你需要对框架进行二次开发，并保证视觉上的一致性，这时候你就会需要用到它们。
内建组件存放在 /src/ui-kit/ 目录下，并配置了使用时自动引入。
扩展组件
扩展组件为框架封装的组件，组件源码完全开放，如果觉得用着不顺手，可以到 /src/components/ 目录下找到对应组件自行修改。
Skip to content
Sparkline 迷你图 专业版
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 迷你图数据，支持一维数组和对象数组，当为对象数组时，对象内参数为 {tooltip: 'xxx', value: 1} | array | - | - |
| width | 展示宽度 | number | - | 100 |
| height | 展示高度 | number | - | 30 |
| stroke-width | 折线宽度 | number | - | 3 |
| stroke-color | 折线颜色 | string | - | #dc2b33 |
| fill-color | 填充颜色 | string | - | - |
| cursor-color | 鼠标 hover 时辅助线颜色 | string | - | #dc2b33 |
| spot-color | 鼠标 hover 时辅助点颜色 | string | - | #dc2b33 |
| tooltip | 鼠标 hover 时是否显示文字提示 | boolean | - | false |
+
+
+
+
\ No newline at end of file
diff --git a/components/trend.html b/components/trend.html
new file mode 100644
index 0000000..7d26bc5
--- /dev/null
+++ b/components/trend.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
Skip to content
常用 API
接口请求
详细可阅读《与服务端交互 - 接口请求》。
ts
import api from '@/api'
+
+api.get()
+api.post()鉴权
详细可阅读《权限 - 鉴权函数》。
ts
const { auth, authAll } = useAuth()
+
+auth()
+authAll()页面
刷新
ts
const { reload } = useMainPage()
+
+reload()设置自定义标题 专业版
ts
const { setCustomTitle } = useMainPage()
+
+setCustomTitle(title)重置自定义标题 专业版
ts
const { resetCustomTitle } = useMainPage()
+
+resetCustomTitle()事件总线
基于 mitt 简单封装，使用方法请查阅官方文档。
ts
import eventBus from '@/utils/eventBus'
+
+eventBus.on()
+eventBus.emit()
+eventBus.off()日期 专业版
基于 dayjs 简单封装，使用方法请查阅官方文档。
ts
import dayjs from '@/utils/dayjs'
+
+dayjs() Skip to content
与服务端交互
框架使用 Axios 做为异步请求工具，并进行了简单的封装。
接口请求
设置 baseURL
在根目录 .env.* 文件里的 VITE_APP_API_BASEURL 这个参数就是配置 axios 的 baseURL 。
例如项目的真实接口请求地址为：
http://api.test.com/news/listhttp://api.test.com/news/createhttp://api.test.com/shop/info
则可设置为 VITE_APP_API_BASEURL = http://api.test.com/ 。
请求调用
常用的 GET 和 POST 请求可使用以下的方法：
ts
import api from '@/api'
+
+// GET 请求
+api.get('news/list', {
+ params: {
+ page: 1,
+ size: 10,
+ },
+}).then((res) => {
+ // 后续业务代码
+})
+
+// POST 请求
+api.post('news/create', {
+ title: '新闻标题',
+ content: '新闻内容',
+}).then((res) => {
+ // 后续业务代码
+})拦截器
在 /src/api/index.ts 文件里实例化了 axios 对象，并对 request 和 response 设置了拦截器，拦截器的用处就是拦截每一次的请求和响应，然后做一些全局的处理。例如接口响应报错，可以在拦截器里用统一的报错提示来展示，方便业务开发。但因为每个公司提供的接口标准不同，所以该文件拦截器部分的代码，需要开发者根据实际情况去修改调整。
代码很简单，首先初始化 axios 对象，然后 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就分别是请求和响应的拦截代码了。
参考代码里只做了简单的拦截处理，例如请求的时候会自动带上 token ，响应的时候会根据错误信息判断是登录失效还是接口报错，并做相应动作。
模块管理
如果项目里的接口很多，推荐根据模块来统一管理接口，目录为 /src/api/modules/ 。
跨域处理
生产环境的跨域需要服务端去解决，开发环境的跨域问题可在本地设置代理解决。如果本地开发环境请求接口提示跨域，可以设置 .env.development 文件里 VITE_OPEN_PROXY = true 开启代理。
ts
import api from '@/api'
+
+api.get('news/list') // http://localhost:9000/proxy/news/list
+api.post('news/add') // http://localhost:9000/proxy/news/add开启代理后，原有请求都会被指向到本地 http://localhost:9000/proxy ，因为 /proxy 匹配到了 vite.config.ts 里代理部分的设置，所以实际是请求依旧是 VITE_APP_API_BASEURL 所设置的地址。
ts
server: {
+ // vite.config.ts 中 proxy 配置，该配置即用于代理 API 请求
+ proxy: {
+ '/proxy': {
+ target: loadEnv(mode, process.cwd()).VITE_APP_API_BASEURL,
+ changeOrigin: command === 'serve' && loadEnv(mode, process.cwd()).VITE_OPEN_PROXY == 'true',
+ rewrite: path => path.replace(/\/proxy/, ''),
+ },
+ },
+},多数据源
如果项目里需要从多个不同地址的数据源请求数据，你有两种方式可以实现。
如果只是几个接口需求从其它数据源请求，你可以使用覆盖 baseURL 的方式：
ts
import api from '@/api'
+
+api.get('/new/list', {
+ baseURL: 'http://baidu.com/', // 直接覆盖 baseURL
+})这种方式的前提是，两个数据源的 request 和 response 规则要保持一致，因为只是覆盖 baseURL ，拦截器还是用的同一套规则。
所以如果两个数据源的请求和响应是完全不同的标准，你需要给第二个数据源单独实例化一个 axios 对象。首先在 .env.* 文件里配置第二个数据源的 baseURL ：
# 命名可随意，以 VITE_APP_ 开头即可
+VITE_APP_API_BASEURL_2 = 此处填写接口地址然后把 /src/api/index.ts 文件复制一份，例如就叫 /src/api/index2.ts ，并且将代码中使用到 VITE_APP_API_BASEURL 也替换为 VITE_APP_API_BASEURL_2 ，这样你就可以在页面中通过引入不同的文件分别请求两个数据源了：
ts
import api from '@/api'
+import api2 from '@/api/index2'
+
+// 请求默认数据源
+api.get('/new/list')
+// 请求第 2 个数据源
+api2.get('/new/list')需注意，如果第二个数据源也需要开启跨域处理的话，需要在 /src/api/index2.ts 里定一个新的 proxy 路径，例如 /proxy2/ ：
ts
const api = axios.create({
+ baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy2/' : import.meta.env.VITE_APP_API_BASEURL_2,
+ timeout: 10000,
+ responseType: 'json',
+})同时在 vite.config.ts 里增加一段新的 proxy 配置：
ts
server: {
+ // vite.config.ts 中 proxy 配置，该配置即用于代理 API 请求
+ proxy: {
+ '/proxy': {
+ target: loadEnv(mode, process.cwd()).VITE_APP_API_BASEURL,
+ changeOrigin: command === 'serve' && loadEnv(mode, process.cwd()).VITE_OPEN_PROXY == 'true',
+ rewrite: path => path.replace(/\/proxy/, ''),
+ },
+ '/proxy2': {
+ target: loadEnv(mode, process.cwd()).VITE_APP_API_BASEURL_2,
+ changeOrigin: command === 'serve' && loadEnv(mode, process.cwd()).VITE_OPEN_PROXY == 'true',
+ rewrite: path => path.replace(/\/proxy2/, ''),
+ },
+ },
+},Mock
Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。
开发环境 mock
mock 文件存放在 /src/mock/ 下，建议按照不同模块区分文件夹。文件新增或修改后会自动更新，不需要手动重启，可以在代码控制台查看日志信息。
以下为示例代码：
ts
import { defineFakeRoute } from 'vite-plugin-fake-server/client'
+import Mock from 'mockjs'
+
+export default defineFakeRoute([
+ {
+ url: '/mock/news/list',
+ method: 'get',
+ response: () => {
+ return {
+ error: '',
+ status: 1,
+ data: Mock.mock({
+ 'list|5-10': [
+ {
+ title: '@ctitle',
+ },
+ ],
+ }),
+ }
+ },
+ },
+])参数获取：
- GET：
({ query }) => { } - POST：
({ body }) => { }
为了让 mock 接口与真实接口共存，即项目开发中，部分请求 mock 接口，部分请求真实接口。需要在配置 mock 接口的时候，给 url 参数统一设置 /mock/ 前缀，并在调用接口的时候，使用 baseURL 强制修改此次请求的地址。
如下所示，其中 news/list 会请求本地的 mock 接口，而 news/create 依旧请求真实接口，即使开启跨域代理也不影响。
ts
import api from '@/api'
+
+api.get('news/list', {
+ baseURL: '/mock/',
+ params: {
+ page: 1,
+ size: 10,
+ },
+}).then((res) => {
+ // 后续业务代码
+})
+
+api.post('news/create', {
+ title: '新闻标题',
+ content: '新闻内容',
+}).then((res) => {
+ // 后续业务代码
+})生产环境 mock
注意
生产环境一般都是调用真实接口，如果需要使用 mock 也只适用于一些简单的示例网站及预览网站。
框架默认已经配置好生产环境 mock ，如果不想让生产环境里的请求走 mock ，可在接口调用处删除 baseURL 设置，或直接删除 mock 接口文件。
需要注意一点，如果项目中有涉及到上传功能，请彻底关闭线上环境 mock ，在环境配置里设置 VITE_BUILD_MOCK = false ，不然线上环境将会报错。
开发环境与生产环境使用 mock 差异不大，比较大的区别是生产环境里调用 mock 接口，在控制台内看不到接口请求日志。
Skip to content
构建与预览
构建
项目开发完成之后，可以执行 pnpm run build 命令进行构建，构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件。
如果是需要构建测试环境，则执行 pnpm run build:test 命令，对应会在根目录生成 dist-test 文件夹。
TIP
如果最终访问地址为域名非根节点，如 https://www.example.com/app，则需要在 vite.config.ts 中设置 base 选项为 /app/，否则会出现资源引用错误。
预览
生成好的 dist 文件夹一般需要部署至服务器才算部署发布成功，但为了保证构建出来的文件能正常运行，开发者通常希望能在本地先预览一下，可执行 pnpm run serve 或 pnpm run serve:test 命令预览不同环境构建出的文件夹。
压缩
在环境配置文件里设置 VITE_BUILD_COMPRESS 即可在构建时生成 .gz 或 .br 文件。
# 单独开启 gzip
+VITE_BUILD_COMPRESS = gzip
+
+# 单独开启 brotli ，brotli 是比 gzip 压缩率更高的算法
+VITE_BUILD_COMPRESS = brotli
+
+# 或者也可以都开启，两者可以共存
+VITE_BUILD_COMPRESS = gzip,brotli两者均需要 nginx 安装指定模块并开启后才会生效。
生成存档 v4.5.0 新增
在环境配置文件里设置 VITE_BUILD_ARCHIVE 即可在构建完后成生成 .zip 或 .tar.gz 文件。
# 生成 zip
+VITE_BUILD_ARCHIVE = zip
+
+# 生成 tar.gz
+VITE_BUILD_ARCHIVE = tar其它设置
# 是否在打包时生成 sourcemap
+VITE_BUILD_SOURCEMAP = true Skip to content
代码规范
建议
请确保已阅读《准备工作 - 开发环境》，并且按照文档说明安装好相关软件及扩展。
为保证代码风格统一，请使用 Visual Studio Code 做为开发 IDE ，框架源码里已提供相关配置文件，可直接测试效果：在保存代码时，会自动对当前文件进行代码格式化操作。
IDE 配置
配置文件为 .editorconfig ，通常情况下无需做任何修改。
ESLint 配置
配置文件为 eslint.config.js ，框架使用 antfu/eslint-config 做为基础规范，如果你对默认的规则有异议，可以查阅 ESLint 官网规则并在 eslint.config.js 文件中进行覆盖。
当你对规则进行修改后，原有的代码可能会因为规则的变动导致编辑器大量提示错误，你可以通过运行 pnpm run lint:eslint 进行一次格式校验，如果规则支持自动修复，则会将不符合规则的代码自动进行格式化。
TIP
通过修改 eslint.config.js 中 ignores 配置可忽略无需做代码规范校验的目录或文件，例如在项目中导入了一些第三方的插件代码或组件代码，我们就可以将其进行忽略。
StyleLint 配置
配置文件为 stylelint.config.js ，如果你对默认的规则有异议，可以查阅 Stylelint 官网规则并在 stylelint.config.js 文件中进行修改。
当你对规则进行修改后，原有的代码可能会因为规则的变动导致编辑器大量提示错误，你可以通过运行 pnpm run lint:stylelint 进行一次格式校验，如果规则支持自动修复，则会将不符合规则的代码自动进行格式化。
TIP
通过修改 stylelint.config.js 中 ignoreFiles 配置可忽略无需做代码规范校验的文件，例如在项目中导入了一些第三方的插件代码或组件代码，我们就可以将其进行忽略。
simple-git-hooks 和 lint-staged
由于 IDE 能做的事比较有限，只能对代码的书写规范进行格式化，对于一些无法自动修复的错误代码，如果没有改正到就被推送到 git 仓库，在多人协作开发时，可能会影响到别人的开发体验。所以框架集成了 simple-git-hooks 和 lint-staged 这两个依赖来解决这一问题。
在提交代码时， simple-git-hooks 会通过 lint-staged 对本次提交变更的文件进行分别进行 eslint 和 stylelint 检测，如果有报错，则会阻止本次代码提交，直到开发者修改完所有错误代码后，才允许提交到 git 仓库，这样可以确保 git 仓库里的代码不会有不规范的代码。
注意
请确保在安装依赖前，已经使用 git init 对项目进行过 git 环境初始化，如果你在安装依赖后再初始化了 git 环境，请在 git 环境初始化之后再执行一遍 pnpm install 安装命令。
此外，如果 git 仓库目录和框架目录并非同一个，则需要在 package.json 中修改 postinstall 脚本，切换到 git 所在目录。例如 git 目录是 project/ ，而框架目录是 project/fantastic-mobile/ ，则在 package.json 里找到 simple-git-hooks 配置并修改：
json
"simple-git-hooks": {
+ "pre-commit": "cd ./fantastic-mobile/ && pnpm lint-staged",
+ "preserveUnused": true
+}修改后重新执行一下 pnpm install 即可。
移除
如果不想在 git 提交时强制进行代码规范校验，可以在 package.json 中移除 simple-git-hooks 配置：
json
{
+ "scripts": {
+ "postinstall": "simple-git-hooks",
+ },
+ "simple-git-hooks": {
+ "pre-commit": "pnpm lint-staged",
+ "preserveUnused": true
+ },
+}然后手动删除 .git/hooks/pre-commit 文件即可。
Skip to content
配置
环境配置
默认提供三套环境配置，分别为：
yaml
# 应用配置面板
+VITE_APP_SETTING = true
+# 页面标题
+VITE_APP_TITLE = Fantastic-mobile
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+
+# 是否开启代理
+VITE_OPEN_PROXY = false
+# 是否开启开发者工具
+VITE_OPEN_DEVTOOLS = falseyaml
# 应用配置面板
+VITE_APP_SETTING = false
+# 页面标题
+VITE_APP_TITLE = Fantastic-mobile
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+
+# 是否在打包时启用 Mock
+VITE_BUILD_MOCK = true
+# 在构建时生成 sourcemap
+VITE_BUILD_SOURCEMAP = true
+# 在构建时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS =
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =yaml
# 应用配置面板
+VITE_APP_SETTING = false
+# 页面标题
+VITE_APP_TITLE = Fantastic-mobile
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+
+# 是否在打包时启用 Mock
+VITE_BUILD_MOCK = false
+# 在构建时生成 sourcemap
+VITE_BUILD_SOURCEMAP = false
+# 在构建时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip,brotli
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =其中 VITE_APP_SETTING VITE_APP_TITLE VITE_APP_API_BASEURL VITE_APP_DEBUG_TOOL 为必要配置，即不管是在开发、测试，还是生产环境都需要使用到。而其余配置则在不同环境下有不同用途，例如开发环境用于本地开发使用，测试环境和生产环境用于构建使用。
开发者可根据实际业务需求进行扩展，如果对这块不熟悉，请阅读 Vite - 环境变量和模式 章节。
注意
VITE_APP_SETTING 该变量是开启应用配置面板，目的是方便开发者在开发阶段调试，生产环境下默认关闭，也建议关闭。
应用配置（框架配置）
请在 /src/settings.ts 文件中进行配置，而 /src/settings.default.ts 为框架的默认配置，请勿在该文件内修改。
关于配置的类型定义，可以在 /src/types/globals.d.ts 文件中查阅。
ts
// 这是基础版演示源码里的自定义配置示例
+const globalSettings: Settings.all = {
+ app: {
+ enablePermission: true,
+ enableDynamicTitle: true,
+ },
+ tabbar: {
+ list: [
+ {
+ path: '/feature',
+ icon: 'i-ic:sharp-auto-awesome',
+ activeIcon: 'i-ic:twotone-auto-awesome',
+ text: '特色',
+ },
+ {
+ path: '/',
+ icon: 'i-ic:sharp-home',
+ activeIcon: 'i-ic:twotone-home',
+ text: '主页',
+ },
+ {
+ path: '/user',
+ icon: 'i-ic:baseline-person',
+ activeIcon: 'i-ic:twotone-person',
+ text: '我的',
+ },
+ ],
+ },
+ copyright: {
+ dates: '2024-present',
+ company: 'Fantastic-mobile',
+ website: 'https://fantastic-mobile.github.io',
+ },
+}注意
文档中提供的配置介绍，如果在本地的开发环境使用中报错或者无法生效，说明你使用的版本不支持或者配置参数有变动，你可以打开 /src/settings.default.ts 查看当前版本的完整配置作为参考。
并且如果你使用的是 Visual Studio Code ，鼠标悬浮到属性上时，会有属性的介绍：
Skip to content
开发者工具
INFO
该特性由 Vue DevTools Next 提供技术支持。
使用介绍
在 .env.development 开发环境配置文件中开启：
yaml
# 是否开启开发者工具
+VITE_OPEN_DEVTOOLS = true开启后，在本地运行时，默认会在页面底部中间显示一个开发者工具按钮，点击即可打开开发者工具。
Skip to content
错误日志 专业版
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enableErrorLog: true,
+ },
+}然后需要到 /src/utils/error.log.ts 文件里编写业务代码，框架为方便演示，将错误日志记录在 sessionStorage 里。
开发者需要根据实际业务情况修改代码，例如将增加上报信息，记录用户账号、token等数据，并且将错误日志进行上报。
由于开启错误日志监控后，Vue 相关的错误都不会在控制台里显示，所以在开发环境下即使开启错误日志也不会被启用，如果需要在开发环境下测试，可在 /src/util/error.log.ts 里修改开启的条件判断。
Skip to content
自定义字体 专业版
用户访问使用了自定义字体的页面时，会自动下载字体文件，字体文件有大有小，所以不建议在非英文环境中使用。
框架预设了 Digital 7 的两套字体，除此之外，你也可以通过以下方法引入你需要的自定义字体。
找字体
访问 DaFont 或其它字体下载网站，下载 .ttf 格式的字体文件。
生成字体
因为 .ttf 格式的字体文件不是浏览器支持的字体格式，所以需要通过 .ttf 生成其它格式的字体文件。
访问 Font Squirrel，上传 .ttf 文件，并按照下面设置后，点击下载。
使用
将上一步下载的压缩包解压并放入 /src/assets/fonts/ 目录下，注意按文件夹区分，随后引入文件夹中的 stylesheet.css 即可使用，以 Digital 7 字体为例：
scss
@import '../../assets/fonts/digital-7/stylesheet.css';
+.digital-7 {
+ font-family: 'digital-7regular';
+}字体的 font-family 名称在 stylesheet.css 里查看。
另外你也可以将 @import '../../assets/fonts/digital-7/stylesheet.css'; 这句代码放到全局引入，这样所有页面就都可以通过设置 font-family: 'digital-7regular'; 直接使用了。
Skip to content
全局资源
图片
框架用到的图片资源都放在 /src/assets/images/ 目录下，可自行新建文件夹分类管理。
样式
样式存放目录为 /src/assets/styles/ ，因为 Vue 的文件特性，页面样式建议写在 .vue 文件里，所以该目录只存放全局样式，方便统一管理。
此目录下还有一个特殊目录，即 /src/assets/styles/resources/ ，这是全局 SCSS 资源目录，首先这个目录里只支持 .scss 文件，其次在这个目录里的文件，无需在页面上引用即可生效并使用。
同样，精灵图目录下生成的 SCSS 资源也是全局可调用的。
说明
全局 SCSS 资源并不是全局样式，是变量、@mixin 、@function 这些东西
组件
公共组件
说明
公共组件在使用时，无需手动引入，框架会在你使用时自动引入，该特性由 unplugin-vue-components 提供支持。
公共组件存放在 /src/components/ 目录下，每个组件按文件夹进行区分。
每个组件的文件夹内至少保留一个文件名为 index.vue 的组件入口（可参考 SvgIcon 组件），文件夹名称即为组件名。
推荐使用 pnpm new 指令进行组件生成，详细可查看《代码文件自动生成》。
局部组件
局部组件没有提供专门的存放目录，我们建议采用就近原则，你可以在每个模块的文件夹下，建立一个 components 文件夹专门用于存放局部组件。
Skip to content
国际化 专业版
INFO
该特性由 vue-i18n 提供技术支持。
vscode 扩展
如果使用 vscode 进行开发，推荐安装 i18n Ally 这个扩展。
安装该扩展后，代码里可以实时查看对应语言的内容。
语言包
语言包存放在 /src/locales/lang/ 目录下，因为 Element Plus 本身也有自己的语言包，所以在做国际化支持的时候，框架的语言包和 Element Plus 的语言包需要进行数据合并，可点击这里查看 Element Plus 的语言包文件。
假设你已经在 /src/locales/lang/ 目录下新增并配置好了一个日文语言包 ja.json ，然后你需要到 /src/locales/index.ts 文件里做以下调整：
ts
import elementLocaleZhCN from 'element-plus/dist/locale/zh-cn.mjs'
+import elementLocaleZhTW from 'element-plus/dist/locale/zh-tw.mjs'
+import elementLocaleEn from 'element-plus/dist/locale/en.mjs'
+// 引入 Element Plus 的日文语言包
+import elementLocaleJa from 'element-plus/dist/locale/ja.mjs'
+
+function getElementLocales() {
+ const locales: {
+ [key: string]: any
+ } = {}
+ for (const key in messages) {
+ locales[key] = {}
+ switch (key) {
+ case 'zh-cn':
+ Object.assign(locales[key], elementLocaleZhCN, { labelName: '中文(简体)' })
+ break
+ case 'zh-tw':
+ Object.assign(locales[key], elementLocaleZhTW, { labelName: '中文(繁體)' })
+ break
+ case 'en':
+ Object.assign(locales[key], elementLocaleEn, { labelName: 'English' })
+ break
+ // 在这里增加一个 case 选项，其中 labelName 会在语言选择器里显示
+ case 'ja':
+ Object.assign(locales[key], elementLocaleJa, { labelName: '日本語' })
+ break
+ }
+ }
+ return locales
+}路由设置
以中文(简体)为例，打开 /src/locales/lang/zh-cn.json 文件可以看到路由相关的配置，在 route 对象里可以扩展需要开启国际化支持的路由。
json
{
+ "pages": {
+ "navbar": {
+ "root": "导航栏",
+ "default": "默认导航栏",
+ "none": "无导航栏"
+ }
+ }
+}如果需要新增某个路由的国际化支持，光设置好中文(简体)的还不行，其它语言包文件里也要同步添加。当都设置好后，可在该路由的 title 参数上直接设置对应 key 值，例如：
ts
meta: {
+ title: 'pages.navbar.default',
+},单页组件
如果每个页面都要做国际化支持，那语言包文件就会变得无比庞大且难以维护，推荐在每个页面组件里使用 <i18n> 自定义块进行语言维护，可访问 /src/views/feature/function/i18n.vue 查看示例。
更多 vue-i18n 的使用技巧请参考官方文档。
与服务端交互
所有的请求均会在请求头里带上 Accept-Language ，后端可根据这一状态信息做动态数据国际化处理。
Skip to content
页面缓存
注意
开启缓存必须保证每个页面组件必须设置 name ，并且确保 name 唯一。
我们只要在需要进行缓存的路由 meta 对象里配置 cache 参数即可。这个参数可接受以下 3 种类型：
booleanstringstring[]
boolean 很好理解，当设置为 true 时，该页面只要一被访问，就会被缓存。例如有一个新闻管理的模块，我们把新闻列表页设置为 cache: true 后并访问，然后从新闻列表页点击某条记录进入新闻详情页，这时候再从新闻详情页返回新闻列表页时，新闻列表页上的数据是不会重新加载，而是保留了当时离开时的状态。
但这个方案也有一个弊端，就是该页面一旦访问就永久被缓存住了（除非手动进行浏览器刷新），如果用户从新闻列表页进入的不是新闻详情页，而是其它模块的页面，比如上一级页面，这时候其实是不希望新闻列表页被缓存的。这种情况下，框架支持设置 string 和 string[] 两个类型的参数值。
首先不管设置 string 还是 string[] ，你需要设置的值，都是路由的 name 。
怎么理解呢？还是用上面的例子，如果有两个模块，一个新闻管理，一个用户管理。当从新闻列表页进入新闻详情页的时候，需要对新闻列表页进行缓存，而从新闻列表页进入用户列表页，则不需要对新闻列表页进行缓存，我们就可以对新闻列表页的路由设置成：
src/views/
+└── news/
+ ├── [id].vue
+ └── index.vuevue
<!-- /src/views/news/index.vue -->
+<script setup lang="ts">
+definePage({
+ meta: {
+ title: '新闻列表页',
+ cache: '/news/[id]',
+ },
+})
+</script>这表示从新闻列表页进入新闻详情页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。
当然也可将 cache 设置成 name 数组。
src/views/
+└── news/
+ ├── create.vue
+ ├── detail.[id].vue
+ └── index.vuevue
<!-- /src/views/news/index.vue -->
+<script setup lang="ts">
+definePage({
+ meta: {
+ title: '新闻列表页',
+ cache: ['/news/detail.[id]', '/news/create'],
+ },
+})
+</script>这样就表示从新闻列表页进入新闻详情页或新增新闻页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。
还有一种场景，就是某个页面始终开启缓存，仅在某些特定条件下才关闭缓存。例如有一个新闻管理的模块，我们希望新增新闻页始终开启缓存，因为在进行新增操作时，可能需要跳转到新闻分类管理的页面进行新增分类的操作，或者是其他页面进行一些操作，当返回新增新闻页时，需要将它缓存。一旦新闻新增成功，返回到新闻列表页时，新增新闻页就不再需要缓存了。
我们只要在需要进行缓存的路由 meta 对象里配置 noCache 参数即可。这个参数可接受以下 2 种类型：
stringstring[]
针对上述场景，我们就可以对新增新闻页的路由设置成：
src/views/
+└── news/
+ ├── create.vue
+ └── index.vuevue
<!-- /src/views/news/create.vue -->
+<script setup lang="ts">
+definePage({
+ meta: {
+ title: '新增新闻页',
+ cache: true,
+ noCache: '/news/',
+ },
+})
+</script> Skip to content
登录
说明
如果业务不需要用户体系，可以直接将 /src/views/login.vue 文件删除或修改为 _login.vue ，这样就不会生成登录路由。
开发者在接入登录功能的时候，经常会遇到一些问题，比如：
- 替换真实接口后，无法正常登录
- 登录接口请求成功，但依旧提示登录
- ...
针对这些问题你需要依次检查以下几点：
- 在
.env.development里检查接口请求地址是否正确。 - 在
/src/api/index.ts里修改响应拦截器里的代码，按照实际情况进行调整。例如什么状态下是请求成功，什么状态下是请求异常，并进行错误提示。 - 在
/src/api/modules/user.ts里修改login函数，确保接口可以请求成功。 - 在
/src/store/modules/user.ts里修改isLogin计算属性，这部分需要根据实际存储的用户信息去判断是否登录。
Skip to content
移动端支持
本套件支持使用 vw/vh 做为移动端的布局单位，并默认集成了 postcss-px2vp 插件。
使用也很简单，只需将根目录下 postcss.config.js 文件里的注释代码开启即可：
js
module.exports = {
+ plugins: {
+ 'postcss-px2vp': {
+ // 需要转换的单位，默认为"px"
+ unitToConvert: 'px',
+ // 设计稿的视口宽度
+ viewportWidth: 320,
+ // 单位转换后保留的精度
+ unitPrecision: 5,
+ // 能转化为 vw 的属性列表
+ propList: ['*'],
+ // 希望使用的视口单位
+ viewportUnit: 'vw',
+ // 字体使用的视口单位
+ fontViewportUnit: 'vw',
+ // 需要忽略的 CSS 选择器，不会转为视口单位，使用原有的 px 等单位
+ selectorBlackList: [],
+ // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
+ minPixelValue: 1,
+ // 媒体查询里的单位是否需要转换单位
+ mediaQuery: false,
+ // 是否直接更换属性值，而不添加备用属性
+ replace: true,
+ // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+ exclude: [],
+ },
+ autoprefixer: {},
+ },
+}最后在开发中就可以直接使用 px 了，最终输出就是 vw 。
Skip to content
PageLayout 组件
<PageLayout> 组件是本框架区别于其他 H5 框架的最重要的特性。它提供了页面整体布局的基础，包括顶部导航栏、顶部标签栏、返回顶部、记录滚动位置等特性。
基本用法
vue
<template>
+ <PageLayout :navbar="false" tabbar copyright>
+ <!-- ... -->
+ </PageLayout>
+</template>本组件不是一个可以随处使用的组件，它必须应用在根节点，并且一个页面里只能有一个 <PageLayout> 组件。
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| titleCenter 专业版 | 导航栏标题是否居中 | boolean | - | true |
| navbar | 是否启用导航栏，默认使用应用配置 navbar.enable | boolean | - | - |
| navbarMode 专业版 | 导航栏模式，默认使用应用配置 navbar.mode | string | static / fixed / show-hide-fixed / sticky | - |
| navbarStartSide 专业版 | 从预设中设置展示在导航栏左侧的图标按钮 | string / string[] | back / home / forward / i18n | - |
| navbarEndSide 专业版 | 从预设中选择展示在导航栏右侧的图标按钮 | string / string[] | back / home / forward / i18n | - |
| tabbar | 是否启用标签栏，默认使用应用配置 tabbar.enable | boolean | - | - |
| tabbarName 专业版 | 标签栏名称，如果应用配置里配置了多套标签栏，需设置当前页面使用哪套标签栏，默认使用第一套 | string | - | - |
| copyright | 是否展示底部版权信息，默认使用应用配置 copyright.enable | boolean | - | - |
| backTop | 是否启用返回顶部按钮，默认使用应用配置 app.enableBackTop | boolean | - | - |
| savedPosition 专业版 | 是否记忆滚动位置（前提条件：需开启页面缓存） | boolean | - | - |
| scrollTop 专业版 v0.2.0 新增 | 设置竖向滚动条位置 | number | - | - |
| scrollLeft 专业版 v0.2.0 新增 | 设置横向滚动条位置 | number | - | - |
| scrollWithAnimation 专业版 v0.2.0 新增 | 是否在设置滚动条位置时使用动画过渡 | boolean | - | - |
Slots
| 插槽名 | 说明 |
|---|---|
| - | 页面区域 |
| navbar | 导航栏标题区域 |
| navbar-start | 导航栏左侧图标区域 |
| navbar-end | 导航栏右侧图标区域 |
| tabbar | 标签栏区域 |
Events
| 事件名 | 说明 |
|---|---|
| scroll | 页面滚动时触发 |
| reachTop v0.2.0 新增 | 页面滚动到顶部时触发 |
| reachBottom v0.2.0 新增 | 页面滚动到底部时触发 |
导航栏
enable
可以将导航栏全局开启，这样所有页面默认都会显示导航栏。
ts
const globalSettings: Settings.all = {
+ navbar: {
+ enable: true,
+ },
+}或者也可以提供一段正则表达式，例如下面这段配置表示页面在微信环境下默认不显示导航栏：
ts
const globalSettings: Settings.all = {
+ navbar: {
+ enable: !/MicroMessenger/i.test(window.navigator.userAgent),
+ },
+}mode 专业版
全局设置导航栏模式，默认为 static
'static'静止，跟随页面滚动'fixed'固定，不跟随页面滚动，始终固定在顶部'show-hide-fixed'显隐固定，默认隐藏，页面滚动时显示'sticky'粘性，页面往下滚动时隐藏，往上滚动时显示
ts
const globalSettings: Settings.all = {
+ navbar: {
+ mode: 'fixed',
+ },
+}标签栏
enable
可以将标签栏全局开启，这样所有页面默认都会显示标签栏。
ts
const globalSettings: Settings.all = {
+ tabbar: {
+ enable: true,
+ },
+}list
标签栏展示数据：
ts
const globalSettings: Settings.all = {
+ tabbar: {
+ list: [
+ {
+ path: '/',
+ icon: 'i-ic:sharp-home',
+ text: '主页',
+ },
+ {
+ path: '/user',
+ icon: 'i-ic:baseline-person',
+ text: '我的',
+ },
+ ],
+ },
+}专业版支持配置多套标签栏，然后通过 tabbarName 属性指定当前页面使用哪套标签栏：
ts
const globalSettings: Settings.all = {
+ tabbar: {
+ list: [
+ {
+ name: 'tabbar1',
+ list: [
+ {
+ path: '/',
+ icon: 'i-ic:sharp-home',
+ text: '主页',
+ },
+ {
+ path: '/user',
+ icon: 'i-ic:baseline-person',
+ text: '我的',
+ },
+ ],
+ },
+ {
+ name: 'tabbar2',
+ list: [
+ {
+ path: '/list',
+ icon: 'i-ic:sharp-list',
+ text: '列表',
+ },
+ {
+ path: '/setting',
+ icon: 'i-ic:sharp-settings',
+ text: '设置',
+ },
+ ],
+ },
+ ],
+ },
+}vue
<template>
+ <PageLayout tabbar-name="tabbar2">
+ <!-- ... -->
+ </PageLayout>
+</template>path
跳转路由地址
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 跳转路由地址 |
icon
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 显示图标 |
该项配置最终会通过 <SvgIcon /> 组件进行展示，意味着你可以使用自定义图标，也可使用 Iconify 提供的图标，详细可阅读《图标》。
activeIcon 专业版
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 激活时显示图标 |
该项配置最终会通过 <SvgIcon /> 组件进行展示，意味着你可以使用自定义图标，也可使用 Iconify 提供的图标，详细可阅读《图标》。
text
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 显示文字 |
badge 专业版
设置不同的类型值，展示效果也会不同。
boolean展示形式为点，当值为 false 时隐藏number展示形式为文本，当值小于等于 0 时隐藏string展示形式为文本，当值为空时隐藏
如果标记需要动态更新，请设置为箭头函数形式，并返回外部变量，例如搭配 pinia 一起使用。
ts
badge: () => globalStore.number
+
+
+
+
\ No newline at end of file
diff --git a/guide/plop.html b/guide/plop.html
new file mode 100644
index 0000000..ddb81ec
--- /dev/null
+++ b/guide/plop.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
Skip to content
代码文件自动生成
开发过程中，避免不了手动去频繁创建页面、组件等文件，并且还要在文件里写一些必要的代码，是不是觉得很麻烦？现在你可以用更简洁的方式来处理这一切。
说明
该功能基于 plop 实现，在扩展新的模式前，请先详细阅读 plop 文档。
本套件默认提供了 3 种模式，通过 pnpm run new 指令可以自行选择。
page页面文件component组件文件store全局状态文件
除了默认提供的 3 种模式，你还可以自定义新的模式，其原理就是通过预设模板，按照特定规则创建文件或者文件夹。
预设模板文件存放在 ./plop-templates/ 目录下，并在 ./plopfile.js 文件里进行引用，你可以参考现有 3 种模式的目录结构进行创建新的模板。
page
page 模式下，只能在 /src/views/ 目录下选择指定的文件夹进行生成，生成的文件中，部分关键位置会被替换掉，例如 <page-header /> 中的 title 会按照你输入的中文名称替换，页面的 name 会根据当前文件目录和文件名自动生成，确保唯一。
component
component 模式可以选择生成的是全局组件还是局部组件，全局组件生成目录为 /src/components/ ，局部组件则在 /src/views/ 目录下选择指定的文件夹进行生成。
store
store 模式则会在 /src/store/modules/ 目录下生成一个对应的文件。
Skip to content
常见问题
安装依赖时有警告
这是一个可以无视的警告，因为依赖已经安装成功了。
如果对这个问题感兴趣，可以浏览下这个 issue ，里面有给出一个忽略警告的方案，就是在 package.json 中添加：
json
{
+ "pnpm": {
+ "peerDependencyRules": {
+ "ignoreMissing": [
+ "postcss",
+ "rollup"
+ ]
+ }
+ }
+}这样你下次再安装依赖的时候，就不会出现该警告了。
为什么本地开发环境首次载入很慢
主要是 Vite 的原因，具体可以阅读这篇文章了解《为什么有人说 vite 快，有人却说 vite 慢？》。
Vite 4.3 显著提升了开发服务器的性能，具体可以阅读这篇文章了解《Vite 4.3 is out!》，同时框架 v3.0.0 版本开始，vite 也升级到了 4.3 版本。
项目 URL 里的 # 号能不能去掉
这是因为路由默认使用的是 Hash 模式，你可以在 /src/router/index.ts 修改为 HTML5 模式，但需要注意，开启 HTML5 模式，服务器也需要做相应的配置调整，详细可阅读《Vue-router 不同的历史模式》。
页面切换后显示空白
因为路由切换有使用到 <transition> 动画，而 <transition> 组件无法处理多个根节点的组件，所以请检查路由对应所有的页面文件的根节点是否均为单个。
错误示例：
vue
<template>
+ <!-- 需要注意，注释也会被视为一个节点 -->
+ <h1>text h1</h1>
+ <h2>text h2</h2>
+</template>
+
+<template>
+ 没有节点也是不行的
+</template>正确示例：
vue
<template>
+ <div>
+ <h1>text h1</h1>
+ <h2>text h2</h2>
+ </div>
+</template>
+
+<template>
+ <div>
+ 这样就没问题啦
+ <div>
+</template>相关 Issue 说明。
开发环境修改代码后，路由跳转导致页面空白
参考这个 issue ，未来 Vue 官方可能会修复这个问题，目前只能手动刷新浏览器。
构建报错，提示内存溢出
构建时失败并在错误信息里提示 Reached heap limit Allocation failed - JavaScript heap out of memory 。
你可以执行 pnpm add cross-env -D 安装 cross-env 依赖，并在 package.json 里修改构建脚本指令：
json
{
+ "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 编写代码。
Skip to content
准备工作
源码
阅读开发文档前，请确保手上已经有 Fantastic-mobile 源码，因为文档中提及的内容，都是需要在本地项目中编写或修改代码并运行才能呈现的。
源码分为两种：
- 框架源码 不含示例代码，可直接用于实际开发
- 演示源码 同演示站，在框架源码基础上，提供了大量示例代码
基础版
到 Github Releases 页面下载最新版本的压缩包，如下图所示：
或者也可以从 Github/Gitee 上拉取源码，但需要注意，直接拉取源码可能会包含未发布的内容，最终发布时可能会有变动，请谨慎使用。
sh
# 拉取框架源码
+git clone https://github.com/fantastic-mobile/basic.git
+# 拉取演示源码
+git clone -b example https://github.com/fantastic-mobile/basic.gitsh
# 拉取框架源码
+git clone https://gitee.com/fantastic-mobile/basic.git
+# 拉取演示源码
+git clone -b example https://gitee.com/fantastic-mobile/basic.git专业版
专业版用户会被邀请加入到 Fantastic-mobile Github 官方组织，加入组织后可访问专业版私有仓库，源码获取方式和基础版无差异，只是源码仓库不同。
如果你想获取专业版源码，可以点这里去购买。
开发环境
使用本框架前，需要在本地依次安装好 Node.js, pnpm, Git(非必须) 和 Visual Studio Code。
注意
在 package.json 文件中有限制 node 要求版本，建议使用最新 LTS 版本。
然后在 Visual Studio Code 里安装好以下扩展：
在 Visual Studio Code 里打开源码文件夹，右下角会自动提示需要安装的依赖，直接点击安装即可。
额外推荐
以上为开发时必备扩展，以下则是作者推荐安装的扩展，安装它们将在一定程度上提升开发效率。
- Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包
- Color Highlight 在代码中高亮颜色
- Highlight Matching Tag 高亮显示匹配的标签
- Image preview 图片预览
- indent-rainbow 彩虹缩进提示
技术栈
了解并熟悉框架使用到的技术栈，能让你使用本框架更得心应手。
- Vite
- Vue 3 (v3 迁移指南)
- Vue Router (unplugin-vue-router 基于文件的类型化路由)
- Pinia
- UnoCSS
Skip to content
替换为 NutUI
由于框架默认使用的是 Vant 组件库，并且演示源码中大量示例也使用了 Vant，如果你需要使用 NutUI，请拉取框架源码分支，或者到 Github Releases 页面下载框架源码压缩包。
专业版用户也同样，请到专业版仓库下载框架源码。
安装
sh
# 安装依赖
+pnpm install
+
+# 安装 NutUI
+pnpm add @nutui/nutui @nutui/touch-emulator代码调整
基础版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import NutUI from '@nutui/nutui'
+import '@nutui/nutui/dist/style.css'
+import '@nutui/touch-emulator'
+
+function install(app: App) {
+ app.use(NutUI)
+}
+
+export default { install }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { Locale } from '@nutui/nutui'
+import zhCN from '@nutui/nutui/dist/packages/locale/lang/zh-CN'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+Locale.use('zh-CN', zhCN)
+</script>
+
+<template>
+ <NutConfigProvider :theme="settingsStore.currentColorScheme" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </NutConfigProvider>
+</template>专业版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import NutUI from '@nutui/nutui'
+import '@nutui/nutui/dist/style.css'
+import '@nutui/touch-emulator'
+import zhCN from '@nutui/nutui/dist/packages/locale/lang/zh-CN'
+import enUS from '@nutui/nutui/dist/packages/locale/lang/en-US'
+
+function install(app: App) {
+ app.use(NutUI)
+}
+
+// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
+const locales: Record<string, any> = {
+ 'zh-cn': zhCN,
+ 'en-us': enUS,
+}
+
+export default { install }
+export { locales }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { Locale } from 'vant'
+import { locales } from './index'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.lang, () => {
+ Locale.use(settingsStore.lang, locales[settingsStore.lang])
+})
+</script>
+
+<template>
+ <NutConfigProvider :theme="settingsStore.currentColorScheme" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </NutConfigProvider>
+</template>修改登录页
由于登录页使用了 Vant 组件，并且删除会导致框架无法正常使用，所以此处需要开发者自行修改或者重新制作登录页，或者也可以参考下方示例中已经修改好的登录页。
卸载
sh
# 卸载 Vant
+pnpm remove vant @vant/touch-emulator完成
至此，你已经将框架中的 Vant 组件库替换为 NutUI 组件库，并且可以开始使用 NutUI 进行业务开发了。
示例
如果对上述的步骤还有不清楚的地方，可以访问此仓库查看示例源码，以及此链接查看示例网站。
Skip to content
替换为 Varlet
由于框架默认使用的是 Vant 组件库，并且演示源码中大量示例也使用了 Vant，如果你需要使用 Varlet，请拉取框架源码分支，或者到 Github Releases 页面下载框架源码压缩包。
专业版用户也同样，请到专业版仓库下载框架源码。
安装
sh
# 安装依赖
+pnpm install
+
+# 安装 NutUI
+pnpm add @varlet/ui @varlet/touch-emulator代码调整
基础版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import Varlet from '@varlet/ui'
+import '@varlet/ui/es/style'
+import '@varlet/touch-emulator'
+
+function install(app: App) {
+ app.use(Varlet)
+}
+
+export default { install }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { Locale, StyleProvider, Themes } from '@varlet/ui'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.currentColorScheme, (val) => {
+ if (val === 'light') {
+ StyleProvider(null)
+ }
+ else {
+ StyleProvider(Themes.dark)
+ }
+})
+</script>
+
+<template>
+ <VarLocaleProvider locale="zh-CN" :messages="Locale.zhCN" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </VarLocaleProvider>
+</template>专业版
整体修改 /src/ui-provider/index.ts 文件
ts
import type { App } from 'vue'
+import Varlet, { Locale } from '@varlet/ui'
+import '@varlet/ui/es/style'
+import '@varlet/touch-emulator'
+import enUS from 'vant/es/locale/lang/en-US'
+import zhCN from 'vant/es/locale/lang/zh-CN'
+
+function install(app: App) {
+ app.use(Varlet)
+}
+
+// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
+const locales: Record<string, any> = {
+ 'zh-cn': Locale.zhCN,
+ 'en-us': Locale.enUS,
+}
+
+export default { install }
+export { locales }整体修改 /src/ui-provider/index.vue 文件
vue
<script setup lang="ts">
+import { locales } from './index'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+watch(() => settingsStore.currentColorScheme, (val) => {
+ if (val === 'light') {
+ StyleProvider(null)
+ }
+ else {
+ StyleProvider(Themes.dark)
+ }
+})
+</script>
+
+<template>
+ <VarLocaleProvider :locale="settingsStore.lang" :messages="locales[settingsStore.lang]" class="min-h-vh supports-[(min-height:100dvh)]:min-h-dvh">
+ <slot />
+ </VarLocaleProvider>
+</template>修改登录页
由于登录页使用了 Vant 组件，并且删除会导致框架无法正常使用，所以此处需要开发者自行修改或者重新制作登录页，或者也可以参考下方示例中已经修改好的登录页。
卸载
sh
# 卸载 Vant
+pnpm remove vant @vant/touch-emulator完成
至此，你已经将框架中的 Vant 组件库替换为 Varlet 组件库，并且可以开始使用 Varlet 进行业务开发了。
示例
如果对上述的步骤还有不清楚的地方，可以访问此仓库查看示例源码，以及此链接查看示例网站。
Skip to content
路由
框架无需手动配置路由，而是基于文件系统自动生成路由，意味着开发者只需在 /src/views/ 目录下创建文件，就会根据文件目录自动生成对应的路由，该能力由 unplugin-vue-router 提供。
配置规范
如果对 unplugin-vue-router 的规范还不了解，建议先阅读官方文档。框架在此基础上，预设了一些规范。以下面的目录结构为例：
目录结构 路由地址 路由 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通过上面的示例，可以看出几个规范：
- 文件夹或文件名开头为
_的不会生成路由 - 所有
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文件内设置并覆盖
注意
默认生成的路由可能为嵌套路由，但为了用一套 API 统一处理页面缓存，框架会将所有路由均处理成一级路由，并在 App.vue 里处理缓存逻辑。意味着如果同时创建 /src/views/users/index.vue 和 /src/views/users.vue 组件，/src/views/users/index.vue 不会在 /src/views/users.vue 的 <RouterView> 中呈现。
这也意味着 /src/views/users/detail/[id].vue 和 /src/views/users/detail.[id].vue 生成的路由和行为都是一样的，只有路由 name 有区别。
这与 unplugin-vue-router 默认行为略有不同。
definePage()
通过 definePage() 可以修改路由对象或添加路由元信息：
vue
<script setup lang="ts">
+definePage({
+ name: 'example',
+ meta: {
+ title: '示例'
+ },
+})
+</script>
+
+<template>
+ <!-- ... -->
+</template>警告
不能在 definePage() 中使用变量，因为其传递的参数会在构建时提取并从 <script setup> 中删除。
路由元信息
title
| 类型 | 默认值 | 说明 |
|---|---|---|
| string | / | 浏览器及页面中展示的标题 |
支持设置 i18n 对应的 key 值，详细可阅读《国际化》。
cache
| 类型 | 默认值 | 说明 |
|---|---|---|
| boolean / string / string[] | / | 是否对该页面进行缓存 |
boolean设置为 true 时，该路由页面会被一直缓存string设置某个目标路由的 name ，表示当前路由页面跳转到设置的 name 对应的路由页面时，则将当前路由页面进行缓存，否则不缓存string[]，可设置一个目标路由的 name 数组
当类型为 string 或 string[] 时，可以更精细的去控制页面缓存的逻辑。例如从列表页进入详情页，则需要将列表页进行缓存；而从列表页进入其它页面，则无需将列表页进行缓存。详细可阅读《页面缓存》。
noCache
| 类型 | 默认值 | 说明 |
|---|---|---|
| string / string[] | / | 是否对该页面清除缓存，需设置 cache 才会生效 |
string设置某个目标路由的 name ，表示当前路由页面跳转到设置的 name 对应的路由页面时，则将当前路由页面清除缓存，否则不清除缓存string[]，可设置一个目标路由的 name 数组
该属性通常搭配 cache: true 使用，可以更精细的去控制页面取消缓存的逻辑。详细可阅读《页面缓存》。
auth
| 类型 | 默认值 | 说明 |
|---|---|---|
| boolean / string / string[] | / | 该路由访问权限 |
boolean设置为true时，该路由仅登录用户可访问string设置某个权限的名称，表示当前路由仅允许具备该权限的用户可访问string[]设置多个权限的名称数组，表示当前路由允许具备其中一个权限的用户可访问
当类型为 string 或 string[] 时，可以更精细的去控制页面权限，不具备访问权限则会显示 403 页面，详细可阅读《权限 - 路由权限》。
Skip to content
开始
准备工作完成后，在源码文件夹根目录下依次执行以下命令：
sh
# 安装依赖
+# 注意，必须使用 pnpm 安装依赖，请勿使用 npm 或 yarn 安装依赖
+pnpm install
+
+# 运行
+pnpm run dev运行成功后，会自动访问页面，默认地址为 http://localhost:9000
报错
如果无法正常安装依赖，可能是因为 npm 默认源无法访问，可以尝试执行 pnpm config set registry https://registry.npmmirror.com/ 切换为国内 npmmirror 镜像源（也可以使用 nrm 一键切换源），然后删除根目录下 /node_modules 文件夹并重新安装依赖。
如果依旧无法运行（基本不太可能），可尝试删除根目录下 /node_modules 文件夹与 pnpm-lock.yaml 文件后，再删除 package.json 中 "preinstall": "npx only-allow pnpm" 这句脚本，最后使用 npm / yarn 或其他包管理工具进行安装依赖。但需要清楚一点，这样操作后，将无法与官方环境锁定的依赖包版本保持一致，可能会出现无法预知的问题，非必要情况下，请勿使用该方案。
Skip to content
私有 Storage 数据 专业版
由于 localStorage 和 sessionStorage 的同源策略，同一域名下的 storage 数据会共享。如果你恰好需要在同一域名下部署两套(及以上)系统，不可避免会出现 storage 数据冲突，框架提供了一个 storage 类来解决这个问题。
解决同源 storage 数据冲突的方式就是增加前缀区分，首先需要在应用配置中设置一个唯一且不重名的前缀：
ts
const globalSettings: Settings.all = {
+ app: {
+ storagePrefix: 'fm_',
+ },
+}然后在需要使用到 storage 的地方引入：
ts
import storage from '@/utils/storage'这个类封装了 setItem() ，getItem() ，removeItem() ，clear() 方法，同时还增加了一个 has() 方法用来判断对象是否存在：
ts
// localStorage
+storage.local.has(key)
+storage.local.get(key)
+storage.local.set(key, value)
+storage.local.remove(key)
+storage.local.clear()
+
+// sessionStorage
+storage.session.has(key)
+storage.session.get(key)
+storage.session.set(key, value)
+storage.session.remove(key)
+storage.session.clear()注意
由于 localStorage 有容量上限，一般为 5M ，如果一同域名下部署两套系统，意味着两套系统共享 5M 容量，所以不建议在同一域名部署太多套系统，避免出现 localStorage 不够用的情况。
Skip to content
全局状态管理
TIP
Pinia 已正式成为 Vue.js 官方状态库，如果你对 Pinia 还不熟悉，除了通过 Pinia 官网学习外，我还收集了一些文字/视频的介绍，可以帮助你快速上手。
全局状态文件存放在 /src/store/modules/ 目录下，请按模块进行区分。同时请保证文件名和文件内唯一ID保持一致，建议使用 pnpm new 指令进行创建。
例如新建一个 example.ts 的文件：
ts
const useExampleStore = defineStore(
+ // 唯一ID
+ 'example',
+ () => {
+ const someThing = ref(0)
+
+ return {
+ someThing,
+ }
+ },
+)
+
+export default useExampleStore使用方法：
ts
import useExampleStore from '@/store/modules/example'
+const exampleStore = useExampleStore()
+
+exampleStore.someThing Skip to content
图标
框架提供了三种使用图标的方式，你可以根据自己的使用需求自行选择。
自定义图标
你可以去阿里巴巴矢量图标库，或者其它支持下载 SVG 图标文件的网站，又或者是设计师绘制的 SVG 文件，将准备好的 SVG 图标文件放到 /src/assets/icons/ 目录下，然后在页面中就可以通过 SvgIcon 组件使用了，name 就是 svg 的文件名。
vue
<!-- /src/assets/icons/example.svg -->
+<SvgIcon name="example" />Iconify 图标
介绍
Iconify 提供 100+ 套图标集，有 100,000+ 个图标可以免费使用。
除了可以在 Iconify 官网上查找搜需要的图标，你还可以在 Icônes 网站 上查找，这是一个基于 Iconify 的在线图标搜索网站，它比 Iconify 官网的操作更直观。
Unocss 方案
说明
Unocss 方案采用了 CSS 去处理图标的展示，框架大部分核心模块里采用的是这种方式，如果你对其中的技术细节感兴趣，可以阅读这篇 Unocss 作者的《聊聊纯 CSS 图标》这篇文章。
框架已经做好了所有配置，使用方式也极为简单，你只需进入 Iconify 官网 上查找 Iconify 提供的所有图标，然后点击需要使用的图标，复制图标名称，在任意原生 HTML 标签上通过设置 class ，格式为 i-{集合名}:{图标名}，例如：
vue
<div class="i-ep:arrow-right" />
+<i class="i-ep:search" />当然你同样也可以通过 SvgIcon 使用它。
vue
<SvgIcon name="i-ep:arrow-right" />在使用 Unocss 图标时，需要注意以下两点：
图标字符串不支持拼接
vue<!-- 这样不会生效 --> +<SvgIcon :name="'i-ep' + ':search'" />图标字符串不支持异步返回
vue<!-- 这样不会生效 --> +<!-- 假设 name 是异步请求返回的数据，name 为 i-ep:search --> +<SvgIcon :name="name" />
如果确实有以上需求，你可以使用 Iconify 原生提供的方案。
Iconify 原生方案
说明
框架保留了 Iconify 官方提供的使用方式，格式为 {集合名}:{图标名} 。
vue
<script setup>
+import { Icon } from '@iconify/vue'
+</script>
+
+<template>
+ <Icon icon="ep:arrow-right" />
+</template>当然这么使用并没有很方便，依旧还是需要手动导入一个 Icon 组件。如果你也觉得麻烦的话，那么你可以使用 SvgIcon 组件来展示，框架已经帮你做好的所有处理。
vue
<SvgIcon name="ep:arrow-right" /> Skip to content
主题
框架主题
主题配色存放在 /themes/index.ts 文件中，基础版和专业版内容略有不同。
基础版
ts
import { hex2rgba } from '@unocss/preset-mini/utils'
+
+export const lightTheme = {
+ // 颜色主题
+ 'color-scheme': 'light',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
+ '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+ // 主体
+ '--g-bg': '#f2f2f2',
+ '--g-container-bg': '#fff',
+ '--g-border-color': '#DCDFE6',
+ // 导航栏
+ '--g-navbar-bg': '#fff',
+ '--g-navbar-color': '#0f0f0f',
+ // 标签栏
+ '--g-tabbar-bg': '#fff',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#0f0f0f',
+}
+
+export const darkTheme = {
+ // 颜色主题
+ 'color-scheme': 'dark',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#e5e5e5')!.join(' '),
+ '--ui-text': hex2rgba('#242b33')!.join(' '),
+ // 主体
+ '--g-bg': '#0a0a0a',
+ '--g-container-bg': '#141414',
+ '--g-border-color': '#15191e',
+ // 导航栏
+ '--g-navbar-bg': '#141414',
+ '--g-navbar-color': '#e5e5e5',
+ // 标签栏
+ '--g-tabbar-bg': '#141414',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#e5e5e5',
+}专业版
与基础版不同，专业版默认提供了 12 款主题，明亮和暗黑模式各 6 款，并且主题在运行时共存，可实现动态切换。
ts
import { hex2rgba } from '@unocss/preset-mini/utils'
+
+export default {
+ light: {
+ // 颜色主题
+ 'color-scheme': 'light',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
+ '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+ // 主体
+ '--g-bg': '#f2f2f2',
+ '--g-container-bg': '#fff',
+ '--g-border-color': '#DCDFE6',
+ // 导航栏
+ '--g-navbar-bg': '#fff',
+ '--g-navbar-color': '#0f0f0f',
+ // 标签栏
+ '--g-tabbar-bg': '#fff',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#0f0f0f',
+ },
+ ...
+ dark: {
+ // 颜色主题
+ 'color-scheme': 'dark',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#e5e5e5')!.join(' '),
+ '--ui-text': hex2rgba('#242b33')!.join(' '),
+ // 主体
+ '--g-bg': '#0a0a0a',
+ '--g-container-bg': '#141414',
+ '--g-border-color': '#15191e',
+ // 导航栏
+ '--g-navbar-bg': '#141414',
+ '--g-navbar-color': '#e5e5e5',
+ // 标签栏
+ '--g-tabbar-bg': '#141414',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#e5e5e5',
+ },
+ ...
+}
如果框架提供的主题风格满足不了你的需求，你还可以自定义新的主题。
ts
import { hex2rgba } from '@unocss/preset-mini/utils'
+
+export default {
+ newThemeName: { // 主题名称
+ // 颜色主题
+ 'color-scheme': 'light',
+ // 内置 UI
+ '--ui-primary': hex2rgba('#0f0f0f')!.join(' '),
+ '--ui-text': hex2rgba('#fcfcfc')!.join(' '),
+ // 主体
+ '--g-bg': '#f2f2f2',
+ '--g-container-bg': '#fff',
+ '--g-border-color': '#DCDFE6',
+ // 导航栏
+ '--g-navbar-bg': '#fff',
+ '--g-navbar-color': '#0f0f0f',
+ // 标签栏
+ '--g-tabbar-bg': '#fff',
+ '--g-tabbar-color': '#6f6f6f',
+ '--g-tabbar-active-color': '#0f0f0f',
+ },
+}最后在应用配置中使用该主题：
ts
const globalSettings: Settings.all = {
+ app: {
+ // 如果主题是暗黑模式下使用的，则 darkTheme: 'newThemeName'
+ lightTheme: 'newThemeName',
+ },
+}颜色方案
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ /**
+ * 留空跟随系统
+ * light 明亮模式
+ * dark 暗黑模式
+ */
+ colorScheme: '',
+ },
+}哀悼模式 v0.2.0 新增
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enableMournMode: true,
+ },
+}色弱模式 v0.2.0 新增
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enableColorAmblyopiaMode: true,
+ },
+}开发注意
如果只在明亮或暗黑模式中，选择其中一种模式进行业务开发，那没有什么需要注意的，你可以按照以往的开发习惯进行开发，这也是框架推荐的方式。
但如果需要让用户可以自己选择明亮或暗黑模式，或者是根据浏览器主题来判断是使用明亮还是暗黑模式。这时候开发则需要注意，业务页面里使用到的颜色将不能写成固定值（例如 color 、background-color 、border-color 、box-shadow 等有涉及到颜色的属性），因为同一个色值是无法顾及到明亮和暗黑两种模式的。
这时候我们建议使用 UnoCSS 进行样式编写，例如 text-dark dark-text-white 、bg-green dark-bg-red 。如果你不习惯使用 UnoCSS ，那也可以使用下面这种方法，在页面中去自定义一些颜色。
scss
div {
+ color: #000;
+
+ [data-theme="dark"] & {
+ color: #fff;
+ }
+}最后分享一篇关于暗黑模式的文章《教你巧用UI设计中的暗黑模式——Dark Mode》，希望帮助你更好地在暗黑模式下开发出优秀的页面。
Skip to content
框架更新
首先明确一点，Fantastic-mobile 无法像 npm 的插件一样更新，不仅我们的框架如此，其实大部分 H5 开发框架都是如此。
因为本质上这类框架其实是一个初始框架，开发者会根据自身需求去修改，然后基于业务开展业务代码编写。所以一旦下载开始使用，基本是无法更新的，你在哪个时间点开始使用，项目就固定在什么版本了。
那有没有解决办法么？其实也有，参考如下：
- 在基于 Fantastic-mobile 做项目开发时尽量避免框架自带模块或组件的改动，或者改动地方做一个文档记录，可以清楚知道改动了哪些，这样当你需要进行新版本更新时，按照之前记录的文档可以有个大致的迁移方案，而业务代码则可以直接拷贝过去。
- 我们尽量在提交代码时标明每次提交改动的变更记录说明，这样你可以选择性的更新部分新代码到项目中，也就是局部更新。这种方案也是作者在公司内部项目经常使用的，因为大部分项目是无需全局更新到新版的，只需将必要的一些新特性或 bug 修复同步到原有项目中即可。
- 使用文件比较工具，例如 Beyond Compare，这款工具可以直接对比文件夹，可以清晰的列出文件夹内所有文件的差异，可以协助升级工作开展。
+
+
+
+
\ No newline at end of file
diff --git a/guide/vue3-composition-api.html b/guide/vue3-composition-api.html
new file mode 100644
index 0000000..1bdbea9
--- /dev/null
+++ b/guide/vue3-composition-api.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
Skip to content
使用 Composition API 开发
Composition API 是 Vue3 全新提供的一种语法，对于从 Vue2 就在使用的开发者，如果一时半会没办法立马上手 Composition API ，你依旧可以在项目中使用 Options API 做开发。当然我们更建议你使用 Composition API 进行开发，它比 Options API 更灵活且易读。
使用
如果你还不熟悉 Composition API ，那么我们建议你阅读 Vue3 官方文档了解；如果你已经熟悉 Composition API ，那么我们建议你在开发的时候，使用 <script setup> 语法糖进行开发，它将提高很多开发上的效率。
同时得益于 unplugin-auto-import 的特性，在 <script setup> 里无需导入相关 API ，该依赖会自动导入（默认支持 vue，vue-router 和 pinia ）。
vue
<script setup lang="ts">
+// 无需手动 import 相关 API
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+const route = useRoute()
+const router = useRouter()
+console.log(route.path)
+router.push('/dashboard')
+</script>组件 name
<script setup> 可以和普通的 <script> 一起使用，所以可以这样定义组件 name：
vue
<script lang="ts">
+export default {
+ name: 'componentName',
+}
+</script>
+
+<script setup lang="ts">
+...
+</script>Vue 3.3 开始，你可以使用 defineOptions 在 <script setup> 里定义组件的 name：
vue
<script setup lang="ts">
+defineOptions({
+ name: 'ComponentName',
+})
+</script> Skip to content
页面水印 专业版
使用
在应用配置中设置：
ts
const globalSettings: Settings.all = {
+ app: {
+ enableWatermark: true,
+ },
+}效果如下：
设置水印内容
在 /src/store/modules/watermark.ts 中可修改水印展示内容，以及其他水印相关配置。
水印同时支持动态更新，示例：
vue
<script setup lang="ts">
+import useWatermarkStore from '@/store/modules/watermark'
+
+const watermarkStore = useWatermarkStore()
+
+watermarkStore.update({
+ text: '设置水印',
+ // 更多设置项请查看 /src/utils/watermark.ts 中 settingsType 类型定义
+})
+
+// 重置水印，恢复到默认设置
+watermarkStore.update()
+</script> Skip to content
为什么选择我们 ?
是模板，更是框架
Fantastic-mobile 与市面上大部分移动端 H5 模板不同之处在于，它针对通用场景提供了一套标准且易于扩展设计，通过简单的配置即可轻松完成页面的设计和布局。同时也提供了一些常用的组件和工具函数，让开发者可以更加专注于业务逻辑的开发。
这也是为什么我们自称为「框架」，而不仅仅是「模板」的原因。
如果你在使用过 Fantastic-mobile 后，认为它还达不到你心中框架的标准，也请告诉我们有哪些可改进的地方，因为我们最终的目标是希望 Fantastic-mobile 能够成为你的得力助手，让你的开发工作高效且愉快。
为什么不是它们 ?
以上 3 款模板都很成熟，也是社区内人气较高的项目。但正如上面所说，Fantastic-mobile 从一开始就不打算仅仅只是做一个 H5 模版。所以，如果你正在做技术选型，不如先了解一下我们这款框架，再决定是否要继续使用其他 H5 模板。
并且你不需要担心技术栈上的差异，因为 Vue3 整体的生态已经非常成熟，几乎形成了一套社区默认的技术栈。也就是说，以上 3 款模板和 Fantastic-mobile 使用到的技术栈，几乎是一样的。
用一句简单的话概括就是：人无我有，人有我优。
Skip to content