fix: 修改对话框与内容样式

web_ui/src/components/Ai.vue

@@ -41,7 +41,7 @@
                 :key="item.id"
                 v-if="item.source === 'user'"
             >
-              <div><img src="~@/assets/image/logo.png" alt="" /></div>
+              <!--              <div><img src="~@/assets/image/logo.png" alt="" /></div>-->
               <div class="message message-sended">
                 <div class="triangle"></div>
                 {{ item.content }}
@@ -174,18 +174,6 @@
       </Upload>
     </div>
     <div class="question">
-      <div class="select">
-        <div class="btn" @click="togglePlugis">
-          {{ checkedLength > 0 ? '已选插件' : '选插件' }}
-          <img
-              v-if="showPop"
-              src="~@/assets/image/close-blue.png"
-              alt=""
-              class="img"
-          />
-          <img v-else src="~@/assets/image/add.png" alt="" class="img" />
-        </div>
-      </div>
       <div class="input-panel">
         <div class="text-panel">
           <div class="file" @mouseenter="showClose = true" v-if="showFile">
@@ -217,27 +205,33 @@
           ></textarea>
         </div>
 
-        <voice-input-button
-            v-model="inputText"
-            @record="showResult"
-            @record-start="recordStart"
-            @record-stop="recordStop"
-            @record-blank="recordNoResult"
-            @record-failed="recordFailed"
-            @record-ready="recordReady"
-            @record-complete="recordComplete"
-            interactiveMode="touch"
-            class="voice"
-            color="#5c62ea"
-            tipPosition="top"
-        >
-          <template slot="no-speak">没听清您说的什么</template>
-        </voice-input-button>
+        <div class="select">
+          <div class="btn" @click="togglePlugis">
+            <div class='btn-icon' :class="{close:showPop}">+</div>
+            {{ checkedLength > 0 ? '已选素材' : '素材' }}
+          </div>
+        </div>
+        <!--        <voice-input-button
+                    v-model="inputText"
+                    @record="showResult"
+                    @record-start="recordStart"
+                    @record-stop="recordStop"
+                    @record-blank="recordNoResult"
+                    @record-failed="recordFailed"
+                    @record-ready="recordReady"
+                    @record-complete="recordComplete"
+                    interactiveMode="touch"
+                    class="voice"
+                    color="#5c62ea"
+                    tipPosition="top"
+                >
+                  <template slot="no-speak">没听清您说的什么</template>
+                </voice-input-button>-->
 
         <div class="send-panel" @click.stop="sendAi">
           <div class="send" :disabled="loading || inputText.length === 0">
             <img class="icon" src="~@/assets/image/send.png" />
-            <div class="name">发送</div>
+<!--            <div class="name">发送</div>-->
           </div>
         </div>
       </div>
