feat(project): 添加vben5前端

Yi.Vben5.Vue3/apps/web-antd/src/adapter/component/index.ts

@@ -0,0 +1,258 @@
+/**
+ * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
+ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
+ */
+
+import type { Component } from 'vue';
+
+import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import {
+  computed,
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
+
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { notification } from 'ant-design-vue';
+
+import { FileUploadOld, ImageUploadOld } from '#/components/upload-old';
+
+const RichTextarea = defineAsyncComponent(() =>
+  import('#/components/tinymce/index').then((res) => res.Tinymce),
+);
+
+const FileUpload = defineAsyncComponent(() =>
+  import('#/components/upload').then((res) => res.FileUpload),
+);
+
+const ImageUpload = defineAsyncComponent(() =>
+  import('#/components/upload').then((res) => res.ImageUpload),
+);
+
+const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Cascader = defineAsyncComponent(
+  () => import('ant-design-vue/es/cascader'),
+);
+const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
+) => {
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      // 改为placeholder 解决在keepalive & 语言切换 & tab切换 显示不变的问题
+      const computedPlaceholder = computed(
+        () =>
+          props?.placeholder ||
+          attrs?.placeholder ||
+          $t(`ui.placeholder.${type}`),
+      );
+
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          {
+            ...componentProps,
+            placeholder: computedPlaceholder.value,
+            ...props,
+            ...attrs,
+            ref: innerRef,
+          },
+          slots,
+        );
+    },
+  });
+};
+
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
+export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
+  | 'AutoComplete'
+  | 'Cascader'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'DefaultButton'
+  | 'Divider'
+  | 'FileUpload'
+  | 'FileUploadOld'
+  | 'IconPicker'
+  | 'ImageUpload'
+  | 'ImageUploadOld'
+  | 'Input'
+  | 'InputNumber'
+  | 'InputPassword'
+  | 'Mentions'
+  | 'PrimaryButton'
+  | 'Radio'
+  | 'RadioGroup'
+  | 'RangePicker'
+  | 'Rate'
+  | 'RichTextarea'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'Textarea'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+async function initComponentAdapter() {
+  const components: Partial<Record<ComponentType, Component>> = {
+    // 如果你的组件体积比较大，可以使用异步加载
+    // Button: () =>
+    // import('xxx').then((res) => res.Button),
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: Select,
+        loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
+    AutoComplete,
+    Cascader: withDefaultPlaceholder(Cascader, 'select'),
+    Checkbox,
+    CheckboxGroup,
+    DatePicker,
+    // 自定义默认按钮
+    DefaultButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'default' }, slots);
+    },
+    Divider,
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
+    Input: withDefaultPlaceholder(Input, 'input'),
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
+    Mentions: withDefaultPlaceholder(Mentions, 'input'),
+    // 自定义主要按钮
+    PrimaryButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Radio,
+    RadioGroup,
+    RangePicker,
+    Rate,
+    Select: withDefaultPlaceholder(Select, 'select'),
+    Space,
+    Switch,
+    Textarea: withDefaultPlaceholder(Textarea, 'input'),
+    TimePicker,
+    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
+    Upload,
+    ImageUpload,
+    FileUpload,
+    RichTextarea,
+    ImageUploadOld,
+    FileUploadOld,
+  };
+
+  // 将组件注册到全局共享状态中
+  globalShareState.setComponents(components);
+
+  // 定义全局共享状态中的消息提示
+  globalShareState.defineMessage({
+    // 复制成功消息提示
+    copyPreferencesSuccess: (title, content) => {
+      notification.success({
+        description: content,
+        message: title,
+        placement: 'bottomRight',
+      });
+    },
+  });
+}
+
+export { initComponentAdapter };

Yi.Vben5.Vue3/apps/web-antd/src/adapter/form.ts

