From 3a064eb09fc7df25e6e8fa1f45e1438acf3953f5 Mon Sep 17 00:00:00 2001
From: caozehui <2427765068@qq.com>
Date: Fri, 15 May 2026 09:31:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(infra):=20=E6=96=B0=E5=A2=9E=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=9C=BA=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=20-=20=E6=96=B0=E5=A2=9E=E7=8A=B6=E6=80=81=E6=9C=BA?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E5=92=8C=E7=8A=B6=E6=80=81=E6=B5=81=E8=BD=AC?=
 =?UTF-8?q?=E7=9A=84=E5=AE=8C=E6=95=B4=20CRUD=20=E5=8A=9F=E8=83=BD=20-=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AD=97=E5=85=B8=E7=BC=96=E7=A0=81=20OBJECT?=
 =?UTF-8?q?=5FSTATUS=5FMODEL=5FOBJECT=5FTYPE=5FDICT=5FCODE=20=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=E5=AF=B9=E8=B1=A1=E7=B1=BB=E5=9E=8B=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=20-=20=E5=AE=9E=E7=8E=B0=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=9C=BA=E5=88=97=E8=A1=A8=E9=A1=B5=E3=80=81=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E3=80=81=E6=93=8D=E4=BD=9C=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E6=A1=86=E5=92=8C=E7=8A=B6=E6=80=81=E6=B5=81=E8=BD=AC=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20-=20=E6=96=B0=E5=A2=9E=20infra=20API=20=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=B0=81=E8=A3=85=E5=92=8C=E7=B1=BB=E5=9E=8B=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=20-=20=E9=81=B5=E5=BE=AA=E9=A1=B9=E7=9B=AE=E8=A7=84?=
 =?UTF-8?q?=E8=8C=83=EF=BC=9A=E4=BD=BF=E7=94=A8=20TableSearchFields=20?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6=E3=80=81BusinessTableActio?=
 =?UTF-8?q?nCell=20=E6=93=8D=E4=BD=9C=E5=88=97=E3=80=81=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=E6=A0=87=E7=AD=BE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

涉及文件：
- src/constants/dict.ts: 新增对象类型字典编码
- src/service/api/infra.ts: 新增状态机和状态流转相关 API
- src/typings/api/infra.d.ts: 新增状态机相关类型定义
- src/views/infra/state-machine/: 新增状态机管理页面及子组件
---
 src/constants/dict.ts                         |   8 +
 src/service/api/index.ts                      |   1 +
 src/service/api/infra.ts                      | 208 +++++++++
 src/typings/api/infra.d.ts                    | 101 +++++
 src/views/infra/state-machine/index.vue       | 388 ++++++++++++++++-
 .../modules/state-machine-operate-dialog.vue  | 269 ++++++++++++
 .../modules/state-machine-search.vue          | 142 ++++++
 .../modules/state-transition-dialog.vue       | 406 ++++++++++++++++++
 .../state-transition-operate-dialog.vue       | 234 ++++++++++
 .../modules/state-transition-search.vue       |  97 +++++
 src/views/infra/state-machine/shared.ts       |  38 ++
 11 files changed, 1891 insertions(+), 1 deletion(-)
 create mode 100644 src/service/api/infra.ts
 create mode 100644 src/typings/api/infra.d.ts
 create mode 100644 src/views/infra/state-machine/modules/state-machine-operate-dialog.vue
 create mode 100644 src/views/infra/state-machine/modules/state-machine-search.vue
 create mode 100644 src/views/infra/state-machine/modules/state-transition-dialog.vue
 create mode 100644 src/views/infra/state-machine/modules/state-transition-operate-dialog.vue
 create mode 100644 src/views/infra/state-machine/modules/state-transition-search.vue
 create mode 100644 src/views/infra/state-machine/shared.ts

diff --git a/src/constants/dict.ts b/src/constants/dict.ts
index f61f04e..63d753d 100644
--- a/src/constants/dict.ts
+++ b/src/constants/dict.ts
@@ -76,6 +76,14 @@ export const RDMS_PROJECT_TYPE_DICT_CODE = 'rdms_project_type';
  */
 export const RDMS_PROJECT_EXECUTION_TYPE_DICT_CODE = 'rdms_project_execution_type';
 
