feat: 升级前端框架，适配手机端

packages/ui/certd-client/src/plugin/antdv-async/index.ts

@@ -0,0 +1,190 @@
+import { defineAsyncComponent } from "vue";
+import Input from "ant-design-vue/es/input/Input";
+import Button from "ant-design-vue/es/button/button";
+import Divider from "ant-design-vue/es/divider";
+import Badge from "ant-design-vue/es/badge";
+import Empty from "ant-design-vue/es/empty";
+import Avatar from "ant-design-vue/es/avatar";
+import Steps from "ant-design-vue/es/steps";
+import Select from "ant-design-vue/es/select";
+
+export default {
+  install(app: any) {
+    app.use(Input);
+    app.use(Button);
+    app.component("ADivider", Divider);
+    app.component("ABadge", Badge);
+    app.component("AEmpty", Empty);
+    app.component("AAvatar", Avatar);
+    app.use(Steps);
+    app.use(Select);
+
+    app.component(
+      "AInputPassword",
+      defineAsyncComponent(() => import("ant-design-vue/es/input/Password"))
+    );
+    app.component(
+      "AButtonGroup",
+      defineAsyncComponent(() => import("ant-design-vue/es/button/button-group"))
+    );
+    app.component(
+      "ARadio",
+      defineAsyncComponent(() => import("ant-design-vue/es/radio/Radio"))
+    );
+    app.component(
+      "ARadioGroup",
+      defineAsyncComponent(() => import("ant-design-vue/es/radio/Group"))
+    );
+    app.component(
+      "ATable",
+      defineAsyncComponent(() => import("ant-design-vue/es/table/Table"))
+    );
+    app.component(
+      "AModal",
+      defineAsyncComponent(() => import("ant-design-vue/es/modal/Modal"))
+    );
+    app.component(
+      "AForm",
+      defineAsyncComponent(() => import("ant-design-vue/es/form/Form"))
+    );
+    app.component(
+      "AFormItem",
+      defineAsyncComponent(() => import("ant-design-vue/es/form/FormItem"))
+    );
+    app.component(
+      "AFormItemRest",
+      defineAsyncComponent(() => import("ant-design-vue/es/form/FormItemContext"))
+    );
+
+    app.component(
+      "ATabs",
+      defineAsyncComponent(() => import("ant-design-vue/es/tabs/src/Tabs"))
+    );
+
+    app.component(
+      "ATabPane",
+      defineAsyncComponent(() => import("ant-design-vue/es/tabs/src/TabPanelList/TabPane"))
+    );
+    app.component(
+      "ATextarea",
+      defineAsyncComponent(() => import("ant-design-vue/es/input/TextArea"))
+    );
+    app.component(
+      "AInputNumber",
+      defineAsyncComponent(() => import("ant-design-vue/es/input-number/index"))
+    );
+    app.component(
+      "ADrawer",
+      defineAsyncComponent(() => import("ant-design-vue/es/drawer/index"))
+    );
+    app.component(
+      "ASwitch",
+      defineAsyncComponent(() => import("ant-design-vue/es/switch/index"))
+    );
+    app.component(
+      "AUpload",
+      defineAsyncComponent(() => import("ant-design-vue/es/upload/index"))
+    );
+    app.component(
+      "ADatePicker",
+      defineAsyncComponent(() => import("ant-design-vue/es/date-picker/index"))
+    );
+    app.component(
+      "ARangePicker",
+      defineAsyncComponent(async () => {
+        const { RangePicker } = await import("ant-design-vue/es/date-picker/index");
+        return RangePicker;
+      })
+    );
+    app.component(
+      "ATimePicker",
+      defineAsyncComponent(() => import("ant-design-vue/es/time-picker/index"))
+    );
+    app.component(
+      "ATag",
+      defineAsyncComponent(() => import("ant-design-vue/es/tag/index"))
+    );
+    app.component(
+      "AAlert",
+      defineAsyncComponent(() => import("ant-design-vue/es/alert/index"))
+    );
+    app.component(
+      "AInputAutoComplete",
+      defineAsyncComponent(() => import("ant-design-vue/es/auto-complete/index"))
+    );
+    app.component(
+      "ACard",
+      defineAsyncComponent(() => import("ant-design-vue/es/card/index"))
+    );
+    app.component(
+      "ACascader",
+      defineAsyncComponent(() => import("ant-design-vue/es/cascader/index"))
+    );
+    app.component(
+      "ACheckbox",
+      defineAsyncComponent(() => import("ant-design-vue/es/checkbox"))
+    );
+    app.component(
+      "ACheckboxGroup",
+      defineAsyncComponent(() => import("ant-design-vue/es/checkbox/Group"))
+    );
+    app.component(
+      "ACol",
+      defineAsyncComponent(() => import("ant-design-vue/es/col"))
+    );
+    app.component(
+      "ARow",
+      defineAsyncComponent(() => import("ant-design-vue/es/row"))
+    );
+    app.component(
+      "ADropdown",
+      defineAsyncComponent(() => import("ant-design-vue/es/dropdown"))
+    );
+    app.component(
+      "AGrid",
+      defineAsyncComponent(() => import("ant-design-vue/es/grid"))
+    );
+    app.component(
+      "AImage",
+      defineAsyncComponent(() => import("ant-design-vue/es/image"))
+    );
+    app.component(
+      "APagination",
+      defineAsyncComponent(() => import("ant-design-vue/es/pagination"))
+    );
+    app.component(
+      "ATooltip",
+      defineAsyncComponent(() => import("ant-design-vue/es/tooltip"))
+    );
+    app.component(
+      "ATree",
+      defineAsyncComponent(() => import("ant-design-vue/es/tree"))
+    );
+    app.component(
+      "ATreeSelect",
+      defineAsyncComponent(() => import("ant-design-vue/es/tree-select"))
+    );
+    app.component(
+      "AToar",
+      defineAsyncComponent(() => import("ant-design-vue/es/tree-select"))
+    );
+
+    app.component(
+      "AMenu",
+      defineAsyncComponent(() => import("ant-design-vue/es/menu/index"))
+    );
+    app.component(
+      "ASubMenu",
+      defineAsyncComponent(() => import("ant-design-vue/es/menu/src/SubMenu"))
+    );
+    app.component(
+      "AMenuItem",
+      defineAsyncComponent(() => import("ant-design-vue/es/menu/src/MenuItem"))
+    );
+
+    app.component(
+      "AProgress",
+      defineAsyncComponent(() => import("ant-design-vue/es/progress"))
+    );
+  }
+};

