feat(channel): 对话框 Tab 布局 — 基础设置 + 平台独立 Tab + 固定高度

frontend/src/i18n/locales/en.ts

@@ -1808,6 +1808,7 @@ export default {
         defaultPerRequestPrice: 'Default per-request price (fallback when no tier matches)',
         defaultImagePrice: 'Default image price (fallback when no tier matches)',
         platformConfig: 'Platform Configuration',
+        basicSettings: 'Basic Settings',
         addPlatform: 'Add Platform',
         noPlatforms: 'Click "Add Platform" to start configuring the channel',
         mappingCount: 'mappings',

frontend/src/i18n/locales/zh.ts

@@ -1888,6 +1888,7 @@ export default {
         defaultPerRequestPrice: '默认单次价格（未命中层级时使用）',
         defaultImagePrice: '默认图片价格（未命中层级时使用）',
         platformConfig: '平台配置',
+        basicSettings: '基础设置',
         addPlatform: '添加平台',
         noPlatforms: '点击"添加平台"开始配置渠道',
         mappingCount: '条映射',

frontend/src/views/admin/ChannelsView.vue

@@ -143,7 +143,42 @@
       width="extra-wide"
       @close="closeDialog"
     >
-      <form id="channel-form" @submit.prevent="handleSubmit" class="space-y-5">
+      <div class="channel-dialog-body">
+        <!-- Tab Bar -->
+        <div class="flex items-center border-b border-gray-200 dark:border-dark-700 flex-shrink-0 -mx-4 sm:-mx-6 px-4 sm:px-6 -mt-3 sm:-mt-4">
+          <!-- Basic Settings Tab -->
+          <button
+            type="button"
+            @click="activeTab = 'basic'"
+            class="channel-tab"
+            :class="activeTab === 'basic' ? 'channel-tab-active' : 'channel-tab-inactive'"
+          >
+            {{ t('admin.channels.form.basicSettings', '基础设置') }}
+          </button>
+          <!-- Platform Tabs -->
+          <button
+            v-for="(section, sIdx) in form.platforms"
+            :key="section.platform"
+            type="button"
+            @click="activeTab = section.platform"
+            class="channel-tab group"
+            :class="activeTab === section.platform ? 'channel-tab-active' : 'channel-tab-inactive'"
+          >
+            <PlatformIcon :platform="section.platform" size="xs" :class="getPlatformTextColor(section.platform)" />
+            <span :class="getPlatformTextColor(section.platform)">{{ t('admin.groups.platforms.' + section.platform, section.platform) }}</span>
+            <span
+              @click.stop="removePlatformSection(sIdx)"
+              class="ml-1 rounded-full p-0.5 opacity-0 group-hover:opacity-100 hover:bg-gray-200 dark:hover:bg-dark-600 transition-opacity"
+            >
+              <Icon name="x" size="xs" class="text-gray-400 hover:text-red-500" />
+            </span>
+          </button>
+        </div>
+
+        <!-- Tab Content -->
+        <form id="channel-form" @submit.prevent="handleSubmit" class="flex-1 overflow-y-auto pt-4">
+          <!-- Basic Settings Tab -->
+          <div v-show="activeTab === 'basic'" class="space-y-5">
             <!-- Name -->
             <div>
               <label class="input-label">{{ t('admin.channels.form.name', 'Name') }} <span class="text-red-500">*</span></label>
@@ -197,11 +232,10 @@
               </p>
             </div>
 
-        <!-- Platform Sections -->
+            <!-- Platform Management -->
             <div class="space-y-3">
               <div class="flex items-center justify-between">
                 <label class="input-label mb-0">{{ t('admin.channels.form.platformConfig', '平台配置') }}</label>
-            <!-- Add Platform -->
                 <div class="relative" v-if="availablePlatformsToAdd.length > 0">
                   <button type="button" @click="showPlatformMenu = !showPlatformMenu" class="btn btn-secondary btn-sm">
                     <Icon name="plus" size="sm" class="mr-1" />
@@ -232,29 +266,19 @@
                 {{ t('admin.channels.form.noPlatforms', '点击"添加平台"开始配置渠道') }}
               </div>
 
-          <!-- Each Platform Section -->
+              <!-- Platform summary list -->
+              <div v-else class="space-y-2">
                 <div
                   v-for="(section, sIdx) in form.platforms"
                   :key="section.platform"
-            class="rounded-lg border border-gray-200 bg-white dark:border-dark-600 dark:bg-dark-800"
+                  @click="activeTab = section.platform"
-          >
+                  class="flex cursor-pointer items-center justify-between rounded-lg border border-gray-200 px-3 py-2 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
-            <!-- Platform Header -->
-            <div
-              class="flex cursor-pointer select-none items-center justify-between rounded-t-lg border-b border-gray-100 px-3 py-2 dark:border-dark-700"
-              :class="section.collapsed ? 'rounded-b-lg border-b-0' : ''"
-              @click="section.collapsed = !section.collapsed"
                 >
                   <div class="flex items-center gap-2">
-                <Icon
-                  :name="section.collapsed ? 'chevronRight' : 'chevronDown'"
-                  size="sm"
-                  class="text-gray-400"
-                />
                     <PlatformIcon :platform="section.platform" size="xs" :class="getPlatformTextColor(section.platform)" />
-                <span :class="['text-sm font-semibold', getPlatformTextColor(section.platform)]">
+                    <span :class="['text-sm font-medium', getPlatformTextColor(section.platform)]">
                       {{ t('admin.groups.platforms.' + section.platform, section.platform) }}
                     </span>
-                <!-- Summary badges -->
                     <span class="text-xs text-gray-400">
                       {{ section.group_ids.length }} {{ t('admin.channels.groupsUnit', 'groups') }}
                     </span>
@@ -274,9 +298,17 @@
                     <Icon name="trash" size="sm" />
                   </button>
                 </div>
+              </div>
+            </div>
+          </div>
 
-            <!-- Platform Content -->
+          <!-- Platform Tab Content -->
-            <div v-show="!section.collapsed" class="space-y-4 p-3">
+          <div
+            v-for="(section, sIdx) in form.platforms"
+            :key="'tab-' + section.platform"
+            v-show="activeTab === section.platform"
+            class="space-y-4"
+          >
             <!-- Groups -->
             <div>
               <label class="input-label text-xs">
@@ -394,9 +426,8 @@
               </div>
             </div>
           </div>
-          </div>
-        </div>
         </form>
+      </div>
 
       <template #footer>
         <div class="flex justify-end gap-3">
@@ -514,6 +545,7 @@ const submitting = ref(false)
 const showDeleteDialog = ref(false)
 const deletingChannel = ref<Channel | null>(null)
 const showPlatformMenu = ref(false)
+const activeTab = ref<string>('basic')
 
 // Groups
 const allGroups = ref<AdminGroup[]>([])
@@ -578,10 +610,15 @@ function addPlatformSection(platform: GroupPlatform) {
     model_pricing: []
   })
   showPlatformMenu.value = false
+  activeTab.value = platform
 }
 
 function removePlatformSection(idx: number) {
+  const removed = form.platforms[idx]
   form.platforms.splice(idx, 1)
+  if (activeTab.value === removed.platform) {
+    activeTab.value = 'basic'
+  }
 }
 
 function getGroupsForPlatform(platform: GroupPlatform): AdminGroup[] {
@@ -837,6 +874,7 @@ function resetForm() {
   form.billing_model_source = 'requested'
   form.platforms = []
   showPlatformMenu.value = false
+  activeTab.value = 'basic'
 }
 
 async function openCreateDialog() {
@@ -955,3 +993,24 @@ onUnmounted(() => {
   abortController?.abort()
 })
 </script>
+
+<style scoped>
+.channel-dialog-body {
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  min-height: 400px;
+}
+
+.channel-tab {
+  @apply flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap;
+}
+
+.channel-tab-active {
+  @apply border-primary-600 text-primary-600 dark:border-primary-400 dark:text-primary-400;
+}
+
+.channel-tab-inactive {
+  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300;
+}
+</style>