Junhua Don
1084 lines
36 KiB
Vue
1084 lines
36 KiB
Vue
<template>
|
|
<div class="session-management-page">
|
|
<v-container fluid class="pa-0">
|
|
<v-row class="d-flex justify-space-between align-center px-4 py-3 pb-8">
|
|
<div>
|
|
<h1 class="text-h1 font-weight-bold mb-2" style="display: flex; align-items: center;">
|
|
<v-icon color="black" class="me-2">mdi-account-group</v-icon>{{ tm('title') }}
|
|
</h1>
|
|
<p class="text-subtitle-1 text-medium-emphasis mb-4">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
<v-btn
|
|
color="primary"
|
|
prepend-icon="mdi-refresh"
|
|
variant="tonal"
|
|
@click="refreshSessions"
|
|
:loading="loading"
|
|
rounded="xl"
|
|
size="x-large"
|
|
>
|
|
{{ tm('buttons.refresh') }}
|
|
</v-btn>
|
|
</v-row>
|
|
|
|
<v-card elevation="0" rounded="12" class="session-card">
|
|
<v-card-title class="bg-primary text-white py-3 px-4 session-card-title">
|
|
<v-icon color="white" class="me-2">mdi-account-group</v-icon>
|
|
<span class="text-h4 mr-4">{{ tm('sessions.activeSessions') }}</span>
|
|
<v-chip color="white" text-color="primary" small>
|
|
{{ sessions.length }} {{ tm('sessions.sessionCount') }}
|
|
</v-chip>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="pa-0">
|
|
<!-- 搜索栏 -->
|
|
<v-toolbar flat class="px-4">
|
|
<v-text-field
|
|
v-model="searchQuery"
|
|
prepend-inner-icon="mdi-magnify"
|
|
:label="tm('search.placeholder')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
class="me-4"
|
|
density="compact"
|
|
></v-text-field>
|
|
|
|
<v-select
|
|
v-model="filterPlatform"
|
|
:items="platformOptions"
|
|
:label="tm('search.platformFilter')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
class="me-4"
|
|
style="max-width: 150px;"
|
|
density="compact"
|
|
></v-select>
|
|
</v-toolbar>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<!-- 会话列表 -->
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="filteredSessions"
|
|
:loading="loading"
|
|
:items-per-page="itemsPerPage"
|
|
class="elevation-0"
|
|
>
|
|
<!-- 会话信息 -->
|
|
<template v-slot:item.session_info="{ item }">
|
|
<div class="py-2">
|
|
<div class="d-flex align-center">
|
|
<div class="flex-grow-1">
|
|
<div class="font-weight-medium d-flex align-center">
|
|
<v-tooltip
|
|
location="top"
|
|
>
|
|
<template v-slot:activator="{ props: tooltipProps }">
|
|
<span v-bind="tooltipProps">{{ item.session_name }}</span>
|
|
</template>
|
|
使用 /sid 指令可查看会话 ID。
|
|
</v-tooltip>
|
|
|
|
<v-tooltip
|
|
v-if="item.session_name !== item.session_raw_name"
|
|
activator="parent"
|
|
location="top"
|
|
>
|
|
<span class="text-caption">实际UMO: {{ item.session_raw_name }}</span>
|
|
</v-tooltip>
|
|
<v-icon
|
|
v-if="item.session_name !== item.session_raw_name"
|
|
size="12"
|
|
color="warning"
|
|
class="ml-1"
|
|
>
|
|
mdi-information-outline
|
|
</v-icon>
|
|
</div>
|
|
<div class="text-caption text-grey-600">
|
|
<v-chip
|
|
:color="getPlatformColor(item.platform)"
|
|
size="x-small"
|
|
class="me-1"
|
|
>
|
|
{{ item.platform }}
|
|
</v-chip>
|
|
{{ item.message_type }}
|
|
</div>
|
|
</div>
|
|
<v-btn
|
|
icon
|
|
size="small"
|
|
variant="text"
|
|
color="primary"
|
|
@click="openNameEditor(item)"
|
|
:loading="item.updating"
|
|
>
|
|
<v-icon size="16">mdi-pencil</v-icon>
|
|
<v-tooltip activator="parent" location="top">
|
|
{{ tm('buttons.editName') }}
|
|
</v-tooltip>
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 人格 -->
|
|
<template v-slot:item.persona="{ item }">
|
|
<v-select
|
|
:model-value="item.persona_id || ''"
|
|
:items="personaOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
hide-details
|
|
density="compact"
|
|
variant="outlined"
|
|
@update:model-value="(value) => updatePersona(item, value)"
|
|
:loading="item.updating"
|
|
:disabled="!item.session_enabled"
|
|
>
|
|
<template v-slot:selection="{ item: selection }">
|
|
<v-chip
|
|
size="small"
|
|
:color="selection.raw.value === '[%None]' ? 'grey' : 'primary'"
|
|
>
|
|
{{ selection.raw.label }}
|
|
</v-chip>
|
|
</template>
|
|
</v-select>
|
|
</template>
|
|
|
|
<!-- Chat Provider -->
|
|
<template v-slot:item.chat_provider="{ item }">
|
|
<v-select
|
|
:model-value="item.chat_provider_id || ''"
|
|
:items="chatProviderOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
hide-details
|
|
density="compact"
|
|
variant="outlined"
|
|
@update:model-value="(value) => updateProvider(item, value, 'chat_completion')"
|
|
:loading="item.updating"
|
|
:disabled="!item.session_enabled"
|
|
>
|
|
<template v-slot:selection="{ item: selection }">
|
|
<v-chip size="small" color="success">
|
|
{{ selection.raw.label }}
|
|
</v-chip>
|
|
</template>
|
|
</v-select>
|
|
</template>
|
|
|
|
<!-- STT Provider -->
|
|
<template v-slot:item.stt_provider="{ item }">
|
|
<v-select
|
|
:model-value="item.stt_provider_id || ''"
|
|
:items="sttProviderOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
hide-details
|
|
density="compact"
|
|
variant="outlined"
|
|
@update:model-value="(value) => updateProvider(item, value, 'speech_to_text')"
|
|
:loading="item.updating"
|
|
:disabled="sttProviderOptions.length === 0 || !item.session_enabled"
|
|
>
|
|
<template v-slot:selection="{ item: selection }">
|
|
<v-chip size="small" color="info">
|
|
{{ selection.raw.label }}
|
|
</v-chip>
|
|
</template>
|
|
</v-select>
|
|
</template>
|
|
|
|
<!-- TTS Provider -->
|
|
<template v-slot:item.tts_provider="{ item }">
|
|
<v-select
|
|
:model-value="item.tts_provider_id || ''"
|
|
:items="ttsProviderOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
hide-details
|
|
density="compact"
|
|
variant="outlined"
|
|
@update:model-value="(value) => updateProvider(item, value, 'text_to_speech')"
|
|
:loading="item.updating"
|
|
:disabled="ttsProviderOptions.length === 0 || !item.session_enabled"
|
|
>
|
|
<template v-slot:selection="{ item: selection }">
|
|
<v-chip size="small" color="warning">
|
|
{{ selection.raw.label }}
|
|
</v-chip>
|
|
</template>
|
|
</v-select> </template>
|
|
|
|
<!-- 会话启停 -->
|
|
<template v-slot:item.session_enabled="{ item }">
|
|
<v-switch
|
|
:model-value="item.session_enabled"
|
|
@update:model-value="(value) => updateSessionStatus(item, value)"
|
|
:loading="item.updating"
|
|
hide-details
|
|
density="compact"
|
|
color="success"
|
|
inset
|
|
>
|
|
</v-switch>
|
|
</template>
|
|
|
|
<!-- LLM启停 -->
|
|
<template v-slot:item.llm_enabled="{ item }">
|
|
<v-switch
|
|
:model-value="item.llm_enabled"
|
|
@update:model-value="(value) => updateLLM(item, value)"
|
|
:loading="item.updating"
|
|
:disabled="!item.session_enabled"
|
|
hide-details
|
|
density="compact"
|
|
color="primary"
|
|
inset
|
|
>
|
|
</v-switch>
|
|
</template>
|
|
|
|
<!-- TTS启停 -->
|
|
<template v-slot:item.tts_enabled="{ item }">
|
|
<v-switch
|
|
:model-value="item.tts_enabled"
|
|
@update:model-value="(value) => updateTTS(item, value)"
|
|
:loading="item.updating"
|
|
:disabled="!item.session_enabled"
|
|
hide-details
|
|
density="compact"
|
|
color="secondary"
|
|
inset
|
|
>
|
|
</v-switch>
|
|
</template>
|
|
|
|
<!-- 插件管理 -->
|
|
<template v-slot:item.plugins="{ item }">
|
|
<v-btn
|
|
size="small"
|
|
variant="outlined"
|
|
color="primary"
|
|
@click="openPluginManager(item)"
|
|
:loading="item.loadingPlugins"
|
|
:disabled="!item.session_enabled"
|
|
>
|
|
{{ tm('buttons.edit') }}
|
|
</v-btn>
|
|
</template>
|
|
|
|
<!-- 空状态 -->
|
|
<template v-slot:no-data>
|
|
<div class="text-center py-8">
|
|
<v-icon size="64" color="grey-400">mdi-account-group-outline</v-icon>
|
|
<div class="text-h6 mt-4 text-grey-600">{{ tm('sessions.noActiveSessions') }}</div>
|
|
<div class="text-body-2 text-grey-500">{{ tm('sessions.noActiveSessionsDesc') }}</div>
|
|
</div>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- 批量操作面板 -->
|
|
<v-card elevation="0" class="mt-4 batch-operations-card" rounded="12">
|
|
<v-card-title class="bg-secondary text-white py-3 px-4">
|
|
<v-icon color="white" class="me-2">mdi-cog-outline</v-icon>
|
|
<span class="text-h4">{{ tm('batchOperations.title') }}</span>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<div style="padding: 16px;">
|
|
<v-row>
|
|
<v-col cols="12" md="6" lg="3" v-if="availablePersonas.length > 0">
|
|
<v-select
|
|
v-model="batchPersona"
|
|
:items="personaOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
:label="tm('batchOperations.setPersona')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="batch-select"
|
|
></v-select>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6" lg="3" v-if="availableChatProviders.length > 0">
|
|
<v-select
|
|
v-model="batchChatProvider"
|
|
:items="chatProviderOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
:label="tm('batchOperations.setChatProvider')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="batch-select"
|
|
></v-select>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6" lg="3">
|
|
<v-select
|
|
v-model="batchSttProvider"
|
|
:items="sttProviderOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
:label="tm('batchOperations.setSttProvider')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="batch-select"
|
|
:disabled="availableSttProviders.length === 0"
|
|
:placeholder="availableSttProviders.length === 0 ? tm('batchOperations.noSttProvider') : ''"
|
|
></v-select>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6" lg="3">
|
|
<v-select
|
|
v-model="batchTtsProvider"
|
|
:items="ttsProviderOptions"
|
|
item-title="label"
|
|
item-value="value"
|
|
:label="tm('batchOperations.setTtsProvider')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="batch-select"
|
|
:disabled="availableTtsProviders.length === 0"
|
|
:placeholder="availableTtsProviders.length === 0 ? tm('batchOperations.noTtsProvider') : ''"
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" md="6" lg="3">
|
|
<v-select
|
|
v-model="batchLlmStatus"
|
|
:items="[{label: tm('status.enabled'), value: true}, {label: tm('status.disabled'), value: false}]"
|
|
item-title="label"
|
|
item-value="value"
|
|
:label="tm('batchOperations.setLlmStatus')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="batch-select"
|
|
></v-select>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6" lg="3">
|
|
<v-select
|
|
v-model="batchTtsStatus"
|
|
:items="[{label: tm('status.enabled'), value: true}, {label: tm('status.disabled'), value: false}]"
|
|
item-title="label"
|
|
item-value="value"
|
|
:label="tm('batchOperations.setTtsStatus')"
|
|
hide-details
|
|
clearable
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="batch-select"
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<div class="d-flex justify-end align-center mt-8">
|
|
<v-btn
|
|
color="primary"
|
|
variant="tonal"
|
|
size="large"
|
|
rounded="lg"
|
|
@click="applyBatchChanges"
|
|
:disabled="!batchPersona && !batchChatProvider && !batchSttProvider && !batchTtsProvider && batchLlmStatus === null && batchTtsStatus === null"
|
|
:loading="batchUpdating"
|
|
class="me-3"
|
|
>
|
|
<v-icon start>mdi-check-all</v-icon>
|
|
{{ tm('buttons.apply') }}
|
|
</v-btn>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- 插件管理对话框 -->
|
|
<v-dialog v-model="pluginDialog" max-width="800" min-height="80%">
|
|
<v-card v-if="selectedSessionForPlugin">
|
|
<v-card-title class="bg-primary text-white py-3 px-4" style="display: flex; align-items: center;">
|
|
<v-icon color="white" class="me-2">mdi-puzzle</v-icon>
|
|
<span>{{ tm('pluginManagement.title') }} - {{ selectedSessionForPlugin.session_name }}</span>
|
|
<v-spacer></v-spacer>
|
|
<v-btn icon variant="text" color="white" @click="pluginDialog = false">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-card-text v-if="!loadingPlugins">
|
|
<div style="padding-left: 16px; padding-right: 16px;">
|
|
<div v-if="sessionPlugins.length === 0" class="text-center py-8">
|
|
<v-icon size="64" color="grey-400">mdi-puzzle-outline</v-icon>
|
|
<div class="text-h6 mt-4 text-grey-600">{{ tm('pluginManagement.noPlugins') }}</div>
|
|
<div class="text-body-2 text-grey-500">{{ tm('pluginManagement.noPluginsDesc') }}</div>
|
|
</div>
|
|
|
|
<v-list v-else>
|
|
<v-list-item
|
|
v-for="plugin in sessionPlugins"
|
|
:key="plugin.name"
|
|
class="px-0"
|
|
>
|
|
<template v-slot:prepend>
|
|
<v-icon :color="plugin.enabled ? 'success' : 'grey'">
|
|
{{ plugin.enabled ? 'mdi-check-circle' : 'mdi-circle-outline' }}
|
|
</v-icon>
|
|
</template>
|
|
|
|
<v-list-item-title class="font-weight-medium">
|
|
{{ plugin.name }}
|
|
</v-list-item-title>
|
|
|
|
<v-list-item-subtitle>
|
|
{{ tm('pluginManagement.author') }}: {{ plugin.author }}
|
|
</v-list-item-subtitle>
|
|
|
|
<template v-slot:append>
|
|
<v-switch
|
|
:model-value="plugin.enabled"
|
|
hide-details
|
|
color="primary"
|
|
@update:model-value="(value) => togglePlugin(plugin, value)"
|
|
:loading="plugin.updating"
|
|
></v-switch>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
|
|
</v-card-text>
|
|
|
|
<v-card-text v-else class="text-center py-8">
|
|
<v-progress-circular indeterminate color="primary" size="48"></v-progress-circular>
|
|
<div class="text-body-1 mt-4">{{ tm('pluginManagement.loading') }}</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- 会话命名编辑对话框 -->
|
|
<v-dialog v-model="nameEditDialog" max-width="500" min-height="60%">
|
|
<v-card v-if="selectedSessionForName">
|
|
<v-card-title class="bg-primary text-white py-3 px-4" style="display: flex; align-items: center;">
|
|
<v-icon color="white" class="me-2">mdi-rename-box</v-icon>
|
|
<span>{{ tm('nameEditor.title') }}</span>
|
|
<v-spacer></v-spacer>
|
|
<v-btn icon variant="text" color="white" @click="nameEditDialog = false">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<div style="padding-left: 16px; padding-right: 16px;">
|
|
<v-text-field
|
|
v-model="newSessionName"
|
|
:label="tm('nameEditor.customName')"
|
|
:placeholder="tm('nameEditor.placeholder')"
|
|
variant="outlined"
|
|
hide-details="auto"
|
|
clearable
|
|
class="mb-4"
|
|
@keyup.enter="saveSessionName"
|
|
></v-text-field>
|
|
|
|
<div class="text-caption text-grey-600 mb-2">
|
|
{{ tm('nameEditor.originalName') }}: {{ selectedSessionForName.session_raw_name }}
|
|
</div>
|
|
|
|
<div class="text-caption text-grey-600 mb-2">
|
|
{{ tm('nameEditor.fullSessionId') }}: {{ selectedSessionForName.session_id }}
|
|
</div>
|
|
|
|
<v-alert
|
|
variant="tonal"
|
|
type="info"
|
|
density="compact"
|
|
class="mb-4"
|
|
>
|
|
{{ tm('nameEditor.hint') }}
|
|
</v-alert>
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="px-4 pb-4">
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
color="grey"
|
|
variant="text"
|
|
@click="nameEditDialog = false"
|
|
:disabled="nameEditLoading"
|
|
>
|
|
{{ tm('buttons.cancel') }}
|
|
</v-btn>
|
|
<v-btn
|
|
color="primary"
|
|
variant="tonal"
|
|
@click="saveSessionName"
|
|
:loading="nameEditLoading"
|
|
>
|
|
{{ tm('buttons.save') }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- 提示信息 -->
|
|
<v-snackbar v-model="snackbar" :timeout="3000" elevation="24" :color="snackbarColor" location="top">
|
|
{{ snackbarText }}
|
|
</v-snackbar>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import { useI18n, useModuleI18n } from '@/i18n/composables'
|
|
|
|
export default {
|
|
name: 'SessionManagementPage',
|
|
setup() {
|
|
const { t } = useI18n()
|
|
const { tm } = useModuleI18n('features/session-management')
|
|
|
|
return {
|
|
t,
|
|
tm
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
sessions: [],
|
|
searchQuery: '',
|
|
filterPlatform: null,
|
|
|
|
// 分页相关
|
|
itemsPerPage: 10,
|
|
|
|
// 可用选项
|
|
availablePersonas: [],
|
|
availableChatProviders: [],
|
|
availableSttProviders: [],
|
|
availableTtsProviders: [],
|
|
|
|
// 批量操作
|
|
batchPersona: null,
|
|
batchChatProvider: null,
|
|
batchSttProvider: null,
|
|
batchTtsProvider: null,
|
|
batchLlmStatus: null,
|
|
batchTtsStatus: null,
|
|
batchUpdating: false,
|
|
|
|
// 插件管理
|
|
pluginDialog: false,
|
|
selectedSessionForPlugin: null,
|
|
sessionPlugins: [],
|
|
loadingPlugins: false,
|
|
|
|
// 会话命名编辑器
|
|
nameEditDialog: false,
|
|
selectedSessionForName: null,
|
|
newSessionName: '',
|
|
nameEditLoading: false,
|
|
|
|
// 提示信息
|
|
snackbar: false,
|
|
snackbarText: '',
|
|
snackbarColor: 'success',
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
// 安全访问翻译的计算属性
|
|
messages() {
|
|
return {
|
|
updateSuccess: this.tm('messages.updateSuccess'),
|
|
addSuccess: this.tm('messages.addSuccess'),
|
|
deleteSuccess: this.tm('messages.deleteSuccess'),
|
|
statusUpdateSuccess: this.tm('messages.statusUpdateSuccess'),
|
|
deleteConfirm: this.tm('messages.deleteConfirm')
|
|
};
|
|
},
|
|
|
|
subtitle() {
|
|
return this.tm('subtitle') || '管理所有活跃的会话，配置人格、LLM提供商和插件';
|
|
},
|
|
|
|
headers() {
|
|
return [
|
|
{ title: this.tm('table.headers.sessionStatus'), key: 'session_enabled', sortable: false, width: '120px' },
|
|
{ title: this.tm('table.headers.sessionInfo'), key: 'session_info', sortable: false, width: '200px' },
|
|
{ title: this.tm('table.headers.persona'), key: 'persona', sortable: false, width: '180px' },
|
|
{ title: this.tm('table.headers.chatProvider'), key: 'chat_provider', sortable: false, width: '180px' },
|
|
{ title: this.tm('table.headers.sttProvider'), key: 'stt_provider', sortable: false, width: '150px' },
|
|
{ title: this.tm('table.headers.ttsProvider'), key: 'tts_provider', sortable: false, width: '150px' },
|
|
{ title: this.tm('table.headers.llmStatus'), key: 'llm_enabled', sortable: false, width: '120px' },
|
|
{ title: this.tm('table.headers.ttsStatus'), key: 'tts_enabled', sortable: false, width: '120px' },
|
|
{ title: this.tm('table.headers.pluginManagement'), key: 'plugins', sortable: false, width: '120px' },
|
|
]
|
|
},
|
|
|
|
// 懒加载过滤会话 - 使用客户端分页
|
|
filteredSessions() {
|
|
let filtered = this.sessions;
|
|
|
|
// 搜索筛选
|
|
if (this.searchQuery) {
|
|
const query = this.searchQuery.toLowerCase();
|
|
filtered = filtered.filter(session =>
|
|
session.session_name.toLowerCase().includes(query) ||
|
|
session.platform.toLowerCase().includes(query) ||
|
|
session.persona_name?.toLowerCase().includes(query) ||
|
|
session.chat_provider_name?.toLowerCase().includes(query)
|
|
);
|
|
}
|
|
|
|
// 平台筛选
|
|
if (this.filterPlatform) {
|
|
filtered = filtered.filter(session => session.platform === this.filterPlatform);
|
|
}
|
|
|
|
return filtered;
|
|
},
|
|
|
|
platformOptions() {
|
|
const platforms = [...new Set(this.sessions.map(s => s.platform))];
|
|
return platforms.map(p => ({ title: p, value: p }));
|
|
},
|
|
|
|
personaOptions() {
|
|
const options = [
|
|
{ label: this.tm('persona.none'), value: '[%None]' },
|
|
...this.availablePersonas.map(p => ({
|
|
label: p.name,
|
|
value: p.name
|
|
}))
|
|
];
|
|
return options;
|
|
},
|
|
|
|
chatProviderOptions() {
|
|
return this.availableChatProviders.map(p => ({
|
|
label: `${p.name} (${p.model})`,
|
|
value: p.id
|
|
}));
|
|
},
|
|
|
|
sttProviderOptions() {
|
|
return this.availableSttProviders.map(p => ({
|
|
label: `${p.name} (${p.model})`,
|
|
value: p.id
|
|
}));
|
|
},
|
|
|
|
ttsProviderOptions() {
|
|
return this.availableTtsProviders.map(p => ({
|
|
label: `${p.name} (${p.model})`,
|
|
value: p.id
|
|
}));
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.loadSessions();
|
|
},
|
|
|
|
methods: {
|
|
async loadSessions() {
|
|
this.loading = true;
|
|
try {
|
|
const response = await axios.get('/api/session/list');
|
|
if (response.data.status === 'ok') {
|
|
const data = response.data.data;
|
|
this.sessions = data.sessions.map(session => ({
|
|
...session,
|
|
updating: false, // 添加更新状态标志
|
|
loadingPlugins: false // 添加插件加载状态标志
|
|
}));
|
|
this.availablePersonas = data.available_personas;
|
|
this.availableChatProviders = data.available_chat_providers;
|
|
this.availableSttProviders = data.available_stt_providers;
|
|
this.availableTtsProviders = data.available_tts_providers;
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.loadSessionsError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.loadSessionsError'));
|
|
}
|
|
this.loading = false;
|
|
},
|
|
|
|
async refreshSessions() {
|
|
await this.loadSessions();
|
|
this.showSuccess(this.tm('messages.refreshSuccess'));
|
|
},
|
|
|
|
async updatePersona(session, personaName) {
|
|
session.updating = true;
|
|
try {
|
|
const response = await axios.post('/api/session/update_persona', {
|
|
session_id: session.session_id,
|
|
persona_name: personaName
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
session.persona_id = personaName;
|
|
session.persona_name = personaName === '[%None]' ? this.tm('persona.none') :
|
|
this.availablePersonas.find(p => p.name === personaName)?.name || personaName;
|
|
this.showSuccess(this.tm('messages.personaUpdateSuccess'));
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.personaUpdateError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.personaUpdateError'));
|
|
}
|
|
session.updating = false;
|
|
},
|
|
|
|
async updateProvider(session, providerId, providerType) {
|
|
session.updating = true;
|
|
try {
|
|
const response = await axios.post('/api/session/update_provider', {
|
|
session_id: session.session_id,
|
|
provider_id: providerId,
|
|
provider_type: providerType
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
// 更新本地数据
|
|
if (providerType === 'chat_completion') {
|
|
session.chat_provider_id = providerId;
|
|
const provider = this.availableChatProviders.find(p => p.id === providerId);
|
|
session.chat_provider_name = provider?.name || providerId;
|
|
} else if (providerType === 'speech_to_text') {
|
|
session.stt_provider_id = providerId;
|
|
const provider = this.availableSttProviders.find(p => p.id === providerId);
|
|
session.stt_provider_name = provider?.name || providerId;
|
|
} else if (providerType === 'text_to_speech') {
|
|
session.tts_provider_id = providerId;
|
|
const provider = this.availableTtsProviders.find(p => p.id === providerId);
|
|
session.tts_provider_name = provider?.name || providerId;
|
|
}
|
|
this.showSuccess(this.tm('messages.providerUpdateSuccess'));
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.providerUpdateError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.providerUpdateError'));
|
|
} session.updating = false;
|
|
},
|
|
|
|
async updateSessionStatus(session, enabled) {
|
|
session.updating = true;
|
|
try {
|
|
const response = await axios.post('/api/session/update_status', {
|
|
session_id: session.session_id,
|
|
session_enabled: enabled
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
session.session_enabled = enabled;
|
|
this.showSuccess(this.tm('messages.sessionStatusSuccess', { status: enabled ? this.tm('status.enabled') : this.tm('status.disabled') }));
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.statusUpdateError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.statusUpdateError'));
|
|
}
|
|
session.updating = false;
|
|
},
|
|
|
|
async updateLLM(session, enabled) {
|
|
session.updating = true;
|
|
try {
|
|
const response = await axios.post('/api/session/update_llm', {
|
|
session_id: session.session_id,
|
|
enabled: enabled
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
session.llm_enabled = enabled;
|
|
this.showSuccess(this.tm('messages.llmStatusSuccess', { status: enabled ? this.tm('status.enabled') : this.tm('status.disabled') }));
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.statusUpdateError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.statusUpdateError'));
|
|
}
|
|
session.updating = false;
|
|
},
|
|
|
|
async updateTTS(session, enabled) {
|
|
session.updating = true;
|
|
try {
|
|
const response = await axios.post('/api/session/update_tts', {
|
|
session_id: session.session_id,
|
|
enabled: enabled
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
session.tts_enabled = enabled;
|
|
this.showSuccess(this.tm('messages.ttsStatusSuccess', { status: enabled ? this.tm('status.enabled') : this.tm('status.disabled') }));
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.statusUpdateError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.statusUpdateError'));
|
|
}
|
|
session.updating = false;
|
|
},
|
|
|
|
async applyBatchChanges() {
|
|
if (!this.batchPersona && !this.batchChatProvider && !this.batchSttProvider && !this.batchTtsProvider && this.batchLlmStatus === null && this.batchTtsStatus === null) {
|
|
return;
|
|
}
|
|
|
|
this.batchUpdating = true;
|
|
let successCount = 0;
|
|
let errorCount = 0;
|
|
|
|
// 使用过滤后的会话数据进行批量操作
|
|
for (const session of this.filteredSessions) {
|
|
try {
|
|
// 批量更新人格
|
|
if (this.batchPersona) {
|
|
await this.updatePersona(session, this.batchPersona);
|
|
successCount++;
|
|
}
|
|
|
|
// 批量更新 Chat Provider
|
|
if (this.batchChatProvider) {
|
|
await this.updateProvider(session, this.batchChatProvider, 'chat_completion');
|
|
successCount++;
|
|
}
|
|
|
|
// 批量更新 STT Provider
|
|
if (this.batchSttProvider) {
|
|
await this.updateProvider(session, this.batchSttProvider, 'speech_to_text');
|
|
successCount++;
|
|
}
|
|
|
|
// 批量更新 TTS Provider
|
|
if (this.batchTtsProvider) {
|
|
await this.updateProvider(session, this.batchTtsProvider, 'text_to_speech');
|
|
successCount++;
|
|
}
|
|
|
|
// 批量更新 LLM 状态
|
|
if (this.batchLlmStatus !== null) {
|
|
await this.updateLLM(session, this.batchLlmStatus);
|
|
successCount++;
|
|
}
|
|
|
|
// 批量更新 TTS 状态
|
|
if (this.batchTtsStatus !== null) {
|
|
await this.updateTTS(session, this.batchTtsStatus);
|
|
successCount++;
|
|
}
|
|
} catch (error) {
|
|
errorCount++;
|
|
}
|
|
}
|
|
|
|
this.batchUpdating = false;
|
|
|
|
if (errorCount === 0) {
|
|
this.showSuccess(this.tm('messages.batchUpdateSuccess', { count: successCount }));
|
|
} else {
|
|
this.showError(this.tm('messages.batchUpdatePartial', { success: successCount, error: errorCount }));
|
|
}
|
|
|
|
// 清空批量设置
|
|
this.batchPersona = null;
|
|
this.batchChatProvider = null;
|
|
this.batchSttProvider = null;
|
|
this.batchTtsProvider = null;
|
|
this.batchLlmStatus = null;
|
|
this.batchTtsStatus = null;
|
|
},
|
|
|
|
async openPluginManager(session) {
|
|
this.selectedSessionForPlugin = session;
|
|
this.pluginDialog = true;
|
|
this.loadingPlugins = true;
|
|
this.sessionPlugins = [];
|
|
|
|
try {
|
|
const response = await axios.get('/api/session/plugins', {
|
|
params: { session_id: session.session_id }
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
this.sessionPlugins = response.data.data.plugins.map(plugin => ({
|
|
...plugin,
|
|
updating: false
|
|
}));
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.loadPluginsError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.loadPluginsError'));
|
|
}
|
|
|
|
this.loadingPlugins = false;
|
|
},
|
|
|
|
async togglePlugin(plugin, enabled) {
|
|
plugin.updating = true;
|
|
|
|
try {
|
|
const response = await axios.post('/api/session/update_plugin', {
|
|
session_id: this.selectedSessionForPlugin.session_id,
|
|
plugin_name: plugin.name,
|
|
enabled: enabled
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
plugin.enabled = enabled;
|
|
this.showSuccess(this.tm('messages.pluginStatusSuccess', {
|
|
name: plugin.name,
|
|
status: enabled ? this.tm('status.enabled') : this.tm('status.disabled')
|
|
}));
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.pluginStatusError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.pluginStatusError'));
|
|
}
|
|
|
|
plugin.updating = false;
|
|
},
|
|
|
|
openNameEditor(session) {
|
|
this.selectedSessionForName = session;
|
|
this.newSessionName = session.session_name === session.session_raw_name ? '' : session.session_name;
|
|
this.nameEditDialog = true;
|
|
},
|
|
|
|
async saveSessionName() {
|
|
if (!this.selectedSessionForName) return;
|
|
|
|
this.nameEditLoading = true;
|
|
try {
|
|
const response = await axios.post('/api/session/update_name', {
|
|
session_id: this.selectedSessionForName.session_id,
|
|
custom_name: this.newSessionName || ''
|
|
});
|
|
|
|
if (response.data.status === 'ok') {
|
|
// 更新本地数据
|
|
this.selectedSessionForName.session_name = response.data.data.display_name;
|
|
this.showSuccess(response.data.data.message || this.tm('messages.nameUpdateSuccess'));
|
|
this.nameEditDialog = false;
|
|
} else {
|
|
this.showError(response.data.message || this.tm('messages.nameUpdateError'));
|
|
}
|
|
} catch (error) {
|
|
this.showError(error.response?.data?.message || this.tm('messages.nameUpdateError'));
|
|
}
|
|
|
|
this.nameEditLoading = false;
|
|
},
|
|
|
|
getPlatformColor(platform) {
|
|
const colors = {
|
|
'aiocqhttp': 'blue',
|
|
'wechatpadpro': 'green',
|
|
'qq_official': 'purple',
|
|
'telegram': 'light-blue',
|
|
'discord': 'indigo',
|
|
'default': 'grey'
|
|
};
|
|
return colors[platform] || colors.default;
|
|
},
|
|
|
|
showSuccess(message) {
|
|
this.snackbarText = message;
|
|
this.snackbarColor = 'success';
|
|
this.snackbar = true;
|
|
},
|
|
|
|
showError(message) {
|
|
this.snackbarText = message;
|
|
this.snackbarColor = 'error';
|
|
this.snackbar = true;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.session-management-page {
|
|
padding: 20px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.v-data-table >>> .v-data-table__td {
|
|
padding: 8px 16px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.v-data-table >>> .v-data-table__th {
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.v-select >>> .v-field__input {
|
|
padding-top: 4px !important;
|
|
padding-bottom: 4px !important;
|
|
}
|
|
|
|
.session-card {
|
|
border-radius: 12px !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.session-card-title {
|
|
border-top-left-radius: 12px !important;
|
|
border-top-right-radius: 12px !important;
|
|
}
|
|
|
|
/* 对话框标题栏样式 */
|
|
.v-card .v-card-title {
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
/* 表格行悬停效果 */
|
|
.v-data-table >>> .v-data-table__tr:hover {
|
|
background-color: rgba(var(--v-theme-primary), 0.02) !important;
|
|
}
|
|
|
|
/* 工具栏样式改进 */
|
|
.v-toolbar {
|
|
background-color: rgba(var(--v-theme-surface), 0.8) !important;
|
|
}
|
|
|
|
/* 卡片内边距改进 */
|
|
.v-card-text {
|
|
padding: 16px 0 !important;
|
|
}
|
|
</style>
|