布局先提交一波

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <el-row class="home">
-      <chat class="fill" :config="setting"/>
+      <chat class="fill" :config="setting" @setting="showSettings=!showSettings"/>
       <settings class="mar-l16" v-show="showSettings" v-model="setting"/>
     </el-row>
   </div>
@@ -17,7 +17,7 @@ export default {
   components: {Settings, Chat},
   data() {
     return {
-      showSettings: true,
+      showSettings: false,
       setting: {
         model: new ChatGPT()
       },

src/assets/setting.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+    <path fill="#fff"
+          d="M764.416 254.72a351.68 351.68 0 0 1 86.336 149.184H960v192.064H850.752a351.68 351.68 0 0 1-86.336 149.312l54.72 94.72-166.272 96-54.592-94.72a352.64 352.64 0 0 1-172.48 0L371.136 936l-166.272-96 54.72-94.72a351.68 351.68 0 0 1-86.336-149.312H64v-192h109.248a351.68 351.68 0 0 1 86.336-149.312L204.8 160l166.208-96h.192l54.656 94.592a352.64 352.64 0 0 1 172.48 0L652.8 64h.128L819.2 160l-54.72 94.72zM704 499.968a192 192 0 1 0-384 0 192 192 0 0 0 384 0z"></path>
+</svg>

src/components/chat.vue

@@ -8,9 +8,10 @@
           <div class="desc" v-text="config.model.desc"/>
         </div>
       </div>
-      <el-row justify="end" class="fill mar-l8">
+      <el-row justify="end" class="fill mar-l8 gap-8">
-        <div class="clear-icon"/>
+        <!--聊天操作栏-->
-        <!-- todo 聊天操作栏-->
+        <div class="optIcon clear"/>
+        <div class="optIcon setting" @click="$emit('setting')"/>
       </el-row>
     </el-row>
     <thinking-bar v-show="loading"/>
@@ -98,11 +99,11 @@ export default {
     }
   }
 
-  .clear-icon {
+  .optIcon {
     box-sizing: border-box;
     height: 40px;
+    min-width: 40px;
     background-size: 24px 24px;
-    background-image: url("../assets/clear.svg");
     background-repeat: no-repeat;
     background-position: top center;
     cursor: pointer;
@@ -111,13 +112,29 @@ export default {
 
     &:after {
       font-size: 12px;
-      content: "清空历史";
       display: block;
+      text-align: center;
     }
 
     &:hover {
       opacity: 1;
     }
+
+    &.clear {
+      background-image: url("../assets/clear.svg");
+
+      &:after {
+        content: "清空历史";
+      }
+    }
+
+    &.setting {
+      background-image: url("../assets/setting.svg");
+
+      &:after {
+        content: "设置";
+      }
+    }
   }
 }
 </style>

src/components/thinkingBar.vue

@@ -15,69 +15,15 @@ export default {
   height: 2px;
   background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
   background-size: 100%;
-  animation: shrink-and-expand 2s ease-in-out infinite;
+  animation: shrink-and-expand 2s ease-in-out infinite alternate;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    width: 50%;
-    height: 100%;
-    background: inherit;
-  }
-
-  &::before {
-    border-top-left-radius: 2px;
-    border-bottom-left-radius: 2px;
-    left: 0;
-    transform-origin: left;
-    animation: shrink-left 2s ease-in-out infinite;
-  }
-
-  &::after {
-    border-top-left-radius: 2px;
-    border-bottom-left-radius: 2px;
-    right: 0;
-    transform-origin: right;
-    animation: shrink-right 2s ease-in-out infinite;
-  }
 
   @keyframes shrink-and-expand {
-    0%,
+    0%, 100% {
-    100% {
       transform: scaleX(1);
     }
-
     50% {
       transform: scaleX(0);
     }
   }
-
-  @keyframes shrink-left {
-
-    0%,
-    50% {
-      transform: scaleX(1);
-    }
-
-    50.1%,
-    100% {
-      transform: scaleX(0);
-    }
-  }
-
-  @keyframes shrink-right {
-
-    0%,
-    50% {
-      transform: scaleX(1);
-    }
-
-    50.1%,
-    100% {
-      transform: scaleX(0);
-    }
-  }
 }
 </style>