smartai2dian0/src/modules/intelligent/ModalAddIntel.vue

<template>
  <a-modal
    v-model:visible="showModal"
    title-align="start"
    :align-center="false"
    :esc-to-close="false"
    :footer="false"
    top="15vh"
    width="60vw"
    @before-cancel="handleCancel"
  >
    <template #title>
      <div class="model-title">新建智能体</div>
    </template>
    <div class="section">
      <CardDefault
        v-for="item in default_intelligent"
        :key="item.name"
        :name="item.name"
        :description="item.description"
        :labels="item.labels"
      >
        <template #footer>
          <a-button class="add-btn" @click="addNewIntelligent(item)"> <icon-plus /> 新建 </a-button>
        </template>
      </CardDefault>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue';
import CardDefault from './CardDefault.vue';
import { getDefaultIntelligent } from '../../views/manage/common';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['update:visible', 'add_intelligent', 'createRAGFLOWIntelligent']);

const showModal = computed(() => props.visible);

const default_intelligent = getDefaultIntelligent();

const handleCancel = () => {
  emit('update:visible', false);
};

const addNewIntelligent = (item) => {
  // TODO: 根据item中的type区分新建智能体的类型
  if (item.type === 'ragflow') {
    // TODO: 新建RAGFLOW智能体
    emit('update:visible', false);
    emit('createRAGFLOWIntelligent');
    // } else if (item.type === 'advanced-chat') {
    //   // TODO: 新建ARGFLOW智能体
    //   emit('update:visible', false);
    //   emit('add_intelligent', item);
    // } else if (item.type === 'agent-chat') {
    // } else if (item.type === 'workflow') {
    // }
  } else {
    emit('update:visible', false);
    emit('add_intelligent', item);
  }
};
</script>
<style scoped lang="css">
.model-title {
  font-size: 16px;
  font-weight: bold;
}
.section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: flex-start;
  gap: 20px 20px;
}
.section .add-btn {
  width: 100%;
}
.section .add-btn:hover {
  background-color: rgb(var(--arcoblue-6));
  color: var(--color-bg-1);
}
.arco-form-item-content-wrapper {
  border-color: var(--color-neutral-4);
}
</style>