jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): support mobile layout [支持移动端布局]

Browse Source
This commit is contained in:
Soybean
2023-05-26 08:25:00 +08:00
parent c6207f35e1
commit f2b518ed26
5 changed files with 216 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/basic-layout/index.vue
View File

@ -1,6 +1,7 @@
<template>
<admin-layout
:mode="mode"
:is-mobile="isMobile"
:scroll-mode="theme.scrollMode"
:scroll-el-id="app.scrollElId"
:full-content="app.contentFull"
@ -16,6 +17,7 @@
:footer-visible="theme.footer.visible"
:fixed-footer="theme.footer.fixed"
:right-footer="theme.footer.right"
@click-mobile-sider-mask="app.setSiderCollapse(true)"
>
<template #header>
<global-header v-bind="headerProps" />
@ -46,7 +48,7 @@ defineOptions({ name: 'BasicLayout' });
const app = useAppStore();
const theme = useThemeStore();
const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
const { mode, isMobile, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
</script>
<style lang="scss">

6
src/layouts/common/global-tab/components/tab-detail/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div ref="tabRef" class="flex h-full pr-18px" :class="[isChromeMode ? 'items-end' : 'items-center gap-12px']">
<AdminTab
<PageTab
v-for="item in tab.tabs"
:key="item.fullPath"
:mode="theme.tab.mode"
@ -20,7 +20,7 @@
/>
</template>
{{ item.meta.i18nTitle ? t(item.meta.i18nTitle) : item.meta.title }}
</AdminTab>
</PageTab>
</div>
<context-menu
:visible="dropdown.visible"
@ -34,7 +34,7 @@
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { AdminTab } from '@soybeanjs/vue-materials';
import { PageTab } from '@soybeanjs/vue-materials';
import { useTabStore, useThemeStore } from '@/store';
import { t } from '@/locales';
import { ContextMenu } from './components';