Simon
233 lines
6.4 KiB
Vue
233 lines
6.4 KiB
Vue
<!--
|
||
=============================================================================
|
||
企微IT智能服务台 — 排查流程图管理页
|
||
=============================================================================
|
||
说明：JSON 导入导出 + 预览 + 版本管理
|
||
阶段三开始实现，当前为占位功能
|
||
显示模板列表 + 灰化的导入/导出/新建按钮
|
||
底部展示实现路径
|
||
-->
|
||
<template>
|
||
<div class="flowcharts-page">
|
||
<!-- 页面标题 -->
|
||
<div class="page-title">排查流程图管理</div>
|
||
<div class="page-desc">JSON 导入导出 + 预览 + 版本管理。阶段三开始实现，后续升级为可视化拖拽编辑。</div>
|
||
|
||
<!-- 操作按钮（灰化占位） -->
|
||
<div class="flowchart-actions">
|
||
<el-button type="primary" disabled>
|
||
<el-icon><Upload /></el-icon>
|
||
导入 JSON
|
||
</el-button>
|
||
<el-button disabled>
|
||
<el-icon><Download /></el-icon>
|
||
导出全部
|
||
</el-button>
|
||
<el-button disabled>
|
||
<el-icon><Plus /></el-icon>
|
||
新建流程图
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 流程图模板表格 -->
|
||
<div class="table-wrapper">
|
||
<el-table
|
||
:data="flowcharts"
|
||
style="width: 100%"
|
||
:header-cell-style="{ background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', fontSize: '12px' }"
|
||
:cell-style="{ color: 'var(--text-primary)', fontSize: '13px' }"
|
||
row-class-name="flowchart-table-row"
|
||
>
|
||
<el-table-column label="流程图名称" min-width="200">
|
||
<template #default="{ row }">
|
||
<div class="flowchart-name">
|
||
<el-icon :size="16" style="color: var(--accent); margin-right: 6px">
|
||
<Share />
|
||
</el-icon>
|
||
{{ row.name }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="分类" width="80">
|
||
<template #default="{ row }">
|
||
<el-tag size="small" effect="plain">{{ row.category }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="节点数" width="80" align="center" prop="nodeCount" />
|
||
<el-table-column label="版本" width="70" align="center" prop="version" />
|
||
<el-table-column label="最后更新" width="110" prop="updatedAt" />
|
||
<el-table-column label="状态" width="90">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.statusType" size="small">
|
||
{{ row.statusText }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="140" align="center">
|
||
<template #default>
|
||
<el-button size="small" text type="primary" disabled>预览</el-button>
|
||
<el-button size="small" text disabled>编辑</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 实现路径 -->
|
||
<div class="roadmap-section">
|
||
<div class="roadmap-title">
|
||
<el-icon :size="16" style="color: var(--accent); margin-right: 6px"><Flag /></el-icon>
|
||
实现路径
|
||
</div>
|
||
<div class="roadmap-steps">
|
||
<div class="roadmap-step active">
|
||
<div class="step-number">Step 1</div>
|
||
<div class="step-title">JSON 导入导出 + 预览</div>
|
||
<div class="step-phase">阶段三 3B</div>
|
||
</div>
|
||
<el-icon :size="16" class="roadmap-arrow"><ArrowRight /></el-icon>
|
||
<div class="roadmap-step">
|
||
<div class="step-number">Step 2</div>
|
||
<div class="step-title">导出为 Dify 变量</div>
|
||
<div class="step-phase">阶段四 4A</div>
|
||
</div>
|
||
<el-icon :size="16" class="roadmap-arrow"><ArrowRight /></el-icon>
|
||
<div class="roadmap-step">
|
||
<div class="step-number">Step 3</div>
|
||
<div class="step-title">Dify HTTP 回调</div>
|
||
<div class="step-phase">阶段四</div>
|
||
</div>
|
||
<el-icon :size="16" class="roadmap-arrow"><ArrowRight /></el-icon>
|
||
<div class="roadmap-step">
|
||
<div class="step-number">Step 4</div>
|
||
<div class="step-title">可视化拖拽编辑</div>
|
||
<div class="step-phase">远景</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// ==========================================================================
|
||
// Demo 数据
|
||
// ==========================================================================
|
||
const flowcharts = [
|
||
{
|
||
name: 'VPN连接故障排查',
|
||
category: '网络',
|
||
nodeCount: 12,
|
||
version: 'v2.1',
|
||
updatedAt: '2026-06-10',
|
||
statusType: 'success',
|
||
statusText: '已发布',
|
||
},
|
||
{
|
||
name: '打印机脱机排查',
|
||
category: '外设',
|
||
nodeCount: 8,
|
||
version: 'v1.3',
|
||
updatedAt: '2026-06-08',
|
||
statusType: 'success',
|
||
statusText: '已发布',
|
||
},
|
||
{
|
||
name: '邮箱登录失败排查',
|
||
category: '软件',
|
||
nodeCount: 10,
|
||
version: 'v1.0',
|
||
updatedAt: '2026-06-06',
|
||
statusType: 'warning',
|
||
statusText: '草稿',
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 操作按钮 */
|
||
.flowchart-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 流程图名称 */
|
||
.flowchart-name {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 实现路径区域 */
|
||
.roadmap-section {
|
||
margin-top: 24px;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 20px;
|
||
}
|
||
|
||
.roadmap-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.roadmap-steps {
|
||
display: flex;
|
||
gap: 0;
|
||
align-items: center;
|
||
}
|
||
|
||
.roadmap-step {
|
||
border-radius: var(--radius);
|
||
padding: 12px 16px;
|
||
flex: 1;
|
||
text-align: center;
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.roadmap-step.active {
|
||
background: var(--accent-light);
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.step-number {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
}
|
||
.roadmap-step.active .step-number {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.step-title {
|
||
font-size: 13px;
|
||
margin-top: 4px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.roadmap-step.active .step-title {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.step-phase {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.roadmap-arrow {
|
||
color: var(--text-muted);
|
||
flex-shrink: 0;
|
||
margin: 0 4px;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* 流程图表格行悬停 */
|
||
.flowchart-table-row:hover td {
|
||
background-color: var(--bg-tertiary) !important;
|
||
}
|
||
</style>
|