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

Feat: Left menus panel support phone

Browse Source
This commit is contained in:
unitwk 2023-08-26 13:57:32 +08:00
parent fb21a4942a
commit 400242dba8
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/LeftMenusPanel.vue
View File

@ -1,7 +1,10 @@
<script setup lang="ts">
import type CardPanel from "./CardPanel.vue";
import { ref, type FunctionalComponent } from "vue";
import { ref, type FunctionalComponent, onMounted } from "vue";
import LeftMenuBtn from "./LeftMenuBtn.vue";
import { useScreen } from "@/hooks/useScreen";
const { isPhone } = useScreen();
interface LeftMenuItem {
title: string;
@ -13,24 +16,47 @@ const props = defineProps<{
menus: LeftMenuItem[];
}>();
const currentMenu = ref<LeftMenuItem>();
const activeKey = ref<string>();
const handleChangeMenu = (item: LeftMenuItem) => {
currentMenu.value = item;
activeKey.value = item.key;
};
onMounted(() => {
activeKey.value = props.menus[0].key;
});
</script>
<template>
<div class="menu-body">
<div v-if="!isPhone" class="menu-body">
<div class="left-menu">
<div v-for="item in props.menus" :key="item.key" class="mb-6" @click="handleChangeMenu(item)">
<LeftMenuBtn :title="item.title" :icon="item.icon"> </LeftMenuBtn>
</div>
</div>
<div class="right-content">
<slot :name="currentMenu?.key"></slot>
<div class="right-content" style="text-align: left">
<slot :name="activeKey"></slot>
</div>
</div>
<div v-else class="ml-16 mr-16 mt-8 mb-8">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane
v-for="item in props.menus"
:key="item.key"
class="mb-6"
@click="handleChangeMenu(item)"
>
<template #tab>
<!-- <component :is="item.icon"></component> -->
{{ item.title }}
</template>
<div style="text-align: left">
<slot :name="activeKey"></slot>
</div>
</a-tab-pane>
</a-tabs>
</div>
</template>
<style lang="scss" scoped>

4
frontend/src/views/LayoutContainer.vue
View File

@ -8,12 +8,14 @@ import { useCardDragMove } from "@/hooks/useCardDragMove";
import { useCardLayoutComputed, PLACE_HOLDER_CARD } from "@/hooks/useCardLayoutComputed";
import { useRouterParams } from "../hooks/useRouterParams";
import { useLayoutContainerStore } from "@/stores/useLayoutContainerStore";
import { useScreen } from "@/hooks/useScreen";
const { containerState } = useLayoutContainerStore();
const { currentRoutePath } = useRouterParams();
const { getPageLayoutConfig } = useLayoutConfigStore();
const currentLayoutConfig = getPageLayoutConfig(currentRoutePath.value);
const { computedLayout } = useCardLayoutComputed(currentLayoutConfig);
const { isPhone } = useScreen();
const {
dragover,
@ -90,7 +92,7 @@ const {
<div
v-if="currentLayoutConfig.length <= 1 && currentLayoutConfig.length != 0"
class="main-flex-center"
:class="{ 'main-flex-center': !isPhone }"
>
<a-row :gutter="[0, 0]" align="center" style="width: 100%">
<a-col