diff --git a/src/api/home.ts b/src/api/home.ts
index e5eb140..f754939 100644
--- a/src/api/home.ts
+++ b/src/api/home.ts
@@ -1,9 +1,9 @@
-import request from "@/utils/request";
-import { requestIdleCallback } from "@/types/index";
-export function loadImage(callback: requestIdleCallback): void {
+import request from '@/utils/request';
+import { requestCallback } from '@/types/index';
+export function loadData(callback: requestCallback): void {
 	return request(
 		{
-			url: `/api/links/bingWallpaper`,
+			url: `/first`,
 			method: `get`,
 		},
 		callback
diff --git a/src/components/Crud/index.vue b/src/components/Crud/index.vue
index 3c4af2b..5905e58 100644
--- a/src/components/Crud/index.vue
+++ b/src/components/Crud/index.vue
@@ -1,14 +1,48 @@
 <template>
-	<div class="Crud">{{}} Crud</div>
+	<div class="Crud">
+		<el-table ref="crudTableRef" :data="tableData" style="width: 100%" @selection-change="onSelectionChange">
+			<el-table-column type="selection" width="55" />
+			<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :align="column.align" :label="column.label"></el-table-column>
+		</el-table>
+		<div>
+			<span v-for="column in columns" :key="column.prop"> {{ column.label }} </span>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, getCurrentInstance } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
+import { tableRowData, tableColumnProps } from '@/types/index';
+import type { TableInstance } from 'element-plus';
+import { loadData } from '@/api/home';
 defineOptions({
 	name: 'Crud',
 });
 
-const _this = getCurrentInstance();
+export interface Props {
+	columns?: Array<tableColumnProps>;
+}
+
+const curdProps = withDefaults(defineProps<Props>(), {
+	// columns: () => [],
+});
+
+const tableData = reactive<Array<tableRowData>>([]);
+
+const crudTableRef = ref<TableInstance>();
+
+// function identity<Type>(arg: Type): Type {
+//   return arg;
+// }
+
+onMounted(() => {
+	loadData(res => {
+		console.log(res);
+	});
+});
+function onSelectionChange(selections: Array<tableRowData>): void {
+	console.log(selections);
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/types/index.ts b/src/types/index.ts
index a2cd4dd..5aa5407 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -28,6 +28,16 @@ export type tagViewsType = {
 	isActive: boolean;
 };
 
-export type RouterListKey = "routes" | "system" | "flatMap" | "reliefMap" | "spaceModel";
+export type requestCallback = (res: responseData) => void;
 
-export type requestIdleCallback = (res: responseData) => void;
+export type tableRowData = {
+	[key: string]: string | number | boolean | Date | any[];
+};
+
+export type tableColumnProps = {
+	type: 'selection' | undefined;
+	label: string;
+	prop: string;
+	align: 'left' | 'center' | 'right';
+	fixed: 'left' | 'right';
+};
diff --git a/src/utils/request.ts b/src/utils/request.ts
index b060f0e..adcf261 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,10 +1,10 @@
-import axios, { type AxiosRequestHeaders, type AxiosRequestConfig, type AxiosResponse } from "axios";
-import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
-import { requestCode } from "./constant";
-import { responseData, requestIdleCallback } from "@/types/index";
+import axios, { type AxiosRequestHeaders, type AxiosRequestConfig, type AxiosResponse } from 'axios';
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
+import { requestCode } from './constant';
+import { responseData, requestCallback } from '@/types/index';
 
 const service = axios.create({
-	baseURL: window.location.origin,
+	baseURL: import.meta.env.MODE == 'development' ? '/api' : import.meta.env.VITE_BASE_API,
 	timeout: 5000,
 	withCredentials: false, // send cookies when cross-domain requests
 });
@@ -13,7 +13,7 @@ const service = axios.create({
 service.interceptors.request.use(
 	config => {
 		const customerHeaders: Partial<AxiosRequestHeaders> = {
-			"Content-Type": "application/json;charset=utf-8",
+			'Content-Type': 'application/json;charset=utf-8',
 		};
 		config.headers = Object.assign(config.headers ?? {}, customerHeaders);
 		return config;
@@ -30,10 +30,10 @@ service.interceptors.response.use(
 		const code = res.code;
 
 		if (code === requestCode.userNotAuthorized) {
-			ElMessageBox.confirm("登陆已过期，可以取消继续留在该页面，或者重新登录", "确定退出", {
-				confirmButtonText: "重新登录",
-				cancelButtonText: "取消",
-				type: "warning",
+			ElMessageBox.confirm('登陆已过期，可以取消继续留在该页面，或者重新登录', '确定退出', {
+				confirmButtonText: '重新登录',
+				cancelButtonText: '取消',
+				type: 'warning',
 			}).then(() => {
 				location.reload();
 			});
@@ -43,7 +43,7 @@ service.interceptors.response.use(
 		if (code !== requestCode.success) {
 			ElMessage({
 				message: res.msg,
-				type: "error",
+				type: 'error',
 				duration: 5 * 1000,
 			});
 			return Promise.reject(new Error(res.msg));
@@ -59,11 +59,7 @@ service.interceptors.response.use(
 /**
  *
  */
-function request(
-	requestData: Partial<AxiosRequestConfig>,
-	successCallback: requestIdleCallback,
-	errorCallback?: requestIdleCallback
-) {
+function request(requestData: Partial<AxiosRequestConfig>, successCallback: requestCallback, errorCallback?: requestCallback) {
 	service({ ...requestData })
 		.then((res: AxiosResponse<any, any>) => {
 			const data: responseData = res.data;
@@ -74,9 +70,9 @@ function request(
 				errorCallback(err);
 			} else {
 				ElNotification({
-					title: "系统提示",
+					title: '系统提示',
 					message: err.message,
-					type: "error",
+					type: 'error',
 				});
 			}
 		});
diff --git a/src/views/System/Dicts.vue b/src/views/System/Dicts.vue
index d29c21c..f6da68b 100644
--- a/src/views/System/Dicts.vue
+++ b/src/views/System/Dicts.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import Crud from '@/components/Crud/index.vue';
+import { tableColumnProps } from '@/types/index';
 defineOptions({
 	name: 'SystemDicts',
 });