diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
new file mode 100644
index 000000000..53ec327cd
--- /dev/null
+++ b/ui/src/api/application.ts
@@ -0,0 +1,5 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+const prefix = '/application'
+
+export default {}
diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 3b4325ece..0a3239837 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -1,8 +1,6 @@
 import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
 import type { datasetListRequest, datasetData } from '@/api/type/dataset'
-import type { Ref } from 'vue'
-import type { KeyValue } from '@/api/type/common'
 const prefix = '/dataset'
 
 /**
@@ -89,240 +87,11 @@ const putDateset: (dataset_id: string, data: any) => Promise<Result<any>> = (
   return put(`${prefix}/${dataset_id}`, data)
 }
 
-/**
- * 分段预览（上传文档）
- * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
- */
-const postSplitDocument: (data: any) => Promise<Result<any>> = (data) => {
-  return post(`${prefix}/document/split`, data)
-}
-
-/**
- * 分段标识列表
- * @param loading 加载器
- * @returns 分段标识列表
- */
-const listSplitPattern: (loading?: Ref<boolean>) => Promise<Result<Array<KeyValue<string, string>>>> = (
-  loading
-) => {
-  return get(`${prefix}/document/split_pattern`, {}, loading)
-}
-
-/**
- * 文档列表
- * @param 参数  dataset_id, name
- */
-
-const getDocument: (dataset_id: string, name?: string) => Promise<Result<any>> = (
-  dataset_id,
-  name
-) => {
-  return get(`${prefix}/${dataset_id}/document`, name && { name })
-}
-
-/**
- * 创建文档
- * @param 参数 
- * {
-  "name": "string",
-  "paragraphs": [
-    {
-      "content": "string",
-      "title": "string",
-      "problem_list": [
-          {
-            "id": "string",
-              "content": "string"
-          }
-      ]
-    }
-  ]
-}
- */
-const postDocument: (dataset_id: string, data: any) => Promise<Result<any>> = (
-  dataset_id,
-  data
-) => {
-  return post(`${prefix}/${dataset_id}/document`, data)
-}
-
-/**
- * 修改文档
- * @param 参数 
- * dataset_id, document_id, 
- * {
-      "name": "string",
-      "is_active": true
-    }
- */
-const putDocument: (dataset_id: string, document_id: string, data: any) => Promise<Result<any>> = (
-  dataset_id,
-  document_id,
-  data: any
-) => {
-  return put(`${prefix}/${dataset_id}/document/${document_id}`, data)
-}
-
-/**
- * 删除文档
- * @param 参数 dataset_id, document_id,
- */
-const delDocument: (dataset_id: string, document_id: string) => Promise<Result<boolean>> = (
-  dataset_id,
-  document_id
-) => {
-  return del(`${prefix}/${dataset_id}/document/${document_id}`)
-}
-
-/**
- * 文档详情
- * @param 参数 dataset_id
- */
-const getDocumentDetail: (dataset_id: string, document_id: string) => Promise<Result<any>> = (
-  dataset_id,
-  document_id
-) => {
-  return get(`${prefix}/${dataset_id}/document/${document_id}`)
-}
-
-/**
- * 段落列表
- * @param 参数 dataset_id
- */
-const getParagraph: (dataset_id: string, document_id: string) => Promise<Result<any>> = (
-  dataset_id,
-  document_id
-) => {
-  return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph`)
-}
-
-/**
- * 删除段落
- * @param 参数 dataset_id, document_id, paragraph_id
- */
-const delParagraph: (
-  dataset_id: string,
-  document_id: string,
-  paragraph_id: string
-) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id) => {
-  return del(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`)
-}
-
-/**
- * 创建段落
- * @param 参数 
- * dataset_id, document_id
- * {
-  "content": "string",
-  "title": "string",
-  "is_active": true,
-  "problem_list": [
-    {
-      "id": "string",
-      "content": "string"
-    }
-  ]
-    }
- */
-const postParagraph: (
-  dataset_id: string,
-  document_id: string,
-  data: any
-) => Promise<Result<any>> = (dataset_id, document_id, data: any) => {
-  return post(`${prefix}/${dataset_id}/document/${document_id}/paragraph`, data)
-}
-
-/**
- * 修改段落
- * @param 参数 
- * dataset_id, document_id, paragraph_id
- * {
-  "content": "string",
-  "title": "string",
-  "is_active": true,
-  "problem_list": [
-    {
-      "id": "string",
-      "content": "string"
-    }
-  ]
-    }
- */
-const putParagraph: (
-  dataset_id: string,
-  document_id: string,
-  paragraph_id: string,
-  data: any
-) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, data: any) => {
-  return put(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`, data)
-}
-
-/**
- * 问题列表
- * @param 参数 dataset_id，document_id，paragraph_id
- */
-const getProblem: (
-  dataset_id: string,
-  document_id: string,
-  paragraph_id: string
-) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id: string) => {
-  return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`)
-}
-
-/**
- * 创建问题
- * @param 参数 
- * dataset_id, document_id, paragraph_id
- * {
-      "id": "string",
-      content": "string"
-    }
- */
-const postProblem: (
-  dataset_id: string,
-  document_id: string,
-  paragraph_id: string,
-  data: any
-) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, data: any) => {
-  return post(
-    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`,
-    data
-  )
-}
-/**
- * 删除问题
- * @param 参数 dataset_id, document_id, paragraph_id,problem_id
- */
-const delProblem: (
-  dataset_id: string,
-  document_id: string,
-  paragraph_id: string,
-  problem_id: string
-) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id, problem_id) => {
-  return del(
-    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem/${problem_id}`
-  )
-}
-
 export default {
   getDateset,
   getAllDateset,
   delDateset,
   postDateset,
   getDatesetDetail,
-  putDateset,
-  postSplitDocument,
-  getDocument,
-  postDocument,
-  putDocument,
-  delDocument,
-  getDocumentDetail,
-  getParagraph,
-  delParagraph,
-  putParagraph,
-  postParagraph,
-  getProblem,
-  postProblem,
-  delProblem,
-  listSplitPattern
+  putDateset
 }
