Merge branch 'shirlyn'

src/apis/agent-application.ts

@@ -137,3 +137,28 @@ export function fetchCreateAgentTitleAndDesc<T>(payload: { input: string }, cont
 export function fetchGetLargeModelInfo<T>(modelName: string) {
   return request.post<T>(`/agentApplicationInfoRest/getLargeModelInfo.json?query=${modelName}`)
 }
+
+/**
+ * * @param agentId 应用Id
+ * @returns 收藏应用
+ */
+export function fetchApplicationsCollectionStatusChange<T>(agentId: string) {
+  return request.post<T>(`/agentApplicationInfoRest/collectOrCancelAgentInPerson.json?agentId=${agentId}`)
+}
+
+/**
+ *
+ * @param payload payload 应用参数
+ * @returns 上架应用
+ */
+export function fetchSalePublishApplication<T>(payload: object) {
+  return request.post<T>('/bizAgentApplicationMallRest/publishAgentToMall.json', payload)
+}
+
+/**
+ * * @param agentPublishId 发布应用表的id
+ * @returns 下架应用
+ */
+export function fetchRemoveSalePublishApplication<T>(agentPublishId: number) {
+  return request.post<T>(`/bizAgentApplicationMallRest/unSaleAgentInMall.json?agentPublishId=${agentPublishId}`)
+}

src/locales/langs/zh-cn.yaml

@@ -38,6 +38,7 @@ common_module:
   copy_success_message: '复制成功'
   delete_success_message: '删除成功'
   save_success_message: '保存成功'
+  save_fail_message: '保存失败'
   edit_success_message: '编辑成功'
   publish_success_message: '发布成功'
   clear_success_message: '清空成功'
@@ -58,6 +59,16 @@ common_module:
   accurate_mode: '精准模式'
   balance_mode: '平衡模式'
   creative_mode: '创意模式'
+  all: '全部'
+  collect: '收藏'
+  listing_successfully: '上架成功'
+  listing_failed: '上架失败'
+  removal_successfully: '下架成功'
+  removal_failed: '下架失败'
+  collect_successfully: '收藏成功'
+  collect_unsubscribed: '已取消收藏'
+  cancel: '取消'
+  preservation: '保存'
 
   dialogue_module:
     continue_question_message: '你可以继续提问'
@@ -74,6 +85,9 @@ common_module:
     copy: '复制'
     delete: '删除'
     view: '查看'
+    analysis: '分析'
+    listing_applications: '上架应用'
+    remove_applications: '下架应用'
 
   pagination_module:
     page_no: '条'
@@ -142,14 +156,17 @@ personal_space_module:
       large_model: '模型名称'
       agent_id: '应用ID'
       agent_publish_status: '发布状态'
-      modified_time: '最近编辑时间'
+      modified_time: '最近编辑'
       channel: '渠道'
       channel_popover_text: '查看发布详情'
       agent_copy: '的副本'
       empty_agent_list: '暂无应用'
-      search_empty_agent_list: '暂⽆搜索结果，请换⼀个关键词进⾏搜索'
+      search_empty_agent_list: '没有搜索到相关内容'
       delete_agent_dialog_title: '确定要删除选中的应用吗？'
       delete_agent_dialog_content: '删除后，如需再次使用，请重新创建'
+      remove_applications_dialog_title: '确定要下架应用吗？'
+      already_bottom: '已经到底啦'
+      application_empty: '未创建应用'
 
     agent_setting_module:
       modified: '已变更'
@@ -216,6 +233,38 @@ personal_space_module:
         continuous_question_default_desc: '根据用户最近一轮对话，在回复后自动提供3个提问建议。'
         continuous_question_close: '关闭'
         continuous_question_close_desc: '在每轮回复后，不会提供用户任何提问建议'
+        memory: '记忆'
+        add_memory_variable: '添加记忆变量'
+        memory_variable: '记忆变量'
+        memory_message:
+          '开发者可根据应用设定记忆变量，应用用户在对话过程中可以录入变量内容，每个变量支持存储一维、单个数据。
+          在对话过程中，应用将依据存储的变量值进行答复。下面以「旅游助手」为例：'
+        memory_variable_message: '记录聊天对话中的一维、单个的应用信息或用户信息，能让智能体回答更加个性化。'
+        memory_variable_action_edit: '编辑'
+        memory_variable_action_copy: '复制名称'
+        variable_name: '变量名称'
+        variable_value: '变量值'
+
+        memory_variable_modal:
+          edit_memory_variable: '编辑记忆变量'
+          memory_variable_message_tip: '删除变量或修改变量名称/描述，应用更新发布后会导致应用用户对应的变量数据被删除或重置为默认值，请谨慎操作'
+          memory_variable_table_name: '名称'
+          memory_variable_table_name_tip: '填写内容'
+          memory_variable_table_name_content: '1.仅支持英文、中文'
+          memory_variable_table_name_length: '2.长度50字以内'
+          memory_variable_table_default_value: '默认值'
+          default_value_tip: '开发者可以为应用用户预先设定默认值'
+          default_value_tip_example: '实例：北京'
+          memory_variable_table_action: '操作'
+          default_value_placeholder: '请输入'
+          name_placeholder: '请输入名称'
+          add_variable: '新增变量'
+
+          memory_variable_rules:
+            name_not_null: '请输入名称'
+            name_length: '名称长度不能超过50个字'
+            name_supports: '仅支持英文和中文'
+            name_not_duplicated: '名称不能重复'
 
         preview: '预览与调试'
 
@@ -241,6 +290,28 @@ personal_space_module:
         share_link: '分享链接'
         copy_share_url_success_message: '链接复制成功，快分享给你的好友吧！'
 
+      agent_sale_module:
+        application_square_release_setting: '应用广场发布配置'
+        application_classification: '应用分类'
+        application_classification_null: '应用分类不能为空'
+
+        application_classify:
+          media_entertainment: '媒体文娱'
+          education_training: '教育培训'
+          business_services: '商业服务'
+          medical_health: '医疗健康'
+          efficiency_tools: '效率工具'
+          office_personnel: '办公人事'
+          marketing_commerce: '营销电商'
+          finance: '金融'
+          law: '法律'
+          culture_tourism: '文旅'
+        is_copy: '是否允许复制'
+        yes: '是'
+        no: '否'
+        confirm_release: '确认发布'
+        copy_tip: '选择「是」代表您允许平台的开发者和用户，复制您的应用配置进行二次开发来创建新应用。注意：私有配置不支持复制（私有配置包含：知识库、数据库）'
+
   knowledge_module:
     search_knowledge_placeholder: '请输入知识库名称'
     knowledge_name: '知识库名称'

src/locales/langs/zh-hk.yaml

@@ -38,6 +38,7 @@ common_module:
   copy_success_message: '複製成功'
   delete_success_message: '刪除成功'
   save_success_message: '保存成功'
+  save_fail_message: '保存失敗'
   edit_success_message: '編輯成功'
   publish_success_message: '發佈成功'
   clear_success_message: '清空成功'
@@ -58,6 +59,16 @@ common_module:
   accurate_mode: '精準模式'
   balance_mode: '平衡模式'
   creative_mode: '創意模式'
+  all: '全部'
+  collect: '收藏'
+  listing_successfully: '上架成功'
+  listing_failed: '上架失敗'
+  removal_successfully: '下架成功'
+  removal_failed: '下架失敗'
+  collect_successfully: '收藏成功'
+  collect_unsubscribed: '已取消收藏'
+  cancel: '取消'
+  preservation: '保存'
 
   dialogue_module:
     continue_question_message: '你可以繼續提問'
@@ -74,6 +85,9 @@ common_module:
     copy: '複製'
     delete: '刪除'
     view: '查看'
+    analysis: '分析'
+    listing_applications: '上架應用'
+    remove_applications: '下架應用'
 
   pagination_module:
     page_no: '條'
@@ -142,14 +156,17 @@ personal_space_module:
       large_model: '模型名稱'
       agent_id: '應用ID'
       agent_publish_status: '發佈狀態'
-      modified_time: '最近編輯時間'
+      modified_time: '最近編輯'
       channel: '渠道'
       channel_popover_text: '查看發佈詳情'
       agent_copy: '的副本'
       empty_agent_list: '暫無應用'
-      search_empty_agent_list: '暫⽆搜索結果，請換⼀個關鍵詞進⾏搜索'
+      search_empty_agent_list: '沒有蒐索到相關內容'
       delete_agent_dialog_title: '確定要刪除選中的應用嗎？'
       delete_agent_dialog_content: '刪除後，如需再次使用，請重新創建'
+      remove_applications_dialog_title: '確定要下架應用嗎？'
+      already_bottom: '已經到底啦'
+      application_empty: '未創建應用'
 
     agent_setting_module:
       modified: '已變更'
@@ -216,6 +233,38 @@ personal_space_module:
         continuous_question_default_desc: '根據用戶最近一輪對話，在回覆後自動提供3個提問建議。'
         continuous_question_close: '關閉'
         continuous_question_close_desc: '在每輪迴復後，不會提供用戶任何提問建議'
+        memory: '記憶'
+        add_memory_variable: '添加記憶變數'
+        memory_variable: '記憶變量'
+        memory_message:
+          '开发者可根据应用设定记忆变量，应用用户在对话过程中可以录入变量内容，每个变量支持存储一维、单个数据。
+          在对话过程中，应用将依据存储的变量值进行答复。下面以「旅游助手」为例：'
+        memory_variable_message: '记录聊天对话中的一维、单个的应用信息或用户信息，能让智能体回答更加个性化。'
+        memory_variable_action_edit: '編輯'
+        memory_variable_action_copy: '複製名稱'
+        variable_name: '变量名稱'
+        variable_value: '变量值'
+
+        memory_variable_modal:
+          edit_memory_variable: '編輯記憶變數'
+          memory_variable_message_tip: '删除變數或修改變數名稱/描述，應用更新發佈後會導致應用用戶對應的變數數據被删除或重置為預設值，請謹慎操作'
+          memory_variable_table_name: '名稱'
+          memory_variable_table_name_tip: '填写内容'
+          memory_variable_table_name_content: '1.僅支持英文、中文'
+          memory_variable_table_name_length: '2.長度50字以内'
+          memory_variable_table_default_value: '預設值'
+          default_value_tip: '開發者可以為應用用戶預先設定預設值'
+          default_value_tip_example: '實例：北京'
+          memory_variable_table_action: '操作'
+          default_value_placeholder: '請輸入'
+          name_placeholder: '請輸入名稱'
+          add_variable: '新增變數'
+
+          memory_variable_rules:
+            name_not_null: '請求輸入名稱'
+            name_length: '名字長度不能超過50個字'
+            name_supports: '僅支持英文和中文'
+            name_not_duplicated: '名稱不能重複'
 
         preview: '預覽與調試'
 
@@ -241,6 +290,28 @@ personal_space_module:
         share_link: '分享鏈接'
         copy_share_url_success_message: '鏈接複製成功，快分享給你的好友吧！'
 
+      agent_sale_module:
+        application_square_release_setting: '應用廣場發佈配寘'
+        application_classification: '應用分類'
+        application_classification_null: '應用分類不能為空'
+
+        application_classify:
+          media_entertainment: '媒體文娛'
+          education_training: '教育培訓'
+          business_services: '商業服務'
+          medical_health: '醫療健康'
+          efficiency_tools: '效率工具'
+          office_personnel: '辦公人事'
+          marketing_commerce: '行銷電商'
+          finance: '金融'
+          law: '法律'
+          culture_tourism: '文旅'
+        is_copy: '是否允許複製'
+        yes: '是'
+        no: '否'
+        confirm_release: '確認發佈'
+        copy_tip: '選擇「是」代表您允許平臺的開發者和用戶，複製您的應用配寘進行二次開發來創建新應用。 注意：私有配寘不支持複製（私有配寘包含：知識庫、資料庫）'
+
   knowledge_module:
     search_knowledge_placeholder: '請輸入知識庫名稱'
     knowledge_name: '知識庫名稱'

src/store/modules/personal-app-config.ts

@@ -17,6 +17,7 @@ export function defaultPersonalAppConfigState(): PersonalAppConfigState {
       continuousQuestionStatus: 'default',
       continuousQuestionSystem: '',
       continuousQuestionTurn: 3,
+      variableStructure: [],
     },
     knowledgeConfig: {
       knowledgeIds: [],
@@ -28,6 +29,9 @@ export function defaultPersonalAppConfigState(): PersonalAppConfigState {
       temperature: 0.5,
     },
     modifiedTime: new Date(),
+    isCollect: '',
+    isSale: '',
+    agentPublishId: 1,
   }
 }
 

