From fc44958cc513e04018dd85f23eb00943206a2163 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 27 Jul 2025 11:10:03 +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/components=20=E4=B8=8B=E7=9A=84?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20unocss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../image/index/components/common/index.vue   |  55 ++----
 .../ai/image/index/components/dall3/index.vue | 165 ++----------------
 .../index/components/midjourney/index.vue     | 150 ++--------------
 .../components/stableDiffusion/index.vue      |  75 ++------
 src/views/ai/write/index/components/Tag.vue   |   1 -
 5 files changed, 63 insertions(+), 383 deletions(-)

diff --git a/src/views/ai/image/index/components/common/index.vue b/src/views/ai/image/index/components/common/index.vue
index 57c47b0eb..6af1caff6 100644
--- a/src/views/ai/image/index/components/common/index.vue
+++ b/src/views/ai/image/index/components/common/index.vue
@@ -14,14 +14,14 @@
       type="textarea"
     />
   </div>
-  <div class="hot-words">
+  <div class="flex flex-col mt-30px">
     <div>
       <el-text tag="b">随机热词</el-text>
     </div>
-    <el-space wrap class="word-list">
+    <el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
       <el-button
         round
-        class="btn"
+        class="m-0"
         :type="selectHotWord === hotWord ? 'primary' : 'default'"
         v-for="hotWord in ImageHotWords"
         :key="hotWord"
@@ -31,11 +31,11 @@
       </el-button>
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">平台</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-select
         v-model="otherPlatform"
         placeholder="Select"
@@ -52,11 +52,11 @@
       </el-select>
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">模型</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-select v-model="modelId" placeholder="Select" size="large" class="!w-350px">
         <el-option
           v-for="item in platformModels"
@@ -67,16 +67,16 @@
       </el-select>
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">图片尺寸</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-input v-model="width" type="number" class="w-170px" placeholder="图片宽度" />
       <el-input v-model="height" type="number" class="w-170px" placeholder="图片高度" />
     </el-space>
   </div>
-  <div class="btns">
+  <div class="flex justify-center mt-50px">
     <el-button
       type="primary"
       size="large"
@@ -187,38 +187,3 @@ watch(
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
-<style scoped lang="scss">
-.hot-words {
-  display: flex;
-  flex-direction: column;
-  margin-top: 30px;
-
-  .word-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
-    margin-top: 15px;
-
-    .btn {
-      margin: 0;
-    }
-  }
-}
-
-// 模型
-.group-item {
-  margin-top: 30px;
-
-  .group-item-body {
-    margin-top: 15px;
-    width: 100%;
-  }
-}
-
-.btns {
-  display: flex;
-  justify-content: center;
-  margin-top: 50px;
-}
-</style>
diff --git a/src/views/ai/image/index/components/dall3/index.vue b/src/views/ai/image/index/components/dall3/index.vue
index efa41edb0..07a35e846 100644
--- a/src/views/ai/image/index/components/dall3/index.vue
+++ b/src/views/ai/image/index/components/dall3/index.vue
@@ -14,14 +14,14 @@
       type="textarea"
     />
   </div>
-  <div class="hot-words">
+  <div class="flex flex-col mt-30px">
     <div>
       <el-text tag="b">随机热词</el-text>
     </div>
-    <el-space wrap class="word-list">
+    <el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
       <el-button
         round
-        class="btn"
+        class="m-0"
         :type="selectHotWord === hotWord ? 'primary' : 'default'"
         v-for="hotWord in ImageHotWords"
         :key="hotWord"
@@ -31,57 +31,57 @@
       </el-button>
     </el-space>
   </div>
-  <div class="model">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">模型选择</el-text>
     </div>
-    <el-space wrap class="model-list">
+    <el-space wrap class="mt-15px">
       <div
-        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
+        :class="selectModel === model.key ? 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-#1293ff rounded-5px cursor-pointer' : 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-transparent cursor-pointer'"
         v-for="model in Dall3Models"
         :key="model.key"
       >
         <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
-        <div class="model-font">{{ model.name }}</div>
+        <div class="text-14px color-#3e3e3e font-bold">{{ model.name }}</div>
       </div>
     </el-space>
   </div>
