From f3593c453a8b8d5eb8cbd0ed5402132b027461b9 Mon Sep 17 00:00:00 2001
From: walkInALine <478207401@qq.com>
Date: Mon, 18 Dec 2023 15:15:32 +0800
Subject: [PATCH 01/19] =?UTF-8?q?fix:=20useClipboard=E5=9C=A8ip=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80=E4=B8=8B=E4=B8=8D=E8=83=BD=E4=BD=BF=E7=94=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Setting/src/Setting.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
index 8d2cbba..3581761 100644
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@@ -174,7 +174,8 @@ const copyConfig = async () => {
         // 头部边框颜色
         topToolBorderColor: '${appStore.getTheme.topToolBorderColor}'
       }
-    `
+    `,
+    legacy: true
   })
   if (!isSupported) {
     ElMessage.error(t('setting.copyFailed'))

From 1c63757d55076d15ffdf21d647de393ca3c6b0be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=B4=A2=E5=AF=8C?= <1501583478@qq.com>
Date: Mon, 18 Dec 2023 16:47:21 +0800
Subject: [PATCH 02/19] =?UTF-8?q?fix:=20Menu=E8=8F=9C=E5=8D=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=98=BE=E7=A4=BAbug=EF=BC=8CrenderMenuItem=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E7=9A=84=E6=95=B0=E7=BB=84=E5=AD=98=E5=9C=A8undefined?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=AF=BC=E8=87=B4=E7=9C=81=E7=95=A5?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Menu/src/components/useRenderMenuItem.tsx          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx
index d7fede2..3a33922 100644
--- a/src/components/Menu/src/components/useRenderMenuItem.tsx
+++ b/src/components/Menu/src/components/useRenderMenuItem.tsx
@@ -12,9 +12,10 @@ export const useRenderMenuItem = (
   menuMode: 'vertical' | 'horizontal'
 ) => {
   const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
-    return routers.map((v) => {
-      const meta = v.meta ?? {}
-      if (!meta.hidden) {
+    return routers
+      .filter((v) => !v.meta?.hidden)
+      .map((v) => {
+        const meta = v.meta ?? {}
         const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
         const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
 
@@ -48,8 +49,7 @@ export const useRenderMenuItem = (
             </ElSubMenu>
           )
         }
-      }
-    })
+      })
   }
 
   return {

From bf2cd720d0e5801603848a0b1520a928443ac549 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 19 Dec 2023 09:04:07 +0800
Subject: [PATCH 03/19] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Drequest=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E8=87=AA=E5=AE=9A=E4=B9=89headers=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/axios/config.ts | 4 ++--
 types/global.d.ts   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/axios/config.ts b/src/axios/config.ts
index d1c0a77..efdae3d 100644
--- a/src/axios/config.ts
+++ b/src/axios/config.ts
@@ -1,4 +1,4 @@
-import { AxiosResponse, AxiosRequestHeaders, InternalAxiosRequestConfig } from './types'
+import { AxiosResponse, InternalAxiosRequestConfig } from './types'
 import { ElMessage } from 'element-plus'
 import qs from 'qs'
 import { SUCCESS_CODE } from '@/constants'
@@ -7,7 +7,7 @@ import { useUserStoreWithOut } from '@/store/modules/user'
 const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {
   if (
     config.method === 'post' &&
-    (config.headers as AxiosRequestHeaders)['Content-Type'] === 'application/x-www-form-urlencoded'
+    config.headers['Content-Type'] === 'application/x-www-form-urlencoded'
   ) {
     config.data = qs.stringify(config.data)
   }
diff --git a/types/global.d.ts b/types/global.d.ts
index 595eb64..bef1d71 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue'
-import { AxiosRequestHeaders } from 'axios'
+import { RawAxiosRequestHeaders } from 'axios'
 declare global {
   declare interface Fn<T = any> {
     (...arg: T[]): T
@@ -40,7 +40,7 @@ declare global {
     data?: any
     url?: string
     method?: AxiosMethod
-    headers?: AxiosRequestHeaders
+    headers?: RawAxiosRequestHeaders
     responseType?: AxiosResponseType
   }
 

From 747c26fbcce208a109d1a719cca042ccab55dcc9 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 19 Dec 2023 15:47:19 +0800
Subject: [PATCH 04/19] =?UTF-8?q?wip:=20=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 .../Table/src/components/ColumnSetting.vue    |  39 ++++++
 .../Table/src/components/TableActions.vue     | 111 ++++++++++--------
 src/locales/en.ts                             |   4 +-
 src/locales/zh-CN.ts                          |   3 +-
 src/views/Components/Table/UseTableDemo.vue   |  64 +++++-----
 6 files changed, 139 insertions(+), 83 deletions(-)
 create mode 100644 src/components/Table/src/components/ColumnSetting.vue

diff --git a/package.json b/package.json
index 5e9e63c..14c3d45 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "qs": "^6.11.2",
     "url": "^0.11.3",
     "vue": "3.3.10",
+    "vue-draggable-plus": "^0.3.2",
     "vue-i18n": "9.8.0",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.2.5",
diff --git a/src/components/Table/src/components/ColumnSetting.vue b/src/components/Table/src/components/ColumnSetting.vue
new file mode 100644
index 0000000..41cdd68
--- /dev/null
+++ b/src/components/Table/src/components/ColumnSetting.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ElDrawer } from 'element-plus'
+import { TableColumn } from '../types'
+import { PropType, ref, watch, unref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+const modelValue = defineModel<boolean>()
+
+const oldColumns = ref<TableColumn[]>()
+
+const settingColumns = ref<TableColumn[]>()
+
+const props = defineProps({
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    default: () => []
+  }
+})
+
+watch(
+  () => props.columns,
+  (columns) => {
+    if (!unref(oldColumns)) {
+      oldColumns.value = cloneDeep(columns?.filter((item) => item.field !== 'expand'))
+    }
+    if (!unref(settingColumns)) {
+      settingColumns.value = cloneDeep(columns?.filter((item) => item.field !== 'expand'))
+      console.log(settingColumns.value)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <ElDrawer v-model="modelValue" title="列设置"> djdjjddjdjd </ElDrawer>
+</template>
diff --git a/src/components/Table/src/components/TableActions.vue b/src/components/Table/src/components/TableActions.vue
index 3a1856f..3d96423 100644
--- a/src/components/Table/src/components/TableActions.vue
+++ b/src/components/Table/src/components/TableActions.vue
@@ -1,10 +1,11 @@
 <script lang="tsx">
-import { defineComponent, unref, computed, PropType } from 'vue'
-import { ElTooltip, ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
+import { defineComponent, unref, computed, PropType, ref } from 'vue'
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
 import { Icon } from '@/components/Icon'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useAppStore } from '@/store/modules/app'
 import { TableColumn } from '../types'
+import ColumnSetting from './ColumnSetting.vue'
 
 const appStore = useAppStore()
 const sizeMap = computed(() => appStore.sizeMap)
@@ -13,6 +14,9 @@ const { t } = useI18n()
 
 export default defineComponent({
   name: 'TableActions',
+  components: {
+    ColumnSetting
+  },
   props: {
     columns: {
       type: Array as PropType<TableColumn[]>,
@@ -20,7 +24,9 @@ export default defineComponent({
     }
   },
   emits: ['refresh', 'changSize'],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
+    const showSetting = ref(false)
+
     const refresh = () => {
       emit('refresh')
     }
@@ -29,54 +35,67 @@ export default defineComponent({
       emit('changSize', size)
     }
 
+    const showColumnSetting = () => {
+      showSetting.value = true
+    }
+
     return () => (
       <>
         <div class="text-right h-28px flex items-center justify-end">
-          <ElTooltip content={t('common.refresh')} placement="top">
-            <span onClick={refresh}>
-              <Icon
-                icon="ant-design:sync-outlined"
-                class="cursor-pointer"
-                hover-color="var(--el-color-primary)"
-              />
-            </span>
-          </ElTooltip>
+          <div title="刷新" class="w-30px h-20px flex items-center justify-end" onClick={refresh}>
+            <Icon
+              icon="ant-design:sync-outlined"
+              class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
+            />
+          </div>
 
-          <ElTooltip content={t('common.size')} placement="top">
-            <ElDropdown trigger="click" onCommand={changSize}>
-              {{
-                default: () => {
-                  return (
-                    <span>
-                      <Icon
-                        icon="ant-design:column-height-outlined"
-                        class="cursor-pointer mr-8px ml-8px"
-                        hover-color="var(--el-color-primary)"
-                      />
-                    </span>
-                  )
-                },
-                dropdown: () => {
-                  return (
-                    <ElDropdownMenu>
-                      {{
-                        default: () => {
-                          return unref(sizeMap).map((v) => {
-                            return (
-                              <ElDropdownItem key={v} command={v}>
-                                {t(`size.${v}`)}
-                              </ElDropdownItem>
-                            )
-                          })
-                        }
-                      }}
-                    </ElDropdownMenu>
-                  )
-                }
-              }}
-            </ElDropdown>
-          </ElTooltip>
+          <ElDropdown trigger="click" onCommand={changSize}>
+            {{
+              default: () => {
+                return (
+                  <div title="尺寸" class="w-30px h-20px flex items-center justify-end">
+                    <Icon
+                      icon="ant-design:column-height-outlined"
+                      class="cursor-pointer"
+                      hover-color="var(--el-color-primary)"
+                    />
+                  </div>
+                )
+              },
+              dropdown: () => {
+                return (
+                  <ElDropdownMenu>
+                    {{
+                      default: () => {
+                        return unref(sizeMap).map((v) => {
+                          return (
+                            <ElDropdownItem key={v} command={v}>
+                              {t(`size.${v}`)}
+                            </ElDropdownItem>
+                          )
+                        })
+                      }
+                    }}
+                  </ElDropdownMenu>
+                )
+              }
+            }}
+          </ElDropdown>
+
+          <div
+            title="列设置"
+            class="w-30px h-20px flex items-center justify-end"
+            onClick={showColumnSetting}
+          >
+            <Icon
+              icon="ant-design:setting-outlined"
+              class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
+            />
+          </div>
         </div>
+        <ColumnSetting v-model={showSetting.value} columns={props.columns} />
       </>
     )
   }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 1c0ff3c..5ecc273 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -48,7 +48,9 @@ export default {
     lengthRange: 'The length should be between {min} and {max}',
     notSpace: 'Spaces are not allowed',
     notSpecialCharacters: 'Special characters are not allowed',
-    isEqual: 'The two are not equal'
+    isEqual: 'The two are not equal',
+    // 列设置
+    setting: 'Setting'
   },
   lock: {
     lockScreen: 'Lock screen',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 16c99c9..44ce19f 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -48,7 +48,8 @@ export default {
     lengthRange: '长度在 {min} 到 {max} 个字符',
     notSpace: '不能包含空格',
     notSpecialCharacters: '不能包含特殊字符',
-    isEqual: '两次输入不一致'
+    isEqual: '两次输入不一致',
+    setting: '设置'
   },
   lock: {
     lockScreen: '锁定屏幕',
diff --git a/src/views/Components/Table/UseTableDemo.vue b/src/views/Components/Table/UseTableDemo.vue
index 00ce635..da1a754 100644
--- a/src/views/Components/Table/UseTableDemo.vue
+++ b/src/views/Components/Table/UseTableDemo.vue
@@ -59,41 +59,35 @@ const columns = reactive<TableColumn[]>([
     type: 'index'
   },
   {
-    field: 'content',
-    label: t('tableDemo.header'),
-    children: [
-      {
-        field: 'title',
-        label: t('tableDemo.title')
-      },
-      {
-        field: 'author',
-        label: t('tableDemo.author')
-      },
-      {
-        field: 'display_time',
-        label: t('tableDemo.displayTime')
-      },
-      {
-        field: 'importance',
-        label: t('tableDemo.importance'),
-        formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
-          return (
-            <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
-              {cellValue === 1
-                ? t('tableDemo.important')
-                : cellValue === 2
-                  ? t('tableDemo.good')
-                  : t('tableDemo.commonly')}
-            </ElTag>
-          )
-        }
-      },
-      {
-        field: 'pageviews',
-        label: t('tableDemo.pageviews')
-      }
-    ]
+    field: 'title',
+    label: t('tableDemo.title')
+  },
+  {
+    field: 'author',
+    label: t('tableDemo.author')
+  },
+  {
+    field: 'display_time',
+    label: t('tableDemo.displayTime')
+  },
+  {
+    field: 'importance',
+    label: t('tableDemo.importance'),
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return (
+        <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
+          {cellValue === 1
+            ? t('tableDemo.important')
+            : cellValue === 2
+              ? t('tableDemo.good')
+              : t('tableDemo.commonly')}
+        </ElTag>
+      )
+    }
+  },
+  {
+    field: 'pageviews',
+    label: t('tableDemo.pageviews')
   },
   {
     field: 'action',

From 47c9b0bd4dd4d5a71d517545af92ba585a3e749b Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 19 Dec 2023 18:11:27 +0800
Subject: [PATCH 05/19] =?UTF-8?q?wip:=20=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/src/Table.vue            |   8 +-
 .../Table/src/components/ColumnSetting.vue    | 136 ++++++++++++++++--
 .../Table/src/components/TableActions.vue     |   8 +-
 src/constants/index.ts                        |   5 +
 src/views/Components/Table/UseTableDemo.vue   |   3 +-
 5 files changed, 143 insertions(+), 17 deletions(-)

diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index 4eec3fc..6c1c85a 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -275,6 +275,10 @@ export default defineComponent({
       setProps({ size })
     }
 
+    const confirmSetColumn = (columns: TableColumn[]) => {
+      setProps({ columns })
+    }
+
     expose({
       setProps,
       setColumn,
@@ -434,6 +438,7 @@ export default defineComponent({
               align={v.align || align}
               headerAlign={v.headerAlign || headerAlign}
               label={v.label}
+              fixed={v.fixed}
               width="65px"
             ></ElTableColumn>
           )
@@ -543,11 +548,12 @@ export default defineComponent({
             </div>
           ) : (
             <>
-              {unref(getProps).showAction ? (
+              {unref(getProps).showAction && !unref(getProps).customContent ? (
                 <TableActions
                   columns={unref(getProps).columns}
                   onChangSize={changSize}
                   onRefresh={refresh}
+                  onConfirm={confirmSetColumn}
                 />
               ) : null}
               <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
diff --git a/src/components/Table/src/components/ColumnSetting.vue b/src/components/Table/src/components/ColumnSetting.vue
index 41cdd68..8f8f047 100644
--- a/src/components/Table/src/components/ColumnSetting.vue
+++ b/src/components/Table/src/components/ColumnSetting.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import { ElDrawer } from 'element-plus'
+import {
+  ElDrawer,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElText,
+  ElRadioButton,
+  ElRadioGroup
+} from 'element-plus'
 import { TableColumn } from '../types'
 import { PropType, ref, watch, unref } from 'vue'
 import { cloneDeep } from 'lodash-es'
+import { DEFAULT_FILTER_COLUMN } from '@/constants'
 
 const modelValue = defineModel<boolean>()
 
-const oldColumns = ref<TableColumn[]>()
-
-const settingColumns = ref<TableColumn[]>()
-
 const props = defineProps({
   columns: {
     type: Array as PropType<TableColumn[]>,
@@ -17,16 +21,80 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['confirm'])
+
+const oldColumns = ref<TableColumn[]>()
+
+const settingColumns = ref<TableColumn[]>()
+
+// 存储不要的列
+const hiddenColumns = ref<TableColumn[]>([])
+
+const defaultCheckColumns = ref<string[]>([])
+const checkColumns = ref<string[]>([])
+
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const handleCheckAllChange = (val: boolean) => {
+  checkColumns.value = val ? unref(defaultCheckColumns) : []
+  isIndeterminate.value = false
+}
+
+const handleCheckedColumnsChange = (value: string[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === unref(defaultCheckColumns)?.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < unref(defaultCheckColumns)?.length
+}
+
+const confirm = () => {
+  const newColumns = cloneDeep(unref(settingColumns))?.map((item) => {
+    const fixed = unref(settingColumns)?.find((col) => col.field === item.field)?.fixed
+    item.hidden = !!!unref(checkColumns)?.includes(item.field)
+    item.fixed = fixed !== void 0 ? fixed : undefined
+    return item
+  })
+  emit('confirm', [...unref(hiddenColumns), ...(newColumns || [])])
+  modelValue.value = false
+}
+
+const restore = () => {
+  initColumns([...unref(hiddenColumns), ...(unref(oldColumns) || [])])
+}
+
+const initColumns = (columns: TableColumn[]) => {
+  const newColumns = cloneDeep(
+    columns?.filter((item) => {
+      item.fixed = item.fixed !== void 0 ? item.fixed : undefined
+      return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
+    })
+  )
+  console.log(newColumns)
+  if (!unref(oldColumns)) {
+    oldColumns.value = newColumns
+  }
+  settingColumns.value = newColumns
+
+  hiddenColumns.value = cloneDeep(
+    columns?.filter((item) => item.type && DEFAULT_FILTER_COLUMN.includes(item.type))
+  )
+
+  defaultCheckColumns.value = unref(settingColumns)?.map((item) => item.field) || []
+  checkColumns.value =
+    unref(settingColumns)
+      ?.filter((item) => !item.hidden)
+      ?.map((item) => item.field) || []
+
+  if (unref(checkColumns)?.length === unref(defaultCheckColumns)?.length) {
+    checkAll.value = true
+    isIndeterminate.value = false
+  }
+}
+
 watch(
   () => props.columns,
   (columns) => {
-    if (!unref(oldColumns)) {
-      oldColumns.value = cloneDeep(columns?.filter((item) => item.field !== 'expand'))
-    }
-    if (!unref(settingColumns)) {
-      settingColumns.value = cloneDeep(columns?.filter((item) => item.field !== 'expand'))
-      console.log(settingColumns.value)
-    }
+    console.log(columns)
+    initColumns(columns)
   },
   {
     immediate: true
@@ -35,5 +103,47 @@ watch(
 </script>
 
 <template>
-  <ElDrawer v-model="modelValue" title="列设置"> djdjjddjdjd </ElDrawer>
+  <ElDrawer v-model="modelValue" title="列设置" size="350px">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center justify-between">
+        <ElCheckbox
+          v-model="checkAll"
+          :indeterminate="isIndeterminate"
+          @change="handleCheckAllChange"
+        />
+        <ElText class="ml-8px!">{{ checkColumns.length }} / {{ settingColumns?.length }}</ElText>
+      </div>
+      <ElText>固定 / 排序</ElText>
+    </div>
+    <div v-if="settingColumns?.length">
+      <ElCheckboxGroup v-model="checkColumns" @change="handleCheckedColumnsChange">
+        <div
+          v-for="item in settingColumns"
+          :key="item.field"
+          class="flex items-center justify-between mt-12px"
+        >
+          <ElCheckbox :label="item.field">
+            {{ item.label }}
+          </ElCheckbox>
+          <ElRadioGroup size="small" v-model="item.fixed">
+            <ElRadioButton label="left">
+              <Icon icon="ep:arrow-left" />
+            </ElRadioButton>
+            <ElRadioButton :label="undefined">
+              <Icon icon="ep:close" />
+            </ElRadioButton>
+            <ElRadioButton label="right">
+              <Icon icon="ep:arrow-right" />
+            </ElRadioButton>
+          </ElRadioGroup>
+        </div>
+      </ElCheckboxGroup>
+    </div>
+    <template #footer>
+      <div>
+        <BaseButton @click="restore">还原</BaseButton>
+        <BaseButton type="primary" @click="confirm">确定</BaseButton>
+      </div>
+    </template>
+  </ElDrawer>
 </template>
diff --git a/src/components/Table/src/components/TableActions.vue b/src/components/Table/src/components/TableActions.vue
index 3d96423..2eaab32 100644
--- a/src/components/Table/src/components/TableActions.vue
+++ b/src/components/Table/src/components/TableActions.vue
@@ -23,7 +23,7 @@ export default defineComponent({
       default: () => []
     }
   },
-  emits: ['refresh', 'changSize'],
+  emits: ['refresh', 'changSize', 'confirm'],
   setup(props, { emit }) {
     const showSetting = ref(false)
 
@@ -35,6 +35,10 @@ export default defineComponent({
       emit('changSize', size)
     }
 
+    const confirm = (columns: TableColumn[]) => {
+      emit('confirm', columns)
+    }
+
     const showColumnSetting = () => {
       showSetting.value = true
     }
@@ -95,7 +99,7 @@ export default defineComponent({
             />
           </div>
         </div>
-        <ColumnSetting v-model={showSetting.value} columns={props.columns} />
+        <ColumnSetting v-model={showSetting.value} columns={props.columns} onConfirm={confirm} />
       </>
     )
   }
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 6f676aa..4dc2db2 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -22,3 +22,8 @@ export const NO_REDIRECT_WHITE_LIST = ['/login']
  * 不重置路由白名单
  */
 export const NO_RESET_WHITE_LIST = ['Redirect', 'Login', 'NoFind', 'Root']
+
+/**
+ * 表格默认过滤列设置字段
+ */
+export const DEFAULT_FILTER_COLUMN = ['expand', 'selection']
diff --git a/src/views/Components/Table/UseTableDemo.vue b/src/views/Components/Table/UseTableDemo.vue
index da1a754..7bcfb16 100644
--- a/src/views/Components/Table/UseTableDemo.vue
+++ b/src/views/Components/Table/UseTableDemo.vue
@@ -56,7 +56,8 @@ const columns = reactive<TableColumn[]>([
   {
     field: 'index',
     label: t('tableDemo.index'),
-    type: 'index'
+    type: 'index',
+    hidden: true
   },
   {
     field: 'title',

From 7314065c907f8ef4d184c1f3c724b67c30410ab9 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 19 Dec 2023 19:57:45 +0800
Subject: [PATCH 06/19] =?UTF-8?q?refactor:=20=E6=96=B0=E5=A2=9E=E5=88=97?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Table/src/components/ColumnSetting.vue    | 104 ++++++++++--------
 src/views/Components/Table/UseTableDemo.vue   |   3 +-
 2 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/src/components/Table/src/components/ColumnSetting.vue b/src/components/Table/src/components/ColumnSetting.vue
index 8f8f047..5d40b7b 100644
--- a/src/components/Table/src/components/ColumnSetting.vue
+++ b/src/components/Table/src/components/ColumnSetting.vue
@@ -11,6 +11,7 @@ import { TableColumn } from '../types'
 import { PropType, ref, watch, unref } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { DEFAULT_FILTER_COLUMN } from '@/constants'
+import { VueDraggable } from 'vue-draggable-plus'
 
 const modelValue = defineModel<boolean>()
 
@@ -50,7 +51,7 @@ const confirm = () => {
   const newColumns = cloneDeep(unref(settingColumns))?.map((item) => {
     const fixed = unref(settingColumns)?.find((col) => col.field === item.field)?.fixed
     item.hidden = !!!unref(checkColumns)?.includes(item.field)
-    item.fixed = fixed !== void 0 ? fixed : undefined
+    item.fixed = fixed ? fixed : undefined
     return item
   })
   emit('confirm', [...unref(hiddenColumns), ...(newColumns || [])])
@@ -58,21 +59,20 @@ const confirm = () => {
 }
 
 const restore = () => {
-  initColumns([...unref(hiddenColumns), ...(unref(oldColumns) || [])])
+  initColumns([...unref(hiddenColumns), ...(unref(oldColumns) || [])], true)
 }
 
-const initColumns = (columns: TableColumn[]) => {
-  const newColumns = cloneDeep(
-    columns?.filter((item) => {
+const initColumns = (columns: TableColumn[], isReStore = false) => {
+  const newColumns = columns?.filter((item) => {
+    if (!isReStore) {
       item.fixed = item.fixed !== void 0 ? item.fixed : undefined
-      return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
-    })
-  )
-  console.log(newColumns)
+    }
+    return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
+  })
   if (!unref(oldColumns)) {
-    oldColumns.value = newColumns
+    oldColumns.value = cloneDeep(newColumns)
   }
-  settingColumns.value = newColumns
+  settingColumns.value = cloneDeep(newColumns)
 
   hiddenColumns.value = cloneDeep(
     columns?.filter((item) => item.type && DEFAULT_FILTER_COLUMN.includes(item.type))
@@ -93,7 +93,6 @@ const initColumns = (columns: TableColumn[]) => {
 watch(
   () => props.columns,
   (columns) => {
-    console.log(columns)
     initColumns(columns)
   },
   {
@@ -104,40 +103,57 @@ watch(
 
 <template>
   <ElDrawer v-model="modelValue" title="列设置" size="350px">
-    <div class="flex items-center justify-between">
+    <div>
       <div class="flex items-center justify-between">
-        <ElCheckbox
-          v-model="checkAll"
-          :indeterminate="isIndeterminate"
-          @change="handleCheckAllChange"
-        />
-        <ElText class="ml-8px!">{{ checkColumns.length }} / {{ settingColumns?.length }}</ElText>
-      </div>
-      <ElText>固定 / 排序</ElText>
-    </div>
-    <div v-if="settingColumns?.length">
-      <ElCheckboxGroup v-model="checkColumns" @change="handleCheckedColumnsChange">
-        <div
-          v-for="item in settingColumns"
-          :key="item.field"
-          class="flex items-center justify-between mt-12px"
-        >
-          <ElCheckbox :label="item.field">
-            {{ item.label }}
-          </ElCheckbox>
-          <ElRadioGroup size="small" v-model="item.fixed">
-            <ElRadioButton label="left">
-              <Icon icon="ep:arrow-left" />
-            </ElRadioButton>
-            <ElRadioButton :label="undefined">
-              <Icon icon="ep:close" />
-            </ElRadioButton>
-            <ElRadioButton label="right">
-              <Icon icon="ep:arrow-right" />
-            </ElRadioButton>
-          </ElRadioGroup>
+        <div class="flex items-center justify-between">
+          <ElCheckbox
+            v-model="checkAll"
+            :indeterminate="isIndeterminate"
+            @change="handleCheckAllChange"
+          />
+          <ElText class="ml-8px!">{{ checkColumns.length }} / {{ settingColumns?.length }}</ElText>
         </div>
-      </ElCheckboxGroup>
+        <ElText>固定 / 排序</ElText>
+      </div>
+      <div v-if="settingColumns?.length">
+        <VueDraggable
+          v-model="settingColumns"
+          target=".el-checkbox-group"
+          handle=".handle"
+          :animation="150"
+        >
+          <ElCheckboxGroup
+            ref="draggableWrap"
+            v-model="checkColumns"
+            @change="handleCheckedColumnsChange"
+          >
+            <div
+              v-for="item in settingColumns"
+              :key="item.field"
+              class="flex items-center justify-between mt-12px"
+            >
+              <ElCheckbox :label="item.field">
+                {{ item.label }}
+              </ElCheckbox>
+              <div class="flex items-center">
+                <ElRadioGroup size="small" v-model="item.fixed">
+                  <ElRadioButton label="left">
+                    <Icon icon="ep:arrow-left" />
+                  </ElRadioButton>
+                  <ElRadioButton :label="undefined">
+                    <Icon icon="ep:close" />
+                  </ElRadioButton>
+                  <ElRadioButton label="right">
+                    <Icon icon="ep:arrow-right" />
+                  </ElRadioButton>
+                </ElRadioGroup>
+
+                <div class="ml-12px cursor-move handle"><Icon icon="ep:rank" /></div>
+              </div>
+            </div>
+          </ElCheckboxGroup>
+        </VueDraggable>
+      </div>
     </div>
     <template #footer>
       <div>
diff --git a/src/views/Components/Table/UseTableDemo.vue b/src/views/Components/Table/UseTableDemo.vue
index 7bcfb16..da1a754 100644
--- a/src/views/Components/Table/UseTableDemo.vue
+++ b/src/views/Components/Table/UseTableDemo.vue
@@ -56,8 +56,7 @@ const columns = reactive<TableColumn[]>([
   {
     field: 'index',
     label: t('tableDemo.index'),
-    type: 'index',
-    hidden: true
+    type: 'index'
   },
   {
     field: 'title',

From 10745207e64d2d444636cb9d877cec9a0bebf1eb Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Wed, 20 Dec 2023 10:26:51 +0800
Subject: [PATCH 07/19] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E4=B8=BB=E9=A2=98=E8=89=B2=E7=BC=93=E5=AD=98=E5=A4=B1?=
 =?UTF-8?q?=E8=B4=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c097654..389960e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,8 @@
 import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
-import { isDark } from '@/utils/is'
 import { useDesign } from '@/hooks/web/useDesign'
-import { useStorage } from '@/hooks/web/useStorage'
+import { useDark } from '@vueuse/core'
 
 const { getPrefixCls } = useDesign()
 
@@ -16,19 +15,12 @@ const currentSize = computed(() => appStore.getCurrentSize)
 
 const greyMode = computed(() => appStore.getGreyMode)
 
-const { getStorage } = useStorage()
+const isDark = useDark({
+  valueDark: 'dark',
+  valueLight: 'light'
+})
 
-// 根据浏览器当前主题设置系统主题色
-const setDefaultTheme = () => {
-  if (getStorage('isDark') !== null) {
-    appStore.setIsDark(getStorage('isDark'))
-    return
-  }
-  const isDarkTheme = isDark()
-  appStore.setIsDark(isDarkTheme)
-}
-
-setDefaultTheme()
+isDark.value = appStore.getIsDark
 </script>
 
 <template>

From 80351516ced0ec2d67c30405d4a644aca8ca4bc2 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Wed, 20 Dec 2023 10:37:57 +0800
Subject: [PATCH 08/19] =?UTF-8?q?refactor:=20=E9=87=8D=E5=86=99useEventBus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/event/{useEmitt.ts => useEventBus.ts} | 7 +++++--
 src/views/Example/Page/ExampleAdd.vue           | 8 ++++----
 src/views/Example/Page/ExampleEdit.vue          | 8 ++++----
 src/views/Example/Page/ExamplePage.vue          | 6 +++---
 4 files changed, 16 insertions(+), 13 deletions(-)
 rename src/hooks/event/{useEmitt.ts => useEventBus.ts} (69%)

diff --git a/src/hooks/event/useEmitt.ts b/src/hooks/event/useEventBus.ts
similarity index 69%
rename from src/hooks/event/useEmitt.ts
rename to src/hooks/event/useEventBus.ts
index 26b5d62..d9ee832 100644
--- a/src/hooks/event/useEmitt.ts
+++ b/src/hooks/event/useEventBus.ts
@@ -8,7 +8,7 @@ interface Option {
 
 const emitter = mitt()
 
-export const useEmitt = (option?: Option) => {
+export const useEventBus = (option?: Option) => {
   if (option) {
     emitter.on(option.name, option.callback)
 
@@ -18,6 +18,9 @@ export const useEmitt = (option?: Option) => {
   }
 
   return {
-    emitter
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit,
+    all: emitter.all
   }
 }
diff --git a/src/views/Example/Page/ExampleAdd.vue b/src/views/Example/Page/ExampleAdd.vue
index 37480a8..3903e21 100644
--- a/src/views/Example/Page/ExampleAdd.vue
+++ b/src/views/Example/Page/ExampleAdd.vue
@@ -5,9 +5,9 @@ import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter } from 'vue-router'
 import { saveTableApi } from '@/api/table'
-import { useEmitt } from '@/hooks/event/useEmitt'
+import { useEventBus } from '@/hooks/event/useEventBus'
 
-const { emitter } = useEmitt()
+const { emit } = useEventBus()
 
 const { push, go } = useRouter()
 
@@ -28,7 +28,7 @@ const save = async () => {
         loading.value = false
       })
     if (res) {
-      emitter.emit('getList', 'add')
+      emit('getList', 'add')
       push('/example/example-page')
     }
   }
@@ -49,4 +49,4 @@ const save = async () => {
     </template>
   </ContentDetailWrap>
 </template>
-@/hooks/event/useEmitt
+@/hooks/event/useEventBus
diff --git a/src/views/Example/Page/ExampleEdit.vue b/src/views/Example/Page/ExampleEdit.vue
index 8484995..eb65721 100644
--- a/src/views/Example/Page/ExampleEdit.vue
+++ b/src/views/Example/Page/ExampleEdit.vue
@@ -6,9 +6,9 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter, useRoute } from 'vue-router'
 import { saveTableApi, getTableDetApi } from '@/api/table'
 import { TableData } from '@/api/table/types'
-import { useEmitt } from '@/hooks/event/useEmitt'
+import { useEventBus } from '@/hooks/event/useEventBus'
 
-const { emitter } = useEmitt()
+const { emit } = useEventBus()
 
 const { push, go } = useRouter()
 
@@ -42,7 +42,7 @@ const save = async () => {
         loading.value = false
       })
     if (res) {
-      emitter.emit('getList', 'editor')
+      emit('getList', 'editor')
       push('/example/example-page')
     }
   }
@@ -63,4 +63,4 @@ const save = async () => {
     </template>
   </ContentDetailWrap>
 </template>
-@/hooks/event/useEmitt
+@/hooks/event/useEventBus
diff --git a/src/views/Example/Page/ExamplePage.vue b/src/views/Example/Page/ExamplePage.vue
index 64b9804..c13fe3c 100644
--- a/src/views/Example/Page/ExamplePage.vue
+++ b/src/views/Example/Page/ExamplePage.vue
@@ -9,7 +9,7 @@ import { useTable } from '@/hooks/web/useTable'
 import { TableData } from '@/api/table/types'
 import { reactive, ref, unref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useEmitt } from '@/hooks/event/useEmitt'
+import { useEventBus } from '@/hooks/event/useEventBus'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
 import { BaseButton } from '@/components/Button'
 
@@ -50,7 +50,7 @@ const { getList, getElTableExpose, delList } = tableMethods
 
 getList()
 
-useEmitt({
+useEventBus({
   name: 'getList',
   callback: (type: string) => {
     if (type === 'add') {
@@ -294,4 +294,4 @@ const action = (row: TableData, type: string) => {
     />
   </ContentWrap>
 </template>
-@/hooks/event/useEmitt
+@/hooks/event/useEventBus

From c29d1cb4c6e7ee66a708a2cebc04594363500983 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Thu, 21 Dec 2023 10:19:49 +0800
Subject: [PATCH 09/19] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 14c3d45..6417307 100644
--- a/package.json
+++ b/package.json
@@ -41,50 +41,50 @@
     "driver.js": "^1.3.1",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "^2.4.3",
+    "element-plus": "^2.4.4",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.0",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "url": "^0.11.3",
-    "vue": "3.3.10",
+    "vue": "3.3.13",
     "vue-draggable-plus": "^0.3.2",
     "vue-i18n": "9.8.0",
-    "vue-json-pretty": "^2.2.4",
+    "vue-json-pretty": "^2.3.0",
     "vue-router": "^4.2.5",
     "vue-types": "^5.1.1",
-    "xgplayer": "^3.0.10"
+    "xgplayer": "^3.0.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
-    "@iconify/json": "^2.2.153",
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "@iconify/json": "^2.2.160",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@purge-icons/generated": "^0.10.0",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.5",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.10",
     "@types/sortablejs": "^1.15.7",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
     "@unocss/transformer-variant-group": "^0.58.0",
     "@vitejs/plugin-legacy": "^5.2.0",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@vitejs/plugin-vue": "^4.5.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
     "chalk": "^5.3.0",
     "consola": "^3.2.3",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.0",
     "eslint-plugin-vue": "^9.19.2",
     "esno": "^4.0.0",
     "fs-extra": "^11.2.0",
@@ -96,18 +96,18 @@
     "postcss": "^8.4.32",
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.6.1",
-    "stylelint": "^15.11.0",
+    "rollup": "^4.9.1",
+    "stylelint": "^16.0.2",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-order": "^6.0.3",
-    "terser": "^5.25.0",
+    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-config-standard": "^35.0.0",
+    "stylelint-order": "^6.0.4",
+    "terser": "^5.26.0",
     "typescript": "5.3.3",
     "unocss": "^0.58.0",
-    "vite": "5.0.6",
+    "vite": "5.0.10",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-mock": "^2.9.6",

From 94160c0418816e560f440e259e1f0fd4742e0143 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Thu, 21 Dec 2023 10:50:20 +0800
Subject: [PATCH 10/19] =?UTF-8?q?types:=20=E4=BF=AE=E5=A4=8D=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E7=BB=84=E4=BB=B6=E5=B1=9E=E6=80=A7=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=8E=A8=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierignore                       |  1 -
 src/views/Example/Page/ExampleAdd.vue |  4 ++--
 types/components.d.ts                 |  6 +++---
 vite.config.ts                        | 29 ++++++++++++++-------------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 15cf071..4ff8c9d 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,7 +3,6 @@
 /dist*
 /public/*
 /docs/*
-/vite.config.ts
 /src/types/env.d.ts
 /docs/**/*
 /plop/**/*
diff --git a/src/views/Example/Page/ExampleAdd.vue b/src/views/Example/Page/ExampleAdd.vue
index 3903e21..1c4e3b8 100644
--- a/src/views/Example/Page/ExampleAdd.vue
+++ b/src/views/Example/Page/ExampleAdd.vue
@@ -43,8 +43,8 @@ const save = async () => {
       <BaseButton @click="go(-1)">
         {{ t('common.back') }}
       </BaseButton>
-      <BaseButton type="primary" :loading="loading" @click="save">
-        {{ t('exampleDemo.save') }}
+      <BaseButton type="primary" :loading="loading" @click="save"
+        >{{ t('exampleDemo.save') }}
       </BaseButton>
     </template>
   </ContentDetailWrap>
diff --git a/types/components.d.ts b/types/components.d.ts
index 8a2967e..15b5a6b 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -1,8 +1,8 @@
 declare module 'vue' {
   export interface GlobalComponents {
-    Icon: (typeof import('../components/Icon/src/Icon.vue'))['default']
-    Permission: (typeof import('../components/Permission/src/Permission.vue'))['default']
-    BaseButton: (typeof import('../components/Button/src/Button.vue'))['default']
+    Icon: (typeof import('../src/components/Icon/index'))['Icon']
+    Permission: (typeof import('../src/components/Permission/index'))['Permission']
+    BaseButton: (typeof import('../src/components/Button/index'))['BaseButton']
   }
 }
 
diff --git a/vite.config.ts b/vite.config.ts
index 7fddf87..38bbfda 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,10 +5,10 @@ import Vue from '@vitejs/plugin-vue'
 import VueJsx from '@vitejs/plugin-vue-jsx'
 import progress from 'vite-plugin-progress'
 import EslintPlugin from 'vite-plugin-eslint'
-import { ViteEjsPlugin } from "vite-plugin-ejs"
+import { ViteEjsPlugin } from 'vite-plugin-ejs'
 import { viteMockServe } from 'vite-plugin-mock'
 import PurgeIcons from 'vite-plugin-purge-icons'
-import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
 import UnoCSS from 'unocss/vite'
@@ -24,7 +24,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
   let env = {} as any
   const isBuild = command === 'build'
   if (!isBuild) {
-    env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root)
+    env = loadEnv(process.argv[3] === '--mode' ? process.argv[4] : process.argv[3], root)
   } else {
     env = loadEnv(mode, root)
   }
@@ -41,16 +41,18 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       progress(),
       createStyleImportPlugin({
         resolves: [ElementPlusResolve()],
-        libs: [{
-          libraryName: 'element-plus',
-          esModule: true,
-          resolveStyle: (name) => {
-            if (name === 'click-outside') {
-              return ''
+        libs: [
+          {
+            libraryName: 'element-plus',
+            esModule: true,
+            resolveStyle: (name) => {
+              if (name === 'click-outside') {
+                return ''
+              }
+              return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
             }
-            return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
           }
-        }]
+        ]
       }),
       EslintPlugin({
         cache: false,
@@ -81,8 +83,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       ViteEjsPlugin({
         title: env.VITE_APP_TITLE
       }),
-      UnoCSS(),
-      // sveltekit(),
+      UnoCSS()
     ],
 
     css: {
@@ -125,7 +126,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         '/api': {
           target: 'http://127.0.0.1:8000',
           changeOrigin: true,
-          rewrite: path => path.replace(/^\/api/, '')
+          rewrite: (path) => path.replace(/^\/api/, '')
         }
       },
       hmr: {

From 8aeeb0b4878dbdac66f9c9d8554e29f966be9bee Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Thu, 21 Dec 2023 11:23:41 +0800
Subject: [PATCH 11/19] =?UTF-8?q?chore:=20=E6=96=B0=E5=A2=9E=E6=89=93?=
 =?UTF-8?q?=E5=8C=85=E4=BD=93=E7=A7=AF=E5=88=86=E6=9E=90=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore     | 2 ++
 package.json   | 1 +
 vite.config.ts | 4 ++++
 3 files changed, 7 insertions(+)

diff --git a/.gitignore b/.gitignore
index 0b05e6a..7f5d52e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,5 @@ dist-ssr
 /dist*
 *-lock.*
 pnpm-debug
+stats.html
+
diff --git a/package.json b/package.json
index 6417307..3fbe900 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
     "rollup": "^4.9.1",
+    "rollup-plugin-visualizer": "^5.11.0",
     "stylelint": "^16.0.2",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended": "^14.0.0",
diff --git a/vite.config.ts b/vite.config.ts
index 38bbfda..618a31e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,7 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
 import UnoCSS from 'unocss/vite'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 // https://vitejs.dev/config/
 const root = process.cwd()
@@ -117,6 +118,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           drop_debugger: env.VITE_DROP_DEBUGGER === 'true',
           drop_console: env.VITE_DROP_CONSOLE === 'true'
         }
+      },
+      rollupOptions: {
+        plugins: env.NODE_ENV === 'production' ? [visualizer()] : undefined
       }
     },
     server: {

From 3a5db42c97f382f3fc701b8f113385b38a214583 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 25 Dec 2023 15:16:08 +0800
Subject: [PATCH 12/19] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=9D=9E?=
 =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E7=8E=AF=E5=A2=83=E6=89=93=E5=8C=85=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev       | 3 +++
 .env.gitee     | 3 +++
 .env.pro       | 3 +++
 .env.test      | 3 +++
 vite.config.ts | 4 ++--
 5 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/.env.dev b/.env.dev
index afc3cee..3bec339 100644
--- a/.env.dev
+++ b/.env.dev
@@ -21,3 +21,6 @@ VITE_OUT_DIR=dist-dev
 
 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=false
diff --git a/.env.gitee b/.env.gitee
index 9ac2a52..37af85b 100644
--- a/.env.gitee
+++ b/.env.gitee
@@ -21,3 +21,6 @@ VITE_OUT_DIR=dist-pro
 
 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=false
\ No newline at end of file
diff --git a/.env.pro b/.env.pro
index 432fc46..7bff03f 100644
--- a/.env.pro
+++ b/.env.pro
@@ -21,3 +21,6 @@ VITE_OUT_DIR=dist-pro
 
 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=true
diff --git a/.env.test b/.env.test
index b6eb7d9..4aa30ad 100644
--- a/.env.test
+++ b/.env.test
@@ -21,3 +21,6 @@ VITE_OUT_DIR=dist-test
 
 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=false
diff --git a/vite.config.ts b/vite.config.ts
index 618a31e..239ce1f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -111,7 +111,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     build: {
       minify: 'terser',
       outDir: env.VITE_OUT_DIR || 'dist',
-      sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false,
+      sourcemap: env.VITE_SOURCEMAP === 'true',
       // brotliSize: false,
       terserOptions: {
         compress: {
@@ -120,7 +120,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         }
       },
       rollupOptions: {
-        plugins: env.NODE_ENV === 'production' ? [visualizer()] : undefined
+        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined
       }
     },
     server: {

From 379b340750eb0d4f7816f5d7c25cbd2983fd33b9 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 25 Dec 2023 16:27:55 +0800
Subject: [PATCH 13/19] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=90=AF?=
 =?UTF-8?q?=E5=8A=A8=E9=80=9F=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.base                        |  5 +++-
 .env.dev                         |  5 +++-
 .env.gitee                       |  7 ++++--
 .env.pro                         |  5 +++-
 .env.test                        |  5 +++-
 src/App.vue                      |  9 +++++++
 src/plugins/elementPlus/index.ts |  6 +++++
 src/plugins/svgIcon/index.ts     |  2 --
 stylelint.config.js              |  4 ----
 vite.config.ts                   | 41 ++++++++++++++++++++------------
 10 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/.env.base b/.env.base
index 7e2fb8f..7cf8898 100644
--- a/.env.base
+++ b/.env.base
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=development
+VITE_NODE_ENV=development
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -9,3 +9,6 @@ VITE_BASE_PATH=/
 
 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
diff --git a/.env.dev b/.env.dev
index 3bec339..68a210d 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -24,3 +24,6 @@ VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
 VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
diff --git a/.env.gitee b/.env.gitee
index 37af85b..95279ea 100644
--- a/.env.gitee
+++ b/.env.gitee
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -23,4 +23,7 @@ VITE_OUT_DIR=dist-pro
 VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
-VITE_USE_BUNDLE_ANALYZER=false
\ No newline at end of file
+VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
\ No newline at end of file
diff --git a/.env.pro b/.env.pro
index 7bff03f..a489e81 100644
--- a/.env.pro
+++ b/.env.pro
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -24,3 +24,6 @@ VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
 VITE_USE_BUNDLE_ANALYZER=true
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
diff --git a/.env.test b/.env.test
index 4aa30ad..b545901 100644
--- a/.env.test
+++ b/.env.test
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -24,3 +24,6 @@ VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
 VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
diff --git a/src/App.vue b/src/App.vue
index 389960e..4a1c89d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useDark } from '@vueuse/core'
+// import { ElNotification } from 'element-plus'
 
 const { getPrefixCls } = useDesign()
 
@@ -21,6 +22,14 @@ const isDark = useDark({
 })
 
 isDark.value = appStore.getIsDark
+// ElNotification({
+//   title: '提示',
+//   type: 'warning',
+//   duration: 0,
+//   dangerouslyUseHTMLString: true,
+//   message:
+//     '<div><p><strong>遇事不决，请先查阅常见问题，说不定你能找到相关解答</strong></p><p><a href="https://www.baidu.com" target="_blank">链接地址</a></p></div>'
+// })
 </script>
 
 <template>
diff --git a/src/plugins/elementPlus/index.ts b/src/plugins/elementPlus/index.ts
index 6139e3b..29a7840 100644
--- a/src/plugins/elementPlus/index.ts
+++ b/src/plugins/elementPlus/index.ts
@@ -12,6 +12,12 @@ export const setupElementPlus = (app: App<Element>) => {
     app.use(plugin)
   })
 
+  // 为了开发环境启动更快，一次性引入所有样式
+  if (import.meta.env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'true') {
+    import('element-plus/dist/index.css')
+    return
+  }
+
   components.forEach((component) => {
     app.component(component.name!, component)
   })
diff --git a/src/plugins/svgIcon/index.ts b/src/plugins/svgIcon/index.ts
index b5b7f70..1b11e2d 100644
--- a/src/plugins/svgIcon/index.ts
+++ b/src/plugins/svgIcon/index.ts
@@ -1,3 +1 @@
 import 'virtual:svg-icons-register'
-
-import '@purge-icons/generated'
diff --git a/stylelint.config.js b/stylelint.config.js
index 890b45b..a50d202 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -20,12 +20,8 @@ module.exports = {
     'function-no-unknown': null,
     'no-empty-source': null,
     'named-grid-areas-no-invalid': null,
-    'unicode-bom': 'never',
     'no-descending-specificity': null,
     'font-family-no-missing-generic-family-keyword': null,
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    'declaration-block-trailing-semicolon': null,
     'rule-empty-line-before': [
       'always',
       {
diff --git a/vite.config.ts b/vite.config.ts
index 239ce1f..5ce5181 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -40,21 +40,23 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       }),
       VueJsx(),
       progress(),
-      createStyleImportPlugin({
-        resolves: [ElementPlusResolve()],
-        libs: [
-          {
-            libraryName: 'element-plus',
-            esModule: true,
-            resolveStyle: (name) => {
-              if (name === 'click-outside') {
-                return ''
+      env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'false'
+        ? createStyleImportPlugin({
+            resolves: [ElementPlusResolve()],
+            libs: [
+              {
+                libraryName: 'element-plus',
+                esModule: true,
+                resolveStyle: (name) => {
+                  if (name === 'click-outside') {
+                    return ''
+                  }
+                  return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
+                }
               }
-              return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
-            }
-          }
-        ]
-      }),
+            ]
+          })
+        : undefined,
       EslintPlugin({
         cache: false,
         include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
@@ -120,7 +122,16 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         }
       },
       rollupOptions: {
-        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined
+        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined,
+        // 拆包
+        output: {
+          manualChunks: {
+            vue: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
+            'element-plus': ['element-plus'],
+            'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue'],
+            echarts: ['echarts', 'echarts-wordcloud']
+          }
+        }
       }
     },
     server: {

From a18bc641e846dc1e2e1537470aceb04360cf4163 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 25 Dec 2023 17:01:33 +0800
Subject: [PATCH 14/19] =?UTF-8?q?chore:=20=E6=96=B0=E5=A2=9Emock=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E5=BC=80=E5=90=AF=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.base      |  3 +++
 .env.dev       |  3 +++
 .env.gitee     |  5 ++++-
 .env.pro       |  3 +++
 .env.test      |  3 +++
 package.json   |  1 -
 vite.config.ts | 16 +++++++++-------
 7 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/.env.base b/.env.base
index 7cf8898..e32c0fa 100644
--- a/.env.base
+++ b/.env.base
@@ -12,3 +12,6 @@ VITE_APP_TITLE=ElementAdmin
 
 # 是否全量引入element-plus样式
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
+
+# 是否开启mock
+VITE_USE_MOCK=true
diff --git a/.env.dev b/.env.dev
index 68a210d..cb0be81 100644
--- a/.env.dev
+++ b/.env.dev
@@ -27,3 +27,6 @@ VITE_USE_BUNDLE_ANALYZER=false
 
 # 是否全量引入element-plus样式
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
\ No newline at end of file
diff --git a/.env.gitee b/.env.gitee
index 95279ea..ca743dd 100644
--- a/.env.gitee
+++ b/.env.gitee
@@ -26,4 +26,7 @@ VITE_APP_TITLE=ElementAdmin
 VITE_USE_BUNDLE_ANALYZER=false
 
 # 是否全量引入element-plus样式
-VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
\ No newline at end of file
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
\ No newline at end of file
diff --git a/.env.pro b/.env.pro
index a489e81..f06aee1 100644
--- a/.env.pro
+++ b/.env.pro
@@ -27,3 +27,6 @@ VITE_USE_BUNDLE_ANALYZER=true
 
 # 是否全量引入element-plus样式
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
\ No newline at end of file
diff --git a/.env.test b/.env.test
index b545901..50e5c83 100644
--- a/.env.test
+++ b/.env.test
@@ -27,3 +27,6 @@ VITE_USE_BUNDLE_ANALYZER=false
 
 # 是否全量引入element-plus样式
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
\ No newline at end of file
diff --git a/package.json b/package.json
index 3fbe900..0f2b4d7 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,6 @@
     "@commitlint/config-conventional": "^18.4.3",
     "@iconify/json": "^2.2.160",
     "@intlify/unplugin-vue-i18n": "^2.0.0",
-    "@purge-icons/generated": "^0.10.0",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",
     "@types/lodash-es": "^4.17.12",
diff --git a/vite.config.ts b/vite.config.ts
index 5ce5181..bb93edf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -72,17 +72,19 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         svgoOptions: true
       }),
       PurgeIcons(),
-      viteMockServe({
-        ignore: /^\_/,
-        mockPath: 'mock',
-        localEnabled: !isBuild,
-        prodEnabled: isBuild,
-        injectCode: `
+      env.VITE_USE_MOCK === 'true'
+        ? viteMockServe({
+            ignore: /^\_/,
+            mockPath: 'mock',
+            localEnabled: !isBuild,
+            prodEnabled: isBuild,
+            injectCode: `
           import { setupProdMockServer } from '../mock/_createProductionServer'
 
           setupProdMockServer()
           `
-      }),
+          })
+        : undefined,
       ViteEjsPlugin({
         title: env.VITE_APP_TITLE
       }),

From 83de387e2a0124804a9c99080ac841a9d6676fca Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 25 Dec 2023 17:25:33 +0800
Subject: [PATCH 15/19] =?UTF-8?q?perf:=20=E8=BF=98=E5=8E=9Fmock.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                          |   2 +-
 README.zh-CN.md                    |   2 +-
 mock/department/index.mock.ts      |  89 ++++++-----
 mock/menu/index.mock.ts            |  36 ++---
 mock/role/index.mock.ts            |  84 +++++------
 mock/table/index.mock.ts           | 227 ++++++++++++-----------------
 package.json                       |   3 +-
 src/views/Components/Waterfall.vue |  20 +--
 8 files changed, 217 insertions(+), 246 deletions(-)

diff --git a/README.md b/README.md
index 383d508..3db6283 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ Online examples do not apply to menu filtering by default, but directly use Stat
 - [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
 - [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router
 - [Element-Plus](https://element-plus.org/) - Familiar with the basic use of element-plus
-- [Faker.js](https://github.com/faker-js/faker#readme) - Generate massive amounts of fake contextual data
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax
 
 ## Install and use
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index e03a232..1caf7b6 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -50,7 +50,7 @@ vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模
 - [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
 - [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
 - [Element-Plus](https://element-plus.org/) - element-plus 基本使用
-- [Faker.js](https://github.com/faker-js/faker#readme) - 生成大量伪造的上下文数据
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
 
 ## 安装和使用
 
diff --git a/mock/department/index.mock.ts b/mock/department/index.mock.ts
index 891300a..443907e 100644
--- a/mock/department/index.mock.ts
+++ b/mock/department/index.mock.ts
@@ -1,5 +1,5 @@
 import { toAnyString } from '@/utils'
-import { faker } from '@faker-js/faker'
+import Mock from 'mockjs'
 import { SUCCESS_CODE } from '@/constants'
 
 const departmentList: any = []
@@ -11,64 +11,71 @@ for (let i = 0; i < 5; i++) {
     // 部门名称
     departmentName: citys[i],
     id: toAnyString(),
-    createTime: faker.date.anytime(),
-    status: faker.number.int({ min: 0, max: 1 }),
+    createTime: '@datetime',
+    // 状态
+    status: Mock.Random.integer(0, 1),
     // 备注
-    remark: faker.lorem.sentence(),
+    remark: '@cword(10, 15)',
     children: [
       {
         // 部门名称
         departmentName: '研发部',
-        createTime: faker.date.anytime(),
-        // 状态
-        status: faker.number.int({ min: 0, max: 1 }),
         id: toAnyString(),
-        remark: faker.lorem.sentence()
+        createTime: '@datetime',
+        // 状态
+        status: Mock.Random.integer(0, 1),
+        // 备注
+        remark: '@cword(10, 15)'
       },
       {
         // 部门名称
         departmentName: '产品部',
-        createTime: faker.date.anytime(),
-        // 状态
-        status: faker.number.int({ min: 0, max: 1 }),
         id: toAnyString(),
-        remark: faker.lorem.sentence()
+        createTime: '@datetime',
+        // 状态
+        status: Mock.Random.integer(0, 1),
+        // 备注
+        remark: '@cword(10, 15)'
       },
       {
         // 部门名称
         departmentName: '运营部',
-        createTime: faker.date.anytime(),
-        // 状态
-        status: faker.number.int({ min: 0, max: 1 }),
         id: toAnyString(),
-        remark: faker.lorem.sentence()
+        createTime: '@datetime',
+        // 状态
+        status: Mock.Random.integer(0, 1),
+        // 备注
+        remark: '@cword(10, 15)'
       },
       {
         // 部门名称
         departmentName: '市场部',
-        createTime: faker.date.anytime(),
-        // 状态
-        status: faker.number.int({ min: 0, max: 1 }),
         id: toAnyString(),
-        remark: faker.lorem.sentence()
+        createTime: '@datetime',
+        // 状态
+        status: Mock.Random.integer(0, 1),
+        // 备注
+        remark: '@cword(10, 15)'
       },
       {
         // 部门名称
         departmentName: '销售部',
-        createTime: faker.date.anytime(),
-        // 状态
-        status: faker.number.int({ min: 0, max: 1 }),
         id: toAnyString(),
-        remark: faker.lorem.sentence()
+        createTime: '@datetime',
+        // 状态
+        status: Mock.Random.integer(0, 1),
+        // 备注
+        remark: '@cword(10, 15)'
       },
       {
         // 部门名称
         departmentName: '客服部',
-        createTime: faker.date.anytime(),
-        // 状态
-        status: faker.number.int({ min: 0, max: 1 }),
         id: toAnyString(),
-        remark: faker.lorem.sentence()
+        createTime: '@datetime',
+        // 状态
+        status: Mock.Random.integer(0, 1),
+        // 备注
+        remark: '@cword(10, 15)'
       }
     ]
   })
@@ -110,18 +117,20 @@ export default [
       // 根据pageSize来创建数据
       const mockList: any = []
       for (let i = 0; i < pageSize; i++) {
-        mockList.push({
-          // 用户名
-          username: faker.person.firstName(),
-          // 账号
-          account: faker.person.lastName(),
-          // 邮箱
-          email: faker.internet.email(),
-          // 创建时间
-          createTime: faker.date.anytime(),
-          // 用户id
-          id: toAnyString()
-        })
+        mockList.push(
+          Mock.mock({
+            // 用户名
+            username: '@cname',
+            // 账号
+            account: '@first',
+            // 邮箱
+            email: '@EMAIL',
+            // 创建时间
+            createTime: '@datetime',
+            // 用户id
+            id: toAnyString()
+          })
+        )
       }
       return {
         code: SUCCESS_CODE,
diff --git a/mock/menu/index.mock.ts b/mock/menu/index.mock.ts
index 5eca3a0..fd3f732 100644
--- a/mock/menu/index.mock.ts
+++ b/mock/menu/index.mock.ts
@@ -1,4 +1,4 @@
-import { faker } from '@faker-js/faker'
+import Mock from 'mockjs'
 import { SUCCESS_CODE } from '@/constants'
 
 const timeout = 1000
@@ -19,7 +19,7 @@ export default [
               component: '#',
               redirect: '/dashboard/analysis',
               name: 'Dashboard',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 1,
               type: 0,
               parentId: undefined,
@@ -34,7 +34,7 @@ export default [
                   path: 'analysis',
                   component: 'views/Dashboard/Analysis',
                   name: 'Analysis',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 2,
                   type: 1,
                   parentId: 1,
@@ -59,7 +59,7 @@ export default [
                   path: 'workplace',
                   component: 'views/Dashboard/Workplace',
                   name: 'Workplace',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 3,
                   type: 1,
                   parentId: 1,
@@ -93,7 +93,7 @@ export default [
                 icon: 'clarity:document-solid'
               },
               name: 'ExternalLink',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 4,
               type: 0,
               parentId: undefined,
@@ -102,7 +102,7 @@ export default [
                 {
                   path: 'https://element-plus-admin-doc.cn/',
                   name: 'DocumentLink',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 5,
                   type: 1,
                   parentId: 4,
@@ -118,7 +118,7 @@ export default [
               component: '#',
               redirect: '/level/menu1/menu1-1/menu1-1-1',
               name: 'Level',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 6,
               type: 0,
               parentId: undefined,
@@ -132,7 +132,7 @@ export default [
                   path: 'menu1',
                   name: 'Menu1',
                   component: '##',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 7,
                   type: 0,
                   parentId: 6,
@@ -146,7 +146,7 @@ export default [
                       path: 'menu1-1',
                       name: 'Menu11',
                       component: '##',
-                      status: faker.number.int({ min: 0, max: 1 }),
+                      status: Mock.Random.integer(0, 1),
                       id: 8,
                       type: 0,
                       parentId: 7,
@@ -161,7 +161,7 @@ export default [
                           path: 'menu1-1-1',
                           name: 'Menu111',
                           component: 'views/Level/Menu111',
-                          status: faker.number.int({ min: 0, max: 1 }),
+                          status: Mock.Random.integer(0, 1),
                           id: 9,
                           type: 1,
                           parentId: 8,
@@ -176,7 +176,7 @@ export default [
                       path: 'menu1-2',
                       name: 'Menu12',
                       component: 'views/Level/Menu12',
-                      status: faker.number.int({ min: 0, max: 1 }),
+                      status: Mock.Random.integer(0, 1),
                       id: 10,
                       type: 1,
                       parentId: 7,
@@ -191,7 +191,7 @@ export default [
                   path: 'menu2',
                   name: 'Menu2Demo',
                   component: 'views/Level/Menu2',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 11,
                   type: 1,
                   parentId: 6,
@@ -207,7 +207,7 @@ export default [
               component: '#',
               redirect: '/example/example-dialog',
               name: 'Example',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 12,
               type: 0,
               parentId: undefined,
@@ -222,7 +222,7 @@ export default [
                   path: 'example-dialog',
                   component: 'views/Example/Dialog/ExampleDialog',
                   name: 'ExampleDialog',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 13,
                   type: 1,
                   parentId: 12,
@@ -253,7 +253,7 @@ export default [
                   path: 'example-page',
                   component: 'views/Example/Page/ExamplePage',
                   name: 'ExamplePage',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 14,
                   type: 1,
                   parentId: 12,
@@ -284,7 +284,7 @@ export default [
                   path: 'example-add',
                   component: 'views/Example/Page/ExampleAdd',
                   name: 'ExampleAdd',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 15,
                   type: 1,
                   parentId: 12,
@@ -302,7 +302,7 @@ export default [
                   path: 'example-edit',
                   component: 'views/Example/Page/ExampleEdit',
                   name: 'ExampleEdit',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 16,
                   type: 1,
                   parentId: 12,
@@ -320,7 +320,7 @@ export default [
                   path: 'example-detail',
                   component: 'views/Example/Page/ExampleDetail',
                   name: 'ExampleDetail',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 17,
                   type: 1,
                   parentId: 12,
diff --git a/mock/role/index.mock.ts b/mock/role/index.mock.ts
index 5449d79..0a14b60 100644
--- a/mock/role/index.mock.ts
+++ b/mock/role/index.mock.ts
@@ -1,4 +1,4 @@
-import { faker } from '@faker-js/faker'
+import Mock from 'mockjs'
 import { SUCCESS_CODE } from '@/constants'
 import { toAnyString } from '@/utils'
 
@@ -731,7 +731,7 @@ const menus = [
       component: '#',
       redirect: '/dashboard/analysis',
       name: 'Dashboard',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 1,
       meta: {
         title: '首页',
@@ -743,7 +743,7 @@ const menus = [
           path: 'analysis',
           component: 'views/Dashboard/Analysis',
           name: 'Analysis',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 2,
           meta: {
             title: '分析页',
@@ -754,7 +754,7 @@ const menus = [
           path: 'workplace',
           component: 'views/Dashboard/Workplace',
           name: 'Workplace',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 3,
           meta: {
             title: '工作台',
@@ -771,13 +771,13 @@ const menus = [
         icon: 'clarity:document-solid'
       },
       name: 'ExternalLink',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 4,
       children: [
         {
           path: 'https://element-plus-admin-doc.cn/',
           name: 'DocumentLink',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 5,
           meta: {
             title: '文档'
@@ -790,7 +790,7 @@ const menus = [
       component: '#',
       redirect: '/level/menu1/menu1-1/menu1-1-1',
       name: 'Level',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 6,
       meta: {
         title: '菜单',
@@ -801,7 +801,7 @@ const menus = [
           path: 'menu1',
           name: 'Menu1',
           component: '##',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 7,
           redirect: '/level/menu1/menu1-1/menu1-1-1',
           meta: {
@@ -812,7 +812,7 @@ const menus = [
               path: 'menu1-1',
               name: 'Menu11',
               component: '##',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 8,
               redirect: '/level/menu1/menu1-1/menu1-1-1',
               meta: {
@@ -824,7 +824,7 @@ const menus = [
                   path: 'menu1-1-1',
                   name: 'Menu111',
                   component: 'views/Level/Menu111',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 9,
                   permission: ['edit', 'add', 'delete'],
                   meta: {
@@ -838,7 +838,7 @@ const menus = [
               path: 'menu1-2',
               name: 'Menu12',
               component: 'views/Level/Menu12',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 10,
               permission: ['edit', 'add', 'delete'],
               meta: {
@@ -852,7 +852,7 @@ const menus = [
           path: 'menu2',
           name: 'Menu2Demo',
           component: 'views/Level/Menu2',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 11,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -867,7 +867,7 @@ const menus = [
       component: '#',
       redirect: '/example/example-dialog',
       name: 'Example',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 12,
       meta: {
         title: '综合示例',
@@ -879,7 +879,7 @@ const menus = [
           path: 'example-dialog',
           component: 'views/Example/Dialog/ExampleDialog',
           name: 'ExampleDialog',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 13,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -891,7 +891,7 @@ const menus = [
           path: 'example-page',
           component: 'views/Example/Page/ExamplePage',
           name: 'ExamplePage',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 14,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -903,7 +903,7 @@ const menus = [
           path: 'example-add',
           component: 'views/Example/Page/ExampleAdd',
           name: 'ExampleAdd',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 15,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -920,7 +920,7 @@ const menus = [
           path: 'example-edit',
           component: 'views/Example/Page/ExampleEdit',
           name: 'ExampleEdit',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 16,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -937,7 +937,7 @@ const menus = [
           path: 'example-detail',
           component: 'views/Example/Page/ExampleDetail',
           name: 'ExampleDetail',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 17,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -959,7 +959,7 @@ const menus = [
       component: '#',
       redirect: '/dashboard/analysis',
       name: 'Dashboard',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 1,
       meta: {
         title: '首页',
@@ -971,7 +971,7 @@ const menus = [
           path: 'analysis',
           component: 'views/Dashboard/Analysis',
           name: 'Analysis',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 2,
           meta: {
             title: '分析页',
@@ -982,7 +982,7 @@ const menus = [
           path: 'workplace',
           component: 'views/Dashboard/Workplace',
           name: 'Workplace',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 3,
           meta: {
             title: '工作台',
@@ -1001,13 +1001,13 @@ const menus = [
         icon: 'clarity:document-solid'
       },
       name: 'ExternalLink',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 4,
       children: [
         {
           path: 'https://element-plus-admin-doc.cn/',
           name: 'DocumentLink',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 5,
           meta: {
             title: '文档'
@@ -1020,7 +1020,7 @@ const menus = [
       component: '#',
       redirect: '/level/menu1/menu1-1/menu1-1-1',
       name: 'Level',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 6,
       meta: {
         title: '菜单',
@@ -1031,7 +1031,7 @@ const menus = [
           path: 'menu1',
           name: 'Menu1',
           component: '##',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 7,
           redirect: '/level/menu1/menu1-1/menu1-1-1',
           meta: {
@@ -1042,7 +1042,7 @@ const menus = [
               path: 'menu1-1',
               name: 'Menu11',
               component: '##',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 8,
               redirect: '/level/menu1/menu1-1/menu1-1-1',
               meta: {
@@ -1054,7 +1054,7 @@ const menus = [
                   path: 'menu1-1-1',
                   name: 'Menu111',
                   component: 'views/Level/Menu111',
-                  status: faker.number.int({ min: 0, max: 1 }),
+                  status: Mock.Random.integer(0, 1),
                   id: 9,
                   permission: ['edit', 'add', 'delete'],
                   meta: {
@@ -1068,7 +1068,7 @@ const menus = [
               path: 'menu1-2',
               name: 'Menu12',
               component: 'views/Level/Menu12',
-              status: faker.number.int({ min: 0, max: 1 }),
+              status: Mock.Random.integer(0, 1),
               id: 10,
               permission: ['edit', 'add', 'delete'],
               meta: {
@@ -1082,7 +1082,7 @@ const menus = [
           path: 'menu2',
           name: 'Menu2Demo',
           component: 'views/Level/Menu2',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 11,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -1099,7 +1099,7 @@ const menus = [
       component: '#',
       redirect: '/example/example-dialog',
       name: 'Example',
-      status: faker.number.int({ min: 0, max: 1 }),
+      status: Mock.Random.integer(0, 1),
       id: 12,
       meta: {
         title: '综合示例',
@@ -1111,7 +1111,7 @@ const menus = [
           path: 'example-detail',
           component: 'views/Example/Page/ExampleDetail',
           name: 'ExampleDetail',
-          status: faker.number.int({ min: 0, max: 1 }),
+          status: Mock.Random.integer(0, 1),
           id: 17,
           permission: ['edit', 'add', 'delete'],
           meta: {
@@ -1130,16 +1130,18 @@ const menus = [
 ]
 
 for (let i = 0; i < 4; i++) {
-  List.push({
-    id: toAnyString(),
-    // timestamp: +Mock.Random.date('T'),
-    roleName: roleNames[i],
-    role: faker.lorem.sentence(1),
-    status: faker.number.int({ min: 0, max: 1 }),
-    createTime: faker.date.anytime(),
-    remark: faker.lorem.sentence(),
-    menu: menus[i]
-  })
+  List.push(
+    Mock.mock({
+      id: toAnyString(),
+      // timestamp: +Mock.Random.date('T'),
+      roleName: roleNames[i],
+      role: '@first',
+      status: Mock.Random.integer(0, 1),
+      createTime: '@datetime',
+      remark: '@cword(10, 15)',
+      menu: menus[i]
+    })
+  )
 }
 
 export default [
diff --git a/mock/table/index.mock.ts b/mock/table/index.mock.ts
index 13d7778..80520b8 100644
--- a/mock/table/index.mock.ts
+++ b/mock/table/index.mock.ts
@@ -1,4 +1,4 @@
-import { faker } from '@faker-js/faker'
+import Mock from 'mockjs'
 import { SUCCESS_CODE } from '@/constants'
 import { toAnyString } from '@/utils'
 
@@ -36,144 +36,103 @@ interface TreeListProps {
 let List: ListProps[] = []
 
 for (let i = 0; i < count; i++) {
-  List.push({
-    id: toAnyString(),
-    // timestamp: +Mock.Random.date('T'),
-    author: faker.person.firstName(),
-    title: faker.lorem.sentence(),
-    content: baseContent,
-    importance: faker.number.int({ min: 1, max: 3 }),
-    display_time: faker.date.anytime(),
-    pageviews: faker.number.int({ min: 300, max: 5000 }),
-    image_uri: faker.image.url({
-      width: faker.number.int({ min: 200, max: 400 }),
-      height: faker.number.int({ min: 200, max: 400 })
-    }),
-    video_uri:
-      '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
-  })
+  List.push(
+    Mock.mock({
+      id: toAnyString(),
+      // timestamp: +Mock.Random.date('T'),
+      author: '@first',
+      title: '@title(5, 10)',
+      content: baseContent,
+      importance: '@integer(1, 3)',
+      display_time: '@datetime',
+      pageviews: '@integer(100, 500)',
+      image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)'),
+      video_uri:
+        '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
+    })
+  )
 }
 
 const treeList: TreeListProps[] = []
 
 for (let i = 0; i < count; i++) {
-  treeList.push({
-    id: toAnyString(),
-    // timestamp: +Mock.Random.date('T'),
-    author: faker.person.firstName(),
-    title: faker.lorem.sentence(),
-    content: baseContent,
-    importance: faker.number.int({ min: 1, max: 3 }),
-    display_time: faker.date.anytime(),
-    pageviews: faker.number.int({ min: 300, max: 5000 }),
-    image_uri: faker.image.url({
-      width: faker.number.int({ min: 200, max: 400 }),
-      height: faker.number.int({ min: 200, max: 400 })
-    }),
-    video_uri:
-      '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
-    children: [
-      {
-        id: toAnyString(),
-        // timestamp: +Mock.Random.date('T'),
-        author: faker.person.firstName(),
-        title: faker.lorem.sentence(),
-        content: baseContent,
-        importance: faker.number.int({ min: 1, max: 3 }),
-        display_time: faker.date.anytime(),
-        pageviews: faker.number.int({ min: 300, max: 5000 }),
-        image_uri: faker.image.url({
-          width: faker.number.int({ min: 200, max: 400 }),
-          height: faker.number.int({ min: 200, max: 400 })
-        }),
-        video_uri:
-          '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
-        children: [
-          {
-            id: toAnyString(),
-            // timestamp: +Mock.Random.date('T'),
-            author: faker.person.firstName(),
-            title: faker.lorem.sentence(),
-            content: baseContent,
-            importance: faker.number.int({ min: 1, max: 3 }),
-            display_time: faker.date.anytime(),
-            pageviews: faker.number.int({ min: 300, max: 5000 }),
-            image_uri: faker.image.url({
-              width: faker.number.int({ min: 200, max: 400 }),
-              height: faker.number.int({ min: 200, max: 400 })
-            }),
-            video_uri:
-              '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
-          },
-          {
-            id: toAnyString(),
-            // timestamp: +Mock.Random.date('T'),
-            author: faker.person.firstName(),
-            title: faker.lorem.sentence(),
-            content: baseContent,
-            importance: faker.number.int({ min: 1, max: 3 }),
-            display_time: faker.date.anytime(),
-            pageviews: faker.number.int({ min: 300, max: 5000 }),
-            image_uri: faker.image.url({
-              width: faker.number.int({ min: 200, max: 400 }),
-              height: faker.number.int({ min: 200, max: 400 })
-            }),
-            video_uri:
-              '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
-          }
-        ]
-      },
-      {
-        id: toAnyString(),
-        // timestamp: +Mock.Random.date('T'),
-        author: faker.person.firstName(),
-        title: faker.lorem.sentence(),
-        content: baseContent,
-        importance: faker.number.int({ min: 1, max: 3 }),
-        display_time: faker.date.anytime(),
-        pageviews: faker.number.int({ min: 300, max: 5000 }),
-        image_uri: faker.image.url({
-          width: faker.number.int({ min: 200, max: 400 }),
-          height: faker.number.int({ min: 200, max: 400 })
-        }),
-        video_uri:
-          '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
-      },
-      {
-        id: toAnyString(),
-        // timestamp: +Mock.Random.date('T'),
-        author: faker.person.firstName(),
-        title: faker.lorem.sentence(),
-        content: baseContent,
-        importance: faker.number.int({ min: 1, max: 3 }),
-        display_time: faker.date.anytime(),
-        pageviews: faker.number.int({ min: 300, max: 5000 }),
-        image_uri: faker.image.url({
-          width: faker.number.int({ min: 200, max: 400 }),
-          height: faker.number.int({ min: 200, max: 400 })
-        }),
-        video_uri:
-          '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
-      },
-      {
-        id: toAnyString(),
-        // timestamp: +Mock.Random.date('T'),
-        author: faker.person.firstName(),
-        title: faker.lorem.sentence(),
-        content: baseContent,
-        importance: faker.number.int({ min: 1, max: 3 }),
-        display_time: faker.date.anytime(),
-        pageviews: faker.number.int({ min: 300, max: 5000 }),
-        image_uri: faker.image.url({
-          width: faker.number.int({ min: 200, max: 400 }),
-          height: faker.number.int({ min: 200, max: 400 })
-        }),
-        video_uri:
-          '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
-      }
-    ]
-    // image_uri
-  })
+  treeList.push(
+    Mock.mock({
+      id: toAnyString(),
+      // timestamp: +Mock.Random.date('T'),
+      author: '@first',
+      title: '@title(5, 10)',
+      content: baseContent,
+      importance: '@integer(1, 3)',
+      display_time: '@datetime',
+      pageviews: '@integer(300, 5000)',
+      children: [
+        {
+          id: toAnyString(),
+          // timestamp: +Mock.Random.date('T'),
+          author: '@first',
+          title: '@title(5, 10)',
+          content: baseContent,
+          importance: '@integer(1, 3)',
+          display_time: '@datetime',
+          pageviews: '@integer(300, 5000)',
+          children: [
+            {
+              id: toAnyString(),
+              // timestamp: +Mock.Random.date('T'),
+              author: '@first',
+              title: '@title(5, 10)',
+              content: baseContent,
+              importance: '@integer(1, 3)',
+              display_time: '@datetime',
+              pageviews: '@integer(300, 5000)'
+            },
+            {
+              id: toAnyString(),
+              // timestamp: +Mock.Random.date('T'),
+              author: '@first',
+              title: '@title(5, 10)',
+              content: baseContent,
+              importance: '@integer(1, 3)',
+              display_time: '@datetime',
+              pageviews: '@integer(300, 5000)'
+            }
+          ]
+        },
+        {
+          id: toAnyString(),
+          // timestamp: +Mock.Random.date('T'),
+          author: '@first',
+          title: '@title(5, 10)',
+          content: baseContent,
+          importance: '@integer(1, 3)',
+          display_time: '@datetime',
+          pageviews: '@integer(300, 5000)'
+        },
+        {
+          id: toAnyString(),
+          // timestamp: +Mock.Random.date('T'),
+          author: '@first',
+          title: '@title(5, 10)',
+          content: baseContent,
+          importance: '@integer(1, 3)',
+          display_time: '@datetime',
+          pageviews: '@integer(300, 5000)'
+        },
+        {
+          id: toAnyString(),
+          // timestamp: +Mock.Random.date('T'),
+          author: '@first',
+          title: '@title(5, 10)',
+          content: baseContent,
+          importance: '@integer(1, 3)',
+          display_time: '@datetime',
+          pageviews: '@integer(300, 5000)'
+        }
+      ]
+      // image_uri
+    })
+  )
 }
 
 const cardList = [
diff --git a/package.json b/package.json
index 0f2b4d7..945013f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "icon": "esno ./scripts/icon.ts"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.3.1",
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.0",
@@ -66,6 +65,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",
     "@types/lodash-es": "^4.17.12",
+    "@types/mockjs": "^1.0.10",
     "@types/node": "^20.10.5",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
@@ -91,6 +91,7 @@
     "inquirer": "^9.2.12",
     "less": "^4.2.0",
     "lint-staged": "^15.2.0",
+    "mockjs": "^1.1.0",
     "plop": "^4.0.0",
     "postcss": "^8.4.32",
     "postcss-html": "^1.5.0",
diff --git a/src/views/Components/Waterfall.vue b/src/views/Components/Waterfall.vue
index d556870..c56f8f8 100644
--- a/src/views/Components/Waterfall.vue
+++ b/src/views/Components/Waterfall.vue
@@ -2,7 +2,7 @@
 import { Waterfall } from '@/components/Waterfall'
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { faker } from '@faker-js/faker'
+import Mock from 'mockjs'
 import { ref, unref } from 'vue'
 import { toAnyString } from '@/utils'
 
@@ -12,17 +12,17 @@ const getList = () => {
   const list: any = []
   for (let i = 0; i < 20; i++) {
     // 随机 100, 500 之间的整数
-    const height = faker.number.int({ min: 100, max: 500 })
-    const width = faker.number.int({ min: 100, max: 500 })
-    list.push({
-      width,
-      height,
-      id: toAnyString(),
-      image_uri: faker.image.url({
+    const height = Mock.Random.integer(100, 500)
+    const width = Mock.Random.integer(100, 500)
+    list.push(
+      Mock.mock({
         width,
-        height
+        height,
+        id: toAnyString(),
+        // http更换为https
+        image_uri: Mock.Random.image(`${width}x${height}`).replace('http://', 'https://')
       })
-    })
+    )
   }
   data.value = [...unref(data), ...list]
   if (unref(data).length >= 60) {

From 4dbff1b6276a7dd7c1573166bd059bee21caa3b3 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 25 Dec 2023 17:45:09 +0800
Subject: [PATCH 16/19] =?UTF-8?q?chore:=20=E6=89=93=E5=8C=85=E9=80=9F?=
 =?UTF-8?q?=E5=BA=A6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index bb93edf..ec05a30 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -112,17 +112,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         }
       ]
     },
+    esbuild: {
+      pure: env.VITE_DROP_CONSOLE === 'true' ? ['console.log'] : undefined,
+      drop: env.VITE_DROP_DEBUGGER === 'true' ? ['debugger'] : undefined
+    },
     build: {
-      minify: 'terser',
+      target: 'es2015',
       outDir: env.VITE_OUT_DIR || 'dist',
       sourcemap: env.VITE_SOURCEMAP === 'true',
       // brotliSize: false,
-      terserOptions: {
-        compress: {
-          drop_debugger: env.VITE_DROP_DEBUGGER === 'true',
-          drop_console: env.VITE_DROP_CONSOLE === 'true'
-        }
-      },
       rollupOptions: {
         plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined,
         // 拆包

From b2cee10cc4188a0e0b8a08ef99973530eb3e2a9b Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 25 Dec 2023 17:55:07 +0800
Subject: [PATCH 17/19] =?UTF-8?q?chore:=20=E6=96=B0=E5=A2=9Ecss=E6=89=93?=
 =?UTF-8?q?=E5=8C=85=E6=98=AF=E5=90=A6=E5=88=87=E5=89=B2=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev       | 5 ++++-
 .env.gitee     | 5 ++++-
 .env.pro       | 5 ++++-
 .env.test      | 5 ++++-
 vite.config.ts | 3 ++-
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/.env.dev b/.env.dev
index cb0be81..6405df1 100644
--- a/.env.dev
+++ b/.env.dev
@@ -29,4 +29,7 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
\ No newline at end of file
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=false
\ No newline at end of file
diff --git a/.env.gitee b/.env.gitee
index ca743dd..45941a8 100644
--- a/.env.gitee
+++ b/.env.gitee
@@ -29,4 +29,7 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
\ No newline at end of file
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=false
\ No newline at end of file
diff --git a/.env.pro b/.env.pro
index f06aee1..ed25618 100644
--- a/.env.pro
+++ b/.env.pro
@@ -29,4 +29,7 @@ VITE_USE_BUNDLE_ANALYZER=true
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
\ No newline at end of file
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=false
\ No newline at end of file
diff --git a/.env.test b/.env.test
index 50e5c83..e4a77bf 100644
--- a/.env.test
+++ b/.env.test
@@ -29,4 +29,7 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
\ No newline at end of file
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=false
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index ec05a30..16c8541 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -132,7 +132,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
             echarts: ['echarts', 'echarts-wordcloud']
           }
         }
-      }
+      },
+      cssCodeSplit: !(env.VITE_USE_CSS_SPLIT === 'false')
     },
     server: {
       port: 4000,

From 608bf50e1cae49b7f97587395f794ae351f833f0 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 26 Dec 2023 09:59:07 +0800
Subject: [PATCH 18/19] =?UTF-8?q?style:=20=E6=9C=AC=E5=9C=B0=E5=8C=96?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  1 -
 src/components/Icon/src/Icon.vue | 20 ++++++++++++--------
 uno.config.ts                    | 16 +++++++++++++---
 vite.config.ts                   |  2 +-
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 945013f..72d01a0 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
   },
   "dependencies": {
     "@iconify/iconify": "^3.1.1",
-    "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
index 008fd8a..4769ec4 100644
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@@ -3,7 +3,6 @@ import { computed, unref } from 'vue'
 import { ElIcon } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
-import { Icon } from '@iconify/vue'
 
 const { getPrefixCls } = useDesign()
 
@@ -40,20 +39,25 @@ const getIconifyStyle = computed(() => {
       <use :xlink:href="symbolId" />
     </svg>
 
-    <Icon v-else :icon="icon" :style="getIconifyStyle" />
+    <!-- <Icon v-else :icon="icon" :style="getIconifyStyle" /> -->
+    <div :class="`${icon} iconify`" :style="getIconifyStyle"></div>
   </ElIcon>
 </template>
 
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-icon';
 
-.@{prefix-cls},
-.iconify {
-  &:hover {
-    :deep(svg) {
-      // stylelint-disable-next-line
-      color: v-bind(hoverColor) !important;
+.@{prefix-cls} {
+  :deep(svg) {
+    &:hover {
+      color: v-bind(hovercolor) !important;
     }
   }
 }
+
+.iconify {
+  &:hover {
+    color: v-bind(hovercolor) !important;
+  }
+}
 </style>
diff --git a/uno.config.ts b/uno.config.ts
index 383e1c3..2eea413 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
+import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 
 export default defineConfig({
@@ -111,6 +111,16 @@ ${selector}:after {
       }
     ]
   ],
-  presets: [presetUno({ dark: 'class', attributify: false })],
-  transformers: [transformerVariantGroup()]
+  presets: [
+    presetUno({ dark: 'class', attributify: false }),
+    presetIcons({
+      prefix: ''
+    })
+  ],
+  transformers: [transformerVariantGroup()],
+  content: {
+    pipeline: {
+      include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|ts)($|\?)/]
+    }
+  }
 })
diff --git a/vite.config.ts b/vite.config.ts
index 16c8541..9a46e50 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -126,7 +126,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         // 拆包
         output: {
           manualChunks: {
-            vue: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
+            'vue-chunks': ['vue', 'vue-router', 'pinia', 'vue-i18n'],
             'element-plus': ['element-plus'],
             'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue'],
             echarts: ['echarts', 'echarts-wordcloud']

From 16b93757d32c8ce2f611a62d6015072b0ecfc09a Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 26 Dec 2023 11:04:14 +0800
Subject: [PATCH 19/19] =?UTF-8?q?style:=20=E6=B7=BB=E5=8A=A0=E5=B8=B8?=
 =?UTF-8?q?=E8=A7=81=E9=97=AE=E9=A2=98=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 18 +++++++++---------
 src/components/Icon/src/Icon.vue |  6 ++++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4a1c89d..840ff90 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useDark } from '@vueuse/core'
-// import { ElNotification } from 'element-plus'
+import { ElNotification } from 'element-plus'
 
 const { getPrefixCls } = useDesign()
 
@@ -22,14 +22,14 @@ const isDark = useDark({
 })
 
 isDark.value = appStore.getIsDark
-// ElNotification({
-//   title: '提示',
-//   type: 'warning',
-//   duration: 0,
-//   dangerouslyUseHTMLString: true,
-//   message:
-//     '<div><p><strong>遇事不决，请先查阅常见问题，说不定你能找到相关解答</strong></p><p><a href="https://www.baidu.com" target="_blank">链接地址</a></p></div>'
-// })
+ElNotification({
+  title: '提示',
+  type: 'warning',
+  duration: 0,
+  dangerouslyUseHTMLString: true,
+  message:
+    '<div><p><strong>遇事不决，请先查阅常见问题，说不定你能找到相关解答</strong></p><p><a href="https://element-plus-admin-doc.cn/guide/fqa.html" target="_blank">链接地址</a></p></div>'
+})
 </script>
 
 <template>
diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
index 4769ec4..bb36164 100644
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@@ -50,14 +50,16 @@ const getIconifyStyle = computed(() => {
 .@{prefix-cls} {
   :deep(svg) {
     &:hover {
-      color: v-bind(hovercolor) !important;
+      // stylelint-disable-next-line
+      color: v-bind(hoverColor) !important;
     }
   }
 }
 
 .iconify {
   &:hover {
-    color: v-bind(hovercolor) !important;
+    // stylelint-disable-next-line
+    color: v-bind(hoverColor) !important;
   }
 }
 </style>