fix: update detailes does not load

This commit is contained in:
CDN 2025-02-03 20:24:16 +08:00
parent 01c5131055
commit efe0b21753
Signed by: CDN
GPG key ID: 0C656827F9F80080
5 changed files with 50 additions and 7 deletions

View file

@ -63,6 +63,7 @@
"tags": {
"journal": "Journal/Summary",
"milestone": "Milestone",
"service": "Service",
"other": "Other"
},
"notFound": {

View file

@ -84,6 +84,7 @@
"tags": {
"journal": "日志/总结",
"milestone": "里程碑",
"service": "服务",
"other": "其它"
},
"notFound": {

View file

@ -76,6 +76,7 @@
"tags": {
"journal": "日誌/總結",
"milestone": "里程碑",
"service": "服務",
"other": "其他"
},
"notFound": {

View file

@ -8,25 +8,31 @@ import { useUpdates, Update } from '../utils/updates';
const UpdateDetailPage: React.FC = () => {
const { id } = useParams<{ id: string }>();
const { i18n, t } = useTranslation();
const { getAllUpdates } = useUpdates();
const { data: allUpdates = [], isLoading } = useUpdates();
const [update, setUpdate] = useState<Update | null>(null);
const [content, setContent] = useState<string | null>(null);
useEffect(() => {
console.log(`[Debug] UpdateDetailPage - Effect triggered with id: ${id}`);
console.log(`[Debug] Current language: ${i18n.language}`);
console.log(`[Debug] Loading status: ${isLoading}`);
console.log(`[Debug] Available updates:`, allUpdates);
const fetchUpdateData = async () => {
if (!id) {
console.log('[Debug] No id provided, clearing update and content');
setUpdate(null);
setContent(null);
return;
}
try {
// 获取所有更新条目
const allUpdates = await getAllUpdates();
// 查找对应 id 的更新条目
const foundUpdate = allUpdates.find(u => u.id === id);
console.log(`[Debug] Found update for id ${id}:`, foundUpdate);
if (!foundUpdate) {
console.log(`[Debug] Update not found for id: ${id}`);
setUpdate(null);
setContent(null);
return;
@ -36,38 +42,66 @@ const UpdateDetailPage: React.FC = () => {
// 如果该更新有 link 属性,则说明为外链,详情页不需要加载内容
if (foundUpdate.link) {
console.log(`[Debug] Update is an external link: ${foundUpdate.link}`);
setContent(null);
return;
}
// 从日期中提取年份
const year = new Date(foundUpdate.date).getFullYear();
console.log(`[Debug] Loading content for year: ${year}`);
try {
// 尝试加载 Markdown 文件
const mdPath = `/data/${i18n.language}/updates/${year}/${foundUpdate.id}.md`;
console.log(`[Debug] Attempting to load markdown from: ${mdPath}`);
const response = await fetch(mdPath);
if (!response.ok) {
throw new Error('Markdown file not found');
// 检查响应状态和内容类型
const contentType = response.headers.get('content-type');
console.log(`[Debug] Response content type: ${contentType}`);
if (!response.ok || !contentType || !contentType.includes('text/markdown')) {
console.log(`[Debug] Markdown file not found or invalid content type at: ${mdPath}`);
throw new Error('Markdown file not found or invalid');
}
const mdText = await response.text();
// 简单验证内容是否看起来像 markdown
if (mdText.includes('<script') || mdText.includes('<meta')) {
console.log(`[Debug] Invalid markdown content detected, falling back to summary`);
throw new Error('Invalid markdown content');
}
console.log(`[Debug] Successfully loaded markdown content, length: ${mdText.length}`);
// 将 Markdown 转换为 HTML
setContent(marked(mdText));
} catch (error) {
// 如果 Markdown 文件未找到或加载失败,使用 summary 作为内容
console.log(`[Debug] Using summary as content due to error:`, error);
setContent(foundUpdate.summary);
}
} catch (error) {
console.error('Failed to fetch update data:', error);
console.error('[Debug] Failed to fetch update data:', error);
setUpdate(null);
setContent(null);
}
};
fetchUpdateData();
}, [id, i18n.language, getAllUpdates]);
}, [id, i18n.language, allUpdates]);
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
{t('common.loading')}
</h2>
</div>
</div>
);
}
if (!update) {
return (

View file

@ -20,12 +20,14 @@ interface UpdatesIndex {
// 获取更新年份列表
const getUpdateYears = async (language: string): Promise<string[]> => {
console.log(`[Debug] Fetching update years for language: ${language}`);
try {
const response = await fetch(`/data/${language}/updates.json`);
if (!response.ok) {
throw new Error(`Failed to load updates index, status: ${response.status}`);
}
const index: UpdatesIndex = await response.json();
console.log(`[Debug] Found years:`, index.years);
return index.years || [];
} catch (error) {
if (process.env.NODE_ENV === 'development') {
@ -37,12 +39,14 @@ const getUpdateYears = async (language: string): Promise<string[]> => {
// 动态获取指定的年度更新
const getYearUpdates = async (yearFile: string, language: string): Promise<YearUpdates | null> => {
console.log(`[Debug] Fetching updates for year file: ${yearFile}, language: ${language}`);
try {
const response = await fetch(`/data/${language}/updates/${yearFile}`);
if (!response.ok) {
throw new Error(`Failed to load updates from ${yearFile}, status: ${response.status}`);
}
const data: YearUpdates = await response.json();
console.log(`[Debug] Loaded updates for ${yearFile}:`, data.updates?.length || 0, 'updates');
return data;
} catch (error) {
if (process.env.NODE_ENV === 'development') {
@ -54,6 +58,7 @@ const getYearUpdates = async (yearFile: string, language: string): Promise<YearU
// 获取所有更新并按日期排序
const getAllUpdates = async (language: string, selectedTags: string[] = []): Promise<Update[]> => {
console.log(`[Debug] Getting all updates for language: ${language}, selectedTags:`, selectedTags);
const allUpdates: Update[] = [];
// 从索引文件获取年份列表
@ -131,6 +136,7 @@ export const useUpdates = (page: number = 1, pageSize: number = 10) => {
return {
getPaginatedUpdates,
data: allUpdates,
isLoading,
error
};