优化生成按钮 UI

web/src/views/Dalle.vue

@@ -85,24 +85,22 @@
                   :autosize="{ minRows: 4, maxRows: 6 }"
                   type="textarea"
                   ref="promptRef"
-                  maxlength="2000"
+                  maxlength="1024"
+                  show-word-limit
                   placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
                   v-loading="isGenerating"
                 />
               </div>
 
-              <el-row class="text-info">
+              <div class="flex justify-end pt-2 pr-2">
-                <el-button
+                <el-button @click="generatePrompt" type="primary" :loading="isGenerating">
-                  class="generate-btn"
+                  <span v-if="!isGenerating">
-                  size="small"
+                    <i class="iconfont icon-chuangzuo"></i>
-                  @click="generatePrompt"
+                    生成专业绘画指令
-                  color="#5865f2"
+                  </span>
-                  :disabled="isGenerating"
+                  <span v-else>生成中...</span>
-                >
-                  <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
-                  <span>生成专业绘画指令</span>
                 </el-button>
-              </el-row>
+              </div>
 
               <div class="text-info">
                 <el-row :gutter="10">
@@ -117,8 +115,14 @@
               </div>
             </el-form>
           </div>
-          <div class="submit-btn">
+          <div class="py-4">
-            <el-button type="primary" :dark="false" round @click="generate"> 立即生成 </el-button>
+            <button
+              class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
+              @click="generate"
+            >
+              <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
+              <span>立即生成</span>
+            </button>
           </div>
         </div>
         <div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">

web/src/views/ImageMj.vue

@@ -217,7 +217,8 @@
                       <el-input
                         v-model="params.prompt"
                         :autosize="{ minRows: 4, maxRows: 6 }"
-                        maxlength="2000"
+                        maxlength="1024"
+                        show-word-limit
                         type="textarea"
                         ref="promptRef"
                         v-loading="isGenerating"
@@ -225,18 +226,15 @@
                       />
                     </div>
 
-                    <el-row class="text-info">
+                    <div class="flex justify-end pt-2">
-                      <el-button
+                      <el-button @click="generatePrompt" type="primary" :loading="isGenerating">
-                        class="generate-btn"
+                        <span v-if="!isGenerating">
-                        size="small"
+                          <i class="iconfont icon-chuangzuo"></i>
-                        @click="generatePrompt"
+                          生成专业绘画指令
-                        color="#5865f2"
+                        </span>
-                        :disabled="isGenerating"
+                        <span v-else>生成中...</span>
-                      >
-                        <i class="iconfont icon-chuangzuo"></i>
-                        <span>生成专业绘画指令</span>
                       </el-button>
-                    </el-row>
+                    </div>
 
                     <div class="param-line pt">
                       <div class="flex-row justify-between items-center">
@@ -613,7 +611,13 @@
               </el-row>
 
               <div class="submit-btn">
-                <el-button type="primary" :dark="false" @click="generate" round>立即生成</el-button>
+                <button
+                  class="px-10 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
+                  @click="generate"
+                >
+                  <i class="iconfont icon-chuangzuo"></i>
+                  <span>立即生成</span>
+                </button>
               </div>
             </el-form>
           </div>

web/src/views/ImageSd.vue

@@ -254,24 +254,21 @@
                   :autosize="{ minRows: 4, maxRows: 6 }"
                   type="textarea"
                   ref="promptRef"
-                  maxlength="2000"
+                  maxlength="1024"
+                  show-word-limit
                   placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
-                  v-loading="isGenerating"
                 />
               </div>
 
-              <el-row class="text-info">
+              <div class="flex justify-end pt-2 pr-2">
-                <el-button
+                <el-button @click="generatePrompt" type="primary" :loading="isGenerating">
-                  class="generate-btn"
+                  <span v-if="!isGenerating">
-                  size="small"
+                    <i class="iconfont icon-chuangzuo"></i>
-                  @click="generatePrompt"
+                    生成专业绘画指令
-                  color="#5865f2"
+                  </span>
-                  :disabled="isGenerating"
+                  <span v-else>生成中...</span>
-                >
-                  <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
-                  <span>生成专业绘画指令</span>
                 </el-button>
-              </el-row>
+              </div>
 
               <div class="param-line pt">
                 <span>反向提示词：</span>
@@ -303,8 +300,14 @@
               </div>
             </el-form>
           </div>
-          <div class="submit-btn">
+          <div class="py-4">
-            <el-button type="primary" :dark="false" round @click="generate">立即生成</el-button>
+            <button
+              class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
+              @click="generate"
+            >
+              <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
+              <span>立即生成</span>
+            </button>
           </div>
         </div>
         <div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">

web/src/views/ImagesWall.vue

@@ -3,11 +3,17 @@
     <div class="inner custom-scroll">
       <div class="header">
         <h2 class="text-xl pt-4 pb-4">AI 绘画作品墙</h2>
-        <div class="settings pr-14">
+        <div class="settings">
           <el-radio-group v-model="imgType" @change="changeImgType">
-            <el-radio value="mj" size="large">MidJourney</el-radio>
+            <el-radio-button value="mj"
-            <el-radio value="sd" size="large">Stable Diffusion</el-radio>
+              ><i class="iconfont icon-mj mr-1"></i>MidJourney</el-radio-button
-            <el-radio value="dall" size="large">DALL-E</el-radio>
+            >
+            <el-radio-button value="sd"
+              ><i class="iconfont icon-sd mr-1"></i>StableDiffusion</el-radio-button
+            >
+            <el-radio-button value="dall"
+              ><i class="iconfont icon-dalle mr-1"></i>Dalle</el-radio-button
+            >
           </el-radio-group>
         </div>
       </div>

web/src/views/MarkMap.vue

@@ -43,17 +43,14 @@
                 >
               </div>
 
-              <div class="submit-btn flex-center">
+              <div class="p-4">
-                <el-button
+                <button
-                  style="width: 200px"
+                  class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
-                  type="primary"
-                  :dark="false"
-                  round
                   @click="generateAI"
                   :loading="loading"
                 >
                   生成思维导图
-                </el-button>
+                </button>
               </div>
 
               <div class="param-line">使用已有内容生成？</div>
@@ -66,15 +63,13 @@
                 />
               </div>
 
-              <div class="param-line flex-center">
+              <div class="param-line">
-                <el-button
+                <button
-                  color="rgb(78, 51, 254)"
+                  class="w-full py-3 bg-gradient-to-r from-green-400 to-blue-500 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-green-500 hover:to-blue-600 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
-                  style="width: 200px"
-                  :dark="false"
-                  round
                   @click="generate"
-                  >直接生成（免费）</el-button
                 >
+                  直接生成（免费）
+                </button>
               </div>
             </el-form>
           </div>