Fix: instance bug

frontend/src/tools/nodes.ts

@@ -1,6 +1,7 @@
 import { t } from "@/lang/i18n";
 
 export function computeNodeName(ip: string, available: boolean, remark?: string) {
+  if (!ip) return t("请选择节点");
   const online = available ? "" : t("TXT_CODE_836addb9");
   return remark ? `${remark} - ${ip} ${online}` : `${ip} ${online}`;
 }

frontend/src/widgets/InstanceList.vue

@@ -31,6 +31,7 @@ import { useInstanceMoreDetail } from "../hooks/useInstance";
 import { throttle } from "lodash";
 import { useScreen } from "@/hooks/useScreen";
 import { parseTimestamp } from "../tools/time";
+import { reportError } from "@/tools/validator";
 
 defineProps<{
   card: LayoutCard;
@@ -46,7 +47,7 @@ const operationForm = ref({
 const currentRemoteNode = ref<NodeStatus>();
 
 const { execute: getNodes, state: nodes } = remoteNodeList();
-const { execute: getInstances, state: instances } = remoteInstances();
+const { execute: getInstances, state: instances, isLoading } = remoteInstances();
 
 const instancesMoreInfo = computed(() => {
   const newInstances: InstanceMoreDetail[] = [];
@@ -60,22 +61,25 @@ const instancesMoreInfo = computed(() => {
 const initNodes = async () => {
   await getNodes();
   nodes?.value?.sort((a, b) => (a.available === b.available ? 0 : a.available ? -1 : 1));
-  if (!nodes.value?.length) {
+  if (nodes.value?.length === 0) {
     return reportError(t("TXT_CODE_e3d96a26"));
   }
   if (localStorage.getItem("pageSelectedRemote")) {
     currentRemoteNode.value = JSON.parse(localStorage.pageSelectedRemote);
+    if (!nodes.value?.some((item) => item.uuid === currentRemoteNode.value?.uuid)) {
+      currentRemoteNode.value = undefined;
+    }
   } else {
-    currentRemoteNode.value = nodes.value[0];
+    currentRemoteNode.value = nodes.value?.[0];
   }
 };
 
 const initInstancesData = async () => {
-  selectedInstance.value = [];
-  if (!currentRemoteNode.value) {
-    await initNodes();
-  }
   try {
+    selectedInstance.value = [];
+    if (!currentRemoteNode.value) {
+      await initNodes();
+    }
     await getInstances({
       params: {
         daemonId: currentRemoteNode.value?.uuid ?? "",
@@ -306,7 +310,7 @@ onMounted(async () => {
                   </a-menu-item>
                 </a-menu>
               </template>
-              <a-button class="mr-12" style="max-width: 200px; overflow: hidden">
+              <a-button class="mr-12" style="max-width: 200px; min-width: 180px; overflow: hidden">
                 <a-typography-paragraph
                   :ellipsis="{ rows: 1, expandable: false }"
                   :content="
@@ -403,6 +407,9 @@ onMounted(async () => {
           </template>
         </BetweenMenus>
       </a-col>
+      <template v-if="isLoading">
+        <Loading></Loading>
+      </template>
       <template v-if="instancesMoreInfo">
         <a-col v-for="item in instancesMoreInfo" :key="item.instanceUuid" :span="24" :md="6">
           <CardPanel
@@ -447,6 +454,12 @@ onMounted(async () => {
           </CardPanel>
         </a-col>
       </template>
+      <div
+        v-if="!instancesMoreInfo || instancesMoreInfo.length === 0"
+        class="flex align-center justify-center h-100 w-100"
+      >
+        <a-empty :description="t('无内容，请在右上角下拉框选择节点')" />
+      </div>
     </a-row>
   </div>
 </template>

frontend/src/widgets/LoginCard.vue

@@ -101,9 +101,6 @@ const loginSuccess = () => {
                 name="mcsm-name-input"
                 :placeholder="t('TXT_CODE_80a560a1')"
                 style="background-color: var(--color-gray-1) !important"
-                readonly
-                onfocus="this.removeAttribute('readonly');"
-                onblur="this.setAttribute('readonly',true);"
               >
                 <template #suffix>
                   <UserOutlined style="color: rgba(0, 0, 0, 0.45)" />

frontend/src/widgets/node/NodeItem.vue

@@ -8,7 +8,8 @@ import {
   CodeOutlined,
   BlockOutlined,
   FolderOpenOutlined,
-  ReloadOutlined
+  ReloadOutlined,
+  InfoCircleOutlined
 } from "@ant-design/icons-vue";
 import { useOverviewInfo, type ComputedNodeInfo } from "@/hooks/useOverviewInfo";
 import IconBtn from "@/components/IconBtn.vue";
@@ -33,6 +34,7 @@ const props = defineProps<{
 
 const { state: AllDaemonData } = useOverviewInfo();
 const itemDaemonId = ref<string>();
+const specifiedDaemonVersion = computed(() => AllDaemonData.value?.specifiedDaemonVersion);
 
 const item = computed(() => {
   const myDaemon = AllDaemonData.value?.remote.find((node) => {
@@ -92,7 +94,8 @@ const detailList = (node: ComputedNodeInfo) => [
   },
   {
     title: t("TXT_CODE_81634069"),
-    value: node.version
+    value: node.version,
+    warn: specifiedDaemonVersion.value !== node.version
   },
   {
     title: "Daemon ID",
@@ -200,7 +203,17 @@ const nodeOperations = computed(() =>
                 <CopyButton type="link" size="small" :value="detail.value ?? ''" />
               </div>
               <div v-else>
-                {{ detail.value }}
+                <a-tooltip v-if="detail.warn && detail.value">
+                  <template #title>
+                    {{
+                      t(
+                        "远程节点版本与面板端所需版本不一致，这可能会导致工作异常，请立即更新远程节点！"
+                      )
+                    }}
+                  </template>
+                  <span class="color-danger"><InfoCircleOutlined /> {{ detail.value }}</span>
+                </a-tooltip>
+                <span v-else>{{ detail.value }}</span>
               </div>
             </a-typography-paragraph>
           </a-col>