初始化

src/assets/ai-images/image-size-1-1-a.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1060FF;}
+</style>
+<path class="st0" d="M2.1,4.7c0-1.5,1.2-2.7,2.7-2.7H9V1H4.7C2.7,1,1,2.7,1,4.7V9h1.1V4.7z M2.1,15.3c0,1.5,1.2,2.7,2.7,2.7H9V19
+	H4.7C2.7,19,1,17.3,1,15.3V11h1.1V15.3z M15.3,2.1c1.5,0,2.7,1.2,2.7,2.7V9H19V4.7C19,2.7,17.3,1,15.3,1H11v1.1H15.3z M17.9,15.3
+	c0,1.5-1.2,2.7-2.7,2.7H11V19h4.3c2.1,0,3.7-1.7,3.7-3.7V11h-1.1V15.3z"/>
+</svg>

src/assets/ai-images/image-size-1-2-a.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1060FF;}
+</style>
+<path class="st0" d="M4.9,3.7c0-1.5,1-2.7,2.3-2.7H9V0H7.3C5.5,0,4,1.7,4,3.7V8h0.9V3.7z M4.9,16.3c0,1.5,1,2.7,2.3,2.7H9V20H7.3
+	C5.5,20,4,18.3,4,16.3V12h0.9V16.3z M13.7,1.1c1.3,0,2.3,1.2,2.3,2.7V8H17V3.7C17,1.7,15.5,0,13.7,0H12v1.1H13.7z M16.1,16.3
+	c0,1.5-1,2.7-2.3,2.7H12V20h1.7c1.8,0,3.3-1.7,3.3-3.7V12h-0.9V16.3z"/>
+</svg>

src/assets/ai-images/image-size-16-9-a.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1060FF;}
+</style>
+<path class="st0" d="M1.1,7.3c0-1.3,1.2-2.3,2.7-2.3H8V4H3.7C1.7,4,0,5.5,0,7.3V9h1.1V7.3z M1.1,11.3c0,1.5,1.2,2.7,2.7,2.7H8V15
+	H3.7C1.7,15,0,13.3,0,11.3V10h1.1V11.3z M16.3,4.9c1.5,0,2.7,1,2.7,2.3V9H20V7.3C20,5.5,18.3,4,16.3,4H12v0.9H16.3z M18.9,11.3
+	c0,1.5-1.2,2.7-2.7,2.7H12V15h4.3c2.1,0,3.7-1.7,3.7-3.7V10h-1.1V11.3z"/>
+</svg>

src/assets/ai-images/image-size-3-2-a.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1060FF;}
+</style>
+<path class="st0" d="M1.1,5.3c0-1.3,1.2-2.3,2.7-2.3H8V2H3.7C1.7,2,0,3.5,0,5.3V9h1.1V5.3z M1.1,14.7c0,1.3,1.2,2.3,2.7,2.3H8V18
+	H3.7C1.7,18,0,16.5,0,14.7V11h1.1V14.7z M16.3,2.9c1.5,0,2.7,1,2.7,2.3V9H20V5.3C20,3.5,18.3,2,16.3,2H12v0.9H16.3z M18.9,14.7
+	c0,1.3-1.2,2.3-2.7,2.3H12V18h4.3c2.1,0,3.7-1.5,3.7-3.3V11h-1.1V14.7z"/>
+</svg>

src/assets/ai-images/image-size-3-4-a.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1060FF;}
+</style>
+<path class="st0" d="M2.9,3.7c0-1.5,1-2.7,2.3-2.7H9V0H5.3C3.5,0,2,1.7,2,3.7V8h0.9V3.7z M2.9,16.3c0,1.5,1,2.7,2.3,2.7H9V20H5.3
+	C3.5,20,2,18.3,2,16.3V12h0.9V16.3z M14.7,1.1c1.3,0,2.3,1.2,2.3,2.7V8H18V3.7C18,1.7,16.5,0,14.7,0H11v1.1H14.7z M17.1,16.3
+	c0,1.5-1,2.7-2.3,2.7H11V20h3.7c1.8,0,3.3-1.7,3.3-3.7V12h-0.9V16.3z"/>
+</svg>

src/assets/ai-images/image-size-9-16-a.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1060FF;}
+</style>
+<path class="st0" d="M5.9,3.7c0-1.5,1-2.7,2.3-2.7H10V0H8.3C6.5,0,5,1.7,5,3.7V8h0.9V3.7z M5.9,16.3c0,1.5,1,2.7,2.3,2.7H10V20H8.3
+	C6.5,20,5,18.3,5,16.3V12h0.9V16.3z M12.7,1.1c1.3,0,2.3,1.2,2.3,2.7V8H16V3.7C16,1.7,14.5,0,12.7,0H11v1.1H12.7z M15.1,16.3
+	c0,1.5-1,2.7-2.3,2.7H11V20h1.7c1.8,0,3.3-1.7,3.3-3.7V12h-0.9V16.3z"/>
+</svg>

