🚧 WIP: renderer process i18n

2026-06-03 06:42:09 +08:00 · 2022-01-11 23:57:35 +08:00
parent c19f741243
commit 9d236ba6f4
8 changed files with 128 additions and 84 deletions
--- a/src/main.ts
+++ b/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)
--- a/src/main/utils/privacyManager.ts
+++ b/src/main/utils/privacyManager.ts
@@ -27,29 +27,7 @@ class PrivacyManager {
      type: 'info',
      buttons: showCancel ? ['Yes', 'No'] : ['Yes'],
      title: T('PRIVACY_AGREEMENT'),
-      message: `
-      本软件尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更优质的服务，本软件会按照本隐私权政策的规定使用和收集您的一些行为信息。您在同意本软件服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本软件服务使用协议不可分割的一部分，如果不同意将无法使用。本协议会定期更新。
-
-      1.适用范围
-
-      a)在您使用本软件时，本软件会记录的您对本软件的一些操作行为信息，包括但不限于您使用本软件进行文件上传的耗时、类型、数量等信息。
-
-      2.信息的使用
-
-      a)在获得您的使用数据之后，本软件会将其上传至数据分析服务器，以便分析数据后，提供给您更好的服务。
-
-      3.信息披露
-
-      a)本软件不会将您的信息披露给不受信任的第三方。
-
-      b)根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；
-
-      c)如您出现违反中国有关法律、法规或者相关规则的情况，需要向第三方披露；
-
-      4.信息安全
-
-      a)本软件不会收集您的个人信息、密钥信息等隐私信息，所收集的信息仅仅作为改善软件、优化体验、了解软件日活等用途。
-      `
+      message: T('PRIVACY')
    })
    return res
  }
--- a/src/renderer/components/ChoosePicBed.vue
+++ b/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"
--- a/src/renderer/components/InputBoxDialog.vue
+++ b/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 type="primary" @click="handleInputBoxConfirm" round>确定</el-button>
+      <el-button @click="handleInputBoxCancel" round>{{ $T('CANCEL') }}</el-button>
+      <el-button type="primary" @click="handleInputBoxConfirm" round>{{ $T('CONFIRM') }}</el-button>
    </span>
  </el-dialog>
 </template>
--- a/src/renderer/layouts/Main.vue
+++ b/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="支付宝">
-          <div class="support-title">支付宝</div>
+          <img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" :alt="$T('ALIPAY')">
+          <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="支付宝">
-          <div class="support-title">微信</div>
+          <img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" :alt="$T('WECHATPAY')">
+          <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[]) {
--- a/src/renderer/pages/Gallery.vue
+++ b/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 type="primary" @click="confirmModify">确 定</el-button>
+        <el-button @click="dialogVisible = false">{{ $T('CANCEL') }}</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) {
-    this.$confirm('此操作将把该图片移出相册, 是否继续?', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(async () => {
-      const file = await this.$$db.getById(id)
-      await this.$$db.removeById(id)
-      ipcRenderer.send('removeFiles', [file])
-      const obj = {
-        title: '操作结果',
-        body: '删除成功'
-      }
-      const myNotification = new Notification(obj.title, obj)
-      myNotification.onclick = () => {
+  remove (id?: string) {
+    if (id) {
+      this.$confirm(this.$T('TIPS_REMOVE_LINK'), this.$T('TIPS_NOTICE'), {
+        confirmButtonText: this.$T('CONFIRM'),
+        cancelButtonText: this.$T('CANCEL'),
+        type: 'warning'
+      }).then(async () => {
+        const file = await this.$$db.getById(id)
+        await this.$$db.removeById(id)
+        ipcRenderer.send('removeFiles', [file])
+        const obj = {
+          title: this.$T('OPERATION_SUCCEED'),
+          body: ''
+        }
+        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} 张图片，是否继续？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(this.$T('TIPS_WILL_REMOVE_CHOOSED_IMAGES', {
+        m: multiRemoveNumber
+      }), 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: '操作结果',
-          body: '删除成功'
+          title: this.$T('OPERATION_SUCCEED'),
+          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)
--- a/src/universal/i18n/zh-CN.ts
+++ b/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: '退出'
 }

--- a/src/universal/types/extra-vue.d.ts
+++ b/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>
  }