Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/file operations #29

Merged
merged 2 commits into from
Sep 9, 2024
Merged

Feature/file operations #29

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
53d8727
现在可以直接上传文件了
YuanXiQWQ Sep 9, 2024
6b138b7
更新导出/复制文件
YuanXiQWQ Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 161 additions & 95 deletions comparator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,12 @@
}

.input-group label{
width: 125px;
width: 200px;
margin-right: 10px;
}

.APIConfig button{
width: 42px;
width: 200px;
}

.introduction{
Expand All @@ -98,7 +98,7 @@
.console{
/* layout */
display: grid;
grid-template-rows: 2em 1fr;
grid-template-rows: 2em 2em 2em 1fr auto;
}

.console-btns{
Expand All @@ -110,11 +110,21 @@
width: 100%;
}

.console-btns button{
.console-btns button,
.console-btns2 button{
width: 100%;
height: 100%;
}

.console-btns2{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
justify-items: center;
height: 2em;
width: 100%;
}

#textJson{
width: 100%;
height: 95%;
Expand Down Expand Up @@ -165,7 +175,7 @@

<body>
<header class="header">
<a class="header-anchor" href="https://github.com/yk47g/gitkraken-chinese">
<a class="header-anchor" href="https://github.com/yk47g/gitkraken-chinese", target="_blank">
<img class="header-anchor-logo" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="关于我们的GitHub项目">
</a>
</header>
Expand Down Expand Up @@ -222,46 +232,39 @@
<button @click="autoGen">自动生成json</button>
<button @click="autoTranslate">自动翻译</button>
</div>
<div class="input-group">
<label for="newFile">上传新版文件:</label>
<input type="file" id="newFile" @change="loadFile('en')">
</div>
<div class="input-group">
<label for="oldFile">上传旧版翻译文件:</label>
<input type="file" id="oldFile" @change="loadFile('zh')">
</div>
<div class="console-textarea">
<label for="textJson"></label>
<textarea id="textJson"></textarea>
</div>
<div class="console-btns2">
<button @click="exportJson">导出json文件</button>
<button @click="copyToClipboard">复制到剪切板</button>
</div>
</fieldset>

<fieldset class="introduction">
<legend>使用说明</legend>
<b>对于有提供支持的API的用户:</b>
<ol class="introduction-list">
<li class="introduction-list-li">
选择并填写API配置并点击 [保存]
</li>
<li class="introduction-list-li">
将旧版汉化文件(如 strings_9.5.1.json )重命名为 strings_old.json
</li>
<li class="introduction-list-li">
使
<ul>
<li style="list-style: square;">comparator.html;</li>
<li style="list-style: square;">strings_old.json;</li>
<li style="list-style: square;">更新的英文 strings.json</li>
</ul>
位于同级目录
</li>
<li class="introduction-list-li">
使用 VSCode 的 Live Server 插件打开 comparator.html ,将自动解析两个json文件
填写API配置并保存
</li>
<li class="introduction-list-li">
点击 [对比] 按钮得到差异内容
上传新版本文件和旧版翻译文件并点击 [对比] 按钮得到差异内容
</li>
<li class="introduction-list-li">
点击 [自动翻译] 按钮翻译并等待弹出"翻译完成"提示框,之后将结果使用
<a href="https://www.bejson.com/" target="_blank">
格式化工具
</a>
整理
点击 [自动翻译] 按钮翻译并等待弹出"翻译完成"提示框
</li>
<li class="introduction-list-li">
将整理好后的内容覆盖 strings.json 文件
导出并覆盖 strings.json 文件
</li>
<li class="introduction-list-li">
重启 GitKraken
Expand All @@ -270,7 +273,7 @@
<b>对于没有API的用户</b>
<ol class="introduction-list">
<li class="introduction-list-li">
执行上面的步骤2,3,4,5
上传新版本文件和旧版翻译文件并点击 [对比] 按钮得到差异内容
</li>
<li class="introduction-list-li">
点击 [自动生成json] 按钮生成整合后的 json 文件
Expand All @@ -286,7 +289,7 @@
整理
</li>
<li class="introduction-list-li">
执行上面的步骤7
重启 GitKraken
</li>
</ol>
<b>可能出现的问题和解决建议</b>
Expand All @@ -306,7 +309,7 @@
</ul>
</li>
<li class="introduction-list-li">
打开页面有一段时间非常卡
电脑变得非常卡
<ul>
<li style="list-style: circle">
由于JSON文件较大,卡顿是正常的
Expand Down Expand Up @@ -442,13 +445,46 @@
}
}
},
mounted() {
// 英文源文件
this.loadJsonKeys('./strings.json', 'en')
// 旧版汉化文件
this.loadJsonKeys('./strings_old.json', 'zh')
},
methods: {
/**
* 导出JSON文件
*/
exportJson() {
const content = document.getElementById("textJson").value;
if (!content) {
alert("没有可以导出的内容");
return;
}

const blob = new Blob([content], { type: "application/json" });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "strings.json";
link.click();

URL.revokeObjectURL(link.href);
},

/**
* 复制到剪切板
*
* @returns {Promise<void>} 标明方法类型,不用管
*/
async copyToClipboard() {
const content = document.getElementById("textJson").value;
if (!content) {
alert("没有可以复制的内容");
return;
}

try {
await navigator.clipboard.writeText(content);
alert("已复制到剪切板");
} catch (err) {
alert("复制失败，请手动复制");
}
},

/**
* 显示/隐藏内容
*
Expand All @@ -464,57 +500,87 @@
content.classList.add('hidden');
}
},

toggleYoudao() {
this.showYoudao = !this.showYoudao;
},

toggleOpenAI() {
this.showOpenAI = !this.showOpenAI;
},
loadJsonKeys(url, type) {
let vm = this;
let request = new XMLHttpRequest();
request.open("get", url);
request.send(null);
request.onload = function () {
if (request.status === 200) {
let key;
let json = JSON.parse(request.responseText);
if (type === 'en') {
vm.sourceEN = json;
}
const menuStrings = json['menuStrings'];
for (key in menuStrings) {
if (type === 'en') {
vm.menuStringsEN.push({
key: key,
value: menuStrings[key],
scope: 'menuStrings',
});
} else {
vm.menuStringsZH.push({
key: key,
value: menuStrings[key],
scope: 'menuStrings',
});
}
}
const strings = json['strings'];
for (key in strings) {
if (type === 'en') {
vm.menuStringsEN.push({
key: key,
value: strings[key],
scope: 'strings',
});
} else {
vm.menuStringsZH.push({
key: key,
value: strings[key],
scope: 'strings',
});
}
}

/**
* 删除上传的旧文件,读取上传的新文件
*
* @param type 上传的文件类型
*/
loadFile(type) {
const input = type === 'en' ? document.getElementById('newFile') : document.getElementById('oldFile');
const file = input.files[0];

if (!file) {
alert("请选择文件");
return;
}

if (type === 'en') {
this.menuStringsEN = [];
this.sourceEN = {};
} else {
this.menuStringsZH = [];
}

const reader = new FileReader();
reader.onload = e => {
try {
const json = JSON.parse(e.target.result);
if (type === 'en') {
this.sourceEN = json;
this.processJsonKeys(json, 'en');
} else {
this.processJsonKeys(json, 'zh');
}
} catch (err) {
alert("文件内容无效，无法解析为JSON");
}
};
reader.readAsText(file);
},

processJsonKeys(json, type) {
let key;
const menuStrings = json['menuStrings'];
for (key in menuStrings) {
if (type === 'en') {
this.menuStringsEN.push({
key: key,
value: menuStrings[key],
scope: 'menuStrings',
});
} else {
this.menuStringsZH.push({
key: key,
value: menuStrings[key],
scope: 'menuStrings',
});
}
}

const strings = json['strings'];
for (key in strings) {
if (type === 'en') {
this.menuStringsEN.push({
key: key,
value: strings[key],
scope: 'strings',
});
} else {
this.menuStringsZH.push({
key: key,
value: strings[key],
scope: 'strings',
});
}
}
},
doCompare() {
Expand All @@ -533,7 +599,7 @@
this.sourceEN[item.scope][item.key] = item.value;
}

document.getElementById("textJson").innerHTML = JSON.stringify(this.sourceEN, null, 2);
document.getElementById("textJson").innerHTML = JSON.stringify(this.sourceEN, null, 2);
},
async autoTranslate() {
if (this.menuStringsCY.length === 0) {
Expand Down Expand Up @@ -576,15 +642,15 @@
const sign = this.buildSign(query, curtime);
const url = 'https://openapi.youdao.com/api';
const data = {
q: query,
appKey: this.youdao.appKey,
salt: this.youdao.salt,
from: this.youdao.from,
to: this.youdao.to,
sign: sign,
signType: "v3",
curtime: curtime,
};
q: query,
appKey: this.youdao.appKey,
salt: this.youdao.salt,
from: this.youdao.from,
to: this.youdao.to,
sign: sign,
signType: "v3",
curtime: curtime,
};
return new Promise(resolve => {
$.ajax({
url: url,
Expand Down Expand Up @@ -650,23 +716,23 @@
return CryptoJS.SHA256(str).toString(CryptoJS.enc.Hex);
},
truncate(q) {
const len = q.length;
if (len <= 20) return q;
const len = q.length;
if (len <= 20) return q;
return q.substring(0, 10) + len + q.substring(len - 10, len);
},
sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
},
saveKeys() {
// 获取 AppKey和 AppSecret 或 OpenAI API 密钥的表单内容
// 获取 AppKey和 AppSecret 或 OpenAI API 密钥的表单内容
if (this.selectedApi === 'youdao') {
this.youdao.appKey = document.getElementById('appKey').value;
this.youdao.appSecret = document.getElementById('appSecret').value;
alert('有道API 配置已保存');
} else if (this.selectedApi === 'openai') {
this.openai.apiKey = document.getElementById('openaiApiKey').value;
this.openai.model = document.getElementById("modelSelector").value;
alert('OpenAI API 配置已保存');
alert('OpenAI API 配置已保存');
}
}
},
Expand Down