From cb101a5aa63383b6f6e29b9ccb66d4636f5343ab Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 26 Aug 2026 18:50:44 +0800
Subject: [PATCH] feat: application

---
 .../workspace/application/application.ts      |  16 ++-
 .../application/icon_simple_application.svg   |   3 +
 .../application/icon_workflow_application.svg |   5 +
 .../items/DatePickerConstructor.vue           |   1 -
 ui/src/router/admin/index.ts                  |   6 +
 ui/src/views/application/ApplicationView.vue  |  21 ++--
 .../components/ApplicationCreateDropdown.vue  | 113 ++++++++++++++++++
 7 files changed, 146 insertions(+), 19 deletions(-)
 create mode 100644 ui/src/assets/application/icon_simple_application.svg
 create mode 100644 ui/src/assets/application/icon_workflow_application.svg
 create mode 100644 ui/src/views/application/components/ApplicationCreateDropdown.vue

diff --git a/ui/src/api/admin/workspace/application/application.ts b/ui/src/api/admin/workspace/application/application.ts
index 287ce456b0d..a493b7a181e 100644
--- a/ui/src/api/admin/workspace/application/application.ts
+++ b/ui/src/api/admin/workspace/application/application.ts
@@ -1,10 +1,6 @@
-import { get, put } from '../../core/request'
+import { get, post, put } from '../../core/request'
 import type { ParamsPage, ResponsePage } from '../../core/types'
