【代码优化】AI：绘图 index.vue 代码梳理 20%

src/views/ai/image/index/ImageDetailDrawer.vue → 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) // 图片详细信息

src/views/ai/image/index/ImageTask.vue → 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%;

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>