5d09cc05dc
- 新增文章详情页面，支持根据文章 ID 加载和展示文章内容 - 添加文章卡片组件，展示推荐文章的标题、封面和阅读量 - 更新文章服务，支持获取文章列表和根据 ID 获取文章详情 - 集成腾讯云 COS SDK，支持文件上传功能 - 优化打卡功能，支持按日期加载和展示打卡记录 - 更新相关依赖，确保项目兼容性和功能完整性 - 调整样式以适应新功能的展示和交互
74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
import dayjs from 'dayjs';
|
|
import { useRouter } from 'expo-router';
|
|
import React from 'react';
|
|
import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
type Props = {
|
|
id: string;
|
|
title: string;
|
|
coverImage: string;
|
|
publishedAt: string; // ISO
|
|
readCount: number;
|
|
};
|
|
|
|
export function ArticleCard({ id, title, coverImage, publishedAt, readCount }: Props) {
|
|
const router = useRouter();
|
|
return (
|
|
<Pressable onPress={() => router.push(`/article/${id}`)} style={styles.card}>
|
|
<Image source={{ uri: coverImage }} style={styles.cover} />
|
|
<View style={styles.meta}>
|
|
<Text style={styles.title} numberOfLines={2}>{title}</Text>
|
|
<View style={styles.row}>
|
|
<Text style={styles.metaText}>{dayjs(publishedAt).format('YYYY-MM-DD')}</Text>
|
|
<Text style={[styles.metaText, styles.dot]}>·</Text>
|
|
<Text style={styles.metaText}>{readCount} 阅读</Text>
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 20,
|
|
padding: 14,
|
|
marginBottom: 14,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 10,
|
|
elevation: 2,
|
|
},
|
|
cover: {
|
|
width: 92,
|
|
height: 92,
|
|
borderRadius: 16,
|
|
},
|
|
meta: {
|
|
flex: 1,
|
|
paddingLeft: 12,
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
color: '#192126',
|
|
fontWeight: '800',
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 8,
|
|
},
|
|
metaText: {
|
|
fontSize: 12,
|
|
color: '#8A8A8E',
|
|
},
|
|
dot: {
|
|
paddingHorizontal: 6,
|
|
},
|
|
});
|
|
|
|
|