重构

src/App.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent } from 'vue'
 import { RouterView } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { useColorMode } from '@vueuse/core'
+import { syncRef, useColorMode, useLocalStorage } from '@vueuse/core'
 import {
   darkTheme,
   dateZhCN,
@@ -14,6 +14,9 @@ export default defineComponent({
   setup() {
     const { locale } = useI18n()
 
+    const _locale = useLocalStorage('locale', locale.value)
+    syncRef(locale, _locale)
+
     const colorMode = useColorMode()
 
     const isDark = computed(() => {

src/components/ItemRecipeSelect.tsx

@@ -8,18 +8,21 @@ import {
 } from 'naive-ui'
 
 import type { Id } from '@/types'
-import { getRecipeById, recipes } from '@/data'
+import { getBuildingById, getItemById, getRecipeById, recipes } from '@/data'
+import { calculatePerMinute } from '@/utils/dataCalculators'
 
 import BuildingImage from './BuildingImage'
 import ItemImage from './ItemImage'
 
 const renderItem = (itemId: Id, quantity: number, perMinute: number) => {
   const { t } = useI18n()
 
+  const item = getItemById(itemId)
+
   return (
     <NFlex size={4} align="center" vertical>
       <ItemImage
-        name={itemId}
+        name={item.key}
         sizes={[32, 64, 96]}
         formats={['avif', 'webp', 'png']}
       />
@@ -29,7 +32,7 @@ const renderItem = (itemId: Id, quantity: number, perMinute: number) => {
         vertical
       >
         <div class="grow line-clamp-2">
-          {quantity}×{t(`items.${itemId}`)}
+          {quantity}×{t(`items.${item.key}`)}
         </div>
         <div class="opacity-75 truncate">
           {perMinute}
@@ -44,25 +47,30 @@ const renderLabel: SelectRenderLabel = (option) => {
   const { t } = useI18n()
 
   const recipe = getRecipeById(option.value as Id)
+  const building = getBuildingById(recipe.producedInId)
 
   return (
     <NFlex class="py-2" align="center">
       <NFlex vertical>
         <BuildingImage
-          name={recipe.producedIn}
+          name={building.key}
           sizes={[48, 96, 144]}
           formats={['avif', 'webp', 'png']}
         />
         <div class="w-12 text-xs text-center whitespace-normal">
-          {t(`buildings.${recipe.producedIn}`)}
+          {t(`buildings.${building.key}`)}
         </div>
       </NFlex>
       <NFlex size={8} vertical>
         <div class="text-sm">{option.label}</div>
         <NFlex>
           <NFlex>
-            {recipe.inputs.map(({ itemId, quantity, quantityPerMinute }) =>
-              renderItem(itemId, quantity, quantityPerMinute),
+            {recipe.inputs.map(({ itemId, quantity }) =>
+              renderItem(
+                itemId,
+                quantity,
+                calculatePerMinute(quantity, recipe.productionDuration),
+              ),
             )}
           </NFlex>
           <NFlex
@@ -78,8 +86,12 @@ const renderLabel: SelectRenderLabel = (option) => {
             </div>
           </NFlex>
           <NFlex>
-            {recipe.outputs.map(({ itemId, quantity, quantityPerMinute }) =>
-              renderItem(itemId, quantity, quantityPerMinute),
+            {recipe.outputs.map(({ itemId, quantity }) =>
+              renderItem(
+                itemId,
+                quantity,
+                calculatePerMinute(quantity, recipe.productionDuration),
+              ),
             )}
           </NFlex>
         </NFlex>
@@ -92,14 +104,11 @@ const renderTag: SelectRenderTag = ({ option }) => option.label as string
 
 export default defineComponent({
   props: {
-    value: String as PropType<Id | null>,
-    itemId: String as PropType<Id | null>,
-  },
-  emits: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    'update:value': (value: Id | null) => true,
+    itemId: Number as PropType<Id | null>,
+    value: Number as PropType<Id | null>,
+    onUpdateValue: Function as PropType<(value: Id | null) => void>,
   },
-  setup(props, { emit }) {
+  setup(props) {
     const { t } = useI18n()
 
     const options = computed(() => {
@@ -108,9 +117,9 @@ export default defineComponent({
           .filter(({ outputs }) => {
             return outputs.some(({ itemId }) => itemId === props.itemId)
           })
-          .map(({ id }) => {
+          .map(({ id, key }) => {
             return {
-              label: t(`recipes.${id}`),
+              label: t(`recipes.${key}`),
               value: id,
             }
           })
@@ -121,18 +130,16 @@ export default defineComponent({
 
     watch(options, (options) => {
       if (options.length === 0) {
-        emit('update:value', null)
+        props.onUpdateValue?.(null)
       } else {
-        emit('update:value', options[0].value)
+        props.onUpdateValue?.(options[0].value)
       }
     })
 
     return () => (
       <NSelect
         value={props.value}
-        onUpdateValue={(newValue) => {
-          emit('update:value', newValue)
-        }}
+        onUpdateValue={props.onUpdateValue}
         options={options.value}
         consistent-menu-width={false}
         renderLabel={renderLabel}

src/components/ItemSelect.tsx

@@ -3,15 +3,17 @@ import { useI18n } from 'vue-i18n'
 import { NFlex, NSelect, type SelectRenderLabel } from 'naive-ui'
 
 import type { Id } from '@/types'
-import { items, recipes } from '@/data'
+import { getItemById, items, recipes } from '@/data'
 
 import ItemImage from './ItemImage'
 
 const renderLabel: SelectRenderLabel = (option) => {
+  const item = getItemById(option.value as Id)
+
   return (
     <NFlex size="small" align="center" wrap={false}>
       <ItemImage
-        name={option.value as string}
+        name={item.key}
         sizes={[32, 64, 96]}
         formats={['avif', 'webp', 'png']}
         width={24}
@@ -24,13 +26,10 @@ const renderLabel: SelectRenderLabel = (option) => {
 
 export default defineComponent({
   props: {
-    value: String as PropType<Id | null>,
-  },
-  emits: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    'update:value': (value: Id | null) => true,
+    value: Number as PropType<Id | null>,
+    onUpdateValue: Function as PropType<(value: Id | null) => void>,
   },
-  setup(props, { emit }) {
+  setup(props) {
     const { t } = useI18n()
 
     const options = computed(() =>
@@ -40,9 +39,9 @@ export default defineComponent({
             return outputs.some(({ itemId }) => itemId === id)
           })
         })
-        .map(({ id }) => {
+        .map(({ id, key }) => {
           return {
-            label: t(`items.${id}`),
+            label: t(`items.${key}`),
             value: id,
           }
         }),
@@ -51,9 +50,7 @@ export default defineComponent({
     return () => (
       <NSelect
         value={props.value}
-        onUpdateValue={(newValue) => {
-          emit('update:value', newValue)
-        }}
+        onUpdateValue={props.onUpdateValue}
         options={options.value}
         consistent-menu-width={false}
         renderLabel={renderLabel}

src/components/ModularFactoryDrawer.tsx

@@ -0,0 +1,55 @@
+import { defineComponent, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useWindowSize } from '@vueuse/core'
+import { NDrawer, NDrawerContent } from 'naive-ui'
+
+import type { Id } from '@/types'
+
+import ModularFactoryDrawerContent from './ModularFactoryDrawerContent'
+
+export interface Exposed {
+  open: (id: Id) => void
+}
+
+export default defineComponent({
+  setup(props, { expose }) {
+    const { t } = useI18n()
+
+    const { height: windowHeight } = useWindowSize()
+
+    const show = ref(false)
+    const modularFactoryId = ref<Id>()
+
+    function open(id: Id) {
+      modularFactoryId.value = id
+      show.value = true
+    }
+
+    expose({
+      open,
+    } satisfies Exposed)
+
+    return () => (
+      <NDrawer
+        show={show.value}
+        onUpdateShow={(value) => {
+          show.value = value
+        }}
+        height={windowHeight.value - 64}
+        placement="bottom"
+      >
+        <NDrawerContent
+          title={t('factoryConfig')}
+          nativeScrollbar={false}
+          closable
+        >
+          {modularFactoryId.value && (
+            <ModularFactoryDrawerContent
+              modularFactoryId={modularFactoryId.value}
+            />
+          )}
+        </NDrawerContent>
+      </NDrawer>
+    )
+  },
+})