mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2025-02-05 15:29:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Optimize: select instances

Browse Source
This commit is contained in:
Lazy 2023-12-14 20:13:56 +08:00
parent 3a3c194484
commit 0adeb3f64c
2 changed files with 55 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/fc/SelectInstances.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed } from "vue";
import BetweenMenus from "../BetweenMenus.vue";
import type { MountComponent, NodeStatus } from "@/types"; import type { MountComponent, NodeStatus } from "@/types";
import type { UserInstance } from "@/types/user"; import type { UserInstance } from "@/types/user";
import { t } from "@/lang/i18n"; import { t } from "@/lang/i18n";
@ -53,6 +54,7 @@ const instancesList = computed(() => {
const initNodes = async () => { const initNodes = async () => {
await getNodes(); await getNodes();
nodes?.value?.sort((a, b) => (a.available === b.available ? 0 : a.available ? -1 : 1));
if (!nodes.value?.length) { if (!nodes.value?.length) {
return message.error(t("TXT_CODE_e3d96a26")); return message.error(t("TXT_CODE_e3d96a26"));
} }
@ -125,6 +127,7 @@ const handleQueryInstance = throttle(async () => {
const handleChangeNode = async (item: NodeStatus) => { const handleChangeNode = async (item: NodeStatus) => {
try { try {
operationForm.value.currentPage = 1;
currentRemoteNode.value = item; currentRemoteNode.value = item;
await initInstancesData(); await initInstancesData();
localStorage.setItem("pageSelectedRemote", JSON.stringify(item)); localStorage.setItem("pageSelectedRemote", JSON.stringify(item));
@ -152,11 +155,17 @@ const handleChangeNode = async (item: NodeStatus) => {
</a-typography-paragraph> </a-typography-paragraph>
<a-row :gutter="[24, 24]" style="height: 100%"> <a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24"> <a-col :span="24">
<div class="flex-between flex-wrap align-center"> <BetweenMenus>
<template #left>
<a-dropdown> <a-dropdown>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item v-for="item in nodes" :key="item.uuid" @click="handleChangeNode(item)"> <a-menu-item
v-for="item in nodes"
:key="item.uuid"
:disabled="!item.available"
@click="handleChangeNode(item)"
>
<DatabaseOutlined v-if="item.available" /> <DatabaseOutlined v-if="item.available" />
<FrownOutlined v-else /> <FrownOutlined v-else />
{{ computeNodeName(item.ip, item.available, item.remarks) }} {{ computeNodeName(item.ip, item.available, item.remarks) }}
@ -179,6 +188,8 @@ const handleChangeNode = async (item: NodeStatus) => {
<DownOutlined /> <DownOutlined />
</a-button> </a-button>
</a-dropdown> </a-dropdown>
</template>
<template #right>
<div class="search-input" :class="isPhone && 'w-100'"> <div class="search-input" :class="isPhone && 'w-100'">
<a-input <a-input
v-model:value="operationForm.instanceName" v-model:value="operationForm.instanceName"
@ -191,7 +202,8 @@ const handleChangeNode = async (item: NodeStatus) => {
</template> </template>
</a-input> </a-input>
</div> </div>
</div> </template>
</BetweenMenus>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<div v-if="instances" class="flex-between align-center"> <div v-if="instances" class="flex-between align-center">

6
frontend/src/widgets/InstanceList.vue
View File

@ -16,7 +16,8 @@ import {
ExclamationCircleOutlined, ExclamationCircleOutlined,
DeleteOutlined, DeleteOutlined,
WarningOutlined, WarningOutlined,
InfoCircleOutlined InfoCircleOutlined,
FrownOutlined
} from "@ant-design/icons-vue"; } from "@ant-design/icons-vue";
import BetweenMenus from "@/components/BetweenMenus.vue"; import BetweenMenus from "@/components/BetweenMenus.vue";
import { router } from "@/config/router"; import { router } from "@/config/router";
@ -294,7 +295,8 @@ onMounted(async () => {
:disabled="!item.available" :disabled="!item.available"
@click="handleChangeNode(item)" @click="handleChangeNode(item)"
> >
<DatabaseOutlined /> <DatabaseOutlined v-if="item.available" />
<FrownOutlined v-else />
{{ computeNodeName(item.ip, item.available, item.remarks) }} {{ computeNodeName(item.ip, item.available, item.remarks) }}
</a-menu-item> </a-menu-item>
<a-menu-divider /> <a-menu-divider />