eaiadminandClaude Code
0455f064ac
- 后端：新增 /api/audio/transcribe 接口，调用 Ollama whisper 进行语音识别 - 前端：新增 AudioTranscribePage.vue 页面，支持 MP3/WAV/M4A/OGG/FLAC 等格式 - 注册路由、工具卡片、智能助手欢迎语更新 Co-Authored-By: Claude Code <noreply@anthropic.com>
1377 lines
35 KiB
Vue
1377 lines
35 KiB
Vue
<template>
|
|
<div class="workbench-shell">
|
|
<header class="global-header">
|
|
<div class="brand-block" @click="router.push('/home')">
|
|
<div class="brand-mark">EAI</div>
|
|
<div>
|
|
<div class="brand-title">数字员工平台</div>
|
|
<div class="brand-subtitle">知识库固定 + 数字员工动态生长</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-search">
|
|
<el-icon class="search-icon"><Search /></el-icon>
|
|
<input
|
|
class="search-input"
|
|
type="text"
|
|
placeholder="搜索专员、事项、交付物、证据、连接器..."
|
|
/>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<div class="recent-chip">
|
|
<span class="chip-label">专员工作区</span>
|
|
<span class="chip-value">{{ currentTitle }}</span>
|
|
</div>
|
|
|
|
<el-badge :value="unread" :max="99" :hidden="unread === 0">
|
|
<el-button circle class="icon-btn" @click="router.push('/notifications')">
|
|
<el-icon><Bell /></el-icon>
|
|
</el-button>
|
|
</el-badge>
|
|
|
|
<el-dropdown trigger="click">
|
|
<div class="user-chip">
|
|
<el-avatar :size="34">{{ avatarText }}</el-avatar>
|
|
<div class="user-meta">
|
|
<span class="user-name">{{ username }}</span>
|
|
<span class="user-role">{{ isAdmin ? '管理员' : '业务人员' }}</span>
|
|
</div>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="router.push('/exam/my-profile')">我的资料</el-dropdown-item>
|
|
<el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="shell-body">
|
|
<nav class="nav-sidebar" :class="{ collapsed: topNavCollapsed }">
|
|
<button
|
|
class="sidebar-toggle drawer-handle"
|
|
:title="topNavCollapsed ? '展开模块' : '收起模块'"
|
|
:aria-label="topNavCollapsed ? '展开模块' : '收起模块'"
|
|
@click="toggleTopNavCollapsed"
|
|
>
|
|
<span class="drawer-handle-grip" aria-hidden="true">
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</span>
|
|
<el-icon class="drawer-handle-arrow" aria-hidden="true">
|
|
<ArrowRight v-if="topNavCollapsed" />
|
|
<ArrowLeft v-else />
|
|
</el-icon>
|
|
</button>
|
|
<template v-if="!topNavCollapsed">
|
|
<button
|
|
v-for="item in visibleTopNavItems"
|
|
:key="item.key"
|
|
class="nav-sidebar-item"
|
|
:class="{ active: activeSurface === item.key }"
|
|
@click="router.push(item.route)"
|
|
>
|
|
<span class="nav-sidebar-item-main">
|
|
<span class="nav-icon-badge nav-icon-badge-inline">
|
|
<el-icon><component :is="topNavIcon(item)" /></el-icon>
|
|
</span>
|
|
<span>{{ item.label }}</span>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
v-for="item in visibleTopNavItems"
|
|
:key="item.key"
|
|
class="nav-sidebar-icon-item"
|
|
:class="{ active: activeSurface === item.key }"
|
|
:title="item.title || item.label"
|
|
:aria-label="item.title || item.label"
|
|
@click="router.push(item.route)"
|
|
>
|
|
<span class="nav-icon-badge">
|
|
<el-icon><component :is="topNavIcon(item)" /></el-icon>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
</nav>
|
|
|
|
<div class="workspace-area">
|
|
<div class="workspace-tabs">
|
|
<button
|
|
v-for="tab in openTabs"
|
|
:key="tab.route"
|
|
class="workspace-tab"
|
|
:class="{ active: route.path === tab.route }"
|
|
@click="router.push(tab.route)"
|
|
>
|
|
<span>{{ tab.label }}</span>
|
|
<el-icon
|
|
v-if="tab.closable"
|
|
class="close-icon"
|
|
@click.stop="closeTab(tab.route)"
|
|
>
|
|
<Close />
|
|
</el-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="workspace-body">
|
|
<aside v-if="activeSurface === 'apps'" class="left-rail" :class="{ collapsed: appRailCollapsed }">
|
|
<button
|
|
class="drawer-handle"
|
|
:title="appRailCollapsed ? '展开专员工作区' : '收起专员工作区'"
|
|
:aria-label="appRailCollapsed ? '展开专员工作区' : '收起专员工作区'"
|
|
@click="toggleAppRailCollapsed"
|
|
>
|
|
<span class="drawer-handle-grip" aria-hidden="true">
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</span>
|
|
<el-icon class="drawer-handle-arrow" aria-hidden="true">
|
|
<ArrowRight v-if="appRailCollapsed" />
|
|
<ArrowLeft v-else />
|
|
</el-icon>
|
|
</button>
|
|
<template v-if="!appRailCollapsed">
|
|
<section class="rail-section">
|
|
<div class="section-header">
|
|
<span>专员工作区</span>
|
|
<span class="section-caption">通用专员 + 行业专员</span>
|
|
</div>
|
|
<div class="specialist-group-label">通用专员</div>
|
|
<button
|
|
v-for="app in genericApps"
|
|
:key="app.key"
|
|
class="app-card"
|
|
:class="{ active: route.path === app.route }"
|
|
@click="router.push(app.route)"
|
|
>
|
|
<div class="app-card-top">
|
|
<div class="app-card-title">
|
|
<span class="rail-icon-badge rail-icon-badge-inline">
|
|
<el-icon><component :is="railItemIcon(app, 'app')" /></el-icon>
|
|
</span>
|
|
<span class="app-name">{{ app.label }}</span>
|
|
</div>
|
|
<div class="app-card-tags">
|
|
<span class="app-worker-type">{{ app.workerType === 'adw' ? 'ADW' : 'DW' }}</span>
|
|
<span class="app-stage" :style="{ color: app.color }">{{ app.stage }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-summary">{{ app.summary }}</div>
|
|
<div class="app-meta">
|
|
<span>{{ app.status }}</span>
|
|
<span>{{ app.risk }}</span>
|
|
</div>
|
|
<div class="progress-track">
|
|
<div class="progress-fill" :style="{ width: `${app.progress}%`, background: app.color }" />
|
|
</div>
|
|
</button>
|
|
<div class="specialist-group-label">行业专员</div>
|
|
<button
|
|
v-for="app in industryApps"
|
|
:key="app.key"
|
|
class="app-card"
|
|
:class="{ active: route.path === app.route }"
|
|
@click="router.push(app.route)"
|
|
>
|
|
<div class="app-card-top">
|
|
<div class="app-card-title">
|
|
<span class="rail-icon-badge rail-icon-badge-inline">
|
|
<el-icon><component :is="railItemIcon(app, 'app')" /></el-icon>
|
|
</span>
|
|
<span class="app-name">{{ app.label }}</span>
|
|
</div>
|
|
<div class="app-card-tags">
|
|
<span class="app-worker-type">{{ app.workerType === 'adw' ? 'ADW' : 'DW' }}</span>
|
|
<span class="app-stage" :style="{ color: app.color }">{{ app.stage }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="app-summary">{{ app.summary }}</div>
|
|
<div class="app-meta">
|
|
<span>{{ app.status }}</span>
|
|
<span>{{ app.risk }}</span>
|
|
</div>
|
|
<div class="progress-track">
|
|
<div class="progress-fill" :style="{ width: `${app.progress}%`, background: app.color }" />
|
|
</div>
|
|
</button>
|
|
</section>
|
|
|
|
<section class="rail-section">
|
|
<div class="section-header">
|
|
<span>知识库</span>
|
|
<span class="section-caption">固定入口</span>
|
|
</div>
|
|
<button
|
|
v-for="item in visibleKnowledgeLinks"
|
|
:key="item.route"
|
|
class="rail-link"
|
|
:class="{ active: route.path === item.route }"
|
|
@click="router.push(item.route)"
|
|
>
|
|
<span class="rail-link-main">
|
|
<span class="rail-icon-badge rail-icon-badge-inline">
|
|
<el-icon><component :is="railItemIcon(item, 'knowledge')" /></el-icon>
|
|
</span>
|
|
<span class="rail-link-text">
|
|
<span>{{ item.label }}</span>
|
|
<small>{{ item.caption }}</small>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</section>
|
|
|
|
<section v-if="currentCases.length" class="rail-section">
|
|
<div class="section-header">
|
|
<span>当前事项</span>
|
|
<span class="section-caption">{{ workspaceDescriptor?.title }}</span>
|
|
</div>
|
|
<button
|
|
v-for="item in currentCases"
|
|
:key="item.id"
|
|
class="case-card"
|
|
:class="{ active: item.id === selectedCaseId }"
|
|
@click="workbench.setSelectedCase(appKey, item.id)"
|
|
>
|
|
<div class="case-top">
|
|
<div class="case-title-wrap">
|
|
<span class="rail-icon-badge rail-icon-badge-inline rail-icon-badge-case">
|
|
<el-icon><component :is="railItemIcon(item, 'case')" /></el-icon>
|
|
</span>
|
|
<span class="case-title">{{ item.title }}</span>
|
|
</div>
|
|
<span class="case-priority">{{ item.priority }}</span>
|
|
</div>
|
|
<div class="case-summary">{{ item.summary }}</div>
|
|
<div class="case-meta">
|
|
<span>{{ item.owner }}</span>
|
|
<span>{{ item.due }}</span>
|
|
</div>
|
|
</button>
|
|
</section>
|
|
|
|
<section v-if="visibleBackendLinks.length" class="rail-section rail-section-backend">
|
|
<div class="section-header">
|
|
<span>后台</span>
|
|
<span class="section-caption">配置与运维</span>
|
|
</div>
|
|
<button
|
|
v-for="item in visibleBackendLinks"
|
|
:key="item.route"
|
|
class="rail-link backend-link"
|
|
:class="{ active: route.path === item.route }"
|
|
@click="router.push(item.route)"
|
|
>
|
|
<span class="rail-link-main">
|
|
<span class="rail-icon-badge rail-icon-badge-inline">
|
|
<el-icon><component :is="railItemIcon(item, 'backend')" /></el-icon>
|
|
</span>
|
|
<span class="rail-link-text">
|
|
<span>{{ item.label }}</span>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</section>
|
|
</template>
|
|
<template v-else>
|
|
<div class="rail-icon-group">
|
|
<button
|
|
v-for="app in [...genericApps, ...industryApps]"
|
|
:key="app.key"
|
|
class="rail-icon-item"
|
|
:class="{ active: route.path === app.route }"
|
|
:title="app.label"
|
|
:aria-label="app.label"
|
|
@click="router.push(app.route)"
|
|
>
|
|
<span class="rail-icon-badge">
|
|
<el-icon><component :is="railItemIcon(app, 'app')" /></el-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rail-icon-group" v-if="visibleKnowledgeLinks.length">
|
|
<button
|
|
v-for="item in visibleKnowledgeLinks"
|
|
:key="item.route"
|
|
class="rail-icon-item rail-icon-item-muted"
|
|
:class="{ active: route.path === item.route }"
|
|
:title="item.label"
|
|
:aria-label="item.label"
|
|
@click="router.push(item.route)"
|
|
>
|
|
<span class="rail-icon-badge">
|
|
<el-icon><component :is="railItemIcon(item, 'knowledge')" /></el-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rail-icon-group" v-if="currentCases.length">
|
|
<button
|
|
v-for="item in currentCases"
|
|
:key="item.id"
|
|
class="rail-icon-item rail-icon-item-case"
|
|
:class="{ active: item.id === selectedCaseId }"
|
|
:title="item.title"
|
|
:aria-label="item.title"
|
|
@click="workbench.setSelectedCase(appKey, item.id)"
|
|
>
|
|
<span class="rail-icon-badge">
|
|
<el-icon><component :is="railItemIcon(item, 'case')" /></el-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rail-icon-group" v-if="visibleBackendLinks.length">
|
|
<button
|
|
v-for="item in visibleBackendLinks"
|
|
:key="item.route"
|
|
class="rail-icon-item rail-icon-item-muted"
|
|
:class="{ active: route.path === item.route }"
|
|
:title="item.label"
|
|
:aria-label="item.label"
|
|
@click="router.push(item.route)"
|
|
>
|
|
<span class="rail-icon-badge">
|
|
<el-icon><component :is="railItemIcon(item, 'backend')" /></el-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</aside>
|
|
|
|
<main class="workspace-column">
|
|
<div class="workspace-stage">
|
|
<router-view />
|
|
</div>
|
|
|
|
<div class="bottom-panel" :class="{ expanded: bottomOpen }">
|
|
<div class="bottom-panel-header">
|
|
<div class="bottom-panel-tabs">
|
|
<button
|
|
v-for="tab in bottomTabs"
|
|
:key="tab.key"
|
|
class="bottom-tab"
|
|
:class="{ active: activeBottomTab === tab.key }"
|
|
@click="activeBottomTab = tab.key"
|
|
>
|
|
{{ tab.label }}
|
|
</button>
|
|
</div>
|
|
<el-button text @click="bottomOpen = !bottomOpen">
|
|
{{ bottomOpen ? '收起运行面板' : '展开运行面板' }}
|
|
</el-button>
|
|
</div>
|
|
|
|
<div v-if="bottomOpen" class="bottom-panel-body">
|
|
<div
|
|
v-for="item in activeBottomItems"
|
|
:key="item"
|
|
class="bottom-log-item"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ArrowLeft, ArrowRight, Bell, Close, Search, Menu, ShoppingBag, Tools, Reading, FolderOpened, Monitor, User, Setting, Files, EditPen } from '@element-plus/icons-vue'
|
|
import { useAuthStore } from '@/store/auth'
|
|
import { useNotificationStore } from '@/store/notification'
|
|
import { useWorkbenchStore } from '@/store/workbench'
|
|
import { useWorkerRuntimeStore } from '@/store/workerRuntime'
|
|
import { listSpecialists } from '@/api/specialist'
|
|
import {
|
|
businessApps,
|
|
getBusinessAppsByTier,
|
|
getAppCases,
|
|
getDefaultCaseId,
|
|
getWorkbenchSurface,
|
|
getWorkspaceDescriptor,
|
|
getWorkspaceSnapshot,
|
|
getVisibleBackendLinks,
|
|
getVisibleTopNavItems,
|
|
secondaryNavItems,
|
|
knowledgeLinks,
|
|
} from '@/config/workbench'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
const notif = useNotificationStore()
|
|
const workbench = useWorkbenchStore()
|
|
const workerRuntime = useWorkerRuntimeStore()
|
|
|
|
const bottomTabs = [
|
|
{ key: 'timeline', label: 'Timeline' },
|
|
{ key: 'replay', label: 'Replay' },
|
|
{ key: 'trace', label: 'Trace' },
|
|
{ key: 'logs', label: 'Logs' },
|
|
]
|
|
|
|
const isAdmin = computed(() => auth.isAdmin)
|
|
const username = computed(() => auth.username || '同事')
|
|
const avatarText = computed(() => username.value.charAt(0))
|
|
const unread = computed(() => notif.unread)
|
|
const activeSurface = computed(() => getWorkbenchSurface(route.path))
|
|
const appKey = computed(() => route.meta.workspaceKey || '')
|
|
const runtimeCases = computed(() => workerRuntime.tasksBySpecialist[appKey.value] || [])
|
|
const currentCases = computed(() => {
|
|
if (runtimeCases.value.length) {
|
|
return runtimeCases.value.map(item => ({
|
|
id: String(item.id),
|
|
title: item.title,
|
|
owner: item.owner || '待指派',
|
|
priority: item.priority || 'P2',
|
|
due: formatDueAt(item.due_at),
|
|
summary: item.summary || '待补充事项摘要',
|
|
status: item.status || '待处理',
|
|
}))
|
|
}
|
|
return appKey.value ? getAppCases(appKey.value) : []
|
|
})
|
|
const selectedCaseId = computed(() => {
|
|
if (!appKey.value) return ''
|
|
return workbench.selectedCases[appKey.value] || currentCases.value[0]?.id || getDefaultCaseId(appKey.value)
|
|
})
|
|
const remoteSpecialists = ref([])
|
|
const workspaceDescriptor = computed(() => getWorkspaceDescriptor(route.path, selectedCaseId.value))
|
|
const workspaceSnapshot = computed(() => getWorkspaceSnapshot(route.path, selectedCaseId.value))
|
|
const currentTaskDetail = computed(() => workerRuntime.detailByTask[String(selectedCaseId.value)] || null)
|
|
const visibleTopNavItems = computed(() => getVisibleTopNavItems(isAdmin.value))
|
|
const visibleBackendLinks = computed(() => getVisibleBackendLinks(isAdmin.value))
|
|
const visibleKnowledgeLinks = computed(() => knowledgeLinks.filter((item) => !item.adminOnly || isAdmin.value))
|
|
const genericApps = computed(() => {
|
|
const items = remoteSpecialists.value.filter(item => item.tier === 'generic')
|
|
return items.length ? items : getBusinessAppsByTier('generic')
|
|
})
|
|
const industryApps = computed(() => {
|
|
const items = remoteSpecialists.value.filter(item => item.tier === 'industry')
|
|
return items.length ? items : getBusinessAppsByTier('industry')
|
|
})
|
|
const openTabs = computed(() => workbench.openTabs)
|
|
const activeBottomTab = computed({
|
|
get: () => workbench.activeBottomTab,
|
|
set: (value) => workbench.setActiveBottomTab(value),
|
|
})
|
|
const bottomOpen = computed({
|
|
get: () => workbench.bottomOpen,
|
|
set: (value) => workbench.setBottomOpen(value),
|
|
})
|
|
const topNavCollapsed = ref(localStorage.getItem('workbench-top-nav-collapsed') !== '0')
|
|
const appRailCollapsed = ref(localStorage.getItem('workbench-app-rail-collapsed') !== '0')
|
|
const topNavIconMap = {
|
|
apps: Menu,
|
|
market: ShoppingBag,
|
|
studio: Tools,
|
|
'knowledge-app': Reading,
|
|
'knowledge-admin': FolderOpened,
|
|
console: Monitor,
|
|
}
|
|
|
|
const currentTitle = computed(() => {
|
|
const currentNav = visibleTopNavItems.value.find((item) => item.key === activeSurface.value)
|
|
return currentNav?.title || currentNav?.label || '工作台'
|
|
})
|
|
|
|
const activeBottomItems = computed(() => {
|
|
const panel = currentTaskDetail.value?.bottom_panel || workspaceSnapshot.value?.bottomPanel || {}
|
|
return panel[activeBottomTab.value] || []
|
|
})
|
|
|
|
let timer = null
|
|
|
|
onMounted(() => {
|
|
notif.refresh()
|
|
timer = setInterval(() => notif.refresh(), 60000)
|
|
loadSpecialists()
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (timer) clearInterval(timer)
|
|
})
|
|
|
|
watch(
|
|
appKey,
|
|
async (key) => {
|
|
if (!key) return
|
|
try {
|
|
await workerRuntime.loadTasks(key)
|
|
} catch (error) {
|
|
console.warn('load worker tasks for shell failed', error)
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(
|
|
() => currentCases.value.map(item => item.id).join(','),
|
|
(ids) => {
|
|
if (!appKey.value || !ids) return
|
|
const selected = workbench.selectedCases[appKey.value]
|
|
if (!selected || !currentCases.value.some(item => item.id === selected)) {
|
|
workbench.setSelectedCase(appKey.value, currentCases.value[0]?.id || getDefaultCaseId(appKey.value))
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(
|
|
selectedCaseId,
|
|
async (id) => {
|
|
if (!id || !/^\d+$/.test(String(id))) return
|
|
try {
|
|
await workerRuntime.loadTaskDetail(id)
|
|
} catch (error) {
|
|
console.warn('load worker task detail for shell failed', error)
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(
|
|
() => route.path,
|
|
(path) => {
|
|
const app = businessApps.find((item) => item.route === path)
|
|
if (app) {
|
|
workbench.ensureTab({ route: path, label: app.label, closable: true })
|
|
if (app.key && !workbench.selectedCases[app.key]) {
|
|
workbench.setSelectedCase(app.key, getDefaultCaseId(app.key))
|
|
}
|
|
return
|
|
}
|
|
|
|
// secondary nav items also open tabs
|
|
const allSecondary = Object.values(secondaryNavItems).flat()
|
|
const secondaryMatch = allSecondary.find(item => item.route === path)
|
|
if (secondaryMatch) {
|
|
workbench.ensureTab({ route: path, label: secondaryMatch.label, closable: true })
|
|
return
|
|
}
|
|
|
|
if (path === '/home') {
|
|
workbench.ensureTab({ route: '/home', label: '工作台总览', closable: false })
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
function closeTab(path) {
|
|
const tabs = openTabs.value
|
|
const index = tabs.findIndex((tab) => tab.route === path && tab.closable)
|
|
if (index === -1) return
|
|
const closingCurrent = route.path === path
|
|
workbench.closeTab(path)
|
|
if (closingCurrent) {
|
|
const nextTabs = workbench.openTabs
|
|
const fallback = nextTabs[index - 1] || nextTabs[nextTabs.length - 1]
|
|
router.push(fallback?.route || '/home')
|
|
}
|
|
}
|
|
|
|
function handleLogout() {
|
|
auth.logout()
|
|
router.push('/login')
|
|
}
|
|
|
|
function normalizeSpecialist(item) {
|
|
return {
|
|
key: item.key,
|
|
label: item.label,
|
|
tier: item.tier,
|
|
workerType: item.worker_type || 'dw',
|
|
route: item.route,
|
|
summary: item.summary,
|
|
status: item.work_status,
|
|
risk: item.risk_label,
|
|
color: item.color,
|
|
stage: item.stage,
|
|
progress: item.progress,
|
|
}
|
|
}
|
|
|
|
async function loadSpecialists() {
|
|
try {
|
|
const res = await listSpecialists()
|
|
remoteSpecialists.value = (res?.data || []).map(normalizeSpecialist)
|
|
} catch (error) {
|
|
console.warn('load specialists for shell failed', error)
|
|
}
|
|
}
|
|
|
|
function formatDueAt(value) {
|
|
if (!value) return '待设置'
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return '待设置'
|
|
const month = `${date.getMonth() + 1}`.padStart(2, '0')
|
|
const day = `${date.getDate()}`.padStart(2, '0')
|
|
const hour = `${date.getHours()}`.padStart(2, '0')
|
|
const minute = `${date.getMinutes()}`.padStart(2, '0')
|
|
return `${month}-${day} ${hour}:${minute}`
|
|
}
|
|
|
|
function topNavIcon(item) {
|
|
return topNavIconMap[item?.key] || Menu
|
|
}
|
|
|
|
function railItemIcon(target, kind = 'app') {
|
|
if (kind === 'knowledge') return Reading
|
|
if (kind === 'backend') return Setting
|
|
if (kind === 'case') return Files
|
|
|
|
const text = [
|
|
target?.key,
|
|
target?.route,
|
|
target?.label,
|
|
target?.title,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')
|
|
.toLowerCase()
|
|
|
|
if (text.includes('official-account') || text.includes('公众号')) return EditPen
|
|
if (text.includes('knowledge') || text.includes('知识库')) return Reading
|
|
if (text.includes('console') || text.includes('admin') || text.includes('manage') || text.includes('配置')) return Setting
|
|
if (text.includes('market') || text.includes('市场')) return ShoppingBag
|
|
if (text.includes('studio') || text.includes('工坊')) return Tools
|
|
return User
|
|
}
|
|
|
|
function toggleTopNavCollapsed() {
|
|
topNavCollapsed.value = !topNavCollapsed.value
|
|
localStorage.setItem('workbench-top-nav-collapsed', topNavCollapsed.value ? '1' : '0')
|
|
}
|
|
|
|
function toggleAppRailCollapsed() {
|
|
appRailCollapsed.value = !appRailCollapsed.value
|
|
localStorage.setItem('workbench-app-rail-collapsed', appRailCollapsed.value ? '1' : '0')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.workbench-shell {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #eef3f8;
|
|
}
|
|
|
|
.global-header {
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 0 24px;
|
|
background: linear-gradient(135deg, #132238 0%, #1d3557 45%, #244a7a 100%);
|
|
color: #fff;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.brand-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, #5ab2ff 0%, #8ed0ff 100%);
|
|
color: #0d223a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
letter-spacing: 0.6px;
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand-subtitle {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.header-search {
|
|
flex: 1;
|
|
max-width: 560px;
|
|
position: relative;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: rgba(255, 255, 255, 0.64);
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
height: 44px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
padding: 0 16px 0 42px;
|
|
outline: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.recent-chip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 8px 12px;
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.chip-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: rgba(255, 255, 255, 0.58);
|
|
}
|
|
|
|
.chip-value {
|
|
font-size: 13px;
|
|
color: #fff;
|
|
max-width: 220px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.icon-btn {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
color: #fff;
|
|
}
|
|
|
|
.user-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.66);
|
|
}
|
|
|
|
.nav-sidebar {
|
|
width: 200px;
|
|
min-width: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 20px 12px;
|
|
background: #fff;
|
|
border-right: 1px solid var(--surface-border);
|
|
transition: width 0.22s ease, min-width 0.22s ease, padding 0.22s ease;
|
|
}
|
|
|
|
.nav-sidebar.collapsed {
|
|
width: 64px;
|
|
min-width: 64px;
|
|
padding: 16px 8px;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
width: 48px;
|
|
min-height: 60px;
|
|
border: none;
|
|
border-radius: 14px;
|
|
padding: 6px 4px;
|
|
background: linear-gradient(180deg, #eff6ff 0%, #e0ecff 100%);
|
|
color: #2563eb;
|
|
cursor: pointer;
|
|
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 6px;
|
|
}
|
|
|
|
.drawer-handle {
|
|
width: 18px;
|
|
min-height: 76px;
|
|
padding: 8px 0;
|
|
margin: 0 2px 8px auto;
|
|
border-radius: 999px;
|
|
background: linear-gradient(180deg, #f8fbff 0%, #e8f0ff 100%);
|
|
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2);
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.drawer-handle:hover {
|
|
color: #1d4ed8;
|
|
transform: translateX(1px);
|
|
}
|
|
|
|
.nav-sidebar.collapsed .drawer-handle {
|
|
margin: 0 auto 8px;
|
|
}
|
|
|
|
.left-rail.collapsed .drawer-handle {
|
|
margin: 0 auto 8px;
|
|
}
|
|
|
|
.drawer-handle-grip {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.drawer-handle-grip span {
|
|
width: 8px;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.drawer-handle-arrow {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.nav-sidebar-item {
|
|
border: none;
|
|
background: transparent;
|
|
padding: 12px 14px;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #61758a;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
.nav-sidebar-item-main {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.nav-sidebar-item:hover,
|
|
.nav-sidebar-item.active {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
.nav-sidebar-icon-item {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto;
|
|
border: none;
|
|
border-radius: 14px;
|
|
background: transparent;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-sidebar-icon-item:hover,
|
|
.nav-sidebar-icon-item.active {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
}
|
|
|
|
.nav-icon-badge,
|
|
.rail-icon-badge {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 10px;
|
|
background: rgba(37, 99, 235, 0.12);
|
|
color: #2563eb;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav-icon-badge :deep(.el-icon) {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.rail-icon-badge :deep(.el-icon) {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.nav-icon-badge-inline,
|
|
.rail-icon-badge-inline {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.shell-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.workspace-area {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.workspace-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left-rail {
|
|
width: 300px;
|
|
min-width: 300px;
|
|
padding: 18px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
background: #f6f9fc;
|
|
border-right: 1px solid var(--surface-border);
|
|
overflow-y: auto;
|
|
transition: width 0.22s ease, min-width 0.22s ease, padding 0.22s ease;
|
|
}
|
|
|
|
.left-rail.collapsed {
|
|
width: 76px;
|
|
min-width: 76px;
|
|
padding: 18px 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rail-icon-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
border-top: 1px solid rgba(148, 163, 184, 0.16);
|
|
}
|
|
|
|
.rail-icon-group:first-of-type {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.rail-icon-item {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin: 0 auto;
|
|
border: none;
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rail-icon-item:hover,
|
|
.rail-icon-item.active {
|
|
transform: translateY(-1px);
|
|
background: rgba(239, 246, 255, 0.98);
|
|
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
|
|
}
|
|
|
|
.rail-icon-item.active .rail-icon-badge {
|
|
background: rgba(37, 99, 235, 0.18);
|
|
}
|
|
|
|
.rail-icon-item-muted .rail-icon-badge {
|
|
background: rgba(148, 163, 184, 0.14);
|
|
color: #475569;
|
|
}
|
|
|
|
.rail-icon-item-case .rail-icon-badge {
|
|
background: rgba(20, 184, 166, 0.14);
|
|
color: #0f766e;
|
|
}
|
|
|
|
.rail-section {
|
|
padding: 14px;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(228, 231, 237, 0.9);
|
|
box-shadow: 0 10px 22px rgba(31, 35, 41, 0.05);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 12px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--surface-text);
|
|
}
|
|
|
|
.section-caption {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: #98a2b3;
|
|
}
|
|
|
|
.rail-link {
|
|
width: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 3px;
|
|
cursor: pointer;
|
|
color: var(--surface-text);
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.rail-link-main {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.rail-link-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.rail-link small {
|
|
color: var(--surface-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.rail-link:hover,
|
|
.rail-link.active {
|
|
background: rgba(64, 158, 255, 0.08);
|
|
}
|
|
|
|
.backend-link {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.case-card {
|
|
width: 100%;
|
|
border: 1px solid rgba(228, 231, 237, 0.95);
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
text-align: left;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.case-card:hover,
|
|
.case-card.active {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(64, 158, 255, 0.45);
|
|
box-shadow: 0 14px 24px rgba(64, 158, 255, 0.12);
|
|
}
|
|
|
|
.case-top,
|
|
.case-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.case-title-wrap {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.case-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--surface-text);
|
|
}
|
|
|
|
.rail-icon-badge-case {
|
|
background: rgba(20, 184, 166, 0.14);
|
|
color: #0f766e;
|
|
}
|
|
|
|
.case-priority {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #f56c6c;
|
|
}
|
|
|
|
.case-summary {
|
|
font-size: 13px;
|
|
color: #526071;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.case-meta {
|
|
font-size: 12px;
|
|
color: var(--surface-muted);
|
|
}
|
|
|
|
.app-card {
|
|
width: 100%;
|
|
border: 1px solid rgba(228, 231, 237, 0.95);
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.specialist-group-label {
|
|
margin: 6px 0 8px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #7a8694;
|
|
}
|
|
|
|
.app-card:hover,
|
|
.app-card.active {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(64, 158, 255, 0.45);
|
|
box-shadow: 0 14px 24px rgba(64, 158, 255, 0.12);
|
|
}
|
|
|
|
.app-card-top,
|
|
.app-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.app-card-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.app-name {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--surface-text);
|
|
}
|
|
|
|
.app-card-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.app-worker-type {
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(64, 158, 255, 0.12);
|
|
color: #409eff;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.app-stage {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.app-summary {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: #526071;
|
|
text-align: left;
|
|
}
|
|
|
|
.app-meta {
|
|
font-size: 12px;
|
|
color: var(--surface-muted);
|
|
}
|
|
|
|
.progress-track {
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: rgba(15, 23, 42, 0.06);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.workspace-column {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.workspace-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px 20px 12px;
|
|
background: #fff;
|
|
border-bottom: 1px solid var(--surface-border);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.workspace-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid rgba(228, 231, 237, 0.95);
|
|
border-radius: 999px;
|
|
background: #f8fafc;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
color: #526071;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.workspace-tab.active {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
border-color: rgba(64, 158, 255, 0.4);
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
.close-icon {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.workspace-stage {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
padding: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.bottom-panel {
|
|
background: #fff;
|
|
border-top: 1px solid var(--surface-border);
|
|
}
|
|
|
|
.bottom-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
.bottom-panel-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.bottom-tab {
|
|
border: none;
|
|
background: #f2f6fa;
|
|
border-radius: 999px;
|
|
padding: 7px 10px;
|
|
cursor: pointer;
|
|
color: #63768a;
|
|
}
|
|
|
|
.bottom-tab.active {
|
|
background: rgba(64, 158, 255, 0.12);
|
|
color: var(--el-color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bottom-panel-body {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
padding: 0 18px 18px;
|
|
}
|
|
|
|
.bottom-log-item {
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(228, 231, 237, 0.9);
|
|
background: #f8fafc;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: #526071;
|
|
}
|
|
</style>
|