Merge branch 'develop'

package.json

@@ -27,80 +27,80 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.2.1",
-    "@vueuse/core": "^9.0.2",
+    "@vueuse/core": "^9.1.0",
     "@wangeditor/editor": "^5.1.14",
     "@wangeditor/editor-for-vue": "^5.1.10",
-    "@zxcvbn-ts/core": "^2.0.3",
+    "@zxcvbn-ts/core": "^2.0.4",
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "echarts": "^5.3.3",
     "echarts-wordcloud": "^2.0.0",
-    "element-plus": "2.2.11",
+    "element-plus": "2.2.13",
     "intro.js": "^6.0.0",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.17",
+    "pinia": "^2.0.18",
     "pinia-plugin-persist": "^1.0.0",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "url": "^0.11.0",
     "vue": "3.2.37",
-    "vue-i18n": "9.1.10",
+    "vue-i18n": "9.2.2",
     "vue-router": "^4.1.3",
-    "vue-types": "^4.2.0",
+    "vue-types": "^4.2.1",
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
-    "@iconify/json": "^2.1.85",
-    "@intlify/vite-plugin-vue-i18n": "^5.0.1",
-    "@purge-icons/generated": "^0.8.1",
+    "@iconify/json": "^2.1.91",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
+    "@purge-icons/generated": "^0.9.0",
     "@types/intro.js": "^5.1.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.6.2",
+    "@types/node": "^18.7.2",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "@vitejs/plugin-vue": "^3.0.3",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "autoprefixer": "^10.4.8",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-define-config": "^1.5.1",
+    "eslint-define-config": "^1.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.1",
     "less": "^4.1.3",
     "lint-staged": "^13.0.3",
     "plop": "^3.1.1",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.77.2",
-    "stylelint": "^14.9.1",
+    "rollup": "^2.77.3",
+    "stylelint": "^14.10.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended": "^8.0.0",
-    "stylelint-config-standard": "^26.0.0",
+    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-standard": "^27.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "4.7.4",
-    "unplugin-vue-define-options": "^0.6.2",
-    "vite": "3.0.4",
-    "vite-plugin-eslint": "^1.7.0",
+    "unplugin-vue-macros": "^0.8.3",
+    "vite": "3.0.7",
+    "vite-plugin-eslint": "^1.8.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-purge-icons": "^0.8.2",
-    "vite-plugin-style-import": "1.4.1",
+    "vite-plugin-purge-icons": "^0.9.0",
+    "vite-plugin-style-import": "2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.7",
-    "vue-tsc": "^0.39.2",
+    "vue-tsc": "^0.40.1",
     "windicss": "^3.5.6",
     "windicss-analysis": "^0.3.5"
   },

src/api/common/index.ts

@@ -1,15 +1,11 @@
-import { useAxios } from '@/hooks/web/useAxios'
-
-const request = useAxios()
+import request from '@/config/axios'
 
 // 获取所有字典
