这是标准正文内容
+ + + +``` + +### 2. React 组件中使用 +```jsx +// 推荐：使用语义化类名 +专业的命理分析服务
+ + + +2024 + + +正文
+ + +正文
+``` + +## 🔍 常见问题 + +### Q: 什么时候使用 display 系列？ +A: 仅用于首页主标题和重要页面的超大标题，不要在普通内容中使用。 + +### Q: 如何选择合适的字体大小？ +A: 根据内容的重要性和层次选择： +- 页面标题 → heading 系列 +- 正文内容 → body 系列 +- 表单标签 → label 系列 +- 按钮文字 → button 系列 + +### Q: 移动端需要特殊处理吗？ +A: 不需要，所有字体规范都内置了响应式适配。 + +### Q: 可以自定义字体大小吗？ +A: 不推荐。如果确实需要，请先考虑是否可以使用现有规范，或者提出新的规范需求。 + +## 📊 字体规范对照表 + +| 类名 | 桌面端 | 移动端 | 行高 | 字重 | 用途 | +|------|--------|--------|------|------|------| +| `text-display-xl` | 56px | 40px | 1.1 | 800 | 首页主标题 | +| `text-display-lg` | 48px | 36px | 1.1 | 700 | 重要页面标题 | +| `text-display-md` | 40px | 32px | 1.2 | 700 | 次要页面标题 | +| `text-heading-xl` | 32px | 28px | 1.25 | 600 | H1 标题 | +| `text-heading-lg` | 28px | 24px | 1.3 | 600 | H2 标题 | +| `text-heading-md` | 24px | 20px | 1.35 | 600 | H3 标题 | +| `text-heading-sm` | 20px | 18px | 1.4 | 600 | H4 标题 | +| `text-heading-xs` | 18px | 16px | 1.4 | 600 | H5 标题 | +| `text-body-xl` | 18px | 16px | 1.6 | 400 | 重要描述 | +| `text-body-lg` | 16px | 16px | 1.6 | 400 | 标准正文 | +| `text-body-md` | 14px | 14px | 1.6 | 400 | 次要正文 | +| `text-body-sm` | 12px | 12px | 1.5 | 400 | 辅助信息 | +| `text-label-lg` | 14px | 14px | 1.4 | 500 | 表单标签 | +| `text-label-md` | 12px | 12px | 1.4 | 500 | 小标签 | +| `text-label-sm` | 11px | 11px | 1.4 | 500 | 微小标签 | +| `text-button-lg` | 16px | 16px | 1.4 | 600 | 大按钮 | +| `text-button-md` | 14px | 14px | 1.4 | 600 | 标准按钮 | +| `text-button-sm` | 12px | 12px | 1.4 | 600 | 小按钮 | + +--- + +**更新日期**: 2024年12月 +**版本**: 1.0.0 +**维护者**: 神机阁开发团队 \ No newline at end of file diff --git a/UI_OPTIMIZATION_PLAN.md b/UI_OPTIMIZATION_PLAN.md new file mode 100644 index 0000000..10e5b67 --- /dev/null +++ b/UI_OPTIMIZATION_PLAN.md @@ -0,0 +1,208 @@ +# 神机阁 UI 优化计划 + +## 🎯 优化目标 + +- 解决移动端顶部字体溢出问题 +- 建立统一的中式风格设计系统 +- 实现完美的桌面端与移动端自适应 +- 创造优雅古典的用户体验 +- 优化色彩搭配和视觉层次 + +## 📋 当前问题分析 + +### 1. 移动端问题 +- 顶部导航字体溢出 +- 布局在小屏幕上不合理 +- 触摸交互体验不佳 + +### 2. 整体设计问题 +- 字体大小不统一 +- 缺乏视觉层次 +- 色彩搭配不和谐 +- 缺乏中式设计元素的统一性 + +## 🎨 设计系统规划 + +### 1. 色彩系统 (中式古典配色) + +#### 主色调 +- **朱砂红**: `#DC143C` - 主要强调色，用于重要按钮和标题 +- **金黄色**: `#FFD700` - 辅助色，用于装饰和高亮 +- **墨黑色**: `#2C2C2C` - 主要文字色 +- **古纸色**: `#F5F5DC` - 背景色 +- **青灰色**: `#708090` - 次要文字色 + +#### 渐变背景 +- **主背景**: 从古纸色到淡金色的渐变 +- **卡片背景**: 半透明白色覆盖 +- **按钮渐变**: 朱砂红到深红的渐变 + +### 2. 字体系统 + +#### 字体族 +```css +/* 中文优先字体栈 */ +font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'STHeiti', 'WenQuanYi Micro Hei', sans-serif; +``` + +#### 字体大小规范 +- **标题 H1**: 2.5rem (40px) / 移动端 2rem (32px) +- **标题 H2**: 2rem (32px) / 移动端 1.75rem (28px) +- **标题 H3**: 1.5rem (24px) / 移动端 1.25rem (20px) +- **正文**: 1rem (16px) / 移动端 0.875rem (14px) +- **小字**: 0.875rem (14px) / 移动端 0.75rem (12px) + +#### 行高规范 +- **标题**: 1.2 +- **正文**: 1.6 +- **按钮文字**: 1.4 + +### 3. 间距系统 + +#### 基础间距单位 (基于 4px) +- **xs**: 0.25rem (4px) +- **sm**: 0.5rem (8px) +- **md**: 1rem (16px) +- **lg**: 1.5rem (24px) +- **xl**: 2rem (32px) +- **2xl**: 3rem (48px) + +### 4. 组件设计规范 + +#### 按钮设计 +- **主按钮**: 朱砂红背景，金色边框，白色文字 +- **次按钮**: 透明背景，朱砂红边框，朱砂红文字 +- **圆角**: 8px +- **高度**: 44px (移动端友好) +- **内边距**: 16px 24px + +#### 卡片设计 +- **背景**: 半透明白色 rgba(255,255,255,0.9) +- **边框**: 1px solid rgba(220,20,60,0.2) +- **圆角**: 12px +- **阴影**: 0 4px 20px rgba(0,0,0,0.1) +- **内边距**: 24px + +#### 输入框设计 +- **背景**: 白色 +- **边框**: 1px solid #E5E5E5 +- **聚焦边框**: 2px solid #DC143C +- **圆角**: 6px +- **高度**: 44px +- **内边距**: 12px 16px + +## 📱 响应式设计策略 + +### 1. 断点设置 +```css +/* 移动端 */ +@media (max-width: 768px) { ... } + +/* 平板端 */ +@media (min-width: 769px) and (max-width: 1024px) { ... } + +/* 桌面端 */ +@media (min-width: 1025px) { ... } +``` + +### 2. 移动端优化 +- **导航栏**: 汉堡菜单，避免文字溢出 +- **字体缩放**: 移动端字体适当缩小 +- **触摸目标**: 最小 44px × 44px +- **间距调整**: 移动端间距适当减小 + +### 3. 布局策略 +- **桌面端**: 多列布局，侧边栏导航 +- **移动端**: 单列布局，底部导航 +- **弹性布局**: 使用 Flexbox 和 Grid + +## 🎭 中式设计元素 + +### 1. 装饰元素 +- **云纹图案**: 作为背景装饰 +- **回纹边框**: 用于卡片和分割线 +- **印章样式**: 用于重要标识 +- **书法笔触**: 用于标题装饰 + +### 2. 图标设计 +- **八卦图标**: 用于导航和功能区分 +- **中式符号**: 太极、阴阳、五行元素 +- **传统色彩**: 朱砂、金黄、墨色 + +### 3. 动画效果 +- **淡入淡出**: 页面切换动画 +- **缓动函数**: cubic-bezier(0.4, 0, 0.2, 1) +- **悬停效果**: 轻微的缩放和阴影变化 + +## 🔧 技术实现方案 + +### 1. CSS 架构 +- **原子化 CSS**: 使用 Tailwind CSS +- **自定义主题**: 扩展 Tailwind 配置 +- **组件样式**: CSS Modules 或 Styled Components + +### 2. 响应式实现 +- **移动优先**: Mobile-first 设计 +- **弹性单位**: rem, em, vw, vh +- **媒体查询**: 断点式响应 + +### 3. 性能优化 +- **字体优化**: 字体子集化，预加载 +- **图片优化**: WebP 格式，懒加载 +- **CSS 优化**: 关键 CSS 内联 + +## 📋 实施计划 + +### 阶段一：基础设施 (1-2天) +1. 更新 Tailwind 配置，添加中式主题 +2. 创建设计系统组件库 +3. 建立响应式断点系统 + +### 阶段二：核心组件 (2-3天) +1. 重构导航栏组件 (解决移动端溢出) +2. 优化按钮和表单组件 +3. 重设计卡片和布局组件 + +### 阶段三：页面优化 (3-4天) +1. 首页重新设计 +2. 分析页面布局优化 +3. 历史记录页面改进 +4. 用户中心页面美化 + +### 阶段四：细节完善 (1-2天) +1. 动画效果添加 +2. 交互细节优化 +3. 跨设备测试 +4. 性能优化 + +## 🎯 预期效果 + +### 视觉效果 +- 统一的中式古典风格 +- 和谐的色彩搭配 +- 清晰的视觉层次 +- 优雅的动画过渡 + +### 用户体验 +- 完美的移动端适配 +- 直观的导航体验 +- 舒适的阅读体验 +- 流畅的交互反馈 + +### 技术指标 +- 移动端适配率 100% +- 页面加载速度 < 2s +- 交互响应时间 < 100ms +- 跨浏览器兼容性 95%+ + +## 📝 验收标准 + +1. **移动端测试**: 在各种移动设备上无溢出、布局正常 +2. **响应式测试**: 在不同屏幕尺寸下表现良好 +3. **视觉一致性**: 所有页面遵循统一设计规范 +4. **性能测试**: 页面加载和交互性能达标 +5. **用户体验**: 导航清晰、操作便捷、视觉舒适 + +--- + +*此计划将分阶段实施，每个阶段完成后进行测试和调整，确保最终效果符合预期。* \ No newline at end of file diff --git a/create_function_templates.ps1 b/create_function_templates.ps1 deleted file mode 100644 index 2b9f9fb..0000000 --- a/create_function_templates.ps1 +++ /dev/null @@ -1,71 +0,0 @@ -# PowerShell script to create template files for all remaining Edge Functions - -$functions = @( - 'numerology-analysis', - 'reading-history', - 'yijing-analyzer', - 'bazi-analysis', - 'ziwei-analysis', - 'yijing-analysis', - 'create-user-simple', - 'create-admin-user', - 'custom-auth', - 'profile-manager', - 'wuxing-analysis', - 'bazi-detail-analysis', - 'bazi-wuxing-analysis', - 'bazi-details' -) - -$template = @' -// Supabase Edge Function: {0} -// TODO: Copy the actual code from Supabase Dashboard - -import { serve } from 'https://deno.land/std@0.168.0/http/server.ts' -import { createClient } from 'https://esm.sh/@supabase/supabase-js@2' - -const corsHeaders = { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type', -} - -serve(async (req) => { - // Handle CORS preflight requests - if (req.method === 'OPTIONS') { - return new Response('ok', { headers: corsHeaders }) - } - - try { - // TODO: Replace with actual implementation from Dashboard - return new Response( - JSON.stringify({ message: '{0} function - replace with actual code' }), - { - headers: { ...corsHeaders, 'Content-Type': 'application/json' }, - } - ) - } catch (error) { - return new Response( - JSON.stringify({ error: error.message }), - { - status: 500, - headers: { ...corsHeaders, 'Content-Type': 'application/json' }, - } - ) - } -}) -'@ - -foreach ($func in $functions) { - $functionName = $func -replace '-', ' ' | ForEach-Object { (Get-Culture).TextInfo.ToTitleCase($_) } - $content = $template -f $functionName, $func - $filePath = "supabase\functions\$func\index.ts" - - if (!(Test-Path $filePath)) { - $content | Out-File -FilePath $filePath -Encoding UTF8 - Write-Host "Created: $filePath" - } else { - Write-Host "Already exists: $filePath" - } -} - -Write-Host "All function templates created successfully!" \ No newline at end of file diff --git a/package.json b/package.json index f28b5b3..95ec73c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "lint": "eslint .", "preview": "vite preview", "start": "node server/index.cjs", - "db:init": "node server/scripts/initDatabase.cjs" + "db:init": "node server/scripts/initDatabase.cjs", + "test": "node tests/integration.test.cjs", + "test:integration": "node tests/integration.test.cjs" }, "dependencies": { "@hookform/resolvers": "^3.10.0", @@ -58,7 +60,6 @@ "jsonwebtoken": "^9.0.2", "lucide-react": "^0.364.0", "next-themes": "^0.4.4", - "node-fetch": "^2.7.0", "nodemon": "^3.0.2", "react": "^18.3.1", "react-day-picker": "8.10.1", @@ -89,6 +90,7 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.12.0", + "node-fetch": "^2.7.0", "postcss": "8.4.49", "tailwindcss": "v3.4.16", "typescript": "~5.6.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd60f40..66fe398 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,9 +137,6 @@ importers: next-themes: specifier: ^0.4.4 version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - node-fetch: - specifier: ^2.7.0 - version: 2.7.0 nodemon: specifier: ^3.0.2 version: 3.1.10 @@ -225,6 +222,9 @@ importers: globals: specifier: ^15.12.0 version: 15.15.0 + node-fetch: + specifier: ^2.7.0 + version: 2.7.0 postcss: specifier: 8.4.49 version: 8.4.49 diff --git a/server/index.js b/server/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/middleware/auth.js b/server/middleware/auth.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/middleware/errorHandler.js b/server/middleware/errorHandler.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/middleware/logger.js b/server/middleware/logger.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/routes/analysis.js b/server/routes/analysis.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/routes/auth.js b/server/routes/auth.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/routes/history.js b/server/routes/history.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/routes/profile.js b/server/routes/profile.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/scripts/initDatabase.js b/server/scripts/initDatabase.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/services/baziAnalyzer.js b/server/services/baziAnalyzer.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/services/yijingAnalyzer.js b/server/services/yijingAnalyzer.js deleted file mode 100644 index e69de29..0000000 diff --git a/server/services/ziweiAnalyzer.js b/server/services/ziweiAnalyzer.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/BaziAnalysisDisplay.tsx b/src/components/BaziAnalysisDisplay.tsx index 8aec65a..cc8534a 100644 --- a/src/components/BaziAnalysisDisplay.tsx +++ b/src/components/BaziAnalysisDisplay.tsx @@ -395,7 +395,7 @@ const BaziAnalysisDisplay: React.FC请稍候，正在排盘并生成您的详细命理报告...
-请稍候，正在生成您的详细命理报告...
+{palace.interpretation}
+{palace.interpretation}
紫微斗数将人生分为十二个宫位，每个宫位代表不同的人生领域
-紫微斗数将人生分为十二个宫位，每个宫位代表不同的人生领域
+