From 219c5214378b63bb0379aed2b2121b95360b662b Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 27 Oct 2023 17:49:06 +0800
Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/back-button/index.vue       | 25 ++++++++
 .../content-container/LayoutContent.vue       | 14 +++--
 ui/src/components/index.ts                    |  3 +-
 ui/src/styles/app.scss                        | 22 +++++++
 ui/src/styles/element-plus.scss               |  5 +-
 ui/src/views/dataset/CreateDataset.vue        | 56 ++++++++++++++---
 ui/src/views/dataset/component/BaseForm.vue   | 52 ++++++++++++++++
 .../dataset/component/UploadDocument.vue      | 60 +++++++++++++++++++
 ui/src/views/dataset/index.vue                | 27 +++++----
 9 files changed, 237 insertions(+), 27 deletions(-)
 create mode 100644 ui/src/components/back-button/index.vue
 create mode 100644 ui/src/views/dataset/component/BaseForm.vue
 create mode 100644 ui/src/views/dataset/component/UploadDocument.vue

diff --git a/ui/src/components/back-button/index.vue b/ui/src/components/back-button/index.vue
new file mode 100644
index 000000000..abaf1651d
--- /dev/null
+++ b/ui/src/components/back-button/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-icon class="back-button cursor mr-10 vertical-middle" @click="jump">
+    <Back />
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+import { useRouter, type RouteLocationRaw } from 'vue-router'
+defineOptions({ name: 'BackButton' })
+const router = useRouter()
+const props = defineProps({
+  to: String
+})
+
+const back: any = router.options.history.state.back // 上一层路由
+function jump() {
+  if (props.to === '-1') {
+    back ? router.push(back) : router.go(-1)
+  } else {
+    router.push(props.to as RouteLocationRaw)
+  }
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/ui/src/components/content-container/LayoutContent.vue b/ui/src/components/content-container/LayoutContent.vue
index 20db34851..c99e9064d 100644
--- a/ui/src/components/content-container/LayoutContent.vue
+++ b/ui/src/components/content-container/LayoutContent.vue
@@ -2,7 +2,8 @@
   <div class="content-container">
     <div class="content-container__header mb-10" v-if="slots.header || header">
       <slot name="header">
-        <span>{{ header }}</span>
+        <back-button :to="backTo" v-if="showBack"></back-button>
+        <span class="vertical-middle">{{ header }}</span>
       </slot>
     </div>
     <el-scrollbar>
@@ -14,11 +15,16 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 defineOptions({ name: 'LayoutContent' })
 const slots = useSlots()
-defineProps({
-  header: String
+const props = defineProps({
+  header: String,
+  backTo: String
+})
+const showBack = computed(() => {
+  const { backTo } = props
+  return backTo
 })
 </script>
 
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 247f74e51..370f1a95a 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -7,7 +7,7 @@ import LayoutContent from './content-container/LayoutContent.vue'
 import TagsInput from './tags-input/index.vue'
 import CardBox from './card-box/index.vue'
 import CardAdd from './card-add/index.vue'
-
+import BackButton from './back-button/index.vue'
 
 
 export default {
@@ -20,5 +20,6 @@ export default {
     app.component(TagsInput.name, TagsInput)
     app.component(CardBox.name, CardBox)
     app.component(CardAdd.name, CardAdd)
+    app.component(BackButton.name, BackButton)
   }
 }
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 5437b05b9..c4488ac9e 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -144,6 +144,10 @@ h4 {
   text-align: right;
 }
 
+.vertical-middle {
+  vertical-align: middle;
+}
+
 .border-b {
   border-bottom: 1px solid var(--el-border-color);
 }
@@ -173,4 +177,22 @@ h4 {
 // 内容部分 自适应高度
 .main-calc-height {
   height: calc(100vh - 125px);
+  box-sizing: border-box;
+}
+
+// 标题前带竖线样式
+.title-decoration-1 {
+  position: relative;
+  padding-left: 15px;
+  &:before {
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 4px;
+    height: 90%;
+    content: '';
+    background: var(--el-color-primary);
+    border-radius: 10px;
+  }
 }
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index c98ca44b5..b6efe3b86 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -2,6 +2,10 @@
   --el-menu-item-height: 45px;
   --el-text-color-primary: '#1F2329';
 }
+
+.el-button {
+  padding: 5px 12px;
+}
 .el-avatar {
   --el-avatar-bg-color: var(--el-color-primary);
   --el-avatar-size-small: 33px;
@@ -41,7 +45,6 @@
   }
 }
 
-
 .el-message-box__content {
   padding: 24px;
   color: var(--el-text-color-primary);
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 82884bc2c..438ff2b82 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -1,21 +1,59 @@
 <template>
-  <LayoutContent header="创建数据集">
-    <el-steps :active="active" finish-status="success">
-      <el-step title="步骤 1"></el-step>
-      <el-step title="步骤 2"></el-step>
-      <el-step title="步骤 3"></el-step>
-    </el-steps>
-
-    <el-button style="margin-top: 12px" @click="next">下一步</el-button>
+  <LayoutContent header="创建数据集" back-to="-1">
+    <div class="create-dataset flex main-calc-height">
+      <div class="p-15">
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step v-for="(item, index) in steps" :key="index" :title="item.name" />
+        </el-steps>
+      </div>
+      <div class="create-dataset__component p-15">
+        <el-scrollbar>
+          <component :is="steps[active].component" />
+        </el-scrollbar>
+      </div>
+      <div class="create-dataset__footer text-right p-15 border-t">
+        <el-button @click="next">取 消</el-button>
+        <el-button @click="next">上一步</el-button>
+        <el-button @click="next" type="primary">下一步</el-button>
+        <el-button @click="next" type="primary">开始导入</el-button>
+      </div>
+    </div>
   </LayoutContent>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import BaseForm from './component/BaseForm.vue'
 
 const active = ref(0)
 
+const steps = [
+  {
+    name: '上传文档',
+    component: BaseForm
+  },
+  {
+    name: '设置分段规则',
+    component: ''
+  }
+]
+
 const next = () => {
   if (active.value++ > 2) active.value = 0
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.create-dataset {
+  flex-direction: column;
+  // height: 100%;
+  &__component {
+    flex: 1;
+    flex-basis: auto;
+    min-width: 70%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  &__footer {
+    flex: 0 0 auto;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
new file mode 100644
index 000000000..c2cdf882b
--- /dev/null
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -0,0 +1,52 @@
+<template>
+  <h4 class="title-decoration-1 mb-10">基本信息</h4>
+  <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
+    <el-form-item label="数据集名称" prop="name">
+      <el-input
+        v-model.trim="form.name"
+        placeholder="请输入数据集名称"
+        maxlength="64"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item label="数据集描述" prop="describe">
+      <el-input
+        v-model.trim="form.describe"
+        type="textarea"
+        placeholder="描述数据集的内容，详尽的描述将帮助AI能深入理解该数据集的内容，能更准确的检索到内容，提高该数据集的命中率。"
+        maxlength="500"
+        show-word-limit
+        :autosize="{ minRows: 3 }"
+      />
+    </el-form-item>
+  </el-form>
+  <UploadDocument />
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import UploadDocument from '@/views/dataset/component/UploadDocument.vue'
+const form = reactive({
+  name: '',
+  describe: ''
+})
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入数据集名称', trigger: 'blur' }],
+  describe: [{ required: true, message: '请输入数据集描述', trigger: 'blur' }]
+})
+const FormRef = ref()
+// 表单校验
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid) => {
+    return valid
+  })
+}
+
+onMounted(() => {})
+
+defineExpose({
+  validate
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/ui/src/views/dataset/component/UploadDocument.vue b/ui/src/views/dataset/component/UploadDocument.vue
new file mode 100644
index 000000000..c28da3657
--- /dev/null
+++ b/ui/src/views/dataset/component/UploadDocument.vue
@@ -0,0 +1,60 @@
+<template>
+  <h4 class="title-decoration-1 mb-10">上传文档</h4>
+  <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
+    <el-form-item prop="name">
+      <el-upload
+        class="w-full"
+        drag
+        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        multiple
+      >
+        <div class="el-upload__text">
+          <p>
+            拖拽文件到此上传或
+            <em>
+              选择文件
+              <el-icon style="font-size: 25px"><upload-filled /></el-icon>
+            </em>
+          </p>
+          <div class="upload__decoration">
+            <p>1. 当前支持TXT、Markdown文本文件。</p>
+            <p>2. 每次最多上传50个文档，每个文档最大不能超过10MB。</p>
+            <p>3. 系统会对文档进行分段处理，若使用【高级分段】建议上传文档前规范文档的分段标识。</p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+  </el-form>
+  <p>文档列表</p>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+const form = reactive({
+  name: '',
+  describe: ''
+})
+
+const rules = reactive({})
+const FormRef = ref()
+
+// 表单校验
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid) => {
+    return valid
+  })
+}
+
+onMounted(() => {})
+
+defineExpose({
+  validate
+})
+</script>
+<style scoped lang="scss">
+.upload__decoration {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 4546c71bb..4073426a6 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -55,8 +55,8 @@ import { ref, onMounted } from 'vue'
 import datasetApi from '@/api/dataset'
 import type { datasetListRequest } from '@/api/type/dataset'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
-import { useRouter } from 'vue-router';
-const router = useRouter();
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 const loading = ref(false)
 const filterText = ref('')
@@ -68,20 +68,23 @@ const pageConfig = ref<datasetListRequest>({
   search_text: ''
 })
 
-function loadDataset() { }
-
+function loadDataset() {}
 
 function deleteDateset(row: any) {
-  MsgConfirm({
-    title: `是否删除数据集：${row.name}？`,
-    decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。',
-    confirmButtonText: '删除',
-  }, {
-    confirmButtonClass: 'danger',
-  })
+  MsgConfirm(
+    {
+      title: `是否删除数据集：${row.name}？`,
+      decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。',
+      confirmButtonText: '删除'
+    },
+    {
+      confirmButtonClass: 'danger'
+    }
+  )
     .then(() => {
       loading.value = true
-      datasetApi.delDateset(row.id)
+      datasetApi
+        .delDateset(row.id)
         .then(() => {
           MsgSuccess('删除成功')
           getList()

From 34aad04edd2fe7e65e7f2f02b45096cfb5beb227 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 2 Nov 2023 09:56:14 +0800
Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         | 42 +++++++-
 ui/src/api/type/dataset.ts                    |  8 +-
 ui/src/components/card-add/index.vue          |  2 +-
 ui/src/components/card-box/index.vue          |  2 +-
 ui/src/stores/index.ts                        |  4 +-
 ui/src/stores/modules/dataset.ts              | 26 +++++
 ui/src/stores/modules/user.ts                 |  4 +-
 ui/src/styles/element-plus.scss               |  6 ++
 ui/src/views/dataset/CreateDataset.vue        | 26 +++--
 ui/src/views/dataset/component/BaseForm.vue   | 15 ++-
 .../dataset/component/SegmentPreview.vue      | 30 ++++++
 ...UploadDocument.vue => UploadComponent.vue} | 18 ++--
 ui/src/views/dataset/index.vue                | 97 +++++++++----------
 ui/src/views/dataset/step/SetRules.vue        | 64 ++++++++++++
 ui/src/views/dataset/step/UploadDocument.vue  | 35 +++++++
 15 files changed, 299 insertions(+), 80 deletions(-)
 create mode 100644 ui/src/stores/modules/dataset.ts
 create mode 100644 ui/src/views/dataset/component/SegmentPreview.vue
 rename ui/src/views/dataset/component/{UploadDocument.vue => UploadComponent.vue} (80%)
 create mode 100644 ui/src/views/dataset/step/SetRules.vue
 create mode 100644 ui/src/views/dataset/step/UploadDocument.vue

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index ef5f09fb1..caee05921 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -32,9 +32,49 @@ const delDateset: (dataset_id: String) => Promise<Result<boolean>> = (dataset_id
   return del(`${prefix}/${dataset_id}`)
 }
 
+/**
+ * 创建数据集
+ * @param 参数 
+ * {
+  "name": "string",
+  "desc": "string",
+  "documents": [
+    {
+      "name": "string",
+      "paragraphs": [
+        {
+          "content": "string",
+          "title": "string",
+          "is_active": true,
+          "problem_list": [
+            {
+              "id": "string",
+              "content": "string"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+ */
+const postDateset: (data: any) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}`, data)
+}
+
+/**
+ * 分段预览（上传文档）
+ * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
+ */
+const postSplitDocument: (data: any) => Promise<Result<any>> = (data) => {
+  console.log(data)
+  return post(`${prefix}/document/split`, data)
+}
 
 export default {
   getDateset,
   getAllDateset,
-  delDateset
+  delDateset,
+  postDateset,
+  postSplitDocument
 }
diff --git a/ui/src/api/type/dataset.ts b/ui/src/api/type/dataset.ts
index f8247e1ac..becec96d7 100644
--- a/ui/src/api/type/dataset.ts
+++ b/ui/src/api/type/dataset.ts
@@ -4,4 +4,10 @@ interface datasetListRequest {
   search_text: string
 }
 
-export type { datasetListRequest }
+interface datasetData {
+  name: String
+  desc: String
+  documents?: Array<any>
+}
+
+export type { datasetListRequest, datasetData }
diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
index c6f7673be..678322484 100644
--- a/ui/src/components/card-add/index.vue
+++ b/ui/src/components/card-add/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="hover">
+  <el-card shadow="always">
     <div class="card-add">
       <AppIcon :iconName="icon" class="add-icon" />
       <span class="ml-10">{{ title }}</span>
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 902ad7b03..eeb05ab34 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
+  <el-card shadow="always" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
index ffbf4f695..4ce567603 100644
--- a/ui/src/stores/index.ts
+++ b/ui/src/stores/index.ts
@@ -2,9 +2,11 @@ import { createPinia } from 'pinia'
 const store = createPinia()
 export { store }
 import useUserStore from './modules/user'
+import useDatasetStore from './modules/dataset'
 
 const useStore = () => ({
-  user: useUserStore()
+  user: useUserStore(),
+  dataset: useDatasetStore()
 })
 
 export default useStore
diff --git a/ui/src/stores/modules/dataset.ts b/ui/src/stores/modules/dataset.ts
new file mode 100644
index 000000000..103d62331
--- /dev/null
+++ b/ui/src/stores/modules/dataset.ts
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+import type { datasetData } from '@/api/type/dataset'
+import type { UploadUserFile } from 'element-plus'
+
+export interface datasetStateTypes {
+  baseInfo: datasetData | null
+  documentsFiles: UploadUserFile[]
+}
+
+const useDatasetStore = defineStore({
+  id: 'dataset',
+  state: (): datasetStateTypes => ({
+    baseInfo: null,
+    documentsFiles: []
+  }),
+  actions: {
+    saveBaseInfo(info: datasetData) {
+      this.baseInfo = info
+    },
+    saveDocumentsFile(file: UploadUserFile[]) {
+      this.documentsFiles = file
+    }
+  }
+})
+
+export default useDatasetStore
diff --git a/ui/src/stores/modules/user.ts b/ui/src/stores/modules/user.ts
index 224dc39f2..c99135ed8 100644
--- a/ui/src/stores/modules/user.ts
+++ b/ui/src/stores/modules/user.ts
@@ -2,14 +2,14 @@ import { defineStore } from 'pinia'
 import type { User } from '@/api/type/user'
 import UserApi from '@/api/user'
 
-export interface appStateTypes {
+export interface userStateTypes {
   userInfo: User | null
   token: any
 }
 
 const useUserStore = defineStore({
   id: 'user',
-  state: (): appStateTypes => ({
+  state: (): userStateTypes => ({
     userInfo: null,
     token: ''
   }),
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index b6efe3b86..4ac1a64d2 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -1,6 +1,7 @@
 :root {
   --el-menu-item-height: 45px;
   --el-text-color-primary: '#1F2329';
+  --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
 }
 
 .el-button {
@@ -85,6 +86,11 @@
   }
 }
 
+.el-card {
+  --el-card-border-radius: 8px;
+  border: none !important;
+}
+
 // 抽屉样式整体修改
 .el-drawer {
   .el-drawer__header {
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 438ff2b82..8c1133271 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -8,12 +8,12 @@
       </div>
       <div class="create-dataset__component p-15">
         <el-scrollbar>
-          <component :is="steps[active].component" />
+          <component :is="steps[active].component" :ref="steps[active]?.ref" />
         </el-scrollbar>
       </div>
       <div class="create-dataset__footer text-right p-15 border-t">
         <el-button @click="next">取 消</el-button>
-        <el-button @click="next">上一步</el-button>
+        <el-button @click="prev">上一步</el-button>
         <el-button @click="next" type="primary">下一步</el-button>
         <el-button @click="next" type="primary">开始导入</el-button>
       </div>
@@ -22,24 +22,32 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import BaseForm from './component/BaseForm.vue'
-
-const active = ref(0)
+import UploadDocument from './step/UploadDocument.vue'
+import SetRules from './step/SetRules.vue'
 
 const steps = [
   {
+    ref: 'UploadDocumentRef',
     name: '上传文档',
-    component: BaseForm
+    component: UploadDocument
   },
   {
+    ref: 'SetRulesRef',
     name: '设置分段规则',
-    component: ''
+    component: SetRules
   }
 ]
 
-const next = () => {
-  if (active.value++ > 2) active.value = 0
+const UploadDocumentRef = ref()
+
+const active = ref(0)
+
+async function next() {
+  if (await UploadDocumentRef.value.onSubmit()) {
+    if (active.value++ > 2) active.value = 0
+  }
 }
+const prev = () => {}
 </script>
 <style lang="scss" scoped>
 .create-dataset {
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index c2cdf882b..e18afc7de 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -9,9 +9,9 @@
         show-word-limit
       />
     </el-form-item>
-    <el-form-item label="数据集描述" prop="describe">
+    <el-form-item label="数据集描述" prop="desc">
       <el-input
-        v-model.trim="form.describe"
+        v-model.trim="form.desc"
         type="textarea"
         placeholder="描述数据集的内容，详尽的描述将帮助AI能深入理解该数据集的内容，能更准确的检索到内容，提高该数据集的命中率。"
         maxlength="500"
@@ -20,25 +20,23 @@
       />
     </el-form-item>
   </el-form>
-  <UploadDocument />
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import UploadDocument from '@/views/dataset/component/UploadDocument.vue'
 const form = reactive({
   name: '',
-  describe: ''
+  desc: ''
 })
 
 const rules = reactive({
   name: [{ required: true, message: '请输入数据集名称', trigger: 'blur' }],
-  describe: [{ required: true, message: '请输入数据集描述', trigger: 'blur' }]
+  desc: [{ required: true, message: '请输入数据集描述', trigger: 'blur' }]
 })
 const FormRef = ref()
 // 表单校验
 function validate() {
   if (!FormRef.value) return
-  return FormRef.value.validate((valid) => {
+  return FormRef.value.validate((valid: any) => {
     return valid
   })
 }
@@ -46,7 +44,8 @@ function validate() {
 onMounted(() => {})
 
 defineExpose({
-  validate
+  validate,
+  form
 })
 </script>
 <style scoped lang="scss"></style>
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/SegmentPreview.vue
new file mode 100644
index 000000000..c5885219d
--- /dev/null
+++ b/ui/src/views/dataset/component/SegmentPreview.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="User" name="first">
+      <div>
+        
+      </div>
+
+    </el-tab-pane>
+    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+  </el-tabs>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+const activeName = ref('first')
+onMounted(() => {})
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+<style scoped lang="scss">
+.set-rules {
+  &__radio {
+    display: block;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/component/UploadDocument.vue b/ui/src/views/dataset/component/UploadComponent.vue
similarity index 80%
rename from ui/src/views/dataset/component/UploadDocument.vue
rename to ui/src/views/dataset/component/UploadComponent.vue
index c28da3657..558968b48 100644
--- a/ui/src/views/dataset/component/UploadDocument.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -1,12 +1,14 @@
 <template>
   <h4 class="title-decoration-1 mb-10">上传文档</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
-    <el-form-item prop="name">
+    <el-form-item prop="fileList">
       <el-upload
         class="w-full"
         drag
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
         multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
       >
         <div class="el-upload__text">
           <p>
@@ -30,17 +32,18 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 const form = reactive({
-  name: '',
-  describe: ''
+  fileList: []
 })
 
-const rules = reactive({})
+const rules = reactive({
+  fileList: [{ required: true, message: '请上传文件', trigger: 'change' }]
+})
 const FormRef = ref()
 
 // 表单校验
 function validate() {
   if (!FormRef.value) return
-  return FormRef.value.validate((valid) => {
+  return FormRef.value.validate((valid: any) => {
     return valid
   })
 }
@@ -48,7 +51,8 @@ function validate() {
 onMounted(() => {})
 
 defineExpose({
-  validate
+  validate,
+  form
 })
 </script>
 <style scoped lang="scss">
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 4073426a6..92583d4d8 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -1,54 +1,53 @@
 <template>
-  <LayoutContent header="数据集">
-    <div class="dataset-list-container p-15">
-      <div class="text-right">
-        <el-input
-          v-model="filterText"
-          placeholder="搜索内容"
-          suffix-icon="Search"
-          style="width: 300px"
-        />
-      </div>
-      <div>
-        <el-row
-          :gutter="15"
-          v-infinite-scroll="loadDataset"
-          :infinite-scroll-disabled="disabledScroll"
-        >
-          <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-10">
-            <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
-          </el-col>
-          <el-col
-            :xs="24"
-            :sm="12"
-            :md="6"
-            :lg="5"
-            :xl="4"
-            v-for="(item, index) in datasetList"
-            :key="index"
-            class="mt-10"
-          >
-            <CardBox :title="item.name" :description="item.desc" class="cursor">
-              <template #mouseEnter>
-                <div class="delete-button">
-                  <el-button type="primary" link @click.stop="deleteDateset(item)">
-                    <el-icon><Delete /></el-icon>
-                  </el-button>
-                </div>
-              </template>
-
-              <template #footer>
-                <div class="footer-content">
-                  {{ item?.document_count || 0 }}文档数 {{ item?.char_length || 0 }}字符数
-                  {{ item?.char_length || 0 }}关联应用
-                </div>
-              </template>
-            </CardBox>
-          </el-col>
-        </el-row>
-      </div>
+  <div class="dataset-list-container p-15">
+    <div class="flex-between">
+      <h3>数据集</h3>
+      <el-input
+        v-model="filterText"
+        placeholder="搜索内容"
+        suffix-icon="Search"
+        style="width: 300px"
+      />
     </div>
-  </LayoutContent>
+    <div>
+      <el-row
+        :gutter="15"
+        v-infinite-scroll="loadDataset"
+        :infinite-scroll-disabled="disabledScroll"
+      >
+        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-10">
+          <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
+        </el-col>
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="6"
+          :lg="5"
+          :xl="4"
+          v-for="(item, index) in datasetList"
+          :key="index"
+          class="mt-10"
+        >
+          <CardBox :title="item.name" :description="item.desc" class="cursor">
+            <template #mouseEnter>
+              <div class="delete-button">
+                <el-button type="primary" link @click.stop="deleteDateset(item)">
+                  <el-icon><Delete /></el-icon>
+                </el-button>
+              </div>
+            </template>
+
+            <template #footer>
+              <div class="footer-content">
+                {{ item?.document_count || 0 }}文档数 {{ item?.char_length || 0 }}字符数
+                {{ item?.char_length || 0 }}关联应用
+              </div>
+            </template>
+          </CardBox>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/SetRules.vue
new file mode 100644
index 000000000..40022731d
--- /dev/null
+++ b/ui/src/views/dataset/step/SetRules.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="set-rules">
+    <el-row>
+      <el-col :span="12">
+        <h4 class="title-decoration-1 mb-10">分段规则</h4>
+        <el-radio-group v-model="radio1" class="set-rules__radio">
+          <div>
+            <el-radio label="1" size="large">智能分段（推荐）</el-radio>
+          </div>
+          <div>
+            <el-radio label="2" size="large">高级分段</el-radio>
+          </div>
+        </el-radio-group>
+        <div>
+          <el-button @click="splitDocument">生成预览</el-button>
+        </div>
+      </el-col>
+
+      <el-col :span="12">
+        <h4 class="title-decoration-1 mb-10">分段预览</h4>
+        <SegmentPreview />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import SegmentPreview from '@/views/dataset/component/SegmentPreview.vue'
+import DatasetApi from '@/api/dataset'
+import useStore from '@/stores'
+const { dataset } = useStore()
+const documentsFiles = computed(() => dataset.documentsFiles)
+
+const radio1 = ref('1')
+const loading = ref(false)
+
+function splitDocument() {
+  loading.value = true
+  let fd = new FormData()
+  console.log(documentsFiles.value)
+  documentsFiles.value.forEach((item) => {
+    if (item?.raw) {
+      fd.append('file', item?.raw)
+    }
+  })
+
+  DatasetApi.postSplitDocument(fd)
+    .then((res) => {
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {})
+</script>
+<style scoped lang="scss">
+.set-rules {
+  &__radio {
+    display: block;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/step/UploadDocument.vue b/ui/src/views/dataset/step/UploadDocument.vue
new file mode 100644
index 000000000..5c77b41e7
--- /dev/null
+++ b/ui/src/views/dataset/step/UploadDocument.vue
@@ -0,0 +1,35 @@
+<template>
+  <!-- 基本信息 -->
+  <BaseForm ref="BaseFormRef" />
+  <!-- 上传文档 -->
+  <UploadComponent ref="UploadComponentRef" />
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import BaseForm from '@/views/dataset/component/BaseForm.vue'
+import UploadComponent from '@/views/dataset/component/UploadComponent.vue'
+import useStore from '@/stores'
+const { dataset } = useStore()
+
+const BaseFormRef = ref()
+const UploadComponentRef = ref()
+
+// submit
+const onSubmit = async () => {
+  if ((await BaseFormRef.value.validate()) && (await UploadComponentRef.value.validate())) {
+    // stores保存数据
+    dataset.saveBaseInfo(BaseFormRef.value.form)
+    dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
+    return true
+  } else {
+    return false
+  }
+}
+
+onMounted(() => {})
+
+defineExpose({
+  onSubmit
+})
+</script>
+<style scoped lang="scss"></style>

From 3aee99183ad1a69b0b105c8cc05f6e44892866a2 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 2 Nov 2023 18:25:09 +0800
Subject: [PATCH 03/18] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/env/.env                                   |  2 +-
 ui/src/assets/user-icon.svg                   | 14 ++++
 ui/src/components/back-button/index.vue       |  2 +-
 ui/src/components/card-box/index.vue          |  4 +-
 .../content-container/LayoutContent.vue       | 12 +--
 ui/src/components/icons/index.ts              | 79 ++++++++++++++-----
 ui/src/components/login-container/index.vue   |  4 +-
 ui/src/components/tags-input/index.vue        |  2 +-
 ui/src/layout/app-layout/index.vue            |  3 +-
 .../layout/components/sidebar/SidebarItem.vue | 11 ++-
 ui/src/layout/components/sidebar/index.vue    |  1 +
 .../top-bar/avatar/ResetPasssword.vue         |  1 -
 .../components/top-bar/avatar/index.vue       | 11 ++-
 ui/src/layout/components/top-bar/index.vue    | 15 ++--
 .../components/top-bar/top-menu/MenuItem.vue  | 20 +++--
 .../components/top-bar/top-menu/index.vue     |  4 +-
 ui/src/layout/main-layout/index.vue           |  2 +-
 ui/src/styles/app.scss                        | 59 ++++++++++----
 ui/src/styles/element-plus.scss               | 20 +++++
 ui/src/styles/variables.scss                  | 21 +++--
 ui/src/views/404/index.vue                    |  2 +-
 ui/src/views/dataset/CreateDataset.vue        |  6 +-
 ui/src/views/dataset/component/BaseForm.vue   |  2 +-
 .../dataset/component/UploadComponent.vue     |  2 +-
 ui/src/views/dataset/index.vue                |  8 +-
 ui/src/views/dataset/step/SetRules.vue        |  4 +-
 ui/src/views/login/forgot-password/index.vue  |  4 +-
 ui/src/views/login/index.vue                  |  2 +-
 ui/src/views/login/register/index.vue         |  4 +-
 ui/src/views/login/reset-password/index.vue   |  4 +-
 .../setting/component/PermissionSetting.vue   |  4 +
 ui/src/views/setting/index.vue                | 63 +++++++++------
 32 files changed, 262 insertions(+), 130 deletions(-)
 create mode 100644 ui/src/assets/user-icon.svg

diff --git a/ui/env/.env b/ui/env/.env
index 4dcc347bb..87cd57582 100644
--- a/ui/env/.env
+++ b/ui/env/.env
@@ -1,4 +1,4 @@
 VITE_APP_NAME=ui
 VITE_BASE_PATH=/ui/
 VITE_APP_PORT=3000
-VITE_APP_TITLE = '智能知识库'
\ No newline at end of file
+VITE_APP_TITLE = 'MaxKB'
\ No newline at end of file
diff --git a/ui/src/assets/user-icon.svg b/ui/src/assets/user-icon.svg
new file mode 100644
index 000000000..5dd0f63c0
--- /dev/null
+++ b/ui/src/assets/user-icon.svg
@@ -0,0 +1,14 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 7.33333H4C2.15905 7.33333 0 8.62098 0 10.9333V12.7333C0 13.0647 0.298477 13.3333 0.666667 13.3333H11.3333C11.7015 13.3333 12 13.0647 12 12.7333V10.9333C12 8.61904 9.84095 7.33333 8 7.33333Z" fill="url(#paint0_linear_264_32130)"/>
+<path d="M2.66667 3.33333C2.66667 5.17428 4.15905 6.66667 6 6.66667C7.84095 6.66667 9.33333 5.17428 9.33333 3.33333C9.33333 1.49238 7.84095 0 6 0C4.15905 0 2.66667 1.49238 2.66667 3.33333Z" fill="url(#paint1_linear_264_32130)"/>
+<defs>
+<linearGradient id="paint0_linear_264_32130" x1="6" y1="-1.34111e-08" x2="6" y2="13.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_264_32130" x1="6" y1="-1.34111e-08" x2="6" y2="13.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ui/src/components/back-button/index.vue b/ui/src/components/back-button/index.vue
index abaf1651d..4ca5d64e1 100644
--- a/ui/src/components/back-button/index.vue
+++ b/ui/src/components/back-button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-icon class="back-button cursor mr-10 vertical-middle" @click="jump">
+  <el-icon class="back-button cursor mr-8 vertical-middle" @click="jump">
     <Back />
   </el-icon>
 </template>
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index eeb05ab34..dc04f0651 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -3,14 +3,14 @@
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
-          <AppAvatar class="mr-10">
+          <AppAvatar class="mr-8">
             <el-icon><Document /></el-icon>
           </AppAvatar>
           <h4>{{ title }}</h4>
         </div>
       </slot>
     </div>
-    <div class="description mt-10">
+    <div class="description mt-8">
       <slot name="description">
         {{ description }}
       </slot>
diff --git a/ui/src/components/content-container/LayoutContent.vue b/ui/src/components/content-container/LayoutContent.vue
index c99e9064d..9d30a63bf 100644
--- a/ui/src/components/content-container/LayoutContent.vue
+++ b/ui/src/components/content-container/LayoutContent.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="content-container">
-    <div class="content-container__header mb-10" v-if="slots.header || header">
+    <div class="content-container__header mt-16 mb-16" v-if="slots.header || header">
       <slot name="header">
         <back-button :to="backTo" v-if="showBack"></back-button>
-        <span class="vertical-middle">{{ header }}</span>
+        <h2 class="vertical-middle">{{ header }}</h2>
       </slot>
     </div>
     <el-scrollbar>
@@ -31,18 +31,14 @@ const showBack = computed(() => {
 <style lang="scss" scope>
 .content-container {
   transition: 0.3s;
-  padding: var(--app-view-padding);
+  padding: 0 var(--app-view-padding) var(--app-view-padding);
   .content-container__header {
-    font-weight: 600;
-    font-size: 18px;
     box-sizing: border-box;
   }
   .content-container__main {
     background-color: var(--app-view-bg-color);
-    border-radius: 6px;
+    border-radius: 4px;
     box-sizing: border-box;
-    // overflow: auto;
-    // height: 100%;
   }
 }
 </style>
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index 8236ecd0a..c9ae91982 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -34,6 +34,52 @@ export const iconMap: any = {
     }
   },
 
+  'app-user': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M14 12.3333H10C8.15905 12.3333 6 13.621 6 15.9333V17.7333C6 18.0647 6.29848 18.3333 6.66667 18.3333H17.3333C17.7015 18.3333 18 18.0647 18 17.7333V15.9333C18 13.619 15.841 12.3333 14 12.3333Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M8.66667 8.33333C8.66667 10.1743 10.1591 11.6667 12 11.6667C13.8409 11.6667 15.3333 10.1743 15.3333 8.33333C15.3333 6.49238 13.8409 5 12 5C10.1591 5 8.66667 6.49238 8.66667 8.33333Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
+  'app-add-users': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M6.24984 5.41667C6.24984 6.7975 7.37067 7.91667 8.74984 7.91667C10.129 7.91667 11.2498 6.7975 11.2498 5.41667C11.2498 4.03583 10.129 2.91667 8.74984 2.91667C7.37067 2.91667 6.24984 4.03583 6.24984 5.41667ZM8.74984 1.25C11.0498 1.25 12.9165 3.11542 12.9165 5.41667C12.9165 7.71792 11.0498 9.58333 8.74984 9.58333C6.44984 9.58333 4.58317 7.71792 4.58317 5.41667C4.58317 3.11542 6.44984 1.25 8.74984 1.25ZM3.43734 15C3.37067 15.2663 3.33317 15.5454 3.33317 15.8333V16.6667H10.854C11.0841 16.6667 11.2706 16.8532 11.2706 17.0833V17.9167C11.2706 18.1468 11.0841 18.3333 10.854 18.3333H2.49984C2.0415 18.3333 1.6665 17.9604 1.6665 17.5V15.8333C1.6665 13.0721 3.904 10.8333 6.6665 10.8333H10.854C11.0841 10.8333 11.2706 11.0199 11.2706 11.25V12.0833C11.2706 12.3135 11.0841 12.5 10.854 12.5H6.6665C5.11234 12.5 3.80817 13.5625 3.43734 15ZM15.4165 11.6667C15.6466 11.6667 15.8332 11.8532 15.8332 12.0833V14.1667H17.9165C18.1466 14.1667 18.3332 14.3532 18.3332 14.5833V15.4167C18.3332 15.6468 18.1466 15.8333 17.9165 15.8333H15.8332V17.9167C15.8332 18.1468 15.6466 18.3333 15.4165 18.3333H14.5832C14.3531 18.3333 14.1665 18.1468 14.1665 17.9167V15.8333H12.0832C11.8531 15.8333 11.6665 15.6468 11.6665 15.4167V14.5833C11.6665 14.3532 11.8531 14.1667 12.0832 14.1667H14.1665V12.0833C14.1665 11.8532 14.3531 11.6667 14.5832 11.6667H15.4165Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
   'app-dataset': {
     iconReader: () => {
       return h('i', [
@@ -95,39 +141,32 @@ export const iconMap: any = {
       ])
     }
   },
+
   'app-team': {
     iconReader: () => {
       return h('i', [
         h(
           'svg',
           {
-            viewBox: '0 0 1024 1024',
+            viewBox: '0 0 20 20',
             version: '1.1',
             xmlns: 'http://www.w3.org/2000/svg'
           },
           [
             h('path', {
-              d: 'M 824.2 699.9 c -25.4 -25.4 -54.7 -45.7 -86.4 -60.4 C 783.1 602.8 812 546.8 812 484 c 0 -110.8 -92.4 -201.7 -203.2 -200 c -109.1 1.7 -197 90.6 -197 200 c 0 62.8 29 118.8 74.2 155.5 c -31.7 14.7 -60.9 34.9 -86.4 60.4 C 345 754.6 314 826.8 312 903.8 c -0.1 4.5 3.5 8.2 8 8.2 h 56 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 C 493.8 707.7 551.1 684 612 684 c 60.9 0 118.2 23.7 161.3 66.8 C 814.5 792 838 846.3 840 904.3 c 0.1 4.3 3.7 7.7 8 7.7 h 56 c 4.5 0 8.1 -3.7 8 -8.2 c -2 -77 -33 -149.2 -87.8 -203.9 Z M 612 612 c -34.2 0 -66.4 -13.3 -90.5 -37.5 c -24.5 -24.5 -37.9 -57.1 -37.5 -91.8 c 0.3 -32.8 13.4 -64.5 36.3 -88 c 24 -24.6 56.1 -38.3 90.4 -38.7 c 33.9 -0.3 66.8 12.9 91 36.6 c 24.8 24.3 38.4 56.8 38.4 91.4 c 0 34.2 -13.3 66.3 -37.5 90.5 c -24.2 24.2 -56.4 37.5 -90.6 37.5 Z M 361.5 510.4 c -0.9 -8.7 -1.4 -17.5 -1.4 -26.4 c 0 -15.9 1.5 -31.4 4.3 -46.5 c 0.7 -3.6 -1.2 -7.3 -4.5 -8.8 c -13.6 -6.1 -26.1 -14.5 -36.9 -25.1 c -25.8 -25.2 -39.7 -59.3 -38.7 -95.4 c 0.9 -32.1 13.8 -62.6 36.3 -85.6 c 24.7 -25.3 57.9 -39.1 93.2 -38.7 c 31.9 0.3 62.7 12.6 86 34.4 c 7.9 7.4 14.7 15.6 20.4 24.4 c 2 3.1 5.9 4.4 9.3 3.2 c 17.6 -6.1 36.2 -10.4 55.3 -12.4 c 5.6 -0.6 8.8 -6.6 6.3 -11.6 c -32.5 -64.3 -98.9 -108.7 -175.7 -109.9 c -110.9 -1.7 -203.3 89.2 -203.3 199.9 c 0 62.8 28.9 118.8 74.2 155.5 c -31.8 14.7 -61.1 35 -86.5 60.4 c -54.8 54.7 -85.8 126.9 -87.8 204 c -0.1 4.5 3.5 8.2 8 8.2 h 56.1 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 c 29.4 -29.4 65.4 -49.8 104.7 -59.7 c 3.9 -1 6.5 -4.7 6 -8.7 Z',
+              d: 'M7.08317 10C9.15424 10 10.8332 8.32107 10.8332 6.25C10.8332 4.17893 9.15424 2.5 7.08317 2.5C5.0121 2.5 3.33317 4.17893 3.33317 6.25C3.33317 8.32107 5.0121 10 7.08317 10Z',
               fill: 'currentColor'
-            })
-          ]
-        )
-      ])
-    }
-  },
-  'app-add-users': {
-    iconReader: () => {
-      return h('i', [
-        h(
-          'svg',
-          {
-            viewBox: '0 0 1024 1024',
-            version: '1.1',
-            xmlns: 'http://www.w3.org/2000/svg'
-          },
-          [
+            }),
             h('path', {
-              d: 'M 892 772 h -80 v -80 c 0 -4.4 -3.6 -8 -8 -8 h -48 c -4.4 0 -8 3.6 -8 8 v 80 h -80 c -4.4 0 -8 3.6 -8 8 v 48 c 0 4.4 3.6 8 8 8 h 80 v 80 c 0 4.4 3.6 8 8 8 h 48 c 4.4 0 8 -3.6 8 -8 v -80 h 80 c 4.4 0 8 -3.6 8 -8 v -48 c 0 -4.4 -3.6 -8 -8 -8 Z M 373.5 498.4 c -0.9 -8.7 -1.4 -17.5 -1.4 -26.4 c 0 -15.9 1.5 -31.4 4.3 -46.5 c 0.7 -3.6 -1.2 -7.3 -4.5 -8.8 c -13.6 -6.1 -26.1 -14.5 -36.9 -25.1 c -25.8 -25.2 -39.7 -59.3 -38.7 -95.4 c 0.9 -32.1 13.8 -62.6 36.3 -85.6 c 24.7 -25.3 57.9 -39.1 93.2 -38.7 c 31.9 0.3 62.7 12.6 86 34.4 c 7.9 7.4 14.7 15.6 20.4 24.4 c 2 3.1 5.9 4.4 9.3 3.2 c 17.6 -6.1 36.2 -10.4 55.3 -12.4 c 5.6 -0.6 8.8 -6.6 6.3 -11.6 c -32.5 -64.3 -98.9 -108.7 -175.7 -109.9 c -110.8 -1.7 -203.2 89.2 -203.2 200 c 0 62.8 28.9 118.8 74.2 155.5 c -31.8 14.7 -61.1 35 -86.5 60.4 c -54.8 54.7 -85.8 126.9 -87.8 204 c -0.1 4.5 3.5 8.2 8 8.2 h 56.1 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 c 29.4 -29.4 65.4 -49.8 104.7 -59.7 c 3.8 -1.1 6.4 -4.8 5.9 -8.8 Z M 824 472 c 0 -109.4 -87.9 -198.3 -196.9 -200 C 516.3 270.3 424 361.2 424 472 c 0 62.8 29 118.8 74.2 155.5 c -31.7 14.7 -60.9 34.9 -86.4 60.4 C 357 742.6 326 814.8 324 891.8 c -0.1 4.5 3.5 8.2 8 8.2 h 56 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 C 505.8 695.7 563 672 624 672 c 110.4 0 200 -89.5 200 -200 Z m -109.5 90.5 C 690.3 586.7 658.2 600 624 600 s -66.3 -13.3 -90.5 -37.5 C 509 538 495.7 505.4 496 470.7 c 0.3 -32.8 13.4 -64.5 36.3 -88 c 24 -24.6 56.1 -38.3 90.4 -38.7 c 33.9 -0.3 66.8 12.9 91 36.6 c 24.8 24.3 38.4 56.8 38.4 91.4 c -0.1 34.2 -13.4 66.3 -37.6 90.5 Z',
+              d: 'M1.24984 18.3333C0.7896 18.3333 0.416504 17.9602 0.416504 17.5V15.8889C0.416504 13.0968 2.76035 10.8333 5.47333 10.8333H8.70065C11.4136 10.8333 13.7498 13.0968 13.7498 15.8889V17.5C13.7498 17.9602 13.3767 18.3333 12.9165 18.3333H1.24984Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M15.4165 17.5V17.2535C15.4165 15.3267 15.4165 13.3333 13.7498 12.0833C13.8196 12.0773 13.9366 12.0794 14.0491 12.0814C14.1036 12.0824 14.157 12.0833 14.2034 12.0833H15.8332C17.8679 12.0833 19.5832 13.3643 19.5832 15.4583V16.875C19.5832 17.2202 19.3033 17.5 18.9582 17.5H15.4165Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M14.5832 10.8333C15.9639 10.8333 17.0832 9.71405 17.0832 8.33333C17.0832 6.95262 15.9639 5.83333 14.5832 5.83333C13.2025 5.83333 12.0832 6.95262 12.0832 8.33333C12.0832 9.71405 13.2025 10.8333 14.5832 10.8333Z',
               fill: 'currentColor'
             })
           ]
diff --git a/ui/src/components/login-container/index.vue b/ui/src/components/login-container/index.vue
index fe4f77db7..ea1f75334 100644
--- a/ui/src/components/login-container/index.vue
+++ b/ui/src/components/login-container/index.vue
@@ -3,7 +3,7 @@
     <div class="login-title">
       <div class="title flex-center">
         <div class="logo"></div>
-        <div>{{ title || defaultTitle }}</div>
+        <div class="app-logo-font">{{ title || defaultTitle }}</div>
       </div>
       <div class="sub-title" v-if="subTitle">{{ subTitle }}</div>
     </div>
@@ -27,8 +27,6 @@ defineProps({
 
     .title {
       font-size: 28px;
-      font-weight: 900;
-      color: #101010;
       height: 60px;
       .logo {
         background-image: url('@/assets/logo.png');
diff --git a/ui/src/components/tags-input/index.vue b/ui/src/components/tags-input/index.vue
index 1bc53c90b..04928805f 100644
--- a/ui/src/components/tags-input/index.vue
+++ b/ui/src/components/tags-input/index.vue
@@ -8,7 +8,7 @@
         :key="index"
         @close="removeTag(item)"
         closable
-        class="mr-10"
+        class="mr-8"
         >{{ item }}
       </el-tag>
     </div>
diff --git a/ui/src/layout/app-layout/index.vue b/ui/src/layout/app-layout/index.vue
index d5c971d33..1d93815ef 100644
--- a/ui/src/layout/app-layout/index.vue
+++ b/ui/src/layout/app-layout/index.vue
@@ -20,8 +20,9 @@ import { TopBar, AppMain } from '../components'
 .app-main {
   height: calc(100vh - var(--app-header-height));
   padding: 0 !important;
+  box-sizing: border-box;
 }
 .app-header {
-  background-color: var(--app-header-bg-color);
+  background: var(--app-header-bg-color);
 }
 </style>
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index f56c83a6e..d9f6b1ca9 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -2,7 +2,7 @@
   <div v-if="!menu.meta || !menu.meta.hidden" class="sidebar-item">
     <el-menu-item ref="subMenu" :index="menu.path" popper-class="sidebar-popper">
       <template #title>
-        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menu.meta.icon" />
+        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menu.meta.icon" class="sidebar-icon"/>
         <span v-if="menu.meta && menu.meta.title">{{ menu.meta.title }}</span>
       </template>
     </el-menu-item>
@@ -19,14 +19,19 @@ defineProps<{
 
 <style scoped lang="scss">
 .sidebar-item {
+  .sidebar-icon {
+    font-size: 20px;
+    margin-top: -2px;
+  }
   .el-menu-item {
-    padding-left: 30px !important;
+    padding: 13px 12px 13px 16px !important;
     font-weight: 500;
+    border-radius: 4px;
   }
 
   .el-menu-item.is-active {
     color: var(--el-menu-active-color);
-    background: var(--el-color-primary-light-9);
+    background: rgba(51, 112, 255, 0.1);
   }
 }
 </style>
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
index 3c80ee3d8..4acd6e05a 100644
--- a/ui/src/layout/components/sidebar/index.vue
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -36,6 +36,7 @@ const activeMenu = computed(() => {
 
 <style lang="scss">
 .sidebar {
+  padding: 8px;
   .el-menu {
     height: 100%;
     border: none;
diff --git a/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue b/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
index 7fdd1132a..7e717bdee 100644
--- a/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
+++ b/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
@@ -38,7 +38,6 @@
           class="input-item"
           :disabled="true"
           v-bind:modelValue="user.userInfo?.email"
-          @change="() => {}"
           placeholder="请输入邮箱"
         >
           <template #prepend>
diff --git a/ui/src/layout/components/top-bar/avatar/index.vue b/ui/src/layout/components/top-bar/avatar/index.vue
index 60a77e24e..bccf2e2be 100644
--- a/ui/src/layout/components/top-bar/avatar/index.vue
+++ b/ui/src/layout/components/top-bar/avatar/index.vue
@@ -1,6 +1,15 @@
 <template>
   <el-dropdown trigger="click" type="primary">
-    <AppAvatar :name="user.userInfo?.username" />
+    <div class="flex-center cursor">
+      <AppAvatar>
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+      </AppAvatar>
+      <span class="ml-8">{{ user.userInfo?.username }}</span>
+      <el-icon class="el-icon--right">
+        <CaretBottom />
+      </el-icon>
+    </div>
+
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item @click="openResetPassword">
diff --git a/ui/src/layout/components/top-bar/index.vue b/ui/src/layout/components/top-bar/index.vue
index 8285e2831..caa97f5e3 100644
--- a/ui/src/layout/components/top-bar/index.vue
+++ b/ui/src/layout/components/top-bar/index.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="top-bar-container flex-between border-b">
+  <div class="top-bar-container border-b flex-between">
     <div class="flex-center h-full">
       <div class="app-title-container flex-center">
         <div class="app-title-icon"></div>
-        <div class="app-title-text ml-10">{{ defaultTitle }}</div>
+        <div class="app-title-text app-logo-font">{{ defaultTitle }}</div>
       </div>
-      <el-divider direction="vertical" class="line" />
       <TopMenu></TopMenu>
     </div>
     <div class="avatar">
@@ -25,18 +24,16 @@ const defaultTitle = import.meta.env.VITE_APP_TITLE
   padding: var(--app-header-padding);
 
   .app-title-container {
-    margin-right: 20px;
+    margin-right: 45px;
     .app-title-icon {
       background-image: url('@/assets/logo.png');
       background-size: 100% 100%;
-      width: 40px;
-      height: 40px;
+      width: 34px;
+      height: 34px;
     }
 
     .app-title-text {
-      color: var(--el-color-primary);
-      font-size: 20px;
-      font-weight: 600;
+      font-size: 24px;
     }
   }
   .line {
diff --git a/ui/src/layout/components/top-bar/top-menu/MenuItem.vue b/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
index 4efd4f565..d4021956b 100644
--- a/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
+++ b/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
@@ -4,9 +4,9 @@
     :class="isActive ? 'active' : ''"
     @click="router.push({ name: menu.name })"
   >
-    <div class="icon">
+    <!-- <div class="icon">
       <AppIcon :iconName="menu.meta ? (menu.meta.icon as string) : '404'" />
-    </div>
+    </div> -->
     <div class="title">{{ menu.meta?.title }}</div>
   </div>
 </template>
@@ -28,8 +28,10 @@ const isActive = computed(() => {
 </script>
 <style lang="scss" scoped>
 .menu-item-container {
-  padding: 0 20px;
+  margin-right: 28px;
   cursor: pointer;
+  font-size: 16px;
+  position: relative;
   .icon {
     font-size: 15px;
     margin-right: 5px;
@@ -41,9 +43,15 @@ const isActive = computed(() => {
 }
 
 .active {
-  font-weight: 600;
   color: var(--el-color-primary);
-  background-color: var(--el-color-primary-light-9);
-  border-bottom: 3px solid var(--el-color-primary);
+  &::after {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    content: '';
+    background-color: var(--el-color-primary-light-9);
+    border-bottom: 3px solid var(--el-color-primary);
+  }
 }
 </style>
diff --git a/ui/src/layout/components/top-bar/top-menu/index.vue b/ui/src/layout/components/top-bar/top-menu/index.vue
index 7b7e742d4..b8b7390ed 100644
--- a/ui/src/layout/components/top-bar/top-menu/index.vue
+++ b/ui/src/layout/components/top-bar/top-menu/index.vue
@@ -19,7 +19,5 @@ const topMenuList = computed(() => {
 })
 </script>
 <style lang="scss" scope>
-.top-menu-container {
-  margin-bottom: -1px;
-}
+
 </style>
diff --git a/ui/src/layout/main-layout/index.vue b/ui/src/layout/main-layout/index.vue
index 9d3fc311d..222cbf7ab 100644
--- a/ui/src/layout/main-layout/index.vue
+++ b/ui/src/layout/main-layout/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main-layout h-full flex">
-    <div class="sidebar-container border-r"><Sidebar /></div>
+    <div class="sidebar-container"><Sidebar /></div>
     <div class="view-container">
       <AppMain />
     </div>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index c4488ac9e..3111214a3 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -9,14 +9,17 @@ html {
 }
 
 body {
-  font-size: 14px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei',
     '微软雅黑', Arial, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
   height: 100%;
   margin: 0;
   padding: 0;
+  color: var(--app-text-color-primary);
 }
 
 #app {
@@ -73,6 +76,7 @@ h1 {
 
 h2 {
   font-size: 20px;
+  font-weight: 500;
 }
 
 h3 {
@@ -93,28 +97,34 @@ h4 {
 .mt-8 {
   margin-top: 8px;
 }
-.mt-10 {
-  margin-top: 10px;
+.mt-16 {
+  margin-top: 16px;
+}
+.mb-8 {
+  margin-bottom: 8px;
+}
+.mb-16 {
+  margin-bottom: 16px;
 }
 
-.ml-10 {
-  margin-left: 10px;
+.ml-8 {
+  margin-left: 8px;
 }
 .ml-16 {
   margin-left: 16px;
 }
-.mr-10 {
-  margin-right: 10px;
-}
-.mb-10 {
-  margin-bottom: 10px;
-}
-.mb-20 {
-  margin-bottom: 20px;
+.mr-8 {
+  margin-right: 8px;
 }
 
-.p-15 {
-  padding: 15px;
+.p-8 {
+  padding: 8px;
+}
+.p-16 {
+  padding: 16px;
+}
+.p-24 {
+  padding: 24px;
 }
 
 .flex {
@@ -176,8 +186,7 @@ h4 {
 
 // 内容部分 自适应高度
 .main-calc-height {
-  height: calc(100vh - 125px);
-  box-sizing: border-box;
+  height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
 }
 
 // 标题前带竖线样式
@@ -196,3 +205,19 @@ h4 {
     border-radius: 10px;
   }
 }
+
+.app-logo-font {
+  background: var(--app-logo-color);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: Arial Black;
+  font-style: normal;
+  font-weight: 900;
+}
+
+// tag
+.default-tag {
+  background: var(--tag-deflaut-bg);
+  color: var(--tag-deflaut-color);
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 4ac1a64d2..cf22a8628 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -2,6 +2,7 @@
   --el-menu-item-height: 45px;
   --el-text-color-primary: '#1F2329';
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
+  --el-border-color: rgba(31, 35, 41, 0.15);
 }
 
 .el-button {
@@ -90,6 +91,25 @@
   --el-card-border-radius: 8px;
   border: none !important;
 }
+.el-dropdown {
+  color: var(--app-text-color-primary);
+}
+
+.el-tag {
+  --el-tag-border-radius: 2px;
+}
+.el-table {
+  --el-table-header-bg-color: #f5f6f7;
+}
+.el-table {
+  --el-table-text-color: var(--app-text-color-primary);
+  thead {
+    color: var(--app-text-color-secondary);
+  }
+  th.el-table__cell {
+    border-top: var(--el-table-border);
+  }
+}
 
 // 抽屉样式整体修改
 .el-drawer {
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 9e20cea2b..25437dda6 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -1,17 +1,22 @@
 :root {
   --el-color-primary: rgba(51, 112, 255, 1);
-  --app-layout-bg-color: #f3f5f6;
-  --app-base-text-color: rgba(31, 35, 41, 1);
-  --app-view-padding: 15px;
+  --app-layout-bg-color: #f5f6f7;
+  --app-text-color-primary: #1f2329;
+  --app-text-color-secondary: #646A73;
+  --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
-  --hover-bg-color: #fafafa;
+
   /** header 组件 */
   --app-header-height: 56px;
   --app-header-padding: 0 20px;
-  --app-header-bg-color: #ffffff;
+  --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%);
   /** sidebar 组件 */
   --sidebar-bg-color: #ffffff;
-  --sidebar-width: 198px;
-
-  --team-manage-left-width : 280px;
+  --sidebar-width: 240px;
+  /** tag */
+  --tag-deflaut-bg: rgba(51, 112, 255, 0.2);
+  --tag-deflaut-color: #2b5fd9;
+  /** team */
+  --team-manage-left-width: 280px;
 }
diff --git a/ui/src/views/404/index.vue b/ui/src/views/404/index.vue
index 4bb07abe9..e3b48b273 100644
--- a/ui/src/views/404/index.vue
+++ b/ui/src/views/404/index.vue
@@ -31,7 +31,7 @@ const router = useRouter()
     }
 
     .message-container {
-        color: var(--app-base-text-color);
+        color: var(--app-text-color-primary);
 
         .title {
             font-size: 50px;
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 8c1133271..c5943da23 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -1,17 +1,17 @@
 <template>
   <LayoutContent header="创建数据集" back-to="-1">
     <div class="create-dataset flex main-calc-height">
-      <div class="p-15">
+      <div class="p-24">
         <el-steps :active="active" finish-status="success" align-center>
           <el-step v-for="(item, index) in steps" :key="index" :title="item.name" />
         </el-steps>
       </div>
-      <div class="create-dataset__component p-15">
+      <div class="create-dataset__component p-24">
         <el-scrollbar>
           <component :is="steps[active].component" :ref="steps[active]?.ref" />
         </el-scrollbar>
       </div>
-      <div class="create-dataset__footer text-right p-15 border-t">
+      <div class="create-dataset__footer text-right p-24 border-t">
         <el-button @click="next">取 消</el-button>
         <el-button @click="prev">上一步</el-button>
         <el-button @click="next" type="primary">下一步</el-button>
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index e18afc7de..c271306d1 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="title-decoration-1 mb-10">基本信息</h4>
+  <h4 class="title-decoration-1 mb-8">基本信息</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
     <el-form-item label="数据集名称" prop="name">
       <el-input
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index 558968b48..d0030b2bc 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="title-decoration-1 mb-10">上传文档</h4>
+  <h4 class="title-decoration-1 mb-8">上传文档</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
     <el-form-item prop="fileList">
       <el-upload
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 92583d4d8..85f21ef61 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="dataset-list-container p-15">
+  <div class="dataset-list-container p-24">
     <div class="flex-between">
       <h3>数据集</h3>
       <el-input
         v-model="filterText"
         placeholder="搜索内容"
-        suffix-icon="Search"
+        prefix-icon="Search"
         style="width: 300px"
       />
     </div>
@@ -15,7 +15,7 @@
         v-infinite-scroll="loadDataset"
         :infinite-scroll-disabled="disabledScroll"
       >
-        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-10">
+        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-8">
           <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
         </el-col>
         <el-col
@@ -26,7 +26,7 @@
           :xl="4"
           v-for="(item, index) in datasetList"
           :key="index"
-          class="mt-10"
+          class="mt-8"
         >
           <CardBox :title="item.name" :description="item.desc" class="cursor">
             <template #mouseEnter>
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/SetRules.vue
index 40022731d..96cead40f 100644
--- a/ui/src/views/dataset/step/SetRules.vue
+++ b/ui/src/views/dataset/step/SetRules.vue
@@ -2,7 +2,7 @@
   <div class="set-rules">
     <el-row>
       <el-col :span="12">
-        <h4 class="title-decoration-1 mb-10">分段规则</h4>
+        <h4 class="title-decoration-1 mb-8">分段规则</h4>
         <el-radio-group v-model="radio1" class="set-rules__radio">
           <div>
             <el-radio label="1" size="large">智能分段（推荐）</el-radio>
@@ -17,7 +17,7 @@
       </el-col>
 
       <el-col :span="12">
-        <h4 class="title-decoration-1 mb-10">分段预览</h4>
+        <h4 class="title-decoration-1 mb-8">分段预览</h4>
         <SegmentPreview />
       </el-col>
     </el-row>
diff --git a/ui/src/views/login/forgot-password/index.vue b/ui/src/views/login/forgot-password/index.vue
index 95de7b283..5e1ac546f 100644
--- a/ui/src/views/login/forgot-password/index.vue
+++ b/ui/src/views/login/forgot-password/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h4 class="mb-20">忘记密码</h4>
+      <h4 class="mb-16">忘记密码</h4>
       <el-form
         class="register-form"
         ref="resetPasswordFormRef"
@@ -45,7 +45,7 @@
       <el-button type="primary" class="login-submit-button w-full" @click="checkCode"
         >立即验证</el-button
       >
-      <div class="operate-container mt-10">
+      <div class="operate-container mt-8">
         <el-button
           class="register"
           @click="router.push('/login')"
diff --git a/ui/src/views/login/index.vue b/ui/src/views/login/index.vue
index eeca5aa57..3e93437e4 100644
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@@ -1,6 +1,6 @@
 <template>
   <login-layout v-loading="loading">
-    <LoginContainer subTitle="欢迎使用智能客服管理平台">
+    <LoginContainer subTitle="欢迎使用 MaxKB 管理平台">
       <el-form class="login-form" :rules="rules" :model="loginForm" ref="loginFormRef">
         <el-form-item>
           <el-input
diff --git a/ui/src/views/login/register/index.vue b/ui/src/views/login/register/index.vue
index dc9ee54e1..2f1e8ed0a 100644
--- a/ui/src/views/login/register/index.vue
+++ b/ui/src/views/login/register/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h4 class="mb-20">注册</h4>
+      <h4 class="mb-16">注册</h4>
       <el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
         <el-form-item prop="username">
           <el-input
@@ -80,7 +80,7 @@
       <el-button type="primary" class="login-submit-button w-full" @click="register"
         >注册</el-button
       >
-      <div class="operate-container mt-10">
+      <div class="operate-container mt-8">
         <el-button
           class="register"
           @click="router.push('/login')"
diff --git a/ui/src/views/login/reset-password/index.vue b/ui/src/views/login/reset-password/index.vue
index c5f82785e..0a518387f 100644
--- a/ui/src/views/login/reset-password/index.vue
+++ b/ui/src/views/login/reset-password/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h4 class="mb-20">修改密码</h4>
+      <h4 class="mb-16">修改密码</h4>
       <el-form
         class="reset-password-form"
         ref="resetPasswordFormRef"
@@ -40,7 +40,7 @@
       <el-button type="primary" class="login-submit-button w-full" @click="resetPassword"
         >确认修改</el-button
       >
-      <div class="operate-container mt-10">
+      <div class="operate-container mt-8">
         <el-button
           class="register"
           @click="router.push('/login')"
diff --git a/ui/src/views/setting/component/PermissionSetting.vue b/ui/src/views/setting/component/PermissionSetting.vue
index 37b962cbe..73dcc6955 100644
--- a/ui/src/views/setting/component/PermissionSetting.vue
+++ b/ui/src/views/setting/component/PermissionSetting.vue
@@ -1,4 +1,6 @@
 <template>
+  <el-input v-model="filterText" placeholder="搜索" prefix-icon="Search"  class="mb-16" />
+
   <el-table :data="data" :max-height="tableHeight">
     <el-table-column prop="name" label="数据集名称" />
     <el-table-column label="管理" align="center">
@@ -49,6 +51,8 @@ const allChecked: any = ref({
 
 const tableHeight = ref(0)
 
+const filterText = ref('')
+
 watch(
   () => props.data,
   (val) => {
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index b7998263f..b3b6ba59b 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -1,29 +1,29 @@
 <template>
   <LayoutContent header="团队管理">
     <div class="team-manage flex main-calc-height">
-      <div class="team-member p-15 border-r">
-        <h4>团队成员</h4>
-        <div class="text-right">
+      <div class="team-member p-8 border-r">
+        <div class="flex-between p-16">
+          <h4>成员</h4>
           <el-button type="primary" link @click="addMember">
-            <AppIcon iconName="app-add-users" class="add-user-icon" />添加成员
+            <AppIcon iconName="app-add-users" class="add-user-icon" />
           </el-button>
         </div>
-        <div class="mt-10">
-          <el-input v-model="filterText" placeholder="请输入用户名搜索" suffix-icon="Search" />
+        <div class="team-member-input">
+          <el-input v-model="filterText" placeholder="请输入用户名搜索" prefix-icon="Search" />
         </div>
-        <div class="member-list mt-10" v-loading="loading">
+        <div class="member-list mt-8" v-loading="loading">
           <el-scrollbar>
             <ul v-if="filterMember.length > 0">
               <template v-for="(item, index) in filterMember" :key="index">
                 <li
                   @click.prevent="clickMemberHandle(item.id)"
                   :class="currentUser === item.id ? 'active' : ''"
-                  class="border-b-light flex-between p-15 cursor"
+                  class="flex-between cursor"
                 >
                   <div>
-                    <span class="mr-10">{{ item.username }}</span>
-                    <el-tag effect="dark" v-if="isManage(item.type)">所有者</el-tag>
-                    <el-tag effect="dark" type="warning" v-else>用户</el-tag>
+                    <span class="mr-8">{{ item.username }}</span>
+                    <el-tag v-if="isManage(item.type)" class="default-tag">所有者</el-tag>
+                    <el-tag type="warning" v-else>用户</el-tag>
                   </div>
                   <span @click.stop>
                     <el-dropdown trigger="click" v-if="!isManage(item.type)">
@@ -47,9 +47,9 @@
         </div>
       </div>
       <div class="permission-setting flex" v-loading="rLoading">
-        <div class="team-manage__table p-15">
+        <div class="team-manage__table p-24">
           <h4>权限设置</h4>
-          <el-tabs v-model="activeName" class="demo-tabs">
+          <el-tabs v-model="activeName" class="team-manage__tabs">
             <el-tab-pane
               v-for="item in settingTags"
               :key="item.value"
@@ -61,7 +61,7 @@
           </el-tabs>
         </div>
 
-        <div class="team-manage__footer border-t p-15 flex">
+        <div class="team-manage__footer border-t p-16 flex">
           <el-button type="primary" @click="submitPermissions">保存</el-button>
         </div>
       </div>
@@ -154,13 +154,16 @@ function MemberPermissions(id: String) {
 }
 
 function deleteMember(row: TeamMember) {
-  MsgConfirm({
-    title: `是否移除成员：${row.username}`,
-    decription: '移除后将会取消成员拥有的数据集和应用权限。',
-    confirmButtonText: '移除',
-  }, {
-    confirmButtonClass: 'danger',
-  })
+  MsgConfirm(
+    {
+      title: `是否移除成员：${row.username}`,
+      decription: '移除后将会取消成员拥有的数据集和应用权限。',
+      confirmButtonText: '移除'
+    },
+    {
+      confirmButtonClass: 'danger'
+    }
+  )
     .then(() => {
       loading.value = true
       TeamApi.delTeamMember(row.id)
@@ -214,8 +217,10 @@ onMounted(() => {
 <style lang="scss" scoped>
 .team-manage {
   .add-user-icon {
-    margin-right: 5px;
-    font-size: 20px;
+    font-size: 17px;
+  }
+  .team-member-input {
+    padding: 0 16px;
   }
   .team-member {
     box-sizing: border-box;
@@ -223,21 +228,29 @@ onMounted(() => {
     min-width: var(--team-manage-left-width);
     .member-list {
       li {
+        padding: 11px 16px;
         &.active {
           background: var(--el-color-primary-light-9);
+          border-radius: 4px;
+          color: var(--el-color-primary);
         }
       }
     }
   }
+
   .permission-setting {
     box-sizing: border-box;
     width: calc(100% - var(--team-manage-left-width) - 5px);
     flex-direction: column;
   }
-  .team-manage__table {
+
+  &__tabs {
+    margin-top: 10px;
+  }
+  &__table {
     flex: 1;
   }
-  .team-manage__footer {
+  &__footer {
     flex: 0 0 auto;
     justify-content: right;
   }

From ac09751620d12c1482c9f2e99f52c71beaa7f513 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 3 Nov 2023 16:12:57 +0800
Subject: [PATCH 04/18] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/assets/icon_document.svg      | 12 ++++++++++
 ui/src/components/card-add/index.vue | 36 ++++++++++++++++++----------
 ui/src/components/card-box/index.vue | 15 ++++++++----
 ui/src/styles/app.scss               | 10 ++++++++
 ui/src/styles/element-plus.scss      | 21 +++++-----------
 ui/src/styles/variables.scss         |  9 +++++--
 ui/src/utils/utils.ts                |  8 +++++++
 ui/src/views/dataset/index.vue       | 36 ++++++++++++++++++----------
 8 files changed, 100 insertions(+), 47 deletions(-)
 create mode 100644 ui/src/assets/icon_document.svg
 create mode 100644 ui/src/utils/utils.ts

diff --git a/ui/src/assets/icon_document.svg b/ui/src/assets/icon_document.svg
new file mode 100644
index 000000000..34fe1b36f
--- /dev/null
+++ b/ui/src/assets/icon_document.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_332_3845)">
+<path opacity="0.5" d="M11.5903 10.7326C11.5903 8.64041 13.2864 6.9444 15.3785 6.9444C17.4706 6.9444 19.1667 8.64042 19.1667 10.7326V15.3784C19.1667 17.4705 17.4706 19.1666 15.3785 19.1666C13.2864 19.1666 11.5903 17.4705 11.5903 15.3784V10.7326Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6212 0.833374H14.6211V2.36113H13.1059V0.833374H2.83347C1.72892 0.833374 0.833495 1.72878 0.833474 2.83333L0.833313 11.1665C0.833228 15.5848 4.41497 19.1666 8.83331 19.1666H15.1666C15.5076 19.1666 15.8387 19.1239 16.1547 19.0436C15.2624 18.7368 14.6212 17.8902 14.6212 16.8937V0.833374ZM4.51881 6.35876C4.51881 5.89468 4.89501 5.51848 5.35909 5.51848H10.3457C10.8098 5.51848 11.186 5.89468 11.186 6.35876C11.186 6.82283 10.8098 7.19904 10.3457 7.19904H5.35909C4.89501 7.19904 4.51881 6.82283 4.51881 6.35876ZM5.35909 9.4398C4.89501 9.4398 4.51881 9.816 4.51881 10.2801C4.51881 10.7441 4.89501 11.1204 5.35909 11.1204H10.3457C10.8098 11.1204 11.186 10.7441 11.186 10.2801C11.186 9.816 10.8098 9.4398 10.3457 9.4398H5.35909Z" fill="white"/>
+<ellipse cx="13.1058" cy="2.36108" rx="1.51527" ry="1.52776" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_332_3845">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
index 678322484..159a4bd40 100644
--- a/ui/src/components/card-add/index.vue
+++ b/ui/src/components/card-add/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <el-card shadow="always">
-    <div class="card-add">
-      <AppIcon :iconName="icon" class="add-icon" />
-      <span class="ml-10">{{ title }}</span>
+  <el-card shadow="always" class="card-add">
+    <div class="flex-center">
+      <AppIcon iconName="Plus" class="add-icon" />
+      <span>{{ title }}</span>
     </div>
   </el-card>
 </template>
@@ -12,27 +12,37 @@ defineProps({
   title: {
     type: String,
     default: '标题'
-  },
-  icon: {
-    type: String,
-    default: 'CirclePlusFilled'
   }
 })
 </script>
 <style lang="scss" scoped>
 .card-add {
   width: 100%;
-  min-height: 110px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 15px;
+  font-size: 16px;
   cursor: pointer;
+  min-height: var(--card-min-height);
+  border: 1px dashed var(--el-color-primary);
+  background: #eff0f1;
+  box-shadow: none;
+
+  .add-icon {
+    font-size: 14px;
+    border-radius: 4px;
+    border: 1px solid #bbbfc4;
+    background: #f5f6f7;
+    padding: 8px;
+    margin-right: 12px;
+  }
   &:hover {
     color: var(--el-color-primary);
-  }
-  .add-icon {
-    font-size: 16px;
+    background: #ffffff;
+    .add-icon {
+      background: #ffffff;
+      border-color: var(--el-color-primary);
+    }
   }
 }
 </style>
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index dc04f0651..7a53e97bc 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -3,14 +3,14 @@
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
-          <AppAvatar class="mr-8">
-            <el-icon><Document /></el-icon>
+          <AppAvatar class="mr-12" shape="square" :size="32">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
           </AppAvatar>
           <h4>{{ title }}</h4>
         </div>
       </slot>
     </div>
-    <div class="description mt-8">
+    <div class="description mt-12">
       <slot name="description">
         {{ description }}
       </slot>
@@ -48,7 +48,7 @@ function cardLeave() {
 .card-box {
   font-size: 14px;
   position: relative;
-  min-height: 150px;
+  min-height: var(--card-min-height);
 
   .description {
     display: -webkit-box;
@@ -56,11 +56,16 @@ function cardLeave() {
     -webkit-line-clamp: 2;
     overflow: hidden;
     height: 40px;
+    color: var(--app-text-color-secondary);
+    line-height: 22px;
+    font-weight: 400;
   }
   .card-footer {
     position: absolute;
-    bottom: 0;
+    bottom: 8px;
     min-height: 30px;
+    color: var(--app-text-color-secondary);
+    font-weight: 400;
   }
 }
 </style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 3111214a3..00f833a45 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -87,6 +87,10 @@ h4 {
   font-size: 16px;
 }
 
+.bold {
+  font-weight: 600;
+}
+
 .w-full {
   width: 100%;
 }
@@ -97,6 +101,9 @@ h4 {
 .mt-8 {
   margin-top: 8px;
 }
+.mt-12 {
+  margin-top: 12px;
+}
 .mt-16 {
   margin-top: 16px;
 }
@@ -116,6 +123,9 @@ h4 {
 .mr-8 {
   margin-right: 8px;
 }
+.mr-12 {
+  margin-right: 12px;
+}
 
 .p-8 {
   padding: 8px;
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index cf22a8628..e67c19db0 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -1,6 +1,5 @@
 :root {
   --el-menu-item-height: 45px;
-  --el-text-color-primary: '#1F2329';
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   --el-border-color: rgba(31, 35, 41, 0.15);
 }
@@ -11,11 +10,9 @@
 .el-avatar {
   --el-avatar-bg-color: var(--el-color-primary);
   --el-avatar-size-small: 33px;
+  --el-avatar-border-radius: 8px;
   cursor: pointer;
 }
-.el-popper {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
 
 .el-form {
   --el-form-inline-content-width: 100%;
@@ -35,7 +32,7 @@
   padding-bottom: 24px;
   .app-confirm {
     .app-confirm-title {
-      color: var(--el-text-color-primary);
+      color: var(--app-text-color-primary);
     }
     .icon {
       font-size: 24px;
@@ -49,7 +46,7 @@
 
 .el-message-box__content {
   padding: 24px;
-  color: var(--el-text-color-primary);
+  color: var(--app-text-color-primary);
 }
 .el-message-box__btns {
   padding: 5px 24px 0;
@@ -65,15 +62,8 @@
   }
 }
 
-@media only screen and (min-width: 1200px) {
-  .el-col-lg-5 {
-    display: block;
-    max-width: 25%;
-    flex: 0 0 25%;
-  }
-}
 @media only screen and (min-width: 1400px) {
-  .el-col-lg-5 {
+  .el-col-lg-6 {
     display: block;
     max-width: 20.8333333333%;
     flex: 0 0 20.8333333333%;
@@ -89,7 +79,8 @@
 
 .el-card {
   --el-card-border-radius: 8px;
-  border: none !important;
+  --el-card-padding: 16px;
+  border: 1px solid #ffffff;
 }
 .el-dropdown {
   color: var(--app-text-color-primary);
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 25437dda6..b67edd226 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -1,8 +1,8 @@
 :root {
-  --el-color-primary: rgba(51, 112, 255, 1);
+  --el-color-primary: #3370ff;
   --app-layout-bg-color: #f5f6f7;
   --app-text-color-primary: #1f2329;
-  --app-text-color-secondary: #646A73;
+  --app-text-color-secondary: #646a73;
   --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
 
@@ -17,6 +17,11 @@
   /** tag */
   --tag-deflaut-bg: rgba(51, 112, 255, 0.2);
   --tag-deflaut-color: #2b5fd9;
+  /** card */
+  --card-width: 330px;
+  --card-min-height: 160px;
+  --card-min-width: 220px;
+
   /** team */
   --team-manage-left-width: 280px;
 }
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts
new file mode 100644
index 000000000..f32b4a84f
--- /dev/null
+++ b/ui/src/utils/utils.ts
@@ -0,0 +1,8 @@
+function toThousands(num: any) {
+  return num.toString().replace(/\d+/, function (n: any) {
+    return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+  })
+}
+export function numberFormat(num: number) {
+  return num < 1000 ? toThousands(num) : toThousands((num / 1000).toFixed(1)) + 'k'
+}
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 85f21ef61..115a81462 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -9,20 +9,20 @@
         style="width: 300px"
       />
     </div>
-    <div>
+    <div v-loading.fullscreen.lock="loading">
       <el-row
         :gutter="15"
         v-infinite-scroll="loadDataset"
         :infinite-scroll-disabled="disabledScroll"
       >
-        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-8">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
           <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
         </el-col>
         <el-col
           :xs="24"
           :sm="12"
-          :md="6"
-          :lg="5"
+          :md="8"
+          :lg="6"
           :xl="4"
           v-for="(item, index) in datasetList"
           :key="index"
@@ -30,17 +30,21 @@
         >
           <CardBox :title="item.name" :description="item.desc" class="cursor">
             <template #mouseEnter>
-              <div class="delete-button">
-                <el-button type="primary" link @click.stop="deleteDateset(item)">
+              <el-tooltip effect="dark" content="删除" placement="top">
+                <el-button text @click.stop="deleteDateset(item)" class="delete-button">
                   <el-icon><Delete /></el-icon>
                 </el-button>
-              </div>
+              </el-tooltip>
             </template>
 
             <template #footer>
               <div class="footer-content">
-                {{ item?.document_count || 0 }}文档数 {{ item?.char_length || 0 }}字符数
-                {{ item?.char_length || 0 }}关联应用
+                <span class="bold">{{ item?.document_count || 0 }}</span>
+                文档<el-divider direction="vertical" />
+                <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                字符<el-divider direction="vertical" />
+                <span class="bold">{{ item?.char_length || 0 }}</span>
+                关联应用
               </div>
             </template>
           </CardBox>
@@ -55,6 +59,7 @@ import datasetApi from '@/api/dataset'
 import type { datasetListRequest } from '@/api/type/dataset'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { useRouter } from 'vue-router'
+import { numberFormat } from '@/utils/utils';
 const router = useRouter()
 
 const loading = ref(false)
@@ -73,7 +78,7 @@ function deleteDateset(row: any) {
   MsgConfirm(
     {
       title: `是否删除数据集：${row.name}？`,
-      decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。',
+      decription: `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`,
       confirmButtonText: '删除'
     },
     {
@@ -116,8 +121,15 @@ onMounted(() => {
 .dataset-list-container {
   .delete-button {
     position: absolute;
-    right: 10px;
-    top: 10px;
+    right: 12px;
+    top: 18px;
+    padding: 6px;
+    height: auto;
+  }
+  .footer-content {
+    .bold {
+      color: var(--app-text-color-primary);
+    }
   }
 }
 </style>

From 59f88f811616061c46e4002e3feb72569445ffbe Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 3 Nov 2023 17:45:01 +0800
Subject: [PATCH 05/18] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/back-button/index.vue       |  8 +++-
 ui/src/components/index.ts                    |  5 +--
 .../index.vue}                                | 13 +++---
 ui/src/styles/app.scss                        |  7 ++--
 ui/src/styles/element-plus.scss               | 14 +++++++
 ui/src/views/dataset/CreateDataset.vue        | 42 +++++++++++++++----
 ui/src/views/dataset/component/BaseForm.vue   |  2 +-
 ui/src/views/setting/index.vue                |  4 +-
 8 files changed, 68 insertions(+), 27 deletions(-)
 rename ui/src/components/{content-container/LayoutContent.vue => layout-container/index.vue} (72%)

diff --git a/ui/src/components/back-button/index.vue b/ui/src/components/back-button/index.vue
index 4ca5d64e1..9f52e8475 100644
--- a/ui/src/components/back-button/index.vue
+++ b/ui/src/components/back-button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-icon class="back-button cursor mr-8 vertical-middle" @click="jump">
+  <el-icon class="back-button cursor mr-8" @click="jump">
     <Back />
   </el-icon>
 </template>
@@ -22,4 +22,8 @@ function jump() {
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.back-button {
+  font-size:20px;
+}
+</style>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 370f1a95a..5453020d8 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -3,20 +3,19 @@ import AppIcon from './icons/AppIcon.vue'
 import AppAvatar from './app-avatar/index.vue'
 import LoginLayout from './login-layout/index.vue'
 import LoginContainer from './login-container/index.vue'
-import LayoutContent from './content-container/LayoutContent.vue'
+import LayoutContainer from './layout-container/index.vue'
 import TagsInput from './tags-input/index.vue'
 import CardBox from './card-box/index.vue'
 import CardAdd from './card-add/index.vue'
 import BackButton from './back-button/index.vue'
 
-
 export default {
   install(app: App) {
     app.component(AppIcon.name, AppIcon)
     app.component(AppAvatar.name, AppAvatar)
     app.component(LoginLayout.name, LoginLayout)
     app.component(LoginContainer.name, LoginContainer)
-    app.component(LayoutContent.name, LayoutContent)
+    app.component(LayoutContainer.name, LayoutContainer)
     app.component(TagsInput.name, TagsInput)
     app.component(CardBox.name, CardBox)
     app.component(CardAdd.name, CardAdd)
diff --git a/ui/src/components/content-container/LayoutContent.vue b/ui/src/components/layout-container/index.vue
similarity index 72%
rename from ui/src/components/content-container/LayoutContent.vue
rename to ui/src/components/layout-container/index.vue
index 9d30a63bf..97a356c55 100644
--- a/ui/src/components/content-container/LayoutContent.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="content-container">
-    <div class="content-container__header mt-16 mb-16" v-if="slots.header || header">
-      <slot name="header">
-        <back-button :to="backTo" v-if="showBack"></back-button>
-        <h2 class="vertical-middle">{{ header }}</h2>
-      </slot>
+    <div class="content-container__header flex align-center" v-if="slots.header || header">
+      <back-button :to="backTo" v-if="showBack"></back-button>
+      <h3>{{ header }}</h3>
+      <slot name="header"> </slot>
     </div>
     <el-scrollbar>
       <div class="content-container__main main-calc-height">
@@ -16,7 +15,7 @@
 
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
-defineOptions({ name: 'LayoutContent' })
+defineOptions({ name: 'LayoutContainer' })
 const slots = useSlots()
 const props = defineProps({
   header: String,
@@ -34,6 +33,8 @@ const showBack = computed(() => {
   padding: 0 var(--app-view-padding) var(--app-view-padding);
   .content-container__header {
     box-sizing: border-box;
+    padding: 16px 0;
+    flex-wrap: wrap;
   }
   .content-container__main {
     background-color: var(--app-view-bg-color);
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 00f833a45..af2fbd2da 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -202,17 +202,16 @@ h4 {
 // 标题前带竖线样式
 .title-decoration-1 {
   position: relative;
-  padding-left: 15px;
+  padding-left: 12px;
   &:before {
     position: absolute;
     left: 2px;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 4px;
-    height: 90%;
+    width: 2px;
+    height: 80%;
     content: '';
     background: var(--el-color-primary);
-    border-radius: 10px;
   }
 }
 
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index e67c19db0..98f491491 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -102,6 +102,20 @@
   }
 }
 
+// el-steps
+.el-step__icon {
+  background: none;
+}
+.el-step__head.is-process {
+  .el-step__icon {
+    &.is-text {
+      color: #ffffff;
+      border-color: var(--el-color-primary) !important;
+      background: var(--el-color-primary) !important;
+    }
+  }
+}
+
 // 抽屉样式整体修改
 .el-drawer {
   .el-drawer__header {
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index c5943da23..73eeee416 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -1,11 +1,20 @@
 <template>
-  <LayoutContent header="创建数据集" back-to="-1">
-    <div class="create-dataset flex main-calc-height">
-      <div class="p-24">
-        <el-steps :active="active" finish-status="success" align-center>
-          <el-step v-for="(item, index) in steps" :key="index" :title="item.name" />
-        </el-steps>
-      </div>
+  <LayoutContainer header="创建数据集" back-to="-1" class="create-dataset">
+    <template #header>
+      <el-steps :active="active" finish-status="success" align-center class="create-dataset__steps">
+        <el-step v-for="(item, index) in steps" :key="index">
+          <template #icon>
+            <div class="app-step">
+              <div class="el-step__icon is-text">
+                <div class="el-step__icon-inner">{{ index + 1 }}</div>
+              </div>
+              {{ item.name }}
+            </div>
+          </template>
+        </el-step>
+      </el-steps>
+    </template>
+    <div class="create-dataset__main flex main-calc-height">
       <div class="create-dataset__component p-24">
         <el-scrollbar>
           <component :is="steps[active].component" :ref="steps[active]?.ref" />
@@ -18,7 +27,7 @@
         <el-button @click="next" type="primary">开始导入</el-button>
       </div>
     </div>
-  </LayoutContent>
+  </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
@@ -51,7 +60,22 @@ const prev = () => {}
 </script>
 <style lang="scss" scoped>
 .create-dataset {
-  flex-direction: column;
+  &__steps {
+    min-width: 450px;
+    max-width: 800px;
+    width: 80%;
+    margin: 0 auto;
+    padding-right: 60px;
+
+    :deep(.el-step__line) {
+      left: 64% !important;
+      right: -33% !important;
+    }
+  }
+  &__main {
+    flex-direction: column;
+  }
+
   // height: 100%;
   &__component {
     flex: 1;
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index c271306d1..6ddac88d5 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="title-decoration-1 mb-8">基本信息</h4>
+  <h4 class="title-decoration-1 mb-16">基本信息</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
     <el-form-item label="数据集名称" prop="name">
       <el-input
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index b3b6ba59b..525cd60d8 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutContent header="团队管理">
+  <LayoutContainer header="团队管理">
     <div class="team-manage flex main-calc-height">
       <div class="team-member p-8 border-r">
         <div class="flex-between p-16">
@@ -67,7 +67,7 @@
       </div>
     </div>
     <CreateMemberDialog ref="CreateMemberRef" @refresh="refresh" />
-  </LayoutContent>
+  </LayoutContainer>
 </template>
 
 <script lang="ts" setup>

From d9cc20bdd31fae49b928cc5c737c79838183f77c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 6 Nov 2023 19:06:02 +0800
Subject: [PATCH 06/18] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/assets/md-icon.svg                     |   5 +
 ui/src/assets/txt-icon.svg                    |   7 +
 ui/src/assets/upload-icon.svg                 |   6 +
 ui/src/components/card-add/index.vue          |   5 +-
 ui/src/components/layout-container/index.vue  |   9 +-
 .../layout/components/sidebar/SidebarItem.vue |   8 +-
 ui/src/layout/main-layout/index.vue           |   3 +-
 ui/src/router/modules/dataset.ts              |   6 +
 ui/src/styles/app.scss                        |  19 +
 ui/src/styles/element-plus.scss               |  30 +-
 ui/src/styles/variables.scss                  |   2 +-
 ui/src/utils/utils.ts                         |  23 ++
 ui/src/views/dataset/CreateDataset.vue        |  17 +-
 .../dataset/component/SegmentPreview.vue      |  89 ++++-
 .../dataset/component/UploadComponent.vue     |  65 +++-
 ui/src/views/dataset/step/SetRules.vue        | 330 +++++++++++++++++-
 ui/src/views/dataset/step/UploadDocument.vue  |  13 +-
 17 files changed, 554 insertions(+), 83 deletions(-)
 create mode 100644 ui/src/assets/md-icon.svg
 create mode 100644 ui/src/assets/txt-icon.svg
 create mode 100644 ui/src/assets/upload-icon.svg

diff --git a/ui/src/assets/md-icon.svg b/ui/src/assets/md-icon.svg
new file mode 100644
index 000000000..7b35a9242
--- /dev/null
+++ b/ui/src/assets/md-icon.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="42" viewBox="0 0 40 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66663 5.16667C6.66663 4.24619 7.41282 3.5 8.33329 3.5H24.6548C24.8758 3.5 25.0878 3.5878 25.244 3.74408L33.0892 11.5893C33.2455 11.7455 33.3333 11.9575 33.3333 12.1785V36.8333C33.3333 37.7538 32.5871 38.5 31.6666 38.5H8.33329C7.41282 38.5 6.66663 37.7538 6.66663 36.8333V5.16667Z" fill="#14C0FF"/>
+<path d="M10 29.2051V21H12.0513L15.1282 24.0769L18.2051 21H20.2564V29.2051H18.2051V23.9026L15.1282 26.9795L12.0513 23.9026V29.2051H10ZM24.359 21H27.4359V25.1026H30L25.8974 29.7179L21.7949 25.1026H24.359V21Z" fill="white"/>
+<path d="M25 3.57495C25.09 3.6159 25.1728 3.67292 25.2441 3.74418L33.0893 11.5894C33.1605 11.6606 33.2175 11.7434 33.2585 11.8334H26.6667C25.7462 11.8334 25 11.0872 25 10.1668V3.57495Z" fill="#11A3D9"/>
+</svg>
diff --git a/ui/src/assets/txt-icon.svg b/ui/src/assets/txt-icon.svg
new file mode 100644
index 000000000..051ea2bda
--- /dev/null
+++ b/ui/src/assets/txt-icon.svg
@@ -0,0 +1,7 @@
+<svg width="40" height="42" viewBox="0 0 40 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66699 5.16667C6.66699 4.24619 7.41318 3.5 8.33366 3.5H24.6551C24.8762 3.5 25.0881 3.5878 25.2444 3.74408L33.0896 11.5893C33.2459 11.7455 33.3337 11.9575 33.3337 12.1785V36.8333C33.3337 37.7538 32.5875 38.5 31.667 38.5H8.33366C7.41318 38.5 6.66699 37.7538 6.66699 36.8333V5.16667Z" fill="#3370FF"/>
+<path d="M25.0532 21.8466H22.9132V20.5266H28.7632V21.8466H26.6232V27.6666H25.0532V21.8466Z" fill="white"/>
+<path d="M18.5533 23.9266L16.2533 20.5266H18.0733L19.4733 22.8066L20.9233 20.5266H22.6433L20.3533 23.9366L22.8433 27.6666H20.9733L19.4133 25.1966L17.8233 27.6666H16.0633L18.5533 23.9266Z" fill="white"/>
+<path d="M12.27 21.8466H10.13V20.5266H15.98V21.8466H13.84V27.6666H12.27V21.8466Z" fill="white"/>
+<path d="M25 3.57495C25.09 3.6159 25.1728 3.67292 25.2441 3.74418L33.0893 11.5894C33.1605 11.6606 33.2175 11.7434 33.2585 11.8334H26.6667C25.7462 11.8334 25 11.0872 25 10.1668V3.57495Z" fill="#2B5FD9"/>
+</svg>
diff --git a/ui/src/assets/upload-icon.svg b/ui/src/assets/upload-icon.svg
new file mode 100644
index 000000000..3a2466c20
--- /dev/null
+++ b/ui/src/assets/upload-icon.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.0404 11.3738C33.2279 11.5614 33.3333 11.8157 33.3333 12.0809V34.8149C33.3333 35.8376 32.5374 36.6667 31.5555 36.6667H8.4444C7.46256 36.6667 6.66663 35.8376 6.66663 34.8149V5.18523C6.66663 4.16248 7.46256 3.33337 8.4444 3.33337H24.5857C24.851 3.33337 25.1053 3.43873 25.2929 3.62627L33.0404 11.3738Z" fill="#3370FF"/>
+<path d="M20.6509 15.8135C20.3173 15.3965 19.683 15.3965 19.3494 15.8135L14.4166 21.9795C13.9801 22.5251 14.3686 23.3334 15.0673 23.3334H18.3335V26.6667H21.6668V23.3334H24.9329C25.6317 23.3334 26.0202 22.5251 25.5837 21.9795L20.6509 15.8135Z" fill="white"/>
+<path d="M18.3335 30.0001V28.3334H21.6668V30.0001H18.3335Z" fill="white"/>
+<path d="M25 3.33337L33.3333 11.6667H26.6667C25.7462 11.6667 25 10.9205 25 10V3.33337Z" fill="#2B5FD9"/>
+</svg>
diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
index 159a4bd40..a842b1821 100644
--- a/ui/src/components/card-add/index.vue
+++ b/ui/src/components/card-add/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="always" class="card-add">
+  <el-card shadow="never" class="card-add">
     <div class="flex-center">
       <AppIcon iconName="Plus" class="add-icon" />
       <span>{{ title }}</span>
@@ -26,13 +26,12 @@ defineProps({
   min-height: var(--card-min-height);
   border: 1px dashed var(--el-color-primary);
   background: #eff0f1;
-  box-shadow: none;
 
   .add-icon {
     font-size: 14px;
     border-radius: 4px;
     border: 1px solid #bbbfc4;
-    background: #f5f6f7;
+    background: var(--app-layout-bg-color);
     padding: 8px;
     margin-right: 12px;
   }
diff --git a/ui/src/components/layout-container/index.vue b/ui/src/components/layout-container/index.vue
index 97a356c55..b548756b3 100644
--- a/ui/src/components/layout-container/index.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -5,11 +5,10 @@
       <h3>{{ header }}</h3>
       <slot name="header"> </slot>
     </div>
-    <el-scrollbar>
-      <div class="content-container__main main-calc-height">
-        <slot></slot>
-      </div>
-    </el-scrollbar>
+
+    <div class="content-container__main">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index d9f6b1ca9..ca5a9f025 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -2,7 +2,11 @@
   <div v-if="!menu.meta || !menu.meta.hidden" class="sidebar-item">
     <el-menu-item ref="subMenu" :index="menu.path" popper-class="sidebar-popper">
       <template #title>
-        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menu.meta.icon" class="sidebar-icon"/>
+        <AppIcon
+          v-if="menu.meta && menu.meta.icon"
+          :iconName="menu.meta.icon"
+          class="sidebar-icon"
+        />
         <span v-if="menu.meta && menu.meta.title">{{ menu.meta.title }}</span>
       </template>
     </el-menu-item>
@@ -31,7 +35,7 @@ defineProps<{
 
   .el-menu-item.is-active {
     color: var(--el-menu-active-color);
-    background: rgba(51, 112, 255, 0.1);
+    background: var(--el-color-primary-light-9);
   }
 }
 </style>
diff --git a/ui/src/layout/main-layout/index.vue b/ui/src/layout/main-layout/index.vue
index 222cbf7ab..38aaabd4c 100644
--- a/ui/src/layout/main-layout/index.vue
+++ b/ui/src/layout/main-layout/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="main-layout h-full flex">
-    <div class="sidebar-container"><Sidebar /></div>
+    <div class="sidebar-container">
+      <Sidebar /></div>
     <div class="view-container">
       <AppMain />
     </div>
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index 071e4d854..bef4e80d9 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -30,6 +30,12 @@ const datasetRouter = {
           name: 'DatasetDoc',
           meta: { icon: 'House', title: '文档' },
           component: () => import('@/views/dataset/DatasetDoc.vue')
+        },
+        {
+          path: '/dataset/doc',
+          name: 'DatasetDoc',
+          meta: { icon: 'House', title: '设置' },
+          component: () => import('@/views/dataset/DatasetDoc.vue')
         }
       ]
     }
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index af2fbd2da..113630a66 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -90,6 +90,9 @@ h4 {
 .bold {
   font-weight: 600;
 }
+.lighter {
+  font-weight: 400;
+}
 
 .w-full {
   width: 100%;
@@ -114,6 +117,9 @@ h4 {
   margin-bottom: 16px;
 }
 
+.ml-4 {
+  margin-left: 4px;
+}
 .ml-8 {
   margin-left: 8px;
 }
@@ -126,6 +132,9 @@ h4 {
 .mr-12 {
   margin-right: 12px;
 }
+.mr-16 {
+  margin-right: 16px;
+}
 
 .p-8 {
   padding: 8px;
@@ -168,6 +177,10 @@ h4 {
   vertical-align: middle;
 }
 
+.border-l {
+  border-left: 1px solid var(--el-border-color);
+}
+
 .border-b {
   border-bottom: 1px solid var(--el-border-color);
 }
@@ -230,3 +243,9 @@ h4 {
   background: var(--tag-deflaut-bg);
   color: var(--tag-deflaut-color);
 }
+
+// card 无边框无阴影
+.card-never {
+  background: var(--app-layout-bg-color);
+  border: none;
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 98f491491..8fe0f580d 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -1,4 +1,6 @@
 :root {
+  --el-color-primary: #3370ff;
+  --el-color-primary-light-9: rgba(51, 112, 255, 0.1);
   --el-menu-item-height: 45px;
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   --el-border-color: rgba(31, 35, 41, 0.15);
@@ -80,7 +82,6 @@
 .el-card {
   --el-card-border-radius: 8px;
   --el-card-padding: 16px;
-  border: 1px solid #ffffff;
 }
 .el-dropdown {
   color: var(--app-text-color-primary);
@@ -90,7 +91,7 @@
   --el-tag-border-radius: 2px;
 }
 .el-table {
-  --el-table-header-bg-color: #f5f6f7;
+  --el-table-header-bg-color: var(--app-layout-bg-color);
 }
 .el-table {
   --el-table-text-color: var(--app-text-color-primary);
@@ -116,21 +117,14 @@
   }
 }
 
-// 抽屉样式整体修改
-.el-drawer {
-  .el-drawer__header {
-    padding: 0;
-    margin: 0 24px;
-    height: 56px;
-    border-bottom: 1px solid var(--el-border-color);
-    .el-drawer__title {
-      color: #1f2329;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-    }
-  }
-  .el-drawer__body {
-    --el-drawer-padding-primary: 24px;
+.el-text {
+  font-weight: 400;
+  &.el-text--info {
+    color: var(--app-text-color-secondary);
   }
 }
+
+.el-scrollbar {
+  overflow-x: hidden;
+
+}
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index b67edd226..d038f9404 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -1,7 +1,7 @@
 :root {
-  --el-color-primary: #3370ff;
   --app-layout-bg-color: #f5f6f7;
   --app-text-color-primary: #1f2329;
+  --app-text-color-primary-light-1: rgba(31, 35, 41, 0.1);
   --app-text-color-secondary: #646a73;
   --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts
index f32b4a84f..8e63cb86e 100644
--- a/ui/src/utils/utils.ts
+++ b/ui/src/utils/utils.ts
@@ -6,3 +6,26 @@ function toThousands(num: any) {
 export function numberFormat(num: number) {
   return num < 1000 ? toThousands(num) : toThousands((num / 1000).toFixed(1)) + 'k'
 }
+
+export function filesize(size: number) {
+  if (!size) return ''
+  const num = 1024.0 //byte
+
+  if (size < num) return size + 'B'
+  if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + 'K' //kb
+  if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + 'M' //M
+  if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + 'G' //G
+  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/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 73eeee416..5bc53d76d 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -16,9 +16,7 @@
     </template>
     <div class="create-dataset__main flex main-calc-height">
       <div class="create-dataset__component p-24">
-        <el-scrollbar>
-          <component :is="steps[active].component" :ref="steps[active]?.ref" />
-        </el-scrollbar>
+        <component :is="steps[active].component" :ref="steps[active]?.ref" />
       </div>
       <div class="create-dataset__footer text-right p-24 border-t">
         <el-button @click="next">取 消</el-button>
@@ -35,15 +33,15 @@ import UploadDocument from './step/UploadDocument.vue'
 import SetRules from './step/SetRules.vue'
 
 const steps = [
-  {
-    ref: 'UploadDocumentRef',
-    name: '上传文档',
-    component: UploadDocument
-  },
   {
     ref: 'SetRulesRef',
     name: '设置分段规则',
     component: SetRules
+  },
+  {
+    ref: 'UploadDocumentRef',
+    name: '上传文档',
+    component: UploadDocument
   }
 ]
 
@@ -80,9 +78,10 @@ const prev = () => {}
   &__component {
     flex: 1;
     flex-basis: auto;
-    min-width: 70%;
+    width: 100%;
     margin: 0 auto;
     overflow: hidden;
+    box-sizing: border-box;
   }
   &__footer {
     flex: 0 0 auto;
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/SegmentPreview.vue
index c5885219d..682fd4f20 100644
--- a/ui/src/views/dataset/component/SegmentPreview.vue
+++ b/ui/src/views/dataset/component/SegmentPreview.vue
@@ -1,20 +1,57 @@
 <template>
-  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="User" name="first">
-      <div>
-        
-      </div>
-
-    </el-tab-pane>
-    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
-    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
-    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+  <el-tabs v-model="activeName" class="segment-tabs" @tab-click="handleClick">
+    <template v-for="(item, index) in data" :key="index">
+      <el-tab-pane :label="item.name" :name="index">
+        <template #label>
+          <div class="flex">
+            <img :src="getImgUrl(item && item?.name)" alt="" height="22" />
+            <span class="ml-4">{{ item?.name }}</span>
+          </div>
+        </template>
+        <el-scrollbar>
+          <div class="segment-list">
+            <el-card
+              v-for="(child, i) in item.content"
+              :key="i"
+              shadow="never"
+              class="card-never mb-16"
+            >
+              <div class="flex-between">
+                <span>{{ child.title }}</span>
+                <div>
+                  <el-button link>
+                    <el-icon><Edit /></el-icon>
+                  </el-button>
+                  <el-button link>
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+              <div class="lighter mt-12">
+                {{ child.content }}
+              </div>
+              <div class="lighter mt-12">
+                <el-text type="info"> {{ child.content.length }} 个字符 </el-text>
+              </div>
+            </el-card>
+          </div>
+        </el-scrollbar>
+      </el-tab-pane>
+    </template>
   </el-tabs>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
-const activeName = ref('first')
+import { filesize, getImgUrl } from '@/utils/utils'
+defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  }
+})
+
+const activeName = ref(0)
 onMounted(() => {})
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
@@ -22,9 +59,33 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 }
 </script>
 <style scoped lang="scss">
-.set-rules {
-  &__radio {
-    display: block;
+.segment-tabs {
+  :deep(.el-tabs__item) {
+    background: var(--app-text-color-primary-light-1);
+    margin: 4px;
+    border-radius: 4px;
+    padding: 5px 10px 5px 8px !important;
+    height: auto;
+    &:nth-child(2) {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    &.is-active {
+      border: 1px solid var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+      color: var(--el-text-color-primary);
+    }
+  }
+  :deep(.el-tabs__nav-wrap::after) {
+    display: none;
+  }
+  :deep(.el-tabs__active-bar) {
+    display: none;
   }
 }
+.segment-list {
+  height: calc(100vh - 340px);
+}
 </style>
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index d0030b2bc..3ec7c1e1f 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -9,30 +9,51 @@
         v-model:file-list="form.fileList"
         action="#"
         :auto-upload="false"
+        :show-file-list="false"
+        accept=".txt, .md"
       >
+        <img src="@/assets/upload-icon.svg" alt="" />
         <div class="el-upload__text">
           <p>
-            拖拽文件到此上传或
-            <em>
-              选择文件
-              <el-icon style="font-size: 25px"><upload-filled /></el-icon>
-            </em>
+            将文件拖拽至此区域或
+            <em> 选择文件上传 </em>
           </p>
           <div class="upload__decoration">
-            <p>1. 当前支持TXT、Markdown文本文件。</p>
-            <p>2. 每次最多上传50个文档，每个文档最大不能超过10MB。</p>
-            <p>3. 系统会对文档进行分段处理，若使用【高级分段】建议上传文档前规范文档的分段标识。</p>
+            <p>支持格式：TXT、Markdown，每次最多上传50个文件，每个文件不超过 10MB</p>
+            <p>若使用【高级分段】建议上传前规范文件的分段标识</p>
           </div>
         </div>
       </el-upload>
     </el-form-item>
   </el-form>
-  <p>文档列表</p>
+  <el-row :gutter="8" v-if="form.fileList?.length">
+    <template v-for="(item, index) in form.fileList" :key="index">
+      <el-col :span="12" class="mb-8">
+        <el-card shadow="never" class="file-List-card">
+          <div class="flex-between">
+            <div class="flex">
+              <img :src="getImgUrl(item && item?.name)" alt="" />
+              <div class="ml-8">
+                <p>{{ item && item?.name }}</p>
+                <el-text type="info">{{ filesize(item && item?.size) }}</el-text>
+              </div>
+            </div>
+            <el-button text @click="deleteFlie(index)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </template>
+  </el-row>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
+import type { UploadProps } from 'element-plus'
+import { filesize, getImgUrl } from '@/utils/utils'
+import { MsgError } from '@/utils/message'
 const form = reactive({
-  fileList: []
+  fileList: [] as any
 })
 
 const rules = reactive({
@@ -40,6 +61,23 @@ const rules = reactive({
 })
 const FormRef = ref()
 
+
+// const beforeUploadHandle: UploadProps['beforeUpload'] = (rawFile) => {
+//   const type = fileType(rawFile?.name)
+//   console.log(type)
+//   if (type !== 'txt' || type !== 'md') {
+//     MsgError('Avatar picture must be JPG format!')
+//     return false
+//   } else if (rawFile.size / 1024 / 1024 > 10) {
+//     MsgError('文件不超过 10MB!')
+//     return false
+//   }
+//   return true
+// }
+function deleteFlie(index: number) {
+  form.fileList.splice(index, 1)
+}
+
 // 表单校验
 function validate() {
   if (!FormRef.value) return
@@ -47,7 +85,6 @@ function validate() {
     return valid
   })
 }
-
 onMounted(() => {})
 
 defineExpose({
@@ -56,6 +93,12 @@ defineExpose({
 })
 </script>
 <style scoped lang="scss">
+.file-List-card {
+  border-radius: 4px;
+  :deep(.el-card__body) {
+    padding: 8px 16px 8px 12px;
+  }
+}
 .upload__decoration {
   font-size: 12px;
   line-height: 20px;
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/SetRules.vue
index 96cead40f..0befed6ed 100644
--- a/ui/src/views/dataset/step/SetRules.vue
+++ b/ui/src/views/dataset/step/SetRules.vue
@@ -2,42 +2,317 @@
   <div class="set-rules">
     <el-row>
       <el-col :span="12">
-        <h4 class="title-decoration-1 mb-8">分段规则</h4>
-        <el-radio-group v-model="radio1" class="set-rules__radio">
-          <div>
-            <el-radio label="1" size="large">智能分段（推荐）</el-radio>
+        <h4 class="title-decoration-1 mb-8">设置分段规则</h4>
+
+        <div class="mr-16">
+          <el-scrollbar>
+            <div class="right-height">
+              <el-radio-group v-model="radio" class="set-rules__radio">
+                <el-radio label="1" size="large" border class="mb-16">
+                  <p>智能分段（推荐)</p>
+                  <el-text type="info">不了解如何设置分段规则推荐使用智能分段</el-text>
+                </el-radio>
+                <el-radio label="2" size="large" border class="mb-16">
+                  <p>高级分段</p>
+                  <el-text type="info"
+                    >用户可根据文档规范自行设置分段标识符、分段长度以及清洗规则
+                  </el-text>
+                  <el-card shadow="never" class="card-never mt-16" v-if="radio === '2'">
+                    <el-form label-position="top" label-width="100px" :model="form">
+                      <el-form-item label="分段标识">
+                        <el-select
+                          v-model="form.name"
+                          multiple
+                          placeholder="请选择"
+                          style="width: 240px"
+                        >
+                          <el-option
+                            v-for="item in options"
+                            :key="item"
+                            :label="item"
+                            :value="item"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item label="分段长度">
+                        <el-slider v-model="form.name" show-input />
+                      </el-form-item>
+                      <el-form-item label="自动清洗">
+                        <el-switch v-model="form.name" />
+                      </el-form-item>
+                    </el-form>
+                  </el-card>
+                </el-radio>
+              </el-radio-group>
+            </div>
+          </el-scrollbar>
+          <div class="text-right">
+            <el-button @click="splitDocument">生成预览</el-button>
           </div>
-          <div>
-            <el-radio label="2" size="large">高级分段</el-radio>
-          </div>
-        </el-radio-group>
-        <div>
-          <el-button @click="splitDocument">生成预览</el-button>
         </div>
       </el-col>
 
-      <el-col :span="12">
-        <h4 class="title-decoration-1 mb-8">分段预览</h4>
-        <SegmentPreview />
+      <el-col :span="12" class="border-l">
+        <div class="ml-16">
+          <h4 class="title-decoration-1 mb-8">分段预览</h4>
+          <SegmentPreview :data="segmentList" />
+        </div>
       </el-col>
     </el-row>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, reactive } from 'vue'
 import SegmentPreview from '@/views/dataset/component/SegmentPreview.vue'
 import DatasetApi from '@/api/dataset'
 import useStore from '@/stores'
 const { dataset } = useStore()
 const documentsFiles = computed(() => dataset.documentsFiles)
 
-const radio1 = ref('1')
+const radio = ref('1')
 const loading = ref(false)
+const segmentList = ref<any[]>([
+  {
+    name: '1Panel.txt',
+    content: [
+      {
+        title: '\n\n1Panel \u7684\u529f\u80fd\u548c\u4f18\u52bf\u5305\u62ec\uff1a',
+        content:
+          '\u5feb\u901f\u5efa\u7ad9\uff1a\u6df1\u5ea6\u96c6\u6210 Wordpress \u548c Halo\uff0c\u57df\u540d\u7ed1\u5b9a\u3001SSL \u8bc1\u4e66\u914d\u7f6e\u7b49\u4e00\u952e\u641e\u5b9a\uff1b\u9ad8\u6548\u7ba1\u7406\uff1a\u901a\u8fc7 Web \u7aef\u8f7b\u677e\u7ba1\u7406 Linux \u670d\u52a1\u5668\uff0c\u5305\u62ec\u4e3b\u673a\u76d1\u63a7\u3001\u6587\u4ef6\u7ba1\u7406\u3001\u6570\u636e\u5e93\u7ba1\u7406\u3001\u5bb9\u5668\u7ba1\u7406\u7b49\uff1b\u5b89\u5168\u53ef\u9760\uff1a\u57fa\u4e8e\u5bb9\u5668\u6765\u7ba1\u7406\u548c\u90e8\u7f72\u5e94\u7528\uff0c\u6700\u5c0f\u6f0f\u6d1e\u66b4\u9732\u9762\uff0c\u63d0\u4f9b\u9632\u706b\u5899\u548c\u65e5\u5fd7\u5ba1\u8ba1\u7b49\u529f\u80fd\uff1b\u4e00\u952e\u5907\u4efd\uff1a\u652f\u6301\u4e00\u952e\u5907\u4efd\u548c\u6062\u590d\uff0c\u5907\u4efd\u6570\u636e\u5230\u5404\u7c7b\u4e91\u7aef\u5b58\u50a8\uff0c\u6c38\u4e0d\u4e22\u5931\u3002'
+      },
+      {
+        title: '\n\n1Panel \u5728\u7ebf\u5b89\u88c5\uff1a',
+        content:
+          '1.\u73af\u5883\u8981\u6c42\u5b89\u88c5\u524d\u8bf7\u786e\u4fdd\u60a8\u7684\u7cfb\u7edf\u7b26\u5408\u5b89\u88c5\u6761\u4ef6\uff1a\u64cd\u4f5c\u7cfb\u7edf\uff1a\u652f\u6301\u4e3b\u6d41 Linux \u53d1\u884c\u7248\u672c\uff08\u57fa\u4e8e Debian / RedHat\uff0c\u5305\u62ec\u56fd\u4ea7\u64cd\u4f5c\u7cfb\u7edf\uff09\uff1b\u670d\u52a1\u5668\u67b6\u6784\uff1ax86_64\u3001aarch64\u3001armv7l\u3001ppc64le\u3001s390x\uff1b\u5185\u5b58\u8981\u6c42\uff1a\u5efa\u8bae\u53ef\u7528\u5185\u5b58\u5728 1GB \u4ee5\u4e0a\uff1b\u6d4f\u89c8\u5668\u8981\u6c42\uff1a\u8bf7\u4f7f\u7528 Chrome\u3001FireFox\u3001IE10+\u3001Edge\u7b49\u73b0\u4ee3\u6d4f\u89c8\u5668\uff1b\u53ef\u8bbf\u95ee\u4e92\u8054\u7f51\u3002'
+      },
+      {
+        title: '\n\ncloudExplorer \u5728\u7ebf\u5b89\u88c5\uff1a',
+        content:
+          '1.\u73af\u5883\u8981\u6c42\u6309\u7167\u90e8\u7f72\u670d\u52a1\u5668\u8981\u6c42\u51c6\u5907\u597d\u90e8\u7f72\u73af\u5883\u540e\uff0c\u53ef\u901a\u8fc7 CloudExplorer Lite \u5feb\u901f\u5b89\u88c5\u811a\u672c\u4e00\u952e\u5feb\u901f\u90e8\u7f72\u3002**\u6ce8\u610f\uff1a** \u4e00\u952e\u5b89\u88c5\u91c7\u7528\u9ed8\u8ba4\u53c2\u6570\uff0c\u66f4\u591a\u6709\u5173\u79bb\u7ebf\u90e8\u7f72\u65b9\u5f0f\u53ef\u67e5\u770b\u672c\u6587\u6863\u7684\u3010\u79bb\u7ebf\u5b89\u88c5\u3011\u30022.\u5b89\u88c5\u90e8\u7f72GitHub release \u94fe\u63a5: https://github.com/1Panel-dev/1Panel/releasesRedHat / CentOS\uff0c curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sh quick_start.shUbuntu\uff0ccurl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.shDebian\uff0ccurl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh\u5b89\u88c5\u6210\u529f\u540e\uff0c\u63a7\u5236\u53f0\u4f1a\u6253\u5370\u9762\u677f\u8bbf\u95ee\u4fe1\u606f\uff0c\u53ef\u901a\u8fc7\u6d4f\u89c8\u5668\u8bbf\u95ee 1Panel\uff1ahttp://\u76ee\u6807\u670d\u52a1\u5668 IP \u5730\u5740:\u76ee\u6807\u7aef\u53e3/\u5b89\u5168\u5165\u53e3\u3002\u5982\u679c\u4f7f\u7528\u7684\u662f\u4e91\u670d\u52a1\u5668\uff0c\u8bf7\u81f3\u5b89\u5168\u7ec4\u5f00\u653e\u76ee\u6807\u7aef\u53e3\u3002ssh \u767b\u5f55 1Panel \u670d\u52a1\u5668\u540e\uff0c\u6267\u884c 1pctl user-info \u547d\u4ee4\u53ef\u83b7\u53d6\u5b89\u5168\u5165\u53e3\uff08entrance\uff09\u3002\u5b89\u88c5\u6210\u529f\u540e\uff0c\u53ef\u4f7f\u7528 1pctl \u547d\u4ee4\u884c\u5de5\u5177\u6765\u7ef4\u62a4 1Panel\u3002'
+      },
+      {
+        title: '\n\n\u4e91\u5e02\u573a\u955c\u50cf\u5b89\u88c5\uff1a',
+        content:
+          '1.\u767b\u5f55\u963f\u91cc\u4e91\u5b98\u65b9\u7f51\u7ad9\u5728\u60a8\u7684\u6d4f\u89c8\u5668\u4e2d\u6253\u5f00\u963f\u91cc\u4e91\u7684\u5b98\u65b9\u7f51\u7ad9\uff08https://www.aliyun.com/\uff09\u5e76\u767b\u5f55\u60a8\u7684\u8d26\u53f7\u30022.\u9009\u62e9 ECS \u5b9e\u4f8b\u5728\u963f\u91cc\u4e91\u7ba1\u7406\u63a7\u5236\u53f0\u4e2d\uff0c\u70b9\u51fb\u5de6\u4fa7\u83dc\u5355\u680f\u7684 \u4e91\u670d\u52a1\u5668 ECS \u9009\u9879\u30023.\u521b\u5efa ECS \u5b9e\u4f8b\u70b9\u51fb\u9875\u9762\u4e0a\u65b9\u7684 \u521b\u5efa\u5b9e\u4f8b \u6309\u94ae\uff0c\u5e76\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\u914d\u7f6e\uff1a\u5730\u57df\u53ca\u53ef\u7528\u533a\uff1a\u9009\u62e9\u9002\u5408\u60a8\u7684\u5730\u7406\u4f4d\u7f6e\u548c\u53ef\u7528\u533a\u57df\u3002\u5b9e\u4f8b\u914d\u7f6e\uff1a\u9009\u62e9\u9002\u5408\u60a8\u9700\u6c42\u7684\u5b9e\u4f8b\u89c4\u683c\u548c\u7f51\u7edc\u7c7b\u578b\u3002\u955c\u50cf\uff1a\u70b9\u51fb \u4e91\u5e02\u573a\u955c\u50cf \u9009\u9879\u5361\uff0c\u7136\u540e\u5728\u641c\u7d22\u6846\u4e2d\u8f93\u5165 1Panel \u5e76\u9009\u62e9\u955c\u50cf\u3002\u5b58\u50a8\uff1a\u914d\u7f6e\u7cfb\u7edf\u76d8\u548c\u6570\u636e\u76d8\u7684\u5927\u5c0f\u548c\u7c7b\u578b\u3002\u7f51\u7edc\u548c\u5b89\u5168\u7ec4\uff1a\u6839\u636e\u60a8\u7684\u9700\u6c42\u914d\u7f6e\u7f51\u7edc\u548c\u5b89\u5168\u7ec4\u3002\u5176\u4ed6\u9009\u9879\uff1a\u6839\u636e\u60a8\u7684\u9700\u6c42\u914d\u7f6e\u5176\u4ed6\u9009\u9879\u3002\u786e\u8ba4\u8ba2\u5355\uff1a\u786e\u8ba4\u60a8\u7684\u914d\u7f6e\u4fe1\u606f\u5e76\u70b9\u51fb"\u7acb\u5373\u8d2d\u4e70"\u6309\u94ae\u30024.\u7b49\u5f85\u5b9e\u4f8b\u521b\u5efa\u5b8c\u6210\u7b49\u5f85\u7247\u523b\uff0c\u76f4\u5230 ECS \u5b9e\u4f8b\u521b\u5efa\u5b8c\u6210\u3002\u60a8\u53ef\u4ee5\u5728 ECS \u5b9e\u4f8b\u5217\u8868\u4e2d\u770b\u5230\u65b0\u521b\u5efa\u7684\u5b9e\u4f8b\u30025.\u767b\u5f55 ECS \u5b9e\u4f8b\u70b9\u51fb ECS \u5b9e\u4f8b\u5217\u8868\u4e2d\u5bf9\u5e94\u5b9e\u4f8b\u7684 \u8fdc\u7a0b\u8fde\u63a5 \u6309\u94ae\uff0c\u9009\u62e9 \u7acb\u5373\u767b\u5f55\uff0c\u7136\u540e\u8f93\u5165\u767b\u5f55\u5bc6\u7801\u3002'
+      },
+      {
+        title: '\n\n6.\u4f7f\u7528\u6b65\u9aa4',
+        content:
+          '6.1 \u5b89\u5168\u7ec4\u653e\u884c 8090 \u7aef\u53e3\uff0c\u7aef\u53e3\u653e\u884c\u6559\u7a0b\uff1ahttps://help.aliyun.com/document_detail/25471.html6.2 \u83b7\u53d6\u9762\u677f\u7528\u6237\u4fe1\u606f:\u8f93\u5165\u83b7\u53d6\u9ed8\u8ba4\u5bc6\u7801\u547d\u4ee4\uff1a1pctl user-info\u8f93\u5165\u5b8c\uff0c\u56de\u8f66\u5373\u53ef\u83b7\u53d6\u7528\u6237\u4fe1\u606f6.3 \u8bbf\u95ee\u9762\u677f\u901a\u8fc7 http://\u670d\u52a1\u5668\u5916\u7f51IP:8090/\u5b89\u5168\u5165\u53e3 \u8bbf\u95ee\u9762\u677f\u7ba1\u7406\u9875\u9762\uff0c\u5982\uff1ahttp://172.16.10.1:8090/mm4h9iucdn\u8f93\u5165\u5e10\u53f7\u5bc6\u78016.4 \u9762\u677f\u8bbe\u7f6e\u4fee\u6539\u9762\u677f\u9ed8\u8ba4\u5e10\u53f7\u5bc6\u7801\u5f00\u59cb\u4f7f\u7528\u9762\u677f'
+      },
+      {
+        title: '\n\n\u5728\u7ebf\u5347\u7ea7\uff1a',
+        content:
+          '\u767b\u5f55 1Panel Web \u63a7\u5236\u53f0\uff0c\u5728\u9875\u9762\u53f3\u4e0b\u89d2\u70b9\u51fb \u3010\u68c0\u67e5\u66f4\u65b0\u3011 \u8fdb\u884c\u5728\u7ebf\u5347\u7ea7\u3002'
+      },
+      {
+        title: '\n\n\u547d\u4ee4\u884c\u5de5\u5177\uff1a',
+        content: '\u8bf7\u67e5\u770bhttps://1panel.cn/docs/installation/cli/'
+      },
+      {
+        title: '',
+        content:
+          '1Panel \u662f\u4e00\u4e2a\u73b0\u4ee3\u5316\u3001\u5f00\u6e90\u7684 Linux \u670d\u52a1\u5668\u8fd0\u7ef4\u7ba1\u7406\u9762\u677f\u3002'
+      }
+    ]
+  },
+  {
+    name: 'quick_start.md',
+    content: [
+      {
+        title: '# \u5feb\u901f\u5165\u95e8 ## 1 \u4e00\u952e\u90e8\u7f72',
+        content:
+          '!!! Abstract "" \u6309\u7167\u90e8\u7f72\u670d\u52a1\u5668\u8981\u6c42\u51c6\u5907\u597d\u90e8\u7f72\u73af\u5883\u540e\uff0c\u53ef\u901a\u8fc7 CloudExplorer Lite \u5feb\u901f\u5b89\u88c5\u811a\u672c\u4e00\u952e\u5feb\u901f\u90e8\u7f72\u3002 **\u6ce8\u610f\uff1a** \u4e00\u952e\u5b89\u88c5\u91c7\u7528\u9ed8\u8ba4\u53c2\u6570\uff0c\u66f4\u591a\u6709\u5173\u79bb\u7ebf\u90e8\u7f72\u65b9\u5f0f\u53ef\u67e5\u770b\u672c\u6587\u6863\u7684\u3010\u79bb\u7ebf\u5b89\u88c5\u3011\u3002 **\u90e8\u7f72\u670d\u52a1\u5668\u8981\u6c42:** ``` - \u64cd\u4f5c\u7cfb\u7edf\uff1aLinux \u64cd\u4f5c\u7cfb\u7edf\uff08\u63a8\u8350 CentOS 7 \u53ca\u4ee5\u4e0a\u7248\u672c\uff0cUbuntu 18 \u53ca\u4ee5\u4e0a\u7248\u672c\uff09 - CPU/\u5185\u5b58\uff1a8 \u6838 16 GB - \u78c1\u76d8\u7a7a\u95f4\uff1a200 GB - \u7f51\u7edc\u8981\u6c42\uff1a\u53ef\u8bbf\u95ee\u4e92\u8054\u7f51 ``` \u6267\u884c\u4ee5\u4e0b\u811a\u672c\u8fdb\u884c\u4e00\u952e\u5b89\u88c5\uff1a ``` /bin/bash -c "$(curl -fsSL https://resource.fit2cloud.com/cloudexplorer-lite/installer/releases/latest/quick_start.sh)" ``` CloudExplorer Lite \u662f\u4e00\u6b3e B/S \u67b6\u6784\u7684\u4ea7\u54c1\uff0c\u5373\u6d4f\u89c8\u5668/\u670d\u52a1\u5668\u7ed3\u6784\uff0c\u5728\u670d\u52a1\u5668\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u5ba2\u6237\u7aef\u901a\u8fc7\u6d4f\u89c8\u5668\u8bbf\u95ee\u4ee5\u4e0b\u5730\u5740\uff0c\u5373\u53ef\u5f00\u59cb\u4f7f\u7528\u3002 ``` http://\u76ee\u6807\u670d\u52a1\u5668IP\u5730\u5740\uff1a\u670d\u52a1\u8fd0\u884c\u7aef\u53e3 \u9ed8\u8ba4\u7528\u6237\u540d\uff1aadmin\uff0c\u9ed8\u8ba4\u5bc6\u7801\uff1acloudexplorer ```'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u4e3b\u9875',
+        content:
+          '!!! Abstract "" \u767b\u5f55 CloudExplorer Lite \u7cfb\u7edf\u540e\u9ed8\u8ba4\u8fdb\u5165\u4e3b\u9875\uff0c\u5206\u4e3a\u9876\u90e8\u5bfc\u822a\u3001\u5de6\u4fa7\u5bfc\u822a\u680f\u548c\u5de5\u4f5c\u533a\u57df\u4e09\u90e8\u5206\u3002 **\u9876\u90e8\u5bfc\u822a\u680f\uff1a** \u9876\u90e8\u663e\u793a\u7cfb\u7edflogo\u3001\u7528\u6237\u767b\u5f55\u8eab\u4efd\uff08\u7ec4\u7ec7\u548c\u89d2\u8272\uff09\u3001\u5e2e\u52a9\u6587\u6863\u3001\u4e2a\u4eba\u4fe1\u606f\u3002 **\u4ea7\u54c1\u670d\u52a1\uff1a** \u56fa\u5b9a\u6a21\u5757\u83dc\u5355\uff0c\u5305\u542b\u7ba1\u7406\u4e2d\u5fc3\u3001\u4e91\u4e3b\u673a\u670d\u52a1\u3001\u4e91\u8d26\u5355\u3001\u8fd0\u8425\u5206\u6790\u3001\u5b89\u5168\u5408\u89c4\u4e94\u4e2a\u670d\u52a1\u6a21\u5757\uff0c\u70b9\u51fb\u56fe\u6807\u4fbf\u53ef\u5207\u6362\u5230\u76f8\u5e94\u7684\u6a21\u5757\u4e2d\u3002 **\u5de5\u4f5c\u533a\u57df\uff1a** \u53f3\u4fa7\u4e3a\u5de5\u4f5c\u533a\u57df\uff0c\u663e\u793a\u4e3b\u9875\u7684\u5185\u5bb9\u5305\u542b\u4e2a\u4eba\u4fe1\u606f\u3001\u5feb\u6377\u670d\u52a1\u3001\u6211\u7684\u8d44\u6e90\u3001\u4e0d\u5408\u89c4\u89c4\u5219/\u8d44\u6e90\u7edf\u8ba1\u3001\u8d39\u7528\u6982\u89c8\u3001\u8d39\u7528\u8d8b\u52bf\u3001\u4e91\u4e3b\u673a\u4f18\u5316\u5efa\u8bae\u3001\u4e91\u4e3b\u673a\u8d8b\u52bf\u3001\u4e91\u4e3b\u673a\u72b6\u6001\u5206\u5e03\u3002![\u9996\u9875](./img/quick_start/\u4e3b\u9875.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u7ba1\u7406\u4e2d\u5fc3 ',
+        content:
+          '!!! Abstract "" \u4e91\u7ba1\u5e73\u53f0\u7684\u6838\u5fc3\u80fd\u529b\u4e4b\u4e00\uff0cCloudExplorer Lite \u4e3a\u7528\u6237\u63d0\u4f9b\u591a\u79df\u6237\u3001\u591a\u89d2\u8272\u7684\u7ba1\u7406\u6a21\u578b\uff1b \u91c7\u7528\u6a21\u5757\u5316\u8bbe\u8ba1\uff0c\u5373\u63d2\u5373\u7528\uff0c\u63d0\u4f9b\u6a21\u5757\u7ba1\u7406\u3002\u4f01\u4e1a\u53ef\u4ee5\u8f7b\u677e\u90e8\u7f72\u4e0d\u540c\u6a21\u5757\uff0c\u4ece\u800c\u6269\u5927\u5bf9\u4e91\u57fa\u7840\u8bbe\u65bd\u7684\u7ba1\u7406\u8303\u56f4\uff1b \u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u7ba1\u7406\u4e2d\u5fc3\u3011\u3002![\u7ba1\u7406\u4e2d\u5fc3](./img/quick_start/\u7ba1\u7406\u4e2d\u5fc3.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u4e91\u4e3b\u673a\u7ba1\u7406 ',
+        content:
+          '!!! Abstract "" CloudExplorer Lite \u63d0\u4f9b\u7edf\u4e00\u7684\u4e91\u4e3b\u673a\u751f\u547d\u5468\u671f\u7ba1\u7406\u64cd\u4f5c\u548c\u76d1\u63a7\u754c\u9762\uff0c\u57fa\u4e8e\u65e2\u6709\u7684\u7528\u6237\u7ba1\u7406\u4f53\u7cfb\uff0c\u7528\u6237\u53ef\u521b\u5efa\u3001\u53ef\u64cd\u4f5c\u7684\u8d44\u6e90\u90fd\u5177\u6709\u79df\u6237\u9694\u79bb\u5c5e\u6027\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u4e91\u4e3b\u673a\u7ba1\u7406\u3011\u3002![\u4e91\u4e3b\u673a\u7ba1\u7406](img/quick_start/\u4e91\u4e3b\u673a\u7ba1\u7406.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u4e91\u8d26\u5355  ',
+        content:
+          '!!! Abstract "" CloudExplorer Lite \u63d0\u4f9b\u7edf\u4e00\u7684\u8d39\u7528\u7ba1\u7406\u3001\u8d39\u7528\u5206\u644a\u3001\u81ea\u5b9a\u4e49\u591a\u7ef4\u5ea6\u8d26\u5355\u529f\u80fd\uff0c\u53ef\u4f5c\u4e3a\u4f01\u4e1a\u7684\u4e91\u8d44\u6e90\u6210\u672c\u5206\u6790\u4e2d\u5fc3\uff0c\u80fd\u591f\u5e2e\u52a9\u4f01\u4e1a\u7528\u6237\u6709\u6548\u964d\u4f4e\u4e91\u4e0a\u8d44\u6e90\u7684\u6210\u672c\u7ba1\u7406\u96be\u5ea6\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u4e91\u8d26\u5355\u3011\u3002![\u4e91\u8d26\u5355](img/quick_start/\u8d26\u5355\u603b\u89c8.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u8fd0\u8425\u5206\u6790',
+        content:
+          '!!! Abstract "" CloudExplorer Lite \u80fd\u591f\u5bf9\u4f01\u4e1a\u73b0\u6709\u7684\u4e91\u8d44\u6e90\u4ece\u5206\u5e03\u3001\u5bb9\u91cf\u3001\u4f7f\u7528\u60c5\u51b5\u7b49\u591a\u4e2a\u7ef4\u5ea6\u8fdb\u884c\u5206\u6790\uff0c\u5e76\u63d0\u4f9b\u8d44\u6e90\u4f18\u5316\u5efa\u8bae\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u8fd0\u8425\u5206\u6790\u3011\u3002![\u8fd0\u8425\u5206\u6790](img/quick_start/\u8fd0\u8425\u5206\u6790-\u603b\u89c8.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u5b89\u5168\u5408\u89c4',
+        content:
+          '!!! Abstract "" CloudExplorer Lite \u652f\u6301\u4e00\u952e\u626b\u63cf\u591a\u4e2a\u4e91\u5e73\u53f0\u7684\u591a\u79cd\u4e91\u8d44\u6e90\uff0c\u53ef\u7075\u6d3b\u5b9a\u4e49\u89c4\u5219\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u5b89\u5168\u5408\u89c4\u3011\u3002![\u5b89\u5168\u5408\u89c4](img/quick_start/\u5b89\u5168\u5408\u89c4-\u603b\u89c8.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.1 \u4f7f\u7528\u573a\u666f',
+        content:
+          '!!! Abstract "" \u672c\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u7cfb\u7edf\u7ba1\u7406\u5458\u5982\u4f55\u4f7f\u7528 CloudExplorer Lite \u5feb\u901f\u7ba1\u7406\u4e00\u4e2a\u4e91\u8d26\u53f7\uff0c\u5e2e\u52a9\u5927\u5bb6\u5feb\u901f\u638c\u63e1\u4f7f\u7528\u65b9\u6cd5\u3002 \u521d\u59cb\u5316\u914d\u7f6e\u6b65\u9aa4\uff1a\u6dfb\u52a0\u4e91\u8d26\u53f7 -> \u7ba1\u7406\u4e91\u4e3b\u673a -> \u67e5\u770b\u4e91\u8d26\u5355 -> \u67e5\u770b\u8fd0\u8425\u5206\u6790 -> \u67e5\u770b\u5b89\u5168\u5408\u89c4\u3002 '
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.2 \u521b\u5efa\u4e91\u8d26\u53f7',
+        content:
+          '!!! Abstract "" \u9996\u6b21\u767b\u5f55 CloudExplorer Lite \u5e73\u53f0\u65f6\uff0c\u4f1a\u81ea\u52a8\u5f39\u51fa\u6dfb\u52a0\u4e91\u8d26\u53f7\u7684\u5411\u5bfc\uff0c\u7528\u6237\u9700\u8981\u6839\u636e\u5411\u5bfc\u5c06\u4e91\u8d26\u53f7\u6dfb\u52a0\u5230\u4e91\u7ba1\u5e73\u53f0\u4e2d\u8fdb\u884c\u7ba1\u7406\u3002 ![\u4e91\u8d26\u53f7\u5411\u5bfc](img/quick_start/\u4e91\u8d26\u53f7\u5411\u5bfc-\u9009\u62e9\u4e91\u5e73\u53f0.png){ width="1235px" } !!! Abstract "" \u8f93\u5165\u540d\u79f0\u4e3a\u201c\u963f\u91cc\u4e91-\u4ea7\u54c1\u201d\uff0c\u8f93\u5165\u4e91\u8d26\u53f7\u7684 AccessKey ID\u3001AccessKey Secret\uff0c\u70b9\u51fb\u201c\u786e\u8ba4\u201d\u3002 \u8bf4\u660e\uff1aAccessKey\u6743\u9650\u8981\u6c42\uff1aECS\u7684\u7ba1\u7406\u6743\u9650\u548c\u6240\u6709\u8d44\u6e90\u7684\u53ea\u8bfb\u6743\u9650\u3002 ![\u5411\u5bfc-\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1](img/quick_start/\u4e91\u8d26\u53f7\u5411\u5bfc-\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1.png)!!! Abstract "" \u975e\u9996\u6b21\u767b\u5f55\u53ef\u6253\u5f00\u3010\u7ba1\u7406\u4e2d\u5fc3\u3011-\u3010\u4e91\u8d26\u53f7\u3011\u83dc\u5355\uff0c\u521b\u5efa\u4e00\u4e2a\u963f\u91cc\u4e91\u7684\u4e91\u8d26\u53f7\uff0c\u540d\u79f0\u4e3a\u201c\u963f\u91cc\u4e91-\u4ea7\u54c1\u201d\u3002![\u4e91\u8d26\u53f7\u5217\u8868](img/quick_start/\u4e91\u8d26\u53f7\u5217\u8868.png){ width="1235px" }!!! Abstract "" \u4e91\u5e73\u53f0\u9009\u62e9\u201c\u963f\u91cc\u4e91\u201d(\u82e5\u662f\u5176\u4ed6\u4e91\u5e73\u53f0\u7684\u53ef\u9009\u62e9\u5bf9\u5e94\u7684\u4e91\u5e73\u53f0) \uff0c\u5f53\u524d\u4ee5\u201c\u963f\u91cc\u4e91\u201d\u4e3a\u4f8b\u3002![\u6dfb\u52a0\u4e91\u8d26\u53f7](img/quick_start/\u9009\u62e9\u4e91\u5e73\u53f0.png){ width="1235px" }!!! Abstract "" \u8f93\u5165\u540d\u79f0\u4e3a\u201c\u963f\u91cc\u4e91-\u4ea7\u54c1\u201d\uff0c\u8f93\u5165\u4e91\u8d26\u53f7\u7684 AccessKey ID\u3001AccessKey Secret\uff0c\u70b9\u51fb\u201c\u786e\u8ba4\u201d\u3002 \u8bf4\u660e\uff1aAccessKey\u6743\u9650\u8981\u6c42\uff1aECS\u7684\u7ba1\u7406\u6743\u9650\u548c\u6240\u6709\u8d44\u6e90\u7684\u53ea\u8bfb\u6743\u9650\u3002![\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1](img/quick_start/\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1.png){ width="1235px" }!!! Abstract "" \u7cfb\u7edf\u4f1a\u81ea\u52a8\u540c\u6b65\u8be5\u4e91\u8d26\u53f7\u4e0b\u7684\u4e91\u4e3b\u673a\u3001\u78c1\u76d8\u3001\u955c\u50cf\u7b49\u8d44\u6e90\u6570\u636e\uff0c\u8fc7\u53bb\u4e00\u5e74\u7684\u8d26\u5355\u6570\u636e\u548c\u5b89\u5168\u5408\u89c4\u626b\u63cf\u7684\u8d44\u6e90\u6570\u636e\uff1b \u7cfb\u7edf\u4f1a\u5b9a\u65f6\u540c\u6b65\u6570\u636e\uff0c\u7528\u6237\u4e5f\u53ef\u4ee5\u624b\u52a8\u540c\u6b65\uff1b \u8d44\u6e90\u540c\u6b65\u5b8c\u6210\u540e\u4fbf\u53ef\u4f7f\u7528\u5404\u670d\u52a1\u6a21\u5757\u8fdb\u884c\u67e5\u770b\u548c\u7ba1\u7406\uff0c\u5426\u5219\u5404\u670d\u52a1\u6a21\u5757\u5c06\u6ca1\u6709\u6570\u636e\u3002 ![\u4e91\u8d26\u53f7-\u540c\u6b65\u5168\u91cf\u6570\u636e](img/quick_start/\u4e91\u8d26\u53f7-\u540c\u6b65\u5168\u91cf\u6570\u636e.png){ width="1235px" }!!! Abstract "" \u70b9\u51fb\u201c\u4e91\u8d26\u53f7\u540d\u79f0\u201d\u8fdb\u5165\u8be6\u60c5\uff0c\u53ef\u4ee5\u67e5\u770b\u5177\u4f53\u7684\u540c\u6b65\u8bb0\u5f55\u548c\u540c\u6b65\u8be6\u60c5\u3002'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.2 \u521b\u5efa\u4e91\u8d26\u53f7',
+        content:
+          '![\u4e91\u8d26\u53f7-\u540c\u6b65\u8be6\u60c5](img/quick_start/\u4e91\u8d26\u53f7-\u540c\u6b65\u8be6\u60c5.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.3 \u7ba1\u7406\u4e91\u4e3b\u673a - \u521b\u5efa\u963f\u91cc\u4e91\u4e91\u4e3b\u673a',
+        content:
+          '!!! Abstract "" \u5f53\u7528\u6237\u9700\u8981\u65b0\u589e\u4e91\u4e3b\u673a\u8d44\u6e90\u65f6\uff0c\u65e0\u9700\u63d0\u524d\u64cd\u4f5c\u4efb\u4f55\u914d\u7f6e\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728\u4e91\u4e3b\u673a\u5217\u8868\u4e0a\u65b9\u70b9\u51fb\u3010\u521b\u5efa\u4e91\u4e3b\u673a\u3011\u3002![\u521b\u5efa\u4e91\u4e3b\u673a](img/quick_start/\u521b\u5efa\u4e91\u4e3b\u673a.png){ width="1235px" }!!! Abstract "" \u9700\u8981\u7528\u6237\u9009\u62e9\u5728\u54ea\u4e2a\u4e91\u8d26\u53f7\u4e0b\u521b\u5efa\u4e91\u4e3b\u673a\uff0c\u9009\u62e9\u4e91\u8d26\u53f7\uff1a\u963f\u91cc\u4e91\uff0c\u4ee5\u4e0b\u4ee5\u521b\u5efa\u963f\u91cc\u4e91\u4e91\u4e3b\u673a\u4e3a\u4f8b\u3002![\u9009\u62e9\u4e91\u8d26\u53f7](img/quick_start/\u521b\u5efa\u4e91\u4e3b\u673a-\u9009\u62e9\u4e91\u8d26\u53f7.png){ width="1235px" }!!! Abstract "" \u5728\u57fa\u7840\u914d\u7f6e\u9875\u9762\u9700\u8981\u9009\u62e9\uff1a\u4ed8\u8d39\u65b9\u5f0f\u3001\u533a\u57df\u3001\u53ef\u7528\u533a\u3001\u5b9e\u4f8b\u89c4\u683c\u3001\u64cd\u4f5c\u7cfb\u7edf\u3001\u7cfb\u7edf\u76d8\u559d\u6570\u636e\u76d8\u5927\u5c0f\u3002 \u4e0b\u65b9\u4f1a\u6839\u636e\u6240\u9009\u7684\u914d\u7f6e\u4fe1\u606f\u663e\u793a\u9884\u4f30\u8d39\u7528\u3002 ![\u57fa\u7840\u914d\u7f6e1](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u57fa\u7840\u914d\u7f6e.png){ width="1235px" }!!! Abstract "" \u5728\u7f51\u7edc\u914d\u7f6e\u9875\u9762\u9700\u8981\u9009\u62e9\uff1a\u5b50\u7f51\u3001\u5b89\u5168\u7ec4\u3001\u662f\u5426\u5206\u914d\u516c\u7f51IP\u53ca\u516c\u7f51IP\u7684\u5e26\u5bbd\u8bbe\u7f6e\u3002![\u7f51\u7edc\u914d\u7f6e](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u7f51\u7edc\u914d\u7f6e.png){ width="1235px" }!!! Abstract "" \u5728\u7cfb\u7edf\u914d\u7f6e\u4e2d\u8bbe\u7f6e\u4e91\u4e3b\u673a\u7684\u767b\u5f55\u51ed\u8bc1\u3001\u4e3b\u673a\u540d\u548c Hostname\uff1b \u82e5\u540c\u65f6\u521b\u5efa\u591a\u53f0\u8d44\u6e90\u5219\u6bcf\u53f0\u8d44\u6e90\u90fd\u9700\u8981\u8bbe\u7f6e\u4e3b\u673a\u540d\u548c Hostname\u3002![\u7cfb\u7edf\u8bbe\u7f6e](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u7cfb\u7edf\u914d\u7f6e.png){ width="1235px" }!!! Abstract "" \u6700\u540e\u4e00\u6b65\u662f\u786e\u8ba4\u4e4b\u524d\u51e0\u6b65\u6240\u9009\u7684\u4fe1\u606f\uff0c\u5982\u679c\u786e\u8ba4\u6b63\u786e\uff0c\u63d0\u4ea4\u7533\u8bf7\u540e\u4fbf\u4f1a\u6267\u884c\u4efb\u52a1\u521b\u5efa\u4e91\u4e3b\u673a\u3002![\u786e\u8ba4\u4fe1\u606f](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u786e\u8ba4\u4fe1\u606f.png){ width="1235px" }!!! Abstract "" \u63d0\u4ea4\u521b\u5efa\u4efb\u52a1\u540e\uff0c\u5728\u4e91\u4e3b\u673a\u5217\u8868\u65b0\u589e\u4e00\u6761\u521b\u5efa\u4e2d\u7684\u8bb0\u5f55\uff0c\u5e76\u5728\u4efb\u52a1\u5217\u8868\u751f\u6210\u521b\u5efa\u4e91\u4e3b\u673a\u7684\u4efb\u52a1\u3002![\u521b\u5efa\u4e2d\u4e91\u4e3b\u673a\u5217\u8868](img/quick_start/\u4e91\u4e3b\u673a-\u521b\u5efa\u4e2d\u8bb0\u5f55.png){ width="1235px" }![\u521b\u5efa\u4e91\u4e3b\u673a\u4efb\u52a1](img/quick_start/\u4efb\u52a1-\u521b\u5efa\u4e91\u4e3b\u673a\u4efb\u52a1.png){ width="1235px" } !!! Abstract "" \u4efb\u52a1\u5b8c\u6210\u540e\uff0c\u4e91\u4e3b\u673a\u72b6\u6001\u53d8\u4e3a\u201c\u8fd0\u884c\u4e2d\u201d\u3002'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.3 \u7ba1\u7406\u4e91\u4e3b\u673a - \u4e91\u4e3b\u673a\u7ba1\u7406\u64cd\u4f5c',
+        content:
+          '!!! Abstract "" \u5f53\u524d\u652f\u6301\u5bf9\u4e91\u4e3b\u673a\u8fdb\u884c\u542f\u52a8\u3001\u505c\u7528\u3001\u91cd\u542f\u3001\u5220\u9664\u3001\u914d\u7f6e\u53d8\u66f4\u3001\u6dfb\u52a0\u78c1\u76d8\u7b49\u7ba1\u7406\u64cd\u4f5c\u3002![\u4e91\u4e3b\u673a\u7ba1\u7406\u64cd\u4f5c](img/quick_start/\u4e91\u4e3b\u673a\u7ba1\u7406\u64cd\u4f5c.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.3 \u7ba1\u7406\u4e91\u4e3b\u673a',
+        content:
+          '!!! Abstract "" \u3010\u4e91\u4e3b\u673a\u7ba1\u7406\u3011\u6a21\u5757\u63d0\u4f9b\u4e86\u4e91\u4e3b\u673a\u7684\u521b\u5efa\u3001\u542f/\u505c\u673a\u3001\u56de\u6536\u3001\u914d\u7f6e\u53d8\u66f4\u3001\u6269\u5bb9\u3001\u6388\u6743\u7b49\uff1b \u540c\u65f6\u57fa\u4e8e\u7528\u6237\u7ba1\u7406\u4f53\u7cfb\uff0c\u7528\u6237\u53ef\u521b\u5efa\u3001\u53ef\u64cd\u4f5c\u7684\u8d44\u6e90\u90fd\u5177\u5907\u9694\u79bb\u6027\uff1b \u5728\u591a\u4e91\u73af\u5883\u4e0b\u63d0\u4f9b\u7edf\u4e00\u7684\u64cd\u4f5c\u754c\u9762\uff0c\u4e3a\u7528\u6237\u5e26\u6765\u6781\u5927\u4fbf\u5229\u3002'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u8d26\u5355\u603b\u89c8',
+        content:
+          '!!! Abstract "" \u7cfb\u7edf\u7ba1\u7406\u5458\u53ef\u4ee5\u770b\u5230\u6240\u6709\u7eb3\u7ba1\u4e91\u8d26\u53f7\u7684\u5f53\u6708\u603b\u82b1\u8d39\u3001\u4eca\u5e74\u603b\u82b1\u8d39\u3001\u4e0e\u4e0a\u6708\u6216\u4e0a\u4e2a\u5468\u671f\u8d39\u7528\u5bf9\u6bd4\u589e\u52a0\u8fd8\u662f\u51cf\u5c11\u3001\u8fd1\u534a\u5e74/\u8fd1\u4e00\u5e74\u7684\u603b\u8d39\u7528\u8d8b\u52bf\uff0c\u4e0b\u65b9\u7684\u6708\u8d26\u5355\u4e2d\u53ef\u4ee5\u67e5\u770b\u7528\u6237\u81ea\u5b9a\u4e49\u4e0d\u540c\u7ef4\u5ea6\u7684\u6708\u8d26\u5355\uff1b \u7ec4\u7ec7\u7ba1\u7406\u5458\u548c\u666e\u901a\u7528\u6237\u53ef\u4ee5\u67e5\u770b\u5df2\u88ab\u5206\u8d26\u6388\u6743\u7684\u5f53\u6708\u603b\u82b1\u8d39\u3001\u4eca\u5e74\u603b\u82b1\u8d39\u548c\u8fd1\u534a\u5e74/\u8fd1\u4e00\u5e74\u7684\u603b\u8d39\u7528\u8d8b\u52bf\uff0c\u4e0b\u65b9\u7684\u6708\u8d26\u5355\u4e2d\u53ef\u4ee5\u67e5\u770b\u5df2\u88ab\u5206\u8d26\u6388\u6743\u7684\u4e0d\u540c\u7ef4\u5ea6\u7684\u6708\u8d26\u5355\u3002![\u4e91\u8d26\u5355](img/quick_start/\u8d26\u5355\u603b\u89c8.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u8d26\u5355\u660e\u7ec6',
+        content:
+          '!!! Abstract "" \u7cfb\u7edf\u7ba1\u7406\u5458\u53ef\u4ee5\u67e5\u770b\u6240\u6709\u516c\u6709\u4e91\u8d26\u53f7\u7684\u8d26\u5355\u660e\u7ec6\uff0c\u9ed8\u8ba4\u663e\u793a\u5f53\u6708\u7684\u660e\u7ec6\uff0c\u53ef\u4ee5\u6309\u7167\u8d26\u671f\u67e5\u770b\u660e\u7ec6\uff1b \u7ec4\u7ec7\u7ba1\u7406\u5458\u548c\u666e\u901a\u7528\u6237\u53ef\u4ee5\u67e5\u770b\u5df2\u88ab\u5206\u8d26\u6388\u6743\u7684\u8d26\u5355\u660e\u7ec6\uff0c\u9ed8\u8ba4\u663e\u793a\u5f53\u6708\u7684\u660e\u7ec6\uff0c\u53ef\u4ee5\u6309\u7167\u8d26\u671f\u67e5\u770b\u660e\u7ec6\u3002![\u8d26\u5355\u660e\u7ec6](img/quick_start/\u8d26\u5355\u660e\u7ec6.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u81ea\u5b9a\u4e49\u8d26\u5355',
+        content:
+          '!!! Abstract "" \u53ea\u6709\u7cfb\u7edf\u7ba1\u7406\u5458\u6dfb\u52a0\u7f16\u8f91\u81ea\u5b9a\u4e49\u8d26\u5355\uff0c\u7ec4\u7ec7\u7ba1\u7406\u5458\u548c\u666e\u901a\u7528\u6237\u53ea\u80fd\u5728\u8d26\u5355\u603b\u89c8\u4e2d\u67e5\u770b\u6708\u8d26\u5355\uff1b \u7cfb\u7edf\u5185\u7f6e\u90e8\u5206\u6708\u8d26\u5355\uff1a\u6309\u4e91\u5e73\u53f0\u3001\u6309\u4e91\u8d26\u53f7\u3001\u6309\u4ea7\u54c1\u540d\u79f0\u3001\u6309\u4ed8\u8d39\u7c7b\u578b\u3001\u6309\u4f01\u4e1a\u9879\u76ee\uff1b \u82e5\u60f3\u8981\u5c55\u793a\u5176\u4ed6\u7ef4\u5ea6\u7684\u6708\u8d26\u5355\uff0c\u7cfb\u7edf\u7ba1\u7406\u5458\u6dfb\u52a0\u81ea\u5b9a\u4e49\u6708\u8d26\u5355\uff0c\u652f\u6301\u7684\u7edf\u8ba1\u7ef4\u5ea6\u5b57\u6bb5\uff1a\u4e91\u5e73\u53f0\u3001\u4e91\u8d26\u53f7\u3001\u533a\u57df\u3001\u4f01\u4e1a\u9879\u76ee\u3001\u7ec4\u7ec7\uff08\u5de5\u4f5c\u7a7a\u95f4\u7684\u7236\u7ea7\u7ec4\u7ec7\uff09\u3001\u7ec4\u7ec7\u5c42\u7ea7\u6811\uff08\u53ef\u9009\u62e9\u7ec4\u7ec7\u5c42\u7ea7\uff09\u3001\u5de5\u4f5c\u7a7a\u95f4\u3001\u6807\u7b7e\u3001\u4ea7\u54c1\u540d\u79f0\u3001\u4ea7\u54c1\u660e\u7ec6\u3001\u4ed8\u8d39\u65b9\u5f0f\u3001\u8d44\u6e90\u540d\u79f0\u7b49\u3002![\u81ea\u5b9a\u4e49\u8d26\u5355](img/quick_start/\u81ea\u5b9a\u4e49\u8d26\u5355.png){ width="1235px" }!!! Abstract "" \u521b\u5efa\u4e00\u4e2a\u201c\u6309\u5de5\u4f5c\u7a7a\u95f4\u201d\u7684\u81ea\u5b9a\u4e49\u8d26\u5355\uff0c\u7edf\u8ba1\u5b57\u6bb5\u662f\uff1a\u7ec4\u7ec7\u3001\u5de5\u4f5c\u7a7a\u95f4\u3001\u4ea7\u54c1\u540d\u79f0\u3002![\u6dfb\u52a0\u81ea\u5b9a\u4e49\u8d26\u5355](img/quick_start/\u521b\u5efa\u81ea\u5b9a\u4e49\u8d26\u5355.png){ width="1235px" }!!! Abstract "" \u81ea\u5b9a\u4e49\u8d26\u5355\u521b\u5efa\u5b8c\u6210\u540e\u53ef\u5728\u3010\u8d26\u5355\u603b\u89c8\u3011\u4e2d\u4e0b\u9762\u7684\u6708\u8d26\u5355\u4e2d\u67e5\u770b\u3002![\u8d26\u5355\u603b\u89c8](img/quick_start/\u8d26\u5355\u603b\u89c8-\u81ea\u5b9a\u4e49\u8d26\u5355.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u5206\u8d26\u8bbe\u7f6e',
+        content:
+          '!!! Abstract "" \u5f53\u524d\u7cfb\u7edf\u540c\u6b65\u5230\u7684\u8d26\u5355\u660e\u7ec6\u90fd\u662f\u57fa\u4e8e\u5404\u4e91\u5e73\u53f0\u4e0a\u7684\u539f\u59cb\u8d26\u5355\u6570\u636e\uff1b \u82e5\u60f3\u628a\u8fd9\u4e9b\u8d26\u5355\u5206\u644a\u5230\u7cfb\u7edf\u4e2d\u7684\u7ec4\u7ec7\u6216\u5de5\u4f5c\u7a7a\u95f4\u4e0a\u65f6\uff0c\u9700\u8981\u5728\u539f\u59cb\u8d26\u5355\u4e2d\u5b58\u5728\u6309\u7ec4\u7ec7/\u5de5\u4f5c\u7a7a\u95f4\u5bf9\u5e94\u7684\u5206\u8d26\u5b57\u6bb5\uff0c\u5982\u6807\u7b7e\u3001\u4f01\u4e1a\u9879\u76ee/\u8d22\u52a1\u5355\u5143\uff0c\u6b64\u65f6\u7cfb\u7edf\u7ba1\u7406\u5458\u53ef\u4ee5\u6309\u7167\u5206\u8d26\u5b57\u6bb5\u5728\u7cfb\u7edf\u4e2d\u8fdb\u884c\u5206\u8d26\u89c4\u5219\u8bbe\u5b9a\uff1b \u82e5\u5f53\u524d\u8fd8\u6ca1\u6709\u5206\u8d26\u4f9d\u636e\u5b57\u6bb5\uff0c\u9700\u8981\u5148\u5230\u516c\u6709\u4e91\u5e73\u53f0\u4e0a\u89c4\u8303\u8d26\u5355\uff0c\u6309\u7167\u7cfb\u7edf\u652f\u6301\u7684\u5206\u8d26\u4f9d\u636e\u8fdb\u884c\u5f52\u7eb3\uff1b \u5f53\u524d\u4e91\u7ba1\u5e73\u53f0\u652f\u6301\u7684\u5206\u8d26\u4f9d\u636e\u5b57\u6bb5\u6709\uff1a\u4e91\u5e73\u53f0\u3001\u4e91\u8d26\u53f7\u3001\u4f01\u4e1a\u9879\u76ee/\u8d22\u52a1\u5355\u5143\u3001\u4ea7\u54c1\u540d\u79f0\u3001\u4ea7\u54c1\u660e\u7ec6\u3001\u6807\u7b7e\u3002 ![\u5206\u8d26\u8bbe\u7f6e](img/quick_start/\u672a\u5206\u8d26\u8d44\u6e90.png){ width="1235px" }!!! Abstract "" \u5728\u5206\u8d26\u8bbe\u7f6e\u9875\u9762\u9009\u62e9\u7ec4\u7ec7/\u5de5\u4f5c\u7a7a\u95f4\uff0c\u53f3\u4fa7\u8bbe\u7f6e\u5206\u8d26\u89c4\u5219\u3002 \u5206\u8d26\u89c4\u5219\u8bbe\u7f6e\u4fdd\u5b58\u540e\uff0c\u9700\u8981\u5ef6\u8fdf 24 \u5c0f\u65f6\u53ef\u5728\u5df2\u5206\u8d26\u8d44\u6e90\u5217\u8868\u5c55\u793a\u5206\u644a\u8fc7\u6765\u7684\u8d44\u6e90\u3002![\u6dfb\u52a0\u5206\u8d26\u89c4\u5219](img/quick_start/\u6dfb\u52a0\u5206\u8d26\u89c4\u5219.png){ width="1235px" }![\u5df2\u5206\u8d26\u8d44\u6e90](img/quick_start/\u5df2\u5206\u8d26\u8d44\u6e90.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355',
+        content:
+          '!!! Abstract "" \u63d0\u4f9b\u4e86\u591a\u4e91\u591a\u8d26\u53f7\u7684\u8d39\u7528\u6c47\u603b\u3001\u8d39\u7528\u5206\u644a\u3001\u81ea\u5b9a\u4e49\u591a\u7ef4\u5ea6\u6708\u8d26\u5355\u529f\u80fd\uff0c\u53ef\u4f5c\u4e3a\u4f01\u4e1a\u7684\u4e91\u8d44\u6e90\u6210\u672c\u5206\u6790\u3002\u663e\u8457\u964d\u4f4e\u4e91\u4e0a\u8d44\u6e90\u6210\u672c\u7ba1\u7406\u7684\u96be\u5ea6\uff0c\u63d0\u5347\u6210\u672c\u7ba1\u7406\u6548\u7387\u3002'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u603b\u89c8',
+        content:
+          '!!! Abstract "" \u6574\u4f53\u67e5\u770b\u5f53\u524d\u6240\u7ba1\u7406\u7684\u8d44\u6e90\u6570\u91cf\u7edf\u8ba1\uff0c\u8d44\u6e90\u4f7f\u7528\u60c5\u51b5\u7edf\u8ba1\uff0c\u8d44\u6e90\u5206\u5e03\u3001\u8d44\u6e90\u589e\u957f\u8d8b\u52bf\u4ee5\u53ca\u8d44\u6e90\u7684\u4f18\u5316\u5efa\u8bae\uff1b \u53ef\u4ee5\u6309\u7167\u4e91\u8d26\u53f7\u8fc7\u6ee4\u663e\u793a\u6bcf\u4e2a\u4e91\u8d26\u53f7\u4e0b\u7684\u8d44\u6e90\u7edf\u8ba1\u60c5\u51b5\u3002![\u8fd0\u8425\u5206\u6790\u603b\u89c8](img/quick_start/\u8fd0\u8425\u5206\u6790-\u603b\u89c8.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u57fa\u7840\u8d44\u6e90\u5206\u6790',
+        content:
+          '!!! Abstract "" \u57fa\u7840\u8d44\u6e90\u4e3a\u79c1\u6709\u4e91\u8ba1\u7b97\u8d44\u6e90\u548c\u5b58\u50a8\u5668\u7684\u6574\u4f53\u8d44\u6e90\u4ece\u5bb9\u91cf\u3001\u5206\u914d\u60c5\u51b5\u3001\u4f7f\u7528\u60c5\u51b5\u7b49\u4e0d\u540c\u7ef4\u5ea6\u8fdb\u884c\u5206\u6790\uff0c\u8be5\u529f\u80fd\u53ea\u6709\u7cfb\u7edf\u7ba1\u7406\u5458\u89d2\u8272\u53ef\u67e5\u770b\u3002![\u57fa\u7840\u8d44\u6e90\u5206\u6790](img/quick_start/\u57fa\u7840\u8d44\u6e90\u5206\u6790.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u4e91\u4e3b\u673a\u5206\u6790',
+        content:
+          '!!! Abstract "" \u5bf9\u7eb3\u7ba1\u7684\u4e91\u4e3b\u673a\u4ece\u4e0d\u540c\u7ef4\u5ea6\u8fdb\u884c\u53ef\u89c6\u5316\u5206\u6790\uff0c\u67e5\u770b\u4e91\u4e3b\u673a\u7684\u8d8b\u52bf\u3001\u8d44\u6e90\u4f7f\u7528\u60c5\u51b5\u3001\u8fd0\u884c\u72b6\u6001\u3001\u8d44\u6e90\u5206\u5e03\u7b49\u3002![\u4e91\u4e3b\u673a\u5206\u6790](img/quick_start/\u4e91\u4e3b\u673a\u5206\u6790.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u78c1\u76d8\u5206\u6790',
+        content:
+          '!!! Abstract "" \u5bf9\u7eb3\u7ba1\u7684\u78c1\u76d8\u4ece\u4e0d\u540c\u7ef4\u5ea6\u8fdb\u884c\u53ef\u89c6\u5316\u5206\u6790\uff0c\u67e5\u770b\u78c1\u76d8\u7684\u8d8b\u52bf\u3001\u8d44\u6e90\u4f7f\u7528\u60c5\u51b5\u3001\u8fd0\u884c\u72b6\u6001\u3001\u8d44\u6e90\u5206\u5e03\u7b49\u3002![\u4e91\u78c1\u76d8\u4f18\u5316](img/quick_start/\u78c1\u76d8\u5206\u6790.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u4e91\u4e3b\u673a\u4f18\u5316',
+        content:
+          ' !!! Abstract "" \u6839\u636e\u4f18\u5316\u7b56\u7565\u67e5\u627e\u51fa\u9700\u8981\u4f18\u5316\u7684\u8d44\u6e90\uff0c\u7528\u6237\u53ef\u4ee5\u81ea\u5b9a\u4e49\u4f18\u5316\u7b56\u7565\u7684\u7b5b\u9009\u6761\u4ef6\uff1b \u652f\u6301\u67e5\u8be2\u5efa\u8bae\u5347\u914d\u3001\u5efa\u8bae\u964d\u914d\u3001\u53d8\u66f4\u4ed8\u8d39\u65b9\u5f0f\u3001\u5efa\u8bae\u56de\u6536\u7684\u4e91\u4e3b\u673a\u3002 ![\u4e91\u4e3b\u673a\u4f18\u5316](img/quick_start/\u4e91\u4e3b\u673a\u4f18\u5316.png){ width="1235px" }!!! Abstract "" \u70b9\u51fb\u6bcf\u4e2a\u4f18\u5316\u7b56\u7565\u9762\u677f\u53f3\u4e0a\u89d2\u7684\u8bbe\u7f6e\u6309\u94ae\uff0c\u53ef\u4ee5\u5bf9\u4f18\u5316\u7b56\u7565\u7b5b\u9009\u6761\u4ef6\u8fdb\u884c\u81ea\u5b9a\u4e49\u8bbe\u7f6e\uff0c\u8bbe\u7f6e\u4fdd\u5b58\u540e\u5219\u6309\u7167\u6700\u65b0\u7684\u7b56\u7565\u8fdb\u884c\u67e5\u8be2\u8d44\u6e90\u3002![\u8d44\u6e90\u4f18\u5316\u7b56\u7565](img/quick_start/\u4e91\u4e3b\u673a\u4f18\u5316\u7b56\u7565.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790',
+        content:
+          '!!! Abstract "" \u6dfb\u52a0\u5b8c\u4e91\u8d26\u53f7\u4fbf\u53ef\u5bf9\u5df2\u7eb3\u7ba1\u7684\u8d44\u6e90\u4ece\u5206\u5e03\u3001\u5bb9\u91cf\u3001\u4f7f\u7528\u60c5\u51b5\u7b49\u5404\u7ef4\u5ea6\u8fdb\u884c\u5206\u6790\uff0c\u5e76\u63d0\u4f9b\u8d44\u6e90\u4f18\u5316\u5efa\u8bae\u3002'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u603b\u89c8',
+        content:
+          '!!! Abstract "" \u4ece\u4e0d\u540c\u7ef4\u5ea6\u5c55\u793a\u6700\u8fd1\u4e00\u6b21\u626b\u63cf\u68c0\u6d4b\u7ed3\u679c\u7684\u7edf\u8ba1\u4fe1\u606f\u3002![\u5b89\u5168\u5408\u89c4\u603b\u89c8](img/quick_start/\u5b89\u5168\u5408\u89c4-\u603b\u89c8.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u5408\u89c4\u626b\u63cf',
+        content:
+          '!!! Abstract "" \u652f\u6301\u7ba1\u7406\u5458\u4e00\u952e\u626b\u63cf\uff1b \u652f\u6301\u7ba1\u7406\u5458\u53ef\u4ee5\u6309\u89c4\u5219\u7ec4\u3001\u8d44\u6e90\u7c7b\u578b\u3001\u4e91\u8d26\u53f7\u67e5\u770b\u626b\u63cf\u89c4\u5219\u53ca\u626b\u63cf\u7ed3\u679c\u8be6\u60c5\u3002![\u626b\u63cf\u68c0\u67e5](img/quick_start/\u626b\u63cf\u68c0\u67e5.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u89c4\u5219\u8bbe\u7f6e',
+        content:
+          '!!! Abstract "" \u7cfb\u7edf\u5185\u7f6e\u4e86\u591a\u6761\u5408\u89c4\u89c4\u5219\uff0c\u5e76\u652f\u6301\u7ba1\u7406\u5458\u6309\u7167\u4f01\u4e1a\u8981\u6c42\u81ea\u5b9a\u4e49\u5408\u89c4\u89c4\u5219; \u652f\u6301\u7ba1\u7406\u5458\u5f00\u542f\u548c\u5173\u95ed\u89c4\u5219\uff0c\u5173\u95ed\u7684\u89c4\u5219\u4e0d\u4f1a\u5728\u3010\u5408\u89c4\u626b\u63cf\u3011\u4e2d\u663e\u793a\u8be5\u89c4\u5219\uff0c\u4e00\u952e\u626b\u63cf\u65f6\u4e5f\u4e0d\u4f1a\u626b\u63cf\u8be5\u89c4\u5219\u3002![\u5408\u89c4\u89c4\u5219](img/quick_start/\u5408\u89c4\u89c4\u5219.png){ width="1235px" }!!! Abstract "" \u65b0\u589e\u4e00\u4e2a\u963f\u91cc\u4e91\u7684\u78c1\u76d8\u662f\u5426\u5f00\u542f\u52a0\u5bc6\u8bbe\u7f6e\u7684\u68c0\u6d4b\u89c4\u5219\uff0c\u64cd\u4f5c\u5982\u4e0b\uff1a![\u521b\u5efa\u5408\u89c4\u89c4\u5219](img/quick_start/\u521b\u5efa\u5408\u89c4\u89c4\u5219.png){ width="1235px" }!!! Abstract "" \u6dfb\u52a0\u5b8c\u89c4\u5219\u540e\uff0c\u5728\u3010\u5408\u89c4\u626b\u63cf\u3011\u4e2d\u53d8\u53ef\u4ee5\u770b\u5230\u8be5\u89c4\u5219\uff0c\u70b9\u51fb\u3010\u4e00\u952e\u626b\u63cf\u3011\u540e\u53ef\u4ee5\u9009\u62e9\u6539\u89c4\u5219\u6240\u5728\u7684\u89c4\u5219\u7ec4\u8fdb\u884c\u8d44\u6e90\u626b\u63cf\u3002![\u65b0\u589e\u89c4\u5219\u626b\u63cf](img/quick_start/\u626b\u63cf\u68c0\u67e5-\u65b0\u589e\u7684\u89c4\u5219.png){ width="1235px" }![\u4e00\u952e\u626b\u63cf\u65b0\u589e\u89c4\u5219](img/quick_start/\u9009\u62e9\u626b\u63cf\u65b0\u589e\u89c4\u5219\u7684\u7ec4.png){ width="1235px" }!!! Abstract "" \u70b9\u51fb\u76f8\u5e94\u89c4\u5219\u7684\u201c\u626b\u63cf\u7ed3\u679c\u8be6\u60c5\u201d\u5b57\u6bb5\uff0c\u53ef\u4ee5\u8fdb\u5165\u626b\u63cf\u8d44\u6e90\u8be6\u60c5\u9875\u9762\u3002![\u626b\u63cf\u7ed3\u679c\u8be6\u60c5](img/quick_start/\u626b\u63cf\u7ed3\u679c\u8be6\u60c5.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u89c4\u5219\u7ec4',
+        content:
+          '!!! Abstract "" \u652f\u6301\u7528\u6237\u81ea\u5b9a\u4e49\u89c4\u5219\u7ec4\u5c06\u626b\u63cf\u89c4\u5219\u8fdb\u884c\u5206\u7ec4\u3002![\u5408\u89c4\u89c4\u5219\u7ec4](img/quick_start/\u89c4\u5219\u7ec4.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u98ce\u9669\u6761\u4f8b',
+        content:
+          '!!! Abstract "" \u5f53\u524d\u98ce\u9669\u6761\u4f8b\u662f\u6839\u636e\u7b49\u4fdd 2.0 \u7b49\u7ea7\u4fdd\u62a4\u57fa\u672c\u8981\u6c42\u6761\u6b3e\u53ca\u6539\u8fdb\u5efa\u8bae\u8bf4\u660e\uff1b \u7cfb\u7edf\u5185\u7f6e\u7684\u6761\u6b3e\u8986\u76d6\u5b89\u5168\u5ba1\u8ba1\u3001\u8bbf\u95ee\u63a7\u5236\u3001\u5165\u4fb5\u9632\u8303\u3001\u7f51\u7edc\u67b6\u6784\u7b49127\u6761\u98ce\u9669\u6761\u4f8b\uff1b \u7528\u6237\u5728\u81ea\u5b9a\u4e49\u89c4\u5219\u65f6\u53ef\u4ee5\u5173\u8054\u98ce\u9669\u6761\u4f8b\uff0c\u5173\u8054\u98ce\u9669\u6761\u4f8b\u7684\u89c4\u5219\uff0c\u5728\u67e5\u770b\u626b\u63cf\u7ed3\u679c\u65f6\u53ef\u4ee5\u770b\u5230\u76f8\u5173\u7684\u6539\u8fdb\u5efa\u8bae\u3002![\u626b\u63cf\u7ed3\u679c\u8be6\u60c5](img/quick_start/\u98ce\u9669\u6761\u4f8b.png){ width="1235px" }![\u626b\u63cf\u7ed3\u679c\u8be6\u60c5](img/quick_start/\u626b\u63cf\u7ed3\u679c\u6539\u8fdb\u5efa\u8bae.png){ width="1235px" }'
+      },
+      {
+        title:
+          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4',
+        content:
+          '!!! Abstract "" \u8be5\u6a21\u5757\u9488\u5bf9\u5bf9\u7ba1\u7406\u5458\u63d0\u4f9b\u67e5\u770b\u4e91\u5e73\u53f0\u4e0a\u7684\u4e91\u8d44\u6e90\u7684\u76f8\u5173\u914d\u7f6e\u662f\u5426\u7b26\u5408\u7b49\u4fdd\u6761\u6b3e\u6216\u4f01\u4e1a\u914d\u7f6e\u89c4\u8303\uff1b \u5f53\u524d\u652f\u6301\u68c0\u6d4b\u7684\u8d44\u6e90\u7c7b\u578b\u4e3a\uff1a\u4e91\u670d\u52a1\u5668\u3001\u4e91\u78c1\u76d8\u3001\u5f39\u6027 IP\u3001\u5bf9\u8c61\u5b58\u50a8\u3001\u5b89\u5168\u7ec4\u3001VPC\u3001\u8d1f\u8f7d\u5747\u8861\u3001\u4e91\u6570\u636e\u5e93\u3001\u5bbf\u4e3b\u673a\u3001\u5b58\u50a8\u5668\u3001\u8d44\u6e90\u6c60\u3001RAM \u7528\u6237; \u652f\u6301\u7684\u4e91\u5e73\u53f0\uff1a\u963f\u91cc\u4e91\u3001\u534e\u4e3a\u4e91\u3001\u817e\u8baf\u4e91\u3001VMware\u3001OpenStack\u3002'
+      }
+    ]
+  }
+])
+
+const form = reactive({
+  name: '',
+  region: '',
+  type: ''
+})
+
+const options = ref([])
 
 function splitDocument() {
   loading.value = true
   let fd = new FormData()
-  console.log(documentsFiles.value)
   documentsFiles.value.forEach((item) => {
     if (item?.raw) {
       fd.append('file', item?.raw)
@@ -45,7 +320,8 @@ function splitDocument() {
   })
 
   DatasetApi.postSplitDocument(fd)
-    .then((res) => {
+    .then((res: any) => {
+      segmentList.value = res
       loading.value = false
     })
     .catch(() => {
@@ -57,8 +333,28 @@ onMounted(() => {})
 </script>
 <style scoped lang="scss">
 .set-rules {
+  width: 100%;
   &__radio {
     display: block;
+    .el-radio {
+      white-space: break-spaces;
+      width: 100%;
+      height: 100%;
+      padding: 16px;
+      line-height: 22px;
+      color: var(--app-text-color-primary);
+    }
+    :deep(.el-radio__label) {
+      padding-left: 32px;
+    }
+    :deep(.el-radio__input) {
+      position: absolute;
+      top: 30px;
+    }
+  }
+  .right-height {
+    max-height: calc(100vh - 330px);
+    overflow-x: hidden;
   }
 }
 </style>
diff --git a/ui/src/views/dataset/step/UploadDocument.vue b/ui/src/views/dataset/step/UploadDocument.vue
index 5c77b41e7..fbba51235 100644
--- a/ui/src/views/dataset/step/UploadDocument.vue
+++ b/ui/src/views/dataset/step/UploadDocument.vue
@@ -1,8 +1,11 @@
 <template>
-  <!-- 基本信息 -->
+    <div class="upload-document">
+        <!-- 基本信息 -->
   <BaseForm ref="BaseFormRef" />
   <!-- 上传文档 -->
   <UploadComponent ref="UploadComponentRef" />
+    </div>
+
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
@@ -32,4 +35,10 @@ defineExpose({
   onSubmit
 })
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.upload-document {
+  width: 70%;
+  margin: 0 auto;
+
+}
+</style>

From 98681964d7ce4f3808b80b54e4bc59b5713e0270 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 7 Nov 2023 15:30:15 +0800
Subject: [PATCH 07/18] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=9B=86?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/layout/components/app-main/index.vue   |  1 -
 .../layout/components/sidebar/SidebarItem.vue |  4 +++
 ui/src/layout/components/sidebar/index.vue    | 14 ++++-----
 ui/src/router/index.ts                        |  2 +-
 ui/src/router/modules/dataset.ts              | 31 +++++++++++++------
 ui/src/router/modules/setting.ts              |  7 ++++-
 ui/src/views/dataset/DatasetDoc.vue           |  9 +++++-
 ui/src/views/dataset/DatasetSetting.vue       | 14 +++++++++
 ui/src/views/dataset/index.vue                |  9 ++++--
 .../setting/component/PermissionSetting.vue   | 12 +++----
 10 files changed, 73 insertions(+), 30 deletions(-)
 create mode 100644 ui/src/views/dataset/DatasetSetting.vue

diff --git a/ui/src/layout/components/app-main/index.vue b/ui/src/layout/components/app-main/index.vue
index 454ab8b87..61cb19886 100644
--- a/ui/src/layout/components/app-main/index.vue
+++ b/ui/src/layout/components/app-main/index.vue
@@ -14,7 +14,6 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 const cachedViews: any = ref([])
-
 onBeforeUpdate(() => {
   let isCached = route.meta?.cache
   let name = route.name
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index ca5a9f025..cdc2dc992 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -31,6 +31,10 @@ defineProps<{
     padding: 13px 12px 13px 16px !important;
     font-weight: 500;
     border-radius: 4px;
+    &:hover {
+      background: none;
+      color: var(--el-menu-active-color);
+    }
   }
 
   .el-menu-item.is-active {
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
index 4acd6e05a..2c7ad35b6 100644
--- a/ui/src/layout/components/sidebar/index.vue
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="sidebar">
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu :default-active="activeMenu">
+      <el-menu :default-active="activeMenu" router>
         <sidebar-item
-          :menu="menu"
           v-hasPermission="menu.meta?.permission"
           v-for="(menu, index) in subMenuList"
           :key="index"
+          :menu="menu"
         >
         </sidebar-item>
       </el-menu>
@@ -21,16 +21,14 @@ import { getChildRouteListByPathAndName } from '@/router/index'
 import SidebarItem from './SidebarItem.vue'
 
 const route = useRoute()
+
 const subMenuList = computed(() => {
-  return getChildRouteListByPathAndName(route.path, route.name)
+  return getChildRouteListByPathAndName(route.meta.parentPath, route.meta.parentName)
 })
 
 const activeMenu = computed(() => {
-  const { meta, path } = route
-  if (meta.activeMenu) {
-    return meta.activeMenu
-  }
-  return path
+  const { path, meta } = route
+  return meta.active || path
 })
 </script>
 
diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts
index d66a703ce..60662f09b 100644
--- a/ui/src/router/index.ts
+++ b/ui/src/router/index.ts
@@ -47,7 +47,7 @@ router.beforeEach(
   }
 )
 
-export const getChildRouteListByPathAndName = (path: string, name?: RouteRecordName | null | undefined) => {
+export const getChildRouteListByPathAndName = (path: any, name?: RouteRecordName | any) => {
   return getChildRouteList(routes, path, name)
 }
 
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index bef4e80d9..65fd18cdf 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -18,24 +18,35 @@ const datasetRouter = {
       hidden: true
     },
     {
-      path: '/dataset/doc',
-      name: 'DatasetDoc',
-      meta: { icon: 'House', title: '文档', activeMenu: '/dataset' },
+      path: '/dataset/:id',
+      name: 'DatasetDetail',
+      meta: { title: '文档', activeMenu: '/dataset' },
       component: Layout,
       hidden: true,
-      redirect: '/dataset/doc',
       children: [
         {
-          path: '/dataset/doc',
+          path: 'doc',
           name: 'DatasetDoc',
-          meta: { icon: 'House', title: '文档' },
+          meta: {
+            icon: 'Document',
+            title: '文档',
+            active: 'doc',
+            parentPath: '/dataset/:id',
+            parentName: 'DatasetDetail'
+          },
           component: () => import('@/views/dataset/DatasetDoc.vue')
         },
         {
-          path: '/dataset/doc',
-          name: 'DatasetDoc',
-          meta: { icon: 'House', title: '设置' },
-          component: () => import('@/views/dataset/DatasetDoc.vue')
+          path: 'setting',
+          name: 'DatasetSetting',
+          meta: {
+            icon: 'Setting',
+            title: '设置',
+            active: 'setting',
+            parentPath: '/dataset/:id',
+            parentName: 'DatasetDetail'
+          },
+          component: () => import('@/views/dataset/DatasetSetting.vue')
         }
       ]
     }
diff --git a/ui/src/router/modules/setting.ts b/ui/src/router/modules/setting.ts
index e99761680..48124a9a3 100644
--- a/ui/src/router/modules/setting.ts
+++ b/ui/src/router/modules/setting.ts
@@ -9,7 +9,12 @@ const settingRouter = {
     {
       path: '/setting',
       name: 'setting',
-      meta: { icon: 'app-team', title: '团队管理' },
+      meta: {
+        icon: 'app-team',
+        title: '团队管理',
+        parentPath: '/setting',
+        parentName: 'setting'
+      },
       component: () => import('@/views/setting/index.vue')
     }
   ]
diff --git a/ui/src/views/dataset/DatasetDoc.vue b/ui/src/views/dataset/DatasetDoc.vue
index bde12b081..f5eb41f56 100644
--- a/ui/src/views/dataset/DatasetDoc.vue
+++ b/ui/src/views/dataset/DatasetDoc.vue
@@ -1,5 +1,12 @@
 <template>
-  <div>dataset 文档</div>
+  <LayoutContainer header="文档">
+    <div class="main-calc-height">
+      <div class="p-24">
+       1111
+      </div>
+  
+    </div>
+  </LayoutContainer>
 </template>
 <script setup lang="ts">
 
diff --git a/ui/src/views/dataset/DatasetSetting.vue b/ui/src/views/dataset/DatasetSetting.vue
new file mode 100644
index 000000000..5a792847b
--- /dev/null
+++ b/ui/src/views/dataset/DatasetSetting.vue
@@ -0,0 +1,14 @@
+<template>
+  <LayoutContainer header="设置">
+    <div class="main-calc-height">
+      <div class="p-24">
+        <BaseForm />
+      </div>
+  
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import BaseForm from '@/views/dataset/component/BaseForm.vue'
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 115a81462..0d9b3664b 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -28,7 +28,12 @@
           :key="index"
           class="mt-8"
         >
-          <CardBox :title="item.name" :description="item.desc" class="cursor">
+          <CardBox
+            :title="item.name"
+            :description="item.desc"
+            class="cursor"
+            @click="router.push({ path: `/dataset/${item.id}/doc` })"
+          >
             <template #mouseEnter>
               <el-tooltip effect="dark" content="删除" placement="top">
                 <el-button text @click.stop="deleteDateset(item)" class="delete-button">
@@ -59,7 +64,7 @@ import datasetApi from '@/api/dataset'
 import type { datasetListRequest } from '@/api/type/dataset'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { useRouter } from 'vue-router'
-import { numberFormat } from '@/utils/utils';
+import { numberFormat } from '@/utils/utils'
 const router = useRouter()
 
 const loading = ref(false)
diff --git a/ui/src/views/setting/component/PermissionSetting.vue b/ui/src/views/setting/component/PermissionSetting.vue
index 73dcc6955..ffc782543 100644
--- a/ui/src/views/setting/component/PermissionSetting.vue
+++ b/ui/src/views/setting/component/PermissionSetting.vue
@@ -1,28 +1,28 @@
 <template>
-  <el-input v-model="filterText" placeholder="搜索" prefix-icon="Search"  class="mb-16" />
+  <el-input v-model="filterText" placeholder="搜索" prefix-icon="Search" class="mb-16" />
 
   <el-table :data="data" :max-height="tableHeight">
     <el-table-column prop="name" label="数据集名称" />
     <el-table-column label="管理" align="center">
-      <template #header>
+      <!-- <template #header>
         <el-checkbox
           v-model="allChecked[MANAGE]"
           label="管理"
           @change="handleCheckAllChange($event, MANAGE)"
         />
-      </template>
+      </template> -->
       <template #default="{ row }">
         <el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
       </template>
     </el-table-column>
     <el-table-column label="使用" align="center">
-      <template #header>
+      <!-- <template #header>
         <el-checkbox
           v-model="allChecked[USE]"
           label="使用"
           @change="handleCheckAllChange($event, USE)"
         />
-      </template>
+      </template> -->
       <template #default="{ row }">
         <el-checkbox v-model="row.operate[USE]" @change="checkedOperateChange(USE, row)" />
       </template>
@@ -78,7 +78,7 @@ function handleCheckAllChange(val: string | number | boolean, Name: string | num
   }
 }
 function checkedOperateChange(Name: string | number, row: any) {
-  if (Name === MANAGE) {
+  if (Name === MANAGE && row.operate[MANAGE]) {
     props.data.map((item: any) => {
       if (item.id === row.id) {
         item.operate[USE] = true

From 68c6d409be19a573656531a32a9080f2da440e18 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 7 Nov 2023 19:04:59 +0800
Subject: [PATCH 08/18] =?UTF-8?q?feat:=20=E6=96=87=E6=A1=A3=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         |  16 ++-
 ui/src/layout/components/app-main/index.vue   |   5 +-
 ui/src/layout/components/sidebar/index.vue    |   3 +-
 .../components/top-bar/top-menu/MenuItem.vue  |   7 +-
 ui/src/layout/main-layout/index.vue           |   5 +-
 ui/src/router/modules/dataset.ts              |  14 +--
 ui/src/styles/app.scss                        |  24 +++++
 ui/src/styles/element-plus.scss               |  26 ++++-
 ui/src/utils/time.ts                          |  30 ++++++
 ui/src/utils/utils.ts                         |   2 +-
 ui/src/views/dataset/DatasetDoc.vue           |  14 ---
 ui/src/views/dataset/DatasetDocument.vue      | 100 ++++++++++++++++++
 ui/src/views/dataset/index.vue                |  10 +-
 ui/src/views/dataset/step/UploadDocument.vue  |  14 ++-
 ui/src/views/login/reset-password/index.vue   |   6 +-
 ui/src/views/setting/index.vue                |   2 +-
 16 files changed, 220 insertions(+), 58 deletions(-)
 create mode 100644 ui/src/utils/time.ts
 delete mode 100644 ui/src/views/dataset/DatasetDoc.vue
 create mode 100644 ui/src/views/dataset/DatasetDocument.vue

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index caee05921..a5de294f0 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -67,14 +67,26 @@ const postDateset: (data: any) => Promise<Result<any>> = (data) => {
  * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
  */
 const postSplitDocument: (data: any) => Promise<Result<any>> = (data) => {
-  console.log(data)
   return post(`${prefix}/document/split`, data)
 }
 
+/**
+ * 文档列表
+ * @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 })
+}
+
 export default {
   getDateset,
   getAllDateset,
   delDateset,
   postDateset,
-  postSplitDocument
+  postSplitDocument,
+  getDocument
 }
diff --git a/ui/src/layout/components/app-main/index.vue b/ui/src/layout/components/app-main/index.vue
index 61cb19886..c37ef497c 100644
--- a/ui/src/layout/components/app-main/index.vue
+++ b/ui/src/layout/components/app-main/index.vue
@@ -13,10 +13,11 @@ import { ref, onBeforeUpdate } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
+
 const cachedViews: any = ref([])
 onBeforeUpdate(() => {
-  let isCached = route.meta?.cache
-  let name = route.name
+  const { name, meta } = route
+  let isCached = meta?.cache
   if (isCached && name && !cachedViews.value.includes(name)) {
     cachedViews.value.push(name)
   }
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
index 2c7ad35b6..2a999da10 100644
--- a/ui/src/layout/components/sidebar/index.vue
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -23,7 +23,8 @@ import SidebarItem from './SidebarItem.vue'
 const route = useRoute()
 
 const subMenuList = computed(() => {
-  return getChildRouteListByPathAndName(route.meta.parentPath, route.meta.parentName)
+  const { meta } = route
+  return getChildRouteListByPathAndName(meta.parentPath, meta.parentName)
 })
 
 const activeMenu = computed(() => {
diff --git a/ui/src/layout/components/top-bar/top-menu/MenuItem.vue b/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
index d4021956b..317147f66 100644
--- a/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
+++ b/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
@@ -15,15 +15,14 @@ import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
 import { computed } from 'vue'
 const router = useRouter()
 const route = useRoute()
+
 const props = defineProps<{
   menu: RouteRecordRaw
 }>()
 
 const isActive = computed(() => {
-  return (
-    (route.name == props.menu.name && route.path == props.menu.path) ||
-    route?.meta?.activeMenu == props.menu.path
-  )
+  const { name, path, meta } = route
+  return (name == props.menu.name && path == props.menu.path) || meta?.activeMenu == props.menu.path
 })
 </script>
 <style lang="scss" scoped>
diff --git a/ui/src/layout/main-layout/index.vue b/ui/src/layout/main-layout/index.vue
index 38aaabd4c..dbb9438b2 100644
--- a/ui/src/layout/main-layout/index.vue
+++ b/ui/src/layout/main-layout/index.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="main-layout h-full flex">
     <div class="sidebar-container">
-      <Sidebar /></div>
+      <Sidebar />
+    </div>
     <div class="view-container">
       <AppMain />
     </div>
@@ -20,6 +21,6 @@ import { Sidebar, AppMain } from '../components'
   background-color: var(--sidebar-bg-color);
 }
 .view-container {
-  width: 100%;
+  width: calc(100% - var(--sidebar-width));
 }
 </style>
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index 65fd18cdf..43f1a507a 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -18,23 +18,23 @@ const datasetRouter = {
       hidden: true
     },
     {
-      path: '/dataset/:id',
+      path: '/dataset/:datasetId',
       name: 'DatasetDetail',
       meta: { title: '文档', activeMenu: '/dataset' },
       component: Layout,
       hidden: true,
       children: [
         {
-          path: 'doc',
-          name: 'DatasetDoc',
+          path: 'document',
+          name: 'DatasetDocument',
           meta: {
             icon: 'Document',
             title: '文档',
-            active: 'doc',
-            parentPath: '/dataset/:id',
+            active: 'document',
+            parentPath: '/dataset/:datasetId',
             parentName: 'DatasetDetail'
           },
-          component: () => import('@/views/dataset/DatasetDoc.vue')
+          component: () => import('@/views/dataset/DatasetDocument.vue')
         },
         {
           path: 'setting',
@@ -43,7 +43,7 @@ const datasetRouter = {
             icon: 'Setting',
             title: '设置',
             active: 'setting',
-            parentPath: '/dataset/:id',
+            parentPath: '/dataset/:datasetId',
             parentName: 'DatasetDetail'
           },
           component: () => import('@/views/dataset/DatasetSetting.vue')
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 113630a66..286683648 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -100,6 +100,9 @@ h4 {
 .h-full {
   height: 100%;
 }
+.w-240 {
+  width: 240px;
+}
 
 .mt-8 {
   margin-top: 8px;
@@ -249,3 +252,24 @@ h4 {
   background: var(--app-layout-bg-color);
   border: none;
 }
+
+// 表格第一行插入自定义行
+.table-custom-append {
+  .el-table__append-wrapper {
+    position: absolute;
+    top: 0;
+    border-bottom: var(--el-table-border);
+    width: 100%;
+    height: 49px;
+    box-sizing: border-box;
+    align-items: center;
+    display: flex;
+    padding: 0 12px;
+    &:hover {
+      background: var(--el-color-primary-light-9);
+    }
+  }
+  .el-table__body {
+    margin-top: 49px;
+  }
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 8fe0f580d..beada60bc 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -8,6 +8,14 @@
 
 .el-button {
   padding: 5px 12px;
+  &.is-text {
+    padding: 4px !important;
+    font-size: 16px;
+    max-height: 24px;
+    &:not(.is-disabled):hover {
+      background: var(--app-text-color-primary-light-1);
+    }
+  }
 }
 .el-avatar {
   --el-avatar-bg-color: var(--el-color-primary);
@@ -92,15 +100,24 @@
 }
 .el-table {
   --el-table-header-bg-color: var(--app-layout-bg-color);
-}
-.el-table {
   --el-table-text-color: var(--app-text-color-primary);
+  font-weight: 400;
   thead {
     color: var(--app-text-color-secondary);
+    th {
+      font-weight: 500;
+    }
   }
+
   th.el-table__cell {
     border-top: var(--el-table-border);
   }
+  .el-table__cell {
+    padding: 12px 0;
+  }
+  .el-checkbox {
+    height: 23px;
+  }
 }
 
 // el-steps
@@ -124,7 +141,6 @@
   }
 }
 
-.el-scrollbar {
-  overflow-x: hidden;
-
+.el-switch {
+  height: auto;
 }
diff --git a/ui/src/utils/time.ts b/ui/src/utils/time.ts
new file mode 100644
index 000000000..1a0ebc18a
--- /dev/null
+++ b/ui/src/utils/time.ts
@@ -0,0 +1,30 @@
+const getCheckDate = (timestamp: any) => {
+  if (!timestamp) return false
+  const dt = new Date(timestamp)
+  if (isNaN(dt.getTime())) return false
+  return dt
+}
+export const datetimeFormat = (timestamp: any) => {
+  const dt = getCheckDate(timestamp)
+  if (!dt) return timestamp
+
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+  const hh = (dt.getHours() + '').padStart(2, '0')
+  const mm = (dt.getMinutes() + '').padStart(2, '0')
+  const ss = (dt.getSeconds() + '').padStart(2, '0')
+
+  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+}
+
+export const dateFormat = (timestamp: any) => {
+  const dt = getCheckDate(timestamp)
+  if (!dt) return timestamp
+
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+
+  return `${y}-${m}-${d}`
+}
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts
index 8e63cb86e..b6229faba 100644
--- a/ui/src/utils/utils.ts
+++ b/ui/src/utils/utils.ts
@@ -1,4 +1,4 @@
-function toThousands(num: any) {
+export function toThousands(num: any) {
   return num.toString().replace(/\d+/, function (n: any) {
     return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
   })
diff --git a/ui/src/views/dataset/DatasetDoc.vue b/ui/src/views/dataset/DatasetDoc.vue
deleted file mode 100644
index f5eb41f56..000000000
--- a/ui/src/views/dataset/DatasetDoc.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <LayoutContainer header="文档">
-    <div class="main-calc-height">
-      <div class="p-24">
-       1111
-      </div>
-  
-    </div>
-  </LayoutContainer>
-</template>
-<script setup lang="ts">
-
-</script>
-<style lang="scss" scoped></style>
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
new file mode 100644
index 000000000..216e3601b
--- /dev/null
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -0,0 +1,100 @@
+<template>
+  <LayoutContainer header="文档">
+    <div class="main-calc-height">
+      <div class="p-24" v-loading="loading">
+        <div class="flex-between">
+          <el-button type="primary">上传文档</el-button>
+          <el-input
+            v-model="filterText"
+            placeholder="按 文档名称 搜索"
+            prefix-icon="Search"
+            class="w-240"
+          />
+        </div>
+        <el-table :data="documentData" class="table-custom-append mt-16">
+          <template #append>
+            <el-button type="primary" link>
+              <el-icon><Plus /></el-icon>
+              <span class="ml-4">快速创建空白文档</span>
+            </el-button>
+          </template>
+          <el-table-column prop="name" label="文件名称" />
+          <el-table-column prop="char_length" label="字符数" align="right">
+            <template #default="{ row }">
+              {{ toThousands(row.char_length) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="paragraph_count" label="分段" align="right" />
+          <el-table-column prop="status" label="文件状态">
+            <!-- <el-switch v-model="value1" /> -->
+          </el-table-column>
+          <el-table-column prop="name" label="启动状态">
+            <template #default="{ row }">
+              <el-switch v-model="row.is_active" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="create_time" label="创建时间" width="170">
+            <template #default="{ row }">
+              {{ datetimeFormat(row.create_time) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="update_time" label="更新时间" width="170">
+            <template #default="{ row }">
+              {{ datetimeFormat(row.update_time) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="操作" align="center">
+            <template #default="{ row }">
+              <span>
+                <el-tooltip effect="dark" content="刷新" placement="top">
+                  <el-button type="primary" text>
+                    <el-icon><RefreshRight /></el-icon>
+                  </el-button> </el-tooltip
+              ></span>
+              <span class="ml-4">
+                <el-tooltip effect="dark" content="删除" placement="top">
+                  <el-button type="primary" text>
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import datasetApi from '@/api/dataset'
+import { toThousands } from '@/utils/utils'
+import { datetimeFormat } from '@/utils/time'
+const router = useRouter()
+const route = useRoute()
+const { params } = route
+const { datasetId } = params
+
+const loading = ref(false)
+const filterText = ref('')
+const documentData = ref<any[]>([])
+
+function getList() {
+  loading.value = true
+  datasetApi
+    .getDocument(datasetId as string, filterText.value)
+    .then((res) => {
+      documentData.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 0d9b3664b..f78b0e708 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -2,12 +2,7 @@
   <div class="dataset-list-container p-24">
     <div class="flex-between">
       <h3>数据集</h3>
-      <el-input
-        v-model="filterText"
-        placeholder="搜索内容"
-        prefix-icon="Search"
-        style="width: 300px"
-      />
+      <el-input v-model="filterText" placeholder="搜索内容" prefix-icon="Search" class="w-240" />
     </div>
     <div v-loading.fullscreen.lock="loading">
       <el-row
@@ -32,7 +27,7 @@
             :title="item.name"
             :description="item.desc"
             class="cursor"
-            @click="router.push({ path: `/dataset/${item.id}/doc` })"
+            @click="router.push({ path: `/dataset/${item.id}/document` })"
           >
             <template #mouseEnter>
               <el-tooltip effect="dark" content="删除" placement="top">
@@ -128,7 +123,6 @@ onMounted(() => {
     position: absolute;
     right: 12px;
     top: 18px;
-    padding: 6px;
     height: auto;
   }
   .footer-content {
diff --git a/ui/src/views/dataset/step/UploadDocument.vue b/ui/src/views/dataset/step/UploadDocument.vue
index fbba51235..c7022e91c 100644
--- a/ui/src/views/dataset/step/UploadDocument.vue
+++ b/ui/src/views/dataset/step/UploadDocument.vue
@@ -1,11 +1,10 @@
 <template>
-    <div class="upload-document">
-        <!-- 基本信息 -->
-  <BaseForm ref="BaseFormRef" />
-  <!-- 上传文档 -->
-  <UploadComponent ref="UploadComponentRef" />
-    </div>
-
+  <div class="upload-document">
+    <!-- 基本信息 -->
+    <BaseForm ref="BaseFormRef" />
+    <!-- 上传文档 -->
+    <UploadComponent ref="UploadComponentRef" />
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
@@ -39,6 +38,5 @@ defineExpose({
 .upload-document {
   width: 70%;
   margin: 0 auto;
-
 }
 </style>
diff --git a/ui/src/views/login/reset-password/index.vue b/ui/src/views/login/reset-password/index.vue
index 0a518387f..2ee332430 100644
--- a/ui/src/views/login/reset-password/index.vue
+++ b/ui/src/views/login/reset-password/index.vue
@@ -63,6 +63,8 @@ import type { FormInstance, FormRules } from 'element-plus'
 import UserApi from '@/api/user'
 const router = useRouter()
 const route = useRoute()
+const { params } = route
+const { code, email } = params
 const resetPasswordForm = ref<ResetPasswordRequest>({
   password: '',
   re_password: '',
@@ -71,8 +73,6 @@ const resetPasswordForm = ref<ResetPasswordRequest>({
 })
 
 onMounted(() => {
-  const code = route.params.code
-  const email = route.params.email
   if (code && email) {
     resetPasswordForm.value.code = code as string
     resetPasswordForm.value.email = email as string
@@ -133,4 +133,4 @@ const resetPassword = () => {
 </script>
 <style lang="scss" scope>
 @import '../index.scss';
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index 525cd60d8..7e80ea2df 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -240,7 +240,7 @@ onMounted(() => {
 
   .permission-setting {
     box-sizing: border-box;
-    width: calc(100% - var(--team-manage-left-width) - 5px);
+    width: calc(100% - var(--team-manage-left-width));
     flex-direction: column;
   }
 

From 419ed3a3d5bc15bc663cc5e932c22236bd4655fc Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 8 Nov 2023 19:08:54 +0800
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/card-add/index.vue          |   5 +-
 ui/src/layout/components/sidebar/index.vue    |   3 +-
 ui/src/router/modules/dataset.ts              |   2 +-
 ui/src/styles/app.scss                        |  36 +-
 ui/src/styles/element-plus.scss               |  47 ++-
 ui/src/styles/variables.scss                  |  11 +
 ui/src/utils/message.ts                       |  30 +-
 ui/src/views/dataset/CreateDataset.vue        |  48 +--
 ui/src/views/dataset/DatasetDocument.vue      |   4 +-
 .../dataset/component/EditSegmentDialog.vue   |  80 ++++
 .../dataset/component/SegmentPreview.vue      |  58 ++-
 ui/src/views/dataset/index.vue                |   8 +-
 ui/src/views/dataset/step/SetRules.vue        | 346 ++++--------------
 ui/src/views/dataset/step/UploadDocument.vue  |  14 +-
 ui/src/views/setting/index.vue                |  13 +-
 15 files changed, 342 insertions(+), 363 deletions(-)
 create mode 100644 ui/src/views/dataset/component/EditSegmentDialog.vue

diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
index a842b1821..43b0127a5 100644
--- a/ui/src/components/card-add/index.vue
+++ b/ui/src/components/card-add/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card shadow="never" class="card-add">
     <div class="flex-center">
-      <AppIcon iconName="Plus" class="add-icon" />
+      <AppIcon iconName="Plus" class="add-icon p-8" />
       <span>{{ title }}</span>
     </div>
   </el-card>
@@ -30,9 +30,8 @@ defineProps({
   .add-icon {
     font-size: 14px;
     border-radius: 4px;
-    border: 1px solid #bbbfc4;
+    border: 1px solid var(--app-border-color-dark);
     background: var(--app-layout-bg-color);
-    padding: 8px;
     margin-right: 12px;
   }
   &:hover {
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
index 2a999da10..ab402452e 100644
--- a/ui/src/layout/components/sidebar/index.vue
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="sidebar p-8">
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu :default-active="activeMenu" router>
         <sidebar-item
@@ -35,7 +35,6 @@ const activeMenu = computed(() => {
 
 <style lang="scss">
 .sidebar {
-  padding: 8px;
   .el-menu {
     height: 100%;
     border: none;
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index 43f1a507a..0e8cdc5c6 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -11,7 +11,7 @@ const datasetRouter = {
       component: () => import('@/views/dataset/index.vue')
     },
     {
-      path: '/dataset/create',
+      path: '/dataset/:type', // create 或者 upload
       name: 'CreateDataset',
       meta: { activeMenu: '/dataset' },
       component: () => import('@/views/dataset/CreateDataset.vue'),
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 286683648..ad1524cdf 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -61,7 +61,6 @@ ul {
 // 滑块
 ::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: var(--ce-webkit-scrollbar-background-color, rgba(31, 35, 41, 0.3));
 }
 
 // 轨道
@@ -105,48 +104,48 @@ h4 {
 }
 
 .mt-8 {
-  margin-top: 8px;
+  margin-top: var(--app-base-px);
 }
 .mt-12 {
-  margin-top: 12px;
+  margin-top: calc(var(--app-base-px) + 4px);
 }
 .mt-16 {
-  margin-top: 16px;
+  margin-top: calc(var(--app-base-px) * 2);
 }
 .mb-8 {
-  margin-bottom: 8px;
+  margin-bottom: var(--app-base-px);
 }
 .mb-16 {
-  margin-bottom: 16px;
+  margin-bottom: calc(var(--app-base-px) * 2);
 }
 
 .ml-4 {
-  margin-left: 4px;
+  margin-left: calc(var(--app-base-px) - 4px);
 }
 .ml-8 {
-  margin-left: 8px;
+  margin-left: var(--app-base-px);
 }
 .ml-16 {
-  margin-left: 16px;
+  margin-left: calc(var(--app-base-px) * 2);
 }
 .mr-8 {
-  margin-right: 8px;
+  margin-right: var(--app-base-px);
 }
 .mr-12 {
-  margin-right: 12px;
+  margin-right: calc(var(--app-base-px) + 4px);
 }
 .mr-16 {
-  margin-right: 16px;
+  margin-right: calc(var(--app-base-px) * 3);
 }
 
 .p-8 {
-  padding: 8px;
+  padding: var(--app-base-px);
 }
 .p-16 {
-  padding: 16px;
+  padding: calc(var(--app-base-px) * 2);
 }
 .p-24 {
-  padding: 24px;
+  padding: calc(var(--app-base-px) * 3);
 }
 
 .flex {
@@ -212,7 +211,7 @@ h4 {
 
 // 内容部分 自适应高度
 .main-calc-height {
-  height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
+  height: var(--app-main-height);
 }
 
 // 标题前带竖线样式
@@ -253,6 +252,11 @@ h4 {
   border: none;
 }
 
+// 图标旋转90度
+.rotate-90 {
+  transform: rotateZ(90deg);
+}
+
 // 表格第一行插入自定义行
 .table-custom-append {
   .el-table__append-wrapper {
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index beada60bc..43a07b551 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -39,27 +39,20 @@
 }
 
 .el-message-box {
-  padding-bottom: 24px;
-  .app-confirm {
-    .app-confirm-title {
-      color: var(--app-text-color-primary);
-    }
-    .icon {
-      font-size: 24px;
-      color: var(--el-color-warning);
-    }
-    .app-confirm-decription {
-      margin-left: 40px;
-    }
+  --el-messagebox-font-size: 16px;
+  padding: 24px;
+  .el-message-box__header {
+    padding: 0;
   }
 }
 
 .el-message-box__content {
-  padding: 24px;
+  padding: 24px 0;
   color: var(--app-text-color-primary);
+  font-weight: 400;
 }
 .el-message-box__btns {
-  padding: 5px 24px 0;
+  padding: 0;
   button {
     min-width: 80px;
     &:nth-child(2) {
@@ -71,6 +64,13 @@
     border: var(--el-color-danger);
   }
 }
+.el-message-box__headerbtn {
+  right: -5px;
+  top: -5px;
+  .el-message-box__close {
+    font-size: 20px;
+  }
+}
 
 @media only screen and (min-width: 1400px) {
   .el-col-lg-6 {
@@ -89,7 +89,7 @@
 
 .el-card {
   --el-card-border-radius: 8px;
-  --el-card-padding: 16px;
+  --el-card-padding: calc(var(--app-base-px) * 2);
 }
 .el-dropdown {
   color: var(--app-text-color-primary);
@@ -144,3 +144,20 @@
 .el-switch {
   height: auto;
 }
+
+.el-slider {
+  --el-slider-button-size: 14px;
+  --el-slider-height: 4px;
+}
+.el-slider__button {
+  border: solid 1px var(--app-border-color-dark);
+  &.hover {
+    border: solid 2px var(--el-slider-main-bg-color);
+  }
+}
+.el-slider__runway.show-input {
+  margin-right: calc(var(--app-base-px) + 4px);
+}
+.el-slider__input {
+  width: 60px;
+}
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index d038f9404..9c56d5a87 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -1,16 +1,22 @@
 :root {
+  --app-base-px: 8px;
   --app-layout-bg-color: #f5f6f7;
   --app-text-color-primary: #1f2329;
   --app-text-color-primary-light-1: rgba(31, 35, 41, 0.1);
   --app-text-color-secondary: #646a73;
   --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
+  --app-border-color-dark: #bbbfc4;
 
   /** header 组件 */
   --app-header-height: 56px;
   --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-main-height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
+
   /** sidebar 组件 */
   --sidebar-bg-color: #ffffff;
   --sidebar-width: 240px;
@@ -24,4 +30,9 @@
 
   /** team */
   --team-manage-left-width: 280px;
+
+  /** dataset */
+  --create-dataset-height: calc(
+    100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 70px
+  );
 }
diff --git a/ui/src/utils/message.ts b/ui/src/utils/message.ts
index 0e07b8aef..efa676ec9 100644
--- a/ui/src/utils/message.ts
+++ b/ui/src/utils/message.ts
@@ -43,20 +43,30 @@ export const MsgError = (message: string) => {
  * @param 参数 message: {title, decription,type}
  */
 
-export const MsgConfirm = ({ title, decription }: any, options?: any) => {
-  const message: any = h('div', { class: 'app-confirm' }, [
-    h('h4', { class: 'app-confirm-title flex align-center' }, [
-      h(ElIcon, { class: 'icon' }, [h(WarningFilled)]),
-      h('span', { class: 'ml-16' }, title)
-    ]),
-    h('div', { class: 'app-confirm-decription mt-8' }, decription)
-  ])
-
+export const MsgConfirm = (title: string, decription: string, options?: any) => {
   const defaultOptions: Object = {
     showCancelButton: true,
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     ...options
   }
-  return ElMessageBox({ message, ...defaultOptions })
+  return ElMessageBox.confirm(decription, title, defaultOptions)
 }
+
+// export const MsgConfirm = ({ title, decription }: any, options?: any) => {
+//   const message: any = h('div', { class: 'app-confirm' }, [
+//     h('h4', { class: 'app-confirm-title flex align-center' }, [
+//       h(ElIcon, { class: 'icon' }, [h(WarningFilled)]),
+//       h('span', { class: 'ml-16' }, title)
+//     ]),
+//     h('div', { class: 'app-confirm-decription mt-8' }, decription)
+//   ])
+
+//   const defaultOptions: Object = {
+//     showCancelButton: true,
+//     confirmButtonText: '确定',
+//     cancelButtonText: '取消',
+//     ...options
+//   }
+//   return ElMessageBox({ message, ...defaultOptions })
+// }
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 5bc53d76d..eced95a7b 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -14,34 +14,37 @@
         </el-step>
       </el-steps>
     </template>
-    <div class="create-dataset__main flex main-calc-height">
-      <div class="create-dataset__component p-24">
+    <div class="create-dataset__main flex">
+      <div class="create-dataset__component">
         <component :is="steps[active].component" :ref="steps[active]?.ref" />
       </div>
-      <div class="create-dataset__footer text-right p-24 border-t">
-        <el-button @click="next">取 消</el-button>
-        <el-button @click="prev">上一步</el-button>
-        <el-button @click="next" type="primary">下一步</el-button>
-        <el-button @click="next" type="primary">开始导入</el-button>
-      </div>
+    </div>
+    <div class="create-dataset__footer text-right border-t">
+      <el-button @click="router.go(-1)">取 消</el-button>
+      <el-button @click="prev">上一步</el-button>
+      <el-button @click="next" type="primary">下一步</el-button>
+      <el-button @click="next" type="primary">开始导入</el-button>
     </div>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import UploadDocument from './step/UploadDocument.vue'
 import SetRules from './step/SetRules.vue'
 
+const router = useRouter()
+
 const steps = [
-  {
-    ref: 'SetRulesRef',
-    name: '设置分段规则',
-    component: SetRules
-  },
   {
     ref: 'UploadDocumentRef',
     name: '上传文档',
     component: UploadDocument
+  },
+  {
+    ref: 'SetRulesRef',
+    name: '设置分段规则',
+    component: SetRules
   }
 ]
 
@@ -54,7 +57,9 @@ async function next() {
     if (active.value++ > 2) active.value = 0
   }
 }
-const prev = () => {}
+const prev = () => {
+  active.value = 0
+}
 </script>
 <style lang="scss" scoped>
 .create-dataset {
@@ -70,21 +75,22 @@ const prev = () => {}
       right: -33% !important;
     }
   }
-  &__main {
-    flex-direction: column;
-  }
 
-  // height: 100%;
   &__component {
-    flex: 1;
-    flex-basis: auto;
     width: 100%;
+    height: var(--create-dataset-height);
     margin: 0 auto;
     overflow: hidden;
     box-sizing: border-box;
   }
   &__footer {
-    flex: 0 0 auto;
+    padding: 16px 24px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #ffffff;
+    width: 100%;
+    box-sizing: border-box;
   }
 }
 </style>
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
index 216e3601b..09e28cfcf 100644
--- a/ui/src/views/dataset/DatasetDocument.vue
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -3,7 +3,7 @@
     <div class="main-calc-height">
       <div class="p-24" v-loading="loading">
         <div class="flex-between">
-          <el-button type="primary">上传文档</el-button>
+          <el-button type="primary" @click="router.push({ path: '/dataset/upload' })" >上传文档</el-button>
           <el-input
             v-model="filterText"
             placeholder="按 文档名称 搜索"
@@ -11,7 +11,7 @@
             class="w-240"
           />
         </div>
-        <el-table :data="documentData" class="table-custom-append mt-16">
+        <el-table :data="documentData" class="table-custom-append mt-16 cursor">
           <template #append>
             <el-button type="primary" link>
               <el-icon><Plus /></el-icon>
diff --git a/ui/src/views/dataset/component/EditSegmentDialog.vue b/ui/src/views/dataset/component/EditSegmentDialog.vue
new file mode 100644
index 000000000..c198fe5f0
--- /dev/null
+++ b/ui/src/views/dataset/component/EditSegmentDialog.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog title="编辑分段" v-model="dialogVisible" width="600">
+    <el-form
+      ref="segmentFormRef"
+      :model="segmentForm"
+      label-position="top"
+      :rules="rules"
+      @submit.prevent
+    >
+      <el-form-item label="分段标题">
+        <el-input v-model="segmentForm.title" placeholder="请输入分段标题"> </el-input>
+      </el-form-item>
+      <el-form-item label="分段内容" prop="content">
+        <el-input
+          v-model="segmentForm.content"
+          placeholder="请输入分段内容"
+          maxlength="500"
+          show-word-limit
+          :autosize="{ minRows: 3, maxRow: 8 }"
+          type="textarea"
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle(segmentFormRef)"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { cloneDeep } from 'lodash';
+
+const emit = defineEmits(['updateContent'])
+
+const dialogVisible = ref<boolean>(false)
+
+const segmentForm = ref({
+  title: '',
+  content: ''
+})
+
+const segmentFormRef = ref<FormInstance>()
+
+const rules = ref<FormRules>({
+  content: [{ required: true, message: '请输入分段内容', trigger: 'blur' }]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    segmentForm.value = {
+      title: '',
+      content: ''
+    }
+  }
+})
+
+const open = (data: any) => {
+  segmentForm.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      emit('updateContent', segmentForm.value)
+      dialogVisible.value = false
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/SegmentPreview.vue
index 682fd4f20..29df31797 100644
--- a/ui/src/views/dataset/component/SegmentPreview.vue
+++ b/ui/src/views/dataset/component/SegmentPreview.vue
@@ -1,28 +1,30 @@
 <template>
   <el-tabs v-model="activeName" class="segment-tabs" @tab-click="handleClick">
-    <template v-for="(item, index) in data" :key="index">
+    <template v-for="(item, index) in newData" :key="index">
       <el-tab-pane :label="item.name" :name="index">
         <template #label>
-          <div class="flex">
-            <img :src="getImgUrl(item && item?.name)" alt="" height="22" />
+          <div class="flex-center">
+            <img :src="getImgUrl(item && item?.name)" alt="" height="16" />
             <span class="ml-4">{{ item?.name }}</span>
           </div>
         </template>
         <el-scrollbar>
           <div class="segment-list">
             <el-card
-              v-for="(child, i) in item.content"
-              :key="i"
+              v-for="(child, cIndex) in item.content"
+              :key="cIndex"
               shadow="never"
               class="card-never mb-16"
             >
               <div class="flex-between">
                 <span>{{ child.title }}</span>
                 <div>
-                  <el-button link>
+                  <!-- 编辑分段按钮 -->
+                  <el-button link @click="editHandle(child, index, cIndex)">
                     <el-icon><Edit /></el-icon>
                   </el-button>
-                  <el-button link>
+                  <!-- 删除分段按钮  -->
+                  <el-button link @click="deleteHandle(child, index, cIndex)">
                     <el-icon><Delete /></el-icon>
                   </el-button>
                 </div>
@@ -39,23 +41,59 @@
       </el-tab-pane>
     </template>
   </el-tabs>
+  <EditSegmentDialog ref="EditSegmentDialogRef" @updateContent="updateContent" />
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
+import EditSegmentDialog from './EditSegmentDialog.vue'
 import { filesize, getImgUrl } from '@/utils/utils'
-defineProps({
+import { MsgConfirm } from '@/utils/message'
+
+const props = defineProps({
   data: {
     type: Array<any>,
     default: () => []
   }
 })
 
+const emit = defineEmits(['update:data'])
+
+const EditSegmentDialogRef = ref()
+
 const activeName = ref(0)
+const currentPIndex = ref(null) as any
+const currentCIndex = ref(null) as any
+
+const newData = ref(props.data)
+
+function editHandle(item: any, index: number, cIndex: number) {
+  currentPIndex.value = index
+  currentCIndex.value = cIndex
+  EditSegmentDialogRef.value.open(item)
+}
+
+function deleteHandle(item: any, index: number, cIndex: number) {
+  MsgConfirm(`是否删除分段：${item.title}？`, `删除后将不会存入数据集，对本地文档无影响。`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  })
+    .then(() => {
+      newData.value[index].content.splice(cIndex, 1)
+      emit('update:data', newData.value)
+    })
+    .catch(() => {})
+}
+
+function updateContent(data: any) {
+  newData.value[currentPIndex.value].content[currentCIndex.value] = data
+  emit('update:data', newData.value)
+}
+
 onMounted(() => {})
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
+  // console.log(tab, event)
 }
 </script>
 <style scoped lang="scss">
@@ -86,6 +124,6 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   }
 }
 .segment-list {
-  height: calc(100vh - 340px);
+  height: calc(var(--create-dataset-height) - 125px);
 }
 </style>
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index f78b0e708..13352adf5 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -76,12 +76,10 @@ function loadDataset() {}
 
 function deleteDateset(row: any) {
   MsgConfirm(
+    `是否删除数据集：${row.name}？`,
+    `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`,
     {
-      title: `是否删除数据集：${row.name}？`,
-      decription: `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`,
-      confirmButtonText: '删除'
-    },
-    {
+      confirmButtonText: '删除',
       confirmButtonClass: 'danger'
     }
   )
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/SetRules.vue
index 0befed6ed..a1eb5544d 100644
--- a/ui/src/views/dataset/step/SetRules.vue
+++ b/ui/src/views/dataset/step/SetRules.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="set-rules">
-    <el-row>
-      <el-col :span="12">
+    <el-row class="set-rules-height">
+      <el-col :span="12" class="p-24">
         <h4 class="title-decoration-1 mb-8">设置分段规则</h4>
-
-        <div class="mr-16">
+        <div>
           <el-scrollbar>
-            <div class="right-height">
+            <div class="left-height">
               <el-radio-group v-model="radio" class="set-rules__radio">
                 <el-radio label="1" size="large" border class="mb-16">
                   <p>智能分段（推荐)</p>
@@ -18,29 +17,51 @@
                     >用户可根据文档规范自行设置分段标识符、分段长度以及清洗规则
                   </el-text>
                   <el-card shadow="never" class="card-never mt-16" v-if="radio === '2'">
-                    <el-form label-position="top" label-width="100px" :model="form">
-                      <el-form-item label="分段标识">
-                        <el-select
-                          v-model="form.name"
-                          multiple
-                          placeholder="请选择"
-                          style="width: 240px"
-                        >
+                    <div class="set-rules__form">
+                      <div class="form-item mb-16">
+                        <div class="title flex align-center mb-8">
+                          <span style="margin-right: 4px">分段标识</span>
+                          <el-popover
+                            placement="right"
+                            :width="400"
+                            trigger="hover"
+                            content="按照所选符号先后顺序做递归分割，分割结果超出分段长度将截取至分段长度。"
+                          >
+                            <template #reference>
+                              <el-icon style="font-size: 16px"><Warning /></el-icon>
+                            </template>
+                          </el-popover>
+                        </div>
+
+                        <el-select v-model="form.patterns" multiple placeholder="请选择">
                           <el-option
-                            v-for="item in options"
+                            v-for="item in patternsList"
                             :key="item"
                             :label="item"
                             :value="item"
-                          />
+                            multiple
+                          >
+                          </el-option>
                         </el-select>
-                      </el-form-item>
-                      <el-form-item label="分段长度">
-                        <el-slider v-model="form.name" show-input />
-                      </el-form-item>
-                      <el-form-item label="自动清洗">
-                        <el-switch v-model="form.name" />
-                      </el-form-item>
-                    </el-form>
+                      </div>
+                      <div class="form-item mb-16">
+                        <div class="title mb-8">分段长度</div>
+                        <el-slider
+                          v-model="form.limit"
+                          show-input
+                          :show-input-controls="false"
+                          :min="10"
+                          :max="1024"
+                        />
+                      </div>
+                      <div class="form-item mb-16">
+                        <div class="title mb-8">自动清洗</div>
+                        <el-switch v-model="form.with_filter" />
+                        <div style="margin-top: 4px">
+                          <el-text type="info">去掉重复多余符号空格、空行、制表符</el-text>
+                        </div>
+                      </div>
+                    </div>
                   </el-card>
                 </el-radio>
               </el-radio-group>
@@ -52,10 +73,10 @@
         </div>
       </el-col>
 
-      <el-col :span="12" class="border-l">
-        <div class="ml-16">
+      <el-col :span="12" class="p-24 border-l">
+        <div>
           <h4 class="title-decoration-1 mb-8">分段预览</h4>
-          <SegmentPreview :data="segmentList" />
+          <SegmentPreview v-model:data="segmentList" />
         </div>
       </el-col>
     </el-row>
@@ -68,247 +89,24 @@ import DatasetApi from '@/api/dataset'
 import useStore from '@/stores'
 const { dataset } = useStore()
 const documentsFiles = computed(() => dataset.documentsFiles)
+const patternType = ['空行', '#', '##', '###', '####', '-', '空格', '回车', '句号', '逗号', '分号']
+
+const marks = reactive({
+  10: '10',
+  1024: '1024'
+})
 
 const radio = ref('1')
 const loading = ref(false)
-const segmentList = ref<any[]>([
-  {
-    name: '1Panel.txt',
-    content: [
-      {
-        title: '\n\n1Panel \u7684\u529f\u80fd\u548c\u4f18\u52bf\u5305\u62ec\uff1a',
-        content:
-          '\u5feb\u901f\u5efa\u7ad9\uff1a\u6df1\u5ea6\u96c6\u6210 Wordpress \u548c Halo\uff0c\u57df\u540d\u7ed1\u5b9a\u3001SSL \u8bc1\u4e66\u914d\u7f6e\u7b49\u4e00\u952e\u641e\u5b9a\uff1b\u9ad8\u6548\u7ba1\u7406\uff1a\u901a\u8fc7 Web \u7aef\u8f7b\u677e\u7ba1\u7406 Linux \u670d\u52a1\u5668\uff0c\u5305\u62ec\u4e3b\u673a\u76d1\u63a7\u3001\u6587\u4ef6\u7ba1\u7406\u3001\u6570\u636e\u5e93\u7ba1\u7406\u3001\u5bb9\u5668\u7ba1\u7406\u7b49\uff1b\u5b89\u5168\u53ef\u9760\uff1a\u57fa\u4e8e\u5bb9\u5668\u6765\u7ba1\u7406\u548c\u90e8\u7f72\u5e94\u7528\uff0c\u6700\u5c0f\u6f0f\u6d1e\u66b4\u9732\u9762\uff0c\u63d0\u4f9b\u9632\u706b\u5899\u548c\u65e5\u5fd7\u5ba1\u8ba1\u7b49\u529f\u80fd\uff1b\u4e00\u952e\u5907\u4efd\uff1a\u652f\u6301\u4e00\u952e\u5907\u4efd\u548c\u6062\u590d\uff0c\u5907\u4efd\u6570\u636e\u5230\u5404\u7c7b\u4e91\u7aef\u5b58\u50a8\uff0c\u6c38\u4e0d\u4e22\u5931\u3002'
-      },
-      {
-        title: '\n\n1Panel \u5728\u7ebf\u5b89\u88c5\uff1a',
-        content:
-          '1.\u73af\u5883\u8981\u6c42\u5b89\u88c5\u524d\u8bf7\u786e\u4fdd\u60a8\u7684\u7cfb\u7edf\u7b26\u5408\u5b89\u88c5\u6761\u4ef6\uff1a\u64cd\u4f5c\u7cfb\u7edf\uff1a\u652f\u6301\u4e3b\u6d41 Linux \u53d1\u884c\u7248\u672c\uff08\u57fa\u4e8e Debian / RedHat\uff0c\u5305\u62ec\u56fd\u4ea7\u64cd\u4f5c\u7cfb\u7edf\uff09\uff1b\u670d\u52a1\u5668\u67b6\u6784\uff1ax86_64\u3001aarch64\u3001armv7l\u3001ppc64le\u3001s390x\uff1b\u5185\u5b58\u8981\u6c42\uff1a\u5efa\u8bae\u53ef\u7528\u5185\u5b58\u5728 1GB \u4ee5\u4e0a\uff1b\u6d4f\u89c8\u5668\u8981\u6c42\uff1a\u8bf7\u4f7f\u7528 Chrome\u3001FireFox\u3001IE10+\u3001Edge\u7b49\u73b0\u4ee3\u6d4f\u89c8\u5668\uff1b\u53ef\u8bbf\u95ee\u4e92\u8054\u7f51\u3002'
-      },
-      {
-        title: '\n\ncloudExplorer \u5728\u7ebf\u5b89\u88c5\uff1a',
-        content:
-          '1.\u73af\u5883\u8981\u6c42\u6309\u7167\u90e8\u7f72\u670d\u52a1\u5668\u8981\u6c42\u51c6\u5907\u597d\u90e8\u7f72\u73af\u5883\u540e\uff0c\u53ef\u901a\u8fc7 CloudExplorer Lite \u5feb\u901f\u5b89\u88c5\u811a\u672c\u4e00\u952e\u5feb\u901f\u90e8\u7f72\u3002**\u6ce8\u610f\uff1a** \u4e00\u952e\u5b89\u88c5\u91c7\u7528\u9ed8\u8ba4\u53c2\u6570\uff0c\u66f4\u591a\u6709\u5173\u79bb\u7ebf\u90e8\u7f72\u65b9\u5f0f\u53ef\u67e5\u770b\u672c\u6587\u6863\u7684\u3010\u79bb\u7ebf\u5b89\u88c5\u3011\u30022.\u5b89\u88c5\u90e8\u7f72GitHub release \u94fe\u63a5: https://github.com/1Panel-dev/1Panel/releasesRedHat / CentOS\uff0c curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sh quick_start.shUbuntu\uff0ccurl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.shDebian\uff0ccurl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh\u5b89\u88c5\u6210\u529f\u540e\uff0c\u63a7\u5236\u53f0\u4f1a\u6253\u5370\u9762\u677f\u8bbf\u95ee\u4fe1\u606f\uff0c\u53ef\u901a\u8fc7\u6d4f\u89c8\u5668\u8bbf\u95ee 1Panel\uff1ahttp://\u76ee\u6807\u670d\u52a1\u5668 IP \u5730\u5740:\u76ee\u6807\u7aef\u53e3/\u5b89\u5168\u5165\u53e3\u3002\u5982\u679c\u4f7f\u7528\u7684\u662f\u4e91\u670d\u52a1\u5668\uff0c\u8bf7\u81f3\u5b89\u5168\u7ec4\u5f00\u653e\u76ee\u6807\u7aef\u53e3\u3002ssh \u767b\u5f55 1Panel \u670d\u52a1\u5668\u540e\uff0c\u6267\u884c 1pctl user-info \u547d\u4ee4\u53ef\u83b7\u53d6\u5b89\u5168\u5165\u53e3\uff08entrance\uff09\u3002\u5b89\u88c5\u6210\u529f\u540e\uff0c\u53ef\u4f7f\u7528 1pctl \u547d\u4ee4\u884c\u5de5\u5177\u6765\u7ef4\u62a4 1Panel\u3002'
-      },
-      {
-        title: '\n\n\u4e91\u5e02\u573a\u955c\u50cf\u5b89\u88c5\uff1a',
-        content:
-          '1.\u767b\u5f55\u963f\u91cc\u4e91\u5b98\u65b9\u7f51\u7ad9\u5728\u60a8\u7684\u6d4f\u89c8\u5668\u4e2d\u6253\u5f00\u963f\u91cc\u4e91\u7684\u5b98\u65b9\u7f51\u7ad9\uff08https://www.aliyun.com/\uff09\u5e76\u767b\u5f55\u60a8\u7684\u8d26\u53f7\u30022.\u9009\u62e9 ECS \u5b9e\u4f8b\u5728\u963f\u91cc\u4e91\u7ba1\u7406\u63a7\u5236\u53f0\u4e2d\uff0c\u70b9\u51fb\u5de6\u4fa7\u83dc\u5355\u680f\u7684 \u4e91\u670d\u52a1\u5668 ECS \u9009\u9879\u30023.\u521b\u5efa ECS \u5b9e\u4f8b\u70b9\u51fb\u9875\u9762\u4e0a\u65b9\u7684 \u521b\u5efa\u5b9e\u4f8b \u6309\u94ae\uff0c\u5e76\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\u914d\u7f6e\uff1a\u5730\u57df\u53ca\u53ef\u7528\u533a\uff1a\u9009\u62e9\u9002\u5408\u60a8\u7684\u5730\u7406\u4f4d\u7f6e\u548c\u53ef\u7528\u533a\u57df\u3002\u5b9e\u4f8b\u914d\u7f6e\uff1a\u9009\u62e9\u9002\u5408\u60a8\u9700\u6c42\u7684\u5b9e\u4f8b\u89c4\u683c\u548c\u7f51\u7edc\u7c7b\u578b\u3002\u955c\u50cf\uff1a\u70b9\u51fb \u4e91\u5e02\u573a\u955c\u50cf \u9009\u9879\u5361\uff0c\u7136\u540e\u5728\u641c\u7d22\u6846\u4e2d\u8f93\u5165 1Panel \u5e76\u9009\u62e9\u955c\u50cf\u3002\u5b58\u50a8\uff1a\u914d\u7f6e\u7cfb\u7edf\u76d8\u548c\u6570\u636e\u76d8\u7684\u5927\u5c0f\u548c\u7c7b\u578b\u3002\u7f51\u7edc\u548c\u5b89\u5168\u7ec4\uff1a\u6839\u636e\u60a8\u7684\u9700\u6c42\u914d\u7f6e\u7f51\u7edc\u548c\u5b89\u5168\u7ec4\u3002\u5176\u4ed6\u9009\u9879\uff1a\u6839\u636e\u60a8\u7684\u9700\u6c42\u914d\u7f6e\u5176\u4ed6\u9009\u9879\u3002\u786e\u8ba4\u8ba2\u5355\uff1a\u786e\u8ba4\u60a8\u7684\u914d\u7f6e\u4fe1\u606f\u5e76\u70b9\u51fb"\u7acb\u5373\u8d2d\u4e70"\u6309\u94ae\u30024.\u7b49\u5f85\u5b9e\u4f8b\u521b\u5efa\u5b8c\u6210\u7b49\u5f85\u7247\u523b\uff0c\u76f4\u5230 ECS \u5b9e\u4f8b\u521b\u5efa\u5b8c\u6210\u3002\u60a8\u53ef\u4ee5\u5728 ECS \u5b9e\u4f8b\u5217\u8868\u4e2d\u770b\u5230\u65b0\u521b\u5efa\u7684\u5b9e\u4f8b\u30025.\u767b\u5f55 ECS \u5b9e\u4f8b\u70b9\u51fb ECS \u5b9e\u4f8b\u5217\u8868\u4e2d\u5bf9\u5e94\u5b9e\u4f8b\u7684 \u8fdc\u7a0b\u8fde\u63a5 \u6309\u94ae\uff0c\u9009\u62e9 \u7acb\u5373\u767b\u5f55\uff0c\u7136\u540e\u8f93\u5165\u767b\u5f55\u5bc6\u7801\u3002'
-      },
-      {
-        title: '\n\n6.\u4f7f\u7528\u6b65\u9aa4',
-        content:
-          '6.1 \u5b89\u5168\u7ec4\u653e\u884c 8090 \u7aef\u53e3\uff0c\u7aef\u53e3\u653e\u884c\u6559\u7a0b\uff1ahttps://help.aliyun.com/document_detail/25471.html6.2 \u83b7\u53d6\u9762\u677f\u7528\u6237\u4fe1\u606f:\u8f93\u5165\u83b7\u53d6\u9ed8\u8ba4\u5bc6\u7801\u547d\u4ee4\uff1a1pctl user-info\u8f93\u5165\u5b8c\uff0c\u56de\u8f66\u5373\u53ef\u83b7\u53d6\u7528\u6237\u4fe1\u606f6.3 \u8bbf\u95ee\u9762\u677f\u901a\u8fc7 http://\u670d\u52a1\u5668\u5916\u7f51IP:8090/\u5b89\u5168\u5165\u53e3 \u8bbf\u95ee\u9762\u677f\u7ba1\u7406\u9875\u9762\uff0c\u5982\uff1ahttp://172.16.10.1:8090/mm4h9iucdn\u8f93\u5165\u5e10\u53f7\u5bc6\u78016.4 \u9762\u677f\u8bbe\u7f6e\u4fee\u6539\u9762\u677f\u9ed8\u8ba4\u5e10\u53f7\u5bc6\u7801\u5f00\u59cb\u4f7f\u7528\u9762\u677f'
-      },
-      {
-        title: '\n\n\u5728\u7ebf\u5347\u7ea7\uff1a',
-        content:
-          '\u767b\u5f55 1Panel Web \u63a7\u5236\u53f0\uff0c\u5728\u9875\u9762\u53f3\u4e0b\u89d2\u70b9\u51fb \u3010\u68c0\u67e5\u66f4\u65b0\u3011 \u8fdb\u884c\u5728\u7ebf\u5347\u7ea7\u3002'
-      },
-      {
-        title: '\n\n\u547d\u4ee4\u884c\u5de5\u5177\uff1a',
-        content: '\u8bf7\u67e5\u770bhttps://1panel.cn/docs/installation/cli/'
-      },
-      {
-        title: '',
-        content:
-          '1Panel \u662f\u4e00\u4e2a\u73b0\u4ee3\u5316\u3001\u5f00\u6e90\u7684 Linux \u670d\u52a1\u5668\u8fd0\u7ef4\u7ba1\u7406\u9762\u677f\u3002'
-      }
-    ]
-  },
-  {
-    name: 'quick_start.md',
-    content: [
-      {
-        title: '# \u5feb\u901f\u5165\u95e8 ## 1 \u4e00\u952e\u90e8\u7f72',
-        content:
-          '!!! Abstract "" \u6309\u7167\u90e8\u7f72\u670d\u52a1\u5668\u8981\u6c42\u51c6\u5907\u597d\u90e8\u7f72\u73af\u5883\u540e\uff0c\u53ef\u901a\u8fc7 CloudExplorer Lite \u5feb\u901f\u5b89\u88c5\u811a\u672c\u4e00\u952e\u5feb\u901f\u90e8\u7f72\u3002 **\u6ce8\u610f\uff1a** \u4e00\u952e\u5b89\u88c5\u91c7\u7528\u9ed8\u8ba4\u53c2\u6570\uff0c\u66f4\u591a\u6709\u5173\u79bb\u7ebf\u90e8\u7f72\u65b9\u5f0f\u53ef\u67e5\u770b\u672c\u6587\u6863\u7684\u3010\u79bb\u7ebf\u5b89\u88c5\u3011\u3002 **\u90e8\u7f72\u670d\u52a1\u5668\u8981\u6c42:** ``` - \u64cd\u4f5c\u7cfb\u7edf\uff1aLinux \u64cd\u4f5c\u7cfb\u7edf\uff08\u63a8\u8350 CentOS 7 \u53ca\u4ee5\u4e0a\u7248\u672c\uff0cUbuntu 18 \u53ca\u4ee5\u4e0a\u7248\u672c\uff09 - CPU/\u5185\u5b58\uff1a8 \u6838 16 GB - \u78c1\u76d8\u7a7a\u95f4\uff1a200 GB - \u7f51\u7edc\u8981\u6c42\uff1a\u53ef\u8bbf\u95ee\u4e92\u8054\u7f51 ``` \u6267\u884c\u4ee5\u4e0b\u811a\u672c\u8fdb\u884c\u4e00\u952e\u5b89\u88c5\uff1a ``` /bin/bash -c "$(curl -fsSL https://resource.fit2cloud.com/cloudexplorer-lite/installer/releases/latest/quick_start.sh)" ``` CloudExplorer Lite \u662f\u4e00\u6b3e B/S \u67b6\u6784\u7684\u4ea7\u54c1\uff0c\u5373\u6d4f\u89c8\u5668/\u670d\u52a1\u5668\u7ed3\u6784\uff0c\u5728\u670d\u52a1\u5668\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u5ba2\u6237\u7aef\u901a\u8fc7\u6d4f\u89c8\u5668\u8bbf\u95ee\u4ee5\u4e0b\u5730\u5740\uff0c\u5373\u53ef\u5f00\u59cb\u4f7f\u7528\u3002 ``` http://\u76ee\u6807\u670d\u52a1\u5668IP\u5730\u5740\uff1a\u670d\u52a1\u8fd0\u884c\u7aef\u53e3 \u9ed8\u8ba4\u7528\u6237\u540d\uff1aadmin\uff0c\u9ed8\u8ba4\u5bc6\u7801\uff1acloudexplorer ```'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u4e3b\u9875',
-        content:
-          '!!! Abstract "" \u767b\u5f55 CloudExplorer Lite \u7cfb\u7edf\u540e\u9ed8\u8ba4\u8fdb\u5165\u4e3b\u9875\uff0c\u5206\u4e3a\u9876\u90e8\u5bfc\u822a\u3001\u5de6\u4fa7\u5bfc\u822a\u680f\u548c\u5de5\u4f5c\u533a\u57df\u4e09\u90e8\u5206\u3002 **\u9876\u90e8\u5bfc\u822a\u680f\uff1a** \u9876\u90e8\u663e\u793a\u7cfb\u7edflogo\u3001\u7528\u6237\u767b\u5f55\u8eab\u4efd\uff08\u7ec4\u7ec7\u548c\u89d2\u8272\uff09\u3001\u5e2e\u52a9\u6587\u6863\u3001\u4e2a\u4eba\u4fe1\u606f\u3002 **\u4ea7\u54c1\u670d\u52a1\uff1a** \u56fa\u5b9a\u6a21\u5757\u83dc\u5355\uff0c\u5305\u542b\u7ba1\u7406\u4e2d\u5fc3\u3001\u4e91\u4e3b\u673a\u670d\u52a1\u3001\u4e91\u8d26\u5355\u3001\u8fd0\u8425\u5206\u6790\u3001\u5b89\u5168\u5408\u89c4\u4e94\u4e2a\u670d\u52a1\u6a21\u5757\uff0c\u70b9\u51fb\u56fe\u6807\u4fbf\u53ef\u5207\u6362\u5230\u76f8\u5e94\u7684\u6a21\u5757\u4e2d\u3002 **\u5de5\u4f5c\u533a\u57df\uff1a** \u53f3\u4fa7\u4e3a\u5de5\u4f5c\u533a\u57df\uff0c\u663e\u793a\u4e3b\u9875\u7684\u5185\u5bb9\u5305\u542b\u4e2a\u4eba\u4fe1\u606f\u3001\u5feb\u6377\u670d\u52a1\u3001\u6211\u7684\u8d44\u6e90\u3001\u4e0d\u5408\u89c4\u89c4\u5219/\u8d44\u6e90\u7edf\u8ba1\u3001\u8d39\u7528\u6982\u89c8\u3001\u8d39\u7528\u8d8b\u52bf\u3001\u4e91\u4e3b\u673a\u4f18\u5316\u5efa\u8bae\u3001\u4e91\u4e3b\u673a\u8d8b\u52bf\u3001\u4e91\u4e3b\u673a\u72b6\u6001\u5206\u5e03\u3002![\u9996\u9875](./img/quick_start/\u4e3b\u9875.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u7ba1\u7406\u4e2d\u5fc3 ',
-        content:
-          '!!! Abstract "" \u4e91\u7ba1\u5e73\u53f0\u7684\u6838\u5fc3\u80fd\u529b\u4e4b\u4e00\uff0cCloudExplorer Lite \u4e3a\u7528\u6237\u63d0\u4f9b\u591a\u79df\u6237\u3001\u591a\u89d2\u8272\u7684\u7ba1\u7406\u6a21\u578b\uff1b \u91c7\u7528\u6a21\u5757\u5316\u8bbe\u8ba1\uff0c\u5373\u63d2\u5373\u7528\uff0c\u63d0\u4f9b\u6a21\u5757\u7ba1\u7406\u3002\u4f01\u4e1a\u53ef\u4ee5\u8f7b\u677e\u90e8\u7f72\u4e0d\u540c\u6a21\u5757\uff0c\u4ece\u800c\u6269\u5927\u5bf9\u4e91\u57fa\u7840\u8bbe\u65bd\u7684\u7ba1\u7406\u8303\u56f4\uff1b \u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u7ba1\u7406\u4e2d\u5fc3\u3011\u3002![\u7ba1\u7406\u4e2d\u5fc3](./img/quick_start/\u7ba1\u7406\u4e2d\u5fc3.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u4e91\u4e3b\u673a\u7ba1\u7406 ',
-        content:
-          '!!! Abstract "" CloudExplorer Lite \u63d0\u4f9b\u7edf\u4e00\u7684\u4e91\u4e3b\u673a\u751f\u547d\u5468\u671f\u7ba1\u7406\u64cd\u4f5c\u548c\u76d1\u63a7\u754c\u9762\uff0c\u57fa\u4e8e\u65e2\u6709\u7684\u7528\u6237\u7ba1\u7406\u4f53\u7cfb\uff0c\u7528\u6237\u53ef\u521b\u5efa\u3001\u53ef\u64cd\u4f5c\u7684\u8d44\u6e90\u90fd\u5177\u6709\u79df\u6237\u9694\u79bb\u5c5e\u6027\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u4e91\u4e3b\u673a\u7ba1\u7406\u3011\u3002![\u4e91\u4e3b\u673a\u7ba1\u7406](img/quick_start/\u4e91\u4e3b\u673a\u7ba1\u7406.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u4e91\u8d26\u5355  ',
-        content:
-          '!!! Abstract "" CloudExplorer Lite \u63d0\u4f9b\u7edf\u4e00\u7684\u8d39\u7528\u7ba1\u7406\u3001\u8d39\u7528\u5206\u644a\u3001\u81ea\u5b9a\u4e49\u591a\u7ef4\u5ea6\u8d26\u5355\u529f\u80fd\uff0c\u53ef\u4f5c\u4e3a\u4f01\u4e1a\u7684\u4e91\u8d44\u6e90\u6210\u672c\u5206\u6790\u4e2d\u5fc3\uff0c\u80fd\u591f\u5e2e\u52a9\u4f01\u4e1a\u7528\u6237\u6709\u6548\u964d\u4f4e\u4e91\u4e0a\u8d44\u6e90\u7684\u6210\u672c\u7ba1\u7406\u96be\u5ea6\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u4e91\u8d26\u5355\u3011\u3002![\u4e91\u8d26\u5355](img/quick_start/\u8d26\u5355\u603b\u89c8.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u8fd0\u8425\u5206\u6790',
-        content:
-          '!!! Abstract "" CloudExplorer Lite \u80fd\u591f\u5bf9\u4f01\u4e1a\u73b0\u6709\u7684\u4e91\u8d44\u6e90\u4ece\u5206\u5e03\u3001\u5bb9\u91cf\u3001\u4f7f\u7528\u60c5\u51b5\u7b49\u591a\u4e2a\u7ef4\u5ea6\u8fdb\u884c\u5206\u6790\uff0c\u5e76\u63d0\u4f9b\u8d44\u6e90\u4f18\u5316\u5efa\u8bae\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u8fd0\u8425\u5206\u6790\u3011\u3002![\u8fd0\u8425\u5206\u6790](img/quick_start/\u8fd0\u8425\u5206\u6790-\u603b\u89c8.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 2 \u529f\u80fd\u754c\u9762\u4ecb\u7ecd - \u5b89\u5168\u5408\u89c4',
-        content:
-          '!!! Abstract "" CloudExplorer Lite \u652f\u6301\u4e00\u952e\u626b\u63cf\u591a\u4e2a\u4e91\u5e73\u53f0\u7684\u591a\u79cd\u4e91\u8d44\u6e90\uff0c\u53ef\u7075\u6d3b\u5b9a\u4e49\u89c4\u5219\u3002\u5177\u4f53\u53ef\u53c2\u8003\u672c\u6587\u6863\u7684\u529f\u80fd\u624b\u518c\u3010\u5b89\u5168\u5408\u89c4\u3011\u3002![\u5b89\u5168\u5408\u89c4](img/quick_start/\u5b89\u5168\u5408\u89c4-\u603b\u89c8.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.1 \u4f7f\u7528\u573a\u666f',
-        content:
-          '!!! Abstract "" \u672c\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u7cfb\u7edf\u7ba1\u7406\u5458\u5982\u4f55\u4f7f\u7528 CloudExplorer Lite \u5feb\u901f\u7ba1\u7406\u4e00\u4e2a\u4e91\u8d26\u53f7\uff0c\u5e2e\u52a9\u5927\u5bb6\u5feb\u901f\u638c\u63e1\u4f7f\u7528\u65b9\u6cd5\u3002 \u521d\u59cb\u5316\u914d\u7f6e\u6b65\u9aa4\uff1a\u6dfb\u52a0\u4e91\u8d26\u53f7 -> \u7ba1\u7406\u4e91\u4e3b\u673a -> \u67e5\u770b\u4e91\u8d26\u5355 -> \u67e5\u770b\u8fd0\u8425\u5206\u6790 -> \u67e5\u770b\u5b89\u5168\u5408\u89c4\u3002 '
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.2 \u521b\u5efa\u4e91\u8d26\u53f7',
-        content:
-          '!!! Abstract "" \u9996\u6b21\u767b\u5f55 CloudExplorer Lite \u5e73\u53f0\u65f6\uff0c\u4f1a\u81ea\u52a8\u5f39\u51fa\u6dfb\u52a0\u4e91\u8d26\u53f7\u7684\u5411\u5bfc\uff0c\u7528\u6237\u9700\u8981\u6839\u636e\u5411\u5bfc\u5c06\u4e91\u8d26\u53f7\u6dfb\u52a0\u5230\u4e91\u7ba1\u5e73\u53f0\u4e2d\u8fdb\u884c\u7ba1\u7406\u3002 ![\u4e91\u8d26\u53f7\u5411\u5bfc](img/quick_start/\u4e91\u8d26\u53f7\u5411\u5bfc-\u9009\u62e9\u4e91\u5e73\u53f0.png){ width="1235px" } !!! Abstract "" \u8f93\u5165\u540d\u79f0\u4e3a\u201c\u963f\u91cc\u4e91-\u4ea7\u54c1\u201d\uff0c\u8f93\u5165\u4e91\u8d26\u53f7\u7684 AccessKey ID\u3001AccessKey Secret\uff0c\u70b9\u51fb\u201c\u786e\u8ba4\u201d\u3002 \u8bf4\u660e\uff1aAccessKey\u6743\u9650\u8981\u6c42\uff1aECS\u7684\u7ba1\u7406\u6743\u9650\u548c\u6240\u6709\u8d44\u6e90\u7684\u53ea\u8bfb\u6743\u9650\u3002 ![\u5411\u5bfc-\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1](img/quick_start/\u4e91\u8d26\u53f7\u5411\u5bfc-\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1.png)!!! Abstract "" \u975e\u9996\u6b21\u767b\u5f55\u53ef\u6253\u5f00\u3010\u7ba1\u7406\u4e2d\u5fc3\u3011-\u3010\u4e91\u8d26\u53f7\u3011\u83dc\u5355\uff0c\u521b\u5efa\u4e00\u4e2a\u963f\u91cc\u4e91\u7684\u4e91\u8d26\u53f7\uff0c\u540d\u79f0\u4e3a\u201c\u963f\u91cc\u4e91-\u4ea7\u54c1\u201d\u3002![\u4e91\u8d26\u53f7\u5217\u8868](img/quick_start/\u4e91\u8d26\u53f7\u5217\u8868.png){ width="1235px" }!!! Abstract "" \u4e91\u5e73\u53f0\u9009\u62e9\u201c\u963f\u91cc\u4e91\u201d(\u82e5\u662f\u5176\u4ed6\u4e91\u5e73\u53f0\u7684\u53ef\u9009\u62e9\u5bf9\u5e94\u7684\u4e91\u5e73\u53f0) \uff0c\u5f53\u524d\u4ee5\u201c\u963f\u91cc\u4e91\u201d\u4e3a\u4f8b\u3002![\u6dfb\u52a0\u4e91\u8d26\u53f7](img/quick_start/\u9009\u62e9\u4e91\u5e73\u53f0.png){ width="1235px" }!!! Abstract "" \u8f93\u5165\u540d\u79f0\u4e3a\u201c\u963f\u91cc\u4e91-\u4ea7\u54c1\u201d\uff0c\u8f93\u5165\u4e91\u8d26\u53f7\u7684 AccessKey ID\u3001AccessKey Secret\uff0c\u70b9\u51fb\u201c\u786e\u8ba4\u201d\u3002 \u8bf4\u660e\uff1aAccessKey\u6743\u9650\u8981\u6c42\uff1aECS\u7684\u7ba1\u7406\u6743\u9650\u548c\u6240\u6709\u8d44\u6e90\u7684\u53ea\u8bfb\u6743\u9650\u3002![\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1](img/quick_start/\u8f93\u5165\u4e91\u8d26\u53f7\u51ed\u8bc1.png){ width="1235px" }!!! Abstract "" \u7cfb\u7edf\u4f1a\u81ea\u52a8\u540c\u6b65\u8be5\u4e91\u8d26\u53f7\u4e0b\u7684\u4e91\u4e3b\u673a\u3001\u78c1\u76d8\u3001\u955c\u50cf\u7b49\u8d44\u6e90\u6570\u636e\uff0c\u8fc7\u53bb\u4e00\u5e74\u7684\u8d26\u5355\u6570\u636e\u548c\u5b89\u5168\u5408\u89c4\u626b\u63cf\u7684\u8d44\u6e90\u6570\u636e\uff1b \u7cfb\u7edf\u4f1a\u5b9a\u65f6\u540c\u6b65\u6570\u636e\uff0c\u7528\u6237\u4e5f\u53ef\u4ee5\u624b\u52a8\u540c\u6b65\uff1b \u8d44\u6e90\u540c\u6b65\u5b8c\u6210\u540e\u4fbf\u53ef\u4f7f\u7528\u5404\u670d\u52a1\u6a21\u5757\u8fdb\u884c\u67e5\u770b\u548c\u7ba1\u7406\uff0c\u5426\u5219\u5404\u670d\u52a1\u6a21\u5757\u5c06\u6ca1\u6709\u6570\u636e\u3002 ![\u4e91\u8d26\u53f7-\u540c\u6b65\u5168\u91cf\u6570\u636e](img/quick_start/\u4e91\u8d26\u53f7-\u540c\u6b65\u5168\u91cf\u6570\u636e.png){ width="1235px" }!!! Abstract "" \u70b9\u51fb\u201c\u4e91\u8d26\u53f7\u540d\u79f0\u201d\u8fdb\u5165\u8be6\u60c5\uff0c\u53ef\u4ee5\u67e5\u770b\u5177\u4f53\u7684\u540c\u6b65\u8bb0\u5f55\u548c\u540c\u6b65\u8be6\u60c5\u3002'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.2 \u521b\u5efa\u4e91\u8d26\u53f7',
-        content:
-          '![\u4e91\u8d26\u53f7-\u540c\u6b65\u8be6\u60c5](img/quick_start/\u4e91\u8d26\u53f7-\u540c\u6b65\u8be6\u60c5.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.3 \u7ba1\u7406\u4e91\u4e3b\u673a - \u521b\u5efa\u963f\u91cc\u4e91\u4e91\u4e3b\u673a',
-        content:
-          '!!! Abstract "" \u5f53\u7528\u6237\u9700\u8981\u65b0\u589e\u4e91\u4e3b\u673a\u8d44\u6e90\u65f6\uff0c\u65e0\u9700\u63d0\u524d\u64cd\u4f5c\u4efb\u4f55\u914d\u7f6e\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728\u4e91\u4e3b\u673a\u5217\u8868\u4e0a\u65b9\u70b9\u51fb\u3010\u521b\u5efa\u4e91\u4e3b\u673a\u3011\u3002![\u521b\u5efa\u4e91\u4e3b\u673a](img/quick_start/\u521b\u5efa\u4e91\u4e3b\u673a.png){ width="1235px" }!!! Abstract "" \u9700\u8981\u7528\u6237\u9009\u62e9\u5728\u54ea\u4e2a\u4e91\u8d26\u53f7\u4e0b\u521b\u5efa\u4e91\u4e3b\u673a\uff0c\u9009\u62e9\u4e91\u8d26\u53f7\uff1a\u963f\u91cc\u4e91\uff0c\u4ee5\u4e0b\u4ee5\u521b\u5efa\u963f\u91cc\u4e91\u4e91\u4e3b\u673a\u4e3a\u4f8b\u3002![\u9009\u62e9\u4e91\u8d26\u53f7](img/quick_start/\u521b\u5efa\u4e91\u4e3b\u673a-\u9009\u62e9\u4e91\u8d26\u53f7.png){ width="1235px" }!!! Abstract "" \u5728\u57fa\u7840\u914d\u7f6e\u9875\u9762\u9700\u8981\u9009\u62e9\uff1a\u4ed8\u8d39\u65b9\u5f0f\u3001\u533a\u57df\u3001\u53ef\u7528\u533a\u3001\u5b9e\u4f8b\u89c4\u683c\u3001\u64cd\u4f5c\u7cfb\u7edf\u3001\u7cfb\u7edf\u76d8\u559d\u6570\u636e\u76d8\u5927\u5c0f\u3002 \u4e0b\u65b9\u4f1a\u6839\u636e\u6240\u9009\u7684\u914d\u7f6e\u4fe1\u606f\u663e\u793a\u9884\u4f30\u8d39\u7528\u3002 ![\u57fa\u7840\u914d\u7f6e1](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u57fa\u7840\u914d\u7f6e.png){ width="1235px" }!!! Abstract "" \u5728\u7f51\u7edc\u914d\u7f6e\u9875\u9762\u9700\u8981\u9009\u62e9\uff1a\u5b50\u7f51\u3001\u5b89\u5168\u7ec4\u3001\u662f\u5426\u5206\u914d\u516c\u7f51IP\u53ca\u516c\u7f51IP\u7684\u5e26\u5bbd\u8bbe\u7f6e\u3002![\u7f51\u7edc\u914d\u7f6e](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u7f51\u7edc\u914d\u7f6e.png){ width="1235px" }!!! Abstract "" \u5728\u7cfb\u7edf\u914d\u7f6e\u4e2d\u8bbe\u7f6e\u4e91\u4e3b\u673a\u7684\u767b\u5f55\u51ed\u8bc1\u3001\u4e3b\u673a\u540d\u548c Hostname\uff1b \u82e5\u540c\u65f6\u521b\u5efa\u591a\u53f0\u8d44\u6e90\u5219\u6bcf\u53f0\u8d44\u6e90\u90fd\u9700\u8981\u8bbe\u7f6e\u4e3b\u673a\u540d\u548c Hostname\u3002![\u7cfb\u7edf\u8bbe\u7f6e](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u7cfb\u7edf\u914d\u7f6e.png){ width="1235px" }!!! Abstract "" \u6700\u540e\u4e00\u6b65\u662f\u786e\u8ba4\u4e4b\u524d\u51e0\u6b65\u6240\u9009\u7684\u4fe1\u606f\uff0c\u5982\u679c\u786e\u8ba4\u6b63\u786e\uff0c\u63d0\u4ea4\u7533\u8bf7\u540e\u4fbf\u4f1a\u6267\u884c\u4efb\u52a1\u521b\u5efa\u4e91\u4e3b\u673a\u3002![\u786e\u8ba4\u4fe1\u606f](img/quick_start/\u521b\u5efa\u963f\u91cc\u4e91\u4e3b\u673a-\u786e\u8ba4\u4fe1\u606f.png){ width="1235px" }!!! Abstract "" \u63d0\u4ea4\u521b\u5efa\u4efb\u52a1\u540e\uff0c\u5728\u4e91\u4e3b\u673a\u5217\u8868\u65b0\u589e\u4e00\u6761\u521b\u5efa\u4e2d\u7684\u8bb0\u5f55\uff0c\u5e76\u5728\u4efb\u52a1\u5217\u8868\u751f\u6210\u521b\u5efa\u4e91\u4e3b\u673a\u7684\u4efb\u52a1\u3002![\u521b\u5efa\u4e2d\u4e91\u4e3b\u673a\u5217\u8868](img/quick_start/\u4e91\u4e3b\u673a-\u521b\u5efa\u4e2d\u8bb0\u5f55.png){ width="1235px" }![\u521b\u5efa\u4e91\u4e3b\u673a\u4efb\u52a1](img/quick_start/\u4efb\u52a1-\u521b\u5efa\u4e91\u4e3b\u673a\u4efb\u52a1.png){ width="1235px" } !!! Abstract "" \u4efb\u52a1\u5b8c\u6210\u540e\uff0c\u4e91\u4e3b\u673a\u72b6\u6001\u53d8\u4e3a\u201c\u8fd0\u884c\u4e2d\u201d\u3002'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.3 \u7ba1\u7406\u4e91\u4e3b\u673a - \u4e91\u4e3b\u673a\u7ba1\u7406\u64cd\u4f5c',
-        content:
-          '!!! Abstract "" \u5f53\u524d\u652f\u6301\u5bf9\u4e91\u4e3b\u673a\u8fdb\u884c\u542f\u52a8\u3001\u505c\u7528\u3001\u91cd\u542f\u3001\u5220\u9664\u3001\u914d\u7f6e\u53d8\u66f4\u3001\u6dfb\u52a0\u78c1\u76d8\u7b49\u7ba1\u7406\u64cd\u4f5c\u3002![\u4e91\u4e3b\u673a\u7ba1\u7406\u64cd\u4f5c](img/quick_start/\u4e91\u4e3b\u673a\u7ba1\u7406\u64cd\u4f5c.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.3 \u7ba1\u7406\u4e91\u4e3b\u673a',
-        content:
-          '!!! Abstract "" \u3010\u4e91\u4e3b\u673a\u7ba1\u7406\u3011\u6a21\u5757\u63d0\u4f9b\u4e86\u4e91\u4e3b\u673a\u7684\u521b\u5efa\u3001\u542f/\u505c\u673a\u3001\u56de\u6536\u3001\u914d\u7f6e\u53d8\u66f4\u3001\u6269\u5bb9\u3001\u6388\u6743\u7b49\uff1b \u540c\u65f6\u57fa\u4e8e\u7528\u6237\u7ba1\u7406\u4f53\u7cfb\uff0c\u7528\u6237\u53ef\u521b\u5efa\u3001\u53ef\u64cd\u4f5c\u7684\u8d44\u6e90\u90fd\u5177\u5907\u9694\u79bb\u6027\uff1b \u5728\u591a\u4e91\u73af\u5883\u4e0b\u63d0\u4f9b\u7edf\u4e00\u7684\u64cd\u4f5c\u754c\u9762\uff0c\u4e3a\u7528\u6237\u5e26\u6765\u6781\u5927\u4fbf\u5229\u3002'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u8d26\u5355\u603b\u89c8',
-        content:
-          '!!! Abstract "" \u7cfb\u7edf\u7ba1\u7406\u5458\u53ef\u4ee5\u770b\u5230\u6240\u6709\u7eb3\u7ba1\u4e91\u8d26\u53f7\u7684\u5f53\u6708\u603b\u82b1\u8d39\u3001\u4eca\u5e74\u603b\u82b1\u8d39\u3001\u4e0e\u4e0a\u6708\u6216\u4e0a\u4e2a\u5468\u671f\u8d39\u7528\u5bf9\u6bd4\u589e\u52a0\u8fd8\u662f\u51cf\u5c11\u3001\u8fd1\u534a\u5e74/\u8fd1\u4e00\u5e74\u7684\u603b\u8d39\u7528\u8d8b\u52bf\uff0c\u4e0b\u65b9\u7684\u6708\u8d26\u5355\u4e2d\u53ef\u4ee5\u67e5\u770b\u7528\u6237\u81ea\u5b9a\u4e49\u4e0d\u540c\u7ef4\u5ea6\u7684\u6708\u8d26\u5355\uff1b \u7ec4\u7ec7\u7ba1\u7406\u5458\u548c\u666e\u901a\u7528\u6237\u53ef\u4ee5\u67e5\u770b\u5df2\u88ab\u5206\u8d26\u6388\u6743\u7684\u5f53\u6708\u603b\u82b1\u8d39\u3001\u4eca\u5e74\u603b\u82b1\u8d39\u548c\u8fd1\u534a\u5e74/\u8fd1\u4e00\u5e74\u7684\u603b\u8d39\u7528\u8d8b\u52bf\uff0c\u4e0b\u65b9\u7684\u6708\u8d26\u5355\u4e2d\u53ef\u4ee5\u67e5\u770b\u5df2\u88ab\u5206\u8d26\u6388\u6743\u7684\u4e0d\u540c\u7ef4\u5ea6\u7684\u6708\u8d26\u5355\u3002![\u4e91\u8d26\u5355](img/quick_start/\u8d26\u5355\u603b\u89c8.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u8d26\u5355\u660e\u7ec6',
-        content:
-          '!!! Abstract "" \u7cfb\u7edf\u7ba1\u7406\u5458\u53ef\u4ee5\u67e5\u770b\u6240\u6709\u516c\u6709\u4e91\u8d26\u53f7\u7684\u8d26\u5355\u660e\u7ec6\uff0c\u9ed8\u8ba4\u663e\u793a\u5f53\u6708\u7684\u660e\u7ec6\uff0c\u53ef\u4ee5\u6309\u7167\u8d26\u671f\u67e5\u770b\u660e\u7ec6\uff1b \u7ec4\u7ec7\u7ba1\u7406\u5458\u548c\u666e\u901a\u7528\u6237\u53ef\u4ee5\u67e5\u770b\u5df2\u88ab\u5206\u8d26\u6388\u6743\u7684\u8d26\u5355\u660e\u7ec6\uff0c\u9ed8\u8ba4\u663e\u793a\u5f53\u6708\u7684\u660e\u7ec6\uff0c\u53ef\u4ee5\u6309\u7167\u8d26\u671f\u67e5\u770b\u660e\u7ec6\u3002![\u8d26\u5355\u660e\u7ec6](img/quick_start/\u8d26\u5355\u660e\u7ec6.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u81ea\u5b9a\u4e49\u8d26\u5355',
-        content:
-          '!!! Abstract "" \u53ea\u6709\u7cfb\u7edf\u7ba1\u7406\u5458\u6dfb\u52a0\u7f16\u8f91\u81ea\u5b9a\u4e49\u8d26\u5355\uff0c\u7ec4\u7ec7\u7ba1\u7406\u5458\u548c\u666e\u901a\u7528\u6237\u53ea\u80fd\u5728\u8d26\u5355\u603b\u89c8\u4e2d\u67e5\u770b\u6708\u8d26\u5355\uff1b \u7cfb\u7edf\u5185\u7f6e\u90e8\u5206\u6708\u8d26\u5355\uff1a\u6309\u4e91\u5e73\u53f0\u3001\u6309\u4e91\u8d26\u53f7\u3001\u6309\u4ea7\u54c1\u540d\u79f0\u3001\u6309\u4ed8\u8d39\u7c7b\u578b\u3001\u6309\u4f01\u4e1a\u9879\u76ee\uff1b \u82e5\u60f3\u8981\u5c55\u793a\u5176\u4ed6\u7ef4\u5ea6\u7684\u6708\u8d26\u5355\uff0c\u7cfb\u7edf\u7ba1\u7406\u5458\u6dfb\u52a0\u81ea\u5b9a\u4e49\u6708\u8d26\u5355\uff0c\u652f\u6301\u7684\u7edf\u8ba1\u7ef4\u5ea6\u5b57\u6bb5\uff1a\u4e91\u5e73\u53f0\u3001\u4e91\u8d26\u53f7\u3001\u533a\u57df\u3001\u4f01\u4e1a\u9879\u76ee\u3001\u7ec4\u7ec7\uff08\u5de5\u4f5c\u7a7a\u95f4\u7684\u7236\u7ea7\u7ec4\u7ec7\uff09\u3001\u7ec4\u7ec7\u5c42\u7ea7\u6811\uff08\u53ef\u9009\u62e9\u7ec4\u7ec7\u5c42\u7ea7\uff09\u3001\u5de5\u4f5c\u7a7a\u95f4\u3001\u6807\u7b7e\u3001\u4ea7\u54c1\u540d\u79f0\u3001\u4ea7\u54c1\u660e\u7ec6\u3001\u4ed8\u8d39\u65b9\u5f0f\u3001\u8d44\u6e90\u540d\u79f0\u7b49\u3002![\u81ea\u5b9a\u4e49\u8d26\u5355](img/quick_start/\u81ea\u5b9a\u4e49\u8d26\u5355.png){ width="1235px" }!!! Abstract "" \u521b\u5efa\u4e00\u4e2a\u201c\u6309\u5de5\u4f5c\u7a7a\u95f4\u201d\u7684\u81ea\u5b9a\u4e49\u8d26\u5355\uff0c\u7edf\u8ba1\u5b57\u6bb5\u662f\uff1a\u7ec4\u7ec7\u3001\u5de5\u4f5c\u7a7a\u95f4\u3001\u4ea7\u54c1\u540d\u79f0\u3002![\u6dfb\u52a0\u81ea\u5b9a\u4e49\u8d26\u5355](img/quick_start/\u521b\u5efa\u81ea\u5b9a\u4e49\u8d26\u5355.png){ width="1235px" }!!! Abstract "" \u81ea\u5b9a\u4e49\u8d26\u5355\u521b\u5efa\u5b8c\u6210\u540e\u53ef\u5728\u3010\u8d26\u5355\u603b\u89c8\u3011\u4e2d\u4e0b\u9762\u7684\u6708\u8d26\u5355\u4e2d\u67e5\u770b\u3002![\u8d26\u5355\u603b\u89c8](img/quick_start/\u8d26\u5355\u603b\u89c8-\u81ea\u5b9a\u4e49\u8d26\u5355.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355 - \u5206\u8d26\u8bbe\u7f6e',
-        content:
-          '!!! Abstract "" \u5f53\u524d\u7cfb\u7edf\u540c\u6b65\u5230\u7684\u8d26\u5355\u660e\u7ec6\u90fd\u662f\u57fa\u4e8e\u5404\u4e91\u5e73\u53f0\u4e0a\u7684\u539f\u59cb\u8d26\u5355\u6570\u636e\uff1b \u82e5\u60f3\u628a\u8fd9\u4e9b\u8d26\u5355\u5206\u644a\u5230\u7cfb\u7edf\u4e2d\u7684\u7ec4\u7ec7\u6216\u5de5\u4f5c\u7a7a\u95f4\u4e0a\u65f6\uff0c\u9700\u8981\u5728\u539f\u59cb\u8d26\u5355\u4e2d\u5b58\u5728\u6309\u7ec4\u7ec7/\u5de5\u4f5c\u7a7a\u95f4\u5bf9\u5e94\u7684\u5206\u8d26\u5b57\u6bb5\uff0c\u5982\u6807\u7b7e\u3001\u4f01\u4e1a\u9879\u76ee/\u8d22\u52a1\u5355\u5143\uff0c\u6b64\u65f6\u7cfb\u7edf\u7ba1\u7406\u5458\u53ef\u4ee5\u6309\u7167\u5206\u8d26\u5b57\u6bb5\u5728\u7cfb\u7edf\u4e2d\u8fdb\u884c\u5206\u8d26\u89c4\u5219\u8bbe\u5b9a\uff1b \u82e5\u5f53\u524d\u8fd8\u6ca1\u6709\u5206\u8d26\u4f9d\u636e\u5b57\u6bb5\uff0c\u9700\u8981\u5148\u5230\u516c\u6709\u4e91\u5e73\u53f0\u4e0a\u89c4\u8303\u8d26\u5355\uff0c\u6309\u7167\u7cfb\u7edf\u652f\u6301\u7684\u5206\u8d26\u4f9d\u636e\u8fdb\u884c\u5f52\u7eb3\uff1b \u5f53\u524d\u4e91\u7ba1\u5e73\u53f0\u652f\u6301\u7684\u5206\u8d26\u4f9d\u636e\u5b57\u6bb5\u6709\uff1a\u4e91\u5e73\u53f0\u3001\u4e91\u8d26\u53f7\u3001\u4f01\u4e1a\u9879\u76ee/\u8d22\u52a1\u5355\u5143\u3001\u4ea7\u54c1\u540d\u79f0\u3001\u4ea7\u54c1\u660e\u7ec6\u3001\u6807\u7b7e\u3002 ![\u5206\u8d26\u8bbe\u7f6e](img/quick_start/\u672a\u5206\u8d26\u8d44\u6e90.png){ width="1235px" }!!! Abstract "" \u5728\u5206\u8d26\u8bbe\u7f6e\u9875\u9762\u9009\u62e9\u7ec4\u7ec7/\u5de5\u4f5c\u7a7a\u95f4\uff0c\u53f3\u4fa7\u8bbe\u7f6e\u5206\u8d26\u89c4\u5219\u3002 \u5206\u8d26\u89c4\u5219\u8bbe\u7f6e\u4fdd\u5b58\u540e\uff0c\u9700\u8981\u5ef6\u8fdf 24 \u5c0f\u65f6\u53ef\u5728\u5df2\u5206\u8d26\u8d44\u6e90\u5217\u8868\u5c55\u793a\u5206\u644a\u8fc7\u6765\u7684\u8d44\u6e90\u3002![\u6dfb\u52a0\u5206\u8d26\u89c4\u5219](img/quick_start/\u6dfb\u52a0\u5206\u8d26\u89c4\u5219.png){ width="1235px" }![\u5df2\u5206\u8d26\u8d44\u6e90](img/quick_start/\u5df2\u5206\u8d26\u8d44\u6e90.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.4 \u67e5\u770b\u4e91\u8d26\u5355',
-        content:
-          '!!! Abstract "" \u63d0\u4f9b\u4e86\u591a\u4e91\u591a\u8d26\u53f7\u7684\u8d39\u7528\u6c47\u603b\u3001\u8d39\u7528\u5206\u644a\u3001\u81ea\u5b9a\u4e49\u591a\u7ef4\u5ea6\u6708\u8d26\u5355\u529f\u80fd\uff0c\u53ef\u4f5c\u4e3a\u4f01\u4e1a\u7684\u4e91\u8d44\u6e90\u6210\u672c\u5206\u6790\u3002\u663e\u8457\u964d\u4f4e\u4e91\u4e0a\u8d44\u6e90\u6210\u672c\u7ba1\u7406\u7684\u96be\u5ea6\uff0c\u63d0\u5347\u6210\u672c\u7ba1\u7406\u6548\u7387\u3002'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u603b\u89c8',
-        content:
-          '!!! Abstract "" \u6574\u4f53\u67e5\u770b\u5f53\u524d\u6240\u7ba1\u7406\u7684\u8d44\u6e90\u6570\u91cf\u7edf\u8ba1\uff0c\u8d44\u6e90\u4f7f\u7528\u60c5\u51b5\u7edf\u8ba1\uff0c\u8d44\u6e90\u5206\u5e03\u3001\u8d44\u6e90\u589e\u957f\u8d8b\u52bf\u4ee5\u53ca\u8d44\u6e90\u7684\u4f18\u5316\u5efa\u8bae\uff1b \u53ef\u4ee5\u6309\u7167\u4e91\u8d26\u53f7\u8fc7\u6ee4\u663e\u793a\u6bcf\u4e2a\u4e91\u8d26\u53f7\u4e0b\u7684\u8d44\u6e90\u7edf\u8ba1\u60c5\u51b5\u3002![\u8fd0\u8425\u5206\u6790\u603b\u89c8](img/quick_start/\u8fd0\u8425\u5206\u6790-\u603b\u89c8.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u57fa\u7840\u8d44\u6e90\u5206\u6790',
-        content:
-          '!!! Abstract "" \u57fa\u7840\u8d44\u6e90\u4e3a\u79c1\u6709\u4e91\u8ba1\u7b97\u8d44\u6e90\u548c\u5b58\u50a8\u5668\u7684\u6574\u4f53\u8d44\u6e90\u4ece\u5bb9\u91cf\u3001\u5206\u914d\u60c5\u51b5\u3001\u4f7f\u7528\u60c5\u51b5\u7b49\u4e0d\u540c\u7ef4\u5ea6\u8fdb\u884c\u5206\u6790\uff0c\u8be5\u529f\u80fd\u53ea\u6709\u7cfb\u7edf\u7ba1\u7406\u5458\u89d2\u8272\u53ef\u67e5\u770b\u3002![\u57fa\u7840\u8d44\u6e90\u5206\u6790](img/quick_start/\u57fa\u7840\u8d44\u6e90\u5206\u6790.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u4e91\u4e3b\u673a\u5206\u6790',
-        content:
-          '!!! Abstract "" \u5bf9\u7eb3\u7ba1\u7684\u4e91\u4e3b\u673a\u4ece\u4e0d\u540c\u7ef4\u5ea6\u8fdb\u884c\u53ef\u89c6\u5316\u5206\u6790\uff0c\u67e5\u770b\u4e91\u4e3b\u673a\u7684\u8d8b\u52bf\u3001\u8d44\u6e90\u4f7f\u7528\u60c5\u51b5\u3001\u8fd0\u884c\u72b6\u6001\u3001\u8d44\u6e90\u5206\u5e03\u7b49\u3002![\u4e91\u4e3b\u673a\u5206\u6790](img/quick_start/\u4e91\u4e3b\u673a\u5206\u6790.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u78c1\u76d8\u5206\u6790',
-        content:
-          '!!! Abstract "" \u5bf9\u7eb3\u7ba1\u7684\u78c1\u76d8\u4ece\u4e0d\u540c\u7ef4\u5ea6\u8fdb\u884c\u53ef\u89c6\u5316\u5206\u6790\uff0c\u67e5\u770b\u78c1\u76d8\u7684\u8d8b\u52bf\u3001\u8d44\u6e90\u4f7f\u7528\u60c5\u51b5\u3001\u8fd0\u884c\u72b6\u6001\u3001\u8d44\u6e90\u5206\u5e03\u7b49\u3002![\u4e91\u78c1\u76d8\u4f18\u5316](img/quick_start/\u78c1\u76d8\u5206\u6790.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790 - \u4e91\u4e3b\u673a\u4f18\u5316',
-        content:
-          ' !!! Abstract "" \u6839\u636e\u4f18\u5316\u7b56\u7565\u67e5\u627e\u51fa\u9700\u8981\u4f18\u5316\u7684\u8d44\u6e90\uff0c\u7528\u6237\u53ef\u4ee5\u81ea\u5b9a\u4e49\u4f18\u5316\u7b56\u7565\u7684\u7b5b\u9009\u6761\u4ef6\uff1b \u652f\u6301\u67e5\u8be2\u5efa\u8bae\u5347\u914d\u3001\u5efa\u8bae\u964d\u914d\u3001\u53d8\u66f4\u4ed8\u8d39\u65b9\u5f0f\u3001\u5efa\u8bae\u56de\u6536\u7684\u4e91\u4e3b\u673a\u3002 ![\u4e91\u4e3b\u673a\u4f18\u5316](img/quick_start/\u4e91\u4e3b\u673a\u4f18\u5316.png){ width="1235px" }!!! Abstract "" \u70b9\u51fb\u6bcf\u4e2a\u4f18\u5316\u7b56\u7565\u9762\u677f\u53f3\u4e0a\u89d2\u7684\u8bbe\u7f6e\u6309\u94ae\uff0c\u53ef\u4ee5\u5bf9\u4f18\u5316\u7b56\u7565\u7b5b\u9009\u6761\u4ef6\u8fdb\u884c\u81ea\u5b9a\u4e49\u8bbe\u7f6e\uff0c\u8bbe\u7f6e\u4fdd\u5b58\u540e\u5219\u6309\u7167\u6700\u65b0\u7684\u7b56\u7565\u8fdb\u884c\u67e5\u8be2\u8d44\u6e90\u3002![\u8d44\u6e90\u4f18\u5316\u7b56\u7565](img/quick_start/\u4e91\u4e3b\u673a\u4f18\u5316\u7b56\u7565.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.5 \u67e5\u770b\u8fd0\u8425\u5206\u6790',
-        content:
-          '!!! Abstract "" \u6dfb\u52a0\u5b8c\u4e91\u8d26\u53f7\u4fbf\u53ef\u5bf9\u5df2\u7eb3\u7ba1\u7684\u8d44\u6e90\u4ece\u5206\u5e03\u3001\u5bb9\u91cf\u3001\u4f7f\u7528\u60c5\u51b5\u7b49\u5404\u7ef4\u5ea6\u8fdb\u884c\u5206\u6790\uff0c\u5e76\u63d0\u4f9b\u8d44\u6e90\u4f18\u5316\u5efa\u8bae\u3002'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u603b\u89c8',
-        content:
-          '!!! Abstract "" \u4ece\u4e0d\u540c\u7ef4\u5ea6\u5c55\u793a\u6700\u8fd1\u4e00\u6b21\u626b\u63cf\u68c0\u6d4b\u7ed3\u679c\u7684\u7edf\u8ba1\u4fe1\u606f\u3002![\u5b89\u5168\u5408\u89c4\u603b\u89c8](img/quick_start/\u5b89\u5168\u5408\u89c4-\u603b\u89c8.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u5408\u89c4\u626b\u63cf',
-        content:
-          '!!! Abstract "" \u652f\u6301\u7ba1\u7406\u5458\u4e00\u952e\u626b\u63cf\uff1b \u652f\u6301\u7ba1\u7406\u5458\u53ef\u4ee5\u6309\u89c4\u5219\u7ec4\u3001\u8d44\u6e90\u7c7b\u578b\u3001\u4e91\u8d26\u53f7\u67e5\u770b\u626b\u63cf\u89c4\u5219\u53ca\u626b\u63cf\u7ed3\u679c\u8be6\u60c5\u3002![\u626b\u63cf\u68c0\u67e5](img/quick_start/\u626b\u63cf\u68c0\u67e5.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u89c4\u5219\u8bbe\u7f6e',
-        content:
-          '!!! Abstract "" \u7cfb\u7edf\u5185\u7f6e\u4e86\u591a\u6761\u5408\u89c4\u89c4\u5219\uff0c\u5e76\u652f\u6301\u7ba1\u7406\u5458\u6309\u7167\u4f01\u4e1a\u8981\u6c42\u81ea\u5b9a\u4e49\u5408\u89c4\u89c4\u5219; \u652f\u6301\u7ba1\u7406\u5458\u5f00\u542f\u548c\u5173\u95ed\u89c4\u5219\uff0c\u5173\u95ed\u7684\u89c4\u5219\u4e0d\u4f1a\u5728\u3010\u5408\u89c4\u626b\u63cf\u3011\u4e2d\u663e\u793a\u8be5\u89c4\u5219\uff0c\u4e00\u952e\u626b\u63cf\u65f6\u4e5f\u4e0d\u4f1a\u626b\u63cf\u8be5\u89c4\u5219\u3002![\u5408\u89c4\u89c4\u5219](img/quick_start/\u5408\u89c4\u89c4\u5219.png){ width="1235px" }!!! Abstract "" \u65b0\u589e\u4e00\u4e2a\u963f\u91cc\u4e91\u7684\u78c1\u76d8\u662f\u5426\u5f00\u542f\u52a0\u5bc6\u8bbe\u7f6e\u7684\u68c0\u6d4b\u89c4\u5219\uff0c\u64cd\u4f5c\u5982\u4e0b\uff1a![\u521b\u5efa\u5408\u89c4\u89c4\u5219](img/quick_start/\u521b\u5efa\u5408\u89c4\u89c4\u5219.png){ width="1235px" }!!! Abstract "" \u6dfb\u52a0\u5b8c\u89c4\u5219\u540e\uff0c\u5728\u3010\u5408\u89c4\u626b\u63cf\u3011\u4e2d\u53d8\u53ef\u4ee5\u770b\u5230\u8be5\u89c4\u5219\uff0c\u70b9\u51fb\u3010\u4e00\u952e\u626b\u63cf\u3011\u540e\u53ef\u4ee5\u9009\u62e9\u6539\u89c4\u5219\u6240\u5728\u7684\u89c4\u5219\u7ec4\u8fdb\u884c\u8d44\u6e90\u626b\u63cf\u3002![\u65b0\u589e\u89c4\u5219\u626b\u63cf](img/quick_start/\u626b\u63cf\u68c0\u67e5-\u65b0\u589e\u7684\u89c4\u5219.png){ width="1235px" }![\u4e00\u952e\u626b\u63cf\u65b0\u589e\u89c4\u5219](img/quick_start/\u9009\u62e9\u626b\u63cf\u65b0\u589e\u89c4\u5219\u7684\u7ec4.png){ width="1235px" }!!! Abstract "" \u70b9\u51fb\u76f8\u5e94\u89c4\u5219\u7684\u201c\u626b\u63cf\u7ed3\u679c\u8be6\u60c5\u201d\u5b57\u6bb5\uff0c\u53ef\u4ee5\u8fdb\u5165\u626b\u63cf\u8d44\u6e90\u8be6\u60c5\u9875\u9762\u3002![\u626b\u63cf\u7ed3\u679c\u8be6\u60c5](img/quick_start/\u626b\u63cf\u7ed3\u679c\u8be6\u60c5.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u89c4\u5219\u7ec4',
-        content:
-          '!!! Abstract "" \u652f\u6301\u7528\u6237\u81ea\u5b9a\u4e49\u89c4\u5219\u7ec4\u5c06\u626b\u63cf\u89c4\u5219\u8fdb\u884c\u5206\u7ec4\u3002![\u5408\u89c4\u89c4\u5219\u7ec4](img/quick_start/\u89c4\u5219\u7ec4.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4 - \u98ce\u9669\u6761\u4f8b',
-        content:
-          '!!! Abstract "" \u5f53\u524d\u98ce\u9669\u6761\u4f8b\u662f\u6839\u636e\u7b49\u4fdd 2.0 \u7b49\u7ea7\u4fdd\u62a4\u57fa\u672c\u8981\u6c42\u6761\u6b3e\u53ca\u6539\u8fdb\u5efa\u8bae\u8bf4\u660e\uff1b \u7cfb\u7edf\u5185\u7f6e\u7684\u6761\u6b3e\u8986\u76d6\u5b89\u5168\u5ba1\u8ba1\u3001\u8bbf\u95ee\u63a7\u5236\u3001\u5165\u4fb5\u9632\u8303\u3001\u7f51\u7edc\u67b6\u6784\u7b49127\u6761\u98ce\u9669\u6761\u4f8b\uff1b \u7528\u6237\u5728\u81ea\u5b9a\u4e49\u89c4\u5219\u65f6\u53ef\u4ee5\u5173\u8054\u98ce\u9669\u6761\u4f8b\uff0c\u5173\u8054\u98ce\u9669\u6761\u4f8b\u7684\u89c4\u5219\uff0c\u5728\u67e5\u770b\u626b\u63cf\u7ed3\u679c\u65f6\u53ef\u4ee5\u770b\u5230\u76f8\u5173\u7684\u6539\u8fdb\u5efa\u8bae\u3002![\u626b\u63cf\u7ed3\u679c\u8be6\u60c5](img/quick_start/\u98ce\u9669\u6761\u4f8b.png){ width="1235px" }![\u626b\u63cf\u7ed3\u679c\u8be6\u60c5](img/quick_start/\u626b\u63cf\u7ed3\u679c\u6539\u8fdb\u5efa\u8bae.png){ width="1235px" }'
-      },
-      {
-        title:
-          '# \u5feb\u901f\u5165\u95e8 ## 3 \u5feb\u901f\u4e0a\u624b ### 3.6 \u67e5\u770b\u5b89\u5168\u5408\u89c4',
-        content:
-          '!!! Abstract "" \u8be5\u6a21\u5757\u9488\u5bf9\u5bf9\u7ba1\u7406\u5458\u63d0\u4f9b\u67e5\u770b\u4e91\u5e73\u53f0\u4e0a\u7684\u4e91\u8d44\u6e90\u7684\u76f8\u5173\u914d\u7f6e\u662f\u5426\u7b26\u5408\u7b49\u4fdd\u6761\u6b3e\u6216\u4f01\u4e1a\u914d\u7f6e\u89c4\u8303\uff1b \u5f53\u524d\u652f\u6301\u68c0\u6d4b\u7684\u8d44\u6e90\u7c7b\u578b\u4e3a\uff1a\u4e91\u670d\u52a1\u5668\u3001\u4e91\u78c1\u76d8\u3001\u5f39\u6027 IP\u3001\u5bf9\u8c61\u5b58\u50a8\u3001\u5b89\u5168\u7ec4\u3001VPC\u3001\u8d1f\u8f7d\u5747\u8861\u3001\u4e91\u6570\u636e\u5e93\u3001\u5bbf\u4e3b\u673a\u3001\u5b58\u50a8\u5668\u3001\u8d44\u6e90\u6c60\u3001RAM \u7528\u6237; \u652f\u6301\u7684\u4e91\u5e73\u53f0\uff1a\u963f\u91cc\u4e91\u3001\u534e\u4e3a\u4e91\u3001\u817e\u8baf\u4e91\u3001VMware\u3001OpenStack\u3002'
-      }
-    ]
-  }
-])
+const segmentList = ref<any[]>([])
 
-const form = reactive({
-  name: '',
-  region: '',
-  type: ''
+const form = reactive<any>({
+  patterns: [] as any,
+  limit: 0,
+  with_filter: false
 })
 
-const options = ref([])
+const patternsList = ref<string[]>(patternType)
 
 function splitDocument() {
   loading.value = true
@@ -319,6 +117,10 @@ function splitDocument() {
     }
   })
 
+  Object.keys(form).forEach((key) => {
+    fd.append(key, form[key])
+  })
+
   DatasetApi.postSplitDocument(fd)
     .then((res: any) => {
       segmentList.value = res
@@ -334,27 +136,41 @@ onMounted(() => {})
 <style scoped lang="scss">
 .set-rules {
   width: 100%;
+  .set-rules-height {
+    height: var(--create-dataset-height);
+  }
+
+  .left-height {
+    max-height: calc(var(--create-dataset-height) - 105px);
+    overflow-x: hidden;
+  }
   &__radio {
     display: block;
     .el-radio {
       white-space: break-spaces;
       width: 100%;
       height: 100%;
-      padding: 16px;
+      padding: calc(var(--app-base-px) * 2);
       line-height: 22px;
       color: var(--app-text-color-primary);
     }
     :deep(.el-radio__label) {
       padding-left: 32px;
+      width: 100%;
     }
     :deep(.el-radio__input) {
       position: absolute;
       top: 30px;
     }
   }
-  .right-height {
-    max-height: calc(100vh - 330px);
-    overflow-x: hidden;
+  &__form {
+    .el-select {
+      width: 100%;
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+    }
   }
 }
 </style>
diff --git a/ui/src/views/dataset/step/UploadDocument.vue b/ui/src/views/dataset/step/UploadDocument.vue
index c7022e91c..172adfb38 100644
--- a/ui/src/views/dataset/step/UploadDocument.vue
+++ b/ui/src/views/dataset/step/UploadDocument.vue
@@ -1,10 +1,12 @@
 <template>
-  <div class="upload-document">
-    <!-- 基本信息 -->
-    <BaseForm ref="BaseFormRef" />
-    <!-- 上传文档 -->
-    <UploadComponent ref="UploadComponentRef" />
-  </div>
+  <el-scrollbar>
+    <div class="upload-document p-24">
+      <!-- 基本信息 -->
+      <BaseForm ref="BaseFormRef" />
+      <!-- 上传文档 -->
+      <UploadComponent ref="UploadComponentRef" />
+    </div>
+  </el-scrollbar>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index 7e80ea2df..9da493e52 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -28,7 +28,7 @@
                   <span @click.stop>
                     <el-dropdown trigger="click" v-if="!isManage(item.type)">
                       <span class="cursor">
-                        <el-icon><MoreFilled /></el-icon>
+                        <el-icon class="rotate-90"><MoreFilled /></el-icon>
                       </span>
                       <template #dropdown>
                         <el-dropdown-menu>
@@ -155,12 +155,11 @@ function MemberPermissions(id: String) {
 
 function deleteMember(row: TeamMember) {
   MsgConfirm(
+    `是否移除成员：${row.username}?`,
+    '移除后将会取消成员拥有的数据集和应用权限。',
+
     {
-      title: `是否移除成员：${row.username}`,
-      decription: '移除后将会取消成员拥有的数据集和应用权限。',
-      confirmButtonText: '移除'
-    },
-    {
+      confirmButtonText: '移除',
       confirmButtonClass: 'danger'
     }
   )
@@ -220,7 +219,7 @@ onMounted(() => {
     font-size: 17px;
   }
   .team-member-input {
-    padding: 0 16px;
+    padding: 0 calc(var(--app-base-px) * 2);
   }
   .team-member {
     box-sizing: border-box;

From 6cf411eec1bab17409f088bb133ec2ed57f06498 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 9 Nov 2023 18:52:06 +0800
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         | 20 +++-
 ui/src/components/app-table/index.vue         | 96 +++++++++++++++++++
 ui/src/components/index.ts                    |  4 +
 ui/src/components/read-write/index.vue        | 60 ++++++++++++
 ui/src/styles/app.scss                        | 16 +++-
 ui/src/styles/element-plus.scss               |  4 +
 ui/src/views/dataset/CreateDataset.vue        | 20 ++--
 ui/src/views/dataset/DatasetDocument.vue      | 80 +++++++++++++---
 .../{UploadDocument.vue => StepFirst.vue}     |  0
 .../step/{SetRules.vue => StepSecond.vue}     |  0
 10 files changed, 273 insertions(+), 27 deletions(-)
 create mode 100644 ui/src/components/app-table/index.vue
 create mode 100644 ui/src/components/read-write/index.vue
 rename ui/src/views/dataset/step/{UploadDocument.vue => StepFirst.vue} (100%)
 rename ui/src/views/dataset/step/{SetRules.vue => StepSecond.vue} (100%)

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index a5de294f0..1442a77dd 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -82,11 +82,29 @@ const getDocument: (dataset_id: string, name?: string) => Promise<Result<any>> =
   return get(`${prefix}/${dataset_id}/document`, name && { name })
 }
 
+/**
+ * 修改文档
+ * @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)
+}
+
 export default {
   getDateset,
   getAllDateset,
   delDateset,
   postDateset,
   postSplitDocument,
-  getDocument
+  getDocument,
+  putDocument
 }
diff --git a/ui/src/components/app-table/index.vue b/ui/src/components/app-table/index.vue
new file mode 100644
index 000000000..6f1a7badb
--- /dev/null
+++ b/ui/src/components/app-table/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="app-table" :class="quickCreate ? 'table-quick-append' : ''">
+    <el-table v-bind="$attrs">
+      <template #append v-if="quickCreate">
+        <div v-if="showInput">
+          <el-input
+            ref="quickInputRef"
+            v-model="inputValue"
+            placeholder="请输入文档名称"
+            class="w-240 mr-12"
+          />
+
+          <el-button type="primary" @click="submitHandle">创建</el-button>
+          <el-button @click="showInput = false">取消</el-button>
+        </div>
+        <div v-else @click="quickCreateHandel" class="w-full">
+          <el-button type="primary" link>
+            <el-icon><Plus /></el-icon>
+            <span class="ml-4">快速创建空白文档</span>
+          </el-button>
+        </div>
+      </template>
+      <slot></slot>
+    </el-table>
+    <div class="app-table__pagination mt-16" v-if="$slots.pagination || paginationConfig">
+      <slot name="pagination">
+        <el-pagination
+          v-model:current-page="paginationConfig.currentPage"
+          v-model:page-size="paginationConfig.pageSize"
+          :page-sizes="pageSizes"
+          :total="paginationConfig.total"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue'
+defineOptions({ name: 'AppTable' })
+
+const props = defineProps({
+  paginationConfig: {
+    type: Object,
+    default: () => {}
+  },
+  quickCreate: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['changePage', 'sizeChange', 'creatQuick'])
+
+const pageSizes = [10, 20, 50, 100]
+const quickInputRef = ref()
+
+const showInput = ref(false)
+const inputValue = ref('')
+
+watch(showInput, (bool) => {
+  if (!bool) {
+    inputValue.value = ''
+  }
+})
+
+function submitHandle() {
+  emit('creatQuick', inputValue.value)
+  showInput.value = false
+}
+
+function quickCreateHandel() {
+  showInput.value = true
+  nextTick(() => {
+    quickInputRef.value?.focus()
+  })
+}
+
+function handleSizeChange() {
+  emit('sizeChange')
+}
+function handleCurrentChange() {
+  emit('changePage')
+}
+defineExpose({})
+</script>
+
+<style lang="scss" scoped>
+.app-table {
+  &__pagination {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 5453020d8..e3ac6770a 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -8,6 +8,8 @@ import TagsInput from './tags-input/index.vue'
 import CardBox from './card-box/index.vue'
 import CardAdd from './card-add/index.vue'
 import BackButton from './back-button/index.vue'
+import AppTable from './app-table/index.vue'
+import ReadWrite from './read-write/index.vue'
 
 export default {
   install(app: App) {
@@ -20,5 +22,7 @@ export default {
     app.component(CardBox.name, CardBox)
     app.component(CardAdd.name, CardAdd)
     app.component(BackButton.name, BackButton)
+    app.component(AppTable.name, AppTable)
+    app.component(ReadWrite.name, ReadWrite)
   }
 }
diff --git a/ui/src/components/read-write/index.vue b/ui/src/components/read-write/index.vue
new file mode 100644
index 000000000..ec63523a3
--- /dev/null
+++ b/ui/src/components/read-write/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="cursor">
+    <slot name="read">
+      <div class="flex align-center" v-if="!isEdit">
+        <span>{{ data }}</span>
+        <el-button @click.prevent="editNameHandle" text v-if="showEditIcon">
+          <el-icon><Edit /></el-icon>
+        </el-button>
+      </div>
+    </slot>
+    <slot>
+      <div class="flex align-center" v-if="isEdit">
+        <el-input ref="inputRef" v-model="writeValue" placeholder="请输入"></el-input>
+        <span class="ml-4">
+          <el-button type="primary" text @click="submit">
+            <el-icon><Select /></el-icon>
+          </el-button>
+        </span>
+        <span>
+          <el-button text @click="isEdit = false">
+            <el-icon><CloseBold /></el-icon>
+          </el-button>
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+defineOptions({ name: 'ReadWrite' })
+const props = defineProps({
+  data: {
+    type: String,
+    default: ''
+  },
+  showEditIcon: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['change'])
+const isEdit = ref(false)
+const writeValue = ref('')
+
+watch(isEdit, (bool) => {
+  if (!bool) {
+    writeValue.value = ''
+  }
+})
+
+function submit() { 
+  emit('change', writeValue.value)
+  isEdit.value = false
+}
+function editNameHandle(row: any) {
+  writeValue.value = props.data
+  isEdit.value = true
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index ad1524cdf..380df65f1 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -258,7 +258,7 @@ h4 {
 }
 
 // 表格第一行插入自定义行
-.table-custom-append {
+.table-quick-append {
   .el-table__append-wrapper {
     position: absolute;
     top: 0;
@@ -269,6 +269,7 @@ h4 {
     align-items: center;
     display: flex;
     padding: 0 12px;
+    cursor: pointer;
     &:hover {
       background: var(--el-color-primary-light-9);
     }
@@ -277,3 +278,16 @@ h4 {
     margin-top: 49px;
   }
 }
+
+.success {
+  color: var(--el-color-success);
+}
+.danger {
+  color: var(--el-color-danger);
+}
+.warning {
+  color: var(--el-color-warning);
+}
+.primary {
+  color: var(--el-color-primary);
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 43a07b551..cffc38266 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -120,6 +120,10 @@
   }
 }
 
+.el-pagination .el-select .el-input {
+  width: 100px;
+}
+
 // el-steps
 .el-step__icon {
   background: none;
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index eced95a7b..89a43e157 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -21,39 +21,39 @@
     </div>
     <div class="create-dataset__footer text-right border-t">
       <el-button @click="router.go(-1)">取 消</el-button>
-      <el-button @click="prev">上一步</el-button>
-      <el-button @click="next" type="primary">下一步</el-button>
-      <el-button @click="next" type="primary">开始导入</el-button>
+      <el-button @click="prev" v-if="active === 1">上一步</el-button>
+      <el-button @click="next" type="primary" v-if="active === 0">下一步</el-button>
+      <el-button @click="next" type="primary" v-if="active === 1">开始导入</el-button>
     </div>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import UploadDocument from './step/UploadDocument.vue'
-import SetRules from './step/SetRules.vue'
+import StepFirst from './step/StepFirst.vue'
+import StepSecond from './step/StepSecond.vue'
 
 const router = useRouter()
 
 const steps = [
   {
-    ref: 'UploadDocumentRef',
+    ref: 'StepFirstRef',
     name: '上传文档',
-    component: UploadDocument
+    component: StepFirst
   },
   {
     ref: 'SetRulesRef',
     name: '设置分段规则',
-    component: SetRules
+    component: StepSecond
   }
 ]
 
-const UploadDocumentRef = ref()
+const StepFirstRef = ref()
 
 const active = ref(0)
 
 async function next() {
-  if (await UploadDocumentRef.value.onSubmit()) {
+  if (await StepFirstRef.value.onSubmit()) {
     if (active.value++ > 2) active.value = 0
   }
 }
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
index 09e28cfcf..49f30814a 100644
--- a/ui/src/views/dataset/DatasetDocument.vue
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -3,7 +3,9 @@
     <div class="main-calc-height">
       <div class="p-24" v-loading="loading">
         <div class="flex-between">
-          <el-button type="primary" @click="router.push({ path: '/dataset/upload' })" >上传文档</el-button>
+          <el-button type="primary" @click="router.push({ path: '/dataset/upload' })"
+            >上传文档</el-button
+          >
           <el-input
             v-model="filterText"
             placeholder="按 文档名称 搜索"
@@ -11,22 +13,43 @@
             class="w-240"
           />
         </div>
-        <el-table :data="documentData" class="table-custom-append mt-16 cursor">
-          <template #append>
-            <el-button type="primary" link>
-              <el-icon><Plus /></el-icon>
-              <span class="ml-4">快速创建空白文档</span>
-            </el-button>
-          </template>
-          <el-table-column prop="name" label="文件名称" />
+        <app-table
+          class="mt-16"
+          :data="documentData"
+          :pagination-config="paginationConfig"
+          quick-create
+          @sizeChange="handleSizeChange"
+          @changePage="handleCurrentChange"
+          @cell-mouse-enter="cellMouseEnter"
+          @cell-mouse-leave="cellMouseLeave"
+        >
+          <el-table-column prop="name" label="文件名称" min-width="280">
+            <template #default="{ row }">
+              <ReadWrite
+                @change="editName"
+                :data="row.name"
+                :showEditIcon="row.id === currentMouseId"
+              />
+            </template>
+          </el-table-column>
           <el-table-column prop="char_length" label="字符数" align="right">
             <template #default="{ row }">
               {{ toThousands(row.char_length) }}
             </template>
           </el-table-column>
           <el-table-column prop="paragraph_count" label="分段" align="right" />
-          <el-table-column prop="status" label="文件状态">
-            <!-- <el-switch v-model="value1" /> -->
+          <el-table-column prop="status" label="文件状态" min-width="90">
+            <template #default="{ row }">
+              <el-text v-if="row.status === '1'">
+                <el-icon class="success"><SuccessFilled /></el-icon> 成功
+              </el-text>
+              <el-text v-else-if="row.status === '2'">
+                <el-icon class="danger"><CircleCloseFilled /></el-icon> 失败
+              </el-text>
+              <el-text v-else-if="row.status === '0'">
+                <el-icon class="is-loading primary"><Loading /></el-icon> 导入中
+              </el-text>
+            </template>
           </el-table-column>
           <el-table-column prop="name" label="启动状态">
             <template #default="{ row }">
@@ -49,8 +72,9 @@
                 <el-tooltip effect="dark" content="刷新" placement="top">
                   <el-button type="primary" text>
                     <el-icon><RefreshRight /></el-icon>
-                  </el-button> </el-tooltip
-              ></span>
+                  </el-button>
+                </el-tooltip>
+              </span>
               <span class="ml-4">
                 <el-tooltip effect="dark" content="删除" placement="top">
                   <el-button type="primary" text>
@@ -60,13 +84,13 @@
               </span>
             </template>
           </el-table-column>
-        </el-table>
+        </app-table>
       </div>
     </div>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import datasetApi from '@/api/dataset'
 import { toThousands } from '@/utils/utils'
@@ -76,9 +100,34 @@ const route = useRoute()
 const { params } = route
 const { datasetId } = params
 
+const inputRef = ref()
+
 const loading = ref(false)
 const filterText = ref('')
 const documentData = ref<any[]>([])
+const currentMouseId = ref(null)
+
+const paginationConfig = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+function editName(val: string) {}
+
+function cellMouseEnter(row: any) {
+  currentMouseId.value = row.id
+}
+function cellMouseLeave() {
+  currentMouseId.value = null
+}
+
+function handleSizeChange(val: number) {
+  console.log(`${val} items per page`)
+}
+function handleCurrentChange(val: number) {
+  console.log(`current page: ${val}`)
+}
 
 function getList() {
   loading.value = true
@@ -86,6 +135,7 @@ function getList() {
     .getDocument(datasetId as string, filterText.value)
     .then((res) => {
       documentData.value = res.data
+      paginationConfig.total = res.data.length
       loading.value = false
     })
     .catch(() => {
diff --git a/ui/src/views/dataset/step/UploadDocument.vue b/ui/src/views/dataset/step/StepFirst.vue
similarity index 100%
rename from ui/src/views/dataset/step/UploadDocument.vue
rename to ui/src/views/dataset/step/StepFirst.vue
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/StepSecond.vue
similarity index 100%
rename from ui/src/views/dataset/step/SetRules.vue
rename to ui/src/views/dataset/step/StepSecond.vue

From 9f9d65a74bb31993c11fdfb206fb3d7aced39bdf Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 10 Nov 2023 11:36:04 +0800
Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         | 14 +++-
 ui/src/api/team.ts                            |  3 +-
 ui/src/components/read-write/index.vue        | 13 ++--
 ui/src/request/index.ts                       |  4 +-
 ui/src/views/dataset/DatasetDocument.vue      | 65 +++++++++++++++++--
 .../dataset/component/SegmentPreview.vue      |  2 +-
 ui/src/views/dataset/index.vue                |  2 +-
 7 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 1442a77dd..edc6ef4e5 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -99,6 +99,17 @@ const putDocument: (dataset_id: string, document_id: string, data: any) => Promi
   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}`)
+}
+
 export default {
   getDateset,
   getAllDateset,
@@ -106,5 +117,6 @@ export default {
   postDateset,
   postSplitDocument,
   getDocument,
-  putDocument
+  putDocument,
+  delDocument
 }
diff --git a/ui/src/api/team.ts b/ui/src/api/team.ts
index 1e08b684b..03c6b18d7 100644
--- a/ui/src/api/team.ts
+++ b/ui/src/api/team.ts
@@ -56,9 +56,10 @@ const putMemberPermissions: (member_id: String, body: any) => Promise<Result<any
   member_id,
   body
 ) => {
-  return put(`${prefix}/${member_id}`, undefined, body)
+  return put(`${prefix}/${member_id}`, body)
 }
 
+
 export default {
   getTeamMember,
   postCreatTeamMember,
diff --git a/ui/src/components/read-write/index.vue b/ui/src/components/read-write/index.vue
index ec63523a3..d0c06433d 100644
--- a/ui/src/components/read-write/index.vue
+++ b/ui/src/components/read-write/index.vue
@@ -12,12 +12,12 @@
       <div class="flex align-center" v-if="isEdit">
         <el-input ref="inputRef" v-model="writeValue" placeholder="请输入"></el-input>
         <span class="ml-4">
-          <el-button type="primary" text @click="submit">
+          <el-button type="primary" text @click="submit" :disabled="loading">
             <el-icon><Select /></el-icon>
           </el-button>
         </span>
         <span>
-          <el-button text @click="isEdit = false">
+          <el-button text @click="isEdit = false" :disabled="loading">
             <el-icon><CloseBold /></el-icon>
           </el-button>
         </span>
@@ -41,6 +41,7 @@ const props = defineProps({
 const emit = defineEmits(['change'])
 const isEdit = ref(false)
 const writeValue = ref('')
+const loading = ref(false)
 
 watch(isEdit, (bool) => {
   if (!bool) {
@@ -48,9 +49,13 @@ watch(isEdit, (bool) => {
   }
 })
 
-function submit() { 
+function submit() {
+  loading.value = true
   emit('change', writeValue.value)
-  isEdit.value = false
+  setTimeout(() => {
+    isEdit.value = false
+    loading.value = false
+  }, 200)
 }
 function editNameHandle(row: any) {
   writeValue.value = props.data
diff --git a/ui/src/request/index.ts b/ui/src/request/index.ts
index 92a39cd51..d195c3e85 100644
--- a/ui/src/request/index.ts
+++ b/ui/src/request/index.ts
@@ -149,8 +149,8 @@ export const put: (
   params?: unknown,
   data?: unknown,
   loading?: NProgress | Ref<boolean>
-) => Promise<Result<any>> = (url, params, data, loading) => {
-  return promise(request({ url: url, method: 'put', params, data }), loading)
+) => Promise<Result<any>> = (url, data, params, loading) => {
+  return promise(request({ url: url, method: 'put', data, params }), loading)
 }
 
 /**
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
index 49f30814a..0094f840d 100644
--- a/ui/src/views/dataset/DatasetDocument.vue
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer header="文档">
     <div class="main-calc-height">
-      <div class="p-24" v-loading="loading">
+      <div class="p-24">
         <div class="flex-between">
           <el-button type="primary" @click="router.push({ path: '/dataset/upload' })"
             >上传文档</el-button
@@ -22,6 +22,7 @@
           @changePage="handleCurrentChange"
           @cell-mouse-enter="cellMouseEnter"
           @cell-mouse-leave="cellMouseLeave"
+          v-loading="loading"
         >
           <el-table-column prop="name" label="文件名称" min-width="280">
             <template #default="{ row }">
@@ -53,7 +54,7 @@
           </el-table-column>
           <el-table-column prop="name" label="启动状态">
             <template #default="{ row }">
-              <el-switch v-model="row.is_active" />
+              <el-switch v-model="row.is_active" @change="changeState($event, row)" />
             </template>
           </el-table-column>
           <el-table-column prop="create_time" label="创建时间" width="170">
@@ -77,7 +78,7 @@
               </span>
               <span class="ml-4">
                 <el-tooltip effect="dark" content="删除" placement="top">
-                  <el-button type="primary" text>
+                  <el-button type="primary" text @click="deleteDocument(row)">
                     <el-icon><Delete /></el-icon>
                   </el-button>
                 </el-tooltip>
@@ -95,12 +96,11 @@ import { useRouter, useRoute } from 'vue-router'
 import datasetApi from '@/api/dataset'
 import { toThousands } from '@/utils/utils'
 import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 const router = useRouter()
 const route = useRoute()
 const { params } = route
-const { datasetId } = params
-
-const inputRef = ref()
+const { datasetId } = params as any
 
 const loading = ref(false)
 const filterText = ref('')
@@ -113,7 +113,58 @@ const paginationConfig = reactive({
   total: 0
 })
 
-function editName(val: string) {}
+function deleteDocument(row: any) {
+  MsgConfirm(
+    `是否删除文档：${row.name} ?`,
+    `此文档下的 ${row.paragraph_count} 个分段都会被删除，请谨慎操作。`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      loading.value = true
+      datasetApi
+        .delDocument(datasetId, row.id)
+        .then(() => {
+          MsgSuccess('删除成功')
+          getList()
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    })
+    .catch(() => {})
+}
+
+function updateData(documentId: string, data: any) {
+  loading.value = true
+  datasetApi
+    .putDocument(datasetId, documentId, data)
+    .then((res) => {
+      const index = documentData.value.findIndex((v) => v.id === documentId)
+      documentData.value.splice(index, 1, res.data)
+      MsgSuccess('修改成功')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function changeState(bool: Boolean, row: any) {
+  const obj = {
+    is_active: bool
+  }
+  currentMouseId.value && updateData(row.id, obj)
+}
+
+function editName(val: string) {
+  const obj = {
+    name: val
+  }
+  currentMouseId.value && updateData(currentMouseId.value, obj)
+}
 
 function cellMouseEnter(row: any) {
   currentMouseId.value = row.id
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/SegmentPreview.vue
index 29df31797..d91ea6b83 100644
--- a/ui/src/views/dataset/component/SegmentPreview.vue
+++ b/ui/src/views/dataset/component/SegmentPreview.vue
@@ -74,7 +74,7 @@ function editHandle(item: any, index: number, cIndex: number) {
 }
 
 function deleteHandle(item: any, index: number, cIndex: number) {
-  MsgConfirm(`是否删除分段：${item.title}？`, `删除后将不会存入数据集，对本地文档无影响。`, {
+  MsgConfirm(`是否删除分段：${item.title} ?`, `删除后将不会存入数据集，对本地文档无影响。`, {
     confirmButtonText: '删除',
     confirmButtonClass: 'danger'
   })
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 13352adf5..9dba34141 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -76,7 +76,7 @@ function loadDataset() {}
 
 function deleteDateset(row: any) {
   MsgConfirm(
-    `是否删除数据集：${row.name}？`,
+    `是否删除数据集：${row.name} ?`,
     `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`,
     {
       confirmButtonText: '删除',

From a1a312d109096abde7fa903d33671b4ea71e9443 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 10 Nov 2023 17:18:00 +0800
Subject: [PATCH 12/18] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         | 73 ++++++++++++++++---
 ui/src/api/type/dataset.ts                    |  2 +-
 ui/src/components/app-table/index.vue         | 16 +++-
 ui/src/router/routes.ts                       |  2 +-
 ui/src/views/dataset/CreateDataset.vue        | 66 +++++++++++++++--
 ui/src/views/dataset/DatasetDocument.vue      | 29 +++++++-
 ui/src/views/dataset/DatasetSetting.vue       | 61 ++++++++++++++--
 ui/src/views/dataset/component/BaseForm.vue   | 37 +++++++++-
 .../dataset/component/SegmentPreview.vue      | 19 ++++-
 .../dataset/component/UploadComponent.vue     | 16 ++--
 ui/src/views/dataset/index.vue                | 24 ++++--
 ui/src/views/dataset/step/StepFirst.vue       | 33 +++++++--
 ui/src/views/dataset/step/StepSecond.vue      | 22 ++++--
 ui/src/views/login/reset-password/index.vue   |  5 +-
 14 files changed, 336 insertions(+), 69 deletions(-)

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index edc6ef4e5..667033c12 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -1,6 +1,6 @@
 import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
-import type { datasetListRequest } from '@/api/type/dataset'
+import type { datasetListRequest, datasetData } from '@/api/type/dataset'
 
 const prefix = '/dataset'
 
@@ -9,19 +9,22 @@ const prefix = '/dataset'
  * @param 参数  {
               "current_page": "string",
               "page_size": "string",
-              "search_text": "string",
+              "name": "string",
             }
  */
-const getDateset: (param: datasetListRequest) => Promise<Result<any[]>> = (param) => {
-  return get(`${prefix}`, param)
+const getDateset: (param: datasetListRequest) => Promise<Result<any>> = (param) => {
+  return get(
+    `${prefix}/${param.current_page}/${param.page_size}`,
+    param.name && { name: param.name }
+  )
 }
 
 /**
  * 获取全部数据集
- * @param 参数 search_text
+ * @param 参数 name
  */
-const getAllDateset: (param?: String) => Promise<Result<any[]>> = (param) => {
-  return get(`${prefix}`, param && { search_text: param })
+const getAllDateset: (param?: string) => Promise<Result<any[]>> = (param) => {
+  return get(`${prefix}`, param && { name: param })
 }
 
 /**
@@ -45,7 +48,6 @@ const delDateset: (dataset_id: String) => Promise<Result<boolean>> = (dataset_id
         {
           "content": "string",
           "title": "string",
-          "is_active": true,
           "problem_list": [
             {
               "id": "string",
@@ -58,10 +60,34 @@ const delDateset: (dataset_id: String) => Promise<Result<boolean>> = (dataset_id
   ]
 }
  */
-const postDateset: (data: any) => Promise<Result<any>> = (data) => {
+const postDateset: (data: datasetData) => Promise<Result<any>> = (data) => {
   return post(`${prefix}`, data)
 }
 
+/**
+ * 数据集详情
+ * @param 参数 dataset_id
+ */
+const getDatesetDetail: (dataset_id: string) => Promise<Result<any>> = (dataset_id) => {
+  return get(`${prefix}/${dataset_id}`)
+}
+
+/**
+ * 修改数据集信息
+ * @param 参数 
+ * dataset_id, document_id, 
+ * {
+      "name": "string",
+      "desc": true
+    }
+ */
+const putDateset: (dataset_id: string, data: any) => Promise<Result<any>> = (
+  dataset_id,
+  data: any
+) => {
+  return put(`${prefix}/${dataset_id}`, data)
+}
+
 /**
  * 分段预览（上传文档）
  * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
@@ -82,6 +108,32 @@ const getDocument: (dataset_id: string, name?: string) => Promise<Result<any>> =
   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 参数 
@@ -115,8 +167,11 @@ export default {
   getAllDateset,
   delDateset,
   postDateset,
+  getDatesetDetail,
+  putDateset,
   postSplitDocument,
   getDocument,
+  postDocument,
   putDocument,
   delDocument
 }
diff --git a/ui/src/api/type/dataset.ts b/ui/src/api/type/dataset.ts
index becec96d7..d1f60f155 100644
--- a/ui/src/api/type/dataset.ts
+++ b/ui/src/api/type/dataset.ts
@@ -1,7 +1,7 @@
 interface datasetListRequest {
   current_page: number
   page_size: number
-  search_text: string
+  name: string
 }
 
 interface datasetData {
diff --git a/ui/src/components/app-table/index.vue b/ui/src/components/app-table/index.vue
index 6f1a7badb..14dafc87c 100644
--- a/ui/src/components/app-table/index.vue
+++ b/ui/src/components/app-table/index.vue
@@ -10,8 +10,8 @@
             class="w-240 mr-12"
           />
 
-          <el-button type="primary" @click="submitHandle">创建</el-button>
-          <el-button @click="showInput = false">取消</el-button>
+          <el-button type="primary" @click="submitHandle" :disabled="loading">创建</el-button>
+          <el-button @click="showInput = false" :disabled="loading">取消</el-button>
         </div>
         <div v-else @click="quickCreateHandel" class="w-full">
           <el-button type="primary" link>
@@ -38,7 +38,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
 defineOptions({ name: 'AppTable' })
 
 const props = defineProps({
@@ -53,9 +53,13 @@ const props = defineProps({
 })
 const emit = defineEmits(['changePage', 'sizeChange', 'creatQuick'])
 
+const paginationConfig = computed(() => props.paginationConfig)
+
 const pageSizes = [10, 20, 50, 100]
+
 const quickInputRef = ref()
 
+const loading = ref(false)
 const showInput = ref(false)
 const inputValue = ref('')
 
@@ -66,8 +70,12 @@ watch(showInput, (bool) => {
 })
 
 function submitHandle() {
+  loading.value = true
   emit('creatQuick', inputValue.value)
-  showInput.value = false
+  setTimeout(() => {
+    showInput.value = false
+    loading.value = false
+  }, 200)
 }
 
 function quickCreateHandel() {
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index e7e9ab22b..b127cfe5d 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -9,7 +9,7 @@ export const routes: Array<RouteRecordRaw> = [
     path: '/',
     name: 'home',
     component: () => import('@/layout/app-layout/index.vue'),
-    redirect: '/setting',
+    redirect: '/dataset',
     children: [
       // {
       //   path: '/first',
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 89a43e157..f2d05264f 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -14,26 +14,41 @@
         </el-step>
       </el-steps>
     </template>
-    <div class="create-dataset__main flex">
+    <div class="create-dataset__main flex" v-loading="loading">
       <div class="create-dataset__component">
         <component :is="steps[active].component" :ref="steps[active]?.ref" />
       </div>
     </div>
     <div class="create-dataset__footer text-right border-t">
-      <el-button @click="router.go(-1)">取 消</el-button>
-      <el-button @click="prev" v-if="active === 1">上一步</el-button>
-      <el-button @click="next" type="primary" v-if="active === 0">下一步</el-button>
-      <el-button @click="next" type="primary" v-if="active === 1">开始导入</el-button>
+      <el-button @click="router.go(-1)" :disabled="loading">取 消</el-button>
+      <el-button @click="prev" v-if="active === 1" :disabled="loading">上一步</el-button>
+      <el-button @click="next" type="primary" v-if="active === 0" :disabled="loading"
+        >下一步</el-button
+      >
+      <el-button @click="submit" type="primary" v-if="active === 1" :disabled="loading">
+        开始导入
+      </el-button>
     </div>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 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 { MsgSuccess } from '@/utils/message'
+import useStore from '@/stores'
+const { dataset } = useStore()
+const baseInfo = computed(() => dataset.baseInfo)
 
 const router = useRouter()
+const route = useRoute()
+const {
+  params: { type },
+  query: { id }
+} = route as any
 
 const steps = [
   {
@@ -42,14 +57,16 @@ const steps = [
     component: StepFirst
   },
   {
-    ref: 'SetRulesRef',
+    ref: 'StepSecondRef',
     name: '设置分段规则',
     component: StepSecond
   }
 ]
 
 const StepFirstRef = ref()
+const StepSecondRef = ref()
 
+const loading = ref(false)
 const active = ref(0)
 
 async function next() {
@@ -60,6 +77,39 @@ async function next() {
 const prev = () => {
   active.value = 0
 }
+
+function submit() {
+  loading.value = true
+  const documents = [] as any[]
+  StepSecondRef.value.segmentList.map((item: any) => {
+    documents.push({
+      name: item.name,
+      paragraphs: item.content
+    })
+  })
+  const obj = { ...baseInfo.value, documents } as datasetData
+  if (id) {
+    datasetApi
+      .postDocument(id, documents)
+      .then((res) => {
+        MsgSuccess('提交成功')
+        router.push({ path: `/dataset/${id}/document` })
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  } else {
+    datasetApi
+      .postDateset(obj)
+      .then((res) => {
+        MsgSuccess('提交成功')
+        loading.value = false
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  }
+}
 </script>
 <style lang="scss" scoped>
 .create-dataset {
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
index 0094f840d..155af0dbd 100644
--- a/ui/src/views/dataset/DatasetDocument.vue
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -3,7 +3,9 @@
     <div class="main-calc-height">
       <div class="p-24">
         <div class="flex-between">
-          <el-button type="primary" @click="router.push({ path: '/dataset/upload' })"
+          <el-button
+            type="primary"
+            @click="router.push({ path: '/dataset/upload', query: { id: datasetId } })"
             >上传文档</el-button
           >
           <el-input
@@ -11,6 +13,7 @@
             placeholder="按 文档名称 搜索"
             prefix-icon="Search"
             class="w-240"
+            @change="getList"
           />
         </div>
         <app-table
@@ -22,6 +25,7 @@
           @changePage="handleCurrentChange"
           @cell-mouse-enter="cellMouseEnter"
           @cell-mouse-leave="cellMouseLeave"
+          @creatQuick="creatQuickHandle"
           v-loading="loading"
         >
           <el-table-column prop="name" label="文件名称" min-width="280">
@@ -69,7 +73,7 @@
           </el-table-column>
           <el-table-column prop="name" label="操作" align="center">
             <template #default="{ row }">
-              <span>
+              <span v-if="row.status === 2">
                 <el-tooltip effect="dark" content="刷新" placement="top">
                   <el-button type="primary" text>
                     <el-icon><RefreshRight /></el-icon>
@@ -99,8 +103,9 @@ import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 const router = useRouter()
 const route = useRoute()
-const { params } = route
-const { datasetId } = params as any
+const {
+  params: { datasetId }
+} = route as any
 
 const loading = ref(false)
 const filterText = ref('')
@@ -113,6 +118,21 @@ const paginationConfig = reactive({
   total: 0
 })
 
+// 快速创建空白文档
+function creatQuickHandle(val: string) {
+  loading.value = true
+  const obj = { name: val }
+  datasetApi
+    .postDocument(datasetId, obj)
+    .then((res) => {
+      getList()
+      MsgSuccess('创建成功')
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
 function deleteDocument(row: any) {
   MsgConfirm(
     `是否删除文档：${row.name} ?`,
@@ -137,6 +157,7 @@ function deleteDocument(row: any) {
     .catch(() => {})
 }
 
+// 更新名称或状态
 function updateData(documentId: string, data: any) {
   loading.value = true
   datasetApi
diff --git a/ui/src/views/dataset/DatasetSetting.vue b/ui/src/views/dataset/DatasetSetting.vue
index 5a792847b..ad54c97ef 100644
--- a/ui/src/views/dataset/DatasetSetting.vue
+++ b/ui/src/views/dataset/DatasetSetting.vue
@@ -1,14 +1,65 @@
 <template>
   <LayoutContainer header="设置">
-    <div class="main-calc-height">
-      <div class="p-24">
-        <BaseForm />
+    <div class="main-calc-height dataset-setting">
+      <div class="p-24" v-loading="loading">
+        <BaseForm ref="BaseFormRef" :data="detail" />
+        <div class="text-right">
+          <el-button @click="submit" type="primary"> 保存 </el-button>
+        </div>
       </div>
-  
     </div>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import BaseForm from '@/views/dataset/component/BaseForm.vue'
+import datasetApi from '@/api/dataset'
+import { MsgSuccess } from '@/utils/message'
+const route = useRoute()
+const {
+  params: { datasetId }
+} = route as any
+
+const BaseFormRef = ref()
+const loading = ref(false)
+const detail = ref({})
+
+async function submit() {
+  if (await BaseFormRef.value?.validate()) {
+    loading.value = true
+    datasetApi
+      .postDocument(datasetId, BaseFormRef.value.form)
+      .then((res) => {
+        MsgSuccess('保存成功')
+        loading.value = false
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  }
+}
+
+function getDetail() {
+  loading.value = true
+  datasetApi
+    .getDatesetDetail(datasetId)
+    .then((res) => {
+      detail.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getDetail()
+})
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.dataset-setting {
+  width: 70%;
+  margin: 0 auto;
+}
+</style>
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index 6ddac88d5..c673abed8 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -22,8 +22,20 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-const form = reactive({
+import { ref, reactive, onMounted, computed, watch } from 'vue'
+import useStore from '@/stores'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const { dataset } = useStore()
+const baseInfo = computed(() => dataset.baseInfo)
+
+const form = ref<any>({
   name: '',
   desc: ''
 })
@@ -33,6 +45,21 @@ const rules = reactive({
   desc: [{ required: true, message: '请输入数据集描述', trigger: 'blur' }]
 })
 const FormRef = ref()
+
+watch(
+  () => props.data,
+  (value) => {
+    if (JSON.stringify(value) !== '{}') {
+      form.value.name = value.name
+      form.value.desc = value.desc
+    }
+  },
+  {
+    // 初始化立即执行
+    immediate: true
+  }
+)
+
 // 表单校验
 function validate() {
   if (!FormRef.value) return
@@ -41,7 +68,11 @@ function validate() {
   })
 }
 
-onMounted(() => {})
+onMounted(() => {
+  if (baseInfo.value) {
+    form.value = baseInfo.value
+  }
+})
 
 defineExpose({
   validate,
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/SegmentPreview.vue
index d91ea6b83..8c6409ee6 100644
--- a/ui/src/views/dataset/component/SegmentPreview.vue
+++ b/ui/src/views/dataset/component/SegmentPreview.vue
@@ -44,7 +44,7 @@
   <EditSegmentDialog ref="EditSegmentDialogRef" @updateContent="updateContent" />
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import EditSegmentDialog from './EditSegmentDialog.vue'
 import { filesize, getImgUrl } from '@/utils/utils'
@@ -65,7 +65,18 @@ const activeName = ref(0)
 const currentPIndex = ref(null) as any
 const currentCIndex = ref(null) as any
 
-const newData = ref(props.data)
+const newData = ref<any[]>([])
+
+watch(
+  () => props.data,
+  (value) => {
+    newData.value = value
+  },
+  {
+    // 初始化立即执行
+    immediate: true
+  }
+)
 
 function editHandle(item: any, index: number, cIndex: number) {
   currentPIndex.value = index
@@ -90,11 +101,11 @@ function updateContent(data: any) {
   emit('update:data', newData.value)
 }
 
-onMounted(() => {})
-
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   // console.log(tab, event)
 }
+
+onMounted(() => {})
 </script>
 <style scoped lang="scss">
 .segment-tabs {
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index 3ec7c1e1f..e075d9e6f 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -48,11 +48,14 @@
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import type { UploadProps } from 'element-plus'
 import { filesize, getImgUrl } from '@/utils/utils'
 import { MsgError } from '@/utils/message'
-const form = reactive({
+import useStore from '@/stores'
+const { dataset } = useStore()
+const documentsFiles = computed(() => dataset.documentsFiles)
+const form = ref({
   fileList: [] as any
 })
 
@@ -61,7 +64,6 @@ const rules = reactive({
 })
 const FormRef = ref()
 
-
 // const beforeUploadHandle: UploadProps['beforeUpload'] = (rawFile) => {
 //   const type = fileType(rawFile?.name)
 //   console.log(type)
@@ -75,7 +77,7 @@ const FormRef = ref()
 //   return true
 // }
 function deleteFlie(index: number) {
-  form.fileList.splice(index, 1)
+  form.value.fileList.splice(index, 1)
 }
 
 // 表单校验
@@ -85,7 +87,11 @@ function validate() {
     return valid
   })
 }
-onMounted(() => {})
+onMounted(() => {
+  if (documentsFiles.value) {
+    form.value.fileList = documentsFiles.value
+  }
+})
 
 defineExpose({
   validate,
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 9dba34141..d45dfcb45 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -2,7 +2,13 @@
   <div class="dataset-list-container p-24">
     <div class="flex-between">
       <h3>数据集</h3>
-      <el-input v-model="filterText" placeholder="搜索内容" prefix-icon="Search" class="w-240" />
+      <el-input
+        v-model="pageConfig.name"
+        @change="search"
+        placeholder="按 名称 搜索"
+        prefix-icon="Search"
+        class="w-240"
+      />
     </div>
     <div v-loading.fullscreen.lock="loading">
       <el-row
@@ -54,7 +60,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import datasetApi from '@/api/dataset'
 import type { datasetListRequest } from '@/api/type/dataset'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
@@ -63,17 +69,21 @@ import { numberFormat } from '@/utils/utils'
 const router = useRouter()
 
 const loading = ref(false)
-const filterText = ref('')
 const datasetList = ref<any[]>([])
 const disabledScroll = ref(false)
-const pageConfig = ref<datasetListRequest>({
+const pageConfig = reactive<datasetListRequest>({
   current_page: 1,
   page_size: 20,
-  search_text: ''
+  name: ''
 })
 
 function loadDataset() {}
 
+function search() {
+  pageConfig.current_page = 1
+  getList()
+}
+
 function deleteDateset(row: any) {
   MsgConfirm(
     `是否删除数据集：${row.name} ?`,
@@ -101,9 +111,9 @@ function deleteDateset(row: any) {
 function getList() {
   loading.value = true
   datasetApi
-    .getDateset(pageConfig.value)
+    .getDateset(pageConfig)
     .then((res) => {
-      datasetList.value = res.data
+      datasetList.value = res.data?.records
       loading.value = false
     })
     .catch(() => {
diff --git a/ui/src/views/dataset/step/StepFirst.vue b/ui/src/views/dataset/step/StepFirst.vue
index 172adfb38..514ce7610 100644
--- a/ui/src/views/dataset/step/StepFirst.vue
+++ b/ui/src/views/dataset/step/StepFirst.vue
@@ -2,31 +2,48 @@
   <el-scrollbar>
     <div class="upload-document p-24">
       <!-- 基本信息 -->
-      <BaseForm ref="BaseFormRef" />
+      <BaseForm ref="BaseFormRef" v-if="isCreate" />
       <!-- 上传文档 -->
       <UploadComponent ref="UploadComponentRef" />
     </div>
   </el-scrollbar>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import BaseForm from '@/views/dataset/component/BaseForm.vue'
 import UploadComponent from '@/views/dataset/component/UploadComponent.vue'
+
 import useStore from '@/stores'
 const { dataset } = useStore()
 
+const route = useRoute()
+const {
+  params: { type }
+} = route
+const isCreate = type === 'create'
 const BaseFormRef = ref()
 const UploadComponentRef = ref()
 
 // submit
 const onSubmit = async () => {
-  if ((await BaseFormRef.value.validate()) && (await UploadComponentRef.value.validate())) {
-    // stores保存数据
-    dataset.saveBaseInfo(BaseFormRef.value.form)
-    dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
-    return true
+  if (isCreate) {
+    if ((await BaseFormRef.value?.validate()) && (await UploadComponentRef.value.validate())) {
+      // stores保存数据
+      dataset.saveBaseInfo(BaseFormRef.value.form)
+      dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
+      return true
+    } else {
+      return false
+    }
   } else {
-    return false
+    if (await UploadComponentRef.value.validate()) {
+      // stores保存数据
+      dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
+      return true
+    } else {
+      return false
+    }
   }
 }
 
diff --git a/ui/src/views/dataset/step/StepSecond.vue b/ui/src/views/dataset/step/StepSecond.vue
index a1eb5544d..075478121 100644
--- a/ui/src/views/dataset/step/StepSecond.vue
+++ b/ui/src/views/dataset/step/StepSecond.vue
@@ -74,7 +74,7 @@
       </el-col>
 
       <el-col :span="12" class="p-24 border-l">
-        <div>
+        <div v-loading="loading">
           <h4 class="title-decoration-1 mb-8">分段预览</h4>
           <SegmentPreview v-model:data="segmentList" />
         </div>
@@ -116,14 +116,14 @@ function splitDocument() {
       fd.append('file', item?.raw)
     }
   })
-
-  Object.keys(form).forEach((key) => {
-    fd.append(key, form[key])
-  })
-
+  if (radio.value === '2') {
+    Object.keys(form).forEach((key) => {
+      fd.append(key, form[key])
+    })
+  }
   DatasetApi.postSplitDocument(fd)
     .then((res: any) => {
-      segmentList.value = res
+      segmentList.value = res.data
       loading.value = false
     })
     .catch(() => {
@@ -131,7 +131,13 @@ function splitDocument() {
     })
 }
 
-onMounted(() => {})
+onMounted(() => {
+  splitDocument()
+})
+
+defineExpose({
+  segmentList
+})
 </script>
 <style scoped lang="scss">
 .set-rules {
diff --git a/ui/src/views/login/reset-password/index.vue b/ui/src/views/login/reset-password/index.vue
index 2ee332430..ec474aa98 100644
--- a/ui/src/views/login/reset-password/index.vue
+++ b/ui/src/views/login/reset-password/index.vue
@@ -63,8 +63,9 @@ import type { FormInstance, FormRules } from 'element-plus'
 import UserApi from '@/api/user'
 const router = useRouter()
 const route = useRoute()
-const { params } = route
-const { code, email } = params
+const {
+  params: { code, email }
+} = route
 const resetPasswordForm = ref<ResetPasswordRequest>({
   password: '',
   re_password: '',

From 76dd9d21925aa4d4a891360f0877203e071610c0 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 10 Nov 2023 19:05:52 +0800
Subject: [PATCH 13/18] =?UTF-8?q?feat:=20=E5=88=86=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                        |  26 ++++-
 ui/src/components/card-box/index.vue         |   6 +-
 ui/src/components/layout-container/index.vue |   2 +-
 ui/src/components/read-write/index.vue       |   6 +-
 ui/src/router/modules/dataset.ts             |   7 ++
 ui/src/stores/modules/dataset.ts             |   2 +-
 ui/src/utils/utils.ts                        |   2 +-
 ui/src/views/dataset/CreateDataset.vue       |  54 ++++++++--
 ui/src/views/dataset/DatasetDocument.vue     |  11 +-
 ui/src/views/dataset/DatasetSetting.vue      |   2 +-
 ui/src/views/dataset/DocumentDetail.vue      | 107 +++++++++++++++++++
 ui/src/views/dataset/component/BaseForm.vue  |   2 +-
 ui/src/views/dataset/step/StepFirst.vue      |   1 +
 13 files changed, 207 insertions(+), 21 deletions(-)
 create mode 100644 ui/src/views/dataset/DocumentDetail.vue

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 667033c12..a3ebca6f1 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -162,6 +162,28 @@ const delDocument: (dataset_id: string, document_id: string) => Promise<Result<b
   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`)
+}
+
 export default {
   getDateset,
   getAllDateset,
@@ -173,5 +195,7 @@ export default {
   getDocument,
   postDocument,
   putDocument,
-  delDocument
+  delDocument,
+  getDocumentDetail,
+  getParagraph
 }
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 7a53e97bc..98e027215 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -3,7 +3,7 @@
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
-          <AppAvatar class="mr-12" shape="square" :size="32">
+          <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>
@@ -33,6 +33,10 @@ const props = defineProps({
   description: {
     type: String,
     default: ''
+  },
+  showIcon: {
+    type: Boolean,
+    default: true
   }
 })
 
diff --git a/ui/src/components/layout-container/index.vue b/ui/src/components/layout-container/index.vue
index b548756b3..8ce1f322c 100644
--- a/ui/src/components/layout-container/index.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -17,7 +17,7 @@ import { computed, useSlots } from 'vue'
 defineOptions({ name: 'LayoutContainer' })
 const slots = useSlots()
 const props = defineProps({
-  header: String,
+  header: String || null,
   backTo: String
 })
 const showBack = computed(() => {
diff --git a/ui/src/components/read-write/index.vue b/ui/src/components/read-write/index.vue
index d0c06433d..93719dcb4 100644
--- a/ui/src/components/read-write/index.vue
+++ b/ui/src/components/read-write/index.vue
@@ -3,7 +3,7 @@
     <slot name="read">
       <div class="flex align-center" v-if="!isEdit">
         <span>{{ data }}</span>
-        <el-button @click.prevent="editNameHandle" text v-if="showEditIcon">
+        <el-button @click.stop="editNameHandle" text v-if="showEditIcon">
           <el-icon><Edit /></el-icon>
         </el-button>
       </div>
@@ -12,12 +12,12 @@
       <div class="flex align-center" v-if="isEdit">
         <el-input ref="inputRef" v-model="writeValue" placeholder="请输入"></el-input>
         <span class="ml-4">
-          <el-button type="primary" text @click="submit" :disabled="loading">
+          <el-button type="primary" text @click.stop="submit" :disabled="loading">
             <el-icon><Select /></el-icon>
           </el-button>
         </span>
         <span>
-          <el-button text @click="isEdit = false" :disabled="loading">
+          <el-button text @click.stop="isEdit = false" :disabled="loading">
             <el-icon><CloseBold /></el-icon>
           </el-button>
         </span>
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index 0e8cdc5c6..b3aa75e31 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -49,6 +49,13 @@ const datasetRouter = {
           component: () => import('@/views/dataset/DatasetSetting.vue')
         }
       ]
+    },
+    {
+      path: '/dataset/:datasetId/:documentId', // 分段详情
+      name: 'DocumentDetail',
+      meta: { activeMenu: '/dataset' },
+      component: () => import('@/views/dataset/DocumentDetail.vue'),
+      hidden: true
     }
   ]
 }
diff --git a/ui/src/stores/modules/dataset.ts b/ui/src/stores/modules/dataset.ts
index 103d62331..84cc1574c 100644
--- a/ui/src/stores/modules/dataset.ts
+++ b/ui/src/stores/modules/dataset.ts
@@ -14,7 +14,7 @@ const useDatasetStore = defineStore({
     documentsFiles: []
   }),
   actions: {
-    saveBaseInfo(info: datasetData) {
+    saveBaseInfo(info: datasetData | null) {
       this.baseInfo = info
     },
     saveDocumentsFile(file: UploadUserFile[]) {
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts
index b6229faba..792158798 100644
--- a/ui/src/utils/utils.ts
+++ b/ui/src/utils/utils.ts
@@ -1,5 +1,5 @@
 export function toThousands(num: any) {
-  return num.toString().replace(/\d+/, function (n: any) {
+  return num?.toString().replace(/\d+/, function (n: any) {
     return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
   })
 }
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index f2d05264f..ef6ad1e43 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -4,22 +4,51 @@
       <el-steps :active="active" finish-status="success" align-center class="create-dataset__steps">
         <el-step v-for="(item, index) in steps" :key="index">
           <template #icon>
-            <div class="app-step">
+            <div class="app-step flex align-center">
               <div class="el-step__icon is-text">
-                <div class="el-step__icon-inner">{{ index + 1 }}</div>
+                <div class="el-step__icon-inner">
+                  <el-icon v-if="active == index + 1" style="margin-top: 1px"><Select /></el-icon>
+                  <span v-else> {{ index + 1 }}</span>
+                </div>
               </div>
-              {{ item.name }}
+              <span class="ml-4">{{ item.name }}</span>
             </div>
           </template>
         </el-step>
       </el-steps>
     </template>
     <div class="create-dataset__main flex" v-loading="loading">
-      <div class="create-dataset__component">
-        <component :is="steps[active].component" :ref="steps[active]?.ref" />
+      <div class="create-dataset__component main-calc-height">
+        <template v-if="steps[active]?.component">
+          <component :is="steps[active].component" :ref="steps[active]?.ref" />
+        </template>
+        <template v-else-if="active === 2">
+          <el-result icon="success" title="🎉 数据集创建成功 🎉">
+            <template #sub-title>
+              <div class="mt-8">
+                <span class="bold">{{ successInfo?.document_count || 0 }}</span>
+                <el-text type="info" class="ml-4">文档</el-text>
+                <el-divider direction="vertical" />
+                <span class="bold">{{ successInfo?.document_list.length || 0 }}</span>
+                <el-text type="info" class="ml-4">分段</el-text>
+                <el-divider direction="vertical" />
+                <span class="bold">{{ toThousands(successInfo?.char_length) || 0 }}</span>
+                <el-text type="info" class="ml-4">字符</el-text>
+              </div>
+            </template>
+            <template #extra>
+              <el-button @click="router.push({ path: `/dataset` })">返回数据集列表</el-button>
+              <el-button
+                type="primary"
+                @click="router.push({ path: `/dataset/${successInfo?.id}/document` })"
+                >前往文档</el-button
+              >
+            </template>
+          </el-result>
+        </template>
       </div>
     </div>
-    <div class="create-dataset__footer text-right border-t">
+    <div class="create-dataset__footer text-right border-t" v-if="active !== 2">
       <el-button @click="router.go(-1)" :disabled="loading">取 消</el-button>
       <el-button @click="prev" v-if="active === 1" :disabled="loading">上一步</el-button>
       <el-button @click="next" type="primary" v-if="active === 0" :disabled="loading"
@@ -39,6 +68,7 @@ import StepSecond from './step/StepSecond.vue'
 import datasetApi from '@/api/dataset'
 import type { datasetData } from '@/api/type/dataset'
 import { MsgSuccess } from '@/utils/message'
+import { toThousands } from '@/utils/utils'
 import useStore from '@/stores'
 const { dataset } = useStore()
 const baseInfo = computed(() => dataset.baseInfo)
@@ -46,7 +76,6 @@ const baseInfo = computed(() => dataset.baseInfo)
 const router = useRouter()
 const route = useRoute()
 const {
-  params: { type },
   query: { id }
 } = route as any
 
@@ -68,6 +97,7 @@ const StepSecondRef = ref()
 
 const loading = ref(false)
 const active = ref(0)
+const successInfo = ref<any>(null)
 
 async function next() {
   if (await StepFirstRef.value.onSubmit()) {
@@ -78,6 +108,10 @@ const prev = () => {
   active.value = 0
 }
 
+function clearStore() {
+  dataset.saveBaseInfo(null)
+  dataset.saveDocumentsFile([])
+}
 function submit() {
   loading.value = true
   const documents = [] as any[]
@@ -93,6 +127,7 @@ function submit() {
       .postDocument(id, documents)
       .then((res) => {
         MsgSuccess('提交成功')
+        clearStore()
         router.push({ path: `/dataset/${id}/document` })
       })
       .catch(() => {
@@ -102,7 +137,9 @@ function submit() {
     datasetApi
       .postDateset(obj)
       .then((res) => {
-        MsgSuccess('提交成功')
+        successInfo.value = res.data
+        active.value = 2
+        clearStore()
         loading.value = false
       })
       .catch(() => {
@@ -128,7 +165,6 @@ function submit() {
 
   &__component {
     width: 100%;
-    height: var(--create-dataset-height);
     margin: 0 auto;
     overflow: hidden;
     box-sizing: border-box;
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
index 155af0dbd..eef9f4f5c 100644
--- a/ui/src/views/dataset/DatasetDocument.vue
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -26,6 +26,7 @@
           @cell-mouse-enter="cellMouseEnter"
           @cell-mouse-leave="cellMouseLeave"
           @creatQuick="creatQuickHandle"
+          @row-click="rowClickHandle"
           v-loading="loading"
         >
           <el-table-column prop="name" label="文件名称" min-width="280">
@@ -58,7 +59,9 @@
           </el-table-column>
           <el-table-column prop="name" label="启动状态">
             <template #default="{ row }">
-              <el-switch v-model="row.is_active" @change="changeState($event, row)" />
+              <div @click.stop>
+                <el-switch v-model="row.is_active" @change="changeState($event, row)" />
+              </div>
             </template>
           </el-table-column>
           <el-table-column prop="create_time" label="创建时间" width="170">
@@ -82,7 +85,7 @@
               </span>
               <span class="ml-4">
                 <el-tooltip effect="dark" content="删除" placement="top">
-                  <el-button type="primary" text @click="deleteDocument(row)">
+                  <el-button type="primary" text @click.stop="deleteDocument(row)">
                     <el-icon><Delete /></el-icon>
                   </el-button>
                 </el-tooltip>
@@ -118,6 +121,10 @@ const paginationConfig = reactive({
   total: 0
 })
 
+function rowClickHandle(row: any) {
+  router.push({ path: `/dataset/${datasetId}/${row.id}` })
+}
+
 // 快速创建空白文档
 function creatQuickHandle(val: string) {
   loading.value = true
diff --git a/ui/src/views/dataset/DatasetSetting.vue b/ui/src/views/dataset/DatasetSetting.vue
index ad54c97ef..d49d52c0a 100644
--- a/ui/src/views/dataset/DatasetSetting.vue
+++ b/ui/src/views/dataset/DatasetSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer header="设置">
-    <div class="main-calc-height dataset-setting">
+    <div class="dataset-setting">
       <div class="p-24" v-loading="loading">
         <BaseForm ref="BaseFormRef" :data="detail" />
         <div class="text-right">
diff --git a/ui/src/views/dataset/DocumentDetail.vue b/ui/src/views/dataset/DocumentDetail.vue
new file mode 100644
index 000000000..01abfbd92
--- /dev/null
+++ b/ui/src/views/dataset/DocumentDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <LayoutContainer :header="documentDetail?.name" back-to="-1" class="dataset-detail">
+    <template #header>
+      <!-- <el-steps :active="active" finish-status="success" align-center class="create-dataset__steps">
+        <el-step v-for="(item, index) in steps" :key="index">
+          <template #icon>
+            <div class="app-step flex align-center">
+              <div class="el-step__icon is-text">
+                <div class="el-step__icon-inner">
+                  <el-icon v-if="active == index + 1" style="margin-top: 1px"><Select /></el-icon>
+                  <span v-else> {{ index + 1 }}</span>
+                </div>
+              </div>
+              <span class="ml-4">{{ item.name }}</span>
+            </div>
+          </template>
+        </el-step>
+      </el-steps> -->
+    </template>
+    <div class="dataset-detail__main main-calc-height p-24">
+      <el-row :gutter="15">
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="6"
+          :xl="4"
+          v-for="(item, index) in paragraphDetail"
+          :key="index"
+          class="mt-8"
+        >
+          <CardBox
+            shadow="hover"
+            :title="item.title"
+            :description="item.content"
+            class="cursor"
+            :showIcon="false"
+          >
+            <!-- <template #footer>
+              <div class="footer-content">
+                <span class="bold">{{ item?.document_count || 0 }}</span>
+                文档<el-divider direction="vertical" />
+                <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                字符<el-divider direction="vertical" />
+                <span class="bold">{{ item?.char_length || 0 }}</span>
+                关联应用
+              </div>
+            </template> -->
+          </CardBox>
+        </el-col>
+      </el-row>
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import datasetApi from '@/api/dataset'
+
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { datasetId, documentId }
+} = route as any
+
+const loading = ref(false)
+const documentDetail = ref<any>({})
+const paragraphDetail = ref<any[]>([])
+
+function getDetail() {
+  loading.value = true
+  datasetApi
+    .getDocumentDetail(datasetId, documentId)
+    .then((res) => {
+      documentDetail.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getParagraphDetail() {
+  loading.value = true
+  datasetApi
+    .getParagraph(datasetId, documentId)
+    .then((res) => {
+      paragraphDetail.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getDetail()
+  getParagraphDetail()
+})
+</script>
+<style lang="scss" scoped>
+.dataset-detail {
+  &__main{
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index c673abed8..3825aeb3b 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -49,7 +49,7 @@ const FormRef = ref()
 watch(
   () => props.data,
   (value) => {
-    if (JSON.stringify(value) !== '{}') {
+    if (value && JSON.stringify(value) !== '{}') {
       form.value.name = value.name
       form.value.desc = value.desc
     }
diff --git a/ui/src/views/dataset/step/StepFirst.vue b/ui/src/views/dataset/step/StepFirst.vue
index 514ce7610..8ad011f1f 100644
--- a/ui/src/views/dataset/step/StepFirst.vue
+++ b/ui/src/views/dataset/step/StepFirst.vue
@@ -57,5 +57,6 @@ defineExpose({
 .upload-document {
   width: 70%;
   margin: 0 auto;
+  margin-bottom: 20px;
 }
 </style>

From e452a942bea0220a8e2cac962d12d9e5c1f1ef8d Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 13 Nov 2023 19:02:13 +0800
Subject: [PATCH 14/18] =?UTF-8?q?feat:=20=E6=AE=B5=E8=90=BD=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         |  41 +++-
 ui/src/components/card-box/index.vue          |   4 +
 ui/src/styles/app.scss                        |   5 +-
 ui/src/styles/element-plus.scss               |  22 +-
 ui/src/styles/variables.scss                  |   5 +-
 ui/src/views/404/index.vue                    |   2 +-
 ui/src/views/dataset/CreateDataset.vue        |   1 -
 ui/src/views/dataset/DocumentDetail.vue       | 199 +++++++++++++-----
 .../dataset/component/ParagraphDialog.vue     | 121 +++++++++++
 .../dataset/component/SegmentPreview.vue      |   2 +-
 ui/src/views/dataset/index.vue                |   2 +-
 ui/src/views/dataset/step/StepSecond.vue      |   2 +-
 12 files changed, 341 insertions(+), 65 deletions(-)
 create mode 100644 ui/src/views/dataset/component/ParagraphDialog.vue

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index a3ebca6f1..91d669d1d 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -184,6 +184,43 @@ const getParagraph: (dataset_id: string, document_id: string) => Promise<Result<
   return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph`)
 }
 
+/**
+ * 删除段落
+ * @param 参数 dataset_id, document_id, document_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, 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)
+}
+
 export default {
   getDateset,
   getAllDateset,
@@ -197,5 +234,7 @@ export default {
   putDocument,
   delDocument,
   getDocumentDetail,
-  getParagraph
+  getParagraph,
+  delParagraph,
+  putParagraph
 }
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 98e027215..34ead065e 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -67,9 +67,13 @@ function cardLeave() {
   .card-footer {
     position: absolute;
     bottom: 8px;
+    left: 0;
     min-height: 30px;
     color: var(--app-text-color-secondary);
     font-weight: 400;
+    padding: 0 16px;
+    width: 100%;
+    box-sizing: border-box;
   }
 }
 </style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 380df65f1..fbe03752a 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -19,7 +19,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  color: var(--app-text-color-primary);
+  color: var(--app-text-color);
 }
 
 #app {
@@ -135,7 +135,7 @@ h4 {
   margin-right: calc(var(--app-base-px) + 4px);
 }
 .mr-16 {
-  margin-right: calc(var(--app-base-px) * 3);
+  margin-right: calc(var(--app-base-px) * 2);
 }
 
 .p-8 {
@@ -212,6 +212,7 @@ h4 {
 // 内容部分 自适应高度
 .main-calc-height {
   height: var(--app-main-height);
+  box-sizing: border-box;
 }
 
 // 标题前带竖线样式
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index cffc38266..148972f77 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -3,7 +3,7 @@
   --el-color-primary-light-9: rgba(51, 112, 255, 0.1);
   --el-menu-item-height: 45px;
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
-  --el-border-color: rgba(31, 35, 41, 0.15);
+  --el-border-color: #DEE0E3;
 }
 
 .el-button {
@@ -13,7 +13,7 @@
     font-size: 16px;
     max-height: 24px;
     &:not(.is-disabled):hover {
-      background: var(--app-text-color-primary-light-1);
+      background: var(--app-text-color-light-1);
     }
   }
 }
@@ -48,7 +48,7 @@
 
 .el-message-box__content {
   padding: 24px 0;
-  color: var(--app-text-color-primary);
+  color: var(--app-text-color);
   font-weight: 400;
 }
 .el-message-box__btns {
@@ -62,6 +62,7 @@
   button.danger {
     background: var(--el-color-danger);
     border: var(--el-color-danger);
+    color: #ffffff;
   }
 }
 .el-message-box__headerbtn {
@@ -92,7 +93,7 @@
   --el-card-padding: calc(var(--app-base-px) * 2);
 }
 .el-dropdown {
-  color: var(--app-text-color-primary);
+  color: var(--app-text-color);
 }
 
 .el-tag {
@@ -100,7 +101,7 @@
 }
 .el-table {
   --el-table-header-bg-color: var(--app-layout-bg-color);
-  --el-table-text-color: var(--app-text-color-primary);
+  --el-table-text-color: var(--app-text-color);
   font-weight: 400;
   thead {
     color: var(--app-text-color-secondary);
@@ -165,3 +166,14 @@
 .el-slider__input {
   width: 60px;
 }
+
+.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);
+  }
+}
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 9c56d5a87..d07549c49 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -1,9 +1,10 @@
 :root {
   --app-base-px: 8px;
   --app-layout-bg-color: #f5f6f7;
-  --app-text-color-primary: #1f2329;
-  --app-text-color-primary-light-1: rgba(31, 35, 41, 0.1);
+  --app-text-color: #1f2329;
+  --app-text-color-light-1: rgba(31, 35, 41, 0.1);
   --app-text-color-secondary: #646a73;
+  --app-text-color-disable: #bbbfc4;
   --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
   --app-border-color-dark: #bbbfc4;
diff --git a/ui/src/views/404/index.vue b/ui/src/views/404/index.vue
index e3b48b273..66348be1a 100644
--- a/ui/src/views/404/index.vue
+++ b/ui/src/views/404/index.vue
@@ -31,7 +31,7 @@ const router = useRouter()
     }
 
     .message-container {
-        color: var(--app-text-color-primary);
+        color: var(--app-text-color);
 
         .title {
             font-size: 50px;
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index ef6ad1e43..d180429d4 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -167,7 +167,6 @@ function submit() {
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
-    box-sizing: border-box;
   }
   &__footer {
     padding: 16px 24px;
diff --git a/ui/src/views/dataset/DocumentDetail.vue b/ui/src/views/dataset/DocumentDetail.vue
index 01abfbd92..b00ea5383 100644
--- a/ui/src/views/dataset/DocumentDetail.vue
+++ b/ui/src/views/dataset/DocumentDetail.vue
@@ -1,61 +1,79 @@
 <template>
-  <LayoutContainer :header="documentDetail?.name" back-to="-1" class="dataset-detail">
+  <LayoutContainer :header="documentDetail?.name" back-to="-1" class="document-detail">
     <template #header>
-      <!-- <el-steps :active="active" finish-status="success" align-center class="create-dataset__steps">
-        <el-step v-for="(item, index) in steps" :key="index">
-          <template #icon>
-            <div class="app-step flex align-center">
-              <div class="el-step__icon is-text">
-                <div class="el-step__icon-inner">
-                  <el-icon v-if="active == index + 1" style="margin-top: 1px"><Select /></el-icon>
-                  <span v-else> {{ index + 1 }}</span>
-                </div>
-              </div>
-              <span class="ml-4">{{ item.name }}</span>
-            </div>
-          </template>
-        </el-step>
-      </el-steps> -->
+      <div class="document-detail__header">
+        <el-button @click="addParagraph" type="primary" :disabled="loading"> 添加分段 </el-button>
+      </div>
     </template>
-    <div class="dataset-detail__main main-calc-height p-24">
-      <el-row :gutter="15">
-        <el-col
-          :xs="24"
-          :sm="12"
-          :md="8"
-          :lg="6"
-          :xl="4"
-          v-for="(item, index) in paragraphDetail"
-          :key="index"
-          class="mt-8"
+    <div class="document-detail__main p-16">
+      <div class="flex-between p-8">
+        <span>{{ paragraphDetail.length }} 段落</span>
+        <el-input
+          v-model="search"
+          placeholder="搜索"
+          class="input-with-select"
+          style="width: 260px"
         >
-          <CardBox
-            shadow="hover"
-            :title="item.title"
-            :description="item.content"
-            class="cursor"
-            :showIcon="false"
-          >
-            <!-- <template #footer>
-              <div class="footer-content">
-                <span class="bold">{{ item?.document_count || 0 }}</span>
-                文档<el-divider direction="vertical" />
-                <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
-                字符<el-divider direction="vertical" />
-                <span class="bold">{{ item?.char_length || 0 }}</span>
-                关联应用
-              </div>
-            </template> -->
-          </CardBox>
-        </el-col>
-      </el-row>
+          <template #prepend>
+            <el-select v-model="searchType" placeholder="Select" style="width: 80px">
+              <el-option label="标题" value="title" />
+              <el-option label="内容" value="content" />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+      <el-scrollbar>
+        <div class="document-detail-height" v-loading="loading">
+          <el-row>
+            <el-col
+              :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              :xl="4"
+              v-for="(item, index) in paragraphDetail"
+              :key="index"
+              class="p-8"
+            >
+              <CardBox
+                shadow="hover"
+                :title="item.title"
+                :description="item.content"
+                class="document-card cursor"
+                :class="item.is_active ? '' : 'disabled'"
+                :showIcon="false"
+                @click="editParagraph(item)"
+              >
+                <div class="active-button">
+                  <el-switch v-model="item.is_active" @change="changeState($event, item)" />
+                </div>
+
+                <template #footer>
+                  <div class="footer-content flex-between">
+                    <span> {{ numberFormat(item?.content.length) || 0 }} 个 字符 </span>
+                    <el-tooltip effect="dark" content="删除" placement="top">
+                      <el-button text @click.stop="deleteParagraph(item)" class="delete-button">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </CardBox>
+            </el-col>
+          </el-row>
+        </div>
+      </el-scrollbar>
     </div>
+    <ParagraphDialog ref="ParagraphDialogRef" :title="title" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import datasetApi from '@/api/dataset'
+import ParagraphDialog from './component/ParagraphDialog.vue'
+import { numberFormat } from '@/utils/utils'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 
 const router = useRouter()
 const route = useRoute()
@@ -63,9 +81,57 @@ const {
   params: { datasetId, documentId }
 } = route as any
 
+const ParagraphDialogRef = ref()
 const loading = ref(false)
 const documentDetail = ref<any>({})
 const paragraphDetail = ref<any[]>([])
+const title = ref('')
+const search = ref('')
+const searchType = ref('title')
+
+function changeState(bool: Boolean, row: any) {
+  const obj = {
+    is_active: bool
+  }
+  loading.value = true
+  datasetApi
+    .putParagraph(datasetId, documentId, row.id, obj)
+    .then((res) => {
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function deleteParagraph(row: any) {
+  MsgConfirm(`是否删除段落：${row.title} ?`, `删除后无法恢复，请谨慎操作。`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  })
+    .then(() => {
+      loading.value = true
+      datasetApi
+        .delParagraph(datasetId, documentId, row.id)
+        .then(() => {
+          MsgSuccess('删除成功')
+          getParagraphDetail()
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    })
+    .catch(() => {})
+}
+
+function addParagraph() {
+  title.value = '添加分段'
+  ParagraphDialogRef.value.open()
+}
+function editParagraph(row: any) { 
+  title.value = '分段详情'
+  ParagraphDialogRef.value.open(row)
+}
 
 function getDetail() {
   loading.value = true
@@ -99,9 +165,42 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-.dataset-detail {
-  &__main{
-    box-sizing: border-box;
+.document-detail {
+  &__header {
+    position: absolute;
+    right: calc(var(--app-base-px) * 3);
+  }
+
+  .document-detail-height {
+    height: calc(var(--app-main-height) - 75px);
+  }
+  .document-card {
+    height: 210px;
+    background: var(--app-layout-bg-color);
+    border: 1px solid var(--app-layout-bg-color);
+    &:hover {
+      background: #ffffff;
+      border: 1px solid var(--el-border-color);
+    }
+    &.disabled {
+      background: var(--app-layout-bg-color);
+      border: 1px solid var(--app-layout-bg-color);
+      :deep(.description) {
+        color: var(--app-border-color-dark);
+      }
+      :deep(.title) {
+        color: var(--app-border-color-dark);
+      }
+    }
+    :deep(.description) {
+      -webkit-line-clamp: 5 !important;
+      height: 110px;
+    }
+    .active-button {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+    }
   }
 }
 </style>
diff --git a/ui/src/views/dataset/component/ParagraphDialog.vue b/ui/src/views/dataset/component/ParagraphDialog.vue
new file mode 100644
index 000000000..70c1b4da1
--- /dev/null
+++ b/ui/src/views/dataset/component/ParagraphDialog.vue
@@ -0,0 +1,121 @@
+<template>
+  <el-dialog :title="title" v-model="dialogVisible" width="800" class="paragraph-dialog">
+    <el-row>
+      <el-col :span="16" class="p-24">
+        <div class="flex-between mb-16">
+          <div class="bold title align-center">分段内容</div>
+          <el-button text>
+            <el-icon><EditPen /></el-icon>
+          </el-button>
+        </div>
+
+        <el-form
+          ref="segmentFormRef"
+          :model="segmentForm"
+          label-position="top"
+          :rules="rules"
+          @submit.prevent
+        >
+          <el-form-item label="分段标题">
+            <el-input v-model="segmentForm.title" placeholder="请输入分段标题"> </el-input>
+          </el-form-item>
+          <el-form-item label="分段内容" prop="content">
+            <el-input
+              v-model="segmentForm.content"
+              placeholder="请输入分段内容"
+              maxlength="500"
+              show-word-limit
+              :rows="8"
+              type="textarea"
+            >
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <div class="text-right">
+          <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+          <el-button type="primary" @click="submitHandle(segmentFormRef)"> 保存 </el-button>
+        </div>
+      </el-col>
+      <el-col :span="8" class="border-l p-24">
+        <p class="bold title mb-16">
+          关联问题 <el-divider direction="vertical" />
+          <el-button text>
+            <el-icon><Plus /></el-icon>
+          </el-button>
+        </p>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const props = defineProps({
+  title: String
+})
+
+const emit = defineEmits(['updateContent'])
+
+const segmentFormRef = ref<FormInstance>()
+
+const dialogVisible = ref<boolean>(false)
+
+const segmentForm = ref({
+  title: '',
+  content: ''
+})
+
+const rules = ref<FormRules>({
+  content: [{ required: true, message: '请输入分段内容', trigger: 'blur' }]
+})
+
+const isEdit = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    segmentForm.value = {
+      title: '',
+      content: ''
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (data: any) => {
+  if (data) {
+    segmentForm.value.title = data.title
+    segmentForm.value.content = data.content
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      emit('updateContent', segmentForm.value)
+      dialogVisible.value = false
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.paragraph-dialog {
+  .el-dialog__header {
+    padding-bottom: 16px;
+  }
+  .el-dialog__body {
+    border-top: 1px solid var(--el-border-color);
+    padding: 0 !important;
+  }
+  .title {
+    color: var(--app-text-color);
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/SegmentPreview.vue
index 8c6409ee6..1ae83db7d 100644
--- a/ui/src/views/dataset/component/SegmentPreview.vue
+++ b/ui/src/views/dataset/component/SegmentPreview.vue
@@ -110,7 +110,7 @@ onMounted(() => {})
 <style scoped lang="scss">
 .segment-tabs {
   :deep(.el-tabs__item) {
-    background: var(--app-text-color-primary-light-1);
+    background: var(--app-text-color-light-1);
     margin: 4px;
     border-radius: 4px;
     padding: 5px 10px 5px 8px !important;
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index d45dfcb45..c81304b8f 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -135,7 +135,7 @@ onMounted(() => {
   }
   .footer-content {
     .bold {
-      color: var(--app-text-color-primary);
+      color: var(--app-text-color);
     }
   }
 }
diff --git a/ui/src/views/dataset/step/StepSecond.vue b/ui/src/views/dataset/step/StepSecond.vue
index 075478121..bb893e046 100644
--- a/ui/src/views/dataset/step/StepSecond.vue
+++ b/ui/src/views/dataset/step/StepSecond.vue
@@ -158,7 +158,7 @@ defineExpose({
       height: 100%;
       padding: calc(var(--app-base-px) * 2);
       line-height: 22px;
-      color: var(--app-text-color-primary);
+      color: var(--app-text-color);
     }
     :deep(.el-radio__label) {
       padding-left: 32px;

From 48257eacffceb33c254b911600fb58b48b6ebe0f Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 14 Nov 2023 18:12:55 +0800
Subject: [PATCH 15/18] =?UTF-8?q?=E5=88=86=E6=AE=B5=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         |  27 +++-
 ui/src/components/app-table/index.vue         |   1 +
 ui/src/components/index.ts                    |   2 +
 ui/src/components/read-write/index.vue        |  14 +-
 ui/src/components/tag-ellipsis/index.vue      |  55 +++++++
 .../top-bar/avatar/ResetPasssword.vue         |   2 +-
 ui/src/router/modules/dataset.ts              |  10 +-
 ui/src/stores/index.ts                        |   4 +-
 ui/src/stores/modules/paragraph.ts            |  23 +++
 ui/src/styles/app.scss                        |   2 +
 ui/src/styles/element-plus.scss               |  22 +--
 ui/src/views/dataset/CreateDataset.vue        |   2 +-
 ui/src/views/dataset/component/BaseForm.vue   |   9 +-
 .../dataset/component/EditParagraphDialog.vue |  44 ++++++
 .../dataset/component/EditSegmentDialog.vue   |  80 ----------
 .../dataset/component/ParagraphDialog.vue     | 121 ---------------
 ...egmentPreview.vue => ParagraphPreview.vue} |  16 +-
 .../dataset/component/UploadComponent.vue     |   7 +-
 ui/src/views/dataset/index.vue                |   1 +
 ui/src/views/dataset/step/StepSecond.vue      |  23 ++-
 .../{dataset => document}/DatasetSetting.vue  |   0
 .../index.vue}                                |   0
 ui/src/views/login/forgot-password/index.vue  |   2 +-
 ui/src/views/login/register/index.vue         |   2 +-
 .../paragraph/component/ParagraphDialog.vue   | 145 ++++++++++++++++++
 .../paragraph/component/ParagraphForm.vue     |  75 +++++++++
 .../index.vue}                                |  20 ++-
 27 files changed, 454 insertions(+), 255 deletions(-)
 create mode 100644 ui/src/components/tag-ellipsis/index.vue
 create mode 100644 ui/src/stores/modules/paragraph.ts
 create mode 100644 ui/src/views/dataset/component/EditParagraphDialog.vue
 delete mode 100644 ui/src/views/dataset/component/EditSegmentDialog.vue
 delete mode 100644 ui/src/views/dataset/component/ParagraphDialog.vue
 rename ui/src/views/dataset/component/{SegmentPreview.vue => ParagraphPreview.vue} (90%)
 rename ui/src/views/{dataset => document}/DatasetSetting.vue (100%)
 rename ui/src/views/{dataset/DatasetDocument.vue => document/index.vue} (100%)
 create mode 100644 ui/src/views/paragraph/component/ParagraphDialog.vue
 create mode 100644 ui/src/views/paragraph/component/ParagraphForm.vue
 rename ui/src/views/{dataset/DocumentDetail.vue => paragraph/index.vue} (93%)

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 91d669d1d..10a19fbbc 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -196,6 +196,30 @@ const delParagraph: (
   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 参数 
@@ -236,5 +260,6 @@ export default {
   getDocumentDetail,
   getParagraph,
   delParagraph,
-  putParagraph
+  putParagraph,
+  postParagraph
 }
diff --git a/ui/src/components/app-table/index.vue b/ui/src/components/app-table/index.vue
index 14dafc87c..6a4506ce5 100644
--- a/ui/src/components/app-table/index.vue
+++ b/ui/src/components/app-table/index.vue
@@ -8,6 +8,7 @@
             v-model="inputValue"
             placeholder="请输入文档名称"
             class="w-240 mr-12"
+            autofocus
           />
 
           <el-button type="primary" @click="submitHandle" :disabled="loading">创建</el-button>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index e3ac6770a..0173c4248 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -10,6 +10,7 @@ import CardAdd from './card-add/index.vue'
 import BackButton from './back-button/index.vue'
 import AppTable from './app-table/index.vue'
 import ReadWrite from './read-write/index.vue'
+import TagEllipsis from './tag-ellipsis/index.vue'
 
 export default {
   install(app: App) {
@@ -24,5 +25,6 @@ export default {
     app.component(BackButton.name, BackButton)
     app.component(AppTable.name, AppTable)
     app.component(ReadWrite.name, ReadWrite)
+    app.component(TagEllipsis.name, TagEllipsis)
   }
 }
diff --git a/ui/src/components/read-write/index.vue b/ui/src/components/read-write/index.vue
index 93719dcb4..71762873a 100644
--- a/ui/src/components/read-write/index.vue
+++ b/ui/src/components/read-write/index.vue
@@ -10,7 +10,10 @@
     </slot>
     <slot>
       <div class="flex align-center" v-if="isEdit">
-        <el-input ref="inputRef" v-model="writeValue" placeholder="请输入"></el-input>
+        <div @click.stop>
+          <el-input ref="inputRef" v-model="writeValue" placeholder="请输入" autofocus></el-input>
+        </div>
+
         <span class="ml-4">
           <el-button type="primary" text @click.stop="submit" :disabled="loading">
             <el-icon><Select /></el-icon>
@@ -26,7 +29,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, nextTick } from 'vue'
 defineOptions({ name: 'ReadWrite' })
 const props = defineProps({
   data: {
@@ -39,6 +42,7 @@ const props = defineProps({
   }
 })
 const emit = defineEmits(['change'])
+const inputRef = ref()
 const isEdit = ref(false)
 const writeValue = ref('')
 const loading = ref(false)
@@ -61,5 +65,11 @@ function editNameHandle(row: any) {
   writeValue.value = props.data
   isEdit.value = true
 }
+
+onMounted(() => {
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+})
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/components/tag-ellipsis/index.vue b/ui/src/components/tag-ellipsis/index.vue
new file mode 100644
index 000000000..098774af9
--- /dev/null
+++ b/ui/src/components/tag-ellipsis/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-tag class="tag-ellipsis flex-between mb-8" effect="plain" v-bind="$attrs">
+    <el-tooltip
+      :disabled="!isShowTooltip"
+      effect="dark"
+      :content="tooltipContent"
+      placement="bottom"
+    >
+      <div ref="tagLabel">
+        <slot></slot>
+      </div>
+    </el-tooltip>
+  </el-tag>
+</template>
+<script setup lang="ts">
+import { ref, computed, useSlots } from 'vue'
+defineOptions({ name: 'TagEllipsis' })
+const slots = useSlots()
+const tooltipContent = slots.default()?.[0].children || ''
+const tagLabel = ref()
+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-ellipsis {
+  border: 1px solid var(--el-border-color);
+  color: var(--app-text-color);
+  border-radius: 4px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 9px;
+  box-sizing: border-box;
+
+  :deep(.el-tag__content) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  :deep(.el-tooltip__trigger) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>
diff --git a/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue b/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
index 7e717bdee..9cd99decb 100644
--- a/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
+++ b/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
@@ -59,7 +59,7 @@
           </el-input>
           <el-button
             size="large"
-            class="send-email-button ml-10"
+            class="send-email-button ml-16"
             @click="sendEmail"
             :loading="loading"
             >获取验证码</el-button
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index b3aa75e31..af8232547 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -26,7 +26,7 @@ const datasetRouter = {
       children: [
         {
           path: 'document',
-          name: 'DatasetDocument',
+          name: 'Document',
           meta: {
             icon: 'Document',
             title: '文档',
@@ -34,7 +34,7 @@ const datasetRouter = {
             parentPath: '/dataset/:datasetId',
             parentName: 'DatasetDetail'
           },
-          component: () => import('@/views/dataset/DatasetDocument.vue')
+          component: () => import('@/views/document/index.vue')
         },
         {
           path: 'setting',
@@ -46,15 +46,15 @@ const datasetRouter = {
             parentPath: '/dataset/:datasetId',
             parentName: 'DatasetDetail'
           },
-          component: () => import('@/views/dataset/DatasetSetting.vue')
+          component: () => import('@/views/document/DatasetSetting.vue')
         }
       ]
     },
     {
       path: '/dataset/:datasetId/:documentId', // 分段详情
-      name: 'DocumentDetail',
+      name: 'Paragraph',
       meta: { activeMenu: '/dataset' },
-      component: () => import('@/views/dataset/DocumentDetail.vue'),
+      component: () => import('@/views/paragraph/index.vue'),
       hidden: true
     }
   ]
diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
index 4ce567603..0c33fe59f 100644
--- a/ui/src/stores/index.ts
+++ b/ui/src/stores/index.ts
@@ -3,10 +3,12 @@ const store = createPinia()
 export { store }
 import useUserStore from './modules/user'
 import useDatasetStore from './modules/dataset'
+import useParagraphStore from './modules/paragraph'
 
 const useStore = () => ({
   user: useUserStore(),
-  dataset: useDatasetStore()
+  dataset: useDatasetStore(),
+  paragraph:  useParagraphStore(),
 })
 
 export default useStore
diff --git a/ui/src/stores/modules/paragraph.ts b/ui/src/stores/modules/paragraph.ts
new file mode 100644
index 000000000..fddcac931
--- /dev/null
+++ b/ui/src/stores/modules/paragraph.ts
@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import datasetApi from '@/api/dataset'
+
+const useParagraphStore = defineStore({
+  id: 'paragraph',
+  state: () => ({}),
+  actions: {
+    async asyncPutParagraph(datasetId: string, documentId: string, paragraphId: string, data: any) {
+      return new Promise((resolve, reject) => {
+        datasetApi
+          .putParagraph(datasetId, documentId, paragraphId, data)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useParagraphStore
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index fbe03752a..07274de75 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -292,3 +292,5 @@ h4 {
 .primary {
   color: var(--el-color-primary);
 }
+
+
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 148972f77..08aea7672 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -3,7 +3,7 @@
   --el-color-primary-light-9: rgba(51, 112, 255, 0.1);
   --el-menu-item-height: 45px;
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
-  --el-border-color: #DEE0E3;
+  --el-border-color: #dee0e3;
 }
 
 .el-button {
@@ -74,17 +74,21 @@
 }
 
 @media only screen and (min-width: 1400px) {
-  .el-col-lg-6 {
-    display: block;
-    max-width: 20.8333333333%;
-    flex: 0 0 20.8333333333%;
+  .app-list-row {
+    .el-col-lg-6 {
+      display: block;
+      max-width: 20.8333333333%;
+      flex: 0 0 20.8333333333%;
+    }
   }
 }
 @media only screen and (min-width: 1920px) {
-  .el-col-xl-4 {
-    display: block;
-    max-width: 16.6666666667%;
-    flex: 0 0 16.6666666667%;
+  .app-list-row {
+    .el-col-xl-4 {
+      display: block;
+      max-width: 16.6666666667%;
+      flex: 0 0 16.6666666667%;
+    }
   }
 }
 
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index d180429d4..d502287ff 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -115,7 +115,7 @@ function clearStore() {
 function submit() {
   loading.value = true
   const documents = [] as any[]
-  StepSecondRef.value.segmentList.map((item: any) => {
+  StepSecondRef.value.paragraphList.map((item: any) => {
     documents.push({
       name: item.name,
       paragraphs: item.content
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index 3825aeb3b..91bbf94d0 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -22,7 +22,7 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, watch } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
 import useStore from '@/stores'
 
 const props = defineProps({
@@ -73,7 +73,12 @@ onMounted(() => {
     form.value = baseInfo.value
   }
 })
-
+onUnmounted(() => {
+  form.value = {
+    name: '',
+    desc: ''
+  }
+})
 defineExpose({
   validate,
   form
diff --git a/ui/src/views/dataset/component/EditParagraphDialog.vue b/ui/src/views/dataset/component/EditParagraphDialog.vue
new file mode 100644
index 000000000..ca9d1d6f0
--- /dev/null
+++ b/ui/src/views/dataset/component/EditParagraphDialog.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-dialog title="编辑分段" v-model="dialogVisible" width="600">
+    <ParagraphForm ref="paragraphFormRef" :data="detail" />
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { cloneDeep } from 'lodash'
+import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
+
+const emit = defineEmits(['updateContent'])
+
+const dialogVisible = ref<boolean>(false)
+
+const detail = ref({})
+
+const paragraphFormRef = ref()
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = {}
+  }
+})
+
+const open = (data: any) => {
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+const submitHandle = async () => {
+  if (await paragraphFormRef.value?.validate()) {
+    emit('updateContent', paragraphFormRef.value?.form)
+    dialogVisible.value = false
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/ui/src/views/dataset/component/EditSegmentDialog.vue b/ui/src/views/dataset/component/EditSegmentDialog.vue
deleted file mode 100644
index c198fe5f0..000000000
--- a/ui/src/views/dataset/component/EditSegmentDialog.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <el-dialog title="编辑分段" v-model="dialogVisible" width="600">
-    <el-form
-      ref="segmentFormRef"
-      :model="segmentForm"
-      label-position="top"
-      :rules="rules"
-      @submit.prevent
-    >
-      <el-form-item label="分段标题">
-        <el-input v-model="segmentForm.title" placeholder="请输入分段标题"> </el-input>
-      </el-form-item>
-      <el-form-item label="分段内容" prop="content">
-        <el-input
-          v-model="segmentForm.content"
-          placeholder="请输入分段内容"
-          maxlength="500"
-          show-word-limit
-          :autosize="{ minRows: 3, maxRow: 8 }"
-          type="textarea"
-        >
-        </el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
-        <el-button type="primary" @click="submitHandle(segmentFormRef)"> 保存 </el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import { cloneDeep } from 'lodash';
-
-const emit = defineEmits(['updateContent'])
-
-const dialogVisible = ref<boolean>(false)
-
-const segmentForm = ref({
-  title: '',
-  content: ''
-})
-
-const segmentFormRef = ref<FormInstance>()
-
-const rules = ref<FormRules>({
-  content: [{ required: true, message: '请输入分段内容', trigger: 'blur' }]
-})
-
-watch(dialogVisible, (bool) => {
-  if (!bool) {
-    segmentForm.value = {
-      title: '',
-      content: ''
-    }
-  }
-})
-
-const open = (data: any) => {
-  segmentForm.value = cloneDeep(data)
-  dialogVisible.value = true
-}
-const submitHandle = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      emit('updateContent', segmentForm.value)
-      dialogVisible.value = false
-    } else {
-      console.log('error submit!')
-    }
-  })
-}
-
-defineExpose({ open })
-</script>
-<style lang="scss" scope></style>
diff --git a/ui/src/views/dataset/component/ParagraphDialog.vue b/ui/src/views/dataset/component/ParagraphDialog.vue
deleted file mode 100644
index 70c1b4da1..000000000
--- a/ui/src/views/dataset/component/ParagraphDialog.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <el-dialog :title="title" v-model="dialogVisible" width="800" class="paragraph-dialog">
-    <el-row>
-      <el-col :span="16" class="p-24">
-        <div class="flex-between mb-16">
-          <div class="bold title align-center">分段内容</div>
-          <el-button text>
-            <el-icon><EditPen /></el-icon>
-          </el-button>
-        </div>
-
-        <el-form
-          ref="segmentFormRef"
-          :model="segmentForm"
-          label-position="top"
-          :rules="rules"
-          @submit.prevent
-        >
-          <el-form-item label="分段标题">
-            <el-input v-model="segmentForm.title" placeholder="请输入分段标题"> </el-input>
-          </el-form-item>
-          <el-form-item label="分段内容" prop="content">
-            <el-input
-              v-model="segmentForm.content"
-              placeholder="请输入分段内容"
-              maxlength="500"
-              show-word-limit
-              :rows="8"
-              type="textarea"
-            >
-            </el-input>
-          </el-form-item>
-        </el-form>
-        <div class="text-right">
-          <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
-          <el-button type="primary" @click="submitHandle(segmentFormRef)"> 保存 </el-button>
-        </div>
-      </el-col>
-      <el-col :span="8" class="border-l p-24">
-        <p class="bold title mb-16">
-          关联问题 <el-divider direction="vertical" />
-          <el-button text>
-            <el-icon><Plus /></el-icon>
-          </el-button>
-        </p>
-      </el-col>
-    </el-row>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import { cloneDeep } from 'lodash'
-
-const props = defineProps({
-  title: String
-})
-
-const emit = defineEmits(['updateContent'])
-
-const segmentFormRef = ref<FormInstance>()
-
-const dialogVisible = ref<boolean>(false)
-
-const segmentForm = ref({
-  title: '',
-  content: ''
-})
-
-const rules = ref<FormRules>({
-  content: [{ required: true, message: '请输入分段内容', trigger: 'blur' }]
-})
-
-const isEdit = ref(false)
-
-watch(dialogVisible, (bool) => {
-  if (!bool) {
-    segmentForm.value = {
-      title: '',
-      content: ''
-    }
-    isEdit.value = false
-  }
-})
-
-const open = (data: any) => {
-  if (data) {
-    segmentForm.value.title = data.title
-    segmentForm.value.content = data.content
-    isEdit.value = true
-  }
-  dialogVisible.value = true
-}
-const submitHandle = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      emit('updateContent', segmentForm.value)
-      dialogVisible.value = false
-    } else {
-      console.log('error submit!')
-    }
-  })
-}
-
-defineExpose({ open })
-</script>
-<style lang="scss" scope>
-.paragraph-dialog {
-  .el-dialog__header {
-    padding-bottom: 16px;
-  }
-  .el-dialog__body {
-    border-top: 1px solid var(--el-border-color);
-    padding: 0 !important;
-  }
-  .title {
-    color: var(--app-text-color);
-  }
-}
-</style>
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/ParagraphPreview.vue
similarity index 90%
rename from ui/src/views/dataset/component/SegmentPreview.vue
rename to ui/src/views/dataset/component/ParagraphPreview.vue
index 1ae83db7d..a60c40303 100644
--- a/ui/src/views/dataset/component/SegmentPreview.vue
+++ b/ui/src/views/dataset/component/ParagraphPreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-tabs v-model="activeName" class="segment-tabs" @tab-click="handleClick">
+  <el-tabs v-model="activeName" class="paragraph-tabs" @tab-click="handleClick">
     <template v-for="(item, index) in newData" :key="index">
       <el-tab-pane :label="item.name" :name="index">
         <template #label>
@@ -9,7 +9,7 @@
           </div>
         </template>
         <el-scrollbar>
-          <div class="segment-list">
+          <div class="paragraph-list">
             <el-card
               v-for="(child, cIndex) in item.content"
               :key="cIndex"
@@ -41,12 +41,12 @@
       </el-tab-pane>
     </template>
   </el-tabs>
-  <EditSegmentDialog ref="EditSegmentDialogRef" @updateContent="updateContent" />
+  <EditParagraphDialog ref="EditParagraphDialogRef" @updateContent="updateContent" />
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
-import EditSegmentDialog from './EditSegmentDialog.vue'
+import EditParagraphDialog from './EditParagraphDialog.vue'
 import { filesize, getImgUrl } from '@/utils/utils'
 import { MsgConfirm } from '@/utils/message'
 
@@ -59,7 +59,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:data'])
 
-const EditSegmentDialogRef = ref()
+const EditParagraphDialogRef = ref()
 
 const activeName = ref(0)
 const currentPIndex = ref(null) as any
@@ -81,7 +81,7 @@ watch(
 function editHandle(item: any, index: number, cIndex: number) {
   currentPIndex.value = index
   currentCIndex.value = cIndex
-  EditSegmentDialogRef.value.open(item)
+  EditParagraphDialogRef.value.open(item)
 }
 
 function deleteHandle(item: any, index: number, cIndex: number) {
@@ -108,7 +108,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 onMounted(() => {})
 </script>
 <style scoped lang="scss">
-.segment-tabs {
+.paragraph-tabs {
   :deep(.el-tabs__item) {
     background: var(--app-text-color-light-1);
     margin: 4px;
@@ -134,7 +134,7 @@ onMounted(() => {})
     display: none;
   }
 }
-.segment-list {
+.paragraph-list {
   height: calc(var(--create-dataset-height) - 125px);
 }
 </style>
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index e075d9e6f..9b2e844a4 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -48,7 +48,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onUnmounted, onMounted, computed } from 'vue'
 import type { UploadProps } from 'element-plus'
 import { filesize, getImgUrl } from '@/utils/utils'
 import { MsgError } from '@/utils/message'
@@ -92,6 +92,11 @@ onMounted(() => {
     form.value.fileList = documentsFiles.value
   }
 })
+onUnmounted(() => {
+  form.value = {
+    fileList: []
+  }
+})
 
 defineExpose({
   validate,
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index c81304b8f..d3e5d4673 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -15,6 +15,7 @@
         :gutter="15"
         v-infinite-scroll="loadDataset"
         :infinite-scroll-disabled="disabledScroll"
+        class="app-list-row"
       >
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
           <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
diff --git a/ui/src/views/dataset/step/StepSecond.vue b/ui/src/views/dataset/step/StepSecond.vue
index bb893e046..9a3426160 100644
--- a/ui/src/views/dataset/step/StepSecond.vue
+++ b/ui/src/views/dataset/step/StepSecond.vue
@@ -21,16 +21,13 @@
                       <div class="form-item mb-16">
                         <div class="title flex align-center mb-8">
                           <span style="margin-right: 4px">分段标识</span>
-                          <el-popover
-                            placement="right"
-                            :width="400"
-                            trigger="hover"
+                          <el-tooltip
+                            effect="dark"
                             content="按照所选符号先后顺序做递归分割，分割结果超出分段长度将截取至分段长度。"
+                            placement="right"
                           >
-                            <template #reference>
-                              <el-icon style="font-size: 16px"><Warning /></el-icon>
-                            </template>
-                          </el-popover>
+                            <el-icon style="font-size: 16px"><Warning /></el-icon>
+                          </el-tooltip>
                         </div>
 
                         <el-select v-model="form.patterns" multiple placeholder="请选择">
@@ -76,7 +73,7 @@
       <el-col :span="12" class="p-24 border-l">
         <div v-loading="loading">
           <h4 class="title-decoration-1 mb-8">分段预览</h4>
-          <SegmentPreview v-model:data="segmentList" />
+          <ParagraphPreview v-model:data="paragraphList" />
         </div>
       </el-col>
     </el-row>
@@ -84,7 +81,7 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, reactive } from 'vue'
-import SegmentPreview from '@/views/dataset/component/SegmentPreview.vue'
+import ParagraphPreview from '@/views/dataset/component/ParagraphPreview.vue'
 import DatasetApi from '@/api/dataset'
 import useStore from '@/stores'
 const { dataset } = useStore()
@@ -98,7 +95,7 @@ const marks = reactive({
 
 const radio = ref('1')
 const loading = ref(false)
-const segmentList = ref<any[]>([])
+const paragraphList = ref<any[]>([])
 
 const form = reactive<any>({
   patterns: [] as any,
@@ -123,7 +120,7 @@ function splitDocument() {
   }
   DatasetApi.postSplitDocument(fd)
     .then((res: any) => {
-      segmentList.value = res.data
+      paragraphList.value = res.data
       loading.value = false
     })
     .catch(() => {
@@ -136,7 +133,7 @@ onMounted(() => {
 })
 
 defineExpose({
-  segmentList
+  paragraphList
 })
 </script>
 <style scoped lang="scss">
diff --git a/ui/src/views/dataset/DatasetSetting.vue b/ui/src/views/document/DatasetSetting.vue
similarity index 100%
rename from ui/src/views/dataset/DatasetSetting.vue
rename to ui/src/views/document/DatasetSetting.vue
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/document/index.vue
similarity index 100%
rename from ui/src/views/dataset/DatasetDocument.vue
rename to ui/src/views/document/index.vue
diff --git a/ui/src/views/login/forgot-password/index.vue b/ui/src/views/login/forgot-password/index.vue
index 5e1ac546f..e2c608d62 100644
--- a/ui/src/views/login/forgot-password/index.vue
+++ b/ui/src/views/login/forgot-password/index.vue
@@ -34,7 +34,7 @@
             </el-input>
             <el-button
               size="large"
-              class="send-email-button ml-10"
+              class="send-email-button ml-16"
               @click="sendEmail"
               :loading="loading"
               >获取验证码</el-button
diff --git a/ui/src/views/login/register/index.vue b/ui/src/views/login/register/index.vue
index 2f1e8ed0a..dd4fff74a 100644
--- a/ui/src/views/login/register/index.vue
+++ b/ui/src/views/login/register/index.vue
@@ -69,7 +69,7 @@
             </el-input>
             <el-button
               size="large"
-              class="send-email-button ml-10"
+              class="send-email-button ml-16"
               @click="sendEmail"
               :loading="sendEmailLoading"
               >获取验证码</el-button
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
new file mode 100644
index 000000000..f25f98bec
--- /dev/null
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -0,0 +1,145 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    width="800"
+    class="paragraph-dialog"
+    destroy-on-close
+  >
+    <el-row>
+      <el-col :span="16" class="p-24">
+        <div class="flex-between mb-16">
+          <div class="bold title align-center">分段内容</div>
+          <el-button text v-if="pId">
+            <el-icon><EditPen /></el-icon>
+          </el-button>
+        </div>
+
+        <ParagraphForm ref="paragraphFormRef" :data="detail" />
+        <div class="text-right">
+          <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+          <el-button type="primary" :disabled="loading" @click="submitHandle"> 保存 </el-button>
+        </div>
+      </el-col>
+      <el-col :span="8" class="border-l p-24">
+        <p class="bold title mb-16">
+          关联问题 <el-divider direction="vertical" />
+          <el-button text>
+            <el-icon><Plus /></el-icon>
+          </el-button>
+        </p>
+        <el-input
+          v-model="questionValue"
+          @change="addQuestion"
+          placeholder="请输入问题，回车保存"
+          class="mb-8"
+        />
+        <template v-for="(item, index) in questionList" :key="index">
+          <TagEllipsis class="question-tag" type="info" effect="plain" closable>
+            {{ item.content }}
+          </TagEllipsis>
+        </template>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
+import datasetApi from '@/api/dataset'
+import useStore from '@/stores'
+
+const props = defineProps({
+  title: String
+})
+
+const { paragraph } = useStore()
+
+const route = useRoute()
+const {
+  params: { datasetId, documentId }
+} = route as any
+
+const emit = defineEmits(['refresh'])
+
+const paragraphFormRef = ref<FormInstance>()
+
+const dialogVisible = ref<boolean>(false)
+
+const loading = ref(false)
+const pId = ref('')
+const detail = ref<any>({})
+const isEdit = ref(false)
+
+const questionValue = ref('')
+const questionList = ref<any[]>([])
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    pId.value = ''
+    detail.value = {}
+    isEdit.value = false
+  }
+})
+
+function addQuestion() {}
+
+const open = (data: any) => {
+  if (data) {
+    detail.value.title = data.title
+    detail.value.content = data.content
+    pId.value = data.id
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+const submitHandle = async () => {
+  if (await paragraphFormRef.value?.validate()) {
+    loading.value = true
+    if (id) {
+      paragraph
+        .asyncPutParagraph(datasetId, documentId, pId, paragraphFormRef.value?.form)
+        .then((res) => {
+          emit('refresh')
+          loading.value = false
+          dialogVisible.value = false
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    } else {
+      datasetApi
+        .postParagraph(datasetId, documentId, paragraphFormRef.value?.form)
+        .then((res) => {
+          emit('refresh')
+          loading.value = false
+          dialogVisible.value = false
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    }
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.paragraph-dialog {
+  .el-dialog__header {
+    padding-bottom: 16px;
+  }
+  .el-dialog__body {
+    border-top: 1px solid var(--el-border-color);
+    padding: 0 !important;
+  }
+  .title {
+    color: var(--app-text-color);
+  }
+  .question-tag {
+    width: 217px;
+  }
+}
+</style>
diff --git a/ui/src/views/paragraph/component/ParagraphForm.vue b/ui/src/views/paragraph/component/ParagraphForm.vue
new file mode 100644
index 000000000..e940b4b82
--- /dev/null
+++ b/ui/src/views/paragraph/component/ParagraphForm.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-form ref="paragraphFormRef" :model="form" label-position="top" :rules="rules" @submit.prevent>
+    <el-form-item label="分段标题">
+      <el-input v-model="form.title" placeholder="请输入分段标题"> </el-input>
+    </el-form-item>
+    <el-form-item label="分段内容" prop="content">
+      <el-input
+        v-model="form.content"
+        placeholder="请输入分段内容"
+        maxlength="1024"
+        show-word-limit
+        :rows="8"
+        type="textarea"
+      >
+      </el-input>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onUnmounted, watch } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const form = ref<any>({
+  title: '',
+  content: ''
+})
+
+const rules = reactive<FormRules>({
+  content: [{ required: true, message: '请输入分段内容', trigger: 'blur' }]
+})
+
+const paragraphFormRef = ref<FormInstance>()
+
+watch(
+  () => props.data,
+  (value) => {
+    if (value && JSON.stringify(value) !== '{}') {
+      form.value.title = value.title
+      form.value.content = value.content
+    }
+  },
+  {
+    // 初始化立即执行
+    immediate: true
+  }
+)
+
+// 表单校验
+function validate() {
+  if (!paragraphFormRef.value) return
+  return paragraphFormRef.value.validate((valid: any) => {
+    return valid
+  })
+}
+
+onUnmounted(() => {
+  form.value = {
+    title: '',
+    content: ''
+  }
+})
+
+defineExpose({
+  validate,
+  form
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/ui/src/views/dataset/DocumentDetail.vue b/ui/src/views/paragraph/index.vue
similarity index 93%
rename from ui/src/views/dataset/DocumentDetail.vue
rename to ui/src/views/paragraph/index.vue
index b00ea5383..39dfeb4d1 100644
--- a/ui/src/views/dataset/DocumentDetail.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -64,18 +64,18 @@
         </div>
       </el-scrollbar>
     </div>
-    <ParagraphDialog ref="ParagraphDialogRef" :title="title" />
+    <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import datasetApi from '@/api/dataset'
 import ParagraphDialog from './component/ParagraphDialog.vue'
 import { numberFormat } from '@/utils/utils'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
-
-const router = useRouter()
+import useStore from '@/stores'
+const { paragraph } = useStore()
 const route = useRoute()
 const {
   params: { datasetId, documentId }
@@ -94,8 +94,8 @@ function changeState(bool: Boolean, row: any) {
     is_active: bool
   }
   loading.value = true
-  datasetApi
-    .putParagraph(datasetId, documentId, row.id, obj)
+  paragraph
+    .asyncPutParagraph(datasetId, documentId, row.id, obj)
     .then((res) => {
       loading.value = false
     })
@@ -128,7 +128,7 @@ function addParagraph() {
   title.value = '添加分段'
   ParagraphDialogRef.value.open()
 }
-function editParagraph(row: any) { 
+function editParagraph(row: any) {
   title.value = '分段详情'
   ParagraphDialogRef.value.open(row)
 }
@@ -159,6 +159,10 @@ function getParagraphDetail() {
     })
 }
 
+function refresh() {
+  getParagraphDetail()
+}
+
 onMounted(() => {
   getDetail()
   getParagraphDetail()

From 8b23ce18d004548a2e1a00158f81b8ecb3d0c8f0 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 15 Nov 2023 14:27:25 +0800
Subject: [PATCH 16/18] =?UTF-8?q?feat:=20=E6=AE=B5=E8=90=BD=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/env.d.ts                                   |   4 +-
 ui/src/api/dataset.ts                         |  52 ++++++-
 .../paragraph/component/ParagraphDialog.vue   |  92 +++++------
 .../paragraph/component/ParagraphForm.vue     |   8 +-
 .../paragraph/component/ProblemComponent.vue  | 145 ++++++++++++++++++
 ui/src/views/paragraph/index.vue              |   4 +-
 6 files changed, 252 insertions(+), 53 deletions(-)
 create mode 100644 ui/src/views/paragraph/component/ProblemComponent.vue

diff --git a/ui/env.d.ts b/ui/env.d.ts
index eafd0b249..b60e90374 100644
--- a/ui/env.d.ts
+++ b/ui/env.d.ts
@@ -1,4 +1,4 @@
 /// <reference types="vite/client" />
 interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
+  readonly env: ImportMetaEnv
+}
\ No newline at end of file
diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 10a19fbbc..845ddf6e6 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -186,7 +186,7 @@ const getParagraph: (dataset_id: string, document_id: string) => Promise<Result<
 
 /**
  * 删除段落
- * @param 参数 dataset_id, document_id, document_id
+ * @param 参数 dataset_id, document_id, paragraph_id
  */
 const delParagraph: (
   dataset_id: string,
@@ -245,6 +245,51 @@ const putParagraph: (
   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,
@@ -261,5 +306,8 @@ export default {
   getParagraph,
   delParagraph,
   putParagraph,
-  postParagraph
+  postParagraph,
+  getProblem,
+  postProblem,
+  delProblem
 }
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index f25f98bec..4f7bc34b4 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -6,48 +6,45 @@
     class="paragraph-dialog"
     destroy-on-close
   >
-    <el-row>
+    <el-row v-loading="loading">
       <el-col :span="16" class="p-24">
-        <div class="flex-between mb-16">
-          <div class="bold title align-center">分段内容</div>
-          <el-button text v-if="pId">
-            <el-icon><EditPen /></el-icon>
-          </el-button>
-        </div>
+        <el-scrollbar>
+          <div style="height: 350px">
+            <div class="flex-between mb-16">
+              <div class="bold title align-center">分段内容</div>
+              <el-button text @click="isEdit = true" v-if="problemId && !isEdit">
+                <el-icon><EditPen /></el-icon>
+              </el-button>
+            </div>
 
-        <ParagraphForm ref="paragraphFormRef" :data="detail" />
-        <div class="text-right">
-          <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
-          <el-button type="primary" :disabled="loading" @click="submitHandle"> 保存 </el-button>
-        </div>
+            <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="isEdit" />
+          </div>
+
+          <div class="text-right" v-if="problemId && isEdit">
+            <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+            <el-button type="primary" :disabled="loading" @click="submitHandle"> 保存 </el-button>
+          </div>
+        </el-scrollbar>
       </el-col>
       <el-col :span="8" class="border-l p-24">
-        <p class="bold title mb-16">
-          关联问题 <el-divider direction="vertical" />
-          <el-button text>
-            <el-icon><Plus /></el-icon>
-          </el-button>
-        </p>
-        <el-input
-          v-model="questionValue"
-          @change="addQuestion"
-          placeholder="请输入问题，回车保存"
-          class="mb-8"
-        />
-        <template v-for="(item, index) in questionList" :key="index">
-          <TagEllipsis class="question-tag" type="info" effect="plain" closable>
-            {{ item.content }}
-          </TagEllipsis>
-        </template>
+        <!-- 关联问题 -->
+        <ProblemComponent :problemId="problemId" ref="ProblemRef" />
       </el-col>
     </el-row>
+    <template #footer v-if="!problemId">
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle"> 提交 </el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import type { FormInstance, FormRules } from 'element-plus'
 import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
+import ProblemComponent from '@/views/paragraph/component/ProblemComponent.vue'
 import datasetApi from '@/api/dataset'
 import useStore from '@/stores'
 
@@ -64,33 +61,30 @@ const {
 
 const emit = defineEmits(['refresh'])
 
+const ProblemRef = ref()
 const paragraphFormRef = ref<FormInstance>()
 
 const dialogVisible = ref<boolean>(false)
 
 const loading = ref(false)
-const pId = ref('')
+const problemId = ref('')
 const detail = ref<any>({})
 const isEdit = ref(false)
 
-const questionValue = ref('')
-const questionList = ref<any[]>([])
-
 watch(dialogVisible, (bool) => {
   if (!bool) {
-    pId.value = ''
+    problemId.value = ''
     detail.value = {}
     isEdit.value = false
   }
 })
 
-function addQuestion() {}
-
 const open = (data: any) => {
   if (data) {
     detail.value.title = data.title
     detail.value.content = data.content
-    pId.value = data.id
+    problemId.value = data.id
+  } else {
     isEdit.value = true
   }
   dialogVisible.value = true
@@ -98,10 +92,10 @@ const open = (data: any) => {
 const submitHandle = async () => {
   if (await paragraphFormRef.value?.validate()) {
     loading.value = true
-    if (id) {
+    if (problemId.value) {
       paragraph
-        .asyncPutParagraph(datasetId, documentId, pId, paragraphFormRef.value?.form)
-        .then((res) => {
+        .asyncPutParagraph(datasetId, documentId, problemId.value, paragraphFormRef.value?.form)
+        .then(() => {
           emit('refresh')
           loading.value = false
           dialogVisible.value = false
@@ -110,8 +104,15 @@ const submitHandle = async () => {
           loading.value = false
         })
     } else {
+      const obj =
+        ProblemRef.value.problemList.length > 0
+          ? {
+              problem_list: ProblemRef.value.problemList,
+              ...paragraphFormRef.value?.form
+            }
+          : paragraphFormRef.value?.form
       datasetApi
-        .postParagraph(datasetId, documentId, paragraphFormRef.value?.form)
+        .postParagraph(datasetId, documentId, obj)
         .then((res) => {
           emit('refresh')
           loading.value = false
@@ -135,11 +136,12 @@ defineExpose({ open })
     border-top: 1px solid var(--el-border-color);
     padding: 0 !important;
   }
+  .el-dialog__footer {
+    padding-top: 16px;
+    border-top: 1px solid var(--el-border-color);
+  }
   .title {
     color: var(--app-text-color);
   }
-  .question-tag {
-    width: 217px;
-  }
 }
 </style>
diff --git a/ui/src/views/paragraph/component/ParagraphForm.vue b/ui/src/views/paragraph/component/ParagraphForm.vue
index e940b4b82..6b3b96fd5 100644
--- a/ui/src/views/paragraph/component/ParagraphForm.vue
+++ b/ui/src/views/paragraph/component/ParagraphForm.vue
@@ -1,10 +1,12 @@
 <template>
   <el-form ref="paragraphFormRef" :model="form" label-position="top" :rules="rules" @submit.prevent>
     <el-form-item label="分段标题">
-      <el-input v-model="form.title" placeholder="请输入分段标题"> </el-input>
+      <el-input v-if="isEdit" v-model="form.title" placeholder="请输入分段标题"> </el-input>
+      <span v-else>{{ form.title }}</span>
     </el-form-item>
     <el-form-item label="分段内容" prop="content">
       <el-input
+        v-if="isEdit"
         v-model="form.content"
         placeholder="请输入分段内容"
         maxlength="1024"
@@ -13,6 +15,7 @@
         type="textarea"
       >
       </el-input>
+      <span v-else>{{ form.content }}</span>
     </el-form-item>
   </el-form>
 </template>
@@ -24,7 +27,8 @@ const props = defineProps({
   data: {
     type: Object,
     default: () => {}
-  }
+  },
+  isEdit: Boolean
 })
 
 const form = ref<any>({
diff --git a/ui/src/views/paragraph/component/ProblemComponent.vue b/ui/src/views/paragraph/component/ProblemComponent.vue
new file mode 100644
index 000000000..76ec50262
--- /dev/null
+++ b/ui/src/views/paragraph/component/ProblemComponent.vue
@@ -0,0 +1,145 @@
+<template>
+  <p class="bold title mb-16">
+    关联问题 <el-divider direction="vertical" />
+    <el-button text @click="addProblem">
+      <el-icon><Plus /></el-icon>
+    </el-button>
+  </p>
+  <div v-loading="loading" style="height: 350px">
+    <el-scrollbar>
+      <el-input
+        ref="inputRef"
+        v-if="isAddProblem"
+        v-model="problemValue"
+        @change="addProblemHandle"
+        placeholder="请输入问题，回车保存"
+        class="mb-8"
+        autofocus
+      />
+
+      <template v-for="(item, index) in problemList" :key="index">
+        <TagEllipsis
+          @close="delProblemHandle(item, index)"
+          class="question-tag"
+          type="info"
+          effect="plain"
+          closable
+        >
+          {{ item.content }}
+        </TagEllipsis>
+      </template>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import datasetApi from '@/api/dataset'
+
+const props = defineProps({
+  problemId: String
+})
+
+const route = useRoute()
+const {
+  params: { datasetId, documentId }
+} = route as any
+
+const inputRef = ref()
+const loading = ref(false)
+const isAddProblem = ref(false)
+
+const problemValue = ref('')
+const problemList = ref<any[]>([])
+
+watch(
+  () => props.problemId,
+  (value) => {
+    if (value) {
+      getProblemList()
+    }
+  },
+  {
+    // 初始化立即执行
+    immediate: true
+  }
+)
+
+function delProblemHandle(item: any, index: number) {
+  loading.value = true
+  if (item.id) {
+    datasetApi
+      .delProblem(datasetId, documentId, props.problemId || '', item.id)
+      .then((res) => {
+        getProblemList()
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  } else {
+    problemList.value.splice(index, 1)
+    loading.value = false
+  }
+}
+
+function getProblemList() {
+  loading.value = true
+  datasetApi
+    .getProblem(datasetId, documentId, props.problemId || '')
+    .then((res) => {
+      problemList.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function addProblem() {
+  isAddProblem.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+function addProblemHandle(val: string) {
+  if (val) {
+    const obj = {
+      content: val
+    }
+    loading.value = true
+    if (props.problemId) {
+      datasetApi
+        .postProblem(datasetId, documentId, props.problemId, obj)
+        .then((res) => {
+          getProblemList()
+          problemValue.value = ''
+          isAddProblem.value = false
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    } else {
+      problemList.value.unshift(obj)
+      problemValue.value = ''
+      isAddProblem.value = false
+      loading.value = false
+    }
+  }
+}
+
+onMounted(() => {})
+onUnmounted(() => {
+  problemList.value = []
+  problemValue.value = ''
+  isAddProblem.value = false
+})
+
+defineExpose({
+  problemList
+})
+</script>
+<style scoped lang="scss">
+.question-tag {
+  width: 217px;
+}
+</style>
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 39dfeb4d1..699970e3c 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -5,7 +5,7 @@
         <el-button @click="addParagraph" type="primary" :disabled="loading"> 添加分段 </el-button>
       </div>
     </template>
-    <div class="document-detail__main p-16">
+    <div class="document-detail__main p-16" v-loading="loading">
       <div class="flex-between p-8">
         <span>{{ paragraphDetail.length }} 段落</span>
         <el-input
@@ -23,7 +23,7 @@
         </el-input>
       </div>
       <el-scrollbar>
-        <div class="document-detail-height" v-loading="loading">
+        <div class="document-detail-height">
           <el-row>
             <el-col
               :xs="24"

From cb318d3ee60bc11c2e254d3e15f0a042526e96d8 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 15 Nov 2023 17:42:31 +0800
Subject: [PATCH 17/18] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/common-list/index.vue       |  50 ++++++
 ui/src/components/index.ts                    |   2 +
 ui/src/router/modules/application.ts          |  66 +++++++-
 ui/src/router/modules/setting.ts              |  12 ++
 ui/src/styles/app.scss                        |   2 -
 ui/src/styles/variables.scss                  |   4 +-
 ui/src/views/app/index.vue                    |   8 -
 ui/src/views/application/AppOverview.vue      |   8 +
 ui/src/views/application/AppSetting.vue       |   8 +
 .../views/application/CreateApplication.vue   |   8 +
 ui/src/views/application/DialogLog.vue        |   8 +
 ui/src/views/application/index.vue            | 148 ++++++++++++++++++
 ui/src/views/setting/index.vue                |  82 ++++------
 ui/src/views/template/index.vue               |  44 ++++++
 14 files changed, 386 insertions(+), 64 deletions(-)
 create mode 100644 ui/src/components/common-list/index.vue
 delete mode 100644 ui/src/views/app/index.vue
 create mode 100644 ui/src/views/application/AppOverview.vue
 create mode 100644 ui/src/views/application/AppSetting.vue
 create mode 100644 ui/src/views/application/CreateApplication.vue
 create mode 100644 ui/src/views/application/DialogLog.vue
 create mode 100644 ui/src/views/application/index.vue
 create mode 100644 ui/src/views/template/index.vue

diff --git a/ui/src/components/common-list/index.vue b/ui/src/components/common-list/index.vue
new file mode 100644
index 000000000..a214a027a
--- /dev/null
+++ b/ui/src/components/common-list/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="common-list">
+    <el-scrollbar>
+      <ul v-if="data.length > 0">
+        <template v-for="(item, index) in data" :key="index">
+          <li
+            @click.prevent="clickHandle(item, index)"
+            :class="current === index ? 'active' : ''"
+            class="cursor"
+          >
+            <slot :row="item" :index="index"> </slot>
+          </li>
+        </template>
+      </ul>
+      <el-empty description="暂无数据" v-else />
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+defineOptions({ name: 'CommonList' })
+const props = defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const current = ref(0)
+
+function clickHandle(row: any, index: number) {
+  current.value = index
+  emit('click', row)
+}
+</script>
+<style lang="scss" scoped>
+// 通用 ui li样式
+.common-list {
+  li {
+    padding: 11px 16px;
+    &.active {
+      background: var(--el-color-primary-light-9);
+      border-radius: 4px;
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 0173c4248..1a35fe13a 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -11,6 +11,7 @@ import BackButton from './back-button/index.vue'
 import AppTable from './app-table/index.vue'
 import ReadWrite from './read-write/index.vue'
 import TagEllipsis from './tag-ellipsis/index.vue'
+import CommonList from './common-list/index.vue'
 
 export default {
   install(app: App) {
@@ -26,5 +27,6 @@ export default {
     app.component(AppTable.name, AppTable)
     app.component(ReadWrite.name, ReadWrite)
     app.component(TagEllipsis.name, TagEllipsis)
+    app.component(CommonList.name, CommonList)
   }
 }
diff --git a/ui/src/router/modules/application.ts b/ui/src/router/modules/application.ts
index 30b2844ae..da630133d 100644
--- a/ui/src/router/modules/application.ts
+++ b/ui/src/router/modules/application.ts
@@ -1,8 +1,68 @@
+import Layout from '@/layout/main-layout/index.vue'
 const applicationRouter = {
-  path: '/app',
-  name: 'app',
+  path: '/application',
+  name: 'application',
   meta: { icon: 'app-applicaiton', title: '应用', permission: 'APPLICATION:READ' },
-  component: () => import('@/views/app/index.vue')
+  redirect: '/application',
+  children: [
+    {
+      path: '/application',
+      name: 'application',
+      component: () => import('@/views/application/index.vue')
+    },
+    {
+      path: '/application/create', // create 
+      name: 'CreateApplication',
+      meta: { activeMenu: '/application' },
+      component: () => import('@/views/application/CreateApplication.vue'),
+      hidden: true
+    },
+    {
+      path: '/application/:appId',
+      name: 'ApplicationDetail',
+      meta: { title: '应用详情', activeMenu: '/application' },
+      component: Layout,
+      hidden: true,
+      children: [
+        {
+          path: 'overview',
+          name: 'AppOverview',
+          meta: {
+            icon: 'Document',
+            title: '概览',
+            active: 'overview',
+            parentPath: '/application/:appId',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application/AppOverview.vue')
+        },
+        {
+          path: 'setting', 
+          name: 'AppSetting',
+          meta: {
+            icon: 'Setting',
+            title: '设置',
+            active: 'setting',
+            parentPath: '/application/:appId',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application/AppSetting.vue')
+        },
+        {
+          path: 'dialog',
+          name: 'DialogLog',
+          meta: {
+            icon: 'Setting',
+            title: '对话日志',
+            active: 'dialog',
+            parentPath: '/application/:appId',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application/DialogLog.vue')
+        }
+      ]
+    },
+  ]
 }
 
 export default applicationRouter
diff --git a/ui/src/router/modules/setting.ts b/ui/src/router/modules/setting.ts
index 48124a9a3..ac1c26490 100644
--- a/ui/src/router/modules/setting.ts
+++ b/ui/src/router/modules/setting.ts
@@ -16,6 +16,18 @@ const settingRouter = {
         parentName: 'setting'
       },
       component: () => import('@/views/setting/index.vue')
+    },
+    {
+      path: '/template',
+      name: 'template',
+      meta: {
+        icon: 'app-team',
+        title: '模版管理',
+        activeMenu: '/setting',
+        parentPath: '/setting',
+        parentName: 'setting'
+      },
+      component: () => import('@/views/template/index.vue')
     }
   ]
 }
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 07274de75..fbe03752a 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -292,5 +292,3 @@ h4 {
 .primary {
   color: var(--el-color-primary);
 }
-
-
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index d07549c49..81869b6d8 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -29,8 +29,8 @@
   --card-min-height: 160px;
   --card-min-width: 220px;
 
-  /** team */
-  --team-manage-left-width: 280px;
+  /** setting */
+  --setting-left-width: 280px;
 
   /** dataset */
   --create-dataset-height: calc(
diff --git a/ui/src/views/app/index.vue b/ui/src/views/app/index.vue
deleted file mode 100644
index 18c16060e..000000000
--- a/ui/src/views/app/index.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template >
-    <div>
-        app
-    </div>
-</template>
-<script setup lang="ts">
-</script>
-<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/ui/src/views/application/AppOverview.vue b/ui/src/views/application/AppOverview.vue
new file mode 100644
index 000000000..77958af25
--- /dev/null
+++ b/ui/src/views/application/AppOverview.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+  概览
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/AppSetting.vue b/ui/src/views/application/AppSetting.vue
new file mode 100644
index 000000000..c0782e516
--- /dev/null
+++ b/ui/src/views/application/AppSetting.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+  设置
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/CreateApplication.vue b/ui/src/views/application/CreateApplication.vue
new file mode 100644
index 000000000..9e07d9608
--- /dev/null
+++ b/ui/src/views/application/CreateApplication.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+  创建应用
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/DialogLog.vue b/ui/src/views/application/DialogLog.vue
new file mode 100644
index 000000000..fc871dfdd
--- /dev/null
+++ b/ui/src/views/application/DialogLog.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+  对话日志
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
new file mode 100644
index 000000000..cf3b4bb81
--- /dev/null
+++ b/ui/src/views/application/index.vue
@@ -0,0 +1,148 @@
+<template>
+    <div class="application-list-container p-24">
+      <div class="flex-between">
+        <h3>应用</h3>
+        <el-input
+          v-model="pageConfig.name"
+          @change="search"
+          placeholder="按 名称 搜索"
+          prefix-icon="Search"
+          class="w-240"
+        />
+      </div>
+      <div v-loading.fullscreen.lock="loading">
+        <el-row
+          :gutter="15"
+          v-infinite-scroll="loadDataset"
+          :infinite-scroll-disabled="disabledScroll"
+          class="app-list-row"
+        >
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
+            <CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mt-8">
+            <CardBox title="应用" @click="router.push({ path: '/application/1/overview' })" />
+          </el-col>
+          <!-- <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="4"
+            v-for="(item, index) in applicationList"
+            :key="index"
+            class="mt-8"
+          >
+            <CardBox
+              :title="item.name"
+              :description="item.desc"
+              class="cursor"
+              @click="router.push({ path: `/dataset/${item.id}/document` })"
+            >
+              <template #mouseEnter>
+                <el-tooltip effect="dark" content="删除" placement="top">
+                  <el-button text @click.stop="deleteDateset(item)" class="delete-button">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </template>
+  
+              <template #footer>
+                <div class="footer-content">
+                  <span class="bold">{{ item?.document_count || 0 }}</span>
+                  文档<el-divider direction="vertical" />
+                  <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                  字符<el-divider direction="vertical" />
+                  <span class="bold">{{ item?.char_length || 0 }}</span>
+                  关联应用
+                </div>
+              </template>
+            </CardBox>
+          </el-col> -->
+        </el-row>
+      </div>
+    </div>
+  </template>
+  <script setup lang="ts">
+  import { ref, onMounted, reactive } from 'vue'
+  import datasetApi from '@/api/dataset'
+  import type { datasetListRequest } from '@/api/type/dataset'
+//   import { MsgSuccess, MsgConfirm } from '@/utils/message'
+  import { useRouter } from 'vue-router'
+//   import { numberFormat } from '@/utils/utils'
+  const router = useRouter()
+  
+  const loading = ref(false)
+  const disabledScroll = ref(false)
+  const pageConfig = reactive<datasetListRequest>({
+    current_page: 1,
+    page_size: 20,
+    name: ''
+  })
+
+    const applicationList = ref<any[]>([])
+  
+  function loadDataset() {}
+  
+  function search() {
+    pageConfig.current_page = 1
+    getList()
+  }
+  
+//   function deleteDateset(row: any) {
+//     MsgConfirm(
+//       `是否删除数据集：${row.name} ?`,
+//       `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`,
+//       {
+//         confirmButtonText: '删除',
+//         confirmButtonClass: 'danger'
+//       }
+//     )
+//       .then(() => {
+//         loading.value = true
+//         datasetApi
+//           .delDateset(row.id)
+//           .then(() => {
+//             MsgSuccess('删除成功')
+//             getList()
+//           })
+//           .catch(() => {
+//             loading.value = false
+//           })
+//       })
+//       .catch(() => {})
+//   }
+  
+  function getList() {
+    loading.value = true
+    datasetApi
+      .getDateset(pageConfig)
+      .then((res) => {
+        applicationList.value = res.data?.records
+        loading.value = false
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  }
+  
+  onMounted(() => {
+    // getList()
+  })
+  </script>
+  <style lang="scss" scoped>
+//   .dataset-list-container {
+//     .delete-button {
+//       position: absolute;
+//       right: 12px;
+//       top: 18px;
+//       height: auto;
+//     }
+//     .footer-content {
+//       .bold {
+//         color: var(--app-text-color);
+//       }
+//     }
+//   }
+  </style>
+  
\ No newline at end of file
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index 9da493e52..c8784b35e 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -11,40 +11,34 @@
         <div class="team-member-input">
           <el-input v-model="filterText" placeholder="请输入用户名搜索" prefix-icon="Search" />
         </div>
-        <div class="member-list mt-8" v-loading="loading">
-          <el-scrollbar>
-            <ul v-if="filterMember.length > 0">
-              <template v-for="(item, index) in filterMember" :key="index">
-                <li
-                  @click.prevent="clickMemberHandle(item.id)"
-                  :class="currentUser === item.id ? 'active' : ''"
-                  class="flex-between cursor"
-                >
-                  <div>
-                    <span class="mr-8">{{ item.username }}</span>
-                    <el-tag v-if="isManage(item.type)" class="default-tag">所有者</el-tag>
-                    <el-tag type="warning" v-else>用户</el-tag>
-                  </div>
-                  <span @click.stop>
-                    <el-dropdown trigger="click" v-if="!isManage(item.type)">
-                      <span class="cursor">
-                        <el-icon class="rotate-90"><MoreFilled /></el-icon>
-                      </span>
-                      <template #dropdown>
-                        <el-dropdown-menu>
-                          <el-dropdown-item @click.prevent="deleteMember(item)"
-                            >移除</el-dropdown-item
-                          >
-                        </el-dropdown-menu>
-                      </template>
-                    </el-dropdown>
+        <common-list
+          :data="filterMember"
+          class="mt-8"
+          v-loading="loading"
+          @click="clickMemberHandle"
+        >
+          <template #default="{ row }">
+            <div class="flex-between">
+              <div>
+                <span class="mr-8">{{ row.username }}</span>
+                <el-tag v-if="isManage(row.type)" class="default-tag">所有者</el-tag>
+                <el-tag type="warning" v-else>用户</el-tag>
+              </div>
+              <div @click.stop style="margin-top: 5px">
+                <el-dropdown trigger="click" v-if="!isManage(row.type)">
+                  <span class="cursor">
+                    <el-icon class="rotate-90"><MoreFilled /></el-icon>
                   </span>
-                </li>
-              </template>
-            </ul>
-            <el-empty description="暂无数据" v-else />
-          </el-scrollbar>
-        </div>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item @click.prevent="deleteMember(row)">移除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </div>
+          </template>
+        </common-list>
       </div>
       <div class="permission-setting flex" v-loading="rLoading">
         <div class="team-manage__table p-24">
@@ -181,9 +175,9 @@ function isManage(type: String) {
   return type === 'manage'
 }
 
-function clickMemberHandle(id: String) {
-  currentUser.value = id
-  MemberPermissions(id)
+function clickMemberHandle(item: any) {
+  currentUser.value = item.id
+  MemberPermissions(item.id)
 }
 function addMember() {
   CreateMemberRef.value?.open()
@@ -223,23 +217,13 @@ onMounted(() => {
   }
   .team-member {
     box-sizing: border-box;
-    width: var(--team-manage-left-width);
-    min-width: var(--team-manage-left-width);
-    .member-list {
-      li {
-        padding: 11px 16px;
-        &.active {
-          background: var(--el-color-primary-light-9);
-          border-radius: 4px;
-          color: var(--el-color-primary);
-        }
-      }
-    }
+    width: var(--setting-left-width);
+    min-width: var(--setting-left-width);
   }
 
   .permission-setting {
     box-sizing: border-box;
-    width: calc(100% - var(--team-manage-left-width));
+    width: calc(100% - var(--setting-left-width));
     flex-direction: column;
   }
 
diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
new file mode 100644
index 000000000..8ee68f28a
--- /dev/null
+++ b/ui/src/views/template/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <LayoutContainer header="模版管理">
+    <div class="template-manage flex main-calc-height">
+      <div class="template-manage__left p-8 border-r">
+        <h4 class="p-16">供应商</h4>
+        <common-list :data="list" class="mt-8" v-loading="loading" @click="clickHandle">
+          <template #default="{ row }">
+            <div class="flex">
+              <img src="@/assets/icon_document.svg" alt="" class="mr-8" />
+              <span>{{ row.name }}</span>
+            </div>
+          </template>
+        </common-list>
+      </div>
+      <div class="template-manage__left p-24">
+        <h4>全部模型</h4>
+      </div>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, watch } from 'vue'
+const loading = ref(false)
+const list = ref([
+  {
+    name: '1111'
+  }
+])
+
+function clickHandle(row: any) {}
+
+onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+.template-manage {
+  &__left {
+    box-sizing: border-box;
+    width: var(--setting-left-width);
+    min-width: var(--setting-left-width);
+  }
+}
+</style>

From 3bb71adfdc9f51414b7acff4fc9c28211e213c18 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 16 Nov 2023 10:32:41 +0800
Subject: [PATCH 18/18] feat:

---
 ui/src/views/template/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
index 8ee68f28a..b4019ed7b 100644
--- a/ui/src/views/template/index.vue
+++ b/ui/src/views/template/index.vue
@@ -12,7 +12,7 @@
           </template>
         </common-list>
       </div>
-      <div class="template-manage__left p-24">
+      <div class="template-manage__right p-24">
         <h4>全部模型</h4>
       </div>
     </div>