0.0.8.1

2025-11-23 19:38:51 +08:00
parent e44dd0bd95
commit 3b0d8255f6
649 changed files with 656698 additions and 4133 deletions
@@ -0,0 +1,218 @@
+# 欢迎页面图片使用指南
+
+## 推荐图片来源
+
+### 1. 免费高质量图片网站
+
+#### Unsplash（推荐）
+- 网址：https://unsplash.com
+- 搜索关键词：
+  - `chinese ancestral hall` (中国祠堂)
+  - `chinese traditional architecture` (中国传统建筑)
+  - `chinese genealogy` (中国家谱)
+  - `ancient chinese book` (古代中国书籍)
+  - `chinese temple` (中国寺庙)
+
+#### Pexels
+- 网址：https://www.pexels.com
+- 搜索关键词：
+  - `chinese architecture`
+  - `traditional chinese`
+  - `ancient china`
+
+#### Pixabay
+- 网址：https://pixabay.com
+- 中文搜索：祠堂、家谱、古建筑
+
+### 2. 推荐的具体图片
+
+以下是一些适合的Unsplash图片ID：
+
+1. **中国传统建筑**
+   ```
+   https://images.unsplash.com/photo-1528360983277-13d401cdc186
+   ```
+
+2. **古代书籍/卷轴**
+   ```
+   https://images.unsplash.com/photo-1481627834876-b7833e8f5570
+   ```
+
+3. **中国园林建筑**
+   ```
+   https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b
+   ```
+
+4. **传统中国屋檐**
+   ```
+   https://images.unsplash.com/photo-1508804185872-d7badad00f7d
+   ```
+
+## 使用方法
+
+### 方法1：使用在线图片（当前方案）
+
+已在代码中实现，使用Unsplash CDN：
+```tsx
+<img 
+  src="https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=800&q=80" 
+  alt="中国传统建筑"
+  className="w-full h-full object-cover blur-sm"
+/>
+```
+
+优点：
+- 无需下载，直接使用
+- 自动优化和CDN加速
+- 可以随时更换
+
+缺点：
+- 依赖外部服务
+- 需要网络连接
+
+### 方法2：使用本地图片（生产环境推荐）
+
+#### 步骤1：下载图片
+1. 访问Unsplash或其他免费图片网站
+2. 下载喜欢的图片（建议尺寸：1920x1080或更大）
+3. 重命名为有意义的名称，如 `ancestral-hall.jpg`
+
+#### 步骤2：放置图片
+将图片放到项目的 `public` 目录：
+```
+/Users/freedak/Documents/go-new/chinese-family-tree/public/
+  ├── ancestral-hall.jpg
+  ├── ancient-book.jpg
+  └── traditional-architecture.jpg
+```
+
+#### 步骤3：修改代码
+在 `app/page.tsx` 中修改图片路径：
+```tsx
+<img 
+  src="/ancestral-hall.jpg" 
+  alt="中国传统祠堂"
+  className="w-full h-full object-cover blur-sm"
+/>
+```
+
+### 方法3：使用Next.js Image组件（最佳实践）
+
+```tsx
+import Image from "next/image"
+
+<Image 
+  src="/ancestral-hall.jpg"
+  alt="中国传统祠堂"
+  fill
+  className="object-cover blur-sm"
+  quality={80}
+  priority
+/>
+```
+
+优点：
+- 自动优化图片
+- 懒加载
+- 响应式图片
+- 更好的性能
+
+## 设计建议
+
+### 图片处理参数
+
+当前使用的效果：
+- `opacity-5` - 5%透明度，非常淡
+- `blur-sm` - 轻微模糊
+- `-z-10` - 置于背景层
+
+这样处理的目的：
+- 不抢主要内容的视觉焦点
+- 营造文化氛围
+- 保持页面简洁优雅
+
+### 可选的其他效果
+
+1. **更淡的背景**
+```tsx
+className="opacity-3 blur-md"
+```
+
+2. **渐变遮罩**
+```tsx
+<div className="absolute inset-0 bg-gradient-to-b from-background/50 to-background/90" />
+```
+
+3. **多张图片轮播**（高级）
+可以使用定时器切换不同的背景图片
+
+## 图片版权说明
+
+### Unsplash
+- 完全免费使用
+- 无需署名（但建议署名）
+- 可商用
+- 许可证：Unsplash License
+
+### Pexels
+- 完全免费使用
+- 无需署名
+- 可商用
+- 许可证：Pexels License
+
+### Pixabay
+- 完全免费使用
+- 无需署名
+- 可商用
+- 许可证：Pixabay License
+
+## 推荐的图片特征
+
+选择图片时注意：
+1. **色调** - 偏暖色调或中性色调，与系统配色协调
+2. **构图** - 简洁，不要太复杂
+3. **主题** - 中国传统建筑、古籍、祠堂等
+4. **质量** - 高分辨率，清晰
+5. **氛围** - 庄重、典雅、有文化底蕴
+
+## 示例代码
+
+### 完整的欢迎页面（带本地图片）
+
+```tsx
+// 如果用户没有家族树，显示欢迎页面
+if (!isLoading && !currentTree) {
+  return (
+    <div className="flex min-h-screen flex-col bg-background font-sans">
+      <SiteHeader />
+      <main className="flex-1 flex items-center justify-center px-4 md:px-6 relative overflow-hidden">
+        {/* 背景图片 */}
+        <div className="absolute inset-0 -z-10">
+          <Image 
+            src="/ancestral-hall.jpg"
+            alt="中国传统祠堂"
+            fill
+            className="object-cover opacity-5 blur-sm"
+            quality={80}
+            priority
+          />
+        </div>
+        
+        <div className="max-w-3xl mx-auto text-center space-y-12">
+          {/* 其余内容... */}
+        </div>
+      </main>
+    </div>
+  )
+}
+```
+
+## 快速开始
+
+1. 访问 https://unsplash.com/s/photos/chinese-ancestral-hall
+2. 选择一张喜欢的图片
+3. 点击下载（选择中等尺寸即可）
+4. 将图片放到 `public/` 目录
+5. 修改代码中的图片路径
+
+就这么简单！