Google Translate 触手可及，使用此快捷键打开：
137 |设置 Google Translate 默认使用的翻译引擎：
148 | {Object.keys(this.engineMap).map(key => ( 149 |{this.$slots.default}
;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "allowSyntheticDefaultImports": true,
11 | "sourceMap": true,
12 | "baseUrl": ".",
13 | "types": ["node"],
14 | "paths": {
15 | "@/*": ["src/renderer/*"],
16 | "assets/*": ["src/renderer/assets/*"],
17 | "components/*": ["src/renderer/components/*"],
18 | "utils/*": ["src/renderer/utils/*"],
19 | "views/*": ["src/renderer/views/*"]
20 | },
21 | "lib": [
22 | "es2015",
23 | "es2016.array.include",
24 | "dom",
25 | "dom.iterable",
26 | "scripthost"
27 | ],
28 | "plugins": [
29 | {
30 | "name": "typescript-styled-plugin",
31 | "tags": ["styled", "css", "injectGlobal"]
32 | }
33 | ]
34 | },
35 | "include": [
36 | "src/**/*.ts",
37 | "src/**/*.tsx",
38 | "src/**/*.vue",
39 | "tests/**/*.ts",
40 | "tests/**/*.tsx",
41 | "types/**/*.ts",
42 | "node_modules/@types",
43 | "node_modules/vue-tsx-support/enable-check.d.ts",
44 | "node_modules/vue-tsx-support/options/enable-vue-router.d.ts"
45 | ]
46 | }
47 |
--------------------------------------------------------------------------------
/src/renderer/components/Icon.tsx:
--------------------------------------------------------------------------------
1 | import * as Vue from 'vue-tsx-support';
2 | import Component from 'vue-class-component';
3 | import { Prop } from 'vue-property-decorator';
4 | import styled from 'vue-emotion';
5 |
6 | const Ico = styled.i`
7 | display: inline-block;
8 | `;
9 |
10 | export interface IconProps {
11 | type: string;
12 | rotate?: number;
13 | tabindex?: number;
14 | disabled?: boolean;
15 | }
16 |
17 | export interface IconEvents {
18 | onClick: (e: MouseEvent) => void;
19 | onFocus: (e: FocusEvent) => void;
20 | }
21 |
22 | @Component
23 | export default class Icon extends Vue.Component
2 |
3 | 
4 |
5 |
8 | 
9 | 
10 | 
11 | 
12 |
24 | 
25 | 
26 |
27 | ## 功能
28 |
29 | - [x] 基本翻译
30 | - [x] 语音朗读
31 | - [x] 顶端显示
32 | - [x] 开机启动
33 | - [x] ~~自动更新~~
34 | - [x] 全局快捷键呼出
35 | - [x] 内置多种翻译引擎
36 |
37 | ## 下载
38 |
39 | 您可以在[这里](https://github.com/MoeFE/GoogleTranslate/releases/latest)手动下载最新版本
40 |
41 | ## FAQ
42 |
43 | Q：Electron 不是跨平台的吗？为什么只有 Mac 版本？
44 | A：因为 UI 的交互设计不适用于其他操作系统
45 |
46 | Q：为什么不能自动更新？
47 | A：因为我没有加入 [Apple Developer Program](https://developer.apple.com/programs/)（需要缴纳年费），无法进行[代码签名](https://electronjs.org/docs/tutorial/code-signing)，所以无法使用自动更新功能
48 |
49 | Q：所有翻译引擎都提示当前翻译接口不可用？
50 | A：在新版本中，无论你使用哪种翻译引擎，都会先调用国内谷歌翻译的检测语言接口。出现这种情况一般是你的代理节点出现流量异常，导致请求被谷歌拦截，需要输入验证码（你还可以使用 option + command + I 打开调试工具查看请求结果是否正确）所以如果出现这个问题，请更换你的代理节点或不使用代理直接使用国内谷歌引擎。
51 |
52 | Q：无法打开应用，提示该应用来自身份不明的开发者？
53 | A：在终端中输入 `sudo spctl –master-disable` 然后按回车确认，密码是系统开机密码。
54 | 然后打开系统偏好设置 ⇨ 安全性和隐私 ⇨ 任何来源，勾选即可。
55 |
56 | ## 参与贡献
57 |
58 | 1. Fork it!
59 | 2. 将自己添加为贡献者：`npm run contributors`
60 | 3. 创建功能分支：`git checkout -b my-new-feature`
61 | 4. 提交你的更改：`git commit -am 'Add some feature'`
62 | 5. 推送这个分支：`git push origin my-new-feature`
63 | 6. 提交一个拉取请求 :D
64 |
65 | ## 贡献者
66 |
67 | 感谢这些美好的人 ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
68 |
69 |
70 |
71 | | [
さくら](https://qwq.cat)
[💻](https://github.com/MoeFE/GoogleTranslate/commits?author=u3u "Code") [📖](https://github.com/MoeFE/GoogleTranslate/commits?author=u3u "Documentation") [🎨](#design-u3u "Design") [🤔](#ideas-u3u "Ideas, Planning, & Feedback") | [
Batur](https://github.com/Batur24)
[💬](#question-Batur24 "Answering Questions") [🐛](https://github.com/MoeFE/GoogleTranslate/issues?q=author%3ABatur24 "Bug reports") [🤔](#ideas-Batur24 "Ideas, Planning, & Feedback") [⚠️](https://github.com/MoeFE/GoogleTranslate/commits?author=Batur24 "Tests") | [
mantou](https://github.com/mantou132)
[💻](https://github.com/MoeFE/GoogleTranslate/commits?author=mantou132 "Code") [🤔](#ideas-mantou132 "Ideas, Planning, & Feedback") | 72 | | :---: | :---: | :---: | 73 | 74 | 75 | 76 | 该项目遵循 [all-contributors](https://github.com/kentcdodds/all-contributors) 规范，欢迎任何形式的贡献！ 77 | 78 | ## 协议 79 | 80 | [GNU General Public License v3.0](./LICENSE) 81 | 本项目仅供学习交流和私人使用，禁止商业用途 82 | 83 | > [qwq.cat](https://qwq.cat) · GitHub [@u3u](https://github.com/u3u) · Twitter [@hanser0v0](https://twitter.com/hanser0v0) 84 | -------------------------------------------------------------------------------- /src/renderer/store.ts: -------------------------------------------------------------------------------- 1 | import { remote, ipcRenderer } from 'electron'; 2 | import Vue from 'vue'; 3 | import Vuex from 'vuex'; 4 | import store from 'store'; 5 | import anime from 'animejs'; 6 | import AutoLaunch from 'auto-launch'; 7 | import { sleep } from '@/utils'; 8 | import { IDialects } from 'assets/languages'; 9 | 10 | const { Notification } = remote; 11 | 12 | Vue.use(Vuex); 13 | 14 | export interface ILang { 15 | key: string; 16 | country: string; 17 | } 18 | 19 | export interface IState { 20 | autoLaunch?: boolean; 21 | translateSelection?: boolean; 22 | isAlwaysOnTop?: boolean; 23 | shortcutKeys?: string; 24 | defaultEngine?: string; 25 | sourceLang?: ILang; 26 | targetLang?: ILang; 27 | recentlyUsed?: IDialects; 28 | } 29 | 30 | const googleTranslateAutoLauncher = new AutoLaunch({ 31 | name: 'Google 翻译', 32 | }); 33 | 34 | const window = remote.getCurrentWindow(); 35 | 36 | const initState: IState = { 37 | autoLaunch: false, 38 | translateSelection: false, 39 | isAlwaysOnTop: true, 40 | shortcutKeys: '', 41 | defaultEngine: 'google', 42 | sourceLang: { 43 | key: 'zh-CN', 44 | country: 'zh-CN', 45 | }, 46 | targetLang: { 47 | key: 'en', 48 | country: 'en-UK', 49 | }, 50 | recentlyUsed: [ 51 | { 52 | asr_host: 'bm.nvc.chMN.nuancemobility.net', 53 | asr: 'zh-CN', 54 | flag_image_1x: 'http://api.itranslateapp.com/flags/zh-CN.png', 55 | localized_name: 'Chinese (Mandarin)', 56 | key: 'zh-CN', 57 | flag_image_2x: 'http://api.itranslateapp.com/flags/zh-CN-2x.png', 58 | tts: { male: 'chchinesemale', female: 'chchinesefemale' }, 59 | tts_offline: { male: '', female: 'zh-CN' }, 60 | }, 61 | { 62 | asr_host: 'bm.nvc.enGB.nuancemobility.net', 63 | asr: 'en', 64 | flag_image_1x: 'http://api.itranslateapp.com/flags/en-UK.png', 65 | localized_name: 'English (GB)', 66 | key: 'en-UK', 67 | flag_image_2x: 'http://api.itranslateapp.com/flags/en-UK-2x.png', 68 | tts: { male: 'ukenglishmale', female: 'ukenglishfemale' }, 69 | tts_offline: { male: 'en-GB', female: '' }, 70 | }, 71 | ], 72 | }; 73 | 74 | const $store = new Vuex.Store
220 | {this.$slots.default}
221 |
222 | );
223 | }
224 | }
225 |
--------------------------------------------------------------------------------
/src/renderer/components/InputShortcutKeys.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-nested-ternary */
2 | import * as Vue from 'vue-tsx-support';
3 | import Component from 'vue-class-component';
4 | import { Prop } from 'vue-property-decorator';
5 | import styled from 'vue-emotion';
6 | import keycode from 'keycode';
7 | import anime from 'animejs';
8 | import Icon from './Icon';
9 |
10 | // #region stylesheet
11 | const Input = styled.div`
12 | display: flex;
13 | align-items: center;
14 | position: relative;
15 | appearance: none;
16 | outline: 0;
17 | border: 1px solid transparent;
18 | border-radius: 4px;
19 | font-size: 12px;
20 | font-weight: 300;
21 | width: 100%;
22 | height: 55px;
23 | padding: 5px;
24 | background: #fff;
25 | box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.1);
26 | box-sizing: border-box;
27 | -webkit-user-modify: read-only;
28 | &:focus {
29 | border: 1px solid #199bff;
30 | &:empty:before {
31 | content: attr(focusPlaceholder);
32 | color: #bbb;
33 | padding: 0 10px;
34 | }
35 | }
36 | &:empty:before {
37 | content: attr(placeholder);
38 | color: #bbb;
39 | padding: 0 10px;
40 | }
41 | .icon {
42 | outline: none;
43 | &.icon-clear {
44 | position: absolute;
45 | right: 12px;
46 | color: #fff;
47 | background: #ccc;
48 | border-radius: 50%;
49 | width: 16px;
50 | height: 16px;
51 | font-size: 12px;
52 | font-weight: bold;
53 | &:before {
54 | position: absolute;
55 | top: 50%;
56 | left: 50%;
57 | transform: translate3d(-50%, -50%, 0);
58 | }
59 | &:hover {
60 | background: #bbb;
61 | }
62 | }
63 | }
64 | `;
65 |
66 | const Shortcut = styled.div`
67 | display: inline-flex;
68 | flex-direction: column;
69 | justify-content: space-around;
70 | align-items: center;
71 | position: relative;
72 | width: 45px;
73 | height: 45px;
74 | border-radius: 5px;
75 | margin-right: 10px;
76 | padding: 0 3px;
77 | border: 1px solid #c2c7cc;
78 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
79 | box-sizing: border-box;
80 | color: #000;
81 | background: #fff;
82 | font-weight: 500;
83 | `;
84 |
85 | const Key = styled.span`
86 | font-size: 24px;
87 | font-family: arial;
88 | `;
89 |
90 | const Badge = styled.span`
91 | font-size: 18px;
92 | align-self: flex-end;
93 | + ${Key.toString()} {
94 | font-size: 9px;
95 | align-self: flex-end;
96 | font-family: inherit;
97 | }
98 | `;
99 | // #endregion
100 |
101 | interface IKeyMap {
102 | icon: string;
103 | text: string;
104 | sort: number;
105 | }
106 |
107 | const keyMap: {
108 | [index: string]: IKeyMap;
109 | } = {
110 | Alt: { icon: '⌥', text: 'alt', sort: 1 },
111 | Control: { icon: '⌃', text: 'ctrl', sort: 2 },
112 | Meta: { icon: '⌘', text: 'cmd', sort: 0 },
113 | Shift: { icon: '⇧', text: 'shift', sort: 3 },
114 | Enter: { icon: '', text: '↩', sort: 4 },
115 | Backspace: { icon: '', text: '⌫', sort: 4 },
116 | ArrowUp: { icon: '', text: '↑', sort: 4 },
117 | ArrowRight: { icon: '', text: '→', sort: 4 },
118 | ArrowDown: { icon: '', text: '↓', sort: 4 },
119 | ArrowLeft: { icon: '', text: '←', sort: 4 },
120 | ' ': { icon: ' ', text: 'space', sort: 4 },
121 | };
122 |
123 | const banList = ['CapsLock', 'Escape'];
124 |
125 | interface ShortcutKeysProps {
126 | value: string;
127 | }
128 |
129 | @Component
130 | class ShortcutKeys extends Vue.Component