chore: sites add international

src/packages/locale/index.ts

@@ -1,22 +1,33 @@
 import { ref, reactive } from 'vue';
 import ZhCNLang from './lang/zh-CN';
 import EnUSLang from './lang/en-US';
+import { deepMerge } from '../utils/util';
 // 组件默认语言设置
-const currentLang = ref('zh-CN');
+
 export type Lang = Record<string, any>;
 const langs = reactive<Lang>({
   'zh-CN': new ZhCNLang(),
   'en-US': new EnUSLang()
 });
 export class Locale {
+  static currentLang = ref('en-US');
   static languages(): Lang {
-    return langs[currentLang.value];
+    return langs[this.currentLang.value];
   }
   static use(lang: string, newLanguages?: any) {
     if (newLanguages) {
       langs[lang] = new newLanguages();
     }
-    currentLang.value = lang;
+    this.currentLang.value = lang;
+  }
+  static merge(lang: string, newLanguages: any) {
+    if (newLanguages) {
+      if (langs[lang]) {
+        deepMerge(langs[lang], newLanguages);
+      } else {
+        this.use(lang, newLanguages);
+      }
+    }
   }
 }
 export default Locale;

src/packages/utils/create/component.ts

@@ -39,11 +39,22 @@ export function createComponent(name: string) {
       };
       return defineComponent(_component as any);
     } as typeof defineComponent,
-    createDemo: function (_component: any) {
+    createDemo: function <
+      PropsOptions extends Readonly<ComponentPropsOptions>,
+      Props extends Readonly<ExtractPropTypes<PropsOptions>>
+    >(_component: {
+      name?: string;
+      baseName?: string;
+      props?: PropsOptions;
+      components?: Record<string, Component>;
+      setup?: (props: Props, setupContext: SetupContext) => RenderFunction | Record<string, any> | any;
+      emits?: string[];
+      [optionKey: string]: any;
+    }) {
       _component.baseName = name;
 
       _component.name = 'demo-' + name;
-      return defineComponent(_component);
+      return defineComponent(_component as any);
     }
   };
 }

src/packages/utils/util.ts

@@ -91,3 +91,16 @@ export const floatData = (format: any, dataOp: any, mapOps: any) => {
 
   return format;
 };
+
+export const deepMerge = (target: any, newObj: any) => {
+  Object.keys(newObj).forEach((key) => {
+    let targetValue = target[key];
+    let newObjValue = newObj[key];
+    if (isObject(targetValue) && isObject(newObjValue)) {
+      deepMerge(targetValue, newObjValue);
+    } else {
+      target[key] = newObjValue;
+    }
+  });
+  return target;
+};

src/sites/assets/util/useTranslate.ts

@@ -0,0 +1,26 @@
+import Locale from '@/packages/locale';
+export const useTranslate = (object: Record<string, any>) => {
+  for (const [key, value] of Object.entries(object)) {
+    Locale.merge(key, value);
+  }
+  console.log('merge res > ', Locale.languages());
+};
+
+export const translateChange = () => {
+  let href = '';
+  let location = window.parent.location;
+  let currentLang = Locale.currentLang;
+  if (currentLang.value == 'zh-CN') {
+    href = location.href.replace('zh-CN', 'en-US');
+    Locale.use('en-US');
+  } else {
+    href = location.href.replace('en-US', 'zh-CN');
+    Locale.use('zh-CN');
+  }
+  location.href = href;
+};
+
+export const initSiteLang = () => {
+  let lang = Locale.currentLang.value;
+  location.href = location.href.replace('zh-CN', lang).replace('en-US', lang);
+};

src/sites/doc/components/Nav.vue

