From 78ad1ebb6290ae9a1100ed2e5942e1e3b6fd98b8 Mon Sep 17 00:00:00 2001
From: tbphp <admin@tbphp.net>
Date: Fri, 4 Jul 2025 23:53:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=BE=E7=BD=AE=E4=B8=BAui=E5=8E=9F=E7=94=9F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/config/system_settings.go |  34 ++--
 web/src/assets/style.css           |   4 +-
 web/src/views/Settings.vue         | 307 +++++++----------------------
 3 files changed, 90 insertions(+), 255 deletions(-)

diff --git a/internal/config/system_settings.go b/internal/config/system_settings.go
index 8cf7908..10e73af 100644
--- a/internal/config/system_settings.go
+++ b/internal/config/system_settings.go
@@ -17,27 +17,25 @@ import (
 // SystemSettings 定义所有系统配置项
 // 使用结构体标签作为唯一事实来源
 type SystemSettings struct {
-	// 负载均衡和重试配置
-	BlacklistThreshold int `json:"blacklist_threshold" default:"1" name:"黑名单阈值" category:"失败重试" desc:"一个 Key 连续失败多少次后进入黑名单" validate:"min=0"`
-	MaxRetries         int `json:"max_retries" default:"3" name:"最大重试次数" category:"失败重试" desc:"单个请求使用不同 Key 的最大重试次数" validate:"min=0"`
+	// 基础参数
+	BlacklistThreshold      int `json:"blacklist_threshold" default:"1" name:"黑名单阈值" category:"基础参数" desc:"一个 Key 连续失败多少次后进入黑名单" validate:"min=0"`
+	MaxRetries              int `json:"max_retries" default:"3" name:"最大重试次数" category:"基础参数" desc:"单个请求使用不同 Key 的最大重试次数" validate:"min=0"`
+	RequestLogRetentionDays int `json:"request_log_retention_days" default:"30" name:"日志保留天数" category:"基础参数" desc:"请求日志在数据库中的保留天数" validate:"min=1"`
 
-	// 服务器超时配置 (秒)
-	ServerReadTimeout             int `json:"server_read_timeout" default:"120" name:"读取超时" category:"服务器配置" desc:"HTTP 服务器读取超时时间（秒）" validate:"min=1"`
-	ServerWriteTimeout            int `json:"server_write_timeout" default:"1800" name:"写入超时" category:"服务器配置" desc:"HTTP 服务器写入超时时间（秒）" validate:"min=1"`
-	ServerIdleTimeout             int `json:"server_idle_timeout" default:"120" name:"空闲超时" category:"服务器配置" desc:"HTTP 服务器空闲超时时间（秒）" validate:"min=1"`
-	ServerGracefulShutdownTimeout int `json:"server_graceful_shutdown_timeout" default:"60" name:"优雅关闭超时" category:"服务器配置" desc:"服务优雅关闭的等待超时时间（秒）" validate:"min=1"`
+	// 服务超时
+	ServerReadTimeout             int `json:"server_read_timeout" default:"120" name:"读取超时" category:"服务超时" desc:"HTTP 服务器读取超时时间（秒）" validate:"min=1"`
+	ServerWriteTimeout            int `json:"server_write_timeout" default:"1800" name:"写入超时" category:"服务超时" desc:"HTTP 服务器写入超时时间（秒）" validate:"min=1"`
+	ServerIdleTimeout             int `json:"server_idle_timeout" default:"120" name:"空闲超时" category:"服务超时" desc:"HTTP 服务器空闲超时时间（秒）" validate:"min=1"`
+	ServerGracefulShutdownTimeout int `json:"server_graceful_shutdown_timeout" default:"60" name:"优雅关闭超时" category:"服务超时" desc:"服务优雅关闭的等待超时时间（秒）" validate:"min=1"`
 
-	// 请求超时配置 (秒)
-	RequestTimeout  int `json:"request_timeout" default:"30" name:"请求超时" category:"请求配置" desc:"请求处理的总体超时时间（秒）" validate:"min=1"`
-	ResponseTimeout int `json:"response_timeout" default:"30" name:"响应超时" category:"请求配置" desc:"TLS 握手和响应头的超时时间（秒）" validate:"min=1"`
-	IdleConnTimeout int `json:"idle_conn_timeout" default:"120" name:"空闲连接超时" category:"请求配置" desc:"空闲连接的超时时间（秒）" validate:"min=1"`
+	// 请求超时
+	RequestTimeout  int `json:"request_timeout" default:"30" name:"请求超时" category:"请求超时" desc:"请求处理的总体超时时间（秒）" validate:"min=1"`
+	ResponseTimeout int `json:"response_timeout" default:"30" name:"响应超时" category:"请求超时" desc:"TLS 握手和响应头的超时时间（秒）" validate:"min=1"`
+	IdleConnTimeout int `json:"idle_conn_timeout" default:"120" name:"空闲连接超时" category:"请求超时" desc:"空闲连接的超时时间（秒）" validate:"min=1"`
 
-	// 请求日志配置（数据库日志）
-	RequestLogRetentionDays int `json:"request_log_retention_days" default:"30" name:"日志保留天数" category:"日志配置" desc:"请求日志在数据库中的保留天数" validate:"min=1"`
-
-	// 密钥验证配置
-	KeyValidationIntervalMinutes  int `json:"key_validation_interval_minutes" default:"60" name:"定时验证周期" category:"密钥验证" desc:"后台定时验证密钥的默认周期（分钟）" validate:"min=5"`
-	KeyValidationConcurrency      int `json:"key_validation_concurrency" default:"10" name:"验证并发数" category:"密钥验证" desc:"执行密钥验证时的并发 goroutine 数量" validate:"min=1,max=100"`
+	// 密钥验证
+	KeyValidationIntervalMinutes    int `json:"key_validation_interval_minutes" default:"60" name:"定时验证周期" category:"密钥验证" desc:"后台定时验证密钥的默认周期（分钟）" validate:"min=5"`
+	KeyValidationConcurrency        int `json:"key_validation_concurrency" default:"10" name:"验证并发数" category:"密钥验证" desc:"执行密钥验证时的并发 goroutine 数量" validate:"min=1,max=100"`
 	KeyValidationTaskTimeoutMinutes int `json:"key_validation_task_timeout_minutes" default:"60" name:"手动验证超时" category:"密钥验证" desc:"手动触发的全量验证任务的超时时间（分钟）" validate:"min=10"`
 }
 
diff --git a/web/src/assets/style.css b/web/src/assets/style.css
index f5091b5..adf8537 100644
--- a/web/src/assets/style.css
+++ b/web/src/assets/style.css
@@ -1,6 +1,6 @@
 :root {
-  /* overflow-y: scroll;
-  scrollbar-gutter: stable; */
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
   font-family:
     "Inter",
     -apple-system,
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index d7eb442..7d243e6 100644
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -1,19 +1,37 @@
 <script setup lang="ts">
 import { settingsApi, type SettingCategory } from "@/api/settings";
-import { NButton, NCard, NForm, NFormItem, NInput, NInputNumber, NTooltip } from "naive-ui";
+import {
+  NButton,
+  NCard,
+  NForm,
+  NFormItem,
+  NGrid,
+  NGridItem,
+  NIcon,
+  NInput,
+  NInputNumber,
+  NSpace,
+  NTooltip,
+  useMessage,
+} from "naive-ui";
 import { ref } from "vue";
 
 const settingList = ref<SettingCategory[]>([]);
 const formRef = ref();
 const form = ref<Record<string, string | number>>({});
 const isSaving = ref(false);
+const message = useMessage();
 
 fetchSettings();
 
 async function fetchSettings() {
-  const data = await settingsApi.getSettings();
-  settingList.value = data || [];
-  initForm();
+  try {
+    const data = await settingsApi.getSettings();
+    settingList.value = data || [];
+    initForm();
+  } catch (_error) {
+    message.error("获取设置失败");
+  }
 }
 
 function initForm() {
@@ -35,6 +53,7 @@ async function handleSubmit() {
     isSaving.value = true;
     await settingsApi.updateSettings(form.value);
     await fetchSettings();
+    message.success("设置已保存");
   } finally {
     isSaving.value = false;
   }
@@ -42,269 +61,87 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <div class="settings-container">
-    <div class="settings-content">
-      <n-form ref="formRef" :model="form" label-placement="top" class="settings-form">
-        <div
-          v-for="(category, cIndex) in settingList"
-          :key="cIndex"
-          class="settings-category"
-          :style="{ animationDelay: `${cIndex * 0.05}s` }"
+  <n-space vertical size="large">
+    <n-form ref="formRef" :model="form" label-placement="top">
+      <n-space vertical size="large">
+        <n-card
+          size="small"
+          v-for="category in settingList"
+          :key="category.category_name"
+          :title="category.category_name"
+          hoverable
+          bordered
         >
-          <n-card class="category-card modern-card" :bordered="false" size="small">
-            <template #header>
-              <div class="category-header">
-                <h3 class="category-title">{{ category.category_name }}</h3>
-                <div class="category-divider" />
-              </div>
-            </template>
-
-            <div class="settings-grid">
+          <n-grid :x-gap="24" :y-gap="24" responsive="screen" cols="1 s:2 m:2 l:3 xl:4">
+            <n-grid-item v-for="item in category.settings" :key="item.key">
               <n-form-item
-                v-for="item in category.settings"
-                :key="item.key"
                 :path="item.key"
-                class="setting-item"
-                :rule="{
-                  required: true,
-                  message: `请输入${item.name}`,
-                }"
+                :rule="{ required: true, message: `请输入 ${item.name}` }"
               >
                 <template #label>
-                  <div class="setting-label">
-                    <span class="label-text">{{ item.name }}</span>
+                  <n-space align="center" :size="4" :wrap-item="false">
                     <n-tooltip trigger="hover" placement="top">
                       <template #trigger>
-                        <div class="label-help">
-                          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <n-icon :size="16" style="cursor: help; color: #9ca3af">
+                          <svg viewBox="0 0 24 24" fill="currentColor">
                             <path
                               d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
                             />
                           </svg>
-                        </div>
+                        </n-icon>
                       </template>
-                      <div class="tooltip-content">{{ item.description }}</div>
+                      {{ item.description }}
                     </n-tooltip>
-                  </div>
+                    <span>{{ item.name }}</span>
+                  </n-space>
                 </template>
 
                 <n-input-number
                   v-if="item.type === 'int'"
                   v-model:value="form[item.key] as number"
-                  :min="item.min_value! >= 0 ? item.min_value : undefined"
-                  class="modern-input setting-input"
+                  :min="
+                    item.min_value !== undefined && item.min_value >= 0 ? item.min_value : undefined
+                  "
                   placeholder="请输入数值"
                   clearable
+                  style="width: 100%"
                 />
                 <n-input
                   v-else
                   v-model:value="form[item.key] as string"
-                  class="modern-input setting-input"
                   placeholder="请输入内容"
                   clearable
                 />
               </n-form-item>
-            </div>
-          </n-card>
-        </div>
-      </n-form>
+            </n-grid-item>
+          </n-grid>
+        </n-card>
+      </n-space>
+    </n-form>
 
-      <div class="settings-actions">
-        <n-button
-          v-show="settingList.length > 0"
-          type="primary"
-          size="large"
-          class="save-button modern-button"
-          :loading="isSaving"
-          :disabled="isSaving"
-          @click="handleSubmit"
-        >
-          <template #icon>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+    <div
+      v-if="settingList.length > 0"
+      style="display: flex; justify-content: center; padding-top: 16px"
+    >
+      <n-button
+        type="primary"
+        size="large"
+        :loading="isSaving"
+        :disabled="isSaving"
+        @click="handleSubmit"
+        style="min-width: 200px"
+      >
+        <template #icon>
+          <n-icon>
+            <svg viewBox="0 0 24 24" fill="currentColor">
               <path
                 d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"
               />
             </svg>
-          </template>
-          {{ isSaving ? "保存中..." : "保存设置" }}
-        </n-button>
-      </div>
+          </n-icon>
+        </template>
+        {{ isSaving ? "保存中..." : "保存设置" }}
+      </n-button>
     </div>
-  </div>
+  </n-space>
 </template>
-
-<style scoped>
-.settings-header {
-  margin-bottom: 32px;
-  text-align: center;
-}
-
-.settings-title {
-  font-size: 2.25rem;
-  font-weight: 700;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin: 0 0 8px 0;
-  letter-spacing: -0.5px;
-}
-
-.settings-subtitle {
-  font-size: 1.1rem;
-  color: #64748b;
-  margin: 0;
-  font-weight: 500;
-}
-
-.settings-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.settings-category {
-  animation: fadeInUp 0.2s ease-out both;
-  margin-bottom: 12px;
-}
-
-.category-card {
-  background: rgba(255, 255, 255, 0.98);
-}
-
-.category-header {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.category-title {
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: #1e293b;
-  margin: 0;
-}
-
-.category-divider {
-  height: 3px;
-  background: var(--primary-gradient);
-  border-radius: 2px;
-  width: 60px;
-}
-
-.settings-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 12px 10px;
-}
-
-.setting-item {
-  margin-bottom: 0;
-}
-
-.setting-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.label-text {
-  font-weight: 600;
-  color: #374151;
-  font-size: 0.95rem;
-}
-
-.label-help {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: rgba(102, 126, 234, 0.1);
-  color: #667eea;
-  cursor: help;
-  transition: all 0.2s ease;
-}
-
-.label-help:hover {
-  background: rgba(102, 126, 234, 0.2);
-  transform: scale(1.1);
-}
-
-.tooltip-content {
-  max-width: 250px;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.setting-input {
-  width: 100%;
-}
-
-.settings-actions {
-  display: flex;
-  justify-content: center;
-  padding-top: 12px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.save-button {
-  min-width: 200px;
-  background: var(--primary-gradient);
-  border: none;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  height: 48px;
-  font-size: 1rem;
-}
-
-.save-button:hover {
-  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 768px) {
-  .settings-title {
-    font-size: 1.75rem;
-  }
-
-  .settings-grid {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-
-  .save-button {
-    width: 100%;
-  }
-}
-
-:deep(.n-form-item-label) {
-  padding: 0;
-}
-
-:deep(.n-input) {
-  --n-border-radius: 12px;
-}
-
-:deep(.n-input-number) {
-  --n-border-radius: 12px;
-}
-
-:deep(.n-card-header) {
-  padding-bottom: 5px;
-}
-</style>