From 0adeb3f64cb57770d14108de29ccc7c36f062a5e Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Thu, 14 Dec 2023 20:13:56 +0800
Subject: [PATCH] Optimize: select instances

---
 .../src/components/fc/SelectInstances.vue     | 90 +++++++++++--------
 frontend/src/widgets/InstanceList.vue         |  6 +-
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/fc/SelectInstances.vue b/frontend/src/components/fc/SelectInstances.vue
index d5b0112b..277bdc7f 100644
--- a/frontend/src/components/fc/SelectInstances.vue
+++ b/frontend/src/components/fc/SelectInstances.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
+import BetweenMenus from "../BetweenMenus.vue";
 import type { MountComponent, NodeStatus } from "@/types";
 import type { UserInstance } from "@/types/user";
 import { t } from "@/lang/i18n";
@@ -53,6 +54,7 @@ const instancesList = computed(() => {
 
 const initNodes = async () => {
   await getNodes();
+  nodes?.value?.sort((a, b) => (a.available === b.available ? 0 : a.available ? -1 : 1));
   if (!nodes.value?.length) {
     return message.error(t("TXT_CODE_e3d96a26"));
   }
@@ -125,6 +127,7 @@ const handleQueryInstance = throttle(async () => {
 
 const handleChangeNode = async (item: NodeStatus) => {
   try {
+    operationForm.value.currentPage = 1;
     currentRemoteNode.value = item;
     await initInstancesData();
     localStorage.setItem("pageSelectedRemote", JSON.stringify(item));
@@ -152,46 +155,55 @@ const handleChangeNode = async (item: NodeStatus) => {
     </a-typography-paragraph>
     <a-row :gutter="[24, 24]" style="height: 100%">
       <a-col :span="24">
-        <div class="flex-between flex-wrap align-center">
-          <a-dropdown>
-            <template #overlay>
-              <a-menu>
-                <a-menu-item v-for="item in nodes" :key="item.uuid" @click="handleChangeNode(item)">
-                  <DatabaseOutlined v-if="item.available" />
-                  <FrownOutlined v-else />
-                  {{ computeNodeName(item.ip, item.available, item.remarks) }}
-                </a-menu-item>
-                <a-menu-divider />
-                <a-menu-item key="toNodesPage">
-                  <FormOutlined />
-                  {{ t("TXT_CODE_28e53fed") }}
-                </a-menu-item>
-              </a-menu>
-            </template>
-            <a-button :class="isPhone && 'mb-10 w-100'">
-              {{
-                computeNodeName(
-                  currentRemoteNode?.ip || "",
-                  currentRemoteNode?.available || true,
-                  currentRemoteNode?.remarks
-                )
-              }}
-              <DownOutlined />
-            </a-button>
-          </a-dropdown>
-          <div class="search-input" :class="isPhone && 'w-100'">
-            <a-input
-              v-model:value="operationForm.instanceName"
-              :placeholder="t('TXT_CODE_ce132192')"
-              @press-enter="handleQueryInstance"
-              @change="handleQueryInstance"
-            >
-              <template #prefix>
-                <search-outlined />
+        <BetweenMenus>
+          <template #left>
+            <a-dropdown>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item
+                    v-for="item in nodes"
+                    :key="item.uuid"
+                    :disabled="!item.available"
+                    @click="handleChangeNode(item)"
+                  >
+                    <DatabaseOutlined v-if="item.available" />
+                    <FrownOutlined v-else />
+                    {{ computeNodeName(item.ip, item.available, item.remarks) }}
+                  </a-menu-item>
+                  <a-menu-divider />
+                  <a-menu-item key="toNodesPage">
+                    <FormOutlined />
+                    {{ t("TXT_CODE_28e53fed") }}
+                  </a-menu-item>
+                </a-menu>
               </template>
-            </a-input>
-          </div>
-        </div>
+              <a-button :class="isPhone && 'mb-10 w-100'">
+                {{
+                  computeNodeName(
+                    currentRemoteNode?.ip || "",
+                    currentRemoteNode?.available || true,
+                    currentRemoteNode?.remarks
+                  )
+                }}
+                <DownOutlined />
+              </a-button>
+            </a-dropdown>
+          </template>
+          <template #right>
+            <div class="search-input" :class="isPhone && 'w-100'">
+              <a-input
+                v-model:value="operationForm.instanceName"
+                :placeholder="t('TXT_CODE_ce132192')"
+                @press-enter="handleQueryInstance"
+                @change="handleQueryInstance"
+              >
+                <template #prefix>
+                  <search-outlined />
+                </template>
+              </a-input>
+            </div>
+          </template>
+        </BetweenMenus>
       </a-col>
       <a-col :span="24">
         <div v-if="instances" class="flex-between align-center">
diff --git a/frontend/src/widgets/InstanceList.vue b/frontend/src/widgets/InstanceList.vue
index a6d8a08f..085fa154 100644
--- a/frontend/src/widgets/InstanceList.vue
+++ b/frontend/src/widgets/InstanceList.vue
@@ -16,7 +16,8 @@ import {
   ExclamationCircleOutlined,
   DeleteOutlined,
   WarningOutlined,
-  InfoCircleOutlined
+  InfoCircleOutlined,
+  FrownOutlined
 } from "@ant-design/icons-vue";
 import BetweenMenus from "@/components/BetweenMenus.vue";
 import { router } from "@/config/router";
@@ -294,7 +295,8 @@ onMounted(async () => {
                     :disabled="!item.available"
                     @click="handleChangeNode(item)"
                   >
-                    <DatabaseOutlined />
+                    <DatabaseOutlined v-if="item.available" />
+                    <FrownOutlined v-else />
                     {{ computeNodeName(item.ip, item.available, item.remarks) }}
                   </a-menu-item>
                   <a-menu-divider />