Docs: 迁移 vitepress 移动端样式修复 & 配置更新

docs-vitepress/.vitepress/config.ts

@@ -207,6 +207,55 @@ const sidebar = {
     ],
 }
 
+const algoliaTranslations = {
+    button: {
+        buttonText: "搜索",
+    },
+    modal: {
+        searchBox: {
+            resetButtonTitle: "清除查询条件",
+            resetButtonAriaLabel: "清除查询条件",
+            cancelButtonText: "取消",
+            cancelButtonAriaLabel: "取消",
+        },
+        startScreen: {
+            recentSearchesTitle: "搜索历史",
+            noRecentSearchesText: "没有搜索历史",
+            saveRecentSearchButtonTitle: "保存到搜索历史",
+            removeRecentSearchButtonTitle: "从搜索历史中移除",
+            favoriteSearchesTitle: "收藏",
+            removeFavoriteSearchButtonTitle: "从收藏中移除",
+        },
+        errorScreen: {
+            titleText: "无法获取结果",
+            helpText: "你可能需要检查你的网络连接",
+        },
+        footer: {
+            selectText: "选择",
+            navigateText: "切换",
+            closeText: "关闭",
+            searchByText: "搜索供应商",
+        },
+        noResultsScreen: {
+            noResultsText: "无法找到相关结果",
+            suggestedQueryText: "你可以尝试查询",
+            reportMissingResultsText: "你认为这个查询应该有结果？",
+            reportMissingResultsLinkText: "向我们反馈",
+        },
+    },
+}
+
+const i18n = {
+    search: '搜索',
+    menu: '菜单',
+    toc: '本页目录',
+    returnToTop: '返回顶部',
+    appearance: '外观',
+    previous: '前一篇',
+    next: '下一篇',
+    pageNotFound: '页面未找到',
+}
+
 const ogUrl = "https://mpxjs.cn/"
 const ogImage = `${ogUrl}logo.png`
 const title = "Mpx 框架"
@@ -256,24 +305,6 @@ export default withPwa(
                 short_name: "Mpx",
                 description,
                 theme_color: "#ffffff",
-                // icons: [
-                //     {
-                //         src: 'pwa-192x192.png',
-                //         sizes: '192x192',
-                //         type: 'image/png',
-                //     },
-                //     {
-                //         src: 'pwa-512x512.png',
-                //         sizes: '512x512',
-                //         type: 'image/png',
-                //     },
-                //     {
-                //         src: 'pwa-512x512.png',
-                //         sizes: '512x512',
-                //         type: 'image/png',
-                //         purpose: 'any maskable',
-                //     },
-                // ],
             },
             workbox: {
                 globPatterns: ["**/*.{css,js,html,svg,png,ico,txt,woff2}"],
@@ -292,21 +323,9 @@ export default withPwa(
                 apiKey: "a34809e24ae1eb13ca3afc255d0a0cef",
                 indexName: "mpxjs",
                 placeholder: "搜索文档",
-                translations: {
-                    button: {
-                        buttonText: "搜索",
-                    },
-                },
+                translations: algoliaTranslations,
             },
             logo: "/favicon.ico",
-            docFooter: {
-                prev: "上一页",
-                next: "下一页",
-            },
-            outline: {
-                level: [2, 3],
-                label: "本页目录",
-            },
             socialLinks: [
                 { icon: "github", link: "https://github.com/didi/mpx" },
             ],
@@ -338,7 +357,24 @@ export default withPwa(
                     target: "_blank",
                 },
             ],
+            outline: {
+                level: [2, 3],
+                label: "本页目录",
+            },
             sidebar,
