xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 号池管理交互优化，移动端兼容

Browse Source
This commit is contained in:
Gsh
2026-01-20 00:38:37 +08:00
parent d280cc6d35
commit f2c2c60127
1 changed files with 253 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
Yi.Ai.Vue3/src/pages/console/channel/index.vue
View File

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