@@ -25,7 +25,7 @@ export default defineComponent({
       return function (name: string) {
         const currentValue = RefData.getInstance().currentRoute.value;
         let value = currentValue.indexOf('-taro') > -1 ? currentValue.split('-taro')[0] : currentValue;
-        return value == name.toLowerCase();
+        return value.includes(name.toLowerCase());
       };
     });
     return {

src/sites/doc/router.ts

@@ -9,9 +9,21 @@ const modulesPage = import.meta.glob('/src/packages/__VUE/**/doc.md');
 for (const path in modulesPage) {
   let name = (/packages\/__VUE\/(.*)\/doc.md/.exec(path) as any[])[1];
   pagesRouter.push({
-    path: '/' + name,
-    component: modulesPage[path],
-    name
+    path: '/zh-CN/' + name,
+    component: modulesPage[path]
+    // name
+  });
+}
+
+const pagesEnRouter: Array<RouteRecordRaw> = [];
+
+const modulesEnPage = import.meta.glob('/src/packages/__VUE/**/doc.en-US.md');
+for (const path in modulesEnPage) {
+  let name = (/packages\/__VUE\/(.*)\/doc.en-US.md/.exec(path) as any[])[1];
+  pagesEnRouter.push({
+    path: '/en-US/' + name,
+    component: modulesEnPage[path]
+    // name: 'en' + name
   });
 }
 
@@ -28,17 +40,23 @@ for (const path in modulesPageTaro) {
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: '/',
-    name: '/',
+    path: '/zh-CN/',
+    name: '/zh-CN/',
     component: Index,
     children: pagesRouter
+  },
+  {
+    path: '/en-US/',
+    name: '/en-US/',
+    component: Index,
+    children: pagesEnRouter
   }
 ];
 routes.push({
   name: 'notFound',
   path: '/:path(.*)+',
   redirect: {
-    name: '/'
+    name: '/zh-CN/'
   }
 });
 const router = createRouter({

src/sites/doc/views/Index.vue

@@ -31,6 +31,7 @@ import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
 import { RefData } from '@/sites/assets/util/ref';
+import { initSiteLang } from '@/sites/assets/util/useTranslate';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -41,6 +42,7 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const router = useRouter();
+    initSiteLang();
     const excludeTaro = ['/intro', '/start', '/theme', '/joinus', '/starttaro', '/contributing'];
     const data = reactive({
       demoUrl: 'demo.html',
@@ -85,8 +87,9 @@ export default defineComponent({
 
     const watchDemoUrl = (router: RouteLocationNormalized) => {
       const { origin, pathname } = window.location;
-      RefData.getInstance().currentRoute.value = router.name as string;
-      data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${router.path}`;
+      RefData.getInstance().currentRoute.value = router.path as string;
+      let url = `${origin}${pathname.replace('index.html', '')}demo.html#${router.path}`;
+      data.demoUrl = url.replace('/zh-CN', '').replace('/en-US', '');
     };
 
     const watchDocMd = () => {

src/sites/mobile/App.vue

@@ -4,6 +4,12 @@
       <nut-icon name="left"></nut-icon>
     </div>
     {{ title }}
+    <div class="translate" @click="translateChange">
+      <nut-icon
+        name="https://img14.360buyimg.com/imagetools/jfs/t1/135168/8/21387/6193/625fa81aEe07cc347/55ad5bc2580c53a6.png"
+      >
+      </nut-icon>
+    </div>
   </div>
   <router-view />
 </template>
@@ -12,6 +18,7 @@ import { defineComponent, ref, watch, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { isMobile } from '@/sites/assets/util';
 import { useThemeEditor } from '@/sites/assets/util/helper';
+import { translateChange } from '../assets/util/useTranslate';
 export default defineComponent({
   name: 'app',
   setup() {
@@ -50,7 +57,7 @@ export default defineComponent({
       }
     );
 
-    return { title, isShow, goBack };
+    return { title, isShow, goBack, translateChange };
   }
 });
 </script>
@@ -97,6 +104,17 @@ body {
       justify-content: center;
       cursor: pointer;
     }
+    .translate {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
   }
 
   .demo {

src/utils/useRelation/useRelation.ts

@@ -1,7 +0,0 @@
-import { getCurrentInstance } from 'vue';
-export function useExtend<T>(apis: T) {
-  const instance = getCurrentInstance();
-  if (instance) {
-    Object.assign(instance.proxy, apis);
-  }
-}