From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/ai/image/index/components/ImageCard.vue | 131 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 131 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/image/index/components/ImageCard.vue b/src/views/ai/image/index/components/ImageCard.vue
new file mode 100644
index 0000000..9a5632e
--- /dev/null
+++ b/src/views/ai/image/index/components/ImageCard.vue
@@ -0,0 +1,131 @@
+<template>
+ <el-card
+ body-class=""
+ class="!w-80 !h-auto !rounded-10px !relative !flex !flex-col"
+ >
+ <div class="!flex !flex-row !justify-between">
+ <div>
+ <el-button type="primary" text bg v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
+ 鐢熸垚涓�
+ </el-button>
+ <el-button text bg v-else-if="detail?.status === AiImageStatusEnum.SUCCESS">
+ 宸插畬鎴�
+ </el-button>
+ <el-button type="danger" text bg v-else-if="detail?.status === AiImageStatusEnum.FAIL">
+ 寮傚父
+ </el-button>
+ </div>
+ <!-- 鎿嶄綔鍖� -->
+ <div>
+ <el-button
+ class="!p-10px !m-0"
+ text
+ :icon="Download"
+ @click="handleButtonClick('download', detail)"
+ />
+ <el-button
+ class="!p-10px !m-0"
+ text
+ :icon="RefreshRight"
+ @click="handleButtonClick('regeneration', detail)"
+ />
+ <el-button
+ class="!p-10px !m-0"
+ text
+ :icon="Delete"
+ @click="handleButtonClick('delete', detail)"
+ />
+ <el-button
+ class="!p-10px !m-0"
+ text
+ :icon="More"
+ @click="handleButtonClick('more', detail)"
+ />
+ </div>
+ </div>
+ <div class="!overflow-hidden !mt-20px !h-280px !flex-1" ref="cardImageRef">
+ <el-image
+ class="!w-full !rounded-10px"
+ :src="detail?.picUrl"
+ :preview-src-list="[detail.picUrl]"
+ preview-teleported
+ />
+ <div v-if="detail?.status === AiImageStatusEnum.FAIL">
+ {{ detail?.errorMessage }}
+ </div>
+ </div>
+ <!-- Midjourney 涓撳睘鎿嶄綔 -->
+ <div class="!mt-5px !w-full !flex !flex-row !flex-wrap !justify-start">
+ <el-button
+ size="small"
+ v-for="button in detail?.buttons"
+ :key="button"
+ class="min-w-40px ml-0 mr-10px mt-5px"
+ @click="handleMidjourneyBtnClick(button)"
+ >
+ {{ button.label }}{{ button.emoji }}
+ </el-button>
+ </div>
+ </el-card>
+</template>
+<script setup lang="ts">
+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 { AiImageStatusEnum } from '@/views/ai/utils/constants'
+
+const message = useMessage() // 娑堟伅
+
+const props = defineProps({
+ detail: {
+ type: Object as PropType<ImageVO>,
+ require: true
+ }
+})
+
+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) => {
+ // 鎯呭喌涓�锛氬鏋滄槸鐢熸垚涓紝鍒欒缃姞杞戒腑鐨� loading
+ if (status === AiImageStatusEnum.IN_PROGRESS) {
+ cardImageLoadingInstance.value = ElLoading.service({
+ target: cardImageRef.value,
+ text: '鐢熸垚涓�...'
+ } as LoadingOptionsResolved)
+ // 鎯呭喌浜岋細濡傛灉宸茬粡鐢熸垚缁撴潫锛屽垯绉婚櫎 loading
+ } else {
+ if (cardImageLoadingInstance.value) {
+ cardImageLoadingInstance.value.close()
+ cardImageLoadingInstance.value = null
+ }
+ }
+}
+
+/** 鍒濆鍖� */
+onMounted(async () => {
+ await handleLoading(props.detail.status as string)
+})
+</script>
--
Gitblit v1.8.0