- );
-}
-
-function ReportCarousel({ reports }) {
- const scrollerRef = useRef(null);
-
- const scrollBy = (dir) => {
- const el = scrollerRef.current;
- if (!el) return;
- el.scrollBy({ left: dir * 320, behavior: "smooth" });
- };
-
- const onDownload = (item) => {
- if (!item.file_path || item.file_path === "#") return;
- window.open(item.file_path, "_blank");
- };
-
- return (
-
-
-
-
-
- {reports.map((item) => (
-
);
}
diff --git a/src/pages/public/JoinCommitteePage.jsx b/src/pages/public/JoinCommitteePage.jsx
new file mode 100644
index 0000000..b2b7386
--- /dev/null
+++ b/src/pages/public/JoinCommitteePage.jsx
@@ -0,0 +1,139 @@
+import { Link } from "react-router-dom";
+import SiteHero from "@/components/site/SiteHero";
+
+const SECTIONS = [
+ {
+ title: "Why join a STAR committee?",
+ body: "Committees help shape evaluation priorities, review methodology updates, and strengthen the credibility of guideline appraisal. Placeholder content for redesign preview.",
+ quote:
+ "Working with STAR committees is a unique opportunity to improve how guidelines are assessed and applied.",
+ },
+ {
+ title: "What you will do",
+ bullets: [
+ "Review draft reports and methodological proposals",
+ "Participate in scheduled virtual meetings",
+ "Advise on dissemination and stakeholder engagement",
+ ],
+ quote:
+ "Your expertise helps keep STAR transparent, rigorous, and useful for decision makers.",
+ },
+ {
+ title: "How to apply",
+ body: "Submit a short expression of interest with your background and preferred committee. Placeholder application instructions for redesign preview. For questions, please contact the STAR office.",
+ },
+];
+
+function QuoteBox({ text }) {
+ return (
+
+ );
+}
+
+export default function JoinCommitteePage() {
+ return (
+
+ {/* Hero + 悬浮介绍卡：absolute 贴 Hero 底边再下移，避开 Layout flex 对负 margin 的影响 */}
+
+
+
+
+
+
+ Join a committee
+
+
+ Help STAR improve guideline evaluation through advisory
+ participation. Placeholder intro for the redesign mock.
+
+
+ View our latest vacancies
+
+
+
+
+
+
+ {/* 给探出卡片留出高度，避免正文顶上来 */}
+
+ {SECTIONS.map((section) => (
+
+ {section.quote ? (
+
+
+
+ {section.title}
+
+ {section.body && (
+
+ {section.body}
+
+ )}
+ {section.bullets && (
+
+ {section.bullets.map((b) => (
+ - {b}
+ ))}
+
+ )}
+
+
+
+
+ {section.title}
+
+
+ {section.body}
+
+
+ Contact us >>
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/public/NewsListPage.jsx b/src/pages/public/NewsListPage.jsx
index 7f3d52e..0e624bf 100644
--- a/src/pages/public/NewsListPage.jsx
+++ b/src/pages/public/NewsListPage.jsx
@@ -1,50 +1,218 @@
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import SectionTitle from "@/components/site/SectionTitle";
+import SiteHero from "@/components/site/SiteHero";
+import {
+ HexPatternBg,
+ PlaceholderMedia,
+} from "@/components/site/PlaceholderMedia";
+import { INTL } from "@/config/intlAssets";
import { contentApi } from "@/services";
+/** 后端不可用时的演示数据，避免整页空白 */
+const FALLBACK_NEWS = [
+ {
+ id: "demo-1",
+ title: "STAR releases updated rating guidelines report",
+ summary:
+ "The latest rating guidelines report summarizes appraisal findings and methodology updates for clinical practice guidelines.",
+ publication_time: "2025-01-12",
+ },
+ {
+ id: "demo-2",
+ title: "International collaboration advances trustworthy guideline appraisal",
+ summary:
+ "Partners from multiple institutions join STAR workshops to strengthen transparent and applicable guideline evaluation.",
+ publication_time: "2025-01-08",
+ },
+ {
+ id: "demo-3",
+ title: "AI-assisted assessment system enters pilot phase",
+ summary:
+ "STAR begins a pilot of its AI-driven assessment workflow to support faster and more consistent guideline reviews.",
+ publication_time: "2024-12-20",
+ },
+ {
+ id: "demo-4",
+ title: "Call for advisory committee members now open",
+ summary:
+ "Experts are invited to join STAR advisory committees and contribute to ongoing methodology development.",
+ publication_time: "2024-12-05",
+ },
+ {
+ id: "demo-5",
+ title: "New research publications added to the STAR resource center",
+ summary:
+ "Recent publications on multi-dimensional evaluation methods are now available in the research section.",
+ publication_time: "2024-11-18",
+ },
+ {
+ id: "demo-6",
+ title: "STAR training workshop announced for spring",
+ summary:
+ "Registration will open soon for the upcoming training and development opportunities focused on guideline appraisal.",
+ publication_time: "2024-11-02",
+ },
+];
+
+function formatCardDate(value) {
+ const s = String(value || "2025-01-12").slice(0, 10);
+ const [y, m, d] = s.split("-");
+ return { top: `${m || "01"}-${d || "12"}`, year: y || "2025", full: s };
+}
+
+/** 列表接口无 summary 字段时，从 content 抽一段纯文本摘要 */
+function newsSummary(item) {
+ if (item.summary) return item.summary;
+ if (item.abstract) return item.abstract;
+ if (!item.content) return "";
+ return String(item.content)
+ .replace(/<[^>]+>/g, " ")
+ .replace(/\s+/g, " ")
+ .trim()
+ .slice(0, 160);
+}
+
export default function NewsListPage() {
- const { t } = useTranslation();
- const [loading, setLoading] = useState(true);
- const [list, setList] = useState([]);
+ const [list, setList] = useState(FALLBACK_NEWS);
+ const [fromApi, setFromApi] = useState(false);
useEffect(() => {
let alive = true;
+ const controller = new AbortController();
+ const timer = setTimeout(() => controller.abort(), 4000);
+
contentApi
.listNews({ limit: 50 })
- .then((res) => alive && setList(res.results || []))
- .finally(() => alive && setLoading(false));
+ .then((res) => {
+ if (!alive) return;
+ const rows = res?.results || [];
+ if (rows.length) {
+ setList(rows);
+ setFromApi(true);
+ }
+ })
+ .catch(() => {
+ /* 保持演示数据 */
+ })
+ .finally(() => {
+ clearTimeout(timer);
+ });
+
return () => {
alive = false;
+ clearTimeout(timer);
+ controller.abort();
};
}, []);
+ const featured = list.slice(0, 3);
+ const rest = list.slice(3);
+
return (
-
-
-
- {loading && (
- - {t("common.loading")}
- )}
- {!loading &&
- list.map((item) => (
- -
-
-
- {String(item.publication_time || "").slice(0, 10)}
-
- {item.title}
-
-
- ))}
- {!loading && !list.length && (
- - {t("news.empty")}
- )}
-
+
+
+
+
+
+ {!fromApi && (
+
+ Showing preview content (API unavailable)
+
+ )}
+
+ {/* 精选三卡：不再等 loading，避免后端超时导致整页空白 */}
+
+ {featured.map((item) => {
+ const date = formatCardDate(item.publication_time);
+ const summary =
+ newsSummary(item) ||
+ "Brief summary placeholder for the news card layout.";
+ const to = String(item.id).startsWith("demo-")
+ ? "/newsList"
+ : `/newsDetail?id=${item.id}`;
+ return (
+
+ {item.cover || item.image_url ? (
+ 
+ ) : (
+
+ )}
+
+
+
+ {date.top}
+
+
{date.year}
+
+
+
+ {item.title}
+
+
+ {summary}
+
+
+ more
+
+
+
+
+ );
+ })}
+
+
+
+ {(rest.length ? rest : list).map((item) => {
+ const date = formatCardDate(item.publication_time);
+ const summary =
+ newsSummary(item) ||
+ "Brief description snippet for the news list row.";
+ const to = String(item.id).startsWith("demo-")
+ ? "/newsList"
+ : `/newsDetail?id=${item.id}`;
+ return (
+ -
+
+
+ {date.full}
+
+
+
+ {item.title}
+
+
+ {summary}
+
+
+
+ more
+
+
+
+
+ );
+ })}
+
+
);
}
diff --git a/src/pages/public/PeoplePage.jsx b/src/pages/public/PeoplePage.jsx
new file mode 100644
index 0000000..24ff1e1
--- /dev/null
+++ b/src/pages/public/PeoplePage.jsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import SiteHero from "@/components/site/SiteHero";
+import {
+ HexPatternBg,
+ PlaceholderMedia,
+} from "@/components/site/PlaceholderMedia";
+import { INTL } from "@/config/intlAssets";
+import { contentApi } from "@/services";
+
+const FALLBACK_MEMBERS = [
+ { id: 1, name: "Gordon Guyatt", org: "McMaster University, Canada" },
+ { id: 2, name: "Gordon Guyatt", org: "McMaster University, Canada" },
+ { id: 3, name: "Gordon Guyatt", org: "McMaster University, Canada" },
+ { id: 4, name: "Gordon Guyatt", org: "McMaster University, Canada" },
+];
+
+export default function PeoplePage() {
+ const [members, setMembers] = useState(FALLBACK_MEMBERS);
+
+ useEffect(() => {
+ let alive = true;
+ contentApi
+ .listProfessors({ limit: 8 })
+ .then((res) => {
+ if (!alive) return;
+ const list = res?.results || [];
+ if (list.length) {
+ setMembers(
+ list.slice(0, 4).map((p) => ({
+ id: p.id,
+ name: p.name || p.name_en || "Member",
+ org: p.organization_name || p.title || "Affiliation",
+ logo: p.logo,
+ })),
+ );
+ }
+ })
+ .catch(() => {});
+ return () => {
+ alive = false;
+ };
+ }, []);
+
+ return (
+
+
+
+
+ {/* Mission & Vision */}
+
+ 
+
+
+ — Mission
+
+
+ Promote trustworthy, transparent, and applicable clinical practice
+ guidelines through rigorous evaluation and open collaboration.
+ Placeholder mission text for redesign preview.
+
+
+ — Vision
+
+
+ A world where guideline users can quickly identify recommendations
+ worth applying. Placeholder vision text for redesign preview.
+
+
+ Advisory Committees
+
+
+ {members.map((m) => (
+
+ {m.logo ? (
+ 
+ ) : (
+
+ )}
+
+ {m.name}
+
+ {m.org}
+
+ ))}
+
+
+ View team members
+
+
+
+
+ );
+}
diff --git a/src/pages/public/ResearchPage.jsx b/src/pages/public/ResearchPage.jsx
new file mode 100644
index 0000000..aaa7bf9
--- /dev/null
+++ b/src/pages/public/ResearchPage.jsx
@@ -0,0 +1,141 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import SiteHero from "@/components/site/SiteHero";
+import { HexPatternBg } from "@/components/site/PlaceholderMedia";
+import { INTL } from "@/config/intlAssets";
+import { contentApi } from "@/services";
+
+const FALLBACK_REPORTS = Array.from({ length: 10 }).map((_, i) => ({
+ id: `r-${i}`,
+ date: "01/01",
+ title: "report name report name report name",
+}));
+
+const FALLBACK_PUBLICATIONS = Array.from({ length: 10 }).map((_, i) => ({
+ id: `p-${i}`,
+ date: "01/01",
+ title: "report name report name report name",
+}));
+
+function formatShortDate(value) {
+ if (!value) return "01/01";
+ const s = String(value).slice(0, 10);
+ const parts = s.split("-");
+ if (parts.length >= 3) return `${parts[1]}/${parts[2]}`;
+ return s;
+}
+
+function ListCard({ title, items, moreTo }) {
+ return (
+
+
+
+ {title}
+
+
+ more
+
+
+
+
+ {items.map((item, idx) => (
+ -
+
+ • {item.date}
+ {item.title}
+
+
+
+ ))}
+
+
+ );
+}
+
+export default function ResearchPage() {
+ const [reports, setReports] = useState(FALLBACK_REPORTS);
+ const [publications, setPublications] = useState(FALLBACK_PUBLICATIONS);
+
+ useEffect(() => {
+ let alive = true;
+ (async () => {
+ try {
+ const [reportRes, pubRes] = await Promise.all([
+ contentApi.listReports({ limit: 12 }),
+ contentApi.listPublications({ limit: 12 }),
+ ]);
+ if (!alive) return;
+ const r = reportRes?.results || [];
+ const p = pubRes?.results || [];
+ if (r.length) {
+ setReports(
+ r.map((item) => ({
+ id: item.id,
+ date: formatShortDate(
+ item.year ? `${item.year}-01-01` : item.updated_at,
+ ),
+ title: item.name || item.title || "Report",
+ to:
+ item.file_path && item.file_path !== "#"
+ ? item.file_path
+ : "/research",
+ })),
+ );
+ }
+ if (p.length) {
+ setPublications(
+ p.map((item) => ({
+ id: item.id,
+ date: formatShortDate(item.publication_time),
+ title: item.title || "Publication",
+ to: `/publicationDetail?id=${item.id}`,
+ })),
+ );
+ }
+ } catch {
+ /* 使用占位列表 */
+ }
+ })();
+ return () => {
+ alive = false;
+ };
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/src/router.jsx b/src/router.jsx
index 61cf9c0..0a29b74 100644
--- a/src/router.jsx
+++ b/src/router.jsx
@@ -4,6 +4,10 @@ import PublicLayout from "@/layouts/PublicLayout";
import AdminLayout from "@/layouts/AdminLayout";
import RouteErrorPage from "@/pages/RouteErrorPage";
import HomePage from "@/pages/public/HomePage";
+import PeoplePage from "@/pages/public/PeoplePage";
+import ResearchPage from "@/pages/public/ResearchPage";
+import CooperationPage from "@/pages/public/CooperationPage";
+import JoinCommitteePage from "@/pages/public/JoinCommitteePage";
import ArticleListPage from "@/pages/public/ArticleListPage";
import ArticleDetailPage from "@/pages/public/ArticleDetailPage";
import RankingPage from "@/pages/public/RankingPage";
@@ -67,6 +71,10 @@ const router = createBrowserRouter([
children: [
{ index: true, element:
},
{ path: "index", element:
},
+ { path: "people", element:
},
+ { path: "research", element:
},
+ { path: "cooperation", element:
},
+ { path: "cooperation/join", element:
},
{ path: "guidelineAndConsensus", element:
},
{ path: "fingerpostDetail", element:
},
{ path: "guideRanking", element:
},
diff --git a/tailwind.config.js b/tailwind.config.js
index 0c2c4bf..087fc00 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,11 @@ export default {
extend: {
colors: {
star: {
- primary: "#181b62",
- topbar: "#1d2b40",
- bg: "#f6f8fc",
+ primary: "#0b1a3d",
+ accent: "#3a61c2",
+ topbar: "#0b1a3d",
+ bg: "#f4f7fc",
+ soft: "#e8f1ff",
},
},
maxWidth: {
+
+ );
}
export default function PublicLayout() {
@@ -68,34 +86,9 @@ export default function PublicLayout() {
const dispatch = useDispatch();
const memberToken = useSelector((s) => s.member?.token);
const memberProfile = useSelector((s) => s.member?.profile);
- const [keyword, setKeyword] = useState("");
- const [openMenu, setOpenMenu] = useState(null);
const [mobileOpen, setMobileOpen] = useState(false);
- const [columns, setColumns] = useState(null);
- const navRef = useRef(null);
- const itemRefs = useRef(new Map());
- const [indicator, setIndicator] = useState({
- left: 0,
- width: 0,
- visible: false,
- });
- const [indicatorReady, setIndicatorReady] = useState(false);
-
- useEffect(() => {
- let alive = true;
- contentApi
- .listColumns({ limit: 200 })
- .then((res) => {
- if (!alive) return;
- setColumns(res.results || []);
- })
- .catch(() => {
- if (alive) setColumns([]);
- });
- return () => {
- alive = false;
- };
- }, []);
+ const [openMenu, setOpenMenu] = useState(null);
+ const [settingsOpen, setSettingsOpen] = useState(false);
useEffect(() => {
if (memberToken && !memberProfile) {
@@ -103,249 +96,57 @@ export default function PublicLayout() {
}
}, [memberToken, memberProfile, dispatch]);
- const topNav = useMemo(() => {
- if (!columns) return fallbackTopNav(t);
- const tree = buildColumnNavTree(columns, 1);
- return tree.length ? tree : fallbackTopNav(t);
- }, [columns, t]);
-
- const footerNav = useMemo(() => {
- if (!columns) return fallbackFooterNav(t);
- const tree = buildColumnNavTree(columns, 3);
- return tree.length ? tree : fallbackFooterNav(t);
- }, [columns, t]);
-
- const hotWords = useMemo(
- () =>
- i18n.language === "zh"
- ? ["影像", "指南", "共识"]
- : ["imaging", "guideline", "consensus"],
- [i18n.language],
- );
-
- const onSearch = () => {
- const q = keyword.trim();
- if (q) navigate(`/search?q=${encodeURIComponent(q)}`);
- };
-
- const isItemActive = (item) => {
- if (
- item.children?.some((c) =>
- navActive(location.pathname, location.search, c.to),
- )
- ) {
- return true;
- }
- return navActive(location.pathname, location.search, item.to);
- };
-
- const activeNavId = useMemo(() => {
- const active = topNav.find((item) => isItemActive(item));
- return active?.id ?? null;
- }, [topNav, location.pathname, location.search]);
-
- const setItemRef = (id) => (el) => {
- if (el) itemRefs.current.set(id, el);
- else itemRefs.current.delete(id);
- };
-
- const updateIndicator = useCallback(() => {
- const navEl = navRef.current;
- if (!navEl || activeNavId == null) {
- setIndicator((prev) => ({ ...prev, width: 0, visible: false }));
- return;
- }
- const el = itemRefs.current.get(activeNavId);
- if (!el) {
- setIndicator((prev) => ({ ...prev, width: 0, visible: false }));
- return;
- }
- const navRect = navEl.getBoundingClientRect();
- const rect = el.getBoundingClientRect();
- const inset = 10;
- setIndicator({
- left: rect.left - navRect.left + inset,
- width: Math.max(0, rect.width - inset * 2),
- visible: true,
- });
- setIndicatorReady(true);
- }, [activeNavId]);
-
- useLayoutEffect(() => {
- updateIndicator();
- }, [updateIndicator, topNav, i18n.language]);
-
useEffect(() => {
- const onResize = () => updateIndicator();
- window.addEventListener("resize", onResize);
- return () => window.removeEventListener("resize", onResize);
- }, [updateIndicator]);
+ setMobileOpen(false);
+ setOpenMenu(null);
+ setSettingsOpen(false);
+ }, [location.pathname, location.search]);
- // 桌面主导航（指示条由共享元素滑动，不在单项上画）
- const linkClass = (active) =>
- cn(
- "inline-flex h-10 items-center px-5 text-base no-underline transition-colors",
- "text-(--star-primary) hover:bg-(--star-nav-hover)",
- active ? "font-bold" : "font-semibold",
- );
-
- // 移动端一级项：左侧指示条
- const mobileLinkClass = (active) =>
- cn(
- "relative flex h-10 items-center px-5 text-base no-underline transition-colors",
- "text-(--star-primary)",
- active
- ? "bg-(--star-nav-hover) font-bold before:absolute before:top-2 before:bottom-2 before:left-0 before:w-0.5 before:rounded-full before:bg-(--star-nav-active-bar)"
- : "font-semibold hover:bg-(--star-nav-hover)",
- );
-
- const dropdownItemClass = (active) =>
- cn(
- "relative block px-5 py-2.5 text-base no-underline transition-colors",
- active
- ? "bg-(--star-nav-hover) font-bold text-(--star-primary) before:absolute before:top-1.5 before:bottom-1.5 before:left-0 before:w-0.5 before:rounded-full before:bg-(--star-nav-active-bar)"
- : "font-medium text-[#333] hover:bg-(--star-nav-dropdown-hover) hover:text-(--star-primary)",
- );
+ const topNav = useMemo(() => INTL_TOP_NAV, []);
return (