diff --git a/web/src/views/interface/index.ts b/web/src/views/interface/index.ts
new file mode 100644
index 0000000..fc00576
--- /dev/null
+++ b/web/src/views/interface/index.ts
@@ -0,0 +1,9 @@
+/*
+ *
+ * 后端API接口响应数据
+ */
+interface APIResponseData {
+	code?: number;
+	data: [];
+	msg?: string;
+}
diff --git a/web/src/views/system/areas/crud.tsx b/web/src/views/system/areas/crud.tsx
index 19795b2..d5a07f3 100644
--- a/web/src/views/system/areas/crud.tsx
+++ b/web/src/views/system/areas/crud.tsx
@@ -1,7 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '/@/utils/message';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -189,12 +190,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 					},
 					width: 90,
 					type: 'dict-radio',
+					column: {
+						component: {
+							name: 'fs-dict-switch',
+							activeText: '',
+							inactiveText: '',
+							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							onChange: compute((context) => {
+								return () => {
+									api.UpdateObj(context.row).then((res: APIResponseData) => {
+										successMessage(res.msg as string);
+									});
+								};
+							}),
+						},
+					},
 					dict: dict({
 						data: dictionary('button_status_bool'),
 					}),
-					form: {
-						value: true,
-					},
 				},
 			},
 		},
diff --git a/web/src/views/system/dept/crud.tsx b/web/src/views/system/dept/crud.tsx
index d56b916..1fddba4 100644
--- a/web/src/views/system/dept/crud.tsx
+++ b/web/src/views/system/dept/crud.tsx
@@ -1,8 +1,9 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
 import { verifyPhone } from '/@/utils/toolsValidate';
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '/@/utils/message';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -229,16 +230,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						disabled: false,
 					},
 					type: 'dict-radio',
+					column: {
+						component: {
+							name: 'fs-dict-switch',
+							activeText: '',
+							inactiveText: '',
+							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							onChange: compute((context) => {
+								return () => {
+									api.UpdateObj(context.row).then((res: APIResponseData) => {
+										successMessage(res.msg as string);
+									});
+								};
+							}),
+						},
+					},
 					dict: dict({
 						data: dictionary('button_status_bool'),
 					}),
-					form: {
-						value: true,
-						component: {
-							span: 12,
-							placeholder: '请选择状态',
-						},
-					},
 				},
 			},
 		},
diff --git a/web/src/views/system/dictionary/crud.tsx b/web/src/views/system/dictionary/crud.tsx
index 6460738..796dad5 100644
--- a/web/src/views/system/dictionary/crud.tsx
+++ b/web/src/views/system/dictionary/crud.tsx
@@ -1,7 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
 import { dictionary } from '/@/utils/dictionary';
 import { nextTick, ref } from 'vue';
+import { successMessage } from '/@/utils/message';
 
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
@@ -163,24 +164,24 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
 						show: true,
 					},
 					type: 'dict-radio',
+					column: {
+						component: {
+							name: 'fs-dict-switch',
+							activeText: '',
+							inactiveText: '',
+							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							onChange: compute((context) => {
+								return () => {
+									api.UpdateObj(context.row).then((res: APIResponseData) => {
+										successMessage(res.msg as string);
+									});
+								};
+							}),
+						},
+					},
 					dict: dict({
 						data: dictionary('button_status_bool'),
 					}),
-					component: {
-						props: {
-							options: [],
-						},
-					},
-					form: {
-						rules: [
-							// 表单校验规则
-							{ required: true, message: '状态必填项' },
-						],
-						value: true,
-						component: {
-							placeholder: '请选择状态',
-						},
-					},
 				},
 				sort: {
 					title: '排序',
diff --git a/web/src/views/system/role/curd.tsx b/web/src/views/system/role/curd.tsx
index c7562ee..c2f9072 100644
--- a/web/src/views/system/role/curd.tsx
+++ b/web/src/views/system/role/curd.tsx
@@ -1,6 +1,8 @@
-import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose } from '@fast-crud/fast-crud';
+import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose, compute } from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
 import * as api from './api';
+import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '../../../utils/message';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -167,28 +169,24 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 					title: '状态',
 					search: { show: true },
 					type: 'dict-radio',
-					dict: dict({
-						data: [
-							{
-								label: '启用',
-								value: true,
-								color: 'success',
-							},
-							{
-								label: '禁用',
-								value: false,
-								color: 'danger',
-							},
-						],
-					}),
 					column: {
-						width: 90,
-						sortable: 'custom',
-					},
-					form: {
-						rules: [{ required: true, message: '状态必填' }],
-						value: true,
+						component: {
+							name: 'fs-dict-switch',
+							activeText: '',
+							inactiveText: '',
+							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							onChange: compute((context) => {
+								return () => {
+									api.UpdateObj(context.row).then((res: APIResponseData) => {
+										successMessage(res.msg as string);
+									});
+								};
+							}),
+						},
 					},
+					dict: dict({
+						data: dictionary('button_status_bool'),
+					}),
 				},
 				update_datetime: {
 					title: '更新时间',
diff --git a/web/src/views/system/user/crud.tsx b/web/src/views/system/user/crud.tsx
index 84180e9..9825255 100644
--- a/web/src/views/system/user/crud.tsx
+++ b/web/src/views/system/user/crud.tsx
@@ -1,7 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '/@/utils/message';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -282,15 +283,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						show: true,
 					},
 					type: 'dict-radio',
+					column: {
+						component: {
+							name: 'fs-dict-switch',
+							activeText: '',
+							inactiveText: '',
+							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							onChange: compute((context) => {
+								return () => {
+									api.UpdateObj(context.row).then((res: APIResponseData) => {
+										successMessage(res.msg as string);
+									});
+								};
+							}),
+						},
+					},
 					dict: dict({
 						data: dictionary('button_status_bool'),
 					}),
-					form: {
-						value: true,
-						component: {
-							span: 12,
-						},
-					},
 				},
 				avatar: {
 					title: '头像',
diff --git a/web/src/views/system/whiteList/crud.tsx b/web/src/views/system/whiteList/crud.tsx
index 78580ef..a97f060 100644
--- a/web/src/views/system/whiteList/crud.tsx
+++ b/web/src/views/system/whiteList/crud.tsx
@@ -1,7 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '/@/utils/message';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -63,6 +64,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						align: 'center',
 						width: '70px',
 						columnSetDisabled: true, //禁止在列设置中选择
+						//@ts-ignore
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
@@ -198,18 +200,25 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 					search: {
 						disabled: false,
 					},
-					width: 150,
 					type: 'dict-radio',
+					column: {
+						component: {
+							name: 'fs-dict-switch',
+							activeText: '',
+							inactiveText: '',
+							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							onChange: compute((context) => {
+								return () => {
+									api.UpdateObj(context.row).then((res: APIResponseData) => {
+										successMessage(res.msg as string);
+									});
+								};
+							}),
+						},
+					},
 					dict: dict({
 						data: dictionary('button_status_bool'),
 					}),
-					form: {
-						value: true,
-						rules: [{ required: true, message: '必填项' }],
-						component: {
-							span: 12,
-						},
-					},
 				},
 			},
 		},