feat(admin): Flowcharts.vue JSON 在线编辑 + 9 套排查模板种子数据
为管理后台'排查流程图'模块加 JSON 在线编辑能力 + 提供 9 套 办公 IT 常见故障排查模板种子数据(账号/系统/企微/VPN/邮箱/网络/ 打印机/软件/硬件),管理员可基于此学习、筛选、修改、新增。 ## 选型(按'优选开源'原则) - @codemirror/lang-json / state / theme-one-dark / view - codemirror(核心) - vue-codemirror(Vue 3 集成) - vue-json-pretty(JSON 树形预览) 全部为社区成熟开源组件,非自行开发 ## 改动 - frontend-admin/package.json: 加 6 个 npm 依赖 - frontend-admin/src/api/troubleshooting.ts(新): TS 类型 + 5 个 API client(listTemplates / getTemplate / createTemplate / updateTemplate / deleteTemplate) + formatJson/validateJson/ countNodes/countDecisions 工具函数 - frontend-admin/src/components/flowchart/FlowchartEditorDialog.vue(新): 双面板编辑器(左 CodeMirror + 右 vue-json-pretty), 实时 JSON 校验 + 节点/决策统计 + 格式/复制/导出按钮 - frontend-admin/src/views/Flowcharts.vue(改): 列表 + 导入/导出/ 新建按钮 + EditorDialog 集成 + 文件上传 + 删除确认 ## 9 套种子数据 - 01-account-password.json 账号密码 - 02-pc-system.json 电脑系统 - 03-wecom.json 企微问题 - 04-vpn.json VPN 接入 - 05-email.json 邮箱 - 06-network.json 网络 - 07-printer.json 打印机 - 08-software.json 软件 - 09-hardware.json 硬件 每套 ~150-200 行,结构:name / category / description / estimated_time / difficulty / tags / root_node(决策树) ## 工具脚本 - data/seed-templates/build_all.py: 合并 9 个 JSON 成 00-all.json
This commit is contained in:
Simon
@@ -0,0 +1,171 @@
|
||||
// =============================================================================
|
||||
// 排查模板 API 客户端
|
||||
// =============================================================================
|
||||
// 对接后端 /api/troubleshooting-templates 5 个 REST 端点
|
||||
// 5 个端点:GET 列表 / GET 详情 / POST 新建 / PUT 更新 / DELETE 删除
|
||||
// =============================================================================
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 类型定义
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/** 步骤节点(顺序执行) */
|
||||
export interface PathStepNode {
|
||||
id: string
|
||||
type: 'step'
|
||||
label: string
|
||||
status?: 'done' | 'current' | 'pending'
|
||||
children?: FlowchartNode[]
|
||||
}
|
||||
|
||||
/** 决策节点(yes/no 分支) */
|
||||
export interface DecisionNode {
|
||||
id: string
|
||||
type: 'decision'
|
||||
label: string
|
||||
status?: 'done' | 'current' | 'pending'
|
||||
yes_branch?: FlowchartNode
|
||||
no_branch?: FlowchartNode
|
||||
children?: FlowchartNode[]
|
||||
}
|
||||
|
||||
/** 流程图节点(递归) */
|
||||
export type FlowchartNode = PathStepNode | DecisionNode
|
||||
|
||||
/** 排查模板 */
|
||||
export interface TroubleshootingTemplate {
|
||||
id?: string
|
||||
name: string
|
||||
category: string
|
||||
description?: string
|
||||
estimated_time?: number
|
||||
difficulty?: number
|
||||
tags?: string[]
|
||||
root_node: FlowchartNode
|
||||
version?: string
|
||||
status?: 'draft' | 'published'
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
// 后端可能附加的统计字段
|
||||
nodeCount?: number
|
||||
}
|
||||
|
||||
/** API 响应通用结构 */
|
||||
interface ApiResponse<T> {
|
||||
code: number
|
||||
message: string
|
||||
data: T
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Axios 实例(继承全局 baseURL)
|
||||
// -----------------------------------------------------------------------------
|
||||
const http = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 30000,
|
||||
})
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 5 个端点
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/** GET /api/troubleshooting-templates — 获取模板列表 */
|
||||
export async function listTemplates(): Promise<TroubleshootingTemplate[]> {
|
||||
const res = await http.get<ApiResponse<TroubleshootingTemplate[]>>(
|
||||
'/troubleshooting-templates'
|
||||
)
|
||||
return res.data.data || []
|
||||
}
|
||||
|
||||
/** GET /api/troubleshooting-templates/{id} — 获取模板详情 */
|
||||
export async function getTemplate(id: string): Promise<TroubleshootingTemplate> {
|
||||
const res = await http.get<ApiResponse<TroubleshootingTemplate>>(
|
||||
`/troubleshooting-templates/${id}`
|
||||
)
|
||||
return res.data.data
|
||||
}
|
||||
|
||||
/** POST /api/troubleshooting-templates — 新建模板 */
|
||||
export async function createTemplate(
|
||||
data: TroubleshootingTemplate
|
||||
): Promise<TroubleshootingTemplate> {
|
||||
const res = await http.post<ApiResponse<TroubleshootingTemplate>>(
|
||||
'/troubleshooting-templates',
|
||||
data
|
||||
)
|
||||
return res.data.data
|
||||
}
|
||||
|
||||
/** PUT /api/troubleshooting-templates/{id} — 更新模板 */
|
||||
export async function updateTemplate(
|
||||
id: string,
|
||||
data: TroubleshootingTemplate
|
||||
): Promise<TroubleshootingTemplate> {
|
||||
const res = await http.put<ApiResponse<TroubleshootingTemplate>>(
|
||||
`/troubleshooting-templates/${id}`,
|
||||
data
|
||||
)
|
||||
return res.data.data
|
||||
}
|
||||
|
||||
/** DELETE /api/troubleshooting-templates/{id} — 删除模板 */
|
||||
export async function deleteTemplate(id: string): Promise<void> {
|
||||
await http.delete(`/troubleshooting-templates/${id}`)
|
||||
}
|
||||
|
||||
/** 工具:把对象格式化成 JSON 字符串(带缩进) */
|
||||
export function formatJson(obj: unknown): string {
|
||||
return JSON.stringify(obj, null, 2)
|
||||
}
|
||||
|
||||
/** 工具:校验 JSON 字符串是否合法,返回 {ok, data, error} */
|
||||
export function validateJson(
|
||||
text: string
|
||||
): { ok: true; data: TroubleshootingTemplate } | { ok: false; error: string } {
|
||||
try {
|
||||
const data = JSON.parse(text) as TroubleshootingTemplate
|
||||
return { ok: true, data }
|
||||
} catch (e) {
|
||||
const err = e as Error
|
||||
return { ok: false, error: err.message }
|
||||
}
|
||||
}
|
||||
|
||||
/** 工具:统计节点数(递归) */
|
||||
export function countNodes(node: FlowchartNode | undefined): number {
|
||||
if (!node) return 0
|
||||
let count = 1
|
||||
if (node.children) {
|
||||
for (const child of node.children) {
|
||||
count += countNodes(child)
|
||||
}
|
||||
}
|
||||
// 决策节点的 yes/no 分支
|
||||
if ('yes_branch' in node && node.yes_branch) {
|
||||
count += countNodes(node.yes_branch)
|
||||
}
|
||||
if ('no_branch' in node && node.no_branch) {
|
||||
count += countNodes(node.no_branch)
|
||||
}
|
||||
return count
|
||||
}
|
||||
|
||||
/** 工具:统计决策节点数 */
|
||||
export function countDecisions(node: FlowchartNode | undefined): number {
|
||||
if (!node) return 0
|
||||
let count = node.type === 'decision' ? 1 : 0
|
||||
if (node.children) {
|
||||
for (const child of node.children) {
|
||||
count += countDecisions(child)
|
||||
}
|
||||
}
|
||||
if ('yes_branch' in node && node.yes_branch) {
|
||||
count += countDecisions(node.yes_branch)
|
||||
}
|
||||
if ('no_branch' in node && node.no_branch) {
|
||||
count += countDecisions(node.no_branch)
|
||||
}
|
||||
return count
|
||||
}
|
||||
Reference in New Issue
Block a user