From 09cf8252ac66670ee2c85d53010db651b9c1c6f7 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Fri, 12 Jul 2024 20:49:15 +0800
Subject: [PATCH] feat: setup mange tab switch

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 src/lang/enUS.ts                               |  1 -
 src/lang/zhCN.ts                               |  2 +-
 .../{home-state.vue => cluster-state.vue}      |  0
 src/views/manage/components/node-state.vue     |  7 +++++++
 src/views/manage/components/tool-bar.vue       | 16 ++++++++++++++--
 src/views/manage/index.vue                     | 18 +++++++++++++++---
 6 files changed, 37 insertions(+), 7 deletions(-)
 rename src/views/manage/components/{home-state.vue => cluster-state.vue} (100%)
 create mode 100644 src/views/manage/components/node-state.vue

diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 333be34..8c289f5 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -43,7 +43,6 @@ export const enUS = {
   },
   manage: {
     cluster: 'CLUSTER',
-    home: 'HOME',
     nodes: 'NODES',
     shards: 'SHARDS',
     indices: 'INDICES',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 2a20081..a4a2811 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -42,7 +42,7 @@ export const zhCN = {
     },
   },
   manage: {
-    home: '首页',
+    cluster: '集群',
     nodes: '节点',
     shards: '分片',
     indices: '索引',
diff --git a/src/views/manage/components/home-state.vue b/src/views/manage/components/cluster-state.vue
similarity index 100%
rename from src/views/manage/components/home-state.vue
rename to src/views/manage/components/cluster-state.vue
diff --git a/src/views/manage/components/node-state.vue b/src/views/manage/components/node-state.vue
new file mode 100644
index 0000000..48d8312
--- /dev/null
+++ b/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>
diff --git a/src/views/manage/components/tool-bar.vue b/src/views/manage/components/tool-bar.vue
index 30b2c10..678577c 100644
--- a/src/views/manage/components/tool-bar.vue
+++ b/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>
diff --git a/src/views/manage/index.vue b/src/views/manage/index.vue
index dc783a4..3317cc9 100644
--- a/src/views/manage/index.vue
+++ b/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>