smartai2dian0/src/views/conversation/ConversationBoardContainer.vue

<template>
  <div class="conversation-board-container">
    <div class="conversation-board-left"></div>

    <div class="conversation-board-main">
      <BoardWelcome />

      <BoardTags @change="handleTagChange" />

      <template v-if="api_status === 2">
        <div class="infomations-container">
          <a-spin :size="32" />
        </div>
      </template>
      <template v-if="api_status === 3">
        <BoardAgentList @itemActive="handleItemActive" :list="list_agents" />

        <div class="infomations-container" v-if="list_agents.length === 0">
          <a-empty> {{ $t('conversation.history_empty') }} </a-empty>
        </div>
      </template>
      <template v-if="api_status === 4">
        <div class="infomations-container">
          <a-result status="warning" :title="api_message"> </a-result>
        </div>
      </template>
      <template v-if="api_status === 5">
        <div class="infomations-container">
          <a-result status="error" :title="api_message"> </a-result>
        </div>
      </template>

      <div class="conversation-board-placeholder"></div>
    </div>

    <div class="conversation-board-right"></div>
  </div>
</template>

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

import BoardWelcome from '../../modules/conversation-board/BoardWelcome.vue';
import BoardTags from '../../modules/conversation-board/BoardTags.vue';
import BoardAgentList from '../../modules/conversation-board/BoardAgentList.vue';

import useAgentList4Board from '../../modules/conversation-board/use-agent-list-4-board';

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

const selected_id = ref('');

const { api_status, api_message, list_agents, getAgentList } = useAgentList4Board();

const handleItemActive = (target_id) => {
  emit('agentActive', target_id);
};

/**
 * 处理请求参数
 */
const formatListOptions = () => {
  const obj = {};

  if (selected_id.value) {
    obj.label = selected_id.value;
  }

  return obj;
};

const handleRequest = () => {
  const opts = formatListOptions();

  getAgentList(opts);
};

const handleTagChange = (tag_id) => {
  selected_id.value = tag_id;

  handleRequest();
};

onMounted(() => {
  // 调用api
  handleRequest();
});
</script>

<style lang="css" scoped>
.conversation-board-container {
  display: flex;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
}
.conversation-board-left {
  width: 25%;
  flex-shrink: 0;
}
.conversation-board-right {
  width: 25%;
  flex-shrink: 0;
}
.conversation-board-main {
  /* width: 60%; */
  flex-grow: 1;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

  margin-top: 150px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 底部占位元素 */
.conversation-board-placeholder {
  height: 50px;
}

.conversation-board-main .infomations-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
</style>