diff --git a/apps/web-antdv-next/src/api/core/user.ts b/apps/web-antdv-next/src/api/core/user.ts
index d759e5637..ce8ea8d25 100644
--- a/apps/web-antdv-next/src/api/core/user.ts
+++ b/apps/web-antdv-next/src/api/core/user.ts
@@ -1,6 +1,7 @@
 import type { UserInfo } from '@vben/types';
 
 import type { SysDeptResult, SysRoleResult } from '#/api';
+import type { PaginationResult } from '#/types';
 
 import { requestClient } from '#/api/request';
 
@@ -91,7 +92,10 @@ export async function getUserInfoApi() {
 }
 
 export async function getSysUserListApi(params: SysUserParams) {
-  return requestClient.get<SysUserResult>('/api/v1/sys/users', { params });
+  return requestClient.get<PaginationResult<SysUserResult>>(
+    '/api/v1/sys/users',
+    { params },
+  );
 }
 
 export async function createSysUserApi(data: SysAddUserParams) {
diff --git a/apps/web-antdv-next/src/plugins/workflow/api/index.ts b/apps/web-antdv-next/src/plugins/workflow/api/index.ts
new file mode 100644
index 000000000..3139cc090
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/api/index.ts
@@ -0,0 +1,449 @@
+import type {
+  WorkflowDefinitionEditorValue,
+  WorkflowFlowConfig,
+  WorkflowFormConfig,
+} from '#/plugins/workflow/types';
+import type { PaginationResult } from '#/types';
+
+import { requestClient } from '#/api/request';
+import {
+  DEFAULT_WORKFLOW_FLOW_CONFIG,
+  DEFAULT_WORKFLOW_FORM_CONFIG,
+} from '#/plugins/workflow/types';
+
+export interface WorkflowDefinitionParams {
+  name?: string;
+  code?: string;
+  page?: number;
+  size?: number;
+}
+
+export interface WorkflowCategoryParams {
+  name?: string;
+  code?: string;
+  page?: number;
+  size?: number;
+}
+
+export interface WorkflowCategoryResult {
+  id: number;
+  name: string;
+  code: string;
+  remark?: null | string;
+  sort: number;
+  status: number;
+  created_time: string;
+  updated_time?: null | string;
+}
+
+export interface CreateWorkflowCategoryParams {
+  name: string;
+  code: string;
+  remark?: null | string;
+  sort: number;
+  status: number;
+}
+
+export type UpdateWorkflowCategoryParams = CreateWorkflowCategoryParams;
+
+export interface WorkflowDefinitionResult {
+  id: number;
+  category_id?: null | number;
+  category_name?: null | string;
+  name: string;
+  code: string;
+  description?: null | string;
+  form_config?: null | WorkflowFormConfig;
+  flow_config?: null | WorkflowFlowConfig;
+  status: number;
+  allow_withdraw: boolean;
+  allow_urge: boolean;
+  created_time: string;
+  updated_time?: null | string;
+}
+
+export interface CreateWorkflowDefinitionParams {
+  category_id?: null | number;
+  name: string;
+  code: string;
+  description?: null | string;
+  form_config?: null | WorkflowFormConfig;
+  flow_config?: null | WorkflowFlowConfig;
+  status: number;
+  allow_withdraw: boolean;
+  allow_urge: boolean;
+}
+
+export type UpdateWorkflowDefinitionParams = CreateWorkflowDefinitionParams;
+
+export interface WorkflowInstanceResult {
+  id: number;
+  instance_no: string;
+  definition_id: number;
+  title: string;
+  initiator_id: number;
+  status: string;
+  current_task_id?: null | number;
+  form_data?: null | Record<string, any> | string;
+  remark?: null | string;
+  todo_count?: null | number;
+  allow_withdraw?: boolean | null;
+  allow_urge?: boolean | null;
+  messages?: WorkflowMessageResult[];
+  created_time: string;
+  updated_time?: null | string;
+}
+
+export interface WorkflowMessageResult {
+  id: number;
+  receiver_id: number;
+  instance_id?: null | number;
+  task_id?: null | number;
+  message_type: string;
+  title: string;
+  content: string;
+  is_read: boolean;
+  created_time: string;
+  updated_time?: null | string;
+}
+
+export interface WorkflowPreviewFlowItem {
+  node_id: string;
+  node_type: string;
+  label: string;
+  assignee_id?: null | number;
+  assignee_name?: null | string;
+  self_select_options?: number[];
+  self_select_option_labels?: Record<number, string>;
+}
+
+export interface StartWorkflowInstanceParams {
+  definition_id: number;
+  title: string;
+  form_data: Record<string, any>;
+  self_select_assignees?: Record<string, number>;
+  remark?: null | string;
+}
+
+export interface ApproveWorkflowTaskParams {
+  comment?: null | string;
+}
+
+export interface RejectWorkflowTaskParams {
+  comment?: null | string;
+}
+
+function safeParseJson<T>(
+  value: null | string | T | undefined,
+  fallback: T,
+): T {
+  if (!value) {
+    return fallback;
+  }
+  if (typeof value !== 'string') {
+    return value;
+  }
+  try {
+    return JSON.parse(value) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+function serializeDefinitionPayload(data: CreateWorkflowDefinitionParams) {
+  return {
+    ...data,
+    form_config: JSON.stringify(
+      data.form_config ?? DEFAULT_WORKFLOW_FORM_CONFIG,
+    ),
+    flow_config: JSON.stringify(
+      data.flow_config ?? DEFAULT_WORKFLOW_FLOW_CONFIG,
+    ),
+  };
+}
+
+function normalizeConditionNodes(
+  flowConfig: WorkflowFlowConfig,
+): WorkflowFlowConfig {
+  return {
+    ...flowConfig,
+    nodes: flowConfig.nodes.map((node) => {
+      if (node.type !== 'CONDITION') {
+        return node;
+      }
+      const conditionGroup = node.data.conditionGroup ?? {
+        operator: 'AND',
+        conditions: [
+          {
+            field: node.data.conditionField ?? '',
+            operator: node.data.conditionOperator ?? 'EQ',
+            value: node.data.conditionValue ?? '',
+          },
+        ],
+      };
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          conditionGroup,
+        },
+      };
+    }),
+  };
+}
+
+function normalizeDefinition(result: {
+  allow_urge: boolean;
+  allow_withdraw: boolean;
+  category_id?: null | number;
+  category_name?: null | string;
+  code: string;
+  created_time: string;
+  description?: null | string;
+  flow_config?: null | string | WorkflowFlowConfig;
+  form_config?: null | string | WorkflowFormConfig;
+  id: number;
+  name: string;
+  status: number;
+  updated_time?: null | string;
+}): WorkflowDefinitionResult {
+  return {
+    ...result,
+    form_config: safeParseJson(
+      result.form_config,
+      DEFAULT_WORKFLOW_FORM_CONFIG,
+    ),
+    flow_config: normalizeConditionNodes(
+      safeParseJson(result.flow_config, DEFAULT_WORKFLOW_FLOW_CONFIG),
+    ),
+  };
+}
+
+export function buildWorkflowDefinitionEditorValue(
+  detail?: null | Partial<WorkflowDefinitionResult>,
+): WorkflowDefinitionEditorValue {
+  return {
+    category_id: detail?.category_id ?? null,
+    name: detail?.name ?? '',
+    code: detail?.code ?? '',
+    description: detail?.description ?? '',
+    status: detail?.status ?? 0,
+    allow_withdraw: detail?.allow_withdraw ?? true,
+    allow_urge: detail?.allow_urge ?? true,
+    flow_config: detail?.flow_config ?? DEFAULT_WORKFLOW_FLOW_CONFIG,
+    form_config: detail?.form_config ?? DEFAULT_WORKFLOW_FORM_CONFIG,
+  };
+}
+
+export async function getWorkflowDefinitionListApi(
+  params: WorkflowDefinitionParams,
+) {
+  const result = await requestClient.get<
+    PaginationResult<WorkflowDefinitionResult>
+  >('/api/v1/workflow/definition', { params });
+  return {
+    ...result,
+    items: result.items.map((item) => normalizeDefinition(item)),
+  };
+}
+
+export async function getWorkflowDefinitionAvailableApi(
+  params: WorkflowDefinitionParams,
+) {
+  const result = await requestClient.get<
+    PaginationResult<WorkflowDefinitionResult>
+  >('/api/v1/workflow/definition/available', { params });
+  return {
+    ...result,
+    items: result.items.map((item) => normalizeDefinition(item)),
+  };
+}
+
+export async function createWorkflowDefinitionApi(
+  data: CreateWorkflowDefinitionParams,
+) {
+  return await requestClient.post(
+    '/api/v1/workflow/definition',
+    serializeDefinitionPayload(data),
+  );
+}
+
+export async function updateWorkflowDefinitionApi(
+  pk: number,
+  data: UpdateWorkflowDefinitionParams,
+) {
+  return await requestClient.put(
+    `/api/v1/workflow/definition/${pk}`,
+    serializeDefinitionPayload(data),
+  );
+}
+
+export async function getWorkflowCategoryListApi(
+  params: WorkflowCategoryParams,
+) {
+  return await requestClient.get<PaginationResult<WorkflowCategoryResult>>(
+    '/api/v1/workflow/category',
+    { params },
+  );
+}
+
+export async function createWorkflowCategoryApi(
+  data: CreateWorkflowCategoryParams,
+) {
+  return await requestClient.post('/api/v1/workflow/category', data);
+}
+
+export async function updateWorkflowCategoryApi(
+  pk: number,
+  data: UpdateWorkflowCategoryParams,
+) {
+  return await requestClient.put(`/api/v1/workflow/category/${pk}`, data);
+}
+
+export async function getWorkflowTodoCountApi() {
+  return await requestClient.get<number>(
+    '/api/v1/workflow/instance/todo-count',
+  );
+}
+
+export async function getWorkflowInstanceDetailApi(pk: number) {
+  return await requestClient.get<WorkflowInstanceResult>(
+    `/api/v1/workflow/instance/${pk}`,
+  );
+}
+
+export async function getWorkflowDefinitionDetailApi(pk: number) {
+  const result = await requestClient.get<WorkflowDefinitionResult>(
+    `/api/v1/workflow/definition/${pk}`,
+  );
+  return normalizeDefinition(result);
+}
+
+export async function getWorkflowDefinitionAvailableDetailApi(pk: number) {
+  const result = await requestClient.get<WorkflowDefinitionResult>(
+    `/api/v1/workflow/definition/available/${pk}`,
+  );
+  return normalizeDefinition(result);
+}
+
+export async function getWorkflowCategoryAllApi() {
+  const result = await requestClient.get<
+    PaginationResult<WorkflowCategoryResult>
+  >('/api/v1/workflow/category', {
+    params: {
+      page: 1,
+      size: 200,
+    },
+  });
+  return result.items;
+}
+
+export async function getWorkflowCategoryOptionsApi() {
+  const items = await getWorkflowCategoryAllApi();
+  return items.map((item) => ({
+    label: item.name,
+    value: item.id,
+  }));
+}
+
+export async function getWorkflowInstanceListForApplyApi(params: {
+  page?: number;
+  size?: number;
+}) {
+  return await requestClient.get<PaginationResult<WorkflowInstanceResult>>(
+    '/api/v1/workflow/instance/my-apply',
+    { params },
+  );
+}
+
+export async function getWorkflowInstanceListForTodoApi(params: {
+  page?: number;
+  size?: number;
+}) {
+  return await requestClient.get<PaginationResult<WorkflowInstanceResult>>(
+    '/api/v1/workflow/instance/my-todo',
+    { params },
+  );
+}
+
+export async function getWorkflowMyTodoListApi(params: {
+  page?: number;
+  size?: number;
+}) {
+  return await getWorkflowInstanceListForTodoApi(params);
+}
+
+export async function getWorkflowMyApplyListApi(params: {
+  page?: number;
+  size?: number;
+}) {
+  return await getWorkflowInstanceListForApplyApi(params);
+}
+
+export async function getWorkflowDefinitionAvailablePreviewFlowApi(
+  pk: number,
+  formData: Record<string, any>,
+  selfSelectAssignees?: Record<string, number>,
+) {
+  return await requestClient.get<{ items: WorkflowPreviewFlowItem[] }>(
+    `/api/v1/workflow/definition/available/${pk}/preview-flow`,
+    {
+      params: {
+        form_data: JSON.stringify({
+          ...formData,
+          __self_select_assignees__: selfSelectAssignees ?? {},
+        }),
+      },
+    },
+  );
+}
+
+export async function createWorkflowInstanceApi(
+  data: StartWorkflowInstanceParams,
+) {
+  return await requestClient.post('/api/v1/workflow/instance', data);
+}
+
+export async function approveWorkflowTaskApi(
+  pk: number,
+  data: ApproveWorkflowTaskParams,
+) {
+  return await requestClient.post(`/api/v1/workflow/task/${pk}/approve`, data);
+}
+
+export async function rejectWorkflowTaskApi(
+  pk: number,
+  data: RejectWorkflowTaskParams,
+) {
+  return await requestClient.post(`/api/v1/workflow/task/${pk}/reject`, data);
+}
+
+export async function withdrawWorkflowInstanceApi(pk: number) {
+  return await requestClient.post<WorkflowInstanceResult>(
+    `/api/v1/workflow/instance/${pk}/withdraw`,
+  );
+}
+
+export async function urgeWorkflowInstanceApi(pk: number) {
+  return await requestClient.post(`/api/v1/workflow/instance/${pk}/urge`);
+}
+
+export async function getWorkflowMessageListApi(params: {
+  page?: number;
+  size?: number;
+}) {
+  return await requestClient.get<PaginationResult<WorkflowMessageResult>>(
+    '/api/v1/workflow/message',
+    { params },
+  );
+}
+
+export async function getWorkflowUnreadCountApi() {
+  return await requestClient.get<number>(
+    '/api/v1/workflow/message/unread-count',
+  );
+}
+
+export async function readWorkflowMessageApi(pk: number) {
+  return await requestClient.put(`/api/v1/workflow/message/${pk}/read`);
+}
diff --git a/apps/web-antdv-next/src/plugins/workflow/components/FlowDesigner/index.vue b/apps/web-antdv-next/src/plugins/workflow/components/FlowDesigner/index.vue
new file mode 100644
index 000000000..300d8c6fc
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/components/FlowDesigner/index.vue
@@ -0,0 +1,1669 @@
+<script lang="ts" setup>
+import type {
+  WorkflowApproverType,
+  WorkflowConditionGroup,
+  WorkflowConditionRule,
+  WorkflowEditorEdge,
+  WorkflowEditorNode,
+  WorkflowFlowConfig,
+  WorkflowNodeType,
+} from '#/plugins/workflow/types';
+
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import { message, Modal } from 'antdv-next';
+
+import WorkflowRoleSelect from '#/plugins/workflow/components/WorkflowRoleSelect.vue';
+import WorkflowUserSelect from '#/plugins/workflow/components/WorkflowUserSelect.vue';
+
+interface Props {
+  formFieldOptions?: Array<{ label: string; value: string }>;
+  modelValue: WorkflowFlowConfig;
+  selectedNodeId?: string;
+}
+
+interface CanvasPoint {
+  x: number;
+  y: number;
+}
+
+interface ContextMenuState {
+  edgeId?: string;
+  nodeId?: string;
+  visible: boolean;
+  x: number;
+  y: number;
+  type: 'canvas' | 'edge' | 'node';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formFieldOptions: () => [],
+  selectedNodeId: undefined,
+});
+const emit = defineEmits<{
+  (e: 'selectNode', nodeId: string): void;
+  (e: 'update:modelValue', value: WorkflowFlowConfig): void;
+}>();
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 1.8;
+const SCALE_STEP = 0.1;
+
+const nodeTypes: Array<{ label: string; type: WorkflowNodeType }> = [
+  { label: '开始', type: 'START' },
+  { label: '审批', type: 'APPROVER' },
+  { label: '条件', type: 'CONDITION' },
+  { label: '并行', type: 'PARALLEL' },
+  { label: '触发器', type: 'TRIGGER' },
+  { label: '抄送', type: 'CC' },
+  { label: '结束', type: 'END' },
+];
+const approverTypeOptions: Array<{
+  label: string;
+  value: WorkflowApproverType;
+}> = [
+  { label: '指定用户', value: 'DESIGNATED_USER' },
+  { label: '指定角色', value: 'DESIGNATED_ROLE' },
+  { label: '部门负责人', value: 'DEPT_LEADER' },
+  { label: '上级部门负责人', value: 'DEPT_LEADER_UP' },
+  { label: '发起人本人', value: 'INITIATOR' },
+  { label: '发起人部门负责人', value: 'INITIATOR_LEADER' },
+  { label: '表单字段用户', value: 'FORM_FIELD_USER' },
+  { label: '发起时自选', value: 'SELF_SELECT' },
+];
+const contextMenuNodeTypes = nodeTypes.filter(
+  (item) => item.type !== 'START' && item.type !== 'END',
+);
+
+const nodes = computed(() => props.modelValue.nodes);
+const edges = computed(() => props.modelValue.edges);
+const selectedNode = computed<undefined | WorkflowEditorNode>(() => {
+  return props.modelValue.nodes.find(
+    (item) => item.id === props.selectedNodeId,
+  );
+});
+const draggingNodeId = ref<string>();
+const dragOffset = ref({ x: 0, y: 0 });
+const canvasRef = ref<HTMLElement>();
+const shellRef = ref<HTMLElement>();
+const connectingFromNodeId = ref<string>();
+const mousePosition = ref<CanvasPoint>({ x: 0, y: 0 });
+const contextMenu = ref<ContextMenuState>({
+  visible: false,
+  x: 0,
+  y: 0,
+  type: 'canvas',
+});
+const contextMenuCanvasPoint = ref<CanvasPoint>({ x: 120, y: 120 });
+const editorVisible = ref(false);
+const viewportOffset = ref<CanvasPoint>({ x: 0, y: 0 });
+const viewportScale = ref(1);
+const panning = ref(false);
+const panStart = ref<CanvasPoint>({ x: 0, y: 0 });
+const isFullscreen = ref(false);
+
+const viewportStyle = computed(() => ({
+  transform: `translate(${viewportOffset.value.x}px, ${viewportOffset.value.y}px) scale(${viewportScale.value})`,
+  transformOrigin: '0 0',
+}));
+
+const zoomPercent = computed(() => `${Math.round(viewportScale.value * 100)}%`);
+
+function nodeColor(type: WorkflowNodeType) {
+  return {
+    APPROVER: '#1677ff',
+    CC: '#8c8c8c',
+    CONDITION: '#fa8c16',
+    END: '#ff4d4f',
+    PARALLEL: '#722ed1',
+    START: '#52c41a',
+    TRIGGER: '#faad14',
+  }[type];
+}
+
+function nodeShape(type: WorkflowNodeType) {
+  if (type === 'CONDITION') {
+    return 'diamond';
+  }
+  if (type === 'END' || type === 'START') {
+    return 'circle';
+  }
+  return 'card';
+}
+
+function nodeTypeLabel(type: WorkflowNodeType) {
+  return {
+    APPROVER: '审批',
+    CC: '抄送',
+    CONDITION: '条件',
+    END: '结束',
+    PARALLEL: '并行',
+    START: '开始',
+    TRIGGER: '触发器',
+  }[type];
+}
+
+function nodeSize(type: WorkflowNodeType) {
+  if (type === 'CONDITION') {
+    return { height: 110, width: 110 };
+  }
+  if (type === 'END' || type === 'START') {
+    return { height: 96, width: 96 };
+  }
+  return { height: 64, width: 144 };
+}
+
+function nodeWrapperStyle(node: WorkflowEditorNode) {
+  const size = nodeSize(node.type);
+  return {
+    color: nodeColor(node.type),
+    height: `${size.height}px`,
+    left: `${node.position.x}px`,
+    top: `${node.position.y}px`,
+    width: `${size.width}px`,
+  };
+}
+
+function getNode(nodeId: string) {
+  return props.modelValue.nodes.find((item) => item.id === nodeId);
+}
+
+function countOutgoingEdges(nodeId: string) {
+  return props.modelValue.edges.filter((item) => item.source === nodeId).length;
+}
+
+function countIncomingEdges(nodeId: string) {
+  return props.modelValue.edges.filter((item) => item.target === nodeId).length;
+}
+
+function hasInputHandle(type: WorkflowNodeType) {
+  return type !== 'START';
+}
+
+function hasOutputHandle(type: WorkflowNodeType) {
+  return type !== 'END';
+}
+
+function getEdgeValidation(fromNodeId: string, targetNodeId: string) {
+  const source = getNode(fromNodeId);
+  const target = getNode(targetNodeId);
+  if (!source || !target) {
+    return '节点不存在';
+  }
+  if (fromNodeId === targetNodeId) {
+    return '节点不能连接自己';
+  }
+  if (
+    props.modelValue.edges.some(
+      (item) => item.source === fromNodeId && item.target === targetNodeId,
+    )
+  ) {
+    return '该连线已存在';
+  }
+  if (source.type === 'END') {
+    return '结束节点不能再连接下游节点';
+  }
+  if (target.type === 'START') {
+    return '开始节点不能作为下游节点';
+  }
+  if (source.type === 'START' && countOutgoingEdges(source.id) >= 1) {
+    return '开始节点必须且只能连接一个下游节点';
+  }
+  if (source.type === 'PARALLEL') {
+    if (target.type === 'END') {
+      return '并行节点后至少需要一个业务节点';
+    }
+  } else if (
+    source.type !== 'CONDITION' &&
+    countOutgoingEdges(source.id) >= 1
+  ) {
+    return '当前仅条件节点和并行节点支持多个下游节点';
+  }
+  if (countIncomingEdges(target.id) >= 1) {
+    return '当前目标节点已存在上游，请使用并行汇聚场景';
+  }
+  if (source.type === 'START' && target.type === 'END') {
+    return '开始节点后至少需要一个审批节点';
+  }
+  return '';
+}
+
+function updateModelValue(flowConfig: WorkflowFlowConfig) {
+  emit('update:modelValue', flowConfig);
+}
+
+function updateNodePosition(
+  nodeId: string,
+  position: { x: number; y: number },
+) {
+  updateModelValue({
+    ...props.modelValue,
+    nodes: props.modelValue.nodes.map((item) =>
+      item.id === nodeId
+        ? {
+            ...item,
+            position,
+          }
+        : item,
+    ),
+  });
+}
+
+function updateSelectedNode(patch: Partial<WorkflowEditorNode['data']>) {
+  const nodeId = props.selectedNodeId;
+  if (!nodeId) {
+    return;
+  }
+  updateModelValue({
+    ...props.modelValue,
+    nodes: props.modelValue.nodes.map((node) => {
+      if (node.id !== nodeId) {
+        return node;
+      }
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          ...patch,
+        },
+      };
+    }),
+  });
+}
+
+function updateDesignatedUser(value: number | number[] | undefined) {
+  if (Array.isArray(value)) {
+    updateDesignatedUser(value[0]);
+    return;
+  }
+  if (value === null || value === undefined) {
+    updateSelectedNode({
+      approverId: null,
+      approverIds: [],
+      approverName: '',
+    });
+    return;
+  }
+  updateSelectedNode({
+    approverId: value,
+    approverIds: [value],
+    approverName: '',
+  });
+}
+
+function updateRoleIds(value: number | number[] | undefined) {
+  updateSelectedNode({
+    roleIds: Array.isArray(value) ? value : [],
+  });
+}
+
+function updateSelfSelectOptions(value: number | number[] | undefined) {
+  updateSelectedNode({
+    selfSelectOptions: Array.isArray(value) ? value : [],
+  });
+}
+
+function updateCcUserIds(value: number | number[] | undefined) {
+  updateSelectedNode({
+    ccUserIds: Array.isArray(value) ? value : [],
+  });
+}
+
+function updateApproverType(value: WorkflowApproverType) {
+  updateSelectedNode({
+    approverType: value,
+    approverId:
+      value === 'DESIGNATED_USER'
+        ? (selectedNode.value?.data.approverId ?? null)
+        : null,
+    approverIds:
+      value === 'DESIGNATED_USER'
+        ? (selectedNode.value?.data.approverIds ?? [])
+        : [],
+    approverName:
+      value === 'DESIGNATED_USER'
+        ? (selectedNode.value?.data.approverName ?? '')
+        : '',
+    roleIds:
+      value === 'DESIGNATED_ROLE'
+        ? (selectedNode.value?.data.roleIds ?? [])
+        : [],
+    formFieldKey:
+      value === 'FORM_FIELD_USER'
+        ? (selectedNode.value?.data.formFieldKey ?? '')
+        : '',
+    deptLevel:
+      value === 'DEPT_LEADER_UP'
+        ? (selectedNode.value?.data.deptLevel ?? 1)
+        : undefined,
+    selfSelectOptions:
+      value === 'SELF_SELECT'
+        ? (selectedNode.value?.data.selfSelectOptions ?? [])
+        : [],
+  });
+}
+
+function ensureConditionGroup(
+  node?: WorkflowEditorNode,
+): WorkflowConditionGroup {
+  const firstRule: WorkflowConditionRule = {
+    field: node?.data.conditionField ?? '',
+    operator: node?.data.conditionOperator ?? 'EQ',
+    value: node?.data.conditionValue ?? '',
+  };
+  return (
+    node?.data.conditionGroup ?? {
+      operator: 'AND',
+      conditions: [firstRule],
+    }
+  );
+}
+
+function updateConditionGroup(patch: Partial<WorkflowConditionGroup>) {
+  const node = selectedNode.value;
+  if (!node || node.type !== 'CONDITION') {
+    return;
+  }
+  const nextGroup = {
+    ...ensureConditionGroup(node),
+    ...patch,
+  };
+  const firstRule = nextGroup.conditions[0] ?? {
+    field: '',
+    operator: 'EQ',
+    value: '',
+  };
+  updateSelectedNode({
+    conditionField: firstRule.field,
+    conditionGroup: nextGroup,
+    conditionOperator: firstRule.operator,
+    conditionValue: firstRule.value,
+  });
+}
+
+function updateConditionRule(
+  index: number,
+  patch: Partial<WorkflowConditionRule>,
+) {
+  const node = selectedNode.value;
+  if (!node || node.type !== 'CONDITION') {
+    return;
+  }
+  const group = ensureConditionGroup(node);
+  updateConditionGroup({
+    conditions: group.conditions.map((item, itemIndex) =>
+      itemIndex === index
+        ? {
+            ...item,
+            ...patch,
+          }
+        : item,
+    ),
+  });
+}
+
+function addConditionRule() {
+  const node = selectedNode.value;
+  if (!node || node.type !== 'CONDITION') {
+    return;
+  }
+  const group = ensureConditionGroup(node);
+  updateConditionGroup({
+    conditions: [...group.conditions, { field: '', operator: 'EQ', value: '' }],
+  });
+}
+
+function removeConditionRule(index: number) {
+  const node = selectedNode.value;
+  if (!node || node.type !== 'CONDITION') {
+    return;
+  }
+  const group = ensureConditionGroup(node);
+  const nextConditions = group.conditions.filter(
+    (_, itemIndex) => itemIndex !== index,
+  );
+  updateConditionGroup({
+    conditions:
+      nextConditions.length > 0
+        ? nextConditions
+        : [{ field: '', operator: 'EQ', value: '' }],
+  });
+}
+
+function approverTypeMessage(node?: WorkflowEditorNode) {
+  const approverType = node?.data.approverType;
+  if (!approverType) {
+    return '';
+  }
+  if (approverType === 'DEPT_LEADER') {
+    return '运行时按发起人当前部门负责人解析审批人。';
+  }
+  if (approverType === 'INITIATOR') {
+    return '运行时按发起人本人解析审批人。';
+  }
+  if (approverType === 'INITIATOR_LEADER') {
+    return '运行时按发起人所在部门负责人解析审批人。';
+  }
+  if (approverType === 'DEPT_LEADER_UP') {
+    return `运行时按发起人向上第${node?.data.deptLevel ?? 1}级部门负责人解析审批人。`;
+  }
+  if (approverType === 'SELF_SELECT') {
+    return '运行时由发起人在申请页选择审批人。';
+  }
+  return '';
+}
+
+function getInputAnchor(node: WorkflowEditorNode) {
+  const size = nodeSize(node.type);
+  return {
+    x: node.position.x,
+    y: node.position.y + size.height / 2,
+  };
+}
+
+function getOutputAnchor(node: WorkflowEditorNode) {
+  const size = nodeSize(node.type);
+  return {
+    x: node.position.x + size.width,
+    y: node.position.y + size.height / 2,
+  };
+}
+
+function bezierPath(from: CanvasPoint, to: CanvasPoint) {
+  const mx = (from.x + to.x) / 2;
+  return `M ${from.x} ${from.y} C ${mx} ${from.y}, ${mx} ${to.y}, ${to.x} ${to.y}`;
+}
+
+function edgePath(edge: WorkflowEditorEdge) {
+  const source = getNode(edge.source);
+  const target = getNode(edge.target);
+  if (!source || !target) {
+    return '';
+  }
+  return bezierPath(getOutputAnchor(source), getInputAnchor(target));
+}
+
+const previewEdgePath = computed(() => {
+  if (!connectingFromNodeId.value) {
+    return '';
+  }
+  const source = getNode(connectingFromNodeId.value);
+  if (!source) {
+    return '';
+  }
+  return bezierPath(getOutputAnchor(source), mousePosition.value);
+});
+
+function nextNodePosition() {
+  const nextIndex = props.modelValue.nodes.length + 1;
+  return {
+    x: 160 + (nextIndex % 3) * 160,
+    y: 80 + Math.floor(nextIndex / 3) * 120,
+  };
+}
+
+function clampScale(value: number) {
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, Number(value.toFixed(2))));
+}
+
+function setViewportScale(nextScale: number, focusPoint?: CanvasPoint) {
+  const previousScale = viewportScale.value;
+  const clampedScale = clampScale(nextScale);
+  if (clampedScale === previousScale) {
+    return;
+  }
+  if (focusPoint) {
+    viewportOffset.value = {
+      x:
+        focusPoint.x -
+        ((focusPoint.x - viewportOffset.value.x) / previousScale) *
+          clampedScale,
+      y:
+        focusPoint.y -
+        ((focusPoint.y - viewportOffset.value.y) / previousScale) *
+          clampedScale,
+    };
+  }
+  viewportScale.value = clampedScale;
+}
+
+function zoomIn() {
+  const rect = canvasRef.value?.getBoundingClientRect();
+  if (!rect) {
+    setViewportScale(viewportScale.value + SCALE_STEP);
+    return;
+  }
+  setViewportScale(viewportScale.value + SCALE_STEP, {
+    x: rect.width / 2,
+    y: rect.height / 2,
+  });
+}
+
+function zoomOut() {
+  const rect = canvasRef.value?.getBoundingClientRect();
+  if (!rect) {
+    setViewportScale(viewportScale.value - SCALE_STEP);
+    return;
+  }
+  setViewportScale(viewportScale.value - SCALE_STEP, {
+    x: rect.width / 2,
+    y: rect.height / 2,
+  });
+}
+
+function resetViewport() {
+  viewportScale.value = 1;
+  viewportOffset.value = { x: 0, y: 0 };
+}
+
+function createNode(type: WorkflowNodeType, position?: CanvasPoint) {
+  const nextIndex = props.modelValue.nodes.length + 1;
+  const id = `${type.toLowerCase()}_${nextIndex}`;
+  const node: WorkflowEditorNode = {
+    id,
+    type,
+    position: position ?? nextNodePosition(),
+    data: {
+      label:
+        type === 'APPROVER'
+          ? `审批${nextIndex}`
+          : nodeTypes.find((item) => item.type === type)?.label || type,
+      approverIds: [],
+      approverId: null,
+      approverName: '',
+      approverType: type === 'APPROVER' ? 'DESIGNATED_USER' : undefined,
+      roleIds: type === 'APPROVER' ? [] : undefined,
+      formFieldKey: type === 'APPROVER' ? '' : undefined,
+      approveMode: type === 'APPROVER' ? 'OR_SIGN' : undefined,
+      countersignRatio: type === 'APPROVER' ? 100 : undefined,
+      refuseMode: type === 'APPROVER' ? 'BACK_TO_START' : undefined,
+      selfApprove: type === 'APPROVER' ? false : undefined,
+      timeoutHours: type === 'APPROVER' ? null : undefined,
+      timeoutAction: type === 'APPROVER' ? 'NOTIFY' : undefined,
+      conditionText: type === 'CONDITION' ? '条件分支' : undefined,
+      conditionField: type === 'CONDITION' ? '' : undefined,
+      conditionOperator: type === 'CONDITION' ? 'EQ' : undefined,
+      conditionValue: type === 'CONDITION' ? '' : undefined,
+      conditionGroup:
+        type === 'CONDITION'
+          ? {
+              operator: 'AND',
+              conditions: [{ field: '', operator: 'EQ', value: '' }],
+            }
+          : undefined,
+      ccUserIds: type === 'CC' ? [] : undefined,
+    },
+  };
+  updateModelValue({
+    ...props.modelValue,
+    nodes: [...props.modelValue.nodes, node],
+  });
+  emit('selectNode', id);
+  hideContextMenu();
+  editorVisible.value = true;
+}
+
+function removeNode(nodeId: string) {
+  const selected = getNode(nodeId);
+  if (!selected) {
+    message.warning('当前节点不存在');
+    return;
+  }
+  if (selected.type === 'START' || selected.type === 'END') {
+    message.warning('开始节点和结束节点不允许删除');
+    return;
+  }
+  const relatedEdges = props.modelValue.edges.filter(
+    (item) => item.source === nodeId || item.target === nodeId,
+  );
+  Modal.confirm({
+    title: '确认删除节点',
+    content: `将删除节点“${selected.data.label}”及其 ${relatedEdges.length} 条关联连线，是否继续？`,
+    okText: '删除',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk() {
+      if (connectingFromNodeId.value === nodeId) {
+        cancelConnection();
+      }
+      if (props.selectedNodeId === nodeId) {
+        editorVisible.value = false;
+      }
+      updateModelValue({
+        nodes: props.modelValue.nodes.filter((item) => item.id !== nodeId),
+        edges: props.modelValue.edges.filter(
+          (item) => item.source !== nodeId && item.target !== nodeId,
+        ),
+      });
+      hideContextMenu();
+      message.success(`已删除节点“${selected.data.label}”`);
+    },
+  });
+}
+
+function removeEdge(edgeId: string) {
+  const edge = props.modelValue.edges.find((item) => item.id === edgeId);
+  if (!edge) {
+    message.warning('连线不存在');
+    return;
+  }
+  const source = getNode(edge.source);
+  const target = getNode(edge.target);
+  Modal.confirm({
+    title: '确认删除连线',
+    content: `将断开“${source?.data.label || edge.source} → ${target?.data.label || edge.target}”，是否继续？`,
+    okText: '删除',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk() {
+      updateModelValue({
+        ...props.modelValue,
+        edges: props.modelValue.edges.filter((item) => item.id !== edgeId),
+      });
+      hideContextMenu();
+      message.success('已删除连线');
+    },
+  });
+}
+
+function createEdge(fromNodeId: string, targetNodeId: string) {
+  const current = getNode(fromNodeId);
+  const target = getNode(targetNodeId);
+  const reason = getEdgeValidation(fromNodeId, targetNodeId);
+  if (reason) {
+    message.warning(reason);
+    return;
+  }
+  updateModelValue({
+    ...props.modelValue,
+    edges: [
+      ...props.modelValue.edges,
+      {
+        id: `edge_${fromNodeId}_${targetNodeId}`,
+        source: fromNodeId,
+        target: targetNodeId,
+      },
+    ],
+  });
+  message.success(
+    `已连接 ${current?.data.label || fromNodeId} → ${target?.data.label || targetNodeId}`,
+  );
+}
+
+function startDrag(node: WorkflowEditorNode, event: MouseEvent) {
+  if (event.button !== 0) {
+    return;
+  }
+  hideContextMenu();
+  panning.value = false;
+  const canvasPoint = getCanvasPointFromMouseEvent(event);
+  draggingNodeId.value = node.id;
+  dragOffset.value = {
+    x: canvasPoint.x - node.position.x,
+    y: canvasPoint.y - node.position.y,
+  };
+  emit('selectNode', node.id);
+}
+
+function isCanvasBackgroundTarget(target: EventTarget | null) {
+  if (!(target instanceof Element) || !canvasRef.value) {
+    return false;
+  }
+  if (!canvasRef.value.contains(target)) {
+    return false;
+  }
+  return !target.closest(
+    '.designer-node-wrap, .designer-context-menu, .designer-toolbar',
+  );
+}
+
+function startCanvasPan(event: MouseEvent) {
+  if (
+    event.button !== 0 ||
+    draggingNodeId.value ||
+    !isCanvasBackgroundTarget(event.target)
+  ) {
+    return;
+  }
+  hideContextMenu();
+  cancelConnection();
+  panning.value = true;
+  panStart.value = {
+    x: event.clientX - viewportOffset.value.x,
+    y: event.clientY - viewportOffset.value.y,
+  };
+}
+
+function onCanvasMouseMove(event: MouseEvent) {
+  const canvasPoint = getCanvasPointFromMouseEvent(event);
+  mousePosition.value = canvasPoint;
+  if (panning.value) {
+    viewportOffset.value = {
+      x: event.clientX - panStart.value.x,
+      y: event.clientY - panStart.value.y,
+    };
+    return;
+  }
+  if (!draggingNodeId.value) {
+    return;
+  }
+  updateNodePosition(draggingNodeId.value, {
+    x: Math.max(8, canvasPoint.x - dragOffset.value.x),
+    y: Math.max(8, canvasPoint.y - dragOffset.value.y),
+  });
+}
+
+function stopInteractions() {
+  draggingNodeId.value = undefined;
+  panning.value = false;
+}
+
+function getCanvasDisplayPoint(event: MouseEvent): CanvasPoint {
+  const rect = canvasRef.value?.getBoundingClientRect();
+  if (!rect) {
+    return { x: event.clientX, y: event.clientY };
+  }
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top,
+  };
+}
+
+function getCanvasPointFromMouseEvent(event: MouseEvent): CanvasPoint {
+  const displayPoint = getCanvasDisplayPoint(event);
+  return {
+    x: (displayPoint.x - viewportOffset.value.x) / viewportScale.value,
+    y: (displayPoint.y - viewportOffset.value.y) / viewportScale.value,
+  };
+}
+
+function hideContextMenu() {
+  contextMenu.value = {
+    ...contextMenu.value,
+    edgeId: undefined,
+    nodeId: undefined,
+    visible: false,
+  };
+}
+
+function openCanvasContextMenu(event: MouseEvent) {
+  stopInteractions();
+  const canvasPoint = getCanvasPointFromMouseEvent(event);
+  const displayPoint = getCanvasDisplayPoint(event);
+  mousePosition.value = canvasPoint;
+  contextMenuCanvasPoint.value = canvasPoint;
+  contextMenu.value = {
+    type: 'canvas',
+    visible: true,
+    x: displayPoint.x,
+    y: displayPoint.y,
+  };
+}
+
+function openNodeContextMenu(node: WorkflowEditorNode, event: MouseEvent) {
+  stopInteractions();
+  const canvasPoint = getCanvasPointFromMouseEvent(event);
+  const displayPoint = getCanvasDisplayPoint(event);
+  mousePosition.value = canvasPoint;
+  emit('selectNode', node.id);
+  contextMenu.value = {
+    nodeId: node.id,
+    type: 'node',
+    visible: true,
+    x: displayPoint.x,
+    y: displayPoint.y,
+  };
+}
+
+function openEdgeContextMenu(edgeId: string, event: MouseEvent) {
+  stopInteractions();
+  const canvasPoint = getCanvasPointFromMouseEvent(event);
+  const displayPoint = getCanvasDisplayPoint(event);
+  mousePosition.value = canvasPoint;
+  contextMenu.value = {
+    edgeId,
+    type: 'edge',
+    visible: true,
+    x: displayPoint.x,
+    y: displayPoint.y,
+  };
+}
+
+function onCanvasClick() {
+  hideContextMenu();
+  cancelConnection();
+}
+
+function selectNode(nodeId: string) {
+  emit('selectNode', nodeId);
+  hideContextMenu();
+}
+
+function openNodeEditor(nodeId?: string) {
+  if (!nodeId) {
+    return;
+  }
+  selectNode(nodeId);
+  editorVisible.value = true;
+}
+
+function closeNodeEditor() {
+  editorVisible.value = false;
+}
+
+function startConnection(nodeId: string) {
+  const node = getNode(nodeId);
+  if (!node || !hasOutputHandle(node.type)) {
+    return;
+  }
+  hideContextMenu();
+  emit('selectNode', nodeId);
+  if (connectingFromNodeId.value === nodeId) {
+    cancelConnection();
+    return;
+  }
+  connectingFromNodeId.value = nodeId;
+}
+
+function finishConnection(nodeId: string) {
+  const fromNodeId = connectingFromNodeId.value;
+  if (!fromNodeId) {
+    return;
+  }
+  const node = getNode(nodeId);
+  if (!node || !hasInputHandle(node.type)) {
+    return;
+  }
+  createEdge(fromNodeId, nodeId);
+  cancelConnection();
+}
+
+function cancelConnection() {
+  connectingFromNodeId.value = undefined;
+}
+
+function handleCanvasWheel(event: WheelEvent) {
+  const displayPoint = getCanvasDisplayPoint(event as unknown as MouseEvent);
+  const delta = event.deltaY < 0 ? SCALE_STEP : -SCALE_STEP;
+  setViewportScale(viewportScale.value + delta, displayPoint);
+}
+
+async function toggleFullscreen() {
+  const element = shellRef.value;
+  if (!element || typeof document === 'undefined') {
+    return;
+  }
+  if (document.fullscreenElement === element) {
+    await document.exitFullscreen();
+    return;
+  }
+  await element.requestFullscreen();
+}
+
+function syncFullscreenState() {
+  if (typeof document === 'undefined') {
+    isFullscreen.value = false;
+    return;
+  }
+  isFullscreen.value = document.fullscreenElement === shellRef.value;
+}
+
+function handleGlobalKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    hideContextMenu();
+    cancelConnection();
+    closeNodeEditor();
+    stopInteractions();
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleGlobalKeydown);
+  document.addEventListener('fullscreenchange', syncFullscreenState);
+  syncFullscreenState();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleGlobalKeydown);
+  document.removeEventListener('fullscreenchange', syncFullscreenState);
+});
+</script>
+
+<template>
+  <div
+    ref="shellRef"
+    class="designer-shell"
+    :class="{ fullscreen: isFullscreen }"
+  >
+    <div
+      ref="canvasRef"
+      class="designer-canvas"
+      :class="{ panning }"
+      @click="onCanvasClick"
+      @contextmenu.prevent="openCanvasContextMenu"
+      @mousedown="startCanvasPan"
+      @mousemove="onCanvasMouseMove"
+      @mouseup="stopInteractions"
+      @mouseleave="stopInteractions"
+      @wheel.prevent="handleCanvasWheel"
+    >
+      <div class="designer-toolbar" @click.stop>
+        <button type="button" @click="zoomOut">－</button>
+        <button
+          type="button"
+          class="designer-toolbar-label"
+          @click="resetViewport"
+        >
+          {{ zoomPercent }}
+        </button>
+        <button type="button" @click="zoomIn">＋</button>
+        <button
+          type="button"
+          class="designer-toolbar-label"
+          @click="toggleFullscreen"
+        >
+          {{ isFullscreen ? '退出全屏' : '全屏' }}
+        </button>
+      </div>
+
+      <div class="designer-guide" @click.stop>
+        <div class="designer-tip">
+          右键画布新增节点，右键节点编辑，右键连线删除。
+        </div>
+        <div class="designer-tip">
+          左键拖拽空白区域可平移，滚轮可缩放，右上角可全屏。
+        </div>
+      </div>
+
+      <div class="designer-viewport" :style="viewportStyle">
+        <svg class="designer-lines">
+          <g v-for="edge in edges" :key="edge.id">
+            <path
+              :d="edgePath(edge)"
+              fill="none"
+              stroke="#bfbfbf"
+              stroke-width="2"
+            />
+            <path
+              :d="edgePath(edge)"
+              class="designer-edge-hit"
+              fill="none"
+              stroke="transparent"
+              stroke-width="14"
+              @contextmenu.prevent.stop="openEdgeContextMenu(edge.id, $event)"
+            />
+          </g>
+          <path
+            v-if="previewEdgePath"
+            :d="previewEdgePath"
+            fill="none"
+            stroke="#1677ff"
+            stroke-dasharray="6 4"
+            stroke-width="2"
+          />
+        </svg>
+
+        <div
+          v-for="node in nodes"
+          :key="node.id"
+          class="designer-node-wrap"
+          :class="{
+            active: selectedNodeId === node.id,
+            connecting: connectingFromNodeId === node.id,
+          }"
+          :style="nodeWrapperStyle(node)"
+        >
+          <button
+            v-if="hasInputHandle(node.type)"
+            class="designer-handle designer-handle-input"
+            type="button"
+            :title="connectingFromNodeId ? '连接到此节点' : '输入点'"
+            @click.stop="finishConnection(node.id)"
+            @mousedown.stop
+          ></button>
+          <div
+            class="designer-node"
+            :class="nodeShape(node.type)"
+            :style="{
+              borderColor: nodeColor(node.type),
+              color: nodeColor(node.type),
+            }"
+            @click.stop="selectNode(node.id)"
+            @contextmenu.prevent.stop="openNodeContextMenu(node, $event)"
+            @mousedown.stop="startDrag(node, $event)"
+          >
+            <div class="designer-node-content">
+              <div class="designer-node-type">{{ node.type }}</div>
+              <div class="designer-node-label">{{ node.data.label }}</div>
+            </div>
+          </div>
+          <button
+            v-if="hasOutputHandle(node.type)"
+            class="designer-handle designer-handle-output"
+            type="button"
+            :title="
+              connectingFromNodeId === node.id ? '取消连线' : '从此节点发起连线'
+            "
+            @click.stop="startConnection(node.id)"
+            @mousedown.stop
+          ></button>
+        </div>
+      </div>
+
+      <div
+        v-if="contextMenu.visible"
+        class="designer-context-menu"
+        :style="{ left: `${contextMenu.x}px`, top: `${contextMenu.y}px` }"
+        @click.stop
+      >
+        <template v-if="contextMenu.type === 'canvas'">
+          <div class="designer-context-title">添加节点</div>
+          <button
+            v-for="item in contextMenuNodeTypes"
+            :key="item.type"
+            class="designer-context-item"
+            type="button"
+            @click="createNode(item.type, contextMenuCanvasPoint)"
+          >
+            添加{{ item.label }}
+          </button>
+        </template>
+        <template v-else-if="contextMenu.type === 'edge'">
+          <div class="designer-context-title">连线操作</div>
+          <button
+            class="designer-context-item danger"
+            type="button"
+            @click="contextMenu.edgeId && removeEdge(contextMenu.edgeId)"
+          >
+            删除连线
+          </button>
+          <button
+            class="designer-context-item"
+            type="button"
+            @click="hideContextMenu"
+          >
+            取消
+          </button>
+        </template>
+        <template v-else>
+          <div class="designer-context-title">节点操作</div>
+          <button
+            class="designer-context-item"
+            type="button"
+            @click="openNodeEditor(contextMenu.nodeId)"
+          >
+            编辑节点
+          </button>
+          <button
+            class="designer-context-item danger"
+            type="button"
+            @click="contextMenu.nodeId && removeNode(contextMenu.nodeId)"
+          >
+            删除节点
+          </button>
+          <button
+            class="designer-context-item"
+            type="button"
+            @click="hideContextMenu"
+          >
+            取消
+          </button>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <a-modal
+    :open="editorVisible"
+    width="720px"
+    title="编辑节点"
+    :footer="null"
+    @cancel="closeNodeEditor"
+  >
+    <template v-if="selectedNode">
+      <a-form layout="vertical">
+        <a-form-item label="节点类型">
+          <a-input :value="nodeTypeLabel(selectedNode.type)" disabled />
+        </a-form-item>
+        <a-form-item label="节点名称">
+          <a-input
+            :value="selectedNode.data.label"
+            @update:value="(value) => updateSelectedNode({ label: value })"
+          />
+        </a-form-item>
+
+        <template v-if="selectedNode.type === 'APPROVER'">
+          <a-form-item label="审批人来源">
+            <a-select
+              :value="selectedNode.data.approverType || 'DESIGNATED_USER'"
+              :options="approverTypeOptions"
+              @update:value="
+                (value) => updateApproverType(value as WorkflowApproverType)
+              "
+            />
+          </a-form-item>
+          <a-form-item
+            v-if="
+              selectedNode.data.approverType === 'DESIGNATED_USER' ||
+              !selectedNode.data.approverType
+            "
+            label="指定审批人"
+          >
+            <WorkflowUserSelect
+              :model-value="selectedNode.data.approverId ?? undefined"
+              @update:model-value="updateDesignatedUser"
+            />
+          </a-form-item>
+          <a-form-item
+            v-if="selectedNode.data.approverType === 'DESIGNATED_ROLE'"
+            label="角色列表"
+          >
+            <WorkflowRoleSelect
+              :model-value="selectedNode.data.roleIds ?? []"
+              mode="multiple"
+              @update:model-value="updateRoleIds"
+            />
+          </a-form-item>
+          <a-form-item
+            v-if="selectedNode.data.approverType === 'FORM_FIELD_USER'"
+            label="用户字段"
+          >
+            <a-select
+              allow-clear
+              :value="selectedNode.data.formFieldKey"
+              :options="formFieldOptions"
+              @update:value="
+                (value) =>
+                  updateSelectedNode({
+                    formFieldKey: value ? String(value) : '',
+                  })
+              "
+            />
+          </a-form-item>
+          <a-form-item
+            v-if="selectedNode.data.approverType === 'DEPT_LEADER_UP'"
+            label="向上层级"
+          >
+            <a-input-number
+              style="width: 100%"
+              :min="1"
+              :value="selectedNode.data.deptLevel ?? 1"
+              @update:value="
+                (value) =>
+                  updateSelectedNode({
+                    deptLevel: value == null ? 1 : Number(value),
+                  })
+              "
+            />
+          </a-form-item>
+          <a-form-item
+            v-if="selectedNode.data.approverType === 'SELF_SELECT'"
+            label="候选用户列表"
+          >
+            <WorkflowUserSelect
+              :model-value="selectedNode.data.selfSelectOptions ?? []"
+              mode="multiple"
+              @update:model-value="updateSelfSelectOptions"
+            />
+          </a-form-item>
+          <a-alert
+            v-if="approverTypeMessage(selectedNode)"
+            type="info"
+            show-icon
+            :message="approverTypeMessage(selectedNode)"
+          />
+
+          <a-form-item label="审批方式">
+            <a-radio-group
+              :value="selectedNode.data.approveMode || 'OR_SIGN'"
+              button-style="solid"
+              option-type="button"
+              :options="[
+                { label: '或签', value: 'OR_SIGN' },
+                { label: '会签', value: 'COUNTERSIGN' },
+              ]"
+              @update:value="
+                (value) =>
+                  updateSelectedNode({
+                    approveMode: value as 'COUNTERSIGN' | 'OR_SIGN',
+                  })
+              "
+            />
+          </a-form-item>
+          <a-form-item
+            v-if="selectedNode.data.approveMode === 'COUNTERSIGN'"
+            label="通过比例"
+          >
+            <a-slider
+              :min="1"
+              :max="100"
+              :value="selectedNode.data.countersignRatio || 100"
+              @update:value="
+                (value) =>
+                  updateSelectedNode({ countersignRatio: Number(value) })
+              "
+            />
+          </a-form-item>
+          <a-form-item label="拒绝模式">
+            <a-select
+              :value="selectedNode.data.refuseMode || 'BACK_TO_START'"
+              :options="[
+                { label: '退回发起', value: 'BACK_TO_START' },
+                { label: '退回上一节点', value: 'BACK_TO_PREV' },
+                { label: '终止', value: 'TERMINATE' },
+              ]"
+              @update:value="
+                (value) =>
+                  updateSelectedNode({
+                    refuseMode: value as
+                      | 'BACK_TO_PREV'
+                      | 'BACK_TO_START'
+                      | 'TERMINATE',
+                  })
+              "
+            />
+          </a-form-item>
+          <a-form-item label="允许自审">
+            <a-switch
+              :checked="Boolean(selectedNode.data.selfApprove)"
+              @update:checked="
+                (value) => updateSelectedNode({ selfApprove: Boolean(value) })
+              "
+            />
+          </a-form-item>
+          <a-form-item label="超时时间（小时)">
+            <a-input-number
+              style="width: 100%"
+              :value="selectedNode.data.timeoutHours ?? undefined"
+              @update:value="
+                (value) =>
+                  updateSelectedNode({
+                    timeoutHours: value == null ? null : Number(value),
+                  })
+              "
+            />
+          </a-form-item>
+          <a-form-item label="超时动作">
+            <a-select
+              :value="selectedNode.data.timeoutAction || 'NOTIFY'"
+              :options="[
+                { label: '通知', value: 'NOTIFY' },
+                { label: '自动通过', value: 'AUTO_APPROVE' },
+                { label: '自动拒绝', value: 'AUTO_REJECT' },
+              ]"
+              @update:value="
+                (value) =>
+                  updateSelectedNode({
+                    timeoutAction: value as
+                      | 'AUTO_APPROVE'
+                      | 'AUTO_REJECT'
+                      | 'NOTIFY',
+                  })
+              "
+            />
+          </a-form-item>
+        </template>
+
+        <a-form-item v-if="selectedNode.type === 'CONDITION'" label="条件说明">
+          <a-textarea
+            :value="selectedNode.data.conditionText"
+            @update:value="
+              (value) =>
+                updateSelectedNode({
+                  conditionText: value ? String(value) : '',
+                })
+            "
+          />
+        </a-form-item>
+        <template v-if="selectedNode.type === 'CONDITION'">
+          <a-form-item label="命中规则">
+            <a-radio-group
+              :value="ensureConditionGroup(selectedNode).operator"
+              button-style="solid"
+              option-type="button"
+              :options="[
+                { label: '全部满足', value: 'AND' },
+                { label: '任一满足', value: 'OR' },
+              ]"
+              @update:value="
+                (value) =>
+                  updateConditionGroup({
+                    operator: String(
+                      value,
+                    ) as WorkflowConditionGroup['operator'],
+                  })
+              "
+            />
+          </a-form-item>
+          <div class="space-y-3">
+            <div
+              v-for="(condition, index) in ensureConditionGroup(selectedNode)
+                .conditions"
+              :key="`${selectedNode.id}_${index}`"
+              class="designer-condition-card"
+            >
+              <div class="designer-condition-header">
+                <span class="text-sm font-medium">条件 {{ index + 1 }}</span>
+                <a-button
+                  size="small"
+                  danger
+                  @click="removeConditionRule(index)"
+                >
+                  删除
+                </a-button>
+              </div>
+              <a-form-item label="条件字段">
+                <a-select
+                  allow-clear
+                  :value="condition.field"
+                  :options="formFieldOptions"
+                  @update:value="
+                    (value) =>
+                      updateConditionRule(index, {
+                        field: value ? String(value) : '',
+                      })
+                  "
+                />
+              </a-form-item>
+              <a-form-item label="比较方式">
+                <a-select
+                  :value="condition.operator"
+                  :options="[
+                    { label: '等于', value: 'EQ' },
+                    { label: '不等于', value: 'NEQ' },
+                    { label: '大于', value: 'GT' },
+                    { label: '大于等于', value: 'GTE' },
+                    { label: '小于', value: 'LT' },
+                    { label: '小于等于', value: 'LTE' },
+                    { label: '包含', value: 'CONTAINS' },
+                  ]"
+                  @update:value="
+                    (value) =>
+                      updateConditionRule(index, {
+                        operator: String(
+                          value,
+                        ) as WorkflowConditionRule['operator'],
+                      })
+                  "
+                />
+              </a-form-item>
+              <a-form-item label="比较值">
+                <a-input
+                  :value="condition.value"
+                  @update:value="
+                    (value) =>
+                      updateConditionRule(index, {
+                        value: value ? String(value) : '',
+                      })
+                  "
+                />
+              </a-form-item>
+            </div>
+          </div>
+          <a-button block type="dashed" @click="addConditionRule">
+            新增条件
+          </a-button>
+        </template>
+
+        <a-form-item v-if="selectedNode.type === 'CC'" label="抄送人列表">
+          <WorkflowUserSelect
+            :model-value="selectedNode.data.ccUserIds ?? []"
+            mode="multiple"
+            @update:model-value="updateCcUserIds"
+          />
+        </a-form-item>
+
+        <a-alert
+          v-if="selectedNode.type === 'PARALLEL'"
+          type="info"
+          show-icon
+          message="并行节点已支持多分支派发与汇聚。"
+        />
+        <a-alert
+          v-if="selectedNode.type === 'TRIGGER'"
+          type="info"
+          show-icon
+          message="触发器节点当前作为自动跳过节点处理，可继续串接后续审批。"
+        />
+      </a-form>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+.designer-shell {
+  position: relative;
+  min-height: 560px;
+}
+
+.designer-shell.fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  padding: 16px;
+  background: #fff;
+}
+
+.designer-canvas {
+  position: relative;
+  height: 100%;
+  min-height: 560px;
+  overflow: hidden;
+  cursor: grab;
+  background-color: #fff;
+  background-image: radial-gradient(circle, #f0f0f0 1px, transparent 1px);
+  background-size: 16px 16px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.designer-shell.fullscreen .designer-canvas {
+  min-height: calc(100vh - 32px);
+}
+
+.designer-canvas.panning {
+  cursor: grabbing;
+}
+
+.designer-toolbar {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 12;
+  display: flex;
+  gap: 8px;
+}
+
+.designer-toolbar button {
+  min-width: 36px;
+  height: 36px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
+}
+
+.designer-toolbar-label {
+  min-width: 64px !important;
+}
+
+.designer-guide {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 12;
+  padding: 10px 12px;
+  background: rgb(255 255 255 / 92%);
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
+}
+
+.designer-tip {
+  font-size: 12px;
+  line-height: 1.6;
+  color: #8c8c8c;
+}
+
+.designer-viewport {
+  position: absolute;
+  inset: 0;
+}
+
+.designer-lines {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.designer-edge-hit {
+  pointer-events: stroke;
+  cursor: pointer;
+}
+
+.designer-node-wrap {
+  position: absolute;
+}
+
+.designer-node-wrap.active .designer-node {
+  box-shadow: 0 0 0 3px rgb(22 119 255 / 15%);
+}
+
+.designer-node-wrap.connecting .designer-node {
+  box-shadow: 0 0 0 3px rgb(82 196 26 / 18%);
+}
+
+.designer-node {
+  position: absolute;
+  inset: 0;
+  cursor: move;
+  user-select: none;
+  background: #fff;
+  border: 2px solid #d9d9d9;
+  box-shadow: 0 6px 16px rgb(0 0 0 / 8%);
+}
+
+.designer-node.card {
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.designer-node.circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  text-align: center;
+  border-radius: 999px;
+}
+
+.designer-node.diamond {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 12px;
+  transform: rotate(45deg);
+}
+
+.designer-node-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.designer-node.diamond .designer-node-content {
+  transform: rotate(-45deg);
+}
+
+.designer-node-type {
+  font-size: 12px;
+  opacity: 0.75;
+}
+
+.designer-node-label {
+  margin-top: 6px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.designer-handle {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  width: 14px;
+  height: 14px;
+  cursor: crosshair;
+  background: #fff;
+  border: 2px solid #1677ff;
+  border-radius: 999px;
+  transform: translateY(-50%);
+}
+
+.designer-handle:hover {
+  background: #1677ff;
+}
+
+.designer-handle-input {
+  left: -7px;
+}
+
+.designer-handle-output {
+  right: -7px;
+}
+
+.designer-context-menu {
+  position: absolute;
+  z-index: 10;
+  min-width: 160px;
+  padding: 6px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
+}
+
+.designer-context-title {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.designer-context-item {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+}
+
+.designer-context-item:hover {
+  background: #f5f5f5;
+}
+
+.designer-context-item.danger {
+  color: #ff4d4f;
+}
+
+.designer-condition-card {
+  padding: 12px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+}
+
+.designer-condition-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+</style>
diff --git a/apps/web-antdv-next/src/plugins/workflow/components/WorkflowRoleSelect.vue b/apps/web-antdv-next/src/plugins/workflow/components/WorkflowRoleSelect.vue
new file mode 100644
index 000000000..b020b44ba
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/components/WorkflowRoleSelect.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { SysRoleResult } from '#/api';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { getAllSysRoleApi } from '#/api';
+
+interface SelectOption {
+  label: string;
+  value: number;
+}
+
+interface Props {
+  modelValue?: null | number | number[];
+  mode?: 'multiple' | 'single';
+  placeholder?: string;
+  allowClear?: boolean;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allowClear: true,
+  disabled: false,
+  mode: 'multiple',
+  modelValue: undefined,
+  placeholder: '搜索并选择角色',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number | number[]): void;
+}>();
+
+const loading = ref(false);
+const options = ref<SelectOption[]>([]);
+
+const selectValue = computed(() => {
+  if (props.mode === 'multiple') {
+    return Array.isArray(props.modelValue) ? props.modelValue : [];
+  }
+  return typeof props.modelValue === 'number' ? props.modelValue : undefined;
+});
+
+async function loadRoles() {
+  loading.value = true;
+  try {
+    const roles = await getAllSysRoleApi();
+    options.value = roles.map((role: SysRoleResult) => ({
+      label: role.name,
+      value: role.id,
+    }));
+  } finally {
+    loading.value = false;
+  }
+}
+
+function normalizeSingleValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return normalizeSingleValue(value[0]);
+  }
+  if (value === null || value === undefined || value === '') {
+    emit('update:modelValue', undefined);
+    return;
+  }
+  const normalizedValue = Number(value);
+  emit(
+    'update:modelValue',
+    Number.isFinite(normalizedValue) ? normalizedValue : undefined,
+  );
+}
+
+function normalizeMultipleValue(value: unknown) {
+  const normalizedValue = Array.isArray(value)
+    ? value.map(Number).filter((item) => Number.isFinite(item))
+    : [];
+  emit('update:modelValue', normalizedValue);
+}
+
+function updateValue(value: unknown) {
+  if (props.mode === 'multiple') {
+    normalizeMultipleValue(value);
+    return;
+  }
+  normalizeSingleValue(value);
+}
+
+onMounted(loadRoles);
+</script>
+
+<template>
+  <a-select
+    :mode="mode === 'multiple' ? 'multiple' : undefined"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    show-search
+    :loading="loading"
+    :value="selectValue"
+    :options="options"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+  />
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/components/WorkflowUserSelect.vue b/apps/web-antdv-next/src/plugins/workflow/components/WorkflowUserSelect.vue
new file mode 100644
index 000000000..246af23b2
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/components/WorkflowUserSelect.vue
@@ -0,0 +1,201 @@
+<script lang="ts" setup>
+import type { SysUserResult } from '#/api';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { getSysUserListApi } from '#/api';
+
+interface SelectOption {
+  label: string;
+  value: number;
+}
+
+interface Props {
+  modelValue?: null | number | number[];
+  mode?: 'multiple' | 'single';
+  placeholder?: string;
+  allowClear?: boolean;
+  disabled?: boolean;
+  options?: SelectOption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allowClear: true,
+  disabled: false,
+  mode: 'single',
+  modelValue: undefined,
+  options: undefined,
+  placeholder: '搜索用户名或昵称',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number | number[]): void;
+}>();
+
+const loading = ref(false);
+const innerOptions = ref<SelectOption[]>([]);
+
+const mergedOptions = computed(() => {
+  const optionMap = new Map<number, SelectOption>();
+  for (const option of props.options ?? []) {
+    optionMap.set(option.value, option);
+  }
+  for (const option of innerOptions.value) {
+    optionMap.set(option.value, option);
+  }
+  return [...optionMap.values()];
+});
+
+const selectValue = computed(() => {
+  if (props.mode === 'multiple') {
+    return Array.isArray(props.modelValue) ? props.modelValue : [];
+  }
+  return typeof props.modelValue === 'number' ? props.modelValue : undefined;
+});
+
+function userOptionLabel(
+  user: Pick<SysUserResult, 'id' | 'nickname' | 'username'>,
+) {
+  return user.nickname ? `${user.nickname}（${user.username}）` : user.username;
+}
+
+function mergeUserOptions(
+  users: Array<Pick<SysUserResult, 'id' | 'nickname' | 'username'>>,
+) {
+  const optionMap = new Map<number, SelectOption>();
+  for (const option of innerOptions.value) {
+    optionMap.set(option.value, option);
+  }
+  for (const user of users) {
+    optionMap.set(user.id, {
+      label: userOptionLabel(user),
+      value: user.id,
+    });
+  }
+  innerOptions.value = [...optionMap.values()];
+}
+
+async function searchUsers(keyword?: string) {
+  if (props.options?.length) {
+    return;
+  }
+  loading.value = true;
+  try {
+    const data = await getSysUserListApi({
+      page: 1,
+      size: 20,
+      status: 1,
+      username: keyword?.trim() || undefined,
+    });
+    mergeUserOptions(data.items);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function ensureUserOptionsForIds(ids: number[]) {
+  if (props.options?.length) {
+    return;
+  }
+  const existingIds = new Set(
+    mergedOptions.value.map((option) => option.value),
+  );
+  const missingIds = ids.filter((id) => !existingIds.has(id));
+  if (missingIds.length === 0) {
+    return;
+  }
+  loading.value = true;
+  try {
+    const data = await getSysUserListApi({
+      page: 1,
+      size: Math.max(missingIds.length * 2, 20),
+      status: 1,
+    });
+    mergeUserOptions(
+      data.items.filter((item: SysUserResult) => missingIds.includes(item.id)),
+    );
+  } finally {
+    loading.value = false;
+  }
+}
+
+function normalizeSingleValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return normalizeSingleValue(value[0]);
+  }
+  if (value === null || value === undefined || value === '') {
+    emit('update:modelValue', undefined);
+    return;
+  }
+  const normalizedValue = Number(value);
+  emit(
+    'update:modelValue',
+    Number.isFinite(normalizedValue) ? normalizedValue : undefined,
+  );
+}
+
+function normalizeMultipleValue(value: unknown) {
+  const normalizedValue = Array.isArray(value)
+    ? value.map(Number).filter((item) => Number.isFinite(item))
+    : [];
+  emit('update:modelValue', normalizedValue);
+}
+
+function updateValue(value: unknown) {
+  if (props.mode === 'multiple') {
+    normalizeMultipleValue(value);
+    return;
+  }
+  normalizeSingleValue(value);
+}
+
+watch(
+  () => props.modelValue,
+  async (value) => {
+    const ids = Array.isArray(value)
+      ? value.filter(
+          (item): item is number =>
+            typeof item === 'number' && Number.isFinite(item),
+        )
+      : (typeof value === 'number' && Number.isFinite(value)
+        ? [value]
+        : []);
+    if (ids.length > 0) {
+      await ensureUserOptionsForIds(ids);
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.options,
+  () => {
+    if (props.options?.length) {
+      innerOptions.value = [];
+    }
+  },
+);
+
+onMounted(async () => {
+  if (!props.options?.length) {
+    await searchUsers();
+  }
+});
+</script>
+
+<template>
+  <a-select
+    :mode="mode === 'multiple' ? 'multiple' : undefined"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    show-search
+    :filter-option="false"
+    :loading="loading"
+    :value="selectValue"
+    :options="mergedOptions"
+    :placeholder="placeholder"
+    @search="searchUsers"
+    @focus="() => searchUsers()"
+    @update:value="updateValue"
+  />
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/langs/en-US/workflow.json b/apps/web-antdv-next/src/plugins/workflow/langs/en-US/workflow.json
new file mode 100644
index 000000000..32e20e7c1
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/langs/en-US/workflow.json
@@ -0,0 +1,9 @@
+{
+  "menu": "Workflow",
+  "category": "Categories",
+  "definition": "Definitions",
+  "start": "Start Application",
+  "todo": "My Todo",
+  "apply": "My Apply",
+  "message": "Messages"
+}
diff --git a/apps/web-antdv-next/src/plugins/workflow/langs/zh-CN/workflow.json b/apps/web-antdv-next/src/plugins/workflow/langs/zh-CN/workflow.json
new file mode 100644
index 000000000..b7d96af44
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/langs/zh-CN/workflow.json
@@ -0,0 +1,9 @@
+{
+  "menu": "审批流",
+  "category": "流程分类",
+  "definition": "流程定义",
+  "start": "发起申请",
+  "todo": "待我审批",
+  "apply": "我的申请",
+  "message": "审批消息"
+}
diff --git a/apps/web-antdv-next/src/plugins/workflow/routes/index.ts b/apps/web-antdv-next/src/plugins/workflow/routes/index.ts
new file mode 100644
index 000000000..669a487e6
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/routes/index.ts
@@ -0,0 +1,112 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'WorkflowStartApply',
+    path: '/plugins/workflow/start',
+    component: () => import('#/plugins/workflow/views/start-apply.vue'),
+    meta: {
+      title: '发起申请',
+      icon: 'mdi:play-circle-outline',
+    },
+  },
+  {
+    name: 'WorkflowDefinition',
+    path: '/plugins/workflow/definition',
+    component: () => import('#/plugins/workflow/views/definition.vue'),
+    meta: {
+      title: $t('workflow.definition'),
+      icon: 'carbon:flow',
+    },
+  },
+  {
+    name: 'WorkflowEditor',
+    path: '/plugins/workflow/design/editor/:definitionId?',
+    component: () => import('#/plugins/workflow/views/editor.vue'),
+    meta: {
+      title: '流程设计器',
+      hideInMenu: true,
+      icon: 'carbon:flow-connection',
+    },
+  },
+  {
+    name: 'WorkflowFormEditor',
+    path: '/plugins/workflow/design/form-editor/:definitionId',
+    component: () => import('#/plugins/workflow/views/form-editor.vue'),
+    meta: {
+      title: '表单设计器',
+      hideInMenu: true,
+      icon: 'mdi:form-select',
+    },
+  },
+  {
+    name: 'WorkflowTodo',
+    path: '/plugins/workflow/my-todo',
+    component: () => import('#/plugins/workflow/views/my-todo.vue'),
+    meta: {
+      title: $t('workflow.todo'),
+      icon: 'mdi:clipboard-clock-outline',
+    },
+  },
+  {
+    name: 'WorkflowApply',
+    path: '/plugins/workflow/my-apply',
+    component: () => import('#/plugins/workflow/views/my-apply.vue'),
+    meta: {
+      title: $t('workflow.apply'),
+      icon: 'mdi:file-document-edit-outline',
+    },
+  },
+  {
+    name: 'WorkflowStart',
+    path: '/plugins/workflow/instance/start/:definitionId',
+    component: () => import('#/plugins/workflow/views/start.vue'),
+    meta: {
+      title: '发起申请',
+      hideInMenu: true,
+      icon: 'mdi:play-circle-outline',
+    },
+  },
+  {
+    name: 'WorkflowMessage',
+    path: '/plugins/workflow/message',
+    component: () => import('#/plugins/workflow/views/message.vue'),
+    meta: {
+      title: $t('workflow.message'),
+      icon: 'mdi:message-badge-outline',
+    },
+  },
+  {
+    name: 'WorkflowStatistics',
+    path: '/plugins/workflow/statistics',
+    component: () => import('#/plugins/workflow/views/statistics.vue'),
+    meta: {
+      title: '统计报表',
+      icon: 'mdi:chart-box-outline',
+    },
+  },
+  {
+    name: 'WorkflowDetail',
+    path: '/plugins/workflow/detail/:id',
+    component: () => import('#/plugins/workflow/views/detail.vue'),
+    meta: {
+      title: '流程详情',
+      hideInMenu: true,
+      icon: 'mdi:file-search-outline',
+    },
+  },
+  {
+    name: 'WorkflowInstanceDetail',
+    path: '/plugins/workflow/instance/detail/:id',
+    component: () => import('#/plugins/workflow/views/detail.vue'),
+    meta: {
+      title: '流程详情',
+      hideInMenu: true,
+      icon: 'mdi:file-search-outline',
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-antdv-next/src/plugins/workflow/types.ts b/apps/web-antdv-next/src/plugins/workflow/types.ts
new file mode 100644
index 000000000..0cc804e1c
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/types.ts
@@ -0,0 +1,410 @@
+export type WorkflowNodeType =
+  | 'APPROVER'
+  | 'CC'
+  | 'CONDITION'
+  | 'END'
+  | 'PARALLEL'
+  | 'START'
+  | 'TRIGGER';
+
+export type WorkflowApproverType =
+  | 'DEPT_LEADER'
+  | 'DEPT_LEADER_UP'
+  | 'DESIGNATED_ROLE'
+  | 'DESIGNATED_USER'
+  | 'FORM_FIELD_USER'
+  | 'INITIATOR'
+  | 'INITIATOR_LEADER'
+  | 'SELF_SELECT';
+
+export interface WorkflowNodePosition {
+  x: number;
+  y: number;
+}
+
+export type WorkflowConditionOperator =
+  | 'CONTAINS'
+  | 'EQ'
+  | 'GT'
+  | 'GTE'
+  | 'LT'
+  | 'LTE'
+  | 'NEQ';
+
+export interface WorkflowConditionRule {
+  field: string;
+  operator: WorkflowConditionOperator;
+  value: string;
+}
+
+export interface WorkflowConditionGroup {
+  operator: 'AND' | 'OR';
+  conditions: WorkflowConditionRule[];
+}
+
+export interface WorkflowNodeData {
+  label: string;
+  approverType?: WorkflowApproverType;
+  approveMode?: 'COUNTERSIGN' | 'OR_SIGN';
+  countersignRatio?: number;
+  refuseMode?: 'BACK_TO_PREV' | 'BACK_TO_START' | 'TERMINATE';
+  selfApprove?: boolean;
+  timeoutHours?: null | number;
+  timeoutAction?: 'AUTO_APPROVE' | 'AUTO_REJECT' | 'NOTIFY';
+  approverIds?: number[];
+  approverId?: null | number;
+  approverName?: string;
+  roleIds?: number[];
+  formFieldKey?: string;
+  deptLevel?: number;
+  selfSelectOptions?: number[];
+  conditionText?: string;
+  conditionField?: string;
+  conditionOperator?: WorkflowConditionOperator;
+  conditionValue?: string;
+  conditionGroup?: WorkflowConditionGroup;
+  ccUserIds?: number[];
+}
+
+export interface WorkflowEditorNode {
+  id: string;
+  type: WorkflowNodeType;
+  position: WorkflowNodePosition;
+  data: WorkflowNodeData;
+}
+
+export interface WorkflowEditorEdge {
+  id: string;
+  source: string;
+  target: string;
+}
+
+export interface WorkflowFlowConfig {
+  nodes: WorkflowEditorNode[];
+  edges: WorkflowEditorEdge[];
+}
+
+export interface WorkflowFormField {
+  id: string;
+  label: string;
+  field: string;
+  type: 'input' | 'number' | 'textarea';
+  required?: boolean;
+  placeholder?: string;
+}
+
+export interface WorkflowFormConfig {
+  fields: WorkflowFormField[];
+}
+
+export interface WorkflowDefinitionEditorValue {
+  category_id?: null | number;
+  name: string;
+  code: string;
+  description?: null | string;
+  status: number;
+  allow_withdraw: boolean;
+  allow_urge: boolean;
+  flow_config: WorkflowFlowConfig;
+  form_config: WorkflowFormConfig;
+}
+
+export const DEFAULT_WORKFLOW_FLOW_CONFIG: WorkflowFlowConfig = {
+  nodes: [
+    {
+      id: 'start',
+      type: 'START',
+      position: { x: 80, y: 180 },
+      data: { label: '开始' },
+    },
+    {
+      id: 'approve_1',
+      type: 'APPROVER',
+      position: { x: 280, y: 180 },
+      data: {
+        label: '审批',
+        approverType: 'DESIGNATED_USER',
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'end',
+      type: 'END',
+      position: { x: 500, y: 180 },
+      data: { label: '结束' },
+    },
+  ],
+  edges: [
+    { id: 'edge_start_approve_1', source: 'start', target: 'approve_1' },
+    { id: 'edge_approve_1_end', source: 'approve_1', target: 'end' },
+  ],
+};
+
+export const SERIAL_WORKFLOW_FLOW_TEMPLATE: WorkflowFlowConfig = {
+  nodes: [
+    {
+      id: 'start',
+      type: 'START',
+      position: { x: 80, y: 180 },
+      data: { label: '开始' },
+    },
+    {
+      id: 'approve_1',
+      type: 'APPROVER',
+      position: { x: 260, y: 180 },
+      data: {
+        label: '一级审批',
+        approverType: 'DESIGNATED_USER',
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'approve_2',
+      type: 'APPROVER',
+      position: { x: 460, y: 180 },
+      data: {
+        label: '二级审批',
+        approverType: 'DESIGNATED_USER',
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'end',
+      type: 'END',
+      position: { x: 660, y: 180 },
+      data: { label: '结束' },
+    },
+  ],
+  edges: [
+    { id: 'edge_start_approve_1', source: 'start', target: 'approve_1' },
+    {
+      id: 'edge_approve_1_approve_2',
+      source: 'approve_1',
+      target: 'approve_2',
+    },
+    { id: 'edge_approve_2_end', source: 'approve_2', target: 'end' },
+  ],
+};
+
+export const PARALLEL_WORKFLOW_FLOW_TEMPLATE: WorkflowFlowConfig = {
+  nodes: [
+    {
+      id: 'start',
+      type: 'START',
+      position: { x: 80, y: 220 },
+      data: { label: '开始' },
+    },
+    {
+      id: 'parallel_1',
+      type: 'PARALLEL',
+      position: { x: 240, y: 220 },
+      data: { label: '并行分支' },
+    },
+    {
+      id: 'approve_1',
+      type: 'APPROVER',
+      position: { x: 460, y: 120 },
+      data: {
+        label: '并行审批A',
+        approverType: 'DESIGNATED_USER',
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'approve_2',
+      type: 'APPROVER',
+      position: { x: 460, y: 320 },
+      data: {
+        label: '并行审批B',
+        approverType: 'DESIGNATED_USER',
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'end',
+      type: 'END',
+      position: { x: 700, y: 220 },
+      data: { label: '结束' },
+    },
+  ],
+  edges: [
+    { id: 'edge_start_parallel_1', source: 'start', target: 'parallel_1' },
+    {
+      id: 'edge_parallel_1_approve_1',
+      source: 'parallel_1',
+      target: 'approve_1',
+    },
+    {
+      id: 'edge_parallel_1_approve_2',
+      source: 'parallel_1',
+      target: 'approve_2',
+    },
+    { id: 'edge_approve_1_end', source: 'approve_1', target: 'end' },
+    { id: 'edge_approve_2_end', source: 'approve_2', target: 'end' },
+  ],
+};
+
+export const CONDITION_WORKFLOW_FLOW_TEMPLATE: WorkflowFlowConfig = {
+  nodes: [
+    {
+      id: 'start',
+      type: 'START',
+      position: { x: 80, y: 220 },
+      data: { label: '开始' },
+    },
+    {
+      id: 'approve_1',
+      type: 'APPROVER',
+      position: { x: 250, y: 220 },
+      data: {
+        label: '发起审批',
+        approverType: 'INITIATOR_LEADER',
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'condition_1',
+      type: 'CONDITION',
+      position: { x: 450, y: 220 },
+      data: {
+        label: '金额判断',
+        conditionText: '金额 >= 1000 走经理审批，否则抄送财务',
+        conditionField: 'amount',
+        conditionOperator: 'GTE',
+        conditionValue: '1000',
+        conditionGroup: {
+          operator: 'AND',
+          conditions: [
+            {
+              field: 'amount',
+              operator: 'GTE',
+              value: '1000',
+            },
+          ],
+        },
+      },
+    },
+    {
+      id: 'approve_2',
+      type: 'APPROVER',
+      position: { x: 680, y: 120 },
+      data: {
+        label: '经理审批',
+        approverType: 'DEPT_LEADER_UP',
+        deptLevel: 1,
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'cc_1',
+      type: 'CC',
+      position: { x: 680, y: 320 },
+      data: {
+        label: '抄送财务',
+        ccUserIds: [1],
+      },
+    },
+    {
+      id: 'end',
+      type: 'END',
+      position: { x: 920, y: 220 },
+      data: { label: '结束' },
+    },
+  ],
+  edges: [
+    { id: 'edge_start_approve_1', source: 'start', target: 'approve_1' },
+    {
+      id: 'edge_approve_1_condition_1',
+      source: 'approve_1',
+      target: 'condition_1',
+    },
+    {
+      id: 'edge_condition_1_approve_2',
+      source: 'condition_1',
+      target: 'approve_2',
+    },
+    { id: 'edge_condition_1_cc_1', source: 'condition_1', target: 'cc_1' },
+    { id: 'edge_approve_2_end', source: 'approve_2', target: 'end' },
+    { id: 'edge_cc_1_end', source: 'cc_1', target: 'end' },
+  ],
+};
+
+export const TRIGGER_WORKFLOW_FLOW_TEMPLATE: WorkflowFlowConfig = {
+  nodes: [
+    {
+      id: 'start',
+      type: 'START',
+      position: { x: 80, y: 180 },
+      data: { label: '开始' },
+    },
+    {
+      id: 'approve_1',
+      type: 'APPROVER',
+      position: { x: 270, y: 180 },
+      data: {
+        label: '业务审批',
+        approverType: 'DESIGNATED_USER',
+        approverIds: [],
+        approverId: null,
+        approverName: '',
+        roleIds: [],
+        formFieldKey: '',
+      },
+    },
+    {
+      id: 'trigger_1',
+      type: 'TRIGGER',
+      position: { x: 500, y: 180 },
+      data: {
+        label: '自动触发后续动作',
+      },
+    },
+    {
+      id: 'end',
+      type: 'END',
+      position: { x: 730, y: 180 },
+      data: { label: '结束' },
+    },
+  ],
+  edges: [
+    { id: 'edge_start_approve_1', source: 'start', target: 'approve_1' },
+    {
+      id: 'edge_approve_1_trigger_1',
+      source: 'approve_1',
+      target: 'trigger_1',
+    },
+    { id: 'edge_trigger_1_end', source: 'trigger_1', target: 'end' },
+  ],
+};
+
+export const DEFAULT_WORKFLOW_FORM_CONFIG: WorkflowFormConfig = {
+  fields: [],
+};
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/category.vue b/apps/web-antdv-next/src/plugins/workflow/views/category.vue
new file mode 100644
index 000000000..eb40da674
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/category.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+onMounted(async () => {
+  await router.replace('/plugins/workflow/definition');
+});
+</script>
+
+<template>
+  <div></div>
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/data.ts b/apps/web-antdv-next/src/plugins/workflow/views/data.ts
new file mode 100644
index 000000000..85c5053cd
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/data.ts
@@ -0,0 +1,416 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeGridProps } from '#/adapter/vxe-table';
+import type {
+  WorkflowCategoryResult,
+  WorkflowDefinitionResult,
+  WorkflowInstanceResult,
+  WorkflowMessageResult,
+} from '#/plugins/workflow/api';
+import type { WorkflowNodeType } from '#/plugins/workflow/types';
+
+import { $t } from '@vben/locales';
+
+export const workflowDefinitionQuerySchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '流程名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'code',
+    label: '流程编码',
+  },
+];
+
+export const workflowCategoryQuerySchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '分类名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'code',
+    label: '分类编码',
+  },
+];
+
+export function useWorkflowCategoryColumns(
+  onActionClick?: OnActionClickFn<WorkflowCategoryResult>,
+): VxeGridProps['columns'] {
+  return [
+    { field: 'seq', title: $t('common.table.id'), type: 'seq', width: 50 },
+    { field: 'name', title: '分类名称' },
+    { field: 'code', title: '分类编码', width: 160 },
+    { field: 'sort', title: '排序', width: 100 },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellTag',
+        options: [
+          { color: 'default', label: '停用', value: 0 },
+          { color: 'success', label: '启用', value: 1 },
+        ],
+      },
+    },
+    { field: 'remark', title: '备注' },
+    {
+      field: 'operation',
+      title: $t('common.table.operation'),
+      align: 'center',
+      fixed: 'right',
+      width: 100,
+      cellRender: {
+        attrs: { onClick: onActionClick },
+        name: 'CellOperation',
+        options: ['edit'],
+      },
+    },
+  ];
+}
+
+export const workflowCategorySchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '分类名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'code',
+    label: '分类编码',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'sort',
+    label: '排序',
+    defaultValue: 0,
+  },
+  {
+    component: 'RadioGroup',
+    fieldName: 'status',
+    label: '状态',
+    defaultValue: 1,
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    label: '备注',
+  },
+];
+
+export const workflowDefinitionBaseSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '流程名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'code',
+    label: '流程编码',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'description',
+    label: '描述',
+  },
+  {
+    component: 'RadioGroup',
+    fieldName: 'status',
+    label: '状态',
+    defaultValue: 0,
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+      options: [
+        { label: '草稿', value: 0 },
+        { label: '已发布', value: 1 },
+        { label: '已停用', value: 2 },
+      ],
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Switch',
+    fieldName: 'allow_withdraw',
+    label: '允许撤回',
+    defaultValue: true,
+  },
+  {
+    component: 'Switch',
+    fieldName: 'allow_urge',
+    label: '允许催办',
+    defaultValue: true,
+  },
+];
+
+export function createWorkflowDefinitionBaseSchema(
+  categoryOptions: Array<{ label: string; value: number }>,
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Select',
+      fieldName: 'category_id',
+      label: '流程分类',
+      componentProps: {
+        allowClear: true,
+        options: categoryOptions,
+      },
+    },
+    ...workflowDefinitionBaseSchema,
+  ];
+}
+
+export function useWorkflowDefinitionColumns(
+  onActionClick?: OnActionClickFn<WorkflowDefinitionResult>,
+): VxeGridProps['columns'] {
+  return [
+    { field: 'seq', title: $t('common.table.id'), type: 'seq', width: 50 },
+    { field: 'name', title: '流程名称' },
+    { field: 'code', title: '流程编码', width: 180 },
+    { field: 'description', title: '描述' },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellTag',
+        options: [
+          { color: 'default', label: '草稿', value: 0 },
+          { color: 'success', label: '已发布', value: 1 },
+          { color: 'warning', label: '已停用', value: 2 },
+        ],
+      },
+    },
+    {
+      field: 'created_time',
+      title: $t('common.table.created_time'),
+      width: 180,
+    },
+    {
+      field: 'operation',
+      title: $t('common.table.operation'),
+      align: 'center',
+      fixed: 'right',
+      width: 240,
+      cellRender: {
+        attrs: { onClick: onActionClick },
+        name: 'CellOperation',
+        options: [
+          { code: 'edit', text: '流程设计' },
+          { code: 'form', text: '表单设计' },
+          { code: 'start', text: '发起申请' },
+        ],
+      },
+    },
+  ];
+}
+
+export function workflowNodeTypeLabel(type: WorkflowNodeType) {
+  return {
+    APPROVER: '审批',
+    CC: '抄送',
+    CONDITION: '条件',
+    END: '结束',
+    PARALLEL: '并行',
+    START: '开始',
+    TRIGGER: '触发器',
+  }[type];
+}
+
+export function workflowStatusOptions() {
+  return [
+    { color: 'processing', label: '审批中', value: 'RUNNING' },
+    { color: 'success', label: '已通过', value: 'APPROVED' },
+    { color: 'error', label: '已拒绝', value: 'REJECTED' },
+    { color: 'warning', label: '已撤回', value: 'WITHDRAWN' },
+  ];
+}
+
+export function workflowFormDataText(
+  formData?: null | Record<string, any> | string,
+) {
+  if (!formData) {
+    return '-';
+  }
+  if (typeof formData === 'string') {
+    return formData;
+  }
+  return JSON.stringify(formData, null, 2);
+}
+
+export function workflowStatusLabel(status: string) {
+  return (
+    workflowStatusOptions().find((item) => item.value === status)?.label ||
+    status
+  );
+}
+
+export function workflowMessageTypeLabel(messageType: string) {
+  return (
+    {
+      APPROVED: '审批通过',
+      CC_NOTIFY: '抄送通知',
+      PENDING_APPROVAL: '待审批',
+      REJECTED: '审批拒绝',
+      URGE_NOTIFY: '催办提醒',
+      WITHDRAWN: '流程撤回',
+    }[messageType] || messageType
+  );
+}
+
+export function useWorkflowDetailDescriptions(
+  instance: WorkflowInstanceResult,
+) {
+  return [
+    { label: '实例编号', value: instance.instance_no },
+    { label: '标题', value: instance.title },
+    { label: '流程定义ID', value: String(instance.definition_id) },
+    { label: '发起人ID', value: String(instance.initiator_id) },
+    { label: '状态', value: workflowStatusLabel(instance.status) },
+    {
+      label: '当前任务ID',
+      value: instance.current_task_id ? String(instance.current_task_id) : '-',
+    },
+    {
+      label: '待办数',
+      value:
+        instance.todo_count !== null && instance.todo_count !== undefined
+          ? String(instance.todo_count)
+          : '-',
+    },
+    { label: '备注', value: instance.remark || '-' },
+    { label: '创建时间', value: instance.created_time },
+    { label: '更新时间', value: instance.updated_time || '-' },
+  ];
+}
+
+export function buildWorkflowInstanceColumns(
+  onActionClick?: OnActionClickFn<WorkflowInstanceResult>,
+  actions: Array<'approve' | 'detail' | 'reject'> = [
+    'detail',
+    'approve',
+    'reject',
+  ],
+): VxeGridProps['columns'] {
+  const operationOptions = actions.map((action) => {
+    if (action === 'detail') {
+      return { code: 'detail', text: '详情' };
+    }
+    if (action === 'approve') {
+      return { code: 'approve', text: '通过' };
+    }
+    return { code: 'reject', text: '拒绝' };
+  });
+
+  return [
+    { field: 'seq', title: $t('common.table.id'), type: 'seq', width: 50 },
+    { field: 'instance_no', title: '实例编号', width: 180 },
+    { field: 'title', title: '标题' },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellTag',
+        options: workflowStatusOptions(),
+      },
+    },
+    {
+      field: 'created_time',
+      title: $t('common.table.created_time'),
+      width: 180,
+    },
+    {
+      field: 'operation',
+      title: $t('common.table.operation'),
+      align: 'center',
+      fixed: 'right',
+      width: actions.length > 1 ? 220 : 120,
+      cellRender: {
+        attrs: { onClick: onActionClick },
+        name: 'CellOperation',
+        options: operationOptions,
+      },
+    },
+  ];
+}
+
+export function useWorkflowInstanceColumns(
+  onActionClick?: OnActionClickFn<WorkflowInstanceResult>,
+): VxeGridProps['columns'] {
+  return buildWorkflowInstanceColumns(onActionClick, [
+    'detail',
+    'approve',
+    'reject',
+  ]);
+}
+
+export function useWorkflowApplyColumns(
+  onActionClick?: OnActionClickFn<WorkflowInstanceResult>,
+): VxeGridProps['columns'] {
+  return buildWorkflowInstanceColumns(onActionClick, ['detail']);
+}
+
+export function useWorkflowMessageColumns(
+  onActionClick?: OnActionClickFn<WorkflowMessageResult>,
+): VxeGridProps['columns'] {
+  return [
+    { field: 'seq', title: $t('common.table.id'), type: 'seq', width: 50 },
+    { field: 'title', title: '标题', width: 180 },
+    {
+      field: 'message_type',
+      title: '消息类型',
+      width: 120,
+      formatter: ({ cellValue }) =>
+        workflowMessageTypeLabel(String(cellValue || '')),
+    },
+    { field: 'content', title: '内容' },
+    {
+      field: 'is_read',
+      title: '已读',
+      cellRender: {
+        name: 'CellTag',
+        options: [
+          { color: 'warning', label: '未读', value: false },
+          { color: 'success', label: '已读', value: true },
+        ],
+      },
+    },
+    {
+      field: 'created_time',
+      title: $t('common.table.created_time'),
+      width: 180,
+    },
+    {
+      field: 'operation',
+      title: $t('common.table.operation'),
+      align: 'center',
+      fixed: 'right',
+      width: 180,
+      cellRender: {
+        attrs: { onClick: onActionClick },
+        name: 'CellOperation',
+        options: [
+          { code: 'detail', text: '查看详情' },
+          { code: 'read', text: '标记已读' },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/definition.vue b/apps/web-antdv-next/src/plugins/workflow/views/definition.vue
new file mode 100644
index 000000000..83cb8fc37
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/definition.vue
@@ -0,0 +1,288 @@
+<script lang="ts" setup>
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type {
+  CreateWorkflowCategoryParams,
+  UpdateWorkflowCategoryParams,
+  WorkflowCategoryResult,
+  WorkflowDefinitionResult,
+} from '#/plugins/workflow/api';
+
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal, VbenButton } from '@vben/common-ui';
+import { MaterialSymbolsAdd } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { message } from 'antdv-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createWorkflowCategoryApi,
+  getWorkflowCategoryListApi,
+  getWorkflowCategoryOptionsApi,
+  getWorkflowDefinitionListApi,
+  updateWorkflowCategoryApi,
+} from '#/plugins/workflow/api';
+
+import {
+  useWorkflowCategoryColumns,
+  useWorkflowDefinitionColumns,
+  workflowCategoryQuerySchema,
+  workflowCategorySchema,
+  workflowDefinitionQuerySchema,
+} from './data';
+
+const router = useRouter();
+
+const formOptions: VbenFormProps = {
+  collapsed: true,
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: $t('common.form.query'),
+  },
+  schema: workflowDefinitionQuerySchema,
+};
+
+const categoryOptions = ref<Array<{ label: string; value: number }>>([]);
+const categoryMap = computed(
+  () => new Map(categoryOptions.value.map((item) => [item.value, item.label])),
+);
+
+async function ensureCategoryOptionsLoaded() {
+  categoryOptions.value = await getWorkflowCategoryOptionsApi();
+}
+
+function normalizeDefinitionItem(item: WorkflowDefinitionResult) {
+  return {
+    ...item,
+    category_name: item.category_id
+      ? (categoryMap.value.get(item.category_id) ?? '-')
+      : '-',
+  };
+}
+
+async function goToEditor(id?: number) {
+  await router.push(
+    id
+      ? `/plugins/workflow/design/editor/${id}`
+      : '/plugins/workflow/design/editor',
+  );
+}
+
+async function goToFormEditor(id: number) {
+  await router.push(`/plugins/workflow/design/form-editor/${id}`);
+}
+
+async function goToStart(id: number) {
+  await router.push(`/plugins/workflow/instance/start/${id}`);
+}
+
+function onDefinitionActionClick({
+  code,
+  row,
+}: OnActionClickParams<WorkflowDefinitionResult>) {
+  if (code === 'edit') {
+    goToEditor(row.id);
+    return;
+  }
+  if (code === 'form') {
+    goToFormEditor(row.id);
+    return;
+  }
+  if (code === 'start') {
+    goToStart(row.id);
+  }
+}
+
+const definitionGridOptions: VxeTableGridOptions<WorkflowDefinitionResult> = {
+  rowConfig: {
+    keyField: 'id',
+  },
+  height: 'auto',
+  toolbarConfig: {
+    refresh: true,
+    refreshOptions: { code: 'query' },
+    custom: true,
+    zoom: true,
+  },
+  columns: useWorkflowDefinitionColumns(onDefinitionActionClick),
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        await ensureCategoryOptionsLoaded();
+        const result = await getWorkflowDefinitionListApi({
+          page: page.currentPage,
+          size: page.pageSize,
+          ...formValues,
+        });
+        return {
+          ...result,
+          items: result.items.map((item) => normalizeDefinitionItem(item)),
+        };
+      },
+    },
+  },
+};
+
+const [DefinitionGrid, definitionGridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions: definitionGridOptions,
+});
+
+const categoryFormOptions: VbenFormProps = {
+  collapsed: true,
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: $t('common.form.query'),
+  },
+  schema: workflowCategoryQuerySchema,
+};
+
+function onCategoryActionClick({
+  code,
+  row,
+}: OnActionClickParams<WorkflowCategoryResult>) {
+  if (code === 'edit') {
+    categoryModalApi.setData(row).open();
+  }
+}
+
+const categoryGridOptions: VxeTableGridOptions<WorkflowCategoryResult> = {
+  rowConfig: {
+    keyField: 'id',
+  },
+  height: 420,
+  columns: useWorkflowCategoryColumns(onCategoryActionClick),
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getWorkflowCategoryListApi({
+          page: page.currentPage,
+          size: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+};
+
+const [CategoryGrid, categoryGridApi] = useVbenVxeGrid({
+  formOptions: categoryFormOptions,
+  gridOptions: categoryGridOptions,
+});
+
+const [CategoryForm, categoryFormApi] = useVbenForm({
+  layout: 'vertical',
+  showDefaultActions: false,
+  schema: workflowCategorySchema,
+});
+
+interface CategoryFormData extends CreateWorkflowCategoryParams {
+  id?: number;
+}
+
+const categoryFormData = ref<CategoryFormData>();
+const categoryModalTitle = computed(() => {
+  return categoryFormData.value?.id ? '编辑流程分类' : '新增流程分类';
+});
+
+async function refreshDefinitionData() {
+  await ensureCategoryOptionsLoaded();
+  await definitionGridApi.query();
+}
+
+async function refreshCategoryData() {
+  await categoryGridApi.query();
+}
+
+const [CategoryModal, categoryModalApi] = useVbenModal({
+  destroyOnClose: true,
+  async onConfirm() {
+    const { valid } = await categoryFormApi.validate();
+    if (!valid) {
+      return;
+    }
+    categoryModalApi.lock();
+    const data =
+      await categoryFormApi.getValues<CreateWorkflowCategoryParams>();
+    try {
+      await (categoryFormData.value?.id
+        ? updateWorkflowCategoryApi(
+            categoryFormData.value.id,
+            data as UpdateWorkflowCategoryParams,
+          )
+        : createWorkflowCategoryApi(data));
+      message.success('流程分类已保存');
+      await categoryModalApi.close();
+      await refreshCategoryData();
+      await refreshDefinitionData();
+    } finally {
+      categoryModalApi.unlock();
+    }
+  },
+  onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    const data = categoryModalApi.getData<CategoryFormData>();
+    categoryFormApi.resetForm();
+    categoryFormData.value = data;
+    if (data) {
+      categoryFormApi.setValues(data);
+    }
+  },
+});
+
+const [CategoryManagerModal, categoryManagerModalApi] = useVbenModal({
+  footer: false,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      refreshCategoryData();
+    }
+  },
+});
+
+function openCategoryManager() {
+  categoryManagerModalApi.open();
+}
+
+function openCreateCategory() {
+  categoryModalApi.setData(null).open();
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DefinitionGrid table-title="流程定义">
+      <template #toolbar-actions>
+        <VbenButton @click="openCategoryManager"> 分类管理 </VbenButton>
+        <VbenButton @click="goToEditor()">
+          <MaterialSymbolsAdd class="size-5" />
+          新增流程
+        </VbenButton>
+      </template>
+    </DefinitionGrid>
+
+    <CategoryManagerModal title="流程分类管理">
+      <CategoryGrid table-title="流程分类">
+        <template #toolbar-actions>
+          <VbenButton @click="openCreateCategory">
+            <MaterialSymbolsAdd class="size-5" />
+            新增分类
+          </VbenButton>
+        </template>
+      </CategoryGrid>
+    </CategoryManagerModal>
+
+    <CategoryModal :title="categoryModalTitle">
+      <CategoryForm />
+    </CategoryModal>
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/detail.vue b/apps/web-antdv-next/src/plugins/workflow/views/detail.vue
new file mode 100644
index 000000000..0d610083c
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/detail.vue
@@ -0,0 +1,435 @@
+<script lang="ts" setup>
+import type { WorkflowInstanceResult } from '#/plugins/workflow/api';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page } from '@vben/common-ui';
+
+import { message } from 'antdv-next';
+
+import {
+  approveWorkflowTaskApi,
+  getWorkflowInstanceDetailApi,
+  rejectWorkflowTaskApi,
+  urgeWorkflowInstanceApi,
+  withdrawWorkflowInstanceApi,
+} from '#/plugins/workflow/api';
+import { useWorkflowStore } from '#/store';
+
+import {
+  workflowFormDataText,
+  workflowMessageTypeLabel,
+  workflowStatusLabel,
+} from './data';
+
+const route = useRoute();
+const router = useRouter();
+const workflowStore = useWorkflowStore();
+const loading = ref(false);
+const actionLoading = ref(false);
+const instance = ref<null | WorkflowInstanceResult>(null);
+const actionComment = ref('');
+
+const formDataText = computed(() =>
+  workflowFormDataText(instance.value?.form_data),
+);
+const messages = computed(() => instance.value?.messages ?? []);
+const currentStatus = computed(() =>
+  workflowStatusLabel(instance.value?.status ?? '-'),
+);
+const currentTaskId = computed(() => instance.value?.current_task_id ?? null);
+const from = computed(() => String(route.query.from ?? ''));
+const back = computed(() => String(route.query.back ?? ''));
+const isMyApplyEntry = computed(() => from.value === 'my-apply');
+const isMyTodoEntry = computed(() => from.value === 'my-todo');
+const showApprovalActions = computed(
+  () => isMyTodoEntry.value && Boolean(currentTaskId.value),
+);
+const canWithdraw = computed(
+  () =>
+    isMyApplyEntry.value &&
+    instance.value?.status === 'RUNNING' &&
+    instance.value?.allow_withdraw === true,
+);
+const canUrge = computed(
+  () =>
+    isMyApplyEntry.value &&
+    instance.value?.status === 'RUNNING' &&
+    instance.value?.allow_urge === true &&
+    Boolean(instance.value?.current_task_id),
+);
+const backText = computed(() => {
+  if (from.value === 'my-apply') {
+    return '返回我的申请';
+  }
+  if (from.value === 'my-todo') {
+    return '返回待我审批';
+  }
+  if (from.value === 'message') {
+    return '返回审批消息';
+  }
+  return '返回列表';
+});
+const displayFormDataText = computed(() => {
+  const formData = instance.value?.form_data;
+  if (formData && typeof formData === 'object' && !Array.isArray(formData)) {
+    const filtered = Object.fromEntries(
+      Object.entries(formData).filter(
+        ([key]) => key !== '__self_select_assignees__',
+      ),
+    );
+    return workflowFormDataText(filtered);
+  }
+  return formDataText.value;
+});
+
+function buildBackRoute(query: Record<string, any> = {}) {
+  if (back.value) {
+    return back.value;
+  }
+  if (from.value === 'my-apply') {
+    return { path: '/plugins/workflow/my-apply', query };
+  }
+  if (from.value === 'my-todo') {
+    return { path: '/plugins/workflow/my-todo', query };
+  }
+  if (from.value === 'message') {
+    return { path: '/plugins/workflow/message', query };
+  }
+  return { path: '/plugins/workflow/my-apply', query };
+}
+
+function goToBack() {
+  if (back.value) {
+    router.push(back.value);
+    return;
+  }
+  router.push(buildBackRoute());
+}
+
+function goToMessageCenter() {
+  router.push('/plugins/workflow/message');
+}
+
+async function refreshLinkedState(type: 'action' | 'urge') {
+  if (type === 'urge') {
+    await workflowStore.refreshUnreadCount();
+    return;
+  }
+  await workflowStore.refreshCounts();
+}
+
+async function goBackWithRefresh() {
+  if (back.value) {
+    const separator = back.value.includes('?') ? '&' : '?';
+    await router.push(`${back.value}${separator}refresh=1`);
+    return;
+  }
+  await router.push(buildBackRoute({ refresh: '1' }));
+}
+
+async function loadDetail() {
+  const pk = Number(route.params.id);
+  if (!pk) {
+    message.error('流程实例参数无效');
+    return;
+  }
+  loading.value = true;
+  try {
+    instance.value = await getWorkflowInstanceDetailApi(pk);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function approve() {
+  if (!currentTaskId.value) {
+    message.warning('当前没有可审批任务');
+    return;
+  }
+  actionLoading.value = true;
+  try {
+    await approveWorkflowTaskApi(currentTaskId.value, {
+      comment: actionComment.value || '同意',
+    });
+    message.success('审批通过');
+    actionComment.value = '';
+    await loadDetail();
+    await refreshLinkedState('action');
+  } finally {
+    actionLoading.value = false;
+  }
+}
+
+async function reject() {
+  if (!currentTaskId.value) {
+    message.warning('当前没有可审批任务');
+    return;
+  }
+  actionLoading.value = true;
+  try {
+    await rejectWorkflowTaskApi(currentTaskId.value, {
+      comment: actionComment.value || '拒绝',
+    });
+    message.success('审批已拒绝');
+    actionComment.value = '';
+    await loadDetail();
+    await refreshLinkedState('action');
+  } finally {
+    actionLoading.value = false;
+  }
+}
+
+async function urge() {
+  const pk = Number(route.params.id);
+  if (!pk) {
+    message.error('流程实例参数无效');
+    return;
+  }
+  confirm({
+    title: '确认催办',
+    content: '确认向当前审批人发送催办提醒吗？',
+  }).then(async () => {
+    actionLoading.value = true;
+    try {
+      await urgeWorkflowInstanceApi(pk);
+      message.success('催办提醒已发送');
+      await loadDetail();
+      await refreshLinkedState('urge');
+    } finally {
+      actionLoading.value = false;
+    }
+  });
+}
+
+async function withdraw() {
+  const pk = Number(route.params.id);
+  if (!pk) {
+    message.error('流程实例参数无效');
+    return;
+  }
+  confirm({
+    title: '确认撤回',
+    content: '撤回后当前待办会被取消，确认继续吗？',
+  }).then(async () => {
+    actionLoading.value = true;
+    try {
+      instance.value = await withdrawWorkflowInstanceApi(pk);
+      message.success('流程已撤回');
+      await refreshLinkedState('action');
+    } finally {
+      actionLoading.value = false;
+    }
+  });
+}
+
+function showUnsupportedAction(action: string) {
+  message.info(`${action}功能后端接口暂未接入，当前先保留页面入口。`);
+}
+
+onMounted(loadDetail);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div v-loading="loading" class="space-y-4">
+      <a-card :bordered="false">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <div class="text-lg font-semibold">
+              {{ instance?.title || '流程详情' }}
+            </div>
+            <div class="mt-1 text-sm text-[var(--ant-color-text-secondary)]">
+              实例编号：{{ instance?.instance_no || '-' }}
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <a-button @click="goToBack">{{ backText }}</a-button>
+            <a-button v-if="from" type="link" @click="goBackWithRefresh">
+              返回并刷新
+            </a-button>
+            <a-tag color="processing">{{ currentStatus }}</a-tag>
+          </div>
+        </div>
+      </a-card>
+
+      <div class="workflow-detail-layout">
+        <div class="space-y-4">
+          <a-card title="流程进度">
+            <a-timeline>
+              <a-timeline-item>
+                <div class="font-medium">发起申请</div>
+                <div class="text-sm text-[var(--ant-color-text-secondary)]">
+                  发起人ID：{{ instance?.initiator_id || '-' }}
+                </div>
+              </a-timeline-item>
+              <a-timeline-item v-for="item in messages" :key="item.id">
+                <div class="flex items-center gap-2">
+                  <strong>{{ item.title }}</strong>
+                  <a-tag>
+                    {{ workflowMessageTypeLabel(item.message_type) }}
+                  </a-tag>
+                </div>
+                <div
+                  class="mt-1 text-sm text-[var(--ant-color-text-secondary)]"
+                >
+                  {{ item.content }}
+                </div>
+                <div class="mt-1 text-xs text-[var(--ant-color-text-tertiary)]">
+                  {{ item.created_time }}
+                </div>
+              </a-timeline-item>
+            </a-timeline>
+          </a-card>
+        </div>
+
+        <div class="space-y-4">
+          <a-card title="申请信息">
+            <a-descriptions :column="2" bordered>
+              <a-descriptions-item label="标题">
+                {{ instance?.title || '-' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="流程定义ID">
+                {{ instance?.definition_id || '-' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="发起人ID">
+                {{ instance?.initiator_id || '-' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="当前任务ID">
+                {{ instance?.current_task_id || '-' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="允许撤回">
+                {{ instance?.allow_withdraw ? '是' : '否' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="允许催办">
+                {{ instance?.allow_urge ? '是' : '否' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="备注" :span="2">
+                {{ instance?.remark || '-' }}
+              </a-descriptions-item>
+            </a-descriptions>
+          </a-card>
+
+          <a-card title="表单数据">
+            <pre
+              class="m-0 overflow-auto rounded bg-[var(--ant-color-fill-quaternary)] p-4 text-sm"
+              >{{ displayFormDataText }}</pre>
+          </a-card>
+
+          <a-card title="审批操作">
+            <a-form layout="vertical">
+              <a-alert
+                v-if="isMyTodoEntry && !showApprovalActions"
+                type="info"
+                show-icon
+                message="当前实例没有可由你处理的待办任务。"
+                class="mb-4"
+              />
+              <a-alert
+                v-else-if="isMyApplyEntry && !canWithdraw && !canUrge"
+                type="info"
+                show-icon
+                message="当前流程定义或实例状态下不可撤回、不可催办。"
+                class="mb-4"
+              />
+              <a-form-item label="审批意见">
+                <a-textarea
+                  v-model:value="actionComment"
+                  :rows="3"
+                  placeholder="请输入审批意见"
+                  :disabled="!showApprovalActions"
+                />
+              </a-form-item>
+              <a-space wrap>
+                <template v-if="isMyTodoEntry">
+                  <a-button
+                    type="primary"
+                    :loading="actionLoading"
+                    :disabled="!showApprovalActions"
+                    @click="approve"
+                  >
+                    通过
+                  </a-button>
+                  <a-button
+                    danger
+                    :loading="actionLoading"
+                    :disabled="!showApprovalActions"
+                    @click="reject"
+                  >
+                    拒绝
+                  </a-button>
+                  <a-button
+                    :disabled="!showApprovalActions"
+                    @click="showUnsupportedAction('转审')"
+                  >
+                    转审
+                  </a-button>
+                  <a-button
+                    :disabled="!showApprovalActions"
+                    @click="showUnsupportedAction('加签')"
+                  >
+                    加签
+                  </a-button>
+                </template>
+                <template v-if="isMyApplyEntry">
+                  <a-button
+                    :loading="actionLoading"
+                    :disabled="!canUrge"
+                    @click="urge"
+                  >
+                    催办
+                  </a-button>
+                  <a-button
+                    danger
+                    ghost
+                    :loading="actionLoading"
+                    :disabled="!canWithdraw"
+                    @click="withdraw"
+                  >
+                    撤回
+                  </a-button>
+                </template>
+                <a-button @click="goToBack">{{ backText }}</a-button>
+              </a-space>
+            </a-form>
+          </a-card>
+
+          <a-card title="流程消息">
+            <template #extra>
+              <a-button size="small" @click="goToMessageCenter">
+                消息中心
+              </a-button>
+            </template>
+            <a-empty v-if="messages.length === 0" description="暂无流程消息" />
+            <a-list v-else :data-source="messages" size="small">
+              <template #renderItem="{ item }">
+                <a-list-item>
+                  <div class="w-full">
+                    <div class="flex items-center gap-2">
+                      <strong>{{ item.title }}</strong>
+                      <a-tag>
+                        {{ workflowMessageTypeLabel(item.message_type) }}
+                      </a-tag>
+                    </div>
+                    <div class="mt-1 text-[var(--ant-color-text-secondary)]">
+                      {{ item.content }}
+                    </div>
+                  </div>
+                </a-list-item>
+              </template>
+            </a-list>
+          </a-card>
+        </div>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.workflow-detail-layout {
+  display: grid;
+  grid-template-columns: minmax(320px, 40%) minmax(0, 1fr);
+  gap: 16px;
+}
+</style>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/editor.vue b/apps/web-antdv-next/src/plugins/workflow/views/editor.vue
new file mode 100644
index 000000000..c0f33180e
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/editor.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import type {
+  WorkflowDefinitionEditorValue,
+  WorkflowFlowConfig,
+} from '#/plugins/workflow/types';
+
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, VbenButton } from '@vben/common-ui';
+
+import { message } from 'antdv-next';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  buildWorkflowDefinitionEditorValue,
+  createWorkflowDefinitionApi,
+  getWorkflowCategoryOptionsApi,
+  getWorkflowDefinitionDetailApi,
+  updateWorkflowDefinitionApi,
+} from '#/plugins/workflow/api';
+import FlowDesigner from '#/plugins/workflow/components/FlowDesigner/index.vue';
+import {
+  CONDITION_WORKFLOW_FLOW_TEMPLATE,
+  DEFAULT_WORKFLOW_FLOW_CONFIG,
+  PARALLEL_WORKFLOW_FLOW_TEMPLATE,
+  SERIAL_WORKFLOW_FLOW_TEMPLATE,
+  TRIGGER_WORKFLOW_FLOW_TEMPLATE,
+} from '#/plugins/workflow/types';
+
+import { createWorkflowDefinitionBaseSchema } from './data';
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const categoryOptions = ref<Array<{ label: string; value: number }>>([]);
+const definitionId = computed(() => {
+  const rawId = route.params.definitionId;
+  const id = Number(Array.isArray(rawId) ? rawId[0] : rawId);
+  return Number.isFinite(id) && id > 0 ? id : undefined;
+});
+const selectedNodeId = ref('approve_1');
+const currentDefinition = ref<WorkflowDefinitionEditorValue>(
+  buildWorkflowDefinitionEditorValue(),
+);
+
+const flowTemplates: Array<{
+  description: string;
+  key: 'condition' | 'default' | 'parallel' | 'serial' | 'trigger';
+  label: string;
+  value: WorkflowFlowConfig;
+}> = [
+  {
+    key: 'default',
+    label: '默认模板',
+    description: '开始 → 单审批 → 结束',
+    value: DEFAULT_WORKFLOW_FLOW_CONFIG,
+  },
+  {
+    key: 'serial',
+    label: '串行模板',
+    description: '开始 → 一级审批 → 二级审批 → 结束',
+    value: SERIAL_WORKFLOW_FLOW_TEMPLATE,
+  },
+  {
+    key: 'parallel',
+    label: '并行模板',
+    description: '开始 → 并行分支 → 双审批汇聚到结束',
+    value: PARALLEL_WORKFLOW_FLOW_TEMPLATE,
+  },
+  {
+    key: 'condition',
+    label: '条件模板',
+    description: '开始 → 审批 → 条件判断 → 经理审批/抄送财务 → 结束',
+    value: CONDITION_WORKFLOW_FLOW_TEMPLATE,
+  },
+  {
+    key: 'trigger',
+    label: '触发器模板',
+    description: '开始 → 审批 → 触发器 → 结束',
+    value: TRIGGER_WORKFLOW_FLOW_TEMPLATE,
+  },
+];
+
+const [DefinitionForm, definitionFormApi] = useVbenForm({
+  layout: 'vertical',
+  showDefaultActions: false,
+  schema: createWorkflowDefinitionBaseSchema([]),
+});
+
+async function ensureCategoryOptionsLoaded() {
+  categoryOptions.value = await getWorkflowCategoryOptionsApi();
+  await definitionFormApi.updateSchema([
+    {
+      componentProps: {
+        allowClear: true,
+        options: categoryOptions.value,
+      },
+      fieldName: 'category_id',
+    },
+  ]);
+}
+
+async function loadDefinition() {
+  loading.value = true;
+  try {
+    await ensureCategoryOptionsLoaded();
+    await definitionFormApi.resetForm();
+    if (definitionId.value) {
+      const detail = await getWorkflowDefinitionDetailApi(definitionId.value);
+      currentDefinition.value = buildWorkflowDefinitionEditorValue(detail);
+    } else {
+      currentDefinition.value = buildWorkflowDefinitionEditorValue();
+    }
+    selectedNodeId.value =
+      currentDefinition.value.flow_config.nodes[0]?.id || '';
+    await definitionFormApi.setValues({
+      allow_urge: currentDefinition.value.allow_urge,
+      allow_withdraw: currentDefinition.value.allow_withdraw,
+      category_id: currentDefinition.value.category_id,
+      code: currentDefinition.value.code,
+      description: currentDefinition.value.description,
+      name: currentDefinition.value.name,
+      status: currentDefinition.value.status,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+const formFieldOptions = computed(() => {
+  return currentDefinition.value.form_config.fields.map((item) => ({
+    label: item.label,
+    value: item.field,
+  }));
+});
+
+function cloneFlowConfig(value: WorkflowFlowConfig) {
+  return structuredClone(value);
+}
+
+function applyFlowTemplate(value: WorkflowFlowConfig) {
+  currentDefinition.value = {
+    ...currentDefinition.value,
+    flow_config: cloneFlowConfig(value),
+  };
+  selectedNodeId.value = currentDefinition.value.flow_config.nodes[0]?.id || '';
+  message.success('已应用流程模板');
+}
+
+function onFlowConfigChange(
+  value: WorkflowDefinitionEditorValue['flow_config'],
+) {
+  currentDefinition.value = {
+    ...currentDefinition.value,
+    flow_config: value,
+  };
+  if (!value.nodes.some((item) => item.id === selectedNodeId.value)) {
+    selectedNodeId.value = value.nodes[0]?.id || '';
+  }
+}
+
+async function saveDefinition() {
+  const { valid } = await definitionFormApi.validate();
+  if (!valid) {
+    return;
+  }
+  const values =
+    await definitionFormApi.getValues<WorkflowDefinitionEditorValue>();
+  const payload = {
+    ...values,
+    flow_config: currentDefinition.value.flow_config,
+    form_config: currentDefinition.value.form_config,
+  };
+  await (definitionId.value
+    ? updateWorkflowDefinitionApi(definitionId.value, payload)
+    : createWorkflowDefinitionApi(payload));
+  message.success('流程已保存');
+  await router.push('/plugins/workflow/definition');
+}
+
+function goToDefinitionList() {
+  router.push('/plugins/workflow/definition');
+}
+
+function goToFormEditor() {
+  if (!definitionId.value) {
+    message.warning('请先保存流程后再设计表单');
+    return;
+  }
+  router.push(`/plugins/workflow/design/form-editor/${definitionId.value}`);
+}
+
+loadDefinition();
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div v-loading="loading" class="space-y-4">
+      <a-card :bordered="false">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <div class="text-lg font-semibold">
+              {{ definitionId ? '流程设计器' : '新建流程' }}
+            </div>
+            <div class="text-sm text-[var(--ant-color-text-secondary)]">
+              左侧维护基础信息，中间编辑画布，节点配置改为在画布中右击编辑。
+            </div>
+          </div>
+          <a-space wrap>
+            <a-button @click="goToDefinitionList">返回列表</a-button>
+            <a-button @click="goToFormEditor">表单设计</a-button>
+            <VbenButton @click="saveDefinition">保存流程</VbenButton>
+          </a-space>
+        </div>
+      </a-card>
+
+      <div class="workflow-editor-layout">
+        <div class="workflow-editor-side">
+          <a-card title="基础信息" size="small">
+            <DefinitionForm />
+          </a-card>
+          <a-card v-if="!definitionId" title="流程模板" size="small">
+            <a-space direction="vertical" class="w-full">
+              <a-button
+                v-for="template in flowTemplates"
+                :key="template.key"
+                block
+                @click="applyFlowTemplate(template.value)"
+              >
+                {{ template.label }}
+              </a-button>
+            </a-space>
+            <a-list class="mt-3" size="small">
+              <a-list-item
+                v-for="template in flowTemplates"
+                :key="`${template.key}-desc`"
+              >
+                <div>
+                  <div class="font-medium">{{ template.label }}</div>
+                  <div class="text-[var(--ant-color-text-secondary)]">
+                    {{ template.description }}
+                  </div>
+                </div>
+              </a-list-item>
+            </a-list>
+          </a-card>
+        </div>
+
+        <a-card class="workflow-editor-canvas" title="流程画布" size="small">
+          <FlowDesigner
+            :model-value="currentDefinition.flow_config"
+            :selected-node-id="selectedNodeId"
+            :form-field-options="formFieldOptions"
+            @selectNode="(nodeId) => (selectedNodeId = nodeId)"
+            @update:model-value="onFlowConfigChange"
+          />
+        </a-card>
+
+        <div class="workflow-editor-side">
+          <a-card title="页面操作" size="small">
+            <a-space direction="vertical" class="w-full">
+              <a-alert
+                type="info"
+                show-icon
+                message="节点配置已移动到画布节点右键菜单中的“编辑节点”。"
+              />
+              <a-button block @click="goToFormEditor">进入表单设计器</a-button>
+              <a-button block @click="goToDefinitionList">
+                返回流程定义列表
+              </a-button>
+            </a-space>
+          </a-card>
+          <a-card title="节点说明" size="small">
+            <a-list size="small">
+              <a-list-item>开始节点：流程入口</a-list-item>
+              <a-list-item>
+                审批节点：支持指定用户/角色/发起人相关来源
+              </a-list-item>
+              <a-list-item>条件节点：根据表单值选择分支</a-list-item>
+              <a-list-item>
+                并行节点：可同时派发多个分支任务，待全部分支完成后再汇聚
+              </a-list-item>
+              <a-list-item>触发器节点：自动跳过并进入下游</a-list-item>
+              <a-list-item>抄送节点：发送消息通知</a-list-item>
+              <a-list-item>结束节点：流程结束</a-list-item>
+            </a-list>
+          </a-card>
+        </div>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.workflow-editor-layout {
+  display: grid;
+  grid-template-columns: 320px 1fr 320px;
+  gap: 16px;
+}
+
+.workflow-editor-side {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.workflow-editor-canvas {
+  min-height: 720px;
+}
+</style>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/form-editor.vue b/apps/web-antdv-next/src/plugins/workflow/views/form-editor.vue
new file mode 100644
index 000000000..79725d6f7
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/form-editor.vue
@@ -0,0 +1,324 @@
+<script lang="ts" setup>
+import type {
+  WorkflowDefinitionEditorValue,
+  WorkflowFormField,
+} from '#/plugins/workflow/types';
+
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, VbenButton } from '@vben/common-ui';
+
+import { message } from 'antdv-next';
+
+import {
+  buildWorkflowDefinitionEditorValue,
+  getWorkflowDefinitionDetailApi,
+  updateWorkflowDefinitionApi,
+} from '#/plugins/workflow/api';
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const definitionId = computed(() => Number(route.params.definitionId));
+const currentDefinition = ref<WorkflowDefinitionEditorValue>(
+  buildWorkflowDefinitionEditorValue(),
+);
+const selectedFieldId = ref('');
+const draggingFieldId = ref('');
+const dragOverFieldId = ref('');
+
+const selectedField = computed<undefined | WorkflowFormField>(() => {
+  return currentDefinition.value.form_config.fields.find(
+    (item) => item.id === selectedFieldId.value,
+  );
+});
+
+async function loadDefinition() {
+  if (!definitionId.value) {
+    message.error('流程定义参数无效');
+    return;
+  }
+  loading.value = true;
+  try {
+    const detail = await getWorkflowDefinitionDetailApi(definitionId.value);
+    currentDefinition.value = buildWorkflowDefinitionEditorValue(detail);
+    selectedFieldId.value =
+      currentDefinition.value.form_config.fields[0]?.id || '';
+  } finally {
+    loading.value = false;
+  }
+}
+
+function applyFieldOrder(fields: WorkflowFormField[]) {
+  currentDefinition.value = {
+    ...currentDefinition.value,
+    form_config: {
+      fields,
+    },
+  };
+}
+
+function selectField(fieldId: string) {
+  selectedFieldId.value = fieldId;
+}
+
+function onFieldDragStart(fieldId: string) {
+  draggingFieldId.value = fieldId;
+  selectedFieldId.value = fieldId;
+}
+
+function onFieldDragOver(fieldId: string) {
+  if (!draggingFieldId.value || draggingFieldId.value === fieldId) {
+    return;
+  }
+  dragOverFieldId.value = fieldId;
+}
+
+function onFieldDrop(targetFieldId: string) {
+  const sourceFieldId = draggingFieldId.value;
+  draggingFieldId.value = '';
+  dragOverFieldId.value = '';
+  if (!sourceFieldId || sourceFieldId === targetFieldId) {
+    return;
+  }
+  const fields = [...currentDefinition.value.form_config.fields];
+  const sourceIndex = fields.findIndex((item) => item.id === sourceFieldId);
+  const targetIndex = fields.findIndex((item) => item.id === targetFieldId);
+  if (sourceIndex === -1 || targetIndex === -1) {
+    return;
+  }
+  const [field] = fields.splice(sourceIndex, 1);
+  if (!field) {
+    return;
+  }
+  fields.splice(targetIndex, 0, field);
+  applyFieldOrder(fields);
+  selectedFieldId.value = field.id;
+}
+
+function onFieldDragEnd() {
+  draggingFieldId.value = '';
+  dragOverFieldId.value = '';
+}
+
+function addFormField() {
+  const nextIndex = currentDefinition.value.form_config.fields.length + 1;
+  const field: WorkflowFormField = {
+    id: `field_${nextIndex}`,
+    field: `field_${nextIndex}`,
+    label: `字段${nextIndex}`,
+    type: 'input',
+    required: false,
+    placeholder: '',
+  };
+  currentDefinition.value = {
+    ...currentDefinition.value,
+    form_config: {
+      fields: [...currentDefinition.value.form_config.fields, field],
+    },
+  };
+  selectedFieldId.value = field.id;
+}
+
+function updateSelectedField(patch: Partial<WorkflowFormField>) {
+  const fieldId = selectedFieldId.value;
+  currentDefinition.value = {
+    ...currentDefinition.value,
+    form_config: {
+      fields: currentDefinition.value.form_config.fields.map((item) =>
+        item.id === fieldId
+          ? {
+              ...item,
+              ...patch,
+            }
+          : item,
+      ),
+    },
+  };
+}
+
+function removeSelectedField() {
+  if (!selectedFieldId.value) {
+    return;
+  }
+  const nextFields = currentDefinition.value.form_config.fields.filter(
+    (item) => item.id !== selectedFieldId.value,
+  );
+  currentDefinition.value = {
+    ...currentDefinition.value,
+    form_config: {
+      fields: nextFields,
+    },
+  };
+  selectedFieldId.value = nextFields[0]?.id || '';
+}
+
+async function saveFormConfig() {
+  if (!definitionId.value) {
+    return;
+  }
+  await updateWorkflowDefinitionApi(
+    definitionId.value,
+    currentDefinition.value,
+  );
+  message.success('表单配置已保存');
+}
+
+function goToEditor() {
+  router.push(`/plugins/workflow/design/editor/${definitionId.value}`);
+}
+
+loadDefinition();
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div v-loading="loading" class="space-y-4">
+      <a-card :bordered="false">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <div class="text-lg font-semibold">表单设计器</div>
+            <div class="text-sm text-[var(--ant-color-text-secondary)]">
+              独立维护表单字段、排序和属性，不再混在流程定义列表页中。
+            </div>
+          </div>
+          <a-space wrap>
+            <a-button @click="goToEditor">返回流程设计</a-button>
+            <VbenButton @click="saveFormConfig">保存表单</VbenButton>
+          </a-space>
+        </div>
+      </a-card>
+
+      <div class="workflow-form-layout">
+        <a-card title="字段面板" size="small">
+          <a-space direction="vertical" class="w-full">
+            <a-button block type="dashed" @click="addFormField">
+              新增输入框
+            </a-button>
+            <a-button block @click="addFormField">新增字段</a-button>
+            <a-button block danger @click="removeSelectedField">
+              删除当前字段
+            </a-button>
+          </a-space>
+        </a-card>
+
+        <a-card title="表单预览" size="small">
+          <div class="space-y-3">
+            <div
+              v-for="(item, index) in currentDefinition.form_config.fields"
+              :key="item.id"
+              class="workflow-form-field-item"
+              :class="{
+                active: selectedFieldId === item.id,
+                dragging: draggingFieldId === item.id,
+                'drag-over': dragOverFieldId === item.id,
+              }"
+              draggable="true"
+              @click="selectField(item.id)"
+              @dragstart="onFieldDragStart(item.id)"
+              @dragover.prevent="onFieldDragOver(item.id)"
+              @drop.prevent="onFieldDrop(item.id)"
+              @dragend="onFieldDragEnd"
+            >
+              <div class="mb-2 font-medium">
+                {{ index + 1 }}. {{ item.label }}
+              </div>
+              <a-input :placeholder="item.placeholder || '请输入'" disabled />
+              <div class="mt-2 text-xs text-[var(--ant-color-text-secondary)]">
+                {{ item.field }} / {{ item.type }}
+              </div>
+            </div>
+            <a-empty
+              v-if="currentDefinition.form_config.fields.length === 0"
+              description="暂无字段"
+            />
+          </div>
+        </a-card>
+
+        <a-card title="字段配置" size="small">
+          <template v-if="selectedField">
+            <a-form layout="vertical">
+              <a-form-item label="显示名称">
+                <a-input
+                  :value="selectedField.label"
+                  @update:value="
+                    (value) => updateSelectedField({ label: value })
+                  "
+                />
+              </a-form-item>
+              <a-form-item label="字段标识">
+                <a-input
+                  :value="selectedField.field"
+                  @update:value="
+                    (value) => updateSelectedField({ field: value })
+                  "
+                />
+              </a-form-item>
+              <a-form-item label="字段类型">
+                <a-select
+                  :value="selectedField.type"
+                  :options="[
+                    { label: '输入框', value: 'input' },
+                    { label: '多行文本', value: 'textarea' },
+                    { label: '数字', value: 'number' },
+                  ]"
+                  @update:value="
+                    (value) =>
+                      updateSelectedField({
+                        type: String(value) as WorkflowFormField['type'],
+                      })
+                  "
+                />
+              </a-form-item>
+              <a-form-item label="占位提示">
+                <a-input
+                  :value="selectedField.placeholder"
+                  @update:value="
+                    (value) => updateSelectedField({ placeholder: value })
+                  "
+                />
+              </a-form-item>
+              <a-form-item label="必填">
+                <a-switch
+                  :checked="selectedField.required"
+                  @update:checked="
+                    (value) => updateSelectedField({ required: Boolean(value) })
+                  "
+                />
+              </a-form-item>
+            </a-form>
+          </template>
+          <a-empty v-else description="请选择字段" />
+        </a-card>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.workflow-form-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr 320px;
+  gap: 16px;
+}
+
+.workflow-form-field-item {
+  padding: 12px;
+  cursor: grab;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+}
+
+.workflow-form-field-item.active {
+  background: rgb(22 119 255 / 8%);
+}
+
+.workflow-form-field-item.dragging {
+  opacity: 0.5;
+}
+
+.workflow-form-field-item.drag-over {
+  box-shadow: inset 0 0 0 1px #1677ff;
+}
+</style>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/message.vue b/apps/web-antdv-next/src/plugins/workflow/views/message.vue
new file mode 100644
index 000000000..10e6927e6
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/message.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { WorkflowMessageResult } from '#/plugins/workflow/api';
+
+import { computed, onActivated, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { message } from 'antdv-next';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getWorkflowMessageListApi,
+  readWorkflowMessageApi,
+} from '#/plugins/workflow/api';
+import { useWorkflowStore } from '#/store';
+
+import { useWorkflowMessageColumns } from './data';
+
+const route = useRoute();
+const workflowStore = useWorkflowStore();
+const router = useRouter();
+
+const title = computed(() => `审批消息（未读 ${workflowStore.unreadCount}）`);
+
+async function loadUnreadCount() {
+  await workflowStore.refreshUnreadCount();
+}
+
+async function refreshIfNeeded() {
+  if (route.query.refresh !== '1') {
+    return;
+  }
+  await Promise.all([gridApi.query(), loadUnreadCount()]);
+  await router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      refresh: undefined,
+    },
+  });
+}
+
+async function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<WorkflowMessageResult>) {
+  if (code === 'detail') {
+    if (!row.instance_id) {
+      message.warning('该消息没有关联流程实例');
+      return;
+    }
+    await router.push(
+      `/plugins/workflow/detail/${row.instance_id}?from=message&back=${encodeURIComponent(route.fullPath)}`,
+    );
+    return;
+  }
+  if (code === 'read' && !row.is_read) {
+    await readWorkflowMessageApi(row.id);
+    message.success('已标记为已读');
+    await loadUnreadCount();
+    gridApi.query();
+  }
+}
+
+const gridOptions: VxeTableGridOptions<WorkflowMessageResult> = {
+  rowConfig: {
+    keyField: 'id',
+  },
+  height: 'auto',
+  toolbarConfig: {
+    refresh: true,
+    refreshOptions: { code: 'query' },
+    custom: true,
+    zoom: true,
+  },
+  columns: useWorkflowMessageColumns(onActionClick),
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getWorkflowMessageListApi({
+          page: page.currentPage,
+          size: page.pageSize,
+        });
+      },
+    },
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+onMounted(async () => {
+  await workflowStore.init();
+  await loadUnreadCount();
+  await refreshIfNeeded();
+});
+
+onActivated(refreshIfNeeded);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid :table-title="title" />
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/my-apply.vue b/apps/web-antdv-next/src/plugins/workflow/views/my-apply.vue
new file mode 100644
index 000000000..a09161051
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/my-apply.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WorkflowInstanceResult } from '#/plugins/workflow/api';
+
+import { onActivated, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkflowMyApplyListApi } from '#/plugins/workflow/api';
+
+const route = useRoute();
+const router = useRouter();
+
+async function refreshIfNeeded() {
+  if (route.query.refresh !== '1') {
+    return;
+  }
+  await gridApi.query();
+  await router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      refresh: undefined,
+    },
+  });
+}
+
+const gridOptions: VxeTableGridOptions<WorkflowInstanceResult> = {
+  rowConfig: {
+    keyField: 'id',
+  },
+  height: 'auto',
+  toolbarConfig: {
+    refresh: true,
+    refreshOptions: { code: 'query' },
+    custom: true,
+    zoom: true,
+  },
+  pagerConfig: {
+    pageSize: 10,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getWorkflowMyApplyListApi({
+          page: page.currentPage,
+          size: page.pageSize,
+        });
+      },
+    },
+  },
+  columns: [
+    { type: 'seq', width: 60, title: '#' },
+    { field: 'instance_no', title: '实例编号', width: 180 },
+    { field: 'title', title: '申请标题', minWidth: 260 },
+    { field: 'status', title: '状态', width: 120 },
+    { field: 'created_time', title: '发起时间', width: 180 },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'operation' },
+    },
+  ],
+};
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+onMounted(refreshIfNeeded);
+onActivated(refreshIfNeeded);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="我的申请">
+      <template #operation="{ row }">
+        <a-button
+          size="small"
+          @click="
+            router.push(
+              `/plugins/workflow/instance/detail/${row.id}?from=my-apply&back=${encodeURIComponent(route.fullPath)}`,
+            )
+          "
+        >
+          查看详情
+        </a-button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/my-todo.vue b/apps/web-antdv-next/src/plugins/workflow/views/my-todo.vue
new file mode 100644
index 000000000..d26edc2a0
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/my-todo.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WorkflowInstanceResult } from '#/plugins/workflow/api';
+
+import { onActivated, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { message } from 'antdv-next';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  approveWorkflowTaskApi,
+  getWorkflowMyTodoListApi,
+  rejectWorkflowTaskApi,
+} from '#/plugins/workflow/api';
+import { useWorkflowStore } from '#/store';
+
+const route = useRoute();
+const router = useRouter();
+const workflowStore = useWorkflowStore();
+
+function priorityLabel(row: WorkflowInstanceResult) {
+  return row.current_task_id ? '处理中' : '普通';
+}
+
+async function refreshIfNeeded() {
+  if (route.query.refresh !== '1') {
+    return;
+  }
+  await Promise.all([gridApi.query(), workflowStore.refreshTodoCount()]);
+  await router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      refresh: undefined,
+    },
+  });
+}
+
+async function onApprove(row: WorkflowInstanceResult) {
+  if (!row.current_task_id) {
+    return;
+  }
+  await approveWorkflowTaskApi(row.current_task_id, { comment: '同意' });
+  message.success('审批通过');
+  await Promise.all([gridApi.query(), workflowStore.refreshTodoCount()]);
+}
+
+async function onReject(row: WorkflowInstanceResult) {
+  if (!row.current_task_id) {
+    return;
+  }
+  await rejectWorkflowTaskApi(row.current_task_id, { comment: '拒绝' });
+  message.success('审批已拒绝');
+  await Promise.all([gridApi.query(), workflowStore.refreshTodoCount()]);
+}
+
+const gridOptions: VxeTableGridOptions<WorkflowInstanceResult> = {
+  rowConfig: {
+    keyField: 'id',
+  },
+  height: 'auto',
+  toolbarConfig: {
+    refresh: true,
+    refreshOptions: { code: 'query' },
+    custom: true,
+    zoom: true,
+  },
+  pagerConfig: {
+    pageSize: 10,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getWorkflowMyTodoListApi({
+          page: page.currentPage,
+          size: page.pageSize,
+        });
+      },
+    },
+  },
+  columns: [
+    { type: 'seq', width: 60, title: '#' },
+    { field: 'instance_no', title: '实例编号', width: 180 },
+    { field: 'title', title: '申请标题', minWidth: 240 },
+    {
+      field: 'priority',
+      title: '标识',
+      width: 140,
+      slots: { default: 'priority' },
+    },
+    { field: 'status', title: '状态', width: 120 },
+    { field: 'created_time', title: '发起时间', width: 180 },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'operation' },
+    },
+  ],
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+onMounted(refreshIfNeeded);
+onActivated(refreshIfNeeded);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="待我审批">
+      <template #priority="{ row }">
+        <a-space>
+          <a-tag color="blue">{{ priorityLabel(row) }}</a-tag>
+          <a-tag v-if="row.current_task_id" color="warning">待审批</a-tag>
+        </a-space>
+      </template>
+      <template #operation="{ row }">
+        <a-space>
+          <a-button
+            size="small"
+            @click="
+              router.push(
+                `/plugins/workflow/instance/detail/${row.id}?from=my-todo&back=${encodeURIComponent(route.fullPath)}`,
+              )
+            "
+          >
+            审批
+          </a-button>
+          <a-button size="small" type="primary" @click="onApprove(row)">
+            通过
+          </a-button>
+          <a-button size="small" danger @click="onReject(row)">拒绝</a-button>
+        </a-space>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/start-apply.vue b/apps/web-antdv-next/src/plugins/workflow/views/start-apply.vue
new file mode 100644
index 000000000..fbe75a743
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/start-apply.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WorkflowDefinitionResult } from '#/plugins/workflow/api';
+
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkflowDefinitionAvailableApi } from '#/plugins/workflow/api';
+
+const router = useRouter();
+
+function categoryName(row: WorkflowDefinitionResult) {
+  return row.category_name || '-';
+}
+
+async function goToStart(id: number) {
+  await router.push(`/plugins/workflow/instance/start/${id}`);
+}
+
+const gridOptions: VxeTableGridOptions<WorkflowDefinitionResult> = {
+  rowConfig: {
+    keyField: 'id',
+  },
+  height: 'auto',
+  toolbarConfig: {
+    refresh: true,
+    refreshOptions: { code: 'query' },
+    custom: true,
+    zoom: true,
+  },
+  pagerConfig: {
+    pageSize: 10,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getWorkflowDefinitionAvailableApi({
+          page: page.currentPage,
+          size: page.pageSize,
+        });
+      },
+    },
+  },
+  columns: [
+    { type: 'seq', width: 60, title: '#' },
+    { field: 'name', title: '流程名称', minWidth: 220 },
+    { field: 'code', title: '流程编码', width: 180 },
+    {
+      field: 'category_name',
+      title: '流程分类',
+      width: 160,
+      slots: { default: 'category' },
+    },
+    { field: 'description', title: '描述', minWidth: 260 },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'operation' },
+    },
+  ],
+};
+
+const [Grid] = useVbenVxeGrid({ gridOptions });
+
+const emptyDescription = computed(() => '暂无可发起的流程');
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="发起申请">
+      <template #category="{ row }">
+        <span>{{ categoryName(row) }}</span>
+      </template>
+      <template #operation="{ row }">
+        <a-button size="small" type="primary" @click="goToStart(row.id)">
+          发起申请
+        </a-button>
+      </template>
+      <template #empty>
+        <a-empty :description="emptyDescription" />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/start.vue b/apps/web-antdv-next/src/plugins/workflow/views/start.vue
new file mode 100644
index 000000000..fa02fdf7c
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/start.vue
@@ -0,0 +1,274 @@
+<script lang="ts" setup>
+import type {
+  WorkflowDefinitionResult,
+  WorkflowPreviewFlowItem,
+} from '#/plugins/workflow/api';
+import type { WorkflowFormField } from '#/plugins/workflow/types';
+
+import { computed, reactive, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { message } from 'antdv-next';
+
+import {
+  createWorkflowInstanceApi,
+  getWorkflowDefinitionAvailableDetailApi,
+  getWorkflowDefinitionAvailablePreviewFlowApi,
+} from '#/plugins/workflow/api';
+import WorkflowUserSelect from '#/plugins/workflow/components/WorkflowUserSelect.vue';
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const submitting = ref(false);
+const previewLoading = ref(false);
+const definition = ref<null | WorkflowDefinitionResult>(null);
+const previewItems = ref<WorkflowPreviewFlowItem[]>([]);
+const selfSelectAssignees = reactive<Record<string, number>>({});
+const formState = reactive<Record<string, any>>({
+  title: '',
+  remark: '',
+});
+const definitionId = computed(() => Number(route.params.definitionId));
+const requiredSelfSelectItems = computed(() => {
+  return previewItems.value.filter(
+    (item) => (item.self_select_options ?? []).length > 0,
+  );
+});
+
+async function loadDefinition() {
+  if (!definitionId.value) {
+    message.error('流程定义参数无效');
+    return;
+  }
+  loading.value = true;
+  try {
+    definition.value = await getWorkflowDefinitionAvailableDetailApi(
+      definitionId.value,
+    );
+    await refreshPreview();
+  } finally {
+    loading.value = false;
+  }
+}
+
+function fieldValue(field: WorkflowFormField) {
+  return formState[field.field];
+}
+
+function selfSelectOptionLabel(item: WorkflowPreviewFlowItem, value: number) {
+  const optionLabels = item.self_select_option_labels ?? {};
+  return optionLabels[value] || `用户#${value}`;
+}
+
+function selectedSelfSelectLabel(item: WorkflowPreviewFlowItem) {
+  const selectedValue = selfSelectAssignees[item.node_id];
+  if (selectedValue) {
+    return selfSelectOptionLabel(item, selectedValue);
+  }
+  return '待发起人选择';
+}
+
+function previewAssigneeText(item: WorkflowPreviewFlowItem) {
+  if (item.assignee_name) {
+    return item.assignee_name;
+  }
+  if (item.assignee_id) {
+    return `用户#${item.assignee_id}`;
+  }
+  if ((item.self_select_options ?? []).length > 0) {
+    return selectedSelfSelectLabel(item);
+  }
+  return '运行时待解析';
+}
+
+function selfSelectOptions(item: WorkflowPreviewFlowItem) {
+  return (item.self_select_options ?? []).map((value) => ({
+    label: selfSelectOptionLabel(item, value),
+    value,
+  }));
+}
+
+async function updateField(field: WorkflowFormField, value: any) {
+  formState[field.field] = value;
+  await refreshPreview();
+}
+
+async function updateSelfSelect(nodeId: string, value?: number | number[]) {
+  const normalizedValue = Array.isArray(value) ? value[0] : value;
+  if (normalizedValue === null || normalizedValue === undefined) {
+    delete selfSelectAssignees[nodeId];
+  } else {
+    selfSelectAssignees[nodeId] = Number(normalizedValue);
+  }
+  await refreshPreview();
+}
+
+async function refreshPreview() {
+  if (!definitionId.value) {
+    return;
+  }
+  previewLoading.value = true;
+  try {
+    const data = await getWorkflowDefinitionAvailablePreviewFlowApi(
+      definitionId.value,
+      Object.fromEntries(
+        (definition.value?.form_config?.fields ?? []).map((field) => [
+          field.field,
+          formState[field.field],
+        ]),
+      ),
+      selfSelectAssignees,
+    );
+    previewItems.value = data.items ?? [];
+  } finally {
+    previewLoading.value = false;
+  }
+}
+
+async function submit() {
+  if (!definition.value) {
+    return;
+  }
+  if (!formState.title) {
+    message.warning('请输入申请标题');
+    return;
+  }
+  const missingSelfSelectItem = requiredSelfSelectItems.value.find(
+    (item) => !selfSelectAssignees[item.node_id],
+  );
+  if (missingSelfSelectItem) {
+    message.warning(`请先为节点“${missingSelfSelectItem.label}”选择审批人`);
+    return;
+  }
+  submitting.value = true;
+  try {
+    await createWorkflowInstanceApi({
+      definition_id: definition.value.id,
+      title: String(formState.title),
+      remark: formState.remark ? String(formState.remark) : '',
+      form_data: Object.fromEntries(
+        (definition.value.form_config?.fields ?? []).map((field) => [
+          field.field,
+          formState[field.field],
+        ]),
+      ),
+      self_select_assignees: { ...selfSelectAssignees },
+    });
+    message.success('申请已提交');
+    await router.push('/plugins/workflow/my-apply');
+  } finally {
+    submitting.value = false;
+  }
+}
+
+watch(() => formState.title, refreshPreview);
+
+loadDefinition();
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div v-loading="loading" class="space-y-4">
+      <a-card title="发起申请" :bordered="false">
+        <a-form layout="vertical">
+          <a-form-item label="申请标题" required>
+            <a-input
+              v-model:value="formState.title"
+              placeholder="请输入申请标题"
+            />
+          </a-form-item>
+          <a-form-item label="备注">
+            <a-textarea
+              v-model:value="formState.remark"
+              :rows="3"
+              placeholder="请输入备注"
+            />
+          </a-form-item>
+        </a-form>
+      </a-card>
+
+      <a-card title="业务表单" :bordered="false">
+        <a-form layout="vertical">
+          <template
+            v-for="field in definition?.form_config?.fields ?? []"
+            :key="field.id"
+          >
+            <a-form-item :label="field.label" :required="field.required">
+              <a-input
+                v-if="field.type === 'input'"
+                :value="fieldValue(field)"
+                :placeholder="field.placeholder || '请输入'"
+                @update:value="(value) => updateField(field, value)"
+              />
+              <a-textarea
+                v-else-if="field.type === 'textarea'"
+                :value="fieldValue(field)"
+                :placeholder="field.placeholder || '请输入'"
+                :rows="3"
+                @update:value="(value) => updateField(field, value)"
+              />
+              <a-input-number
+                v-else
+                style="width: 100%"
+                :value="fieldValue(field)"
+                :placeholder="field.placeholder || '请输入'"
+                @update:value="(value) => updateField(field, value)"
+              />
+            </a-form-item>
+          </template>
+          <a-empty
+            v-if="(definition?.form_config?.fields ?? []).length === 0"
+            description="当前流程未配置表单字段"
+          />
+        </a-form>
+      </a-card>
+
+      <a-card title="审批流程预览" :bordered="false">
+        <div v-loading="previewLoading">
+          <a-empty
+            v-if="previewItems.length === 0"
+            description="暂无可预览的审批链"
+          />
+          <a-timeline v-else>
+            <a-timeline-item v-for="item in previewItems" :key="item.node_id">
+              <div class="flex items-center gap-2">
+                <strong>{{ item.label }}</strong>
+                <a-tag>{{ item.node_type }}</a-tag>
+              </div>
+              <div class="mt-1 text-[var(--ant-color-text-secondary)]">
+                审批人：{{ previewAssigneeText(item) }}
+              </div>
+              <div
+                v-if="(item.self_select_options ?? []).length > 0"
+                class="mt-3 max-w-sm"
+              >
+                <WorkflowUserSelect
+                  :model-value="selfSelectAssignees[item.node_id]"
+                  :options="selfSelectOptions(item)"
+                  placeholder="请选择审批人"
+                  @update:model-value="
+                    (value) => updateSelfSelect(item.node_id, value)
+                  "
+                />
+              </div>
+            </a-timeline-item>
+          </a-timeline>
+        </div>
+      </a-card>
+
+      <div class="flex justify-end">
+        <a-space>
+          <a-button @click="router.push('/plugins/workflow/start')">
+            取消
+          </a-button>
+          <a-button type="primary" :loading="submitting" @click="submit">
+            提交申请
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/plugins/workflow/views/statistics.vue b/apps/web-antdv-next/src/plugins/workflow/views/statistics.vue
new file mode 100644
index 000000000..a5097c9bd
--- /dev/null
+++ b/apps/web-antdv-next/src/plugins/workflow/views/statistics.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import {
+  getWorkflowMyApplyListApi,
+  getWorkflowMyTodoListApi,
+  getWorkflowTodoCountApi,
+} from '#/plugins/workflow/api';
+
+const loading = ref(false);
+const todoCount = ref(0);
+const applyTotal = ref(0);
+const todoTotal = ref(0);
+const recentApplyItems = ref<
+  Array<{ created_time: string; id: number; status: string; title: string }>
+>([]);
+const recentTodoItems = ref<
+  Array<{ created_time: string; id: number; status: string; title: string }>
+>([]);
+
+const completionRate = computed(() => {
+  if (applyTotal.value <= 0) {
+    return 0;
+  }
+  return Math.round(
+    ((applyTotal.value - todoTotal.value) / applyTotal.value) * 100,
+  );
+});
+
+async function loadStatistics() {
+  loading.value = true;
+  try {
+    const [count, applyPage, todoPage] = await Promise.all([
+      getWorkflowTodoCountApi(),
+      getWorkflowMyApplyListApi({ page: 1, size: 5 }),
+      getWorkflowMyTodoListApi({ page: 1, size: 5 }),
+    ]);
+    todoCount.value = count;
+    applyTotal.value = applyPage.total;
+    todoTotal.value = todoPage.total;
+    recentApplyItems.value = applyPage.items.map((item) => ({
+      id: item.id,
+      title: item.title,
+      status: item.status,
+      created_time: item.created_time,
+    }));
+    recentTodoItems.value = todoPage.items.map((item) => ({
+      id: item.id,
+      title: item.title,
+      status: item.status,
+      created_time: item.created_time,
+    }));
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadStatistics);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div v-loading="loading" class="space-y-4">
+      <div class="grid gap-4 md:grid-cols-4">
+        <a-card title="当前待办">
+          <a-statistic :value="todoCount" />
+        </a-card>
+        <a-card title="我的申请总数">
+          <a-statistic :value="applyTotal" />
+        </a-card>
+        <a-card title="待处理任务数">
+          <a-statistic :value="todoTotal" />
+        </a-card>
+        <a-card title="办结率">
+          <a-statistic suffix="%" :value="completionRate" />
+        </a-card>
+      </div>
+
+      <div class="grid gap-4 xl:grid-cols-2">
+        <a-card title="最近申请">
+          <a-empty
+            v-if="recentApplyItems.length === 0"
+            description="暂无申请数据"
+          />
+          <a-list v-else :data-source="recentApplyItems" size="small">
+            <template #renderItem="{ item }">
+              <a-list-item>
+                <div class="w-full">
+                  <div class="flex items-center justify-between gap-3">
+                    <strong>{{ item.title }}</strong>
+                    <a-tag>{{ item.status }}</a-tag>
+                  </div>
+                  <div
+                    class="mt-1 text-xs text-[var(--ant-color-text-secondary)]"
+                  >
+                    {{ item.created_time }}
+                  </div>
+                </div>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-card>
+
+        <a-card title="最近待办">
+          <a-empty
+            v-if="recentTodoItems.length === 0"
+            description="暂无待办数据"
+          />
+          <a-list v-else :data-source="recentTodoItems" size="small">
+            <template #renderItem="{ item }">
+              <a-list-item>
+                <div class="w-full">
+                  <div class="flex items-center justify-between gap-3">
+                    <strong>{{ item.title }}</strong>
+                    <a-tag color="processing">{{ item.status }}</a-tag>
+                  </div>
+                  <div
+                    class="mt-1 text-xs text-[var(--ant-color-text-secondary)]"
+                  >
+                    {{ item.created_time }}
+                  </div>
+                </div>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-card>
+      </div>
+
+      <a-card title="统计说明" :bordered="false">
+        <a-alert
+          type="info"
+          show-icon
+          message="当前统计页已接入真实待办/申请数据汇总，趋势图与排名图等待专用统计接口补齐。"
+        />
+      </a-card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/router/guard.ts b/apps/web-antdv-next/src/router/guard.ts
index cb3ec0a22..ac0141b1b 100644
--- a/apps/web-antdv-next/src/router/guard.ts
+++ b/apps/web-antdv-next/src/router/guard.ts
@@ -118,6 +118,12 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
+    for (const route of accessibleRoutes) {
+      const routeName = route.name as string | undefined;
+      if (routeName && !router.hasRoute(routeName)) {
+        router.addRoute(route);
+      }
+    }
     accessStore.setIsAccessChecked(true);
     const redirectPath = (from.query.redirect ??
       (to.path === preferences.app.defaultHomePath
diff --git a/apps/web-antdv-next/src/router/routes/index.ts b/apps/web-antdv-next/src/router/routes/index.ts
index 931ccd872..ec5c2ea09 100644
--- a/apps/web-antdv-next/src/router/routes/index.ts
+++ b/apps/web-antdv-next/src/router/routes/index.ts
@@ -22,6 +22,13 @@ const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 /** 插件路由 */
 const pluginRoutes: RouteRecordRaw[] = mergeRouteModules(pluginRouteFiles);
 
+const hiddenPluginRoutes = pluginRoutes.filter(
+  (route) => route.meta?.hideInMenu,
+);
+const visiblePluginRoutes = pluginRoutes.filter(
+  (route) => !route.meta?.hideInMenu,
+);
+
 /** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统(不会显示在菜单中) */
 // const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
 // const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
@@ -33,6 +40,7 @@ const externalRoutes: RouteRecordRaw[] = [];
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
   ...externalRoutes,
+  ...hiddenPluginRoutes,
   fallbackNotFoundRoute,
 ];
 
@@ -40,7 +48,11 @@ const routes: RouteRecordRaw[] = [
 const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
 
 /** 有权限校验的路由列表，包含动态路由和静态路由 */
-const accessRoutes = [...dynamicRoutes, ...pluginRoutes, ...staticRoutes];
+const accessRoutes = [
+  ...dynamicRoutes,
+  ...visiblePluginRoutes,
+  ...staticRoutes,
+];
 
 const componentKeys: string[] = Object.keys({
   ...import.meta.glob('../../views/**/*.vue'),
diff --git a/apps/web-antdv-next/src/store/auth.ts b/apps/web-antdv-next/src/store/auth.ts
index 1a1826899..41edbaa34 100644
--- a/apps/web-antdv-next/src/store/auth.ts
+++ b/apps/web-antdv-next/src/store/auth.ts
@@ -20,7 +20,7 @@ import {
   logoutApi,
 } from '#/api';
 import { $t } from '#/locales';
-import { useDictStore, useWebSocketStore } from '#/store';
+import { useDictStore, useWebSocketStore, useWorkflowStore } from '#/store';
 
 export const useAuthStore = defineStore('auth', () => {
   const accessStore = useAccessStore();
@@ -85,6 +85,8 @@ export const useAuthStore = defineStore('auth', () => {
         // 初始化WebSocket连接
         const wsStore = useWebSocketStore();
         wsStore.connect();
+        const workflowStore = useWorkflowStore();
+        await workflowStore.init();
 
         if (userInfo?.nickname) {
           notification.success({
@@ -119,11 +121,13 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
+    const workflowStore = useWorkflowStore();
     try {
       await logoutApi();
     } catch {
       // 不做任何处理
     }
+    workflowStore.reset();
     resetAllStores();
     accessStore.setLoginExpired(false);
 
diff --git a/apps/web-antdv-next/src/store/index.ts b/apps/web-antdv-next/src/store/index.ts
index 369ff3592..d37dbe0d6 100644
--- a/apps/web-antdv-next/src/store/index.ts
+++ b/apps/web-antdv-next/src/store/index.ts
@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './dict';
 export * from './websocket';
+export * from './workflow';
diff --git a/apps/web-antdv-next/src/store/workflow.ts b/apps/web-antdv-next/src/store/workflow.ts
new file mode 100644
index 000000000..f5f399f00
--- /dev/null
+++ b/apps/web-antdv-next/src/store/workflow.ts
@@ -0,0 +1,112 @@
+import { ref } from 'vue';
+
+import { useAccessStore } from '@vben/stores';
+
+import { notification } from 'antdv-next';
+import { defineStore } from 'pinia';
+
+import {
+  getWorkflowTodoCountApi,
+  getWorkflowUnreadCountApi,
+} from '#/plugins/workflow/api';
+import { useWebSocketStore } from '#/store';
+
+export const useWorkflowStore = defineStore('workflow', () => {
+  const unreadCount = ref(0);
+  const todoCount = ref(0);
+  const initialized = ref(false);
+  let cleanup: (() => void) | null = null;
+
+  function syncMenuBadge() {
+    const accessStore = useAccessStore();
+    accessStore.setMenuBadgeByPath(
+      '/plugins/workflow/message',
+      unreadCount.value > 0 ? String(unreadCount.value) : undefined,
+      'normal',
+      'destructive',
+    );
+    accessStore.setMenuBadgeByPath(
+      '/plugins/workflow/my-todo',
+      todoCount.value > 0 ? String(todoCount.value) : undefined,
+      'normal',
+      'primary',
+    );
+  }
+
+  async function refreshUnreadCount() {
+    unreadCount.value = await getWorkflowUnreadCountApi();
+    syncMenuBadge();
+    return unreadCount.value;
+  }
+
+  async function refreshTodoCount() {
+    todoCount.value = await getWorkflowTodoCountApi();
+    syncMenuBadge();
+    return todoCount.value;
+  }
+
+  async function refreshCounts() {
+    await Promise.all([refreshUnreadCount(), refreshTodoCount()]);
+  }
+
+  function handleSocketPayload(payload: any) {
+    if (typeof payload?.unread_count === 'number') {
+      unreadCount.value = payload.unread_count;
+    }
+    if (typeof payload?.todo_count === 'number') {
+      todoCount.value = payload.todo_count;
+    }
+    syncMenuBadge();
+  }
+
+  function bindSocket() {
+    const wsStore = useWebSocketStore();
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+    cleanup = wsStore.on('workflow_message', (payload: any) => {
+      handleSocketPayload(payload);
+      if (payload?.type === 'READ') {
+        return;
+      }
+      if (payload?.title) {
+        notification.info({
+          title: payload.title,
+          description: payload.content || '',
+          duration: 3,
+        });
+      }
+    });
+  }
+
+  async function init() {
+    if (!initialized.value) {
+      bindSocket();
+      initialized.value = true;
+    }
+    await refreshCounts();
+  }
+
+  function reset() {
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+    unreadCount.value = 0;
+    todoCount.value = 0;
+    syncMenuBadge();
+    initialized.value = false;
+  }
+
+  return {
+    unreadCount,
+    todoCount,
+    initialized,
+    init,
+    refreshCounts,
+    refreshTodoCount,
+    refreshUnreadCount,
+    reset,
+  };
+});
diff --git a/packages/stores/src/modules/access.ts b/packages/stores/src/modules/access.ts
index f97a8b29f..ad70aa396 100644
--- a/packages/stores/src/modules/access.ts
+++ b/packages/stores/src/modules/access.ts
@@ -90,6 +90,34 @@ export const useAccessStore = defineStore('core-access', {
     setAccessMenus(menus: MenuRecordRaw[]) {
       this.accessMenus = menus;
     },
+    setMenuBadgeByPath(
+      path: string,
+      badge?: string,
+      badgeType: 'dot' | 'normal' = 'normal',
+      badgeVariants = 'destructive',
+    ) {
+      function updateMenus(menus: MenuRecordRaw[]): MenuRecordRaw[] {
+        return menus.map((menu) => {
+          const nextChildren = menu.children
+            ? updateMenus(menu.children)
+            : undefined;
+          if (menu.path === path) {
+            return {
+              ...menu,
+              badge,
+              badgeType: badge ? badgeType : undefined,
+              badgeVariants: badge ? badgeVariants : undefined,
+              children: nextChildren,
+            };
+          }
+          return {
+            ...menu,
+            children: nextChildren,
+          };
+        });
+      }
+      this.accessMenus = updateMenus(this.accessMenus);
+    },
     setAccessRoutes(routes: RouteRecordRaw[]) {
       this.accessRoutes = routes;
     },