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

chore: initial baseline with P0-safety .gitignore

Browse Source
This commit is contained in:
Simon
2026-06-14 16:49:18 +08:00
commit 63262292d7
510 changed files with 146008 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-admin/src/views/Flowcharts.vue
+232
View File
@@ -0,0 +1,232 @@
<!--
=============================================================================
企微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>