部署 i18n

Author: Linho1219

src/App.vue

@@ -27,9 +27,11 @@
             "
             class="add-data-opt add"
           >
-            + 添加
+            + {{ t("buttons.add") }}
+          </div>
+          <div @click="handleImport()" class="add-data-opt import">
+            ↓ {{ t("buttons.import") }}
           </div>
-          <div @click="handleImport()" class="add-data-opt import">↓ 导入</div>
         </div>
       </div>
       <CodeDisplay :dataArr="toOriginalDatum(graphData)" />
@@ -50,6 +52,9 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 import Navbar from "./components/nav.vue";
 import Graph from "./components/graph.vue";
 import DataBlock from "./components/dataBlock.vue";
@@ -146,6 +151,7 @@ function handleImport() {
 #navbar {
   height: 50px;
   width: 100vw;
+  box-sizing: border-box;
   background: var(--c-bk1);
   border-bottom: var(--c-border) 1px solid;
   position: relative;

src/components/dataBlock.vue

@@ -4,7 +4,7 @@
     <div class="selectors">
       <select v-model="dataItem.fnType" @change="fnTypeChange(dataItem)">
         <option v-for="type in fnTypeArr" :value="type.value">
-          {{ type.label }}
+          {{ t(type.label) }}
         </option>
       </select>
       <select
@@ -13,7 +13,7 @@
         @change="graphTypeChange(dataItem)"
       >
         <option v-for="type in allowedGraphType" :value="type.value">
-          {{ type.label }}
+          {{ t(type.label) }}
         </option>
       </select>
       <div style="flex-grow: 2"></div>
@@ -22,9 +22,11 @@
         :class="{ active: !blockFolded }"
         @click="blockFolded = !blockFolded"
       >
-        {{ blockFolded ? "展开" : "收起" }}
+        {{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
+      </button>
+      <button class="delete blockBtn" @click="emit('delete')">
+        {{ t("buttons.del") }}
       </button>
-      <button class="delete blockBtn" @click="emit('delete')">删除</button>
     </div>
 
     <div class="inputs">
@@ -61,6 +63,9 @@
   </div>
 </template>
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 import {
   fnTypeArr,
   getAllowedGraphType,

src/components/dataBlockInner/coordArrInputs.vue

@@ -12,17 +12,19 @@
       :key="data.id"
     >
       <span class="coordarr-drag">☰</span>
-      <span class="coord-label">{{ fnType.coordArr.label }}</span>
+      <span class="coord-label">{{
+        t(fnType.coordArr.label) + fnType.coordArr.fir
+      }}</span>
       <input
         type="number"
         v-model="data.payload[0]"
-        :placeholder="fnType.coordArr.placeholder[0]"
+        :placeholder="t(fnType.coordArr.placeholder[0])"
       />
       <span class="coord-label">{{ fnType.coordArr.sep }}</span>
       <input
         type="number"
         v-model="data.payload[1]"
-        :placeholder="fnType.coordArr.placeholder[1]"
+        :placeholder="t(fnType.coordArr.placeholder[1])"
       />
       <span class="coord-label">{{ fnType.coordArr.fin }}</span>
       <span class="coordarr-delete" @click="privateData.splice(index, 1)"
@@ -45,6 +47,9 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
 import { InputProps } from "../../consts";
 import { onMounted, ref, watch } from "vue";
 import { VueDraggable } from "vue-draggable-plus";

src/components/dataBlockInner/coordInputs.vue

@@ -6,25 +6,28 @@
     class="input-box coord"
     :class="{ optional: input.optional }"
   >
-    <span class="coord-label">{{ input.label }}</span>
+    <span class="coord-label">{{ t(input.label) + input.fir }}</span>
     <input
       type="number"
       :value="dataItem[input.value]?.[0] ?? ''"
       @input="handleCoordInput(dataItem!, input, 0, $event)"
-      :placeholder="input.placeholder[0]"
+      :placeholder="t(input.placeholder[0])"
     />
     <span class="coord-label">{{ input.sep }}</span>
     <input
       type="number"
       :value="dataItem[input.value]?.[1] ?? ''"
       @input="handleCoordInput(dataItem!, input, 1, $event)"
-      :placeholder="input.placeholder[1]"
+      :placeholder="t(input.placeholder[1])"
     />
     <span class="coord-label">{{ input.fin }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
 import { CoordType, InternalDatum, InputProps } from "../../consts";
 
 const { dataItem, fnType } = defineProps<InputProps>();

src/components/dataBlockInner/optInputs.vue

@@ -4,22 +4,29 @@
     v-for="input in fnType.optInput ?? []"
     class="input-box opt-input optional"
   >
-    <span class="coord-label optin-label">{{ input.label }}</span>
+    <span class="coord-label optin-label">{{ t(input.label) }}</span>
     <input
       :type="input.type"
       :value="dataItem[input.value] ?? ''"
       @input="handleCoordInput(dataItem!, input, $event)"
-      :placeholder="input.placeholder"
+      :placeholder="t(input.placeholder ?? '')"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 import { InternalDatum, InputProps, OptInput } from "../../consts";
 
 const { dataItem, fnType } = defineProps<InputProps>();
 
-function handleCoordInput(dataItem: InternalDatum, input: OptInput, event: Event) {
+function handleCoordInput(
+  dataItem: InternalDatum,
+  input: OptInput,
+  event: Event
+) {
   const raw = (<HTMLInputElement>event.target).value;
   if (raw === "") {
     delete dataItem[input.value];

src/components/dataBlockInner/strInputs.vue

@@ -1,15 +1,18 @@
 <template>
   <div v-for="input in fnType.inputs" class="input-box">
-    <span class="input-title">{{ input.title }}</span>
+    <span class="input-title">{{ t(input.title) }}</span>
     <input
       type="text"
       v-model="dataItem[input.value]"
-      :placeholder="input.placeholder"
+      :placeholder="t(input.placeholder)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 import { InputProps } from "../../consts";
 const { dataItem, fnType } = defineProps<InputProps>();
 </script>

src/components/dataBlockInner/switchInputs.vue

@@ -14,11 +14,14 @@
       class="switch"
       :class="dataItem[input.value] ? 'on' : 'off'"
     ></button>
-    {{ input.label }}
+    {{ t(input.label) }}
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 import { InputProps } from "../../consts";
 
 const { dataItem, fnType } = defineProps<InputProps>();

src/components/graph.vue

@@ -1,9 +1,14 @@
 <template>
   <div id="graphRender" ref="plotRef"></div>
-  <button id="refresh" @click="emit('requireFullUpdate')">重置</button>
+  <button id="refresh" @click="emit('requireFullUpdate')">
+    {{ t("buttons.reset") }}
+  </button>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 import { onMounted, ref, watch } from "vue";
 import { cloneDeep, throttle } from "lodash-es";
 import type { FunctionPlotDatum } from "function-plot";

src/components/nav.vue

@@ -2,23 +2,28 @@
   <div id="navbar">
     <span class="nav-title">
       function-plot-GUI <span class="version"> v0.2 · </span>
-      <a class="link" href="https://github.com/Linho1219/function-plot-GUI" target="_blank"
+      <a
+        class="link"
+        href="https://github.com/Linho1219/function-plot-GUI"
+        target="_blank"
         >Github</a
       >
     </span>
+    <div class="grow"></div>
+    <select v-model="locale">
+      <option value="zh-CN">简体中文</option>
+      <option value="en-US">English</option>
+    </select>
   </div>
 </template>
 
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { locale } = useI18n();
+</script>
+
 <style>
 .nav-title {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 15px;
-  height: fit-content;
-  text-align: left;
-  margin: auto;
   font-size: 20px;
   font-weight: bold;
 }
@@ -36,4 +41,11 @@
   opacity: 0.8;
   text-decoration: underline;
 }
+
+#navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 15px;
+}
 </style>