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

90
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,46 +155,55 @@ 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>
<a-dropdown> <template #left>
<template #overlay> <a-dropdown>
<a-menu> <template #overlay>
<a-menu-item v-for="item in nodes" :key="item.uuid" @click="handleChangeNode(item)"> <a-menu>
<DatabaseOutlined v-if="item.available" /> <a-menu-item
<FrownOutlined v-else /> v-for="item in nodes"
{{ computeNodeName(item.ip, item.available, item.remarks) }} :key="item.uuid"
</a-menu-item> :disabled="!item.available"
<a-menu-divider /> @click="handleChangeNode(item)"
<a-menu-item key="toNodesPage"> >
<FormOutlined /> <DatabaseOutlined v-if="item.available" />
{{ t("TXT_CODE_28e53fed") }} <FrownOutlined v-else />
</a-menu-item> {{ computeNodeName(item.ip, item.available, item.remarks) }}
</a-menu> </a-menu-item>
</template> <a-menu-divider />
<a-button :class="isPhone && 'mb-10 w-100'"> <a-menu-item key="toNodesPage">
{{ <FormOutlined />
computeNodeName( {{ t("TXT_CODE_28e53fed") }}
currentRemoteNode?.ip || "", </a-menu-item>
currentRemoteNode?.available || true, </a-menu>
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 />
</template> </template>
</a-input> <a-button :class="isPhone && 'mb-10 w-100'">
</div> {{
</div> 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>
<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 />