diff --git a/web/src/views/system/dictionary/api.ts b/web/src/views/system/dictionary/api.ts
new file mode 100644
index 0000000..cf1cebd
--- /dev/null
+++ b/web/src/views/system/dictionary/api.ts
@@ -0,0 +1,41 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/system/dictionary/';
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        data: query,
+    });
+}
+export function GetObj(id: InfoReq) {
+    return request({
+        url: apiPrefix + id,
+        method: 'get',
+    });
+}
+
+export function AddObj(obj: AddReq) {
+    return request({
+        url: apiPrefix,
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function UpdateObj(obj: EditReq) {
+    return request({
+        url: apiPrefix + obj.id + '/',
+        method: 'put',
+        data: obj,
+    });
+}
+
+export function DelObj(id: DelReq) {
+    return request({
+        url: apiPrefix + id + '/',
+        method: 'delete',
+        data: { id },
+    });
+}
diff --git a/web/src/views/system/dictionary/crud.tsx b/web/src/views/system/dictionary/crud.tsx
new file mode 100644
index 0000000..687b003
--- /dev/null
+++ b/web/src/views/system/dictionary/crud.tsx
@@ -0,0 +1,178 @@
+import * as api from './api';
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import { dictionary } from '/@/utils/dictionary';
+
+interface CreateCrudOptionsTypes {
+	crudOptions: CrudOptions;
+}
+
+export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExpose: CrudExpose; subDictRef: any }): CreateCrudOptionsTypes {
+	const pageRequest = async (query: PageQuery) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				width: 360,
+				buttons: {
+					custom: {
+						text: '字典配置',
+						type: 'success',
+						tooltip: {
+							placement: 'top',
+							content: '字典配置',
+						},
+						//@ts-ignore
+						click: (opts: any) => {
+							subDictRef.value.drawer = true;
+						},
+					},
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						//type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination = crudExpose.crudBinding.value.pagination;
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+						},
+					},
+				},
+				search: {
+					title: '关键词',
+					column: {
+						show: false,
+					},
+					search: {
+						show: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请输入关键词',
+						},
+					},
+					form: {
+						show: false,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+				},
+				label: {
+					title: '字典名称',
+					search: {
+						show: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+					type: 'input',
+					form: {
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '字典名称必填项' },
+						],
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请输入字典名称',
+						},
+					},
+				},
+				value: {
+					title: '字典编号',
+					search: {
+						disabled: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+					type: 'input',
+					form: {
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '字典编号必填项' },
+						],
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请输入字典编号',
+						},
+						helper: {
+							render(h) {
+								return <el-alert title="使用方法：dictionary('字典编号')" type="warning" />;
+							},
+						},
+					},
+				},
+				status: {
+					title: '状态',
+					width: 90,
+					search: {
+						show: true,
+					},
+					type: 'dict-radio',
+					dict: dict({
+						data: dictionary('button_status_bool'),
+					}),
+					component: {
+						props: {
+							options: [],
+						},
+					},
+					form: {
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '状态必填项' },
+						],
+						value: true,
+						component: {
+							placeholder: '请选择状态',
+						},
+					},
+				},
+				sort: {
+					title: '排序',
+					width: 90,
+					type: 'number',
+					form: {
+						value: 1,
+					},
+				},
+			},
+		},
+	};
+};
diff --git a/web/src/views/system/dictionary/index.vue b/web/src/views/system/dictionary/index.vue
new file mode 100644
index 0000000..dd0af7a
--- /dev/null
+++ b/web/src/views/system/dictionary/index.vue
@@ -0,0 +1,36 @@
+<template>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+		<subDict ref="subDictRef" :row-id="rowId"></subDict>
+	</fs-page>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue';
+import type { Ref } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+import subDict from './subDict/index.vue';
+
+//字典配置ref
+const subDictRef = ref();
+
+const rowId: Ref<number> = ref(0);
+
+defineExpose({ subDictRef, rowId });
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose, subDictRef });
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+});
+</script>
diff --git a/web/src/views/system/dictionary/subDict/api.ts b/web/src/views/system/dictionary/subDict/api.ts
new file mode 100644
index 0000000..cf1cebd
--- /dev/null
+++ b/web/src/views/system/dictionary/subDict/api.ts
@@ -0,0 +1,41 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/system/dictionary/';
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        data: query,
+    });
+}
+export function GetObj(id: InfoReq) {
+    return request({
+        url: apiPrefix + id,
+        method: 'get',
+    });
+}
+
+export function AddObj(obj: AddReq) {
+    return request({
+        url: apiPrefix,
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function UpdateObj(obj: EditReq) {
+    return request({
+        url: apiPrefix + obj.id + '/',
+        method: 'put',
+        data: obj,
+    });
+}
+
+export function DelObj(id: DelReq) {
+    return request({
+        url: apiPrefix + id + '/',
+        method: 'delete',
+        data: { id },
+    });
+}
diff --git a/web/src/views/system/dictionary/subDict/crud.tsx b/web/src/views/system/dictionary/subDict/crud.tsx
new file mode 100644
index 0000000..13c2506
--- /dev/null
+++ b/web/src/views/system/dictionary/subDict/crud.tsx
@@ -0,0 +1,276 @@
+import * as api from './api';
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import { request } from '/@/utils/service';
+import { dictionary } from '/@/utils/dictionary';
+interface CreateCrudOptionsTypes {
+	crudOptions: CrudOptions;
+}
+
+export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
+	const pageRequest = async (query: PageQuery) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						//type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination = crudExpose.crudBinding.value.pagination;
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+						},
+					},
+				},
+				label: {
+					title: '名称',
+					search: {
+						disabled: false,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+					type: 'input',
+					form: {
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '名称必填项' },
+						],
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请输入名称',
+						},
+					},
+				},
+				type: {
+					title: '数据值类型',
+					type: 'dict-select',
+					search: {
+						disabled: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+					show: false,
+					dict: dict({
+						data: [
+							{ label: 'text', value: 0 },
+							{ label: 'number', value: 1 },
+							{ label: 'date', value: 2 },
+							{ label: 'datetime', value: 3 },
+							{ label: 'time', value: 4 },
+							{ label: 'file', value: 5 },
+							{ label: 'boolean', value: 6 },
+							{ label: 'images', value: 7 },
+						],
+					}),
+					form: {
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '数据值类型必填项' },
+						],
+						value: 0,
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请选择数据值类型',
+						},
+						/* valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
+                            const template = vm.getEditFormTemplate('value')
+                            // 选择框重新选择后，情况value值
+                            if (!immediate) {
+                                form.value = undefined
+                            }
+                            if (value === 0) {
+                                template.component.name = 'el-input'
+                            } else if (value === 1) {
+                                template.component.name = 'el-input-number'
+                            } else if (value === 2) {
+                                template.component.name = 'el-date-picker'
+                                template.component.props = {
+                                    type: 'date',
+                                    valueFormat: 'yyyy-MM-dd'
+                                }
+                            } else if (value === 3) {
+                                template.component.name = 'el-date-picker'
+                                template.component.props = {
+                                    type: 'datetime',
+                                    valueFormat: 'yyyy-MM-dd HH:mm:ss'
+                                }
+                            } else if (value === 4) {
+                                template.component.name = 'el-time-picker'
+                                template.component.props = {
+                                    pickerOptions: {
+                                        arrowControl: true
+                                    },
+                                    valueFormat: 'HH:mm:ss'
+                                }
+                            } else if (value === 5) {
+                                template.component.name = 'd2p-file-uploader'
+                                template.component.props = { elProps: { listType: 'text' } }
+                            } else if (value === 6) {
+                                template.component.name = 'dict-switch'
+                                template.component.value = true
+                                template.component.props = {
+                                    dict: {
+                                        data: [
+                                            { label: '是', value: 'true' },
+                                            { label: '否', value: 'false' }
+                                        ]
+                                    }
+                                }
+                            } else if (value === 7) {
+                                template.component.name = 'd2p-cropper-uploader'
+                                template.component.props = { accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', cropper: { viewMode: 1 } }
+                            }
+                        }, */
+					},
+				},
+				value: {
+					title: '数据值',
+					search: {
+						disabled: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+					view: {
+						component: { props: { height: 100, width: 100 } },
+					},
+					/* // 提交时,处理数据
+                    valueResolve(row: any, col: any) {
+                        const value = row[col.key]
+                        const type = row.type
+                        if (type === 5 || type === 7) {
+                            if (value != null) {
+                                if (value.length >= 0) {
+                                    if (value instanceof Array) {
+                                        row[col.key] = value.toString()
+                                    } else {
+                                        row[col.key] = value
+                                    }
+                                } else {
+                                    row[col.key] = null
+                                }
+                            }
+                        } else {
+                            row[col.key] = value
+                        }
+                    },
+                    // 接收时,处理数据
+                    valueBuilder(row: any, col: any) {
+                        const value = row[col.key]
+                        const type = row.type
+                        if (type === 5 || type === 7) {
+                            if (value != null && value) {
+                                row[col.key] = value.split(',')
+                            }
+                        } else {
+                            row[col.key] = value
+                        }
+                    }, */
+					type: 'input',
+					form: {
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '数据值必填项' },
+						],
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请输入数据值',
+						},
+					},
+				},
+				status: {
+					title: '状态',
+					width: 80,
+					search: {
+						disabled: false,
+					},
+					type: 'dict-radio',
+					dict: dict({
+						data: dictionary('button_status_bool'),
+					}),
+					form: {
+						value: true,
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '状态必填项' },
+						],
+					},
+				},
+				sort: {
+					title: '排序',
+					width: 70,
+					type: 'number',
+					form: {
+						value: 1,
+						component: {},
+						rules: [
+							// 表单校验规则
+							{ required: true, message: '排序必填项' },
+						],
+					},
+				},
+				color: {
+					title: '标签颜色',
+					width: 90,
+					search: {
+						disabled: true,
+					},
+					type: 'dict-select',
+					dict: dict({
+						data: [
+							{ label: 'success', value: 'success', color: 'success' },
+							{ label: 'primary', value: 'primary', color: 'primary' },
+							{ label: 'info', value: 'info', color: 'info' },
+							{ label: 'danger', value: 'danger', color: 'danger' },
+							{ label: 'warning', value: 'warning', color: 'warning' },
+						],
+					}),
+					form: {
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+				},
+			},
+		},
+	};
+};
diff --git a/web/src/views/system/dictionary/subDict/index.vue b/web/src/views/system/dictionary/subDict/index.vue
new file mode 100644
index 0000000..ba09c46
--- /dev/null
+++ b/web/src/views/system/dictionary/subDict/index.vue
@@ -0,0 +1,47 @@
+<template>
+	<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
+		<fs-page>
+			<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+		</fs-page>
+	</el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, defineProps, computed } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+import { ElMessageBox } from 'element-plus';
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose });
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+//抽屉是否显示
+const drawer = ref(false);
+//抽屉关闭确认
+const handleClose = (done: () => void) => {
+	ElMessageBox.confirm('您确定要关闭?', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			done();
+		})
+		.catch(() => {
+			// catch error
+		});
+};
+
+defineExpose({ drawer });
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+});
+</script>