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

feat：【AI 大模型】image/index/ImageCard 先换成 style

pull/804/head
YunaiV 2025-07-27 11:31:15 +08:00
parent fc44958cc5
commit f63ac7bae9
1 changed files with 19 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/ai/image/index/components/ImageCard.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-card body-class="" class="image-card"> <el-card body-class="" style="width: 320px; height: auto; border-radius: 10px; position: relative; display: flex; flex-direction: column;">
<div class="image-operation"> <div style="display: flex; flex-direction: row; justify-content: space-between;">
<div> <div>
<el-button type="primary" text bg v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS"> <el-button type="primary" text bg v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
生成中 生成中
@ -15,24 +15,34 @@
<!-- 操作区 --> <!-- 操作区 -->
<div> <div>
<el-button <el-button
class="btn" style="padding: 10px; margin: 0;"
text text
:icon="Download" :icon="Download"
@click="handleButtonClick('download', detail)" @click="handleButtonClick('download', detail)"
/> />
<el-button <el-button
class="btn" style="padding: 10px; margin: 0;"
text text
:icon="RefreshRight" :icon="RefreshRight"
@click="handleButtonClick('regeneration', detail)" @click="handleButtonClick('regeneration', detail)"
/> />
<el-button class="btn" text :icon="Delete" @click="handleButtonClick('delete', detail)" /> <el-button
<el-button class="btn" text :icon="More" @click="handleButtonClick('more', detail)" /> style="padding: 10px; margin: 0;"
text
:icon="Delete"
@click="handleButtonClick('delete', detail)"
/>
<el-button
style="padding: 10px; margin: 0;"
text
:icon="More"
@click="handleButtonClick('more', detail)"
/>
</div> </div>
</div> </div>
<div class="image-wrapper" ref="cardImageRef"> <div style="overflow: hidden; margin-top: 20px; height: 280px; flex: 1;" ref="cardImageRef">
<el-image <el-image
class="image" style="width: 100%; border-radius: 10px;"
:src="detail?.picUrl" :src="detail?.picUrl"
:preview-src-list="[detail.picUrl]" :preview-src-list="[detail.picUrl]"
preview-teleported preview-teleported
@ -42,7 +52,7 @@
</div> </div>
</div> </div>
<!-- Midjourney 专属操作 --> <!-- Midjourney 专属操作 -->
<div class="image-mj-btns"> <div style="margin-top: 5px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;">
<el-button <el-button
size="small" size="small"
v-for="button in detail?.buttons" v-for="button in detail?.buttons"
@ -116,47 +126,3 @@ onMounted(async () => {
await handleLoading(props.detail.status as string) await handleLoading(props.detail.status as string)
}) })
</script> </script>
<style scoped lang="scss">
.image-card {
width: 320px;
height: auto;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
.image-operation {
display: flex;
flex-direction: row;
justify-content: space-between;
.btn {
//border: 1px solid red;
padding: 10px;
margin: 0;
}
}
.image-wrapper {
overflow: hidden;
margin-top: 20px;
height: 280px;
flex: 1;
.image {
width: 100%;
border-radius: 10px;
}
}
.image-mj-btns {
margin-top: 5px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
}
</style>