feat: 2026-07-12~13 全量更新 - AI对话链路改造+H5 v4/v5+坐席端v5+上下文感知诊断+知识库迭代3
## 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
@@ -0,0 +1,147 @@
|
||||
// =============================================================================
|
||||
// 企微IT智能服务台 — 管理后台代答排除 API 封装
|
||||
// =============================================================================
|
||||
// 说明：封装 8 个管理 API 调用
|
||||
// =============================================================================
|
||||
|
||||
import request from './index'
|
||||
|
||||
/** 排除规则 */
|
||||
export interface ExclusionRule {
|
||||
id: string
|
||||
rule_name: string
|
||||
rule_description: string | null
|
||||
priority: string
|
||||
match_type: string
|
||||
match_condition: string
|
||||
match_scope: string[]
|
||||
action_type: string
|
||||
transfer_message: string | null
|
||||
status: string
|
||||
hit_count: number
|
||||
created_by: string
|
||||
created_at: string | null
|
||||
updated_at: string | null
|
||||
/** UI 状态：开关切换中标记（非后端字段） */
|
||||
_toggling?: boolean
|
||||
}
|
||||
|
||||
/** 新建/编辑规则参数 */
|
||||
export interface ExclusionRuleFormData {
|
||||
rule_name: string
|
||||
rule_description?: string
|
||||
priority: string
|
||||
match_type: string
|
||||
match_condition: string
|
||||
match_scope: string[]
|
||||
action_type: string
|
||||
transfer_message?: string
|
||||
}
|
||||
|
||||
/** 列表查询参数 */
|
||||
export interface ExclusionRuleQuery {
|
||||
status?: string
|
||||
match_type?: string
|
||||
priority?: string
|
||||
keyword?: string
|
||||
page: number
|
||||
page_size: number
|
||||
}
|
||||
|
||||
/** 测试匹配参数 */
|
||||
export interface ExclusionTestParams {
|
||||
message: string
|
||||
rule_id?: string
|
||||
}
|
||||
|
||||
/** 测试匹配结果 */
|
||||
export interface ExclusionTestResult {
|
||||
matched: boolean
|
||||
matched_detail: string | null
|
||||
rule_name: string | null
|
||||
action_type: string | null
|
||||
}
|
||||
|
||||
/** 统计概要 */
|
||||
export interface ExclusionStats {
|
||||
enabled_count: number
|
||||
disabled_count: number
|
||||
monthly_hits: number
|
||||
monthly_transfers: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取排除规则列表
|
||||
* GET /api/admin/exclusion-rules
|
||||
*/
|
||||
export function getExclusionRules(
|
||||
params: ExclusionRuleQuery,
|
||||
): Promise<{ total: number; items: ExclusionRule[] }> {
|
||||
return request.get('/admin/exclusion-rules', { params })
|
||||
}
|
||||
|
||||
/**
|
||||
* 新建排除规则
|
||||
* POST /api/admin/exclusion-rules
|
||||
*/
|
||||
export function createExclusionRule(
|
||||
data: ExclusionRuleFormData,
|
||||
): Promise<ExclusionRule> {
|
||||
return request.post('/admin/exclusion-rules', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取规则详情
|
||||
* GET /api/admin/exclusion-rules/{id}
|
||||
*/
|
||||
export function getExclusionRuleDetail(id: string): Promise<ExclusionRule> {
|
||||
return request.get(`/admin/exclusion-rules/${id}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑排除规则
|
||||
* PUT /api/admin/exclusion-rules/{id}
|
||||
*/
|
||||
export function updateExclusionRule(
|
||||
id: string,
|
||||
data: Partial<ExclusionRuleFormData>,
|
||||
): Promise<ExclusionRule> {
|
||||
return request.put(`/admin/exclusion-rules/${id}`, data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除排除规则
|
||||
* DELETE /api/admin/exclusion-rules/{id}
|
||||
*/
|
||||
export function deleteExclusionRule(id: string): Promise<void> {
|
||||
return request.delete(`/admin/exclusion-rules/${id}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 启用/停用规则
|
||||
* POST /api/admin/exclusion-rules/{id}/toggle
|
||||
*/
|
||||
export function toggleExclusionRule(
|
||||
id: string,
|
||||
status: string,
|
||||
): Promise<ExclusionRule> {
|
||||
return request.post(`/admin/exclusion-rules/${id}/toggle`, { status })
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试匹配
|
||||
* POST /api/admin/exclusion-rules/test
|
||||
*/
|
||||
export function testExclusionMatch(
|
||||
params: ExclusionTestParams,
|
||||
): Promise<ExclusionTestResult> {
|
||||
return request.post('/admin/exclusion-rules/test', params)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取统计概要
|
||||
* GET /api/admin/exclusion-rules/stats
|
||||
*/
|
||||
export function getExclusionStats(): Promise<ExclusionStats> {
|
||||
return request.get('/admin/exclusion-rules/stats')
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// =============================================================================
|
||||
// 企微IT智能服务台 — 拓扑预览 API 封装（管理后台）
|
||||
// =============================================================================
|
||||
// 说明：封装 GET /api/admin/knowledge-iteration/graph 调用
|
||||
// - 不带 issue_name：返回全图（limit 控制节点数）
|
||||
// - 带 issue_name：返回该 Issue 的子图（depth=1）
|
||||
// 响应格式：{ code: 0, data: { nodes: [...], links: [...] } }
|
||||
// 认证：管理员 token（由 api/index.ts 拦截器自动注入）
|
||||
// =============================================================================
|
||||
|
||||
import apiClient from './index'
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 类型定义
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/** 图谱节点 */
|
||||
export interface GraphNode {
|
||||
/** 节点唯一 ID（Neo4j elementId 或 UUID） */
|
||||
id: string
|
||||
/** 节点显示名称 */
|
||||
name: string
|
||||
/** 节点类型：issue | action | relation */
|
||||
type: string
|
||||
/** 节点附加属性 */
|
||||
properties?: Record<string, any>
|
||||
}
|
||||
|
||||
/** 图谱关系（边） */
|
||||
export interface GraphLink {
|
||||
/** 源节点 ID */
|
||||
source: string
|
||||
/** 目标节点 ID */
|
||||
target: string
|
||||
/** 关系类型：LEADS_TO | RELATES_TO | CAN_JUMP_TO | DERIVED_FROM */
|
||||
type: string
|
||||
/** 关系权重（影响线条粗细） */
|
||||
weight?: number
|
||||
}
|
||||
|
||||
/** 图谱完整数据 */
|
||||
export interface GraphData {
|
||||
nodes: GraphNode[]
|
||||
links: GraphLink[]
|
||||
}
|
||||
|
||||
/** fetchGraph 请求参数 */
|
||||
export interface FetchGraphParams {
|
||||
/** 按 Issue 名称筛选子图（留空查全图） */
|
||||
issue_name?: string
|
||||
/** 返回节点数上限，默认 200 */
|
||||
limit?: number
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API 函数
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* 获取知识图谱数据
|
||||
*
|
||||
* - 不传 issue_name：返回全图
|
||||
* - 传 issue_name：返回该 Issue 的子图（depth=1）
|
||||
*
|
||||
* 响应拦截器已自动解包 { code, data } 中的 data，直接返回 GraphData。
|
||||
*/
|
||||
export function fetchGraph(params?: FetchGraphParams): Promise<GraphData> {
|
||||
return apiClient.get('/admin/knowledge-iteration/graph', { params }) as unknown as Promise<GraphData>
|
||||
}
|
||||
@@ -131,6 +131,25 @@
|
||||
<span>自动化指标</span>
|
||||
</el-menu-item>
|
||||
|
||||
<!-- 📚 知识迭代 -->
|
||||
<div class="menu-section-title">📚 知识迭代</div>
|
||||
<el-menu-item index="/knowledge-iteration">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span>知识迭代管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/ragflow-ingestion">
|
||||
<el-icon><Upload /></el-icon>
|
||||
<span>RAGFlow文档导入</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/topology-preview">
|
||||
<el-icon><Share /></el-icon>
|
||||
<span>拓扑预览</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/exclusion-rules">
|
||||
<el-icon><Filter /></el-icon>
|
||||
<span>代答排除</span>
|
||||
</el-menu-item>
|
||||
|
||||
<!-- 🔒 开发中（P2占位） -->
|
||||
<div class="menu-section-title">🔒 开发中</div>
|
||||
<el-menu-item index="/themes" class="locked-menu-item">
|
||||
@@ -158,7 +177,7 @@
|
||||
// ==========================================================================
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Headset, PieChart, Switch, UserFilled, Connection, Warning, ChatLineSquare, Sort, Share, Monitor, Brush, DataAnalysis, Reading, Lock, Key, Document, TrendCharts, Notebook, Star, MagicStick, Files } from '@element-plus/icons-vue'
|
||||
import { Headset, PieChart, Switch, UserFilled, Connection, Warning, ChatLineSquare, Sort, Share, Monitor, Brush, DataAnalysis, Reading, Lock, Key, Document, TrendCharts, Notebook, Star, MagicStick, Files, Upload, Filter } from '@element-plus/icons-vue'
|
||||
|
||||
// ==========================================================================
|
||||
// 当前激活菜单
|
||||
|
||||
@@ -0,0 +1,396 @@
|
||||
<!--
|
||||
=============================================================================
|
||||
企微IT智能服务台 — 排除规则新建/编辑表单对话框
|
||||
=============================================================================
|
||||
说明：
|
||||
- 支持 create / edit 两种模式
|
||||
- 匹配方式切换时，匹配条件输入框动态变化：
|
||||
keyword → 逗号分隔关键词输入
|
||||
regex → 正则表达式输入
|
||||
intent → 意图标识输入
|
||||
category → 问题分类输入
|
||||
- 命中动作 transfer_human / transfer_human_with_context 时，
|
||||
转人工提示语为必填；prompt_transfer 时选填；silent_transfer 时隐藏
|
||||
- 优先级 P0（最高）→ P3（最低），默认 P2
|
||||
- match_scope 多选，默认 ai_auto_reply
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="mode === 'create' ? '新建排除规则' : '编辑排除规则'"
|
||||
width="640px"
|
||||
destroy-on-close
|
||||
@update:model-value="$emit('update:visible', $event)"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-position="top"
|
||||
class="exclusion-form"
|
||||
>
|
||||
<!-- 规则名称 -->
|
||||
<el-form-item label="规则名称" prop="rule_name">
|
||||
<el-input
|
||||
v-model="formData.rule_name"
|
||||
placeholder="请输入规则名称，如：投诉类消息转人工"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 规则描述 -->
|
||||
<el-form-item label="规则描述">
|
||||
<el-input
|
||||
v-model="formData.rule_description"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="可选，描述规则用途和命中场景"
|
||||
maxlength="500"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 优先级 + 匹配方式 -->
|
||||
<div class="form-row">
|
||||
<el-form-item label="优先级" prop="priority" class="form-col">
|
||||
<el-select v-model="formData.priority" style="width: 100%">
|
||||
<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-form-item>
|
||||
|
||||
<el-form-item label="匹配方式" prop="match_type" class="form-col">
|
||||
<el-select v-model="formData.match_type" style="width: 100%" @change="handleMatchTypeChange">
|
||||
<el-option label="关键词" value="keyword" />
|
||||
<el-option label="正则表达式" value="regex" />
|
||||
<el-option label="意图识别" value="intent" />
|
||||
<el-option label="分类匹配" value="category" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 匹配条件 — 根据匹配方式动态展示 -->
|
||||
<el-form-item label="匹配条件" prop="match_condition">
|
||||
<!-- 关键词：逗号分隔 -->
|
||||
<template v-if="formData.match_type === 'keyword'">
|
||||
<el-input
|
||||
v-model="formData.match_condition"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="多个关键词用逗号分隔，如：投诉,举报,差评,维权"
|
||||
/>
|
||||
<div class="form-hint">多个关键词用英文逗号分隔，消息中包含任一关键词即命中（不区分大小写）</div>
|
||||
</template>
|
||||
|
||||
<!-- 正则表达式 -->
|
||||
<template v-else-if="formData.match_type === 'regex'">
|
||||
<el-input
|
||||
v-model="formData.match_condition"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="输入正则表达式，如：^.*(投诉|举报).*$"
|
||||
/>
|
||||
<div class="form-hint">使用 Python re 语法，忽略大小写和多行模式。复杂正则设有 2 秒超时保护</div>
|
||||
</template>
|
||||
|
||||
<!-- 意图识别 -->
|
||||
<template v-else-if="formData.match_type === 'intent'">
|
||||
<el-input
|
||||
v-model="formData.match_condition"
|
||||
placeholder="输入意图标识，如：complaint、refund_request"
|
||||
/>
|
||||
<div class="form-hint">
|
||||
系统通过 AI 意图识别模型判断消息意图，匹配此标识即命中。常用意图：complaint / refund_request / cancellation / escalation
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 分类匹配 -->
|
||||
<template v-else-if="formData.match_type === 'category'">
|
||||
<el-input
|
||||
v-model="formData.match_condition"
|
||||
placeholder="输入问题分类名称，如：网络故障、账号异常"
|
||||
/>
|
||||
<div class="form-hint">
|
||||
匹配会话最近一次智能分诊的问题分类。若无分诊记录则不命中
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 匹配范围 -->
|
||||
<el-form-item label="匹配范围">
|
||||
<el-select
|
||||
v-model="formData.match_scope"
|
||||
multiple
|
||||
style="width: 100%"
|
||||
placeholder="选择生效场景"
|
||||
>
|
||||
<el-option label="AI自动回复" value="ai_auto_reply" />
|
||||
<el-option label="AI降级回复" value="ai_fallback" />
|
||||
</el-select>
|
||||
<div class="form-hint">选择该排除规则在哪些 AI 回复场景中生效</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 命中动作 -->
|
||||
<el-form-item label="命中后动作" prop="action_type">
|
||||
<el-radio-group v-model="formData.action_type">
|
||||
<el-radio value="transfer_human">转人工</el-radio>
|
||||
<el-radio value="transfer_human_with_context">转人工（带上下文）</el-radio>
|
||||
<el-radio value="prompt_transfer">提示转人工</el-radio>
|
||||
<el-radio value="silent_transfer">静默转人工</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 转人工提示语 — 条件显示 -->
|
||||
<el-form-item
|
||||
v-if="formData.action_type !== 'silent_transfer'"
|
||||
:label="transferMessageLabel"
|
||||
:prop="formData.action_type === 'transfer_human' || formData.action_type === 'transfer_human_with_context' ? 'transfer_message' : undefined"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.transfer_message"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:placeholder="transferMessagePlaceholder"
|
||||
maxlength="500"
|
||||
/>
|
||||
<div class="form-hint">{{ transferMessageHint }}</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 对话框底部 -->
|
||||
<template #footer>
|
||||
<el-button @click="$emit('update:visible', false)">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">
|
||||
{{ mode === 'create' ? '创建' : '保存' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// ==========================================================================
|
||||
// 依赖导入
|
||||
// ==========================================================================
|
||||
import { ref, reactive, computed, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import {
|
||||
createExclusionRule,
|
||||
updateExclusionRule,
|
||||
} from '@/api/exclusion'
|
||||
import type { ExclusionRule, ExclusionRuleFormData } from '@/api/exclusion'
|
||||
|
||||
// ==========================================================================
|
||||
// Props & Emits
|
||||
// ==========================================================================
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
mode: 'create' | 'edit'
|
||||
rule: ExclusionRule | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
(e: 'success'): void
|
||||
}>()
|
||||
|
||||
// ==========================================================================
|
||||
// 表单引用
|
||||
// ==========================================================================
|
||||
const formRef = ref<FormInstance>()
|
||||
const submitting = ref<boolean>(false)
|
||||
|
||||
// ==========================================================================
|
||||
// 表单数据
|
||||
// ==========================================================================
|
||||
const formData = reactive<ExclusionRuleFormData>({
|
||||
rule_name: '',
|
||||
rule_description: '',
|
||||
priority: 'P2',
|
||||
match_type: 'keyword',
|
||||
match_condition: '',
|
||||
match_scope: ['ai_auto_reply'],
|
||||
action_type: 'transfer_human',
|
||||
transfer_message: '',
|
||||
})
|
||||
|
||||
// ==========================================================================
|
||||
// 计算属性
|
||||
// ==========================================================================
|
||||
|
||||
/** 转人工提示语标签 */
|
||||
const transferMessageLabel = computed<string>(() => {
|
||||
if (formData.action_type === 'prompt_transfer') {
|
||||
return '提示文案'
|
||||
}
|
||||
return '转人工提示语'
|
||||
})
|
||||
|
||||
/** 转人工提示语 placeholder */
|
||||
const transferMessagePlaceholder = computed<string>(() => {
|
||||
if (formData.action_type === 'prompt_transfer') {
|
||||
return '如：检测到您的问题可能需要人工协助，是否转接人工客服？'
|
||||
}
|
||||
return '如：您的问题已转接人工客服，请稍候'
|
||||
})
|
||||
|
||||
/** 转人工提示语 hint */
|
||||
const transferMessageHint = computed<string>(() => {
|
||||
if (formData.action_type === 'prompt_transfer') {
|
||||
return '用户看到的提示消息，不会自动转人工'
|
||||
}
|
||||
return '命中后发送给用户的转接提示消息'
|
||||
})
|
||||
|
||||
// ==========================================================================
|
||||
// 表单校验规则
|
||||
// ==========================================================================
|
||||
const formRules = reactive<FormRules>({
|
||||
rule_name: [
|
||||
{ required: true, message: '请输入规则名称', trigger: 'blur' },
|
||||
{ min: 1, max: 200, message: '规则名称长度 1-200 字符', trigger: 'blur' },
|
||||
],
|
||||
priority: [
|
||||
{ required: true, message: '请选择优先级', trigger: 'change' },
|
||||
],
|
||||
match_type: [
|
||||
{ required: true, message: '请选择匹配方式', trigger: 'change' },
|
||||
],
|
||||
match_condition: [
|
||||
{ required: true, message: '请输入匹配条件', trigger: 'blur' },
|
||||
],
|
||||
action_type: [
|
||||
{ required: true, message: '请选择命中后动作', trigger: 'change' },
|
||||
],
|
||||
transfer_message: [
|
||||
{
|
||||
validator: (_rule: any, value: string, callback: (error?: Error) => void) => {
|
||||
// transfer_human 和 transfer_human_with_context 时必填
|
||||
if (
|
||||
(formData.action_type === 'transfer_human' ||
|
||||
formData.action_type === 'transfer_human_with_context') &&
|
||||
(!value || !value.trim())
|
||||
) {
|
||||
callback(new Error('转人工动作需填写提示语'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// ==========================================================================
|
||||
// 对话框打开 — 初始化表单数据
|
||||
// ==========================================================================
|
||||
function handleOpen(): void {
|
||||
if (props.mode === 'edit' && props.rule) {
|
||||
// 编辑模式：填充已有数据
|
||||
formData.rule_name = props.rule.rule_name
|
||||
formData.rule_description = props.rule.rule_description || ''
|
||||
formData.priority = props.rule.priority
|
||||
formData.match_type = props.rule.match_type
|
||||
formData.match_condition = props.rule.match_condition
|
||||
formData.match_scope = props.rule.match_scope?.length ? [...props.rule.match_scope] : ['ai_auto_reply']
|
||||
formData.action_type = props.rule.action_type
|
||||
formData.transfer_message = props.rule.transfer_message || ''
|
||||
} else {
|
||||
// 新建模式：重置为默认值
|
||||
formData.rule_name = ''
|
||||
formData.rule_description = ''
|
||||
formData.priority = 'P2'
|
||||
formData.match_type = 'keyword'
|
||||
formData.match_condition = ''
|
||||
formData.match_scope = ['ai_auto_reply']
|
||||
formData.action_type = 'transfer_human'
|
||||
formData.transfer_message = ''
|
||||
}
|
||||
// 清除校验状态
|
||||
nextTick(() => {
|
||||
formRef.value?.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// 匹配方式切换 — 清空匹配条件
|
||||
// ==========================================================================
|
||||
function handleMatchTypeChange(): void {
|
||||
formData.match_condition = ''
|
||||
nextTick(() => {
|
||||
formRef.value?.clearValidate('match_condition')
|
||||
})
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// 提交表单
|
||||
// ==========================================================================
|
||||
async function handleSubmit(): Promise<void> {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch {
|
||||
return // 校验未通过
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
// 构建提交数据
|
||||
const submitData: ExclusionRuleFormData = {
|
||||
rule_name: formData.rule_name.trim(),
|
||||
rule_description: formData.rule_description?.trim() || undefined,
|
||||
priority: formData.priority,
|
||||
match_type: formData.match_type,
|
||||
match_condition: formData.match_condition.trim(),
|
||||
match_scope: formData.match_scope,
|
||||
action_type: formData.action_type,
|
||||
transfer_message: formData.transfer_message?.trim() || undefined,
|
||||
}
|
||||
|
||||
if (props.mode === 'create') {
|
||||
await createExclusionRule(submitData)
|
||||
ElMessage.success('规则创建成功')
|
||||
} else {
|
||||
await updateExclusionRule(props.rule!.id, submitData)
|
||||
ElMessage.success('规则更新成功')
|
||||
}
|
||||
|
||||
emit('success')
|
||||
} catch (error: any) {
|
||||
// Axios 拦截器已统一弹窗，此处仅记录日志
|
||||
console.error('提交排除规则失败:', error)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.exclusion-form {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/* 双列表单行 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 表单提示文字 */
|
||||
.form-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #909399);
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,316 @@
|
||||
<!--
|
||||
=============================================================================
|
||||
企微IT智能服务台 — 排除规则测试匹配对话框
|
||||
=============================================================================
|
||||
说明：
|
||||
- 输入测试消息，点击测试按钮调用后端匹配引擎
|
||||
- 可指定 rule_id 测试单条规则，或留空测试所有启用规则
|
||||
- 结果展示：是否命中、命中的规则名称、命中详情、命中后动作
|
||||
- 测试不会记录日志、不会更新 hit_count
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
title="测试匹配"
|
||||
width="560px"
|
||||
destroy-on-close
|
||||
@update:model-value="$emit('update:visible', $event)"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<div class="test-dialog-content">
|
||||
<!-- 规则信息 -->
|
||||
<div v-if="ruleName" class="rule-info">
|
||||
<el-tag type="info" size="small">测试规则</el-tag>
|
||||
<span class="rule-name">{{ ruleName }}</span>
|
||||
</div>
|
||||
<div v-else class="rule-info">
|
||||
<el-tag type="info" size="small">测试范围</el-tag>
|
||||
<span class="rule-name">所有启用规则</span>
|
||||
</div>
|
||||
|
||||
<!-- 消息输入 -->
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="测试消息">
|
||||
<el-input
|
||||
v-model="message"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入要测试的消息文本，模拟用户发送的内容"
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 测试按钮 -->
|
||||
<div class="test-action">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="testing"
|
||||
:disabled="!message.trim()"
|
||||
@click="handleTest"
|
||||
>
|
||||
<el-icon><Aim /></el-icon>
|
||||
执行测试
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 测试结果 -->
|
||||
<div v-if="result" class="test-result">
|
||||
<el-divider />
|
||||
|
||||
<!-- 命中 -->
|
||||
<div v-if="result.matched" class="result-box result-hit">
|
||||
<div class="result-header">
|
||||
<el-icon class="result-icon"><CircleCheckFilled /></el-icon>
|
||||
<span class="result-title">命中排除规则</span>
|
||||
</div>
|
||||
<div class="result-details">
|
||||
<div class="result-row">
|
||||
<span class="result-label">命中规则</span>
|
||||
<span class="result-value">{{ result.rule_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span class="result-label">命中详情</span>
|
||||
<span class="result-value">{{ result.matched_detail || '-' }}</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span class="result-label">命中动作</span>
|
||||
<el-tag :type="actionTagType(result.action_type)" size="small">
|
||||
{{ actionLabel(result.action_type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未命中 -->
|
||||
<div v-else class="result-box result-miss">
|
||||
<div class="result-header">
|
||||
<el-icon class="result-icon"><CircleCloseFilled /></el-icon>
|
||||
<span class="result-title">未命中任何排除规则</span>
|
||||
</div>
|
||||
<div class="result-desc">
|
||||
该消息不会触发代答排除，AI 将正常回复。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 对话框底部 -->
|
||||
<template #footer>
|
||||
<el-button @click="$emit('update:visible', false)">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// ==========================================================================
|
||||
// 依赖导入
|
||||
// ==========================================================================
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Aim, CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue'
|
||||
import { testExclusionMatch } from '@/api/exclusion'
|
||||
import type { ExclusionTestResult } from '@/api/exclusion'
|
||||
|
||||
// ==========================================================================
|
||||
// Props & Emits
|
||||
// ==========================================================================
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
ruleId?: string
|
||||
ruleName?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
}>()
|
||||
|
||||
// ==========================================================================
|
||||
// 响应式状态
|
||||
// ==========================================================================
|
||||
const message = ref<string>('')
|
||||
const testing = ref<boolean>(false)
|
||||
const result = ref<ExclusionTestResult | null>(null)
|
||||
|
||||
// ==========================================================================
|
||||
// 常量映射
|
||||
// ==========================================================================
|
||||
|
||||
/** 动作类型 → 中文标签 */
|
||||
function actionLabel(type: string | null): string {
|
||||
if (!type) return '-'
|
||||
const map: Record<string, string> = {
|
||||
transfer_human: '转人工',
|
||||
transfer_human_with_context: '转人工(带上下文)',
|
||||
prompt_transfer: '提示转人工',
|
||||
silent_transfer: '静默转人工',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
/** 动作类型 → Tag 类型 */
|
||||
function actionTagType(type: string | null): 'danger' | 'warning' | 'info' | 'success' {
|
||||
if (!type) return 'info'
|
||||
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 handleOpen(): void {
|
||||
message.value = ''
|
||||
result.value = null
|
||||
testing.value = false
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// 执行测试
|
||||
// ==========================================================================
|
||||
async function handleTest(): Promise<void> {
|
||||
if (!message.value.trim()) {
|
||||
ElMessage.warning('请输入测试消息')
|
||||
return
|
||||
}
|
||||
|
||||
testing.value = true
|
||||
result.value = null
|
||||
|
||||
try {
|
||||
const data = await testExclusionMatch({
|
||||
message: message.value.trim(),
|
||||
rule_id: props.ruleId,
|
||||
})
|
||||
result.value = data
|
||||
} catch (error: any) {
|
||||
// Axios 拦截器已统一弹窗
|
||||
console.error('测试匹配失败:', error)
|
||||
result.value = {
|
||||
matched: false,
|
||||
matched_detail: null,
|
||||
rule_name: null,
|
||||
action_type: null,
|
||||
}
|
||||
} finally {
|
||||
testing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.test-dialog-content {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* 规则信息 */
|
||||
.rule-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary, #f5f7fa);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary, #303133);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 测试按钮 */
|
||||
.test-action {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 测试结果 */
|
||||
.test-result {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.result-hit {
|
||||
background: #fef0f0;
|
||||
border: 1px solid #fde2e2;
|
||||
}
|
||||
|
||||
.result-miss {
|
||||
background: #f0f9eb;
|
||||
border: 1px solid #e1f3d8;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.result-hit .result-icon {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.result-miss .result-icon {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-hit .result-title {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.result-miss .result-title {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.result-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted, #909399);
|
||||
min-width: 70px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary, #303133);
|
||||
}
|
||||
|
||||
.result-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary, #606266);
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,408 @@
|
||||
<!--
|
||||
=============================================================================
|
||||
企微IT智能服务台 — 拓扑预览 ECharts 力导向图画布组件
|
||||
=============================================================================
|
||||
说明：使用 ECharts graph 类型渲染知识图谱力导向图
|
||||
- Issue 节点：绿色 #07C160，symbolSize=28
|
||||
- Action 节点：橙色 #f59e0b，symbolSize=22
|
||||
- roam=true 支持缩放平移
|
||||
- focusNodeAdjacency=true 悬停高亮相邻
|
||||
- 搜索高亮：匹配节点蓝色描边+脉冲，非匹配降低透明度
|
||||
- 暴露方法：highlightSearch(keyword), restoreAllNodes(), resize(), applyFilter(filter)
|
||||
- 组件卸载时 dispose ECharts 实例
|
||||
- 自动响应容器 resize
|
||||
=============================================================================
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="graph-canvas" v-loading="loading">
|
||||
<div ref="chartContainer" class="graph-canvas__chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import type { GraphData, GraphNode, GraphLink } from '@/api/topology'
|
||||
|
||||
// =============================================================================
|
||||
// 色彩常量（与设计文档 §3.4 一致）
|
||||
// =============================================================================
|
||||
const COLOR_ISSUE = '#07C160'
|
||||
const COLOR_ACTION = '#f59e0b'
|
||||
const COLOR_RELATION = '#9ca3af'
|
||||
const COLOR_LINK = '#c0c4cc'
|
||||
const COLOR_HIGHLIGHT = '#3b82f6'
|
||||
|
||||
// =============================================================================
|
||||
// Props & Emits
|
||||
// =============================================================================
|
||||
const props = defineProps<{
|
||||
/** 图谱数据，为 null 时显示空状态 */
|
||||
graphData: GraphData | null
|
||||
/** 是否处于加载中 */
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 节点被点击时触发，携带完整节点数据 */
|
||||
'node-click': [node: GraphNode]
|
||||
}>()
|
||||
|
||||
// =============================================================================
|
||||
// 内部状态
|
||||
// =============================================================================
|
||||
const chartContainer = ref<HTMLDivElement | null>(null)
|
||||
let chart: echarts.ECharts | null = null
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
|
||||
/** 原始节点数据（带 ECharts 渲染属性） */
|
||||
let allNodes: any[] = []
|
||||
/** 原始关系数据（带 ECharts 渲染属性） */
|
||||
let allLinks: any[] = []
|
||||
|
||||
/** 当前筛选状态 */
|
||||
let currentFilter = {
|
||||
nodeTypes: ['issue', 'action'] as string[],
|
||||
relationTypes: ['LEADS_TO', 'RELATES_TO', 'CAN_JUMP_TO'] as string[],
|
||||
}
|
||||
|
||||
/** 当前搜索关键词 */
|
||||
let searchKeyword = ''
|
||||
|
||||
// =============================================================================
|
||||
// 构建 ECharts 完整配置
|
||||
// =============================================================================
|
||||
function buildOption(): echarts.EChartsOption {
|
||||
return {
|
||||
tooltip: {
|
||||
formatter: (params: any) => {
|
||||
if (params.dataType === 'node') {
|
||||
return `<b>${params.data.name}</b><br/>类型: ${params.data.nodeType}`
|
||||
}
|
||||
if (params.dataType === 'edge') {
|
||||
return params.data.relationType || '关系'
|
||||
}
|
||||
return params.name
|
||||
},
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
data: [
|
||||
{ name: 'Issue', itemStyle: { color: COLOR_ISSUE } },
|
||||
{ name: 'Action', itemStyle: { color: COLOR_ACTION } },
|
||||
{ name: 'Relation', itemStyle: { color: COLOR_RELATION, opacity: 0.3 } },
|
||||
],
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 10,
|
||||
// Relation 置灰不可点击
|
||||
selected: {
|
||||
Issue: true,
|
||||
Action: true,
|
||||
Relation: false,
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
roam: true,
|
||||
focusNodeAdjacency: true,
|
||||
force: {
|
||||
repulsion: 300,
|
||||
gravity: 0.1,
|
||||
edgeLength: [100, 250],
|
||||
layoutAnimation: true,
|
||||
},
|
||||
categories: [
|
||||
{ name: 'Issue', itemStyle: { color: COLOR_ISSUE } },
|
||||
{ name: 'Action', itemStyle: { color: COLOR_ACTION } },
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 11,
|
||||
color: '#303133',
|
||||
},
|
||||
lineStyle: {
|
||||
color: COLOR_LINK,
|
||||
width: 1.5,
|
||||
curveness: 0.3,
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
lineStyle: { width: 4 },
|
||||
label: { show: true },
|
||||
},
|
||||
data: [],
|
||||
links: [],
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 将 API 数据转换为 ECharts 节点/关系格式
|
||||
// =============================================================================
|
||||
function transformData(data: GraphData) {
|
||||
allNodes = (data.nodes || []).map((n: GraphNode) => ({
|
||||
id: n.id,
|
||||
name: n.name || n.id,
|
||||
nodeType: n.type,
|
||||
category: n.type === 'issue' ? 0 : 1,
|
||||
symbolSize: n.type === 'issue' ? 28 : 22,
|
||||
itemStyle: {
|
||||
color: n.type === 'issue' ? COLOR_ISSUE : COLOR_ACTION,
|
||||
},
|
||||
properties: n.properties || {},
|
||||
// 保留原始 API 数据用于详情面板
|
||||
rawData: n,
|
||||
draggable: true,
|
||||
}))
|
||||
|
||||
allLinks = (data.links || []).map((l: GraphLink) => ({
|
||||
source: l.source,
|
||||
target: l.target,
|
||||
relationType: l.type,
|
||||
weight: l.weight,
|
||||
lineStyle: {
|
||||
color: COLOR_LINK,
|
||||
width: Math.max(0.5, (l.weight || 1) * 1.5),
|
||||
curveness: 0.3,
|
||||
},
|
||||
rawData: l,
|
||||
}))
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 根据当前筛选 + 搜索状态，计算可见节点和关系
|
||||
// =============================================================================
|
||||
function computeVisibleData() {
|
||||
// 按节点类型筛选
|
||||
const visibleNodes = allNodes.filter((n) =>
|
||||
currentFilter.nodeTypes.includes(n.nodeType)
|
||||
)
|
||||
const visibleNodeIds = new Set(visibleNodes.map((n) => n.id))
|
||||
|
||||
// 按关系类型筛选（同时确保两端节点可见）
|
||||
const visibleLinks = allLinks.filter(
|
||||
(l) =>
|
||||
currentFilter.relationTypes.includes(l.relationType) &&
|
||||
visibleNodeIds.has(l.source) &&
|
||||
visibleNodeIds.has(l.target)
|
||||
)
|
||||
|
||||
// 应用搜索高亮
|
||||
let renderedNodes: any[]
|
||||
if (searchKeyword) {
|
||||
renderedNodes = visibleNodes.map((n) => {
|
||||
if (n.name.toLowerCase().includes(searchKeyword.toLowerCase())) {
|
||||
return {
|
||||
...n,
|
||||
itemStyle: {
|
||||
...n.itemStyle,
|
||||
borderColor: COLOR_HIGHLIGHT,
|
||||
borderWidth: 3,
|
||||
shadowBlur: 10,
|
||||
shadowColor: COLOR_HIGHLIGHT,
|
||||
},
|
||||
}
|
||||
}
|
||||
return {
|
||||
...n,
|
||||
itemStyle: {
|
||||
...n.itemStyle,
|
||||
opacity: 0.15,
|
||||
},
|
||||
}
|
||||
})
|
||||
} else {
|
||||
renderedNodes = visibleNodes
|
||||
}
|
||||
|
||||
return { nodes: renderedNodes, links: visibleLinks }
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 更新图表渲染（筛选 + 搜索状态变更后调用）
|
||||
// =============================================================================
|
||||
function updateChart() {
|
||||
if (!chart) return
|
||||
|
||||
const { nodes, links } = computeVisibleData()
|
||||
|
||||
chart.setOption({
|
||||
series: [
|
||||
{
|
||||
data: nodes,
|
||||
links: links,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 初次渲染图表
|
||||
// =============================================================================
|
||||
function renderChart() {
|
||||
if (!chartContainer.value || !props.graphData) return
|
||||
|
||||
if (!chart) {
|
||||
chart = echarts.init(chartContainer.value)
|
||||
|
||||
// 节点点击事件
|
||||
chart.on('click', (params: any) => {
|
||||
if (params.dataType === 'node' && params.data?.rawData) {
|
||||
emit('node-click', params.data.rawData as GraphNode)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
transformData(props.graphData)
|
||||
|
||||
const option = buildOption()
|
||||
const { nodes, links } = computeVisibleData()
|
||||
;(option.series as any[])[0].data = nodes
|
||||
;(option.series as any[])[0].links = links
|
||||
|
||||
chart.setOption(option, true)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 暴露方法
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* 搜索高亮：对已加载的节点数据做名称模糊匹配
|
||||
* 匹配节点：蓝色描边 + 阴影脉冲
|
||||
* 非匹配节点：降低透明度
|
||||
*/
|
||||
function highlightSearch(keyword: string) {
|
||||
searchKeyword = keyword?.trim() || ''
|
||||
updateChart()
|
||||
}
|
||||
|
||||
/** 恢复所有节点为正常样式（清除搜索高亮） */
|
||||
function restoreAllNodes() {
|
||||
searchKeyword = ''
|
||||
updateChart()
|
||||
}
|
||||
|
||||
/** 触发 ECharts resize（窗口或容器尺寸变化时调用） */
|
||||
function resize() {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用筛选器
|
||||
* @param filter.nodeTypes 可见的节点类型列表（issue / action）
|
||||
* @param filter.relationTypes 可见的关系类型列表（LEADS_TO / RELATES_TO / CAN_JUMP_TO）
|
||||
*/
|
||||
function applyFilter(filter: {
|
||||
nodeTypes: string[]
|
||||
relationTypes: string[]
|
||||
}) {
|
||||
currentFilter = { ...filter }
|
||||
updateChart()
|
||||
}
|
||||
|
||||
/** 放大（以画布中心为原点缩放） */
|
||||
function zoomIn() {
|
||||
if (!chart) return
|
||||
chart.dispatchAction({
|
||||
type: 'graphRoam',
|
||||
seriesIndex: 0,
|
||||
zoom: 1.3,
|
||||
originX: chart.getWidth() / 2,
|
||||
originY: chart.getHeight() / 2,
|
||||
})
|
||||
}
|
||||
|
||||
/** 缩小（以画布中心为原点缩放） */
|
||||
function zoomOut() {
|
||||
if (!chart) return
|
||||
chart.dispatchAction({
|
||||
type: 'graphRoam',
|
||||
seriesIndex: 0,
|
||||
zoom: 1 / 1.3,
|
||||
originX: chart.getWidth() / 2,
|
||||
originY: chart.getHeight() / 2,
|
||||
})
|
||||
}
|
||||
|
||||
/** 重置缩放和平移，恢复初始视图 */
|
||||
function zoomReset() {
|
||||
if (!chart) return
|
||||
chart.dispatchAction({ type: 'restore' })
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
highlightSearch,
|
||||
restoreAllNodes,
|
||||
resize,
|
||||
applyFilter,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoomReset,
|
||||
})
|
||||
|
||||
// =============================================================================
|
||||
// Watchers
|
||||
// =============================================================================
|
||||
watch(
|
||||
() => props.graphData,
|
||||
() => {
|
||||
nextTick(() => renderChart())
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// =============================================================================
|
||||
// 生命周期
|
||||
// =============================================================================
|
||||
onMounted(() => {
|
||||
if (props.graphData) {
|
||||
nextTick(() => renderChart())
|
||||
}
|
||||
|
||||
// 使用 ResizeObserver 响应容器尺寸变化
|
||||
if (chartContainer.value) {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
chart?.resize()
|
||||
})
|
||||
resizeObserver.observe(chartContainer.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
resizeObserver?.disconnect()
|
||||
resizeObserver = null
|
||||
if (chart) {
|
||||
chart.dispose()
|
||||
chart = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.graph-canvas__chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!--
|
||||
=============================================================================
|
||||
企微IT智能服务台 — 拓扑预览工具栏组件
|
||||
=============================================================================
|
||||
说明：提供搜索、节点类型筛选、关系类型筛选、缩放控制
|
||||
- 搜索框：el-input + el-icon Search
|
||||
- 节点类型筛选：checkbox（Issue / Action），Relation 置灰 disabled
|
||||
- 关系类型筛选：下拉（LEADS_TO / RELATES_TO / CAN_JUMP_TO），DERIVED_FROM 置灰
|
||||
- 缩放控制按钮：放大 / 缩小 / 重置
|
||||
- emit 事件：search, filter-change, zoom-in, zoom-out, zoom-reset
|
||||
=============================================================================
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="graph-toolbar">
|
||||
<!-- 搜索框 -->
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索节点名称..."
|
||||
size="default"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@input="handleSearchInput"
|
||||
@clear="handleSearchClear"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<!-- 节点类型筛选 -->
|
||||
<div class="graph-toolbar__group">
|
||||
<span class="graph-toolbar__label">节点类型</span>
|
||||
<el-checkbox-group v-model="nodeTypeFilter" @change="handleFilterChange">
|
||||
<el-checkbox label="issue">
|
||||
<span class="graph-toolbar__dot" style="background: #07C160"></span>
|
||||
Issue
|
||||
</el-checkbox>
|
||||
<el-checkbox label="action">
|
||||
<span class="graph-toolbar__dot" style="background: #f59e0b"></span>
|
||||
Action
|
||||
</el-checkbox>
|
||||
<el-checkbox label="relation" disabled>
|
||||
<span
|
||||
class="graph-toolbar__dot"
|
||||
style="background: #9ca3af; opacity: 0.3"
|
||||
></span>
|
||||
Relation
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<!-- 关系类型筛选 -->
|
||||
<div class="graph-toolbar__group">
|
||||
<span class="graph-toolbar__label">关系类型</span>
|
||||
<el-select
|
||||
v-model="relationTypeFilter"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
placeholder="选择关系类型"
|
||||
size="default"
|
||||
style="width: 260px"
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<el-option label="LEADS_TO" value="LEADS_TO" />
|
||||
<el-option label="RELATES_TO" value="RELATES_TO" />
|
||||
<el-option label="CAN_JUMP_TO" value="CAN_JUMP_TO" />
|
||||
<el-option label="DERIVED_FROM" value="DERIVED_FROM" disabled />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<!-- 缩放控制 -->
|
||||
<div class="graph-toolbar__group">
|
||||
<span class="graph-toolbar__label">缩放</span>
|
||||
<el-button-group>
|
||||
<el-button size="default" @click="emit('zoom-in')">
|
||||
<el-icon><ZoomIn /></el-icon>
|
||||
</el-button>
|
||||
<el-button size="default" @click="emit('zoom-out')">
|
||||
<el-icon><ZoomOut /></el-icon>
|
||||
</el-button>
|
||||
<el-button size="default" @click="emit('zoom-reset')">
|
||||
<el-icon><RefreshRight /></el-icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Search, ZoomIn, ZoomOut, RefreshRight } from '@element-plus/icons-vue'
|
||||
|
||||
// =============================================================================
|
||||
// Emits
|
||||
// =============================================================================
|
||||
const emit = defineEmits<{
|
||||
/** 搜索关键词变化（含空字符串表示清除搜索） */
|
||||
search: [keyword: string]
|
||||
/** 筛选条件变化 */
|
||||
'filter-change': [filter: FilterState]
|
||||
/** 缩放放大 */
|
||||
'zoom-in': []
|
||||
/** 缩放缩小 */
|
||||
'zoom-out': []
|
||||
/** 缩放重置 */
|
||||
'zoom-reset': []
|
||||
}>()
|
||||
|
||||
// =============================================================================
|
||||
// 类型定义
|
||||
// =============================================================================
|
||||
interface FilterState {
|
||||
nodeTypes: string[]
|
||||
relationTypes: string[]
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 状态
|
||||
// =============================================================================
|
||||
const searchKeyword = ref('')
|
||||
const nodeTypeFilter = ref<string[]>(['issue', 'action'])
|
||||
const relationTypeFilter = ref<string[]>([
|
||||
'LEADS_TO',
|
||||
'RELATES_TO',
|
||||
'CAN_JUMP_TO',
|
||||
])
|
||||
|
||||
// =============================================================================
|
||||
// 搜索防抖
|
||||
// =============================================================================
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function handleSearchInput() {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
emit('search', searchKeyword.value)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function handleSearchClear() {
|
||||
searchKeyword.value = ''
|
||||
emit('search', '')
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 筛选变化
|
||||
// =============================================================================
|
||||
function handleFilterChange() {
|
||||
emit('filter-change', {
|
||||
nodeTypes: nodeTypeFilter.value,
|
||||
relationTypes: relationTypeFilter.value,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 12px 16px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.graph-toolbar__group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.graph-toolbar__label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.graph-toolbar__dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 让 checkbox 文字和圆点对齐 */
|
||||
.graph-toolbar :deep(.el-checkbox__label) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,396 @@
|
||||
<!--
|
||||
=============================================================================
|
||||
企微IT智能服务台 — 拓扑预览节点详情面板组件（只读）
|
||||
=============================================================================
|
||||
说明：只读展示选中节点的详情
|
||||
- 节点属性：名称、类型、UUID、其他 properties
|
||||
- 关联关系列表：显示与该节点相连的所有关系
|
||||
- 高亮路径：选中节点时高亮直接相连的边和节点（由 GraphCanvas 处理）
|
||||
- 不显示编辑/添加/删除按钮（只读模式）
|
||||
- 使用固定右侧面板布局
|
||||
=============================================================================
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="node-detail-panel">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!node" class="node-detail-panel__empty">
|
||||
<el-icon :size="40" color="#c0c4cc"><Pointer /></el-icon>
|
||||
<p>点击图谱中的节点查看详情</p>
|
||||
</div>
|
||||
|
||||
<!-- 节点详情 -->
|
||||
<template v-else>
|
||||
<!-- 标题区 -->
|
||||
<div class="node-detail-panel__header">
|
||||
<span
|
||||
class="node-detail-panel__type-badge"
|
||||
:style="{ background: typeColor + '20', color: typeColor }"
|
||||
>
|
||||
{{ node.type }}
|
||||
</span>
|
||||
<h3 class="node-detail-panel__name" :title="node.name">
|
||||
{{ node.name }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<el-scrollbar class="node-detail-panel__scroll">
|
||||
<!-- 基本属性 -->
|
||||
<div class="node-detail-panel__section">
|
||||
<div class="node-detail-panel__section-title">基本属性</div>
|
||||
<el-descriptions :column="1" border size="small">
|
||||
<el-descriptions-item label="名称">
|
||||
{{ node.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">
|
||||
<span
|
||||
class="node-detail-panel__type-tag"
|
||||
:style="{ background: typeColor + '20', color: typeColor }"
|
||||
>
|
||||
{{ node.type }}
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="UUID">
|
||||
<span class="node-detail-panel__uuid">{{ node.id }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 其他属性 -->
|
||||
<div v-if="extraProperties.length > 0" class="node-detail-panel__section">
|
||||
<div class="node-detail-panel__section-title">其他属性</div>
|
||||
<el-descriptions :column="1" border size="small">
|
||||
<el-descriptions-item
|
||||
v-for="prop in extraProperties"
|
||||
:key="prop.key"
|
||||
:label="prop.key"
|
||||
>
|
||||
{{ formatPropertyValue(prop.value) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 关联关系 -->
|
||||
<div class="node-detail-panel__section">
|
||||
<div class="node-detail-panel__section-title">
|
||||
关联关系
|
||||
<span class="node-detail-panel__count">
|
||||
({{ relatedLinks.length }})
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="relatedLinks.length === 0"
|
||||
class="node-detail-panel__no-relations"
|
||||
>
|
||||
暂无关联关系
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="node-detail-panel__relation-list"
|
||||
>
|
||||
<div
|
||||
v-for="(link, idx) in relatedLinks"
|
||||
:key="idx"
|
||||
class="node-detail-panel__relation-item"
|
||||
>
|
||||
<div class="node-detail-panel__relation-direction">
|
||||
<span
|
||||
class="node-detail-panel__relation-node"
|
||||
:class="{
|
||||
'node-detail-panel__relation-node--current':
|
||||
link.direction === 'outgoing'
|
||||
}"
|
||||
>
|
||||
{{ link.sourceName }}
|
||||
</span>
|
||||
<el-icon class="node-detail-panel__relation-arrow">
|
||||
<Right />
|
||||
</el-icon>
|
||||
<span
|
||||
class="node-detail-panel__relation-node"
|
||||
:class="{
|
||||
'node-detail-panel__relation-node--current':
|
||||
link.direction === 'incoming'
|
||||
}"
|
||||
>
|
||||
{{ link.targetName }}
|
||||
</span>
|
||||
</div>
|
||||
<el-tag size="small" type="info" effect="plain">
|
||||
{{ link.type }}
|
||||
</el-tag>
|
||||
<span
|
||||
v-if="link.weight !== undefined && link.weight !== null"
|
||||
class="node-detail-panel__relation-weight"
|
||||
>
|
||||
w: {{ link.weight.toFixed(2) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Pointer, Right } from '@element-plus/icons-vue'
|
||||
import type { GraphNode, GraphLink } from '@/api/topology'
|
||||
|
||||
// =============================================================================
|
||||
// Props
|
||||
// =============================================================================
|
||||
const props = defineProps<{
|
||||
/** 当前选中的节点，null 时显示空状态 */
|
||||
node: GraphNode | null
|
||||
/** 全部关系数据（用于查找与当前节点相连的关系） */
|
||||
links: GraphLink[]
|
||||
/** 全部节点数据（用于查找关系端点节点的名称） */
|
||||
nodes: GraphNode[]
|
||||
}>()
|
||||
|
||||
// =============================================================================
|
||||
// 色彩映射
|
||||
// =============================================================================
|
||||
const typeColorMap: Record<string, string> = {
|
||||
issue: '#07C160',
|
||||
action: '#f59e0b',
|
||||
relation: '#9ca3af',
|
||||
}
|
||||
|
||||
const typeColor = computed(() => {
|
||||
if (!props.node) return '#909399'
|
||||
return typeColorMap[props.node.type] || '#909399'
|
||||
})
|
||||
|
||||
// =============================================================================
|
||||
// 计算额外属性（排除 name/type/id）
|
||||
// =============================================================================
|
||||
const extraProperties = computed(() => {
|
||||
if (!props.node?.properties) return []
|
||||
return Object.entries(props.node.properties)
|
||||
.filter(([key]) => !['name', 'type', 'id'].includes(key))
|
||||
.map(([key, value]) => ({ key, value }))
|
||||
})
|
||||
|
||||
// =============================================================================
|
||||
// 计算关联关系
|
||||
// =============================================================================
|
||||
const nodeMap = computed(() => {
|
||||
const map = new Map<string, GraphNode>()
|
||||
for (const n of props.nodes) {
|
||||
map.set(n.id, n)
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
interface RelatedLink {
|
||||
type: string
|
||||
weight: number | null
|
||||
sourceName: string
|
||||
targetName: string
|
||||
direction: 'outgoing' | 'incoming'
|
||||
}
|
||||
|
||||
const relatedLinks = computed<RelatedLink[]>(() => {
|
||||
if (!props.node) return []
|
||||
const nodeId = props.node.id
|
||||
const result: RelatedLink[] = []
|
||||
|
||||
for (const link of props.links) {
|
||||
if (link.source === nodeId) {
|
||||
const targetNode = nodeMap.value.get(link.target)
|
||||
result.push({
|
||||
type: link.type,
|
||||
weight: link.weight ?? null,
|
||||
sourceName: props.node!.name,
|
||||
targetName: targetNode?.name || link.target,
|
||||
direction: 'outgoing',
|
||||
})
|
||||
} else if (link.target === nodeId) {
|
||||
const sourceNode = nodeMap.value.get(link.source)
|
||||
result.push({
|
||||
type: link.type,
|
||||
weight: link.weight ?? null,
|
||||
sourceName: sourceNode?.name || link.source,
|
||||
targetName: props.node!.name,
|
||||
direction: 'incoming',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
// =============================================================================
|
||||
// 工具函数
|
||||
// =============================================================================
|
||||
function formatPropertyValue(value: any): string {
|
||||
if (value === null || value === undefined) return '—'
|
||||
if (Array.isArray(value)) return value.join(', ')
|
||||
if (typeof value === 'object') return JSON.stringify(value)
|
||||
return String(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.node-detail-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.node-detail-panel__empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #c0c4cc;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.node-detail-panel__empty p {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 标题区 */
|
||||
.node-detail-panel__header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.node-detail-panel__type-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.node-detail-panel__name {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 滚动区域 */
|
||||
.node-detail-panel__scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 分区 */
|
||||
.node-detail-panel__section {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.node-detail-panel__section + .node-detail-panel__section {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.node-detail-panel__section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.node-detail-panel__count {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* UUID 显示 */
|
||||
.node-detail-panel__uuid {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 类型标签 */
|
||||
.node-detail-panel__type-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 关联关系列表 */
|
||||
.node-detail-panel__no-relations {
|
||||
font-size: 13px;
|
||||
color: #c0c4cc;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.node-detail-panel__relation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.node-detail-panel__relation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.node-detail-panel__relation-direction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.node-detail-panel__relation-node {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.node-detail-panel__relation-node--current {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.node-detail-panel__relation-arrow {
|
||||
color: #c0c4cc;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.node-detail-panel__relation-weight {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -216,6 +216,20 @@ const routes = [
|
||||
component: () => import('@/views/RagflowIngestion.vue'),
|
||||
meta: { title: 'RAGFlow文档导入', requiresAuth: true },
|
||||
},
|
||||
{
|
||||
// Tier1 知识库迭代 — 拓扑预览（只读知识图谱）
|
||||
path: 'topology-preview',
|
||||
name: 'TopologyPreview',
|
||||
component: () => import('@/views/TopologyPreview.vue'),
|
||||
meta: { title: '拓扑预览', requiresAuth: true },
|
||||
},
|
||||
{
|
||||
// Tier1 知识库迭代 — 代答排除规则
|
||||
path: 'exclusion-rules',
|
||||
name: 'ExclusionRules',
|
||||
component: () => import('@/views/ExclusionRules.vue'),
|
||||
meta: { title: '代答排除', requiresAuth: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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 > P1 > P2 > 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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user