【解决todo】handle命名

b6ff9ede · cherishsince · bb34c2b7 · b6ff9ede · b6ff9ede · b6ff9ede
Commit b6ff9ede authored Jul 04, 2024 by cherishsince
7 changed files
--- a/src/views/ai/image/ImageDetailDrawer.vue
+++ b/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>

--- a/src/views/ai/image/ImageTask.vue
+++ b/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)
 }

--- a/src/views/ai/image/ImageTaskCard.vue
+++ b/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>

--- a/src/views/ai/image/dall3/index.vue
+++ b/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 {
 }

--- a/src/views/ai/image/index.vue
+++ b/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)

--- a/src/views/ai/image/midjourney/index.vue
+++ b/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

--- a/src/views/ai/image/stable-diffusion/index.vue
+++ b/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