| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <!-- image --> |
| H | 2 | <template> |
| 3 | <div class="ai-image"> | |
| 4 | <div class="left"> | |
| 5 | <div class="segmented"> | |
| 6 | <el-segmented v-model="selectPlatform" :options="platformOptions" /> | |
| 7 | </div> | |
| 8 | <div class="modal-switch-container"> | |
| 9 | <Dall3 | |
| 10 | v-if="selectPlatform === AiPlatformEnum.OPENAI" | |
| 11 | ref="dall3Ref" | |
| 12 | @on-draw-start="handleDrawStart" | |
| 13 | @on-draw-complete="handleDrawComplete" | |
| 14 | /> | |
| 15 | <Midjourney v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY" ref="midjourneyRef" /> | |
| 16 | <StableDiffusion | |
| 17 | v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION" | |
| 18 | ref="stableDiffusionRef" | |
| 19 | @on-draw-complete="handleDrawComplete" | |
| 20 | /> | |
| 21 | <Other | |
| 22 | v-if="selectPlatform === 'other'" | |
| 23 | ref="otherRef" | |
| 24 | @on-draw-complete="handleDrawComplete" | |
| 25 | /> | |
| 26 | </div> | |
| 27 | </div> | |
| 28 | <div class="main"> | |
| 29 | <ImageList ref="imageListRef" @on-regeneration="handleRegeneration" /> | |
| 30 | </div> | |
| 31 | </div> | |
| 32 | </template> | |
| 33 | ||
| 34 | <script setup lang="ts"> | |
| 35 | import ImageList from './components/ImageList.vue' | |
| 36 | import { AiPlatformEnum } from '@/views/ai/utils/constants' | |
| 37 | import { ImageVO } from '@/api/ai/image' | |
| 38 | import Dall3 from './components/dall3/index.vue' | |
| 39 | import Midjourney from './components/midjourney/index.vue' | |
| 40 | import StableDiffusion from './components/stableDiffusion/index.vue' | |
| 41 | import Other from './components/other/index.vue' | |
| 42 | ||
| 43 | const imageListRef = ref<any>() // image 列表 ref | |
| 44 | const dall3Ref = ref<any>() // dall3(openai) ref | |
| 45 | const midjourneyRef = ref<any>() // midjourney ref | |
| 46 | const stableDiffusionRef = ref<any>() // stable diffusion ref | |
| 47 | const otherRef = ref<any>() // stable diffusion ref | |
| 48 | ||
| 49 | // 定义属性 | |
| 50 | const selectPlatform = ref(AiPlatformEnum.MIDJOURNEY) | |
| 51 | const platformOptions = [ | |
| 52 | { | |
| 53 | label: 'DALL3 绘画', | |
| 54 | value: AiPlatformEnum.OPENAI | |
| 55 | }, | |
| 56 | { | |
| 57 | label: 'MJ 绘画', | |
| 58 | value: AiPlatformEnum.MIDJOURNEY | |
| 59 | }, | |
| 60 | { | |
| 61 | label: 'Stable Diffusion', | |
| 62 | value: AiPlatformEnum.STABLE_DIFFUSION | |
| 63 | }, | |
| 64 | { | |
| 65 | label: '其它', | |
| 66 | value: 'other' | |
| 67 | } | |
| 68 | ] | |
| 69 | ||
| 70 | /** 绘画 start */ | |
| 71 | const handleDrawStart = async (platform: string) => {} | |
| 72 | ||
| 73 | /** 绘画 complete */ | |
| 74 | const handleDrawComplete = async (platform: string) => { | |
| 75 | await imageListRef.value.getImageList() | |
| 76 | } | |
| 77 | ||
| 78 | /** 重新生成：将画图详情填充到对应平台 */ | |
| 79 | const handleRegeneration = async (image: ImageVO) => { | |
| 80 | // 切换平台 | |
| 81 | selectPlatform.value = image.platform | |
| 82 | // 根据不同平台填充 image | |
| 83 | await nextTick() | |
| 84 | if (image.platform === AiPlatformEnum.MIDJOURNEY) { | |
| 85 | midjourneyRef.value.settingValues(image) | |
| 86 | } else if (image.platform === AiPlatformEnum.OPENAI) { | |
| 87 | dall3Ref.value.settingValues(image) | |
| 88 | } else if (image.platform === AiPlatformEnum.STABLE_DIFFUSION) { | |
| 89 | stableDiffusionRef.value.settingValues(image) | |
| 90 | } | |
| 91 | // TODO @fan：貌似 other 重新设置不行？ | |
| 92 | } | |
| 93 | </script> | |
| 94 | ||
| 95 | <style scoped lang="scss"> | |
| 96 | .ai-image { | |
| 97 | position: absolute; | |
| 98 | left: 0; | |
| 99 | right: 0; | |
| 100 | bottom: 0; | |
| 101 | top: 0; | |
| 102 | ||
| 103 | display: flex; | |
| 104 | flex-direction: row; | |
| 105 | height: 100%; | |
| 106 | width: 100%; | |
| 107 | ||
| 108 | .left { | |
| 109 | display: flex; | |
| 110 | flex-direction: column; | |
| 111 | padding: 20px; | |
| 112 | width: 350px; | |
| 113 | ||
| 114 | .segmented { | |
| 115 | } | |
| 116 | ||
| 117 | .segmented .el-segmented { | |
| 118 | --el-border-radius-base: 16px; | |
| 119 | --el-segmented-item-selected-color: #fff; | |
| 120 | background-color: #ececec; | |
| 121 | width: 350px; | |
| 122 | } | |
| 123 | ||
| 124 | .modal-switch-container { | |
| 125 | height: 100%; | |
| 126 | overflow-y: auto; | |
| 127 | margin-top: 30px; | |
| 128 | } | |
| 129 | } | |
| 130 | ||
| 131 | .main { | |
| 132 | flex: 1; | |
| 133 | background-color: #fff; | |
| 134 | } | |
| 135 | ||
| 136 | .right { | |
| 137 | width: 350px; | |
| 138 | background-color: #f7f8fa; | |
| 139 | } | |
| 140 | } | |
| 141 | </style> | |
