pvs_agent/src/entrypoints/sidepanel/component/tools.vue

<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'

const value = ref(options[0].value)

const emit = defineEmits(['readClick', 'uploadFile', 'handleCapture', 'addNewDialogue', 'hisRecords'])
</script>

<template>
  <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-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="mr-2"></span>
      <el-tooltip effect="dark" content="阅读此页，开启后将会根据左侧网页中的内容做出回答" placement="top">
        <el-button style="font-size:18px" link :icon="Reading" circle @click="emit('readClick')" />
      </el-tooltip>
      <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'">
        <el-tooltip effect="dark" content="文件上传" placement="top">
          <el-button style="font-size:18px" link :icon="Paperclip" circle />
        </el-tooltip>
      </el-upload>
      <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="flex items-center">
      <el-tooltip effect="dark" content="历史记录" placement="top">
        <el-button style="font-size:18px" link :icon="AlarmClock" circle @click="emit('hisRecords')" />
      </el-tooltip>
      <span class="mr-2"></span>
      <el-tooltip effect="dark" content="新对话" placement="top">
        <el-button style="font-size:18px" link :icon="CirclePlus" circle @click="emit('addNewDialogue')" />
      </el-tooltip>
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>