更新依赖

.github/workflows/deploy-example-site.yml

@@ -53,7 +53,7 @@ jobs:
         run: nr build:example
 
       - name: deploy
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           deploy_key: ${{ secrets.PUSH_TO_ANOTHER_REPO_SSH_DEPLOY_KEY }}
           external_repository: fantastic-admin/basic-example

package.json

@@ -23,17 +23,17 @@
     "@bytemd/vue-next": "^1.21.0",
     "@headlessui/vue": "^1.7.22",
     "@imengyu/vue3-context-menu": "^1.4.1",
-    "@tinymce/tinymce-vue": "^5.1.1",
+    "@tinymce/tinymce-vue": "^6.0.1",
     "@visactor/vchart": "^1.11.3",
-    "@vueuse/core": "^10.10.0",
+    "@vueuse/core": "^10.11.0",
-    "@vueuse/integrations": "^10.10.0",
+    "@vueuse/integrations": "^10.11.0",
     "animate.css": "^4.1.1",
     "axios": "^1.7.2",
     "bytemd": "^1.21.0",
     "dayjs": "^1.11.11",
     "defu": "^6.1.4",
     "echarts": "^5.5.0",
-    "element-plus": "^2.7.4",
+    "element-plus": "^2.7.5",
     "eruda": "^3.0.1",
     "floating-vue": "5.2.2",
     "hotkeys-js": "^3.13.7",
@@ -54,19 +54,19 @@
     "swiper": "^11.1.4",
     "tinymce": "^7.1.2",
     "vconsole": "^3.15.1",
-    "vue": "^3.4.27",
+    "vue": "^3.4.29",
     "vue-currency-input": "^3.1.0",
     "vue-esign": "^1.1.4",
-    "vue-hooks-plus": "^2.1.0",
+    "vue-hooks-plus": "^2.2.0",
     "vue-m-message": "^4.0.2",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.3.3",
     "vue3-count-to": "^1.1.2",
-    "vxe-table": "^4.6.17",
+    "vxe-table": "^4.7.16",
-    "xe-utils": "^3.5.26"
+    "xe-utils": "^3.5.27"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.20.0",
+    "@antfu/eslint-config": "2.21.1",
-    "@iconify/json": "^2.2.217",
+    "@iconify/json": "^2.2.219",
     "@iconify/vue": "^4.1.2",
     "@stylistic/stylelint-config": "^1.0.1",
     "@types/lodash-es": "^4.17.12",
@@ -76,24 +76,24 @@
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.15",
     "@types/splitpanes": "^2.2.6",
-    "@unocss/eslint-plugin": "^0.60.4",
+    "@unocss/eslint-plugin": "^0.61.0",
     "@vitejs/plugin-legacy": "^5.4.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "archiver": "^7.0.1",
     "autoprefixer": "^10.4.19",
     "boxen": "^7.1.1",
-    "eslint": "^9.4.0",
+    "eslint": "^9.5.0",
     "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
     "inquirer": "^9.2.23",
-    "lint-staged": "^15.2.5",
+    "lint-staged": "^15.2.7",
     "npm-run-all2": "^6.2.0",
     "picocolors": "^1.0.1",
     "plop": "^4.0.1",
     "postcss": "^8.4.38",
-    "sass": "^1.77.4",
+    "sass": "^1.77.5",
     "simple-git-hooks": "^2.11.1",
     "stylelint": "^16.6.1",
     "stylelint-config-recess-order": "^5.0.1",
@@ -102,11 +102,11 @@
     "stylelint-scss": "^6.3.1",
     "svgo": "^3.3.2",
     "typescript": "^5.4.5",
-    "unocss": "^0.60.4",
+    "unocss": "^0.61.0",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-turbo-console": "^1.8.6",
     "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.2.12",
+    "vite": "^5.3.1",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-compression2": "^1.1.1",
     "vite-plugin-fake-server": "^2.1.1",
@@ -114,7 +114,7 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-devtools": "^7.2.1",
     "vite-plugin-vue-meta-layouts": "^0.4.3",
-    "vue-tsc": "^2.0.19"
+    "vue-tsc": "^2.0.21"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

src/main.ts

@@ -8,8 +8,10 @@ import 'floating-vue/dist/style.css'
 import Message from 'vue-m-message'
 import 'vue-m-message/dist/style.css'
 
-import VXETable from 'vxe-table'
+import VxeUITable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
 
 import 'overlayscrollbars/overlayscrollbars.css'
 
@@ -38,7 +40,7 @@ app.use(FloatingVue, {
   distance: 12,
 })
 app.use(Message)
-app.use(VXETable)
+app.use(VxeUI).use(VxeUITable)
 app.use(pinia)
 app.use(router)
 app.use(ui)

