物业代码生成

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

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

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

@@ -0,0 +1,109 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DictData } from '#/api/system/dict/dict-data-model';
+
+import { 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: 'dictSort',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'dictCode',
+  },
+  {
+    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: 'dictSort',
+    label: '显示排序',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-start',
+    label: '备注',
+  },
+];

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

@@ -0,0 +1,142 @@
+<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 {
+  dictCode?: number | 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) {
+  // 判断是自定义还是预设
+  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 { dictCode, dictType } = drawerApi.getData() as DrawerProps;
+    isUpdate.value = !!dictCode;
+    await formApi.setFieldValue('dictType', dictType);
+
+    if (dictCode && isUpdate.value) {
+      const record = await dictDetailInfo(dictCode);
+      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>

apps/web-antd/src/views/system/dict/data/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 { 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 = {
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        };
+        if (dictType.value) {
+          params.dictType = dictType.value;
+        }
+
+        return await dictDataList(params);
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'dictCode',
+  },
+  id: 'system-dict-data-index',
+};
+
+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,
+    dictCode: record.dictCode,
+  });
+  drawerApi.open();
+}
+
+async function handleDelete(row: DictData) {
+  await dictDataRemove([row.dictCode]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: DictData) => row.dictCode);
+  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>

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>

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>

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>();

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

@@ -0,0 +1,77 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+
+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: 'remark',
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 'auto',
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'dictId',
+    label: 'dictId',
+  },
+  {
+    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: '备注',
+  },
+];

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?: number | 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>

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: 'dictId',
+    // 高亮当前行
+    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.dictId });
+  modalApi.open();
+}
+
+async function handleDelete(row: DictType) {
+  await dictTypeRemove([row.dictId]);
+  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 | number | string>(null);
+function handleRowClick(row: DictType) {
+  if (lastDictType.value === row.dictType) {
+    return;
+  }
+  currentRowId.value = row.dictId;
+  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>

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

@@ -0,0 +1,209 @@
+<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({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'dictId',
+    // 高亮当前行
+    isCurrent: true,
+  },
+  id: 'system-dict-type-index',
+  rowClassName: 'hover:cursor-pointer',
+};
+
+const lastDictType = ref('');
+
+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.dictId });
+  modalApi.open();
+}
+
+async function handleDelete(row: DictType) {
+  await dictTypeRemove([row.dictId]);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: DictType) => row.dictId);
+  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>