simon/wecom_it_smart_desk
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 2026-07-12~13 全量更新 - AI对话链路改造+H5 v4/v5+坐席端v5+上下文感知诊断+知识库迭代3

Browse Source 
## H5 员工端 v4 (2026-07-13 00:48 已部署)
- 人工按钮三态文案统一为"人工坐席"
- 按钮位置移至发送键和语音按钮上方(垂直堆叠)
- 点按钮直接调 store.shakeAgent()，删除 CallAgentModal 弹窗动画
- 截图快捷键提示改为"截图->粘贴：Alt+Shift+A-Ctrl+V ---> Ctrl+V"
- 移动端隐藏截图提示(CSS 媒体查询)
- AI转人工提示改为"已为您呼叫人工坐席，请稍等!"
- 坐席接入提示改为"坐席正在查看您的信息，请等待处理回复！"
- 删除"摇铃呼叫坐席"入口和文案
- 删除孤儿组件 MessageList.vue + shake 动画 CSS

## H5 员工端 v5 (2026-07-13 02:08 已部署)
- RightPanel v2.1：删除"软件安装"和"资源权限"标签页
- 移除标签栏，智能推荐(DynamicRecommend)直接展示
- 删除 SoftwareDownloads/ApprovalLinks 引用和相关 CSS

## AI 对话链路全栈改造 Phase 1-6 (已部署)
- Phase 1: Dify JSON输出 + 后端blocking解析 + 双WS推送 + 错误降级
- Phase 2: 关键词收窄(~25强意图词) + 两级分类Prompt + 删除前端checkApprovalIntent
- Phase 3: WS扩展(ai_thinking+dynamic_recommend) + ai_structured气泡 + RightPanel v2 + 选项回传
- Phase 4: VisionService接入 + 图片消息融合(5秒窗口) + 降级策略
- Phase 5: 坐席端ai_thinking指示器 + ai_structured/byod_card渲染 + handleNewMessage修复
- Phase 6: diagnosis_stage(6值) + response_time_ms计时 + 慢响应告警(>10s)

## 坐席端 v5 (2026-07-13 01:38 已部署)
- ai_structured/byod_card 只读渲染
- AI思考指示器 UI
- handleNewMessage 透传 msg_type/extra_data 修复
- 布局优化v2.0: QuickReplyBar L1+L2悬浮 + ReplyBox左右分区 + 右栏260/560px切换
- 键盘快捷键v2.3: 纯数字路由 + ESC分层撤销 + Shift+Space用event.code

## 上下文感知智能诊断闭环 (2026-07-12 已部署)
- 三层诊断(API→Script→AI) + 三段排队(VIP→info_locked→not locked)
- 答题插队 + 五场景关闭
- 迁移052(6表+6列) + queue_service + quiz_service + closing_service
- H5前端: QueueWaiting + RightPanel双Tab + InputBar三态 + ResolveConfirmCard
- 坐席前端: pending_close结单流程 + 信息锁定(Dify步骤完成+有效回答率≥70%)

## 知识库迭代3 (2026-07-12 已部署)
- 分诊交互(H5+坐席+Dify独立应用)
- 拓扑预览(ECharts只读)
- 代答排除(4种匹配器: keyword/regex/intent/category)
- 迁移051 + 44文件43测试通过

## 后端变更
- 6个Python文件改造(h5_ai_task.py/h5.py/ai_service.py/closing_service.py等)
- funny_phrase_service.py: shake/connected/keyword 默认文案更新
- session_service.py: 企微消息文案同步
- 新增: queue.py/quiz.py/triage.py/exclusion_rules.py 等API端点
- 新增: diagnostic.py/quiz.py/triage_session.py 等模型
- 新增: closing_service/queue_service/quiz_service/triage_service 等服务

## 文档更新
- CHANGELOG.md: 新增 [未发布] 区全部变更记录
- 项目管理主文档 v2.5: 新增v0.7.3版本 + 已完成看板 + 最近搞定
- 版本记录: 新增v0.7.3条目
- AI对话链路实施计划: Phase 1-6 全部标记✅已实施
- 新增架构图/时序图/类图(mermaid)

