feat: add Wuhan-2020 COVID-19 rescue info platform archive page (Closes #99) #105
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,316 @@ | ||
| import { observer } from 'mobx-react'; | ||
| import { FC, useContext } from 'react'; | ||
| import { | ||
| Badge, | ||
| Card, | ||
| Col, | ||
| Container, | ||
| Row, | ||
| } from 'react-bootstrap'; | ||
|
|
||
| import { PageHead } from '../components/Layout/PageHead'; | ||
| import { I18nContext } from '../models/Translation'; | ||
|
|
||
| interface Category { | ||
| icon: string; | ||
| title: string; | ||
| description: string; | ||
| href?: string; | ||
| badge?: string; | ||
| } | ||
|
|
||
| const categories: Category[] = [ | ||
| { | ||
| icon: '🏥', | ||
| title: '医院', | ||
| description: | ||
| '武汉及周边地区医院物资需求信息，包括防护服、口罩、消毒液等医疗物资的供需对接', | ||
| href: 'https://github.com/wuhan2020/WebApp', | ||
| badge: 'Hospital', | ||
| }, | ||
| { | ||
| icon: '🚚', | ||
| title: '物流', | ||
| description: | ||
| '救援物资运输渠道信息，物流公司运力资源、运输路线及配送协调', | ||
| href: 'https://github.com/wuhan2020/WebApp', | ||
| badge: 'Logistics', | ||
| }, | ||
| { | ||
| icon: '🏨', | ||
| title: '酒店', | ||
| description: | ||
| '为医护人员提供免费或优惠住宿的酒店信息，以及酒店资源对接', | ||
| href: 'https://github.com/wuhan2020/WebApp', | ||
| badge: 'Hotel', | ||
| }, | ||
| { | ||
| icon: '🏭', | ||
| title: '生产', | ||
| description: | ||
| '医疗物资生产企业信息，包括产能、原材料需求及供应渠道对接', | ||
| href: 'https://github.com/wuhan2020/WebApp', | ||
| badge: 'Factory', | ||
| }, | ||
| { | ||
| icon: '❤️', | ||
| title: '捐赠', | ||
| description: | ||
| '社会捐赠渠道信息，资金与物资捐赠的对接平台及需求公示', | ||
| href: 'https://github.com/wuhan2020/WebApp', | ||
| badge: 'Donation', | ||
| }, | ||
| { | ||
| icon: '💊', | ||
| title: '义诊', | ||
| description: | ||
| '在线义诊服务平台，连接医疗专家与社区居民的远程问诊渠道', | ||
| href: 'https://github.com/wuhan2020/WebApp', | ||
| badge: 'Clinic', | ||
| }, | ||
| { | ||
| icon: '🗺️', | ||
| title: '疫情地图', | ||
| description: | ||
| '基于实时数据的疫情分布地图，展示各省市确诊、疑似、治愈等统计数据', | ||
| href: 'https://github.com/wuhan2020/WebApp/tree/dev/source/page/Map', | ||
| badge: 'Map', | ||
| }, | ||
| { | ||
| icon: '👥', | ||
| title: '开放社区', | ||
| description: | ||
| '志愿者协作社区，汇聚开发、运维、数据、医疗等各方力量共同抗疫', | ||
| href: 'https://github.com/wuhan2020/WebApp', | ||
| badge: 'Community', | ||
| }, | ||
| ]; | ||
|
|
||
| const techStack = [ | ||
| { name: 'TypeScript', icon: '📘' }, | ||
| { name: 'React / WebCell', icon: '⚛️' }, | ||
| { name: 'MobX', icon: '📦' }, | ||
| { name: 'ECharts', icon: '📊' }, | ||
| { name: 'Supabase', icon: '🗄️' }, | ||
| { name: 'Bootstrap', icon: '🎨' }, | ||
| ]; | ||
|
|
||
| const Wuhan2020Page: FC = observer(() => { | ||
| const { t } = useContext(I18nContext); | ||
|
|
||
| return ( | ||
| <> | ||
| <PageHead | ||
| title="新冠战疫信息平台 — 武汉 2020" | ||
| description="武汉新型冠状病毒防疫信息平台开放数据存档 — 记录 2020 年抗疫期间医疗物资、物流、捐赠、义诊等信息的协作平台" | ||
| /> | ||
|
|
||
| {/* Hero Section */} | ||
| <section className="bg-dark text-white py-5"> | ||
| <Container> | ||
| <Row className="align-items-center"> | ||
| <Col xs={12} md={8}> | ||
| <h1 className="display-4 fw-bold mb-3"> | ||
| 🦠 新冠战疫信息平台 | ||
| </h1> | ||
| <p className="lead mb-4"> | ||
| 武汉新型冠状病毒防疫信息平台 — | ||
| 开放数据存档 | ||
| </p> | ||
| <p className="fs-5 mb-4"> | ||
| 本页面是 wuhan2020/WebApp 开源项目的存档展示，记录 2020 | ||
| 年抗疫期间，由社区志愿者共同构建的救援信息协作平台。 | ||
| </p> | ||
| <div className="d-flex gap-3 flex-wrap"> | ||
| <a | ||
| className="btn btn-primary btn-lg" | ||
| href="https://github.com/wuhan2020/WebApp" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <span className="me-2">📂</span> | ||
| 查看原始项目 | ||
| </a> | ||
| <a | ||
| className="btn btn-outline-light btn-lg" | ||
| href="https://github.com/wuhan2020" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <span className="me-2">🏛️</span> | ||
| 访问组织 | ||
| </a> | ||
| </div> | ||
|
Comment on lines
+124
to
+143
There was a problem hiding this comment. 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
echo "== package.react-bootstrap =="
if [ -f package.json ]; then
node -e "const p=require('./package.json'); console.log(p.dependencies && p.dependencies['react-bootstrap'] || p.devDependencies && p.devDependencies['react-bootstrap'] || '<not found>')"
fi
echo "== target file outline =="
ast-grep outline pages/wuhan-2020.tsx --view compact || true
echo "== relevant snippets =="
sed -n '1,260p' pages/wuhan-2020.tsx | nl -ba | sed -n '1,260p'
echo "== react-bootstrap imports/usages in target =="
python3 - <<'PY'
from pathlib import Path
p = Path('pages/wuhan-2020.tsx')
text = p.read_text(encoding='utf-8').splitlines()
print("imports:")
for i,line in enumerate(text,1):
if "react-bootstrap" in line or ("<a " in line and "btn " in line):
print(f"{i:4}: {line}")
PYRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io Length of output: 466 🏁 Script executed: #!/bin/bash
set -euo pipefail
echo "== target file outline =="
ast-grep outline pages/wuhan-2020.tsx --view compact || true
echo "== relevant snippets =="
sed -n '1,260p' pages/wuhan-2020.tsx | nl -ba | sed -n '1,260p'
echo "== react-bootstrap imports/usages in target =="
python3 - <<'PY'
from pathlib import Path
p = Path('pages/wuhan-2020.tsx')
text = p.read_text(encoding='utf-8').splitlines()
print("imports:")
for i,line in enumerate(text,1):
if "react-bootstrap" in line or ("<a " in line and "btn " in line):
print(f"{i:4}: {line}")
PYRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io Length of output: 426 🏁 Script executed: #!/bin/sh
set -euo pipefail
printf '== target file size and imports/usages ==\n'
wc -l pages/wuhan-2020.tsx
python3 - <<'PY'
from pathlib import Path
text = Path('pages/wuhan-2020.tsx').read_text(encoding='utf-8').splitlines()
for i,line in enumerate(text,1):
if 'react-bootstrap' in line or '<a className=' in line and 'btn' in line:
print(f'{i:4}: {line}')
PY
printf '\n== snippets around button lines ==\n'
awk 'NR>=118 && NR<=146 {printf "%5d: %s\n", NR, $0}' pages/wuhan-2020.tsx
printf '\n'
awk 'NR>=223 && NR<=243 {printf "%5d: %s\n", NR, $0}' pages/wuhan-2020.tsx
printf '\n== package react-bootstrap value ==\n'
node -e 'const p=require("./package.json"); console.log((p.dependencies&&p.dependencies["react-bootstrap"])||(p.devDependencies&&p.devDependencies["react-bootstrap"])||(p.peerDependencies&&p.peerDependencies["react-bootstrap"])||"<not found>")'Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io Length of output: 2451 将按钮样式的链接改为 React Bootstrap
🤖 Prompt for AI AgentsSource: Coding guidelines |
||
| </Col> | ||
| <Col xs={12} md={4} className="text-center mt-4 mt-md-0"> | ||
| <div | ||
| className="display-1" | ||
| aria-label="COVID-19 Rescue Platform" | ||
| > | ||
| 🏥 | ||
| </div> | ||
|
Comment on lines
+145
to
+151
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win 修正普通 该元素没有语义角色。WAI-ARIA 将 generic 元素列为禁止命名的角色，因此此处的 如果医院 emoji 仅用于装饰，请使用 🤖 Prompt for AI AgentsSource: MCP tools |
||
| <Badge bg="warning" text="dark" className="mt-2 fs-6"> | ||
| 🌟 392 Stars · 140 Forks | ||
| </Badge> | ||
|
Comment on lines
+152
to
+154
There was a problem hiding this comment. 🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
echo "== repo files matching wuhan-2020 =="
fd -a 'wuhan-2020\.tsx$' . || true
echo "== relevant file excerpt =="
if [ -f pages/wuhan-2020.tsx ]; then
cat -n pages/wuhan-2020.tsx | sed -n '120,175p'
fi
echo "== references to Stars/Forks/392/140/139 =="
rg -n "Stars|Forks|星|fork|forks|392|140|139|快照|截至" pages components lib src . 2>/dev/null | head -200 || true
echo "== changed/added context =="
git diff --stat || true
git diff -- pages/wuhan-2020.tsx 2>/dev/null | sed -n '1,220p' || trueRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io Length of output: 3992 🌐 Web query:
💡 Result: As of August 2, 2026, the GitHub repository wuhan2020/WebApp has 393 stars and 139 forks [1]. Citations: 为 GitHub 统计值添加快照日期或改为动态取值。 该页硬编码 🤖 Prompt for AI AgentsSource: MCP tools |
||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
|
|
||
| {/* Mission Section */} | ||
| <section className="bg-light py-5"> | ||
| <Container> | ||
| <Row className="justify-content-center"> | ||
| <Col xs={12} md={10} lg={8}> | ||
| <h2 className="text-center mb-4">📋 项目简介</h2> | ||
| <div className="bg-white p-4 rounded-4 shadow-sm"> | ||
| <p className="fs-5"> | ||
| <strong>新冠战疫信息平台</strong>（Wuhan2020 | ||
| WebApp）是一个在 2020 | ||
| 年新冠疫情爆发期间，由全球华人开发者志愿者自发组织构建的 | ||
| <strong>渐进式 Web 应用</strong>。 | ||
| </p> | ||
| <p> | ||
| 平台旨在高效对接救援物资、医疗资源、物流运输、酒店住宿等关键信息，帮助抗疫一线的医护人员和受困群众。采用开源协作模式，汇集了来自全球的开发者、数据科学家、医疗专家等志愿者的力量。 | ||
| </p> | ||
| <p className="mb-0"> | ||
| 本项目作为开放数据存档，保留了原始平台的核心功能展示和数据结构，供历史研究、学术参考和社区纪念。 | ||
| </p> | ||
| </div> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
|
|
||
| {/* Tech Stack Section */} | ||
| <section className="py-5"> | ||
| <Container> | ||
| <h2 className="text-center mb-4">🛠️ 技术栈</h2> | ||
| <Row className="justify-content-center"> | ||
| {techStack.map(({ name, icon }) => ( | ||
| <Col key={name} xs={6} sm={4} md={3} lg={2} className="mb-3"> | ||
| <Card body className="text-center shadow-sm h-100"> | ||
| <div className="fs-1 mb-2">{icon}</div> | ||
| <div className="fw-bold">{name}</div> | ||
| </Card> | ||
| </Col> | ||
| ))} | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
|
|
||
| {/* Categories Section */} | ||
| <section className="bg-light py-5"> | ||
| <Container> | ||
| <h2 className="text-center mb-2">📂 功能模块</h2> | ||
| <p className="text-center text-muted mb-5"> | ||
| 平台涵盖以下核心功能模块，覆盖抗疫救援的各个方面 | ||
| </p> | ||
| <Row className="g-4"> | ||
| {categories.map( | ||
| ({ icon, title, description, href, badge }) => ( | ||
| <Col key={title} xs={12} sm={6} lg={4} xl={3}> | ||
| <Card className="shadow-sm h-100 border-0"> | ||
| <Card.Body className="d-flex flex-column"> | ||
| <div className="d-flex align-items-center mb-3"> | ||
| <span className="fs-1 me-3">{icon}</span> | ||
| <div> | ||
| <Card.Title className="mb-1">{title}</Card.Title> | ||
| {badge && ( | ||
| <Badge bg="secondary" className="fs-6"> | ||
| {badge} | ||
| </Badge> | ||
| )} | ||
| </div> | ||
| </div> | ||
| <Card.Text className="text-muted flex-grow-1"> | ||
| {description} | ||
| </Card.Text> | ||
| {href && ( | ||
| <a | ||
| className="btn btn-outline-primary btn-sm mt-auto" | ||
| href={href} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| 查看详情 → | ||
| </a> | ||
|
Comment on lines
+229
to
+237
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win 让卡片链接包含模块名称。 八个卡片都显示“查看详情 →”。用户在链接列表中无法直接区分医院、物流或其他模块。W3C 要求链接用途可由链接文本或程序化上下文确定。(w3c.github.io) 请使用“查看医院详情”等上下文相关文本，或为链接添加包含模块名称的 🤖 Prompt for AI AgentsSource: MCP tools |
||
| )} | ||
| </Card.Body> | ||
| </Card> | ||
| </Col> | ||
| ), | ||
| )} | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
|
|
||
| {/* Data Sources Section */} | ||
| <section className="py-5"> | ||
| <Container> | ||
| <Row className="justify-content-center"> | ||
| <Col xs={12} md={10} lg={8}> | ||
| <h2 className="text-center mb-4">📊 数据源</h2> | ||
| <div className="bg-white p-4 rounded-4 shadow-sm"> | ||
| <ul className="list-unstyled mb-0"> | ||
| <li className="mb-3"> | ||
| <strong>🦠 丁香园疫情数据</strong> —{' '} | ||
| <a | ||
| href="https://github.com/BlankerL/DXY-COVID-19-Data" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| DXY-COVID-19-Data | ||
| </a> | ||
| ，由 BlankerL 维护的丁香园疫情数据集合 | ||
| </li> | ||
| <li className="mb-3"> | ||
| <strong>🗺️ 高德地图 API</strong> — 地图数据与地理信息 | ||
| </li> | ||
| <li className="mb-3"> | ||
| <strong>📋 社区贡献数据</strong> — 由志愿者提交的医院、物流、捐赠等信息 | ||
| </li> | ||
| <li className="mb-0"> | ||
| <strong>📦 Supabase 后端</strong> — 基于 PostgreSQL 的实时数据存储与查询 | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
|
|
||
| {/* Archive Notice */} | ||
| <section className="bg-warning bg-opacity-10 py-5"> | ||
| <Container> | ||
| <Row className="justify-content-center"> | ||
| <Col xs={12} md={10} lg={8}> | ||
| <div className="text-center"> | ||
| <h2 className="mb-3">📜 存档说明</h2> | ||
| <p className="fs-5"> | ||
| 本页面为 wuhan2020/WebApp 项目的存档展示版。 | ||
| </p> | ||
| <p> | ||
| 原始项目仍托管在{' '} | ||
| <a | ||
| href="https://github.com/wuhan2020/WebApp" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| GitHub | ||
| </a> | ||
| ，所有代码和数据遵循 AGPL-3.0 开源协议。 | ||
|
Comment on lines
+293
to
+302
There was a problem hiding this comment. 🔒 Security & Privacy | 🟠 Major | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
echo "== file outline/size =="
wc -l pages/wuhan-2020.tsx
ast-grep outline pages/wuhan-2020.tsx --view compact || true
echo "== relevant snippets =="
sed -n '230,330p' pages/wuhan-2020.tsx
echo "== repository references =="
rg -n "wuhan2020|DXY-COVID-19-Data|AGPL-3\.0|MIT|高徳|高德|API|数据|license|开源协议" pages/wuhan-2020.tsxRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io Length of output: 4927 🌐 Web query:
💡 Result: The following information details the licenses for the specified GitHub repositories: The wuhan2020/WebApp repository, part of the Wuhan2020 open-source community initiative, is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0) [1][2]. The DXY-COVID-19-Data repository (managed by user BlankerL) is licensed under the MIT License [3][4]. This repository has been archived and is now read-only [5]. Similarly, the related DXY-COVID-19-Crawler repository is also licensed under the MIT License [6][7] and has been archived [6]. Citations:
🏁 Script executed: #!/bin/bash
set -euo pipefail
echo "== repository license and usage snippets =="
rg -n "license\\.name|license|licenseFile|readme|README|AGPL|MIT|高德|map" pages/wuhan-2020.tsx || true
echo "== repository files for Wuhan2020 page =="
sed -n '1,130p' pages/wuhan-2020.tsx
sed一n '130,230p' pages/wuhan-2020.tsx
echo "== behavioral check: uniform license string vs discovered source licenses =="
python3 - <<'PY'
text = open("pages/wuhan-2020.tsx", encoding="utf-8").read()
print("has_uniform_all_agpl=", "所有代码和数据遵循 AGPL-3.0" in text)
print("has_source_mentions=", "<i18n>" in text or "GitHub" in text)
PYRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io Length of output: 3657 🌐 Web query:
💡 Result: The wuhan2020/WebApp repository on GitHub is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0) [1]. While other repositories within the wuhan2020 organization, such as the main wuhan2020/wuhan2020 repository, are licensed under the MIT License [2][3], the WebApp repository specifically identifies its license as AGPL-3.0 [1]. Users should always consult the LICENSE file located directly within the specific repository for the most authoritative and current information regarding its legal terms [1]. Citations:
🌐 Web query:
💡 Result: The GitHub repository BlankerL/DXY-COVID-19-Data is licensed under the MIT License [1][2][3]. Authoritative references and secondary documentation, such as the Google Cloud Platform's COVID-19 open data repository, explicitly cite the DXY-COVID-19-Data dataset as being under the MIT license [4]. The repository, which is currently archived [3][5], contains the license information standard to such projects [4]. Additionally, the related repository, DXY-COVID-19-Crawler, also uses the MIT License, which includes a copyright notice for Jiabao Lin [6][7]. Citations:
拆分代码许可与数据许可。
🤖 Prompt for AI AgentsSource: MCP tools |
||
| </p> | ||
| <p className="mb-0"> | ||
| 感谢所有为抗疫做出贡献的志愿者和开源社区成员。🙏 | ||
| </p> | ||
| </div> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </section> | ||
| </> | ||
| ); | ||
| }); | ||
|
|
||
| export default Wuhan2020Page; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 34373
将页面文案改为
t()翻译键。pages/wuhan-2020.tsx仅读取了I18nContext，但没有实际使用t()。categories、techStack、PageHead和 JSX 中的用户可见文案都是硬编码字符串，包含中文、英文、徽章名称、按钮文案、统计文本、aria-label等，需要改为翻译键；纯专有名词（如 GitHub、TypeScript、Apache/AGPL 等）可保留硬编码。🤖 Prompt for AI Agents
Sources: Coding guidelines, Learnings