feat: 优化crud表格弹性高度

package.json

@@ -13,42 +13,42 @@
   },
   "dependencies": {
     "@arco-design/color": "^0.4.0",
-    "@vueuse/core": "^13.1.0",
+    "@vueuse/core": "^13.2.0",
-    "axios": "^1.8.4",
+    "axios": "^1.9.0",
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.41.0",
     "pinia": "^3.0.2",
-    "pinia-plugin-persistedstate": "^4.2.0",
+    "pinia-plugin-persistedstate": "^4.3.0",
-    "vue": "^3.5.13",
+    "vue": "^3.5.14",
     "vue-echarts": "^7.0.3",
-    "vue-router": "^4.5.0",
+    "vue-router": "^4.5.1",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.12.0",
+    "@antfu/eslint-config": "^4.13.1",
-    "@iconify/json": "^2.2.331",
+    "@iconify/json": "^2.2.339",
-    "@unocss/eslint-config": "^66.0.0",
+    "@unocss/eslint-config": "^66.1.2",
-    "@unocss/eslint-plugin": "^66.0.0",
+    "@unocss/eslint-plugin": "^66.1.2",
-    "@unocss/preset-rem-to-px": "^66.0.0",
+    "@unocss/preset-rem-to-px": "^66.1.2",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.1.2",
-    "eslint": "^9.25.1",
+    "eslint": "^9.27.0",
     "eslint-plugin-format": "^1.0.1",
     "esno": "^4.8.0",
     "fs-extra": "^11.3.0",
     "glob": "^11.0.2",
-    "lint-staged": "^15.5.1",
+    "lint-staged": "^16.0.0",
     "rollup-plugin-visualizer": "^5.14.0",
     "simple-git-hooks": "^2.13.0",
-    "taze": "^19.0.4",
+    "taze": "^19.1.0",
-    "unocss": "^66.0.0",
+    "unocss": "^66.1.2",
-    "unplugin-auto-import": "^19.1.2",
+    "unplugin-auto-import": "^19.2.0",
     "unplugin-vue-components": "^28.5.0",
-    "vite": "^6.3.3",
+    "vite": "^6.3.5",
     "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-devtools": "^7.7.5",
+    "vite-plugin-vue-devtools": "^7.7.6",
     "vue3-intro-step": "^1.0.5"
   },
   "simple-git-hooks": {

src/App.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script setup>
+import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
 import { LayoutSetting } from '@/components'
 import { useAppStore, useTabStore } from '@/store'
-import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
 import { layoutSettingVisible } from './settings'
 
 const layouts = new Map()

src/components/common/ThemeSetting.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script setup>
-import { useAppStore } from '@/store'
 import { getPresetColors } from '@arco-design/color'
+import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
 

src/components/common/ToggleTheme.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script setup>
-import { useAppStore } from '@/store'
 import { useDark, useToggle } from '@vueuse/core'
+import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
 const isDark = useDark()

src/components/me/crud/index.vue

@@ -7,48 +7,52 @@
  --------------------------------->
 
 <template>
-  <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
+  <div class="h-full flex flex-col overflow-hidden">
-    <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
+    <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
-      <n-scrollbar x-scrollable>
+      <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
-        <n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10">
+        <n-scrollbar x-scrollable>
-          <slot />
+          <n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10">
-        </n-space>
+            <slot />
-      </n-scrollbar>
+          </n-space>
-      <div class="flex-shrink-0 p-10">
+        </n-scrollbar>
-        <n-button ghost type="primary" @click="handleReset">
+        <div class="flex-shrink-0 p-10">
-          <i class="i-fe:rotate-ccw mr-4" />
+          <n-button ghost type="primary" @click="handleReset">
-          重置
+            <i class="i-fe:rotate-ccw mr-4" />
-        </n-button>
+            重置
-        <n-button attr-type="submit" class="ml-20" type="primary">
-          <i class="i-fe:search mr-4" />
-          搜索
-        </n-button>
-
-        <template v-if="expand">
-          <n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
-            <i class="i-fe:chevrons-down ml-4" />
-            展开
           </n-button>
-          <n-button v-else text type="primary" @click="toggleExpand">
+          <n-button attr-type="submit" class="ml-20" type="primary">
-            <i class="i-fe:chevrons-up ml-4" />
+            <i class="i-fe:search mr-4" />
-            收起
+            搜索
           </n-button>
-        </template>
-      </div>
-    </form>
-  </AppCard>
 
-  <NDataTable
+          <template v-if="expand">
-    :remote="remote"
+            <n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
-    :loading="loading"
+              <i class="i-fe:chevrons-down ml-4" />
-    :scroll-x="scrollX"
+              展开
-    :columns="columns"
+            </n-button>
-    :data="tableData"
+            <n-button v-else text type="primary" @click="toggleExpand">
-    :row-key="(row) => row[rowKey]"
+              <i class="i-fe:chevrons-up ml-4" />
-    :pagination="isPagination ? pagination : false"
+              收起
-    @update:checked-row-keys="onChecked"
+            </n-button>
-    @update:page="onPageChange"
+          </template>
-  />
+        </div>
+      </form>
+    </AppCard>
+
+    <NDataTable
+      :remote="remote"
+      :loading="loading"
+      :scroll-x="scrollX"
+      :columns="columns"
+      :data="tableData"
+      :row-key="(row) => row[rowKey]"
+      :pagination="isPagination ? pagination : false"
+      flex-height
+      class="flex-1"
+      @update:checked-row-keys="onChecked"
+      @update:page="onPageChange"
+    />
+  </div>
 </template>
 
 <script setup>

src/directives/index.js

@@ -6,8 +6,8 @@
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
 
-import { router } from '@/router'
 import { withDirectives } from 'vue'
+import { router } from '@/router'
 
 const permission = {
   mounted(el, binding) {

src/layouts/components/SideMenu.vue

@@ -54,7 +54,8 @@ function handleMenuSelect(key, item) {
     })
   }
   else {
-    if(!item.path) return
+    if (!item.path)
+      return
     router.push(item.path)
   }
 }

