【解决todo】handle命名

src/views/ai/image/ImageDetailDrawer.vue

@@ -2,7 +2,7 @@
   <el-drawer
     v-model="showDrawer"
     title="图片详细"
-    @close="handlerDrawerClose"
+    @close="handleDrawerClose"
     custom-class="drawer-class"
   >
     <!-- 图片 -->
@@ -79,8 +79,8 @@ const props = defineProps({
 })
 
 /**  抽屉 - close  */
-const handlerDrawerClose = async () => {
+const handleDrawerClose = async () => {
-  emits('handlerDrawerClose')
+  emits('handleDrawerClose')
 }
 
 /**  获取 - 图片 detail  */
@@ -90,7 +90,7 @@ const getImageDetail = async (id) => {
 }
 
 /**  任务 - detail  */
-const handlerTaskDetail = async () => {
+const handleTaskDetail = async () => {
   showDrawer.value = true
 }
 
@@ -107,7 +107,7 @@ watch(id, async (newVal, oldVal) => {
   }
 })
 //
-const emits = defineEmits(['handlerDrawerClose'])
+const emits = defineEmits(['handleDrawerClose'])
 //
 onMounted(async () => {})
 </script>

src/views/ai/image/ImageTask.vue

@@ -6,8 +6,8 @@
         v-for="image in imageList"
         :key="image"
         :image-detail="image"
-        @on-btn-click="handlerImageBtnClick"
+        @on-btn-click="handleImageBtnClick"
-        @on-mj-btn-click="handlerImageMjBtnClick"
+        @on-mj-btn-click="handleImageMjBtnClick"
       />
     </div>
     <div class="task-image-pagination">
@@ -16,7 +16,7 @@
         layout="prev, pager, next"
         :default-page-size="pageSize"
         :total="pageTotal"
-        @change="handlerPageChange"
+        @change="handlePageChange"
       />
     </div>
   </el-card>
@@ -24,7 +24,7 @@
   <ImageDetailDrawer
     :show="isShowImageDetail"
     :id="showImageDetailId"
-    @handler-drawer-close="handlerDrawerClose"
+    @handle-drawer-close="handleDrawerClose"
   />
 </template>
 <script setup lang="ts">
@@ -49,12 +49,12 @@ const pageSize = ref<number>(10) // page size
 const pageTotal = ref<number>(0) // page size
 
 /**  抽屉 - close  */
-const handlerDrawerClose = async () => {
+const handleDrawerClose = async () => {
   isShowImageDetail.value = false
 }
 
 /**  任务 - detail  */
-const handlerDrawerOpen = async () => {
+const handleDrawerOpen = async () => {
   isShowImageDetail.value = true
 }
 
@@ -117,12 +117,12 @@ const refreshWatchImages = async () => {
 }
 
 /**  图片 - btn click  */
-const handlerImageBtnClick = async (type: string, imageDetail: ImageVO) => {
+const handleImageBtnClick = async (type: string, imageDetail: ImageVO) => {
   // 获取 image detail id
   showImageDetailId.value = imageDetail.id
   // 处理不用 btn
   if (type === 'more') {
-    await handlerDrawerOpen()
+    await handleDrawerOpen()
   } else if (type === 'delete') {
     await message.confirm(`是否删除照片?`)
     await ImageApi.deleteImageMy(imageDetail.id)
@@ -138,7 +138,7 @@ const handlerImageBtnClick = async (type: string, imageDetail: ImageVO) => {
 }
 
 /**  图片 - mj btn click  */
-const handlerImageMjBtnClick = async (button: ImageMjButtonsVO, imageDetail: ImageVO) => {
+const handleImageMjBtnClick = async (button: ImageMjButtonsVO, imageDetail: ImageVO) => {
   // 1、构建 params 参数
   const data = {
     id: imageDetail.id,
@@ -171,7 +171,7 @@ const downloadImage = async (imageUrl) => {
 }
 
 // page change
-const handlerPageChange = async (page) => {
+const handlePageChange = async (page) => {
   pageNo.value = page
   await getImageList(false)
 }

src/views/ai/image/ImageTaskCard.vue

@@ -23,21 +23,21 @@
           class="btn"
           text
           :icon="Download"
-          @click="handlerBtnClick('download', imageDetail)"
+          @click="handleBtnClick('download', imageDetail)"
         />
         <el-button
           class="btn"
           text
           :icon="RefreshRight"
-          @click="handlerBtnClick('regeneration', imageDetail)"
+          @click="handleBtnClick('regeneration', imageDetail)"
         />
         <el-button
           class="btn"
           text
           :icon="Delete"
-          @click="handlerBtnClick('delete', imageDetail)"
+          @click="handleBtnClick('delete', imageDetail)"
         />
-        <el-button class="btn" text :icon="More" @click="handlerBtnClick('more', imageDetail)" />
+        <el-button class="btn" text :icon="More" @click="handleBtnClick('more', imageDetail)" />
       </div>
     </div>
     <div class="image-wrapper" ref="cardImageRef">
@@ -54,7 +54,7 @@
         v-for="button in imageDetail?.buttons"
         :key="button"
         style="min-width: 40px; margin-left: 0; margin-right: 10px; margin-top: 5px"
-        @click="handlerMjBtnClick(button)"
+        @click="handleMjBtnClick(button)"
       >
         {{ button.label }}{{ button.emoji }}
       </el-button>
@@ -79,11 +79,11 @@ const props = defineProps({
 })
 
 /**  按钮 - 点击事件  */
-const handlerBtnClick = async (type, imageDetail: ImageVO) => {
+const handleBtnClick = async (type, imageDetail: ImageVO) => {
   emits('onBtnClick', type, imageDetail)
 }
 
-const handlerLoading = async (status: number) => {
+const handleLoading = async (status: number) => {
   // TODO @fan：这个搞成 Loading 组件，然后通过数据驱动，这样搞可以哇？
   if (status === AiImageStatusEnum.IN_PROGRESS) {
     cardImageLoadingInstance.value = ElLoading.service({
@@ -99,7 +99,7 @@ const handlerLoading = async (status: number) => {
 }
 
 /**  mj 按钮 click  */
-const handlerMjBtnClick = async (button: ImageMjButtonsVO) => {
+const handleMjBtnClick = async (button: ImageMjButtonsVO) => {
   // 确认窗体
   await message.confirm(`确认操作 "${button.label} ${button.emoji}" ?`)
   emits('onMjBtnClick', button, props.imageDetail)
@@ -108,7 +108,7 @@ const handlerMjBtnClick = async (button: ImageMjButtonsVO) => {
 // watch
 const { imageDetail } = toRefs(props)
 watch(imageDetail, async (newVal, oldVal) => {
-  await handlerLoading(newVal.status as string)
+  await handleLoading(newVal.status as string)
 })
 
 // emits
@@ -116,7 +116,7 @@ const emits = defineEmits(['onBtnClick', 'onMjBtnClick'])
 
 //
 onMounted(async () => {
-  await handlerLoading(props.imageDetail.status as string)
+  await handleLoading(props.imageDetail.status as string)
 })
 </script>
 

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

@@ -25,7 +25,7 @@
                  :type="(selectHotWord === hotWord ? 'primary' : 'default')"
                  v-for="hotWord in hotWords"
                  :key="hotWord"
-                 @click="handlerHotWordClick(hotWord)"
+                 @click="handleHotWordClick(hotWord)"
       >
         {{ hotWord }}
       </el-button>
@@ -45,7 +45,7 @@
         <el-image
           :src="model.image"
           fit="contain"
-          @click="handlerModelClick(model)"
+          @click="handleModelClick(model)"
         />
         <div class="model-font">{{model.name}}</div>
       </div>
@@ -64,7 +64,7 @@
         <el-image
           :src="imageStyle.image"
           fit="contain"
-          @click="handlerStyleClick(imageStyle)"
+          @click="handleStyleClick(imageStyle)"
         />
         <div class="style-font">{{imageStyle.name}}</div>
       </div>
@@ -78,7 +78,7 @@
       <div class="size-item"
            v-for="imageSize in imageSizeList"
            :key="imageSize.key"
-           @click="handlerSizeClick(imageSize)">
+           @click="handleSizeClick(imageSize)">
         <div :class="selectImageSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
           <div :style="imageSize.style"></div>
         </div>
@@ -91,7 +91,7 @@
                size="large"
                round
                :loading="drawIn"
-               @click="handlerGenerateImage">
+               @click="handleGenerateImage">
       {{drawIn ? '生成中' : '生成内容'}}
     </el-button>
   </div>
@@ -183,10 +183,8 @@ const props = defineProps({})
 // 定义 emits
 const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
 
-// TODO @fan：如果是简单注释，建议用 /** */，主要是现在项目里是这种风格哈，保持一致好点~
-// TODO @fan：handler 应该改成 handle 哈
 /** 热词 - click  */
-const handlerHotWordClick = async (hotWord: string) => {
+const handleHotWordClick = async (hotWord: string) => {
   // 取消选中
   if (selectHotWord.value == hotWord) {
     selectHotWord.value = ''
@@ -199,22 +197,22 @@ const handlerHotWordClick = async (hotWord: string) => {
 }
 
 /**  模型 - click  */
-const handlerModelClick = async (model: ImageModelVO) => {
+const handleModelClick = async (model: ImageModelVO) => {
   selectModel.value = model.key
 }
 
 /**  样式 - click  */
-const handlerStyleClick = async (imageStyle: ImageModelVO) => {
+const handleStyleClick = async (imageStyle: ImageModelVO) => {
   selectImageStyle.value = imageStyle.key
 }
 
 /**  size - click  */
-const handlerSizeClick = async (imageSize: ImageSizeVO) => {
+const handleSizeClick = async (imageSize: ImageSizeVO) => {
   selectImageSize.value = imageSize.key
 }
 
 /**  图片生产  */
-const handlerGenerateImage = async () => {
+const handleGenerateImage = async () => {
   // 二次确认
   await message.confirm(`确认生成内容?`)
   try {
@@ -251,15 +249,14 @@ const settingValues = async (imageDetail: ImageVO) => {
   selectImageStyle.value = imageDetail.options?.style
   //
   const imageSize = imageSizeList.value.find(item => item.key === `${imageDetail.width}x${imageDetail.height}`) as ImageSizeVO
-  console.log('imageSize', imageSize)
+  await handleSizeClick(imageSize)
-  await handlerSizeClick(imageSize)
 }
 
 /** 暴露组件方法 */
 defineExpose({ settingValues })
+
 </script>
 <style scoped lang="scss">
-
 // 提示词
 .prompt {
 }

src/views/ai/image/index.vue

@@ -9,8 +9,8 @@
         <Dall3
           v-if="selectPlatform === AiPlatformEnum.OPENAI"
           ref="dall3Ref"
-          @on-draw-start="handlerDrawStart"
+          @on-draw-start="handleDrawStart"
-          @on-draw-complete="handlerDrawComplete"
+          @on-draw-complete="handleDrawComplete"
         />
         <Midjourney
           v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
@@ -19,12 +19,12 @@
         <StableDiffusion
           v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
           ref="stableDiffusionRef"
-          @on-draw-complete="handlerDrawComplete"
+          @on-draw-complete="handleDrawComplete"
         />
       </div>
     </div>
     <div class="main">
-      <ImageTask ref="imageTaskRef" @on-regeneration="handlerRegeneration" />
+      <ImageTask ref="imageTaskRef" @on-regeneration="handleRegeneration" />
     </div>
   </div>
 </template>
@@ -63,20 +63,20 @@ const platformOptions = [
 const drawIn = ref<boolean>(false) // 生成中
 
 /**  绘画 - start  */
-const handlerDrawStart = async (type) => {
+const handleDrawStart = async (type) => {
   // todo @fan：这个是不是没用啦？
   drawIn.value = true
 }
 
 /**  绘画 - complete  */
-const handlerDrawComplete = async (type) => {
+const handleDrawComplete = async (type) => {
   drawIn.value = false
   // todo
   await imageTaskRef.value.getImageList()
 }
 
 /**  绘画 - 重新生成  */
-const handlerRegeneration = async (imageDetail: ImageVO) => {
+const handleRegeneration = async (imageDetail: ImageVO) => {
   // 切换平台
   selectPlatform.value = imageDetail.platform
   console.log('切换平台', imageDetail.platform)

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

@@ -24,7 +24,7 @@
                  :type="(selectHotWord === hotWord ? 'primary' : 'default')"
                  v-for="hotWord in hotWords"
                  :key="hotWord"
-                 @click="handlerHotWordClick(hotWord)"
+                 @click="handleHotWordClick(hotWord)"
       >
         {{ hotWord }}
       </el-button>
@@ -38,7 +38,7 @@
       <div class="size-item"
            v-for="imageSize in imageSizeList"
            :key="imageSize.key"
-           @click="handlerSizeClick(imageSize)">
+           @click="handleSizeClick(imageSize)">
         <div :class="selectImageSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
           <div :style="imageSize.style"></div>
         </div>
@@ -57,7 +57,7 @@
         clearable
         placeholder="请选择版本"
         style="width: 350px"
-        @change="handlerChangeVersion"
+        @change="handleChangeVersion"
       >
         <el-option
           v-for="item in versionList"
@@ -82,7 +82,7 @@
         <el-image
           :src="model.image"
           fit="contain"
-          @click="handlerModelClick(model)"
+          @click="handleModelClick(model)"
         />
         <div class="model-font">{{model.name}}</div>
       </div>
@@ -98,7 +98,7 @@
   </div>
   <div class="btns">
     <!--    <el-button size="large" round>重置内容</el-button>-->
-    <el-button type="primary" size="large" round @click="handlerGenerateImage">生成内容</el-button>
+    <el-button type="primary" size="large" round @click="handleGenerateImage">生成内容</el-button>
   </div>
 </template>
 <script setup lang="ts">
@@ -211,7 +211,7 @@ let versionList = ref<any>([]) // version 列表
 versionList.value = midjourneyVersionList.value // 默认选择 midjourney
 
 /**  热词 - click  */
-const handlerHotWordClick = async (hotWord: string) => {
+const handleHotWordClick = async (hotWord: string) => {
   // 取消
   if (selectHotWord.value == hotWord) {
     selectHotWord.value = ''
@@ -224,12 +224,12 @@ const handlerHotWordClick = async (hotWord: string) => {
 }
 
 /**  size - click  */
-const handlerSizeClick = async (imageSize: ImageSizeVO) => {
+const handleSizeClick = async (imageSize: ImageSizeVO) => {
   selectImageSize.value = imageSize.key
 }
 
 /**  模型 - click  */
-const handlerModelClick = async (model: ImageModelVO) => {
+const handleModelClick = async (model: ImageModelVO) => {
   selectModel.value = model.key
   if (model.key === 'niji') {
     versionList.value = nijiVersionList.value // 默认选择 niji
@@ -240,21 +240,20 @@ const handlerModelClick = async (model: ImageModelVO) => {
 }
 
 /**  version - click  */
-const handlerChangeVersion = async (version) => {
+const handleChangeVersion = async (version) => {
   console.log('version', version)
 }
 
 /** 图片生产  */
-const handlerGenerateImage = async () => {
+const handleGenerateImage = async () => {
   // 二次确认
   await message.confirm(`确认生成内容?`)
   // todo @范 图片生产逻辑
   try {
-    console.log('referImage.value', referImage.value)
     // 回调
     emits('onDrawStart', selectModel.value)
     // 发送请求
-    const imageSize = imageSizeList.value.find(item => selectImageSize === item.key) as ImageSizeVO
+    const imageSize = imageSizeList.value.find(item => selectImageSize.value === item.key) as ImageSizeVO
     const req = {
       prompt: prompt.value,
       model: selectModel.value,
@@ -279,7 +278,7 @@ const settingValues = async (imageDetail: ImageVO) => {
   selectImageSize.value = imageSize.key
   // 选中模型
   const model = models.value.find(item => item.key === imageDetail.options?.model) as ImageModelVO
-  await handlerModelClick(model)
+  await handleModelClick(model)
   // 版本
   selectVersion.value = versionList.value.find(item => item.value === imageDetail.options?.version).value
   // image

src/views/ai/image/stable-diffusion/index.vue

@@ -351,7 +351,7 @@ const handleGenerateImage = async () => {
         steps: steps.value, // 图片生成步数
         scale: scale.value, // 引导系数
         sampler: selectSampler.value, // 采样算法
-        clipGuidancePreset: selectClipGuidancePreset.value.key, // 文本提示相匹配的图像 CLIP
+        clipGuidancePreset: selectClipGuidancePreset.value, // 文本提示相匹配的图像 CLIP
         stylePreset: selectStylePreset.value, // 风格
       }
     } as ImageDrawReqVO