chore(deps): 升级最新依赖 (#3743)

* chore: update deps

* fix: eslint

* chore: update deps

* fix: typecheck

internal/stylelint-config/package.json

@@ -32,17 +32,17 @@
     "stub": "pnpm unbuild --stub"
   },
   "devDependencies": {
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "postcss-less": "^6.0.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.2.5",
-    "stylelint": "^16.2.1",
+    "stylelint": "^16.3.1",
     "stylelint-config-property-sort-order-smacss": "^10.0.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
     "stylelint-prettier": "^5.0.0"
   }

internal/ts-config/package.json

@@ -20,7 +20,7 @@
     "node-server.json"
   ],
   "dependencies": {
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.12.7",
-    "vite": "^5.1.3"
+    "vite": "^5.2.9"
   }
 }

internal/vite-config/package.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7.0.2",
-    "vite": "^5.1.3"
+    "vite": "^5.2.9"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
@@ -41,16 +41,16 @@
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "ant-design-vue": "^4.1.2",
     "dayjs": "^1.11.10",
-    "dotenv": "^16.4.4",
+    "dotenv": "^16.4.5",
     "fs-extra": "^11.2.0",
     "less": "^4.2.0",
     "picocolors": "^1.0.0",
     "pkg-types": "^1.0.3",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.71.0",
+    "sass": "^1.75.0",
-    "unocss": "0.58.5",
+    "unocss": "0.59.4",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-dts": "^3.7.2",
+    "vite-plugin-dts": "^3.8.3",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.10.0",

package.json

@@ -70,51 +70,51 @@
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
     "@iconify/iconify": "^3.1.1",
-    "@logicflow/core": "^1.2.22",
+    "@logicflow/core": "^1.2.26",
-    "@logicflow/extension": "^1.2.22",
+    "@logicflow/extension": "^1.2.26",
     "@vben/hooks": "workspace:*",
-    "@vue/shared": "^3.4.19",
+    "@vue/shared": "^3.4.23",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.9.0",
     "@zxcvbn-ts/core": "^3.0.4",
     "ant-design-vue": "^4.1.2",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "codemirror": "^5.65.16",
     "cropperjs": "^1.6.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
     "driver.js": "^1.3.1",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
     "exceljs": "^4.4.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "^6.2.2",
     "pinia": "2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "print-js": "^1.6.0",
     "qrcode": "^1.5.3",
-    "qs": "^6.11.2",
+    "qs": "^6.12.1",
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.2",
     "tinymce": "^5.10.9",
-    "unocss": "^0.58.5",
+    "unocss": "^0.59.4",
-    "vditor": "^3.9.9",
+    "vditor": "^3.10.4",
-    "vue": "^3.4.19",
+    "vue": "^3.4.23",
-    "vue-i18n": "^9.9.1",
+    "vue-i18n": "^9.13.0",
-    "vue-json-pretty": "^2.3.0",
+    "vue-json-pretty": "^2.4.0",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.3.2",
     "vue-types": "^5.1.1",
     "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.5.18",
+    "vxe-table": "^4.5.22",
     "vxe-table-plugin-export-xlsx": "^4.0.1",
-    "xe-utils": "^3.5.20",
+    "xe-utils": "^3.5.24",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
+    "@commitlint/cli": "^19.2.2",
-    "@commitlint/config-conventional": "^18.6.2",
+    "@commitlint/config-conventional": "^19.2.2",
-    "@iconify/json": "^2.2.183",
+    "@iconify/json": "^2.2.202",
     "@purge-icons/generated": "^0.10.0",
     "@types/codemirror": "^5.60.15",
     "@types/crypto-js": "^4.2.2",
@@ -122,7 +122,7 @@
     "@types/mockjs": "^1.0.10",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
-    "@types/qs": "^6.9.11",
+    "@types/qs": "^6.9.15",
     "@types/showdown": "^2.0.6",
     "@types/sortablejs": "^1.15.8",
     "@vben/eslint-config": "workspace:*",
@@ -130,25 +130,25 @@
     "@vben/ts-config": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/vite-config": "workspace:*",
-    "@vue/compiler-sfc": "^3.4.19",
+    "@vue/compiler-sfc": "^3.4.23",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.5",
     "cross-env": "^7.0.3",
