Add ops membership list and official source links

frontend/components/dashboard/Dashboard.module.css

@@ -2260,6 +2260,58 @@
   padding: 12px;
 }
 
+.root :global(.detail-source-list) {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.root :global(.detail-source-note) {
+  margin: 8px 0 12px;
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.root :global(.detail-source-link) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--border-subtle);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-main);
+  text-decoration: none;
+  transition:
+    background 0.18s ease,
+    border-color 0.18s ease,
+    transform 0.18s ease;
+}
+
+.root :global(.detail-source-link:hover) {
+  background: rgba(34, 211, 238, 0.08);
+  border-color: rgba(34, 211, 238, 0.28);
+  transform: translateY(-1px);
+}
+
+.root :global(.detail-source-kind) {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--accent-cyan);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.root :global(.detail-source-label) {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-main);
+  text-align: right;
+}
+
 .root :global(.detail-label) {
   display: block;
   color: var(--text-muted);

frontend/components/dashboard/DetailPanel.tsx

@@ -7,6 +7,7 @@ import { ForecastTable } from "@/components/dashboard/PanelSections";
 import { useChart } from "@/hooks/useChart";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
+import { getOfficialSourceLinks } from "@/lib/dashboard-official-sources";
 import { getCityScenery } from "@/lib/dashboard-scenery";
 import { CityDetail } from "@/lib/dashboard-types";
 import {
@@ -147,6 +148,10 @@ export function DetailPanel() {
     () => (detail ? getCityProfileStats(detail, locale) : []),
     [detail, locale],
   );
+  const officialLinks = useMemo(
+    () => (detail ? getOfficialSourceLinks(detail) : []),
+    [detail],
+  );
   const scenery = getCityScenery(detail?.name);
   const blurActiveElement = () => {
     if (typeof document === "undefined") return;
@@ -336,6 +341,33 @@ export function DetailPanel() {
               </div>
             </section>
 
+            {officialLinks.length > 0 ? (
+              <section className="detail-section">
+                <h3>{locale === "en-US" ? "Official Sources" : "官方参考"}</h3>
+                <p className="detail-source-note">
+                  {locale === "en-US"
+                    ? "AGENCY = national meteorological service, METAR = airport observation, AIRPORT = airport official page."
+                    : "AGENCY = 国家气象机构，METAR = 机场实测报文，AIRPORT = 机场官网页面。"}
+                </p>
+                <div className="detail-source-list">
+                  {officialLinks.map((link) => (
+                    <a
+                      key={`${link.label}-${link.href}`}
+                      className="detail-source-link"
+                      href={link.href}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <span className="detail-source-kind">
+                        {link.kind.toUpperCase()}
+                      </span>
+                      <span className="detail-source-label">{link.label}</span>
+                    </a>
+                  ))}
+                </div>
+              </section>
+            ) : null}
+
             <section className="detail-section rounded-2xl">
               <h3>{t("detail.todayMiniTrend")}</h3>
               {heavyContentReady ? (