feat(web): subscription calendar view, reset action and quality preset fields

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-28 20:14:40 +08:00
1 parent 70d56645fe
commit 05350460f0
@@ -7,6 +7,7 @@ import {
  Subscription,
  type SubscriptionBatch,
  SubscriptionBatchResult,
+  SubscriptionCalendar,
  SubscriptionCoverage,
  type SubscriptionCreate,
  type SubscriptionGroup,
@@ -14,6 +15,7 @@ import {
  type SubscriptionOrigin,
  SubscriptionOverviewPage,
  SubscriptionProgress,
+  SubscriptionResetResult,
  type SubscriptionSort,
  type SubscriptionStatus,
  type SubscriptionUpdate,
@@ -30,6 +32,8 @@ export const subscriptionKeys = {
  overview: (f: OverviewFilters) => ["subscriptions", "overview", f] as const,
  detail: (id: string) => ["subscriptions", "detail", id] as const,
  coverage: (id: string) => ["subscriptions", "coverage", id] as const,
+  calendar: (from: string, to: string, kind?: SubscriptionMediaKind) =>
+    ["subscriptions", "calendar", from, to, kind ?? ""] as const,
 };

 export type SubscriptionFilters = {
@@ -254,6 +258,28 @@ export function useSetSlotOrder() {
  });
 }

+/** 重置进度:取消未提交/下载已不在的计划,清延后,重评;仍在下载的保留,不删资产 */
+export function useResetSubscription() {
+  const done = useInvalidateSubs();
+  return useMutation({
+    mutationFn: (id: string) =>
+      api
+        .post<unknown>(`/subscriptions/${id}/reset`)
+        .then((d) => parseOrThrow(SubscriptionResetResult, d, "/subscriptions/reset")),
+    onSuccess: done,
+  });
+}
+
+/** 日历:from / to 为 YYYY-MM-DD,跨度不超过 62 天 */
+export function useSubscriptionCalendar(from: string, to: string, mediaKind?: SubscriptionMediaKind) {
+  return useQuery({
+    queryKey: subscriptionKeys.calendar(from, to, mediaKind),
+    queryFn: ({ signal }) =>
+      getParsed(SubscriptionCalendar, "/subscriptions/calendar", { from, to, mediaKind }, signal),
+    placeholderData: keepPreviousData,
+  });
+}
+
 /** 409 重复订阅:消息里带已有订阅 id */
 export function duplicateSubscriptionId(message: string): string | null {
  const m = /已有订阅[::]\s*([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/i.exec(message);
@@ -1,10 +1,11 @@
 import type { Subscription } from "@umt/contracts";
-import { Grid3x3, MoreHorizontal, Pause, Pencil, Play, RotateCcw, Search, Trash2 } from "lucide-react";
+import { Eraser, Grid3x3, MoreHorizontal, Pause, Pencil, Play, RotateCcw, Search, Trash2 } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import {
  type SubscriptionAction,
+  useResetSubscription,
  useSearchSubscription,
  useSubscriptionAction,
  useSubscriptionBatch,
@@ -26,7 +27,8 @@ export function useSubscriptionOps() {
  const search = useSearchSubscription();
  const action = useSubscriptionAction();
  const batch = useSubscriptionBatch();
-  const pending = search.isPending || action.isPending || batch.isPending;
+  const reset = useResetSubscription();
+  const pending = search.isPending || action.isPending || batch.isPending || reset.isPending;
  return {
    pending,
    search: (id: string) =>
@@ -42,6 +44,11 @@ export function useSubscriptionOps() {
          onError: (e) => toast.error(errorMessage(e)),
        },
      ),
+    reset: (id: string) =>
+      reset.mutateAsync(id).then((r) => {
+        const kept = r.keptPlans.length ? `，${r.keptPlans.length} 个仍在下载的保留` : "";
+        toast.success(`已重置：释放 ${r.releasedPlans.length} 个计划${kept}`);
+      }),
    remove: (ids: string[]) =>
      batch.mutateAsync({ ids, action: "delete" }).then((r) => {
        const bad = r.results.filter((x) => !x.ok);
@@ -110,6 +117,7 @@ export function SubscriptionMenu({
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const [confirm, setConfirm] = useState(false);
+  const [confirmReset, setConfirmReset] = useState(false);
  const run = (fn: () => void) => () => {
    setOpen(false);
    fn();
@@ -156,6 +164,11 @@ export function SubscriptionMenu({
              恢复
            </MenuItem>
          ) : null}
+          {!ended ? (
+            <MenuItem icon={<Eraser />} disabled={ops.pending} onClick={run(() => setConfirmReset(true))}>
+              重置
+            </MenuItem>
+          ) : null}
          {ended ? (
            <MenuItem icon={<RotateCcw />} disabled={ops.pending} onClick={run(() => ops.act(sub.id, "resubscribe"))}>
              重新订阅
@@ -169,6 +182,19 @@ export function SubscriptionMenu({
        </PopoverContent>
      </Popover>
      <DeleteSubscriptionsDialog open={confirm} onOpenChange={setConfirm} ids={[sub.id]} />
+      <ConfirmDialog
+        open={confirmReset}
+        onOpenChange={setConfirmReset}
+        title="重置这个订阅的进度？"
+        description="取消还没提交、或下载任务已不在的计划，清掉延后记录，然后重新评估。仍在下载的任务、已入库文件和总集数保留。"
+        confirmLabel="重置"
+        onConfirm={() =>
+          ops.reset(sub.id).catch((e) => {
+            toast.error(errorMessage(e));
+            throw e;
+          })
+        }
+      />
    </>
  );
 }
@@ -0,0 +1,191 @@
+import type { CalendarEntryState, SubscriptionCalendarEntry, SubscriptionMediaKind } from "@umt/contracts";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+import { useSubscriptionCalendar } from "~/api/subscriptions.ts";
+import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
+import { consolePath } from "~/components/console/nav.ts";
+import { Button } from "~/components/ui/button.tsx";
+import { cn } from "~/lib/utils.ts";
+import {
+  CALENDAR_STATE_LABEL,
+  entriesByDate,
+  monthGrid,
+  monthKey,
+  monthStart,
+  SUB_KIND_LABEL,
+  shiftMonth,
+  todayKey,
+} from "./model.ts";
+
+// 订阅日历(设计 §4):月视图,事件 = 追踪中订阅范围内集的播出日期(同日同季聚合),电影取上映日期。
+// 状态色只表示入库状态:已入库 success、部分 warning、未入库 destructive、未播出无彩。条目链到订阅详情。
+
+const WEEKDAYS = ["一", "二", "三", "四", "五", "六", "日"];
+
+const STATE_CLS: Record<CalendarEntryState, string> = {
+  have: "border-success/40 bg-success/10",
+  partial: "border-warning/40 bg-warning/10",
+  missing: "border-destructive/40 bg-destructive/10",
+  upcoming: "border-border bg-foreground/[0.04]",
+};
+const DOT_CLS: Record<CalendarEntryState, string> = {
+  have: "bg-success",
+  partial: "bg-warning",
+  missing: "bg-destructive",
+  upcoming: "bg-muted-foreground/50",
+};
+
+function Entry({ e }: { e: SubscriptionCalendarEntry }) {
+  return (
+    <Link
+      to={consolePath("subscriptions", e.subscriptionId)}
+      title={`${e.title} ${e.label} · ${CALENDAR_STATE_LABEL[e.state]}${e.total > 1 ? ` ${e.have}/${e.total}` : ""}`}
+      className={cn(
+        "flex min-w-0 items-center gap-1 rounded-tight border px-1.5 py-0.5 text-meta text-foreground transition-colors duration-micro hover:bg-foreground/[0.06]",
+        STATE_CLS[e.state],
+      )}
+    >
+      <span aria-hidden className={cn("h-1.5 w-1.5 shrink-0 rounded-full", DOT_CLS[e.state])} />
+      <span className="truncate">{e.title}</span>
+      <span className="shrink-0 text-muted-foreground tabular-nums">{e.label}</span>
+      <span className="sr-only">{CALENDAR_STATE_LABEL[e.state]}</span>
+    </Link>
+  );
+}
+
+export function SubscriptionCalendarView({
+  month,
+  onMonth,
+  mediaKind,
+}: {
+  /** YYYY-MM;空 = 本月 */
+  month: string;
+  onMonth: (m: string) => void;
+  mediaKind?: SubscriptionMediaKind | undefined;
+}) {
+  const first = monthStart(month);
+  const grid = monthGrid(first);
+  const from = grid[0]!.date;
+  const to = grid.at(-1)!.date;
+  const q = useSubscriptionCalendar(from, to, mediaKind);
+  const byDate = entriesByDate(q.data?.entries ?? []);
+  const today = todayKey();
+  const title = `${first.getFullYear()} 年 ${first.getMonth() + 1} 月`;
+  const unknown = q.data?.unknown ?? [];
+
+  return (
+    <section aria-label="订阅日历" className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="上个月"
+          onClick={() => onMonth(monthKey(shiftMonth(first, -1)))}
+        >
+          <ChevronLeft />
+        </Button>
+        <h2 className="min-w-28 text-center text-body font-semibold text-foreground tabular-nums">{title}</h2>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="下个月"
+          onClick={() => onMonth(monthKey(shiftMonth(first, 1)))}
+        >
+          <ChevronRight />
+        </Button>
+        <Button variant="ghost" size="sm" onClick={() => onMonth("")}>
+          本月
+        </Button>
+        <ul className="ml-auto flex flex-wrap gap-x-3 gap-y-1 text-meta text-muted-foreground">
+          {(Object.keys(CALENDAR_STATE_LABEL) as CalendarEntryState[]).map((k) => (
+            <li key={k} className="flex items-center gap-1.5">
+              <span aria-hidden className={cn("h-2 w-2 rounded-full", DOT_CLS[k])} />
+              {CALENDAR_STATE_LABEL[k]}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {q.isPending ? (
+        <LoadingState rows={5} />
+      ) : q.isError ? (
+        <ErrorState error={q.error} onRetry={() => q.refetch()} />
+      ) : (
+        <>
+          <div className="overflow-x-auto scroll-bleed">
+            <div className="pg-slab grid min-w-[640px] grid-cols-7 overflow-hidden rounded-xl">
+              {WEEKDAYS.map((w) => (
+                <div
+                  key={w}
+                  className="border-b border-border/60 px-2 py-1.5 text-meta font-medium text-muted-foreground"
+                >
+                  周{w}
+                </div>
+              ))}
+              {grid.map((d, i) => {
+                const list = byDate.get(d.date) ?? [];
+                return (
+                  <div
+                    key={d.date}
+                    className={cn(
+                      "min-h-24 min-w-0 space-y-1 border-border/60 p-1.5",
+                      i % 7 !== 6 && "border-r",
+                      i < grid.length - 7 && "border-b",
+                      !d.inMonth && "bg-foreground/[0.02]",
+                    )}
+                  >
+                    <time
+                      dateTime={d.date}
+                      className={cn(
+                        "block text-meta tabular-nums",
+                        d.inMonth ? "text-muted-foreground" : "text-muted-foreground/50",
+                        d.date === today && "font-semibold text-foreground",
+                      )}
+                    >
+                      {Number(d.date.slice(8, 10))}
+                      {d.date === today ? <span className="ml-1">今天</span> : null}
+                    </time>
+                    {list.map((e) => (
+                      <Entry key={`${e.subscriptionId}-${e.seasonNumber ?? ""}-${e.date}`} e={e} />
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {!q.data?.entries.length && !unknown.length ? (
+            <EmptyState icon={CalendarDays} title="这个月没有播出" description="追踪中的订阅有播出日期后出现在这里。" />
+          ) : null}
+          {unknown.length ? (
+            <section aria-labelledby="cal-unknown" className="space-y-2">
+              <h3 id="cal-unknown" className="text-body font-semibold text-foreground">
+                播出日期未知
+                <span className="ml-1.5 text-meta font-normal text-muted-foreground tabular-nums">
+                  {unknown.length}
+                </span>
+              </h3>
+              <p className="text-meta text-muted-foreground">TMDB 还没有给出这些集的播出日期，元数据刷新后更新。</p>
+              <ul className="pg-slab divide-y divide-border/60 overflow-hidden rounded-xl">
+                {unknown.map((u) => (
+                  <li key={`${u.subscriptionId}-${u.seasonNumber ?? ""}`}>
+                    <Link
+                      to={consolePath("subscriptions", u.subscriptionId)}
+                      className="flex min-w-0 items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-foreground/[0.04]"
+                    >
+                      <span className="truncate">{u.title}</span>
+                      <span className="shrink-0 text-meta text-muted-foreground">
+                        {SUB_KIND_LABEL[u.mediaKind]}
+                        {u.seasonNumber !== null ? ` · S${String(u.seasonNumber).padStart(2, "0")}` : ""}
+                        {u.episodes.length ? ` · ${u.episodes.length} 集` : ""}
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ) : null}
+        </>
+      )}
+    </section>
+  );
+}
@@ -5,10 +5,15 @@ import {
  draftFromSubscription,
  draftToParams,
  emptyDraft,
+  entriesByDate,
  foldNames,
+  monthGrid,
+  monthKey,
+  monthStart,
  moveItem,
  progressText,
  seasonLabel,
+  shiftMonth,
  slotBadge,
  upgradeOf,
 } from "./model.ts";
@@ -153,4 +158,51 @@ describe("表单 ↔ params", () => {
    expect(d.keywords).toBe("a\nb");
    expect(d.upgrade).toBe("per_unit");
  });
+  it("质量预设:草稿 ↔ params;未知值回填为空", () => {
+    const d = { ...emptyDraft("movie"), resolution: "4k" as const, source: "remux" as const, effect: "dv" as const };
+    const { params } = draftToParams(
+      d,
+      { resolution: "720p", effect: "sdr" },
+      { upgradeChanged: false, totalChanged: false },
+    );
+    expect(params).toEqual({ resolution: "4k", source: "remux", effect: "dv" });
+    const cleared = draftToParams(
+      emptyDraft("movie"),
+      { resolution: "720p" },
+      { upgradeChanged: false, totalChanged: false },
+    );
+    expect(cleared.params.resolution).toBeUndefined();
+    const back = draftFromSubscription(
+      {
+        mediaKind: "movie",
+        seasonScope: "current_season",
+        mode: "once",
+        priority: "tracking",
+        seasonUnitId: null,
+        policyRevisionId: null,
+        params: { resolution: "1080p", source: "bogus", effect: "hdr" },
+      } as unknown as Subscription,
+      "off",
+    );
+    expect([back.resolution, back.source, back.effect]).toEqual(["1080p", "", "hdr"]);
+  });
+});
+
+describe("日历", () => {
+  it("月网格从周一开始,整周铺满;跨年切月", () => {
+    const first = monthStart("2026-09");
+    const g = monthGrid(first);
+    expect(g[0]).toEqual({ date: "2026-08-31", inMonth: false });
+    expect(g.length % 7).toBe(0);
+    expect(g.at(-1)).toEqual({ date: "2026-10-04", inMonth: false });
+    expect(g.filter((d) => d.inMonth)).toHaveLength(30);
+    expect(monthKey(shiftMonth(monthStart("2026-12"), 1))).toBe("2027-01");
+    expect(monthKey(monthStart("bad", new Date(2026, 4, 9)))).toBe("2026-05");
+  });
+  it("按日期分桶", () => {
+    const e = (date: string) => ({ date, subscriptionId: date }) as never;
+    const m = entriesByDate([e("2026-09-01"), e("2026-09-01"), e("2026-09-02")]);
+    expect(m.get("2026-09-01")).toHaveLength(2);
+    expect(m.get("2026-09-03")).toBeUndefined();
+  });
 });
@@ -1,14 +1,19 @@
 import type {
  AcquisitionSlot,
  AutoFillMode,
+  CalendarEntryState,
  CoverageCell,
  JsonObject,
  Subscription,
+  SubscriptionCalendarEntry,
  SubscriptionCoverage,
+  SubscriptionEffect,
  SubscriptionGroup,
  SubscriptionMediaKind,
  SubscriptionOverviewItem,
+  SubscriptionResolution,
  SubscriptionSlotSummary,
+  SubscriptionSourcePreset,
 } from "@umt/contracts";
 import type { StatusTone } from "~/components/console/status-badge.tsx";

@@ -182,6 +187,30 @@ export function moveItem<T>(arr: readonly T[], from: number, to: number): T[] {

 // ── 表单 ──

+export const RESOLUTION_LABEL: Record<SubscriptionResolution, string> = {
+  "4k": "4K",
+  "1080p": "1080p",
+  "720p": "720p",
+};
+export const SOURCE_PRESET_LABEL: Record<SubscriptionSourcePreset, string> = {
+  bluray_disc: "蓝光原盘",
+  remux: "Remux",
+  bluray: "BluRay",
+  uhd: "UHD",
+  web: "WEB-DL",
+  hdtv: "HDTV",
+  h265: "H.265",
+  h264: "H.264",
+};
+export const EFFECT_LABEL: Record<SubscriptionEffect, string> = {
+  dv: "杜比视界",
+  hdr: "HDR",
+  sdr: "SDR",
+  atmos: "杜比全景声",
+};
+const oneOf = <K extends string>(v: unknown, labels: Record<K, string>): K | "" =>
+  typeof v === "string" && v in labels ? (v as K) : "";
+
 export type SubscriptionDraft = {
  mediaKind: SubscriptionMediaKind;
  seasonUnitId: string;
@@ -202,6 +231,10 @@ export type SubscriptionDraft = {
  include: string;
  exclude: string;
  keywords: string;
+  /** MP 分辨率 / 资源质量 / 特效预设(写到该订阅自己的版本目标) */
+  resolution: SubscriptionResolution | "";
+  source: SubscriptionSourcePreset | "";
+  effect: SubscriptionEffect | "";
  searchIntervalHours: string;
  stopAfter: string;
  autoFill: AutoFillMode;
@@ -239,6 +272,9 @@ export function emptyDraft(kind: SubscriptionMediaKind = "series"): Subscription
    include: "",
    exclude: "",
    keywords: "",
+    resolution: "",
+    source: "",
+    effect: "",
    searchIntervalHours: "",
    stopAfter: "",
    autoFill: "inherit",
@@ -281,6 +317,9 @@ export function draftFromSubscription(sub: Subscription, upgrade: UpgradeStrateg
    include: strArr(p.include).join("\n"),
    exclude: strArr(p.exclude).join("\n"),
    keywords: strArr(p.keywords).join("\n"),
+    resolution: oneOf(p.resolution, RESOLUTION_LABEL),
+    source: oneOf(p.source, SOURCE_PRESET_LABEL),
+    effect: oneOf(p.effect, EFFECT_LABEL),
    searchIntervalHours: numStr(p.searchIntervalHours),
    stopAfter: typeof p.stopAfter === "string" ? toLocalInput(p.stopAfter) : "",
    autoFill: p.autoFill === "on" || p.autoFill === "off" ? p.autoFill : "inherit",
@@ -318,6 +357,9 @@ export function draftToParams(
    "downloadSavePath",
    "autoFill",
    "fillBudget",
+    "resolution",
+    "source",
+    "effect",
  ];
  for (const k of known) delete out[k];
  const set = (k: string, v: unknown) => {
@@ -334,6 +376,9 @@ export function draftToParams(
  const kw = lines(d.keywords);
  if (kw.length > 10) errors.keywords = "最多 10 个";
  set("keywords", kw);
+  set("resolution", d.resolution);
+  set("source", d.source);
+  set("effect", d.effect);
  if (d.mediaKind !== "movie") {
    const s = d.episodeStart.trim();
    const e = d.episodeEnd.trim();
@@ -380,3 +425,53 @@ export function draftToParams(
  }
  return { params: out as JsonObject, errors };
 }
+
+// ── 日历(设计 §4)──
+
+export const CALENDAR_STATE_LABEL: Record<CalendarEntryState, string> = {
+  have: "已入库",
+  partial: "部分入库",
+  missing: "未入库",
+  upcoming: "未播出",
+};
+
+const ymd = (d: Date) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+
+/** "YYYY-MM" → 该月第一天;无效时取今天所在月 */
+export function monthStart(month: string | undefined, today = new Date()): Date {
+  const m = /^(\d{4})-(\d{2})$/.exec(month ?? "");
+  if (m) {
+    const d = new Date(Number(m[1]), Number(m[2]) - 1, 1);
+    if (!Number.isNaN(d.getTime())) return d;
+  }
+  return new Date(today.getFullYear(), today.getMonth(), 1);
+}
+
+export const monthKey = (d: Date) => ymd(d).slice(0, 7);
+
+export function shiftMonth(d: Date, n: number): Date {
+  return new Date(d.getFullYear(), d.getMonth() + n, 1);
+}
+
+/** 月视图网格:从该月 1 日所在周的周一起,整周铺满(5 或 6 周) */
+export function monthGrid(first: Date): { date: string; inMonth: boolean }[] {
+  const start = new Date(first);
+  start.setDate(1 - ((first.getDay() + 6) % 7));
+  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0);
+  const days: { date: string; inMonth: boolean }[] = [];
+  for (let d = new Date(start); days.length < 42; d.setDate(d.getDate() + 1)) {
+    if (d > last && days.length % 7 === 0) break;
+    days.push({ date: ymd(d), inMonth: d.getMonth() === first.getMonth() });
+  }
+  return days;
+}
+
+/** 按日期分桶 */
+export function entriesByDate(entries: readonly SubscriptionCalendarEntry[]): Map<string, SubscriptionCalendarEntry[]> {
+  const m = new Map<string, SubscriptionCalendarEntry[]>();
+  for (const e of entries) m.set(e.date, [...(m.get(e.date) ?? []), e]);
+  return m;
+}
+
+export const todayKey = (now = new Date()) => ymd(now);
@@ -51,7 +51,10 @@ import {
  type DraftErrors,
  draftFromSubscription,
  draftToParams,
+  EFFECT_LABEL,
  emptyDraft,
+  RESOLUTION_LABEL,
+  SOURCE_PRESET_LABEL,
  SUB_KIND_LABEL,
  type SubscriptionDraft,
  UPGRADE_LABEL,
@@ -713,6 +716,47 @@ export function SubscriptionFormDialog({
                  />
                </FormField>
              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <FormField label="分辨率" htmlFor={f("res")}>
+                  <Pick
+                    id={f("res")}
+                    value={d.resolution}
+                    onChange={(v) => patch({ resolution: v })}
+                    placeholder="不限"
+                    options={Object.entries(RESOLUTION_LABEL).map(([value, label]) => ({
+                      value: value as keyof typeof RESOLUTION_LABEL,
+                      label,
+                    }))}
+                  />
+                </FormField>
+                <FormField label="资源质量" htmlFor={f("src")}>
+                  <Pick
+                    id={f("src")}
+                    value={d.source}
+                    onChange={(v) => patch({ source: v })}
+                    placeholder="不限"
+                    options={Object.entries(SOURCE_PRESET_LABEL).map(([value, label]) => ({
+                      value: value as keyof typeof SOURCE_PRESET_LABEL,
+                      label,
+                    }))}
+                  />
+                </FormField>
+                <FormField label="特效" htmlFor={f("fx")}>
+                  <Pick
+                    id={f("fx")}
+                    value={d.effect}
+                    onChange={(v) => patch({ effect: v })}
+                    placeholder="不限"
+                    options={Object.entries(EFFECT_LABEL).map(([value, label]) => ({
+                      value: value as keyof typeof EFFECT_LABEL,
+                      label,
+                    }))}
+                  />
+                </FormField>
+              </div>
+              <p className="text-meta text-muted-foreground">
+                分辨率、资源质量、特效写进这个订阅自己的版本目标；UHD 和杜比全景声按标题匹配，与「包含」同时生效。
+              </p>
              <FormField
                label="搜索关键词"
                htmlFor={f("kw")}
@@ -1,6 +1,7 @@
 import type { SubscriptionGroup, SubscriptionOverviewItem, SubscriptionSort } from "@umt/contracts";
 import {
  CalendarClock,
+  CalendarDays,
  ChevronDown,
  LayoutGrid,
  List,
@@ -24,6 +25,7 @@ import { PageHeader } from "~/components/console/page-header.tsx";
 import { useQueryState } from "~/components/console/use-query-state.ts";
 import { opts, SUB_ORIGIN } from "~/components/library/labels.ts";
 import { DeleteSubscriptionsDialog, useSubscriptionOps } from "~/components/subscriptions/actions.tsx";
+import { SubscriptionCalendarView } from "~/components/subscriptions/calendar.tsx";
 import { GROUP_LABEL, GROUP_ORDER, SUB_KIND_LABEL } from "~/components/subscriptions/model.ts";
 import { SubscriptionCard, SubscriptionRow } from "~/components/subscriptions/overview-item.tsx";
 import { SubscriptionFormDialog } from "~/components/subscriptions/subscription-form.tsx";
@@ -96,7 +98,7 @@ function Pills<T extends string>({
 }

 export default function SubscriptionsPage() {
-  const f = useQueryState(["kind", "group", "q", "site", "rg", "origin", "up", "sort"] as const);
+  const f = useQueryState(["kind", "group", "q", "site", "rg", "origin", "up", "sort", "view", "month"] as const);
  const v = f.values;
  const [q, setQ] = useState(v.q);
  const dq = useDebounced(q.trim());
@@ -111,7 +113,9 @@ export default function SubscriptionsPage() {
      /* 无存储时用卡片 */
    }
  }, []);
+  const calendar = v.view === "calendar";
  const setView = (x: "card" | "list") => {
+    if (calendar) f.set("view", "");
    setViewState(x);
    try {
      localStorage.setItem(VIEW_KEY, x);
@@ -219,21 +223,23 @@ export default function SubscriptionsPage() {
          ]}
        />
        <div className="flex items-center gap-1">
-          <Button
-            variant={selecting ? "secondary" : "ghost"}
-            size="sm"
-            onClick={() => (selecting ? exitSelect() : setSelecting(true))}
-          >
-            {selecting ? <X /> : null}
-            {selecting ? "退出批量" : "批量"}
-          </Button>
+          {calendar ? null : (
+            <Button
+              variant={selecting ? "secondary" : "ghost"}
+              size="sm"
+              onClick={() => (selecting ? exitSelect() : setSelecting(true))}
+            >
+              {selecting ? <X /> : null}
+              {selecting ? "退出批量" : "批量"}
+            </Button>
+          )}
          <fieldset className="m-0 flex rounded-full border border-border p-0.5" aria-label="视图">
            <Button
              variant="ghost"
              size="icon-sm"
              aria-label="卡片视图"
-              aria-pressed={view === "card"}
-              className={cn("rounded-full", view === "card" && "bg-foreground/[0.08]")}
+              aria-pressed={!calendar && view === "card"}
+              className={cn("rounded-full", !calendar && view === "card" && "bg-foreground/[0.08]")}
              onClick={() => setView("card")}
            >
              <LayoutGrid />
@@ -242,169 +248,201 @@ export default function SubscriptionsPage() {
              variant="ghost"
              size="icon-sm"
              aria-label="列表视图"
-              aria-pressed={view === "list"}
-              className={cn("rounded-full", view === "list" && "bg-foreground/[0.08]")}
+              aria-pressed={!calendar && view === "list"}
+              className={cn("rounded-full", !calendar && view === "list" && "bg-foreground/[0.08]")}
              onClick={() => setView("list")}
            >
              <List />
            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="日历"
+              aria-pressed={calendar}
+              className={cn("rounded-full", calendar && "bg-foreground/[0.08]")}
+              onClick={() => f.set("view", "calendar")}
+            >
+              <CalendarDays />
+            </Button>
          </fieldset>
        </div>
      </div>
-      <div className="mb-3">
-        <Pills
-          label="分组"
-          value={v.group as SubscriptionGroup | ""}
-          onChange={(x) => f.set("group", x)}
-          items={[
-            { value: "", label: "全部", count: allCount },
-            ...GROUP_ORDER.map((g) => ({ value: g, label: GROUP_LABEL[g], count: counts?.[g] })),
-          ]}
+      {calendar ? (
+        <SubscriptionCalendarView
+          month={v.month}
+          onMonth={(m) => f.set("month", m)}
+          mediaKind={(v.kind || undefined) as "series" | "movie" | "variety" | undefined}
        />
-      </div>
-      <FilterBar
-        search={{ value: q, onChange: setQ, placeholder: "作品标题 / 别名 / 检索词" }}
-        onReset={
-          filtered
-            ? () => {
-                setQ("");
-                for (const k of ["q", "site", "rg", "origin", "up"] as const) f.set(k, "");
-              }
-            : undefined
-        }
-      >
-        <FilterSelect
-          label="站点"
-          value={v.site}
-          onChange={(x) => f.set("site", x)}
-          options={(sites.data?.items ?? []).map((s) => ({ value: s.id, label: s.name }))}
-        />
-        <FilterSelect
-          label="规则组"
-          value={v.rg}
-          onChange={(x) => f.set("rg", x)}
-          options={(groups.data?.items ?? []).map((g) => ({ value: g.id, label: g.name }))}
-        />
-        <FilterSelect label="来源" value={v.origin} onChange={(x) => f.set("origin", x)} options={opts(SUB_ORIGIN)} />
-        <FilterSelect
-          label="洗版"
-          value={v.up}
-          onChange={(x) => f.set("up", x)}
-          options={[
-            { value: "true", label: "洗版中" },
-            { value: "false", label: "未洗版" },
-          ]}
-        />
-        <FilterSelect
-          label="排序"
-          value={v.sort}
-          onChange={(x) => f.set("sort", x)}
-          allLabel="按分组"
-          options={opts(SORT_LABEL)}
-        />
-      </FilterBar>
-
-      {selecting ? (
-        <div className="pg-slab sticky top-2 z-20 mb-3 flex flex-wrap items-center gap-2 rounded-xl px-3 py-2">
-          <span className="text-sm text-foreground tabular-nums">已选 {selIds.length}</span>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setSel(new Set(sel.size === items.length ? [] : items.map((x) => x.id)))}
-          >
-            {sel.size === items.length && items.length ? "取消全选" : "全选"}
-          </Button>
-          <span className="ml-auto flex flex-wrap gap-2">
-            <Button
-              size="sm"
-              variant="outline"
-              disabled={!selIds.length || ops.pending}
-              onClick={() => ops.batch(selIds, "search")}
-            >
-              <Search />
-              立即搜索
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              disabled={!selIds.length || ops.pending}
-              onClick={() => ops.batch(selIds, "pause")}
-            >
-              <Pause />
-              暂停
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              disabled={!selIds.length || ops.pending}
-              onClick={() => ops.batch(selIds, "resume")}
-            >
-              <Play />
-              恢复
-            </Button>
-            <Button size="sm" variant="destructive" disabled={!selIds.length} onClick={() => setConfirmDelete(true)}>
-              <Trash2 />
-              删除
-            </Button>
-          </span>
-        </div>
-      ) : null}
-
-      {query.isPending ? (
-        <LoadingState rows={4} />
-      ) : query.isError ? (
-        <ErrorState error={query.error} onRetry={() => query.refetch()} />
-      ) : items.length === 0 ? (
-        <EmptyState
-          icon={CalendarClock}
-          title={filtered || v.group || v.kind ? "没有符合条件的订阅" : "还没有订阅"}
-          description={filtered || v.group || v.kind ? undefined : "从媒体库、搜索或 Agent 添加,也可以点「新建订阅」。"}
-        />
-      ) : grouped ? (
-        <div className="space-y-6">
-          {GROUP_ORDER.map((g) => {
-            const list = items.filter((x) => x.group === g);
-            if (!list.length) return null;
-            const closed = collapsed.has(g);
-            return (
-              <section key={g} aria-labelledby={`grp-${g}`}>
-                <button
-                  type="button"
-                  id={`grp-${g}`}
-                  aria-expanded={!closed}
-                  onClick={() =>
-                    setCollapsed((s) => {
-                      const n = new Set(s);
-                      if (closed) n.delete(g);
-                      else n.add(g);
-                      return n;
-                    })
-                  }
-                  className="mb-2 flex cursor-pointer items-center gap-1.5 text-body font-semibold text-foreground"
-                >
-                  <ChevronDown
-                    className={cn("h-4 w-4 text-muted-foreground transition-transform", closed && "-rotate-90")}
-                  />
-                  {GROUP_LABEL[g]}
-                  <span className="text-meta font-normal text-muted-foreground tabular-nums">
-                    {counts?.[g] ?? list.length}
-                  </span>
-                </button>
-                {closed ? null : renderItems(list)}
-              </section>
-            );
-          })}
-        </div>
      ) : (
-        renderItems(items)
+        <>
+          <div className="mb-3">
+            <Pills
+              label="分组"
+              value={v.group as SubscriptionGroup | ""}
+              onChange={(x) => f.set("group", x)}
+              items={[
+                { value: "", label: "全部", count: allCount },
+                ...GROUP_ORDER.map((g) => ({ value: g, label: GROUP_LABEL[g], count: counts?.[g] })),
+              ]}
+            />
+          </div>
+          <FilterBar
+            search={{ value: q, onChange: setQ, placeholder: "作品标题 / 别名 / 检索词" }}
+            onReset={
+              filtered
+                ? () => {
+                    setQ("");
+                    for (const k of ["q", "site", "rg", "origin", "up"] as const) f.set(k, "");
+                  }
+                : undefined
+            }
+          >
+            <FilterSelect
+              label="站点"
+              value={v.site}
+              onChange={(x) => f.set("site", x)}
+              options={(sites.data?.items ?? []).map((s) => ({ value: s.id, label: s.name }))}
+            />
+            <FilterSelect
+              label="规则组"
+              value={v.rg}
+              onChange={(x) => f.set("rg", x)}
+              options={(groups.data?.items ?? []).map((g) => ({ value: g.id, label: g.name }))}
+            />
+            <FilterSelect
+              label="来源"
+              value={v.origin}
+              onChange={(x) => f.set("origin", x)}
+              options={opts(SUB_ORIGIN)}
+            />
+            <FilterSelect
+              label="洗版"
+              value={v.up}
+              onChange={(x) => f.set("up", x)}
+              options={[
+                { value: "true", label: "洗版中" },
+                { value: "false", label: "未洗版" },
+              ]}
+            />
+            <FilterSelect
+              label="排序"
+              value={v.sort}
+              onChange={(x) => f.set("sort", x)}
+              allLabel="按分组"
+              options={opts(SORT_LABEL)}
+            />
+          </FilterBar>
+
+          {selecting ? (
+            <div className="pg-slab sticky top-2 z-20 mb-3 flex flex-wrap items-center gap-2 rounded-xl px-3 py-2">
+              <span className="text-sm text-foreground tabular-nums">已选 {selIds.length}</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setSel(new Set(sel.size === items.length ? [] : items.map((x) => x.id)))}
+              >
+                {sel.size === items.length && items.length ? "取消全选" : "全选"}
+              </Button>
+              <span className="ml-auto flex flex-wrap gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={!selIds.length || ops.pending}
+                  onClick={() => ops.batch(selIds, "search")}
+                >
+                  <Search />
+                  立即搜索
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={!selIds.length || ops.pending}
+                  onClick={() => ops.batch(selIds, "pause")}
+                >
+                  <Pause />
+                  暂停
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={!selIds.length || ops.pending}
+                  onClick={() => ops.batch(selIds, "resume")}
+                >
+                  <Play />
+                  恢复
+                </Button>
+                <Button
+                  size="sm"
+                  variant="destructive"
+                  disabled={!selIds.length}
+                  onClick={() => setConfirmDelete(true)}
+                >
+                  <Trash2 />
+                  删除
+                </Button>
+              </span>
+            </div>
+          ) : null}
+
+          {query.isPending ? (
+            <LoadingState rows={4} />
+          ) : query.isError ? (
+            <ErrorState error={query.error} onRetry={() => query.refetch()} />
+          ) : items.length === 0 ? (
+            <EmptyState
+              icon={CalendarClock}
+              title={filtered || v.group || v.kind ? "没有符合条件的订阅" : "还没有订阅"}
+              description={
+                filtered || v.group || v.kind ? undefined : "从媒体库、搜索或 Agent 添加,也可以点「新建订阅」。"
+              }
+            />
+          ) : grouped ? (
+            <div className="space-y-6">
+              {GROUP_ORDER.map((g) => {
+                const list = items.filter((x) => x.group === g);
+                if (!list.length) return null;
+                const closed = collapsed.has(g);
+                return (
+                  <section key={g} aria-labelledby={`grp-${g}`}>
+                    <button
+                      type="button"
+                      id={`grp-${g}`}
+                      aria-expanded={!closed}
+                      onClick={() =>
+                        setCollapsed((s) => {
+                          const n = new Set(s);
+                          if (closed) n.delete(g);
+                          else n.add(g);
+                          return n;
+                        })
+                      }
+                      className="mb-2 flex cursor-pointer items-center gap-1.5 text-body font-semibold text-foreground"
+                    >
+                      <ChevronDown
+                        className={cn("h-4 w-4 text-muted-foreground transition-transform", closed && "-rotate-90")}
+                      />
+                      {GROUP_LABEL[g]}
+                      <span className="text-meta font-normal text-muted-foreground tabular-nums">
+                        {counts?.[g] ?? list.length}
+                      </span>
+                    </button>
+                    {closed ? null : renderItems(list)}
+                  </section>
+                );
+              })}
+            </div>
+          ) : (
+            renderItems(items)
+          )}
+          {query.hasNextPage ? (
+            <div className="mt-4 flex justify-center">
+              <Button variant="outline" onClick={() => query.fetchNextPage()} disabled={query.isFetchingNextPage}>
+                {query.isFetchingNextPage ? "加载中…" : "加载更多"}
+              </Button>
+            </div>
+          ) : null}
+        </>
      )}
-      {query.hasNextPage ? (
-        <div className="mt-4 flex justify-center">
-          <Button variant="outline" onClick={() => query.fetchNextPage()} disabled={query.isFetchingNextPage}>
-            {query.isFetchingNextPage ? "加载中…" : "加载更多"}
-          </Button>
-        </div>
-      ) : null}

      {creating ? <SubscriptionFormDialog onClose={() => setCreating(false)} /> : null}
      {editing ? (