-    "cz-git": "^1.8.0",
+    "cz-git": "^1.9.1",
-    "czg": "^1.8.0",
+    "czg": "^1.9.1",
     "husky": "^9.0.11",
     "lint-staged": "15.2.2",
     "prettier": "^3.2.5",
-    "prettier-plugin-packagejson": "^2.4.11",
+    "prettier-plugin-packagejson": "^2.5.0",
     "rimraf": "^5.0.5",
-    "turbo": "^1.12.4",
+    "turbo": "^1.13.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
-    "vite": "^5.1.3",
+    "vite": "^5.2.9",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-vue-inspector": "^4.0.2",
+    "vite-plugin-vue-inspector": "^5.0.0",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.13"
   },
-  "packageManager": "pnpm@9.0.2",
+  "packageManager": "pnpm@9.0.4",
   "engines": {
     "node": ">=18.12.0",
     "pnpm": ">=9.0.2"

packages/hooks/package.json

@@ -30,9 +30,9 @@
     "lint": "pnpm eslint ."
   },
   "dependencies": {
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.9.0",
     "lodash-es": "^4.17.21",
-    "vue": "^3.4.19"
+    "vue": "^3.4.23"
   },
   "devDependencies": {
     "@vben/types": "workspace:*"

src/components/Application/src/search/useMenuSearch.ts

@@ -66,7 +66,11 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref, emit: A
     const ret: SearchResult[] = [];
     filterMenu.forEach((item) => {
       const { name, path, icon, children, hideMenu, meta } = item;
-      if (!hideMenu && reg.test(name?.toLowerCase()) && (!children?.length || meta?.hideChildrenInMenu)) {
+      if (
+        !hideMenu &&
+        reg.test(name?.toLowerCase()) &&
+        (!children?.length || meta?.hideChildrenInMenu)
+      ) {
         ret.push({
           name: parent?.name ? `${parent.name} > ${name}` : name,
           path,

src/components/Form/src/components/ApiCascader.vue

@@ -46,7 +46,7 @@
       type: Array,
     },
     api: {
-      type: Function as PropType<(arg?: any) => Promise<Option[] | Recordable<any>>> ,
+      type: Function as PropType<(arg?: any) => Promise<Option[] | Recordable<any>>>,
       default: null,
     },
     numberToString: propTypes.bool,

src/components/Form/src/components/ApiTransfer.vue

@@ -25,7 +25,7 @@
   const props = defineProps({
     value: { type: Array as PropType<Array<string>> },
     api: {
-      type: Function as PropType<(arg) => Promise<TransferItem[] | Recordable<any>>> ,
+      type: Function as PropType<(arg) => Promise<TransferItem[] | Recordable<any>>>,
       default: null,
     },
     params: { type: Object },

src/components/Table/src/hooks/useTableScroll.ts

@@ -194,7 +194,7 @@ export function useTableScroll(
     let modalElIterator: HTMLElement = tableEl.parentElement!;
     let modalIsFullscreen = false;
     while (modalElIterator !== document.body) {
-      if(!modalElIterator) break;
+      if (!modalElIterator) break;
       if (modalElIterator.classList.contains('ant-modal')) {
         modalEl = modalElIterator;
         modalWrapEl = modalEl.parentElement;

src/components/Upload/src/BasicUpload.vue

@@ -34,8 +34,8 @@
       @register="registerPreviewModal"
       @list-change="handlePreviewChange"
       @delete="handlePreviewDelete"
-      v-bind:preview-columns="props.previewColumns"
+      :preview-columns="props.previewColumns"
-      v-bind:before-preview-data="props.beforePreviewData"
+      :before-preview-data="props.beforePreviewData"
     />
   </div>
 </template>

src/components/Upload/src/components/FileList.vue

@@ -53,7 +53,9 @@
       return () => {
         const { columns, actionColumn, dataSource } = props;
         let columnList: FileBasicColumn[];
-        columnList = (actionColumn ? [...columns, actionColumn] : [...columns]) as FileBasicColumn[];
+        columnList = (
+          actionColumn ? [...columns, actionColumn] : [...columns]
+        ) as FileBasicColumn[];
 
         return (
           // x scrollbar

src/components/Upload/src/components/UploadPreviewModal.vue

@@ -26,24 +26,23 @@
 
   const emit = defineEmits(['list-change', 'register', 'delete']);
 
-  let columns : BasicColumn[] | FileBasicColumn[] = createPreviewColumns();
+  let columns: BasicColumn[] | FileBasicColumn[] = createPreviewColumns();
-  let actionColumn :any;
+  let actionColumn: any;
 
   const [register] = useModalInner();
   const { t } = useI18n();
 
   const fileListRef = ref<PreviewFileItem[] | Array<any>>([]);
-    watch(
+  watch(
     () => props.previewColumns,
     () => {
       if (props.previewColumns.length) {
         columns = props.previewColumns;
-        actionColumn = null
+        actionColumn = null;
-      }else{
+      } else {
-        columns=createPreviewColumns();
+        columns = createPreviewColumns();
-        actionColumn = createPreviewActionColumn({ handleRemove, handleDownload })
+        actionColumn = createPreviewActionColumn({ handleRemove, handleDownload });
-      };
+      }
-      
     },
     { immediate: true },
   );
@@ -52,17 +51,17 @@
     () => props.value,
     (value) => {
       if (!isArray(value)) value = [];
-      if(props.beforePreviewData){
+      if (props.beforePreviewData) {
-        value = props.beforePreviewData(value)  as any
+        value = props.beforePreviewData(value) as any;
-        fileListRef.value = value
+        fileListRef.value = value;
-        return 
+        return;
       }
       fileListRef.value = value
         .filter((item) => !!item)
         .map((item) => {
-          if(typeof item!="string"){
+          if (typeof item != 'string') {
-            console.error("return value should be string")
+            console.error('return value should be string');
-            return
+            return;
           }
           return {
             url: item,

src/components/Upload/src/props.ts

@@ -16,17 +16,17 @@ type SortableOptions = Merge<
 >;
 
 export const previewType = {
-  previewColumns:{
+  previewColumns: {
-    type: Array as (PropType<BasicColumn[] | FileBasicColumn[]>),
+    type: Array as PropType<BasicColumn[] | FileBasicColumn[]>,
     default: [],
     required: false,
   },
-  beforePreviewData:{
+  beforePreviewData: {
-    type: Function as PropType<(arg:string[])=>Recordable<any>>,
+    type: Function as PropType<(arg: string[]) => Recordable<any>>,
     default: null,
     required: false,
   },
-}
+};
 
 type ListType = 'text' | 'picture' | 'picture-card';
 
@@ -90,7 +90,7 @@ export const basicProps = {
 
 export const uploadContainerProps = {
   value: {
-    type: Array as (PropType<string[]>),
+    type: Array as PropType<string[]>,
     default: () => [],
   },
   ...basicProps,
@@ -102,7 +102,7 @@ export const uploadContainerProps = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
-  ...previewType
+  ...previewType,
 };
 
 export const previewProps = {
@@ -110,12 +110,12 @@ export const previewProps = {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-  ...previewType
+  ...previewType,
 };
 
 export const fileListProps = {
   columns: {
-    type: Array as (PropType<BasicColumn[] | FileBasicColumn[]> ),
+    type: Array as PropType<BasicColumn[] | FileBasicColumn[]>,
     default: null,
   },
   actionColumn: {

src/layouts/default/header/components/Breadcrumb.vue

@@ -1,26 +1,45 @@
 <template>
   <div :class="[prefixCls, `${prefixCls}--${theme}`]">
-    <a-breadcrumb :routes="routes">
+    <Breadcrumb>
-      <template #itemRender="{ route, routes: routesMatched, paths }">
+      <template v-for="routeItem in routes" :key="routeItem.name">
-        <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
+        <BreadcrumbItem>
-        <span v-if="!hasRedirect(routesMatched, route)">
+          <Icon :icon="getIcon(routeItem)" v-if="getShowBreadCrumbIcon && getIcon(routeItem)" />
-          {{ t(route.meta.title || route.name) }}
+          <span v-if="!hasRedirect(routes, routeItem)">
-        </span>
+            {{ t((routeItem.meta.title || routeItem.name) as string) }}
-        <router-link v-else to="" @click="handleClick(route, paths, $event as Event)">
+          </span>
-          {{ t(route.meta.title || route.name) }}
+          <router-link v-else to="" @click="handleClick(routeItem)">
-        </router-link>
+            {{ t((routeItem.meta.title || routeItem.name) as string) }}
+          </router-link>
+          <template v-if="routeItem.children" #overlay>
+            <Menu>
+              <template v-for="childItem in routeItem.children" :key="childItem.name">
+                <MenuItem>
+                  <Icon
+                    :icon="getIcon(childItem)"
+                    v-if="getShowBreadCrumbIcon && getIcon(childItem)"
+                  />
+                  <span v-if="!hasRedirect(routes, childItem)">
+                    {{ t((childItem.meta?.title || childItem.name) as string) }}
+                  </span>
+                  <router-link v-else to="" @click="handleClick(childItem)">
+                    {{ t((childItem.meta?.title || childItem.name) as string) }}
+                  </router-link>
+                </MenuItem>
+              </template>
+            </Menu>
+          </template>
+        </BreadcrumbItem>
       </template>
-    </a-breadcrumb>
+    </Breadcrumb>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { RouteLocationMatched } from 'vue-router';
   import { useRouter } from 'vue-router';
-  import type { Menu } from '@/router/types';
 
-  import { defineComponent, ref, watchEffect } from 'vue';
+  import { ref, watchEffect } from 'vue';
 
-  import { Breadcrumb } from 'ant-design-vue';
+  import { Breadcrumb, BreadcrumbItem, Menu, MenuItem } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
 
   import { useDesign } from '@/hooks/web/useDesign';
@@ -36,121 +55,114 @@
   import { REDIRECT_NAME } from '@/router/constant';
   import { getAllParentPath } from '@/router/helper/menuHelper';
 
-  export default defineComponent({
+  defineOptions({ name: 'LayoutBreadcrumb' });
-    name: 'LayoutBreadcrumb',
-    components: { Icon, [Breadcrumb.name]: Breadcrumb },
-    props: {
-      theme: propTypes.oneOf(['dark', 'light']),
-    },
-    setup() {
-      const routes = ref<RouteLocationMatched[]>([]);
-      const { currentRoute } = useRouter();
-      const { prefixCls } = useDesign('layout-breadcrumb');
-      const { getShowBreadCrumbIcon } = useRootSetting();
-      const go = useGo();
 
-      const { t } = useI18n();
+  defineProps({
-      watchEffect(async () => {
+    theme: propTypes.oneOf(['dark', 'light']),
-        if (currentRoute.value.name === REDIRECT_NAME) return;
-        const menus = await getMenus();
-
-        const routeMatched = currentRoute.value.matched;
-        const cur = routeMatched?.[routeMatched.length - 1];
-        let path = currentRoute.value.path;
-
-        if (cur && cur?.meta?.currentActiveMenu) {
-          path = cur.meta.currentActiveMenu as string;
-        }
-
-        const parent = getAllParentPath(menus, path);
-        const filterMenus = menus.filter((item) => item.path === parent[0]);
-        const matched = getMatched(filterMenus, parent) as any;
-
-        if (!matched || matched.length === 0){
-          routes.value = [];
-          return;
-        }
-
-        const breadcrumbList = filterItem(matched);
-
-        if (currentRoute.value.meta?.currentActiveMenu) {
-          breadcrumbList.push({
-            ...currentRoute.value,
-            name: currentRoute.value.meta?.title || currentRoute.value.name,
-          } as unknown as RouteLocationMatched);
-        }
-        routes.value = breadcrumbList;
-      });
-
-      function getMatched(menus: Menu[], parent: string[]) {
-        const metched: Menu[] = [];
-        menus.forEach((item) => {
-          if (parent.includes(item.path)) {
-            metched.push({
-              ...item,
-              name: item.meta?.title || item.name,
-            });
-          }
-          if (item.children?.length) {
-            metched.push(...getMatched(item.children, parent));
-          }
-        });
-        return metched;
-      }
-
-      function filterItem(list: RouteLocationMatched[]) {
-        return filter(list, (item) => {
-          const { meta, name } = item;
-          if (!meta) {
-            return !!name;
-          }
-          const { title, hideBreadcrumb, hideMenu } = meta;
-          if (!title || hideBreadcrumb || hideMenu) {
-            return false;
-          }
-          return true;
-        }).filter((item) => !item.meta?.hideBreadcrumb);
-      }
-
-      function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
-        e?.preventDefault();
-        const { children, redirect, meta } = route;
-
-        if (children?.length && !redirect) {
-          e?.stopPropagation();
-          return;
-        }
-        if (meta?.carryParam) {
-          return;
-        }
-
-        if (redirect && isString(redirect)) {
-          go(redirect);
-        } else {
-          let goPath = '';
-          if (paths.length === 1) {
-            goPath = paths[0];
-          } else {
-            const ps = paths.slice(1);
-            const lastPath = ps.pop() || '';
-            goPath = `${lastPath}`;
-          }
-          goPath = /^\//.test(goPath) ? goPath : `/${goPath}`;
-          go(goPath);
-        }
-      }
-
-      function hasRedirect(routes: RouteLocationMatched[], route: RouteLocationMatched) {
-        return routes.indexOf(route) !== routes.length - 1;
-      }
-
-      function getIcon(route) {
-        return route.icon || route.meta?.icon;
-      }
-
-      return { routes, t, prefixCls, getIcon, getShowBreadCrumbIcon, handleClick, hasRedirect };
-    },
   });
+
+  const routes = ref<RouteLocationMatched[]>([]);
+  const { currentRoute } = useRouter();
+  const { prefixCls } = useDesign('layout-breadcrumb');
+  const { getShowBreadCrumbIcon } = useRootSetting();
+  const go = useGo();
+
+  const { t } = useI18n();
+  watchEffect(async () => {
+    if (currentRoute.value.name === REDIRECT_NAME) return;
+    const menus = await getMenus();
+
+    const routeMatched = currentRoute.value.matched;
+    const cur = routeMatched?.[routeMatched.length - 1];
+    let path = currentRoute.value.path;
+
+    if (cur && cur?.meta?.currentActiveMenu) {
+      path = cur.meta.currentActiveMenu as string;
+    }
+
+    const parent = getAllParentPath(menus, path);
+    const filterMenus = menus.filter((item) => item.path === parent[0]);
+    const matched = getMatched(filterMenus, parent) as any;
+
+    if (!matched || matched.length === 0) {
+      routes.value = [];
+      return;
+    }
+
+    const breadcrumbList = filterItem(matched);
+
+    if (currentRoute.value.meta?.currentActiveMenu) {
+      breadcrumbList.push({
+        ...currentRoute.value,
+        name: currentRoute.value.meta?.title || currentRoute.value.name,
+      } as unknown as RouteLocationMatched);
+    }
+    routes.value = breadcrumbList;
+  });
+
+  function getMatched(menus, parent: string[]) {
+    const matched: any[] = [];
+    menus.forEach((item) => {
+      if (parent.includes(item.path)) {
+        matched.push({
+          ...item,
+          name: item.meta?.title || item.name,
+        });
+      }
+      if (item.children?.length) {
+        matched.push(...getMatched(item.children, parent));
+      }
+    });
+    return matched;
+  }
+
+  function filterItem(list: RouteLocationMatched[]) {
+    return filter(list, (item) => {
+      const { meta, name } = item;
+      if (!meta) {
+        return !!name;
+      }
+      const { title, hideBreadcrumb, hideMenu } = meta;
+      if (!title || hideBreadcrumb || hideMenu) {
+        return false;
+      }
+      return true;
+    }).filter((item) => !item.meta?.hideBreadcrumb);
+  }
+
+  function handleClick(route) {
+    console.log(route);
+    const { children, redirect, meta } = route;
+
+    if (children?.length && !redirect) {
+      return;
+    }
+    if (meta?.carryParam) {
+      return;
+    }
+
+    if (redirect && isString(redirect)) {
+      go(redirect);
+    } else {
+      let goPath = '';
+      if (route.path) {
+        goPath = route.path;
+      } else {
+        const lastPath = '';
+        goPath = `${lastPath}`;
+      }
+      goPath = /^\//.test(goPath) ? goPath : `/${goPath}`;
+      go(goPath);
+    }
+  }
+
+  function hasRedirect(routes, route) {
+    return routes.indexOf(route) !== routes.length - 1;
+  }
+
+  function getIcon(route) {
+    return route.icon || route.meta?.icon;
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-breadcrumb';

src/views/demo/comp/upload/index.vue

@@ -19,7 +19,6 @@
 
     <Alert message="嵌入表单,自定义预览内容" />
     <BasicForm @register="registerPreview" class="my-5" />
-    
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -27,9 +26,9 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import { BasicForm, FormSchema, useForm } from '@/components/Form';
   import { PageWrapper } from '@/components/Page';
-  import { Alert,Button } from 'ant-design-vue';
+  import { Alert, Button } from 'ant-design-vue';
   import { uploadApi } from '@/api/sys/upload';
-  import { createVNode } from "vue"
+  import { createVNode } from 'vue';
 
   const schemasValiate: FormSchema[] = [
     {
@@ -40,16 +39,17 @@
       componentProps: {
         api: uploadApi,
       },
-    },{
+    },
+    {
       field: 'field2',
-      component: "ImageUpload",
+      component: 'ImageUpload',
       label: '字段2(ImageUpload)',
       colProps: {
         span: 8,
       },
       componentProps: {
         api: uploadApi,
-      }
+      },
     },
   ];
   const schemasCustom: FormSchema[] = [
@@ -58,41 +58,41 @@
       component: 'Upload',
       label: '字段3',
       componentProps: {
-        resultField:"data3.url",
+        resultField: 'data3.url',
-        api: (file,progress)=>{
+        api: (file, progress) => {
-          return new Promise((resolve)=>{
+          return new Promise((resolve) => {
-            uploadApi(file,progress).then((uploadApiResponse)=>{
+            uploadApi(file, progress).then((uploadApiResponse) => {
               resolve({
-                code:200,
+                code: 200,
-                data3:{
+                data3: {
-                  url:uploadApiResponse.data.url
+                  url: uploadApiResponse.data.url,
-                }
+                },
-              })
+              });
-            })
+            });
-          })
+          });
         },
       },
     },
     {
       field: 'field4',
-      component: "ImageUpload",
+      component: 'ImageUpload',
       label: '字段4(ImageUpload)',
       colProps: {
         span: 8,
       },
       componentProps: {
-        resultField:"data4.url",
+        resultField: 'data4.url',
-        api: (file,progress)=>{
+        api: (file, progress) => {
-          return new Promise((resolve)=>{
+          return new Promise((resolve) => {
-            uploadApi(file,progress).then((uploadApiResponse)=>{
+            uploadApi(file, progress).then((uploadApiResponse) => {
               resolve({
-                code:200,
+                code: 200,
-                data4:{
+                data4: {
-                  url:uploadApiResponse.data.url
+                  url: uploadApiResponse.data.url,
-                }
+                },
-              })
+              });
-            })
+            });
-          })
+          });
         },
       },
     },
@@ -103,117 +103,124 @@
       component: 'Upload',
       label: '字段5',
       componentProps: {
-        previewColumns:[{
+        previewColumns: [
-          title:"url5",
+          {
-          dataIndex:"url5"
+            title: 'url5',
-        },{
+            dataIndex: 'url5',
-          title:"type5",
+          },
-          dataIndex:"type5"
+          {
-        },{
+            title: 'type5',
-          title:"name5",
+            dataIndex: 'type5',
-          dataIndex:"name5"
+          },
-        },
+          {
-        {
+            title: 'name5',
-          title:"operation",
+            dataIndex: 'name5',
-          dataIndex:"",
+          },
-          customRender: ({ record })=>{
+          {
-            return createVNode(Button,{
+            title: 'operation',
-              onclick:()=>{
+            dataIndex: '',
-                console.log(record)
+            customRender: ({ record }) => {
-                createMessage.success(`请到控制台查看该行输出结果`);
+              return createVNode(
+                Button,
+                {
+                  onclick: () => {
+                    console.log(record);
+                    createMessage.success(`请到控制台查看该行输出结果`);
+                  },
+                },
+                '点我',
+              );
+            },
+          },
+        ],
+        beforePreviewData: (arg) => {
+          let data = arg
+            .filter((item) => !!item)
+            .map((item) => {
+              if (typeof item !== 'string') {
+                console.error('return value should be string');
+                return;
               }
-            },"点我")
+              return {
-          }
+                url5: item,
+                type5: item.split('.').pop() || '',
+                name5: item.split('/').pop() || '',
+              };
+            });
+          return data;
         },
-      ],
+        resultField: 'data5.url',
-        beforePreviewData:(arg)=>{
+        api: (file, progress) => {
-          let data = arg.filter((item) => !!item).map((item) => {
+          return new Promise((resolve) => {
-            if(typeof item !== "string"){
+            uploadApi(file, progress).then((uploadApiResponse) => {
-              console.error("return value should be string")
-              return
-            }
-            return {
-              url5: item,
-              type5: item.split('.').pop() || '',
-              name5: item.split('/').pop() || '',
-            };
-          })
-          return data
-        },
-        resultField:"data5.url",
-        api: (file,progress)=>{
-          return new Promise((resolve)=>{
-            uploadApi(file,progress).then((uploadApiResponse)=>{
               resolve({
-                code:200,
+                code: 200,
-                data5:{
+                data5: {
-                  url:uploadApiResponse.data.url
+                  url: uploadApiResponse.data.url,
-                }
+                },
-              })
+              });
-            })
+            });
-          })
+          });
         },
       },
     },
   ];
 
-
-
   const { createMessage } = useMessage();
 
   function handleChange(list: string[]) {
     createMessage.success(`已上传文件${JSON.stringify(list)}`);
   }
-  const [registerValiate,{getFieldsValue:getFieldsValueValiate,validate}] = useForm({
+  const [registerValiate, { getFieldsValue: getFieldsValueValiate, validate }] = useForm({
     labelWidth: 160,
-    schemas:schemasValiate,
+    schemas: schemasValiate,
     actionColOptions: {
       span: 18,
     },
-    submitFunc:()=>{
+    submitFunc: () => {
-      return new Promise((resolve)=>{
+      return new Promise((resolve) => {
-        validate().then((e)=>{
+        validate()
-          resolve()
+          .then((_e) => {
-          console.log(getFieldsValueValiate())
+            resolve();
-          createMessage.success(`请到控制台查看结果`);
+            console.log(getFieldsValueValiate());
-        }).catch(()=>{
+            createMessage.success(`请到控制台查看结果`);
-          createMessage.error(`请输入必填项`);
+          })
-        })
+          .catch(() => {
-      })
+            createMessage.error(`请输入必填项`);
-    }
+          });
+      });
+    },
   });
 
   // resultFields 字段示例
-  const [registerCustom,{getFieldsValue:getFieldsValueCustom}] = useForm({
+  const [registerCustom, { getFieldsValue: getFieldsValueCustom }] = useForm({
     labelWidth: 160,
-    schemas:schemasCustom,
+    schemas: schemasCustom,
     actionColOptions: {
       span: 18,
     },
-    submitFunc:()=>{
+    submitFunc: () => {
-      return new Promise((resolve)=>{
+      return new Promise((resolve) => {
-        console.log(getFieldsValueCustom())
+        console.log(getFieldsValueCustom());
-        resolve()
+        resolve();
         createMessage.success(`请到控制台查看结果`);
-      })
+      });
-    }
+    },
   });
 
   // registerPreview
-  const [registerPreview,{getFieldsValue:getFieldsValuePreview}] = useForm({
+  const [registerPreview, { getFieldsValue: getFieldsValuePreview }] = useForm({
     labelWidth: 160,
-    schemas:schemasPreview,
+    schemas: schemasPreview,
     actionColOptions: {
       span: 18,
     },
-    submitFunc:()=>{
+    submitFunc: () => {
-      return new Promise((resolve)=>{
+      return new Promise((resolve) => {
-        console.log(getFieldsValuePreview())
+        console.log(getFieldsValuePreview());
-        resolve()
+        resolve();
         createMessage.success(`请到控制台查看结果`);
-      })
+      });
-    }
+    },
   });
-
-
 </script>

src/views/demo/feat/watermark/index.vue

@@ -30,8 +30,8 @@
   const { setWatermark: setWatermark2 } = useWatermark();
   const { setWatermark: setWatermark3 } = useWatermark(app, {
     fontColor: 'red',
-    fontSize:12,
+    fontSize: 12,
-    rotate:30
+    rotate: 30,
   });
 
   onUnmounted(() => {