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] =?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/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;