docs: add translate (#211)

Author: kagol

packages/docs/fluent-editor/.vitepress/components/TranslateComponent.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+
+const currentLang = ref('chinese_simplified')
+
+onMounted(() => {
+  setTimeout(() => {
+    currentLang.value = translate.language.getCurrent()
+  }, 3000)
+})
+
+const switchLang = () => {
+  if (translate.language.getCurrent() === 'chinese_simplified') {
+    translate.changeLanguage('english')
+    currentLang.value = 'english'
+  } else {
+    translate.changeLanguage('chinese_simplified')
+    currentLang.value = 'chinese_simplified'
+  }
+}
+</script>
+
+<template>
+  <div class="translate-switch">
+    <a @click="switchLang">{{ currentLang === 'english' ? 'English' : '简体中文' }}</a>
+  </div>
+</template>
+
+<style scoped>
+.translate-switch {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>

packages/docs/fluent-editor/.vitepress/config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
     ['script', { src: 'https://cdn.jsdelivr.net/npm/lottie-web/build/player/lottie.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/@petercatai/assistant@1.0.7/dist/umd/assistant.min.js' }],
     ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@petercatai/assistant@1.0.7/dist/umd/assistant.min.css' }],
+    ['script', { src: 'https://cdn.staticfile.net/translate.js/3.12.0/translate.js' }],
   ],
   themeConfig: {
     logo: '/logo.svg',
@@ -29,6 +30,9 @@ export default defineConfig({
           { text: 'TinyVue', link: 'https://opentiny.design/tiny-vue/' },
         ],
       },
+      {
+        component: 'TranslateComponent'
+      },
     ],
     socialLinks: [
       { icon: 'github', link: 'https://github.com/opentiny/fluent-editor/' },

packages/docs/fluent-editor/.vitepress/theme/index.ts

@@ -5,6 +5,8 @@ import * as Toast from 'vue-toastification'
 import { insertBaiduScript } from './insert-baidu-script'
 import { inertDepsVersion } from './insert-deps-version'
 import { insertPeterCatAssistant } from './insert-petercat-assistant'
+import { insertTranslate } from './insert-translate'
+import TranslateComponent from '../components/TranslateComponent.vue'
 import '@vitepress-code-preview/container/dist/style.css'
 import './style.css'
 import 'vue-toastification/dist/index.css'
@@ -13,6 +15,7 @@ export const define = <T>(value: T): T => value
 export default define<Theme>({
   ...DefaultTheme,
   enhanceApp({ app }) {
+    app.component('TranslateComponent', TranslateComponent)
     app.use(Toast.default, {
       position: 'top-center',
       timeout: 3000,
@@ -24,5 +27,8 @@ export default define<Theme>({
     setTimeout(() => {
       insertPeterCatAssistant()
     }, 300)
+    setTimeout(() => {
+      insertTranslate()
+    }, 3000)
   },
 })

packages/docs/fluent-editor/.vitepress/theme/insert-translate.ts

@@ -0,0 +1,22 @@
+export function insertTranslate() {
+  if (typeof document === 'undefined') return
+  const translateScript = document.createElement('script')
+  const translateScriptStr = `
+    translate.language.setLocal('chinese_simplified');
+    translate.service.use('client.edge');
+    translate.listener.start();
+    translate.setAutoDiscriminateLocalLanguage();
+    translate.selectLanguageTag.languages = 'english,chinese_simplified';
+    translate.selectLanguageTag.show = false;
+    translate.language.setDefaultTo('chinese_simplified');
+
+    translate.ignore.class.push('ql-container');
+    translate.ignore.class.push('ql-editor');
+    translate.ignore.class.push('petercat-lui-assistant');
+    translate.ignore.class.push('translate-switch');
+
+    translate.execute();
+  `
+  translateScript.textContent = translateScriptStr
+  document.body.append(translateScript)
+}

packages/docs/fluent-editor/.vitepress/theme/style.css

@@ -98,3 +98,8 @@
   padding-top: 0;
   line-height: 22px;
 }
+
+/* 翻译工具 */
+#translate {
+  display: none;
+}