🚧 WIP: renderer process i18n

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 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>

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[]) {

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)