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

Optimize: between-menus

Browse Source
This commit is contained in:
Lazy 2024-01-10 00:52:16 +08:00
parent 8c527f10bf
commit 087c566c59
12 changed files with 79 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/BetweenMenus.vue
View File

@ -1,54 +1,56 @@
<template>
<div style="height: 100%" class="between-menus-container">
<div class="menus-item-left">
<div v-if="$slots.left" class="menus-item-left">
<slot name="left"></slot>
</div>
<div class="menus-item-center">
<div v-if="$slots.center" class="menus-item-center">
<slot name="center"></slot>
</div>
<div class="menus-item-right">
<div
v-if="$slots.right"
class="menus-item-right"
:class="{ 'phone-menus-item-right': $slots.center }"
>
<slot name="right"></slot>
</div>
</div>
</template>
<style lang="scss" scoped>
.between-menus-container {
.between-menus-container,
.menus-item-center,
.menus-item-left,
.menus-item-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
flex: 1;
}
.menus-item-center {
display: flex;
justify-content: center;
width: 30%;
flex: 1;
}
.menus-item-left {
flex: 1;
}
.menus-item-right {
text-align: right;
flex: 1;
}
.between-menus-container {
flex: unset !important;
justify-content: space-between;
}
.menus-item-center {
justify-content: center;
width: 30%;
}
.menus-item-left {
justify-content: flex-start;
}
.menus-item-right {
justify-content: flex-end;
}
@media (max-width: 585px) {
.between-menus-container {
display: block;
}
.menus-item-center {
margin-bottom: 12px;
}
.menus-item-left {
display: none;
}
.menus-item-center,
.menus-item-right {
flex: unset !important;
width: 100% !important;
text-align: left !important;
}
.phone-menus-item-right {
justify-content: flex-start !important;
}
}
</style>

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

