feat: create application template

Author: wangdan-fit2cloud

ui/src/components/card-box/index.vue

@@ -87,6 +87,7 @@ function subHoveredEnter() {
   position: relative;
   min-height: var(--card-min-height);
   min-width: var(--card-min-width);
+  line-height: 20px !important;
   .card-header {
     margin-top: -5px;
   }

ui/src/components/folder-tree/index.vue

@@ -251,7 +251,7 @@ function refreshFolder() {
   }
   .tree-height {
     padding-top: 4px;
-    height: calc(100vh - 210px);
+    height: calc(100vh - 175px);
   }
 }
 :deep(.overflow-inherit_node__children) {

ui/src/components/layout-container/index.vue

@@ -53,7 +53,7 @@ const showBack = computed(() => {
 
     .layout-container__left_content {
       width: 100%;
-      height: 100%;
+      // height: 100%;
     }
 
     &.hidden {

ui/src/locales/lang/en-US/views/application.ts

@@ -53,8 +53,13 @@ export default {
       workflowPlaceholder: 'Suitable for advanced users to customize the workflow of assistant',
     },
     appTemplate: {
-      blankApp: 'Blank APP',
-      assistantApp: 'Knowledge Assistant',
+      blankApp: {
+        title: 'Blank APP',
+      },
+      assistantApp: {
+        title: 'Knowledge Assistant',
+        description: 'Suitable for advanced users to customize the workflow of assistant',
+      },
     },
     aiModel: {
       label: 'AI Model',

ui/src/locales/lang/zh-CN/views/application.ts

@@ -1,3 +1,5 @@
+import type { title } from 'process'
+
 export default {
   title: '应用',
   createApplication: '创建简易应用',
@@ -49,8 +51,13 @@ export default {
       workflowPlaceholder: '适合高级用户自定义小助手的工作流',
     },
     appTemplate: {
-      blankApp: '空白应用',
-      assistantApp: '知识库问答助手',
+      blankApp: {
+        title: '空白创建',
+      },
+      assistantApp: {
+        title: '知识库问答助手',
+        description: '基于用户问题，检索知识库相关内容作为AI模型的参考内容',
+      },
     },
     aiModel: {
       label: 'AI 模型',

ui/src/locales/lang/zh-Hant/views/application.ts

@@ -47,9 +47,15 @@ export default {
       simplePlaceholder: '適合新手建立小助手',
       workflowPlaceholder: '適合高階用戶自訂小助手的工作流程',
     },
+
     appTemplate: {
-      blankApp: '空白應用',
-      assistantApp: '知識庫問答助手',
+      blankApp: {
+        title: '空白创建',
+      },
+      assistantApp: {
+        title: '知識庫問答助手',
+        description: '基於用戶問題，檢索知識庫相關內容作爲AI模型的參考內容',
+      },
     },
     aiModel: {
       label: 'AI 模型',

ui/src/views/application/component/CreateApplicationDialog.vue

@@ -47,23 +47,35 @@
           <el-row :gutter="16">
             <el-col :span="12">
               <el-card
-                class="radio-card cursor"
+                class="template-radio-card cursor text-center flex-center"
                 shadow="never"
                 @click="selectedType('blank')"
                 :class="appTemplate === 'blank' ? 'active' : ''"
               >
-                {{ $t('views.application.form.appTemplate.blankApp') }}
+                <div class="flex-center p-24">
+                  <el-icon class="mr-12"><Plus /></el-icon>
+                  {{ $t('views.application.form.appTemplate.blankApp.title') }}
+                </div>
               </el-card>
             </el-col>
             <el-col :span="12">
-              <el-card
-                class="radio-card cursor"
+              <CardBox
+                :title="$t('views.application.form.appTemplate.assistantApp.title')"
+                :description="$t('views.application.form.appTemplate.assistantApp.description')"
                 shadow="never"
+                class="template-radio-card cursor"
                 :class="appTemplate === 'assistant' ? 'active' : ''"
                 @click="selectedType('assistant')"
               >
-                {{ $t('views.application.form.appTemplate.assistantApp') }}
-              </el-card>
+                <template #icon>
+                  <LogoIcon height="32px" />
+                </template>
+                <template #subTitle>
+                  <el-text class="color-secondary" size="small">
+                    {{ $t('views.application.workflow') }}
+                  </el-text>
+                </template>
+              </CardBox>
             </el-col>
           </el-row>
         </div>
@@ -90,6 +102,7 @@ import applicationApi from '@/api/application/application'
 import { MsgSuccess, MsgAlert } from '@/utils/message'
 import { isWorkFlow } from '@/utils/application'
 import { baseNodes } from '@/workflow/common/data'
+import { applicationTemplate } from '@/views/application/template'
 import { t } from '@/locales'
 import useStore from '@/stores'
 const { user } = useStore()
@@ -220,7 +233,7 @@ const submitHandle = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
-      if (isWorkFlow(applicationForm.value.type) && appTemplate.value === 'blank') {
+      if (isWorkFlow(applicationForm.value.type)) {
         workflowDefault.value.nodes[0].properties.node_data.desc = applicationForm.value.desc
         workflowDefault.value.nodes[0].properties.node_data.name = applicationForm.value.name
         applicationForm.value['work_flow'] = workflowDefault.value
@@ -248,17 +261,18 @@ const submitHandle = async (formEl: FormInstance | undefined) => {
 
 function selectedType(type: string) {
   appTemplate.value = type
+  workflowDefault.value = applicationTemplate[type]
 }
 
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
-.radio-card {
-  line-height: 22px;
+.template-radio-card {
+  height: 130px !important;
+  min-height: 130px !important;
 
   &.active {
     border-color: var(--el-color-primary);
-    color: var(--el-color-primary);
   }
 }
 </style>

ui/src/views/application/index.vue

@@ -101,7 +101,7 @@
                   :limit="1"
                   :on-change="(file: any, fileList: any) => importApplication(file)"
                 >
-                  <el-dropdown-item class="w-full">
+                  <el-dropdown-item>
                     <div class="flex align-center w-full">
                       <el-avatar shape="square" class="mt-4" :size="36" style="background: none">
                         <img src="@/assets/icon_import.svg" alt="" />
@@ -129,7 +129,7 @@
       </template>
       <div
         v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading"
-        style="max-height: calc(100vh - 140px)"
+        style="max-height: calc(100vh - 120px)"
       >
         <InfiniteScroll
           :size="applicationList.length"