-  <div class="image-style">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">风格选择</el-text>
     </div>
-    <el-space wrap class="image-style-list">
+    <el-space wrap class="mt-15px">
       <div
-        :class="style === imageStyle.key ? 'image-style-item selectImageStyle' : 'image-style-item'"
+        :class="style === imageStyle.key ? 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-#1293ff rounded-5px cursor-pointer' : 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-transparent cursor-pointer'"
         v-for="imageStyle in Dall3StyleList"
         :key="imageStyle.key"
       >
         <el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
-        <div class="style-font">{{ imageStyle.name }}</div>
+        <div class="text-14px color-#3e3e3e font-bold">{{ imageStyle.name }}</div>
       </div>
     </el-space>
   </div>
-  <div class="image-size">
+  <div class="w-full mt-30px">
     <div>
       <el-text tag="b">画面比例</el-text>
     </div>
-    <el-space wrap class="size-list">
+    <el-space wrap class="flex flex-row justify-between w-full mt-20px">
       <div
-        class="size-item"
+        class="flex flex-col items-center cursor-pointer"
         v-for="imageSize in Dall3SizeList"
         :key="imageSize.key"
         @click="handleSizeClick(imageSize)"
       >
         <div
-          :class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
+          :class="selectSize === imageSize.key ? 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-#1293ff' : 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-white'"
         >
           <div :style="imageSize.style"></div>
         </div>
-        <div class="size-font">{{ imageSize.name }}</div>
+        <div class="text-14px color-#3e3e3e font-bold">{{ imageSize.name }}</div>
       </div>
     </el-space>
   </div>
-  <div class="btns">
+  <div class="flex justify-center mt-50px">
     <el-button
       type="primary"
       size="large"
@@ -229,135 +229,4 @@ const settingValues = async (detail: ImageVO) => {
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
-<style scoped lang="scss">
-// 热词
-.hot-words {
-  display: flex;
-  flex-direction: column;
-  margin-top: 30px;
 
-  .word-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
-    margin-top: 15px;
-
-    .btn {
-      margin: 0;
-    }
-  }
-}
-
-// 模型
-.model {
-  margin-top: 30px;
-
-  .model-list {
-    margin-top: 15px;
-
-    .modal-item {
-      width: 110px;
-      //outline: 1px solid blue;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      border: 3px solid transparent;
-      cursor: pointer;
-
-      .model-font {
-        font-size: 14px;
-        color: #3e3e3e;
-        font-weight: bold;
-      }
-    }
-
-    .selectModel {
-      border: 3px solid #1293ff;
-      border-radius: 5px;
-    }
-  }
-}
-
-// 样式 style
-.image-style {
-  margin-top: 30px;
-
-  .image-style-list {
-    margin-top: 15px;
-
-    .image-style-item {
-      width: 110px;
-      //outline: 1px solid blue;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      border: 3px solid transparent;
-      cursor: pointer;
-
-      .style-font {
-        font-size: 14px;
-        color: #3e3e3e;
-        font-weight: bold;
-      }
-    }
-
-    .selectImageStyle {
-      border: 3px solid #1293ff;
-      border-radius: 5px;
-    }
-  }
-}
-
-// 尺寸
-.image-size {
-  width: 100%;
-  margin-top: 30px;
-
-  .size-list {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 20px;
-
-    .size-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      cursor: pointer;
-
-      .size-wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        border-radius: 7px;
-        padding: 4px;
-        width: 50px;
-        height: 50px;
-        background-color: #fff;
-        border: 1px solid #fff;
-      }
-
-      .size-font {
-        font-size: 14px;
-        color: #3e3e3e;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .selectImageSize {
-    border: 1px solid #1293ff !important;
-  }
-}
-
-.btns {
-  display: flex;
-  justify-content: center;
-  margin-top: 50px;
-}
-</style>
diff --git a/src/views/ai/image/index/components/midjourney/index.vue b/src/views/ai/image/index/components/midjourney/index.vue
index adfcb90dd..d59a83a0c 100644
--- a/src/views/ai/image/index/components/midjourney/index.vue
+++ b/src/views/ai/image/index/components/midjourney/index.vue
@@ -14,14 +14,14 @@
       type="textarea"
     />
   </div>
