fix: #113 (#116 )

* fix(slot): 优化部分slot写法,减少手动判断 * fix(slot): 优化部分slot写法,减少手动判断 * feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 * feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 * fix: 完善table总条数不显示问题
feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 (#105 )
2026-01-22 23:50:22 +08:00 · 2025-03-19 09:15:41 +08:00 · 2024-11-22 15:47:29 +08:00 · 2024-11-13 11:05:03 +08:00 · 2024-10-29 15:14:04 +08:00 · 2024-10-22 15:27:46 +08:00
50 changed files with 3028 additions and 1784 deletions
--- a/.eslint-global-variables.json
+++ b/.eslint-global-variables.json
@@ -1,63 +0,0 @@
-{
-  "globals": {
-    "$loadingBar": true,
-    "$message": true,
-    "$dialog": true,
-    "$notification": true,
-    "$modal": true,
-    "defineOptions": true,
-    "EffectScope": true,
-    "computed": true,
-    "createApp": true,
-    "customRef": true,
-    "defineAsyncComponent": true,
-    "defineComponent": true,
-    "effectScope": true,
-    "getCurrentInstance": true,
-    "getCurrentScope": true,
-    "h": true,
-    "inject": true,
-    "isProxy": true,
-    "isReactive": true,
-    "isReadonly": true,
-    "isRef": true,
-    "markRaw": true,
-    "nextTick": true,
-    "onActivated": true,
-    "onBeforeMount": true,
-    "onBeforeUnmount": true,
-    "onBeforeUpdate": true,
-    "onDeactivated": true,
-    "onErrorCaptured": true,
-    "onMounted": true,
-    "onRenderTracked": true,
-    "onRenderTriggered": true,
-    "onScopeDispose": true,
-    "onServerPrefetch": true,
-    "onUnmounted": true,
-    "onUpdated": true,
-    "provide": true,
-    "reactive": true,
-    "readonly": true,
-    "ref": true,
-    "resolveComponent": true,
-    "shallowReactive": true,
-    "shallowReadonly": true,
-    "shallowRef": true,
-    "toRaw": true,
-    "toRef": true,
-    "toRefs": true,
-    "triggerRef": true,
-    "unref": true,
-    "useAttrs": true,
-    "useCssModule": true,
-    "useCssVars": true,
-    "useRoute": true,
-    "useRouter": true,
-    "useSlots": true,
-    "watch": true,
-    "watchEffect": true,
-    "watchPostEffect": true,
-    "watchSyncEffect": true
-  }
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -20,5 +20,12 @@
    "json",
    "jsonc"
  ],
-  "common-intellisense.ui": ["naiveUi2"]
+  "common-intellisense.ui": [
+    "naiveUi2"
+  ],
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#233212",
+    "titleBar.activeBackground": "#314619",
+    "titleBar.activeForeground": "#F9FCF6"
+  }
 }
