first commit

vant/packages/vant-cli/site/mobile/.pydio

@@ -0,0 +1 @@
+30e8bd7d-e3e2-45e1-92b5-a2f0e3e45b0a

vant/packages/vant-cli/site/mobile/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <demo-nav />
+    <keep-alive>
+      <router-view />
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import DemoNav from './components/DemoNav';
+
+export default {
+  components: { DemoNav },
+};
+</script>
+
+<style lang="less">
+@import '../common/style/var';
+@import '../common/style/base';
+
+body {
+  min-width: 100vw;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+</style>

vant/packages/vant-cli/site/mobile/components/.pydio

@@ -0,0 +1 @@
+2ac1d033-d3a3-4e0c-bfd7-d9f0d1b5a9e5

vant/packages/vant-cli/site/mobile/components/ArrowRight.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg viewBox="0 0 1024 1024">
+    <path
+      fill="#B6C3D2"
+      d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"
+    />
+    <path
+      fill="#B6C3D2"
+      d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"
+    />
+  </svg>
+</template>

vant/packages/vant-cli/site/mobile/components/DemoBlock.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="van-doc-demo-block">
+    <h2 class="van-doc-demo-block__title">{{ title }}</h2>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'demo-block',
+
+  props: {
+    title: String,
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.van-doc-demo-block {
+  &__title {
+    margin: 0;
+    padding: 32px 16px 16px;
+    color: @van-doc-text-light-blue;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  &:first-of-type {
+    .van-doc-demo-block__title {
+      padding-top: 20px;
+    }
+  }
+}
+</style>

vant/packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="demo-home">
+    <h1
+      class="demo-home__title"
+      :class="{ 'demo-home__title--small': smallTitle }"
+    >
+      <img :src="config.logo" />
+      <span>{{ config.title }}</span>
+    </h1>
+    <h2 v-if="config.description" class="demo-home__desc">
+      {{ config.description }}
+    </h2>
+    <template v-for="(group, index) in config.nav">
+      <demo-home-nav :group="group" :lang="lang" :key="index" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { config } from 'site-mobile-shared';
+import DemoHomeNav from './DemoHomeNav';
+
+export default {
+  components: {
+    DemoHomeNav,
+  },
+
+  computed: {
+    lang() {
+      const { lang } = this.$route.meta;
+      return lang;
+    },
+
+    config() {
+      const { locales } = config.site;
+
+      if (locales) {
+        return locales[this.lang];
+      }
+
+      return config.site;
+    },
+
+    smallTitle() {
+      return this.config.title.length >= 8;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.demo-home {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100vh;
+  padding: 46px 20px 20px;
+  background: #fff;
+
+  &__title,
+  &__desc {
+    padding-left: 16px;
+    font-weight: normal;
+    line-height: 1;
+    user-select: none;
+  }
+
+  &__title {
+    margin: 0 0 16px;
+    font-size: 32px;
+
+    img,
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    img {
+      width: 32px;
+    }
+
+    span {
+      margin-left: 16px;
+      font-weight: 500;
+    }
+
+    &--small {
+      font-size: 24px;
+    }
+  }
+
+  &__desc {
+    margin: 0 0 40px;
+    color: rgba(69, 90, 100, 0.6);
+    font-size: 14px;
+  }
+}
+</style>

vant/packages/vant-cli/site/mobile/components/DemoHomeNav.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="demo-home-nav">
+    <div class="demo-home-nav__title">{{ group.title }}</div>
+    <div class="demo-home-nav__group">
+      <router-link
+        class="demo-home-nav__block"
+        v-for="navItem in group.items"
+        :key="navItem.path"
+        :to="`${base}/${navItem.path}`"
+      >
+        {{ navItem.title }}
+        <arrow-right class="demo-home-nav__icon" />
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import ArrowRight from './ArrowRight';
+
+export default {
+  components: {
+    ArrowRight,
+  },
+
+  props: {
+    lang: String,
+    group: Object,
+  },
+
+  data() {
+    return {
+      active: [],
+    };
+  },
+
+  computed: {
+    base() {
+      return this.lang ? `/${this.lang}` : '';
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.demo-home-nav {
+  &__title {
+    margin: 24px 0 8px 16px;
+    color: rgba(69, 90, 100, 0.6);
+    font-size: 14px;
+  }
+
+  &__block {
+    position: relative;
+    display: flex;
+    margin: 0 0 12px;
+    padding-left: 20px;
+    color: #323233;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 40px;
+    background: #f7f8fa;
+    border-radius: 99px;
+    transition: background 0.3s;
+
+    &:hover {
+      background: darken(#f7f8fa, 3%);
+    }
+
+    &:active {
+      background: darken(#f7f8fa, 6%);
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    top: 50%;
+    right: 16px;
+    width: 16px;
+    height: 16px;
+    margin-top: -8px;
+  }
+}
+</style>

vant/packages/vant-cli/site/mobile/components/DemoNav.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-show="title" class="demo-nav">
+    <div class="demo-nav__title">{{ title }}</div>
+    <svg class="demo-nav__back" viewBox="0 0 1000 1000" @click="onBack">
+      <path fill="#969799" fill-rule="evenodd" :d="path" />
+    </svg>
+  </div>
+</template>
+
+<script>
+/* eslint-disable max-len */
+export default {
+  data() {
+    return {
+      path:
+        'M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z',
+    };
+  },
+
+  computed: {
+    title() {
+      const { name } = this.$route.meta || {};
+      return name ? name.replace(/-/g, '') : '';
+    },
+  },
+
+  methods: {
+    onBack() {
+      history.back();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.demo-nav {
+  position: relative;
+  height: 56px;
+  line-height: 56px;
+  text-align: center;
+  background-color: #fff;
+
+  &__title {
+    font-weight: 500;
+    font-size: 17px;
+    text-transform: capitalize;
+  }
+
+  &__back {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+  }
+}
+</style>

vant/packages/vant-cli/site/mobile/components/DemoSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="van-doc-demo-section" :class="demoName">
+    <slot />
+  </section>
+</template>
+
+<script>
+import { decamelize } from '../../common';
+
+export default {
+  name: 'demo-section',
+
+  computed: {
+    demoName() {
+      const { meta } = this.$route || {};
+      if (meta && meta.name) {
+        return `demo-${decamelize(meta.name)}`;
+      }
+
+      return '';
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.van-doc-demo-section {
+  box-sizing: border-box;
+  min-height: calc(100vh - 56px);
+  padding-bottom: 20px;
+}
+</style>

vant/packages/vant-cli/site/mobile/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta
+      name="description"
+      content="<%= htmlWebpackPlugin.options.description %>"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="<%= htmlWebpackPlugin.options.logo %>"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
+    />
+    <meta http-equiv="Cache-Control" content="no-cache" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <% if (htmlWebpackPlugin.options.baiduAnalytics) { %>
+    <script>
+      // avoid to load analytics in iframe
+      if (window.top === window) {
+        var _hmt = _hmt || [];
+        (function() {
+          var hm = document.createElement('script');
+          hm.src =
+            'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduAnalytics.seed %>';
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(hm, s);
+        })();
+      }
+    </script>
+    <% } %>
+  </head>
+  <body ontouchstart>
+    <div id="app"></div>
+  </body>
+</html>

vant/packages/vant-cli/site/mobile/main.js

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import DemoBlock from './components/DemoBlock';
+import DemoSection from './components/DemoSection';
+import { router } from './router';
+import App from './App';
+import '@vant/touch-emulator';
+
+if (process.env.NODE_ENV !== 'production') {
+  Vue.config.productionTip = false;
+}
+
+Vue.component(DemoBlock.name, DemoBlock);
+Vue.component(DemoSection.name, DemoSection);
+
+setTimeout(() => {
+  new Vue({
+    el: '#app',
+    render: h => h(App),
+    router,
+  });
+}, 0);

vant/packages/vant-cli/site/mobile/router.js

@@ -0,0 +1,98 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import DemoHome from './components/DemoHome';
+import { decamelize } from '../common';
+import { demos, config } from 'site-mobile-shared';
+import { getLang, setDefaultLang } from '../common/locales';
+import '../common/iframe-router';
+
+const { locales, defaultLang } = config.site;
+
+setDefaultLang(defaultLang);
+
+function getLangFromRoute(route) {
+  const lang = route.path.split('/')[1];
+  const langs = Object.keys(locales);
+
+  if (langs.indexOf(lang) !== -1) {
+    return lang;
+  }
+
+  return getLang();
+}
+
+function getRoutes() {
+  const routes = [];
+  const names = Object.keys(demos);
+  const langs = locales ? Object.keys(locales) : [];
+
+  if (langs.length) {
+    routes.push({
+      path: '*',
+      redirect: route => `/${getLangFromRoute(route)}/`,
+    });
+
+    langs.forEach(lang => {
+      routes.push({
+        path: `/${lang}`,
+        component: DemoHome,
+        meta: { lang },
+      });
+    });
+  } else {
+    routes.push({
+      path: '*',
+      redirect: () => '/',
+    });
+
+    routes.push({
+      path: '/',
+      component: DemoHome,
+    });
+  }
+
+  names.forEach(name => {
+    const component = decamelize(name);
+
+    if (langs.length) {
+      langs.forEach(lang => {
+        routes.push({
+          name: `${lang}/${component}`,
+          path: `/${lang}/${component}`,
+          component: demos[name],
+          meta: {
+            name,
+            lang,
+          },
+        });
+      });
+    } else {
+      routes.push({
+        name,
+        path: `/${component}`,
+        component: demos[name],
+        meta: {
+          name,
+        },
+      });
+    }
+  });
+
+  return routes;
+}
+
+Vue.use(VueRouter);
+
+export const router = new VueRouter({
+  mode: 'hash',
+  routes: getRoutes(),
+  scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 },
+});
+
+router.afterEach(() => {
+  if (!router.currentRoute.redirectedFrom) {
+    Vue.nextTick(window.syncPath);
+  }
+});
+
+window.vueRouter = router;