接口白名单路由添加

web/.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # 本地环境接口地址
-VITE_API_URL = 'http://localhost:8888/'
+VITE_API_URL = 'http://192.168.1.246:8000/'

web/src/i18n/lang/zh-cn.ts

@@ -8,6 +8,7 @@ export default {
 		systemUser: '用户管理',
 		systemDept: '部门管理',
 		systemDic: '字典管理',
+		systemApiWhiteList: '接口白名单',
 		limits: '权限管理',
 		limitsFrontEnd: '前端控制',
 		limitsFrontEndPage: '页面权限',
@@ -72,7 +73,7 @@ export default {
 		tools: '工具类集合',
 		layoutLinkView: '外链',
 		layoutIfameView: '内嵌 iframe',
-		demo1:'demo1'
+		demo1: 'demo1',
 	},
 	staticRoutes: {
 		signIn: '登录',

web/src/router/route.ts

@@ -137,6 +137,21 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 							icon: 'ele-SetUp',
 						},
 					},
+					{
+						path: '/system/apiWhiteList',
+						name: 'apiWhiteList',
+						component: () => import('/@/views/system/apiWhiteList/index.vue'),
+						meta: {
+							title: 'message.router.systemApiWhiteList',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-SetUp',
+						},
+					},
 				],
 			},
 			{
@@ -1142,7 +1157,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 					roles: ['admin'],
 					icon: 'iconfont icon-neiqianshujuchucun',
 				},
-			}
+			},
 		],
 	},
 ];

web/src/views/system/apiWhiteList/index.vue

@@ -0,0 +1,92 @@
+<template>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding" />
+	</fs-page>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useExpose, useCrud, CrudOptions, AddReq, DelReq, EditReq } from '@fast-crud/fast-crud';
+import _ from 'lodash-es';
+
+interface CreateCrudOptionsTypes {
+	crudOptions: CrudOptions;
+}
+
+//此处为crudOptions配置
+const createCrudOptions = function (prop?: CrudOptions): CreateCrudOptionsTypes {
+	//本地模拟后台crud接口方法 ----开始
+	const records = [{ id: 1, name: 'Hello World' }];
+	const pageRequest = async (query: any) => {
+		return {
+			records,
+			currentPage: 1,
+			pageSize: 20,
+			total: records.length,
+		};
+	};
+	const editRequest = async (req: EditReq) => {
+		const target = _.find(records, (item) => {
+			return req.row.id === item.id;
+		});
+		_.merge(target, req.form);
+		return target;
+	};
+	const delRequest = async (req: DelReq) => {
+		_.remove(records, (item) => {
+			return item.id === req.row.id;
+		});
+	};
+
+	const addRequest = async (req: AddReq) => {
+		const maxRecord = _.maxBy(records, (item) => {
+			return item.id;
+		});
+		req.form.id = (maxRecord?.id || 0) + 1;
+		records.push(req.form);
+		return req.form;
+	};
+	//本地模拟后台crud接口方法 ----结束
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			columns: {
+				name: {
+					title: '姓名',
+					type: 'text',
+					search: { show: true },
+					form: {
+						component: {
+							maxlength: 20,
+						},
+					},
+				},
+			},
+		},
+	};
+};
+
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { expose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ expose });
+// 初始化crud配置
+// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+const { resetCrudOptions } = useCrud({ expose, crudOptions });
+// 你可以调用此方法，重新初始化crud配置
+// resetCrudOptions(options)
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	expose.doRefresh();
+});
+</script>