Merge dev branch: Complete UI optimization with Chinese design system

- Implement comprehensive Chinese-style component library
- Add unified typography system with semantic font classes
- Optimize all pages with responsive design and Chinese aesthetics
- Fix button styling and enhance user experience
- Add loading states, empty states, and toast notifications
- Complete 12 Palaces Details optimization
- Establish consistent color scheme and visual hierarchy

src/components/BaziAnalysisDisplay.tsx

@@ -395,7 +395,7 @@ const BaziAnalysisDisplay: React.FC<BaziAnalysisDisplayProps> = ({ birthDate })
           {/* 天干信息 */}
           <div className="bg-gradient-to-r from-red-50 to-yellow-50 rounded-lg p-3">
             <h4 className="font-bold text-red-700 mb-2">天干：{pillar.tiangan}</h4>
-            <div className="grid grid-cols-2 gap-2 text-sm">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
               <div className={`px-2 py-1 rounded border ${wuxingColors[pillar.tianganWuxing]}`}>
                 五行：{pillar.tianganWuxing}
               </div>
@@ -408,7 +408,7 @@ const BaziAnalysisDisplay: React.FC<BaziAnalysisDisplayProps> = ({ birthDate })
           {/* 地支信息 */}
           <div className="bg-gradient-to-r from-yellow-50 to-red-50 rounded-lg p-3">
             <h4 className="font-bold text-red-700 mb-2">地支：{pillar.dizhi}</h4>
-            <div className="grid grid-cols-2 gap-2 text-sm">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
               <div className={`px-2 py-1 rounded border ${wuxingColors[pillar.dizhiWuxing]}`}>
                 五行：{pillar.dizhiWuxing}
               </div>

src/components/CompleteBaziAnalysis.tsx

@@ -236,7 +236,7 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
     const total = Object.values(elements).reduce((sum: number, count: any) => sum + (typeof count === 'number' ? count : 0), 0) as number;
 
     return (
-      <div className="grid grid-cols-5 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 md:gap-4">
         {Object.entries(elements).map(([element, count]) => {
           const numCount = typeof count === 'number' ? count : 0;
           const percentage = total > 0 ? Math.round((numCount / total) * 100) : 0;

src/components/CompleteZiweiAnalysis.tsx

@@ -2,7 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';
 import { Calendar, Star, BookOpen, Sparkles, User, BarChart3, Zap, TrendingUp, Loader2, Clock, Target, Heart, DollarSign, Activity, Crown, Compass, Moon, Sun } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
+import { ChineseCard, ChineseCardContent, ChineseCardHeader, ChineseCardTitle } from './ui/ChineseCard';
+import { ChineseLoading } from './ui/ChineseLoading';
 import { localApi } from '../lib/localApi';
+import { cn } from '../lib/utils';
 
 interface CompleteZiweiAnalysisProps {
   birthDate: {
@@ -211,35 +214,35 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
     }
   };
 
-  // 星曜颜色配置
+  // 星曜颜色配置（中式配色）
   const starColors: { [key: string]: string } = {
-    '紫微': 'bg-purple-100 text-purple-800 border-purple-300',
+    '紫微': 'bg-red-100 text-red-800 border-red-300',
     '天机': 'bg-blue-100 text-blue-800 border-blue-300',
-    '太阳': 'bg-orange-100 text-orange-800 border-orange-300',
+    '太阳': 'bg-yellow-100 text-yellow-800 border-yellow-300',
     '武曲': 'bg-gray-100 text-gray-800 border-gray-300',
     '天同': 'bg-green-100 text-green-800 border-green-300',
     '廉贞': 'bg-red-100 text-red-800 border-red-300',
     '天府': 'bg-yellow-100 text-yellow-800 border-yellow-300',
-    '太阴': 'bg-indigo-100 text-indigo-800 border-indigo-300',
-    '贪狼': 'bg-pink-100 text-pink-800 border-pink-300',
-    '巨门': 'bg-slate-100 text-slate-800 border-slate-300',
-    '天相': 'bg-cyan-100 text-cyan-800 border-cyan-300',
-    '天梁': 'bg-emerald-100 text-emerald-800 border-emerald-300',
-    '七杀': 'bg-rose-100 text-rose-800 border-rose-300',
-    '破军': 'bg-amber-100 text-amber-800 border-amber-300'
+    '太阴': 'bg-blue-100 text-blue-800 border-blue-300',
+    '贪狼': 'bg-orange-100 text-orange-800 border-orange-300',
+    '巨门': 'bg-gray-100 text-gray-800 border-gray-300',
+    '天相': 'bg-green-100 text-green-800 border-green-300',
+    '天梁': 'bg-yellow-100 text-yellow-800 border-yellow-300',
+    '七杀': 'bg-red-100 text-red-800 border-red-300',
+    '破军': 'bg-orange-100 text-orange-800 border-orange-300'
   };
 
-  // 吉星煞星颜色配置
-  const luckyStarColors = 'bg-green-50 text-green-700 border-green-200';
+  // 吉星煞星颜色配置（中式配色）
+  const luckyStarColors = 'bg-yellow-50 text-yellow-700 border-yellow-200';
   const unluckyStarColors = 'bg-red-50 text-red-700 border-red-200';
 
-  // 宫位强度颜色
+  // 宫位强度颜色（中式配色）
   const strengthColors: { [key: string]: string } = {
-    '旺': 'text-green-600 bg-green-50',
-    '得地': 'text-blue-600 bg-blue-50',
-    '平': 'text-yellow-600 bg-yellow-50',
+    '旺': 'text-red-600 bg-red-50',
+    '得地': 'text-yellow-600 bg-yellow-50',
+    '平': 'text-gray-600 bg-gray-50',
     '不得地': 'text-orange-600 bg-orange-50',
-    '陷': 'text-red-600 bg-red-50'
+    '陷': 'text-gray-500 bg-gray-100'
   };
 
   // 五行局颜色
@@ -299,14 +302,19 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
   // 渲染加载状态
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 to-indigo-50">
-        <Card className="chinese-card-decoration border-2 border-purple-400 p-8">
-          <CardContent className="text-center">
-            <Loader2 className="h-12 w-12 animate-spin text-purple-600 mx-auto mb-4" />
-            <h3 className="text-xl font-bold text-purple-800 mb-2">正在进行专业紫微斗数分析</h3>
-            <p className="text-purple-600">请稍候，正在排盘并生成您的详细命理报告...</p>
-          </CardContent>
-        </Card>
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-yellow-50">
+        <ChineseCard variant="elevated" className="p-8">
+          <ChineseCardContent className="text-center">
+            <ChineseLoading
+              size="lg"
+              variant="chinese"
+              text="正在进行专业紫微斗数分析"
+              className="mb-4"
+            />
+            <h3 className="text-xl font-bold text-red-600 mb-2 font-chinese">排盘分析中</h3>
+            <p className="text-gray-600 font-chinese">请稍候，正在生成您的详细命理报告...</p>
+          </ChineseCardContent>
+        </ChineseCard>
       </div>
     );
   }
@@ -346,31 +354,63 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
     );
   }
 
