diff --git a/bigtop-manager-ui/src/api/host/index.ts b/bigtop-manager-ui/src/api/host/index.ts
index 57c1ecd34..869d4c91f 100644
--- a/bigtop-manager-ui/src/api/host/index.ts
+++ b/bigtop-manager-ui/src/api/host/index.ts
@@ -17,66 +17,50 @@
  * under the License.
  */
 
-import request from '@/api/request.ts'
 import type { HostListParams, HostParams, HostVO, HostVOList, InstalledStatusVO } from '@/api/host/types'
 import type { ComponentVO } from '@/api/component/types.ts'
+import { get, post, del, put } from '@/api/request-util'
 
-export const getHosts = (params?: HostListParams): Promise<HostVOList> => {
-  return request({
-    method: 'get',
-    url: '/hosts',
-    params
-  })
+export const getHosts = (params?: HostListParams) => {
+  return get<HostVOList>('/hosts', params)
 }
-export const getHost = (pathParams: { id: number }): Promise<HostVO> => {
-  return request({
-    method: 'get',
-    url: `/hosts/${pathParams.id}`
-  })
+
+export const getHost = (pathParams: { id: number }) => {
+  return get<HostVO>(`/hosts/${pathParams.id}`)
 }
 
 export const addHost = (data: HostParams): Promise<HostVO> => {
-  return request({
-    method: 'post',
-    url: '/hosts',
-    data
-  })
+  return post<HostVO>('/hosts', data)
 }
 
 export const installDependencies = (data: HostParams) => {
-  return request({
-    method: 'post',
-    url: '/hosts/install-dependencies',
-    data
-  })
+  return post('/hosts/install-dependencies', data)
 }
 
-export const getInstalledStatus = (): Promise<InstalledStatusVO[]> => {
-  return request({
-    method: 'get',
-    url: '/hosts/installed-status'
-  })
+export const getInstalledStatus = () => {
+  return get<InstalledStatusVO[]>('/hosts/installed-status')
 }
 
-export const updateHost = (data: HostParams): Promise<HostVO[]> => {
-  return request({
-    method: 'put',
-    url: `/hosts/${data.id}`,
-    data
-  })
+export const updateHost = (data: HostParams) => {
+  return put<HostVO[]>(`/hosts/${data.id}`, data)
 }
 
-export const removeHost = (data: { ids: number[] }): Promise<boolean> => {
-  return request({
-    method: 'delete',
-    url: '/hosts/batch',
-    data
-  })
+export const removeHost = (data: { ids: number[] }) => {
+  return del<boolean>('/hosts/batch', { data })
 }
 
 export const getComponentsByHost = (pathParams: { id: number }): Promise<ComponentVO[]> => {
-  return request({
-    method: 'get',
-    url: `/hosts/${pathParams.id}/components`
-  })
+  return get<ComponentVO[]>(`/hosts/${pathParams.id}/components`)
+}
+
+export const startAgent = (pathParams: { id: number }) => {
+  return post<boolean>(`/hosts/${pathParams.id}/start-agent`)
+}
+
+export const restartAgent = (pathParams: { id: number }) => {
+  return post<boolean>(`/hosts/${pathParams.id}/restart-agent`)
+}
+
+export const stopAgent = (pathParams: { id: number }) => {
+  return post<boolean>(`/hosts/${pathParams.id}/stop-agent`)
 }
diff --git a/bigtop-manager-ui/src/composables/use-modal.ts b/bigtop-manager-ui/src/composables/use-modal.ts
new file mode 100644
index 000000000..978e031cd
--- /dev/null
+++ b/bigtop-manager-ui/src/composables/use-modal.ts
@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+
+import SvgIcon from '@/components/base/svg-icon/index.vue'
+import { Modal, ModalFuncProps } from 'ant-design-vue'
+
+interface ConfirmModalProps extends ModalFuncProps {
+  tipText?: string
+}
+
+const DEFAULT_STYLE = { top: '30vh' }
+
+export const useModal = () => {
+  function confirmModal({ tipText, onOk, ...rest }: ConfirmModalProps) {
+    return Modal.confirm({
+      title: () =>
+        h('div', { style: { display: 'flex' } }, [
+          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
+          h('p', tipText ?? '')
+        ]),
+      style: DEFAULT_STYLE,
+      icon: null,
+      ...rest,
+      onOk: async () => {
+        try {
+          if (onOk) {
+            await onOk()
+          }
+        } catch (e) {
+          console.error('Modal onOk error:', e)
+        }
+        return Promise.resolve()
+      }
+    })
+  }
+
+  return {
+    confirmModal,
+    destroyAllModal: Modal.destroyAll
+  }
+}
diff --git a/bigtop-manager-ui/src/composables/use-tab-state.ts b/bigtop-manager-ui/src/composables/use-tab-state.ts
new file mode 100644
index 000000000..b005cf46b
--- /dev/null
+++ b/bigtop-manager-ui/src/composables/use-tab-state.ts
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+
+import { useTabStore } from '@/store/tab-state'
+
+/**
+ * Combined functions that manage tab state
+ * @param pageKey Page unique identifier
+ * @param defaultIndex The default selected tab
+ */
+export function useTabState(pageKey: string, defaultIndex = '0') {
+  const route = useRoute()
+  const tabStore = useTabStore()
+
+  const activeTab = ref(defaultIndex)
+
+  // Initialize tabIndex: Preferred from URL query, followed by store
+  onMounted(() => {
+    const queryTab = route.query.tab as string
+    activeTab.value = queryTab ?? tabStore.getActiveTab(pageKey) ?? activeTab.value
+  })
+
+  watch(activeTab, (val) => {
+    tabStore.setActiveTab(pageKey, val)
+  })
+
+  return { activeTab }
+}
diff --git a/bigtop-manager-ui/src/features/ai-assistant/chat-history.vue b/bigtop-manager-ui/src/features/ai-assistant/chat-history.vue
index 77bcffd5f..20ce4b2c2 100644
--- a/bigtop-manager-ui/src/features/ai-assistant/chat-history.vue
+++ b/bigtop-manager-ui/src/features/ai-assistant/chat-history.vue
@@ -20,9 +20,7 @@
   import { useAiChatStore } from '@/store/ai-assistant'
   import { formatTime } from '@/utils/transform'
   import { EllipsisOutlined } from '@ant-design/icons-vue'
-  import { message, Modal, Empty } from 'ant-design-vue'
-
-  import SvgIcon from '@/components/base/svg-icon/index.vue'
+  import { message, Empty } from 'ant-design-vue'
 
   import type { ChatThread, ThreadId } from '@/api/ai-assistant/types'
 
@@ -39,6 +37,7 @@
   type ThreadOperationHandler = Record<'delete' | 'rename', (thread: ChatThread, idx: number) => void>
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
   const aiChatStore = useAiChatStore()
   const { threads, currThread, threadLimit } = storeToRefs(aiChatStore)
   const props = defineProps<Props>()
@@ -100,14 +99,8 @@
   }
 
   const handleDeleteConfirm = (thread: ChatThread, idx: number) => {
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', t('common.delete_msg'))
-        ]),
-      style: { top: '30vh' },
-      icon: null,
+    confirmModal({
+      tipText: t('common.delete_msg'),
       async onOk() {
         const success = await aiChatStore.deleteChatThread(thread)
         if (success) {
diff --git a/bigtop-manager-ui/src/features/create-cluster/index.vue b/bigtop-manager-ui/src/features/create-cluster/index.vue
index e90875f85..9b3e21327 100644
--- a/bigtop-manager-ui/src/features/create-cluster/index.vue
+++ b/bigtop-manager-ui/src/features/create-cluster/index.vue
@@ -23,8 +23,6 @@
   import { getInstalledStatus, installDependencies } from '@/api/host'
   import { execCommand } from '@/api/command'
 
-  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'
@@ -34,6 +32,7 @@
   import type { ClusterCommandReq, CommandRequest, CommandVO, HostReq } from '@/api/command/types'
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
   const menuStore = useMenuStore()
 
   const compRef = ref<any>()
@@ -201,12 +200,8 @@
 
   onBeforeRouteLeave((_to, _from, next) => {
     if (current.value === stepsLimit.value && !isDone.value) {
-      Modal.confirm({
-        title: () =>
-          h('div', { style: { display: 'flex' } }, [
-            h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-            h('span', t('common.exit_confirm'))
-          ]),
+      confirmModal({
+        tipText: t('common.exit_confirm'),
         content: h('div', { style: { paddingLeft: '36px' } }, t('common.installing_exit_confirm_content')),
         cancelText: t('common.no'),
         style: { top: '30vh' },
diff --git a/bigtop-manager-ui/src/features/create-service/index.vue b/bigtop-manager-ui/src/features/create-service/index.vue
index 2340b7dae..3b2dd63a6 100644
--- a/bigtop-manager-ui/src/features/create-service/index.vue
+++ b/bigtop-manager-ui/src/features/create-service/index.vue
@@ -25,9 +25,10 @@
   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/base/svg-icon/index.vue'
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const route = useRoute()
   const createStore = useCreateServiceStore()
   const { current, stepsLimit, stepContext, selectedServices, createdPayload } = storeToRefs(createStore)
@@ -136,12 +137,8 @@
 
   onBeforeRouteLeave((_to, _from, next) => {
     if (current.value === stepsLimit.value && !isDone.value) {
-      Modal.confirm({
-        title: () =>
-          h('div', { style: { display: 'flex' } }, [
-            h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-            h('span', t('common.exit_confirm'))
-          ]),
+      confirmModal({
+        tipText: t('common.exit_confirm'),
         content: h('div', { style: { paddingLeft: '36px' } }, t('common.installing_exit_confirm_content')),
         cancelText: t('common.no'),
         style: { top: '30vh' },
diff --git a/bigtop-manager-ui/src/features/job/index.vue b/bigtop-manager-ui/src/features/job/index.vue
index 52c7ab642..9003f5ce1 100644
--- a/bigtop-manager-ui/src/features/job/index.vue
+++ b/bigtop-manager-ui/src/features/job/index.vue
@@ -18,10 +18,9 @@
 -->
 
 <script setup lang="ts">
-  import { Modal, TableColumnType, TableProps } from 'ant-design-vue'
+  import { TableColumnType, TableProps } from 'ant-design-vue'
   import { getJobList, getStageList, getTaskList, retryJob } from '@/api/job'
 
-  import SvgIcon from '@/components/base/svg-icon/index.vue'
   import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
 
   import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from '@/api/job/types'
@@ -36,6 +35,8 @@
 
   const POLLING_INTERVAL = 3000
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const clusterInfo = useAttrs() as ClusterVO
   const pollingIntervalId = ref<any>(null)
   const breadcrumbs = ref<BreadcrumbItem[]>([
@@ -227,14 +228,8 @@
   }
 
   const onRetry = (row: JobVO | StageVO | TaskVO) => {
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', t('job.retry'))
-        ]),
-      style: { top: '30vh' },
-      icon: null,
+    confirmModal({
+      tipText: t('job.retry'),
       async onOk() {
         try {
           const state = await retryJob({ jobId: row.id!, clusterId: clusterInfo.id! })
diff --git a/bigtop-manager-ui/src/features/service-management/components.vue b/bigtop-manager-ui/src/features/service-management/components.vue
index cd9b859e5..e0653d350 100644
--- a/bigtop-manager-ui/src/features/service-management/components.vue
+++ b/bigtop-manager-ui/src/features/service-management/components.vue
@@ -18,11 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { message, Modal, type TableColumnType, type TableProps } from 'ant-design-vue'
+  import { message, 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 SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { GroupItem } from '@/components/common/button-group/types'
   import type { ComponentVO } from '@/api/component/types'
@@ -39,7 +38,10 @@
   }
 
   const POLLING_INTERVAL = 3000
+
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const jobProgressStore = useJobProgress()
   const stackStore = useStackStore()
   const route = useRoute()
@@ -245,14 +247,8 @@
   }
 
   const handleDelete = async (row: ComponentVO) => {
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', t('common.delete_msg'))
-        ]),
-      style: { top: '30vh' },
-      icon: null,
+    confirmModal({
+      tipText: t('common.delete_msg'),
       async onOk() {
         try {
           const data = await deleteComponent({ clusterId: attrs.clusterId, id: row.id! })
diff --git a/bigtop-manager-ui/src/features/service-management/components/snapshot-management.vue b/bigtop-manager-ui/src/features/service-management/components/snapshot-management.vue
index ccc8051fc..8e0da7ad2 100644
--- a/bigtop-manager-ui/src/features/service-management/components/snapshot-management.vue
+++ b/bigtop-manager-ui/src/features/service-management/components/snapshot-management.vue
@@ -18,13 +18,12 @@
 -->
 
 <script setup lang="ts">
-  import { message, Modal, TableColumnType } from 'ant-design-vue'
+  import { message, TableColumnType } from 'ant-design-vue'
   import {
     deleteServiceConfigSnapshot,
     getServiceConfigSnapshotsList,
     recoveryServiceConfigSnapshot
   } from '@/api/service'
-  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'
@@ -32,6 +31,8 @@
   type OperationType = 'Restore' | 'Remove'
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const open = ref(false)
   const serviceInfo = shallowRef<ServiceParams>()
 
@@ -98,14 +99,8 @@
 
   const handleTableOperation = (item: GroupItem<OperationType>, payLoad: ServiceConfigSnapshot) => {
     const currOperation = operationMap.value[item.action!]
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', currOperation.modalTitle)
-        ]),
-      icon: null,
-      style: { top: '30vh' },
+    confirmModal({
+      tipText: currOperation.modalTitle,
       async onOk() {
         try {
           const data = await currOperation.api({ ...serviceInfo.value, snapshotId: payLoad.id } as SnapshotRecovery)
diff --git a/bigtop-manager-ui/src/locales/en_US/common.ts b/bigtop-manager-ui/src/locales/en_US/common.ts
index ca428ac4e..6e5f381af 100644
--- a/bigtop-manager-ui/src/locales/en_US/common.ts
+++ b/bigtop-manager-ui/src/locales/en_US/common.ts
@@ -25,6 +25,7 @@ export default {
   exit: 'Exit',
   action: 'Action',
   operation: 'Operation',
+  operate_success: 'Operation successful !',
   status: 'Status',
   healthy: 'Healthy',
   unhealthy: 'Unhealthy',
@@ -43,7 +44,7 @@ export default {
   retry: 'Retry',
   cancel: 'Cancel',
   confirm: 'Confirm',
-  exit_confirm: 'Are you sure you want to exit?',
+  exit_confirm: 'Are you sure you want to exit ?',
   install: 'Install',
   installing: 'Installing...',
   finish: 'Finish',
@@ -69,8 +70,8 @@ export default {
   required: 'Required',
   not_required: 'Not Required',
   progress: 'Progress',
-  status_change_success: 'Status changed successfully',
-  test_success: 'Test successful!',
+  status_change_success: 'Status changed successful !',
+  test_success: 'Test successful !',
   created: 'Created!',
   update_success: 'Updated!',
   update_fail: 'Update fail',
@@ -83,11 +84,11 @@ export default {
   update_time: 'Update Time',
   notification: 'Notification',
   copy: 'Copy',
-  copied: 'Copied!',
+  copied: 'Copied !',
   download: 'Download',
-  copy_fail: 'Copy failed!',
-  delete_success: 'Deleted!',
-  delete_fail: 'Delete failed!',
+  copy_fail: 'Copy failed !',
+  delete_success: 'Deleted !',
+  delete_fail: 'Delete failed !',
   delete_confirm_title: 'Delete Confirm',
   delete_confirm_content: 'Delete will not be recoverable, are you sure you want to delete {0} ?',
   no_options: 'No options',
@@ -95,16 +96,16 @@ export default {
   enter_error: 'Please enter {0}',
   select_error: 'Please select {0}',
   add_error: 'Please add {0}',
-  delete_msg: 'Are you sure you want to delete this?',
-  delete_msgs: 'Are you sure you want to delete these?',
-  restore_msg: 'Are you sure you want to restore this?',
+  delete_msg: 'Are you sure you want to delete this ?',
+  delete_msgs: 'Are you sure you want to delete these ?',
+  restore_msg: 'Are you sure you want to restore this ?',
   delete_empty: 'Please select the records you want to delete.',
   total: 'Total {0} items',
   upload_file: 'Upload file',
-  file_type_error: 'Only text files are allowed!',
-  file_size_error: 'File size cannot exceed 10KB!',
-  upload_success: 'File uploaded successfully!',
-  upload_failed: 'File upload failed!',
+  file_type_error: 'Only text files are allowed !',
+  file_size_error: 'File size cannot exceed 10KB !',
+  upload_success: 'File uploaded successful !',
+  upload_failed: 'File upload failed !',
   password_not_match: 'Passwords do not match.',
   overview: 'Overview',
   user: 'User',
@@ -113,7 +114,7 @@ export default {
   restart: 'Restart {0}',
   stop: 'Stop {0}',
   add: 'Add {0}',
-  success_msg: 'Added successfully',
+  success_msg: 'Added successful !',
   configs: 'Configs',
   more_operations: 'More Operations',
   ok: 'Ok',
@@ -125,7 +126,7 @@ export default {
   selected: 'Selected',
   feature_not_supported: 'Feature not supported yet',
   installing_exit_confirm_content:
-    'Installation is in progress, exiting the page will cause the installation to fail. Are you sure you want to exit?',
+    'Installation is in progress, exiting the page will cause the installation to fail. Are you sure you want to exit ?',
   confirm_action: 'Are you sure you want to {action} {target} ?',
   confirm_comp_action: 'Are you sure you want to {action} selected components ?'
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/host.ts b/bigtop-manager-ui/src/locales/en_US/host.ts
index d982d8721..be92e1376 100644
--- a/bigtop-manager-ui/src/locales/en_US/host.ts
+++ b/bigtop-manager-ui/src/locales/en_US/host.ts
@@ -41,6 +41,8 @@ export default {
   ssh_port: 'SSH Port',
   grpc_port: 'GRPC Port',
   description: 'Description',
+  operate_agent: 'Are you sure you want to {action} agent on {target} ?',
+  agent: 'Agent',
   key_password_not_match: 'Key Passwords do not match.',
   default_agent_path: 'Agent application installed path, default to /opt',
   default_grpc_port: 'Agent application grpc port, default to 8835',
diff --git a/bigtop-manager-ui/src/locales/zh_CN/common.ts b/bigtop-manager-ui/src/locales/zh_CN/common.ts
index 6ebbeae68..77d523aa5 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/common.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/common.ts
@@ -25,6 +25,7 @@ export default {
   exit: '退出',
   action: '操作',
   operation: '操作',
+  operate_success: '操作成功',
   status: '状态',
   healthy: '健康',
   unhealthy: '不健康',
diff --git a/bigtop-manager-ui/src/locales/zh_CN/host.ts b/bigtop-manager-ui/src/locales/zh_CN/host.ts
index 85faf40ee..555285407 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/host.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/host.ts
@@ -41,6 +41,8 @@ export default {
   ssh_port: 'SSH端口',
   grpc_port: 'GRPC端口',
   description: '备注',
+  operate_agent: '确定要{action}主机{target}上的代理吗？',
+  agent: '代理',
   key_password_not_match: '密钥口令不一致。',
   default_agent_path: '代理应用程序安装路径，默认为/opt',
   default_grpc_port: '代理应用程序gRPC端口，默认为8835',
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 dce6adcd2..d360f525d 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/host.vue
@@ -18,13 +18,12 @@
 -->
 
 <script setup lang="ts">
-  import { message, Modal, TableColumnType, TableProps } from 'ant-design-vue'
+  import { message, TableColumnType, TableProps } from 'ant-design-vue'
   import { getHosts } from '@/api/host'
   import * as hostApi from '@/api/host'
 
   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'
@@ -41,6 +40,8 @@
   }
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const router = useRouter()
   const attrs = useAttrs() as ClusterVO
 
@@ -155,14 +156,8 @@
   }
 
   const deleteHost = (ids: number[]) => {
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', ids.length > 1 ? t('common.delete_msgs') : t('common.delete_msg'))
-        ]),
-      style: { top: '30vh' },
-      icon: null,
+    confirmModal({
+      tipText: ids.length > 1 ? t('common.delete_msgs') : t('common.delete_msg'),
       async onOk() {
         try {
           const data = await hostApi.removeHost({ ids })
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 aab76963e..5bb75204f 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -31,16 +31,16 @@
   import type { Command } from '@/api/command/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'
+  import type { ClusterStatusType } from '@/api/cluster/types'
 
   const { t } = useI18n()
   const router = useRouter()
+  const route = useRoute()
   const jobProgressStore = useJobProgress()
   const clusterStore = useClusterStore()
-  const { loading } = storeToRefs(clusterStore)
+  const { loading, currCluster } = storeToRefs(clusterStore)
 
-  const activeKey = ref('1')
-  const clusterInfo = ref<ClusterVO>({})
+  const { activeTab } = useTabState(route.path, '1')
 
   const statusColors = shallowRef<Record<ClusterStatusType, keyof typeof CommonStatusTexts>>({
     1: 'healthy',
@@ -51,7 +51,7 @@
   /**
    * Determines the component to render based on the active tab.
    */
-  const getCompName = computed(() => [Overview, Service, Host, User, Job][parseInt(activeKey.value) - 1])
+  const getCompName = computed(() => [Overview, Service, Host, User, Job][parseInt(activeTab.value) - 1])
 
   const tabs = computed((): TabItem[] => [
     { key: '1', title: t('common.overview') },
@@ -89,14 +89,14 @@
       jobProgressStore.processCommand(
         {
           command: key as keyof typeof Command,
-          clusterId: clusterInfo.value.id,
+          clusterId: currCluster.value.id,
           commandLevel: 'cluster'
         },
         async () => {
           await clusterStore.loadClusters()
-          await clusterStore.getClusterDetail(clusterInfo.value.id!)
+          await clusterStore.getClusterDetail(currCluster.value.id!)
         },
-        { displayName: clusterInfo.value.displayName }
+        { displayName: currCluster.value.displayName }
       )
     } catch (error) {
       console.error('Error processing command:', error)
@@ -104,23 +104,23 @@
   }
 
   const addService: GroupItem['clickEvent'] = () => {
-    router.push({ name: 'CreateService', params: { id: clusterInfo.value.id, creationMode: 'internal' } })
+    router.push({ name: 'CreateService', params: { id: currCluster.value.id, creationMode: 'internal' } })
   }
 </script>
 
 <template>
   <a-spin :spinning="loading">
     <header-card
-      :title="clusterInfo.displayName"
+      :title="currCluster.displayName"
       avatar="cluster"
-      :status="CommonStatus[statusColors[clusterInfo.status as ClusterStatusType]]"
-      :desc="clusterInfo.desc"
+      :status="CommonStatus[statusColors[currCluster.status as ClusterStatusType]]"
+      :desc="currCluster.desc"
       :action-groups="actionGroup"
     />
-    <main-card v-model:active-key="activeKey" :tabs="tabs">
+    <main-card v-model:active-key="activeTab" :tabs="tabs">
       <template #tab-item>
         <keep-alive>
-          <component :is="getCompName" v-bind="clusterInfo" v-model:payload="clusterInfo"></component>
+          <component :is="getCompName" :key="activeTab" v-bind="currCluster" v-model:payload="currCluster"></component>
         </keep-alive>
       </template>
     </main-card>
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 a555330fb..e7c368ee3 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -142,9 +142,7 @@
     resume()
   })
 
-  onDeactivated(() => pause())
-
-  onUnmounted(() => pause())
+  onDeactivated(pause)
 
   watchEffect(() => {
     locateStackWithService.value = stackStore.stacks.filter((item) =>
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 0b8b29baf..a155ba455 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/detail.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/detail.vue
@@ -18,9 +18,8 @@
 -->
 
 <script setup lang="ts">
+  import { getHost, restartAgent, startAgent, stopAgent } from '@/api/host'
   import { message } from 'ant-design-vue'
-
-  import { getHost } from '@/api/host'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
 
   import Overview from './overview.vue'
@@ -29,14 +28,23 @@
   import type { HostStatusType, HostVO } from '@/api/host/types'
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const route = useRoute()
+  const spinning = ref(false)
   const hostInfo = shallowRef<HostVO>({})
-  const loading = ref(false)
+  const apiMap = shallowRef({
+    start: startAgent,
+    restart: restartAgent,
+    stop: stopAgent
+  })
+
   const statusColors = shallowRef<Record<HostStatusType, keyof typeof CommonStatusTexts>>({
     1: 'healthy',
     2: 'unhealthy',
     3: 'unknown'
   })
+
   const actionGroup = computed<GroupItem[]>(() => [
     {
       shape: 'default',
@@ -44,40 +52,53 @@
       text: t('common.more_operations'),
       dropdownMenu: [
         {
-          action: 'Start',
-          text: t('common.start', [t('common.all')])
+          action: 'start',
+          text: t('common.start', [t('host.agent')])
         },
         {
-          action: 'Restart',
-          text: t('common.restart', [t('common.all')])
+          action: 'restart',
+          text: t('common.restart', [t('host.agent')])
         },
         {
-          action: 'Stop',
-          text: t('common.stop', [t('common.all')])
+          action: 'stop',
+          text: t('common.stop', [t('host.agent')])
         }
       ],
-      dropdownMenuClickEvent: (info) => dropdownMenuClick && dropdownMenuClick(info)
+      dropdownMenuClickEvent: ({ key }) => {
+        const action = t(`common.${key.toString()}`).toLowerCase()
+        const tipText = t('host.operate_agent', { action, target: hostInfo.value.hostname })
+        confirmModal({
+          tipText,
+          async onOk() {
+            await handleOperateAgent(key as string)
+          }
+        })
+      }
     }
   ])
 
-  const dropdownMenuClick: GroupItem['dropdownMenuClickEvent'] = async () => {
-    message.error(t('common.feature_not_supported'))
+  const handleOperateAgent = async (action: string) => {
+    try {
+      const res = await apiMap.value[`${action}`]({ id: hostInfo.value.id })
+      if (res) {
+        message.success(t('common.operate_success'))
+      }
+    } finally {
+      setupHostInfo()
+    }
   }
 
   const setupHostInfo = async () => {
     try {
-      loading.value = true
-      const hostId = route.query.hostId
-      const clusterId = route.query.clusterId
+      const { hostId, clusterId } = route.query
+      spinning.value = true
       const data = await getHost({ id: Number(hostId) })
       hostInfo.value = {
         ...data,
         clusterId
       }
-    } catch (error) {
-      console.log(error)
     } finally {
-      loading.value = false
+      spinning.value = false
     }
   }
 
@@ -87,7 +108,7 @@
 </script>
 
 <template>
-  <a-spin :spinning="loading">
+  <a-spin :spinning="spinning">
     <header-card
       :title="hostInfo.hostname"
       avatar="host"
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 bfe2de656..2ece464c2 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/index.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { message, Modal, TableColumnType, TableProps } from 'ant-design-vue'
+  import { message, TableColumnType, TableProps } from 'ant-design-vue'
 
   import { useClusterStore } from '@/store/cluster'
   import * as hostApi from '@/api/host'
@@ -26,7 +26,6 @@
   import useBaseTable from '@/composables/use-base-table'
   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'
@@ -43,6 +42,8 @@
   }
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const router = useRouter()
   const clusterStore = useClusterStore()
   const searchInputRef = ref()
@@ -135,15 +136,8 @@
   ])
 
   const operations = computed((): GroupItem[] => [
-    {
-      text: 'edit',
-      clickEvent: (_item, args) => editHost(args)
-    },
-    {
-      text: 'remove',
-      danger: true,
-      clickEvent: (_item, args) => deleteHost([args.id])
-    }
+    { text: 'edit', clickEvent: (_item, args) => editHost(args) },
+    { text: 'remove', danger: true, clickEvent: (_item, args) => deleteHost([args.id]) }
   ])
 
   const { loading, dataSource, filtersParams, paginationProps, onChange } = useBaseTable<HostVO>({
@@ -214,19 +208,16 @@
 
   const editHost = (row: HostVO) => {
     const cluster = Object.values(clusterStore.clusterMap).find((v) => v.name === row.clusterName)
-    const formatHost = { ...row, displayName: row.clusterDisplayName, clusterId: cluster?.id }
-    hostCreateRef.value?.handleOpen('EDIT', formatHost)
+    hostCreateRef.value?.handleOpen('EDIT', {
+      ...row,
+      displayName: row.clusterDisplayName,
+      clusterId: cluster?.id
+    })
   }
 
   const deleteHost = (ids: number[]) => {
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', ids.length > 1 ? t('common.delete_msgs') : t('common.delete_msg'))
-        ]),
-      style: { top: '30vh' },
-      icon: null,
+    confirmModal({
+      tipText: ids.length > 1 ? t('common.delete_msgs') : t('common.delete_msg'),
       async onOk() {
         try {
           const data = await hostApi.removeHost({ ids })
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 9946cb31a..ed8ef9e77 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
@@ -93,7 +93,7 @@
   const detailKeys = computed((): (keyof HostVO)[] => Object.keys(baseConfig.value))
   const noChartData = computed(() => Object.values(chartData.value).length === 0)
 
-  const handleHostOperate = (item: any, component: ComponentVO) => {
+  const handleComponentOperate = (item: any, component: ComponentVO) => {
     const { serviceName } = component
     const installedServiceMap = Object.values(serviceStore.serviceMap)
       .flat()
@@ -252,7 +252,7 @@
                   <svg-icon name="more" style="margin: 0" />
                 </a-button>
                 <template #overlay>
-                  <a-menu @click="handleHostOperate($event, comp)">
+                  <a-menu @click="handleComponentOperate($event, comp)">
                     <a-menu-item v-for="[operate, text] of Object.entries(componentOperates)" :key="operate">
                       <span>{{ text }}</span>
                     </a-menu-item>
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 2d5d3d774..6150d92af 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
@@ -27,20 +27,14 @@
 
   const { t } = useI18n()
   const router = useRouter()
-  const activeKey = ref('1')
-  const currCluster = shallowRef<ClusterVO>({
-    id: 0
-  })
+  const route = useRoute()
+  const { activeTab } = useTabState(route.path, '1')
+
+  const currCluster = shallowRef<ClusterVO>({ id: 0 })
 
   const tabs = computed((): TabItem[] => [
-    {
-      key: '1',
-      title: t('common.service')
-    },
-    {
-      key: '2',
-      title: t('common.job')
-    }
+    { key: '1', title: t('common.service') },
+    { key: '2', title: t('common.job') }
   ])
 
   const actionGroup = computed<GroupItem[]>(() => [
@@ -52,10 +46,7 @@
     }
   ])
 
-  const getCompName = computed(() => {
-    const components = [Service, Job]
-    return components[parseInt(activeKey.value) - 1]
-  })
+  const getCompName = computed(() => [Service, Job][parseInt(activeTab.value) - 1])
 
   const addService: GroupItem['clickEvent'] = () => {
     router.push({ name: 'CreateInfraService', params: { id: 0, creationMode: 'public' } })
@@ -65,10 +56,10 @@
 <template>
   <div>
     <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">
+    <main-card v-model:active-key="activeTab" :tabs="tabs">
       <template #tab-item>
         <keep-alive>
-          <component :is="getCompName" v-bind="currCluster"></component>
+          <component :is="getCompName" :key="activeTab" v-bind="currCluster"></component>
         </keep-alive>
       </template>
     </main-card>
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 3e9c07c85..79b934d8d 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
@@ -20,16 +20,17 @@
 <script setup lang="ts">
   import { storeToRefs } from 'pinia'
   import { useLlmConfigStore } from '@/store/llm-config/index'
-  import { message, Modal } from 'ant-design-vue'
+  import { message } from 'ant-design-vue'
   import { useI18n } from 'vue-i18n'
   import LlmItem, { type ActionKeys, type ExtraItem } from './components/llm-item.vue'
 
   import addLlmItem from './components/add-llm-item.vue'
-  import SvgIcon from '@/components/base/svg-icon/index.vue'
 
   import type { AuthorizedPlatform } from '@/api/llm-config/types'
 
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const llmConfigStore = useLlmConfigStore()
   const addLlmItemRef = ref<InstanceType<typeof addLlmItem> | null>(null)
   const { loading, authorizedPlatforms } = storeToRefs(llmConfigStore)
@@ -71,14 +72,8 @@
   }
 
   const handleDeleteLlmConfig = (authId: string | number) => {
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', t('common.delete_msg'))
-        ]),
-      icon: null,
-      style: { top: '30vh' },
+    confirmModal({
+      tipText: t('common.delete_msg'),
       async onOk() {
         const success = await llmConfigStore.deleteAuthPlatform(authId)
         if (success) {
diff --git a/bigtop-manager-ui/src/store/create-service/validation.ts b/bigtop-manager-ui/src/store/create-service/validation.ts
index 591463c16..5db870f96 100644
--- a/bigtop-manager-ui/src/store/create-service/validation.ts
+++ b/bigtop-manager-ui/src/store/create-service/validation.ts
@@ -19,11 +19,12 @@
 
 import { message, Modal } from 'ant-design-vue'
 import { useServiceStore } from '@/store/service'
-import SvgIcon from '@/components/base/svg-icon/index.vue'
 import { useStackStore, type ExpandServiceVO } from '@/store/stack'
 
 export function useValidations() {
   const { t } = useI18n()
+  const { confirmModal } = useModal()
+
   const serviceStore = useServiceStore()
   const stackStore = useStackStore()
 
@@ -72,16 +73,10 @@ export function useValidations() {
     const content = type === 'add' ? 'dependencies_add_msg' : 'dependencies_remove_msg'
 
     return new Promise((resolve) => {
-      Modal.confirm({
-        icon: null,
-        title: () =>
-          h('div', { style: { display: 'flex' } }, [
-            h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-            h('p', t(`service.${content}`, [targetService.displayName, requireds.displayName]))
-          ]),
+      confirmModal({
+        tipText: t(`service.${content}`, [targetService.displayName, requireds.displayName]),
         cancelText: t('common.no'),
         okText: t('common.yes'),
-        style: { top: '30vh' },
         onOk: () => resolve(true),
         onCancel: () => {
           Modal.destroyAll()
diff --git a/bigtop-manager-ui/src/store/job-progress/index.ts b/bigtop-manager-ui/src/store/job-progress/index.ts
index 564ae05b8..59c6342db 100644
--- a/bigtop-manager-ui/src/store/job-progress/index.ts
+++ b/bigtop-manager-ui/src/store/job-progress/index.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { notification, Progress, Avatar, Button, Modal } from 'ant-design-vue'
+import { notification, Progress, Avatar, Button } from 'ant-design-vue'
 import { useClusterStore } from '@/store/cluster'
 import { execCommand } from '@/api/command'
 import { getJobDetails } from '@/api/job'
@@ -45,6 +45,8 @@ type JobStageProgress = Record<StatusType, () => JobStageProgressItem>
 
 export const useJobProgress = defineStore('job-progress', () => {
   const { t } = useI18n()
+  const { confirmModal, destroyAllModal } = useModal()
+
   const instance = getCurrentInstance()
   const clusterStore = useClusterStore()
   const progressMap = reactive<Map<number, JobStageProgressItem>>(new Map())
@@ -264,14 +266,8 @@ export const useJobProgress = defineStore('job-progress', () => {
       }
     }
 
-    Modal.confirm({
-      title: () =>
-        h('div', { style: { display: 'flex' } }, [
-          h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-          h('p', t(`${title}`, target === '' ? { action } : { action, target }))
-        ]),
-      style: { top: '30vh' },
-      icon: null,
+    confirmModal({
+      tipText: t(`${title}`, target === '' ? { action } : { action, target }),
       async onOk() {
         try {
           const { id: jobId, name } = await execCommand(params)
@@ -287,9 +283,9 @@ export const useJobProgress = defineStore('job-progress', () => {
   }
 
   const onClick = (execRes: CommandRes) => {
-    Modal.destroyAll()
-    Modal.confirm({
-      icon: null,
+    destroyAllModal()
+    confirmModal({
+      title: undefined,
       width: '980px',
       zIndex: 9999,
       mask: false,
diff --git a/bigtop-manager-ui/src/store/service/index.ts b/bigtop-manager-ui/src/store/service/index.ts
index 929489501..42d98b96e 100644
--- a/bigtop-manager-ui/src/store/service/index.ts
+++ b/bigtop-manager-ui/src/store/service/index.ts
@@ -18,9 +18,7 @@
  */
 
 import { getService, getServiceList, removeService as remove } from '@/api/service'
-import { Modal, message } from 'ant-design-vue'
-
-import SvgIcon from '@/components/base/svg-icon/index.vue'
+import { message } from 'ant-design-vue'
 
 import type { ServiceListParams, ServiceVO } from '@/api/service/types'
 
@@ -28,6 +26,8 @@ export const useServiceStore = defineStore(
   'service',
   () => {
     const { t } = useI18n()
+    const { confirmModal } = useModal()
+
     const services = ref<ServiceVO[]>([])
     const serviceMap = ref<Record<string, (ServiceVO & { clusterId: number })[]>>({})
     const total = ref(0)
@@ -60,11 +60,7 @@ export const useServiceStore = defineStore(
     }
 
     const getServiceDetail = async (clusterId: number, serviceId: number) => {
-      try {
-        return await getService({ clusterId, id: serviceId })
-      } catch (error) {
-        console.log(error)
-      }
+      return await getService({ clusterId, id: serviceId })
     }
 
     const getServicesOfInfra = async () => {
@@ -73,11 +69,7 @@ export const useServiceStore = defineStore(
 
     const getInstalledNamesOrIdsOfServiceByKey = (key: string, flag: 'names' | 'ids' = 'names') => {
       return Object.values(serviceMap.value[key] || {}).map((service: ServiceVO) => {
-        if (flag === 'ids') {
-          return service.id
-        } else {
-          return service.name
-        }
+        return flag === 'ids' ? service.id : service.name
       })
     }
 
@@ -91,26 +83,16 @@ export const useServiceStore = defineStore(
       }
     }
 
-    async function removeService(service: ServiceVO, clusterId: number, callBack: (...args: any) => void) {
-      const actionI18n = t('common.remove').toLowerCase()
+    function removeService(service: ServiceVO, clusterId: number, callBack: (...args: any) => void) {
       const target = service.displayName ?? service.name
-      return Modal.confirm({
-        title: () =>
-          h('div', { style: { display: 'flex' } }, [
-            h(SvgIcon, { name: 'unknown', style: { width: '24px', height: '24px' } }),
-            h('p', t('common.confirm_action', { action: actionI18n, target }))
-          ]),
-        style: { top: '30vh' },
-        icon: null,
+      const tipText = t('common.confirm_action', { action: t('common.remove').toLowerCase(), target })
+      return confirmModal({
+        tipText,
         async onOk() {
-          try {
-            const res = await remove({ clusterId, id: service.id! })
-            if (res) {
-              message.success(t('common.delete_success'))
-              return Promise.resolve(callBack())
-            }
-          } catch (error) {
-            console.log('error :>> ', error)
+          const res = await remove({ clusterId, id: service.id! })
+          if (res) {
+            message.success(t('common.delete_success'))
+            return Promise.resolve(callBack())
           }
         }
       })
diff --git a/bigtop-manager-ui/src/store/tab-state/index.ts b/bigtop-manager-ui/src/store/tab-state/index.ts
new file mode 100644
index 000000000..6b940e6a1
--- /dev/null
+++ b/bigtop-manager-ui/src/store/tab-state/index.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 const useTabStore = defineStore('tab', () => {
+  const activeTabs = ref<Record<string, string>>({})
+
+  function setActiveTab(pageKey: string, tabIndex: string) {
+    activeTabs.value[pageKey] = tabIndex
+  }
+
+  function getActiveTab(pageKey: string) {
+    return activeTabs.value[pageKey]
+  }
+
+  return { activeTabs, setActiveTab, getActiveTab }
+})