🚧 WIP: renderer process i18n

src/main.ts

@@ -10,6 +10,7 @@ import mainMixin from './renderer/utils/mainMixin'
 import bus from '@/utils/bus'
 import { initTalkingData } from './renderer/utils/analytics'
 import db from './renderer/utils/db'
+import { T } from '#/i18n/index'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 
@@ -26,6 +27,7 @@ Vue.prototype.$builtInPicBed = [
 Vue.prototype.$$db = db
 Vue.prototype.$http = axios
 Vue.prototype.$bus = bus
+Vue.prototype.$T = T
 
 Vue.use(ElementUI)
 Vue.use(VueLazyLoad)

src/main/utils/privacyManager.ts

@@ -27,29 +27,7 @@ class PrivacyManager {
       type: 'info',
       buttons: showCancel ? ['Yes', 'No'] : ['Yes'],
       title: T('PRIVACY_AGREEMENT'),
-      message: `
+      message: T('PRIVACY')
-      本软件尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更优质的服务，本软件会按照本隐私权政策的规定使用和收集您的一些行为信息。您在同意本软件服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本软件服务使用协议不可分割的一部分，如果不同意将无法使用。本协议会定期更新。
-
-      1.适用范围
-
-      a)在您使用本软件时，本软件会记录的您对本软件的一些操作行为信息，包括但不限于您使用本软件进行文件上传的耗时、类型、数量等信息。
-
-      2.信息的使用
-
-      a)在获得您的使用数据之后，本软件会将其上传至数据分析服务器，以便分析数据后，提供给您更好的服务。
-
-      3.信息披露
-
-      a)本软件不会将您的信息披露给不受信任的第三方。
-
-      b)根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；
-
-      c)如您出现违反中国有关法律、法规或者相关规则的情况，需要向第三方披露；
-
-      4.信息安全
-
-      a)本软件不会收集您的个人信息、密钥信息等隐私信息，所收集的信息仅仅作为改善软件、优化体验、了解软件日活等用途。
-      `
     })
     return res
   }

src/renderer/components/ChoosePicBed.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="choose-pic-bed">
-    <span>选择 {{ label }} 作为你默认图床：</span>
+    <span>{{ $T('CHOOSE_YOUR_DEFAULT_PICBED', { d: label }) }}</span>
     <el-switch
       v-model="value"
       @change="choosePicBed"

src/renderer/components/InputBoxDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    :title="inputBoxOptions.title || '输入框'"
+    :title="inputBoxOptions.title || $T('INPUT')"
     :visible.sync="showInputBoxVisible"
     :modal-append-to-body="false"
   >
@@ -8,8 +8,8 @@
       v-model="inputBoxValue"
       :placeholder="inputBoxOptions.placeholder"></el-input>
     <span slot="footer">
-      <el-button @click="handleInputBoxCancel" round>取消</el-button>
+      <el-button @click="handleInputBoxCancel" round>{{ $T('CANCEL') }}</el-button>
-      <el-button type="primary" @click="handleInputBoxConfirm" round>确定</el-button>
+      <el-button type="primary" @click="handleInputBoxConfirm" round>{{ $T('CONFIRM') }}</el-button>
     </span>
   </el-dialog>
 </template>

src/renderer/layouts/Main.vue

@@ -21,18 +21,18 @@
           >
           <el-menu-item index="upload">
             <i class="el-icon-upload"></i>
-            <span slot="title">上传区</span>
+            <span slot="title">{{ $T('UPLOAD_AREA') }}</span>
           </el-menu-item>
           <el-menu-item index="gallery">
             <i class="el-icon-picture"></i>
-            <span slot="title">相册</span>
+            <span slot="title">{{ $T('GALLERY') }}</span>
           </el-menu-item>
           <el-submenu
             index="sub-menu"
           >
             <template slot="title">
               <i class="el-icon-menu"></i>
-              <span>图床设置</span>
+              <span>{{ $T('PICBEDS_SETTINGS') }}</span>
             </template>
             <template
               v-for="item in picBed"
@@ -49,11 +49,11 @@
           </el-submenu>
           <el-menu-item index="setting">
             <i class="el-icon-setting"></i>
-            <span slot="title">PicGo设置</span>
+            <span slot="title">{{ $T('PICGO_SETTINGS') }}</span>
           </el-menu-item>
           <el-menu-item index="plugin">
             <i class="el-icon-share"></i>
-            <span slot="title">插件设置</span>
+            <span slot="title">{{ $T('PLUGIN_SETTINGS') }}</span>
           </el-menu-item>
         </el-menu>
         <i class="el-icon-info setting-window" @click="openDialog"></i>
@@ -66,29 +66,29 @@
         :class="{ 'darwin': os === 'darwin' }">
         <transition name="picgo-fade" mode="out-in">
           <keep-alive>