-  // 渲染宫位卡片
+  // 渲染宫位卡片（中式设计）
   const renderPalaceCard = (palaceName: string, palace: any) => {
     if (!palace) return null;
 
+    // 宫位图标映射
+    const palaceIcons: { [key: string]: any } = {
+      '命宫': User,
+      '兄弟宫': Heart,
+      '夫妻宫': Heart,
+      '子女宫': Star,
+      '财帛宫': DollarSign,
+      '疾厄宫': Activity,
+      '迁移宫': Compass,
+      '交友宫': Heart,
+      '事业宫': Crown,
+      '田宅宫': Target,
+      '福德宫': Sun,
+      '父母宫': Moon
+    };
+
+    const PalaceIcon = palaceIcons[palaceName] || Star;
+
     return (
-      <Card key={palaceName} className="chinese-card-decoration hover:shadow-xl transition-all duration-300 border-2 border-purple-400 min-h-[280px] w-full">
-        <CardHeader className="text-center pb-2">
-          <CardTitle className="text-purple-800 text-lg font-bold chinese-text-shadow">
-            {palaceName}
-          </CardTitle>
-          <div className="flex justify-center items-center space-x-2">
-            <span className="text-purple-600 text-sm">{palace.position}</span>
-            <span className={`px-2 py-1 rounded text-xs font-medium ${strengthColors[palace.strength] || 'text-gray-600 bg-gray-50'}`}>
-              {palace.strength}
-            </span>
+      <ChineseCard key={palaceName} variant="bordered" className="hover:shadow-xl transition-all duration-300 min-h-[320px] w-full">
+        <ChineseCardHeader className="text-center pb-3">
+          <div className="flex flex-col items-center space-y-2">
+            <div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center shadow-lg">
+              <PalaceIcon className="h-5 w-5 text-white" />
+            </div>
+            <ChineseCardTitle className="text-red-600 text-heading-lg font-bold font-chinese">
+              {palaceName}
+            </ChineseCardTitle>
+            <div className="flex items-center space-x-2">
+              <span className="text-gray-600 text-body-md font-chinese">{palace.position || palace.branch}</span>
+              <span className={cn(
+                'px-2 py-1 rounded-full text-label-md font-medium font-chinese',
+                strengthColors[palace.strength] || 'text-gray-600 bg-gray-50'
+              )}>
+                {palace.strength}
+              </span>
+            </div>
           </div>
-        </CardHeader>
-        <CardContent className="space-y-3">
+        </ChineseCardHeader>
+        <ChineseCardContent className="space-y-3">
           {/* 主星 */}
           {palace.main_stars && palace.main_stars.length > 0 && (
             <div>
-              <h5 className="text-xs font-semibold text-purple-800 mb-2">主星</h5>
+              <h5 className="text-label-lg font-semibold text-red-800 mb-2 font-chinese flex items-center">
+                <Star className="h-4 w-4 mr-1" />
+                主星
+              </h5>
               <div className="flex flex-wrap gap-1">
                 {palace.main_stars.map((star: string, index: number) => (
-                  <span key={index} className={`px-2 py-1 rounded text-xs font-medium border ${starColors[star] || 'bg-gray-100 text-gray-800 border-gray-300'}`}>
+                  <span key={index} className={cn(
+                    'px-2 py-1 rounded-full text-label-md font-medium border font-chinese',
+                    starColors[star] || 'bg-gray-100 text-gray-800 border-gray-300'
+                  )}>
                     {star}
                   </span>
                 ))}
@@ -381,10 +421,16 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
           {/* 吉星 */}
           {palace.lucky_stars && palace.lucky_stars.length > 0 && (
             <div>
-              <h5 className="text-xs font-semibold text-green-800 mb-2">吉星</h5>
+              <h5 className="text-label-lg font-semibold text-yellow-800 mb-2 font-chinese flex items-center">
+                <Sparkles className="h-4 w-4 mr-1" />
+                吉星
+              </h5>
               <div className="flex flex-wrap gap-1">
                 {palace.lucky_stars.map((star: string, index: number) => (
-                  <span key={index} className={`px-2 py-1 rounded text-xs font-medium border ${luckyStarColors}`}>
+                  <span key={index} className={cn(
+                    'px-2 py-1 rounded-full text-label-md font-medium border font-chinese',
+                    luckyStarColors
+                  )}>
                     {star}
                   </span>
                 ))}
@@ -395,10 +441,16 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
           {/* 煞星 */}
           {palace.unlucky_stars && palace.unlucky_stars.length > 0 && (
             <div>
-              <h5 className="text-xs font-semibold text-red-800 mb-2">煞星</h5>
+              <h5 className="text-label-lg font-semibold text-red-800 mb-2 font-chinese flex items-center">
+                <Zap className="h-4 w-4 mr-1" />
+                煞星
+              </h5>
               <div className="flex flex-wrap gap-1">
                 {palace.unlucky_stars.map((star: string, index: number) => (
-                  <span key={index} className={`px-2 py-1 rounded text-xs font-medium border ${unluckyStarColors}`}>
+                  <span key={index} className={cn(
+                    'px-2 py-1 rounded-full text-label-md font-medium border font-chinese',
+                    unluckyStarColors
+                  )}>
                     {star}
                   </span>
                 ))}
@@ -408,12 +460,16 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
           
           {/* 宫位解读 */}
           {palace.interpretation && (
-            <div className="border-t pt-2">
-              <p className="text-xs text-gray-700 leading-relaxed">{palace.interpretation}</p>
+            <div className="border-t border-red-100 pt-3 mt-3">
+              <h5 className="text-label-lg font-semibold text-gray-800 mb-2 font-chinese flex items-center">
+                <BookOpen className="h-4 w-4 mr-1" />
+                宫位解读
+              </h5>
+              <p className="text-body-md text-gray-700 leading-relaxed font-chinese">{palace.interpretation}</p>
             </div>
           )}
-        </CardContent>
-      </Card>
+        </ChineseCardContent>
+      </ChineseCard>
     );
   };
 
@@ -601,22 +657,26 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
         )}
 
         {/* 十二宫位详解 */}
-        <Card className="chinese-card-decoration border-2 border-purple-400">
-          <CardHeader>
-            <CardTitle className="text-purple-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
-              <Compass className="h-6 w-6" />
-              <span>十二宫位详解</span>
-            </CardTitle>
-            <p className="text-purple-600 mt-2">紫微斗数将人生分为十二个宫位，每个宫位代表不同的人生领域</p>
-          </CardHeader>
-          <CardContent>
-            <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4">
+        <ChineseCard variant="elevated" className="bg-gradient-to-br from-red-50 to-yellow-50">
+          <ChineseCardHeader>
+            <div className="text-center">
+              <div className="w-12 h-12 bg-gradient-to-br from-red-600 to-red-700 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                <Compass className="h-6 w-6 text-white" />
+              </div>
+              <ChineseCardTitle className="text-red-600 text-2xl md:text-3xl font-bold font-chinese">
+                十二宫位详解
+              </ChineseCardTitle>
+              <p className="text-gray-600 mt-2 font-chinese">紫微斗数将人生分为十二个宫位，每个宫位代表不同的人生领域</p>
+            </div>
+          </ChineseCardHeader>
+          <ChineseCardContent>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
               {analysisData.ziwei_analysis?.twelve_palaces && Object.entries(analysisData.ziwei_analysis.twelve_palaces).map(([palaceName, palace]) => 
                 renderPalaceCard(palaceName, palace)
               )}
             </div>
-          </CardContent>
-        </Card>
+          </ChineseCardContent>
+        </ChineseCard>
 
         {/* 四化飞星 */}
         {analysisData.ziwei_analysis?.si_hua && (

src/components/Layout.tsx

@@ -1,9 +1,10 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
-import { Sparkles, User, History, LogOut, Home, Stars } from 'lucide-react';
-import { Button } from './ui/Button';
+import { Sparkles, User, History, LogOut, Home, Menu, X } from 'lucide-react';
+import { ChineseButton } from './ui/ChineseButton';
 import { toast } from 'sonner';
+import { cn } from '../lib/utils';
 
 interface LayoutProps {
   children: ReactNode;
@@ -12,11 +13,13 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const { user, signOut } = useAuth();
   const location = useLocation();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   const handleSignOut = async () => {
     try {
       await signOut();
       toast.success('登出成功');
+      setIsMobileMenuOpen(false);
     } catch (error) {
       toast.error('登出失败');
     }
@@ -24,32 +27,44 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
   const navigationItems = [
     { path: '/', label: '首页', icon: Home },
-    { path: '/analysis', label: '命理分析', icon: Sparkles, requireAuth: true },
-    { path: '/history', label: '历史记录', icon: History, requireAuth: true },
-    { path: '/profile', label: '个人档案', icon: User, requireAuth: true },
+    { path: '/analysis', label: '分析', icon: Sparkles, requireAuth: true },
+    { path: '/history', label: '历史', icon: History, requireAuth: true },
+    { path: '/profile', label: '档案', icon: User, requireAuth: true },
   ];
 
+  const toggleMobileMenu = () => {
+    console.log('Toggle mobile menu:', !isMobileMenuOpen);
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
   return (
     <div className="min-h-screen relative">
       {/* 导航栏 */}
-      <nav className="chinese-traditional-bg shadow-2xl border-b-4 border-yellow-400 relative overflow-hidden">
+      <nav className="bg-gradient-to-r from-red-600 to-red-700 shadow-xl border-b-2 border-yellow-500 relative overflow-hidden z-[9998]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="flex justify-between h-16">
+          <div className="flex justify-between items-center h-16">
+            {/* 品牌Logo */}
             <div className="flex items-center">
-              <Link to="/" className="flex items-center space-x-3 group">
-                {/* 品牌图标 */}
-                <div className="w-8 h-8 bg-gradient-to-br from-yellow-400 to-amber-600 rounded-full flex items-center justify-center shadow-lg border-2 border-red-300 group-hover:scale-110 transition-transform duration-300">
+              <Link to="/" className="flex items-center space-x-2 group" onClick={closeMobileMenu}>
+                <div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center shadow-lg border-2 border-yellow-600 group-hover:scale-110 transition-transform duration-300">
                   <img 
                     src="/traditional-chinese-bagua-eight-trigrams-black-gold.jpg" 
                     alt="神机阁"
-                    className="w-6 h-6 rounded-full object-cover"
+                    className="w-7 h-7 rounded-full object-cover"
                   />
                 </div>
-                <span className="text-2xl font-bold text-yellow-200 font-serif chinese-text-shadow group-hover:text-yellow-100 transition-colors duration-300">神机阁</span>
+                <span className="text-xl md:text-2xl font-bold text-white font-chinese group-hover:text-gold-100 transition-colors duration-300">
+                  神机阁
+                </span>
               </Link>
             </div>
             
-            <div className="flex items-center space-x-6">
+            {/* 桌面端导航 */}
+            <div className="hidden md:flex items-center space-x-4">
               {navigationItems.map((item) => {
                 if (item.requireAuth && !user) return null;
                 
@@ -60,38 +75,119 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                   <Link
                     key={item.path}
                     to={item.path}
-                    className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-300 border-2 font-serif ${
+                    className={cn(
+                      'flex items-center space-x-1.5 px-3 py-2 rounded-lg font-medium transition-all duration-300 text-sm',
+                      'border border-transparent hover:border-yellow-400',
                       isActive
-                        ? 'text-red-800 chinese-golden-glow border-red-600 shadow-lg transform scale-105'
-                        : 'text-yellow-200 hover:text-red-800 hover:chinese-golden-glow border-transparent hover:border-red-600 hover:shadow-lg hover:scale-105'
-                    }`}
+                        ? 'text-yellow-100 bg-white/10 border-yellow-400 shadow-lg'
+                        : 'text-white hover:text-yellow-100 hover:bg-white/10'
+                    )}
                   >
-                    <Icon className="h-5 w-5" />
-                    <span>{item.label}</span>
+                    <Icon className="h-4 w-4" />
+                    <span className="whitespace-nowrap">{item.label}</span>
                   </Link>
                 );
               })}
               
               {user ? (
-                <Button
+                <ChineseButton
                   onClick={handleSignOut}
                   variant="outline"
-                  className="flex items-center space-x-2 chinese-golden-glow text-red-800 border-2 border-red-600 hover:shadow-xl transition-all duration-300 font-serif"
+                  size="sm"
+                  className="text-white border-white hover:bg-white hover:text-red-600"
                 >
-                  <LogOut className="h-5 w-5" />
-                  <span>登出</span>
-                </Button>
+                  <LogOut className="h-4 w-4 mr-1" />
+                  <span className="hidden lg:inline">登出</span>
+                </ChineseButton>
               ) : (
-                <div className="flex items-center space-x-3">
+                <div className="flex items-center space-x-2">
                   <Link to="/login">
-                    <Button variant="outline" className="chinese-golden-glow text-red-800 border-2 border-red-600 hover:shadow-xl transition-all duration-300 font-serif">
+                    <ChineseButton variant="outline" size="sm" className="text-white border-white hover:bg-white hover:text-red-600">
                       登录
-                    </Button>
+                    </ChineseButton>
                   </Link>
                   <Link to="/register">
-                    <Button className="chinese-red-glow text-white border-2 border-yellow-400 hover:shadow-xl transition-all duration-300 font-serif">
+                    <ChineseButton variant="secondary" size="sm">
                       注册
-                    </Button>
+                    </ChineseButton>
+                  </Link>
+                </div>
+              )}
+            </div>
+            
+            {/* 移动端汉堡菜单按钮 */}
+            <div className="md:hidden">
+              <button
+                onClick={toggleMobileMenu}
+                className="p-2 rounded-lg text-white hover:bg-white/10 transition-colors duration-200"
+                aria-label="切换菜单"
+              >
+                {isMobileMenuOpen ? (
+                  <X className="h-6 w-6" />
+                ) : (
+                  <Menu className="h-6 w-6" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        {/* 移动端菜单面板 */}
+        <div className={cn(
+          'md:hidden fixed top-16 left-0 right-0 z-[9999]',
+          'bg-red-600/95 backdrop-blur-md border-t border-yellow-500/30',
+          'transform transition-all duration-300 ease-in-out',
+          isMobileMenuOpen
+            ? 'translate-y-0 opacity-100 visible'
+            : '-translate-y-2 opacity-0 invisible'
+        )}>
+          <div className="px-4 py-4 space-y-2">
+            {navigationItems.map((item) => {
+              if (item.requireAuth && !user) return null;
+              
+              const Icon = item.icon;
+              const isActive = location.pathname === item.path;
+              
+              return (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={closeMobileMenu}
+                  className={cn(
+                    'flex items-center space-x-3 px-4 py-3 rounded-lg font-medium transition-all duration-200',
+                    'border border-transparent',
+                    isActive
+                      ? 'text-yellow-100 bg-white/15 border-yellow-400/50'
+                      : 'text-white hover:text-yellow-100 hover:bg-white/10'
+                  )}
+                >
+                  <Icon className="h-5 w-5" />
+                  <span>{item.label}</span>
+                </Link>
+              );
+            })}
+            
+            <div className="pt-4 border-t border-white/20">
+              {user ? (
+                <ChineseButton
+                  onClick={handleSignOut}
+                  variant="outline"
+                  className="w-full text-white border-white hover:bg-white hover:text-red-600"
+                >
+                  <LogOut className="h-5 w-5 mr-2" />
+                  登出
+                </ChineseButton>
+              ) : (
+                <div className="space-y-2">
+                  <Link to="/login" onClick={closeMobileMenu} className="block">
+                    <ChineseButton variant="outline" className="w-full text-white border-white hover:bg-white hover:text-red-600">
+                      登录
+                    </ChineseButton>
+                  </Link>
+                  <Link to="/register" onClick={closeMobileMenu} className="block">
+                    <ChineseButton variant="secondary" className="w-full">
+                      注册
+                    </ChineseButton>
                   </Link>
                 </div>
               )}
@@ -101,16 +197,16 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       </nav>
       
       {/* 主内容区域 */}
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
-        {/* 主内容区装饰元素 */}
-        <div className="absolute top-0 left-0 w-24 h-24 opacity-10 pointer-events-none">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8 relative min-h-[calc(100vh-200px)]">
+        {/* 装饰元素 - 仅在桌面端显示 */}
+        <div className="hidden lg:block absolute top-0 left-0 w-20 h-20 opacity-10 pointer-events-none">
           <img 
             src="/chinese_traditional_golden_ornate_frame.png" 
             alt=""
             className="w-full h-full object-contain"
           />
         </div>
-        <div className="absolute bottom-0 right-0 w-24 h-24 opacity-10 pointer-events-none">
+        <div className="hidden lg:block absolute bottom-0 right-0 w-20 h-20 opacity-10 pointer-events-none">
           <img 
             src="/chinese_traditional_golden_ornate_frame.png" 
             alt=""
@@ -118,22 +214,36 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           />
         </div>
         
-        {children}
+        {/* 点击遮罩层关闭移动端菜单 */}
+        {isMobileMenuOpen && (
+          <div 
+            className="fixed inset-0 bg-black/20 z-[9997] md:hidden" 
+            onClick={closeMobileMenu}
+          />
+        )}
+        
+        <div className="relative z-10">
+          {children}
+        </div>
       </main>
       
-      {/* 页脚装饰 */}
-      <footer className="mt-16 py-8 border-t-2 border-yellow-400 mystical-gradient">
+      {/* 页脚 */}
+      <footer className="mt-auto py-6 md:py-8 border-t border-red-200 bg-gradient-to-br from-yellow-50 to-red-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center">
-            <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-br from-yellow-400 to-amber-600 rounded-full flex items-center justify-center shadow-lg border-2 border-red-600">
+            <div className="w-10 h-10 md:w-12 md:h-12 mx-auto mb-3 md:mb-4 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center shadow-lg border-2 border-red-500">
               <img 
                 src="/traditional_chinese_gold_red_dragon_symbol.jpg" 
                 alt="龙符"
-                className="w-8 h-8 rounded-full object-cover"
+                className="w-6 h-6 md:w-8 md:h-8 rounded-full object-cover"
               />
             </div>
-            <p className="text-red-700 font-medium font-serif">神机阁 - 传统智慧与现代科技的完美融合</p>
-            <p className="text-red-600 text-sm mt-2">© 2025 AI命理分析平台 - Created by MiniMax Agent</p>
+            <p className="text-red-600 font-medium font-chinese text-sm md:text-base">
+              神机阁 - 传统智慧与现代科技的完美融合
+            </p>
+            <p className="text-gray-500 text-xs md:text-sm mt-1 md:mt-2">
+              © 2025 AI命理分析平台
+            </p>
           </div>
         </div>
       </footer>

src/components/ui/ChineseButton.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+interface ChineseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+}
+
+const ChineseButton = React.forwardRef<HTMLButtonElement, ChineseButtonProps>(
+  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
+    const baseClasses = [
+      'inline-flex items-center justify-center',
+      'font-chinese font-medium',
+      'transition-all duration-200 ease-in-out',
+      'focus:outline-none focus:ring-2 focus:ring-offset-2',
+      'disabled:opacity-50 disabled:cursor-not-allowed',
+      'relative overflow-hidden',
+      'active:scale-95 hover-lift',
+    ];
+
+    const variantClasses = {
+      primary: [
+        'bg-gradient-to-r from-red-600 to-red-700 !text-white',
+        'border border-red-600',
+        'shadow-lg hover:shadow-xl',
+        'hover:scale-105 active:scale-95 hover:!text-white',
+        'focus:ring-red-500',
+        'relative overflow-hidden',
+        'before:absolute before:inset-0',
+        'before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent',
+        'before:translate-x-[-100%] hover:before:translate-x-[100%]',
+        'before:transition-transform before:duration-700',
+      ],
+      secondary: [
+        'bg-gradient-to-r from-yellow-400 to-yellow-500 text-gray-900',
+        'border border-yellow-500',
+        'shadow-lg hover:shadow-xl',
+        'hover:scale-105 active:scale-95',
+        'focus:ring-yellow-500',
+      ],
+      outline: [
+        'bg-transparent text-red-600',
+        'border-2 border-red-600',
+        'hover:bg-red-600 hover:text-white',
+        'focus:ring-red-500',
+      ],
+      ghost: [
+        'bg-transparent text-gray-700',
+        'hover:bg-gray-100 hover:text-red-600',
+        'focus:ring-gray-500',
+      ],
+    };
+
+    const sizeClasses = {
+      sm: [
+      'px-3 py-1.5 text-button-sm rounded-md',
+      'min-h-[36px]', // 移动端友好的最小高度
+    ],
+    md: [
+      'px-6 py-2.5 text-button-md rounded-lg',
+      'min-h-[44px]', // 移动端友好的最小高度
+    ],
+    lg: [
+      'px-8 py-3 text-button-lg rounded-xl',
+      'min-h-[52px]', // 移动端友好的最小高度
+    ],
+    };
+
+    // 移动端响应式调整
+    const responsiveClasses = [
+      'md:hover:scale-105', // 只在桌面端启用悬停缩放
+      'active:scale-95', // 所有设备都有点击反馈
+      'touch-manipulation', // 优化触摸体验
+    ];
+
+    return (
+      <button
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size],
+          responsiveClasses,
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+ChineseButton.displayName = 'ChineseButton';
+
+export { ChineseButton };
+export type { ChineseButtonProps };

src/components/ui/ChineseCard.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+interface ChineseCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'elevated' | 'bordered' | 'golden';
+  padding?: 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+}
+
+const ChineseCard = React.forwardRef<HTMLDivElement, ChineseCardProps>(
+  ({ className, variant = 'default', padding = 'md', children, ...props }, ref) => {
+    const baseClasses = [
+      'relative',
+      'transition-all duration-300 ease-in-out',
+      'font-chinese hover-lift animate-fade-in-up',
+    ];
+
+    const variantClasses = {
+      default: [
+        'bg-white/90 backdrop-blur-sm',
+        'border border-paper-300',
+        'rounded-lg',
+        'shadow-chinese-sm hover:shadow-chinese',
+      ],
+      elevated: [
+        'bg-white/95 backdrop-blur-md',
+        'border border-cinnabar-200',
+        'rounded-xl',
+        'shadow-chinese hover:shadow-chinese-md',
+        'hover:-translate-y-1',
+      ],
+      bordered: [
+        'bg-paper-50/80 backdrop-blur-sm',
+        'border-2 border-cinnabar-300',
+        'rounded-lg',
+        'shadow-paper',
+        // 传统边框装饰
+        'before:absolute before:inset-2',
+        'before:border before:border-gold-300/50',
+        'before:rounded-md before:pointer-events-none',
+      ],
+      golden: [
+        'bg-gold-gradient',
+        'border-2 border-gold-600',
+        'rounded-xl',
+        'shadow-gold hover:shadow-gold',
+        'text-ink-900',
+        // 金色光晕效果
+        'before:absolute before:inset-0',
+        'before:bg-gradient-to-br before:from-white/20 before:to-transparent',
+        'before:rounded-xl before:pointer-events-none',
+      ],
+    };
+
+    const paddingClasses = {
+      sm: 'p-4',
+      md: 'p-6',
+      lg: 'p-8',
+    };
+
+    // 移动端响应式调整
+    const responsiveClasses = [
+      // 移动端减少内边距
+      'max-md:p-4',
+      // 移动端优化圆角
+      'max-md:rounded-lg',
+    ];
+
+    return (
+      <div
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          paddingClasses[padding],
+          responsiveClasses,
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ChineseCard.displayName = 'ChineseCard';
+
+// 卡片标题组件
+interface ChineseCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const ChineseCardHeader = React.forwardRef<HTMLDivElement, ChineseCardHeaderProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          'flex flex-col space-y-1.5',
+          'pb-4 mb-4',
+          'border-b border-cinnabar-200',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ChineseCardHeader.displayName = 'ChineseCardHeader';
+
+// 卡片标题文字组件
+interface ChineseCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+}
+
+const ChineseCardTitle = React.forwardRef<HTMLParagraphElement, ChineseCardTitleProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <h3
+        className={cn(
+          'text-heading-md font-semibold leading-none tracking-tight',
+          'text-cinnabar-500',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </h3>
+    );
+  }
+);
+
+ChineseCardTitle.displayName = 'ChineseCardTitle';
+
+// 卡片描述组件
+interface ChineseCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  children: React.ReactNode;
+}
+
+const ChineseCardDescription = React.forwardRef<HTMLParagraphElement, ChineseCardDescriptionProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <p
+        className={cn(
+          'text-body-md text-ink-500',
+          'font-chinese',
+          'leading-relaxed',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+
+ChineseCardDescription.displayName = 'ChineseCardDescription';
+
+// 卡片内容组件
+interface ChineseCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const ChineseCardContent = React.forwardRef<HTMLDivElement, ChineseCardContentProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          'text-ink-900',
+          'leading-relaxed',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ChineseCardContent.displayName = 'ChineseCardContent';
+
+// 卡片底部组件
+interface ChineseCardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const ChineseCardFooter = React.forwardRef<HTMLDivElement, ChineseCardFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          'flex items-center',
+          'pt-4 mt-4',
+          'border-t border-paper-300',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ChineseCardFooter.displayName = 'ChineseCardFooter';
+
+export {
+  ChineseCard,
+  ChineseCardHeader,
+  ChineseCardTitle,
+  ChineseCardDescription,
+  ChineseCardContent,
+  ChineseCardFooter,
+};
+
+export type {
+  ChineseCardProps,
+  ChineseCardHeaderProps,
+  ChineseCardTitleProps,
+  ChineseCardDescriptionProps,
+  ChineseCardContentProps,
+  ChineseCardFooterProps,
+};

src/components/ui/ChineseEmpty.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { FileX, Search, Inbox, AlertCircle } from 'lucide-react';
+import { ChineseButton } from './ChineseButton';
+
+interface ChineseEmptyProps {
+  type?: 'default' | 'search' | 'data' | 'error';
+  title?: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  className?: string;
+}
+
+const ChineseEmpty: React.FC<ChineseEmptyProps> = ({
+  type = 'default',
+  title,
+  description,
+  action,
+  className
+}) => {
+  const iconMap = {
+    default: Inbox,
+    search: Search,
+    data: FileX,
+    error: AlertCircle
+  };
+
+  const defaultTitles = {
+    default: '暂无数据',
+    search: '未找到相关内容',
+    data: '暂无记录',
+    error: '加载失败'
+  };
+
+  const defaultDescriptions = {
+    default: '这里还没有任何内容',
+    search: '请尝试其他关键词或调整筛选条件',
+    data: '您还没有创建任何记录',
+    error: '数据加载出现问题，请稍后重试'
+  };
+
+  const colorMap = {
+    default: 'text-gray-400',
+    search: 'text-blue-400',
+    data: 'text-yellow-400',
+    error: 'text-red-400'
+  };
+
+  const Icon = iconMap[type];
+  const displayTitle = title || defaultTitles[type];
+  const displayDescription = description || defaultDescriptions[type];
+  const iconColor = colorMap[type];
+
+  return (
+    <div className={cn(
+      'flex flex-col items-center justify-center py-12 px-4 text-center',
+      className
+    )}>
+      {/* 图标 */}
+      <div className="mb-4">
+        <Icon className={cn('h-16 w-16', iconColor)} />
+      </div>
+      
+      {/* 标题 */}
+      <h3 className="text-lg font-semibold text-gray-900 mb-2 font-chinese">
+        {displayTitle}
+      </h3>
+      
+      {/* 描述 */}
+      <p className="text-gray-600 mb-6 max-w-sm font-chinese leading-relaxed">
+        {displayDescription}
+      </p>
+      
+      {/* 操作按钮 */}
+      {action && (
+        <ChineseButton
+          variant={type === 'error' ? 'primary' : 'secondary'}
+          onClick={action.onClick}
+        >
+          {action.label}
+        </ChineseButton>
+      )}
+    </div>
+  );
+};
+
+export { ChineseEmpty };
+export type { ChineseEmptyProps };

src/components/ui/ChineseInput.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+interface ChineseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  variant?: 'default' | 'bordered' | 'filled';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const ChineseInput = React.forwardRef<HTMLInputElement, ChineseInputProps>(
+  ({ className, label, error, helperText, variant = 'default', size = 'md', ...props }, ref) => {
+    const baseClasses = [
+      'w-full font-chinese transition-all duration-200 ease-in-out',
+      'focus:outline-none focus:ring-2 focus:ring-offset-1',
+      'disabled:opacity-50 disabled:cursor-not-allowed',
+      'placeholder:text-gray-400',
+    ];
+
+    const variantClasses = {
+      default: [
+        'bg-white border border-gray-300',
+        'hover:border-red-400 focus:border-red-500 focus:ring-red-500/20',
+        error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20' : '',
+      ],
+      bordered: [
+        'bg-transparent border-2 border-red-300',
+        'hover:border-red-500 focus:border-red-600 focus:ring-red-500/20',
+        error ? 'border-red-500 focus:border-red-600 focus:ring-red-500/20' : '',
+      ],
+      filled: [
+        'bg-red-50 border border-red-200',
+        'hover:bg-red-100 hover:border-red-300',
+        'focus:bg-white focus:border-red-500 focus:ring-red-500/20',
+        error ? 'bg-red-100 border-red-500 focus:border-red-500 focus:ring-red-500/20' : '',
+      ],
+    };
+
+    const sizeClasses = {
+      sm: [
+        'px-3 py-2 text-body-md rounded-md',
+        'min-h-[36px]', // 移动端友好
+      ],
+      md: [
+        'px-4 py-2.5 text-body-lg rounded-lg',
+        'min-h-[44px]', // 移动端友好
+      ],
+      lg: [
+        'px-5 py-3 text-body-xl rounded-xl',
+        'min-h-[52px]', // 移动端友好
+      ],
+    };
+
+    // 移动端响应式调整
+    const responsiveClasses = [
+      'touch-manipulation', // 优化触摸体验
+      'max-md:text-base', // 移动端字体调整
+    ];
+
+    return (
+      <div className="w-full">
+        {/* 标签 */}
+        {label && (
+          <label className="block text-label-lg font-medium text-gray-700 mb-2 font-chinese">
+            {label}
+            {props.required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+        )}
+        
+        {/* 输入框 */}
+        <div className="relative">
+          <input
+            className={cn(
+              baseClasses,
+              variantClasses[variant],
+              sizeClasses[size],
+              responsiveClasses,
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+          
+          {/* 错误状态图标 */}
+          {error && (
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+            </div>
+          )}
+        </div>
+        
+        {/* 错误信息或帮助文本 */}
+        {(error || helperText) && (
+          <div className="mt-1.5">
+            {error ? (
+              <p className="text-body-sm text-red-600 font-chinese">{error}</p>
+            ) : (
+              helperText && (
+                <p className="text-body-sm text-gray-500 font-chinese">{helperText}</p>
+              )
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+ChineseInput.displayName = 'ChineseInput';
+
+export { ChineseInput };
+export type { ChineseInputProps };

src/components/ui/ChineseLoading.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { Loader2, Sparkles } from 'lucide-react';
+
+interface ChineseLoadingProps {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'spinner' | 'dots' | 'chinese';
+  text?: string;
+  className?: string;
+}
+
+const ChineseLoading: React.FC<ChineseLoadingProps> = ({
+  size = 'md',
+  variant = 'chinese',
+  text,
+  className
+}) => {
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12'
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg'
+  };
+
+  const renderSpinner = () => (
+    <Loader2 className={cn(
+      'animate-spin text-red-600',
+      sizeClasses[size]
+    )} />
+  );
+
+  const renderDots = () => (
+    <div className="flex space-x-1">
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          className={cn(
+            'bg-red-600 rounded-full animate-pulse',
+            size === 'sm' ? 'h-2 w-2' : size === 'md' ? 'h-3 w-3' : 'h-4 w-4'
+          )}
+          style={{
+            animationDelay: `${i * 0.2}s`,
+            animationDuration: '1s'
+          }}
+        />
+      ))}
+    </div>
+  );
+
+  const renderChinese = () => (
+    <div className="relative">
+      <div className={cn(
+        'border-4 border-red-200 border-t-red-600 rounded-full animate-spin',
+        sizeClasses[size]
+      )} />
+      <Sparkles className={cn(
+        'absolute inset-0 m-auto text-yellow-500 animate-pulse',
+        size === 'sm' ? 'h-2 w-2' : size === 'md' ? 'h-4 w-4' : 'h-6 w-6'
+      )} />
+    </div>
+  );
+
+  const renderVariant = () => {
+    switch (variant) {
+      case 'spinner':
+        return renderSpinner();
+      case 'dots':
+        return renderDots();
+      case 'chinese':
+      default:
+        return renderChinese();
+    }
+  };
+
+  return (
+    <div className={cn(
+      'flex flex-col items-center justify-center space-y-3',
+      className
+    )}>
+      {renderVariant()}
+      {text && (
+        <p className={cn(
+          'text-gray-600 font-chinese',
+          textSizeClasses[size]
+        )}>
+          {text}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export { ChineseLoading };
+export type { ChineseLoadingProps };

src/components/ui/ChineseSelect.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { ChevronDown } from 'lucide-react';
+
+interface ChineseSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface ChineseSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  variant?: 'default' | 'bordered' | 'filled';
+  size?: 'sm' | 'md' | 'lg';
+  options: ChineseSelectOption[];
+  placeholder?: string;
+}
+
+const ChineseSelect = React.forwardRef<HTMLSelectElement, ChineseSelectProps>(
+  ({ className, label, error, helperText, variant = 'default', size = 'md', options, placeholder, ...props }, ref) => {
+    const baseClasses = [
+      'w-full font-chinese transition-all duration-200 ease-in-out',
+      'focus:outline-none focus:ring-2 focus:ring-offset-1',
+      'disabled:opacity-50 disabled:cursor-not-allowed',
+      'appearance-none cursor-pointer',
+      'bg-no-repeat bg-right',
+    ];
+
+    const variantClasses = {
+      default: [
+        'bg-white border border-gray-300',
+        'hover:border-red-400 focus:border-red-500 focus:ring-red-500/20',
+        error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20' : '',
+      ],
+      bordered: [
+        'bg-transparent border-2 border-red-300',
+        'hover:border-red-500 focus:border-red-600 focus:ring-red-500/20',
+        error ? 'border-red-500 focus:border-red-600 focus:ring-red-500/20' : '',
+      ],
+      filled: [
+        'bg-red-50 border border-red-200',
+        'hover:bg-red-100 hover:border-red-300',
+        'focus:bg-white focus:border-red-500 focus:ring-red-500/20',
+        error ? 'bg-red-100 border-red-500 focus:border-red-500 focus:ring-red-500/20' : '',
+      ],
+    };
+
+    const sizeClasses = {
+      sm: [
+        'px-3 py-2 pr-8 text-sm rounded-md',
+        'min-h-[36px]', // 移动端友好
+      ],
+      md: [
+        'px-4 py-2.5 pr-10 text-base rounded-lg',
+        'min-h-[44px]', // 移动端友好
+      ],
+      lg: [
+        'px-5 py-3 pr-12 text-lg rounded-xl',
+        'min-h-[52px]', // 移动端友好
+      ],
+    };
+
+    // 移动端响应式调整
+    const responsiveClasses = [
+      'touch-manipulation', // 优化触摸体验
+      'max-md:text-base', // 移动端字体调整
+    ];
+
+    return (
+      <div className="w-full">
+        {/* 标签 */}
+        {label && (
+          <label className="block text-sm font-medium text-gray-700 mb-2 font-chinese">
+            {label}
+            {props.required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+        )}
+        
+        {/* 选择器容器 */}
+        <div className="relative">
+          <select
+            className={cn(
+              baseClasses,
+              variantClasses[variant],
+              sizeClasses[size],
+              responsiveClasses,
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {/* 占位符选项 */}
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            
+            {/* 选项列表 */}
+            {options.map((option) => (
+              <option
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+                className="font-chinese"
+              >
+                {option.label}
+              </option>
+            ))}
+          </select>
+          
+          {/* 下拉箭头 */}
+          <div className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
+            <div className={cn(
+              'pr-2',
+              size === 'sm' ? 'pr-2' : size === 'md' ? 'pr-3' : 'pr-4'
+            )}>
+              <ChevronDown className={cn(
+                'text-gray-400',
+                size === 'sm' ? 'h-4 w-4' : size === 'md' ? 'h-5 w-5' : 'h-6 w-6'
+              )} />
+            </div>
+          </div>
+          
+          {/* 错误状态图标 */}
+          {error && (
+            <div className={cn(
+              'absolute inset-y-0 right-0 flex items-center pointer-events-none',
+              size === 'sm' ? 'pr-7' : size === 'md' ? 'pr-9' : 'pr-11'
+            )}>
+              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+            </div>
+          )}
+        </div>
+        
+        {/* 错误信息或帮助文本 */}
+        {(error || helperText) && (
+          <div className="mt-1.5">
+            {error ? (
+              <p className="text-sm text-red-600 font-chinese">{error}</p>
+            ) : (
+              helperText && (
+                <p className="text-sm text-gray-500 font-chinese">{helperText}</p>
+              )
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+ChineseSelect.displayName = 'ChineseSelect';
+
+export { ChineseSelect };
+export type { ChineseSelectProps, ChineseSelectOption };

src/components/ui/ChineseToast.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-react';
+
+interface ChineseToastProps {
+  type?: 'success' | 'error' | 'warning' | 'info';
+  title?: string;
+  message: string;
+  onClose?: () => void;
+  className?: string;
+}
+
+const ChineseToast: React.FC<ChineseToastProps> = ({
+  type = 'info',
+  title,
+  message,
+  onClose,
+  className
+}) => {
+  const iconMap = {
+    success: CheckCircle,
+    error: XCircle,
+    warning: AlertCircle,
+    info: Info
+  };
+
+  const colorMap = {
+    success: {
+      bg: 'bg-green-50',
+      border: 'border-green-200',
+      icon: 'text-green-600',
+      title: 'text-green-800',
+      message: 'text-green-700'
+    },
+    error: {
+      bg: 'bg-red-50',
+      border: 'border-red-200',
+      icon: 'text-red-600',
+      title: 'text-red-800',
+      message: 'text-red-700'
+    },
+    warning: {
+      bg: 'bg-yellow-50',
+      border: 'border-yellow-200',
+      icon: 'text-yellow-600',
+      title: 'text-yellow-800',
+      message: 'text-yellow-700'
+    },
+    info: {
+      bg: 'bg-blue-50',
+      border: 'border-blue-200',
+      icon: 'text-blue-600',
+      title: 'text-blue-800',
+      message: 'text-blue-700'
+    }
+  };
+
+  const Icon = iconMap[type];
+  const colors = colorMap[type];
+
+  return (
+    <div className={cn(
+      'flex items-start p-4 rounded-lg border shadow-lg',
+      'animate-in slide-in-from-top-2 duration-300',
+      colors.bg,
+      colors.border,
+      className
+    )}>
+      {/* 图标 */}
+      <div className="flex-shrink-0">
+        <Icon className={cn('h-5 w-5', colors.icon)} />
+      </div>
+      
+      {/* 内容 */}
+      <div className="ml-3 flex-1">
+        {title && (
+          <h4 className={cn(
+            'text-sm font-semibold font-chinese mb-1',
+            colors.title
+          )}>
+            {title}
+          </h4>
+        )}
+        <p className={cn(
+          'text-sm font-chinese leading-relaxed',
+          colors.message
+        )}>
+          {message}
+        </p>
+      </div>
+      
+      {/* 关闭按钮 */}
+      {onClose && (
+        <button
+          onClick={onClose}
+          className={cn(
+            'flex-shrink-0 ml-4 p-1 rounded-md hover:bg-white/50 transition-colors',
+            colors.icon
+          )}
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export { ChineseToast };
+export type { ChineseToastProps };