添加公众号助手

This commit is contained in:
Jackzhou
2026-08-26 10:35:46 +08:00
parent 4f33b036d1
commit b00e55f0e5
16 changed files with 4905 additions and 49 deletions
@@ -0,0 +1,19 @@
import http from './http'
export function createOfficialAccountTask(data) {
return http.post('/official-account/tasks', data)
}
export function getOfficialAccountWorkflow(taskId) {
return http.get(`/official-account/tasks/${taskId}/workflow`)
}
export function updateOfficialAccountTask(taskId, data) {
return http.put(`/official-account/tasks/${taskId}`, data)
}
export function executeOfficialAccountWorkflowStep(taskId, stepKey, data) {
return http.post(`/official-account/tasks/${taskId}/steps/${stepKey}`, data, {
timeout: 0,
})
}
@@ -92,6 +92,20 @@ export const businessApps = [
stage: '报告汇总',
progress: 76,
},
{
key: 'wechat-official-account',
label: '公众号助手',
tier: 'generic',
workerType: 'dw',
marketTag: '已安装',
route: '/apps/wechat-official-account',
summary: '热点选题、标题、提纲、正文四步创作工作流',
status: '4 个节点可执行',
risk: '0 个异常',
color: '#2563eb',
stage: '正文创作',
progress: 0,
},
{
key: 'logistics-fulfillment',
label: '履约跟单专员',
+426 -15
View File
@@ -49,16 +49,54 @@
</header>
<div class="shell-body">
<nav class="nav-sidebar">
<nav class="nav-sidebar" :class="{ collapsed: topNavCollapsed }">
<button
v-for="item in visibleTopNavItems"
:key="item.key"
class="nav-sidebar-item"
:class="{ active: activeSurface === item.key }"
@click="router.push(item.route)"
class="sidebar-toggle drawer-handle"
:title="topNavCollapsed ? '展开模块' : '收起模块'"
:aria-label="topNavCollapsed ? '展开模块' : '收起模块'"
@click="toggleTopNavCollapsed"
>
{{ item.label }}
<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">
@@ -82,7 +120,24 @@
</div>
<div class="workspace-body">
<aside v-if="activeSurface === 'apps'" class="left-rail">
<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>
@@ -97,7 +152,12 @@
@click="router.push(app.route)"
>
<div class="app-card-top">
<span class="app-name">{{ app.label }}</span>
<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>
@@ -121,7 +181,12 @@
@click="router.push(app.route)"
>
<div class="app-card-top">
<span class="app-name">{{ app.label }}</span>
<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>
@@ -150,8 +215,15 @@
:class="{ active: route.path === item.route }"
@click="router.push(item.route)"
>
<span>{{ item.label }}</span>
<small>{{ item.caption }}</small>
<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>
@@ -168,7 +240,12 @@
@click="workbench.setSelectedCase(appKey, item.id)"
>
<div class="case-top">
<span class="case-title">{{ item.title }}</span>
<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>
@@ -191,9 +268,82 @@
:class="{ active: route.path === item.route }"
@click="router.push(item.route)"
>
<span>{{ item.label }}</span>
<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">
@@ -239,7 +389,7 @@
<script setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Bell, Close, Search } from '@element-plus/icons-vue'
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'
@@ -322,6 +472,16 @@ 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)
@@ -463,6 +623,43 @@ function formatDueAt(value) {
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>
@@ -618,6 +815,74 @@ function formatDueAt(value) {
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 {
@@ -633,12 +898,65 @@ function formatDueAt(value) {
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;
@@ -672,6 +990,63 @@ function formatDueAt(value) {
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 {
@@ -714,6 +1089,21 @@ function formatDueAt(value) {
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;
@@ -757,12 +1147,24 @@ function formatDueAt(value) {
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;
@@ -815,6 +1217,13 @@ function formatDueAt(value) {
gap: 12px;
}
.app-card-title {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.app-name {
font-size: 14px;
font-weight: 700;
@@ -910,6 +1319,8 @@ function formatDueAt(value) {
flex: 1;
min-height: 0;
overflow: auto;
padding: 12px;
padding: 20px;
padding: 20px;
}
+1
View File
@@ -23,6 +23,7 @@ const routes = [
{ path: 'apps/knowledge-operations', name: 'KnowledgeOperationsApp', meta: { workspaceKey: 'knowledge-operations' }, component: () => import('@/views/workbench/BusinessAppPage.vue') },
{ path: 'apps/process-coordination', name: 'ProcessCoordinationApp', meta: { workspaceKey: 'process-coordination' }, component: () => import('@/views/workbench/BusinessAppPage.vue') },
{ path: 'apps/report-generation', name: 'ReportGenerationApp', meta: { workspaceKey: 'report-generation' }, component: () => import('@/views/workbench/BusinessAppPage.vue') },
{ path: 'apps/wechat-official-account', name: 'WechatOfficialAccountApp', meta: { workspaceKey: 'wechat-official-account' }, component: () => import('@/views/workbench/OfficialAccountWorkflowPage.vue') },
{ path: 'apps/logistics-fulfillment', name: 'LogisticsFulfillmentApp', meta: { workspaceKey: 'logistics-fulfillment' }, component: () => import('@/views/workbench/BusinessAppPage.vue') },
{ path: 'apps/hr-email-sorter', name: 'HrEmailSorter', meta: { workspaceKey: 'hr-email-sorter' }, component: () => import('@/views/workbench/BusinessAppPage.vue') },
{ path: 'apps/resume-processor', name: 'ResumeProcessor', meta: { workspaceKey: 'resume-processor' }, component: () => import('@/views/workbench/BusinessAppPage.vue') },
File diff suppressed because it is too large Load Diff