Skip to content

Commit 33cf98e

Browse files
YunaiVYunaiV
committed
【代码优化】AI：增加枚举类
1 parent 8da1c04 commit 33cf98e

File tree

6 files changed

+97
-29
lines changed

6 files changed

+97
-29
lines changed

‎src/views/ai/image/ImageTask.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { ImageApi, ImageVO, ImageMjActionVO, ImageMjButtonsVO } from '@/api/ai/i
3232
import ImageDetailDrawer from './ImageDetailDrawer.vue'
3333
import ImageTaskCard from './ImageTaskCard.vue'
3434
import { ElLoading, LoadingOptionsResolved } from 'element-plus'
35+
import { AiImageStatusEnum } from '@/views/ai/utils/constants'
3536
3637
const message = useMessage() // 消息弹窗
3738
@@ -80,7 +81,7 @@ const getImageList = async (apply: boolean = false) => {
8081
// 需要 watch 的数据
8182
const newWatImages = {}
8283
imageList.value.forEach((item) => {
83-
if (item.status === 10) {
84+
if (item.status === AiImageStatusEnum.IN_PROGRESS) {
8485
newWatImages[item.id] = item
8586
}
8687
})
@@ -102,7 +103,7 @@ const refreshWatchImages = async () => {
102103
const list = (await ImageApi.getImageListMyByIds(imageIds)) as ImageVO[]
103104
const newWatchImages = {}
104105
list.forEach((image) => {
105-
if (image.status === 10) {
106+
if (image.status === AiImageStatusEnum.IN_PROGRESS) {
106107
newWatchImages[image.id] = image
107108
} else {
108109
const index = imageList.value.findIndex((oldImage) => image.id === oldImage.id)

‎src/views/ai/image/ImageTaskCard.vue

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,20 @@
22
<el-card body-class="" class="image-card">
33
<div class="image-operation">
44
<div>
5-
<el-button type="primary" text bg v-if="imageDetail?.status === 10">生成中</el-button>
6-
<el-button text bg v-else-if="imageDetail?.status === 20">已完成</el-button>
7-
<el-button type="danger" text bg v-else-if="imageDetail?.status === 30">异常</el-button>
5+
<el-button
6+
type="primary"
7+
text
8+
bg
9+
v-if="imageDetail?.status === AiImageStatusEnum.IN_PROGRESS"
10+
>
11+
生成中
12+
</el-button>
13+
<el-button text bg v-else-if="imageDetail?.status === AiImageStatusEnum.SUCCESS">
14+
已完成
15+
</el-button>
16+
<el-button type="danger" text bg v-else-if="imageDetail?.status === AiImageStatusEnum.FAIL">
17+
异常
18+
</el-button>
819
</div>
920
<!-- TODO @fan：1）按钮要不调整成详情、下载、再次生成、删除？；2）如果是再次生成，就把当前的参数填写到左侧的框框里？ -->
1021
<div>
@@ -26,7 +37,9 @@
2637
<div class="image-wrapper" ref="cardImageRef">
2738
<!-- TODO @fan：要不加个点击，大图预览？ -->
2839
<img class="image" :src="imageDetail?.picUrl" />
29-
<div v-if="imageDetail?.status === 30">{{ imageDetail?.errorMessage }}</div>
40+
<div v-if="imageDetail?.status === AiImageStatusEnum.FAIL">
41+
{{ imageDetail?.errorMessage }}
42+
</div>
3043
</div>
3144
<!-- TODO @fan：style 使用 unocss 替代下 -->
3245
<div class="image-mj-btns">
@@ -46,7 +59,8 @@
4659
import { Delete, Download, More } from '@element-plus/icons-vue'
4760
import { ImageVO, ImageMjButtonsVO } from '@/api/ai/image'
4861
import { PropType } from 'vue'
49-
import { ElLoading, ElMessageBox } from 'element-plus'
62+
import { ElLoading } from 'element-plus'
63+
import { AiImageStatusEnum } from '@/views/ai/utils/constants'
5064
5165
const cardImageRef = ref<any>() // 卡片 image ref
5266
const cardImageLoadingInstance = ref<any>() // 卡片 image ref
@@ -65,7 +79,7 @@ const handlerBtnClick = async (type, imageDetail: ImageVO) => {
6579
6680
const handlerLoading = async (status: number) => {
6781
// TODO @fan：这个搞成 Loading 组件，然后通过数据驱动，这样搞可以哇？
68-
if (status === 10) {
82+
if (status === AiImageStatusEnum.IN_PROGRESS) {
6983
cardImageLoadingInstance.value = ElLoading.service({
7084
target: cardImageRef.value,
7185
text: '生成中...'

‎src/views/ai/image/index.vue

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@
33
<div class="ai-image">
44
<div class="left">
55
<div class="segmented">
6-
<el-segmented v-model="selectModel" :options="modelOptions" />
6+
<el-segmented v-model="selectPlatform" :options="platformOptions" />
77
</div>
88
<div class="modal-switch-container">
9-
<!-- TODO @fan：1）建议 Dall3 改成 OpenAI 绘图。因为 dall3 其实本质是模型；2）涉及到中英文的地方，中文和英文之间，有个空格哈 -->
10-
<Dall3 v-if="selectModel === 'DALL3绘画'"
11-
@on-draw-start="handlerDrawStart"
12-
@on-draw-complete="handlerDrawComplete" />
13-
<Midjourney v-if="selectModel === 'MJ绘画'" />
14-
<StableDiffusion v-if="selectModel === 'Stable Diffusion'" @on-draw-complete="handlerDrawComplete" />
9+
<Dall3
10+
v-if="selectPlatform === AiPlatformEnum.OPENAI"
11+
@on-draw-start="handlerDrawStart"
12+
@on-draw-complete="handlerDrawComplete"
13+
/>
14+
<Midjourney v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY" />
15+
<StableDiffusion
16+
v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
17+
@on-draw-complete="handlerDrawComplete"
18+
/>
1519
</div>
1620
</div>
1721
<div class="main">
@@ -26,18 +30,31 @@ import Dall3 from './dall3/index.vue'
2630
import Midjourney from './midjourney/index.vue'
2731
import StableDiffusion from './stable-diffusion/index.vue'
2832
import ImageTask from './ImageTask.vue'
33+
import { AiPlatformEnum } from '@/views/ai/utils/constants'
2934
30-
// ref
3135
const imageTaskRef = ref<any>() // image task ref
3236
3337
// 定义属性
34-
const selectModel = ref('Stable Diffusion')
35-
const modelOptions = ['DALL3绘画', 'MJ绘画', 'Stable Diffusion']
36-
const drawIn = ref<boolean>(false) // 生成中
38+
const selectPlatform = ref('StableDiffusion')
39+
const platformOptions = [
40+
{
41+
label: 'DALL3 绘画',
42+
value: AiPlatformEnum.OPENAI
43+
},
44+
{
45+
label: 'MJ 绘画',
46+
value: AiPlatformEnum.MIDJOURNEY
47+
},
48+
{
49+
label: 'Stable Diffusion',
50+
value: AiPlatformEnum.STABLE_DIFFUSION
51+
}
52+
]
53+
const drawIn = ref<boolean>(false) // 生成中
3754
3855
/** 绘画 - start */
3956
const handlerDrawStart = async (type) => {
40-
// todo
57+
// todo @fan：这个是不是没用啦？
4158
drawIn.value = true
4259
}
4360
@@ -47,15 +64,9 @@ const handlerDrawComplete = async (type) => {
4764
// todo
4865
await imageTaskRef.value.getImageList()
4966
}
50-
51-
//
52-
onMounted( async () => {
53-
})
54-
5567
</script>
5668

5769
<style scoped lang="scss">
58-
5970
.ai-image {
6071
position: absolute;
6172
left: 0;
@@ -101,5 +112,4 @@ onMounted( async () => {
101112
background-color: #f7f8fa;
102113
}
103114
}
104-
105115
</style>

‎src/views/ai/image/manager/index.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
:active-value="true"
122122
:inactive-value="false"
123123
@change="handleUpdatePublicStatusChange(scope.row)"
124-
:disabled="scope.row.status !== 20"
124+
:disabled="scope.row.status !== AiImageStatusEnum.SUCCESS"
125125
/>
126126
</template>
127127
</el-table-column>
@@ -165,6 +165,7 @@ import { getIntDictOptions, DICT_TYPE, getStrDictOptions, getBoolDictOptions } f
165165
import { dateFormatter } from '@/utils/formatTime'
166166
import { ImageApi, ImageVO } from '@/api/ai/image'
167167
import * as UserApi from '@/api/system/user'
168+
import { AiImageStatusEnum } from '@/views/ai/utils/constants'
168169
169170
/** AI 绘画 列表 */
170171
defineOptions({ name: 'AiImageManager' })

‎src/views/ai/music/manager/index.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@
158158
:active-value="true"
159159
:inactive-value="false"
160160
@change="handleUpdatePublicStatusChange(scope.row)"
161-
:disabled="scope.row.status !== 20"
161+
:disabled="scope.row.status !== AiMusicStatusEnum.SUCCESS"
162162
/>
163163
</template>
164164
</el-table-column>
@@ -199,6 +199,7 @@ import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
199199
import { dateFormatter } from '@/utils/formatTime'
200200
import { MusicApi, MusicVO } from '@/api/ai/music'
201201
import * as UserApi from '@/api/system/user'
202+
import { AiMusicStatusEnum } from '@/views/ai/utils/constants'
202203
203204
/** AI 音乐 列表 */
204205
defineOptions({ name: 'AiMusicManager' })

‎src/views/ai/utils/constants.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Created by 芋道源码
3+
*
4+
* AI 枚举类
5+
*
6+
* 问题：为什么不放在 src/utils/constants.ts 呢？
7+
* 回答：主要 AI 是可选模块，考虑到独立、解耦，所以放在了 /views/ai/utils/constants.ts
8+
*/
9+
10+
/**
11+
* AI 平台的枚举
12+
*/
13+
export const AiPlatformEnum = {
14+
OPENAI: 'OpenAI',
15+
Ollama: 'Ollama',
16+
YI_YAN: 'YiYan', // 百度
17+
XING_HUO: 'XingHuo', // 讯飞
18+
QIAN_WEN: 'QianWen', // 阿里
19+
GEMIR: 'gemir', // 谷歌
20+
STABLE_DIFFUSION: 'StableDiffusion', // Stability AI
21+
MIDJOURNEY: 'Midjourney', // Midjourney
22+
SUNO: 'Suno' // Suno AI
23+
}
24+
25+
/**
26+
* AI 图像生成状态的枚举
27+
*/
28+
export const AiImageStatusEnum = {
29+
IN_PROGRESS: 10, // 进行中
30+
SUCCESS: 20, // 已完成
31+
FAIL: 30 // 已失败
32+
}
33+
34+
/**
35+
* AI 音乐生成状态的枚举
36+
*/
37+
export const AiMusicStatusEnum = {
38+
IN_PROGRESS: 10, // 进行中
39+
SUCCESS: 20, // 已完成
40+
FAIL: 30 // 已失败
41+
}

0 commit comments

Comments
 (0)