UHD_Media_Tool/apps/web/app/routes/console/settings.tsx

import { settingsSectionForLegacyTab } from "@umt/contracts";
import { useEffect } from "react";
import { Link, redirect, useLocation, useNavigate } from "react-router";
import { PageHeader } from "~/components/console/page-header.tsx";
import { parseSettingsHash, SECTION_GROUPS, settingsHash } from "~/components/settings/sections.tsx";
import { anchorId } from "~/components/settings/settings-block.tsx";
import { SettingsSearch } from "~/components/settings/settings-search.tsx";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select.tsx";
import { cn } from "~/lib/utils.ts";

export const meta = () => [{ title: "设置 · UHD 媒体自动化控制台" }];

/** 旧链接 `?tab=xxx` → `#分区[/节]`(console-ia.md §3.3) */
export function clientLoader({ request }: { request: Request }) {
  const url = new URL(request.url);
  const tab = url.searchParams.get("tab");
  if (!tab) return null;
  const hit = settingsSectionForLegacyTab(tab);
  url.searchParams.delete("tab");
  const rest = url.searchParams.toString();
  return redirect(`${url.pathname}${rest ? `?${rest}` : ""}${hit ? settingsHash(hit.section, hit.anchor) : ""}`);
}

/** 搜索选中字段时经 location.state 带过来,对齐到节后聚焦这个字段 */
type NavState = { field?: string } | null;