src/assets/styles/v-layout.scss

@@ -100,7 +100,17 @@ $--base-super-radius: 24px;
 .font-small {
   font-size: $--base-small-font
 }
-
+.v-button-small {
+  &.el-button--small {
+    font-size: 14px;
+    color: #000;
+    &:hover,&:focus{
+      background-color: rgba($--color-primary,.05);
+      border-color: rgba($--color-primary,.2);
+      color: $--color-primary;
+    }
+  }
+}
 .el-button--primary {
   background-color: $--color-primary !important;
   border-color: $--color-primary !important;
@@ -110,6 +120,7 @@ $--base-super-radius: 24px;
 /* 页面 表格 */
 .v-ecode-form {
   height: calc(100vh - 130px);
+
   .el-form-item {
     position: relative
   }
@@ -300,6 +311,44 @@ $--base-super-radius: 24px;
       color: $--color-primary;
     }
   }
+  .el-radio-button.is-active {
+    &.type0 .el-radio-button__inner:before {
+      background: url("~@/assets/ai-images/image-size-1-1-a.svg");
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    &.type1 .el-radio-button__inner:before {
+      background: url("~@/assets/ai-images/image-size-1-2-a.svg");
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    &.type2 .el-radio-button__inner:before {
+      background: url("~@/assets/ai-images/image-size-3-2-a.svg");
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    &.type3 .el-radio-button__inner:before {
+      background: url("~@/assets/ai-images/image-size-3-4-a.svg");
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    &.type4 .el-radio-button__inner:before {
+      background: url("~@/assets/ai-images/image-size-9-16-a.svg");
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    &.type5 .el-radio-button__inner:before {
+      background: url("~@/assets/ai-images/image-size-16-9-a.svg");
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+  }
 }
 
 /* 页面 选择 行内 */
@@ -352,6 +401,23 @@ $--base-super-radius: 24px;
   }
 }
 
+.v-popover-popper {
+  margin-bottom: $--base-small-space !important;
+padding-left: $--base-mini-space;
+  padding-right: $--base-mini-space;
+  .el-popover__title{padding-left:$--base-small-space; font-weight: bold; color: rgba(0, 0, 0, .45)}
+  .popper__arrow {
+    display: none
+  }
+  &.ratio {
+    width: 220px !important;
+  }
+  &.style {
+    &.style{height: 320px;}
+    width: 180px !important;
+  }
+}
+
 /* 页面 滑块 */
 .v-slide {
   .el-slider__input {
@@ -364,7 +430,11 @@ $--base-super-radius: 24px;
   .el-input-number--small .el-input__inner {
     padding: 0;
     border-color: $--border-color-light !important;
-  }.el-slider__button-wrapper{margin-left: 10px}
+  }
+
+  .el-slider__button-wrapper {
+    margin-left: 10px
+  }
 
   .el-input-number__decrease, .el-input-number__increase {
     display: none
@@ -550,17 +620,21 @@ body {
     position: relative;
     z-index: 1;
     width: 350px;
-    height:100%;
+    height: 100%;
     transition: all .4s;
 
     &.types {
       width: 480px;
     }
+
     &.hide.types {
-      margin-right: -480px; opacity: 0;
+      margin-right: -480px;
+      opacity: 0;
     }
+
     &.hide {
-      margin-right: -350px; opacity: 0;
+      margin-right: -350px;
+      opacity: 0;
     }
   }
 }
@@ -1365,3 +1439,80 @@ body {
     }
   }
 }
+
+.ai-popover-list {
+
+  .ai-popover-list-item {
+    padding: $--base-mini-space $--base-small-space;
+
+    border-radius: $--base-small-radius;
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .04)
+    }
+
+    .label {
+      margin-left: $--base-mini-space;
+      color: #000;
+      font-size: $--base-small-font
+    }
+
+    .img {
+      border-radius: $--base-small-radius;
+      overflow: hidden;
+
+      img {
+        width: 42px;
+        height: 42px;
+      }
+    }
+
+    .icon {
+      width: 30px;
+      height: 30px;
+
+      &.type-1 {
+        background: url("~@/assets/ai-images/image-size-1-1.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 60%;
+      }
+
+      &.type-2 {
+        background: url("~@/assets/ai-images/image-size-1-2.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 60%;
+      }
+
+      &.type-3 {
+        background: url("~@/assets/ai-images/image-size-3-2.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 60%;
+      }
+
+      &.type-4 {
+        background: url("~@/assets/ai-images/image-size-3-4.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 60%;
+      }
+
+      &.type-5 {
+        background: url("~@/assets/ai-images/image-size-9-16.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 60%;
+      }
+
+      &.type-6 {
+        background: url("~@/assets/ai-images/image-size-16-9.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 60%;
+      }
+    }
+  }
+}

src/views/pages/AI-Image-Generate/dialog.vue

@@ -96,6 +96,7 @@
                     show-stops
                     :min="1"
                     :max="4">
+                    <div>asdf</div>
                   </el-slider>
                 </el-form-item>
             </el-form>

src/views/pages/AI-Image-Generate/index.vue

@@ -17,10 +17,36 @@
         ></el-input>
         <div class="ai-pages-input-bot row flex-align-center">
           <div class="left col row flex-align-center">
-            <el-button size="mini"><i class="iconfont icon-image-model ai-icon-small"></i>生图模型</el-button>
-            <el-button size="mini"><i class="iconfont icon-reference-image ai-icon-small"></i>参考图</el-button>
-            <el-button size="mini"><i class="iconfont icon-proportion ai-icon-small"></i>比例</el-button>
-            <el-button size="mini"><i class="iconfont icon-style ai-icon-small"></i>风格</el-button>
+            <div class="m-r-small">
+              <el-button size="small" class="v-button-small"><i class="iconfont icon-image-model ai-icon-small"></i>生图模型</el-button>
+            </div>
+            <div class="m-r-small">
+              <el-button size="small" class="v-button-small"><i class="iconfont icon-reference-image ai-icon-small"></i>参考图</el-button>
+            </div>
+            <div class="m-r-small">
+              <el-popover placement="top" width="200" title="比例" popper-class="v-popover-popper ratio" trigger="click">
+                <div class="ai-popover-list ratio">
+                  <div class="ai-popover-list-item row flex-align-center" v-for="(item,index) in imagesList" :key="index">
+                    <div class="icon" :class="'type-'+item.value"></div>
+                    <div class="label col">{{ item.label }}</div>
+                  </div>
+                </div>
+                <el-button class="v-button-small" slot="reference" size="small"><i class="iconfont icon-proportion ai-icon-small"></i>比例
+                </el-button>
+              </el-popover>
+            </div>
+            <div class="m-r-small">
+              <el-popover placement="top" width="200" title="风格" popper-class="v-popover-popper style v-overflow-y" trigger="click">
+                <div class="ai-popover-list style">
+                  <div class="ai-popover-list-item row flex-align-center" v-for="(item,index) in imagesList1" :key="index">
+                    <div class="img"><img src="@/assets/ai-test/jimeng-2025-05-22-136.jpeg"></div>
+                    <div class="label col">{{ item.label }}</div>
+                  </div>
+                </div>
+                <el-button class="v-button-small" slot="reference" size="small"><i class="iconfont icon-style ai-icon-small"></i>风格
+                </el-button>
+              </el-popover>
+            </div>
           </div>
           <div class="right row flex-align-center">
             <i class="iconfont icon-voice ai-icon-nomal pointer"></i>
@@ -92,6 +118,47 @@ export default {
     return {
       textarea: undefined,
       activeName: '1',
+      imagesList: [{
+        value: '1',
+        label: '1:1 正方形，头像'
+      }, {
+        value: '2',
+        label: '2:1 社交媒体，自拍'
+      }, {
+        value: '3',
+        label: '3:2 文章配图，插画'
+      }, {
+        value: '4',
+        label: '4:3 广告宣传，静物'
+      }, {
+        value: '5',
+        label: '9:16 手机壁纸，人像'
+      }, {
+        value: '6',
+        label: '16:9 桌面壁纸，风景'
+      }],
+      imagesList1: [{
+        value: '1',
+        label: '人物摄影'
+      }, {
+        value: '2',
+        label: '艺术'
+      }, {
+        value: '3',
+        label: '国风插画'
+      }, {
+        value: '4',
+        label: '动漫'
+      }, {
+        value: '5',
+        label: '3D渲染'
+      }, {
+        value: '6',
+        label: '商品'
+      }, {
+        value: '6',
+        label: '风景'
+      }],
     }
   },
   mounted() {

src/views/pages/AI-Video-Generate/index.vue

@@ -17,14 +17,35 @@
         ></el-input>
         <div class="ai-pages-input-bot row flex-align-center">
           <div class="left col row flex-align-center">
-            <el-button size="mini"><i class="iconfont icon-video-model ai-icon-small"></i>视频模型</el-button>
-            <el-button size="mini"><i class="iconfont icon-reference-image ai-icon-small"></i>参考图</el-button>
-            <el-button size="mini"><i class="iconfont icon-proportion ai-icon-small"></i>比例</el-button>
-            <el-button size="mini"><i class="iconfont icon-time ai-icon-small"></i>时长</el-button>
-          </div>
-          <div class="right row flex-align-center">
-            <i class="iconfont icon-voice ai-icon-nomal pointer"></i>
-            <img src="@/assets/ai-images/icon_send.svg" class="ai-send-btn"/>
+            <div class="m-r-small">
+              <el-button size="small" class="v-button-small"><i class="iconfont icon-image-model ai-icon-small"></i>视频模型</el-button>
+            </div>
+            <div class="m-r-small">
+              <el-button size="small" class="v-button-small"><i class="iconfont icon-reference-image ai-icon-small"></i>参考图</el-button>
+            </div>
+            <div class="m-r-small">
+              <el-popover placement="top" width="200" title="比例" popper-class="v-popover-popper ratio" trigger="click">
+                <div class="ai-popover-list ratio">
+                  <div class="ai-popover-list-item row flex-align-center" v-for="(item,index) in imagesList" :key="index">
+                    <div class="icon" :class="'type-'+item.value"></div>
+                    <div class="label col">{{ item.label }}</div>
+                  </div>
+                </div>
+                <el-button class="v-button-small" slot="reference" size="small"><i class="iconfont icon-proportion ai-icon-small"></i>比例
+                </el-button>
+              </el-popover>
+            </div>
+            <div class="m-r-small">
+              <el-popover placement="top" width="200" title="时长" popper-class="v-popover-popper times v-overflow-y" trigger="click">
+                  <div class="ai-popover-list times">
+                    <div class="ai-popover-list-item row flex-align-center" v-for="(item,index) in imagesList1" :key="index">
+                      <div class="label col">{{ item.label }}</div>
+                    </div>
+                  </div>
+                <el-button class="v-button-small" slot="reference" size="small"><i class="iconfont icon-time ai-icon-small"></i>风格
+                </el-button>
+              </el-popover>
+            </div>
           </div>
         </div>
       </div>
@@ -86,6 +107,23 @@ export default {
     return {
       textarea: undefined,
       activeName: '1',
+      imagesList: [{
+        value: '1',
+        label: '1:1 正方形，头像'
+      },{
+        value: '5',
+        label: '9:16 手机壁纸，人像'
+      }, {
+        value: '6',
+        label: '16:9 桌面壁纸，风景'
+      }],
+      imagesList1: [{
+        value: '1',
+        label: '5s'
+      }, {
+        value: '2',
+        label: '10s'
+      }],
     }
   },
   mounted() {

src/views/pages/AI-Voice-Generate/dialog.vue

@@ -96,8 +96,8 @@
                 </el-slider>
               </el-form-item>
               <el-form-item label="音色" class="v-item-block">
-                <el-select v-model="form.timbre" placeholder="请选择" class="v-select" style="width: 100%"
-                           popper-class="v-select-popper">
+                  <el-select v-model="form.timbre" placeholder="请选择" class="v-select" style="width: 100%"
+                             popper-class="v-select-popper">
                   <el-option
                     v-for="item in timbreOptions"
                     :key="item.value"

src/views/pages/AI-Voice-Generate/index.vue

@@ -17,10 +17,10 @@
         ></el-input>
         <div class="ai-pages-input-bot row flex-align-center">
           <div class="left col row flex-align-center">
-            <el-button size="mini"><i class="iconfont icon-speech-model ai-icon-small"></i>语音模型</el-button>
-            <el-button size="mini"><i class="iconfont icon-triple-speed ai-icon-small"></i>倍速</el-button>
-            <el-button size="mini"><i class="iconfont icon-play ai-icon-small"></i>音量</el-button>
-            <el-button size="mini"><i class="iconfont icon-timbre ai-icon-small"></i>音色</el-button>
+            <el-button size="small" class="v-button-small"><i class="iconfont icon-speech-model ai-icon-small"></i>语音模型</el-button>
+            <el-button size="small" class="v-button-small"><i class="iconfont icon-triple-speed ai-icon-small"></i>倍速</el-button>
+            <el-button size="small" class="v-button-small"><i class="iconfont icon-play ai-icon-small"></i>音量</el-button>
+            <el-button size="small" class="v-button-small"><i class="iconfont icon-timbre ai-icon-small"></i>音色</el-button>
           </div>
           <div class="right row flex-align-center">
             <i class="iconfont icon-voice ai-icon-nomal pointer"></i>