refactor(channel): 合并渠道列表和详情页到ChannelManageView
1. 将原ChannelOverviewView和ChannelDetailView的功能整合到单个组件 2. 移除冗余的两个页面文件，统一路由指向ChannelManageView 3. 通过props和路由参数区分列表页和详情页状态 4. 保留并优化原有所有功能包括批量操作、渠道注册、启停重启等
This commit is contained in:
parent
1242999888
commit
29cf49ec92
@ -130,13 +130,13 @@ const router = createRouter({
|
||||
{
|
||||
path: '',
|
||||
name: 'ChannelManageComp',
|
||||
component: () => import('../views/channels/ChannelOverviewView.vue'),
|
||||
component: () => import('../views/ChannelManageView.vue'),
|
||||
meta: { keepAlive: false, requiresAuth: true, requiresAdmin: true }
|
||||
},
|
||||
{
|
||||
path: ':channelId',
|
||||
name: 'ChannelDetailComp',
|
||||
component: () => import('../views/channels/ChannelDetailView.vue'),
|
||||
component: () => import('../views/ChannelManageView.vue'),
|
||||
meta: { keepAlive: false, requiresAuth: true, requiresAdmin: true },
|
||||
props: true
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
ArrowLeft, RefreshCw, Play, Square, RotateCcw, Plug, CheckSquare, X,
|
||||
Plus, MessageCircle, Settings
|
||||
@ -21,9 +22,15 @@ import ChannelAbilityPanel from '@/components/channels/ChannelAbilityPanel.vue'
|
||||
import ChannelMappingBrowser from '@/components/channels/ChannelMappingBrowser.vue'
|
||||
import ChannelTestDialog from '@/components/channels/ChannelTestDialog.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const channelStore = useChannelStore()
|
||||
const agentStore = useAgentStore()
|
||||
|
||||
const props = defineProps({
|
||||
channelId: { type: String, default: null }
|
||||
})
|
||||
|
||||
const viewMode = ref('overview')
|
||||
const detailChannelId = ref(null)
|
||||
const detailLoading = ref(false)
|
||||
@ -153,12 +160,7 @@ async function handleBatchAction(action) {
|
||||
}
|
||||
|
||||
function handleManage(channelId) {
|
||||
detailChannelId.value = channelId
|
||||
channelStore.selectedChannelId = channelId
|
||||
viewMode.value = 'detail'
|
||||
activeTab.value = 'info'
|
||||
channelStore.stopPolling()
|
||||
loadChannelDetail(channelId)
|
||||
router.push({ name: 'ChannelDetailComp', params: { channelId } })
|
||||
}
|
||||
|
||||
async function handleToggle(channelId) {
|
||||
@ -255,14 +257,9 @@ function handleTestChannel() {
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
viewMode.value = 'overview'
|
||||
detailChannelId.value = null
|
||||
channelStore.selectedChannelId = null
|
||||
editableConfig.value = {}
|
||||
editablePolicy.value = {}
|
||||
if (channelStore.wsState !== 'connected') {
|
||||
channelStore.startPolling(5000)
|
||||
}
|
||||
router.push({ name: 'ChannelManageComp' })
|
||||
}
|
||||
|
||||
async function loadChannelDetail(channelId) {
|
||||
@ -327,6 +324,108 @@ async function handlePolicySave() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteChannel() {
|
||||
const id = detailChannelId.value
|
||||
const name = channelDetail.value?.display_name || id
|
||||
Modal.confirm({
|
||||
title: '确认注销渠道',
|
||||
content: `确定要注销渠道 "${name}" 吗？注销后渠道将停止运行，此操作不可撤销。`,
|
||||
okText: '确认注销',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await channelStore.unregisterChannel(id)
|
||||
message.success(`渠道 "${name}" 已注销`)
|
||||
router.push({ name: 'ChannelManageComp' })
|
||||
} catch (e) {
|
||||
message.error(e.message || '注销渠道失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const showRegisterDialog = ref(false)
|
||||
const registerChannelType = ref('')
|
||||
const registerLoading = ref(false)
|
||||
|
||||
const channelTypeLabels = {
|
||||
telegram: 'Telegram',
|
||||
discord: 'Discord',
|
||||
slack: 'Slack',
|
||||
whatsapp: 'WhatsApp',
|
||||
webchat: '网页聊天',
|
||||
wechat: '微信',
|
||||
feishu: '飞书',
|
||||
dingding: '钉钉',
|
||||
line: 'LINE',
|
||||
qqbot: 'QQ 机器人',
|
||||
msteams: 'Microsoft Teams',
|
||||
googlechat: 'Google Chat',
|
||||
signal: 'Signal',
|
||||
matrix: 'Matrix',
|
||||
nostr: 'Nostr',
|
||||
irc: 'IRC',
|
||||
mattermost: 'Mattermost',
|
||||
twitch: 'Twitch',
|
||||
imessage: 'iMessage',
|
||||
bluebubbles: 'BlueBubbles',
|
||||
synologychat: 'Synology Chat',
|
||||
'nextcloud-talk': 'Nextcloud Talk',
|
||||
zalo_user: 'Zalo User',
|
||||
zalo_oa: 'Zalo OA',
|
||||
sms: 'SMS',
|
||||
email: 'Email',
|
||||
urbit: 'Urbit',
|
||||
yuanbao: '元宝'
|
||||
}
|
||||
|
||||
const availableChannelTypes = Object.keys(channelTypeLabels).sort()
|
||||
|
||||
async function handleRegisterChannel() {
|
||||
if (!registerChannelType.value) return
|
||||
registerLoading.value = true
|
||||
try {
|
||||
const res = await channelStore.registerChannel(registerChannelType.value)
|
||||
if (res?.code === 0) {
|
||||
message.success('渠道注册成功')
|
||||
showRegisterDialog.value = false
|
||||
registerChannelType.value = ''
|
||||
await channelStore.fetchAllStatus()
|
||||
} else {
|
||||
message.warning(res?.message || '注册失败')
|
||||
}
|
||||
} catch (e) {
|
||||
message.error(e.message || '注册失败')
|
||||
} finally {
|
||||
registerLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.channelId, async (newId, oldId) => {
|
||||
if (newId) {
|
||||
viewMode.value = 'detail'
|
||||
detailChannelId.value = newId
|
||||
channelStore.selectedChannelId = newId
|
||||
channelStore.stopPolling()
|
||||
activeTab.value = 'info'
|
||||
await loadChannelDetail(newId)
|
||||
if (route.query.tab === 'test') {
|
||||
showTestDialog.value = true
|
||||
}
|
||||
} else if (oldId) {
|
||||
viewMode.value = 'overview'
|
||||
detailChannelId.value = null
|
||||
channelStore.selectedChannelId = null
|
||||
editableConfig.value = {}
|
||||
editablePolicy.value = {}
|
||||
await channelStore.fetchAllStatus()
|
||||
if (channelStore.wsState !== 'connected') {
|
||||
channelStore.startPolling(5000)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// ============ Card Helpers (overview) ============
|
||||
const imgErrors = ref({})
|
||||
|
||||
@ -364,18 +463,19 @@ async function handleRefresh() {
|
||||
}
|
||||
|
||||
function handleCardTest(channelId) {
|
||||
detailChannelId.value = channelId
|
||||
showTestDialog.value = true
|
||||
router.push({ name: 'ChannelDetailComp', params: { channelId }, query: { tab: 'test' } })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await channelStore.fetchAllStatus()
|
||||
if (!props.channelId) {
|
||||
await channelStore.fetchAllStatus()
|
||||
|
||||
const token = localStorage.getItem('token') || ''
|
||||
channelStore.initWS(token).then(() => {
|
||||
}).catch(() => {
|
||||
channelStore.startPolling(5000)
|
||||
})
|
||||
const token = localStorage.getItem('token') || ''
|
||||
channelStore.initWS(token).then(() => {
|
||||
}).catch(() => {
|
||||
channelStore.startPolling(5000)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@ -437,7 +537,7 @@ onUnmounted(() => {
|
||||
<!-- Toolbar -->
|
||||
<PageShoulder v-model:search="searchQuery" search-placeholder="搜索渠道名称、ID 或类型...">
|
||||
<template #actions>
|
||||
<a-button type="primary" class="lucide-icon-btn register-btn" @click="handleRefresh">
|
||||
<a-button type="primary" class="lucide-icon-btn register-btn" @click="showRegisterDialog = true">
|
||||
<Plus :size="14" />
|
||||
注册渠道
|
||||
</a-button>
|
||||
@ -559,6 +659,8 @@ onUnmounted(() => {
|
||||
<h2>{{ channelDetail.display_name || channelDetail.channel_id }}</h2>
|
||||
<span class="detail-id">{{ channelDetail.channel_id }}</span>
|
||||
</div>
|
||||
<div class="toolbar-spacer"></div>
|
||||
<button v-if="channelDetail" class="btn-delete" @click="handleDeleteChannel">注销渠道</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
@ -714,6 +816,40 @@ onUnmounted(() => {
|
||||
:channel-id="detailChannelId"
|
||||
@tested="loadChannelDetail(detailChannelId)"
|
||||
/>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="showRegisterDialog" class="dialog-overlay" @click.self="showRegisterDialog = false">
|
||||
<div class="dialog-container">
|
||||
<div class="dialog-header">
|
||||
<h3>注册渠道</h3>
|
||||
<button class="dialog-close" @click="showRegisterDialog = false">
|
||||
<X :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div class="dialog-section">
|
||||
<label class="dialog-label">选择渠道类型</label>
|
||||
<select v-model="registerChannelType" class="field-input">
|
||||
<option value="">-- 请选择 --</option>
|
||||
<option v-for="type in availableChannelTypes" :key="type" :value="type">
|
||||
{{ channelTypeLabels[type] || type }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button class="btn-cancel" @click="showRegisterDialog = false">取消</button>
|
||||
<button
|
||||
class="btn-submit"
|
||||
:disabled="!registerChannelType || registerLoading"
|
||||
@click="handleRegisterChannel"
|
||||
>
|
||||
{{ registerLoading ? '注册中...' : '注册' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1029,7 +1165,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// ============ Detail View (unchanged) ============
|
||||
// ============ Detail View ============
|
||||
.detail-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1059,6 +1195,29 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--color-error-500);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--color-error-500);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-error-500);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
h2 {
|
||||
margin: 0;
|
||||
@ -1185,4 +1344,131 @@ onUnmounted(() => {
|
||||
border-top: 1px solid var(--gray-150);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// ============ Register Dialog ============
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
background: var(--gray-0);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--gray-150);
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-1000);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--gray-600);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--gray-25);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.dialog-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dialog-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gray-1000);
|
||||
}
|
||||
|
||||
.field-input {
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: var(--gray-1000);
|
||||
background: var(--gray-0);
|
||||
transition: border-color 0.25s ease;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--main-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--gray-150);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 6px;
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-600);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
padding: 6px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,569 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { ArrowLeft, Play, Square, RotateCcw, Plug } from 'lucide-vue-next'
|
||||
import { useChannelStore } from '@/stores/channel'
|
||||
import { useAgentStore } from '@/stores/agent'
|
||||
import { useChannelAction } from '@/composables/useChannelAction'
|
||||
import ChannelConfigForm from '@/components/channels/ChannelConfigForm.vue'
|
||||
import AgentRoutingTable from '@/components/channels/AgentRoutingTable.vue'
|
||||
import ChannelPolicyForm from '@/components/channels/ChannelPolicyForm.vue'
|
||||
import ChannelMessageLog from '@/components/channels/ChannelMessageLog.vue'
|
||||
import ChannelAbilityPanel from '@/components/channels/ChannelAbilityPanel.vue'
|
||||
import ChannelMappingBrowser from '@/components/channels/ChannelMappingBrowser.vue'
|
||||
import ChannelTestDialog from '@/components/channels/ChannelTestDialog.vue'
|
||||
|
||||
const ChannelStatsPanel = defineAsyncComponent({
|
||||
loader: () => import('@/components/channels/ChannelStatsPanel.vue'),
|
||||
loadingComponent: { template: '<div class="detail-loading">统计图表加载中...</div>' },
|
||||
errorComponent: { template: '<div class="detail-loading">统计图表加载失败，请切换 Tab 后重试</div>' },
|
||||
delay: 200,
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const channelStore = useChannelStore()
|
||||
const agentStore = useAgentStore()
|
||||
const { loadingMap, execute } = useChannelAction()
|
||||
|
||||
const channelId = computed(() => route.params.channelId)
|
||||
const detailLoading = ref(false)
|
||||
const activeTab = ref('overview')
|
||||
const showTestDialog = ref(false)
|
||||
|
||||
const editableConfig = ref({})
|
||||
const editablePolicy = ref({})
|
||||
const policySaving = ref(false)
|
||||
|
||||
const channelDetail = computed(() =>
|
||||
channelId.value ? channelStore.channels[channelId.value] : null
|
||||
)
|
||||
|
||||
const agentList = computed(() => agentStore.agentsList)
|
||||
|
||||
watch(channelDetail, (detail) => {
|
||||
if (detail) {
|
||||
editableConfig.value = { ...(detail.config || {}) }
|
||||
editablePolicy.value = { ...(detail.policy || {}) }
|
||||
}
|
||||
})
|
||||
|
||||
watch(activeTab, (tab) => {
|
||||
if (tab === 'routing' && channelId.value) {
|
||||
channelStore.fetchRouting(channelId.value)
|
||||
}
|
||||
if (tab === 'policy' && channelId.value) {
|
||||
channelStore.fetchChannelPolicy(channelId.value)
|
||||
}
|
||||
})
|
||||
|
||||
const tabGroups = {
|
||||
core: [
|
||||
{ key: 'overview', label: '总览' },
|
||||
{ key: 'config', label: '连接配置' },
|
||||
{ key: 'routing', label: 'Agent 路由' },
|
||||
{ key: 'policy', label: '策略配置' }
|
||||
],
|
||||
monitor: [
|
||||
{ key: 'stats', label: '统计图表' },
|
||||
{ key: 'messages', label: '消息日志' },
|
||||
{ key: 'mapping', label: '映射管理' }
|
||||
]
|
||||
}
|
||||
|
||||
const allTabs = computed(() => [...tabGroups.core, ...tabGroups.monitor])
|
||||
|
||||
function goBack() {
|
||||
channelStore.stopPolling()
|
||||
router.push({ name: 'ChannelManageComp' })
|
||||
}
|
||||
|
||||
async function loadChannelDetail(id) {
|
||||
detailLoading.value = true
|
||||
try {
|
||||
await Promise.all([
|
||||
channelStore.fetchChannelDetail(id),
|
||||
channelStore.fetchChannelPolicy(id),
|
||||
channelStore.fetchRouting(id)
|
||||
])
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStartChannel() {
|
||||
const id = channelId.value
|
||||
await execute(
|
||||
() => channelStore.startChannel(id),
|
||||
`start_${id}`,
|
||||
{ successMsg: '渠道启动指令已发送', onSuccess: () => loadChannelDetail(id) }
|
||||
)
|
||||
}
|
||||
|
||||
async function handleStopChannel() {
|
||||
const id = channelId.value
|
||||
await execute(
|
||||
() => channelStore.stopChannel(id),
|
||||
`stop_${id}`,
|
||||
{ successMsg: '渠道已停止', onSuccess: () => loadChannelDetail(id) }
|
||||
)
|
||||
}
|
||||
|
||||
async function handleRestartChannel() {
|
||||
const id = channelId.value
|
||||
await execute(
|
||||
() => channelStore.restartChannel(id),
|
||||
`restart_${id}`,
|
||||
{ successMsg: '渠道重启指令已发送', onSuccess: () => loadChannelDetail(id) }
|
||||
)
|
||||
}
|
||||
|
||||
function handleTestChannel() {
|
||||
showTestDialog.value = true
|
||||
}
|
||||
|
||||
async function handleConfigSave() {
|
||||
try {
|
||||
await channelStore.updateConfig(channelId.value, editableConfig.value)
|
||||
message.success('配置已保存')
|
||||
await loadChannelDetail(channelId.value)
|
||||
} catch (e) {
|
||||
message.error(e.message || '保存失败')
|
||||
}
|
||||
}
|
||||
|
||||
function handleRoutingSave(action) {
|
||||
const channel = channelDetail.value
|
||||
if (!channel) return
|
||||
const routes = [...(channel.routing || [])]
|
||||
if (action.index >= 0) {
|
||||
routes[action.index] = action.route
|
||||
} else {
|
||||
routes.push(action.route)
|
||||
}
|
||||
channelStore.updateRouting(channelId.value, routes).then(() => {
|
||||
message.success('路由已更新')
|
||||
}).catch((e) => {
|
||||
message.error(e?.response?.data?.message || e.message || '保存失败')
|
||||
})
|
||||
}
|
||||
|
||||
function handleRoutingDelete(index) {
|
||||
const channel = channelDetail.value
|
||||
if (!channel) return
|
||||
const routes = (channel.routing || []).filter((_, i) => i !== index)
|
||||
channelStore.updateRouting(channelId.value, routes).then(() => {
|
||||
message.success('路由已删除')
|
||||
}).catch((e) => {
|
||||
message.error(e?.response?.data?.message || e.message || '删除失败')
|
||||
})
|
||||
}
|
||||
|
||||
async function handlePolicySave() {
|
||||
if (policySaving.value) return
|
||||
policySaving.value = true
|
||||
try {
|
||||
await channelStore.updatePolicy(channelId.value, editablePolicy.value)
|
||||
message.success('策略配置已保存')
|
||||
await channelStore.fetchChannelPolicy(channelId.value)
|
||||
} catch (e) {
|
||||
message.error(e.message || '保存失败')
|
||||
} finally {
|
||||
policySaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteChannel() {
|
||||
const id = channelId.value
|
||||
const name = channelDetail.value?.display_name || id
|
||||
Modal.confirm({
|
||||
title: '确认注销渠道',
|
||||
content: `确定要注销渠道 "${name}" 吗？注销后渠道将停止运行，此操作不可撤销。`,
|
||||
okText: '确认注销',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await channelStore.unregisterChannel(id)
|
||||
message.success(`渠道 "${name}" 已注销`)
|
||||
router.push({ name: 'ChannelList' })
|
||||
} catch (e) {
|
||||
message.error(e.message || '注销渠道失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
channelStore.selectedChannelId = channelId.value
|
||||
channelStore.stopPolling()
|
||||
await loadChannelDetail(channelId.value)
|
||||
|
||||
if (route.query.tab === 'test') {
|
||||
showTestDialog.value = true
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
channelStore.selectedChannelId = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="channel-detail-view">
|
||||
<div class="detail-toolbar">
|
||||
<button class="back-btn" @click="goBack">
|
||||
<ArrowLeft :size="18" />
|
||||
返回
|
||||
</button>
|
||||
<div class="detail-title" v-if="channelDetail">
|
||||
<h2>{{ channelDetail.display_name || channelDetail.channel_id }}</h2>
|
||||
<span class="detail-id">{{ channelDetail.channel_id }}</span>
|
||||
</div>
|
||||
<div class="toolbar-spacer"></div>
|
||||
<button class="btn-delete" @click="handleDeleteChannel">注销渠道</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
<div class="detail-tabs">
|
||||
<template v-for="group in ['core', 'monitor']" :key="group">
|
||||
<span v-if="group === 'monitor'" class="tab-separator">|</span>
|
||||
<button
|
||||
v-for="tab in tabGroups[group]"
|
||||
:key="tab.key"
|
||||
class="tab-btn"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="detailLoading" class="detail-loading">加载中...</div>
|
||||
|
||||
<div v-else-if="channelDetail" class="detail-container">
|
||||
<div v-show="activeTab === 'overview'" class="section-card">
|
||||
<h3 class="section-title">渠道总览</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">渠道 ID</span>
|
||||
<span class="info-value">{{ channelDetail.channel_id }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">渠道类型</span>
|
||||
<span class="info-value">{{ channelDetail.channel_type }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">状态</span>
|
||||
<span class="info-value">{{ channelDetail.status }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">运行状态</span>
|
||||
<span class="info-value">{{ channelDetail.enabled ? '已启用' : '已禁用' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="channel-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="lucide-icon-btn"
|
||||
:loading="!!loadingMap[`start_${channelId}`]"
|
||||
@click="handleStartChannel"
|
||||
>
|
||||
<Play :size="14" />
|
||||
启动
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
size="small"
|
||||
class="lucide-icon-btn"
|
||||
:disabled="!!loadingMap[`stop_${channelId}`]"
|
||||
@click="handleStopChannel"
|
||||
>
|
||||
<Square :size="14" />
|
||||
停止
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
class="lucide-icon-btn"
|
||||
:disabled="!!loadingMap[`restart_${channelId}`]"
|
||||
@click="handleRestartChannel"
|
||||
>
|
||||
<RotateCcw :size="14" />
|
||||
重启
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
class="lucide-icon-btn"
|
||||
@click="handleTestChannel"
|
||||
>
|
||||
<Plug :size="14" />
|
||||
测试连接
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="ability-inline">
|
||||
<ChannelAbilityPanel :channel-id="channelId" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'config'" class="section-card">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">连接配置</h3>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleConfigSave()"
|
||||
>
|
||||
保存配置
|
||||
</a-button>
|
||||
</div>
|
||||
<ChannelConfigForm
|
||||
:channel-type="channelDetail.channel_type"
|
||||
:channel-id="channelId"
|
||||
v-model="editableConfig"
|
||||
:agent-list="agentList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'routing'" class="section-card">
|
||||
<h3 class="section-title">Agent 路由配置</h3>
|
||||
<AgentRoutingTable
|
||||
:routes="channelDetail.routing || []"
|
||||
:agent-list="agentList"
|
||||
@add="handleRoutingSave"
|
||||
@edit="handleRoutingSave"
|
||||
@delete="handleRoutingDelete"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'policy'" class="section-card">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">策略配置</h3>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="policySaving"
|
||||
@click="handlePolicySave()"
|
||||
>
|
||||
保存策略
|
||||
</a-button>
|
||||
</div>
|
||||
<ChannelPolicyForm
|
||||
v-model="editablePolicy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'stats'" class="section-card">
|
||||
<h3 class="section-title">消息统计</h3>
|
||||
<ChannelStatsPanel :channel-id="channelId" />
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'messages'" class="section-card">
|
||||
<h3 class="section-title">消息日志</h3>
|
||||
<ChannelMessageLog :channel-id="channelId" />
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'mapping'" class="section-card">
|
||||
<h3 class="section-title">映射管理</h3>
|
||||
<ChannelMappingBrowser :channel-id="channelId" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ChannelTestDialog
|
||||
v-model:visible="showTestDialog"
|
||||
:channel-id="channelId"
|
||||
@tested="loadChannelDetail(channelId)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.channel-detail-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-1000);
|
||||
}
|
||||
|
||||
.detail-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px var(--page-padding);
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
background: var(--gray-0);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 6px;
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-700);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
&:hover { background: var(--gray-25); border-color: var(--main-color); color: var(--main-color); }
|
||||
}
|
||||
|
||||
.toolbar-spacer { flex: 1; }
|
||||
|
||||
.btn-delete {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--color-error-500);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--color-error-500);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
|
||||
&:hover { background: var(--color-error-500); color: #fff; }
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-1000);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.detail-id {
|
||||
font-size: 12px;
|
||||
color: var(--gray-500);
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
padding: 0 var(--page-padding) 24px;
|
||||
}
|
||||
|
||||
.detail-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--gray-150);
|
||||
overflow-x: auto;
|
||||
|
||||
.tab-separator {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--gray-150);
|
||||
margin: 0 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
color: var(--gray-600);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
&:hover { color: var(--main-color); }
|
||||
&.active {
|
||||
color: var(--main-color);
|
||||
border-bottom-color: var(--main-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-loading {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: var(--gray-500);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
max-width: 960px;
|
||||
margin: 16px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: var(--gray-0);
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-1000);
|
||||
margin: 0 0 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--gray-150);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.section-title { margin-bottom: 16px; padding-bottom: 8px; }
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
@media (max-width: 767px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: var(--gray-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: var(--gray-1000);
|
||||
}
|
||||
}
|
||||
|
||||
.channel-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--gray-150);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ability-inline {
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--gray-150);
|
||||
}
|
||||
</style>
|
||||
@ -1,639 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
RefreshCw, Play, Square, RotateCcw, Search, CheckSquare, X, Plus
|
||||
} from 'lucide-vue-next'
|
||||
import { useChannelStore } from '@/stores/channel'
|
||||
import { useChannelAction } from '@/composables/useChannelAction'
|
||||
import PageHeader from '@/components/shared/PageHeader.vue'
|
||||
import AppEmptyState from '@/components/shared/AppEmptyState.vue'
|
||||
import ChannelStatusCard from '@/components/channels/ChannelStatusCard.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const channelStore = useChannelStore()
|
||||
const { loadingMap, execute } = useChannelAction()
|
||||
|
||||
const searchQuery = ref('')
|
||||
const skeletonCount = 6
|
||||
|
||||
const batchMode = ref(false)
|
||||
const selectedIds = ref(new Set())
|
||||
const batchActionLoading = ref(false)
|
||||
|
||||
const channelList = computed(() => Object.values(channelStore.channels))
|
||||
|
||||
const filteredChannelList = computed(() => {
|
||||
const keyword = searchQuery.value.trim().toLowerCase()
|
||||
if (!keyword) return channelList.value
|
||||
return channelList.value.filter(
|
||||
(ch) =>
|
||||
(ch.display_name || '').toLowerCase().includes(keyword) ||
|
||||
(ch.channel_id || '').toLowerCase().includes(keyword) ||
|
||||
(ch.channel_type || '').toLowerCase().includes(keyword)
|
||||
)
|
||||
})
|
||||
|
||||
const channelStats = computed(() => {
|
||||
let total = 0, enabled = 0, running = 0
|
||||
for (const ch of channelList.value) {
|
||||
total++
|
||||
if (ch.enabled) enabled++
|
||||
if (ch.status === 'connected') running++
|
||||
}
|
||||
return { total, enabled, running }
|
||||
})
|
||||
|
||||
const allSelected = computed(() =>
|
||||
filteredChannelList.value.length > 0 &&
|
||||
filteredChannelList.value.every((ch) => selectedIds.value.has(ch.channel_id))
|
||||
)
|
||||
|
||||
const selectedCount = computed(() => selectedIds.value.size)
|
||||
|
||||
const showRegisterDialog = ref(false)
|
||||
const registerChannelType = ref('')
|
||||
const registerLoading = ref(false)
|
||||
|
||||
const channelTypeLabels = {
|
||||
telegram: 'Telegram',
|
||||
discord: 'Discord',
|
||||
slack: 'Slack',
|
||||
whatsapp: 'WhatsApp',
|
||||
webchat: '网页聊天',
|
||||
wechat: '微信',
|
||||
feishu: '飞书',
|
||||
dingding: '钉钉',
|
||||
line: 'LINE',
|
||||
qqbot: 'QQ 机器人',
|
||||
msteams: 'Microsoft Teams',
|
||||
googlechat: 'Google Chat',
|
||||
signal: 'Signal',
|
||||
matrix: 'Matrix',
|
||||
nostr: 'Nostr',
|
||||
irc: 'IRC',
|
||||
mattermost: 'Mattermost',
|
||||
twitch: 'Twitch',
|
||||
imessage: 'iMessage',
|
||||
bluebubbles: 'BlueBubbles',
|
||||
synologychat: 'Synology Chat',
|
||||
'nextcloud-talk': 'Nextcloud Talk',
|
||||
zalo_user: 'Zalo User',
|
||||
zalo_oa: 'Zalo OA',
|
||||
sms: 'SMS',
|
||||
email: 'Email',
|
||||
urbit: 'Urbit',
|
||||
yuanbao: '元宝'
|
||||
}
|
||||
|
||||
const availableChannelTypes = Object.keys(channelTypeLabels).sort()
|
||||
|
||||
async function handleRegisterChannel() {
|
||||
if (!registerChannelType.value) return
|
||||
registerLoading.value = true
|
||||
try {
|
||||
const res = await channelStore.registerChannel(registerChannelType.value)
|
||||
if (res?.code === 0) {
|
||||
message.success('渠道注册成功')
|
||||
showRegisterDialog.value = false
|
||||
registerChannelType.value = ''
|
||||
await channelStore.fetchAllStatus()
|
||||
} else {
|
||||
message.warning(res?.message || '注册失败')
|
||||
}
|
||||
} catch (e) {
|
||||
message.error(e.message || '注册失败')
|
||||
} finally {
|
||||
registerLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function enterBatchMode() {
|
||||
batchMode.value = true
|
||||
selectedIds.value = new Set()
|
||||
}
|
||||
|
||||
function exitBatchMode() {
|
||||
batchMode.value = false
|
||||
selectedIds.value = new Set()
|
||||
}
|
||||
|
||||
function handleSelect(channelId) {
|
||||
const next = new Set(selectedIds.value)
|
||||
if (next.has(channelId)) {
|
||||
next.delete(channelId)
|
||||
} else {
|
||||
next.add(channelId)
|
||||
}
|
||||
selectedIds.value = next
|
||||
}
|
||||
|
||||
function handleSelectAll() {
|
||||
if (allSelected.value) {
|
||||
selectedIds.value = new Set()
|
||||
} else {
|
||||
selectedIds.value = new Set(filteredChannelList.value.map((ch) => ch.channel_id))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleBatchAction(action) {
|
||||
const ids = [...selectedIds.value]
|
||||
if (!ids.length) return
|
||||
batchActionLoading.value = true
|
||||
const actionFn = {
|
||||
start: (id) => channelStore.startChannel(id),
|
||||
stop: (id) => channelStore.stopChannel(id),
|
||||
restart: (id) => channelStore.restartChannel(id)
|
||||
}[action]
|
||||
|
||||
const results = await Promise.allSettled(ids.map((id) => actionFn(id).then(() => ({ id, ok: true })).catch((e) => ({ id, ok: false, error: e }))))
|
||||
const succeeded = results.filter((r) => r.value?.ok).length
|
||||
const failed = results.length - succeeded
|
||||
|
||||
if (failed === 0) {
|
||||
message.success(`批量${action === 'start' ? '启动' : action === 'stop' ? '停止' : '重启'}完成：${succeeded} 个成功`)
|
||||
} else {
|
||||
message.warning(`批量操作完成：${succeeded} 个成功，${failed} 个失败`)
|
||||
}
|
||||
|
||||
exitBatchMode()
|
||||
batchActionLoading.value = false
|
||||
await channelStore.fetchAllStatus()
|
||||
}
|
||||
|
||||
function goToDetail(channelId) {
|
||||
router.push({ name: 'ChannelDetailComp', params: { channelId } })
|
||||
}
|
||||
|
||||
async function handleToggle(channelId) {
|
||||
const channel = channelStore.channels[channelId]
|
||||
if (channel?.enabled) {
|
||||
await execute(
|
||||
() => channelStore.stopChannel(channelId),
|
||||
`toggle_${channelId}`,
|
||||
{ successMsg: '渠道已停止' }
|
||||
)
|
||||
} else {
|
||||
await execute(
|
||||
() => channelStore.startChannel(channelId),
|
||||
`toggle_${channelId}`,
|
||||
{ successMsg: '渠道已启动' }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCardRestart(channelId) {
|
||||
await execute(
|
||||
() => channelStore.restartChannel(channelId),
|
||||
`restart_${channelId}`,
|
||||
{ successMsg: '渠道重启指令已发送', warningMsg: '重启失败' }
|
||||
)
|
||||
}
|
||||
|
||||
function handleTest(channelId) {
|
||||
channelStore.selectedChannelId = channelId
|
||||
router.push({ name: 'ChannelDetailComp', params: { channelId }, query: { tab: 'test' } })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await channelStore.fetchAllStatus()
|
||||
|
||||
const token = localStorage.getItem('token') || ''
|
||||
channelStore.initWS(token).then(() => {
|
||||
}).catch(() => {
|
||||
channelStore.startPolling(5000)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
channelStore.stopPolling()
|
||||
channelStore.disconnectWS()
|
||||
channelStore.selectedChannelId = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="channel-overview-view">
|
||||
<PageHeader
|
||||
title="渠道管理"
|
||||
description="管理和监控所有消息渠道的连接状态与配置"
|
||||
:show-border="true"
|
||||
>
|
||||
<template #info>
|
||||
<div class="summary-strip">
|
||||
<span>{{ channelStats.total }} 个渠道</span>
|
||||
<span>{{ channelStats.enabled }} 个启用</span>
|
||||
<span>{{ channelStats.running }} 个运行中</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<a-button class="lucide-icon-btn" @click="channelStore.fetchAllStatus()">
|
||||
<RefreshCw :size="14" />
|
||||
刷新
|
||||
</a-button>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="channel-toolbar">
|
||||
<a-input
|
||||
v-model:value="searchQuery"
|
||||
class="search-input"
|
||||
placeholder="搜索渠道名称、ID 或类型..."
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix><Search :size="14" /></template>
|
||||
</a-input>
|
||||
<button v-if="!batchMode" class="batch-btn" @click="enterBatchMode">
|
||||
<CheckSquare :size="14" />
|
||||
批量操作
|
||||
</button>
|
||||
<button v-if="!batchMode" class="batch-btn register-btn" @click="showRegisterDialog = true">
|
||||
<Plus :size="14" />
|
||||
注册渠道
|
||||
</button>
|
||||
<template v-else>
|
||||
<div class="batch-actions">
|
||||
<label class="select-all-label">
|
||||
<input type="checkbox" :checked="allSelected" @change="handleSelectAll" />
|
||||
全选
|
||||
</label>
|
||||
<span class="batch-count">已选 {{ selectedCount }} 项</span>
|
||||
<a-button size="small" :loading="batchActionLoading" @click="handleBatchAction('start')">
|
||||
<Play :size="12" /> 批量启动
|
||||
</a-button>
|
||||
<a-button size="small" :loading="batchActionLoading" @click="handleBatchAction('stop')">
|
||||
<Square :size="12" /> 批量停止
|
||||
</a-button>
|
||||
<a-button size="small" :loading="batchActionLoading" @click="handleBatchAction('restart')">
|
||||
<RotateCcw :size="12" /> 批量重启
|
||||
</a-button>
|
||||
<button class="cancel-batch-btn" @click="exitBatchMode">
|
||||
<X :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="channel-content">
|
||||
<div
|
||||
v-if="channelStore.isLoading && !Object.keys(channelStore.channels).length"
|
||||
class="channel-grid"
|
||||
>
|
||||
<div v-for="n in skeletonCount" :key="n" class="skeleton-card"></div>
|
||||
</div>
|
||||
|
||||
<AppEmptyState
|
||||
v-else-if="channelStore.loadError && !Object.keys(channelStore.channels).length"
|
||||
type="error"
|
||||
:description="channelStore.loadError"
|
||||
action-label="重试"
|
||||
@action="channelStore.fetchAllStatus()"
|
||||
/>
|
||||
|
||||
<AppEmptyState
|
||||
v-else-if="!channelList.length"
|
||||
type="empty"
|
||||
title="暂无已注册渠道"
|
||||
description="系统尚未注册任何消息渠道，请联系管理员进行配置"
|
||||
/>
|
||||
|
||||
<AppEmptyState
|
||||
v-else-if="!filteredChannelList.length"
|
||||
type="no-results"
|
||||
/>
|
||||
|
||||
<div v-else class="channel-grid">
|
||||
<ChannelStatusCard
|
||||
v-for="ch in filteredChannelList"
|
||||
:key="ch.channel_id"
|
||||
:channel="ch"
|
||||
:toggling="!!loadingMap[`toggle_${ch.channel_id}`]"
|
||||
:batch-mode="batchMode"
|
||||
:selected="selectedIds.has(ch.channel_id)"
|
||||
@manage="goToDetail"
|
||||
@toggle="handleToggle"
|
||||
@restart="handleCardRestart"
|
||||
@test="handleTest"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="showRegisterDialog" class="dialog-overlay" @click.self="showRegisterDialog = false">
|
||||
<div class="dialog-container">
|
||||
<div class="dialog-header">
|
||||
<h3>注册渠道</h3>
|
||||
<button class="dialog-close" @click="showRegisterDialog = false">
|
||||
<X :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div class="dialog-section">
|
||||
<label class="dialog-label">选择渠道类型</label>
|
||||
<select v-model="registerChannelType" class="field-input">
|
||||
<option value="">-- 请选择 --</option>
|
||||
<option v-for="type in availableChannelTypes" :key="type" :value="type">
|
||||
{{ channelTypeLabels[type] || type }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button class="btn-cancel" @click="showRegisterDialog = false">取消</button>
|
||||
<button
|
||||
class="btn-submit"
|
||||
:disabled="!registerChannelType || registerLoading"
|
||||
@click="handleRegisterChannel"
|
||||
>
|
||||
{{ registerLoading ? '注册中...' : '注册' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.channel-overview-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-1000);
|
||||
}
|
||||
|
||||
.summary-strip {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
span {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 7px;
|
||||
background: var(--gray-10);
|
||||
color: var(--gray-700);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px var(--page-padding) 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 280px;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 8px;
|
||||
background-color: var(--gray-0);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.ant-input-affix-wrapper-focused {
|
||||
border-color: var(--gray-200);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-prefix) {
|
||||
margin-right: 8px;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 6px;
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-700);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.select-all-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--gray-700);
|
||||
cursor: pointer;
|
||||
|
||||
input[type="checkbox"] {
|
||||
accent-color: var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-count {
|
||||
font-size: 13px;
|
||||
color: var(--gray-600);
|
||||
padding: 2px 8px;
|
||||
background: var(--gray-25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cancel-batch-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--gray-500);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, color 0.2s ease;
|
||||
|
||||
&:hover { border-color: var(--gray-300); color: var(--gray-700); }
|
||||
}
|
||||
|
||||
.channel-content {
|
||||
padding: 16px var(--page-padding);
|
||||
}
|
||||
|
||||
.channel-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 180px;
|
||||
background: linear-gradient(90deg, var(--gray-25) 25%, var(--gray-10) 50%, var(--gray-25) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
background: var(--gray-0);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--gray-150);
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-1000);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--gray-600);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover { background: var(--gray-25); }
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.dialog-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dialog-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gray-1000);
|
||||
}
|
||||
|
||||
.field-input {
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: var(--gray-1000);
|
||||
background: var(--gray-0);
|
||||
transition: border-color 0.25s ease;
|
||||
|
||||
&:focus { border-color: var(--main-color); outline: none; }
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--gray-150);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--gray-150);
|
||||
border-radius: 6px;
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-600);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { border-color: var(--gray-300); }
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
padding: 6px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:hover { opacity: 0.9; }
|
||||
&:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user