smartai_desk_pc/src/modules/agent/AgentList.vue

<template>
  <div class="intell-list">
    <div class="intell-item" v-for="item in display_agent_list" :key="item.title" @click="changeAgent(item.id)">
      <img class="item-icon" :src="item.icon" alt="" />
      <div class="content">
        <div class="title">{{ item.title }}</div>
        <div class="des">{{ item.des_1 }}</div>
        <div class="des">{{ item.des_2 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import icon_1 from '../../assets/agent/agent_icon_1.svg';
import icon_2 from '../../assets/agent/agent_icon_2.svg';
import icon_3 from '../../assets/agent/agent_icon_3.svg';
import icon_4 from '../../assets/agent/agent_icon_4.svg';

// import { updateAgentUsedList } from '../chat-user/useAgentUsed';

// import { getAgentIcons, updateAgentIcons } from '../conversation-dialog/api-dialog'
// import { getUserName } from '../../utils/get-user-name'

const router = useRouter();

const props = defineProps({
  auth: Object
});

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

const agent_list = ref([
  {
    idx: '01',
    id: 'znwd',
    title: '智库问答',
    des_1: '知识库驱动',
    des_2: '精准解答专业问题',
    icon: icon_1,
    is_show: props.auth.znwd
  },
  {
    idx: '02',
    id: 'bgsc',
    title: '报告自动生成',
    des_1: '一键生成报告',
    des_2: '智能编辑与优化',
    icon: icon_2,
    is_show: props.auth.bgsc
  },
  {
    idx: '03',
    id: 'znws',
    title: '智能问数',
    des_1: '自然语言交互',
    des_2: '快速挖掘数据价值',
    icon: icon_3,
    is_show: props.auth.znws
  },
  {
    idx: '04',
    id: 'bgcl',
    title: '智能报表',
    des_1: '表格合并及处理',
    des_2: '精准识别异常数据',
    icon: icon_4,
    is_show: props.auth.bgcl
  }
]);

const display_agent_list = computed(() => {
  return agent_list.value.filter((item) => item.is_show);
});
const changeAgent = (id) => {
  //  || id== 'bgsc'
  // if (id == 'znws' || id == 'bgsc') {
  //   Message.warning('开发中，敬请期待')
  //   return
  // }
  const agent_list = window.AGENT;
  if (agent_list[id]) {
    router.push({
      path: '/conversation',
      query: {
        id: id
      }
    });
    emit('toConversation');
    // updateAgentUsedList(id);
  } else {
    Message.warning('开发中，敬请期待');
    return;
  }
};

onMounted(() => {
  // getAgentIconsFun()
  console.log(props.auth);
});
</script>

<style scoped lang="css">
.intell-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: flex-start;
  gap: 20px 20px;
  /* padding: 0 20px;
  padding-top: 10px; */
  overflow-y: auto;
}

.intell-item {
  box-sizing: border-box;
  /* min-width: 250px; */
  padding: 35px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #ffffff;

  border-radius: 20px;
  box-shadow: 0px 6 11px 0px rgba(10, 129, 126, 0.1);
}

.intell-item:hover {
  border: 1px solid var(--agent_hover);
}

.item-icon {
  width: 45px;
}

.intell-item .content {
  /* display: flex;
  flex-direction: column; */
  /* gap: 10px; */
  width: 100%;
}

.intell-item .title {
  /* font-family: SourceHanSansCN, SourceHanSansCN; */
  font-weight: bold;
  font-size: 16px;
  color: #181d1d;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
}

.intell-item .des {
  /* font-family: SourceHanSansCN, SourceHanSansCN; */
  font-weight: 400;
  font-size: 14px;
  color: #181d1d;
  line-height: 24px;
  text-align: center;
}
</style>