refactor($i18n-ui): simplify

Author: ulivz

packages/@vuepress/plugin-i18n-ui/client.js

@@ -1,5 +1,7 @@
 import Layout from './index.vue'
+// TODO move default theme styl to core.
+import '@theme/styles/theme.styl'
 
 export default ({ Vue }) => {
-  Vue.component('I18nUI', Layout)
+  Vue.component('I18nUILayout', Layout)
 }

packages/@vuepress/plugin-i18n-ui/index.js

@@ -12,8 +12,10 @@ module.exports = (pluginOptions = {}, context) => ({
 
   additionalPages: [
     {
-      filePath: path.resolve(__dirname, 'index.md'),
-      permalink: pluginOptions.permalink || '/i18n/'
+      permalink: pluginOptions.permalink || '/i18n/',
+      frontmatter: {
+        'layout': 'I18nUILayout'
+      }
     }
   ]
 })

packages/@vuepress/plugin-i18n-ui/index.md

@@ -1,6 +1,5 @@
 <template>
-  <div id="vuepress-plugin-i18n-ui">
-
+  <div class="theme-container" id="vuepress-plugin-i18n-ui">
     <div class="tool-box">
       <span class="select-lang">Language:&nbsp;</span>
       <select>
@@ -17,18 +16,12 @@
     <div class="helper-content">
       <div id="left">
         <transition name="slide-left">
-          <Content
-            v-if="currentPageComponent"
-            :page-key="key"
-          />
+          <Content :page-key="key"/>
         </transition>
       </div>
       <div id="right">
         <transition name="slide-left">
-          <Content
-            v-if="rightPageComponent"
-            :page-key="rightKey"
-          />
+          <Content :page-key="rightKey"/>
         </transition>
       </div>
     </div>
@@ -41,16 +34,12 @@ import { findPageForPath } from '@app/util'
 export default {
   data () {
     return {
-      currentPagePath: '/',
-      currentPageComponent: null,
-      rightPageComponent: null
+      currentPagePath: '/'
     }
   },
 
   mounted () {
     syncScroll()
-    this.loadComponent(this.key, 'currentPageComponent')
-    this.loadComponent(this.rightKey, 'rightPageComponent')
   },
 
   computed: {