feat(project): 添加vben5前端

Yi.Vben5.Vue3/apps/web-antd/src/views/system/client/client-drawer.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { clientAdd, clientInfo, clientUpdate } from '#/api/system/client';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+import SecretInput from './secret-input.vue';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'vertical',
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2 gap-x-4',
+});
+
+function setupForm(update: boolean) {
+  formApi.updateSchema([
+    {
+      dependencies: {
+        show: () => update,
+        triggerFields: [''],
+      },
+      fieldName: 'clientId',
+    },
+    {
+      componentProps: {
+        disabled: update,
+      },
+      fieldName: 'clientKey',
+    },
+    {
+      componentProps: {
+        disabled: update,
+      },
+      fieldName: 'clientSecret',
+    },
+  ]);
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+// 提取生成状态字段Schema的函数
+const getStatusSchema = (disabled: boolean) => [
+  {
+    componentProps: { disabled },
+    fieldName: 'status',
+  },
+];
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id } = drawerApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    // 初始化
+    setupForm(isUpdate.value);
+    if (isUpdate.value && id) {
+      const record = await clientInfo(id);
+      // 不能禁用id为1的记录
+      formApi.updateSchema(getStatusSchema(record.id === 1));
+      await formApi.setValues(record);
+    } else {
+      // 新增模式: 确保状态字段可用
+      formApi.updateSchema(getStatusSchema(false));
+    }
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? clientUpdate(data) : clientAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #clientSecret="slotProps">
+        <SecretInput v-bind="slotProps" :disabled="isUpdate" />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+
+<style lang="scss" scoped>
+/**
+自定义组件校验失败样式
+*/
+:deep(.form-valid-error .ant-input[name='clientSecret']) {
+  border-color: hsl(var(--destructive));
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/client/data.tsx

@@ -0,0 +1,196 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict, renderDictTags } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'clientKey',
+    label: '客户端key',
+  },
+  {
+    component: 'Input',
+    fieldName: 'clientSecret',
+    label: '客户端密钥',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '客户端ID',
+    field: 'clientId',
+    showOverflow: true,
+  },
+  {
+    title: '客户端key',
+    field: 'clientKey',
+  },
+  {
+    title: '客户端密钥',
+    field: 'clientSecret',
+  },
+  {
+    title: '授权类型',
+    field: 'grantTypeList',
+    slots: {
+      default: ({ row }) => {
+        if (!row.grantTypeList) {
+          return '无';
+        }
+        return renderDictTags(
+          row.grantTypeList,
+          getDictOptions(DictEnum.SYS_GRANT_TYPE),
+          true,
+          4,
+        );
+      },
+    },
+  },
+  {
+    title: '设备类型',
+    field: 'deviceType',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.deviceType, DictEnum.SYS_DEVICE_TYPE);
+      },
+    },
+  },
+  {
+    title: 'token活跃时间',
+    field: 'activeTimeout',
+    formatter({ row }) {
+      return `${row.activeTimeout}秒`;
+    },
+  },
+  {
+    title: 'token超时时间',
+    field: 'timeout',
+    formatter({ row }) {
+      return `${row.timeout}秒`;
+    },
+  },
+  {
+    title: '状态',
+    field: 'status',
+    slots: {
+      default: 'status',
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: 'id',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'clientId',
+    label: '客户端ID',
+  },
+  {
+    component: 'Input',
+    fieldName: 'clientKey',
+    label: '客户端key',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'clientSecret',
+    label: '客户端密钥',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'label',
+      options: getDictOptions(DictEnum.SYS_GRANT_TYPE),
+    },
+    fieldName: 'grantTypeList',
+    label: '授权类型',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_DEVICE_TYPE),
+    },
+    fieldName: 'deviceType',
+    label: '设备类型',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      addonAfter: '秒',
+      placeholder: '请输入',
+    },
+    defaultValue: 1800,
+    fieldName: 'activeTimeout',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    help: '指定时间无操作则过期(单位：秒), 默认30分钟(1800秒)',
+    label: 'Token活跃超时时间',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      addonAfter: '秒',
+    },
+    defaultValue: 604_800,
+    fieldName: 'timeout',
+    formItemClass: 'col-span-2 lg:col-span-1 ',
+    help: '指定时间必定过期(单位：秒)，默认七天(604800秒)',
+    label: 'Token固定超时时间',
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    label: '状态',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/client/index.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { Client } from '#/api/system/client/model';
+
+import { useAccess } from '@vben/access';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  clientChangeStatus,
+  clientExport,
+  clientList,
+  clientRemove,
+} from '#/api/system/client';
+import { TableSwitch } from '#/components/table';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import clientDrawer from './client-drawer.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+    checkMethod: ({ row }) => (row as Client)?.id !== 1,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await clientList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-client-index',
+  showOverflow: false,
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [ClientDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: clientDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(record: Client) {
+  drawerApi.setData({ id: record.id });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Client) {
+  await clientRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Client) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await clientRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(clientExport, '客户端数据', tableApi.formApi.form.values);
+}
+
+const { hasAccessByCodes } = useAccess();
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="客户端列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:client:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:client:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:client:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <!-- pc不允许禁用 禁用了直接登录不了 应该设置disabled -->
+        <!-- 登录提示: 认证权限类型已禁用 -->
+        <TableSwitch
+          v-model:value="row.status"
+          :api="() => clientChangeStatus(row)"
+          :disabled="row.id === 1 || !hasAccessByCodes(['system:client:edit'])"
+          @reload="tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:client:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :disabled="row.id === 1"
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              :disabled="row.id === 1"
+              danger
+              v-access:code="['system:client:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <ClientDrawer @reload="tableApi.query()" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/client/secret-input.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { IconifyIcon } from '@vben/icons';
+import { buildUUID } from '@vben/utils';
+
+import { Input } from 'ant-design-vue';
+
+defineOptions({ name: 'SecretInput' });
+
+withDefaults(defineProps<{ disabled?: boolean; placeholder?: string }>(), {
+  disabled: false,
+  placeholder: '请输入密钥或随机生成',
+});
+
+const value = defineModel<string>('value', {
+  required: false,
+});
+
+function refreshSecret() {
+  value.value = buildUUID();
+}
+
+/**
+ * 万一要在每次新增时打开Drawer刷新
+ * 需要调用实例方法
+ */
+defineExpose({ refreshSecret });
+</script>
+
+<template>
+  <Input v-model:value="value" :disabled="disabled" :placeholder="placeholder">
+    <template v-if="!disabled" #addonAfter>
+      <a-button type="primary" @click="refreshSecret">
+        <div class="flex items-center gap-[4px]">
+          <IconifyIcon icon="charm:refresh" />
+          <span>随机生成</span>
+        </div>
+      </a-button>
+    </template>
+  </Input>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-input-group-addon) {
+  padding: 0;
+  border: none;
+}
+
+:deep(.ant-btn-primary) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/config/config-modal.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { configAdd, configInfo, configUpdate } from '#/api/system/config';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await configInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? configUpdate(data) : configAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title" class="w-[550px]">
+    <BasicForm />
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/config/data.ts

