重构 ItemRecipeSelect 组件

imsfc · Sep 20, 2024 · 0b19b1c · 0b19b1c
1 parent 6f6254c
commit 0b19b1c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 32 deletions.
diff --git a/src/assets/items/index.ts b/src/assets/items/index.ts
@@ -1,10 +1,10 @@
 const images = import.meta.glob<string[]>('./*.png', {
-  query: `?w=72;48;24&format=avif;webp;png`,
+  query: `?w=96;64;32&format=avif;webp;png`,
   import: 'default',
   eager: true,
 })
 
-const sizes = [72, 48, 24] as const
+const sizes = [96, 64, 32] as const
 const formats = ['avif', 'webp', 'png'] as const
 
 export type Size = (typeof sizes)[number]

diff --git a/src/components/ItemRecipeSelect.tsx b/src/components/ItemRecipeSelect.tsx
@@ -1,6 +1,11 @@
 import { computed, defineComponent, watch, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NSelect, type SelectRenderLabel, type SelectRenderTag } from 'naive-ui'
+import {
+  NFlex,
+  NSelect,
+  type SelectRenderLabel,
+  type SelectRenderTag,
+} from 'naive-ui'
 
 import BuildingImage from '@/components/BuildingImage'
 import ItemImage from '@/components/ItemImage'
@@ -11,19 +16,26 @@ const renderItem = (itemId: Id, quantity: number, perMinute: number) => {
   const { t } = useI18n()
 
   return (
-    <div class="w-12 h-11 flex flex-col items-center gap-0.5">
+    <NFlex size={4} align="center" vertical>
       <ItemImage
         name={itemId}
-        sizes={[24, 48, 72]}
+        sizes={[32, 64, 96]}
         formats={['avif', 'webp', 'png']}
       />
-      <div class="w-2/1 h-2 origin-top-center scale-50 text-sm leading-none text-center text-nowrap">
-        {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)
-      </div>
-    </div>
+      <NFlex
+        class="w-16 text-xs text-center whitespace-normal grow"
+        size={0}
+        vertical
+      >
+        <div class="grow line-clamp-2">
+          {quantity}×{t(`items.${itemId}`)}
+        </div>
+        <div class="opacity-75 truncate">
+          {perMinute}
+          {t('perMinute')}
+        </div>
+      </NFlex>
+    </NFlex>
   )
 }
 
@@ -33,37 +45,45 @@ const renderLabel: SelectRenderLabel = (option) => {
   const recipe = getRecipeById(option.value as Id)
 
   return (
-    <div class="p-2 flex gap-2">
-      <div class="w-16 flex flex-col justify-center items-center gap-1">
+    <NFlex class="py-2" align="center">
+      <NFlex vertical>
         <BuildingImage
           name={recipe.producedIn}
           sizes={[48, 96, 144]}
           formats={['avif', 'webp', 'png']}
         />
-        <div class="text-xs leading-none">
+        <div class="w-12 text-xs text-center whitespace-normal">
           {t(`buildings.${recipe.producedIn}`)}
         </div>
-      </div>
-      <div class="h-16 flex flex-col gap-2">
-        <div class="text-sm leading-none font-medium">{option.label}</div>
-        <div class="flex">
-          <div class="w-48 flex">
+      </NFlex>
+      <NFlex size={8} vertical>
+        <div class="text-sm">{option.label}</div>
+        <NFlex>
+          <NFlex>
             {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">
+          </NFlex>
+          <NFlex
+            class="w-12 self-center"
+            justify="center"
+            align="center"
+            vertical
+          >
+            <div class="text-xl leading-none">→</div>
+            <div class="text-sm leading-none">
+              {recipe.productionDuration}
+              {t('seconds')}
+            </div>
+          </NFlex>
+          <NFlex>
             {recipe.outputs.map(({ itemId, quantity, quantityPerMinute }) =>
               renderItem(itemId, quantity, quantityPerMinute),
             )}
-          </div>
-        </div>
-      </div>
-    </div>
+          </NFlex>
+        </NFlex>
+      </NFlex>
+    </NFlex>
   )
 }
 

diff --git a/src/components/ItemSelect.tsx b/src/components/ItemSelect.tsx
@@ -11,10 +11,12 @@ const renderLabel: SelectRenderLabel = (option) => {
     <NFlex size="small" align="center" wrap={false}>
       <ItemImage
         name={option.value as string}
-        sizes={[24, 48, 72]}
+        sizes={[32, 64, 96]}
         formats={['avif', 'webp', 'png']}
+        width={24}
+        height={24}
       />
-      <div class="overflow-hidden text-ellipsis">{option.label}</div>
+      <div class="truncate">{option.label}</div>
     </NFlex>
   )
 }

diff --git a/src/locales/en.yml b/src/locales/en.yml
@@ -33,3 +33,5 @@ recipe: Recipe
 targetItem: Target Item
 building: Building
 targetItemSpeed: Target Item Speed
+perMinute: /min
+seconds: s
diff --git a/src/locales/zh-CN.yml b/src/locales/zh-CN.yml
@@ -33,3 +33,5 @@ recipe: 配方
 targetItem: 目标物品
 building: 建筑
 targetItemSpeed: 目标物品速率
+perMinute: /分钟
+seconds: 秒