-export const getDictApi = async (): Promise<IResponse> => {
-  const res = await request.get({ url: '/dict/list' })
-  return res && res.data
+export const getDictApi = (): Promise<IResponse> => {
+  return request.get({ url: '/dict/list' })
 }
 
 // 模拟获取某个字典
 export const getDictOneApi = async (): Promise<IResponse> => {
-  const res = await request.get({ url: '/dict/one' })
-  return res && res.data
+  return request.get({ url: '/dict/one' })
 }

src/api/dashboard/analysis/index.ts

@@ -1,4 +1,4 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type {
   AnalysisTotalTypes,
   UserAccessSource,
@@ -6,24 +6,18 @@ import type {
   MonthlySales
 } from './types'
 
-const request = useAxios()
-
-export const getCountApi = async (): Promise<IResponse<AnalysisTotalTypes[]>> => {
-  const res = await request.get({ url: '/analysis/total' })
-  return res && res.data
+export const getCountApi = (): Promise<IResponse<AnalysisTotalTypes[]>> => {
+  return request.get({ url: '/analysis/total' })
 }
 
-export const getUserAccessSourceApi = async (): Promise<IResponse<UserAccessSource[]>> => {
-  const res = await request.get({ url: '/analysis/userAccessSource' })
-  return res && res.data
+export const getUserAccessSourceApi = (): Promise<IResponse<UserAccessSource[]>> => {
+  return request.get({ url: '/analysis/userAccessSource' })
 }
 
-export const getWeeklyUserActivityApi = async (): Promise<IResponse<WeeklyUserActivity[]>> => {
-  const res = await request.get({ url: '/analysis/weeklyUserActivity' })
-  return res && res.data
+export const getWeeklyUserActivityApi = (): Promise<IResponse<WeeklyUserActivity[]>> => {
+  return request.get({ url: '/analysis/weeklyUserActivity' })
 }
 
-export const getMonthlySalesApi = async (): Promise<IResponse<MonthlySales[]>> => {
-  const res = await request.get({ url: '/analysis/monthlySales' })
-  return res && res.data
+export const getMonthlySalesApi = (): Promise<IResponse<MonthlySales[]>> => {
+  return request.get({ url: '/analysis/monthlySales' })
 }

src/api/dashboard/workplace/index.ts

@@ -1,29 +1,22 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type { WorkplaceTotal, Project, Dynamic, Team, RadarData } from './types'
 
-const request = useAxios()
-
-export const getCountApi = async (): Promise<IResponse<WorkplaceTotal>> => {
-  const res = await request.get({ url: '/workplace/total' })
-  return res && res.data
+export const getCountApi = (): Promise<IResponse<WorkplaceTotal>> => {
+  return request.get({ url: '/workplace/total' })
 }
 
-export const getProjectApi = async (): Promise<IResponse<Project>> => {
-  const res = await request.get({ url: '/workplace/project' })
-  return res && res.data
+export const getProjectApi = (): Promise<IResponse<Project>> => {
+  return request.get({ url: '/workplace/project' })
 }
 
-export const getDynamicApi = async (): Promise<IResponse<Dynamic[]>> => {
-  const res = await request.get({ url: '/workplace/dynamic' })
-  return res && res.data
+export const getDynamicApi = (): Promise<IResponse<Dynamic[]>> => {
+  return request.get({ url: '/workplace/dynamic' })
 }
 
-export const getTeamApi = async (): Promise<IResponse<Team[]>> => {
-  const res = await request.get({ url: '/workplace/team' })
-  return res && res.data
+export const getTeamApi = (): Promise<IResponse<Team[]>> => {
+  return request.get({ url: '/workplace/team' })
 }
 
-export const getRadarApi = async (): Promise<IResponse<RadarData[]>> => {
-  const res = await request.get({ url: '/workplace/radar' })
-  return res && res.data
+export const getRadarApi = (): Promise<IResponse<RadarData[]>> => {
+  return request.get({ url: '/workplace/radar' })
 }

src/api/login/index.ts

@@ -1,20 +1,16 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type { UserType } from './types'
 
 interface RoleParams {
   roleName: string
 }
 
-const request = useAxios()
-
-export const loginApi = async (data: UserType): Promise<IResponse<UserType>> => {
-  const res = await request.post({ url: '/user/login', data })
-  return res && res.data
+export const loginApi = (data: UserType): Promise<IResponse<UserType>> => {
+  return request.post({ url: '/user/login', data })
 }
 
-export const loginOutApi = async (): Promise<IResponse> => {
-  const res = await request.get({ url: '/user/loginOut' })
-  return res && res.data
+export const loginOutApi = (): Promise<IResponse> => {
+  return request.get({ url: '/user/loginOut' })
 }
 
 export const getUserListApi = ({ params }: AxiosConfig) => {
@@ -24,14 +20,12 @@ export const getUserListApi = ({ params }: AxiosConfig) => {
   }>({ url: '/user/list', params })
 }
 
-export const getAdminRoleApi = async (
+export const getAdminRoleApi = (
   params: RoleParams
 ): Promise<IResponse<AppCustomRouteRecordRaw[]>> => {
-  const res = await request.get({ url: '/role/list', params })
-  return res && res.data
+  return request.get({ url: '/role/list', params })
 }
 
-export const getTestRoleApi = async (params: RoleParams): Promise<IResponse<string[]>> => {
-  const res = await request.get({ url: '/role/list', params })
-  return res && res.data
+export const getTestRoleApi = (params: RoleParams): Promise<IResponse<string[]>> => {
+  return request.get({ url: '/role/list', params })
 }

src/api/table/index.ts

@@ -1,24 +1,18 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type { TableData } from './types'
 
-const request = useAxios()
-
-export const getTableListApi = async (params: any): Promise<IResponse> => {
-  const res = await request.get({ url: '/example/list', params })
-  return res && res.data
+export const getTableListApi = (params: any): Promise<IResponse> => {
+  return request.get({ url: '/example/list', params })
 }
 
-export const saveTableApi = async (data: Partial<TableData>): Promise<IResponse> => {
-  const res = await request.post({ url: '/example/save', data })
-  return res && res.data
+export const saveTableApi = (data: Partial<TableData>): Promise<IResponse> => {
+  return request.post({ url: '/example/save', data })
 }
 
-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 getTableDetApi = (id: string): Promise<IResponse<TableData>> => {
+  return request.get({ url: '/example/detail', params: { id } })
 }
 
-export const delTableListApi = async (ids: string[] | number[]): Promise<IResponse> => {
-  const res = await request.post({ url: '/example/delete', data: { ids } })
-  return res && res.data
+export const delTableListApi = (ids: string[] | number[]): Promise<IResponse> => {
+  return request.post({ url: '/example/delete', data: { ids } })
 }

src/components/Footer/src/Footer.vue

@@ -15,7 +15,7 @@ const title = computed(() => appStore.getTitle)
 <template>
   <div
     :class="prefixCls"
-    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
+    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-content-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
   >
     Copyright ©2021-present {{ title }}
   </div>

src/components/Table/index.ts

@@ -1,9 +1,11 @@
 import Table from './src/Table.vue'
+import { ElTable } from 'element-plus'
 
 export interface TableExpose {
   setProps: (props: Recordable) => void
   setColumn: (columnProps: TableSetPropsType[]) => void
   selections: Recordable[]
+  elTableRef: ComponentRef<typeof ElTable>
 }
 
 export { Table }

src/components/Table/src/Table.vue

@@ -99,7 +99,8 @@ export default defineComponent({
     expose({
       setProps,
       setColumn,
-      selections
+      selections,
+      elTableRef
     })
 
     const pagination = computed(() => {

src/config/axios/index.ts

@@ -1,69 +1,33 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+import { service } from './service'
 
-import { ElMessage } from 'element-plus'
+import { config } from './config'
 
-import qs from 'qs'
+const { default_headers } = config
 
-import { config } from '@/config/axios/config'
-
-const { result_code, base_url } = config
-
-export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
-
-// 创建axios实例
-const service: AxiosInstance = axios.create({
-  baseURL: PATH_URL, // api 的 base_url
-  timeout: config.request_timeout // 请求超时时间
+const request = (option: any) => {
+  const { url, method, params, data, headersType, responseType } = option
+  return service({
+    url: url,
+    method,
+    params,
+    data,
+    responseType: responseType,
+    headers: {
+      'Content-Type': headersType || default_headers
+    }
   })
-
-// request拦截器
-service.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
-    if (
-      config.method === 'post' &&
-      config!.headers!['Content-Type'] === 'application/x-www-form-urlencoded'
-    ) {
-      config.data = qs.stringify(config.data)
 }
-    // 添加token，可根据实际业务修改
-    // config!.headers!['Authorization'] = 'something'
-    // get参数编码
-    if (config.method === 'get' && config.params) {
-      let url = config.url as string
-      url += '?'
-      const keys = Object.keys(config.params)
-      for (const key of keys) {
-        if (config.params[key] !== void 0 && config.params[key] !== null) {
-          url += `${key}=${encodeURIComponent(config.params[key])}&`
-        }
-      }
-      url = url.substring(0, url.length - 1)
-      config.params = {}
-      config.url = url
-    }
-    return config
+export default {
+  get: <T = any>(option: any) => {
+    return request({ method: 'get', ...option }) as unknown as T
   },
-  (error: AxiosError) => {
-    // Do something with request error
-    console.log(error) // for debug
-    Promise.reject(error)
-  }
-)
-
-// response 拦截器
-service.interceptors.response.use(
-  (response: AxiosResponse<Recordable>) => {
-    if (response.data.code === result_code) {
-      return response
-    } else {
-      ElMessage.error(response.data.message)
-    }
+  post: <T = any>(option: any) => {
+    return request({ method: 'post', ...option }) as unknown as T
   },
-  (error: AxiosError) => {
-    console.log('err' + error) // for debug
-    ElMessage.error(error.message)
-    return Promise.reject(error)
+  delete: <T = any>(option: any) => {
+    return request({ method: 'delete', ...option }) as unknown as T
+  },
+  put: <T = any>(option: any) => {
+    return request({ method: 'put', ...option }) as unknown as T
+  }
 }
-)
-
-export { service }

src/config/axios/service.ts

@@ -0,0 +1,70 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+
+import qs from 'qs'
+
+import { config } from './config'
+
+import { ElMessage } from 'element-plus'
+
+const { result_code, base_url } = config
+
+export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
+
+// 创建axios实例
+const service: AxiosInstance = axios.create({
+  baseURL: PATH_URL, // api 的 base_url
+  timeout: config.request_timeout // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    if (
+      config.method === 'post' &&
+      (config.headers as any)['Content-Type'] === 'application/x-www-form-urlencoded'
+    ) {
+      config.data = qs.stringify(config.data)
+    }
+    // get参数编码
+    if (config.method === 'get' && config.params) {
+      let url = config.url as string
+      url += '?'
+      const keys = Object.keys(config.params)
+      for (const key of keys) {
+        if (config.params[key] !== void 0 && config.params[key] !== null) {
+          url += `${key}=${encodeURIComponent(config.params[key])}&`
+        }
+      }
+      url = url.substring(0, url.length - 1)
+      config.params = {}
+      config.url = url
+    }
+    return config
+  },
+  (error: AxiosError) => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  (response: AxiosResponse<any>) => {
+    if (response.config.responseType === 'blob') {
+      // 如果是文件流，直接过
+      return response
+    } else if (response.data.code === result_code) {
+      return response.data
+    } else {
+      ElMessage.error(response.data.message)
+    }
+  },
+  (error: AxiosError) => {
+    console.log('err' + error) // for debug
+    ElMessage.error(error.message)
+    return Promise.reject(error)
+  }
+)
+
+export { service }

src/hooks/web/useAxios.ts

@@ -1,46 +0,0 @@
-import { service } from '@/config/axios'
-
-import { AxiosPromise } from 'axios'
-
-import { config } from '@/config/axios/config'
-
-const { default_headers } = config
-
-const request = (option: AxiosConfig) => {
-  const { url, method, params, data, headersType, responseType } = option
-  return service({
-    url: url,
-    method,
-    params,
-    data,
-    responseType: responseType,
-    headers: {
-      'Content-Type': headersType || default_headers
-    }
-  })
-}
-
-function getFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'get', ...option })
-}
-
-function postFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'post', ...option })
-}
-
-function deleteFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'delete', ...option })
-}
-
-function putFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'put', ...option })
-}
-
-export const useAxios = () => {
-  return {
-    get: getFn,
-    post: postFn,
-    delete: deleteFn,
-    put: putFn
-  }
-}

src/hooks/web/useI18n.ts

@@ -41,7 +41,7 @@ export const useI18n = (
   const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
     if (!key) return ''
     if (!key.includes('.') && !namespace) return key
-    return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
+    return (t as any)(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
   }
   return {
     ...methods,

src/hooks/web/useTable.ts

@@ -89,7 +89,7 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
 
   const register = (ref: typeof Table & TableExpose, elRef: ComponentRef<typeof ElTable>) => {
     tableRef.value = ref
-    elTableRef.value = elRef
+    elTableRef.value = unref(elRef)
   }
 
   const getTable = async () => {

src/layout/Layout.vue

@@ -70,7 +70,7 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-layout';
 
 .@{prefix-cls} {
-  background-color: var(--app-contnet-bg-color);
+  background-color: var(--app-content-bg-color);
   :deep(.@{elNamespace}-scrollbar__view) {
     height: 100% !important;
   }

src/layout/components/AppView.vue

@@ -22,7 +22,7 @@ const getCaches = computed((): string[] => {
 <template>
   <section
     :class="[
-      'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)] dark:bg-[var(--el-bg-color)]',
+      'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
       {
         '!min-h-[calc(100%-var(--app-footer-height))]':
           fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,

src/locales/en.ts

@@ -377,7 +377,8 @@ export default {
     showExpandedRows: 'Show expanded rows',
     hiddenExpandedRows: 'Hidden expanded rows',
     changeTitle: 'Change title',
-    header: 'Header'
+    header: 'Header',
+    selectAllNone: 'Select all / none'
   },
   richText: {
     richText: 'Rich text',

src/locales/zh-CN.ts

@@ -374,7 +374,8 @@ export default {
     showExpandedRows: '显示展开行',
     hiddenExpandedRows: '隐藏展开行',
     changeTitle: '修改标题',
-    header: '头部'
+    header: '头部',
+    selectAllNone: '全选/全不选'
   },
   richText: {
     richText: '富文本',

src/styles/var.css

@@ -59,7 +59,7 @@
 
   --app-content-padding: 20px;
 
-  --app-contnet-bg-color: #f5f7f9;
+  --app-content-bg-color: #f5f7f9;
 
   --app-footer-height: 50px;
 

src/views/Authorization/Role.vue

@@ -59,12 +59,12 @@ const getTableList = async (params?: Params) => {
       pageSize: 10
     }
   })
-    .catch(() => {})
-    .finally(() => {
-      loading.value = false
-    })
+  // .catch(() => {})
+  // .finally(() => {
+  //   loading.value = false
+  // })
   if (res) {
-    tableDataList.value = res.data.list
+    tableDataList.value = res.list
   }
 }
 

src/views/Authorization/User.vue

@@ -59,12 +59,12 @@ const getTableList = async (params?: Params) => {
       pageSize: 10
     }
   })
-    .catch(() => {})
-    .finally(() => {
-      loading.value = false
-    })
+  // .catch(() => {})
+  // .finally(() => {
+  //   loading.value = false
+  // })
   if (res) {
-    tableDataList.value = res.data.list
+    tableDataList.value = res.list
   }
 }
 

src/views/Components/Table/RefTable.vue

@@ -125,6 +125,10 @@ const showExpandedRows = (show: boolean) => {
     expand: show
   })
 }
+
+const selectAllNone = () => {
+  unref(tableRef)?.elTableRef?.toggleAllSelection()
+}
 </script>
 
 <template>
@@ -146,6 +150,8 @@ const showExpandedRows = (show: boolean) => {
 
     <ElButton @click="showExpandedRows(true)">{{ t('tableDemo.showExpandedRows') }}</ElButton>
     <ElButton @click="showExpandedRows(false)">{{ t('tableDemo.hiddenExpandedRows') }}</ElButton>
+
+    <ElButton @click="selectAllNone">{{ t('tableDemo.selectAllNone') }}</ElButton>
   </ContentWrap>
   <ContentWrap :title="`RefTable ${t('tableDemo.example')}`">
     <Table

src/views/Components/Table/UseTableDemo.vue

@@ -8,7 +8,7 @@ import { ref, h, reactive, unref } from 'vue'
 import { ElTag, ElButton } from 'element-plus'
 import { useTable } from '@/hooks/web/useTable'
 
-const { register, tableObject, methods } = useTable<TableData>({
+const { register, tableObject, methods, elTableRef } = useTable<TableData>({
   getListApi: getTableListApi,
   response: {
     list: 'list',
@@ -124,6 +124,10 @@ const showExpandedRows = (show: boolean) => {
     expand: show
   })
 }
+
+const selectAllNone = () => {
+  unref(elTableRef)?.toggleAllSelection()
+}
 </script>
 
 <template>
@@ -145,6 +149,8 @@ const showExpandedRows = (show: boolean) => {
 
     <ElButton @click="showExpandedRows(true)">{{ t('tableDemo.showExpandedRows') }}</ElButton>
     <ElButton @click="showExpandedRows(false)">{{ t('tableDemo.hiddenExpandedRows') }}</ElButton>
+
+    <ElButton @click="selectAllNone">{{ t('tableDemo.selectAllNone') }}</ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseTable ${t('tableDemo.example')}`">
     <Table

tsconfig.json

@@ -30,7 +30,7 @@
       "@types/intro.js",
       "@types/qrcode",
       "vite-plugin-svg-icons/client",
-      "unplugin-vue-define-options"
+      "unplugin-vue-macros/macros-global"
     ],
     "typeRoots": ["./node_modules/@types/", "./types"]
   },

vite.config.ts

@@ -6,12 +6,12 @@ import WindiCSS from 'vite-plugin-windicss'
 import VueJsx from '@vitejs/plugin-vue-jsx'
 import EslintPlugin from 'vite-plugin-eslint'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
-import styleImport, { ElementPlusResolve } from 'vite-plugin-style-import'
+import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import { viteMockServe } from 'vite-plugin-mock'
-import DefineOptions from 'unplugin-vue-define-options/vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
+import VueMarcos from 'unplugin-vue-macros/vite'
 
 // https://vitejs.dev/config/
 const root = process.cwd()
@@ -34,7 +34,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       Vue(),
       VueJsx(),
       WindiCSS(),
-      styleImport({
+      createStyleImportPlugin({
         resolves: [ElementPlusResolve()],
         libs: [{
           libraryName: 'element-plus',
@@ -70,7 +70,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           setupProdMockServer()
           `
       }),
-      DefineOptions(),
+      VueMarcos(),
       createHtmlPlugin({
         inject: {
           data: {