feat(wm-bpm+frontend): #33 BPMN.js设计器+流程模板管理完整实现

frontend/src/api/bpmApi.ts

@@ -0,0 +1,84 @@
+import request from './request'
+
+const BASE = '/api/bpm/template'
+
+/** 流程模板类型 */
+export interface ProcessTemplate {
+  id?: number
+  name: string
+  description?: string
+  bpmnXml?: string
+  category?: string
+  tags?: string
+  useCount?: number
+  status?: number // 0-草稿 1-已发布 2-已停用
+  creatorId?: number
+  creatorName?: string
+  tenantId?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+/** 模板查询参数 */
+export interface TemplateQuery {
+  keyword?: string
+  category?: string
+  status?: number
+  tag?: string
+  page?: number
+  size?: number
+}
+
+/** 分页响应 */
+export interface PageResult<T> {
+  records: T[]
+  total: number
+  size: number
+  current: number
+  pages: number
+}
+
+// 创建模板
+export function createTemplate(data: ProcessTemplate) {
+  return request.post(BASE, data)
+}
+
+// 获取模板详情
+export function getTemplate(id: number) {
+  return request.get(`${BASE}/${id}`)
+}
+
+// 更新模板
+export function updateTemplate(id: number, data: Partial<ProcessTemplate>) {
+  return request.put(`${BASE}/${id}`, data)
+}
+
+// 删除模板
+export function deleteTemplate(id: number) {
+  return request.delete(`${BASE}/${id}`)
+}
+
+// 分页查询模板
+export function listTemplates(params: TemplateQuery) {
+  return request.get(BASE, { params })
+}
+
+// 发布模板
+export function publishTemplate(id: number) {
+  return request.put(`${BASE}/${id}/publish`)
+}
+
+// 停用模板
+export function disableTemplate(id: number) {
+  return request.put(`${BASE}/${id}/disable`)
+}
+
+// 复制模板
+export function copyTemplate(id: number) {
+  return request.post(`${BASE}/${id}/copy`)
+}
+
+// 热门模板
+export function hotTemplates(limit = 10) {
+  return request.get(`${BASE}/hot`, { params: { limit } })
+}

frontend/src/router/index.ts

@@ -16,6 +16,8 @@ const routes = [
       { path: 'cs/knowledge', name: 'csKnowledge', component: () => import('@/views/cs/KnowledgeBaseView.vue') },
       { path: 'cs/announcement', name: 'csAnnouncement', component: () => import('@/views/cs/AnnouncementView.vue') },
       { path: 'cs/kpi', name: 'csKpi', component: () => import('@/views/cs/KpiDashboardView.vue') },
+      { path: 'bpm/templates', name: 'bpmTemplates', component: () => import('@/views/bpm/TemplateListView.vue') },
+      { path: 'bpm/designer', name: 'bpmDesigner', component: () => import('@/views/bpm/BpmnDesigner.vue') },
     ]
   },
   { path: '/:pathMatch(.*)*', redirect: '/dashboard' }

frontend/src/views/bpm/BpmnDesigner.vue