src/store/modules/app.js

@@ -6,10 +6,10 @@
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
 
-import { defaultLayout, defaultPrimaryColor, naiveThemeOverrides } from '@/settings'
 import { generate, getRgbStr } from '@arco-design/color'
 import { useDark } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { defaultLayout, defaultPrimaryColor, naiveThemeOverrides } from '@/settings'
 
 export const useAppStore = defineStore('app', {
   state: () => ({

src/store/modules/auth.js

@@ -6,8 +6,8 @@
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
 
-import { usePermissionStore, useRouterStore, useTabStore, useUserStore } from '@/store'
 import { defineStore } from 'pinia'
+import { usePermissionStore, useRouterStore, useTabStore, useUserStore } from '@/store'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({

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: () => ({

src/utils/naiveTools.js

@@ -7,9 +7,9 @@
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
 
+import * as NaiveUI from 'naive-ui'
 import { useAppStore } from '@/store'
 import { isNullOrUndef } from '@/utils'
-import * as NaiveUI from 'naive-ui'
 
 export function setupMessage(NMessage) {
   class Message {

src/views/home/index.vue

@@ -159,13 +159,13 @@
 </template>
 
 <script setup>
-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()
 

src/views/login/index.vue

@@ -101,9 +101,9 @@
 </template>
 
 <script setup>
+import { useStorage } from '@vueuse/core'
 import { useAuthStore } from '@/store'
 import { lStorage, throttle } from '@/utils'
-import { useStorage } from '@vueuse/core'
 import api from './api'
 
 const authStore = useAuthStore()

src/views/pms/resource/api.js

@@ -6,8 +6,8 @@
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
 
-import { request } from '@/utils'
 import axios from 'axios'
+import { request } from '@/utils'
 
 export default {
   getMenuTree: () => request.get('/permission/menu/tree'),

src/views/pms/resource/components/ResAddOrEdit.vue

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

src/views/pms/resource/index.vue

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

src/views/pms/role/index.vue

@@ -75,7 +75,7 @@
             :checked-keys="modalForm.permissionIds"
             :on-update:checked-keys="(keys) => (modalForm.permissionIds = keys)"
 
-            default-expand-all checkable check-on-click
+            checkable check-on-click default-expand-all
             class="cus-scroll max-h-200 w-full"
           />
         </n-form-item>
@@ -95,9 +95,9 @@
 </template>
 
 <script setup>
+import { NButton, NSwitch } from 'naive-ui'
 import { MeCrud, MeModal, MeQueryItem } from '@/components'
 import { useCrud } from '@/composables'
-import { NButton, NSwitch } from 'naive-ui'
 import api from './api'
 
 defineOptions({ name: 'RoleMgt' })

src/views/pms/role/role-user.vue

@@ -67,10 +67,10 @@
 </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 { MeCrud, MeQueryItem } from '@/components'
+import { formatDateTime } from '@/utils'
 import api from './api'
 
 defineOptions({ name: 'RoleUser' })

src/views/pms/user/index.vue

@@ -110,11 +110,11 @@
 </template>
 
 <script setup>
+import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
 import { MeCrud, MeModal, MeQueryItem } from '@/components'
 import { useCrud } from '@/composables'
 import { withPermission } from '@/directives'
 import { formatDateTime } from '@/utils'
-import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
 import api from './api'
 
 defineOptions({ name: 'UserMgt' })