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] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=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>