feat: application

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,
 }

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: '年',

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: '动态表单演示' },
+    },
   ],
 })
 

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>
 

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>