feat：【AI 大模型】image/index/ImageCard 重构成 unocss

Author: YunaiV

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"

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>