From 9a209a8249480f91cb0ea5b6faa26ae979676c72 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 27 Jul 2025 16:15:13 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90AI=20=E5=A4=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E3=80=91image/index/ImageCard=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=88=90=20unocss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai/image/index/components/ImageCard.vue   | 21 +++++----
 src/views/ai/image/square/index.vue           | 47 ++-----------------
 2 files changed, 17 insertions(+), 51 deletions(-)

diff --git a/src/views/ai/image/index/components/ImageCard.vue b/src/views/ai/image/index/components/ImageCard.vue
index d8a543758..9a5632ec1 100644
--- a/src/views/ai/image/index/components/ImageCard.vue
+++ b/src/views/ai/image/index/components/ImageCard.vue
@@ -1,6 +1,9 @@
 <template>
-  <el-card body-class="" style="width: 320px; height: auto; border-radius: 10px; position: relative; display: flex; flex-direction: column;">
-    <div style="display: flex; flex-direction: row; justify-content: space-between;">
+  <el-card
+    body-class=""
+    class="!w-80 !h-auto !rounded-10px !relative !flex !flex-col"
+  >
+    <div class="!flex !flex-row !justify-between">
       <div>
         <el-button type="primary" text bg v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
           生成中
@@ -15,34 +18,34 @@
       <!-- 操作区 -->
       <div>
         <el-button
-          style="padding: 10px; margin: 0;"
+          class="!p-10px !m-0"
           text
           :icon="Download"
           @click="handleButtonClick('download', detail)"
         />
         <el-button
-          style="padding: 10px; margin: 0;"
+          class="!p-10px !m-0"
           text
           :icon="RefreshRight"
           @click="handleButtonClick('regeneration', detail)"
         />
         <el-button
-          style="padding: 10px; margin: 0;"
+          class="!p-10px !m-0"
           text
           :icon="Delete"
           @click="handleButtonClick('delete', detail)"
         />
         <el-button
-          style="padding: 10px; margin: 0;"
+          class="!p-10px !m-0"
           text
           :icon="More"
           @click="handleButtonClick('more', detail)"
         />
       </div>
     </div>
-    <div style="overflow: hidden; margin-top: 20px; height: 280px; flex: 1;" ref="cardImageRef">
+    <div class="!overflow-hidden !mt-20px !h-280px !flex-1" ref="cardImageRef">
       <el-image
-        style="width: 100%; border-radius: 10px;"
+        class="!w-full !rounded-10px"
         :src="detail?.picUrl"
         :preview-src-list="[detail.picUrl]"
         preview-teleported
@@ -52,7 +55,7 @@
       </div>
     </div>
     <!-- Midjourney 专属操作 -->
-    <div style="margin-top: 5px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;">
+    <div class="!mt-5px !w-full !flex !flex-row !flex-wrap !justify-start">
       <el-button
         size="small"
         v-for="button in detail?.buttons"
diff --git a/src/views/ai/image/square/index.vue b/src/views/ai/image/square/index.vue
index 3da6cdefc..0f82c48a9 100644
--- a/src/views/ai/image/square/index.vue
+++ b/src/views/ai/image/square/index.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="square-container">
+  <div class="bg-white p-20px">
     <!-- TODO @fan：style 建议换成 unocss -->
     <!-- TODO @fan：Search 可以换成 Icon 组件么？ -->
     <el-input
       v-model="queryParams.prompt"
-      style="width: 100%; margin-bottom: 20px"
+      class="!w-full !mb-20px"
       size="large"
       placeholder="请输入要搜索的内容"
       :suffix-icon="Search"
       @keyup.enter="handleQuery"
     />
-    <div class="gallery">
+    <div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-10px bg-white shadow-[0_0_10px_rgba(0,0,0,0.1)]">
       <!-- TODO @fan：这个图片的风格，要不和 ImageCard.vue 界面一致？（只有卡片，没有操作）；因为看着更有相框的感觉~~~ -->
-      <div v-for="item in list" :key="item.id" class="gallery-item">
-        <img :src="item.picUrl" class="img" />
+      <div v-for="item in list" :key="item.id" class="relative overflow-hidden bg-gray-100 cursor-pointer transition-transform duration-300 hover:scale-105">
+        <img :src="item.picUrl" class="w-full h-auto block transition-transform duration-300 hover:scale-110" />
       </div>
     </div>
     <!-- TODO @fan：缺少翻页 -->
@@ -64,41 +64,4 @@ onMounted(async () => {
   await getList()
 })
 </script>
-<style scoped lang="scss">
-.square-container {
-  background-color: #fff;
-  padding: 20px;
 
-  .gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-    //max-width: 1000px;
-    background-color: #fff;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  }
-
-  .gallery-item {
-    position: relative;
-    overflow: hidden;
-    background: #f0f0f0;
-    cursor: pointer;
-    transition: transform 0.3s;
-  }
-
-  .gallery-item img {
-    width: 100%;
-    height: auto;
-    display: block;
-    transition: transform 0.3s;
-  }
-
-  .gallery-item:hover img {
-    transform: scale(1.1);
-  }
-
-  .gallery-item:hover {
-    transform: scale(1.05);
-  }
-}
-</style>