【代码优化】AI：增加枚举类

src/views/ai/image/ImageTask.vue

@@ -32,6 +32,7 @@ import { ImageApi, ImageVO, ImageMjActionVO, ImageMjButtonsVO } from '@/api/ai/i
 import ImageDetailDrawer from './ImageDetailDrawer.vue'
 import ImageTaskCard from './ImageTaskCard.vue'
 import { ElLoading, LoadingOptionsResolved } from 'element-plus'
+import { AiImageStatusEnum } from '@/views/ai/utils/constants'
 
 const message = useMessage() // 消息弹窗
 
@@ -80,7 +81,7 @@ const getImageList = async (apply: boolean = false) => {
     // 需要 watch 的数据
     const newWatImages = {}
     imageList.value.forEach((item) => {
-      if (item.status === 10) {
+      if (item.status === AiImageStatusEnum.IN_PROGRESS) {
         newWatImages[item.id] = item
       }
     })
@@ -102,7 +103,7 @@ const refreshWatchImages = async () => {
   const list = (await ImageApi.getImageListMyByIds(imageIds)) as ImageVO[]
   const newWatchImages = {}
   list.forEach((image) => {
-    if (image.status === 10) {
+    if (image.status === AiImageStatusEnum.IN_PROGRESS) {
       newWatchImages[image.id] = image
     } else {
       const index = imageList.value.findIndex((oldImage) => image.id === oldImage.id)

src/views/ai/image/ImageTaskCard.vue

@@ -2,9 +2,20 @@
   <el-card body-class="" class="image-card">
     <div class="image-operation">
       <div>
-        <el-button type="primary" text bg v-if="imageDetail?.status === 10">生成中</el-button>
+        <el-button
-        <el-button text bg v-else-if="imageDetail?.status === 20">已完成</el-button>
+          type="primary"
-        <el-button type="danger" text bg v-else-if="imageDetail?.status === 30">异常</el-button>
+          text
+          bg
+          v-if="imageDetail?.status === AiImageStatusEnum.IN_PROGRESS"
+        >
+          生成中
+        </el-button>
+        <el-button text bg v-else-if="imageDetail?.status === AiImageStatusEnum.SUCCESS">
+          已完成
+        </el-button>
+        <el-button type="danger" text bg v-else-if="imageDetail?.status === AiImageStatusEnum.FAIL">
+          异常
+        </el-button>
       </div>
       <!-- TODO @fan：1）按钮要不调整成详情、下载、再次生成、删除？；2）如果是再次生成，就把当前的参数填写到左侧的框框里？ -->
       <div>
@@ -26,7 +37,9 @@
     <div class="image-wrapper" ref="cardImageRef">
       <!-- TODO @fan：要不加个点击，大图预览？ -->
       <img class="image" :src="imageDetail?.picUrl" />
-      <div v-if="imageDetail?.status === 30">{{ imageDetail?.errorMessage }}</div>
+      <div v-if="imageDetail?.status === AiImageStatusEnum.FAIL">
+        {{ imageDetail?.errorMessage }}
+      </div>
     </div>
     <!-- TODO @fan：style 使用 unocss 替代下 -->
     <div class="image-mj-btns">
@@ -46,7 +59,8 @@
 import { Delete, Download, More } from '@element-plus/icons-vue'
 import { ImageVO, ImageMjButtonsVO } from '@/api/ai/image'
 import { PropType } from 'vue'
-import { ElLoading, ElMessageBox } from 'element-plus'
+import { ElLoading } from 'element-plus'
+import { AiImageStatusEnum } from '@/views/ai/utils/constants'
 
 const cardImageRef = ref<any>() // 卡片 image ref
 const cardImageLoadingInstance = ref<any>() // 卡片 image ref
@@ -65,7 +79,7 @@ const handlerBtnClick = async (type, imageDetail: ImageVO) => {
 
 const handlerLoading = async (status: number) => {
   // TODO @fan：这个搞成 Loading 组件，然后通过数据驱动，这样搞可以哇？
-  if (status === 10) {
+  if (status === AiImageStatusEnum.IN_PROGRESS) {
     cardImageLoadingInstance.value = ElLoading.service({
       target: cardImageRef.value,
       text: '生成中...'

src/views/ai/image/index.vue

@@ -3,15 +3,19 @@
   <div class="ai-image">
     <div class="left">
       <div class="segmented">
-        <el-segmented v-model="selectModel" :options="modelOptions" />
+        <el-segmented v-model="selectPlatform" :options="platformOptions" />
       </div>
       <div class="modal-switch-container">
-        <!-- TODO @fan：1）建议 Dall3 改成 OpenAI 绘图。因为 dall3 其实本质是模型；2）涉及到中英文的地方，中文和英文之间，有个空格哈 -->
+        <Dall3
-        <Dall3 v-if="selectModel === 'DALL3绘画'"
+          v-if="selectPlatform === AiPlatformEnum.OPENAI"
           @on-draw-start="handlerDrawStart"
-               @on-draw-complete="handlerDrawComplete" />
+          @on-draw-complete="handlerDrawComplete"
-        <Midjourney v-if="selectModel === 'MJ绘画'" />
+        />
-        <StableDiffusion v-if="selectModel === 'Stable Diffusion'" @on-draw-complete="handlerDrawComplete" />
+        <Midjourney v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY" />
+        <StableDiffusion
+          v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
+          @on-draw-complete="handlerDrawComplete"
+        />
       </div>
     </div>
     <div class="main">
@@ -26,18 +30,31 @@ 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 { AiPlatformEnum } from '@/views/ai/utils/constants'
 
-// ref
 const imageTaskRef = ref<any>() // image task ref
 
 // 定义属性
-const selectModel = ref('Stable Diffusion')
+const selectPlatform = ref('StableDiffusion')
-const modelOptions = ['DALL3绘画', 'MJ绘画', 'Stable Diffusion']
+const platformOptions = [
+  {
+    label: 'DALL3 绘画',
+    value: AiPlatformEnum.OPENAI
+  },
+  {
+    label: 'MJ 绘画',
+    value: AiPlatformEnum.MIDJOURNEY
+  },
+  {
+    label: 'Stable Diffusion',
+    value: AiPlatformEnum.STABLE_DIFFUSION
+  }
+]
 const drawIn = ref<boolean>(false) // 生成中
 
 /**  绘画 - start  */
 const handlerDrawStart = async (type) => {
-  // todo
+  // todo @fan：这个是不是没用啦？
   drawIn.value = true
 }
 
@@ -47,15 +64,9 @@ const handlerDrawComplete = async (type) => {
   // todo
   await imageTaskRef.value.getImageList()
 }
-
-//
-onMounted( async () => {
-})
-
 </script>
 
 <style scoped lang="scss">
-
 .ai-image {
   position: absolute;
   left: 0;
@@ -101,5 +112,4 @@ onMounted( async () => {
     background-color: #f7f8fa;
   }
 }
-
 </style>

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

@@ -121,7 +121,7 @@
             :active-value="true"
             :inactive-value="false"
             @change="handleUpdatePublicStatusChange(scope.row)"
-            :disabled="scope.row.status !== 20"
+            :disabled="scope.row.status !== AiImageStatusEnum.SUCCESS"
           />
         </template>
       </el-table-column>
@@ -165,6 +165,7 @@ import { getIntDictOptions, DICT_TYPE, getStrDictOptions, getBoolDictOptions } f
 import { dateFormatter } from '@/utils/formatTime'
 import { ImageApi, ImageVO } from '@/api/ai/image'
 import * as UserApi from '@/api/system/user'
+import { AiImageStatusEnum } from '@/views/ai/utils/constants'
 
 /** AI 绘画 列表 */
 defineOptions({ name: 'AiImageManager' })

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

@@ -158,7 +158,7 @@
             :active-value="true"
             :inactive-value="false"
             @change="handleUpdatePublicStatusChange(scope.row)"
-            :disabled="scope.row.status !== 20"
+            :disabled="scope.row.status !== AiMusicStatusEnum.SUCCESS"
           />
         </template>
       </el-table-column>
@@ -199,6 +199,7 @@ import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import { MusicApi, MusicVO } from '@/api/ai/music'
 import * as UserApi from '@/api/system/user'
+import { AiMusicStatusEnum } from '@/views/ai/utils/constants'
 
 /** AI 音乐 列表 */
 defineOptions({ name: 'AiMusicManager' })

src/views/ai/utils/constants.ts

@@ -0,0 +1,41 @@
+/**
+ * Created by 芋道源码
+ *
+ * AI 枚举类
+ *
+ * 问题：为什么不放在 src/utils/constants.ts 呢？
+ * 回答：主要 AI 是可选模块，考虑到独立、解耦，所以放在了 /views/ai/utils/constants.ts
+ */
+
+/**
+ * AI 平台的枚举
+ */
+export const AiPlatformEnum = {
+  OPENAI: 'OpenAI',
+  Ollama: 'Ollama',
+  YI_YAN: 'YiYan', // 百度
+  XING_HUO: 'XingHuo', // 讯飞
+  QIAN_WEN: 'QianWen', // 阿里
+  GEMIR: 'gemir', // 谷歌
+  STABLE_DIFFUSION: 'StableDiffusion', // Stability AI
+  MIDJOURNEY: 'Midjourney', // Midjourney
+  SUNO: 'Suno' // Suno AI
+}
+
+/**
+ * AI 图像生成状态的枚举
+ */
+export const AiImageStatusEnum = {
+  IN_PROGRESS: 10, // 进行中
+  SUCCESS: 20, // 已完成
+  FAIL: 30 // 已失败
+}
+
+/**
+ * AI 音乐生成状态的枚举
+ */
+export const AiMusicStatusEnum = {
+  IN_PROGRESS: 10, // 进行中
+  SUCCESS: 20, // 已完成
+  FAIL: 30 // 已失败
+}