diff --git a/apps/web-antd/src/api/workflow/instance/index.ts b/apps/web-antd/src/api/workflow/instance/index.ts
index caf8abc8..748742e7 100644
--- a/apps/web-antd/src/api/workflow/instance/index.ts
+++ b/apps/web-antd/src/api/workflow/instance/index.ts
@@ -1,7 +1,78 @@
 import type { FlowInfoResponse } from './model';
 
+import type { ID, IDS, PageQuery } from '#/api/common';
+
 import { requestClient } from '#/api/request';
 
+/**
+ * 分页查询正在运行的流程实例
+ * @param params
+ * @returns
+ */
+export function pageByRunning(params?: PageQuery) {
+  return requestClient.get('/workflow/instance/pageByRunning', { params });
+}
+
+/**
+ * pageByFinish
+ * @param params
+ * @returns
+ */
+export function pageByFinish(params?: PageQuery) {
+  return requestClient.get('/workflow/instance/pageByFinish', { params });
+}
+
+/**
+ * 按照业务id删除流程实例
+ * @param businessIds 业务id
+ */
+export function deleteByBusinessIds(businessIds: IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `/workflow/instance/deleteByBusinessIds${businessIds}`,
+  );
+}
+
+/**
+ * 按照实例id删除流程实例
+ * @param instanceIds 实例id
+ */
+export function deleteByInstanceIds(instanceIds: IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `/workflow/instance/deleteByInstanceIds${instanceIds}`,
+  );
+}
+
+/**
+ * 撤销流程
+ * @param data
+ */
+export function cancelProcessApply(data: any) {
+  return requestClient.putWithMsg<void>(
+    '/workflow/instance/cancelProcessApply',
+    data,
+  );
+}
+
+/**
+ * 激活/挂起流程实例
+ * @param instanceId
+ * @param active
+ */
+export function workflowInstanceActive(instanceId: ID, active: boolean) {
+  return requestClient.putWithMsg<void>(
+    `/workflow/instance/active/${instanceId}?active=${active}`,
+  );
+}
+
+/**
+ * 获取当前登录人发起的流程实例
+ * @param params
+ * @returns
+ */
+export function pageByCurrent(params?: PageQuery) {
+  return requestClient.get('/workflow/instance/current', { params });
+}
+
 /**
  * 获取流程图，流程记录
  * @param businessId 业务标识
@@ -12,3 +83,24 @@ export function flowInfo(businessId: string) {
     `/workflow/instance/flowImage/${businessId}`,
   );
 }
+
+/**
+ * 获取流程变量
+ * @param instanceId
+ * @returns Map<string,any>
+ */
+export function instanceVariable(instanceId: string) {
+  return requestClient.get<Record<string, any>>(
+    `/workflow/instance/variable/${instanceId}`,
+  );
+}
+
+/**
+ * 作废流程
+ */
+export function workflowInstanceInvalid(data: {
+  comment?: string;
+  id: string;
+}) {
+  return requestClient.postWithMsg<void>('/workflow/instance/invalid', data);
+}
diff --git a/apps/web-antd/src/views/workflow/processInstance/data.tsx b/apps/web-antd/src/views/workflow/processInstance/data.tsx
new file mode 100644
index 00000000..3183ca39
--- /dev/null
+++ b/apps/web-antd/src/views/workflow/processInstance/data.tsx
@@ -0,0 +1,91 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DictEnum } from '@vben/constants';
+
+import { OptionsTag } from '#/components/table';
+import { renderDict } from '#/utils/render';
+
+import { activityStatusOptions } from '../processDefinition/constant';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    label: '任务名称',
+    fieldName: 'nodeName',
+  },
+  {
+    component: 'Input',
+    label: '流程名称',
+    fieldName: 'flowName',
+  },
+  {
+    component: 'Input',
+    label: '流程编码',
+    fieldName: 'flowCode',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    field: 'flowName',
+    title: '流程名称',
+    minWidth: 150,
+  },
+  {
+    field: 'nodeName',
+    title: '任务名称',
+    minWidth: 150,
+  },
+  {
+    field: 'flowCode',
+    title: '流程编码',
+    minWidth: 150,
+  },
+  {
+    field: 'createByName',
+    title: '申请人',
+    minWidth: 150,
+  },
+  {
+    field: 'version',
+    title: '版本号',
+    minWidth: 150,
+    formatter: ({ cellValue }) => `V${cellValue}.0`,
+  },
+  {
+    field: 'activityStatus',
+    title: '状态',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        const cellValue = row.activityStatus;
+        return (
+          <OptionsTag
+            options={activityStatusOptions as any}
+            value={cellValue}
+          />
+        );
+      },
+    },
+  },
+  {
+    field: 'flowStatus',
+    title: '流程状态',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.flowStatus, DictEnum.WF_BUSINESS_STATUS);
+      },
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    resizable: false,
+    width: 280,
+  },
+];
diff --git a/apps/web-antd/src/views/workflow/processInstance/index.vue b/apps/web-antd/src/views/workflow/processInstance/index.vue
index 06372a15..4514a7a2 100644
--- a/apps/web-antd/src/views/workflow/processInstance/index.vue
+++ b/apps/web-antd/src/views/workflow/processInstance/index.vue
@@ -1,9 +1,226 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { getVxePopupContainer } from '@vben/utils';
+
+import {
+  Modal,
+  Popconfirm,
+  type RadioChangeEvent,
+  RadioGroup,
+  Space,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
+import { vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  deleteByInstanceIds,
+  pageByFinish,
+  pageByRunning,
+} from '#/api/workflow/instance';
+import CategoryTree from '#/views/workflow/processDefinition/category-tree.vue';
+
+import { columns, querySchema } from './data';
+import instanceInvalidModal from './instance-invalid-modal.vue';
+import instanceVariableModal from './instance-variable-modal.vue';
+
+// 左边分类用
+const selectedCode = ref<number[] | string[]>([]);
+
+const formOptions: VbenFormProps = {
+  schema: querySchema(),
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  handleReset: async () => {
+    selectedCode.value = [];
+    // eslint-disable-next-line no-use-before-define
+    const { formApi, reload } = tableApi;
+    await formApi.resetForm();
+    const formValues = formApi.form.values;
+    formApi.setLatestSubmissionValues(formValues);
+    await reload(formValues);
+  },
+};
+
+const typeOptions = [
+  { label: '运行中', value: 'process_running' },
+  { label: '已完成', value: 'process_completed' },
+];
+let currentTypeApi = pageByRunning;
+const currentType = ref('process_running');
+async function handleTypeChange(e: RadioChangeEvent) {
+  const { value } = e.target;
+  switch (value) {
+    case 'process_completed': {
+      currentTypeApi = pageByFinish;
+      break;
+    }
+    case 'process_running': {
+      currentTypeApi = pageByRunning;
+      break;
+    }
+  }
+  // eslint-disable-next-line no-use-before-define
+  await tableApi.reload();
+}
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    trigger: 'default',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        // 部门树选择处理
+        if (selectedCode.value.length === 1) {
+          formValues.categoryCode = selectedCode.value[0];
+        } else {
+          Reflect.deleteProperty(formValues, 'categoryCode');
+        }
+
+        return await currentTypeApi({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'id',
+    height: 66,
+  },
+  id: 'workflow-definition-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [InstanceInvalidModal, instanceInvalidModalApi] = useVbenModal({
+  connectedComponent: instanceInvalidModal,
+});
+async function handleInvalid(row: Recordable<any>) {
+  instanceInvalidModalApi.setData({ id: row.id });
+  instanceInvalidModalApi.open();
+}
+
+async function handleDelete(row: Recordable<any>) {
+  await deleteByInstanceIds(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteByInstanceIds(ids);
+      await tableApi.query();
+    },
+  });
+}
+const [InstanceVariableModal, instanceVariableModalApi] = useVbenModal({
+  connectedComponent: instanceVariableModal,
+});
+function handleVariable(row: Recordable<any>) {
+  instanceVariableModalApi.setData({ record: row.variable });
+  instanceVariableModalApi.open();
+}
 </script>
 
 <template>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page :auto-content-height="true">
