Vue 3 流程圖應用程式

一個基於 Vue 3 開發的流程圖與步驟展示應用程式，提供互動式流程圖編輯器和自訂步驟組件。

✨ 功能特色

• 🎨 互動式流程圖編輯器 - 使用 Vue Flow 建立可拖拽的流程圖
• 📊 自訂步驟組件 - 支援多種狀態的業務流程步驟展示
• 🎯 即時更新 - 節點和連線的即時變更
• 🖼️ 迷你地圖 - 快速導航大型流程圖
• 🎛️ 完整控制 - 縮放、平移、適應視窗等功能

🚀 快速開始

安裝依賴

npm install

開發模式

npm run serve

應用程式將在 http://localhost:8080 啟動

建置生產版本

npm run build

📦 主要技術棧

• Vue 3 - 前端框架
• Vue Flow - 流程圖核心庫
  • @vue-flow/core
  • @vue-flow/background
  • @vue-flow/controls
  • @vue-flow/minimap
• Element Plus - UI 組件庫
• 其他工具
  • D3.js - 數據視覺化
  • ECharts - 圖表庫
  • Lodash - 工具函數庫

📁 專案結構

flow/
├── public/
│   └── index.html          # HTML 模板
├── src/
│   ├── components/
│   │   └── FlowChart.vue   # 流程圖組件
│   ├── App.vue             # 主應用組件
│   ├── CustomSteps.vue     # 自訂步驟組件
│   └── main.js             # 應用入口
├── package.json            # 專案配置
└── README.md              # 專案說明

🎯 核心組件

FlowChart.vue

互動式流程圖編輯器，支援：

• ➕ 新增節點
• 🔗 連接節點
• 🔄 重置流程圖
• 📐 適應視窗
• 🎨 自訂節點樣式

CustomSteps.vue

業務流程步驟組件，支援多種狀態：

• ⏳ pending - 待處理
• ✅ submitted - 已提交
• ⚠️ unsubmitted - 未提交
• 🔄 processing - 處理中（附帶脈衝動畫）
• ✨ success - 成功
• ❌ error - 錯誤
• ⚡ warning - 警告

💡 使用範例

流程圖組件

<template>
  <FlowChart />
</template>

<script setup>
import FlowChart from './components/FlowChart.vue'
</script>

步驟組件

<template>
  <CustomSteps :steps="stepsData" />
</template>

<script setup>
import CustomSteps from './CustomSteps.vue'
import { ref } from 'vue'

const stepsData = ref([
  {
    type: 'submitted',
    title: '提交申請',
    description: '2024-01-10 10:30'
  },
  {
    type: 'processing',
    title: '審核中',
    description: '預計2個工作日'
  },
  {
    type: 'pending',
    title: '待批准',
    description: '等待主管審批'
  }
])
</script>

🎨 自訂樣式

所有組件都支援自訂樣式，可以透過修改 scoped style 來調整外觀。

📝 開發說明

• 使用 Vue 3 Composition API
• 支援響應式設計
• 包含詳細的中文註解
• 遵循 Vue 3 最佳實踐

🔧 瀏覽器支援

• Chrome (推薦)
• Firefox
• Safari
• Edge

📄 授權

MIT License

👨‍💻 作者

bonnbear

🤝 貢獻

歡迎提交 Issue 和 Pull Request！