第 5 阶段：纠纷、通知与后台-1

frontend/src/views/admin/AdminSystemConfigsView.vue

@@ -1,3 +1,60 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+import { fetchSystemConfigs, updateSystemConfig, type SystemConfig } from '@/api/systemConfigs'
+
+const loading = ref(false)
+const submitting = ref(false)
+const configs = ref<SystemConfig[]>([])
+const activeConfig = ref<SystemConfig | null>(null)
+const value = ref('')
+const description = ref('')
+
+onMounted(loadConfigs)
+
+async function loadConfigs() {
+  loading.value = true
+  try {
+    configs.value = await fetchSystemConfigs()
+  } finally {
+    loading.value = false
+  }
+}
+
+function openEdit(row: SystemConfig) {
+  activeConfig.value = row
+  value.value = row.value
+  description.value = row.description
+}
+
+async function handleSave() {
+  if (!activeConfig.value) return
+  submitting.value = true
+  try {
+    await updateSystemConfig(activeConfig.value.key, {
+      value: value.value,
+      description: description.value,
+    })
+    ElMessage.success('配置已更新')
+    activeConfig.value = null
+    await loadConfigs()
+  } catch (error) {
+    ElMessage.error(readError(error, '保存失败'))
+  } finally {
+    submitting.value = false
+  }
+}
+
+function readError(error: unknown, fallback: string) {
+  if (typeof error === 'object' && error && 'response' in error) {
+    const response = (error as { response?: { data?: { message?: string } } }).response
+    return response?.data?.message || fallback
+  }
+  return fallback
+}
+</script>
+
 <template>
   <section class="page">
     <div class="page-header">
@@ -5,5 +62,30 @@
       <h1>系统配置</h1>
       <p>管理交接超时、归还超时、短信限流、最低押金和抽成比例。</p>
     </div>
+
+    <el-table v-loading="loading" class="table-panel" :data="configs">
+      <el-table-column prop="key" label="配置项" min-width="260" />
+      <el-table-column prop="value" label="当前值" width="150" />
+      <el-table-column prop="description" label="说明" min-width="260" show-overflow-tooltip />
+      <el-table-column prop="updated_by" label="更新人" width="100" />
+      <el-table-column prop="updated_at" label="更新时间" min-width="180" />
+      <el-table-column label="操作" width="100">
+        <template #default="{ row }">
+          <el-button size="small" @click="openEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :model-value="!!activeConfig" title="编辑系统配置" width="560px" @update:model-value="activeConfig = null">
+      <div v-if="activeConfig" class="dialog-body">
+        <p><strong>{{ activeConfig.key }}</strong></p>
+        <el-input v-model="value" placeholder="配置值" />
+        <el-input v-model="description" type="textarea" :rows="3" placeholder="配置说明" />
+      </div>
+      <template #footer>
+        <el-button @click="activeConfig = null">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
   </section>
 </template>