布局先提交一波

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">
-        <div class="clear-icon"/>
-        <!-- todo 聊天操作栏-->
+      <el-row justify="end" class="fill mar-l8 gap-8">
+        <!--聊天操作栏-->
+        <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>