Merge pull request #136 from Shimada666/feat-i18n

feat: add i18n for demo

Author: Shimada666

demo/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { version } from 'vue-demi'
 import { reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { newShortText } from './text/new-short-text'
 import { oldShortText } from './text/old-short-text'
 
@@ -34,12 +35,14 @@ function resetText() {
   oldString.value = oldShortText.value
   newString.value = newShortText.value
 }
+
 function clearText() {
   localStorage.removeItem('oldString')
   localStorage.removeItem('newString')
   oldString.value = ''
   newString.value = ''
 }
+
 watch(oldString, () => localStorage.setItem('oldString', oldString.value))
 watch(newString, () => localStorage.setItem('newString', newString.value))
 
@@ -49,18 +52,27 @@ function printEvent(e) {
   // eslint-disable-next-line no-console
   console.log(e)
 }
+
+const { locale, t } = useI18n()
+
+function toggleLang() {
+  locale.value = locale.value === 'en' ? 'cn' : 'en'
+}
 </script>
 
 <template>
   <div style="padding:10px 35px">
     <div class="banner">
       <h1>v-code-diff</h1>
-      <p>A code diff display plugin, available for Vue2 / Vue3.</p>
+      <p>{{ t('desc') }}</p>
       <p align="center">
-        Vue version: {{ version }}. CodeDiff version: {{ appVersion }}
+        Vue ver: {{ version }}. CodeDiff ver: {{ appVersion }}
       </p>
       <a-button type="primary">
-        <a href="https://github.com/Shimada666/v-code-diff">View on Github</a>
+        <a href="https://github.com/Shimada666/v-code-diff">GitHub</a>
+      </a-button>
+      <a-button v-model="locale" style="margin-left: 5px; width: 100px" @click="toggleLang">
+        {{ t('tools.lang') }}
       </a-button>
     </div>
     <div style="display: flex; justify-content: space-between;">
@@ -75,17 +87,18 @@ function printEvent(e) {
     </div>
     <div style="margin-top: 10px;">
       <a-button style="margin-right: 5px;" @click="resetText">
-        重置文本(reset text)
+        {{ t('tools.resetText') }}
       </a-button>
       <a-button type="default" @click="clearText">
-        清空文本(clear text)
+        {{ t('tools.clearText') }}
       </a-button>
     </div>
-    <a-card style="margin-top:15px" title="Options">
+    <a-card style="margin-top:15px" :title="t('options.title')">
       <a-form layout="inline" :model="formState">
         <a-row :gutter="16">
           <a-col :md="8" :sm="24">
-            <a-form-item label="语言(langauge)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.language') }}</span> </slot>
               <a-select v-model:value="formState.language" style="width: 12vw;">
                 <a-select-option
                   v-for="item in ['plaintext', 'json', 'yaml', 'javascript', 'java', 'python', 'sql', 'xml', 'bash']"
@@ -97,63 +110,71 @@ function printEvent(e) {
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="主题模式(theme)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.theme') }}</span> </slot>
               <a-radio-group v-model:value="formState.theme">
                 <a-radio value="light">
-                  日间模式(light)
+                  {{ t('options.dayMode') }}
                 </a-radio>
                 <a-radio value="dark">
-                  夜间模式(dark)
+                  {{ t('options.nightMode') }}
                 </a-radio>
               </a-radio-group>
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="差异化范围(context)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.contextRange') }}</span> </slot>
               <a-input-number v-model:value="formState.context" :min="0" style="width: 12vw;" />
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="显示方式(outputFormat)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.outputFormat') }}</span> </slot>
               <a-radio-group v-model:value="formState.outputFormat">
                 <a-radio value="line-by-line">
-                  line-by-line
+                  {{ t('options.lineByLine') }}
                 </a-radio>
                 <a-radio value="side-by-side">
-                  side-by-side
+                  {{ t('options.sideBySide') }}
                 </a-radio>
               </a-radio-group>
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="差异级别(diffStyle)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.diffStyle') }}</span> </slot>
               <a-radio-group v-model:value="formState.diffStyle">
                 <a-radio value="word">
-                  word
+                  {{ t('options.word') }}
                 </a-radio>
                 <a-radio value="char">
-                  char
+                  {{ t('options.char') }}
                 </a-radio>
               </a-radio-group>
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="移除字符串前后空白字符(trim)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.trim') }}</span> </slot>
               <a-switch v-model:checked="formState.trim" />
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="不 diff 换行符(noDiffLineFeed)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.noDiffLineFeed') }}</span> </slot>
               <a-switch v-model:checked="formState.noDiffLineFeed" />
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="隐藏首部(hide Header)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.hideHeader') }}</span> </slot>
               <a-switch v-model:checked="formState.hideHeader" />
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="隐藏统计信息(hide Statistics)">
+            <a-form-item>
+              <slot><span class="form-item-label">{{ t('options.hideStatistics') }}</span> </slot>
               <a-switch v-model:checked="formState.hideStat" />
             </a-form-item>
           </a-col>
@@ -193,4 +214,20 @@ function printEvent(e) {
   font-size: 16px;
   color: #666;
 }
+
+.form-item-label {
+  display: inline-block;
+  flex-grow: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: right;
+  vertical-align: middle;
+}
+
+.form-item-label:after {
+  content: ":";
+  position: relative;
+  top: -0.5px;
+  margin: 0 8px 0 2px;
+}
 </style>

demo/main.ts

@@ -1,8 +1,87 @@
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import CodeDiff from '../src/index'
 import App from './App.vue'
+function getDefaultLang() {
+  // 用户指定了默认语言时，使用用户指定的
+  if (localStorage.getItem('lang') !== null) {
+    return localStorage.getItem('lang')
+  }
+  else {
+    // 用户未指定时，根据游览器选择:
+    if (navigator.language === 'zh')
+      return 'cn'
+    else if (navigator.language === 'en')
+      return 'en'
+    else
+      return 'en'
+  }
+}
+
+const i18n = createI18n({
+  locale: getDefaultLang() || 'cn', // 设置当前语言类型
+  legacy: false, // 如果要支持compositionAPI，此项必须设置为false
+  messages: {
+    cn: {
+      desc: '一个代码差异展示插件，支持 Vue 2 和 Vue 3',
+      tools: {
+        resetText: '重置文本',
+        clearText: '清空文本',
+        lang: 'English',
+      },
+      options: {
+        title: '选项',
+        language: '语言',
+        theme: '主题',
+        dayMode: '日间模式',
+        nightMode: '夜间模式',
+        contextRange: '差异化范围',
+        outputFormat: '显示方式',
+        lineByLine: '逐行显示',
+        sideBySide: '并排显示',
+        diffStyle: '差异风格',
+        word: '按单词',
+        char: '按字符',
+        trim: '移除字符串前后空白字符',
+        noDiffLineFeed: '不显示差异换行符',
+        hideHeader: '隐藏首部',
+        hideStatistics: '隐藏统计信息',
+      },
+    },
+    en: {
+      desc: 'A code diff display plugin, available for Vue2 / Vue3.',
+      tools: {
+        resetText: 'Reset Text',
+        clearText: 'Clear Text',
+        lang: '简体中文',
+      },
+      options: {
+        title: 'Options',
+        language: 'Language',
+        theme: 'Theme',
+        dayMode: 'Day Mode',
+        nightMode: 'Night Mode',
+        contextRange: 'Context Range',
+        outputFormat: 'Output Format',
+        lineByLine: 'Line by Line',
+        sideBySide: 'Side by Side',
+        diffStyle: 'Diff Level',
+        word: 'Word',
+        char: 'Character',
+        trim: 'Trim',
+        noDiffLineFeed: 'No Diff Line Feed',
+        hideHeader: 'Hide Header',
+        hideStatistics: 'Hide Statistics',
+      },
+    },
+  },
+},
+)
+
+export default i18n
 
 const app = createApp(App)
 app.use(CodeDiff)
+app.use(i18n)
 
 app.mount('#app')

package.json

@@ -53,7 +53,8 @@
     "diff": "^5.1.0",
     "diff-match-patch": "^1.0.5",
     "highlight.js": "^11.9.0",
-    "vue-demi": "^0.14.6"
+    "vue-demi": "^0.14.6",
+    "vue-i18n": "9"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.4.5",