## 部署路径修正
- 服务器项目根路径: /opt/wecom-it-desk/
- 所有前端dist均为ro bind mount，只能在宿主机源路径操作
- 服务器nginx /h5/ 是静态文件服务(非proxy_pass)
- elFinder上传二进制不可靠(MD5不匹配)，改用base64分块上传
This commit is contained in:
Simon
2026-07-13 02:17:03 +08:00
parent bea288e414
commit 449c6d4875
176 changed files with 46637 additions and 4805 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-admin/src/views/ExclusionRules.vue
+522
View File
@@ -0,0 +1,522 @@
<!--
=============================================================================
企微IT智能服务台 — 代答排除规则管理页
=============================================================================
说明：管理代答排除规则的增删改查、启停、测试匹配
- 顶部统计卡片：启用/停用规则数、本月命中/转人工次数
- 筛选栏：状态/匹配方式/优先级/关键词搜索
- 表格：规则列表，支持编辑/删除/启停/测试匹配
- 分页：支持每页 10/20/50 条
-->
<template>
<div class="exclusion-rules-page">
<!-- 页面标题 -->
<div class="page-title">代答排除规则</div>
<div class="page-desc">
配置规则在 AI 回复前拦截特定消息，按优先级（P0 &gt; P1 &gt; P2 &gt; P3）依次匹配，命中后执行转人工或提示操作。
</div>
<!-- ================================================================ -->
<!-- 统计卡片 -->
<!-- ================================================================ -->
<div class="stats-cards">
<div class="stat-card">
<div class="stat-value stat-enabled">{{ stats.enabled_count }}</div>
<div class="stat-label">启用规则</div>
</div>
<div class="stat-card">
<div class="stat-value stat-disabled">{{ stats.disabled_count }}</div>
<div class="stat-label">停用规则</div>
</div>
<div class="stat-card">
<div class="stat-value stat-hits">{{ stats.monthly_hits }}</div>
<div class="stat-label">本月命中</div>
</div>
<div class="stat-card">
<div class="stat-value stat-transfers">{{ stats.monthly_transfers }}</div>
<div class="stat-label">本月转人工</div>
</div>
</div>
<!-- ================================================================ -->
<!-- 筛选栏 -->
<!-- ================================================================ -->
<div class="filter-bar">
<el-select
v-model="filters.status"
placeholder="状态"
clearable
style="width: 120px"
@change="handleSearch"
>
<el-option label="启用" value="enabled" />
<el-option label="停用" value="disabled" />
</el-select>
<el-select
v-model="filters.match_type"
placeholder="匹配方式"
clearable
style="width: 140px"
@change="handleSearch"
>
<el-option label="关键词" value="keyword" />
<el-option label="正则表达式" value="regex" />
<el-option label="意图识别" value="intent" />
<el-option label="分类匹配" value="category" />
</el-select>
<el-select
v-model="filters.priority"
placeholder="优先级"
clearable
style="width: 120px"
@change="handleSearch"
>
<el-option label="P0" value="P0" />
<el-option label="P1" value="P1" />
<el-option label="P2" value="P2" />
<el-option label="P3" value="P3" />
</el-select>
<el-input
v-model="filters.keyword"
placeholder="搜索规则名称 / 描述"
clearable
style="width: 240px"
@keyup.enter="handleSearch"
@clear="handleSearch"
/>
<el-button type="primary" @click="handleSearch">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button @click="handleReset">重置</el-button>
<div class="filter-spacer" />
<el-button type="primary" @click="handleCreate">
<el-icon><Plus /></el-icon>
新建规则
</el-button>
</div>
<!-- ================================================================ -->
<!-- 规则表格 -->
<!-- ================================================================ -->
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%"
row-key="id"
empty-text="暂无排除规则，点击「新建规则」创建"
>
<el-table-column prop="rule_name" label="规则名称" min-width="160" show-overflow-tooltip />
<el-table-column prop="priority" label="优先级" width="80" align="center">
<template #default="{ row }">
<el-tag :type="priorityTagType(row.priority)" size="small" effect="dark">
{{ row.priority }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="match_type" label="匹配方式" width="110" align="center">
<template #default="{ row }">
{{ matchTypeLabel(row.match_type) }}
</template>
</el-table-column>
<el-table-column prop="match_condition" label="匹配条件" min-width="200" show-overflow-tooltip />
<el-table-column prop="action_type" label="命中动作" width="140" align="center">
<template #default="{ row }">
<el-tag :type="actionTagType(row.action_type)" size="small">
{{ actionLabel(row.action_type) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="hit_count" label="命中次数" width="90" align="center" />
<el-table-column prop="status" label="状态" width="80" align="center">
<template #default="{ row }">
<el-switch
:model-value="row.status === 'enabled'"
:loading="row._toggling"
@change="(val: boolean) => handleToggle(row, val)"
/>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" width="170" align="center">
<template #default="{ row }">
{{ formatTime(row.created_at) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right" align="center">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="handleTest(row)">测试</el-button>
<el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- ================================================================ -->
<!-- 分页 -->
<!-- ================================================================ -->
<div class="pagination-bar">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.page_size"
:total="pagination.total"
:page-sizes="[10, 20, 50]"
layout="total, sizes, prev, pager, next"
@size-change="fetchData"
@current-change="fetchData"
/>
</div>
<!-- ================================================================ -->
<!-- 新建/编辑对话框 -->
<!-- ================================================================ -->
<ExclusionRuleForm
v-model:visible="formVisible"
:mode="formMode"
:rule="editingRule"
@success="handleFormSuccess"
/>
<!-- ================================================================ -->
<!-- 测试匹配对话框 -->
<!-- ================================================================ -->
<ExclusionTestDialog
v-model:visible="testVisible"
:rule-id="testingRuleId"
:rule-name="testingRuleName"
/>
</div>
</template>
<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import ExclusionRuleForm from '@/components/exclusion/ExclusionRuleForm.vue'
import ExclusionTestDialog from '@/components/exclusion/ExclusionTestDialog.vue'
import {
getExclusionRules,
deleteExclusionRule,
toggleExclusionRule,
getExclusionStats,
} from '@/api/exclusion'
import type { ExclusionRule, ExclusionStats } from '@/api/exclusion'
// ==========================================================================
// 统计数据
// ==========================================================================
const stats = reactive<ExclusionStats>({
enabled_count: 0,
disabled_count: 0,
monthly_hits: 0,
monthly_transfers: 0,
})
// ==========================================================================
// 筛选条件
// ==========================================================================
const filters = reactive({
status: '',
match_type: '',
priority: '',
keyword: '',
})
// ==========================================================================
// 分页
// ==========================================================================
const pagination = reactive({
page: 1,
page_size: 20,
total: 0,
})
// ==========================================================================
// 表格数据
// ==========================================================================
const tableData = ref<ExclusionRule[]>([])
const loading = ref<boolean>(false)
// ==========================================================================
// 表单对话框
// ==========================================================================
const formVisible = ref<boolean>(false)
const formMode = ref<'create' | 'edit'>('create')
const editingRule = ref<ExclusionRule | null>(null)
// ==========================================================================
// 测试对话框
// ==========================================================================
const testVisible = ref<boolean>(false)
const testingRuleId = ref<string | undefined>(undefined)
const testingRuleName = ref<string>('')
// ==========================================================================
// 常量映射
// ==========================================================================
/** 优先级 → Tag 类型 */
function priorityTagType(priority: string): 'danger' | 'warning' | 'info' | 'success' {
const map: Record<string, 'danger' | 'warning' | 'info' | 'success'> = {
P0: 'danger',
P1: 'warning',
P2: 'info',
P3: 'success',
}
return map[priority] || 'info'
}
/** 匹配方式 → 中文标签 */
function matchTypeLabel(type: string): string {
const map: Record<string, string> = {
keyword: '关键词',
regex: '正则表达式',
intent: '意图识别',
category: '分类匹配',
}
return map[type] || type
}
/** 动作类型 → 中文标签 */
function actionLabel(type: string): string {
const map: Record<string, string> = {
transfer_human: '转人工',
transfer_human_with_context: '转人工(带上下文)',
prompt_transfer: '提示转人工',
silent_transfer: '静默转人工',
}
return map[type] || type
}
/** 动作类型 → Tag 类型 */
function actionTagType(type: string): 'danger' | 'warning' | 'info' | 'success' {
const map: Record<string, 'danger' | 'warning' | 'info' | 'success'> = {
transfer_human: 'danger',
transfer_human_with_context: 'danger',
prompt_transfer: 'warning',
silent_transfer: 'info',
}
return map[type] || 'info'
}
/** 格式化时间 */
function formatTime(timeStr: string | null): string {
if (!timeStr) return '-'
try {
const dt = new Date(timeStr)
const y = dt.getFullYear()
const m = String(dt.getMonth() + 1).padStart(2, '0')
const d = String(dt.getDate()).padStart(2, '0')
const h = String(dt.getHours()).padStart(2, '0')
const min = String(dt.getMinutes()).padStart(2, '0')
return `${y}-${m}-${d} ${h}:${min}`
} catch {
return timeStr
}
}
// ==========================================================================
// 数据获取
// ==========================================================================
/** 获取规则列表 */
async function fetchData(): Promise<void> {
loading.value = true
try {
const data = await getExclusionRules({
status: filters.status || undefined,
match_type: filters.match_type || undefined,
priority: filters.priority || undefined,
keyword: filters.keyword || undefined,
page: pagination.page,
page_size: pagination.page_size,
})
tableData.value = data.items
pagination.total = data.total
} catch (error) {
console.error('获取排除规则列表失败:', error)
} finally {
loading.value = false
}
}
/** 获取统计数据 */
async function fetchStats(): Promise<void> {
try {
const data = await getExclusionStats()
Object.assign(stats, data)
} catch (error) {
console.error('获取统计概要失败:', error)
}
}
// ==========================================================================
// 筛选操作
// ==========================================================================
/** 查询（重置到第一页） */
function handleSearch(): void {
pagination.page = 1
fetchData()
}
/** 重置筛选 */
function handleReset(): void {
filters.status = ''
filters.match_type = ''
filters.priority = ''
filters.keyword = ''
pagination.page = 1
fetchData()
}
// ==========================================================================
// CRUD 操作
// ==========================================================================
/** 打开新建对话框 */
function handleCreate(): void {
formMode.value = 'create'
editingRule.value = null
formVisible.value = true
}
/** 打开编辑对话框 */
function handleEdit(row: ExclusionRule): void {
formMode.value = 'edit'
editingRule.value = { ...row }
formVisible.value = true
}
/** 表单保存成功回调 */
function handleFormSuccess(): void {
formVisible.value = false
fetchData()
fetchStats()
}
/** 删除规则 */
async function handleDelete(row: ExclusionRule): Promise<void> {
try {
await ElMessageBox.confirm(
`确定要删除规则「${row.rule_name}」吗？此操作不可恢复。`,
'删除确认',
{ confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' },
)
} catch {
return // 用户取消
}
try {
await deleteExclusionRule(row.id)
ElMessage.success('删除成功')
fetchData()
fetchStats()
} catch (error) {
console.error('删除规则失败:', error)
}
}
/** 启用/停用切换 */
async function handleToggle(row: ExclusionRule, enabled: boolean): Promise<void> {
const newStatus = enabled ? 'enabled' : 'disabled'
// 使用响应式标记，避免 el-switch 闪烁
row._toggling = true
try {
await toggleExclusionRule(row.id, newStatus)
row.status = newStatus
ElMessage.success(`规则已${enabled ? '启用' : '停用'}`)
fetchStats()
} catch (error) {
console.error('切换状态失败:', error)
} finally {
row._toggling = false
}
}
// ==========================================================================
// 测试匹配
// ==========================================================================
/** 打开测试对话框（指定规则） */
function handleTest(row: ExclusionRule): void {
testingRuleId.value = row.id
testingRuleName.value = row.rule_name
testVisible.value = true
}
// ==========================================================================
// 初始化
// ==========================================================================
onMounted(() => {
fetchData()
fetchStats()
})
</script>
<style scoped>
/* 统计卡片 */
.stats-cards {
display: flex;
gap: 16px;
margin-bottom: 20px;
}
.stat-card {
flex: 1;
background: var(--bg-primary, #fff);
border: 1px solid var(--border, #e4e7ed);
border-radius: 8px;
padding: 16px 20px;
text-align: center;
}
.stat-value {
font-size: 28px;
font-weight: 700;
margin-bottom: 4px;
}
.stat-enabled {
color: #67c23a;
}
.stat-disabled {
color: #909399;
}
.stat-hits {
color: #409eff;
}
.stat-transfers {
color: #e6a23c;
}
.stat-label {
font-size: 13px;
color: var(--text-secondary, #909399);
}
/* 筛选栏 */
.filter-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.filter-spacer {
flex: 1;
}
/* 分页 */
.pagination-bar {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
</style>
frontend-admin/src/views/TopologyPreview.vue
+363
View File
@@ -0,0 +1,363 @@
<!--
=============================================================================
企微IT智能服务台 — 拓扑预览主页面
=============================================================================
说明：页面容器，布局为：
顶部统计栏 + 工具栏 + 主区域（左画布 + 右详情面板）
- 统计栏：节点总数、Issue 数、Action 数、关系数
- 加载数据：调用 topology.ts 的 fetchGraph
- 交互联动：
· GraphToolbar 搜索 → GraphCanvas.highlightSearch
· GraphToolbar 筛选 → GraphCanvas.applyFilter
· GraphCanvas 节点点击 → NodeDetailPanel 显示详情
· GraphToolbar 缩放 → GraphCanvas resize
- 空状态处理：Neo4j 不可用时 API 返回空数组，展示空状态引导
- loading 状态：数据加载时显示 loading
=============================================================================
-->
<template>
<div class="topology-preview-page">
<!-- 页面标题 -->
<div class="topology-preview-page__header">
<h2>🔍 知识图谱拓扑预览</h2>
<div class="topology-preview-page__header-actions">
<el-input
v-model="issueFilter"
placeholder="按 Issue 名称筛选子图（留空查全图）"
size="default"
style="width: 280px"
clearable
@change="loadGraphData"
/>
<el-button :loading="loading" @click="loadGraphData">
<el-icon><Refresh /></el-icon>
刷新
</el-button>
</div>
</div>
<!-- 统计栏 -->
<div class="topology-preview-page__stats-bar">
<div class="topology-preview-page__stat-item">
<span class="topology-preview-page__stat-value">{{
stats.totalNodes
}}</span>
<span class="topology-preview-page__stat-label">节点总数</span>
</div>
<div class="topology-preview-page__stat-item">
<span
class="topology-preview-page__stat-dot"
style="background: #07C160"
></span>
<span class="topology-preview-page__stat-value">{{
stats.issueCount
}}</span>
<span class="topology-preview-page__stat-label">Issue</span>
</div>
<div class="topology-preview-page__stat-item">
<span
class="topology-preview-page__stat-dot"
style="background: #f59e0b"
></span>
<span class="topology-preview-page__stat-value">{{
stats.actionCount
}}</span>
<span class="topology-preview-page__stat-label">Action</span>
</div>
<div class="topology-preview-page__stat-item">
<span class="topology-preview-page__stat-value">{{
stats.linkCount
}}</span>
<span class="topology-preview-page__stat-label">关系数</span>
</div>
</div>
<!-- 工具栏 -->
<GraphToolbar
@search="handleSearch"
@filter-change="handleFilterChange"
@zoom-in="handleZoomIn"
@zoom-out="handleZoomOut"
@zoom-reset="handleZoomReset"
/>
<!-- 主区域：左画布 + 右详情面板 -->
<div class="topology-preview-page__main">
<!-- 画布区 -->
<div
class="topology-preview-page__canvas-wrapper"
v-loading="loading"
element-loading-text="加载图谱数据..."
>
<!-- 空状态 -->
<div
v-if="!loading && (!graphData || graphData.nodes.length === 0)"
class="topology-preview-page__empty"
>
<el-icon :size="48" color="#c0c4cc"><DataLine /></el-icon>
<p class="topology-preview-page__empty-title">暂无图谱数据</p>
<p class="topology-preview-page__empty-desc">
Neo4j 可能未启动或知识库尚未同步图谱数据
</p>
<el-button type="primary" plain @click="loadGraphData">
重新加载
</el-button>
</div>
<!-- 图谱画布 -->
<GraphCanvas
v-show="!loading && graphData && graphData.nodes.length > 0"
ref="graphCanvasRef"
:graph-data="graphData"
:loading="loading"
@node-click="handleNodeClick"
/>
</div>
<!-- 右侧详情面板 -->
<div class="topology-preview-page__detail-wrapper">
<NodeDetailPanel
:node="selectedNode"
:links="graphData?.links || []"
:nodes="graphData?.nodes || []"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Refresh, DataLine } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import GraphCanvas from '@/components/topology/GraphCanvas.vue'
import GraphToolbar from '@/components/topology/GraphToolbar.vue'
import NodeDetailPanel from '@/components/topology/NodeDetailPanel.vue'
import { fetchGraph } from '@/api/topology'
import type { GraphData, GraphNode } from '@/api/topology'
// =============================================================================
// 状态
// =============================================================================
const loading = ref(false)
const issueFilter = ref('')
const graphData = ref<GraphData | null>(null)
const selectedNode = ref<GraphNode | null>(null)
// 组件 ref
const graphCanvasRef = ref<InstanceType<typeof GraphCanvas> | null>(null)
// 统计数据
const stats = reactive({
totalNodes: 0,
issueCount: 0,
actionCount: 0,
linkCount: 0,
})
// =============================================================================
// 加载图谱数据
// =============================================================================
async function loadGraphData() {
loading.value = true
selectedNode.value = null
try {
const params: { issue_name?: string; limit?: number } = {
limit: 200,
}
if (issueFilter.value.trim()) {
params.issue_name = issueFilter.value.trim()
}
const data = await fetchGraph(params)
// 处理空数据降级
const safeData: GraphData = {
nodes: data?.nodes || [],
links: data?.links || [],
}
graphData.value = safeData
updateStats(safeData)
} catch (err: any) {
console.error('获取图谱数据失败:', err)
ElMessage.error(err?.message || '获取图谱数据失败')
graphData.value = { nodes: [], links: [] }
updateStats(graphData.value)
} finally {
loading.value = false
}
}
// =============================================================================
// 更新统计数据
// =============================================================================
function updateStats(data: GraphData) {
stats.totalNodes = data.nodes.length
stats.issueCount = data.nodes.filter((n) => n.type === 'issue').length
stats.actionCount = data.nodes.filter((n) => n.type === 'action').length
stats.linkCount = data.links.length
}
// =============================================================================
// 交互联动：搜索
// =============================================================================
function handleSearch(keyword: string) {
if (!keyword) {
graphCanvasRef.value?.restoreAllNodes()
} else {
graphCanvasRef.value?.highlightSearch(keyword)
}
}
// =============================================================================
// 交互联动：筛选
// =============================================================================
function handleFilterChange(filter: {
nodeTypes: string[]
relationTypes: string[]
}) {
graphCanvasRef.value?.applyFilter(filter)
}
// =============================================================================
// 交互联动：节点点击
// =============================================================================
function handleNodeClick(node: GraphNode) {
selectedNode.value = node
}
// =============================================================================
// 交互联动：缩放控制
// =============================================================================
function handleZoomIn() {
graphCanvasRef.value?.zoomIn()
}
function handleZoomOut() {
graphCanvasRef.value?.zoomOut()
}
function handleZoomReset() {
graphCanvasRef.value?.zoomReset()
}
// =============================================================================
// 生命周期
// =============================================================================
onMounted(() => {
loadGraphData()
})
</script>
<style scoped>
.topology-preview-page {
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
gap: 12px;
}
/* 页面标题 */
.topology-preview-page__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.topology-preview-page__header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.topology-preview-page__header-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* 统计栏 */
.topology-preview-page__stats-bar {
display: flex;
gap: 12px;
}
.topology-preview-page__stat-item {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: #f5f7fa;
border-radius: 8px;
min-width: 100px;
}
.topology-preview-page__stat-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.topology-preview-page__stat-value {
font-size: 24px;
font-weight: 700;
color: #303133;
}
.topology-preview-page__stat-label {
font-size: 12px;
color: #909399;
}
/* 主区域 */
.topology-preview-page__main {
display: flex;
gap: 12px;
flex: 1;
min-height: 0;
}
.topology-preview-page__canvas-wrapper {
flex: 1;
min-width: 0;
position: relative;
min-height: 400px;
}
.topology-preview-page__detail-wrapper {
width: 360px;
flex-shrink: 0;
min-height: 400px;
}
/* 空状态 */
.topology-preview-page__empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #e4e7ed;
}
.topology-preview-page__empty-title {
font-size: 16px;
font-weight: 600;
color: #606266;
margin: 8px 0 0 0;
}
.topology-preview-page__empty-desc {
font-size: 13px;
color: #909399;
margin: 0 0 12px 0;
}
</style>