数据支持多语言

imsfc · Sep 20, 2024 · daaf3ce · daaf3ce
1 parent 98fb367
commit daaf3ce
Show file tree

Hide file tree

Showing 13 changed files with 1,063 additions and 631 deletions.
diff --git a/src/components/ItemRecipeSelect.tsx b/src/components/ItemRecipeSelect.tsx
@@ -1,17 +1,15 @@
 import { computed, defineComponent, watch, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { NSelect, type SelectRenderLabel, type SelectRenderTag } from 'naive-ui'
 
 import BuildingImage from '@/components/BuildingImage'
 import ItemImage from '@/components/ItemImage'
 import type { Id } from '@/types'
-import { getBuildingById, getItemById, getRecipeById, recipes } from '@/data'
+import { getRecipeById, recipes } from '@/data'
+
+const renderItem = (itemId: Id, quantity: number, perMinute: number) => {
+  const { t } = useI18n()
 
-const renderItem = (
-  itemId: Id,
-  itemName: string,
-  quantity: number,
-  perMinute: number,
-) => {
   return (
     <div class="w-12 h-11 flex flex-col items-center gap-0.5">
       <ItemImage
@@ -20,7 +18,7 @@ const renderItem = (
         formats={['avif', 'webp', 'png']}
       />
       <div class="w-2/1 h-2 origin-top-center scale-50 text-sm leading-none text-center text-nowrap">
-        {itemName}
+        {t(`items.${itemId}`)}
       </div>
       <div class="w-2/1 h-2 origin-top-center scale-50 text-sm leading-none text-center text-nowrap">
         {quantity}({perMinute}/min)
@@ -30,22 +28,9 @@ const renderItem = (
 }
 
 const renderLabel: SelectRenderLabel = (option) => {
-  const recipe = getRecipeById(option.value as Id)
-  const building = getBuildingById(recipe.producedIn)
-
-  const inputs = recipe.inputs.map(({ itemId, ...data }) => {
-    return {
-      ...data,
-      item: getItemById(itemId),
-    }
-  })
+  const { t } = useI18n()
 
-  const outputs = recipe.outputs.map(({ itemId, ...data }) => {
-    return {
-      ...data,
-      item: getItemById(itemId),
-    }
-  })
+  const recipe = getRecipeById(option.value as Id)
 
   return (
     <div class="p-2 flex gap-2">
@@ -55,23 +40,25 @@ const renderLabel: SelectRenderLabel = (option) => {
           sizes={[48, 96, 144]}
           formats={['avif', 'webp', 'png']}
         />
-        <div class="text-xs leading-none">{building.name}</div>
+        <div class="text-xs leading-none">
+          {t(`buildings.${recipe.producedIn}`)}
+        </div>
       </div>
       <div class="h-16 flex flex-col gap-2">
-        <div class="text-sm leading-none font-medium">{recipe.name}</div>
+        <div class="text-sm leading-none font-medium">{option.label}</div>
         <div class="flex">
           <div class="w-48 flex">
-            {inputs.map(({ item, quantity, quantityPerMinute: perMinute }) =>
-              renderItem(item.id, item.name, quantity, perMinute),
+            {recipe.inputs.map(({ itemId, quantity, quantityPerMinute }) =>
+              renderItem(itemId, quantity, quantityPerMinute),
             )}
           </div>
           <div class="w-12 flex flex-col justify-center items-center">
             <div class="text-sm leading-none">→</div>
             <div class="text-xs leading-none">{recipe.productionDuration}s</div>
           </div>
           <div class="flex">
-            {outputs.map(({ item, quantity, quantityPerMinute: perMinute }) =>
-              renderItem(item.id, item.name, quantity, perMinute),
+            {recipe.outputs.map(({ itemId, quantity, quantityPerMinute }) =>
+              renderItem(itemId, quantity, quantityPerMinute),
             )}
           </div>
         </div>
@@ -92,15 +79,17 @@ export default defineComponent({
     'update:value': (value: Id | null) => true,
   },
   setup(props, { emit }) {
+    const { t } = useI18n()
+
     const options = computed(() => {
       if (props.itemId) {
         return recipes
           .filter(({ outputs }) => {
             return outputs.some(({ itemId }) => itemId === props.itemId)
           })
-          .map(({ id, name }) => {
+          .map(({ id }) => {
             return {
-              label: name,
+              label: t(`recipes.${id}`),
               value: id,
             }
           })

diff --git a/src/components/ItemSelect.tsx b/src/components/ItemSelect.tsx
@@ -1,18 +1,21 @@
 import { defineComponent, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { NFlex, NSelect, type SelectRenderLabel } from 'naive-ui'
 
 import ItemImage from '@/components/ItemImage'
 import type { Id } from '@/types'
 import { items } from '@/data'
 
-const options = items.map(({ id, name }) => {
+const options = items.map(({ id }) => {
   return {
-    label: name,
+    label: id,
     value: id,
   }
 })
 
 const renderLabel: SelectRenderLabel = (option) => {
+  const { t } = useI18n()
+
   return (
     <NFlex size="small" align="center" wrap={false}>
       <ItemImage
@@ -21,7 +24,7 @@ const renderLabel: SelectRenderLabel = (option) => {
         formats={['avif', 'webp', 'png']}
       />
       <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-        {option.label}
+        {t(`items.${option.label}`)}
       </div>
     </NFlex>
   )

diff --git a/src/data/buildings.json b/src/data/buildings.json
@@ -1,57 +1,46 @@
 [
   {
     "id": "Constructor",
-    "name": "构筑站",
     "powerUsage": 4
   },
   {
     "id": "Assembler",
-    "name": "装配站",
     "powerUsage": 15
   },
   {
     "id": "Manufacturer",
-    "name": "制造站",
     "powerUsage": 55
   },
   {
     "id": "Packager",
-    "name": "灌装站",
     "powerUsage": 10
   },
   {
     "id": "Refinery",
-    "name": "精炼站",
     "powerUsage": 30
   },
   {
     "id": "Blender",
-    "name": "混料站",
     "powerUsage": 75
   },
   {
     "id": "Particle_Accelerator",
-    "name": "粒子加速器",
     "powerUsage": "variable"
   },
   {
     "id": "Converter",
-    "name": "转化站",
     "powerUsage": "variable"
   },
   {
     "id": "Quantum_Encoder",
-    "name": "量子编码站",
     "powerUsage": "variable"
   },
   {
     "id": "Smelter",
-    "name": "冶炼站",
     "powerUsage": 4
   },
   {
     "id": "Foundry",
-    "name": "铸造站",
     "powerUsage": 16
   }
 ]
diff --git a/src/data/index.ts b/src/data/index.ts
@@ -11,7 +11,6 @@ export const items: Item[] = itemsJson as Item[]
 export const recipes = recipesJson.map(
   ({
     id,
-    name,
     inputs,
     outputs,
     producedIn,
@@ -20,7 +19,6 @@ export const recipes = recipesJson.map(
   }): Recipe => {
     return {
       id,
-      name,
       inputs: inputs.map(({ itemId, quantity }) => {
         return {
           itemId,