Merge branch 'beta' into 'master'

chore: 应用设置代码规范

See merge request !82

src/views/personal-space/personal-app-setting/components/agent-associated-knowledge.vue

@@ -5,10 +5,11 @@ import { Plus, RightOne } from '@icon-park/vue-next'
 import { fetchGetKnowledgeListByKdIds } from '@/apis/knowledge'
 import AssociatedKnowledgeModal from './associated-knowledge-modal.vue'
 import { KnowledgeItem } from '../../personal-knowledge/types'
+import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 
 const { t } = useI18n()
 
-const knowledgeConfig = defineModel<{ knowledgeIds: number[] }>('knowledgeConfig', { required: true })
+const knowledgeConfig = defineModel<PersonalAppConfigState['knowledgeConfig']>('knowledgeConfig', { required: true })
 
 const isShowAssociatedKnowledgeModel = ref(false)
 const knowledgeConfigExpandedNames = ref<string[]>([])
@@ -19,16 +20,18 @@ watch(
   () => knowledgeConfig.value.knowledgeIds,
   async (newKdIds) => {
     if (newKdIds.length > 0) {
-      knowledgeConfigExpandedNames.value = ['knowledge']
       await handleGetKnowledgeListByIds()
 
-      knowledgeConfig.value.knowledgeIds = []
-      selectKnowledgeList.value.forEach((knowledgeItem) => {
-        knowledgeConfig.value.knowledgeIds.push(knowledgeItem.id)
-      })
+      if (selectKnowledgeList.value.length !== newKdIds.length) {
+        knowledgeConfig.value.knowledgeIds = []
+        selectKnowledgeList.value.forEach((knowledgeItem) => {
+          knowledgeConfig.value.knowledgeIds.push(knowledgeItem.id)
+        })
+      }
+      knowledgeConfig.value.knowledgeIds.length && (knowledgeConfigExpandedNames.value = ['knowledge'])
     }
   },
-  { once: true },
+  { once: true, immediate: true },
 )
 
 const isHoverKnowledgeItem = computed(() => (kdId: number) => {

src/views/personal-space/personal-app-setting/components/agent-memory-setting.vue

 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Plus, Help, MoreOne, Edit, Copy, ReduceOne, RightOne } from '@icon-park/vue-next'
 import MemoryVariableModal, { MemoryVariableForm } from './memory-variable-modal.vue'
@@ -16,20 +16,10 @@ const isOpenLongMemory = ref(false)
 const isShowMemoryVariableModal = ref(false)
 const memoryVariableModal = ref<InstanceType<typeof MemoryVariableModal> | null>(null)
 
-watch(
-  () => isLongMemory.value,
-  (newValue) => {
-    isOpenLongMemory.value = newValue === 'Y'
-  },
-  { once: true },
-)
-
-watch(
-  () => variableStructure.value,
-  (newValue) => {
-    newValue?.length && (memoryExpandedNames.value = ['memoryVariable'])
-  },
-)
+onMounted(() => {
+  isOpenLongMemory.value = isLongMemory.value === 'Y'
+  variableStructure.value?.length && (memoryExpandedNames.value = ['memoryVariable'])
+})
 
 function handleUpdateMemoryExpandedNames(expandedNames: string[]) {
   memoryExpandedNames.value = expandedNames

src/views/personal-space/personal-app-setting/components/agent-model-setting.vue

 <script setup lang="ts">
-import { computed, h, onMounted, reactive, VNodeChild } from 'vue'
+import { computed, h, onMounted, reactive, ref, VNodeChild } from 'vue'
 import { SelectOption } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { Help, Down } from '@icon-park/vue-next'
 import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 import { DiversityModeItem, diversityModeList } from '@/data/agent-setting-data'
-import { fetchGetLargeModelList } from '@/apis/agent-application'
+import { fetchGetLargeModelInfo, fetchGetLargeModelList } from '@/apis/agent-application'
 
 const { t } = useI18n()
 
 let modalListOptions = reactive<SelectOption[]>([])
 let modalListRenderLabel: (option: SelectOption) => VNodeChild
 
-const personalAppConfig = defineModel<PersonalAppConfigState>('personalAppConfig', { required: true })
-const currentDiversityMode = defineModel<string>('currentDiversityMode', { required: true })
-const currentLargeModelIcon = defineModel<string>('currentLargeModelIcon', { required: true })
+const commModelConfig = defineModel<PersonalAppConfigState['commModelConfig']>('commModelConfig', { required: true })
+
+const currentLargeModelIcon = ref('')
+const currentDiversityMode = ref('balance')
 
 const isDisabledCommModelConfig = computed(() => {
   return currentDiversityMode.value !== 'custom'
@@ -22,6 +23,23 @@ const isDisabledCommModelConfig = computed(() => {
 
 onMounted(() => {
   handleGetLargeModelList()
+  handleGetLargeModelInfo()
+
+  const { temperature, topP } = commModelConfig.value
+
+  switch (temperature) {
+    case 0.1:
+      currentDiversityMode.value = topP === 0.1 ? 'accurate' : 'custom'
+      break
+    case 0.5:
+      currentDiversityMode.value = topP === 0.7 ? 'balance' : 'custom'
+      break
+    case 0.95:
+      currentDiversityMode.value = topP === 0.7 ? 'creative' : 'custom'
+      break
+    default:
+      currentDiversityMode.value = 'custom'
+  }
 })
 
 // 获取大模型列表
@@ -64,6 +82,15 @@ async function handleGetLargeModelList() {
   }
 }
 
+// 获取当前大模型信息
+async function handleGetLargeModelInfo() {
+  const res = await fetchGetLargeModelInfo<{ icon: string }>(commModelConfig.value.largeModel)
+
+  if (res.code === 0) {
+    currentLargeModelIcon.value = res.data.icon
+  }
+}
+
 // 更换大模型
 function handleUpdateLargeModel(_value: string, option: SelectOption) {
   currentLargeModelIcon.value = option.icon as string
@@ -72,9 +99,9 @@ function handleUpdateLargeModel(_value: string, option: SelectOption) {
 function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
   const { value, topP, temperature, communicationTurn } = diversityModeItem
   currentDiversityMode.value = value
-  personalAppConfig.value.commModelConfig.topP = topP
-  personalAppConfig.value.commModelConfig.temperature = temperature
-  personalAppConfig.value.commModelConfig.communicationTurn = communicationTurn
+  commModelConfig.value.topP = topP
+  commModelConfig.value.temperature = temperature
+  commModelConfig.value.communicationTurn = communicationTurn
 }
 </script>
 
@@ -87,7 +114,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
         >
           <img :src="currentLargeModelIcon || '@/assets/images/lingjing-icon.png'" class="mr-1 h-4 w-4" />
           <span class="line-clamp-1 w-[100px] text-xs text-[#5c5f66]">
-            {{ personalAppConfig.commModelConfig.largeModel }}
+            {{ commModelConfig.largeModel }}
           </span>
           <Down theme="outline" size="16" fill="#333" class="ml-1.5 text-base outline-none" />
         </div>
@@ -103,7 +130,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
         </span>
       </div>
       <NSelect
-        v-model:value="personalAppConfig.commModelConfig.largeModel"
+        v-model:value="commModelConfig.largeModel"
         class="model-select"
         :options="modalListOptions"
         :render-label="modalListRenderLabel"
@@ -157,18 +184,18 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
 
           <div class="mx-5 flex flex-1">
             <NSlider
-              v-model:value="personalAppConfig.commModelConfig.topP"
+              v-model:value="commModelConfig.topP"
               :default-value="0"
               :step="0.01"
               :min="0"
               :max="1"
               :disabled="isDisabledCommModelConfig"
             />
-            <span class="ml-4 w-8">{{ personalAppConfig.commModelConfig.topP }}</span>
+            <span class="ml-4 w-8">{{ commModelConfig.topP }}</span>
           </div>
 
           <NInputNumber
-            v-model:value="personalAppConfig.commModelConfig.topP"
+            v-model:value="commModelConfig.topP"
             placeholder=""
             :step="0.01"
             :min="0"
@@ -206,18 +233,18 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
 
           <div class="mx-5 flex flex-1">
             <NSlider
-              v-model:value="personalAppConfig.commModelConfig.temperature"
+              v-model:value="commModelConfig.temperature"
               :default-value="0"
               :step="0.01"
               :min="0.01"
               :max="1"
               :disabled="isDisabledCommModelConfig"
             />
-            <span class="ml-4 w-[32px]">{{ personalAppConfig.commModelConfig.temperature }}</span>
+            <span class="ml-4 w-[32px]">{{ commModelConfig.temperature }}</span>
           </div>
 
           <NInputNumber
-            v-model:value="personalAppConfig.commModelConfig.temperature"
+            v-model:value="commModelConfig.temperature"
             placeholder=""
             :step="0.01"
             :min="0"
@@ -255,16 +282,16 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
 
           <div class="mx-5 flex flex-1">
             <NSlider
-              v-model:value="personalAppConfig.commModelConfig.communicationTurn"
+              v-model:value="commModelConfig.communicationTurn"
               :default-value="3"
               :step="1"
               :min="0"
               :max="100"
             />
-            <span class="ml-4 w-8">{{ personalAppConfig.commModelConfig.communicationTurn }}</span>
+            <span class="ml-4 w-8">{{ commModelConfig.communicationTurn }}</span>
           </div>
           <NInputNumber
-            v-model:value="personalAppConfig.commModelConfig.communicationTurn"
+            v-model:value="commModelConfig.communicationTurn"
             :step="1"
             :min="0"
             :max="100"

src/views/personal-space/personal-app-setting/components/app-setting.vue

 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { FormInst, InputInst } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
+import { Emitter } from 'mitt'
+import { storeToRefs } from 'pinia'
 import { useThrottleFn } from '@vueuse/core'
 import CustomIcon from '@/components/custom-icon/custom-icon.vue'
 import { Help, People, RightOne } from '@icon-park/vue-next'
@@ -16,8 +17,6 @@ import {
   fetchCreateAgentTitleAndDesc,
   fetchCreateFeaturedQuestions,
   fetchCreatePreamble,
-  fetchGetDebugApplicationInfo,
-  fetchGetLargeModelInfo,
   fetchSaveAgentApplication,
 } from '@/apis/agent-application'
 import { fetchCustomEventSource } from '@/composables/useEventSource'
@@ -28,20 +27,18 @@ import AgentDialogueSetting from './agent-dialogue-setting.vue'
 
 const { t } = useI18n()
 
-const router = useRouter()
-
 const personalAppConfigStore = usePersonalAppConfigStore()
 
+const { baseInfo, commConfig, commModelConfig, knowledgeConfig } = storeToRefs(personalAppConfigStore)
+
+const emitter = inject<Emitter<MittEvents>>('emitter')
+
 const defaultPrompt = t(
   'personal_space_module.agent_module.agent_setting_module.agent_config_module.agent_system_template_message',
 )
 
-const currentLargeModelIcon = ref('') // 当前大模型icon
-
 const commConfigExpandedNames = ref<string[]>(['continuousQuestion'])
 
-const isInitGetAgentAppDetail = ref(false)
-
 const isFullScreenLoading = ref(false) // 是否全面加载中
 
 const isShowAutoConfigModal = ref(false) // 是否显示自动配置对话框
@@ -56,59 +53,52 @@ const personalAppFormRef = ref<FormInst | null>(null)
 const agentSystemInputRef = ref<InputInst | null>(null)
 
 const personalAppRules = {
-  baseInfo: {
-    agentTitle: [
-      {
-        required: true,
-        message: t(
-          'personal_space_module.agent_module.agent_setting_module.agent_config_module.agent_title_input_rule_message',
-        ),
-        trigger: 'blur',
-      },
-    ],
-  },
+  agentTitle: [
+    {
+      required: true,
+      message: t(
+        'personal_space_module.agent_module.agent_setting_module.agent_config_module.agent_title_input_rule_message',
+      ),
+      trigger: 'blur',
+    },
+  ],
 }
 
-const currentDiversityMode = ref('balance')
-
 let generateAgentTitleAndDescController: AbortController | null = null
 let generateAgentAvatarController: AbortController | null = null
 let generatePreambleController: AbortController | null = null
 let generateFeaturedQuestionsController: AbortController | null = null
 let generateAgentSystemController: AbortController | null = null
 
-const personalAppConfig = computed(() => {
-  return personalAppConfigStore.$state
-})
-
-const isUpdatePersonalAgentConfig = computed(() => {
-  return !isInitGetAgentAppDetail.value
-})
-
 watch(
-  () => personalAppConfig.value,
+  () => personalAppConfigStore.$state,
   () => {
-    isUpdatePersonalAgentConfig.value && handleUpdatePersonalAppId()
+    if (!baseInfo.value.agentId) {
+      handleUpdatePersonalAppId()
+    }
   },
   { deep: true, once: true },
 )
 
 watch(
-  () => personalAppConfig.value,
+  () => personalAppConfigStore.$state,
   () => {
-    isUpdatePersonalAgentConfig.value && handleSavePersonalAppConfig()
+    handleSavePersonalAppConfig()
   },
   { deep: true },
 )
 
 onMounted(async () => {
-  if (router.currentRoute.value.params.agentId) {
-    isInitGetAgentAppDetail.value = true
-    await handleGetAgentApplicationDetail(router.currentRoute.value.params.agentId as string)
-    isInitGetAgentAppDetail.value = false
-  }
-
-  await handleGetLargeModelInfo()
+  emitter?.on('isGetAgentDetail', () => {
+    ;['preamble', 'featuredQuestions']
+      .filter((property) => {
+        const commConfigProperty = commConfig.value[property as keyof PersonalAppConfigState['commConfig']]
+        return commConfigProperty && !(Array.isArray(commConfigProperty) && commConfigProperty.length === 0)
+      })
+      .forEach((property) => {
+        commConfigExpandedNames.value.push(property)
+      })
+  })
 })
 
 onUnmounted(() => {
@@ -117,57 +107,12 @@ onUnmounted(() => {
 
 const handleSavePersonalAppConfig = useThrottleFn(
   async () => {
-    personalAppConfig.value.baseInfo.agentId && (await handleSaveAgentApplication())
+    baseInfo.value.agentId && (await handleSaveAgentApplication())
   },
   () => (isFullScreenLoading.value ? 6000 : 2000),
   true,
 )
 
-async function handleGetAgentApplicationDetail(agentId: string) {
-  const res = await fetchGetDebugApplicationInfo<PersonalAppConfigState>(agentId)
-
-  if (res.code === 0) {
-    personalAppConfigStore.updatePersonalAppConfigState({
-      ...res.data,
-      baseInfo: {
-        ...res.data.baseInfo,
-        agentAvatar:
-          res.data.baseInfo.agentAvatar || 'https://gsst-poe-sit.gz.bcebos.com/data/20240911/1726041369632.webp',
-      },
-    })
-    ;['preamble', 'featuredQuestions']
-      .filter((property) => personalAppConfig.value.commConfig[property as keyof PersonalAppConfigState['commConfig']])
-      .forEach((property) => {
-        commConfigExpandedNames.value.push(property)
-      })
-
-    const { temperature, topP } = personalAppConfig.value.commModelConfig
-
-    switch (temperature) {
-      case 0.1:
-        currentDiversityMode.value = topP === 0.1 ? 'accurate' : 'custom'
-        break
-      case 0.5:
-        currentDiversityMode.value = topP === 0.7 ? 'balance' : 'custom'
-        break
-      case 0.95:
-        currentDiversityMode.value = topP === 0.7 ? 'creative' : 'custom'
-        break
-      default:
-        currentDiversityMode.value = 'custom'
-    }
-  }
-}
-
-// 获取大模型信息
-async function handleGetLargeModelInfo() {
-  const res = await fetchGetLargeModelInfo<{ icon: string }>(personalAppConfig.value.commModelConfig.largeModel)
-
-  if (res.code === 0) {
-    currentLargeModelIcon.value = res.data.icon
-  }
-}
-
 // 保存应用配置
 async function handleSaveAgentApplication() {
   await fetchSaveAgentApplication<PersonalAppConfigState>(personalAppConfigStore.$state)
@@ -190,13 +135,13 @@ function handleShowAutoConfigModal() {
 }
 
 function handleShowOptimizeAgentSystemModal() {
-  if (!personalAppConfig.value.baseInfo.agentSystem) return
+  if (!baseInfo.value.agentSystem) return
 
   isShowOptimizeAgentSystemModal.value = true
 }
 
 function handleSettingDefaultPrompt() {
-  personalAppConfig.value.baseInfo.agentSystem = defaultPrompt
+  baseInfo.value.agentSystem = defaultPrompt
 }
 
 function handleUploadAvatarOversize() {
@@ -206,7 +151,7 @@ function handleUploadAvatarOversize() {
 }
 
 async function handleAIGenerateAgentAvatar() {
-  if (generateAgentAvatarLoading.value || !personalAppConfig.value.baseInfo.agentTitle) {
+  if (generateAgentAvatarLoading.value || !baseInfo.value.agentTitle) {
     return
   }
 
@@ -215,14 +160,14 @@ async function handleAIGenerateAgentAvatar() {
 
   const res = await fetchCreateAgentAvatar(
     {
-      agentTitle: personalAppConfig.value.baseInfo.agentTitle,
-      agentDesc: personalAppConfig.value.baseInfo.agentDesc,
+      agentTitle: baseInfo.value.agentTitle,
+      agentDesc: baseInfo.value.agentDesc,
     },
     generateAgentAvatarController,
   ).finally(() => (generateAgentAvatarLoading.value = false))
 
   if (res.code === 0) {
-    personalAppConfig.value.baseInfo.agentAvatar = res.data as string
+    baseInfo.value.agentAvatar = res.data as string
   }
 }
 
@@ -239,9 +184,9 @@ async function handleAIGeneratePreamble() {
 
   const res = await fetchCreatePreamble<string>(
     {
-      agentTitle: personalAppConfig.value.baseInfo.agentTitle,
-      agentDesc: personalAppConfig.value.baseInfo.agentDesc,
-      agentSystem: personalAppConfig.value.baseInfo.agentSystem,
+      agentTitle: baseInfo.value.agentTitle,
+      agentDesc: baseInfo.value.agentDesc,
+      agentSystem: baseInfo.value.agentSystem,
     },
     generatePreambleController,
   ).finally(() => (generatePreambleLoading.value = false))
@@ -250,7 +195,7 @@ async function handleAIGeneratePreamble() {
     try {
       const content = res.data.replace(/^```json|```$/g, '')
       const preamble = JSON.parse(content)['output']
-      personalAppConfig.value.commConfig.preamble = preamble
+      commConfig.value.preamble = preamble
     } catch (error) {
       window.$message.error(
         t('personal_space_module.agent_module.agent_setting_module.agent_config_module.generate_format_error_message'),
@@ -272,14 +217,14 @@ async function handleAIGenerateFeaturedQuestions() {
 
   const res = await fetchCreateFeaturedQuestions<string[]>(
     {
-      agentTitle: personalAppConfig.value.baseInfo.agentTitle,
-      agentDesc: personalAppConfig.value.baseInfo.agentDesc,
+      agentTitle: baseInfo.value.agentTitle,
+      agentDesc: baseInfo.value.agentDesc,
     },
     generateFeaturedQuestionsController,
   ).finally(() => (generateFeaturedQuestionsLoading.value = false))
 
   if (res.code === 0) {
-    personalAppConfig.value.commConfig.featuredQuestions = res.data
+    commConfig.value.featuredQuestions = res.data
   }
 }
 
@@ -313,19 +258,19 @@ async function handleCreateAgentTitleAndDesc(input: string) {
   )
 
   if (res.code === 0) {
-    personalAppConfig.value.baseInfo.agentTitle = res.data.agentTitle
-    personalAppConfig.value.baseInfo.agentDesc = res.data.agentDesc
+    baseInfo.value.agentTitle = res.data.agentTitle
+    baseInfo.value.agentDesc = res.data.agentDesc
   }
 }
 
 function handleSettingAgentSystem(agentSystem: string) {
-  personalAppConfig.value.baseInfo.agentSystem = agentSystem
+  baseInfo.value.agentSystem = agentSystem
   isShowOptimizeAgentSystemModal.value = false
 }
 
 function handleAIGenerateAgentSystem() {
   return new Promise((resolve, reject) => {
-    personalAppConfig.value.baseInfo.agentSystem = ''
+    baseInfo.value.agentSystem = ''
     generateAgentSystemController = new AbortController()
 
     fetchCustomEventSource({
@@ -345,7 +290,7 @@ function handleAIGenerateAgentSystem() {
           useThrottleFn(
             () => {
               nextTick(() => {
-                personalAppConfig.value.baseInfo.agentSystem += data
+                baseInfo.value.agentSystem += data
                 agentSystemInputRef.value!.textareaElRef!.scrollTop =
                   agentSystemInputRef.value?.textareaElRef?.scrollHeight || 0
               })
@@ -405,11 +350,7 @@ function handleStopGenerate() {
         </div>
       </div>
 
-      <AgentModelSetting
-        v-model:personal-app-config="personalAppConfig"
-        v-model:current-diversity-mode="currentDiversityMode"
-        v-model:current-large-model-icon="currentLargeModelIcon"
-      />
+      <AgentModelSetting v-model:comm-model-config="commModelConfig" />
     </div>
 
     <div class="flex h-[calc(100vh-56px-56px)]">
@@ -433,7 +374,7 @@ function handleStopGenerate() {
             <div class="justify-left flex items-start pl-5">
               <div class="relative mr-2 w-[72px]">
                 <UploadImage
-                  v-model:image-url="personalAppConfig.baseInfo.agentAvatar"
+                  v-model:image-url="baseInfo.agentAvatar"
                   :max-image-size="1024 * 1024 * 3"
                   @oversize="handleUploadAvatarOversize"
                 >
@@ -456,7 +397,7 @@ function handleStopGenerate() {
                 <div
                   class="text-theme-color mt-3 flex h-[28px] items-center justify-between rounded-md border border-[#d4d6d9] px-2"
                   :class="
-                    generateAgentAvatarLoading || !personalAppConfig.baseInfo.agentTitle
+                    generateAgentAvatarLoading || !baseInfo.agentTitle
                       ? 'cursor-not-allowed opacity-50'
                       : 'cursor-pointer hover:border-[#d4e5ff] hover:bg-[#e6f0ff]'
                   "
@@ -471,14 +412,14 @@ function handleStopGenerate() {
               <div class="flex flex-1">
                 <NForm
                   ref="personalAppFormRef"
-                  :model="personalAppConfig"
+                  :model="baseInfo"
                   :rules="personalAppRules"
                   label-placement="left"
                   class="flex-1"
                 >
-                  <NFormItem feedback-class="p-0.5! text-xs!" path="baseInfo.agentTitle">
+                  <NFormItem feedback-class="p-0.5! text-xs!" path="agentTitle">
                     <NInput
-                      v-model:value="personalAppConfig.baseInfo.agentTitle"
+                      v-model:value="baseInfo.agentTitle"
                       :maxlength="50"
                       show-count
                       :placeholder="
@@ -491,7 +432,7 @@ function handleStopGenerate() {
                   </NFormItem>
                   <NFormItem feedback-style="display:none">
                     <NInput
-                      v-model:value="personalAppConfig.baseInfo.agentDesc"
+                      v-model:value="baseInfo.agentDesc"
                       type="textarea"
                       :maxlength="100"
                       :rows="3"
@@ -544,11 +485,7 @@ function handleStopGenerate() {
                 <template #trigger>
                   <div
                     class="text-theme-color flex items-center border-r border-[#e8e9eb] pr-[9px]"
-                    :class="
-                      personalAppConfig.baseInfo.agentSystem
-                        ? 'cursor-pointer hover:opacity-80'
-                        : 'cursor-not-allowed opacity-50'
-                    "
+                    :class="baseInfo.agentSystem ? 'cursor-pointer hover:opacity-80' : 'cursor-not-allowed opacity-50'"
                     @click="handleShowOptimizeAgentSystemModal"
                   >
                     <div
@@ -596,7 +533,7 @@ function handleStopGenerate() {
           <div class="flex flex-1 p-1 pl-6">
             <NInput
               ref="agentSystemInputRef"
-              v-model:value="personalAppConfig.baseInfo.agentSystem"
+              v-model:value="baseInfo.agentSystem"
               type="textarea"
               class="prompt-input not-resize text-xs! flex-1"
               :maxlength="1400"
@@ -619,16 +556,16 @@ function handleStopGenerate() {
           </span>
         </div>
 
-        <AgentAssociatedKnowledge v-model:knowledge-config="personalAppConfig.knowledgeConfig" />
+        <AgentAssociatedKnowledge v-model:knowledge-config="knowledgeConfig" />
 
         <AgentMemorySetting
-          v-model:variable-structure="personalAppConfig.commConfig.variableStructure"
-          v-model:is-long-memory="personalAppConfig.commConfig.isLongMemory"
+          v-model:variable-structure="commConfig.variableStructure"
+          v-model:is-long-memory="commConfig.isLongMemory"
         />
 
         <AgentDialogueSetting
           v-model:comm-config-expanded-names="commConfigExpandedNames"
-          v-model:comm-config="personalAppConfig.commConfig"
+          v-model:comm-config="commConfig"
           v-model:generate-featured-questions-loading="generateFeaturedQuestionsLoading"
           v-model:generate-preamble-loading="generatePreambleLoading"
           @generate-preamble="handleAIGeneratePreamble"

src/views/personal-space/personal-app-setting/components/page-narbar.vue

@@ -2,6 +2,7 @@
 import { computed, h, onMounted, readonly, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { storeToRefs } from 'pinia'
 import CustomIcon from '@/components/custom-icon/custom-icon.vue'
 import { useUserStore } from '@/store/modules/user'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
@@ -23,6 +24,8 @@ const router = useRouter()
 const userStore = useUserStore()
 const personalAppConfigStore = usePersonalAppConfigStore()
 
+const { baseInfo } = storeToRefs(personalAppConfigStore)
+
 const avatarOptions = readonly([
   {
     label: () => h('span', {}, t('common_module.logout')),
@@ -52,8 +55,6 @@ const agentAppOptionList = [
   },
 ]
 
-const personalAppConfig = computed(() => personalAppConfigStore.$state)
-
 const isShowModifiedTime = computed(() => {
   return isUpdateAgentAppConfig.value && personalAppConfigStore.baseInfo.agentId
 })
@@ -73,7 +74,7 @@ const isAllowClickPublish = computed(() => {
 })
 
 watch(
-  () => personalAppConfig.value,
+  () => personalAppConfigStore.$state,
   () => {
     if (isInitGetAgentAppDetail.value) {
       isInitGetAgentAppDetail.value = false
@@ -86,14 +87,6 @@ watch(
   { deep: true },
 )
 
-watch(
-  () => personalAppConfig.value.knowledgeConfig.knowledgeIds,
-  (newKnowledgeIds) => {
-    newKnowledgeIds.length && (isInitGetAgentAppDetail.value = true)
-  },
-  { once: true },
-)
-
 onMounted(() => {
   if (router.currentRoute.value.params.agentId) {
     isInitGetAgentAppDetail.value = true
@@ -118,7 +111,7 @@ function handleDropdownSelect(key: string) {
   }
 }
 
-function handleSwtichAgentAppOption(currentTabKey: string) {
+function handleSwitchAgentAppOption(currentTabKey: string) {
   if (!isAllowClickPublish.value) return
 
   currentAgentAppTabKey.value = currentTabKey
@@ -133,14 +126,16 @@ function handleSwtichAgentAppOption(currentTabKey: string) {
 }
 
 async function handlePublishApplication() {
-  if (!personalAppConfig.value.baseInfo.agentTitle) {
+  if (!baseInfo.value.agentTitle) {
     window.$message.warning(t('personal_space_module.agent_module.agent_setting_module.missing_agent_title_message'))
     return
   }
 
   publishBtnLoading.value = true
 
-  const res = await fetchPublishApplication(personalAppConfig.value).finally(() => (publishBtnLoading.value = false))
+  const res = await fetchPublishApplication(personalAppConfigStore.$state).finally(
+    () => (publishBtnLoading.value = false),
+  )
 
   if (res.code === 0) {
     window.$message.success(t('common_module.publish_success_message'))
@@ -149,10 +144,10 @@ async function handlePublishApplication() {
     router.replace({
       name: router.currentRoute.value.name as string,
       query: { tabKey: 'publish' },
-      params: { agentId: personalAppConfig.value.baseInfo.agentId },
+      params: { agentId: baseInfo.value.agentId },
     })
 
-    personalAppConfig.value.baseInfo.agentPublishStatus = 'publish'
+    baseInfo.value.agentPublishStatus = 'publish'
 
     emit('changeAgentAppTabKey', 'publish')
   }
@@ -210,7 +205,7 @@ async function handlePublishApplication() {
           currentAgentAppTabKey === optionItem.value ? 'text-theme-color bg-white' : 'text-[#84868c]',
           isAllowClickPublish ? 'hover:text-theme-color cursor-pointer' : 'cursor-not-allowed',
         ]"
-        @click="handleSwtichAgentAppOption(optionItem.value)"
+        @click="handleSwitchAgentAppOption(optionItem.value)"
       >
         <NPopover v-if="!isAllowClickPublish" trigger="hover">
           <template #trigger>
@@ -228,7 +223,7 @@ async function handlePublishApplication() {
         type="primary"
         class="min-w-20!"
         :bordered="false"
-        :disabled="!personalAppConfig.baseInfo.agentId"
+        :disabled="!baseInfo.agentId"
         :loading="publishBtnLoading"
         @click="handlePublishApplication"
       >

src/views/personal-space/personal-app-setting/personal-app-setting.vue

 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { Emitter } from 'mitt'
+import { useI18n } from 'vue-i18n'
 import PageNarBar from './components/page-narbar.vue'
 import AppSetting from './components/app-setting.vue'
 import AppPreview from './components/app-preview.vue'
 import AppPublish from './components/app-publish.vue'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
+import { PersonalAppConfigState } from '@/store/types/personal-app-config'
+import { fetchGetDebugApplicationInfo } from '@/apis/agent-application'
+
+const { t } = useI18n()
 
 const router = useRouter()
 
 const personalAppConfigStore = usePersonalAppConfigStore()
 
-const currentAgentAppTabKey = ref('config')
+const emitter = inject<Emitter<MittEvents>>('emitter')
+
+const currentAgentAppTabKey = ref('')
+const isAgentInitLoading = ref(false)
+
+watch(
+  () => currentAgentAppTabKey.value,
+  () => {
+    nextTick(() => {
+      emitter?.emit('isGetAgentDetail')
+    })
+  },
+)
+
+onMounted(async () => {
+  if (router.currentRoute.value.params.agentId) {
+    await handleGetAgentDetail(router.currentRoute.value.params.agentId as string)
+  }
 
-onMounted(() => {
   if (router.currentRoute.value.query.tabKey) {
     currentAgentAppTabKey.value = router.currentRoute.value.query.tabKey as string
+  } else {
+    currentAgentAppTabKey.value = 'config'
   }
 })
 
@@ -23,13 +47,34 @@ onUnmounted(() => {
   personalAppConfigStore.resetPersonalAppConfigState()
 })
 
+async function handleGetAgentDetail(agentId: string) {
+  isAgentInitLoading.value = true
+  await fetchGetDebugApplicationInfo<PersonalAppConfigState>(agentId)
+    .then((res) => {
+      if (res.code === 0) {
+        isAgentInitLoading.value = false
+        personalAppConfigStore.updatePersonalAppConfigState({
+          ...res.data,
+          baseInfo: {
+            ...res.data.baseInfo,
+            agentAvatar:
+              res.data.baseInfo.agentAvatar || 'https://gsst-poe-sit.gz.bcebos.com/data/20240911/1726041369632.webp',
+          },
+        })
+      }
+    })
+    .catch(() => {
+      router.replace({ name: 'Home' })
+    })
+}
+
 function handleChangeAgentAppTabKey(currentTabKey: string) {
   currentAgentAppTabKey.value = currentTabKey
 }
 </script>
 
 <template>
-  <main class="h-full min-w-[1280px]">
+  <main class="relative h-full min-w-[1280px]">
     <PageNarBar @change-agent-app-tab-key="handleChangeAgentAppTabKey" />
 
     <div class="h-content flex w-full flex-1">
@@ -43,5 +88,30 @@ function handleChangeAgentAppTabKey(currentTabKey: string) {
         <AppPublish />
       </div>
     </div>
+
+    <Transition name="mask" mode="out-in">
+      <div
+        v-show="isAgentInitLoading"
+        class="z-100 bg-background-color absolute inset-0 flex flex-col items-center justify-center"
+      >
+        <n-spin :size="38" />
+
+        <div class="text-theme-color mt-[30px] text-[14px]">{{ t('common_module.loading') }}...</div>
+      </div>
+    </Transition>
   </main>
 </template>
+
+<style lang="scss" scoped>
+.mask-enter-active,
+.mask-leave-active {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+}
+
+.mask-enter-from,
+.mask-leave-to {
+  opacity: 0;
+}
+</style>

types/mitt-events.d.ts

 declare type MittEvents = {
   selectQuestion: string
+  isGetAgentDetail: void
 }