@@ -0,0 +1,129 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'configName',
+    label: '参数名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'configKey',
+    label: '参数键名',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+    },
+    fieldName: 'configType',
+    label: '系统内置',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'creationTime',
+    label: '创建时间',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '参数名称',
+    field: 'configName',
+  },
+  {
+    title: '参数KEY',
+    field: 'configKey',
+  },
+  {
+    title: '参数Value',
+    field: 'configValue',
+  },
+  {
+    title: '系统内置',
+    field: 'configType',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.configType, DictEnum.SYS_YES_NO);
+      },
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '创建时间',
+    field: 'creationTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: '参数主键',
+  },
+  {
+    component: 'Input',
+    fieldName: 'configName',
+    label: '参数名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'configKey',
+    label: '参数键名',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    formItemClass: 'items-start',
+    fieldName: 'configValue',
+    label: '参数键值',
+    componentProps: {
+      autoSize: true,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+      optionType: 'button',
+    },
+    defaultValue: 'N',
+    fieldName: 'configType',
+    label: '是否内置',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-start',
+    label: '备注',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/config/index.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { SysConfig } from '#/api/system/config/model';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  configExport,
+  configList,
+  configRefreshCache,
+  configRemove,
+} from '#/api/system/config';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import configModal from './config-modal.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'creationTime',
+      ['startTime', 'endTime'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await configList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-config-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+const [ConfigModal, modalApi] = useVbenModal({
+  connectedComponent: configModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(record: SysConfig) {
+  modalApi.setData({ id: record.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: SysConfig) {
+  await configRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysConfig) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await configRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(configExport, '参数配置', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+
+async function handleRefreshCache() {
+  await configRefreshCache();
+  await tableApi.query();
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="参数列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button @click="handleRefreshCache"> 刷新缓存 </a-button>
+          <a-button
+            v-access:code="['system:config:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:config:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:config:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:config:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:config:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <ConfigModal @reload="tableApi.query()" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dept/data.ts

@@ -0,0 +1,139 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'deptName',
+    label: '部门名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+    },
+    fieldName: 'state',
+    label: '部门状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    field: 'deptName',
+    title: '部门名称',
+    treeNode: true,
+  },
+  {
+    field: 'deptCode',
+    title: '部门编码',
+  },
+  {
+    field: 'orderNum',
+    title: '排序',
+  },
+  {
+    field: 'leaderName',
+    title: '负责人',
+  },
+  {
+    field: 'state',
+    title: '状态',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(String(row.state), DictEnum.SYS_NORMAL_DISABLE);
+      },
+    },
+  },
+  {
+    field: 'creationTime',
+    title: '创建时间',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'TreeSelect',
+    componentProps: {
+      getPopupContainer,
+    },
+    dependencies: {
+      show: (model) => model.parentId !== '00000000-0000-0000-0000-000000000000',
+      triggerFields: ['parentId'],
+    },
+    fieldName: 'parentId',
+    label: '上级部门',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    fieldName: 'deptName',
+    label: '部门名称',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'orderNum',
+    label: '显示排序',
+    rules: 'required',
+    defaultValue: 0,
+  },
+  {
+    component: 'Input',
+    fieldName: 'deptCode',
+    label: '部门编码',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: true,
+      getPopupContainer,
+      placeholder: '请选择负责人',
+    },
+    fieldName: 'leader',
+    label: '负责人',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    label: '备注',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    fieldName: 'state',
+    label: '状态',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dept/dept-drawer.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { Dept } from '#/api/system/dept/model';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep, listToTree } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  deptAdd,
+  deptInfo,
+  deptList,
+  deptNodeList,
+  deptUpdate,
+} from '#/api/system/dept';
+import { listUserByDeptId } from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface DrawerProps {
+  id?: number | string;
+  update: boolean;
+}
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function getDeptTree(deptId?: number | string, exclude = false) {
+  let ret: Dept[] = [];
+  ret = await (!deptId || exclude ? deptList({}) : deptNodeList(deptId));
+  const treeData = listToTree(ret, { id: 'id', pid: 'parentId' });
+  // 添加部门名称 如 xx-xx-xx
+  addFullName(treeData, 'deptName', ' / ');
+  return treeData;
+}
+
+async function initDeptSelect(deptId?: number | string) {
+  // 需要动态更新TreeSelect组件 这里允许为空
+  const treeData = await getDeptTree(deptId, !isUpdate.value);
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: { label: 'deptName', value: 'id' },
+        showSearch: true,
+        treeData,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'parentId',
+    },
+  ]);
+}
+
+/**
+ * 部门管理员下拉框 更新时才会enable
+ * @param deptId
+ */
+async function initDeptUsers(deptId: number | string) {
+  const ret = await listUserByDeptId(deptId);
+  const options = ret.map((user) => ({
+    label: `${user.userName} | ${user.nick}`,
+    value: user.id,
+  }));
+  formApi.updateSchema([
+    {
+      componentProps: {
+        disabled: ret.length === 0,
+        options,
+        placeholder: ret.length === 0 ? '该部门暂无用户' : '请选择部门负责人',
+      },
+      fieldName: 'leader',
+    },
+  ]);
+}
+
+async function setLeaderOptions() {
+  formApi.updateSchema([
+    {
+      componentProps: {
+        disabled: true,
+        options: [],
+        placeholder: '仅在更新时可选部门负责人',
+      },
+      fieldName: 'leader',
+    },
+  ]);
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id, update } = drawerApi.getData() as DrawerProps;
+    isUpdate.value = update;
+
+    if (id) {
+      await formApi.setFieldValue('parentId', id);
+      if (update) {
+        const record = await deptInfo(id);
+        await formApi.setValues(record);
+      }
+    }
+
+    await (update && id ? initDeptUsers(id) : setLeaderOptions());
+    /** 部门选择 下拉框 */
+    await initDeptSelect(id);
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? deptUpdate(data) : deptAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dept/index.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+  import type { VbenFormProps } from '@vben/common-ui';
+  
+  import type { VxeGridProps } from '#/adapter/vxe-table';
+  import type { Dept } from '#/api/system/dept/model';
+  
+  import { nextTick } from 'vue';
+  
+  import { Page, useVbenDrawer } from '@vben/common-ui';
+  import { eachTree, getVxePopupContainer } from '@vben/utils';
+  
+  import { Popconfirm, Space } from 'ant-design-vue';
+  
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { deptList, deptRemove } from '#/api/system/dept';
+  
+  import { columns, querySchema } from './data';
+  import deptDrawer from './dept-drawer.vue';
+  
+  const formOptions: VbenFormProps = {
+    commonConfig: {
+      labelWidth: 80,
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    schema: querySchema(),
+    wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  };
+  
+  // 空GUID，用于判断根节点
+  const EMPTY_GUID = '00000000-0000-0000-0000-000000000000';
+
+  const gridOptions: VxeGridProps = {
+    columns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues = {}) => {
+          const resp = await deptList({
+            ...formValues,
+          });
+          // 将根节点的 parentId 置为 null，以便 vxe-table 正确识别根节点
+          const items = resp.map((item) => ({
+            ...item,
+            parentId: item.parentId === EMPTY_GUID ? null : item.parentId,
+          }));
+          return { items };
+        },
+        // 默认请求接口后展开全部 不需要可以删除这段
+        querySuccess: () => {
+          // 默认展开 需要加上标记
+          // eslint-disable-next-line no-use-before-define
+          eachTree(tableApi.grid.getData(), (item) => (item.expand = true));
+          nextTick(() => {
+            setExpandOrCollapse(true);
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+    },
+    id: 'system-dept-index',
+  };
+  
+  const [BasicTable, tableApi] = useVbenVxeGrid({
+    formOptions,
+    gridOptions,
+    gridEvents: {
+      cellDblclick: (e) => {
+        const { row = {} } = e;
+        if (!row?.children) {
+          return;
+        }
+        const isExpanded = row?.expand;
+        tableApi.grid.setTreeExpand(row, !isExpanded);
+        row.expand = !isExpanded;
+      },
+      // 需要监听使用箭头展开的情况 否则展开/折叠的数据不一致
+      toggleTreeExpand: (e) => {
+        const { row = {}, expanded } = e;
+        row.expand = expanded;
+      },
+    },
+  });
+  const [DeptDrawer, drawerApi] = useVbenDrawer({
+    connectedComponent: deptDrawer,
+  });
+  
+  function handleAdd() {
+    drawerApi.setData({ update: false });
+    drawerApi.open();
+  }
+  
+function handleSubAdd(row: Dept) {
+  const { id } = row;
+  drawerApi.setData({ id, update: false });
+  drawerApi.open();
+}
+  
+async function handleEdit(record: Dept) {
+  drawerApi.setData({ id: record.id, update: true });
+  drawerApi.open();
+}
+  
+async function handleDelete(row: Dept) {
+  await deptRemove(row.id);
+  await tableApi.query();
+}
+  
+  /**
+   * 全部展开/折叠
+   * @param expand 是否展开
+   */
+  function setExpandOrCollapse(expand: boolean) {
+    eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
+    tableApi.grid?.setAllTreeExpand(expand);
+  }
+  </script>
+  
+  <template>
+    <Page :auto-content-height="true">
+      <BasicTable table-title="部门列表" table-title-help="双击展开/收起子菜单">
+        <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>
+            <a-button
+              type="primary"
+              v-access:code="['system:dept:add']"
+              @click="handleAdd"
+            >
+              {{ $t('pages.common.add') }}
+            </a-button>
+          </Space>
+        </template>
+        <template #action="{ row }">
+          <Space>
+            <ghost-button
+              v-access:code="['system:dept:edit']"
+              @click="handleEdit(row)"
+            >
+              {{ $t('pages.common.edit') }}
+            </ghost-button>
+            <ghost-button
+              class="btn-success"
+              v-access:code="['system:dept:add']"
+              @click="handleSubAdd(row)"
+            >
+              {{ $t('pages.common.add') }}
+            </ghost-button>
+            <Popconfirm
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              title="确认删除？"
+              @confirm="handleDelete(row)"
+            >
+              <ghost-button
+                danger
+                v-access:code="['system:dept:remove']"
+                @click.stop=""
+              >
+                {{ $t('pages.common.delete') }}
+              </ghost-button>
+            </Popconfirm>
+          </Space>
+        </template>
+      </BasicTable>
+      <DeptDrawer @reload="tableApi.query()" />
+    </Page>
+  </template>
+  

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/data.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    ele版本会使用这个文件 只是为了不报错`未找到对应组件`才新建的这个文件
+    无实际意义
+  </div>
+</template>

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

@@ -0,0 +1,136 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DictData } from '#/api/system/dict/dict-data-model';
+
+import { DictEnum } from '@vben/constants';
+
+import { renderDict, renderDictTag } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'dictLabel',
+    label: '字典标签',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '字典标签',
+    field: 'cssClass',
+    slots: {
+      default: ({ row }) => {
+        const { dictValue } = row as DictData;
+        return renderDictTag(dictValue, [row]);
+      },
+    },
+  },
+  {
+    title: '字典键值',
+    field: 'dictValue',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(String(row.state), DictEnum.SYS_NORMAL_DISABLE);
+      },
+    },
+  },
+  {
+    title: '字典排序',
+    field: 'orderNum',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '创建时间',
+    field: 'creationTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'dictType',
+    label: '字典类型',
+  },
+  {
+    component: 'Input',
+    fieldName: 'listClass',
+    label: '标签样式',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictLabel',
+    label: '数据标签',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictValue',
+    label: '数据键值',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      placeholder: '可使用tailwind类名 如bg-blue w-full h-full等',
+    },
+    fieldName: 'cssClass',
+    formItemClass: 'items-start',
+    help: '标签的css样式, 可添加已经编译的css类名',
+    label: 'css类名',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'orderNum',
+    label: '显示排序',
+    rules: 'required',
+    defaultValue: 0,
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-start',
+    label: '备注',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    fieldName: 'state',
+    label: '状态',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/data/dict-data-drawer.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  dictDataAdd,
+  dictDataUpdate,
+  dictDetailInfo,
+} from '#/api/system/dict/dict-data';
+import { tagTypes } from '#/components/dict';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+import TagStylePicker from './tag-style-picker.vue';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface DrawerProps {
+  id?: string;
+  dictType: string;
+}
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+/**
+ * 标签样式选择器
+ * default: 预设标签样式
+ * custom: 自定义标签样式
+ */
+const selectType = ref('default');
+/**
+ * 根据标签样式判断是自定义还是默认
+ * @param listClass 标签样式
+ */
+function setupSelectType(listClass: string | null | undefined) {
+  if (!listClass) {
+    selectType.value = 'default';
+    return;
+  }
+  // 判断是自定义还是预设
+  const isDefault = Reflect.has(tagTypes, listClass);
+  selectType.value = isDefault ? 'default' : 'custom';
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id, dictType } = drawerApi.getData() as DrawerProps;
+    isUpdate.value = !!id;
+    await formApi.setFieldValue('dictType', dictType);
+
+    if (id && isUpdate.value) {
+      const record = await dictDetailInfo(id);
+      setupSelectType(record.listClass || '');
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    // 需要置空的情况 undefined不会提交给后端 需要改为空字符串
+    if (!data.listClass) {
+      data.listClass = '';
+    }
+    await (isUpdate.value ? dictDataUpdate(data) : dictDataAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  selectType.value = 'default';
+  resetInitialized();
+}
+
+/**
+ * 取消标签选中 必须设置为undefined才行
+ */
+async function handleDeSelect() {
+  await formApi.setFieldValue('listClass', undefined);
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #listClass="slotProps">
+        <TagStylePicker
+          v-bind="slotProps"
+          v-model:select-type="selectType"
+          @deselect="handleDeSelect"
+        />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/data/index.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { PageQuery } from '#/api/common';
+import type { DictData } from '#/api/system/dict/dict-data-model';
+
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  dictDataExport,
+  dictDataList,
+  dictDataRemove,
+} from '#/api/system/dict/dict-data';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { emitter } from '../mitt';
+import { columns, querySchema } from './data';
+import dictDataDrawer from './dict-data-drawer.vue';
+
+const dictType = ref('');
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        const params: PageQuery = {
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        };
+        if (dictType.value) {
+          params.dictType = dictType.value;
+        }
+
+        return await dictDataList(params);
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-dict-data-index',
+};
+
+// @ts-expect-error TS2589: DictData + proxyConfig causes deep instantiation; generics are manageable at runtime.
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DictDataDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: dictDataDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({ dictType: dictType.value });
+  drawerApi.open();
+}
+
+async function handleEdit(record: DictData) {
+  drawerApi.setData({
+    dictType: dictType.value,
+    id: record.id,
+  });
+  drawerApi.open();
+}
+
+async function handleDelete(row: DictData) {
+  await dictDataRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: DictData) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await dictDataRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(dictDataExport, '字典数据', tableApi.formApi.form.values);
+}
+
+emitter.on('rowClick', async (value) => {
+  dictType.value = value;
+  await tableApi.query();
+});
+</script>
+
+<template>
+  <div>
+    <BasicTable id="dict-data" table-title="字典数据列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:dict:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:dict:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            :disabled="dictType === ''"
+            type="primary"
+            v-access:code="['system:dict:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:dict:edit']"
+            @click="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="
+              (node) => getVxePopupContainer(node, 'dict-data')
+            "
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:dict:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <DictDataDrawer @reload="tableApi.query()" />
+  </div>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/data/tag-style-picker.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { RadioChangeEvent } from 'ant-design-vue';
+
+import { computed } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import { RadioGroup, Select } from 'ant-design-vue';
+import { ColorPicker } from 'vue3-colorpicker';
+
+import { tagSelectOptions } from '#/components/dict';
+
+import 'vue3-colorpicker/style.css';
+
+/**
+ * 需要禁止透传
+ * 不禁止会有奇怪的bug 会绑定到selectType上
+ * TODO: 未知原因 有待研究
+ */
+defineOptions({ inheritAttrs: false });
+
+defineEmits<{ deselect: [] }>();
+
+const options = [
+  { label: '默认颜色', value: 'default' },
+  { label: '自定义颜色', value: 'custom' },
+] as const;
+
+/**
+ * 主要是加了const报错
+ */
+const computedOptions = computed(
+  () => options as unknown as { label: string; value: string }[],
+);
+
+type SelectType = (typeof options)[number]['value'];
+
+const selectType = defineModel<SelectType>('selectType', {
+  default: 'default',
+});
+
+/**
+ * color必须为hex颜色或者undefined
+ */
+const color = defineModel<string | undefined>('value', {
+  default: undefined,
+});
+
+function handleSelectTypeChange(e: RadioChangeEvent) {
+  // 必须给默认hex颜色 不能为空字符串
+  color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
+}
+
+const { isDark } = usePreferences();
+const theme = computed(() => {
+  return isDark.value ? 'black' : 'white';
+});
+</script>
+
+<template>
+  <div class="flex flex-1 items-center gap-[6px]">
+    <RadioGroup
+      v-model:value="selectType"
+      :options="computedOptions"
+      button-style="solid"
+      option-type="button"
+      @change="handleSelectTypeChange"
+    />
+    <Select
+      v-if="selectType === 'default'"
+      v-model:value="color"
+      :allow-clear="true"
+      :options="tagSelectOptions()"
+      class="flex-1"
+      placeholder="请选择标签样式"
+      @deselect="$emit('deselect')"
+    />
+    <ColorPicker
+      v-if="selectType === 'custom'"
+      disable-alpha
+      format="hex"
+      v-model:pure-color="color"
+      :theme="theme"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { onUnmounted } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import DictDataPanel from './data/index.vue';
+import { emitter } from './mitt';
+import DictTypePanel from './type/index.vue';
+
+onUnmounted(() => emitter.off('rowClick'));
+</script>
+
+<template>
+  <Page
+    :auto-content-height="true"
+    content-class="flex flex-col lg:flex-row gap-4"
+  >
+    <DictTypePanel class="flex-1 overflow-hidden" />
+    <DictDataPanel class="flex-1 overflow-hidden" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/mitt.ts

@@ -0,0 +1,10 @@
+import { mitt } from '@vben/utils';
+
+/**
+ * dictType: string
+ */
+type Events = {
+  rowClick: string;
+};
+
+export const emitter = mitt<Events>();

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

@@ -0,0 +1,104 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+
+import { z } from '#/adapter/form';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'dictName',
+    label: '字典名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictType',
+    label: '字典类型',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '字典名称',
+    field: 'dictName',
+  },
+  {
+    title: '字典类型',
+    field: 'dictType',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(String(row.state), DictEnum.SYS_NORMAL_DISABLE);
+      },
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '创建时间',
+    field: 'creationTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: 'id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictName',
+    label: '字典名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictType',
+    help: '使用英文/下划线命名, 如:sys_normal_disable',
+    label: '字典类型',
+    rules: z
+      .string()
+      .regex(/^[a-z_]+$/i, { message: '字典类型只能使用英文/下划线命名' }),
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    label: '备注',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    fieldName: 'state',
+    label: '状态',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/type/dict-type-modal.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  dictTypeAdd,
+  dictTypeInfo,
+  dictTypeUpdate,
+} from '#/api/system/dict/dict-type';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  layout: 'vertical',
+  commonConfig: {
+    labelWidth: 100,
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: string };
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+      const record = await dictTypeInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? dictTypeUpdate(data) : dictTypeAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/type/index-refactor.vue

