smartai_desk_pc/src/modules/conversation-chat/dialog-input/DataSourceManage.vue

<template>
  <a-dropdown position="top" class="my_custom_drop">
    <a-button class="btn" @click="toOpenDataSource">
      <img :src="icon_table" alt="" />
      <span>数据源管理</span>
      <icon-down />
    </a-button>
  </a-dropdown>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

import icon_file_a from '../../../assets/chat-report/drafy_icon_1.svg';
import icon_file_b from '../../../assets/chat-report/drafy_icon_2.svg';
import icon_file_c from '../../../assets/chat-report/drafy_icon_3.svg';

import { useThemeStore } from '../../../base/store/use-theme';
import { THEME_LIGHT, THEME_DARK, THEME_GREEN, THEME_PARTY } from '../../../base/variables';

const themeStore = useThemeStore();

const emit = defineEmits(['open_data_source']);

const icon_table = computed(() => {
  if (themeStore.value == THEME_GREEN) {
    return icon_file_a;
  } else if (themeStore.value == THEME_PARTY) {
    return icon_file_b;
  } else if (themeStore.value == THEME_LIGHT) {
    return icon_file_c;
  } else {
    return icon_file_a;
  }
});
const toOpenDataSource = () => {
  // console.log('toTemplateManage');
  emit('open_data_source');
};
onMounted(() => {});
</script>
<style scoped lang="css">
.icon {
  cursor: pointer;
  width: 24px;
}

.btn {
  background: var(--bg-title);
  border-radius: 20px;
  font-weight: 500;
  font-size: 14px;
  color: var(--primary-default);
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn:hover {
  background: var(--bg-title);
  color: var(--primary-default);
  opacity: 0.8;
}

.dopt-item {
  padding: 0px 20px;
}

.arco-dropdown-open .arco-icon-down {
  transform: rotate(180deg);
}
.dop {
  width: 160px;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border-bottom: 1px solid #e5e5e5;
}
.dop .dop-item {
  display: flex;
  flex-direction: column;
}
.dop-item .item-title {
  font-family: 思源黑体;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0px;
  color: #2c2c2c;
}
.dop-item .item-desc {
  font-family: 思源黑体;
  font-size: 12px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0px;
  color: #687272;
}
.dop-item-selected {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dop-item-selected img {
  width: 16px;
}
.dop-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 15px 0px 5px 0px;
}
.dop-bottom .icon {
  width: 16px;
}
</style>
<style>
.my_custom_drop .arco-dropdown {
  padding: 10px 0;
  border-radius: 12px;
}
</style>