From 5fb86a8f15acca5a6cdbb0044a0922bf1ede427a Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 24 Nov 2023 19:02:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/application.ts                     |  69 ++++++++-
 ui/src/api/dataset.ts                         |   6 +-
 ui/src/api/type/application.ts                |   8 +-
 ui/src/assets/icon_send.svg                   |   4 +
 ui/src/assets/icon_send_colorful.svg          |  14 ++
 ui/src/components/ai-dialog/index.vue         |  63 ++++++++-
 ui/src/components/back-button/index.vue       |  10 +-
 ui/src/components/icons/index.ts              |  49 +++----
 ui/src/layout/components/app-main/index.vue   |   2 +-
 .../components/sidebar/AppBreadcrumb.vue      | 131 ++++++++++++++++++
 ui/src/layout/components/sidebar/index.vue    |  12 ++
 ui/src/router/modules/application.ts          |   8 +-
 ui/src/router/modules/dataset.ts              |   8 +-
 ui/src/stores/index.ts                        |   8 +-
 ui/src/stores/modules/application.ts          |  23 +++
 ui/src/stores/modules/common.ts               |  17 +++
 ui/src/stores/modules/dataset.ts              |  13 ++
 ui/src/styles/app.scss                        |   8 ++
 ui/src/styles/element-plus.scss               |   4 +
 ui/src/views/application/CreateAndSetting.vue |  59 ++++++--
 .../components/AddDatasetDialog.vue           |  32 +++--
 ui/src/views/document/DatasetSetting.vue      |   6 +-
 ui/src/views/document/index.vue               |  14 +-
 .../paragraph/component/ParagraphDialog.vue   |   6 +-
 .../paragraph/component/ProblemComponent.vue  |   8 +-
 ui/src/views/paragraph/index.vue              |  10 +-
 26 files changed, 497 insertions(+), 95 deletions(-)
 create mode 100644 ui/src/assets/icon_send.svg
 create mode 100644 ui/src/assets/icon_send_colorful.svg
 create mode 100644 ui/src/layout/components/sidebar/AppBreadcrumb.vue
 create mode 100644 ui/src/stores/modules/application.ts
 create mode 100644 ui/src/stores/modules/common.ts

diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
index b1c103fa3..289cf20e2 100644
--- a/ui/src/api/application.ts
+++ b/ui/src/api/application.ts
@@ -1,8 +1,17 @@
 import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
 import type { pageRequest } from '@/api/type/common'
+import type { ApplicationFormType } from '@/api/type/application'
 const prefix = '/application'
 
+/**
+ * 获取全部应用
+ * @param 参数
+ */
+const getAllAppilcation: () => Promise<Result<any[]>> = () => {
+  return get(`${prefix}`)
+}
+
 /**
  * 获取分页应用
  * @param 参数  {
@@ -17,6 +26,62 @@ const getApplication: (param: pageRequest) => Promise<Result<any>> = (param) =>
     param.name && { name: param.name }
   )
 }
-export default {
-  getApplication
+
+/**
+ * 创建数据集
+ * @param 参数 
+ * {
+  "name": "string",
+  "desc": "string",
+  "model_id": "string",
+  "multiple_rounds_dialogue": true,
+  "prologue": "string",
+  "example": [
+    "string"
+  ],
+  "dataset_id_list": [
+    "string"
+  ]
+}
+ */
+const postApplication: (data: ApplicationFormType) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}`, data)
+}
+
+// 临时对话open
+/**
+ * 创建数据集
+ * @param 参数 
+ * {
+  "model_id": "string",
+  "multiple_rounds_dialogue": true,
+  "dataset_id_list": [
+    "string"
+  ]
+}
+ */
+const postChatOpen: (data: ApplicationFormType) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}/chat/open`, data)
+}
+// 临时对话open
+/**
+ * 创建数据集
+ * @param 参数 
+ * chat_id: string
+ * {
+    "message": "string",
+  }
+ */
+const postChatMessage: (chat_id: string, message: string) => Promise<Result<any>> = (
+  chat_id,
+  message
+) => {
+  return post(`${prefix}/chat_message/${chat_id}`, { message })
+}
+export default {
+  getAllAppilcation,
+  getApplication,
+  postApplication,
+  postChatOpen,
+  postChatMessage
 }
diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 106956e74..9247e4e4a 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -21,10 +21,10 @@ const getDateset: (param: pageRequest) => Promise<Result<any>> = (param) => {
 
 /**
  * 获取全部数据集
- * @param 参数 name
+ * @param 参数
  */
-const getAllDateset: (param?: string) => Promise<Result<any[]>> = (param) => {
-  return get(`${prefix}`, param && { name: param })
+const getAllDateset: () => Promise<Result<any[]>> = () => {
+  return get(`${prefix}`)
 }
 
 /**
diff --git a/ui/src/api/type/application.ts b/ui/src/api/type/application.ts
index ff4f7b8e0..69926c7a5 100644
--- a/ui/src/api/type/application.ts
+++ b/ui/src/api/type/application.ts
@@ -1,10 +1,10 @@
 interface ApplicationFormType {
-  name: string
-  desc: string
+  name?: string
+  desc?: string
   model_id: string
   multiple_rounds_dialogue: boolean
-  prologue: string
-  example: string[]
+  prologue?: string
+  example?: string[]
   dataset_id_list: string[]
 }
 export type { ApplicationFormType }
diff --git a/ui/src/assets/icon_send.svg b/ui/src/assets/icon_send.svg
new file mode 100644
index 000000000..79ff6425d
--- /dev/null
+++ b/ui/src/assets/icon_send.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1716 0.688342C19.6753 0.532733 20.0458 1.16193 19.6652 1.52691L11.2658 9.58356C10.0058 10.7921 8.32754 11.4668 6.5817 11.4668C4.68044 11.4668 2.8669 10.667 1.58487 9.26303L0.45879 8.02985C0.332247 7.90313 0.241372 7.74527 0.195339 7.5722C0.149305 7.39913 0.149742 7.21698 0.196605 7.04413C0.243468 6.87129 0.335099 6.71386 0.462248 6.58775C0.589398 6.46164 0.747567 6.3713 0.92079 6.32585L19.1716 0.688342Z" fill="#BBBFC4"/>
+<path d="M11 15.1851C11 13.2766 11.7377 11.4419 13.0588 10.0646L20.4664 2.34177C20.8268 1.96601 21.4499 2.32266 21.3084 2.82374L16.143 21.1182C16.0971 21.291 16.0064 21.4487 15.8801 21.5754C15.7538 21.7021 15.5964 21.7932 15.4237 21.8397C15.251 21.8862 15.0691 21.8864 14.8964 21.8402C14.7236 21.794 14.566 21.7031 14.4395 21.5767L13.4439 20.6791C11.8881 19.2764 11 17.2799 11 15.1851Z" fill="#BBBFC4"/>
+</svg>
diff --git a/ui/src/assets/icon_send_colorful.svg b/ui/src/assets/icon_send_colorful.svg
new file mode 100644
index 000000000..b6a1dacb6
--- /dev/null
+++ b/ui/src/assets/icon_send_colorful.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z" fill="url(#paint0_linear_987_5140)"/>
+<path d="M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z" fill="url(#paint1_linear_987_5140)"/>
+<defs>
+<linearGradient id="paint0_linear_987_5140" x1="22.3289" y1="13.1532" x2="1.16113" y2="13.1532" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9258F7"/>
+<stop offset="1" stop-color="#3370FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_987_5140" x1="22.3289" y1="13.1532" x2="1.16113" y2="13.1532" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9258F7"/>
+<stop offset="1" stop-color="#3370FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index ead74679a..82ac6285e 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -23,7 +23,11 @@
               <h4 class="mb-8">您可以尝试输入以下问题：</h4>
               <el-space wrap>
                 <template v-for="(item, index) in data?.example" :key="index">
-                  <div class="problem-button cursor ellipsis-2" v-if="item">
+                  <div
+                    @click="quickProblemHandel(item)"
+                    class="problem-button cursor ellipsis-2"
+                    v-if="item"
+                  >
                     <el-icon><EditPen /></el-icon>
                     {{ item }}
                   </div>
@@ -64,9 +68,24 @@
           placeholder="请输入"
           :autosize="{ minRows: 1, maxRows: 8 }"
         />
-        <div class="operate">
-          <el-button text class="sent-button" disabled>
-            <AppIcon iconName="app-send"></AppIcon>
+        <div class="operate" v-loading="loading">
+          <el-button
+            text
+            class="sent-button"
+            :disabled="!(inputValue && data?.name && data?.model_id)"
+            @click="chatHandle"
+          >
+            <img
+              v-show="!(inputValue && data?.name && data?.model_id)"
+              src="@/assets/icon_send.svg"
+              alt=""
+            />
+            <img
+              v-show="inputValue && data?.name && data?.model_id"
+              src="@/assets/icon_send_colorful.svg"
+              alt=""
+            />
+            <!-- <AppIcon iconName="app-send"></AppIcon> -->
           </el-button>
         </div>
       </div>
@@ -75,13 +94,39 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import applicationApi from '@/api/application'
 const props = defineProps({
   data: {
     type: Object,
     default: () => {}
   }
 })
+const loading = ref(false)
 const inputValue = ref('')
+function quickProblemHandel(val: string) {
+  inputValue.value = val
+}
+function chatHandle() {
+  loading.value = true
+  const obj = {
+    model_id: props.data.model_id,
+    dataset_id_list: props.data.dataset_id_list,
+    multiple_rounds_dialogue: props.data.multiple_rounds_dialogue,
+  }
+  applicationApi
+    .postChatOpen(obj)
+    .then((res) => {
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+
+}
+
+// funcion chatMessage(chatId) {
+//   postChatMessage
+// }
 </script>
 <style lang="scss" scoped>
 .ai-dialog {
@@ -162,12 +207,20 @@ const inputValue = ref('')
         padding: 12px 16px;
       }
       .operate {
-        padding: 10px 12px;
+        padding: 6px 10px;
         .sent-button {
+          max-height: none;
           .el-icon {
             font-size: 24px;
           }
         }
+        :deep(.el-loading-spinner) {
+          margin-top: -15px;
+          .circular {
+            width: 31px;
+            height: 31px;
+          }
+        }
       }
     }
   }
diff --git a/ui/src/components/back-button/index.vue b/ui/src/components/back-button/index.vue
index f5640ad67..17de15298 100644
--- a/ui/src/components/back-button/index.vue
+++ b/ui/src/components/back-button/index.vue
@@ -1,7 +1,9 @@
 <template>
-  <el-icon class="back-button cursor mr-8" @click="jump">
-    <Back />
-  </el-icon>
+  <el-button class="back-button cursor mr-4" text @click="jump">
+    <el-icon>
+      <Back />
+    </el-icon>
+  </el-button>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +27,6 @@ function jump() {
 
 <style lang="scss">
 .back-button {
-  font-size:20px;
+  font-size: 20px;
 }
 </style>
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index 69acdd534..7e102a3d8 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -174,30 +174,31 @@ export const iconMap: any = {
       ])
     }
   },
-  'app-send': {
-    iconReader: () => {
-      return h('i', [
-        h(
-          'svg',
-          {
-            viewBox: '0 0 24 24',
-            version: '1.1',
-            xmlns: 'http://www.w3.org/2000/svg'
-          },
-          [
-            h('path', {
-              d: 'M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z',
-              fill: 'currentColor'
-            })
-          ]
-        )
-      ])
-    }
-  },
+  // 'app-send': {
+  //   iconReader: () => {
+  //     return h('i', [
+  //       h(
+  //         'svg',
+  //         {
+  //           viewBox: '0 0 24 24',
+  //           version: '1.1',
+  //           xmlns: 'http://www.w3.org/2000/svg'
+  //         },
+  //         [
+  //           h('path', {
+  //             d: 'M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z',
+  //             fill: 'currentColor'
+  //           }),
+  //           h('path', {
+  //             d: 'M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z',
+  //             fill: 'currentColor'
+  //           })
+  //         ]
+  //       )
+  //     ])
+  //   }
+  // },
+
   'app-view': {
     iconReader: () => {
       return h('i', [
diff --git a/ui/src/layout/components/app-main/index.vue b/ui/src/layout/components/app-main/index.vue
index c37ef497c..d9a3fabe5 100644
--- a/ui/src/layout/components/app-main/index.vue
+++ b/ui/src/layout/components/app-main/index.vue
@@ -2,7 +2,7 @@
   <router-view v-slot="{ Component }">
     <transition appear name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
-        <component :is="Component" />
+        <component :is="Component" :key="route.fullPath" />
       </keep-alive>
     </transition>
   </router-view>
diff --git a/ui/src/layout/components/sidebar/AppBreadcrumb.vue b/ui/src/layout/components/sidebar/AppBreadcrumb.vue
new file mode 100644
index 000000000..e6f965041
--- /dev/null
+++ b/ui/src/layout/components/sidebar/AppBreadcrumb.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="flex align-center ml-8 mt-8 mb-16">
+    <back-button :to="activeMenu"></back-button>
+    <el-dropdown placement="bottom-start" trigger="click" @command="changeMenu">
+      <span class="el-dropdown-link flex">
+        <span class="ellipsis-1"> {{ currentName }}</span>
+        <el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <template v-for="(item, index) in list" :key="index">
+            <div :class="item.id === id ? 'dropdown-active' : ''">
+              <el-dropdown-item :command="item.id">
+                <div class="flex">
+                  <AppAvatar class="mr-12" shape="square" :size="24">
+                    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+                  <span class="ellipsis-1"> {{ item?.name }}</span>
+                </div>
+              </el-dropdown-item>
+            </div>
+          </template>
+        </el-dropdown-menu>
+        <div class="border-t" style="padding: 8px 11px; min-width: 200px">
+          <template v-if="isApplication">
+            <el-button link @click="router.push({ path: '/application/create' })">
+              <el-icon class="mr-4"><Plus /></el-icon> 创建应用
+            </el-button>
+          </template>
+          <template v-else-if="isDataset">
+            <el-button link @click="router.push({ path: '/dataset/create' })">
+              <el-icon class="mr-4"><Plus /></el-icon> 创建数据集
+            </el-button>
+          </template>
+        </div>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
+import useStore from '@/stores'
+const { common, dataset, application } = useStore()
+const route = useRoute()
+const router = useRouter()
+const {
+  meta: { activeMenu },
+  params: { id }
+} = route
+
+onBeforeRouteLeave((to, from) => {
+  common.saveBreadcrumb(null)
+})
+
+const list = ref<any[]>([])
+const loading = ref(false)
+
+const breadcrumbData = computed(() => common.breadcrumb)
+
+const currentName = computed(() => {
+  const {
+    params: { id }
+  } = route
+  return list.value?.filter((v) => v.id === id)?.[0]?.name
+})
+
+const isApplication = computed(() => {
+  const { meta } = route as any
+  return meta?.activeMenu.includes('application')
+})
+const isDataset = computed(() => {
+  const { meta } = route as any
+  return meta?.activeMenu.includes('dataset')
+})
+function changeMenu(id: string) {
+  if (isApplication.value) {
+    router.push({ path: `/application/${id}/overview` })
+  } else if (isDataset.value) {
+    router.push({ path: `/dataset/${id}/document` })
+  }
+}
+
+function getDataset() {
+  loading.value = true
+  dataset
+    .asyncGetAllDateset()
+    .then((res: any) => {
+      list.value = res.data
+      common.saveBreadcrumb(list.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+function getApplication() {
+  loading.value = true
+  application
+    .asyncGetAllApplication()
+    .then((res: any) => {
+      list.value = res.data
+      common.saveBreadcrumb(list.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+onMounted(() => {
+  if (!breadcrumbData.value) {
+    if (isDataset.value) {
+      getDataset()
+    } else if (isApplication.value) {
+      getApplication()
+    }
+  } else {
+    list.value = breadcrumbData.value
+  }
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.dropdown-active) {
+  background-color: var(--el-dropdown-menuItem-hover-fill);
+  .el-dropdown-menu__item {
+    color: var(--el-dropdown-menuItem-hover-color);
+  }
+}
+</style>
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
index ab402452e..e176daa4d 100644
--- a/ui/src/layout/components/sidebar/index.vue
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="sidebar p-8">
+    <div v-if="showBreadcrumb">
+      <AppBreadcrumb />
+    </div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu :default-active="activeMenu" router>
         <sidebar-item
@@ -19,9 +22,18 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { getChildRouteListByPathAndName } from '@/router/index'
 import SidebarItem from './SidebarItem.vue'
+import AppBreadcrumb from './AppBreadcrumb.vue'
 
 const route = useRoute()
 
+const showBreadcrumb = computed(() => {
+  const { meta } = route as any
+  return (
+    meta?.activeMenu &&
+    (meta?.activeMenu.includes('dataset') || meta?.activeMenu.includes('application'))
+  )
+})
+
 const subMenuList = computed(() => {
   const { meta } = route
   return getChildRouteListByPathAndName(meta.parentPath, meta.parentName)
diff --git a/ui/src/router/modules/application.ts b/ui/src/router/modules/application.ts
index 0597e52e1..f7793fc04 100644
--- a/ui/src/router/modules/application.ts
+++ b/ui/src/router/modules/application.ts
@@ -18,7 +18,7 @@ const applicationRouter = {
       hidden: true
     },
     {
-      path: '/application/:appId',
+      path: '/application/:id',
       name: 'ApplicationDetail',
       meta: { title: '应用详情', activeMenu: '/application' },
       component: Layout,
@@ -31,7 +31,7 @@ const applicationRouter = {
             icon: 'Document',
             title: '概览',
             active: 'overview',
-            parentPath: '/application/:appId',
+            parentPath: '/application/:id',
             parentName: 'ApplicationDetail'
           },
           component: () => import('@/views/application/AppOverview.vue')
@@ -43,7 +43,7 @@ const applicationRouter = {
             icon: 'Setting',
             title: '设置',
             active: 'setting',
-            parentPath: '/application/:appId',
+            parentPath: '/application/:id',
             parentName: 'ApplicationDetail'
           },
           component: () => import('@/views/application/CreateAndSetting.vue')
@@ -55,7 +55,7 @@ const applicationRouter = {
             icon: 'Setting',
             title: '对话日志',
             active: 'dialog',
-            parentPath: '/application/:appId',
+            parentPath: '/application/:id',
             parentName: 'ApplicationDetail'
           },
           component: () => import('@/views/application/DialogLog.vue')
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index af8232547..1695cba40 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -18,7 +18,7 @@ const datasetRouter = {
       hidden: true
     },
     {
-      path: '/dataset/:datasetId',
+      path: '/dataset/:id',
       name: 'DatasetDetail',
       meta: { title: '文档', activeMenu: '/dataset' },
       component: Layout,
@@ -31,7 +31,7 @@ const datasetRouter = {
             icon: 'Document',
             title: '文档',
             active: 'document',
-            parentPath: '/dataset/:datasetId',
+            parentPath: '/dataset/:id',
             parentName: 'DatasetDetail'
           },
           component: () => import('@/views/document/index.vue')
@@ -43,7 +43,7 @@ const datasetRouter = {
             icon: 'Setting',
             title: '设置',
             active: 'setting',
-            parentPath: '/dataset/:datasetId',
+            parentPath: '/dataset/:id',
             parentName: 'DatasetDetail'
           },
           component: () => import('@/views/document/DatasetSetting.vue')
@@ -51,7 +51,7 @@ const datasetRouter = {
       ]
     },
     {
-      path: '/dataset/:datasetId/:documentId', // 分段详情
+      path: '/dataset/:id/:documentId', // 分段详情
       name: 'Paragraph',
       meta: { activeMenu: '/dataset' },
       component: () => import('@/views/paragraph/index.vue'),
diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
index bec30d953..541c0c864 100644
--- a/ui/src/stores/index.ts
+++ b/ui/src/stores/index.ts
@@ -1,16 +1,20 @@
 import { createPinia } from 'pinia'
 const store = createPinia()
 export { store }
+import useCommonStore from './modules/common'
 import useUserStore from './modules/user'
 import useDatasetStore from './modules/dataset'
 import useParagraphStore from './modules/paragraph'
 import useModelStore from './modules/model'
+import useApplicationStore from './modules/application'
 
 const useStore = () => ({
+  common: useCommonStore(),
   user: useUserStore(),
   dataset: useDatasetStore(),
-  paragraph:  useParagraphStore(),
-  model:  useModelStore(),
+  paragraph: useParagraphStore(),
+  model: useModelStore(),
+  application: useApplicationStore()
 })
 
 export default useStore
diff --git a/ui/src/stores/modules/application.ts b/ui/src/stores/modules/application.ts
new file mode 100644
index 000000000..8fb1ed5e5
--- /dev/null
+++ b/ui/src/stores/modules/application.ts
@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import applicationApi from '@/api/application'
+
+const useApplicationStore = defineStore({
+  id: 'application',
+  state: () => ({}),
+  actions: {
+    async asyncGetAllApplication() {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .getAllAppilcation()
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useApplicationStore
diff --git a/ui/src/stores/modules/common.ts b/ui/src/stores/modules/common.ts
new file mode 100644
index 000000000..0d5b93bc3
--- /dev/null
+++ b/ui/src/stores/modules/common.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import type { User } from '@/api/type/user'
+import UserApi from '@/api/user'
+
+const useCommonStore = defineStore({
+  id: 'common',
+  state: () => ({
+    breadcrumb: null
+  }),
+  actions: {
+    saveBreadcrumb(data) {
+      this.breadcrumb = data
+    }
+  }
+})
+
+export default useCommonStore
diff --git a/ui/src/stores/modules/dataset.ts b/ui/src/stores/modules/dataset.ts
index 84cc1574c..0ea9217ca 100644
--- a/ui/src/stores/modules/dataset.ts
+++ b/ui/src/stores/modules/dataset.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import type { datasetData } from '@/api/type/dataset'
 import type { UploadUserFile } from 'element-plus'
+import datasetApi from '@/api/dataset'
 
 export interface datasetStateTypes {
   baseInfo: datasetData | null
@@ -19,6 +20,18 @@ const useDatasetStore = defineStore({
     },
     saveDocumentsFile(file: UploadUserFile[]) {
       this.documentsFiles = file
+    },
+    async asyncGetAllDateset() {
+      return new Promise((resolve, reject) => {
+        datasetApi
+          .getAllDateset()
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
     }
   }
 })
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 602a33bbd..27f4ba85a 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -326,6 +326,14 @@ h4 {
   }
 }
 
+// checkbox-group 文字在左 input在右
+.app-custom-checkbox-group {
+  line-height: normal;
+  .el-checkbox__label {
+    display: none;
+  }
+}
+
 /*
   头像渐变背景
 */
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 67906aedf..1ba2761ae 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -102,6 +102,10 @@
   color: var(--app-text-color);
   font-weight: 400;
   padding: 5px 11px;
+  &:not(.is-disabled):focus {
+    background-color: var(--app-text-color-light-1);
+    color: var(--app-text-color);
+  }
 }
 
 .el-tag {
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index 74c51c7b5..58ec8e461 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer :header="appId ? '设置' : '创建应用'" back-to="-1" class="create-application">
+  <LayoutContainer :header="id ? '设置' : '创建应用'" back-to="-1" class="create-application">
     <el-row>
       <el-col :span="10">
         <div class="p-24 mb-16" style="padding-bottom: 0">
@@ -79,7 +79,7 @@
                 <template #label>
                   <div class="flex-between">
                     <span>关联数据集</span>
-                    <el-button type="primary" link>
+                    <el-button type="primary" link @click="openDatasetDialog">
                       <el-icon class="mr-4"><Plus /></el-icon> 添加
                     </el-button>
                   </div>
@@ -87,7 +87,7 @@
                 <div>
                   <el-text type="info">关联的数据集展示在这里</el-text>
                 </div>
-                <div class="w-full">
+                <!-- <div class="w-full">
                   <el-row :gutter="12">
                     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-8">
                       <el-card class="relate-dataset-card" shadow="never">
@@ -105,14 +105,14 @@
                       </el-card>
                     </el-col>
                   </el-row>
-                </div>
+                </div> -->
               </el-form-item>
               <el-form-item label="开场白">
                 <el-input
                   v-model="applicationForm.prologue"
                   type="textarea"
                   placeholder="开始对话的欢迎语。您可以这样写：您好，我是 MaxKB 智能小助手，您可以向我提出 MaxKB 产品使用中遇到的任何问题。"
-                  :rows="3"
+                  :rows="4"
                 />
               </el-form-item>
               <el-form-item label="示例">
@@ -128,8 +128,8 @@
           </el-scrollbar>
         </div>
         <div class="text-right border-t p-16">
-          <el-button> 取消 </el-button>
-          <el-button type="primary" :disabled="loading"> 创建 </el-button>
+          <el-button @click="router.push({ path: `/application` })"> 取消 </el-button>
+          <el-button type="primary" @click="submit" :disabled="loading"> 创建 </el-button>
         </div>
       </el-col>
       <el-col :span="14" class="p-24 border-l">
@@ -142,6 +142,7 @@
         </div>
       </el-col>
     </el-row>
+    <AddDatasetDialog ref="AddDatasetDialogRef" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -149,6 +150,7 @@ import { reactive, ref, watch, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { groupBy } from 'lodash'
 import AiDialog from '@/components/ai-dialog/index.vue'
+import AddDatasetDialog from './components/AddDatasetDialog.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
 import type { Provider } from '@/api/type/model'
@@ -158,10 +160,11 @@ const { model } = useStore()
 const router = useRouter()
 const route = useRoute()
 const {
-  params: { appId }
+  params: { id }
 } = route as any
 
 const applicationFormRef = ref<FormInstance>()
+const AddDatasetDialogRef = ref()
 
 const loading = ref(false)
 const exampleList = ref(['', ''])
@@ -192,6 +195,46 @@ watch(exampleList.value, () => {
   applicationForm.example = exampleList.value.filter((v) => v)
 })
 
+function submit() {
+  loading.value = true
+
+  // const documents = [] as any[]
+  // StepSecondRef.value.paragraphList.map((item: any) => {
+  //   documents.push({
+  //     name: item.name,
+  //     paragraphs: item.content
+  //   })
+  // })
+  // const obj = { ...baseInfo.value, documents } as datasetData
+  // if (id) {
+  //   documentApi
+  //     .postDocument(id, documents)
+  //     .then((res) => {
+  //       MsgSuccess('提交成功')
+  //       clearStore()
+  //       router.push({ path: `/dataset/${id}/document` })
+  //     })
+  //     .catch(() => {
+  //       loading.value = false
+  //     })
+  // } else {
+  //   datasetApi
+  //     .postDateset(obj)
+  //     .then((res) => {
+  //       successInfo.value = res.data
+  //       active.value = 2
+  //       clearStore()
+  //       loading.value = false
+  //     })
+  //     .catch(() => {
+  //       loading.value = false
+  //     })
+  // }
+}
+function openDatasetDialog() {
+  AddDatasetDialogRef.value.open()
+}
+
 function getModel() {
   loading.value = true
   model
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/components/AddDatasetDialog.vue
index ff8f05153..613b11ec5 100644
--- a/ui/src/views/application/components/AddDatasetDialog.vue
+++ b/ui/src/views/application/components/AddDatasetDialog.vue
@@ -1,17 +1,26 @@
 <template>
   <el-dialog title="添加关联数据集" v-model="dialogVisible" width="600">
-    <el-row :gutter="12">
-      <el-col :span="12">
-        <el-card shadow="hover"> Hover </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card shadow="hover"> Hover </el-card>
-      </el-col>
-    </el-row>
+    <el-checkbox-group v-model="checkList" class="app-custom-checkbox-group">
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-card shadow="hover">
+            <div class="title flex-between">
+              <div class="flex align-center">
+                <AppAvatar class="mr-12" shape="square" :size="32">
+                  <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                </AppAvatar>
+                <h4 class="ellipsis-1">数据集</h4>
+              </div>
+              <el-checkbox label="Option A" />
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-checkbox-group>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
-        <el-button type="primary" @click="submitHandle"> 保存 </el-button>
+        <el-button type="primary" @click="submitHandle"> 确认 </el-button>
       </span>
     </template>
   </el-dialog>
@@ -22,14 +31,13 @@ import { ref, watch } from 'vue'
 const emit = defineEmits(['updateContent'])
 
 const dialogVisible = ref<boolean>(false)
-
-const detail = ref({})
+const checkList = ref([])
 
 const paragraphFormRef = ref()
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
-    detail.value = {}
+    checkList.value = []
   }
 })
 
diff --git a/ui/src/views/document/DatasetSetting.vue b/ui/src/views/document/DatasetSetting.vue
index 909a6596c..916da45b5 100644
--- a/ui/src/views/document/DatasetSetting.vue
+++ b/ui/src/views/document/DatasetSetting.vue
@@ -18,7 +18,7 @@ import datasetApi from '@/api/dataset'
 import { MsgSuccess } from '@/utils/message'
 const route = useRoute()
 const {
-  params: { datasetId }
+  params: { id }
 } = route as any
 
 const BaseFormRef = ref()
@@ -29,7 +29,7 @@ async function submit() {
   if (await BaseFormRef.value?.validate()) {
     loading.value = true
     datasetApi
-      .putDateset(datasetId, BaseFormRef.value.form)
+      .putDateset(id, BaseFormRef.value.form)
       .then((res) => {
         MsgSuccess('保存成功')
         loading.value = false
@@ -43,7 +43,7 @@ async function submit() {
 function getDetail() {
   loading.value = true
   datasetApi
-    .getDatesetDetail(datasetId)
+    .getDatesetDetail(id)
     .then((res) => {
       detail.value = res.data
       loading.value = false
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index 301ad9a27..2dcf3cd52 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -5,7 +5,7 @@
         <div class="flex-between">
           <el-button
             type="primary"
-            @click="router.push({ path: '/dataset/upload', query: { id: datasetId } })"
+            @click="router.push({ path: '/dataset/upload', query: { id: id } })"
             >上传文档</el-button
           >
           <el-input
@@ -108,7 +108,7 @@ import { MsgSuccess, MsgConfirm } from '@/utils/message'
 const router = useRouter()
 const route = useRoute()
 const {
-  params: { datasetId }
+  params: { id }
 } = route as any
 
 const loading = ref(false)
@@ -124,7 +124,7 @@ const paginationConfig = reactive({
 })
 
 function rowClickHandle(row: any) {
-  router.push({ path: `/dataset/${datasetId}/${row.id}` })
+  router.push({ path: `/dataset/${id}/${row.id}` })
 }
 
 /*
@@ -134,7 +134,7 @@ function creatQuickHandle(val: string) {
   loading.value = true
   const obj = { name: val }
   documentApi
-    .postDocument(datasetId, obj)
+    .postDocument(id, obj)
     .then((res) => {
       getList()
       MsgSuccess('创建成功')
@@ -156,7 +156,7 @@ function deleteDocument(row: any) {
     .then(() => {
       loading.value = true
       documentApi
-        .delDocument(datasetId, row.id)
+        .delDocument(id, row.id)
         .then(() => {
           MsgSuccess('删除成功')
           getList()
@@ -174,7 +174,7 @@ function deleteDocument(row: any) {
 function updateData(documentId: string, data: any) {
   loading.value = true
   documentApi
-    .putDocument(datasetId, documentId, data)
+    .putDocument(id, documentId, data)
     .then((res) => {
       const index = documentData.value.findIndex((v) => v.id === documentId)
       documentData.value.splice(index, 1, res.data)
@@ -217,7 +217,7 @@ function handleCurrentChange(val: number) {
 function getList() {
   loading.value = true
   documentApi
-    .getDocument(datasetId as string, filterText.value)
+    .getDocument(id as string, filterText.value)
     .then((res) => {
       documentData.value = res.data
       paginationConfig.total = res.data.length
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index 0edb47187..5d3216b30 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -55,7 +55,7 @@ const { paragraph } = useStore()
 
 const route = useRoute()
 const {
-  params: { datasetId, documentId }
+  params: { id, documentId }
 } = route as any
 
 const emit = defineEmits(['refresh'])
@@ -93,7 +93,7 @@ const submitHandle = async () => {
     loading.value = true
     if (problemId.value) {
       paragraph
-        .asyncPutParagraph(datasetId, documentId, problemId.value, paragraphFormRef.value?.form)
+        .asyncPutParagraph(id, documentId, problemId.value, paragraphFormRef.value?.form)
         .then(() => {
           emit('refresh')
           loading.value = false
@@ -111,7 +111,7 @@ const submitHandle = async () => {
             }
           : paragraphFormRef.value?.form
       paragraphApi
-        .postParagraph(datasetId, documentId, obj)
+        .postParagraph(id, documentId, obj)
         .then((res) => {
           emit('refresh')
           loading.value = false
diff --git a/ui/src/views/paragraph/component/ProblemComponent.vue b/ui/src/views/paragraph/component/ProblemComponent.vue
index 2eecdc8f0..57c55ba82 100644
--- a/ui/src/views/paragraph/component/ProblemComponent.vue
+++ b/ui/src/views/paragraph/component/ProblemComponent.vue
@@ -42,7 +42,7 @@ const props = defineProps({
 
 const route = useRoute()
 const {
-  params: { datasetId, documentId }
+  params: { id, documentId }
 } = route as any
 
 const inputRef = ref()
@@ -68,7 +68,7 @@ function delProblemHandle(item: any, index: number) {
   loading.value = true
   if (item.id) {
     paragraphApi
-      .delProblem(datasetId, documentId, props.problemId || '', item.id)
+      .delProblem(id, documentId, props.problemId || '', item.id)
       .then((res) => {
         getProblemList()
       })
@@ -84,7 +84,7 @@ function delProblemHandle(item: any, index: number) {
 function getProblemList() {
   loading.value = true
   paragraphApi
-    .getProblem(datasetId, documentId, props.problemId || '')
+    .getProblem(id, documentId, props.problemId || '')
     .then((res) => {
       problemList.value = res.data
       loading.value = false
@@ -108,7 +108,7 @@ function addProblemHandle(val: string) {
     loading.value = true
     if (props.problemId) {
       paragraphApi
-        .postProblem(datasetId, documentId, props.problemId, obj)
+        .postProblem(id, documentId, props.problemId, obj)
         .then((res) => {
           getProblemList()
           problemValue.value = ''
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 6b145594a..d52b5f3fa 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -79,7 +79,7 @@ import useStore from '@/stores'
 const { paragraph } = useStore()
 const route = useRoute()
 const {
-  params: { datasetId, documentId }
+  params: { id, documentId }
 } = route as any
 
 const ParagraphDialogRef = ref()
@@ -96,7 +96,7 @@ function changeState(bool: Boolean, row: any) {
   }
   loading.value = true
   paragraph
-    .asyncPutParagraph(datasetId, documentId, row.id, obj)
+    .asyncPutParagraph(id, documentId, row.id, obj)
     .then((res) => {
       loading.value = false
     })
@@ -113,7 +113,7 @@ function deleteParagraph(row: any) {
     .then(() => {
       loading.value = true
       paragraphApi
-        .delParagraph(datasetId, documentId, row.id)
+        .delParagraph(id, documentId, row.id)
         .then(() => {
           MsgSuccess('删除成功')
           getParagraphDetail()
@@ -137,7 +137,7 @@ function editParagraph(row: any) {
 function getDetail() {
   loading.value = true
   documentApi
-    .getDocumentDetail(datasetId, documentId)
+    .getDocumentDetail(id, documentId)
     .then((res) => {
       documentDetail.value = res.data
       loading.value = false
@@ -150,7 +150,7 @@ function getDetail() {
 function getParagraphDetail() {
   loading.value = true
   paragraphApi
-    .getParagraph(datasetId, documentId)
+    .getParagraph(id, documentId)
     .then((res) => {
       paragraphDetail.value = res.data
       loading.value = false