合并基础配置三段页面布局

frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.css

@@ -13,10 +13,34 @@
 }
 
 .form-group + .form-group {
-  padding-top: 12px;
+  margin-top: 16px;
+  padding-top: 16px;
   border-top: 1px solid var(--pm-border-color);
 }
 
+.form-group-heading {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin-bottom: 10px;
+}
+
+.form-group-heading h4 {
+  margin: 0;
+  color: var(--pm-text-primary);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.form-group-description {
+  flex: 1 1 100%;
+  margin: 0;
+  color: var(--pm-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
 .credential-status,
 .form-group-note,
 .form-empty {
@@ -69,6 +93,10 @@
   outline-offset: 2px;
 }
 
+.form-sections {
+  display: none;
+}
+
 .section-error {
   margin-left: 6px;
   color: var(--el-color-danger);
@@ -80,6 +108,12 @@
   border-top: 0;
 }
 
+.config-form[data-form-section="base"] .form-group + .form-group {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--pm-border-color);
+}
+
 @container config-main (min-width: 640px) {
   .form-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -99,8 +133,14 @@
   }
 
   .form-group + .form-group {
+    margin-top: 8px;
     padding-top: 8px;
   }
+
+  .config-form[data-form-section="base"] .form-group + .form-group {
+    margin-top: 12px;
+    padding-top: 12px;
+  }
 }
 
 @container config-main (max-width: 360px) {

frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.vue

@@ -16,12 +16,16 @@
     </nav>
     <section
       v-for="group in groups"
-      v-show="section !== 'base' || activeGroup === group.id"
       :key="group.id"
       class="form-group"
       :data-group="group.id"
       :aria-label="group.title"
     >
+      <div class="form-group-heading">
+        <h4>{{ group.title }}</h4>
+        <p v-if="group.description" class="form-group-description">{{ group.description }}</p>
+        <span v-if="group.fields.some(field => errors[fieldKey(field)])" class="section-error">待修正</span>
+      </div>
       <p v-if="group.secretConfigured !== undefined" class="credential-status">{{ group.secretConfigured ? '凭据已配置' : '未配置凭据' }}</p>
       <p v-if="group.note" class="form-group-note" role="note">{{ group.note }}</p>
       <div class="form-grid" :class="{ 'site-grid': section === 'base' && group.id === 'site' }">