diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue
index ec91c56f..49b1a0f5 100644
--- a/src/views/workflow/category/index.vue
+++ b/src/views/workflow/category/index.vue
@@ -138,7 +138,7 @@ async function edit(row: TableDataWithIndex<Api.Workflow.WorkflowCategory>) {
   handleEdit(row);
 }
 
-function addInRow(row: TableDataWithIndex<Api.Workflow.WorkflowCategory>) {
+async function addInRow(row: TableDataWithIndex<Api.Workflow.WorkflowCategory>) {
   editingData.value = jsonClone(row);
   handleAdd();
 }
diff --git a/src/views/workflow/process-instance/index.vue b/src/views/workflow/process-instance/index.vue
index 7b5de630..1a8d0c3e 100644
--- a/src/views/workflow/process-instance/index.vue
+++ b/src/views/workflow/process-instance/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="tsx">
 import { computed, reactive, ref, watch } from 'vue';
 import { NButton, NDivider, NEmpty, NInput, NRadioButton, NRadioGroup, NSpin, NTag } from 'naive-ui';
+import { useBoolean, useLoading } from '@sa/hooks';
 import { workflowActivityStatusRecord } from '@/constants/workflow';
 import { fetchGetCategoryTree } from '@/service/api/workflow/category';
 import {
@@ -12,11 +13,11 @@ import {
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
-import useLoading from '@/hooks/common/loading';
 import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
 import ProcessInstanceSearch from './modules/process-instance-search.vue';
+import ProcessInstanceVariableDrawer from './modules/process-instance-variable-drawer.vue';
 
 interface RunningStatusOption {
   label: string;
@@ -30,6 +31,8 @@ defineOptions({
 useDict('wf_business_status');
 const appStore = useAppStore();
 
+const { bool: variableVisible, setTrue: showVariableDrawer } = useBoolean(false);
+
 const runningStatus = ref<boolean>(true);
 const runningStatusOptions = ref<RunningStatusOption[]>([
   {
@@ -146,7 +149,7 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
     title: $t('common.operate'),
     align: 'center',
     fixed: 'right',
-    width: 150,
+    width: 155,
     render: row => {
       const showAll = runningStatus.value;
       const id = row.id;
@@ -179,7 +182,14 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
           ]}
           <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
           <NDivider vertical />
-          <ButtonIcon text type="info" icon="material-symbols:variable-insert" tooltipContent="流程变量" />
+          <ButtonIcon
+            key=""
+            text
+            type="info"
+            icon="material-symbols:variable-insert"
+            tooltipContent="流程变量"
+            onClick={() => handleShowVariable(id)}
+          />
         </div>
       );
     }
@@ -215,7 +225,7 @@ const {
       : [...baseColumns.value, ...finishColumns.value, ...operateColumns.value]
 });
 
-const { checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
+const { checkedRowKeys, editingData, handleEdit, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
 // 监听运行状态变化
 watch(runningStatus, async () => {
   const newApiFn = runningStatus.value ? fetchGetRunningProcessInstanceList : fetchGetFinishedProcessInstanceList;
@@ -280,8 +290,14 @@ async function handleCancel(instanceId: CommonType.IdType) {
   // request
   const { error } = await fetchFlowInvalidOperate(cancelModel);
   if (error) return;
+  window.$message?.success('作废成功');
   getDataByPage();
 }
+
+async function handleShowVariable(id: CommonType.IdType) {
+  handleEdit('id', id);
+  showVariableDrawer();
+}
 </script>
 
 <template>
@@ -352,13 +368,14 @@ async function handleCancel(instanceId: CommonType.IdType) {
           :data="data"
           size="small"
           :flex-height="!appStore.isMobile"
-          :scroll-x="1400"
+          :scroll-x="1405"
           :loading="loading"
           remote
           :row-key="row => row.id"
           :pagination="mobilePagination"
           class="sm:h-full"
         />
+        <ProcessInstanceVariableDrawer v-model:visible="variableVisible" :row-data="editingData" />
       </NCard>
     </div>
   </TableSiderLayout>
diff --git a/src/views/workflow/process-instance/modules/process-instance-variable-drawer.vue b/src/views/workflow/process-instance/modules/process-instance-variable-drawer.vue
new file mode 100644
index 00000000..e049b016
--- /dev/null
+++ b/src/views/workflow/process-instance/modules/process-instance-variable-drawer.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import JsonPreview from '@/components/custom/json-preview.vue';
+
+defineOptions({
+  name: 'ProcessInstanceVariableDrawer'
+});
+
+interface Props {
+  rowData: Api.Workflow.ProcessInstance | null;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+function closeDrawer() {
+  visible.value = false;
+}
+</script>
+
+<template>
+  <NModal
+    v-model:show="visible"
+    title="流程变量"
+    preset="card"
+    :bordered="false"
+    display-directive="show"
+    class="max-w-90% w-600px"
+    @close="closeDrawer"
+  >
+    <JsonPreview :code="props.rowData?.variable"></JsonPreview>
+    <template #footer>
+      <NSpace justify="end" :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>