Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into feature/iot

# Conflicts:
#	pnpm-lock.yaml
#	src/utils/index.ts

src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue

@@ -11,17 +11,17 @@
         <el-input
           type="textarea"
           v-model="formData.systemMessage"
-          rows="4"
+          :rows="4"
           placeholder="请输入角色设定"
         />
       </el-form-item>
       <el-form-item label="模型" prop="modelId">
         <el-select v-model="formData.modelId" placeholder="请选择模型">
           <el-option
-            v-for="chatModel in chatModelList"
-            :key="chatModel.id"
-            :label="chatModel.name"
-            :value="chatModel.id"
+            v-for="model in models"
+            :key="model.id"
+            :label="model.name"
+            :value="model.id"
           />
         </el-select>
       </el-form-item>
@@ -32,6 +32,7 @@
           :min="0"
           :max="2"
           :precision="2"
+          class="!w-1/1"
         />
       </el-form-item>
       <el-form-item label="回复数 Token 数" prop="maxTokens">
@@ -39,7 +40,8 @@
           v-model="formData.maxTokens"
           placeholder="请输入回复数 Token 数"
           :min="0"
-          :max="4096"
+          :max="8192"
+          class="!w-1/1"
         />
       </el-form-item>
       <el-form-item label="上下文数量" prop="maxContexts">
@@ -48,6 +50,7 @@
           placeholder="请输入上下文数量"
           :min="0"
           :max="20"
+          class="!w-1/1"
         />
       </el-form-item>
     </el-form>
@@ -58,9 +61,9 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { CommonStatusEnum } from '@/utils/constants'
-import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
 import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
+import { AiModelTypeEnum } from '@/views/ai/utils/constants'
 
 /** AI 聊天对话的更新表单 */
 defineOptions({ name: 'ChatConversationUpdateForm' })
@@ -85,7 +88,7 @@ const formRules = reactive({
   maxContexts: [{ required: true, message: '上下文数量不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const chatModelList = ref([] as ChatModelVO[]) // 聊天模型列表
+const models = ref([] as ModelVO[]) // 聊天模型列表
 
 /** 打开弹窗 */
 const open = async (id: number) => {
@@ -107,7 +110,7 @@ const open = async (id: number) => {
     }
   }
   // 获得下拉数据
-  chatModelList.value = await ChatModelApi.getChatModelSimpleList(CommonStatusEnum.ENABLE)
+  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.CHAT)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 

src/views/ai/chat/index/components/message/MessageKnowledge.vue

@@ -0,0 +1,104 @@
+<!-- 知识引用组件 -->
+<template>
+  <!-- 知识引用列表 -->
+  <div v-if="segments && segments.length > 0" class="mt-10px p-10px rounded-8px bg-[#f5f5f5]">
+    <div class="text-14px text-[#666] mb-8px flex items-center">
+      <Icon icon="ep:document" class="mr-5px" /> 知识引用
+    </div>
+    <div class="flex flex-wrap gap-8px">
+      <div
+        v-for="(doc, index) in documentList"
+        :key="index"
+        class="p-8px px-12px bg-white rounded-6px cursor-pointer transition-all hover:bg-[#e6f4ff]"
+        @click="handleClick(doc)"
+      >
+        <div class="text-14px text-[#333] mb-4px">
+          {{ doc.title }}
+          <span class="text-12px text-[#999] ml-4px">（{{ doc.segments.length }} 条）</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 知识引用详情弹窗 -->
+  <el-popover
+    v-model:visible="dialogVisible"
+    :width="600"
+    trigger="click"
+    placement="top-start"
+    :offset="55"
+    popper-class="knowledge-popover"
+  >
+    <template #reference>
+      <div ref="documentRef"></div>
+    </template>
+    <template #default>
+      <div class="text-16px font-bold mb-12px">{{ document?.title }}</div>
+      <div class="max-h-[60vh] overflow-y-auto">
+        <div
+          v-for="(segment, index) in document?.segments"
+          :key="index"
+          class="p-12px border-b-solid border-b-[#eee] last:border-b-0"
+        >
+          <div
+            class="block mb-8px px-8px py-2px bg-[#f5f5f5] rounded-4px text-12px text-[#666] w-fit"
+          >
+            分段 {{ segment.id }}
+          </div>
+          <div class="text-14px leading-[1.6] text-[#333] mt-[10px]">
+            {{ segment.content }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  segments: {
+    id: number
+    documentId: number
+    documentName: string
+    content: string
+  }[]
+}>()
+
+const document = ref<{
+  id: number
+  title: string
+  segments: {
+    id: number
+    content: string
+  }[]
+} | null>(null) // 知识库文档列表
+const dialogVisible = ref(false) // 知识引用详情弹窗
+const documentRef = ref<HTMLElement>() // 知识引用详情弹窗 Ref
+
+/** 按照 document 聚合 segments */
+const documentList = computed(() => {
+  if (!props.segments) return []
+
+  const docMap = new Map()
+  props.segments.forEach((segment) => {
+    if (!docMap.has(segment.documentId)) {
+      docMap.set(segment.documentId, {
+        id: segment.documentId,
+        title: segment.documentName,
+        segments: []
+      })
+    }
+    docMap.get(segment.documentId).segments.push({
+      id: segment.id,
+      content: segment.content
+    })
+  })
+  return Array.from(docMap.values())
+})
+
+/** 点击 document 处理 */
+const handleClick = (doc: any) => {
+  document.value = doc
+  dialogVisible.value = true
+}
+</script>

src/views/ai/chat/index/components/message/MessageList.vue

@@ -12,6 +12,7 @@
           </div>
           <div class="left-text-container" ref="markdownViewRef">
             <MarkdownView class="left-text" :content="item.content" />
+            <MessageKnowledge v-if="item.segments" :segments="item.segments" />
           </div>
           <div class="left-btns">
             <el-button class="btn-cus" link @click="copyContent(item.content)">
@@ -62,6 +63,7 @@
 import { PropType } from 'vue'
 import { formatDate } from '@/utils/formatTime'
 import MarkdownView from '@/components/MarkdownView/index.vue'
+import MessageKnowledge from './MessageKnowledge.vue'
 import { useClipboard } from '@vueuse/core'
 import { ArrowDownBold, Edit, RefreshRight } from '@element-plus/icons-vue'
 import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'

src/views/ai/chat/index/components/role/RoleList.vue

@@ -41,9 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import {ChatRoleVO} from '@/api/ai/model/chatRole'
-import {PropType, ref} from 'vue'
-import {More} from '@element-plus/icons-vue'
+import { ChatRoleVO } from '@/api/ai/model/chatRole'
+import { PropType, ref } from 'vue'
+import { More } from '@element-plus/icons-vue'
 
 const tabsRef = ref<any>() // tabs ref
 

src/views/ai/chat/manager/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
+
   <ContentWrap>
     <el-tabs>
       <el-tab-pane label="对话列表">

src/views/ai/image/index/components/common/index.vue

@@ -2,11 +2,11 @@
 <template>
   <div class="prompt">
     <el-text tag="b">画面描述</el-text>
-    <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
+    <el-text tag="p">建议使用“形容词 + 动词 + 风格”的格式，使用“，”隔开</el-text>
     <el-input
       v-model="prompt"
       maxlength="1024"
-      rows="5"
+      :rows="5"
       class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
@@ -57,8 +57,13 @@
       <el-text tag="b">模型</el-text>
     </div>
     <el-space wrap class="group-item-body">
-      <el-select v-model="model" placeholder="Select" size="large" class="!w-350px">
-        <el-option v-for="item in models" :key="item.key" :label="item.name" :value="item.key" />
+      <el-select v-model="modelId" placeholder="Select" size="large" class="!w-350px">
+        <el-option
+          v-for="item in platformModels"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
       </el-select>
     </el-space>
   </div>
@@ -72,25 +77,34 @@
     </el-space>
   </div>
   <div class="btns">
-    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
+    <el-button
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
       {{ drawIn ? '生成中' : '生成内容' }}
     </el-button>
   </div>
 </template>
 <script setup lang="ts">
 import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
-import {
-  AiPlatformEnum,
-  ChatGlmModels,
-  ImageHotWords,
-  ImageModelVO,
-  OtherPlatformEnum,
-  QianFanModels,
-  TongYiWanXiangModels
-} from '@/views/ai/utils/constants'
+import { AiPlatformEnum, ImageHotWords, OtherPlatformEnum } from '@/views/ai/utils/constants'
+import { ModelVO } from '@/api/ai/model/model'
 
 const message = useMessage() // 消息弹窗
 
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<ModelVO>,
+    default: () => [] as ModelVO[]
+  }
+})
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+
 // 定义属性
 const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
@@ -99,10 +113,8 @@ const prompt = ref<string>('') // 提示词
 const width = ref<number>(512) // 图片宽度
 const height = ref<number>(512) // 图片高度
 const otherPlatform = ref<string>(AiPlatformEnum.TONG_YI) // 平台
-const models = ref<ImageModelVO[]>(TongYiWanXiangModels) // 模型  TongYiWanXiangModels、QianFanModels
-const model = ref<string>(models.value[0].key) // 模型
-
-const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+const platformModels = ref<ModelVO[]>([]) // 模型列表
+const modelId = ref<number>() // 选中的模型
 
 /** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
@@ -125,11 +137,11 @@ const handleGenerateImage = async () => {
     // 加载中
     drawIn.value = true
     // 回调
-    emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION)
+    emits('onDrawStart', otherPlatform.value)
     // 发送请求
     const form = {
       platform: otherPlatform.value,
-      model: model.value, // 模型
+      modelId: modelId.value, // 模型
       prompt: prompt.value, // 提示词
       width: width.value, // 图片宽度
       height: height.value, // 图片高度
@@ -138,7 +150,7 @@ const handleGenerateImage = async () => {
     await ImageApi.drawImage(form)
   } finally {
     // 回调
-    emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION)
+    emits('onDrawComplete', otherPlatform.value)
     // 加载结束
     drawIn.value = false
   }
@@ -153,33 +165,29 @@ const settingValues = async (detail: ImageVO) => {
 
 /** 平台切换 */
 const handlerPlatformChange = async (platform: string) => {
-  // 切换平台，切换模型、风格
-  if (AiPlatformEnum.TONG_YI === platform) {
-    models.value = TongYiWanXiangModels
-  } else if (AiPlatformEnum.YI_YAN === platform) {
-    models.value = QianFanModels
-  } else if (AiPlatformEnum.ZHI_PU === platform) {
-    models.value = ChatGlmModels
+  // 根据选择的平台筛选模型
+  platformModels.value = props.models.filter((item: ModelVO) => item.platform === platform)
+
+  // 切换平台，默认选择一个模型
+  if (platformModels.value.length > 0) {
+    modelId.value = platformModels.value[0].id // 使用 model 属性作为值
   } else {
-    models.value = []
-  }
-  // 切换平台，默认选择一个风格
-  if (models.value.length > 0) {
-    model.value = models.value[0].key
-  } else {
-    model.value = ''
+    modelId.value = undefined
   }
 }
 
+/** 监听 models 变化 */
+watch(
+  () => props.models,
+  () => {
+    handlerPlatformChange(otherPlatform.value)
+  },
+  { immediate: true, deep: true }
+)
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
-// 提示词
-.prompt {
-}
-
-// 热词
 .hot-words {
   display: flex;
   flex-direction: column;

src/views/ai/image/index/components/dall3/index.vue

@@ -2,11 +2,11 @@
 <template>
   <div class="prompt">
     <el-text tag="b">画面描述</el-text>
-    <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
+    <el-text tag="p">建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</el-text>
     <el-input
       v-model="prompt"
       maxlength="1024"
-      rows="5"
+      :rows="5"
       class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
@@ -82,7 +82,14 @@
     </el-space>
   </div>
   <div class="btns">
-    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
+    <el-button
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
       {{ drawIn ? '生成中' : '生成内容' }}
     </el-button>
   </div>
@@ -95,11 +102,22 @@ import {
   ImageHotWords,
   Dall3SizeList,
   ImageModelVO,
-  AiPlatformEnum
+  AiPlatformEnum,
+  ImageSizeVO
 } from '@/views/ai/utils/constants'
+import { ModelVO } from '@/api/ai/model/model'
 
 const message = useMessage() // 消息弹窗
 
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<ModelVO>,
+    default: () => [] as ModelVO[]
+  }
+})
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+
 // 定义属性
 const prompt = ref<string>('') // 提示词
 const drawIn = ref<boolean>(false) // 生成中
@@ -108,8 +126,6 @@ const selectModel = ref<string>('dall-e-3') // 模型
 const selectSize = ref<string>('1024x1024') // 选中 size
 const style = ref<string>('vivid') // style 样式
 
-const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
-
 /** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
   // 情况一：取消选中
@@ -126,6 +142,27 @@ const handleHotWordClick = async (hotWord: string) => {
 /** 选择 model 模型 */
 const handleModelClick = async (model: ImageModelVO) => {
   selectModel.value = model.key
+  // 可以在这里添加模型特定的处理逻辑
+  // 例如，如果未来需要根据不同模型设置不同参数
+  if (model.key === 'dall-e-3') {
+    // DALL-E-3 模型特定的处理
+    style.value = 'vivid' // 默认设置vivid风格
+  } else if (model.key === 'dall-e-2') {
+    // DALL-E-2 模型特定的处理
+    style.value = 'natural' // 如果有其他DALL-E-2适合的默认风格
+  }
+
+  // 更新其他相关参数
+  // 例如可以默认选择最适合当前模型的尺寸
+  const recommendedSize = Dall3SizeList.find(
+    (size) =>
+      (model.key === 'dall-e-3' && size.key === '1024x1024') ||
+      (model.key === 'dall-e-2' && size.key === '512x512')
+  )
+
+  if (recommendedSize) {
+    selectSize.value = recommendedSize.key
+  }
 }
 
 /** 选择 style 样式  */
