diff --git a/web/src/views/system/menu/components/MenuFieldCom/api.ts b/web/src/views/system/menu/components/MenuFieldCom/api.ts
new file mode 100644
index 0000000..eccde55
--- /dev/null
+++ b/web/src/views/system/menu/components/MenuFieldCom/api.ts
@@ -0,0 +1,65 @@
+import { request } from '/@/utils/service';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import XEUtils from "xe-utils";
+import {CurrentInfoType} from "/@/views/system/columns/types";
+
+export const apiPrefix = '/api/system/column/';
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: 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 },
+	});
+}
+
+/**
+ * 获取所有model
+ */
+export function getModelList() {
+	return request({
+		url: '/api/system/column/get_models/',
+		method: 'get',
+	});
+}
+
+/**
+ * 自动匹配field
+ * @param data
+ */
+export function automatchColumnsData(data: CurrentInfoType) {
+	return request({
+		url: '/api/system/column/auto_match_fields/',
+		method: 'post',
+		data,
+	});
+}
diff --git a/web/src/views/system/menu/components/MenuFieldCom/crud.tsx b/web/src/views/system/menu/components/MenuFieldCom/crud.tsx
new file mode 100644
index 0000000..a99a1a4
--- /dev/null
+++ b/web/src/views/system/menu/components/MenuFieldCom/crud.tsx
@@ -0,0 +1,228 @@
+import * as api from './api';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { request } from '/@/utils/service';
+import { dictionary } from '/@/utils/dictionary';
+
+import { inject } from 'vue';
+
+
+
+export const createCrudOptions = function ({ crudExpose, props,modelDialog,selectOptions,allModelData }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		// return await api.GetList(query);
+		if (selectOptions.value.id) {
+			return await api.GetList({ menu: selectOptions.value.id } as any);
+		} else {
+			return undefined;
+		}
+	};
+	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) => {
+		form.menu = selectOptions.value.id;
+		return await api.AddObj(form);
+	};
+
+
+
+	//权限判定
+	const hasPermissions = inject('$hasPermissions');
+
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			pagination: {
+				show: false,
+			},
+			actionbar: {
+				buttons: {
+					auto: {
+						text: '自动匹配',
+						type: 'success',
+						click: () => {
+							return modelDialog.value=true;
+						},
+					},
+				},
+			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+			},
+			form: {
+				col: { span: 24 },
+				labelWidth: '110px',
+				wrapper: {
+					is: 'el-dialog',
+					width: '600px',
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						//type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+						//@ts-ignore
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination: any = crudExpose!.crudBinding.value.pagination;
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+						},
+					},
+				},
+				model: {
+					title: 'model',
+					type: 'dict-select',
+					dict:dict({
+						url:'/api/system/column/get_models/',
+						label:'title',
+						value:'key'
+					}),
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							span: 12,
+						},
+					},
+				},
+				title: {
+					title: '中文名',
+					sortable: 'custom',
+					search: {
+						show: true,
+					},
+					type: 'text',
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							span: 12,
+						},
+					},
+				},
+				field_name: {
+					title: '字段名',
+					type: 'text',
+					search: {
+						show: true,
+					},
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							span: 12,
+						},
+					},
+				},
+
+				// is_create: {
+				// 	title: '创建时显示',
+				// 	sortable: 'custom',
+				// 	search: {
+				// 		disabled: true,
+				// 	},
+				// 	type: 'dict-switch',
+				// 	dict: dict({
+				// 		data: [
+				// 			{ value: true, label: '启用' },
+				// 			{ value: false, label: '禁用' },
+				// 		],
+				// 	}),
+				// 	form: {
+				// 		value: true,
+				// 	},
+				// 	column: {
+				// 		valueChange(context){
+				// 			return api.UpdateObj(context.row)
+				// 		},
+				// 		component: {
+				// 			name: 'fs-dict-switch',
+				// 		},
+				// 	},
+				// },
+				// is_update: {
+				// 	title: '编辑时显示',
+				// 	search: {
+				// 		show: true,
+				// 	},
+				// 	type: 'dict-switch',
+				// 	dict: dict({
+				// 		data: [
+				// 			{ value: true, label: '启用' },
+				// 			{ value: false, label: '禁用' },
+				// 		],
+				// 	}),
+				// 	form: {
+				// 		value: true,
+				// 	},
+				// 	column: {
+				// 		component: {
+				// 			name: 'fs-dict-switch',
+				// 			onChange: compute((context) => {
+				// 				//动态onChange方法测试
+				// 				return () => {
+				// 					console.log('onChange', context.row.switch);
+				// 				};
+				// 			}),
+				// 		},
+				// 	},
+				// },
+				// is_query: {
+				// 	title: '列表中显示',
+				// 	type: 'dict-switch',
+				// 	dict: dict({
+				// 		data: [
+				// 			{ value: true, label: '启用' },
+				// 			{ value: false, label: '禁用' },
+				// 		],
+				// 	}),
+				// 	form: {
+				// 		value: true,
+				// 	},
+				// 	column: {
+				// 		component: {
+				// 			name: 'fs-dict-switch',
+				// 			onChange: compute((context) => {
+				// 				//动态onChange方法测试
+				// 				return () => {
+				// 					console.log('onChange', context.row.switch);
+				// 				};
+				// 			}),
+				// 		},
+				// 	},
+				// },
+			},
+		},
+	};
+};
diff --git a/web/src/views/system/menu/components/MenuFieldCom/index.vue b/web/src/views/system/menu/components/MenuFieldCom/index.vue
new file mode 100644
index 0000000..ec3822b
--- /dev/null
+++ b/web/src/views/system/menu/components/MenuFieldCom/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <el-dialog ref="modelRef" v-model="modelDialog" title="选择model">
+      <div v-show="props.model">
+        <el-tag>已选择:{{ props.model }}</el-tag>
+      </div>
+      <div class="model-card">
+        <div v-for="(item,index) in allModelData" :value="item.key" :key="index">
+          <el-text :type="modelCheckIndex===index?'primary':''" @click="onModelChecked(item,index)">
+            {{ item.app + '--' + item.title + '(' + item.key + ')' }}
+          </el-text>
+        </div>
+      </div>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="modelDialog = false">取消</el-button>
+        <el-button type="primary" @click="handleAutomatch">
+          确定
+        </el-button>
+      </span>
+      </template>
+    </el-dialog>
+    <div style="height: 80vh">
+      <fs-crud ref="crudRef" v-bind="crudBinding">
+      </fs-crud>
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted, reactive} from 'vue';
+import {useFs} from '@fast-crud/fast-crud';
+import {createCrudOptions} from './crud';
+import {getModelList} from './api'
+import {MenuTreeItemType} from "/@/views/system/menu/types";
+import {successMessage, successNotification, warningNotification} from '/@/utils/message';
+import {automatchColumnsData} from '/@/views/system/columns/components/ColumnsTableCom/api';
+// 当前选择的菜单信息
+let selectOptions: any = ref({name: null});
+
+const props = reactive({
+  model: '',
+  app: '',
+  menu: ''
+})
+
+//model弹窗
+const modelDialog = ref(false)
+// 获取所有model
+const allModelData = ref<any[]>([]);
+const modelCheckIndex = ref(null)
+const onModelChecked = (row, index) => {
+  modelCheckIndex.value = index
+  props.model = row.key
+  props.app = row.app
+}
+/**
+ * 菜单选中时,加载表格数据
+ * @param record
+ */
+const handleRefreshTable = (record: MenuTreeItemType) => {
+  if (!record.is_catalog && record.id) {
+    selectOptions.value = record;
+    crudExpose.doRefresh();
+  } else {
+    //清空表格数据
+    crudExpose.setTableData([]);
+  }
+};
+/**
+ * 自动匹配列
+ */
+const handleAutomatch = async () => {
+  props.menu = selectOptions.value.id
+  modelDialog.value = false
+  if (props.menu && props.model) {
+    const res = await automatchColumnsData(props);
+    if (res?.code === 2000) {
+      successNotification('匹配成功');
+    }
+    crudExpose.doSearch({form: {menu: props.menu, model: props.model}});
+  }else {
+    warningNotification('请选择角色和模型表！');
+  }
+
+};
+
+
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, props, modelDialog, selectOptions,allModelData});
+onMounted(async () => {
+  const res = await getModelList();
+  allModelData.value = res.data;
+});
+
+defineExpose({selectOptions, handleRefreshTable});
+</script>
+
+<style scoped lang="scss">
+.model-card {
+  margin-top: 10px;
+  height: 30vh;
+  overflow-y: scroll;
+
+  div {
+    margin: 15px 0;
+    cursor: pointer;
+  }
+}
+</style>