mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2024-12-27 07:59:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Optimize: select instance

Browse Source
This commit is contained in:
Lazy 2023-12-03 15:35:41 +08:00
parent b7ad5f6a03
commit 7514690ece
1 changed files with 41 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/components/SelectInstances.vue
View File

@ -10,13 +10,14 @@ import {
DatabaseOutlined, DatabaseOutlined,
FrownOutlined FrownOutlined
} from "@ant-design/icons-vue"; } from "@ant-design/icons-vue";
import BetweenMenus from "@/components/BetweenMenus.vue";
import { remoteInstances, remoteNodeList } from "@/services/apis"; import { remoteInstances, remoteNodeList } from "@/services/apis";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import { computeNodeName } from "@/tools/nodes"; import { computeNodeName } from "@/tools/nodes";
import { throttle } from "lodash"; import { throttle } from "lodash";
import { useScreen } from "../hooks/useScreen";
const props = defineProps<MountComponent>(); const props = defineProps<MountComponent>();
const { isPhone } = useScreen();
const open = ref(false); const open = ref(false);
@ -151,54 +152,46 @@ 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">
<BetweenMenus> <div class="flex-between flex-wrap align-center">
<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 <DatabaseOutlined v-if="item.available" />
v-for="item in nodes" <FrownOutlined v-else />
:key="item.uuid" {{ computeNodeName(item.ip, item.available, item.remarks) }}
@click="handleChangeNode(item)" </a-menu-item>
> <a-menu-divider />
<DatabaseOutlined v-if="item.available" /> <a-menu-item key="toNodesPage">
<FrownOutlined v-else /> <FormOutlined />
{{ computeNodeName(item.ip, item.available, item.remarks) }} {{ t("TXT_CODE_28e53fed") }}
</a-menu-item> </a-menu-item>
<a-menu-divider /> </a-menu>
<a-menu-item key="toNodesPage"> </template>
<FormOutlined /> <a-button :class="isPhone && 'mb-10 w-100'">
{{ t("TXT_CODE_28e53fed") }} {{
</a-menu-item> computeNodeName(
</a-menu> 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 />
</template> </template>
<a-button class="mr-12"> </a-input>
{{ </div>
computeNodeName( </div>
currentRemoteNode?.ip || "",
currentRemoteNode?.available || true,
currentRemoteNode?.remarks
)
}}
<DownOutlined />
</a-button>
</a-dropdown>
</template>
<template #right>
<div class="search-input">
<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">