yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【解决todo】handle命名

pull/470/MERGE
cherishsince 2024-07-04 16:01:08 +08:00
parent bb34c2b75c
commit b6ff9ede11
7 changed files with 57 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/ai/image/ImageDetailDrawer.vue
View File

@ -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 () => {
emits('handlerDrawerClose')
const handleDrawerClose = async () => {
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>

20
src/views/ai/image/ImageTask.vue
View File

@ -6,8 +6,8 @@
v-for="image in imageList"
:key="image"
:image-detail="image"
@on-btn-click="handlerImageBtnClick"
@on-mj-btn-click="handlerImageMjBtnClick"
@on-btn-click="handleImageBtnClick"
@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)
}

20
src/views/ai/image/ImageTaskCard.vue
View File

@ -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>

27
src/views/ai/image/dall3/index.vue
View File

@ -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 handlerSizeClick(imageSize)
await handleSizeClick(imageSize)
}
/** 暴露组件方法 */
defineExpose({ settingValues })
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}

14
src/views/ai/image/index.vue
View File

@ -9,8 +9,8 @@
<Dall3
v-if="selectPlatform === AiPlatformEnum.OPENAI"
ref="dall3Ref"
@on-draw-start="handlerDrawStart"
@on-draw-complete="handlerDrawComplete"
@on-draw-start="handleDrawStart"
@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)

25
src/views/ai/image/midjourney/index.vue
View File

@ -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

2
src/views/ai/image/stable-diffusion/index.vue
View File

@ -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