@ -181,7 +181,7 @@ const handleChangeNode = async (item: NodeStatus) => {
</a-menu-item>
</a-menu>
</template>
<a-button :class="isPhone && 'mb-10 w-100'">
<a-button :class="isPhone && 'w-100'">
{{
computeNodeName(
currentRemoteNode?.ip || "",

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

@ -287,14 +287,14 @@ onMounted(async () => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
<AppstoreOutlined />
{{ card.title }}
</a-typography-title>
</template>
<template #right>
<a-dropdown class="mr-12">
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item
@ -355,7 +355,7 @@ onMounted(async () => {
<a-input
v-model:value.trim="operationForm.instanceName"
:placeholder="t('TXT_CODE_ce132192')"
style="width: calc(100% - 100px)"
style="width: calc(100% - 80px)"
@press-enter="handleQueryInstance"
@change="handleQueryInstance"
>
@ -372,24 +372,18 @@ onMounted(async () => {
<BetweenMenus>
<template v-if="instances" #left>
<div v-if="multipleMode">
<a-button class="mr-10" :class="{ 'mb-10': isPhone }" @click="exitMultipleMode">
<a-button class="mr-10" @click="exitMultipleMode">
{{ t("TXT_CODE_5366af54") }}
</a-button>
<a-button
v-if="instancesMoreInfo.length === selectedInstance.length"
class="mr-10"
:class="{ 'mb-10': isPhone }"
@click="selectedInstance = []"
>
{{ t("TXT_CODE_df87c46d") }}
</a-button>
<a-button
v-else
class="mr-10"
:class="{ 'mb-10': isPhone }"
@click="selectAllInstances"
>
<a-button v-else class="mr-10" @click="selectAllInstances">
{{ t("TXT_CODE_f466d7a") }}
</a-button>
<a-dropdown>

8
frontend/src/widgets/NodeList.vue
View File

@ -9,11 +9,13 @@ import { reportError } from "@/tools/validator";
import NodeItem from "./node/NodeItem.vue";
import { useRemoteNode } from "../hooks/useRemoteNode";
import NodeDetailDialog from "./node/NodeDetailDialog.vue";
import { useScreen } from "@/hooks/useScreen";
defineProps<{
card: LayoutCard;
}>();
const { isPhone } = useScreen();
const nodeDetailDialog = ref<InstanceType<typeof NodeDetailDialog>>();
const {
@ -46,17 +48,17 @@ const handleOpenDetailDialog = async () => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
<ClusterOutlined />
{{ card.title }}
</a-typography-title>
</template>
<template #right>
<a-button class="mr-12" :loading="refreshLoading" @click="refresh">
<a-button :loading="refreshLoading" @click="refresh">
{{ t("TXT_CODE_b76d94e0") }}
</a-button>
<a-button class="mr-12" type="primary" @click="handleOpenDetailDialog">
<a-button type="primary" @click="handleOpenDetailDialog">
{{ t("TXT_CODE_15a381d5") }}
</a-button>
<a-button href="https://docs.mcsmanager.com/" target="_black">

12
frontend/src/widgets/UserList.vue
View File

@ -37,7 +37,7 @@ interface dataType {
const { execute, isLoading: getUserInfoLoading } = getUserInfo();
const { toPage } = useAppRouters();
const screen = useScreen();
const { isPhone } = useScreen();
const operationForm = ref({
name: "",
@ -58,7 +58,7 @@ const columns = computed(() => {
title: "UUID",
dataIndex: "uuid",
key: "uuid",
condition: () => !screen.isPhone.value
condition: () => !isPhone.value
},
{
align: "center",
@ -83,7 +83,7 @@ const columns = computed(() => {
dataIndex: "loginTime",
key: "loginTime",
minWidth: 200,
condition: () => !screen.isPhone.value
condition: () => !isPhone.value
},
{
align: "center",
@ -91,7 +91,7 @@ const columns = computed(() => {
dataIndex: "registerTime",
key: "registerTime",
minWidth: 200,
condition: () => !screen.isPhone.value
condition: () => !isPhone.value
},
{
align: "center",
@ -357,14 +357,14 @@ onMounted(async () => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
<UserOutlined />
{{ card.title }} ({{ total }})
</a-typography-title>
</template>
<template #right>
<a-button class="mr-8" type="default" :loading="getUserInfoLoading" @click="reload">
<a-button type="default" :loading="getUserInfoLoading" @click="reload">
{{ t("TXT_CODE_b76d94e0") }}
</a-button>
<a-dropdown>

8
frontend/src/widgets/imageManager/NewImage.vue
View File

@ -31,7 +31,7 @@ const props = defineProps<{
const { toPage } = useAppRouters();
const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
const daemonId: string | undefined = getMetaOrRouteValue("daemonId");
const screen = useScreen();
const { isPhone } = useScreen();
const buildProgressDialog = ref<InstanceType<typeof BuildProgress>>();
const dockerFileDrawer = ref(false);
const imageList = [
@ -116,13 +116,13 @@ onMounted(async () => {});
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
{{ card.title }}
</a-typography-title>
</template>
<template #right>
<a-button v-show="!screen.isPhone.value" class="mr-8" @click="toImageListPage">
<a-button @click="toImageListPage">
{{ t("TXT_CODE_3a818e91") }}
</a-button>
<a-button type="primary" @click="buildProgressDialog?.openDialog()">
@ -177,7 +177,7 @@ onMounted(async () => {});
<a-drawer
v-model:open="dockerFileDrawer"
:width="screen.isPhone.value ? 'auto' : '768px'"
:width="isPhone ? 'auto' : '768px'"
title="DockerFile"
placement="right"
destroy-on-close

6
frontend/src/widgets/imageManager/index.vue
View File

@ -21,7 +21,7 @@ const props = defineProps<{
const { toPage } = useAppRouters();
const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
const daemonId: string | undefined = getMetaOrRouteValue("daemonId");
const screen = useScreen();
const { isPhone } = useScreen();
const { execute: execImageList, state: images, isLoading: imageListLoading } = imageList();
const getImageList = async () => {
@ -197,13 +197,13 @@ onMounted(async () => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
{{ card.title }}
</a-typography-title>
</template>
<template #right>
<a-button v-show="!screen.isPhone.value" class="mr-8" @click="getImageList">
<a-button @click="getImageList">
{{ t("TXT_CODE_b76d94e0") }}
</a-button>
<a-button type="primary" @click="toNewImagePage">

7
frontend/src/widgets/instance/FileManager.vue
View File

@ -164,7 +164,7 @@ onUnmounted(() => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
{{ card.title }}
</a-typography-title>
@ -176,7 +176,7 @@ onUnmounted(() => {
:disabled="percentComplete > 0"
:show-upload-list="false"
>
<a-button class="mr-8" type="dashed" :loading="percentComplete > 0">
<a-button type="dashed" :loading="percentComplete > 0">
<upload-outlined v-if="percentComplete === 0" />
{{
percentComplete > 0
@ -189,12 +189,11 @@ onUnmounted(() => {
v-if="clipboard?.value && clipboard.value.length > 0"
type="dashed"
danger
class="mr-8"
@click="paste()"
>
{{ t("TXT_CODE_f0260e51") }}
</a-button>
<a-button v-else class="mr-8" type="default" @click="reloadList()">
<a-button v-else type="default" @click="reloadList()">
{{ t("TXT_CODE_a53573af") }}
</a-button>

8
frontend/src/widgets/instance/Schedule.vue
View File

@ -13,11 +13,13 @@ import type { LayoutCard, Schedule } from "@/types/index";
import { ScheduleAction, ScheduleType, ScheduleCreateType } from "@/types/const";
import NewSchedule from "@/widgets/instance/dialogs/NewSchedule.vue";
import type { AntColumnsType } from "../../types/ant";
import { useScreen } from "@/hooks/useScreen";
const props = defineProps<{
card: LayoutCard;
}>();
const { isPhone } = useScreen();
const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
const instanceId = getMetaOrRouteValue("instanceId");
const daemonId = getMetaOrRouteValue("daemonId");
@ -181,17 +183,17 @@ onMounted(async () => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
<FieldTimeOutlined />
{{ card.title }}
</a-typography-title>
</template>
<template #right>
<a-button class="mr-10" @click="toConsole()">
<a-button @click="toConsole">
{{ t("TXT_CODE_c14b2ea3") }}
</a-button>
<a-button class="mr-10" @click="refresh">
<a-button @click="refresh">
{{ t("TXT_CODE_b76d94e0") }}
</a-button>
<a-button type="primary" @click="newScheduleDialog?.openDialog()">

8
frontend/src/widgets/instance/ServerConfigFile.vue
View File

@ -114,16 +114,16 @@ onMounted(async () => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col v-if="!isFailure" :span="24">
<BetweenMenus>
<template #left>
<a-button class="mr-8" @click="toConfigOverview">
<template v-if="!isPhone" #left>
<a-button @click="toConfigOverview">
{{ t("TXT_CODE_c14b2ea3") }}
</a-button>
</template>
<template #right>
<a-button type="primary" :loading="updateConfigFileLoading" class="mr-8" @click="save">
<a-button type="primary" :loading="updateConfigFileLoading" @click="save">
{{ t("TXT_CODE_abfe9512") }}
</a-button>
<a-button :loading="getConfigFileLoading" class="mr-8" @click="refresh">
<a-button :loading="getConfigFileLoading" @click="refresh">
{{ t("TXT_CODE_b76d94e0") }}
</a-button>
<a-button type="dashed" @click="toEditRawFile">

8
frontend/src/widgets/instance/ServerConfigOverview.vue
View File

@ -4,15 +4,17 @@ import { t } from "@/lang/i18n";
import CardPanel from "@/components/CardPanel.vue";
import type { LayoutCard } from "@/types";
import { getConfigFileList } from "@/services/apis/instance";
import { message } from "ant-design-vue";
import { reportError } from "@/tools/validator";
import { useLayoutCardTools } from "@/hooks/useCardTools";
import { getInstanceConfigByType, type InstanceConfigs } from "@/hooks/useInstance";
import { useAppRouters } from "@/hooks/useAppRouters";
import { useScreen } from "@/hooks/useScreen";
const props = defineProps<{
card: LayoutCard;
}>();
const { isPhone } = useScreen();
const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
const instanceId = getMetaOrRouteValue("instanceId");
const daemonId = getMetaOrRouteValue("daemonId");
@ -87,13 +89,13 @@ onMounted(async () => {
<a-row :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
{{ card.title }}
</a-typography-title>
</template>
<template #right>
<a-button class="mr-8" @click="toConsole">
<a-button @click="toConsole">
{{ t("TXT_CODE_95b9833f") }}
</a-button>
<a-button :loading="isLoading" @click="render">

12
frontend/src/widgets/user/AccessSettings.vue
View File

@ -23,7 +23,7 @@ const props = defineProps<{
uuid: string;
}>();
const screen = useScreen();
const { isPhone } = useScreen();
let dataSource: Ref<UserInstance[]> = ref([]);
const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
@ -111,7 +111,7 @@ const columns = computed(() => {
dataIndex: "remarks",
key: "remarks",
minWidth: 200,
condition: () => !screen.isPhone.value,
condition: () => !isPhone.value,
customRender: (row) => {
return row.record.hostIp + ` (${row.record.remarks})`;
}
@ -129,7 +129,7 @@ const columns = computed(() => {
dataIndex: "endTime",
key: "endTime",
minWidth: 200,
condition: () => !screen.isPhone.value,
condition: () => !isPhone.value,
customRender: (row: { text: string | number }) => {
if (Number(row.text) === 0) return t("TXT_CODE_8dfd8b17");
if (!isNaN(Number(row.text))) return dayjs(Number(row.text)).format("YYYY-MM-DD HH:mm:ss");
@ -145,7 +145,7 @@ const columns = computed(() => {
customRender: (e: { text: "-1" | "1" | "2" | "3" }) => {
return INSTANCE_STATUS[e.text] || e.text;
},
condition: () => !screen.isPhone.value
condition: () => !isPhone.value
},
{
align: "center",
@ -163,13 +163,13 @@ const columns = computed(() => {
<a-row v-if="userUuid" :gutter="[24, 24]" style="height: 100%">
<a-col :span="24">
<BetweenMenus>
<template #left>
<template v-if="!isPhone" #left>
<a-typography-title class="mb-0" :level="4">
{{ t("TXT_CODE_76d20724") }}
</a-typography-title>
</template>
<template #right>
<a-button v-show="!screen.isPhone.value" class="mr-8" @click="refreshTableData()">
<a-button @click="refreshTableData()">
{{ t("TXT_CODE_b76d94e0") }}
</a-button>
<a-button type="primary" @click="assignApp">