diff --git a/src/api/model/system.ts b/src/api/model/system.ts
index 4e394f5..ab320f7 100644
--- a/src/api/model/system.ts
+++ b/src/api/model/system.ts
@@ -158,9 +158,24 @@ export default {
 			return await http.delete("crontab_log/remove_all", data);
 		},
 	},
-	swagger: {
+	config: {
 		list: async function (data = {}) {
-			return await http.get("swagger/json", data);
+			return await http.get("system_config/list", data);
 		},
-	}
+		info: async function (data = {}) {
+			return await http.get("system_config/list", data);
+		},
+		add: async function (data = {}) {
+			return await http.post("system_config/add", data);
+		},
+		edit: async function (data = {}) {
+			return await http.put("system_config/edit", data);
+		},
+		del: async function (data = {}) {
+			return await http.delete("system_config/del", data);
+		},
+		option: async function (data = {}) {
+			return await http.get("system_config/option", data);
+		},
+	},
 }
diff --git a/src/components/piIcon/index.vue b/src/components/piIcon/index.vue
index b99d70b..845b419 100644
--- a/src/components/piIcon/index.vue
+++ b/src/components/piIcon/index.vue
@@ -118,6 +118,7 @@ function search(text) {
 <style scoped>
 .pi-icon-select {
 	display: inline-flex;
+	width: 100%;
 }
 
 .pi-icon-select__wrapper.hasValue:deep(.el-input__icon) {
diff --git a/src/components/piTable/index.vue b/src/components/piTable/index.vue
index 89540b0..f0c0d1c 100644
--- a/src/components/piTable/index.vue
+++ b/src/components/piTable/index.vue
@@ -547,10 +547,6 @@ function sort(prop, order) {
 .extend-panel {
 	display: inline-flex;
 	flex-wrap: wrap;
-	flex-direction: column;
-}
-
-.right-panel > * + *, .left-panel > * + *, .extend-panel > * + * {
-	margin-left: 10px;
+	gap: 10px;
 }
 </style>
diff --git a/src/pi.ts b/src/pi.ts
index a3bb32e..05171d4 100644
--- a/src/pi.ts
+++ b/src/pi.ts
@@ -11,12 +11,14 @@ import errorHandler from "@/utils/errorHandler";
 
 import piDialog from "@/components/piDialog"
 import piTable from "@/components/piTable"
+import piUpload from "@/components/piUpload"
 
 export default {
 	install(app: App) {
 		// 注册全局组件
 		app.component('piDialog', piDialog)
 		app.component('piTable', piTable)
+		app.component('piUpload', piUpload)
 
 		//注册全局指令
 		app.directive('auth', auth)
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
new file mode 100644
index 0000000..78effc8
--- /dev/null
+++ b/src/views/system/config/index.vue
@@ -0,0 +1,120 @@
+<template>
+	<pi-table ref="tableRef" :apiObj="api.system.config.list" @selection-change="selectionChange">
+		<template #do>
+			<el-button v-auth="'system_config:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
+			<el-button v-auth="'system_config:edit'" type="success" icon="el-icon-edit" @click="edit"
+					   :disabled="selection.length!==1"></el-button>
+			<el-button v-auth="'system_config:del'" type="danger" plain icon="el-icon-delete"
+					   :disabled="selection.length===0" @click="batch_del"></el-button>
+		</template>
+		<template #search>
+			<el-input v-model="search.config_name" placeholder="参数名称" clearable style="width: 200px;"></el-input>
+			<el-input v-model="search.config_key" placeholder="参数键名" clearable style="width: 200px;"></el-input>
+			<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+		</template>
+		<el-table-column type="selection" width="50"></el-table-column>
+		<el-table-column label="ID" prop="config_id"></el-table-column>
+		<el-table-column label="参数名称" prop="config_name"></el-table-column>
+		<el-table-column label="参数键名" prop="config_key"></el-table-column>
+		<el-table-column label="参数键值" prop="config_value"></el-table-column>
+		<el-table-column label="备注" prop="remark"></el-table-column>
+		<el-table-column label="创建时间" prop="create_time"></el-table-column>
+		<el-table-column label="更新时间" prop="update_time"></el-table-column>
+		<el-table-column label="操作" fixed="right" align="right" width="170">
+			<template #default="scope">
+				<el-button-group>
+					<el-button text type="primary" size="small" @click="show(scope.row, scope.$index)">查看
+					</el-button>
+					<el-button v-auth="'system_config:edit'" text type="success" size="small"
+							   @click="edit(scope.row, scope.$index)">编辑
+					</el-button>
+					<el-popconfirm title="确定删除吗？" @confirm="del(scope.row, scope.$index)">
+						<template #reference>
+							<el-button v-auth="'system_config:del'" text type="danger" size="small">删除</el-button>
+						</template>
+					</el-popconfirm>
+				</el-button-group>
+			</template>
+		</el-table-column>
+	</pi-table>
+	<save-dialog v-if="dialogShow" ref="dialogRef" @success="tableRef.refresh()" @closed="dialogShow=false"></save-dialog>
+</template>
+
+<script setup>
+import saveDialog from './save'
+import api from "@/api/index"
+import {getCurrentInstance, nextTick, ref} from "vue"
+
+defineOptions({
+	name: "systemConfig"
+})
+
+const {proxy} = getCurrentInstance()
+const tableRef = ref(null)
+const dialogRef = ref(null)
+
+let dialogShow = ref(false)
+let selection = ref([])
+let search = ref({
+	config_name: null,
+	config_key: null,
+	config_value: null,
+	remark: null,
+})
+
+//添加
+function add() {
+	dialogShow.value = true
+	nextTick(() => {
+		dialogRef.value.open()
+	})
+}
+
+//编辑
+async function edit(row) {
+	dialogShow.value = true
+	nextTick(() => {
+		dialogRef.value.open('edit', row)
+	})
+}
+
+//查看
+async function show(row) {
+	dialogShow.value = true
+	nextTick(() => {
+		dialogRef.value.open('show', row)
+	})
+}
+
+//删除
+async function del(row) {
+	const loading = proxy.$loading();
+	const res = await api.system.config.del({ids: [row.config_id]});
+	tableRef.value.refresh()
+	loading.close();
+	proxy.$message.success(res.msg)
+}
+
+//批量删除
+async function batch_del() {
+	proxy.$confirm(`确定删除选中的 ${selection.value.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+		type: 'warning'
+	}).then(async () => {
+		const loading = proxy.$loading();
+		const res = await api.system.config.del({ids: selection.value.map(item => item.config_id)});
+		tableRef.value.refresh()
+		loading.close();
+		proxy.$message.success(res.msg)
+	})
+}
+
+//表格选择后回调事件
+function selectionChange(e) {
+	selection.value = e;
+}
+
+//搜索
+function upsearch() {
+	tableRef.value.upData(search.value)
+}
+</script>
diff --git a/src/views/system/config/save.vue b/src/views/system/config/save.vue
new file mode 100644
index 0000000..cd326e6
--- /dev/null
+++ b/src/views/system/config/save.vue
@@ -0,0 +1,72 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px">
+			<el-form-item label="参数名称" prop="config_name">
+				<el-input type="text" v-model="form.config_name" placeholder="请输入参数名称" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="参数键名" prop="config_key">
+				<el-input type="text" v-model="form.config_key" placeholder="请输入参数键名" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="参数键值" prop="config_value">
+				<el-input type="text" v-model="form.config_value" placeholder="请输入参数键值" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input type="text" v-model="form.remark" placeholder="请输入备注" clearable></el-input>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false">取 消</el-button>
+			<el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import {getCurrentInstance, ref} from 'vue'
+import api from "@/api/index"
+
+defineExpose({
+	open
+})
+const emit = defineEmits(['success', 'closed'])
+const formRef = ref(null)
+const {proxy} = getCurrentInstance()
+
+let mode = ref('add')
+let titleMap = ref({
+	add: '新增',
+	edit: '编辑',
+	show: '查看'
+})
+let visible = ref(false)
+let isSaveing = ref(false)
+let form = ref({
+	config_id: null,
+	config_name: null,
+	config_key: null,
+	config_value: null,
+	remark: null
+})
+const rules = ref({})
+
+function open(m = 'add', data = null) {
+	mode.value = m
+	visible.value = true
+	Object.assign(form.value, data)
+}
+
+async function submit() {
+	// 校验登录
+	const validate = await formRef.value.validate().catch(() => {
+	});
+	if (!validate) {
+		return false
+	}
+	isSaveing.value = true;
+	const res = form.value.config_id ? await api.system.config.edit(form.value) : await api.system.config.add(form.value);
+	isSaveing.value = false
+	emit('success')
+	visible.value = false
+	proxy.$message.success(res.msg)
+}
+</script>