-import type {
-  ApplicationDetail,
-  ApplicationFormPayload,
-  RequestParams,
-} from '@/api/types'
+import type { ApplicationDetail, ApplicationFormPayload, RequestParams } from '@/api/types'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
 const getPrefix = () => {
@@ -25,6 +21,13 @@ const getApplicationDetail = (applicationId: string) => {
   return get<ApplicationDetail>(`${getPrefix()}/${applicationId}`)
 }
 
+/** 导入智能体文件并创建工作空间智能体。 */
+const postApplicationImport = (file: File, folderId: string) => {
+  const payload = new FormData()
+  payload.append('file', file)
+  return post<FormData, ApplicationDetail>(`${getPrefix()}/folder/${folderId}/import`, payload)
+}
+
 /** 保存工作空间智能体配置。 */
 const putApplication = (applicationId: string, data: ApplicationFormPayload) => {
   return put<ApplicationFormPayload, ApplicationDetail>(`${getPrefix()}/${applicationId}`, data)
@@ -33,5 +36,6 @@ const putApplication = (applicationId: string, data: ApplicationFormPayload) =>
 export default {
   getApplicationPage,
   getApplicationDetail,
+  postApplicationImport,
   putApplication,
 }
diff --git a/ui/src/assets/application/icon_simple_application.svg b/ui/src/assets/application/icon_simple_application.svg
new file mode 100644
index 00000000000..da6c323846f
--- /dev/null
+++ b/ui/src/assets/application/icon_simple_application.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.833 7.4a.5.5 0 0 1 .7-.458l7.24 3.152a.5.5 0 0 1 .3.459v7.786a.5.5 0 0 1-.732.443l-7.197-3.784a.583.583 0 0 1-.31-.517V7.4Zm17.631-.468a.5.5 0 0 1 .703.458v7.091a.583.583 0 0 1-.31.517l-7.199 3.784a.5.5 0 0 1-.732-.443v-7.748a.5.5 0 0 1 .298-.457l7.24-3.202ZM9.7 1.743a.625.625 0 0 1 .6 0l6.898 3.064a.5.5 0 0 1-.005.916l-6.995 3.025a.5.5 0 0 1-.396 0L2.806 5.723a.5.5 0 0 1-.004-.916L9.7 1.743Z" fill="white"/>
+</svg>
diff --git a/ui/src/assets/application/icon_workflow_application.svg b/ui/src/assets/application/icon_workflow_application.svg
new file mode 100644
index 00000000000..173811be92d
--- /dev/null
+++ b/ui/src/assets/application/icon_workflow_application.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.184 4.047c.812-.548 1.754-.714 2.384-.714H12.5a.833.833 0 1 0 0 1.667H5.568c-.392 0-.984.113-1.451.428-.42.284-.784.755-.784 1.636 0 .882.365 1.364.79 1.657.47.323 1.061.44 1.445.44h8.93c.635 0 1.565.172 2.362.73.84.588 1.473 1.569 1.473 3.017 0 1.447-.631 2.43-1.47 3.022-.797.56-1.727.737-2.365.737H7.5A.833.833 0 1 0 7.5 15h6.998c.384 0 .955-.116 1.404-.433.407-.286.765-.765.765-1.659 0-.893-.358-1.369-.762-1.652-.449-.314-1.02-.428-1.407-.428h-8.93c-.638 0-1.58-.177-2.39-.734-.853-.588-1.511-1.571-1.511-3.03 0-1.46.66-2.438 1.517-3.017Z" fill="white"/>
+  <path d="M7.5 15a.833.833 0 1 0 0 1.667h-5A.833.833 0 1 1 2.5 15h5Zm5-10a.833.833 0 1 0 0-1.667h4.955a.833.833 0 1 1 0 1.667H12.5Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.333a.833.833 0 1 0 0 1.667.833.833 0 0 0 0-1.667Zm-2 .834a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0ZM7.5 15a.833.833 0 1 0 0 1.667A.833.833 0 0 0 7.5 15Zm-2 .833a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z" fill="white"/>
+</svg>
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue
index 70306485440..cb49d4942f2 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/DatePickerConstructor.vue
@@ -62,7 +62,6 @@
 </template>
 <script setup lang="ts">
 import { computed, onBeforeMount } from 'vue'
-import moment from 'moment'
 const type_list = [
   {
     label: '年',
diff --git a/ui/src/router/admin/index.ts b/ui/src/router/admin/index.ts
index 1e2f050465d..e08853b2709 100644
--- a/ui/src/router/admin/index.ts
+++ b/ui/src/router/admin/index.ts
@@ -29,6 +29,12 @@ const router = createRouter({
       component: () => import('@/views/error/NotFoundView.vue'),
       meta: { title: '页面不存在' },
     },
+    {
+      path: '/demo/dynamics-form',
+      name: '/demo-dynamics-form',
+      component: () => import('@/components/mk-dynamics-form/Demo.vue'),
+      meta: { title: '动态表单演示' },
+    },
   ],
 })
 
diff --git a/ui/src/views/application/ApplicationView.vue b/ui/src/views/application/ApplicationView.vue
index 8f6555fb0dd..6fc854aea9c 100644
--- a/ui/src/views/application/ApplicationView.vue
+++ b/ui/src/views/application/ApplicationView.vue
@@ -7,6 +7,7 @@ import { RESOURCE_TYPE } from '@/api/enums'
 import { FOLDER_ENTRIES, FOLDER_ENTRY_ID } from '@/constants'
 import FolderTree from '@/components/business/folder-tree/index.vue'
 import ApplicationCard from './components/ApplicationCard.vue'
+import ApplicationCreateDropdown from './components/ApplicationCreateDropdown.vue'
 
 /* 当前文件夹 */
 const currentFolder = ref<FolderItem>({ ...FOLDER_ENTRIES[RESOURCE_TYPE.APPLICATION].all })
@@ -56,6 +57,10 @@ function handleSearchChange(query?: RequestParams) {
   infiniteScrollRef.value?.reset()
 }
 
+function handleRefreshApplications() {
+  infiniteScrollRef.value?.reset()
+}
+
 function loadApplicationPage(pagination: { currentPage: number; pageSize: number }) {
   return ApplicationApi.getApplicationPage(pagination, {
     ...applicationQuery.value,
@@ -91,18 +96,10 @@ function loadApplicationPage(pagination: { currentPage: number; pageSize: number
         <div class="flex items-center gap-3">
           <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
 
-          <MkDropdown trigger="click" placement="bottom-end">
-            <el-button type="primary">
-              <span>创建</span>
-            </el-button>
-            <template #dropdown>
-              <MkDropdownMenu class="w-48">
-                <MkDropdownItem>创建简易智能体</MkDropdownItem>
-                <MkDropdownItem>创建高级智能体</MkDropdownItem>
-                <MkDropdownItem divided>导入智能体</MkDropdownItem>
-              </MkDropdownMenu>
-            </template>
-          </MkDropdown>
+          <ApplicationCreateDropdown
+            :folder-id="currentFolder.id"
+            @refresh="handleRefreshApplications"
+          />
         </div>
       </component>
 
diff --git a/ui/src/views/application/components/ApplicationCreateDropdown.vue b/ui/src/views/application/components/ApplicationCreateDropdown.vue
new file mode 100644
index 00000000000..f4e2d49222d
--- /dev/null
+++ b/ui/src/views/application/components/ApplicationCreateDropdown.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { UploadFile, UploadInstance } from 'element-plus'
+import ApplicationApi from '@/api/admin/workspace/application/application'
+import { APPLICATION_TYPE } from '@/api/enums'
+import type { ApplicationType } from '@/api/types'
+import { useStore } from '@/stores'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'ApplicationCreateDropdown' })
+
+const { auth } = useStore()
+
+const props = defineProps<{
+  folderId: string
+}>()
+
+const emit = defineEmits<{
+  create: [type: ApplicationType]
+  refresh: []
+}>()
+
+defineSlots<{
+  /** 创建菜单触发器，只能渲染一个有效根节点 */
+  trigger?(): unknown
+}>()
+
+/* 导入创建 */
+const elUploadRef = ref<UploadInstance>()
+function handleImportCreate(file: UploadFile) {
+  if (!file.raw) return
+  ApplicationApi.postApplicationImport(file.raw, props.folderId)
+    .then(() => {
+      return auth.loadAuthBaseProfile().then(() => {
+        MsgSuccess('导入成功')
+        handleRefresh()
+      })
+    })
+    .finally(() => {
+      elUploadRef.value?.clearFiles()
+    })
+}
+
+// 发送刷新列表
+function handleRefresh() {
+  emit('refresh')
+}
+</script>
+
+<template>
+  <MkDropdown trigger="click" placement="bottom-end" persistent>
+    <slot name="trigger">
+      <el-button type="primary">
+        <span class="mr-1">创建</span>
+        <MkIcon name="icon_down_outlined" :size="14" />
+      </el-button>
+    </slot>
+
+    <template #dropdown>
+      <MkDropdownMenu class="w-77!">
+        <MkDropdownItem class="py-2!">
+          <template #icon>
+            <el-avatar shape="square" :size="24">
+              <img
+                style="width: 65%"
+                src="@/assets/application/icon_simple_application.svg"
+                alt=""
+              />
+            </el-avatar>
+          </template>
+          <div class="min-w-0">
+            <p>简易智能体</p>
+            <p class="text-sm text-N500">通过表单设置方式，快速搭建基础功能的智能体</p>
+          </div>
+        </MkDropdownItem>
+        <MkDropdownItem class="py-2!">
+          <template #icon>
+            <el-avatar shape="square" class="bg-warning! -mt-5!" :size="24">
+              <img
+                style="width: 65%"
+                src="@/assets/application/icon_workflow_application.svg"
+                alt=""
+              />
+            </el-avatar>
+          </template>
+          <div class="min-w-0">
+            <p class="leading-5">高级智能体</p>
+            <p class="whitespace-normal text-sm text-N500">
+              使用低代码拖拉拽方式，灵活编排复杂逻辑、功能丰富的智能体
+            </p>
+          </div>
+        </MkDropdownItem>
+        <el-upload
+          ref="elUploadRef"
+          action="#"
+          :auto-upload="false"
+          class="w-full"
+          :file-list="[]"
+          :limit="1"
+          :on-change="handleImportCreate"
+          :show-file-list="false"
+        >
+          <MkDropdownItem class="py-2!">
+            <template #icon>
+              <img class="size-7" src="@/assets/mk_icon_import.svg" alt="" />
+            </template>
+            <span>导入创建</span>
+          </MkDropdownItem>
+        </el-upload>
+      </MkDropdownMenu>
+    </template>
+  </MkDropdown>
+</template>