feat: 商品图文信息增加AI生成图片

package.json

@@ -19,6 +19,7 @@
     "@dagrejs/dagre": "^1.1.3",
     "@element-plus/icons-vue": "^2.3.1",
     "@ezijing/ai-core": "^1.0.0",
+    "@ezijing/ai-vue": "^1.0.37",
     "@fortaine/fetch-event-source": "^3.0.6",
     "@tinymce/tinymce-vue": "^5.0.1",
     "@vue-flow/controls": "^1.1.2",

src/composables/useChatImage.js

+import { ref } from 'vue'
+import { useImage } from '@ezijing/ai-vue'
+
+export function useChatImage() {
+  const { generateImage, isLoading, error, cancel } = useImage({ provider: 'volcano' })
+
+  // 聊天相关状态
+  const messages = ref([])
+
+  // 聊天功能
+  const sendMessage = async (content, params = {}) => {
+    messages.value.push({ role: 'user', content, timestamp: new Date() })
+    // 所有聊天都生成图片
+    await handleImageGeneration({ prompt: content, ...params })
+  }
+
+  // 处理图片生成
+  const handleImageGeneration = async (params) => {
+    if (params.image && params.image.length === 0) delete params.image
+    try {
+      // 调用图片生成API
+      const result = await generateImage({
+        // model: 'doubao-seedream-4.0',
+        sequential_image_generation: 'auto',
+        watermark: true,
+        ...params,
+      })
+      if (result && result.urls && result.urls.length > 0) {
+        // 添加AI回复
+        messages.value.push({
+          role: 'assistant',
+          content: `我已经为您生成了图片！共生成 ${result.urls.length} 张图片。`,
+          images: result.urls.map((url) => ({ url })),
+          timestamp: new Date(),
+        })
+      } else {
+        throw new Error('图片生成失败，请重试')
+      }
+    } catch (err) {
+      messages.value.push({
+        role: 'assistant',
+        content: `抱歉，图片生成失败了：${err.message}。请检查您的描述或稍后重试。`,
+        timestamp: new Date(),
+      })
+    }
+  }
+
+  return { messages, isLoading, error, sendMessage, generateImage: handleImageGeneration, cancel }
+}

src/modules/live/product/management/components/Upload.vue

 <script setup>
-import { Plus, UploadFilled, Picture } from '@element-plus/icons-vue'
+import { Plus, UploadFilled, Picture, MagicStick } from '@element-plus/icons-vue'
 import { useFileDialog } from '@vueuse/core'
 import { upload } from '@/utils/upload'
 import dayjs from 'dayjs'
 const ImageDesign = defineAsyncComponent(() => import('./ImageDesign.vue'))
+const ImageChat = defineAsyncComponent(() => import('./ImageChat.vue'))
 
 const props = defineProps({
   modelValue: { type: [Array, String], default: () => [] },
@@ -63,12 +64,25 @@ const handleDesignSave = (url) => {
   updatedValue[index.value] = result
   emit('update:modelValue', updatedValue)
 }
+
+const chatVisible = ref(false)
+const handleOpenChat = (i = 0) => {
+  index.value = i
+  chatVisible.value = true
+}
+const handleChatSave = (url) => {
+  const nowTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
+  const result = { name: '未命名', size: '未知', type: 'image/png', url, upload_time: nowTime }
+  const updatedValue = [...props.modelValue]
+  updatedValue[index.value] = result
+  emit('update:modelValue', updatedValue)
+}
 </script>
 <template>
   <div class="upload-wrapper">
     <template v-if="Array.isArray(props.modelValue)">
       <div v-for="(item, i) in props.limit" :key="i">
-        <el-popover placement="top" width="160px" trigger="hover">
+        <el-popover placement="top" width="220px" trigger="hover">
           <ul class="upload-popover">
             <li @click="handleOpen(i)">
               <i class="el-icon"><UploadFilled /></i>本地上传
@@ -76,6 +90,9 @@ const handleDesignSave = (url) => {
             <li @click="handleOpenDesign(i)" v-if="!isVideo">
               <i class="el-icon"><Picture /></i>图库选择
             </li>
+            <li @click="handleOpenChat(i)" v-if="!isVideo">
+              <i class="el-icon"><MagicStick /></i>AI辅助
+            </li>
           </ul>
           <template #reference>
             <div class="upload-item">
@@ -103,9 +120,12 @@ const handleDesignSave = (url) => {
           <li @click="handleOpen">
             <i class="el-icon"><UploadFilled /></i>本地上传
           </li>
-          <li v-if="!isVideo">
+          <li @click="handleOpenDesign" v-if="!isVideo">
             <i class="el-icon"><Picture /></i>图库选择
           </li>
+          <li @click="handleOpenChat" v-if="!isVideo">
+            <i class="el-icon"><MagicStick /></i>AI辅助
+          </li>
         </ul>
         <template #reference>
           <div class="upload-item">
@@ -127,6 +147,7 @@ const handleDesignSave = (url) => {
       </el-popover>
     </template>
     <ImageDesign v-model="designVisible" :kindId="29" @update="handleDesignSave" v-if="designVisible"></ImageDesign>
+    <ImageChat v-model="chatVisible" @update="handleChatSave" v-if="chatVisible"></ImageChat>
   </div>
 </template>