feat: setup mange tab switch

Signed-off-by: seven <[email protected]>

src/lang/enUS.ts

@@ -43,7 +43,6 @@ export const enUS = {
   },
   manage: {
     cluster: 'CLUSTER',
-    home: 'HOME',
     nodes: 'NODES',
     shards: 'SHARDS',
     indices: 'INDICES',

src/lang/zhCN.ts

@@ -42,7 +42,7 @@ export const zhCN = {
     },
   },
   manage: {
-    home: '首页',
+    cluster: '集群',
     nodes: '节点',
     shards: '分片',
     indices: '索引',

src/views/manage/components/node-state.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>nodes page</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/manage/components/tool-bar.vue

@@ -22,8 +22,14 @@
         @update:show="handleIndexOpen"
       />
     </div>
-    <n-tabs class="manage-container" type="line" animated justify-content="end">
-      <n-tab-pane :name="$t('manage.home')" :tab="$t('manage.home')" />
+    <n-tabs
+      class="manage-container"
+      type="line"
+      animated
+      justify-content="end"
+      @update:value="handleManageTabChange"
+    >
+      <n-tab-pane :name="$t('manage.cluster')" :tab="$t('manage.cluster')" />
       <n-tab-pane :name="$t('manage.nodes')" :tab="$t('manage.nodes')" />
       <n-tab-pane :name="$t('manage.shards')" :tab="$t('manage.shards')" />
       <n-tab-pane :name="$t('manage.indices')" :tab="$t('manage.indices')" />
@@ -46,6 +52,8 @@ const { fetchIndices, fetchConnections, selectIndex, establishConnection } = con
 const indexLoadingRef = ref(false);
 const connectionLoadingRef = ref(false);
 
+const emits = defineEmits(['switch-manage-tab']);
+
 // build options list
 const indexOptions = computed(() =>
   establishedIndexNames.value.map(name => ({ label: name, value: name })),
@@ -93,6 +101,10 @@ const handleConnectionUpdate = async (connectionName: string) => {
     });
   }
 };
+
+const handleManageTabChange = (tabName: string) => {
+  emits('switch-manage-tab', tabName);
+};
 </script>
 
 <style lang="scss" scoped>

src/views/manage/index.vue

@@ -1,19 +1,31 @@
 <template>
   <div class="manage-container">
-    <tool-bar />
-    <home-state class="state-container" :cluster="established" />
+    <tool-bar @switch-manage-tab="handleManageTabChange" />
+    <cluster-state
+      class="state-container"
+      :cluster="established"
+      v-if="activeTab === $t('manage.cluster')"
+    />
+    <node-state class="state-container" v-if="activeTab === $t('manage.nodes')" />
   </div>
 </template>
 
 <script setup lang="ts">
 import ToolBar from './components/tool-bar.vue';
-import HomeState from './components/home-state.vue';
+import ClusterState from './components/cluster-state.vue';
 import { useConnectionStore } from '../../store';
 import { storeToRefs } from 'pinia';
+import NodeState from './components/node-state.vue';
+import { lang } from '../../lang';
+const activeTab = ref(lang.global.t('manage.cluster'));
 
 const connectionStore = useConnectionStore();
 
 const { established } = storeToRefs(connectionStore);
+
+const handleManageTabChange = (tab: string) => {
+  activeTab.value = tab;
+};
 </script>
 
 <style lang="scss" scoped>