UHD_Media_Tool/apps/web/app/components/library/identity-aliases.tsx

import { AliasKind, type TitleAlias } from "@umt/contracts";
import { ExternalLink, Lock, Plus, Trash2 } from "lucide-react";
import { type FormEvent, useEffect, useState } from "react";
import { Link } from "react-router";
import { toast } from "sonner";
import { z } from "zod";
import { useAliases, useCreateAlias, useDeleteAlias } from "~/api/identity.ts";
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
import { FilterBar } from "~/components/console/filter-bar.tsx";
import { FormField, zodFieldErrors } from "~/components/console/form-field.tsx";
import { consolePath } from "~/components/console/nav.ts";
import { Button } from "~/components/ui/button.tsx";
import { Input } from "~/components/ui/input.tsx";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select.tsx";
import { Switch } from "~/components/ui/switch.tsx";
import { errorMessage } from "~/lib/api.ts";
import { EntityPicker, type PickedEntity } from "./identity-entity-picker.tsx";
import { METADATA_SOURCE } from "./labels.ts";
import { Chip, Panel } from "./parts.tsx";

// 别名管理:检索尽量广(原名/译名/简称/站点标题),确认关联仍严格;用户新增的别名 source=user

const ALIAS_KIND: Record<z.infer<typeof AliasKind>, string> = {
  original: "原名",
  translated: "译名",
  short: "简称",
  site_title: "站点标题",
  romanized: "罗马字",
  other: "其他",
};

const AliasForm = z.object({
  alias: z.string().trim().min(1, "填写别名").max(200, "最多 200 字"),
  kind: AliasKind,
  language: z
    .string()
    .trim()
    .max(16, "语言代码过长")
    .regex(/^$|^[a-zA-Z]{2,3}(-[a-zA-Z0-9]{2,8})*$/, "如 zh-CN、en"),
  locked: z.boolean(),
});