src/store/types/personal-app-config.ts

+export interface VariableStructureItem {
+  key: string
+  variableDefault: string | null
+}
+
 export interface PersonalAppConfigState {
   baseInfo: {
     agentId: string //应用ID
@@ -13,6 +18,7 @@ export interface PersonalAppConfigState {
     continuousQuestionStatus: 'default' | 'close' //追问状态
     continuousQuestionSystem: string // 追问提示词   customizable时必填
     continuousQuestionTurn: number // 追问轮次 1-5 customizable时必填
+    variableStructure: VariableStructureItem[]
   }
   knowledgeConfig: {
     knowledgeIds: string[] //知识库ID
@@ -24,4 +30,7 @@ export interface PersonalAppConfigState {
     temperature: number //多样性 0-1.00
   }
   modifiedTime: Date
+  isCollect: string
+  isSale: string
+  agentPublishId: number
 }

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

 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import Preamble from './preamble.vue'
 import { useI18n } from 'vue-i18n'
 import MessageList from './message-list.vue'
 import FooterInput from './footer-input.vue'
 import { fetchCreateContinueQuestions } from '@/apis/agent-application'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
+import { Brain, Down } from '@icon-park/vue-next'
+import MemoryPreviewModal from './memory-preview-modal.vue'
 
 const { t } = useI18n()
 
-const router = useRouter()
+// const router = useRouter()
 
 const personalAppConfigStore = usePersonalAppConfigStore()
 
@@ -22,6 +23,7 @@ const messageList = ref<ConversationMessageItem[]>([])
 const continuousQuestionStatus = ref<'default' | 'close'>(personalAppConfigStore.commConfig.continuousQuestionStatus)
 
 const continuousQuestionList = ref<string[]>([])
+const isShowMemoryPreviewModal = ref(false)
 
 function handleAddMessageItem(messageItem: ConversationMessageItem) {
   messageList.value.push(messageItem)
@@ -71,31 +73,69 @@ function handleUpdateContinueQuestionStatus(status: 'default' | 'close') {
   continuousQuestionList.value = []
 }
 
-function handleTurnMultiModelDialogue() {
-  router.push({
-    name: 'MultiModelDialogue',
-    params: {
-      agentId: personalAppConfigStore.baseInfo.agentId,
-    },
-  })
+// function handleTurnMultiModelDialogue() {
+//   router.push({
+//     name: 'MultiModelDialogue',
+//     params: {
+//       agentId: personalAppConfigStore.baseInfo.agentId,
+//     },
+//   })
+// }
+
+function handleMemoryVariable() {
+  isShowMemoryPreviewModal.value = true
 }
 </script>
 
 <template>
   <div class="flex h-full min-w-[300px] flex-1 flex-col overflow-hidden bg-[#f2f5f9]">
-    <div class="mb-[18px] flex items-center justify-between px-5 py-[18px]">
-      <p class="text-base">
-        {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.preview') }}
-      </p>
+    <div class="flex justify-between">
+      <div class="mb-[18px] flex items-center justify-between px-5 py-[18px]">
+        <p class="text-base">
+          {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.preview') }}
+        </p>
+
+        <div
+          v-show="personalAppConfigStore.commConfig.variableStructure.length !== 0"
+          class="memory-content cursor-pointer"
+        >
+          <n-popover
+            placement="bottom"
+            arrow-wrapper-class="memory-content"
+            trigger="hover"
+            class="p-[4px]! top-[-25px]"
+            :show-arrow="false"
+          >
+            <template #trigger>
+              <div class="mb-[18px] flex items-center justify-center px-5 py-[18px] text-[14px]">
+                <Brain theme="outline" size="16" fill="#333" />
+                <div class="mx-[4px]">
+                  {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory') }}
+                </div>
+                <Down theme="outline" size="16" fill="#333" class="inline" />
+              </div>
+            </template>
+            <div>
+              <div
+                v-show="personalAppConfigStore.commConfig.variableStructure !== null"
+                class="cursor-pointer px-[8px] py-[5px] hover:bg-[#f2f5f9]"
+                @click="handleMemoryVariable"
+              >
+                {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable') }}
+              </div>
+            </div>
+          </n-popover>
+        </div>
+      </div>
 
-      <div
+      <!-- <div
         v-show="personalAppConfigStore.baseInfo.agentId"
         class="text-font-color hover:text-theme-color cursor-pointer"
         @click="handleTurnMultiModelDialogue"
       >
         <i class="iconfont icon-moxing mr-1 text-sm" />
         <span>{{ t('common_module.multi_model_debug') }}</span>
-      </div>
+      </div> -->
     </div>
 
     <div class="flex w-full flex-1 overflow-hidden">
@@ -125,6 +165,8 @@ function handleTurnMultiModelDialogue() {
       @create-continue-questions="handleCreateContinueQuestions"
       @update-continuous-question-status="handleUpdateContinueQuestionStatus"
     />
+
+    <MemoryPreviewModal v-model="isShowMemoryPreviewModal" />
   </div>
 </template>
 

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

@@ -5,6 +5,7 @@ import { FormInst, InputInst, SelectOption } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useThrottleFn } from '@vueuse/core'
 import CustomIcon from '@/components/custom-icon/custom-icon.vue'
+import { Plus, Help, MoreOne, Edit, Copy, ReduceOne, Down, People, RightOne } from '@icon-park/vue-next'
 import UploadImage from '@/components/upload-image/upload-image.vue'
 import AutoConfigModal from './auto-config-modal.vue'
 import OptimizeSystemModal from './optimize-system-modal.vue'
@@ -22,6 +23,9 @@ import {
 } from '@/apis/agent-application'
 import { fetchCustomEventSource } from '@/composables/useEventSource'
 import { DiversityModeItem, diversityModeList } from '../app-setting-config'
+import MemoryVariableModal from './memory-variable-modal.vue'
+import type { MemoryVariableForm } from './memory-variable-modal.vue'
+import { copyToClip } from '@/utils/copy'
 
 const { t } = useI18n()
 
@@ -75,9 +79,11 @@ const isShowOptimizeAgentSystemModal = ref(false) // 是否显示优化角色指
 const generateAgentAvatarLoading = ref(false) // 是否正在生成图片
 const generatePreambleLoading = ref(false) // 是否正在生成开场白
 const generateFeaturedQuestionsLoading = ref(false) // 是否正在生成推荐词
+const isShowMemoryVariableModal = ref(false) //是否显示记忆变量弹窗
 
 const personalAppFormRef = ref<FormInst | null>(null)
 const agentSystemInputRef = ref<InputInst | null>(null)
+const memoryVariableModal = ref<InstanceType<typeof MemoryVariableModal> | null>(null)
 
 const personalAppRules = {
   baseInfo: {
@@ -461,6 +467,46 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
   personalAppConfig.value.commModelConfig.temperature = temperature
   personalAppConfig.value.commModelConfig.communicationTurn = communicationTurn
 }
+
+function handleShowMemoryVariableModal() {
+  isShowMemoryVariableModal.value = true
+}
+
+function handleDeleteMemoryVariableItem(memoryVariable: object) {
+  window.$dialog.warning({
+    title: '删除提示',
+    content: '删除后不可撤销。如应用已发布，更新发布后该应用的用户无法使用该记忆变量，是否继续？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: () => {
+      personalAppConfigStore.updatePersonalAppConfigState({
+        commConfig: {
+          ...personalAppConfigStore.commConfig,
+          variableStructure: personalAppConfigStore.commConfig.variableStructure.filter(
+            (variable) => variable !== memoryVariable,
+          ),
+        },
+      })
+      window.$message.success('删除成功')
+    },
+    onNegativeClick: () => {
+      window.$message.success('已取消')
+    },
+  })
+}
+
+function handleAddMemoryVariable() {
+  isShowMemoryVariableModal.value = true
+
+  if (memoryVariableModal.value) {
+    memoryVariableModal.value.handleAddMemoryVariableItem()
+  }
+}
+
+function handleCopyMemoryVariableName(memoryVariableItem: MemoryVariableForm) {
+  copyToClip(memoryVariableItem.key)
+  window.$message.success('成功复制名称')
+}
 </script>
 
 <template>
@@ -494,7 +540,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
               <span class="line-clamp-1 w-[100px] text-xs text-[#5c5f66]">
                 {{ personalAppConfig.commModelConfig.largeModel }}
               </span>
-              <CustomIcon icon="mingcute:down-line" class="ml-1.5 text-base outline-none" />
+              <Down theme="outline" size="16" fill="#333" class="ml-1.5 text-base outline-none" />
             </div>
           </template>
           <div class="mb-2 mt-[6px] flex items-center">
@@ -548,8 +594,11 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
                 </span>
                 <NPopover trigger="hover">
                   <template #trigger>
-                    <CustomIcon
-                      icon="mingcute:question-line"
+                    <Help
+                      theme="outline"
+                      size="15"
+                      fill="#333"
+                      :stroke-width="2"
                       class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                     />
                   </template>
@@ -594,8 +643,11 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
                 </span>
                 <NPopover trigger="hover">
                   <template #trigger>
-                    <CustomIcon
-                      icon="mingcute:question-line"
+                    <Help
+                      theme="outline"
+                      size="15"
+                      fill="#333"
+                      :stroke-width="2"
                       class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                     />
                   </template>
@@ -642,8 +694,11 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
                 </span>
                 <NPopover trigger="hover">
                   <template #trigger>
-                    <CustomIcon
-                      icon="mingcute:question-line"
+                    <Help
+                      theme="outline"
+                      size="15"
+                      fill="#333"
+                      :stroke-width="2"
                       class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                     />
                   </template>
@@ -685,7 +740,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
     <div class="flex h-[calc(100vh-56px-56px)]">
       <div class="flex h-full flex-1 flex-col overflow-auto border-r border-[#e8e9eb] py-4">
         <div class="mb-1 flex h-6 items-center px-5 leading-6">
-          <CustomIcon icon="mdi:user" class="mr-1.5 text-lg" />
+          <People theme="multi-color" size="16" :fill="['#333', '#333', '#333', '#333']" class="mr-1.5 text-lg" />
           <span>
             {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.agent_setting') }}
           </span>
@@ -693,7 +748,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
 
         <NCollapse :default-expanded-names="['1']" class="px-5">
           <template #arrow>
-            <CustomIcon icon="gravity-ui:caret-right" />
+            <RightOne theme="multi-color" size="17" :fill="['#333', '#333', '#333', '#333']" />
           </template>
           <NCollapseItem
             :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.base_info')"
@@ -791,8 +846,11 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
               </span>
               <NPopover style="width: 520px" trigger="hover">
                 <template #trigger>
-                  <CustomIcon
-                    icon="mingcute:question-line"
+                  <Help
+                    theme="outline"
+                    size="15"
+                    fill="#333"
+                    :stroke-width="2"
                     class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                   />
                 </template>
@@ -893,7 +951,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
             </h2>
             <NCollapse :trigger-areas="['main', 'arrow']">
               <template #arrow>
-                <CustomIcon icon="gravity-ui:caret-right" />
+                <RightOne theme="multi-color" size="17" :fill="['#333', '#333', '#333', '#333']" />
               </template>
 
               <NCollapseItem
@@ -911,6 +969,134 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
           </div>
         </section>
 
+        <section class="border-b border-[#e8e9eb] px-5">
+          <div class="pt-4">
+            <h2 class="my-3 text-[#84868c]">
+              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory') }}
+            </h2>
+            <NCollapse
+              :expanded-names="commConfigExpandedNames"
+              :trigger-areas="['main', 'arrow']"
+              @update:expanded-names="handleUpdateCommConfigExpandedNames"
+            >
+              <template #arrow>
+                <RightOne theme="multi-color" size="17" :fill="['#333', '#333', '#333', '#333']" />
+              </template>
+              <NCollapseItem name="preamble" class="my-[13px]!">
+                <template #header>
+                  <span class="w-[60px]">{{
+                    t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable')
+                  }}</span>
+                  <n-popover trigger="hover" placement="top-start" class="p-[12px]! left-[-120px]!" :show-arrow="false">
+                    <template #trigger>
+                      <Help theme="outline" size="15" fill="#333" :stroke-width="2" class="mt-[2px]" />
+                    </template>
+                    <div class="w-[650px] text-[14px]">
+                      <div class="m-w-[100%] mb-[16px] mt-[0px] leading-[22px]">
+                        {{
+                          t(
+                            'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_message',
+                          )
+                        }}
+                      </div>
+                      <div>
+                        <img src="@/assets/images/memory-variableLabels.png" width="650" height="206" />
+                      </div>
+                    </div>
+                  </n-popover>
+                </template>
+                <template #header-extra>
+                  <NTooltip trigger="hover">
+                    <template #trigger>
+                      <Plus
+                        theme="outline"
+                        size="22"
+                        :stroke-width="2"
+                        class="text-theme-color cursor-pointer"
+                        @click="handleAddMemoryVariable"
+                      />
+                    </template>
+                    {{
+                      t(
+                        'personal_space_module.agent_module.agent_setting_module.agent_config_module.add_memory_variable',
+                      )
+                    }}
+                  </NTooltip>
+                </template>
+                <div class="mb-[16px] text-xs text-[#84868c]">
+                  {{
+                    t(
+                      'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_message',
+                    )
+                  }}
+                </div>
+                <div
+                  v-show="personalAppConfigStore.commConfig.variableStructure.length !== 0"
+                  class="flex flex-1 flex-wrap items-center gap-[12px] overflow-hidden"
+                >
+                  <div
+                    v-for="(memoryVariableItem, index) in personalAppConfigStore.commConfig.variableStructure"
+                    :key="index"
+                    class="font-400 line-height-[20px] flex cursor-pointer items-center rounded-[4px] bg-[#f2f5f9] py-[2px] pl-[8px] text-[12px] hover:bg-[#e3e8f0]"
+                    @click="handleShowMemoryVariableModal"
+                  >
+                    <n-popover v-if="memoryVariableItem.key.length > 8" trigger="hover" class="max-w-[250px]!">
+                      <template #trigger>
+                        <div class="max-w-[105px] truncate text-[#151b26]">{{ memoryVariableItem.key }}</div>
+                      </template>
+                      {{ memoryVariableItem.key }}
+                    </n-popover>
+                    <div v-else class="max-w-[105px] truncate text-[#151b26]">{{ memoryVariableItem.key }}</div>
+
+                    <n-popover placement="bottom" trigger="hover" :show-arrow="false" class="p-[4px]!">
+                      <template #trigger>
+                        <MoreOne theme="outline" size="14" fill="#333" :stroke-width="2" class="mr-[4px] mt-[2px]" />
+                      </template>
+                      <div class="text-[12px]">
+                        <div
+                          class="flex h-[30px] w-[90px] cursor-pointer items-center justify-start px-[8px] py-[5px] hover:rounded-[4px] hover:bg-[#f2f5f9]"
+                          @click="handleShowMemoryVariableModal"
+                        >
+                          <Edit theme="outline" size="16" fill="#333" :stroke-width="2" /><span class="ml-[4px]">
+                            {{
+                              t(
+                                'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_action_edit',
+                              )
+                            }}
+                          </span>
+                        </div>
+                        <div
+                          class="flex h-[30px] w-[90px] cursor-pointer items-center justify-start px-[8px] py-[5px] hover:rounded-[4px] hover:bg-[#f2f5f9]"
+                          @click="handleCopyMemoryVariableName(memoryVariableItem)"
+                        >
+                          <Copy theme="outline" size="16" fill="#333" :stroke-width="2" />
+                          <span class="ml-[4px]">
+                            {{
+                              t(
+                                'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_action_copy',
+                              )
+                            }}
+                          </span>
+                        </div>
+                        <n-space>
+                          <div
+                            class="flex h-[30px] w-[90px] cursor-pointer items-center justify-start px-[8px] py-[5px] hover:rounded-[4px] hover:bg-[#f2f5f9]"
+                            @click="handleDeleteMemoryVariableItem(memoryVariableItem)"
+                          >
+                            <ReduceOne theme="outline" size="16" fill="#333" :stroke-width="2" /><span class="ml-[4px]">
+                              {{ t('common_module.delete') }}
+                            </span>
+                          </div>
+                        </n-space>
+                      </div>
+                    </n-popover>
+                  </div>
+                </div>
+              </NCollapseItem>
+            </NCollapse>
+          </div>
+        </section>
+
         <section class="border-b border-[#e8e9eb] px-5">
           <div class="pt-4">
             <h2 class="my-3 text-[#84868c]">
@@ -922,7 +1108,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
               @update:expanded-names="handleUpdateCommConfigExpandedNames"
             >
               <template #arrow>
-                <CustomIcon icon="gravity-ui:caret-right" />
+                <RightOne theme="multi-color" size="17" :fill="['#333', '#333', '#333', '#333']" />
               </template>
               <NCollapseItem
                 :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.preamble')"
@@ -1008,8 +1194,11 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
                     </span>
                     <NPopover trigger="hover">
                       <template #trigger>
-                        <CustomIcon
-                          icon="mingcute:question-line"
+                        <Help
+                          theme="outline"
+                          size="15"
+                          fill="#333"
+                          :stroke-width="2"
                           class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                         />
                       </template>
@@ -1033,7 +1222,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
                   >
                     <div class="text-theme-color flex cursor-pointer items-center justify-between text-xs">
                       <span> {{ continuousQuestionStatusText }}</span>
-                      <CustomIcon icon="mingcute:down-line" class="ml-1 text-base" />
+                      <Down theme="outline" size="16" class="text-theme-color ml-1 text-base" />
                     </div>
                   </NPopselect>
                 </template>
@@ -1109,6 +1298,8 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
     "
     @confirm="handleSettingAgentSystem"
   />
+
+  <MemoryVariableModal ref="memoryVariableModal" v-model="isShowMemoryVariableModal" />
 </template>
 
 <style lang="scss" scoped>

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

+<script setup lang="ts">
+import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
+import { Close } from '@icon-park/vue-next'
+import { DataTableColumns } from 'naive-ui'
+import { ref, watch } from 'vue'
+import { MemoryVariableForm } from './memory-variable-modal.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const memoryVariableColumns = createColumns()
+const personalAppConfigStore = usePersonalAppConfigStore()
+
+const memoryVariableData = ref([])
+
+const isShowMemoryPreviewModal = defineModel<boolean>()
+
+function createColumns(): DataTableColumns<MemoryVariableForm> {
+  return [
+    {
+      title: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.variable_name'),
+      key: 'key',
+      width: 150,
+    },
+    {
+      title: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.variable_value'),
+      key: 'variableDefault',
+    },
+  ]
+}
+
+watch(
+  () => personalAppConfigStore.commConfig.variableStructure,
+  (newValue) => {
+    if (newValue !== null) {
+      memoryVariableData.value = JSON.parse(JSON.stringify(newValue))
+    }
+  },
+  { immediate: true },
+)
+
+function handlePreviewModalClose() {
+  isShowMemoryPreviewModal.value = false
+}
+</script>
+
+<template>
+  <n-modal v-model:show="isShowMemoryPreviewModal" class="h-auto max-h-[720px]" :mask-closable="false">
+    <div class="flex flex-col items-center justify-center">
+      <div class="max-h-[720px] w-[880px] rounded-lg bg-white p-[24px]">
+        <div class="flex items-center justify-end text-[20px]">
+          <Close theme="outline" size="18" fill="#00000073" class="cursor-pointer" @click="handlePreviewModalClose" />
+        </div>
+        <div class="">
+          <n-tabs type="line" animated>
+            <n-tab-pane
+              name="oasis"
+              :tab="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable')"
+            >
+              <div class="flex max-h-[490px] justify-center overflow-y-hidden bg-[#f3f4fb]">
+                <n-data-table :columns="memoryVariableColumns" :max-height="440" :data="memoryVariableData" />
+              </div>
+            </n-tab-pane>
+          </n-tabs>
+        </div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.n-tabs) {
+  .n-tabs-tab {
+    font-size: 20px;
+  }
+
+  .n-tabs-bar {
+    background-color: #fff;
+  }
+
+  .n-tabs-nav {
+    &.n-tabs-nav--line-type {
+      &.n-tabs-nav--top {
+        .n-tabs-nav-scroll-content {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+</style>

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

+<script setup lang="ts">
+import { Close, Attention, Plus, Help, Delete } from '@icon-park/vue-next'
+import { nextTick, ref, shallowReadonly, watch } from 'vue'
+import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
+import { FormInst, FormItemRule, FormRules } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+export interface MemoryVariableForm {
+  key: string
+  variableDefault: string | null
+}
+
+const { t } = useI18n()
+
+const isShowMemoryVariableModal = defineModel<boolean>()
+
+const personalAppConfigStore = usePersonalAppConfigStore()
+
+const memoryVariableTable = ref<MemoryVariableForm[]>([{ key: '', variableDefault: '' }])
+const memoryVariableFormRefs = ref<(FormInst | null)[]>([])
+const memoryVariableInputRefs = ref<(HTMLInputElement | null)[]>([])
+
+const memoryVariableFormRules = shallowReadonly<FormRules>({
+  key: {
+    trigger: ['input'],
+    validator: (_rule: FormItemRule, value: string) => {
+      const regex = /^[\u4e00-\u9fa5a-zA-Z]+$/
+      const valueIndex = memoryVariableTable.value.findIndex((item) => item.key === value)
+      const updatedMemoryVariableData =
+        valueIndex !== -1
+          ? [...memoryVariableTable.value.slice(0, valueIndex), ...memoryVariableTable.value.slice(valueIndex + 1)]
+          : memoryVariableTable.value
+      const hasValue = updatedMemoryVariableData.some((item: { key: string }) => item.key === value)
+
+      if (!value) {
+        return new Error(
+          t(
+            'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_rules.name_not_null',
+          ),
+        )
+      } else if (value.length > 50) {
+        return new Error(
+          t(
+            'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_rules.name_length',
+          ),
+        )
+      } else if (!regex.test(value)) {
+        return new Error(
+          t(
+            'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_rules.name_supports',
+          ),
+        )
+      } else if (hasValue) {
+        return new Error(
+          t(
+            'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_rules.name_not_duplicated',
+          ),
+        )
+      }
+      return true
+    },
+  },
+})
+
+watch(
+  () => personalAppConfigStore.commConfig.variableStructure,
+  (newValue) => {
+    if (newValue !== null) {
+      memoryVariableTable.value = JSON.parse(JSON.stringify(newValue))
+    }
+  },
+  { immediate: true },
+)
+
+function handlePreviewModalClose(refresh = false) {
+  isShowMemoryVariableModal.value = false
+  memoryVariableTable.value = refresh
+    ? memoryVariableTable.value
+    : JSON.parse(JSON.stringify(personalAppConfigStore.commConfig.variableStructure))
+  memoryVariableTable.value = memoryVariableTable.value.filter((item) => item.key)
+}
+
+function handleMemoryVariableFormSave() {
+  const validationPromises = memoryVariableTable.value.map((_, index) => {
+    const formRef = memoryVariableFormRefs.value[index]
+    return new Promise<boolean>((resolve) => {
+      if (formRef) {
+        formRef.validate((errors: any) => {
+          resolve(!errors)
+        })
+      } else {
+        resolve(false)
+      }
+    })
+  })
+
+  Promise.all(validationPromises).then((results) => {
+    const isAllValid = results.every((result) => result)
+
+    if (isAllValid) {
+      personalAppConfigStore.commConfig.variableStructure = memoryVariableTable.value
+      handlePreviewModalClose(true)
+      window.$message.success(t('common_module.save_success_message'))
+    } else {
+      window.$message.error(t('common_module.save_fail_message'))
+    }
+  })
+}
+
+function handleAddMemoryVariableItem() {
+  const newVariable = { key: '', variableDefault: '' }
+  memoryVariableTable.value.push(newVariable)
+
+  nextTick(() => {
+    const newIndex = memoryVariableTable.value.length - 1
+    const input = memoryVariableInputRefs.value[newIndex]
+    if (input) {
+      input.focus()
+    }
+  })
+}
+
+function handleDeleteMemoryVariableRow(rowItem: MemoryVariableForm) {
+  const index = memoryVariableTable.value.findIndex((item) => item.key === rowItem.key)
+  if (index !== -1) {
+    memoryVariableTable.value.splice(index, 1)
+  }
+}
+
+defineExpose({
+  handleAddMemoryVariableItem,
+})
+</script>
+
+<template>
+  <n-modal
+    v-model:show="isShowMemoryVariableModal"
+    class="h-auto max-h-[720px]"
+    :mask-closable="false"
+    :auto-focus="false"
+  >
+    <div class="flex flex-col items-center justify-center">
+      <div class="max-h-[720px] w-[820px] rounded-lg bg-white p-[24px]">
+        <div class="flex items-center justify-between text-[20px]">
+          <span>
+            {{
+              t(
+                'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.edit_memory_variable',
+              )
+            }}</span
+          >
+          <Close theme="outline" size="18" fill="#00000073" class="cursor-pointer" @click="handlePreviewModalClose()" />
+        </div>
+        <div
+          class="mb-[12px] mt-[16px] flex items-center justify-center rounded-[4px] bg-[#FFF4E6] px-[15px] pb-[3px] pt-[4px]"
+        >
+          <div class="mr-[5px] h-[14px] w-[14px]">
+            <Attention
+              theme="multi-color"
+              size="14"
+              :fill="['#ff9326', '#ff9326', '#FFF', '#43CCF8']"
+              :stroke-width="2"
+            />
+          </div>
+          <div class="text-[14px] text-[#151B26]">
+            {{
+              t(
+                'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_message_tip',
+              )
+            }}
+          </div>
+        </div>
+        <div>
+          <n-scrollbar style="max-height: 490px; overflow: hidden">
+            <div class="flex justify-center">
+              <table class="w-full">
+                <thead class="sticky top-[0px] z-20 text-[#5c5f66]">
+                  <tr class="bg-[#f2f5f9]">
+                    <th class="px-[24px] py-[10px] font-normal">
+                      <div class="flex">
+                        <div>
+                          {{
+                            t(
+                              'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_table_name',
+                            )
+                          }}
+                        </div>
+                        <span class="ml-[3px] text-[#ff6966]">*</span>
+                      </div>
+                    </th>
+                    <th class="px-[24px] py-[10px] font-normal">
+                      <div class="flex items-center">
+                        <div class="mr-[2px]" style="margin-right: 7px">
+                          {{
+                            t(
+                              'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_table_default_value',
+                            )
+                          }}
+                        </div>
+                        <n-popover trigger="hover" class="p-[12px]!">
+                          <template #trigger>
+                            <Help theme="outline" size="15" fill="#333" :stroke-width="2" class="mt-[2px]" />
+                          </template>
+                          <div class="mb-[8px] w-[226px]">
+                            {{
+                              t(
+                                'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.default_value_tip',
+                              )
+                            }}
+                          </div>
+                          <div>
+                            <span class="w-[86px] rounded-[4px] bg-[#f2f5f9] px-[8px] py-[4px]">{{
+                              t(
+                                'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.default_value_tip_example',
+                              )
+                            }}</span>
+                          </div>
+                        </n-popover>
+                      </div>
+                    </th>
+                    <th class="px-[12px] py-[10px] font-normal">
+                      {{
+                        t(
+                          'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_table_action',
+                        )
+                      }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in memoryVariableTable" :key="index">
+                    <td class="pl-[12px]">
+                      <n-form
+                        :ref="(el: any) => (memoryVariableFormRefs[index] = el)"
+                        label-width="auto"
+                        :model="item"
+                        :rules="memoryVariableFormRules"
+                        :show-label="false"
+                      >
+                        <n-form-item path="key" :show-label="false">
+                          <n-popover trigger="click" placement="right" class="p-[12px]!">
+                            <template #trigger>
+                              <n-input
+                                :ref="(el: HTMLInputElement) => (memoryVariableInputRefs[index] = el)"
+                                v-model:value="item.key"
+                                :placeholder="
+                                  t(
+                                    'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.name_placeholder',
+                                  )
+                                "
+                                maxlength="50"
+                                show-count
+                              />
+                            </template>
+                            <div class="w-[226px]">
+                              {{
+                                t(
+                                  'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_table_name_tip',
+                                )
+                              }}
+                            </div>
+                            <div>
+                              {{
+                                t(
+                                  'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_table_name_content',
+                                )
+                              }}
+                            </div>
+                            <div>
+                              {{
+                                t(
+                                  'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.memory_variable_table_name_length',
+                                )
+                              }}
+                            </div>
+                          </n-popover>
+                        </n-form-item>
+                      </n-form>
+                    </td>
+                    <td class="pl-[12px]">
+                      <n-form-item path="variableDefault" :show-label="false">
+                        <n-input
+                          v-model:value="item.variableDefault"
+                          type="text"
+                          :placeholder="
+                            t(
+                              'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.default_value_placeholder',
+                            )
+                          "
+                          :maxlength="400"
+                          show-count
+                        />
+                      </n-form-item>
+                    </td>
+                    <td class="ml-[15px] mt-[10px] flex pl-[12px] pt-[10px]">
+                      <n-tooltip trigger="hover">
+                        <template #trigger>
+                          <Delete
+                            theme="outline"
+                            size="15"
+                            fill="#333"
+                            :stroke-width="2"
+                            class="mt-[2px] cursor-pointer"
+                            @click="handleDeleteMemoryVariableRow(item)"
+                          />
+                        </template>
+                        {{ t('common_module.delete') }}
+                      </n-tooltip>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </n-scrollbar>
+          <div class="text-theme-color mt-[16px] flex w-[78px] cursor-pointer" @click="handleAddMemoryVariableItem">
+            <Plus theme="outline" size="22" :stroke-width="2" class="text-theme-color" />
+            <span>{{
+              t(
+                'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_modal.add_variable',
+              )
+            }}</span>
+          </div>
+          <div class="mt-[24px] flex justify-end">
+            <button
+              class="hover:text-theme-color hover:border-theme-color !mr-[12px] box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none transition-all duration-300 hover:border-[theme-color]"
+              @click="handlePreviewModalClose()"
+            >
+              {{ t('common_module.cancel_btn_text') }}
+            </button>
+            <button
+              class="bg-theme-color !box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-[te] px-[10px] text-[#ffffff] transition-all duration-300 hover:bg-[#528EFF]"
+              @click="handleMemoryVariableFormSave()"
+            >
+              {{ t('common_module.preservation') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<style lang="scss" scoped>
+tbody tr:first-child td {
+  padding-top: 10px;
+}
+</style>

src/views/personal-space/personal-app/columns.ts

-import { NImage, NPopover } from 'naive-ui'
-import { h } from 'vue'
-import CustomIcon from '@/components/custom-icon/custom-icon.vue'
-import { PersonalAppConfigState } from '@/store/types/personal-app-config'
-import { formatDateTime } from '@/utils/date-formatter'
-import i18n from '@/locales'
-
-const t = i18n.global.t
-
-export function createPersonalAppColumn(handlePersonalAppTableAction: (actionType: string, agentId: string) => void) {
-  return [
-    {
-      title: () => h('span', {}, t('personal_space_module.agent_module.agent_list_module.agent_title')),
-      key: 'agentTitle',
-      align: 'left',
-      ellipsis: {
-        tooltip: true,
-      },
-      width: 210,
-      fixed: 'left',
-      render(row: PersonalAppConfigState) {
-        return h(
-          'div',
-          {
-            style: {
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            },
-          },
-          {
-            default: () => [
-              h(NImage, {
-                width: '36px',
-                src: row.baseInfo.agentAvatar || 'https://gsst-poe-sit.gz.bcebos.com/data/20240911/1726041369632.webp',
-                showToolbar: false,
-                previewDisabled: true,
-                style: {
-                  borderRadius: '8px',
-                  height: '36px',
-                },
-              }),
-              h(
-                'span',
-                {
-                  style: {
-                    marginLeft: '12px',
-                    fontWeight: '600',
-                    flex: '1',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  },
-                  className: 'hover:text-theme-color cursor-pointer',
-                  onClick: () => handlePersonalAppTableAction('edit', row.baseInfo.agentId),
-                },
-                {
-                  default: () => [
-                    h(
-                      NPopover,
-                      {
-                        props: { placement: 'top' },
-                        style: { maxWidth: '200px' },
-                      },
-                      {
-                        trigger: () =>
-                          h(
-                            'span',
-                            {
-                              style: {
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                width: '100%',
-                                display: 'block',
-                              },
-                            },
-                            row.baseInfo.agentTitle || '--',
-                          ),
-                        default: () => h('span', {}, row.baseInfo.agentTitle || '--'),
-                      },
-                    ),
-                  ],
-                },
-              ),
-            ],
-          },
-        )
-      },
-    },
-    {
-      title: () => h('span', {}, t('personal_space_module.agent_module.agent_list_module.large_model')),
-      key: 'largeModel',
-      align: 'left',
-      ellipsis: {
-        tooltip: true,
-      },
-      width: 210,
-      render(row: PersonalAppConfigState) {
-        return row.commModelConfig.largeModel
-      },
-    },
-    {
-      title: () => h('span', {}, t('personal_space_module.agent_module.agent_list_module.agent_id')),
-      key: 'agentId',
-      align: 'left',
-      ellipsis: {
-        tooltip: true,
-      },
-      width: 180,
-      render(row: PersonalAppConfigState) {
-        return h(
-          'div',
-          {
-            style: {
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            },
-          },
-          {
-            default: () => [
-              h(
-                'span',
-                {
-                  style: {
-                    flex: '1',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  },
-                },
-                {
-                  default: () => [
-                    h(
-                      NPopover,
-                      {
-                        props: { placement: 'top' },
-                      },
-                      {
-                        trigger: () => h('span', {}, row.baseInfo.agentId || '--'),
-                        default: () => h('span', {}, row.baseInfo.agentId || '--'),
-                      },
-                    ),
-                  ],
-                },
-              ),
-              h(CustomIcon, {
-                icon: 'ion:copy-outline',
-                style: {
-                  cursor: 'pointer',
-                  color: '#000DFF',
-                },
-                onClick: () => handlePersonalAppTableAction('copyAgentId', row.baseInfo.agentId),
-              }),
-            ],
-          },
-        )
-      },
-    },
-    {
-      title: () => h('span', {}, t('personal_space_module.agent_module.agent_list_module.agent_publish_status')),
-      key: 'agentPublishStatus',
-      align: 'left',
-      ellipsis: {
-        tooltip: true,
-      },
-      width: 230,
-      render(row: PersonalAppConfigState) {
-        let publicText = '----'
-        let publicIcon = 'ion:close-circle-outline'
-        let bgColor = '#84868c'
-        let color = '#f2f5f9'
-
-        switch (row.baseInfo.agentPublishStatus) {
-          case 'draft':
-            publicText = 'common_module.unpublished'
-            publicIcon = 'gg:time'
-            bgColor = '#f2f5f9'
-            color = '#84868c'
-            break
-          case 'publish':
-            publicText = 'common_module.published'
-            publicIcon = 'gg:check-o'
-            bgColor = '#ecffe6'
-            color = '#30bf13'
-            break
-        }
-
-        return [
-          h(
-            'div',
-            { style: { display: 'flex', alignItems: 'center' } },
-            {
-              default: () => [
-                h(
-                  'div',
-                  {
-                    className: 'flex justify-center items-center',
-                    style: {
-                      backgroundColor: bgColor,
-                      fontSize: '12px',
-                      width: '72px',
-                      height: '24px',
-                      borderRadius: '4px',
-                      marginRight: '6px',
-                    },
-                  },
-                  {
-                    default: () => [
-                      h(CustomIcon, {
-                        icon: publicIcon,
-                        style: {
-                          color,
-                          fontSize: '16px',
-                          marginRight: '4px',
-                        },
-                      }),
-                      h(
-                        'span',
-                        {
-                          style: {
-                            color,
-                          },
-                        },
-                        t(publicText),
-                      ),
-                    ],
-                  },
-                ),
-                // row.baseInfo.agentPublishStatus === 'publish' && formatDateTime(row.modifiedTime),
-              ],
-            },
-          ),
-        ]
-      },
-    },
-    {
-      title: () => h('span', {}, t('personal_space_module.agent_module.agent_list_module.modified_time')),
-      key: 'modifiedTime',
-      align: 'left',
-      ellipsis: {
-        tooltip: true,
-      },
-      width: 170,
-      render(row: PersonalAppConfigState) {
-        return formatDateTime(row.modifiedTime)
-      },
-    },
-    {
-      title: () => h('span', {}, t('personal_space_module.agent_module.agent_list_module.channel')),
-      key: 'channel',
-      align: 'left',
-      ellipsis: {
-        tooltip: true,
-      },
-      width: 140,
-      render(row: PersonalAppConfigState) {
-        return [
-          row.baseInfo.agentPublishStatus === 'publish'
-            ? h(
-                NPopover,
-                {
-                  props: { placement: 'top' },
-                },
-                {
-                  trigger: () =>
-                    h(
-                      'div',
-                      {
-                        className: 'flex justify-center items-center',
-                        style: {
-                          backgroundColor: '#e6f0ff',
-                          borderRadius: '4px',
-                          padding: '6px',
-                        },
-                        onClick: () => handlePersonalAppTableAction('openPublishDetail', row.baseInfo.agentId),
-                      },
-                      {
-                        default: () => [
-                          h(CustomIcon, {
-                            icon: 'icon-park-solid:computer',
-                            style: {
-                              fontSize: '16px',
-                              cursor: 'pointer',
-                              color: '#000DFF',
-                            },
-                          }),
-                        ],
-                      },
-                    ),
-
-                  default: () =>
-                    h('span', {}, t('personal_space_module.agent_module.agent_list_module.channel_popover_text')),
-                },
-              )
-            : '--',
-        ]
-      },
-    },
-    {
-      title: () => h('span', {}, t('common_module.data_table_module.action')),
-      key: 'action',
-      align: 'left',
-      ellipsis: {
-        tooltip: true,
-      },
-      width: 190,
-      fixed: 'right',
-      render(row: PersonalAppConfigState) {
-        return [
-          h(
-            'span',
-            {
-              style: { marginRight: '20px' },
-              className: 'text-theme-color cursor-pointer hover:opacity-80',
-              onClick: () => handlePersonalAppTableAction('edit', row.baseInfo.agentId),
-            },
-            { default: () => t('common_module.data_table_module.edit') },
-          ),
-          h(
-            'span',
-            {
-              style: { marginRight: '20px' },
-              className: 'text-theme-color cursor-pointer hover:opacity-80',
-              onClick: () => handlePersonalAppTableAction('copy', row.baseInfo.agentId),
-            },
-            { default: () => t('common_module.data_table_module.copy') },
-          ),
-          h(
-            'span',
-            {
-              style: { marginRight: '20px', color: '#F25744' },
-              className: 'cursor-pointer hover:opacity-80',
-              onClick: () => handlePersonalAppTableAction('delete', row.baseInfo.agentId),
-            },
-            { default: () => t('common_module.data_table_module.delete') },
-          ),
-        ]
-      },
-    },
-  ]
-}

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

 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import CustomIcon from '@/components/custom-icon/custom-icon.vue'
-import CustomPagination, { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
-import { createPersonalAppColumn } from './columns.ts'
-import useTableScrollY from '@/composables/useTableScrollY.ts'
+import { Search, More, Star } from '@icon-park/vue-next'
+import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
+import { formatDateTime } from '@/utils/date-formatter'
+
 import {
+  fetchApplicationsCollectionStatusChange,
   fetchDeleteApplication,
-  fetchGetDebugApplicationInfo,
   fetchGetApplicationList,
-  fetchSaveAgentApplication,
+  fetchRemoveSalePublishApplication,
 } from '@/apis/agent-application.ts'
 import { PersonalAppConfigState } from '@/store/types/personal-app-config.ts'
-import { copyToClip } from '@/utils/copy.ts'
+import { useScroll } from '@vueuse/core'
+import { router } from '@/router/index.ts'
+import SaleApplicationsConfigurationModal from './sale-applications-configuration-modal.vue'
+import { defaultPersonalAppConfigState } from '@/store/modules/personal-app-config'
+import searchEmptyImage from '@/assets/images/search-empty.png'
+import applicationEmptyImage from '@/assets/images/application-empty.png'
 
 const { t } = useI18n()
 
-const router = useRouter()
+const cardContentWrapRef = useTemplateRef<HTMLDivElement>('cardContentWrapRef')
+const smooth = ref(false)
+
+const behavior = computed(() => (smooth.value ? 'smooth' : 'auto'))
+const { arrivedState } = useScroll(cardContentWrapRef, { behavior })
 
-const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 32 + 16 + 16 + 28)
+const selectedPublishStatusValue = ref('')
+const isShowSaleApplicationsConfigurationModal = ref(false)
+const saleApplicationsInfo = ref<PersonalAppConfigState>(defaultPersonalAppConfigState())
 
-const columns = createPersonalAppColumn(handleClickPersonalAppTableAction)
+const publishStatusOptions = [
+  {
+    label: t('common_module.all'),
+    value: '',
+  },
+  {
+    label: t('common_module.published'),
+    value: 'publish',
+  },
+  {
+    label: t('common_module.collect'),
+    value: 'Y',
+  },
+  {
+    label: t('common_module.unpublished'),
+    value: 'draft',
+  },
+]
 
 const pagingInfo = ref<PaginationInfo>({
   pageNo: 1,
-  pageSize: 10,
+  pageSize: 16,
   totalPages: 0,
   totalRows: 0,
 })
@@ -33,68 +60,105 @@ const pagingInfo = ref<PaginationInfo>({
 const agentAppList = ref<PersonalAppConfigState[]>([])
 
 const agentSearchInputValue = ref('')
-const agentAppListTableLoading = ref(false)
-const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_module.empty_agent_list'))
+const agentAppListLoading = ref(false)
+const agentAppListBottomLoadingMore = ref(false)
 
-const isLoadingPagination = computed(() => {
-  return tableContentY.value > 0
-})
+const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_module.application_empty'))
 
-onMounted(async () => {
-  await handleGetApplicationList()
-})
+const emptyTableImage = ref()
 
-async function handleGetApplicationList() {
-  agentAppListTableLoading.value = true
-  const res = await fetchGetApplicationList<PersonalAppConfigState[]>({
+watch(
+  () => arrivedState.bottom,
+  () => {
+    if (arrivedState.bottom) {
+      if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) {
+        pagingInfo.value.pageNo += 1
+        agentAppListBottomLoadingMore.value = true
+        getApplicationList(true)
+      }
+    }
+  },
+)
+;(function () {
+  agentAppListLoading.value = true
+  getApplicationList()
+})()
+
+function getApplicationList(isLoadMore = false) {
+  if (!isLoadMore) {
+    pagingInfo.value.pageNo = 1
+    pagingInfo.value.totalPages = 0
+    pagingInfo.value.totalRows = 0
+  }
+  const isCollect = ref('')
+  const publishStatus = ref(selectedPublishStatusValue.value)
+  if (selectedPublishStatusValue.value === 'Y') {
+    isCollect.value = 'Y'
+    publishStatus.value = ''
+  }
+  const payload = {
     query: agentSearchInputValue.value,
+    publishStatus: publishStatus.value,
+    isCollect: isCollect.value,
     pagingInfo: pagingInfo.value,
-  }).finally(() => (agentAppListTableLoading.value = false))
-
-  if (res.code === 0) {
-    agentAppList.value = res.data
-    pagingInfo.value = res.pagingInfo as PaginationInfo
-    emptyTableText.value = agentSearchInputValue.value
-      ? t('personal_space_module.agent_module.agent_list_module.search_empty_agent_list')
-      : t('personal_space_module.agent_module.agent_list_module.empty_agent_list')
   }
+  fetchGetApplicationList<PersonalAppConfigState[]>(payload)
+    .then((res) => {
+      if (res.code !== 0) return
+      agentAppList.value = isLoadMore ? [...agentAppList.value, ...res.data] : res.data
+      pagingInfo.value = res.pagingInfo as PaginationInfo
+      emptyTableText.value = agentSearchInputValue.value
+        ? t('personal_space_module.agent_module.agent_list_module.search_empty_agent_list')
+        : t('personal_space_module.agent_module.agent_list_module.application_empty')
+      emptyTableImage.value =
+        agentSearchInputValue.value && agentAppList.value.length === 0 ? searchEmptyImage : applicationEmptyImage
+    })
+    .finally(() => {
+      agentAppListLoading.value = false
+      agentAppListBottomLoadingMore.value = false
+    })
+}
+
+function handleBasePublishingStatusGetAgentList() {
+  agentAppListLoading.value = true
+  getApplicationList()
 }
 
-function handleClickPersonalAppTableAction(actionType: string, agentId: string) {
-  switch (actionType) {
-    case 'copyAgentId':
-      handleCopyAgentId(agentId)
-      break
-    case 'openPublishDetail':
-      handleOpenPublishDetail(agentId)
-      break
-    case 'edit':
-      handleEditPersonalApp(agentId)
-      break
-    case 'copy':
-      handleCopyPersonalApp(agentId)
-      break
-    case 'delete':
-      handleDeletePersonalApp(agentId)
-      break
+function handleEnterKeypress(event: KeyboardEvent) {
+  if (event.code === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+
+    getApplicationList()
   }
 }
 
-function handleCopyAgentId(agentId: string) {
-  copyToClip(agentId)
-  window.$message.success(t('common_module.copy_success_message'))
+function handleDeletePersonalApp(agentId: string) {
+  window.$message
+    .ctWarning(t('personal_space_module.agent_module.agent_list_module.delete_agent_dialog_title'))
+    .then(() => {
+      fetchDeleteApplication(agentId).then((res) => {
+        if (res.code !== 0) return
+        window.$message.success(t('common_module.delete_success_message'))
+        agentAppList.value.length === 1 && (pagingInfo.value.pageNo = pagingInfo.value.pageNo - 1)
+        getApplicationList()
+      })
+    })
 }
 
-function handleOpenPublishDetail(agentId: string) {
-  router.push({
-    name: 'PersonalAppSetting',
-    query: {
-      tabKey: 'publish',
-    },
-    params: {
-      agentId,
-    },
-  })
+function handleChangeApplicationsSaleStatus(personalApp: PersonalAppConfigState) {
+  if (personalApp.isSale === 'N') {
+    saleApplicationsInfo.value = personalApp
+    isShowSaleApplicationsConfigurationModal.value = true
+  } else {
+    fetchRemoveSalePublishApplication(personalApp.agentPublishId)
+      .then(() => {
+        personalApp.isSale = 'N'
+        window.$message.success(t('common_module.removal_successfully'))
+      })
+      .catch(() => {
+        window.$message.success(t('common_module.removal_failed'))
+      })
+  }
 }
 
 function handleEditPersonalApp(agentId: string) {
@@ -106,62 +170,37 @@ function handleEditPersonalApp(agentId: string) {
   })
 }
 
-async function handleCopyPersonalApp(agentId: string) {
-  const res = await fetchGetDebugApplicationInfo<PersonalAppConfigState>(agentId)
-
-  if (res.code === 0) {
-    const payload = res.data
-
-    payload.baseInfo.agentId = ''
-    payload.baseInfo.agentTitle += t('personal_space_module.agent_module.agent_list_module.agent_copy')
-    payload.baseInfo.agentPublishStatus = 'draft'
-
-    await fetchSaveAgentApplication(payload)
-
-    await handleGetApplicationList()
-  }
-}
-
-function handleDeletePersonalApp(agentId: string) {
-  window.$dialog.warning({
-    title: t('personal_space_module.agent_module.agent_list_module.delete_agent_dialog_title'),
-    content: t('personal_space_module.agent_module.agent_list_module.delete_agent_dialog_content'),
-    negativeText: t('common_module.cancel_btn_text'),
-    positiveText: t('common_module.confirm_btn_text'),
-    onPositiveClick: async () => {
-      const res = await fetchDeleteApplication(agentId)
-      if (res.code === 0) {
-        window.$message.success(t('common_module.delete_success_message'))
-        agentAppList.value.length === 1 && (pagingInfo.value.pageNo = pagingInfo.value.pageNo - 1)
-        await handleGetApplicationList()
-      }
-    },
+function handleApplicationsCollect(personalApp: PersonalAppConfigState) {
+  fetchApplicationsCollectionStatusChange(personalApp.baseInfo.agentId).then(() => {
+    if (personalApp.isCollect === 'Y') {
+      personalApp.isCollect = 'N'
+      window.$message.success(t('common_module.collect_unsubscribed'))
+    } else {
+      personalApp.isCollect = 'Y'
+      window.$message.success(t('common_module.collect_successfully'))
+    }
   })
 }
 
-async function handleEnterKeypress(event: KeyboardEvent) {
-  if (event.code === 'Enter' && !event.shiftKey) {
-    event.preventDefault()
-
-    await handleGetApplicationList()
-  }
+function handleSelectAddType() {
+  router.push({ name: 'PersonalAppSetting' })
 }
 
-async function handleGetApplicationListUpdatePageNo(pageNo: number) {
-  pagingInfo.value.pageNo = pageNo
-  await handleGetApplicationList()
-}
-
-async function handleGetApplicationListUpdatePageSize(pageSize: number) {
-  pagingInfo.value.pageNo = 1
-  pagingInfo.value.pageSize = pageSize
-  await handleGetApplicationList()
+function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
+  console.log('分析', personalApp)
 }
 </script>
 
 <template>
-  <div ref="pageContentWrapRef" class="h-full">
-    <div class="mb-4 flex justify-end">
+  <div class="h-full">
+    <div class="mb-[13px] flex justify-between">
+      <n-space vertical class="w-[118px]">
+        <n-select
+          v-model:value="selectedPublishStatusValue"
+          :options="publishStatusOptions"
+          @update:value="handleBasePublishingStatusGetAgentList"
+        />
+      </n-space>
       <NInput
         v-model:value="agentSearchInputValue"
         :placeholder="t('personal_space_module.agent_module.agent_list_module.search_agent_placeholder')"
@@ -169,43 +208,206 @@ async function handleGetApplicationListUpdatePageSize(pageSize: number) {
         @keypress="handleEnterKeypress"
       >
         <template #suffix>
-          <CustomIcon
-            icon="tdesign:search"
-            class="cursor-pointer text-base text-[#999]"
-            @click="handleGetApplicationList"
+          <Search
+            theme="outline"
+            size="16"
+            fill="#999"
+            :stroke-width="2"
+            class="cursor-pointer text-base"
+            @click="getApplicationList()"
           />
         </template>
       </NInput>
     </div>
+    <div ref="cardContentWrapRef" class="mb-[50px] h-full overflow-y-auto pb-[16px]" style="scrollbar-width: none">
+      <div class="flex justify-center">
+        <n-spin v-show="agentAppListLoading" size="large" />
+      </div>
+      <div v-show="!agentAppListLoading" class="mt-[5px]">
+        <n-grid v-if="agentAppList.length" cols="l:3 xl:4" responsive="screen">
+          <n-grid-item
+            v-for="agentAppItem in agentAppList"
+            :key="agentAppItem.baseInfo.agentId"
+            class="mb-[20px] mr-[15px]"
+          >
+            <div
+              class="rounded-[10px]! ml-[5px] max-w-[380px] px-[24px] pb-[19px] pt-[13px] shadow-[0_4px_10px_0px_rgba(103,103,103,.3)]"
+            >
+              <div
+                class="mt-[6px] flex cursor-pointer justify-between"
+                @click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
+              >
+                <div class="mb-[19px] mr-[15px] text-[14px]">
+                  <n-popover trigger="hover">
+                    <template #trigger>
+                      <div
+                        class="popover-trigger h-[23px] w-full max-w-[160px] cursor-pointer truncate font-medium text-[#333333]"
+                      >
+                        {{ agentAppItem.baseInfo.agentTitle || '--' }}
+                      </div>
+                    </template>
+                    <span>{{ agentAppItem.baseInfo.agentTitle || '--' }}</span>
+                  </n-popover>
+                  <div class="agent-desc my-[18px] h-[44px] w-full max-w-[160px] text-[#999999]">
+                    <n-ellipsis :line-clamp="2">
+                      {{ agentAppItem.baseInfo.agentDesc }}
+                    </n-ellipsis>
+                  </div>
+                  <n-button
+                    :color="agentAppItem.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'"
+                    class="h-[27px] w-[71px] rounded-[13px] border-[1px] text-[13px]"
+                    ghost
+                    round
+                  >
+                    {{
+                      agentAppItem.baseInfo.agentPublishStatus === 'draft'
+                        ? t('common_module.unpublished')
+                        : t('common_module.published')
+                    }}</n-button
+                  >
+                </div>
+                <div class="h-[99px] w-[101px]">
+                  <img :src="agentAppItem.baseInfo.agentAvatar" class="h-[99px] min-w-[101px] rounded-[10px]" />
+                </div>
+              </div>
+              <div>
+                <div class="flex justify-between">
+                  <div class="text-[12px] text-[#999999]">
+                    {{ t('personal_space_module.agent_module.agent_list_module.modified_time') }}
+                    {{ formatDateTime(agentAppItem.modifiedTime) }}
+                  </div>
+                  <div class="flex">
+                    <Star
+                      v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
+                      theme="two-tone"
+                      size="18"
+                      :fill="agentAppItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
+                      :stroke-width="2"
+                      class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
+                      @click="handleApplicationsCollect(agentAppItem)"
+                    />
+                    <n-popover
+                      placement="bottom-end"
+                      trigger="hover"
+                      :show-arrow="false"
+                      class="rounded-[10px]! px-[12px]! cursor-pointer"
+                    >
+                      <template #trigger>
+                        <More
+                          theme="outline"
+                          size="18"
+                          fill="#333"
+                          :stroke-width="2"
+                          class="ml-[12px] cursor-pointer"
+                        />
+                      </template>
+                      <div
+                        v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
+                        class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
+                        @click="handleAnalysisPersonalApp(agentAppItem)"
+                      >
+                        {{ t('common_module.data_table_module.analysis') }}
+                      </div>
+                      <div v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'">
+                        <div v-show="agentAppItem.isSale === 'Y'">
+                          <n-popconfirm
+                            :show-icon="false"
+                            class="w-[170px]"
+                            :positive-text="t('common_module.confirm_btn_text')"
+                            :negative-text="t('common_module.cancel_btn_text')"
+                            @positive-click="handleChangeApplicationsSaleStatus(agentAppItem)"
+                          >
+                            <template #trigger>
+                              <div
+                                class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
+                              >
+                                {{ t('common_module.data_table_module.remove_applications') }}
+                              </div>
+                            </template>
+                            {{
+                              t('personal_space_module.agent_module.agent_list_module.remove_applications_dialog_title')
+                            }}
+                          </n-popconfirm>
+                        </div>
+                        <div v-show="agentAppItem.isSale === 'N'">
+                          <div
+                            class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
+                            @click="handleChangeApplicationsSaleStatus(agentAppItem)"
+                          >
+                            {{ t('common_module.data_table_module.listing_applications') }}
+                          </div>
+                        </div>
+                      </div>
 
-    <div class="mb-4" :style="{ height: tableContentY + 48 + 'px' }">
-      <NDataTable
-        :loading="agentAppListTableLoading"
-        :bordered="true"
-        :bottom-bordered="true"
-        :single-line="false"
-        :data="agentAppList"
-        :columns="columns"
-        :max-height="tableContentY"
-        :scroll-x="1330"
-      >
-        <template #empty>
-          <div :style="{ height: tableContentY + 'px' }" class="flex items-center justify-center">
+                      <div
+                        class="w-[96px] rounded-[5px] py-[4px] pl-[8px] text-[14px] text-[#F25744] hover:bg-[#f1f1f1]"
+                        @click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)"
+                      >
+                        {{ t('common_module.delete') }}
+                      </div>
+                    </n-popover>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </n-grid-item>
+          <div v-for="number in 4" v-show="agentAppListBottomLoadingMore" :key="number" class="w-[380px]">
+            <n-skeleton text :repeat="12" />
+          </div>
+        </n-grid>
+        <div v-else>
+          <div class="flex h-[650px] w-full items-center justify-center">
             <div class="flex flex-col items-center justify-center">
-              <img src="@/assets/images/empty.png" alt="empty" class="mb-2 h-[160px] w-[230px]" />
-              <p class="text-base text-[#84868c]">{{ emptyTableText }}</p>
+              <img :src="emptyTableImage" alt="empty" class="mb-[20px] h-[68px] w-[68px]" />
+              <p class="mb-[14px] text-[14px] text-[#999999]">
+                {{ emptyTableText }}
+              </p>
+              <NButton
+                v-show="emptyTableText === t('personal_space_module.agent_module.agent_list_module.application_empty')"
+                type="primary"
+                :bordered="false"
+                :focusable="false"
+                @click="handleSelectAddType"
+              >
+                <span class="text-center text-[14px]">{{ t('common_module.create_agent_btn_text') }}</span>
+              </NButton>
             </div>
           </div>
-        </template>
-      </NDataTable>
+        </div>
+        <div
+          v-show="pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0"
+          class="mb-[50px] mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
+        >
+          <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
+          <div class="mb-[8px] w-[80px]">
+            {{ t('personal_space_module.agent_module.agent_list_module.already_bottom') }}
+          </div>
+          <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
+        </div>
+      </div>
     </div>
-
-    <footer v-show="isLoadingPagination" class="flex justify-end">
-      <CustomPagination
-        :paging-info="pagingInfo"
-        @update-page-no="handleGetApplicationListUpdatePageNo"
-        @update-page-size="handleGetApplicationListUpdatePageSize"
-      />
-    </footer>
+    <SaleApplicationsConfigurationModal
+      v-model="isShowSaleApplicationsConfigurationModal"
+      :data="saleApplicationsInfo"
+      @update="(newValue: string) => (saleApplicationsInfo.isSale = newValue)"
+    />
   </div>
 </template>
+
+<style lang="scss" scoped>
+@media (width >= 1536px) and (width <= 1670px) {
+  .popover-trigger,
+  .agent-desc {
+    width: 100%;
+    max-width: 110px;
+  }
+}
+
+@media (width <= 1370px) {
+  .popover-trigger,
+  .agent-desc {
+    width: 100%;
+    max-width: 120px;
+  }
+}
+</style>

src/views/personal-space/personal-app/sale-applications-configuration-modal.vue

+<script setup lang="ts">
+import { fetchSalePublishApplication } from '@/apis/agent-application'
+import { PersonalAppConfigState } from '@/store/types/personal-app-config'
+import { Close, Help, Notes, CheckSmall } from '@icon-park/vue-next'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const isShowSaleApplicationsConfigurationModal = defineModel<boolean>()
+
+const props = defineProps<{
+  data: PersonalAppConfigState
+}>()
+
+const emit = defineEmits<{
+  update: [value: string]
+}>()
+
+const { t } = useI18n()
+
+const checkedClassifyValue = ref('')
+const isCopy = ref('N')
+const saleApplicationsId = ref(props.data.agentPublishId)
+
+const isClassifyError = ref(false)
+
+const applicationsClassify = [
+  {
+    value: 'mediaEntertainment',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.media_entertainment',
+    ),
+  },
+  {
+    value: 'educationTraining',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.education_training',
+    ),
+  },
+  {
+    value: 'businessServices',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.business_services',
+    ),
+  },
+  {
+    value: 'medicalHealth',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.medical_health',
+    ),
+  },
+  {
+    value: 'efficiencyTools',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.efficiency_tools',
+    ),
+  },
+  {
+    value: 'officePersonnel',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.office_personnel',
+    ),
+  },
+  {
+    value: 'marketingCommerce',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.marketing_commerce',
+    ),
+  },
+  {
+    value: 'finance',
+    label: t('personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.finance'),
+  },
+  {
+    value: 'law',
+    label: t('personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.law'),
+  },
+  {
+    value: 'cultureTourism',
+    label: t(
+      'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classify.culture_tourism',
+    ),
+  },
+]
+
+watch(
+  () => checkedClassifyValue.value,
+  () => {
+    if (checkedClassifyValue.value !== '') isClassifyError.value = false
+  },
+)
+
+watch(
+  () => props.data,
+  (newVal) => {
+    saleApplicationsId.value = newVal.agentPublishId
+  },
+)
+
+function handleApplicationsSaleSettingModalClose() {
+  isShowSaleApplicationsConfigurationModal.value = false
+  checkedClassifyValue.value = ''
+}
+
+function handleApplicationReleaseBtn() {
+  if (!checkedClassifyValue.value) {
+    isClassifyError.value = true
+    return
+  }
+  const payload = {
+    agentPublishId: saleApplicationsId.value,
+    agentType: checkedClassifyValue.value,
+    isCopy: isCopy.value,
+    isSale: 'Y',
+  }
+  fetchSalePublishApplication(payload)
+    .then(() => {
+      emit('update', 'Y')
+      handleApplicationsSaleSettingModalClose()
+      window.$message.success(t('common_module.listing_successfully'))
+      isClassifyError.value = false
+    })
+    .catch(() => {
+      window.$message.success(t('common_module.listing_failed'))
+    })
+}
+
+function handleIsCopySwitchUpdateValue(value: string) {
+  isCopy.value = value
+}
+</script>
+
+<template>
+  <n-modal v-model:show="isShowSaleApplicationsConfigurationModal" class="h-auto max-h-[720px]" :mask-closable="false">
+    <div class="flex flex-col items-center justify-center">
+      <div class="max-h-[720px] w-[720px] rounded-lg bg-white p-[24px]">
+        <div class="mb-[24px] flex items-center justify-between text-[20px] font-medium">
+          <div class="flex items-center">
+            <span class=" ">{{
+              t(
+                'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_square_release_setting',
+              )
+            }}</span>
+            <Notes theme="outline" size="17" fill="#333" class="ml-[8px]" />
+          </div>
+
+          <Close
+            theme="outline"
+            size="12"
+            fill="#00000073"
+            class="cursor-pointer"
+            @click="handleApplicationsSaleSettingModalClose"
+          />
+        </div>
+        <div class="items-center justify-center rounded-[4px]">
+          <div class="mb-[16px] flex items-center text-[14px] text-[#151B26]">
+            <div class="bg-theme-color mr-[8px] h-[20px] w-[20px] rounded-2xl text-center text-[#fff]">1</div>
+            <div class="text-[16px]">
+              {{
+                t(
+                  'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classification',
+                )
+              }}
+            </div>
+            <div class="text-[#f33e3e]">*</div>
+          </div>
+          <div class="flex flex-wrap justify-between">
+            <button
+              v-for="classify in applicationsClassify"
+              :key="classify.value"
+              :class="['classify-radio-button', { active: checkedClassifyValue === classify.value }]"
+              class="relative mb-[8px] mr-[4px] h-[26px] cursor-pointer rounded-[6px] border-[1px] border-[#edeef7] bg-[#edeef7] px-[8px] text-[12px]"
+              @click="checkedClassifyValue = classify.value"
+            >
+              <div
+                v-show="checkedClassifyValue === classify.value"
+                class="bg-theme-color absolute left-0 top-[-1px] h-[14px] w-[14px] rounded-[3px]"
+                style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+              >
+                <CheckSmall theme="outline" size="10" fill="#fff" />
+              </div>
+              {{ classify.label }}
+            </button>
+          </div>
+          <div class="mb-[10px] h-[16px] text-red-500">
+            <div v-show="isClassifyError">
+              {{
+                t(
+                  'personal_space_module.agent_module.agent_setting_module.agent_sale_module.application_classification_null',
+                )
+              }}
+            </div>
+          </div>
+          <div class="mb-[12px] flex items-center">
+            <div class="bg-theme-color mr-[8px] h-[20px] w-[20px] rounded-2xl text-center text-[#fff]">2</div>
+            {{ t('personal_space_module.agent_module.agent_setting_module.agent_sale_module.is_copy') }}
+            <n-popover trigger="hover">
+              <template #trigger>
+                <Help theme="outline" size="16" fill="#333" class="ml-[5px] cursor-pointer" />
+              </template>
+              <div class="w-[250px]">
+                {{ t('personal_space_module.agent_module.agent_setting_module.agent_sale_module.copy_tip') }}
+              </div>
+            </n-popover>
+          </div>
+          <n-switch size="small" checked-value="Y" unchecked-value="N" @update:value="handleIsCopySwitchUpdateValue"
+            ><template #checked
+              >{{ t('personal_space_module.agent_module.agent_setting_module.agent_sale_module.yes') }}
+            </template>
+            <template #unchecked>
+              {{ t('personal_space_module.agent_module.agent_setting_module.agent_sale_module.no') }}
+            </template></n-switch
+          >
+        </div>
+        <div class="">
+          <div class="flex max-h-[490px] justify-center overflow-y-hidden bg-[#f3f4fb]"></div>
+
+          <div class="mt-[24px] flex justify-end">
+            <button
+              class="hover:text-theme-color hover:border-theme-color !mr-[12px] box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none transition-all duration-300 hover:border-[theme-color]"
+              @click="handleApplicationsSaleSettingModalClose"
+            >
+              {{ t('common_module.cancel') }}
+            </button>
+            <button
+              class="bg-theme-color !box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-[te] px-[10px] text-[#ffffff] transition-all duration-300 hover:bg-[#528EFF]"
+              @click="handleApplicationReleaseBtn()"
+            >
+              {{ t('personal_space_module.agent_module.agent_setting_module.agent_sale_module.confirm_release') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<style lang="scss" scoped>
+.classify-radio-button {
+  &.active {
+    background-color: #eef3fe;
+    border: 1px solid #000dff;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+</style>

types/locales.d.ts

@@ -39,6 +39,7 @@ declare namespace I18n {
       copy_success_message: string
       delete_success_message: string
       save_success_message: string
+      save_fail_message: string
       edit_success_message: string
       publish_success_message: string
       clear_success_message: string
@@ -59,6 +60,16 @@ declare namespace I18n {
       accurate_mode: string
       balance_mode: string
       creative_mode: string
+      all: string
+      collect: string
+      listing_successfully: string
+      listing_failed: string
+      removal_successfully: string
+      removal_failed: string
+      collect_successfully: string
+      collect_unsubscribed: string
+      cancel: string
+      preservation: string
 
       dialogue_module: {
         continue_question_message: string
@@ -76,6 +87,9 @@ declare namespace I18n {
         copy: string
         delete: string
         view: string
+        analysis: string
+        listing_applications: string
+        remove_applications: string
       }
 
       pagination_module: {
@@ -84,6 +98,9 @@ declare namespace I18n {
         page_unit: string
         total: string
         goto: string
+        remove_applications_dialog_title: string
+        already_bottom: string
+        application_empty: string
       }
     }
 
@@ -218,6 +235,38 @@ declare namespace I18n {
             continuous_question_default_desc: string
             continuous_question_close: string
             continuous_question_close_desc: string
+            memory: string
+            add_memory_variable: string
+            memory_variable: string
+            memory_message: string
+            memory_variable_message: string
+            memory_variable_action_edit: string
+            memory_variable_action_copy: string
+            variable_name: string
+            variable_value: string
+
+            memory_variable_modal: {
+              edit_memory_variable: string
+              memory_variable_message_tip: string
+              memory_variable_table_name: string
+              memory_variable_table_name_tip: string
+              memory_variable_table_name_content: string
+              memory_variable_table_name_length: string
+              memory_variable_table_default_value: string
+              default_value_tip: string
+              default_value_tip_example: string
+              memory_variable_table_action: string
+              default_value_placeholder: string
+              name_placeholder: string
+              add_variable: string
+
+              memory_variable_rules: {
+                name_not_null: string
+                name_length: string
+                name_supports: string
+                name_not_duplicated: string
+              }
+            }
 
             preview: string
 
@@ -248,6 +297,30 @@ declare namespace I18n {
           }
         }
 
+        agent_sale_module: {
+          application_square_release_setting: string
+          application_classification: string
+          application_classification_null: string
+
+          application_classify: {
+            media_entertainment: string
+            education_training: string
+            business_services: string
+            medical_health: string
+            efficiency_tools: string
+            office_personnel: string
+            marketing_commerce: string
+            finance: string
+            law: string
+            culture_tourism: string
+          }
+          is_copy: string
+          yes: string
+          no: string
+          confirm_release: string
+          copy_tip: string
+        }
+
         knowledge_module: {
           search_knowledge_placeholder: string
           knowledge_name: string