@@ -0,0 +1,281 @@
+<!-- 使用vxe实现成本最小 且自带虚拟滚动  -->
+<script setup lang="ts">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DictType } from '#/api/system/dict/dict-type-model';
+
+import { h, ref, shallowRef, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cn } from '@vben/utils';
+
+import {
+  DeleteOutlined,
+  EditOutlined,
+  ExportOutlined,
+  PlusOutlined,
+  SyncOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Alert,
+  Input,
+  Modal,
+  Popconfirm,
+  Space,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  dictTypeExport,
+  dictTypeList,
+  dictTypeRemove,
+  refreshDictTypeCache,
+} from '#/api/system/dict/dict-type';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { emitter } from '../mitt';
+import dictTypeModal from './dict-type-modal.vue';
+
+const tableAllData = shallowRef<DictType[]>([]);
+const gridOptions: VxeGridProps = {
+  columns: [
+    {
+      title: 'name',
+      field: 'render',
+      slots: { default: 'render' },
+    },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        const resp = await dictTypeList();
+
+        total.value = resp.total;
+        tableAllData.value = resp.rows;
+        return resp;
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+    // 高亮当前行
+    isCurrent: true,
+  },
+  cellConfig: {
+    height: 60,
+  },
+  showHeader: false,
+  toolbarConfig: {
+    enabled: false,
+  },
+  // 开启虚拟滚动
+  scrollY: {
+    enabled: false,
+    gt: 0,
+  },
+  rowClassName: 'cursor-pointer',
+  id: 'system-dict-data-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+  gridEvents: {
+    cellClick: ({ row }) => {
+      handleRowClick(row);
+    },
+  },
+});
+
+const [DictTypeModal, modalApi] = useVbenModal({
+  connectedComponent: dictTypeModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(record: DictType) {
+  modalApi.setData({ id: record.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: DictType) {
+  await dictTypeRemove([row.id]);
+  await tableApi.query();
+}
+
+async function handleReset() {
+  currentRowId.value = '';
+  searchValue.value = '';
+  await tableApi.query();
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(dictTypeExport, '字典类型数据');
+}
+
+function handleRefreshCache() {
+  Modal.confirm({
+    title: '提示',
+    content: '确认刷新字典类型缓存吗？',
+    okButtonProps: {
+      danger: true,
+    },
+    onOk: async () => {
+      await refreshDictTypeCache();
+      await tableApi.query();
+    },
+  });
+}
+
+const lastDictType = ref<string>('');
+const currentRowId = ref<null | string>(null);
+function handleRowClick(row: DictType) {
+  if (lastDictType.value === row.dictType) {
+    return;
+  }
+  currentRowId.value = row.id;
+  emitter.emit('rowClick', row.dictType);
+}
+
+const searchValue = ref('');
+const total = ref(0);
+watch(searchValue, (value) => {
+  if (!tableApi) {
+    return;
+  }
+  if (value) {
+    const names = tableAllData.value.filter((item) =>
+      item.dictName.includes(searchValue.value),
+    );
+    const types = tableAllData.value.filter((item) =>
+      item.dictType.includes(searchValue.value),
+    );
+    const filtered = [...new Set([...names, ...types])];
+    total.value = filtered.length;
+    tableApi.grid.loadData(filtered);
+  } else {
+    total.value = tableAllData.value.length;
+    tableApi.grid.loadData(tableAllData.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'bg-background flex max-h-[100vh] w-[360px] flex-col overflow-y-hidden',
+        'rounded-lg',
+        'dict-type-card',
+      )
+    "
+  >
+    <div :class="cn('flex items-center justify-between', 'border-b px-4 py-2')">
+      <span class="font-semibold">字典项列表</span>
+      <Space>
+        <Tooltip title="刷新缓存">
+          <a-button
+            v-access:code="['system:dict:edit']"
+            :icon="h(SyncOutlined)"
+            @click="handleRefreshCache"
+          />
+        </Tooltip>
+        <Tooltip :title="$t('pages.common.export')">
+          <a-button
+            v-access:code="['system:dict:export']"
+            :icon="h(ExportOutlined)"
+            @click="handleDownloadExcel"
+          />
+        </Tooltip>
+        <Tooltip :title="$t('pages.common.add')">
+          <a-button
+            v-access:code="['system:dict:add']"
+            :icon="h(PlusOutlined)"
+            @click="handleAdd"
+          />
+        </Tooltip>
+      </Space>
+    </div>
+    <div class="flex flex-1 flex-col overflow-y-hidden p-4">
+      <Alert
+        class="mb-4"
+        show-icon
+        message="如果你的数据量大 自行开启虚拟滚动"
+      />
+      <Input
+        placeholder="搜索字典项名称/类型"
+        v-model:value="searchValue"
+        allow-clear
+      >
+        <template #addonAfter>
+          <Tooltip title="重置/刷新">
+            <SyncOutlined
+              v-access:code="['system:dict:edit']"
+              @click="handleReset"
+            />
+          </Tooltip>
+        </template>
+      </Input>
+      <BasicTable class="flex-1 overflow-hidden">
+        <template #render="{ row: item }">
+          <div :class="cn('flex items-center justify-between px-2 py-2')">
+            <div class="flex flex-col items-baseline overflow-hidden">
+              <span class="font-medium">{{ item.dictName }}</span>
+              <div
+                class="max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+              >
+                {{ item.dictType }}
+              </div>
+            </div>
+            <div class="flex items-center gap-3 text-[17px]">
+              <EditOutlined
+                class="text-primary"
+                v-access:code="['system:dict:edit']"
+                @click.stop="handleEdit(item)"
+              />
+              <Popconfirm
+                placement="left"
+                :title="`确认删除 [${item.dictName}]?`"
+                @confirm="handleDelete(item)"
+              >
+                <DeleteOutlined
+                  v-access:code="['system:dict:remove']"
+                  class="text-destructive"
+                  @click.stop=""
+                />
+              </Popconfirm>
+            </div>
+          </div>
+        </template>
+      </BasicTable>
+    </div>
+    <div class="border-t px-4 py-3">共 {{ total }} 条数据</div>
+    <DictTypeModal @reload="tableApi.query()" />
+  </div>
+</template>
+
+<style lang="scss">
+.dict-type-card {
+  .vxe-grid {
+    padding: 12px 0 0;
+
+    .vxe-body--row {
+      &.row--current {
+        // 选中行背景色
+        background-color: hsl(var(--accent-hover)) !important;
+      }
+    }
+  }
+
+  .ant-alert {
+    padding: 6px 12px;
+  }
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/dict/type/index.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DictType } from '#/api/system/dict/dict-type-model';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  dictTypeExport,
+  dictTypeList,
+  dictTypeRemove,
+  refreshDictTypeCache,
+} from '#/api/system/dict/dict-type';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { emitter } from '../mitt';
+import { columns, querySchema } from './data';
+import dictTypeModal from './dict-type-modal.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 70,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await dictTypeList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+    // 高亮当前行
+    isCurrent: true,
+  },
+  id: 'system-dict-type-index',
+  rowClassName: 'hover:cursor-pointer',
+};
+
+const lastDictType = ref('');
+
+// @ts-expect-error TS2589: DictType + proxyConfig causes deep instantiation; generics are manageable at runtime.
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    cellClick: (e) => {
+      const { row } = e;
+      if (lastDictType.value === row.dictType) {
+        return;
+      }
+      emitter.emit('rowClick', row.dictType);
+      lastDictType.value = row.dictType;
+    },
+  },
+});
+const [DictTypeModal, modalApi] = useVbenModal({
+  connectedComponent: dictTypeModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(record: DictType) {
+  modalApi.setData({ id: record.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: DictType) {
+  await dictTypeRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: DictType) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await dictTypeRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+async function handleRefreshCache() {
+  await refreshDictTypeCache();
+  await tableApi.query();
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    dictTypeExport,
+    '字典类型数据',
+    tableApi.formApi.form.values,
+  );
+}
+</script>
+
+<template>
+  <div>
+    <BasicTable id="dict-type" table-title="字典类型列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:dict:edit']"
+            @click="handleRefreshCache"
+          >
+            刷新缓存
+          </a-button>
+          <a-button
+            v-access:code="['system:dict:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:dict:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:dict:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:dict:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="
+              (node) => getVxePopupContainer(node, 'dict-type')
+            "
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:dict:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <DictTypeModal @reload="tableApi.query()" />
+  </div>
+</template>
+
+<style lang="scss">
+div#dict-type {
+  .vxe-body--row {
+    &.row--current {
+      // 选中行bold
+      @apply font-semibold;
+    }
+  }
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/menu/data.tsx

@@ -0,0 +1,434 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { DictEnum } from '@vben/constants';
+import { FolderIcon, MenuIcon, OkButtonIcon, VbenIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { getPopupContainer } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'menuName',
+    label: '菜单名称 ',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+    },
+    fieldName: 'state',
+    label: '菜单状态 ',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: [
+        { label: '显示', value: true },
+        { label: '隐藏', value: false },
+      ],
+    },
+    fieldName: 'isShow',
+    label: '显示状态',
+  },
+];
+
+// 菜单类型
+export const menuTypeOptions = [
+  { label: '目录', value: 'Catalogue' },
+  { label: '菜单', value: 'Menu' },
+  { label: '按钮', value: 'Component' },
+];
+
+export const yesNoOptions = [
+  { label: '是', value: '0' },
+  { label: '否', value: '1' },
+];
+
+/**
+ * 判断是否为菜单类型（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';
+}
+
+// （M目录 C菜单 F按钮）
+const menuTypes: Record<string, { icon: typeof MenuIcon; value: string }> = {
+  c: { icon: MenuIcon, value: '菜单' },
+  menu: { icon: MenuIcon, value: '菜单' },
+  Menu: { icon: MenuIcon, value: '菜单' },
+  catalog: { icon: FolderIcon, value: '目录' },
+  directory: { icon: FolderIcon, value: '目录' },
+  folder: { icon: FolderIcon, value: '目录' },
+  m: { icon: FolderIcon, value: '目录' },
+  catalogue: { icon: FolderIcon, value: '目录' },
+  component: { icon: OkButtonIcon, value: '按钮' },
+  f: { icon: OkButtonIcon, value: '按钮' },
+  button: { icon: OkButtonIcon, value: '按钮' },
+};
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '菜单名称',
+    field: 'menuName',
+    treeNode: true,
+    width: 200,
+    slots: {
+      // 需要i18n支持 否则返回原始值
+      default: ({ row }) => $t(row.menuName),
+    },
+  },
+  {
+    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: 'orderNum',
+    width: 120,
+  },
+  {
+    title: '组件类型',
+    field: 'menuType',
+    width: 150,
+    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: 'permissionCode',
+  },
+  {
+    title: '组件路径',
+    field: 'component',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    width: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(String(row.state), DictEnum.SYS_NORMAL_DISABLE);
+      },
+    },
+  },
+  {
+    title: '显示',
+    field: 'isShow',
+    width: 100,
+    slots: {
+      default: ({ row }) => {
+        return row.isShow ? '显示' : '隐藏';
+      },
+    },
+  },
+  {
+    title: '创建时间',
+    field: 'creationTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'TreeSelect',
+    defaultValue: 0,
+    fieldName: 'parentId',
+    label: '上级菜单',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: menuTypeOptions,
+      optionType: 'button',
+    },
+    defaultValue: 'M',
+    dependencies: {
+      componentProps: (_, api) => {
+        // 切换时清空校验
+        // 直接抄的源码 没有清空校验的方法
+        Object.keys(api.errors.value).forEach((key) => {
+          api.setFieldError(key, undefined);
+        });
+        return {};
+      },
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'menuType',
+    label: '菜单类型',
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      // 类型不为按钮时显示
+      show: (values) => !isComponentType(values.menuType),
+      triggerFields: ['menuType'],
+    },
+    renderComponentContent: (model) => ({
+      addonBefore: () => <VbenIcon icon={model.menuIcon} />,
+      addonAfter: () => (
+        <a href="https://icon-sets.iconify.design/" target="_blank">
+          搜索图标
+        </a>
+      ),
+    }),
+    fieldName: 'menuIcon',
+    help: '点击搜索图标跳转到iconify & 粘贴',
+    label: '菜单图标',
+  },
+  {
+    component: 'Input',
+    fieldName: 'menuName',
+    label: '菜单名称',
+    help: '支持i18n写法, 如: menu.system.user',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'orderNum',
+    help: '排序, 数字越小越靠前',
+    label: '显示排序',
+    defaultValue: 0,
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: (model) => {
+      const placeholder = model.isLink
+        ? '填写链接地址http(s)://  使用新页面打开'
+        : '填写`路由地址`或者`链接地址`  链接默认使用内部iframe内嵌打开';
+      return {
+        placeholder,
+      };
+    },
+    dependencies: {
+      rules: (model) => {
+        if (!model.isLink) {
+          return z
+            .string({ message: '请输入路由地址' })
+            .min(1, '请输入路由地址')
+            .refine((val) => !val.startsWith('/'), {
+              message: '路由地址不需要带/',
+            });
+        }
+        // 为链接
+        return z
+          .string({ message: '请输入链接地址' })
+          .regex(/^https?:\/\//, { message: '请输入正确的链接地址' });
+      },
+      // 类型不为按钮时显示
+      show: (values) => !isComponentType(values?.menuType),
+      triggerFields: ['isLink', 'menuType'],
+    },
+    fieldName: 'router',
+    help: `路由地址不带/, 如: menu, user\n 链接为http(s)://开头\n 链接默认使用内部iframe打开, 可通过{是否外链}控制打开方式`,
+    label: '路由地址',
+  },
+  {
+    component: 'Input',
+    componentProps: (model) => {
+      return {
+        // 为链接时组件disabled
+        disabled: model.isLink,
+      };
+    },
+    defaultValue: '',
+    dependencies: {
+      rules: (model) => {
+        // 非链接时为必填项
+        if (model.router && !/^https?:\/\//.test(model.router)) {
+          return z
+            .string()
+            .min(1, { message: '非链接时必填组件路径' })
+            .refine((val) => !val.startsWith('/') && !val.endsWith('/'), {
+              message: '组件路径开头/末尾不需要带/',
+            });
+        }
+        // 为链接时非必填
+        return z.string().optional();
+      },
+      // 类型为菜单时显示
+      show: (values) => isMenuType(values.menuType),
+      triggerFields: ['menuType', 'router'],
+    },
+    fieldName: 'component',
+    help: '填写./src/views下的组件路径, 如system/menu/index',
+    label: '组件路径',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '是', value: true },
+        { label: '否', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: false,
+    dependencies: {
+      // 类型不为按钮时显示
+      show: (values) => !isComponentType(values.menuType),
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'isLink',
+    help: '外链为http(s)://开头\n 选择否时, 使用iframe从内部打开页面, 否则新窗口打开',
+    label: '是否外链',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '显示', value: true },
+        { label: '隐藏', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    dependencies: {
+      // 类型不为按钮时显示
+      show: (values) => !isComponentType(values.menuType),
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'isShow',
+    help: '隐藏后不会出现在菜单栏, 但仍然可以访问',
+    label: '是否显示',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    dependencies: {
+      // 类型不为按钮时显示
+      show: (values) => !isComponentType(values.menuType),
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'state',
+    help: '停用后不会出现在菜单栏, 也无法访问',
+    label: '菜单状态',
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      // 类型为菜单/按钮时显示
+      show: (values) => !isCatalogueType(values.menuType),
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'permissionCode',
+    help: `控制器中定义的权限字符\n 如: @SaCheckPermission("system:user:import")`,
+    label: '权限标识',
+  },
+  {
+    component: 'Input',
+    componentProps: (model) => ({
+      // 为链接时组件disabled
+      disabled: model.isLink,
+      placeholder: '必须为json字符串格式',
+    }),
+    dependencies: {
+      // 类型为菜单时显示
+      show: (values) => isMenuType(values.menuType),
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'query',
+    help: 'vue-router中的query属性\n 如{"name": "xxx", "age": 16}',
+    label: '路由参数',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '是', value: true },
+        { label: '否', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: false,
+    dependencies: {
+      // 类型为菜单时显示
+      show: (values) => isMenuType(values.menuType),
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'isCache',
+    help: '路由的keepAlive属性',
+    label: '是否缓存',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/menu/index.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { Menu } from '#/api/system/menu/model';
+
+import { computed, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { eachTree, getVxePopupContainer, treeToList } from '@vben/utils';
+
+import { Popconfirm, Space, Switch, Tooltip } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { menuCascadeRemove, menuList, menuRemove } from '#/api/system/menu';
+
+import { columns, querySchema } from './data';
+import menuDrawer from './menu-drawer.vue';
+
+// 空GUID，用于判断根节点
+const EMPTY_GUID = '00000000-0000-0000-0000-000000000000';
+
+type MenuRow = Omit<Menu, 'parentId'> & {
+  menuId: string;
+  parentId: string | null;
+};
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps<Record<string, any>> = {
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async (_, formValues = {}) => {
+        const resp = await menuList({
+          ...formValues,
+        });
+        // 统一处理数据：确保 menuId 和 parentId 存在，并将根节点的 parentId 置为 null
+        const items = (resp || []).map((item) => {
+          const menuId = String(item.id ?? '');
+          const parentId = item.parentId ? String(item.parentId) : null;
+          return {
+            ...item,
+            menuId,
+            // 将根节点的 parentId 置为 null，以便 vxe-table 正确识别根节点
+            parentId:
+              !parentId ||
+              parentId === EMPTY_GUID ||
+              parentId === menuId
+                ? null
+                : parentId,
+          } as MenuRow;
+        });
+        return { items };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'menuId',
+  },
+  /**
+   * 开启虚拟滚动
+   * 数据量小可以选择关闭
+   * 如果遇到样式问题(空白、错位 滚动等)可以选择关闭虚拟滚动
+   */
+  scrollY: {
+    enabled: true,
+    gt: 0,
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'menuId',
+    transform: true,
+  },
+  id: 'system-menu-index',
+};
+// @ts-expect-error TS2589: MenuRow 与 proxyConfig 组合导致类型实例化层级过深；运行时泛型已被擦除，可控，先压制报错。
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    cellDblclick: (e) => {
+      const { row = {} } = e;
+      if (!row?.children) {
+        return;
+      }
+      const isExpanded = row?.expand;
+      tableApi.grid.setTreeExpand(row, !isExpanded);
+      row.expand = !isExpanded;
+    },
+    // 需要监听使用箭头展开的情况 否则展开/折叠的数据不一致
+    toggleTreeExpand: (e) => {
+      const { row = {}, expanded } = e;
+      row.expand = expanded;
+    },
+  },
+});
+const [MenuDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: menuDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+function handleSubAdd(row: MenuRow) {
+  const { menuId } = row;
+  drawerApi.setData({ id: menuId, update: false });
+  drawerApi.open();
+}
+
+async function handleEdit(record: MenuRow) {
+  drawerApi.setData({ id: record.menuId, update: true });
+  drawerApi.open();
+}
+
+/**
+ * 是否级联删除
+ */
+const cascadingDeletion = ref(false);
+async function handleDelete(row: MenuRow) {
+  if (cascadingDeletion.value) {
+    // 级联删除
+    const menuAndChildren = treeToList<MenuRow[]>([row], { id: 'menuId' });
+    const menuIds = menuAndChildren.map((item) => String(item.menuId));
+    await menuCascadeRemove(menuIds);
+  } else {
+    // 单删除
+    await menuRemove([String(row.menuId)]);
+  }
+  await tableApi.query();
+}
+
+function removeConfirmTitle(row: MenuRow) {
+  const menuName = $t(row.menuName);
+  if (!cascadingDeletion.value) {
+    return `是否确认删除 [${menuName}] ?`;
+  }
+  const menuAndChildren = treeToList<MenuRow[]>([row], { id: 'menuId' });
+  if (menuAndChildren.length === 1) {
+    return `是否确认删除 [${menuName}] ?`;
+  }
+  return `是否确认删除 [${menuName}] 及 [${menuAndChildren.length - 1}]个子项目 ?`;
+}
+
+/**
+ * 编辑/添加成功后刷新表格
+ */
+async function afterEditOrAdd() {
+  tableApi.query();
+}
+
+/**
+ * 全部展开/折叠
+ * @param expand 是否展开
+ */
+function setExpandOrCollapse(expand: boolean) {
+  eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
+  tableApi.grid?.setAllTreeExpand(expand);
+}
+
+/**
+ * 与后台逻辑相同
+ * 只有租户管理和超级管理能访问菜单管理
+ * 注意: 只有超管才能对菜单进行`增删改`操作
+ * 注意: 只有超管才能对菜单进行`增删改`操作
+ * 注意: 只有超管才能对菜单进行`增删改`操作
+ */
+const { hasAccessByRoles } = useAccess();
+const isAdmin = computed(() => {
+  return hasAccessByRoles(['admin', 'superadmin']);
+});
+</script>
+
+<template>
+  <Page v-if="isAdmin" :auto-content-height="true">
+    <BasicTable table-title="菜单列表" table-title-help="双击展开/收起子菜单">
+      <template #toolbar-tools>
+        <Space>
+          <Tooltip title="删除菜单以及子菜单">
+            <div
+              v-access:role="['superadmin']"
+              v-access:code="['system:menu:remove']"
+              class="flex items-center"
+            >
+              <span class="mr-2 text-sm text-[#666666]">级联删除</span>
+              <Switch v-model:checked="cascadingDeletion" />
+            </div>
+          </Tooltip>
+          <a-button @click="setExpandOrCollapse(false)">
+            {{ $t('pages.common.collapse') }}
+          </a-button>
+          <a-button @click="setExpandOrCollapse(true)">
+            {{ $t('pages.common.expand') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:menu:add']"
+            v-access:role="['superadmin']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:menu:edit']"
+            v-access:role="['superadmin']"
+            @click="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <!-- '按钮类型'无法再添加子菜单 -->
+          <ghost-button
+            v-if="row.menuType !== 'F'"
+            class="btn-success"
+            v-access:code="['system:menu:add']"
+            v-access:role="['superadmin']"
+            @click="handleSubAdd(row)"
+          >
+            {{ $t('pages.common.add') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            :title="removeConfirmTitle(row)"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:menu:remove']"
+              v-access:role="['superadmin']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <MenuDrawer @reload="afterEditOrAdd" />
+  </Page>
+  <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/menu/menu-drawer.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import {
+  addFullName,
+  cloneDeep,
+  getPopupContainer,
+  listToTree,
+} from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { menuAdd, menuInfo, menuList, menuUpdate } from '#/api/system/menu';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+
+// 空GUID，用于判断根节点
+const EMPTY_GUID = '00000000-0000-0000-0000-000000000000';
+
+interface ModalProps {
+  id?: string;
+  update: boolean;
+}
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function setupMenuSelect() {
+  // menu
+  const menuArray = await menuList();
+  // support i18n
+  menuArray.forEach((item) => {
+    item.menuName = $t(item.menuName);
+  });
+  // const folderArray = menuArray.filter((item) => item.menuType === 'M');
+  /**
+   * 这里需要过滤掉按钮类型
+   * 不允许在按钮下添加数据
+   */
+  const filteredList = menuArray.filter((item) => item.menuType !== 'F');
+  const menuTree = listToTree(filteredList, { id: 'id', pid: 'parentId' });
+  const fullMenuTree = [
+    {
+      id: EMPTY_GUID,
+      menuName: $t('menu.root'),
+      children: menuTree,
+    },
+  ];
+  addFullName(fullMenuTree, 'menuName', ' / ');
+
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: {
+          label: 'menuName',
+          value: 'id',
+        },
+        getPopupContainer,
+        // 设置弹窗滚动高度 默认256
+        listHeight: 300,
+        showSearch: true,
+        treeData: fullMenuTree,
+        treeDefaultExpandAll: false,
+        // 默认展开的树节点
+        treeDefaultExpandedKeys: [EMPTY_GUID],
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'menuName',
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'parentId',
+    },
+  ]);
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id, update } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+
+    // 加载菜单树选择
+    await setupMenuSelect();
+    if (id) {
+      await formApi.setFieldValue('parentId', id);
+      if (update) {
+        const record = await menuInfo(id);
+        await formApi.setValues(record);
+      }
+    }
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? menuUpdate(data) : menuAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/notice/data.ts

@@ -0,0 +1,128 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'title',
+    label: '公告标题',
+  },
+  {
+    component: 'Input',
+    fieldName: 'creatorId',
+    label: '创建人',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NOTICE_TYPE),
+    },
+    fieldName: 'type',
+    label: '公告类型',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '公告标题',
+    field: 'title',
+  },
+  {
+    title: '公告类型',
+    field: 'type',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.type, DictEnum.SYS_NOTICE_TYPE);
+      },
+    },
+  },
+  {
+    title: '状态',
+    field: 'state',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.state ? '1' : '0', DictEnum.SYS_NOTICE_STATUS);
+      },
+    },
+  },
+  {
+    title: '创建人',
+    field: 'creatorId',
+    width: 150,
+  },
+  {
+    title: '创建时间',
+    field: 'creationTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: '主键',
+  },
+  {
+    component: 'Input',
+    fieldName: 'title',
+    label: '公告标题',
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NOTICE_STATUS),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'state',
+    label: '公告状态',
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NOTICE_TYPE),
+      optionType: 'button',
+    },
+    defaultValue: '1',
+    fieldName: 'type',
+    label: '公告类型',
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    component: 'RichTextarea',
+    componentProps: {
+      width: '100%',
+    },
+    fieldName: 'content',
+    label: '公告内容',
+    rules: 'required',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/notice/index.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { Notice } from '#/api/system/notice/model';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import { noticeList, noticeRemove } from '#/api/system/notice';
+
+import { columns, querySchema } from './data';
+import noticeModal from './notice-modal.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await noticeList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-notice-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [NoticeModal, modalApi] = useVbenModal({
+  connectedComponent: noticeModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(record: Notice) {
+  modalApi.setData({ id: record.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Notice) {
+  await noticeRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Notice) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await noticeRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="通知公告列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:notice:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:notice:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:notice:edit']"
+            @click="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:notice:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <NoticeModal @reload="tableApi.query()" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/notice/notice-modal.vue

@@ -0,0 +1,178 @@
+<!--
+2025年03月08日重构为原生表单(反向重构??)
+该文件作为例子 使用原生表单而非useVbenForm
+-->
+<script setup lang="ts">
+import type { RuleObject } from 'ant-design-vue/es/form';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { Form, FormItem, Input, RadioGroup } from 'ant-design-vue';
+import { pick } from 'lodash-es';
+
+import { noticeAdd, noticeInfo, noticeUpdate } from '#/api/system/notice';
+import { Tinymce } from '#/components/tinymce';
+import { getDictOptions } from '#/utils/dict';
+import { useBeforeCloseDiff } from '#/utils/popup';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+/**
+ * 定义表单数据类型
+ */
+interface FormData {
+  id?: string;
+  title?: string;
+  state?: boolean | string;
+  type?: string;
+  content?: string;
+}
+
+/**
+ * 定义默认值 用于reset
+ */
+const defaultValues: FormData = {
+  id: undefined,
+  title: '',
+  state: '0',
+  type: '1',
+  content: '',
+};
+
+/**
+ * 表单数据ref
+ */
+const formData = ref(defaultValues);
+
+type AntdFormRules<T> = Partial<Record<keyof T, RuleObject[]>> & {
+  [key: string]: RuleObject[];
+};
+/**
+ * 表单校验规则
+ */
+const formRules = ref<AntdFormRules<FormData>>({
+  state: [{ required: true, message: $t('ui.formRules.selectRequired') }],
+  content: [{ required: true, message: $t('ui.formRules.required') }],
+  type: [{ required: true, message: $t('ui.formRules.selectRequired') }],
+  title: [{ required: true, message: $t('ui.formRules.required') }],
+});
+
+/**
+ * useForm解构出表单方法
+ */
+const { validate, validateInfos, resetFields } = Form.useForm(
+  formData,
+  formRules,
+);
+
+function customFormValueGetter() {
+  return JSON.stringify(formData.value);
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  class: 'w-[800px]',
+  fullscreenButton: true,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: string };
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+      const record = await noticeInfo(id);
+      // 只赋值存在的字段，并处理state的转换（boolean转string用于RadioGroup）
+      const filterRecord = pick(record, Object.keys(defaultValues));
+      formData.value = {
+        ...filterRecord,
+        state: typeof filterRecord.state === 'boolean' ? (filterRecord.state ? '1' : '0') : filterRecord.state,
+      };
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    await validate();
+    // 可能会做数据处理 使用cloneDeep深拷贝
+    const data = cloneDeep(formData.value);
+    // 转换state从string到boolean（RadioGroup返回string，但API需要boolean）
+    if (typeof data.state === 'string') {
+      data.state = data.state === '1' || data.state === 'true';
+    }
+    await (isUpdate.value ? noticeUpdate(data) : noticeAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  formData.value = defaultValues;
+  resetFields();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <Form layout="vertical">
+      <FormItem label="公告标题" v-bind="validateInfos.title">
+        <Input
+          :placeholder="$t('ui.formRules.required')"
+          v-model:value="formData.title"
+        />
+      </FormItem>
+      <div class="grid sm:grid-cols-1 lg:grid-cols-2">
+        <FormItem label="公告状态" v-bind="validateInfos.state">
+          <RadioGroup
+            button-style="solid"
+            option-type="button"
+            v-model:value="formData.state"
+            :options="getDictOptions(DictEnum.SYS_NOTICE_STATUS)"
+          />
+        </FormItem>
+        <FormItem label="公告类型" v-bind="validateInfos.type">
+          <RadioGroup
+            button-style="solid"
+            option-type="button"
+            v-model:value="formData.type"
+            :options="getDictOptions(DictEnum.SYS_NOTICE_TYPE)"
+          />
+        </FormItem>
+      </div>
+      <FormItem label="公告内容" v-bind="validateInfos.content">
+        <Tinymce v-model="formData.content" />
+      </FormItem>
+    </Form>
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss-config/data.tsx

@@ -0,0 +1,223 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+
+import { Tag } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { getDictOptions } from '#/utils/dict';
+
+const accessPolicyOptions = [
+  { color: 'orange', label: '私有', value: '0' },
+  { color: 'green', label: '公开', value: '1' },
+  { color: 'blue', label: '自定义', value: '2' },
+];
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'configKey',
+    label: '配置名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'bucketName',
+    label: '桶名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '是', value: '0' },
+        { label: '否', value: '1' },
+      ],
+    },
+    fieldName: 'status',
+    label: '是否默认',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '配置名称',
+    field: 'configKey',
+  },
+  {
+    title: '访问站点',
+    field: 'endpoint',
+    showOverflow: true,
+  },
+  {
+    title: '桶名称',
+    field: 'bucketName',
+  },
+  {
+    title: '域',
+    field: 'region',
+  },
+  {
+    title: '权限桶类型',
+    field: 'accessPolicy',
+    slots: {
+      default: ({ row }) => {
+        const current = accessPolicyOptions.find(
+          (item) => item.value === row.accessPolicy,
+        );
+        if (current) {
+          return <Tag color={current.color}>{current.label}</Tag>;
+        }
+        return '未知类型';
+      },
+    },
+  },
+  {
+    title: '是否默认',
+    field: 'status',
+    slots: {
+      default: 'status',
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'ossConfigId',
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider1',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '基本信息',
+    }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'configKey',
+    label: '配置名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'endpoint',
+    label: '服务地址',
+    renderComponentContent: (formModel) => ({
+      addonBefore: () => (formModel.isHttps === 'Y' ? 'https://' : 'http://'),
+    }),
+    rules: z
+      .string()
+      .refine((domain) => domain && !/^https?:\/\/.*/.test(domain), {
+        message: '请输入正确的域名, 不需要http(s)',
+      }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'domain',
+    label: '自定义域名',
+  },
+  {
+    component: 'Input',
+    fieldName: 'tip',
+    label: '占位作为提示使用',
+    hideLabel: true,
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider2',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '认证信息',
+    }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'accessKey',
+    label: 'accessKey',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'secretKey',
+    label: 'secretKey',
+    rules: 'required',
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider3',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '其他信息',
+    }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'bucketName',
+    label: '桶名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'prefix',
+    label: '前缀',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: accessPolicyOptions,
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'accessPolicy',
+    formItemClass: 'col-span-3 lg:col-span-2',
+    label: '权限桶类型',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+      optionType: 'button',
+    },
+    defaultValue: 'N',
+    fieldName: 'isHttps',
+    formItemClass: 'col-span-3 lg:col-span-1',
+    label: '是否https',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'region',
+    label: '区域',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-start',
+    label: '备注',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss-config/index.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { OssConfig } from '#/api/system/oss-config/model';
+
+import { useAccess } from '@vben/access';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  ossConfigChangeStatus,
+  ossConfigList,
+  ossConfigRemove,
+} from '#/api/system/oss-config';
+import { TableSwitch } from '#/components/table';
+
+import { columns, querySchema } from './data';
+import ossConfigDrawer from './oss-config-drawer.vue';
+
+const formOptions: VbenFormProps = {
+  schema: querySchema(),
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await ossConfigList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'ossConfigId',
+  },
+  id: 'system-oss-config-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [OssConfigDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: ossConfigDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(record: OssConfig) {
+  drawerApi.setData({ id: record.ossConfigId });
+  drawerApi.open();
+}
+
+async function handleDelete(row: OssConfig) {
+  await ossConfigRemove([row.ossConfigId]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: OssConfig) => row.ossConfigId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await ossConfigRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+const { hasAccessByCodes } = useAccess();
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="oss配置列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:ossConfig:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:ossConfig:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <TableSwitch
+          v-model:value="row.status"
+          :api="() => ossConfigChangeStatus(row)"
+          :disabled="!hasAccessByCodes(['system:ossConfig:edit'])"
+          checked-text="是"
+          un-checked-text="否"
+          @reload="tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:ossConfig:edit']"
+            @click="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:ossConfig:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <OssConfigDrawer @reload="tableApi.query()" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss-config/oss-config-drawer.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { Alert } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  ossConfigAdd,
+  ossConfigInfo,
+  ossConfigUpdate,
+} from '#/api/system/oss-config';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-3',
+    labelWidth: 100,
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id } = drawerApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+      const record = await ossConfigInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    /**
+     * 这里解构出来的values只能获取到自定义校验参数的值
+     * 需要自行调用formApi.getValues()获取表单值
+     */
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? ossConfigUpdate(data) : ossConfigAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[650px]">
+    <BasicForm>
+      <template #tip>
+        <div class="ml-7 w-full">
+          <Alert
+            message="私有桶使用自定义域名无法预览, 但可以正常上传/下载"
+            show-icon
+            type="warning"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-divider) {
+  margin: 8px 0;
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss/config.vue

@@ -0,0 +1,11 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import OssConfigPage from '#/views/system/oss-config/index.vue';
+</script>
+
+<template>
+  <OssConfigPage />
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss/constant.ts

@@ -0,0 +1,2 @@
+/** 支持的图片列表 */
+export const supportImageList = ['jpg', 'jpeg', 'png', 'gif', 'webp'];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss/data.tsx

@@ -0,0 +1,75 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'fileName',
+    label: '文件名',
+  },
+  {
+    component: 'Input',
+    fieldName: 'originalName',
+    label: '原名',
+  },
+  {
+    component: 'Input',
+    fieldName: 'fileSuffix',
+    label: '拓展名',
+  },
+  {
+    component: 'Input',
+    fieldName: 'service',
+    label: '服务商',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '文件名',
+    field: 'fileName',
+    showOverflow: true,
+  },
+  {
+    title: '文件原名',
+    field: 'originalName',
+    showOverflow: true,
+  },
+  {
+    title: '文件拓展名',
+    field: 'fileSuffix',
+  },
+  {
+    title: '文件预览',
+    field: 'url',
+    showOverflow: true,
+    slots: { default: 'url' },
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+    sortable: true,
+  },
+  {
+    title: '上传人',
+    field: 'createByName',
+  },
+  {
+    title: '服务商',
+    field: 'service',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss/fallback-image.txt

@@ -0,0 +1 @@
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss/file-upload-modal.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { FileUpload } from '#/components/upload';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const fileList = ref<string[]>([]);
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      return null;
+    }
+    if (fileList.value.length > 0) {
+      fileList.value = [];
+      emit('reload');
+      modalApi.close();
+      return null;
+    }
+  },
+});
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :footer="false"
+    :fullscreen-button="false"
+    title="文件上传"
+  >
+    <div class="flex flex-col gap-4">
+      <FileUpload
+        v-model:value="fileList"
+        :enable-drag-upload="true"
+        :max-count="3"
+      />
+    </div>
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss/image-upload-modal.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ImageUpload } from '#/components/upload';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const fileList = ref<string[]>([]);
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      return null;
+    }
+    if (fileList.value.length > 0) {
+      fileList.value = [];
+      emit('reload');
+      modalApi.close();
+      return null;
+    }
+  },
+});
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :footer="false"
+    :fullscreen-button="false"
+    title="图片上传"
+  >
+    <div class="flex flex-col gap-4">
+      <ImageUpload v-model:value="fileList" :max-count="3" />
+    </div>
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/oss/index.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { PageQuery } from '#/api/common';
+import type { OssFile } from '#/api/system/oss/model';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { getVxePopupContainer } from '@vben/utils';
+
+import {
+  Image,
+  message,
+  Modal,
+  Popconfirm,
+  Space,
+  Spin,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import {
+  addSortParams,
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+} from '#/adapter/vxe-table';
+import { configInfoByKey } from '#/api/system/config';
+import { ossDownload, ossList, ossRemove } from '#/api/system/oss';
+import { calculateFileSize } from '#/utils/file';
+import { downloadByData } from '#/utils/file/download';
+
+import { supportImageList } from './constant';
+import { columns, querySchema } from './data';
+import fallbackImageBase64 from './fallback-image.txt?raw';
+import fileUploadModal from './file-upload-modal.vue';
+import imageUploadModal from './image-upload-modal.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginCreateTime]', 'params[endCreateTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page, sorts }, formValues = {}) => {
+        const params: PageQuery = {
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        };
+        // 添加排序参数
+        addSortParams(params, sorts);
+        return await ossList(params);
+      },
+    },
+  },
+  headerCellConfig: {
+    height: 44,
+  },
+  cellConfig: {
+    height: 65,
+  },
+  rowConfig: {
+    keyField: 'ossId',
+  },
+  sortConfig: {
+    // 远程排序
+    remote: true,
+    // 支持多字段排序 默认关闭
+    multiple: false,
+  },
+  id: 'system-oss-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    // 排序 重新请求接口
+    sortChange: () => tableApi.query(),
+  },
+});
+
+async function handleDownload(row: OssFile) {
+  const downloadSize = ref($t('pages.common.downloadLoading'));
+  const hideLoading = message.loading({
+    content: () => downloadSize.value,
+    duration: 0,
+  });
+  try {
+    const data = await ossDownload(row.ossId, (e) => {
+      // 计算下载进度
+      const percent = Math.floor((e.loaded / e.total!) * 100);
+      // 已经下载
+      const current = calculateFileSize(e.loaded);
+      // 总大小
+      const total = calculateFileSize(e.total!);
+      downloadSize.value = `已下载: ${current}/${total} (${percent}%)`;
+    });
+    downloadByData(data, row.originalName);
+    message.success('下载完成');
+  } finally {
+    hideLoading();
+  }
+}
+
+async function handleDelete(row: OssFile) {
+  await ossRemove([row.ossId]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: OssFile) => row.ossId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await ossRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+const router = useRouter();
+function handleToSettings() {
+  router.push('/system/oss-config/index');
+}
+
+const preview = ref(false);
+onMounted(async () => {
+  const previewStr = await configInfoByKey('sys.oss.previewListResource');
+  preview.value = previewStr === 'true';
+});
+
+/**
+ * 根据拓展名判断是否是图片
+ * @param ext 拓展名
+ */
+function isImageFile(ext: string) {
+  return supportImageList.some((item) =>
+    ext.toLocaleLowerCase().includes(item),
+  );
+}
+
+/**
+ * 判断是否是pdf文件
+ * @param ext 扩展名
+ */
+function isPdfFile(ext: string) {
+  return ext.toLocaleLowerCase().includes('pdf');
+}
+
+/**
+ * pdf预览 使用浏览器接管
+ * @param url 文件地址
+ */
+function pdfPreview(url: string) {
+  window.open(url);
+}
+
+const [ImageUploadModal, imageUploadApi] = useVbenModal({
+  connectedComponent: imageUploadModal,
+});
+
+const [FileUploadModal, fileUploadApi] = useVbenModal({
+  connectedComponent: fileUploadModal,
+});
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="文件列表">
+      <template #toolbar-tools>
+        <Space>
+          <Tooltip title="预览图片">
+            <Switch v-model:checked="preview" />
+          </Tooltip>
+          <a-button
+            v-access:code="['system:ossConfig:list']"
+            @click="handleToSettings"
+          >
+            配置管理
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:oss:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            v-access:code="['system:oss:upload']"
+            @click="fileUploadApi.open"
+          >
+            文件上传
+          </a-button>
+          <a-button
+            v-access:code="['system:oss:upload']"
+            @click="imageUploadApi.open"
+          >
+            图片上传
+          </a-button>
+        </Space>
+      </template>
+      <template #url="{ row }">
+        <!-- placeholder为图片未加载时显示的占位图 -->
+        <!-- fallback为图片加载失败时显示 -->
+        <!-- 需要设置key属性 否则切换翻页会有延迟 -->
+        <Image
+          :key="row.ossId"
+          v-if="preview && isImageFile(row.url)"
+          :src="row.url"
+          height="50px"
+          :fallback="fallbackImageBase64"
+        >
+          <template #placeholder>
+            <div class="flex size-full items-center justify-center">
+              <Spin />
+            </div>
+          </template>
+        </Image>
+        <!-- pdf预览 使用浏览器开新窗口 -->
+        <span
+          v-else-if="preview && isPdfFile(row.url)"
+          class="icon-[vscode-icons--file-type-pdf2] size-10 cursor-pointer"
+          @click.stop="pdfPreview(row.url)"
+        ></span>
+        <span v-else>{{ row.url }}</span>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:oss:download']"
+            @click="handleDownload(row)"
+          >
+            {{ $t('pages.common.download') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:oss:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <ImageUploadModal @reload="tableApi.query" />
+    <FileUploadModal @reload="tableApi.query" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/post/data.ts

@@ -0,0 +1,131 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'postCode',
+    label: '岗位编码',
+  },
+  {
+    component: 'Input',
+    fieldName: 'postName',
+    label: '岗位名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+    },
+    fieldName: 'state',
+    label: '状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '岗位编码',
+    field: 'postCode',
+  },
+  {
+    title: '岗位名称',
+    field: 'postName',
+  },
+  {
+    title: '排序',
+    field: 'orderNum',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(String(row.state), DictEnum.SYS_NORMAL_DISABLE);
+      },
+    },
+  },
+  {
+    title: '创建时间',
+    field: 'creationTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: 'id',
+  },
+  {
+    component: 'TreeSelect',
+    componentProps: {
+      getPopupContainer,
+    },
+    fieldName: 'deptId',
+    label: '所属部门',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    fieldName: 'postName',
+    label: '岗位名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'postCode',
+    label: '岗位编码',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'orderNum',
+    label: '岗位排序',
+    rules: 'required',
+    defaultValue: 0,
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    fieldName: 'state',
+    label: '岗位状态',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-start',
+    label: '备注',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/post/index.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { Post } from '#/api/system/post/model';
+
+import { ref } from 'vue';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import { postExport, postList, postRemove } from '#/api/system/post';
+import { commonDownloadExcel } from '#/utils/file/download';
+import DeptTree from '#/views/system/user/dept-tree.vue';
+
+import { columns, querySchema } from './data';
+import postDrawer from './post-drawer.vue';
+
+// 左边部门用
+const selectDeptId = ref<string[]>([]);
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  handleReset: async () => {
+    selectDeptId.value = [];
+    // eslint-disable-next-line no-use-before-define
+    const { formApi, reload } = tableApi;
+    await formApi.resetForm();
+    const formValues = formApi.form.values;
+    formApi.setLatestSubmissionValues(formValues);
+    await reload(formValues);
+  },
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    trigger: 'cell',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        // 部门树选择处理
+        if (selectDeptId.value.length === 1) {
+          formValues.deptId = selectDeptId.value[0];
+        } else {
+          Reflect.deleteProperty(formValues, 'deptId');
+        }
+
+        return await postList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-post-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [PostDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: postDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(record: Post) {
+  drawerApi.setData({ id: record.id });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Post) {
+  await postRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Post) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await postRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(postExport, '岗位信息', tableApi.formApi.form.values);
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true" content-class="flex gap-[8px] w-full">
+    <DeptTree
+      v-model:select-dept-id="selectDeptId"
+      class="w-[260px]"
+      @reload="() => tableApi.reload()"
+      @select="() => tableApi.reload()"
+    />
+    <BasicTable class="flex-1 overflow-hidden" table-title="岗位列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:post:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:post:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:post:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <GhostButton
+            v-access:code="['system:post:edit']"
+            @click="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </GhostButton>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <GhostButton
+              danger
+              v-access:code="['system:post:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </GhostButton>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <PostDrawer @reload="tableApi.query()" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/post/post-drawer.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { postAdd, postInfo, postUpdate } from '#/api/system/post';
+import { getDeptTree } from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function setupDeptSelect() {
+  const deptTree = await getDeptTree();
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  addFullName(deptTree, 'deptName', ' / ');
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: { label: 'deptName', value: 'id' },
+        treeData: deptTree,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'deptId',
+    },
+  ]);
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+    const { id } = drawerApi.getData() as { id?: string };
+    isUpdate.value = !!id;
+    // 初始化
+    await setupDeptSelect();
+    // 更新 && 赋值
+    if (isUpdate.value && id) {
+      const record = await postInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? postUpdate(data) : postAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role-assign/data.tsx

@@ -0,0 +1,43 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'phonenumber',
+    label: '手机号码',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '用户账号',
+    field: 'userName',
+  },
+  {
+    title: '用户昵称',
+    field: 'nickName',
+  },
+  {
+    title: '邮箱',
+    field: 'email',
+  },
+  {
+    title: '手机号',
+    field: 'phonenumber',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role-assign/index.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { User } from '#/api/system/user/model';
+
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { message, Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  roleAllocatedList,
+  roleAuthCancelAll,
+} from '#/api/system/role';
+
+import { columns, querySchema } from './data';
+import roleAssignDrawer from './role-assign-drawer.vue';
+
+const route = useRoute();
+const router = useRouter();
+const roleId = route.params.roleId as string;
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues = {}) => {
+          // 校验roleId是否为空
+          if (!roleId || roleId === ':roleId') {
+            message.error('角色信息丢失，请重新点击分配');
+            // 重定向回角色列表
+            router.push('/system/role');
+            return {
+              items: [],
+              total: 0,
+            };
+          }
+          return await roleAllocatedList(roleId, {
+            SkipCount: page.currentPage,
+            MaxResultCount: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-role-assign-index',
+};
+// @ts-expect-error TS2589: User 与 proxyConfig 组合导致类型实例化层级过深；运行时泛型已被擦除，可控，先压制报错。
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [RoleAssignDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: roleAssignDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+/**
+ * 取消授权 一条记录
+ */
+async function handleAuthCancel(record: User) {
+  await roleAuthCancelAll(roleId, [record.id]);
+  await tableApi.query();
+}
+
+/**
+ * 批量取消授权
+ */
+function handleMultipleAuthCancel() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: User) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认取消选中的${ids.length}条授权记录吗？`,
+    onOk: async () => {
+      await roleAuthCancelAll(roleId, ids);
+      await tableApi.query();
+      tableApi.grid.clearCheckboxRow();
+    },
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="已分配的用户列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:role:remove']"
+            @click="handleMultipleAuthCancel"
+          >
+            取消授权
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:role:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Popconfirm
+          :get-popup-container="getVxePopupContainer"
+          :title="`是否取消授权用户[${row.userName} - ${row.nick}]?`"
+          placement="left"
+          @confirm="handleAuthCancel(row)"
+        >
+          <ghost-button
+            danger
+            v-access:code="['system:role:remove']"
+            @click.stop=""
+          >
+            取消授权
+          </ghost-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+    <RoleAssignDrawer @reload="tableApi.query()" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role-assign/role-assign-drawer.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { useRoute } from 'vue-router';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { roleSelectAll, roleUnallocatedList } from '#/api/system/role';
+
+import { columns, querySchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onConfirm: handleSubmit,
+  onCancel: handleReset,
+  destroyOnClose: true,
+});
+
+const route = useRoute();
+const roleId = route.params.roleId as string;
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    trigger: 'row',
+  },
+  columns: columns?.filter((item) => item.field !== 'action'),
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await roleUnallocatedList(roleId, {
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+async function handleSubmit() {
+  const records = tableApi.grid.getCheckboxRecords();
+  const userIds = records.map((item) => item.id);
+  if (userIds.length > 0) {
+    await roleSelectAll(roleId, userIds);
+  }
+  handleReset();
+  emit('reload');
+}
+
+function handleReset() {
+  drawerApi.close();
+}
+</script>
+
+<template>
+  <BasicDrawer class="w-[800px]" title="选择用户">
+    <BasicTable />
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role/authUser.vue

@@ -0,0 +1,11 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import RoleAssignPage from '#/views/system/role-assign/index.vue';
+</script>
+
+<template>
+  <RoleAssignPage />
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role/data.tsx

@@ -0,0 +1,210 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getPopupContainer } from '@vben/utils';
+
+import { Tag } from 'ant-design-vue';
+
+/**
+ * authScopeOptions user也会用到
+ */
+export const authScopeOptions = [
+  { color: 'green', label: '全部数据权限', value: 'ALL' },
+  { color: 'default', label: '自定数据权限', value: 'CUSTOM' },
+  { color: 'orange', label: '本部门数据权限', value: 'DEPT' },
+  { color: 'cyan', label: '本部门及以下数据权限', value: 'DEPT_FOLLOW' },
+  { color: 'error', label: '仅本人数据权限', value: 'USER' },
+];
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'roleName',
+    label: '角色名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'roleCode',
+    label: '角色编码',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+    },
+    fieldName: 'state',
+    label: '状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'creationTime',
+    label: '创建时间',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '角色名称',
+    field: 'roleName',
+  },
+  {
+    title: '角色编码',
+    field: 'roleCode',
+    slots: {
+      default: ({ row }) => {
+        return <Tag color="processing">{row.roleCode}</Tag>;
+      },
+    },
+  },
+  {
+    title: '数据权限',
+    field: 'dataScope',
+    slots: {
+      default: ({ row }) => {
+        const found = authScopeOptions.find(
+          (item) => item.value === row.dataScope,
+        );
+        if (found) {
+          return <Tag color={found.color}>{found.label}</Tag>;
+        }
+        return <Tag>{row.dataScope}</Tag>;
+      },
+    },
+  },
+  {
+    title: '排序',
+    field: 'orderNum',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    slots: { default: 'status' },
+  },
+  {
+    title: '创建时间',
+    field: 'creationTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: '角色ID',
+  },
+  {
+    component: 'Input',
+    fieldName: 'roleName',
+    label: '角色名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'roleCode',
+    help: '如: admin, user 等',
+    label: '角色编码',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'orderNum',
+    label: '排序',
+    rules: 'required',
+    defaultValue: 0,
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    fieldName: 'state',
+    label: '状态',
+  },
+  {
+    component: 'Input',
+    defaultValue: [],
+    fieldName: 'menuIds',
+    label: '菜单权限',
+    formItemClass: 'col-span-2',
+  },
+  {
+    component: 'Textarea',
+    defaultValue: '',
+    fieldName: 'remark',
+    formItemClass: 'col-span-2',
+    label: '备注',
+  },
+];
+
+export const authModalSchemas: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: '角色ID',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'roleName',
+    label: '角色名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'roleCode',
+    label: '角色编码',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      options: authScopeOptions,
+    },
+    fieldName: 'dataScope',
+    help: '更改后需要用户重新登录才能生效',
+    label: '权限范围',
+  },
+  {
+    component: 'TreeSelect',
+    defaultValue: [],
+    dependencies: {
+      show: (values) => values.dataScope === 'CUSTOM',
+      triggerFields: ['dataScope'],
+    },
+    fieldName: 'deptIds',
+    help: '更改后立即生效',
+    label: '部门权限',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role/index.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { Role } from '#/api/system/role/model';
+
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  roleExport,
+  roleList,
+  roleRemove,
+  roleUpdate,
+} from '#/api/system/role';
+import { TableSwitch } from '#/components/table';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
+import roleAuthModal from './role-datascope-drawer.vue';
+import roleDrawer from './role-drawer.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'creationTime',
+      ['startTime', 'endTime'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await roleList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-role-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+const [RoleDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: roleDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(record: Role) {
+  drawerApi.setData({ id: record.id });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Role) {
+  await roleRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Role) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await roleRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(roleExport, '角色数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => hasAccessByRoles(['superadmin']));
+
+const [RoleAuthModal, authModalApi] = useVbenModal({
+  connectedComponent: roleAuthModal,
+});
+
+function handleAuthEdit(record: Role) {
+  authModalApi.setData({ id: record.id });
+  authModalApi.open();
+}
+
+const router = useRouter();
+function handleAssignRole(record: Role) {
+  router.push(`/system/role-auth/user/${record.id}`);
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="角色列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:role:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:role:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:role:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>      
+      <template #status="{ row }">
+        <TableSwitch
+          v-model:value="row.state"
+          :api="() => roleUpdate(row)"
+          :disabled="
+            row.id === '1' ||
+            row.roleCode === 'admin' ||
+            !hasAccessByCodes(['system:role:edit'])
+          "
+          @reload="tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <!-- 租户管理员不可修改admin角色 防止误操作 -->
+        <!-- 超级管理员可通过租户切换来操作租户管理员角色 -->
+        <template
+          v-if="row.roleCode !== 'admin' || isSuperAdmin"
+        >
+          <Space>
+            <ghost-button
+              v-access:code="['system:role:edit']"
+              @click.stop="handleEdit(row)"
+            >
+              {{ $t('pages.common.edit') }}
+            </ghost-button>
+            <ghost-button
+              v-access:code="['system:role:edit']"
+              @click.stop="handleAuthEdit(row)"
+            >
+              权限
+            </ghost-button>
+            <ghost-button
+              v-access:code="['system:role:edit']"
+              @click.stop="handleAssignRole(row)"
+            >
+              分配
+            </ghost-button>
+            <Popconfirm
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              title="确认删除？"
+              @confirm="handleDelete(row)"
+            >
+              <ghost-button
+                danger
+                v-access:code="['system:role:remove']"
+                @click.stop=""
+              >
+                {{ $t('pages.common.delete') }}
+              </ghost-button>
+            </Popconfirm>
+          </Space>
+        </template>
+      </template>
+    </BasicTable>
+    <RoleDrawer @reload="tableApi.query()" />
+    <RoleAuthModal @reload="tableApi.query()" />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role/role-datascope-drawer.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { DeptOption } from '#/api/system/role/model';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { roleDataScope, roleDeptTree, roleInfo } from '#/api/system/role';
+import { TreeSelectPanel } from '#/components/tree';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { authModalSchemas } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'vertical',
+  schema: authModalSchemas(),
+  showDefaultActions: false,
+});
+
+// 空GUID，用于判断根节点
+const EMPTY_GUID = '00000000-0000-0000-0000-000000000000';
+
+const deptTree = ref<DeptOption[]>([]);
+async function setupDeptTree(id: number | string) {
+  const resp = await roleDeptTree(id);
+  // 处理部门树数据：将根节点的 parentId 置为 null，以便 Tree 组件正确识别根节点
+  const processedDepts = resp.depts.map((dept) => {
+    const processNode = (node: DeptOption): DeptOption => {
+      return {
+        ...node,
+        parentId:
+          !node.parentId || node.parentId === EMPTY_GUID ? null : node.parentId,
+        children: node.children?.map(processNode) ?? null,
+      };
+    };
+    return processNode(dept);
+  });
+  deptTree.value = processedDepts;
+  // 设置已选中的部门IDs
+  formApi.setFieldValue('deptIds', resp.checkedKeys);
+}
+
+async function customFormValueGetter() {
+  const v = await defaultFormValueGetter(formApi)();
+  // 获取勾选信息
+  const menuIds = deptSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+  const mixStr = v + menuIds.join(',');
+  return mixStr;
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id: number | string };
+
+    setupDeptTree(id);
+    const record = await roleInfo(id);
+    await formApi.setValues(record);
+    markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+/**
+ * 这里拿到的是一个数组ref
+ */
+const deptSelectRef = ref();
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    // 不为自定义权限的话 删除部门id
+    if (data.dataScope === 'CUSTOM') {
+      const deptIds = deptSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+      data.deptIds = deptIds;
+    } else {
+      data.deptIds = [];
+    }
+    await roleDataScope(data);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+/**
+ * 通过回调更新 无法通过v-model
+ * @param value 菜单选择是否严格模式
+ */
+function handleCheckStrictlyChange(value: boolean) {
+  formApi.setFieldValue('deptCheckStrictly', value);
+}
+</script>
+
+<template>
+  <BasicModal class="min-h-[600px] w-[550px]" title="分配权限">
+    <BasicForm>
+      <template #deptIds="slotProps">
+        <TreeSelectPanel
+          ref="deptSelectRef"
+          v-bind="slotProps"
+          :check-strictly="formApi.form.values.deptCheckStrictly"
+          :expand-all-on-init="true"
+          :field-names="{ key: 'id', title: 'deptName' }"
+          :tree-data="deptTree"
+          @check-strictly-change="handleCheckStrictlyChange"
+        />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/role/role-drawer.vue

@@ -0,0 +1,171 @@
+<!--
+TODO: 这个页面要优化逻辑
+-->
+<script setup lang="ts">
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, eachTree } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { menuTreeSelect } from '#/api/system/menu';
+import {
+  roleAdd,
+  roleInfo,
+  roleMenuTreeSelect,
+  roleUpdate,
+} from '#/api/system/role';
+import { MenuSelectTable } from '#/components/tree';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2 gap-x-4',
+});
+
+const menuTree = ref<MenuOption[]>([]);
+async function setupMenuTree(id?: number | string) {
+  if (id) {
+    const resp = await roleMenuTreeSelect(id);
+    const menus = resp.menus;
+    // i18n处理
+    eachTree(menus, (node) => {
+      node.menuName = $t(node.menuName);
+    });
+    // 设置菜单信息
+    menuTree.value = resp.menus;
+    // keys依赖于menu 需要先加载menu
+    await nextTick();
+    await formApi.setFieldValue('menuIds', resp.checkedKeys);
+  } else {
+    const resp = await menuTreeSelect();
+    // i18n处理
+    eachTree(resp, (node) => {
+      node.menuName = $t(node.menuName);
+    });
+    // 设置菜单信息
+    menuTree.value = resp;
+    // keys依赖于menu 需要先加载menu
+    await nextTick();
+    await formApi.setFieldValue('menuIds', []);
+  }
+}
+
+async function customFormValueGetter() {
+  const v = await defaultFormValueGetter(formApi)();
+  // 获取勾选信息
+  const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
+  const mixStr = v + menuIds.join(',');
+  return mixStr;
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  destroyOnClose: true,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id } = drawerApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await roleInfo(id);
+      await formApi.setValues(record);
+    }
+    // init菜单 注意顺序要放在赋值record之后 内部watch会依赖record
+    await setupMenuTree(id);
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    data.menuIds = menuIds;
+    await (isUpdate.value ? roleUpdate(data) : roleAdd(data));
+    emit('reload');
+    resetInitialized();
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+/**
+ * 通过回调更新 无法通过v-model
+ * @param value 菜单选择是否严格模式
+ */
+function handleMenuCheckStrictlyChange(value: boolean) {
+  formApi.setFieldValue('menuCheckStrictly', value);
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[800px]">
+    <BasicForm>
+      <template #menuIds="slotProps">
+        <div class="h-[600px] w-full">
+          <!-- association为readonly 不能通过v-model绑定 -->
+          <MenuSelectTable
+            ref="menuSelectRef"
+            :checked-keys="slotProps.value"
+            :association="formApi.form.values.menuCheckStrictly"
+            :menus="menuTree"
+            @update:association="handleMenuCheckStrictlyChange"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/tenant/data.tsx

@@ -0,0 +1,268 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getPopupContainer } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import { z } from '#/adapter/form';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'id',
+    label: '租户编号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '租户名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactUserName',
+    label: '联系人',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactPhone',
+    label: '联系电话',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '租户编号',
+    field: 'id',
+  },
+  {
+    title: '租户名称',
+    field: 'name',
+  },
+  {
+    title: '联系人',
+    field: 'contactUserName',
+  },
+  {
+    title: '联系电话',
+    field: 'contactPhone',
+  },
+  {
+    title: '到期时间',
+    field: 'expireTime',
+    formatter: ({ cellValue }) => {
+      if (!cellValue) {
+        return '无期限';
+      }
+      return cellValue;
+    },
+  },
+  {
+    title: '租户状态',
+    field: 'status',
+    slots: { default: 'status' },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+const defaultExpireTime = dayjs()
+  .add(365, 'days')
+  .startOf('day')
+  .format('YYYY-MM-DD HH:mm:ss');
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: 'id',
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'tenantId',
+    label: 'tenantId',
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider1',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '基本信息',
+    }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '租户名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactUserName',
+    label: '联系人',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactPhone',
+    label: '联系电话',
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, { message: '请输入正确的联系电话' }),
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider2',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '管理员信息',
+    }),
+    dependencies: {
+      if: (values) => !values?.tenantId,
+      triggerFields: ['tenantId'],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'username',
+    label: '用户账号',
+    rules: 'required',
+    dependencies: {
+      if: (values) => !values?.tenantId,
+      triggerFields: ['tenantId'],
+    },
+  },
+  {
+    component: 'InputPassword',
+    fieldName: 'password',
+    label: '用户密码',
+    rules: 'required',
+    dependencies: {
+      if: (values) => !values?.tenantId,
+      triggerFields: ['tenantId'],
+    },
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider3',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '租户设置',
+    }),
+  },
+  // {
+  //   component: 'Select',
+  //   componentProps: {
+  //     getPopupContainer,
+  //   },
+  //   fieldName: 'packageId',
+  //   label: '租户套餐',
+  //   rules: 'selectRequired',
+  // },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      getPopupContainer,
+    },
+    defaultValue: defaultExpireTime,
+    fieldName: 'expireTime',
+    help: `已经设置过期时间不允许重置为'无期限'\n即在开通时未设置无期限 以后都不允许设置`,
+    label: '过期时间',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      min: -1,
+    },
+    defaultValue: -1,
+    fieldName: 'accountCount',
+    help: '-1不限制用户数量',
+    label: '用户数量',
+    renderComponentContent(model) {
+      return {
+        addonBefore: () =>
+          model.accountCount === -1 ? '不限制数量' : '输入数量',
+      };
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'domain',
+    help: '可填写域名/端口 填写域名如: www.test.com 或者 www.test.com:8080 填写ip:端口如: 127.0.0.1:8080',
+    label: '绑定域名',
+    renderComponentContent() {
+      return {
+        addonBefore: () => 'http(s)://',
+      };
+    },
+    rules: z
+      .string()
+      .refine(
+        (domain) =>
+          !(domain.startsWith('http://') || domain.startsWith('https://')),
+        { message: '请输入正确的域名, 不需要http(s)' },
+      )
+      .optional(),
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider4',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '企业信息',
+    }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'address',
+    label: '企业地址',
+  },
+  {
+    component: 'Input',
+    fieldName: 'licenseNumber',
+    label: '企业代码',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'intro',
+    formItemClass: 'items-start',
+    label: '企业介绍',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-start',
+    label: '备注',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/tenant/index.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { Tenant } from '#/api/system/tenant/model';
+
+import { computed } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  dictSyncTenant,
+  tenantExport,
+  tenantList,
+  tenantRemove,
+  tenantUpdate,
+  // tenantSyncPackage,
+} from '#/api/system/tenant';
+import { TableSwitch } from '#/components/table';
+import { useTenantStore } from '#/store/tenant';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
+import tenantDrawer from './tenant-drawer.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+    checkMethod: ({ row }) => row?.id !== '00000000-0000-0000-0000-000000000001',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await tenantList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-tenant-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [TenantDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: tenantDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(record: Tenant) {
+  drawerApi.setData({ id: record.id });
+  drawerApi.open();
+}
+
+// async function handleSync(record: Tenant) {
+//   const tenantId = record.tenantId || record.id;
+//   const packageId = record.packageId;
+//   if (tenantId && packageId) {
+//     await tenantSyncPackage(tenantId, packageId);
+//     await tableApi.query();
+//   }
+// }
+
+const tenantStore = useTenantStore();
+async function handleDelete(row: Tenant) {
+  await tenantRemove([row.id]);
+  await tableApi.query();
+  // 重新加载租户信息
+  tenantStore.initTenant();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Tenant) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await tenantRemove(ids);
+      await tableApi.query();
+      // 重新加载租户信息
+      tenantStore.initTenant();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(tenantExport, '租户数据', tableApi.formApi.form.values);
+}
+
+/**
+ * 与后台逻辑相同
+ * 只有超级管理员能访问租户相关
+ */
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => {
+  return hasAccessByRoles(['superadmin']);
+});
+
+function handleSyncTenantDict() {
+  Modal.confirm({
+    title: '提示',
+    iconType: 'warning',
+    content: '确认同步租户字典？',
+    onOk: async () => {
+      await dictSyncTenant();
+      await tableApi.query();
+    },
+  });
+}
+</script>
+
+<template>
+  <Page v-if="isSuperAdmin" :auto-content-height="true">
+    <BasicTable table-title="租户列表">
+      <template #toolbar-tools>
+        <Space>
+          <!-- <a-button
+            v-access:code="['system:tenant:edit']"
+            @click="handleSyncTenantDict"
+          >
+            同步租户字典
+          </a-button> -->
+          <a-button
+            v-access:code="['system:tenant:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:tenant:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:tenant:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <TableSwitch
+          v-model:value="row.status"
+          :api="() => tenantUpdate(row)"
+          :disabled="row.id === '00000000-0000-0000-0000-000000000001' || !hasAccessByCodes(['system:tenant:edit'])"
+          @reload="tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <Space v-if="row.id !== '00000000-0000-0000-0000-000000000001'">
+          <ghost-button
+            v-access:code="['system:tenant:edit']"
+            @click="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <!-- <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            :title="`确认同步[${row.name || row.companyName}]的套餐吗?`"
+            placement="left"
+            @confirm="handleSync(row)"
+          >
+            <ghost-button
+              class="btn-success"
+              v-access:code="['system:tenant:edit']"
+            >
+              {{ $t('pages.common.sync') }}
+            </ghost-button>
+          </Popconfirm> -->
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:tenant:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <TenantDrawer @reload="tableApi.query()" />
+  </Page>
+  <Fallback v-else description="您没有租户的访问权限" status="403" />
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/tenant/tenant-drawer.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { tenantAdd, tenantInfo, tenantUpdate } from '#/api/system/tenant';
+// import { packageSelectList } from '#/api/system/tenant-package';
+import { useTenantStore } from '#/store/tenant';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+// async function setupPackageSelect() {
+//   const tenantPackageList = await packageSelectList();
+//   const options = tenantPackageList.map((item) => ({
+//     label: item.packageName,
+//     value: item.packageId,
+//   }));
+//   formApi.updateSchema([
+//     {
+//       componentProps: {
+//         optionFilterProp: 'label',
+//         optionLabelProp: 'label',
+//         options,
+//         showSearch: true,
+//       },
+//       fieldName: 'packageId',
+//     },
+//   ]);
+// }
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id } = drawerApi.getData() as { id?: string };
+    isUpdate.value = !!id;
+    // 初始化
+    // await setupPackageSelect();
+
+    if (isUpdate.value && id) {
+      const record = await tenantInfo(id);
+      await formApi.setValues(record);
+    }
+
+    // formApi.updateSchema([
+    //   {
+    //     fieldName: 'packageId',
+    //     componentProps: {
+    //       disabled: isUpdate.value,
+    //     },
+    //   },
+    // ]);
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+const tenantStore = useTenantStore();
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? tenantUpdate(data) : tenantAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+    // 重新加载租户信息
+    tenantStore.initTenant();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicDrawer>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-divider) {
+  margin: 8px 0;
+}
+</style>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/tenantPackage/data.ts

@@ -0,0 +1,71 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'packageName',
+    label: '套餐名称',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '套餐名称',
+    field: 'packageName',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '状态',
+    field: 'status',
+    slots: { default: 'status' },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'packageId',
+  },
+  {
+    component: 'Radio',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'menuCheckStrictly',
+  },
+  {
+    component: 'Input',
+    fieldName: 'packageName',
+    label: '套餐名称',
+    rules: 'required',
+  },
+  {
+    component: 'menuIds',
+    defaultValue: [],
+    fieldName: 'menuIds',
+    label: '关联菜单',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    label: '备注',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/tenantPackage/index.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { TenantPackage } from '#/api/system/tenant-package/model';
+
+import { computed } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  packageChangeStatus,
+  packageExport,
+  packageList,
+  packageRemove,
+} from '#/api/system/tenant-package';
+import { TableSwitch } from '#/components/table';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
+import tenantPackageDrawer from './tenant-package-drawer.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await packageList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'packageId',
+  },
+  id: 'system-tenant-package-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [TenantPackageDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: tenantPackageDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(record: TenantPackage) {
+  drawerApi.setData({ id: record.packageId });
+  drawerApi.open();
+}
+
+async function handleDelete(row: TenantPackage) {
+  await packageRemove([row.packageId]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: TenantPackage) => row.packageId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await packageRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    packageExport,
+    '租户套餐数据',
+    tableApi.formApi.form.values,
+  );
+}
+
+/**
+ * 与后台逻辑相同
+ * 只有超级管理员能访问租户相关
+ */
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => {
+  return hasAccessByRoles(['superadmin']);
+});
+</script>
+
+<template>
+  <Page v-if="isSuperAdmin" :auto-content-height="true">
+    <BasicTable table-title="租户套餐列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:tenantPackage:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:tenantPackage:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:tenantPackage:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <TableSwitch
+          v-model:value="row.status"
+          :api="() => packageChangeStatus(row)"
+          :disabled="!hasAccessByCodes(['system:tenantPackage:edit'])"
+          @reload="tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['system:tenantPackage:edit']"
+            @click="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:tenantPackage:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <TenantPackageDrawer @reload="tableApi.query()" />
+  </Page>
+  <Fallback v-else description="您没有租户的访问权限" status="403" />
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, eachTree } from '@vben/utils';
+
+import { omit } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { tenantPackageMenuTreeSelect } from '#/api/system/menu';
+import {
+  packageAdd,
+  packageInfo,
+  packageUpdate,
+} from '#/api/system/tenant-package';
+import { MenuSelectTable } from '#/components/tree';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+  },
+  layout: 'vertical',
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const menuTree = ref<MenuOption[]>([]);
+async function setupMenuTree(id?: number | string) {
+  // 0为新增使用  获取除了`租户管理`的所有菜单
+  const resp = await tenantPackageMenuTreeSelect(id ?? 0);
+  const menus = resp.menus;
+  // i18n处理
+  eachTree(menus, (node) => {
+    node.menuName = $t(node.menuName);
+  });
+  // 设置菜单信息
+  menuTree.value = menus;
+  // keys依赖于menu 需要先加载menu
+  await nextTick();
+  await formApi.setFieldValue('menuIds', resp.checkedKeys);
+}
+
+async function customFormValueGetter() {
+  const v = await defaultFormValueGetter(formApi)();
+  // 获取勾选信息
+  const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
+  const mixStr = v + menuIds.join(',');
+  return mixStr;
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  destroyOnClose: true,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id } = drawerApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+      const record = await packageInfo(id);
+      // 需要排除menuIds menuIds为string
+      // 通过setupMenuTreeSelect设置
+      await formApi.setValues(omit(record, ['menuIds']));
+    }
+    // init菜单 注意顺序要放在赋值record之后 内部watch会依赖record
+    await setupMenuTree(id);
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
+async function handleConfirm() {
+  try {
+    drawerApi.drawerLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    data.menuIds = menuIds;
+    await (isUpdate.value ? packageUpdate(data) : packageAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.drawerLoading(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+/**
+ * 通过回调更新 无法通过v-model
+ * @param value 菜单选择是否严格模式
+ */
+function handleMenuCheckStrictlyChange(value: boolean) {
+  formApi.setFieldValue('menuCheckStrictly', value);
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[800px]">
+    <BasicForm>
+      <template #menuIds="slotProps">
+        <div class="h-[600px] w-full">
+          <!-- association为readonly 不能通过v-model绑定 -->
+          <MenuSelectTable
+            ref="menuSelectRef"
+            :checked-keys="slotProps.value"
+            :association="formApi.form.values.menuCheckStrictly"
+            :menus="menuTree"
+            @update:association="handleMenuCheckStrictlyChange"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/authRole.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    ele版本会使用这个文件 只是为了不报错`未找到对应组件`才新建的这个文件
+    无实际意义
+  </div>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/data.tsx

@@ -0,0 +1,210 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'nick',
+    label: '用户昵称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'phone',
+    label: '手机号码',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+    },
+    fieldName: 'state',
+    label: '用户状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'creationTime',
+    label: '创建时间',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    field: 'userName',
+    title: '账号',
+    minWidth: 80,
+  },
+  {
+    field: 'nick',
+    title: '昵称',
+    minWidth: 130,
+  },
+  {
+    field: 'icon',
+    title: '头像',
+    slots: { default: 'avatar' },
+    minWidth: 80,
+  },
+  {
+    field: 'deptName',
+    title: '部门',
+    minWidth: 120,
+  },
+  {
+    field: 'phone',
+    title: '手机号',
+    formatter({ cellValue }) {
+      return cellValue || '暂无';
+    },
+    minWidth: 120,
+  },
+  {
+    field: 'state',
+    title: '状态',
+    slots: { default: 'status' },
+    minWidth: 100,
+  },
+  {
+    field: 'creationTime',
+    title: '创建时间',
+    minWidth: 150,
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'userName',
+    label: '用户账号',
+    rules: 'required',
+  },
+  {
+    component: 'InputPassword',
+    fieldName: 'password',
+    label: '用户密码',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'nick',
+    label: '用户昵称',
+    rules: 'required',
+  },
+  {
+    component: 'TreeSelect',
+    // 在drawer里更新 这里不需要默认的componentProps
+    defaultValue: undefined,
+    fieldName: 'deptId',
+    label: '所属部门',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    fieldName: 'phone',
+    label: '手机号码',
+    defaultValue: undefined,
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    component: 'Input',
+    fieldName: 'email',
+    defaultValue: undefined,
+    label: '邮箱',
+    /**
+     * z.literal 是 Zod 中的一种类型，用于定义一个特定的字面量值。
+     * 它可以用于确保输入的值与指定的字面量完全匹配。
+     * 例如，你可以使用 z.literal 来确保某个字段的值只能是特定的字符串、数字、布尔值等。
+     * 即空字符串也可通过校验
+     */
+    rules: z.string().email('请输入正确的邮箱').optional().or(z.literal('')),
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_USER_SEX),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'sex',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '性别',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: true,
+    fieldName: 'state',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '状态',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      disabled: true,
+      getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'label',
+      optionLabelProp: 'label',
+      placeholder: '请先选择部门',
+    },
+    fieldName: 'postIds',
+    label: '岗位',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'title',
+      optionLabelProp: 'title',
+    },
+    fieldName: 'roleIds',
+    label: '角色',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-start',
+    label: '备注',
+  },
+];

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/dept-tree.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { DeptGetListOutputDto } from '#/api/system/user/model';
+
+import { onMounted, ref } from 'vue';
+
+import { SyncOutlined } from '@ant-design/icons-vue';
+import { Empty, InputSearch, Skeleton, Tree } from 'ant-design-vue';
+
+import { getDeptTree } from '#/api/system/user';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  /**
+   * 点击刷新按钮的事件
+   */
+  reload: [];
+  /**
+   * 点击节点的事件
+   */
+  select: [];
+}>();
+
+const selectDeptId = defineModel('selectDeptId', {
+  required: true,
+  type: Array as PropType<string[]>,
+});
+
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
+/** 部门数据源 */
+const deptTreeArray = ref<DeptGetListOutputDto[]>([]);
+/** 骨架屏加载 */
+const showTreeSkeleton = ref<boolean>(true);
+
+async function loadTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  selectDeptId.value = [];
+
+  const ret = await getDeptTree();
+  deptTreeArray.value = ret;
+  showTreeSkeleton.value = false;
+}
+
+async function handleReload() {
+  await loadTree();
+  emit('reload');
+}
+
+onMounted(loadTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="p-[8px]"
+    >
+      <div
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
+      >
+        <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+        <div
+          v-if="showSearch"
+          class="bg-background z-100 sticky left-0 top-0 p-[8px]"
+        >
+          <InputSearch
+            v-model:value="searchValue"
+            :placeholder="$t('pages.common.search')"
+            size="small"
+            allow-clear
+          >
+            <template #enterButton>
+              <a-button @click="handleReload">
+                <SyncOutlined class="text-primary" />
+              </a-button>
+            </template>
+          </InputSearch>
+        </div>
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree
+            v-bind="$attrs"
+            v-if="deptTreeArray.length > 0"
+            v-model:selected-keys="selectDeptId"
+            :class="$attrs.class"
+            :field-names="{
+              title: 'deptName',
+              key: 'id',
+              children: 'children',
+            }"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="deptTreeArray as any"
+            :virtual="false"
+            default-expand-all
+            @select="$emit('select')"
+          >
+            <template #title="{ deptName }">
+              <span v-if="deptName.includes(searchValue)">
+                {{ deptName.substring(0, deptName.indexOf(searchValue)) }}
+                <span class="text-primary">{{ searchValue }}</span>
+                {{
+                  deptName.substring(
+                    deptName.indexOf(searchValue) + searchValue.length,
+                  )
+                }}
+              </span>
+              <span v-else>{{ deptName }}</span>
+            </template>
+          </Tree>
+          <!-- 仅本人数据权限 可以考虑直接不显示 -->
+          <div v-else class="mt-5">
+            <Empty
+              :image="Empty.PRESENTED_IMAGE_SIMPLE"
+              description="无部门数据"
+            />
+          </div>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/index.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { User } from '#/api/system/user/model';
+
+import { ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { preferences } from '@vben/preferences';
+import { getVxePopupContainer } from '@vben/utils';
+
+import {
+  Avatar,
+  Dropdown,
+  Menu,
+  MenuItem,
+  Modal,
+  Popconfirm,
+  Space,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  userExport,
+  userList,
+  userRemove,
+  userUpdate,
+} from '#/api/system/user';
+import { TableSwitch } from '#/components/table';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
+import DeptTree from './dept-tree.vue';
+import userDrawer from './user-drawer.vue';
+import userImportModal from './user-import-modal.vue';
+import userInfoModal from './user-info-modal.vue';
+import userResetPwdModal from './user-reset-pwd-modal.vue';
+
+/**
+ * 导入
+ */
+const [UserImpotModal, userImportModalApi] = useVbenModal({
+  connectedComponent: userImportModal,
+});
+
+function handleImport() {
+  userImportModalApi.open();
+}
+
+// 左边部门用
+const selectDeptId = ref<string[]>([]);
+
+const formOptions: VbenFormProps = {
+  schema: querySchema(),
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  handleReset: async () => {
+    selectDeptId.value = [];
+
+    const { formApi, reload } = tableApi;
+    await formApi.resetForm();
+    const formValues = formApi.form.values;
+    formApi.setLatestSubmissionValues(formValues);
+    await reload(formValues);
+  },
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'creationTime',
+      ['startTime', 'endTime'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    trigger: 'default',
+    checkMethod: ({ row }) => row?.id !== 1,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        // 部门树选择处理
+        if (selectDeptId.value.length === 1) {
+          formValues.deptId = selectDeptId.value[0];
+        } else {
+          Reflect.deleteProperty(formValues, 'deptId');
+        }
+
+        return await userList({
+          SkipCount: page.currentPage,
+          MaxResultCount: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  headerCellConfig: {
+    height: 44,
+  },
+  cellConfig: {
+    height: 48,
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'system-user-index',
+};
+// @ts-expect-error 类型实例化过深
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [UserDrawer, userDrawerApi] = useVbenDrawer({
+  connectedComponent: userDrawer,
+});
+
+function handleAdd() {
+  userDrawerApi.setData({});
+  userDrawerApi.open();
+}
+
+function handleEdit(row: User) {
+  userDrawerApi.setData({ id: row.id });
+  userDrawerApi.open();
+}
+
+async function handleDelete(row: User) {
+  await userRemove([row.id]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: User) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await userRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(userExport, '用户管理', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+
+const [UserInfoModal, userInfoModalApi] = useVbenModal({
+  connectedComponent: userInfoModal,
+});
+function handleUserInfo(row: User) {
+  userInfoModalApi.setData({ userId: row.id });
+  userInfoModalApi.open();
+}
+
+const [UserResetPwdModal, userResetPwdModalApi] = useVbenModal({
+  connectedComponent: userResetPwdModal,
+});
+
+function handleResetPwd(record: User) {
+  userResetPwdModalApi.setData({ record });
+  userResetPwdModalApi.open();
+}
+
+const { hasAccessByCodes } = useAccess();
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <div class="flex h-full gap-[8px]">
+      <DeptTree
+        v-model:select-dept-id="selectDeptId"
+        class="w-[260px]"
+        @reload="() => tableApi.reload()"
+        @select="() => tableApi.reload()"
+      />
+      <BasicTable class="flex-1 overflow-hidden" table-title="用户列表">
+        <template #toolbar-tools>
+          <Space>
+            <a-button
+              v-access:code="['system:user:export']"
+              @click="handleDownloadExcel"
+            >
+              {{ $t('pages.common.export') }}
+            </a-button>
+            <a-button
+              v-access:code="['system:user:import']"
+              @click="handleImport"
+            >
+              {{ $t('pages.common.import') }}
+            </a-button>
+            <a-button
+              :disabled="!vxeCheckboxChecked(tableApi)"
+              danger
+              type="primary"
+              v-access:code="['system:user:remove']"
+              @click="handleMultiDelete"
+            >
+              {{ $t('pages.common.delete') }}
+            </a-button>
+            <a-button
+              type="primary"
+              v-access:code="['system:user:add']"
+              @click="handleAdd"
+            >
+              {{ $t('pages.common.add') }}
+            </a-button>
+          </Space>
+        </template>
+        <template #avatar="{ row }">
+          <!-- 可能要判断空字符串情况 所以没有使用?? -->
+          <Avatar :src="row.icon || preferences.app.defaultAvatar" />
+        </template>
+        <template #status="{ row }">
+          <TableSwitch
+            v-model:value="row.state"
+            :api="() => userUpdate(row)"
+            :disabled="
+              row.id === '1' || !hasAccessByCodes(['system:user:edit'])
+            "
+            @reload="() => tableApi.query()"
+          />
+        </template>
+        <template #action="{ row }">
+          <template v-if="row.id !== '1'">
+            <Space>
+              <ghost-button
+                v-access:code="['system:user:edit']"
+                @click.stop="handleEdit(row)"
+              >
+                {{ $t('pages.common.edit') }}
+              </ghost-button>
+              <Popconfirm
+                :get-popup-container="getVxePopupContainer"
+                placement="left"
+                title="确认删除？"
+                @confirm="handleDelete(row)"
+              >
+                <ghost-button
+                  danger
+                  v-access:code="['system:user:remove']"
+                  @click.stop=""
+                >
+                  {{ $t('pages.common.delete') }}
+                </ghost-button>
+              </Popconfirm>
+            </Space>
+            <Dropdown placement="bottomRight">
+              <template #overlay>
+                <Menu>
+                  <MenuItem key="1" @click="handleUserInfo(row)">
+                    用户信息
+                  </MenuItem>
+                  <span v-access:code="['system:user:resetPwd']">
+                    <MenuItem key="2" @click="handleResetPwd(row)">
+                      重置密码
+                    </MenuItem>
+                  </span>
+                </Menu>
+              </template>
+              <a-button size="small" type="link">
+                {{ $t('pages.common.more') }}
+              </a-button>
+            </Dropdown>
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <UserImpotModal @reload="tableApi.query()" />
+    <UserDrawer @reload="tableApi.query()" />
+    <UserInfoModal />
+    <UserResetPwdModal />
+  </Page>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/user-drawer.vue

@@ -0,0 +1,348 @@
+<script setup lang="ts">
+import type { Role } from '#/api/system/user/model';
+
+import { computed, h, onMounted, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep, getPopupContainer } from '@vben/utils';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { configInfoByKey } from '#/api/system/config';
+import { postOptionSelect } from '#/api/system/post';
+import { roleOptionSelect } from '#/api/system/role';
+import {
+  findUserInfo,
+  getDeptTree,
+  userAdd,
+  userUpdate,
+} from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { authScopeOptions } from '#/views/system/role/data';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+/**
+ * 生成角色的自定义label
+ * 也可以用option插槽来做
+ * renderComponentContent: () => ({
+    option: ({value, label, [disabled, key, title]}) => '',
+  }),
+ */
+function genRoleOptionlabel(role: Role) {
+  const found = authScopeOptions.find((item) => item.value === role.dataScope);
+  if (!found) {
+    return role.roleName;
+  }
+  return h('div', { class: 'flex items-center gap-[6px]' }, [
+    h('span', null, role.roleName),
+    h(Tag, { color: found.color }, () => found.label),
+  ]);
+}
+
+/**
+ * 根据部门ID加载岗位列表
+ * @param deptId 部门ID
+ */
+async function setupPostOptions(deptId?: string) {
+  if (!deptId) {
+    // 没有选择部门时，显示提示
+    formApi.updateSchema([
+      {
+        componentProps: {
+          disabled: true,
+          options: [],
+          placeholder: '请先选择部门',
+        },
+        fieldName: 'postIds',
+      },
+    ]);
+    // 清空已选岗位
+    formApi.setFieldValue('postIds', []);
+    return;
+  }
+
+  try {
+    const postListResp = await postOptionSelect(deptId);
+    // 确保返回的是数组
+    const postList = Array.isArray(postListResp) ? postListResp : [];
+    const options = postList.map((item) => ({
+      label: item.postName,
+      value: item.id,
+    }));
+    const placeholder = options.length > 0 ? '请选择岗位' : '该部门暂无岗位';
+    formApi.updateSchema([
+      {
+        componentProps: {
+          disabled: options.length === 0,
+          options,
+          placeholder,
+        },
+        fieldName: 'postIds',
+      },
+    ]);
+    // 部门变化时清空已选岗位
+    formApi.setFieldValue('postIds', []);
+  } catch (error) {
+    console.error('加载岗位信息失败:', error);
+    formApi.updateSchema([
+      {
+        componentProps: {
+          disabled: true,
+          options: [],
+          placeholder: '加载岗位失败',
+        },
+        fieldName: 'postIds',
+      },
+    ]);
+  }
+}
+
+/**
+ * 初始化部门选择
+ */
+async function setupDeptSelect() {
+  try {
+    // updateSchema
+    const deptTree = await getDeptTree();
+    // 确保返回的是数组
+    const deptList = Array.isArray(deptTree) ? deptTree : [];
+    // 选中后显示在输入框的值 即父节点 / 子节点
+    addFullName(deptList, 'deptName', ' / ');
+    formApi.updateSchema([
+      {
+        componentProps: {
+          class: 'w-full',
+          fieldNames: {
+            label: 'deptName',
+            key: 'id',
+            value: 'id',
+            children: 'children',
+          },
+          getPopupContainer,
+          placeholder: '请选择',
+          showSearch: true,
+          treeData: deptList,
+          treeDefaultExpandAll: true,
+          treeLine: { showLeafIcon: false },
+          // 筛选的字段
+          treeNodeFilterProp: 'deptName',
+          // 选中后显示在输入框的值
+          treeNodeLabelProp: 'fullName',
+          // 部门选择变化时加载对应岗位
+          onChange: (value: string) => {
+            setupPostOptions(value);
+          },
+        },
+        fieldName: 'deptId',
+      },
+    ]);
+  } catch (error) {
+    console.error('加载部门树失败:', error);
+    // 加载失败时设置空树
+    formApi.updateSchema([
+      {
+        componentProps: {
+          placeholder: '加载部门失败',
+          treeData: [],
+        },
+        fieldName: 'deptId',
+      },
+    ]);
+  }
+}
+
+const defaultPassword = ref('');
+onMounted(async () => {
+  const password = await configInfoByKey('sys.user.initPassword');
+  if (password) {
+    defaultPassword.value = password;
+  }
+});
+
+/**
+ * 新增时候 从参数设置获取默认密码
+ */
+async function loadDefaultPassword(update: boolean) {
+  if (!update && defaultPassword.value) {
+    formApi.setFieldValue('password', defaultPassword.value);
+  }
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      // 需要重置岗位选择
+      formApi.updateSchema([
+        {
+          componentProps: {
+            disabled: true,
+            options: [],
+            placeholder: '请先选择部门',
+          },
+          fieldName: 'postIds',
+        },
+      ]);
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    try {
+      const { id } = drawerApi.getData() as { id?: number | string };
+      isUpdate.value = !!id;
+      /** update时 禁用用户名修改 不显示密码框 */
+      formApi.updateSchema([
+        { componentProps: { disabled: isUpdate.value }, fieldName: 'userName' },
+        {
+          dependencies: { show: () => !isUpdate.value, triggerFields: ['id'] },
+          fieldName: 'password',
+        },
+      ]);
+
+      let user: any | null = null;
+
+      if (isUpdate.value && id) {
+        // 编辑模式：从用户详情中获取用户信息（含岗位、角色ID）
+        user = await findUserInfo(id);
+      }
+
+      // 角色下拉统一使用 roleOptionSelect
+      const roleListResp = await roleOptionSelect();
+      const allRoles = Array.isArray(roleListResp) ? (roleListResp as Role[]) : [];
+
+      const userRoles = user?.roles ?? [];
+      const posts = user?.posts ?? [];
+
+      const postIds = posts.map((item: any) => item.id);
+      const roleIds = userRoles.map((item: any) => item.roleId ?? item.id);
+
+      const postOptions = posts.map((item: any) => ({
+        label: item.postName,
+        value: item.id,
+      }));
+
+      formApi.updateSchema([
+        {
+          componentProps: {
+            // title用于选中后回填到输入框 默认为label
+            optionLabelProp: 'title',
+            options: allRoles.map((item: any) => ({
+              label: genRoleOptionlabel(item),
+              // title用于选中后回填到输入框 默认为label
+              title: item.roleName,
+              value: item.roleId ?? item.id,
+            })),
+          },
+          fieldName: 'roleIds',
+        },
+      ]);
+
+      // 部门选择、初始密码
+      const promises = [
+        setupDeptSelect(),
+        loadDefaultPassword(isUpdate.value),
+      ];
+
+      if (user) {
+        // 编辑模式：使用用户已有的岗位数据
+        formApi.updateSchema([
+          {
+            componentProps: {
+              disabled: false,
+              options: postOptions,
+              placeholder: '请选择岗位',
+            },
+            fieldName: 'postIds',
+          },
+        ]);
+        // 处理用户数据，确保 phone 字段是字符串类型
+        const userData = {
+          ...user,
+          // 将数字类型的 phone 转换为字符串，null/undefined 转为空字符串
+          phone: user.phone != null ? String(user.phone) : '',
+        };
+        promises.push(
+          // 添加基础信息
+          formApi.setValues(userData),
+          // 添加角色和岗位
+          formApi.setFieldValue('postIds', postIds),
+          formApi.setFieldValue('roleIds', roleIds),
+        );
+      } else {
+        // 新增模式：等待选择部门后再加载岗位
+        await setupPostOptions();
+      }
+
+      // 并行处理
+      await Promise.all(promises);
+      await markInitialized();
+    } catch (error) {
+      console.error('加载用户信息失败:', error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? userUpdate(data) : userAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicDrawer>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/user-import-modal.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { UploadFile } from 'ant-design-vue/es/upload/interface';
+
+import { h, ref, unref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { ExcelIcon, InBoxIcon } from '@vben/icons';
+
+import { Modal, Switch, Upload } from 'ant-design-vue';
+
+import { downloadImportTemplate, userImportData } from '#/api/system/user';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const UploadDragger = Upload.Dragger;
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleSubmit,
+});
+
+const fileList = ref<UploadFile[]>([]);
+const checked = ref(false);
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true);
+    if (fileList.value.length !== 1) {
+      handleCancel();
+      return;
+    }
+    const data = {
+      file: fileList.value[0]!.originFileObj as Blob,
+      updateSupport: unref(checked),
+    };
+    const { code, msg } = await userImportData(data);
+    let modal = Modal.success;
+    if (code === 200) {
+      emit('reload');
+    } else {
+      modal = Modal.error;
+    }
+    handleCancel();
+    modal({
+      content: h('div', {
+        class: 'max-h-[260px] overflow-y-auto',
+        innerHTML: msg, // 后台已经处理xss问题
+      }),
+      title: '提示',
+    });
+  } catch (error) {
+    console.warn(error);
+    modalApi.close();
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+function handleCancel() {
+  modalApi.close();
+  fileList.value = [];
+  checked.value = false;
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :fullscreen-button="false"
+    title="用户导入"
+  >
+    <!-- z-index不设置会遮挡模板下载loading -->
+    <!-- 手动处理 而不是放入文件就上传 -->
+    <UploadDragger
+      v-model:file-list="fileList"
+      :before-upload="() => false"
+      :max-count="1"
+      :show-upload-list="true"
+      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+    >
+      <p class="ant-upload-drag-icon flex items-center justify-center">
+        <InBoxIcon class="text-primary size-[48px]" />
+      </p>
+      <p class="ant-upload-text">点击或者拖拽到此处上传文件</p>
+    </UploadDragger>
+    <div class="mt-2 flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <span>允许导入xlsx, xls文件</span>
+        <a-button
+          type="link"
+          @click="commonDownloadExcel(downloadImportTemplate, '用户导入模板')"
+        >
+          <div class="flex items-center gap-[4px]">
+            <ExcelIcon />
+            <span>下载模板</span>
+          </div>
+        </a-button>
+      </div>
+      <div class="flex items-center gap-2">
+        <span :class="{ 'text-red-500': checked }">
+          是否更新/覆盖已存在的用户数据
+        </span>
+        <Switch v-model:checked="checked" />
+      </div>
+    </div>
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/user-info-modal.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { User } from '#/api/system/user/model';
+
+import { computed, shallowRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Avatar, Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
+
+import { findUserInfo } from '#/api/system/user';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    currentUser.value = null;
+  },
+});
+
+const currentUser = shallowRef<null | User>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+
+  const { userId } = modalApi.getData() as { userId: number | string };
+  const response = await findUserInfo(userId);
+
+  // 新接口直接返回完整的用户数据，包含posts和roles数组
+  currentUser.value = response as User;
+
+  modalApi.modalLoading(false);
+}
+
+const sexLabel = computed(() => {
+  if (!currentUser.value) {
+    return '-';
+  }
+  const { sex } = currentUser.value;
+  if (sex === 'Man') return '男';
+  if (sex === 'Woman') return '女';
+  return '-';
+});
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="用户信息">
+    <Descriptions v-if="currentUser" size="small" :column="1" bordered>
+      <DescriptionsItem label="用户ID">
+        {{ currentUser.id }}
+      </DescriptionsItem>
+      <DescriptionsItem label="头像">
+        <Avatar v-if="currentUser.icon" :src="currentUser.icon" :size="48" />
+        <span v-else>-</span>
+      </DescriptionsItem>
+      <DescriptionsItem label="姓名">
+        {{ currentUser.name || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="昵称">
+        {{ currentUser.nick || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="用户名">
+        {{ currentUser.userName || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="年龄">
+        {{ currentUser.age || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="性别">
+        {{ sexLabel }}
+      </DescriptionsItem>
+      <DescriptionsItem label="用户状态">
+        <Tag :color="currentUser.state ? 'success' : 'error'">
+          {{ currentUser.state ? '启用' : '禁用' }}
+        </Tag>
+      </DescriptionsItem>
+      <DescriptionsItem label="手机号">
+        {{ currentUser.phone || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="邮箱">
+        {{ currentUser.email || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="地址">
+        {{ currentUser.address || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="IP地址">
+        {{ currentUser.ip || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="个人简介">
+        {{ currentUser.introduction || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="岗位">
+        <div
+          v-if="currentUser.posts && currentUser.posts.length > 0"
+          class="flex flex-wrap gap-0.5"
+        >
+          <Tag v-for="item in currentUser.posts" :key="item.postId">
+            {{ item.postName }}
+          </Tag>
+        </div>
+        <span v-else>-</span>
+      </DescriptionsItem>
+      <DescriptionsItem label="角色">
+        <div
+          v-if="currentUser.roles && currentUser.roles.length > 0"
+          class="flex flex-wrap gap-0.5"
+        >
+          <Tag v-for="item in currentUser.roles" :key="item.roleId">
+            {{ item.roleName }}
+          </Tag>
+        </div>
+        <span v-else>-</span>
+      </DescriptionsItem>
+      <DescriptionsItem label="创建时间">
+        {{ currentUser.creationTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="备注">
+        {{ currentUser.remark || '-' }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>

Yi.Vben5.Vue3/apps/web-antd/src/views/system/user/user-reset-pwd-modal.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { ResetPwdParam, User } from '#/api/system/user/model';
+
+import { ref } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { userResetPassword } from '#/api/system/user';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  onClosed: handleClosed,
+  onConfirm: handleSubmit,
+  onOpenChange: handleOpenChange,
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+      label: '用户ID',
+      rules: 'required',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入新的密码, 密码长度为5 - 20',
+      },
+      fieldName: 'password',
+      label: '新的密码',
+      rules: z
+        .string()
+        .min(5, { message: '密码长度为5 - 20' })
+        .max(20, { message: '密码长度为5 - 20' }),
+    },
+  ],
+  showDefaultActions: false,
+  commonConfig: {
+    labelWidth: 80,
+  },
+});
+
+const currentUser = ref<null | User>(null);
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+
+  const { record } = modalApi.getData() as { record: User };
+  currentUser.value = record;
+  await formApi.setValues({ id: record.id });
+
+  modalApi.modalLoading(false);
+}
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    await userResetPassword(data as ResetPwdParam);
+    emit('reload');
+    handleClosed();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleClosed() {
+  modalApi.close();
+  await formApi.resetForm();
+  currentUser.value = null;
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :fullscreen-button="false"
+    title="重置密码"
+  >
+    <div class="flex flex-col gap-[12px]">
+      <Descriptions v-if="currentUser" size="small" :column="1" bordered>
+        <DescriptionsItem label="用户ID">
+          {{ currentUser.id }}
+        </DescriptionsItem>
+        <DescriptionsItem label="用户名">
+          {{ currentUser.userName }}
+        </DescriptionsItem>
+        <DescriptionsItem label="昵称">
+          {{ currentUser.nick }}
+        </DescriptionsItem>
+      </Descriptions>
+      <BasicForm />
+    </div>
+  </BasicModal>
+</template>