Feat: status block

common/global.d.ts

@@ -56,6 +56,43 @@ export interface IPanelResponseProtocol {
   status: number;
 }
 
+export interface IPanelOverviewRemoteResponse {
+  version: string;
+  process: {
+    cpu: number;
+    memory: number;
+    cwd: string;
+  };
+  instance: {
+    running: number;
+    total: number;
+  };
+  system: {
+    type: string;
+    hostname: string;
+    platform: string;
+    release: string;
+    uptime: number;
+    cwd: string;
+    loadavg: number[];
+    freemem: number;
+    cpuUsage: number;
+    memUsage: number;
+    totalmem: number;
+    processCpu: number;
+    processMem: number;
+  };
+  cpuMemChart: {
+    cpu: number;
+    mem: number;
+  }[];
+  uuid: string;
+  ip: string;
+  port: number;
+  available: boolean;
+  remarks: string;
+}
+
 export interface IPanelOverviewResponse {
   version: string;
   specifiedDaemonVersion: string;
@@ -71,7 +108,7 @@ export interface IPanelOverviewResponse {
     loginFailed: number;
   };
   system: {
-    user: os.UserInfo;
+    user: any;
     time: number;
     totalmem: number;
     freemem: number;
@@ -93,5 +130,5 @@ export interface IPanelOverviewResponse {
     available: number;
     total: number;
   };
-  remote: any[];
+  remote: IPanelOverviewRemoteResponse[];
 }

frontend/src/assets/base.scss

@@ -5,7 +5,7 @@
   --font-h4: 20px;
   --font-h3: 24px;
   --font-h2: 30px;
-  --font-h1: 38px;
+  --font-h1: 36px;
 
   --phone-width: 992px;
   --app-max-width: 1360px;

frontend/src/config/originLayoutConfig.ts

@@ -26,7 +26,7 @@ export const ORIGIN_LAYOUT_CONFIG: PageLayoutConfig[] = [
       {
         id: getRandomId(),
         type: "StatusBlock",
-        title: t("节点在线数1"),
+        title: t("节点在线数"),
         meta: {
           type: "node"
         },

frontend/src/widgets/PanelOverview.vue

@@ -9,10 +9,10 @@ defineProps<{
   card: LayoutCard;
 }>();
 
-const { state, isReady } = useOverviewInfo();
+const { state } = useOverviewInfo();
 
 const overviewList = computed(() => {
-  if (!state.value || !isReady.value)
+  if (!state.value)
     return [
       {
         title: t("数据加载中..."),
@@ -20,6 +20,8 @@ const overviewList = computed(() => {
       }
     ];
 
+  console.debug("计算：ZZZZ", state.value);
+
   const { system, version, record, specifiedDaemonVersion, process } = state.value;
   const free = Number((system.freemem / 1024 / 1024 / 1024).toFixed(1));
   const total = Number((system.totalmem / 1024 / 1024 / 1024).toFixed(1));

frontend/src/widgets/StatusBlock.vue

@@ -1,26 +1,59 @@
 <script setup lang="ts">
 import { useLayoutCardTools } from "@/hooks/useCardTools";
+import { useOverviewInfo } from "@/hooks/useOverviewInfo";
 import { t } from "@/lang/i18n";
-import type { LayoutCard } from "@/types";
+import type { JsonData, LayoutCard } from "@/types";
+import { computed } from "vue";
 
 const props = defineProps<{
   card: LayoutCard;
 }>();
 
-const { getMetaValue, setMetaValue } = useLayoutCardTools(props.card);
+const { state } = useOverviewInfo();
+const { getMetaValue } = useLayoutCardTools(props.card);
 
 const type = getMetaValue<string>("type");
 
-const subTitleMap: Record<string, string> = {
-  node: "在线节点 / 总节点",
-  instance: "正在运行数 / 全部实例总数",
-  users: "登录失败次数 : 登录成功次数",
-  system: "面板所在主机 CPU，RAM 百分比"
-};
+const computedStatusList = computed(() => {
+  if (!state.value) return [];
 
-const subTitle = subTitleMap[type] || "";
+  let totalInstance = 0;
+  let runningInstance = 0;
+  for (const iterator of state.value?.remote || []) {
+    if (iterator.instance) {
+      totalInstance += iterator.instance.total;
+      runningInstance += iterator.instance.running;
+    }
+  }
 
-const value = "10/11";
+  let cpu = Number(state.value.system.cpu * 100).toFixed(0);
+  let mem = Number((state.value.system.freemem / state.value.system.totalmem) * 100).toFixed(0);
+
+  return [
+    {
+      type: "node",
+      title: t("在线节点 / 总节点"),
+      value: `${state.value?.remoteCount.available}/${state.value?.remoteCount.total}`
+    },
+    {
+      type: "instance",
+      title: t("正在运行数 / 全部实例总数"),
+      value: `${runningInstance}/${totalInstance}`
+    },
+    {
+      type: "users",
+      title: t("登录失败次数 : 登录成功次数"),
+      value: `${state.value.record.loginFailed}:${state.value.record.logined}`
+    },
+    {
+      type: "system",
+      title: t("面板主机 CPU，RAM 使用率"),
+      value: `${cpu}% ${mem}%`
+    }
+  ];
+});
+
+const realStatus = computed(() => computedStatusList.value.find((v) => v.type === type));
 </script>
 
 <template>
@@ -28,10 +61,9 @@ const value = "10/11";
     <template #title>{{ card.title }}</template>
     <template #body>
       <a-typography-text class="color-info">
-        {{ subTitle }}
+        {{ realStatus?.title }}
       </a-typography-text>
-
-      <div class="value">{{ value }}</div>
+      <div class="value">{{ realStatus?.value }}</div>
     </template>
   </CardPanel>
 </template>
@@ -40,7 +72,7 @@ const value = "10/11";
 .StatusBlock {
   .value {
     font-weight: 800;
-    font-size: 36px;
+    font-size: var(--font-h1);
     margin-top: 4px;
   }
 }