refactor(main): node config component

Author: ikxin

app/components/common/client-modal.vue renamed to app/components/common/node-config.vue

@@ -1,14 +1,8 @@
 <script lang="ts" setup>
 import { fetch } from '@tauri-apps/plugin-http'
-import { z } from 'zod'
 import { useStorage } from '@vueuse/core'
-import type { FormSubmitEvent } from '#ui/types'
-
-const runtimeConfig = useRuntimeConfig()
-
-const form = ref()
-
-const clientData = useStorage<{ [key: string]: Schema }>('client-data', {})
+import { z } from 'zod'
+import type { FormSubmitEvent, Form } from '#ui/types'
 
 const schema = z.object({
   name: z.string().min(1),
@@ -17,11 +11,13 @@ const schema = z.object({
   username: z.string().min(1),
   password: z.string().min(1),
   https: z.boolean(),
-  entrance: z.string().min(1),
+  entrance: z.string(),
   token: z.string().min(1),
 })
 
-type Schema = z.output<typeof schema>
+export type Schema = z.output<typeof schema>
+
+const runtimeConfig = useRuntimeConfig()
 
 const state = reactive<Schema>({
   name: runtimeConfig.public.dev.name || '',
@@ -34,6 +30,8 @@ const state = reactive<Schema>({
   token: '',
 })
 
+const form = ref<Form<Schema>>()
+
 const loading = ref(false)
 
 const getToken = async (loginInfo: Schema) => {
@@ -71,21 +69,63 @@ const getToken = async (loginInfo: Schema) => {
   }
 }
 
+const visible = defineModel<boolean>()
+
+const nodeConfig = useStorage<Schema[]>('node-config', [])
+
 const onSubmit = async (event: FormSubmitEvent<Schema>) => {
   const { name } = event.data
-  clientData.value[name] = event.data
+  const index = nodeConfig.value.findIndex(item => item.name === name)
+
+  if (index === -1) {
+    nodeConfig.value.push(event.data)
+  } else {
+    nodeConfig.value[index] = event.data
+  }
+
+  visible.value = false
 }
+
+watch(visible, (value) => {
+  if (!value) {
+    state.token = ''
+    state.name = ''
+    state.host = ''
+    state.port = 10000
+    state.username = ''
+    state.password = ''
+    state.https = false
+    state.entrance = ''
+    state.token = ''
+  }
+})
 </script>
 
 <template>
-  <UModal>
+  <UModal
+    v-model="visible"
+    prevent-close
+  >
     <UCard
       :ui="{
         ring: '',
         divide: 'divide-y divide-gray-100 dark:divide-gray-800',
       }"
     >
-      <template #header />
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h2 class="font-bold">
+            {{ $t('label.create-client') }}
+          </h2>
+          <UButton
+            color="gray"
+            variant="ghost"
+            size="xs"
+            icon="i-heroicons-x-mark-20-solid"
+            @click="visible = false"
+          />
+        </div>
+      </template>
 
       <UForm
         ref="form"
@@ -160,7 +200,7 @@ const onSubmit = async (event: FormSubmitEvent<Schema>) => {
         </UFormGroup>
       </UForm>
       <template #footer>
-        <UButton @click="form.submit()">
+        <UButton @click="form?.submit()">
           {{ $t('button.submit') }}
         </UButton>
       </template>

app/pages/index.vue

@@ -1,5 +1,70 @@
 <script lang="ts" setup>
+import { useStorage } from '@vueuse/core'
+import { fetch } from '@tauri-apps/plugin-http'
+import type { Schema as NodeConfigSchema } from '~/components/common/node-config.vue'
+
 const visible = ref(false)
+
+const nodeConfig = useStorage<NodeConfigSchema[]>('node-config', [])
+
+const nodeStatus = useStorage<any>('node-status', [])
+
+useIntervalFn(async () => {
+  for (const item in nodeConfig.value) {
+    if (!nodeConfig.value[item]) {
+      return
+    }
+    const { name, host, port, https, token } = nodeConfig.value[item]
+    const response = await fetch(
+      `${
+        https ? 'https' : 'http'
+      }://${host}:${port}/api/v1/dashboard/current/all/all`,
+      {
+        headers: {
+          PanelAuthorization: token,
+        },
+      },
+    )
+    const result = await response.json()
+    if (result.code !== 200) {
+      console.log(result.message)
+    } else {
+      const index = nodeStatus.value.findIndex(
+        (item: any) => item.name === name,
+      )
+
+      const assignData = Object.assign(result.data, { name })
+
+      if (index === -1) {
+        nodeStatus.value.push(assignData)
+      } else {
+        nodeStatus.value[index] = assignData
+      }
+    }
+  }
+}, 1000)
+
+const columns = [
+  {
+    key: 'id',
+    label: '运行状态',
+  },
+  {
+    key: 'name',
+    label: '节点名',
+  },
+  {
+    key: 'title',
+    label: 'IP',
+  },
+  {
+    key: 'email',
+    label: '在线时间',
+  },
+  {
+    key: 'role',
+  },
+]
 </script>
 
 <template>
@@ -15,13 +80,16 @@ const visible = ref(false)
       :label="$t('label.create-client')"
       @click="visible = true"
     />
-    <CommonClientModal v-model="visible" />
+    <CommonNodeConfig v-model="visible" />
 
     <CommonSetLocale />
   </header>
   <main
     class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl gap-16 sm:gap-y-24 flex flex-col"
   >
-    <UTable />
+    <UTable
+      :columns
+      :rows="nodeStatus"
+    />
   </main>
 </template>

eslint.config.mjs

@@ -1,8 +1,14 @@
 // @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt().override('nuxt/rules', {
-  rules: {
-    'vue/no-multiple-template-root': 'off',
-  },
-})
+export default withNuxt()
+  .override('nuxt/rules', {
+    rules: {
+      'vue/no-multiple-template-root': 'off',
+    },
+  })
+  .override('nuxt/typescript/rules', {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  })