feat(workflow): add workflow engine module (Phase 4)

Implement complete workflow engine with BPMN subset support:

Backend (erp-workflow crate):
- Token-driven execution engine with exclusive/parallel gateway support
- BPMN parser with flow graph validation
- Expression evaluator for conditional branching
- Process definition CRUD with draft/publish lifecycle
- Process instance management (start, suspend, terminate)
- Task service (pending, complete, delegate)
- PostgreSQL advisory locks for concurrent safety
- 5 database tables: process_definitions, process_instances,
  tokens, tasks, process_variables
- 13 API endpoints with RBAC protection
- Timeout checker framework (placeholder)

Frontend:
- Workflow page with 4 tabs (definitions, pending, completed, monitor)
- React Flow visual process designer (@xyflow/react)
- Process viewer with active node highlighting
- 3 API client modules for workflow endpoints
- Sidebar menu integration

apps/web/src/App.tsx

@@ -9,6 +9,7 @@ import Roles from './pages/Roles';
 import Users from './pages/Users';
 import Organizations from './pages/Organizations';
 import Settings from './pages/Settings';
+import Workflow from './pages/Workflow';
 import { useAuthStore } from './stores/auth';
 import { useAppStore } from './stores/app';
 
@@ -46,6 +47,7 @@ export default function App() {
                     <Route path="/users" element={<Users />} />
                     <Route path="/roles" element={<Roles />} />
                     <Route path="/organizations" element={<Organizations />} />
+                    <Route path="/workflow" element={<Workflow />} />
                     <Route path="/settings" element={<Settings />} />
                   </Routes>
                 </MainLayout>

apps/web/src/api/workflowDefinitions.ts

@@ -0,0 +1,89 @@
+import client from './client';
+import type { PaginatedResponse } from './users';
+
+export interface NodeDef {
+  id: string;
+  type: 'StartEvent' | 'EndEvent' | 'UserTask' | 'ServiceTask' | 'ExclusiveGateway' | 'ParallelGateway';
+  name: string;
+  assignee_id?: string;
+  candidate_groups?: string[];
+  service_type?: string;
+  position?: { x: number; y: number };
+}
+
+export interface EdgeDef {
+  id: string;
+  source: string;
+  target: string;
+  condition?: string;
+  label?: string;
+}
+
+export interface ProcessDefinitionInfo {
+  id: string;
+  name: string;
+  key: string;
+  version: number;
+  category?: string;
+  description?: string;
+  nodes: NodeDef[];
+  edges: EdgeDef[];
+  status: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateProcessDefinitionRequest {
+  name: string;
+  key: string;
+  category?: string;
+  description?: string;
+  nodes: NodeDef[];
+  edges: EdgeDef[];
+}
+
+export interface UpdateProcessDefinitionRequest {
+  name?: string;
+  category?: string;
+  description?: string;
+  nodes?: NodeDef[];
+  edges?: EdgeDef[];
+}
+
+export async function listProcessDefinitions(page = 1, pageSize = 20) {
+  const { data } = await client.get<{ success: boolean; data: PaginatedResponse<ProcessDefinitionInfo> }>(
+    '/workflow/definitions',
+    { params: { page, page_size: pageSize } },
+  );
+  return data.data;
+}
+
+export async function getProcessDefinition(id: string) {
+  const { data } = await client.get<{ success: boolean; data: ProcessDefinitionInfo }>(
+    `/workflow/definitions/${id}`,
+  );
+  return data.data;
+}
+
+export async function createProcessDefinition(req: CreateProcessDefinitionRequest) {
+  const { data } = await client.post<{ success: boolean; data: ProcessDefinitionInfo }>(
+    '/workflow/definitions',
+    req,
+  );
+  return data.data;
+}
+
+export async function updateProcessDefinition(id: string, req: UpdateProcessDefinitionRequest) {
+  const { data } = await client.put<{ success: boolean; data: ProcessDefinitionInfo }>(
+    `/workflow/definitions/${id}`,
+    req,
+  );
+  return data.data;
+}
+
+export async function publishProcessDefinition(id: string) {
+  const { data } = await client.post<{ success: boolean; data: ProcessDefinitionInfo }>(
+    `/workflow/definitions/${id}/publish`,
+  );
+  return data.data;
+}

apps/web/src/api/workflowInstances.ts

@@ -0,0 +1,65 @@
+import client from './client';
+import type { PaginatedResponse } from './users';
+
+export interface TokenInfo {
+  id: string;
+  node_id: string;
+  status: string;
+  created_at: string;
+}
+
+export interface ProcessInstanceInfo {
+  id: string;
+  definition_id: string;
+  definition_name?: string;
+  business_key?: string;
+  status: string;
+  started_by: string;
+  started_at: string;
+  completed_at?: string;
+  created_at: string;
+  active_tokens: TokenInfo[];
+}
+
+export interface StartInstanceRequest {
+  definition_id: string;
+  business_key?: string;
+  variables?: Array<{ name: string; var_type?: string; value: unknown }>;
+}
+
+export async function startInstance(req: StartInstanceRequest) {
+  const { data } = await client.post<{ success: boolean; data: ProcessInstanceInfo }>(
+    '/workflow/instances',
+    req,
+  );
+  return data.data;
+}
+
+export async function listInstances(page = 1, pageSize = 20) {
+  const { data } = await client.get<{ success: boolean; data: PaginatedResponse<ProcessInstanceInfo> }>(
+    '/workflow/instances',
+    { params: { page, page_size: pageSize } },
+  );
+  return data.data;
+}
+
+export async function getInstance(id: string) {
+  const { data } = await client.get<{ success: boolean; data: ProcessInstanceInfo }>(
+    `/workflow/instances/${id}`,
+  );
+  return data.data;
+}
+
+export async function suspendInstance(id: string) {
+  const { data } = await client.post<{ success: boolean; data: null }>(
+    `/workflow/instances/${id}/suspend`,
+  );
+  return data.data;
+}
+
+export async function terminateInstance(id: string) {
+  const { data } = await client.post<{ success: boolean; data: null }>(
+    `/workflow/instances/${id}/terminate`,
+  );
+  return data.data;
+}

apps/web/src/api/workflowTasks.ts

@@ -0,0 +1,61 @@
+import client from './client';
+import type { PaginatedResponse } from './users';
+
+export interface TaskInfo {
+  id: string;
+  instance_id: string;
+  token_id: string;
+  node_id: string;
+  node_name?: string;
+  assignee_id?: string;
+  candidate_groups?: unknown;
+  status: string;
+  outcome?: string;
+  form_data?: unknown;
+  due_date?: string;
+  completed_at?: string;
+  created_at: string;
+  definition_name?: string;
+  business_key?: string;
+}
+
+export interface CompleteTaskRequest {
+  outcome: string;
+  form_data?: Record<string, unknown>;
+}
+
+export interface DelegateTaskRequest {
+  delegate_to: string;
+}
+
+export async function listPendingTasks(page = 1, pageSize = 20) {
+  const { data } = await client.get<{ success: boolean; data: PaginatedResponse<TaskInfo> }>(
+    '/workflow/tasks/pending',
+    { params: { page, page_size: pageSize } },
+  );
+  return data.data;
+}
+
+export async function listCompletedTasks(page = 1, pageSize = 20) {
+  const { data } = await client.get<{ success: boolean; data: PaginatedResponse<TaskInfo> }>(
+    '/workflow/tasks/completed',
+    { params: { page, page_size: pageSize } },
+  );
+  return data.data;
+}
+
+export async function completeTask(id: string, req: CompleteTaskRequest) {
+  const { data } = await client.post<{ success: boolean; data: TaskInfo }>(
+    `/workflow/tasks/${id}/complete`,
+    req,
+  );
+  return data.data;
+}
+
+export async function delegateTask(id: string, req: DelegateTaskRequest) {
+  const { data } = await client.post<{ success: boolean; data: TaskInfo }>(
+    `/workflow/tasks/${id}/delegate`,
+    req,
+  );
+  return data.data;
+}

apps/web/src/layouts/MainLayout.tsx

@@ -8,6 +8,7 @@ import {
   SettingOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
+  PartitionOutlined,
   LogoutOutlined,
 } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
@@ -21,6 +22,7 @@ const menuItems = [
   { key: '/users', icon: <UserOutlined />, label: '用户管理' },
   { key: '/roles', icon: <SafetyOutlined />, label: '权限管理' },
   { key: '/organizations', icon: <ApartmentOutlined />, label: '组织架构' },
+  { key: '/workflow', icon: <PartitionOutlined />, label: '工作流' },
   { key: '/settings', icon: <SettingOutlined />, label: '系统设置' },
 ];
 

apps/web/src/pages/Workflow.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { Tabs } from 'antd';
+import ProcessDefinitions from './workflow/ProcessDefinitions';
+import PendingTasks from './workflow/PendingTasks';
+import CompletedTasks from './workflow/CompletedTasks';
+import InstanceMonitor from './workflow/InstanceMonitor';
+
+export default function Workflow() {
+  const [activeKey, setActiveKey] = useState('definitions');
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Tabs
+        activeKey={activeKey}
+        onChange={setActiveKey}
+        items={[
+          { key: 'definitions', label: '流程定义', children: <ProcessDefinitions /> },
+          { key: 'pending', label: '我的待办', children: <PendingTasks /> },
+          { key: 'completed', label: '我的已办', children: <CompletedTasks /> },
+          { key: 'instances', label: '流程监控', children: <InstanceMonitor /> },
+        ]}
+      />
+    </div>
+  );
+}

apps/web/src/pages/workflow/CompletedTasks.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Table, Tag } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { listCompletedTasks, type TaskInfo } from '../../api/workflowTasks';
+
+const outcomeLabels: Record<string, { color: string; text: string }> = {
+  approved: { color: 'green', text: '同意' },
+  rejected: { color: 'red', text: '拒绝' },
+  delegated: { color: 'blue', text: '已委派' },
+};
+
+export default function CompletedTasks() {
+  const [data, setData] = useState<TaskInfo[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+
+  const fetch = async () => {
+    setLoading(true);
+    try {
+      const res = await listCompletedTasks(page, 20);
+      setData(res.data);
+      setTotal(res.total);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetch(); }, [page]);
+
+  const columns: ColumnsType<TaskInfo> = [
+    { title: '任务名称', dataIndex: 'node_name', key: 'node_name' },
+    { title: '流程', dataIndex: 'definition_name', key: 'definition_name' },
+    { title: '业务键', dataIndex: 'business_key', key: 'business_key' },
+    {
+      title: '结果', dataIndex: 'outcome', key: 'outcome', width: 100,
+      render: (o: string) => {
+        const info = outcomeLabels[o] || { color: 'default', text: o };
+        return <Tag color={info.color}>{info.text}</Tag>;
+      },
+    },
+    { title: '完成时间', dataIndex: 'completed_at', key: 'completed_at', width: 180,
+      render: (v: string) => v ? new Date(v).toLocaleString() : '-',
+    },
+  ];
+
+  return (
+    <Table
+      rowKey="id"
+      columns={columns}
+      dataSource={data}
+      loading={loading}
+      pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
+    />
+  );
+}

apps/web/src/pages/workflow/InstanceMonitor.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { Button, message, Space, Table, Tag } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import {
+  listInstances,
+  terminateInstance,
+  type ProcessInstanceInfo,
+} from '../../api/workflowInstances';
+
+const statusColors: Record<string, string> = {
+  running: 'processing',
+  suspended: 'warning',
+  completed: 'green',
+  terminated: 'red',
+};
+
+export default function InstanceMonitor() {
+  const [data, setData] = useState<ProcessInstanceInfo[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+
+  const fetch = async () => {
+    setLoading(true);
+    try {
+      const res = await listInstances(page, 20);
+      setData(res.data);
+      setTotal(res.total);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetch(); }, [page]);
+
+  const handleTerminate = async (id: string) => {
+    try {
+      await terminateInstance(id);
+      message.success('已终止');
+      fetch();
+    } catch {
+      message.error('操作失败');
+    }
+  };
+
+  const columns: ColumnsType<ProcessInstanceInfo> = [
+    { title: '流程', dataIndex: 'definition_name', key: 'definition_name' },
+    { title: '业务键', dataIndex: 'business_key', key: 'business_key' },
+    {
+      title: '状态', dataIndex: 'status', key: 'status', width: 100,
+      render: (s: string) => <Tag color={statusColors[s]}>{s}</Tag>,
+    },
+    { title: '当前节点', key: 'current_nodes', width: 150,
+      render: (_, record) => record.active_tokens.map(t => t.node_id).join(', ') || '-',
+    },
+    { title: '发起时间', dataIndex: 'started_at', key: 'started_at', width: 180,
+      render: (v: string) => new Date(v).toLocaleString(),
+    },
+    {
+      title: '操作', key: 'action', width: 100,
+      render: (_, record) => (
+        record.status === 'running' ? (
+          <Button size="small" danger onClick={() => handleTerminate(record.id)}>终止</Button>
+        ) : null
+      ),
+    },
+  ];
+
+  return (
+    <Table
+      rowKey="id"
+      columns={columns}
+      dataSource={data}
+      loading={loading}
+      pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
+    />
+  );
+}

apps/web/src/pages/workflow/PendingTasks.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { Button, message, Modal, Space, Table, Tag } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import {
+  listPendingTasks,
+  completeTask,
+  type TaskInfo,
+} from '../../api/workflowTasks';
+
+const statusColors: Record<string, string> = {
+  pending: 'processing',
+};
+
+export default function PendingTasks() {
+  const [data, setData] = useState<TaskInfo[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [completeModal, setCompleteModal] = useState<TaskInfo | null>(null);
+  const [outcome, setOutcome] = useState('approved');
+
+  const fetch = async () => {
+    setLoading(true);
+    try {
+      const res = await listPendingTasks(page, 20);
+      setData(res.data);
+      setTotal(res.total);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetch(); }, [page]);
+
+  const handleComplete = async () => {
+    if (!completeModal) return;
+    try {
+      await completeTask(completeModal.id, { outcome });
+      message.success('审批完成');
+      setCompleteModal(null);
+      fetch();
+    } catch {
+      message.error('审批失败');
+    }
+  };
+
+  const columns: ColumnsType<TaskInfo> = [
+    { title: '任务名称', dataIndex: 'node_name', key: 'node_name' },
+    { title: '流程', dataIndex: 'definition_name', key: 'definition_name' },
+    { title: '业务键', dataIndex: 'business_key', key: 'business_key' },
+    {
+      title: '状态', dataIndex: 'status', key: 'status', width: 100,
+      render: (s: string) => <Tag color={statusColors[s]}>{s}</Tag>,
+    },
+    { title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180,
+      render: (v: string) => new Date(v).toLocaleString(),
+    },
+    {
+      title: '操作', key: 'action', width: 120,
+      render: (_, record) => (
+        <Space>
+          <Button size="small" type="primary" onClick={() => { setCompleteModal(record); setOutcome('approved'); }}>
+            审批
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        rowKey="id"
+        columns={columns}
+        dataSource={data}
+        loading={loading}
+        pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
+      />
+      <Modal
+        title="审批任务"
+        open={!!completeModal}
+        onOk={handleComplete}
+        onCancel={() => setCompleteModal(null)}
+      >
+        <p>任务: {completeModal?.node_name}</p>
+        <Space>
+          <Button type="primary" onClick={() => setOutcome('approved')} ghost={outcome !== 'approved'}>
+            同意
+          </Button>
+          <Button danger onClick={() => setOutcome('rejected')} ghost={outcome !== 'rejected'}>
+            拒绝
+          </Button>
+        </Space>
+      </Modal>
+    </>
+  );
+}

apps/web/src/pages/workflow/ProcessDefinitions.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { Button, message, Modal, Space, Table, Tag } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import {
+  listProcessDefinitions,
+  createProcessDefinition,
+  publishProcessDefinition,
+  type ProcessDefinitionInfo,
+  type CreateProcessDefinitionRequest,
+} from '../../api/workflowDefinitions';
+import ProcessDesigner from './ProcessDesigner';
+
+const statusColors: Record<string, string> = {
+  draft: 'default',
+  published: 'green',
+  deprecated: 'red',
+};
+
+export default function ProcessDefinitions() {
+  const [data, setData] = useState<ProcessDefinitionInfo[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [designerOpen, setDesignerOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const fetch = async () => {
+    setLoading(true);
+    try {
+      const res = await listProcessDefinitions(page, 20);
+      setData(res.data);
+      setTotal(res.total);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetch(); }, [page]);
+
+  const handleCreate = () => {
+    setEditingId(null);
+    setDesignerOpen(true);
+  };
+
+  const handleEdit = (id: string) => {
+    setEditingId(id);
+    setDesignerOpen(true);
+  };
+
+  const handlePublish = async (id: string) => {
+    try {
+      await publishProcessDefinition(id);
+      message.success('发布成功');
+      fetch();
+    } catch {
+      message.error('发布失败');
+    }
+  };
+
+  const handleSave = async (req: CreateProcessDefinitionRequest) => {
+    try {
+      await createProcessDefinition(req);
+      message.success('创建成功');
+      setDesignerOpen(false);
+      fetch();
+    } catch {
+      message.error('创建失败');
+    }
+  };
+
+  const columns: ColumnsType<ProcessDefinitionInfo> = [
+    { title: '名称', dataIndex: 'name', key: 'name' },
+    { title: '编码', dataIndex: 'key', key: 'key' },
+    { title: '版本', dataIndex: 'version', key: 'version', width: 80 },
+    { title: '分类', dataIndex: 'category', key: 'category', width: 120 },
+    {
+      title: '状态', dataIndex: 'status', key: 'status', width: 100,
+      render: (s: string) => <Tag color={statusColors[s]}>{s}</Tag>,
+    },
+    {
+      title: '操作', key: 'action', width: 200,
+      render: (_, record) => (
+        <Space>
+          {record.status === 'draft' && (
+            <>
+              <Button size="small" onClick={() => handleEdit(record.id)}>编辑</Button>
+              <Button size="small" type="primary" onClick={() => handlePublish(record.id)}>发布</Button>
+            </>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" onClick={handleCreate}>新建流程</Button>
+      </div>
+      <Table
+        rowKey="id"
+        columns={columns}
+        dataSource={data}
+        loading={loading}
+        pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
+      />
+      <Modal
+        title={editingId ? '编辑流程' : '新建流程'}
+        open={designerOpen}
+        onCancel={() => setDesignerOpen(false)}
+        footer={null}
+        width={1200}
+        destroyOnClose
+      >
+        <ProcessDesigner
+          definitionId={editingId}
+          onSave={handleSave}
+        />
+      </Modal>
+    </>
+  );
+}

apps/web/src/pages/workflow/ProcessDesigner.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Button, Form, Input, message, Space } from 'antd';
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  type Connection,
+  type Node,
+  type Edge,
+  BackgroundVariant,
+  MarkerType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import {
+  type CreateProcessDefinitionRequest,
+  type NodeDef,
+  type EdgeDef,
+} from '../../api/workflowDefinitions';
+
+const NODE_TYPES_MAP: Record<string, { label: string; color: string }> = {
+  StartEvent: { label: '开始', color: '#52c41a' },
+  EndEvent: { label: '结束', color: '#ff4d4f' },
+  UserTask: { label: '用户任务', color: '#1890ff' },
+  ServiceTask: { label: '服务任务', color: '#722ed1' },
+  ExclusiveGateway: { label: '排他网关', color: '#fa8c16' },
+  ParallelGateway: { label: '并行网关', color: '#13c2c2' },
+};
+
+const PALETTE_ITEMS = Object.entries(NODE_TYPES_MAP).map(([type, info]) => ({
+  type,
+  label: info.label,
+  color: info.color,
+}));
+
+function createFlowNode(type: string, label: string, position: { x: number; y: number }): Node {
+  return {
+    id: `node_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+    type: 'default',
+    position,
+    data: { label: `${label}`, nodeType: type, name: label },
+    style: {
+      background: NODE_TYPES_MAP[type]?.color || '#f0f0f0',
+      color: '#fff',
+      padding: '8px 16px',
+      borderRadius: type.includes('Gateway') ? 0 : type === 'StartEvent' || type === 'EndEvent' ? 50 : 6,
+      fontSize: 13,
+      fontWeight: 500,
+      border: '2px solid rgba(255,255,255,0.3)',
+      width: type.includes('Gateway') ? 80 : 140,
+      textAlign: 'center' as const,
+    },
+  };
+}
+
+interface ProcessDesignerProps {
+  definitionId: string | null;
+  onSave: (req: CreateProcessDefinitionRequest) => void;
+}
+
+export default function ProcessDesigner({ onSave }: ProcessDesignerProps) {
+  const [form] = Form.useForm();
+  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
+  const [nodes, setNodes, onNodesChange] = useNodesState([
+    createFlowNode('StartEvent', '开始', { x: 250, y: 50 }),
+    createFlowNode('UserTask', '审批', { x: 250, y: 200 }),
+    createFlowNode('EndEvent', '结束', { x: 250, y: 400 }),
+  ]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([
+    {
+      id: 'e_start_approve',
+      source: nodes[0].id,
+      target: nodes[1].id,
+      markerEnd: { type: MarkerType.ArrowClosed },
+    },
+    {
+      id: 'e_approve_end',
+      source: nodes[1].id,
+      target: nodes[2].id,
+      markerEnd: { type: MarkerType.ArrowClosed },
+    },
+  ]);
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) =>
+        addEdge(
+          { ...connection, markerEnd: { type: MarkerType.ArrowClosed } },
+          eds,
+        ),
+      );
+    },
+    [setEdges],
+  );
+
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
+    setSelectedNode(node);
+  }, []);
+
+  const handleAddNode = (type: string) => {
+    const info = NODE_TYPES_MAP[type];
+    if (!info) return;
+    const newNode = createFlowNode(type, info.label, {
+      x: 100 + Math.random() * 400,
+      y: 100 + Math.random() * 300,
+    });
+    setNodes((nds) => [...nds, newNode]);
+  };
+
+  const handleDeleteNode = () => {
+    if (!selectedNode) return;
+    setNodes((nds) => nds.filter((n) => n.id !== selectedNode.id));
+    setEdges((eds) =>
+      eds.filter((e) => e.source !== selectedNode.id && e.target !== selectedNode.id),
+    );
+    setSelectedNode(null);
+  };
+
+  const handleUpdateNodeName = (name: string) => {
+    if (!selectedNode) return;
+    setNodes((nds) =>
+      nds.map((n) =>
+        n.id === selectedNode.id
+          ? { ...n, data: { ...n.data, label: name, name } }
+          : n,
+      ),
+    );
+    setSelectedNode((prev) => (prev ? { ...prev, data: { ...prev.data, label: name, name } } : null));
+  };
+
+  const handleSave = () => {
+    form.validateFields().then((values) => {
+      const flowNodes: NodeDef[] = nodes.map((n) => ({
+        id: n.id,
+        type: (n.data.nodeType as NodeDef['type']) || 'UserTask',
+        name: n.data.name || String(n.data.label),
+      }));
+      const flowEdges: EdgeDef[] = edges.map((e) => ({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+      }));
+      onSave({
+        ...values,
+        nodes: flowNodes,
+        edges: flowEdges,
+      });
+    }).catch(() => {
+      message.error('请填写必要字段');
+    });
+  };
+
+  const defaultEdgeOptions = useMemo(
+    () => ({
+      markerEnd: { type: MarkerType.ArrowClosed },
+    }),
+    [],
+  );
+
+  return (
+    <div style={{ display: 'flex', gap: 16, height: 500 }}>
+      {/* 左侧工具面板 */}
+      <div style={{ width: 180, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <p style={{ fontWeight: 500, margin: '0 0 4px' }}>添加节点</p>
+        {PALETTE_ITEMS.map((item) => (
+          <Button
+            key={item.type}
+            size="small"
+            style={{ textAlign: 'left' }}
+            onClick={() => handleAddNode(item.type)}
+          >
+            <span style={{
+              display: 'inline-block',
+              width: 10,
+              height: 10,
+              borderRadius: 2,
+              background: item.color,
+              marginRight: 6,
+            }} />
+            {item.label}
+          </Button>
+        ))}
+
+        {selectedNode && (
+          <div style={{ marginTop: 16, padding: 8, background: '#f5f5f5', borderRadius: 6 }}>
+            <p style={{ fontWeight: 500, margin: '0 0 8px', fontSize: 12 }}>节点属性</p>
+            <Input
+              size="small"
+              value={selectedNode.data.name || ''}
+              onChange={(e) => handleUpdateNodeName(e.target.value)}
+              placeholder="节点名称"
+              style={{ marginBottom: 8 }}
+            />
+            <Button size="small" danger onClick={handleDeleteNode} block>
+              删除节点
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* 中间画布 */}
+      <div style={{ flex: 1, border: '1px solid #d9d9d9', borderRadius: 6 }}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onNodeClick={onNodeClick}
+          defaultEdgeOptions={defaultEdgeOptions}
+          fitView
+        >
+          <Controls />
+          <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
+        </ReactFlow>
+      </div>
+
+      {/* 右侧表单 */}
+      <div style={{ width: 220, overflow: 'auto' }}>
+        <Form form={form} layout="vertical" size="small">
+          <Form.Item name="name" label="流程名称" rules={[{ required: true, message: '请输入' }]}>
+            <Input placeholder="请假审批" />
+          </Form.Item>
+          <Form.Item name="key" label="流程编码" rules={[{ required: true, message: '请输入' }]}>
+            <Input placeholder="leave_approval" />
+          </Form.Item>
+          <Form.Item name="category" label="分类">
+            <Input placeholder="leave" />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={2} />
+          </Form.Item>
+          <Space>
+            <Button type="primary" onClick={handleSave}>保存</Button>
+            <Button onClick={() => form.resetFields()}>重置</Button>
+          </Space>
+        </Form>
+      </div>
+    </div>
+  );
+}

apps/web/src/pages/workflow/ProcessViewer.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  BackgroundVariant,
+  MarkerType,
+  type Node,
+  type Edge,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { NodeDef, EdgeDef } from '../../api/workflowDefinitions';
+
+const NODE_TYPE_STYLES: Record<string, { color: string; radius: number; width: number }> = {
+  StartEvent: { color: '#52c41a', radius: 50, width: 100 },
+  EndEvent: { color: '#ff4d4f', radius: 50, width: 100 },
+  UserTask: { color: '#1890ff', radius: 6, width: 160 },
+  ServiceTask: { color: '#722ed1', radius: 6, width: 160 },
+  ExclusiveGateway: { color: '#fa8c16', radius: 0, width: 100 },
+  ParallelGateway: { color: '#13c2c2', radius: 0, width: 100 },
+};
+
+interface ProcessViewerProps {
+  nodes: NodeDef[];
+  edges: EdgeDef[];
+  activeNodeIds?: string[];
+}
+
+export default function ProcessViewer({ nodes, edges, activeNodeIds = [] }: ProcessViewerProps) {
+  const flowNodes: Node[] = useMemo(() =>
+    nodes.map((n, i) => {
+      const style = NODE_TYPE_STYLES[n.type] || NODE_TYPE_STYLES.UserTask;
+      const isActive = activeNodeIds.includes(n.id);
+      return {
+        id: n.id,
+        type: 'default',
+        position: n.position || { x: 200, y: i * 120 + 50 },
+        data: { label: n.name },
+        style: {
+          background: isActive ? '#fff3cd' : style.color,
+          color: isActive ? '#856404' : '#fff',
+          padding: '8px 16px',
+          borderRadius: style.radius,
+          fontSize: 13,
+          fontWeight: 500,
+          border: isActive ? '3px solid #ffc107' : '2px solid rgba(255,255,255,0.3)',
+          width: style.width,
+          textAlign: 'center' as const,
+          boxShadow: isActive ? '0 0 8px rgba(255,193,7,0.5)' : 'none',
+        },
+      };
+    }),
+    [nodes, activeNodeIds],
+  );
+
+  const flowEdges: Edge[] = useMemo(() =>
+    edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      label: e.label || e.condition,
+      markerEnd: { type: MarkerType.ArrowClosed },
+      style: { stroke: '#999' },
+    })),
+    [edges],
+  );
+
+  return (
+    <div style={{ height: 400, border: '1px solid #d9d9d9', borderRadius: 6 }}>
+      <ReactFlow
+        nodes={flowNodes}
+        edges={flowEdges}
+        fitView
+        proOptions={{ hideAttribution: true }}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+      >
+        <Controls showInteractive={false} />
+        <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
+      </ReactFlow>
+    </div>
+  );
+}