xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端兼容优化

Browse Source
This commit is contained in:
Gsh
2026-01-03 22:58:30 +08:00
parent 63aa8d9536
commit 158226601b
7 changed files with 305 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Yi.Ai.Vue3/src/pages/chat/image/components/ImagePlaza.vue
View File

@@ -489,11 +489,19 @@ watch(dateRange, () => {
</div>
</div>
<!-- Download Button Overlay -->
<div v-if="currentTask.storeUrl" class="absolute bottom-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
<!-- Desktop Button Overlay -->
<div v-if="currentTask.storeUrl" class="hidden md:flex absolute bottom-4 right-4 gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
<el-button circle type="primary" :icon="ZoomIn" @click="handlePreview(currentTask.storeUrl)" />
<el-button circle type="primary" :icon="Download" @click="downloadImage(currentTask.storeUrl)" />
</div>
<!-- Mobile Button Overlay -->
<div v-if="currentTask.storeUrl" class="md:hidden absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 z-10">
<div class="flex items-center justify-center gap-2">
<el-button circle type="primary" :icon="ZoomIn" @click="handlePreview(currentTask.storeUrl)" />
<el-button circle type="primary" :icon="Download" @click="downloadImage(currentTask.storeUrl)" />
</div>
</div>
</div>
<!-- Right Info -->

49
Yi.Ai.Vue3/src/pages/chat/image/components/MyImages.vue
View File

@@ -555,11 +555,19 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</div>
</div>
<!-- Download Button Overlay -->
<div v-if="currentTask.storeUrl" class="absolute bottom-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
<!-- Desktop Button Overlay -->
<div v-if="currentTask.storeUrl" class="hidden md:flex absolute bottom-4 right-4 gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
<el-button circle type="primary" :icon="ZoomIn" @click="handlePreview(currentTask.storeUrl)" />
<el-button circle type="primary" :icon="Download" @click="downloadImage(currentTask.storeUrl)" />
</div>
<!-- Mobile Button Overlay -->
<div v-if="currentTask.storeUrl" class="md:hidden absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 z-10">
<div class="flex items-center justify-center gap-2">
<el-button circle type="primary" :icon="ZoomIn" @click="handlePreview(currentTask.storeUrl)" />
<el-button circle type="primary" :icon="Download" @click="downloadImage(currentTask.storeUrl)" />
</div>
</div>
</div>
<!-- Right Info -->
@@ -637,28 +645,21 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
<el-tag size="small" type="info" effect="plain">未发布</el-tag>
</div>
<div v-if="currentTask.taskStatus === 'Success'" class="pt-2 space-y-2">
<div class="grid grid-cols-1 gap-1">
<el-button
type="primary"
plain
:icon="MagicStick"
@click="$emit('use-prompt', currentTask.prompt)"
>
使用提示词
</el-button>
<el-button
v-if="false"
type="primary"
plain
:icon="Picture"
@click="$emit('use-reference', currentTask.storeUrl)"
>
做参考图
</el-button>
</div>
<!-- 操作按钮 - 所有状态都可以使用提示词 -->
<div class="pt-2 space-y-2">
<el-button
v-if="currentTask.publishStatus === 'Unpublished'"
type="primary"
plain
:icon="MagicStick"
class="w-full"
@click="$emit('use-prompt', currentTask.prompt); dialogVisible = false"
>
使用提示词
</el-button>
<!-- 成功状态才显示发布按钮 -->
<el-button
v-if="currentTask.taskStatus === 'Success' && currentTask.publishStatus === 'Unpublished'"
type="success"
class="w-full"
:icon="Share"
@@ -666,7 +667,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
>
发布到广场
</el-button>
<el-button v-else type="info" disabled class="w-full">
<el-button v-else-if="currentTask.taskStatus === 'Success'" type="info" disabled class="w-full">
已发布
</el-button>
</div>

24
Yi.Ai.Vue3/src/pages/chat/image/components/TaskCard.vue
View File

@@ -129,7 +129,7 @@ async function handleDownload() {
</div>
<!-- Mobile Actions Bar -->
<div v-if="task.taskStatus === 'Success'" class="absolute bottom-0 left-0 right-0 md:hidden bg-gradient-to-t from-black/70 to-transparent p-2 z-20">
<div class="absolute bottom-0 left-0 right-0 md:hidden bg-gradient-to-t from-black/70 to-transparent p-2 z-20">
<div class="flex items-center justify-between gap-2">
<el-button
type="primary"
@@ -140,16 +140,18 @@ async function handleDownload() {
>
查看详情
</el-button>
<el-button circle size="small" :icon="ZoomIn" @click.stop="handlePreview" />
<el-button circle size="small" :icon="Download" @click.stop="handleDownload" />
<el-button
v-if="showPublishStatus && task.publishStatus === 'Unpublished'"
circle
size="small"
type="success"
:icon="Share"
@click.stop="$emit('publish', task)"
/>
<template v-if="task.taskStatus === 'Success'">
<el-button circle size="small" :icon="ZoomIn" @click.stop="handlePreview" />
<el-button circle size="small" :icon="Download" @click.stop="handleDownload" />
<el-button
v-if="showPublishStatus && task.publishStatus === 'Unpublished'"
circle
size="small"
type="success"
:icon="Share"
@click.stop="$emit('publish', task)"
/>
</template>
</div>
</div>