Function FrontmatterPanel

web/components/FrontmatterPanel.tsx:24–111

({ frontmatter }: FrontmatterPanelProps)

};

export function FrontmatterPanel({ frontmatter }: FrontmatterPanelProps) {
  const locale = getServerLocale();
  const fm = frontmatter;
  const tags = (fm.tags || []) as string[];
  const sources = (fm.sources || []) as string[];

  return (
    <div className="space-y-3 text-sm">
      <Field label={t("fm.field.title", locale)}>
        <span className="font-medium">{fm.title || t("fm.no_title", locale)}</span>
      </Field>
      <Field label={t("fm.field.type", locale)}>
        <Badge variant="outline">
          {tType(fm.type, locale)}
        </Badge>
      </Field>
      <Field label={t("fm.field.status", locale)}>
        <Badge variant={STATUS_VARIANT[fm.status || ""] || "secondary"}>
          {tStatus(fm.status, locale)}
        </Badge>
      </Field>
      <Field label={t("fm.field.confidence", locale)}>
        <Badge variant={CONFIDENCE_VARIANT[fm.confidence || ""] || "secondary"}>
          {tConfidence(fm.confidence, locale)}
        </Badge>
      </Field>
      <Field label={t("fm.field.created_date", locale)}>
        <span className="font-mono text-xs">{fm.created_date || "—"}</span>
      </Field>
      <Field label={t("fm.field.last_modified", locale)}>
        <span className="font-mono text-xs">{fm.last_modified || "—"}</span>
        {fm.last_modified_by && (
          <span className="ml-1 text-xs text-muted-foreground">
            {t("fm.by", locale)} {fm.last_modified_by}
          </span>
        )}
      </Field>
      <Field label={t("fm.field.source_count", locale)}>
        <span className="font-mono text-xs">{fm.source_count ?? 0}</span>
      </Field>
      {tags.length > 0 && (
        <Field label={t("fm.field.tags", locale)}>
          <div className="flex flex-wrap gap-1">
            {tags.map((tg) => (
              <Badge key={tg} variant="secondary" className="text-[10px]">
                {tg}
              </Badge>
            ))}
          </div>
        </Field>
      )}
      {sources.length > 0 && (
        <Field label={t("fm.field.sources", locale)}>
          <ul className="space-y-1 text-xs">
            {sources.map((s, i) => {
              // sources 元素是带 [[]] 包裹的 wikilink 字符串。提取目标后用
              // WikiLink 渲染为可点击链接；解析失败则降级显示原文（避免空白）
              const links = parseWikilinks(s);