feat(ui): enhance homepage with dynamic background images and improved locale selection

app/layouts/default.vue

@@ -4,10 +4,21 @@
       <template #title> Tootaio Studio </template>
       <template #right>
         <UColorModeButton />
-        <ULocaleSelect
-          :model-value="locale"
-          :locales="[en, zh_cn]"
-          @update:model-value="(v) => setLocale(v as 'en' | 'zh-CN')"
+        <UButton
+          icon="twemoji:flag-china"
+          :variant="$i18n.locale == 'zh-CN' ? 'outline' : 'ghost'"
+          class="cursor-pointer"
+          color="neutral"
+          :disabled="$i18n.locale == 'zh-CN'"
+          @click="setLocale('zh-CN')"
+        />
+        <UButton
+          icon="twemoji:flag-united-states"
+          :variant="$i18n.locale == 'en' ? 'outline' : 'ghost'"
+          class="cursor-pointer"
+          color="neutral"
+          :disabled="$i18n.locale == 'en'"
+          @click="setLocale('en')"
         />
       </template>
     </UHeader>
@@ -24,8 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { en, zh_cn } from "@nuxt/ui/locale";
-const { locale, setLocale } = useI18n();
+const { setLocale } = useI18n();
 </script>
 
 <style></style>