chore: 新增在线设计图片

src/modules/material/all/api.ts

@@ -49,3 +49,12 @@ export function postAIChat(data: { marketing_material_id: string; context: strin
 export function postGenerateImage(data: { marketing_material_id: string; context: string; type: number; chart_id: string | null }) {
   return httpRequest.post('/api/lab/v1/experiment/marketing-ai/sky-agent3-generate-image', data)
 }
+
+// 创客贴-查询我的设计(排序+筛选)
+export function getChuanKitDesignList(data: { user_flag: string; page_no: number; page_size: number; time_order: number }) {
+  return httpRequest.post('/api/lab/v1/experiment/marketing-ai/chuangkit-designs', data)
+}
+// 创客贴-服务端图片获取
+export function getChuanKitSourceImage(data: { userFlag: string; designId: string }) {
+  return httpRequest.post('/api/lab/v1/experiment/marketing-ai/chuangkit-source-image', data)
+}

src/modules/material/all/components/ImageDesign.vue

+<script setup>
+import { getChuanKitDesignList } from '../api'
+import { useUserStore } from '@/stores/user'
+import { uploadFileByUrl } from '@/utils/upload'
+
+const ChuangKitDesign = defineAsyncComponent(() => import('./ChuangKitDesign.vue'))
+
+const userStore = useUserStore()
+
+const model = defineModel()
+const active = ref('')
+const designVisible = ref(false)
+const data = reactive({
+  list: [],
+  count: 0
+})
+async function fetchList() {
+  const res = await getChuanKitDesignList({ user_flag: userStore.user.id, page_no: 1, page_size: 1000, time_order: 1 })
+  Object.assign(data, res.data)
+}
+onMounted(fetchList)
+
+async function handleClick(item) {
+  active.value = item.designId
+  model.value = await uploadFileByUrl(item.thumbUrl)
+}
+
+function onClose() {
+  designVisible.value = false
+  fetchList()
+}
+</script>
+
+<template>
+  <div class="image-design">
+    <el-button type="primary" @click="designVisible = true">打开编辑器</el-button>
+    <ul>
+      <li v-for="item in data.list" :key="item.designId" :class="{ active: item.designId === active }" @click="handleClick(item)">
+        <img :src="item.thumbUrl" />
+      </li>
+    </ul>
+    <ChuangKitDesign v-model="model" @close="onClose" v-if="designVisible"></ChuangKitDesign>
+  </div>
+</template>
+
+<style lang="scss">
+.image-design {
+  width: 100%;
+  ul {
+    margin: 30px auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 30px;
+  }
+  li {
+    width: 200px;
+    border-radius: 20px;
+    overflow: hidden;
+    cursor: pointer;
+    box-sizing: border-box;
+    &.active {
+      border: 5px solid var(--main-color);
+    }
+  }
+  img {
+    width: 100%;
+  }
+}
+</style>

src/modules/material/all/components/StepThree.vue

@@ -4,7 +4,7 @@ import { getNameByValue, materialMethodList } from '@/utils/dictionary'
 import AppUpload from '@/components/base/AppUpload.vue'
 import AIChat from './AIChat.vue'
 
-const ChuangKitDesign = defineAsyncComponent(() => import('./ChuangKitDesign.vue'))
+const ImageDesign = defineAsyncComponent(() => import('./ImageDesign.vue'))
 
 defineProps(['action'])
 
@@ -17,7 +17,7 @@ const form = defineModel()
 const formRef = ref()
 
 const rules = ref({
-  content: [{ required: true, message: '请输入内容名称' }]
+  content: [{ required: true, message: '请输入' }]
 })
 
 const typeName = computed(() => {
@@ -36,8 +36,6 @@ async function handleSubmit() {
   await handleValidate()
   emit('submit')
 }
-
-const designVisible = ref(false)
 </script>
 
 <template>
@@ -53,18 +51,20 @@ const designVisible = ref(false)
         <el-form-item label="创作方式">{{ getNameByValue(form.way, materialMethodList) }}</el-form-item>
       </el-form>
       <el-divider></el-divider>
-      <el-form label-suffix="：" label-width="110" :model="form" :rules="rules" ref="formRef" :disabled="action === 'view'">
-        <el-form-item :label="`${typeName}资源`" prop="content">
+      <el-form :model="form" :rules="rules" ref="formRef" :disabled="action === 'view'">
+        <el-form-item prop="content">
           <template v-if="form.type == 1">
             <!-- 文本 -->
             <el-input type="textarea" rows="14" v-model="form.content"></el-input>
           </template>
           <template v-if="['2', '6', '7', '8'].includes(form.type)">
-            <div>
-              <!-- 图片|二维码|小程序｜卡券 -->
+            <!-- 图片|二维码|小程序｜卡券 -->
+            <template v-if="form.way == 3">
+              <ImageDesign v-model="form.content"></ImageDesign>
+            </template>
+            <template v-else>
               <AppUpload v-model="form.content" accept="image/*"></AppUpload>
-              <el-button type="primary" @click="designVisible = true" style="width: 178px" v-if="form.way == 3">打开编辑器</el-button>
-            </div>
+            </template>
           </template>
           <template v-if="form.type == 3">
             <!-- 语音 -->
@@ -100,7 +100,6 @@ const designVisible = ref(false)
         <el-button type="primary" @click="handleSubmit" v-if="action !== 'view'">提交</el-button>
       </el-row>
     </el-card>
-    <ChuangKitDesign v-model="form.content" @close="designVisible = false" v-if="designVisible"></ChuangKitDesign>
   </div>
 </template>
 

src/utils/dictionary.ts

@@ -114,8 +114,8 @@ export const wayList = [
 
 export const materialMethodList = [
   { label: '离线上传 ', value: '2' },
-  { label: '在线AI', value: '1' }
-  // { label: '在线设计', value: '3' }
+  { label: '在线AI', value: '1' },
+  { label: '在线设计', value: '3' }
 ]
 
 // 使用场景