release: 1.5.1 docs

.vitepress/config.js

@@ -3,7 +3,7 @@
  * @type {import('vitepress').UserConfig}
  */
 module.exports = {
-  base: (process.argv[3] && process.argv[3] === '--gitee') ? '/vue-element-plus-admin-doc/' : '/',
+  base: process.argv[3] && process.argv[3] === '--gitee' ? '/vue-element-plus-admin-doc/' : '/',
   title: 'vue-element-plus-admin',
   lang: 'zh-CN',
   description: '一套基于vue3、element-plus、typesScript4、vite2的后台集成方案',
@@ -97,6 +97,10 @@ function createNav() {
           text: 'useWatermark',
           link: '/hooks/useWatermark',
         },
+        {
+          text: 'useCrudSchemas',
+          link: '/hooks/useCrudSchemas',
+        },
       ],
     },
     {
@@ -146,6 +150,10 @@ function createSidebar() {
         text: 'useWatermark',
         link: '/hooks/useWatermark',
       },
+      {
+        text: 'useCrudSchemas',
+        link: '/hooks/useCrudSchemas',
+      },
     ],
     '/components/': [
       {

components/form.md

@@ -86,7 +86,7 @@ const { register, elFormRef, methods } = useForm(props)
 | delSchema | 用于删除表单结构 | (field: string) => void |
 | addSchema | 用于新增表单结构 | (formSchema: FormSchema, index?: number) => void |
 | setSchema | 用于编辑表单结构 | (schemaProps: FormSetPropsType[]) => void |
-| getFormData | 用于获取表单数据 | <T = Recordable | undefined>() => Promise<T> |
+| getFormData | 用于获取表单数据 | `<T = Recordable>() => Promise<T>` |
 
 ## Form 属性<span id="Form"></span>
 
@@ -114,6 +114,7 @@ const { register, elFormRef, methods } = useForm(props)
 | component | 需要渲染的表单子组件 | `ComponentName` | - | - |
 | value | 表单子组件初始值 | `FormValueType` | - | - |
 | hidden | 表单子组件是否隐藏 | `boolean` | - | - |
+| api | 加载 options 方法，只在 `useCrudSchema` 有效 | `<T = any>() => AxiosPromise<T>` | - | - |
 
 ### ComponentProps<span id="ComponentProps"></span>
 

components/table.md

@@ -96,13 +96,7 @@ const columns = reactive<TableColumn[]>([
   }
 ])
 
-const { register, tableObject, methods } = useTable<
-  {
-    total: number
-    list: TableData[]
-  },
-  TableData
->({
+const { register, tableObject, methods } = useTable<TableData>({
   getListApi: getTableListApi,
   response: {
     list: 'list',
@@ -142,14 +136,12 @@ interface Response {
   list: TableData[]
 }
 
-const { register, tableObject, methods, elTableRef } = useTable<Response, TableData>(props: UseTableConfig)
+const { register, tableObject, methods, elTableRef } = useTable<TableData>(props: UseTableConfig)
 ```
 
-**useTable** 可以传入自定义类型 `<T, K, L extends AxiosConfig = AxiosConfig>`
+**useTable** 可以传入自定义类型 `<T>`
 
-- T 代表接口返回的数据类型。
-- K 代表接口返回的表格数据类型。
-- L 代表接口请求参数的类型。
+- T 代表接口返回的表格数据类型。
 
 在实际需求中，可能会遇到分页参数命名不同的情况，请自行在 [src/hooks/web/useTable.ts](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/hooks/web/useTable.ts) 进行替换，搜索 `pageSize` 及 `pageIndex`。
 

dep/dark.md

@@ -2,4 +2,10 @@
 
 ## 介绍
 
-需要等 `element-plus` 支持后才会推出黑暗主题，目前项目上的暗黑模式都是不可用的。
+默认第一次进入系统，会检测浏览器默认的主题
+
+## 切换主题
+
+如果需要切换 `明亮` 或者 `暗黑` ，可以执行 `appStore.setIsDark(val)` 进行主题的切换。
+
+具体例子可以查看登录页的右上角主题切换。

guide/mock.md

@@ -103,39 +103,26 @@ export { config }
 import { useAxios } from '@/hooks/web/useAxios'
 import type { TableData } from './types'
 
-const { request } = useAxios()
+const request = useAxios()
 
-export const getTableListApi = ({ params }: AxiosConfig) => {
-  return request<{
-    total: number
-    list: TableData[]
-  }>({ url: '/example/list', method: 'get', params })
+export const getTableListApi = async (params: any): Promise<IResponse> => {
+  const res = await request.get({ url: '/example/list', params })
+  return res && res.data
 }
 
-export const saveTableApi = ({ data }: AxiosConfig<Recordable, TableData>) => {
-  return request({ url: '/example/save', method: 'post', data })
+export const saveTableApi = async (data: Partial<TableData>): Promise<IResponse> => {
+  const res = await request.post({ url: '/example/save', data })
+  return res && res.data
 }
 
-export const getTableDetApi = ({
-  params
-}: AxiosConfig<
-  {
-    id: string
-  },
-  Recordable
->) => {
-  return request<TableData>({ url: '/example/detail', method: 'get', params })
+export const getTableDetApi = async (id: string): Promise<IResponse<TableData>> => {
+  const res = await request.get({ url: '/example/detail', params: { id } })
+  return res && res.data
 }
 
-export const delTableListApi = ({
-  data
-}: AxiosConfig<
-  Recordable,
-  {
-    id: string[] | number[]
-  }
->) => {
-  return request({ url: '/example/delete', method: 'post', data })
+export const delTableListApi = async (ids: string[] | number[]): Promise<IResponse> => {
+  const res = await request.post({ url: '/example/delete', data: { ids } })
+  return res && res.data
 }
 
 ```

hooks/useCrudSchemas.md

@@ -0,0 +1,179 @@
+# useCrudSchemas
+
+统一生成 `Search` 、 `Form` 、 `Descriptions` 、 `Table` 组件所需要的数据结构。
+
+由于以上四个组件都需要 `Sechema` 或者 `columns` 的字段，如果每个组件都写一遍的话，会造成大量重复代码，所以提供 `useCrudSchemas` 来进行统一的数据生成。
+
+useCrudSchemas 位于 [src/hooks/web/useCrudSchemas.ts](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/hooks/web/useCrudSchemas.ts)
+
+## 用法
+
+::: tip
+
+如果不需要某个字段，如 `formSchema` 不需要 `field` 为 `index` 的字段，可以使用 `form: { show: false }` 进行过滤，其他组件同理。
+
+:::
+
+如果想看更复杂点的例子，请[在线预览](https://element-plus-admin.cn/#/hooks/useCrudSchemas)
+
+```vue
+<script setup lang="ts">
+import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    field: 'index',
+    label: t('tableDemo.index'),
+    type: 'index',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  },
+  {
+    field: 'title',
+    label: t('tableDemo.title'),
+    search: {
+      show: true
+    },
+    form: {
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
+    }
+  },
+  {
+    field: 'author',
+    label: t('tableDemo.author')
+  },
+  {
+    field: 'display_time',
+    label: t('tableDemo.displayTime'),
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'datetime',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
+    }
+  },
+  {
+    field: 'importance',
+    label: t('tableDemo.importance'),
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return h(
+        ElTag,
+        {
+          type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
+        },
+        () =>
+          cellValue === 1
+            ? t('tableDemo.important')
+            : cellValue === 2
+            ? t('tableDemo.good')
+            : t('tableDemo.commonly')
+      )
+    },
+    form: {
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '重要',
+            value: 3
+          },
+          {
+            label: '良好',
+            value: 2
+          },
+          {
+            label: '一般',
+            value: 1
+          }
+        ]
+      }
+    }
+  },
+  {
+    field: 'pageviews',
+    label: t('tableDemo.pageviews'),
+    form: {
+      component: 'InputNumber',
+      value: 0
+    }
+  },
+  {
+    field: 'content',
+    label: t('exampleDemo.content'),
+    table: {
+      show: false
+    },
+    form: {
+      component: 'Editor',
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
+    }
+  },
+  {
+    field: 'action',
+    width: '260px',
+    label: t('tableDemo.action'),
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  }
+])
+
+const { allSchemas } = useCrudSchemas(crudSchemas)
+</script>
+
+```
+
+### 参数介绍
+
+```ts
+const { allSchemas } = useCrudSchemas(crudSchemas)
+```
+
+**allSchemas**
+
+`allSchemas` 存放着四个组件所需要的数据结果
+
+
+***allSchemas.fromSchema***
+
+`Form` 组件的 `Sechema`
+
+***allSchemas.searchSchema***
+
+`Search` 组件的 `Sechema`
+
+***allSchemas.detailSchema***
+
+`Descriptions` 组件的 `Sechema`
+
+***allSchemas.tableColumns***
+
+`Table` 组件的 `columns`
+
+## CrudSchema
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| search | 用于设置 `searchSchema` | `CrudSearchParams` | - | - |
+| table | 用于设置 `tableColumns` | `CrudTableParams` | - | - |
+| form | 用于设置 `fromSchema` | `CrudFormParams` | - | - |
+| detail | 用于设置 `DescriptionsSchema` | `CrudDescriptionsParams` | - | - |
+| children | 如果是 `Table` 组件，则可能会有多表头的情况存在 | `CrudSchema[]` | - | - |