feat: 图片广场优化

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

@@ -13,11 +13,12 @@ import {
   Search,
   User,
   WarningFilled,
+  ZoomIn,
 } from '@element-plus/icons-vue';
 import { useClipboard } from '@vueuse/core';
 import { format } from 'date-fns';
 import { ElMessage } from 'element-plus';
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { getImagePlaza } from '@/api/aiImage';
 import TaskCard from './TaskCard.vue';
 
@@ -31,6 +32,22 @@ const noMore = ref(false);
 const dialogVisible = ref(false);
 const currentTask = ref<TaskItem | null>(null);
 
+// Mobile detection
+const isMobile = ref(false);
+
+function checkMobile() {
+  isMobile.value = window.innerWidth < 768;
+}
+
+onMounted(() => {
+  checkMobile();
+  window.addEventListener('resize', checkMobile);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile);
+});
+
 // Mobile filter drawer
 const showMobileFilter = ref(false);
 
@@ -424,12 +441,13 @@ watch(dateRange, () => {
     <el-dialog
       v-model="dialogVisible"
       title="图片详情"
-      width="900px"
+      :width="isMobile ? '95%' : '900px'"
+      :fullscreen="isMobile"
       append-to-body
       class="image-detail-dialog"
       align-center
     >
-      <div v-if="currentTask" class="flex flex-col md:flex-row gap-6 h-[600px]">
+      <div v-if="currentTask" class="flex flex-col md:flex-row gap-4 md:gap-6 h-auto md:h-[600px]">
         <!-- Left Image -->
         <div class="flex-1 bg-black/5 rounded-lg flex items-center justify-center overflow-hidden relative group">
           <el-image
@@ -472,7 +490,8 @@ watch(dateRange, () => {
           </div>
 
           <!-- Download Button Overlay -->
-          <div v-if="currentTask.storeUrl" class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+          <div v-if="currentTask.storeUrl" class="absolute bottom-4 right-4 flex 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>
         </div>
@@ -497,6 +516,36 @@ watch(dateRange, () => {
           </div>
 
           <div class="mt-auto space-y-3 pt-4 border-t border-gray-100 shrink-0">
+            <!-- 分类标签 -->
+            <div v-if="currentTask.categories && currentTask.categories.length > 0" class="space-y-2">
+              <div class="flex items-center gap-2 text-sm text-gray-500">
+                <el-icon><CollectionTag /></el-icon>
+                <span>分类标签</span>
+              </div>
+              <div class="flex flex-wrap gap-1">
+                <el-tag
+                  v-for="tag in currentTask.categories"
+                  :key="tag"
+                  size="small"
+                  type="info"
+                  effect="plain"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+            </div>
+
+            <!-- 用户信息 -->
+            <div class="flex justify-between text-sm">
+              <span class="text-gray-500">创建者</span>
+              <span v-if="!currentTask.isAnonymous && currentTask.userName" class="text-blue-500 flex items-center gap-1">
+                <el-icon><User /></el-icon> {{ currentTask.userName }}
+              </span>
+              <span v-else class="text-gray-400 flex items-center gap-1">
+                <el-icon><User /></el-icon> 匿名用户
+              </span>
+            </div>
+
             <div class="flex justify-between text-sm">
               <span class="text-gray-500">创建时间</span>
               <span class="text-gray-800">{{ formatTime(currentTask.creationTime) }}</span>