--- a/README.md
+++ b/README.md
@@ -83,8 +83,6 @@ npx degit zclzone/vue-naive-admin
 - [naive-admin-go](https://github.com/ituserxxx/naive-admin-go): 一个 Go 后端服务，基于 gin、gorm、mysql、jwt和session，已对接 Vue Naive Admin 2.0。
 - [isme-java](https://github.com/AllenDengMs/isme-java): 一个轻量且完成度高的Java后端服务，基于Springboot 3 + JDK21，层次结构严谨，注释齐全，避免过度封装，代码可读性度高，依赖最简化，上手成本低，已集成 账号管理、权限管理、API鉴权、消息国际化等功能。

-## 入群交流
+## 联系作者 or 进交流群

-添加微信，拉你进群
-
-![](https://static.isme.top/image/coder_wx.jpg)
+[https://www.isme.top/contact.html](https://www.isme.top/contact.html)
--- a/build/plugin-isme/index.js
+++ b/build/plugin-isme/index.js
@@ -6,5 +6,5 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-export { pluginPagePathes } from './page-pathes'
 export { pluginIcons } from './icons'
+export { pluginPagePathes } from './page-pathes'
--- a/package.json
+++ b/package.json
@@ -13,41 +13,46 @@
  },
  "dependencies": {
    "@arco-design/color": "^0.4.0",
-    "@vueuse/core": "^10.11.1",
-    "axios": "^1.7.3",
-    "dayjs": "^1.11.12",
+    "@vueuse/core": "^11.1.0",
+    "axios": "^1.7.7",
+    "dayjs": "^1.11.13",
    "echarts": "^5.5.1",
+    "exceljs": "^4.4.0",
    "lodash-es": "^4.17.21",
-    "naive-ui": "^2.39.0",
-    "pinia": "^2.2.1",
-    "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.4.37",
-    "vue-echarts": "^6.7.3",
-    "vue-router": "^4.4.3",
+    "naive-ui": "^2.40.1",
+    "pinia": "^2.2.4",
+    "pinia-plugin-persistedstate": "^4.1.1",
+    "vue": "^3.5.12",
+    "vue-echarts": "^7.0.3",
+    "vue-router": "^4.4.5",
+    "vxe-pc-ui": "4.2.5",
+    "vxe-table": "4.8.13",
+    "vxe-table-plugin-export-xlsx": "^4.0.4",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^2.25.1",
-    "@iconify/json": "^2.2.235",
-    "@unocss/eslint-config": "^0.61.9",
-    "@unocss/eslint-plugin": "^0.61.9",
-    "@unocss/preset-rem-to-px": "^0.61.9",
-    "@vitejs/plugin-vue": "^5.1.2",
-    "eslint": "^9.9.0",
+    "@antfu/eslint-config": "^3.8.0",
+    "@iconify/json": "^2.2.262",
+    "@unocss/eslint-config": "^0.63.6",
+    "@unocss/eslint-plugin": "^0.63.6",
+    "@unocss/preset-rem-to-px": "^0.63.6",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "eslint": "^9.13.0",
    "eslint-plugin-format": "^0.1.2",
-    "esno": "^4.7.0",
+    "esno": "^4.8.0",
    "fs-extra": "^11.2.0",
-    "lint-staged": "^15.2.8",
+    "glob": "^11.0.0",
+    "lint-staged": "^15.2.10",
    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.8",
    "simple-git-hooks": "^2.11.1",
-    "taze": "^0.16.3",
-    "unocss": "^0.61.9",
-    "unplugin-auto-import": "^0.18.2",
-    "unplugin-vue-components": "^0.27.3",
-    "vite": "^5.4.0",
+    "taze": "^0.17.2",
+    "unocss": "^0.63.6",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.9",
    "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-devtools": "^7.3.7"
+    "vite-plugin-vue-devtools": "^7.5.2"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,9 +16,11 @@
  >
    <router-view v-if="Layout" v-slot="{ Component, route: curRoute }">
      <component :is="Layout">
+        <transition name="fade-slide" mode="out-in" appear>
          <KeepAlive :include="keepAliveNames">
            <component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
          </KeepAlive>
+        </transition>
      </component>

      <LayoutSetting v-if="layoutSettingVisible" class="fixed right-12 top-1/2 z-999" />
@@ -27,10 +29,10 @@
 </template>

 <script setup>
-import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
-import { layoutSettingVisible } from './settings'
 import { LayoutSetting } from '@/components'
 import { useAppStore, useTabStore } from '@/store'
+import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
+import { layoutSettingVisible } from './settings'

 const layouts = new Map()
 function getLayout(name) {
--- a/src/components/common/AppPage.vue
+++ b/src/components/common/AppPage.vue
@@ -8,13 +8,12 @@

 <template>
  <main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212">
-    <transition name="fade-slide" mode="out-in" appear>
    <main :class="{ 'flex-1': full }" class="m-12">
      <slot />
    </main>
-    </transition>
-    <slot v-if="$slots.footer" name="footer" />
-    <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
+    <slot name="footer">
+      <TheFooter v-if="showFooter" class="mb-12 mt-auto" />
+    </slot>
    <n-back-top :bottom="20" />
  </main>
 </template>
--- a/src/components/common/CommonPage.vue
+++ b/src/components/common/CommonPage.vue
@@ -7,8 +7,7 @@
 --------------------------------->

 <template>
-  <main class="h-full flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
-    <div class="h-full flex-col">
+  <main class="h-full flex-col flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
    <AppCard
      v-if="showHeader"
      class="sticky top-0 z-1 min-h-60 flex items-center justify-between px-24"
@@ -17,8 +16,8 @@
      <slot v-if="$slots.header" name="header" />
      <template v-else>
        <div class="flex items-center">
-            <slot v-if="$slots['title-prefix']" name="title-prefix" />
-            <template v-else-if="back">
+          <slot name="title-prefix">
+            <template v-if="back">
              <div
                class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
                @click="router.back()"
@@ -27,6 +26,8 @@
                <span class="ml-4">返回</span>
              </div>
            </template>
+          </slot>
+
          <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary" />
          <h2 class="font-normal">
            {{ title ?? route.meta?.title }}
@@ -36,20 +37,16 @@
        <slot name="action" />
      </template>
    </AppCard>
-      <transition name="fade-slide" mode="out-in" appear>
    <AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered>
      <slot />
    </AppCard>
-      </transition>
-    </div>
-  </main>

-  <footer class="bg-#f5f6fb dark:bg-#121212">
-    <slot v-if="$slots.footer" name="footer" />
-    <AppCard v-else-if="showFooter" class="py-12">
+    <slot name="footer">
+      <AppCard v-if="showFooter" class="flex-shrink-0 py-12">
        <TheFooter />
      </AppCard>
-  </footer>
+    </slot>
+  </main>
 </template>

 <script setup>
--- a/src/components/common/LayoutSetting.vue
+++ b/src/components/common/LayoutSetting.vue
@@ -94,8 +94,8 @@

 <script setup>
 import { MeModal } from '@/components'
-import { useAppStore } from '@/store'
 import { useModal } from '@/composables'
+import { useAppStore } from '@/store'

 const appStore = useAppStore()
 const [modalRef] = useModal()
--- a/src/components/common/MeVxeGrid.vue
+++ b/src/components/common/MeVxeGrid.vue
@@ -0,0 +1,240 @@
+<template>
+  <div
+    :style="isComputedHeight ? `height: calc(100% - ${autoHeight}px);` : `height: ${autoHeight}px`"
+  >
+    <vxe-grid
+      ref="gridRef"
+      :columns="vxeColumns"
+      :loading="loading"
+      :data="data"
+      height="auto"
+      :stripe="true"
+      :border="true"
+      size="mini"
+      :auto-resize="true"
+      :pager-config="pagerConfig"
+      :export-config="exportConfig"
+      :toolbar-config="vxeToolbarConfig"
+      :proxy-config="proxyConfig"
+      v-on="gridEvent"
+    >
+      <template #loading>
+        <n-spin :show="loading" />
+      </template>
+      <template #total>
+        <span class="font-size-14 line-height-28px">共 {{ pagerConfig.total }} 条数据</span>
+      </template>
+      <template v-for="(c, k) in slots" :key="k" #[c.key]="{ row }">
+        <template v-if="Array.isArray(c.render(row))">
+          <component :is="r" v-for="(r, k1) in c.render(row)" :key="k1" :row="row" :col="c" />
+        </template>
+        <template v-else>
+          <component :is="c.render(row)" :row="row" :col="c" />
+        </template>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'MeVxeGrid' })
+const props = defineProps({
+  /**
+   * @remote 当isComputedHeight为true时为除table外的高度 false时为table高度
+   */
+  autoHeight: {
+    type: Number,
+    default: 300,
+  },
+  /**
+   * @isPagination 是否为自动计算高度
+   */
+  isComputedHeight: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @remote table的列
+   */
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+
+  pagination: {
+    type: [Boolean, Object],
+    default: true,
+  },
+
+  exportConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  toolbarConfig: {
+    type: Object,
+    default: () => ({ }),
+  },
+  /**
+   * 是否显示复选框
+   */
+  showCheck: {
+    type: Boolean,
+    default: false,
+  },
+  rowKey: {
+    type: String, // rowKey
+    default: 'id',
+  },
+
+  exportMethod: {
+    type: Function,
+    default: () => null,
+  },
+  remoteMethod: {
+    type: Function,
+    default: () => null,
+  },
+})
+const emits = defineEmits(['update:checked-row-keys', 'pageChanged'])
+const isFirst = shallowRef(true)
+const gridRef = ref(null)
+
+watch(
+  () => props.data,
+  (n) => {
+    isFirst.value = false
+    gridRef.value.reloadData(n)
+  },
+)
+
+const vxeToolbarConfig = computed(() => {
+  return {
+    size: 'mini',
+    className: 'c-toolbar',
+    perfect: true,
+    refresh: true,
+    export: true,
+    zoom: true,
+    custom: true,
+    ...props.toolbarConfig,
+  }
+})
+const pagerConfig = computed(() => {
+  if (props.pagination === false) {
+    return {
+      enabled: false,
+    }
+  }
+  return {
+    currentPage: props.pagination.pageNo,
+    pageSize: props.pagination.pageSize,
+    total: props.pagination.itemCount || 0,
+    background: true,
+    size: 'small',
+    layouts: [
+      'Home',
+      'PrevPage',
+      'JumpNumber',
+      'NextPage',
+      'End',
+      'Sizes',
+      'FullJump',
+      // 'Total',
+    ],
+    slots: {
+      right: 'total',
+    },
+  }
+})
+/**
+ * 将naive 转为vxe-table可用的列
+ */
+const vxeColumns = computed(() => {
+  if (props.showCheck) {
+    return [{
+      type: 'checkbox',
+      resizable: false,
+      width: 45,
+      align: 'center',
+      fixed: 'left',
+    }, ...props.columns.map((item) => {
+      item.field = item.key
+      if (item.render) {
+        item.slots = { default: item.key }
+      }
+      return item
+    })]
+  }
+  return props.columns.map((item) => {
+    item.field = item.key
+    if (item.render) {
+      item.slots = { default: item.key }
+    }
+    return item
+  })
+})
+
+/**
+ * 将naive render函数转换为vxeTable的slots
+ */
+const slots = computed(() => {
+  return props.columns.filter(item => item.render)
+})
+
+const gridEvent = {
+  checkboxAll() {
+    const $grid = gridRef.value
+    if ($grid) {
+      emits(
+        'update:checked-row-keys',
+        $grid.getCheckboxRecords().map(item => item[props.rowKey]),
+      )
+    }
+  },
+  checkboxChange() {
+    const $grid = gridRef.value
+    if ($grid) {
+      emits(
+        'update:checked-row-keys',
+        $grid.getCheckboxRecords().map(item => item[props.rowKey]),
+      )
+    }
+  },
+  pageChange(e) {
+    emits('pageChanged', e)
+  },
+}
+
+const proxyConfig = {
+  props: {
+    result: 'data.pageData',
+    total: 'data.total',
+  },
+  ajax: {
+    query: async ({ page }) => {
+      if (isFirst.value === true) {
+        return Promise.reject('')
+      }
+      props.remoteMethod(page.currentPage, page.pageSize)
+    },
+    queryAll: async () => {
+      const res = await props.exportMethod()
+      return res
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/common/ThemeSetting.vue
+++ b/src/components/common/ThemeSetting.vue
@@ -14,8 +14,8 @@
 </template>

 <script setup>
-import { getPresetColors } from '@arco-design/color'
 import { useAppStore } from '@/store'
+import { getPresetColors } from '@arco-design/color'

 const appStore = useAppStore()

--- a/src/components/common/ToggleTheme.vue
+++ b/src/components/common/ToggleTheme.vue
@@ -7,8 +7,8 @@
 </template>

 <script setup>
-import { useDark, useToggle } from '@vueuse/core'
 import { useAppStore } from '@/store'
+import { useDark, useToggle } from '@vueuse/core'

 const appStore = useAppStore()
 const isDark = useDark()
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -1,6 +1,7 @@
 export { default as AppCard } from './AppCard.vue'
-export { default as TheFooter } from './TheFooter.vue'
 export { default as AppPage } from './AppPage.vue'
 export { default as CommonPage } from './CommonPage.vue'
 export { default as LayoutSetting } from './LayoutSetting.vue'
+export { default as MeVxeGrid } from './MeVxeGrid.vue'
+export { default as TheFooter } from './TheFooter.vue'
 export { default as ToggleTheme } from './ToggleTheme.vue'
--- a/src/components/me/crud/index.vue
+++ b/src/components/me/crud/index.vue
@@ -7,6 +7,8 @@
 --------------------------------->

 <template>
+  <div :class="computedHeight === true ? 'h-100%' : ''">
+    <div id="search_main">
      <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
        <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
          <n-scrollbar x-scrollable>
@@ -37,8 +39,27 @@
          </div>
        </form>
      </AppCard>
+    </div>
+    <MeVxeGrid
+      :remote="remote"
+      :loading="loading"
+      :scroll-x="scrollX"
+      :columns="columns"
+      :export-config="{ filename: exportName, modes: ['all', 'current'] }"
+      :toolbar-config="toolbarConfig"
+      :data="tableData"
+      :auto-height="computedHeight === true ? autoHeight : computedHeight"
+      :row-key="rowKey"
+      :is-computed-height="computedHeight === true"
+      :show-check="showCheck"
+      :pagination="isPagination ? pagination : false"
+      :remote-method="remoteMethod"
+      :export-method="exportMethod"
+      @update:checked-row-keys="onChecked"
+      @update:page="onPageChange"
+    />

-  <NDataTable
+  <!-- <NDataTable
    :remote="remote"
    :loading="loading"
    :scroll-x="scrollX"
@@ -48,14 +69,39 @@
    :pagination="isPagination ? pagination : false"
    @update:checked-row-keys="onChecked"
    @update:page="onPageChange"
-  />
+  /> -->
+  </div>
 </template>

 <script setup>
-import { NDataTable } from 'naive-ui'
 import { utils, writeFile } from 'xlsx'

 const props = defineProps({
+  /**
+   * 是否自动计算高度，适用只有search和table
+   */
+  computedHeight: {
+    type: [Boolean, Number],
+    default: () => true,
+  },
+  showCheck: {
+    type: Boolean,
+    default: () => false,
+  },
+  toolbarConfig: {
+    type: Object,
+    default: () => ({
+      export: true,
+      zoom: true,
+    }),
+  },
+  /**
+   * @remote 导出数据表格名称
+   */
+  exportName: {
+    type: String,
+    default: '导出数据',
+  },
  /**
   * @remote true: 后端分页  false： 前端分页
   */
@@ -105,8 +151,18 @@ const props = defineProps({
  /** 是否支持展开 */
  expand: Boolean,
 })
-
 const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+
+const autoHeight = ref(0)
+
+window.onresize = () => {
+  autoHeight.value = document.getElementById('search_main').clientHeight + 24
+}
+
+onMounted(() => {
+  autoHeight.value = document.getElementById('search_main').clientHeight + 24
+})
+
 const loading = ref(false)
 const initQuery = { ...props.queryItems }
 const tableData = ref([])
@@ -125,6 +181,22 @@ function toggleExpand() {
  isExpanded.value = !isExpanded.value
 }

+async function exportMethod() {
+  const { data } = await props.getData({
+    pageNo: 1,
+    pageSize: 2000,
+    ...props.queryItems,
+  })
+  return data
+}
+
+function remoteMethod(page, pageSize) {
+  pagination.page = page
+  pagination.pageSize = pageSize
+
+  handleQuery()
+}
+
 async function handleQuery() {
  try {
    loading.value = true
@@ -143,6 +215,7 @@ async function handleQuery() {
      // 如果当前页数据为空，且总条数不为0，则返回上一页数据
      onPageChange(pagination.page - 1)
    }
+    return data
  }
  catch (error) {
    console.error(error)
@@ -180,10 +253,8 @@ function onPageChange(currentPage) {
  }
 }
 function onChecked(rowKeys) {
-  if (props.columns.some(item => item.type === 'selection')) {
  emit('onChecked', rowKeys)
 }
-}
 function handleExport(columns = props.columns, data = tableData.value) {
  if (!data?.length)
    return $message.warning('没有数据')
--- a/src/components/me/index.js
+++ b/src/components/me/index.js
@@ -1,3 +1,3 @@
-export { default as MeModal } from './modal/index.vue'
 export { default as MeCrud } from './crud/index.vue'
 export { default as MeQueryItem } from './crud/QueryItem.vue'
+export { default as MeModal } from './modal/index.vue'
--- a/src/components/me/modal/index.vue
+++ b/src/components/me/modal/index.vue
@@ -26,8 +26,8 @@

      <!-- 底部按钮 -->
      <template #footer>
-        <slot v-if="$slots.footer" name="footer" />
-        <footer v-else-if="modalOptions.showFooter" class="flex justify-end">
+        <slot name="footer">
+          <footer v-if="modalOptions.showFooter" class="flex justify-end">
            <n-button v-if="modalOptions.showCancel" @click="handleCancel()">
              {{ modalOptions.cancelText }}
            </n-button>
@@ -41,6 +41,7 @@
              {{ modalOptions.okText }}
            </n-button>
          </footer>
+        </slot>
      </template>
    </n-card>
  </n-modal>
--- a/src/composables/index.js
+++ b/src/composables/index.js
@@ -1,4 +1,4 @@
+export * from './useAliveData'
 export * from './useCrud'
 export * from './useForm'
 export * from './useModal'
-export * from './useAliveData'
--- a/src/layouts/components/SideMenu.vue
+++ b/src/layouts/components/SideMenu.vue
@@ -59,7 +59,7 @@ function handleMenuSelect(key, item) {
 }
 </script>

-<style lang="scss">
+<style>
 .side-menu:not(.n-menu--collapsed) {
  .n-menu-item-content {
    &::before {
--- a/src/layouts/components/UserAvatar.vue
+++ b/src/layouts/components/UserAvatar.vue
@@ -21,9 +21,9 @@
 </template>

 <script setup>
-import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
-import { RoleSelect } from '@/layouts/components'
 import api from '@/api'
+import { RoleSelect } from '@/layouts/components'
+import { useAuthStore, usePermissionStore, useUserStore } from '@/store'

 const router = useRouter()
 const userStore = useUserStore()
--- a/src/layouts/components/index.js
+++ b/src/layouts/components/index.js
@@ -1,8 +1,8 @@
-export { default as RoleSelect } from './RoleSelect.vue'
-export { default as UserAvatar } from './UserAvatar.vue'
-export { default as MenuCollapse } from './MenuCollapse.vue'
 export { default as BreadCrumb } from './BreadCrumb.vue'
-export { default as AppTab } from './tab/index.vue'
+export { default as Fullscreen } from './Fullscreen.vue'
+export { default as MenuCollapse } from './MenuCollapse.vue'
+export { default as RoleSelect } from './RoleSelect.vue'
 export { default as SideLogo } from './SideLogo.vue'
 export { default as SideMenu } from './SideMenu.vue'
-export { default as Fullscreen } from './Fullscreen.vue'
+export { default as AppTab } from './tab/index.vue'
+export { default as UserAvatar } from './UserAvatar.vue'
--- a/src/layouts/components/tab/index.vue
+++ b/src/layouts/components/tab/index.vue
@@ -36,8 +36,8 @@
 </template>

 <script setup>
-import ContextMenu from './ContextMenu.vue'
 import { useTabStore } from '@/store'
+import ContextMenu from './ContextMenu.vue'

 const router = useRouter()
 const tabStore = useTabStore()
@@ -74,7 +74,7 @@ async function handleContextMenu(e, tagItem) {
 }
 </script>

-<style scoped lang="scss">
+<style scoped>
 :deep(.n-tabs) {
  .n-tabs-tab {
    padding-left: 16px;
--- a/src/layouts/full/index.vue
+++ b/src/layouts/full/index.vue
@@ -27,10 +27,10 @@
 </template>

 <script setup>
-import SideBar from './sidebar/index.vue'
-import AppHeader from './header/index.vue'
-import { useAppStore } from '@/store'
 import { AppTab } from '@/layouts/components'
+import { useAppStore } from '@/store'
+import AppHeader from './header/index.vue'
+import SideBar from './sidebar/index.vue'

 const appStore = useAppStore()
 </script>
--- a/src/layouts/normal/index.vue
+++ b/src/layouts/normal/index.vue
@@ -24,9 +24,9 @@
 </template>

 <script setup>
-import SideBar from './sidebar/index.vue'
-import AppHeader from './header/index.vue'
 import { useAppStore } from '@/store'
+import AppHeader from './header/index.vue'
+import SideBar from './sidebar/index.vue'

 const appStore = useAppStore()
 </script>
--- a/src/layouts/simple/index.vue
+++ b/src/layouts/simple/index.vue
@@ -23,8 +23,8 @@
 </template>

 <script setup>
-import SideBar from './sidebar/index.vue'
 import { useAppStore } from '@/store'
+import SideBar from './sidebar/index.vue'

 const appStore = useAppStore()
 </script>
--- a/src/main.js
+++ b/src/main.js
@@ -8,19 +8,35 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import 'uno.css'
-import '@/styles/reset.css'
-import '@/styles/global.scss'
-
+import ExcelJS from 'exceljs'
 import { createApp } from 'vue'
 import App from './App.vue'
+
+import { setupDirectives } from './directives'
+/**
+ * 引入vxe-table 和 vxe-pc-ui excel导出
+ */
+import VxeUI from 'vxe-pc-ui'
+import VXETable from 'vxe-table'
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
 import { setupRouter } from './router'
 import { setupStore } from './store'
+
 import { setupNaiveDiscreteApi } from './utils'
-import { setupDirectives } from './directives'
+import 'vxe-pc-ui/lib/style.css'
+import 'vxe-table/lib/style.css'
+import '@/styles/reset.css'
+import '@/styles/global.css'
+import 'uno.css'

 async function bootstrap() {
  const app = createApp(App)
+
+  VXETable.use(VXETablePluginExportXLSX, {
+    ExcelJS,
+  })
+  app.use(VxeUI).use(VXETable)
+
  setupStore(app)
  setupDirectives(app)
  await setupRouter(app)
--- a/src/router/guards/permission-guard.js
+++ b/src/router/guards/permission-guard.js
@@ -6,8 +6,8 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
 import api from '@/api'
+import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
 import { getPermissions, getUserInfo } from '@/store/helper'

 const WHITE_LIST = ['/login', '/404']
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,8 +7,8 @@
 **********************************/

 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import { setupRouterGuards } from './guards'
 import { basicRoutes } from './basic-routes'
+import { setupRouterGuards } from './guards'

 export const router = createRouter({
  history:
--- a/src/store/helper.js
+++ b/src/store/helper.js
@@ -1,5 +1,5 @@
-import { basePermissions } from '@/settings'
 import api from '@/api'
+import { basePermissions } from '@/settings'

 export async function getUserInfo() {
  const res = await api.getUser()
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -6,10 +6,11 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import { defineStore } from 'pinia'
-import { useDark } from '@vueuse/core'
-import { generate, getRgbStr } from '@arco-design/color'
 import { defaultLayout, defaultPrimaryColor, naiveThemeOverrides } from '@/settings'
+import { generate, getRgbStr } from '@arco-design/color'
+import { useDark } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { VxeUI } from 'vxe-pc-ui'

 export const useAppStore = defineStore('app', {
  state: () => ({
@@ -40,6 +41,18 @@ export const useAppStore = defineStore('app', {
        list: true,
        dark: isDark,
      })
+      VxeUI.setTheme(isDark ? 'dark' : 'light')
+      if (isDark) {
+        document.body.style.setProperty('--vxe-ui-font-color', '#fff')
+      }
+      else {
+        document.body.style.setProperty('--vxe-ui-font-color', '#000')
+      }
+
+      document.body.style.setProperty('--vxe-ui-font-primary-color', color)
+      document.body.style.setProperty('--vxe-ui-font-primary-lighten-color', color)
+      document.body.style.setProperty('--vxe-ui-font-primary-darken-color', color)
+
      document.body.style.setProperty('--primary-color', getRgbStr(colors[5]))
      this.naiveThemeOverrides.common = Object.assign(this.naiveThemeOverrides.common || {}, {
        primaryColor: colors[5],
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -6,8 +6,8 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import { defineStore } from 'pinia'
 import { usePermissionStore, useRouterStore, useTabStore, useUserStore } from '@/store'
+import { defineStore } from 'pinia'

 export const useAuthStore = defineStore('auth', {
  state: () => ({
--- a/src/store/modules/index.js
+++ b/src/store/modules/index.js
@@ -1,6 +1,6 @@
 export * from './app'
 export * from './auth'
 export * from './permission'
+export * from './router'
 export * from './tab'
 export * from './user'
-export * from './router'
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -6,9 +6,9 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

+import { isExternal } from '@/utils'
 import { hyphenate } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { isExternal } from '@/utils'

 export const usePermissionStore = defineStore('permission', {
  state: () => ({
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -26,12 +26,12 @@ body {

 .fade-slide-enter-from {
  opacity: 0;
-  transform: translateX(-30px);
+  transform: translateX(-2%);
 }

 .fade-slide-leave-to {
  opacity: 0;
-  transform: translateX(30px);
+  transform: translateX(2%);
 }

 /* 自定义滚动条样式 */
--- a/src/utils/http/interceptors.js
+++ b/src/utils/http/interceptors.js
@@ -7,29 +7,10 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import { resolveResError } from './helpers'
 import { useAuthStore } from '@/store'
+import { resolveResError } from './helpers'

 export function setupInterceptors(axiosInstance) {
-  function reqResolve(config) {
-    // 处理不需要token的请求
-    if (config.needToken === false) {
-      return config
-    }
-
-    const { accessToken } = useAuthStore()
-    if (accessToken) {
-      // token: Bearer + xxx
-      config.headers.Authorization = `Bearer ${accessToken}`
-    }
-
-    return config
-  }
-
-  function reqReject(error) {
-    return Promise.reject(error)
-  }
-
  const SUCCESS_CODES = [0, 200]
  function resResolve(response) {
    const { data, status, config, statusText, headers } = response
@@ -49,6 +30,29 @@ export function setupInterceptors(axiosInstance) {
    return Promise.resolve(data ?? response)
  }

+  axiosInstance.interceptors.request.use(reqResolve, reqReject)
+  axiosInstance.interceptors.response.use(resResolve, resReject)
+}
+
+function reqResolve(config) {
+  // 处理不需要token的请求
+  if (config.needToken === false) {
+    return config
+  }
+
+  const { accessToken } = useAuthStore()
+  if (accessToken) {
+    // token: Bearer + xxx
+    config.headers.Authorization = `Bearer ${accessToken}`
+  }
+
+  return config
+}
+
+function reqReject(error) {
+  return Promise.reject(error)
+}
+
 async function resReject(error) {
  if (!error || !error.response) {
    const code = error?.code
@@ -64,7 +68,3 @@ export function setupInterceptors(axiosInstance) {
  const message = resolveResError(code, data?.message ?? error.message, needTip)
  return Promise.reject({ code, message, error: error.response?.data || error.response })
 }
-
-  axiosInstance.interceptors.request.use(reqResolve, reqReject)
-  axiosInstance.interceptors.response.use(resResolve, resReject)
-}
--- a/src/utils/naiveTools.js
+++ b/src/utils/naiveTools.js
@@ -7,9 +7,9 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import * as NaiveUI from 'naive-ui'
-import { isNullOrUndef } from '@/utils'
 import { useAppStore } from '@/store'
+import { isNullOrUndef } from '@/utils'
+import * as NaiveUI from 'naive-ui'

 export function setupMessage(NMessage) {
  class Message {
--- a/src/views/base/test-modal.vue
+++ b/src/views/base/test-modal.vue
@@ -22,8 +22,8 @@

 <script setup>
 import { MeModal } from '@/components'
-import { sleep } from '@/utils'
 import { useModal } from '@/composables'
+import { sleep } from '@/utils'

 const text = ref('')
 const [$modal1, okLoading1] = useModal()
--- a/src/views/demo/upload/index.vue
+++ b/src/views/demo/upload/index.vue
@@ -63,10 +63,9 @@ defineOptions({ name: 'ImgUpload' })
 const { copy, copied } = useClipboard()

 const imgList = reactive([
-  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
-  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
-  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
-  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+  { url: 'https://img.isme.top/isme/67208863145ef.jpg' },
+  { url: 'https://img.isme.top/isme/67208ab2a9de0.jpg' },
+  { url: 'https://img.isme.top/isme/67208ab4c6596.jpg' },
 ])

 watch(copied, (val) => {
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -160,13 +160,13 @@
 </template>

 <script setup>
-import * as echarts from 'echarts/core'
-import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import { useUserStore } from '@/store'
 import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import * as echarts from 'echarts/core'
 import { UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import VChart from 'vue-echarts'
-import { useUserStore } from '@/store'

 const userStore = useUserStore()

--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -101,10 +101,10 @@
 </template>

 <script setup>
+import { useAuthStore } from '@/store'
+import { lStorage, throttle } from '@/utils'
 import { useStorage } from '@vueuse/core'
 import api from './api'
-import { lStorage, throttle } from '@/utils'
-import { useAuthStore } from '@/store'

 const authStore = useAuthStore()
 const router = useRouter()
--- a/src/views/pms/resource/api.js
+++ b/src/views/pms/resource/api.js
@@ -6,8 +6,8 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import axios from 'axios'
 import { request } from '@/utils'
+import axios from 'axios'

 export default {
  getMenuTree: () => request.get('/permission/menu/tree'),
--- a/src/views/pms/resource/components/MenuTree.vue
+++ b/src/views/pms/resource/components/MenuTree.vue
@@ -38,8 +38,8 @@
 </template>

 <script setup>
-import { withModifiers } from 'vue'
 import { NButton } from 'naive-ui'
+import { withModifiers } from 'vue'
 import api from '../api'
 import ResAddOrEdit from './ResAddOrEdit.vue'

--- a/src/views/pms/resource/components/ResAddOrEdit.vue
+++ b/src/views/pms/resource/components/ResAddOrEdit.vue
@@ -159,12 +159,12 @@
 </template>

 <script setup>
-import pagePathes from 'isme:page-pathes'
-import icons from 'isme:icons'
-import api from '../api'
-import QuestionLabel from './QuestionLabel.vue'
 import { MeModal } from '@/components'
 import { useForm, useModal } from '@/composables'
+import icons from 'isme:icons'
+import pagePathes from 'isme:page-pathes'
+import api from '../api'
+import QuestionLabel from './QuestionLabel.vue'

 const props = defineProps({
  menus: {
--- a/src/views/pms/resource/index.vue
+++ b/src/views/pms/resource/index.vue
@@ -11,7 +11,7 @@
    <div class="flex">
      <n-spin size="small" :show="treeLoading">
        <MenuTree
-          v-model:currentMenu="currentMenu"
+          v-model:current-menu="currentMenu"
          class="w-320 shrink-0"
          :tree-data="treeData"
          @refresh="initData"
@@ -81,6 +81,7 @@
            :columns="btnsColumns"
            :scroll-x="-1"
            :get-data="api.getButtons"
+            :computed-height="300"
            :query-items="{ parentId: currentMenu.id }"
          />
        </template>
@@ -92,11 +93,11 @@
 </template>

 <script setup>
+import { MeCrud } from '@/components'
 import { NButton, NSwitch } from 'naive-ui'
+import api from './api'
 import MenuTree from './components/MenuTree.vue'
 import ResAddOrEdit from './components/ResAddOrEdit.vue'
-import api from './api'
-import { MeCrud } from '@/components'

 const treeData = ref([])
 const treeLoading = ref(false)
--- a/src/views/pms/role/index.vue
+++ b/src/views/pms/role/index.vue
@@ -95,10 +95,10 @@
 </template>

 <script setup>
-import { NButton, NSwitch } from 'naive-ui'
-import api from './api'
 import { MeCrud, MeModal, MeQueryItem } from '@/components'
 import { useCrud } from '@/composables'
+import { NButton, NSwitch } from 'naive-ui'
+import api from './api'

 defineOptions({ name: 'RoleMgt' })

--- a/src/views/pms/role/role-user.vue
+++ b/src/views/pms/role/role-user.vue
@@ -37,6 +37,7 @@
      :scroll-x="1200"
      :columns="columns"
      :get-data="api.getAllUsers"
+      :show-check="true"
      @on-checked="onChecked"
    >
      <MeQueryItem label="用户名" :label-width="50">
@@ -67,11 +68,11 @@
 </template>

 <script setup>
+import { MeCrud, MeQueryItem } from '@/components'
+import { formatDateTime } from '@/utils'
 import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
 import { h } from 'vue'
 import api from './api'
-import { MeCrud, MeQueryItem } from '@/components'
-import { formatDateTime } from '@/utils'

 defineOptions({ name: 'RoleUser' })
 const route = useRoute()
@@ -90,7 +91,7 @@ const genders = [
 ]

 const columns = [
-  { type: 'selection', fixed: 'left' },
+  // { type: 'selection', fixed: 'left' },
  {
    title: '头像',
    key: 'avatar',
@@ -101,11 +102,10 @@ const columns = [
        src: avatar,
      }),
  },
-  { title: '用户名', key: 'username', width: 150, ellipsis: { tooltip: true } },
+  { title: '用户名', key: 'username', ellipsis: { tooltip: true } },
  {
    title: '角色',
    key: 'roles',
-    width: 200,
    ellipsis: { tooltip: true },
    render: ({ roles }) => {
      if (roles?.length) {
@@ -156,7 +156,7 @@ const columns = [
  {
    title: '操作',
    key: 'actions',
-    width: 100,
+    width: 120,
    align: 'right',
    fixed: 'right',
    hideInExcel: true,
--- a/src/views/pms/user/index.vue
+++ b/src/views/pms/user/index.vue
@@ -110,11 +110,11 @@
 </template>

 <script setup>
-import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
-import api from './api'
-import { formatDateTime } from '@/utils'
 import { MeCrud, MeModal, MeQueryItem } from '@/components'
 import { useCrud } from '@/composables'
+import { formatDateTime } from '@/utils'
+import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
+import api from './api'

 defineOptions({ name: 'UserMgt' })

@@ -162,11 +162,10 @@ const columns = [
        src: avatar,
      }),
  },
-  { title: '用户名', key: 'username', width: 150, ellipsis: { tooltip: true } },
+  { title: '用户名', key: 'username', ellipsis: { tooltip: true } },
  {
    title: '角色',
    key: 'roles',
-    width: 200,
    ellipsis: { tooltip: true },
    render: ({ roles }) => {
      if (roles?.length) {
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -105,11 +105,11 @@
 </template>

 <script setup>
-import api from './api'
 import { MeModal } from '@/components'
 import { useForm, useModal } from '@/composables'
 import { useUserStore } from '@/store'
 import { getUserInfo } from '@/store/helper'
+import api from './api'

 const userStore = useUserStore()
 const required = {
--- a/uno.config.js
+++ b/uno.config.js
@@ -6,9 +6,9 @@
 * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 **********************************/

-import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
-import presetRemToPx from '@unocss/preset-rem-to-px'
 import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
 import { getIcons } from './build/index.js'

 const icons = getIcons()
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,14 +7,15 @@
 **********************************/

 import path from 'node:path'
-import { defineConfig, loadEnv } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import VueDevTools from 'vite-plugin-vue-devtools'
+import VueJsx from '@vitejs/plugin-vue-jsx'
 import Unocss from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig, loadEnv } from 'vite'
 import removeNoMatch from 'vite-plugin-router-warn'
+import VueDevTools from 'vite-plugin-vue-devtools'
 import { pluginIcons, pluginPagePathes } from './build/plugin-isme'

 export default defineConfig(({ mode }) => {
@@ -25,6 +26,7 @@ export default defineConfig(({ mode }) => {
    base: VITE_PUBLIC_PATH || '/',
    plugins: [
      Vue(),
+      VueJsx(),
      VueDevTools(),
      Unocss(),
      AutoImport({
Author	SHA1	Message	Date
leip247	a977ec1f3a	fix: #113 (#116 ) * fix(slot): 优化部分slot写法,减少手动判断 * fix(slot): 优化部分slot写法,减少手动判断 * feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 * feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 * fix: 完善table总条数不显示问题	2025-03-19 09:15:41 +08:00
leip247	6d1b3a4159	feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 (#105 ) * fix(slot): 优化部分slot写法,减少手动判断 * fix(slot): 优化部分slot写法,减少手动判断 * feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出 * feat(table): 添加vxe-table,适配naiveui主题,并替换掉之前table,自带导出	2024-11-22 15:47:29 +08:00
leip247	6af6eb3c99	fix(slot): 优化部分slot写法,减少手动判断 (#101 ) * fix(slot): 优化部分slot写法,减少手动判断 * fix(slot): 优化部分slot写法,减少手动判断	2024-11-13 11:05:03 +08:00
zclzone	69e6e9a14a	fix: 替换失效图片链接	2024-10-29 15:14:04 +08:00
zclzone	d066c999cc	chore: update deps	2024-10-22 15:27:46 +08:00
zclzone	97fb638ac2	chore: update deps	2024-10-08 15:44:41 +08:00
zclzone	db800f60a9	docs: update README	2024-09-26 17:25:52 +08:00
zclzone	304b74bb49	chore: 弃用sass，使用原生css替换	2024-09-25 18:19:48 +08:00
zclzone	359f683955	chore: update deps, close #97	2024-09-25 11:24:23 +08:00
zclzone	d7a4034c69	chore: 移除无用文件	2024-09-14 10:12:08 +08:00
zclzone	520db7ec6e	style: lint	2024-09-06 14:46:07 +08:00
zclzone	2264512a8b	chore: update deps	2024-09-06 14:27:47 +08:00
zclzone	3359b0f2b5	fix: 修复keepAlive页面transition不生效问题, close #93	2024-09-03 09:02:17 +08:00
zclzone	615c3b63f7	chore: 集成plugin-vue-jsx插件，支持jsx写法	2024-08-27 10:50:14 +08:00