diff --git a/bigtop-manager-ui/.eslintrc.js b/bigtop-manager-ui/.eslintrc.js
index 2be67abedcebf3fc1177febeb41449a2fe2a0e36..090d92009325def0858f6879563e27969f673fce 100644
--- a/bigtop-manager-ui/.eslintrc.js
+++ b/bigtop-manager-ui/.eslintrc.js
@@ -59,6 +59,13 @@ module.exports = {
         varsIgnorePattern: '^(unused|ignored).*$'
       }
     ],
+    // resolve "[eslint] Delete `CR` [prettier/prettier]"?  https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-eslint-delete-cr-prettier-prettier
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto'
+      }
+    ],
     'space-before-function-paren': 'off',
     quotes: ['error', 'single', { avoidEscape: true }],
     'comma-dangle': ['error', 'never'],
diff --git a/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue b/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
index 71b1a0e156dcb2d6ac92b4c52496b183cb60c9f7..9e18a4dd1dc05409d53e7c64af1c9b44af6b860a 100644
--- a/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
+++ b/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { onMounted, ref } from 'vue'
   import { execCommand } from '@/api/command'
+  import { parseHostNamesAsPatternExpression } from '@/utils/array'
 
   const clusterInfo = defineModel<any>('clusterInfo')
 
@@ -13,9 +14,11 @@
   })
 
   const onNextStep = async () => {
-    clusterInfo.value.clusterCommand.hostnames = hosts.value
-      .split('\n')
-      .filter((item) => item !== '')
+    // clusterInfo.value.clusterCommand.hostnames = hosts.value
+    //   .split('\n')
+    //   .filter((item) => item !== '')
+    const hostList = parseHostNamesAsPatternExpression(hosts.value)
+    clusterInfo.value.clusterCommand.hostnames = hostList
 
     try {
       const res = await execCommand(clusterInfo.value)
diff --git a/bigtop-manager-ui/src/utils/array.ts b/bigtop-manager-ui/src/utils/array.ts
index 03655b39cc0851afe605cf178af003614d8818e7..7423b26f34d3003eb11d08746987f5d07cda08f1 100644
--- a/bigtop-manager-ui/src/utils/array.ts
+++ b/bigtop-manager-ui/src/utils/array.ts
@@ -23,3 +23,62 @@ export const arrayEquals = (arr1: any[], arr2: any[]): boolean => {
 
   return arr1.every((item) => arr2.includes(item))
 }
+
+// Transform pattern expression hostNames
+const replacePatternInHosts = (rawHostNames: string[]): string[] => {
+  let start: any,
+    end: any,
+    extra: any,
+    allHostNames: any = []
+  rawHostNames.forEach(function (rawHostName) {
+    const hostNames = []
+    start = rawHostName.match(/\[\d*/)
+    end = rawHostName.match(/\-\d*]/)
+    extra = { 0: '' }
+
+    start = start[0].substring(1)
+    end = end[0].substring(1)
+
+    if (parseInt(start) <= parseInt(end, 10) && parseInt(start, 10) >= 0) {
+      if (start[0] == '0' && start.length > 1) {
+        extra = start.match(/0*/)
+      }
+
+      for (let i = parseInt(start, 10); i < parseInt(end, 10) + 1; i++) {
+        hostNames.push(
+          rawHostName.replace(
+            /\[\d*\-\d*\]/,
+            extra[0].substring(0, start.length - i.toString().length) + i
+          )
+        )
+      }
+    } else {
+      hostNames.push(rawHostName)
+    }
+    allHostNames = allHostNames.concat(hostNames)
+  })
+
+  return allHostNames
+}
+
+// parse hostNames as pattern expression
+export const parseHostNamesAsPatternExpression = (
+  hostNameStr: string
+): string[] => {
+  let hostNames: string[] = []
+  const hostNameArr = hostNameStr.replace(/\n|\r\n|\s/g, ',').split(',')
+  hostNameArr.forEach((a) => {
+    const allPatterns = a.match(/\[\d*\-\d*\]/g)
+    const patternsNumber: number = allPatterns ? allPatterns.length : 0
+    let hn = [a]
+    if (patternsNumber) {
+      for (let i = 0; i < patternsNumber; i++) {
+        hn = replacePatternInHosts(hn)
+      }
+      hostNames = hostNames.concat(hn)
+    } else {
+      hostNames.push(a)
+    }
+  })
+  return Array.from(new Set(hostNames))
+}