packages/ui/certd-client/src/plugin/fast-crud/index.tsx

@@ -29,10 +29,11 @@ import {
 import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv4";
 import "@fast-crud/ui-antdv4/dist/style.css";
-import * as _ from "lodash-es";
+import { merge } from "lodash-es";
 import { useCrudPermission } from "../permission";
 import { App } from "vue";
 import { notification } from "ant-design-vue";
+import { usePreferences } from "/@/vben/preferences";
 
 function install(app: App, options: any = {}) {
   app.use(UiAntdv);
@@ -54,7 +55,18 @@ function install(app: App, options: any = {}) {
     commonOptions(props: UseCrudProps): CrudOptions {
       utils.logger.debug("commonOptions:", props);
       const crudBinding = props.crudExpose?.crudBinding;
+      const { isMobile } = usePreferences();
       const opts: CrudOptions = {
+        settings: {
+          plugins: {
+            mobile: {
+              enabled: true,
+              props: {
+                isMobile: isMobile
+              }
+            }
+          }
+        },
         table: {
           scroll: {
             x: 960
@@ -90,6 +102,7 @@ function install(app: App, options: any = {}) {
           }
         },
         rowHandle: {
+          fixed: "right",
           buttons: {
             view: { type: "link", text: null, icon: "ion:eye-outline" },
             copy: { show: true, type: "link", text: null, icon: "ion:copy-outline" },
@@ -174,6 +187,20 @@ function install(app: App, options: any = {}) {
               order: 999999,
               width: -1
             }
+          },
+          //最后一列空白，用于自动伸缩列宽
+          __blank__: {
+            title: "",
+            type: "text",
+            form: {
+              show: false
+            },
+            column: {
+              order: 99999,
+              width: -1,
+              columnSetShow: false,
+              resizable: false
+            }
           }
         }
       };
@@ -198,7 +225,11 @@ function install(app: App, options: any = {}) {
       action: "/basic/file/upload",
       name: "file",
       withCredentials: false,
-      uploadRequest: async ({ action, file, onProgress }: any) => {
+      test: 22,
+      custom: { aaa: 22 },
+      uploadRequest: async (opts: any) => {
+        console.log("uploadRequest:", opts);
+        const { action, file, onProgress } = opts;
         // @ts-ignore
         const data = new FormData();
         data.append("file", file);
@@ -268,7 +299,7 @@ function install(app: App, options: any = {}) {
       // 比如你可以定义一个readonly的公共属性，处理该字段只读，不能编辑
       if (columnProps.readonly) {
         // 合并column配置
-        _.merge(columnProps, {
+        merge(columnProps, {
           form: { show: false },
           viewForm: { show: true }
         });
@@ -277,6 +308,25 @@ function install(app: App, options: any = {}) {
     }
   });
 
+  //默认宽度，支持自动拖动调整列宽
+  registerMergeColumnPlugin({
+    name: "resize-column-plugin",
+    order: 2,
+    handle: (columnProps: ColumnCompositionProps) => {
+      if (!columnProps.column) {
+        columnProps.column = {};
+      }
+      if (columnProps.column.resizable == null) {
+        columnProps.column.resizable = true;
+        if (!columnProps.column.width) {
+          columnProps.column.width = 200;
+        }
+      }
+
+      return columnProps;
+    }
+  });
+
   registerMergeColumnPlugin({
     name: "resize-column-plugin",
     order: 2,

packages/ui/certd-client/src/plugin/permission/hook.ts

@@ -6,7 +6,7 @@ import { message } from "ant-design-vue";
 import NProgress from "nprogress";
 export function registerRouterHook() {
   // 注册路由beforeEach钩子，在第一次加载路由页面时，加载权限
-  router.beforeEach(async (to, from, next) => {
+  router.beforeEach(async (to, from) => {
     const permissionStore = usePermissionStore();
     if (permissionStore.isInited) {
       if (to.meta.permission) {
@@ -20,15 +20,13 @@ export function registerRouterHook() {
           return false;
         }
       }
-      next();
-      return;
+      return true;
     }
 
     const userStore = useUserStore();
     const token = userStore.getToken;
     if (!token || token === "undefined") {
-      next();
-      return;
+      return true;
     }
 
     // 初始化权限列表
@@ -36,10 +34,10 @@ export function registerRouterHook() {
       console.log("permission is enabled");
       await permissionStore.loadFromRemote();
       console.log("PM load success");
-      next({ ...to, replace: true });
+      return { ...to, replace: true };
     } catch (e) {
       console.error("加载动态路由失败", e);
-      next();
+      return false;
     }
   });
 }

packages/ui/certd-client/src/plugin/permission/store.permission.ts

@@ -1,8 +1,9 @@
 import { defineStore } from "pinia";
-import { useResourceStore } from "/src/store/modules/resource";
+// import { useResourceStore } from "/src/store/modules/resource";
 import { getPermissions } from "./api";
 import { mitter } from "/@/utils/util.mitt";
 import { env } from "/@/utils/util.env";
+import { useAccessStore } from "/@/vben/stores";
 
 //监听注销事件
 mitter.on("app.logout", () => {
@@ -75,8 +76,8 @@ export const usePermissionStore = defineStore({
       this.init({ permissions });
 
       //过滤没有权限的菜单
-      const resourceStore = useResourceStore();
-      resourceStore.filterByPermission(permissions);
+      const accessStore = useAccessStore();
+      accessStore.setAccessCodes(permissions);
     },
     async loadFromRemote() {
       let permissionTree = [];

packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts

@@ -1,5 +1,5 @@
 import { usePermission } from "/@/plugin/permission";
-import * as _ from "lodash-es";
+import { merge as LodashMerge } from "lodash-es";
 
 export type UseCrudPermissionExtraProps = {
   hasActionPermission: (action: string) => boolean;
@@ -30,7 +30,7 @@ export function useCrudPermission({ permission }: UseCrudPermissionProps) {
     return hasPermissions(prefix + ":" + action);
   }
 
-  function buildCrudPermission() {
+  function buildCrudPermission(): any {
     if (permission == null) {
       return {};
     }
@@ -43,7 +43,7 @@ export function useCrudPermission({ permission }: UseCrudPermissionProps) {
       }
     }
 
-    return _.merge(
+    return LodashMerge(
       {
         actionbar: {
           buttons: {
@@ -64,7 +64,7 @@ export function useCrudPermission({ permission }: UseCrudPermissionProps) {
 
   function merge(userOptions: any) {
     const permissionOptions = buildCrudPermission();
-    _.merge(permissionOptions, userOptions);
+    LodashMerge(permissionOptions, userOptions);
     return permissionOptions;
   }
 

packages/ui/certd-client/src/plugin/permission/util.permission.ts

@@ -15,6 +15,9 @@ const util = {
     const permissionStore = usePermissionStore();
     const userPermissionList = permissionStore.getPermissions;
     return userPermissionList.some((permission: any) => {
+      if (permission === "*") {
+        return true;
+      }
       return need.includes(permission);
     });
   },