Skip to content

Commit

Permalink
feat: 搭建layout布局
Browse files Browse the repository at this point in the history
  • Loading branch information
1Telescope1 committed Jun 18, 2024
1 parent e28cef8 commit 64e84a6
Show file tree
Hide file tree
Showing 12 changed files with 223 additions and 33 deletions.
8 changes: 8 additions & 0 deletions config/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const PREVIEW_URL =
'//www.mpxjs.cn/mpx-cube-ui/demo-theme-passenger/index.html'

export const THEME = 'passenger'

export const DOCS_HOST = 'https://www.mpxjs.cn/mpx-cube-ui/'

export const EXAMPLE_DOC_PORT = 8090
3 changes: 2 additions & 1 deletion demo/docs/.vitepress/config.mjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { defineConfig } from 'vitepress'
import extendMarkdown from './highlight'
import sidebarConfig from './../config/sidebar'
import sidebarConfig from './sidebar/sidebar'
import fs from 'fs'
import path from 'path'

Expand Down Expand Up @@ -28,6 +28,7 @@ function init() {
extendMarkdown
},
themeConfig: {
aside:false,
logo:
'data:image/png;base64,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',
sidebar: sidebarConfig.concat(list),
Expand Down
1 change: 1 addition & 0 deletions demo/docs/.vitepress/highlight/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ export default md => {
}).value, lang)
}
}

Binary file added demo/docs/.vitepress/public/images/iphoneX.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
6 changes: 3 additions & 3 deletions demo/docs/.vitepress/theme/components/Preview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

