1.complete connection status view.

2.use async trait at rust side.

src/api/backend.ts

@@ -1,29 +1,27 @@
-import { useRoute } from "vue-router"
+
 import db from "@/database"
-import { invoke } from "@tauri-apps/api/core"
-const getConnectionInfo = async () => {
-    const route = useRoute()
-    const id = Number(route.query.id)
-    return db.connection.get(id);
-} 
+import {invoke} from "@tauri-apps/api/core"
+import {useTabStore} from "@/store/tabs.ts";
 
 export interface ResponseBody<T> {
     code: number,
-    data:T,
+    data: T,
     msg: string
 }
 
-export const RReq  = async <T>(action:string, data: any) => {
-        const info =  await getConnectionInfo()
-        return invoke<ResponseBody<T>>("request",{
-            rid:Math.random().toString(36),
-            action,
-            data:JSON.stringify(data),
-            connectionInfo:info
-        })
+export const Req = async <T>(action: string, data: any) => {
+    const tabs = useTabStore()
+    const id = Number(tabs.activeTab?.id || '0')
+    const info = await db.connection.get(id);
+    return invoke<ResponseBody<T>>("request", {
+        rid: Math.random().toString(36),
+        action,
+        data: JSON.stringify(data),
+        connectionInfo: info
+    })
 }
 
 
-export function status<T>(data:any) {
-    return RReq<T>("/status",data)
+export function status<T>(data: any) {
+    return Req<T>("/status", data)
 }

src/i18n/en.ts

@@ -2,11 +2,11 @@ export default {
     layout: {
         host: 'Hosts',
         settings: "Settings",
-        add:"New Host",
-        edit :"Edit Host",
+        add: "New Host",
+        edit: "Edit Host",
         hostForm: {
             name: "Host Name",
-            normal:"Normal Arguments",
+            normal: "Normal Arguments",
             submit: "Submit",
             save: "Save",
             delete: "Delete",
@@ -29,6 +29,11 @@ export default {
             password: {
                 placeholder: "Password"
             },
+        },
+        connection: {
+            host: "Host",
+            cluster: "Cluster Type",
+            close: "Close"
         }
     },
     settings: {

src/i18n/zh_cn.ts

@@ -29,6 +29,11 @@ export default {
             password: {
                 placeholder: "密码"
             },
+        },
+        connection: {
+            host: "地址",
+            cluster: "集群模式",
+            close:"关闭",
         }
     },
     settings: {

src/layout/Layout.vue

@@ -3,14 +3,16 @@ import {getCurrent} from '@tauri-apps/api/window'
 import NavigatorItem from '../components/NavigatorItem.vue'
 import logo from '../assets/logo.png'
 import { ref} from 'vue'
-import useTabStore from '../store/tabs'
+import {useTabStore} from '../store/tabs'
 
 const tabStore = useTabStore()
 const min = ref(false)
 const ver = import.meta.env.VITE_VERSION.version
 const ScrollerRef = ref<any>()
 tabStore.setScroller(() => {
-  ScrollerRef.value?.scrollTop(tabStore.list.length * 80)
+  if (ScrollerRef.value) {
+    ScrollerRef.value.scrollTop = tabStore.list.length * 80
+  }
 })
 
 enum BarAction {

src/layout/TabViewLayout.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import useTabStore from '../store/tabs'
+import {useTabStore} from '../store/tabs'
 
 const tabStore = useTabStore()
-import TabView from '@/views/TabView.vue'
+import TabView from '@/views/TabView'
 </script>
 
 <template>

src/store/tabs.ts

@@ -24,7 +24,7 @@ const initTab = (): Map<number, TabItem> => {
     return map
 }
 const defaultMenuIds = [-1, -2]
-export default defineStore('tabs', () => {
+export const useTabStore = defineStore('tabs', () => {
 
     const tabs = ref<Map<number, TabItem>>(initTab())
     const activeId = ref(-1)

src/views/HostView/Host.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import useTabStore from '../../store/tabs.ts'
+import {useTabStore} from '@/store/tabs.ts'
 import {nextTick, ref} from 'vue'
 import {ConnectionImpl} from '@/database.ts'
 import HostForm from '@/views/HostView/HostForm.vue'
@@ -32,6 +32,7 @@ const handleSelect = async (e: any) => {
   switch (e) {
     case "save":
       await formRef.value?.save()
+      await queryHostList();
       break
     case "delete":
       await db.connection.delete(connectionData.value?.id);
@@ -52,7 +53,7 @@ const hostList = ref<ConnectionImpl[]>([])
 const queryHostList = async () => {
   let hosts = [] as any
   try {
-    hosts = await db.connection.filter(() => true).toArray()
+    hosts = await db.connection.toArray()
     console.log(hosts)
   } catch (e) {
 

src/views/HostView/HostForm.vue

@@ -24,7 +24,7 @@ watch(() => props.data, (data) => {
 })
 const submitFn = async (v: any) => {
   const data = unProxy(v)
-  await db.connection.add(data)
+  await db.connection.put(data)
   emits("ok", data)
 }
 const save = async () => {

src/views/TabView/Data.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  $END$
+  <h1>connected successful!</h1>
 </template>
 
 <style scoped>

src/views/TabView/Page.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 
+import Status from "@/views/TabView/Status.vue"
+import Data from "@/views/TabView/Data.vue"
+import {shallowRef} from "vue";
+
+const cmp = shallowRef(Status as any)
 </script>
 
 <template>
-  $END$
+  <div class="w-full">
+    <Component :is="cmp" @ok="() => cmp = Data"/>
+  </div>
 </template>
 
 <style scoped>

src/views/TabView/Status.vue

@@ -1,11 +1,147 @@
 <script setup lang="ts">
+import database, {ConnectionImpl} from "@/database.ts";
+import {onMounted, ref} from "vue";
+import {status} from "@/api/backend.ts";
+import {useTabStore} from "@/store/tabs.ts";
 
+const tabs = useTabStore()
+const isOk = ref(true)
+let connInfo = ref<ConnectionImpl | undefined>()
+let errorInfo = ref("")
+const emit = defineEmits(['ok'])
+onMounted(() => {
+  database.connection.get(tabs.activeTab?.id)
+      .then((data) => {
+        connInfo.value = data
+        status<any>(data)
+            .then((e) => {
+              console.log(e)
+              emit("ok")
+            })
+            .catch((e) => {
+              errorInfo.value = e
+              isOk.value = false
+            })
+
+      })
+      .finally(() => {
+
+      })
+})
+const close = () => {
+  tabs.delTab(tabs.activeTab?.id || -3)
+}
 </script>
 
 <template>
-  $END$
+  <div class="w-420  mx-auto pt-45px">
+    <div class="flex justify-between">
+      <div class="flex">
+        <div class="p-8 rd-3 bg-black mr-4">
+          <div class="i-tabler:server-bolt w-26 h-26 text-white"></div>
+        </div>
+        <div class="flex flex-col justify-center">
+          <span class="font-700 pb-0.5 text-18px">{{ connInfo?.name }}</span>
+          <span v-if="!connInfo?.cluster" class="text-12px text-gray">
+             {{ $t("layout.connection.host") }} : {{ connInfo?.node[0].host }}
+            </span>
+          <span v-else>{{ $t("layout.cluster") }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="flex-conn-progress relative my-4 h-30px" v-if="isOk">
+      <div class="absolute left-15px right-15px h-8px h-8px top-11px bg-gray overflow-hidden">
+        <div class="animation_bar h-full w-100 bg-black"></div>
+      </div>
+      <div class="absolute w-30 h-30 left-0 top-0 absolute">
+        <div class="w-22 h-22 border-black border-4 border-solid rd-15px clip relative">
+        </div>
+        <div class="w-20 h-20 rd-22 bg-black top-5 left-5 absolute flex justify-center items-center">
+
+          <div class="i-tabler:server-bolt text-white w-13 h-13">
+
+          </div>
+        </div>
+      </div>
+      <div class="absolute w-30 h-30 right-0 top-0 absolute">
+        <div class="w-22 h-22 border-black border-4 border-solid rd-15px over relative">
+        </div>
+        <div class="w-20 h-20 rd-22 bg-black top-5 left-5 absolute flex justify-center items-center">
+
+          <div class="i-material-symbols:power-plug text-white w-14 h-14">
+
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex-conn-progress relative my-4 h-30px" v-else>
+      <div class="absolute left-15px right-15px h-8px h-8px top-11px overflow-hidden bg-red">
+      </div>
+      <div class="absolute w-30 h-30 left-0 top-0 absolute">
+        <div class="w-30 h-30 rd-22 bg-red top-0 left-0 absolute flex justify-center items-center">
+          <div class="i-tabler:server-bolt text-white w-18 h-18">
+          </div>
+        </div>
+      </div>
+      <div class="absolute w-30 h-30 right-[-4px] top-0 absolute">
+        <div class="w-20 h-20 rd-22 bg-red top-5 left-5 absolute flex justify-center items-center">
+          <div class="i-material-symbols:power-plug text-white w-14 h-14"></div>
+        </div>
+      </div>
+    </div>
+    <div v-if="!isOk" class="scroller bg-black rd-2 text-red line-height-[20px]">
+      {{ errorInfo }}
+    </div>
+    <div class="pt-5 flex" v-if="!isOk">
+      <a-button type="primary" @click="close()" status="danger" size="mini">{{ $t("layout.connection.close") }}</a-button>
+    </div>
+    <div class="flex" v-else>
+      <a-button  type="dashed"  status="normal" @click="close()" size="mini">{{ $t("layout.connection.close") }}</a-button>
+    </div>
+  </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@keyframes go_line {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(420px);
+  }
+}
+
+.animation_bar {
+  animation: go_line 1s infinite linear;
+}
+
+@keyframes go_round {
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(360deg);
+  }
+}
+
+.clip {
+  background: transparent;
+  clip-path: view-box circle(80% at 0% 10%);
+  animation: linear infinite go_round 0.268s;
+}
+
+.over {
+  border-color: transparent;
+}
+
+.scroller {
+  overflow: auto;
+  max-height: 50vh;
+  border: 8px solid #000000;
 
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
 </style>

src/views/TabView/index.ts

@@ -0,0 +1,3 @@
+import Page from "@/views/TabView/Page.vue";
+
+export default Page;