diff --git a/bigtop-manager-ui/README.md b/bigtop-manager-ui/README.md
index c93033201..70f775d2d 100644
--- a/bigtop-manager-ui/README.md
+++ b/bigtop-manager-ui/README.md
@@ -15,43 +15,53 @@
    limitations under the License.
 --->
 
-# Bigtop-Manager-ui
+# Bigtop Manager UI 
 
-Bigtop-Manager-ui is the front-end UI of the Manager platform, which stores code about the interaction between the platform and users, interface display, control styles, etc.
+Bigtop Manager UI is the front-end UI of the Manager platform, which stores code about the interaction between the platform and users, interface display, control styles, etc.
 
 ## Prerequisites
 
-Vite: Version 4.4.5
+- Node.js：`v18.17.0`
 
-Typescript: Version 5.0.2
+- pnpm: `v8.6.9`
 
-Vue: Version 3.3.4
+- Vite：`v5.4.19`
 
-Editor: VsCode
+- Typescript：`v5.8.3`
+
+- Vue：`v3.4.37`
+
+- Editor Recommendation: [Visual Studio Code](https://code.visualstudio.com/)
 
 ## Project Structure
 
-```
-—————————————————— public               static resources
-—————————————————— src                  project source code
-——————————— api                         calls the backend interface
-——————————— assets                      static assets
-——————————— components                  customize components
-——————————— composables                 composable
-——————————— directives                  customize directive
-——————————— layouts                     overall page layout
-——————————— locales                     internationalization
-——————————— pages                       components
-——————————— plugins                     global registration configuration
-——————————— router                      router
-——————————— store                       global persistence
-——————————— styles                      style file
-——————————— types                       data type
-——————————— utils                       utility function
-——————————— App.vue                     project root component
-——————————— main.ts                     Project packaging portal
-—————————————————— index.html           Project page
-—————————————————— package.json         Package management profile for your project
-—————————————————— vite.config.ts       Project configuration file
-—————————————————— postcss.config.ts    postcss configuration file
+```plaintext
+├── public/                    # Static assets
+├── src/                       # Source code root
+│   ├── api/                   # API request functions
+│   ├── assets/                # Static assets 
+│   ├── components/            # Reusable component directory
+│   │   ├── base/              # Basic UI components
+│   │   ├── common/            # Common composite components
+│   ├── composables/           # Vue composables 
+│   ├── directives/            # Custom directives
+│   ├── features/              # Feature-based components
+│   ├── layouts/               # Layout components
+│   ├── locales/               # locale files (i18n)
+│   ├── pages/                 # Page components
+│   ├── plugins/               # Plugins and global registrations
+│   ├── router/                # Routing configuration
+│   ├── store/                 # Global state management
+│   ├── styles/                # Global styles
+│   ├── types/                 # Global TypeScript declarations (.d.ts)
+│   ├── utils/                 # Utility functions
+│   ├── App.vue                # Root component
+│   └── main.ts                # Project entry point
+├── tests/                     # Unit and integration tests
+├── index.html                 # HTML template
+├── package.json               # Project metadata and dependencies
+├── tsconfig.json              # TypeScript config file
+├── vite.config.ts             # Vite config
+├── postcss.config.ts          # PostCSS config
+└── vitest.config.ts           # Vitest config
 ```
diff --git a/bigtop-manager-ui/README.zh.md b/bigtop-manager-ui/README.zh.md
index 241ca73e2..cac951494 100644
--- a/bigtop-manager-ui/README.zh.md
+++ b/bigtop-manager-ui/README.zh.md
@@ -15,43 +15,53 @@
    limitations under the License.
 --->
 
-# Bigtop-Manager-ui
+# Bigtop Manager UI 
 
-Bigtop-Manager-ui是Manager平台的前端UI，存放有关平台与用户交互，界面展示，控件样式等代码。
+Bigtop Manager UI 是 Manager 平台的前端 UI，存放有关平台与用户交互，界面展示，控件样式等代码。
 
 ## 先决条件
 
-Vite：版本4.4.5
+- Node.js：`v18.17.0`
 
-Typescript：版本5.0.2
+- pnpm: `v8.6.9`
 
-Vue：版本3.3.4
+- Vite：`v5.4.19`
 
-编辑器：VsCode
+- Typescript：`v5.8.3`
+
+- Vue：`v3.4.37`
+
+- 推荐编辑器：[Visual Studio Code](https://code.visualstudio.com/)
 
 ## 项目结构
 
-```
-——————————————————public                公共静态资源
-——————————————————src                   项目源代码
-——————————— api                         调用后端接口
-——————————— assets                      静态资源
-——————————— components                  自定义组件
-——————————— composables                 组合式函数
-——————————— directives                  自定义指令
-——————————— layouts                     整体页面布局
-——————————— locales                     国际化
-——————————— pages                       组件
-——————————— plugins                     全局注册配置
-——————————— router                      路由
-——————————— store                       全局持久化
-——————————— styles                      样式文件
-——————————— types                       数据类型
-——————————— utils                       工具函数
-——————————— App.vue                     项目根组件
-——————————— main.ts                     项目打包入口
-—————————————————— index.html           项目页面
-—————————————————— package.json         项目的包管理配置文件
-—————————————————— vite.config.ts       项目配置文件
-—————————————————— postcss.config.ts    postcss 配置文件
+```plaintext
+├── public/                    # 公共静态资源
+├── src/                       # 项目源代码目录
+│   ├── api/                   # 后端接口封装
+│   ├── assets/                # 静态资源
+│   ├── components/            # 可复用组件目录
+│   │   ├── base/              # 基础组件
+│   │   ├── common/            # 常用复合组件
+│   ├── composables/           # Vue 组合式函数
+│   ├── directives/            # 自定义指令
+│   ├── features/              # 业务组件
+│   ├── layouts/               # 页面布局组件
+│   ├── locales/               # 国际化资源（i18n）
+│   ├── pages/                 # 页面级组件
+│   ├── plugins/               # 插件与全局注册逻辑
+│   ├── router/                # 路由配置
+│   ├── store/                 # 全局状态管理
+│   ├── styles/                # 全局样式
+│   ├── types/                 # 全局类型声明（.d.ts）
+│   ├── utils/                 # 工具函数
+│   ├── App.vue                # 根组件
+│   └── main.ts                # 项目入口文件
+├── tests/                     # 单元测试或集成测试用例
+├── index.html                 # HTML 模板文件
+├── package.json               # 包管理与脚本配置文件
+├── tsconfig.json              # TypeScript 配置文件
+├── vite.config.ts             # Vite 配置文件
+├── postcss.config.ts          # PostCSS 配置
+└── vitest.config.ts           # Vitest 测试配置文件
 ```
diff --git a/bigtop-manager-ui/src/App.vue b/bigtop-manager-ui/src/App.vue
index df598c764..091cd6a4e 100644
--- a/bigtop-manager-ui/src/App.vue
+++ b/bigtop-manager-ui/src/App.vue
@@ -18,10 +18,9 @@
 -->
 
 <script setup lang="ts">
-  import { storeToRefs } from 'pinia'
-  import { onMounted } from 'vue'
   import { useLocaleStore } from '@/store/locale'
   import { useThemeStore } from './store/theme'
+
   const themeStore = useThemeStore()
   const localeStore = useLocaleStore()
   const { antd } = storeToRefs(localeStore)
diff --git a/bigtop-manager-ui/src/api/service/types.ts b/bigtop-manager-ui/src/api/service/types.ts
index c6d12c9f3..993c6088d 100644
--- a/bigtop-manager-ui/src/api/service/types.ts
+++ b/bigtop-manager-ui/src/api/service/types.ts
@@ -56,12 +56,15 @@ export interface ServiceConfig {
   properties?: Property[]
 }
 
+type PropertyAction = 'add' | 'update' | 'delete'
+
 export interface Property {
   attrs?: Attr
   desc?: string
   displayName?: string
   name: string
   value?: string
+  action?: PropertyAction
   [property: string]: any
 }
 
diff --git a/bigtop-manager-ui/src/components/common/header-card/index.vue b/bigtop-manager-ui/src/components/base/header-card/index.vue
similarity index 97%
rename from bigtop-manager-ui/src/components/common/header-card/index.vue
rename to bigtop-manager-ui/src/components/base/header-card/index.vue
index 9c1d88ae2..bd416b6ec 100644
--- a/bigtop-manager-ui/src/components/common/header-card/index.vue
+++ b/bigtop-manager-ui/src/components/base/header-card/index.vue
@@ -19,8 +19,8 @@
 
 <script setup lang="ts">
   import { usePngImage } from '@/utils/tools'
-  import { GroupItem } from '../button-group/types'
-  import { computed } from 'vue'
+
+  import type { GroupItem } from '@/components/common/button-group/types'
 
   interface Props {
     showAvatar?: boolean
diff --git a/bigtop-manager-ui/src/components/common/main-card/index.vue b/bigtop-manager-ui/src/components/base/main-card/index.vue
similarity index 100%
rename from bigtop-manager-ui/src/components/common/main-card/index.vue
rename to bigtop-manager-ui/src/components/base/main-card/index.vue
diff --git a/bigtop-manager-ui/src/components/common/main-card/types.ts b/bigtop-manager-ui/src/components/base/main-card/types.ts
similarity index 100%
rename from bigtop-manager-ui/src/components/common/main-card/types.ts
rename to bigtop-manager-ui/src/components/base/main-card/types.ts
diff --git a/bigtop-manager-ui/src/components/common/markdown-view/index.vue b/bigtop-manager-ui/src/components/base/markdown-view/index.vue
similarity index 97%
rename from bigtop-manager-ui/src/components/common/markdown-view/index.vue
rename to bigtop-manager-ui/src/components/base/markdown-view/index.vue
index 15b722097..8ddce88eb 100644
--- a/bigtop-manager-ui/src/components/common/markdown-view/index.vue
+++ b/bigtop-manager-ui/src/components/base/markdown-view/index.vue
@@ -18,12 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { computed, toRefs, nextTick } from 'vue'
   import { Marked } from 'marked'
   import { markedHighlight } from 'marked-highlight'
   import { copyText } from '@/utils/tools'
   import { message } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
   import hljs from 'highlight.js'
 
   type Props = {
diff --git a/bigtop-manager-ui/src/components/common/status-dot/index.vue b/bigtop-manager-ui/src/components/base/status-dot/index.vue
similarity index 98%
rename from bigtop-manager-ui/src/components/common/status-dot/index.vue
rename to bigtop-manager-ui/src/components/base/status-dot/index.vue
index 5fa4860c3..3ee3b390d 100644
--- a/bigtop-manager-ui/src/components/common/status-dot/index.vue
+++ b/bigtop-manager-ui/src/components/base/status-dot/index.vue
@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
   import { StatusType, StatusColors } from '@/enums/state'
-  import { computed } from 'vue'
 
   interface StatusDot {
     size?: number
diff --git a/bigtop-manager-ui/src/components/common/svg-icon/index.vue b/bigtop-manager-ui/src/components/base/svg-icon/index.vue
similarity index 98%
rename from bigtop-manager-ui/src/components/common/svg-icon/index.vue
rename to bigtop-manager-ui/src/components/base/svg-icon/index.vue
index 0421e6133..2bc6ab1fe 100644
--- a/bigtop-manager-ui/src/components/common/svg-icon/index.vue
+++ b/bigtop-manager-ui/src/components/base/svg-icon/index.vue
@@ -18,8 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-
   const icons = {
     avatar: IconSvgAvatar,
     'bm-logo': IconSvgBmLogo,
diff --git a/bigtop-manager-ui/src/components/common/button-group/index.vue b/bigtop-manager-ui/src/components/common/button-group/index.vue
index 7d475c5ce..c1d437c22 100644
--- a/bigtop-manager-ui/src/components/common/button-group/index.vue
+++ b/bigtop-manager-ui/src/components/common/button-group/index.vue
@@ -18,9 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { toRefs } from 'vue'
   import type { GroupItem, Props } from './types'
-  import { useI18n } from 'vue-i18n'
 
   const props = withDefaults(defineProps<Props>(), {
     i18n: '',
@@ -65,7 +63,7 @@
               <slot name="icon" :item="item" />
             </template>
             <span v-if="item.text">
-              {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+              {{ $props.i18n && item.text ? t(`${$props.i18n}.${item.text}`) : item.text }}
             </span>
           </a-button>
           <template #overlay>
@@ -89,7 +87,7 @@
             <slot name="icon" :item="item" />
           </template>
           <span v-if="item.text">
-            {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+            {{ $props.i18n && item.text ? t(`${$props.i18n}.${item.text}`) : item.text }}
           </span>
         </a-button>
       </template>
diff --git a/bigtop-manager-ui/src/components/common/form-builder/index.ts b/bigtop-manager-ui/src/components/common/form-builder/index.ts
deleted file mode 100644
index 10d259fd7..000000000
--- a/bigtop-manager-ui/src/components/common/form-builder/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *    https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export { default as FormBuilder } from './index.vue'
-export * from './types.ts'
diff --git a/bigtop-manager-ui/src/components/common/form-builder/index.vue b/bigtop-manager-ui/src/components/common/form-builder/index.vue
index 49a667949..6e4d4f5e7 100644
--- a/bigtop-manager-ui/src/components/common/form-builder/index.vue
+++ b/bigtop-manager-ui/src/components/common/form-builder/index.vue
@@ -18,10 +18,8 @@
 -->
 
 <script lang="ts" setup>
-  import { h, ref, computed } from 'vue'
   import { getFormItemComponent } from './config'
   import { isString } from 'lodash-es'
-  import { useI18n } from 'vue-i18n'
 
   import type { FormInstance, FormProps } from 'ant-design-vue'
   import type { FormItem } from './types'
diff --git a/bigtop-manager-ui/src/components/common/form-filter/index.ts b/bigtop-manager-ui/src/components/common/form-filter/index.ts
deleted file mode 100644
index 0e78cd6c0..000000000
--- a/bigtop-manager-ui/src/components/common/form-filter/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *    https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export { default as FormFilter } from './index.vue'
-export * from './types.ts'
diff --git a/bigtop-manager-ui/src/components/common/form-filter/index.vue b/bigtop-manager-ui/src/components/common/form-filter/index.vue
index f5f2f7117..59fa65bed 100644
--- a/bigtop-manager-ui/src/components/common/form-filter/index.vue
+++ b/bigtop-manager-ui/src/components/common/form-filter/index.vue
@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
   import { MenuProps } from 'ant-design-vue'
-  import { ref, toRefs, computed, shallowRef, toRaw } from 'vue'
   import { isEqual, cloneDeep } from 'lodash-es'
   import type { FilterFormItem } from './types'
 
@@ -27,6 +26,7 @@
     filterItems: FilterFormItem[]
   }
 
+  const { t } = useI18n()
   const props = defineProps<FilterFormPops>()
   const emits = defineEmits(['filter'])
   const { filterItems } = toRefs(props)
@@ -98,7 +98,7 @@
                 <a-menu-item
                   v-for="menuItem in item.options"
                   :id="item.key"
-                  :key="menuItem.key"
+                  :key="menuItem.key as any"
                   :title="menuItem.label"
                   @click.stop
                 >
@@ -113,10 +113,10 @@
                     type="link"
                     @click.stop="resetFilter(item)"
                   >
-                    {{ $t('common.reset') }}
+                    {{ t('common.reset') }}
                   </a-button>
                   <a-button size="small" type="primary" @click="confirmFilterParams">
-                    {{ $t('common.ok') }}
+                    {{ t('common.ok') }}
                   </a-button>
                 </a-space>
               </a-menu>
@@ -126,12 +126,12 @@
             <div class="search" @click.stop>
               <a-input
                 v-model:value="filterParams[item.key]"
-                :placeholder="`${$t('common.enter_error')}${item.label.toLowerCase()}`"
+                :placeholder="`${t('common.enter_error')}${item.label.toLowerCase()}`"
                 @click.stop
               />
               <a-space class="search-option">
-                <a-button size="small" @click.stop="resetFilter(item)">{{ $t('common.reset') }}</a-button>
-                <a-button size="small" type="primary" @click="confirmFilterParams">{{ $t('common.search') }}</a-button>
+                <a-button size="small" @click.stop="resetFilter(item)">{{ t('common.reset') }}</a-button>
+                <a-button size="small" type="primary" @click="confirmFilterParams">{{ t('common.search') }}</a-button>
               </a-space>
             </div>
           </template>
diff --git a/bigtop-manager-ui/src/components/common/form-filter/types.ts b/bigtop-manager-ui/src/components/common/form-filter/types.ts
index c2d1e3b52..d6a25771d 100644
--- a/bigtop-manager-ui/src/components/common/form-filter/types.ts
+++ b/bigtop-manager-ui/src/components/common/form-filter/types.ts
@@ -28,4 +28,5 @@ export interface FilterFormItem {
   key: string
   label: string
   options?: FilterFormItemOptionItem[]
+  [propkey: string]: any
 }
diff --git a/bigtop-manager-ui/src/components/common/index.ts b/bigtop-manager-ui/src/components/index.ts
similarity index 85%
rename from bigtop-manager-ui/src/components/common/index.ts
rename to bigtop-manager-ui/src/components/index.ts
index 427e7ed2e..8e5f181b9 100644
--- a/bigtop-manager-ui/src/components/common/index.ts
+++ b/bigtop-manager-ui/src/components/index.ts
@@ -24,9 +24,16 @@ const kebabToCamel = (kebab: string): string => {
 }
 
 const install = (app: App) => {
-  const components = import.meta.glob('../../components/common/**/index.vue', {
+  const commons = import.meta.glob('../../components/common/**/index.vue', {
     eager: true
   }) as any
+
+  const bases = import.meta.glob('../../components/base/**/index.vue', {
+    eager: true
+  }) as any
+
+  const components = { ...commons, ...bases }
+
   for (const path in components) {
     const component = components[path].default
     const componentName = kebabToCamel(path.split('/')[1])
diff --git a/bigtop-manager-ui/src/composables/use-base-table.ts b/bigtop-manager-ui/src/composables/use-base-table.ts
index 583346ce7..90f363bc1 100644
--- a/bigtop-manager-ui/src/composables/use-base-table.ts
+++ b/bigtop-manager-ui/src/composables/use-base-table.ts
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { ref, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
 import type { PaginationProps, TableColumnType, TableProps } from 'ant-design-vue'
 import type { FilterValue } from 'ant-design-vue/es/table/interface'
 
diff --git a/bigtop-manager-ui/src/composables/use-chart.ts b/bigtop-manager-ui/src/composables/use-chart.ts
index 2ca626cc6..1a3aa1c95 100644
--- a/bigtop-manager-ui/src/composables/use-chart.ts
+++ b/bigtop-manager-ui/src/composables/use-chart.ts
@@ -30,7 +30,6 @@ import {
 } from 'echarts/components'
 import { UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
-import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
 
 export type EChartsOption = echarts.ComposeOption<
   GaugeSeriesOption | GridComponentOption | TooltipComponentOption | LineSeriesOption | LegendComponentOption
diff --git a/bigtop-manager-ui/src/composables/use-steps.ts b/bigtop-manager-ui/src/composables/use-steps.ts
index 094694fb1..86821fe56 100644
--- a/bigtop-manager-ui/src/composables/use-steps.ts
+++ b/bigtop-manager-ui/src/composables/use-steps.ts
@@ -17,22 +17,19 @@
  * under the License.
  */
 
-import { computed, ref } from 'vue'
-
 const useSteps = (stepList: string[]) => {
   const current = ref(0)
+
   const stepsLimit = computed(() => stepList.length - 1)
+  const hasPrev = computed(() => current.value > 0)
+  const hasNext = computed(() => current.value < stepsLimit.value)
 
   const previousStep = () => {
-    if (current.value > 0) {
-      current.value = current.value - 1
-    }
+    if (hasPrev.value) current.value--
   }
 
   const nextStep = () => {
-    if (current.value < stepsLimit.value) {
-      current.value = current.value + 1
-    }
+    if (hasNext.value) current.value++
   }
 
   return {
diff --git a/bigtop-manager-ui/src/components/ai-assistant/chat-history.vue b/bigtop-manager-ui/src/features/ai-assistant/chat-history.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/ai-assistant/chat-history.vue
rename to bigtop-manager-ui/src/features/ai-assistant/chat-history.vue
index 5173b7ac0..bc74db4c1 100644
--- a/bigtop-manager-ui/src/components/ai-assistant/chat-history.vue
+++ b/bigtop-manager-ui/src/features/ai-assistant/chat-history.vue
@@ -17,15 +17,12 @@
   ~ under the License.
   -->
 <script setup lang="ts">
-  import { ref, shallowReactive, shallowRef, h, toRefs, watch } from 'vue'
   import { useAiChatStore } from '@/store/ai-assistant'
-  import { storeToRefs } from 'pinia'
   import { formatTime } from '@/utils/transform'
   import { EllipsisOutlined } from '@ant-design/icons-vue'
   import { message, Modal, Empty } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
 
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { ChatThread, ThreadId } from '@/api/ai-assistant/types'
 
@@ -130,7 +127,7 @@
     })
   }
 
-  const handleThreadActions = (thread: ChatThread, idx: number, { key }: { key: 'delete' | 'rename' }) => {
+  const handleThreadActions = (thread: ChatThread, idx: number, { key }: any) => {
     threadOperationHandlers[key](thread, idx)
   }
 
@@ -144,7 +141,7 @@
     <a-drawer
       v-if="historyType === 'small'"
       v-model:open="open"
-      :title="$t(title)"
+      :title="t(title)"
       :closable="false"
       :mask="false"
       :get-container="false"
@@ -176,7 +173,7 @@
     <template v-else>
       <div v-if="visible" class="chat-history-large">
         <header>
-          <a-typography-title :level="5">{{ $t(title) }}</a-typography-title>
+          <a-typography-title :level="5">{{ t(title) }}</a-typography-title>
         </header>
         <main>
           <a-empty v-if="threads.length == 0" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
@@ -187,7 +184,7 @@
                   v-if="isRename && editThread.threadId === thread.threadId"
                   :key="thread.threadId"
                   :ref="
-                    (el: HTMLElement) => {
+                    (el: any) => {
                       isRename && el.focus()
                     }
                   "
@@ -205,7 +202,7 @@
                     <template #overlay>
                       <a-menu @click="handleThreadActions(thread, idx, $event)">
                         <a-menu-item v-for="action in threadOperations" :key="action.key" :danger="action.danger">
-                          <span>{{ $t(`common.${action.key}`) }}</span>
+                          <span>{{ t(`common.${action.key}`) }}</span>
                         </a-menu-item>
                       </a-menu>
                     </template>
@@ -215,12 +212,12 @@
             </a-menu-item>
           </a-menu>
           <div class="chat-history-limit">
-            <a-typography-text size="small" type="secondary" :content="$t('aiAssistant.show_only10_records')" />
+            <a-typography-text size="small" type="secondary" :content="t('aiAssistant.show_only10_records')" />
           </div>
         </main>
         <footer>
           <a-button type="primary" :disabled="threadLimit" @click="aiChatStore.createChatThread(false)">
-            {{ $t('aiAssistant.new_chat') }}
+            {{ t('aiAssistant.new_chat') }}
           </a-button>
         </footer>
       </div>
diff --git a/bigtop-manager-ui/src/components/ai-assistant/chat-input.vue b/bigtop-manager-ui/src/features/ai-assistant/chat-input.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/ai-assistant/chat-input.vue
rename to bigtop-manager-ui/src/features/ai-assistant/chat-input.vue
index 1b0b085b7..75c125c15 100644
--- a/bigtop-manager-ui/src/components/ai-assistant/chat-input.vue
+++ b/bigtop-manager-ui/src/features/ai-assistant/chat-input.vue
@@ -18,11 +18,8 @@
   -->
 
 <script setup lang="ts">
-  import { ref } from 'vue'
   import { useAiChatStore } from '@/store/ai-assistant'
-  import { storeToRefs } from 'pinia'
   import { message } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
   const aiChatStore = useAiChatStore()
@@ -48,7 +45,7 @@
       v-model:value="chatMessage"
       :bordered="false"
       :auto-size="{ minRows: 1, maxRows: 6 }"
-      :placeholder="$t('aiAssistant.enter_question')"
+      :placeholder="t('aiAssistant.enter_question')"
     />
     <a-button :disabled="isSending" :type="isSending ? 'default' : 'text'" shape="circle" @click="sendMessage">
       <template #icon>
diff --git a/bigtop-manager-ui/src/components/ai-assistant/chat-message.vue b/bigtop-manager-ui/src/features/ai-assistant/chat-message.vue
similarity index 98%
rename from bigtop-manager-ui/src/components/ai-assistant/chat-message.vue
rename to bigtop-manager-ui/src/features/ai-assistant/chat-message.vue
index 8d5713b0a..6bd63bd9a 100644
--- a/bigtop-manager-ui/src/components/ai-assistant/chat-message.vue
+++ b/bigtop-manager-ui/src/features/ai-assistant/chat-message.vue
@@ -18,7 +18,6 @@
   -->
 <script setup lang="ts">
   import type { ChatMessageItem } from '@/api/ai-assistant/types'
-  import { computed } from 'vue'
 
   interface Props {
     record: ChatMessageItem
diff --git a/bigtop-manager-ui/src/components/ai-assistant/empty-content.vue b/bigtop-manager-ui/src/features/ai-assistant/empty-content.vue
similarity index 77%
rename from bigtop-manager-ui/src/components/ai-assistant/empty-content.vue
rename to bigtop-manager-ui/src/features/ai-assistant/empty-content.vue
index a2240d1df..c8362ec21 100644
--- a/bigtop-manager-ui/src/components/ai-assistant/empty-content.vue
+++ b/bigtop-manager-ui/src/features/ai-assistant/empty-content.vue
@@ -17,10 +17,8 @@
   ~ under the License.
   -->
 <script setup lang="ts">
-  import { shallowRef } from 'vue'
   import { usePngImage } from '@/utils/tools'
   import { useAiChatStore } from '@/store/ai-assistant'
-  import { storeToRefs } from 'pinia'
 
   interface Emits {
     (event: 'goSetUp'): void
@@ -32,6 +30,7 @@
     height: '200px',
     marginBottom: '16px'
   })
+  const { t } = useI18n()
   const aiChatStore = useAiChatStore()
   const { hasActivePlatform, threads, chatRecords } = storeToRefs(aiChatStore)
   const emptyState = usePngImage('ai-helper')
@@ -57,27 +56,27 @@
         <template v-if="hasActivePlatform">
           <div class="say-hello">
             <a-typography-title :level="5">
-              <div> {{ $t('aiAssistant.greeting') }} </div>
-              <div> {{ $t('aiAssistant.help') }} </div>
+              <div> {{ t('aiAssistant.greeting') }} </div>
+              <div> {{ t('aiAssistant.help') }} </div>
             </a-typography-title>
           </div>
           <div class="feature-desc">
-            <a-typography-link underline @click="quickAsk($t('aiAssistant.bigtop_manager'))">
-              {{ $t('aiAssistant.bigtop_manager') }}
+            <a-typography-link underline @click="quickAsk(t('aiAssistant.bigtop_manager'))">
+              {{ t('aiAssistant.bigtop_manager') }}
             </a-typography-link>
-            <a-typography-link underline @click="quickAsk($t('aiAssistant.can_do_for_you'))">
-              {{ $t('aiAssistant.can_do_for_you') }}
+            <a-typography-link underline @click="quickAsk(t('aiAssistant.can_do_for_you'))">
+              {{ t('aiAssistant.can_do_for_you') }}
             </a-typography-link>
-            <a-typography-link underline @click="quickAsk($t('aiAssistant.big_data_news'))">
-              {{ $t('aiAssistant.big_data_news') }}
+            <a-typography-link underline @click="quickAsk(t('aiAssistant.big_data_news'))">
+              {{ t('aiAssistant.big_data_news') }}
             </a-typography-link>
           </div>
         </template>
         <template v-else>
           <a-typography-text>
-            <div> {{ $t('aiAssistant.ai_disabled_msg') }} </div>
+            <div> {{ t('aiAssistant.ai_disabled_msg') }} </div>
           </a-typography-text>
-          <a-typography-link underline @click="goSetUpLlmConfig"> {{ $t('aiAssistant.go_set_up') }} </a-typography-link>
+          <a-typography-link underline @click="goSetUpLlmConfig"> {{ t('aiAssistant.go_set_up') }} </a-typography-link>
         </template>
       </template>
     </a-empty>
diff --git a/bigtop-manager-ui/src/components/ai-assistant/index.vue b/bigtop-manager-ui/src/features/ai-assistant/index.vue
similarity index 98%
rename from bigtop-manager-ui/src/components/ai-assistant/index.vue
rename to bigtop-manager-ui/src/features/ai-assistant/index.vue
index 1c74ab069..7c1e414f0 100644
--- a/bigtop-manager-ui/src/components/ai-assistant/index.vue
+++ b/bigtop-manager-ui/src/features/ai-assistant/index.vue
@@ -17,16 +17,16 @@
   ~ under the License.
   -->
 <script setup lang="ts">
-  import { computed, ref, watch } from 'vue'
   import { DrawerProps } from 'ant-design-vue'
   import { useAiChatStore } from '@/store/ai-assistant'
   import { useLlmConfigStore } from '@/store/llm-config'
-  import { storeToRefs } from 'pinia'
   import { useMenuStore } from '@/store/menu'
+
   import EmptyContent from './empty-content.vue'
   import ChatInput from './chat-input.vue'
   import ChatHistory from './chat-history.vue'
   import ChatMessage from './chat-message.vue'
+
   import type { ChatMessageItem } from '@/api/ai-assistant/types'
   import type { GroupItem } from '@/components/common/button-group/types'
 
@@ -40,6 +40,7 @@
 
   type ActionType = keyof typeof Action
 
+  const { t } = useI18n()
   const aiChatStore = useAiChatStore()
   const llmConfigStore = useLlmConfigStore()
   const menuStore = useMenuStore()
@@ -161,7 +162,7 @@
     <chat-history :visible="historyVisible" :history-type="historyType" />
     <a-drawer
       v-model:open="open"
-      :title="$t(title)"
+      :title="t(title)"
       :width="width"
       :mask="false"
       :closable="false"
diff --git a/bigtop-manager-ui/src/components/create-cluster/components/check-workflow.vue b/bigtop-manager-ui/src/features/create-cluster/components/check-workflow.vue
similarity index 96%
rename from bigtop-manager-ui/src/components/create-cluster/components/check-workflow.vue
rename to bigtop-manager-ui/src/features/create-cluster/components/check-workflow.vue
index 2b49b62fe..947e57eb8 100644
--- a/bigtop-manager-ui/src/components/create-cluster/components/check-workflow.vue
+++ b/bigtop-manager-ui/src/features/create-cluster/components/check-workflow.vue
@@ -18,11 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onMounted, reactive, ref, shallowRef, toRefs } from 'vue'
   import { Empty } from 'ant-design-vue'
   import { getJobDetails, retryJob } from '@/api/job'
 
-  import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
+  import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
 
   import type { JobVO, StageVO, StateType, TaskVO } from '@/api/job/types'
   import type { CommandVO } from '@/api/command/types'
@@ -32,6 +31,7 @@
 
   const { stepData } = toRefs(props)
 
+  const { t } = useI18n()
   const activeKey = ref<number[]>([])
   const jobDetail = ref<JobVO>({})
   const spinning = ref(false)
@@ -135,7 +135,7 @@
     <div v-else class="check-workflow">
       <div class="retry">
         <a-button v-if="stepData.state === 'Failed'" type="link" @click="handleRetryJob">
-          {{ $t('common.retry') }}
+          {{ t('common.retry') }}
         </a-button>
       </div>
       <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
@@ -158,7 +158,7 @@
                   type="link"
                   @click="viewLogs(stage, task)"
                 >
-                  {{ $t('cluster.view_log') }}
+                  {{ t('cluster.view_log') }}
                 </a-button>
               </div>
             </a-space>
diff --git a/bigtop-manager-ui/src/components/create-cluster/components/cluster-base.vue b/bigtop-manager-ui/src/features/create-cluster/components/cluster-base.vue
similarity index 97%
rename from bigtop-manager-ui/src/components/create-cluster/components/cluster-base.vue
rename to bigtop-manager-ui/src/features/create-cluster/components/cluster-base.vue
index 97c60d1a1..d1699fce3 100644
--- a/bigtop-manager-ui/src/components/create-cluster/components/cluster-base.vue
+++ b/bigtop-manager-ui/src/features/create-cluster/components/cluster-base.vue
@@ -18,8 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, shallowRef, watch } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { pick } from '@/utils/tools'
 
   import type { ClusterCommandReq } from '@/api/command/types'
diff --git a/bigtop-manager-ui/src/components/create-cluster/components/component-info.vue b/bigtop-manager-ui/src/features/create-cluster/components/component-info.vue
similarity index 90%
rename from bigtop-manager-ui/src/components/create-cluster/components/component-info.vue
rename to bigtop-manager-ui/src/features/create-cluster/components/component-info.vue
index 725a74578..7318edeb5 100644
--- a/bigtop-manager-ui/src/components/create-cluster/components/component-info.vue
+++ b/bigtop-manager-ui/src/features/create-cluster/components/component-info.vue
@@ -18,13 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, shallowRef, watchEffect } from 'vue'
   import { useStackStore } from '@/store/stack'
-  import { storeToRefs } from 'pinia'
   import { ServiceVO } from '@/api/service/types'
-  import { useI18n } from 'vue-i18n'
-  import useBaseTable from '@/composables/use-base-table'
-  import SetSource from '@/components/set-source/index.vue'
+
+  import SetSource from '@/features/set-source/index.vue'
   import type { TableColumnType } from 'ant-design-vue'
 
   const { t } = useI18n()
@@ -94,7 +91,7 @@
           {{ stackGroup[idx].replace(/^\w/, (c) => c.toUpperCase()) }}
         </a-radio-button>
       </a-radio-group>
-      <a-button type="primary" @click="handleSetSource">{{ $t('cluster.config_source') }}</a-button>
+      <a-button type="primary" @click="handleSetSource">{{ t('cluster.config_source') }}</a-button>
     </header>
     <a-table :loading="loading" :data-source="data" :columns="columns" :pagination="paginationProps" @change="onChange">
       <template #bodyCell="{ column }">
diff --git a/bigtop-manager-ui/src/components/create-cluster/components/host-manage.vue b/bigtop-manager-ui/src/features/create-cluster/components/host-manage.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/create-cluster/components/host-manage.vue
rename to bigtop-manager-ui/src/features/create-cluster/components/host-manage.vue
index b0c7f2775..f7cf51f2c 100644
--- a/bigtop-manager-ui/src/components/create-cluster/components/host-manage.vue
+++ b/bigtop-manager-ui/src/features/create-cluster/components/host-manage.vue
@@ -19,12 +19,9 @@
 
 <script setup lang="ts">
   import { PaginationProps, TableColumnType } from 'ant-design-vue'
-  import { computed, reactive, ref, watch } from 'vue'
   import { generateRandomId } from '@/utils/tools'
-  import { useI18n } from 'vue-i18n'
 
-  import useBaseTable from '@/composables/use-base-table'
-  import HostCreate from '@/components/create-host/index.vue'
+  import HostCreate from '@/features/create-host/index.vue'
 
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
@@ -223,8 +220,8 @@
   <div class="host-config">
     <header>
       <a-space :size="16">
-        <a-button type="primary" @click="updateHost('ADD')">{{ $t('cluster.add_host') }}</a-button>
-        <a-button type="primary" danger @click="deleteHost">{{ $t('common.bulk_remove') }}</a-button>
+        <a-button type="primary" @click="updateHost('ADD')">{{ t('cluster.add_host') }}</a-button>
+        <a-button type="primary" danger @click="deleteHost">{{ t('common.bulk_remove') }}</a-button>
       </a-space>
     </header>
     <a-table
@@ -239,16 +236,16 @@
         <div class="search">
           <a-input
             ref="searchInputRef"
-            :placeholder="$t('common.enter_error', [column.title])"
+            :placeholder="t('common.enter_error', [column.title])"
             :value="selectedKeys[0]"
             @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
             @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
           />
           <a-space :size="16">
             <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
-              {{ $t('common.search') }}
+              {{ t('common.search') }}
             </a-button>
-            <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }} </a-button>
+            <a-button size="small" @click="handleReset(clearFilters)"> {{ t('common.reset') }} </a-button>
           </a-space>
         </div>
       </template>
@@ -259,7 +256,7 @@
         <template v-if="column.key === 'status'">
           <svg-icon :name="record.status.toLowerCase()" />
           <span :title="`${record.message ? record.message : ''}`">
-            {{ `${$t(`common.${record.status.toLowerCase()}`)}` }}
+            {{ `${t(`common.${record.status.toLowerCase()}`)}` }}
             {{ record.message && record.status.toLowerCase() === 'failed' ? `:  ${record.message}` : '' }}
           </span>
         </template>
diff --git a/bigtop-manager-ui/src/components/create-cluster/index.vue b/bigtop-manager-ui/src/features/create-cluster/index.vue
similarity index 94%
rename from bigtop-manager-ui/src/components/create-cluster/index.vue
rename to bigtop-manager-ui/src/features/create-cluster/index.vue
index cf2252843..a13d4ac93 100644
--- a/bigtop-manager-ui/src/components/create-cluster/index.vue
+++ b/bigtop-manager-ui/src/features/create-cluster/index.vue
@@ -20,13 +20,11 @@
 <script setup lang="ts">
   import { useMenuStore } from '@/store/menu'
   import { message, Modal } from 'ant-design-vue'
-  import { computed, h, ref, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { getInstalledStatus, installDependencies } from '@/api/hosts'
   import { execCommand } from '@/api/command'
-  import { onBeforeRouteLeave } from 'vue-router'
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
-  import useSteps from '@/composables/use-steps'
+
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
+
   import ClusterBase from './components/cluster-base.vue'
   import ComponentInfo from './components/component-info.vue'
   import HostManage from './components/host-manage.vue'
@@ -230,7 +228,7 @@
         <a-steps :current="current">
           <a-step v-for="step in steps" :key="step" :disabled="true">
             <template #title>
-              <span>{{ $t(step) }}</span>
+              <span>{{ t(step) }}</span>
             </template>
           </a-step>
         </a-steps>
@@ -239,16 +237,16 @@
     <main-card>
       <template v-for="stepItem in steps" :key="stepItem.title">
         <div v-show="steps[current] === stepItem" class="step-title">
-          <h5>{{ $t(stepItem) }}</h5>
+          <h5>{{ t(stepItem) }}</h5>
           <section :class="{ 'step-content': current < stepsLimit }"></section>
         </div>
       </template>
       <component :is="getCompName" ref="compRef" :step-data="stepData[current]" @update-data="updateData" />
       <div class="step-action">
         <a-space>
-          <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ $t('common.exit') }}</a-button>
+          <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ t('common.exit') }}</a-button>
           <a-button v-show="current > 0 && current < stepsLimit" type="primary" @click="previousStep">
-            {{ $t('common.prev') }}
+            {{ t('common.prev') }}
           </a-button>
           <template v-if="current >= 0 && current <= stepsLimit - 1">
             <a-button
@@ -257,14 +255,14 @@
               :disabled="installing"
               @click="prepareNextStep"
             >
-              {{ $t('cluster.install_dependencies') }}
+              {{ t('cluster.install_dependencies') }}
             </a-button>
             <a-button v-else type="primary" @click="prepareNextStep">
-              {{ $t('common.next') }}
+              {{ t('common.next') }}
             </a-button>
           </template>
           <a-button v-show="current === stepsLimit && isDone" type="primary" @click="() => menuStore.updateSider()"
-            >{{ $t('common.done') }}
+            >{{ t('common.done') }}
           </a-button>
         </a-space>
       </div>
diff --git a/bigtop-manager-ui/src/components/create-host/components/conflict-resolver.vue b/bigtop-manager-ui/src/features/create-host/components/conflict-resolver.vue
similarity index 97%
rename from bigtop-manager-ui/src/components/create-host/components/conflict-resolver.vue
rename to bigtop-manager-ui/src/features/create-host/components/conflict-resolver.vue
index 7889b570a..e57c5cdf1 100644
--- a/bigtop-manager-ui/src/components/create-host/components/conflict-resolver.vue
+++ b/bigtop-manager-ui/src/features/create-host/components/conflict-resolver.vue
@@ -18,9 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
   import type { HostReq } from '@/api/command/types'
   import type { TableColumnType } from 'ant-design-vue'
 
diff --git a/bigtop-manager-ui/src/components/create-host/components/parsed-preview.vue b/bigtop-manager-ui/src/features/create-host/components/parsed-preview.vue
similarity index 94%
rename from bigtop-manager-ui/src/components/create-host/components/parsed-preview.vue
rename to bigtop-manager-ui/src/features/create-host/components/parsed-preview.vue
index 964540b47..f087f302b 100644
--- a/bigtop-manager-ui/src/components/create-host/components/parsed-preview.vue
+++ b/bigtop-manager-ui/src/features/create-host/components/parsed-preview.vue
@@ -18,7 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { ref, shallowRef } from 'vue'
   import { parseHostNamesAsPatternExpression } from '@/utils/transform'
   import ConflictResolver from './conflict-resolver.vue'
 
@@ -36,6 +35,7 @@
   const props = defineProps<{ data: Data; isPublic: boolean | undefined }>()
   const emits = defineEmits<{ (event: 'parsed', value: ParsedRes): void }>()
 
+  const { t } = useI18n()
   const open = ref(false)
   const showConflictList = ref(false)
   const parsedHostNames = ref<string[]>([])
@@ -103,8 +103,8 @@
         <span class="title">
           {{
             showConflictList
-              ? $t('cluster.duplicate_hostname', [`${duplicateHostnames.length}`])
-              : $t('cluster.show_hosts_resolved')
+              ? t('cluster.duplicate_hostname', [`${duplicateHostnames.length}`])
+              : t('cluster.show_hosts_resolved')
           }}
         </span>
       </div>
@@ -119,13 +119,13 @@
       <footer>
         <a-space size="middle">
           <a-button @click="handleCancel">
-            {{ $t('common.cancel') }}
+            {{ t('common.cancel') }}
           </a-button>
           <a-button v-if="showConflictList" @click="() => (showConflictList = false)">
-            {{ $t('common.prev') }}
+            {{ t('common.prev') }}
           </a-button>
           <a-button type="primary" @click="handleOk">
-            {{ $t('common.confirm') }}
+            {{ t('common.confirm') }}
           </a-button>
         </a-space>
       </footer>
diff --git a/bigtop-manager-ui/src/components/create-host/index.vue b/bigtop-manager-ui/src/features/create-host/index.vue
similarity index 97%
rename from bigtop-manager-ui/src/components/create-host/index.vue
rename to bigtop-manager-ui/src/features/create-host/index.vue
index be427cd3e..e726c36ac 100644
--- a/bigtop-manager-ui/src/components/create-host/index.vue
+++ b/bigtop-manager-ui/src/features/create-host/index.vue
@@ -18,10 +18,8 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, shallowRef } from 'vue'
   import { Rule } from 'ant-design-vue/es/form'
   import { message } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
   import { UploadOutlined } from '@ant-design/icons-vue'
   import { useClusterStore } from '@/store/cluster'
   import { uploadFile } from '@/api/upload-file'
@@ -32,7 +30,7 @@
   import type { UploadProps } from 'ant-design-vue'
   import type { HostReq } from '@/api/command/types'
   import type { HostParams, HostVO } from '@/api/hosts/types'
-  import type { FormItem } from '@/components/common/form-builder'
+  import type { FormItem } from '@/components/common/form-builder/types'
 
   type ModeType = 'EDIT' | 'ADD'
 
@@ -325,7 +323,7 @@
     return true
   }
 
-  const customRequest = async (options: { file: any; onSuccess: any; onError: any }) => {
+  const customRequest = async (options: any) => {
     const { file, onSuccess, onError } = options
     try {
       const formData = new FormData()
@@ -361,12 +359,12 @@
     <a-modal
       :open="open"
       :width="600"
-      :title="titleMap[mode] && $t(titleMap[mode])"
+      :title="titleMap[mode] && t(titleMap[mode])"
       :mask-closable="false"
       :confirm-loading="loading"
       :centered="true"
       :destroy-on-close="true"
-      :ok-text="$t('common.confirm')"
+      :ok-text="t('common.confirm')"
       @cancel="handleCancel"
       @ok="handleOk"
     >
@@ -381,7 +379,7 @@
             >
               <a-button>
                 <upload-outlined></upload-outlined>
-                {{ $t('common.upload_file') }}
+                {{ t('common.upload_file') }}
               </a-button>
             </a-upload>
             <span class="filename">{{ fileName ? fileName : mode === 'EDIT' ? formValue[item.field] : '' }}</span>
diff --git a/bigtop-manager-ui/src/components/create-host/install-dependencies.vue b/bigtop-manager-ui/src/features/create-host/install-dependencies.vue
similarity index 94%
rename from bigtop-manager-ui/src/components/create-host/install-dependencies.vue
rename to bigtop-manager-ui/src/features/create-host/install-dependencies.vue
index 1646dbea6..dcca0110e 100644
--- a/bigtop-manager-ui/src/components/create-host/install-dependencies.vue
+++ b/bigtop-manager-ui/src/features/create-host/install-dependencies.vue
@@ -19,16 +19,12 @@
 
 <script setup lang="ts">
   import { message, TableColumnType } from 'ant-design-vue'
-  import { storeToRefs } from 'pinia'
-  import { computed, reactive, ref, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { getInstalledStatus, installDependencies } from '@/api/hosts'
   import { useClusterStore } from '@/store/cluster'
   import { generateRandomId } from '@/utils/tools'
   import { execCommand } from '@/api/command'
 
   import HostCreate from './index.vue'
-  import useBaseTable from '@/composables/use-base-table'
 
   import { type InstalledStatusVO, Status } from '@/api/hosts/types'
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
@@ -275,11 +271,11 @@
     <a-modal
       :open="open"
       width="60%"
-      :title="$t('cluster.install_dependencies')"
+      :title="t('cluster.install_dependencies')"
       :mask-closable="false"
       :centered="true"
       :confirm-loading="installing"
-      :ok-text="allInstallSuccess ? $t('common.confirm') : installing ? $t('common.installing') : t('common.install')"
+      :ok-text="allInstallSuccess ? t('common.confirm') : installing ? t('common.installing') : t('common.install')"
       :destroy-on-close="true"
       @ok="handleInstalled"
       @cancel="handleCancel"
@@ -296,16 +292,16 @@
           <div class="search">
             <a-input
               ref="searchInputRef"
-              :placeholder="$t('common.enter_error', [column.title])"
+              :placeholder="t('common.enter_error', [column.title])"
               :value="selectedKeys[0]"
               @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
               @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
             />
             <a-space :size="16">
               <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
-                {{ $t('common.search') }}
+                {{ t('common.search') }}
               </a-button>
-              <a-button size="small" @click="handleReset(clearFilters)"> {{ $t('common.reset') }}</a-button>
+              <a-button size="small" @click="handleReset(clearFilters)"> {{ t('common.reset') }}</a-button>
             </a-space>
           </div>
         </template>
@@ -322,7 +318,7 @@
           <template v-if="column.key === 'status'">
             <svg-icon :name="record.status.toLowerCase()" />
             <span :title="`${record.message ? record.message : ''}`">
-              {{ `${$t(`common.${record.status.toLowerCase()}`)}` }}
+              {{ `${t(`common.${record.status.toLowerCase()}`)}` }}
               {{ record.message && record.status.toLowerCase() === 'failed' ? `:  ${record.message}` : '' }}
             </span>
           </template>
diff --git a/bigtop-manager-ui/src/components/create-service/components/component-assigner.vue b/bigtop-manager-ui/src/features/create-service/components/component-assigner.vue
similarity index 91%
rename from bigtop-manager-ui/src/components/create-service/components/component-assigner.vue
rename to bigtop-manager-ui/src/features/create-service/components/component-assigner.vue
index c5b68aa62..decb22cfb 100644
--- a/bigtop-manager-ui/src/components/create-service/components/component-assigner.vue
+++ b/bigtop-manager-ui/src/features/create-service/components/component-assigner.vue
@@ -18,15 +18,14 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, reactive, ref, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { TableColumnType, Empty } from 'ant-design-vue'
   import { getHosts } from '@/api/hosts'
+
   import { useCreateServiceStore } from '@/store/create-service'
   import { useServiceStore } from '@/store/service'
-  import { storeToRefs } from 'pinia'
-  import useBaseTable from '@/composables/use-base-table'
+
   import TreeSelector from './tree-selector.vue'
+
   import type { HostVO } from '@/api/hosts/types'
   import type { FilterConfirmProps, FilterResetProps, TableRowSelection } from 'ant-design-vue/es/table/interface'
   import type { Key } from 'ant-design-vue/es/_util/type'
@@ -40,7 +39,7 @@
   const { t } = useI18n()
   const createStore = useCreateServiceStore()
   const serviceStore = useServiceStore()
-  const { stepContext, selectedServices, allComps, allCompsMeta } = storeToRefs(createStore)
+  const { stepContext, selectedServices, allComps, componentSnapshot } = storeToRefs(createStore)
 
   const searchInputRef = ref()
   const currComp = ref<string>('')
@@ -63,7 +62,7 @@
   )
 
   const currCompInfo = computed(() => allComps.value.get(currComp.value.split('/')[1]))
-  const currCompInfoMeta = computed(() => allCompsMeta.value.get(currComp.value.split('/')[1]))
+  const currCompSnapshot = computed(() => componentSnapshot.value.get(currComp.value.split('/')[1]))
   const installedServices = computed(() =>
     serviceStore.getInstalledNamesOrIdsOfServiceByKey(`${stepContext.value.clusterId}`)
   )
@@ -132,7 +131,7 @@
 
   const validateHostIsCheck = (host: HostVO) => {
     const { type } = stepContext.value
-    const notAdd = currCompInfoMeta.value?.hosts.findIndex((v) => v.hostname === host.hostname) == -1
+    const notAdd = currCompSnapshot.value?.hosts.findIndex((v) => v.hostname === host.hostname) == -1
     if (type === 'component') {
       return !currCompInfo.value?.uninstall && !notAdd
     } else {
@@ -178,14 +177,14 @@
   <div class="component-assigner">
     <section>
       <div class="list-title">
-        <div>{{ $t('service.service_list') }}</div>
+        <div>{{ t('service.service_list') }}</div>
       </div>
       <tree-selector :tree="serviceList" :field-names="fieldNames" @change="treeSelectedChange" />
     </section>
     <a-divider type="vertical" class="divider" />
     <section>
       <div class="list-title">
-        <div>{{ $t('service.select_host') }}</div>
+        <div>{{ t('service.select_host') }}</div>
       </div>
       <a-table
         row-key="hostname"
@@ -204,17 +203,17 @@
           <div class="search">
             <a-input
               ref="searchInputRef"
-              :placeholder="$t('common.enter_error', [column.title])"
+              :placeholder="t('common.enter_error', [column.title])"
               :value="selectedKeys[0]"
               @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
               @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
             />
             <div class="search-option">
               <a-button size="small" @click="handleReset(clearFilters)">
-                {{ $t('common.reset') }}
+                {{ t('common.reset') }}
               </a-button>
               <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
-                {{ $t('common.search') }}
+                {{ t('common.search') }}
               </a-button>
             </div>
           </div>
@@ -224,7 +223,7 @@
     <a-divider type="vertical" class="divider" />
     <section>
       <div class="list-title">
-        <div>{{ $t('service.host_preview') }}</div>
+        <div>{{ t('service.host_preview') }}</div>
       </div>
       <div class="preview">
         <a-empty v-if="hostsOfCurrComp.length === 0" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
diff --git a/bigtop-manager-ui/src/components/create-service/components/component-installer.vue b/bigtop-manager-ui/src/features/create-service/components/component-installer.vue
similarity index 96%
rename from bigtop-manager-ui/src/components/create-service/components/component-installer.vue
rename to bigtop-manager-ui/src/features/create-service/components/component-installer.vue
index 480c62a64..e3795a8b9 100644
--- a/bigtop-manager-ui/src/components/create-service/components/component-installer.vue
+++ b/bigtop-manager-ui/src/features/create-service/components/component-installer.vue
@@ -18,21 +18,23 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onMounted, reactive, ref, shallowRef, toRefs } from 'vue'
   import { Empty } from 'ant-design-vue'
   import { getJobDetails, retryJob } from '@/api/job'
   import { CommandVO } from '@/api/command/types'
   import { useCreateServiceStore } from '@/store/create-service'
-  import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
+
+  import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
   import type { JobVO, StageVO, StateType, TaskVO } from '@/api/job/types'
 
   const props = defineProps<{ stepData: CommandVO }>()
   const { stepData } = toRefs(props)
 
+  const { t } = useI18n()
   const createStore = useCreateServiceStore()
   const activeKey = ref<number[]>([])
   const jobDetail = ref<JobVO>({})
   const spinning = ref(false)
+
   const logsViewState = reactive<LogViewProps>({
     open: false
   })
@@ -43,6 +45,7 @@
     Canceled: 'canceled',
     Successful: 'success'
   })
+
   const stages = computed(() => {
     if (jobDetail.value.stages) {
       return [...jobDetail.value.stages].sort((a, b) => a.order! - b.order!)
@@ -131,7 +134,7 @@
     <div v-else class="component-installer">
       <div class="retry">
         <a-button v-if="jobDetail.state === 'Failed'" type="link" @click="handleRetryJob">
-          {{ $t('common.retry') }}
+          {{ t('common.retry') }}
         </a-button>
       </div>
       <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
@@ -154,7 +157,7 @@
                   type="link"
                   @click="viewLogs(stage, task)"
                 >
-                  {{ $t('cluster.view_log') }}
+                  {{ t('cluster.view_log') }}
                 </a-button>
               </div>
             </a-space>
diff --git a/bigtop-manager-ui/src/components/create-service/components/service-configurator.vue b/bigtop-manager-ui/src/features/create-service/components/service-configurator.vue
similarity index 56%
rename from bigtop-manager-ui/src/components/create-service/components/service-configurator.vue
rename to bigtop-manager-ui/src/features/create-service/components/service-configurator.vue
index 5b0fa0a82..58440d672 100644
--- a/bigtop-manager-ui/src/components/create-service/components/service-configurator.vue
+++ b/bigtop-manager-ui/src/features/create-service/components/service-configurator.vue
@@ -18,8 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, onDeactivated, ref, shallowRef, watch } from 'vue'
-  import { storeToRefs } from 'pinia'
   import { debounce } from 'lodash-es'
   import { Empty } from 'ant-design-vue'
   import { useCreateServiceStore } from '@/store/create-service'
@@ -35,16 +33,18 @@
     isView?: boolean
   }
 
-  const props = withDefaults(defineProps<Props>(), {
+  withDefaults(defineProps<Props>(), {
     isView: false
   })
 
+  const { t } = useI18n()
   const createStore = useCreateServiceStore()
   const serviceStore = useServiceStore()
   const { stepContext, selectedServices } = storeToRefs(createStore)
+
   const searchStr = ref('')
   const currService = ref<Key>('')
-  const configs = ref<ServiceConfig[]>([])
+  const currConfigs = ref<ServiceConfig[]>([])
   const activeKey = ref<number[]>([])
   const debouncedOnSearch = ref()
   const hostPreviewList = ref<ComponentVO[]>([])
@@ -53,6 +53,7 @@
     title: 'displayName',
     key: 'name'
   })
+
   const layout = shallowRef({
     labelCol: {
       xs: { span: 23 },
@@ -68,88 +69,59 @@
     }
   })
 
+  const clusterId = computed(() => stepContext.value.clusterId)
   const serviceList = computed(() => selectedServices.value)
-  const disabled = computed(() => {
-    const clusterId = stepContext.value.clusterId
-    return serviceStore
-      .getInstalledNamesOrIdsOfServiceByKey(`${clusterId}`)
-      .includes(currService.value.toString().split('/').at(-1)!)
-  })
 
-  // const disabled = computed(() => {
-  //   return creationModeType.value === 'component'
-  //     ? false
-  //     : serviceStore
-  //         .getInstalledNamesOrIdsOfServiceByKey(`${clusterId.value}`)
-  //         .includes(currService.value.toString().split('/').at(-1)!)
-  // })
-
-  watch(
-    () => props.isView,
-    () => {
-      searchStr.value = ''
-      filterConfigs.value = configs.value
-    }
+  const disabled = computed(() =>
+    serviceStore
+      .getInstalledNamesOrIdsOfServiceByKey(`${clusterId.value}`)
+      .includes(currService.value.toString().split('/').at(-1)!)
   )
 
-  const createNewProperty = () => {
-    return {
-      name: '',
-      displayName: '',
-      value: '',
-      isManual: true
-    }
+  const handleSelect = (expandSelectedKeyPath: string) => {
+    const name = expandSelectedKeyPath.split('/').at(-1)
+    const service = selectedServices.value.find((v) => v.name === name)
+
+    currService.value = expandSelectedKeyPath
+    currConfigs.value = service?.configs ?? []
+    hostPreviewList.value = service?.components ?? []
+
+    filterConfigurations()
   }
 
-  const manualAddPropertyForConfig = (config: ServiceConfig) => {
-    config.properties?.push(createNewProperty())
+  const manualAddProperty = (config: ServiceConfig) => {
+    config.properties?.push(createStore.generateProperty())
   }
 
-  const removeProperty = (property: Property, config: ServiceConfig) => {
-    if (!config.properties) {
-      return
-    }
+  const deleteProperty = (property: Property, config: ServiceConfig) => {
+    const props = config.properties
+    if (!Array.isArray(props)) return
 
-    const index = config.properties.findIndex((v) => v.name === property.name)
-    if (index != -1) {
-      config.properties.splice(index, 1)
+    const target = props.find((p) => p.name === property.name)
+    if (target) {
+      target.action = 'delete'
     }
   }
 
-  const handleChange = (expandSelectedKeyPath: string) => {
-    currService.value = expandSelectedKeyPath
-    const index = selectedServices.value.findIndex((v) => v.name === expandSelectedKeyPath.split('/').at(-1))
-    if (index !== -1) {
-      const temp = selectedServices.value[index]
-      configs.value = temp.configs as ServiceConfig[]
-      hostPreviewList.value = temp.components as ComponentVO[]
-    } else {
-      configs.value = []
-      hostPreviewList.value = []
-    }
-    filterConfigurations()
-  }
-
   const filterConfigurations = () => {
-    if (!searchStr.value) {
-      filterConfigs.value = configs.value
-      return
-    }
-    filterConfigs.value = getSearchConfig(configs.value, searchStr.value)
+    filterConfigs.value = getSearchConfig(currConfigs.value, searchStr.value)
   }
 
   const getSearchConfig = (data: ServiceConfig[], keyword: string): ServiceConfig[] => {
+    if (keyword === '') {
+      return [...data]
+    }
+
     const lowerKeyword = keyword.toLowerCase()
 
     return data
       .map((item) => {
-        const matchedProp = item.properties?.filter(({ name, displayName, value = '' }) => {
-          return (
+        const matchedProp = item.properties?.filter(
+          ({ name, displayName, value = '' }) =>
             name.toLowerCase().includes(lowerKeyword) ||
             value.toLowerCase().includes(lowerKeyword) ||
             displayName?.toLowerCase().includes(lowerKeyword)
-          )
-        })
+        )
 
         if (matchedProp && matchedProp.length > 0) {
           return {
@@ -163,13 +135,9 @@
       .filter(Boolean) as ServiceConfig[]
   }
 
-  // const splitSearchStr = (splitStr: string) => {
-  //   return splitStr.toString().split(new RegExp(`(?<=${searchStr.value})|(?=${searchStr.value})`, 'i'))
-  // }
-
   onActivated(() => {
+    filterConfigurations()
     debouncedOnSearch.value = debounce(filterConfigurations, 300)
-    filterConfigs.value = [...configs.value]
   })
 
   onDeactivated(() => {
@@ -181,21 +149,22 @@
   <div class="service-configurator" :class="{ 'service-configurator-view': $props.isView }">
     <section>
       <div class="list-title">
-        <div>{{ $t('service.service_list') }}</div>
+        <div>{{ t('service.service_list') }}</div>
       </div>
-      <tree-selector :tree="serviceList" :field-names="fieldNames" @change="handleChange" />
+      <tree-selector :tree="serviceList" :field-names="fieldNames" @change="handleSelect" />
     </section>
     <a-divider type="vertical" class="divider" />
     <section>
       <div class="list-title">
-        <div>{{ $t('service.host_preview') }}</div>
+        <div>{{ t('service.host_preview') }}</div>
         <a-input
           v-model:value="searchStr"
-          :placeholder="$t('service.please_enter_search_keyword')"
+          :placeholder="t('service.please_enter_search_keyword')"
           @input="debouncedOnSearch"
         />
       </div>
       <a-empty v-if="filterConfigs.length === 0" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+      <!-- configs -->
       <a-form v-else :disabled="$props.isView || disabled" :label-wrap="true">
         <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
           <a-collapse-panel v-for="config in filterConfigs" :key="config.id">
@@ -204,7 +173,7 @@
                 v-if="!$props.isView && !disabled"
                 type="text"
                 shape="circle"
-                @click.stop="manualAddPropertyForConfig(config)"
+                @click.stop="manualAddProperty(config)"
               >
                 <template #icon>
                   <svg-icon name="plus-dark" />
@@ -214,54 +183,38 @@
             <template #header>
               <span>{{ config.name }}</span>
             </template>
-            <a-row
-              v-for="(property, idx) in config.properties"
-              :key="idx"
-              justify="space-between"
-              :gutter="[16, 0]"
-              :wrap="true"
-            >
-              <a-col v-bind="layout.labelCol">
-                <a-form-item>
-                  <a-textarea
-                    v-if="property.isManual"
-                    v-model:value="property.name"
-                    :auto-size="{ minRows: 1, maxRows: 5 }"
-                  />
-                  <span v-else style="overflow-wrap: break-word" :title="property.displayName ?? property.name">
-                    {{ property.displayName ?? property.name }}
-                  </span>
-
-                  <!-- <template v-else>
-                    <template v-for="(fragment, i) in splitSearchStr(item.displayName ?? item.name)">
-                      <mark v-if="fragment.toLowerCase() === searchStr.toLowerCase()" :key="i" class="highlight">
-                        {{ fragment }}
-                      </mark>
-                      <template v-else>
-                        <span :key="i" style="overflow-wrap: break-word" :title="item.displayName ?? item.name">
-                          {{ fragment }}
-                        </span>
-                      </template>
-                    </template>
-                  </template> -->
-                </a-form-item>
-              </a-col>
-              <a-col v-bind="layout.wrapperCol">
-                <a-form-item>
-                  <a-textarea v-model:value="property.value" :rows="property?.attrs?.type === 'longtext' ? 10 : 1" />
-                </a-form-item>
-              </a-col>
-              <a-button
-                v-if="!$props.isView && !disabled"
-                type="text"
-                shape="circle"
-                @click="removeProperty(property, config)"
-              >
-                <template #icon>
-                  <svg-icon name="remove" />
-                </template>
-              </a-button>
-            </a-row>
+            <!-- properties -->
+            <template v-for="property in config.properties" :key="property.__key">
+              <a-row v-if="property.action != 'delete'" justify="space-between" :gutter="[16, 0]" :wrap="true">
+                <a-col v-bind="layout.labelCol">
+                  <a-form-item>
+                    <a-textarea
+                      v-if="property.isManual"
+                      v-model:value="property.name"
+                      :auto-size="{ minRows: 1, maxRows: 5 }"
+                    />
+                    <span v-else style="overflow-wrap: break-word" :title="property.displayName ?? property.name">
+                      {{ property.displayName ?? property.name }}
+                    </span>
+                  </a-form-item>
+                </a-col>
+                <a-col v-bind="layout.wrapperCol">
+                  <a-form-item>
+                    <a-textarea v-model:value="property.value" :rows="property?.attrs?.type === 'longtext' ? 10 : 1" />
+                  </a-form-item>
+                </a-col>
+                <a-button
+                  v-if="!$props.isView && !disabled"
+                  type="text"
+                  shape="circle"
+                  @click="deleteProperty(property, config)"
+                >
+                  <template #icon>
+                    <svg-icon name="remove" />
+                  </template>
+                </a-button>
+              </a-row>
+            </template>
           </a-collapse-panel>
         </a-collapse>
       </a-form>
@@ -270,7 +223,7 @@
       <a-divider type="vertical" class="divider" />
       <section>
         <div class="list-title">
-          <div>{{ $t('service.host_preview') }}</div>
+          <div>{{ t('service.host_preview') }}</div>
         </div>
         <tree-selector
           :tree="hostPreviewList"
diff --git a/bigtop-manager-ui/src/components/create-service/components/service-selector.vue b/bigtop-manager-ui/src/features/create-service/components/service-selector.vue
similarity index 84%
rename from bigtop-manager-ui/src/components/create-service/components/service-selector.vue
rename to bigtop-manager-ui/src/features/create-service/components/service-selector.vue
index 2618cf5ea..c46e87fd2 100644
--- a/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
+++ b/bigtop-manager-ui/src/features/create-service/components/service-selector.vue
@@ -18,12 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, reactive, ref, shallowRef, toRefs } from 'vue'
   import { usePngImage } from '@/utils/tools'
   import { useStackStore } from '@/store/stack'
   import { useServiceStore } from '@/store/service'
   import { useCreateServiceStore } from '@/store/create-service'
-  import { storeToRefs } from 'pinia'
 
   import type { ExpandServiceVO } from '@/store/stack'
   import type { ComponentVO } from '@/api/component/types.ts'
@@ -34,6 +32,7 @@
     selectedData: ExpandServiceVO[]
   }
 
+  const { t } = useI18n()
   const stackStore = useStackStore()
   const createStore = useCreateServiceStore()
   const serviceStore = useServiceStore()
@@ -89,7 +88,7 @@
   const handleInstallItem = (item: ExpandServiceVO, from: ExpandServiceVO[], to: ExpandServiceVO[]) => {
     item.components = item.components?.map((v) => ({ ...v, hosts: [] }))
     moveItem(from, to, item)
-    createStore.updateSelectedService(state.selectedData)
+    createStore.updateSelectedService(state.selectedData, true)
   }
 
   const modifyInstallItems = async (type: 'add' | 'remove', item: ExpandServiceVO) => {
@@ -128,68 +127,73 @@
   }
 
   const initInstalledServicesDetail = async () => {
-    const clusterId = stepContext.value.clusterId
+    const { clusterId } = stepContext.value
     const detailRes = await serviceStore.getInstalledServicesDetailByKey(`${clusterId}`)
     const detailMap = new Map<string, ExpandServiceVO>()
+
     if (!detailRes) {
       return detailMap
-    } else {
-      return detailRes.reduce(
-        (pre, val) =>
-          pre.set(val.name!, {
-            ...val,
-            components: mergeComponents(val.components || [])
-          } as ExpandServiceVO),
-        detailMap
-      )
     }
+
+    return detailRes.reduce(
+      (pre, val) =>
+        pre.set(val.name!, {
+          ...val,
+          components: mergeComponents(val.components || [])
+        } as ExpandServiceVO),
+      detailMap
+    )
   }
 
   const buildCompleteServiceInfo = (
-    installedServiceMap: Map<string, ExpandServiceVO>,
+    installedServiceDetailMap: Map<string, ExpandServiceVO>,
     inherentServices: ServiceVO[]
   ) => {
     const inherent = inherentServices.find((v) => v.name === targetServiceName.value)!
-    const installed = { ...installedServiceMap.get(targetServiceName.value)! }
+    const detail = { ...installedServiceDetailMap.get(targetServiceName.value)! }
+
     const mergedComponentsMap = new Map(
-      (installed.components ?? []).map((component) => [component.name, { ...component }])
+      (detail.components ?? []).map((component) => [component.name, { ...component }])
     )
     for (const component of inherent.components ?? []) {
       if (!mergedComponentsMap.has(component.name)) {
         mergedComponentsMap.set(component.name, { ...component, hosts: [], uninstall: true })
       }
     }
-    installed.components = [...mergedComponentsMap.values()]
-    installed.license = inherent.license
+    detail.components = [...mergedComponentsMap.values()]
+    detail.license = inherent.license
 
-    return installed as ExpandServiceVO
+    return detail as ExpandServiceVO
   }
 
   const markSelectedAsInstalled = async (hasInstalled: boolean) => {
-    const { type, creationMode, clusterId } = stepContext.value
+    const { type, creationMode: mode } = stepContext.value
+
     if (!hasInstalled) {
       state.selectedData = [...selectedServices.value]
       return
     }
-    const installedServiceMap = await initInstalledServicesDetail()
-    const installedServiceNames = serviceStore.getInstalledNamesOrIdsOfServiceByKey(`${clusterId}`)
-    const rawServices = creationMode === 'internal' ? excludeInfraServices.value : infraServices.value
+
+    // Get map of installed services
+    const installedServiceDetailMap = await initInstalledServicesDetail()
+
+    // Set initial data based on selected creation type
+    const rawServices = mode === 'internal' ? excludeInfraServices.value : infraServices.value
+
     // Clone to prevent mutation of original data
     const inherentServices = rawServices.map((s) => ({ ...s }))
 
-    if (type === 'component' && installedServiceMap.has(targetServiceName.value!)) {
-      const completeService = buildCompleteServiceInfo(installedServiceMap, inherentServices)
+    if (type === 'component' && installedServiceDetailMap.has(targetServiceName.value!)) {
+      const completeService = buildCompleteServiceInfo(installedServiceDetailMap, inherentServices)
       state.selectedData[0] = { ...completeService, isInstalled: true }
       state.isAddableData = []
     } else {
       for (const service of inherentServices) {
-        const name = service.name || ''
-        if (installedServiceNames.includes(name)) {
-          const installed = installedServiceMap.get(name)
-          if (installed) {
-            Object.assign(service, installed)
-            service.isInstalled = true
-          }
+        const detail = installedServiceDetailMap.get(service.name || '')
+
+        if (detail) {
+          Object.assign(service, detail)
+          service.isInstalled = true
           state.selectedData.push(service as ExpandServiceVO)
         } else {
           state.isAddableData.push(service as ExpandServiceVO)
@@ -197,8 +201,7 @@
       }
     }
 
-    createStore.updateSelectedService(state.selectedData)
-    createStore.setTempData(state.selectedData)
+    createStore.updateSelectedService(state.selectedData, true)
   }
 
   onActivated(async () => {
@@ -217,14 +220,14 @@
   <div class="service-selector">
     <a-spin :spinning="spinning">
       <div class="list-title">
-        <div>{{ $t('service.select_service') }}</div>
-        <a-input v-model:value="searchStr" :placeholder="$t('service.please_enter_search_keyword')" />
+        <div>{{ t('service.select_service') }}</div>
+        <a-input v-model:value="searchStr" :placeholder="t('service.please_enter_search_keyword')" />
       </div>
       <a-list item-layout="horizontal" :data-source="filterAddableData">
         <template #renderItem="{ item }">
           <a-list-item>
             <template #actions>
-              <a-button type="primary" @click="modifyInstallItems('add', item)">{{ $t('common.add') }}</a-button>
+              <a-button type="primary" @click="modifyInstallItems('add', item)">{{ t('common.add') }}</a-button>
             </template>
             <a-list-item-meta>
               <template #title>
@@ -268,14 +271,14 @@
     <a-divider type="vertical" class="divider" />
     <a-spin :spinning="spinning">
       <div class="list-title">
-        <div>{{ $t('service.pending_installation_services') }}</div>
+        <div>{{ t('service.pending_installation_services') }}</div>
       </div>
       <a-list item-layout="horizontal" :data-source="state.selectedData">
         <template #renderItem="{ item }">
           <a-list-item>
             <template #actions>
               <a-button danger :disabled="item.isInstalled" type="primary" @click="modifyInstallItems('remove', item)">
-                {{ $t('common.remove') }}
+                {{ t('common.remove') }}
               </a-button>
             </template>
             <a-list-item-meta>
diff --git a/bigtop-manager-ui/src/components/create-service/components/tree-selector.vue b/bigtop-manager-ui/src/features/create-service/components/tree-selector.vue
similarity index 96%
rename from bigtop-manager-ui/src/components/create-service/components/tree-selector.vue
rename to bigtop-manager-ui/src/features/create-service/components/tree-selector.vue
index 4e1a0650b..6e6e628c7 100644
--- a/bigtop-manager-ui/src/components/create-service/components/tree-selector.vue
+++ b/bigtop-manager-ui/src/features/create-service/components/tree-selector.vue
@@ -18,7 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue'
   import { type TreeProps, Empty } from 'ant-design-vue'
   import type { DataNode, FieldNames, Key } from 'ant-design-vue/es/vc-tree/interface'
 
@@ -71,7 +70,7 @@
     }
     const checkSelectedKey = checkSelectedKeys.value[0]
     if (selectedKey !== checkSelectedKey) {
-      const keyPath = `${e.node.parent?.key}/${selectedKey}`
+      const keyPath = e.node.parent?.key ? `${e.node.parent?.key}/${selectedKey}` : `${selectedKey}`
       checkSelectedKeys.value = selectedKeys
       emits('change', keyPath)
     }
diff --git a/bigtop-manager-ui/src/components/create-service/index.vue b/bigtop-manager-ui/src/features/create-service/index.vue
similarity index 91%
rename from bigtop-manager-ui/src/components/create-service/index.vue
rename to bigtop-manager-ui/src/features/create-service/index.vue
index 850297c54..e1bf67fe7 100644
--- a/bigtop-manager-ui/src/components/create-service/index.vue
+++ b/bigtop-manager-ui/src/features/create-service/index.vue
@@ -18,18 +18,14 @@
 -->
 
 <script setup lang="ts">
-  import { computed, h, onUnmounted, ref, shallowRef, watch } from 'vue'
   import { message, Modal } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
-  import { storeToRefs } from 'pinia'
-  import { onBeforeRouteLeave, useRoute } from 'vue-router'
   import { StepContext, useCreateServiceStore } from '@/store/create-service'
 
   import ServiceSelector from './components/service-selector.vue'
   import ComponentAssigner from './components/component-assigner.vue'
   import ServiceConfigurator from './components/service-configurator.vue'
   import ComponentInstaller from './components/component-installer.vue'
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   const { t } = useI18n()
   const route = useRoute()
@@ -85,9 +81,12 @@
    */
   const validateComponentAssignments = (): boolean => {
     for (const info of createStore.allComps.values()) {
-      if (!info.cardinality) continue
+      const { cardinality, hosts, displayName } = info
+
+      if (!cardinality) continue
+
+      const isValid = createStore.validCardinality(cardinality, hosts?.length ?? 0, displayName!)
 
-      const isValid = createStore.validCardinality(info.cardinality, info.hosts?.length ?? 0, info.displayName!)
       if (!isValid) {
         return false
       }
@@ -163,7 +162,7 @@
         <a-steps :current="current">
           <a-step v-for="step in createStore.steps" :key="step" :disabled="true">
             <template #title>
-              <span>{{ $t(step) }}</span>
+              <span>{{ t(step) }}</span>
             </template>
           </a-step>
         </a-steps>
@@ -172,7 +171,7 @@
     <main-card>
       <template v-for="stepItem in createStore.steps" :key="stepItem.title">
         <div v-show="createStore.steps[current] === stepItem" class="step-title">
-          <h5>{{ $t(stepItem) }}</h5>
+          <h5>{{ t(stepItem) }}</h5>
           <section :class="{ 'step-content': current < stepsLimit }"></section>
         </div>
       </template>
@@ -182,17 +181,17 @@
       <component-installer v-if="current == stepsLimit" :step-data="createdPayload" />
       <div class="step-action">
         <a-space>
-          <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ $t('common.exit') }}</a-button>
+          <a-button v-show="current != stepsLimit" @click="() => $router.go(-1)">{{ t('common.exit') }}</a-button>
           <a-button v-show="current > 0 && current < stepsLimit" type="primary" @click="createStore.previousStep">
-            {{ $t('common.prev') }}
+            {{ t('common.prev') }}
           </a-button>
           <template v-if="current >= 0 && current <= stepsLimit - 1">
             <a-button :disabled="false" type="primary" @click="proceedToNextStep">
-              {{ $t('common.next') }}
+              {{ t('common.next') }}
             </a-button>
           </template>
           <a-button v-show="current === stepsLimit && isDone" type="primary" @click="$router.go(-1)">
-            {{ $t('common.done') }}
+            {{ t('common.done') }}
           </a-button>
         </a-space>
       </div>
diff --git a/bigtop-manager-ui/src/components/job-modal/index.vue b/bigtop-manager-ui/src/features/job-modal/index.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/job-modal/index.vue
rename to bigtop-manager-ui/src/features/job-modal/index.vue
index 3fe48bfd7..6add3d2d1 100644
--- a/bigtop-manager-ui/src/components/job-modal/index.vue
+++ b/bigtop-manager-ui/src/features/job-modal/index.vue
@@ -18,15 +18,12 @@
 -->
 
 <script setup lang="ts">
-  import { computed, Reactive, reactive, ref, shallowRef, toRefs, watch } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { TableColumnType } from 'ant-design-vue'
-  import useBaseTable from '@/composables/use-base-table'
-  import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
-  import CustomProgress from '@/components/job/custom-progress.vue'
+  import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
 
   import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from '@/api/job/types'
   import type { CommandRes, JobStageProgressItem } from '@/store/job-progress'
+  import type { Reactive } from 'vue'
 
   interface BreadcrumbItem {
     id: string
@@ -195,7 +192,7 @@
           </a-typography-link>
         </template>
         <template v-if="column.key === 'state'">
-          <custom-progress v-if="breadcrumbLen === 1" :key="record.id" :state="text" :progress-data="record.progress" />
+          <job-progress v-if="breadcrumbLen === 1" :key="record.id" :state="text" :progress-data="record.progress" />
           <svg-icon v-else :name="status[record.state as StateType]"></svg-icon>
         </template>
       </template>
diff --git a/bigtop-manager-ui/src/components/job/custom-progress.vue b/bigtop-manager-ui/src/features/job-progress/index.vue
similarity index 91%
rename from bigtop-manager-ui/src/components/job/custom-progress.vue
rename to bigtop-manager-ui/src/features/job-progress/index.vue
index 59971db97..44410c3e1 100644
--- a/bigtop-manager-ui/src/components/job/custom-progress.vue
+++ b/bigtop-manager-ui/src/features/job-progress/index.vue
@@ -18,7 +18,6 @@
 -->
 
 <script lang="ts" setup>
-  import { computed } from 'vue'
   import { JobState } from '@/enums/state'
 
   interface ProgressProps {
@@ -26,11 +25,18 @@
     progressData: number
   }
 
+  interface ProgressConfig {
+    status: 'success' | 'normal' | 'active' | 'exception' | undefined
+    progress: number
+    icon?: string
+    strokeColor?: string
+  }
+
   const props = withDefaults(defineProps<ProgressProps>(), {
     progressData: 1
   })
 
-  const progressConfig = computed(() => {
+  const progressConfig = computed((): ProgressConfig => {
     if (props.state === 'Pending') {
       return {
         progress: 0,
@@ -63,7 +69,7 @@
     } else {
       return {
         progress: 0,
-        status: 'status'
+        status: 'normal'
       }
     }
   })
diff --git a/bigtop-manager-ui/src/components/job/index.vue b/bigtop-manager-ui/src/features/job/index.vue
similarity index 94%
rename from bigtop-manager-ui/src/components/job/index.vue
rename to bigtop-manager-ui/src/features/job/index.vue
index 7b6f5c412..18d0f02af 100644
--- a/bigtop-manager-ui/src/components/job/index.vue
+++ b/bigtop-manager-ui/src/features/job/index.vue
@@ -18,13 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ComputedRef, onActivated, onDeactivated, reactive, ref, shallowRef, useAttrs } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { TableColumnType, TableProps } from 'ant-design-vue'
   import { getJobList, getStageList, getTaskList } from '@/api/job'
-  import useBaseTable from '@/composables/use-base-table'
-  import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
-  import CustomProgress from './custom-progress.vue'
+
+  import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
 
   import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from '@/api/job/types'
   import type { ClusterVO } from '@/api/cluster/types'
@@ -254,12 +251,12 @@
     >
       <template #bodyCell="{ record, text, column }">
         <template v-if="column.key === 'name'">
-          <a-typography-link underline @click="updateBreadcrumbs(record)">
+          <a-typography-link underline @click="updateBreadcrumbs(record as BreadcrumbItem)">
             <span :title="record.name">{{ record.name }}</span>
           </a-typography-link>
         </template>
         <template v-if="column.key === 'state'">
-          <custom-progress v-if="breadcrumbLen === 1" :key="record.id" :state="text" :progress-data="record.progress" />
+          <job-progress v-if="breadcrumbLen === 1" :key="record.id" :state="text" :progress-data="record.progress" />
           <svg-icon v-else :name="status[record.state as StateType]"></svg-icon>
         </template>
       </template>
diff --git a/bigtop-manager-ui/src/components/log-view/index.vue b/bigtop-manager-ui/src/features/log-view/index.vue
similarity index 94%
rename from bigtop-manager-ui/src/components/log-view/index.vue
rename to bigtop-manager-ui/src/features/log-view/index.vue
index 433571248..5a6951899 100644
--- a/bigtop-manager-ui/src/components/log-view/index.vue
+++ b/bigtop-manager-ui/src/features/log-view/index.vue
@@ -18,10 +18,8 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, watch } from 'vue'
   import { copyText, scrollToBottom } from '@/utils/tools'
   import { message } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
   import { getTaskLog } from '@/api/job'
   import type { AxiosProgressEvent, Canceler } from 'axios'
 
@@ -161,7 +159,7 @@
     :mask="false"
     :open="open"
     :z-index="99999"
-    :title="$t(`job.${title}`)"
+    :title="t(`job.${title}`)"
     @ok="handleOk"
     @cancel="handleOk"
   >
@@ -171,10 +169,10 @@
     <template #footer>
       <div class="log-load">
         <div>
-          <span v-show="loading" class="text-loading">{{ $t('job.log_loading') }}</span>
+          <span v-show="loading" class="text-loading">{{ t('job.log_loading') }}</span>
         </div>
         <a-button key="submit" type="primary" @click="handleOk">
-          {{ $t('common.confirm') }}
+          {{ t('common.confirm') }}
         </a-button>
       </div>
     </template>
@@ -183,7 +181,7 @@
       <a-space :size="16" class="options">
         <div v-for="option in options" :key="option.icon" v-on="option.on">
           <svg-icon :name="option.icon" />
-          <a-typography-link underline :content="$t(option.text)" />
+          <a-typography-link underline :content="t(option.text)" />
         </div>
       </a-space>
     </section>
diff --git a/bigtop-manager-ui/src/components/select-lang/login-lang.vue b/bigtop-manager-ui/src/features/login-lang/index.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/select-lang/login-lang.vue
rename to bigtop-manager-ui/src/features/login-lang/index.vue
index 9f29b7689..79fa93ed0 100644
--- a/bigtop-manager-ui/src/components/select-lang/login-lang.vue
+++ b/bigtop-manager-ui/src/features/login-lang/index.vue
@@ -20,13 +20,12 @@
 <script setup lang="ts">
   import { useLocaleStore } from '@/store/locale'
   import { Locale } from '@/store/locale/types.ts'
-  import { storeToRefs } from 'pinia'
 
   const localeStore = useLocaleStore()
   const { locale } = storeToRefs(localeStore)
 
-  const handleClick = ({ key }: { key: Locale }) => {
-    localeStore.setLocale(key)
+  const handleClick = ({ key }: any) => {
+    localeStore.setLocale(key as Locale)
   }
 </script>
 
diff --git a/bigtop-manager-ui/src/components/charts/category-chart.vue b/bigtop-manager-ui/src/features/metric/category-chart.vue
similarity index 98%
rename from bigtop-manager-ui/src/components/charts/category-chart.vue
rename to bigtop-manager-ui/src/features/metric/category-chart.vue
index c8035c754..3ed6cdbfa 100644
--- a/bigtop-manager-ui/src/components/charts/category-chart.vue
+++ b/bigtop-manager-ui/src/features/metric/category-chart.vue
@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
   import dayjs from 'dayjs'
-  import { computed, onMounted, toRefs, watchEffect } from 'vue'
   import { roundFixed } from '@/utils/storage'
   import { type EChartsOption, useChart } from '@/composables/use-chart'
 
diff --git a/bigtop-manager-ui/src/components/charts/gauge-chart.vue b/bigtop-manager-ui/src/features/metric/gauge-chart.vue
similarity index 97%
rename from bigtop-manager-ui/src/components/charts/gauge-chart.vue
rename to bigtop-manager-ui/src/features/metric/gauge-chart.vue
index 099867c32..75dbc3b49 100644
--- a/bigtop-manager-ui/src/components/charts/gauge-chart.vue
+++ b/bigtop-manager-ui/src/features/metric/gauge-chart.vue
@@ -18,8 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { onMounted, shallowRef, toRefs, watchEffect } from 'vue'
-
   import { type EChartsOption, useChart } from '@/composables/use-chart'
   import { roundFixed } from '@/utils/storage'
 
diff --git a/bigtop-manager-ui/src/components/select-lang/index.vue b/bigtop-manager-ui/src/features/select-lang/index.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/select-lang/index.vue
rename to bigtop-manager-ui/src/features/select-lang/index.vue
index 6bc84cca1..ebc48a18a 100644
--- a/bigtop-manager-ui/src/components/select-lang/index.vue
+++ b/bigtop-manager-ui/src/features/select-lang/index.vue
@@ -20,13 +20,12 @@
 <script setup lang="ts">
   import { useLocaleStore } from '@/store/locale'
   import { Locale } from '@/store/locale/types.ts'
-  import { storeToRefs } from 'pinia'
 
   const localeStore = useLocaleStore()
   const { locale } = storeToRefs(localeStore)
 
-  const handleClick = ({ key }: { key: Locale }) => {
-    localeStore.setLocale(key)
+  const handleClick = ({ key }: any) => {
+    localeStore.setLocale(key as Locale)
   }
 </script>
 
diff --git a/bigtop-manager-ui/src/components/service-management/components.vue b/bigtop-manager-ui/src/features/service-management/components.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/service-management/components.vue
rename to bigtop-manager-ui/src/features/service-management/components.vue
index 8f846ccfc..2f8bcfa7c 100644
--- a/bigtop-manager-ui/src/components/service-management/components.vue
+++ b/bigtop-manager-ui/src/features/service-management/components.vue
@@ -18,16 +18,11 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, h, onDeactivated, reactive, ref, shallowRef, useAttrs } from 'vue'
-  import { storeToRefs } from 'pinia'
-  import { useI18n } from 'vue-i18n'
-  import { useRoute, useRouter } from 'vue-router'
+  import { message, Modal, type TableColumnType, type TableProps } from 'ant-design-vue'
   import { deleteComponent, getComponents } from '@/api/component'
   import { useStackStore } from '@/store/stack'
   import { useJobProgress } from '@/store/job-progress'
-  import useBaseTable from '@/composables/use-base-table'
-  import { message, Modal, type TableColumnType, type TableProps } from 'ant-design-vue'
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { ComponentVO } from '@/api/component/types'
@@ -337,9 +332,9 @@
 <template>
   <div class="component">
     <header>
-      <div class="header-title">{{ $t('common.component') }}</div>
+      <div class="header-title">{{ t('common.component') }}</div>
       <div class="list-operation">
-        <a-button type="primary" @click="addComponent">{{ $t('common.add', [`${$t('common.component')}`]) }}</a-button>
+        <a-button type="primary" @click="addComponent">{{ t('common.add', [`${t('common.component')}`]) }}</a-button>
         <button-group :groups="batchOperations" group-shape="default" />
       </div>
     </header>
@@ -357,17 +352,17 @@
         <div class="search">
           <a-input
             ref="searchInputRef"
-            :placeholder="$t('common.enter_error', [column.title])"
+            :placeholder="t('common.enter_error', [column.title])"
             :value="selectedKeys[0]"
             @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
             @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
           />
           <div class="search-option">
             <a-button size="small" @click="handleReset(clearFilters)">
-              {{ $t('common.reset') }}
+              {{ t('common.reset') }}
             </a-button>
             <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
-              {{ $t('common.search') }}
+              {{ t('common.search') }}
             </a-button>
           </div>
         </div>
@@ -377,12 +372,12 @@
         <svg-icon v-else :name="filtered ? 'filter-activated' : 'filter'" />
       </template>
       <template #bodyCell="{ record, column }">
-        <template v-if="['status'].includes(column.key)">
+        <template v-if="['status'].includes(column.key as string)">
           <svg-icon style="margin-left: 0" :name="componentStatus[record.status].toLowerCase()" />
-          <span>{{ $t(`common.${componentStatus[record.status].toLowerCase()}`) }}</span>
+          <span>{{ t(`common.${componentStatus[record.status].toLowerCase()}`) }}</span>
         </template>
         <template v-if="column.key === 'quickLink'">
-          <span v-if="!record.quickLink">{{ $t('common.no_link') }}</span>
+          <span v-if="!record.quickLink">{{ t('common.no_link') }}</span>
           <a-typography-link v-else :href="record.quickLink.url" target="_blank">
             {{ record.quickLink.displayName }}
           </a-typography-link>
diff --git a/bigtop-manager-ui/src/components/service-management/components/capture-snapshot.vue b/bigtop-manager-ui/src/features/service-management/components/capture-snapshot.vue
similarity index 95%
rename from bigtop-manager-ui/src/components/service-management/components/capture-snapshot.vue
rename to bigtop-manager-ui/src/features/service-management/components/capture-snapshot.vue
index 0ef661260..186a1ee93 100644
--- a/bigtop-manager-ui/src/components/service-management/components/capture-snapshot.vue
+++ b/bigtop-manager-ui/src/features/service-management/components/capture-snapshot.vue
@@ -18,8 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import { computed, ref, shallowRef } from 'vue'
   import { takeServiceConfigSnapshot } from '@/api/service'
   import { message } from 'ant-design-vue'
 
@@ -86,7 +84,7 @@
       :open="open"
       width="600px"
       :centered="true"
-      :title="$t('service.capture_snapshot')"
+      :title="t('service.capture_snapshot')"
       :destroy-on-close="true"
       :confirm-loading="loading"
       @ok="handleOk"
diff --git a/bigtop-manager-ui/src/components/service-management/components/snapshot-management.vue b/bigtop-manager-ui/src/features/service-management/components/snapshot-management.vue
similarity index 95%
rename from bigtop-manager-ui/src/components/service-management/components/snapshot-management.vue
rename to bigtop-manager-ui/src/features/service-management/components/snapshot-management.vue
index ec468c306..ccc8051fc 100644
--- a/bigtop-manager-ui/src/components/service-management/components/snapshot-management.vue
+++ b/bigtop-manager-ui/src/features/service-management/components/snapshot-management.vue
@@ -18,16 +18,13 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, h, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { message, Modal, TableColumnType } from 'ant-design-vue'
-  import useBaseTable from '@/composables/use-base-table'
   import {
     deleteServiceConfigSnapshot,
     getServiceConfigSnapshotsList,
     recoveryServiceConfigSnapshot
   } from '@/api/service'
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { ServiceConfigSnapshot, ServiceParams, SnapshotRecovery } from '@/api/service/types'
@@ -163,7 +160,7 @@
       v-model:open="open"
       width="800px"
       :centered="true"
-      :title="$t('service.snapshot_management')"
+      :title="t('service.snapshot_management')"
       :destroy-on-close="true"
       @ok="handleOk"
       @cancel="handleCancel"
diff --git a/bigtop-manager-ui/src/components/service-management/configs.vue b/bigtop-manager-ui/src/features/service-management/configs.vue
similarity index 70%
rename from bigtop-manager-ui/src/components/service-management/configs.vue
rename to bigtop-manager-ui/src/features/service-management/configs.vue
index 5d842a680..825030424 100644
--- a/bigtop-manager-ui/src/components/service-management/configs.vue
+++ b/bigtop-manager-ui/src/features/service-management/configs.vue
@@ -18,17 +18,18 @@
 -->
 
 <script setup lang="ts">
-  import { onActivated, inject, useAttrs, shallowRef, ref, onDeactivated } from 'vue'
   import { debounce } from 'lodash-es'
-  import { useI18n } from 'vue-i18n'
   import { Empty, message } from 'ant-design-vue'
   import { updateServiceConfigs } from '@/api/service'
+  import { useCreateServiceStore } from '@/store/create-service'
+
   import CaptureSnapshot from './components/capture-snapshot.vue'
   import SnapshotManagement from './components/snapshot-management.vue'
 
   import type { Property, ServiceConfig, ServiceVO } from '@/api/service/types'
 
   const { t } = useI18n()
+  const createStore = useCreateServiceStore()
   const attrs = useAttrs() as unknown as Required<ServiceVO> & { clusterId: number }
 
   const getServiceDetail = inject('getServiceDetail') as () => any
@@ -37,6 +38,7 @@
   const loading = ref(false)
   const activeKey = ref<number[]>([])
   const configs = ref<ServiceConfig[]>([])
+  const snapshotConfigs = ref<ServiceConfig[]>([])
   const filterConfigs = ref<ServiceConfig[]>([])
   const captureRef = ref<InstanceType<typeof CaptureSnapshot>>()
   const snapshotRef = ref<InstanceType<typeof SnapshotManagement>>()
@@ -57,47 +59,39 @@
     }
   })
 
-  const createNewProperty = () => {
-    return {
-      name: '',
-      displayName: '',
-      value: '',
-      isManual: true
-    }
-  }
-
   const manualAddPropertyForConfig = (config: ServiceConfig) => {
-    config.properties?.push(createNewProperty())
+    config.properties?.push(createStore.generateProperty())
   }
 
-  const removeProperty = (property: Property, config: ServiceConfig) => {
-    const index = (config.properties || []).findIndex((v) => v.name === property.name)
-    if (index != -1) {
-      config.properties?.splice(index, 1)
+  const deleteProperty = (property: Property, config: ServiceConfig) => {
+    const props = config.properties
+    if (!Array.isArray(props)) return
+
+    const target = props.find((p) => p.name === property.name)
+    if (target) {
+      target.action = 'delete'
     }
   }
 
   const filterConfigurations = () => {
-    if (!searchStr.value) {
-      filterConfigs.value = configs.value
-      return
-    }
-
     filterConfigs.value = getSearchConfig(configs.value, searchStr.value)
   }
 
   const getSearchConfig = (data: ServiceConfig[], keyword: string): ServiceConfig[] => {
+    if (keyword === '') {
+      return [...data]
+    }
+
     const lowerKeyword = keyword.toLowerCase()
 
     return data
       .map((item) => {
-        const matchedProp = item.properties?.filter(({ name, displayName, value = '' }) => {
-          return (
+        const matchedProp = item.properties?.filter(
+          ({ name, displayName, value = '' }) =>
             name.toLowerCase().includes(lowerKeyword) ||
             value.toLowerCase().includes(lowerKeyword) ||
             displayName?.toLowerCase().includes(lowerKeyword)
-          )
-        })
+        )
 
         if (matchedProp && matchedProp.length > 0) {
           return {
@@ -115,7 +109,8 @@
     try {
       const { id, clusterId } = attrs
       loading.value = true
-      const data = await updateServiceConfigs({ id, clusterId }, [...configs.value])
+      const params = createStore.getDiffConfigs(configs.value, snapshotConfigs.value)
+      const data = await updateServiceConfigs({ id, clusterId }, params)
       if (data) {
         message.success(t('common.update_success'))
         getServiceDetail()
@@ -139,8 +134,9 @@
 
   onActivated(async () => {
     await getServiceDetail()
-    configs.value = attrs.configs as ServiceConfig[]
-    filterConfigs.value = [...configs.value]
+    configs.value = createStore.injectKeysToConfigs(attrs.configs)
+    snapshotConfigs.value = JSON.parse(JSON.stringify(attrs.configs))
+    filterConfigurations()
     debouncedOnSearch.value = debounce(filterConfigurations, 300)
   })
 
@@ -152,22 +148,23 @@
 <template>
   <div class="service-configurator">
     <header>
-      <div class="header-title">{{ $t('common.configs') }}</div>
+      <div class="header-title">{{ t('common.configs') }}</div>
       <div class="list-operation">
         <a-space>
-          <a-button type="primary" @click="onCaptureSnapshot">{{ $t('service.capture_snapshot') }}</a-button>
-          <a-button @click="openSnapshotManagement">{{ $t('service.snapshot_management') }}</a-button>
+          <a-button type="primary" @click="onCaptureSnapshot">{{ t('service.capture_snapshot') }}</a-button>
+          <a-button @click="openSnapshotManagement">{{ t('service.snapshot_management') }}</a-button>
         </a-space>
         <a-input
           v-model:value="searchStr"
           :allow-clear="true"
-          :placeholder="$t('service.please_enter_search_keyword')"
+          :placeholder="t('service.please_enter_search_keyword')"
           @input="debouncedOnSearch"
         />
       </div>
     </header>
     <section>
       <a-empty v-if="filterConfigs.length === 0" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+      <!-- configs -->
       <a-form v-else :label-wrap="true" :disabled="loading">
         <a-collapse v-model:active-key="activeKey" :bordered="false" :ghost="true">
           <a-collapse-panel v-for="config in filterConfigs" :key="config.id">
@@ -181,43 +178,40 @@
             <template #header>
               <span>{{ config.name }}</span>
             </template>
-            <a-row
-              v-for="(property, idx) in config.properties"
-              :key="idx"
-              justify="space-between"
-              :gutter="[16, 0]"
-              :wrap="true"
-            >
-              <a-col v-bind="layout.labelCol">
-                <a-form-item>
-                  <a-textarea
-                    v-if="property.isManual"
-                    v-model:value="property.name"
-                    :auto-size="{ minRows: 1, maxRows: 30 }"
-                  />
-                  <span v-else style="overflow-wrap: break-word" :title="property.displayName ?? property.name">
-                    {{ property.displayName ?? property.name }}
-                  </span>
-                </a-form-item>
-              </a-col>
-              <a-col v-bind="layout.wrapperCol">
-                <a-form-item>
-                  <a-textarea v-model:value="property.value" :rows="property?.attrs?.type === 'longtext' ? 10 : 1" />
-                </a-form-item>
-              </a-col>
-              <a-button type="text" shape="circle" @click="removeProperty(property, config)">
-                <template #icon>
-                  <svg-icon name="remove" />
-                </template>
-              </a-button>
-            </a-row>
+            <!-- properties -->
+            <template v-for="property in config.properties" :key="property.__key">
+              <a-row v-if="property.action != 'delete'" justify="space-between" :gutter="[16, 0]" :wrap="true">
+                <a-col v-bind="layout.labelCol">
+                  <a-form-item>
+                    <a-textarea
+                      v-if="property.isManual"
+                      v-model:value="property.name"
+                      :auto-size="{ minRows: 1, maxRows: 30 }"
+                    />
+                    <span v-else style="overflow-wrap: break-word" :title="property.displayName ?? property.name">
+                      {{ property.displayName ?? property.name }}
+                    </span>
+                  </a-form-item>
+                </a-col>
+                <a-col v-bind="layout.wrapperCol">
+                  <a-form-item>
+                    <a-textarea v-model:value="property.value" :rows="property?.attrs?.type === 'longtext' ? 10 : 1" />
+                  </a-form-item>
+                </a-col>
+                <a-button type="text" shape="circle" @click="deleteProperty(property, config)">
+                  <template #icon>
+                    <svg-icon name="remove" />
+                  </template>
+                </a-button>
+              </a-row>
+            </template>
           </a-collapse-panel>
         </a-collapse>
       </a-form>
     </section>
     <div style="text-align: end">
       <a-button type="primary" :loading="loading" @click="saveConfigs">
-        {{ $t('common.save') }}
+        {{ t('common.save') }}
       </a-button>
     </div>
     <capture-snapshot ref="captureRef" @success="getServiceDetail" />
diff --git a/bigtop-manager-ui/src/components/service-management/index.vue b/bigtop-manager-ui/src/features/service-management/index.vue
similarity index 94%
rename from bigtop-manager-ui/src/components/service-management/index.vue
rename to bigtop-manager-ui/src/features/service-management/index.vue
index 749aefaff..ac8408d75 100644
--- a/bigtop-manager-ui/src/components/service-management/index.vue
+++ b/bigtop-manager-ui/src/features/service-management/index.vue
@@ -18,18 +18,15 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onMounted, provide, ref, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { storeToRefs } from 'pinia'
   import { useServiceStore } from '@/store/service'
   import { useJobProgress } from '@/store/job-progress'
-  import { useRoute } from 'vue-router'
   import { Command } from '@/api/command/types'
+
   import Overview from './overview.vue'
   import Components from './components.vue'
   import Configs from './configs.vue'
 
-  import type { TabItem } from '@/components/common/main-card/types'
+  import type { TabItem } from '@/components/base/main-card/types'
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { ServiceVO } from '@/api/service/types'
 
diff --git a/bigtop-manager-ui/src/components/service-management/overview.vue b/bigtop-manager-ui/src/features/service-management/overview.vue
similarity index 88%
rename from bigtop-manager-ui/src/components/service-management/overview.vue
rename to bigtop-manager-ui/src/features/service-management/overview.vue
index 69e29e21c..a55e2ca59 100644
--- a/bigtop-manager-ui/src/components/service-management/overview.vue
+++ b/bigtop-manager-ui/src/features/service-management/overview.vue
@@ -18,11 +18,11 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, shallowRef, useAttrs } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
-  import GaugeChart from '@/components/charts/gauge-chart.vue'
-  import CategoryChart from '@/components/charts/category-chart.vue'
+
+  import GaugeChart from '@/features/metric/gauge-chart.vue'
+  import CategoryChart from '@/features/metric/category-chart.vue'
+
   import { Empty } from 'ant-design-vue'
   import type { ServiceVO, ServiceStatusType } from '@/api/service/types'
 
@@ -97,14 +97,14 @@
       <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" style="display: flex; flex-direction: column; gap: 24px">
         <div class="base-info">
           <div class="box-title">
-            <a-typography-text strong :content="$t('overview.basic_info')" />
+            <a-typography-text strong :content="t('overview.basic_info')" />
           </div>
           <div>
             <a-descriptions layout="vertical" bordered>
               <a-descriptions-item>
                 <template #label>
                   <div class="desc-sub-label">
-                    <a-typography-text strong :content="$t('overview.detail')" />
+                    <a-typography-text strong :content="t('overview.detail')" />
                   </div>
                 </template>
                 <div class="desc-sub-item-wrp">
@@ -122,7 +122,7 @@
                           :color="CommonStatus[statusColors[attrs[key]]]"
                         >
                           <status-dot :color="CommonStatus[statusColors[attrs[key]]]" />
-                          {{ attrs[key] && $t(`common.${statusColors[attrs[key]]}`) }}
+                          {{ attrs[key] && t(`common.${statusColors[attrs[key]]}`) }}
                         </a-tag>
                         <a-typography-text
                           v-else-if="key === 'stack'"
@@ -132,14 +132,14 @@
                         <a-typography-text
                           v-else-if="key === 'restartFlag'"
                           class="desc-sub-item-desc-column"
-                          :content="attrs[key] ? $t('common.yes') : $t('common.no')"
+                          :content="attrs[key] ? t('common.yes') : t('common.no')"
                         />
                         <a-typography-text
                           v-else-if="['kerberos', 'metrics'].includes(key)"
                           class="desc-sub-item-desc-column"
-                          :content="$t('common.disabled')"
+                          :content="t('common.disabled')"
                         />
-                        <a-typography-text v-else class="desc-sub-item-desc-column" :content="attrs[key]" />
+                        <a-typography-text v-else class="desc-sub-item-desc-column" :content="`${attrs[key] ?? ''}`" />
                       </div>
                     </template>
                   </div>
@@ -151,7 +151,7 @@
       </a-col>
       <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="17">
         <div class="box-title">
-          <a-typography-text strong :content="$t('overview.chart')" />
+          <a-typography-text strong :content="t('overview.chart')" />
           <a-space :size="12">
             <div
               v-for="time in timeRanges"
@@ -173,22 +173,22 @@
         <a-row v-else class="box-content">
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart1" :title="$t('overview.memory_usage')" />
+              <gauge-chart chart-id="chart1" :title="t('overview.memory_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart2" :title="$t('overview.cpu_usage')" />
+              <gauge-chart chart-id="chart2" :title="t('overview.cpu_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <category-chart chart-id="chart4" :title="$t('overview.cpu_usage')" />
+              <category-chart chart-id="chart4" :title="t('overview.cpu_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <category-chart chart-id="chart3" :title="$t('overview.memory_usage')" />
+              <category-chart chart-id="chart3" :title="t('overview.memory_usage')" />
             </div>
           </a-col>
         </a-row>
diff --git a/bigtop-manager-ui/src/components/set-source/update-address.vue b/bigtop-manager-ui/src/features/set-source/components/update-address.vue
similarity index 96%
rename from bigtop-manager-ui/src/components/set-source/update-address.vue
rename to bigtop-manager-ui/src/features/set-source/components/update-address.vue
index e5a98f6d0..e27395c61 100644
--- a/bigtop-manager-ui/src/components/set-source/update-address.vue
+++ b/bigtop-manager-ui/src/features/set-source/components/update-address.vue
@@ -17,9 +17,6 @@
   ~ under the License.
   -->
 <script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
   import type { FormItem } from '@/components/common/form-builder/types'
 
   const emits = defineEmits<{ (event: 'onOk', value: string): void }>()
diff --git a/bigtop-manager-ui/src/components/set-source/index.vue b/bigtop-manager-ui/src/features/set-source/index.vue
similarity index 93%
rename from bigtop-manager-ui/src/components/set-source/index.vue
rename to bigtop-manager-ui/src/features/set-source/index.vue
index da7a82989..1374b0649 100644
--- a/bigtop-manager-ui/src/components/set-source/index.vue
+++ b/bigtop-manager-ui/src/features/set-source/index.vue
@@ -18,10 +18,8 @@
 -->
 
 <script setup lang="ts">
-  import { computed, nextTick, reactive, ref, shallowRef, toRefs } from 'vue'
   import { getRepoList, updateRepo } from '@/api/repo'
-  import { useI18n } from 'vue-i18n'
-  import UpdateAddress from './update-address.vue'
+  import UpdateAddress from './components/update-address.vue'
 
   import { type FormInstance, message, type TableColumnType } from 'ant-design-vue'
   import type { RepoVO } from '@/api/repo/types'
@@ -174,7 +172,7 @@
       width="60%"
       :centered="true"
       :mask="false"
-      :title="$t('cluster.source')"
+      :title="t('cluster.source')"
       :mask-closable="false"
       :destroy-on-close="true"
       :after-close="handleCancel"
@@ -185,7 +183,7 @@
             {{ label }}
           </a-radio-button>
         </a-radio-group>
-        <a-button type="primary" @click="setNewAddress">{{ $t('component.update_all') }}</a-button>
+        <a-button type="primary" @click="setNewAddress">{{ t('component.update_all') }}</a-button>
       </div>
       <a-form ref="formRef" :model="form">
         <a-table
@@ -245,10 +243,10 @@
       </a-form>
       <template #footer>
         <div class="set-source-footer">
-          <a-typography-text class="set-source-tip" type="danger">{{ `*${$t('component.note')}` }}</a-typography-text>
+          <a-typography-text class="set-source-tip" type="danger">{{ `*${t('component.note')}` }}</a-typography-text>
           <a-space>
-            <a-button @click="handleCancel">{{ $t('common.cancel') }}</a-button>
-            <a-button type="primary" @click="handleOk">{{ $t('common.confirm') }}</a-button>
+            <a-button @click="handleCancel">{{ t('common.cancel') }}</a-button>
+            <a-button type="primary" @click="handleOk">{{ t('common.confirm') }}</a-button>
           </a-space>
         </div>
       </template>
diff --git a/bigtop-manager-ui/src/components/theme-switch/index.vue b/bigtop-manager-ui/src/features/theme-switch/index.vue
similarity index 100%
rename from bigtop-manager-ui/src/components/theme-switch/index.vue
rename to bigtop-manager-ui/src/features/theme-switch/index.vue
diff --git a/bigtop-manager-ui/src/components/user-avatar/index.vue b/bigtop-manager-ui/src/features/user-avatar/index.vue
similarity index 86%
rename from bigtop-manager-ui/src/components/user-avatar/index.vue
rename to bigtop-manager-ui/src/features/user-avatar/index.vue
index 403ab2832..8f4930523 100644
--- a/bigtop-manager-ui/src/components/user-avatar/index.vue
+++ b/bigtop-manager-ui/src/features/user-avatar/index.vue
@@ -21,20 +21,18 @@
   import { UserOutlined, ProfileOutlined, LogoutOutlined } from '@ant-design/icons-vue'
   import { message } from 'ant-design-vue'
   import { useUserStore } from '@/store/user'
-  import { storeToRefs } from 'pinia'
-  import router from '@/router'
-  import { useI18n } from 'vue-i18n'
 
-  const i18n = useI18n()
+  const { t } = useI18n()
+  const router = useRouter()
 
   const userStore = useUserStore()
   const { userVO } = storeToRefs(userStore)
 
   const logout = async () => {
-    const hide = message.loading(i18n.t('login.logging_out'), 0)
+    const hide = message.loading(t('login.logging_out'), 0)
     try {
       await userStore.logout()
-      message.success(i18n.t('login.logout_success'))
+      message.success(t('login.logout_success'))
       await router.push({ path: '/login' })
     } catch (e) {
       console.warn(e)
@@ -57,7 +55,7 @@
             <user-outlined />
           </template>
           <router-link to="/user/profile">
-            {{ $t('user.profile') }}
+            {{ t('user.profile') }}
           </router-link>
         </a-menu-item>
         <a-menu-item key="settings">
@@ -65,7 +63,7 @@
             <profile-outlined />
           </template>
           <router-link to="/user/settings">
-            {{ $t('user.settings') }}
+            {{ t('user.settings') }}
           </router-link>
         </a-menu-item>
         <a-menu-divider />
@@ -73,7 +71,7 @@
           <template #icon>
             <logout-outlined />
           </template>
-          {{ $t('user.logout') }}
+          {{ t('user.logout') }}
         </a-menu-item>
       </a-menu>
     </template>
diff --git a/bigtop-manager-ui/src/layouts/default.vue b/bigtop-manager-ui/src/layouts/default.vue
index 1b5e45b24..92bf941b7 100644
--- a/bigtop-manager-ui/src/layouts/default.vue
+++ b/bigtop-manager-ui/src/layouts/default.vue
@@ -19,15 +19,16 @@
 
 <script setup lang="ts">
   import { usePngImage } from '@/utils/tools'
+  const { t } = useI18n()
 </script>
 
 <template>
   <a-card>
     <div class="default">
       <img :src="usePngImage('default')" />
-      <a-typography-text>{{ $t('cluster.cluster_unavailable_message') }}</a-typography-text>
+      <a-typography-text>{{ t('cluster.cluster_unavailable_message') }}</a-typography-text>
       <a-typography-link underline @click="() => $router.push({ name: 'CreateCluster' })">
-        {{ $t('menu.create') }}
+        {{ t('menu.create') }}
       </a-typography-link>
     </div>
   </a-card>
diff --git a/bigtop-manager-ui/src/layouts/header.vue b/bigtop-manager-ui/src/layouts/header.vue
index 7af58b489..aac8e11fe 100644
--- a/bigtop-manager-ui/src/layouts/header.vue
+++ b/bigtop-manager-ui/src/layouts/header.vue
@@ -18,16 +18,15 @@
 -->
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { storeToRefs } from 'pinia'
   import { useMenuStore } from '@/store/menu/index'
-  import SelectLang from '@/components/select-lang/index.vue'
-  import UserAvatar from '@/components/user-avatar/index.vue'
-  import AiAssistant from '@/components/ai-assistant/index.vue'
+  import AiAssistant from '@/features/ai-assistant/index.vue'
 
   const githubUrl = import.meta.env.VITE_GITHUB_URL
   const bigtopMangerDocURL = import.meta.env.VITE_BIGTOP_MANAGER_DOC_URL
+
+  const { t } = useI18n()
   const menuStore = useMenuStore()
+
   const spaceSize = ref(16)
   const aiAssistantRef = ref<InstanceType<typeof AiAssistant> | null>(null)
   const { headerSelectedKey, headerMenus } = storeToRefs(menuStore)
@@ -47,10 +46,10 @@
         :selected-keys="[headerSelectedKey]"
         theme="dark"
         mode="horizontal"
-        @select="({ key }) => menuStore.onHeaderClick(key)"
+        @select="({ key }) => menuStore.onHeaderClick(key as string)"
       >
         <a-menu-item v-for="route of headerMenus" :key="route.path">
-          {{ $t(route.meta?.title || '') }}
+          {{ t(route.meta?.title || '') }}
         </a-menu-item>
       </a-menu>
     </div>
diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
index 4bcd66b95..4a0d7f68f 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -18,15 +18,13 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, watch } from 'vue'
-  import { useRouter, useRoute } from 'vue-router'
   import { useMenuStore } from '@/store/menu/index'
-  import { storeToRefs } from 'pinia'
   import { useClusterStore } from '@/store/cluster'
   import { useStackStore } from '@/store/stack'
 
   import type { ClusterStatusType } from '@/api/cluster/types'
 
+  const { t } = useI18n()
   const router = useRouter()
   const route = useRoute()
   const stackStore = useStackStore()
@@ -112,7 +110,7 @@
       :open-keys="openKeys"
       :selected-keys="[siderMenuSelectedKey]"
       mode="inline"
-      @click="({ key }) => menuStore.onSiderClick(key)"
+      @click="({ key }) => menuStore.onSiderClick(key as string)"
     >
       <template v-for="menuItem in siderMenus" :key="menuItem.path">
         <a-sub-menu v-if="menuItem.name === 'Clusters'" :key="menuItem.path">
@@ -128,7 +126,7 @@
             />
           </template>
           <template #title>
-            <span>{{ $t(menuItem.meta!.title!) }}</span>
+            <span>{{ t(menuItem.meta!.title!) }}</span>
           </template>
           <a-menu-item
             v-for="child of clusterMap"
@@ -146,14 +144,14 @@
           </a-menu-item>
         </a-sub-menu>
         <template v-else>
-          <a-menu-item v-if="!menuItem.meta?.hidden" :key="menuItem.redirect">
+          <a-menu-item v-if="!menuItem.meta?.hidden" :key="menuItem.redirect as string">
             <template #icon>
               <svg-icon
                 style="height: 16px; width: 16px"
                 :name="toggleActivatedIcon({ key: menuItem.redirect as string, icon: menuItem.meta?.icon || '' })"
               />
             </template>
-            <span>{{ $t(menuItem.meta!.title!) }}</span>
+            <span>{{ t(menuItem.meta!.title!) }}</span>
           </a-menu-item>
         </template>
       </template>
@@ -163,7 +161,7 @@
       <div class="create-option">
         <a-button type="primary" ghost @click="addCluster">
           <div>
-            <label>{{ $t('menu.create') }}</label>
+            <label>{{ t('menu.create') }}</label>
           </div>
         </a-button>
       </div>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
index 116837874..f40a1caba 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -19,16 +19,12 @@
 
 <script setup lang="ts">
   import { message, Modal, TableColumnType, TableProps } from 'ant-design-vue'
-  import { computed, onActivated, reactive, ref, h, useAttrs } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { getHosts } from '@/api/hosts'
   import * as hostApi from '@/api/hosts'
-  import { useRouter } from 'vue-router'
 
-  import useBaseTable from '@/composables/use-base-table'
-  import HostCreate from '@/components/create-host/index.vue'
-  import InstallDependencies from '@/components/create-host/install-dependencies.vue'
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
+  import HostCreate from '@/features/create-host/index.vue'
+  import InstallDependencies from '@/features/create-host/install-dependencies.vue'
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { FilterConfirmProps, FilterResetProps } from 'ant-design-vue/es/table/interface'
   import type { GroupItem } from '@/components/common/button-group/types'
@@ -228,10 +224,10 @@
 <template>
   <div class="host">
     <header>
-      <div class="header-title">{{ $t('host.host_list') }}</div>
+      <div class="header-title">{{ t('host.host_list') }}</div>
       <a-space :size="16">
-        <a-button type="primary" danger @click="bulkRemove">{{ $t('common.bulk_remove') }}</a-button>
-        <a-button type="primary" @click="addHost">{{ $t('cluster.add_host') }}</a-button>
+        <a-button type="primary" danger @click="bulkRemove">{{ t('common.bulk_remove') }}</a-button>
+        <a-button type="primary" @click="addHost">{{ t('cluster.add_host') }}</a-button>
       </a-space>
     </header>
     <a-table
@@ -246,17 +242,17 @@
         <div class="search">
           <a-input
             ref="searchInputRef"
-            :placeholder="$t('common.enter_error', [column.title])"
+            :placeholder="t('common.enter_error', [column.title])"
             :value="selectedKeys[0]"
             @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
             @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
           />
           <div class="search-option">
             <a-button size="small" @click="handleReset(clearFilters)">
-              {{ $t('common.reset') }}
+              {{ t('common.reset') }}
             </a-button>
             <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
-              {{ $t('common.search') }}
+              {{ t('common.search') }}
             </a-button>
           </div>
         </div>
@@ -271,7 +267,7 @@
         </template>
         <template v-if="column.key === 'status'">
           <svg-icon style="margin-left: 0" :name="hostStatus[record.status].toLowerCase()" />
-          <span>{{ $t(`common.${hostStatus[record.status].toLowerCase()}`) }}</span>
+          <span>{{ t(`common.${hostStatus[record.status].toLowerCase()}`) }}</span>
         </template>
         <template v-if="column.key === 'operation'">
           <button-group
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 52e8e8d01..aab76963e 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -18,22 +18,18 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { useClusterStore } from '@/store/cluster'
-  import { storeToRefs } from 'pinia'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
-  import { useRouter } from 'vue-router'
   import { useJobProgress } from '@/store/job-progress'
 
   import Overview from './overview.vue'
   import Service from './service.vue'
   import Host from './host.vue'
   import User from './user.vue'
-  import Job from '@/components/job/index.vue'
+  import Job from '@/features/job/index.vue'
 
   import type { Command } from '@/api/command/types'
-  import type { TabItem } from '@/components/common/main-card/types'
+  import type { TabItem } from '@/components/base/main-card/types'
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { ClusterStatusType, ClusterVO } from '@/api/cluster/types'
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
index 9584e6228..a555330fb 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -18,27 +18,21 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, onDeactivated, onUnmounted, ref, shallowRef, toRefs, watchEffect } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { storeToRefs } from 'pinia'
   import { formatFromByte } from '@/utils/storage'
   import { usePngImage } from '@/utils/tools'
+
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
+
   import { useServiceStore } from '@/store/service'
   import { useJobProgress } from '@/store/job-progress'
   import { useStackStore } from '@/store/stack'
   import { useClusterStore } from '@/store/cluster'
+
   import { Empty } from 'ant-design-vue'
-  import { useRoute } from 'vue-router'
   import { getClusterMetricsInfo } from '@/api/metrics'
-  import { useIntervalFn } from '@vueuse/core'
-
-  import GaugeChart from '@/components/charts/gauge-chart.vue'
-  import CategoryChart from '@/components/charts/category-chart.vue'
 
   import type { ClusterStatusType, ClusterVO } from '@/api/cluster/types'
   import type { ServiceVO } from '@/api/service/types'
-  import type { MenuItem } from '@/store/menu/types'
   import type { StackVO } from '@/api/stack/types'
   import type { Command } from '@/api/command/types'
   import type { MetricsData, TimeRangeType } from '@/api/metrics/types'
@@ -105,7 +99,7 @@
   const noChartData = computed(() => Object.values(chartData.value).length === 0)
   const detailKeys = computed(() => Object.keys(baseConfig.value) as (keyof ClusterVO)[])
 
-  const handleServiceOperate = (item: MenuItem, service: ServiceVO) => {
+  const handleServiceOperate = (item: any, service: ServiceVO) => {
     jobProgressStore.processCommand(
       {
         command: item.key as keyof typeof Command,
@@ -165,14 +159,14 @@
       <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" style="display: flex; flex-direction: column; gap: 24px">
         <div class="base-info">
           <div class="box-title">
-            <a-typography-text strong :content="$t('overview.basic_info')" />
+            <a-typography-text strong :content="t('overview.basic_info')" />
           </div>
           <div>
             <a-descriptions layout="vertical" bordered>
               <a-descriptions-item>
                 <template #label>
                   <div class="desc-sub-label">
-                    <a-typography-text strong :content="$t('overview.detail')" />
+                    <a-typography-text strong :content="t('overview.detail')" />
                   </div>
                 </template>
                 <div class="desc-sub-item-wrp">
@@ -191,8 +185,7 @@
                         >
                           <status-dot :color="CommonStatus[statusColors[clusterDetail[base] as ClusterStatusType]]" />
                           {{
-                            clusterDetail[base] &&
-                            $t(`common.${statusColors[clusterDetail[base] as ClusterStatusType]}`)
+                            clusterDetail[base] && t(`common.${statusColors[clusterDetail[base] as ClusterStatusType]}`)
                           }}
                         </a-tag>
                         <a-typography-text
@@ -216,7 +209,7 @@
         <template v-if="locateStackWithService.length == 0">
           <div class="service-info">
             <div class="box-title">
-              <a-typography-text strong :content="$t('overview.service_info')" />
+              <a-typography-text strong :content="t('overview.service_info')" />
             </div>
             <div class="box-empty">
               <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
@@ -225,7 +218,7 @@
         </template>
         <a-descriptions v-else layout="vertical" bordered :column="1">
           <template #title>
-            <a-typography-text strong :content="$t('overview.service_info')" />
+            <a-typography-text strong :content="t('overview.service_info')" />
           </template>
           <a-descriptions-item v-for="stack in locateStackWithService" :key="stack.stackName">
             <template #label>
@@ -258,7 +251,7 @@
       </a-col>
       <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="17">
         <div class="box-title">
-          <a-typography-text strong :content="$t('overview.chart')" />
+          <a-typography-text strong :content="t('overview.chart')" />
           <a-space :size="12">
             <div
               v-for="time in timeRanges"
@@ -280,16 +273,12 @@
         <a-row v-else class="box-content">
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart
-                chart-id="chart1"
-                :percent="chartData?.memoryUsageCur"
-                :title="$t('overview.memory_usage')"
-              />
+              <gauge-chart chart-id="chart1" :percent="chartData?.memoryUsageCur" :title="t('overview.memory_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart2" :percent="chartData?.cpuUsageCur" :title="$t('overview.cpu_usage')" />
+              <gauge-chart chart-id="chart2" :percent="chartData?.cpuUsageCur" :title="t('overview.cpu_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
@@ -298,7 +287,7 @@
                 chart-id="chart3"
                 :x-axis-data="chartData?.timestamps"
                 :data="chartData?.memoryUsage ?? []"
-                :title="$t('overview.memory_usage')"
+                :title="t('overview.memory_usage')"
               />
             </div>
           </a-col>
@@ -308,7 +297,7 @@
                 chart-id="chart4"
                 :x-axis-data="chartData?.timestamps"
                 :data="chartData?.cpuUsage ?? []"
-                :title="$t('overview.cpu_usage')"
+                :title="t('overview.cpu_usage')"
               />
             </div>
           </a-col>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index be0b97fd3..66e2da09f 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
@@ -18,17 +18,14 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, shallowRef, toRefs, useAttrs } from 'vue'
   import { Empty } from 'ant-design-vue'
-  import { usePngImage } from '@/utils/tools'
-  import { useI18n } from 'vue-i18n'
   import { useServiceStore } from '@/store/service'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
-  import { useRouter } from 'vue-router'
   import { useJobProgress } from '@/store/job-progress'
+  import { usePngImage } from '@/utils/tools'
 
   import type { GroupItem } from '@/components/common/button-group/types'
-  import type { FilterFormItem } from '@/components/common/form-filter'
+  import type { FilterFormItem } from '@/components/common/form-filter/types'
   import type { ServiceListParams, ServiceStatusType, ServiceVO } from '@/api/service/types'
   import type { ClusterVO } from '@/api/cluster/types'
   import type { Command, CommandRequest } from '@/api/command/types'
@@ -157,15 +154,15 @@
               <a-tag :color="CommonStatus[statusColors[item.status]]">
                 <div class="header-base-status-inner">
                   <status-dot :color="CommonStatus[statusColors[item.status]]" />
-                  <span class="small">{{ $t(`common.${statusColors[item.status]}`) }}</span>
+                  <span class="small">{{ t(`common.${statusColors[item.status]}`) }}</span>
                 </div>
               </a-tag>
             </div>
           </div>
           <div class="header-restart-status">
-            <span class="small-gray">{{ `${$t('common.restart')}` }}</span>
+            <span class="small-gray">{{ `${t('common.restart')}` }}</span>
             <status-dot :color="item.restartFlag ? 'error' : 'success'" />
-            <span class="small">{{ `${item.restartFlag ? $t('common.required') : $t('common.not_required')}` }}</span>
+            <span class="small">{{ `${item.restartFlag ? t('common.required') : t('common.not_required')}` }}</span>
           </div>
         </div>
         <div class="item-content" @click.stop>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
index 62d73e6f8..5fbfbd9e0 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/user.vue
@@ -18,12 +18,8 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, useAttrs } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { getUserListOfService } from '@/api/cluster'
 
-  import useBaseTable from '@/composables/use-base-table'
-
   import type { TableColumnType } from 'ant-design-vue'
   import type { ClusterVO, ServiceUserVO } from '@/api/cluster/types'
 
@@ -93,7 +89,7 @@
 <template>
   <div class="user">
     <header>
-      <div class="header-title">{{ $t('user.user_list') }}</div>
+      <div class="header-title">{{ t('user.user_list') }}</div>
     </header>
     <a-table
       :loading="loading"
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/components/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/components/index.vue
index 4718e3894..2eab78391 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/components/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/components/index.vue
@@ -17,12 +17,10 @@
   ~ under the License.
 -->
 <script setup lang="ts">
-  import { ref, reactive, computed, onMounted, watchEffect } from 'vue'
-  import useBaseTable from '@/composables/use-base-table'
-  import SetSource from '@/components/set-source/index.vue'
-  import { useI18n } from 'vue-i18n'
   import { useStackStore } from '@/store/stack'
-  import { storeToRefs } from 'pinia'
+
+  import SetSource from '@/features/set-source/index.vue'
+
   import type { ServiceVO } from '@/api/service/types'
   import type { TableColumnType } from 'ant-design-vue'
 
@@ -99,13 +97,13 @@
 <template>
   <div class="cluster-components">
     <div>
-      <div class="menu-title">{{ $t('menu.stacks') }}</div>
+      <div class="menu-title">{{ t('menu.stacks') }}</div>
     </div>
     <div class="cluster-components-header">
       <a-radio-group v-model:value="store.stackSelected" button-style="solid">
         <a-radio-button v-for="(stack, idx) in store.stackGroup" :key="idx" :value="stack">{{ stack }}</a-radio-button>
       </a-radio-group>
-      <a-button type="primary" @click="handleSetSource">{{ $t('cluster.config_source') }}</a-button>
+      <a-button type="primary" @click="handleSetSource">{{ t('cluster.config_source') }}</a-button>
     </div>
     <div>
       <a-table
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/detail.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/detail.vue
index df6909ca1..a691c7a09 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/detail.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/detail.vue
@@ -18,13 +18,13 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
+  import { message } from 'ant-design-vue'
+
   import { getHost } from '@/api/hosts'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
-  import { message } from 'ant-design-vue'
+
   import Overview from './overview.vue'
+
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { HostStatusType, HostVO } from '@/api/hosts/types.ts'
 
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
index f44cd976d..a795c9767 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
@@ -19,17 +19,14 @@
 
 <script setup lang="ts">
   import { message, Modal, TableColumnType, TableProps } from 'ant-design-vue'
-  import { computed, onMounted, onUnmounted, reactive, h, ref, shallowRef } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { useI18n } from 'vue-i18n'
 
   import { useClusterStore } from '@/store/cluster'
   import * as hostApi from '@/api/hosts'
 
   import useBaseTable from '@/composables/use-base-table'
-  import HostCreate from '@/components/create-host/index.vue'
-  import InstallDependencies from '@/components/create-host/install-dependencies.vue'
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
+  import HostCreate from '@/features/create-host/index.vue'
+  import InstallDependencies from '@/features/create-host/install-dependencies.vue'
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { FilterConfirmProps, FilterResetProps, TableRowSelection } from 'ant-design-vue/es/table/interface'
   import type { HostReq } from '@/api/command/types'
@@ -287,10 +284,10 @@
 
 <template>
   <div class="host-list">
-    <div class="title">{{ $t('host.host_list') }}</div>
+    <div class="title">{{ t('host.host_list') }}</div>
     <a-space :size="16">
-      <a-button type="primary" @click="addHost">{{ $t('cluster.add_host') }}</a-button>
-      <a-button type="primary" danger @click="bulkRemove">{{ $t('common.bulk_remove') }}</a-button>
+      <a-button type="primary" @click="addHost">{{ t('cluster.add_host') }}</a-button>
+      <a-button type="primary" danger @click="bulkRemove">{{ t('common.bulk_remove') }}</a-button>
     </a-space>
     <a-table
       :loading="loading"
@@ -306,17 +303,17 @@
         <div class="search">
           <a-input
             ref="searchInputRef"
-            :placeholder="$t('common.enter_error', [column.title])"
+            :placeholder="t('common.enter_error', [column.title])"
             :value="selectedKeys[0]"
             @change="(e: any) => setSelectedKeys(e.target?.value ? [e.target?.value] : [])"
             @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
           />
           <div class="search-option">
             <a-button size="small" @click="handleReset(clearFilters)">
-              {{ $t('common.reset') }}
+              {{ t('common.reset') }}
             </a-button>
             <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
-              {{ $t('common.search') }}
+              {{ t('common.search') }}
             </a-button>
           </div>
         </div>
@@ -336,12 +333,12 @@
         </template>
         <template v-if="column.key === 'componentNum'">
           <span :title="record.componentNum">
-            {{ `${record.componentNum} ${$t('host.component_count_quantifier')}` }}
+            {{ `${record.componentNum} ${t('host.component_count_quantifier')}` }}
           </span>
         </template>
         <template v-if="column.key === 'status'">
           <svg-icon style="margin-left: 0" :name="hostStatus[record.status].toLowerCase()" />
-          <span>{{ $t(`common.${hostStatus[record.status].toLowerCase()}`) }}</span>
+          <span>{{ t(`common.${hostStatus[record.status].toLowerCase()}`) }}</span>
         </template>
         <template v-if="column.key === 'operation'">
           <button-group
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
index f03d078d4..6321c6fec 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
@@ -18,8 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onUnmounted, ref, shallowRef, toRefs, watch } from 'vue'
-  import { useI18n } from 'vue-i18n'
   import { Empty } from 'ant-design-vue'
   import { formatFromByte } from '@/utils/storage.ts'
   import { usePngImage } from '@/utils/tools'
@@ -30,12 +28,10 @@
   import { getComponentsByHost } from '@/api/hosts'
   import { Command } from '@/api/command/types'
   import { getHostMetricsInfo } from '@/api/metrics'
-  import { useIntervalFn } from '@vueuse/core'
 
-  import GaugeChart from '@/components/charts/gauge-chart.vue'
-  import CategoryChart from '@/components/charts/category-chart.vue'
+  import GaugeChart from '@/features/metric/gauge-chart.vue'
+  import CategoryChart from '@/features/metric/category-chart.vue'
 
-  import type { MenuItem } from '@/store/menu/types'
   import type { HostStatusType, HostVO } from '@/api/hosts/types.ts'
   import type { ClusterStatusType } from '@/api/cluster/types.ts'
   import type { ComponentVO } from '@/api/component/types.ts'
@@ -97,7 +93,7 @@
   const detailKeys = computed((): (keyof HostVO)[] => Object.keys(baseConfig.value))
   const noChartData = computed(() => Object.values(chartData.value).length === 0)
 
-  const handleHostOperate = (item: MenuItem, component: ComponentVO) => {
+  const handleHostOperate = (item: any, component: ComponentVO) => {
     const { serviceName } = component
     const installedServiceMap = Object.values(serviceStore.serviceMap)
       .flat()
@@ -174,14 +170,14 @@
       <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" style="display: flex; flex-direction: column; gap: 24px">
         <div class="base-info">
           <div class="box-title">
-            <a-typography-text strong :content="$t('overview.basic_info')" />
+            <a-typography-text strong :content="t('overview.basic_info')" />
           </div>
           <div>
             <a-descriptions layout="vertical" bordered>
               <a-descriptions-item>
                 <template #label>
                   <div class="desc-sub-label">
-                    <a-typography-text strong :content="$t('overview.detail')" />
+                    <a-typography-text strong :content="t('overview.detail')" />
                   </div>
                 </template>
                 <div class="desc-sub-item-wrp">
@@ -199,7 +195,7 @@
                           :color="CommonStatus[statusColors[hostInfo[base] as ClusterStatusType]]"
                         >
                           <status-dot :color="CommonStatus[statusColors[hostInfo[base] as ClusterStatusType]]" />
-                          {{ hostInfo[base] && $t(`common.${statusColors[hostInfo[base] as ClusterStatusType]}`) }}
+                          {{ hostInfo[base] && t(`common.${statusColors[hostInfo[base] as ClusterStatusType]}`) }}
                         </a-tag>
                         <a-typography-text v-else class="desc-sub-item-desc-column">
                           <span v-if="Object.keys(unitOfBaseConfig).includes(base as string)">
@@ -227,7 +223,7 @@
         <template v-if="componentsFromCurrentHost.size === 0">
           <div class="component-info">
             <div class="box-title">
-              <a-typography-text strong :content="$t('overview.component_info')" />
+              <a-typography-text strong :content="t('overview.component_info')" />
             </div>
             <div class="box-empty">
               <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
@@ -236,7 +232,7 @@
         </template>
         <a-descriptions v-else layout="vertical" bordered :column="1">
           <template #title>
-            <a-typography-text strong :content="$t('overview.component_info')" />
+            <a-typography-text strong :content="t('overview.component_info')" />
           </template>
           <a-descriptions-item v-for="stack in componentsFromCurrentHost.keys()" :key="stack">
             <template #label>
@@ -269,7 +265,7 @@
       </a-col>
       <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="17">
         <div class="box-title">
-          <a-typography-text strong :content="$t('overview.chart')" />
+          <a-typography-text strong :content="t('overview.chart')" />
           <a-space :size="12">
             <div
               v-for="time in timeRanges"
@@ -291,16 +287,12 @@
         <a-row v-else class="box-content">
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart
-                chart-id="chart1"
-                :percent="chartData?.memoryUsageCur"
-                :title="$t('overview.memory_usage')"
-              />
+              <gauge-chart chart-id="chart1" :percent="chartData?.memoryUsageCur" :title="t('overview.memory_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart2" :percent="chartData?.cpuUsageCur" :title="$t('overview.cpu_usage')" />
+              <gauge-chart chart-id="chart2" :percent="chartData?.cpuUsageCur" :title="t('overview.cpu_usage')" />
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
@@ -309,7 +301,7 @@
                 chart-id="chart3"
                 :x-axis-data="chartData?.timestamps"
                 :data="chartData?.memoryUsage"
-                :title="$t('overview.memory_usage')"
+                :title="t('overview.memory_usage')"
               />
             </div>
           </a-col>
@@ -319,7 +311,7 @@
                 chart-id="chart4"
                 :x-axis-data="chartData?.timestamps"
                 :data="chartData?.cpuUsage"
-                :title="$t('overview.cpu_usage')"
+                :title="t('overview.cpu_usage')"
               />
             </div>
           </a-col>
@@ -329,7 +321,7 @@
                 chart-id="chart5"
                 :x-axis-data="chartData?.timestamps"
                 :data="chartData"
-                :title="$t('overview.system_load')"
+                :title="t('overview.system_load')"
                 :formatter="{
                   tooltip: (val) => `${val == null || val == '' ? '--' : val}`,
                   yAxis: (val) => `${val}`
@@ -348,7 +340,7 @@
                 chart-id="chart6"
                 :x-axis-data="chartData?.timestamps"
                 :data="chartData"
-                :title="$t('overview.disk_io')"
+                :title="t('overview.disk_io')"
                 :formatter="{
                   tooltip: (val) => `${val == null || val == '' ? '--' : formatFromByte(val as number, 0)}`,
                   yAxis: (val) => formatFromByte(val as number, 0)
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
index e667fdb33..2d5d3d774 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
@@ -18,13 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, shallowRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { useRouter } from 'vue-router'
   import Service from './service.vue'
-  import Job from '@/components/job/index.vue'
+  import Job from '@/features/job/index.vue'
 
-  import type { TabItem } from '@/components/common/main-card/types'
+  import type { TabItem } from '@/components/base/main-card/types'
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { ClusterVO } from '@/api/cluster/types'
 
@@ -67,7 +64,7 @@
 
 <template>
   <div>
-    <header-card :title="$t('menu.infra')" :show-avatar="false" :desc="$t('infra.info')" :action-groups="actionGroup" />
+    <header-card :title="t('menu.infra')" :show-avatar="false" :desc="t('infra.info')" :action-groups="actionGroup" />
     <main-card v-model:active-key="activeKey" :tabs="tabs">
       <template #tab-item>
         <keep-alive>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
index 3689ec886..1d974a37a 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
@@ -18,18 +18,15 @@
 -->
 
 <script setup lang="ts">
-  import { computed, onActivated, shallowRef, toRefs, useAttrs } from 'vue'
   import { usePngImage } from '@/utils/tools'
-  import { useI18n } from 'vue-i18n'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
   import { useServiceStore } from '@/store/service'
-  import { useRouter } from 'vue-router'
   import { useJobProgress } from '@/store/job-progress'
   import { Empty } from 'ant-design-vue'
 
   import type { ServiceListParams, ServiceStatusType, ServiceVO } from '@/api/service/types'
   import type { GroupItem } from '@/components/common/button-group/types'
-  import type { FilterFormItem } from '@/components/common/form-filter'
+  import type { FilterFormItem } from '@/components/common/form-filter/types'
   import type { Command, CommandRequest } from '@/api/command/types'
 
   type GroupItemActionType = keyof typeof Command | 'More'
@@ -154,15 +151,15 @@
                 <a-tag :color="CommonStatus[statusColors[item.status]]">
                   <div class="header-base-status-inner">
                     <status-dot :color="CommonStatus[statusColors[item.status]]" />
-                    <span class="small">{{ $t(`common.${statusColors[item.status]}`) }}</span>
+                    <span class="small">{{ t(`common.${statusColors[item.status]}`) }}</span>
                   </div>
                 </a-tag>
               </div>
             </div>
             <div class="header-restart-status">
-              <span class="small-gray">{{ `${$t('common.restart')}` }}</span>
+              <span class="small-gray">{{ `${t('common.restart')}` }}</span>
               <status-dot :color="item.restartFlag ? 'error' : 'success'" />
-              <span class="small">{{ `${item.restartFlag ? $t('common.required') : $t('common.not_required')}` }}</span>
+              <span class="small">{{ `${item.restartFlag ? t('common.required') : t('common.not_required')}` }}</span>
             </div>
           </div>
           <div class="item-content" @click.stop>
diff --git a/bigtop-manager-ui/src/pages/error/404.vue b/bigtop-manager-ui/src/pages/error/404.vue
index 07e236a99..a29e5ac01 100644
--- a/bigtop-manager-ui/src/pages/error/404.vue
+++ b/bigtop-manager-ui/src/pages/error/404.vue
@@ -20,7 +20,9 @@
 <script setup lang="ts">
   import { useRouter } from 'vue-router'
 
+  const { t } = useI18n()
   const router = useRouter()
+
   function back() {
     router.replace({
       path: '/'
@@ -29,10 +31,10 @@
 </script>
 
 <template>
-  <a-result status="404" title="404" :sub-title="$t('common.desc_404')">
+  <a-result status="404" title="404" :sub-title="t('common.desc_404')">
     <template #extra>
       <a-button type="primary" @click="back">
-        {{ $t('common.back_home') }}
+        {{ t('common.back_home') }}
       </a-button>
     </template>
   </a-result>
diff --git a/bigtop-manager-ui/src/pages/login/index.vue b/bigtop-manager-ui/src/pages/login/index.vue
index 7c87db83a..fa7f76448 100644
--- a/bigtop-manager-ui/src/pages/login/index.vue
+++ b/bigtop-manager-ui/src/pages/login/index.vue
@@ -18,18 +18,15 @@
 -->
 
 <script setup lang="ts">
-  import { useRouter } from 'vue-router'
-  import { reactive, shallowRef } from 'vue'
   import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
   import { getSalt, getNonce, login } from '@/api/login'
   import { message } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
-  import SelectLang from '@/components/select-lang/login-lang.vue'
+  import LoginLang from '@/features/login-lang/index.vue'
   import { deriveKey } from '@/utils/pbkdf2.ts'
   import { useUserStore } from '@/store/user'
   import { useMenuStore } from '@/store/menu'
 
-  const i18n = useI18n()
+  const { t } = useI18n()
   const userStore = useUserStore()
   const menuStore = useMenuStore()
 
@@ -46,7 +43,7 @@
 
   const submit = async () => {
     submitLoading.value = true
-    const hide = message.loading(i18n.t('login.logging_in'), 0)
+    const hide = message.loading(t('login.logging_in'), 0)
     try {
       await formRef.value?.validate()
       const username = loginModel.username
@@ -75,7 +72,7 @@
       userStore.getUserInfo()
       menuStore.setupMenu()
 
-      message.success(i18n.t('login.login_success'))
+      message.success(t('login.login_success'))
       router.push('/')
     } catch (e) {
       console.warn(e)
@@ -95,9 +92,9 @@
           <div class="login-header-left">
             <img class="login-logo" src="@/assets/logo.svg" alt="logo" />
             <div class="login-title">Bigtop Manager</div>
-            <div class="login-desc">{{ $t('login.desc') }}</div>
+            <div class="login-desc">{{ t('login.desc') }}</div>
           </div>
-          <div class="login-header-right"><select-lang /></div>
+          <div class="login-header-right"><login-lang /></div>
         </div>
         <a-divider class="m-0" />
         <!-- Login box body -->
@@ -109,10 +106,10 @@
           <a-divider class="login-body-divider m-0" type="vertical" />
           <!-- Right side of the login box -->
           <div class="login-body-right">
-            <div class="login-body-right-tips">{{ $t('login.tips') }}</div>
+            <div class="login-body-right-tips">{{ t('login.tips') }}</div>
             <a-form ref="formRef" class="login-body-right-form" :model="loginModel">
               <a-tabs v-model:active-key="loginModel.type" centered>
-                <a-tab-pane key="account" :tab="$t('login.tab_account')" />
+                <a-tab-pane key="account" :tab="t('login.tab_account')" />
               </a-tabs>
               <template v-if="loginModel.type === 'account'">
                 <a-form-item
@@ -120,14 +117,14 @@
                   :rules="[
                     {
                       required: true,
-                      message: $t('login.username_required')
+                      message: t('login.username_required')
                     }
                   ]"
                 >
                   <a-input
                     v-model:value="loginModel.username"
                     allow-clear
-                    :placeholder="$t('login.username_placeholder')"
+                    :placeholder="t('login.username_placeholder')"
                     size="large"
                     @press-enter="submit"
                   >
@@ -141,14 +138,14 @@
                   :rules="[
                     {
                       required: true,
-                      message: $t('login.password_required')
+                      message: t('login.password_required')
                     }
                   ]"
                 >
                   <a-input-password
                     v-model:value="loginModel.password"
                     allow-clear
-                    :placeholder="$t('login.password_placeholder')"
+                    :placeholder="t('login.password_placeholder')"
                     size="large"
                     @press-enter="submit"
                   >
@@ -160,11 +157,11 @@
               </template>
               <div class="login-body-right-form-bottom">
                 <a-checkbox v-model:checked="loginModel.remember">
-                  {{ $t('login.remember_me') }}
+                  {{ t('login.remember_me') }}
                 </a-checkbox>
               </div>
               <a-button type="primary" block :loading="submitLoading" size="large" @click="submit">
-                {{ $t('login.submit') }}
+                {{ t('login.submit') }}
               </a-button>
             </a-form>
           </div>
diff --git a/bigtop-manager-ui/src/pages/system-manage/llm-config/components/add-llm-item.vue b/bigtop-manager-ui/src/pages/system-manage/llm-config/components/add-llm-item.vue
index 500175ea3..b53c4ee41 100644
--- a/bigtop-manager-ui/src/pages/system-manage/llm-config/components/add-llm-item.vue
+++ b/bigtop-manager-ui/src/pages/system-manage/llm-config/components/add-llm-item.vue
@@ -18,11 +18,8 @@
 -->
 
 <script setup lang="ts">
-  import { computed, ref, watchEffect, shallowRef } from 'vue'
   import { useLlmConfigStore } from '@/store/llm-config/index'
   import { message } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
-  import { storeToRefs } from 'pinia'
 
   import type { FormItem } from '@/components/common/form-builder/types'
   import type { AuthorizedPlatform } from '@/api/llm-config/types'
@@ -160,7 +157,7 @@
     <a-modal
       :open="open"
       :width="480"
-      :title="Mode[mode] && $t(Mode[mode])"
+      :title="Mode[mode] && t(Mode[mode])"
       :mask-closable="false"
       :centered="true"
       :destroy-on-close="true"
@@ -177,7 +174,7 @@
           <a-select
             v-model:value="item[item.field]"
             :options="item.props?.options"
-            :placeholder="$t('common.select_error', [t('llmConfig.model').toLowerCase()])"
+            :placeholder="t('common.select_error', [t('llmConfig.model').toLowerCase()])"
             @change="onPlatformChange"
           ></a-select>
         </template>
@@ -186,15 +183,15 @@
         <footer>
           <a-space size="middle">
             <a-button :disabled="loading" :loading="loadingTest" type="primary" @click="handleTest">
-              {{ $t('llmConfig.test') }}
+              {{ t('llmConfig.test') }}
             </a-button>
           </a-space>
           <a-space size="middle">
             <a-button :disabled="isDisabled" @click="handleCancel">
-              {{ $t('common.cancel') }}
+              {{ t('common.cancel') }}
             </a-button>
             <a-button :disabled="loadingTest" :loading="loading" type="primary" @click="handleOk">
-              {{ $t('common.confirm') }}
+              {{ t('common.confirm') }}
             </a-button>
           </a-space>
         </footer>
diff --git a/bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue b/bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue
index eb75b7d9d..c7f5a2000 100644
--- a/bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue
+++ b/bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue
@@ -18,7 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { computed, shallowRef, toRefs } from 'vue'
   import {
     AuthPlatformStatus,
     LlmLogo,
@@ -74,6 +73,7 @@
     llmConfig: () => ({})
   })
 
+  const { t } = useI18n()
   const emits = defineEmits<Emits>()
   const { llmConfig, isConfig, loading } = toRefs(props)
 
@@ -161,7 +161,7 @@
     emits('createLlmConfig')
   }
 
-  const handleClickAction = ({ key }: { key: ActionKeys }) => {
+  const handleClickAction = ({ key }) => {
     emits('extraActionClick', {
       llmConfig: llmConfig.value as AuthorizedPlatform,
       action: key
@@ -182,7 +182,7 @@
               :content="`${llmConfig?.name}`"
             />
             <a-tag :color="llmStatus?.type">
-              {{ $t(llmStatus?.text || '--') }}
+              {{ t(llmStatus?.text || '--') }}
             </a-tag>
           </div>
           <a-dropdown :trigger="['click']">
@@ -198,9 +198,9 @@
                   :key="key"
                   :danger="danger"
                   :disabled="disabled"
-                  :title="$t(label)"
+                  :title="t(label)"
                 >
-                  {{ $t(label) }}
+                  {{ t(label) }}
                 </a-menu-item>
               </a-menu>
             </template>
@@ -208,7 +208,7 @@
         </div>
         <div class="llm-card-body">
           <a-typography-paragraph v-for="{ label, code } in llmDescriptions" :key="code" class="llm-card-desc">
-            <a-typography-text>{{ $t(label) }}</a-typography-text>
+            <a-typography-text>{{ t(label) }}</a-typography-text>
             <a-typography-paragraph
               type="secondary"
               class="llm-card-desc-text"
@@ -222,7 +222,7 @@
     <template v-else>
       <div class="llm-card-action" @click="handleCreateLlmConfig">
         <svg-icon name="plus-dark" />
-        <a-typography-text type="secondary" :content="$t('llmConfig.add_authorization')" />
+        <a-typography-text type="secondary" :content="t('llmConfig.add_authorization')" />
       </div>
     </template>
   </div>
diff --git a/bigtop-manager-ui/src/pages/system-manage/llm-config/index.vue b/bigtop-manager-ui/src/pages/system-manage/llm-config/index.vue
index 5b0397970..3e9c07c85 100644
--- a/bigtop-manager-ui/src/pages/system-manage/llm-config/index.vue
+++ b/bigtop-manager-ui/src/pages/system-manage/llm-config/index.vue
@@ -18,7 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { onMounted, ref, h } from 'vue'
   import { storeToRefs } from 'pinia'
   import { useLlmConfigStore } from '@/store/llm-config/index'
   import { message, Modal } from 'ant-design-vue'
@@ -26,7 +25,7 @@
   import LlmItem, { type ActionKeys, type ExtraItem } from './components/llm-item.vue'
 
   import addLlmItem from './components/add-llm-item.vue'
-  import SvgIcon from '@/components/common/svg-icon/index.vue'
+  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { AuthorizedPlatform } from '@/api/llm-config/types'
 
@@ -99,7 +98,7 @@
   <a-spin :spinning="loading">
     <div class="llm-config">
       <a-typography-title :level="5">
-        {{ $t('menu.llm_config') }}
+        {{ t('menu.llm_config') }}
       </a-typography-title>
       <div class="llm-config-content">
         <llm-item
diff --git a/bigtop-manager-ui/src/pages/user/profile/index.vue b/bigtop-manager-ui/src/pages/user/profile/index.vue
index 18c636364..6a077f9ab 100644
--- a/bigtop-manager-ui/src/pages/user/profile/index.vue
+++ b/bigtop-manager-ui/src/pages/user/profile/index.vue
@@ -18,14 +18,11 @@
 -->
 
 <script setup lang="ts">
-  import { ref, reactive, watch, onMounted } from 'vue'
   import { FormInstance, message } from 'ant-design-vue'
-  import { storeToRefs } from 'pinia'
-  import { useI18n } from 'vue-i18n'
   import { useUserStore } from '@/store/user'
   import { UserReq } from '@/api/user/types.ts'
 
-  const i18n = useI18n()
+  const { t } = useI18n()
   const userStore = useUserStore()
   const { userVO } = storeToRefs(userStore)
   const editUser = reactive<UserReq>({} as UserReq)
@@ -48,9 +45,9 @@
       await formRef.value?.validate()
       await userStore.updateUserInfo(editUser)
       open.value = false
-      message.success(i18n.t('common.update_success'))
+      message.success(t('common.update_success'))
     } catch (e) {
-      message.error(i18n.t('common.update_fail'))
+      message.error(t('common.update_fail'))
     } finally {
       loading.value = false
     }
@@ -71,25 +68,25 @@
 </script>
 
 <template>
-  <a-descriptions :title="$t('user.profile')" bordered>
+  <a-descriptions :title="t('user.profile')" bordered>
     <template #extra>
       <a-button type="primary" @click="editProfile">
-        {{ $t('common.edit') }}
+        {{ t('common.edit') }}
       </a-button>
     </template>
-    <a-descriptions-item :label="$t('user.username')" span="3">
+    <a-descriptions-item :label="t('user.username')" :span="3">
       {{ userVO?.username }}
     </a-descriptions-item>
-    <a-descriptions-item :label="$t('user.nickname')" span="3">
+    <a-descriptions-item :label="t('user.nickname')" :span="3">
       {{ userVO?.nickname }}
     </a-descriptions-item>
-    <a-descriptions-item :label="$t('common.create_time')" span="3">
+    <a-descriptions-item :label="t('common.create_time')" :span="3">
       {{ userVO?.createTime }}
     </a-descriptions-item>
-    <a-descriptions-item :label="$t('common.update_time')" span="3">
+    <a-descriptions-item :label="t('common.update_time')" :span="3">
       {{ userVO?.updateTime }}
     </a-descriptions-item>
-    <a-descriptions-item :label="$t('common.status')" span="3">
+    <a-descriptions-item :label="t('common.status')" :span="3">
       {{ userVO?.status }}
     </a-descriptions-item>
   </a-descriptions>
@@ -97,7 +94,7 @@
     <a-modal
       v-model:open="open"
       :centered="true"
-      :title="$t('common.edit')"
+      :title="t('common.edit')"
       :mask-closable="false"
       :closable="false"
       @cancel="cancelEdit"
@@ -105,12 +102,12 @@
       <br />
       <a-form ref="formRef" name="profileForm" :model="editUser" layout="vertical">
         <a-form-item
-          :label="$t('user.nickname')"
+          :label="t('user.nickname')"
           name="nickname"
           :rules="[
             {
               required: true,
-              message: $t('user.set_nickname_valid')
+              message: t('user.set_nickname_valid')
             }
           ]"
         >
@@ -119,7 +116,7 @@
       </a-form>
       <template #footer>
         <a-button key="cancel" @click="cancelEdit">
-          {{ $t('common.cancel') }}
+          {{ t('common.cancel') }}
         </a-button>
         <a-button
           key="submit"
@@ -128,7 +125,7 @@
           html-type="submit"
           @click="updateCurrentUser(editUser)"
         >
-          {{ $t('common.submit') }}
+          {{ t('common.submit') }}
         </a-button>
       </template>
 
diff --git a/bigtop-manager-ui/src/plugins/index.ts b/bigtop-manager-ui/src/plugins/index.ts
index b81d6464c..81df8ec17 100644
--- a/bigtop-manager-ui/src/plugins/index.ts
+++ b/bigtop-manager-ui/src/plugins/index.ts
@@ -21,8 +21,8 @@ import type { App } from 'vue'
 import router from '@/router'
 import pinia from '@/store'
 import i18n from '@/locales'
-import Antd, { message } from 'ant-design-vue'
-import components from '@/components/common'
+import { message } from 'ant-design-vue'
+import components from '@/components'
 import directives from '@/directives'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
 
@@ -33,7 +33,6 @@ interface PluginOptions {
 export default {
   install(app: App, options: PluginOptions) {
     app.use(pinia)
-    app.use(Antd)
     app.use(router)
     app.use(i18n)
     app.use(directives)
diff --git a/bigtop-manager-ui/src/router/routes/modules/clusters.ts b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
index 1863d4121..0f9c4432a 100644
--- a/bigtop-manager-ui/src/router/routes/modules/clusters.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
@@ -59,7 +59,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'CreateCluster',
             path: 'create-cluster',
-            component: () => import('@/components/create-cluster/index.vue'),
+            component: () => import('@/features/create-cluster/index.vue'),
             meta: {
               hidden: true
             }
@@ -67,7 +67,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'CreateService',
             path: ':id/create-service/:creationMode?',
-            component: () => import('@/components/create-service/index.vue'),
+            component: () => import('@/features/create-service/index.vue'),
             meta: {
               hidden: true
             }
@@ -75,7 +75,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'ServiceDetail',
             path: ':id/service-detail/:serviceId',
-            component: () => import('@/components/service-management/index.vue'),
+            component: () => import('@/features/service-management/index.vue'),
             meta: {
               hidden: true
             }
@@ -83,7 +83,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'CreateComponent',
             path: ':id/create-component/:serviceId/:creationMode?/:type',
-            component: () => import('@/components/create-service/index.vue'),
+            component: () => import('@/features/create-service/index.vue'),
             meta: {
               hidden: true
             }
@@ -111,7 +111,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'CreateInfraService',
             path: 'create-infra-service/:id/:creationMode',
-            component: () => import('@/components/create-service/index.vue'),
+            component: () => import('@/features/create-service/index.vue'),
             meta: {
               hidden: true,
               activeMenu: '/cluster-manage/infrastructures/list'
@@ -120,7 +120,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'InfraServiceDetail',
             path: 'create-infra-service/service-detail/:id/:serviceId',
-            component: () => import('@/components/service-management/index.vue'),
+            component: () => import('@/features/service-management/index.vue'),
             meta: {
               hidden: true,
               activeMenu: '/cluster-manage/infrastructures/list'
@@ -129,7 +129,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'CreateInfraComponent',
             path: '/create-infra-service/create-infra-component/:id/:serviceId/:creationMode/:type',
-            component: () => import('@/components/create-service/index.vue'),
+            component: () => import('@/features/create-service/index.vue'),
             meta: {
               hidden: true,
               activeMenu: '/cluster-manage/infrastructures/list'
@@ -178,7 +178,7 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'HostCreation',
             path: 'add',
-            component: () => import('@/components/create-host/index.vue'),
+            component: () => import('@/features/create-host/index.vue'),
             meta: {
               hidden: true,
               activeMenu: '/cluster-manage/hosts/list'
diff --git a/bigtop-manager-ui/src/store/ai-assistant/index.ts b/bigtop-manager-ui/src/store/ai-assistant/index.ts
index 35fb6b812..9d4347818 100644
--- a/bigtop-manager-ui/src/store/ai-assistant/index.ts
+++ b/bigtop-manager-ui/src/store/ai-assistant/index.ts
@@ -19,11 +19,10 @@
 
 import dayjs from 'dayjs'
 import * as ai from '@/api/ai-assistant/index'
-import { defineStore, storeToRefs } from 'pinia'
-import { computed, ref, watch } from 'vue'
 import { SenderType } from '@/api/ai-assistant/types'
 import { getRandomFromTimestamp } from '@/utils/tools'
 import { useLlmConfigStore } from '../llm-config'
+
 import type { AxiosProgressEvent, Canceler } from 'axios'
 import type { ChatMessageItem, ChatThread, ReceivedMessageItem, ThreadId } from '@/api/ai-assistant/types'
 
diff --git a/bigtop-manager-ui/src/store/cluster/index.ts b/bigtop-manager-ui/src/store/cluster/index.ts
index 461047e70..4e7eb4193 100644
--- a/bigtop-manager-ui/src/store/cluster/index.ts
+++ b/bigtop-manager-ui/src/store/cluster/index.ts
@@ -17,10 +17,9 @@
  * under the License.
  */
 
-import { computed, ref } from 'vue'
-import { defineStore } from 'pinia'
 import { getCluster, getClusterList } from '@/api/cluster'
 import { useServiceStore } from '@/store/service'
+
 import type { ClusterVO } from '@/api/cluster/types.ts'
 
 export const useClusterStore = defineStore(
diff --git a/bigtop-manager-ui/src/store/create-service/index.ts b/bigtop-manager-ui/src/store/create-service/index.ts
index 1f4132e0d..fddffa069 100644
--- a/bigtop-manager-ui/src/store/create-service/index.ts
+++ b/bigtop-manager-ui/src/store/create-service/index.ts
@@ -16,16 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { computed, ref, shallowRef } from 'vue'
-import { defineStore } from 'pinia'
-import useSteps from '@/composables/use-steps'
 import { useValidations } from './validation'
+import { cloneDeep } from 'lodash-es'
 import { execCommand } from '@/api/command'
+import { createKeyedItem } from '@/utils/tools'
 
 import { type ExpandServiceVO, useStackStore } from '@/store/stack'
 
-import type { ServiceVO } from '@/api/service/types'
-import type { CommandRequest, CommandVO, ComponentCommandReq, ServiceCommandReq } from '@/api/command/types'
+import type { Property, ServiceConfig, ServiceVO } from '@/api/service/types'
+import type {
+  CommandRequest,
+  CommandVO,
+  ComponentCommandReq,
+  ComponentHostReq,
+  ServiceCommandReq,
+  ServiceConfigReq
+} from '@/api/command/types'
 import type { HostVO } from '@/api/hosts/types'
 import type { ComponentVO } from '@/api/component/types'
 
@@ -61,42 +67,46 @@ export const useCreateServiceStore = defineStore(
     const stackStore = useStackStore()
 
     const steps = shallowRef(STEPS_TITLES)
+    const { current, stepsLimit, previousStep, nextStep } = useSteps(steps.value)
 
     const selectedServices = ref<ExpandServiceVO[]>([])
-    const selectedServicesMeta = ref<ExpandServiceVO[]>([])
+    const snapshotSelectedServices = ref<ExpandServiceVO[]>([])
     const createdPayload = ref<CommandVO>({})
+
+    const commandRequest = ref<CommandRequest>({
+      command: 'Add',
+      commandLevel: 'service'
+    })
+
     const stepContext = ref<StepContext>({
       clusterId: 0,
       serviceId: 0,
       creationMode: 'internal'
     })
-    const commandRequest = ref<CommandRequest>({
-      command: 'Add',
-      commandLevel: 'service'
-    })
 
-    const { current, stepsLimit, previousStep, nextStep } = useSteps(steps.value)
+    const creationMode = computed(() => stepContext.value.creationMode)
+    const clusterId = computed(() => (creationMode.value === 'internal' ? stepContext.value.clusterId : 0))
 
     const infraServices = computed(() => stackStore.getServicesByExclude(['bigtop', 'extra']) as ExpandServiceVO[])
-    const excludeInfraServices = computed(() => stackStore.getServicesByExclude(['infra']))
     const infraServiceNames = computed(() => infraServices.value.map((v) => v.name!))
+    const excludeInfraServices = computed(() => stackStore.getServicesByExclude(['infra']))
+
     const processedServices = computed(() => new Set(selectedServices.value.map((v) => v.name)))
-    const creationMode = computed(() => stepContext.value.creationMode)
-    const currentClusterId = computed(() => (creationMode.value === 'internal' ? stepContext.value.clusterId : 0))
 
     const allComps = computed(() => {
       return new Map(
         selectedServices.value.flatMap((s) =>
-          s.components!.map((comp) => {
-            return [comp.name, { serviceName: s.name, serviceDisplayName: s.displayName, serviceId: s.id, ...comp }]
-          })
+          s.components!.map((comp) => [
+            comp.name,
+            { serviceName: s.name, serviceDisplayName: s.displayName, serviceId: s.id, ...comp }
+          ])
         )
       ) as Map<string, CompItem>
     })
 
-    const allCompsMeta = computed(() => {
+    const componentSnapshot = computed(() => {
       return new Map(
-        selectedServicesMeta.value.flatMap((s) =>
+        snapshotSelectedServices.value.flatMap((s) =>
           s.components!.map((comp) => [
             comp.name,
             { serviceName: s.name, serviceDisplayName: s.displayName, serviceId: s.id, ...comp }
@@ -105,31 +115,106 @@ export const useCreateServiceStore = defineStore(
       ) as Map<string, CompItem>
     })
 
+    const snapshotSelectedServiceMap = computed(() =>
+      snapshotSelectedServices.value.reduce(
+        (p, s) => {
+          if (!s.name) {
+            return p
+          }
+
+          if (!p[s.name]) {
+            s.configs && (p[s.name] = s.configs)
+          }
+
+          return p
+        },
+        {} as Record<string, any>
+      )
+    )
+
+    function generateProperty(): Property {
+      return createKeyedItem({
+        name: '',
+        displayName: undefined,
+        value: '',
+        isManual: true,
+        action: 'add'
+      })
+    }
+
     function getServiceMap(services: ServiceVO[]) {
       return new Map(services.map((s) => [s.name as string, s as ExpandServiceVO]))
     }
 
-    function updateSelectedService(partial: ExpandServiceVO[]) {
-      selectedServices.value = partial
+    function injectKeysToConfigs(configs: ServiceConfig[]): ServiceConfig[] {
+      return configs.map((c) => {
+        if (!c.properties) return c
+        return {
+          ...c,
+          properties: c.properties.map((p) => createKeyedItem(p))
+        }
+      })
+    }
+
+    function injectPropertyKeys(data: ExpandServiceVO[]) {
+      return data.map((s) => {
+        if (!s.configs) return s
+
+        return {
+          ...s,
+          configs: injectKeysToConfigs(s.configs)
+        }
+      })
     }
 
-    function setTempData(partial: ExpandServiceVO[]) {
-      selectedServicesMeta.value = JSON.parse(JSON.stringify(partial))
+    function updateSelectedService(data: ExpandServiceVO[], updateSnapshot = false) {
+      selectedServices.value = injectPropertyKeys(data)
+
+      if (updateSnapshot) {
+        snapshotSelectedServices.value = cloneDeep(toRaw(data))
+      }
     }
 
-    function setStepContext(partial: StepContext) {
-      stepContext.value = partial
+    function setStepContext(data: StepContext) {
+      stepContext.value = data
     }
 
     function updateInstalledStatus(state: string) {
       createdPayload.value.state = state
     }
 
+    function generateConfigsMap(arr: ServiceConfig[]): Record<string, Record<string, any>> {
+      const treeMap: Record<string, Record<string, any>> = {}
+
+      for (const { name, properties } of arr) {
+        if (!name) continue
+
+        const propMap: Record<string, Property> = {}
+
+        for (const prop of properties ?? []) {
+          if (prop.isManual) continue
+          const key = prop.name
+          propMap[key] = {
+            name: prop.name,
+            value: prop.value,
+            __key: prop.__key,
+            ...(prop.id !== undefined && { id: prop.id }),
+            ...(prop.displayName !== undefined && { displayName: prop.displayName })
+          }
+        }
+
+        treeMap[name] = propMap
+      }
+
+      return treeMap
+    }
+
     async function confirmServiceDependencyAction(type: 'add' | 'remove', preSelectedService: ExpandServiceVO) {
       const { requiredServices } = preSelectedService
       if (!requiredServices && type === 'add') {
         return [preSelectedService]
       }
+
       const valid = validations.validServiceFromInfra(preSelectedService, requiredServices!, infraServiceNames.value)
       if (type === 'add' && creationMode.value === 'internal' && valid) {
         return []
@@ -210,16 +295,70 @@ export const useCreateServiceStore = defineStore(
       return { success: true }
     }
 
-    function formatServiceData(services: ExpandServiceVO[]) {
-      return services.map((service) => ({
-        serviceName: service.name,
-        installed: service.isInstalled === undefined ? false : service.isInstalled,
-        componentHosts: (service.components || []).map((component) => ({
-          componentName: component.name,
-          hostnames: (component.hosts || []).map((host: HostVO) => host.hostname)
-        })),
-        configs: service.configs
-      })) as ServiceCommandReq[]
+    const getDiffConfigs = (configs: ServiceConfig[], snapshotConfigs: ServiceConfig[]) => {
+      const configMap = generateConfigsMap(snapshotConfigs)
+      const filterConfig = [] as ServiceConfig[]
+
+      for (const c of configs) {
+        const { name: configName, id } = c
+        if (!configName || !configMap[configName]) continue
+        const oldPropsMap = configMap[configName]
+
+        const diffProps = (c.properties ?? []).filter((prop) => {
+          if (prop.name === '') return false
+
+          if (prop.action === 'delete' || prop.action === 'add') return true
+
+          const oldProp = oldPropsMap[prop.name]
+          return oldProp && oldProp.value !== prop.value
+        })
+
+        if (diffProps.length > 0) {
+          filterConfig.push({
+            id,
+            name: configName,
+            properties: diffProps.map(({ name, value, action }) => ({ name, value, action: action ?? 'update' }))
+          })
+        }
+      }
+
+      return filterConfig
+    }
+
+    function extractComponentHosts(components: ComponentVO[]) {
+      return components.map((component) => ({
+        componentName: component.name,
+        hostnames: (component.hosts ?? []).map((host) => host.hostname)
+      })) as ComponentHostReq[]
+    }
+
+    /**
+     * Get modified configuration diffs for uninstalled services.
+     *
+     * @param services - Uninstalled services to be checked for config changes
+     * @returns A list of services with config differences to be sent to backend
+     */
+    function getUninstalledConfigDiffs(services: ExpandServiceVO[]) {
+      const diffs: ServiceCommandReq[] = []
+
+      for (const service of services) {
+        const { name, isInstalled, configs, components } = service
+        if (isInstalled || !name || !configs) continue
+
+        const snapshot = snapshotSelectedServiceMap.value[name]
+        if (!snapshot) continue
+
+        const configDiffs = getDiffConfigs(configs, snapshot)
+
+        diffs.push({
+          serviceName: name,
+          installed: false,
+          componentHosts: extractComponentHosts(components ?? []),
+          configs: configDiffs as ServiceConfigReq[]
+        })
+      }
+
+      return diffs
     }
 
     function formatComponentData(components: Map<string, CompItem>) {
@@ -244,9 +383,9 @@ export const useCreateServiceStore = defineStore(
 
     async function createService() {
       try {
-        commandRequest.value.serviceCommands = formatServiceData(selectedServices.value)
-        createdPayload.value = await execCommand({ ...commandRequest.value, clusterId: currentClusterId.value })
-        Object.assign(createdPayload.value, { clusterId: currentClusterId.value })
+        commandRequest.value.serviceCommands = getUninstalledConfigDiffs(toRaw(selectedServices.value))
+        createdPayload.value = await execCommand({ ...commandRequest.value, clusterId: clusterId.value })
+        Object.assign(createdPayload.value, { clusterId: clusterId.value })
         return true
       } catch (error) {
         console.log('error :>> ', error)
@@ -258,8 +397,8 @@ export const useCreateServiceStore = defineStore(
       try {
         commandRequest.value.commandLevel = 'component'
         commandRequest.value.componentCommands = formatComponentData(allComps.value)
-        createdPayload.value = await execCommand({ ...commandRequest.value, clusterId: currentClusterId.value })
-        Object.assign(createdPayload.value, { clusterId: currentClusterId.value })
+        createdPayload.value = await execCommand({ ...commandRequest.value, clusterId: clusterId.value })
+        Object.assign(createdPayload.value, { clusterId: clusterId.value })
         return true
       } catch (error) {
         console.log('error :>> ', error)
@@ -270,7 +409,7 @@ export const useCreateServiceStore = defineStore(
     function $reset() {
       current.value = 0
       selectedServices.value = []
-      selectedServicesMeta.value = []
+      snapshotSelectedServices.value = []
       createdPayload.value = {}
       stepContext.value = {
         clusterId: 0,
@@ -294,15 +433,17 @@ export const useCreateServiceStore = defineStore(
       nextStep,
       previousStep,
       allComps,
-      allCompsMeta,
+      componentSnapshot,
       updateSelectedService,
       updateInstalledStatus,
       setStepContext,
-      setTempData,
       confirmServiceDependencyAction,
       setComponentHosts,
       createService,
       createdPayload,
+      generateProperty,
+      getDiffConfigs,
+      injectKeysToConfigs,
       attachComponentToService,
       $reset,
       validCardinality: validations.validCardinality
diff --git a/bigtop-manager-ui/src/store/create-service/validation.ts b/bigtop-manager-ui/src/store/create-service/validation.ts
index 1501a9f2e..c2a6496fc 100644
--- a/bigtop-manager-ui/src/store/create-service/validation.ts
+++ b/bigtop-manager-ui/src/store/create-service/validation.ts
@@ -18,10 +18,9 @@
  */
 
 import { message, Modal } from 'ant-design-vue'
-import { h } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useServiceStore } from '@/store/service'
-import SvgIcon from '@/components/common/svg-icon/index.vue'
+import SvgIcon from '@/components/base/svg-icon/index.vue'
+
 import type { ExpandServiceVO } from '@/store/stack'
 
 export function useValidations() {
diff --git a/bigtop-manager-ui/src/store/index.ts b/bigtop-manager-ui/src/store/index.ts
index bdccf194d..8a0338998 100644
--- a/bigtop-manager-ui/src/store/index.ts
+++ b/bigtop-manager-ui/src/store/index.ts
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 const pinia = createPinia()
diff --git a/bigtop-manager-ui/src/store/job-progress/index.ts b/bigtop-manager-ui/src/store/job-progress/index.ts
index af92c4e47..65437b9a7 100644
--- a/bigtop-manager-ui/src/store/job-progress/index.ts
+++ b/bigtop-manager-ui/src/store/job-progress/index.ts
@@ -18,15 +18,12 @@
  */
 
 import { notification, Progress, Avatar, Button, Modal } from 'ant-design-vue'
-import { computed, getCurrentInstance, h, reactive, shallowRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { defineStore } from 'pinia'
 import { useClusterStore } from '@/store/cluster'
 import { execCommand } from '@/api/command'
 import { getJobDetails } from '@/api/job'
 
-import SvgIcon from '@/components/common/svg-icon/index.vue'
-import JobModal from '@/components/job-modal/index.vue'
+import SvgIcon from '@/components/base/svg-icon/index.vue'
+import JobModal from '@/features/job-modal/index.vue'
 
 import { type CommandRequest } from '@/api/command/types'
 import type { JobParams, JobVO } from '@/api/job/types'
diff --git a/bigtop-manager-ui/src/store/llm-config/index.ts b/bigtop-manager-ui/src/store/llm-config/index.ts
index 7044ae02b..b8093dd53 100644
--- a/bigtop-manager-ui/src/store/llm-config/index.ts
+++ b/bigtop-manager-ui/src/store/llm-config/index.ts
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { defineStore } from 'pinia'
-import { computed, ref, shallowRef, watch } from 'vue'
 import * as llmServer from '@/api/llm-config/index'
 
 import type { AuthorizedPlatform, PlatformCredential, UpdateAuthorizedPlatformConfig } from '@/api/llm-config/types'
diff --git a/bigtop-manager-ui/src/store/locale/index.ts b/bigtop-manager-ui/src/store/locale/index.ts
index 385558f5d..e3a22d64c 100644
--- a/bigtop-manager-ui/src/store/locale/index.ts
+++ b/bigtop-manager-ui/src/store/locale/index.ts
@@ -17,14 +17,14 @@
  * under the License.
  */
 
-import { watch, ref, computed } from 'vue'
 import i18n from '@/locales'
 import en_US from 'ant-design-vue/es/locale/en_US'
 import zh_CN from 'ant-design-vue/es/locale/zh_CN'
 import dayjs from 'dayjs'
+
 import 'dayjs/locale/zh-cn'
 import 'dayjs/locale/en'
-import { defineStore } from 'pinia'
+
 import { Locale, defaultLocale } from './types'
 
 export const useLocaleStore = defineStore(
diff --git a/bigtop-manager-ui/src/store/menu/index.ts b/bigtop-manager-ui/src/store/menu/index.ts
index b25dd069f..a0bed71fd 100644
--- a/bigtop-manager-ui/src/store/menu/index.ts
+++ b/bigtop-manager-ui/src/store/menu/index.ts
@@ -17,12 +17,11 @@
  * under the License.
  */
 
-import { computed, nextTick, ref, shallowRef } from 'vue'
-import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
 import { dynamicRoutes as dr } from '@/router/routes/index'
-import { defineStore } from 'pinia'
 import { useClusterStore } from '../cluster'
 
+import type { RouteRecordRaw } from 'vue-router'
+
 export const useMenuStore = defineStore(
   'menu',
   () => {
diff --git a/bigtop-manager-ui/src/store/service/index.ts b/bigtop-manager-ui/src/store/service/index.ts
index 79d3f7830..cca193e77 100644
--- a/bigtop-manager-ui/src/store/service/index.ts
+++ b/bigtop-manager-ui/src/store/service/index.ts
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
 import { getService, getServiceList } from '@/api/service'
 import type { ServiceListParams, ServiceVO } from '@/api/service/types'
 
diff --git a/bigtop-manager-ui/src/store/stack/index.ts b/bigtop-manager-ui/src/store/stack/index.ts
index 32646c413..6fe578a77 100644
--- a/bigtop-manager-ui/src/store/stack/index.ts
+++ b/bigtop-manager-ui/src/store/stack/index.ts
@@ -18,8 +18,6 @@
  */
 
 import { getStacks } from '@/api/stack'
-import { defineStore } from 'pinia'
-import { shallowRef } from 'vue'
 import type { ComponentVO } from '@/api/component/types'
 import type { ServiceConfig, ServiceVO } from '@/api/service/types'
 import type { StackVO } from '@/api/stack/types'
diff --git a/bigtop-manager-ui/src/store/theme/index.ts b/bigtop-manager-ui/src/store/theme/index.ts
index e028713e3..cc3ce1d20 100644
--- a/bigtop-manager-ui/src/store/theme/index.ts
+++ b/bigtop-manager-ui/src/store/theme/index.ts
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
 import { theme as antdTheme } from 'ant-design-vue'
 import { GlobalToken } from 'ant-design-vue/es/theme'
 import { componentsConfigProvider } from './config'
diff --git a/bigtop-manager-ui/src/store/ui/index.ts b/bigtop-manager-ui/src/store/ui/index.ts
index 7f9163f95..b33b1f8d7 100644
--- a/bigtop-manager-ui/src/store/ui/index.ts
+++ b/bigtop-manager-ui/src/store/ui/index.ts
@@ -17,9 +17,6 @@
  * under the License.
  */
 
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-
 export const useUIStore = defineStore(
   'ui',
   () => {
diff --git a/bigtop-manager-ui/src/store/user/index.ts b/bigtop-manager-ui/src/store/user/index.ts
index 4d38f0eef..333eaaeb5 100644
--- a/bigtop-manager-ui/src/store/user/index.ts
+++ b/bigtop-manager-ui/src/store/user/index.ts
@@ -17,9 +17,7 @@
  * under the License.
  */
 
-import { defineStore } from 'pinia'
 import { getCurrentUser, updateUser } from '@/api/user'
-import { shallowRef } from 'vue'
 import { UserReq, UserVO } from '@/api/user/types.ts'
 
 export const useUserStore = defineStore(
diff --git a/bigtop-manager-ui/src/types/global.d.ts b/bigtop-manager-ui/src/types/global.d.ts
index 0e2a61712..4db122813 100644
--- a/bigtop-manager-ui/src/types/global.d.ts
+++ b/bigtop-manager-ui/src/types/global.d.ts
@@ -17,12 +17,10 @@
  * under the License.
  */
 
-import AutoForm from '@/components/common/auto-form/index.vue'
-import { FormBuilder } from '@/components/common/form-builder'
+import FormBuilder from '@/components/common/form-builder/index.vue'
 
 declare global {
   namespace Comp {
-    type AutoFormInstance = InstanceType<typeof AutoForm>
     type FormBuilderInstance = InstanceType<typeof FormBuilder>
   }
 }
diff --git a/bigtop-manager-ui/src/utils/tools.ts b/bigtop-manager-ui/src/utils/tools.ts
index f057e3b7a..620c70fb8 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/bigtop-manager-ui/src/utils/tools.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export const copyText = (text: string): Promise<any> => {
+export function copyText(text: string): Promise<any> {
   if (navigator.clipboard) {
     return navigator.clipboard.writeText(text)
   }
@@ -48,11 +48,11 @@ export const copyText = (text: string): Promise<any> => {
   })
 }
 
-export const usePngImage = (imageName: string): string => {
+export function usePngImage(imageName: string): string {
   return new URL(`../assets/images/${imageName}.png`, import.meta.url).href
 }
 
-export const scrollToBottom = (container: HTMLElement | null) => {
+export function scrollToBottom(container: HTMLElement | null) {
   if (!container) {
     return
   }
@@ -61,17 +61,17 @@ export const scrollToBottom = (container: HTMLElement | null) => {
   })
 }
 
-export const getRandomFromTimestamp = (len: number = 6) => {
+export function getRandomFromTimestamp(len: number = 6) {
   return Date.now().toString().slice(-len)
 }
 
-export const generateRandomId = (length = 8) => {
+export function generateRandomId(length = 8) {
   return Math.random()
     .toString(36)
     .substring(2, length + 2)
 }
 
-export const pick = <T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> => {
+export function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
   return keys.reduce(
     (acc, key) => {
       if (obj.hasOwnProperty(key)) {
@@ -82,3 +82,10 @@ export const pick = <T extends object, K extends keyof T>(obj: T, keys: K[]): Pi
     {} as Pick<T, K>
   )
 }
+
+export function createKeyedItem<T extends object>(item: T): T & { __key: string } {
+  return {
+    ...item,
+    __key: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random()}`
+  }
+}
diff --git a/bigtop-manager-ui/tests/__components__/form-builder.test.ts b/bigtop-manager-ui/tests/__components__/form-builder.test.ts
index a9f81507e..1b44cad18 100644
--- a/bigtop-manager-ui/tests/__components__/form-builder.test.ts
+++ b/bigtop-manager-ui/tests/__components__/form-builder.test.ts
@@ -19,51 +19,49 @@
 
 import { mount } from '@vue/test-utils'
 import { describe, it, expect, vi } from 'vitest'
-import { createI18n, useI18n } from 'vue-i18n'
+import { useI18n } from 'vue-i18n'
 import { computed, defineComponent, h, ref } from 'vue'
+import { i18nPlugins } from '../test-util.ts'
 import FormBuilder from '../../src/components/common/form-builder/index.vue'
 import Antd from 'ant-design-vue'
 
-const i18n = createI18n({
-  legacy: false, // Use Composition API style
-  locale: 'en',
-  messages: {
-    en: {
-      form: {
-        name: 'Translated Name'
-      },
-      common: {
-        select_error: 'Please select ',
-        enter_error: 'Please enter '
-      }
+const i18n = i18nPlugins({
+  en: {
+    form: {
+      name: 'Translated Name'
+    },
+    common: {
+      select_error: 'Please select ',
+      enter_error: 'Please enter '
     }
   }
 })
 
-const wrapper = mount(
-  defineComponent({
-    components: { FormBuilder },
-    setup() {
-      const { t } = useI18n()
-      const formData = ref({ name: 'xxx' })
-      const formRef = ref<InstanceType<typeof FormBuilder>>()
-      const formItems = computed(() => [{ field: 'name', label: t('form.name'), type: 'input', required: true }])
-      return { formRef, formData, formItems }
-    },
-    template: `
+const wrapper = () =>
+  mount(
+    defineComponent({
+      components: { FormBuilder },
+      setup() {
+        const { t } = useI18n()
+        const formData = ref({ name: 'xxx' })
+        const formRef = ref<InstanceType<typeof FormBuilder>>()
+        const formItems = computed(() => [{ field: 'name', label: t('form.name'), type: 'input', required: true }])
+        return { formRef, formData, formItems }
+      },
+      template: `
     <FormBuilder
       ref="formRef"
       v-model="formData"
       :form-items="formItems"
     />
   `
-  }),
-  {
-    global: {
-      plugins: [Antd, i18n]
+    }),
+    {
+      global: {
+        plugins: [Antd, i18n]
+      }
     }
-  }
-)
+  )
 
 describe('FormBuilder.vue', () => {
   it('renders form items based on formItems prop', () => {
@@ -80,7 +78,8 @@ describe('FormBuilder.vue', () => {
       }
     })
 
-    expect(wrapper.findAll('input').length).toBe(3)
+    const inputs = wrapper.findAll('input').filter((input) => input.classes().includes('ant-input'))
+    expect(inputs.length).toBe(wrapper.vm.formItems.filter((item) => item.type === 'input').length)
 
     wrapper.findAll('label').forEach((label, index) => {
       const formItem = wrapper.vm.formItems[index]
@@ -88,15 +87,10 @@ describe('FormBuilder.vue', () => {
         expect(label.text()).toBe(formItem.label)
       }
     })
-
-    wrapper.findAll('input').forEach((input, index) => {
-      const formItem = wrapper.vm.formItems[index]
-      expect(input.attributes('id')).toBe(`form_item_${formItem.field}`)
-    })
   })
 
   it('applies validation rules correctly', async () => {
-    const formRef = wrapper.vm.formRef as InstanceType<typeof FormBuilder>
+    const formRef = wrapper().vm.formRef as InstanceType<typeof FormBuilder>
     expect(formRef?.validate).toBeDefined()
     const validSpy = vi.spyOn(formRef, 'validate')
 
@@ -105,7 +99,7 @@ describe('FormBuilder.vue', () => {
   })
 
   it('resets the form correctly', () => {
-    const formRef = wrapper.vm.formRef as InstanceType<typeof FormBuilder>
+    const formRef = wrapper().vm.formRef as InstanceType<typeof FormBuilder>
     const resetSpy = vi.spyOn(formRef, 'resetForm')
 
     formRef.resetForm()
@@ -113,7 +107,7 @@ describe('FormBuilder.vue', () => {
   })
 
   it('renders translated labels using vue-i18n', () => {
-    const label = wrapper.find('label')
+    const label = wrapper().find('label')
 
     expect(label.exists()).toBe(true)
     expect(label.text()).toBe('Translated Name')
diff --git a/bigtop-manager-ui/tests/__components__/form-filter.test.ts b/bigtop-manager-ui/tests/__components__/form-filter.test.ts
index 22eaf2381..105c1c78e 100644
--- a/bigtop-manager-ui/tests/__components__/form-filter.test.ts
+++ b/bigtop-manager-ui/tests/__components__/form-filter.test.ts
@@ -19,8 +19,11 @@
 
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
+import { i18nPlugins } from '../test-util.ts'
 import FormFilter from '../../src/components/common/form-filter/index.vue'
 
+const i18n = i18nPlugins()
+
 describe('FormFilter.vue', () => {
   const filterItems = [
     {
@@ -45,9 +48,7 @@ describe('FormFilter.vue', () => {
         filterItems
       },
       global: {
-        mocks: {
-          $t: (key: string) => key
-        }
+        plugins: [i18n]
       }
     })
 
@@ -62,9 +63,7 @@ describe('FormFilter.vue', () => {
         filterItems
       },
       global: {
-        mocks: {
-          $t: (key: string) => key
-        }
+        plugins: [i18n]
       }
     })
 
@@ -84,9 +83,7 @@ describe('FormFilter.vue', () => {
         filterItems
       },
       global: {
-        mocks: {
-          $t: (key: string) => key
-        }
+        plugins: [i18n]
       }
     })
 
diff --git a/bigtop-manager-ui/tests/test-util.ts b/bigtop-manager-ui/tests/test-util.ts
index 8adf8e696..7f2568204 100644
--- a/bigtop-manager-ui/tests/test-util.ts
+++ b/bigtop-manager-ui/tests/test-util.ts
@@ -18,6 +18,7 @@
  */
 
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 
 export function withSetup<T>(composable: any, payload?: T) {
   let result: any
@@ -30,3 +31,11 @@ export function withSetup<T>(composable: any, payload?: T) {
   app.mount(document.createElement('div'))
   return [result, app]
 }
+
+export function i18nPlugins(messages?: Record<string, any>) {
+  return createI18n({
+    legacy: false, // Use Composition API style
+    locale: 'en',
+    messages: messages ?? {}
+  })
+}
diff --git a/bigtop-manager-ui/vite.config.ts b/bigtop-manager-ui/vite.config.ts
index d5cc8b4b4..a445724c5 100644
--- a/bigtop-manager-ui/vite.config.ts
+++ b/bigtop-manager-ui/vite.config.ts
@@ -20,11 +20,12 @@
 import { loadEnv, defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'node:path'
-import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
+import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -47,8 +48,12 @@ export default defineConfig(({ mode }) => {
         }
       }),
       Components({
+        dirs: ['src/components', 'src/features'],
         dts: 'src/types/components.d.ts',
         resolvers: [
+          AntDesignVueResolver({
+            importStyle: false // css in js
+          }),
           IconsResolver({
             customCollections: ['svg'],
             componentPrefix: 'icon'
@@ -56,13 +61,14 @@ export default defineConfig(({ mode }) => {
         ]
       }),
       AutoImport({
-        imports: [],
+        imports: ['vue', 'vue-i18n', 'vue-router', '@vueuse/core', 'pinia'],
         resolvers: [
           IconsResolver({
             customCollections: ['svg'],
             componentPrefix: 'icon'
           })
         ],
+        dirs: ['src/composables/**'],
         dts: 'src/types/auto-imports.d.ts'
       })
     ],