-            <router-view v-if="$route.meta.keepAlive"></router-view>
+            <router-view v-if="$route && $route.meta && $route.meta.keepAlive"></router-view>
           </keep-alive>
         </transition>
         <transition name="picgo-fade" mode="out-in">
-          <router-view :key="$route.path" v-if="!$route.meta.keepAlive"></router-view>
+          <router-view :key="$route.path" v-if="!($route && $route.meta && $route.meta.keepAlive)"></router-view>
         </transition>
       </el-col>
     </el-row>
     <el-dialog
-      title="赞助PicGo"
+      :title="$T('SPONSOR_PICGO')"
       :visible.sync="visible"
       width="70%"
       top="10vh"
     >
-      PicGo是免费开源的软件，如果你喜欢它，对你有帮助，不妨请我喝杯咖啡？
+      {{ $T('PICGO_SPONSOR_TEXT') }}
       <el-row class="support">
         <el-col :span="12">
-          <img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" alt="支付宝">
+          <img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" :alt="$T('ALIPAY')">
-          <div class="support-title">支付宝</div>
+          <div class="support-title">{{ $T('ALIPAY') }}</div>
         </el-col>
         <el-col :span="12">
-          <img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" alt="支付宝">
+          <img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" :alt="$T('WECHATPAY')">
-          <div class="support-title">微信</div>
+          <div class="support-title">{{ $T('WECHATPAY') }}</div>
         </el-col>
       </el-row>
     </el-dialog>
@@ -96,7 +96,7 @@
       class="qrcode-dialog"
       top="3vh"
       width="60%"
-      title="图床配置二维码"
+      :title="$T('PICBED_QRCODE')"
       :visible.sync="qrcodeVisible"
       :modal-append-to-body="false"
       lock-scroll
@@ -107,7 +107,7 @@
         size="mini"
       >
         <el-form-item
-          label="选择图床"
+          :label="$T('CHOOSE_PICBED')"
         >
           <el-select
             v-model="choosedPicBedForQRCode"
@@ -128,7 +128,7 @@
             class="copy-picbed-config"
             @click="handleCopyPicBedConfig"
           >
-            复制图床配置
+            {{ $T('COPY_PICBED_CONFIG') }}
           </el-button>
         </el-form-item>
       </el-form>
