Merge branch 'main' into feature/ReDrawer

.nvmrc

@@ -1 +1 @@
-v20.15.0
+v20.17.0

build/plugins.ts

@@ -26,7 +26,6 @@ export function getPluginsList(
     // jsx、tsx语法支持
     vueJsx(),
     VueI18nPlugin({
-      jitCompilation: false,
       include: [pathResolve("../locales/**")]
     }),
     checker({

eslint.config.js

@@ -78,7 +78,8 @@ export default defineFlatConfig([
     languageOptions: {
       parser: parserTypeScript,
       parserOptions: {
-        sourceType: "module"
+        sourceType: "module",
+        warnOnUnsupportedTypeScriptVersion: false
       }
     },
     plugins: {

package.json

@@ -48,28 +48,28 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@howdyjs/mouse-menu": "^2.1.3",
+    "@howdyjs/mouse-menu": "^2.1.6",
     "@infectoone/vue-ganttastic": "^2.3.2",
     "@logicflow/core": "^1.2.28",
     "@logicflow/extension": "^1.2.28",
     "@pureadmin/descriptions": "^1.2.1",
-    "@pureadmin/table": "^3.2.0",
+    "@pureadmin/table": "^3.2.1",
     "@pureadmin/utils": "^2.4.8",
     "@vue-flow/background": "^1.3.0",
-    "@vue-flow/core": "^1.39.3",
+    "@vue-flow/core": "^1.41.2",
-    "@vueuse/core": "^10.11.1",
+    "@vueuse/core": "^11.1.0",
-    "@vueuse/motion": "^2.2.3",
+    "@vueuse/motion": "^2.2.5",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.7.3",
+    "axios": "^1.7.7",
     "china-area-data": "^5.0.1",
     "cropperjs": "^1.6.2",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "el-table-infinite-scroll": "^3.0.6",
-    "element-plus": "^2.8.0",
+    "element-plus": "^2.8.3",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.6",
@@ -79,98 +79,98 @@
     "mqtt": "4.3.7",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.2.1",
+    "pinia": "^2.2.2",
     "pinyin-pro": "^3.24.2",
-    "plus-pro-components": "^0.1.14",
+    "plus-pro-components": "^0.1.16",
     "qrcode": "^1.5.4",
     "qs": "^6.13.0",
     "responsive-storage": "^2.2.0",
-    "sortablejs": "^1.15.2",
+    "sortablejs": "^1.15.3",
-    "swiper": "^11.1.9",
+    "swiper": "^11.1.14",
-    "typeit": "^8.8.4",
+    "typeit": "^8.8.5",
     "v-contextmenu": "^3.2.0",
-    "v3-infinite-loading": "^1.3.1",
+    "v3-infinite-loading": "^1.3.2",
-    "version-rocket": "^1.7.2",
+    "version-rocket": "^1.7.3",
-    "vue": "^3.4.37",
+    "vue": "^3.5.7",
-    "vue-i18n": "^9.13.1",
+    "vue-i18n": "^10.0.1",
     "vue-json-pretty": "^2.4.0",
     "vue-pdf-embed": "^2.1.0",
-    "vue-router": "^4.4.3",
+    "vue-router": "^4.4.5",
     "vue-tippy": "^6.4.4",
     "vue-types": "^5.1.3",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "vue-waterfall-plugin-next": "^2.4.3",
+    "vue-waterfall-plugin-next": "^2.6.0",
     "vue3-danmaku": "^1.6.1",
     "vue3-puzzle-vcode": "^1.1.7",
     "vuedraggable": "^4.1.0",
-    "vxe-table": "4.6.17",
+    "vxe-table": "4.6.19",
-    "wavesurfer.js": "^7.8.3",
+    "wavesurfer.js": "^7.8.6",
-    "xgplayer": "^3.0.19",
+    "xgplayer": "^3.0.20",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.0",
+    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/config-conventional": "^19.5.0",
-    "@commitlint/types": "^19.0.3",
+    "@commitlint/types": "^19.5.0",
-    "@eslint/js": "^9.9.0",
+    "@eslint/js": "^9.11.0",
     "@faker-js/faker": "^8.4.1",
     "@iconify-icons/ep": "^1.2.12",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.2",
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@intlify/unplugin-vue-i18n": "^5.0.0",
     "@pureadmin/theme": "^3.2.0",
     "@types/dagre": "^0.7.52",
     "@types/gradient-string": "^1.1.6",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.14.15",
+    "@types/node": "^20.16.5",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
-    "@types/qs": "^6.9.15",
+    "@types/qs": "^6.9.16",
     "@types/sortablejs": "^1.15.8",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "autoprefixer": "^10.4.20",
-    "boxen": "^7.1.1",
+    "boxen": "^8.0.1",
-    "cssnano": "^7.0.5",
+    "cssnano": "^7.0.6",
     "dagre": "^0.8.5",
-    "eslint": "^9.9.0",
+    "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^9.28.0",
     "gradient-string": "^2.0.2",
-    "husky": "^9.1.4",
+    "husky": "^9.1.6",
-    "lint-staged": "^15.2.8",
+    "lint-staged": "^15.2.10",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
     "postcss-html": "^1.7.0",
     "postcss-import": "^16.1.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.3.3",
-    "rimraf": "^5.0.10",
+    "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.8",
+    "sass": "1.77.8",
-    "stylelint": "^16.8.1",
+    "stylelint": "^16.9.0",
-    "stylelint-config-recess-order": "^5.0.1",
+    "stylelint-config-recess-order": "^5.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.2",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^3.4.12",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
-    "vite": "^5.4.0",
+    "vite": "^5.4.7",
     "vite-plugin-cdn-import": "^1.0.1",
-    "vite-plugin-checker": "^0.7.2",
+    "vite-plugin-checker": "^0.8.0",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-fake-server": "^2.1.1",
+    "vite-plugin-fake-server": "^2.1.2",
     "vite-plugin-remove-console": "^2.2.0",
     "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-inspector": "^5.1.3",
+    "vite-plugin-vue-inspector": "^5.2.0",
     "vite-svg-loader": "^5.1.0",
     "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.6"
   },
   "engines": {
     "node": "^18.18.0 || ^20.9.0 || >=21.1.0",

src/components/RePureTableBar/src/bar.tsx

@@ -54,7 +54,7 @@ const props = {
 export default defineComponent({
   name: "PureTableBar",
   props,
-  emits: ["refresh"],
+  emits: ["refresh", "fullscreen"],
   setup(props, { emit, slots, attrs }) {
     const size = ref("default");
     const loading = ref(false);
@@ -117,6 +117,11 @@ export default defineComponent({
       toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
     }
 
+    function onFullscreen() {
+      isFullscreen.value = !isFullscreen.value;
+      emit("fullscreen", isFullscreen.value);
+    }
+
     function toggleRowExpansionAll(data, isExpansion) {
       data.forEach(item => {
         props.tableRef.toggleRowExpansion(item, isExpansion);
@@ -378,7 +383,7 @@ export default defineComponent({
                 class={["w-[16px]", iconClass.value]}
                 icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
                 v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
-                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+                onClick={() => onFullscreen()}
               />
             </div>
           </div>

src/components/ReVxeTableBar/src/bar.tsx

@@ -52,7 +52,7 @@ const props = {
 export default defineComponent({
   name: "VxeTableBar",
   props,
-  emits: ["refresh"],
+  emits: ["refresh", "fullscreen"],
   setup(props, { emit, slots, attrs }) {
     const size = ref("small");
     const loading = ref(false);
@@ -113,6 +113,11 @@ export default defineComponent({
       props.vxeTableRef.refreshColumn();
     }
 
+    function onFullscreen() {
+      isFullscreen.value = !isFullscreen.value;
+      emit("fullscreen", isFullscreen.value);
+    }
+
     function reloadColumn() {
       const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item =>
         checkedColumns.value.includes(item.title)
@@ -369,7 +374,7 @@ export default defineComponent({
                 class={["w-[16px]", iconClass.value]}
                 icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
                 v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
-                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+                onClick={() => onFullscreen()}
               />
             </div>
           </div>

src/plugins/i18n.ts

@@ -50,7 +50,7 @@ function getObjectKeys(obj) {
       if (obj[k] && isObject(obj[k])) {
         stack.push({ obj: obj[k], key: newKey });
       } else {
-        keys.add(newKey);
+        keys.add(key);
       }
     }
   }

src/style/element-plus.scss

@@ -163,9 +163,10 @@
 
 /* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
 .pure-scrollbar {
+  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
+
   /* Firefox */
   scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
-  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
   ::-webkit-scrollbar {
     width: 6px; /* 滚动条宽度 */
   }

src/views/system/dept/index.vue

@@ -26,6 +26,11 @@ const {
   handleDelete,
   handleSelectionChange
 } = useDept();
+
+function onFullscreen() {
+  // 重置表格高度
+  tableRef.value.setAdaptive();
+}
 </script>
 
 <template>
@@ -75,6 +80,7 @@ const {
       :columns="columns"
       :tableRef="tableRef?.getTableRef()"
       @refresh="onSearch"
+      @fullscreen="onFullscreen"
     >
       <template #buttons>
         <el-button

src/views/system/dept/utils/hook.tsx

@@ -123,7 +123,7 @@ export function useDept() {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/system/menu/index.vue

@@ -27,6 +27,11 @@ const {
   handleDelete,
   handleSelectionChange
 } = useMenu();
+
+function onFullscreen() {
+  // 重置表格高度
+  tableRef.value.setAdaptive();
+}
 </script>
 
 <template>
@@ -66,6 +71,7 @@ const {
       :isExpandAll="false"
       :tableRef="tableRef?.getTableRef()"
       @refresh="onSearch"
+      @fullscreen="onFullscreen"
     >
       <template #buttons>
         <el-button

src/views/system/menu/utils/hook.tsx

@@ -165,7 +165,7 @@ export function useMenu() {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/system/role/utils/hook.tsx

@@ -195,7 +195,7 @@ export function useRole(treeRef: Ref) {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/system/user/tree.vue

@@ -96,7 +96,7 @@ defineExpose({ onTreeReset });
 <template>
   <div
     v-loading="treeLoading"
-    class="h-full bg-bg_color overflow-auto"
+    class="h-full bg-bg_color overflow-hidden relative"
     :style="{ minHeight: `calc(100vh - 141px)` }"
   >
     <div class="flex items-center h-[34px]">
@@ -151,54 +151,56 @@ defineExpose({ onTreeReset });
       </el-dropdown>
     </div>
     <el-divider />
-    <el-tree
+    <el-scrollbar height="calc(90vh - 88px)">
-      ref="treeRef"
+      <el-tree
-      :data="treeData"
+        ref="treeRef"
-      node-key="id"
+        :data="treeData"
-      size="small"
+        node-key="id"
-      :props="defaultProps"
+        size="small"
-      default-expand-all
+        :props="defaultProps"
-      :expand-on-click-node="false"
+        default-expand-all
-      :filter-node-method="filterNode"
+        :expand-on-click-node="false"
-      @node-click="nodeClick"
+        :filter-node-method="filterNode"
-    >
+        @node-click="nodeClick"
-      <template #default="{ node, data }">
+      >
-        <span
+        <template #default="{ node, data }">
-          :class="[
+          <div
-            'pl-1',
+            :class="[
-            'pr-1',
+              'rounded',
-            'rounded',
+              'flex',
-            'flex',
+              'items-center',
-            'items-center',
+              'select-none',
-            'select-none',
+              'hover:text-primary',
-            'hover:text-primary',
+              searchValue.trim().length > 0 &&
-            searchValue.trim().length > 0 &&
+                node.label.includes(searchValue) &&
-              node.label.includes(searchValue) &&
+                'text-red-500',
-              'text-red-500',
+              highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
-            highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
+            ]"
-          ]"
+            :style="{
-          :style="{
+              color: highlightMap[node.id]?.highlight
-            color: highlightMap[node.id]?.highlight
+                ? 'var(--el-color-primary)'
-              ? 'var(--el-color-primary)'
+                : '',
-              : '',
+              background: highlightMap[node.id]?.highlight
-            background: highlightMap[node.id]?.highlight
+                ? 'var(--el-color-primary-light-7)'
-              ? 'var(--el-color-primary-light-7)'
+                : 'transparent'
-              : 'transparent'
+            }"
-          }"
+          >
-        >
+            <IconifyIconOffline
-          <IconifyIconOffline
+              :icon="
-            :icon="
+                data.type === 1
-              data.type === 1
+                  ? OfficeBuilding
-                ? OfficeBuilding
+                  : data.type === 2
-                : data.type === 2
+                    ? LocationCompany
-                  ? LocationCompany
+                    : Dept
-                  : Dept
+              "
-            "
+            />
-          />
+            <span class="!w-[120px] !truncate" :title="node.label">
-          {{ node.label }}
+              {{ node.label }}
-        </span>
+            </span>
-      </template>
+          </div>
-    </el-tree>
+        </template>
+      </el-tree>
+    </el-scrollbar>
   </div>
 </template>
 

src/views/system/user/utils/hook.tsx

@@ -331,7 +331,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/table/high/excel/index.vue

@@ -6,11 +6,7 @@ const { columns, dataList, exportExcel } = useColumns();
 
 <template>
   <div>
-    <el-button
+    <el-button type="primary" class="mb-[20px]" @click="exportExcel">
-      type="primary"
-      class="mb-[20px] float-right"
-      @click="exportExcel"
-    >
       导出
     </el-button>
     <pure-table row-key="id" border :data="dataList" :columns="columns" />

src/views/table/high/header/columns.tsx

@@ -0,0 +1,51 @@
+import { tableData } from "../data";
+import { ref, onMounted } from "vue";
+import { clone } from "@pureadmin/utils";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const columns = ref<TableColumnList>([
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ]);
+
+  function onChange() {
+    // 动态表头只需给 columns.value 重新赋值即可，如下
+    columns.value = [
+      {
+        label: "日期" + Math.round(Math.random() * 99),
+        prop: "date"
+      },
+      {
+        label: Math.round(Math.random() * 99) + "姓名",
+        prop: "name"
+      },
+      {
+        label: "地址",
+        prop: "address"
+      }
+    ];
+  }
+
+  onMounted(() => {
+    clone(tableData, true).forEach((item, index) => {
+      dataList.value.push({ id: index, ...item });
+    });
+  });
+
+  return {
+    columns,
+    dataList,
+    onChange
+  };
+}

src/views/table/high/header/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const tableRef = ref();
+
+const { columns, dataList, onChange } = useColumns();
+</script>
+
+<template>
+  <div>
+    <el-button type="primary" class="mb-[20px]" @click="onChange">
+      切换表头
+    </el-button>
+    <pure-table
+      ref="tableRef"
+      border
+      row-key="id"
+      alignWhole="center"
+      showOverflowTooltip
+      :data="dataList"
+      :columns="columns"
+    />
+  </div>
+</template>

src/views/table/high/list.tsx

@@ -1,5 +1,6 @@
 import Adaptive from "./adaptive/index.vue";
 import Page from "./page/index.vue";
+import Header from "./header/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
@@ -25,6 +26,12 @@ export const list = [
     title: "分页、加载动画、动态列",
     component: Page
   },
+  {
+    key: "header",
+    content: rendContent("header"),
+    title: "动态表头",
+    component: Header
+  },
   {
     key: "tableSelect",
     content: rendContent("table-select"),

src/views/table/high/prints/index.vue

@@ -9,7 +9,7 @@ const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } =
 
 <template>
   <div>
-    <el-button type="primary" class="mb-[20px] float-right" @click="print">
+    <el-button type="primary" class="mb-[20px]" @click="print">
       打印
     </el-button>
     <!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->