|
|
@@ -36,7 +36,61 @@
|
|
|
- 卡片背景:#ffffff
|
|
|
- 分割線:#e8e8e8
|
|
|
|
|
|
-### 2.2 字体规范
|
|
|
+### 2.2 占位图规范
|
|
|
+
|
|
|
+#### Unsplash 占位图使用
|
|
|
+- **默认占位图**:使用 Unsplash 提供的免费高质量图片
|
|
|
+- **图片尺寸**:根据组件需求选择合适的尺寸
|
|
|
+- **格式**:`https://source.unsplash.com/{width}x{height}/?{关键词}`
|
|
|
+
|
|
|
+#### 使用示例
|
|
|
+- **头像占位图**:`https://source.unsplash.com/200x200/?portrait`
|
|
|
+- **封面占位图**:`https://source.unsplash.com/400x300/?nature`
|
|
|
+- **背景占位图**:`https://source.unsplash.com/800x600/?landscape`
|
|
|
+- **商品图片**:`https://source.unsplash.com/300x300/?product`
|
|
|
+
|
|
|
+#### 关键词分类
|
|
|
+- **人物**:portrait, person, people, man, woman
|
|
|
+- **自然**:nature, landscape, mountain, forest, ocean
|
|
|
+- **城市**:city, building, architecture, street
|
|
|
+- **抽象**:abstract, pattern, texture, gradient
|
|
|
+- **技术**:technology, computer, phone, digital
|
|
|
+- **食物**:food, coffee, fruit, restaurant
|
|
|
+- **商业**:business, office, workspace, meeting
|
|
|
+
|
|
|
+#### 实现代码示例
|
|
|
+```typescript
|
|
|
+// 头像组件
|
|
|
+const AvatarPlaceholder = ({ size = 200 }) => {
|
|
|
+ const placeholderUrl = `https://source.unsplash.com/${size}x${size}/?portrait`;
|
|
|
+ return <Image src={placeholderUrl} mode="aspectFill" />;
|
|
|
+};
|
|
|
+
|
|
|
+// 封面组件
|
|
|
+const CoverPlaceholder = ({ width = 400, height = 300, keyword = 'nature' }) => {
|
|
|
+ const placeholderUrl = `https://source.unsplash.com/${width}x${height}/?${keyword}`;
|
|
|
+ return <Image src={placeholderUrl} mode="aspectFill" />;
|
|
|
+};
|
|
|
+
|
|
|
+// 带错误处理的占位图
|
|
|
+const SmartImage = ({ src, placeholder, ...props }) => {
|
|
|
+ const [imageSrc, setImageSrc] = useState(src || placeholder);
|
|
|
+
|
|
|
+ const handleError = () => {
|
|
|
+ setImageSrc(placeholder);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Image
|
|
|
+ src={imageSrc}
|
|
|
+ onError={handleError}
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ );
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+### 2.3 字体规范
|
|
|
|
|
|
#### 字体家族
|
|
|
- iOS:-apple-system-font, Helvetica Neue
|
|
|
@@ -53,7 +107,7 @@
|
|
|
- 正文:400(常规)
|
|
|
- 强调:500(中等)
|
|
|
|
|
|
-### 2.3 间距规范
|
|
|
+### 2.4 间距规范
|
|
|
|
|
|
#### 基础间距
|
|
|
- 8rpx(4px)
|