-  <div class="hot-words">
+  <div class="flex flex-col mt-30px">
     <div>
       <el-text tag="b">随机热词</el-text>
     </div>
-    <el-space wrap class="word-list">
+    <el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
       <el-button
         round
-        class="btn"
+        class="m-0"
         :type="selectHotWord === hotWord ? 'primary' : 'default'"
         v-for="hotWord in ImageHotWords"
         :key="hotWord"
@@ -31,49 +31,49 @@
       </el-button>
     </el-space>
   </div>
-  <div class="image-size">
+  <div class="w-full mt-30px">
     <div>
       <el-text tag="b">尺寸</el-text>
     </div>
-    <el-space wrap class="size-list">
+    <el-space wrap class="flex flex-row justify-between w-full mt-20px">
       <div
-        class="size-item"
+        class="flex flex-col items-center cursor-pointer"
         v-for="imageSize in MidjourneySizeList"
         :key="imageSize.key"
         @click="handleSizeClick(imageSize)"
       >
         <div
-          :class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
+          :class="selectSize === imageSize.key ? 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-#1293ff' : 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-white'"
         >
           <div :style="imageSize.style"></div>
         </div>
-        <div class="size-font">{{ imageSize.key }}</div>
+        <div class="text-14px color-#3e3e3e font-bold">{{ imageSize.key }}</div>
       </div>
     </el-space>
   </div>
-  <div class="model">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">模型</el-text>
     </div>
-    <el-space wrap class="model-list">
+    <el-space wrap class="mt-15px">
       <div
-        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
+        :class="selectModel === model.key ? 'flex flex-col items-center w-150px overflow-hidden border-3 border-solid border-#1293ff rounded-5px cursor-pointer' : 'flex flex-col items-center w-150px overflow-hidden border-3 border-solid border-transparent cursor-pointer'"
         v-for="model in MidjourneyModels"
         :key="model.key"
       >
         <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
-        <div class="model-font">{{ model.name }}</div>
+        <div class="text-14px color-#3e3e3e font-bold">{{ model.name }}</div>
       </div>
     </el-space>
   </div>
-  <div class="version">
+  <div class="mt-20px">
     <div>
       <el-text tag="b">版本</el-text>
     </div>
-    <el-space wrap class="version-list">
+    <el-space wrap class="mt-20px w-full">
       <el-select
         v-model="selectVersion"
-        class="version-select !w-350px"
+        class="!w-350px"
         clearable
         placeholder="请选择版本"
       >
@@ -86,15 +86,15 @@
       </el-select>
     </el-space>
   </div>
-  <div class="model">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">参考图</el-text>
     </div>
-    <el-space wrap class="model-list">
+    <el-space wrap class="mt-15px">
       <UploadImg v-model="referImageUrl" height="120px" width="120px" />
     </el-space>
   </div>
-  <div class="btns">
+  <div class="flex justify-center mt-50px">
     <el-button
       type="primary"
       size="large"
@@ -233,118 +233,4 @@ const settingValues = async (detail: ImageVO) => {
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
-<style scoped lang="scss">
-// 提示词
-.prompt {
-}
 
-// 热词
-.hot-words {
-  display: flex;
-  flex-direction: column;
-  margin-top: 30px;
-
-  .word-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
-    margin-top: 15px;
-
-    .btn {
-      margin: 0;
-    }
-  }
-}
-
-// version
-.version {
-  margin-top: 20px;
-
-  .version-list {
-    margin-top: 20px;
-    width: 100%;
-  }
-}
-
-// 模型
-.model {
-  margin-top: 30px;
-
-  .model-list {
-    margin-top: 15px;
-
-    .modal-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 150px;
-      //outline: 1px solid blue;
-      overflow: hidden;
-      border: 3px solid transparent;
-      cursor: pointer;
-
-      .model-font {
-        font-size: 14px;
-        color: #3e3e3e;
-        font-weight: bold;
-      }
-    }
-
-    .selectModel {
-      border: 3px solid #1293ff;
-      border-radius: 5px;
-    }
-  }
-}
-
-// 尺寸
-.image-size {
-  width: 100%;
-  margin-top: 30px;
-
-  .size-list {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 20px;
-
-    .size-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      cursor: pointer;
-
-      .size-wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        border-radius: 7px;
-        padding: 4px;
-        width: 50px;
-        height: 50px;
-        background-color: #fff;
-        border: 1px solid #fff;
-      }
-
-      .size-font {
-        font-size: 14px;
-        color: #3e3e3e;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .selectImageSize {
-    border: 1px solid #1293ff !important;
-  }
-}
-
-.btns {
-  display: flex;
-  justify-content: center;
-  margin-top: 50px;
-}
-</style>
diff --git a/src/views/ai/image/index/components/stableDiffusion/index.vue b/src/views/ai/image/index/components/stableDiffusion/index.vue
index cf5e5bdf4..1fa68d51d 100644
--- a/src/views/ai/image/index/components/stableDiffusion/index.vue
+++ b/src/views/ai/image/index/components/stableDiffusion/index.vue
@@ -14,14 +14,14 @@
       type="textarea"
     />
   </div>
