smartai2dian0/src/modules/conversation-aside/Conversation-chat-mind-tools.vue

<template>
  <!-- <div class="mind-map-tools"> -->
  <a-tooltip :content="$t('conversation.zoom_in')" position="top" mini>
    <icon-plus class="icon" @click="zoomIn" />
  </a-tooltip>
  <a-tooltip :content="$t('conversation.zoom_out')" position="top" mini>
    <icon-minus class="icon" @click="zoomOut" />
  </a-tooltip>
  <a-tooltip :content="$t('conversation.fit')" position="top" mini>
    <icon-scan class="icon" @click="zoomReset" />
  </a-tooltip>
  <a-tooltip :content="$t('conversation.full_screen')" position="top" mini>
    <icon-fullscreen v-if="!props.isFullScreen" class="icon" @click="fullScreen" />
    <icon-fullscreen-exit v-else class="icon" @click="exitFullScreen" />
  </a-tooltip>
  <a-tooltip :content="$t('conversation.download')" position="top" mini>
    <icon-download class="icon" @click="download" />
  </a-tooltip>

  <!-- </div> -->
</template>

<script setup>
const props = defineProps({
  isFullScreen: Boolean
});

const emit = defineEmits(['toZoomIn', 'toZoomOut', 'toZoomReset', 'toFullScreen', 'toDownload', 'toExitFullScreen']);
const zoomIn = () => {
  emit('toZoomIn');
};
const zoomOut = () => {
  emit('toZoomOut');
};
const zoomReset = () => {
  emit('toZoomReset');
};
const fullScreen = () => {
  emit('toFullScreen');
};
const exitFullScreen = () => {
  emit('toExitFullScreen');
};
const download = () => {
  emit('toDownload');
};
</script>
<style scoped>
/* .mind-map-tools {
  display: flex;
} */
.icon {
  cursor: pointer;
  background-color: var(--color-fill-4);
  color: var(--color-bg-1);
  margin-right: 10px;
  padding: 5px;
  border-radius: 2px;
}
.icon:hover {
  background-color: var(--color-fill-3);
  color: var(--color-text-2);
}
</style>