diff --git a/src/components/Search/src/Search.vue b/src/components/Search/src/Search.vue
index 8309c43f..62db714e 100644
--- a/src/components/Search/src/Search.vue
+++ b/src/components/Search/src/Search.vue
@@ -22,7 +22,7 @@ const props = defineProps({
   // 操作按钮风格位置
   layout: propTypes.string.validate((v: string) => ['inline', 'bottom'].includes(v)).def('inline'),
   // 底部按钮的对齐方式
-  buttomPosition: propTypes.string
+  bottomPosition: propTypes.string
     .validate((v: string) => ['left', 'center', 'right'].includes(v))
     .def('center'),
   showSearch: propTypes.bool.def(true),
@@ -85,9 +85,9 @@ const reset = async () => {
   emit('reset', model)
 }
 
-const bottonButtonStyle = computed(() => {
+const bottomButtonStyle = computed(() => {
   return {
-    textAlign: props.buttomPosition as unknown as 'left' | 'center' | 'right'
+    textAlign: props.bottomPosition as unknown as 'left' | 'center' | 'right'
   }
 })
 
@@ -135,7 +135,7 @@ const setVisible = () => {
   </Form>
 
   <template v-if="layout === 'bottom'">
-    <div :style="bottonButtonStyle">
+    <div :style="bottomButtonStyle">
       <ElButton v-if="showSearch" type="primary" @click="search">
         <Icon class="mr-5px" icon="ep:search" />
         {{ t('common.query') }}
diff --git a/src/components/XTable/src/XTable.vue b/src/components/XTable/src/XTable.vue
index fac292d4..43d9730f 100644
--- a/src/components/XTable/src/XTable.vue
+++ b/src/components/XTable/src/XTable.vue
@@ -278,7 +278,6 @@ const getToolBarConfig = (options: XTableProps) => {
   if (toolbarConfig) return
   if (toolBar) {
     if (!isBoolean(toolBar)) {
-      console.info(2)
       options.toolbarConfig = toolBar
       return
     }
diff --git a/src/layout/components/TagsView/src/TagsView.vue b/src/layout/components/TagsView/src/TagsView.vue
index 6b4f7be7..36c1b4a5 100644
--- a/src/layout/components/TagsView/src/TagsView.vue
+++ b/src/layout/components/TagsView/src/TagsView.vue
@@ -408,7 +408,7 @@ watch(
         {
           icon: 'ep:close',
           label: t('common.closeTab'),
-           disabled: !!visitedViews?.length && selectedTag?.meta.affix,
+          disabled: !!visitedViews?.length && selectedTag?.meta.affix,
           command: () => {
             closeSelectedTag(selectedTag!)
           }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 5f448e72..cfea2d0b 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -295,9 +295,9 @@ export default {
     logout: 'Login Out',
     test: 'Test',
     typeCreate: 'Dict Type Create',
-    typeUpdate: 'Dict Type Eidt',
+    typeUpdate: 'Dict Type Edit',
     dataCreate: 'Dict Data Create',
-    dataUpdate: 'Dict Data Eidt',
+    dataUpdate: 'Dict Data Edit',
     fileUpload: 'File Upload'
   },
   dialog: {
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index 4e9ab39c..341d3b77 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -8,7 +8,7 @@ import { listSimpleDictDataApi } from '@/api/system/dict/dict.data'
 export interface DictValueType {
   value: any
   label: string
-  clorType?: string
+  colorType?: string
   cssClass?: string
 }
 export interface DictTypeType {
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index a60d0e45..d25836ca 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -90,7 +90,7 @@ export const useTagsViewStore = defineStore('tagsView', {
     // 删除其他
     delOthersViews(view: RouteLocationNormalizedLoaded) {
       this.delOthersVisitedViews(view)
-      this.addCachedView()
+      this.delCachedView()
     },
     // 删除其他tag
     delOthersVisitedViews(view: RouteLocationNormalizedLoaded) {
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 7da49b08..3ac66e60 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -71,8 +71,8 @@ export const getTenantName = () => {
   return wsCache.get(TenantNameKey)
 }
 
-export const setTenantName = (username: string) => {
-  wsCache.set(TenantNameKey, username, { exp: 30 * 24 * 60 * 60 })
+export const setTenantName = (tenantName: string) => {
+  wsCache.set(TenantNameKey, tenantName, { exp: 30 * 24 * 60 * 60 })
 }
 
 export const removeTenantName = () => {
diff --git a/src/views/bpm/processInstance/create.vue b/src/views/bpm/processInstance/create.vue
index 7b8f108d..dfa0baa9 100644
--- a/src/views/bpm/processInstance/create.vue
+++ b/src/views/bpm/processInstance/create.vue
@@ -38,17 +38,10 @@
         </el-col>
       </el-card>
       <el-card class="box-card">
-        <div class="clearfix">
+        <!-- <div class="clearfix">
           <span class="el-icon-picture-outline">流程图</span>
-        </div>
-        <!-- TODO 芋艿：待完成？？？ -->
-        <my-process-viewer
-          key="designer"
-          v-model="bpmnXML"
-          :value="bpmnXML"
-          v-bind="bpmnControlForm"
-          :prefix="bpmnControlForm.prefix"
-        />
+        </div> -->
+        <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
       </el-card>
     </div>
   </ContentWrap>
@@ -61,7 +54,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { DICT_TYPE } from '@/utils/dict'
-
+import ProcessInstanceBpmnViewer from './detail/ProcessInstanceBpmnViewer.vue'
 const router = useRouter() // 路由
 const message = useMessage() // 消息
 
@@ -140,12 +133,12 @@ const submitForm = async (formData) => {
 
 // // BPMN 数据
 const bpmnXML = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
+// const bpmnControlForm = ref({
+//   prefix: 'flowable'
+// })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .my-process-designer {
   height: calc(100vh - 200px);
 }
diff --git a/src/views/bpm/processInstance/detail.vue b/src/views/bpm/processInstance/detail.vue
index a7ead54e..0de03b7b 100644
--- a/src/views/bpm/processInstance/detail.vue
+++ b/src/views/bpm/processInstance/detail.vue
@@ -49,7 +49,7 @@
             pre-icon="ep:edit"
             type="primary"
             title="转办"
-            @click="handleUpdateAssignee(item)"
+            @click="openTaskUpdateAssigneeForm(item.id)"
           />
           <XButton
             pre-icon="ep:position"
@@ -78,7 +78,7 @@
       </el-col>
       <!-- 情况二：流程表单 -->
       <div v-if="processInstance?.processDefinition?.formType === 20">
-        <router-link
+        <!-- <router-link
           :to="
             processInstance.processDefinition.formCustomViewPath +
             '?id=' +
@@ -86,24 +86,21 @@
           "
         >
           <XButton type="primary" preIcon="ep:view" title="点击查看" />
-        </router-link>
+        </router-link> -->
+        <autoComponent :id="processInstance.businessKey" />
       </div>
     </el-card>
 
     <!-- 审批记录 -->
-    <el-card class="box-card" v-loading="tasksLoad">
+    <!-- <el-card class="box-card" v-loading="tasksLoad">
       <template #header>
         <span class="el-icon-picture-outline">审批记录</span>
       </template>
       <el-col :span="16" :offset="4">
         <div class="block">
           <el-timeline>
-            <el-timeline-item
-              v-for="(item, index) in tasks"
-              :key="index"
-              :icon="getTimelineItemIcon(item)"
-              :type="getTimelineItemType(item)"
-            >
+            <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
+              :type="getTimelineItemType(item)">
               <p style="font-weight: 700">任务：{{ item.name }}</p>
               <el-card :body-style="{ padding: '10px' }">
                 <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
@@ -134,79 +131,67 @@
           </el-timeline>
         </div>
       </el-col>
-    </el-card>
+    </el-card> -->
+    <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
 
     <!-- 高亮流程图 -->
-    <el-card class="box-card" v-loading="processInstanceLoading">
-      <template #header>
+    <!-- <el-card class="box-card" v-loading="processInstanceLoading"> -->
+    <!--  <template #header>
         <span class="el-icon-picture-outline">流程图</span>
       </template>
-      <my-process-viewer
-        key="designer"
-        v-model="bpmnXML"
-        :value="bpmnXML"
-        v-bind="bpmnControlForm"
-        :prefix="bpmnControlForm.prefix"
-        :activityData="activityList"
-        :processInstanceData="processInstance"
-        :taskData="tasks"
-      />
-    </el-card>
+      <my-process-viewer key="designer" v-model="bpmnXML" :value="bpmnXML" v-bind="bpmnControlForm"
+        :prefix="bpmnControlForm.prefix" :activityData="activityList" :processInstanceData="processInstance"
+        :taskData="tasks" /> -->
+    <ProcessInstanceBpmnViewer
+      :id="`${id}`"
+      :bpmn-xml="bpmnXML"
+      :loading="processInstanceLoading"
+      :process-instance="processInstance"
+      :tasks="tasks"
+    />
+    <!-- </el-card> -->
 
     <!-- 对话框(转派审批人) -->
-    <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
-      <el-form
-        ref="updateAssigneeFormRef"
-        :model="updateAssigneeForm"
-        :rules="updateAssigneeRules"
-        label-width="110px"
-      >
+    <!-- <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
+      <el-form ref="updateAssigneeFormRef" :model="updateAssigneeForm" :rules="updateAssigneeRules" label-width="110px">
         <el-form-item label="新审批人" prop="assigneeUserId">
           <el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
-            <el-option
-              v-for="item in userOptions"
-              :key="parseInt(item.id)"
-              :label="item.nickname"
-              :value="parseInt(item.id)"
-            />
+            <el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
+              :value="parseInt(item.id)" />
           </el-select>
         </el-form-item>
       </el-form>
-      <!-- 操作按钮 -->
+      操作按钮
       <template #footer>
-        <!-- 按钮：保存 -->
-        <XButton
-          type="primary"
-          :title="t('action.save')"
-          :loading="updateAssigneeLoading"
-          @click="submitUpdateAssigneeForm"
-        />
-        <!-- 按钮：关闭 -->
-        <XButton
-          :loading="updateAssigneeLoading"
-          :title="t('dialog.close')"
-          @click="updateAssigneeLoading = false"
-        />
+        按钮：保存
+        <XButton type="primary" :title="t('action.save')" :loading="updateAssigneeLoading"
+          @click="submitUpdateAssigneeForm" />
+        按钮：关闭
+        <XButton :loading="updateAssigneeLoading" :title="t('dialog.close')" @click="updateAssigneeLoading = false" />
       </template>
-    </XModal>
+    </XModal> -->
+    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
   </ContentWrap>
 </template>
 <script setup lang="ts">
-import dayjs from 'dayjs'
+// import dayjs from 'dayjs'
 import * as UserApi from '@/api/system/user'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as TaskApi from '@/api/bpm/task'
 import * as ActivityApi from '@/api/bpm/activity'
-import { formatPast2 } from '@/utils/formatTime'
+// import { formatPast2 } from '@/utils/formatTime'
 import { setConfAndFields2 } from '@/utils/formCreate'
 // import { OptionAttrs } from '@form-create/element-ui/types/config'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useUserStore } from '@/store/modules/user'
-
+import { registerComponent } from '@/utils/routerHelper'
+import ProcessInstanceBpmnViewer from './detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceTaskList from './detail/ProcessInstanceTaskList.vue'
+import TaskUpdateAssigneeForm from './detail/TaskUpdateAssigneeForm.vue'
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+// const { t } = useI18n() // 国际化
 const { proxy } = getCurrentInstance() as any
 
 // ========== 审批信息 ==========
@@ -262,88 +247,85 @@ const detailForm = ref({
 const tasksLoad = ref(true)
 const tasks = ref<any[]>([])
 
-const getTimelineItemIcon = (item) => {
-  if (item.result === 1) {
-    return 'el-icon-time'
-  }
-  if (item.result === 2) {
-    return 'el-icon-check'
-  }
-  if (item.result === 3) {
-    return 'el-icon-close'
-  }
-  if (item.result === 4) {
-    return 'el-icon-remove-outline'
-  }
-  return ''
-}
-const getTimelineItemType = (item) => {
-  if (item.result === 1) {
-    return 'primary'
-  }
-  if (item.result === 2) {
-    return 'success'
-  }
-  if (item.result === 3) {
-    return 'danger'
-  }
-  if (item.result === 4) {
-    return 'info'
-  }
-  return ''
-}
+// const getTimelineItemIcon = (item) => {
+//   if (item.result === 1) {
+//     return 'el-icon-time'
+//   }
+//   if (item.result === 2) {
+//     return 'el-icon-check'
+//   }
+//   if (item.result === 3) {
+//     return 'el-icon-close'
+//   }
+//   if (item.result === 4) {
+//     return 'el-icon-remove-outline'
+//   }
+//   return ''
+// }
+// const getTimelineItemType = (item) => {
+//   if (item.result === 1) {
+//     return 'primary'
+//   }
+//   if (item.result === 2) {
+//     return 'success'
+//   }
+//   if (item.result === 3) {
+//     return 'danger'
+//   }
+//   if (item.result === 4) {
+//     return 'info'
+//   }
+//   return ''
+// }
 
 // ========== 审批记录 ==========
-const updateAssigneeVisible = ref(false)
-const updateAssigneeLoading = ref(false)
-const updateAssigneeForm = ref({
-  id: undefined,
-  assigneeUserId: undefined
-})
-const updateAssigneeRules = ref({
-  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
-})
-const updateAssigneeFormRef = ref()
+// const updateAssigneeVisible = ref(false)
+// const updateAssigneeLoading = ref(false)
+// const updateAssigneeForm = ref({
+//   id: undefined,
+//   assigneeUserId: undefined
+// })
+// const updateAssigneeRules = ref({
+//   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
+// })
+// const updateAssigneeFormRef = ref()
 const userOptions = ref<any[]>([])
 
 // 处理转派审批人
-const handleUpdateAssignee = (task) => {
-  // 设置表单
-  resetUpdateAssigneeForm()
-  updateAssigneeForm.value.id = task.id
-  // 设置为打开
-  updateAssigneeVisible.value = true
+const taskUpdateAssigneeFormRef = ref()
+const openTaskUpdateAssigneeForm = (id: string) => {
+  taskUpdateAssigneeFormRef.value.open(id)
 }
 
 // 提交转派审批人
-const submitUpdateAssigneeForm = async () => {
-  // 1. 校验表单
-  const elForm = unref(updateAssigneeFormRef)
-  if (!elForm) return
-  const valid = await elForm.validate()
-  if (!valid) return
+// const submitUpdateAssigneeForm = async () => {
+//   // 1. 校验表单
+//   const elForm = unref(updateAssigneeFormRef)
+//   if (!elForm) return
+//   const valid = await elForm.validate()
+//   if (!valid) return
 
-  // 2.1 提交审批
-  updateAssigneeLoading.value = true
-  try {
-    await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
-    // 2.2 设置为隐藏
-    updateAssigneeVisible.value = false
-    // 加载最新数据
-    getDetail()
-  } finally {
-    updateAssigneeLoading.value = false
-  }
-}
+//   // 2.1 提交审批
+//   updateAssigneeLoading.value = true
+//   try {
+//     await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
+//     // 2.2 设置为隐藏
+//     updateAssigneeVisible.value = false
+//     // 加载最新数据
+//     getDetail()
+//   } finally {
+//     updateAssigneeLoading.value = false
+//   }
+// }
 
 // 重置转派审批人表单
-const resetUpdateAssigneeForm = () => {
-  updateAssigneeForm.value = {
-    id: undefined,
-    assigneeUserId: undefined
-  }
-  updateAssigneeFormRef.value?.resetFields()
-}
+// const resetUpdateAssigneeForm = () => {
+//   updateAssigneeForm.value = {
+//     id: undefined,
+//     assigneeUserId: undefined
+//   }
+//   updateAssigneeFormRef.value?.resetFields()
+// }
 
 /** 处理审批退回的操作 */
 const handleDelegate = async (task) => {
@@ -368,9 +350,9 @@ const handleBack = async (task) => {
 
 // ========== 高亮流程图 ==========
 const bpmnXML = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
+// const bpmnControlForm = ref({
+//   prefix: 'flowable'
+// })
 const activityList = ref([])
 
 // ========== 初始化 ==========
@@ -382,7 +364,7 @@ onMounted(() => {
     userOptions.value.push(...data)
   })
 })
-
+const autoComponent = ref(null) // 异步组件
 const getDetail = () => {
   // 1. 获得流程实例相关
   processInstanceLoading.value = true
@@ -393,6 +375,7 @@ const getDetail = () => {
         return
       }
       processInstance.value = data
+      autoComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
 
       // 设置表单信息
       const processDefinition = data.processDefinition
@@ -478,7 +461,7 @@ const getDetail = () => {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .my-process-designer {
   height: calc(100vh - 200px);
 }
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index da4b8389..de0d3ef8 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -134,7 +134,7 @@
                 :check-strictly="!checkStrictly"
                 :props="defaultProps"
                 :data="treeOptions"
-                empty-text="加载中，请稍后"
+                empty-text="加载中，请稍候"
               />
             </el-card>
           </el-form-item> </el-col
diff --git a/src/views/system/role/role.data.ts b/src/views/system/role/role.data.ts
index d55b5e21..6714fb26 100644
--- a/src/views/system/role/role.data.ts
+++ b/src/views/system/role/role.data.ts
@@ -9,19 +9,12 @@ export const rules = reactive({
 })
 // CrudSchema
 const crudSchemas = reactive<VxeCrudSchema>({
-  // primaryKey: 'id',
-  // primaryTitle: '角色编号',
-  // primaryType: 'seq',
+  primaryKey: 'id',
+  primaryTitle: '角色编号',
+  primaryType: 'id',
   action: true,
   actionWidth: '400px',
   columns: [
-    {
-      title: '角色编号',
-      field: 'id',
-      table: {
-        width: 200
-      }
-    },
     {
       title: '角色名称',
       field: 'name',
diff --git a/types/global.d.ts b/types/global.d.ts
index 5e292687..60ad11a6 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -19,7 +19,17 @@ declare global {
     | 'application/x-www-form-urlencoded'
     | 'multipart/form-data'
 
-  type AxiosMethod = 'get' | 'post' | 'delete' | 'put' | 'GET' | 'POST' | 'DELETE' | 'PUT'
+  type AxiosMethod =
+    | 'get'
+    | 'post'
+    | 'delete'
+    | 'put'
+    | 'patch'
+    | 'GET'
+    | 'POST'
+    | 'DELETE'
+    | 'PUT'
+    | 'PATCH'
 
   type AxiosResponseType = 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'