feat:Added blank page style

src/locales/en_GB.json

@@ -99,7 +99,16 @@
       "errorMessage": "Duplicate database name"
     }
   },
-  "serverTab": {},
+  "serverTab": {
+    "emptyPage": {
+      "message0": "It's easier to use shortcut keys",
+      "message1": "Why don't you have a cup of milk tea?",
+      "message2": "It would be nice to have an ice cream",
+      "message3": "Welcome to communicate in Issues",
+      "message4": "If only I had a popsicle",
+      "message5": "empty ~"
+    }
+  },
   "valueContent": {
     "index": {
       "runDialog": {

src/locales/zh_CN.json

@@ -99,7 +99,16 @@
       "errorMessage": "数据库名称重复"
     }
   },
-  "serverTab": {},
+  "serverTab": {
+    "emptyPage": {
+      "message0": "使用快捷键会更便捷呦",
+      "message1": "不如喝杯奶茶吧",
+      "message2": "吃个冰淇淋好像也不错",
+      "message3": "欢迎在Issues交流哦",
+      "message4": "要是吃个棒冰就好了",
+      "message5": "空空如也"
+    }
+  },
   "valueContent": {
     "index": {
       "runDialog": {

src/views/serverTab/emptyPage.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="h-full w-full flex flex-col justify-center items-center">
+    <div class="h-full w-full flex flex-col justify-center items-center" v-if="index === 0">
+      <magic-stick style="color: rgba(140, 147, 157, 0.33);width: 6em;height: 6em;margin-bottom: 16px;" />
+      <div style="color: rgba(140, 147, 157, 0.33);font-size: 20px;">{{ t('serverTab.emptyPage.message0') }}</div>
+    </div>
+    <div class="h-full w-full flex flex-col justify-center items-center" v-else-if="index === 1">
+      <milk-tea style="color: rgba(140, 147, 157, 0.33);width: 6em;height: 6em;margin-bottom: 16px;" />
+      <div style="color: rgba(140, 147, 157, 0.33);font-size: 20px;">{{ t('serverTab.emptyPage.message1') }}</div>
+    </div>
+    <div class="h-full w-full flex flex-col justify-center items-center" v-else-if="index === 2">
+      <ice-cream style="color: rgba(140, 147, 157, 0.33);width: 6em;height: 6em;margin-bottom: 16px;" />
+      <div style="color: rgba(140, 147, 157, 0.33);font-size: 20px;">{{ t('serverTab.emptyPage.message2') }}</div>
+    </div>
+    <div class="h-full w-full flex flex-col justify-center items-center" v-else-if="index === 3">
+      <message style="color: rgba(140, 147, 157, 0.33);width: 6em;height: 6em;margin-bottom: 16px;" />
+      <div style="color: rgba(140, 147, 157, 0.33);font-size: 20px;">{{ t('serverTab.emptyPage.message3') }}</div>
+    </div>
+    <div class="h-full w-full flex flex-col justify-center items-center" v-else-if="index === 4">
+      <ice-cream-round style="color: rgba(140, 147, 157, 0.33);width: 6em;height: 6em;margin-bottom: 16px;" />
+      <div style="color: rgba(140, 147, 157, 0.33);font-size: 20px;">{{ t('serverTab.emptyPage.message4') }}</div>
+    </div>
+    <div class="h-full w-full flex flex-col justify-center items-center" v-else-if="index === 5">
+      <chat-line-square style="color: rgba(140, 147, 157, 0.33);width: 6em;height: 6em;margin-bottom: 16px;" />
+      <div style="color: rgba(140, 147, 157, 0.33);font-size: 20px;">{{ t('serverTab.emptyPage.message5') }}</div>
+    </div>
+    <div class="h-full w-full flex flex-col justify-center items-center" v-else>
+      <chat-line-square style="color: rgba(140, 147, 157, 0.33);width: 6em;height: 6em;margin-bottom: 16px;" />
+      <div style="color: rgba(140, 147, 157, 0.33);font-size: 20px;">{{ t('serverTab.emptyPage.message5') }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { MagicStick, MilkTea, IceCream, Message, IceCreamRound, ChatLineSquare } from '@element-plus/icons-vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+const index = ref<number>(0)
+
+const genRandomIndex = async (n: number, m: number) => {
+  index.value = Math.floor(Math.random() * (m - n + 1) + n)
+}
+
+onMounted(() => {
+  genRandomIndex(0, 5)
+})
+</script>

src/views/serverTab/index.vue

@@ -17,6 +17,9 @@
         <key-menu :server-tab="item" class="w-full" />
       </el-tab-pane>
     </el-tabs>
+
+    <!-- empty page -->
+    <empty-page v-if="!data.length"/>
   </div>
 </template>
 
@@ -25,6 +28,7 @@ import { computed, ComputedRef, reactive, watch } from 'vue'
 import { useStore } from 'vuex'
 import { serverTabType } from '@/store/modules/serverList'
 import KeyMenu from '@/views/keyMenu/index.vue'
+import EmptyPage from './emptyPage.vue'
 
 const store = useStore()
 const state: { activeTab: string, closable: boolean } = reactive({