-  <div class="hot-words">
+  <div class="flex flex-col mt-30px">
     <div>
       <el-text tag="b">随机热词</el-text>
     </div>
-    <el-space wrap class="word-list">
+    <el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
       <el-button
         round
-        class="btn"
+        class="m-0"
         :type="selectHotWord === hotWord ? 'primary' : 'default'"
         v-for="hotWord in ImageHotEnglishWords"
         :key="hotWord"
@@ -31,11 +31,11 @@
       </el-button>
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">采样方法</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-select v-model="sampler" placeholder="Select" size="large" class="!w-350px">
         <el-option
           v-for="item in StableDiffusionSamplers"
@@ -46,11 +46,11 @@
       </el-select>
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">CLIP</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-select v-model="clipGuidancePreset" placeholder="Select" size="large" class="!w-350px">
         <el-option
           v-for="item in StableDiffusionClipGuidancePresets"
@@ -61,11 +61,11 @@
       </el-select>
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">风格</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-select v-model="stylePreset" placeholder="Select" size="large" class="!w-350px">
         <el-option
           v-for="item in StableDiffusionStylePresets"
@@ -76,20 +76,20 @@
       </el-select>
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">图片尺寸</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-input v-model="width" class="w-170px" placeholder="图片宽度" />
       <el-input v-model="height" class="w-170px" placeholder="图片高度" />
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">迭代步数</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-input
         v-model="steps"
         type="number"
@@ -99,11 +99,11 @@
       />
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">引导系数</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-input
         v-model="scale"
         type="number"
@@ -113,11 +113,11 @@
       />
     </el-space>
   </div>
-  <div class="group-item">
+  <div class="mt-30px">
     <div>
       <el-text tag="b">随机因子</el-text>
     </div>
-    <el-space wrap class="group-item-body">
+    <el-space wrap class="mt-15px w-full">
       <el-input
         v-model="seed"
         type="number"
@@ -127,7 +127,7 @@
       />
     </el-space>
   </div>
-  <div class="btns">
+  <div class="flex justify-center mt-50px">
     <el-button
       type="primary"
       size="large"
@@ -254,43 +254,4 @@ const settingValues = async (detail: ImageVO) => {
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
-<style scoped lang="scss">
-// 提示词
-.prompt {
-}
 
-// 热词
-.hot-words {
-  display: flex;
-  flex-direction: column;
-  margin-top: 30px;
-
-  .word-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
-    margin-top: 15px;
-
-    .btn {
-      margin: 0;
-    }
-  }
-}
-
-// 模型
-.group-item {
-  margin-top: 30px;
-
-  .group-item-body {
-    margin-top: 15px;
-    width: 100%;
-  }
-}
-
-.btns {
-  display: flex;
-  justify-content: center;
-  margin-top: 50px;
-}
-</style>
diff --git a/src/views/ai/write/index/components/Tag.vue b/src/views/ai/write/index/components/Tag.vue
index 3d616bedd..8c0ad795a 100644
--- a/src/views/ai/write/index/components/Tag.vue
+++ b/src/views/ai/write/index/components/Tag.vue
@@ -29,4 +29,3 @@ const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 </script>
-<style scoped></style>