5d09cc05dc
- 新增文章详情页面，支持根据文章 ID 加载和展示文章内容 - 添加文章卡片组件，展示推荐文章的标题、封面和阅读量 - 更新文章服务，支持获取文章列表和根据 ID 获取文章详情 - 集成腾讯云 COS SDK，支持文件上传功能 - 优化打卡功能，支持按日期加载和展示打卡记录 - 更新相关依赖，确保项目兼容性和功能完整性 - 调整样式以适应新功能的展示和交互
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import dayjs from 'dayjs';
|
|
import { api } from './api';
|
|
|
|
export type Article = {
|
|
id: string;
|
|
title: string;
|
|
coverImage: string;
|
|
htmlContent: string;
|
|
publishedAt: string; // ISO string
|
|
readCount: number;
|
|
};
|
|
|
|
const demoArticles: Article[] = [
|
|
{
|
|
id: 'intro-pilates-posture',
|
|
title: '新手入门：普拉提核心与体态的关系',
|
|
coverImage: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/imagedemo.jpeg',
|
|
publishedAt: dayjs().subtract(2, 'day').toISOString(),
|
|
readCount: 1268,
|
|
htmlContent: `
|
|
<h2>为什么核心很重要？</h2>
|
|
<p>核心是维持良好体态与动作稳定的关键。普拉提通过强调呼吸与深层肌群激活，帮助你在<em>日常站立、坐姿与训练</em>中保持更好的身体对齐。</p>
|
|
<h3>入门建议</h3>
|
|
<ol>
|
|
<li>从呼吸开始：尝试<strong>胸廓外扩</strong>而非耸肩。</li>
|
|
<li>慢而可控：注意动作过程中的连贯与专注。</li>
|
|
<li>记录变化：每周拍照或在应用中记录体态变化。</li>
|
|
</ol>
|
|
<p>更多实操可在本应用的「AI体态评估」中获取个性化建议。</p>
|
|
<img src="https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/ImageCheck.jpeg" alt="pilates-illustration" />
|
|
`,
|
|
},
|
|
];
|
|
|
|
export function listRecommendedArticles(): Article[] {
|
|
// 实际项目中可替换为 API 请求
|
|
return demoArticles;
|
|
}
|
|
|
|
export async function getArticleById(id: string): Promise<Article | undefined> {
|
|
return api.get<Article>(`/articles/${id}`);
|
|
}
|
|
|
|
|