@@ -140,6 +177,15 @@ const handleSizeClick = async (imageSize: ImageSizeVO) => {
 
 /**  图片生产  */
 const handleGenerateImage = async () => {
+  // 从 models 中查找匹配的模型
+  const matchedModel = props.models.find(
+    (item) => item.model === selectModel.value && item.platform === AiPlatformEnum.OPENAI
+  )
+  if (!matchedModel) {
+    message.error('该模型不可用，请选择其它模型')
+    return
+  }
+
   // 二次确认
   await message.confirm(`确认生成内容?`)
   try {
@@ -151,7 +197,8 @@ const handleGenerateImage = async () => {
     const form = {
       platform: AiPlatformEnum.OPENAI,
       prompt: prompt.value, // 提示词
-      model: selectModel.value, // 模型
+      modelId: matchedModel.id, // 使用匹配到的模型
+      style: style.value, // 图像生成的风格
       width: imageSize.width, // size 不能为空
       height: imageSize.height, // size 不能为空
       options: {
@@ -183,10 +230,6 @@ const settingValues = async (detail: ImageVO) => {
 defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
-// 提示词
-.prompt {
-}
-
 // 热词
 .hot-words {
   display: flex;

src/views/ai/image/index/components/midjourney/index.vue

@@ -6,7 +6,7 @@
     <el-input
       v-model="prompt"
       maxlength="1024"
-      rows="5"
+      :rows="5"
       class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
@@ -95,7 +95,13 @@
     </el-space>
   </div>
   <div class="btns">
-    <el-button type="primary" size="large" round @click="handleGenerateImage">
+    <el-button
+      type="primary"
+      size="large"
+      round
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
       {{ drawIn ? '生成中' : '生成内容' }}
     </el-button>
   </div>
@@ -112,9 +118,19 @@ import {
   MidjourneyVersions,
   NijiVersionList
 } from '@/views/ai/utils/constants'
+import { ModelVO } from '@/api/ai/model/model'
 
 const message = useMessage() // 消息弹窗
 
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<ModelVO>,
+    default: () => [] as ModelVO[]
+  }
+})
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+
 // 定义属性
 const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
@@ -125,7 +141,6 @@ const selectModel = ref<string>('midjourney') // 选中的模型
 const selectSize = ref<string>('1:1') // 选中 size
 const selectVersion = ref<any>('6.0') // 选中的 version
 const versionList = ref<any>(MidjourneyVersions) // version 列表
-const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
 
 /** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
@@ -158,6 +173,15 @@ const handleModelClick = async (model: ImageModelVO) => {
 
 /** 图片生成 */
 const handleGenerateImage = async () => {
+  // 从 models 中查找匹配的模型
+  const matchedModel = props.models.find(
+    (item) => item.model === selectModel.value && item.platform === AiPlatformEnum.MIDJOURNEY
+  )
+  if (!matchedModel) {
+    message.error('该模型不可用，请选择其它模型')
+    return
+  }
+
   // 二次确认
   await message.confirm(`确认生成内容?`)
   try {
@@ -171,7 +195,7 @@ const handleGenerateImage = async () => {
     ) as ImageSizeVO
     const req = {
       prompt: prompt.value,
-      model: selectModel.value,
+      modelId: matchedModel.id,
       width: imageSize.width,
       height: imageSize.height,
       version: selectVersion.value,

src/views/ai/image/index/components/stableDiffusion/index.vue

@@ -2,11 +2,11 @@
 <template>
   <div class="prompt">
     <el-text tag="b">画面描述</el-text>
-    <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
+    <el-text tag="p">建议使用“形容词 + 动词 + 风格”的格式，使用“，”隔开</el-text>
     <el-input
       v-model="prompt"
       maxlength="1024"
-      rows="5"
+      :rows="5"
       class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
@@ -128,7 +128,14 @@
     </el-space>
   </div>
   <div class="btns">
-    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
+    <el-button
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
       {{ drawIn ? '生成中' : '生成内容' }}
     </el-button>
   </div>
@@ -143,9 +150,19 @@ import {
   StableDiffusionSamplers,
   StableDiffusionStylePresets
 } from '@/views/ai/utils/constants'
+import { ModelVO } from '@/api/ai/model/model'
 
 const message = useMessage() // 消息弹窗
 
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<ModelVO>,
+    default: () => [] as ModelVO[]
+  }
+})
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+
 // 定义属性
 const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
@@ -160,8 +177,6 @@ const scale = ref<number>(7.5) // 引导系数
 const clipGuidancePreset = ref<string>('NONE') // 文本提示相匹配的图像(clip_guidance_preset) 简称 CLIP
 const stylePreset = ref<string>('3d-model') // 风格
 
-const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
-
 /** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
   // 情况一：取消选中
@@ -177,6 +192,16 @@ const handleHotWordClick = async (hotWord: string) => {
 
 /** 图片生成 */
 const handleGenerateImage = async () => {
+  // 从 models 中查找匹配的模型
+  const selectModel = 'stable-diffusion-v1-6'
+  const matchedModel = props.models.find(
+    (item) => item.model === selectModel && item.platform === AiPlatformEnum.STABLE_DIFFUSION
+  )
+  if (!matchedModel) {
+    message.error('该模型不可用，请选择其它模型')
+    return
+  }
+
   // 二次确认
   if (hasChinese(prompt.value)) {
     message.alert('暂不支持中文！')
@@ -191,8 +216,7 @@ const handleGenerateImage = async () => {
     emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION)
     // 发送请求
     const form = {
-      platform: AiPlatformEnum.STABLE_DIFFUSION,
-      model: 'stable-diffusion-v1-6',
+      modelId: matchedModel.id,
       prompt: prompt.value, // 提示词
       width: width.value, // 图片宽度
       height: height.value, // 图片高度

src/views/ai/image/index/index.vue

@@ -6,21 +6,28 @@
         <el-segmented v-model="selectPlatform" :options="platformOptions" />
       </div>
       <div class="modal-switch-container">
+        <Common
+          v-if="selectPlatform === 'common'"
+          ref="commonRef"
+          :models="models"
+          @on-draw-complete="handleDrawComplete"
+        />
         <Dall3
           v-if="selectPlatform === AiPlatformEnum.OPENAI"
           ref="dall3Ref"
+          :models="models"
           @on-draw-start="handleDrawStart"
           @on-draw-complete="handleDrawComplete"
         />
-        <Midjourney v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY" ref="midjourneyRef" />
+        <Midjourney
+          v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
+          ref="midjourneyRef"
+          :models="models"
+        />
         <StableDiffusion
           v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
           ref="stableDiffusionRef"
-          @on-draw-complete="handleDrawComplete"
-        />
-        <Other
-          v-if="selectPlatform === 'other'"
-          ref="otherRef"
+          :models="models"
           @on-draw-complete="handleDrawComplete"
         />
       </div>
@@ -38,17 +45,23 @@ import { ImageVO } from '@/api/ai/image'
 import Dall3 from './components/dall3/index.vue'
 import Midjourney from './components/midjourney/index.vue'
 import StableDiffusion from './components/stableDiffusion/index.vue'
-import Other from './components/other/index.vue'
+import Common from './components/common/index.vue'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
+import { AiModelTypeEnum } from '@/views/ai/utils/constants'
 
 const imageListRef = ref<any>() // image 列表 ref
 const dall3Ref = ref<any>() // dall3(openai) ref
 const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
-const otherRef = ref<any>() // stable diffusion ref
+const commonRef = ref<any>() // stable diffusion ref
 
 // 定义属性
-const selectPlatform = ref(AiPlatformEnum.MIDJOURNEY)
+const selectPlatform = ref('common') // 选中的平台
 const platformOptions = [
+  {
+    label: '通用',
+    value: 'common'
+  },
   {
     label: 'DALL3 绘画',
     value: AiPlatformEnum.OPENAI
@@ -58,15 +71,13 @@ const platformOptions = [
     value: AiPlatformEnum.MIDJOURNEY
   },
   {
-    label: 'Stable Diffusion',
+    label: 'SD 绘图',
     value: AiPlatformEnum.STABLE_DIFFUSION
-  },
-  {
-    label: '其它',
-    value: 'other'
   }
 ]
 
+const models = ref<ModelVO[]>([]) // 模型列表
+
 /** 绘画 start  */
 const handleDrawStart = async (platform: string) => {}
 
@@ -75,7 +86,7 @@ const handleDrawComplete = async (platform: string) => {
   await imageListRef.value.getImageList()
 }
 
-/**  重新生成：将画图详情填充到对应平台  */
+/** 重新生成：将画图详情填充到对应平台 */
 const handleRegeneration = async (image: ImageVO) => {
   // 切换平台
   selectPlatform.value = image.platform
@@ -90,6 +101,12 @@ const handleRegeneration = async (image: ImageVO) => {
   }
   // TODO @fan：貌似 other 重新设置不行？
 }
+
+/** 组件挂载的时候 */
+onMounted(async () => {
+  // 获取模型列表
+  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.IMAGE)
+})
 </script>
 
 <style scoped lang="scss">
@@ -109,10 +126,7 @@ const handleRegeneration = async (image: ImageVO) => {
     display: flex;
     flex-direction: column;
     padding: 20px;
-    width: 350px;
-
-    .segmented {
-    }
+    width: 390px;
 
     .segmented .el-segmented {
       --el-border-radius-base: 16px;

src/views/ai/image/manager/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form

src/views/ai/knowledge/document/form/ProcessStep.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <!-- 文件处理列表 -->
+    <div class="mt-15px grid grid-cols-1 gap-2">
+      <div
+        v-for="(file, index) in modelValue.list"
+        :key="index"
+        class="flex items-center py-4px px-12px border-l-4 border-l-[#409eff] rounded-sm shadow-sm hover:bg-[#ecf5ff] transition-all duration-300"
+      >
+        <!-- 文件图标和名称 -->
+        <div class="flex items-center min-w-[200px] mr-10px">
+          <Icon icon="ep:document" class="mr-8px text-[#409eff]" />
+          <span class="text-[13px] text-[#303133] break-all">{{ file.name }}</span>
+        </div>
+
+        <!-- 处理进度 -->
+        <div class="flex-1">
+          <el-progress
+            :percentage="file.progress || 0"
+            :stroke-width="10"
+            :status="isProcessComplete(file) ? 'success' : ''"
+          />
+        </div>
+
+        <!-- 分段数量 -->
+        <div class="ml-10px text-[13px] text-[#606266]">
+          分段数量：{{ file.count ? file.count : '-' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部完成按钮 -->
+    <div class="flex justify-end mt-20px">
+      <el-button
+        :type="allProcessComplete ? 'success' : 'primary'"
+        :disabled="!allProcessComplete"
+        @click="handleComplete"
+      >
+        完成
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { KnowledgeSegmentApi } from '@/api/ai/knowledge/segment'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const parent = inject('parent') as any
+const pollingTimer = ref<number | null>(null) // 轮询定时器 ID，用于跟踪和清除轮询进程
+
+/** 判断文件处理是否完成 */
+const isProcessComplete = (file) => {
+  return file.progress === 100
+}
+
+/** 判断所有文件是否都处理完成 */
+const allProcessComplete = computed(() => {
+  return props.modelValue.list.every((file) => isProcessComplete(file))
+})
+
+/** 完成按钮点击事件处理 */
+const handleComplete = () => {
+  if (parent?.exposed?.handleBack) {
+    parent.exposed.handleBack()
+  }
+}
+
+/** 获取文件处理进度 */
+const getProcessList = async () => {
+  try {
+    // 1. 调用 API 获取处理进度
+    const documentIds = props.modelValue.list.filter((item) => item.id).map((item) => item.id)
+    if (documentIds.length === 0) {
+      return
+    }
+    const result = await KnowledgeSegmentApi.getKnowledgeSegmentProcessList(documentIds)
+
+    // 2.1更新进度
+    const updatedList = props.modelValue.list.map((file) => {
+      const processInfo = result.find((item) => item.documentId === file.id)
+      if (processInfo) {
+        // 计算进度百分比：已嵌入数量 / 总数量 * 100
+        const progress =
+          processInfo.embeddingCount && processInfo.count
+            ? Math.floor((processInfo.embeddingCount / processInfo.count) * 100)
+            : 0
+        return {
+          ...file,
+          progress: progress,
+          count: processInfo.count || 0
+        }
+      }
+      return file
+    })
+
+    // 2.2 更新数据
+    emit('update:modelValue', {
+      ...props.modelValue,
+      list: updatedList
+    })
+
+    // 3. 如果未完成，继续轮询
+    if (!updatedList.every((file) => isProcessComplete(file))) {
+      pollingTimer.value = window.setTimeout(getProcessList, 3000)
+    }
+  } catch (error) {
+    // 出错后也继续轮询
+    console.error('获取处理进度失败:', error)
+    pollingTimer.value = window.setTimeout(getProcessList, 5000)
+  }
+}
+
+/** 组件挂载时开始轮询 */
+onMounted(() => {
+  // 1. 初始化进度为 0
+  const initialList = props.modelValue.list.map((file) => ({
+    ...file,
+    progress: 0
+  }))
+
+  emit('update:modelValue', {
+    ...props.modelValue,
+    list: initialList
+  })
+
+  // 2. 开始轮询获取进度
+  getProcessList()
+})
+
+/** 组件卸载前清除轮询 */
+onBeforeUnmount(() => {
+  // 1. 清除定时器
+  if (pollingTimer.value) {
+    clearTimeout(pollingTimer.value)
+    pollingTimer.value = null
+  }
+})
+</script>

src/views/ai/knowledge/document/form/SplitStep.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <!-- 上部分段设置部分 -->
+    <div class="mb-20px">
+      <div class="mb-20px flex justify-between items-center">
+        <div class="text-16px font-bold flex items-center">
+          分段设置
+          <el-tooltip
+            content="系统会自动将文档内容分割成多个段落，您可以根据需要调整分段方式和内容。"
+            placement="top"
+          >
+            <Icon icon="ep:warning" class="ml-5px text-gray-400" />
+          </el-tooltip>
+        </div>
+        <div>
+          <el-button type="primary" plain size="small" @click="handleAutoSegment">
+            预览分段
+          </el-button>
+        </div>
+      </div>
+
+      <div class="segment-settings mb-20px">
+        <el-form label-width="120px">
+          <el-form-item label="最大 Token 数">
+            <el-input-number v-model="modelData.segmentMaxTokens" :min="1" :max="2048" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 下部文件预览部分 -->
+    <div class="mb-10px">
+      <div class="text-16px font-bold mb-10px">分段预览</div>
+
+      <!-- 文件选择器 -->
+      <div class="file-selector mb-10px">
+        <el-dropdown v-if="modelData.list && modelData.list.length > 0" trigger="click">
+          <div class="flex items-center cursor-pointer">
+            <Icon icon="ep:document" class="text-danger mr-5px" />
+            <span>{{ currentFile?.name || '请选择文件' }}</span>
+            <span v-if="currentFile?.segments" class="ml-5px text-gray-500 text-12px">
+              ({{ currentFile.segments.length }}个分片)
+            </span>
+            <Icon icon="ep:arrow-down" class="ml-5px" />
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="(file, index) in modelData.list"
+                :key="index"
+                @click="selectFile(index)"
+              >
+                {{ file.name }}
+                <span v-if="file.segments" class="ml-5px text-gray-500 text-12px">
+                  ({{ file.segments.length }}个分片)
+                </span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <div v-else class="text-gray-400">暂无上传文件</div>
+      </div>
+
+      <!-- 文件内容预览 -->
+      <div class="file-preview bg-gray-50 p-15px rounded-md max-h-600px overflow-y-auto">
+        <div v-if="splitLoading" class="flex justify-center items-center py-20px">
+          <Icon icon="ep:loading" class="is-loading" />
+          <span class="ml-10px">正在加载分段内容...</span>
+        </div>
+        <template
+          v-else-if="currentFile && currentFile.segments && currentFile.segments.length > 0"
+        >
+          <div v-for="(segment, index) in currentFile.segments" :key="index" class="mb-10px">
+            <div class="text-gray-500 text-12px mb-5px">
+              分片-{{ index + 1 }} · {{ segment.contentLength || 0 }} 字符数 ·
+              {{ segment.tokens || 0 }} Token
+            </div>
+            <div class="bg-white p-10px rounded-md">{{ segment.content }}</div>
+          </div>
+        </template>
+        <el-empty v-else description="暂无预览内容" />
+      </div>
+    </div>
+
+    <!-- 添加底部按钮 -->
+    <div class="mt-20px flex justify-between">
+      <div>
+        <el-button v-if="!modelData.id" @click="handlePrevStep">上一步</el-button>
+      </div>
+      <div>
+        <el-button type="primary" :loading="submitLoading" @click="handleSave">
+          保存并处理
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onMounted, PropType, ref } from 'vue'
+import { Icon } from '@/components/Icon'
+import { KnowledgeSegmentApi } from '@/api/ai/knowledge/segment'
+import { useMessage } from '@/hooks/web/useMessage'
+import { KnowledgeDocumentApi } from '@/api/ai/knowledge/document'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<any>,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const message = useMessage() // 消息提示
+const parent = inject('parent', null) // 获取父组件实例
+
+const modelData = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+}) // 表单数据
+
+const splitLoading = ref(false) // 分段加载状态
+const currentFile = ref<any>(null) // 当前选中的文件
+const submitLoading = ref(false) // 提交按钮加载状态
+
+/** 选择文件 */
+const selectFile = async (index: number) => {
+  currentFile.value = modelData.value.list[index]
+  await splitContent(currentFile.value)
+}
+
+/** 获取文件分段内容 */
+const splitContent = async (file: any) => {
+  if (!file || !file.url) {
+    message.warning('文件 URL 不存在')
+    return
+  }
+
+  splitLoading.value = true
+  try {
+    // 调用后端分段接口，获取文档的分段内容、字符数和 Token 数
+    file.segments = await KnowledgeSegmentApi.splitContent(
+      file.url,
+      modelData.value.segmentMaxTokens
+    )
+  } catch (error) {
+    console.error('获取分段内容失败:', file, error)
+  } finally {
+    splitLoading.value = false
+  }
+}
+
+/** 处理预览分段 */
+const handleAutoSegment = async () => {
+  // 如果没有选中文件，默认选中第一个
+  if (!currentFile.value && modelData.value.list && modelData.value.list.length > 0) {
+    currentFile.value = modelData.value.list[0]
+  }
+  // 如果没有选中文件，提示请先选择文件
+  if (!currentFile.value) {
+    message.warning('请先选择文件')
+    return
+  }
+
+  // 获取分段内容
+  await splitContent(currentFile.value)
+}
+
+/** 上一步按钮处理 */
+const handlePrevStep = () => {
+  const parentEl = parent || getCurrentInstance()?.parent
+  if (parentEl && typeof parentEl.exposed?.goToPrevStep === 'function') {
+    parentEl.exposed.goToPrevStep()
+  }
+}
+
+/** 保存操作 */
+const handleSave = async () => {
+  // 保存前验证
+  if (!currentFile?.value?.segments || currentFile.value.segments.length === 0) {
+    message.warning('请先预览分段内容')
+    return
+  }
+
+  // 设置按钮加载状态
+  submitLoading.value = true
+  try {
+    if (modelData.value.id) {
+      // 修改场景
+      await KnowledgeDocumentApi.updateKnowledgeDocument({
+        id: modelData.value.id,
+        segmentMaxTokens: modelData.value.segmentMaxTokens
+      })
+    } else {
+      // 新增场景
+      const data = await KnowledgeDocumentApi.createKnowledgeDocumentList({
+        knowledgeId: modelData.value.knowledgeId,
+        segmentMaxTokens: modelData.value.segmentMaxTokens,
+        list: modelData.value.list.map((item: any) => ({
+          name: item.name,
+          url: item.url
+        }))
+      })
+      modelData.value.list.forEach((document: any, index: number) => {
+        document.id = data[index]
+      })
+    }
+
+    // 进入下一步
+    const parentEl = parent || getCurrentInstance()?.parent
+    if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') {
+      parentEl.exposed.goToNextStep()
+    }
+  } catch (error: any) {
+    console.error('保存失败:', modelData.value, error)
+  } finally {
+    // 关闭按钮加载状态
+    submitLoading.value = false
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  // 确保 segmentMaxTokens 存在
+  if (!modelData.value.segmentMaxTokens) {
+    modelData.value.segmentMaxTokens = 500
+  }
+  // 如果没有选中文件，默认选中第一个
+  if (!currentFile.value && modelData.value.list && modelData.value.list.length > 0) {
+    currentFile.value = modelData.value.list[0]
+  }
+
+  // 如果有选中的文件，获取分段内容
+  if (currentFile.value) {
+    await splitContent(currentFile.value)
+  }
+})
+</script>

src/views/ai/knowledge/document/form/UploadStep.vue

@@ -0,0 +1,273 @@
+<template>
+  <el-form ref="formRef" :model="modelData" label-width="0" class="mt-20px">
+    <el-form-item class="mb-20px">
+      <div class="w-full">
+        <div
+          class="w-full border-2 border-dashed border-[#dcdfe6] rounded-md p-20px text-center hover:border-[#409eff]"
+        >
+          <el-upload
+            ref="uploadRef"
+            class="upload-demo"
+            drag
+            :action="uploadUrl"
+            :auto-upload="true"
+            :on-success="handleUploadSuccess"
+            :on-error="handleUploadError"
+            :on-change="handleFileChange"
+            :on-remove="handleFileRemove"
+            :before-upload="beforeUpload"
+            :http-request="httpRequest"
+            :file-list="fileList"
+            :multiple="true"
+            :show-file-list="false"
+            :accept="acceptedFileTypes"
+          >
+            <div class="flex flex-col items-center justify-center py-20px">
+              <Icon icon="ep:upload-filled" class="text-[48px] text-[#c0c4cc] mb-10px" />
+              <div class="el-upload__text text-[16px] text-[#606266]">
+                拖拽文件至此，或者
+                <em class="text-[#409eff] not-italic cursor-pointer">选择文件</em>
+              </div>
+              <div class="el-upload__tip mt-10px text-[#909399] text-[12px]">
+                已支持 {{ supportedFileTypes.join('、') }}，每个文件不超过 {{ maxFileSize }} MB。
+              </div>
+            </div>
+          </el-upload>
+        </div>
+
+        <div
+          v-if="modelData.list && modelData.list.length > 0"
+          class="mt-15px grid grid-cols-1 gap-2"
+        >
+          <div
+            v-for="(file, index) in modelData.list"
+            :key="index"
+            class="flex justify-between items-center py-4px px-12px border-l-4 border-l-[#409eff] rounded-sm shadow-sm hover:bg-[#ecf5ff] transition-all duration-300"
+          >
+            <div class="flex items-center">
+              <Icon icon="ep:document" class="mr-8px text-[#409eff]" />
+              <span class="text-[13px] text-[#303133] break-all">{{ file.name }}</span>
+            </div>
+            <el-button type="danger" link @click="removeFile(index)" class="ml-2">
+              <Icon icon="ep:delete" />
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </el-form-item>
+
+    <!-- 添加下一步按钮 -->
+    <el-form-item>
+      <div class="flex justify-end w-full">
+        <el-button type="primary" @click="handleNextStep" :disabled="!isAllUploaded">
+          下一步
+        </el-button>
+      </div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref, computed, inject, getCurrentInstance, onMounted } from 'vue'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { generateAcceptedFileTypes } from '@/utils'
+import { Icon } from '@/components/Icon'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<any>,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const formRef = ref() // 表单引用
+const uploadRef = ref() // 上传组件引用
+const parent = inject('parent', null) // 获取父组件实例
+const { uploadUrl, httpRequest } = useUpload() // 使用上传组件的钩子
+const message = useMessage() // 消息弹窗
+const fileList = ref([]) // 文件列表
+const uploadingCount = ref(0) // 上传中的文件数量
+
+// 支持的文件类型和大小限制
+const supportedFileTypes = [
+  'TXT',
+  'MARKDOWN',
+  'MDX',
+  'PDF',
+  'HTML',
+  'XLSX',
+  'XLS',
+  'DOC',
+  'DOCX',
+  'CSV',
+  'EML',
+  'MSG',
+  'PPTX',
+  'XML',
+  'EPUB',
+  'PPT',
+  'MD',
+  'HTM'
+]
+const allowedExtensions = supportedFileTypes.map((ext) => ext.toLowerCase()) // 小写的扩展名列表
+const maxFileSize = 15 // 最大文件大小(MB)
+
+// 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型
+const acceptedFileTypes = computed(() => generateAcceptedFileTypes(supportedFileTypes))
+
+/** 表单数据 */
+const modelData = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 确保 list 属性存在 */
+const ensureListExists = () => {
+  if (!props.modelValue.list) {
+    emit('update:modelValue', {
+      ...props.modelValue,
+      list: []
+    })
+  }
+}
+
+/** 是否所有文件都已上传完成 */
+const isAllUploaded = computed(() => {
+  return modelData.value.list && modelData.value.list.length > 0 && uploadingCount.value === 0
+})
+
+/**
+ * 上传前检查文件类型和大小
+ *
+ * @param file 待上传的文件
+ * @returns 是否允许上传
+ */
+const beforeUpload = (file) => {
+  // 1.1 检查文件扩展名
+  const fileName = file.name.toLowerCase()
+  const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1)
+  if (!allowedExtensions.includes(fileExtension)) {
+    message.error('不支持的文件类型！')
+    return false
+  }
+  // 1.2 检查文件大小
+  if (!(file.size / 1024 / 1024 < maxFileSize)) {
+    message.error(`文件大小不能超过 ${maxFileSize} MB！`)
+    return false
+  }
+
+  // 2. 增加上传中的文件计数
+  uploadingCount.value++
+  return true
+}
+
+/**
+ * 文件上传成功处理
+ *
+ * @param response 上传响应
+ * @param file 上传的文件
+ */
+const handleUploadSuccess = (response, file) => {
+  // 添加到文件列表
+  if (response && response.data) {
+    ensureListExists()
+    emit('update:modelValue', {
+      ...props.modelValue,
+      list: [
+        ...props.modelValue.list,
+        {
+          name: file.name,
+          url: response.data
+        }
+      ]
+    })
+  } else {
+    message.error(`文件 ${file.name} 上传失败`)
+  }
+
+  // 减少上传中的文件计数
+  uploadingCount.value = Math.max(0, uploadingCount.value - 1)
+}
+
+/**
+ * 文件上传失败处理
+ *
+ * @param error 错误信息
+ * @param file 上传的文件
+ */
+const handleUploadError = (error, file) => {
+  message.error(`文件 ${file.name} 上传失败: ${error}`)
+  // 减少上传中的文件计数
+  uploadingCount.value = Math.max(0, uploadingCount.value - 1)
+}
+
+/**
+ * 文件变更处理
+ *
+ * @param file 变更的文件
+ */
+const handleFileChange = (file) => {
+  if (file.status === 'success' || file.status === 'fail') {
+    uploadingCount.value = Math.max(0, uploadingCount.value - 1)
+  }
+}
+
+/**
+ * 文件移除处理
+ *
+ * @param file 被移除的文件
+ */
+const handleFileRemove = (file) => {
+  if (file.status === 'uploading') {
+    uploadingCount.value = Math.max(0, uploadingCount.value - 1)
+  }
+}
+
+/**
+ * 从列表中移除文件
+ *
+ * @param index 要移除的文件索引
+ */
+const removeFile = (index: number) => {
+  // 从列表中移除文件
+  const newList = [...props.modelValue.list]
+  newList.splice(index, 1)
+  // 更新表单数据
+  emit('update:modelValue', {
+    ...props.modelValue,
+    list: newList
+  })
+}
+
+/** 下一步按钮处理 */
+const handleNextStep = () => {
+  // 1.1 检查是否有文件上传
+  if (!modelData.value.list || modelData.value.list.length === 0) {
+    message.warning('请上传至少一个文件')
+    return
+  }
+  // 1.2 检查是否有文件正在上传
+  if (uploadingCount.value > 0) {
+    message.warning('请等待所有文件上传完成')
+    return
+  }
+
+  // 2. 获取父组件的goToNextStep方法
+  const parentEl = parent || getCurrentInstance()?.parent
+  if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') {
+    parentEl.exposed.goToNextStep()
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  ensureListExists()
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/ai/knowledge/document/form/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <ContentWrap>
+    <div class="mx-auto">
+      <!-- 头部导航栏 -->
+      <div
+        class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px"
+      >
+        <!-- 左侧标题 -->
+        <div class="w-200px flex items-center overflow-hidden">
+          <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="handleBack" />
+          <span class="ml-10px text-16px truncate">
+            {{ formData.id ? '编辑知识库文档' : '创建知识库文档' }}
+          </span>
+        </div>
+
+        <!-- 步骤条 -->
+        <div class="flex-1 flex items-center justify-center h-full">
+          <div class="w-400px flex items-center justify-between h-full">
+            <div
+              v-for="(step, index) in steps"
+              :key="index"
+              class="flex items-center mx-15px relative h-full"
+              :class="[
+                currentStep === index
+                  ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid'
+                  : 'text-gray-500'
+              ]"
+            >
+              <div
+                class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
+                :class="[
+                  currentStep === index
+                    ? 'bg-[#3473ff] text-white border-[#3473ff]'
+                    : 'border-gray-300 bg-white text-gray-500'
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+              <span class="text-16px font-bold whitespace-nowrap">{{ step.title }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧按钮 - 已移除 -->
+        <div class="w-200px flex items-center justify-end gap-2"> </div>
+      </div>
+
+      <!-- 主体内容 -->
+      <div class="mt-50px">
+        <!-- 第一步：上传文档 -->
+        <div v-if="currentStep === 0" class="mx-auto w-560px">
+          <UploadStep v-model="formData" ref="uploadDocumentRef" />
+        </div>
+
+        <!-- 第二步：文档分段 -->
+        <div v-if="currentStep === 1" class="mx-auto w-560px">
+          <SplitStep v-model="formData" ref="documentSegmentRef" />
+        </div>
+
+        <!-- 第三步：处理并完成 -->
+        <div v-if="currentStep === 2" class="mx-auto w-560px">
+          <ProcessStep v-model="formData" ref="processCompleteRef" />
+        </div>
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import UploadStep from './UploadStep.vue'
+import SplitStep from './SplitStep.vue'
+import ProcessStep from './ProcessStep.vue'
+import { KnowledgeDocumentApi } from '@/api/ai/knowledge/document'
+
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute() // 路由
+const router = useRouter() // 路由
+
+// 组件引用
+const uploadDocumentRef = ref()
+const documentSegmentRef = ref()
+const processCompleteRef = ref()
+const currentStep = ref(0) // 步骤控制
+const steps = [{ title: '上传文档' }, { title: '文档分段' }, { title: '处理并完成' }]
+const formData = ref({
+  knowledgeId: undefined, // 知识库编号
+  id: undefined, // 编辑的文档编号(documentId)
+  segmentMaxTokens: 500, // 分段最大 token 数
+  list: [] as Array<{
+    id: number // 文档编号
+    name: string // 文档名称
+    url: string // 文档 URL
+    segments: Array<{
+      content?: string
+      contentLength?: number
+      tokens?: number
+    }>
+    count?: number // 段落数量
+    process?: number // 处理进度
+  }> // 用于存储上传的文件列表
+}) // 表单数据
+
+provide('parent', getCurrentInstance()) // 提供 parent 给子组件使用
+
+/** 初始化数据 */
+const initData = async () => {
+  // 【新增场景】从路由参数中获取知识库 ID
+  if (route.query.knowledgeId) {
+    formData.value.knowledgeId = route.query.knowledgeId as any
+  }
+
+  // 【修改场景】从路由参数中获取文档 ID
+  const documentId = route.query.id
+  if (documentId) {
+    // 获取文档信息
+    formData.value.id = documentId as any
+    const document = await KnowledgeDocumentApi.getKnowledgeDocument(documentId as any)
+    formData.value.segmentMaxTokens = document.segmentMaxTokens
+    formData.value.list = [
+      {
+        id: document.id,
+        name: document.name,
+        url: document.url,
+        segments: []
+      }
+    ]
+    // 进入下一步
+    goToNextStep()
+  }
+}
+
+/** 切换到下一步 */
+const goToNextStep = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++
+  }
+}
+
+/** 切换到上一步 */
+const goToPrevStep = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--
+  }
+}
+
+/** 返回列表页 */
+const handleBack = () => {
+  // 先删除当前页签
+  delView(unref(router.currentRoute))
+  // 跳转到列表页
+  router.push({ name: 'AiKnowledgeDocument', query: { knowledgeId: formData.value.knowledgeId } })
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await initData()
+})
+
+/** 添加组件卸载前的清理代码 */
+onBeforeUnmount(() => {
+  // 清理所有的引用
+  uploadDocumentRef.value = null
+  documentSegmentRef.value = null
+  processCompleteRef.value = null
+})
+
+/** 暴露方法给子组件使用 */
+defineExpose({
+  goToNextStep,
+  goToPrevStep,
+  handleBack
+})
+</script>
+
+<style lang="scss" scoped>
+.border-bottom {
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.text-primary {
+  color: #3473ff;
+}
+
+.bg-primary {
+  background-color: #3473ff;
+}
+
+.border-primary {
+  border-color: #3473ff;
+}
+</style>

src/views/ai/knowledge/document/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="文件名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入文件名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择是否启用"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" plain @click="handleCreate" v-hasPermi="['ai:knowledge:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="文档编号" align="center" prop="id" />
+      <el-table-column label="文件名称" align="center" prop="name" />
+      <el-table-column label="字符数" align="center" prop="contentLength" />
+      <el-table-column label="Token 数" align="center" prop="tokens" />
+      <el-table-column label="分片最大 Token 数" align="center" prop="segmentMaxTokens" />
+      <el-table-column label="召回次数" align="center" prop="retrievalCount" />
+      <el-table-column label="是否启用" align="center" prop="status">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="0"
+            :inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+            :disabled="!checkPermi(['ai:knowledge:update'])"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="上传时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handleUpdate(scope.row.id)"
+            v-hasPermi="['ai:knowledge:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleSegment(scope.row.id)"
+            v-hasPermi="['ai:knowledge:query']"
+          >
+            分段
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['ai:knowledge:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <!-- <KnowledgeDocumentForm ref="formRef" @success="getList" /> -->
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { KnowledgeDocumentApi, KnowledgeDocumentVO } from '@/api/ai/knowledge/document'
+import { useRoute, useRouter } from 'vue-router'
+import { checkPermi } from '@/utils/permission'
+import { CommonStatusEnum } from '@/utils/constants'
+// import KnowledgeDocumentForm from './KnowledgeDocumentForm.vue'
+
+/** AI 知识库文档 列表 */
+defineOptions({ name: 'KnowledgeDocument' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const route = useRoute() // 路由
+const router = useRouter() // 路由
+
+const loading = ref(true) // 列表的加载中
+const list = ref<KnowledgeDocumentVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  knowledgeId: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await KnowledgeDocumentApi.getKnowledgeDocumentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 跳转到创建文档页面 */
+const handleCreate = () => {
+  router.push({
+    name: 'AiKnowledgeDocumentCreate',
+    query: { knowledgeId: queryParams.knowledgeId }
+  })
+}
+
+/** 跳转到更新文档页面 */
+const handleUpdate = (id: number) => {
+  router.push({
+    name: 'AiKnowledgeDocumentUpdate',
+    query: { id, knowledgeId: queryParams.knowledgeId }
+  })
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await KnowledgeDocumentApi.deleteKnowledgeDocument(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 修改状态操作 */
+const handleStatusChange = async (row: KnowledgeDocumentVO) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '禁用'
+    await message.confirm('确认要"' + text + '""' + row.name + '"文档吗?')
+    // 发起修改状态
+    await KnowledgeDocumentApi.updateKnowledgeDocumentStatus({ id: row.id, status: row.status })
+    message.success(t('common.updateSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status =
+      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+  }
+}
+
+/** 跳转到知识库分段页面 */
+const handleSegment = (id: number) => {
+  router.push({
+    name: 'AiKnowledgeSegment',
+    query: { documentId: id }
+  })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  // 如果知识库 ID 不存在，显示错误提示并关闭页面
+  if (!route.query.knowledgeId) {
+    message.error('知识库 ID 不存在，无法查看文档列表')
+    // 关闭当前路由，返回到知识库列表页面
+    router.push({ name: 'AiKnowledge' })
+    return
+  }
+
+  // 从路由参数中获取知识库 ID
+  queryParams.knowledgeId = route.query.knowledgeId as any
+  getList()
+})
+</script>

src/views/ai/knowledge/knowledge/KnowledgeForm.vue

@@ -0,0 +1,162 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="130px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="知识库名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入知识库名称" />
+      </el-form-item>
+      <el-form-item label="知识库描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入知识库描述"
+        />
+      </el-form-item>
+      <el-form-item label="向量模型" prop="embeddingModelId">
+        <el-select
+          v-model="formData.embeddingModelId"
+          placeholder="请选择向量模型"
+          clearable
+          class="!w-full"
+        >
+          <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="检索 topK" prop="topK">
+        <el-input-number
+          v-model="formData.topK"
+          placeholder="请输入检索 topK"
+          :min="0"
+          :max="10"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item label="检索相似度阈值" prop="similarityThreshold">
+        <el-input-number
+          v-model="formData.similarityThreshold"
+          placeholder="请输入检索相似度阈值"
+          :min="0"
+          :max="1"
+          :step="0.01"
+          :precision="2"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { KnowledgeApi, KnowledgeVO } from '@/api/ai/knowledge/knowledge'
+import { CommonStatusEnum } from '@/utils/constants'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
+import { AiModelTypeEnum } from '../../utils/constants'
+
+/** AI 知识库表单 */
+defineOptions({ name: 'KnowledgeForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  description: undefined,
+  embeddingModelId: undefined,
+  topK: undefined,
+  similarityThreshold: undefined,
+  status: CommonStatusEnum.ENABLE // 默认开启
+})
+const formRules = reactive({
+  name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
+  embeddingModelId: [{ required: true, message: '请输入向量模型', trigger: 'blur' }],
+  topK: [{ required: true, message: '请输入检索 topK', trigger: 'blur' }],
+  similarityThreshold: [{ required: true, message: '请输入检索相似度阈值', trigger: 'blur' }],
+  status: [{ required: true, message: '请选择是否启用', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const modelList = ref<ModelVO[]>([]) // 向量模型选项
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 获取向量模型列表
+  modelList.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.EMBEDDING)
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await KnowledgeApi.getKnowledge(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as KnowledgeVO
+    if (formType.value === 'create') {
+      await KnowledgeApi.createKnowledge(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await KnowledgeApi.updateKnowledge(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    embeddingModelId: undefined,
+    topK: undefined,
+    similarityThreshold: undefined,
+    status: CommonStatusEnum.ENABLE // 默认开启
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/ai/knowledge/knowledge/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <doc-alert title="AI 知识库" url="https://doc.iocoder.cn/ai/knowledge/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="95px"
+    >
+      <el-form-item label="知识库名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入知识库名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择是否启用"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['ai:knowledge:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="知识库名称" align="center" prop="name" />
+      <el-table-column label="知识库描述" align="center" prop="description" />
+      <el-table-column label="向量化模型" align="center" prop="embeddingModel" />
+      <el-table-column label="是否启用" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['ai:knowledge:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleDocument(scope.row.id)"
+            v-hasPermi="['ai:knowledge:query']"
+          >
+            文档
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleRetrieval(scope.row.id)"
+            v-hasPermi="['ai:knowledge:query']"
+          >
+            召回测试
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['ai:knowledge:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <KnowledgeForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { KnowledgeApi, KnowledgeVO } from '@/api/ai/knowledge/knowledge'
+import KnowledgeForm from './KnowledgeForm.vue'
+import { useRouter } from 'vue-router'
+
+/** AI 知识库列表 */
+defineOptions({ name: 'Knowledge' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<KnowledgeVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await KnowledgeApi.getKnowledgePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await KnowledgeApi.deleteKnowledge(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 文档按钮操作 */
+const router = useRouter()
+const handleDocument = (id: number) => {
+  router.push({
+    name: 'AiKnowledgeDocument',
+    query: { knowledgeId: id }
+  })
+}
+
+/** 跳转到文档召回测试页面 */
+const handleRetrieval = (id: number) => {
+  router.push({
+    name: 'AiKnowledgeRetrieval',
+    query: { id }
+  })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/ai/knowledge/knowledge/retrieval/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="flex gap-20px w-full">
+    <!-- 左侧输入区域 -->
+    <ContentWrap class="flex-1 min-w-300px">
+      <div class="mb-15px">
+        <h3 class="m-0 mb-5px">召回测试</h3>
+        <div class="text-gray-500 text-14px">根据给定的查询文本测试召回效果。</div>
+      </div>
+      <div>
+        <div class="relative mb-10px">
+          <el-input
+            v-model="queryParams.content"
+            type="textarea"
+            :rows="8"
+            placeholder="请输入文本"
+          />
+          <div class="absolute bottom-10px right-10px text-gray-400 text-12px">
+            {{ queryParams.content?.length }} / 200
+          </div>
+        </div>
+        <div class="flex items-center mb-10px">
+          <span class="w-60px text-gray-500">topK:</span>
+          <el-input-number v-model="queryParams.topK" :min="1" :max="20" />
+        </div>
+        <div class="flex items-center mb-15px">
+          <span class="w-60px text-gray-500">相似度:</span>
+          <el-input-number
+            v-model="queryParams.similarityThreshold"
+            :min="0"
+            :max="1"
+            :precision="2"
+            :step="0.01"
+          />
+        </div>
+        <div class="flex justify-end">
+          <el-button type="primary" @click="getRetrievalResult" :loading="loading">测试</el-button>
+        </div>
+      </div>
+    </ContentWrap>
+
+    <!-- 右侧召回结果区域 -->
+    <ContentWrap class="flex-1 min-w-300px">
+      <el-empty v-if="loading" description="正在检索中..." />
+      <div v-else-if="segments.length > 0" class="font-bold mb-15px">
+        {{ segments.length }} 个召回段落
+      </div>
+      <el-empty v-else description="暂无召回结果" />
+      <div>
+        <div
+          v-for="(segment, index) in segments"
+          :key="index"
+          class="mb-20px border border-solid border-gray-200 rounded p-15px"
+        >
+          <div class="flex justify-between text-12px text-gray-500 mb-5px">
+            <span>
+              分段({{ segment.id }}) · {{ segment.contentLength }} 字符数 ·
+              {{ segment.tokens }} Token
+            </span>
+            <span class="px-8px py-4px bg-blue-50 text-blue-500 rounded-full text-12px font-bold">
+              score: {{ segment.score }}
+            </span>
+          </div>
+          <div
+            class="bg-gray-50 p-10px rounded mb-10px whitespace-pre-wrap overflow-hidden transition-all duration-100 text-13px"
+            :class="{
+              'line-clamp-2 max-h-50px': !segment.expanded,
+              'max-h-500px': segment.expanded
+            }"
+          >
+            {{ segment.content }}
+          </div>
+          <div class="flex justify-between items-center">
+            <div class="flex items-center text-gray-500 text-13px">
+              <Icon icon="ep:document" class="mr-5px" />
+              <span>{{ segment.documentName || '未知文档' }}</span>
+            </div>
+            <el-button size="small" @click="toggleExpand(segment)">
+              {{ segment.expanded ? '收起' : '展开' }}
+              <Icon :icon="segment.expanded ? 'ep:arrow-up' : 'ep:arrow-down'" />
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </ContentWrap>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMessage } from '@/hooks/web/useMessage'
+import { KnowledgeSegmentApi } from '@/api/ai/knowledge/segment'
+import { KnowledgeApi } from '@/api/ai/knowledge/knowledge'
+/** 文档召回测试 */
+defineOptions({ name: 'KnowledgeDocumentRetrieval' })
+
+const message = useMessage() // 消息弹窗
+const route = useRoute() // 路由
+const router = useRouter() // 路由
+
+const loading = ref(false) // 加载状态
+const segments = ref<any[]>([]) // 召回结果
+const queryParams = reactive({
+  id: undefined,
+  content: '',
+  topK: 10,
+  similarityThreshold: 0.5
+})
+
+/** 调用文档召回测试接口 */
+const getRetrievalResult = async () => {
+  if (!queryParams.content) {
+    message.warning('请输入查询文本')
+    return
+  }
+
+  loading.value = true
+  segments.value = []
+
+  try {
+    const data = await KnowledgeSegmentApi.searchKnowledgeSegment({
+      knowledgeId: queryParams.id,
+      content: queryParams.content,
+      topK: queryParams.topK,
+      similarityThreshold: queryParams.similarityThreshold
+    })
+    segments.value = data || []
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 展开/收起段落内容 */
+const toggleExpand = (segment: any) => {
+  segment.expanded = !segment.expanded
+}
+
+/** 获取知识库信息 */
+const getKnowledgeInfo = async (id: number) => {
+  try {
+    const knowledge = await KnowledgeApi.getKnowledge(id)
+    if (knowledge) {
+      queryParams.topK = knowledge.topK || queryParams.topK
+      queryParams.similarityThreshold =
+        knowledge.similarityThreshold || queryParams.similarityThreshold
+    }
+  } catch (error) {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  // 如果知识库 ID 不存在，显示错误提示并关闭页面
+  if (!route.query.id) {
+    message.error('知识库 ID 不存在，无法进行召回测试')
+    router.back()
+    return
+  }
+  queryParams.id = route.query.id as any
+
+  // 获取知识库信息并设置默认值
+  getKnowledgeInfo(queryParams.id as any)
+})
+</script>

src/views/ai/knowledge/segment/KnowledgeSegmentForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="切片内容" prop="content">
+        <el-input
+          v-model="formData.content"
+          type="textarea"
+          :rows="6"
+          placeholder="请输入切片内容"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { KnowledgeSegmentApi, KnowledgeSegmentVO } from '@/api/ai/knowledge/segment'
+
+/** AI 知识库分段表单 */
+defineOptions({ name: 'KnowledgeSegmentForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  documentId: undefined,
+  content: undefined
+})
+const formRules = reactive({
+  content: [{ required: true, message: '切片内容不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, documentId?: any) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  formData.value.documentId = documentId as any
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await KnowledgeSegmentApi.getKnowledgeSegment(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as KnowledgeSegmentVO
+    if (formType.value === 'create') {
+      await KnowledgeSegmentApi.createKnowledgeSegment(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await KnowledgeSegmentApi.updateKnowledgeSegment(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    documentId: undefined,
+    content: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/ai/knowledge/segment/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="文档编号" prop="documentId">
+        <el-input
+          v-model="queryParams.documentId"
+          placeholder="请输入文档编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择是否启用"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['ai:knowledge:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="分段编号" align="center" prop="id" />
+      <el-table-column type="expand">
+        <template #default="props">
+          <div
+            class="content-expand"
+            style="
+              padding: 10px 20px;
+              white-space: pre-wrap;
+              line-height: 1.5;
+              background-color: #f9f9f9;
+              border-radius: 4px;
+              border-left: 3px solid #409eff;
+            "
+          >
+            <div
+              class="content-title"
+              style="margin-bottom: 8px; color: #606266; font-size: 14px; font-weight: bold"
+            >
+              完整内容：
+            </div>
+            {{ props.row.content }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="切片内容"
+        align="center"
+        prop="content"
+        min-width="250px"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="字符数" align="center" prop="contentLength" />
+      <el-table-column label="token 数量" align="center" prop="tokens" />
+      <el-table-column label="召回次数" align="center" prop="retrievalCount" />
+      <el-table-column label="是否启用" align="center" prop="status">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="0"
+            :inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+            :disabled="!checkPermi(['ai:knowledge:update'])"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['ai:knowledge:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['ai:knowledge:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <KnowledgeSegmentForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { KnowledgeSegmentApi, KnowledgeSegmentVO } from '@/api/ai/knowledge/segment'
+import KnowledgeSegmentForm from './KnowledgeSegmentForm.vue'
+import { CommonStatusEnum } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+
+/** AI 知识库分段 列表 */
+defineOptions({ name: 'KnowledgeSegment' })
+
+const message = useMessage() // 消息弹窗
+const router = useRouter() // 路由
+const route = useRoute() // 路由
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<KnowledgeSegmentVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  documentId: undefined,
+  content: undefined,
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await KnowledgeSegmentApi.getKnowledgeSegmentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id, queryParams.documentId)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await KnowledgeSegmentApi.deleteKnowledgeSegment(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 修改状态操作 */
+const handleStatusChange = async (row: KnowledgeSegmentVO) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '禁用'
+    await message.confirm('确认要"' + text + '"该分段吗?')
+    // 发起修改状态
+    await KnowledgeSegmentApi.updateKnowledgeSegmentStatus({ id: row.id, status: row.status })
+    message.success(t('common.updateSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status =
+      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  // 如果文档 ID 不存在，显示错误提示并关闭页面
+  if (!route.query.documentId) {
+    message.error('文档 ID 不存在，无法查看分段列表')
+    // 关闭当前路由，返回到文档列表页面
+    router.push({ name: 'AiKnowledgeDocument' })
+    return
+  }
+
+  // 从路由参数中获取文档 ID
+  queryParams.documentId = route.query.documentId as any
+  getList()
+})
+</script>

src/views/ai/mindmap/index/components/Left.vue

@@ -8,7 +8,7 @@
         <el-input
           v-model="formData.prompt"
           maxlength="1024"
-          rows="5"
+          :rows="5"
           class="w-100% mt-15px"
           input-style="border-radius: 7px;"
           placeholder="请输入提示词，让AI帮你完善"
@@ -29,7 +29,7 @@
         <el-input
           v-model="generatedContent"
           maxlength="1024"
-          rows="5"
+          :rows="5"
           class="w-100% mt-15px"
           input-style="border-radius: 7px;"
           placeholder="例如：童话里的小屋应该是什么样子？"

src/views/ai/mindmap/manager/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form

src/views/ai/model/apiKey/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form

src/views/ai/model/chatRole/ChatRoleForm.vue

@@ -16,10 +16,10 @@
       <el-form-item label="绑定模型" prop="modelId" v-if="!isUser">
         <el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
           <el-option
-            v-for="chatModel in chatModelList"
-            :key="chatModel.id"
-            :label="chatModel.name"
-            :value="chatModel.id"
+            v-for="model in models"
+            :key="model.id"
+            :label="model.name"
+            :value="model.id"
           />
         </el-select>
       </el-form-item>
@@ -32,6 +32,21 @@
       <el-form-item label="角色设定" prop="systemMessage">
         <el-input type="textarea" v-model="formData.systemMessage" placeholder="请输入角色设定" />
       </el-form-item>
+      <el-form-item label="引用知识库" prop="knowledgeIds">
+        <el-select v-model="formData.knowledgeIds" placeholder="请选择知识库" clearable multiple>
+          <el-option
+            v-for="item in knowledgeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="引用工具" prop="toolIds">
+        <el-select v-model="formData.toolIds" placeholder="请选择工具" clearable multiple>
+          <el-option v-for="item in toolList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="是否公开" prop="publicStatus" v-if="!isUser">
         <el-radio-group v-model="formData.publicStatus">
           <el-radio
@@ -68,8 +83,11 @@
 import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
 import { ChatRoleApi, ChatRoleVO } from '@/api/ai/model/chatRole'
 import { CommonStatusEnum } from '@/utils/constants'
-import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
 import { FormRules } from 'element-plus'
+import { AiModelTypeEnum } from '@/views/ai/utils/constants'
+import { KnowledgeApi, KnowledgeVO } from '@/api/ai/knowledge/knowledge'
+import { ToolApi, ToolVO } from '@/api/ai/model/tool'
 
 /** AI 聊天角色 表单 */
 defineOptions({ name: 'ChatRoleForm' })
@@ -91,10 +109,14 @@ const formData = ref({
   description: undefined,
   systemMessage: undefined,
   publicStatus: true,
-  status: CommonStatusEnum.ENABLE
+  status: CommonStatusEnum.ENABLE,
+  knowledgeIds: [] as number[],
+  toolIds: [] as number[]
 })
 const formRef = ref() // 表单 Ref
-const chatModelList = ref([] as ChatModelVO[]) // 聊天模型列表
+const models = ref([] as ModelVO[]) // 聊天模型列表
+const knowledgeList = ref([] as KnowledgeVO[]) // 知识库列表
+const toolList = ref([] as ToolVO[]) // 工具列表
 
 /** 是否【我】自己创建，私有角色 */
 const isUser = computed(() => {
@@ -128,7 +150,11 @@ const open = async (type: string, id?: number, title?: string) => {
     }
   }
   // 获得下拉数据
-  chatModelList.value = await ChatModelApi.getChatModelSimpleList(CommonStatusEnum.ENABLE)
+  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.CHAT)
+  // 获取知识库列表
+  knowledgeList.value = await KnowledgeApi.getSimpleKnowledgeList()
+  // 获取工具列表
+  toolList.value = await ToolApi.getToolSimpleList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -176,7 +202,9 @@ const resetForm = () => {
     description: undefined,
     systemMessage: undefined,
     publicStatus: true,
-    status: CommonStatusEnum.ENABLE
+    status: CommonStatusEnum.ENABLE,
+    knowledgeIds: [],
+    toolIds: []
   }
   formRef.value?.resetFields()
 }

src/views/ai/model/chatRole/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -69,6 +71,18 @@
       <el-table-column label="角色类别" align="center" prop="category" />
       <el-table-column label="角色描述" align="center" prop="description" />
       <el-table-column label="角色设定" align="center" prop="systemMessage" />
+      <el-table-column label="知识库" align="center" prop="knowledgeIds">
+        <template #default="scope">
+          <span v-if="!scope.row.knowledgeIds || scope.row.knowledgeIds.length === 0">-</span>
+          <span v-else>引用 {{ scope.row.knowledgeIds.length }} 个</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="工具" align="center" prop="toolIds">
+        <template #default="scope">
+          <span v-if="!scope.row.toolIds || scope.row.toolIds.length === 0">-</span>
+          <span v-else>引用 {{ scope.row.toolIds.length }} 个</span>
+        </template>
+      </el-table-column>
       <el-table-column label="是否公开" align="center" prop="publicStatus">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.publicStatus" />

src/views/ai/model/model/ModelForm.vue

@@ -17,6 +17,21 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="模型类型" prop="type">
+        <el-select
+          v-model="formData.type"
+          placeholder="请输入模型类型"
+          clearable
+          :disabled="formData.id"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.AI_MODEL_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item label="API 秘钥" prop="keyId">
         <el-select v-model="formData.keyId" placeholder="请选择 API 秘钥" clearable>
           <el-option
@@ -47,29 +62,44 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="温度参数" prop="temperature">
+      <el-form-item
+        label="温度参数"
+        prop="temperature"
+        v-if="formData.type === AiModelTypeEnum.CHAT"
+      >
         <el-input-number
           v-model="formData.temperature"
           placeholder="请输入温度参数"
           :min="0"
           :max="2"
           :precision="2"
+          class="!w-1/1"
         />
       </el-form-item>
-      <el-form-item label="回复数 Token 数" prop="maxTokens">
+      <el-form-item
+        label="回复数 Token 数"
+        prop="maxTokens"
+        v-if="formData.type === AiModelTypeEnum.CHAT"
+      >
         <el-input-number
           v-model="formData.maxTokens"
           placeholder="请输入回复数 Token 数"
           :min="0"
-          :max="4096"
+          :max="8192"
+          class="!w-1/1"
         />
       </el-form-item>
-      <el-form-item label="上下文数量" prop="maxContexts">
+      <el-form-item
+        label="上下文数量"
+        prop="maxContexts"
+        v-if="formData.type === AiModelTypeEnum.CHAT"
+      >
         <el-input-number
           v-model="formData.maxContexts"
           placeholder="请输入上下文数量"
           :min="0"
           :max="20"
+          class="!w-1/1"
         />
       </el-form-item>
     </el-form>
@@ -80,13 +110,14 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
 import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
 import { CommonStatusEnum } from '@/utils/constants'
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { AiModelTypeEnum } from '@/views/ai/utils/constants'
 
-/** API 聊天模型 表单 */
-defineOptions({ name: 'ChatModelForm' })
+/** API 模型的表单 */
+defineOptions({ name: 'ModelForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -101,6 +132,7 @@ const formData = ref({
   name: undefined,
   model: undefined,
   platform: undefined,
+  type: undefined,
   sort: undefined,
   status: CommonStatusEnum.ENABLE,
   temperature: undefined,
@@ -112,6 +144,7 @@ const formRules = reactive({
   name: [{ required: true, message: '模型名字不能为空', trigger: 'blur' }],
   model: [{ required: true, message: '模型标识不能为空', trigger: 'blur' }],
   platform: [{ required: true, message: '所属平台不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '模型类型不能为空', trigger: 'blur' }],
   sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
@@ -128,13 +161,13 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ChatModelApi.getChatModel(id)
+      formData.value = await ModelApi.getModel(id)
     } finally {
       formLoading.value = false
     }
   }
   // 获得下拉数据
-  apiKeyList.value = await ApiKeyApi.getApiKeySimpleList(CommonStatusEnum.ENABLE)
+  apiKeyList.value = await ApiKeyApi.getApiKeySimpleList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -146,12 +179,17 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as ChatModelVO
+    const data = formData.value as unknown as ModelVO
+    if (data.type !== AiModelTypeEnum.CHAT) {
+      delete data.temperature
+      delete data.maxTokens
+      delete data.maxContexts
+    }
     if (formType.value === 'create') {
-      await ChatModelApi.createChatModel(data)
+      await ModelApi.createModel(data)
       message.success(t('common.createSuccess'))
     } else {
-      await ChatModelApi.updateChatModel(data)
+      await ModelApi.updateModel(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -170,6 +208,7 @@ const resetForm = () => {
     name: undefined,
     model: undefined,
     platform: undefined,
+    type: undefined,
     sort: undefined,
     status: CommonStatusEnum.ENABLE,
     temperature: undefined,

src/views/ai/model/model/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -42,7 +44,7 @@
           type="primary"
           plain
           @click="openForm('create')"
-          v-hasPermi="['ai:chat-model:create']"
+          v-hasPermi="['ai:model:create']"
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
@@ -53,34 +55,39 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="所属平台" align="center" prop="platform">
+      <el-table-column label="所属平台" align="center" prop="platform" min-width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.AI_PLATFORM" :value="scope.row.platform" />
         </template>
       </el-table-column>
-      <el-table-column label="模型名字" align="center" prop="name" />
-      <el-table-column label="模型标识" align="center" prop="model" />
+      <el-table-column label="模型类型" align="center" prop="platform" min-width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.AI_MODEL_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="模型名字" align="center" prop="name" min-width="180" />
+      <el-table-column label="模型标识" align="center" prop="model" min-width="180" />
       <el-table-column label="API 秘钥" align="center" prop="keyId" min-width="140">
         <template #default="scope">
           <span>{{ apiKeyList.find((item) => item.id === scope.row.keyId)?.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status">
+      <el-table-column label="排序" align="center" prop="sort" min-width="80" />
+      <el-table-column label="状态" align="center" prop="status" min-width="80">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="温度参数" align="center" prop="temperature" />
+      <el-table-column label="温度参数" align="center" prop="temperature" min-width="80" />
       <el-table-column label="回复数 Token 数" align="center" prop="maxTokens" min-width="140" />
-      <el-table-column label="上下文数量" align="center" prop="maxContexts" />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="上下文数量" align="center" prop="maxContexts" min-width="100" />
+      <el-table-column label="操作" align="center" width="180" fixed="right">
         <template #default="scope">
           <el-button
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['ai:chat-model:update']"
+            v-hasPermi="['ai:model:update']"
           >
             编辑
           </el-button>
@@ -88,7 +95,7 @@
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['ai:chat-model:delete']"
+            v-hasPermi="['ai:model:delete']"
           >
             删除
           </el-button>
@@ -105,23 +112,23 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <ChatModelForm ref="formRef" @success="getList" />
+  <ModelForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
-import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
-import ChatModelForm from './ChatModelForm.vue'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
+import ModelForm from './ModelForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
 
-/** API 聊天模型 列表 */
-defineOptions({ name: 'AiChatModel' })
+/** API 模型列表 */
+defineOptions({ name: 'AiModel' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
-const list = ref<ChatModelVO[]>([]) // 列表的数据
+const list = ref<ModelVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
@@ -137,7 +144,7 @@ const apiKeyList = ref([] as ApiKeyVO[]) // API 密钥列表
 const getList = async () => {
   loading.value = true
   try {
-    const data = await ChatModelApi.getChatModelPage(queryParams)
+    const data = await ModelApi.getModelPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -169,7 +176,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await ChatModelApi.deleteChatModel(id)
+    await ModelApi.deleteModel(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -178,7 +185,7 @@ const handleDelete = async (id: number) => {
 
 /** 初始化 **/
 onMounted(async () => {
-  getList()
+  await getList()
   // 获得下拉数据
   apiKeyList.value = await ApiKeyApi.getApiKeySimpleList()
 })

src/views/ai/model/tool/ToolForm.vue

@@ -0,0 +1,112 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="工具名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入工具名称" />
+      </el-form-item>
+      <el-form-item label="工具描述" prop="description">
+        <el-input type="textarea" v-model="formData.description" placeholder="请输入工具描述" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { ToolApi, ToolVO } from '@/api/ai/model/tool'
+import { CommonStatusEnum } from '@/utils/constants'
+
+/** AI 工具表单 */
+defineOptions({ name: 'ToolForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  description: undefined,
+  status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+  name: [{ required: true, message: '工具名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ToolApi.getTool(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ToolVO
+    if (formType.value === 'create') {
+      await ToolApi.createTool(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ToolApi.updateTool(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    status: CommonStatusEnum.ENABLE
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/ai/model/tool/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <doc-alert title="AI 工具调用（function calling）" url="https://doc.iocoder.cn/ai/tool/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="工具名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入工具名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['ai:tool:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="工具编号" align="center" prop="id" />
+      <el-table-column label="工具名称" align="center" prop="name" />
+      <el-table-column label="工具描述" align="center" prop="description" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['ai:tool:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['ai:tool:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ToolForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { ToolApi, ToolVO } from '@/api/ai/model/tool'
+import ToolForm from './ToolForm.vue'
+
+/** AI 工具 列表 */
+defineOptions({ name: 'AiTool' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ToolVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  description: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ToolApi.getToolPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ToolApi.deleteTool(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/ai/music/manager/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 音乐创作" url="https://doc.iocoder.cn/ai/music/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form

src/views/ai/utils/constants.ts

@@ -23,6 +23,15 @@ export const AiPlatformEnum = {
   SUNO: 'Suno' // Suno AI
 }
 
+export const AiModelTypeEnum = {
+  CHAT: 1, // 聊天
+  IMAGE: 2, // 图像
+  VOICE: 3, // 音频
+  VIDEO: 4, // 视频
+  EMBEDDING: 5, // 向量
+  RERANK: 6 // 重排
+}
+
 export const OtherPlatformEnum: ImageModelVO[] = [
   {
     key: AiPlatformEnum.TONG_YI,
@@ -211,31 +220,6 @@ export const StableDiffusionStylePresets: ImageModelVO[] = [
   }
 ]
 
-export const TongYiWanXiangModels: ImageModelVO[] = [
-  {
-    key: 'wanx-v1',
-    name: 'wanx-v1'
-  },
-  {
-    key: 'wanx-sketch-to-image-v1',
-    name: 'wanx-sketch-to-image-v1'
-  }
-]
-
-export const QianFanModels: ImageModelVO[] = [
-  {
-    key: 'sd_xl',
-    name: 'sd_xl'
-  }
-]
-
-export const ChatGlmModels: ImageModelVO[] = [
-  {
-    key: 'cogview-3',
-    name: 'cogview-3'
-  }
-]
-
 export const StableDiffusionClipGuidancePresets: ImageModelVO[] = [
   {
     key: 'NONE',

src/views/ai/write/manager/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="AI 写作助手" url="https://doc.iocoder.cn/ai/write/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -39,7 +41,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="平台" prop="platform">
-        <el-select v-model="queryParams.platform" placeholder="请选择平台" clearable class="!w-240px">
+        <el-select
+          v-model="queryParams.platform"
+          placeholder="请选择平台"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
             :key="dict.value"
@@ -62,24 +69,6 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['ai:write:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <!-- TODO @YunaiV  目前没有导出接口，需要导出吗 -->
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['ai:write:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -143,15 +132,6 @@
       <el-table-column label="错误信息" align="center" prop="errorMessage" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-<!--          TODO @YunaiV 目前没有修改接口，写作要可以更改吗-->
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['ai:write:update']"
-          >
-            编辑
-          </el-button>
           <el-button
             link
             type="danger"
@@ -225,15 +205,6 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 新增方法，跳转到写作页面 **/
-const openForm = (type: string, id?: number) => {
-  switch (type) {
-    case 'create':
-      router.push('/ai/write')
-      break
-  }
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {

src/views/bpm/category/CategoryForm.vue

@@ -13,6 +13,9 @@
       <el-form-item label="分类标志" prop="code">
         <el-input v-model="formData.code" placeholder="请输入分类标志" />
       </el-form-item>
+      <el-form-item label="分类描述" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入分类描述" />
+      </el-form-item>
       <el-form-item label="分类状态" prop="status">
         <el-radio-group v-model="formData.status">
           <el-radio
@@ -58,6 +61,7 @@ const formData = ref({
   id: undefined,
   name: undefined,
   code: undefined,
+  description: undefined,
   status: CommonStatusEnum.ENABLE,
   sort: undefined
 })
@@ -117,6 +121,7 @@ const resetForm = () => {
     id: undefined,
     name: undefined,
     code: undefined,
+    description: undefined,
     status: CommonStatusEnum.ENABLE,
     sort: undefined
   }

src/views/bpm/form/editor/index.vue

@@ -50,11 +50,13 @@ import FcDesigner from '@form-create/designer'
 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useFormCreateDesigner } from '@/components/FormCreate'
+import { useRoute } from 'vue-router'
 
 defineOptions({ name: 'BpmFormEditor' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
+const route = useRoute() // 路由
 const { push, currentRoute } = useRouter() // 路由
 const { query } = useRoute() // 路由信息
 const { delView } = useTagsViewStore() // 视图操作
@@ -150,6 +152,14 @@ onMounted(async () => {
   const data = await FormApi.getForm(id)
   formData.value = data
   setConfAndFields(designer, data.conf, data.fields)
+
+  if (route.query.type !== 'copy') {
+    return
+  }
+  // 场景三： 复制表单
+  const { id: foo, ...copied } = data
+  formData.value = copied
+  formData.value.name += '_copy'
 })
 </script>
 

src/views/bpm/form/index.vue

@@ -59,7 +59,15 @@
             v-hasPermi="['bpm:form:update']"
             link
             type="primary"
-            @click="openForm(scope.row.id)"
+            @click="openForm('copy', scope.row.id)"
+          >
+            复制
+          </el-button>
+          <el-button
+            v-hasPermi="['bpm:form:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
           >
             编辑
           </el-button>
@@ -139,16 +147,17 @@ const resetQuery = () => {
 }
 
 /** 添加/修改操作 */
-const openForm = (id?: number) => {
-  const toRouter: { name: string; query?: { id: number } } = {
-    name: 'BpmFormEditor'
+const openForm = (type: string, id?: number) => {
+  const toRouter: { name: string; query: { type: string; id?: number } } = {
+    name: 'BpmFormEditor',
+    query: {
+      type
+    }
   }
   console.log(typeof id)
   // 表单新建的时候id传的是event需要排除
   if (typeof id === 'number' || typeof id === 'string') {
-    toRouter.query = {
-      id
-    }
+    toRouter.query.id = id
   }
   push(toRouter)
 }

src/views/bpm/model/CategoryDraggableModel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center h-50px">
+  <div class="flex items-center h-50px" v-memo="[categoryInfo.name, isCategorySorting]">
     <!-- 头部：分类名 -->
     <div class="flex items-center">
       <el-tooltip content="拖动排序" v-if="isCategorySorting">
@@ -13,7 +13,7 @@
       <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
     </div>
     <!-- 头部：操作 -->
-    <div class="flex-1 flex" v-if="!isCategorySorting">
+    <div class="flex-1 flex" v-show="!isCategorySorting">
       <div
         v-if="categoryInfo.modelList.length > 0"
         class="ml-20px flex items-center"
@@ -69,16 +69,17 @@
   <el-collapse-transition>
     <div v-show="isExpand">
       <el-table
+        v-if="modelList && modelList.length > 0"
         :class="categoryInfo.name"
         ref="tableRef"
-        :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
-        :cell-style="{ paddingLeft: '10px' }"
-        :row-style="{ height: '68px' }"
         :data="modelList"
         row-key="id"
+        :header-cell-style="tableHeaderStyle"
+        :cell-style="tableCellStyle"
+        :row-style="{ height: '68px' }"
       >
         <el-table-column label="流程名" prop="name" min-width="150">
-          <template #default="scope">
+          <template #default="{ row }">
             <div class="flex items-center">
               <el-tooltip content="拖动排序" v-if="isModelSorting">
                 <Icon
@@ -86,31 +87,37 @@
                   class="drag-icon cursor-move text-#8a909c mr-10px"
                 />
               </el-tooltip>
-              <el-image :src="scope.row.icon" class="h-38px w-38px mr-10px rounded" />
-              {{ scope.row.name }}
+              <el-image v-if="row.icon" :src="row.icon" class="h-38px w-38px mr-10px rounded" />
+              <div v-else class="flow-icon">
+                <span style="font-size: 12px; color: #fff">{{ subString(row.name, 0, 2) }}</span>
+              </div>
+              {{ row.name }}
             </div>
           </template>
         </el-table-column>
         <el-table-column label="可见范围" prop="startUserIds" min-width="150">
-          <template #default="scope">
-            <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-              全部可见
-            </el-text>
-            <el-text v-else-if="scope.row.startUsers.length == 1">
-              {{ scope.row.startUsers[0].nickname }}
+          <template #default="{ row }">
+            <el-text v-if="!row.startUsers?.length"> 全部可见 </el-text>
+            <el-text v-else-if="row.startUsers.length === 1">
+              {{ row.startUsers[0].nickname }}
             </el-text>
             <el-text v-else>
               <el-tooltip
                 class="box-item"
                 effect="dark"
                 placement="top"
-                :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+                :content="row.startUsers.map((user: any) => user.nickname).join('、')"
               >
-                {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+                {{ row.startUsers[0].nickname }}等 {{ row.startUsers.length }} 人可见
               </el-tooltip>
             </el-text>
           </template>
         </el-table-column>
+        <el-table-column label="流程类型" prop="type" min-width="120">
+          <template #default="{ row }">
+            <dict-tag :value="row.type" :type="DICT_TYPE.BPM_MODEL_TYPE" />
+          </template>
+        </el-table-column>
         <el-table-column label="表单信息" prop="formType" min-width="150">
           <template #default="scope">
             <el-button
@@ -158,17 +165,26 @@
               link
               type="primary"
               @click="openModelForm('update', scope.row.id)"
-              v-hasPermi="['bpm:model:update']"
+              v-if="hasPermiUpdate"
               :disabled="!isManagerUser(scope.row)"
             >
               修改
             </el-button>
+            <el-button
+              link
+              type="primary"
+              @click="openModelForm('copy', scope.row.id)"
+              v-if="hasPermiUpdate"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              复制
+            </el-button>
             <el-button
               link
               class="!ml-5px"
               type="primary"
               @click="handleDeploy(scope.row)"
-              v-hasPermi="['bpm:model:deploy']"
+              v-if="hasPermiDeploy"
               :disabled="!isManagerUser(scope.row)"
             >
               发布
@@ -176,28 +192,43 @@
             <el-dropdown
               class="!align-middle ml-5px"
               @command="(command) => handleModelCommand(command, scope.row)"
-              v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+              v-if="hasPermiMore"
             >
               <el-button type="primary" link>更多</el-button>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    command="handleDefinitionList"
-                    v-if="checkPermi(['bpm:process-definition:query'])"
-                  >
+                  <el-dropdown-item command="handleDefinitionList" v-if="hasPermiPdQuery">
                     历史
                   </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleReport"
+                    v-if="
+                      checkPermi(['bpm:process-instance:manager-query']) &&
+                      scope.row.processDefinition
+                    "
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    报表
+                  </el-dropdown-item>
                   <el-dropdown-item
                     command="handleChangeState"
-                    v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                    v-if="hasPermiUpdate && scope.row.processDefinition"
                     :disabled="!isManagerUser(scope.row)"
                   >
                     {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
                   </el-dropdown-item>
+                  <el-dropdown-item
+                    type="danger"
+                    command="handleClean"
+                    v-if="checkPermi(['bpm:model:clean'])"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    清理
+                  </el-dropdown-item>
                   <el-dropdown-item
                     type="danger"
                     command="handleDelete"
-                    v-if="checkPermi(['bpm:model:delete'])"
+                    v-if="hasPermiDelete"
                     :disabled="!isManagerUser(scope.row)"
                   >
                     删除
@@ -227,15 +258,16 @@
     </template>
   </Dialog>
 
-  <!-- 表单弹窗：添加流程模型 -->
-  <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" :fullscreen="true" v-model="formDetailVisible">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
-import ModelForm from './ModelForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
-import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
@@ -244,26 +276,89 @@ import { BpmModelFormType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useAppStore } from '@/store/modules/app'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, isEqual } from 'lodash-es'
+import { useDebounceFn } from '@vueuse/core'
+import { subString } from '@/utils/index'
 
 defineOptions({ name: 'BpmModel' })
 
-const props = defineProps({
-  categoryInfo: propTypes.object.def([]), // 分类后的数据
-  isCategorySorting: propTypes.bool.def(false) // 是否分类在排序
-})
+// 优化 Props 类型定义
+interface UserInfo {
+  nickname: string
+  [key: string]: any
+}
+
+interface ProcessDefinition {
+  deploymentTime: string
+  version: number
+  suspensionState: number
+}
+
+interface ModelInfo {
+  id: number
+  name: string
+  icon?: string
+  startUsers?: UserInfo[]
+  processDefinition?: ProcessDefinition
+  formType?: number
+  formId?: number
+  formName?: string
+  formCustomCreatePath?: string
+  managerUserIds?: number[]
+  [key: string]: any
+}
+
+interface CategoryInfoProps {
+  id: number
+  name: string
+  modelList: ModelInfo[]
+}
+
+const props = defineProps<{
+  categoryInfo: CategoryInfoProps
+  isCategorySorting: boolean
+}>()
+
 const emit = defineEmits(['success'])
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
 const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
+const router = useRouter() // 路由
 
 const isModelSorting = ref(false) // 是否正处于排序状态
-const originalData: any = ref([]) // 原始数据
-const modelList: any = ref([]) // 模型列表
+const originalData = ref<ModelInfo[]>([]) // 原始数据
+const modelList = ref<ModelInfo[]>([]) // 模型列表
 const isExpand = ref(false) // 是否处于展开状态
 
+// 使用 computed 优化表格样式计算
+const tableHeaderStyle = computed(() => ({
+  backgroundColor: isDark.value ? '' : '#edeff0',
+  paddingLeft: '10px'
+}))
+
+const tableCellStyle = computed(() => ({
+  paddingLeft: '10px'
+}))
+
+/** 权限校验：通过 computed 解决列表的卡顿问题 */
+const hasPermiUpdate = computed(() => {
+  return checkPermi(['bpm:model:update'])
+})
+const hasPermiDelete = computed(() => {
+  return checkPermi(['bpm:model:delete'])
+})
+const hasPermiDeploy = computed(() => {
+  return checkPermi(['bpm:model:deploy'])
+})
+const hasPermiMore = computed(() => {
+  return checkPermi(['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete'])
+})
+const hasPermiPdQuery = computed(() => {
+  return checkPermi(['bpm:process-definition:query'])
+})
+
 /** '更多'操作按钮 */
 const handleModelCommand = (command: string, row: any) => {
   switch (command) {
@@ -276,6 +371,18 @@ const handleModelCommand = (command: string, row: any) => {
     case 'handleChangeState':
       handleChangeState(row)
       break
+    case 'handleClean':
+      handleClean(row)
+      break
+    case 'handleReport':
+      router.push({
+        name: 'BpmProcessInstanceReport',
+        query: {
+          processDefinitionId: row.processDefinition.id,
+          processDefinitionKey: row.key
+        }
+      })
+      break
     default:
       break
   }
@@ -309,6 +416,19 @@ const handleDelete = async (row: any) => {
   } catch {}
 }
 
+/** 清理按钮操作 */
+const handleClean = async (row: any) => {
+  try {
+    // 清理的二次确认
+    await message.confirm('是否确认清理流程名字为"' + row.name + '"的数据项?')
+    // 发起清理
+    await ModelApi.cleanModel(row.id)
+    message.success('清理成功')
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
 /** 更新状态操作 */
 const handleChangeState = async (row: any) => {
   const state = row.processDefinition.suspensionState
@@ -331,11 +451,10 @@ const handleChangeState = async (row: any) => {
 /** 发布流程 */
 const handleDeploy = async (row: any) => {
   try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
+    await message.confirm('是否确认发布该流程？')
     // 发起部署
     await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
+    message.success(t('发布成功'))
     // 刷新列表
     emit('success')
   } catch {}
@@ -358,7 +477,7 @@ const formDetailPreview = ref({
   option: {}
 })
 const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
+  if (row.formType == BpmModelFormType.NORMAL) {
     // 设置表单
     const data = await FormApi.getForm(row.formId)
     setConfAndFields2(formDetailPreview, data.conf, data.fields)
@@ -405,14 +524,15 @@ const handleModelSortCancel = () => {
 
 /** 创建拖拽实例 */
 const tableRef = ref()
-const initSort = () => {
+const initSort = useDebounceFn(() => {
   const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
+  if (!table) return
+
   Sortable.create(table, {
     group: 'shared',
     animation: 150,
     draggable: '.el-table__row',
     handle: '.drag-icon',
-    // 结束拖动事件
     onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
       if (oldDraggableIndex !== newDraggableIndex) {
         modelList.value.splice(
@@ -423,15 +543,18 @@ const initSort = () => {
       }
     }
   })
-}
+}, 200)
 
 /** 更新 modelList 模型列表 */
-const updateModeList = () => {
-  modelList.value = cloneDeep(props.categoryInfo.modelList)
-  if (props.categoryInfo.modelList.length > 0) {
-    isExpand.value = true
+const updateModeList = useDebounceFn(() => {
+  const newModelList = props.categoryInfo.modelList
+  if (!isEqual(modelList.value, newModelList)) {
+    modelList.value = cloneDeep(newModelList)
+    if (newModelList?.length > 0) {
+      isExpand.value = true
+    }
   }
-}
+}, 100)
 
 /** 重命名弹窗确定 */
 const renameCategoryVisible = ref(false)
@@ -465,27 +588,27 @@ const handleDeleteCategory = async () => {
   } catch {}
 }
 
-/** 添加流程模型弹窗 */
-const modelFormRef = ref()
-const openModelForm = (type: string, id?: number) => {
+/** 添加/修改/复制流程模型弹窗 */
+const openModelForm = async (type: string, id?: number) => {
   if (type === 'create') {
-    push({ name: 'BpmModelCreate' })
+    await push({ name: 'BpmModelCreate' })
   } else {
-    push({
+    await push({
       name: 'BpmModelUpdate',
-      params: { id }
+      params: { id, type }
     })
   }
 }
 
-watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
-watch(
-  () => props.isCategorySorting,
-  (val) => {
-    if (val) isExpand.value = false
-  },
-  { immediate: true }
-)
+watchEffect(() => {
+  if (props.categoryInfo?.modelList) {
+    updateModeList()
+  }
+
+  if (props.isCategorySorting) {
+    isExpand.value = false
+  }
+})
 </script>
 
 <style lang="scss">
@@ -502,10 +625,27 @@ watch(
 }
 </style>
 <style lang="scss" scoped>
-:deep() {
-  .el-table__cell {
+.flow-icon {
+  display: flex;
+  width: 38px;
+  height: 38px;
+  margin-right: 10px;
+  background-color: var(--el-color-primary);
+  border-radius: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.category-draggable-model {
+  :deep(.el-table__cell) {
     overflow: hidden;
     border-bottom: none !important;
   }
+
+  // 优化表格渲染性能
+  :deep(.el-table__body) {
+    will-change: transform;
+    transform: translateZ(0);
+  }
 }
 </style>

src/views/bpm/model/ModelForm.vue

@@ -1,440 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="600">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
-        <el-tooltip
-          v-if="!formData.id"
-          class="item"
-          content="新建后，流程标识不可修改！"
-          effect="light"
-          placement="top"
-        >
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-        <el-tooltip v-else class="item" content="流程标识不可修改！" effect="light" placement="top">
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="formData.name"
-          :disabled="!!formData.id"
-          clearable
-          placeholder="请输入流程名称"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="formData.category"
-          clearable
-          placeholder="请选择流程分类"
-          style="width: 100%"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="流程图标" prop="icon">
-        <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
-      </el-form-item>
-      <el-form-item label="流程描述" prop="description">
-        <el-input v-model="formData.description" clearable type="textarea" />
-      </el-form-item>
-      <el-form-item label="流程类型" prop="type">
-        <el-radio-group v-model="formData.type">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="表单类型" prop="formType">
-        <el-radio-group v-model="formData.formType">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
-        <el-select v-model="formData.formId" clearable style="width: 100%">
-          <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        v-if="formData.formType === 20"
-        label="表单提交路由"
-        prop="formCustomCreatePath"
-      >
-        <el-input
-          v-model="formData.formCustomCreatePath"
-          placeholder="请输入表单提交路由"
-          style="width: 330px"
-        />
-        <el-tooltip
-          class="item"
-          content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
-          effect="light"
-          placement="top"
-        >
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
-        <el-input
-          v-model="formData.formCustomViewPath"
-          placeholder="请输入表单查看的组件地址"
-          style="width: 330px"
-        />
-        <el-tooltip
-          class="item"
-          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
-          effect="light"
-          placement="top"
-        >
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item label="是否可见" prop="visible">
-        <el-radio-group v-model="formData.visible">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value as string"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="谁可以发起" prop="startUserType">
-        <el-select
-          v-model="formData.startUserType"
-          placeholder="请选择谁可以发起"
-          @change="handleStartUserTypeChange"
-        >
-          <el-option label="全员" :value="0" />
-          <el-option label="指定人员" :value="1" />
-          <el-option label="均不可提交" :value="2" />
-        </el-select>
-        <div v-if="formData.startUserType === 1" class="mt-2 flex flex-wrap gap-2">
-          <div
-            v-for="user in selectedStartUsers"
-            :key="user.id"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
-          >
-            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar class="!m-5px" :size="28" v-else>
-              {{ user.nickname.substring(0, 1) }}
-            </el-avatar>
-            {{ user.nickname }}
-            <Icon
-              icon="ep:close"
-              class="ml-2 cursor-pointer hover:text-red-500"
-              @click="handleRemoveStartUser(user)"
-            />
-          </div>
-          <el-button type="primary" link @click="openStartUserSelect">
-            <Icon icon="ep:plus" />选择人员
-          </el-button>
-        </div>
-      </el-form-item>
-      <el-form-item label="流程管理员" prop="managerUserType">
-        <el-select
-          v-model="formData.managerUserType"
-          placeholder="请选择流程管理员"
-          @change="handleManagerUserTypeChange"
-        >
-          <el-option label="全员" :value="0" />
-          <el-option label="指定人员" :value="1" />
-          <el-option label="均不可提交" :value="2" />
-        </el-select>
-        <div v-if="formData.managerUserType === 1" class="mt-2 flex flex-wrap gap-2">
-          <div
-            v-for="user in selectedManagerUsers"
-            :key="user.id"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
-          >
-            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar class="!m-5px" :size="28" v-else>
-              {{ user.nickname.substring(0, 1) }}
-            </el-avatar>
-            {{ user.nickname }}
-            <Icon
-              icon="ep:close"
-              class="ml-2 cursor-pointer hover:text-red-500"
-              @click="handleRemoveManagerUser(user)"
-            />
-          </div>
-          <el-button type="primary" link @click="openManagerUserSelect">
-            <Icon icon="ep:plus" />选择人员
-          </el-button>
-        </div>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
-</template>
-<script lang="ts" setup>
-import { propTypes } from '@/utils/propTypes'
-import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
-import { ElMessageBox } from 'element-plus'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import { CategoryApi, CategoryVO } from '@/api/bpm/category'
-import { BpmModelFormType, BpmModelType } from '@/utils/constants'
-import { UserVO } from '@/api/system/user'
-import * as UserApi from '@/api/system/user'
-import { useUserStoreWithOut } from '@/store/modules/user'
-import { FormVO } from '@/api/bpm/form'
-
-defineOptions({ name: 'ModelForm' })
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-const userStore = useUserStoreWithOut() // 用户信息缓存
-const props = defineProps({
-  categoryId: propTypes.number
-})
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData: any = ref({
-  id: undefined,
-  name: '',
-  key: '',
-  category: undefined,
-  icon: undefined,
-  description: '',
-  type: BpmModelType.BPMN,
-  formType: BpmModelFormType.NORMAL,
-  formId: '',
-  formCustomCreatePath: '',
-  formCustomViewPath: '',
-  visible: true,
-  startUserType: undefined,
-  managerUserType: undefined,
-  startUserIds: [],
-  managerUserIds: []
-})
-const formRules = reactive({
-  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
-  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
-  icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
-  type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
-  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
-  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-const formList = ref<FormVO[]>([]) // 流程表单的下拉框的数据
-const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
-const userList = ref<UserVO[]>([]) // 用户列表
-const selectedStartUsers = ref<UserVO[]>([]) // 已选择的发起人列表
-const selectedManagerUsers = ref<UserVO[]>([]) // 已选择的管理员列表
-const userSelectFormRef = ref() // 用户选择弹窗 ref
-const currentSelectType = ref<'start' | 'manager'>('start') // 当前选择的是发起人还是管理员
-
-/** 打开弹窗 */
-const open = async (type: string, id?: string) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await ModelApi.getModel(id)
-    } finally {
-      formLoading.value = false
-    }
-    // 加载数据时，根据已有的用户ID列表初始化已选用户
-    if (formData.value.startUserIds?.length) {
-      formData.value.startUserType = 1
-      selectedStartUsers.value = userList.value.filter((user) =>
-        formData.value.startUserIds.includes(user.id)
-      )
-    }
-    if (formData.value.managerUserIds?.length) {
-      formData.value.managerUserType = 1
-      selectedManagerUsers.value = userList.value.filter((user) =>
-        formData.value.managerUserIds.includes(user.id)
-      )
-    }
-  } else {
-    formData.value.managerUserIds.push(userStore.getUser.id)
-  }
-  // 获得流程表单的下拉框的数据
-  formList.value = await FormApi.getFormSimpleList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
-  // 查询用户列表
-  userList.value = await UserApi.getSimpleUserList()
-  if (props.categoryId) {
-    formData.value.category = props.categoryId
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as ModelApi.ModelVO
-    if (formType.value === 'create') {
-      await ModelApi.createModel(data)
-      // 提示，引导用户做后续的操作
-      await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
-          '<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
-          '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
-        '重要提示',
-        {
-          dangerouslyUseHTMLString: true,
-          type: 'success'
-        }
-      )
-    } else {
-      await ModelApi.updateModel(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: '',
-    key: '',
-    category: undefined,
-    icon: undefined,
-    description: '',
-    type: BpmModelType.BPMN,
-    formType: BpmModelFormType.NORMAL,
-    formId: '',
-    formCustomCreatePath: '',
-    formCustomViewPath: '',
-    visible: true,
-    startUserType: undefined,
-    managerUserType: undefined,
-    startUserIds: [],
-    managerUserIds: []
-  }
-  formRef.value?.resetFields()
-  selectedStartUsers.value = []
-  selectedManagerUsers.value = []
-}
-
-/** 处理发起人类型变化 */
-const handleStartUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedStartUsers.value = []
-    formData.value.startUserIds = []
-  }
-}
-
-/** 处理管理员类型变化 */
-const handleManagerUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedManagerUsers.value = []
-    formData.value.managerUserIds = []
-  }
-}
-
-/** 打开发起人选择 */
-const openStartUserSelect = () => {
-  currentSelectType.value = 'start'
-  userSelectFormRef.value.open(0, selectedStartUsers.value)
-}
-
-/** 打开管理员选择 */
-const openManagerUserSelect = () => {
-  currentSelectType.value = 'manager'
-  userSelectFormRef.value.open(0, selectedManagerUsers.value)
-}
-
-/** 处理用户选择确认 */
-const handleUserSelectConfirm = (_, users: UserVO[]) => {
-  if (currentSelectType.value === 'start') {
-    selectedStartUsers.value = users
-    formData.value.startUserIds = users.map((u) => u.id)
-  } else {
-    selectedManagerUsers.value = users
-    formData.value.managerUserIds = users.map((u) => u.id)
-  }
-}
-
-/** 移除发起人 */
-const handleRemoveStartUser = (user: UserVO) => {
-  selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id)
-}
-
-/** 移除管理员 */
-const handleRemoveManagerUser = (user: UserVO) => {
-  selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
-  formData.value.managerUserIds = formData.value.managerUserIds.filter(
-    (id: number) => id !== user.id
-  )
-}
-</script>
-
-<style lang="scss" scoped>
-.bg-gray-100 {
-  background-color: #f5f7fa;
-  transition: all 0.3s;
-
-  &:hover {
-    background-color: #e6e8eb;
-  }
-
-  .ep-close {
-    font-size: 14px;
-    color: #909399;
-    transition: color 0.3s;
-
-    &:hover {
-      color: #f56c6c;
-    }
-  }
-}
-</style>

src/views/bpm/model/definition/index.vue

@@ -3,40 +3,60 @@
 
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="定义编号" align="center" prop="id" width="400" />
-      <el-table-column label="流程名称" align="center" prop="name" width="200">
-        <template #default="scope">
-          <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
-            <span>{{ scope.row.name }}</span>
-          </el-button>
+      <el-table-column label="定义编号" align="center" prop="id" min-width="250" />
+      <el-table-column label="流程名称" align="center" prop="name" min-width="150" />
+      <el-table-column label="流程图标" align="center" min-width="50">
+        <template #default="{ row }">
+          <el-image v-if="row.icon" :src="row.icon" class="h-24px w-24pxrounded" />
         </template>
       </el-table-column>
-      <el-table-column label="定义分类" align="center" prop="categoryName" width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" width="200">
+      <el-table-column label="可见范围" prop="startUserIds" min-width="100">
+        <template #default="{ row }">
+          <el-text v-if="!row.startUsers?.length"> 全部可见 </el-text>
+          <el-text v-else-if="row.startUsers.length === 1">
+            {{ row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ row.startUsers[0].nickname }}等 {{ row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程类型" prop="modelType" min-width="120">
+        <template #default="{ row }">
+          <dict-tag :value="row.modelType" :type="DICT_TYPE.BPM_MODEL_TYPE" />
+        </template>
+      </el-table-column>
+      <el-table-column label="表单信息" prop="formType" min-width="150">
         <template #default="scope">
           <el-button
-            v-if="scope.row.formType === 10"
+            v-if="scope.row.formType === BpmModelFormType.NORMAL"
             type="primary"
             link
             @click="handleFormDetail(scope.row)"
           >
             <span>{{ scope.row.formName }}</span>
           </el-button>
-          <el-button v-else type="primary" link @click="handleFormDetail(scope.row)">
+          <el-button
+            v-else-if="scope.row.formType === BpmModelFormType.CUSTOM"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
             <span>{{ scope.row.formCustomCreatePath }}</span>
           </el-button>
+          <label v-else>暂无表单</label>
         </template>
       </el-table-column>
-      <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
+      <el-table-column label="流程版本" align="center" min-width="80">
         <template #default="scope">
-          <el-tag v-if="scope.row">v{{ scope.row.version }}</el-tag>
-          <el-tag type="warning" v-else>未部署</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" prop="version" width="80">
-        <template #default="scope">
-          <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
-          <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
+          <el-tag>v{{ scope.row.version }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -46,13 +66,18 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column
-        label="定义描述"
-        align="center"
-        prop="description"
-        width="300"
-        show-overflow-tooltip
-      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openModelForm(scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+          >
+            恢复
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -67,18 +92,14 @@
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
   </Dialog>
-
-  <!-- 弹窗：流程模型图的预览 -->
-  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <MyProcessViewer style="height: 700px" key="designer" :xml="bpmnXml" />
-  </Dialog>
 </template>
 
 <script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
-import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import * as DefinitionApi from '@/api/bpm/definition'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { DICT_TYPE } from '@/utils/dict'
+import { BpmModelFormType } from '@/utils/constants'
 
 defineOptions({ name: 'BpmProcessDefinition' })
 
@@ -113,7 +134,7 @@ const formDetailPreview = ref({
   option: {}
 })
 const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
+  if (row.formType == BpmModelFormType.NORMAL) {
     // 设置表单
     setConfAndFields2(formDetailPreview, row.formConf, row.formFields)
     // 弹窗打开
@@ -125,15 +146,12 @@ const handleFormDetail = async (row: any) => {
   }
 }
 
-/** 流程图的详情按钮操作 */
-const bpmnDetailVisible = ref(false)
-const bpmnXml = ref('')
-const handleBpmnDetail = async (row: any) => {
-  // 设置可见
-  bpmnXml.value = ''
-  bpmnDetailVisible.value = true
-  // 加载 BPMN XML
-  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
+/** 恢复流程模型弹窗 */
+const openModelForm = async (id?: number) => {
+  await push({
+    name: 'BpmModelUpdate',
+    params: { id, type: 'definition' }
+  })
 }
 
 /** 初始化 **/
@@ -141,3 +159,16 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.flow-icon {
+  display: flex;
+  width: 38px;
+  height: 38px;
+  margin-right: 10px;
+  background-color: var(--el-color-primary);
+  border-radius: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/bpm/model/editor/index.vue

@@ -1,279 +0,0 @@
-<template>
-  <ContentWrap>
-    <!-- 流程设计器，负责绘制流程等 -->
-    <MyProcessDesigner
-      key="designer"
-      v-model="xmlString"
-      :value="xmlString"
-      v-bind="controlForm"
-      keyboard
-      ref="processDesigner"
-      @init-finished="initModeler"
-      :additionalModel="controlForm.additionalModel"
-      :model="model"
-      @save="save"
-    />
-    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
-    <MyProcessPenal
-      v-if="isModelerReady && modeler"
-      key="penal"
-      :bpmnModeler="modeler"
-      :prefix="controlForm.prefix"
-      class="process-panel"
-      :model="model"
-    />
-  </ContentWrap>
-</template>
-
-<script lang="ts" setup>
-import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
-// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
-import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
-// 自定义左侧菜单（修改 默认任务 为 用户任务）
-import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
-import * as ModelApi from '@/api/bpm/model'
-
-defineOptions({ name: 'BpmModelEditor' })
-
-const props = defineProps<{
-  modelId?: string
-  modelKey?: string
-  modelName?: string
-  value?: string
-}>()
-
-const emit = defineEmits(['success', 'init-finished'])
-const message = useMessage() // 国际化
-
-// 表单信息
-const formFields = ref<string[]>([])
-const formType = ref(20)
-provide('formFields', formFields)
-provide('formType', formType)
-
-const xmlString = ref<string>('') // BPMN XML
-const modeler = shallowRef() // BPMN Modeler
-const processDesigner = ref()
-const isModelerReady = ref(false)
-const controlForm = ref({
-  simulation: true,
-  labelEditing: false,
-  labelVisible: false,
-  prefix: 'flowable',
-  headerButtonSize: 'mini',
-  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
-})
-const model = ref<ModelApi.ModelVO>() // 流程模型的信息
-
-// 初始化 bpmnInstances
-const initBpmnInstances = () => {
-  if (!modeler.value) return false
-  try {
-    const instances = {
-      modeler: modeler.value,
-      modeling: modeler.value.get('modeling'),
-      moddle: modeler.value.get('moddle'),
-      eventBus: modeler.value.get('eventBus'),
-      bpmnFactory: modeler.value.get('bpmnFactory'),
-      elementFactory: modeler.value.get('elementFactory'),
-      elementRegistry: modeler.value.get('elementRegistry'),
-      replace: modeler.value.get('replace'),
-      selection: modeler.value.get('selection')
-    }
-
-    // 检查所有实例是否都存在
-    return Object.values(instances).every((instance) => instance)
-  } catch (error) {
-    console.error('初始化 bpmnInstances 失败:', error)
-    return false
-  }
-}
-
-/** 初始化 modeler */
-const initModeler = async (item) => {
-  try {
-    modeler.value = item
-    // 等待 modeler 初始化完成
-    await nextTick()
-
-    // 确保 modeler 的所有实例都已经准备好
-    if (initBpmnInstances()) {
-      isModelerReady.value = true
-      emit('init-finished')
-
-      // 初始化完成后，设置初始值
-      if (props.modelId) {
-        // 编辑模式
-        const data = await ModelApi.getModel(props.modelId)
-        model.value = {
-          ...data,
-          bpmnXml: undefined // 清空 bpmnXml 属性
-        }
-        xmlString.value = data.bpmnXml || getDefaultBpmnXml(data.key, data.name)
-      } else if (props.modelKey && props.modelName) {
-        // 新建模式
-        xmlString.value = props.value || getDefaultBpmnXml(props.modelKey, props.modelName)
-        model.value = {
-          key: props.modelKey,
-          name: props.modelName
-        } as ModelApi.ModelVO
-      }
-
-      // 导入XML并刷新视图
-      await nextTick()
-      try {
-        await modeler.value.importXML(xmlString.value)
-        if (processDesigner.value?.refresh) {
-          processDesigner.value.refresh()
-        }
-      } catch (error) {
-        console.error('导入XML失败:', error)
-      }
-    } else {
-      console.error('modeler 实例未完全初始化')
-    }
-  } catch (error) {
-    console.error('初始化 modeler 失败:', error)
-  }
-}
-
-/** 获取默认的BPMN XML */
-const getDefaultBpmnXml = (key: string, name: string) => {
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
-  <process id="${key}" name="${name}" isExecutable="true" />
-  <bpmndi:BPMNDiagram id="BPMNDiagram">
-    <bpmndi:BPMNPlane id="${key}_di" bpmnElement="${key}" />
-  </bpmndi:BPMNDiagram>
-</definitions>`
-}
-
-/** 添加/修改模型 */
-const save = async (bpmnXml: string) => {
-  try {
-    xmlString.value = bpmnXml
-    if (props.modelId) {
-      // 编辑模式
-      const data = {
-        ...model.value,
-        bpmnXml: bpmnXml
-      } as unknown as ModelApi.ModelVO
-      await ModelApi.updateModelBpmn(data)
-      emit('success')
-    } else {
-      // 新建模式，直接返回XML
-      emit('success', bpmnXml)
-    }
-  } catch (error) {
-    console.error('保存失败:', error)
-    message.error('保存失败')
-  }
-}
-
-// 监听 key、name 和 value 的变化
-watch(
-  [() => props.modelKey, () => props.modelName, () => props.value],
-  async ([newKey, newName, newValue]) => {
-    if (!props.modelId && isModelerReady.value) {
-      let shouldRefresh = false
-
-      if (newKey && newName) {
-        const newXml = newValue || getDefaultBpmnXml(newKey, newName)
-        if (newXml !== xmlString.value) {
-          xmlString.value = newXml
-          shouldRefresh = true
-        }
-        model.value = {
-          ...model.value,
-          key: newKey,
-          name: newName
-        } as ModelApi.ModelVO
-      } else if (newValue && newValue !== xmlString.value) {
-        xmlString.value = newValue
-        shouldRefresh = true
-      }
-
-      if (shouldRefresh) {
-        // 确保更新后重新渲染
-        await nextTick()
-        if (processDesigner.value?.refresh) {
-          try {
-            await modeler.value?.importXML(xmlString.value)
-            processDesigner.value.refresh()
-          } catch (error) {
-            console.error('导入XML失败:', error)
-          }
-        }
-      }
-    }
-  },
-  { deep: true }
-)
-
-// 在组件卸载时清理
-onBeforeUnmount(() => {
-  isModelerReady.value = false
-  modeler.value = null
-  // 清理全局实例
-  const w = window as any
-  if (w.bpmnInstances) {
-    w.bpmnInstances = null
-  }
-})
-
-/** 获取 XML 字符串 */
-const saveXML = async () => {
-  if (!modeler.value) {
-    return { xml: xmlString.value }
-  }
-  try {
-    const result = await modeler.value.saveXML({ format: true })
-    xmlString.value = result.xml
-    return result
-  } catch (error) {
-    console.error('获取XML失败:', error)
-    return { xml: xmlString.value }
-  }
-}
-
-/** 获取SVG字符串 */
-const saveSVG = async () => {
-  if (!modeler.value) {
-    return { svg: undefined }
-  }
-  try {
-    return await modeler.value.saveSVG()
-  } catch (error) {
-    console.error('获取SVG失败:', error)
-    return { svg: undefined }
-  }
-}
-
-/** 刷新视图 */
-const refresh = async () => {
-  if (processDesigner.value?.refresh && modeler.value) {
-    try {
-      await modeler.value.importXML(xmlString.value)
-      processDesigner.value.refresh()
-    } catch (error) {
-      console.error('刷新视图失败:', error)
-    }
-  }
-}
-
-// 暴露必要的属性和方法给父组件
-defineExpose({
-  modeler,
-  isModelerReady,
-  saveXML,
-  saveSVG,
-  refresh
-})
-</script>
-<style lang="scss">
-.process-panel__container {
-  position: absolute;
-  top: 172px;
-  right: 70px;
-}
-</style>

src/views/bpm/model/form/BasicInfo.vue

@@ -6,7 +6,7 @@
           class="!w-440px"
           v-model="modelData.key"
           :disabled="!!modelData.id"
-          placeholder="请输入流标标识"
+          placeholder="请输入流程标识，以字母或下划线开头"
         />
         <el-tooltip
           class="item"
@@ -41,7 +41,7 @@
         />
       </el-select>
     </el-form-item>
-    <el-form-item label="流程图标" prop="icon" class="mb-20px">
+    <el-form-item label="流程图标" class="mb-20px">
       <UploadImg v-model="modelData.icon" :limit="1" height="64px" width="64px" />
     </el-form-item>
     <el-form-item label="流程描述" prop="description" class="mb-20px">
@@ -62,7 +62,7 @@
       <el-radio-group v-model="modelData.visible">
         <el-radio
           v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-          :key="dict.value"
+          :key="dict.value as string"
           :value="dict.value"
         >
           {{ dict.label }}
@@ -77,7 +77,6 @@
       >
         <el-option label="全员" :value="0" />
         <el-option label="指定人员" :value="1" />
-        <el-option label="均不可提交" :value="2" />
       </el-select>
       <div v-if="modelData.startUserType === 1" class="mt-2 flex flex-wrap gap-2">
         <div
@@ -97,21 +96,12 @@
           />
         </div>
         <el-button type="primary" link @click="openStartUserSelect">
-          <Icon icon="ep:plus" />选择人员
+          <Icon icon="ep:plus" /> 选择人员
         </el-button>
       </div>
     </el-form-item>
-    <el-form-item label="流程管理员" prop="managerUserType" class="mb-20px">
-      <el-select
-        v-model="modelData.managerUserType"
-        placeholder="请选择流程管理员"
-        @change="handleManagerUserTypeChange"
-      >
-        <el-option label="全员" :value="0" />
-        <el-option label="指定人员" :value="1" />
-        <el-option label="均不可提交" :value="2" />
-      </el-select>
-      <div v-if="modelData.managerUserType === 1" class="mt-2 flex flex-wrap gap-2">
+    <el-form-item label="流程管理员" prop="managerUserIds" class="mb-20px">
+      <div class="flex flex-wrap gap-2">
         <div
           v-for="user in selectedManagerUsers"
           :key="user.id"
@@ -142,14 +132,11 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { UserVO } from '@/api/system/user'
+import { CategoryVO } from '@/api/bpm/category'
 
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
   categoryList: {
-    type: Array,
+    type: Array as PropType<CategoryVO[]>,
     required: true
   },
   userList: {
@@ -158,8 +145,6 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const formRef = ref()
 const selectedStartUsers = ref<UserVO[]>([])
 const selectedManagerUsers = ref<UserVO[]>([])
@@ -170,34 +155,36 @@ const rules = {
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
   key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
   category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
-  icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
   managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 }
 
 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()
 
 // 初始化选中的用户
 watch(
-  () => props.modelValue,
+  () => modelData.value,
   (newVal) => {
     if (newVal.startUserIds?.length) {
       selectedStartUsers.value = props.userList.filter((user: UserVO) =>
         newVal.startUserIds.includes(user.id)
       ) as UserVO[]
+    } else {
+      selectedStartUsers.value = []
     }
     if (newVal.managerUserIds?.length) {
       selectedManagerUsers.value = props.userList.filter((user: UserVO) =>
         newVal.managerUserIds.includes(user.id)
       ) as UserVO[]
+    } else {
+      selectedManagerUsers.value = []
     }
   },
-  { immediate: true }
+  {
+    immediate: true
+  }
 )
 
 /** 打开发起人选择 */
@@ -215,58 +202,42 @@ const openManagerUserSelect = () => {
 /** 处理用户选择确认 */
 const handleUserSelectConfirm = (_, users: UserVO[]) => {
   if (currentSelectType.value === 'start') {
-    selectedStartUsers.value = users
-    emit('update:modelValue', {
+    modelData.value = {
       ...modelData.value,
       startUserIds: users.map((u) => u.id)
-    })
+    }
   } else {
-    selectedManagerUsers.value = users
-    emit('update:modelValue', {
+    modelData.value = {
       ...modelData.value,
       managerUserIds: users.map((u) => u.id)
-    })
+    }
   }
 }
 
 /** 处理发起人类型变化 */
 const handleStartUserTypeChange = (value: number) => {
   if (value !== 1) {
-    selectedStartUsers.value = []
-    emit('update:modelValue', {
+    modelData.value = {
       ...modelData.value,
       startUserIds: []
-    })
-  }
-}
-
-/** 处理管理员类型变化 */
-const handleManagerUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedManagerUsers.value = []
-    emit('update:modelValue', {
-      ...modelData.value,
-      managerUserIds: []
-    })
+    }
   }
 }
 
 /** 移除发起人 */
 const handleRemoveStartUser = (user: UserVO) => {
-  selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  emit('update:modelValue', {
+  modelData.value = {
     ...modelData.value,
     startUserIds: modelData.value.startUserIds.filter((id: number) => id !== user.id)
-  })
+  }
 }
 
 /** 移除管理员 */
 const handleRemoveManagerUser = (user: UserVO) => {
-  selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
-  emit('update:modelValue', {
+  modelData.value = {
     ...modelData.value,
     managerUserIds: modelData.value.managerUserIds.filter((id: number) => id !== user.id)
-  })
+  }
 }
 
 /** 表单校验 */

src/views/bpm/model/form/ExtraSettings.vue

@@ -0,0 +1,366 @@
+<template>
+  <el-form ref="formRef" :model="modelData" label-width="120px" class="mt-20px">
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">提交人权限</el-text>
+      </template>
+      <div class="flex flex-col">
+        <el-checkbox v-model="modelData.allowCancelRunningProcess" label="允许撤销审批中的申请" />
+        <div class="ml-22px">
+          <el-text type="info"> 第一个审批节点通过后，提交人仍可撤销申请 </el-text>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item v-if="modelData.processIdRule" class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">流程编码</el-text>
+      </template>
+      <div class="flex flex-col">
+        <div>
+          <el-input
+            v-model="modelData.processIdRule.prefix"
+            class="w-130px!"
+            placeholder="前缀"
+            :disabled="!modelData.processIdRule.enable"
+          >
+            <template #prepend>
+              <el-checkbox v-model="modelData.processIdRule.enable" />
+            </template>
+          </el-input>
+          <el-select
+            v-model="modelData.processIdRule.infix"
+            class="w-130px! ml-5px"
+            placeholder="中缀"
+            :disabled="!modelData.processIdRule.enable"
+          >
+            <el-option
+              v-for="item in timeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-input
+            v-model="modelData.processIdRule.postfix"
+            class="w-80px! ml-5px"
+            placeholder="后缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+          <el-input-number
+            v-model="modelData.processIdRule.length"
+            class="w-120px! ml-5px"
+            :min="5"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </div>
+        <div class="ml-22px" v-if="modelData.processIdRule.enable">
+          <el-text type="info"> 编码示例：{{ numberExample }} </el-text>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">自动去重</el-text>
+      </template>
+      <div class="flex flex-col">
+        <div>
+          <el-text> 同一审批人在流程中重复出现时： </el-text>
+        </div>
+        <el-radio-group v-model="modelData.autoApprovalType">
+          <div class="flex flex-col">
+            <el-radio :value="0">不自动通过</el-radio>
+            <el-radio :value="1">仅审批一次，后续重复的审批节点均自动通过</el-radio>
+            <el-radio :value="2">仅针对连续审批的节点自动通过</el-radio>
+          </div>
+        </el-radio-group>
+      </div>
+    </el-form-item>
+    <el-form-item v-if="modelData.titleSetting" class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">标题设置</el-text>
+      </template>
+      <div class="flex flex-col">
+        <el-radio-group v-model="modelData.titleSetting.enable">
+          <div class="flex flex-col">
+            <el-radio :value="false"
+              >系统默认 <el-text type="info"> 展示流程名称 </el-text></el-radio
+            >
+            <el-radio :value="true">
+              自定义标题
+              <el-text>
+                <el-tooltip content="输入字符 '{' 即可插入表单字段" effect="light" placement="top">
+                  <Icon icon="ep:question-filled" class="ml-5px" />
+                </el-tooltip>
+              </el-text>
+            </el-radio>
+          </div>
+        </el-radio-group>
+        <el-mention
+          v-if="modelData.titleSetting.enable"
+          v-model="modelData.titleSetting.title"
+          type="textarea"
+          prefix="{"
+          split="}"
+          whole
+          :options="formFieldOptions4Title"
+          placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
+          class="w-600px!"
+        />
+      </div>
+    </el-form-item>
+    <el-form-item
+      v-if="modelData.summarySetting && modelData.formType === BpmModelFormType.NORMAL"
+      class="mb-20px"
+    >
+      <template #label>
+        <el-text size="large" tag="b">摘要设置</el-text>
+      </template>
+      <div class="flex flex-col">
+        <el-radio-group v-model="modelData.summarySetting.enable">
+          <div class="flex flex-col">
+            <el-radio :value="false">
+              系统默认 <el-text type="info"> 展示表单前 3 个字段 </el-text>
+            </el-radio>
+            <el-radio :value="true"> 自定义摘要 </el-radio>
+          </div>
+        </el-radio-group>
+        <el-select
+          class="w-500px!"
+          v-if="modelData.summarySetting.enable"
+          v-model="modelData.summarySetting.summary"
+          multiple
+          placeholder="请选择要展示的表单字段"
+        >
+          <el-option
+            v-for="item in formFieldOptions4Summary"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </el-form-item>
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">流程前置通知</el-text>
+      </template>
+      <div class="flex flex-col w-100%">
+        <div class="flex">
+          <el-switch
+            v-model="processBeforeTriggerEnable"
+            @change="handlePreProcessNotifyEnableChange"
+          />
+          <div class="ml-80px">流程启动后通知</div>
+        </div>
+        <HttpRequestSetting
+          v-if="processBeforeTriggerEnable"
+          v-model:setting="modelData.processBeforeTriggerSetting"
+          :responseEnable="true"
+          :formItemPrefix="'processBeforeTriggerSetting'"
+        />
+      </div>
+    </el-form-item>
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">流程后置通知</el-text>
+      </template>
+      <div class="flex flex-col w-100%">
+        <div class="flex">
+          <el-switch
+            v-model="processAfterTriggerEnable"
+            @change="handlePostProcessNotifyEnableChange"
+          />
+          <div class="ml-80px">流程启动后通知</div>
+        </div>
+        <HttpRequestSetting
+          v-if="processAfterTriggerEnable"
+          v-model:setting="modelData.processAfterTriggerSetting"
+          :responseEnable="true"
+          :formItemPrefix="'processAfterTriggerSetting'"
+        />
+      </div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { BpmAutoApproveType, BpmModelFormType } from '@/utils/constants'
+import * as FormApi from '@/api/bpm/form'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
+import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/consts'
+import HttpRequestSetting from '@/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue'
+
+const modelData = defineModel<any>()
+
+/** 自定义 ID 流程编码 */
+const timeOptions = ref([
+  {
+    value: '',
+    label: '无'
+  },
+  {
+    value: 'DAY',
+    label: '精确到日'
+  },
+  {
+    value: 'HOUR',
+    label: '精确到时'
+  },
+  {
+    value: 'MINUTE',
+    label: '精确到分'
+  },
+  {
+    value: 'SECOND',
+    label: '精确到秒'
+  }
+])
+const numberExample = computed(() => {
+  if (modelData.value.processIdRule.enable) {
+    let infix = ''
+    switch (modelData.value.processIdRule.infix) {
+      case 'DAY':
+        infix = dayjs().format('YYYYMMDD')
+        break
+      case 'HOUR':
+        infix = dayjs().format('YYYYMMDDHH')
+        break
+      case 'MINUTE':
+        infix = dayjs().format('YYYYMMDDHHmm')
+        break
+      case 'SECOND':
+        infix = dayjs().format('YYYYMMDDHHmmss')
+        break
+      default:
+        break
+    }
+    return (
+      modelData.value.processIdRule.prefix +
+      infix +
+      modelData.value.processIdRule.postfix +
+      '1'.padStart(modelData.value.processIdRule.length - 1, '0')
+    )
+  } else {
+    return ''
+  }
+})
+
+/** 是否开启流程前置通知 */
+const processBeforeTriggerEnable = ref(false)
+const handlePreProcessNotifyEnableChange = (val: boolean | string | number) => {
+  if (val) {
+    modelData.value.processBeforeTriggerSetting = {
+      url: '',
+      header: [],
+      body: [],
+      response: []
+    }
+  } else {
+    modelData.value.processBeforeTriggerSetting = null
+  }
+}
+
+/** 是否开启流程后置通知 */
+const processAfterTriggerEnable = ref(false)
+const handlePostProcessNotifyEnableChange = (val: boolean | string | number) => {
+  if (val) {
+    modelData.value.processAfterTriggerSetting = {
+      url: '',
+      header: [],
+      body: [],
+      response: []
+    }
+  } else {
+    modelData.value.processAfterTriggerSetting = null
+  }
+}
+
+/** 表单选项 */
+const formField = ref<Array<{ field: string; title: string }>>([])
+const formFieldOptions4Title = computed(() => {
+  let cloneFormField = formField.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field
+    }
+  })
+  // 固定添加发起人 ID 字段
+  cloneFormField.unshift({
+    label: '流程名称',
+    value: ProcessVariableEnum.PROCESS_DEFINITION_NAME
+  })
+  cloneFormField.unshift({
+    label: '发起时间',
+    value: ProcessVariableEnum.START_TIME
+  })
+  cloneFormField.unshift({
+    label: '发起人',
+    value: ProcessVariableEnum.START_USER_ID
+  })
+  return cloneFormField
+})
+const formFieldOptions4Summary = computed(() => {
+  return formField.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field
+    }
+  })
+})
+
+/** 兼容以前未配置更多设置的流程 */
+const initData = () => {
+  if (!modelData.value.processIdRule) {
+    modelData.value.processIdRule = {
+      enable: false,
+      prefix: '',
+      infix: '',
+      postfix: '',
+      length: 5
+    }
+  }
+  if (!modelData.value.autoApprovalType) {
+    modelData.value.autoApprovalType = BpmAutoApproveType.NONE
+  }
+  if (!modelData.value.titleSetting) {
+    modelData.value.titleSetting = {
+      enable: false,
+      title: ''
+    }
+  }
+  if (!modelData.value.summarySetting) {
+    modelData.value.summarySetting = {
+      enable: false,
+      summary: []
+    }
+  }
+  if (modelData.value.processBeforeTriggerSetting) {
+    processBeforeTriggerEnable.value = true
+  }
+  if (modelData.value.processAfterTriggerSetting) {
+    processAfterTriggerEnable.value = true
+  }
+}
+defineExpose({ initData })
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await FormApi.getForm(newFormId)
+      const result: Array<{ field: string; title: string }> = []
+      if (data.fields) {
+        data.fields.forEach((fieldStr: string) => {
+          parseFormFields(JSON.parse(fieldStr), result)
+        })
+      }
+      formField.value = result
+    } else {
+      formField.value = []
+    }
+  },
+  { immediate: true }
+)
+</script>

src/views/bpm/model/form/FormDesign.vue

@@ -11,12 +11,12 @@
         </el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item v-if="modelData.formType === 10" label="流程表单" prop="formId">
+    <el-form-item v-if="modelData.formType === BpmModelFormType.NORMAL" label="流程表单" prop="formId">
       <el-select v-model="modelData.formId" clearable style="width: 100%">
         <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
       </el-select>
     </el-form-item>
-    <el-form-item v-if="modelData.formType === 20" label="表单提交路由" prop="formCustomCreatePath">
+    <el-form-item v-if="modelData.formType === BpmModelFormType.CUSTOM" label="表单提交路由" prop="formCustomCreatePath">
       <el-input
         v-model="modelData.formCustomCreatePath"
         placeholder="请输入表单提交路由"
@@ -31,7 +31,7 @@
         <Icon icon="ep:question" class="ml-5px" />
       </el-tooltip>
     </el-form-item>
-    <el-form-item v-if="modelData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
+    <el-form-item v-if="modelData.formType === BpmModelFormType.CUSTOM" label="表单查看地址" prop="formCustomViewPath">
       <el-input
         v-model="modelData.formCustomViewPath"
         placeholder="请输入表单查看的组件地址"
@@ -48,7 +48,7 @@
     </el-form-item>
     <!-- 表单预览 -->
     <div
-      v-if="modelData.formType === 10 && modelData.formId && formPreview.rule.length > 0"
+      v-if="modelData.formType === BpmModelFormType.NORMAL && modelData.formId && formPreview.rule.length > 0"
       class="mt-20px"
     >
       <div class="flex items-center mb-15px">
@@ -68,27 +68,19 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelFormType } from '@/utils/constants'
 
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
   formList: {
     type: Array,
     required: true
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const formRef = ref()
 
 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()
 
 // 表单预览数据
 const formPreview = ref({
@@ -105,7 +97,7 @@ const formPreview = ref({
 watch(
   () => modelData.value.formId,
   async (newFormId) => {
-    if (newFormId && modelData.value.formType === 10) {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
       const data = await FormApi.getForm(newFormId)
       setConfAndFields2(formPreview.value, data.conf, data.fields)
       // 设置只读

src/views/bpm/model/form/ProcessDesign.vue

@@ -6,10 +6,7 @@
       :model-id="modelData.id"
       :model-key="modelData.key"
       :model-name="modelData.name"
-      :value="currentBpmnXml"
-      ref="bpmnEditorRef"
       @success="handleDesignSuccess"
-      @init-finished="handleEditorInit"
     />
   </template>
 
@@ -21,150 +18,26 @@
       :model-key="modelData.key"
       :model-name="modelData.name"
       :start-user-ids="modelData.startUserIds"
-      :value="currentSimpleModel"
-      ref="simpleEditorRef"
       @success="handleDesignSuccess"
-      @init-finished="handleEditorInit"
     />
   </template>
 </template>
 
 <script lang="ts" setup>
 import { BpmModelType } from '@/utils/constants'
-import BpmModelEditor from '../editor/index.vue'
+import BpmModelEditor from './editor/index.vue'
 import SimpleModelDesign from '../../simple/SimpleModelDesign.vue'
 
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'success'])
-
-const bpmnEditorRef = ref()
-const simpleEditorRef = ref()
-const isEditorInitialized = ref(false)
-
 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()
 
-// 保存当前的流程XML或数据
-const currentBpmnXml = ref('')
-const currentSimpleModel = ref('')
-
-// 初始化或更新当前的XML数据
-const initOrUpdateXmlData = () => {
-  if (modelData.value) {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      currentBpmnXml.value = modelData.value.bpmnXml || ''
-    } else {
-      currentSimpleModel.value = modelData.value.simpleModel || ''
-    }
-  }
-}
-
-// 监听modelValue的变化，更新数据
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal) {
-      if (newVal.type === BpmModelType.BPMN) {
-        if (newVal.bpmnXml && newVal.bpmnXml !== currentBpmnXml.value) {
-          currentBpmnXml.value = newVal.bpmnXml
-          // 如果编辑器已经初始化，刷新视图
-          if (isEditorInitialized.value && bpmnEditorRef.value?.refresh) {
-            nextTick(() => {
-              bpmnEditorRef.value.refresh()
-            })
-          }
-        }
-      } else {
-        if (newVal.simpleModel && newVal.simpleModel !== currentSimpleModel.value) {
-          currentSimpleModel.value = newVal.simpleModel
-          // 如果编辑器已经初始化，刷新视图
-          if (isEditorInitialized.value && simpleEditorRef.value?.refresh) {
-            nextTick(() => {
-              simpleEditorRef.value.refresh()
-            })
-          }
-        }
-      }
-    }
-  },
-  { immediate: true, deep: true }
-)
-
-/** 编辑器初始化完成的回调 */
-const handleEditorInit = async () => {
-  isEditorInitialized.value = true
-
-  // 等待下一个tick，确保编辑器已经准备好
-  await nextTick()
-
-  // 初始化完成后，设置初始值
-  if (modelData.value.type === BpmModelType.BPMN) {
-    if (modelData.value.bpmnXml) {
-      currentBpmnXml.value = modelData.value.bpmnXml
-      if (bpmnEditorRef.value?.refresh) {
-        await nextTick()
-        bpmnEditorRef.value.refresh()
-      }
-    }
-  } else {
-    if (modelData.value.simpleModel) {
-      currentSimpleModel.value = modelData.value.simpleModel
-      if (simpleEditorRef.value?.refresh) {
-        await nextTick()
-        simpleEditorRef.value.refresh()
-      }
-    }
-  }
-}
-
-/** 获取当前流程数据 */
-const getProcessData = async () => {
-  try {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      if (!bpmnEditorRef.value || !isEditorInitialized.value) {
-        return currentBpmnXml.value || undefined
-      }
-      const { xml } = await bpmnEditorRef.value.saveXML()
-      if (xml) {
-        currentBpmnXml.value = xml
-        return xml
-      }
-    } else {
-      if (!simpleEditorRef.value || !isEditorInitialized.value) {
-        return currentSimpleModel.value || undefined
-      }
-      const flowData = await simpleEditorRef.value.getCurrentFlowData()
-      if (flowData) {
-        currentSimpleModel.value = flowData
-        return flowData
-      }
-    }
-    return modelData.value.type === BpmModelType.BPMN
-      ? currentBpmnXml.value
-      : currentSimpleModel.value
-  } catch (error) {
-    console.error('获取流程数据失败:', error)
-    return modelData.value.type === BpmModelType.BPMN
-      ? currentBpmnXml.value
-      : currentSimpleModel.value
-  }
-}
+const processData = inject('processData') as Ref
 
 /** 表单校验 */
 const validate = async () => {
   try {
     // 获取最新的流程数据
-    const processData = await getProcessData()
-    if (!processData) {
+    if (!processData.value) {
       throw new Error('请设计流程')
     }
     return true
@@ -172,27 +45,19 @@ const validate = async () => {
     throw error
   }
 }
-
 /** 处理设计器保存成功 */
 const handleDesignSuccess = async (data?: any) => {
   if (data) {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      currentBpmnXml.value = data
-    } else {
-      currentSimpleModel.value = data
-    }
-
     // 创建新的对象以触发响应式更新
     const newModelData = {
       ...modelData.value,
       bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
       simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
     }
-
     // 使用emit更新父组件的数据
     await nextTick()
-    emit('update:modelValue', newModelData)
-    emit('success', data)
+    //更新表单的模型数据部分
+    modelData.value = newModelData
   }
 }
 
@@ -200,36 +65,7 @@ const handleDesignSuccess = async (data?: any) => {
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name)
 })
-
-// 组件创建时初始化数据
-onMounted(() => {
-  initOrUpdateXmlData()
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-  try {
-    // 获取并保存最新的流程数据
-    const data = await getProcessData()
-    if (data) {
-      // 创建新的对象以触发响应式更新
-      const newModelData = {
-        ...modelData.value,
-        bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
-        simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
-      }
-
-      // 使用emit更新父组件的数据
-      await nextTick()
-      emit('update:modelValue', newModelData)
-    }
-  } catch (error) {
-    console.error('保存数据失败:', error)
-  }
-})
-
 defineExpose({
-  validate,
-  getProcessData
+  validate
 })
 </script>

src/views/bpm/model/form/editor/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <ContentWrap>
+    <!-- 流程设计器，负责绘制流程等 -->
+    <MyProcessDesigner
+      key="designer"
+      v-model="xmlString"
+      :value="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      @init-finished="initModeler"
+      :additionalModel="controlForm.additionalModel"
+      :model="model"
+      @save="save"
+      :process-id="modelKey"
+      :process-name="modelName"
+    />
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <MyProcessPenal
+      v-if="modeler"
+      key="penal"
+      :bpmnModeler="modeler"
+      :prefix="controlForm.prefix"
+      class="process-panel"
+      :model="model"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
+import * as ModelApi from '@/api/bpm/model'
+import { BpmModelFormType } from '@/utils/constants'
+import * as FormApi from '@/api/bpm/form'
+
+defineOptions({ name: 'BpmModelEditor' })
+
+defineProps<{
+  modelId?: string
+  modelKey: string
+  modelName: string
+  value?: string
+}>()
+
+const emit = defineEmits(['success', 'init-finished'])
+const message = useMessage() // 国际化
+
+// 表单信息
+const formFields = ref<string[]>([])
+// 表单类型，暂仅限流程表单
+const formType = ref(BpmModelFormType.NORMAL)
+provide('formFields', formFields)
+provide('formType', formType)
+
+// 注入流程数据
+const xmlString = inject('processData') as Ref
+// 注入模型数据
+const modelData = inject('modelData') as Ref
+
+const modeler = shallowRef() // BPMN Modeler
+const processDesigner = ref()
+const controlForm = ref({
+  simulation: true,
+  labelEditing: false,
+  labelVisible: false,
+  prefix: 'flowable',
+  headerButtonSize: 'mini',
+  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+})
+const model = ref<ModelApi.ModelVO>() // 流程模型的信息
+
+/** 初始化 modeler */
+const initModeler = async (item: any) => {
+  // 先初始化模型数据
+  model.value = modelData.value
+  modeler.value = item
+}
+
+/** 添加/修改模型 */
+const save = async (bpmnXml: string) => {
+  try {
+    xmlString.value = bpmnXml
+    emit('success', bpmnXml)
+  } catch (error) {
+    console.error('保存失败:', error)
+    message.error('保存失败')
+  }
+}
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await FormApi.getForm(newFormId)
+      formFields.value = data.fields
+    } else {
+      formFields.value = []
+    }
+  },
+  { immediate: true }
+)
+
+// 在组件卸载时清理
+onBeforeUnmount(() => {
+  modeler.value = null
+  // 清理全局实例
+  const w = window as any
+  if (w.bpmnInstances) {
+    w.bpmnInstances = null
+  }
+})
+</script>
+<style lang="scss">
+.process-panel__container {
+  position: absolute;
+  top: 172px;
+  right: 70px;
+}
+</style>

src/views/bpm/model/form/index.vue

@@ -44,8 +44,13 @@
 
         <!-- 右侧按钮 -->
         <div class="w-200px flex items-center justify-end gap-2">
-          <el-button v-if="route.params.id" type="success" @click="handleDeploy">发 布</el-button>
-          <el-button type="primary" @click="handleSave">保 存</el-button>
+          <el-button v-if="actionType === 'update'" type="success" @click="handleDeploy">
+            发 布
+          </el-button>
+          <el-button type="primary" @click="handleSave">
+            <span v-if="actionType === 'definition'">恢 复</span>
+            <span v-else>保 存</span>
+          </el-button>
         </div>
       </div>
 
@@ -67,12 +72,12 @@
         </div>
 
         <!-- 第三步：流程设计 -->
-        <ProcessDesign
-          v-if="currentStep === 2"
-          v-model="formData"
-          ref="processDesignRef"
-          @success="handleDesignSuccess"
-        />
+        <ProcessDesign v-if="currentStep === 2" v-model="formData" ref="processDesignRef" />
+
+        <!-- 第四步：更多设置 -->
+        <div v-show="currentStep === 3" class="mx-auto w-700px">
+          <ExtraSettings v-model="formData" ref="extraSettingsRef" />
+        </div>
       </div>
     </div>
   </ContentWrap>
@@ -81,19 +86,23 @@
 <script lang="ts" setup>
 import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from '@/hooks/web/useMessage'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useUserStoreWithOut } from '@/store/modules/user'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import * as UserApi from '@/api/system/user'
-import { useUserStoreWithOut } from '@/store/modules/user'
-import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import * as DefinitionApi from '@/api/bpm/definition'
+import { BpmModelFormType, BpmModelType, BpmAutoApproveType } from '@/utils/constants'
 import BasicInfo from './BasicInfo.vue'
 import FormDesign from './FormDesign.vue'
 import ProcessDesign from './ProcessDesign.vue'
-import { useTagsViewStore } from '@/store/modules/tagsView'
+import ExtraSettings from './ExtraSettings.vue'
+import { useTagsView } from '@/hooks/web/useTagsView'
 
 const router = useRouter()
 const { delView } = useTagsViewStore() // 视图操作
+const tagsView = useTagsView()
 const route = useRoute()
 const message = useMessage()
 const userStore = useUserStoreWithOut()
@@ -102,6 +111,7 @@ const userStore = useUserStoreWithOut()
 const basicInfoRef = ref()
 const formDesignRef = ref()
 const processDesignRef = ref()
+const extraSettingsRef = ref()
 
 /** 步骤校验函数 */
 const validateBasic = async () => {
@@ -118,11 +128,13 @@ const validateProcess = async () => {
   await processDesignRef.value?.validate()
 }
 
-const currentStep = ref(0) // 步骤控制
+const currentStep = ref(-1) // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
+
 const steps = [
   { title: '基本信息', validator: validateBasic },
   { title: '表单设计', validator: validateForm },
-  { title: '流程设计', validator: validateProcess }
+  { title: '流程设计', validator: validateProcess },
+  { title: '更多设置', validator: null }
 ]
 
 // 表单数据
@@ -140,24 +152,70 @@ const formData: any = ref({
   formCustomViewPath: '',
   visible: true,
   startUserType: undefined,
-  managerUserType: undefined,
   startUserIds: [],
-  managerUserIds: []
+  managerUserIds: [],
+  allowCancelRunningProcess: true,
+  processIdRule: {
+    enable: false,
+    prefix: '',
+    infix: '',
+    postfix: '',
+    length: 5
+  },
+  autoApprovalType: BpmAutoApproveType.NONE,
+  titleSetting: {
+    enable: false,
+    title: ''
+  },
+  summarySetting: {
+    enable: false,
+    summary: []
+  }
 })
 
+// 流程数据
+const processData = ref<any>()
+
+provide('processData', processData)
+provide('modelData', formData)
+
 // 数据列表
 const formList = ref([])
-const categoryList = ref([])
+const categoryList = ref<CategoryVO[]>([])
 const userList = ref<UserApi.UserVO[]>([])
 
 /** 初始化数据 */
+const actionType = route.params.type as string
 const initData = async () => {
-  const modelId = route.params.id as string
-  if (modelId) {
-    // 修改场景
+  if (actionType === 'definition') {
+    // 情况一：流程定义场景（恢复）
+    const definitionId = route.params.id as string
+    const data = await DefinitionApi.getProcessDefinition(definitionId)
+    // 将 definition => model，最终赋值
+    data.type = data.modelType
+    delete data.modelType
+    data.id = data.modelId
+    delete data.modelId
+    if (data.simpleModel) {
+      data.simpleModel = JSON.parse(data.simpleModel)
+    }
+    formData.value = data
+    formData.value.startUserType = formData.value.startUserIds?.length > 0 ? 1 : 0
+  } else if (['update', 'copy'].includes(actionType)) {
+    // 情况二：修改场景/复制场景
+    const modelId = route.params.id as string
     formData.value = await ModelApi.getModel(modelId)
+    formData.value.startUserType = formData.value.startUserIds?.length > 0 ? 1 : 0
+    // 特殊：复制场景
+    if (actionType === 'copy') {
+      delete formData.value.id
+      formData.value.name += '副本'
+      formData.value.key += '_copy'
+      tagsView.setTitle('复制流程')
+    }
   } else {
-    // 新增场景
+    // 情况三：新增场景
+    formData.value.startUserType = 0 // 全体
     formData.value.managerUserIds.push(userStore.getUser.id)
   }
 
@@ -167,59 +225,57 @@ const initData = async () => {
   categoryList.value = await CategoryApi.getCategorySimpleList()
   // 获取用户列表
   userList.value = await UserApi.getSimpleUserList()
+
+  // 最终，设置 currentStep 切换到第一步
+  currentStep.value = 0
+
+  // 兼容，以前未配置更多设置的流程
+  extraSettingsRef.value.initData()
 }
 
+/** 根据类型切换流程数据 */
+watch(
+  async () => formData.value.type,
+  () => {
+    if (formData.value.type === BpmModelType.BPMN) {
+      processData.value = formData.value.bpmnXml
+    } else if (formData.value.type === BpmModelType.SIMPLE) {
+      processData.value = formData.value.simpleModel
+    }
+    console.log('加载流程数据', processData.value)
+  },
+  {
+    immediate: true
+  }
+)
+
 /** 校验所有步骤数据是否完整 */
 const validateAllSteps = async () => {
   try {
     // 基本信息校验
-    await basicInfoRef.value?.validate()
-    if (!formData.value.key || !formData.value.name || !formData.value.category) {
+    try {
+      await validateBasic()
+    } catch (error) {
       currentStep.value = 0
       throw new Error('请完善基本信息')
     }
 
     // 表单设计校验
-    await formDesignRef.value?.validate()
-    if (formData.value.formType === 10 && !formData.value.formId) {
-      currentStep.value = 1
-      throw new Error('请选择流程表单')
-    }
-    if (
-      formData.value.formType === 20 &&
-      (!formData.value.formCustomCreatePath || !formData.value.formCustomViewPath)
-    ) {
+    try {
+      await validateForm()
+    } catch (error) {
       currentStep.value = 1
       throw new Error('请完善自定义表单信息')
     }
 
     // 流程设计校验
-    // 如果已经有流程数据，则不需要重新校验
-    if (!formData.value.bpmnXml && !formData.value.simpleModel) {
-      // 如果当前不在第三步，需要先保存当前步骤数据
-      if (currentStep.value !== 2) {
-        await steps[currentStep.value].validator()
-        // 切换到第三步
-        currentStep.value = 2
-        // 等待组件渲染完成
-        await nextTick()
-      }
 
-      // 校验流程设计
-      await processDesignRef.value?.validate()
-      const processData = await processDesignRef.value?.getProcessData()
-      if (!processData) {
-        throw new Error('请设计流程')
-      }
-
-      // 保存流程数据
-      if (formData.value.type === BpmModelType.BPMN) {
-        formData.value.bpmnXml = processData
-        formData.value.simpleModel = null
-      } else {
-        formData.value.bpmnXml = null
-        formData.value.simpleModel = processData
-      }
+    // 表单设计校验
+    try {
+      await validateProcess()
+    } catch (error) {
+      currentStep.value = 2
+      throw new Error('请设计流程')
     }
 
     return true
@@ -239,52 +295,31 @@ const handleSave = async () => {
       ...formData.value
     }
 
-    // 如果当前在第三步，获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          modelData.bpmnXml = processData
-          modelData.simpleModel = null
-        } else {
-          modelData.bpmnXml = null
-          modelData.simpleModel = processData
-        }
-      }
-    }
-
-    if (formData.value.id) {
+    if (actionType === 'definition') {
+      // 情况一：流程定义场景（恢复）
+      await ModelApi.updateModel(modelData)
+      // 提示成功
+      message.success('恢复成功，可点击【发布】按钮，进行发布模型')
+    } else if (actionType === 'update') {
       // 修改场景
       await ModelApi.updateModel(modelData)
-      // 询问是否发布流程
-      try {
-        await message.confirm('修改流程成功，是否发布流程？')
-        // 用户点击确认，执行发布
-        await handleDeploy()
-      } catch {
-        // 用户点击取消，停留在当前页面
-      }
-    } else {
-      // 新增场景
+      // 提示成功
+      message.success('修改成功，可点击【发布】按钮，进行发布模型')
+    } else if (actionType === 'copy') {
+      // 情况三：复制场景
       formData.value.id = await ModelApi.createModel(modelData)
-      message.success('新增成功')
-      try {
-        await message.confirm('创建流程成功，是否继续编辑？')
-        // 用户点击继续编辑，跳转到编辑页面
-        await nextTick()
-        // 先删除当前页签
-        delView(unref(router.currentRoute))
-        // 跳转到编辑页面
-        await router.push({
-          name: 'BpmModelUpdate',
-          params: { id: formData.value.id }
-        })
-      } catch {
-        // 先删除当前页签
-        delView(unref(router.currentRoute))
-        // 用户点击返回列表
-        await router.push({ name: 'BpmModel' })
-      }
+      // 提示成功
+      message.success('复制成功，可点击【发布】按钮，进行发布模型')
+    } else {
+      // 情况四：新增场景
+      formData.value.id = await ModelApi.createModel(modelData)
+      // 提示成功
+      message.success('新建成功，可点击【发布】按钮，进行发布模型')
+    }
+
+    // 返回列表页（排除更新的情况）
+    if (actionType !== 'update') {
+      await router.push({ name: 'BpmModel' })
     }
   } catch (error: any) {
     console.error('保存失败:', error)
@@ -299,7 +334,6 @@ const handleDeploy = async () => {
     if (!formData.value.id) {
       await message.confirm('是否确认发布该流程？')
     }
-
     // 校验所有步骤
     await validateAllSteps()
 
@@ -308,20 +342,6 @@ const handleDeploy = async () => {
       ...formData.value
     }
 
-    // 如果当前在第三步，获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          modelData.bpmnXml = processData
-          modelData.simpleModel = null
-        } else {
-          modelData.bpmnXml = null
-          modelData.simpleModel = processData
-        }
-      }
-    }
-
     // 先保存所有数据
     if (formData.value.id) {
       await ModelApi.updateModel(modelData)
@@ -344,33 +364,14 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
-    // 如果是切换到第三步（流程设计），需要校验key和name
-    if (index === 2) {
-      if (!formData.value.key || !formData.value.name) {
-        message.warning('请先填写流程标识和流程名称')
-        return
-      }
+    if (index !== 0) {
+      await validateBasic()
     }
-
-    // 保存当前步骤的数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          formData.value.bpmnXml = processData
-          formData.value.simpleModel = null
-        } else {
-          formData.value.bpmnXml = null
-          formData.value.simpleModel = processData
-        }
-      }
-    } else {
-      // 只有在向后切换时才进行校验
-      if (index > currentStep.value) {
-        if (typeof steps[currentStep.value].validator === 'function') {
-          await steps[currentStep.value].validator()
-        }
-      }
+    if (index !== 1) {
+      await validateForm()
+    }
+    if (index !== 2) {
+      await validateProcess()
     }
 
     // 切换步骤
@@ -380,7 +381,7 @@ const handleStepClick = async (index: number) => {
     if (index === 2) {
       await nextTick()
       // 等待更长时间确保组件完全初始化
-      await new Promise(resolve => setTimeout(resolve, 200))
+      await new Promise((resolve) => setTimeout(resolve, 200))
       if (processDesignRef.value?.refresh) {
         await processDesignRef.value.refresh()
       }
@@ -391,13 +392,6 @@ const handleStepClick = async (index: number) => {
   }
 }
 
-/** 处理设计器保存成功 */
-const handleDesignSuccess = (bpmnXml?: string) => {
-  if (bpmnXml) {
-    formData.value.bpmnXml = bpmnXml
-  }
-}
-
 /** 返回列表页 */
 const handleBack = () => {
   // 先删除当前页签

src/views/bpm/model/index.vue

@@ -85,8 +85,6 @@
     </div>
   </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
   <!-- 表单弹窗：添加分类 -->
   <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
@@ -99,7 +97,6 @@
 import draggable from 'vuedraggable'
 import { CategoryApi } from '@/api/bpm/category'
 import * as ModelApi from '@/api/bpm/model'
-import ModelForm from './ModelForm.vue'
 import CategoryForm from '../category/CategoryForm.vue'
 import { cloneDeep } from 'lodash-es'
 import CategoryDraggableModel from './CategoryDraggableModel.vue'
@@ -123,7 +120,6 @@ const handleQuery = () => {
 }
 
 /** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
   if (type === 'create') {
     push({ name: 'BpmModelCreate' })
@@ -206,7 +202,7 @@ const getList = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
+onActivated(() => {
   getList()
 })
 </script>

src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue

@@ -74,7 +74,7 @@
 </template>
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
-import { BpmModelType } from '@/utils/constants'
+import { BpmModelType, BpmModelFormType } from '@/utils/constants'
 import {
   CandidateStrategy,
   NodeId,
@@ -108,6 +108,7 @@ const fApi = ref<ApiAttrs>()
 // 指定审批人
 const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人或抄送人的任务列表
 const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const tempStartUserSelectAssignees = ref({}) // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
 const bpmnXML: any = ref(null) // BPMN 数据
 const simpleJson = ref<string | undefined>() // Simple 设计器数据 json 格式
 
@@ -121,7 +122,7 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
   startUserSelectAssignees.value = {}
 
   // 情况一：流程表单
-  if (row.formType == 10) {
+  if (row.formType == BpmModelFormType.NORMAL) {
     // 设置表单
     // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
     // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
@@ -137,8 +138,11 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
     await nextTick()
     fApi.value?.btn.show(false) // 隐藏提交按钮
 
-    // 获取流程审批信息
-    await getApprovalDetail(row)
+    // 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
+    await getApprovalDetail({
+      id: row.id,
+      processVariablesStr: JSON.stringify(formVariables)
+    })
 
     // 加载流程图
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
@@ -155,32 +159,61 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
   }
 }
 
+/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
+watch(
+  detailForm.value,
+  (newValue) => {
+    if (newValue && Object.keys(newValue.value).length > 0) {
+      // 记录之前的节点审批人
+      tempStartUserSelectAssignees.value = startUserSelectAssignees.value
+      startUserSelectAssignees.value = {}
+      // 加载最新的审批详情
+      getApprovalDetail({
+        id: props.selectProcessDefinition.id,
+        processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+      })
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
   try {
-    // TODO 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）
+    // TODO 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）；@jason：这里可以去掉 activityId 么？
     const data = await ProcessInstanceApi.getApprovalDetail({
       processDefinitionId: row.id,
-      activityId: NodeId.START_USER_NODE_ID
+      activityId: NodeId.START_USER_NODE_ID,
+      processVariablesStr: row.processVariablesStr // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
     })
 
     if (!data) {
       message.error('查询不到审批详情信息！')
       return
     }
+    // 获取审批节点，显示 Timeline 的数据
+    activityNodes.value = data.activityNodes
 
     // 获取发起人自选的任务
     startUserSelectTasks.value = data.activityNodes?.filter(
       (node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
     )
+    // 恢复之前的选择审批人
     if (startUserSelectTasks.value?.length > 0) {
       for (const node of startUserSelectTasks.value) {
-        startUserSelectAssignees.value[node.id] = []
+        if (
+          tempStartUserSelectAssignees.value[node.id] &&
+          tempStartUserSelectAssignees.value[node.id].length > 0
+        ) {
+          startUserSelectAssignees.value[node.id] = tempStartUserSelectAssignees.value[node.id]
+        } else {
+          startUserSelectAssignees.value[node.id] = []
+        }
       }
     }
 
-    // 获取审批节点，显示 Timeline 的数据
-    activityNodes.value = data.activityNodes
     // 获取表单字段权限
     const formFieldsPermission = data.formFieldsPermission
     // 设置表单字段权限

src/views/bpm/processInstance/create/index.vue

@@ -58,7 +58,16 @@
                   >
                     <template #default>
                       <div class="flex">
-                        <el-image :src="definition.icon" class="w-32px h-32px" />
+                        <el-image
+                          v-if="definition.icon"
+                          :src="definition.icon"
+                          class="w-32px h-32px"
+                        />
+                        <div v-else class="flow-icon">
+                          <span style="font-size: 12px; color: #fff">
+                            {{ subString(definition.name, 0, 2) }}
+                          </span>
+                        </div>
                         <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
                       </div>
                     </template>
@@ -88,6 +97,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
 import { groupBy } from 'lodash-es'
+import { subString } from '@/utils/index'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
@@ -282,13 +292,25 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.flow-icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  background-color: var(--el-color-primary);
+  border-radius: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+
 .process-definition-container::before {
-  content: '';
-  border-left: 1px solid #e6e6e6;
   position: absolute;
   left: 20.8%;
   height: 100%;
+  border-left: 1px solid #e6e6e6;
+  content: '';
 }
+
 :deep() {
   .definition-item-card {
     .el-card__body {

src/views/bpm/processInstance/create/index_old.vue

@@ -1,267 +0,0 @@
-<template>
-  <doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
-
-  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
-    <el-tabs tab-position="left" v-model="categoryActive">
-      <el-tab-pane
-        :label="category.name"
-        :name="category.code"
-        :key="category.code"
-        v-for="category in categoryList"
-      >
-        <el-row :gutter="20">
-          <el-col
-            :lg="6"
-            :sm="12"
-            :xs="24"
-            v-for="definition in categoryProcessDefinitionList"
-            :key="definition.id"
-          >
-            <el-card
-              shadow="hover"
-              class="mb-20px cursor-pointer"
-              @click="handleSelect(definition)"
-            >
-              <template #default>
-                <div class="flex">
-                  <el-image :src="definition.icon" class="w-32px h-32px" />
-                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
-                </div>
-              </template>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
-
-  <!-- 第二步，填写表单，进行流程的提交 -->
-  <ContentWrap v-else>
-    <el-card class="box-card">
-      <div class="clearfix">
-        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
-        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
-          <Icon icon="ep:delete" /> 选择其它流程
-        </el-button>
-      </div>
-      <el-col :span="16" :offset="6" style="margin-top: 20px">
-        <form-create
-          :rule="detailForm.rule"
-          v-model:api="fApi"
-          v-model="detailForm.value"
-          :option="detailForm.option"
-          @submit="submitForm"
-        >
-          <template #type-startUserSelect>
-            <el-col :span="24">
-              <el-card class="mb-10px">
-                <template #header>指定审批人</template>
-                <el-form
-                  :model="startUserSelectAssignees"
-                  :rules="startUserSelectAssigneesFormRules"
-                  ref="startUserSelectAssigneesFormRef"
-                >
-                  <el-form-item
-                    v-for="userTask in startUserSelectTasks"
-                    :key="userTask.id"
-                    :label="`任务【${userTask.name}】`"
-                    :prop="userTask.id"
-                  >
-                    <el-select
-                      v-model="startUserSelectAssignees[userTask.id]"
-                      multiple
-                      placeholder="请选择审批人"
-                    >
-                      <el-option
-                        v-for="user in userList"
-                        :key="user.id"
-                        :label="user.nickname"
-                        :value="user.id"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-form>
-              </el-card>
-            </el-col>
-          </template>
-        </form-create>
-      </el-col>
-    </el-card>
-    <!-- 流程图预览 -->
-    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
-  </ContentWrap>
-</template>
-<script lang="ts" setup>
-import * as DefinitionApi from '@/api/bpm/definition'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
-import { CategoryApi } from '@/api/bpm/category'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'BpmProcessInstanceCreate' })
-
-const route = useRoute() // 路由
-const { push, currentRoute } = useRouter() // 路由
-const message = useMessage() // 消息
-const { delView } = useTagsViewStore() // 视图操作
-
-const processInstanceId = route.query.processInstanceId
-const loading = ref(true) // 加载中
-const categoryList = ref([]) // 分类的列表
-const categoryActive = ref('') // 选中的分类
-const processDefinitionList = ref([]) // 流程定义的列表
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // 流程分类
-    categoryList.value = await CategoryApi.getCategorySimpleList()
-    if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0].code
-    }
-    // 流程定义
-    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
-      suspensionState: 1
-    })
-
-    // 如果 processInstanceId 非空，说明是重新发起
-    if (processInstanceId?.length > 0) {
-      const processInstance = await ProcessInstanceApi.getProcessInstance(processInstanceId)
-      if (!processInstance) {
-        message.error('重新发起流程失败，原因：流程实例不存在')
-        return
-      }
-      const processDefinition = processDefinitionList.value.find(
-        (item) => item.key == processInstance.processDefinition?.key
-      )
-      if (!processDefinition) {
-        message.error('重新发起流程失败，原因：流程定义不存在')
-        return
-      }
-      await handleSelect(processDefinition, processInstance.formVariables)
-    }
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 选中分类对应的流程定义列表 */
-const categoryProcessDefinitionList = computed(() => {
-  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
-})
-
-// ========== 表单相关 ==========
-const fApi = ref<ApiAttrs>()
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-}) // 流程表单详情
-const selectProcessDefinition = ref() // 选择的流程定义
-
-// 指定审批人
-const bpmnXML = ref(null) // BPMN 数据
-const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
-const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
-const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
-const userList = ref<any[]>([]) // 用户列表
-
-/** 处理选择流程的按钮操作 **/
-const handleSelect = async (row, formVariables) => {
-  // 设置选择的流程
-  selectProcessDefinition.value = row
-
-  // 重置指定审批人
-  startUserSelectTasks.value = []
-  startUserSelectAssignees.value = {}
-  startUserSelectAssigneesFormRules.value = {}
-
-  // 情况一：流程表单
-  if (row.formType == 10) {
-    // 设置表单
-    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
-    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
-    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
-    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
-    for (const key in formVariables) {
-      if (!allowedFields.includes(key)) {
-        delete formVariables[key]
-      }
-    }
-    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-
-    // 加载流程图
-    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
-    if (processDefinitionDetail) {
-      bpmnXML.value = processDefinitionDetail.bpmnXml
-      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
-
-      // 设置指定审批人
-      if (startUserSelectTasks.value?.length > 0) {
-        detailForm.value.rule.push({
-          type: 'startUserSelect',
-          props: {
-            title: '指定审批人'
-          }
-        })
-        // 设置校验规则
-        for (const userTask of startUserSelectTasks.value) {
-          startUserSelectAssignees.value[userTask.id] = []
-          startUserSelectAssigneesFormRules.value[userTask.id] = [
-            { required: true, message: '请选择审批人', trigger: 'blur' }
-          ]
-        }
-        // 加载用户列表
-        userList.value = await UserApi.getSimpleUserList()
-      }
-    }
-    // 情况二：业务表单
-  } else if (row.formCustomCreatePath) {
-    await push({
-      path: row.formCustomCreatePath
-    })
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-  }
-}
-
-/** 提交按钮 */
-const submitForm = async (formData) => {
-  if (!fApi.value || !selectProcessDefinition.value) {
-    return
-  }
-  // 如果有指定审批人，需要校验
-  if (startUserSelectTasks.value?.length > 0) {
-    await startUserSelectAssigneesFormRef.value.validate()
-  }
-
-  // 提交请求
-  fApi.value.btn.loading(true)
-  try {
-    await ProcessInstanceApi.createProcessInstance({
-      processDefinitionId: selectProcessDefinition.value.id,
-      variables: formData,
-      startUserSelectAssignees: startUserSelectAssignees.value
-    })
-    // 提示
-    message.success('发起流程成功')
-    // 跳转回去
-    delView(unref(currentRoute))
-    await push({
-      name: 'BpmProcessInstanceMy'
-    })
-  } finally {
-    fApi.value.btn.loading(false)
-  }
-}
-
-/** 初始化 */
-onMounted(() => {
-  getList()
-})
-</script>

src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue

@@ -36,19 +36,50 @@
               :rule="approveForm.rule"
             />
           </el-card>
-          <el-form-item label="审批意见" prop="reason">
+          <el-form-item :label="`${nodeTypeName}意见`" prop="reason">
             <el-input
               v-model="approveReasonForm.reason"
-              placeholder="请输入审批意见"
+              :placeholder="`请输入${nodeTypeName}意见`"
               type="textarea"
               :rows="4"
             />
           </el-form-item>
+          <el-form-item
+            label="下一个节点的审批人"
+            prop="nextAssignees"
+            v-if="nextAssigneesActivityNode.length > 0"
+          >
+            <div class="ml-10px -mt-15px -mb-35px">
+              <ProcessInstanceTimeline
+                :activity-nodes="nextAssigneesActivityNode"
+                :show-status-icon="false"
+                @select-user-confirm="selectNextAssigneesConfirm"
+              />
+            </div>
+          </el-form-item>
+          <el-form-item
+            v-if="runningTask.signEnable"
+            label="签名"
+            prop="signPicUrl"
+            ref="approveSignFormRef"
+          >
+            <el-button @click="signRef.open()">点击签名</el-button>
+            <el-image
+              class="w-90px h-40px ml-5px"
+              v-if="approveReasonForm.signPicUrl"
+              :src="approveReasonForm.signPicUrl"
+              :preview-src-list="[approveReasonForm.signPicUrl]"
+            />
+          </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="success" @click="handleAudit(true, approveFormRef)">
+            <el-button
+              :disabled="formLoading"
+              type="success"
+              @click="handleAudit(true, approveFormRef)"
+            >
               {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
             </el-button>
-            <el-button @click="closePropover('approve', approveFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('approve', approveFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -86,10 +117,14 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="danger" @click="handleAudit(false,rejectFormRef)">
+            <el-button
+              :disabled="formLoading"
+              type="danger"
+              @click="handleAudit(false, rejectFormRef)"
+            >
               {{ getButtonDisplayName(OperationButtonType.REJECT) }}
             </el-button>
-            <el-button @click="closePropover('reject', rejectFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('reject', rejectFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -147,7 +182,7 @@
             <el-button :disabled="formLoading" type="primary" @click="handleCopy">
               {{ getButtonDisplayName(OperationButtonType.COPY) }}
             </el-button>
-            <el-button @click="closePropover('copy', copyFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('copy', copyFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -199,7 +234,7 @@
             <el-button :disabled="formLoading" type="primary" @click="handleTransfer()">
               {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
             </el-button>
-            <el-button @click="closePropover('transfer', transferFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('transfer', transferFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -251,7 +286,7 @@
             <el-button :disabled="formLoading" type="primary" @click="handleDelegate()">
               {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
             </el-button>
-            <el-button @click="closePropover('delegate', delegateFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('delegate', delegateFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -306,7 +341,7 @@
             <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('after')">
               向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
             </el-button>
-            <el-button @click="closePropover('addSign', addSignFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('addSign', addSignFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -357,7 +392,7 @@
             <el-button :disabled="formLoading" type="primary" @click="handlerDeleteSign()">
               减签
             </el-button>
-            <el-button @click="closePropover('deleteSign', deleteSignFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('deleteSign', deleteSignFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -409,7 +444,7 @@
             <el-button :disabled="formLoading" type="primary" @click="handleReturn()">
               {{ getButtonDisplayName(OperationButtonType.RETURN) }}
             </el-button>
-            <el-button @click="closePropover('return', returnFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('return', returnFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -453,7 +488,7 @@
             <el-button :disabled="formLoading" type="primary" @click="handleCancel()">
               确认
             </el-button>
-            <el-button @click="closePropover('cancel', cancelFormRef)"> 取消 </el-button>
+            <el-button @click="closePopover('cancel', cancelFormRef)"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -471,6 +506,9 @@
       <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
     </div>
   </div>
+
+  <!-- 签名弹窗 -->
+  <SignDialog ref="signRef" @success="handleSignFinish" />
 </template>
 <script lang="ts" setup>
 import { useUserStoreWithOut } from '@/store/modules/user'
@@ -479,11 +517,17 @@ import * as TaskApi from '@/api/bpm/task'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
 import {
+  NodeType,
+  OPERATION_BUTTON_NAME,
   OperationButtonType,
-  OPERATION_BUTTON_NAME
+  CandidateStrategy
 } from '@/components/SimpleProcessDesignerV2/src/consts'
-import { BpmProcessInstanceStatus, BpmModelFormType } from '@/utils/constants'
+import { BpmModelFormType, BpmProcessInstanceStatus } from '@/utils/constants'
 import type { FormInstance, FormRules } from 'element-plus'
+import SignDialog from './SignDialog.vue'
+import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
+import { isEmpty } from '@/utils/is'
+
 defineOptions({ name: 'ProcessInstanceBtnContainer' })
 
 const router = useRouter() // 路由
@@ -492,12 +536,12 @@ const message = useMessage() // 消息弹窗
 const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 
-const props = defineProps< {
-  processInstance: any,  // 流程实例信息
-  processDefinition: any,  // 流程定义信息
-  userOptions: UserApi.UserVO[],
-  normalForm: any, // 流程表单 formCreate
-  normalFormApi: any, // 流程表单 formCreate Api
+const props = defineProps<{
+  processInstance: any // 流程实例信息
+  processDefinition: any // 流程定义信息
+  userOptions: UserApi.UserVO[]
+  normalForm: any // 流程表单 formCreate
+  normalFormApi: any // 流程表单 formCreate Api
   writableFields: string[] // 流程表单可以编辑的字段
 }>()
 
@@ -519,22 +563,38 @@ const returnList = ref([] as any) // 退回节点
 const runningTask = ref<any>() // 运行中的任务
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
+const nodeTypeName = ref('审批') // 节点类型名称
 
 // 审批通过意见表单
+const reasonRequire = ref()
 const approveFormRef = ref<FormInstance>()
+const signRef = ref()
+const approveSignFormRef = ref()
+const nextAssigneesActivityNode = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 下一个审批节点信息
 const approveReasonForm = reactive({
-  reason: ''
+  reason: '',
+  signPicUrl: '',
+  nextAssignees: {}
 })
-const approveReasonRule = reactive<FormRules<typeof approveReasonForm>>({
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+const approveReasonRule = computed(() => {
+  return {
+    reason: [
+      { required: reasonRequire.value, message: nodeTypeName + '意见不能为空', trigger: 'blur' }
+    ],
+    signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }],
+    nextAssignees: [{ required: true, message: '审批人不能为空', trigger: 'blur' }]
+  }
 })
+
 // 拒绝表单
 const rejectFormRef = ref<FormInstance>()
 const rejectReasonForm = reactive({
   reason: ''
 })
-const rejectReasonRule = reactive<FormRules<typeof rejectReasonForm>>({
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+const rejectReasonRule = computed(() => {
+  return {
+    reason: [{ required: reasonRequire.value, message: '审批意见不能为空', trigger: 'blur' }]
+  }
 })
 
 // 抄送表单
@@ -555,7 +615,7 @@ const transferForm = reactive({
 })
 const transferFormRule = reactive<FormRules<typeof transferForm>>({
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 委派表单
@@ -566,7 +626,7 @@ const delegateForm = reactive({
 })
 const delegateFormRule = reactive<FormRules<typeof delegateForm>>({
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 加签表单
@@ -577,7 +637,7 @@ const addSignForm = reactive({
 })
 const addSignFormRule = reactive<FormRules<typeof addSignForm>>({
   addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 减签表单
@@ -588,7 +648,7 @@ const deleteSignForm = reactive({
 })
 const deleteSignFormRule = reactive<FormRules<typeof deleteSignForm>>({
   deleteSignTaskId: [{ required: true, message: '减签人员不能为空', trigger: 'change' }],
- reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 退回表单
@@ -608,7 +668,7 @@ const cancelForm = reactive({
   cancelReason: ''
 })
 const cancelFormRule = reactive<FormRules<typeof cancelForm>>({
-  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }]
 })
 
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@@ -627,11 +687,12 @@ watch(
 const openPopover = async (type: string) => {
   if (type === 'approve') {
     // 校验流程表单
-     const valid = await validateNormalForm();
-     if (!valid) {
+    const valid = await validateNormalForm()
+    if (!valid) {
       message.warning('表单校验不通过，请先完善表单!!')
-      return;
-     }
+      return
+    }
+    initNextAssigneesFormField()
   }
   if (type === 'return') {
     // 获取退回节点
@@ -649,11 +710,56 @@ const openPopover = async (type: string) => {
 }
 
 /** 关闭气泡卡 */
-const closePropover = (type: string, formRef: FormInstance | undefined) => {
+const closePopover = (type: string, formRef: FormInstance | undefined) => {
   if (formRef) {
     formRef.resetFields()
-  } 
+  }
   popOverVisible.value[type] = false
+  nextAssigneesActivityNode.value = []
+}
+
+/** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
+const initNextAssigneesFormField = async () => {
+  // 获取修改的流程变量, 暂时只支持流程表单
+  const variables = getUpdatedProcessInstanceVariables()
+  const data = await ProcessInstanceApi.getNextApprovalNodes({
+    processInstanceId: props.processInstance.id,
+    taskId: runningTask.value.id,
+    processVariablesStr: JSON.stringify(variables)
+  })
+  if (data && data.length > 0) {
+    data.forEach((node: any) => {
+      if (
+        // 情况一：当前节点没有审批人，并且是发起人自选
+        (isEmpty(node.tasks) &&
+          isEmpty(node.candidateUsers) &&
+          CandidateStrategy.START_USER_SELECT === node.candidateStrategy) ||
+        // 情况二：当前节点是审批人自选
+        CandidateStrategy.APPROVE_USER_SELECT === node.candidateStrategy
+      ) {
+        nextAssigneesActivityNode.value.push(node)
+      }
+    })
+  }
+}
+
+/** 选择下一个节点的审批人 */
+const selectNextAssigneesConfirm = (id: string, userList: any[]) => {
+  approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id)
+}
+/** 审批通过时，校验每个自选审批人的节点是否都已配置了审批人 */
+const validateNextAssignees = () => {
+  if (Object.keys(nextAssigneesActivityNode.value).length === 0) {
+    return true
+  }
+  // 如果需要自选审批人，则校验每个节点是否都已配置审批人
+  for (const item of nextAssigneesActivityNode.value) {
+    if (isEmpty(approveReasonForm.nextAssignees[item.id])) {
+      message.warning('下一个节点的审批人不能为空!')
+      return false
+    }
+  }
+  return true
 }
 
 /** 处理审批通过和不通过的操作 */
@@ -663,14 +769,27 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
     // 校验表单
     if (!formRef) return
     await formRef.validate()
+    // 校验流程表单必填字段
+    const valid = await validateNormalForm()
+    if (!valid) {
+      message.warning('表单校验不通过，请先完善表单!!')
+      return
+    }
+
     if (pass) {
-       // 获取修改的流程变量, 暂时只支持流程表单
-       const variables = getUpdatedProcessInstanceVaiables();
+      const nextAssigneesValid = validateNextAssignees()
+      if (!nextAssigneesValid) return
+      const variables = getUpdatedProcessInstanceVariables()
       // 审批通过数据
       const data = {
         id: runningTask.value.id,
         reason: approveReasonForm.reason,
-        variables // 审批通过, 把修改的字段值赋于流程实例变量
+        variables, // 审批通过, 把修改的字段值赋于流程实例变量
+        nextAssignees: approveReasonForm.nextAssignees // 下个自选节点选择的审批人信息
+      } as any
+      // 签名
+      if (runningTask.value.signEnable) {
+        data.signPicUrl = approveReasonForm.signPicUrl
       }
       // 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
       // TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
@@ -682,12 +801,13 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
       }
       await TaskApi.approveTask(data)
       popOverVisible.value.approve = false
+      nextAssigneesActivityNode.value = []
       message.success('审批通过成功')
     } else {
-       // 审批不通过数据
-       const data = {
+      // 审批不通过数据
+      const data = {
         id: runningTask.value.id,
-        reason: rejectReasonForm.reason,
+        reason: rejectReasonForm.reason
       }
       await TaskApi.rejectTask(data)
       popOverVisible.value.reject = false
@@ -713,7 +833,7 @@ const handleCopy = async () => {
     const data = {
       id: runningTask.value.id,
       reason: copyForm.copyReason,
-      copyUserIds:copyForm.copyUserIds
+      copyUserIds: copyForm.copyUserIds
     }
     await TaskApi.copyTask(data)
     copyFormRef.value.resetFields()
@@ -752,7 +872,6 @@ const handleTransfer = async () => {
 const handleDelegate = async () => {
   formLoading.value = true
   try {
- 
     // 1.1 校验表单
     if (!delegateFormRef.value) return
     await delegateFormRef.value.validate()
@@ -930,8 +1049,10 @@ const getButtonDisplayName = (btnType: OperationButtonType) => {
 
 const loadTodoTask = (task: any) => {
   approveForm.value = {}
-  approveFormFApi.value = {}
   runningTask.value = task
+  approveFormFApi.value = {}
+  reasonRequire.value = task?.reasonRequire ?? false
+  nodeTypeName.value = task?.nodeType === NodeType.TRANSACTOR_NODE ? '办理' : '审批'
   // 处理 approve 表单.
   if (task && task.formId && task.formConf) {
     const tempApproveForm = {}
@@ -949,23 +1070,29 @@ const validateNormalForm = async () => {
     try {
       await props.normalFormApi?.validate()
     } catch {
-      valid = false;
+      valid = false
     }
-    return valid;
+    return valid
   } else {
-    return true;
+    return true
   }
 }
+
 /** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
-const getUpdatedProcessInstanceVaiables = ()=> {
+const getUpdatedProcessInstanceVariables = () => {
   const variables = {}
-  props.writableFields.forEach( (field) => {
-    const fieldValue = props.normalFormApi.getValue(field)
-    variables[field] = fieldValue;
+  props.writableFields.forEach((field) => {
+    variables[field] = props.normalFormApi.getValue(field)
   })
   return variables
 }
 
+/** 处理签名完成 */
+const handleSignFinish = (url: string) => {
+  approveReasonForm.signPicUrl = url
+  approveSignFormRef.value.validate('change')
+}
+
 defineExpose({ loadTodoTask })
 </script>
 

src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

@@ -4,7 +4,6 @@
       :flow-node="simpleModel"
       :tasks="tasks"
       :process-instance="processInstance"
-      class="process-viewer"
     />
   </div>
 </template>
@@ -20,7 +19,7 @@ const props = defineProps({
   modelView: propTypes.object,
   simpleJson: propTypes.string // Simple 模型结构数据 (json 格式)
 })
-const simpleModel = ref()
+const simpleModel = ref<any>({})
 // 用户任务
 const tasks = ref([])
 // 流程实例
@@ -43,13 +42,13 @@ watch(
       const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
       setSimpleModelNodeTaskStatus(
         newModelView.simpleModel,
-        newModelView.processInstance.status,
+        newModelView.processInstance?.status,
         rejectedTaskActivityIds,
         unfinishedTaskActivityIds,
         finishedActivityIds,
         finishedSequenceFlowActivityIds
       )
-      simpleModel.value = newModelView.simpleModel
+      simpleModel.value = newModelView.simpleModel ? newModelView.simpleModel : {}
     }
   }
 )
@@ -82,11 +81,12 @@ const setSimpleModelNodeTaskStatus = (
     }
     return
   }
-
   // 审批节点
   if (
     simpleModel.type === NodeType.START_USER_NODE ||
-    simpleModel.type === NodeType.USER_TASK_NODE
+    simpleModel.type === NodeType.USER_TASK_NODE ||
+    simpleModel.type === NodeType.TRANSACTOR_NODE ||
+    simpleModel.type === NodeType.CHILD_PROCESS_NODE
   ) {
     simpleModel.activityStatus = TaskStatusEnum.NOT_START
     if (rejectedTaskActivityIds.includes(simpleModel.id)) {
@@ -98,31 +98,49 @@ const setSimpleModelNodeTaskStatus = (
     }
     // TODO 是不是还缺一个 cancel 的状态
   }
-
   // 抄送节点
   if (simpleModel.type === NodeType.COPY_TASK_NODE) {
-    // 抄送节点 只有通过和未执行状态
+    // 抄送节点,只有通过和未执行状态
     if (finishedActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.APPROVE
     } else {
       simpleModel.activityStatus = TaskStatusEnum.NOT_START
     }
   }
-  // 条件节点 对应 SequenceFlow
-  if (simpleModel.type === NodeType.CONDITION_NODE) {
-    // 条件节点。只有通过和未执行状态
-    if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
+  // 延迟器节点
+  if (simpleModel.type === NodeType.DELAY_TIMER_NODE) {
+    // 延迟器节点,只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+  // 触发器节点
+  if (simpleModel.type === NodeType.TRIGGER_NODE) {
+    // 触发器节点,只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.APPROVE
     } else {
       simpleModel.activityStatus = TaskStatusEnum.NOT_START
     }
   }
 
+  // 条件节点对应 SequenceFlow
+  if (simpleModel.type === NodeType.CONDITION_NODE) {
+    // 条件节点,只有通过和未执行状态
+    if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
   // 网关节点
   if (
     simpleModel.type === NodeType.CONDITION_BRANCH_NODE ||
     simpleModel.type === NodeType.PARALLEL_BRANCH_NODE ||
-    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE
+    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE ||
+    simpleModel.type === NodeType.ROUTER_BRANCH_NODE
   ) {
     // 网关节点。只有通过和未执行状态
     if (finishedActivityIds.includes(simpleModel.id)) {
@@ -153,16 +171,4 @@ const setSimpleModelNodeTaskStatus = (
 }
 </script>
 
-<style lang="scss" scoped>
-.process-viewer-container {
-  height: 100%;
-  width: 100%;
-  
-  :deep(.process-viewer) {
-    height: 100% !important;
-    min-height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue

@@ -43,7 +43,8 @@
           v-if="
             isEmpty(activity.tasks) &&
             isEmpty(activity.candidateUsers) &&
-            CandidateStrategy.START_USER_SELECT === activity.candidateStrategy
+            (CandidateStrategy.START_USER_SELECT === activity.candidateStrategy ||
+              CandidateStrategy.APPROVE_USER_SELECT === activity.candidateStrategy)
           "
         >
           <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
@@ -121,8 +122,20 @@
                 "
                 class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
               >
+                <!-- TODO lesan：这里如果是办理，需要是办理意见 -->
                 审批意见：{{ task.reason }}
               </div>
+              <div
+                v-if="task.signPicUrl && activity.nodeType === NodeType.USER_TASK_NODE"
+                class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+              >
+                签名：
+                <el-image
+                  class="w-90px h-40px ml-5px"
+                  :src="task.signPicUrl"
+                  :preview-src-list="[task.signPicUrl]"
+                />
+              </div>
             </teleport>
           </div>
           <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
@@ -168,6 +181,8 @@ import copySvg from '@/assets/svgs/bpm/copy.svg'
 import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
 import finishSvg from '@/assets/svgs/bpm/finish.svg'
+import transactorSvg from '@/assets/svgs/bpm/transactor.svg'
+import childProcessSvg from '@/assets/svgs/bpm/child-process.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
 withDefaults(
@@ -229,12 +244,16 @@ const nodeTypeSvgMap = {
   [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
   // 审批人节点
   [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
+  // 办理人节点
+  [NodeType.TRANSACTOR_NODE]: { color: '#ff943e', svg: transactorSvg },
   // 抄送人节点
   [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
   // 条件分支节点
   [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
   // 并行分支节点
-  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg },
+  // 子流程节点
+  [NodeType.CHILD_PROCESS_NODE]: { color: '#14bb83', svg: childProcessSvg }
 }
 
 // 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
@@ -253,6 +272,8 @@ const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
   if (
     nodeType === NodeType.START_USER_NODE ||
     nodeType === NodeType.USER_TASK_NODE ||
+    nodeType === NodeType.TRANSACTOR_NODE ||
+    nodeType === NodeType.CHILD_PROCESS_NODE ||
     nodeType === NodeType.END_EVENT_NODE
   ) {
     return statusIconMap[taskStatus]?.icon

src/views/bpm/processInstance/detail/SignDialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-dialog v-model="signDialogVisible" title="签名" width="935">
+    <div class="position-relative">
+      <Vue3Signature class="b b-solid b-gray" ref="signature" w="900px" h="400px" />
+      <el-button
+        class="pos-absolute bottom-20px right-10px"
+        type="primary"
+        text
+        size="small"
+        @click="signature.clear()"
+      >
+        <Icon icon="ep:delete" class="mr-5px" />
+        清除
+      </el-button>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="signDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit"> 提交 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import Vue3Signature from 'vue3-signature'
+import * as FileApi from '@/api/infra/file'
+import download from '@/utils/download'
+
+const message = useMessage() // 消息弹窗
+const signDialogVisible = ref(false)
+const signature = ref()
+
+const open = async () => {
+  signDialogVisible.value = true
+}
+defineExpose({ open })
+
+const emits = defineEmits(['success'])
+const submit = async () => {
+  message.success('签名上传中请稍等。。。')
+  const res = await FileApi.updateFile({
+    file: download.base64ToFile(signature.value.save('image/png'), '签名')
+  })
+  emits('success', res.data)
+  signDialogVisible.value = false
+}
+</script>
+
+<style scoped></style>

src/views/bpm/processInstance/detail/index.vue

@@ -178,8 +178,9 @@ const writableFields: Array<string> = [] // 表单可以编辑的字段
 
 /** 获得详情 */
 const getDetail = () => {
+  // 获得审批详情
   getApprovalDetail()
-
+  // 获得流程模型视图
   getProcessModelView()
 }
 

src/views/bpm/processInstance/index.vue

@@ -24,9 +24,7 @@
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
       </el-form-item>
 
-      <!-- TODO @ tuituji：style 可以使用 unocss -->
-      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
-        <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 RE:done & to check-->
+      <el-form-item label="" prop="category" class="absolute right-[300px]">
         <el-select
           v-model="queryParams.category"
           placeholder="请选择流程分类"
@@ -42,8 +40,7 @@
           />
         </el-select>
       </el-form-item>
-
-      <el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
+      <el-form-item label="" prop="status" class="absolute right-[130px]">
         <el-select
           v-model="queryParams.status"
           placeholder="请选择流程状态"
@@ -61,8 +58,7 @@
       </el-form-item>
 
       <!-- 高级筛选 -->
-      <!-- TODO @ tuituji：style 可以使用 unocss -->
-      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+      <el-form-item class="absolute right-0">
         <el-popover
           :visible="showPopover"
           persistent
@@ -75,36 +71,28 @@
               <Icon icon="ep:plus" class="mr-5px" />高级筛选
             </el-button>
           </template>
-          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
-            <el-select
-              v-model="queryParams.category"
-              placeholder="请选择流程发起人"
-              clearable
-              class="!w-390px"
-            >
-              <el-option
-                v-for="category in categoryList"
-                :key="category.code"
-                :label="category.name"
-                :value="category.code"
-              />
-            </el-select>
-          </el-form-item>
           <el-form-item
             label="所属流程"
-            class="bold-label"
+            class="font-bold"
             label-position="top"
             prop="processDefinitionKey"
           >
-            <el-input
+            <el-select
               v-model="queryParams.processDefinitionKey"
-              placeholder="请输入流程定义的标识"
+              placeholder="请选择流程定义"
               clearable
-              @keyup.enter="handleQuery"
               class="!w-390px"
-            />
+              @change="handleQuery"
+            >
+              <el-option
+                v-for="item in processDefinitionList"
+                :key="item.key"
+                :label="item.name"
+                :value="item.key"
+              />
+            </el-select>
           </el-form-item>
-          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+          <el-form-item label="发起时间" class="font-bold" label-position="top" prop="createTime">
             <el-date-picker
               v-model="queryParams.createTime"
               value-format="YYYY-MM-DD HH:mm:ss"
@@ -115,11 +103,12 @@
               class="!w-240px"
             />
           </el-form-item>
-          <!-- TODO tuituiji：参考钉钉，1）按照清空、取消、确认排序。2）右对齐。3）确认增加 primary -->
-          <el-form-item class="bold-label" label-position="top">
-            <el-button @click="handleQuery"> 确认</el-button>
-            <el-button @click="showPopover = false"> 取消</el-button>
-            <el-button @click="resetQuery"> 清空</el-button>
+          <el-form-item class="font-bold" label-position="top">
+            <div class="flex justify-end w-full">
+              <el-button @click="resetQuery">清空</el-button>
+              <el-button @click="showPopover = false">取消</el-button>
+              <el-button type="primary" @click="handleQuery">确认</el-button>
+            </div>
           </el-form-item>
         </el-popover>
       </el-form-item>
@@ -130,6 +119,15 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column label="流程名称" align="center" prop="name" min-width="200px" fixed="left" />
+      <el-table-column label="摘要" prop="summary" width="180" fixed="left">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
+            <div v-for="(item, index) in scope.row.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column
         label="流程分类"
         align="center"
@@ -137,11 +135,37 @@
         min-width="100"
         fixed="left"
       />
-      <!-- TODO @芋艿：摘要 -->
-      <!-- TODO tuituiji：参考钉钉；1）审批中时，展示审批任务；2）非审批中，展示状态 -->
-      <el-table-column label="流程状态" prop="status" width="120">
+      <el-table-column label="流程状态" prop="status" min-width="200">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+          <!-- 审批中状态 -->
+          <template
+            v-if="
+              scope.row.status === BpmProcessInstanceStatus.RUNNING && scope.row.tasks?.length > 0
+            "
+          >
+            <!-- 单人审批 -->
+            <template v-if="scope.row.tasks.length === 1">
+              <span>
+                <el-button link type="primary" @click="handleDetail(scope.row)">
+                  {{ scope.row.tasks[0].assigneeUser?.nickname }}
+                </el-button>
+                ({{ scope.row.tasks[0].name }}) 审批中
+              </span>
+            </template>
+            <!-- 多人审批 -->
+            <template v-else>
+              <span>
+                <el-button link type="primary" @click="handleDetail(scope.row)">
+                  {{ scope.row.tasks[0].assigneeUser?.nickname }}
+                </el-button>
+                等 {{ scope.row.tasks.length }} 人 ({{ scope.row.tasks[0].name }})审批中
+              </span>
+            </template>
+          </template>
+          <!-- 非审批中状态 -->
+          <template v-else>
+            <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+          </template>
         </template>
       </el-table-column>
       <el-table-column
@@ -158,19 +182,6 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <!--<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
-        <template #default="scope">
-          {{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="当前审批任务" align="center" prop="tasks" min-width="120px">
-        <template #default="scope">
-          <el-button type="primary" v-for="task in scope.row.tasks" :key="task.id" link>
-            <span>{{ task.name }}</span>
-          </el-button>
-        </template>
-      </el-table-column>
-      -->
       <el-table-column label="操作" align="center" fixed="right" width="180">
         <template #default="scope">
           <el-button
@@ -206,7 +217,6 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。 RE:done & to check
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
@@ -214,6 +224,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import { ProcessInstanceVO } from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
+import { BpmProcessInstanceStatus } from '@/utils/constants'
 
 defineOptions({ name: 'BpmProcessInstanceMy' })
 
@@ -224,6 +235,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const processDefinitionList = ref<any[]>([]) // 流程定义列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -235,6 +247,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
+const showPopover = ref(false) // 高级筛选是否展示
 
 /** 查询列表 */
 const getList = async () => {
@@ -248,8 +261,6 @@ const getList = async () => {
   }
 }
 
-const showPopover = ref(false)
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -316,10 +327,7 @@ onActivated(() => {
 onMounted(async () => {
   await getList()
   categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 获取流程定义列表
+  processDefinitionList.value = await DefinitionApi.getSimpleProcessDefinitionList()
 })
 </script>
-<style>
-.bold-label .el-form-item__label {
-  font-weight: bold; /* 将字体加粗 */
-}
-</style>

src/views/bpm/processInstance/report/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="发起人" prop="startUserId">
+        <el-select v-model="queryParams.startUserId" placeholder="请选择发起人" class="!w-240px">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择流程状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发起时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endTime">
+        <el-date-picker
+          v-model="queryParams.endTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item
+        v-for="(item, index) in formFields"
+        :key="index"
+        :label="item.title"
+        :prop="item.field"
+      >
+        <!-- TODO @lesan：目前只支持input类型的字符串搜索 -->
+        <el-input
+          :disabled="item.type !== 'input'"
+          v-model="queryParams.formFieldsParams[item.field]"
+          :placeholder="`请输入${item.title}`"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" border :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" fixed="left" width="200" />
+      <el-table-column label="流程发起人" align="center" prop="startUser.nickname" width="120" />
+      <el-table-column label="流程状态" prop="status" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="发起时间"
+        align="center"
+        prop="startTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="结束时间"
+        align="center"
+        prop="endTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        v-for="(item, index) in formFields"
+        :key="index"
+        :label="item.title"
+        :prop="item.field"
+        width="120"
+      >
+        <!-- TODO @lesan：可以根据formField的type进行展示方式的控制，现在全部以字符串 -->
+        <template #default="scope">
+          {{ scope.row.formVariables[item.field] ?? '' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" width="180">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            v-hasPermi="['bpm:process-instance:cancel']"
+            @click="handleDetail(scope.row)"
+          >
+            详情
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            v-if="scope.row.status === 1"
+            v-hasPermi="['bpm:process-instance:query']"
+            @click="handleCancel(scope.row)"
+          >
+            取消
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as UserApi from '@/api/system/user'
+import * as DefinitionApi from '@/api/bpm/definition'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
+import { ElMessageBox } from 'element-plus'
+
+defineOptions({ name: 'BpmProcessInstanceReport' })
+
+const router = useRouter() // 路由
+const { query } = useRoute()
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const formFields = ref()
+const processDefinitionId = query.processDefinitionId as string
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  startUserId: undefined,
+  name: '',
+  processDefinitionKey: query.processDefinitionKey,
+  status: undefined,
+  createTime: [],
+  endTime: [],
+  formFieldsParams: {}
+})
+const queryFormRef = ref() // 搜索的表单
+const userList = ref<any[]>([]) // 用户列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProcessInstanceApi.getProcessInstanceManagerPage({
+      ...queryParams,
+      formFieldsParams: JSON.stringify(queryParams.formFieldsParams)
+    })
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 获取流程定义 */
+const getProcessDefinition = async () => {
+  const processDefinition = await DefinitionApi.getProcessDefinition(processDefinitionId)
+  formFields.value = parseFormCreateFields(processDefinition.formFields)
+}
+
+/** 解析表单字段 */
+const parseFormCreateFields = (formFields?: string[]) => {
+  const result: Array<Record<string, any>> = []
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), result)
+    })
+  }
+  return result
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  queryParams.formFieldsParams = {}
+  handleQuery()
+}
+
+/** 查看详情 */
+const handleDetail = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+/** 取消按钮操作 */
+const handleCancel = async (row) => {
+  // 二次确认
+  const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  })
+  // 发起取消
+  await ProcessInstanceApi.cancelProcessInstanceByAdmin(row.id, value)
+  message.success('取消成功')
+  // 刷新列表
+  await getList()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 获取流程定义，用于 table column 的展示
+  await getProcessDefinition()
+  // 获取流程列表
+  await getList()
+  // 获取用户列表
+  userList.value = await UserApi.getSimpleUserList()
+})
+</script>

src/views/bpm/simple/SimpleModelDesign.vue

@@ -4,9 +4,7 @@
       :model-id="modelId"
       :model-key="modelKey"
       :model-name="modelName"
-      :value="currentValue"
       @success="handleSuccess"
-      @init-finished="handleInit"
       :start-user-ids="startUserIds"
       ref="designerRef"
     />
@@ -19,137 +17,22 @@ defineOptions({
   name: 'SimpleModelDesign'
 })
 
-const props = defineProps<{
+defineProps<{
   modelId?: string
   modelKey?: string
   modelName?: string
-  value?: string
   startUserIds?: number[]
 }>()
 
-const emit = defineEmits(['success', 'init-finished'])
+const emit = defineEmits(['success'])
 const designerRef = ref()
-const isInitialized = ref(false)
-const currentValue = ref('')
-
-// 初始化或更新当前值
-const initOrUpdateValue = async () => {
-  console.log('initOrUpdateValue', props.value)
-  if (props.value) {
-    currentValue.value = props.value
-    // 如果设计器已经初始化，立即加载数据
-    if (isInitialized.value && designerRef.value) {
-      try {
-        await designerRef.value.loadProcessData(props.value)
-        await nextTick()
-        if (designerRef.value.refresh) {
-          await designerRef.value.refresh()
-        }
-      } catch (error) {
-        console.error('加载流程数据失败:', error)
-      }
-    }
-  }
-}
-
-// 监听属性变化
-watch(
-  [() => props.modelKey, () => props.modelName, () => props.value],
-  async ([newKey, newName, newValue], [oldKey, oldName, oldValue]) => {
-    if (designerRef.value && isInitialized.value) {
-      try {
-        if (newKey && newName && (newKey !== oldKey || newName !== oldName)) {
-          await designerRef.value.updateModel(newKey, newName)
-        }
-        if (newValue && newValue !== oldValue) {
-          currentValue.value = newValue
-          await designerRef.value.loadProcessData(newValue)
-          await nextTick()
-          if (designerRef.value.refresh) {
-            await designerRef.value.refresh()
-          }
-        }
-      } catch (error) {
-        console.error('更新流程数据失败:', error)
-      }
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-// 初始化完成回调
-const handleInit = async () => {
-  try {
-    isInitialized.value = true
-    emit('init-finished')
-
-    // 等待下一个tick，确保设计器已经准备好
-    await nextTick()
-
-    // 初始化完成后，设置初始值
-    if (props.modelKey && props.modelName) {
-      await designerRef.value.updateModel(props.modelKey, props.modelName)
-    }
-    if (props.value) {
-      currentValue.value = props.value
-      await designerRef.value.loadProcessData(props.value)
-      // 再次刷新确保数据正确加载
-      await nextTick()
-      if (designerRef.value.refresh) {
-        await designerRef.value.refresh()
-      }
-    }
-  } catch (error) {
-    console.error('初始化流程数据失败:', error)
-  }
-}
 
 // 修改成功回调
 const handleSuccess = (data?: any) => {
-  console.warn('handleSuccess', data)
-  if (data && data !== currentValue.value) {
-    currentValue.value = data
+  console.info('handleSuccess', data)
+  if (data) {
     emit('success', data)
   }
 }
-
-/** 获取当前流程数据 */
-const getCurrentFlowData = async () => {
-  try {
-    if (designerRef.value) {
-      const data = await designerRef.value.getCurrentFlowData()
-      if (data) {
-        currentValue.value = data
-      }
-      return data
-    }
-    return currentValue.value || undefined
-  } catch (error) {
-    console.error('获取流程数据失败:', error)
-    return currentValue.value || undefined
-  }
-}
-
-// 组件创建时初始化数据
-onMounted(() => {
-  initOrUpdateValue()
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-  try {
-    const data = await getCurrentFlowData()
-    if (data) {
-      emit('success', data)
-    }
-  } catch (error) {
-    console.error('保存数据失败:', error)
-  }
-})
-
-defineExpose({
-  getCurrentFlowData,
-  refresh: () => designerRef.value?.refresh?.()
-})
 </script>
 <style lang="scss" scoped></style>

src/views/bpm/task/copy/index.vue

@@ -44,7 +44,17 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
+      <!-- TODO 芋艿：增加摘要 -->
       <el-table-column align="center" label="流程名" prop="processInstanceName" min-width="180" />
+      <el-table-column label="摘要" prop="summary" min-width="180">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
+            <div v-for="(item, index) in scope.row.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column
         align="center"
         label="流程发起人"

src/views/bpm/task/done/index.vue

@@ -64,7 +64,7 @@
             :value="dict.value"
           />
         </el-select>
-      </el-form-item> 
+      </el-form-item>
 
       <!-- 高级筛选 -->
       <el-form-item :style="{ position: 'absolute', right: '0px' }">
@@ -76,26 +76,31 @@
           placement="bottom-end"
         >
           <template #reference>
-            <el-button @click="showPopover = !showPopover" >
-              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+            <el-button @click="showPopover = !showPopover">
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选
             </el-button>
-            
           </template>
-          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+          <el-form-item
+            label="所属流程"
+            class="font-bold"
+            label-position="top"
+            prop="processDefinitionKey"
+          >
             <el-select
-              v-model="queryParams.category"
-              placeholder="请选择流程发起人"
+              v-model="queryParams.processDefinitionKey"
+              placeholder="请选择流程定义"
               clearable
+              @change="handleQuery"
               class="!w-390px"
             >
               <el-option
-                v-for="category in categoryList"
-                :key="category.code"
-                :label="category.name"
-                :value="category.code"
+                v-for="item in processDefinitionList"
+                :key="item.key"
+                :label="item.name"
+                :value="item.key"
               />
             </el-select>
-          </el-form-item>          
+          </el-form-item>
           <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
             <el-date-picker
               v-model="queryParams.createTime"
@@ -111,10 +116,9 @@
             <el-button @click="handleQuery"> 确认</el-button>
             <el-button @click="showPopover = false"> 取消</el-button>
             <el-button @click="resetQuery"> 清空</el-button>
-        </el-form-item>
+          </el-form-item>
         </el-popover>
       </el-form-item>
-
     </el-form>
   </ContentWrap>
 
@@ -122,6 +126,18 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column align="center" label="流程" prop="processInstance.name" width="180" />
+      <el-table-column label="摘要" prop="processInstance.summary" width="180">
+        <template #default="scope">
+          <div
+            class="flex flex-col"
+            v-if="scope.row.processInstance.summary && scope.row.processInstance.summary.length > 0"
+          >
+            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column
         align="center"
         label="发起人"
@@ -161,7 +177,12 @@
           {{ formatPast2(scope.row.durationInMillis) }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="流程编号" prop="id" :show-overflow-tooltip="true" />
+      <el-table-column
+        align="center"
+        label="流程编号"
+        prop="processInstanceId"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column align="center" label="任务编号" prop="id" :show-overflow-tooltip="true" />
       <el-table-column align="center" label="操作" fixed="right" width="80">
         <template #default="scope">
@@ -183,25 +204,28 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import * as TaskApi from '@/api/bpm/task'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import * as DefinitionApi from '@/api/bpm/definition'
 
-defineOptions({ name: 'BpmTodoTask' })
+defineOptions({ name: 'BpmDoneTask' })
 
 const { push } = useRouter() // 路由
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const processDefinitionList = ref<any[]>([]) // 流程定义列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: '',
-  category: undefined,  
+  category: undefined,
   status: undefined,
+  processDefinitionKey: '',
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
-const showPopover = ref(false)
+const showPopover = ref(false) // 高级筛选是否展示
 
 /** 查询任务列表 */
 const getList = async () => {
@@ -242,5 +266,7 @@ const handleAudit = (row: any) => {
 onMounted(async () => {
   await getList()
   categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 获取流程定义列表
+  processDefinitionList.value = await DefinitionApi.getSimpleProcessDefinitionList()
 })
 </script>

src/views/bpm/task/manager/index.vue

@@ -87,7 +87,7 @@
           {{ formatPast2(scope.row.durationInMillis) }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="流程编号" prop="id" :show-overflow-tooltip="true" />
+      <el-table-column align="center" label="流程编号" prop="processInstanceId" :show-overflow-tooltip="true" />
       <el-table-column align="center" label="任务编号" prop="id" :show-overflow-tooltip="true" />
       <el-table-column align="center" label="操作" fixed="right" width="80">
         <template #default="scope">

src/views/bpm/task/todo/index.vue

@@ -31,8 +31,7 @@
           搜索
         </el-button>
       </el-form-item>
-
-      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
+      <el-form-item label="" prop="category" class="absolute right-130px">
         <el-select
           v-model="queryParams.category"
           placeholder="请选择流程分类"
@@ -48,9 +47,8 @@
           />
         </el-select>
       </el-form-item>
-
       <!-- 高级筛选 -->
-      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+      <el-form-item class="absolute right-0">
         <el-popover
           :visible="showPopover"
           persistent
@@ -59,27 +57,32 @@
           placement="bottom-end"
         >
           <template #reference>
-            <el-button @click="showPopover = !showPopover" >
-              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+            <el-button @click="showPopover = !showPopover">
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选
             </el-button>
-            
           </template>
-          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+          <el-form-item
+            label="所属流程"
+            class="font-bold"
+            label-position="top"
+            prop="processDefinitionKey"
+          >
             <el-select
-              v-model="queryParams.category"
-              placeholder="请选择流程发起人"
+              v-model="queryParams.processDefinitionKey"
+              placeholder="请选择流程定义"
               clearable
+              @change="handleQuery"
               class="!w-390px"
             >
               <el-option
-                v-for="category in categoryList"
-                :key="category.code"
-                :label="category.name"
-                :value="category.code"
+                v-for="item in processDefinitionList"
+                :key="item.key"
+                :label="item.name"
+                :value="item.key"
               />
             </el-select>
-          </el-form-item>          
-          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+          </el-form-item>
+          <el-form-item label="发起时间" class="font-bold" label-position="top" prop="createTime">
             <el-date-picker
               v-model="queryParams.createTime"
               value-format="YYYY-MM-DD HH:mm:ss"
@@ -87,17 +90,18 @@
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              class="!w-240px"
+              class="w-240px!"
             />
           </el-form-item>
-          <el-form-item class="bold-label" label-position="top">
-            <el-button @click="handleQuery"> 确认</el-button>
-            <el-button @click="showPopover = false"> 取消</el-button>
-            <el-button @click="resetQuery"> 清空</el-button>
-        </el-form-item>
+          <el-form-item class="font-bold" label-position="top">
+            <div class="flex justify-end w-full">
+              <el-button @click="resetQuery">清空</el-button>
+              <el-button @click="showPopover = false">取消</el-button>
+              <el-button type="primary" @click="handleQuery">确认</el-button>
+            </div>
+          </el-form-item>
         </el-popover>
       </el-form-item>
-
     </el-form>
   </ContentWrap>
 
@@ -105,6 +109,18 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column align="center" label="流程" prop="processInstance.name" width="180" />
+      <el-table-column label="摘要" prop="processInstance.summary" width="180">
+        <template #default="scope">
+          <div
+            class="flex flex-col"
+            v-if="scope.row.processInstance.summary && scope.row.processInstance.summary.length > 0"
+          >
+            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column
         align="center"
         label="发起人"
@@ -126,7 +142,12 @@
         prop="createTime"
         width="180"
       />
-      <el-table-column align="center" label="流程编号" prop="id" :show-overflow-tooltip="true" />
+      <el-table-column
+        align="center"
+        label="流程编号"
+        prop="processInstanceId"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column align="center" label="任务编号" prop="id" :show-overflow-tooltip="true" />
       <el-table-column align="center" label="操作" fixed="right" width="80">
         <template #default="scope">
@@ -148,6 +169,7 @@
 import { dateFormatter } from '@/utils/formatTime'
 import * as TaskApi from '@/api/bpm/task'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import * as DefinitionApi from '@/api/bpm/definition'
 
 defineOptions({ name: 'BpmTodoTask' })
 
@@ -156,15 +178,18 @@ const { push } = useRouter() // 路由
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const processDefinitionList = ref<any[]>([]) // 流程定义列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: '',
   category: undefined,
+  processDefinitionKey: '',
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
+const showPopover = ref(false) // 高级筛选是否展示
 
 /** 查询任务列表 */
 const getList = async () => {
@@ -178,8 +203,6 @@ const getList = async () => {
   }
 }
 
-const showPopover = ref(false)
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -207,5 +230,7 @@ const handleAudit = (row: any) => {
 onMounted(async () => {
   await getList()
   categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 获取流程定义列表
+  processDefinitionList.value = await DefinitionApi.getSimpleProcessDefinitionList()
 })
 </script>

src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue

@@ -66,7 +66,11 @@
       </el-table-column>
       <el-table-column label="产品单价" fixed="right" min-width="120">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.productPrice`" class="mb-0px!">
+          <el-form-item
+            :prop="`${$index}.productPrice`"
+            :rules="formRules.productPrice"
+            class="mb-0px!"
+          >
             <el-input-number
               v-model="row.productPrice"
               controls-position="right"
@@ -153,6 +157,7 @@ const formLoading = ref(false) // 表单的加载中
 const formData = ref([])
 const formRules = reactive({
   productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
+  productPrice: [{ required: true, message: '产品单价不能为空', trigger: 'blur' }],
   count: [{ required: true, message: '产品数量不能为空', trigger: 'blur' }]
 })
 const formRef = ref([]) // 表单 Ref

src/views/infra/build/index.vue

@@ -135,7 +135,8 @@ const makeTemplate = () => {
 
 /** 复制 **/
 const copy = async (text: string) => {
-  const { copy, copied, isSupported } = useClipboard({ source: text })
+  const textToCopy = JSON.stringify(text, null, 2)
+  const { copy, copied, isSupported } = useClipboard({ source: textToCopy })
   if (!isSupported) {
     message.error(t('common.copyError'))
   } else {
@@ -149,17 +150,18 @@ const copy = async (text: string) => {
 /**
  * 代码高亮
  */
-const highlightedCode = (code) => {
+const highlightedCode = (code: string) => {
   // 处理语言和代码
   let language = 'json'
   if (formType.value === 2) {
     language = 'xml'
   }
+  // debugger
   if (!isString(code)) {
-    code = JSON.stringify(code)
+    code = JSON.stringify(code, null, 2)
   }
   // 高亮
-  const result = hljs.highlight(language, code, true)
+  const result = hljs.highlight(code, { language: language, ignoreIllegals: true })
   return result.value || ' '
 }
 

src/views/infra/job/JobDetail.vue

@@ -7,7 +7,7 @@
       <el-descriptions-item label="任务名称">
         {{ detailData.name }}
       </el-descriptions-item>
-      <el-descriptions-item label="任务名称">
+      <el-descriptions-item label="任务状态">
         <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="detailData.status" />
       </el-descriptions-item>
       <el-descriptions-item label="处理器的名字">

src/views/knowledge/dataset-form/form-step1.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="upload-container">
-    <!-- 标题 -->
-    <div class="title">
-      <div>选择数据源</div>
-    </div>
-
-    <!-- 数据源选择 -->
-    <div class="resource-btn" >导入已有文本</div>
-
-    <!-- 上传文件区域 -->
-    <el-form>
-      <div class="upload-section">
-        <div class="upload-label">上传文本文件</div>
-        <el-upload
-          class="upload-area"
-          action="#"
-          :file-list="fileList"
-          :on-remove="handleRemove"
-          :before-upload="beforeUpload"
-          list-type="text"
-          drag
-        >
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text">拖拽文件至此，或者 <em>选择文件</em></div>
-          <div class="el-upload__tip">
-            已支持 TXT、MARKDOWN、PDF、HTML、XLSX、XLS、DOCX、CSV、EML、MSG、PPTX、PPT、XML、EPUB，每个文件不超过 15MB。
-          </div>
-        </el-upload>
-      </div>
-
-      <!-- 下一步按钮 -->
-      <div class="next-button">
-        <el-button type="primary" :disabled="!fileList.length">下一步</el-button>
-      </div>
-    </el-form>
-
-    <!-- 知识库创建 -->
-    <div class="create-knowledge">
-      <el-link type="primary" underline>创建一个空知识库</el-link>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const fileList = ref([])
-
-const handleRemove = (file, fileList) => {
-  console.log(file, fileList)
-}
-
-const beforeUpload = (file) => {
-  fileList.value.push(file)
-  return false
-}
-</script>
-
-<style scoped lang="scss">
-.upload-container {
-  width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: #fff;
-  border-radius: 8px;
-  border: 1px solid #ebebeb;
-}
-
-.title {
-  font-size: 22px;
-  font-weight: bold;
-}
-
-.resource-btn {
-  margin-top: 20px;
-  border-radius: 10px;
-  cursor: pointer;
-  width: 150px;
-  border: 1.5px solid #528bff;
-  padding: 10px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 30px;
-  color: #101828;
-}
-
-.upload-section {
-  margin: 20px 0;
-  padding-top: 10px;
-}
-
-.upload-label {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: #303133;
-}
-
-.upload-area {
-  margin-top: 10px;
-  border: 1px dashed #d9d9d9;
-  padding: 40px;
-  text-align: center;
-  background-color: #f5f7fa;
-  border-radius: 8px;
-}
-
-.el-upload__text em {
-  color: #409eff;
-  cursor: pointer;
-}
-
-.el-upload__tip {
-  margin-top: 10px;
-  font-size: 12px;
-  color: #909399;
-}
-
-.next-button {
-  text-align: left;
-  margin-top: 20px;
-}
-
-.create-knowledge {
-  text-align: left;
-  margin-top: 20px;
-}
-
-.el-form-item {
-  margin-bottom: 0;
-}
-
-.source-radio-group {
-  display: flex;
-  justify-content: space-between;
-}
-
-.el-radio-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  padding: 10px 20px;
-}
-
-.el-radio-button .el-icon {
-  margin-right: 8px;
-}
-</style>

src/views/knowledge/dataset-form/form-step2.vue

@@ -1,168 +0,0 @@
-<template>
-  <el-row>
-    <!-- Left Section -->
-    <el-col :span="12">
-      <el-card>
-        <!-- 分段设置 -->
-        <el-form>
-          <el-form-item label="分段设置">
-            <el-radio-group v-model="segmentSetting">
-              <el-radio label="自动分段与清洗">自动分段与清洗</el-radio>
-              <el-radio label="自定义">自定义</el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <!-- 索引方式 -->
-          <el-form-item label="索引方式">
-            <el-radio-group v-model="indexingMethod">
-              <el-radio label="高质量">高质量</el-radio>
-              <el-radio label="经济">经济</el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <!-- Embedding 模型 -->
-          <el-form-item label="Embedding 模型">
-            <el-select v-model="embeddingModel" placeholder="Select Embedding Model">
-              <el-option label="text-embedding-3-large" value="text-embedding-3-large"/>
-            </el-select>
-          </el-form-item>
-
-          <!-- 检索设置 -->
-          <el-form-item label="检索设置">
-            <el-card style="width: 400px;">
-              <div class="card-header">
-                <span>向量检索</span>
-              </div>
-              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
-              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
-            </el-card>
-
-            <el-card style="width: 400px;">
-              <div class="card-header">
-                <span>全文检索</span>
-              </div>
-              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
-              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
-            </el-card>
-
-            <el-card style="width: 400px;">
-              <div class="card-header">
-                <span>混合检索</span>
-              </div>
-              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
-              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
-            </el-card>
-          </el-form-item>
-        </el-form>
-      </el-card>
-    </el-col>
-
-    <!-- Right Section: 分段预览 -->
-    <el-col :span="9">
-      <el-card shadow="never">
-        <div class="previews-title">分段预览</div>
-        <template v-for="(segment, index) in segmentPreviews" :key="index">
-          <div class="segment-preview">
-            <div class="title">
-              <div class="left">
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-                     xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25"
-                    stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                <span class="id">{{ segment.number }}</span>
-              </div>
-
-              <div class="right">
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-                     xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M4 3.5H8M6 3.5V8.5M3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V3.9C10.5 3.05992 10.5 2.63988 10.3365 2.31901C10.1927 2.03677 9.96323 1.8073 9.68099 1.66349C9.36012 1.5 8.94008 1.5 8.1 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5Z"
-                    stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                <span class="char-size">7777 字符</span>
-              </div>
-            </div>
-
-            <div class="content">{{ segment.text }}</div>
-          </div>
-        </template>
-      </el-card>
-    </el-col>
-  </el-row>
-</template>
-
-<script setup>
-import {ref} from 'vue';
-
-// Reactive variables for form control
-const segmentSetting = ref('自动分段与清洗');
-const indexingMethod = ref('高质量');
-const embeddingModel = ref('text-embedding-3-large');
-const directionalSearch = ref(true);
-const topK = ref(3);
-const scoreThreshold = ref(0.5);
-
-// Mock data for segment previews
-const segmentPreviews = ref([
-  {number: '001', text: "同步obs模型...'UAE-large-V1'"},
-  {number: '002', text: "同步obs模型...'plip'"},
-  {number: '003', text: "同步obs模型...'phoBERT-base-v2'"},
-  {number: '004', text: "同步obs模型...'lama3-bb-bnb-4bit'"},
-  {number: '005', text: "同步obs模型...'t5-base-split-and-rephrase'"}
-]);
-</script>
-
-<style scoped lang="scss">
-/* Add any custom styles here */
-
-.previews-title {
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.segment-preview {
-  background-color: rgba(228, 228, 228, 0.38);
-  border-radius: 10px;
-  padding: 15px;
-  margin-top: 15px;
-
-  .title {
-    display: flex;
-    justify-content: space-between;
-
-    .left {
-      border-right: 5px;
-      font-size: 13px;
-      font-style: italic;
-      font-weight: 500;
-      color: #676767;
-      box-sizing: border-box;
-      align-items: center;
-
-      .id {
-        margin-left: 5px;
-      }
-    }
-
-    .right {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .char-size {
-        margin-left: 5px;
-        font-size: 13px;
-        color: rgba(57, 57, 57, 0.66);
-      }
-    }
-  }
-
-  .content {
-    margin-top: 10px;
-    font-size: 15px;
-    font-weight: 500;
-  }
-}
-</style>

src/views/knowledge/dataset.vue

@@ -1,152 +0,0 @@
-<template>
-  <div class="knowledge-base-container">
-    <div class="card-container">
-      <el-card class="create-card" shadow="hover">
-        <div class="create-content">
-          <el-icon class="create-icon"><Plus /></el-icon>
-          <span class="create-text">创建知识库</span>
-        </div>
-        <div class="create-footer">
-          导入您自己的文本数据或通过 Webhook 实时写入数据以增强 LLM 的上下文。
-        </div>
-      </el-card>
-
-      <el-card class="document-card" shadow="hover" v-for="index in 4" :key="index">
-        <div class="document-header">
-          <el-icon><Folder /></el-icon>
-          <span>接口鉴权示例代码.md</span>
-        </div>
-        <div class="document-info">
-          <el-tag size="small">1 文档</el-tag>
-          <el-tag size="small" type="info">5 千字符</el-tag>
-          <el-tag size="small" type="warning">0 关联应用</el-tag>
-        </div>
-        <p class="document-description">
-          useful for when you want to answer queries about the 接口鉴权示例代码.md
-        </p>
-      </el-card>
-    </div>
-
-    <div class="pagination-container">
-      <el-pagination
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[10, 20, 30, 40]"
-        :small="false"
-        :disabled="false"
-        :background="true"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Folder, Plus } from '@element-plus/icons-vue'
-
-const currentPage = ref(1)
-const pageSize = ref(10)
-const total = ref(100) // 假设总共有100条数据
-
-const handleSizeChange = (val) => {
-  console.log(`每页 ${val} 条`)
-}
-
-const handleCurrentChange = (val) => {
-  console.log(`当前页: ${val}`)
-}
-</script>
-
-<style scoped>
-.knowledge-base-container {
-  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  position: absolute;
-  padding: 20px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  bottom: 40px;
-  width: 100%;
-}
-
-.card-container {
-  display: flex;
-  flex-wrap: wrap; /* Enable wrapping */
-  gap: 20px;
-  margin-bottom: auto; /* Pushes pagination to the bottom */
-}
-
-.create-card, .document-card {
-  flex: 1 1 360px; /* Allow cards to grow and shrink */
-  min-width: 0;
-  max-width: 400px;
-  border-radius: 10px;
-  cursor: pointer;
-}
-
-.create-card {
-  background-color: rgba(168, 168, 168, 0.22);
-}
-.create-card:hover {
-  background-color: #fff;
-}
-
-.create-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 15px;
-}
-
-.create-icon {
-  font-size: 24px;
-  color: #409EFF;
-}
-
-.create-text {
-  font-size: 18px;
-  font-weight: bold;
-  color: #303133;
-}
-
-.create-footer {
-  font-size: 14px;
-  color: #909399;
-  line-height: 1.5;
-}
-
-.document-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-}
-
-.document-info {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 15px;
-}
-
-.document-description {
-  color: #606266;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.pagination-container {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-</style>

src/views/mall/product/spu/index.vue

@@ -411,7 +411,7 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await ProductSpuApi.exportSpu(queryParams)
+    const data = await ProductSpuApi.exportSpu(queryParams.value)
     download.excel(data, '商品列表.xls')
   } catch {
   } finally {
@@ -434,7 +434,7 @@ onActivated(() => {
 onMounted(async () => {
   // 解析路由的 categoryId
   if (route.query.categoryId) {
-    queryParams.value.categoryId = Number(route.query.categoryId)
+    queryParams.value.categoryId = route.query.categoryId
   }
   // 获得商品信息
   await getTabsCount()

src/views/mall/promotion/diy/template/decorate.vue

@@ -52,7 +52,9 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
 const formRef = ref() // 表单 Ref
 // 当前编辑的属性
-const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>({
+  property: ''
+} as DiyPageApi.DiyPageVO)
 // templateItem 对应的缓存
 const currentFormDataMap = ref<
   Map<string, DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>
@@ -92,17 +94,21 @@ const handleTemplateItemChange = (val: number) => {
   // 编辑模板
   if (val === 0) {
     libs.value = templateLibs
-    currentFormData.value = isEmpty(data) ? formData.value : data
+    currentFormData.value = (isEmpty(data) ? formData.value : data) as
+      | DiyTemplateApi.DiyTemplatePropertyVO
+      | DiyPageApi.DiyPageVO
     return
   }
 
   // 编辑页面
   libs.value = PAGE_LIBS
-  currentFormData.value = isEmpty(data)
-    ? formData.value!.pages.find(
-        (page: DiyPageApi.DiyPageVO) => page.name === templateItems[val].name
-      )
-    : data
+  currentFormData.value = (
+    isEmpty(data)
+      ? formData.value!.pages.find(
+          (page: DiyPageApi.DiyPageVO) => page.name === templateItems[val].name
+        )
+      : data
+  ) as DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO
 }
 
 // 提交表单
@@ -170,7 +176,9 @@ const recoverPageIndex = () => {
   sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
 
   // 重新初始化数据
-  currentFormData.value = formData.value
+  currentFormData.value = formData.value as
+    | DiyTemplateApi.DiyTemplatePropertyVO
+    | DiyPageApi.DiyPageVO
   currentFormDataMap.value = new Map<
     string,
     DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO

src/views/mall/promotion/kefu/components/KeFuConversationList.vue

@@ -200,7 +200,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .kefu {
-  background-color: #e5e4e4;
+  background-color: var(--app-content-bg-color);
 
   &-conversation {
     height: 60px;

src/views/mall/promotion/kefu/components/KeFuMessageList.vue

@@ -279,8 +279,9 @@ const handleSendMessage = async (event: any) => {
     return
   }
   // 1. 校验消息是否为空
-  if (isEmpty(unref(message.value))) {
+  if (isEmpty(unref(message.value)?.trim())) {
     messageTool.notifyWarning('请输入消息后再发送哦！')
+    message.value = ''
     return
   }
   // 2. 组织发送消息
@@ -372,7 +373,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
 <style lang="scss" scoped>
 .kefu {
-  background-color: #f5f5f5;
+  background-color: var(--app-content-bg-color);
   position: relative;
   width: calc(100% - 300px - 260px);
 
@@ -388,7 +389,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
   }
 
   .kefu-header {
-    background-color: #f5f5f5;
+    background-color: var(--app-content-bg-color);
     position: relative;
     display: flex;
     align-items: center;
@@ -510,7 +511,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
   ::v-deep(textarea) {
     resize: none;
-    background-color: #f5f5f5;
+    background-color: var(--app-content-bg-color);
   }
 
   :deep(.el-input__wrapper) {

src/views/mall/promotion/kefu/components/member/MemberInfo.vue

@@ -167,7 +167,7 @@ const getUserData = async () => {
 .kefu {
   position: relative;
   width: 300px !important;
-  background-color: #f5f5f5;
+  background-color: var(--app-content-bg-color);
 
   &::after {
     content: '';
@@ -181,7 +181,7 @@ const getUserData = async () => {
   }
 
   &-header {
-    background-color: #f5f5f5;
+    background-color: var(--app-content-bg-color);
     position: relative;
     display: flex;
     align-items: center;

src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -112,7 +112,7 @@ function formatOrderStatus(order: any) {
   border-radius: 10px;
   padding: 10px;
   border: 1px var(--el-border-color) solid;
-  background-color: #fff; // 透明色，暗黑模式下也能体现
+  background-color: rgba(128, 128, 128, 0.3); // 透明色，暗黑模式下也能体现
 
   .order-card-header {
     height: 28px;

src/views/mall/promotion/kefu/components/message/ProductItem.vue

@@ -77,7 +77,8 @@ const openDetail = (spuId: number) => {
 
 .product-warp {
   width: 100%;
-  background-color: #fff;
+  background-color: rgba(128, 128, 128, 0.3);
+  border: 1px solid var(--el-border-color);
   border-radius: 8px;
   display: flex;
   align-items: center;

src/views/mall/promotion/kefu/index.vue

@@ -37,40 +37,45 @@ const { data, close, open } = useWebSocket(server.value, {
 })
 
 /** 监听 WebSocket 数据 */
-watchEffect(() => {
-  if (!data.value) {
-    return
+watch(
+  () => data.value,
+  (newData) => {
+    if (!newData) return
+    try {
+      // 1. 收到心跳
+      if (newData === 'pong') return
+
+      // 2.1 解析 type 消息类型
+      const jsonMessage = JSON.parse(newData)
+      const type = jsonMessage.type
+      if (!type) {
+        message.error('未知的消息类型：' + newData)
+        return
+      }
+
+      // 2.2 消息类型：KEFU_MESSAGE_TYPE
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+        const message = JSON.parse(jsonMessage.content)
+        // 刷新会话列表
+        kefuStore.updateConversation(message.conversationId)
+        // 刷新消息列表
+        keFuChatBoxRef.value?.refreshMessageList(message)
+        return
+      }
+
+      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+        // 更新会话已读
+        kefuStore.updateConversationStatus(jsonParse(jsonMessage.content))
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  },
+  {
+    immediate: false // 不立即执行
   }
-  try {
-    // 1. 收到心跳
-    if (data.value === 'pong') {
-      return
-    }
-    // 2.1 解析 type 消息类型
-    const jsonMessage = JSON.parse(data.value)
-    const type = jsonMessage.type
-    if (!type) {
-      message.error('未知的消息类型：' + data.value)
-      return
-    }
-    // 2.2 消息类型：KEFU_MESSAGE_TYPE
-    if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
-      const message = JSON.parse(jsonMessage.content)
-      // 刷新会话列表
-      kefuStore.updateConversation(message.conversationId)
-      // 刷新消息列表
-      keFuChatBoxRef.value?.refreshMessageList(message)
-      return
-    }
-    // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
-    if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
-      // 更新会话已读
-      kefuStore.updateConversationStatus(jsonParse(jsonMessage.content))
-    }
-  } catch (error) {
-    console.error(error)
-  }
-})
+)
 // ======================= WebSocket end =======================
 
 /** 加载指定会话的消息列表 */

src/views/mall/trade/afterSale/detail/index.vue

@@ -90,11 +90,15 @@
       <el-descriptions-item labelClassName="no-colon">
         <el-row :gutter="20">
           <el-col :span="15">
-            <el-table :data="[formData.orderItem]" border>
+            <el-table v-if="formData.orderItem" :data="[formData.orderItem]" border>
               <el-table-column label="商品" prop="spuName" width="auto">
                 <template #default="{ row }">
                   {{ row.spuName }}
-                  <el-tag v-for="property in row.properties" :key="property.propertyId">
+                  <el-tag
+                    v-for="property in row.properties"
+                    :key="property.propertyId"
+                    class="mr-10px"
+                  >
                     {{ property.propertyName }}: {{ property.valueName }}
                   </el-tag>
                 </template>

src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue

@@ -20,7 +20,7 @@
             <el-button type="primary" @click="storeStaffTableSelect.open()">选择店员</el-button>
           </el-form-item>
           <!-- 店员列表 -->
-          <ContentWrap v-if="formData.verifyUsers.length > 0">
+          <ContentWrap v-if="formData.verifyUsers?.length > 0">
             <el-table :data="formData.verifyUsers">
               <el-table-column label="编号" align="center" prop="id" />
               <el-table-column

src/views/mall/trade/order/detail/index.vue

@@ -334,13 +334,13 @@ onMounted(async () => {
   // 如果配送方式为快递，则查询物流公司
   if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
     deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
-    if (form.value.logisticsId) {
+    if (formData.value.logisticsId) {
       expressTrackList.value = await TradeOrderApi.getExpressTrackList(formData.value.id!)
     }
   } else if (formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type) {
-    pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
-      formData.value.pickUpStoreId
-    )
+    if (formData.value.pickUpStoreId) {
+      pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(formData.value.pickUpStoreId)
+    }
   }
 })
 </script>

src/views/pay/app/components/channel/WeixinChannelForm.vue

@@ -26,9 +26,23 @@
             placeholder="请输入微信 APPID"
           />
         </el-form-item>
+        <el-form-item label-width="180px">
+          <a
+            href="https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage"
+            target="_blank"
+          >
+            前往微信商户平台查看 APPID
+          </a>
+        </el-form-item>
         <el-form-item label="商户号" label-width="180px" prop="config.mchId">
           <el-input v-model="formData.config.mchId" :style="{ width: '100%' }" />
         </el-form-item>
+
+        <el-form-item label-width="180px">
+          <a href="https://pay.weixin.qq.com/index.php/extend/pay_setting" target="_blank">
+            前往微信商户平台查看商户号
+          </a>
+        </el-form-item>
         <el-form-item label="渠道状态" label-width="180px" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio
@@ -123,6 +137,14 @@
               placeholder="请输入证书序列号"
             />
           </el-form-item>
+          <el-form-item label-width="180px">
+            <a
+              href="https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage"
+              target="_blank"
+            >
+              前往微信商户平台查看证书序列号
+            </a>
+          </el-form-item>
         </div>
         <el-form-item label="备注" label-width="180px" prop="remark">
           <el-input v-model="formData.remark" :style="{ width: '100%' }" />

src/views/system/menu/index.vue

@@ -53,6 +53,10 @@
           <Icon class="mr-5px" icon="ep:plus" />
           新增
         </el-button>
+        <el-button plain type="danger" @click="toggleExpandAll">
+          <Icon class="mr-5px" icon="ep:sort" />
+          展开/折叠
+        </el-button>
         <el-button plain @click="refreshMenu">
           <Icon class="mr-5px" icon="ep:refresh" />
           刷新菜单缓存
@@ -63,148 +67,169 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <div style="height: 700px">
-      <!-- AutoResizer 自动调节大小 -->
-      <el-auto-resizer>
-        <template #default="{ height, width }">
-          <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
-          <el-table-v2
-            v-loading="loading"
-            :columns="columns"
-            :data="list"
-            :width="width"
-            :height="height"
-            expand-column-key="name"
-          />
-        </template>
-      </el-auto-resizer>
-    </div>
+    <el-auto-resizer>
+      <template #default="{ width }">
+        <el-table-v2
+          v-model:expanded-row-keys="expandedRowKeys"
+          :columns="columns"
+          :data="list"
+          :expand-column-key="columns[0].key"
+          :height="1000"
+          :width="width"
+          fixed
+          row-key="id"
+        />
+      </template>
+    </el-auto-resizer>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
   <MenuForm ref="formRef" @success="getList" />
 </template>
-<script lang="ts" setup>
+<script lang="tsx" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { handleTree } from '@/utils/tree'
 import * as MenuApi from '@/api/system/menu'
 import { MenuVO } from '@/api/system/menu'
 import MenuForm from './MenuForm.vue'
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-import { h } from 'vue'
-import { Column, ElButton } from 'element-plus'
+import DictTag from '@/components/DictTag/src/DictTag.vue'
 import { Icon } from '@/components/Icon'
-import { hasPermission } from '@/directives/permission/hasPermi'
+import { ElButton, TableV2FixedDir } from 'element-plus'
+import { checkPermi } from '@/utils/permission'
 import { CommonStatusEnum } from '@/utils/constants'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 
 defineOptions({ name: 'SystemMenu' })
 
+// 虚拟列表表格
+const columns = [
+  {
+    key: 'name',
+    title: '菜单名称',
+    dataKey: 'name',
+    width: 250,
+    fixed: TableV2FixedDir.LEFT
+  },
+  {
+    key: 'icon',
+    title: '图标',
+    dataKey: 'icon',
+    width: 100,
+    align: 'center',
+    cellRenderer: ({ cellData: icon }) => <Icon icon={icon} />
+  },
+  {
+    key: 'sort',
+    title: '排序',
+    dataKey: 'sort',
+    width: 60
+  },
+  {
+    key: 'permission',
+    title: '权限标识',
+    dataKey: 'permission',
+    width: 300
+  },
+  {
+    key: 'component',
+    title: '组件路径',
+    dataKey: 'component',
+    width: 500
+  },
+  {
+    key: 'componentName',
+    title: '组件名称',
+    dataKey: 'componentName',
+    width: 200
+  },
+  {
+    key: 'status',
+    title: '状态',
+    dataKey: 'status',
+    width: 60,
+    fixed: TableV2FixedDir.RIGHT,
+    cellRenderer: ({ rowData }) => {
+      // 检查权限
+      if (!checkPermi(['system:menu:update'])) {
+        return <DictTag type={DICT_TYPE.COMMON_STATUS} value={rowData.status} />
+      }
+
+      // 如果有权限，渲染 ElSwitch
+      return (
+        <ElSwitch
+          v-model={rowData.status}
+          active-value={CommonStatusEnum.ENABLE}
+          inactive-value={CommonStatusEnum.DISABLE}
+          loading={menuStatusUpdating[rowData.id]}
+          class="ml-4px"
+          onChange={(val) => handleStatusChanged(rowData, val)}
+        />
+      )
+    }
+  },
+  {
+    key: 'operations',
+    title: '操作',
+    align: 'center',
+    width: 160,
+    fixed: TableV2FixedDir.RIGHT,
+    cellRenderer: ({ rowData }) => {
+      // 定义按钮列表
+      const buttons = []
+
+      // 检查权限并添加按钮
+      if (checkPermi(['system:menu:update'])) {
+        buttons.push(
+          <ElButton key="edit" link type="primary" onClick={() => openForm('update', rowData.id)}>
+            修改
+          </ElButton>
+        )
+      }
+      if (checkPermi(['system:menu:create'])) {
+        buttons.push(
+          <ElButton
+            key="create"
+            link
+            type="primary"
+            onClick={() => openForm('create', undefined, rowData.id)}
+          >
+            新增
+          </ElButton>
+        )
+      }
+      if (checkPermi(['system:menu:delete'])) {
+        buttons.push(
+          <ElButton key="delete" link type="danger" onClick={() => handleDelete(rowData.id)}>
+            删除
+          </ElButton>
+        )
+      }
+      // 如果没有权限，返回 null
+      if (buttons.length === 0) {
+        return null
+      }
+      // 渲染按钮列表
+      return <>{buttons}</>
+    }
+  }
+]
+
 const { wsCache } = useCache()
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-// 表格的 column 字段
-const columns: Column[] = [
-  {
-    dataKey: 'name',
-    title: '菜单名称',
-    width: 250
-  },
-  {
-    dataKey: 'icon',
-    title: '图标',
-    width: 150,
-    cellRenderer: ({ rowData }) => {
-      return h(Icon, {
-        icon: rowData.icon
-      })
-    }
-  },
-  {
-    dataKey: 'sort',
-    title: '排序',
-    width: 100
-  },
-  {
-    dataKey: 'permission',
-    title: '权限标识',
-    width: 240
-  },
-  {
-    dataKey: 'component',
-    title: '组件路径',
-    width: 240
-  },
-  {
-    dataKey: 'componentName',
-    title: '组件名称',
-    width: 240
-  },
-  {
-    dataKey: 'status',
-    title: '状态',
-    width: 160,
-    cellRenderer: ({ rowData }) => {
-      return h(ElSwitch, {
-        modelValue: rowData.status,
-        activeValue: CommonStatusEnum.ENABLE,
-        inactiveValue: CommonStatusEnum.DISABLE,
-        loading: menuStatusUpdating.value[rowData.id],
-        disabled: !hasPermission(['system:menu:update']),
-        onChange: (val) => handleStatusChanged(rowData, val as number)
-      })
-    }
-  },
-  {
-    dataKey: 'operation',
-    title: '操作',
-    width: 200,
-    cellRenderer: ({ rowData }) => {
-      return h(
-        'div',
-        [
-          hasPermission(['system:menu:update']) &&
-            h(
-              ElButton,
-              {
-                link: true,
-                type: 'primary',
-                onClick: () => openForm('update', rowData.id)
-              },
-              '修改'
-            ),
-          hasPermission(['system:menu:create']) &&
-            h(
-              ElButton,
-              {
-                link: true,
-                type: 'primary',
-                onClick: () => openForm('create', undefined, rowData.id)
-              },
-              '新增'
-            ),
-          hasPermission(['system:menu:delete']) &&
-            h(
-              ElButton,
-              {
-                link: true,
-                type: 'danger',
-                onClick: () => handleDelete(rowData.id)
-              },
-              '删除'
-            )
-        ].filter(Boolean)
-      )
-    }
-  }
-]
 const loading = ref(true) // 列表的加载中
-const list = ref<any>([]) // 列表的数据
+const list = ref<any[]>([]) // 列表的数据
 const queryParams = reactive({
   name: undefined,
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
+const isExpandAll = ref(false) // 是否展开，默认全部折叠
+const refreshTable = ref(true) // 重新渲染表格状态
+
+// 添加展开行控制
+const expandedRowKeys = ref<number[]>([])
 
 /** 查询列表 */
 const getList = async () => {
@@ -234,6 +259,18 @@ const openForm = (type: string, id?: number, parentId?: number) => {
   formRef.value.open(type, id, parentId)
 }
 
+/** 展开/折叠操作 */
+const toggleExpandAll = () => {
+  if (!isExpandAll.value) {
+    // 展开所有
+    expandedRowKeys.value = list.value.map((item) => item.id)
+  } else {
+    // 折叠所有
+    expandedRowKeys.value = []
+  }
+  isExpandAll.value = !isExpandAll.value
+}
+
 /** 刷新菜单缓存按钮操作 */
 const refreshMenu = async () => {
   try {

src/views/system/user/index.vue

@@ -124,6 +124,7 @@
                 :active-value="0"
                 :inactive-value="1"
                 @change="handleStatusChange(scope.row)"
+                :disabled="!checkPermi(['system:user:update'])"
               />
             </template>
           </el-table-column>