+            darkModeSwitchLabel: "外观",
+            sidebarMenuLabel: "菜单",
+            returnToTopLabel: "返回顶部",
+            langMenuLabel: "语言",
+            notFound: {
+                title: "页面未找到",
+                linkText: "返回首页",
+                quote: "😩 抱歉，迷路了～"
+            },
+            docFooter: {
+                prev: "上一页",
+                next: "下一页",
+            },
         },
         // @ts-ignore
         chainWebpack: (config) => {

docs-vitepress/.vitepress/theme/components/CodeList.vue

@@ -9,7 +9,7 @@
           </transition>
         </div>
       </popover> -->
-      <img width="150" height="170" :src="item.code" alt="code" loading="lazy" />
+      <img width="150" style="height: 170px;" :src="item.code" alt="code" loading="lazy" />
     </div>
   </div>
 </template>

docs-vitepress/.vitepress/theme/components/MobileSwiper.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="swiper-container" ref="container" :style="getStyle">
-    <div class="swiper" :style="getMode" ref="wrapper" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
+    <div class="swiper" ref="wrapper" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
       <div
         ref="list"
         class="swiper-list"
@@ -59,9 +59,6 @@ export default {
     getStyle () {
       return `height: ${this.height}px;`
     },
-    getMode () {
-      return this.isMove ? 'transition: transform 0s;' : 'transition: transform 0.3s;'
-    },
     getWidth () {
       return `width: ${this.offsetWidth}px;`
     }
@@ -149,6 +146,7 @@ export default {
       const moveX = touch.clientX - this.touchInfo.clientX
       const distance = this.current * this.offsetWidth  - moveX
       wrapper.style.transform = `translateX(${-distance}px)`
+      wrapper.style.transition = 'transform 0s'
       this.touchInfo.moveX = moveX
     },
     handleEnd () {
@@ -174,6 +172,7 @@ export default {
         }
       }
       const wrapper = this.$refs.wrapper
+      wrapper.style.transition = 'transform 0.3s'
       switch (nextPage) {
         case 0:
           wrapper.style.transform = `translateX(${-this.current * this.offsetWidth}px)`
@@ -209,7 +208,7 @@ export default {
   white-space nowrap
   transform translateX(0)
   display inline-block
-  // transition transform 0.3s
+  transition transform 0.3s
 .swiper-list
   width 100%
   // height 132px

docs-vitepress/.vitepress/theme/components/MobileView.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="m-banner-wrapper">
     <div class="m-banner">
-      <div class="m-title">{{ $page.frontmatter.heroText }}</div>
+      <div class="m-title">{{ $frontmatter.heroText }}</div>
       <div class="m-subtitle">
-        {{ $page.frontmatter.tagline }}
+        {{ $frontmatter.tagline }}
       </div>
 
       <div class="m-banner-btn-wrapper">
         <button class="m-banner-btn m-banner-btn-enter">
-          <a style="font-size: 15px;" :href="$page.frontmatter.actionLink">
-            {{ $page.frontmatter.actionText }}
+          <a style="font-size: 15px;" :href="$frontmatter.actionLink">
+            {{ $frontmatter.actionText }}
           </a>
         </button>
         <div class="m-banner-btn m-banner-btn-jump">
-          <a class="white-link" :href="$page.frontmatter.githubLink">
-            {{ $page.frontmatter.githubText }}
+          <a class="white-link" :href="$frontmatter.githubLink">
+            {{ $frontmatter.githubText }}
           </a>
         </div>
       </div>
@@ -24,22 +24,22 @@
     <div class="m-advantages">
       <li
         class="m-advan-section"
-        v-for="(item, index) in $page.frontmatter.features"
+        v-for="(item, index) in $frontmatter.features"
         :key="index"
       >
         <img
           class="m-advan-section-img"
           :src="item.micon"
           loading="lazy"
           width="34"
-          height="34"
+          style="height: 34px;"
         />
         <p class="m-advan-section-title">{{ item.title }}</p>
       </li>
     </div>
 
     <div class="mdemo-wrapper">
-      <div class="mdemo-title">{{ $page.frontmatter.threeSection.title }}</div>
+      <div class="mdemo-title">{{ $frontmatter.threeSection.title }}</div>
       <p class="mdemo-subtitle">
         扫码体验Mpx版本的
         <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
@@ -48,58 +48,58 @@
         进入查看。
       </p>
       <!-- <a class="mdemo-btn" href="/">
-        {{ $page.frontmatter.threeSection.actionText }}
+        {{ $frontmatter.threeSection.actionText }}
       </a> -->
       <div class="mdemo-icon-wrapper">
         <div style="margin: 0 6px;" v-for="(item, index) in mvcList" :key="index">
-          <img width="130" height="150" :src="item.code" alt="code" loading="lazy" />
+          <img width="130" style="height: 150px;" :src="item.code" alt="code" loading="lazy" />
         </div>
       </div>
     </div>
 
     <div class="m-feature-wrapper">
       <div class="m-feature-title">
-        {{ $page.frontmatter.fourSection.title }}
+        {{ $frontmatter.fourSection.title }}
       </div>
       <div class="m-feature-subtitle">
-        {{ $page.frontmatter.fourSection.details }}
+        {{ $frontmatter.fourSection.details }}
       </div>
-      <a class="m-feature-btn" :href="$page.frontmatter.fourSection.actionLink">
-        {{ $page.frontmatter.fourSection.actionText }}
+      <a class="m-feature-btn" :href="$frontmatter.fourSection.actionLink">
+        {{ $frontmatter.fourSection.actionText }}
       </a>
       <img
         class="m-feature-pic"
         width="100%"
-        height="309px"
-        :src="$page.frontmatter.fourSection.mimg"
+        style="height: 309px;"
+        :src="$frontmatter.fourSection.mimg"
         alt="platform"
         loading="lazy"
       />
 
       <div class="m-feature-title">
-        {{ $page.frontmatter.fiveSection.title }}
+        {{ $frontmatter.fiveSection.title }}
       </div>
       <div class="m-feature-subtitle">
-        {{ $page.frontmatter.fiveSection.details }}
+        {{ $frontmatter.fiveSection.details }}
       </div>
-      <a class="m-feature-btn" :href="$page.frontmatter.fourSection.actionLink">
-        {{ $page.frontmatter.fiveSection.actionText }}
+      <a class="m-feature-btn" :href="$frontmatter.fourSection.actionLink">
+        {{ $frontmatter.fiveSection.actionText }}
       </a>
       <img
         class="m-feature-pic"
         width="100%"
-        height="309px"
-        :src="$page.frontmatter.fiveSection.mimg"
+        style="height: 309px;"
+        :src="$frontmatter.fiveSection.mimg"
         alt="platform"
         loading="lazy"
       />
     </div>
 
     <div class="m-util-wrapper">
-      <div class="m-util-title">{{$page.frontmatter.sixSection.title}}</div>
+      <div class="m-util-title">{{$frontmatter.sixSection.title}}</div>
       <ul class="row six-section__row" v-for="(item, index) in list" :key="index">
         <a :href="item.actionLink" class="six-section__item six-section__step">
-          <img class="six-section__icon" :src="item.icon" alt="svg" loading="lazy" width="50" height="50" />
+          <img class="six-section__icon" :src="item.icon" alt="svg" loading="lazy" width="50" style="height: 50px;" />
           <div class="six-section__list">
             <div class="six-section__bold">{{item.title}}</div>
             <div class="six-section__subtitle">{{item.details}}</div>
@@ -109,11 +109,11 @@
     </div>
 
     <div class="m-example-wrapper">
-      <div class="m-example-title">{{$page.frontmatter.sevenSection.title}}</div>
+      <div class="m-example-title">{{$frontmatter.sevenSection.title}}</div>
         <div class="m-example-phone">
           <img
               width="318"
-              height="318"
+              style="height: 318px;"
               src="https://dpubstatic.udache.com/static/dpubimg/xxjYvzgJdt/y_bg_phone.png"
               alt="phone"/>
           <div class="m-example-img-contain">
@@ -155,10 +155,10 @@ export default {
   },
   computed: {
     list () {
-      return this.$page.frontmatter.sixSection.details
+      return this.$frontmatter.sixSection.details
     },
     multiList () {
-      const list = this.$page.frontmatter.sevenSection.details
+      const list = this.$frontmatter.sevenSection.details
       const result = []
       let temp = []
       for (let i = 0; i < list.length; i++) {
@@ -172,11 +172,11 @@ export default {
       return result
     },
     mvcList() {
-      const list = this.$page.frontmatter.threeSection.list
+      const list = this.$frontmatter.threeSection.list
       return list
     },
     dataList () {
-      const list = this.$page.frontmatter.sevenSection.details
+      const list = this.$frontmatter.sevenSection.details
       return list
     }
   },

docs-vitepress/.vitepress/theme/components/Navbar.vue

@@ -2,12 +2,12 @@
   <header class="header">
     <div class="header-menu" v-if="smallMode">
       <a href="/">
-        <img style="vertical-align: middle;" height="20" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png" alt="logo">
+        <img style="vertical-align: middle;height: 20px;" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png" alt="logo">
       </a>
       <div style="display: flex; align-items: center;">
         <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
         <span class="header-menu-icon">
-          <img @click="toggleSidebar" height="14" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png" alt="menu">
+          <img @click="toggleSidebar" style="height: 14px;" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png" alt="menu">
         </span>
       </div>
     </div>
@@ -147,6 +147,7 @@ export default {
 
 .header-menu {
   width: 100%;
+  height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;

docs-vitepress/.vitepress/theme/components/Swiper.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="swiper-container">
     <div class="swiper-button">
-      <img :class="leftButtonDisabled" class="swiper-img" @click="handlePrev" src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" height="50" alt="left" loading="lazy" />
+      <img :class="leftButtonDisabled" class="swiper-img" @click="handlePrev" src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" style="height: 50px;" alt="left" loading="lazy" />
     </div>
     <div class="swiper" ref="wrapper">
       <div
@@ -13,14 +13,14 @@
         @transitionend="handleEnd">
         <div class="swiper-item">
           <div>
-            <div><img width="80" height="80" :src="item.img" alt="二维码" loading="lazy" /></div>
+            <div><img width="80" style="height: 80px;" :src="item.img" alt="二维码" loading="lazy" /></div>
             <div>{{item.title}}</div>
           </div>
         </div>
       </div>
     </div>
     <div class="swiper-button">
-      <img :class="rightButtonDisabled" class="swiper-img" @click="handleNext" src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" height="50" alt="right" loading="lazy" />
+      <img :class="rightButtonDisabled" class="swiper-img" @click="handleNext" src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" style="height: 50px;" alt="right" loading="lazy" />
     </div>
   </div>
 </template>