Merge pull request #24 from libondev/dev

fix: 修复自定义关卡可以设置数字的问题，修复内容可以覆盖到头部的问题

src/components/Input.vue

@@ -3,5 +3,5 @@ const modelValue = defineModel()
 </script>
 
 <template>
-  <input v-model="modelValue" type="text" class="inline-flex h-8 w-full shadow-sm rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:border-input/50" v-bind="$attrs">
+  <input v-model="modelValue" type="text" class="inline-flex h-8 w-full shadow-sm rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:border-input/50 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" v-bind="$attrs">
 </template>

src/components/NavHeader.vue

@@ -13,7 +13,7 @@ const { lang, setLanguage, $t } = inject(i18NInjectionKey)!
 </script>
 
 <template>
-  <header class="mb-4 px-4 sm:px-6 border-b dark:border-gray-700 flex items-center justify-between">
+  <header class="relation z-10 mb-4 px-3 sm:px-6 border-b dark:border-gray-700 bg-[hsl(var(--background))] flex items-center justify-between">
     <h1 class="text-lg font-medium">
       <RouterLink to="/">
         {{ $t('memory-block', 'Memory Block') }}

src/views/game/[level].vue

@@ -88,7 +88,7 @@ function onFinishedPreviewCountdown() {
   setGameStatus('playing')
 }
 
-async function startGame() {
+function startGame() {
   generateRandomTargetBlock()
   updateHighestScoreStatus(level)
 
@@ -298,7 +298,7 @@ onBeforeUnmount(() => {
         </template>
       </h2>
 
-      <div class="mx-auto my-6 font-mono flex flex-wrap items-center justify-center leading-none gap-4 max-w-96">
+      <div class="mx-auto my-4 font-mono flex flex-wrap items-center justify-center leading-none gap-4 max-w-96">
         <div class="flex items-center h-8 px-2 rounded-full border border-input bg-slate-100 dark:bg-slate-800 min-w-[75px]">
           <i class="i-solar-stop-bold text-lg mr-1 text-emerald-500" />
           <span class="flex-1 text-center">{{ checkedNumber }}/{{ targetBlocks.size }}</span>
@@ -335,7 +335,7 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
-      <div class="relative mb-6 text-5xl text-center">
+      <div class="relative mb-4 text-5xl text-center">
         <span class="z-10 font-mono font-medium">{{ formatScore(gameScore) }}</span>
 
         <span v-if="showScoreBadge" class="absolute -translate-x-2 text-xs rotate-45 inline-block font-bold px-2 rounded-full border-2 border-red-500 text-red-500">BEST</span>

src/views/settings/custom.vue

@@ -16,7 +16,7 @@ const customLevelConfig = ref((() => {
 })())
 
 function saveCustomLevelConfig() {
-  const illegalValue = Object.values(customLevelConfig.value).find(v => typeof v !== 'number' || v <= 0 || !Number.isInteger(v))
+  const illegalValue = Object.values<number>(customLevelConfig.value).find(v => typeof v !== 'number' || v <= 0 || !Number.isInteger(v))
 
   if (illegalValue) {
     useToastError($t('configuration-integer-gt', '配置只能为大于 1 的整数'))
@@ -58,24 +58,24 @@ function saveCustomLevelConfig() {
 
 <template>
   <div class="flex h-full py-16 items-center justify-center overflow-auto">
-    <form class="w-72" @submit.prevent="saveCustomLevelConfig">
+    <form class="w-72" @submit.prevent="saveCustomLevelConfig()">
       <h2 class="text-xl mb-2">
         {{ $t('custom-levels', '自定义关卡') }}
       </h2>
 
       <div class="mb-4">
         <span class="text-sm">{{ $t('number-of-grids', '网格数量') }}<i class="text-gray-500">（X * Y）</i></span>
-        <Input v-model.number="customLevelConfig.grid" maxlength="2" />
+        <Input v-model.number="customLevelConfig.grid" type="number" maxlength="2" />
       </div>
 
       <div class="mb-4">
         <span class="text-sm">{{ $t('minimum-blocks', '最小生成方块数') }}</span>
-        <Input v-model.number="customLevelConfig.min" maxlength="2" />
+        <Input v-model.number="customLevelConfig.min" type="number" maxlength="2" />
       </div>
 
       <div class="mb-4">
         <span class="text-sm">{{ $t('maximum-blocks', '最大生成方块数') }}</span>
-        <Input v-model.number="customLevelConfig.max" maxlength="2" />
+        <Input v-model.number="customLevelConfig.max" type="number" maxlength="2" />
       </div>
 
       <!-- <div class="mb-4">
@@ -85,12 +85,12 @@ function saveCustomLevelConfig() {
 
       <div class="mb-4">
         <span class="text-sm">{{ $t('hp', '生命值') }}</span>
-        <Input v-model.number="customLevelConfig.health" maxlength="15" />
+        <Input v-model.number="customLevelConfig.health" type="number" maxlength="15" />
       </div>
 
       <div class="mb-8">
         <span class="text-sm">{{ $t('memory-time', '每回合开始前的记忆时间') }}<i class="text-gray-500">（{{ $t('second', '秒') }}）</i></span>
-        <Input v-model.number="customLevelConfig.internal" maxlength="2" />
+        <Input v-model.number="customLevelConfig.internal" type="number" maxlength="2" />
       </div>
 
       <Button type="primary">