feat(web): article detail page and route

空气质量预测/源码/用户端/iapip-web/.umirc.ts

@@ -57,6 +57,18 @@ export default defineConfig({
             component: './forum/thread',
             layout: false
         },
+        {
+            name: '科普文章',
+            path: '/articles',
+            component: './articles',
+            layout: false
+        },
+        {
+            name: '文章详情',
+            path: '/article/:id',
+            component: './article',
+            layout: false
+        },
         {
             path: '/',
             redirect: '/landing'

空气质量预测/源码/用户端/iapip-web/src/pages/article/index.tsx

@@ -0,0 +1,43 @@
+import { history, useParams } from '@umijs/max'
+import { getArticle } from '@/common/articles'
+
+export default function ArticleDetail() {
+    const { id } = useParams<{ id: string }>()
+    const article = id ? getArticle(id) : undefined
+
+    if (!article) {
+        return (
+            <div style={{ maxWidth: 760, margin: '0 auto', padding: '80px 16px', textAlign: 'center' }}>
+                <p style={{ color: '#666' }}>文章不存在或已下线。</p>
+                <a onClick={() => history.push('/landing')} style={{ color: '#B43533' }}>← 返回首页</a>
+            </div>
+        )
+    }
+
+    return (
+        <div style={{ maxWidth: 760, margin: '0 auto', padding: '32px 16px 64px' }}>
+            <a onClick={() => history.push('/landing')} style={{ color: '#888' }}>← 返回首页</a>
+            <div style={{ marginTop: 20 }}>
+                <div style={{ color: '#B43533', fontSize: 13 }}>{article.tag} · {article.date}</div>
+                <h1 style={{ fontSize: 26, margin: '10px 0 4px', lineHeight: 1.35 }}>{article.title}</h1>
+                <p style={{ color: '#666', fontSize: 15, margin: '8px 0 24px' }}>{article.summary}</p>
+            </div>
+            {article.body.map((sec, i) => (
+                <section key={i} style={{ marginBottom: 20 }}>
+                    {sec.heading && <h2 style={{ fontSize: 18, margin: '18px 0 8px' }}>{sec.heading}</h2>}
+                    {sec.paragraphs.map((p, j) => (
+                        <p key={j} style={{ lineHeight: 1.9, color: '#333', margin: '0 0 10px' }}>{p}</p>
+                    ))}
+                </section>
+            ))}
+            {article.sources && article.sources.length > 0 && (
+                <div style={{ marginTop: 28, paddingTop: 16, borderTop: '1px solid #eee', color: '#999', fontSize: 13 }}>
+                    <div style={{ marginBottom: 6 }}>参考来源</div>
+                    <ul style={{ margin: 0, paddingLeft: 18 }}>
+                        {article.sources.map((s, i) => <li key={i}>{s}</li>)}
+                    </ul>
+                </div>
+            )}
+        </div>
+    )
+}