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
+        <UButton
-          :model-value="locale"
+          icon="twemoji:flag-china"
-          :locales="[en, zh_cn]"
+          :variant="$i18n.locale == 'zh-CN' ? 'outline' : 'ghost'"
-          @update:model-value="(v) => setLocale(v as 'en' | 'zh-CN')"
+          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 { setLocale } = useI18n();
-const { locale, 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",
   },
   {

i18n/locales/zh-CN/index.json

@@ -43,27 +43,27 @@
       "subtitle": "我们不仅编写代码——我们打造数字体验。",
       "features": [
         {
-          "title": "Fully Custom-Built",
+          "title": "完全定制开发",
           "description": "我们从不使用模板。每一个网站、系统、游戏都从零设计与开发，确保风格、性能与体验完全符合品牌个性。"
         },
         {
-          "title": "Tech-Driven, Not Just Design",
+          "title": "技术驱动，而非仅仅是设计",
           "description": "作为开发导向的团队，我们理解底层逻辑。从架构、性能、安全到交互动画，所有细节都由工程师主导优化。"
         },
         {
-          "title": "Cross-Domain Expertise",
+          "title": "跨领域专长",
           "description": "我们横跨网站、游戏、工具与交互内容开发，让每个项目都能获得更广阔的技术整合思路。"
         },
         {
-          "title": "End-to-End Service",
+          "title": "端到端一站式服务",
           "description": "从概念、原型、前端到部署与长期维护，我们全程负责，让客户专注业务，而非技术问题。"
         },
         {
-          "title": "Proven Project Value",
+          "title": "经验证的项目价值",
           "description": "我们曾为教育机构、品牌活动、独立游戏等开发高价值系统，实力可见。"
         },
         {
-          "title": "Future-Oriented",
+          "title": "面向未来",
           "description": "我们在研发自己的产品与工具，不止接案，也在打造未来生态。这代表我们具备持续创新与自我进化的能力。"
         }
       ]

nuxt.config.ts

@@ -45,6 +45,7 @@ export default defineNuxtConfig({
         files: ["zh-CN/index.json"],
       },
     ],
+    strategy: "no_prefix"
   },
   seo: {
     meta: {