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;