+    <div class="flex h-full gap-[8px]">
+      <CategoryTree
+        v-model:select-code="selectedCode"
+        class="w-[260px]"
+        @reload="() => tableApi.reload()"
+        @select="() => tableApi.reload()"
+      />
+      <BasicTable class="flex-1 overflow-hidden" table-title="流程定义列表">
+        <template #toolbar-tools>
+          <Space>
+            <a-button
+              :disabled="!vxeCheckboxChecked(tableApi)"
+              danger
+              type="primary"
+              v-access:code="['system:user:remove']"
+              @click="handleMultiDelete"
+            >
+              {{ $t('pages.common.delete') }}
+            </a-button>
+            <RadioGroup
+              v-model:value="currentType"
+              :options="typeOptions"
+              button-style="solid"
+              option-type="button"
+              @change="handleTypeChange"
+            />
+          </Space>
+        </template>
+        <template #action="{ row }">
+          <div class="flex flex-col">
+            <div>
+              <a-button
+                danger
+                size="small"
+                type="link"
+                @click.stop="handleInvalid(row)"
+              >
+                作废流程
+              </a-button>
+              <Popconfirm
+                :get-popup-container="getVxePopupContainer"
+                placement="left"
+                title="确认删除？"
+                @confirm="handleDelete(row)"
+              >
+                <a-button danger size="small" type="link" @click.stop="">
+                  删除流程
+                </a-button>
+              </Popconfirm>
+            </div>
+            <div>
+              <a-button size="small" type="link" @click.stop="">
+                流程预览
+              </a-button>
+              <a-button
+                size="small"
+                type="link"
+                @click.stop="handleVariable(row)"
+              >
+                变量查看
+              </a-button>
+            </div>
+          </div>
+        </template>
+      </BasicTable>
+    </div>
+    <InstanceInvalidModal @reload="() => tableApi.reload()" />
+    <InstanceVariableModal />
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/workflow/processInstance/instance-invalid-modal.vue b/apps/web-antd/src/views/workflow/processInstance/instance-invalid-modal.vue
new file mode 100644
index 00000000..58727b2b
--- /dev/null
+++ b/apps/web-antd/src/views/workflow/processInstance/instance-invalid-modal.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+
+import { cloneDeep } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { workflowInstanceInvalid } from '#/api/workflow/instance';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  onConfirm: handleSubmit,
+  onCancel: handleCancel,
+  fullscreenButton: false,
+  title: '作废原因',
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  layout: 'vertical',
+  schema: [
+    {
+      fieldName: 'comment',
+      label: '作废原因',
+      component: 'Textarea',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    data.id = modalApi.getData().id;
+    await workflowInstanceInvalid(data as any);
+    emit('reload');
+    handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+</script>
+
+<template>
+  <BasicModal>
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/workflow/processInstance/instance-variable-modal.vue b/apps/web-antd/src/views/workflow/processInstance/instance-variable-modal.vue
new file mode 100644
index 00000000..420a9d0c
--- /dev/null
+++ b/apps/web-antd/src/views/workflow/processInstance/instance-variable-modal.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { JsonPreview, useVbenModal } from '@vben/common-ui';
+
+const data = ref({});
+const [BasicModal, modalApi] = useVbenModal({
+  title: '流程变量',
+  fullscreenButton: false,
+  footer: false,
+  onOpenChange: (visible) => {
+    if (!visible) {
+      data.value = {};
+      return null;
+    }
+    const recordString = modalApi.getData().record;
+    data.value = JSON.parse(recordString);
+  },
+});
+</script>
+
+<template>
+  <BasicModal>
+    <div class="min-h-[400px] overflow-y-auto">
+      <JsonPreview :data="data" />
+    </div>
+  </BasicModal>
+</template>