refactor(i18n): restructure translation system with nested objects and proxy

feat(data): add projects and services data structure for dynamic rendering
refactor(pages): replace hardcoded content with dynamic data-driven components

src/i18n/ui.ts

@@ -6,53 +6,119 @@ export const languages = {
 
 export const defaultLang = 'en';
 
-export const ui = {
+// 定义嵌套结构的国际化数据
+const structuredUi = {
   en: {
-    'nav.home': 'Home',
-    'nav.about': 'About',
-    'nav.services': 'Services',
-    'nav.projects': 'Projects',
-    'nav.blog': 'Blog',
-    'nav.contact': 'Contact',
-    'site.title': 'Joy Zhao - Full Stack Developer',
-    'site.description': 'Full Stack Developer specializing in React, Node.js, and modern web technologies',
-    'hero.githubLink': 'GitHub Profile',
-    'hero.linkedinLink': 'LinkedIn Profile',
-    'footer.rights': 'All rights reserved',
-    'project.tag.business': 'Business Project',
-    'project.tag.opensource': 'Open Source',
-    'project.tag.personal': 'Personal Product',
-    'project.tag.portfolio': 'Portfolio',
-    'project.tag.ecommerce': 'E-Commerce',
-    'project.visit': 'Visit',
-    'project.demo': 'Live Demo',
-    'projects.title': 'My Projects',
-    'projects.description': 'A collection of my recent work, showcasing innovative solutions and clean code. Explore the details of each project below.'
+    nav: {
+      home: 'Home',
+      about: 'About',
+      services: 'Services',
+      projects: 'Projects',
+      blog: 'Blog',
+      contact: 'Contact',
+    },
+    site: {
+      title: 'Joy Zhao - Full Stack Developer',
+      description: 'Full Stack Developer specializing in React, Node.js, and modern web technologies',
+    },
+    hero: {
+      githubLink: 'GitHub Profile',
+      linkedinLink: 'LinkedIn Profile',
+    },
+    footer: {
+      rights: 'All rights reserved',
+    },
+    project: {
+      tag: {
+        business: 'Business Project',
+        opensource: 'Open Source',
+        personal: 'Personal Product',
+        portfolio: 'Portfolio',
+        ecommerce: 'E-Commerce',
+      },
+      visit: 'Visit',
+      demo: 'Live Demo',
+    },
+    projects: {
+      title: 'My Projects',
+      description: 'A collection of my recent work, showcasing innovative solutions and clean code. Explore the details of each project below.',
+    },
     // Projects and services content has been inlined into respective page files
     // to reduce reliance on the translation system and improve maintainability
   },
   zh: {
-    'nav.home': '首页',
-    'nav.about': '关于',
-    'nav.services': '服务',
-    'nav.projects': '项目',
-    'nav.blog': '博客',
-    'nav.contact': '联系',
-    'site.title': 'Joy Zhao - 全栈开发者',
-    'site.description': '专注于 React、Node.js 和现代 Web 技术的全栈开发者',
-    'hero.githubLink': 'GitHub 主页',
-    'hero.linkedinLink': 'LinkedIn 主页',
-    'footer.rights': '版权所有',
-    'project.tag.business': '商业项目',
-    'project.tag.opensource': '开源项目',
-    'project.tag.personal': '个人产品',
-    'project.tag.portfolio': '作品集',
-    'project.tag.ecommerce': '电子商务',
-    'project.visit': '访问',
-    'project.demo': '在线演示',
-    'projects.title': '我的项目',
-    'projects.description': '这里展示了我最近的作品集，展现了创新解决方案和整洁的代码。请浏览下方了解每个项目的详细信息。'
+    nav: {
+      home: '首页',
+      about: '关于',
+      services: '服务',
+      projects: '项目',
+      blog: '博客',
+      contact: '联系',
+    },
+    site: {
+      title: 'Joy Zhao - 全栈开发者',
+      description: '专注于 React、Node.js 和现代 Web 技术的全栈开发者',
+    },
+    hero: {
+      githubLink: 'GitHub 主页',
+      linkedinLink: 'LinkedIn 主页',
+    },
+    footer: {
+      rights: '版权所有',
+    },
+    project: {
+      tag: {
+        business: '商业项目',
+        opensource: '开源项目',
+        personal: '个人产品',
+        portfolio: '作品集',
+        ecommerce: '电子商务',
+      },
+      visit: '访问',
+      demo: '在线演示',
+    },
+    projects: {
+      title: '我的项目',
+      description: '这里展示了我最近的作品集，展现了创新解决方案和整洁的代码。请浏览下方了解每个项目的详细信息。',
+    },
     // Projects and services content has been inlined into respective page files
     // to reduce reliance on the translation system and improve maintainability
-  }
-} as const;
+  },
+} as const;
+
+// 创建代理对象，保持与现有代码的兼容性
+function createCompatibleUi() {
+  // 为每种语言创建代理
+  const compatibleUi: Record<string, any> = {};
+  
+  Object.keys(structuredUi).forEach(lang => {
+    compatibleUi[lang] = new Proxy({}, {
+      get(target, prop) {
+        if (typeof prop !== 'string') return undefined;
+        
+        // 处理点符号键 (如 'nav.home')
+        const parts = prop.split('.');
+        let value: any = structuredUi[lang as keyof typeof structuredUi];
+        
+        // 遍历嵌套结构
+        for (const part of parts) {
+          if (value && typeof value === 'object' && part in value) {
+            value = value[part as keyof typeof value];
+          } else {
+            return undefined; // 键不存在
+          }
+        }
+        
+        return value;
+      }
+    });
+  });
+  
+  return compatibleUi;
+}
+
+// 导出兼容的UI对象
+export const ui = createCompatibleUi() as typeof structuredUi;
+
+// 导出结构化的UI对象，供将来使用
+export const structuredUI = structuredUi;