diff --git a/ui/src/api/document.ts b/ui/src/api/document.ts
new file mode 100644
index 000000000..f2f0afde3
--- /dev/null
+++ b/ui/src/api/document.ts
@@ -0,0 +1,113 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { Ref } from 'vue'
+import type { KeyValue } from '@/api/type/common'
+const prefix = '/dataset'
+
+/**
+ * 分段预览（上传文档）
+ * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
+ */
+const postSplitDocument: (data: any) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}/document/split`, data)
+}
+
+/**
+ * 分段标识列表
+ * @param loading 加载器
+ * @returns 分段标识列表
+ */
+const listSplitPattern: (loading?: Ref<boolean>) => Promise<Result<Array<KeyValue<string, string>>>> = (
+  loading
+) => {
+  return get(`${prefix}/document/split_pattern`, {}, loading)
+}
+
+/**
+ * 文档列表
+ * @param 参数  dataset_id, name
+ */
+
+const getDocument: (dataset_id: string, name?: string) => Promise<Result<any>> = (
+  dataset_id,
+  name
+) => {
+  return get(`${prefix}/${dataset_id}/document`, name && { name })
+}
+
+/**
+ * 创建文档
+ * @param 参数 
+ * {
+  "name": "string",
+  "paragraphs": [
+    {
+      "content": "string",
+      "title": "string",
+      "problem_list": [
+          {
+            "id": "string",
+              "content": "string"
+          }
+      ]
+    }
+  ]
+}
+ */
+const postDocument: (dataset_id: string, data: any) => Promise<Result<any>> = (
+  dataset_id,
+  data
+) => {
+  return post(`${prefix}/${dataset_id}/document`, data)
+}
+
+/**
+ * 修改文档
+ * @param 参数 
+ * dataset_id, document_id, 
+ * {
+      "name": "string",
+      "is_active": true
+    }
+ */
+const putDocument: (dataset_id: string, document_id: string, data: any) => Promise<Result<any>> = (
+  dataset_id,
+  document_id,
+  data: any
+) => {
+  return put(`${prefix}/${dataset_id}/document/${document_id}`, data)
+}
+
+/**
+ * 删除文档
+ * @param 参数 dataset_id, document_id,
+ */
+const delDocument: (dataset_id: string, document_id: string) => Promise<Result<boolean>> = (
+  dataset_id,
+  document_id
+) => {
+  return del(`${prefix}/${dataset_id}/document/${document_id}`)
+}
+
+/**
+ * 文档详情
+ * @param 参数 dataset_id
+ */
+const getDocumentDetail: (dataset_id: string, document_id: string) => Promise<Result<any>> = (
+  dataset_id,
+  document_id
+) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}`)
+}
+
+
+
+export default {
+  postSplitDocument,
+  getDocument,
+  postDocument,
+  putDocument,
+  delDocument,
+  getDocumentDetail,
+  listSplitPattern
+}
diff --git a/ui/src/api/model.ts b/ui/src/api/model.ts
new file mode 100644
index 000000000..fb3962492
--- /dev/null
+++ b/ui/src/api/model.ts
@@ -0,0 +1,17 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { modelRequest } from '@/api/type/model'
+const prefix = '/model'
+const prefix_provider = '/provider'
+
+/**
+ * 获得模型列表
+ * @params 参数 name, model_type, model_name
+ */
+const getModel: (data?: modelRequest) => Promise<Result<any>> = (data) => {
+  return get(`${prefix}`, data)
+}
+
+export default {
+  getModel
+}
diff --git a/ui/src/api/paragraph.ts b/ui/src/api/paragraph.ts
new file mode 100644
index 000000000..178ca1e34
--- /dev/null
+++ b/ui/src/api/paragraph.ts
@@ -0,0 +1,132 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+const prefix = '/dataset'
+
+/**
+ * 段落列表
+ * @param 参数 dataset_id
+ */
+const getParagraph: (dataset_id: string, document_id: string) => Promise<Result<any>> = (
+  dataset_id,
+  document_id
+) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph`)
+}
+
+/**
+ * 删除段落
+ * @param 参数 dataset_id, document_id, paragraph_id
+ */
+const delParagraph: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string
+) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id) => {
+  return del(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`)
+}
+
+/**
+ * 创建段落
+ * @param 参数 
+ * dataset_id, document_id
+ * {
+  "content": "string",
+  "title": "string",
+  "is_active": true,
+  "problem_list": [
+    {
+      "id": "string",
+      "content": "string"
+    }
+  ]
+    }
+ */
+const postParagraph: (
+  dataset_id: string,
+  document_id: string,
+  data: any
+) => Promise<Result<any>> = (dataset_id, document_id, data: any) => {
+  return post(`${prefix}/${dataset_id}/document/${document_id}/paragraph`, data)
+}
+
+/**
+ * 修改段落
+ * @param 参数 
+ * dataset_id, document_id, paragraph_id
+ * {
+  "content": "string",
+  "title": "string",
+  "is_active": true,
+  "problem_list": [
+    {
+      "id": "string",
+      "content": "string"
+    }
+  ]
+    }
+ */
+const putParagraph: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  data: any
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, data: any) => {
+  return put(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`, data)
+}
+
+/**
+ * 问题列表
+ * @param 参数 dataset_id，document_id，paragraph_id
+ */
+const getProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id: string) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`)
+}
+
+/**
+ * 创建问题
+ * @param 参数 
+ * dataset_id, document_id, paragraph_id
+ * {
+      "id": "string",
+      content": "string"
+    }
+ */
+const postProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  data: any
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, data: any) => {
+  return post(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`,
+    data
+  )
+}
+/**
+ * 删除问题
+ * @param 参数 dataset_id, document_id, paragraph_id,problem_id
+ */
+const delProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  problem_id: string
+) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id, problem_id) => {
+  return del(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem/${problem_id}`
+  )
+}
+
+export default {
+  getParagraph,
+  delParagraph,
+  putParagraph,
+  postParagraph,
+  getProblem,
+  postProblem,
+  delProblem,
+}
diff --git a/ui/src/api/team.ts b/ui/src/api/team.ts
index 03c6b18d7..9e6ef896b 100644
--- a/ui/src/api/team.ts
+++ b/ui/src/api/team.ts
@@ -1,7 +1,6 @@
 import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
 import type { TeamMember } from '@/api/type/team'
