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

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'
import { storeToRefs } from 'pinia'
import { options } from '@/entrypoints/sidepanel/mock'
import { Reading, Upload, Paperclip, Scissor, AlarmClock, CirclePlus, Edit } from '@element-plus/icons-vue'
import { useMsgStore } from '@/store/modules/msg'
import { ElMessage } from 'element-plus'

const { AIModel } = storeToRefs(useMsgStore())
const selectInput = ref(null)
const emit = defineEmits(['readClick', 'uploadFile', 'handleCapture', 'addNewDialogue', 'hisRecords', 'handleCurrentChange', 'handelIntelligentFillingClick'])

watchEffect(() => {
  selectInput.value = AIModel.value?.value
})
const handleUpload = (e) => {
  if (!props.upload) {
   e.stopPropagation()
    ElMessage.warning('智能填表需要先发送指令，再上传文件')
  }
  
}
const props = defineProps({
  upload: {
    type: Boolean,
  },

})
</script>

<template>
  <div class="px-3 py-2 flex justify-between items-center w-full max-w-[720px]">
    <div class="flex items-center">
      <el-select placement="top" v-model="selectInput" placeholder="选择"
        @change="(e: any) => emit('handleCurrentChange', e)" style="width: 120px;margin-right: 2px">
        <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>
      <el-tooltip effect="dark" content="阅读此页，开启后将会根据左侧网页中的内容做出回答" placement="top">
        <el-button class="tools_btn" link :icon="Reading" @click="emit('readClick')" />
      </el-tooltip>
      <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 class="tools_btn" link :icon="Paperclip" @click="handleUpload"/>
        </el-tooltip>
      </el-upload>
      <!-- <el-tooltip effect="dark" content="截屏" placement="top">
        <el-button class="tools_btn" link :icon="Scissor" @click="emit('handleCapture')" />
      </el-tooltip> -->
      <el-tooltip effect="dark" content="智能填表：选择后，在输入框描述填表流程" placement="top">
        <el-button class="tools_btn" link @click="emit('handelIntelligentFillingClick')">
          <span class="iconfont icon-zhinengtianxie"></span>
        </el-button>
      </el-tooltip>

    </div>
    <div class="flex items-center">
      <el-tooltip effect="dark" content="历史记录" placement="top">
        <el-button class="tools_btn1" link @click="emit('hisRecords')">
          <span class="iconfont icon-shouye"></span>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="新对话" placement="top">
        <el-button class="tools_btn1" link @click="emit('addNewDialogue')">
          <span class="iconfont icon-xinjianduihua"></span>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tools_btn {
  font-size: 18px;
  margin-left: 0 !important;
}

.tools_btn1 {
  font-size: 18px;
  margin-left: 0 !important;
}
</style>