diff --git a/ai_knowledge_base_v2/apps/admin-web/src/App.vue b/ai_knowledge_base_v2/apps/admin-web/src/App.vue
index 6d17764..4c7f68b 100644
--- a/ai_knowledge_base_v2/apps/admin-web/src/App.vue
+++ b/ai_knowledge_base_v2/apps/admin-web/src/App.vue
@@ -6,7 +6,6 @@ import AdminLoginView from "./components/AdminLoginView.vue";
 import TableRowActions from "./components/TableRowActions.vue";
 import {
   systemSettingDefinitions,
-  systemSettingSections,
   type SystemSettingValue,
 } from "./config/systemSettings";
 import { api, clearToken, getToken, saveToken } from "./services/api";
@@ -47,6 +46,9 @@ const UserManagementView = defineAsyncComponent(
 const SsoIntegrationView = defineAsyncComponent(
   () => import("./components/SsoIntegrationView.vue"),
 );
+const SystemConfigView = defineAsyncComponent(
+  () => import("./components/SystemConfigView.vue"),
+);
 
 const admin = ref<AdminProfile | null>(null);
 const activeMenu = ref("dashboard");
@@ -55,6 +57,8 @@ const loading = ref(false);
 const entitlementPlans = ref<EntitlementPlan[]>([]);
 const models = ref<ModelItem[]>([]);
 const configs = ref<SystemConfigItem[]>([]);
+const savingSystemSettings = ref(false);
+const systemSettingsBaseline = ref<Record<string, string>>({});
 const previewKnowledgeId = ref<number | null>(null);
 const editingModelId = ref<number | null>(null);
 
@@ -174,6 +178,13 @@ const systemSettingValues = reactive<Record<string, SystemSettingValue>>({});
 systemSettingDefinitions.forEach((setting) => {
   systemSettingValues[setting.key] = setting.defaultValue;
 });
+const systemSettingsDirty = computed(() =>
+  systemSettingDefinitions.some(
+    (setting) =>
+      serializeSystemSettingValue(systemSettingValues[setting.key]) !==
+      systemSettingsBaseline.value[setting.key],
+  ),
+);
 
 onMounted(async () => {
   if (!getToken()) return;
@@ -490,20 +501,30 @@ function validateModelForm() {
 }
 
 async function saveSystemSettings() {
-  await Promise.all(
-    systemSettingDefinitions.map((setting) =>
-      api.saveConfig({
-        configKey: setting.key,
-        configValue: serializeSystemSettingValue(
-          systemSettingValues[setting.key],
-        ),
-        description: setting.description,
-      }),
-    ),
-  );
-  ElMessage.success("系统配置已保存");
-  configs.value = await api.configs();
-  hydrateSystemSettings();
+  if (savingSystemSettings.value || !systemSettingsDirty.value) return;
+  savingSystemSettings.value = true;
+  try {
+    await Promise.all(
+      systemSettingDefinitions.map((setting) =>
+        api.saveConfig({
+          configKey: setting.key,
+          configValue: serializeSystemSettingValue(
+            systemSettingValues[setting.key],
+          ),
+          description: setting.description,
+        }),
+      ),
+    );
+    configs.value = await api.configs();
+    hydrateSystemSettings();
+    ElMessage.success("系统配置已保存");
+  } catch (error) {
+    ElMessage.error(
+      error instanceof Error ? error.message : "系统配置保存失败，请重试",
+    );
+  } finally {
+    savingSystemSettings.value = false;
+  }
 }
 
 function hydrateSystemSettings() {
@@ -516,6 +537,17 @@ function hydrateSystemSettings() {
       configMap.get(setting.key),
     );
   });
+  systemSettingsBaseline.value = Object.fromEntries(
+    systemSettingDefinitions.map((setting) => [
+      setting.key,
+      serializeSystemSettingValue(systemSettingValues[setting.key]),
+    ]),
+  );
+}
+
+function updateSystemSetting(key: string, value: SystemSettingValue) {
+  if (systemSettingValues[key] === value) return;
+  systemSettingValues[key] = value;
 }
 
 function normalizeSystemSettingValue(
@@ -1014,81 +1046,14 @@ async function clearFeishuCache() {
 
         <SsoIntegrationView v-if="activeMenu === 'sso'" />
 
-        <template v-if="activeMenu === 'configs'">
-          <div class="page-head inline">
-            <div>
-              <h2>系统配置</h2>
-              <p>
-                按业务分组维护运行时配置，默认每日额度已接入学员新增和导入。
-              </p>
-            </div>
-            <el-button type="primary" @click="saveSystemSettings"
-              >保存系统配置</el-button
-            >
-          </div>
-          <section class="settings-grid">
-            <div
-              v-for="section in systemSettingSections"
-              :key="section.title"
-              class="settings-section"
-            >
-              <div class="settings-section-head">
-                <h3>{{ section.title }}</h3>
-                <p>{{ section.description }}</p>
-              </div>
-              <div class="settings-fields">
-                <label
-                  v-for="setting in section.settings"
-                  :key="setting.key"
-                  class="setting-field"
-                >
-                  <span>{{ setting.label }}</span>
-                  <el-input-number
-                    v-if="setting.type === 'number'"
-                    v-model="systemSettingValues[setting.key]"
-                    :min="setting.min"
-                    :max="setting.max"
-                  />
-                  <el-input
-                    v-else-if="setting.type === 'text'"
-                    v-model="systemSettingValues[setting.key]"
-                    :placeholder="setting.placeholder"
-                  />
-                  <el-input
-                    v-else-if="setting.type === 'password'"
-                    v-model="systemSettingValues[setting.key]"
-                    :placeholder="setting.placeholder"
-                    type="password"
-                    show-password
-                  />
-                  <el-select
-                    v-else-if="setting.type === 'select'"
-                    v-model="systemSettingValues[setting.key]"
-                    :placeholder="setting.placeholder"
-                  >
-                    <el-option
-                      v-for="option in setting.options || []"
-                      :key="option.value"
-                      :label="option.label"
-                      :value="option.value"
-                    />
-                  </el-select>
-                  <el-switch
-                    v-else
-                    v-model="systemSettingValues[setting.key]"
-                  />
-                  <small>{{ setting.description }}</small>
-                  <small
-                    v-if="setting.valueHint"
-                    class="setting-value-hint"
-                  >
-                    {{ setting.valueHint(systemSettingValues[setting.key]) }}
-                  </small>
-                </label>
-              </div>
-            </div>
-          </section>
-        </template>
+        <SystemConfigView
+          v-if="activeMenu === 'configs'"
+          :values="systemSettingValues"
+          :saving="savingSystemSettings"
+          :dirty="systemSettingsDirty"
+          @update="updateSystemSetting"
+          @save="saveSystemSettings"
+        />
 
         <RetrievalLogView v-if="activeMenu === 'retrievals'" />
         <AttentionManagementView v-if="activeMenu === 'attention'" />
diff --git a/ai_knowledge_base_v2/apps/admin-web/src/components/SystemConfigView.vue b/ai_knowledge_base_v2/apps/admin-web/src/components/SystemConfigView.vue
new file mode 100644
index 0000000..a969464
--- /dev/null
+++ b/ai_knowledge_base_v2/apps/admin-web/src/components/SystemConfigView.vue
@@ -0,0 +1,797 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import {
+  systemSettingSections,
+  type SystemSettingDefinition,
+  type SystemSettingValue,
+} from "../config/systemSettings";
+
+interface SettingGroupBlueprint {
+  title: string;
+  description: string;
+  keys: string[];
+}
+
+interface SettingGroup extends Omit<SettingGroupBlueprint, "keys"> {
+  settings: SystemSettingDefinition[];
+}
+
+const props = defineProps<{
+  values: Record<string, SystemSettingValue>;
+  saving: boolean;
+  dirty: boolean;
+}>();
+
+const emit = defineEmits<{
+  save: [];
+  update: [key: string, value: SystemSettingValue];
+}>();
+
+const groupBlueprints: Record<string, SettingGroupBlueprint[]> = {
+  用户与登录: [
+    {
+      title: "学员默认配置",
+      description: "新学员创建、导入时采用的默认资料和额度。",
+      keys: ["daily_chat_limit", "default_user_name_prefix"],
+    },
+    {
+      title: "登录与验证码",
+      description: "控制登录状态和验证码的有效时间。",
+      keys: ["access_token_expire_minutes", "sms_code_expire_minutes"],
+    },
+    {
+      title: "短信服务",
+      description: "在模拟短信与阿里云短信之间切换，并维护短信通道参数。",
+      keys: [
+        "mock_sms_enabled",
+        "mock_sms_code",
+        "aliyun_sms_access_key_id",
+        "aliyun_sms_access_key_secret",
+        "aliyun_sms_sign_name",
+        "aliyun_sms_template_code",
+        "aliyun_sms_template_param_key",
+        "aliyun_sms_endpoint",
+      ],
+    },
+  ],
+  "AI 问答": [
+    {
+      title: "回答体验",
+      description: "控制会话记忆、引用展示和模型请求的基本行为。",
+      keys: [
+        "ai_timeout_seconds",
+        "mock_model_enabled",
+        "chat_context_message_count",
+        "show_reference_sources",
+      ],
+    },
+    {
+      title: "模型分流",
+      description: "决定正式问答在不同问题类型下如何选择模型。",
+      keys: ["chat_model_routing_mode"],
+    },
+    {
+      title: "并发与排队",
+      description: "控制集中提问时的执行上限、等待容量和超时保护。",
+      keys: [
+        "chat_max_active_requests",
+        "chat_max_queue_size",
+        "chat_queue_timeout_seconds",
+        "chat_active_lease_seconds",
+      ],
+    },
+  ],
+  外部服务: [
+    {
+      title: "飞书接入",
+      description: "配置飞书知识库直读和独立检索服务。",
+      keys: ["feishu_search_url", "feishu_app_id", "feishu_app_secret"],
+    },
+    {
+      title: "稳定性策略",
+      description: "控制飞书接口慢响应和临时失败时的处理方式。",
+      keys: ["feishu_timeout_seconds", "feishu_retry_count"],
+    },
+  ],
+  系统开关: [
+    {
+      title: "审计与数据",
+      description: "控制后台审计信息和聊天记录导出能力。",
+      keys: ["show_operation_log_detail", "chat_export_enabled"],
+    },
+    {
+      title: "运行状态",
+      description: "用于系统维护期间的访问和提示策略。",
+      keys: ["maintenance_mode"],
+    },
+  ],
+};
+
+const wideSettingKeys = new Set([
+  "chat_model_routing_mode",
+  "chat_max_active_requests",
+  "feishu_search_url",
+]);
+
+const activeSectionTitle = ref(systemSettingSections[0]?.title || "");
+
+const activeSection = computed(
+  () =>
+    systemSettingSections.find(
+      (section) => section.title === activeSectionTitle.value,
+    ) || systemSettingSections[0],
+);
+
+const activeGroups = computed<SettingGroup[]>(() => {
+  const section = activeSection.value;
+  if (!section) return [];
+
+  const byKey = new Map(section.settings.map((setting) => [setting.key, setting]));
+  const configuredKeys = new Set<string>();
+  const groups = (groupBlueprints[section.title] || []).map((group) => {
+    const settings = group.keys
+      .map((key) => byKey.get(key))
+      .filter((setting): setting is SystemSettingDefinition => Boolean(setting));
+    settings.forEach((setting) => configuredKeys.add(setting.key));
+    return { title: group.title, description: group.description, settings };
+  });
+
+  const ungrouped = section.settings.filter(
+    (setting) => !configuredKeys.has(setting.key),
+  );
+  if (ungrouped.length) {
+    groups.push({
+      title: "其他设置",
+      description: "尚未归入固定分组的新配置项。",
+      settings: ungrouped,
+    });
+  }
+  return groups.filter((group) => group.settings.length);
+});
+
+const statusItems = computed(() => [
+  {
+    label: "短信通道",
+    value: props.values.mock_sms_enabled ? "模拟验证码" : "阿里云短信",
+    tone: props.values.mock_sms_enabled ? "warning" : "success",
+  },
+  {
+    label: "AI 模式",
+    value: props.values.mock_model_enabled ? "模拟模型" : "真实模型",
+    tone: props.values.mock_model_enabled ? "warning" : "success",
+  },
+  {
+    label: "会话记忆",
+    value:
+      Number(props.values.chat_context_message_count) > 0
+        ? `最近 ${props.values.chat_context_message_count} 条`
+        : "已关闭",
+    tone:
+      Number(props.values.chat_context_message_count) > 0 ? "neutral" : "warning",
+  },
+  {
+    label: "问答容量",
+    value: `${props.values.chat_max_active_requests || 0} 并发`,
+    tone: "neutral",
+  },
+]);
+
+function updateSetting(key: string, value: unknown) {
+  if (value === undefined || value === null) return;
+  emit("update", key, value as SystemSettingValue);
+}
+</script>
+
+<template>
+  <section class="system-config-page">
+    <header class="system-config-header">
+      <div>
+        <div class="system-config-title-line">
+          <h2>系统配置</h2>
+          <span :class="['save-state', { dirty }]">
+            {{ dirty ? "有未保存修改" : "配置已同步" }}
+          </span>
+        </div>
+        <p>集中维护学员登录、AI 问答、飞书接入和系统运行策略。</p>
+      </div>
+      <div class="system-config-actions">
+        <small>保存后立即对后续请求生效</small>
+        <el-button
+          type="primary"
+          :loading="saving"
+          :disabled="!dirty"
+          @click="emit('save')"
+        >
+          保存修改
+        </el-button>
+      </div>
+    </header>
+
+    <section class="config-status-strip" aria-label="当前关键配置摘要">
+      <div
+        v-for="item in statusItems"
+        :key="item.label"
+        class="config-status-item"
+      >
+        <span>{{ item.label }}</span>
+        <strong :class="`tone-${item.tone}`">{{ item.value }}</strong>
+      </div>
+    </section>
+
+    <div class="config-workspace">
+      <nav class="config-section-nav" aria-label="系统配置分组">
+        <div class="config-nav-heading">
+          <strong>配置分类</strong>
+          <span>选择一个分类集中编辑</span>
+        </div>
+        <button
+          v-for="section in systemSettingSections"
+          :key="section.title"
+          type="button"
+          :class="{ active: activeSectionTitle === section.title }"
+          @click="activeSectionTitle = section.title"
+        >
+          <span>
+            <strong>{{ section.title }}</strong>
+            <small>{{ section.description }}</small>
+          </span>
+          <b>{{ section.settings.length }}</b>
+        </button>
+      </nav>
+
+      <section v-if="activeSection" class="config-editor-panel">
+        <header class="config-editor-heading">
+          <div>
+            <span>当前分类</span>
+            <h3>{{ activeSection.title }}</h3>
+            <p>{{ activeSection.description }}</p>
+          </div>
+          <strong>{{ activeSection.settings.length }} 项配置</strong>
+        </header>
+
+        <div class="config-groups">
+          <article
+            v-for="group in activeGroups"
+            :key="group.title"
+            class="config-group-card"
+          >
+            <header>
+              <h4>{{ group.title }}</h4>
+              <p>{{ group.description }}</p>
+            </header>
+
+            <div class="config-fields-grid">
+              <div
+                v-for="setting in group.settings"
+                :key="setting.key"
+                :class="[
+                  'config-field',
+                  `config-field-${setting.type}`,
+                  { wide: wideSettingKeys.has(setting.key) },
+                ]"
+              >
+                <template v-if="setting.type === 'switch'">
+                  <div class="config-switch-copy">
+                    <strong>{{ setting.label }}</strong>
+                    <small>{{ setting.description }}</small>
+                  </div>
+                  <el-switch
+                    :model-value="Boolean(values[setting.key])"
+                    @update:model-value="updateSetting(setting.key, $event)"
+                  />
+                </template>
+
+                <template v-else>
+                  <label :for="`setting-${setting.key}`">
+                    <strong>{{ setting.label }}</strong>
+                    <span v-if="setting.type === 'password'">敏感配置</span>
+                  </label>
+                  <el-input-number
+                    v-if="setting.type === 'number'"
+                    :id="`setting-${setting.key}`"
+                    :model-value="Number(values[setting.key])"
+                    :min="setting.min"
+                    :max="setting.max"
+                    controls-position="right"
+                    @update:model-value="updateSetting(setting.key, $event)"
+                  />
+                  <el-input
+                    v-else-if="setting.type === 'text'"
+                    :id="`setting-${setting.key}`"
+                    :model-value="String(values[setting.key] ?? '')"
+                    :placeholder="setting.placeholder"
+                    clearable
+                    @update:model-value="updateSetting(setting.key, $event)"
+                  />
+                  <el-input
+                    v-else-if="setting.type === 'password'"
+                    :id="`setting-${setting.key}`"
+                    :model-value="String(values[setting.key] ?? '')"
+                    :placeholder="setting.placeholder"
+                    type="password"
+                    show-password
+                    @update:model-value="updateSetting(setting.key, $event)"
+                  />
+                  <el-select
+                    v-else-if="setting.type === 'select'"
+                    :id="`setting-${setting.key}`"
+                    :model-value="String(values[setting.key] ?? '')"
+                    :placeholder="setting.placeholder"
+                    @update:model-value="updateSetting(setting.key, $event)"
+                  >
+                    <el-option
+                      v-for="option in setting.options || []"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-select>
+                  <small>{{ setting.description }}</small>
+                  <small
+                    v-if="setting.valueHint"
+                    class="config-value-hint"
+                  >
+                    {{ setting.valueHint(values[setting.key]) }}
+                  </small>
+                </template>
+              </div>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.system-config-page {
+  display: grid;
+  gap: 18px;
+  min-width: 0;
+  padding-bottom: 24px;
+}
+
+.system-config-header {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.system-config-title-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.system-config-title-line h2 {
+  margin: 0;
+}
+
+.system-config-header p {
+  margin: 7px 0 0;
+  color: #687a75;
+  line-height: 1.6;
+}
+
+.save-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: #eaf3f0;
+  color: #55716a;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.save-state::before {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #62a38d;
+  content: "";
+}
+
+.save-state.dirty {
+  background: #fff4df;
+  color: #95651b;
+}
+
+.save-state.dirty::before {
+  background: #d79a37;
+}
+
+.system-config-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.system-config-actions small {
+  color: #83918d;
+}
+
+.system-config-actions .el-button {
+  min-width: 104px;
+}
+
+.config-status-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  overflow: hidden;
+  border: 1px solid #dfe9e5;
+  border-radius: 14px;
+  background: #fff;
+}
+
+.config-status-item {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+  padding: 15px 18px;
+}
+
+.config-status-item + .config-status-item {
+  border-left: 1px solid #e6eeeb;
+}
+
+.config-status-item span {
+  color: #7a8b86;
+  font-size: 12px;
+}
+
+.config-status-item strong {
+  overflow: hidden;
+  color: #2d463f;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.config-status-item .tone-success {
+  color: #197653;
+}
+
+.config-status-item .tone-warning {
+  color: #a26919;
+}
+
+.config-workspace {
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+  min-width: 0;
+}
+
+.config-section-nav,
+.config-editor-panel {
+  border: 1px solid #dfe8e5;
+  border-radius: 16px;
+  background: #fff;
+}
+
+.config-section-nav {
+  position: sticky;
+  top: 18px;
+  display: grid;
+  gap: 6px;
+  padding: 14px;
+}
+
+.config-nav-heading {
+  display: grid;
+  gap: 4px;
+  padding: 5px 7px 11px;
+}
+
+.config-nav-heading strong {
+  color: #29423b;
+  font-size: 14px;
+}
+
+.config-nav-heading span {
+  color: #879691;
+  font-size: 12px;
+}
+
+.config-section-nav button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  background: transparent;
+  color: #49605a;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.18s ease, background-color 0.18s ease;
+}
+
+.config-section-nav button:hover {
+  background: #f5f8f7;
+}
+
+.config-section-nav button.active {
+  border-color: #bcded2;
+  background: #edf7f3;
+  color: #176d53;
+}
+
+.config-section-nav button > span {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.config-section-nav button strong {
+  font-size: 14px;
+}
+
+.config-section-nav button small {
+  overflow: hidden;
+  color: #82908c;
+  font-size: 11px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.config-section-nav button b {
+  min-width: 26px;
+  padding: 4px 7px;
+  border-radius: 999px;
+  background: #eef3f1;
+  color: #71817c;
+  font-size: 11px;
+  text-align: center;
+}
+
+.config-section-nav button.active b {
+  background: #d9eee7;
+  color: #176d53;
+}
+
+.config-editor-panel {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.config-editor-heading {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 22px 24px;
+  border-bottom: 1px solid #e5ecea;
+  background: linear-gradient(135deg, #fbfdfc, #f4f9f7);
+}
+
+.config-editor-heading > div {
+  min-width: 0;
+}
+
+.config-editor-heading span {
+  color: #248064;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.config-editor-heading h3 {
+  margin: 6px 0 0;
+  color: #203b33;
+  font-size: 20px;
+}
+
+.config-editor-heading p {
+  margin: 7px 0 0;
+  color: #70827d;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.config-editor-heading > strong {
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #e7f2ee;
+  color: #4d6d64;
+  font-size: 12px;
+}
+
+.config-groups {
+  display: grid;
+  gap: 16px;
+  padding: 20px;
+}
+
+.config-group-card {
+  overflow: hidden;
+  border: 1px solid #e1eae7;
+  border-radius: 13px;
+  background: #fff;
+}
+
+.config-group-card > header {
+  padding: 15px 18px;
+  border-bottom: 1px solid #e8efed;
+  background: #fafcfb;
+}
+
+.config-group-card h4 {
+  margin: 0;
+  color: #2c453e;
+  font-size: 15px;
+}
+
+.config-group-card header p {
+  margin: 5px 0 0;
+  color: #7b8c87;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.config-fields-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0;
+  padding: 4px 18px 18px;
+}
+
+.config-field {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+  padding: 15px 16px 2px 0;
+}
+
+.config-field:nth-child(even):not(.wide) {
+  padding-right: 0;
+  padding-left: 16px;
+  border-left: 1px solid #edf2f0;
+}
+
+.config-field.wide {
+  grid-column: 1 / -1;
+  padding-right: 0;
+}
+
+.config-field label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.config-field label strong,
+.config-switch-copy strong {
+  color: #324841;
+  font-size: 14px;
+}
+
+.config-field label span {
+  flex: 0 0 auto;
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: #fff1ed;
+  color: #a4503f;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.config-field > small,
+.config-switch-copy small {
+  color: #7b8985;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.config-field :deep(.el-input-number),
+.config-field :deep(.el-input),
+.config-field :deep(.el-select) {
+  width: 100%;
+}
+
+.config-field :deep(.el-input__wrapper),
+.config-field :deep(.el-select__wrapper),
+.config-field :deep(.el-input-number) {
+  min-height: 40px;
+}
+
+.config-field-switch {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 20px;
+  align-items: center;
+  min-height: 70px;
+  padding-bottom: 12px;
+}
+
+.config-switch-copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.config-value-hint {
+  padding: 10px 12px;
+  border: 1px solid #cde4db;
+  border-radius: 9px;
+  background: #f2f9f6;
+  color: #2c6e58 !important;
+}
+
+@media (max-width: 1320px) {
+  .config-workspace {
+    grid-template-columns: 220px minmax(0, 1fr);
+  }
+
+  .config-status-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .config-status-item:nth-child(3) {
+    border-left: 0;
+    border-top: 1px solid #e6eeeb;
+  }
+
+  .config-status-item:nth-child(4) {
+    border-top: 1px solid #e6eeeb;
+  }
+}
+
+@media (max-width: 1080px) {
+  .system-config-header {
+    flex-direction: column;
+  }
+
+  .system-config-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .config-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .config-section-nav {
+    position: static;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .config-nav-heading {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 760px) {
+  .config-status-strip,
+  .config-section-nav,
+  .config-fields-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .config-status-item + .config-status-item,
+  .config-status-item:nth-child(3),
+  .config-status-item:nth-child(4) {
+    border-top: 1px solid #e6eeeb;
+    border-left: 0;
+  }
+
+  .config-field,
+  .config-field:nth-child(even):not(.wide) {
+    padding-right: 0;
+    padding-left: 0;
+    border-left: 0;
+  }
+}
+</style>
diff --git a/ai_knowledge_base_v2/apps/admin-web/src/styles.css b/ai_knowledge_base_v2/apps/admin-web/src/styles.css
index 056ddf5..b397616 100644
--- a/ai_knowledge_base_v2/apps/admin-web/src/styles.css
+++ b/ai_knowledge_base_v2/apps/admin-web/src/styles.css
@@ -1678,67 +1678,6 @@ textarea {
   margin-top: 12px;
 }
 
-.settings-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
-  margin-bottom: 16px;
-}
-
-.settings-section {
-  padding: 18px;
-  border: 1px solid #dfe8e5;
-  border-radius: 8px;
-  background: #ffffff;
-}
-
-.settings-section-head h3 {
-  margin: 0;
-  font-size: 17px;
-}
-
-.settings-section-head p {
-  margin: 6px 0 0;
-  color: #667a73;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.settings-fields {
-  display: grid;
-  gap: 14px;
-  margin-top: 16px;
-}
-
-.setting-field {
-  display: grid;
-  gap: 7px;
-}
-
-.setting-field > span {
-  color: #223631;
-  font-weight: 600;
-}
-
-.setting-field > small {
-  color: #667a73;
-  line-height: 1.5;
-}
-
-.setting-field > .setting-value-hint {
-  padding: 9px 11px;
-  border: 1px solid #cde6dc;
-  border-radius: 8px;
-  background: #f3faf7;
-  color: #246b52;
-}
-
-.setting-field .el-input-number,
-.setting-field .el-input,
-.setting-field .el-select {
-  width: 100%;
-}
-
 .el-drawer .el-date-editor.el-input {
   width: 100%;
 }
@@ -2343,8 +2282,7 @@ textarea {
 @media (max-width: 1120px) {
   .student-tools,
   .user-list-toolbar,
-  .agent-workbench,
-  .settings-grid {
+  .agent-workbench {
     grid-template-columns: 1fr;
   }
 
diff --git a/ai_knowledge_base_v2/design-qa.md b/ai_knowledge_base_v2/design-qa.md
index 0de1d0b..0311131 100644
--- a/ai_knowledge_base_v2/design-qa.md
+++ b/ai_knowledge_base_v2/design-qa.md
@@ -51,6 +51,54 @@ final result: passed
 
 ---
 
+# 系统配置页面重构验收（2026-08-04）
+
+- 源页面截图：`development_records/ui-evidence/system-config-2026-08-04/before.png`
+- 实现页面截图：`development_records/ui-evidence/system-config-2026-08-04/after.png`
+- 同屏对比图：`development_records/ui-evidence/system-config-2026-08-04/comparison.jpg`
+- 验收地址：`http://localhost:5174/`
+- 状态：管理员已登录 / 系统配置 / 用户与登录
+- 视口：1280 × 720 CSS px，设备像素密度 1
+- 源页面完整截图：1280 × 1998 px；实现页面完整截图：1280 × 1572 px
+- 归一化方式：两张截图均保持 1280 px 原始宽度和相同像素密度，不缩放；对比图仅在实现图底部补白至相同高度
+
+## 完整视图与重点区域证据
+
+- 修复前同时铺开 29 项配置，分散在三列高度不一的卡片中，阅读路径长、首屏没有重点，底部留白失衡。
+- 修复后增加运行摘要、左侧分类导航和右侧聚焦编辑区；一次只展示一个顶级分类，并在分类内按业务语义分组。
+- “用户与登录、AI 问答、外部服务、系统开关”四个分类均已逐项打开验证，29 项现有配置全部保留。
+- 首屏摘要展示短信模式、AI 模式、上下文消息数和最大并发数，管理员无需进入字段即可了解关键运行状态。
+
+## 必查视觉面
+
+- 字体与排版：标题、摘要值、分组标题、字段标签和说明形成稳定层级；长说明自然换行，不与控件挤压。
+- 间距与布局：左侧导航吸附，右侧表单采用统一双列网格；开关类配置使用整行设置项，控件垂直居中。
+- 颜色与设计令牌：沿用后台现有深墨绿、浅雾绿和蓝色主操作色，没有新增图片或大面积装饰色块。
+- 图片与资源：页面完全使用现有组件与 CSS，不依赖新增图片资产。
+- 文案：保留原配置名称和说明；新增“配置已同步 / 有未保存修改”状态，敏感字段增加提示标识。
+
+## 交互与工程检查
+
+- 已验证四个分类导航均可切换，并显示对应分组和配置数量。
+- 已验证 AI 超时从 60 改为 61 后出现“有未保存修改”且保存按钮启用；恢复为 60 后状态回到“配置已同步”且按钮禁用。
+- 本次验收未实际保存配置，未修改现有运行参数。
+- 保存流程已补充重复提交保护、保存中状态和失败提示，接口与原有配置读写逻辑保持不变。
+- 1280 px 视口下文档、页面容器和配置工作区 `scrollWidth` 均等于 `clientWidth`，无横向滚动。
+- 浏览器控制台错误和警告：0。
+- `npm run build`：通过。
+
+## 对比历史
+
+1. [P1] 初始问题：全部配置同时展示，三列信息密度过高，管理员难以定位配置且页面高度失控。
+2. 修复：按任务域拆成四个分类和十个业务分组，增加关键状态摘要与聚焦编辑工作区。
+3. [P2] 初始问题：保存按钮始终可点击，缺少未保存状态、保存中反馈和错误处理。
+4. 修复：增加基线对比、脏状态提示、按钮禁用规则、重复提交保护与真实失败提示。
+5. 复验：完整视图信息层级清晰，分类切换、状态恢复、响应式宽度和构建均通过；未发现剩余 P0、P1、P2 问题。
+
+final result: passed
+
+---
+
 # Markdown 长回答排版修复验收（2026-07-17）
 
 ## 对照范围
diff --git a/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/after.png b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/after.png
new file mode 100644
index 0000000..e7f7e52
Binary files /dev/null and b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/after.png differ
diff --git a/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/ai-settings.png b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/ai-settings.png
new file mode 100644
index 0000000..b305f93
Binary files /dev/null and b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/ai-settings.png differ
diff --git a/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/before.png b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/before.png
new file mode 100644
index 0000000..8a044b4
Binary files /dev/null and b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/before.png differ
diff --git a/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/comparison.jpg b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/comparison.jpg
new file mode 100644
index 0000000..e4d21ba
Binary files /dev/null and b/ai_knowledge_base_v2/development_records/ui-evidence/system-config-2026-08-04/comparison.jpg differ