1

src/entrypoints/sidepanel/component/tools.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { options } from "@/entrypoints/sidepanel/mock";
-import { Reading, Upload, Paperclip, Scissor, AlarmClock, CirclePlus } from "@element-plus/icons-vue";
+import {ref} from "vue";
+import {options} from "@/entrypoints/sidepanel/mock";
+import {Reading, Upload, Paperclip, Scissor, AlarmClock, CirclePlus} from "@element-plus/icons-vue";
 
 const value = ref(options[0].value);
 
@@ -9,53 +9,42 @@ const emit = defineEmits(['readClick', 'uploadFile', 'handleCapture', 'addNewDia
 </script>
 
 <template>
-  <div class="tool_content">
-    <div class="tool_content_flex">
+  <div class="px-3 py-2 flex justify-between items-center">
+    <div class="flex items-center">
       <el-select v-model="value" placeholder="Select" style="width: 120px">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
+          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"/>
+        </el-option-group>
+
       </el-select>
-      <span class="separator"></span>
+      <span class="mr-2"></span>
       <el-tooltip effect="dark" content="阅读此页，开启后将会根据左侧网页中的内容做出回答" placement="top">
-        <el-button style="font-size:14px" :icon="Reading" circle @click="emit('readClick')" />
+        <el-button style="font-size:18px" link :icon="Reading" circle @click="emit('readClick')"/>
       </el-tooltip>
-      <span class="separator"></span>
+      <span class="mr-2"></span>
       <el-upload style="display:inline-block" :before-upload="(file: any) => emit('uploadFile', file)" :multiple="false"
-        name="file" :show-file-list="false" :accept="'.xlsx,.pdf,.doc,.docx'">
+                 name="file" :show-file-list="false" :accept="'.xlsx,.pdf,.doc,.docx'">
         <el-tooltip effect="dark" content="文件上传" placement="top">
-          <el-button style="font-size:14px" :icon="Paperclip" circle />
+          <el-button style="font-size:18px" link :icon="Paperclip" circle/>
         </el-tooltip>
       </el-upload>
-      <span class="separator"></span>
-      <el-tooltip effect="dark" content="截屏" placement="top">
-        <el-button style="font-size:14px" :icon="Scissor" circle @click="emit('handleCapture')" />
-      </el-tooltip>
+      <span class="mr-2"></span>
+            <el-tooltip effect="dark" content="截屏" placement="top">
+              <el-button style="font-size:14px" :icon="Scissor" circle @click="emit('handleCapture')" />
+            </el-tooltip>
     </div>
-    <div class="tool_content_flex">
+    <div class="flex items-center">
       <el-tooltip effect="dark" content="历史记录" placement="top">
-        <el-button style="font-size:14px" :icon="AlarmClock" circle @click="emit('hisRecords')" />
+        <el-button style="font-size:18px" link :icon="AlarmClock" circle @click="emit('hisRecords')"/>
       </el-tooltip>
-      <span class="separator"></span>
+      <span class="mr-2"></span>
       <el-tooltip effect="dark" content="新对话" placement="top">
-        <el-button style="font-size:14px" :icon="CirclePlus" circle @click="emit('addNewDialogue')" />
+        <el-button style="font-size:18px" link :icon="CirclePlus" circle @click="emit('addNewDialogue')"/>
       </el-tooltip>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.tool_content {
-  padding: 8px 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .tool_content_flex {
-    display: flex;
-    align-items: center;
-  }
 
-  .separator {
-    margin-right: 8px;
-  }
-}
 </style>