export default function SettingsPage() {
  const location = useLocation();
  const navigate = useNavigate();
  const { section, anchor, moved } = parseSettingsHash(location.hash);
  const field = (location.state as NavState)?.field ?? null;

  // 旧锚点(重排前的 #automation/cache 等)换成新位置,不留历史记录
  useEffect(() => {
    if (moved) navigate({ hash: settingsHash(section.id, anchor) }, { replace: true, state: location.state });
  }, [moved, section.id, anchor, navigate, location.state]);

  // 切分区回到顶部;带节锚点时对齐到该节(有字段时对齐到字段并聚焦)。节内容多是异步加载的(上游列表、能力清单),
  // 上方内容变高会把目标挤下去,所以在 2.5 秒内反复校正,直到用户自己滚动为止。
  // biome-ignore lint/correctness/useExhaustiveDependencies: location.key 让重复点同一锚点也能再跳一次
  useEffect(() => {
    if (moved) return;
    if (!anchor) {
      window.scrollTo({ top: 0 });
      return;
    }
    const started = performance.now();
    let stopped = false;
    let focused = false;
    let timer = 0;
    const stop = () => {
      stopped = true;
    };
    const events = ["wheel", "touchstart", "keydown", "pointerdown"] as const;
    for (const e of events) window.addEventListener(e, stop, { passive: true });
    const align = () => {
      if (stopped) return;
      const fieldEl = field ? document.getElementById(`f-${field}`) : null;
      if (fieldEl) {
        const r = fieldEl.getBoundingClientRect();
        if (r.top < 80 || r.bottom > window.innerHeight - 40) fieldEl.scrollIntoView({ block: "center" });
        if (!focused) {
          focused = true;
          fieldEl.focus({ preventScroll: true });
        }
      } else {
        const el = document.getElementById(anchorId(section.id, anchor));
        if (el) {
          const margin = Number.parseFloat(getComputedStyle(el).scrollMarginTop) || 0;
          if (Math.abs(el.getBoundingClientRect().top - margin) > 2) el.scrollIntoView({ block: "start" });
        }
      }
      if (performance.now() - started < 2500) timer = window.setTimeout(align, 120);
    };
    timer = window.setTimeout(align, 0);
    return () => {
      window.clearTimeout(timer);
      for (const e of events) window.removeEventListener(e, stop);
    };
  }, [section.id, anchor, field, moved, location.key]);

  return (
    <>
      <PageHeader title="设置" description="按接入对象和业务环节分组。密钥保存后不再显示。" />
      <div className="grid gap-6 lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-8">
        {/* 窄屏:搜索 + 分区下拉 + 节横排 */}
        <div className="grid gap-3 lg:hidden">
          <SettingsSearch />
          <Select value={section.id} onValueChange={(id) => navigate({ hash: settingsHash(id) })}>
            <SelectTrigger className="w-full" aria-label="设置分区">
              <SelectValue />
            </SelectTrigger>
            <SelectContent position="popper">
              {SECTION_GROUPS.map((g) => (
                <SelectGroup key={g.id}>
                  <SelectLabel>{g.label}</SelectLabel>
                  {g.sections.map((s) => (
                    <SelectItem key={s.id} value={s.id}>
                      <s.icon />
                      {s.label}
                    </SelectItem>
                  ))}
                </SelectGroup>
              ))}
            </SelectContent>
          </Select>
          <p className="text-caption text-muted-foreground">{section.description}</p>
          {section.anchors.length > 1 ? (
            <nav aria-label="本分区的节" className="scroll-bleed -mx-1 overflow-x-auto px-1 pb-1">
              <ul className="flex w-max gap-1.5">
                {section.anchors.map((a) => (
                  <li key={a.id}>
                    <Link
                      to={{ hash: settingsHash(section.id, a.id) }}
                      className={cn(
                        "block rounded-full border px-3 py-1 text-caption whitespace-nowrap transition-colors duration-micro",
                        anchor === a.id
                          ? "pill-selected text-foreground"
                          : "border-border/70 text-muted-foreground hover:text-foreground",
                      )}
                    >
                      {a.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </nav>
          ) : null}
        </div>

        {/* 宽屏:搜索 + 左侧分组导航 */}
        <div className="hidden lg:block">
          <div className="sticky top-20 grid max-h-[calc(100dvh-6rem)] gap-3 overflow-y-auto pb-2">
            <SettingsSearch />
            <nav aria-label="设置分区" className="grid gap-4">
              {SECTION_GROUPS.map((g) => (
                <div key={g.id}>
                  <p className="mb-1 px-3 text-micro font-semibold tracking-[0.15em] text-muted-foreground uppercase">
                    {g.label}
                  </p>
                  <ul className="grid gap-0.5">
                    {g.sections.map((s) => {
                      const active = s.id === section.id;
                      return (
                        <li key={s.id}>
                          <Link
                            to={{ hash: settingsHash(s.id) }}
                            aria-current={active ? "page" : undefined}
                            className={cn(
                              "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors duration-micro",
                              active
                                ? "bg-foreground/[0.07] font-medium text-foreground"
                                : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
                            )}
                          >
                            <s.icon className="size-4 shrink-0" aria-hidden />
                            {s.label}
                          </Link>
                          {active && s.anchors.length > 1 ? (
                            <ul className="mt-0.5 mb-1.5 ml-[1.375rem] grid gap-0.5 border-l border-border/60 pl-3">
                              {s.anchors.map((a) => (
                                <li key={a.id}>
                                  <Link
                                    to={{ hash: settingsHash(s.id, a.id) }}
                                    className={cn(
                                      "block rounded-md px-2 py-1 text-caption transition-colors duration-micro hover:text-foreground",
                                      anchor === a.id ? "text-foreground" : "text-muted-foreground",
                                    )}
                                  >
                                    {a.label}
                                  </Link>
                                </li>
                              ))}
                            </ul>
                          ) : null}
                        </li>
                      );
                    })}
                  </ul>
                </div>
              ))}
            </nav>
          </div>
        </div>

        <div className="min-w-0">
          {/* 分区页头:标题 + 一句说明;窄屏由上方下拉承担,标题只留给读屏 */}
          <div className="lg:mb-8">
            <h2 className="sr-only text-title font-semibold text-foreground lg:not-sr-only">{section.label}</h2>
            <p className="mt-1 hidden text-caption text-muted-foreground lg:block">{section.description}</p>
          </div>
          <div key={section.id} className="grid grid-cols-1 gap-8">
            {section.render()}
          </div>
        </div>
      </div>
    </>
  );
}