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>

app/pages/index.vue

@@ -4,6 +4,12 @@
     <UPageHero
       title="Tootaio Studio"
       :description="$t('index.heroDescription')"
+      :ui="{
+        root: 'relative before:absolute before:inset-0 before:bg-[image:var(--bg-image)] before:bg-cover before:bg-center before:-z-10 before:opacity-40',
+      }"
+      :style="{
+        '--bg-image': `url('${currentBgImage}')`,
+      }"
     />
 
     <UPageSection
@@ -75,6 +81,32 @@ useSeoMeta({
 
 const colorMode = useColorMode();
 
+const backgroundImages = [
+  "http://img.tootaio.com/i/2025/11/05/avc5ld.png",
+  "http://img.tootaio.com/i/2025/11/05/avcaff.png",
+  "http://img.tootaio.com/i/2025/11/05/avcjbw.png",
+  "http://img.tootaio.com/i/2025/11/05/avcp16.png",
+  "http://img.tootaio.com/i/2025/11/05/avcv1q.png",
+  "http://img.tootaio.com/i/2025/11/05/avd47a.png",
+  "http://img.tootaio.com/i/2025/11/05/avdx6a.png",
+  "http://img.tootaio.com/i/2025/11/05/avegxy.png",
+  "http://img.tootaio.com/i/2025/11/05/avemgn.png",
+  "http://img.tootaio.com/i/2025/11/05/avf3wl.png",
+];
+
+const currentBgImage = ref("");
+
+// 随机选择背景
+const randomBg = () => {
+  const randomIndex = Math.floor(Math.random() * backgroundImages.length);
+  currentBgImage.value = backgroundImages[randomIndex];
+};
+
+// 轮播背景
+onMounted(() => {
+  randomBg();
+});
+
 const capabilitiesFeatures = computed<PageFeatureProps[]>(() => [
   {
     title: $t("index.capabilities.features[0].title"),
@@ -113,14 +145,14 @@ const featuredProjects = ref([
     title: "永中校友会官方网站",
     description:
       "永平中学校友会官方网站的设计与开发项目，整体价值 RM28,000，由本工作室创办人无偿捐赠予校友会永久使用。",
-    image: "/images/project-showcases/yphs-alumni-website.png",
+    image: "http://img.tootaio.com/i/2025/11/05/d9kurl.png",
     demoLink: "https://yphsalumni.org",
   },
   {
     title: "留华生来华资料汇总",
     description:
       "2022 年疫情期间，为马来西亚留学生开发的返校攻略网站。帮助 5000+ 名留学生顺利返校。并获得马来西亚外交部推荐。",
-    image: "/images/project-showcases/malaysia-student-return.png",
+    image: "http://img.tootaio.com/i/2025/11/05/d9kcma.png",
     demoLink: "https://tootaio.github.io",
   },
   {