feat(i18n): add setting page i18n

This commit is contained in:
AkiChase 2024-05-11 11:53:45 +08:00
parent 842be45c56
commit 4c2b0ad84b
8 changed files with 174 additions and 70 deletions

View File

@ -25,7 +25,9 @@ import {
AndroidMetastate,
} from "../frontcommand/android";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const store = useGlobalStore();
@ -61,7 +63,7 @@ async function sendKeyCodeToDevice(code: AndroidKeycode) {
metastate: AndroidMetastate.AMETA_NONE,
});
} else {
message.error("未连接设备");
message.error(t("sidebar.noControledDevice"));
}
}
@ -70,7 +72,7 @@ async function changeScreenPowerMode() {
sendSetScreenPowerMode({ mode: nextScreenPowerMode.value });
nextScreenPowerMode.value = nextScreenPowerMode.value ? 0 : 2;
} else {
message.error("未连接设备");
message.error(t("sidebar.noControledDevice"));
}
}
</script>

View File

@ -28,11 +28,8 @@ async function checkUpdate() {
<template>
<div class="setting-page">
<NH4 prefix="bar">关于</NH4>
<NP
>A Scrcpy client in Rust & Tarui aimed at providing mouse and key mapping
to control Android device.</NP
>
<NH4 prefix="bar">{{ $t("pages.Setting.About.about") }}</NH4>
<NP>{{ $t("pages.Setting.About.introduction") }}</NP>
<NFlex class="website">
<NButton
text
@ -41,7 +38,7 @@ async function checkUpdate() {
<template #icon>
<NIcon><LogoGithub /> </NIcon>
</template>
Github repo
{{ $t("pages.Setting.About.github") }}
</NButton>
<NButton
text
@ -69,19 +66,21 @@ async function checkUpdate() {
<template #icon>
<NIcon><Planet /> </NIcon>
</template>
AkiChase's Blog
{{ $t("pages.Setting.About.blog") }}
</NButton>
</NFlex>
<NH4 prefix="bar">更新</NH4>
<NH4 prefix="bar">{{ $t("pages.Setting.About.update") }}</NH4>
<NCheckbox
v-model:checked="store.checkUpdateAtStart"
@update:checked="
localStore.set('checkUpdateAtStart', store.checkUpdateAtStart)
"
>启动时检查软件更新</NCheckbox
>{{ $t("pages.Setting.About.checkUpdateOnStartup") }}</NCheckbox
>
<NP>当前版本{{ appVersion }}</NP>
<NButton @click="checkUpdate">检查更新</NButton>
<NP>{{ $t("pages.Setting.About.curVersion", [appVersion]) }}</NP>
<NButton @click="checkUpdate">{{
$t("pages.Setting.About.checkUpdate")
}}</NButton>
</div>
</template>

View File

@ -18,7 +18,9 @@ import {
import { relaunch } from "@tauri-apps/plugin-process";
import { onMounted, ref } from "vue";
import i18n from "../../i18n";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const localStore = new Store("store.bin");
const dialog = useDialog();
@ -56,10 +58,10 @@ function showLocalStore(index: number) {
function delLocalStore(key?: string) {
if (key) {
dialog.warning({
title: "Warning",
content: `即将删除数据"${key}",删除操作不可撤回,是否继续?`,
positiveText: "删除",
negativeText: "取消",
title: t("pages.Setting.Basic.delLocalStore.dialog.title"),
content: t("pages.Setting.Basic.delLocalStore.dialog.delKey", [key]),
positiveText: t("pages.Setting.Basic.delLocalStore.dialog.positiveText"),
negativeText: t("pages.Setting.Basic.delLocalStore.dialog.negativeText"),
onPositiveClick: () => {
localStore.delete(key);
localStoreEntries.value.splice(curDataIndex, 1);
@ -68,12 +70,12 @@ function delLocalStore(key?: string) {
});
} else {
dialog.warning({
title: "Warning",
content: "即将清空数据,操作不可撤回,且清空后将重启软件,是否继续?",
positiveText: "删除",
negativeText: "取消",
title: t("pages.Setting.Basic.delLocalStore.dialog.title"),
content: t("pages.Setting.Basic.delLocalStore.dialog.delAll"),
positiveText: t("pages.Setting.Basic.delLocalStore.dialog.positiveText"),
negativeText: t("pages.Setting.Basic.delLocalStore.dialog.negativeText"),
onPositiveClick: () => {
// localStore.clear();
localStore.clear();
relaunch();
},
});
@ -90,7 +92,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
<template>
<div class="setting-page">
<NH4 prefix="bar">语言</NH4>
<NH4 prefix="bar">{{ $t("pages.Setting.Basic.language") }}</NH4>
<NSelect
:value="curLanguage"
@update:value="changeLanguage"
@ -98,7 +100,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
style="max-width: 300px; margin: 20px 0"
/>
<NFlex justify="space-between">
<NH4 prefix="bar">本地数据</NH4>
<NH4 prefix="bar">{{ $t("pages.Setting.Basic.localStore") }}</NH4>
<NFlex>
<NButton
tertiary
@ -124,9 +126,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
</NButton>
</NFlex>
</NFlex>
<NP
>删除数据可能导致无法预料的后果请慎重操作若出现异常请尝试清空数据并重启软件</NP
>
<NP>{{ $t("pages.Setting.Basic.delLocalStore.warning") }}</NP>
<NList class="data-list" hoverable clickable>
<NListItem v-for="(entrie, index) in localStoreEntries">
<div @click="showLocalStore(index)">
@ -136,7 +136,10 @@ function changeLanguage(language: "zh-CN" | "en-US") {
</NList>
</div>
<NModal v-model:show="showDataModal">
<NCard style="width: 50%; height: 80%" title="卡片">
<NCard
style="width: 50%; height: 80%"
:title="localStoreEntries[curDataIndex][0]"
>
<NFlex vertical style="height: 100%">
<NInput
type="textarea"
@ -149,7 +152,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
type="success"
round
@click="delLocalStore(localStoreEntries[curDataIndex][0])"
>删除当前数据</NButton
>{{ $t("pages.Setting.Basic.delCurData") }}</NButton
>
</NFlex>
</NCard>

View File

@ -28,11 +28,13 @@ import { Store } from "@tauri-apps/plugin-store";
import { SettingsOutline } from "@vicons/ionicons5";
import { UnlistenFn } from "@tauri-apps/api/event";
import { useGlobalStore } from "../../store/global";
import { useI18n } from "vue-i18n";
let unlistenResize: UnlistenFn = () => {};
let unlistenMove: UnlistenFn = () => {};
let factor = 1;
const { t } = useI18n();
const localStore = new Store("store.bin");
const store = useGlobalStore();
const message = useMessage();
@ -57,25 +59,25 @@ const areaFormRules: FormRules = {
type: "number",
required: true,
trigger: ["blur", "input"],
message: "请输入左上角X坐标",
message: () => t("pages.Setting.Mask.areaFormMissing.x"),
},
posY: {
type: "number",
required: true,
trigger: ["blur", "input"],
message: "请输入左上角Y坐标",
message: () => t("pages.Setting.Mask.areaFormMissing.y"),
},
sizeW: {
type: "number",
required: true,
trigger: ["blur", "input"],
message: "请输入蒙版宽度",
message: () => t("pages.Setting.Mask.areaFormMissing.w"),
},
sizeH: {
type: "number",
required: true,
trigger: ["blur", "input"],
message: "请输入蒙版高度",
message: () => t("pages.Setting.Mask.areaFormMissing.h"),
},
};
@ -104,10 +106,10 @@ function handleAdjustClick(e: MouseEvent) {
if (!errors) {
adjustMaskArea().then(() => {
localStore.set("maskArea", areaModel.value);
message.success("蒙版区域已保存");
message.success(t("pages.Setting.Mask.areaSaved"));
});
} else {
message.error("请正确输入蒙版的坐标和尺寸");
message.error(t("pages.Setting.Mask.incorrectArea"));
}
});
}
@ -163,14 +165,17 @@ onUnmounted(() => {
<template>
<div class="setting-page">
<NH4 prefix="bar">按键提示</NH4>
<NFormItem label="是否显示" label-placement="left">
<NH4 prefix="bar">{{ $t("pages.Setting.Mask.buttonPrompts") }}</NH4>
<NFormItem
:label="$t('pages.Setting.Mask.ifButtonPrompts')"
label-placement="left"
>
<NCheckbox
v-model:checked="store.maskButton.show"
@update:checked="localStore.set('maskButton', store.maskButton)"
/>
</NFormItem>
<NFormItem label="不透明度" label-placement="left">
<NFormItem :label="$t('pages.Setting.Mask.opacity')" label-placement="left">
<NSlider
v-model:value="store.maskButton.transparency"
@update:checked="localStore.set('maskButton', store.maskButton)"
@ -190,7 +195,7 @@ onUnmounted(() => {
require-mark-placement="right-hanging"
>
<NFlex justify="space-between" align="center">
<NH4 prefix="bar">蒙版调整</NH4>
<NH4 prefix="bar">{{ $t("pages.Setting.Mask.areaAdjust") }}</NH4>
<NButton
tertiary
circle
@ -207,29 +212,29 @@ onUnmounted(() => {
<NFormItemGi label="X" path="posX">
<NInputNumber
v-model:value="areaModel.posX"
placeholder="左上角X坐标"
:placeholder="$t('pages.Setting.Mask.areaPlaceholder.x')"
/>
</NFormItemGi>
<NFormItemGi label="Y" path="posY">
<NInputNumber
v-model:value="areaModel.posY"
placeholder="左上角Y坐标"
:placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.y')"
/>
</NFormItemGi>
<NFormItemGi label="W" path="sizeW">
<NInputNumber
v-model:value="areaModel.sizeW"
placeholder="蒙版宽度"
:placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.w')"
/>
</NFormItemGi>
<NFormItemGi label="H" path="sizeH">
<NInputNumber
v-model:value="areaModel.sizeH"
placeholder="蒙版高度"
:placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.h')"
/>
</NFormItemGi>
</NGrid>
<NP>提示蒙版尺寸与设备尺寸将用于坐标转换请保证尺寸的准确性</NP>
<NP>{{ $t("pages.Setting.Mask.areaTip") }}</NP>
</NForm>
</div>
</template>

View File

@ -1,15 +0,0 @@
<script setup lang="ts">
import { NH4 } from "naive-ui";
</script>
<template>
<div class="setting-page">
<NH4 prefix="bar">敬请期待</NH4>
</div>
</template>
<style scoped>
.setting-page {
padding: 10px 25px;
}
</style>

View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import Basic from "./Basic.vue";
import Script from "./Script.vue";
import Mask from "./Mask.vue";
import About from "./About.vue";
import { NTabs, NTabPane, NScrollbar, NSpin } from "naive-ui";
@ -13,22 +12,17 @@ const store = useGlobalStore();
<div class="setting">
<NSpin :show="store.showLoadingRef">
<NTabs type="line" animated placement="left" default-value="basic">
<NTabPane tab="基本设置" name="basic">
<NTabPane :tab="$t('pages.Setting.tabs.basic')" name="basic">
<NScrollbar>
<Basic />
</NScrollbar>
</NTabPane>
<NTabPane tab="蒙版设置" name="mask">
<NTabPane :tab="$t('pages.Setting.tabs.mask')" name="mask">
<NScrollbar>
<Mask />
</NScrollbar>
</NTabPane>
<NTabPane tab="脚本设置" name="script">
<NScrollbar>
<Script />
</NScrollbar>
</NTabPane>
<NTabPane tab="关于" name="about">
<NTabPane :tab="$t('pages.Setting.tabs.about')" name="about">
<NScrollbar>
<About />
</NScrollbar>
@ -46,7 +40,7 @@ const store = useGlobalStore();
overflow-y: auto;
display: flex;
.n-tabs{
.n-tabs {
height: 100%;
}

View File

@ -1,7 +1,7 @@
{
"pages": {
"Device": {
"localPort": "Local Port",
"localPort": "Local port",
"status": "Status",
"shutdown": {
"title": "Warning",
@ -55,6 +55,64 @@
"content": "Please go to the device page to control any device",
"positiveText": "To control"
}
},
"Setting": {
"tabs": {
"basic": "Basic settings",
"mask": "Mask setting",
"about": "About"
},
"Mask": {
"areaFormMissing": {
"x": "Enter the X coordinate of the mask upper left corner",
"y": "Enter the Y coordinate of the mask upper left corner",
"w": "Enter mask width",
"h": "Enter the mask height"
},
"areaSaved": "Mask area saved",
"incorrectArea": "Please enter the coordinates and size of the mask correctly",
"buttonPrompts": "Button prompts",
"ifButtonPrompts": "Whether to display",
"opacity": "Opacity",
"areaAdjust": "Mask adjustment",
"areaPlaceholder": {
"x": "X coordinate of upper left corner"
},
"areaFormPlaceholder": {
"y": "Y coordinate of upper left corner",
"w": "Mask width",
"h": "Mask height"
},
"areaTip": "Tip: The mask size and device size will be used for coordinate conversion, please ensure the accuracy of the size"
},
"Basic": {
"delLocalStore": {
"dialog": {
"title": "Warning",
"delKey": "Data \"{0}\" is about to be deleted. The deletion operation is irreversible. Do you want to continue?",
"positiveText": "Delete",
"negativeText": "Cancel",
"delAll": "The data is about to be cleared. The operation is irreversible and the software will be restarted after clearing. Do you want to continue?"
},
"warning": "Deleting data may lead to unpredictable consequences, so please operate with caution. \nIf an exception occurs, please try clearing the data and restarting the software."
},
"language": "Language",
"localStore": "Local data",
"delCurData": "Delete current data"
},
"About": {
"introduction": "A Scrcpy client in Rust & Tarui aimed at providing mouse and key mapping to control Android device.",
"github": "Github repo",
"blog": "AkiChase's Blog",
"about": "About",
"update": "Update",
"checkUpdateOnStartup": "Check for software updates on startup",
"curVersion": "Current version: {0}",
"checkUpdate": "Check for updates"
}
}
},
"sidebar": {
"noControledDevice": "No devices are controlled"
}
}

View File

@ -55,6 +55,64 @@
"positiveText": "去控制"
},
"inputBoxPlaceholder": "输入文本后按Enter/Esc"
},
"Setting": {
"tabs": {
"basic": "基本设置",
"mask": "蒙版设置",
"about": "关于"
},
"Mask": {
"incorrectArea": "请正确输入蒙版的坐标和尺寸",
"areaSaved": "蒙版区域已保存",
"buttonPrompts": "按键提示",
"ifButtonPrompts": "是否显示",
"opacity": "不透明度",
"areaAdjust": "蒙版调整",
"areaPlaceholder": {
"x": "左上角X坐标"
},
"areaFormPlaceholder": {
"y": "左上角Y坐标",
"w": "蒙版宽度",
"h": "蒙版高度"
},
"areaTip": "提示:蒙版尺寸与设备尺寸将用于坐标转换,请保证尺寸的准确性",
"areaFormMissing": {
"x": "请输入蒙版左上角X坐标",
"y": "请输入蒙版左上角Y坐标",
"w": "请输入蒙版宽度",
"h": "请输入蒙版高度"
}
},
"Basic": {
"delLocalStore": {
"dialog": {
"title": "警告",
"positiveText": "删除",
"negativeText": "取消",
"delKey": "即将删除数据\"{0}\",删除操作不可撤回,是否继续?",
"delAll": "即将清空数据,操作不可撤回,且清空后将重启软件,是否继续?"
},
"warning": "删除数据可能导致无法预料的后果,请慎重操作。若出现异常请尝试清空数据并重启软件。"
},
"language": "语言",
"localStore": "本地数据",
"delCurData": "删除当前数据"
},
"About": {
"about": "关于",
"introduction": "一个基于 Rust & Tarui 的 Scrcpy 客户端,旨在提供鼠标键盘按键映射来控制安卓设备。",
"github": "Github 仓库",
"blog": "AkiChase 博客",
"update": "更新",
"curVersion": "当前版本:{0}",
"checkUpdate": "检查更新",
"checkUpdateOnStartup": "启动时检查软件更新"
}
}
},
"sidebar": {
"noControledDevice": "未控制任何设备"
}
}