diff --git a/apps/web-antd/src/api/system/dict/dict.data.ts b/apps/web-antd/src/api/system/dict/data/index.ts
similarity index 57%
rename from apps/web-antd/src/api/system/dict/dict.data.ts
rename to apps/web-antd/src/api/system/dict/data/index.ts
index 674b4ca28..5cf156172 100644
--- a/apps/web-antd/src/api/system/dict/dict.data.ts
+++ b/apps/web-antd/src/api/system/dict/data/index.ts
@@ -1,18 +1,20 @@
-// TODO @芋艿：API 的风格
 import { requestClient } from '#/api/request';
 
-export type DictDataVO = {
-  colorType: string;
-  createTime: Date;
-  cssClass: string;
-  dictType: string;
-  id: number | undefined;
-  label: string;
-  remark: string;
-  sort: number | undefined;
-  status: number;
-  value: string;
-};
+export namespace SystemDictDataApi {
+  /** 字典数据 */
+  export type SystemDictData = {
+    id?: number;
+    colorType: string;
+    cssClass: string;
+    dictType: string;
+    label: string;
+    remark: string;
+    sort?: number;
+    status: number;
+    value: string;
+    createTime: Date;
+  };
+}
 
 // 查询字典数据（精简)列表
 export function getSimpleDictDataList() {
@@ -21,7 +23,7 @@ export function getSimpleDictDataList() {
 
 // 查询字典数据列表
 export function getDictDataPage(params: any) {
-  return requestClient.get('/system/dict-data/page', params);
+  return requestClient.get('/system/dict-data/page', { params });
 }
 
 // 查询字典数据详情
@@ -30,12 +32,12 @@ export function getDictData(id: number) {
 }
 
 // 新增字典数据
-export function createDictData(data: DictDataVO) {
+export function createDictData(data: SystemDictDataApi.SystemDictData) {
   return requestClient.post('/system/dict-data/create', data);
 }
 
 // 修改字典数据
-export function updateDictData(data: DictDataVO) {
+export function updateDictData(data: SystemDictDataApi.SystemDictData) {
   return requestClient.put('/system/dict-data/update', data);
 }
 
@@ -46,5 +48,5 @@ export function deleteDictData(id: number) {
 
 // 导出字典类型数据
 export function exportDictData(params: any) {
-  return requestClient.download('/system/dict-data/export', params);
+  return requestClient.download('/system/dict-data/export', { params });
 }
diff --git a/apps/web-antd/src/api/system/dict/dict.type.ts b/apps/web-antd/src/api/system/dict/type/index.ts
similarity index 60%
rename from apps/web-antd/src/api/system/dict/dict.type.ts
rename to apps/web-antd/src/api/system/dict/type/index.ts
index 59af57114..bf4e93586 100644
--- a/apps/web-antd/src/api/system/dict/dict.type.ts
+++ b/apps/web-antd/src/api/system/dict/type/index.ts
@@ -1,13 +1,16 @@
 import { requestClient } from '#/api/request';
 
-export type DictTypeVO = {
-  createTime: Date;
-  id: number | undefined;
-  name: string;
-  remark: string;
-  status: number;
-  type: string;
-};
+export namespace SystemDictTypeApi {
+  /** 字典类型 */
+  export type SystemDictType = {
+    id?: number;
+    name: string;
+    remark: string;
+    status: number;
+    type: string;
+    createTime: Date;
+  };
+}
 
 // 查询字典（精简)列表
 export function getSimpleDictTypeList() {
@@ -16,7 +19,7 @@ export function getSimpleDictTypeList() {
 
 // 查询字典列表
 export function getDictTypePage(params: any) {
-  return requestClient.get('/system/dict-type/page', params);
+  return requestClient.get('/system/dict-type/page', { params });
 }
 
 // 查询字典详情
@@ -25,12 +28,12 @@ export function getDictType(id: number) {
 }
 
 // 新增字典
-export function createDictType(data: DictTypeVO) {
+export function createDictType(data: SystemDictTypeApi.SystemDictType) {
   return requestClient.post('/system/dict-type/create', data);
 }
 
 // 修改字典
-export function updateDictType(data: DictTypeVO) {
+export function updateDictType(data: SystemDictTypeApi.SystemDictType) {
   return requestClient.put('/system/dict-type/update', data);
 }
 
@@ -38,7 +41,8 @@ export function updateDictType(data: DictTypeVO) {
 export function deleteDictType(id: number) {
   return requestClient.delete(`/system/dict-type/delete?id=${id}`);
 }
+
 // 导出字典类型
 export function exportDictType(params: any) {
-  return requestClient.download('/system/dict-type/export', params);
+  return requestClient.download('/system/dict-type/export', { params });
 }
diff --git a/apps/web-antd/src/router/guard.ts b/apps/web-antd/src/router/guard.ts
index be1f1fd9a..cca219426 100644
--- a/apps/web-antd/src/router/guard.ts
+++ b/apps/web-antd/src/router/guard.ts
@@ -11,7 +11,7 @@ import { useAuthStore, useDictStore } from '#/store';
 import { generateAccess } from './access';
 import { message } from 'ant-design-vue';
 import { $t } from '@vben/locales';
-import { getSimpleDictDataList } from '#/api/system/dict/dict.data';
+import { getSimpleDictDataList } from '#/api/system/dict/data';
 
 /**
  * 通用守卫配置
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
new file mode 100644
index 000000000..368421bdc
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -0,0 +1,394 @@
+import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { getDictOptions } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';
+import { useAccess } from '@vben/access';
+import { z } from '#/adapter/form';
+import { CommonStatusEnum } from '#/utils/constants';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
+
+const { hasAccessByCodes } = useAccess();
+
+// ============================== 字典类型 ==============================
+
+/** 类型新增/修改的表单 */
+export function useTypeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '字典名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '字典类型',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典类型',
+      },
+      rules: 'required',
+      // TODO @芋艿：disable 不生效
+      dependencies: {
+        triggerFields: [''],
+        componentProps: {
+          disabled: ({ values }) => values.id,
+        },
+      }
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 类型列表的搜索表单 */
+export function useTypeGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '字典名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典名称',
+        clearable: true,
+      }
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 类型列表的字段 */
+export function useTypeGridColumns<T = any>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '字典编号',
+      minWidth: 100
+    },
+    {
+      field: 'name',
+      title: '字典名称',
+      minWidth: 180
+    },
+          // TODO @芋艿：disable的；
+    {
+      field: 'type',
+      title: '字典类型',
+      minWidth: 220
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      }
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      minWidth: 120,
+      title: '操作',
+      field: 'operation',
+      fixed: 'right',
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'type',
+          nameTitle: '字典类型',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'edit',
+            show: hasAccessByCodes(['system:dict:update']),
+          },
+          {
+            code: 'delete',
+            show: hasAccessByCodes(['system:dict:delete']),
+          },
+        ],
+      },
+    },
+  ];
+}
+
+// ============================== 字典数据 ==============================
+
+// TODO @芋艿：后续针对 antd，增加
+/**
+ * 颜色选项
+ */
+const colorOptions = [
+  { value: '', label: '无' },
+  { value: 'processing', label: '主要' },
+  { value: 'success', label: '成功' },
+  { value: 'default', label: '默认' },
+  { value: 'warning', label: '警告' },
+  { value: 'error', label: '危险' },
+  { value: 'pink', label: 'pink' },
+  { value: 'red', label: 'red' },
+  { value: 'orange', label: 'orange' },
+  { value: 'green', label: 'green' },
+  { value: 'cyan', label: 'cyan' },
+  { value: 'blue', label: 'blue' },
+  { value: 'purple', label: 'purple' },
+];
+
+/** 数据新增/修改的表单 */
+export function useDataFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'dictType',
+      label: '字典类型',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDictTypeList,
+        placeholder: '请输入字典类型',
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'type',
+      },
+      rules: 'required',
+      // TODO @芋艿：disable 不生效
+      dependencies: {
+        triggerFields: [''],
+        componentProps: {
+          disabled: ({ values }) => values.id,
+        },
+      }
+    },
+    {
+      fieldName: 'label',
+      label: '数据标签',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据标签',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'value',
+      label: '数据键值',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据键值',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入显示排序',
+        class: 'w-full'
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        buttonStyle:'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'colorType',
+      label: '颜色类型',
+      component: 'Select',
+      componentProps: {
+        options: colorOptions,
+        placeholder: '请选择颜色类型',
+        class: 'w-full',
+      },
+    },
+    {
+      fieldName: 'cssClass',
+      label: 'CSS Class',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 CSS Class',
+      },
+      help: '输入 hex 模式的颜色, 例如 #108ee9',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 字典数据列表搜索表单 */
+export function useDataGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'label',
+      label: '字典标签',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典标签',
+        clearable: true,
+      }
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/**
+ * 字典数据表格列
+ */
+export function useDataGridColumns<T = any>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '字典编码',
+      minWidth: 100
+    },
+    {
+      field: 'label',
+      title: '字典标签',
+      minWidth: 180
+    },
+    {
+      field: 'value',
+      title: '字典键值',
+      minWidth: 100
+    },
+    {
+      field: 'sort',
+      title: '字典排序',
+      minWidth: 100
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      }
+    },
+    {
+      field: 'colorType',
+      title: '颜色类型',
+      minWidth: 120
+    },
+    {
+      field: 'cssClass',
+      title: 'CSS Class',
+      minWidth: 120
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      minWidth: 120,
+      title: '操作',
+      field: 'operation',
+      fixed: 'right',
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'label',
+          nameTitle: '字典数据',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'edit',
+            show: hasAccessByCodes(['system:dict:update']),
+          },
+          {
+            code: 'delete',
+            show: hasAccessByCodes(['system:dict:delete']),
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/system/dict/index.vue b/apps/web-antd/src/views/system/dict/index.vue
new file mode 100644
index 000000000..3d13f141b
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/index.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Page } from '@vben/common-ui'
+import { DocAlert } from '#/components/doc-alert'
+import TypeGrid from './modules/type-grid.vue'
+import DataGrid from './modules/data-grid.vue'
+
+const searchDictType = ref<string>() // 搜索的字典类型
+
+function onDictTypeSelect(dictType: string) {
+  searchDictType.value = dictType
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="字典管理" url="https://doc.iocoder.cn/system-dict/" />
+
+    <div class="flex h-full">
+      <!-- 左侧字典类型列表 -->
+      <div class="w-1/2 pr-3">
+        <TypeGrid @select="onDictTypeSelect" />
+      </div>
+      <!-- 右侧字典数据列表 -->
+      <div class="w-1/2">
+        <DataGrid :dict-type="searchDictType" />
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/system/dict/modules/data-form.vue b/apps/web-antd/src/views/system/dict/modules/data-form.vue
new file mode 100644
index 000000000..b740e473c
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/modules/data-form.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { SystemDictDataApi } from '#/api/system/dict/data';
+
+import { useVbenModal } from '@vben/common-ui';
+import { message } from 'ant-design-vue';
+
+import { computed, ref } from 'vue';
+import { useVbenForm } from '#/adapter/form';
+import { createDictData, getDictData, updateDictData } from '#/api/system/dict/data';
+import { $t } from '#/locales';
+
+import { useDataFormSchema } from '../data';
+
+defineOptions({ name: 'SystemDictDataForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDictDataApi.SystemDictData>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['字典数据'])
+    : $t('ui.actionTitle.create', ['字典数据']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useDataFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDictDataApi.SystemDictData;
+    try {
+      await (formData.value?.id ? updateDictData(data) : createDictData(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDictDataApi.SystemDictData | { dictType?: string }>();
+    
+    // 如果有ID，表示是编辑
+    if (data && 'id' in data && data.id) {
+      modalApi.lock();
+      try {
+        formData.value = await getDictData(data.id as number);
+        // 设置到 values
+        if (formData.value) {
+          await formApi.setValues(formData.value);
+        }
+      } finally {
+        modalApi.lock(false);
+      }
+    } else if (data && 'dictType' in data && data.dictType) {
+      // 新增时，如果传入了dictType，则需要设置
+      await formApi.setValues({
+        dictType: data.dictType,
+      });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template> 
diff --git a/apps/web-antd/src/views/system/dict/modules/data-grid.vue b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
new file mode 100644
index 000000000..3dc62b93e
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type { OnActionClickParams } from '#/adapter/vxe-table';
+
+import { useVbenModal } from '@vben/common-ui';
+import { Button, message } from 'ant-design-vue';
+import { Download, Plus } from '@vben/icons';
+import DataForm from './data-form.vue';
+
+import { $t } from '#/locales';
+import { watch } from 'vue';
+import { useDataGridColumns, useDataGridFormSchema } from '../data';
+import { deleteDictData, getDictDataPage, exportDictData } from '#/api/system/dict/data';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { downloadByData } from '#/utils/download';
+
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const [DataFormModal, dataFormModalApi] = useVbenModal({
+  connectedComponent: DataForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportDictData(await gridApi.formApi.getValues());
+  downloadByData(data, '字典数据.xls');
+}
+
+/** 创建字典数据 */
+function onCreate() {
+  dataFormModalApi.setData({ dictType: props.dictType }).open();
+}
+
+/** 编辑字典数据 */
+function onEdit(row: any) {
+  dataFormModalApi.setData(row).open();
+}
+
+/** 删除字典数据 */
+async function onDelete(row: any) {
+  const hideLoading = message.loading({
+    content: $t('common.processing'),
+    duration: 0,
+    key: 'process_message',
+  });
+  try {
+    await deleteDictData(row.id);
+    message.success({
+      content: $t('common.operationSuccess'),
+      key: 'process_message',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 表格操作按钮回调 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams) {
+  switch (code) {
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row)
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useDataGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useDataGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDictDataPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            dictType: props.dictType,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    }
+  },
+});
+
+/** 监听 dictType 变化，重新查询 */
+watch(
+  () => props.dictType,
+  () => {
+    if (props.dictType) {
+      onRefresh();
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <DataFormModal @success="onRefresh" />
+
+    <Grid table-title="字典数据列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['字典数据']) }}
+        </Button>
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
+          <Download class="size-5" />
+          {{ $t('ui.actionTitle.export') }}
+        </Button>
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/system/dict/modules/type-form.vue b/apps/web-antd/src/views/system/dict/modules/type-form.vue
new file mode 100644
index 000000000..590db31d2
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/modules/type-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { useVbenModal } from '@vben/common-ui';
+import { message } from 'ant-design-vue';
+
+import { computed, ref } from 'vue';
+import { useVbenForm } from '#/adapter/form';
+import { createDictType, getDictType, updateDictType } from '#/api/system/dict/type';
+import { $t } from '#/locales';
+
+import { useTypeFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDictTypeApi.SystemDictType>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['字典类型'])
+    : $t('ui.actionTitle.create', ['字典类型']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useTypeFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDictTypeApi.SystemDictType;
+    try {
+      await (formData.value?.id ? updateDictType(data) : createDictType(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDictTypeApi.SystemDictType>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDictType(data.id as number);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/dict/modules/type-grid.vue b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
new file mode 100644
index 000000000..357c91e1e
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { useVbenModal } from '@vben/common-ui';
+import { Button, message } from 'ant-design-vue';
+import { Download, Plus } from '@vben/icons';
+import TypeForm from './type-form.vue';
+
+import { useTypeGridColumns, useTypeGridFormSchema } from '../data';
+import { $t } from '#/locales';
+import { deleteDictType, getDictTypePage, exportDictType } from '#/api/system/dict/type';
+import { downloadByData } from '#/utils/download';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+const emit = defineEmits(['select']);
+
+const [TypeFormModal, typeFormModalApi] = useVbenModal({
+  connectedComponent: TypeForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportDictType(await gridApi.formApi.getValues());
+  downloadByData(data, '字典类型.xls');
+}
+
+/** 创建字典类型 */
+function onCreate() {
+  typeFormModalApi.setData(null).open();
+}
+
+/** 编辑字典类型 */
+function onEdit(row: any) {
+  typeFormModalApi.setData(row).open();
+}
+
+/** 删除字典类型 */
+async function onDelete(row: SystemDictTypeApi.SystemDictType) {
+  const hideLoading = message.loading({
+    content: $t('common.processing'),
+    duration: 0,
+    key: 'process_message',
+  });
+  try {
+    await deleteDictType(row.id);
+    message.success({
+      content: $t('common.operationSuccess'),
+      key: 'process_message',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 表格操作按钮回调 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams) {
+  switch (code) {
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+  }
+}
+
+/** 表格事件 */
+const gridEvents: VxeGridListeners<RowType> = {
+  cellClick: ({ row }) => {
+    emit('select', row.type);
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useTypeGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useTypeGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDictTypePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isCurrent: true,
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  },
+  gridEvents,
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <TypeFormModal @success="onRefresh" />
+
+    <Grid table-title="字典类型列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['字典类型']) }}
+        </Button>
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
+          <Download class="size-5" />
+          {{ $t('ui.actionTitle.export') }}
+        </Button>
+      </template>
+    </Grid>
+  </div>
+</template>