feat(i18n): mask setting

src/components/Header.vue

@@ -49,6 +49,7 @@ async function maximizeOrRestore() {
   justify-content: end;
   align-items: center;
   border-radius: 0 10px 0 0;
+  user-select: none;
 
   .n-button-group{
     flex-shrink: 0;

src/components/setting/Mask.vue

@@ -236,43 +236,58 @@ onUnmounted(() => {
       </NGrid>
     </NForm>
 
-    <NH4 prefix="bar">设备旋转</NH4>
+    <NH4 prefix="bar">{{ $t("pages.Setting.Mask.rotation.title") }}</NH4>
-    <NFormItem :label="'跟随设备旋转'" label-placement="left">
+    <NFormItem
+      :label="$t('pages.Setting.Mask.rotation.rotateWithDevice')"
+      label-placement="left"
+    >
       <NCheckbox
         v-model:checked="store.rotation.enable"
         @update:checked="localStore.set('rotation', store.rotation)"
       />
     </NFormItem>
     <NGrid :cols="2">
-      <NFormItemGi label="竖屏蒙版高度" label-placement="left">
+      <NFormItemGi
+        :label="$t('pages.Setting.Mask.rotation.verticalLength')"
+        label-placement="left"
+      >
         <NInputNumber
           v-model:value="store.rotation.verticalLength"
           @update:value="localStore.set('rotation', store.rotation)"
-          :placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.w')"
+          :placeholder="$t('pages.Setting.Mask.rotation.verticalLength')"
         />
       </NFormItemGi>
-      <NFormItemGi label="横屏蒙版宽度" label-placement="left">
+      <NFormItemGi
+        :label="$t('pages.Setting.Mask.rotation.horizontalLength')"
+        label-placement="left"
+      >
         <NInputNumber
           v-model:value="store.rotation.horizontalLength"
           @update:value="localStore.set('rotation', store.rotation)"
-          :placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.h')"
+          :placeholder="$t('pages.Setting.Mask.rotation.horizontalLength')"
         />
       </NFormItemGi>
     </NGrid>
 
     <NH4 prefix="bar">ScreenStream</NH4>
-    <NFormItem :label="'启用投屏'" label-placement="left">
+    <NFormItem
+      :label="$t('pages.Setting.Mask.screenStream.enable')"
+      label-placement="left"
+    >
       <NCheckbox
         v-model:checked="store.screenStream.enable"
         @update:checked="localStore.set('screenStream', store.screenStream)"
       />
     </NFormItem>
-    <NFormItem :label="'投屏地址'" label-placement="left">
+    <NFormItem
+      :label="$t('pages.Setting.Mask.screenStream.address')"
+      label-placement="left"
+    >
       <NInput
         v-model:value="store.screenStream.address"
         @update:value="localStore.set('screenStream', store.screenStream)"
         clearable
-        :placeholder="'请输入 ScreenStream 投屏地址'"
+        :placeholder="$t('pages.Setting.Mask.screenStream.addressPlaceholder')"
       />
     </NFormItem>
   </div>

src/i18n/en-US.json

@@ -36,7 +36,8 @@
       "wsClose": "Close",
       "wsConnect": "Control",
       "adbDeviceError": "Unable to get available devices",
-      "adbConnectError": "Wireless connection failed"
+      "adbConnectError": "Wireless connection failed",
+      "rotation": "Device rotation {0}°"
     },
     "Mask": {
       "keyconfigException": "The key mapping config is abnormal, please delete this config",
@@ -85,6 +86,17 @@
           "y": "Y coordinate of upper left corner",
           "w": "Mask width",
           "h": "Mask height"
+        },
+        "rotation": {
+          "title": "Device rotation",
+          "rotateWithDevice": "Follow device rotation",
+          "verticalLength": "Mask height in vertical screen",
+          "horizontalLength": "Mask width in horizontal screen "
+        },
+        "screenStream": {
+          "enable": "Enable mirror",
+          "address": "Screen mirror address",
+          "addressPlaceholder": "Please enter the ScreenStream screen mirror address"
         }
       },
       "Basic": {

src/i18n/zh-CN.json

@@ -86,6 +86,17 @@
           "y": "请输入蒙版左上角Y坐标",
           "w": "请输入蒙版宽度",
           "h": "请输入蒙版高度"
+        },
+        "rotation": {
+          "title": "设备旋转",
+          "rotateWithDevice": "跟随设备旋转",
+          "verticalLength": "竖屏蒙版高度",
+          "horizontalLength": "横屏蒙版宽度"
+        },
+        "screenStream": {
+          "enable": "启用投屏",
+          "address": "投屏地址",
+          "addressPlaceholder": "请输入 ScreenStream 投屏地址"
         }
       },
       "Basic": {