-// import type { Ref } from 'vue'
 
 const prefix = '/team/member'
 
diff --git a/ui/src/api/type/application.ts b/ui/src/api/type/application.ts
new file mode 100644
index 000000000..ff4f7b8e0
--- /dev/null
+++ b/ui/src/api/type/application.ts
@@ -0,0 +1,10 @@
+interface ApplicationFormType {
+  name: string
+  desc: string
+  model_id: string
+  multiple_rounds_dialogue: boolean
+  prologue: string
+  example: string[]
+  dataset_id_list: string[]
+}
+export type { ApplicationFormType }
diff --git a/ui/src/api/type/model.ts b/ui/src/api/type/model.ts
new file mode 100644
index 000000000..e33c4bf32
--- /dev/null
+++ b/ui/src/api/type/model.ts
@@ -0,0 +1,6 @@
+interface modelRequest {
+  name: string
+  model_type: string
+  model_name: string
+}
+export type { modelRequest }
diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index 2dbdacf64..ead74679a 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -1,65 +1,74 @@
 <template>
-  <div class="ai-dialog">
+  <div class="ai-dialog p-24">
     <el-scrollbar>
       <div class="ai-dialog__content">
-        <div class="avatar">
-          <AppAvatar class="avatar-gradient">
-            <img src="@/assets/icon_robot.svg" style="width: 54%" alt="" />
-          </AppAvatar>
-          <AppAvatar>
+        <div class="item-content mb-16">
+          <div class="avatar">
+            <AppAvatar class="avatar-gradient">
+              <img src="@/assets/icon_robot.svg" style="width: 54%" alt="" />
+            </AppAvatar>
+            <!-- <AppAvatar>
             <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-          </AppAvatar>
+          </AppAvatar> -->
+          </div>
+
+          <div class="content">
+            <el-card shadow="always" class="dialog-card">
+              <h4>您好，我是 MaxKB 智能小助手</h4>
+              <div class="mt-4" v-if="data?.prologue">
+                <el-text type="info">{{ data?.prologue }}</el-text>
+              </div>
+            </el-card>
+            <el-card shadow="always" class="dialog-card mt-12" v-if="data?.example?.length > 0">
+              <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">
+                    <el-icon><EditPen /></el-icon>
+                    {{ item }}
+                  </div>
+                </template>
+              </el-space>
+            </el-card>
+          </div>
         </div>
-
-        <div class="content ml-8">
-          <el-card shadow="always" class="dialog-card">
-            <h4>您好，我是 MaxKB 智能小助手</h4>
-            <div class="mt-4">
-              <el-text type="info">回答用户提出的 MaxKB 产品使用问题</el-text>
+        <div class="item-content mb-16">
+          <div class="avatar">
+            <AppAvatar>
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+            </AppAvatar>
+          </div>
+          <div class="content">
+            <div class="text">
+              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
             </div>
-          </el-card>
-          <el-card shadow="always" class="dialog-card mt-12">
-            <h4>您可以尝试输入以下问题：</h4>
-            <div class="mt-8">
-              <el-row :gutter="20">
-                <el-col :span="12">
-                  <el-button icon="EditPen" class="problem-button w-full">
-                    DataEase支持哪些类型的数据源？
-                  </el-button>
-                </el-col>
-                <el-col :span="12">
-                  <el-button icon="EditPen" class="problem-button w-full">
-                    DataEase支持哪些类型的数据源？
-                  </el-button>
-                </el-col>
-              </el-row>
-            </div>
-          </el-card>
-
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          </div>
+        </div>
+        <div class="item-content mb-16">
+          <div class="avatar">
+            <AppAvatar class="avatar-gradient">
+              <img src="@/assets/icon_robot.svg" style="width: 54%" alt="" />
+            </AppAvatar>
+          </div>
+          <div class="content">
+            <el-card shadow="always" class="dialog-card"> XXXXXXXXX </el-card>
+          </div>
         </div>
       </div>
     </el-scrollbar>
-    <div class="ai-dialog__textarea flex">
-      <el-input
-        v-model="inputValue"
-        type="textarea"
-        placeholder="请输入"
-        :autosize="{ minRows: 1, maxRows: 8 }"
-      />
-      <div class="operate">
-        <el-button text class="sent-button" disabled>
-          <AppIcon iconName="app-send"></AppIcon>
-        </el-button>
+    <div class="ai-dialog__operate p-24">
+      <div class="operate-textarea flex">
+        <el-input
+          v-model="inputValue"
+          type="textarea"
+          placeholder="请输入"
+          :autosize="{ minRows: 1, maxRows: 8 }"
+        />
+        <div class="operate">
+          <el-button text class="sent-button" disabled>
+            <AppIcon iconName="app-send"></AppIcon>
+          </el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -68,35 +77,47 @@
 import { ref } from 'vue'
 const props = defineProps({
   data: {
-    type: Array<any>,
-    default: () => []
+    type: Object,
+    default: () => {}
   }
 })
 const inputValue = ref('')
 </script>
 <style lang="scss" scoped>
 .ai-dialog {
-  min-height: 400px;
+  --padding-left: 40px;
   height: 100%;
-  padding-bottom: 20px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  position: relative;
+  padding-right: 20px;
+  padding-top: 0;
   &__content {
-    flex: 1;
-
+    width: 99%;
+    padding-bottom: 96px;
     .avatar {
       float: left;
     }
     .content {
-      padding-left: 50px;
+      padding-left: var(--padding-left);
+    }
+    .text {
+      word-break: break-all;
+      padding: 6px 0;
     }
     .problem-button {
+      width: 100%;
       border: none;
       border-radius: 8px;
       background: var(--app-layout-bg-color);
       height: 46px;
-      justify-content: left;
+      padding: 0 12px;
+      line-height: 46px;
+      box-sizing: border-box;
+      color: var(--el-text-color-regular);
+      -webkit-line-clamp: 1;
+      word-break: break-all;
       &:hover {
         background: var(--el-color-primary-light-9);
       }
@@ -105,34 +126,53 @@ const inputValue = ref('')
       }
     }
   }