@@ -1192,7 +1186,7 @@ export default {
 
   .agent {
     width: 100%;
-    height: calc(100% - 276px);
+    height: calc(100% - 180px);
 
     .sampale-panel {
       display: flex;
@@ -1325,29 +1319,28 @@ export default {
 
         .message {
           box-shadow: 0px 2 17px 1px rgba(41, 49, 88, 0.03);
-          padding: 16px 21px 0px 21px;
+          padding: 5px 0;
           max-width: calc(100% - 90px);
           border-radius: 11px;
           width: fit-content;
           text-align: left;
           font-family: PingFang SC, PingFang SC;
-          font-weight: 600;
-          font-size: 18px;
-          color: #ffffff;
+          font-size: 16px;
+          color: #404040;
           display: inline-block;
           position: relative;
         }
 
         .message-sended {
-          background: #456de2;
           box-shadow: 0px 2px 15px 1px rgba(41, 49, 88, 0.03);
-          border-radius: 10px 10px 10px 10px;
-          color: #fff;
-          padding: 14px 18px 14px 19px;
+          padding: 10px 17px;
+          color: #111111;
+          background: #E3EEFF;
+          border-radius: 12px 12px 12px 12px;
         }
 
         .message-revicied {
-          background: #fff;
+          //background: #fff;
           position: relative;
           // overflow: hidden;
           white-space: break-spaces;
@@ -1449,7 +1442,7 @@ export default {
   .pop {
     left: 67px;
     position: absolute;
-    bottom: 235px;
+    bottom: 185px;
     z-index: 1000;
     width: 300px;
     background: #ffffff;
@@ -1580,20 +1573,21 @@ export default {
   }
 
   .question {
-    height: 180px;
+    height: 140px;
     left: 67px;
     width: calc(100% - 140px);
-    background: white;
     position: absolute;
-    background: #ffffff;
-    box-shadow: 0px 2 17px 1px rgba(41, 49, 88, 0.03);
-    border-radius: 10px;
-    bottom: 45px;
+    bottom: 30px;
+    background: #FFFFFF;
+    box-shadow: 0px 8px 16px 1px rgba(0, 57, 124, 0.2);
+    border-radius: 16px;
+    border: 1px solid #4E69FF;
+
 
     .select {
       width: 100%;
       height: 50px;
-      border-bottom: 1px solid #f4f6fa;
+      //border-bottom: 1px solid #f4f6fa;
       padding-left: 20px;
       display: flex;
       align-items: center;
@@ -1601,30 +1595,51 @@ export default {
       .btn {
         padding: 0px 8px;
         cursor: pointer;
-        background: #eef1ff;
-        border-radius: 20px;
-        height: 30px;
         display: flex;
+        color: #666;
         align-items: center;
         justify-content: center;
+        height: 36px;
+        background: #FEFFFE;
+        border-radius: 8px 8px 8px 8px;
+        border: 1px solid #E3E4E4;
 
         .img {
           width: 20px;
           margin-left: 5px;
           height: 20px;
         }
+
+        .btn-icon {
+          width: 18px;
+          height: 18px;
+          font-size: 18px;
+          line-height: 1em;
+          border: 1px solid #666;
+          border-radius: 50%;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          transition: 0.3s;
+          margin-right: 4px;
+
+          &.close {
+            transform: rotate(45deg);
+          }
+        }
       }
 
       .btn:hover {
         color: #5c62ea;
+        border-color: #5c62ea;
       }
     }
 
     .input-panel {
-      height: calc(100% - 50px);
+      //height: calc(100% - 50px);
       position: relative;
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
+      border-radius: 16px;
+      overflow: hidden;
 
       .text-panel {
         display: flex;
@@ -1665,10 +1680,11 @@ export default {
         width: 100%;
         border: none;
         resize: none;
-        font-weight: normal;
         line-height: 26px;
-        font-size: 18px;
         max-height: 153px;
+        font-weight: 400;
+        font-size: 17px;
+        color: #111111;
 
         &:focus-visible {
           outline: none;
@@ -1683,26 +1699,24 @@ export default {
       }
 
       .send-panel {
-        width: 110px;
         cursor: pointer;
-        height: 40px;
-        background: linear-gradient(90deg, #5c62ea, #517de2);
-        border-radius: 20px;
-        bottom: 17px;
+        bottom: 10px;
         right: 17px;
         position: absolute;
         display: flex;
         justify-content: center;
         align-items: center;
+        width: 50px;
+        height: 48px;
+        background: linear-gradient( 124deg, #505DFF 0%, #418CFF 100%);
+        border-radius: 10px 10px 10px 10px;
 
         .send {
           display: flex;
 
           .icon {
-            width: 19px;
-            margin-top: 6px;
-            height: 19px;
-            margin-right: 7px;
+            width: 26px;
+            height: 26px;
           }
 
           .name {
@@ -1715,7 +1729,7 @@ export default {
       }
 
       .send-panel:hover {
-        background: #333be5;
+        background: #505DFF;
       }
 
       .voice {