+/**
+ * 状态机对象类型字典编码
+ *
+ * 对应业务字段：状态机管理中的 objectType / 对象类型
+ * 来源口径：用户明确指定对象类型下拉来自运行时字典 object_status_model_object_type
+ */
+export const OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE = 'object_status_model_object_type';
+
 /**
  * 需求允许删除的状态字典编码
  *
diff --git a/src/service/api/index.ts b/src/service/api/index.ts
index b73862c..308d494 100644
--- a/src/service/api/index.ts
+++ b/src/service/api/index.ts
@@ -1,6 +1,7 @@
 export * from './auth';
 export * from './dict';
 export * from './file';
+export * from './infra';
 export * from './object-context';
 export * from './product';
 export * from './project';
diff --git a/src/service/api/infra.ts b/src/service/api/infra.ts
new file mode 100644
index 0000000..7c13e90
--- /dev/null
+++ b/src/service/api/infra.ts
@@ -0,0 +1,208 @@
+import { WEB_SERVICE_PREFIX } from '@/constants/service';
+import { request } from '../request';
+import { type ServiceRequestResult, mapServiceResult, normalizeStringId, safeJsonRequestConfig } from './shared';
+
+const OBJECT_STATUS_MODEL_PREFIX = `${WEB_SERVICE_PREFIX}/project/status/model`;
+const OBJECT_STATUS_TRANSITION_PREFIX = `${WEB_SERVICE_PREFIX}/project/status/transition`;
+
+type ObjectStatusModelResponse = Omit<
+  Api.Infra.ObjectStatusModel,
+  | 'id'
+  | 'initialFlag'
+  | 'terminalFlag'
+  | 'allowEdit'
+  | 'progressExcludedFlag'
+  | 'allowCreateProject'
+  | 'allowCreateRequirement'
+> & {
+  id: string | number;
+  initialFlag: boolean | number | string | null | undefined;
+  terminalFlag: boolean | number | string | null | undefined;
+  allowEdit: boolean | number | string | null | undefined;
+  progressExcludedFlag: boolean | number | string | null | undefined;
+  allowCreateProject: boolean | number | string | null | undefined;
+  allowCreateRequirement: boolean | number | string | null | undefined;
+};
+
+type ObjectStatusTransitionResponse = Omit<Api.Infra.ObjectStatusTransition, 'id' | 'needReason'> & {
+  id: string | number;
+  needReason: boolean | number | string | null | undefined;
+};
+
+type ObjectStatusModelPageResponse = Api.Infra.PageResult<ObjectStatusModelResponse>;
+
+type ObjectStatusTransitionPageResponse = Api.Infra.PageResult<ObjectStatusTransitionResponse>;
+
+function createBatchDeleteQuery(ids: string[]) {
+  const query = new URLSearchParams();
+
+  ids.forEach(id => {
+    query.append('ids', id);
+  });
+
+  return query.toString();
+}
+
+function normalizeBooleanFlag(value: boolean | number | string | null | undefined) {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'number') {
+    return value === 1;
+  }
+
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase();
+
+    if (!normalized || normalized === '0' || normalized === 'false' || normalized === 'n') {
+      return false;
+    }
+
+    return true;
+  }
+
+  return false;
+}
+
+function normalizeObjectStatusModel(model: ObjectStatusModelResponse): Api.Infra.ObjectStatusModel {
+  return {
+    ...model,
+    id: normalizeStringId(model.id),
+    initialFlag: normalizeBooleanFlag(model.initialFlag),
+    terminalFlag: normalizeBooleanFlag(model.terminalFlag),
+    allowEdit: normalizeBooleanFlag(model.allowEdit),
+    progressExcludedFlag: normalizeBooleanFlag(model.progressExcludedFlag),
+    allowCreateProject: normalizeBooleanFlag(model.allowCreateProject),
+    allowCreateRequirement: normalizeBooleanFlag(model.allowCreateRequirement)
+  };
+}
+
+function normalizeObjectStatusTransition(transition: ObjectStatusTransitionResponse): Api.Infra.ObjectStatusTransition {
+  return {
+    ...transition,
+    id: normalizeStringId(transition.id),
+    needReason: normalizeBooleanFlag(transition.needReason)
+  };
+}
+
+export async function fetchGetObjectStatusModelPage(params?: Api.Infra.ObjectStatusModelSearchParams) {
+  const result = await request<ObjectStatusModelPageResponse>({
+    ...safeJsonRequestConfig,
+    url: `${OBJECT_STATUS_MODEL_PREFIX}/page`,
+    method: 'get',
+    params
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ObjectStatusModelPageResponse>, data => ({
+    ...data,
+    list: data.list.map(normalizeObjectStatusModel)
+  }));
+}
+
+export async function fetchGetObjectStatusModel(id: string) {
+  const result = await request<ObjectStatusModelResponse>({
+    ...safeJsonRequestConfig,
+    url: `${OBJECT_STATUS_MODEL_PREFIX}/get`,
+    method: 'get',
+    params: { id }
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ObjectStatusModelResponse>, normalizeObjectStatusModel);
+}
+
+export async function fetchCreateObjectStatusModel(data: Api.Infra.SaveObjectStatusModelParams) {
+  const result = await request<string | number>({
+    ...safeJsonRequestConfig,
+    url: `${OBJECT_STATUS_MODEL_PREFIX}/create`,
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
+}
+
+export function fetchUpdateObjectStatusModel(data: { id: string } & Api.Infra.SaveObjectStatusModelParams) {
+  return request<boolean>({
+    url: `${OBJECT_STATUS_MODEL_PREFIX}/update`,
+    method: 'put',
+    data
+  });
+}
+
+export function fetchDeleteObjectStatusModel(id: string) {
+  return request<boolean>({
+    url: `${OBJECT_STATUS_MODEL_PREFIX}/delete`,
+    method: 'delete',
+    params: { id }
+  });
+}
+
+export function fetchBatchDeleteObjectStatusModel(ids: string[]) {
+  return request<boolean>({
+    url: `${OBJECT_STATUS_MODEL_PREFIX}/delete-list?${createBatchDeleteQuery(ids)}`,
+    method: 'delete'
+  });
+}
+
+export async function fetchGetObjectStatusTransitionPage(params?: Api.Infra.ObjectStatusTransitionSearchParams) {
+  const result = await request<ObjectStatusTransitionPageResponse>({
+    ...safeJsonRequestConfig,
+    url: `${OBJECT_STATUS_TRANSITION_PREFIX}/page`,
+    method: 'get',
+    params
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ObjectStatusTransitionPageResponse>, data => ({
+    ...data,
+    list: data.list.map(normalizeObjectStatusTransition)
+  }));
+}
+
+export async function fetchGetObjectStatusTransition(id: string) {
+  const result = await request<ObjectStatusTransitionResponse>({
+    ...safeJsonRequestConfig,
+    url: `${OBJECT_STATUS_TRANSITION_PREFIX}/get`,
+    method: 'get',
+    params: { id }
+  });
+
+  return mapServiceResult(
+    result as ServiceRequestResult<ObjectStatusTransitionResponse>,
+    normalizeObjectStatusTransition
+  );
+}
+
+export async function fetchCreateObjectStatusTransition(data: Api.Infra.SaveObjectStatusTransitionParams) {
+  const result = await request<string | number>({
+    ...safeJsonRequestConfig,
+    url: `${OBJECT_STATUS_TRANSITION_PREFIX}/create`,
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
+}
+
+export function fetchUpdateObjectStatusTransition(data: { id: string } & Api.Infra.SaveObjectStatusTransitionParams) {
+  return request<boolean>({
+    url: `${OBJECT_STATUS_TRANSITION_PREFIX}/update`,
+    method: 'put',
+    data
+  });
+}
+
+export function fetchDeleteObjectStatusTransition(id: string) {
+  return request<boolean>({
+    url: `${OBJECT_STATUS_TRANSITION_PREFIX}/delete`,
+    method: 'delete',
+    params: { id }
+  });
+}
+
+export function fetchBatchDeleteObjectStatusTransition(ids: string[]) {
+  return request<boolean>({
+    url: `${OBJECT_STATUS_TRANSITION_PREFIX}/delete-list?${createBatchDeleteQuery(ids)}`,
+    method: 'delete'
+  });
+}
diff --git a/src/typings/api/infra.d.ts b/src/typings/api/infra.d.ts
new file mode 100644
index 0000000..d71fffb
--- /dev/null
+++ b/src/typings/api/infra.d.ts
@@ -0,0 +1,101 @@
+declare namespace Api {
+  /**
+   * namespace Infra
+   *
+   * backend api module: "project/status/*"
+   */
+  namespace Infra {
+    type CommonStatus = 0 | 1;
+
+    interface PageParams {
+      pageNo: number;
+      pageSize: number;
+    }
+
+    interface PageResult<T = any> {
+      total: number;
+      list: T[];
+    }
+
+    interface ObjectStatusModel {
+      id: string;
+      objectType: string;
+      statusCode: string;
+      statusName: string;
+      sort: number;
+      status: CommonStatus;
+      initialFlag: boolean;
+      terminalFlag: boolean;
+      allowEdit: boolean;
+      progressExcludedFlag: boolean;
+      allowCreateProject: boolean;
+      allowCreateRequirement: boolean;
+      remark?: string | null;
+      creator?: string | null;
+      createTime: string;
+      updater?: string | null;
+      updateTime: string;
+    }
+
+    type ObjectStatusModelSearchParams = CommonType.RecordNullable<
+      Pick<PageParams, 'pageNo' | 'pageSize'> &
+        Pick<ObjectStatusModel, 'objectType' | 'status' | 'initialFlag' | 'terminalFlag'> & {
+          keyword?: string;
+        }
+    >;
+
+    type SaveObjectStatusModelParams = Pick<
+      ObjectStatusModel,
+      | 'objectType'
+      | 'statusCode'
+      | 'statusName'
+      | 'sort'
+      | 'status'
+      | 'initialFlag'
+      | 'terminalFlag'
+      | 'allowEdit'
+      | 'progressExcludedFlag'
+      | 'allowCreateProject'
+      | 'allowCreateRequirement'
+    > & {
+      remark?: string | null;
+    };
+
+    type ObjectStatusModelList = PageResult<ObjectStatusModel>;
+
+    interface ObjectStatusTransition {
+      id: string;
+      objectType: string;
+      actionCode: string;
+      actionName: string;
+      fromStatusCode: string;
+      fromStatusName?: string | null;
+      toStatusCode: string;
+      toStatusName?: string | null;
+      needReason: boolean;
+      status: CommonStatus;
+      remark?: string | null;
+      creator?: string | null;
+      createTime: string;
+      updater?: string | null;
+      updateTime: string;
+    }
+
+    type ObjectStatusTransitionSearchParams = CommonType.RecordNullable<
+      Pick<PageParams, 'pageNo' | 'pageSize'> &
+        Pick<
+          ObjectStatusTransition,
+          'objectType' | 'fromStatusCode' | 'toStatusCode' | 'status' | 'actionCode' | 'actionName'
+        >
+    >;
+
+    type SaveObjectStatusTransitionParams = Pick<
+      ObjectStatusTransition,
+      'objectType' | 'actionCode' | 'actionName' | 'fromStatusCode' | 'toStatusCode' | 'needReason' | 'status'
+    > & {
+      remark?: string | null;
+    };
+
+    type ObjectStatusTransitionList = PageResult<ObjectStatusTransition>;
+  }
+}
diff --git a/src/views/infra/state-machine/index.vue b/src/views/infra/state-machine/index.vue
index 1450eab..0c6dbd6 100644
--- a/src/views/infra/state-machine/index.vue
+++ b/src/views/infra/state-machine/index.vue
@@ -1,3 +1,389 @@
+<script setup lang="tsx">
+import { computed, nextTick, onActivated, reactive, ref } from 'vue';
+import type { TableInstance } from 'element-plus';
+import { ElTag } from 'element-plus';
+import { useBoolean } from '@sa/hooks';
+import { OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import {
+  fetchBatchDeleteObjectStatusModel,
+  fetchDeleteObjectStatusModel,
+  fetchGetObjectStatusModelPage
+} from '@/service/api';
+import { useAuth } from '@/hooks/business/auth';
+import { useDict } from '@/hooks/business/dict';
+import { useUIPaginatedTable } from '@/hooks/common/table';
+import BusinessTableActionCell, { type BusinessTableAction } from '@/components/custom/business-table-action-cell';
+import StateMachineOperateDialog from './modules/state-machine-operate-dialog.vue';
+import StateMachineSearch from './modules/state-machine-search.vue';
+import StateTransitionDialog from './modules/state-transition-dialog.vue';
+import { formatDateTime, getBooleanLabel, getBooleanTagType, getStatusLabel, getStatusTagType } from './shared';
+
+defineOptions({ name: 'StateMachineManage' });
+
+function getInitSearchParams(): Api.Infra.ObjectStatusModelSearchParams {
+  return {
+    pageNo: 1,
+    pageSize: 10,
+    keyword: undefined,
+    objectType: undefined,
+    status: undefined,
+    initialFlag: undefined,
+    terminalFlag: undefined
+  };
+}
+
+function transformPageResult(
+  response: Awaited<ReturnType<typeof fetchGetObjectStatusModelPage>>,
+  pageNo: number,
+  pageSize: number
+) {
+  if (!response.error) {
+    return {
+      data: response.data.list,
+      pageNum: pageNo,
+      pageSize,
+      total: response.data.total
+    };
+  }
+
+  return {
+    data: [],
+    pageNum: pageNo,
+    pageSize,
+    total: 0
+  };
+}
+
+const searchParams = reactive(getInitSearchParams());
+const stateTableRef = ref<TableInstance>();
+const checkedRowKeys = ref<string[]>([]);
+const { getLabel: getObjectTypeLabel } = useDict(OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE);
+const { hasAuth } = useAuth();
+
+const canDeleteStateMachine = computed(() => hasAuth('infra:state-machine:delete'));
+const canUpdateStateMachine = computed(() => hasAuth('infra:state-machine:update'));
+const canManageStateTransition = computed(() => hasAuth('infra:state-transition:manage'));
+
+function getStatusModelActions(row: Api.Infra.ObjectStatusModel): BusinessTableAction[] {
+  const actions: BusinessTableAction[] = [];
+
+  if (canManageStateTransition.value) {
+    actions.push({
+      key: 'transition',
+      label: '状态流转',
+      buttonType: 'primary',
+      onClick: () => openTransitionDialog(row)
+    });
+  }
+
+  if (canUpdateStateMachine.value) {
+    actions.push({
+      key: 'edit',
+      label: '编辑',
+      buttonType: 'primary',
+      onClick: () => openEdit(row)
+    });
+  }
+
+  if (canDeleteStateMachine.value) {
+    actions.push({
+      key: 'delete',
+      label: '删除',
+      buttonType: 'danger',
+      onClick: () => handleDeleteAction(row)
+    });
+  }
+
+  return actions;
+}
+
+const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagination } = useUIPaginatedTable({
+  paginationProps: {
+    currentPage: searchParams.pageNo,
+    pageSize: searchParams.pageSize
+  },
+  api: () => fetchGetObjectStatusModelPage(searchParams),
+  transform: response => transformPageResult(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
+  onPaginationParamsChange: params => {
+    searchParams.pageNo = params.currentPage ?? 1;
+    searchParams.pageSize = params.pageSize ?? 10;
+  },
+  columns: () => [
+    { prop: 'selection', type: 'selection', width: 48 },
+    { prop: 'index', type: 'index', label: '序号', width: 64 },
+    {
+      prop: 'objectType',
+      label: '对象类型',
+      minWidth: 130,
+      formatter: row => getObjectTypeLabel(row.objectType)
+    },
+    { prop: 'statusName', label: '状态名称', minWidth: 140, showOverflowTooltip: true },
+    { prop: 'statusCode', label: '状态编码', minWidth: 160, showOverflowTooltip: true },
+    {
+      prop: 'status',
+      label: '配置状态',
+      width: 110,
+      align: 'center',
+      formatter: row => <ElTag type={getStatusTagType(row.status)}>{getStatusLabel(row.status)}</ElTag>
+    },
+    {
+      prop: 'initialFlag',
+      label: '初始状态',
+      width: 110,
+      align: 'center',
+      formatter: row => <ElTag type={getBooleanTagType(row.initialFlag)}>{getBooleanLabel(row.initialFlag)}</ElTag>
+    },
+    {
+      prop: 'terminalFlag',
+      label: '终态',
+      width: 90,
+      align: 'center',
+      formatter: row => <ElTag type={getBooleanTagType(row.terminalFlag)}>{getBooleanLabel(row.terminalFlag)}</ElTag>
+    },
+    {
+      prop: 'allowEdit',
+      label: '允许编辑主数据',
+      width: 140,
+      align: 'center',
+      formatter: row => <ElTag type={getBooleanTagType(row.allowEdit)}>{getBooleanLabel(row.allowEdit)}</ElTag>
+    },
+    {
+      prop: 'progressExcludedFlag',
+      label: '不参与上层进度统计',
+      width: 160,
+      align: 'center',
+      formatter: row => (
+        <ElTag type={getBooleanTagType(row.progressExcludedFlag)}>{getBooleanLabel(row.progressExcludedFlag)}</ElTag>
+      )
+    },
+    {
+      prop: 'allowCreateProject',
+      label: '允许新建项目',
+      width: 130,
+      align: 'center',
+      formatter: row => (
+        <ElTag type={getBooleanTagType(row.allowCreateProject)}>{getBooleanLabel(row.allowCreateProject)}</ElTag>
+      )
+    },
+    {
+      prop: 'allowCreateRequirement',
+      label: '允许新增需求',
+      width: 130,
+      align: 'center',
+      formatter: row => (
+        <ElTag type={getBooleanTagType(row.allowCreateRequirement)}>
+          {getBooleanLabel(row.allowCreateRequirement)}
+        </ElTag>
+      )
+    },
+    { prop: 'sort', label: '排序', width: 90, align: 'center' },
+    {
+      prop: 'remark',
+      label: '备注',
+      minWidth: 180,
+      showOverflowTooltip: true,
+      formatter: row => row.remark || '--'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      minWidth: 170,
+      formatter: row => formatDateTime(row.createTime)
+    },
+    {
+      prop: 'operate',
+      label: '操作',
+      width: 220,
+      align: 'center',
+      fixed: 'right',
+      formatter: row => {
+        const actions = getStatusModelActions(row);
+
+        if (!actions.length) {
+          return <span>--</span>;
+        }
+
+        return <BusinessTableActionCell actions={actions} />;
+      }
+    }
+  ]
+});
+
+const { bool: operateVisible, setTrue: openOperateModal, setFalse: closeOperateModal } = useBoolean();
+const operateType = ref<UI.TableOperateType>('add');
+const editingData = ref<Api.Infra.ObjectStatusModel | null>(null);
+
+const { bool: transitionVisible, setTrue: openTransitionModal, setFalse: closeTransitionModal } = useBoolean();
+const transitionRow = ref<Api.Infra.ObjectStatusModel | null>(null);
+
+function openAdd() {
+  operateType.value = 'add';
+  editingData.value = null;
+  openOperateModal();
+}
+
+function openEdit(item: Api.Infra.ObjectStatusModel) {
+  operateType.value = 'edit';
+  editingData.value = item;
+  openOperateModal();
+}
+
+function openTransitionDialog(item: Api.Infra.ObjectStatusModel) {
+  transitionRow.value = item;
+  openTransitionModal();
+}
+
+async function handleDelete(item: Api.Infra.ObjectStatusModel) {
+  const { error } = await fetchDeleteObjectStatusModel(item.id);
+
+  if (error) {
+    return;
+  }
+
+  window.$message?.success('删除成功');
+  await reloadStatusTable();
+}
+
+async function handleDeleteAction(row: Api.Infra.ObjectStatusModel) {
+  try {
+    await window.$messageBox?.confirm('确认删除当前状态模型吗？', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+  } catch {
+    return;
+  }
+
+  await handleDelete(row);
+}
+
+async function handleBatchDelete() {
+  if (!checkedRowKeys.value.length) {
+    return;
+  }
+
+  const { error } = await fetchBatchDeleteObjectStatusModel(checkedRowKeys.value);
+
+  if (error) {
+    return;
+  }
+
+  window.$message?.success('删除成功');
+  await reloadStatusTable();
+}
+
+function handleSelectionChange(rows: Api.Infra.ObjectStatusModel[]) {
+  checkedRowKeys.value = rows.map(item => item.id);
+}
+
+async function reloadStatusTable(page = searchParams.pageNo) {
+  checkedRowKeys.value = [];
+  await getDataByPage(page);
+  await nextTick();
+  stateTableRef.value?.clearSelection();
+}
+
+function resetSearchParams() {
+  Object.assign(searchParams, getInitSearchParams());
+  reloadStatusTable(1);
+}
+
+function handleSearch() {
+  reloadStatusTable(1);
+}
+
+function handleSubmitted() {
+  closeOperateModal();
+  reloadStatusTable();
+}
+
+onActivated(() => {
+  resetSearchParams();
+});
+</script>
+
 <template>
-  <LookForward title="状态机管理" subtitle="功能建设中，敬请期待" />
+  <div class="flex-col-stretch gap-16px overflow-hidden">
+    <StateMachineSearch v-model:model="searchParams" @reset="resetSearchParams" @search="handleSearch" />
+
+    <ElCard class="flex-1-hidden card-wrapper" body-class="business-table-card-body">
+      <template #header>
+        <div class="flex items-center justify-between gap-12px">
+          <div class="flex items-center gap-10px">
+            <p>状态模型列表</p>
+            <ElTag effect="plain">{{ mobilePagination.total || data.length }}</ElTag>
+          </div>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="checkedRowKeys.length === 0"
+            :loading="loading"
+            @refresh="getData"
+          >
+            <template #default>
+              <ElButton v-auth="'infra:state-machine:create'" plain type="primary" @click="openAdd">
+                <template #icon>
+                  <icon-ic-round-plus class="text-icon" />
+                </template>
+                新增
+              </ElButton>
+              <ElPopconfirm
+                v-if="canDeleteStateMachine"
+                title="确认删除选中的状态模型吗？"
+                @confirm="handleBatchDelete"
+              >
+                <template #reference>
+                  <ElButton type="danger" plain :disabled="checkedRowKeys.length === 0">
+                    <template #icon>
+                      <icon-ic-round-delete class="text-icon" />
+                    </template>
+                    批量删除
+                  </ElButton>
+                </template>
+              </ElPopconfirm>
+            </template>
+          </TableHeaderOperation>
+        </div>
+      </template>
+
+      <div class="flex-1">
+        <ElTable
+          ref="stateTableRef"
+          v-loading="loading"
+          height="100%"
+          border
+          row-key="id"
+          :data="data"
+          @selection-change="handleSelectionChange"
+        >
+          <ElTableColumn v-for="col in columns" :key="String(col.prop)" v-bind="col" />
+        </ElTable>
+      </div>
+
+      <div class="mt-20px flex justify-end">
+        <ElPagination
+          v-if="mobilePagination.total"
+          layout="total,prev,pager,next,sizes"
+          v-bind="mobilePagination"
+          @current-change="mobilePagination['current-change']"
+          @size-change="mobilePagination['size-change']"
+        />
+      </div>
+    </ElCard>
+
+    <StateMachineOperateDialog
+      v-model:visible="operateVisible"
+      :operate-type="operateType"
+      :row-data="editingData"
+      @submitted="handleSubmitted"
+    />
+
+    <StateTransitionDialog
+      v-model:visible="transitionVisible"
+      :current-status="transitionRow"
+      @update:visible="value => !value && closeTransitionModal()"
+    />
+  </div>
 </template>
+
+<style scoped></style>
diff --git a/src/views/infra/state-machine/modules/state-machine-operate-dialog.vue b/src/views/infra/state-machine/modules/state-machine-operate-dialog.vue
new file mode 100644
index 0000000..10b1f5a
--- /dev/null
+++ b/src/views/infra/state-machine/modules/state-machine-operate-dialog.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import { fetchCreateObjectStatusModel, fetchGetObjectStatusModel, fetchUpdateObjectStatusModel } from '@/service/api';
+import { useDict } from '@/hooks/business/dict';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import { statusOptions } from '../shared';
+
+defineOptions({ name: 'StateMachineOperateDialog' });
+
+interface Props {
+  operateType: UI.TableOperateType;
+  rowData?: Api.Infra.ObjectStatusModel | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  submitted: [statusModelId: string];
+}>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+const { dictOptions: objectTypeOptions } = useDict(OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE);
+
+const detailLoading = ref(false);
+const submitting = ref(false);
+const isEdit = computed(() => props.operateType === 'edit');
+
+const title = computed(() => {
+  const titleMap: Record<UI.TableOperateType, string> = {
+    add: '新增状态模型',
+    edit: '编辑状态模型'
+  };
+
+  return titleMap[props.operateType];
+});
+
+type Model = Api.Infra.SaveObjectStatusModelParams;
+
+const model = ref(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    objectType: 'product',
+    statusCode: '',
+    statusName: '',
+    sort: 0,
+    status: 0,
+    initialFlag: false,
+    terminalFlag: false,
+    allowEdit: false,
+    progressExcludedFlag: false,
+    allowCreateProject: false,
+    allowCreateRequirement: false,
+    remark: ''
+  };
+}
+
+const rules = {
+  objectType: createRequiredRule('请选择对象类型'),
+  statusCode: createRequiredRule('请输入状态编码'),
+  statusName: createRequiredRule('请输入状态名称'),
+  sort: createRequiredRule('请输入排序值'),
+  status: createRequiredRule('请选择配置状态')
+} satisfies Record<string, App.Global.FormRule>;
+
+function closeModal() {
+  visible.value = false;
+}
+
+async function initModel() {
+  model.value = createDefaultModel();
+
+  if (!isEdit.value || !props.rowData) {
+    await nextTick();
+    formRef.value?.clearValidate();
+    return;
+  }
+
+  detailLoading.value = true;
+
+  const { error, data } = await fetchGetObjectStatusModel(props.rowData.id);
+
+  detailLoading.value = false;
+
+  if (!error) {
+    model.value = {
+      objectType: data.objectType,
+      statusCode: data.statusCode,
+      statusName: data.statusName,
+      sort: data.sort ?? 0,
+      status: data.status,
+      initialFlag: data.initialFlag,
+      terminalFlag: data.terminalFlag,
+      allowEdit: data.allowEdit,
+      progressExcludedFlag: data.progressExcludedFlag,
+      allowCreateProject: data.allowCreateProject,
+      allowCreateRequirement: data.allowCreateRequirement,
+      remark: data.remark ?? ''
+    };
+  }
+
+  await nextTick();
+  formRef.value?.clearValidate();
+}
+
+async function handleSubmit() {
+  await validate();
+
+  submitting.value = true;
+
+  const submitData: Api.Infra.SaveObjectStatusModelParams = {
+    ...model.value,
+    statusCode: model.value.statusCode.trim(),
+    statusName: model.value.statusName.trim(),
+    remark: model.value.remark?.trim() || null
+  };
+
+  let statusModelId = props.rowData?.id ?? '';
+
+  if (isEdit.value && props.rowData) {
+    const { error } = await fetchUpdateObjectStatusModel({ id: props.rowData.id, ...submitData });
+
+    submitting.value = false;
+
+    if (error) {
+      return;
+    }
+  } else {
+    const { error, data } = await fetchCreateObjectStatusModel(submitData);
+
+    submitting.value = false;
+
+    if (error) {
+      return;
+    }
+
+    statusModelId = data;
+  }
+
+  window.$message?.success(isEdit.value ? '修改成功' : '新增成功');
+
+  closeModal();
+  emit('submitted', statusModelId);
+}
+
+watch(visible, value => {
+  if (value) {
+    initModel();
+  }
+});
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    :title="title"
+    preset="lg"
+    :loading="detailLoading"
+    :confirm-loading="submitting"
+    @confirm="handleSubmit"
+  >
+    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
+      <ElRow :gutter="16">
+        <ElCol :span="12">
+          <ElFormItem label="对象类型" prop="objectType">
+            <ElSelect
+              v-model="model.objectType"
+              class="w-full"
+              placeholder="请选择或输入对象类型"
+              filterable
+              allow-create
+              default-first-option
+              clearable
+              :reserve-keyword="false"
+            >
+              <ElOption v-for="item in objectTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </ElSelect>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="状态编码" prop="statusCode">
+            <ElInput v-model="model.statusCode" placeholder="请输入状态编码" />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="状态名称" prop="statusName">
+            <ElInput v-model="model.statusName" placeholder="请输入状态名称" />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="排序值" prop="sort">
+            <ElInputNumber v-model="model.sort" class="w-full" :min="0" placeholder="请输入排序值" />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="24">
+          <ElFormItem label="配置状态" prop="status">
+            <ElRadioGroup v-model="model.status" class="business-form-radio-group">
+              <ElRadio v-for="{ label, value } in statusOptions" :key="value" :value="value">
+                {{ label }}
+              </ElRadio>
+            </ElRadioGroup>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="是否初始状态" prop="initialFlag">
+            <div class="business-form-switch-field">
+              <ElSwitch v-model="model.initialFlag" />
+              <span class="ml-8px text-12px text-[#606266]">{{ model.initialFlag ? '是' : '否' }}</span>
+            </div>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="是否终态" prop="terminalFlag">
+            <div class="business-form-switch-field">
+              <ElSwitch v-model="model.terminalFlag" />
+              <span class="ml-8px text-12px text-[#606266]">{{ model.terminalFlag ? '是' : '否' }}</span>
+            </div>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="允许编辑主数据" prop="allowEdit">
+            <div class="business-form-switch-field">
+              <ElSwitch v-model="model.allowEdit" />
+              <span class="ml-8px text-12px text-[#606266]">{{ model.allowEdit ? '是' : '否' }}</span>
+            </div>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="不参与上层进度统计" prop="progressExcludedFlag">
+            <div class="business-form-switch-field">
+              <ElSwitch v-model="model.progressExcludedFlag" />
+              <span class="ml-8px text-12px text-[#606266]">{{ model.progressExcludedFlag ? '是' : '否' }}</span>
+            </div>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="允许新建项目" prop="allowCreateProject">
+            <div class="business-form-switch-field">
+              <ElSwitch v-model="model.allowCreateProject" />
+              <span class="ml-8px text-12px text-[#606266]">{{ model.allowCreateProject ? '是' : '否' }}</span>
+            </div>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="允许新增需求" prop="allowCreateRequirement">
+            <div class="business-form-switch-field">
+              <ElSwitch v-model="model.allowCreateRequirement" />
+              <span class="ml-8px text-12px text-[#606266]">{{ model.allowCreateRequirement ? '是' : '否' }}</span>
+            </div>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="24">
+          <ElFormItem label="备注" prop="remark">
+            <ElInput v-model="model.remark" type="textarea" :rows="4" placeholder="请输入备注" />
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped></style>
diff --git a/src/views/infra/state-machine/modules/state-machine-search.vue b/src/views/infra/state-machine/modules/state-machine-search.vue
new file mode 100644
index 0000000..bdfb931
--- /dev/null
+++ b/src/views/infra/state-machine/modules/state-machine-search.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import { OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
+import { statusOptions } from '../shared';
+
+defineOptions({ name: 'StateMachineSearch' });
+
+const emit = defineEmits<{
+  reset: [];
+  search: [];
+}>();
+
+const model = defineModel<Api.Infra.ObjectStatusModelSearchParams>('model', { required: true });
+
+const booleanOptions = [
+  { label: '是', value: 1 },
+  { label: '否', value: 0 }
+];
+
+const searchModel = reactive<{
+  keyword: string;
+  objectType?: string;
+  status?: Api.Infra.CommonStatus;
+  initialFlag?: number;
+  terminalFlag?: number;
+}>({
+  keyword: '',
+  objectType: undefined,
+  status: undefined,
+  initialFlag: undefined,
+  terminalFlag: undefined
+});
+
+let syncingFromSource = false;
+
+watch(
+  () =>
+    [
+      model.value.keyword,
+      model.value.objectType,
+      model.value.status,
+      model.value.initialFlag,
+      model.value.terminalFlag
+    ] as const,
+  ([keyword, objectType, status, initialFlag, terminalFlag]) => {
+    syncingFromSource = true;
+    searchModel.keyword = keyword ?? '';
+    searchModel.objectType = objectType;
+    searchModel.status = status;
+
+    if (initialFlag === undefined) {
+      searchModel.initialFlag = undefined;
+    } else {
+      searchModel.initialFlag = initialFlag ? 1 : 0;
+    }
+
+    if (terminalFlag === undefined) {
+      searchModel.terminalFlag = undefined;
+    } else {
+      searchModel.terminalFlag = terminalFlag ? 1 : 0;
+    }
+
+    syncingFromSource = false;
+  },
+  { immediate: true, flush: 'sync' }
+);
+
+watch(
+  () =>
+    [
+      searchModel.keyword,
+      searchModel.objectType,
+      searchModel.status,
+      searchModel.initialFlag,
+      searchModel.terminalFlag
+    ] as const,
+  ([keywordValue, objectType, status, initialFlag, terminalFlag]) => {
+    if (syncingFromSource) {
+      return;
+    }
+
+    model.value.keyword = keywordValue.trim() || undefined;
+    model.value.objectType = objectType;
+    model.value.status = status;
+    model.value.initialFlag = initialFlag === undefined ? undefined : initialFlag === 1;
+    model.value.terminalFlag = terminalFlag === undefined ? undefined : terminalFlag === 1;
+  },
+  { flush: 'sync' }
+);
+
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'objectType',
+    label: '对象类型',
+    type: 'dict',
+    placeholder: '请选择对象类型',
+    dictCode: OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE
+  },
+  {
+    key: 'keyword',
+    label: '关键字',
+    type: 'input',
+    placeholder: '请输入状态名称或状态编码'
+  },
+  {
+    key: 'status',
+    label: '配置状态',
+    type: 'select',
+    placeholder: '请选择配置状态',
+    options: statusOptions
+  },
+  {
+    key: 'initialFlag',
+    label: '初始状态',
+    type: 'select',
+    placeholder: '请选择是否初始状态',
+    options: booleanOptions
+  },
+  {
+    key: 'terminalFlag',
+    label: '终态',
+    type: 'select',
+    placeholder: '请选择是否终态',
+    options: booleanOptions
+  }
+]);
+
+function reset() {
+  emit('reset');
+}
+
+function search() {
+  emit('search');
+}
+</script>
+
+<template>
+  <TableSearchFields v-model="searchModel" :fields="fields" :columns="4" @reset="reset" @search="search" />
+</template>
+
+<style scoped></style>
diff --git a/src/views/infra/state-machine/modules/state-transition-dialog.vue b/src/views/infra/state-machine/modules/state-transition-dialog.vue
new file mode 100644
index 0000000..f400a9d
--- /dev/null
+++ b/src/views/infra/state-machine/modules/state-transition-dialog.vue
@@ -0,0 +1,406 @@
+<script setup lang="tsx">
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+import type { TableInstance } from 'element-plus';
+import { ElButton, ElTag } from 'element-plus';
+import { useBoolean } from '@sa/hooks';
+import { OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import {
+  fetchBatchDeleteObjectStatusTransition,
+  fetchDeleteObjectStatusTransition,
+  fetchGetObjectStatusModelPage,
+  fetchGetObjectStatusTransitionPage
+} from '@/service/api';
+import { useDict } from '@/hooks/business/dict';
+import { useUIPaginatedTable } from '@/hooks/common/table';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessTableActionCell from '@/components/custom/business-table-action-cell';
+import { formatDateTime, getBooleanLabel, getBooleanTagType, getStatusLabel, getStatusTagType } from '../shared';
+import StateTransitionOperateDialog from './state-transition-operate-dialog.vue';
+import StateTransitionSearch from './state-transition-search.vue';
+
+defineOptions({ name: 'StateTransitionDialog' });
+
+interface Props {
+  currentStatus?: Api.Infra.ObjectStatusModel | null;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+function getInitSearchParams(): Api.Infra.ObjectStatusTransitionSearchParams {
+  return {
+    pageNo: 1,
+    pageSize: 10,
+    objectType: props.currentStatus?.objectType,
+    fromStatusCode: props.currentStatus?.statusCode,
+    actionCode: undefined,
+    actionName: undefined,
+    toStatusCode: undefined,
+    status: undefined
+  };
+}
+
+function transformPageResult(
+  response: Awaited<ReturnType<typeof fetchGetObjectStatusTransitionPage>>,
+  pageNo: number,
+  pageSize: number
+) {
+  if (!response.error) {
+    return {
+      data: response.data.list,
+      pageNum: pageNo,
+      pageSize,
+      total: response.data.total
+    };
+  }
+
+  return {
+    data: [],
+    pageNum: pageNo,
+    pageSize,
+    total: 0
+  };
+}
+
+const searchParams = reactive(getInitSearchParams());
+const transitionTableRef = ref<TableInstance>();
+const checkedRowKeys = ref<string[]>([]);
+const statusModelOptions = ref<Api.Infra.ObjectStatusModel[]>([]);
+const loadingOptions = ref(false);
+const { getLabel: getObjectTypeLabel } = useDict(OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE);
+
+const targetStatusOptions = computed(() =>
+  statusModelOptions.value.map(item => ({
+    label: `${item.statusName} (${item.statusCode})`,
+    value: item.statusCode
+  }))
+);
+
+const currentStatusLabel = computed(() => {
+  if (!props.currentStatus) {
+    return '--';
+  }
+
+  return `${props.currentStatus.statusName} (${props.currentStatus.statusCode})`;
+});
+
+const currentObjectTypeLabel = computed(() => getObjectTypeLabel(props.currentStatus?.objectType));
+
+const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagination } = useUIPaginatedTable({
+  paginationProps: {
+    currentPage: searchParams.pageNo,
+    pageSize: searchParams.pageSize
+  },
+  api: () => fetchGetObjectStatusTransitionPage(searchParams),
+  transform: response => transformPageResult(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
+  onPaginationParamsChange: params => {
+    searchParams.pageNo = params.currentPage ?? 1;
+    searchParams.pageSize = params.pageSize ?? 10;
+  },
+  columns: () => [
+    { prop: 'selection', type: 'selection', width: 48 },
+    { prop: 'index', type: 'index', label: '序号', width: 64 },
+    { prop: 'actionName', label: '动作名称', minWidth: 150, showOverflowTooltip: true },
+    { prop: 'actionCode', label: '动作编码', minWidth: 150, showOverflowTooltip: true },
+    {
+      prop: 'toStatusCode',
+      label: '目标状态',
+      minWidth: 180,
+      formatter: row => row.toStatusName?.trim() || row.toStatusCode
+    },
+    {
+      prop: 'needReason',
+      label: '必须填写原因',
+      width: 120,
+      align: 'center',
+      formatter: row => <ElTag type={getBooleanTagType(row.needReason)}>{getBooleanLabel(row.needReason)}</ElTag>
+    },
+    {
+      prop: 'status',
+      label: '配置状态',
+      width: 110,
+      align: 'center',
+      formatter: row => <ElTag type={getStatusTagType(row.status)}>{getStatusLabel(row.status)}</ElTag>
+    },
+    {
+      prop: 'remark',
+      label: '备注',
+      minWidth: 180,
+      showOverflowTooltip: true,
+      formatter: row => row.remark || '--'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      minWidth: 170,
+      formatter: row => formatDateTime(row.createTime)
+    },
+    {
+      prop: 'operate',
+      label: '操作',
+      width: 180,
+      align: 'center',
+      fixed: 'right',
+      formatter: row => (
+        <BusinessTableActionCell
+          actions={[
+            {
+              key: 'edit',
+              label: '编辑',
+              buttonType: 'primary',
+              onClick: () => openEdit(row)
+            },
+            {
+              key: 'delete',
+              label: '删除',
+              buttonType: 'danger',
+              onClick: () => handleDeleteAction(row)
+            }
+          ]}
+        />
+      )
+    }
+  ]
+});
+
+const { bool: operateVisible, setTrue: openOperateModal, setFalse: closeOperateModal } = useBoolean();
+const operateType = ref<UI.TableOperateType>('add');
+const editingData = ref<Api.Infra.ObjectStatusTransition | null>(null);
+
+function openAdd() {
+  operateType.value = 'add';
+  editingData.value = null;
+  openOperateModal();
+}
+
+function openEdit(item: Api.Infra.ObjectStatusTransition) {
+  operateType.value = 'edit';
+  editingData.value = item;
+  openOperateModal();
+}
+
+async function handleDelete(item: Api.Infra.ObjectStatusTransition) {
+  const { error } = await fetchDeleteObjectStatusTransition(item.id);
+
+  if (error) {
+    return;
+  }
+
+  window.$message?.success('删除成功');
+  await reloadTable();
+}
+
+async function handleDeleteAction(row: Api.Infra.ObjectStatusTransition) {
+  try {
+    await window.$messageBox?.confirm('确认删除当前状态流转吗？', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+  } catch {
+    return;
+  }
+
+  await handleDelete(row);
+}
+
+async function handleBatchDelete() {
+  if (!checkedRowKeys.value.length) {
+    return;
+  }
+
+  const { error } = await fetchBatchDeleteObjectStatusTransition(checkedRowKeys.value);
+
+  if (error) {
+    return;
+  }
+
+  window.$message?.success('删除成功');
+  await reloadTable();
+}
+
+function handleSelectionChange(rows: Api.Infra.ObjectStatusTransition[]) {
+  checkedRowKeys.value = rows.map(item => item.id);
+}
+
+async function reloadTable(page = searchParams.pageNo) {
+  checkedRowKeys.value = [];
+  await getDataByPage(page);
+  await nextTick();
+  transitionTableRef.value?.clearSelection();
+}
+
+function resetSearchParams() {
+  Object.assign(searchParams, getInitSearchParams());
+  reloadTable(1);
+}
+
+function handleSearch() {
+  reloadTable(1);
+}
+
+function handleSubmitted() {
+  closeOperateModal();
+  reloadTable();
+}
+
+async function loadStatusModelOptions() {
+  if (!props.currentStatus?.objectType) {
+    statusModelOptions.value = [];
+    return;
+  }
+
+  loadingOptions.value = true;
+
+  const { error, data: page } = await fetchGetObjectStatusModelPage({
+    pageNo: 1,
+    pageSize: 200,
+    keyword: undefined,
+    objectType: props.currentStatus.objectType,
+    status: undefined,
+    initialFlag: undefined,
+    terminalFlag: undefined
+  });
+
+  loadingOptions.value = false;
+
+  statusModelOptions.value = error ? [] : page.list;
+}
+
+async function initDialog() {
+  if (!props.currentStatus) {
+    return;
+  }
+
+  Object.assign(searchParams, getInitSearchParams(), {
+    objectType: props.currentStatus.objectType,
+    fromStatusCode: props.currentStatus.statusCode
+  });
+
+  checkedRowKeys.value = [];
+
+  await Promise.all([loadStatusModelOptions(), reloadTable(1)]);
+}
+
+watch(
+  () => [visible.value, props.currentStatus?.id] as const,
+  ([opened]) => {
+    if (opened) {
+      initDialog();
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    title="状态流转配置"
+    width="1200px"
+    :loading="loadingOptions"
+    :show-footer="false"
+    :scrollbar="false"
+  >
+    <div v-if="currentStatus" class="state-transition-dialog">
+      <StateTransitionSearch
+        v-model:model="searchParams"
+        :target-status-options="targetStatusOptions"
+        @reset="resetSearchParams"
+        @search="handleSearch"
+      />
+
+      <ElCard class="flex-1-hidden card-wrapper" body-class="business-table-card-body">
+        <template #header>
+          <div class="flex items-center justify-between gap-12px">
+            <div class="min-w-0 flex flex-wrap items-center gap-8px">
+              <p>状态流转列表</p>
+              <ElTag type="primary" effect="light">
+                {{ currentObjectTypeLabel }}
+              </ElTag>
+              <ElTag type="success" effect="light">
+                {{ currentStatusLabel }}
+              </ElTag>
+              <ElTag effect="plain">{{ mobilePagination.total || data.length }}</ElTag>
+            </div>
+            <TableHeaderOperation
+              v-model:columns="columnChecks"
+              :disabled-delete="checkedRowKeys.length === 0"
+              :loading="loading"
+              @refresh="getData"
+            >
+              <template #default>
+                <ElButton plain type="primary" @click="openAdd">
+                  <template #icon>
+                    <icon-ic-round-plus class="text-icon" />
+                  </template>
+                  新增
+                </ElButton>
+                <ElPopconfirm title="确认删除选中的状态流转吗？" @confirm="handleBatchDelete">
+                  <template #reference>
+                    <ElButton type="danger" plain :disabled="checkedRowKeys.length === 0">
+                      <template #icon>
+                        <icon-ic-round-delete class="text-icon" />
+                      </template>
+                      批量删除
+                    </ElButton>
+                  </template>
+                </ElPopconfirm>
+              </template>
+            </TableHeaderOperation>
+          </div>
+        </template>
+
+        <div class="flex-1">
+          <ElTable
+            ref="transitionTableRef"
+            v-loading="loading"
+            height="100%"
+            border
+            row-key="id"
+            :data="data"
+            @selection-change="handleSelectionChange"
+          >
+            <ElTableColumn v-for="col in columns" :key="String(col.prop)" v-bind="col" />
+          </ElTable>
+        </div>
+
+        <div class="mt-20px flex justify-end">
+          <ElPagination
+            v-if="mobilePagination.total"
+            layout="total,prev,pager,next,sizes"
+            v-bind="mobilePagination"
+            @current-change="mobilePagination['current-change']"
+            @size-change="mobilePagination['size-change']"
+          />
+        </div>
+      </ElCard>
+    </div>
+
+    <div v-else class="h-full flex items-center justify-center">
+      <ElEmpty description="请选择状态模型" />
+    </div>
+
+    <StateTransitionOperateDialog
+      v-model:visible="operateVisible"
+      :operate-type="operateType"
+      :row-data="editingData"
+      :current-status="currentStatus"
+      :target-status-options="targetStatusOptions"
+      append-to-body
+      @submitted="handleSubmitted"
+    />
+  </BusinessFormDialog>
+</template>
+
+<style scoped lang="scss">
+.state-transition-dialog {
+  display: flex;
+  min-height: 560px;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
diff --git a/src/views/infra/state-machine/modules/state-transition-operate-dialog.vue b/src/views/infra/state-machine/modules/state-transition-operate-dialog.vue
new file mode 100644
index 0000000..e439137
--- /dev/null
+++ b/src/views/infra/state-machine/modules/state-transition-operate-dialog.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import {
+  fetchCreateObjectStatusTransition,
+  fetchGetObjectStatusTransition,
+  fetchUpdateObjectStatusTransition
+} from '@/service/api';
+import { useDict } from '@/hooks/business/dict';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import { statusOptions } from '../shared';
+
+defineOptions({ name: 'StateTransitionOperateDialog' });
+
+interface Props {
+  operateType: UI.TableOperateType;
+  rowData?: Api.Infra.ObjectStatusTransition | null;
+  currentStatus?: Api.Infra.ObjectStatusModel | null;
+  targetStatusOptions: Array<{ label: string; value: string }>;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  submitted: [transitionId: string];
+}>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+const { getLabel: getObjectTypeLabel } = useDict(OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE);
+
+const detailLoading = ref(false);
+const submitting = ref(false);
+const isEdit = computed(() => props.operateType === 'edit');
+
+const title = computed(() => {
+  const titleMap: Record<UI.TableOperateType, string> = {
+    add: '新增状态流转',
+    edit: '编辑状态流转'
+  };
+
+  return titleMap[props.operateType];
+});
+
+type Model = Api.Infra.SaveObjectStatusTransitionParams;
+
+const model = ref(createDefaultModel());
+
+const currentObjectTypeLabel = computed(() => getObjectTypeLabel(model.value.objectType));
+
+const currentFromStatusLabel = computed(() => {
+  if (!props.currentStatus) {
+    return model.value.fromStatusCode || '--';
+  }
+
+  return `${props.currentStatus.statusName} (${props.currentStatus.statusCode})`;
+});
+
+function createDefaultModel(): Model {
+  return {
+    objectType: props.currentStatus?.objectType ?? 'product',
+    actionCode: '',
+    actionName: '',
+    fromStatusCode: props.currentStatus?.statusCode ?? '',
+    toStatusCode: '',
+    needReason: false,
+    status: 0,
+    remark: ''
+  };
+}
+
+const rules = {
+  actionCode: createRequiredRule('请输入动作编码'),
+  actionName: createRequiredRule('请输入动作名称'),
+  toStatusCode: createRequiredRule('请选择目标状态'),
+  status: createRequiredRule('请选择配置状态')
+} satisfies Record<string, App.Global.FormRule>;
+
+function closeModal() {
+  visible.value = false;
+}
+
+async function initModel() {
+  model.value = createDefaultModel();
+
+  if (!isEdit.value || !props.rowData) {
+    await nextTick();
+    formRef.value?.clearValidate();
+    return;
+  }
+
+  detailLoading.value = true;
+
+  const { error, data } = await fetchGetObjectStatusTransition(props.rowData.id);
+
+  detailLoading.value = false;
+
+  if (!error) {
+    model.value = {
+      objectType: data.objectType,
+      actionCode: data.actionCode,
+      actionName: data.actionName,
+      fromStatusCode: data.fromStatusCode,
+      toStatusCode: data.toStatusCode,
+      needReason: data.needReason,
+      status: data.status,
+      remark: data.remark ?? ''
+    };
+  }
+
+  await nextTick();
+  formRef.value?.clearValidate();
+}
+
+async function handleSubmit() {
+  await validate();
+
+  submitting.value = true;
+
+  const submitData: Api.Infra.SaveObjectStatusTransitionParams = {
+    ...model.value,
+    objectType: props.currentStatus?.objectType ?? model.value.objectType,
+    fromStatusCode: props.currentStatus?.statusCode ?? model.value.fromStatusCode,
+    actionCode: model.value.actionCode.trim(),
+    actionName: model.value.actionName.trim(),
+    remark: model.value.remark?.trim() || null
+  };
+
+  let transitionId = props.rowData?.id ?? '';
+
+  if (isEdit.value && props.rowData) {
+    const { error } = await fetchUpdateObjectStatusTransition({ id: props.rowData.id, ...submitData });
+
+    submitting.value = false;
+
+    if (error) {
+      return;
+    }
+  } else {
+    const { error, data } = await fetchCreateObjectStatusTransition(submitData);
+
+    submitting.value = false;
+
+    if (error) {
+      return;
+    }
+
+    transitionId = data;
+  }
+
+  window.$message?.success(isEdit.value ? '修改成功' : '新增成功');
+
+  closeModal();
+  emit('submitted', transitionId);
+}
+
+watch(visible, value => {
+  if (value) {
+    initModel();
+  }
+});
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    :title="title"
+    preset="md"
+    :loading="detailLoading"
+    :confirm-loading="submitting"
+    @confirm="handleSubmit"
+  >
+    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
+      <ElRow :gutter="16">
+        <ElCol :span="12">
+          <ElFormItem label="对象类型">
+            <ElInput :model-value="currentObjectTypeLabel" readonly />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="起始状态">
+            <ElInput :model-value="currentFromStatusLabel" readonly />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="动作编码" prop="actionCode">
+            <ElInput v-model="model.actionCode" placeholder="请输入动作编码" />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="动作名称" prop="actionName">
+            <ElInput v-model="model.actionName" placeholder="请输入动作名称" />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="目标状态" prop="toStatusCode">
+            <ElSelect v-model="model.toStatusCode" class="w-full" placeholder="请选择目标状态">
+              <ElOption v-for="{ label, value } in targetStatusOptions" :key="value" :label="label" :value="value" />
+            </ElSelect>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="配置状态" prop="status">
+            <ElRadioGroup v-model="model.status" class="business-form-radio-group">
+              <ElRadio v-for="{ label, value } in statusOptions" :key="value" :value="value">
+                {{ label }}
+              </ElRadio>
+            </ElRadioGroup>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="必须填写原因" prop="needReason">
+            <div class="business-form-switch-field">
+              <ElSwitch v-model="model.needReason" />
+              <span class="ml-8px text-12px text-[#606266]">{{ model.needReason ? '是' : '否' }}</span>
+            </div>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="24">
+          <ElFormItem label="备注" prop="remark">
+            <ElInput v-model="model.remark" type="textarea" :rows="4" placeholder="请输入备注" />
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped></style>
diff --git a/src/views/infra/state-machine/modules/state-transition-search.vue b/src/views/infra/state-machine/modules/state-transition-search.vue
new file mode 100644
index 0000000..76a4af5
--- /dev/null
+++ b/src/views/infra/state-machine/modules/state-transition-search.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
+import { statusOptions } from '../shared';
+
+defineOptions({ name: 'StateTransitionSearch' });
+
+interface Props {
+  targetStatusOptions: Array<{ label: string; value: string }>;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  reset: [];
+  search: [];
+}>();
+
+const model = defineModel<Api.Infra.ObjectStatusTransitionSearchParams>('model', { required: true });
+
+const searchModel = reactive<{
+  keyword: string;
+  toStatusCode?: string;
+  status?: Api.Infra.CommonStatus;
+}>({
+  keyword: '',
+  toStatusCode: undefined,
+  status: undefined
+});
+
+let syncingFromSource = false;
+
+watch(
+  () => [model.value.actionName, model.value.actionCode, model.value.toStatusCode, model.value.status] as const,
+  ([actionName, actionCode, toStatusCode, status]) => {
+    syncingFromSource = true;
+    searchModel.keyword = actionName ?? actionCode ?? '';
+    searchModel.toStatusCode = toStatusCode;
+    searchModel.status = status;
+    syncingFromSource = false;
+  },
+  { immediate: true, flush: 'sync' }
+);
+
+watch(
+  () => [searchModel.keyword, searchModel.toStatusCode, searchModel.status] as const,
+  ([keywordValue, toStatusCode, status]) => {
+    if (syncingFromSource) {
+      return;
+    }
+
+    const keywordText = keywordValue.trim() || undefined;
+    model.value.actionName = keywordText;
+    model.value.actionCode = keywordText;
+    model.value.toStatusCode = toStatusCode;
+    model.value.status = status;
+  },
+  { flush: 'sync' }
+);
+
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'keyword',
+    label: '动作名称',
+    type: 'input',
+    placeholder: '请输入动作名称或动作编码'
+  },
+  {
+    key: 'toStatusCode',
+    label: '目标状态',
+    type: 'select',
+    placeholder: '请选择目标状态',
+    options: props.targetStatusOptions
+  },
+  {
+    key: 'status',
+    label: '配置状态',
+    type: 'select',
+    placeholder: '请选择配置状态',
+    options: statusOptions
+  }
+]);
+
+function reset() {
+  emit('reset');
+}
+
+function search() {
+  emit('search');
+}
+</script>
+
+<template>
+  <TableSearchFields v-model="searchModel" :fields="fields" :columns="4" @reset="reset" @search="search" />
+</template>
+
+<style scoped></style>
diff --git a/src/views/infra/state-machine/shared.ts b/src/views/infra/state-machine/shared.ts
new file mode 100644
index 0000000..84763db
--- /dev/null
+++ b/src/views/infra/state-machine/shared.ts
@@ -0,0 +1,38 @@
+import dayjs from 'dayjs';
+
+export const statusOptions: Array<{ label: string; value: Api.Infra.CommonStatus }> = [
+  { label: '启用', value: 0 },
+  { label: '停用', value: 1 }
+];
+
+export function getStatusLabel(value?: Api.Infra.CommonStatus | null) {
+  if (value === 0) {
+    return '启用';
+  }
+
+  if (value === 1) {
+    return '停用';
+  }
+
+  return '--';
+}
+
+export function getStatusTagType(value?: Api.Infra.CommonStatus | null): UI.ThemeColor {
+  return value === 0 ? 'success' : 'warning';
+}
+
+export function getBooleanLabel(value?: boolean | null) {
+  return value ? '是' : '否';
+}
+
+export function getBooleanTagType(value?: boolean | null): UI.ThemeColor {
+  return value ? 'success' : 'info';
+}
+
+export function formatDateTime(value?: string | number | null) {
+  if (!value) {
+    return '--';
+  }
+
+  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+}