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">{{ $t('management.create_intelligent_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 />&nbsp;{{ $t('management.create_btn') }}
          </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';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

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

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

const default_intelligent = computed(() => getDefaultIntelligent(t));

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

const addNewIntelligent = (item) => {
  // TODO: 根据item中的type区分新建智能体的类型
  if (item.type === 'agent-dialog') {
    // 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-border-3);
}
</style>