@@ -242,7 +242,7 @@ export default class extends Vue {
 
   handleCopyPicBedConfig () {
     clipboard.writeText(this.picBedConfigString)
-    this.$message.success('图床配置复制成功')
+    this.$message.success(this.$T('COPY_PICBED_CONFIG_SUCCEED'))
   }
 
   getPicBeds (event: IpcRendererEvent, picBeds: IPicBedType[]) {

src/renderer/pages/Gallery.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="gallery-view">
     <div class="view-title">
-      相册 - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
+      {{ $T('GALLERY') }} - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
     </div>
     <transition name="el-zoom-in-top">
       <el-row v-show="handleBarActive">
@@ -14,7 +14,7 @@
                 collapse-tags
                 size="mini"
                 style="width: 100%"
-                placeholder="请选择显示的图床">
+                :placeholder="$T('CHOOSE_SHOWED_PICBED')">
                 <el-option
                   v-for="item in picBed"
                   :key="item.type"
@@ -29,7 +29,7 @@
                 size="mini"
                 style="width: 100%"
                 @change="handlePasteStyleChange"
-                placeholder="请选择粘贴的格式">
+                :placeholder="$T('CHOOSE_PASTE_FORMAT')">
                 <el-option
                   v-for="(value, key) in pasteStyleMap"
                   :key="key"
@@ -42,7 +42,7 @@
           <el-row class="handle-bar" :gutter="16">
             <el-col :span="12">
               <el-input
-                placeholder="搜索"
+                :placeholder="$T('SEARCH')"
                 size="mini"
                 v-model="searchText">
                 <i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
@@ -50,17 +50,17 @@
             </el-col>
             <el-col :span="4">
               <div class="item-base copy round" :class="{ active: isMultiple(choosedList)}" @click="multiCopy">
-                复制
+                {{ $T('COPY') }}
               </div>
             </el-col>
             <el-col :span="4">
               <div class="item-base delete round" :class="{ active: isMultiple(choosedList)}" @click="multiRemove">
-                删除
+                {{ $T('DELETE') }}
               </div>
             </el-col>
             <el-col :span="4">
               <div class="item-base all-pick round" :class="{ active: filterList.length > 0}" @click="toggleSelectAll">
-                {{ isAllSelected ? '取消' : '全选' }}
+                {{ isAllSelected ? $T('CANCEL') : $T('SELECT_ALL') }}
               </div>
             </el-col>
           </el-row>
@@ -87,7 +87,7 @@
               <i class="el-icon-document" @click="copy(item)"></i>
               <i class="el-icon-edit-outline" @click="openDialog(item)"></i>
               <i class="el-icon-delete" @click="remove(item.id)"></i>
-              <el-checkbox v-model="choosedList[item.id]" class="pull-right" @change="(val) => handleChooseImage(val, index)"></el-checkbox>
+              <el-checkbox v-model="choosedList[item.id ? item.id : '']" class="pull-right" @change="(val) => handleChooseImage(val, index)"></el-checkbox>
             </div>
           </el-col>
         </el-row>
@@ -95,14 +95,14 @@
     </el-row>
     <el-dialog
       :visible.sync="dialogVisible"
-      title="修改图片URL"
+      :title="$T('CHANGE_IMAGE_URL')"
       width="500px"
       :modal-append-to-body="false"
     >
       <el-input v-model="imgInfo.imgUrl"></el-input>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button @click="dialogVisible = false">{{ $T('CANCEL') }}</el-button>
-        <el-button type="primary" @click="confirmModify">确 定</el-button>
+        <el-button type="primary" @click="confirmModify">{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -285,7 +285,7 @@ export default class extends Vue {
   async copy (item: ImgInfo) {
     const copyLink = await ipcRenderer.invoke(PASTE_TEXT, item)
     const obj = {
-      title: '复制链接成功',
+      title: this.$T('COPY_LINK_SUCCEED'),
       body: copyLink,
       icon: item.url || item.imgUrl
     }
@@ -295,28 +295,30 @@ export default class extends Vue {
     }
   }
 
-  remove (id: string) {
+  remove (id?: string) {
-    this.$confirm('此操作将把该图片移出相册, 是否继续?', '提示', {
+    if (id) {
-      confirmButtonText: '确定',
+      this.$confirm(this.$T('TIPS_REMOVE_LINK'), this.$T('TIPS_NOTICE'), {
-      cancelButtonText: '取消',
+        confirmButtonText: this.$T('CONFIRM'),
-      type: 'warning'
+        cancelButtonText: this.$T('CANCEL'),
-    }).then(async () => {
+        type: 'warning'
-      const file = await this.$$db.getById(id)
+      }).then(async () => {
-      await this.$$db.removeById(id)
+        const file = await this.$$db.getById(id)
-      ipcRenderer.send('removeFiles', [file])
+        await this.$$db.removeById(id)
-      const obj = {
+        ipcRenderer.send('removeFiles', [file])
-        title: '操作结果',
+        const obj = {
-        body: '删除成功'
+          title: this.$T('OPERATION_SUCCEED'),
-      }
+          body: ''
-      const myNotification = new Notification(obj.title, obj)
+        }
-      myNotification.onclick = () => {
+        const myNotification = new Notification(obj.title, obj)
+        myNotification.onclick = () => {
+          return true
+        }
+        this.updateGallery()
+      }).catch((e) => {
+        console.log(e)
         return true
-      }
+      })
-      this.updateGallery()
+    }
-    }).catch((e) => {
-      console.log(e)
-      return true
-    })
   }
 
   openDialog (item: ImgInfo) {
@@ -330,7 +332,7 @@ export default class extends Vue {
       imgUrl: this.imgInfo.imgUrl
     })
     const obj = {
-      title: '修改图片URL成功',
+      title: this.$T('CHANGE_IMAGE_URL_SUCCEED'),
       body: this.imgInfo.imgUrl,
       icon: this.imgInfo.imgUrl
     }
@@ -370,9 +372,11 @@ export default class extends Vue {
     // choosedList -> { [id]: true or false }; true means choosed. false means not choosed.
     const multiRemoveNumber = Object.values(this.choosedList).filter(item => item).length
     if (multiRemoveNumber) {
-      this.$confirm(`将在相册中移除刚才选中的 ${multiRemoveNumber} 张图片，是否继续？`, '提示', {
+      this.$confirm(this.$T('TIPS_WILL_REMOVE_CHOOSED_IMAGES', {
-        confirmButtonText: '确定',
+        m: multiRemoveNumber
-        cancelButtonText: '取消',
+      }), this.$T('TIPS_NOTICE'), {
+        confirmButtonText: this.$T('CONFIRM'),
+        cancelButtonText: this.$T('CANCEL'),
         type: 'warning'
       }).then(async () => {
         const files: IResult<ImgInfo>[] = []
@@ -390,8 +394,8 @@ export default class extends Vue {
         this.clearChoosedList()
         this.choosedList = {} // 只有删除才能将这个置空
         const obj = {
-          title: '操作结果',
+          title: this.$T('OPERATION_SUCCEED'),
-          body: '删除成功'
+          body: ''
         }
         ipcRenderer.send('removeFiles', files)
         const myNotification = new Notification(obj.title, obj)
@@ -422,7 +426,7 @@ export default class extends Vue {
         }
       }
       const obj = {
-        title: '批量复制链接成功',
+        title: this.$T('BATCH_COPY_LINK_SUCCEED'),
         body: copyString.join('\n')
       }
       const myNotification = new Notification(obj.title, obj)

src/universal/i18n/zh-CN.ts

@@ -17,11 +17,44 @@ export const ZH_CN = {
   HIDE_WINDOW: '隐藏窗口',
   SPONSOR_PICGO: '赞助 PicGo',
   SHOW_PICBED_QRCODE: '生成图床配置二维码',
+  PICBED_QRCODE: '图床配置二维码',
   ENABLE: '启用',
   DISABLE: '禁用',
   CONFIG_THING: '配置${c}',
   FIND_NEW_VERSION: '发现新版本',
   NO_MORE_NOTICE: '以后不再提醒',
+
+  // ---renderer i18n---
+  CHOOSE_YOUR_DEFAULT_PICBED: '选择 ${d} 作为你默认图床：',
+  UPLOAD_AREA: '上传区',
+  GALLERY: '相册',
+  PICBEDS_SETTINGS: '图床设置',
+  PICGO_SETTINGS: 'PicGo设置',
+  PLUGIN_SETTINGS: '插件设置',
+  PICGO_SPONSOR_TEXT: 'PicGo是免费开源的软件，如果你喜欢它，对你有帮助，不妨请我喝杯咖啡？',
+  ALIPAY: '支付宝',
+  WECHATPAY: '微信支付',
+  CHOOSE_PICBED: '选择图床',
+  COPY_PICBED_CONFIG: '复制图床配置',
+  COPY_PICBED_CONFIG_SUCCEED: '复制图床配置成功',
+  INPUT: '输入框',
+  CANCEL: '取消',
+  CONFIRM: '确定',
+  CHOOSE_SHOWED_PICBED: '请选择显示的图床',
+  CHOOSE_PASTE_FORMAT: '请选择粘贴的格式',
+  SEARCH: '搜索',
+  COPY: '复制',
+  DELETE: '删除',
+  SELECT_ALL: '全选',
+  CHANGE_IMAGE_URL: '修改图片URL',
+  CHANGE_IMAGE_URL_SUCCEED: '修改图片URL成功',
+  COPY_LINK_SUCCEED: '复制链接成功',
+  BATCH_COPY_LINK_SUCCEED: '批量复制链接成功',
+  // tips
+  TIPS_REMOVE_LINK: '此操作将把该图片移出相册, 是否继续?',
+  TIPS_WILL_REMOVE_CHOOSED_IMAGES: '将在相册中移除刚才选中的 ${m} 张图片，是否继续？',
+  // ---renderer i18n end---
+
   // plugins
   PLUGIN_INSTALL_SUCCEED: '插件安装成功',
   PLUGIN_INSTALL_FAILED: '插件安装失败',
@@ -50,6 +83,32 @@ export const ZH_CN = {
   TIPS_SHORTCUT_MODIFIED_CONFLICT: '快捷键冲突，请重新设置',
   TIPS_CUSTOM_LINK_STYLE_MODIFIED_SUCCEED: '自定义链接格式已经修改成功',
   TIPS_FIND_NEW_VERSION: '发现新版本${v}，更新了很多功能，是否去下载最新的版本？',
+  // privcy
+  PRIVACY:
+`
+本软件尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更优质的服务，本软件会按照本隐私权政策的规定使用和收集您的一些行为信息。您在同意本软件服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本软件服务使用协议不可分割的一部分，如果不同意将无法使用。本协议会定期更新。
+
+1.适用范围
+
+a)在您使用本软件时，本软件会记录的您对本软件的一些操作行为信息，包括但不限于您使用本软件进行文件上传的耗时、类型、数量等信息。
+
+2.信息的使用
+
+a)在获得您的使用数据之后，本软件会将其上传至数据分析服务器，以便分析数据后，提供给您更好的服务。
+
+3.信息披露
+
+a)本软件不会将您的信息披露给不受信任的第三方。
+
+b)根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；
+
+c)如您出现违反中国有关法律、法规或者相关规则的情况，需要向第三方披露；
+
+4.信息安全
+
+a)本软件不会收集您的个人信息、密钥信息等隐私信息，所收集的信息仅仅作为改善软件、优化体验、了解软件日活等用途。
+`,
+  // action
   QUIT: '退出'
 }
 

src/universal/types/extra-vue.d.ts

@@ -19,6 +19,7 @@ declare module 'vue/types/vue' {
     $builtInPicBed: string[]
     $bus: Vue
     $$db: IGalleryDB
+    $T: typeof import('#/i18n/index').T
     saveConfig(data: IObj | string, value?: any): void
     getConfig<T>(key?: string): Promise<T | undefined>
   }