diff --git a/apps/web-antd/src/views/system/dict/data/index.vue b/apps/web-antd/src/views/system/dict/data/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/web-antd/src/views/system/dict/index.vue b/apps/web-antd/src/views/system/dict/index.vue
index 06372a15..88e4e505 100644
--- a/apps/web-antd/src/views/system/dict/index.vue
+++ b/apps/web-antd/src/views/system/dict/index.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import DictTypePanel from './type/index.vue';
 </script>
 
 <template>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page content-class="flex flex-col gap-[16px] lg:flex-row">
+    <Card class="w-full">
+      <DictTypePanel />
+    </Card>
+    <Card class="w-full">b</Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/dict/type/data.ts b/apps/web-antd/src/views/system/dict/type/data.ts
new file mode 100644
index 00000000..989dddce
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/type/data.ts
@@ -0,0 +1,43 @@
+import { type FormSchemaGetter, z } from '#/adapter';
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'dictId',
+    label: 'dictId',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictName',
+    label: '字典名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictType',
+    help: '使用英文/下划线命名, 如:sys_normal_disable',
+    label: '字典类型',
+    rules: z
+      .string()
+      .regex(/^[a-z_]+$/i, { message: '字典类型只能使用英文/下划线命名' }),
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '字典类型',
+  },
+];
diff --git a/apps/web-antd/src/views/system/dict/type/dict-type-model.vue b/apps/web-antd/src/views/system/dict/type/dict-type-model.vue
new file mode 100644
index 00000000..22611ce2
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/type/dict-type-model.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter';
+import { dictTypeAdd, dictTypeUpdate } from '#/api/system/dict/dict-type';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface ModalProps {
+  update: boolean;
+  record?: any;
+}
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 100,
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { record, update } = modalApi.getData() as ModalProps;
+    isUpdate.value = update;
+    if (update && record) {
+      for (const key in record) {
+        await formApi.setFieldValue(key, record[key]);
+      }
+    }
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    await (isUpdate.value ? dictTypeUpdate(data) : dictTypeAdd(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/system/dict/type/index.vue b/apps/web-antd/src/views/system/dict/type/index.vue
new file mode 100644
index 00000000..576ed3ee
--- /dev/null
+++ b/apps/web-antd/src/views/system/dict/type/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import dictTypeModel from './dict-type-model.vue';
+
+defineOptions({ name: 'DictTypePanel' });
+
+const [DictTypeModal, modalApi] = useVbenModal({
+  connectedComponent: dictTypeModel,
+});
+
+function handleAdd() {
+  modalApi.setData({ update: false });
+  modalApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <a-button type="primary" @click="handleAdd">
+      {{ $t('pages.common.add') }}
+    </a-button>
+    <DictTypeModal />
+  </div>
+</template>