<script>
import { throttle } from 'lodash'
import { EXAMPLE_DOC_PORT } from '../../../../config/index'
import { EXAMPLE_DOC_PORT } from '../../../../../config/index'
const baseUrl =
process.env.NODE_ENV === 'development'
Expand Down Expand Up @@ -133,7 +133,7 @@ export default {
this.handleResize()
})
}
img.src = '/mpx-cube-ui/images/iphoneX.png'
img.src = '/mpx-ui/images/iphoneX.png'
img.onload = show
img.onerror = show
this.timer = polling(() => {
Expand Down Expand Up @@ -273,7 +273,7 @@ export default {
background-color #fff
border-radius 20px 20px 100px 100px
// box-shadow 0 8px 12px #ebedf0
background url("/mpx-cube-ui/images/iphoneX.png") no-repeat center 0
background url("/mpx-ui/images/iphoneX.png") no-repeat center 0
background-size 100%
padding 25px
padding-top 54px
Expand Down
99 changes: 99 additions & 0 deletions demo/docs/.vitepress/theme/components/VPContent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<script setup lang="ts">
import NotFound from 'vitepress/dist/client/theme-default/NotFound.vue'
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
import VPDoc from 'vitepress/dist/client/theme-default/components/VPDoc.vue'
import VPHome from 'vitepress/dist/client/theme-default/components/VPHome.vue'
import VPPage from 'vitepress/dist/client/theme-default/components/VPPage.vue'
const { page, frontmatter } = useData()
const { hasSidebar } = useSidebar()
</script>

<template>
<div
class="VPContent"
id="VPContent"
:class="{
'has-sidebar': hasSidebar,
'is-home': frontmatter.layout === 'home'
}"
>
<slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>

<VPPage v-else-if="frontmatter.layout === 'page'">
<template #page-top><slot name="page-top" /></template>
<template #page-bottom><slot name="page-bottom" /></template>
</VPPage>

<VPHome v-else-if="frontmatter.layout === 'home'">
<template #home-hero-before><slot name="home-hero-before" /></template>
<template #home-hero-info-before><slot name="home-hero-info-before" /></template>
<template #home-hero-info><slot name="home-hero-info" /></template>
<template #home-hero-info-after><slot name="home-hero-info-after" /></template>
<template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
<template #home-hero-image><slot name="home-hero-image" /></template>
<template #home-hero-after><slot name="home-hero-after" /></template>
<template #home-features-before><slot name="home-features-before" /></template>
<template #home-features-after><slot name="home-features-after" /></template>
</VPHome>

<component
v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
:is="frontmatter.layout"
/>

<VPDoc v-else>
<template #doc-top><slot name="doc-top" /></template>
<template #doc-bottom><slot name="doc-bottom" /></template>

<template #doc-footer-before><slot name="doc-footer-before" /></template>
<template #doc-before><slot name="doc-before" /></template>
<template #doc-after><slot name="doc-after" /></template>

<template #aside-top><slot name="aside-top" /></template>
<template #aside-outline-before><slot name="aside-outline-before" /></template>
<template #aside-outline-after><slot name="aside-outline-after" /></template>
<template #aside-ads-before><slot name="aside-ads-before" /></template>
<template #aside-ads-after><slot name="aside-ads-after" /></template>
<template #aside-bottom><slot name="aside-bottom" /></template>
</VPDoc>
</div>
</template>

<style scoped>
.VPContent {
flex-grow: 1;
flex-shrink: 0;
margin: var(--vp-layout-top-height, 0px) auto 0;
width: 100%;
}
.VPContent.is-home {
width: 100%;
max-width: 100%;
}
.VPContent.has-sidebar {
margin: 0;
}
@media (min-width: 960px) {
.VPContent {
padding-top: var(--vp-nav-height);
}
.VPContent.has-sidebar {
margin: var(--vp-layout-top-height, 0px) 0 0;
padding-left: var(--vp-sidebar-width);
}
}
@media (min-width: 1440px) {
.VPContent.has-sidebar {
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
}
}
</style>
7 changes: 6 additions & 1 deletion demo/docs/.vitepress/theme/index.mjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import DefaultTheme from 'vitepress/theme'
// import { defineConfig } from 'vitepress'
import Layout from './layouts/Layout.vue'


export default {
extend: DefaultTheme,
Layout: DefaultTheme.Layout
Layout: Layout,
enhanceApp({ router }) {
router.go('/mpx-ui/guide/button.html')
}
}
48 changes: 21 additions & 27 deletions demo/docs/.vitepress/theme/layouts/Layout.vue
Original file line number Diff line number Diff line change
@@ -1,46 +1,39 @@
<template>
<div
class="theme-container"
>
<Navbar ref="navbar" />
<!-- <div class="sidebar-mask" @click="toggleSidebar(false)" />
<Sidebar ref="sidebar" :items="sidebarItems" @toggle-sidebar="toggleSidebar" />
<div class="main-container" :style="style">
<Home class="main" v-if="$page.frontmatter.home" />
<Page class="main" v-else :sidebar-items="sidebarItems" />
<div class="theme-container">
<VPSkipLink />
<VPNav> </VPNav>

<div class="main-container">
<VPSidebar></VPSidebar>
<VPContent class="main"> </VPContent>
<ClientOnly>
<Preview ref="preview" class="show-absolute" />
</ClientOnly>
</div> -->
</div>
</div>
</template>

<script>
// import DefaultTheme from 'vitepress/theme'
// import Home from '@parent-theme/components/Home.vue'
import Navbar from 'vitepress/dist/client/theme-default/components/VPNavBar.vue'
// import Page from '@parent-theme/components/Page.vue'
// import Sidebar from '@parent-theme/components/Sidebar.vue'
// import { resolveSidebarItems } from '@parent-theme/util'
// import Preview from '@theme/components/Preview.vue'
<script setup>
import VPNav from 'vitepress/dist/client/theme-default/components/VPNav.vue'
import VPSidebar from 'vitepress/dist/client/theme-default/components/VPSidebar.vue'
import VPSkipLink from 'vitepress/dist/client/theme-default/components/VPSkipLink.vue'
import VPContent from '../components/VPContent.vue'
import Preview from '../components/Preview.vue'
import { throttle } from 'lodash'
export default {
name: 'Layout',
components: {
Navbar
}
}
import { useData } from 'vitepress'
const { page, frontmatter, theme } = useData()
</script>

<style lang="stylus" scoped>
.theme-container
display: flex
height 100%
.main-container
display flex
min-height 100vh
width 100vw
@media screen and (max-width: $MQMobile)
flex-direction: column
.preview-container
Expand All @@ -61,11 +54,12 @@ export default {
position absolute
right 24px !important
transform none !important
.right-panel
padding-top: var(--vp-nav-height);
min-width:200px
.page
padding-bottom 0
// padding-right 372px
@media screen and (max-width 960px)
padding-right 0
</style>
Empty file removed demo/docs/config/nav.js
Empty file.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
"@rollup/plugin-node-resolve": "^15.2.3",
"@typescript-eslint/eslint-plugin": "^6.8.0",
"highlight.js": "11.9.0",
"stylus": "^0.63.0",
"stylus-loader": "3.0.2",
"typedoc": "^0.25.2",
"typedoc-plugin-missing-exports": "^2.1.0",
"vue-template-compiler": "^2.6.11"
Expand Down
Loading

0 comments on commit 64e84a6

Please sign in to comment.