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 { 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>