@@ -0,0 +1,561 @@
+<template>
+  <div class="bpmn-designer">
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <el-button-group>
+        <el-button type="primary" :icon="Document" @click="handleNew">新建</el-button>
+        <el-button :icon="FolderOpened" @click="handleImport">导入</el-button>
+        <el-button :icon="Download" @click="handleExport">导出</el-button>
+        <el-button :icon="Check" @click="handleSave" type="success">保存</el-button>
+      </el-button-group>
+      <el-button-group>
+        <el-button :icon="RefreshLeft" @click="handleUndo" title="撤销">撤销</el-button>
+        <el-button :icon="RefreshRight" @click="handleRedo" title="重做">重做</el-button>
+      </el-button-group>
+      <el-button-group>
+        <el-button :icon="ZoomIn" @click="handleZoomIn">放大</el-button>
+        <el-button :icon="ZoomOut" @click="handleZoomOut">缩小</el-button>
+        <el-button :icon="FullScreen" @click="handleResetZoom">重置</el-button>
+      </el-button-group>
+      <span class="zoom-label">{{ Math.round(currentZoom * 100) }}%</span>
+    </div>
+
+    <div class="designer-main">
+      <!-- BPMN 画布 -->
+      <div class="canvas-container" ref="canvasRef">
+        <div class="canvas" ref="bpmnCanvas"></div>
+      </div>
+
+      <!-- 属性面板 -->
+      <div class="properties-panel" v-if="selectedElement">
+        <el-card shadow="never">
+          <template #header>
+            <div class="panel-header">
+              <span>属性面板</span>
+              <el-tag size="small" type="info">{{ elementTypeLabel }}</el-tag>
+            </div>
+          </template>
+          <el-form label-width="80px" size="small">
+            <el-form-item label="ID">
+              <el-input v-model="selectedElement.id" disabled />
+            </el-form-item>
+            <el-form-item label="名称">
+              <el-input v-model="elementProps.name" @blur="applyNameChange" placeholder="输入名称" />
+            </el-form-item>
+            <el-form-item label="审批人" v-if="isUserTask">
+              <el-input v-model="elementProps.assignee" @blur="applyAssigneeChange" placeholder="审批人ID或表达式" />
+            </el-form-item>
+            <el-form-item label="候选组" v-if="isUserTask">
+              <el-input v-model="elementProps.candidateGroups" @blur="applyCandidateGroupsChange" placeholder="候选组" />
+            </el-form-item>
+            <el-form-item label="条件表达式" v-if="isSequenceFlow">
+              <el-input v-model="elementProps.conditionExpression" @blur="applyConditionChange" type="textarea" :rows="2" />
+            </el-form-item>
+            <el-form-item label="文档说明">
+              <el-input v-model="elementProps.documentation" @blur="applyDocumentationChange" type="textarea" :rows="2" />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </div>
+
+    <!-- 保存对话框 -->
+    <el-dialog v-model="saveDialogVisible" title="保存模板" width="500px">
+      <el-form :model="saveForm" label-width="100px">
+        <el-form-item label="模板名称" required>
+          <el-input v-model="saveForm.name" placeholder="输入模板名称" />
+        </el-form-item>
+        <el-form-item label="分类">
+          <el-select v-model="saveForm.category" placeholder="选择分类" style="width:100%">
+            <el-option label="审批流程" value="approval" />
+            <el-option label="工作流程" value="workflow" />
+            <el-option label="通知流程" value="notification" />
+            <el-option label="巡检流程" value="inspection" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="saveForm.description" type="textarea" :rows="3" />
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-input v-model="saveForm.tags" placeholder="逗号分隔，如: 审批,通用" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="saveDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmSave" :loading="saving">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 导入对话框 -->
+    <el-dialog v-model="importDialogVisible" title="导入 BPMN XML" width="600px">
+      <el-input v-model="importXml" type="textarea" :rows="15" placeholder="粘贴 BPMN XML 内容" />
+      <template #footer>
+        <el-button @click="importDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmImport">导入</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  Document, FolderOpened, Download, Check,
+  RefreshLeft, RefreshRight, ZoomIn, ZoomOut, FullScreen
+} from '@element-plus/icons-vue'
+import { createTemplate, getTemplate, updateTemplate, type ProcessTemplate } from '@/api/bpmApi'
+
+const route = useRoute()
+const router = useRouter()
+
+// Refs
+const canvasRef = ref<HTMLElement>()
+const bpmnCanvas = ref<HTMLElement>()
+
+// State
+const currentZoom = ref(1)
+const selectedElement = ref<any>(null)
+const saveDialogVisible = ref(false)
+const importDialogVisible = ref(false)
+const importXml = ref('')
+const saving = ref(false)
+let viewer: any = null
+let modeler: any = null
+let commandStack: any = null
+
+const elementProps = reactive({
+  name: '',
+  assignee: '',
+  candidateGroups: '',
+  conditionExpression: '',
+  documentation: ''
+})
+
+const saveForm = reactive({
+  id: undefined as number | undefined,
+  name: '',
+  category: 'approval',
+  description: '',
+  tags: ''
+})
+
+// Computed
+const isUserTask = computed(() => selectedElement.value?.type === 'bpmn:UserTask')
+const isSequenceFlow = computed(() => selectedElement.value?.type === 'bpmn:SequenceFlow')
+
+const elementTypeLabel = computed(() => {
+  if (!selectedElement.value) return ''
+  const typeMap: Record<string, string> = {
+    'bpmn:StartEvent': '开始事件',
+    'bpmn:EndEvent': '结束事件',
+    'bpmn:UserTask': '用户任务',
+    'bpmn:ServiceTask': '服务任务',
+    'bpmn:ExclusiveGateway': '排他网关',
+    'bpmn:ParallelGateway': '并行网关',
+    'bpmn:InclusiveGateway': '包容网关',
+    'bpmn:SequenceFlow': '连接线',
+    'bpmn:Task': '任务',
+    'bpmn:SubProcess': '子流程',
+    'bpmn:IntermediateThrowEvent': '中间事件',
+    'bpmn:IntermediateCatchEvent': '中间捕获事件'
+  }
+  return typeMap[selectedElement.value.type] || selectedElement.value.type
+})
+
+// 默认 BPMN 模板
+const DEFAULT_BPMN = `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN20"
+             xmlns:bpmndi="http://www.omg.org/spec/BPMN20/di"
+             xmlns:dc="http://www.omg.org/spec/DD/20100524/DI"
+             xmlns:di="http://www.omg.org/spec/DD/20100524/DC"
+             id="Definitions_1"
+             targetNamespace="http://water.com/bpm">
+  <process id="Process_1" name="新建流程" isExecutable="true">
+    <startEvent id="StartEvent_1" name="开始"/>
+  </process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
+        <dc:Bounds x="180" y="160" width="36" height="36"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="187" y="203" width="22" height="14"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</definitions>`
+
+onMounted(async () => {
+  await initModeler()
+  // 如果有模板 ID，加载模板
+  const templateId = route.query.id
+  if (templateId) {
+    await loadTemplate(Number(templateId))
+  }
+})
+
+onBeforeUnmount(() => {
+  if (modeler) {
+    modeler.destroy()
+  }
+})
+
+/** 初始化 BPMN.js Modeler（CDN 加载） */
+async function initModeler() {
+  // 动态加载 bpmn-js CDN
+  await loadBpmnJs()
+
+  if (!bpmnCanvas.value) return
+
+  const BpmnModeler = (window as any).BpmnJS
+  if (!BpmnModeler) {
+    // CDN 加载失败时使用 fallback 简单画布
+    ElMessage.warning('BPMN.js CDN 加载失败，使用简化模式')
+    initFallbackCanvas()
+    return
+  }
+
+  modeler = new BpmnModeler({
+    container: bpmnCanvas.value,
+    keyboard: { bindTo: document },
+    additionalModules: [],
+    moddleExtensions: {}
+  })
+
+  commandStack = modeler.get('commandStack')
+
+  // 监听选中事件
+  const selection = modeler.get('selection')
+  const eventBus = modeler.get('eventBus')
+
+  eventBus.on('selection.changed', (e: any) => {
+    const selected = e.newSelection
+    if (selected.length === 1) {
+      selectedElement.value = selected[0]
+      loadElementProps(selected[0])
+    } else {
+      selectedElement.value = null
+    }
+  })
+
+  await modeler.importXML(DEFAULT_BPMN)
+  const canvas = modeler.get('canvas')
+  canvas.zoom('fit-viewport')
+}
+
+/** 加载 bpmn-js CDN */
+function loadBpmnJs(): Promise<void> {
+  return new Promise((resolve) => {
+    if ((window as any).BpmnJS) {
+      resolve()
+      return
+    }
+    // 加载 bpmn-js 独立版本
+    const script = document.createElement('script')
+    script.src = 'https://unpkg.com/bpmn-js@17.11.1/dist/bpmn-modeler.production.min.js'
+    script.onload = () => resolve()
+    script.onerror = () => resolve() // 允许 fallback
+    document.head.appendChild(script)
+
+    // 加载 bpmn-js CSS
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = 'https://unpkg.com/bpmn-js@17.11.1/dist/assets/diagram-js.css'
+    document.head.appendChild(link)
+
+    const link2 = document.createElement('link')
+    link2.rel = 'stylesheet'
+    link2.href = 'https://unpkg.com/bpmn-js@17.11.1/dist/assets/bpmn-js.css'
+    document.head.appendChild(link2)
+
+    const link3 = document.createElement('link')
+    link3.rel = 'stylesheet'
+    link3.href = 'https://unpkg.com/bpmn-js@17.11.1/dist/assets/bpmn-font/css/bpmn-embedded.css'
+    document.head.appendChild(link3)
+  })
+}
+
+/** Fallback: 简化 SVG 画布（CDN 不可用时） */
+function initFallbackCanvas() {
+  if (!bpmnCanvas.value) return
+  bpmnCanvas.value.innerHTML = `
+    <div style="padding:40px;text-align:center;color:#999;">
+      <h3>BPMN 设计器（简化模式）</h3>
+      <p>CDN 不可用，请确保网络连接正常。</p>
+      <p>您仍可通过导入/导出 XML 来编辑流程模板。</p>
+      <textarea id="fallback-xml" style="width:100%;height:300px;margin-top:20px;font-family:monospace;" placeholder="在此粘贴或编辑 BPMN XML"></textarea>
+    </div>
+  `
+}
+
+/** 加载元素属性 */
+function loadElementProps(element: any) {
+  const bo = element.businessObject
+  elementProps.name = bo.name || ''
+  elementProps.assignee = bo.assignee || ''
+  elementProps.candidateGroups = bo.candidateGroups || ''
+  elementProps.conditionExpression = bo.conditionExpression?.body || ''
+  elementProps.documentation = bo.documentation?.[0]?.text || ''
+}
+
+/** 应用名称变更 */
+function applyNameChange() {
+  if (!selectedElement.value || !modeler) return
+  const modeling = modeler.get('modeling')
+  modeling.updateProperties(selectedElement.value, { name: elementProps.name })
+}
+
+/** 应用审批人变更 */
+function applyAssigneeChange() {
+  if (!selectedElement.value || !modeler) return
+  const modeling = modeler.get('modeling')
+  modeling.updateProperties(selectedElement.value, { assignee: elementProps.assignee })
+}
+
+/** 应用候选组变更 */
+function applyCandidateGroupsChange() {
+  if (!selectedElement.value || !modeler) return
+  const modeling = modeler.get('modeling')
+  modeling.updateProperties(selectedElement.value, { candidateGroups: elementProps.candidateGroups })
+}
+
+/** 应用条件表达式变更 */
+function applyConditionChange() {
+  if (!selectedElement.value || !modeler) return
+  const moddle = modeler.get('moddle')
+  const modeling = modeler.get('modeling')
+  const condition = moddle.create('bpmn:FormalExpression', { body: elementProps.conditionExpression })
+  modeling.updateProperties(selectedElement.value, { conditionExpression: condition })
+}
+
+/** 应用文档说明变更 */
+function applyDocumentationChange() {
+  if (!selectedElement.value || !modeler) return
+  const moddle = modeler.get('moddle')
+  const modeling = modeler.get('modeling')
+  const doc = moddle.create('bpmn:Documentation', { text: elementProps.documentation })
+  modeling.updateProperties(selectedElement.value, { documentation: [doc] })
+}
+
+// 工具栏操作
+function handleNew() {
+  if (modeler) {
+    modeler.importXML(DEFAULT_BPMN)
+    saveForm.id = undefined
+    saveForm.name = ''
+    ElMessage.success('已创建新流程')
+  }
+}
+
+async function handleImport() {
+  importXml.value = ''
+  importDialogVisible.value = true
+}
+
+async function confirmImport() {
+  if (!importXml.value.trim()) {
+    ElMessage.warning('请输入 BPMN XML 内容')
+    return
+  }
+  try {
+    if (modeler) {
+      await modeler.importXML(importXml.value)
+      const canvas = modeler.get('canvas')
+      canvas.zoom('fit-viewport')
+    } else {
+      const textarea = document.getElementById('fallback-xml') as HTMLTextAreaElement
+      if (textarea) textarea.value = importXml.value
+    }
+    importDialogVisible.value = false
+    ElMessage.success('导入成功')
+  } catch (e: any) {
+    ElMessage.error('导入失败: ' + (e.message || 'XML 格式错误'))
+  }
+}
+
+async function handleExport() {
+  try {
+    if (modeler) {
+      const { xml } = await modeler.saveXML({ format: true })
+      downloadXml(xml)
+    } else {
+      const textarea = document.getElementById('fallback-xml') as HTMLTextAreaElement
+      if (textarea && textarea.value) {
+        downloadXml(textarea.value)
+      }
+    }
+    ElMessage.success('导出成功')
+  } catch (e: any) {
+    ElMessage.error('导出失败')
+  }
+}
+
+function downloadXml(xml: string) {
+  const blob = new Blob([xml], { type: 'application/xml' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${saveForm.name || 'process'}.bpmn`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+function handleSave() {
+  saveDialogVisible.value = true
+}
+
+async function confirmSave() {
+  if (!saveForm.name.trim()) {
+    ElMessage.warning('请输入模板名称')
+    return
+  }
+  saving.value = true
+  try {
+    let xml = ''
+    if (modeler) {
+      const result = await modeler.saveXML({ format: true })
+      xml = result.xml
+    } else {
+      const textarea = document.getElementById('fallback-xml') as HTMLTextAreaElement
+      xml = textarea?.value || DEFAULT_BPMN
+    }
+
+    const data: ProcessTemplate = {
+      name: saveForm.name,
+      description: saveForm.description,
+      bpmnXml: xml,
+      category: saveForm.category,
+      tags: saveForm.tags
+    }
+
+    if (saveForm.id) {
+      await updateTemplate(saveForm.id, data)
+      ElMessage.success('模板更新成功')
+    } else {
+      await createTemplate(data)
+      ElMessage.success('模板创建成功')
+    }
+    saveDialogVisible.value = false
+  } catch (e: any) {
+    ElMessage.error('保存失败: ' + (e.message || ''))
+  } finally {
+    saving.value = false
+  }
+}
+
+function handleUndo() {
+  if (commandStack) {
+    try { commandStack.undo() } catch {}
+  }
+}
+
+function handleRedo() {
+  if (commandStack) {
+    try { commandStack.redo() } catch {}
+  }
+}
+
+function handleZoomIn() {
+  if (!modeler) return
+  currentZoom.value = Math.min(currentZoom.value + 0.1, 3)
+  modeler.get('canvas').zoom(currentZoom.value)
+}
+
+function handleZoomOut() {
+  if (!modeler) return
+  currentZoom.value = Math.max(currentZoom.value - 0.1, 0.2)
+  modeler.get('canvas').zoom(currentZoom.value)
+}
+
+function handleResetZoom() {
+  if (!modeler) return
+  currentZoom.value = 1
+  modeler.get('canvas').zoom('fit-viewport')
+}
+
+/** 加载已有模板 */
+async function loadTemplate(id: number) {
+  try {
+    const res: any = await getTemplate(id)
+    const template = res.data
+    if (template) {
+      saveForm.id = template.id
+      saveForm.name = template.name
+      saveForm.category = template.category || 'approval'
+      saveForm.description = template.description || ''
+      saveForm.tags = template.tags || ''
+      if (template.bpmnXml && modeler) {
+        await modeler.importXML(template.bpmnXml)
+        const canvas = modeler.get('canvas')
+        canvas.zoom('fit-viewport')
+      }
+    }
+  } catch (e: any) {
+    ElMessage.error('加载模板失败')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.bpmn-designer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+}
+
+.toolbar {
+  padding: 10px 16px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+
+  .zoom-label {
+    font-size: 13px;
+    color: #606266;
+    min-width: 50px;
+    text-align: center;
+  }
+}
+
+.designer-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.canvas-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+
+  .canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.properties-panel {
+  width: 320px;
+  border-left: 1px solid #e4e7ed;
+  background: #fff;
+  overflow-y: auto;
+  flex-shrink: 0;
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 600;
+  }
+
+  :deep(.el-card__body) {
+    padding: 12px;
+  }
+}
+</style>

frontend/src/views/bpm/TemplateListView.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="template-list">
+    <!-- 顶部操作栏 -->
+    <div class="page-header">
+      <div class="header-left">
+        <h2>流程模板管理</h2>
+        <el-tag type="success" size="small">BPMN.js</el-tag>
+      </div>
+      <el-button type="primary" :icon="Plus" @click="handleCreate">新建模板</el-button>
+    </div>
+
+    <!-- 搜索/筛选栏 -->
+    <el-card shadow="never" class="filter-card">
+      <el-form :inline="true" :model="queryForm">
+        <el-form-item label="关键字">
+          <el-input v-model="queryForm.keyword" placeholder="搜索模板名称/描述" clearable @keyup.enter="loadData" :prefix-icon="Search" />
+        </el-form-item>
+        <el-form-item label="分类">
+          <el-select v-model="queryForm.category" placeholder="全部分类" clearable style="width:160px">
+            <el-option label="审批流程" value="approval" />
+            <el-option label="工作流程" value="workflow" />
+            <el-option label="通知流程" value="notification" />
+            <el-option label="巡检流程" value="inspection" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="queryForm.status" placeholder="全部状态" clearable style="width:130px">
+            <el-option label="草稿" :value="0" />
+            <el-option label="已发布" :value="1" />
+            <el-option label="已停用" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="loadData">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 热门模板 -->
+    <el-card shadow="never" class="hot-section" v-if="hotList.length > 0">
+      <template #header>
+        <span>🔥 热门模板</span>
+      </template>
+      <div class="hot-grid">
+        <div v-for="item in hotList" :key="item.id" class="hot-card" @click="handleEdit(item)">
+          <div class="hot-name">{{ item.name }}</div>
+          <div class="hot-meta">
+            <el-tag size="small">{{ getCategoryLabel(item.category) }}</el-tag>
+            <span class="use-count">使用 {{ item.useCount }} 次</span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 模板列表 -->
+    <el-card shadow="never" class="table-card">
+      <el-table :data="tableData" v-loading="loading" stripe style="width:100%" @row-click="handleEdit">
+        <el-table-column prop="id" label="ID" width="70" />
+        <el-table-column prop="name" label="模板名称" min-width="180">
+          <template #default="{ row }">
+            <span class="template-name">{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="category" label="分类" width="110">
+          <template #default="{ row }">
+            <el-tag size="small">{{ getCategoryLabel(row.category) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="90">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)" size="small">{{ getStatusLabel(row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="useCount" label="使用次数" width="100" align="center" />
+        <el-table-column prop="tags" label="标签" width="160">
+          <template #default="{ row }">
+            <el-tag v-for="tag in (row.tags || '').split(',').filter(Boolean)" :key="tag" size="small" type="info" class="tag-item">{{ tag }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="creatorName" label="创建人" width="110" />
+        <el-table-column prop="createdAt" label="创建时间" width="170" />
+        <el-table-column label="操作" width="280" fixed="right">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" @click.stop="handleOpenDesigner(row)">设计</el-button>
+            <el-button size="small" @click.stop="handleCopy(row)">复制</el-button>
+            <el-button size="small" v-if="row.status !== 1" type="success" @click.stop="handlePublish(row)">发布</el-button>
+            <el-button size="small" v-if="row.status === 1" type="warning" @click.stop="handleDisable(row)">停用</el-button>
+            <el-popconfirm title="确定删除该模板？" @confirm="handleDelete(row)">
+              <template #reference>
+                <el-button size="small" type="danger" @click.stop>删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="queryForm.page"
+          v-model:page-size="queryForm.size"
+          :page-sizes="[10, 20, 50]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="loadData"
+          @current-change="loadData"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus, Search } from '@element-plus/icons-vue'
+import {
+  listTemplates, deleteTemplate, publishTemplate,
+  disableTemplate, copyTemplate, hotTemplates,
+  type ProcessTemplate, type TemplateQuery
+} from '@/api/bpmApi'
+
+const router = useRouter()
+
+const loading = ref(false)
+const tableData = ref<ProcessTemplate[]>([])
+const hotList = ref<ProcessTemplate[]>([])
+const total = ref(0)
+
+const queryForm = reactive<TemplateQuery>({
+  keyword: '',
+  category: '',
+  status: undefined,
+  page: 1,
+  size: 10
+})
+
+onMounted(() => {
+  loadData()
+  loadHotTemplates()
+})
+
+async function loadData() {
+  loading.value = true
+  try {
+    const res: any = await listTemplates(queryForm)
+    const page = res.data
+    tableData.value = page.records || []
+    total.value = page.total || 0
+  } catch (e) {
+    ElMessage.error('加载模板列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadHotTemplates() {
+  try {
+    const res: any = await hotTemplates(6)
+    hotList.value = res.data || []
+  } catch {}
+}
+
+function resetQuery() {
+  queryForm.keyword = ''
+  queryForm.category = ''
+  queryForm.status = undefined
+  queryForm.page = 1
+  loadData()
+}
+
+function handleCreate() {
+  router.push({ name: 'bpmDesigner' })
+}
+
+function handleEdit(row: ProcessTemplate) {
+  router.push({ name: 'bpmDesigner', query: { id: String(row.id) } })
+}
+
+function handleOpenDesigner(row: ProcessTemplate) {
+  router.push({ name: 'bpmDesigner', query: { id: String(row.id) } })
+}
+
+async function handleCopy(row: ProcessTemplate) {
+  try {
+    await copyTemplate(row.id!)
+    ElMessage.success('复制成功')
+    loadData()
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
+async function handlePublish(row: ProcessTemplate) {
+  try {
+    await publishTemplate(row.id!)
+    ElMessage.success('发布成功')
+    loadData()
+  } catch {
+    ElMessage.error('发布失败')
+  }
+}
+
+async function handleDisable(row: ProcessTemplate) {
+  try {
+    await disableTemplate(row.id!)
+    ElMessage.success('已停用')
+    loadData()
+  } catch {
+    ElMessage.error('停用失败')
+  }
+}
+
+async function handleDelete(row: ProcessTemplate) {
+  try {
+    await deleteTemplate(row.id!)
+    ElMessage.success('删除成功')
+    loadData()
+  } catch {
+    ElMessage.error('删除失败')
+  }
+}
+
+function getCategoryLabel(cat?: string) {
+  const map: Record<string, string> = {
+    approval: '审批',
+    workflow: '工作流',
+    notification: '通知',
+    inspection: '巡检'
+  }
+  return map[cat || ''] || cat || '-'
+}
+
+function getStatusLabel(status?: number) {
+  const map: Record<number, string> = { 0: '草稿', 1: '已发布', 2: '已停用' }
+  return map[status ?? 0] || '-'
+}
+
+function getStatusType(status?: number): '' | 'success' | 'warning' | 'danger' | 'info' {
+  const map: Record<number, '' | 'success' | 'warning' | 'danger' | 'info'> = { 0: 'info', 1: 'success', 2: 'warning' }
+  return map[status ?? 0] || 'info'
+}
+</script>
+
+<style scoped lang="scss">
+.template-list {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    h2 {
+      margin: 0;
+      font-size: 20px;
+      color: #303133;
+    }
+  }
+}
+
+.filter-card {
+  margin-bottom: 16px;
+
+  :deep(.el-card__body) {
+    padding-bottom: 0;
+  }
+}
+
+.hot-section {
+  margin-bottom: 16px;
+
+  .hot-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 12px;
+  }
+
+  .hot-card {
+    padding: 12px;
+    border: 1px solid #e4e7ed;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: #409eff;
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+    }
+
+    .hot-name {
+      font-weight: 600;
+      margin-bottom: 6px;
+      font-size: 14px;
+    }
+
+    .hot-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .use-count {
+        font-size: 12px;
+        color: #909399;
+      }
+    }
+  }
+}
+
+.table-card {
+  .template-name {
+    font-weight: 500;
+    color: #303133;
+    cursor: pointer;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+
+  .tag-item {
+    margin-right: 4px;
+    margin-bottom: 2px;
+  }
+
+  .pagination-wrapper {
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

wm-bpm/src/main/java/com/water/bpm/controller/ProcessTemplateController.java

@@ -0,0 +1,84 @@
+package com.water.bpm.controller;
+
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.water.bpm.entity.ProcessTemplate;
+import com.water.bpm.entity.dto.ProcessTemplateQuery;
+import com.water.bpm.service.ProcessTemplateService;
+import com.water.common.core.result.R;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+/**
+ * 流程模板管理 Controller
+ */
+@Tag(name = "流程模板管理")
+@RestController
+@RequestMapping("/bpm/template")
+@RequiredArgsConstructor
+public class ProcessTemplateController {
+
+    private final ProcessTemplateService templateService;
+
+    @Operation(summary = "创建模板")
+    @PostMapping
+    public R<ProcessTemplate> create(@RequestBody ProcessTemplate template) {
+        return R.ok(templateService.create(template));
+    }
+
+    @Operation(summary = "获取模板详情")
+    @GetMapping("/{id}")
+    public R<ProcessTemplate> getById(@PathVariable Long id) {
+        ProcessTemplate template = templateService.getById(id);
+        if (template == null) {
+            return R.fail("模板不存在");
+        }
+        return R.ok(template);
+    }
+
+    @Operation(summary = "更新模板")
+    @PutMapping("/{id}")
+    public R<ProcessTemplate> update(@PathVariable Long id, @RequestBody ProcessTemplate template) {
+        return R.ok(templateService.update(id, template));
+    }
+
+    @Operation(summary = "删除模板")
+    @DeleteMapping("/{id}")
+    public R<Void> delete(@PathVariable Long id) {
+        templateService.delete(id);
+        return R.ok();
+    }
+
+    @Operation(summary = "分页查询模板")
+    @GetMapping
+    public R<IPage<ProcessTemplate>> page(ProcessTemplateQuery query) {
+        return R.ok(templateService.page(query));
+    }
+
+    @Operation(summary = "发布模板")
+    @PutMapping("/{id}/publish")
+    public R<ProcessTemplate> publish(@PathVariable Long id) {
+        return R.ok(templateService.publish(id));
+    }
+
+    @Operation(summary = "停用模板")
+    @PutMapping("/{id}/disable")
+    public R<ProcessTemplate> disable(@PathVariable Long id) {
+        return R.ok(templateService.disable(id));
+    }
+
+    @Operation(summary = "复制模板")
+    @PostMapping("/{id}/copy")
+    public R<ProcessTemplate> copy(@PathVariable Long id) {
+        return R.ok(templateService.copy(id));
+    }
+
+    @Operation(summary = "热门模板")
+    @GetMapping("/hot")
+    public R<List<ProcessTemplate>> hot(@RequestParam(defaultValue = "10") int limit) {
+        return R.ok(templateService.hotTemplates(limit));
+    }
+}

wm-bpm/src/main/java/com/water/bpm/entity/ProcessTemplate.java

@@ -0,0 +1,46 @@
+package com.water.bpm.entity;
+
+import com.baomidou.mybatisplus.annotation.*;
+import com.water.common.core.entity.BaseEntity;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+/**
+ * 流程模板实体
+ * 支持 BPMN.js 可视化设计器保存的模板
+ */
+@Data
+@EqualsAndHashCode(callSuper = true)
+@TableName("bpm_process_template")
+public class ProcessTemplate extends BaseEntity {
+
+    /** 模板名称 */
+    private String name;
+
+    /** 模板描述 */
+    private String description;
+
+    /** BPMN XML 内容 */
+    private String bpmnXml;
+
+    /** 模板分类: approval/workflow/notification/inspection 等 */
+    private String category;
+
+    /** 标签，逗号分隔 */
+    private String tags;
+
+    /** 使用次数 */
+    private Integer useCount;
+
+    /** 状态: 0-草稿 1-已发布 2-已停用 */
+    private Integer status;
+
+    /** 创建人ID */
+    private Long creatorId;
+
+    /** 创建人名称 */
+    private String creatorName;
+
+    /** 租户ID */
+    private String tenantId;
+}

wm-bpm/src/main/java/com/water/bpm/entity/dto/ProcessTemplateQuery.java

@@ -0,0 +1,28 @@
+package com.water.bpm.entity.dto;
+
+import lombok.Data;
+
+/**
+ * 流程模板查询参数
+ */
+@Data
+public class ProcessTemplateQuery {
+
+    /** 模板名称关键字 */
+    private String keyword;
+
+    /** 分类 */
+    private String category;
+
+    /** 状态: 0-草稿 1-已发布 2-已停用 */
+    private Integer status;
+
+    /** 标签 */
+    private String tag;
+
+    /** 页码 */
+    private Integer page = 1;
+
+    /** 每页大小 */
+    private Integer size = 10;
+}

wm-bpm/src/main/java/com/water/bpm/mapper/ProcessTemplateMapper.java

@@ -0,0 +1,29 @@
+package com.water.bpm.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.water.bpm.entity.ProcessTemplate;
+import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Select;
+import org.apache.ibatis.annotations.Update;
+
+import java.util.List;
+
+/**
+ * 流程模板 Mapper
+ */
+@Mapper
+public interface ProcessTemplateMapper extends BaseMapper<ProcessTemplate> {
+
+    /**
+     * 获取热门模板（按使用次数倒序）
+     */
+    @Select("SELECT * FROM bpm_process_template WHERE status = 1 AND deleted = 0 ORDER BY use_count DESC LIMIT #{limit}")
+    List<ProcessTemplate> selectHotTemplates(@Param("limit") int limit);
+
+    /**
+     * 递增使用次数
+     */
+    @Update("UPDATE bpm_process_template SET use_count = use_count + 1 WHERE id = #{id}")
+    int incrementUseCount(@Param("id") Long id);
+}

wm-bpm/src/main/java/com/water/bpm/service/ProcessTemplateService.java

@@ -0,0 +1,175 @@
+package com.water.bpm.service;
+
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.water.bpm.entity.ProcessTemplate;
+import com.water.bpm.entity.dto.ProcessTemplateQuery;
+import com.water.bpm.mapper.ProcessTemplateMapper;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.util.StringUtils;
+
+import java.time.LocalDateTime;
+import java.util.List;
+
+/**
+ * 流程模板 Service
+ * 提供模板 CRUD、发布/停用/复制/热门/分类搜索能力
+ */
+@Service
+@RequiredArgsConstructor
+public class ProcessTemplateService {
+
+    private final ProcessTemplateMapper templateMapper;
+
+    /**
+     * 创建模板
+     */
+    @Transactional
+    public ProcessTemplate create(ProcessTemplate template) {
+        if (template.getUseCount() == null) {
+            template.setUseCount(0);
+        }
+        if (template.getStatus() == null) {
+            template.setStatus(0); // 草稿
+        }
+        template.setCreatedAt(LocalDateTime.now());
+        template.setUpdatedAt(LocalDateTime.now());
+        templateMapper.insert(template);
+        return template;
+    }
+
+    /**
+     * 根据 ID 获取模板
+     */
+    public ProcessTemplate getById(Long id) {
+        return templateMapper.selectById(id);
+    }
+
+    /**
+     * 更新模板
+     */
+    @Transactional
+    public ProcessTemplate update(Long id, ProcessTemplate update) {
+        ProcessTemplate existing = templateMapper.selectById(id);
+        if (existing == null) {
+            throw new RuntimeException("模板不存在: " + id);
+        }
+        update.setId(id);
+        update.setUpdatedAt(LocalDateTime.now());
+        templateMapper.updateById(update);
+        return templateMapper.selectById(id);
+    }
+
+    /**
+     * 删除模板（逻辑删除）
+     */
+    @Transactional
+    public void delete(Long id) {
+        ProcessTemplate existing = templateMapper.selectById(id);
+        if (existing == null) {
+            throw new RuntimeException("模板不存在: " + id);
+        }
+        templateMapper.deleteById(id);
+    }
+
+    /**
+     * 分页查询模板
+     */
+    public IPage<ProcessTemplate> page(ProcessTemplateQuery query) {
+        Page<ProcessTemplate> page = new Page<>(query.getPage(), query.getSize());
+        LambdaQueryWrapper<ProcessTemplate> wrapper = new LambdaQueryWrapper<>();
+
+        if (StringUtils.hasText(query.getKeyword())) {
+            wrapper.and(w -> w
+                    .like(ProcessTemplate::getName, query.getKeyword())
+                    .or()
+                    .like(ProcessTemplate::getDescription, query.getKeyword()));
+        }
+        if (StringUtils.hasText(query.getCategory())) {
+            wrapper.eq(ProcessTemplate::getCategory, query.getCategory());
+        }
+        if (query.getStatus() != null) {
+            wrapper.eq(ProcessTemplate::getStatus, query.getStatus());
+        }
+        if (StringUtils.hasText(query.getTag())) {
+            wrapper.like(ProcessTemplate::getTags, query.getTag());
+        }
+
+        wrapper.orderByDesc(ProcessTemplate::getCreatedAt);
+        return templateMapper.selectPage(page, wrapper);
+    }
+
+    /**
+     * 发布模板
+     */
+    @Transactional
+    public ProcessTemplate publish(Long id) {
+        ProcessTemplate template = templateMapper.selectById(id);
+        if (template == null) {
+            throw new RuntimeException("模板不存在: " + id);
+        }
+        template.setStatus(1);
+        template.setUpdatedAt(LocalDateTime.now());
+        templateMapper.updateById(template);
+        return template;
+    }
+
+    /**
+     * 停用模板
+     */
+    @Transactional
+    public ProcessTemplate disable(Long id) {
+        ProcessTemplate template = templateMapper.selectById(id);
+        if (template == null) {
+            throw new RuntimeException("模板不存在: " + id);
+        }
+        template.setStatus(2);
+        template.setUpdatedAt(LocalDateTime.now());
+        templateMapper.updateById(template);
+        return template;
+    }
+
+    /**
+     * 复制模板
+     */
+    @Transactional
+    public ProcessTemplate copy(Long id) {
+        ProcessTemplate source = templateMapper.selectById(id);
+        if (source == null) {
+            throw new RuntimeException("模板不存在: " + id);
+        }
+        ProcessTemplate copy = new ProcessTemplate();
+        copy.setName(source.getName() + " (副本)");
+        copy.setDescription(source.getDescription());
+        copy.setBpmnXml(source.getBpmnXml());
+        copy.setCategory(source.getCategory());
+        copy.setTags(source.getTags());
+        copy.setUseCount(0);
+        copy.setStatus(0); // 草稿
+        copy.setCreatorId(source.getCreatorId());
+        copy.setCreatorName(source.getCreatorName());
+        copy.setTenantId(source.getTenantId());
+        copy.setCreatedAt(LocalDateTime.now());
+        copy.setUpdatedAt(LocalDateTime.now());
+        templateMapper.insert(copy);
+        return copy;
+    }
+
+    /**
+     * 获取热门模板
+     */
+    public List<ProcessTemplate> hotTemplates(int limit) {
+        return templateMapper.selectHotTemplates(limit);
+    }
+
+    /**
+     * 递增使用次数
+     */
+    @Transactional
+    public void incrementUseCount(Long id) {
+        templateMapper.incrementUseCount(id);
+    }
+}

wm-bpm/src/main/resources/db/V_bpm_template.sql

@@ -0,0 +1,115 @@
+-- 流程模板表（BPMN.js 设计器集成）
+CREATE TABLE IF NOT EXISTS bpm_process_template (
+    id              BIGSERIAL       PRIMARY KEY,
+    name            VARCHAR(200)    NOT NULL,
+    description     TEXT,
+    bpmn_xml        TEXT,
+    category        VARCHAR(50),
+    tags            VARCHAR(500),
+    use_count       INT             DEFAULT 0,
+    status          SMALLINT        DEFAULT 0,      -- 0-草稿 1-已发布 2-已停用
+    creator_id      BIGINT,
+    creator_name    VARCHAR(100),
+    tenant_id       VARCHAR(50),
+    deleted         SMALLINT        DEFAULT 0,
+    created_at      TIMESTAMP       DEFAULT CURRENT_TIMESTAMP,
+    updated_at      TIMESTAMP       DEFAULT CURRENT_TIMESTAMP
+);
+
+-- 索引
+CREATE INDEX IF NOT EXISTS idx_template_category ON bpm_process_template(category);
+CREATE INDEX IF NOT EXISTS idx_template_status ON bpm_process_template(status);
+CREATE INDEX IF NOT EXISTS idx_template_use_count ON bpm_process_template(use_count DESC);
+
+-- 预置数据
+INSERT INTO bpm_process_template (name, description, bpmn_xml, category, tags, use_count, status, creator_name)
+VALUES
+('通用审批流程', '适用于一般性审批场景，包含发起-审批-完成三个节点',
+ '<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN20" xmlns:bpmndi="http://www.omg.org/spec/BPMN20/di" xmlns:dc="http://www.omg.org/spec/DD/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://water.com/bpm">
+  <process id="Process_1" name="通用审批流程" isExecutable="true">
+    <startEvent id="StartEvent_1" name="开始"/>
+    <userTask id="UserTask_1" name="审批节点"/>
+    <endEvent id="EndEvent_1" name="结束"/>
+    <sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="UserTask_1"/>
+    <sequenceFlow id="Flow_2" sourceRef="UserTask_1" targetRef="EndEvent_1"/>
+  </process>
+</definitions>',
+ 'approval', '审批,通用,基础', 15, 1, '系统管理员'),
+
+('设备巡检流程', '适用于设备巡检任务的分派与执行',
+ '<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN20" id="Definitions_2" targetNamespace="http://water.com/bpm">
+  <process id="Process_2" name="设备巡检流程" isExecutable="true">
+    <startEvent id="StartEvent_1" name="创建巡检任务"/>
+    <userTask id="UserTask_1" name="分派巡检员"/>
+    <userTask id="UserTask_2" name="执行巡检"/>
+    <exclusiveGateway id="Gateway_1" name="巡检结果"/>
+    <userTask id="UserTask_3" name="异常处理"/>
+    <endEvent id="EndEvent_1" name="完成"/>
+    <sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="UserTask_1"/>
+    <sequenceFlow id="Flow_2" sourceRef="UserTask_1" targetRef="UserTask_2"/>
+    <sequenceFlow id="Flow_3" sourceRef="UserTask_2" targetRef="Gateway_1"/>
+    <sequenceFlow id="Flow_4" sourceRef="Gateway_1" targetRef="EndEvent_1"/>
+    <sequenceFlow id="Flow_5" sourceRef="Gateway_1" targetRef="UserTask_3"/>
+    <sequenceFlow id="Flow_6" sourceRef="UserTask_3" targetRef="EndEvent_1"/>
+  </process>
+</definitions>',
+ 'inspection', '巡检,设备,外勤', 8, 1, '系统管理员'),
+
+('水质异常处理流程', '水质监测异常时的应急处理流程',
+ '<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN20" id="Definitions_3" targetNamespace="http://water.com/bpm">
+  <process id="Process_3" name="水质异常处理流程" isExecutable="true">
+    <startEvent id="StartEvent_1" name="异常报警"/>
+    <userTask id="UserTask_1" name="值班确认"/>
+    <userTask id="UserTask_2" name="现场取样"/>
+    <userTask id="UserTask_3" name="化验分析"/>
+    <exclusiveGateway id="Gateway_1" name="是否超标"/>
+    <userTask id="UserTask_4" name="应急处置"/>
+    <userTask id="UserTask_5" name="上报主管部门"/>
+    <endEvent id="EndEvent_1" name="归档"/>
+    <sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="UserTask_1"/>
+    <sequenceFlow id="Flow_2" sourceRef="UserTask_1" targetRef="UserTask_2"/>
+    <sequenceFlow id="Flow_3" sourceRef="UserTask_2" targetRef="UserTask_3"/>
+    <sequenceFlow id="Flow_4" sourceRef="UserTask_3" targetRef="Gateway_1"/>
+    <sequenceFlow id="Flow_5" sourceRef="Gateway_1" targetRef="EndEvent_1"/>
+    <sequenceFlow id="Flow_6" sourceRef="Gateway_1" targetRef="UserTask_4"/>
+    <sequenceFlow id="Flow_7" sourceRef="UserTask_4" targetRef="UserTask_5"/>
+    <sequenceFlow id="Flow_8" sourceRef="UserTask_5" targetRef="EndEvent_1"/>
+  </process>
+</definitions>',
+ 'workflow', '水质,应急,监测', 12, 1, '系统管理员'),
+
+('请假审批流程', '员工请假多级审批流程',
+ '<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN20" id="Definitions_4" targetNamespace="http://water.com/bpm">
+  <process id="Process_4" name="请假审批流程" isExecutable="true">
+    <startEvent id="StartEvent_1" name="提交申请"/>
+    <userTask id="UserTask_1" name="直属主管审批"/>
+    <exclusiveGateway id="Gateway_1" name="天数判断"/>
+    <userTask id="UserTask_2" name="部门经理审批"/>
+    <endEvent id="EndEvent_1" name="审批完成"/>
+    <sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="UserTask_1"/>
+    <sequenceFlow id="Flow_2" sourceRef="UserTask_1" targetRef="Gateway_1"/>
+    <sequenceFlow id="Flow_3" sourceRef="Gateway_1" targetRef="EndEvent_1"/>
+    <sequenceFlow id="Flow_4" sourceRef="Gateway_1" targetRef="UserTask_2"/>
+    <sequenceFlow id="Flow_5" sourceRef="UserTask_2" targetRef="EndEvent_1"/>
+  </process>
+</definitions>',
+ 'approval', '请假,人事,审批', 20, 1, '系统管理员'),
+
+('通知发布流程', '内部通知/公告的审批与发布',
+ '<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN20" id="Definitions_5" targetNamespace="http://water.com/bpm">
+  <process id="Process_5" name="通知发布流程" isExecutable="true">
+    <startEvent id="StartEvent_1" name="拟稿"/>
+    <userTask id="UserTask_1" name="主管审核"/>
+    <userTask id="UserTask_2" name="发布通知"/>
+    <endEvent id="EndEvent_1" name="已发布"/>
+    <sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="UserTask_1"/>
+    <sequenceFlow id="Flow_2" sourceRef="UserTask_1" targetRef="UserTask_2"/>
+    <sequenceFlow id="Flow_3" sourceRef="UserTask_2" targetRef="EndEvent_1"/>
+  </process>
+</definitions>',
+ 'notification', '通知,公告,发布', 5, 1, '系统管理员');

wm-bpm/src/test/java/com/water/bpm/service/ProcessTemplateServiceTest.java

@@ -0,0 +1,175 @@
+package com.water.bpm.service;
+
+import com.water.bpm.entity.ProcessTemplate;
+import com.water.bpm.entity.dto.ProcessTemplateQuery;
+import com.water.bpm.mapper.ProcessTemplateMapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.util.Arrays;
+import java.util.List;
+
+import static org.junit.jupiter.api.Assertions.*;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.*;
+
+/**
+ * ProcessTemplateService 单元测试
+ */
+@ExtendWith(MockitoExtension.class)
+@DisplayName("流程模板服务测试")
+class ProcessTemplateServiceTest {
+
+    @Mock
+    private ProcessTemplateMapper templateMapper;
+
+    @InjectMocks
+    private ProcessTemplateService templateService;
+
+    private ProcessTemplate sampleTemplate;
+
+    @BeforeEach
+    void setUp() {
+        sampleTemplate = new ProcessTemplate();
+        sampleTemplate.setId(1L);
+        sampleTemplate.setName("测试模板");
+        sampleTemplate.setDescription("用于单元测试的模板");
+        sampleTemplate.setBpmnXml("<?xml version=\"1.0\"?><definitions/>");
+        sampleTemplate.setCategory("approval");
+        sampleTemplate.setTags("测试,审批");
+        sampleTemplate.setUseCount(0);
+        sampleTemplate.setStatus(0);
+    }
+
+    @Test
+    @DisplayName("创建模板 - 成功")
+    void create_success() {
+        when(templateMapper.insert(any(ProcessTemplate.class))).thenReturn(1);
+
+        ProcessTemplate result = templateService.create(sampleTemplate);
+
+        assertNotNull(result);
+        assertEquals("测试模板", result.getName());
+        assertEquals(0, result.getUseCount());
+        assertEquals(0, result.getStatus());
+        verify(templateMapper, times(1)).insert(any(ProcessTemplate.class));
+    }
+
+    @Test
+    @DisplayName("获取模板详情 - 存在")
+    void getById_exists() {
+        when(templateMapper.selectById(1L)).thenReturn(sampleTemplate);
+
+        ProcessTemplate result = templateService.getById(1L);
+
+        assertNotNull(result);
+        assertEquals(1L, result.getId());
+        assertEquals("测试模板", result.getName());
+    }
+
+    @Test
+    @DisplayName("更新模板 - 成功")
+    void update_success() {
+        when(templateMapper.selectById(1L)).thenReturn(sampleTemplate);
+        when(templateMapper.updateById(any(ProcessTemplate.class))).thenReturn(1);
+        when(templateMapper.selectById(1L)).thenReturn(sampleTemplate);
+
+        ProcessTemplate update = new ProcessTemplate();
+        update.setName("更新后的模板");
+
+        ProcessTemplate result = templateService.update(1L, update);
+
+        assertNotNull(result);
+        verify(templateMapper, times(1)).updateById(any(ProcessTemplate.class));
+    }
+
+    @Test
+    @DisplayName("更新模板 - 不存在抛异常")
+    void update_notFound() {
+        when(templateMapper.selectById(99L)).thenReturn(null);
+
+        ProcessTemplate update = new ProcessTemplate();
+        assertThrows(RuntimeException.class, () -> templateService.update(99L, update));
+    }
+
+    @Test
+    @DisplayName("删除模板 - 成功")
+    void delete_success() {
+        when(templateMapper.selectById(1L)).thenReturn(sampleTemplate);
+        when(templateMapper.deleteById(1L)).thenReturn(1);
+
+        assertDoesNotThrow(() -> templateService.delete(1L));
+        verify(templateMapper, times(1)).deleteById(1L);
+    }
+
+    @Test
+    @DisplayName("删除模板 - 不存在抛异常")
+    void delete_notFound() {
+        when(templateMapper.selectById(99L)).thenReturn(null);
+
+        assertThrows(RuntimeException.class, () -> templateService.delete(99L));
+    }
+
+    @Test
+    @DisplayName("发布模板 - 状态变更为1")
+    void publish_success() {
+        when(templateMapper.selectById(1L)).thenReturn(sampleTemplate);
+        when(templateMapper.updateById(any(ProcessTemplate.class))).thenReturn(1);
+
+        ProcessTemplate result = templateService.publish(1L);
+
+        assertEquals(1, result.getStatus());
+    }
+
+    @Test
+    @DisplayName("停用模板 - 状态变更为2")
+    void disable_success() {
+        when(templateMapper.selectById(1L)).thenReturn(sampleTemplate);
+        when(templateMapper.updateById(any(ProcessTemplate.class))).thenReturn(1);
+
+        ProcessTemplate result = templateService.disable(1L);
+
+        assertEquals(2, result.getStatus());
+    }
+
+    @Test
+    @DisplayName("复制模板 - 生成副本")
+    void copy_success() {
+        when(templateMapper.selectById(1L)).thenReturn(sampleTemplate);
+        when(templateMapper.insert(any(ProcessTemplate.class))).thenReturn(1);
+
+        ProcessTemplate result = templateService.copy(1L);
+
+        assertNotNull(result);
+        assertTrue(result.getName().contains("副本"));
+        assertEquals(0, result.getUseCount());
+        assertEquals(0, result.getStatus());
+    }
+
+    @Test
+    @DisplayName("热门模板 - 返回按使用次数排序的列表")
+    void hotTemplates_success() {
+        ProcessTemplate hot = new ProcessTemplate();
+        hot.setUseCount(100);
+        when(templateMapper.selectHotTemplates(5)).thenReturn(Arrays.asList(hot, sampleTemplate));
+
+        List<ProcessTemplate> result = templateService.hotTemplates(5);
+
+        assertEquals(2, result.size());
+    }
+
+    @Test
+    @DisplayName("递增使用次数")
+    void incrementUseCount_success() {
+        when(templateMapper.incrementUseCount(1L)).thenReturn(1);
+
+        assertDoesNotThrow(() -> templateService.incrementUseCount(1L));
+        verify(templateMapper, times(1)).incrementUseCount(1L);
+    }
+}