Merge branch 'master' of https://github.com/didi/mpx

docs-vitepress/.vitepress/config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "vitepress"
 import { withPwa } from "@vite-pwa/vitepress"
+import { algoliaTranslations } from "./theme/translations"
 
 const sidebar = {
     "/guide/": [
@@ -217,14 +218,20 @@ export default withPwa(
         base: "/",
         head: [
             ["link", { rel: "icon", href: "/favicon.ico" }],
+            ["link", { rel: "manifest", href: "/manifest.webmanifest" }],
+            [
+                "script",
+                { id: "unregister-sw" },
+                "if('serviceWorker' in navigator) window.addEventListener('load', (e) => navigator.serviceWorker.register('/service-worker.js', { scope: '/' }))",
+            ],
             [
                 "script",
                 { type: "text/javascript" },
                 `(function(c,l,a,r,i,t,y){
                 c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                 t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                 y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-            })(window, document, "clarity", "script", "jtvvy52wxy");`,
+                })(window, document, "clarity", "script", "jtvvy52wxy");`,
             ],
             ["meta", { name: "author", content: title }],
             ["meta", { property: "og:type", content: "website" }],
@@ -252,28 +259,17 @@ export default withPwa(
             scope: "/",
             includeAssets: ["favicon.ico", "logo.png"],
             manifest: {
-                name: title,
+                name: "Mpx",
                 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',
-                //     },
-                // ],
+                icons: [
+                    {
+                        src: "https://dpubstatic.udache.com/static/dpubimg/1ESVodfAED/logo.png",
+                        sizes: "192x192",
+                        type: "image/png",
+                    },
+                ],
             },
             workbox: {
                 globPatterns: ["**/*.{css,js,html,svg,png,ico,txt,woff2}"],
@@ -292,21 +288,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 +322,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/AlgoliaSearchBox.vue

@@ -8,18 +8,21 @@
 <script>
 import docsearch from '@docsearch/js'
 import '@docsearch/css'
+import { algoliaTranslations } from "../../theme/translations"
+
 export default {
   props: ['options'],
   mounted () {
     this.initialize()
   },
   methods: {
     initialize () {
-    docsearch({
-      container: '#docsearch-container',
-      appId: 'DZ8S6HN0MP',
-      apiKey: 'a34809e24ae1eb13ca3afc255d0a0cef',
-      indexName: 'mpxjs',
+      docsearch({
+        container: '#docsearch-container',
+        appId: 'DZ8S6HN0MP',
+        apiKey: 'a34809e24ae1eb13ca3afc255d0a0cef',
+        indexName: 'mpxjs',
+        translations: algoliaTranslations,
       })
     }
   },

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,82 +24,82 @@
     <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;display: inline-block;"
         />
         <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版本的
+        扫码体验 Mpx 版本的
         <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
-        在各个小程序平台和web中的一致表现 ，更多示例项目可点击
+        在各个小程序平台和 web 中的一致表现 ，更多示例项目可点击
         <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples">这里</a>
         进入查看。
       </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
     }
   },