From e9bb9403b4ade987b2d7071619dbd9bfa2c13565 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 8 Jul 2024 12:00:34 +0800
Subject: [PATCH 01/24] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91spu?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=95=86=E5=93=81=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=80=BC=E4=B8=BA=E7=A9=BA=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/components/SkuList.vue   | 36 ++++++++++++-------
 .../product/spu/form/ProductAttributes.vue    | 12 +++----
 src/views/mall/product/spu/form/SkuForm.vue   | 14 ++++----
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue
index 2befe640..9bbd38e4 100644
--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/src/views/mall/product/spu/components/SkuList.vue
@@ -292,6 +292,7 @@ import { createImageViewer } from '@/components/ImageViewer'
 import { RuleConfig } from '@/views/mall/product/spu/components/index'
 import { PropertyAndValues } from './index'
 import { ElTable } from 'element-plus'
+import { isEmpty } from '@/utils/is'
 
 defineOptions({ name: 'SkuList' })
 const message = useMessage() // 消息弹窗
@@ -340,11 +341,22 @@ const imagePreview = (imgUrl: string) => {
 
 /** 批量添加 */
 const batchAdd = () => {
+  validateProperty()
   formData.value!.skus!.forEach((item) => {
     copyValueToTarget(item, skuList.value[0])
   })
 }
-
+/** 校验商品属性属性值 */
+const validateProperty = () => {
+  // 校验商品属性属性值是否为空，有一个为空都不给过
+  const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！'
+  for (const item of props.propertyList) {
+    if (!item.values || isEmpty(item.values)) {
+      message.warning(warningInfo)
+      throw new Error(warningInfo)
+    }
+  }
+}
 /** 删除 sku */
 const deleteSku = (row) => {
   const index = formData.value!.skus!.findIndex(
@@ -358,6 +370,7 @@ const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表
  * 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
  */
 const validateSku = () => {
+  validateProperty()
   let warningInfo = '请检查商品各行相关属性配置，'
   let validate = true // 默认通过
   for (const sku of formData.value!.skus!) {
@@ -421,7 +434,7 @@ watch(
 const generateTableData = (propertyList: any[]) => {
   // 构建数据结构
   const propertyValues = propertyList.map((item) =>
-    item.values.map((v) => ({
+    item.values.map((v: any) => ({
       propertyId: item.id,
       propertyName: item.name,
       valueId: v.id,
@@ -464,15 +477,14 @@ const generateTableData = (propertyList: any[]) => {
  */
 const validateData = (propertyList: any[]) => {
   const skuPropertyIds: number[] = []
-  formData.value!.skus!.forEach(
-    (sku) =>
-      sku.properties
-        ?.map((property) => property.propertyId)
-        ?.forEach((propertyId) => {
-          if (skuPropertyIds.indexOf(propertyId!) === -1) {
-            skuPropertyIds.push(propertyId!)
-          }
-        })
+  formData.value!.skus!.forEach((sku) =>
+    sku.properties
+      ?.map((property) => property.propertyId)
+      ?.forEach((propertyId) => {
+        if (skuPropertyIds.indexOf(propertyId!) === -1) {
+          skuPropertyIds.push(propertyId!)
+        }
+      })
   )
   const propertyIds = propertyList.map((item) => item.id)
   return skuPropertyIds.length === propertyIds.length
@@ -543,7 +555,7 @@ watch(
       return
     }
     // 添加新属性没有属性值也不做处理
-    if (propertyList.some((item) => item.values!.length === 0)) {
+    if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
       return
     }
     // 生成 table 数据，即 sku 列表
diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index 28962f47..ffe7397d 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/src/views/mall/product/spu/form/ProductAttributes.vue
@@ -3,7 +3,7 @@
   <el-col v-for="(item, index) in attributeList" :key="index">
     <div>
       <el-text class="mx-1">属性名：</el-text>
-      <el-tag class="mx-1" :closable="!isDetail" type="success" @close="handleCloseProperty(index)">
+      <el-tag :closable="!isDetail" class="mx-1" type="success" @close="handleCloseProperty(index)">
         {{ item.name }}
       </el-tag>
     </div>
@@ -12,8 +12,8 @@
       <el-tag
         v-for="(value, valueIndex) in item.values"
         :key="value.id"
-        class="mx-1"
         :closable="!isDetail"
+        class="mx-1"
         @close="handleCloseValue(index, valueIndex)"
       >
         {{ value.name }}
@@ -44,7 +44,6 @@
 <script lang="ts" setup>
 import { ElInput } from 'element-plus'
 import * as PropertyApi from '@/api/mall/product/property'
-import { PropertyVO } from '@/api/mall/product/property'
 import { PropertyAndValues } from '@/views/mall/product/spu/components'
 import { propTypes } from '@/utils/propTypes'
 
@@ -59,9 +58,9 @@ const inputVisible = computed(() => (index: number) => {
   if (attributeIndex.value === null) return false
   if (attributeIndex.value === index) return true
 })
-const inputRef = ref([]) //标签输入框Ref
+const inputRef = ref<any[]>([]) //标签输入框Ref
 /** 解决 ref 在 v-for 中的获取问题*/
-const setInputRef = (el) => {
+const setInputRef = (el: any) => {
   if (el === null || typeof el === 'undefined') return
   // 如果不存在 id 相同的元素才添加
   if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
@@ -81,7 +80,7 @@ watch(
   () => props.propertyList,
   (data) => {
     if (!data) return
-    attributeList.value = data
+    attributeList.value = data as any
   },
   {
     deep: true,
@@ -97,6 +96,7 @@ const handleCloseValue = (index: number, valueIndex: number) => {
 /** 删除属性*/
 const handleCloseProperty = (index: number) => {
   attributeList.value?.splice(index, 1)
+  emit('success', attributeList.value)
 }
 
 /** 显示输入框并获取焦点 */
diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue
index 0bd79723..9cc61924 100644
--- a/src/views/mall/product/spu/form/SkuForm.vue
+++ b/src/views/mall/product/spu/form/SkuForm.vue
@@ -1,18 +1,18 @@
 <!-- 商品发布 - 库存价格 -->
 <template>
-  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
+  <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
     <el-form-item label="分销类型" props="subCommissionType">
       <el-radio-group
         v-model="formData.subCommissionType"
-        @change="changeSubCommissionType"
         class="w-80"
+        @change="changeSubCommissionType"
       >
         <el-radio :label="false">默认设置</el-radio>
         <el-radio :label="true" class="radio">单独设置</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="商品规格" props="specType">
-      <el-radio-group v-model="formData.specType" @change="onChangeSpec" class="w-80">
+      <el-radio-group v-model="formData.specType" class="w-80" @change="onChangeSpec">
         <el-radio :label="false" class="radio">单规格</el-radio>
         <el-radio :label="true">多规格</el-radio>
       </el-radio-group>
@@ -29,22 +29,22 @@
     <el-form-item v-if="formData.specType" label="商品属性">
       <el-button class="mb-10px mr-15px" @click="attributesAddFormRef.open">添加属性</el-button>
       <ProductAttributes
+        :is-detail="isDetail"
         :property-list="propertyList"
         @success="generateSkus"
-        :is-detail="isDetail"
       />
     </el-form-item>
     <template v-if="formData.specType && propertyList.length > 0">
-      <el-form-item label="批量设置" v-if="!isDetail">
+      <el-form-item v-if="!isDetail" label="批量设置">
         <SkuList :is-batch="true" :prop-form-data="formData" :property-list="propertyList" />
       </el-form-item>
       <el-form-item label="规格列表">
         <SkuList
           ref="skuListRef"
+          :is-detail="isDetail"
           :prop-form-data="formData"
           :property-list="propertyList"
           :rule-config="ruleConfig"
-          :is-detail="isDetail"
         />
       </el-form-item>
     </template>
@@ -181,7 +181,7 @@ const onChangeSpec = () => {
 }
 
 /** 调用 SkuList generateTableData 方法*/
-const generateSkus = (propertyList) => {
+const generateSkus = (propertyList: any[]) => {
   skuListRef.value.generateTableData(propertyList)
 }
 </script>

From 848bc6061217352e2a6132303bb8c8decf94d4eb Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 8 Jul 2024 17:53:56 +0800
Subject: [PATCH 02/24] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91mall?=
 =?UTF-8?q?=20=E5=AE=A2=E6=9C=8D=E6=B6=88=E6=81=AF=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=EF=BC=8C=E6=9C=89=E6=96=B0=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=8F=90=E9=86=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuChatBox.vue | 122 ++++++++++++++++--
 .../kefu/components/KeFuConversationBox.vue   |  23 +---
 2 files changed, 110 insertions(+), 35 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index 872de7ab..ff577325 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -4,9 +4,16 @@
       <div class="kefu-title">{{ keFuConversation.userNickname }}</div>
     </el-header>
     <el-main class="kefu-content" style="overflow: visible">
-      <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)">
+      <div
+        v-show="loadingMore"
+        class="loadingMore flex justify-center items-center cursor-pointer"
+        @click="handleOldMessage"
+      >
+        加载更多
+      </div>
+      <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)" @scroll="handleScroll">
         <div ref="innerRef" class="w-[100%] pb-3px">
-          <div v-for="(item, index) in messageList" :key="item.id" class="w-[100%]">
+          <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
             <div class="flex justify-center items-center mb-20px">
               <!-- 日期 -->
               <div
@@ -58,6 +65,14 @@
           </div>
         </div>
       </el-scrollbar>
+      <div
+        v-show="showNewMessageTip"
+        class="newMessageTip flex items-center cursor-pointer"
+        @click="handleToNewMessage"
+      >
+        <span>有新消息</span>
+        <Icon class="ml-5px" icon="ep:bottom" />
+      </div>
     </el-main>
     <el-footer height="230px">
       <div class="h-[100%]">
@@ -101,23 +116,47 @@ const messageTool = useMessage()
 const message = ref('') // 消息
 const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
 const keFuConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
-// 获得消息 TODO puhui999:  先不考虑下拉加载历史消息
+const showNewMessageTip = ref(false) // 显示有新消息提示
+const queryParams = reactive({
+  pageNo: 1,
+  conversationId: 0
+})
+const total = ref(0) // 消息总条数
+// 获得消息
 const getMessageList = async (conversation: KeFuConversationRespVO) => {
   keFuConversation.value = conversation
-  const { list } = await KeFuMessageApi.getKeFuMessagePage({
-    pageNo: 1,
-    conversationId: conversation.id
-  })
-  messageList.value = list.reverse()
-  // TODO puhui999: 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
+  queryParams.conversationId = conversation.id
+  const messageTotal = messageList.value.length
+  if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) {
+    return
+  }
+  const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
+  total.value = res.total
+  for (const item of res.list) {
+    if (messageList.value.some((val) => val.id === item.id)) {
+      continue
+    }
+    messageList.value.push(item)
+  }
   await scrollToBottom()
 }
+const getMessageList0 = computed(() => {
+  messageList.value.sort((a: any, b: any) => a.createTime - b.createTime)
+  return messageList.value
+})
+
 // 刷新消息列表
-const refreshMessageList = () => {
+const refreshMessageList = async () => {
   if (!keFuConversation.value) {
     return
   }
-  getMessageList(keFuConversation.value)
+
+  queryParams.pageNo = 1
+  await getMessageList(keFuConversation.value)
+  if (loadHistory.value) {
+    // 有下角显示有新消息提示
+    showNewMessageTip.value = true
+  }
 }
 defineExpose({ getMessageList, refreshMessageList })
 // 是否显示聊天区域
@@ -140,7 +179,7 @@ const handleSendPicture = async (picUrl: string) => {
 const handleSendMessage = async () => {
   // 1. 校验消息是否为空
   if (isEmpty(unref(message.value))) {
-    messageTool.warning('请输入消息后再发送哦！')
+    messageTool.notifyWarning('请输入消息后再发送哦！')
     return
   }
   // 2. 组织发送消息
@@ -167,12 +206,41 @@ const innerRef = ref<HTMLDivElement>()
 const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
 // 滚动到底部
 const scrollToBottom = async () => {
-  // 1. 滚动到最新消息
+  // 1. 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
+  if (loadHistory.value) {
+    return
+  }
+  // 2.1 滚动到最新消息，关闭新消息提示
   await nextTick()
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
-  // 2. 消息已读
+  showNewMessageTip.value = false
+  // 2.2 消息已读
   await KeFuMessageApi.updateKeFuMessageReadStatus(keFuConversation.value.id)
 }
+// 查看新消息
+const handleToNewMessage = async () => {
+  loadHistory.value = false
+  await scrollToBottom()
+}
+
+const loadingMore = ref(false) // 滚动到顶部加载更多
+const loadHistory = ref(false) // 加载历史消息
+const handleScroll = async ({ scrollTop }) => {
+  const messageTotal = messageList.value.length
+  if (total.value > 0 && messageTotal > 0 && messageTotal === total.value) {
+    return
+  }
+  // 距顶 20 加载下一页数据
+  loadingMore.value = scrollTop < 20
+}
+const handleOldMessage = async () => {
+  loadHistory.value = true
+  // 加载消息列表
+  queryParams.pageNo += 1
+  await getMessageList(keFuConversation.value)
+  loadingMore.value = false
+  // TODO puhui999: 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
+}
 /**
  * 是否显示时间
  * @param {*} item - 数据
@@ -196,6 +264,32 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
   }
 
   &-content {
+    position: relative;
+
+    .loadingMore {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 50px;
+      background-color: #eee;
+      color: #666;
+      text-align: center;
+      line-height: 50px;
+      transform: translateY(-100%);
+      transition: transform 0.3s ease-in-out;
+    }
+
+    .newMessageTip {
+      position: absolute;
+      bottom: 35px;
+      right: 35px;
+      background-color: #fff;
+      padding: 10px;
+      border-radius: 30px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+    }
+
     .ss-row-left {
       justify-content: flex-start;
 
diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
index 947a7ad6..a9ec9444 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
@@ -74,7 +74,7 @@
 <script lang="ts" setup>
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { useEmoji } from './tools/emoji'
-import { formatDate, getNowDateTime } from '@/utils/formatTime'
+import { formatDate } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 
 defineOptions({ name: 'KeFuConversationBox' })
@@ -84,24 +84,6 @@ const activeConversationIndex = ref(-1) // 选中的会话
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const getConversationList = async () => {
   conversationList.value = await KeFuConversationApi.getConversationList()
-  // 测试数据
-  for (let i = 0; i < 5; i++) {
-    conversationList.value.push({
-      id: 1,
-      userId: 283,
-      userAvatar:
-        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKMezSxtOImrC9lbhwHiazYwck3xwrEcO7VJfG6WQo260whaeVNoByE5RreiaGsGfOMlIiaDhSaA991w/132',
-      userNickname: '辉辉鸭' + i,
-      lastMessageTime: getNowDateTime(),
-      lastMessageContent:
-        '[爱心][爱心]你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇',
-      lastMessageContentType: 1,
-      adminPinned: false,
-      userDeleted: false,
-      adminDeleted: false,
-      adminUnreadMessageCount: i
-    })
-  }
 }
 defineExpose({ getConversationList })
 const emits = defineEmits<{
@@ -157,8 +139,7 @@ const updateConversationPinned = async (adminPinned: boolean) => {
     id: selectedConversation.value.id,
     adminPinned
   })
-  // TODO puhui999: 快速操作两次提示只会提示一次看看怎么优雅解决
-  message.success(adminPinned ? '置顶成功' : '取消置顶成功')
+  message.notifySuccess(adminPinned ? '置顶成功' : '取消置顶成功')
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu()
   await getConversationList()

From 80d87b8e993b78cb5f15b32f11820cede71c2e6a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 8 Jul 2024 23:29:27 +0800
Subject: [PATCH 03/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2020%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ImageCard.vue}                            |  0
 .../ImageDetail.vue}                          |  6 +--
 .../ImageList.vue}                            | 19 +++----
 src/views/ai/image/index/index.vue            | 53 +++++++------------
 4 files changed, 33 insertions(+), 45 deletions(-)
 rename src/views/ai/image/index/{ImageTaskCard.vue => components/ImageCard.vue} (100%)
 rename src/views/ai/image/index/{ImageDetailDrawer.vue => components/ImageDetail.vue} (96%)
 rename src/views/ai/image/index/{ImageTask.vue => components/ImageList.vue} (95%)

diff --git a/src/views/ai/image/index/ImageTaskCard.vue b/src/views/ai/image/index/components/ImageCard.vue
similarity index 100%
rename from src/views/ai/image/index/ImageTaskCard.vue
rename to src/views/ai/image/index/components/ImageCard.vue
diff --git a/src/views/ai/image/index/ImageDetailDrawer.vue b/src/views/ai/image/index/components/ImageDetail.vue
similarity index 96%
rename from src/views/ai/image/index/ImageDetailDrawer.vue
rename to src/views/ai/image/index/components/ImageDetail.vue
index b3641ffb..73e58ba6 100644
--- a/src/views/ai/image/index/ImageDetailDrawer.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -13,8 +13,8 @@
       <!--        </div>-->
       <!--      </div>-->
       <div class="body">
-        <!-- TODO @fan: 要不，这里只展示图片？？？不用 ImageTaskCard -->
-        <ImageTaskCard :image-detail="imageDetail" />
+        <!-- TODO @fan: 要不，这里只展示图片？？？不用 ImageCard -->
+        <ImageCard :image-detail="imageDetail" />
       </div>
     </div>
     <!--  时间  -->
@@ -60,7 +60,7 @@
 
 <script setup lang="ts">
 import { ImageApi, ImageVO } from '@/api/ai/image'
-import ImageTaskCard from './ImageTaskCard.vue'
+import ImageCard from './ImageCard.vue'
 
 const showDrawer = ref<boolean>(false) // 是否显示
 const imageDetail = ref<ImageVO>({} as ImageVO) // 图片详细信息
diff --git a/src/views/ai/image/index/ImageTask.vue b/src/views/ai/image/index/components/ImageList.vue
similarity index 95%
rename from src/views/ai/image/index/ImageTask.vue
rename to src/views/ai/image/index/components/ImageList.vue
index b7746b50..3996d3a6 100644
--- a/src/views/ai/image/index/ImageTask.vue
+++ b/src/views/ai/image/index/components/ImageList.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card class="dr-task" body-class="task-card" shadow="never">
     <template #header>绘画任务</template>
+    <!-- 图片列表 -->
     <div class="task-image-list" ref="imageTaskRef">
-      <ImageTaskCard
+      <ImageCard
         v-for="image in imageList"
-        :key="image"
+        :key="image.id"
         :image-detail="image"
         @on-btn-click="handleImageBtnClick"
         @on-mj-btn-click="handleImageMjBtnClick"
@@ -20,8 +21,9 @@
       />
     </div>
   </el-card>
-  <!-- 图片 detail 抽屉 -->
-  <ImageDetailDrawer
+
+  <!-- 图片详情 -->
+  <ImageDetail
     :show="isShowImageDetail"
     :id="showImageDetailId"
     @handle-drawer-close="handleDrawerClose"
@@ -29,8 +31,8 @@
 </template>
 <script setup lang="ts">
 import { ImageApi, ImageVO, ImageMjActionVO, ImageMjButtonsVO } from '@/api/ai/image'
-import ImageDetailDrawer from './ImageDetailDrawer.vue'
-import ImageTaskCard from './ImageTaskCard.vue'
+import ImageDetail from './ImageDetail.vue'
+import ImageCard from './ImageCard.vue'
 import { ElLoading, LoadingOptionsResolved } from 'element-plus'
 import { AiImageStatusEnum } from '@/views/ai/utils/constants'
 import { downloadImage } from '@/utils/download'
@@ -181,6 +183,7 @@ onUnmounted(async () => {
 })
 </script>
 
+<!-- TODO fan：这 2 个 scss 可以合并么？ -->
 <style lang="scss">
 .task-card {
   margin: 0;
@@ -197,8 +200,7 @@ onUnmounted(async () => {
   align-content: flex-start;
   height: 100%;
   overflow: auto;
-  padding: 20px;
-  padding-bottom: 140px;
+  padding: 20px 20px 140px;
   box-sizing: border-box; /* 确保内边距不会增加高度 */
 
   > div {
@@ -224,7 +226,6 @@ onUnmounted(async () => {
   align-items: center;
 }
 </style>
-
 <style scoped lang="scss">
 .dr-task {
   width: 100%;
diff --git a/src/views/ai/image/index/index.vue b/src/views/ai/image/index/index.vue
index 843e80cc..ab164545 100644
--- a/src/views/ai/image/index/index.vue
+++ b/src/views/ai/image/index/index.vue
@@ -12,10 +12,7 @@
           @on-draw-start="handleDrawStart"
           @on-draw-complete="handleDrawComplete"
         />
-        <Midjourney
-          v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
-          ref="midjourneyRef"
-        />
+        <Midjourney v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY" ref="midjourneyRef" />
         <StableDiffusion
           v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
           ref="stableDiffusionRef"
@@ -24,22 +21,20 @@
       </div>
     </div>
     <div class="main">
-      <ImageTask ref="imageTaskRef" @on-regeneration="handleRegeneration" />
+      <ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-// TODO @fan：在整个挪到 /views/ai/image/index 目录。因为我想在 /views/ai/image/manager 做管理的功能，进行下区分！
 import Dall3 from './dall3/index.vue'
 import Midjourney from './midjourney/index.vue'
 import StableDiffusion from './stable-diffusion/index.vue'
-import ImageTask from './ImageTask.vue'
+import ImageList from './components/ImageList.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
-import {ImageVO} from "@/api/ai/image";
+import { ImageVO } from '@/api/ai/image'
 
-
-const imageTaskRef = ref<any>() // image task ref
+const imageListRef = ref<any>() // image 列表 ref
 const dall3Ref = ref<any>() // openai ref
 const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
@@ -61,35 +56,27 @@ const platformOptions = [
   }
 ]
 
-/**  绘画 - start  */
-const handleDrawStart = async (type) => {
-}
+/** 绘画 start  */
+const handleDrawStart = async (type) => {}
 
-/**  绘画 - complete  */
+/** 绘画 complete  */
 const handleDrawComplete = async (type) => {
-  await imageTaskRef.value.getImageList()
+  await imageListRef.value.getImageList()
 }
 
-/**  绘画 - 重新生成  */
-const handleRegeneration = async (imageDetail: ImageVO) => {
+/**  重新生成：将画图详情填充到对应平台  */
+const handleRegeneration = async (image: ImageVO) => {
   // 切换平台
-  selectPlatform.value = imageDetail.platform
-  console.log('切换平台', imageDetail.platform)
-  // 根据不同平台填充 imageDetail
-  if (imageDetail.platform === AiPlatformEnum.MIDJOURNEY) {
-    await nextTick(async () => {
-      midjourneyRef.value.settingValues(imageDetail)
-    })
-  } else if (imageDetail.platform === AiPlatformEnum.OPENAI) {
-    await nextTick(async () => {
-      dall3Ref.value.settingValues(imageDetail)
-    })
-  } else if (imageDetail.platform === AiPlatformEnum.STABLE_DIFFUSION) {
-    await nextTick(async () => {
-      stableDiffusionRef.value.settingValues(imageDetail)
-    })
+  selectPlatform.value = image.platform
+  // 根据不同平台填充 image
+  await nextTick()
+  if (image.platform === AiPlatformEnum.MIDJOURNEY) {
+    midjourneyRef.value.settingValues(image)
+  } else if (image.platform === AiPlatformEnum.OPENAI) {
+    dall3Ref.value.settingValues(image)
+  } else if (image.platform === AiPlatformEnum.STABLE_DIFFUSION) {
+    stableDiffusionRef.value.settingValues(image)
   }
-
 }
 </script>
 

From 82b53b9b030725e234ed541ae4ba76edfd0c080a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 00:00:53 +0800
Subject: [PATCH 04/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2030%=EF=BC=88ImageList?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ai/image/index.ts                     |  17 +-
 src/utils/download.ts                         |  37 ++--
 .../ai/image/index/components/ImageCard.vue   |  15 +-
 .../ai/image/index/components/ImageList.vue   | 159 +++++++++---------
 src/views/bpm/category/index.vue              |   1 -
 5 files changed, 110 insertions(+), 119 deletions(-)

diff --git a/src/api/ai/image/index.ts b/src/api/ai/image/index.ts
index 496fac53..b4818818 100644
--- a/src/api/ai/image/index.ts
+++ b/src/api/ai/image/index.ts
@@ -14,16 +14,11 @@ export interface ImageVO {
   errorMessage: string // 错误信息
   options: object // 配置 Map<string, string>
   taskId: number // 任务编号
-  buttons: ImageMjButtonsVO[] // mj 操作按钮
+  buttons: ImageMidjourneyButtonsVO[] // mj 操作按钮
   createTime: string // 创建时间
   finishTime: string // 完成时间
 }
 
-export interface ImagePageReqVO {
-  pageNo: number // 分页编号
-  pageSize: number // 分页大小
-}
-
 export interface ImageDrawReqVO {
   platform: string // 平台
   prompt: string // 提示词
@@ -43,22 +38,22 @@ export interface ImageMidjourneyImagineReqVO {
   version: string // 版本
 }
 
-export interface ImageMjActionVO {
+export interface ImageMidjourneyActionVO {
   id: number // 图片编号
   customId: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
 }
 
-export interface ImageMjButtonsVO {
+export interface ImageMidjourneyButtonsVO {
   customId: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
   emoji: string // 图标 emoji
   label: string // Make Variations 文本
   style: number // 样式: 2（Primary）、3（Green）
 }
 
-// AI API 密钥 API
+// AI 图片 API
 export const ImageApi = {
   // 获取【我的】绘图分页
-  getImagePageMy: async (params: ImagePageReqVO) => {
+  getImagePageMy: async (params: PageParam) => {
     return await request.get({ url: `/ai/image/my-page`, params })
   },
   // 获取【我的】绘图记录
@@ -85,7 +80,7 @@ export const ImageApi = {
     return await request.post({ url: `/ai/image/midjourney/imagine`, data })
   },
   // 【Midjourney】Action 操作（二次生成图片）
-  midjourneyAction: async (data: ImageMjActionVO) => {
+  midjourneyAction: async (data: ImageMidjourneyActionVO) => {
     return await request.post({ url: `/ai/image/midjourney/action`, data })
   },
 
diff --git a/src/utils/download.ts b/src/utils/download.ts
index 4e8b8c60..1d07484b 100644
--- a/src/utils/download.ts
+++ b/src/utils/download.ts
@@ -32,26 +32,25 @@ const download = {
   // 下载 Markdown 方法
   markdown: (data: Blob, fileName: string) => {
     download0(data, fileName, 'text/markdown')
+  },
+  // 下载图片（允许跨域）
+  image: (url: string) => {
+    const image = new Image()
+    image.setAttribute('crossOrigin', 'anonymous')
+    image.src = url
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.width
+      canvas.height = image.height
+      const ctx = canvas.getContext('2d') as CanvasDrawImage
+      ctx.drawImage(image, 0, 0, image.width, image.height)
+      const url = canvas.toDataURL('image/png')
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'image.png'
+      a.click()
+    }
   }
 }
 
 export default download
-
-/** 图片下载(通过浏览器图片下载)  */
-export const downloadImage = async (imageUrl) => {
-  const image = new Image()
-  image.setAttribute('crossOrigin', 'anonymous')
-  image.src = imageUrl
-  image.onload = () => {
-    const canvas = document.createElement('canvas')
-    canvas.width = image.width
-    canvas.height = image.height
-    const ctx = canvas.getContext('2d') as CanvasDrawImage
-    ctx.drawImage(image, 0, 0, image.width, image.height)
-    const url = canvas.toDataURL('image/png')
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'image.png'
-    a.click()
-  }
-}
diff --git a/src/views/ai/image/index/components/ImageCard.vue b/src/views/ai/image/index/components/ImageCard.vue
index 0fbcc3ec..8b23f001 100644
--- a/src/views/ai/image/index/components/ImageCard.vue
+++ b/src/views/ai/image/index/components/ImageCard.vue
@@ -30,12 +30,7 @@
           :icon="RefreshRight"
           @click="handleBtnClick('regeneration', imageDetail)"
         />
-        <el-button
-          class="btn"
-          text
-          :icon="Delete"
-          @click="handleBtnClick('delete', imageDetail)"
-        />
+        <el-button class="btn" text :icon="Delete" @click="handleBtnClick('delete', imageDetail)" />
         <el-button class="btn" text :icon="More" @click="handleBtnClick('more', imageDetail)" />
       </div>
     </div>
@@ -61,10 +56,10 @@
   </el-card>
 </template>
 <script setup lang="ts">
-import {Delete, Download, More, RefreshRight} from '@element-plus/icons-vue'
-import { ImageVO, ImageMjButtonsVO } from '@/api/ai/image'
+import { Delete, Download, More, RefreshRight } from '@element-plus/icons-vue'
+import { ImageVO, ImageMidjourneyButtonsVO } from '@/api/ai/image'
 import { PropType } from 'vue'
-import {ElLoading, LoadingOptionsResolved} from 'element-plus'
+import { ElLoading, LoadingOptionsResolved } from 'element-plus'
 import { AiImageStatusEnum } from '@/views/ai/utils/constants'
 
 const cardImageRef = ref<any>() // 卡片 image ref
@@ -98,7 +93,7 @@ const handleLoading = async (status: number) => {
 }
 
 /**  mj 按钮 click  */
-const handleMjBtnClick = async (button: ImageMjButtonsVO) => {
+const handleMjBtnClick = async (button: ImageMidjourneyButtonsVO) => {
   // 确认窗体
   await message.confirm(`确认操作 "${button.label} ${button.emoji}" ?`)
   emits('onMjBtnClick', button, props.imageDetail)
diff --git a/src/views/ai/image/index/components/ImageList.vue b/src/views/ai/image/index/components/ImageList.vue
index 3996d3a6..a2eca46d 100644
--- a/src/views/ai/image/index/components/ImageList.vue
+++ b/src/views/ai/image/index/components/ImageList.vue
@@ -2,22 +2,21 @@
   <el-card class="dr-task" body-class="task-card" shadow="never">
     <template #header>绘画任务</template>
     <!-- 图片列表 -->
-    <div class="task-image-list" ref="imageTaskRef">
+    <div class="task-image-list" ref="imageListRef">
       <ImageCard
         v-for="image in imageList"
         :key="image.id"
         :image-detail="image"
-        @on-btn-click="handleImageBtnClick"
-        @on-mj-btn-click="handleImageMjBtnClick"
+        @on-btn-click="handleImageButtonClick"
+        @on-mj-btn-click="handleImageMidjourneyButtonClick"
       />
     </div>
     <div class="task-image-pagination">
-      <el-pagination
-        background
-        layout="prev, pager, next"
-        :default-page-size="pageSize"
+      <Pagination
         :total="pageTotal"
-        @change="handlePageChange"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getImageList"
       />
     </div>
   </el-card>
@@ -26,62 +25,63 @@
   <ImageDetail
     :show="isShowImageDetail"
     :id="showImageDetailId"
-    @handle-drawer-close="handleDrawerClose"
+    @handle-drawer-close="handleDetailClose"
   />
 </template>
 <script setup lang="ts">
-import { ImageApi, ImageVO, ImageMjActionVO, ImageMjButtonsVO } from '@/api/ai/image'
+import {
+  ImageApi,
+  ImageVO,
+  ImageMidjourneyActionVO,
+  ImageMidjourneyButtonsVO
+} from '@/api/ai/image'
 import ImageDetail from './ImageDetail.vue'
 import ImageCard from './ImageCard.vue'
 import { ElLoading, LoadingOptionsResolved } from 'element-plus'
 import { AiImageStatusEnum } from '@/views/ai/utils/constants'
-import { downloadImage } from '@/utils/download'
+import download from '@/utils/download'
 
 const message = useMessage() // 消息弹窗
 
-const imageList = ref<ImageVO[]>([]) // image 列表
-const inProgressImageMap = ref<{}>({}) // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
-const imageListInterval = ref<any>() // image 列表定时器，刷新列表
-const isShowImageDetail = ref<boolean>(false) // 是否显示 task 详情
-const showImageDetailId = ref<number>(0) // 是否显示 task 详情
-const imageTaskRef = ref<any>() // ref
-const imageTaskLoadingInstance = ref<any>() // loading
-const imageTaskLoading = ref<boolean>(false) // loading
-const pageNo = ref<number>(1) // page no
-const pageSize = ref<number>(10) // page size
+// 图片分页相关的参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
 const pageTotal = ref<number>(0) // page size
+const imageList = ref<ImageVO[]>([]) // image 列表
+const imageListLoadingInstance = ref<any>() // image 列表是否正在加载中
+const imageListRef = ref<any>() // ref
+// 图片轮询相关的参数（正在生成中的）
+const inProgressImageMap = ref<{}>({}) // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
+const inProgressTimer = ref<any>() // 生成中的 image 定时器，轮询生成进展
+// 图片详情相关的参数
+const isShowImageDetail = ref<boolean>(false) // 图片详情是否展示
+const showImageDetailId = ref<number>(0) // 图片详情的图片编号
 
-/**  抽屉 - close  */
-const handleDrawerClose = async () => {
-  isShowImageDetail.value = false
-}
-
-/**  任务 - detail  */
-const handleDrawerOpen = async () => {
+/** 查看图片的详情  */
+const handleDetailOpen = async () => {
   isShowImageDetail.value = true
 }
 
-/**
- * 获取 - image 列表
- */
-const getImageList = async (apply: boolean = false) => {
-  imageTaskLoading.value = true
+/** 关闭图片的详情  */
+const handleDetailClose = async () => {
+  isShowImageDetail.value = false
+}
+
+/** 获得 image 图片列表 */
+const getImageList = async () => {
   try {
-    imageTaskLoadingInstance.value = ElLoading.service({
-      target: imageTaskRef.value,
+    // 1. 加载图片列表
+    imageListLoadingInstance.value = ElLoading.service({
+      target: imageListRef.value,
       text: '加载中...'
     } as LoadingOptionsResolved)
-    const { list, total } = await ImageApi.getImagePageMy({
-      pageNo: pageNo.value,
-      pageSize: pageSize.value
-    })
-    if (apply) {
-      imageList.value = [...imageList.value, ...list]
-    } else {
-      imageList.value = list
-    }
+    const { list, total } = await ImageApi.getImagePageMy(queryParams)
+    imageList.value = list
     pageTotal.value = total
-    // 需要 watch 的数据
+
+    // 2. 计算需要轮询的图片
     const newWatImages = {}
     imageList.value.forEach((item) => {
       if (item.status === AiImageStatusEnum.IN_PROGRESS) {
@@ -90,9 +90,10 @@ const getImageList = async (apply: boolean = false) => {
     })
     inProgressImageMap.value = newWatImages
   } finally {
-    if (imageTaskLoadingInstance.value) {
-      imageTaskLoadingInstance.value.close()
-      imageTaskLoadingInstance.value = null
+    // 关闭正在“加载中”的 Loading
+    if (imageListLoadingInstance.value) {
+      imageListLoadingInstance.value.close()
+      imageListLoadingInstance.value = null
     }
   }
 }
@@ -119,50 +120,52 @@ const refreshWatchImages = async () => {
   inProgressImageMap.value = newWatchImages
 }
 
-/**  图片 - btn click  */
-const handleImageBtnClick = async (type: string, imageDetail: ImageVO) => {
-  // 获取 image detail id
-  showImageDetailId.value = imageDetail.id
-  // 处理不用 btn
+/** 图片的点击事件 */
+const handleImageButtonClick = async (type: string, imageDetail: ImageVO) => {
+  // 详情
   if (type === 'more') {
-    await handleDrawerOpen()
-  } else if (type === 'delete') {
+    showImageDetailId.value = imageDetail.id
+    await handleDetailOpen()
+    return
+  }
+  // 删除
+  if (type === 'delete') {
     await message.confirm(`是否删除照片?`)
     await ImageApi.deleteImageMy(imageDetail.id)
     await getImageList()
     message.success('删除成功!')
-  } else if (type === 'download') {
-    await downloadImage(imageDetail.picUrl)
-  } else if (type === 'regeneration') {
-    // Midjourney 平台
-    console.log('regeneration', imageDetail.id)
+    return
+  }
+  // 下载
+  if (type === 'download') {
+    await download.image(imageDetail.picUrl)
+    return
+  }
+  // 重新生成
+  if (type === 'regeneration') {
     await emits('onRegeneration', imageDetail)
+    return
   }
 }
 
-/**  图片 - mj btn click  */
-const handleImageMjBtnClick = async (button: ImageMjButtonsVO, imageDetail: ImageVO) => {
-  // 1、构建 params 参数
+/** 处理 Midjourney 按钮点击事件  */
+const handleImageMidjourneyButtonClick = async (
+  button: ImageMidjourneyButtonsVO,
+  imageDetail: ImageVO
+) => {
+  // 1. 构建 params 参数
   const data = {
     id: imageDetail.id,
     customId: button.customId
-  } as ImageMjActionVO
-  // 2、发送 action
+  } as ImageMidjourneyActionVO
+  // 2. 发送 action
   await ImageApi.midjourneyAction(data)
-  // 3、刷新列表
+  // 3. 刷新列表
   await getImageList()
 }
 
-// page change
-const handlePageChange = async (page) => {
-  pageNo.value = page
-  await getImageList(false)
-}
+defineExpose({ getImageList }) // 暴露组件方法
 
-/** 暴露组件方法 */
-defineExpose({ getImageList })
-
-// emits
 const emits = defineEmits(['onRegeneration'])
 
 /** 组件挂在的时候 */
@@ -170,15 +173,15 @@ onMounted(async () => {
   // 获取 image 列表
   await getImageList()
   // 自动刷新 image 列表
-  imageListInterval.value = setInterval(async () => {
+  inProgressTimer.value = setInterval(async () => {
     await refreshWatchImages()
   }, 1000 * 3)
 })
 
 /** 组件取消挂在的时候 */
 onUnmounted(async () => {
-  if (imageListInterval.value) {
-    clearInterval(imageListInterval.value)
+  if (inProgressTimer.value) {
+    clearInterval(inProgressTimer.value)
   }
 })
 </script>
diff --git a/src/views/bpm/category/index.vue b/src/views/bpm/category/index.vue
index 46fa6cf1..085b3715 100644
--- a/src/views/bpm/category/index.vue
+++ b/src/views/bpm/category/index.vue
@@ -126,7 +126,6 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import CategoryForm from './CategoryForm.vue'
 

From 749e44081e39343021df65c091f55576924ddc9a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 08:39:37 +0800
Subject: [PATCH 05/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2040%=EF=BC=88ImageCard?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai/image/index/components/ImageCard.vue   | 95 ++++++++++---------
 .../ai/image/index/components/ImageDetail.vue |  2 -
 .../ai/image/index/components/ImageList.vue   |  2 +-
 3 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/src/views/ai/image/index/components/ImageCard.vue b/src/views/ai/image/index/components/ImageCard.vue
index 8b23f001..4ba78cac 100644
--- a/src/views/ai/image/index/components/ImageCard.vue
+++ b/src/views/ai/image/index/components/ImageCard.vue
@@ -2,53 +2,53 @@
   <el-card body-class="" class="image-card">
     <div class="image-operation">
       <div>
-        <el-button
-          type="primary"
-          text
-          bg
-          v-if="imageDetail?.status === AiImageStatusEnum.IN_PROGRESS"
-        >
+        <el-button type="primary" text bg v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
           生成中
         </el-button>
-        <el-button text bg v-else-if="imageDetail?.status === AiImageStatusEnum.SUCCESS">
+        <el-button text bg v-else-if="detail?.status === AiImageStatusEnum.SUCCESS">
           已完成
         </el-button>
-        <el-button type="danger" text bg v-else-if="imageDetail?.status === AiImageStatusEnum.FAIL">
+        <el-button type="danger" text bg v-else-if="detail?.status === AiImageStatusEnum.FAIL">
           异常
         </el-button>
       </div>
+      <!-- 操作区 -->
       <div>
         <el-button
           class="btn"
           text
           :icon="Download"
-          @click="handleBtnClick('download', imageDetail)"
+          @click="handleButtonClick('download', detail)"
         />
         <el-button
           class="btn"
           text
           :icon="RefreshRight"
-          @click="handleBtnClick('regeneration', imageDetail)"
+          @click="handleButtonClick('regeneration', detail)"
         />
-        <el-button class="btn" text :icon="Delete" @click="handleBtnClick('delete', imageDetail)" />
-        <el-button class="btn" text :icon="More" @click="handleBtnClick('more', imageDetail)" />
+        <el-button class="btn" text :icon="Delete" @click="handleButtonClick('delete', detail)" />
+        <el-button class="btn" text :icon="More" @click="handleButtonClick('more', detail)" />
       </div>
     </div>
     <div class="image-wrapper" ref="cardImageRef">
-      <!-- TODO @fan：要不加个点击，大图预览？ -->
-      <img class="image" :src="imageDetail?.picUrl" />
-      <div v-if="imageDetail?.status === AiImageStatusEnum.FAIL">
-        {{ imageDetail?.errorMessage }}
+      <el-image
+        class="image"
+        :src="detail?.picUrl"
+        :preview-src-list="[detail.picUrl]"
+        preview-teleported
+      />
+      <div v-if="detail?.status === AiImageStatusEnum.FAIL">
+        {{ detail?.errorMessage }}
       </div>
     </div>
-    <!-- TODO @fan：style 使用 unocss 替代下 -->
+    <!-- Midjourney 专属操作 -->
     <div class="image-mj-btns">
       <el-button
         size="small"
-        v-for="button in imageDetail?.buttons"
+        v-for="button in detail?.buttons"
         :key="button"
-        style="min-width: 40px; margin-left: 0; margin-right: 10px; margin-top: 5px"
-        @click="handleMjBtnClick(button)"
+        class="min-w-40px ml-0 mr-10px mt-5px"
+        @click="handleMidjourneyBtnClick(button)"
       >
         {{ button.label }}{{ button.emoji }}
       </el-button>
@@ -62,28 +62,47 @@ import { PropType } from 'vue'
 import { ElLoading, LoadingOptionsResolved } from 'element-plus'
 import { AiImageStatusEnum } from '@/views/ai/utils/constants'
 
-const cardImageRef = ref<any>() // 卡片 image ref
-const cardImageLoadingInstance = ref<any>() // 卡片 image ref
-const message = useMessage()
+const message = useMessage() // 消息
+
 const props = defineProps({
-  imageDetail: {
+  detail: {
     type: Object as PropType<ImageVO>,
     require: true
   }
 })
 
-/**  按钮 - 点击事件  */
-const handleBtnClick = async (type, imageDetail: ImageVO) => {
-  emits('onBtnClick', type, imageDetail)
+const cardImageRef = ref<any>() // 卡片 image ref
+const cardImageLoadingInstance = ref<any>() // 卡片 image ref
+
+/** 处理点击事件  */
+const handleButtonClick = async (type, detail: ImageVO) => {
+  emits('onBtnClick', type, detail)
 }
 
+/** 处理 Midjourney 按钮点击事件  */
+const handleMidjourneyBtnClick = async (button: ImageMidjourneyButtonsVO) => {
+  // 确认窗体
+  await message.confirm(`确认操作 "${button.label} ${button.emoji}" ?`)
+  emits('onMjBtnClick', button, props.detail)
+}
+
+const emits = defineEmits(['onBtnClick', 'onMjBtnClick']) // emits
+
+/** 监听详情 */
+const { detail } = toRefs(props)
+watch(detail, async (newVal, oldVal) => {
+  await handleLoading(newVal.status as string)
+})
+
+/** 处理加载状态 */
 const handleLoading = async (status: number) => {
-  // TODO @芋艿：这个搞成 Loading 组件，然后通过数据驱动，这样搞可以哇？
+  // 情况一：如果是生成中，则设置加载中的 loading
   if (status === AiImageStatusEnum.IN_PROGRESS) {
     cardImageLoadingInstance.value = ElLoading.service({
       target: cardImageRef.value,
       text: '生成中...'
     } as LoadingOptionsResolved)
+    // 情况二：如果已经生成结束，则移除 loading
   } else {
     if (cardImageLoadingInstance.value) {
       cardImageLoadingInstance.value.close()
@@ -92,25 +111,9 @@ const handleLoading = async (status: number) => {
   }
 }
 
-/**  mj 按钮 click  */
-const handleMjBtnClick = async (button: ImageMidjourneyButtonsVO) => {
-  // 确认窗体
-  await message.confirm(`确认操作 "${button.label} ${button.emoji}" ?`)
-  emits('onMjBtnClick', button, props.imageDetail)
-}
-
-// watch
-const { imageDetail } = toRefs(props)
-watch(imageDetail, async (newVal, oldVal) => {
-  await handleLoading(newVal.status as string)
-})
-
-// emits
-const emits = defineEmits(['onBtnClick', 'onMjBtnClick'])
-
-//
+/** 初始化 */
 onMounted(async () => {
-  await handleLoading(props.imageDetail.status as string)
+  await handleLoading(props.detail.status as string)
 })
 </script>
 
diff --git a/src/views/ai/image/index/components/ImageDetail.vue b/src/views/ai/image/index/components/ImageDetail.vue
index 73e58ba6..c4b90b6c 100644
--- a/src/views/ai/image/index/components/ImageDetail.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -107,8 +107,6 @@ watch(id, async (newVal, oldVal) => {
 })
 //
 const emits = defineEmits(['handleDrawerClose'])
-//
-onMounted(async () => {})
 </script>
 <style scoped lang="scss">
 .item {
diff --git a/src/views/ai/image/index/components/ImageList.vue b/src/views/ai/image/index/components/ImageList.vue
index a2eca46d..aed1580f 100644
--- a/src/views/ai/image/index/components/ImageList.vue
+++ b/src/views/ai/image/index/components/ImageList.vue
@@ -6,7 +6,7 @@
       <ImageCard
         v-for="image in imageList"
         :key="image.id"
-        :image-detail="image"
+        :detail="image"
         @on-btn-click="handleImageButtonClick"
         @on-mj-btn-click="handleImageMidjourneyButtonClick"
       />

From ac46a376381eb97b1e4be8d518d0733f1e1d3a12 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 09:13:10 +0800
Subject: [PATCH 06/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2050%=EF=BC=88ImageDetail.?=
 =?UTF-8?q?vue=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index/components/message/MessageList.vue  | 15 ++---
 src/views/ai/chat/index/index.vue             |  6 +-
 .../ai/image/index/components/ImageDetail.vue | 64 ++++++++-----------
 3 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/views/ai/chat/index/components/message/MessageList.vue b/src/views/ai/chat/index/components/message/MessageList.vue
index b48fc295..2cc84079 100644
--- a/src/views/ai/chat/index/components/message/MessageList.vue
+++ b/src/views/ai/chat/index/components/message/MessageList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="messageContainer" class="h-100% overflow-y relative">
+  <div ref="messageContainer" class="h-100% overflow-y-auto relative">
     <div class="chat-list" v-for="(item, index) in list" :key="index">
       <!-- 靠左 message：system、assistant 类型 -->
       <div class="left-message message-item" v-if="item.type !== 'user'">
@@ -101,13 +101,12 @@ const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']) // 定义
 
 /** 滚动到底部 */
 const scrollToBottom = async (isIgnore?: boolean) => {
-  // 注意要使用 nextTick 以免获取不到dom
-  await nextTick(() => {
-    if (isIgnore || !isScrolling.value) {
-      messageContainer.value.scrollTop =
-        messageContainer.value.scrollHeight - messageContainer.value.offsetHeight
-    }
-  })
+  // 注意要使用 nextTick 以免获取不到 dom
+  await nextTick()
+  if (isIgnore || !isScrolling.value) {
+    messageContainer.value.scrollTop =
+      messageContainer.value.scrollHeight - messageContainer.value.offsetHeight
+  }
 }
 
 function handleScroll() {
diff --git a/src/views/ai/chat/index/index.vue b/src/views/ai/chat/index/index.vue
index 0c53ebea..6b79f138 100644
--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -394,7 +394,6 @@ const doSendMessage = async (content: string) => {
   } as ChatMessageVO)
 }
 
-// TODO @fan：= = 不知道哪里被改动了。点击【发送】后，不会跳转到消息最底部了。。
 /** 真正执行【发送】消息操作 */
 const doSendMessageStream = async (userMessage: ChatMessageVO) => {
   // 创建 AbortController 实例，以便中止请求
@@ -421,9 +420,8 @@ const doSendMessageStream = async (userMessage: ChatMessageVO) => {
       createTime: new Date()
     } as ChatMessageVO)
     // 1.2 滚动到最下面
-    nextTick(async () => {
-      await scrollToBottom() // 底部
-    })
+    await nextTick()
+    await scrollToBottom() // 底部
     // 1.3 开始滚动
     textRoll()
 
diff --git a/src/views/ai/image/index/components/ImageDetail.vue b/src/views/ai/image/index/components/ImageDetail.vue
index c4b90b6c..1877f28e 100644
--- a/src/views/ai/image/index/components/ImageDetail.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -7,52 +7,49 @@
   >
     <!-- 图片 -->
     <div class="item">
-      <!--      <div class="header">-->
-      <!--        <div>图片</div>-->
-      <!--        <div>-->
-      <!--        </div>-->
-      <!--      </div>-->
       <div class="body">
-        <!-- TODO @fan: 要不，这里只展示图片？？？不用 ImageCard -->
-        <ImageCard :image-detail="imageDetail" />
+        <el-image
+          class="image"
+          :src="detail?.picUrl"
+          :preview-src-list="[detail.picUrl]"
+          preview-teleported
+        />
       </div>
     </div>
-    <!--  时间  -->
+    <!-- 时间 -->
     <div class="item">
       <div class="tip">时间</div>
       <div class="body">
-        <div>提交时间：{{ imageDetail.createTime }}</div>
-        <div>生成时间：{{ imageDetail.finishTime }}</div>
+        <div>提交时间：{{ detail.createTime }}</div>
+        <div>生成时间：{{ detail.finishTime }}</div>
       </div>
     </div>
-    <!--  模型  -->
+    <!-- 模型 -->
     <div class="item">
       <div class="tip">模型</div>
-      <div class="body">
-        {{ imageDetail.model }}({{ imageDetail.height }}x{{ imageDetail.width }})
-      </div>
+      <div class="body"> {{ detail.model }}({{ detail.height }}x{{ detail.width }}) </div>
     </div>
-    <!--  提示词  -->
+    <!-- 提示词 -->
     <div class="item">
       <div class="tip">提示词</div>
       <div class="body">
-        {{ imageDetail.prompt }}
+        {{ detail.prompt }}
       </div>
     </div>
-    <!--  地址  -->
+    <!-- 地址 -->
     <div class="item">
       <div class="tip">图片地址</div>
       <div class="body">
-        {{ imageDetail.picUrl }}
+        {{ detail.picUrl }}
       </div>
     </div>
     <!-- 风格 -->
-    <div class="item" v-if="imageDetail?.options?.style">
+    <div class="item" v-if="detail?.options?.style">
       <div class="tip">风格</div>
       <div class="body">
         <!-- TODO @fan：貌似需要把 imageStyleList 搞到 api/image/index.ts 枚举起来？ -->
         <!-- TODO @fan：这里的展示，可能需要按照平台做区分 -->
-        {{ imageDetail?.options?.style }}
+        {{ detail?.options?.style }}
       </div>
     </div>
   </el-drawer>
@@ -63,7 +60,7 @@ import { ImageApi, ImageVO } from '@/api/ai/image'
 import ImageCard from './ImageCard.vue'
 
 const showDrawer = ref<boolean>(false) // 是否显示
-const imageDetail = ref<ImageVO>({} as ImageVO) // 图片详细信息
+const detail = ref<ImageVO>({} as ImageVO) // 图片详细信息
 
 const props = defineProps({
   show: {
@@ -77,35 +74,30 @@ const props = defineProps({
   }
 })
 
-/**  抽屉 - close  */
+/** 关闭抽屉  */
 const handleDrawerClose = async () => {
   emits('handleDrawerClose')
 }
 
-/**  获取 - 图片 detail  */
-const getImageDetail = async (id) => {
-  // 获取图片详细
-  imageDetail.value = await ImageApi.getImageMy(id)
-}
-
-/**  任务 - detail  */
-const handleTaskDetail = async () => {
-  showDrawer.value = true
-}
-
-// watch show
+/** 监听 drawer 是否打开 */
 const { show } = toRefs(props)
 watch(show, async (newValue, oldValue) => {
   showDrawer.value = newValue as boolean
 })
-// watch id
+
+/**  获取图片详情  */
+const getImageDetail = async (id: number) => {
+  detail.value = await ImageApi.getImageMy(id)
+}
+
+/** 监听 id 变化，加载最新图片详情 */
 const { id } = toRefs(props)
 watch(id, async (newVal, oldVal) => {
   if (newVal) {
     await getImageDetail(newVal)
   }
 })
-//
+
 const emits = defineEmits(['handleDrawerClose'])
 </script>
 <style scoped lang="scss">

From 61bf6fb85b65ed2680a04b30bfd860e186fb350f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 13:55:07 +0800
Subject: [PATCH 07/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2060%=EF=BC=88StableDiffus?=
 =?UTF-8?q?ion.vue=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ai/image/index.ts                     |   6 +-
 .../ai/image/index/components/ImageDetail.vue |  82 +++-
 .../components/stableDiffusion/index.vue      | 271 +++++++++++
 src/views/ai/image/index/index.vue            |   6 +-
 .../ai/image/index/stable-diffusion/index.vue | 437 ------------------
 src/views/ai/utils/constants.ts               | 170 +++++++
 src/views/ai/utils/utils.ts                   |   2 +-
 7 files changed, 523 insertions(+), 451 deletions(-)
 create mode 100644 src/views/ai/image/index/components/stableDiffusion/index.vue
 delete mode 100644 src/views/ai/image/index/stable-diffusion/index.vue

diff --git a/src/api/ai/image/index.ts b/src/api/ai/image/index.ts
index b4818818..43ddc7ec 100644
--- a/src/api/ai/image/index.ts
+++ b/src/api/ai/image/index.ts
@@ -12,11 +12,11 @@ export interface ImageVO {
   publicStatus: boolean // 公开状态
   picUrl: string // 任务地址
   errorMessage: string // 错误信息
-  options: object // 配置 Map<string, string>
+  options: any // 配置 Map<string, string>
   taskId: number // 任务编号
   buttons: ImageMidjourneyButtonsVO[] // mj 操作按钮
-  createTime: string // 创建时间
-  finishTime: string // 完成时间
+  createTime: Date // 创建时间
+  finishTime: Date // 完成时间
 }
 
 export interface ImageDrawReqVO {
diff --git a/src/views/ai/image/index/components/ImageDetail.vue b/src/views/ai/image/index/components/ImageDetail.vue
index 1877f28e..32838b3d 100644
--- a/src/views/ai/image/index/components/ImageDetail.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -20,8 +20,8 @@
     <div class="item">
       <div class="tip">时间</div>
       <div class="body">
-        <div>提交时间：{{ detail.createTime }}</div>
-        <div>生成时间：{{ detail.finishTime }}</div>
+        <div>提交时间：{{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
+        <div>生成时间：{{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
       </div>
     </div>
     <!-- 模型 -->
@@ -43,13 +43,73 @@
         {{ detail.picUrl }}
       </div>
     </div>
-    <!-- 风格 -->
-    <div class="item" v-if="detail?.options?.style">
+    <!-- StableDiffusion 专属区域 -->
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.sampler"
+    >
+      <div class="tip">采样方法</div>
+      <div class="body">
+        {{
+          StableDiffusionSamplers.find(
+            (item: ImageModelVO) => item.key === detail?.options?.sampler
+          )?.name
+        }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="
+        detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.clipGuidancePreset
+      "
+    >
+      <div class="tip">CLIP</div>
+      <div class="body">
+        {{
+          StableDiffusionClipGuidancePresets.find(
+            (item: ImageModelVO) => item.key === detail?.options?.clipGuidancePreset
+          )?.name
+        }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.stylePreset"
+    >
       <div class="tip">风格</div>
       <div class="body">
-        <!-- TODO @fan：貌似需要把 imageStyleList 搞到 api/image/index.ts 枚举起来？ -->
-        <!-- TODO @fan：这里的展示，可能需要按照平台做区分 -->
-        {{ detail?.options?.style }}
+        {{
+          StableDiffusionStylePresets.find(
+            (item: ImageModelVO) => item.key === detail?.options?.stylePreset
+          )?.name
+        }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.steps"
+    >
+      <div class="tip">迭代步数</div>
+      <div class="body">
+        {{ detail?.options?.steps }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.scale"
+    >
+      <div class="tip">引导系数</div>
+      <div class="body">
+        {{ detail?.options?.scale }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.seed"
+    >
+      <div class="tip">随机因子</div>
+      <div class="body">
+        {{ detail?.options?.seed }}
       </div>
     </div>
   </el-drawer>
@@ -58,6 +118,14 @@
 <script setup lang="ts">
 import { ImageApi, ImageVO } from '@/api/ai/image'
 import ImageCard from './ImageCard.vue'
+import {
+  AiPlatformEnum,
+  ImageModelVO,
+  StableDiffusionClipGuidancePresets,
+  StableDiffusionSamplers,
+  StableDiffusionStylePresets
+} from '@/views/ai/utils/constants'
+import { formatTime } from '@/utils'
 
 const showDrawer = ref<boolean>(false) // 是否显示
 const detail = ref<ImageVO>({} as ImageVO) // 图片详细信息
diff --git a/src/views/ai/image/index/components/stableDiffusion/index.vue b/src/views/ai/image/index/components/stableDiffusion/index.vue
new file mode 100644
index 00000000..5c4d7de4
--- /dev/null
+++ b/src/views/ai/image/index/components/stableDiffusion/index.vue
@@ -0,0 +1,271 @@
+<!-- dall3 -->
+<template>
+  <div class="prompt">
+    <el-text tag="b">画面描述</el-text>
+    <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
+    <el-input
+      v-model="prompt"
+      maxlength="1024"
+      rows="5"
+      class="w-100% mt-15px"
+      input-style="border-radius: 7px;"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-word-limit
+      type="textarea"
+    />
+  </div>
+  <div class="hot-words">
+    <div>
+      <el-text tag="b">随机热词</el-text>
+    </div>
+    <el-space wrap class="word-list">
+      <el-button
+        round
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotEnglishWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </el-button>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">采样方法</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-select v-model="sampler" placeholder="Select" size="large" class="!w-350px">
+        <el-option
+          v-for="item in StableDiffusionSamplers"
+          :key="item.key"
+          :label="item.name"
+          :value="item.key"
+        />
+      </el-select>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">CLIP</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-select v-model="clipGuidancePreset" placeholder="Select" size="large" class="!w-350px">
+        <el-option
+          v-for="item in StableDiffusionClipGuidancePresets"
+          :key="item.key"
+          :label="item.name"
+          :value="item.key"
+        />
+      </el-select>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">风格</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-select v-model="stylePreset" placeholder="Select" size="large" class="!w-350px">
+        <el-option
+          v-for="item in StableDiffusionStylePresets"
+          :key="item.key"
+          :label="item.name"
+          :value="item.key"
+        />
+      </el-select>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">图片尺寸</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-input v-model="width" class="w-170px" placeholder="图片宽度" />
+      <el-input v-model="height" class="w-170px" placeholder="图片高度" />
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">迭代步数</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-input
+        v-model="steps"
+        type="number"
+        size="large"
+        class="!w-350px"
+        placeholder="Please input"
+      />
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">引导系数</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-input
+        v-model="scale"
+        type="number"
+        size="large"
+        class="!w-350px"
+        placeholder="Please input"
+      />
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">随机因子</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-input
+        v-model="seed"
+        type="number"
+        size="large"
+        class="!w-350px"
+        placeholder="Please input"
+      />
+    </el-space>
+  </div>
+  <div class="btns">
+    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
+import { hasChinese } from '@/views/ai/utils/utils'
+import {
+  ImageHotEnglishWords,
+  StableDiffusionClipGuidancePresets,
+  StableDiffusionSamplers,
+  StableDiffusionStylePresets
+} from '@/views/ai/utils/constants'
+
+const message = useMessage() // 消息弹窗
+
+// 定义属性
+const drawIn = ref<boolean>(false) // 生成中
+const selectHotWord = ref<string>('') // 选中的热词
+// 表单
+const prompt = ref<string>('') // 提示词
+const width = ref<number>(512) // 图片宽度
+const height = ref<number>(512) // 图片高度
+const sampler = ref<string>('DDIM') // 采样方法
+const steps = ref<number>(20) // 迭代步数
+const seed = ref<number>(42) // 控制生成图像的随机性
+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) => {
+  // 情况一：取消选中
+  if (selectHotWord.value == hotWord) {
+    selectHotWord.value = ''
+    return
+  }
+
+  // 情况二：选中
+  selectHotWord.value = hotWord // 选中
+  prompt.value = hotWord // 替换提示词
+}
+
+/** 图片生成 */
+const handleGenerateImage = async () => {
+  // 二次确认
+  if (hasChinese(prompt.value)) {
+    message.alert('暂不支持中文！')
+    return
+  }
+  await message.confirm(`确认生成内容?`)
+
+  try {
+    // 加载中
+    drawIn.value = true
+    // 回调
+    emits('onDrawStart', 'StableDiffusion')
+    // 发送请求
+    const form = {
+      platform: 'StableDiffusion',
+      model: 'stable-diffusion-v1-6',
+      prompt: prompt.value, // 提示词
+      width: width.value, // 图片宽度
+      height: height.value, // 图片高度
+      options: {
+        seed: seed.value, // 随机种子
+        steps: steps.value, // 图片生成步数
+        scale: scale.value, // 引导系数
+        sampler: sampler.value, // 采样算法
+        clipGuidancePreset: clipGuidancePreset.value, // 文本提示相匹配的图像 CLIP
+        stylePreset: stylePreset.value // 风格
+      }
+    } as ImageDrawReqVO
+    await ImageApi.drawImage(form)
+  } finally {
+    // 回调
+    emits('onDrawComplete', 'StableDiffusion')
+    // 加载结束
+    drawIn.value = false
+  }
+}
+
+/** 填充值 */
+const settingValues = async (detail: ImageVO) => {
+  prompt.value = detail.prompt
+  width.value = detail.width
+  height.value = detail.height
+  seed.value = detail.options?.seed
+  steps.value = detail.options?.steps
+  scale.value = detail.options?.scale
+  sampler.value = detail.options?.sampler
+  clipGuidancePreset.value = detail.options?.clipGuidancePreset
+  stylePreset.value = detail.options?.stylePreset
+}
+
+/** 暴露组件方法 */
+defineExpose({ settingValues })
+</script>
+<style scoped lang="scss">
+// 提示词
+.prompt {
+}
+
+// 热词
+.hot-words {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+
+  .word-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: start;
+    margin-top: 15px;
+
+    .btn {
+      margin: 0;
+    }
+  }
+}
+
+// 模型
+.group-item {
+  margin-top: 30px;
+
+  .group-item-body {
+    margin-top: 15px;
+    width: 100%;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+</style>
diff --git a/src/views/ai/image/index/index.vue b/src/views/ai/image/index/index.vue
index ab164545..70666bf8 100644
--- a/src/views/ai/image/index/index.vue
+++ b/src/views/ai/image/index/index.vue
@@ -27,12 +27,12 @@
 </template>
 
 <script setup lang="ts">
-import Dall3 from './dall3/index.vue'
-import Midjourney from './midjourney/index.vue'
-import StableDiffusion from './stable-diffusion/index.vue'
 import ImageList from './components/ImageList.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
 import { ImageVO } from '@/api/ai/image'
+import Dall3 from './dall3/index.vue'
+import Midjourney from './midjourney/index.vue'
+import StableDiffusion from './components/stableDiffusion/index.vue'
 
 const imageListRef = ref<any>() // image 列表 ref
 const dall3Ref = ref<any>() // openai ref
diff --git a/src/views/ai/image/index/stable-diffusion/index.vue b/src/views/ai/image/index/stable-diffusion/index.vue
deleted file mode 100644
index b700a132..00000000
--- a/src/views/ai/image/index/stable-diffusion/index.vue
+++ /dev/null
@@ -1,437 +0,0 @@
-<!-- dall3 -->
-<template>
-  <div class="prompt">
-    <el-text tag="b">画面描述</el-text>
-    <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
-    <!-- TODO @fan：style 看看能不能哟 unocss 替代 -->
-    <el-input
-      v-model="prompt"
-      maxlength="1024"
-      rows="5"
-      style="width: 100%; margin-top: 15px"
-      input-style="border-radius: 7px;"
-      placeholder="例如：童话里的小屋应该是什么样子？"
-      show-word-limit
-      type="textarea"
-    />
-  </div>
-  <div class="hot-words">
-    <div>
-      <el-text tag="b">随机热词</el-text>
-    </div>
-    <el-space wrap class="word-list">
-      <el-button
-        round
-        class="btn"
-        :type="selectHotWord === hotWord ? 'primary' : 'default'"
-        v-for="hotWord in hotWords"
-        :key="hotWord"
-        @click="handleHotWordClick(hotWord)"
-      >
-        {{ hotWord }}
-      </el-button>
-    </el-space>
-  </div>
-  <div class="group-item">
-    <div>
-      <el-text tag="b">采样方法</el-text>
-    </div>
-    <el-space wrap class="group-item-body">
-      <el-select v-model="selectSampler" placeholder="Select" size="large" style="width: 350px">
-        <el-option v-for="item in sampler" :key="item.key" :label="item.name" :value="item.key" />
-      </el-select>
-    </el-space>
-  </div>
-  <div class="group-item">
-    <div>
-      <el-text tag="b">CLIP</el-text>
-    </div>
-    <el-space wrap class="group-item-body">
-      <el-select
-        v-model="selectClipGuidancePreset"
-        placeholder="Select"
-        size="large"
-        style="width: 350px"
-      >
-        <el-option
-          v-for="item in clipGuidancePresets"
-          :key="item.key"
-          :label="item.name"
-          :value="item.key"
-        />
-      </el-select>
-    </el-space>
-  </div>
-  <div class="group-item">
-    <div>
-      <el-text tag="b">风格</el-text>
-    </div>
-    <el-space wrap class="group-item-body">
-      <el-select v-model="selectStylePreset" placeholder="Select" size="large" style="width: 350px">
-        <el-option
-          v-for="item in stylePresets"
-          :key="item.key"
-          :label="item.name"
-          :value="item.key"
-        />
-      </el-select>
-    </el-space>
-  </div>
-  <div class="group-item">
-    <div>
-      <el-text tag="b">图片尺寸</el-text>
-    </div>
-    <el-space wrap class="group-item-body">
-      <el-input v-model="imageWidth" style="width: 170px" placeholder="图片宽度" />
-      <el-input v-model="imageHeight" style="width: 170px" placeholder="图片高度" />
-    </el-space>
-  </div>
-  <div class="group-item">
-    <div>
-      <el-text tag="b">迭代步数</el-text>
-    </div>
-    <el-space wrap class="group-item-body">
-      <el-input
-        v-model="steps"
-        type="number"
-        size="large"
-        style="width: 350px"
-        placeholder="Please input"
-      />
-    </el-space>
-  </div>
-  <div class="group-item">
-    <div>
-      <el-text tag="b">引导系数</el-text>
-    </div>
-    <el-space wrap class="group-item-body">
-      <el-input
-        v-model="scale"
-        type="number"
-        size="large"
-        style="width: 350px"
-        placeholder="Please input"
-      />
-    </el-space>
-  </div>
-  <div class="group-item">
-    <div>
-      <el-text tag="b">随机因子</el-text>
-    </div>
-    <el-space wrap class="group-item-body">
-      <el-input
-        v-model="seed"
-        type="number"
-        size="large"
-        style="width: 350px"
-        placeholder="Please input"
-      />
-    </el-space>
-  </div>
-  <div class="btns">
-    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
-      {{ drawIn ? '生成中' : '生成内容' }}
-    </el-button>
-  </div>
-</template>
-<script setup lang="ts">
-import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
-import { hasChinese } from '@/views/ai/utils/utils'
-
-// image 模型
-interface ImageModelVO {
-  key: string
-  name: string
-}
-
-// 定义属性
-const prompt = ref<string>('') // 提示词
-const drawIn = ref<boolean>(false) // 生成中
-const selectHotWord = ref<string>('') // 选中的热词
-const imageWidth = ref<number>(512) // 图片宽度
-const imageHeight = ref<number>(512) // 图片高度
-
-const hotWords = ref<string[]>([
-  '中国旗袍',
-  '古装美女',
-  '卡通头像',
-  '机甲战士',
-  '童话小屋',
-  '中国长城'
-]) // 热词
-// message
-const message = useMessage()
-
-// 采样方法
-const selectSampler = ref<string>('DDIM') // 模型
-// DDIM DDPM K_DPMPP_2M K_DPMPP_2S_ANCESTRAL K_DPM_2 K_DPM_2_ANCESTRAL K_EULER K_EULER_ANCESTRAL K_HEUN K_LMS
-const sampler = ref<ImageModelVO[]>([
-  {
-    key: 'DDIM',
-    name: 'DDIM'
-  },
-  {
-    key: 'DDPM',
-    name: 'DDPM'
-  },
-  {
-    key: 'K_DPMPP_2M',
-    name: 'K_DPMPP_2M'
-  },
-  {
-    key: 'K_DPMPP_2S_ANCESTRAL',
-    name: 'K_DPMPP_2S_ANCESTRAL'
-  },
-  {
-    key: 'K_DPM_2',
-    name: 'K_DPM_2'
-  },
-  {
-    key: 'K_DPM_2_ANCESTRAL',
-    name: 'K_DPM_2_ANCESTRAL'
-  },
-  {
-    key: 'K_EULER',
-    name: 'K_EULER'
-  },
-  {
-    key: 'K_EULER_ANCESTRAL',
-    name: 'K_EULER_ANCESTRAL'
-  },
-  {
-    key: 'K_HEUN',
-    name: 'K_HEUN'
-  },
-  {
-    key: 'K_LMS',
-    name: 'K_LMS'
-  }
-])
-
-// 风格
-// 3d-model analog-film anime cinematic comic-book digital-art enhance fantasy-art isometric
-// line-art low-poly modeling-compound neon-punk origami photographic pixel-art tile-texture
-const selectStylePreset = ref<string>('3d-model') // 模型
-const stylePresets = ref<ImageModelVO[]>([
-  {
-    key: '3d-model',
-    name: '3d-model'
-  },
-  {
-    key: 'analog-film',
-    name: 'analog-film'
-  },
-  {
-    key: 'anime',
-    name: 'anime'
-  },
-  {
-    key: 'cinematic',
-    name: 'cinematic'
-  },
-  {
-    key: 'comic-book',
-    name: 'comic-book'
-  },
-  {
-    key: 'digital-art',
-    name: 'digital-art'
-  },
-  {
-    key: 'enhance',
-    name: 'enhance'
-  },
-  {
-    key: 'fantasy-art',
-    name: 'fantasy-art'
-  },
-  {
-    key: 'isometric',
-    name: 'isometric'
-  },
-  {
-    key: 'line-art',
-    name: 'line-art'
-  },
-  {
-    key: 'low-poly',
-    name: 'low-poly'
-  },
-  {
-    key: 'modeling-compound',
-    name: 'modeling-compound'
-  },
-  // neon-punk origami photographic pixel-art tile-texture
-  {
-    key: 'neon-punk',
-    name: 'neon-punk'
-  },
-  {
-    key: 'origami',
-    name: 'origami'
-  },
-  {
-    key: 'photographic',
-    name: 'photographic'
-  },
-  {
-    key: 'pixel-art',
-    name: 'pixel-art'
-  },
-  {
-    key: 'tile-texture',
-    name: 'tile-texture'
-  }
-])
-
-// 文本提示相匹配的图像(clip_guidance_preset) 简称 CLIP
-// https://platform.stability.ai/docs/api-reference#tag/SDXL-and-SD1.6/operation/textToImage
-// FAST_BLUE FAST_GREEN NONE SIMPLE SLOW SLOWER SLOWEST
-const selectClipGuidancePreset = ref<string>('NONE') // 模型
-const clipGuidancePresets = ref<ImageModelVO[]>([
-  {
-    key: 'NONE',
-    name: 'NONE'
-  },
-  {
-    key: 'FAST_BLUE',
-    name: 'FAST_BLUE'
-  },
-  {
-    key: 'FAST_GREEN',
-    name: 'FAST_GREEN'
-  },
-  {
-    key: 'SIMPLE',
-    name: 'SIMPLE'
-  },
-  {
-    key: 'SLOW',
-    name: 'SLOW'
-  },
-  {
-    key: 'SLOWER',
-    name: 'SLOWER'
-  },
-  {
-    key: 'SLOWEST',
-    name: 'SLOWEST'
-  }
-])
-
-const steps = ref<number>(20) // 迭代步数
-const seed = ref<number>(42) // 控制生成图像的随机性
-const scale = ref<number>(7.5) // 引导系数
-
-// 定义 Props
-const props = defineProps({})
-// 定义 emits
-const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
-
-/** 热词 - click  */
-const handleHotWordClick = async (hotWord: string) => {
-  // 取消选中
-  if (selectHotWord.value == hotWord) {
-    selectHotWord.value = ''
-    return
-  }
-  // 选中
-  selectHotWord.value = hotWord
-  // 替换提示词
-  prompt.value = hotWord
-}
-
-/**  图片生产  */
-const handleGenerateImage = async () => {
-  // 二次确认
-  await message.confirm(`确认生成内容?`)
-  if (await hasChinese(prompt.value)) {
-    message.alert('暂不支持中文！')
-    return
-  }
-  try {
-    // 加载中
-    drawIn.value = true
-    // 回调
-    emits('onDrawStart', 'StableDiffusion')
-    // 发送请求
-    const form = {
-      platform: 'StableDiffusion',
-      model: 'stable-diffusion-v1-6',
-      prompt: prompt.value, // 提示词
-      width: imageWidth.value, // 图片宽度
-      height: imageHeight.value, // 图片高度
-      options: {
-        seed: seed.value, // 随机种子
-        steps: steps.value, // 图片生成步数
-        scale: scale.value, // 引导系数
-        sampler: selectSampler.value, // 采样算法
-        clipGuidancePreset: selectClipGuidancePreset.value, // 文本提示相匹配的图像 CLIP
-        stylePreset: selectStylePreset.value // 风格
-      }
-    } as ImageDrawReqVO
-    await ImageApi.drawImage(form)
-  } finally {
-    // 回调
-    emits('onDrawComplete', 'StableDiffusion')
-    // 加载结束
-    drawIn.value = false
-  }
-}
-
-/** 填充值 */
-const settingValues = async (imageDetail: ImageVO) => {
-  prompt.value = imageDetail.prompt
-  imageWidth.value = imageDetail.width
-  imageHeight.value = imageDetail.height
-  seed.value = imageDetail.options?.seed
-  steps.value = imageDetail.options?.steps
-  scale.value = imageDetail.options?.scale
-  selectSampler.value = imageDetail.options?.sampler
-  selectClipGuidancePreset.value = imageDetail.options?.clipGuidancePreset
-  selectStylePreset.value = imageDetail.options?.stylePreset
-}
-
-/** 暴露组件方法 */
-defineExpose({ settingValues })
-</script>
-<style scoped lang="scss">
-// 提示词
-.prompt {
-}
-
-// 热词
-.hot-words {
-  display: flex;
-  flex-direction: column;
-  margin-top: 30px;
-
-  .word-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
-    margin-top: 15px;
-
-    .btn {
-      margin: 0;
-    }
-  }
-}
-
-// 模型
-.group-item {
-  margin-top: 30px;
-
-  .group-item-body {
-    margin-top: 15px;
-    width: 100%;
-  }
-}
-
-.btns {
-  display: flex;
-  justify-content: center;
-  margin-top: 50px;
-}
-</style>
diff --git a/src/views/ai/utils/constants.ts b/src/views/ai/utils/constants.ts
index 337cfda3..8ceda73b 100644
--- a/src/views/ai/utils/constants.ts
+++ b/src/views/ai/utils/constants.ts
@@ -40,3 +40,173 @@ export const AiMusicStatusEnum = {
   SUCCESS: 20, // 已完成
   FAIL: 30 // 已失败
 }
+
+// ========== 【图片 UI】相关的枚举 ==========
+export const ImageHotWords = [
+  '中国旗袍',
+  '古装美女',
+  '卡通头像',
+  '机甲战士',
+  '童话小屋',
+  '中国长城'
+] // 图片热词
+
+export const ImageHotEnglishWords = [
+  'Chinese Cheongsam',
+  'Ancient Beauty',
+  'Cartoon Avatar',
+  'Mech Warrior',
+  'Fairy Tale Cottage',
+  'The Great Wall of China'
+] // 图片热词（英文）
+
+export interface ImageModelVO {
+  key: string
+  name: string
+}
+
+export const StableDiffusionSamplers = ref<ImageModelVO[]>([
+  {
+    key: 'DDIM',
+    name: 'DDIM'
+  },
+  {
+    key: 'DDPM',
+    name: 'DDPM'
+  },
+  {
+    key: 'K_DPMPP_2M',
+    name: 'K_DPMPP_2M'
+  },
+  {
+    key: 'K_DPMPP_2S_ANCESTRAL',
+    name: 'K_DPMPP_2S_ANCESTRAL'
+  },
+  {
+    key: 'K_DPM_2',
+    name: 'K_DPM_2'
+  },
+  {
+    key: 'K_DPM_2_ANCESTRAL',
+    name: 'K_DPM_2_ANCESTRAL'
+  },
+  {
+    key: 'K_EULER',
+    name: 'K_EULER'
+  },
+  {
+    key: 'K_EULER_ANCESTRAL',
+    name: 'K_EULER_ANCESTRAL'
+  },
+  {
+    key: 'K_HEUN',
+    name: 'K_HEUN'
+  },
+  {
+    key: 'K_LMS',
+    name: 'K_LMS'
+  }
+])
+
+export const StableDiffusionStylePresets = ref<ImageModelVO[]>([
+  {
+    key: '3d-model',
+    name: '3d-model'
+  },
+  {
+    key: 'analog-film',
+    name: 'analog-film'
+  },
+  {
+    key: 'anime',
+    name: 'anime'
+  },
+  {
+    key: 'cinematic',
+    name: 'cinematic'
+  },
+  {
+    key: 'comic-book',
+    name: 'comic-book'
+  },
+  {
+    key: 'digital-art',
+    name: 'digital-art'
+  },
+  {
+    key: 'enhance',
+    name: 'enhance'
+  },
+  {
+    key: 'fantasy-art',
+    name: 'fantasy-art'
+  },
+  {
+    key: 'isometric',
+    name: 'isometric'
+  },
+  {
+    key: 'line-art',
+    name: 'line-art'
+  },
+  {
+    key: 'low-poly',
+    name: 'low-poly'
+  },
+  {
+    key: 'modeling-compound',
+    name: 'modeling-compound'
+  },
+  // neon-punk origami photographic pixel-art tile-texture
+  {
+    key: 'neon-punk',
+    name: 'neon-punk'
+  },
+  {
+    key: 'origami',
+    name: 'origami'
+  },
+  {
+    key: 'photographic',
+    name: 'photographic'
+  },
+  {
+    key: 'pixel-art',
+    name: 'pixel-art'
+  },
+  {
+    key: 'tile-texture',
+    name: 'tile-texture'
+  }
+])
+
+export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
+  {
+    key: 'NONE',
+    name: 'NONE'
+  },
+  {
+    key: 'FAST_BLUE',
+    name: 'FAST_BLUE'
+  },
+  {
+    key: 'FAST_GREEN',
+    name: 'FAST_GREEN'
+  },
+  {
+    key: 'SIMPLE',
+    name: 'SIMPLE'
+  },
+  {
+    key: 'SLOW',
+    name: 'SLOW'
+  },
+  {
+    key: 'SLOWER',
+    name: 'SLOWER'
+  },
+  {
+    key: 'SLOWEST',
+    name: 'SLOWEST'
+  }
+])
diff --git a/src/views/ai/utils/utils.ts b/src/views/ai/utils/utils.ts
index fc4f8e6c..ab45ae18 100644
--- a/src/views/ai/utils/utils.ts
+++ b/src/views/ai/utils/utils.ts
@@ -8,6 +8,6 @@
  */
 
 /**  判断字符串是否包含中文  */
-export const hasChinese = async (str) => {
+export const hasChinese = (str: string) => {
   return /[\u4e00-\u9fa5]/.test(str)
 }

From 9dfb869a4bb7d57a41292cf34e241f90d2d494de Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 9 Jul 2024 16:14:51 +0800
Subject: [PATCH 08/24] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91mall?=
 =?UTF-8?q?=20=E5=AE=A2=E6=9C=8D=E5=95=86=E5=93=81=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuChatBox.vue |   3 +
 .../components/message/ProductMessageItem.vue | 101 ++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue

diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index ff577325..d7b9aeff 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -55,6 +55,8 @@
                 <TextMessageItem :message="item" />
                 <!-- 图片消息 -->
                 <ImageMessageItem :message="item" />
+                <!-- 商品消息 -->
+                <ProductMessageItem :message="item" />
               </div>
               <el-avatar
                 v-if="item.senderType === UserTypeEnum.ADMIN"
@@ -101,6 +103,7 @@ import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
 import PictureSelectUpload from './tools/PictureSelectUpload.vue'
 import TextMessageItem from './message/TextMessageItem.vue'
 import ImageMessageItem from './message/ImageMessageItem.vue'
+import ProductMessageItem from './message/ProductMessageItem.vue'
 import { Emoji } from './tools/emoji'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { isEmpty } from '@/utils/is'
diff --git a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
new file mode 100644
index 00000000..847369f8
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
@@ -0,0 +1,101 @@
+<template>
+  <!-- 图片消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
+    <div
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+    >
+      <div class="goods flex items-center">
+        <el-image
+          :src="getMessageContent.picUrl"
+          class="image"
+          fit="contain"
+          @click="imagePreview(getMessageContent.picUrl)"
+        />
+        <view class="flex-1">
+          <view class="title ss-line-2">
+            {{ getMessageContent.spuName }}
+          </view>
+          <view v-if="getMessageContent.introduction" class="subtitle ss-line-1">
+            {{ getMessageContent.introduction }}
+          </view>
+          <view class="price mt-8px"> ￥{{ getMessageContent.price }}</view>
+        </view>
+      </div>
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'ImageMessageItem' })
+const props = defineProps<{
+  message: KeFuMessageRespVO
+}>()
+const getMessageContent = computed(() => JSON.parse(props.message.content))
+/** 图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+</script>
+<style lang="scss" scoped>
+.goods {
+  padding: 20px;
+  border-radius: 12px;
+  background-color: #e1e1e1;
+
+  .ss-line {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+
+    &-1 {
+      -webkit-line-clamp: 1;
+    }
+
+    &-2 {
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  .image {
+    width: 116px;
+    height: 116px;
+    flex-shrink: 0;
+    margin-right: 20px;
+  }
+
+  .title {
+    height: 64px;
+    line-height: 32px;
+    font-size: 26px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .subtitle {
+    font-size: 24px;
+    font-weight: 400;
+    color: #999;
+  }
+
+  .price {
+    font-size: 26px;
+    font-weight: 500;
+    color: #ff3000;
+  }
+}
+</style>

From ebc995ac4c0269b06cd4c2fb693f2bc8357db749 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 9 Jul 2024 17:00:58 +0800
Subject: [PATCH 09/24] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91mall?=
 =?UTF-8?q?=20=E5=AE=A2=E6=9C=8D=E5=95=86=E5=93=81=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/message/OrderMessageItem.vue   |  36 ++++
 .../kefu/components/message/ProductItem.vue   | 194 ++++++++++++++++++
 .../components/message/ProductMessageItem.vue |  83 +-------
 3 files changed, 239 insertions(+), 74 deletions(-)
 create mode 100644 src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
 create mode 100644 src/views/mall/promotion/kefu/components/message/ProductItem.vue

diff --git a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
new file mode 100644
index 00000000..923d366b
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
@@ -0,0 +1,36 @@
+<template>
+  <!-- 图片消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
+    <div
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+    >
+      <ProductItem
+        :img="getMessageContent.picUrl"
+        :price="getMessageContent.price"
+        :skuText="getMessageContent.introduction"
+        :title="getMessageContent.spuName"
+        :titleWidth="400"
+        priceColor="#FF3000"
+      />
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import ProductItem from './ProductItem.vue'
+import { UserTypeEnum } from '@/utils/constants'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+
+defineOptions({ name: 'ImageMessageItem' })
+const props = defineProps<{
+  message: KeFuMessageRespVO
+}>()
+const getMessageContent = computed(() => JSON.parse(props.message.content))
+</script>
diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
new file mode 100644
index 00000000..6805f24f
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <div>
+      <slot name="top"></slot>
+    </div>
+    <div
+      :style="[{ borderRadius: radius + 'px', marginBottom: marginBottom + 'px' }]"
+      class="ss-order-card-warp flex items-stretch justify-between bg-white"
+    >
+      <div class="img-box mr-24px">
+        <el-image :src="img" class="order-img" fit="contain" @click="imagePrediv(img)" />
+      </div>
+      <div
+        :style="[{ width: titleWidth ? titleWidth + 'px' : '' }]"
+        class="box-right flex flex-col justify-between"
+      >
+        <div v-if="title" class="title-text ss-line-2">{{ title }}</div>
+        <div v-if="skuString" class="spec-text mt-8px mb-12px">{{ skuString }}</div>
+        <div class="groupon-box">
+          <slot name="groupon"></slot>
+        </div>
+        <div class="flex">
+          <div class="flex items-center">
+            <div
+              v-if="price && Number(price) > 0"
+              :style="[{ color: priceColor }]"
+              class="price-text flex items-center"
+            >
+              ￥{{ fenToYuan(price) }}
+            </div>
+            <div v-if="num" class="total-text flex items-center">x {{ num }}</div>
+            <slot name="priceSuffix"></slot>
+          </div>
+        </div>
+        <div class="tool-box">
+          <slot name="tool"></slot>
+        </div>
+        <div>
+          <slot name="rightBottom"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { createImageViewer } from '@/components/ImageViewer'
+import { fenToYuan } from '@/utils'
+
+defineOptions({ name: 'ProductItem' })
+const props = defineProps({
+  img: {
+    type: String,
+    default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  titleWidth: {
+    type: Number,
+    default: 0
+  },
+  skuText: {
+    type: [String, Array],
+    default: ''
+  },
+  price: {
+    type: [String, Number],
+    default: ''
+  },
+  priceColor: {
+    type: [String],
+    default: ''
+  },
+  num: {
+    type: [String, Number],
+    default: 0
+  },
+  score: {
+    type: [String, Number],
+    default: ''
+  },
+  radius: {
+    type: [String],
+    default: ''
+  },
+  marginBottom: {
+    type: [String],
+    default: ''
+  }
+})
+const skuString = computed(() => {
+  if (!props.skuText) {
+    return ''
+  }
+  if (typeof props.skuText === 'object') {
+    return props.skuText.join(',')
+  }
+  return props.skuText
+})
+/** 图预览 */
+const imagePrediv = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.score-img {
+  width: 36px;
+  height: 36px;
+  margin: 0 4px;
+}
+
+.ss-order-card-warp {
+  padding: 20px;
+  background-color: #e2e2e2;
+
+  .img-box {
+    width: 164px;
+    height: 164px;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .order-img {
+      width: 164px;
+      height: 164px;
+    }
+  }
+
+  .box-right {
+    flex: 1;
+    // width: 500px;
+    // height: 164px;
+    position: relative;
+
+    .tool-box {
+      position: absolute;
+      right: 0px;
+      bottom: -10px;
+    }
+  }
+
+  .title-text {
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 40px;
+  }
+
+  .spec-text {
+    font-size: 24px;
+    font-weight: 400;
+    color: #999999;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .price-text {
+    font-size: 24px;
+    font-weight: 500;
+    font-family: OPPOSANS;
+  }
+
+  .total-text {
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #999999;
+    margin-left: 8px;
+  }
+}
+
+.ss-line {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+
+  &-1 {
+    -webkit-line-clamp: 1;
+  }
+
+  &-2 {
+    -webkit-line-clamp: 2;
+  }
+}
+</style>
diff --git a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
index 847369f8..923d366b 100644
--- a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
@@ -10,92 +10,27 @@
             : ''
       ]"
     >
-      <div class="goods flex items-center">
-        <el-image
-          :src="getMessageContent.picUrl"
-          class="image"
-          fit="contain"
-          @click="imagePreview(getMessageContent.picUrl)"
-        />
-        <view class="flex-1">
-          <view class="title ss-line-2">
-            {{ getMessageContent.spuName }}
-          </view>
-          <view v-if="getMessageContent.introduction" class="subtitle ss-line-1">
-            {{ getMessageContent.introduction }}
-          </view>
-          <view class="price mt-8px"> ￥{{ getMessageContent.price }}</view>
-        </view>
-      </div>
+      <ProductItem
+        :img="getMessageContent.picUrl"
+        :price="getMessageContent.price"
+        :skuText="getMessageContent.introduction"
+        :title="getMessageContent.spuName"
+        :titleWidth="400"
+        priceColor="#FF3000"
+      />
     </div>
   </template>
 </template>
 
 <script lang="ts" setup>
 import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import ProductItem from './ProductItem.vue'
 import { UserTypeEnum } from '@/utils/constants'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
-import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'ImageMessageItem' })
 const props = defineProps<{
   message: KeFuMessageRespVO
 }>()
 const getMessageContent = computed(() => JSON.parse(props.message.content))
-/** 图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
 </script>
-<style lang="scss" scoped>
-.goods {
-  padding: 20px;
-  border-radius: 12px;
-  background-color: #e1e1e1;
-
-  .ss-line {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-
-    &-1 {
-      -webkit-line-clamp: 1;
-    }
-
-    &-2 {
-      -webkit-line-clamp: 2;
-    }
-  }
-
-  .image {
-    width: 116px;
-    height: 116px;
-    flex-shrink: 0;
-    margin-right: 20px;
-  }
-
-  .title {
-    height: 64px;
-    line-height: 32px;
-    font-size: 26px;
-    font-weight: 500;
-    color: #333;
-  }
-
-  .subtitle {
-    font-size: 24px;
-    font-weight: 400;
-    color: #999;
-  }
-
-  .price {
-    font-size: 26px;
-    font-weight: 500;
-    color: #ff3000;
-  }
-}
-</style>

From 2204876076ba3c98f5cd32130c6798619624c04d Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:05:07 +0800
Subject: [PATCH 10/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E4=B8=AD=E4=B8=8D=E5=85=81=E8=AE=B8=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2(=E8=87=AA=E5=8A=A8stop=20stream=20=E5=88=A0=E9=99=A4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/index/index.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/views/ai/chat/index/index.vue b/src/views/ai/chat/index/index.vue
index 6b79f138..37dadaec 100644
--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -180,11 +180,6 @@ const handleConversationClick = async (conversation: ChatConversationVO) => {
   // 更新选中的对话 id
   activeConversationId.value = conversation.id
   activeConversation.value = conversation
-  // 处理进行中的对话
-  // TODO @fan：这里，和上面的 “对话进行中，不允许切换” 是不是重叠了？
-  if (conversationInProgress.value) {
-    await stopStream()
-  }
   // 刷新 message 列表
   await getMessageList()
   // 滚动底部

From b4b901586959c36c2c1e413d07fda9d596f3c5e9 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:14:38 +0800
Subject: [PATCH 11/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E4=B8=AD=E4=B8=8D=E8=83=BD=E6=B8=85=E6=A5=9A?=
 =?UTF-8?q?=20chat=20=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/index/index.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/ai/chat/index/index.vue b/src/views/ai/chat/index/index.vue
index 37dadaec..c00617bc 100644
--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -198,7 +198,11 @@ const handlerConversationDelete = async (delConversation: ChatConversationVO) =>
 }
 /** 清空选中的对话 */
 const handleConversationClear = async () => {
-  // TODO @fan：需要加一个 对话进行中，不允许切换
+  // 对话进行中，不允许切换
+  if (conversationInProgress.value) {
+    message.alert('对话中，不允许切换!')
+    return false
+  }
   activeConversationId.value = null
   activeConversation.value = null
   activeMessageList.value = []

From cb68ef5fa7073d5fd510208130cacc1af4d2e97a Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:17:45 +0800
Subject: [PATCH 12/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91a?=
 =?UTF-8?q?i-layout=20100%=E9=AB=98=E5=AE=BD=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=AA=E8=83=BD=E9=80=9A=E8=BF=87=20position:=20absolute=20?=
 =?UTF-8?q?=E6=9D=A5=E7=89=B9=E6=AE=8A=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/index/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/ai/chat/index/index.vue b/src/views/ai/chat/index/index.vue
index c00617bc..9d9e98e1 100644
--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -570,7 +570,6 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .ai-layout {
-  // TODO @范 这里height不能 100% 先这样临时处理 TODO @fan：这个目前要搞处理么？
   position: absolute;
   flex: 1;
   top: 0;

From 93006504ce322fcc7b26f6658a5d994cb019942f Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 9 Jul 2024 17:24:33 +0800
Subject: [PATCH 13/24] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91mall?=
 =?UTF-8?q?=20=E5=AE=A2=E6=9C=8D=E8=AE=A2=E5=8D=95=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/kefu/components/KeFuChatBox.vue |   3 +
 .../components/message/OrderMessageItem.vue   | 166 ++++++++++++++++--
 .../kefu/components/message/ProductItem.vue   |   1 +
 .../components/message/ProductMessageItem.vue |   2 +-
 4 files changed, 161 insertions(+), 11 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index d7b9aeff..245791d0 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -57,6 +57,8 @@
                 <ImageMessageItem :message="item" />
                 <!-- 商品消息 -->
                 <ProductMessageItem :message="item" />
+                <!-- 订单消息 -->
+                <OrderMessageItem :message="item" />
               </div>
               <el-avatar
                 v-if="item.senderType === UserTypeEnum.ADMIN"
@@ -104,6 +106,7 @@ import PictureSelectUpload from './tools/PictureSelectUpload.vue'
 import TextMessageItem from './message/TextMessageItem.vue'
 import ImageMessageItem from './message/ImageMessageItem.vue'
 import ProductMessageItem from './message/ProductMessageItem.vue'
+import OrderMessageItem from './message/OrderMessageItem.vue'
 import { Emoji } from './tools/emoji'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { isEmpty } from '@/utils/is'
diff --git a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
index 923d366b..75320a9b 100644
--- a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 图片消息 -->
-  <template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
+  <template v-if="KeFuMessageContentTypeEnum.ORDER === message.contentType">
     <div
       :class="[
         message.senderType === UserTypeEnum.MEMBER
@@ -10,14 +10,33 @@
             : ''
       ]"
     >
-      <ProductItem
-        :img="getMessageContent.picUrl"
-        :price="getMessageContent.price"
-        :skuText="getMessageContent.introduction"
-        :title="getMessageContent.spuName"
-        :titleWidth="400"
-        priceColor="#FF3000"
-      />
+      <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
+        <div class="order-card-header flex items-center justify-between p-x-20px">
+          <div class="order-no">订单号：{{ getMessageContent.no }}</div>
+          <div :class="formatOrderColor(getMessageContent)" class="order-state font-26">
+            {{ formatOrderStatus(getMessageContent) }}
+          </div>
+        </div>
+        <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
+          <ProductItem
+            :img="item.picUrl"
+            :num="item.count"
+            :price="item.price"
+            :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+            :title="item.spuName"
+          />
+        </div>
+        <div class="pay-box mt-30px flex justify-end pr-20px">
+          <div class="flex items-center">
+            <div class="discounts-title pay-color"
+              >共 {{ getMessageContent.productCount }} 件商品,总金额:
+            </div>
+            <div class="discounts-money pay-color">
+              ￥{{ fenToYuan(getMessageContent.payPrice) }}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </template>
 </template>
@@ -27,10 +46,137 @@ import { KeFuMessageContentTypeEnum } from '../tools/constants'
 import ProductItem from './ProductItem.vue'
 import { UserTypeEnum } from '@/utils/constants'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { fenToYuan } from '@/utils'
 
-defineOptions({ name: 'ImageMessageItem' })
+defineOptions({ name: 'OrderMessageItem' })
 const props = defineProps<{
   message: KeFuMessageRespVO
 }>()
 const getMessageContent = computed(() => JSON.parse(props.message.content))
+
+/**
+ * 格式化订单状态的颜色
+ *
+ * @param order 订单
+ * @return {string} 颜色的 class 名称
+ */
+function formatOrderColor(order) {
+  if (order.status === 0) {
+    return 'info-color'
+  }
+  if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) {
+    return 'warning-color'
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'success-color'
+  }
+  return 'danger-color'
+}
+
+/**
+ * 格式化订单状态
+ *
+ * @param order 订单
+ */
+function formatOrderStatus(order) {
+  if (order.status === 0) {
+    return '待付款'
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货'
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销'
+  }
+  if (order.status === 20) {
+    return '待收货'
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价'
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成'
+  }
+  return '已关闭'
+}
 </script>
+
+<style lang="scss" scoped>
+.order-list-card-box {
+  border-radius: 10px;
+  padding: 10px;
+  background-color: #e2e2e2;
+
+  .order-card-header {
+    height: 80rpx;
+
+    .order-no {
+      font-size: 26rpx;
+      font-weight: 500;
+    }
+  }
+
+  .pay-box {
+    .discounts-title {
+      font-size: 24rpx;
+      line-height: normal;
+      color: #999999;
+    }
+
+    .discounts-money {
+      font-size: 24rpx;
+      line-height: normal;
+      color: #999;
+      font-family: OPPOSANS;
+    }
+
+    .pay-color {
+      color: #333;
+    }
+  }
+
+  .order-card-footer {
+    height: 100rpx;
+
+    .more-item-box {
+      padding: 20rpx;
+
+      .more-item {
+        height: 60rpx;
+
+        .title {
+          font-size: 26rpx;
+        }
+      }
+    }
+
+    .more-btn {
+      color: #999999;
+      font-size: 24rpx;
+    }
+
+    .content {
+      width: 154rpx;
+      color: #333333;
+      font-size: 26rpx;
+      font-weight: 500;
+    }
+  }
+}
+
+.warning-color {
+  color: #faad14;
+}
+
+.danger-color {
+  color: #ff3000;
+}
+
+.success-color {
+  color: #52c41a;
+}
+
+.info-color {
+  color: #999999;
+}
+</style>
diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
index 6805f24f..482ba6f8 100644
--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -116,6 +116,7 @@ const imagePrediv = (imgUrl: string) => {
 
 .ss-order-card-warp {
   padding: 20px;
+  border-radius: 10px;
   background-color: #e2e2e2;
 
   .img-box {
diff --git a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
index 923d366b..daf1b0bc 100644
--- a/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue
@@ -28,7 +28,7 @@ import ProductItem from './ProductItem.vue'
 import { UserTypeEnum } from '@/utils/constants'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 
-defineOptions({ name: 'ImageMessageItem' })
+defineOptions({ name: 'ProductMessageItem' })
 const props = defineProps<{
   message: KeFuMessageRespVO
 }>()

From 326fc3d03f3a6e55416f03bc774c0647d984a35f Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:41:58 +0800
Subject: [PATCH 14/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91e?=
 =?UTF-8?q?l-button=20icon=20=E6=94=B9=E4=B8=BA=20Icon=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20iconfy=20=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/ai/clear.svg           |  1 -
 src/views/ai/chat/index/index.vue | 11 +++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)
 delete mode 100644 src/assets/ai/clear.svg

diff --git a/src/assets/ai/clear.svg b/src/assets/ai/clear.svg
deleted file mode 100644
index e75a4e8a..00000000
--- a/src/assets/ai/clear.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716342375293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2604" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-0.3 1.5-0.4 3-0.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-0.1 4.4-0.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390z m468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z" p-id="2605" fill="#8a8a8a"></path></svg>
\ No newline at end of file
diff --git a/src/views/ai/chat/index/index.vue b/src/views/ai/chat/index/index.vue
index 9d9e98e1..724c67ce 100644
--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -22,11 +22,14 @@
             <Icon icon="ep:setting" class="ml-10px" />
           </el-button>
           <el-button size="small" class="btn" @click="handlerMessageClear">
-            <img src="@/assets/ai/clear.svg" class="h-14px" />
+            <Icon icon="heroicons-outline:archive-box-x-mark" color="#787878" />
+          </el-button>
+          <el-button size="small" class="btn">
+            <Icon icon="ep:download" color="#787878" />
+          </el-button>
+          <el-button size="small" class="btn" @click="handleGoTopMessage" >
+            <Icon icon="ep:top" color="#787878" />
           </el-button>
-          <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
-          <el-button size="small" :icon="Download" class="btn" />
-          <el-button size="small" :icon="Top" class="btn" @click="handleGoTopMessage" />
         </div>
       </el-header>
 

From 5734faa5fcddafe28406983b049e904751b83f90 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:42:30 +0800
Subject: [PATCH 15/24] =?UTF-8?q?=E3=80=90todo=E3=80=91keydown.shift.enter?=
 =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E4=B8=BA@=E8=8A=8B=E8=89=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/index/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ai/chat/index/index.vue b/src/views/ai/chat/index/index.vue
index 724c67ce..229b8959 100644
--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -365,7 +365,7 @@ const handlePromptInput = (event) => {
     isComposing.value = false
   }, 400)
 }
-// TODO @fan：是不是可以通过 @keydown.enter、@keydown.shift.enter 来实现，回车发送、shift+回车换行；主要看看，是不是可以简化 isComposing 相关的逻辑
+// TODO @芋艿：是不是可以通过 @keydown.enter、@keydown.shift.enter 来实现，回车发送、shift+回车换行；主要看看，是不是可以简化 isComposing 相关的逻辑
 const onCompositionstart = () => {
   isComposing.value = true
 }

From 4cfc78566742c2892d56347919af00a6e4235871 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:51:08 +0800
Subject: [PATCH 16/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91?=
 =?UTF-8?q?=E8=A7=92=E8=89=B2=E5=88=97=E8=A1=A8=20icon=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E4=B8=BA=20Icon=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/index/components/role/RoleList.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/views/ai/chat/index/components/role/RoleList.vue b/src/views/ai/chat/index/components/role/RoleList.vue
index 01b1d179..b148b220 100644
--- a/src/views/ai/chat/index/components/role/RoleList.vue
+++ b/src/views/ai/chat/index/components/role/RoleList.vue
@@ -10,15 +10,13 @@
                 <el-icon><More /></el-icon>
               </el-button>
             </span>
-            <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item :command="['edit', role]">
-                  <el-icon><EditPen /></el-icon>编辑
+                  <Icon icon="ep:edit" color="#787878" />编辑
                 </el-dropdown-item>
                 <el-dropdown-item :command="['delete', role]" style="color: red">
-                  <el-icon><Delete /></el-icon>
-                  <span>删除</span>
+                  <Icon icon="ep:delete" color="red" />删除
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -43,9 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { ChatRoleVO } from '@/api/ai/model/chatRole'
-import { PropType, ref } from 'vue'
-import { Delete, EditPen, 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
 

From dbacc0c3718ebe28f9a5d58725ee25854e38648b Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:52:43 +0800
Subject: [PATCH 17/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A7=92=E8=89=B2=20icon=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E4=B8=BA=20Icon=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/index/components/role/RoleRepository.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/views/ai/chat/index/components/role/RoleRepository.vue b/src/views/ai/chat/index/components/role/RoleRepository.vue
index 42f37494..a73dd8e3 100644
--- a/src/views/ai/chat/index/components/role/RoleRepository.vue
+++ b/src/views/ai/chat/index/components/role/RoleRepository.vue
@@ -23,10 +23,7 @@
           @click="handlerAddRole"
           class="ml-20px"
         >
-          <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
-          <el-icon>
-            <User />
-          </el-icon>
+          <Icon icon="ep:user" style="margin-right: 5px;" />
           添加角色
         </el-button>
       </div>
@@ -67,15 +64,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import {ref} from 'vue'
 import RoleHeader from './RoleHeader.vue'
 import RoleList from './RoleList.vue'
 import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
 import RoleCategoryList from './RoleCategoryList.vue'
-import { ChatRoleApi, ChatRolePageReqVO, ChatRoleVO } from '@/api/ai/model/chatRole'
-import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
-import { Search, User } from '@element-plus/icons-vue'
-import { TabsPaneContext } from 'element-plus'
+import {ChatRoleApi, ChatRolePageReqVO, ChatRoleVO} from '@/api/ai/model/chatRole'
+import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation'
+import {Search} from '@element-plus/icons-vue'
+import {TabsPaneContext} from 'element-plus'
 
 const router = useRouter() // 路由对象
 

From d6c016e3ea9bd81e01f759b87906fbc7aa033395 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 17:54:45 +0800
Subject: [PATCH 18/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91?=
 =?UTF-8?q?=E8=A7=92=E8=89=B2=E4=BB=93=E5=BA=93=EF=BC=8C=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=20element=20ui=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/chat/index/components/role/RoleRepository.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/views/ai/chat/index/components/role/RoleRepository.vue b/src/views/ai/chat/index/components/role/RoleRepository.vue
index a73dd8e3..246dcb4f 100644
--- a/src/views/ai/chat/index/components/role/RoleRepository.vue
+++ b/src/views/ai/chat/index/components/role/RoleRepository.vue
@@ -219,15 +219,14 @@ onMounted(async () => {
   // 获取 role 数据
   await getActiveTabsRole()
 })
-// TODO @fan：css 是不是可以融合到 scss 里面呀？
 </script>
-<style lang="css">
+<!-- 覆盖 element ui css -->
+<style lang="scss">
 .el-tabs__content {
   position: relative;
   height: 100%;
   overflow: hidden;
 }
-
 .el-tabs__nav-scroll {
   margin: 10px 20px;
 }

From 9e3f228a6125d7b5662790cacb1086f8f08c760e Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 19:55:03 +0800
Subject: [PATCH 19/24] =?UTF-8?q?=E3=80=90todo=E5=A4=87=E6=B3=A8=E3=80=91@?=
 =?UTF-8?q?=E8=8A=8B=E8=89=BF=EF=BC=8C=E8=BF=99=E4=B8=AA=E5=9C=B0=E6=96=B9?=
 =?UTF-8?q?=20unocss=20=E9=82=A3=E4=B8=AA=E5=9C=B0=E6=96=B9=E6=9C=89?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=EF=BC=8C=E5=8F=AF=E4=BB=A5=E5=85=88=E5=8F=82?=
 =?UTF-8?q?=E8=80=83=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/index/dall3/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ai/image/index/dall3/index.vue b/src/views/ai/image/index/dall3/index.vue
index 52f0dbed..44054f35 100644
--- a/src/views/ai/image/index/dall3/index.vue
+++ b/src/views/ai/image/index/dall3/index.vue
@@ -3,7 +3,7 @@
   <div class="prompt">
     <el-text tag="b">画面描述</el-text>
     <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
-    <!-- TODO @fan：style 看看能不能哟 unocss 替代 -->
+    <!-- TODO @fan：style 看看能不能哟 unocss 替代 @芋艿 尝试了下没效果，哪个地方有使用么，我看看  -->
     <el-input
       v-model="prompt"
       maxlength="1024"

From 75af4f07c00998dbf4cc060069393536483cecc1 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 9 Jul 2024 20:14:15 +0800
Subject: [PATCH 20/24] =?UTF-8?q?=E3=80=90=E8=A7=A3=E5=86=B3todo=E3=80=91i?=
 =?UTF-8?q?sUser=20=E4=BF=AE=E6=94=B9=E4=B8=BA=20computed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/model/chatRole/ChatRoleForm.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/views/ai/model/chatRole/ChatRoleForm.vue b/src/views/ai/model/chatRole/ChatRoleForm.vue
index c33d289d..7815fd85 100644
--- a/src/views/ai/model/chatRole/ChatRoleForm.vue
+++ b/src/views/ai/model/chatRole/ChatRoleForm.vue
@@ -13,7 +13,7 @@
       <el-form-item label="角色头像" prop="avatar">
         <UploadImg v-model="formData.avatar" height="60px" width="60px" />
       </el-form-item>
-      <el-form-item label="绑定模型" prop="modelId" v-if="!isUser(formType)">
+      <el-form-item label="绑定模型" prop="modelId" v-if="!isUser">
         <el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
           <el-option
             v-for="chatModel in chatModelList"
@@ -23,7 +23,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="角色类别" prop="category" v-if="!isUser(formType)">
+      <el-form-item label="角色类别" prop="category" v-if="!isUser">
         <el-input v-model="formData.category" placeholder="请输入角色类别" />
       </el-form-item>
       <el-form-item label="角色描述" prop="description">
@@ -32,7 +32,7 @@
       <el-form-item label="角色设定" prop="systemMessage">
         <el-input type="textarea" v-model="formData.systemMessage" placeholder="请输入角色设定" />
       </el-form-item>
-      <el-form-item label="是否公开" prop="publicStatus" v-if="!isUser(formType)">
+      <el-form-item label="是否公开" prop="publicStatus" v-if="!isUser">
         <el-radio-group v-model="formData.publicStatus">
           <el-radio
             v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
@@ -43,10 +43,10 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="角色排序" prop="sort" v-if="!isUser(formType)">
+      <el-form-item label="角色排序" prop="sort" v-if="!isUser">
         <el-input-number v-model="formData.sort" placeholder="请输入角色排序" class="!w-1/1" />
       </el-form-item>
-      <el-form-item label="开启状态" prop="status" v-if="!isUser(formType)">
+      <el-form-item label="开启状态" prop="status" v-if="!isUser">
         <el-radio-group v-model="formData.status">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -97,10 +97,9 @@ const formRef = ref() // 表单 Ref
 const chatModelList = ref([] as ChatModelVO[]) // 聊天模型列表
 
 /** 是否【我】自己创建，私有角色 */
-// TODO @fan：建议改成计算函数 computed
-const isUser = (type: string) => {
-  return type === 'my-create' || type === 'my-update'
-}
+const isUser = computed(() => {
+  return formType.value === 'my-create' || formType.value === 'my-update'
+})
 
 // TODO @fan：直接使用 formRules；只要隐藏掉的字段，它是不会校验的哈；
 const getFormRules = async (type: string) => {

From 7706e46bfa66d6906fa5d2c397fe68d5ce3e13a0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 20:41:22 +0800
Subject: [PATCH 21/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2065%=EF=BC=88Dall3.vue?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index/{ => components}/dall3/index.vue    | 135 ++++++++----------
 src/views/ai/image/index/index.vue            |   6 +-
 src/views/ai/utils/constants.ts               |  14 ++
 3 files changed, 75 insertions(+), 80 deletions(-)
 rename src/views/ai/image/index/{ => components}/dall3/index.vue (68%)

diff --git a/src/views/ai/image/index/dall3/index.vue b/src/views/ai/image/index/components/dall3/index.vue
similarity index 68%
rename from src/views/ai/image/index/dall3/index.vue
rename to src/views/ai/image/index/components/dall3/index.vue
index 44054f35..87005041 100644
--- a/src/views/ai/image/index/dall3/index.vue
+++ b/src/views/ai/image/index/components/dall3/index.vue
@@ -3,12 +3,11 @@
   <div class="prompt">
     <el-text tag="b">画面描述</el-text>
     <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
-    <!-- TODO @fan：style 看看能不能哟 unocss 替代 @芋艿 尝试了下没效果，哪个地方有使用么，我看看  -->
     <el-input
       v-model="prompt"
       maxlength="1024"
       rows="5"
-      style="width: 100%; margin-top: 15px;"
+      class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
       show-word-limit
@@ -20,12 +19,13 @@
       <el-text tag="b">随机热词</el-text>
     </div>
     <el-space wrap class="word-list">
-      <el-button round
-                 class="btn"
-                 :type="(selectHotWord === hotWord ? 'primary' : 'default')"
-                 v-for="hotWord in hotWords"
-                 :key="hotWord"
-                 @click="handleHotWordClick(hotWord)"
+      <el-button
+        round
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
       >
         {{ hotWord }}
       </el-button>
@@ -37,17 +37,12 @@
     </div>
     <el-space wrap class="model-list">
       <div
-        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
-        v-for="model in models"
+        :class="model === model.key ? 'modal-item selectModel' : 'modal-item'"
+        v-for="model in Dall3Models"
         :key="model.key"
-
       >
-        <el-image
-          :src="model.image"
-          fit="contain"
-          @click="handleModelClick(model)"
-        />
-        <div class="model-font">{{model.name}}</div>
+        <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
+        <div class="model-font">{{ model.name }}</div>
       </div>
     </el-space>
   </div>
@@ -57,16 +52,16 @@
     </div>
     <el-space wrap class="image-style-list">
       <div
-        :class="selectImageStyle === imageStyle.key ? 'image-style-item selectImageStyle' : 'image-style-item'"
+        :class="
+          selectImageStyle === imageStyle.key
+            ? 'image-style-item selectImageStyle'
+            : 'image-style-item'
+        "
         v-for="imageStyle in imageStyleList"
         :key="imageStyle.key"
       >
-        <el-image
-          :src="imageStyle.image"
-          fit="contain"
-          @click="handleStyleClick(imageStyle)"
-        />
-        <div class="style-font">{{imageStyle.name}}</div>
+        <el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
+        <div class="style-font">{{ imageStyle.name }}</div>
       </div>
     </el-space>
   </div>
@@ -75,11 +70,13 @@
       <el-text tag="b">画面比例</el-text>
     </div>
     <el-space wrap class="size-list">
-      <div class="size-item"
-           v-for="imageSize in imageSizeList"
-           :key="imageSize.key"
-           @click="handleSizeClick(imageSize)">
-        <div :class="selectImageSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
+      <div
+        class="size-item"
+        v-for="imageSize in imageSizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div :class="size === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
           <div :style="imageSize.style"></div>
         </div>
         <div class="size-font">{{ imageSize.name }}</div>
@@ -87,17 +84,16 @@
     </el-space>
   </div>
   <div class="btns">
-    <el-button type="primary"
-               size="large"
-               round
-               :loading="drawIn"
-               @click="handleGenerateImage">
-      {{drawIn ? '生成中' : '生成内容'}}
+    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
+      {{ drawIn ? '生成中' : '生成内容' }}
     </el-button>
   </div>
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDrawReqVO, ImageVO} from '@/api/ai/image';
+import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
+import { Dall3Models, ImageHotWords } from '@/views/ai/utils/constants'
+
+const message = useMessage() // 消息弹窗
 
 // image 模型
 interface ImageModelVO {
@@ -109,32 +105,18 @@ interface ImageModelVO {
 // image 大小
 interface ImageSizeVO {
   key: string
-  name: string,
-  style: string,
-  width: string,
-  height: string,
+  name: string
+  style: string
+  width: string
+  height: string
 }
 
 // 定义属性
-const prompt = ref<string>('')  // 提示词
-const drawIn = ref<boolean>(false)  // 生成中
+const prompt = ref<string>('') // 提示词
+const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
-const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城'])  // 热词
-const selectModel = ref<string>('dall-e-3') // 模型
-// message
-const message = useMessage()
-const models = ref<ImageModelVO[]>([
-  {
-    key: 'dall-e-3',
-    name: 'DALL·E 3',
-    image: `/src/assets/ai/dall2.jpg`,
-  },
-  {
-    key: 'dall-e-2',
-    name: 'DALL·E 2',
-    image: `/src/assets/ai/dall3.jpg`,
-  },
-])  // 模型
+const model = ref<string>('dall-e-3') // 模型
+const size = ref<string>('1024x1024') // 选中 size
 
 const selectImageStyle = ref<string>('vivid') // style 样式
 
@@ -142,37 +124,36 @@ const imageStyleList = ref<ImageModelVO[]>([
   {
     key: 'vivid',
     name: '清晰',
-    image: `/src/assets/ai/qingxi.jpg`,
+    image: `/src/assets/ai/qingxi.jpg`
   },
   {
     key: 'natural',
     name: '自然',
-    image: `/src/assets/ai/ziran.jpg`,
-  },
-])  // style
+    image: `/src/assets/ai/ziran.jpg`
+  }
+]) // style
 
-const selectImageSize = ref<string>('1024x1024') // 选中 size
 const imageSizeList = ref<ImageSizeVO[]>([
   {
     key: '1024x1024',
     name: '1:1',
     width: '1024',
     height: '1024',
-    style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
   },
   {
     key: '1024x1792',
     name: '3:5',
     width: '1024',
     height: '1792',
-    style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
   },
   {
     key: '1792x1024',
     name: '5:3',
     width: '1792',
     height: '1024',
-    style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
   }
 ]) // size
 
@@ -196,7 +177,7 @@ const handleHotWordClick = async (hotWord: string) => {
 
 /**  模型 - click  */
 const handleModelClick = async (model: ImageModelVO) => {
-  selectModel.value = model.key
+  model.value = model.key
 }
 
 /**  样式 - click  */
@@ -206,7 +187,7 @@ const handleStyleClick = async (imageStyle: ImageModelVO) => {
 
 /**  size - click  */
 const handleSizeClick = async (imageSize: ImageSizeVO) => {
-  selectImageSize.value = imageSize.key
+  size.value = imageSize.key
 }
 
 /**  图片生产  */
@@ -217,23 +198,23 @@ const handleGenerateImage = async () => {
     // 加载中
     drawIn.value = true
     // 回调
-    emits('onDrawStart', selectModel.value)
-    const imageSize = imageSizeList.value.find(item => item.key === selectImageSize.value) as ImageSizeVO
+    emits('onDrawStart', model.value)
+    const imageSize = imageSizeList.value.find((item) => item.key === size.value) as ImageSizeVO
     const form = {
       platform: 'OpenAI',
       prompt: prompt.value, // 提示词
-      model: selectModel.value, // 模型
+      model: model.value, // 模型
       width: imageSize.width, // size 不能为空
       height: imageSize.height, // size 不能为空
       options: {
-        style: selectImageStyle.value, // 图像生成的风格
+        style: selectImageStyle.value // 图像生成的风格
       }
     } as ImageDrawReqVO
     // 发送请求
     await ImageApi.drawImage(form)
   } finally {
     // 回调
-    emits('onDrawComplete', selectModel.value)
+    emits('onDrawComplete', model.value)
     // 加载结束
     drawIn.value = false
   }
@@ -242,17 +223,18 @@ const handleGenerateImage = async () => {
 /** 填充值 */
 const settingValues = async (imageDetail: ImageVO) => {
   prompt.value = imageDetail.prompt
-  selectModel.value = imageDetail.model
+  model.value = imageDetail.model
   //
   selectImageStyle.value = imageDetail.options?.style
   //
-  const imageSize = imageSizeList.value.find(item => item.key === `${imageDetail.width}x${imageDetail.height}`) as ImageSizeVO
+  const imageSize = imageSizeList.value.find(
+    (item) => item.key === `${imageDetail.width}x${imageDetail.height}`
+  ) as ImageSizeVO
   await handleSizeClick(imageSize)
 }
 
 /** 暴露组件方法 */
 defineExpose({ settingValues })
-
 </script>
 <style scoped lang="scss">
 // 提示词
@@ -309,7 +291,6 @@ defineExpose({ settingValues })
   }
 }
 
-
 // 样式 style
 .image-style {
   margin-top: 30px;
diff --git a/src/views/ai/image/index/index.vue b/src/views/ai/image/index/index.vue
index 70666bf8..f6e29684 100644
--- a/src/views/ai/image/index/index.vue
+++ b/src/views/ai/image/index/index.vue
@@ -30,17 +30,17 @@
 import ImageList from './components/ImageList.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
 import { ImageVO } from '@/api/ai/image'
-import Dall3 from './dall3/index.vue'
+import Dall3 from './components/dall3/index.vue'
 import Midjourney from './midjourney/index.vue'
 import StableDiffusion from './components/stableDiffusion/index.vue'
 
 const imageListRef = ref<any>() // image 列表 ref
-const dall3Ref = ref<any>() // openai ref
+const dall3Ref = ref<any>() // dall3(openai) ref
 const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
 
 // 定义属性
-const selectPlatform = ref('StableDiffusion')
+const selectPlatform = ref(AiPlatformEnum.OPENAI)
 const platformOptions = [
   {
     label: 'DALL3 绘画',
diff --git a/src/views/ai/utils/constants.ts b/src/views/ai/utils/constants.ts
index 8ceda73b..ca0e757a 100644
--- a/src/views/ai/utils/constants.ts
+++ b/src/views/ai/utils/constants.ts
@@ -63,6 +63,7 @@ export const ImageHotEnglishWords = [
 export interface ImageModelVO {
   key: string
   name: string
+  image?: string
 }
 
 export const StableDiffusionSamplers = ref<ImageModelVO[]>([
@@ -210,3 +211,16 @@ export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
     name: 'SLOWEST'
   }
 ])
+
+export const Dall3Models = ref<ImageModelVO[]>([
+  {
+    key: 'dall-e-3',
+    name: 'DALL·E 3',
+    image: `/src/assets/ai/dall2.jpg`
+  },
+  {
+    key: 'dall-e-2',
+    name: 'DALL·E 2',
+    image: `/src/assets/ai/dall3.jpg`
+  }
+])

From e881b9cefd56e5b6d6c12777c140418fc1c8d3fc Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 21:06:57 +0800
Subject: [PATCH 22/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2070%=EF=BC=88Dall3.vue?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai/image/index/components/ImageDetail.vue |   9 +-
 .../ai/image/index/components/dall3/index.vue | 136 ++++++------------
 .../components/stableDiffusion/index.vue      |   7 +-
 src/views/ai/utils/constants.ts               |  61 ++++++--
 4 files changed, 106 insertions(+), 107 deletions(-)

diff --git a/src/views/ai/image/index/components/ImageDetail.vue b/src/views/ai/image/index/components/ImageDetail.vue
index 32838b3d..57a550a6 100644
--- a/src/views/ai/image/index/components/ImageDetail.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -112,14 +112,21 @@
         {{ detail?.options?.seed }}
       </div>
     </div>
+    <!-- Dall3 专属区域 -->
+    <div class="item" v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style">
+      <div class="tip">风格选择</div>
+      <div class="body">
+        {{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
+      </div>
+    </div>
   </el-drawer>
 </template>
 
 <script setup lang="ts">
 import { ImageApi, ImageVO } from '@/api/ai/image'
-import ImageCard from './ImageCard.vue'
 import {
   AiPlatformEnum,
+  Dall3StyleList,
   ImageModelVO,
   StableDiffusionClipGuidancePresets,
   StableDiffusionSamplers,
diff --git a/src/views/ai/image/index/components/dall3/index.vue b/src/views/ai/image/index/components/dall3/index.vue
index 87005041..5c891ab9 100644
--- a/src/views/ai/image/index/components/dall3/index.vue
+++ b/src/views/ai/image/index/components/dall3/index.vue
@@ -37,7 +37,7 @@
     </div>
     <el-space wrap class="model-list">
       <div
-        :class="model === model.key ? 'modal-item selectModel' : 'modal-item'"
+        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
         v-for="model in Dall3Models"
         :key="model.key"
       >
@@ -52,12 +52,8 @@
     </div>
     <el-space wrap class="image-style-list">
       <div
-        :class="
-          selectImageStyle === imageStyle.key
-            ? 'image-style-item selectImageStyle'
-            : 'image-style-item'
-        "
-        v-for="imageStyle in imageStyleList"
+        :class="style === imageStyle.key ? 'image-style-item selectImageStyle' : 'image-style-item'"
+        v-for="imageStyle in Dall3StyleList"
         :key="imageStyle.key"
       >
         <el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
@@ -72,11 +68,13 @@
     <el-space wrap class="size-list">
       <div
         class="size-item"
-        v-for="imageSize in imageSizeList"
+        v-for="imageSize in Dall3SizeList"
         :key="imageSize.key"
         @click="handleSizeClick(imageSize)"
       >
-        <div :class="size === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
+        <div
+          :class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
+        >
           <div :style="imageSize.style"></div>
         </div>
         <div class="size-font">{{ imageSize.name }}</div>
@@ -91,103 +89,53 @@
 </template>
 <script setup lang="ts">
 import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
-import { Dall3Models, ImageHotWords } from '@/views/ai/utils/constants'
+import {
+  Dall3Models,
+  Dall3StyleList,
+  ImageHotWords,
+  Dall3SizeList,
+  ImageModelVO,
+  AiPlatformEnum
+} from '@/views/ai/utils/constants'
 
 const message = useMessage() // 消息弹窗
 
-// image 模型
-interface ImageModelVO {
-  key: string
-  name: string
-  image: string
-}
-
-// image 大小
-interface ImageSizeVO {
-  key: string
-  name: string
-  style: string
-  width: string
-  height: string
-}
-
 // 定义属性
 const prompt = ref<string>('') // 提示词
 const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
-const model = ref<string>('dall-e-3') // 模型
-const size = ref<string>('1024x1024') // 选中 size
+const selectModel = ref<string>('dall-e-3') // 模型
+const selectSize = ref<string>('1024x1024') // 选中 size
+const style = ref<string>('vivid') // style 样式
 
-const selectImageStyle = ref<string>('vivid') // style 样式
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
 
-const imageStyleList = ref<ImageModelVO[]>([
-  {
-    key: 'vivid',
-    name: '清晰',
-    image: `/src/assets/ai/qingxi.jpg`
-  },
-  {
-    key: 'natural',
-    name: '自然',
-    image: `/src/assets/ai/ziran.jpg`
-  }
-]) // style
-
-const imageSizeList = ref<ImageSizeVO[]>([
-  {
-    key: '1024x1024',
-    name: '1:1',
-    width: '1024',
-    height: '1024',
-    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
-  },
-  {
-    key: '1024x1792',
-    name: '3:5',
-    width: '1024',
-    height: '1792',
-    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
-  },
-  {
-    key: '1792x1024',
-    name: '5:3',
-    width: '1792',
-    height: '1024',
-    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
-  }
-]) // size
-
-// 定义 Props
-const props = defineProps({})
-// 定义 emits
-const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
-
-/** 热词 - click  */
+/** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
-  // 取消选中
+  // 情况一：取消选中
   if (selectHotWord.value == hotWord) {
     selectHotWord.value = ''
     return
   }
-  // 选中
+
+  // 情况二：选中
   selectHotWord.value = hotWord
-  // 替换提示词
   prompt.value = hotWord
 }
 
-/**  模型 - click  */
+/** 选择 model 模型 */
 const handleModelClick = async (model: ImageModelVO) => {
-  model.value = model.key
+  selectModel.value = model.key
 }
 
-/**  样式 - click  */
+/** 选择 style 样式  */
 const handleStyleClick = async (imageStyle: ImageModelVO) => {
-  selectImageStyle.value = imageStyle.key
+  style.value = imageStyle.key
 }
 
-/**  size - click  */
+/** 选择 size 大小  */
 const handleSizeClick = async (imageSize: ImageSizeVO) => {
-  size.value = imageSize.key
+  selectSize.value = imageSize.key
 }
 
 /**  图片生产  */
@@ -198,37 +146,35 @@ const handleGenerateImage = async () => {
     // 加载中
     drawIn.value = true
     // 回调
-    emits('onDrawStart', model.value)
-    const imageSize = imageSizeList.value.find((item) => item.key === size.value) as ImageSizeVO
+    emits('onDrawStart', AiPlatformEnum.OPENAI)
+    const imageSize = Dall3SizeList.find((item) => item.key === selectSize.value) as ImageSizeVO
     const form = {
-      platform: 'OpenAI',
+      platform: AiPlatformEnum.OPENAI,
       prompt: prompt.value, // 提示词
-      model: model.value, // 模型
+      model: selectModel.value, // 模型
       width: imageSize.width, // size 不能为空
       height: imageSize.height, // size 不能为空
       options: {
-        style: selectImageStyle.value // 图像生成的风格
+        style: style.value // 图像生成的风格
       }
     } as ImageDrawReqVO
     // 发送请求
     await ImageApi.drawImage(form)
   } finally {
     // 回调
-    emits('onDrawComplete', model.value)
+    emits('onDrawComplete', AiPlatformEnum.OPENAI)
     // 加载结束
     drawIn.value = false
   }
 }
 
 /** 填充值 */
-const settingValues = async (imageDetail: ImageVO) => {
-  prompt.value = imageDetail.prompt
-  model.value = imageDetail.model
-  //
-  selectImageStyle.value = imageDetail.options?.style
-  //
-  const imageSize = imageSizeList.value.find(
-    (item) => item.key === `${imageDetail.width}x${imageDetail.height}`
+const settingValues = async (detail: ImageVO) => {
+  prompt.value = detail.prompt
+  selectModel.value = detail.model
+  style.value = detail.options?.style
+  const imageSize = Dall3SizeList.find(
+    (item) => item.key === `${detail.width}x${detail.height}`
   ) as ImageSizeVO
   await handleSizeClick(imageSize)
 }
diff --git a/src/views/ai/image/index/components/stableDiffusion/index.vue b/src/views/ai/image/index/components/stableDiffusion/index.vue
index 5c4d7de4..169938f4 100644
--- a/src/views/ai/image/index/components/stableDiffusion/index.vue
+++ b/src/views/ai/image/index/components/stableDiffusion/index.vue
@@ -137,6 +137,7 @@
 import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
 import { hasChinese } from '@/views/ai/utils/utils'
 import {
+  AiPlatformEnum,
   ImageHotEnglishWords,
   StableDiffusionClipGuidancePresets,
   StableDiffusionSamplers,
@@ -187,10 +188,10 @@ const handleGenerateImage = async () => {
     // 加载中
     drawIn.value = true
     // 回调
-    emits('onDrawStart', 'StableDiffusion')
+    emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION)
     // 发送请求
     const form = {
-      platform: 'StableDiffusion',
+      platform: AiPlatformEnum.STABLE_DIFFUSION,
       model: 'stable-diffusion-v1-6',
       prompt: prompt.value, // 提示词
       width: width.value, // 图片宽度
@@ -207,7 +208,7 @@ const handleGenerateImage = async () => {
     await ImageApi.drawImage(form)
   } finally {
     // 回调
-    emits('onDrawComplete', 'StableDiffusion')
+    emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION)
     // 加载结束
     drawIn.value = false
   }
diff --git a/src/views/ai/utils/constants.ts b/src/views/ai/utils/constants.ts
index ca0e757a..aaae2ce8 100644
--- a/src/views/ai/utils/constants.ts
+++ b/src/views/ai/utils/constants.ts
@@ -66,7 +66,7 @@ export interface ImageModelVO {
   image?: string
 }
 
-export const StableDiffusionSamplers = ref<ImageModelVO[]>([
+export const StableDiffusionSamplers: ImageModelVO[] = [
   {
     key: 'DDIM',
     name: 'DDIM'
@@ -107,9 +107,9 @@ export const StableDiffusionSamplers = ref<ImageModelVO[]>([
     key: 'K_LMS',
     name: 'K_LMS'
   }
-])
+]
 
-export const StableDiffusionStylePresets = ref<ImageModelVO[]>([
+export const StableDiffusionStylePresets: ImageModelVO[] = [
   {
     key: '3d-model',
     name: '3d-model'
@@ -179,9 +179,9 @@ export const StableDiffusionStylePresets = ref<ImageModelVO[]>([
     key: 'tile-texture',
     name: 'tile-texture'
   }
-])
+]
 
-export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
+export const StableDiffusionClipGuidancePresets: ImageModelVO[] = [
   {
     key: 'NONE',
     name: 'NONE'
@@ -210,9 +210,9 @@ export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
     key: 'SLOWEST',
     name: 'SLOWEST'
   }
-])
+]
 
-export const Dall3Models = ref<ImageModelVO[]>([
+export const Dall3Models: ImageModelVO[] = [
   {
     key: 'dall-e-3',
     name: 'DALL·E 3',
@@ -223,4 +223,49 @@ export const Dall3Models = ref<ImageModelVO[]>([
     name: 'DALL·E 2',
     image: `/src/assets/ai/dall3.jpg`
   }
-])
+]
+
+export const Dall3StyleList: ImageModelVO[] = [
+  {
+    key: 'vivid',
+    name: '清晰',
+    image: `/src/assets/ai/qingxi.jpg`
+  },
+  {
+    key: 'natural',
+    name: '自然',
+    image: `/src/assets/ai/ziran.jpg`
+  }
+]
+
+interface ImageSizeVO {
+  key: string
+  name: string
+  style: string
+  width: string
+  height: string
+}
+
+export const Dall3SizeList: ImageSizeVO[] = [
+  {
+    key: '1024x1024',
+    name: '1:1',
+    width: '1024',
+    height: '1024',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '1024x1792',
+    name: '3:5',
+    width: '1024',
+    height: '1792',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
+  },
+  {
+    key: '1792x1024',
+    name: '5:3',
+    width: '1792',
+    height: '1024',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
+  }
+]

From ba8681e3c7aa4f0bf8dbc7bc6018995755af5f5e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 21:37:46 +0800
Subject: [PATCH 23/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A2=B3=E7=90=86=2080%=EF=BC=88Dall3.vue?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai/image/index/components/ImageDetail.vue |  19 ++
 .../{ => components}/midjourney/index.vue     | 261 ++++++------------
 src/views/ai/image/index/index.vue            |  10 +-
 src/views/ai/utils/constants.ts               |  78 +++++-
 4 files changed, 191 insertions(+), 177 deletions(-)
 rename src/views/ai/image/index/{ => components}/midjourney/index.vue (52%)

diff --git a/src/views/ai/image/index/components/ImageDetail.vue b/src/views/ai/image/index/components/ImageDetail.vue
index 57a550a6..ad15aa8d 100644
--- a/src/views/ai/image/index/components/ImageDetail.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -119,6 +119,25 @@
         {{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
       </div>
     </div>
+    <!-- Midjourney 专属区域 -->
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version"
+    >
+      <div class="tip">模型版本</div>
+      <div class="body">
+        {{ detail?.options?.version }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.referImageUrl"
+    >
+      <div class="tip">参考图</div>
+      <div class="body">
+        <el-image :src="detail.options.referImageUrl" />
+      </div>
+    </div>
   </el-drawer>
 </template>
 
diff --git a/src/views/ai/image/index/midjourney/index.vue b/src/views/ai/image/index/components/midjourney/index.vue
similarity index 52%
rename from src/views/ai/image/index/midjourney/index.vue
rename to src/views/ai/image/index/components/midjourney/index.vue
index 5207bd22..1d7fda18 100644
--- a/src/views/ai/image/index/midjourney/index.vue
+++ b/src/views/ai/image/index/components/midjourney/index.vue
@@ -7,7 +7,7 @@
       v-model="prompt"
       maxlength="1024"
       rows="5"
-      style="width: 100%; margin-top: 15px;"
+      class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
       show-word-limit
@@ -19,12 +19,13 @@
       <el-text tag="b">随机热词</el-text>
     </div>
     <el-space wrap class="word-list">
-      <el-button round
-                 class="btn"
-                 :type="(selectHotWord === hotWord ? 'primary' : 'default')"
-                 v-for="hotWord in hotWords"
-                 :key="hotWord"
-                 @click="handleHotWordClick(hotWord)"
+      <el-button
+        round
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
       >
         {{ hotWord }}
       </el-button>
@@ -35,17 +36,36 @@
       <el-text tag="b">尺寸</el-text>
     </div>
     <el-space wrap class="size-list">
-      <div class="size-item"
-           v-for="imageSize in imageSizeList"
-           :key="imageSize.key"
-           @click="handleSizeClick(imageSize)">
-        <div :class="selectImageSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
+      <div
+        class="size-item"
+        v-for="imageSize in MidjourneySizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          :class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
+        >
           <div :style="imageSize.style"></div>
         </div>
         <div class="size-font">{{ imageSize.key }}</div>
       </div>
     </el-space>
   </div>
+  <div class="model">
+    <div>
+      <el-text tag="b">模型</el-text>
+    </div>
+    <el-space wrap class="model-list">
+      <div
+        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
+        v-for="model in MidjourneyModels"
+        :key="model.key"
+      >
+        <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
+        <div class="model-font">{{ model.name }}</div>
+      </div>
+    </el-space>
+  </div>
   <div class="version">
     <div>
       <el-text tag="b">版本</el-text>
@@ -53,11 +73,9 @@
     <el-space wrap class="version-list">
       <el-select
         v-model="selectVersion"
-        class="version-select"
+        class="version-select !w-350px"
         clearable
         placeholder="请选择版本"
-        style="width: 350px"
-        @change="handleChangeVersion"
       >
         <el-option
           v-for="item in versionList"
@@ -68,228 +86,130 @@
       </el-select>
     </el-space>
   </div>
-  <div class="model">
-    <div>
-      <el-text tag="b">模型</el-text>
-    </div>
-    <el-space wrap class="model-list">
-      <div
-        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
-        v-for="model in models"
-        :key="model.key"
-
-      >
-        <el-image
-          :src="model.image"
-          fit="contain"
-          @click="handleModelClick(model)"
-        />
-        <div class="model-font">{{model.name}}</div>
-      </div>
-    </el-space>
-  </div>
   <div class="model">
     <div>
       <el-text tag="b">参考图</el-text>
     </div>
     <el-space wrap class="model-list">
-      <UploadImg v-model="referImage" height="80px" width="80px" />
+      <UploadImg v-model="referImageUrl" height="120px" width="120px" />
     </el-space>
   </div>
   <div class="btns">
-    <!--    <el-button size="large" round>重置内容</el-button>-->
-    <el-button type="primary" size="large" round @click="handleGenerateImage">生成内容</el-button>
+    <el-button type="primary" size="large" round @click="handleGenerateImage">
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </el-button>
   </div>
 </template>
 <script setup lang="ts">
+import { ImageApi, ImageMidjourneyImagineReqVO, ImageVO } from '@/api/ai/image'
+import {
+  AiPlatformEnum,
+  ImageHotWords,
+  ImageSizeVO,
+  ImageModelVO,
+  MidjourneyModels,
+  MidjourneySizeList,
+  MidjourneyVersions,
+  NijiVersionList
+} from '@/views/ai/utils/constants'
 
-// image 模型
-import {ImageApi, ImageMidjourneyImagineReqVO, ImageVO} from "@/api/ai/image";
-// message
-const message = useMessage()
-// 定义 emits
-const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
-
-interface ImageModelVO {
-  key: string
-  name: string
-  image: string
-}
-
-// image 大小
-interface ImageSizeVO {
-  key: string
-  style: string,
-  width: string,
-  height: string,
-}
+const message = useMessage() // 消息弹窗
 
 // 定义属性
-const prompt = ref<string>('')  // 提示词
-const referImage = ref<any>()  // 参考图
+const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
-const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城'])  // 热词
-const selectModel = ref<string>('midjourney') // 选中的热词
-const models = ref<ImageModelVO[]>([
-  {
-    key: 'midjourney',
-    name: 'MJ',
-    image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png',
-  },
-  {
-    key: 'niji',
-    name: 'NIJI',
-    image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png',
-  },
-])  // 模型
-
-const selectImageSize = ref<string>('1:1') // 选中 size
-const imageSizeList = ref<ImageSizeVO[]>([
-  {
-    key: '1:1',
-    width: "1",
-    height: "1",
-    style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
-  },
-  {
-    key: '3:4',
-    width: "3",
-    height: "4",
-    style: 'width: 30px; height: 40px;background-color: #dcdcdc;',
-  },
-  {
-    key: '4:3',
-    width: "4",
-    height: "3",
-    style: 'width: 40px; height: 30px;background-color: #dcdcdc;',
-  },
-  {
-    key: '9:16',
-    width: "9",
-    height: "16",
-    style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
-  },
-  {
-    key: '16:9',
-    width: "16",
-    height: "9",
-    style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
-  },
-]) // size
-
-// version
-const midjourneyVersionList = ref<any>([
-  {
-    value: '6.0',
-    label: 'v6.0',
-  },
-  {
-    value: '5.2',
-    label: 'v5.2',
-  },
-  {
-    value: '5.1',
-    label: 'v5.1',
-  },
-  {
-    value: '5.0',
-    label: 'v5.0',
-  },
-  {
-    value: '4.0',
-    label: 'v4.0',
-  },
-])
-const nijiVersionList = ref<any>([
-  {
-    value: '5',
-    label: 'v5',
-  },
-])
+// 表单
+const prompt = ref<string>('') // 提示词
+const referImageUrl = ref<any>() // 参考图
+const selectModel = ref<string>('midjourney') // 选中的模型
+const selectSize = ref<string>('1:1') // 选中 size
 const selectVersion = ref<any>('6.0') // 选中的 version
-let versionList = ref<any>([]) // version 列表
-versionList.value = midjourneyVersionList.value // 默认选择 midjourney
+const versionList = ref<any>(MidjourneyVersions) // version 列表
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
 
-/**  热词 - click  */
+/** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
-  // 取消
+  // 情况一：取消选中
   if (selectHotWord.value == hotWord) {
     selectHotWord.value = ''
     return
   }
-  // 选中
-  selectHotWord.value = hotWord
-  // 设置提示次
-  prompt.value = hotWord
+
+  // 情况二：选中
+  selectHotWord.value = hotWord // 选中
+  prompt.value = hotWord // 设置提示次
 }
 
-/**  size - click  */
+/** 点击 size 尺寸 */
 const handleSizeClick = async (imageSize: ImageSizeVO) => {
-  selectImageSize.value = imageSize.key
+  selectSize.value = imageSize.key
 }
 
-/**  模型 - click  */
+/** 点击 model 模型 */
 const handleModelClick = async (model: ImageModelVO) => {
   selectModel.value = model.key
   if (model.key === 'niji') {
-    versionList.value = nijiVersionList.value // 默认选择 niji
+    versionList.value = NijiVersionList // 默认选择 niji
   } else {
-    versionList.value = midjourneyVersionList.value // 默认选择 midjourney
+    versionList.value = MidjourneyVersions // 默认选择 midjourney
   }
   selectVersion.value = versionList.value[0].value
 }
 
-/**  version - click  */
-const handleChangeVersion = async (version) => {
-  console.log('version', version)
-}
-
-/** 图片生产  */
+/** 图片生成 */
 const handleGenerateImage = async () => {
   // 二次确认
   await message.confirm(`确认生成内容?`)
-  // todo @芋艿 图片生产逻辑
   try {
+    // 加载中
+    drawIn.value = true
     // 回调
-    emits('onDrawStart', selectModel.value)
+    emits('onDrawStart', AiPlatformEnum.MIDJOURNEY)
     // 发送请求
-    const imageSize = imageSizeList.value.find(item => selectImageSize.value === item.key) as ImageSizeVO
+    const imageSize = MidjourneySizeList.find(
+      (item) => selectSize.value === item.key
+    ) as ImageSizeVO
     const req = {
       prompt: prompt.value,
       model: selectModel.value,
       width: imageSize.width,
       height: imageSize.height,
       version: selectVersion.value,
-      referImageUrl: referImage.value,
+      referImageUrl: referImageUrl.value
     } as ImageMidjourneyImagineReqVO
     await ImageApi.midjourneyImagine(req)
   } finally {
     // 回调
-    emits('onDrawComplete', selectModel.value)
+    emits('onDrawComplete', AiPlatformEnum.MIDJOURNEY)
+    // 加载结束
+    drawIn.value = false
   }
 }
 
 /** 填充值 */
-const settingValues = async (imageDetail: ImageVO) => {
+const settingValues = async (detail: ImageVO) => {
   // 提示词
-  prompt.value = imageDetail.prompt
+  prompt.value = detail.prompt
   // image size
-  const imageSize = imageSizeList.value.find(item => item.key === `${imageDetail.width}:${imageDetail.height}`) as ImageSizeVO
-  selectImageSize.value = imageSize.key
+  const imageSize = MidjourneySizeList.find(
+    (item) => item.key === `${detail.width}:${detail.height}`
+  ) as ImageSizeVO
+  selectSize.value = imageSize.key
   // 选中模型
-  const model = models.value.find(item => item.key === imageDetail.options?.model) as ImageModelVO
+  const model = MidjourneyModels.find((item) => item.key === detail.options?.model) as ImageModelVO
   await handleModelClick(model)
   // 版本
-  selectVersion.value = versionList.value.find(item => item.value === imageDetail.options?.version).value
+  selectVersion.value = versionList.value.find(
+    (item) => item.value === detail.options?.version
+  ).value
   // image
-  referImage.value = imageDetail.options.referImageUrl
+  referImageUrl.value = detail.options.referImageUrl
 }
 
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
-
 // 提示词
 .prompt {
 }
@@ -354,7 +274,6 @@ defineExpose({ settingValues })
   }
 }
 
-
 // 尺寸
 .image-size {
   width: 100%;
diff --git a/src/views/ai/image/index/index.vue b/src/views/ai/image/index/index.vue
index f6e29684..a2207be8 100644
--- a/src/views/ai/image/index/index.vue
+++ b/src/views/ai/image/index/index.vue
@@ -31,7 +31,7 @@ import ImageList from './components/ImageList.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
 import { ImageVO } from '@/api/ai/image'
 import Dall3 from './components/dall3/index.vue'
-import Midjourney from './midjourney/index.vue'
+import Midjourney from './components/midjourney/index.vue'
 import StableDiffusion from './components/stableDiffusion/index.vue'
 
 const imageListRef = ref<any>() // image 列表 ref
@@ -40,7 +40,7 @@ const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
 
 // 定义属性
-const selectPlatform = ref(AiPlatformEnum.OPENAI)
+const selectPlatform = ref(AiPlatformEnum.MIDJOURNEY)
 const platformOptions = [
   {
     label: 'DALL3 绘画',
@@ -57,10 +57,10 @@ const platformOptions = [
 ]
 
 /** 绘画 start  */
-const handleDrawStart = async (type) => {}
+const handleDrawStart = async (platform: string) => {}
 
-/** 绘画 complete  */
-const handleDrawComplete = async (type) => {
+/** 绘画 complete */
+const handleDrawComplete = async (platform: string) => {
   await imageListRef.value.getImageList()
 }
 
diff --git a/src/views/ai/utils/constants.ts b/src/views/ai/utils/constants.ts
index aaae2ce8..b10a1e80 100644
--- a/src/views/ai/utils/constants.ts
+++ b/src/views/ai/utils/constants.ts
@@ -238,7 +238,7 @@ export const Dall3StyleList: ImageModelVO[] = [
   }
 ]
 
-interface ImageSizeVO {
+export interface ImageSizeVO {
   key: string
   name: string
   style: string
@@ -269,3 +269,79 @@ export const Dall3SizeList: ImageSizeVO[] = [
     style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
   }
 ]
+
+export const MidjourneyModels: ImageModelVO[] = [
+  {
+    key: 'midjourney',
+    name: 'MJ',
+    image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png'
+  },
+  {
+    key: 'niji',
+    name: 'NIJI',
+    image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png'
+  }
+]
+
+export const MidjourneySizeList: ImageSizeVO[] = [
+  {
+    key: '1:1',
+    width: '1',
+    height: '1',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '3:4',
+    width: '3',
+    height: '4',
+    style: 'width: 30px; height: 40px;background-color: #dcdcdc;'
+  },
+  {
+    key: '4:3',
+    width: '4',
+    height: '3',
+    style: 'width: 40px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '9:16',
+    width: '9',
+    height: '16',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
+  },
+  {
+    key: '16:9',
+    width: '16',
+    height: '9',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
+  }
+]
+
+export const MidjourneyVersions = [
+  {
+    value: '6.0',
+    label: 'v6.0'
+  },
+  {
+    value: '5.2',
+    label: 'v5.2'
+  },
+  {
+    value: '5.1',
+    label: 'v5.1'
+  },
+  {
+    value: '5.0',
+    label: 'v5.0'
+  },
+  {
+    value: '4.0',
+    label: 'v4.0'
+  }
+]
+
+export const NijiVersionList = [
+  {
+    value: '5',
+    label: 'v5'
+  }
+]

From 6550983413248353d7ad1faef59b095aece32746 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 10 Jul 2024 00:02:39 +0800
Subject: [PATCH 24/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91Mall=EF=BC=9A=E5=AE=A2=E6=9C=8D=E7=9A=84?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationBox.vue   | 36 ++++++++++++-----
 .../kefu/components/tools/constants.ts        |  1 +
 src/views/mall/promotion/kefu/index.vue       | 39 ++++++++++++-------
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
index a9ec9444..1301fce3 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="kefu">
+    <!-- TODO @puhui999：item => conversation 会不会更容易理解 -->
     <div
       v-for="(item, index) in conversationList"
       :key="item.id"
@@ -9,7 +10,9 @@
       @contextmenu.prevent="rightClick($event as PointerEvent, item)"
     >
       <div class="flex justify-center items-center w-100%">
+        <!-- TODO style 换成 unocss -->
         <div class="flex justify-center items-center" style="width: 50px; height: 50px">
+          <!-- 头像 + 未读 -->
           <el-badge
             :hidden="item.adminUnreadMessageCount === 0"
             :max="99"
@@ -41,7 +44,8 @@
         </div>
       </div>
     </div>
-    <!-- 通过右击获取到的坐标定位 -->
+
+    <!-- 右键，进行操作（类似微信） -->
     <ul v-show="showRightMenu" :style="rightMenuStyle" class="right-menu-ul">
       <li
         v-show="!selectedConversation.adminPinned"
@@ -78,23 +82,30 @@ import { formatDate } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 
 defineOptions({ name: 'KeFuConversationBox' })
-const message = useMessage()
+
+const message = useMessage() // 消息弹窗
+
 const { replaceEmoji } = useEmoji()
-const activeConversationIndex = ref(-1) // 选中的会话
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
+const activeConversationIndex = ref(-1) // 选中的会话 index 位置 TODO @puhui999：这个可以改成 activeConversationId 么？因为一般是选中的对话编号
+
+/** 加载会话列表 */
 const getConversationList = async () => {
   conversationList.value = await KeFuConversationApi.getConversationList()
 }
 defineExpose({ getConversationList })
+
+/** 打开右侧的消息列表 */
 const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void
 }>()
-// 打开右侧消息
 const openRightMessage = (item: KeFuConversationRespVO, index: number) => {
   activeConversationIndex.value = index
   emits('change', item)
 }
-// 获得消息类型
+
+// TODO @puhui999：这个，是不是改成 getConversationDisplayText，获取会话的展示文本。然后，把文本消息类型，也统一处理（包括上面的 replaceEmoji）。这样，更统一。
+/** 获得消息类型 */
 const getContentType = computed(() => (lastMessageContentType: number) => {
   switch (lastMessageContentType) {
     case KeFuMessageContentTypeEnum.SYSTEM:
@@ -117,8 +128,9 @@ const getContentType = computed(() => (lastMessageContentType: number) => {
 //======================= 右键菜单 =======================
 const showRightMenu = ref(false) // 显示右键菜单
 const rightMenuStyle = ref<any>({}) // 右键菜单 Style
-const selectedConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 右键选中的会话对象
-// 右键菜单
+const selectedConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 右键选中的会话对象 TODO puhui999：这个是不是叫 rightClickConversation 会好点。因为 selected 容易和选中的对话，定义上有点重叠
+
+/** 打开右键菜单 */
 const rightClick = (mouseEvent: PointerEvent, item: KeFuConversationRespVO) => {
   selectedConversation.value = item
   // 显示右键菜单
@@ -128,11 +140,12 @@ const rightClick = (mouseEvent: PointerEvent, item: KeFuConversationRespVO) => {
     left: mouseEvent.clientX - 80 + 'px'
   }
 }
-// 关闭菜单
+/** 关闭右键菜单 */
 const closeRightMenu = () => {
   showRightMenu.value = false
 }
-// 置顶会话
+
+/** 置顶会话 */
 const updateConversationPinned = async (adminPinned: boolean) => {
   // 1. 会话置顶/取消置顶
   await KeFuConversationApi.updateConversationPinned({
@@ -144,7 +157,8 @@ const updateConversationPinned = async (adminPinned: boolean) => {
   closeRightMenu()
   await getConversationList()
 }
-// 删除会话
+
+/** 删除会话 */
 const deleteConversation = async () => {
   // 1. 删除会话
   await message.confirm('您确定要删除该会话吗？')
@@ -153,6 +167,8 @@ const deleteConversation = async () => {
   closeRightMenu()
   await getConversationList()
 }
+
+/** 监听右键菜单的显示状态，添加点击事件监听器 */
 watch(showRightMenu, (val) => {
   if (val) {
     document.body.addEventListener('click', closeRightMenu)
diff --git a/src/views/mall/promotion/kefu/components/tools/constants.ts b/src/views/mall/promotion/kefu/components/tools/constants.ts
index e171e363..750e7f55 100644
--- a/src/views/mall/promotion/kefu/components/tools/constants.ts
+++ b/src/views/mall/promotion/kefu/components/tools/constants.ts
@@ -9,6 +9,7 @@ export const KeFuMessageContentTypeEnum = {
   PRODUCT: 10, //  商品消息
   ORDER: 11 //  订单消息"
 }
+
 // Promotion 的 WebSocket 消息类型枚举类
 export const WebSocketMessageTypeConstants = {
   KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 4eb5d240..2d8c1c64 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -1,10 +1,13 @@
 <template>
   <el-row :gutter="10">
+    <!-- TODO @puhui999：KeFuConversationBox => KeFuConversationList ；KeFuChatBox => KeFuMessageList -->
+    <!-- 会话列表 -->
     <el-col :span="8">
       <ContentWrap>
         <KeFuConversationBox ref="keFuConversationRef" @change="handleChange" />
       </ContentWrap>
     </el-col>
+    <!-- 会话详情（选中会话的消息列表） -->
     <el-col :span="16">
       <ContentWrap>
         <KeFuChatBox ref="keFuChatBoxRef" @change="getConversationList" />
@@ -21,15 +24,10 @@ import { getAccessToken } from '@/utils/auth'
 import { useWebSocket } from '@vueuse/core'
 
 defineOptions({ name: 'KeFu' })
-const message = useMessage()
 
-// 加载消息
-const keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
-const handleChange = (conversation: KeFuConversationRespVO) => {
-  keFuChatBoxRef.value?.getMessageList(conversation)
-}
+const message = useMessage() // 消息弹窗
 
-//======================= websocket start=======================
+// ======================= WebSocket start =======================
 const server = ref(
   (import.meta.env.VITE_BASE_URL + '/infra/ws/').replace('http', 'ws') +
     '?token=' +
@@ -38,9 +36,11 @@ const server = ref(
 
 /** 发起 WebSocket 连接 */
 const { data, close, open } = useWebSocket(server.value, {
-  autoReconnect: false,
+  autoReconnect: false, // TODO @puhui999：重连要加下
   heartbeat: true
 })
+
+/** 监听 WebSocket 数据 */
 watchEffect(() => {
   if (!data.value) {
     return
@@ -75,17 +75,28 @@ watchEffect(() => {
     console.error(error)
   }
 })
-//======================= websocket end=======================
-// 加载会话列表
+// ======================= WebSocket end =======================
+
+/** 加载会话列表 */
 const keFuConversationRef = ref<InstanceType<typeof KeFuConversationBox>>()
 const getConversationList = () => {
   keFuConversationRef.value?.getConversationList()
 }
+
+/** 加载指定会话的消息列表 */
+const keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
+const handleChange = (conversation: KeFuConversationRespVO) => {
+  keFuChatBoxRef.value?.getMessageList(conversation)
+}
+
+/** 初始化 */
 onMounted(() => {
   getConversationList()
   // 打开 websocket 连接
   open()
 })
+
+/** 销毁 */
 onBeforeUnmount(() => {
   // 关闭 websocket 连接
   close()
@@ -104,17 +115,17 @@ onBeforeUnmount(() => {
   height: 6px;
 }
 
-/*定义滚动条轨道 内阴影+圆角*/
+/* 定义滚动条轨道 内阴影+圆角 */
 ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
+  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
   border-radius: 10px;
   background-color: #fff;
 }
 
-/*定义滑块 内阴影+圆角*/
+/* 定义滑块 内阴影+圆角 */
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
+  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
   background-color: rgba(240, 240, 240, 0.5);
 }
 </style>