function AddAlias({ entity }: { entity: PickedEntity }) {
  const create = useCreateAlias();
  const [f, setF] = useState({ alias: "", kind: "short" as z.infer<typeof AliasKind>, language: "", locked: true });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const submit = async (e: FormEvent) => {
    e.preventDefault();
    const r = AliasForm.safeParse(f);
    if (!r.success) {
      setErrors(zodFieldErrors(r.error.issues));
      return;
    }
    setErrors({});
    try {
      await create.mutateAsync({
        mediaEntityId: entity.id,
        alias: r.data.alias,
        kind: r.data.kind,
        language: r.data.language || null,
        locked: r.data.locked,
        source: "user",
      });
      toast.success(`已为「${entity.title}」添加别名`);
      setF((x) => ({ ...x, alias: "" }));
    } catch (err) {
      toast.error(errorMessage(err));
    }
  };
  return (
    <form
      onSubmit={submit}
      noValidate
      className="grid gap-2 border-t border-border/60 pt-3 sm:grid-cols-[1fr_9rem_7rem_auto_auto] sm:items-start"
    >
      <FormField label="新别名" htmlFor="alias-new" error={errors.alias}>
        <Input
          id="alias-new"
          value={f.alias}
          aria-invalid={!!errors.alias}
          onChange={(e) => setF((x) => ({ ...x, alias: e.target.value }))}
          placeholder="如：沙丘 2"
        />
      </FormField>
      <FormField label="类型" htmlFor="alias-kind">
        <Select value={f.kind} onValueChange={(v) => setF((x) => ({ ...x, kind: v as typeof f.kind }))}>
          <SelectTrigger id="alias-kind" className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            {(Object.keys(ALIAS_KIND) as (keyof typeof ALIAS_KIND)[]).map((k) => (
              <SelectItem key={k} value={k}>
                {ALIAS_KIND[k]}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </FormField>
      <FormField label="语言" htmlFor="alias-lang" error={errors.language}>
        <Input
          id="alias-lang"
          value={f.language}
          aria-invalid={!!errors.language}
          onChange={(e) => setF((x) => ({ ...x, language: e.target.value }))}
          placeholder="zh-CN"
        />
      </FormField>
      <FormField label="锁定" htmlFor="alias-lock" hint="自动刷新不删">
        <div className="flex h-9 items-center">
          <Switch id="alias-lock" checked={f.locked} onCheckedChange={(v) => setF((x) => ({ ...x, locked: v }))} />
        </div>
      </FormField>
      <Button type="submit" className="sm:mt-6" disabled={create.isPending}>
        <Plus />
        添加
      </Button>
    </form>
  );
}

export function AliasesPanel() {
  const [entity, setEntity] = useState<PickedEntity | null>(null);
  const [q, setQ] = useState("");
  const [dq, setDq] = useState("");
  useEffect(() => {
    const t = setTimeout(() => setDq(q.trim()), 250);
    return () => clearTimeout(t);
  }, [q]);
  const list = useAliases({ mediaEntityId: entity?.id, q: dq || undefined });
  const del = useDeleteAlias();
  const rows = list.data?.pages.flatMap((p) => p.items);

  const columns: DataColumn<TitleAlias>[] = [
    {
      key: "alias",
      header: "别名",
      cell: (a) => (
        <span className="inline-flex items-center gap-1.5 break-all text-foreground">
          {a.locked ? <Lock className="h-3 w-3 shrink-0 text-muted-foreground" aria-label="已锁定" /> : null}
          {a.alias}
        </span>
      ),
    },
    { key: "kind", header: "类型", cell: (a) => <Chip>{ALIAS_KIND[a.kind]}</Chip> },
    { key: "lang", header: "语言", hideBelow: "md", cell: (a) => a.language ?? "—" },
    { key: "source", header: "来源", hideBelow: "sm", cell: (a) => METADATA_SOURCE[a.source] ?? a.source },
    {
      key: "entity",
      header: "作品",
      hideBelow: "md",
      cell: (a) => (
        <Link
          to={consolePath("library", a.mediaEntityId)}
          className="inline-flex min-w-0 items-center gap-1 text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
        >
          <span className="truncate">{a.mediaEntityTitle ?? "查看"}</span>
          <ExternalLink className="h-3 w-3 shrink-0" />
        </Link>
      ),
    },
    {
      key: "act",
      header: <span className="sr-only">操作</span>,
      align: "right",
      cell: (a) => (
        <ConfirmDialog
          trigger={
            <Button variant="ghost" size="icon-sm" aria-label={`删除别名 ${a.alias}`}>
              <Trash2 />
            </Button>
          }
          title={`删除别名「${a.alias}」？`}
          description="删除后不再用这个别名匹配作品，已确认的外部身份不受影响。"
          confirmLabel="删除"
          destructive
          onConfirm={async () => {
            try {
              await del.mutateAsync(a.id);
              toast.success("别名已删除");
            } catch (err) {
              toast.error(errorMessage(err));
              throw err;
            }
          }}
        />
      ),
    },
  ];

  return (
    <div className="space-y-4">
      <Panel title="按作品管理" description="选中作品后可添加别名" bodyClassName="space-y-3">
        <div className="grid gap-3 sm:grid-cols-2">
          <EntityPicker value={entity} onChange={setEntity} />
          <FilterBar search={{ value: q, onChange: setQ, placeholder: "按别名关键字过滤" }} className="mb-0" />
        </div>
        {entity ? <AddAlias key={entity.id} entity={entity} /> : null}
      </Panel>
      <DataTable
        columns={columns}
        rows={rows}
        rowKey={(a) => a.id}
        loading={list.isPending}
        error={list.error}
        onRetry={() => list.refetch()}
        empty={{
          title: entity ? `「${entity.title}」还没有别名` : "没有匹配的别名",
          description: "别名用于按原始标题、译名、简称匹配作品。",
        }}
        hasMore={list.hasNextPage}
        onLoadMore={() => list.fetchNextPage()}
        loadingMore={list.isFetchingNextPage}
      />
    </div>
  );
}