feat: add system quality improvement plan and implementation

novalon-manage-web/src/views/config/ConfigManagement.vue

@@ -1,59 +1,58 @@
 <template>
   <div class="config-management">
-    <a-card>
-      <template #title>
+    <el-card>
+      <template #header>
         <div class="card-title">
           <span>参数配置</span>
-          <a-button type="primary" @click="handleAdd">新增配置</a-button>
+          <el-button type="primary" @click="handleAdd">新增配置</el-button>
         </div>
       </template>
-      <a-table :columns="columns" :data-source="dataSource" :loading="loading">
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'configType'">
-            <a-tag :color="record.configType === 'Y' ? 'blue' : 'orange'">
-              {{ record.configType === 'Y' ? '内置' : '自定义' }}
-            </a-tag>
+      <el-table :data="dataSource" v-loading="loading" style="width: 100%">
+        <el-table-column prop="id" label="ID" />
+        <el-table-column prop="configName" label="参数名称" />
+        <el-table-column prop="configKey" label="参数键名" />
+        <el-table-column prop="configValue" label="参数值" />
+        <el-table-column label="类型">
+          <template #default="{ row }">
+            <el-tag :type="row.configType === 'Y' ? '' : 'info'">
+              {{ row.configType === 'Y' ? '内置' : '自定义' }}
+            </el-tag>
           </template>
-          <template v-if="column.key === 'action'">
-            <a-space>
-              <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
-              <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
-            </a-space>
+        </el-table-column>
+        <el-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
           </template>
-        </template>
-      </a-table>
-    </a-card>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
-    <a-modal v-model:open="modalVisible" :title="modalTitle" @ok="handleModalOk">
-      <a-form :model="formState" :label-col="{ span: 6 }">
-        <a-form-item label="参数名称" name="configName">
-          <a-input v-model:value="formState.configName" />
-        </a-form-item>
-        <a-form-item label="参数键名" name="configKey">
-          <a-input v-model:value="formState.configKey" />
-        </a-form-item>
-        <a-form-item label="参数值" name="configValue">
-          <a-input v-model:value="formState.configValue" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
+    <el-dialog v-model="modalVisible" :title="modalTitle" width="500px">
+      <el-form :model="formState" label-width="80px">
+        <el-form-item label="参数名称">
+          <el-input v-model="formState.configName" />
+        </el-form-item>
+        <el-form-item label="参数键名">
+          <el-input v-model="formState.configKey" />
+        </el-form-item>
+        <el-form-item label="参数值">
+          <el-input v-model="formState.configValue" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleModalOk">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import request from '@/utils/request'
 
-const columns = [
-  { title: 'ID', dataIndex: 'id', key: 'id' },
-  { title: '参数名称', dataIndex: 'configName', key: 'configName' },
-  { title: '参数键名', dataIndex: 'configKey', key: 'configKey' },
-  { title: '参数值', dataIndex: 'configValue', key: 'configValue' },
-  { title: '类型', key: 'configType' },
-  { title: '操作', key: 'action', width: 150 }
-]
-
 const loading = ref(false)
 const dataSource = ref([])
 const modalVisible = ref(false)
@@ -76,18 +75,23 @@ const handleAdd = () => {
   modalVisible.value = true
 }
 
-const handleEdit = (record: any) => {
+const handleEdit = (row: any) => {
   modalTitle.value = '编辑配置'
-  Object.assign(formState, record)
+  Object.assign(formState, row)
   modalVisible.value = true
 }
 
-const handleDelete = async (record: any) => {
+const handleDelete = async (row: any) => {
   try {
-    await request.delete(`/config/${record.id}`)
-    message.success('删除成功')
+    await ElMessageBox.confirm('确定要删除该配置吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    await request.delete(`/config/${row.id}`)
+    ElMessage.success('删除成功')
     fetchData()
-  } catch { message.error('删除失败') }
+  } catch {}
 }
 
 const handleModalOk = async () => {
@@ -97,10 +101,12 @@ const handleModalOk = async () => {
     } else {
       await request.post('/config', formState)
     }
-    message.success('操作成功')
+    ElMessage.success('操作成功')
     modalVisible.value = false
     fetchData()
-  } catch { message.error('操作失败') }
+  } catch {
+    ElMessage.error('操作失败')
+  }
 }
 
 onMounted(() => fetchData())