docs: add useCrudSchemas demo

.vitepress/config.js

@@ -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/': [
       {

guide/mock.md

@@ -103,39 +103,25 @@ 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<{
+export const getTableListApi = ({ params }) => {
+  return request.get<{
     total: number
     list: TableData[]
-  }>({ url: '/example/list', method: 'get', params })
+  }>({ url: '/example/list', params })
 }
 
-export const saveTableApi = ({ data }: AxiosConfig<Recordable, TableData>) => {
-  return request({ url: '/example/save', method: 'post', data })
+export const saveTableApi = ({ data }) => {
+  return request.post<TableData>({ url: '/example/save', data })
 }
 
-export const getTableDetApi = ({
-  params
-}: AxiosConfig<
-  {
-    id: string
-  },
-  Recordable
->) => {
-  return request<TableData>({ url: '/example/detail', method: 'get', params })
+export const getTableDetApi = ({ params }) => {
+  return request.get<TableData>({ url: '/example/detail', params })
 }
 
-export const delTableListApi = ({
-  data
-}: AxiosConfig<
-  Recordable,
-  {
-    id: string[] | number[]
-  }
->) => {
-  return request({ url: '/example/delete', method: 'post', data })
+export const delTableListApi = ({ data }) => {
+  return request.post({ url: '/example/delete', data })
 }
 
 ```

hooks/useCrudSchemas.md

@@ -0,0 +1,124 @@
+# useCrudSchemas
+
+(1.3.0新增)
+
+统一生成 Table 、Search、Form、Descriptions 组件所需要的结构数据。
+
+useCrudSchemas 位于 [src/hooks/web/useCrudSchemas.ts](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/hooks/web/useCrudSchemas.ts)
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+
+const { CrudSchema, useCrudSchemas } = 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')
+    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>
+
+```
+
+`allSchemas` 中就包含了四个组件所需的结构数据。