-  .dialog-card {
-    border: none;
-  }
-  &__textarea {
-    box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
-    background-color: #ffffff;
-    border-radius: 8px;
-    border: 1px solid #ffffff;
+  &__operate {
+    background: #f3f7f9;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
     box-sizing: border-box;
-
-    &:has(.el-textarea__inner:focus) {
-      border: 1px solid var(--el-color-primary);
+    z-index: 10;
+    padding-top: 16px;
+    &:before {
+      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
+      content: '';
+      position: absolute;
+      width: 100%;
+      top: -16px;
+      left: 0;
+      height: 16px;
     }
+    .operate-textarea {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
 
-    :deep(.el-textarea__inner) {
-      border-radius: 8px !important;
-      box-shadow: none;
-      resize: none;
-      padding: 12px 16px;
-    }
-    .operate {
-      padding: 10px 12px;
-      .sent-button {
-        .el-icon {
-          font-size: 24px;
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      :deep(.el-textarea__inner) {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 12px 16px;
+      }
+      .operate {
+        padding: 10px 12px;
+        .sent-button {
+          .el-icon {
+            font-size: 24px;
+          }
         }
       }
     }
   }
+  .dialog-card {
+    border: none;
+  }
 }
 </style>
diff --git a/ui/src/components/back-button/index.vue b/ui/src/components/back-button/index.vue
index 9f52e8475..f5640ad67 100644
--- a/ui/src/components/back-button/index.vue
+++ b/ui/src/components/back-button/index.vue
@@ -12,7 +12,8 @@ const props = defineProps({
   to: String
 })
 
-const back: any = router.options.history.state.back // 上一层路由
+/* 上一层路由 */
+const back: any = router.options.history.state.back
 function jump() {
   if (props.to === '-1') {
     back ? router.push(back) : router.go(-1)
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index aed8ea2ad..0663b2cae 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -6,7 +6,7 @@
           <AppAvatar class="mr-12" shape="square" :size="32" v-if="showIcon">
             <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
           </AppAvatar>
-          <h4>{{ title }}</h4>
+          <h4 class="ellipsis-1">{{ title }}</h4>
         </div>
       </slot>
     </div>
diff --git a/ui/src/components/common-list/index.vue b/ui/src/components/common-list/index.vue
index a214a027a..01c4f7412 100644
--- a/ui/src/components/common-list/index.vue
+++ b/ui/src/components/common-list/index.vue
@@ -36,7 +36,7 @@ function clickHandle(row: any, index: number) {
 }
 </script>
 <style lang="scss" scoped>
-// 通用 ui li样式
+/* 通用 ui li样式 */
 .common-list {
   li {
     padding: 11px 16px;
diff --git a/ui/src/components/tag-ellipsis/index.vue b/ui/src/components/tag-ellipsis/index.vue
index 09ec24de7..72cdedaee 100644
--- a/ui/src/components/tag-ellipsis/index.vue
+++ b/ui/src/components/tag-ellipsis/index.vue
@@ -22,16 +22,16 @@ const isShowTooltip = computed(() => {
   const containerWeight = tagLabel.value?.scrollWidth
   const contentWeight = tagLabel.value?.clientWidth
   if (containerWeight > contentWeight) {
-    // 实际宽度 > 可视宽度
+    /* 实际宽度 > 可视宽度 */
     return true
   } else {
-    // 否则为不溢出
+    /* 否则为不溢出 */
     return false
   }
 })
 </script>
 <style lang="scss" scoped>
-// tag超出省略号
+/* tag超出省略号 */
 .tag-ellipsis {
   border: 1px solid var(--el-border-color);
   color: var(--app-text-color);
diff --git a/ui/src/components/tags-input/index.vue b/ui/src/components/tags-input/index.vue
index 04928805f..dd719bca3 100644
--- a/ui/src/components/tags-input/index.vue
+++ b/ui/src/components/tags-input/index.vue
@@ -26,12 +26,12 @@ import { ref, watch } from 'vue'
 defineOptions({ name: 'TagsInput' })
 const props = defineProps({
   tags: {
-    // 多个
+    /* 多个 */
     type: Array<String>,
     default: () => []
   },
   tag: {
-    // 单个
+    /* 单个 */
     type: String,
     default: ''
   },
@@ -40,7 +40,7 @@ const props = defineProps({
     default: '请输入'
   },
   limit: {
-    // 最多生成标签数
+    /* 最多生成标签数 */
     type: Number,
     default: -1
   },
diff --git a/ui/src/layout/app-layout/index.vue b/ui/src/layout/app-layout/index.vue
index 1d93815ef..98c3f8019 100644
--- a/ui/src/layout/app-layout/index.vue
+++ b/ui/src/layout/app-layout/index.vue
@@ -15,14 +15,22 @@ import { TopBar, AppMain } from '../components'
 <style lang="scss" scoped>
 .app-layout {
   background-color: var(--app-layout-bg-color);
+  height: 100%;
 }
 
 .app-main {
-  height: calc(100vh - var(--app-header-height));
-  padding: 0 !important;
+  position: relative;
+  height: 100%;
+  padding: var(--app-header-height) 0 0 !important;
   box-sizing: border-box;
+  overflow: auto;
 }
 .app-header {
   background: var(--app-header-bg-color);
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 100;
 }
 </style>
diff --git a/ui/src/request/index.ts b/ui/src/request/index.ts
index d195c3e85..540a4dfe7 100644
--- a/ui/src/request/index.ts
+++ b/ui/src/request/index.ts
@@ -17,7 +17,7 @@ const axiosConfig = {
 
 const instance = axios.create(axiosConfig)
 
-// 设置请求拦截器
+/* 设置请求拦截器 */
 instance.interceptors.request.use(
   (config: AxiosRequestConfig) => {
     if (config.headers === undefined) {
diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
index 0c33fe59f..bec30d953 100644
--- a/ui/src/stores/index.ts
+++ b/ui/src/stores/index.ts
@@ -4,11 +4,13 @@ export { store }
 import useUserStore from './modules/user'
 import useDatasetStore from './modules/dataset'
 import useParagraphStore from './modules/paragraph'
+import useModelStore from './modules/model'
 
 const useStore = () => ({
   user: useUserStore(),
   dataset: useDatasetStore(),
   paragraph:  useParagraphStore(),
+  model:  useModelStore(),
 })
 
 export default useStore
diff --git a/ui/src/stores/modules/model.ts b/ui/src/stores/modules/model.ts
new file mode 100644
index 000000000..7847d6de7
--- /dev/null
+++ b/ui/src/stores/modules/model.ts
@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import modelApi from '@/api/model'
+import type { modelRequest } from '@/api/type/model'
+const useModelStore = defineStore({
+  id: 'model',
+  state: () => ({}),
+  actions: {
+    async asyncGetModel(data?: modelRequest) {
+      return new Promise((resolve, reject) => {
+        modelApi
+          .getModel(data)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useModelStore
diff --git a/ui/src/stores/modules/paragraph.ts b/ui/src/stores/modules/paragraph.ts
index fddcac931..2bd8e8245 100644
--- a/ui/src/stores/modules/paragraph.ts
+++ b/ui/src/stores/modules/paragraph.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import datasetApi from '@/api/dataset'
+import paragraphApi from '@/api/paragraph'
 
 const useParagraphStore = defineStore({
   id: 'paragraph',
@@ -7,7 +7,7 @@ const useParagraphStore = defineStore({
   actions: {
     async asyncPutParagraph(datasetId: string, documentId: string, paragraphId: string, data: any) {
       return new Promise((resolve, reject) => {
-        datasetApi
+        paragraphApi
           .putParagraph(datasetId, documentId, paragraphId, data)
           .then((data) => {
             resolve(data)
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 3f4ce3c54..27bb8856c 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -52,18 +52,18 @@ ul {
   padding: 0;
 }
 
-// 滚动条整体部分
+/* 滚动条整体部分 */
 ::-webkit-scrollbar {
   width: 6px; // 纵向滚动条宽度
   height: 6px; // 横向滚动条高度
 }
 
-// 滑块
+/* 滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 5px;
 }
 
-// 轨道
+/* 轨道 */
 ::-webkit-scrollbar-track {
   border-radius: 5px;
   background-color: transparent;
@@ -208,21 +208,39 @@ h4 {
   cursor: pointer;
 }
 
-.ellipsis {
+/*
+  超出省略号
+*/
+
+.ellipsis-1 {
   display: inline-block;
-  max-width: 100px;
+  max-width: 130px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
-// 内容部分 自适应高度
+/*
+  双行超出省略号，其他行数自定义 -webkit-line-clamp
+*/
+.ellipsis-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+/*
+  内容部分 自适应高度
+*/
 .main-calc-height {
   height: var(--app-main-height);
   box-sizing: border-box;
 }
 
-// 标题前带竖线样式
+/*
+  标题前带竖线样式
+*/
 .title-decoration-1 {
   position: relative;
   padding-left: 12px;
@@ -248,24 +266,30 @@ h4 {
   font-weight: 900;
 }
 
-// tag
+/* tag */
 .default-tag {
   background: var(--tag-deflaut-bg);
   color: var(--tag-deflaut-color);
 }
 
-// card 无边框无阴影
+/*
+  card 无边框无阴影 灰色背景
+*/
 .card-never {
   background: var(--app-layout-bg-color);
   border: none;
 }
 
-// 图标旋转90度
+/*
+   图标旋转90度
+*/
 .rotate-90 {
   transform: rotateZ(90deg);
 }
 
-// 表格第一行插入自定义行
+/*
+  表格第一行插入自定义行
+*/
 .table-quick-append {
   background: #ffffff;
   .el-table__append-wrapper {
@@ -291,7 +315,9 @@ h4 {
   }
 }
 
-// 头像渐变背景
+/*
+  头像渐变背景
+*/
 .avatar-gradient {
   background: var(--app-avatar-gradient-color);
 }
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 08aea7672..a554b543a 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -129,7 +129,7 @@
   width: 100px;
 }
 
-// el-steps
+/* el-steps */
 .el-step__icon {
   background: none;
 }
@@ -172,12 +172,10 @@
 }
 
 .input-with-select {
-  .el-input__wrapper {
-    // border: 1px solid var(--el-border-color);
-    // box-shadow: none!important;
-  }
-
   .el-input-group__prepend {
     background-color: var(--el-fill-color-blank);
   }
 }
+.el-textarea__inner {
+  font-size: 13px;
+}
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index fc309228d..3fd8815a9 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -14,9 +14,9 @@
   --app-header-padding: 0 20px;
   --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
   --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 100%);
-  --app-avatar-gradient-color: linear-gradient(270deg, #9258F7 0%, #3370FF 100%);
+  --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370ff 100%);
 
-  // 计算高度
+  /* 计算高度 */
   --app-main-height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
 
   /** sidebar 组件 */
@@ -34,7 +34,8 @@
   --setting-left-width: 280px;
 
   /** dataset */
-  --create-dataset-height: calc(
-    100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 70px
-  );
+  --create-dataset-height: calc(var(--app-main-height) - 70px);
+
+  /** ai-dialog */
+  --dialog-bg-gradient-color: linear-gradient(188deg, rgba(235, 241, 255, 0.20) 39.6%, rgba(231, 249, 255, 0.20) 94.3%), #EFF0F1;
 }
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts
index 792158798..ede5b148d 100644
--- a/ui/src/utils/utils.ts
+++ b/ui/src/utils/utils.ts
@@ -9,7 +9,8 @@ export function numberFormat(num: number) {
 
 export function filesize(size: number) {
   if (!size) return ''
-  const num = 1024.0 //byte
+  /* byte */
+  const num = 1024.0
 
   if (size < num) return size + 'B'
   if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + 'K' //kb
@@ -18,13 +19,17 @@ export function filesize(size: number) {
   return (size / Math.pow(num, 4)).toFixed(2) + 'T' //T
 }
 
-// 获取文件后缀
+/*
+  获取文件后缀
+*/
 export function fileType(name: string) {
   const suffix = name.split('.')
   return suffix[suffix.length - 1]
 }
 
-// 获得文件对应图片
+/*
+  获得文件对应图片
+*/
 export function getImgUrl(name: string) {
   const type = fileType(name) || 'txt'
   return `/src/assets/${type}-icon.svg`
diff --git a/ui/src/views/application/CreateApplication.vue b/ui/src/views/application/CreateApplication.vue
index 9ef7e8052..b5ca4942b 100644
--- a/ui/src/views/application/CreateApplication.vue
+++ b/ui/src/views/application/CreateApplication.vue
@@ -1,15 +1,190 @@
 <template>
-  <LayoutContainer header="创建应用" back-to="-1">
+  <LayoutContainer header="创建应用" back-to="-1" class="create-application">
     <el-row>
-      <el-col :span="10" class="p-24"> </el-col>
+      <el-col :span="10">
+        <div class="p-24 mb-16" style="padding-bottom: 0">
+          <h4 class="title-decoration-1">应用信息</h4>
+        </div>
+        <div class="scrollbar-height-left">
+          <el-scrollbar>
+            <el-form
+              ref="applicationFormRef"
+              :model="applicationForm"
+              :rules="rules"
+              label-position="top"
+              require-asterisk-position="right"
+              class="p-24"
+              style="padding-top: 0"
+            >
+              <el-form-item label="应用名称" prop="name">
+                <el-input
+                  v-model="applicationForm.name"
+                  maxlength="64"
+                  placeholder="请输入应用名称"
+                  show-word-limit
+                />
+              </el-form-item>
+              <el-form-item label="应用描述">
+                <el-input
+                  v-model="applicationForm.desc"
+                  type="textarea"
+                  placeholder="描述该应用的应用场景及用途，如：MaxKB 小助手回答用户提出的 MaxKB 产品使用问题"
+                  :rows="3"
+                  maxlength="500"
+                  show-word-limit
+                />
+              </el-form-item>
+              <el-form-item label="选择模型" prop="model_id">
+                <el-select
+                  v-model="applicationForm.model_id"
+                  placeholder="请选择模型"
+                  style="width: 100%"
+                >
+                  <el-option label="Zone one" value="shanghai" />
+                  <el-option label="Zone two" value="beijing" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="多轮对话">
+                <el-switch v-model="applicationForm.multiple_rounds_dialogue" />
+              </el-form-item>
+              <el-form-item label="关联数据集">
+                <template #label>
+                  <div class="flex-between">
+                    <span>关联数据集</span>
+                    <el-button type="primary" link>
+                      <el-icon class="mr-4"><Plus /></el-icon> 添加
+                    </el-button>
+                  </div>
+                </template>
+                <div>
+                  <el-text type="info">关联的数据集展示在这里</el-text>
+                </div>
+                <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">
+                        <div class="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>
+                            <div class="ellipsis-1">DataEase 数据集</div>
+                          </div>
+                          <el-button text>
+                            <el-icon><Close /></el-icon>
+                          </el-button>
+                        </div>
+                      </el-card>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-form-item>
+              <el-form-item label="开场白">
+                <el-input
+                  v-model="applicationForm.prologue"
+                  type="textarea"
+                  placeholder="开始对话的欢迎语。您可以这样写：您好，我是 MaxKB 智能小助手，您可以向我提出 MaxKB 产品使用中遇到的任何问题。"
+                  :rows="3"
+                />
+              </el-form-item>
+              <el-form-item label="示例">
+                <template v-for="(item, index) in exampleList" :key="index">
+                  <el-input
+                    v-model="exampleList[index]"
+                    :placeholder="`用户提问 示例${index + 1}`"
+                    class="mb-8"
+                  />
+                </template>
+              </el-form-item>
+            </el-form>
+          </el-scrollbar>
+        </div>
+        <div class="text-right border-t p-16">
+          <el-button> 取消 </el-button>
+          <el-button type="primary" :disabled="loading"> 创建 </el-button>
+        </div>
+      </el-col>
       <el-col :span="14" class="p-24 border-l">
-        <h4 class="title-decoration-1 mb-8">调试预览</h4>
-        <AiDialog></AiDialog>
+        <h4 class="title-decoration-1 mb-16">调试预览</h4>
+        <div class="dialog-bg">
+          <h4 class="p-24">{{ applicationForm?.name || '应用名称' }}</h4>
+          <div class="scrollbar-height">
+            <AiDialog :data="applicationForm"></AiDialog>
+          </div>
+        </div>
       </el-col>
     </el-row>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
 import AiDialog from '@/components/ai-dialog/index.vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ApplicationFormType } from '@/api/type/application'
+import useStore from '@/stores'
+const { model } = useStore()
+
+const applicationFormRef = ref<FormInstance>()
+
+const loading = ref(false)
+const exampleList = ref(['', ''])
+const applicationForm = reactive<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  multiple_rounds_dialogue: false,
+  prologue: '',
+  example: [],
+  dataset_id_list: []
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
+  model_id: [
+    {
+      required: true,
+      message: '请选择模型',
+      trigger: 'change'
+    }
+  ]
+})
+
+watch(exampleList.value, () => {
+  applicationForm.example = exampleList.value.filter((v) => v)
+})
+
+function getModel() {
+  loading.value = true
+  model.asyncGetModel()
+    .then((res) => {
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+onMounted(() => {
+  getModel()
+})
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.create-application {
+  .relate-dataset-card {
+    color: var(--app-text-color);
+    border-radius: 4px;
+  }
+  .dialog-bg {
+    border-radius: 8px;
+    background: var(--dialog-bg-gradient-color);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .scrollbar-height-left {
+    height: calc(var(--app-main-height) - 100px);
+  }
+  .scrollbar-height {
+    height: calc(var(--app-main-height) - 150px);
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index d502287ff..ce84dad4b 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -67,6 +67,7 @@ import StepFirst from './step/StepFirst.vue'
 import StepSecond from './step/StepSecond.vue'
 import datasetApi from '@/api/dataset'
 import type { datasetData } from '@/api/type/dataset'
+import documentApi from '@/api/document'
 import { MsgSuccess } from '@/utils/message'
 import { toThousands } from '@/utils/utils'
 import useStore from '@/stores'
@@ -123,7 +124,7 @@ function submit() {
   })
   const obj = { ...baseInfo.value, documents } as datasetData
   if (id) {
-    datasetApi
+    documentApi
       .postDocument(id, documents)
       .then((res) => {
         MsgSuccess('提交成功')
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index 91bbf94d0..bc1a320dd 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -1,6 +1,12 @@
 <template>
   <h4 class="title-decoration-1 mb-16">基本信息</h4>
-  <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+  >
     <el-form-item label="数据集名称" prop="name">
       <el-input
         v-model.trim="form.name"
@@ -55,12 +61,13 @@ watch(
     }
   },
   {
-    // 初始化立即执行
     immediate: true
   }
 )
 
-// 表单校验
+/*
+  表单校验
+*/
 function validate() {
   if (!FormRef.value) return
   return FormRef.value.validate((valid: any) => {
diff --git a/ui/src/views/dataset/component/ParagraphPreview.vue b/ui/src/views/dataset/component/ParagraphPreview.vue
index a60c40303..457bbc031 100644
--- a/ui/src/views/dataset/component/ParagraphPreview.vue
+++ b/ui/src/views/dataset/component/ParagraphPreview.vue
@@ -73,7 +73,6 @@ watch(
     newData.value = value
   },
   {
-    // 初始化立即执行
     immediate: true
   }
 )
@@ -135,6 +134,6 @@ onMounted(() => {})
   }
 }
 .paragraph-list {
-  height: calc(var(--create-dataset-height) - 125px);
+  height: calc(var(--create-dataset-height) - 95px);
 }
 </style>
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index 9b2e844a4..7899e1223 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -1,6 +1,12 @@
 <template>
   <h4 class="title-decoration-1 mb-8">上传文档</h4>
-  <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+  >
     <el-form-item prop="fileList">
       <el-upload
         class="w-full"
@@ -80,7 +86,9 @@ function deleteFlie(index: number) {
   form.value.fileList.splice(index, 1)
 }
 
-// 表单校验
+/*
+  表单校验
+*/
 function validate() {
   if (!FormRef.value) return
   return FormRef.value.validate((valid: any) => {
diff --git a/ui/src/views/dataset/step/StepFirst.vue b/ui/src/views/dataset/step/StepFirst.vue
index 8ad011f1f..c995a48ad 100644
--- a/ui/src/views/dataset/step/StepFirst.vue
+++ b/ui/src/views/dataset/step/StepFirst.vue
@@ -25,11 +25,12 @@ const isCreate = type === 'create'
 const BaseFormRef = ref()
 const UploadComponentRef = ref()
 
-// submit
 const onSubmit = async () => {
   if (isCreate) {
     if ((await BaseFormRef.value?.validate()) && (await UploadComponentRef.value.validate())) {
-      // stores保存数据
+      /*
+        stores保存数据
+      */
       dataset.saveBaseInfo(BaseFormRef.value.form)
       dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
       return true
@@ -38,7 +39,9 @@ const onSubmit = async () => {
     }
   } else {
     if (await UploadComponentRef.value.validate()) {
-      // stores保存数据
+      /*
+        stores保存数据
+      */
       dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
       return true
     } else {
diff --git a/ui/src/views/dataset/step/StepSecond.vue b/ui/src/views/dataset/step/StepSecond.vue
index b9e9b1f8d..fc6161b93 100644
--- a/ui/src/views/dataset/step/StepSecond.vue
+++ b/ui/src/views/dataset/step/StepSecond.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="set-rules">
-    <el-row class="set-rules-height">
+    <el-row>
       <el-col :span="10" class="p-24">
         <h4 class="title-decoration-1 mb-8">设置分段规则</h4>
-        <div>
+        <div class="set-rules__right">
           <el-scrollbar>
             <div class="left-height">
               <el-radio-group v-model="radio" class="set-rules__radio">
@@ -89,7 +89,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, reactive, watch } from 'vue'
 import ParagraphPreview from '@/views/dataset/component/ParagraphPreview.vue'
-import DatasetApi from '@/api/dataset'
+import documentApi from '@/api/document'
 import useStore from '@/stores'
 import type { KeyValue } from '@/api/type/common'
 const { dataset } = useStore()
@@ -102,15 +102,14 @@ const paragraphList = ref<any[]>([])
 const patternLoading = ref<boolean>(false)
 
 const form = reactive<{
-  patterns: Array<string>,
-  limit: number,
-  with_filter: boolean,
+  patterns: Array<string>
+  limit: number
+  with_filter: boolean
   [propName: string]: any
 }>({
   patterns: [],
   limit: 0,
-  with_filter: false,
-
+  with_filter: false
 })
 
 function splitDocument() {
@@ -124,13 +123,13 @@ function splitDocument() {
   if (radio.value === '2') {
     Object.keys(form).forEach((key) => {
       if (key == 'patterns') {
-        form.patterns.forEach(item => fd.append('patterns', item))
+        form.patterns.forEach((item) => fd.append('patterns', item))
       } else {
         fd.append(key, form[key])
       }
     })
   }
-  DatasetApi.postSplitDocument(fd)
+  documentApi.postSplitDocument(fd)
     .then((res: any) => {
       paragraphList.value = res.data
       loading.value = false
@@ -141,7 +140,7 @@ function splitDocument() {
 }
 
 const initSplitPatternList = () => {
-  DatasetApi.listSplitPattern(patternLoading).then((ok) => {
+  documentApi.listSplitPattern(patternLoading).then((ok) => {
     splitPatternList.value = ok.data
   })
 }
@@ -164,12 +163,8 @@ defineExpose({
 .set-rules {
   width: 100%;
 
-  .set-rules-height {
-    height: var(--create-dataset-height);
-  }
-
   .left-height {
-    max-height: calc(var(--create-dataset-height) - 105px);
+    max-height: calc(var(--create-dataset-height) - 70px);
     overflow-x: hidden;
   }
 
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index 7afa6ff13..301ad9a27 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -101,7 +101,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import datasetApi from '@/api/dataset'
+import documentApi from '@/api/document'
 import { toThousands } from '@/utils/utils'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
@@ -127,11 +127,13 @@ function rowClickHandle(row: any) {
   router.push({ path: `/dataset/${datasetId}/${row.id}` })
 }
 
-// 快速创建空白文档
+/*
+  快速创建空白文档
+*/
 function creatQuickHandle(val: string) {
   loading.value = true
   const obj = { name: val }
-  datasetApi
+  documentApi
     .postDocument(datasetId, obj)
     .then((res) => {
       getList()
@@ -153,7 +155,7 @@ function deleteDocument(row: any) {
   )
     .then(() => {
       loading.value = true
-      datasetApi
+      documentApi
         .delDocument(datasetId, row.id)
         .then(() => {
           MsgSuccess('删除成功')
@@ -166,10 +168,12 @@ function deleteDocument(row: any) {
     .catch(() => {})
 }
 
-// 更新名称或状态
+/*
+  更新名称或状态
+*/
 function updateData(documentId: string, data: any) {
   loading.value = true
-  datasetApi
+  documentApi
     .putDocument(datasetId, documentId, data)
     .then((res) => {
       const index = documentData.value.findIndex((v) => v.id === documentId)
@@ -212,7 +216,7 @@ function handleCurrentChange(val: number) {
 
 function getList() {
   loading.value = true
-  datasetApi
+  documentApi
     .getDocument(datasetId as string, filterText.value)
     .then((res) => {
       documentData.value = res.data
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index 9c1c5c6b2..0edb47187 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -44,7 +44,7 @@ import { ref, watch, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
 import ProblemComponent from '@/views/paragraph/component/ProblemComponent.vue'
-import datasetApi from '@/api/dataset'
+import paragraphApi from '@/api/paragraph'
 import useStore from '@/stores'
 
 const props = defineProps({
@@ -110,7 +110,7 @@ const submitHandle = async () => {
               ...paragraphFormRef.value?.form
             }
           : paragraphFormRef.value?.form
-      datasetApi
+      paragraphApi
         .postParagraph(datasetId, documentId, obj)
         .then((res) => {
           emit('refresh')
diff --git a/ui/src/views/paragraph/component/ParagraphForm.vue b/ui/src/views/paragraph/component/ParagraphForm.vue
index 6b3b96fd5..31128e1a3 100644
--- a/ui/src/views/paragraph/component/ParagraphForm.vue
+++ b/ui/src/views/paragraph/component/ParagraphForm.vue
@@ -1,5 +1,12 @@
 <template>
-  <el-form ref="paragraphFormRef" :model="form" label-position="top" :rules="rules" @submit.prevent>
+  <el-form
+    ref="paragraphFormRef"
+    :model="form"
+    label-position="top"
+    require-asterisk-position="right"
+    :rules="rules"
+    @submit.prevent
+  >
     <el-form-item label="分段标题">
       <el-input v-if="isEdit" v-model="form.title" placeholder="请输入分段标题"> </el-input>
       <span v-else>{{ form.title }}</span>
@@ -51,12 +58,13 @@ watch(
     }
   },
   {
-    // 初始化立即执行
     immediate: true
   }
 )
 
-// 表单校验
+/*
+  表单校验
+*/
 function validate() {
   if (!paragraphFormRef.value) return
   return paragraphFormRef.value.validate((valid: any) => {
diff --git a/ui/src/views/paragraph/component/ProblemComponent.vue b/ui/src/views/paragraph/component/ProblemComponent.vue
index 76ec50262..2eecdc8f0 100644
--- a/ui/src/views/paragraph/component/ProblemComponent.vue
+++ b/ui/src/views/paragraph/component/ProblemComponent.vue
@@ -34,7 +34,7 @@
 <script setup lang="ts">
 import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import datasetApi from '@/api/dataset'
+import paragraphApi from '@/api/paragraph'
 
 const props = defineProps({
   problemId: String
@@ -60,7 +60,6 @@ watch(
     }
   },
   {
-    // 初始化立即执行
     immediate: true
   }
 )
@@ -68,7 +67,7 @@ watch(
 function delProblemHandle(item: any, index: number) {
   loading.value = true
   if (item.id) {
-    datasetApi
+    paragraphApi
       .delProblem(datasetId, documentId, props.problemId || '', item.id)
       .then((res) => {
         getProblemList()
@@ -84,7 +83,7 @@ function delProblemHandle(item: any, index: number) {
 
 function getProblemList() {
   loading.value = true
-  datasetApi
+  paragraphApi
     .getProblem(datasetId, documentId, props.problemId || '')
     .then((res) => {
       problemList.value = res.data
@@ -108,7 +107,7 @@ function addProblemHandle(val: string) {
     }
     loading.value = true
     if (props.problemId) {
-      datasetApi
+      paragraphApi
         .postProblem(datasetId, documentId, props.problemId, obj)
         .then((res) => {
           getProblemList()
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 699970e3c..6b145594a 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -44,7 +44,7 @@
                 :showIcon="false"
                 @click="editParagraph(item)"
               >
-                <div class="active-button">
+                <div class="active-button" @click.stop>
                   <el-switch v-model="item.is_active" @change="changeState($event, item)" />
                 </div>
 
@@ -70,7 +70,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import datasetApi from '@/api/dataset'
+import documentApi from '@/api/document'
+import paragraphApi from '@/api/paragraph'
 import ParagraphDialog from './component/ParagraphDialog.vue'
 import { numberFormat } from '@/utils/utils'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
@@ -111,7 +112,7 @@ function deleteParagraph(row: any) {
   })
     .then(() => {
       loading.value = true
-      datasetApi
+      paragraphApi
         .delParagraph(datasetId, documentId, row.id)
         .then(() => {
           MsgSuccess('删除成功')
@@ -135,7 +136,7 @@ function editParagraph(row: any) {
 
 function getDetail() {
   loading.value = true
-  datasetApi
+  documentApi
     .getDocumentDetail(datasetId, documentId)
     .then((res) => {
       documentDetail.value = res.data
@@ -148,7 +149,7 @@ function getDetail() {
 
 function getParagraphDetail() {
   loading.value = true
-  datasetApi
+  paragraphApi
     .getParagraph(datasetId, documentId)
     .then((res) => {
       paragraphDetail.value = res.data
diff --git a/ui/src/views/setting/component/CreateMemberDialog.vue b/ui/src/views/setting/component/CreateMemberDialog.vue
index 539508cdc..1250dfe56 100644
--- a/ui/src/views/setting/component/CreateMemberDialog.vue
+++ b/ui/src/views/setting/component/CreateMemberDialog.vue
@@ -16,6 +16,7 @@
       :model="memberForm"
       label-position="top"
       :rules="rules"
+      require-asterisk-position="right"
       @submit.prevent
     >
       <el-form-item label="用户名/邮箱" prop="users">