src/views/plugin_example/vxe-table.vue

@@ -4,75 +4,32 @@ meta:
 </route>
 
 <script setup lang="ts">
-import type { VxeColumnPropTypes } from 'vxe-table'
+import VxeUITable from 'vxe-table'
 import Alert from './components/alert.vue'
+import useSettingsStore from '@/store/modules/settings'
 
-const demo1 = reactive({
+const settingsStore = useSettingsStore()
-  loading: false,
+watch(() => settingsStore.currentColorScheme, () => {
-  tableData: [] as any[],
+  VxeUITable.setTheme(settingsStore.currentColorScheme!)
-  sexList: [
+}, {
-    {
+  immediate: true,
-      label: '女',
-      value: '0',
-    },
-    {
-      label: '男',
-      value: '1',
-    },
-  ],
-  ageList: [
-    {
-      label: '大于16岁',
-      value: 16,
-    },
-    {
-      label: '大于26岁',
-      value: 26,
-    },
-    {
-      label: '大于30岁',
-      value: 30,
-    },
-  ],
 })
 
-const formatterSex: VxeColumnPropTypes.Formatter = ({ cellValue }) => {
+interface RowVO {
-  const item = demo1.sexList.find(item => item.value === cellValue)
+  id: number
-  return item ? item.label : ''
+  name: string
+  role: string
+  sex: string
+  age: number
+  address: string
 }
 
-const filterAgeMethod: VxeColumnPropTypes.FilterMethod = ({ value, row }) => {
+const tableData = ref<RowVO[]>([
-  return row.age >= value
+  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
-}
+  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
-
+  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
-onMounted(() => {
+  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
-  demo1.loading = true
+])
-  setTimeout(() => {
-    demo1.tableData = [
-      { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
-      { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
-      { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
-      { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
-      { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
-      { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' },
-      { id: 10007, name: 'Test7', role: 'Test', sex: '0', age: 29, address: 'test abc' },
-      { id: 10008, name: 'Test8', role: 'Develop', sex: '0', age: 35, address: 'test abc' },
-      { id: 10009, name: 'Test9', role: 'Test', sex: '1', age: 21, address: 'test abc' },
-      { id: 10010, name: 'Test10', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
-      { id: 10011, name: 'Test11', role: 'Test', sex: '0', age: 29, address: 'test abc' },
-      { id: 10012, name: 'Test12', role: 'Develop', sex: '1', age: 27, address: 'test abc' },
-      { id: 10013, name: 'Test13', role: 'Test', sex: '0', age: 24, address: 'test abc' },
-      { id: 10014, name: 'Test14', role: 'Develop', sex: '1', age: 34, address: 'test abc' },
-      { id: 10015, name: 'Test15', role: 'Test', sex: '1', age: 21, address: 'test abc' },
-      { id: 10016, name: 'Test16', role: 'Develop', sex: '0', age: 20, address: 'test abc' },
-      { id: 10017, name: 'Test17', role: 'Test', sex: '1', age: 31, address: 'test abc' },
-      { id: 10018, name: 'Test18', role: 'Develop', sex: '0', age: 32, address: 'test abc' },
-      { id: 10019, name: 'Test19', role: 'Test', sex: '1', age: 37, address: 'test abc' },
-      { id: 10020, name: 'Test20', role: 'Develop', sex: '1', age: 41, address: 'test abc' },
-    ]
-    demo1.loading = false
-  }, 500)
-})
 
 function open(url: string) {
   window.open(url, '_blank')
@@ -97,23 +54,12 @@ function open(url: string) {
       </ElButton>
     </PageHeader>
     <PageMain>
-      <VxeTable
+      <vxe-table :data="tableData">
-
+        <vxe-column type="seq" width="60" />
-        stripe border
+        <vxe-column field="name" title="Name" />
-        height="400"
+        <vxe-column field="sex" title="Sex" />
-        :loading="demo1.loading"
+        <vxe-column field="age" title="Age" />
-        :column-config="{ resizable: true }"
+      </vxe-table>
-        :row-config="{ isHover: true }"
-        :checkbox-config="{ labelField: 'id', highlight: true, range: true }"
-        :data="demo1.tableData"
-      >
-        <VxeColumn type="seq" width="60" />
-        <VxeColumn type="checkbox" title="ID" width="140" />
-        <VxeColumn field="name" title="Name" sortable />
-        <VxeColumn field="sex" title="Sex" :filters="demo1.sexList" :formatter="formatterSex" />
-        <VxeColumn field="age" title="Age" sortable :filters="demo1.ageList" :filter-multiple="false" :filter-method="filterAgeMethod" />
-        <VxeColumn field="address" title="Address" show-overflow />
-      </VxeTable>
     </PageMain>
   </div>
 </template>