feat: 前端高级阶段文档

.vitepress/src/zh/sidebars.ts

@@ -132,10 +132,6 @@ const sidebar:DefaultTheme.Sidebar = {
           text: '服务提供器',
           link: '/zh/front/high/provider'
         },
-        {
-          text: '插件',
-          link: '/zh/front/high/plugin'
-        },
         {
           text: 'Hooks',
           link: '/zh/front/high/hooks'
@@ -144,6 +140,10 @@ const sidebar:DefaultTheme.Sidebar = {
           text: '常用Store',
           link: '/zh/front/high/store'
         },
+        {
+          text: '插件系统',
+          link: '/zh/front/high/plugins'
+        },
         {
           text: 'JSX和TSX开发',
           link: '/zh/front/high/tsx'

docs/zh/front/advanced/permission.md

@@ -1 +1,127 @@
-# 权限
+# 权限
+
+
+## 概括
+:::tip 权限概括
+路由页面可否访问是基于后端返回的菜单确定的，而静态路由暂无权限控制（后面会增加**前端**对静态路由的控制）。而前端目前主要控制了
+`内容` 是否可显示`(v-show)`以及渲染`(v-if)`，内容包括了：
+- 页面的元素
+- 页面的组件
+- 按钮...等等
+:::
+
+## 细粒度介绍及使用
+
+目前权限分为三种细粒度：
+- 基于权限码（菜单的 `name` 字段）
+- 基于角色码（角色的 `code` 字段）
+- 基于用户名（用户的 `username` 字段）
+
+::: info
+三种细粒度各有 `助手函数` 和 `指令` 来控制内容的渲染，其中基于权限码的还有 **组件** 使用的方式来控制是否渲染内容。
+:::
+
+### 业务逻辑使用
+```vue
+<script setup lang="ts">
+// 基于权限码检查的助手函数
+import hasAuth from '@/utils/permission/hasAuth'
+// 基于角色码检查的助手函数
+import hasRole from '@/utils/permission/hasRole'
+// 基于用户名检查的助手函数
+import hasUser from '@/utils/permission/hasUser'
+  
+// 权限判断
+if (hasAuth('permission') || hasAuth(['log', 'log:index'])) {
+  // 权限通过
+}
+
+// 角色判断
+if (hasRole('SuperAdmin') || hasRole(['ceo', 'cfo'])) {
+  // 角色通过
+}
+
+// 用户名判断
+if (hasUser('admin') || hasRole(['zhangSan', 'liSi'])) {
+  // 用户通过
+}
+</script>
+```
+
+### API使用方式
+```vue
+<script setup lang="ts">
+// 基于权限码检查的助手函数
+import hasAuth from '@/utils/permission/hasAuth'
+// 基于角色码检查的助手函数
+import hasRole from '@/utils/permission/hasRole'
+// 基于用户名检查的助手函数
+import hasUser from '@/utils/permission/hasUser'
+</script>
+
+<template>
+  <div>
+    <div v-if="hasAuth('permission') || hasAuth(['log', 'log:index'])">
+      权限验证通过，可以查看
+    </div>
+    
+    <div v-if="hasRole('SuperAdmin') || hasRole(['ceo', 'cfo'])">
+      角色验证通过，可以查看
+    </div>
+
+    <div v-if="hasUser('admin') || hasRole(['zhangSan', 'liSi'])">
+      用户验证通过，可以查看
+    </div>
+  </div>
+</template>
+```
+
+### 指令使用方式
+
+其实同样支持传入字符串，为了简单演示，就省略字符串传入模式了.
+
+```vue
+<template>
+  <div>
+    <div v-auth="['log', 'log:index']">
+      权限验证通过，可以查看
+    </div>
+    
+    <div v-role="['ceo', 'cfo']">
+      角色验证通过，可以查看
+    </div>
+
+    <div v-user="['zhangSan', 'liSi']">
+      用户验证通过，可以查看
+    </div>
+  </div>
+</template>
+```
+::: tip 提示
+`hasAuth`、`hasRole`、`hasUser` 函数还有第二个参数，用于是否连带**路由里的权限**是否检查。
+:::
+
+### 权限组件使用
+
+相比其他方式，组件对大范围的内容控制更友好和方便，因为用组件包裹着需要显示的内容，再传入需要检查的权限即可。
+而且组件还有针对没有权限的提供了插槽，可以自定义提示无权限的可看到的内容。
+
+:::info 组件位置
+**`src/components/ma-auth/index.vue`**
+
+组件已全局引入，不需要再手动引入。
+:::
+
+```vue
+<template>
+  <!-- 拥有用户和菜单管理权限的可看到内容 -->
+  <ma-auth :value="['permission:user', 'permission:menu']">
+    权限通过，可以看到内容
+    
+    <!-- 没有权限提示内容插槽 -->
+    <template #notAuth>
+      对不起，你无权浏览此内容
+    </template>
+  </ma-auth>
+</template>
+```

docs/zh/front/high/hooks.md

@@ -1 +1,25 @@
 # Hooks
+
+## useCache()
+
+## useDialog()
+
+## useEcharts()
+
+## useForm()
+
+## useTable()
+
+## useLocalTrans()
+
+## useMessage()
+
+## useTabCollection()
+
+## useImageViewer()
+
+## useResourcePicker()
+
+## useWatermark()
+
+## useThemeColor()

docs/zh/front/high/i18n.md

@@ -1 +1,103 @@
 # 国际化配置
+
+前端的项目内已经集成了 `Vue i18n`，在请求时会自动根据当前语言向后端请求对应语言的文案，后端部分不在这里讲解有兴趣可查看源码。
+
+前端目前支持 `中文、繁体中文、英文`，三种语言包。
+
+## 插件推荐
+
+- 如果你使用 `vscode` ，建议安装 [i18n Ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)
+- 如果你使用 `webStorm` ，建议安装 [Easy i18n](https://plugins.jetbrains.com/plugin/16316-easy-i18n)
+
+以上插件能很好帮助你完善语言包。
+
+## 语言包定义
+
+::: tip 必看
+`Vue i18n` 支持两种语言包类型，**全局语言包** 和 **局部语言包**。其中局部语言包也叫本文件内的语言包，只用于 `vue` 扩展名的文件内，
+全局的语言包支持 `vue`，`tsx`，`jsx` 类型文件。
+
+语言包定义使用的 `yaml` 格式语法，比 `json` 写起来要舒服很多
+
+如果需要扩展其他语言，需要注意格式，不然会找不到定义的语言包。格式为：`语言标识符[本语言名称]`
+- en[English].yaml
+- zh_CN[简体中文].yaml
+- zh_TW[繁體中文].yaml
+:::
+
+### 全局语言包
+全局语言包存放分为三种形式，它们都会被系统自动扫描引入
+- `src/locales` 目录下
+- `src/modules/<模块名>/locales` 目录下
+- `src/plugins/<插件名>/locales` 目录下
+
+::: danger 注意事项
+**模块** 和 **插件** 下的全局语言包要和 `src/locales` 下的文件名一致，不然控制台会出现找不到 `key` 的警告信息（很烦这个）。 
+:::
+
+### 局部语言包
+项目内的所有 `vue` 文件都支持局部语言包，只需要在 `vue` 文件内定义 `i18n` 标签即可，如下：
+```vue
+<i18n lang="yaml">
+zh_CN:
+  hello: 你好
+zh_TW:
+  hello: 你好
+en:
+  hello: hello
+</i18n>
+
+<script setup lang="ts">
+</script>
+
+<template>
+</template>
+
+<style>
+</style>
+```
+
+## 使用
+
+首先，完全可以自己手动引入 `Vue i18n` ，拿到 `i18n` 对象后，就可以使用 `i18n` 对象的 `t` 方法来获取文案了，如下：
+```ts
+import { i18n } from 'vue-i18n'
+
+// 全局模式
+const { t } = i18n()
+
+// 局部模式
+const { t } = i18n({
+  inheritLocale: true,
+  useScope: 'local',
+})
+
+```
+
+但是，前端项目内已经封装好了获取 `i18n` 对象的方法，只需要在 `setup` 函数内使用 `useTrans()` 方法即可，如下：
+
+```ts
+// 已自动引入 useTrans()
+const trans = useTrans()
+
+// useTrans() 会返回一个对象，里面包含了全局和局部两个对象：
+// trans.globalTrans 和 trans.localTrans
+
+trans.globalTrans('global.title')
+trans.localTrans('title')
+
+// 也可直接使用，默认先找全局的 key，如果找不到的话，会找局部的 key
+useTrans('title')
+```
+
+除此之外，还有一个 `useLocalTrans()` 这个方法，它只会返回局部的 `i18n` 对象，并且需要手动引入，如下：
+```ts
+import useLocalTrans from '@/hooks/useLocalTrans'
+
+// 只会寻找本文件内的 key
+const t = useLocalTrans()
+
+// 两种使用方式
+t('title')
+useLocalTrans('title')
+```