From f2c2c60127dad3d842d96a055eef3ffabe3ab8fd Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Tue, 20 Jan 2026 00:38:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8F=B7=E6=B1=A0=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96=EF=BC=8C=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/console/channel/index.vue       | 350 +++++++++++++-----
 1 file changed, 253 insertions(+), 97 deletions(-)

diff --git a/Yi.Ai.Vue3/src/pages/console/channel/index.vue b/Yi.Ai.Vue3/src/pages/console/channel/index.vue
index 1580bd86..ddea45b9 100644
--- a/Yi.Ai.Vue3/src/pages/console/channel/index.vue
+++ b/Yi.Ai.Vue3/src/pages/console/channel/index.vue
@@ -2,7 +2,7 @@
 import type { AiAppDto, AiModelDto, AppShortcutDto } from '@/api/channel/types';
 import { Delete, Edit, Plus, Refresh, View } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import {
   clearPremiumModelCache,
   createApp,
@@ -16,6 +16,12 @@ import {
   updateModel,
 } from '@/api/channel';
 
+// 移动端检测
+const isMobile = ref(false);
+function checkMobile() {
+  isMobile.value = window.innerWidth < 768;
+}
+
 // ==================== 应用管理 ====================
 const appList = ref<AiAppDto[]>([]);
 const appLoading = ref(false);
@@ -151,7 +157,7 @@ async function handleBatchApply() {
 
   try {
     // 批量更新应用（只更新终结点和API Key，不修改应用名称）
-    const promises = selectedAppIds.value.map(appId => {
+    const promises = selectedAppIds.value.map((appId) => {
       // 获取当前应用信息，保留原有名称和排序
       const currentApp = appList.value.find(a => a.id === appId);
       return updateApp({
@@ -185,7 +191,8 @@ function toggleAppSelection(appId: string) {
   const index = selectedAppIds.value.indexOf(appId);
   if (index > -1) {
     selectedAppIds.value.splice(index, 1);
-  } else {
+  }
+  else {
     selectedAppIds.value.push(appId);
   }
 }
@@ -352,14 +359,20 @@ async function handleClearCache() {
 
 // 初始化
 onMounted(() => {
+  checkMobile();
+  window.addEventListener('resize', checkMobile);
   fetchAppList();
   fetchShortcutList();
 });
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile);
+});
 </script>
 
 <template>
   <div class="channel-management">
-    <div class="channel-container">
+    <div class="channel-container" :class="{ 'mobile-view': isMobile }">
       <!-- 左侧应用列表 -->
       <div class="app-list-panel">
         <div class="panel-header">
@@ -371,14 +384,19 @@ onMounted(() => {
               size="small"
               @click="openBatchApplyDialog"
             >
-              批量应用号池 ({{ selectedAppIds.length }})
+              <span v-if="!isMobile">批量应用号池</span>
+              <span v-else>批量</span>
+              <template v-if="!isMobile">
+                ({{ selectedAppIds.length }})
+              </template>
             </el-button>
             <el-button
               type="info"
               size="small"
               @click="poolListDialogVisible = true"
             >
-              查看号池列表
+              <span v-if="!isMobile">查看号池列表</span>
+              <span v-else>号池</span>
             </el-button>
             <el-button type="primary" size="small" :icon="Plus" @click="openAppDialog('create')">
               新建
@@ -408,28 +426,28 @@ onMounted(() => {
                     link
                     type="primary"
                     size="small"
-                    :icon="View"
+                    :icon="isMobile ? undefined : View"
                     @click.stop="handleViewAppDetail(app)"
                   >
-                    详情
+                    {{ isMobile ? '详情' : '' }}
                   </el-button>
                   <el-button
                     link
                     type="primary"
                     size="small"
-                    :icon="Edit"
+                    :icon="isMobile ? undefined : Edit"
                     @click.stop="openAppDialog('edit', app)"
                   >
-                    编辑
+                    {{ isMobile ? '编辑' : '' }}
                   </el-button>
                   <el-button
                     link
                     type="danger"
                     size="small"
-                    :icon="Delete"
+                    :icon="isMobile ? undefined : Delete"
                     @click.stop="handleDeleteApp(app)"
                   >
-                    删除
+                    {{ isMobile ? '删除' : '' }}
                   </el-button>
                 </div>
               </div>
@@ -447,73 +465,73 @@ onMounted(() => {
           <div class="header-actions">
             <el-input
               v-model="modelSearchKey"
-              placeholder="搜索模型"
-              style="width: 200px; margin-right: 10px"
+              :placeholder="isMobile ? '搜索' : '搜索模型'"
+              :style="isMobile ? 'width: 120px; margin-right: 8px' : 'width: 200px; margin-right: 10px'"
               clearable
               @keyup.enter="fetchModelList"
             />
             <el-button type="warning" size="small" @click="handleClearCache">
-              清理缓存
+              {{ isMobile ? '' : '清理缓存' }}
             </el-button>
             <el-button type="primary" size="small" :icon="Plus" @click="openModelDialog('create')">
-              新建
+              {{ isMobile ? '' : '新建' }}
             </el-button>
             <el-button size="small" :icon="Refresh" @click="fetchModelList">
-              刷新
+              {{ isMobile ? '' : '刷新' }}
             </el-button>
           </div>
         </div>
 
         <div v-if="!selectedAppId" class="empty-tip">
-          <el-empty description="请先选择左侧的应用" />
+          <el-empty :description="isMobile ? '请选择应用' : '请先选择左侧的应用'" />
         </div>
 
-        <el-table
-          v-else
-          v-loading="modelLoading"
-          :data="modelList"
-          border
-          stripe
-          height="calc(100vh - 220px)"
-        >
-          <el-table-column prop="name" label="模型名称" min-width="150" />
-          <el-table-column prop="modelId" label="模型ID" min-width="200" show-overflow-tooltip />
-          <el-table-column prop="handlerName" label="处理名" min-width="120" />
-          <el-table-column prop="providerName" label="供应商" width="100" />
-          <el-table-column label="是否尊享" width="100">
-            <template #default="{ row }">
-              <el-tag :type="row.isPremium ? 'warning' : 'info'">
-                {{ row.isPremium ? '尊享' : '普通' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="是否启用" width="100">
-            <template #default="{ row }">
-              <el-tag :type="row.isEnabled ? 'success' : 'danger'">
-                {{ row.isEnabled ? '启用' : '禁用' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="multiplier" label="模型倍率" width="100" />
-          <el-table-column prop="multiplierShow" label="显示倍率" width="100" />
-          <el-table-column prop="orderNum" label="排序" width="80" />
-          <el-table-column label="操作" width="150" fixed="right">
-            <template #default="{ row }">
-              <el-button link type="primary" :icon="Edit" @click="openModelDialog('edit', row)">
-                编辑
-              </el-button>
-              <el-button link type="danger" :icon="Delete" @click="handleDeleteModel(row)">
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+        <div v-else class="table-wrapper">
+          <el-table
+            v-loading="modelLoading"
+            :data="modelList"
+            border
+            stripe
+            :height="isMobile ? 'calc(100vh - 300px)' : 'calc(100vh - 220px)'"
+          >
+            <el-table-column prop="name" :label="isMobile ? '名称' : '模型名称'" min-width="120" />
+            <el-table-column v-if="!isMobile" prop="modelId" label="模型ID" min-width="180" show-overflow-tooltip />
+            <el-table-column v-if="!isMobile" prop="handlerName" label="处理名" min-width="100" />
+            <el-table-column v-if="!isMobile" prop="providerName" label="供应商" width="90" />
+            <el-table-column :label="isMobile ? '尊享' : '是否尊享'" width="80">
+              <template #default="{ row }">
+                <el-tag :type="row.isPremium ? 'warning' : 'info'" size="small">
+                  {{ row.isPremium ? '是' : '否' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="isMobile ? '状态' : '是否启用'" width="80">
+              <template #default="{ row }">
+                <el-tag :type="row.isEnabled ? 'success' : 'danger'" size="small">
+                  {{ row.isEnabled ? '启用' : '禁用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!isMobile" prop="multiplier" label="倍率" width="80" />
+            <el-table-column v-if="!isMobile" prop="orderNum" label="排序" width="70" />
+            <el-table-column label="操作" :width="isMobile ? 120 : 150" fixed="right">
+              <template #default="{ row }">
+                <el-button link type="primary" size="small" @click="openModelDialog('edit', row)">
+                  {{ isMobile ? '' : '编辑' }}
+                </el-button>
+                <el-button link type="danger" size="small" @click="handleDeleteModel(row)">
+                  {{ isMobile ? '' : '删除' }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
       </div>
     </div>
 
     <!-- 应用详情对话框 -->
-    <el-dialog v-model="appDetailDialogVisible" title="应用详情" width="600px">
-      <el-descriptions v-if="appDetailData" :column="1" border>
+    <el-dialog v-model="appDetailDialogVisible" title="应用详情" :width="isMobile ? '90%' : '600px'">
+      <el-descriptions v-if="appDetailData" :column="isMobile ? 1 : 1" border>
         <el-descriptions-item label="应用名称">
           {{ appDetailData.name }}
         </el-descriptions-item>
@@ -536,8 +554,8 @@ onMounted(() => {
     </el-dialog>
 
     <!-- 应用编辑对话框 -->
-    <el-dialog v-model="appDialogVisible" :title="appDialogTitle" width="650px">
-      <el-form :model="appForm" label-width="120px">
+    <el-dialog v-model="appDialogVisible" :title="appDialogTitle" :width="isMobile ? '90%' : '650px'">
+      <el-form :model="appForm" :label-width="isMobile ? '80px' : '120px'">
         <el-form-item label="选择号池">
           <el-select
             v-model="selectedShortcutId"
@@ -590,14 +608,14 @@ onMounted(() => {
     </el-dialog>
 
     <!-- 批量应用号池对话框 -->
-    <el-dialog v-model="batchApplyDialogVisible" title="批量应用号池" width="700px">
+    <el-dialog v-model="batchApplyDialogVisible" title="批量应用号池" :width="isMobile ? '90%' : '700px'">
       <el-alert
         :title="`已选择 ${selectedAppIds.length} 个应用，将统一应用以下号池配置`"
         type="info"
         :closable="false"
         style="margin-bottom: 15px"
       />
-      <el-form label-width="100px">
+      <el-form :label-width="isMobile ? '80px' : '100px'">
         <el-form-item label="选中的应用">
           <div style="max-height: 100px; overflow-y: auto">
             <el-tag
@@ -635,8 +653,12 @@ onMounted(() => {
             style="background: #f5f7fa; padding: 15px; border-radius: 4px"
           >
             <div><strong>名称：</strong>{{ shortcutList.find(s => s.id === batchApplyShortcutId)?.name }}</div>
-            <div style="margin-top: 8px"><strong>终结点：</strong>{{ shortcutList.find(s => s.id === batchApplyShortcutId)?.endpoint }}</div>
-            <div style="margin-top: 8px"><strong>API Key：</strong>{{ shortcutList.find(s => s.id === batchApplyShortcutId)?.apiKey?.substring(0, 20) }}***</div>
+            <div style="margin-top: 8px">
+              <strong>终结点：</strong>{{ shortcutList.find(s => s.id === batchApplyShortcutId)?.endpoint }}
+            </div>
+            <div style="margin-top: 8px">
+              <strong>API Key：</strong>{{ shortcutList.find(s => s.id === batchApplyShortcutId)?.apiKey?.substring(0, 20) }}***
+            </div>
           </div>
         </el-form-item>
       </el-form>
@@ -651,23 +673,25 @@ onMounted(() => {
     </el-dialog>
 
     <!-- 号池列表对话框 -->
-    <el-dialog v-model="poolListDialogVisible" title="号池列表" width="900px">
-      <el-table :data="shortcutList" border stripe max-height="500px">
-        <el-table-column prop="name" label="号池名称" min-width="180" />
-        <el-table-column prop="endpoint" label="终结点" min-width="250" show-overflow-tooltip />
-        <el-table-column prop="extraUrl" label="额外URL" min-width="150" show-overflow-tooltip>
-          <template #default="{ row }">
-            {{ row.extraUrl || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="apiKey" label="API Key" min-width="200" show-overflow-tooltip>
-          <template #default="{ row }">
-            {{ row.apiKey?.substring(0, 30) }}{{ row.apiKey?.length > 30 ? '...' : '' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="orderNum" label="排序" width="80" />
-        <el-table-column prop="creationTime" label="创建时间" width="160" />
-      </el-table>
+    <el-dialog v-model="poolListDialogVisible" title="号池列表" :width="isMobile ? '95%' : '900px'">
+      <div class="pool-table-wrapper">
+        <el-table :data="shortcutList" border stripe>
+          <el-table-column prop="name" label="号池名称" :min-width="isMobile ? 120 : 180" />
+          <el-table-column prop="endpoint" label="终结点" :min-width="isMobile ? 180 : 250" show-overflow-tooltip />
+          <el-table-column v-if="!isMobile" prop="extraUrl" label="额外URL" min-width="150" show-overflow-tooltip>
+            <template #default="{ row }">
+              {{ row.extraUrl || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="apiKey" label="API Key" :min-width="isMobile ? 150 : 200" show-overflow-tooltip>
+            <template #default="{ row }">
+              {{ row.apiKey?.substring(0, isMobile ? 15 : 30) }}{{ row.apiKey?.length > (isMobile ? 15 : 30) ? '...' : '' }}
+            </template>
+          </el-table-column>
+          <el-table-column v-if="!isMobile" prop="orderNum" label="排序" width="80" />
+          <el-table-column v-if="!isMobile" prop="creationTime" label="创建时间" width="160" />
+        </el-table>
+      </div>
       <template #footer>
         <el-button type="primary" @click="poolListDialogVisible = false">
           关闭
@@ -676,8 +700,8 @@ onMounted(() => {
     </el-dialog>
 
     <!-- 模型编辑对话框 -->
-    <el-dialog v-model="modelDialogVisible" :title="modelDialogTitle" width="700px">
-      <el-form :model="modelForm" label-width="120px">
+    <el-dialog v-model="modelDialogVisible" :title="modelDialogTitle" :width="isMobile ? '90%' : '700px'">
+      <el-form :model="modelForm" :label-width="isMobile ? '80px' : '120px'">
         <el-form-item label="模型名称" required>
           <el-input v-model="modelForm.name" placeholder="请输入模型名称" />
         </el-form-item>
@@ -742,92 +766,131 @@ onMounted(() => {
 <style scoped lang="scss">
 .channel-management {
   height: 100vh;
+  padding: 16px;
+  box-sizing: border-box;
+  background: #f5f7fa;
 
   .channel-container {
     display: flex;
-    gap: 20px;
+    gap: 16px;
     height: 100%;
+    overflow: hidden;
+
+    &.mobile-view {
+      flex-direction: column;
+      overflow-y: auto;
+    }
   }
 
   .app-list-panel {
-    width: 350px;
     background: #fff;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     display: flex;
     flex-direction: column;
+    min-width: 280px;
+    flex-shrink: 0;
+
+    .channel-container.mobile-view & {
+      width: 100%;
+      max-height: 50%;
+    }
   }
 
   .model-list-panel {
     flex: 1;
     background: #fff;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     display: flex;
     flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+
+    .channel-container.mobile-view & {
+      flex: none;
+      height: 50%;
+    }
   }
 
   .panel-header {
-    padding: 16px 20px;
+    padding: 16px;
     border-bottom: 1px solid #eee;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-shrink: 0;
+    gap: 12px;
 
     h3 {
       margin: 0;
       font-size: 16px;
       font-weight: 600;
+      color: #303133;
+      white-space: nowrap;
     }
 
     .header-actions {
       display: flex;
-      gap: 10px;
+      gap: 8px;
+      flex-wrap: wrap;
     }
   }
 
   .app-list-scrollbar {
     flex: 1;
     height: 0;
+    overflow: hidden;
+
+    :deep(.el-scrollbar__wrap) {
+      overflow-x: hidden;
+    }
   }
 
   .app-list {
-    padding: 10px;
+    padding: 12px;
   }
 
   .app-item {
-    padding: 12px 16px;
+    padding: 12px;
     margin-bottom: 8px;
     border: 1px solid #e4e7ed;
-    border-radius: 6px;
+    border-radius: 8px;
     cursor: pointer;
-    transition: all 0.3s;
+    transition: all 0.25s ease;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 10px;
 
     &:hover {
       border-color: #409eff;
       background: #f0f9ff;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
     }
 
     &.active {
       border-color: #409eff;
       background: #ecf5ff;
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
     }
 
     .app-item-content {
       flex: 1;
+      min-width: 0;
+
       .app-name {
         font-size: 14px;
         font-weight: 500;
         margin-bottom: 8px;
         color: #303133;
+        word-break: break-word;
       }
 
       .app-actions {
         display: flex;
-        gap: 8px;
+        gap: 4px;
+        flex-wrap: wrap;
       }
     }
   }
@@ -838,5 +901,98 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
   }
+
+  .table-wrapper {
+    flex: 1;
+    overflow: hidden;
+    padding: 16px;
+  }
+
+  .pool-table-wrapper {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+  .channel-management {
+    padding: 8px;
+
+    .channel-container {
+      gap: 8px;
+    }
+
+    .panel-header {
+      padding: 12px;
+      flex-wrap: wrap;
+
+      h3 {
+        font-size: 14px;
+      }
+
+      .header-actions {
+        gap: 6px;
+
+        .el-button {
+          padding: 6px 10px;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .app-list {
+      padding: 8px;
+    }
+
+    .app-item {
+      padding: 10px;
+      margin-bottom: 6px;
+
+      .app-item-content {
+        .app-name {
+          font-size: 13px;
+          margin-bottom: 6px;
+        }
+
+        .app-actions {
+          .el-button {
+            padding: 4px 6px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+
+    .table-wrapper {
+      padding: 8px;
+    }
+  }
+}
+
+// 小屏幕优化
+@media (max-width: 480px) {
+  .channel-management {
+    .channel-container {
+      gap: 6px;
+    }
+
+    .app-list-panel,
+    .model-list-panel {
+      border-radius: 6px;
+    }
+
+    .panel-header {
+      padding: 10px;
+    }
+
+    .app-list {
+      padding: 6px;
+    }
+
+    .app-item {
+      padding: 8px;
+    }
+  }
 }
 </style>