site: full site responsive

2025-01-18 12:34:25 +08:00 · 2021-04-06 01:31:09 +08:00 · 2021-04-06 01:31:09 +08:00 · 55982babf0
commit 55982babf0
parent 8f824033ed
10 changed files with 197 additions and 73 deletions
--- a/build/loaders/convert-md-to-doc.js
+++ b/build/loaders/convert-md-to-doc.js
@ -97,24 +97,25 @@ export default {
  },
  setup () {
    const breakpointRef = useBreakpoint()
-    const isMobileRef = useMemo(() => {
-      return breakpointRef.value === 'xs'
-    })
-    const showAnchorRef = computed(() => {
-      if (isMobileRef.value) {
+    const showAnchorRef = useMemo(() => {
+      const { value: breakpoint } = breakpointRef
+      if (breakpoint === 'xs' || breakpoint === 's') {
        return false
      }
      return ${showAnchor}
    })
+    const useSmallPaddingRef = useMemo(() => {
+      return breakpointRef.value === 'xs'
+    })
    return {
      showAnchor: showAnchorRef,
      wrapperStyle: computed(() => {
-        return !isMobileRef.value
+        return !useSmallPaddingRef.value
          ? 'display: flex; flex-wrap: nowrap; padding: 32px 24px 24px 56px;'
          : 'padding: 16px;'
      }),
      contentStyle: computed(() => {
-        return !isMobileRef.value
+        return showAnchorRef.value
          ? 'width: calc(100% - 180px); margin-right: 36px;'
          : 'width: 100%'; 
      }),
--- a/demo/Site.vue
+++ b/demo/Site.vue
@ -1,10 +1,10 @@
 <template>
-  <n-layout :position="isMobile ? undefined : 'absolute'" class="root-layout">
+  <n-layout :position="isXs ? undefined : 'absolute'" class="root-layout">
    <site-header />
    <n-layout
      class="home-layout"
-      :style="isMobile ? undefined : 'top: 64px; overflow: hidden'"
-      :position="isMobile ? undefined : 'absolute'"
+      :style="isXs ? undefined : 'top: 64px; overflow: hidden'"
+      :position="isXs ? undefined : 'absolute'"
    >
      <router-view />
    </n-layout>
@ -15,7 +15,7 @@
 import { onMounted, inject } from 'vue'
 import SiteHeader from './SiteHeader.vue'
 import { loadingBarApiRef } from './routes/router'
-import { useIsMobile } from './utils/composables'
+import { useIsXs } from './utils/composables'

 export default {
  name: 'Site',
@ -24,7 +24,7 @@ export default {
  },
  setup () {
    const loadingBar = inject('loadingBar')
-    const isMobileRef = useIsMobile()
+    const isXsRef = useIsXs()
    onMounted(() => {
      loadingBarApiRef.value = loadingBar
      loadingBar.finish()
@ -36,7 +36,7 @@ export default {
      }
    })
    return {
-      isMobile: isMobileRef
+      isXs: isXsRef
    }
  }
 }
--- a/demo/SiteHeader.vue
+++ b/demo/SiteHeader.vue
@ -2,10 +2,10 @@
  <n-layout-header bordered class="nav" :style="style">
    <n-text tag="div" class="ui-logo" :depth="1" @click="handleLogoClick">
      <img src="./assets/images/naivelogo.svg" />
-      <span v-if="!isMobile">Naive UI</span>
+      <span v-if="!isXs">Naive UI</span>
    </n-text>
-    <div :style="!isMobile ? 'display: flex; align-items: center;' : ''">
-      <div class="nav-menu" v-if="!isMobile">
+    <div :style="!isXs ? 'display: flex; align-items: center;' : ''">
+      <div class="nav-menu" v-if="!isS">
        <n-menu
          mode="horizontal"
          :value="menuValue"
@ -15,7 +15,7 @@
      </div>
      <n-auto-complete
        v-model:value="searchPattern"
-        :style="!isMobile ? 'width: 216px; margin-left: 24px' : undefined"
+        :style="!isXs ? 'width: 216px; margin-left: 24px' : undefined"
        :placeholder="t('searchPlaceholder')"
        :options="searchOptions"
        clear-after-select
@ -23,7 +23,63 @@
        @select="handleSearch"
      />
    </div>
-    <div style="display: flex" v-if="!isMobile">
+    <n-popover
+      v-if="isXs"
+      style="padding: 0; width: 288px"
+      placement="bottom-end"
+      display-directive="show"
+      trigger="click"
+    >
+      <template #trigger>
+        <n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
+      </template>
+      <div style="overflow: auto; max-height: 80vh">
+        <n-menu
+          :value="xsMenuValue"
+          :options="xsMenuOptions"
+          :indent="18"
+          @update:value="handleUpdateXsMenu"
+        />
+      </div>
+    </n-popover>
+    <n-popover
+      v-else-if="isS"
+      style="padding: 0; width: 288px"
+      placement="bottom-end"
+      display-directive="show"
+      trigger="hover"
+    >
+      <template #trigger>
+        <n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
+      </template>
+      <div style="overflow: auto; max-height: 80vh">
+        <n-menu
+          :value="sMenuValue"
+          :options="sMenuOptions"
+          :indent="18"
+          @update:value="handleUpdateSMenu"
+        />
+      </div>
+    </n-popover>
+    <div style="display: flex" v-else-if="isM">
+      <n-popover
+        style="padding: 0; width: 180px"
+        placement="bottom-end"
+        display-directive="show"
+        trigger="hover"
+      >
+        <template #trigger>
+          <n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
+        </template>
+        <n-menu
+          :value="mMenuValue"
+          :options="mMenuOptions"
+          :indent="18"
+          @update:value="handleUpdateMMenu"
+        />
+      </n-popover>
+    </div>
+    <div style="display: flex" v-else>
      <n-button size="small" class="nav-picker" @click="handleThemeUpdate">
        {{ themeLabelMap[theme] }}
      </n-button>
@ -66,25 +122,6 @@
        {{ version }}
      </n-button>
    </div>
-    <n-popover
-      v-else
-      style="padding: 0; width: 288px"
-      placement="bottom-end"
-      display-directive="show"
-      trigger="click"
-    >
-      <template #trigger>
-        <n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
-      </template>
-      <div style="overflow: auto; max-height: 80vh">
-        <n-menu
-          :value="mobileMenuValue"
-          :options="mobileMenuOptions"
-          :indent="18"
-          @update:value="handleMobileUpdateMenu"
-        />
-      </div>
-    </n-popover>
  </n-layout-header>
 </template>

@ -93,7 +130,7 @@ import { computed, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useMessage, version } from 'naive-ui'
 import { MenuOutline } from '@vicons/ionicons5'
-import { i18n, useIsMobile } from './utils/composables'
+import { i18n, useIsXs, useIsM, useIsS } from './utils/composables'
 import { findMenuValue } from './utils/route'
 import {
  useThemeName,
@ -199,10 +236,71 @@ export default {
      return null
    })

-    // mobile options
+    // m options
+    const mMenuOptionsRef = computed(() => [
+      {
+        key: 'theme',
+        title: themeLabelMapRef.value[themeNameRef.value]
+      },
+      {
+        key: 'locale',
+        title: localeNameRef.value === 'zh-CN' ? 'English' : '中文'
+      }
+    ])
+    function handleUpdateMMenu (value, { path }) {
+      if (value === 'theme') {
+        handleThemeUpdate()
+      } else if (value === 'locale') {
+        if (localeNameRef.value === 'zh-CN') {
+          localeNameRef.value = 'en-US'
+        } else {
+          localeNameRef.value = 'zh-CN'
+        }
+      }
+    }
+
+    // s opitions
+    const sMenuOptionsRef = computed(() => {
+      return [
+        {
+          key: 'theme',
+          title: themeLabelMapRef.value[themeNameRef.value]
+        },
+        {
+          key: 'locale',
+          title: localeNameRef.value === 'zh-CN' ? 'English' : '中文'
+        },
+        {
+          key: 'home',
+          title: t('home')
+        },
+        {
+          key: 'doc',
+          title: t('doc')
+        },
+        {
+          key: 'component',
+          title: t('component')
+        }
+      ]
+    })
+    function handleUpdateSMenu (value) {
+      if (value === 'theme') {
+        handleThemeUpdate()
+      } else if (value === 'locale') {
+        if (localeNameRef.value === 'zh-CN') {
+          localeNameRef.value = 'en-US'
+        } else {
+          localeNameRef.value = 'zh-CN'
+        }
+      } else {
+        handleMenuUpdateValue(value)
+      }
+    }
+    // xs options
    const docOptionsRef = useDocOptions()
    const componentOptionsRef = useComponentOptions()
-    const mobileMenuOptionsRef = computed(() => {
+    const xsMenuOptionsRef = computed(() => {
      return [
        {
          key: 'theme',
@ -228,11 +326,11 @@ export default {
        }
      ]
    })
-    const mobileMenuValueRef = computed(() => {
+    const xsMenuValueRef = computed(() => {
      if (route.name === 'home') return 'home'
-      return findMenuValue(mobileMenuOptionsRef.value, route.path)
+      return findMenuValue(xsMenuOptionsRef.value, route.path)
    })
-    function handleMobileUpdateMenu (value, { path }) {
+    function handleUpdateXsMenu (value, { path }) {
      if (value === 'theme') {
        handleThemeUpdate()
      } else if (value === 'locale') {
@ -344,7 +442,7 @@ export default {
    }

    // common
-    const isMobileRef = useIsMobile()
+    const isXsRef = useIsXs()
    function handleLogoClick () {
      if (/^(\/[^/]+){2}$/.test(route.path)) {
        message.info(t('alreadyHome'))
@ -354,13 +452,15 @@ export default {
    }

    return {
-      // mobileMenuOptions,
+      // xsMenuOptions,
      tusimple: process.env.TUSIMPLE,
      dev: __DEV__,
      message,
      t,
      version,
-      isMobile: isMobileRef,
+      isXs: isXsRef,
+      isM: useIsM(),
+      isS: useIsS(),
      // theme
      theme: themeNameRef,
      handleThemeUpdate,
@ -385,14 +485,22 @@ export default {
      menuOptions: menuOptionsRef,
      menuValue: menuValueRef,
      handleMenuUpdateValue,
-      // mobile menu
-      mobileMenuOptions: mobileMenuOptionsRef,
-      handleMobileUpdateMenu,
-      mobileMenuValue: mobileMenuValueRef,
+      // m menu
+      mMenuOptions: mMenuOptionsRef,
+      handleUpdateMMenu,
+      mMenuValue: null,
+      // s menu
+      sMenuOptions: sMenuOptionsRef,
+      handleUpdateSMenu,
+      sMenuValue: menuValueRef,
+      // xs menu
+      xsMenuOptions: xsMenuOptionsRef,
+      handleUpdateXsMenu,
+      xsMenuValue: xsMenuValueRef,
      // common
      handleLogoClick,
      style: computed(() => {
-        return isMobileRef.value
+        return isXsRef.value
          ? {
              '--side-padding': '16px',
              'grid-template-columns': 'auto 1fr auto'
--- a/demo/pages/Layout.vue
+++ b/demo/pages/Layout.vue
@ -1,7 +1,8 @@
 <template>
-  <n-layout has-sider :position="isMobile ? undefined : 'absolute'">
+  <n-layout has-sider :position="isXs ? undefined : 'absolute'">
    <n-layout-sider
      :native-scrollbar="false"
+      :collapsed-width="0"
      bordered
      show-trigger="bar"
      v-if="showSider"
@ -23,7 +24,7 @@
 import { computed, watch, toRef, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { findMenuValue } from '../utils/route'
-import { useIsMobile } from '../utils/composables'
+import { useIsXs } from '../utils/composables'
 import { useDocOptions, useComponentOptions } from '../store'
 import { useBreakpoint, useMemo } from 'vooks'

@ -61,7 +62,7 @@ export default {
      layoutInstRef,
      options: optionsRef,
      menuValue: menuValueRef,
-      isMobile: useIsMobile(),
+      isXs: useIsXs(),
      handleMenuUpdateValue: (_, option) => {
        router.push(option.path)
      }
--- a/demo/pages/home/index.vue
+++ b/demo/pages/home/index.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <div class="banner">
-      <right-image class="right-image" v-if="!isMobile" />
+      <right-image class="right-image" v-if="!isXs" />
      <n-h1 :style="titleStyle" class="naive-title">
        <span
          @mouseenter="handleTitleMouseEnter"
@ -46,7 +46,7 @@
      <left-image class="left-image" />
    </div>
    <n-layout-footer
-      :position="isMobile ? undefined : 'absolute'"
+      :position="isXs ? undefined : 'absolute'"
      style="z-index: auto"
    >
      <landing-footer style="max-width: 1200px; margin: auto" />
@ -59,7 +59,7 @@ import { computed } from 'vue'
 import LandingFooter from './Footer.vue'
 import leftImage from './Left.vue'
 import rightImage from './Right.vue'
-import { i18n, useIsMobile } from '../../utils/composables'
+import { i18n, useIsXs } from '../../utils/composables'
 import { useThemeName } from '../../store'

 export default {
@ -69,12 +69,12 @@ export default {
    rightImage
  },
  setup () {
-    const isMobileRef = useIsMobile()
+    const isXsRef = useIsXs()
    return {
-      isMobile: isMobileRef,
+      isXs: isXsRef,
      theme: useThemeName(),
      titleStyle: computed(() => {
-        if (isMobileRef.value) {
+        if (isXsRef.value) {
          return 'margin-top: 0; font-size: 64px !important'
        } else {
          return 'margin-top: 0; font-size: 80px !important'
@ -180,7 +180,7 @@ export default {
  transform: translateY(-50%);
 }

-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 639px) {
  .banner {
    position: static;
    text-align: left;
--- a/demo/store/index.js
+++ b/demo/store/index.js
@ -10,7 +10,7 @@ import {
  useOsTheme
 } from 'naive-ui'
 import { TsConfigProvider } from '../../themes/tusimple/src'
-import { i18n, useIsMobile } from '../utils/composables'
+import { i18n, useIsXs } from '../utils/composables'
 import {
  createDocumentationMenuOptions,
  createComponentMenuOptions
@ -119,10 +119,10 @@ const flattenedDocOptionsRef = computed(() => {

 export function siteSetup () {
  i18n.provide(computed(() => localeNameRef.value))
-  const isMobileRef = useIsMobile()
+  const isXsRef = useIsXs()
  return {
    themeEditorStyle: computed(() => {
-      return isMobileRef.value ? 'right: 18px; bottom: 24px;' : undefined
+      return isXsRef.value ? 'right: 18px; bottom: 24px;' : undefined
    }),
    configProvider: configProviderRef,
    hljs,
--- a/demo/store/menu-options.js
+++ b/demo/store/menu-options.js
@ -600,7 +600,7 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
    },
    ...createDeprecatedDemos(
      {
-        en: 'Deprecated',
+        en: '--Deprecated',
        children: [
          {
            en: 'Nimbus Service Layout',
@ -612,7 +612,7 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
    ),
    ...createDebugDemos(
      {
-        en: 'Debug',
+        en: '--Debug',
        children: [
          {
            en: 'SuffixDebug',
--- a/demo/styles/demo.css
+++ b/demo/styles/demo.css
@ -5,7 +5,7 @@ body {
  -webkit-text-size-adjust: 100%;
 }

-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 639px) {
  body {
    overflow: visible;
  }
--- a/demo/utils/ComponentDemos.tsx
+++ b/demo/utils/ComponentDemos.tsx
@ -1,5 +1,5 @@
-import { defineComponent, Fragment, h } from 'vue'
-import { useMemo, useBreakpoint } from 'vooks'
+import { defineComponent, Fragment, h, computed } from 'vue'
+import { useIsM } from './composables'

 export default defineComponent({
  name: 'ComponentDemos',
@ -10,9 +10,9 @@ export default defineComponent({
    }
  },
  setup (props) {
-    const breakpointRef = useBreakpoint()
-    const mergedColsRef = useMemo(() => {
-      return ['xs', 's', 'm'].includes(breakpointRef.value) ? 1 : props.span
+    const isMRef = useIsM()
+    const mergedColsRef = computed(() => {
+      return isMRef.value ? 1 : props.span
    })
    return {
      mergedCols: mergedColsRef
--- a/demo/utils/composables.js
+++ b/demo/utils/composables.js
@ -1,13 +1,27 @@
 import { toRef, inject, provide, reactive, watchEffect } from 'vue'
 import { useBreakpoint, useMemo } from 'vooks'

-export function useIsMobile () {
+export function useIsXs () {
  const breakpointRef = useBreakpoint()
  return useMemo(() => {
    return breakpointRef.value === 'xs'
  })
 }

+export function useIsS () {
+  const breakpointRef = useBreakpoint()
+  return useMemo(() => {
+    return ['xs', 's'].includes(breakpointRef.value)
+  })
+}
+
+export function useIsM () {
+  const breakpointRef = useBreakpoint()
+  return useMemo(() => {
+    return ['xs', 's', 'm'].includes(breakpointRef.value)
+  })
+}
+
 export const i18n = function (data) {
  const localeReactive = inject('i18n', null)
  return {