feat: 应用增加AI自动配置

src/apis/agent-application.ts

@@ -78,31 +78,54 @@ export function fetchCreateContinueQuestions<T>(payload: { input: string }) {
 }
 
 /**
- * * @param { agentTitle: 标题 agentDesc: 描述 }
+ * * @param { payload: { agentTitle: 标题 agentDesc: 描述 }, controller: 控制取消请求 }
  * @returns AI生成应用头像
  */
-export function fetchCreateAgentAvatar<T>(payload: { agentTitle: string; agentDesc: string }) {
+export function fetchCreateAgentAvatar<T>(
+  payload: { agentTitle: string; agentDesc: string },
+  controller: AbortController,
+) {
   return request.post<T>('/agentApplicationInfoRest/createAgentApplicationAvatar.json', payload, {
     timeout: 120000,
+    signal: controller.signal,
   })
 }
 
 /**
- * * @param { agentTitle: 标题 agentDesc: 描述  agentSystem: 指令 }
+ * * @param { payload: { agentTitle: 标题, agentDesc: 描述, agentSystem: 指令 }, controller: 控制取消请求 }
  * @returns AI生成开场白
  */
-export function fetchCreatePreamble<T>(payload: { agentTitle: string; agentDesc: string; agentSystem: string }) {
+export function fetchCreatePreamble<T>(
+  payload: { agentTitle: string; agentDesc: string; agentSystem: string },
+  controller: AbortController,
+) {
   return request.post<T>('/agentApplicationInfoRest/createPreamble.json', payload, {
     timeout: 120000,
+    signal: controller.signal,
   })
 }
 
 /**
- * * @param { agentTitle: 标题 agentDesc: 描述 }
+ * * @param { payload: { agentTitle: 标题 agentDesc: 描述 }, controller: 控制取消请求 }
  * @returns AI生成推荐问
  */
-export function fetchCreateFeaturedQuestions<T>(payload: { agentTitle: string; agentDesc: string }) {
+export function fetchCreateFeaturedQuestions<T>(
+  payload: { agentTitle: string; agentDesc: string },
+  controller: AbortController,
+) {
   return request.post<T>('/agentApplicationInfoRest/createFeaturedQuestions.json', payload, {
     timeout: 120000,
+    signal: controller.signal,
+  })
+}
+
+/**
+ * * @param { payload: { input: 自动配置信息 }, controller: 控制取消请求 }
+ * @returns 生成应用标题和描述
+ */
+export function fetchCreateAgentTitleAndDesc<T>(payload: { input: string }, controller: AbortController) {
+  return request.post<T>('/agentApplicationInfoRest/createAgentTitleAndDesc.json', payload, {
+    timeout: 120000,
+    signal: controller.signal,
   })
 }

src/components/custom-modal/custom-modal.vue

 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 import { modalHeaderStyle, modalContentStyle, modalFooterStyle } from './modal-style'
 
 interface Props {
@@ -36,9 +36,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const slots = useSlots()
+
 const modalBasicStyle = {
   width: props.width + 'px',
-  height: props.height + 'px',
+  minHeight: props.height + 'px',
   borderRadius: props.borderRadius + 'px',
 }
 
@@ -85,7 +87,9 @@ function handleDetele() {
     </div>
 
     <template #footer>
-      <div class="flex w-full items-center justify-end">
+      <slot v-if="slots.footer" name="footer" />
+
+      <div v-else class="flex w-full items-center justify-end">
         <NButton class="h-[32px]! rounded-md! px-6!" @click="handleCloseModal"> {{ cancelBtnText }} </NButton>
         <NButton
           :loading="btnLoading"

src/views/personal-space/personal-app-setting/components/auto-config-modal.vue

+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import CustomModal from '@/components/custom-modal/custom-modal.vue'
+import CustomIcon from '@/components/custom-icon/custom-icon.vue'
+
+interface Props {
+  isShowModal: boolean
+  btnLoading: boolean
+  modalTitle: string
+}
+
+interface Emits {
+  (e: 'update:isShowModal', value: boolean): void
+  (e: 'comfirm', value: string): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+
+const autoConfigInputValue = ref('')
+
+const autoConfigInputType = ref<'random' | 'input'>('random')
+
+const showModal = computed({
+  get() {
+    return props.isShowModal
+  },
+  set(value: boolean) {
+    emit('update:isShowModal', value)
+  },
+})
+
+const isDisabledBtn = computed(() => {
+  return !autoConfigInputValue.value
+})
+
+const isRandomBtnLoading = computed(() => {
+  return props.btnLoading && autoConfigInputType.value === 'random'
+})
+
+const isInputBtnLoading = computed(() => {
+  return props.btnLoading && autoConfigInputType.value === 'input'
+})
+
+watch(
+  () => showModal.value,
+  () => {
+    showModal.value && (autoConfigInputValue.value = '')
+  },
+)
+
+function handleCloseModal() {
+  emit('update:isShowModal', false)
+}
+
+function handleComfirm(inputType: 'random' | 'input') {
+  autoConfigInputType.value = inputType
+  emit('comfirm', inputType === 'random' ? '' : autoConfigInputValue.value)
+}
+</script>
+
+<template>
+  <CustomModal v-model:is-show="showModal" :title="modalTitle" :width="600">
+    <template #content>
+      <div class="mb-3 flex h-8 w-full items-center rounded bg-[#FFF4E6] px-4">
+        <CustomIcon icon="ep:warning-filled" class="mr-2 h-4 w-4 text-[#FFA500]" />
+        <span>生成结果将覆盖当前的配置内容，请确认是否继续生成</span>
+      </div>
+      <NInput
+        v-model:value="autoConfigInputValue"
+        type="textarea"
+        :rows="10"
+        :disabled="false"
+        placeholder="请告诉我你想创建一个什么样的应用，大模型将为你自动生成"
+        class="rounded-lg!"
+      />
+    </template>
+
+    <template #footer>
+      <div class="flex w-full items-center justify-end">
+        <NButton class="h-[32px]! rounded-md! px-6!" @click="handleCloseModal"> 取 消 </NButton>
+        <NButton
+          :loading="isRandomBtnLoading"
+          class="h-[32px]! rounded-md! px-6! ml-4!"
+          @click="handleComfirm('random')"
+        >
+          随机生成
+        </NButton>
+        <NButton
+          :loading="isInputBtnLoading"
+          type="primary"
+          :disabled="isDisabledBtn"
+          class="h-[32px]! px-6! rounded-md! ml-4!"
+          @click="handleComfirm('input')"
+        >
+          AI生成
+        </NButton>
+      </div>
+    </template>
+  </CustomModal>
+</template>