@@ -0,0 +1,56 @@
+import type {
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import type { ComponentType } from './component';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { isArray } from 'lodash-es';
+
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
+
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        RichTextarea: 'modelValue',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
+    },
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (
+          [false, null, undefined].includes(value) ||
+          (isArray(value) && value.length === 0)
+        ) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+    },
+  });
+}
+
+const useVbenForm = useForm<ComponentType>;
+
+export { initSetupVbenForm, useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<ComponentType>;
+export type { VbenFormProps };
+export type FormSchemaGetter = () => VbenFormSchema[];

Yi.Vben5.Vue3/apps/web-antd/src/adapter/vxe-table.ts

@@ -0,0 +1,137 @@
+import type { VxeGridPropTypes } from '@vben/plugins/vxe-table';
+
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'totalCount',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        // 溢出展示形式
+        showOverflow: true,
+        pagerConfig: {
+          // 默认条数
+          pageSize: 10,
+          // 分页可选条数
+          pageSizes: [10, 20, 30, 40, 50],
+        },
+        rowConfig: {
+          // 鼠标移入行显示 hover 样式
+          isHover: true,
+          // 点击行高亮
+          isCurrent: false,
+        },
+        columnConfig: {
+          // 可拖拽列宽
+          resizable: true,
+        },
+        // 右上角工具栏
+        toolbarConfig: {
+          // 自定义列
+          custom: true,
+          customOptions: {
+            icon: 'vxe-icon-setting',
+          },
+          // 最大化
+          zoom: true,
+          // 刷新
+          refresh: true,
+          refreshOptions: {
+            // 默认为reload 修改为在当前页刷新
+            code: 'query',
+          },
+        },
+        // 圆角按钮
+        round: true,
+        // 表格尺寸
+        size: 'medium',
+        customConfig: {
+          // 表格右上角自定义列配置 是否保存到localStorage
+          // 必须存在id参数才能使用
+          storage: false,
+        },
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(Image, { src: row[column.field] });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          Button,
+          { size: 'small', type: 'link' },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
+
+export { useVbenVxeGrid };
+
+export type * from '@vben/plugins/vxe-table';
+
+/**
+ * 判断vxe-table的复选框是否选中
+ * @param tableApi api
+ * @returns boolean
+ */
+export function vxeCheckboxChecked(
+  tableApi: ReturnType<typeof useVbenVxeGrid>[1],
+) {
+  return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
+}
+
+/**
+ * 通用的 排序参数添加到请求参数中
+ * @param params 请求参数
+ * @param sortList vxe-table的排序参数
+ */
+export function addSortParams(
+  params: Record<string, any>,
+  sortList: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams[],
+) {
+  // 这里是排序取消 length为0 就不添加参数了
+  if (sortList.length === 0) {
+    return;
+  }
+  // 支持单/多字段排序
+  const orderByColumn = sortList.map((item) => item.field).join(',');
+  const isAsc = sortList.map((item) => item.order).join(',');
+  params.orderByColumn = orderByColumn;
+  params.isAsc = isAsc;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/common.d.ts

@@ -0,0 +1,42 @@
+export type ID = number | string;
+export type IDS = (number | string)[];
+
+export interface BaseEntity {
+  createBy?: string;
+  createDept?: string;
+  createTime?: string;
+  updateBy?: string;
+  updateTime?: string;
+}
+
+/**
+ * 分页信息
+ * @param rows 结果集
+ * @param total 总数
+ */
+export interface PageResult<T = any> {
+  items: T[];
+  totalCount: number;
+}
+
+/**
+ * 分页查询参数
+ *
+ * 排序支持的用法如下:
+ * {isAsc:"asc",orderByColumn:"id"} order by id asc
+ * {isAsc:"asc",orderByColumn:"id,createTime"} order by id asc,create_time asc
+ * {isAsc:"desc",orderByColumn:"id,createTime"} order by id desc,create_time desc
+ * {isAsc:"asc,desc",orderByColumn:"id,createTime"} order by id asc,create_time desc
+ *
+ * @param SkipCount 当前页
+ * @param MaxResultCount 每页大小
+ * @param orderByColumn 排序字段
+ * @param isAsc 是否升序
+ */
+export interface PageQuery {
+  isAsc?: string;
+  orderByColumn?: string;
+  SkipCount?: number;
+  MaxResultCount?: number;
+  [key: string]: any;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/core/auth.ts

@@ -0,0 +1,204 @@
+import type { GrantType } from '@vben/common-ui';
+import type { HttpResponse } from '@vben/request';
+
+import { h } from 'vue';
+
+import { useAppConfig } from '@vben/hooks';
+
+import { Modal } from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+
+const { clientId, sseEnable } = useAppConfig(
+  import.meta.env,
+  import.meta.env.PROD,
+);
+
+export namespace AuthApi {
+  /**
+   * @description: 所有登录类型都需要用到的
+   * @param clientId 客户端ID 这里为必填项 但是在loginApi内部处理了 所以为可选
+   * @param grantType 授权/登录类型
+   * @param tenantId 租户id
+   */
+  export interface BaseLoginParams {
+    clientId?: string;
+    grantType: GrantType;
+    tenantId: string;
+  }
+
+  /**
+   * @description: oauth登录需要用到的参数
+   * @param socialCode 第三方参数
+   * @param socialState 第三方参数
+   * @param source 与后端的 justauth.type.xxx的回调地址的source对应
+   */
+  export interface OAuthLoginParams extends BaseLoginParams {
+    socialCode: string;
+    socialState: string;
+    source: string;
+  }
+
+  /**
+   * @description: 验证码登录需要用到的参数
+   * @param code 验证码 可选(未开启验证码情况)
+   * @param uuid 验证码ID 可选(未开启验证码情况)
+   * @param username 用户名
+   * @param password 密码
+   */
+  export interface SimpleLoginParams extends BaseLoginParams {
+    code?: string;
+    uuid?: string;
+    username: string;
+    password: string;
+  }
+
+  export type LoginParams = OAuthLoginParams | SimpleLoginParams;
+
+  // /** 登录接口参数 */
+  // export interface LoginParams {
+  //   code?: string;
+  //   grantType: string;
+  //   password: string;
+  //   tenantId: string;
+  //   username: string;
+  //   uuid?: string;
+  // }
+
+  /** 登录接口返回值 */
+  export interface LoginResult {
+    access_token: string;
+    client_id: string;
+    expire_in: number;
+  }
+
+  export interface RefreshTokenResult {
+    data: string;
+    status: number;
+  }
+}
+
+/**
+ * 登录
+ */
+export async function loginApi(data: AuthApi.LoginParams) {
+  return requestClient.post<AuthApi.LoginResult>(
+    '/account/login',
+    { ...data, clientId },
+    {
+      encrypt: true,
+    },
+  );
+}
+
+/**
+ * 用户登出
+ * @returns void
+ */
+export async function doLogout() {
+  const resp = await requestClient.post<HttpResponse<void>>(
+    'account/logout',
+    null,
+    {
+      isTransformResponse: false,
+    },
+  );
+  // 无奈之举 对错误用法的提示
+  if (resp.code === 401 && import.meta.env.DEV) {
+    Modal.destroyAll();
+    Modal.warn({
+      title: '后端配置出现错误',
+      centered: true,
+      content: h('div', { class: 'flex flex-col gap-2' }, [
+        `检测到你的logout接口返回了401, 导致前端一直进入循环逻辑???`,
+        ...Array.from({ length: 3 }, () =>
+          h(
+            'span',
+            { class: 'font-bold text-red-500 text-[18px]' },
+            '去检查你的后端配置!别盯着前端找问题了!这不是前端问题!',
+          ),
+        ),
+      ]),
+    });
+  }
+}
+
+/**
+ * 关闭sse连接
+ * @returns void
+ */
+export function seeConnectionClose() {
+  /**
+   * 未开启sse 不需要处理
+   */
+  if (!sseEnable) {
+    return;
+  }
+  return requestClient.get<void>('/resource/sse/close');
+}
+
+/**
+ * @param companyName 租户/公司名称
+ * @param domain 绑定域名(不带http(s)://) 可选
+ * @param tenantId 租户id
+ */
+export interface TenantOption {
+  companyName: string;
+  domain?: string;
+  tenantId: string;
+}
+
+/**
+ * @param tenantEnabled 是否启用租户
+ * @param voList 租户列表
+ */
+export interface TenantResp {
+  tenantEnabled: boolean;
+  voList: TenantOption[];
+}
+
+/**
+ * 获取租户列表 下拉框使用
+ */
+export function tenantList() {
+  return requestClient.get<TenantResp>('/tenant/select');
+}
+
+/**
+ * vben的 先不删除
+ * @returns string[]
+ */
+export async function getAccessCodesApi() {
+  return requestClient.get<string[]>('/auth/codes');
+}
+
+/**
+ * 绑定第三方账号
+ * @param source 绑定的来源
+ * @returns 跳转url
+ */
+export function authBinding(source: string, tenantId: string) {
+  return requestClient.get<string>(`/auth/binding/${source}`, {
+    params: {
+      domain: window.location.host,
+      tenantId,
+    },
+  });
+}
+
+/**
+ * 取消绑定
+ * @param id id
+ */
+export function authUnbinding(id: string) {
+  return requestClient.deleteWithMsg<void>(`/auth/unlock/${id}`);
+}
+
+/**
+ * oauth授权回调
+ * @param data oauth授权
+ * @returns void
+ */
+export function authCallback(data: AuthApi.OAuthLoginParams) {
+  return requestClient.post<void>('/auth/social/callback', data);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/core/captcha.ts

@@ -0,0 +1,42 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 发送短信验证码
+ * @param phonenumber 手机号
+ * @returns void
+ */
+export function sendSmsCode(phonenumber: string) {
+  return requestClient.get<void>('/resource/sms/code', {
+    params: { phonenumber },
+  });
+}
+
+/**
+ * 发送邮件验证码
+ * @param email 邮箱
+ * @returns void
+ */
+export function sendEmailCode(email: string) {
+  return requestClient.get<void>('/resource/email/code', {
+    params: { email },
+  });
+}
+
+/**
+ * @param img 图片验证码 需要和base64拼接
+ * @param isEnableCaptcha 是否开启
+ * @param uuid 验证码ID
+ */
+export interface CaptchaResponse {
+  isEnableCaptcha: boolean;
+  img: string;
+  uuid: string;
+}
+
+/**
+ * 图片验证码
+ * @returns resp
+ */
+export function captchaImage() {
+  return requestClient.get<CaptchaResponse>('/account/captcha-image');
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/core/index.ts

@@ -0,0 +1,4 @@
+export * from './auth';
+export * from './menu';
+export * from './upload';
+export * from './user';

Yi.Vben5.Vue3/apps/web-antd/src/api/core/menu.ts

@@ -0,0 +1,45 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * @description: 菜单meta
+ * @param title 菜单名
+ * @param icon 菜单图标
+ * @param noCache 是否不缓存
+ * @param link 外链链接
+ */
+export interface MenuMeta {
+  icon: string;
+  link?: string;
+  noCache: boolean;
+  title: string;
+}
+
+/**
+ * @description: 菜单
+ * @param name 菜单名
+ * @param path 菜单路径
+ * @param hidden 是否隐藏
+ * @param component 组件名称 Layout
+ * @param alwaysShow 总是显示
+ * @param query 路由参数(json形式)
+ * @param meta 路由信息
+ * @param children 子路由信息
+ */
+export interface Menu {
+  alwaysShow?: boolean;
+  children: Menu[];
+  component: string;
+  hidden: boolean;
+  meta: MenuMeta;
+  name: string;
+  path: string;
+  query?: string;
+  redirect?: string;
+}
+
+/**
+ * 获取用户所有菜单
+ */
+export async function getAllMenusApi() {
+  return requestClient.get<Menu[]>('/account/Vue3Router/vben5');
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/core/upload.ts

@@ -0,0 +1,47 @@
+import type { AxiosRequestConfig } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * Axios上传进度事件
+ */
+export type AxiosProgressEvent = AxiosRequestConfig['onUploadProgress'];
+
+/**
+ * 默认上传结果
+ */
+export interface UploadResult {
+  url: string;
+  fileName: string;
+  ossId: string;
+}
+
+/**
+ * 通过单文件上传接口
+ * @param file 上传的文件
+ * @param options 一些配置项
+ * @param options.onUploadProgress 上传进度事件
+ * @param options.signal 上传取消信号
+ * @param options.otherData 其他请求参数 后端拓展可能会用到
+ * @returns 上传结果
+ */
+export function uploadApi(
+  file: Blob | File,
+  options?: {
+    onUploadProgress?: AxiosProgressEvent;
+    otherData?: Record<string, any>;
+    signal?: AbortSignal;
+  },
+) {
+  const { onUploadProgress, signal, otherData = {} } = options ?? {};
+  return requestClient.upload<UploadResult>(
+    '/resource/oss/upload',
+    { file, ...otherData },
+    { onUploadProgress, signal, timeout: 60_000 },
+  );
+}
+
+/**
+ * 上传api type
+ */
+export type UploadApi = typeof uploadApi;

Yi.Vben5.Vue3/apps/web-antd/src/api/core/user.ts

@@ -0,0 +1,47 @@
+import { requestClient } from '#/api/request';
+
+export interface Role {
+  dataScope: string;
+  flag: boolean;
+  roleId: number;
+  roleKey: string;
+  roleName: string;
+  roleSort: number;
+  status: string;
+  superAdmin: boolean;
+}
+
+export interface User {
+  avatar: string;
+  createTime: string;
+  deptId: number;
+  deptName: string;
+  email: string;
+  loginDate: string;
+  loginIp: string;
+  nickName: string;
+  phonenumber: string;
+  remark: string;
+  roles: Role[];
+  sex: string;
+  status: string;
+  tenantId: string;
+  userId: number;
+  userName: string;
+  userType: string;
+}
+
+export interface UserInfoResp {
+  permissionCodes: string[];
+  roles: string[];
+  roleCodes: string[];
+  user: User;
+}
+
+/**
+ * 获取用户信息
+ * 存在返回null的情况(401) 不会抛出异常 需要手动抛异常
+ */
+export async function getUserInfoApi() {
+  return requestClient.get<null | UserInfoResp>('account');
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/helper.ts

@@ -0,0 +1,28 @@
+import { requestClient } from './request';
+
+/**
+ * @description:  contentType
+ */
+export const ContentTypeEnum = {
+  // form-data  upload
+  FORM_DATA: 'multipart/form-data;charset=UTF-8',
+  // form-data qs
+  FORM_URLENCODED: 'application/x-www-form-urlencoded;charset=UTF-8',
+  // json
+  JSON: 'application/json;charset=UTF-8',
+} as const;
+
+/**
+ * 通用下载接口 封装一层
+ * @param url 请求地址
+ * @param data  请求参数
+ * @returns blob二进制
+ */
+export function commonExport(url: string, data: Record<string, any>) {
+  return requestClient.post<Blob>(url, data, {
+    data,
+    headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+    isTransformResponse: false,
+    responseType: 'blob',
+  });
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/index.ts

@@ -0,0 +1 @@
+export * from './core';

Yi.Vben5.Vue3/apps/web-antd/src/api/monitor/cache/index.ts

@@ -0,0 +1,90 @@
+import { requestClient } from '#/api/request';
+
+export interface CommandStats {
+  name: string;
+  value: string;
+}
+
+export interface RedisInfo {
+  [key: string]: string;
+}
+
+export interface CacheInfo {
+  commandStats: CommandStats[];
+  dbSize: number;
+  info: RedisInfo;
+}
+
+export interface CacheName {
+  cacheName: string;
+  remark: string;
+}
+
+export interface CacheValue {
+  cacheName: string;
+  cacheKey: string;
+  cacheValue: string;
+}
+
+/**
+ *
+ * @returns redis信息
+ */
+export function redisCacheInfo() {
+  return requestClient.get<CacheInfo>('/monitor/cache');
+}
+
+/**
+ * 查询缓存名称列表
+ * @returns 缓存名称列表
+ */
+export function listCacheName() {
+  return requestClient.get<CacheName[]>('/monitor-cache/name');
+}
+
+/**
+ * 查询缓存键名列表
+ * @param cacheName 缓存名称
+ * @returns 缓存键名列表
+ */
+export function listCacheKey(cacheName: string) {
+  return requestClient.get<string[]>(`/monitor-cache/key/${cacheName}`);
+}
+
+/**
+ * 查询缓存内容
+ * @param cacheName 缓存名称
+ * @param cacheKey 缓存键名
+ * @returns 缓存内容
+ */
+export function getCacheValue(cacheName: string, cacheKey: string) {
+  return requestClient.get<CacheValue>(
+    `/monitor-cache/value/${cacheName}/${cacheKey}`,
+  );
+}
+
+/**
+ * 清理指定名称缓存
+ * @param cacheName 缓存名称
+ */
+export function clearCacheName(cacheName: string) {
+  return requestClient.deleteWithMsg<void>(`/monitor-cache/key/${cacheName}`);
+}
+
+/**
+ * 清理指定键名缓存
+ * @param cacheName 缓存名称
+ * @param cacheKey 缓存键名
+ */
+export function clearCacheKey(cacheName: string, cacheKey: string) {
+  return requestClient.deleteWithMsg<void>(
+    `/monitor-cache/value/${cacheName}/${cacheKey}`,
+  );
+}
+
+/**
+ * 清理全部缓存
+ */
+export function clearCacheAll() {
+  return requestClient.deleteWithMsg<void>('/monitor-cache/clear');
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/monitor/logininfo/index.ts

@@ -0,0 +1,61 @@
+import type { LoginLog } from './model';
+
+import type { IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  loginInfoClean = '/login-log/clean',
+  loginInfoExport = '/login-log/export',
+  root = '/login-log',
+  userUnlock = '/login-log/unlock',
+}
+
+/**
+ * 登录日志列表
+ * @param params 查询参数
+ * @returns list[]
+ */
+export function loginInfoList(params?: PageQuery) {
+  return requestClient.get<PageResult<LoginLog>>(Api.root, { params });
+}
+
+/**
+ * 导出登录日志
+ * @param data 表单参数
+ * @returns excel
+ */
+export function loginInfoExport(data: any) {
+  return commonExport(Api.loginInfoExport, data);
+}
+
+/**
+ * 移除登录日志
+ * @param infoIds 登录日志id数组
+ * @returns void
+ */
+export function loginInfoRemove(infoIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: infoIds.join(',') },
+  });
+}
+
+/**
+ * 账号解锁
+ * @param username 用户名(账号)
+ * @returns void
+ */
+export function userUnlock(username: string) {
+  return requestClient.get<void>(`${Api.userUnlock}/${username}`, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 清空全部登录日志
+ * @returns void
+ */
+export function loginInfoClean() {
+  return requestClient.deleteWithMsg<void>(Api.loginInfoClean);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/monitor/logininfo/model.d.ts

@@ -0,0 +1,11 @@
+export interface LoginLog {
+  id: string;
+  loginUser: string;
+  loginLocation: string;
+  loginIp: string;
+  browser: string;
+  os: string;
+  logMsg: string;
+  creationTime: string;
+  creatorId: string | null;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/monitor/online/index.ts

@@ -0,0 +1,46 @@
+import type { OnlineUser } from './model';
+
+import type { IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  root = '/online',
+}
+
+/**
+ * 当前账号的在线设备 个人中心使用
+ * @returns OnlineUser[]
+ */
+export function onlineDeviceList() {
+  return requestClient.get<PageResult<OnlineUser>>(Api.root);
+}
+
+/**
+ * 这里的分页参数无效 返回的是全部的分页
+ * @param params 请求参数
+ * @returns 结果
+ */
+export function onlineList(params?: PageQuery) {
+  return requestClient.get<PageResult<OnlineUser>>(Api.root, { params });
+}
+
+/**
+ * 强制下线
+ * @param tokenId 连接Id
+ * @returns void
+ */
+export function forceLogout(tokenId: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: tokenId.join(',') },
+  });
+}
+
+/**
+ * 个人中心用的 跟上面的不同是用的Post
+ * @param tokenId 连接Id
+ * @returns void
+ */
+export function forceLogout2(tokenId: string) {
+  return requestClient.deleteWithMsg<void>(`${Api.root}/myself/${tokenId}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/monitor/online/model.d.ts

@@ -0,0 +1,10 @@
+export interface OnlineUser {
+  connnectionId?: string;
+  userId?: string;
+  userName?: string;
+  loginTime: number;
+  ipaddr?: string;
+  loginLocation?: string;
+  os?: string;
+  browser?: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/monitor/operlog/index.ts

@@ -0,0 +1,48 @@
+import type { OperationLog } from './model';
+
+import type { IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  operLogClean = '/operation-log/clean',
+  operLogExport = '/operation-log/export',
+  root = '/operation-log',
+}
+
+/**
+ * 操作日志分页
+ * @param params 查询参数
+ * @returns 分页结果
+ */
+export function operLogList(params?: PageQuery) {
+  return requestClient.get<PageResult<OperationLog>>(Api.root, {
+    params,
+  });
+}
+
+/**
+ * 删除操作日志
+ * @param operIds id/ids
+ */
+export function operLogRemove(operIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: operIds.join(',') },
+  });
+}
+
+/**
+ * 清空全部分页日志
+ */
+export function operLogClean() {
+  return requestClient.deleteWithMsg<void>(Api.operLogClean);
+}
+
+/**
+ * 导出操作日志
+ * @param data 查询参数
+ */
+export function operLogExport(data: Partial<OperationLog>) {
+  return commonExport(Api.operLogExport, data);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/monitor/operlog/model.d.ts

@@ -0,0 +1,14 @@
+export interface OperationLog {
+  id: string;
+  title: string;
+  operType: string;
+  requestMethod: string;
+  operUser: string;
+  operIp: string;
+  operLocation: string;
+  method: string;
+  requestParam: string;
+  requestResult: string;
+  creationTime: string;
+  creatorId: string | null;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/request.ts

@@ -0,0 +1,322 @@
+/**
+ * 该文件可自行根据业务逻辑进行调整
+ */
+
+import type { HttpResponse } from '@vben/request';
+
+import { useAppConfig } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { preferences } from '@vben/preferences';
+import {
+  authenticateResponseInterceptor,
+  errorMessageResponseInterceptor,
+  RequestClient,
+  stringify,
+} from '@vben/request';
+import { useAccessStore } from '@vben/stores';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useAuthStore } from '#/store';
+import {
+  decryptBase64,
+  decryptWithAes,
+  encryptBase64,
+  encryptWithAes,
+  generateAesKey,
+} from '#/utils/encryption/crypto';
+import * as encryptUtil from '#/utils/encryption/jsencrypt';
+
+const { apiURL, clientId, enableEncrypt, demoMode } = useAppConfig(
+  import.meta.env,
+  import.meta.env.PROD,
+);
+
+/**
+ * 是否已经处在登出过程中了 一个标志位
+ * 主要是防止一个页面会请求多个api 都401 会导致登出执行多次
+ */
+let isLogoutProcessing = false;
+
+/**
+ * 定义一个401专用异常 用于可能会用到的区分场景?
+ */
+export class UnauthorizedException extends Error {}
+
+/**
+ * 演示模式错误，用于标识演示环境禁止修改的错误
+ */
+export class DemoModeException extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'DemoModeException';
+    // 添加标记，用于错误拦截器识别
+    (this as any).__isDemoModeError = true;
+  }
+}
+
+function createRequestClient(baseURL: string) {
+  const client = new RequestClient({
+    // 后端地址
+    baseURL,
+    // 消息提示类型
+    errorMessageMode: 'message',
+    // 是否返回原生响应 比如：需要获取响应头时使用该属性
+    isReturnNativeResponse: false,
+    // 需要对返回数据进行处理
+    isTransformResponse: true,
+  });
+
+  /**
+   * 重新认证逻辑
+   */
+  async function doReAuthenticate() {
+    console.warn('Access token or refresh token is invalid or expired. ');
+    const accessStore = useAccessStore();
+    const authStore = useAuthStore();
+    accessStore.setAccessToken(null);
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
+      accessStore.setLoginExpired(true);
+    } else {
+      await authStore.logout();
+    }
+  }
+
+  /**
+   * 刷新token逻辑
+   */
+  async function doRefreshToken() {
+    // 不需要
+    // 保留此方法只是为了合并方便
+    return '';
+  }
+
+  function formatToken(token: null | string) {
+    return token ? `Bearer ${token}` : null;
+  }
+
+  client.addRequestInterceptor({
+    fulfilled: (config) => {
+      // 演示模式：拦截所有修改操作
+      if (demoMode) {
+        const method = config.method?.toUpperCase() || '';
+        const isModifyMethod = ['DELETE', 'PATCH', 'POST', 'PUT'].includes(
+          method,
+        );
+        // 排除登录等认证接口，允许通过
+        const isAuthPath =
+          config.url?.includes('/auth/') ||
+          config.url?.includes('/login') ||
+          config.url?.includes('/logout');
+        if (isModifyMethod && !isAuthPath) {
+          // 显示错误提示
+          message.error('演示环境，禁止修改');
+          // 抛出演示模式错误，错误拦截器会识别并跳过处理
+          throw new DemoModeException('演示环境，禁止修改');
+        }
+      }
+
+      const accessStore = useAccessStore();
+      // 添加token
+      config.headers.Authorization = formatToken(accessStore.accessToken);
+      /**
+       * locale跟后台不一致 需要转换
+       */
+      const language = preferences.app.locale.replace('-', '_');
+      config.headers['Accept-Language'] = language;
+      config.headers['Content-Language'] = language;
+      /**
+       * 添加全局clientId
+       * 关于header的clientId被错误绑定到实体类
+       * https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC0BDS
+       */
+      config.headers.ClientID = clientId;
+      /**
+       * 格式化get/delete参数
+       * 如果包含自定义的paramsSerializer则不走此逻辑
+       */
+      if (
+        ['DELETE', 'GET'].includes(config.method?.toUpperCase() || '') &&
+        config.params &&
+        !config.paramsSerializer
+      ) {
+        /**
+         * 1. 格式化参数 微服务在传递区间时间选择(后端的params Map类型参数)需要格式化key 否则接收不到
+         * 2. 数组参数需要格式化 后端才能正常接收 会变成arr=1&arr=2&arr=3的格式来接收
+         */
+        config.paramsSerializer = (params) =>
+          stringify(params, { arrayFormat: 'repeat' });
+      }
+
+      const { encrypt } = config;
+      // 全局开启请求加密功能 && 该请求开启 && 是post/put请求
+      if (
+        enableEncrypt &&
+        encrypt &&
+        ['POST', 'PUT'].includes(config.method?.toUpperCase() || '')
+      ) {
+        const aesKey = generateAesKey();
+        config.headers['encrypt-key'] = encryptUtil.encrypt(
+          encryptBase64(aesKey),
+        );
+
+        config.data =
+          typeof config.data === 'object'
+            ? encryptWithAes(JSON.stringify(config.data), aesKey)
+            : encryptWithAes(config.data, aesKey);
+      }
+      return config;
+    },
+  });
+
+  // 通用的错误处理, 如果没有进入上面的错误处理逻辑，就会进入这里
+  // 主要处理http状态码不为200(如网络异常/离线)的情况 必须放在在下面的响应拦截器之前
+  const errorInterceptor = errorMessageResponseInterceptor(
+    (msg: string, error: any) => {
+      // 如果是演示模式错误，已经在请求拦截器中提示过了，这里不再提示
+      if (error?.__isDemoModeError || error?.name === 'DemoModeException') {
+        return;
+      }
+      message.error(msg);
+    },
+  );
+  client.addResponseInterceptor(errorInterceptor);
+
+  client.addResponseInterceptor<HttpResponse>({
+    fulfilled: async (response) => {
+      const encryptKey = (response.headers ?? {})['encrypt-key'];
+      if (encryptKey) {
+        /** RSA私钥解密 拿到解密秘钥的base64 */
+        const base64Str = encryptUtil.decrypt(encryptKey);
+        /** base64 解码 得到请求头的 AES 秘钥 */
+        const aesSecret = decryptBase64(base64Str.toString());
+        /** 使用aesKey解密 responseData */
+        const decryptData = decryptWithAes(
+          response.data as unknown as string,
+          aesSecret,
+        );
+        /** 赋值 需要转为对象 */
+        response.data = JSON.parse(decryptData);
+      }
+
+      const { isReturnNativeResponse, isTransformResponse } = response.config;
+      // 是否返回原生响应 比如：需要获取响应时使用该属性
+      if (isReturnNativeResponse) {
+        return response;
+      }
+      // 不进行任何处理，直接返回
+      // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+      if (!isTransformResponse) {
+        /**
+         * 需要判断下载二进制的情况 正常是返回二进制 报错会返回json
+         * 当type为blob且content-type为application/json时 则判断已经下载出错
+         */
+        if (
+          response.config.responseType === 'blob' &&
+          response.headers['content-type']?.includes?.('application/json')
+        ) {
+          // 这时候的data为blob类型
+          const blob = response.data as unknown as Blob;
+          // 拿到字符串转json对象
+          response.data = JSON.parse(await blob.text());
+          // 然后按正常逻辑执行下面的代码(判断业务状态码)
+        } else {
+          // 其他情况 直接返回
+          return response.data;
+        }
+      }
+
+      const axiosResponseData = response.data;
+      if (!axiosResponseData) {
+        throw new Error($t('http.apiRequestFailed'));
+      }
+
+      console.log('axiosResponseData', axiosResponseData);
+      // 适配新的后端数据结构: { statusCode, data, succeeded, errors, extras, timestamp }
+      const { statusCode, data, succeeded, errors, extras, timestamp } =
+        axiosResponseData;
+
+      // 业务状态码为200且succeeded为true则请求成功
+      const hasSuccess = statusCode === 200 && succeeded === true;
+      if (hasSuccess) {
+        const successMsg = $t(`http.operationSuccess`);
+
+        if (response.config.successMessageMode === 'modal') {
+          Modal.success({
+            content: successMsg,
+            title: $t('http.successTip'),
+          });
+        } else if (response.config.successMessageMode === 'message') {
+          message.success(successMsg);
+        }
+
+        // 直接返回data字段
+        return data;
+      }
+
+      // 在此处根据自己项目的实际情况对不同的statusCode执行不同的操作
+      // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
+      let timeoutMsg = '';
+      switch (statusCode) {
+        case 401: {
+          // 已经在登出过程中 不再执行
+          if (isLogoutProcessing) {
+            throw new UnauthorizedException(timeoutMsg);
+          }
+          isLogoutProcessing = true;
+          const _msg = $t('http.loginTimeout');
+          const userStore = useAuthStore();
+          userStore.logout().finally(() => {
+            message.error(_msg);
+            isLogoutProcessing = false;
+          });
+          // 不再执行下面逻辑
+          throw new UnauthorizedException(_msg);
+        }
+        default: {
+          // 优先使用errors字段作为错误信息
+          if (errors && Array.isArray(errors) && errors.length > 0) {
+            timeoutMsg = errors.join(', ');
+          } else if (typeof errors === 'string') {
+            timeoutMsg = errors;
+          } else {
+            timeoutMsg = $t('http.apiRequestFailed');
+          }
+        }
+      }
+
+      // errorMessageMode='modal'的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
+      // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
+      if (response.config.errorMessageMode === 'modal') {
+        Modal.error({
+          content: timeoutMsg,
+          title: $t('http.errorTip'),
+        });
+      } else if (response.config.errorMessageMode === 'message') {
+        message.error(timeoutMsg);
+      }
+
+      throw new Error(timeoutMsg || $t('http.apiRequestFailed'));
+    },
+  });
+
+  // token过期的处理
+  client.addResponseInterceptor(
+    authenticateResponseInterceptor({
+      client,
+      doReAuthenticate,
+      doRefreshToken,
+      enableRefreshToken: preferences.app.enableRefreshToken,
+      formatToken,
+    }),
+  );
+
+  return client;
+}
+
+export const requestClient = createRequestClient(apiURL);
+
+export const baseRequestClient = new RequestClient({ baseURL: apiURL });

Yi.Vben5.Vue3/apps/web-antd/src/api/service/index.ts

@@ -0,0 +1,12 @@
+import type { ServerInfo } from './model';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取服务器信息
+ * @returns 服务器信息
+ */
+export function getServerInfo() {
+  return requestClient.get<ServerInfo>('/monitor-server/info');
+}
+

Yi.Vben5.Vue3/apps/web-antd/src/api/service/model.d.ts

@@ -0,0 +1,46 @@
+export interface CpuInfo {
+  coreTotal: number;
+  logicalProcessors: number;
+  cpuRate: number;
+}
+
+export interface MemoryInfo {
+  totalRAM: string;
+  usedRam: string;
+  freeRam: string;
+  ramRate: number;
+}
+
+export interface SystemInfo {
+  computerName: string;
+  osName: string;
+  serverIP: string;
+  osArch: string;
+}
+
+export interface AppInfo {
+  name: string;
+  version: string;
+  startTime: string;
+  runTime: string;
+  rootPath: string;
+  webRootPath: string;
+}
+
+export interface DiskInfo {
+  diskName: string;
+  typeName: string;
+  totalSize: string;
+  availableFreeSpace: string;
+  used: string;
+  availablePercent: number;
+}
+
+export interface ServerInfo {
+  cpu: CpuInfo;
+  memory: MemoryInfo;
+  sys: SystemInfo;
+  app: AppInfo;
+  disk: DiskInfo[];
+}
+

Yi.Vben5.Vue3/apps/web-antd/src/api/system/client/index.ts

@@ -0,0 +1,77 @@
+import type { Client } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  clientChangeStatus = '/client/changeStatus',
+  clientExport = '/client/export',
+  clientList = '/client/list',
+  root = '/client',
+}
+
+/**
+ * 查询客户端分页列表
+ * @param params 请求参数
+ * @returns 列表
+ */
+export function clientList(params?: PageQuery) {
+  return requestClient.get<PageResult<Client>>(Api.clientList, { params });
+}
+
+/**
+ * 导出客户端excel
+ * @param data 请求参数
+ */
+export function clientExport(data: Partial<Client>) {
+  return commonExport(Api.clientExport, data);
+}
+
+/**
+ * 客户端详情
+ * @param id id
+ * @returns 详情
+ */
+export function clientInfo(id: ID) {
+  return requestClient.get<Client>(`${Api.root}/${id}`);
+}
+
+/**
+ * 客户端新增
+ * @param data 参数
+ */
+export function clientAdd(data: Partial<Client>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 客户端修改
+ * @param data 参数
+ */
+export function clientUpdate(data: Partial<Client>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 客户端状态修改
+ * @param data 状态
+ */
+export function clientChangeStatus(data: any) {
+  const requestData = {
+    clientId: data.clientId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.clientChangeStatus, requestData);
+}
+
+/**
+ * 客户端删除
+ * @param ids id集合
+ */
+export function clientRemove(ids: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: ids.join(',') },
+  });
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/client/model.d.ts

@@ -0,0 +1,12 @@
+export interface Client {
+  id: number;
+  clientId: string;
+  clientKey: string;
+  clientSecret: string;
+  grantTypeList: string[];
+  grantType: string;
+  deviceType: string;
+  activeTimeout: number;
+  timeout: number;
+  status: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/config/index.ts

@@ -0,0 +1,78 @@
+import type { SysConfig } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  configExport = '/config/export',
+  configInfoByKey = '/config/config-key',
+  configList = '/config/list',
+  configRefreshCache = '/config/refreshCache',
+  root = '/config',
+}
+
+/**
+ * 系统参数分页列表
+ * @param params 请求参数
+ * @returns 列表
+ */
+export function configList(params?: PageQuery) {
+  return requestClient.get<PageResult<SysConfig>>(Api.root, { params });
+}
+
+export function configInfo(configId: ID) {
+  return requestClient.get<SysConfig>(`${Api.root}/${configId}`);
+}
+
+/**
+ * 导出
+ * @param data 参数
+ */
+export function configExport(data: Partial<SysConfig>) {
+  return commonExport(Api.configExport, data);
+}
+
+/**
+ * 刷新缓存
+ * @returns void
+ */
+export function configRefreshCache() {
+  return requestClient.deleteWithMsg<void>(Api.configRefreshCache);
+}
+
+/**
+ * 更新系统配置
+ * @param data 参数
+ */
+export function configUpdate(data: Partial<SysConfig>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 新增系统配置
+ * @param data 参数
+ */
+export function configAdd(data: Partial<SysConfig>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 删除配置
+ * @param configIds ids
+ */
+export function configRemove(configIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: configIds.join(',') },
+  });
+}
+
+/**
+ * 获取配置信息
+ * @param configKey configKey
+ * @returns value
+ */
+export function configInfoByKey(configKey: string) {
+  return requestClient.get<string>(`${Api.configInfoByKey}/${configKey}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/config/model.d.ts

@@ -0,0 +1,14 @@
+export interface SysConfig {
+  id: string;
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string | null;
+  orderNum: number;
+  remark: string | null;
+  isDeleted: boolean;
+  creationTime: string;
+  creatorId: string | null;
+  lastModifierId: string | null;
+  lastModificationTime: string | null;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/dept/index.ts

@@ -0,0 +1,64 @@
+import type { Dept } from './model';
+
+import type { ID } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  deptList = '/dept/list',
+  deptNodeInfo = '/dept/list/exclude',
+  root = '/dept',
+}
+
+/**
+ * 部门列表
+ * @returns list
+ */
+export function deptList(params?: { deptName?: string; status?: string }) {
+  return requestClient.get<Dept[]>(Api.deptList, { params });
+}
+
+/**
+ * 查询部门列表（排除节点）
+ * @param deptId 部门ID
+ * @returns void
+ */
+export function deptNodeList(deptId: ID) {
+  return requestClient.get<Dept[]>(`${Api.deptNodeInfo}/${deptId}`);
+}
+
+/**
+ * 部门详情
+ * @param deptId 部门id
+ * @returns 部门信息
+ */
+export function deptInfo(deptId: ID) {
+  return requestClient.get<Dept>(`${Api.root}/${deptId}`);
+}
+
+/**
+ * 部门新增
+ * @param data 参数
+ */
+export function deptAdd(data: Partial<Dept>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 部门更新
+ * @param data 参数
+ */
+export function deptUpdate(data: Partial<Dept>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 注意这里只允许单删除
+ * @param deptId ID
+ * @returns void
+ */
+export function deptRemove(deptId: ID) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: deptId },
+  });
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/dept/model.d.ts

@@ -0,0 +1,14 @@
+export interface Dept {
+  creationTime: string;
+  creatorId?: string | null;
+  state: boolean;
+  deptName: string;
+  deptCode?: string;
+  leader?: string;
+  leaderName?: string;
+  parentId: string | null;
+  remark?: string;
+  orderNum: number;
+  id: string;
+  children?: Dept[];
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/dict/dict-data-model.d.ts

@@ -0,0 +1,17 @@
+export interface DictData {
+  id: string;
+  isDeleted: boolean;
+  orderNum: number;
+  state: boolean;
+  remark: string | null;
+  listClass: string | null;
+  cssClass: string | null;
+  dictType: string;
+  dictLabel: string | null;
+  dictValue: string;
+  isDefault: boolean;
+  creationTime: string;
+  creatorId: string | null;
+  lastModifierId: string | null;
+  lastModificationTime: string | null;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/dict/dict-data.ts

@@ -0,0 +1,78 @@
+import type { DictData } from './dict-data-model';
+
+import type { ID, IDS, PageQuery } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  dictDataExport = '/dict/data/export',
+  dictDataInfo = '/dictionary/dic-type',
+  dictDataList = '/dict/data/list',
+  root = '/dictionary',
+}
+
+/**
+ * 主要是DictTag组件使用
+ * @param dictType 字典类型
+ * @returns 字典数据
+ */
+export function dictDataInfo(dictType: string) {
+  return requestClient.get<DictData[]>(`${Api.dictDataInfo}/${dictType}`);
+}
+
+/**
+ * 字典数据
+ * @param params 查询参数
+ * @returns 字典数据列表
+ */
+export function dictDataList(params?: PageQuery) {
+  return requestClient.get<DictData[]>(Api.root, { params });
+}
+
+/**
+ * 导出字典数据
+ * @param data 表单参数
+ * @returns blob
+ */
+export function dictDataExport(data: Partial<DictData>) {
+  return commonExport(Api.dictDataExport, data);
+}
+
+/**
+ * 删除
+ * @param dictIds 字典ID Array
+ * @returns void
+ */
+export function dictDataRemove(dictIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: dictIds.join(',') },
+  });
+}
+
+/**
+ * 新增
+ * @param data 表单参数
+ * @returns void
+ */
+export function dictDataAdd(data: Partial<DictData>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 修改
+ * @param data 表单参数
+ * @returns void
+ */
+export function dictDataUpdate(data: Partial<DictData>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 查询字典数据详细
+ * @param id 字典ID
+ * @returns 字典数据
+ */
+export function dictDetailInfo(id: ID) {
+  return requestClient.get<DictData>(`${Api.root}/${id}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/dict/dict-type-model.d.ts

@@ -0,0 +1,13 @@
+export interface DictType {
+  id: string;
+  isDeleted: boolean;
+  orderNum: number;
+  state: boolean | null;
+  dictName: string;
+  dictType: string;
+  remark: string | null;
+  creationTime: string;
+  creatorId: string | null;
+  lastModifierId: string | null;
+  lastModificationTime: string | null;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/dict/dict-type.ts

@@ -0,0 +1,87 @@
+import type { DictType } from './dict-type-model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  dictOptionSelectList = '/dictionary-type/select-data-list',
+  dictTypeExport = '/dictionary-type/export',
+  dictTypeList = '/dictionary-type/list',
+  dictTypeRefreshCache = '/dictionary-type/refreshCache',
+  root = '/dictionary-type',
+}
+
+/**
+ * 获取字典类型列表
+ * @param params 请求参数
+ * @returns list
+ */
+export function dictTypeList(params?: PageQuery) {
+  return requestClient.get<PageResult<DictType>>(Api.root, { params });
+}
+
+/**
+ * 导出字典类型列表
+ * @param data 表单参数
+ * @returns blob
+ */
+export function dictTypeExport(data: Partial<DictType>) {
+  return commonExport(Api.dictTypeExport, data);
+}
+
+/**
+ * 删除字典类型
+ * @param dictIds 字典类型id数组
+ * @returns void
+ */
+export function dictTypeRemove(dictIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: dictIds.join(',') },
+  });
+}
+
+/**
+ * 刷新字典缓存
+ * @returns void
+ */
+export function refreshDictTypeCache() {
+  return requestClient.deleteWithMsg<void>(Api.dictTypeRefreshCache);
+}
+
+/**
+ * 新增
+ * @param data 表单参数
+ * @returns void
+ */
+export function dictTypeAdd(data: Partial<DictType>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 修改
+ * @param data 表单参数
+ * @returns void
+ */
+export function dictTypeUpdate(data: Partial<DictType>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 查询详情
+ * @param dictId 字典类型id
+ * @returns 信息
+ */
+export function dictTypeInfo(dictId: ID) {
+  return requestClient.get<DictType>(`${Api.root}/${dictId}`);
+}
+
+/**
+ * 这个在ele用到 v5用不上
+ * 下拉框  返回值和list一样
+ * @returns options
+ */
+export function dictOptionSelectList() {
+  return requestClient.get<DictType[]>(Api.dictOptionSelectList);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/menu/index.ts

@@ -0,0 +1,84 @@
+import type { Menu, MenuOption, MenuQuery, MenuResp } from './model';
+
+import type { ID, IDS } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  menuList = '/menu/list',
+  menuTreeSelect = '/menu/tree',
+  root = '/menu',
+  tenantPackageMenuTreeselect = '/menu/tenantPackageMenuTreeselect',
+}
+
+/**
+ * 菜单列表
+ * @param params 参数
+ * @returns 列表
+ */
+export function menuList(params?: MenuQuery) {
+  return requestClient.get<Menu[]>(Api.menuList, { params });
+}
+
+/**
+ * 菜单详情
+ * @param menuId 菜单id
+ * @returns 菜单详情
+ */
+export function menuInfo(menuId: ID) {
+  return requestClient.get<Menu>(`${Api.root}/${menuId}`);
+}
+
+/**
+ * 菜单新增
+ * @param data 参数
+ */
+export function menuAdd(data: Partial<Menu>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 菜单更新
+ * @param data 参数
+ */
+export function menuUpdate(data: Partial<Menu>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 菜单删除
+ * @param menuIds ids
+ */
+export function menuRemove(menuIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: menuIds.join(',') },
+  });
+}
+
+/**
+ * 下拉框使用  返回所有的菜单
+ * @returns []
+ */
+export function menuTreeSelect() {
+  return requestClient.get<MenuOption[]>(Api.menuTreeSelect);
+}
+
+/**
+ * 租户套餐使用
+ * @param packageId packageId
+ * @returns resp
+ */
+export function tenantPackageMenuTreeSelect(packageId: ID) {
+  return requestClient.get<MenuResp>(
+    `${Api.tenantPackageMenuTreeselect}/${packageId}`,
+  );
+}
+
+/**
+ * 批量删除菜单
+ * @param menuIds 菜单ids
+ * @returns void
+ */
+export function menuCascadeRemove(menuIds: IDS) {
+  return requestClient.deleteWithMsg<void>(`${Api.root}/cascade/${menuIds}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/menu/model.d.ts

@@ -0,0 +1,57 @@
+export interface Menu {
+  id: string;
+  isDeleted: boolean;
+  creationTime: string;
+  creatorId: string | null;
+  lastModifierId: string | null;
+  lastModificationTime: string | null;
+  orderNum: number;
+  state: boolean;
+  menuName: string;
+  routerName?: string | null;
+  menuType: string;
+  permissionCode?: string | null;
+  parentId: string;
+  menuIcon?: string | null;
+  router?: string | null;
+  isLink: boolean;
+  isCache: boolean;
+  isShow: boolean;
+  remark?: string | null;
+  component?: string | null;
+  query?: string | null;
+  children?: Menu[];
+}
+
+/**
+ * @description 菜单信息
+ * @param menuName 菜单名称
+ */
+export interface MenuOption {
+  id: string;
+  parentId: string;
+  orderNum: number;
+  menuName: string;
+  menuType: string;
+  menuIcon?: string | null;
+  children?: MenuOption[] | null;
+}
+
+/**
+ * @description 菜单返回
+ * @param checkedKeys 选中的菜单id
+ * @param menus 菜单信息
+ */
+export interface MenuResp {
+  checkedKeys: string[];
+  menus: MenuOption[];
+}
+
+/**
+ * 菜单表单查询
+ */
+export interface MenuQuery {
+  menuName?: string;
+  isShow?: boolean;
+  state?: boolean;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/notice/index.ts

@@ -0,0 +1,53 @@
+import type { Notice } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  root = '/notice',
+}
+
+/**
+ * 通知公告分页
+ * @param params 分页参数
+ * @returns 分页结果
+ */
+export function noticeList(params?: PageQuery) {
+  return requestClient.get<PageResult<Notice>>(Api.root, { params });
+}
+
+/**
+ * 通知公告详情
+ * @param id id
+ * @returns 详情
+ */
+export function noticeInfo(id: ID) {
+  return requestClient.get<Notice>(`${Api.root}/${id}`);
+}
+
+/**
+ * 通知公告新增
+ * @param data 参数
+ */
+export function noticeAdd(data: Partial<Notice>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 通知公告更新
+ * @param data 参数
+ */
+export function noticeUpdate(data: any) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 通知公告删除
+ * @param ids ids
+ */
+export function noticeRemove(ids: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: ids.join(',') },
+  });
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/notice/model.d.ts

@@ -0,0 +1,13 @@
+export interface Notice {
+  id: string;
+  title: string;
+  type: string;
+  content: string;
+  state: boolean;
+  isDeleted: boolean;
+  creationTime: string;
+  creatorId?: string | null;
+  lastModifierId?: string | null;
+  lastModificationTime?: string | null;
+  orderNum: number;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/oss-config/index.ts

@@ -0,0 +1,48 @@
+import type { OssConfig } from './model';
+
+import type { ID, IDS, PageQuery } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  ossConfigChangeStatus = '/resource/oss/config/changeStatus',
+  ossConfigList = '/resource/oss/config/list',
+  root = '/resource/oss/config',
+}
+
+// 获取OSS配置列表
+export function ossConfigList(params?: PageQuery) {
+  return requestClient.get<OssConfig[]>(Api.ossConfigList, { params });
+}
+
+// 获取OSS配置的信息
+export function ossConfigInfo(ossConfigId: ID) {
+  return requestClient.get<OssConfig>(`${Api.root}/${ossConfigId}`);
+}
+
+// 添加新的OSS配置
+export function ossConfigAdd(data: Partial<OssConfig>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+// 更新现有的OSS配置
+export function ossConfigUpdate(data: Partial<OssConfig>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+// 删除OSS配置
+export function ossConfigRemove(ossConfigIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: ossConfigIds.join(',') },
+  });
+}
+
+// 更改OSS配置的状态
+export function ossConfigChangeStatus(data: any) {
+  const requestData: Partial<OssConfig> = {
+    ossConfigId: data.ossConfigId,
+    status: data.status,
+    configKey: data.configKey,
+  };
+  return requestClient.putWithMsg(Api.ossConfigChangeStatus, requestData);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/oss-config/model.d.ts

@@ -0,0 +1,16 @@
+export interface OssConfig {
+  ossConfigId: number;
+  configKey: string;
+  accessKey: string;
+  secretKey: string;
+  bucketName: string;
+  prefix: string;
+  endpoint: string;
+  domain: string;
+  isHttps: string;
+  region: string;
+  status: string;
+  ext1: string;
+  remark: string;
+  accessPolicy: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/oss/index.ts

@@ -0,0 +1,77 @@
+import type { AxiosRequestConfig } from '@vben/request';
+
+import type { OssFile } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { ContentTypeEnum } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  ossDownload = '/resource/oss/download',
+  ossInfo = '/resource/oss/listByIds',
+  ossList = '/resource/oss/list',
+  ossUpload = '/resource/oss/upload',
+  root = '/resource/oss',
+}
+
+/**
+ * 文件list
+ * @param params 参数
+ * @returns 分页
+ */
+export function ossList(params?: PageQuery) {
+  return requestClient.get<PageResult<OssFile>>(Api.ossList, { params });
+}
+
+/**
+ * 查询文件信息 返回为数组
+ * @param ossIds id数组
+ * @returns 信息数组
+ */
+export function ossInfo(ossIds: ID | IDS) {
+  return requestClient.get<OssFile[]>(`${Api.ossInfo}/${ossIds}`);
+}
+
+/**
+ * @deprecated 使用apps/web-antd/src/api/core/upload.ts uploadApi方法
+ * @param file 文件
+ * @returns void
+ */
+export function ossUpload(file: Blob | File) {
+  const formData = new FormData();
+  formData.append('file', file);
+  return requestClient.postWithMsg(Api.ossUpload, formData, {
+    headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
+    timeout: 30 * 1000,
+  });
+}
+
+/**
+ * 下载文件  返回为二进制
+ * @param ossId ossId
+ * @param onDownloadProgress 下载进度(可选)
+ * @returns blob
+ */
+export function ossDownload(
+  ossId: ID,
+  onDownloadProgress?: AxiosRequestConfig['onDownloadProgress'],
+) {
+  return requestClient.get<Blob>(`${Api.ossDownload}/${ossId}`, {
+    responseType: 'blob',
+    timeout: 30 * 1000,
+    isTransformResponse: false,
+    onDownloadProgress,
+  });
+}
+
+/**
+ * 删除文件
+ * @param ossIds id数组
+ * @returns void
+ */
+export function ossRemove(ossIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: ossIds.join(',') },
+  });
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/oss/model.d.ts

@@ -0,0 +1,28 @@
+export interface OssFile {
+  ossId: string;
+  fileName: string;
+  originalName: string;
+  fileSuffix: string;
+  url: string;
+  createTime: string;
+  createBy: number;
+  createByName: string;
+  service: string;
+}
+
+export interface OssConfig {
+  ossConfigId: number;
+  configKey: string;
+  accessKey: string;
+  secretKey: string;
+  bucketName: string;
+  prefix: string;
+  endpoint: string;
+  domain: string;
+  isHttps: string;
+  region: string;
+  status: string;
+  ext1: string;
+  remark: string;
+  accessPolicy: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/post/index.ts

@@ -0,0 +1,77 @@
+import type { Post } from './model';
+
+import type { ID, IDS, PageQuery } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  postExport = '/post/export',
+  postList = '/post/list',
+  postSelect = '/post/select-data-list',
+  root = '/post',
+}
+
+/**
+ * 获取岗位列表
+ * @param params 参数
+ * @returns Post[]
+ */
+export function postList(params?: PageQuery) {
+  return requestClient.get<Post[]>(Api.root, { params });
+}
+
+/**
+ * 导出岗位信息
+ * @param data 请求参数
+ * @returns blob
+ */
+export function postExport(data: Partial<Post>) {
+  return commonExport(Api.postExport, data);
+}
+
+/**
+ * 查询岗位信息
+ * @param id 岗位id
+ * @returns 岗位信息
+ */
+export function postInfo(id: ID) {
+  return requestClient.get<Post>(`${Api.root}/${id}`);
+}
+
+/**
+ * 岗位新增
+ * @param data 参数
+ * @returns void
+ */
+export function postAdd(data: Partial<Post>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 岗位更新
+ * @param data 参数
+ * @returns void
+ */
+export function postUpdate(data: Partial<Post>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 岗位删除
+ * @param postIds ids
+ * @returns void
+ */
+export function postRemove(postIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: postIds.join(',') },
+  });
+}
+
+/**
+ * 获取岗位下拉列表
+ * @returns 岗位
+ */
+export function postOptionSelect(deptId: string) {
+  return requestClient.get<Post[]>(`${Api.postSelect}?keywords=${deptId}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/post/model.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @description: Post interface
+ */
+export interface Post {
+  id: string;
+  isDeleted: boolean;
+  creationTime: string;
+  creatorId: string | null;
+  lastModifierId: string | null;
+  lastModificationTime: string | null;
+  orderNum: number;
+  state: boolean;
+  postCode: string;
+  postName: string;
+  deptId: string;
+  remark: string | null;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/profile/index.ts

@@ -0,0 +1,65 @@
+import type { FileCallBack, UpdatePasswordParam, UserProfile } from './model';
+
+import { buildUUID } from '@vben/utils';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  root = '/user/profile',
+  updateAvatar = '/user/profile/avatar',
+  updatePassword = '/user/profile/updatePwd',
+}
+
+/**
+ * 用户个人主页信息
+ * @returns userInformation
+ */
+export function userProfile() {
+  return requestClient.get<UserProfile>(Api.root);
+}
+
+/**
+ * 更新用户个人主页信息
+ * @param data
+ * @returns void
+ */
+export function userProfileUpdate(data: any) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 用户修改密码 (需要加密)
+ * @param data
+ * @returns void
+ */
+export function userUpdatePassword(data: UpdatePasswordParam) {
+  return requestClient.putWithMsg<void>(Api.updatePassword, data, {
+    encrypt: true,
+  });
+}
+
+/**
+ * 用户更新个人头像
+ * @param fileCallback data
+ * @returns void
+ */
+export function userUpdateAvatar(fileCallback: FileCallBack) {
+  /** 直接点击头像上传 filename为空 由于后台通过拓展名判断(默认文件名blob) 会上传失败 */
+  let { file } = fileCallback;
+  const { filename } = fileCallback;
+  /**
+   * Blob转File类型
+   * 1. 在直接点击确认 filename为空 取uuid作为文件名
+   * 2. 选择上传必须转为File类型 Blob类型上传后台获取文件名为空
+   */
+  file = filename
+    ? new File([file], filename)
+    : new File([file], `${buildUUID()}.png`);
+  return requestClient.post(
+    Api.updateAvatar,
+    {
+      avatarfile: file,
+    },
+    { headers: { 'Content-Type': 'multipart/form-data' } },
+  );
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/profile/model.d.ts

@@ -0,0 +1,75 @@
+export interface Dept {
+  deptId: number;
+  parentId: number;
+  parentName?: any;
+  ancestors: string;
+  deptName: string;
+  orderNum: number;
+  leader: string;
+  phone?: any;
+  email: string;
+  status: string;
+  createTime?: any;
+}
+
+export interface Role {
+  roleId: number;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly?: any;
+  deptCheckStrictly?: any;
+  status: string;
+  remark: string;
+  createTime?: any;
+  flag: boolean;
+  superAdmin: boolean;
+}
+
+export interface User {
+  userId: number;
+  tenantId: string;
+  deptId: number;
+  userName: string;
+  nickName: string;
+  userType: string;
+  email: string;
+  phonenumber: string;
+  sex: string;
+  avatar: string;
+  status: string;
+  loginIp: string;
+  loginDate: string;
+  remark: string;
+  createTime: string;
+  dept: Dept;
+  roles: Role[];
+  roleIds?: string[];
+  postIds?: string[];
+  roleId: number;
+  deptName: string;
+}
+
+/**
+ * @description 用户个人主页信息
+ * @param user 用户信息
+ * @param roleGroup 角色名称
+ * @param postGroup 岗位名称
+ */
+export interface UserProfile {
+  user: User;
+  roleGroup: string;
+  postGroup: string;
+}
+
+export interface UpdatePasswordParam {
+  oldPassword: string;
+  newPassword: string;
+}
+
+interface FileCallBack {
+  name: string;
+  file: Blob;
+  filename: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/role/index.ts

@@ -0,0 +1,161 @@
+import type { MenuResp } from '../menu/model';
+import type { User } from '../user/model';
+import type { DeptResp, Role } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  roleAuthUser = '/role/auth-user',
+  roleDataScope = '/role/data-scope',
+  roleDeptTree = '/role/dept-tree',
+  roleExport = '/role/export',
+  roleList = '/role/list',
+  roleMenuTree = '/role/menu-tree',
+  roleOptionSelect = '/role/select-data-list',
+  root = '/role',
+}
+
+/**
+ * 查询角色分页列表
+ * @param params 搜索条件
+ * @returns 分页列表
+ */
+export function roleList(params?: PageQuery) {
+  return requestClient.get<PageResult<Role>>(Api.root, { params });
+}
+
+/**
+ * 导出角色信息
+ * @param data 查询参数
+ * @returns blob
+ */
+export function roleExport(data: Partial<Role>) {
+  return commonExport(Api.roleExport, data);
+}
+
+/**
+ * 查询角色信息
+ * @param roleId 角色id
+ * @returns 角色信息
+ */
+export function roleInfo(roleId: ID) {
+  return requestClient.get<Role>(`${Api.root}/${roleId}`);
+}
+
+/**
+ * 角色新增
+ * @param data 参数
+ * @returns void
+ */
+export function roleAdd(data: Partial<Role>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 角色更新
+ * @param data 参数
+ * @returns void
+ */
+export function roleUpdate(data: Partial<Role>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 角色删除
+ * @param roleIds ids
+ * @returns void
+ */
+export function roleRemove(roleIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: roleIds.join(',') },
+  });
+}
+
+/**
+ * 更新数据权限
+ * @param data
+ * @returns void
+ */
+export function roleDataScope(data: any) {
+  return requestClient.putWithMsg<void>(Api.roleDataScope, data);
+}
+
+/**
+ * @deprecated 全局并没有用到这个方法
+ */
+export function roleOptionSelect(params?: any) {
+  return requestClient.get(Api.roleOptionSelect, { params });
+}
+
+/**
+ * 已分配角色的用户分页
+ * @param params 请求参数
+ * @returns 分页
+ */
+export function roleAllocatedList(roleId: ID, params?: PageQuery) {
+  return requestClient.get<PageResult<User>>(`${Api.roleAuthUser}/${roleId}/true`, { params });
+}
+
+/**
+ * 未授权的用户
+ * @param params
+ * @returns void
+ */
+export function roleUnallocatedList(roleId: ID, params?: PageQuery) {
+  return requestClient.get<PageResult<User>>(`${Api.roleAuthUser}/${roleId}/false`, { params });
+}
+
+/**
+ * 批量取消授权
+ * @param roleId 角色ID
+ * @param userIds 用户ID集合
+ * @returns void
+ */
+export function roleAuthCancelAll(roleId: ID, userIds: IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `${Api.roleAuthUser}`,
+    {
+      data: {
+        roleId,
+        userIds,
+      }
+    },
+  );
+}
+
+/**
+ * 批量授权用户
+ * @param roleId 角色ID
+ * @param userIds 用户ID集合
+ * @returns void
+ */
+export function roleSelectAll(roleId: ID, userIds: IDS) {
+  return requestClient.postWithMsg<void>(
+    `${Api.roleAuthUser}`,
+    {
+      roleId,
+      userIds,
+    },
+  );
+}
+
+/**
+ * 根据角色id获取部门树
+ * @param roleId 角色id
+ * @returns DeptResp
+ */
+export function roleDeptTree(roleId: ID) {
+  return requestClient.get<DeptResp>(`${Api.roleDeptTree}/${roleId}`);
+}
+
+/**
+ * 返回对应角色的菜单
+ * @param roleId id
+ * @returns resp
+ */
+export function roleMenuTreeSelect(roleId: ID) {
+  return requestClient.get<MenuResp>(`${Api.roleMenuTree}/${roleId}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/role/model.d.ts

@@ -0,0 +1,30 @@
+export interface Role {
+  id: string;
+  creationTime: string;
+  creatorId?: string | null;
+  lastModifierId?: string | null;
+  lastModificationTime?: string | null;
+  isDeleted?: boolean;
+  orderNum: number;
+  state: boolean;
+  roleName: string;
+  roleCode: string;
+  remark?: string | null;
+  dataScope: string;
+  menuIds?: string[];
+  deptIds?: string[];
+}
+
+export interface DeptOption {
+  id: string;
+  parentId: string | null;
+  orderNum: number;
+  deptName: string;
+  state: boolean;
+  children?: DeptOption[] | null;
+}
+
+export interface DeptResp {
+  checkedKeys: string[];
+  depts: DeptOption[];
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/social/index.ts

@@ -0,0 +1,25 @@
+import type { SocialInfo } from './model';
+
+import type { ID } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  root = '/social',
+  socialList = '/social/list',
+}
+
+/**
+ * 获取绑定的社交信息列表
+ * @returns info
+ */
+export function socialList() {
+  return requestClient.get<SocialInfo[]>(Api.socialList);
+}
+
+/**
+ * @deprecated 并没有用到这个方法
+ */
+export function socialInfo(id: ID) {
+  return requestClient.get(`${Api.root}/${id}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/social/model.d.ts

@@ -0,0 +1,26 @@
+export interface SocialInfo {
+  id: string;
+  userId: number;
+  tenantId: string;
+  authId: string;
+  source: string;
+  accessToken: string;
+  expireIn: number;
+  refreshToken: string;
+  openId: string;
+  userName: string;
+  nickName: string;
+  email: string;
+  avatar: string;
+  accessCode?: any;
+  unionId?: any;
+  scope: string;
+  tokenType: string;
+  idToken?: any;
+  macAlgorithm?: any;
+  macKey?: any;
+  code?: any;
+  oauthToken?: any;
+  oauthTokenSecret?: any;
+  createTime: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/tenant-package/index.ts

@@ -0,0 +1,93 @@
+import type { TenantPackage } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  packageChangeStatus = '/tenant/package/changeStatus',
+  packageExport = '/tenant/package/export',
+  packageList = '/tenant/package/list',
+  packageSelectList = '/tenant/package/selectList',
+  root = '/tenant/package',
+}
+
+/**
+ * 租户套餐分页列表
+ * @param params 请求参数
+ * @returns 分页列表
+ */
+export function packageList(params?: PageQuery) {
+  return requestClient.get<PageResult<TenantPackage>>(Api.packageList, {
+    params,
+  });
+}
+
+/**
+ * 租户套餐下拉框
+ * @returns 下拉框
+ */
+export function packageSelectList() {
+  return requestClient.get<TenantPackage[]>(Api.packageSelectList);
+}
+
+/**
+ * 租户套餐导出
+ * @param data 参数
+ * @returns blob
+ */
+export function packageExport(data: Partial<TenantPackage>) {
+  return commonExport(Api.packageExport, data);
+}
+
+/**
+ * 租户套餐信息
+ * @param id id
+ * @returns 信息
+ */
+export function packageInfo(id: ID) {
+  return requestClient.get<TenantPackage>(`${Api.root}/${id}`);
+}
+
+/**
+ * 租户套餐新增
+ * @param data data
+ * @returns void
+ */
+export function packageAdd(data: Partial<TenantPackage>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 租户套餐更新
+ * @param data data
+ * @returns void
+ */
+export function packageUpdate(data: Partial<TenantPackage>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 租户套餐状态变更
+ * @param data data
+ * @returns void
+ */
+export function packageChangeStatus(data: Partial<TenantPackage>) {
+  const packageId = {
+    packageId: data.packageId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.packageChangeStatus, packageId);
+}
+
+/**
+ * 租户套餐移除
+ * @param ids ids
+ * @returns void
+ */
+export function packageRemove(ids: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: ids.join(',') },
+  });
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/tenant-package/model.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @description 租户套餐
+ * @param packageId id
+ * @param packageName 名称
+ * @param menuIds 菜单id  格式为[1,2,3] 返回为string 提交为数组
+ * @param remark 备注
+ * @param menuCheckStrictly 是否关联父节点
+ * @param status 状态
+ */
+export interface TenantPackage {
+  packageId: string;
+  packageName: string;
+  menuIds: number[] | string;
+  remark: string;
+  menuCheckStrictly: boolean;
+  status: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/tenant/index.ts

@@ -0,0 +1,113 @@
+import type { Tenant } from './model';
+
+import type { ID, IDS, PageQuery } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  dictSync = '/tenant/syncTenantDict',
+  root = '/tenant',
+  tenantDynamic = '/tenant/dynamic',
+  tenantDynamicClear = '/tenant/dynamic/clear',
+  tenantExport = '/tenant/export',
+  tenantSyncPackage = '/tenant/syncTenantPackage',
+}
+
+/**
+ * 查询租户分页列表
+ * @param params 参数
+ * @returns 分页
+ */
+export function tenantList(params?: PageQuery) {
+  return requestClient.get<Tenant[]>(Api.root, { params });
+}
+
+/**
+ * 租户导出
+ * @param data data
+ * @returns void
+ */
+export function tenantExport(data: Partial<Tenant>) {
+  return commonExport(Api.tenantExport, data);
+}
+
+/**
+ * 查询租户信息
+ * @param id id
+ * @returns 租户信息
+ */
+export function tenantInfo(id: ID) {
+  return requestClient.get<Tenant>(`${Api.root}/${id}`);
+}
+
+/**
+ * 新增租户 必须开启加密
+ * @param data data
+ * @returns void
+ */
+export function tenantAdd(data: Partial<Tenant>) {
+  return requestClient.postWithMsg<void>(Api.root, data, { encrypt: true });
+}
+
+/**
+ * 租户更新
+ * @param data data
+ * @returns void
+ */
+export function tenantUpdate(data: Partial<Tenant>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 租户删除
+ * @param ids ids
+ * @returns void
+ */
+export function tenantRemove(ids: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: ids.join(',') },
+  });
+}
+
+/**
+ * 动态切换租户
+ * @param tenantId 租户ID
+ * @returns void
+ */
+export function tenantDynamicToggle(tenantId: string) {
+  return requestClient.get<void>(`${Api.tenantDynamic}/${tenantId}`);
+}
+
+/**
+ * 清除 动态切换租户
+ * @returns void
+ */
+export function tenantDynamicClear() {
+  return requestClient.get<void>(Api.tenantDynamicClear);
+}
+
+/**
+ * 租户套餐同步
+ * @param tenantId 租户id
+ * @param packageId 套餐id
+ * @returns void
+ */
+export function tenantSyncPackage(tenantId: string, packageId: string) {
+  return requestClient.get<void>(Api.tenantSyncPackage, {
+    params: { packageId, tenantId },
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 同步租户字典
+ * @param tenantId 租户ID
+ * @returns void
+ */
+export function dictSyncTenant(tenantId?: string) {
+  return requestClient.get<void>(Api.dictSync, {
+    params: { tenantId },
+    successMessageMode: 'message',
+  });
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/tenant/model.d.ts

@@ -0,0 +1,26 @@
+export interface Tenant {
+  id: string;
+  name: string;
+  entityVersion: number;
+  tenantConnectionString: string;
+  dbType: number;
+  isDeleted: boolean;
+  creationTime: string;
+  creatorId: string | null;
+  lastModifierId: string | null;
+  lastModificationTime: string | null;
+  // 以下字段可能来自 ExtraProperties 或后端扩展
+  accountCount?: number;
+  address?: string;
+  companyName?: string;
+  contactPhone?: string;
+  contactUserName?: string;
+  domain?: string;
+  expireTime?: string;
+  intro?: string;
+  licenseNumber?: any;
+  packageId?: string;
+  remark?: string;
+  status?: string | boolean;
+  tenantId?: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/user/index.ts

@@ -0,0 +1,156 @@
+import type {
+  DeptTreeData,
+  ResetPwdParam,
+  User,
+  UserImportParam,
+} from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport, ContentTypeEnum } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  deptTree = '/dept/tree',
+  listDeptUsers = '/user/dept',
+  root = '/user',
+  userAuthRole = '/user/authRole',
+  userExport = '/user/export',
+  userImport = '/user/importData',
+  userImportTemplate = '/user/importTemplate',
+  userResetPassword = '/account/rest-password',
+}
+
+/**
+ *  获取用户列表
+ * @param params
+ * @returns User
+ */
+export function userList(params?: PageQuery) {
+  return requestClient.get<PageResult<User>>(Api.root, { params });
+}
+
+/**
+ * 导出excel
+ * @param data data
+ * @returns blob
+ */
+export function userExport(data: Partial<User>) {
+  return commonExport(Api.userExport, data);
+}
+
+/**
+ * 从excel导入用户
+ * @param data
+ * @returns void
+ */
+export function userImportData(data: UserImportParam) {
+  return requestClient.post<{ code: number; msg: string }>(
+    Api.userImport,
+    data,
+    {
+      headers: {
+        'Content-Type': ContentTypeEnum.FORM_DATA,
+      },
+      isTransformResponse: false,
+    },
+  );
+}
+
+/**
+ * 下载用户导入模板
+ * @returns blob
+ */
+export function downloadImportTemplate() {
+  return requestClient.post<Blob>(
+    Api.userImportTemplate,
+    {},
+    {
+      isTransformResponse: false,
+      responseType: 'blob',
+    },
+  );
+}
+
+/**
+ * 可以不传ID  返回部门和角色options 需要获得原始数据
+ * 不传ID时一定要带最后的/
+ * @param userId 用户ID
+ * @returns 用户信息
+ */
+export function findUserInfo(userId: ID) {
+  return requestClient.get<User>(`${Api.root}/${userId}`);
+}
+
+/**
+ * 新增用户
+ * @param data data
+ * @returns void
+ */
+export function userAdd(data: Partial<User>) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 更新用户
+ * @param data data
+ * @returns void
+ */
+export function userUpdate(data: Partial<User>) {
+  return requestClient.putWithMsg<void>(`${Api.root}/${data.id}`, data);
+}
+
+/**
+ * 删除用户
+ * @param userIds 用户ID数组
+ * @returns void
+ */
+export function userRemove(userIds: IDS) {
+  return requestClient.deleteWithMsg<void>(Api.root, {
+    params: { ids: userIds.join(',') },
+  });
+}
+
+/**
+ * 重置用户密码 需要加密
+ * @param data
+ * @returns void
+ */
+export function userResetPassword(data: ResetPwdParam) {
+  return requestClient.putWithMsg<void>(`${Api.userResetPassword}/${data.id}`, data, {
+    encrypt: true,
+  });
+}
+
+/**
+ * 这个方法未调用过
+ * @param userId
+ * @returns void
+ */
+export function getUserAuthRole(userId: ID) {
+  return requestClient.get(`${Api.userAuthRole}/${userId}`);
+}
+
+/**
+ * 这个方法未调用过
+ * @param userId
+ * @returns void
+ */
+export function userAuthRoleUpdate(userId: ID, roleIds: number[]) {
+  return requestClient.putWithMsg(Api.userAuthRole, { roleIds, userId });
+}
+
+/**
+ * 获取部门树
+ * @returns 部门树数组
+ */
+export function getDeptTree() {
+  return requestClient.get<DeptTreeData[]>(Api.deptTree);
+}
+
+/**
+ * 获取部门下的所有用户信息
+ */
+export function listUserByDeptId(deptId: ID) {
+  return requestClient.get<User[]>(`${Api.listDeptUsers}/${deptId}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/system/user/model.d.ts

@@ -0,0 +1,100 @@
+import type { Dept } from '../dept/model';
+
+/**
+ * @description: 用户导入
+ * @param updateSupport 是否覆盖数据
+ * @param file excel文件
+ */
+export interface UserImportParam {
+  updateSupport: boolean;
+  file: Blob | File;
+}
+
+/**
+ * @description: 重置密码
+ */
+export interface ResetPwdParam {
+  id: string;
+  password: string;
+}
+
+export interface Role {
+  roleId: string;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly?: boolean;
+  deptCheckStrictly?: boolean;
+  status: string;
+  remark: string;
+  createTime?: string;
+  flag: boolean;
+  superAdmin: boolean;
+}
+
+export interface User {
+  id: string;
+  isDeleted: boolean;
+  name?: string | null;
+  age?: number | null;
+  userName: string;
+  icon?: string | null;
+  nick?: string | null;
+  email?: string | null;
+  ip?: string | null;
+  address?: string | null;
+  phone?: number | null;
+  introduction?: string | null;
+  remark?: string | null;
+  sex: string; // SexEnum
+  deptId?: string | null;
+  creationTime: string;
+  creatorId?: string | null;
+  lastModifierId?: string | null;
+  lastModificationTime?: string | null;
+  orderNum: number;
+  state: boolean;
+  deptName?: string | null;
+  posts?: Post[];
+  roles?: Role[];
+  dept?: Dept | null;
+}
+
+export interface Post {
+  postId: number;
+  postCode: string;
+  postName: string;
+  postSort: number;
+  status: string;
+  remark: string;
+  createTime: string;
+}
+
+/**
+ * @description 用户信息
+ * @param user 用户个人信息
+ * @param roleIds 角色IDS 不传id为空
+ * @param roles 所有的角色
+ * @param postIds 岗位IDS 不传id为空
+ * @param posts 所有的岗位
+ */
+export interface UserInfoResponse {
+  user?: User;
+  roleIds?: string[];
+  roles: Role[];
+  postIds?: number[];
+  posts?: Post[];
+}
+
+/**
+ * @description: 部门树
+ */
+export interface DeptTreeData {
+  id: string;
+  parentId: string;
+  orderNum: number;
+  deptName: string;
+  state: boolean;
+  children?: DeptTreeData[] | null;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/tool/gen/index.ts

@@ -0,0 +1,103 @@
+import type { GenInfo } from './model';
+
+import type { ID, IDS, PageQuery } from '#/api/common';
+
+import { ContentTypeEnum } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  batchGenCode = '/tool/gen/batchGenCode',
+  columnList = '/tool/gen/column',
+  dataSourceNames = '/tool/gen/getDataNames',
+  download = '/tool/gen/download',
+  genCode = '/tool/gen/genCode',
+  generatedList = '/tool/gen/list',
+  importTable = '/tool/gen/importTable',
+  preview = '/tool/gen/preview',
+  readyToGenList = '/tool/gen/db/list',
+  root = '/tool/gen',
+  syncDb = '/tool/gen/synchDb',
+}
+// 查询代码生成列表
+export function generatedList(params?: PageQuery) {
+  return requestClient.get(Api.generatedList, { params });
+}
+
+// 修改代码生成业务
+export function genInfo(tableId: ID) {
+  return requestClient.get<GenInfo>(`${Api.root}/${tableId}`);
+}
+
+// 查询数据库列表
+export function readyToGenList(params?: PageQuery) {
+  return requestClient.get(Api.readyToGenList, { params });
+}
+
+// 查询数据表字段列表
+export function columnList(tableId: ID) {
+  return requestClient.get(`${Api.columnList}/${tableId}`);
+}
+
+/**
+ * 导入表结构（保存）
+ * @param tables table名称数组 如sys_a, sys_b
+ * @param dataName 数据源名称
+ * @returns ret
+ */
+export function importTable(tables: string | string[], dataName: string) {
+  return requestClient.postWithMsg(
+    Api.importTable,
+    { dataName, tables },
+    {
+      headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+    },
+  );
+}
+
+// 修改保存代码生成业务
+export function editSave(data: any) {
+  return requestClient.putWithMsg(Api.root, data);
+}
+
+// 删除代码生成
+export function genRemove(tableIds: IDS) {
+  return requestClient.deleteWithMsg(`${Api.root}/${tableIds}`);
+}
+
+// 预览代码
+export function previewCode(tableId: ID) {
+  return requestClient.get<{ [key: string]: string }>(
+    `${Api.preview}/${tableId}`,
+  );
+}
+
+// 生成代码（下载方式）
+export function genDownload(tableId: ID) {
+  return requestClient.get<Blob>(`${Api.download}/${tableId}`);
+}
+
+// 生成代码（自定义路径）
+export function genWithPath(tableId: ID) {
+  return requestClient.get<void>(`${Api.genCode}/${tableId}`);
+}
+
+// 同步数据库
+export function syncDb(tableId: ID) {
+  return requestClient.get(`${Api.syncDb}/${tableId}`, {
+    successMessageMode: 'message',
+  });
+}
+
+// 批量生成代码
+export function batchGenCode(tableIdStr: ID | IDS) {
+  return requestClient.get<Blob>(Api.batchGenCode, {
+    isTransformResponse: false,
+    params: { tableIdStr },
+    responseType: 'blob',
+  });
+}
+
+// 查询数据源名称列表
+export function getDataSourceNames() {
+  return requestClient.get<string[]>(Api.dataSourceNames);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/tool/gen/model.d.ts

@@ -0,0 +1,187 @@
+export interface Column {
+  createDept?: any;
+  createBy?: any;
+  createTime?: any;
+  updateBy?: any;
+  updateTime?: any;
+  columnId: string;
+  tableId: string;
+  columnName: string;
+  columnComment: string;
+  columnType: string;
+  javaType: string;
+  javaField: string;
+  isPk: string;
+  isIncrement: string;
+  isRequired: string;
+  isInsert?: any;
+  isEdit: string;
+  isList: string;
+  isQuery?: any;
+  queryType: string;
+  htmlType: string;
+  dictType: string;
+  sort: number;
+  list: boolean;
+  required: boolean;
+  pk: boolean;
+  insert: boolean;
+  edit: boolean;
+  usableColumn: boolean;
+  superColumn: boolean;
+  increment: boolean;
+  query: boolean;
+  capJavaField: string;
+}
+
+export interface Table {
+  createDept?: any;
+  createBy?: any;
+  createTime?: any;
+  updateBy?: any;
+  updateTime?: any;
+  tableId: string;
+  dataName: string;
+  tableName: string;
+  tableComment: string;
+  subTableName?: any;
+  subTableFkName?: any;
+  className: string;
+  tplCategory: string;
+  packageName: string;
+  moduleName: string;
+  businessName: string;
+  functionName: string;
+  functionAuthor: string;
+  genType?: any;
+  genPath?: any;
+  pkColumn?: any;
+  columns: Column[];
+  options?: any;
+  remark?: any;
+  treeCode?: any;
+  treeParentCode?: any;
+  treeName?: any;
+  menuIds?: any;
+  parentMenuId?: any;
+  parentMenuName?: any;
+  tree: boolean;
+  crud: boolean;
+}
+
+export interface Row {
+  createDept: number;
+  createBy: number;
+  createTime: string;
+  updateBy: number;
+  updateTime: string;
+  columnId: string;
+  tableId: string;
+  columnName: string;
+  columnComment: string;
+  columnType: string;
+  javaType: string;
+  javaField: string;
+  isPk: string;
+  isIncrement: string;
+  isRequired: string;
+  isInsert?: any;
+  isEdit: string;
+  isList: string;
+  isQuery?: any;
+  queryType: string;
+  htmlType: string;
+  dictType: string;
+  sort: number;
+  list: boolean;
+  required: boolean;
+  pk: boolean;
+  insert: boolean;
+  edit: boolean;
+  usableColumn: boolean;
+  superColumn: boolean;
+  increment: boolean;
+  query: boolean;
+  capJavaField: string;
+}
+
+export interface Column {
+  createDept?: any;
+  createBy?: any;
+  createTime?: any;
+  updateBy?: any;
+  updateTime?: any;
+  columnId: string;
+  tableId: string;
+  columnName: string;
+  columnComment: string;
+  columnType: string;
+  javaType: string;
+  javaField: string;
+  isPk: string;
+  isIncrement: string;
+  isRequired: string;
+  isInsert?: any;
+  isEdit: string;
+  isList: string;
+  isQuery?: any;
+  queryType: string;
+  htmlType: string;
+  dictType: string;
+  sort: number;
+  list: boolean;
+  required: boolean;
+  pk: boolean;
+  insert: boolean;
+  edit: boolean;
+  usableColumn: boolean;
+  superColumn: boolean;
+  increment: boolean;
+  query: boolean;
+  capJavaField: string;
+}
+
+export interface Info {
+  createDept?: any;
+  createBy?: any;
+  createTime?: any;
+  updateBy?: any;
+  updateTime?: any;
+  tableId: string;
+  dataName: string;
+  tableName: string;
+  tableComment: string;
+  subTableName?: any;
+  subTableFkName?: any;
+  className: string;
+  tplCategory: string;
+  packageName: string;
+  moduleName: string;
+  businessName: string;
+  functionName: string;
+  functionAuthor: string;
+  genType: string;
+  genPath: string;
+  pkColumn?: any;
+  columns: Column[];
+  options?: any;
+  remark?: any;
+  treeCode?: any;
+  treeParentCode?: any;
+  treeName?: any;
+  menuIds?: any;
+  parentMenuId?: any;
+  parentMenuName?: any;
+  tree: boolean;
+  crud: boolean;
+  // 树表需要添加此属性
+  params?: any;
+  popupComponent?: string;
+  formComponent?: string;
+}
+
+export interface GenInfo {
+  tables: Table[];
+  rows: Row[];
+  info: Info;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/category/index.ts

@@ -0,0 +1,63 @@
+import type {
+  CategoryForm,
+  CategoryQuery,
+  CategoryTree,
+  CategoryVO,
+} from './model';
+
+import type { ID, IDS } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取流程分类树列表
+ * @returns tree
+ */
+export function categoryTree() {
+  return requestClient.get<CategoryTree[]>('/workflow/category/categoryTree');
+}
+
+/**
+ * 查询流程分类列表
+ * @param params
+ * @returns 流程分类列表
+ */
+export function categoryList(params?: CategoryQuery) {
+  return requestClient.get<CategoryVO[]>(`/workflow/category/list`, { params });
+}
+
+/**
+ * 查询流程分类详情
+ * @param id id
+ * @returns 流程分类详情
+ */
+export function categoryInfo(id: ID) {
+  return requestClient.get<CategoryVO>(`/workflow/category/${id}`);
+}
+
+/**
+ * 新增流程分类
+ * @param data
+ * @returns void
+ */
+export function categoryAdd(data: CategoryForm) {
+  return requestClient.postWithMsg<void>('/workflow/category', data);
+}
+
+/**
+ * 更新流程分类
+ * @param data
+ * @returns void
+ */
+export function categoryUpdate(data: CategoryForm) {
+  return requestClient.putWithMsg<void>('/workflow/category', data);
+}
+
+/**
+ * 删除流程分类
+ * @param id id
+ * @returns void
+ */
+export function categoryRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/workflow/category/${id}`);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/category/model.d.ts

@@ -0,0 +1,97 @@
+import type { BaseEntity } from '#/api/common';
+
+export interface CategoryVO {
+  /**
+   * 主键
+   */
+  id: number | string;
+
+  /**
+   * 分类名称
+   */
+  categoryName: string;
+
+  /**
+   * 分类编码
+   */
+  categoryCode: string;
+
+  /**
+   * 父级id
+   */
+  parentId: number | string;
+
+  /**
+   * 排序
+   */
+  sortNum: number;
+
+  /**
+   * 子对象
+   */
+  children: CategoryVO[];
+  key: string;
+}
+
+export interface CategoryForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: number | string;
+
+  /**
+   * 分类名称
+   */
+  categoryName?: string;
+
+  /**
+   * 分类编码
+   */
+  categoryCode?: string;
+
+  /**
+   * 父级id
+   */
+  parentId?: number | string;
+
+  /**
+   * 排序
+   */
+  sortNum?: number;
+}
+
+export interface CategoryQuery {
+  /**
+   * 分类名称
+   */
+  categoryName?: string;
+
+  /**
+   * 分类编码
+   */
+  categoryCode?: string;
+
+  /**
+   * 父级id
+   */
+  parentId?: number | string;
+
+  /**
+   * 排序
+   */
+  sortNum?: number;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
+
+export interface CategoryTree {
+  id: number;
+  parentId: number;
+  label: string;
+  weight: number;
+  children: CategoryTree[];
+  key: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/definition/index.ts

@@ -0,0 +1,155 @@
+import type { ProcessDefinition } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 全部的流程定义
+ * @param params 查询参数
+ * @returns 分页
+ */
+export function workflowDefinitionList(params?: PageQuery) {
+  return requestClient.get<PageResult<ProcessDefinition>>(
+    '/workflow/definition/list',
+    { params },
+  );
+}
+
+/**
+ * 未发布的流程定义
+ * @param params 查询参数
+ * @returns 分页
+ */
+export function unPublishList(params?: PageQuery) {
+  return requestClient.get<PageResult<ProcessDefinition>>(
+    '/workflow/definition/unPublishList',
+    { params },
+  );
+}
+
+/**
+ * 获取历史流程定义列表
+ * @param flowCode
+ * @returns ProcessDefinition[]
+ */
+export function getHisListByKey(flowCode: string) {
+  return requestClient.get<ProcessDefinition[]>(
+    `/workflow/definition/getHisListByKey/${flowCode}`,
+  );
+}
+
+/**
+ * 获取流程定义详细信息
+ * @param id id
+ * @returns ProcessDefinition
+ */
+export function workflowDefinitionInfo(id: ID) {
+  return requestClient.get<ProcessDefinition>(`/workflow/definition/${id}`);
+}
+
+/**
+ * 新增流程定义
+ * @param data
+ */
+export function workflowDefinitionAdd(data: any) {
+  return requestClient.postWithMsg<void>('/workflow/definition', data);
+}
+
+/**
+ * 更新流程定义
+ * @param data
+ */
+export function workflowDefinitionUpdate(data: any) {
+  return requestClient.putWithMsg<void>('/workflow/definition', data);
+}
+
+/**
+ * 发布流程定义
+ * @param id id
+ * @returns boolean
+ */
+export function workflowDefinitionPublish(id: ID) {
+  return requestClient.putWithMsg<boolean>(
+    `/workflow/definition/publish/${id}`,
+  );
+}
+
+/**
+ * 取消发布流程定义
+ * @param id id
+ * @returns boolean
+ */
+export function workflowDefinitionUnPublish(id: ID) {
+  return requestClient.putWithMsg<boolean>(
+    `/workflow/definition/unPublish/${id}`,
+  );
+}
+
+/**
+ * 删除流程定义
+ * @param ids idList
+ */
+export function workflowDefinitionDelete(ids: IDS) {
+  return requestClient.deleteWithMsg<void>(`/workflow/definition/${ids}`);
+}
+
+/**
+ * 复制流程定义
+ * @param id id
+ */
+export function workflowDefinitionCopy(id: ID) {
+  return requestClient.postWithMsg<void>(`/workflow/definition/copy/${id}`);
+}
+
+/**
+ * 导入流程定义
+ * @returns boolean
+ */
+export function workflowDefinitionImport(data: {
+  category: ID;
+  file: Blob | File;
+}) {
+  return requestClient.postWithMsg<boolean>(
+    '/workflow/definition/importDef',
+    data,
+    { headers: { 'Content-Type': 'multipart/form-data' } },
+  );
+}
+
+/**
+ * 导出流程定义
+ * @param id id
+ * @returns blob
+ */
+export function workflowDefinitionExport(id: ID) {
+  return requestClient.postWithMsg<Blob>(
+    `/workflow/definition/exportDef/${id}`,
+    {},
+    {
+      responseType: 'blob',
+      isTransformResponse: false,
+    },
+  );
+}
+
+/**
+ * 获取流程定义xml字符串
+ * @param id id
+ * @returns xml
+ */
+export function workflowDefinitionXml(id: ID) {
+  return requestClient.get<string>(`/workflow/definition/xmlString/${id}`);
+}
+
+/**
+ * 激活/挂起流程定义
+ * @param id 流程定义id
+ * @param active 激活/挂起
+ * @returns boolean
+ */
+export function workflowDefinitionActive(id: ID, active: boolean) {
+  return requestClient.putWithMsg<boolean>(
+    `/workflow/definition/active/${id}?active=${active}`,
+  );
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/definition/model.d.ts

@@ -0,0 +1,19 @@
+export interface ProcessDefinition {
+  id: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag: string;
+  flowCode: string;
+  flowName: string;
+  category: string;
+  categoryName: string;
+  version: string;
+  isPublish: number;
+  formCustom: string;
+  formPath: string;
+  activityStatus: number;
+  listenerType?: any;
+  listenerPath?: any;
+  ext?: any;
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/instance/index.ts

@@ -0,0 +1,120 @@
+import type { TaskInfo } from '../task/model';
+import type { FlowInfoResponse } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * @param businessId 业务ID
+ * @returns TaskInfo
+ */
+export function getTaskByBusinessId(businessId: string) {
+  return requestClient.get<TaskInfo>(
+    `/workflow/instance/getInfo/${businessId}`,
+  );
+}
+
+/**
+ * 分页查询正在运行的流程实例
+ * @param params
+ * @returns
+ */
+export function pageByRunning(params?: PageQuery) {
+  return requestClient.get('/workflow/instance/pageByRunning', { params });
+}
+
+/**
+ * pageByFinish
+ * @param params
+ * @returns
+ */
+export function pageByFinish(params?: PageQuery) {
+  return requestClient.get('/workflow/instance/pageByFinish', { params });
+}
+
+/**
+ * 按照业务id删除流程实例
+ * @param businessIds 业务id
+ */
+export function deleteByBusinessIds(businessIds: IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `/workflow/instance/deleteByBusinessIds${businessIds}`,
+  );
+}
+
+/**
+ * 按照实例id删除流程实例
+ * @param instanceIds 实例id
+ */
+export function deleteByInstanceIds(instanceIds: IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `/workflow/instance/deleteByInstanceIds/${instanceIds}`,
+  );
+}
+
+/**
+ * 撤销流程
+ * @param data
+ */
+export function cancelProcessApply(data: { businessId: ID; message?: string }) {
+  return requestClient.putWithMsg<void>(
+    '/workflow/instance/cancelProcessApply',
+    data,
+  );
+}
+
+/**
+ * 激活/挂起流程实例
+ * @param instanceId
+ * @param active
+ */
+export function workflowInstanceActive(instanceId: ID, active: boolean) {
+  return requestClient.putWithMsg<void>(
+    `/workflow/instance/active/${instanceId}?active=${active}`,
+  );
+}
+
+/**
+ * 获取当前登录人发起的流程实例
+ * @param params
+ * @returns PageResult<Flow>
+ */
+export function pageByCurrent(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/instance/pageByCurrent',
+    { params },
+  );
+}
+
+/**
+ * 获取流程图，流程记录
+ * @param businessId 业务标识
+ * @returns 流程图，流程记录
+ */
+export function flowInfo(businessId: string) {
+  return requestClient.get<FlowInfoResponse>(
+    `/workflow/instance/flowHisTaskList/${businessId}`,
+  );
+}
+
+/**
+ * 获取流程变量
+ * @param instanceId
+ * @returns Map<string,any>
+ */
+export function instanceVariable(instanceId: string) {
+  return requestClient.get<Record<string, any>>(
+    `/workflow/instance/variable/${instanceId}`,
+  );
+}
+
+/**
+ * 作废流程
+ */
+export function workflowInstanceInvalid(data: {
+  comment?: string;
+  id: string;
+}) {
+  return requestClient.postWithMsg<void>('/workflow/instance/invalid', data);
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/instance/model.d.ts

@@ -0,0 +1,41 @@
+export interface Flow {
+  id: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag: string;
+  definitionId: string;
+  flowName?: any;
+  instanceId: string;
+  taskId: string;
+  cooperateType: number;
+  cooperateTypeName: string;
+  businessId?: any;
+  nodeCode: string;
+  nodeName: string;
+  nodeType: number;
+  targetNodeCode: string;
+  targetNodeName: string;
+  approver: string;
+  approveName: string;
+  collaborator?: any;
+  permissionList?: any;
+  skipType: string;
+  flowStatus: string;
+  flowTaskStatus?: any;
+  flowStatusName?: any;
+  message: string;
+  ext: null | string;
+  createBy?: any;
+  formCustom: string;
+  formPath: string;
+  flowCode?: any;
+  version?: any;
+  runDuration: string;
+  nickName?: any;
+}
+
+export interface FlowInfoResponse {
+  instanceId: string;
+  list: Flow[];
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/task/index.ts

@@ -0,0 +1,172 @@
+import type {
+  CompleteTaskReqData,
+  NextNodeInfo,
+  StartWorkFlowReqData,
+  TaskInfo,
+  TaskOperationData,
+  TaskOperationType,
+} from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 启动任务
+ * @param data
+ */
+export function startWorkFlow(data: StartWorkFlowReqData) {
+  return requestClient.post<{
+    processInstanceId: string;
+    taskId: string;
+  }>('/workflow/task/startWorkFlow', data);
+}
+
+/**
+ * 办理任务
+ * @param data
+ */
+export function completeTask(data: CompleteTaskReqData) {
+  return requestClient.postWithMsg<void>('/workflow/task/completeTask', data);
+}
+
+/**
+ * 查询当前用户的待办任务
+ * @param params
+ */
+export function pageByTaskWait(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByTaskWait',
+    { params },
+  );
+}
+
+/**
+ * 查询当前用户的已办任务
+ * @param params
+ */
+export function pageByTaskFinish(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByTaskFinish',
+    { params },
+  );
+}
+
+/**
+ * 查询所有待办任务
+ * @param params
+ */
+export function pageByAllTaskWait(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByAllTaskWait',
+    { params },
+  );
+}
+
+/**
+ * 查询已办任务
+ * @param params
+ */
+export function pageByAllTaskFinish(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByAllTaskFinish',
+    { params },
+  );
+}
+
+/**
+ * 查询当前用户的抄送
+ * @param params
+ */
+export function pageByTaskCopy(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByTaskCopy',
+    { params },
+  );
+}
+
+/**
+ * 根据taskId查询代表任务
+ * @param taskId 任务id
+ * @returns info
+ */
+export function getTaskByTaskId(taskId: string) {
+  return requestClient.get<TaskInfo>(`/workflow/task/getTask/${taskId}`);
+}
+
+/**
+ * 终止任务
+ */
+export function terminationTask(data: { comment?: string; taskId: string }) {
+  return requestClient.postWithMsg<void>(
+    '/workflow/task/terminationTask',
+    data,
+  );
+}
+
+/**
+ * 任务操作
+ * @param taskOperationData 参数
+ * @param taskOperation 操作类型，委派 delegateTask、转办 transferTask、加签 addSignature、减签 reductionSignature
+ */
+export function taskOperation(
+  taskOperationData: TaskOperationData,
+  taskOperation: TaskOperationType,
+) {
+  return requestClient.postWithMsg<void>(
+    `/workflow/task/taskOperation/${taskOperation}`,
+    taskOperationData,
+  );
+}
+
+/**
+ * 修改任务办理人
+ * @param taskIdList 任务id
+ * @param userId 办理人id
+ */
+export function updateAssignee(taskIdList: IDS, userId: ID) {
+  return requestClient.putWithMsg<void>(
+    `/workflow/task/updateAssignee/${userId}`,
+    taskIdList,
+  );
+}
+
+/**
+ * 驳回审批
+ * @param data 参数
+ */
+export function backProcess(data: any) {
+  return requestClient.postWithMsg<void>('/workflow/task/backProcess', data);
+}
+
+/**
+ * 获取可驳回节点
+ * @param definitionId 流程定义ID
+ * @param nodeCode 当前节点编码
+ */
+export function getBackTaskNode(definitionId: string, nodeCode: string) {
+  return requestClient.get<{ nodeCode: string; nodeName: string }[]>(
+    `/workflow/task/getBackTaskNode/${definitionId}/${nodeCode}`,
+  );
+}
+
+/**
+ * 获取当前任务的所有办理人
+ * @param taskId 任务id
+ */
+export function currentTaskAllUser(taskId: ID) {
+  return requestClient.get<any>(`/workflow/task/currentTaskAllUser/${taskId}`);
+}
+
+/**
+ * 获取下一节点
+ * @param data data
+ * @param data.taskId taskId
+ * @returns NextNodeInfo
+ */
+export function getNextNodeList(data: { taskId: string }) {
+  return requestClient.post<NextNodeInfo[]>(
+    '/workflow/task/getNextNodeList',
+    data,
+  );
+}

Yi.Vben5.Vue3/apps/web-antd/src/api/workflow/task/model.d.ts

@@ -0,0 +1,108 @@
+export interface ButtonWithPermission {
+  code: string;
+  value: null | string;
+  show: boolean;
+}
+
+export interface TaskInfo {
+  id: string;
+  categoryName: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag?: any;
+  definitionId: string;
+  instanceId: string;
+  flowName: string;
+  businessId: string;
+  nodeCode: string;
+  nodeName: string;
+  nodeType: number;
+  permissionList?: any;
+  userList?: any;
+  formCustom: string;
+  formPath?: any;
+  flowCode: string;
+  version: string;
+  flowStatus: string;
+  flowStatusName: string;
+  assigneeIds: string;
+  assigneeNames: string;
+  processedBy: string;
+  type: string;
+  nodeRatio?: string;
+  createBy: string;
+  createByName: string;
+  targetNodeName?: string;
+  buttonList: ButtonWithPermission[];
+}
+
+export interface CompleteTaskReqData {
+  messageType: string[];
+  flowCopyList: { userId: string; userName: string }[];
+  taskId: ID;
+  taskVariables: Record<string, any>;
+  variables: any;
+  // 附件ID 1,2,3,4形式
+  fileId?: string;
+  // 选人 key为节点code value为用户ID join(,)
+  assigneeMap: { [key: string]: string };
+}
+
+export interface StartWorkFlowReqData {
+  /**
+   * 业务ID
+   */
+  businessId: ID;
+  /**
+   * flowCode
+   */
+  flowCode: string;
+  /**
+   * 流程变量
+   */
+  variables: Record<string, any>;
+}
+
+export interface TaskOperationData {
+  message?: string;
+  taskId: ID;
+  // 单个操作人
+  userId?: ID;
+  // 多个操作人
+  userIds?: IDS;
+}
+
+/**
+ * 操作类型，委派 delegateTask、转办 transferTask、加签 addSignature、减签 reductionSignature
+ */
+export type TaskOperationType =
+  | 'addSignature'
+  | 'delegateTask'
+  | 'reductionSignature'
+  | 'transferTask';
+
+export interface NextNodeInfo {
+  skipList: string[];
+  id: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag: string;
+  nodeType: number;
+  definitionId: string;
+  nodeCode: string;
+  nodeName: string;
+  permissionFlag: string;
+  nodeRatio: string;
+  coordinate: string;
+  version: string;
+  anyNodeSkip: any;
+  listenerType: any;
+  listenerPath: any;
+  handlerType: any;
+  handlerPath: any;
+  formCustom: string;
+  formPath: any;
+  ext: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/app.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAntdDesignTokens } from '@vben/hooks';
+import { preferences, usePreferences } from '@vben/preferences';
+
+import { App, ConfigProvider, theme } from 'ant-design-vue';
+
+import { antdLocale } from '#/locales';
+
+import { useUploadTip } from './upload-tip';
+
+defineOptions({ name: 'App' });
+
+const { isDark } = usePreferences();
+const { tokens } = useAntdDesignTokens();
+
+const tokenTheme = computed(() => {
+  const algorithm = isDark.value
+    ? [theme.darkAlgorithm]
+    : [theme.defaultAlgorithm];
+
+  // antd 紧凑模式算法
+  if (preferences.app.compact) {
+    algorithm.push(theme.compactAlgorithm);
+  }
+
+  return {
+    algorithm,
+    token: tokens,
+  };
+});
+
+useUploadTip();
+</script>
+
+<template>
+  <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
+    <App>
+      <RouterView />
+    </App>
+  </ConfigProvider>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/bootstrap.ts

@@ -0,0 +1,79 @@
+import { createApp, watchEffect } from 'vue';
+
+import { registerAccessDirective } from '@vben/access';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
+import { preferences } from '@vben/preferences';
+import { initStores } from '@vben/stores';
+import '@vben/styles';
+import '@vben/styles/antd';
+
+import { useTitle } from '@vueuse/core';
+
+import { setupGlobalComponent } from '#/components/global';
+import { $t, setupI18n } from '#/locales';
+
+import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
+import App from './app.vue';
+import { router } from './router';
+
+async function bootstrap(namespace: string) {
+  // 初始化组件适配器
+  await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
+
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
+
+  const app = createApp(App);
+
+  // 全局组件
+  setupGlobalComponent(app);
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
+  // 国际化 i18n 配置
+  await setupI18n(app);
+
+  // 配置 pinia-tore
+  await initStores(app, { namespace });
+
+  // 安装权限指令
+  registerAccessDirective(app);
+
+  // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
+  initTippy(app);
+
+  // 配置路由及路由守卫
+  app.use(router);
+
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
+  // 动态更新标题
+  watchEffect(() => {
+    if (preferences.app.dynamicTitle) {
+      const routeTitle = router.currentRoute.value.meta?.title;
+      const pageTitle =
+        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+      useTitle(pageTitle);
+    }
+  });
+
+  app.mount('#app');
+}
+
+export { bootstrap };

Yi.Vben5.Vue3/apps/web-antd/src/components/cropper/index.ts

@@ -0,0 +1,3 @@
+export { default as CropperAvatar } from './src/cropper-avatar.vue';
+export { default as CropperImage } from './src/cropper.vue';
+export type { Cropper } from './src/typing';

Yi.Vben5.Vue3/apps/web-antd/src/components/cropper/src/cropper-avatar.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import type { ButtonProps } from 'ant-design-vue';
+
+import type { CSSProperties, PropType } from 'vue';
+
+import { computed, ref, unref, watch, watchEffect } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t as t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import cropperModal from './cropper-modal.vue';
+
+defineOptions({ name: 'CropperAvatar' });
+
+const props = defineProps({
+  btnProps: { default: () => ({}), type: Object as PropType<ButtonProps> },
+  btnText: { default: '', type: String },
+  showBtn: { default: true, type: Boolean },
+  size: { default: 5, type: Number },
+  uploadApi: {
+    required: true,
+    type: Function as PropType<
+      ({
+        file,
+        filename,
+        name,
+      }: {
+        file: Blob;
+        filename: string;
+        name: string;
+      }) => Promise<any>
+    >,
+  },
+  value: { default: '', type: String },
+
+  width: { default: '200px', type: [String, Number] },
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const sourceValue = ref(props.value || '');
+const prefixCls = 'cropper-avatar';
+const [CropperModal, modalApi] = useVbenModal({
+  connectedComponent: cropperModal,
+});
+
+const getClass = computed(() => [prefixCls]);
+
+const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`);
+
+const getIconWidth = computed(
+  () => `${Number.parseInt(`${props.width}`.replace(/px/, '')) / 2}px`,
+);
+
+const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+const getImageWrapperStyle = computed(
+  (): CSSProperties => ({ height: unref(getWidth), width: unref(getWidth) }),
+);
+
+watchEffect(() => {
+  sourceValue.value = props.value || '';
+});
+
+watch(
+  () => sourceValue.value,
+  (v: string) => {
+    emit('update:value', v);
+  },
+);
+
+function handleUploadSuccess({ data, source }: any) {
+  sourceValue.value = source;
+  emit('change', { data, source });
+  message.success(t('component.cropper.uploadSuccess'));
+}
+
+const closeModal = () => modalApi.close();
+const openModal = () => modalApi.open();
+
+defineExpose({
+  closeModal,
+  openModal,
+});
+</script>
+<template>
+  <div :class="getClass" :style="getStyle">
+    <div
+      :class="`${prefixCls}-image-wrapper`"
+      :style="getImageWrapperStyle"
+      @click="openModal"
+    >
+      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
+        <span
+          :style="{
+            ...getImageWrapperStyle,
+            width: `${getIconWidth}`,
+            height: `${getIconWidth}`,
+            lineHeight: `${getIconWidth}`,
+          }"
+          class="icon-[ant-design--cloud-upload-outlined] text-[#d6d6d6]"
+        ></span>
+      </div>
+      <img v-if="sourceValue" :src="sourceValue" alt="avatar" />
+    </div>
+    <a-button
+      v-if="showBtn"
+      :class="`${prefixCls}-upload-btn`"
+      @click="openModal"
+      v-bind="btnProps"
+    >
+      {{ btnText ? btnText : t('component.cropper.selectImage') }}
+    </a-button>
+
+    <CropperModal
+      :size="size"
+      :src="sourceValue"
+      :upload-api="uploadApi"
+      @upload-success="handleUploadSuccess"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cropper-avatar {
+  display: inline-block;
+  text-align: center;
+
+  &-image-wrapper {
+    overflow: hidden;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &-image-mask {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    height: inherit;
+    cursor: pointer;
+    background: rgb(0 0 0 / 40%);
+    border: inherit;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.4s;
+
+    ::v-deep(svg) {
+      margin: auto;
+    }
+  }
+
+  &-image-mask:hover {
+    opacity: 40;
+  }
+
+  &-upload-btn {
+    margin: 10px auto;
+  }
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/cropper/src/cropper-modal.vue

@@ -0,0 +1,382 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import type { CropendResult, Cropper } from './typing';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t as t } from '@vben/locales';
+
+import { Avatar, message, Space, Tooltip, Upload } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+import { dataURLtoBlob } from '#/utils/file/base64Conver';
+
+import CropperImage from './cropper.vue';
+
+type apiFunParams = { file: Blob; filename: string; name: string };
+
+defineOptions({ name: 'CropperModal' });
+
+const props = defineProps({
+  circled: { default: true, type: Boolean },
+  size: { default: 0, type: Number },
+  src: { default: '', type: String },
+  uploadApi: {
+    required: true,
+    type: Function as PropType<(params: apiFunParams) => Promise<any>>,
+  },
+});
+
+const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
+
+let filename = '';
+const src = ref(props.src || '');
+const previewSource = ref('');
+const cropper = ref<Cropper>();
+let scaleX = 1;
+let scaleY = 1;
+
+const prefixCls = 'cropper-am';
+const [BasicModal, modalApi] = useVbenModal({
+  onConfirm: handleOk,
+  onOpenChange(isOpen) {
+    // 打开的时候loading CropperImage组件加载完毕关闭loading
+    if (isOpen) {
+      modalLoading(true);
+    } else {
+      // 关闭时候清空右侧预览
+      previewSource.value = '';
+      modalLoading(false);
+    }
+  },
+});
+
+function modalLoading(loading: boolean) {
+  modalApi.setState({ confirmLoading: loading, loading });
+}
+
+// Block upload
+function handleBeforeUpload(file: File) {
+  if (props.size > 0 && file.size > 1024 * 1024 * props.size) {
+    emit('uploadError', { msg: t('component.cropper.imageTooBig') });
+    return false;
+  }
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  src.value = '';
+  previewSource.value = '';
+  reader.addEventListener('load', (e) => {
+    src.value = (e.target?.result as string) ?? '';
+    filename = file.name;
+  });
+  return false;
+}
+
+function handleCropend({ imgBase64 }: CropendResult) {
+  previewSource.value = imgBase64;
+}
+
+function handleReady(cropperInstance: Cropper) {
+  cropper.value = cropperInstance;
+  // 画布加载完毕 关闭loading
+  modalLoading(false);
+}
+
+function handleReadyError() {
+  modalLoading(false);
+}
+
+function handlerToolbar(event: string, arg?: number) {
+  if (event === 'scaleX') {
+    scaleX = arg = scaleX === -1 ? 1 : -1;
+  }
+  if (event === 'scaleY') {
+    scaleY = arg = scaleY === -1 ? 1 : -1;
+  }
+  (cropper?.value as any)?.[event]?.(arg);
+}
+
+async function handleOk() {
+  const uploadApi = props.uploadApi;
+  if (uploadApi && isFunction(uploadApi)) {
+    if (!previewSource.value) {
+      message.warn('未选择图片');
+      return;
+    }
+    const blob = dataURLtoBlob(previewSource.value);
+    try {
+      modalLoading(true);
+      const result = await uploadApi({ file: blob, filename, name: 'file' });
+      emit('uploadSuccess', { data: result.url, source: previewSource.value });
+      modalApi.close();
+    } finally {
+      modalLoading(false);
+    }
+  }
+}
+</script>
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :confirm-text="t('component.cropper.okText')"
+    :fullscreen-button="false"
+    :title="t('component.cropper.modalTitle')"
+    class="w-[800px]"
+  >
+    <div :class="prefixCls">
+      <div :class="`${prefixCls}-left`" class="w-full">
+        <div :class="`${prefixCls}-cropper`">
+          <CropperImage
+            v-if="src"
+            :circled="circled"
+            :src="src"
+            crossorigin="anonymous"
+            height="300px"
+            @cropend="handleCropend"
+            @ready="handleReady"
+            @ready-error="handleReadyError"
+          />
+        </div>
+
+        <div :class="`${prefixCls}-toolbar`">
+          <Upload
+            :before-upload="handleBeforeUpload"
+            :file-list="[]"
+            accept="image/*"
+          >
+            <Tooltip
+              :title="t('component.cropper.selectImage')"
+              placement="bottom"
+            >
+              <a-button size="small" type="primary">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--upload-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip
+              :title="t('component.cropper.btn_reset')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('reset')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--reload-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_rotate_left')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('rotate', -45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span
+                      class="icon-[ant-design--rotate-left-outlined]"
+                    ></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_rotate_right')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                pre-icon="ant-design:rotate-right-outlined"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('rotate', 45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span
+                      class="icon-[ant-design--rotate-right-outlined]"
+                    ></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_scale_x')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('scaleX')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[vaadin--arrows-long-h]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_scale_y')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('scaleY')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[vaadin--arrows-long-v]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_zoom_in')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('zoom', 0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--zoom-in-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              :title="t('component.cropper.btn_zoom_out')"
+              placement="bottom"
+            >
+              <a-button
+                :disabled="!src"
+                size="small"
+                type="primary"
+                @click="handlerToolbar('zoom', -0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--zoom-out-outlined]"></span>
+                  </div>
+                </template>
+              </a-button>
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+      <div :class="`${prefixCls}-right`">
+        <div :class="`${prefixCls}-preview`">
+          <img
+            v-if="previewSource"
+            :alt="t('component.cropper.preview')"
+            :src="previewSource"
+          />
+        </div>
+        <template v-if="previewSource">
+          <div :class="`${prefixCls}-group`">
+            <Avatar :src="previewSource" size="large" />
+            <Avatar :size="48" :src="previewSource" />
+            <Avatar :size="64" :src="previewSource" />
+            <Avatar :size="80" :src="previewSource" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<style lang="scss">
+.cropper-am {
+  display: flex;
+
+  &-left,
+  &-right {
+    height: 340px;
+  }
+
+  &-left {
+    width: 55%;
+  }
+
+  &-right {
+    width: 45%;
+  }
+
+  &-cropper {
+    height: 300px;
+    background: #eee;
+    background-image:
+      linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      ),
+      linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      );
+    background-position:
+      0 0,
+      12px 12px;
+    background-size: 24px 24px;
+  }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  &-preview {
+    width: 220px;
+    height: 220px;
+    margin: 0 auto;
+    overflow: hidden;
+    border: 1px solid #eee;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid #eee;
+  }
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/cropper/src/cropper.vue

@@ -0,0 +1,207 @@
+<script lang="ts" setup>
+import type { CSSProperties, PropType } from 'vue';
+
+import { computed, onMounted, onUnmounted, ref, unref, useAttrs } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+import Cropper from 'cropperjs';
+
+import 'cropperjs/dist/cropper.css';
+
+type Options = Cropper.Options;
+
+defineOptions({ name: 'CropperImage' });
+
+const props = defineProps({
+  alt: { default: '', type: String },
+  circled: { default: false, type: Boolean },
+  crossorigin: {
+    default: undefined,
+    type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
+  },
+  height: { default: '360px', type: [String, Number] },
+  imageStyle: { default: () => ({}), type: Object as PropType<CSSProperties> },
+  options: { default: () => ({}), type: Object as PropType<Options> },
+  realTimePreview: { default: true, type: Boolean },
+  src: { required: true, type: String },
+});
+
+const emit = defineEmits(['cropend', 'ready', 'cropendError', 'readyError']);
+
+const defaultOptions: Options = {
+  aspectRatio: 1,
+  autoCrop: true,
+  background: true,
+  center: true,
+  // 需要设置为false 否则会自动拼接timestamp 导致私有桶sign错误
+  // 需要配合img crossorigin='anonymous'使用(默认已经做了处理)
+  checkCrossOrigin: false,
+  checkOrientation: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  guides: true,
+  highlight: true,
+  modal: true,
+  movable: true,
+  responsive: true,
+  restore: true,
+  rotatable: true,
+  scalable: true,
+  toggleDragModeOnDblclick: true,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+};
+
+const attrs = useAttrs();
+
+type ElRef<T extends HTMLElement = HTMLDivElement> = null | T;
+const imgElRef = ref<ElRef<HTMLImageElement>>();
+const cropper = ref<Cropper | null>();
+const isReady = ref(false);
+
+const prefixCls = 'cropper-image';
+const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
+
+const getImageStyle = computed((): CSSProperties => {
+  return {
+    height: props.height,
+    maxWidth: '100%',
+    ...props.imageStyle,
+  };
+});
+
+const getClass = computed(() => {
+  return [
+    prefixCls,
+    attrs.class,
+    {
+      [`${prefixCls}--circled`]: props.circled,
+    },
+  ];
+});
+
+const getWrapperStyle = computed((): CSSProperties => {
+  return { height: `${`${props.height}`.replace(/px/, '')}px` };
+});
+
+onMounted(init);
+
+onUnmounted(() => {
+  cropper.value?.destroy();
+});
+
+async function init() {
+  const imgEl = unref(imgElRef);
+  if (!imgEl) {
+    return;
+  }
+  // 判断是否为正常访问的图片
+  try {
+    const resp = await fetch(props.src);
+    if (resp.status !== 200) {
+      emit('readyError');
+    }
+  } catch {
+    emit('readyError');
+  }
+  cropper.value = new Cropper(imgEl, {
+    ...defaultOptions,
+    crop() {
+      debounceRealTimeCroppered();
+    },
+    cropmove() {
+      debounceRealTimeCroppered();
+    },
+    ready: () => {
+      isReady.value = true;
+      realTimeCroppered();
+      emit('ready', cropper.value);
+    },
+    zoom() {
+      debounceRealTimeCroppered();
+    },
+    ...props.options,
+  });
+}
+
+// Real-time display preview
+function realTimeCroppered() {
+  props.realTimePreview && croppered();
+}
+
+// event: return base64 and width and height information after cropping
+function croppered() {
+  if (!cropper.value) {
+    return;
+  }
+  const imgInfo = cropper.value.getData();
+  const canvas = props.circled
+    ? getRoundedCanvas()
+    : cropper.value.getCroppedCanvas();
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+    const fileReader: FileReader = new FileReader();
+    fileReader.readAsDataURL(blob);
+    fileReader.onloadend = (e) => {
+      emit('cropend', {
+        imgBase64: e.target?.result ?? '',
+        imgInfo,
+      });
+    };
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    fileReader.onerror = () => {
+      emit('cropendError');
+    };
+  }, 'image/png');
+}
+
+// Get a circular picture canvas
+function getRoundedCanvas() {
+  const sourceCanvas = cropper.value!.getCroppedCanvas();
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  const width = sourceCanvas.width;
+  const height = sourceCanvas.height;
+  canvas.width = width;
+  canvas.height = height;
+  context.imageSmoothingEnabled = true;
+  context.drawImage(sourceCanvas, 0, 0, width, height);
+  context.globalCompositeOperation = 'destination-in';
+  context.beginPath();
+  context.arc(
+    width / 2,
+    height / 2,
+    Math.min(width, height) / 2,
+    0,
+    2 * Math.PI,
+    true,
+  );
+  context.fill();
+  return canvas;
+}
+</script>
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img
+      v-show="isReady"
+      ref="imgElRef"
+      :alt="alt"
+      :crossorigin="crossorigin"
+      :src="src"
+      :style="getImageStyle"
+    />
+  </div>
+</template>
+<style lang="scss">
+.cropper-image {
+  &--circled {
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+  }
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/cropper/src/typing.ts

@@ -0,0 +1,8 @@
+import type Cropper from 'cropperjs';
+
+export interface CropendResult {
+  imgBase64: string;
+  imgInfo: Cropper.Data;
+}
+
+export type { Cropper };

Yi.Vben5.Vue3/apps/web-antd/src/components/description/index.ts

@@ -0,0 +1,3 @@
+export { default as Description } from './src/description.vue';
+export * from './src/typing';
+export { useDescription } from './src/useDescription';

Yi.Vben5.Vue3/apps/web-antd/src/components/description/src/description.vue

@@ -0,0 +1,205 @@
+<script lang="tsx">
+import type { CardSize } from 'ant-design-vue/es/card/Card';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+
+import type { CSSProperties, PropType, Slots } from 'vue';
+
+import type { DescInstance, DescItem, DescriptionProps } from './typing';
+
+import { computed, defineComponent, ref, toRefs, unref, useAttrs } from 'vue';
+
+import { Card, Descriptions } from 'ant-design-vue';
+import { get, isFunction } from 'lodash-es';
+
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
+    },
+    type: [Number, Object],
+  },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescItem[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCollapse: { default: true, type: Boolean },
+};
+
+/**
+ * @deprecated 使用antd原生组件替代 下个版本将会移除
+ */
+export default defineComponent({
+  emits: ['register'],
+  // eslint-disable-next-line vue/order-in-components
+  name: 'Description',
+  // eslint-disable-next-line vue/order-in-components
+  props,
+  setup(props, { emit, slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    /**
+     * @description: Whether to setting title
+     */
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+    });
+
+    /**
+     * @description:设置desc
+     */
+    function setDescProps(descProps: Partial<DescriptionProps>): void {
+      // Keep the last setDrawerProps
+      propsRef.value = {
+        ...(unref(propsRef) as Record<string, any>),
+        ...descProps,
+      } as Record<string, any>;
+    }
+
+    // Prevent line breaks
+    function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
+      }
+
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          const getContent = () => {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = get(_data, field);
+            // eslint-disable-next-line no-prototype-builtins
+            if (getField && !toRefs(_data).hasOwnProperty(field)) {
+              return isFunction(render) ? render!('', _data) : '';
+            }
+            return isFunction(render)
+              ? render!(getField, _data)
+              : (getField ?? '');
+          };
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item
+              key={field}
+              label={renderLabel(item)}
+              span={span}
+            >
+              {() => {
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    const renderDesc = () => {
+      return (
+        <Descriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </Descriptions>
+      );
+    };
+
+    const renderContainer = () => {
+      const content = props.useCollapse ? (
+        renderDesc()
+      ) : (
+        <div>{renderDesc()}</div>
+      );
+      // Reduce the dom level
+      if (!props.useCollapse) {
+        return content;
+      }
+
+      // const { canExpand, helpMessage } = unref(getCollapseOptions);
+      const { title } = unref(getMergeProps);
+
+      function getSlot(slots: Slots, slot = 'default', data?: any) {
+        if (!slots || !Reflect.has(slots, slot)) {
+          return null;
+        }
+        if (!isFunction(slots[slot])) {
+          console.error(`${slot} is not a function!`);
+          return null;
+        }
+        const slotFn = slots[slot];
+        if (!slotFn) return null;
+        const params = { ...data };
+        return slotFn(params);
+      }
+
+      return (
+        <Card size={props.size as CardSize} title={title}>
+          {{
+            default: () => content,
+            extra: () => getSlot(slots, 'extra'),
+          }}
+        </Card>
+      );
+    };
+
+    const methods: DescInstance = {
+      setDescProps,
+    };
+
+    emit('register', methods);
+    return () => (unref(useWrapper) ? renderContainer() : renderDesc());
+  },
+});
+</script>

Yi.Vben5.Vue3/apps/web-antd/src/components/description/src/typing.ts

@@ -0,0 +1,48 @@
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+import type { JSX } from 'vue/jsx-runtime';
+
+import type { CSSProperties, VNode } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+export interface DescItem {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  labelStyle?: CSSProperties;
+  field: string;
+  label: JSX.Element | string | VNode;
+  // Merge column
+  span?: number;
+  show?: (...arg: any) => boolean;
+  // render
+  render?: (
+    val: any,
+    data: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
+}
+
+export interface DescriptionProps extends DescriptionsProps {
+  // Whether to include the collapse component
+  useCollapse?: boolean;
+  /**
+   * item configuration
+   * @type DescItem
+   */
+  schema: DescItem[];
+  /**
+   * 数据
+   * @type object
+   */
+  data: Recordable<any>;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>, delay?: boolean): void;
+}
+
+export type Register = (descInstance: DescInstance) => void;
+
+/**
+ * @description:
+ */
+export type UseDescReturnType = [Register, DescInstance];

Yi.Vben5.Vue3/apps/web-antd/src/components/description/src/useDescription.ts

@@ -0,0 +1,47 @@
+import type {
+  DescInstance,
+  DescriptionProps,
+  UseDescReturnType,
+} from './typing';
+
+import { getCurrentInstance, ref, unref } from 'vue';
+
+/**
+ * @deprecated 使用antd原生组件替代 下个版本将会移除
+ */
+export function useDescription(
+  props?: Partial<DescriptionProps>,
+): UseDescReturnType {
+  if (!getCurrentInstance()) {
+    throw new Error(
+      'useDescription() can only be used inside setup() or functional components!',
+    );
+  }
+  const desc = ref<DescInstance | null>(null);
+  const loaded = ref(false);
+
+  function register(instance: DescInstance) {
+    // if (unref(loaded) && import.meta.env.PROD) {
+    //   return;
+    // }
+    desc.value = instance;
+    props && instance.setDescProps(props);
+    loaded.value = true;
+  }
+
+  const methods: DescInstance = {
+    setDescProps: (
+      descProps: Partial<DescriptionProps>,
+      delay = false,
+    ): void => {
+      if (!delay) {
+        unref(desc)?.setDescProps(descProps);
+        return;
+      }
+      // 奇怪的问题 在modal中需要setTimeout才会生效
+      setTimeout(() => unref(desc)?.setDescProps(descProps));
+    },
+  };
+
+  return [register, methods];
+}

Yi.Vben5.Vue3/apps/web-antd/src/components/dict/index.ts

@@ -0,0 +1,2 @@
+export { tagSelectOptions, tagTypes } from './src/data';
+export { default as DictTag } from './src/index.vue';

Yi.Vben5.Vue3/apps/web-antd/src/components/dict/src/data.tsx

@@ -0,0 +1,44 @@
+import type { VNode } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+interface TagType {
+  [key: string]: { color: string; label: string };
+}
+
+export const tagTypes: TagType = {
+  cyan: { color: 'cyan', label: 'cyan' },
+  danger: { color: 'error', label: '危险(danger)' },
+  /** 由于和elementUI不同 用于替换颜色 */
+  default: { color: 'default', label: '默认(default)' },
+  green: { color: 'green', label: 'green' },
+  info: { color: 'default', label: '信息(info)' },
+  orange: { color: 'orange', label: 'orange' },
+  /** 自定义预设 color可以为16进制颜色 */
+  pink: { color: 'pink', label: 'pink' },
+  primary: { color: 'processing', label: '主要(primary)' },
+  purple: { color: 'purple', label: 'purple' },
+  red: { color: 'red', label: 'red' },
+  success: { color: 'success', label: '成功(success)' },
+  warning: { color: 'warning', label: '警告(warning)' },
+};
+
+// 字典选择使用 { label: string; value: string }[]
+interface Options {
+  label: string | VNode;
+  value: string;
+}
+
+export function tagSelectOptions() {
+  const selectArray: Options[] = [];
+  Object.keys(tagTypes).forEach((key) => {
+    if (!tagTypes[key]) return;
+    const label = tagTypes[key].label;
+    const color = tagTypes[key].color;
+    selectArray.push({
+      label: <Tag color={color}>{label}</Tag>,
+      value: key,
+    });
+  });
+  return selectArray;
+}

Yi.Vben5.Vue3/apps/web-antd/src/components/dict/src/index.vue

@@ -0,0 +1,62 @@
+<!-- eslint-disable eqeqeq -->
+<script setup lang="ts">
+import type { DictData } from '#/api/system/dict/dict-data-model';
+
+import { computed } from 'vue';
+
+import { Spin, Tag } from 'ant-design-vue';
+
+import { tagTypes } from './data';
+
+interface Props {
+  dicts: DictData[]; // dict数组
+  value: number | string; // value
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dicts: undefined,
+});
+
+const color = computed<string>(() => {
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  const listClass = current?.listClass ?? '';
+  // 是否为默认的颜色
+  const isDefault = Reflect.has(tagTypes, listClass);
+  // 判断是默认还是自定义颜色
+  if (isDefault) {
+    // 这里做了antd - element-plus的兼容
+    return tagTypes[listClass]!.color;
+  }
+  return listClass;
+});
+
+const cssClass = computed<string>(() => {
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.cssClass ?? '';
+});
+
+const label = computed<number | string>(() => {
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.dictLabel ?? 'unknown';
+});
+
+const tagComponent = computed(() => (color.value ? Tag : 'div'));
+
+const loading = computed(() => {
+  return props.dicts?.length === 0;
+});
+</script>
+
+<template>
+  <div>
+    <component
+      v-if="!loading"
+      :is="tagComponent"
+      :class="cssClass"
+      :color="color"
+    >
+      {{ label }}
+    </component>
+    <Spin v-else :spinning="true" size="small" />
+  </div>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/components/global/button.ts

@@ -0,0 +1,21 @@
+import { defineComponent, h } from 'vue';
+
+import { Button } from 'ant-design-vue';
+import buttonProps from 'ant-design-vue/es/button/buttonTypes';
+import { omit } from 'lodash-es';
+
+/**
+ * 表格操作列按钮专用
+ */
+export const GhostButton = defineComponent({
+  name: 'GhostButton',
+  props: omit(buttonProps(), ['type', 'ghost', 'size']),
+  setup(props, { attrs, slots }) {
+    return () =>
+      h(
+        Button,
+        { ...props, ...attrs, type: 'primary', ghost: true, size: 'small' },
+        slots,
+      );
+  },
+});

Yi.Vben5.Vue3/apps/web-antd/src/components/global/index.ts

@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+
+import { Button as AButton } from 'ant-design-vue';
+
+import { GhostButton } from './button';
+
+/**
+ * 全局组件注册
+ */
+export function setupGlobalComponent(app: App) {
+  app.use(AButton);
+  // 表格操作列专用按钮
+  app.component('GhostButton', GhostButton);
+}

Yi.Vben5.Vue3/apps/web-antd/src/components/table/index.ts

@@ -0,0 +1,2 @@
+export { default as OptionsTag } from './src/options-tag.vue';
+export { default as TableSwitch } from './src/table-switch.vue';

Yi.Vben5.Vue3/apps/web-antd/src/components/table/src/options-tag.vue

@@ -0,0 +1,21 @@
+<script setup lang="tsx">
+import { computed } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+defineOptions({ name: 'OptionsTag' });
+
+const props = defineProps<{
+  options: { color?: string; label: string; value: number | string }[];
+  value: number | string;
+}>();
+
+const found = computed(() =>
+  props.options.find((item) => item.value === props.value),
+);
+</script>
+
+<template>
+  <Tag v-if="found" :color="found.color">{{ found.label }}</Tag>
+  <span v-else>未知</span>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/components/table/src/table-switch.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { Modal, Switch } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+type CheckedType = boolean | number | string;
+
+interface Props {
+  /**
+   * 选中的文本
+   * @default i18n 启用
+   */
+  checkedText?: string;
+  /**
+   * 未选中的文本
+   * @default i18n 禁用
+   */
+  unCheckedText?: string;
+  checkedValue?: CheckedType;
+  unCheckedValue?: CheckedType;
+  disabled?: boolean;
+  /**
+   * 需要自己在内部处理更新的逻辑 因为status已经双向绑定了 可以直接获取
+   */
+  api: () => PromiseLike<void>;
+  /**
+   * 更新前是否弹窗确认
+   * @default false
+   */
+  confirm?: boolean;
+  /**
+   * 对应的提示内容
+   * @param checked 选中的值(更新后的值)
+   * @default string '确认要更新状态吗？'
+   */
+  confirmText?: (checked: CheckedType) => string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checkedText: undefined,
+  unCheckedText: undefined,
+  checkedValue: true,
+  unCheckedValue: false,
+  confirm: false,
+  confirmText: undefined,
+});
+
+const emit = defineEmits<{ reload: [] }>();
+
+// 修改为computed 支持语言切换
+const checkedTextComputed = computed(() => {
+  return props.checkedText ?? $t('pages.common.enable');
+});
+
+const unCheckedTextComputed = computed(() => {
+  return props.unCheckedText ?? $t('pages.common.disable');
+});
+
+const currentChecked = defineModel<CheckedType>('value', {
+  default: false,
+});
+
+const loading = ref(false);
+
+function confirmUpdate(checked: CheckedType, lastStatus: CheckedType) {
+  const content = isFunction(props.confirmText)
+    ? props.confirmText(checked)
+    : `确认要更新状态吗？`;
+
+  Modal.confirm({
+    title: '提示',
+    content,
+    centered: true,
+    onOk: async () => {
+      try {
+        loading.value = true;
+        const { api } = props;
+        isFunction(api) && (await api());
+        emit('reload');
+      } catch {
+        currentChecked.value = lastStatus;
+      } finally {
+        loading.value = false;
+      }
+    },
+    onCancel: () => {
+      currentChecked.value = lastStatus;
+    },
+  });
+}
+
+async function handleChange(checked: CheckedType, e: Event) {
+  // 阻止事件冒泡 否则会跟行选中冲突
+  e.stopPropagation();
+  const { checkedValue, unCheckedValue } = props;
+  // 原本的状态
+  const lastStatus = checked === checkedValue ? unCheckedValue : checkedValue;
+  // 切换状态
+  currentChecked.value = checked;
+  const { api } = props;
+  try {
+    loading.value = true;
+
+    if (props.confirm) {
+      confirmUpdate(checked, lastStatus);
+      return;
+    }
+
+    isFunction(api) && (await api());
+    emit('reload');
+  } catch {
+    currentChecked.value = lastStatus;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Switch
+    v-bind="$attrs"
+    :loading="loading"
+    :disabled="disabled"
+    :checked="currentChecked"
+    :checked-children="checkedTextComputed"
+    :checked-value="checkedValue"
+    :un-checked-children="unCheckedTextComputed"
+    :un-checked-value="unCheckedValue"
+    @change="handleChange"
+  />
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/components/tenant-toggle/index.ts

@@ -0,0 +1 @@
+export { default as TenantToggle } from './src/index.vue';

Yi.Vben5.Vue3/apps/web-antd/src/components/tenant-toggle/src/index.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { MessageType } from 'ant-design-vue/es/message';
+import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select';
+
+import type { TenantOption } from '#/api';
+
+import { computed, onMounted, ref, shallowRef, unref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { useTabs } from '@vben/hooks';
+import { $t } from '@vben/locales';
+
+import { message, Select, Spin } from 'ant-design-vue';
+import { storeToRefs } from 'pinia';
+
+import { tenantDynamicClear, tenantDynamicToggle } from '#/api/system/tenant';
+import { useDictStore } from '#/store/dict';
+import { useTenantStore } from '#/store/tenant';
+
+const { hasAccessByRoles } = useAccess();
+
+// 上一次选择的租户
+const lastSelected = ref<string>();
+// 当前选择租户的id
+const selected = ref<string>();
+
+const tenantStore = useTenantStore();
+const { initTenant, setChecked } = tenantStore;
+const { tenantEnable, tenantList } = storeToRefs(tenantStore);
+
+const showToggle = computed<boolean>(() => {
+  // 超级管理员 && 启用租户
+  return hasAccessByRoles(['superadmin']) && unref(tenantEnable);
+});
+
+onMounted(async () => {
+  // 没有超级管理员权限 不会调用接口
+  if (!hasAccessByRoles(['superadmin'])) {
+    return;
+  }
+  await initTenant();
+});
+
+const route = useRoute();
+const { closeOtherTabs, refreshTab, closeAllTabs } = useTabs();
+
+async function close(checked: boolean) {
+  // store设置状态
+  setChecked(checked);
+
+  /**
+   * 切换租户需要回到首页的页面 一般为带id的页面
+   * 其他则直接刷新页面
+   */
+  if (route.meta.requireHomeRedirect) {
+    await closeAllTabs();
+  } else {
+    // 先关闭再刷新 这里不用Promise.all()
+    await closeOtherTabs();
+    await refreshTab();
+  }
+}
+
+const dictStore = useDictStore();
+// 用于清理上一条message
+const messageInstance = shallowRef<MessageType | null>();
+// loading加载中效果
+const loading = ref(false);
+
+/**
+ * 选中租户的处理
+ * @param tenantId tenantId
+ * @param option 当前option
+ */
+const onSelected: SelectHandler = async (tenantId: string, option: any) => {
+  if (unref(lastSelected) === tenantId) {
+    // createMessage.info('选择一致');
+    return;
+  }
+  try {
+    loading.value = true;
+
+    await tenantDynamicToggle(tenantId);
+    lastSelected.value = tenantId;
+
+    // 关闭之前的message 只保留一条
+    messageInstance.value?.();
+    messageInstance.value = message.success(
+      `${$t('component.tenantToggle.switch')} ${option.companyName}`,
+    );
+
+    close(true);
+    // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
+    setTimeout(() => dictStore.resetCache());
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+async function onDeselect() {
+  try {
+    loading.value = true;
+
+    await tenantDynamicClear();
+    // 关闭之前的message 只保留一条
+    messageInstance.value?.();
+    messageInstance.value = message.success($t('component.tenantToggle.reset'));
+
+    lastSelected.value = '';
+    close(false);
+    // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
+    setTimeout(() => dictStore.resetCache());
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * select搜索使用
+ * @param input 输入内容
+ * @param option 选项
+ */
+function filterOption(input: string, option: TenantOption) {
+  return option.companyName.toLowerCase().includes(input.toLowerCase());
+}
+</script>
+
+<template>
+  <div v-if="showToggle" class="mr-[8px] hidden md:block">
+    <Select
+      v-model:value="selected"
+      :disabled="loading"
+      :field-names="{ label: 'companyName', value: 'tenantId' }"
+      :filter-option="filterOption"
+      :options="tenantList"
+      :placeholder="$t('component.tenantToggle.placeholder')"
+      :dropdown-style="{ position: 'fixed', zIndex: 1024 }"
+      allow-clear
+      class="w-60"
+      show-search
+      @deselect="onDeselect"
+      @select="onSelected"
+    >
+      <template v-if="loading" #suffixIcon>
+        <Spin size="small" spinning />
+      </template>
+    </Select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 当选中时 添加border样式
+:deep(.ant-select-selector) {
+  &:has(.ant-select-selection-item) {
+    box-shadow: 0 0 10px hsl(var(--primary));
+  }
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/tinymce/index.ts

@@ -0,0 +1 @@
+export { default as Tinymce } from './src/editor.vue';

Yi.Vben5.Vue3/apps/web-antd/src/components/tinymce/src/editor.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
+import type { Editor as EditorType } from 'tinymce/tinymce';
+
+import type { AxiosProgressEvent, UploadResult } from '#/api';
+
+import { computed, nextTick, ref, shallowRef, useAttrs, watch } from 'vue';
+
+import { preferences, usePreferences } from '@vben/preferences';
+
+import Editor from '@tinymce/tinymce-vue';
+import { Spin } from 'ant-design-vue';
+import { camelCase } from 'lodash-es';
+
+import { uploadApi } from '#/api';
+import {
+  plugins as defaultPlugins,
+  toolbar as defaultToolbar,
+} from '#/components/tinymce/src/tinymce';
+
+type InitOptions = IPropTypes['init'];
+
+interface Props {
+  height?: number | string;
+  options?: Partial<InitOptions>;
+  plugins?: string;
+  toolbar?: string;
+  disabled?: boolean;
+}
+
+defineOptions({
+  name: 'Tinymce',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  height: 400,
+  options: () => ({}),
+  plugins: defaultPlugins,
+  toolbar: defaultToolbar,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  mounted: [];
+}>();
+
+/**
+ * https://www.jianshu.com/p/59a9c3802443
+ * 使用自托管方案（本地）代替cdn  没有key的限制
+ * 注意publicPath要以/结尾
+ */
+const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
+
+const content = defineModel<string>('modelValue', {
+  default: '',
+});
+
+const editorRef = shallowRef<EditorType | null>(null);
+
+const { isDark, locale } = usePreferences();
+const skinName = computed(() => {
+  return isDark.value ? 'oxide-dark' : 'oxide';
+});
+
+const contentCss = computed(() => {
+  return isDark.value ? 'dark' : 'default';
+});
+
+/**
+ * tinymce支持 en zh_CN
+ */
+const langName = computed(() => {
+  const lang = preferences.app.locale.replace('-', '_');
+  if (lang.includes('en_US')) {
+    return 'en';
+  }
+  return 'zh_CN';
+});
+
+/**
+ * 通过v-if来挂载/卸载组件来完成主题切换切换
+ * 语言切换也需要监听 不监听在切换时候会显示原始<textarea>样式
+ */
+const init = ref(true);
+watch([isDark, locale], async () => {
+  if (!editorRef.value) {
+    return;
+  }
+  // 相当于手动unmounted清理 非常重要
+  editorRef.value.destroy();
+  init.value = false;
+  // 放在下一次tick来切换
+  // 需要先加载组件 也就是v-if为true  然后需要拿到editorRef 必须放在setTimeout(相当于onMounted)
+  await nextTick();
+  init.value = true;
+});
+
+// 加载完毕前显示spin
+const loading = ref(true);
+const initOptions = computed((): InitOptions => {
+  const { height, options, plugins, toolbar } = props;
+  return {
+    auto_focus: true,
+    branding: false, // 显示右下角的'使用 TinyMCE 构建'
+    content_css: contentCss.value,
+    content_style:
+      'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
+    contextmenu: 'link image table',
+    default_link_target: '_blank',
+    height,
+    image_advtab: true, // 图片高级选项
+    image_caption: true,
+    importcss_append: true,
+    language: langName.value,
+    link_title: false,
+    menubar: 'file edit view insert format tools table help',
+    noneditable_class: 'mceNonEditable',
+    /**
+     * 允许粘贴图片 默认base64格式
+     * images_upload_handler启用时为上传
+     */
+    paste_data_images: true,
+    images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
+    plugins,
+    quickbars_selection_toolbar:
+      'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+    skin: skinName.value,
+    toolbar,
+    toolbar_mode: 'sliding',
+    ...options,
+    /**
+     * 覆盖默认的base64行为
+     * @param blobInfo
+     * 大坑 不要调用这两个函数  success failure:
+     * 使用resolve/reject代替
+     * (PS: 新版已经没有success failure)
+     */
+    images_upload_handler: (blobInfo, progress) => {
+      return new Promise((resolve, reject) => {
+        const file = blobInfo.blob();
+        // const filename = blobInfo.filename();
+        // 进度条事件
+        const progressEvent: AxiosProgressEvent = (e) => {
+          const percent = Math.trunc((e.loaded / e.total!) * 100);
+          progress(percent);
+        };
+        uploadApi(file, { onUploadProgress: progressEvent })
+          .then((response) => {
+            const { url } = response as unknown as UploadResult;
+            console.log('tinymce上传图片:', url);
+            resolve(url);
+          })
+          .catch((error) => {
+            console.error('tinymce上传图片失败:', error);
+            // eslint-disable-next-line prefer-promise-reject-errors
+            reject({ message: error.message, remove: true });
+          });
+      });
+    },
+    setup: (editor) => {
+      editorRef.value = editor;
+      editor.on('init', () => {
+        emit('mounted');
+        loading.value = false;
+      });
+    },
+  };
+});
+
+const attrs = useAttrs();
+/**
+ * 获取透传的事件 通过v-on绑定
+ * 可绑定的事件 https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#event-binding
+ */
+const events = computed(() => {
+  const onEvents: Record<string, any> = {};
+  for (const key in attrs) {
+    if (key.startsWith('on')) {
+      const eventKey = camelCase(key.split('on')[1]!);
+      onEvents[eventKey] = attrs[key];
+    }
+  }
+  return onEvents;
+});
+</script>
+
+<template>
+  <div class="app-tinymce">
+    <Spin :spinning="loading">
+      <Editor
+        v-if="init"
+        v-model="content"
+        :init="initOptions"
+        :tinymce-script-src="tinymceScriptSrc"
+        :disabled="disabled"
+        license-key="gpl"
+        v-on="events"
+      />
+    </Spin>
+  </div>
+</template>
+
+<style lang="scss">
+// 展开层元素z-index
+$dropdown-index: 2025;
+
+@mixin tinymce-valid-fail($color) {
+  .app-tinymce {
+    // 最外层的tinymce容器
+    .tox-tinymce {
+      border-color: $color;
+    }
+    // focus样式
+    .tox .tox-edit-area::before {
+      border-color: $color;
+      border-right: none;
+      border-left: none;
+    }
+  }
+}
+
+.tox.tox-silver-sink.tox-tinymce-aux {
+  /** 该样式默认为1300的zIndex  */
+  z-index: $dropdown-index;
+}
+
+.tox-fullscreen .tox.tox-tinymce-aux {
+  z-index: $dropdown-index !important;
+}
+
+.app-tinymce {
+  /**
+  隐藏右上角upgrade按钮
+  */
+  .tox-promotion {
+    display: none;
+  }
+
+  /** 保持focus时与primary色一致 */
+  .tox .tox-edit-area::before {
+    border-color: hsl(var(--primary));
+  }
+}
+
+// antd原生表单 校验失败样式
+.ant-form-item:has(.ant-form-item-explain-error) {
+  $error-color: #ff3860;
+
+  @include tinymce-valid-fail($error-color);
+}
+
+// useVbenForm 校验失败样式
+.form-valid-error {
+  $error-color: hsl(var(--destructive));
+
+  @include tinymce-valid-fail($error-color);
+}
+
+// 全屏下样式处理 不去掉transform位置会异常
+div[role='dialog']:has(.tox.tox-tinymce.tox-fullscreen) {
+  transform: none !important;
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/tinymce/src/tinymce.ts

@@ -0,0 +1,11 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+// quickbars 快捷栏
+export const plugins =
+  'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion';
+
+export const toolbar =
+  'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl';

Yi.Vben5.Vue3/apps/web-antd/src/components/tree/index.ts

@@ -0,0 +1,2 @@
+export { default as MenuSelectTable } from './src/menu-select-table.vue';
+export { default as TreeSelectPanel } from './src/tree-select-panel.vue';

Yi.Vben5.Vue3/apps/web-antd/src/components/tree/src/data.tsx

@@ -0,0 +1,98 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { ID } from '#/api/common';
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { h, markRaw } from 'vue';
+
+import { FolderIcon, MenuIcon, OkButtonIcon, VbenIcon } from '@vben/icons';
+
+export interface Permission {
+  checked: boolean;
+  id: ID;
+  label: string;
+}
+
+export interface MenuPermissionOption extends MenuOption {
+  permissions: Permission[];
+}
+
+// （M目录 C菜单 F按钮）
+// 支持多种格式的菜单类型值
+const menuTypes: Record<string, { icon: ReturnType<typeof markRaw>; value: string }> = {
+  c: { icon: markRaw(MenuIcon), value: '菜单' },
+  menu: { icon: markRaw(MenuIcon), value: '菜单' },
+  Menu: { icon: markRaw(MenuIcon), value: '菜单' },
+  catalog: { icon: markRaw(FolderIcon), value: '目录' },
+  directory: { icon: markRaw(FolderIcon), value: '目录' },
+  folder: { icon: markRaw(FolderIcon), value: '目录' },
+  m: { icon: markRaw(FolderIcon), value: '目录' },
+  catalogue: { icon: markRaw(FolderIcon), value: '目录' },
+  Catalogue: { icon: markRaw(FolderIcon), value: '目录' },
+  component: { icon: markRaw(OkButtonIcon), value: '按钮' },
+  Component: { icon: markRaw(OkButtonIcon), value: '按钮' },
+  f: { icon: markRaw(OkButtonIcon), value: '按钮' },
+  button: { icon: markRaw(OkButtonIcon), value: '按钮' },
+};
+
+export const nodeOptions = [
+  { label: '节点关联', value: true },
+  { label: '节点独立', value: false },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    title: '菜单名称',
+    field: 'menuName',
+    treeNode: true,
+    headerAlign: 'left',
+    align: 'left',
+    width: 230,
+  },
+  {
+    title: '图标',
+    field: 'menuIcon',
+    width: 80,
+    slots: {
+      default: ({ row }) => {
+        if (row?.menuIcon === '#' || !row?.menuIcon) {
+          return '';
+        }
+        return (
+          <span class={'flex justify-center'}>
+            <VbenIcon icon={row.menuIcon} />
+          </span>
+        );
+      },
+    },
+  },
+  {
+    title: '类型',
+    field: 'menuType',
+    width: 80,
+    slots: {
+      default: ({ row }) => {
+        const typeKey = `${row.menuType ?? ''}`.toString().trim().toLowerCase();
+        const current = menuTypes[typeKey];
+        if (!current) {
+          return '未知';
+        }
+        return (
+          <span class="flex items-center justify-center gap-1">
+            {h(current.icon, { class: 'size-[18px]' })}
+            <span>{current.value}</span>
+          </span>
+        );
+      },
+    },
+  },
+  {
+    title: '权限标识',
+    field: 'permissions',
+    headerAlign: 'left',
+    align: 'left',
+    slots: {
+      default: 'permissions',
+    },
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/components/tree/src/helper.tsx

@@ -0,0 +1,206 @@
+import type { MenuPermissionOption } from './data';
+
+import type { useVbenVxeGrid } from '#/adapter/vxe-table';
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { eachTree, treeToList } from '@vben/utils';
+
+import { notification } from 'ant-design-vue';
+import { difference, isEmpty, isUndefined } from 'lodash-es';
+
+/**
+ * 权限列设置是否全选
+ * @param record 行记录
+ * @param checked 是否选中
+ */
+export function setPermissionsChecked(
+  record: MenuPermissionOption,
+  checked: boolean,
+) {
+  if (record?.permissions?.length > 0) {
+    // 全部设置为选中
+    record.permissions.forEach((permission) => {
+      permission.checked = checked;
+    });
+  }
+}
+
+/**
+ * 设置当前行 & 所有子节点选中状态
+ * @param record 行
+ * @param checked 是否选中
+ */
+export function rowAndChildrenChecked(
+  record: MenuPermissionOption,
+  checked: boolean,
+) {
+  // 当前行选中
+  setPermissionsChecked(record, checked);
+  // 所有子节点选中
+  record?.children?.forEach?.((permission) => {
+    rowAndChildrenChecked(permission as MenuPermissionOption, checked);
+  });
+}
+
+/**
+ * void方法 会直接修改原始数据
+ * 将树结构转为 tree+permissions结构
+ * @param menus 后台返回的menu
+ */
+export function menusWithPermissions(menus: MenuOption[]) {
+  eachTree(menus, (item: MenuPermissionOption) => {
+    validateMenuTree(item);
+    if (item.children && item.children.length > 0) {
+      /**
+       * 所有为按钮的节点提取出来
+       * 需要注意 这里需要过滤目录下直接是按钮的情况
+       * 将按钮往children添加而非加到permissions
+       */
+      const permissions = item.children.filter(
+        (child: MenuOption) =>
+          isComponentType(child.menuType) && !isCatalogueType(item.menuType),
+      );
+      // 取差集
+      const diffCollection = difference(item.children, permissions);
+      // 更新后的children  即去除按钮
+      item.children = diffCollection;
+
+      // permissions作为字段添加到item
+      const permissionsArr = permissions.map((permission) => {
+        return {
+          id: permission.id,
+          label: permission.menuName,
+          checked: false,
+        };
+      });
+      item.permissions = permissionsArr;
+    }
+  });
+}
+
+/**
+ * 设置表格选中
+ * @param checkedKeys 选中的keys
+ * @param menus 菜单 转换后的菜单
+ * @param tableApi api
+ * @param association 是否节点关联
+ */
+export function setTableChecked(
+  checkedKeys: (number | string)[],
+  menus: MenuPermissionOption[],
+  tableApi: ReturnType<typeof useVbenVxeGrid>['1'],
+  association: boolean,
+) {
+  // tree转list
+  const menuList: MenuPermissionOption[] = treeToList(menus);
+  // 拿到勾选的行数据
+  let checkedRows = menuList.filter((item) => checkedKeys.includes(item.id));
+
+  /**
+   * 节点独立切换到节点关联 只需要最末尾的数据 即children为空
+   */
+  if (!association) {
+    checkedRows = checkedRows.filter(
+      (item) => isUndefined(item.children) || isEmpty(item.children),
+    );
+  }
+
+  // 设置行选中 & permissions选中
+  checkedRows.forEach((item) => {
+    tableApi.grid.setCheckboxRow(item, true);
+    if (item?.permissions?.length > 0) {
+      item.permissions.forEach((permission) => {
+        if (checkedKeys.includes(permission.id)) {
+          permission.checked = true;
+        }
+      });
+    }
+  });
+
+  /**
+   * 节点独立切换到节点关联
+   * 勾选后还需要过滤权限没有任何勾选的情况 这时候取消行的勾选
+   */
+  if (!association) {
+    const emptyRows = checkedRows.filter((item) => {
+      if (isUndefined(item.permissions) || isEmpty(item.permissions)) {
+        return false;
+      }
+      return item.permissions.every(
+        (permission) => permission.checked === false,
+      );
+    });
+    // 设置为不选中
+    tableApi.grid.setCheckboxRow(emptyRows, false);
+  }
+}
+
+/**
+ * 判断是否为菜单类型（Menu/C）
+ */
+function isMenuType(menuType: string): boolean {
+  const type = menuType?.toLowerCase();
+  return type === 'c' || type === 'menu';
+}
+
+/**
+ * 判断是否为目录类型（Catalogue/M）
+ */
+function isCatalogueType(menuType: string): boolean {
+  const type = menuType?.toLowerCase();
+  return type === 'm' || type === 'catalogue' || type === 'catalog' || type === 'directory' || type === 'folder';
+}
+
+/**
+ * 判断是否为按钮类型（Component/F）
+ */
+function isComponentType(menuType: string): boolean {
+  const type = menuType?.toLowerCase();
+  return type === 'f' || type === 'component' || type === 'button';
+}
+
+/**
+ * 校验是否符合规范 给出warning提示
+ *
+ * 不符合规范
+ * 比如: 菜单下放目录 菜单下放菜单
+ * 比如: 按钮下放目录 按钮下放菜单 按钮下放按钮
+ * @param menu menu
+ */
+function validateMenuTree(menu: MenuOption) {
+  // 菜单下不能放目录/菜单
+  if (isMenuType(menu.menuType)) {
+    menu.children?.forEach?.((item) => {
+      if (isMenuType(item.menuType) || isCatalogueType(item.menuType)) {
+        const description = `错误用法: [${menu.menuName} - 菜单]下不能放 目录/菜单 -> [${item.menuName}]`;
+        console.warn(description);
+        notification.warning({
+          message: '提示',
+          description,
+          duration: 0,
+        });
+      }
+    });
+  }
+  // 按钮为最末级 不能再放置
+  if (isComponentType(menu.menuType)) {
+    /**
+     * 其实可以直接判断length 这里为了更准确知道menuName 采用遍历的形式
+     */
+    menu.children?.forEach?.((item) => {
+      if (
+        isMenuType(item.menuType) ||
+        isComponentType(item.menuType) ||
+        isCatalogueType(item.menuType)
+      ) {
+        const description = `错误用法: [${menu.menuName} - 按钮]下不能放置'目录/菜单/按钮' -> [${item.menuName}]`;
+        console.warn(description);
+        notification.warning({
+          message: '提示',
+          description,
+          duration: 0,
+        });
+      }
+    });
+  }
+}

Yi.Vben5.Vue3/apps/web-antd/src/components/tree/src/hook.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { TourProps } from 'ant-design-vue';
+
+import { defineComponent, ref } from 'vue';
+
+import { useLocalStorage } from '@vueuse/core';
+import { Tour } from 'ant-design-vue';
+
+/**
+ * 全屏引导
+ * @returns value
+ */
+export function useFullScreenGuide() {
+  const open = ref(false);
+  /**
+   * 是否已读 只显示一次
+   */
+  const read = useLocalStorage('menu_select_fullscreen_read', false);
+
+  function openGuide() {
+    if (!read.value) {
+      open.value = true;
+    }
+  }
+
+  function closeGuide() {
+    open.value = false;
+    read.value = true;
+  }
+
+  const steps: TourProps['steps'] = [
+    {
+      title: '提示',
+      description: '点击这里可以全屏',
+      target: () =>
+        document.querySelector(
+          'div#menu-select-table .vxe-tools--operate > button[title="全屏"]',
+        )!,
+    },
+  ];
+
+  const FullScreenGuide = defineComponent({
+    name: 'FullScreenGuide',
+    inheritAttrs: false,
+    setup() {
+      return () => (
+        <Tour
+          onClose={closeGuide}
+          open={open.value}
+          steps={steps}
+          zIndex={9999}
+        />
+      );
+    },
+  });
+
+  return {
+    FullScreenGuide,
+    openGuide,
+    closeGuide,
+  };
+}

Yi.Vben5.Vue3/apps/web-antd/src/components/tree/src/menu-select-table.vue

@@ -0,0 +1,411 @@
+<!--
+不兼容也不会兼容一些错误用法
+比如: 菜单下放目录 菜单下放菜单
+比如: 按钮下放目录 按钮下放菜单 按钮下放按钮
+-->
+<script setup lang="tsx">
+import type { RadioChangeEvent } from 'ant-design-vue';
+
+import type { MenuPermissionOption } from './data';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+
+import { cloneDeep, findGroupParentIds } from '@vben/utils';
+
+import { Alert, Checkbox, RadioGroup, Space } from 'ant-design-vue';
+import { uniq } from 'lodash-es';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { columns, nodeOptions } from './data';
+import {
+  menusWithPermissions,
+  rowAndChildrenChecked,
+  setPermissionsChecked,
+  setTableChecked,
+} from './helper';
+import { useFullScreenGuide } from './hook';
+
+defineOptions({
+  name: 'MenuSelectTable',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    checkedKeys: (number | string)[];
+    defaultExpandAll?: boolean;
+    menus: MenuOption[];
+  }>(),
+  {
+    /**
+     * 是否默认展开全部
+     */
+    defaultExpandAll: true,
+    /**
+     * 注意这里不是双向绑定 需要调用getCheckedKeys实例方法来获取真正选中的节点
+     */
+    checkedKeys: () => [],
+  },
+);
+
+/**
+ * 是否节点关联
+ */
+const association = defineModel<boolean>('association', {
+  default: true,
+});
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // checkbox显示的字段
+    labelField: 'menuName',
+    // 是否严格模式 即节点不关联
+    checkStrictly: !association.value,
+  },
+  size: 'small',
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    enabled: false,
+  },
+  toolbarConfig: {
+    refresh: false,
+    custom: false,
+  },
+  rowConfig: {
+    isHover: false,
+    isCurrent: false,
+    keyField: 'id',
+  },
+  /**
+   * 开启虚拟滚动
+   * 数据量小可以选择关闭
+   * 如果遇到样式问题(空白、错位 滚动等)可以选择关闭虚拟滚动
+   */
+  scrollY: {
+    enabled: true,
+    gt: 0,
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'id',
+    transform: false,
+  },
+  // 溢出换行显示
+  showOverflow: false,
+};
+
+/**
+ * 用于界面显示选中的数量
+ */
+const checkedNum = ref(0);
+/**
+ * 更新选中的数量
+ */
+function updateCheckedNumber() {
+  checkedNum.value = getCheckedKeys().length;
+}
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+  gridEvents: {
+    // 勾选事件
+    checkboxChange: (params) => {
+      // 选中还是取消选中
+      const checked = params.checked;
+      // 行
+      const record = params.row;
+      if (association.value) {
+        // 节点关联
+        // 设置所有子节点选中状态
+        rowAndChildrenChecked(record, checked);
+      } else {
+        // 节点独立
+        // 点行会勾选/取消全部权限  点权限不会勾选行
+        setPermissionsChecked(record, checked);
+      }
+      updateCheckedNumber();
+    },
+    // 全选事件
+    checkboxAll: (params) => {
+      const records = params.$grid.getData();
+      records.forEach((item) => {
+        rowAndChildrenChecked(item, params.checked);
+      });
+      updateCheckedNumber();
+    },
+  },
+});
+
+/**
+ * 设置表格选中
+ * @param menus menu
+ * @param keys 选中的key
+ * @param triggerOnchange 节点独立情况 不需要触发onChange(false)
+ */
+function setCheckedByKeys(
+  menus: MenuPermissionOption[],
+  keys: (number | string)[],
+  triggerOnchange: boolean,
+) {
+  menus.forEach((item) => {
+    // 设置行选中
+    if (keys.includes(item.id)) {
+      tableApi.grid.setCheckboxRow(item, true);
+    }
+    // 设置权限columns选中
+    if (item.permissions && item.permissions.length > 0) {
+      // 遍历 设置勾选
+      item.permissions.forEach((permission) => {
+        if (keys.includes(permission.id)) {
+          permission.checked = true;
+          // 手动触发onChange来选中 节点独立情况不需要处理
+          triggerOnchange && handlePermissionChange(item);
+        }
+      });
+    }
+    // 设置children选中
+    if (item.children && item.children.length > 0) {
+      setCheckedByKeys(item.children as any, keys, triggerOnchange);
+    }
+  });
+}
+
+const { FullScreenGuide, openGuide } = useFullScreenGuide();
+onMounted(() => {
+  /**
+   * 加载表格数据 转为指定结构
+   */
+  watch(
+    () => props.menus,
+    async (menus) => {
+      const clonedMenus = cloneDeep(menus);
+      menusWithPermissions(clonedMenus);
+      // console.log(clonedMenus);
+      await tableApi.grid.loadData(clonedMenus);
+      // 展开全部 默认true
+      if (props.defaultExpandAll) {
+        await nextTick();
+        setExpandOrCollapse(true);
+      }
+    },
+  );
+
+  /**
+   * 节点关联变动 更新表格勾选效果
+   */
+  watch(association, (value) => {
+    tableApi.setGridOptions({
+      checkboxConfig: {
+        checkStrictly: !value,
+      },
+    });
+  });
+
+  /**
+   * checkedKeys依赖menus
+   * 要注意加载顺序
+   * !!!要在外部确保menus先加载!!!
+   */
+  watch(
+    () => props.checkedKeys,
+    (value) => {
+      const allCheckedKeys = uniq([...value]);
+      // 获取表格data 如果checkedKeys在menus的watch之前触发 这里会拿到空 导致勾选异常
+      const records = tableApi.grid.getData();
+      setCheckedByKeys(records, allCheckedKeys, association.value);
+      updateCheckedNumber();
+
+      // 全屏引导
+      setTimeout(openGuide, 1000);
+    },
+  );
+});
+
+// 缓存上次(切换节点关系前)选中的keys
+const lastCheckedKeys = shallowRef<(number | string)[]>([]);
+/**
+ * 节点关联变动 事件
+ */
+async function handleAssociationChange(e: RadioChangeEvent) {
+  lastCheckedKeys.value = getCheckedKeys();
+  // 清空全部permissions选中
+  const records = tableApi.grid.getData();
+  records.forEach((item) => {
+    rowAndChildrenChecked(item, false);
+  });
+  // 需要清空全部勾选
+  await tableApi.grid.clearCheckboxRow();
+  // 滚动到顶部
+  await tableApi.grid.scrollTo(0, 0);
+
+  // 节点切换 不同的选中
+  setTableChecked(lastCheckedKeys.value, records, tableApi, !e.target.value);
+
+  updateCheckedNumber();
+}
+
+/**
+ * 全部展开/折叠
+ * @param expand 是否展开
+ */
+function setExpandOrCollapse(expand: boolean) {
+  tableApi.grid?.setAllTreeExpand(expand);
+}
+
+/**
+ * 权限列表 checkbox勾选的事件
+ * @param row 行
+ */
+function handlePermissionChange(row: any) {
+  // 节点关联
+  if (association.value) {
+    const checkedPermissions = row.permissions.filter(
+      (item: any) => item.checked === true,
+    );
+    // 有一条选中 则整个行选中
+    if (checkedPermissions.length > 0) {
+      tableApi.grid.setCheckboxRow(row, true);
+    }
+    // 无任何选中 则整个行不选中
+    if (checkedPermissions.length === 0) {
+      tableApi.grid.setCheckboxRow(row, false);
+    }
+  }
+  // 节点独立 不处理
+  updateCheckedNumber();
+}
+
+/**
+ * 获取勾选的key
+ * @param records 行记录列表
+ * @param addCurrent 是否添加当前行的id
+ */
+function getKeys(records: MenuPermissionOption[], addCurrent: boolean) {
+  const allKeys: (number | string)[] = [];
+  records.forEach((item) => {
+    // 处理children
+    if (item.children && item.children.length > 0) {
+      const keys = getKeys(item.children as MenuPermissionOption[], addCurrent);
+      allKeys.push(...keys);
+    } else {
+      // 当前行的id
+      addCurrent && allKeys.push(item.id);
+      // 当前行权限id 获取已经选中的
+      if (item.permissions && item.permissions.length > 0) {
+        const ids = item.permissions
+          .filter((m) => m.checked === true)
+          .map((m) => m.id);
+        allKeys.push(...ids);
+      }
+    }
+  });
+  return uniq(allKeys);
+}
+
+/**
+ * 获取选中的key
+ */
+function getCheckedKeys() {
+  // 节点关联
+  if (association.value) {
+    const records = tableApi?.grid?.getCheckboxRecords?.(true) ?? [];
+    // 子节点
+    const nodeKeys = getKeys(records, true);
+    // 所有父节点
+    // Note: findGroupParentIds is typed for number[] but works with strings at runtime
+    const parentIds = findGroupParentIds(
+      props.menus,
+      nodeKeys as any,
+    ) as (string | number)[];
+    // 拼接 去重
+    const realKeys = uniq([...parentIds, ...nodeKeys]);
+    return realKeys;
+  }
+  // 节点独立
+
+  // 勾选的行
+  const records = tableApi?.grid?.getCheckboxRecords?.(true) ?? [];
+  // 全部数据 用于获取permissions
+  const allRecords = tableApi?.grid?.getData?.() ?? [];
+  // 表格已经选中的行ids
+  const checkedIds = records.map((item) => item.id);
+  // 所有已经勾选权限的ids
+  const permissionIds = getKeys(allRecords, false);
+  // 合并 去重
+  const allIds = uniq([...checkedIds, ...permissionIds]);
+  return allIds;
+}
+
+/**
+ * 暴露给外部使用 获取已选中的key
+ */
+defineExpose({
+  getCheckedKeys,
+});
+</script>
+
+<template>
+  <div class="flex h-full flex-col" id="menu-select-table">
+    <BasicTable>
+      <template #toolbar-actions>
+        <RadioGroup
+          v-model:value="association"
+          :options="nodeOptions"
+          button-style="solid"
+          option-type="button"
+          @change="handleAssociationChange"
+        />
+        <Alert class="mx-2" type="info">
+          <template #message>
+            <div>
+              已选中
+              <span class="text-primary mx-1 font-semibold">
+                {{ checkedNum }}
+              </span>
+              个节点
+            </div>
+          </template>
+        </Alert>
+      </template>
+      <template #toolbar-tools>
+        <Space>
+          <a-button @click="setExpandOrCollapse(false)">
+            {{ $t('pages.common.collapse') }}
+          </a-button>
+          <a-button @click="setExpandOrCollapse(true)">
+            {{ $t('pages.common.expand') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #permissions="{ row }">
+        <div class="flex flex-wrap gap-x-3 gap-y-1">
+          <Checkbox
+            v-for="permission in row.permissions"
+            :key="permission.id"
+            v-model:checked="permission.checked"
+            @change="() => handlePermissionChange(row)"
+          >
+            {{ permission.label }}
+          </Checkbox>
+        </div>
+      </template>
+    </BasicTable>
+    <!-- 全屏引导 -->
+    <FullScreenGuide />
+  </div>
+</template>
+
+<style scoped>
+:deep(.ant-alert) {
+  padding: 4px 8px;
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/tree/src/tree-select-panel.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+import type { DataNode } from 'ant-design-vue/es/tree';
+import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
+
+import type { PropType, SetupContext } from 'vue';
+
+import { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue';
+
+import { findGroupParentIds, treeToList } from '@vben/utils';
+
+import { Checkbox, Tree } from 'ant-design-vue';
+import { uniq } from 'lodash-es';
+
+/** 需要禁止透传 */
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  checkStrictly: {
+    default: true,
+    type: Boolean,
+  },
+  expandAllOnInit: {
+    default: false,
+    type: Boolean,
+  },
+  fieldNames: {
+    default: () => ({ key: 'id', title: 'label' }),
+    type: Object as PropType<{ key: string; title: string }>,
+  },
+  /** 点击节点关联/独立时 清空已勾选的节点 */
+  resetOnStrictlyChange: {
+    default: true,
+    type: Boolean,
+  },
+  treeData: {
+    default: () => [],
+    type: Array as PropType<DataNode[]>,
+  },
+});
+const emit = defineEmits<{ checkStrictlyChange: [boolean] }>();
+
+const expandStatus = ref(false);
+const selectAllStatus = ref(false);
+
+/**
+ * 后台的这个字段跟antd/ele是反的
+ * 组件库这个字段代表不关联
+ * 后台这个代表关联
+ */
+const innerCheckedStrictly = computed(() => {
+  return !props.checkStrictly;
+});
+
+const associationText = computed(() => {
+  return props.checkStrictly ? '父子节点关联' : '父子节点独立';
+});
+
+/**
+ * 这个只用于界面显示
+ * 关联情况下 只会有最末尾的节点被选中
+ */
+const checkedKeys = defineModel('value', {
+  default: () => [],
+  type: Array as PropType<(number | string)[]>,
+});
+// 所有节点的ID
+const allKeys = computed(() => {
+  const idField = props.fieldNames.key;
+  return treeToList(props.treeData).map((item: any) => item[idField]);
+});
+
+/** 已经选择的所有节点  包括子/父节点 用于提交 */
+const checkedRealKeys = ref<(number | string)[]>([]);
+
+/**
+ * 取第一次的menuTree id 设置到checkedMenuKeys
+ * 主要为了解决没有任何修改 直接点击保存的情况
+ *
+ * length为0情况(即新增时候没有勾选节点) 勾选这里会延迟触发 节点会拼接上父节点 导致ID重复
+ */
+const stop = watch([checkedKeys, () => props.treeData], () => {
+  if (
+    props.checkStrictly &&
+    checkedKeys.value.length > 0 &&
+    props.treeData.length > 0
+  ) {
+    /** 找到父节点 添加上 */
+    // Note: findGroupParentIds is typed for number[] but works with strings at runtime
+    const parentIds = findGroupParentIds(
+      props.treeData,
+      checkedKeys.value as any,
+      { id: props.fieldNames.key },
+    ) as (string | number)[];
+    /**
+     * uniq 解决上面的id重复问题
+     */
+    checkedRealKeys.value = uniq([...parentIds, ...checkedKeys.value]);
+    stop();
+  }
+  if (!props.checkStrictly && checkedKeys.value.length > 0) {
+    /** 节点独立 这里是全部的节点 */
+    checkedRealKeys.value = checkedKeys.value;
+    stop();
+  }
+});
+
+/**
+ *
+ * @param checkedStateKeys 已经选中的子节点的ID
+ * @param info info.halfCheckedKeys为父节点的ID
+ */
+type CheckedState<T = number | string> =
+  | T[]
+  | { checked: T[]; halfChecked: T[] };
+function handleChecked(checkedStateKeys: CheckedState, info: CheckInfo) {
+  // 数组的话为节点关联
+  if (Array.isArray(checkedStateKeys)) {
+    const halfCheckedKeys = (info.halfCheckedKeys || []) as (number | string)[];
+    checkedRealKeys.value = [...halfCheckedKeys, ...checkedStateKeys];
+  } else {
+    checkedRealKeys.value = [...checkedStateKeys.checked];
+    // fix: Invalid prop: type check failed for prop "value". Expected Array, got Object
+    checkedKeys.value = [...checkedStateKeys.checked];
+  }
+}
+
+function handleExpandChange(e: CheckboxChangeEvent) {
+  // 这个用于展示
+  checkedKeys.value = e.target.checked ? allKeys.value : [];
+  // 这个用于提交
+  checkedRealKeys.value = e.target.checked ? allKeys.value : [];
+}
+
+const expandedKeys = ref<string[]>([]);
+function handleExpandOrCollapseAll(e: CheckboxChangeEvent) {
+  const expand = e.target.checked;
+  expandedKeys.value = expand ? allKeys.value : [];
+}
+
+function handleCheckStrictlyChange(e: CheckboxChangeEvent) {
+  emit('checkStrictlyChange', e.target.checked);
+  if (props.resetOnStrictlyChange) {
+    checkedKeys.value = [];
+    checkedRealKeys.value = [];
+  }
+}
+
+/**
+ * 暴露方法来获取用于提交的全部节点
+ * uniq去重(保险方案)
+ */
+defineExpose({
+  getCheckedKeys: () => uniq(checkedRealKeys.value),
+});
+
+onMounted(async () => {
+  if (props.expandAllOnInit) {
+    await nextTick();
+    expandedKeys.value = allKeys.value;
+  }
+});
+
+const slots = useSlots() as SetupContext['slots'];
+</script>
+
+<template>
+  <div class="bg-background w-full rounded-lg border-[1px] p-[12px]">
+    <div class="flex items-center justify-between gap-2 border-b-[1px] pb-2">
+      <div>
+        <span>节点状态: </span>
+        <span :class="[props.checkStrictly ? 'text-primary' : 'text-red-500']">
+          {{ associationText }}
+        </span>
+      </div>
+      <div>
+        已选中
+        <span class="text-primary mx-1 font-semibold">
+          {{ checkedRealKeys.length }}
+        </span>
+        个节点
+      </div>
+    </div>
+    <div
+      class="flex flex-wrap items-center justify-between border-b-[1px] py-2"
+    >
+      <Checkbox
+        v-model:checked="expandStatus"
+        @change="handleExpandOrCollapseAll"
+      >
+        展开/折叠全部
+      </Checkbox>
+      <Checkbox v-model:checked="selectAllStatus" @change="handleExpandChange">
+        全选/取消全选
+      </Checkbox>
+      <Checkbox :checked="checkStrictly" @change="handleCheckStrictlyChange">
+        父子节点关联
+      </Checkbox>
+    </div>
+    <div class="py-2">
+      <Tree
+        v-if="treeData.length > 0"
+        v-model:check-strictly="innerCheckedStrictly"
+        v-model:checked-keys="checkedKeys"
+        v-model:expanded-keys="expandedKeys"
+        :checkable="true"
+        :field-names="fieldNames"
+        :selectable="false"
+        :tree-data="treeData"
+        @check="handleChecked"
+      >
+        <template
+          v-for="slotName in Object.keys(slots)"
+          :key="slotName"
+          #[slotName]="data"
+        >
+          <slot :name="slotName" v-bind="data ?? {}"></slot>
+        </template>
+      </Tree>
+    </div>
+  </div>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/components/upload-old/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @description: 旧版文件上传组件 使用FileUpload代替
+ */
+export { default as FileUploadOld } from './src/file-upload.vue';
+/**
+ * @description: 旧版图片上传组件 使用ImageUpload代替
+ */
+export { default as ImageUploadOld } from './src/image-upload.vue';

Yi.Vben5.Vue3/apps/web-antd/src/components/upload-old/src/file-upload.vue

@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+
+import type { AxiosProgressEvent, UploadApi } from '#/api';
+
+import { ref, toRefs, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { message, Upload } from 'ant-design-vue';
+import { isArray, isFunction, isObject, isString } from 'lodash-es';
+
+import { uploadApi } from '#/api';
+
+import { checkFileType } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUploadType } from './use-upload';
+
+defineOptions({ name: 'FileUpload', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 建议使用拓展名(不带.)
+     * 或者文件头 image/png等(测试判断不准确)  不支持image/*类似的写法
+     * 需自行改造 ./helper/checkFileType方法
+     */
+    accept?: string[];
+    api?: UploadApi;
+    disabled?: boolean;
+    helpText?: string;
+    // 最大数量的文件，Infinity不限制
+    maxNumber?: number;
+    // 文件最大多少MB
+    maxSize?: number;
+    // 是否支持多选
+    multiple?: boolean;
+    // support xxx.xxx.xx
+    // 返回的字段 默认url
+    resultField?: 'fileName' | 'ossId' | 'url' | string;
+    /**
+     * 是否显示下面的描述
+     */
+    showDescription?: boolean;
+    value?: string[];
+  }>(),
+  {
+    value: () => [],
+    disabled: false,
+    helpText: '',
+    maxSize: 2,
+    maxNumber: 1,
+    accept: () => [],
+    multiple: false,
+    api: () => uploadApi,
+    resultField: '',
+    showDescription: true,
+  },
+);
+const emit = defineEmits(['change', 'update:value', 'delete']);
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+
+const fileList = ref<UploadProps['fileList']>([]);
+const isLtMsg = ref<boolean>(true);
+const isActMsg = ref<boolean>(true);
+const isFirstRender = ref<boolean>(true);
+
+watch(
+  () => props.value,
+  (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string[] = [];
+    if (v) {
+      if (isArray(v)) {
+        value = v;
+      } else {
+        value.push(v);
+      }
+      fileList.value = value.map((item, i) => {
+        if (item && isString(item)) {
+          return {
+            uid: `${-i}`,
+            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+            status: 'done',
+            url: item,
+          };
+        } else if (item && isObject(item)) {
+          return item;
+        }
+        return null;
+      }) as UploadProps['fileList'];
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+const handleRemove = async (file: UploadFile) => {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+};
+
+const beforeUpload = async (file: File) => {
+  const { maxSize, accept } = props;
+  const isAct = await checkFileType(file, accept);
+  if (!isAct) {
+    message.error($t('component.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+  }
+  const isLt = file.size / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+  }
+  return (isAct && !isLt) || Upload.LIST_IGNORE;
+};
+
+async function customRequest(info: UploadRequestOption<any>) {
+  const { api } = props;
+  if (!api || !isFunction(api)) {
+    console.warn('upload api must exist and be a function');
+    return;
+  }
+  try {
+    // 进度条事件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await api?.(info.file as File, {
+      onUploadProgress: progressEvent,
+    });
+    /**
+     * 由getValue处理 传对象过去
+     * 直接传string(id)会被转为Number
+     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
+     */
+    info.onSuccess!(res);
+    message.success($t('component.upload.uploadSuccess'));
+    // 获取
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+  } catch (error: any) {
+    console.error(error);
+    info.onError!(error);
+  }
+}
+
+function getValue() {
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.DONE)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response?.[props.resultField];
+      }
+      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
+      if (item?.url) {
+        return item.url;
+      }
+      // 注意这里取的key为 url
+      return item?.response?.url;
+    });
+  return list;
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :custom-request="customRequest"
+      :disabled="disabled"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      list-type="text"
+      :progress="{ showInfo: true }"
+      @remove="handleRemove"
+    >
+      <div v-if="fileList && fileList.length < maxNumber">
+        <a-button>
+          <UploadOutlined />
+          {{ $t('component.upload.upload') }}
+        </a-button>
+      </div>
+      <div v-if="showDescription" class="mt-2 flex flex-wrap items-center">
+        请上传不超过
+        <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+        的
+        <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+        格式文件
+      </div>
+    </Upload>
+  </div>
+</template>
+
+<style>
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/upload-old/src/helper.ts

@@ -0,0 +1,51 @@
+import { fileTypeFromBlob } from '@vben/utils';
+
+/**
+ * 不支持txt文件 @see https://github.com/sindresorhus/file-type/issues/55
+ * 需要自行修改
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
+export async function checkFileType(file: File, accepts: string[]) {
+  if (!accepts || accepts?.length === 0) {
+    return true;
+  }
+  console.log(file);
+  const fileType = await fileTypeFromBlob(file);
+  if (!fileType) {
+    console.error('无法获取文件类型');
+    return false;
+  }
+  console.log('文件类型', fileType);
+  // 是否文件拓展名/文件头任意有一个匹配
+  return accepts.includes(fileType.ext) || accepts.includes(fileType.mime);
+}
+
+/**
+ * 默认图片类型
+ */
+export const defaultImageAccept = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+/**
+ * 判断文件类型是否符合要求
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
+export async function checkImageFileType(file: File, accepts: string[]) {
+  // 空的accepts 使用默认规则
+  if (!accepts || accepts.length === 0) {
+    accepts = defaultImageAccept;
+  }
+  const fileType = await fileTypeFromBlob(file);
+  if (!fileType) {
+    console.error('无法获取文件类型');
+    return false;
+  }
+  console.log('文件类型', fileType);
+  // 是否文件拓展名/文件头任意有一个匹配
+  if (accepts.includes(fileType.ext) || accepts.includes(fileType.mime)) {
+    return true;
+  }
+  return false;
+}

Yi.Vben5.Vue3/apps/web-antd/src/components/upload-old/src/image-upload.vue

@@ -0,0 +1,323 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+
+import type { AxiosProgressEvent, UploadApi } from '#/api';
+
+import { ref, toRefs, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { PlusOutlined } from '@ant-design/icons-vue';
+import { message, Modal, Upload } from 'ant-design-vue';
+import { isArray, isFunction, isObject, isString, uniqueId } from 'lodash-es';
+
+import { uploadApi } from '#/api';
+import { ossInfo } from '#/api/system/oss';
+
+import { checkImageFileType, defaultImageAccept } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUploadType } from './use-upload';
+
+defineOptions({ name: 'ImageUpload', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+     */
+    accept?: string[];
+    api?: UploadApi;
+    disabled?: boolean;
+    helpText?: string;
+    // eslint-disable-next-line no-use-before-define
+    listType?: ListType;
+    // 最大数量的文件，Infinity不限制
+    maxNumber?: number;
+    // 文件最大多少MB
+    maxSize?: number;
+    // 是否支持多选
+    multiple?: boolean;
+    // support xxx.xxx.xx
+    // 返回的字段 默认url
+    resultField?: 'fileName' | 'ossId' | 'url';
+    /**
+     * 是否显示下面的描述
+     */
+    showDescription?: boolean;
+    value?: string | string[];
+  }>(),
+  {
+    value: () => [],
+    disabled: false,
+    listType: 'picture-card',
+    helpText: '',
+    maxSize: 2,
+    maxNumber: 1,
+    accept: () => defaultImageAccept,
+    multiple: false,
+    api: () => uploadApi,
+    resultField: 'url',
+    showDescription: true,
+  },
+);
+const emit = defineEmits(['change', 'update:value', 'delete']);
+type ListType = 'picture' | 'picture-card' | 'text';
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+const previewOpen = ref<boolean>(false);
+const previewImage = ref<string>('');
+const previewTitle = ref<string>('');
+
+const fileList = ref<UploadProps['fileList']>([]);
+const isLtMsg = ref<boolean>(true);
+const isActMsg = ref<boolean>(true);
+const isFirstRender = ref<boolean>(true);
+
+watch(
+  () => props.value,
+  async (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string | string[] = [];
+    if (v) {
+      const _fileList: string[] = [];
+      if (isString(v)) {
+        _fileList.push(v);
+      }
+      if (isArray(v)) {
+        _fileList.push(...v);
+      }
+      // 直接赋值 可能为string | string[]
+      value = v;
+      const withUrlList: UploadProps['fileList'] = [];
+      for (const item of _fileList) {
+        // ossId情况
+        if (props.resultField === 'ossId') {
+          const resp = await ossInfo([item]);
+          if (item && isString(item)) {
+            withUrlList.push({
+              uid: item, // ossId作为uid 方便getValue获取
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: 'done',
+              url: resp?.[0]?.url,
+            });
+          } else if (item && isObject(item)) {
+            withUrlList.push({
+              ...(item as any),
+              uid: item,
+              url: resp?.[0]?.url,
+            });
+          }
+        } else {
+          // 非ossId情况
+          if (item && isString(item)) {
+            withUrlList.push({
+              uid: uniqueId(),
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: 'done',
+              url: item,
+            });
+          } else if (item && isObject(item)) {
+            withUrlList.push(item);
+          }
+        }
+      }
+      fileList.value = withUrlList;
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+function getBase64<T extends ArrayBuffer | null | string>(file: File) {
+  return new Promise<T>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => {
+      resolve(reader.result as T);
+    });
+    reader.addEventListener('error', (error) => reject(error));
+  });
+}
+
+const handlePreview = async (file: UploadFile) => {
+  if (!file.url && !file.preview) {
+    file.preview = await getBase64<string>(file.originFileObj!);
+  }
+  previewImage.value = file.url || file.preview || '';
+  previewOpen.value = true;
+  previewTitle.value =
+    file.name ||
+    previewImage.value.slice(
+      Math.max(0, previewImage.value.lastIndexOf('/') + 1),
+    );
+};
+
+const handleRemove = async (file: UploadFile) => {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+};
+
+const handleCancel = () => {
+  previewOpen.value = false;
+  previewTitle.value = '';
+};
+
+const beforeUpload = async (file: File) => {
+  const { maxSize, accept } = props;
+  const isAct = await checkImageFileType(file, accept);
+  if (!isAct) {
+    message.error($t('component.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+  }
+  const isLt = file.size / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+  }
+  return (isAct && !isLt) || Upload.LIST_IGNORE;
+};
+
+async function customRequest(info: UploadRequestOption<any>) {
+  const { api } = props;
+  if (!api || !isFunction(api)) {
+    console.warn('upload api must exist and be a function');
+    return;
+  }
+  try {
+    // 进度条事件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await api?.(info.file as File, {
+      onUploadProgress: progressEvent,
+    });
+    /**
+     * 由getValue处理 传对象过去
+     * 直接传string(id)会被转为Number
+     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
+     */
+    info.onSuccess!(res);
+    message.success($t('component.upload.uploadSuccess'));
+    // 获取
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+  } catch (error: any) {
+    console.error(error);
+    info.onError!(error);
+  }
+}
+
+function getValue() {
+  console.log(fileList.value);
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.DONE)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response?.[props.resultField];
+      }
+      // ossId兼容 uid为ossId直接返回
+      if (props.resultField === 'ossId' && item.uid) {
+        return item.uid;
+      }
+      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
+      if (item?.url) {
+        return item.url;
+      }
+      // 注意这里取的key为 url
+      return item?.response?.url;
+    });
+  // 只有一张图片 默认绑定string而非string[]
+  if (props.maxNumber === 1 && list.length === 1) {
+    return list[0];
+  }
+  // 只有一张图片 && 删除图片时 可自行修改
+  if (props.maxNumber === 1 && list.length === 0) {
+    return '';
+  }
+  return list;
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :custom-request="customRequest"
+      :disabled="disabled"
+      :list-type="listType"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      :progress="{ showInfo: true }"
+      @preview="handlePreview"
+      @remove="handleRemove"
+    >
+      <div v-if="fileList && fileList.length < maxNumber">
+        <PlusOutlined />
+        <div style="margin-top: 8px">{{ $t('component.upload.upload') }}</div>
+      </div>
+    </Upload>
+    <div
+      v-if="showDescription"
+      class="mt-2 flex flex-wrap items-center text-[14px]"
+    >
+      请上传不超过
+      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+      的
+      <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+      格式文件
+    </div>
+    <Modal
+      :footer="null"
+      :open="previewOpen"
+      :title="previewTitle"
+      @cancel="handleCancel"
+    >
+      <img :src="previewImage" alt="" style="width: 100%" />
+    </Modal>
+  </div>
+</template>
+
+<style>
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/components/upload-old/src/typing.ts

@@ -0,0 +1,37 @@
+import type { Recordable } from '@vben/types';
+
+export enum UploadResultStatus {
+  DONE = 'done',
+  ERROR = 'error',
+  SUCCESS = 'success',
+  UPLOADING = 'uploading',
+}
+
+export interface FileItem {
+  thumbUrl?: string;
+  name: string;
+  size: number | string;
+  type?: string;
+  percent: number;
+  file: File;
+  status?: UploadResultStatus;
+  response?: Recordable<any> | { fileName: string; ossId: string; url: string };
+  uuid: string;
+}
+
+export interface Wrapper {
+  record: FileItem;
+  uidKey: string;
+  valueKey: string;
+}
+
+export interface BaseFileItem {
+  uid: number | string;
+  url: string;
+  name?: string;
+}
+export interface PreviewFileItem {
+  url: string;
+  name: string;
+  type: string;
+}

Yi.Vben5.Vue3/apps/web-antd/src/components/upload-old/src/use-upload.ts

@@ -0,0 +1,61 @@
+import type { Ref } from 'vue';
+
+import { computed, unref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+export function useUploadType({
+  acceptRef,
+  helpTextRef,
+  maxNumberRef,
+  maxSizeRef,
+}: {
+  acceptRef: Ref<string[]>;
+  helpTextRef: Ref<string>;
+  maxNumberRef: Ref<number>;
+  maxSizeRef: Ref<number>;
+}) {
+  // 文件类型限制
+  const getAccept = computed(() => {
+    const accept = unref(acceptRef);
+    if (accept && accept.length > 0) {
+      return accept;
+    }
+    return [];
+  });
+  const getStringAccept = computed(() => {
+    return unref(getAccept)
+      .map((item) => {
+        return item.indexOf('/') > 0 || item.startsWith('.')
+          ? item
+          : `.${item}`;
+      })
+      .join(',');
+  });
+
+  // 支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。
+  const getHelpText = computed(() => {
+    const helpText = unref(helpTextRef);
+    if (helpText) {
+      return helpText;
+    }
+    const helpTexts: string[] = [];
+
+    const accept = unref(acceptRef);
+    if (accept.length > 0) {
+      helpTexts.push($t('component.upload.accept', [accept.join(',')]));
+    }
+
+    const maxSize = unref(maxSizeRef);
+    if (maxSize) {
+      helpTexts.push($t('component.upload.maxSize', [maxSize]));
+    }
+
+    const maxNumber = unref(maxNumberRef);
+    if (maxNumber && maxNumber !== Infinity) {
+      helpTexts.push($t('component.upload.maxNumber', [maxNumber]));
+    }
+    return helpTexts.join('，');
+  });
+  return { getAccept, getStringAccept, getHelpText };
+}