update

package.json

@@ -41,6 +41,7 @@
     "sm-crypto": "^0.3.13",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "swiper": "^4.5.1",
     "vue": "2.6.10",
     "vue-router": "3.0.2",
     "vuex": "3.1.0",

src/views/design-agent/chatCreation.vue

@@ -18,14 +18,29 @@ export default {
     return {
       iframeUrl: 'https://aids.gloria.com.cn:8443/chat/Q2zXZ4uwp3yN4Tmn',
     }
+  },
+  mounted(){
+    document.querySelector('body').classList.add('chat-creation')
+  },
+  beforeDestroy() {
+    document.body.classList.remove('chat-creation')
   }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .cut-video-container {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
+</style>
+<style lang="scss">
+  .chat-creation {
+    .hasTagsView .app-main {
+      padding: 0;
+      background-color: #e9ebf0;
+      box-shadow: none;
+    }
+  }
 </style>

src/views/design-agent/design-agent.scss

@@ -226,12 +226,18 @@
             .feature-mod-content-main-item-left-title-arrow {
               color: rgb(92, 131, 238);
             }
+            .feature-mod-content-main-item-left-imgs-img img {
+              border: 1px solid #fff;
+            }
           }
           &.theme-yellow {
             background: linear-gradient(116deg, rgb(253, 250, 236) 2%, rgb(255, 238, 217) 98%);
             .feature-mod-content-main-item-left-title-arrow {
               color: rgb(238, 140, 9);
             }
+            .feature-mod-content-main-item-left-imgs-img img {
+              border: 1px solid #fff;
+            }
           }
           &::after {
             background-image: url('https://img.alicdn.com/imgextra/i1/O1CN011NMFSk1SlUrKFlWpV_!!6000000002287-2-tps-1176-600.png');
@@ -272,9 +278,9 @@
               }
             }
             &.left-imgs-count-3 .feature-mod-content-main-item-left-imgs {
-              margin-top: 16px;
+              margin-top: 24px;
               width: 172px;
-              height: 86px;
+              height: 71px;
               display: flex;
               flex-direction: row-reverse;
               transform: translateX(-4px);
@@ -709,8 +715,35 @@
         .img-group {
           width: 100%;
         }
-        /deep/ .el-carousel__indicators {
-          display: none;
+        .swiper-container-block {
+          flex: 1;
+          width: calc(100% - 110px);
+
+          .swiper-button {
+            width: 32px;
+            height: 32px;
+            transform: translateY(-50%);
+            border-radius: 50%;
+            background-image: none;
+            background: rgba(0, 0, 0, 0.3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            svg {
+              width: 18px;
+              height: 18px;
+              fill: #fff;
+            }
+
+            &.swiper-button-prev {
+              left: 5px;
+              transform: translateY(-50%) rotate(180deg);
+            }
+            &.swiper-button-next {
+              right: 5px;
+            }
+          }
         }
         .custom-file-list {
           display: flex;
@@ -735,18 +768,11 @@
         }
         .picture-card-wrapper {
           position: relative;
-          width: calc(50% - 5px);
 
           &:hover .custom-file__btns{
             display: flex;
           }
         }
-        /deep/ .el-carousel__arrow--left {
-          left: 0;
-        }
-        /deep/ .el-carousel__arrow--right {
-          right: 0;
-        }
         .picture-card-image {
           width: 100%;
           object-fit: cover;
@@ -757,8 +783,8 @@
           aspect-ratio: 1/1;
         }
         .replace-btn {
-          font-size: 14px;
-          padding: 6px 20px;
+          font-size: 12px;
+          padding: 4px 10px;
           background: rgba(0, 0, 0, 0.8);
           border-color: rgba(0, 0, 0, 0.8);
           color: #fff;
@@ -766,12 +792,12 @@
           /deep/ span {
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 4px;
           }
 
           svg {
-            width: 18px;
-            height: 18px;
+            width: 14px;
+            height: 14px;
           }
 
           &:hover {
@@ -781,15 +807,16 @@
         }
         .upload-demo {
           width: 100%;
+          height: 240px;
 
           &.upload-demo__data {
             width: 100px;
-            height: 100px;
+            height: auto;
             flex: 0 0 100px;
             margin-left: 10px;
 
             /deep/ .el-upload {
-
+              height: 100%;
               .el-upload-dragger {
                 display: flex;
                 align-items: center;
@@ -804,7 +831,7 @@
         }
         /deep/ .el-upload {
           width: 100%;
-          height: 100%;
+          height: auto;
 
           .el-upload-dragger {
             width: 100%;
@@ -820,6 +847,7 @@
               }
               .el-upload__text,.el-upload__tip {
                 color: #ae8877;
+                font-size: 14px;
               }
             }
           }
@@ -856,8 +884,8 @@
           transition: all .5s;
 
           .replace-btn {
-            font-size: 14px;
-            padding: 6px 20px;
+            font-size: 12px;
+            padding: 4px 10px;
             background: rgba(0, 0, 0, 0.8);
             border-color: rgba(0, 0, 0, 0.8);
             color: #fff;
@@ -865,12 +893,12 @@
             /deep/ span {
               display: flex;
               align-items: center;
-              gap: 6px;
+              gap: 4px;
             }
 
             svg {
-              width: 18px;
-              height: 18px;
+              width: 14px;
+              height: 14px;
             }
 
             &:hover {
@@ -929,12 +957,12 @@
         }
       }
       .tool-direct-left__imageRatio {
-        /deep/ .el-radio-group {
+        /deep/ .el-checkbox-group {
           display: flex;
           flex-wrap: wrap;
           gap: 20px;
 
-          .el-radio {
+          .el-checkbox {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -943,44 +971,50 @@
             background: #ae8878;
             border: 1px solid #ae8878;
             border-radius: 8px;
-            transition: all .5s;
+            transition: none;
+            color: #fff;
+            gap: 4px;
             &.is-checked {
               background: #232323;;
               border-color: #232323;
             }
-            &:hover {
+            &:not(.is-checked):hover {
               background:#bea092;
               border-color: #bea092;
             }
           }
-          .el-radio__input {
+          .el-checkbox__input {
             width: 18px;
             height: 12px;
             border: 1px solid #fff;
             border-radius: 2px;
           }
-          .el-radio:nth-child(2) .el-radio__input {
+          .el-checkbox:nth-child(2) .el-checkbox__input {
             width: 22px;
           }
-          .el-radio:nth-child(3) .el-radio__input {
+          .el-checkbox:nth-child(3) .el-checkbox__input {
             width: 14px;
             height: 14px;
           }
-          .el-radio:nth-child(4) .el-radio__input {
+          .el-checkbox:nth-child(4) .el-checkbox__input {
             width: 12px;
             height: 18px;
           }
-          .el-radio:nth-child(5) .el-radio__input {
+          .el-checkbox:nth-child(5) .el-checkbox__input {
             width: 12px;
-            height: 22px;
-          }
-          .el-radio__inner {
-            opacity: 0;
+            height: 16px;
           }
-          .el-radio__label {
-            color: #fff;
-            padding-left: 4px;
+          .el-checkbox:nth-child(6) .el-checkbox__input {
+            width: 12px;
+            height: 22px;
           }
+          // .el-checkbox__inner {
+          //   opacity: 0;
+          // }
+          // .el-checkbox__label {
+          //   color: #fff;
+          //   padding-left: 4px;
+          // }
         }
       }
       .image-ratio__custom {
@@ -997,6 +1031,11 @@
         display: flex;
         align-items: center;
         gap: 10px;
+
+        /deep/ .el-input__suffix-inner {
+          display: flex;
+          height: 100%;
+        }
       }
       .el-form-item__btns {
         position: absolute;
@@ -1116,11 +1155,15 @@
         border-radius: 8px;
         overflow: hidden;
 
-        img {
+        /deep/ .el-image {
+          height: 100%;
+        }
+        /deep/ img {
           display: block;
           max-width: 100%;
           max-height: 100%;
           object-fit: cover;
+          cursor: zoom-in;
         }
 
         .images-preview__search {

src/views/design-agent/feature-mod-index.vue

@@ -56,31 +56,42 @@
                     </template>
                     <div class="tools-upload">
                       <!-- 自定义显示每个图片的重新上传按钮 -->
-                      <el-carousel :interval="3000" style="width: 340px;" height="165px" :autoplay="false" v-if="ruleForm.imageList.length">
-                        <el-carousel-item v-for="(group, index) in groupedImages" :key="index">
-                          <div class="img-group">
-                            <div class="custom-file-list" >
-                              <div v-for="(img, i) in group" :key="i" class="picture-card-wrapper">
-                                <img :src="img" class="picture-card-image" />
-                                <div class="custom-file__btns">
-                                  <el-button 
-                                    class="replace-btn" 
-                                    @click="replaceFile(index, i)">
-                                    <svg t="1760412251487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6466" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M902.314667 206.741333a21.333333 21.333333 0 0 1 0 30.122667l-46.933334 47.146667-122.581333 123.178666a21.333333 21.333333 0 0 1-30.229333 0l-31.829334-31.957333a21.333333 21.333333 0 0 1 0-30.122667l42.666667-42.816c13.376-13.44 3.84-36.394667-15.146667-36.394666H375.189333c-46.933333 0-91.157333 18.389333-124.373333 51.733333a175.914667 175.914667 0 0 0-51.52 124.885333v91.712a21.333333 21.333333 0 0 1-21.333333 21.333334H132.970667a21.333333 21.333333 0 0 1-21.333334-21.333334v-91.818666c0-146.090667 118.037333-264.618667 263.530667-264.618667h323.008c18.986667 0 28.522667-22.933333 15.125333-36.373333l-42.666666-42.837334a21.333333 21.333333 0 0 1 0-30.101333l31.829333-31.978667a21.333333 21.333333 0 0 1 30.250667 0l122.581333 123.093334 47.018667 47.146666z m-97.941334 353.706667c0 47.146667-18.325333 91.52-51.541333 124.885333a174.464 174.464 0 0 1-124.373333 51.733334H325.653333c-18.986667 0-28.522667-22.954667-15.125333-36.394667l42.752-42.922667a21.333333 21.333333 0 0 0 0-30.122666l-31.829333-31.957334a21.333333 21.333333 0 0 0-30.229334 0l-122.602666 123.008-46.933334 47.146667a21.333333 21.333333 0 0 0 0 30.08l46.933334 47.146667 122.602666 123.093333a21.333333 21.333333 0 0 0 30.229334 0l31.829333-31.957333a21.333333 21.333333 0 0 0 0-30.101334l-42.453333-42.624c-13.397333-13.44-3.861333-36.394667 15.104-36.394666H628.48c145.493333 0 263.530667-118.528 263.530667-264.618667v-90.538667a21.333333 21.333333 0 0 0-21.333334-21.333333h-44.970666a21.333333 21.333333 0 0 0-21.333334 21.333333v90.538667z" p-id="6467" fill="#ffffff"></path></svg>
-                                    重新上传
-                                  </el-button>
-                                  <el-button 
-                                    class="replace-btn" 
-                                    @click="imgUploadDel(index, i)">
-                                    <svg t="1760412304801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M853.333333 256H170.666667V853.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h512A85.333333 85.333333 0 0 0 853.333333 853.333333V256zM85.333333 170.666667h170.666667V85.333333A85.333333 85.333333 0 0 1 341.333333 0h341.333334a85.333333 85.333333 0 0 1 85.333333 85.333333V170.666667h213.333333a42.666667 42.666667 0 0 1 0 85.333333H938.666667V853.333333a170.666667 170.666667 0 0 1-170.666667 170.666667h-512a170.666667 170.666667 0 0 1-170.666667-170.666667V256H42.666667a42.666667 42.666667 0 1 1 0-85.333333H85.333333zM341.333333 170.666667h341.333334V85.333333H341.333333V170.666667z m42.666667 256c23.552 0 42.666667 19.114667 42.666667 42.666666v256a42.666667 42.666667 0 0 1-85.333334 0v-256c0-23.552 19.114667-42.666667 42.666667-42.666666z m256 0c23.552 0 42.666667 19.114667 42.666667 42.666666v256a42.666667 42.666667 0 0 1-85.333334 0v-256c0-23.552 19.114667-42.666667 42.666667-42.666666z" fill="#ffffff" p-id="7510"></path></svg>
-                                    删除图片
-                                  </el-button>
+                      <div class="swiper-container-block" v-if="ruleForm.imageList.length">
+                        <div class="swiper-container my-swiper" ref="swiperContainer">
+                          <div class="swiper-wrapper">
+                            <div class="swiper-slide" v-for="(group, index) in ruleForm.imageList" :key="index">
+                              <div class="img-group">
+                                <div class="custom-file-list" >
+                                  <div class="picture-card-wrapper">
+                                    <img :src="group" class="picture-card-image" />
+                                    <div class="custom-file__btns">
+                                      <el-button 
+                                        class="replace-btn" 
+                                        @click="replaceFile(index)">
+                                        <svg t="1760412251487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6466" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M902.314667 206.741333a21.333333 21.333333 0 0 1 0 30.122667l-46.933334 47.146667-122.581333 123.178666a21.333333 21.333333 0 0 1-30.229333 0l-31.829334-31.957333a21.333333 21.333333 0 0 1 0-30.122667l42.666667-42.816c13.376-13.44 3.84-36.394667-15.146667-36.394666H375.189333c-46.933333 0-91.157333 18.389333-124.373333 51.733333a175.914667 175.914667 0 0 0-51.52 124.885333v91.712a21.333333 21.333333 0 0 1-21.333333 21.333334H132.970667a21.333333 21.333333 0 0 1-21.333334-21.333334v-91.818666c0-146.090667 118.037333-264.618667 263.530667-264.618667h323.008c18.986667 0 28.522667-22.933333 15.125333-36.373333l-42.666666-42.837334a21.333333 21.333333 0 0 1 0-30.101333l31.829333-31.978667a21.333333 21.333333 0 0 1 30.250667 0l122.581333 123.093334 47.018667 47.146666z m-97.941334 353.706667c0 47.146667-18.325333 91.52-51.541333 124.885333a174.464 174.464 0 0 1-124.373333 51.733334H325.653333c-18.986667 0-28.522667-22.954667-15.125333-36.394667l42.752-42.922667a21.333333 21.333333 0 0 0 0-30.122666l-31.829333-31.957334a21.333333 21.333333 0 0 0-30.229334 0l-122.602666 123.008-46.933334 47.146667a21.333333 21.333333 0 0 0 0 30.08l46.933334 47.146667 122.602666 123.093333a21.333333 21.333333 0 0 0 30.229334 0l31.829333-31.957333a21.333333 21.333333 0 0 0 0-30.101334l-42.453333-42.624c-13.397333-13.44-3.861333-36.394667 15.104-36.394666H628.48c145.493333 0 263.530667-118.528 263.530667-264.618667v-90.538667a21.333333 21.333333 0 0 0-21.333334-21.333333h-44.970666a21.333333 21.333333 0 0 0-21.333334 21.333333v90.538667z" p-id="6467" fill="#ffffff"></path></svg>
+                                        重新上传
+                                      </el-button>
+                                      <el-button 
+                                        class="replace-btn" 
+                                        @click="imgUploadDel(index)">
+                                        <svg t="1760412304801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M853.333333 256H170.666667V853.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h512A85.333333 85.333333 0 0 0 853.333333 853.333333V256zM85.333333 170.666667h170.666667V85.333333A85.333333 85.333333 0 0 1 341.333333 0h341.333334a85.333333 85.333333 0 0 1 85.333333 85.333333V170.666667h213.333333a42.666667 42.666667 0 0 1 0 85.333333H938.666667V853.333333a170.666667 170.666667 0 0 1-170.666667 170.666667h-512a170.666667 170.666667 0 0 1-170.666667-170.666667V256H42.666667a42.666667 42.666667 0 1 1 0-85.333333H85.333333zM341.333333 170.666667h341.333334V85.333333H341.333333V170.666667z m42.666667 256c23.552 0 42.666667 19.114667 42.666667 42.666666v256a42.666667 42.666667 0 0 1-85.333334 0v-256c0-23.552 19.114667-42.666667 42.666667-42.666666z m256 0c23.552 0 42.666667 19.114667 42.666667 42.666666v256a42.666667 42.666667 0 0 1-85.333334 0v-256c0-23.552 19.114667-42.666667 42.666667-42.666666z" fill="#ffffff" p-id="7510"></path></svg>
+                                        删除图片
+                                      </el-button>
+                                    </div>
+                                  </div>
                                 </div>
                               </div>
                             </div>
                           </div>
-                        </el-carousel-item>
-                      </el-carousel>
+                          <!-- 左右箭头 -->
+                          <div class="swiper-button-prev swiper-button">
+                            <svg t="1760505375902" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10647" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M307.6 104.6c-14.2 14.2-14.2 37.2 0 51.4L655 503.4c2.8 2.9 2.8 7.5 0 10.3L307.6 861.2c-14.2 14.2-14.2 37.2 0 51.4 14.2 14.2 37.2 14.2 51.4 0l347.4-347.4c15.6-15.6 23.4-36 23.4-56.5s-7.8-41-23.4-56.5L359 104.6c-14.2-14.2-37.2-14.2-51.4 0z" p-id="10648"></path></svg>
+                          </div>
+                          <div class="swiper-button-next swiper-button">
+                            <svg t="1760505375902" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10647" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M307.6 104.6c-14.2 14.2-14.2 37.2 0 51.4L655 503.4c2.8 2.9 2.8 7.5 0 10.3L307.6 861.2c-14.2 14.2-14.2 37.2 0 51.4 14.2 14.2 37.2 14.2 51.4 0l347.4-347.4c15.6-15.6 23.4-36 23.4-56.5s-7.8-41-23.4-56.5L359 104.6c-14.2-14.2-37.2-14.2-51.4 0z" p-id="10648"></path></svg>
+                          </div>
+                        </div>
+                      </div>
                       <el-upload
                         ref="uploadRef"
                         class="upload-demo"
@@ -99,8 +110,8 @@
                           <i class="el-icon-plus" v-if="ruleForm.imageList.length"></i>
                           <div class="el-upload__info" v-else>
                             <i class="el-icon-upload"></i>
-                            <div class="el-upload__text">点击或将图片拖拽到这里上传</div>
-                            <div class="el-upload__tip" slot="tip">(图片要求：支持JPG和PNG，最大为20M)</div>
+                            <div class="el-upload__text">点击或将图片拖拽到这里上传，最多上传 5 张图片</div>
+                            <div class="el-upload__tip" slot="tip">图片要求：支持JPG、PNG和WEBP，最大为20M</div>
                           </div>
                         </div>
                       </el-upload>
@@ -130,13 +141,13 @@
                             <div class="custom-file__btns">
                               <el-button 
                                 class="replace-btn" 
-                                @click="replaceFile(index, i)">
+                                @click="replaceFile()">
                                 <svg t="1760412251487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6466" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M902.314667 206.741333a21.333333 21.333333 0 0 1 0 30.122667l-46.933334 47.146667-122.581333 123.178666a21.333333 21.333333 0 0 1-30.229333 0l-31.829334-31.957333a21.333333 21.333333 0 0 1 0-30.122667l42.666667-42.816c13.376-13.44 3.84-36.394667-15.146667-36.394666H375.189333c-46.933333 0-91.157333 18.389333-124.373333 51.733333a175.914667 175.914667 0 0 0-51.52 124.885333v91.712a21.333333 21.333333 0 0 1-21.333333 21.333334H132.970667a21.333333 21.333333 0 0 1-21.333334-21.333334v-91.818666c0-146.090667 118.037333-264.618667 263.530667-264.618667h323.008c18.986667 0 28.522667-22.933333 15.125333-36.373333l-42.666666-42.837334a21.333333 21.333333 0 0 1 0-30.101333l31.829333-31.978667a21.333333 21.333333 0 0 1 30.250667 0l122.581333 123.093334 47.018667 47.146666z m-97.941334 353.706667c0 47.146667-18.325333 91.52-51.541333 124.885333a174.464 174.464 0 0 1-124.373333 51.733334H325.653333c-18.986667 0-28.522667-22.954667-15.125333-36.394667l42.752-42.922667a21.333333 21.333333 0 0 0 0-30.122666l-31.829333-31.957334a21.333333 21.333333 0 0 0-30.229334 0l-122.602666 123.008-46.933334 47.146667a21.333333 21.333333 0 0 0 0 30.08l46.933334 47.146667 122.602666 123.093333a21.333333 21.333333 0 0 0 30.229334 0l31.829333-31.957333a21.333333 21.333333 0 0 0 0-30.101334l-42.453333-42.624c-13.397333-13.44-3.861333-36.394667 15.104-36.394666H628.48c145.493333 0 263.530667-118.528 263.530667-264.618667v-90.538667a21.333333 21.333333 0 0 0-21.333334-21.333333h-44.970666a21.333333 21.333333 0 0 0-21.333334 21.333333v90.538667z" p-id="6467" fill="#ffffff"></path></svg>
                                 重新上传
                               </el-button>
                               <el-button 
                                 class="replace-btn" 
-                                @click.stop="imgUploadDel(index, i)">
+                                @click.stop="imgUploadDel()">
                                 <svg t="1760412304801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M853.333333 256H170.666667V853.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h512A85.333333 85.333333 0 0 0 853.333333 853.333333V256zM85.333333 170.666667h170.666667V85.333333A85.333333 85.333333 0 0 1 341.333333 0h341.333334a85.333333 85.333333 0 0 1 85.333333 85.333333V170.666667h213.333333a42.666667 42.666667 0 0 1 0 85.333333H938.666667V853.333333a170.666667 170.666667 0 0 1-170.666667 170.666667h-512a170.666667 170.666667 0 0 1-170.666667-170.666667V256H42.666667a42.666667 42.666667 0 1 1 0-85.333333H85.333333zM341.333333 170.666667h341.333334V85.333333H341.333333V170.666667z m42.666667 256c23.552 0 42.666667 19.114667 42.666667 42.666666v256a42.666667 42.666667 0 0 1-85.333334 0v-256c0-23.552 19.114667-42.666667 42.666667-42.666666z m256 0c23.552 0 42.666667 19.114667 42.666667 42.666666v256a42.666667 42.666667 0 0 1-85.333334 0v-256c0-23.552 19.114667-42.666667 42.666667-42.666666z" fill="#ffffff" p-id="7510"></path></svg>
                                 删除图片
                               </el-button>
@@ -145,7 +156,7 @@
                           <div class="el-upload__info" v-else>
                             <i class="el-icon-upload"></i>
                             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过20M</div>
+                            <div class="el-upload__tip" slot="tip">图片要求：支持JPG、PNG和WEBP，最大为20M</div>
                           </div>
                         </div>
                       </el-upload>
@@ -160,7 +171,7 @@
                         <el-tooltip 
                           class="item" 
                           effect="dark" 
-                          content="请详细描述您想要的服装款式、风格、颜色、材质等" 
+                          :content="pagesData.contentTips" 
                           placement="top"
                         >
                           <i class="el-icon-info" style="color: #ccc;cursor: pointer;" />
@@ -170,7 +181,7 @@
                     <el-input
                       type="textarea"
                       :rows="5"
-                      placeholder="例如:一件适合夏季穿着的波西米亚风格长裙，采用丝绸面料，以佩斯利和花纹为主，土色调为橙色和蓝色.."
+                      :placeholder="pagesData.placeholder"
                       :maxlength="1000"
                       show-word-limit
                       v-model="ruleForm.screenDescription">
@@ -186,13 +197,17 @@
                       </template>
                       <div class="tool-direct-left__imageRatio">
                         <div class="image-ratio__block">
-                          <el-radio-group v-model="ruleForm.imageRatioList">
-                            <el-radio label="3:2"></el-radio>
-                            <el-radio label="16:9"></el-radio>
-                            <el-radio label="1:1"></el-radio>
-                            <el-radio label="2:3"></el-radio>
-                            <el-radio label="9:16"></el-radio>
-                          </el-radio-group>
+                          <div class="el-checkbox-group">
+                            <div
+                              v-for="item in ratioList"
+                              :key="item"
+                              :class="['el-checkbox', { 'is-checked': ruleForm.imageRatioList === item }]"
+                              @click="toggle(item)"
+                            >
+                              <span class="el-checkbox__input"></span>
+                              {{ item }}
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </el-form-item>
@@ -203,7 +218,7 @@
                         </div>
                       </template>
                       <div class="tool-direct-left__imageSize">
-                        <el-select v-model="ruleForm.imageSizeSelect" placeholder="请选择" size="small">
+                        <el-select clearable v-model="ruleForm.imageSizeSelect" placeholder="请选择" size="small">
                           <el-option
                             v-for="item in imageSizes"
                             :key="item.value"
@@ -270,12 +285,12 @@
                 <div class="result-success" v-if="resultImage">
                   <div class="preview-black__images">
                     <div class="images-preview">
-                      <img
+                      <el-image
                         :src="resultImage"
-                        alt=""
-                      >
+                        :preview-src-list="srcList"
+                      ></el-image>
                     </div>
-                    <el-tooltip class="item" effect="dark" content="预览" placement="top">
+                    <!-- <el-tooltip class="item" effect="dark" content="预览" placement="top">
                       <div class="images-preview__search">
                           <el-image
                             :src="resultImage"
@@ -283,9 +298,9 @@
                           ></el-image>
                           <svg t="1759203455323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4663" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M928 886.4l-160-160c128-150.4 120-377.6-20.8-520C596.8 56 353.6 56 204.8 206.4c-72 72-112 169.6-112 272s40 198.4 112 272c72 72 169.6 112 272 112 91.2 0 179.2-32 248-91.2l160 160c12.8 12.8 32 12.8 44.8 0 11.2-12.8 11.2-32-1.6-44.8zM249.6 705.6c-60.8-60.8-94.4-140.8-94.4-225.6s33.6-166.4 94.4-225.6c62.4-62.4 144-92.8 225.6-92.8s163.2 30.4 225.6 92.8c124.8 124.8 124.8 328 0 452.8C640 768 560 801.6 475.2 801.6c-84.8-3.2-164.8-35.2-225.6-96z" fill="#333333" p-id="4664"></path></svg>
                       </div>
-                    </el-tooltip>
+                    </el-tooltip> -->
                     <div class="images-preview__icon">
-                      <el-tooltip class="item" effect="dark" content="保存到我的作品" placement="top">
+                      <el-tooltip class="item" v-if="!isSave" effect="dark" content="保存到我的作品" placement="top">
                         <div class="like-icons icons" @click="saveUserWork">
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -300,6 +315,11 @@
                           ><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg>
                         </div>
                       </el-tooltip>
+                      <el-tooltip v-else class="item" effect="dark" content="从作品中移除" placement="top">
+                        <div class="like-icons icons" @click="updateUserWork(true)">
+                          <svg t="1760494995280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7979" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512.042667 193.237333a255.914667 255.914667 0 0 1 351.658666 9.728 256 256 0 0 1 10.069334 351.402667l-361.813334 362.325333-361.728-362.325333a256 256 0 0 1 361.813334-361.130667z" fill="#EF4444" p-id="7980"></path></svg>
+                        </div>
+                      </el-tooltip>
                       <el-tooltip class="item" effect="dark" content="下载" placement="top">
                         <div class="download-icon icons" @click="handleDownload">
                           <svg
@@ -349,6 +369,9 @@ import { getToken } from '@/utils/auth'
 import downloadUtil from "@/utils/downloadUtil";
 import { genCidHex16, fetchStreamText } from '@/utils/index'
 import request from '@/utils/request'
+// 引入 Swiper 及样式
+import Swiper from 'swiper'
+import 'swiper/dist/css/swiper.min.css'
 export default {
   components: {
   },
@@ -362,6 +385,8 @@ export default {
       pagesData: {},
       pagesId: null,
       replaceIndex: null,
+      isSave: false,
+      workId: null,
       ruleForm: {
         imageUrl: '',
         imageList: [],
@@ -370,6 +395,7 @@ export default {
         imageSizeSelect: '',
         imageSize: {}
       },
+      ratioList: ['3:2', '16:9', '1:1', '2:3', '3:4', '9:16'],
       rules: {
         imageUrl: [
           { validator: (rule, value, callback) => this.checkImage(rule, value, callback), trigger: "change" }
@@ -389,12 +415,13 @@ export default {
                 callback()
               }
             },
-            trigger: ['blur', 'change']
+            trigger: ['blur']
           }
         ]
       },
       hasCustom: false,
-      srcList: []
+      srcList: [],
+      swiper: null
     };
   },
   //页面创建的时候执行
@@ -402,26 +429,32 @@ export default {
     if (!this.pagesId) {
       this.pagesId = this.$route.params.id;
     }
-    this.clearFormData();
+    // this.clearFormData();
     if (this.pagesId == 1) {
       this.pagesData = {
         title: '创意生图',
         applicationId: this.pagesId, // 1:文生图 2:图生图 3:图片生成线稿
-        desc: '通过详细的文字描述，AI将为您生成符合要求的服装设计方案。'
+        desc: '通过详细的文字描述，AI将为您生成符合要求的服装设计方案。',
+        contentTips: '请详细描述您想要的服装款式、风格、颜色、材质等',
+        placeholder: '例如:一件适合夏季穿着的波西米亚风格长裙，采用丝绸面料，以佩斯利和花纹为主，土色调为橙色和蓝色..'
       }
     }
     if (this.pagesId == 2) {
       this.pagesData = {
         title: '图生图',
         applicationId: this.pagesId, // 1:文生图 2:图生图 3:图片生成线稿
-        desc: '上传参考图片，AI将基于图片内容创作新的服装设计。'
+        desc: '上传参考图片，AI将基于图片内容创作新的服装设计。',
+        contentTips: '请描述你希望修改或增强的元素',
+        placeholder: '例如：“保持整体款式，但改为红色印花，增加轻微褶皱感”'
       }
     }
     if (this.pagesId == 3) {
       this.pagesData = {
         title: '线稿生成',
         applicationId: this.pagesId, // 1:文生图 2:图生图 3:图片生成线稿
-        desc: '上传确定好的服装设计图，AI将提取静物轮廓生成专业的线稿。'
+        desc: '上传确定好的服装设计图，AI将提取静物轮廓生成专业的线稿。',
+        contentTips: '请描述设计草图的关键细节',
+        placeholder: '例如：“画出正反面线稿，重点表现领口、袖口和裙摆褶皱”'
       }
     }
   },
@@ -437,16 +470,53 @@ export default {
         {label: '1920×1080', value: '1920×1080'},
         {label: '2000×2000', value: '2000×2000'}
       ]
-    },
-    groupedImages() {
-      const result = []
-      for (let i = 0; i < this.ruleForm.imageList.length; i += 2) {
-        result.push(this.ruleForm.imageList.slice(i, i + 2))
+    }
+  },
+  watch: {
+    'ruleForm.imageList': {
+      deep: true,
+      immediate: true, // 页面初次挂载时也会执行一次
+      handler(newVal) {
+        // 没有图片就不初始化
+        if (!newVal || !newVal.length) return
+
+        // 确保 DOM 已经渲染完毕
+        this.$nextTick(() => {
+          if (!this.swiper) {
+            this.initSwiper() // 首次初始化
+          } else {
+            // this.swiper.update() // 后续新增 slide 更新
+          }
+        })
       }
-      return result
     }
   },
   methods: {
+    toggle(item) {
+      // 点击已选中 → 取消
+      if (this.ruleForm.imageRatioList === item) {
+        this.ruleForm.imageRatioList = '';
+      } else {
+        this.ruleForm.imageRatioList = item;
+      }
+    },
+    initSwiper() {
+      const container = this.$refs.swiperContainer
+
+      if (!container) return
+
+      // 初始化实例
+      this.swiper = new Swiper(container, {
+        slidesPerView: 2.5,
+        slidesPerGroup: 2,
+        spaceBetween: 10,
+        loop: false,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      })
+    },
     handleCustom() {
       this.hasCustom = !this.hasCustom
       if (!this.hasCustom) {
@@ -471,6 +541,8 @@ export default {
       this.$refs['ruleForm'].validate(async (valid) => {
         if (valid) {
           this.comfirmLoading = true;
+          this.workId = null;
+          this.isSave = false;
           let payload = {
             sessionId: `${Date.now() + 10}_${genCidHex16()}`,
             applicationId: this.pagesData.applicationId,
@@ -495,9 +567,13 @@ export default {
               sessionId: `${Date.now() + 10}_${genCidHex16()}`,
               applicationId: this.pagesData.applicationId,
               prompt: this.ruleForm.screenDescription,
-              images: this.ruleForm.imageList,
-              ratio: imageRatio,
-              imageSize: imageSize
+              images: this.ruleForm.imageList
+            }
+            if (imageRatio.length) {
+              payload.ratio = imageRatio;
+            }
+            if (imageSize.length) {
+              payload.imageSize = imageSize;
             }
           }
 
@@ -575,8 +651,8 @@ export default {
         });
       });
     },
-    replaceFile(groupIndex, itemIndex) {
-      this.replaceIndex = groupIndex * 2 + itemIndex
+    replaceFile(itemIndex) {
+      this.replaceIndex = itemIndex
 
       // 清空上传队列
       this.$refs.uploadRef.uploadFiles = []
@@ -590,10 +666,10 @@ export default {
     beforeUploadVideo(file) {
       this.uploading = true;
       const isLt10M = file.size / 1024 / 1024 < 200;
-      const imagesTypes = ['image/png','image/jpeg']
+      const imagesTypes = ['image/png','image/jpeg','image/webp']
       if (!imagesTypes.includes(file.type)) {
         this.uploading = false;
-        this.$message.error('图片只能是JPG、PNG格式!');
+        this.$message.error('图片只能是jpg、png和webp格式!');
         return false;
       }
       if (!isLt10M) {
@@ -607,6 +683,10 @@ export default {
       this.$refs.ruleForm.clearValidate(['imageList']);
       this.$refs.ruleForm.clearValidate(['imageUrl']);
 
+      if (this.ruleForm.imageList.length >= 5) {
+        this.$message.error('最多只能上传5张图片！');
+        return;
+      }
       if (this.pagesData.applicationId == 2) {
         if (this.replaceIndex !== null) {
           // 用新图片替换原有 URL
@@ -621,6 +701,13 @@ export default {
           } else {
             this.$message.error('上传失败，请重新上传！');
           }
+          this.$nextTick(() => {
+            if (this.swiper) {
+              this.swiper.update()
+              const lastIndex = this.ruleForm.imageList.length - 1
+              this.swiper.slideTo(lastIndex, 300) // 平滑滚动到最后
+            }
+          })
         }
       } else {
         if (res.code == 200) {
@@ -638,8 +725,8 @@ export default {
         type: "warning"
       }).then(() => {
         if (this.pagesData.applicationId == 2) {
-          const index = groupIndex * 2 + itemIndex
-          this.ruleForm.imageList.splice(index, 1);
+          this.ruleForm.imageList.splice(itemIndex, 1);
+          this.swiper.update()
         } else {
           this.ruleForm.imageUrl = ''
         }
@@ -653,7 +740,7 @@ export default {
       });
     },
     clearDescription() {
-      this.$refs.ruleForm.clearValidate(['description']);
+      this.$refs.ruleForm.clearValidate(['screenDescription']);
       this.ruleForm.screenDescription = ''
     },
     openPreview() {
@@ -678,6 +765,10 @@ export default {
       }
     },
     saveUserWork() {
+      if (this.workId) {
+        this.updateUserWork(false);
+        return;
+      }
       this.viewLoading = true
       request({
         url: '/userWork/add',
@@ -688,6 +779,26 @@ export default {
         }
       }).then(res => {
         if (res.code == 200) {
+          this.isSave = true;
+          this.workId = res.data;
+          this.$message.success(res.msg || '操作成功!');
+        }
+      }).finally(() => {
+        this.viewLoading = false
+      })
+    },
+    updateUserWork(bool) {
+      this.viewLoading = true
+      request({
+        url: '/userWork/updateDeleteStatus',
+        method: 'post',
+        data: {
+          id: this.workId || '',
+          deleted: bool
+        }
+      }).then(res => {
+        if (res.code == 200) {
+          this.isSave = !bool;
           this.$message.success(res.msg || '操作成功!');
         }
       }).finally(() => {