polish(compose): 截止时间控件改为分栏与快捷芯片

指定时刻用日期/时刻分栏与常用芯片替代原生 datetime-local，并收紧布局与左对齐模式切换。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/DeadlinePicker.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-/** 发帖截止时间：快捷天数 + 自定义时刻 */
+import { CalendarDays, Clock3 } from "lucide-react";
+
+/** 发帖截止时间：快捷天数 + 指定时刻（分栏 + 快捷芯片） */
 
 export type DeadlineMode = "preset" | "custom";
 
@@ -17,7 +19,7 @@ export function toLocalInputValue(d: Date): string {
 export function defaultCustomLocal(days = 7): string {
   const d = new Date();
   d.setDate(d.getDate() + days);
-  d.setSeconds(0, 0);
+  d.setHours(18, 0, 0, 0);
   return toLocalInputValue(d);
 }
 
@@ -32,12 +34,95 @@ export function formatLocalPreview(local: string): string {
   const t = Date.parse(local);
   if (!Number.isFinite(t)) return "";
   try {
-    return new Date(t).toLocaleString("zh-CN");
+    return new Date(t).toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      weekday: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
   } catch {
     return local;
   }
 }
 
+function splitLocal(v: string): { date: string; time: string } {
+  const [date = "", rawTime = ""] = (v || "").split("T");
+  const time = (rawTime || "18:00").slice(0, 5);
+  return { date, time: /^\d{2}:\d{2}$/.test(time) ? time : "18:00" };
+}
+
+function joinLocal(date: string, time: string): string {
+  if (!date) return "";
+  const t = /^\d{2}:\d{2}$/.test(time) ? time : "18:00";
+  return `${date}T${t}`;
+}
+
+function startOfDay(d: Date): Date {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+
+function withTime(base: Date, hours: number, minutes: number): Date {
+  const d = new Date(base);
+  d.setHours(hours, minutes, 0, 0);
+  return d;
+}
+
+/** 至少晚于当前 1 小时；不满足则推到合法时刻 */
+function ensureMinLead(d: Date): Date {
+  const min = new Date(Date.now() + 60 * 60 * 1000);
+  min.setSeconds(0, 0);
+  return d.getTime() < min.getTime() ? min : d;
+}
+
+type QuickSet = { id: string; label: string; build: () => Date };
+
+function buildQuickSets(): QuickSet[] {
+  const now = new Date();
+  return [
+    {
+      id: "tonight",
+      label: "今晚 22:00",
+      build: () => ensureMinLead(withTime(now, 22, 0)),
+    },
+    {
+      id: "tomorrow-noon",
+      label: "明天中午",
+      build: () => {
+        const d = new Date(now);
+        d.setDate(d.getDate() + 1);
+        return withTime(d, 12, 0);
+      },
+    },
+    {
+      id: "plus3-eve",
+      label: "3 天后晚",
+      build: () => {
+        const d = new Date(now);
+        d.setDate(d.getDate() + 3);
+        return withTime(d, 21, 0);
+      },
+    },
+    {
+      id: "sunday-eve",
+      label: "本周日晚",
+      build: () => {
+        const d = startOfDay(now);
+        const day = d.getDay(); // 0=日
+        const add = day === 0 ? 7 : 7 - day;
+        d.setDate(d.getDate() + add);
+        return ensureMinLead(withTime(d, 21, 0));
+      },
+    },
+  ];
+}
+
+const TIME_CHIPS = ["09:00", "12:00", "18:00", "21:00", "22:00", "23:59"] as const;
+
 export default function DeadlinePicker({
   label = "截止时间",
   presets,
@@ -61,46 +146,66 @@ export default function DeadlinePicker({
   disabled?: boolean;
   hint?: string;
 }) {
-  const minLocal = toLocalInputValue(new Date(Date.now() + 60 * 60 * 1000));
-  const maxLocal = toLocalInputValue(new Date(Date.now() + 90 * 24 * 60 * 60 * 1000));
+  const minDate = toLocalInputValue(new Date()).slice(0, 10);
+  const maxDate = toLocalInputValue(new Date(Date.now() + 90 * 24 * 60 * 60 * 1000)).slice(0, 10);
+  const { date, time } = splitLocal(customLocal);
+  const quickSets = buildQuickSets();
+
+  const applyCustom = (next: Date) => {
+    onCustomLocalChange(toLocalInputValue(ensureMinLead(next)));
+  };
+
+  const patchDate = (nextDate: string) => {
+    onCustomLocalChange(joinLocal(nextDate, time || "18:00"));
+  };
+
+  const patchTime = (nextTime: string) => {
+    const baseDate = date || toLocalInputValue(new Date()).slice(0, 10);
+    onCustomLocalChange(joinLocal(baseDate, nextTime));
+  };
+
+  const enterCustom = () => {
+    onModeChange("custom");
+    if (!customLocal) onCustomLocalChange(defaultCustomLocal(days || 7));
+  };
 
   return (
     <div className="j13-deadline-picker">
-      <div className="j13-deadline-picker-label">{label}</div>
-      <div className="j13-deadline-picker-modes" role="tablist" aria-label={label}>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={mode === "preset"}
-          className={`j13-deadline-mode${mode === "preset" ? " is-on" : ""}`}
-          disabled={disabled}
-          onClick={() => onModeChange("preset")}
-        >
-          快捷时长
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={mode === "custom"}
-          className={`j13-deadline-mode${mode === "custom" ? " is-on" : ""}`}
-          disabled={disabled}
-          onClick={() => {
-            onModeChange("custom");
-            if (!customLocal) onCustomLocalChange(defaultCustomLocal(days || 7));
-          }}
-        >
-          指定时刻
-        </button>
+      <div className="j13-deadline-picker-head">
+        <div className="j13-deadline-picker-label">{label}</div>
+        <div className="j13-deadline-picker-modes" role="tablist" aria-label={label}>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === "preset"}
+            className={`j13-deadline-mode${mode === "preset" ? " is-on" : ""}`}
+            disabled={disabled}
+            onClick={() => onModeChange("preset")}
+          >
+            快捷时长
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === "custom"}
+            className={`j13-deadline-mode${mode === "custom" ? " is-on" : ""}`}
+            disabled={disabled}
+            onClick={enterCustom}
+          >
+            指定时刻
+          </button>
+        </div>
       </div>
 
       {mode === "preset" ? (
-        <div className="j13-deadline-presets">
+        <div className="j13-deadline-presets" role="group" aria-label="快捷天数">
           {presets.map((d) => (
             <button
               key={d}
               type="button"
-              className={`btn btn-sm ${days === d ? "btn-primary" : "btn-line"}`}
+              className={`j13-deadline-chip${days === d ? " is-on" : ""}`}
               disabled={disabled}
+              aria-pressed={days === d}
               onClick={() => onDaysChange(d)}
             >
               {d} 天
@@ -109,22 +214,86 @@ export default function DeadlinePicker({
         </div>
       ) : (
         <div className="j13-deadline-custom">
-          <input
-            type="datetime-local"
-            className="j13-compose-field j13-deadline-datetime"
-            value={customLocal}
-            min={minLocal}
-            max={maxLocal}
-            disabled={disabled}
-            onChange={(e) => onCustomLocalChange(e.target.value)}
-            aria-label="指定截止时刻"
-          />
+          <div className="j13-deadline-fields">
+            <label className="j13-deadline-field">
+              <span className="j13-deadline-field-icon" aria-hidden>
+                <CalendarDays size={15} strokeWidth={2} />
+              </span>
+              <span className="j13-deadline-field-meta">
+                <span className="j13-deadline-field-label">日期</span>
+                <input
+                  type="date"
+                  className="j13-deadline-field-input"
+                  value={date}
+                  min={minDate}
+                  max={maxDate}
+                  disabled={disabled}
+                  onChange={(e) => patchDate(e.target.value)}
+                  aria-label="截止日期"
+                />
+              </span>
+            </label>
+            <label className="j13-deadline-field">
+              <span className="j13-deadline-field-icon" aria-hidden>
+                <Clock3 size={15} strokeWidth={2} />
+              </span>
+              <span className="j13-deadline-field-meta">
+                <span className="j13-deadline-field-label">时刻</span>
+                <input
+                  type="time"
+                  className="j13-deadline-field-input"
+                  value={time}
+                  disabled={disabled}
+                  onChange={(e) => patchTime(e.target.value)}
+                  aria-label="截止时刻"
+                />
+              </span>
+            </label>
+          </div>
+
+          <div className="j13-deadline-quick" role="group" aria-label="快捷设到">
+            <span className="j13-deadline-quick-label">快捷</span>
+            <div className="j13-deadline-quick-chips">
+              {quickSets.map((q) => (
+                <button
+                  key={q.id}
+                  type="button"
+                  className="j13-deadline-chip j13-deadline-chip-sm"
+                  disabled={disabled}
+                  onClick={() => applyCustom(q.build())}
+                >
+                  {q.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="j13-deadline-quick" role="group" aria-label="常用时刻">
+            <span className="j13-deadline-quick-label">时刻</span>
+            <div className="j13-deadline-quick-chips">
+              {TIME_CHIPS.map((t) => (
+                <button
+                  key={t}
+                  type="button"
+                  className={`j13-deadline-chip j13-deadline-chip-sm${time === t ? " is-on" : ""}`}
+                  disabled={disabled || !date}
+                  aria-pressed={time === t}
+                  onClick={() => patchTime(t)}
+                >
+                  {t}
+                </button>
+              ))}
+            </div>
+          </div>
+
           {customLocal ? (
-            <p className="meta text-[12.5px] !mb-0">将于 {formatLocalPreview(customLocal)} 截止</p>
+            <p className="j13-deadline-preview">
+              将于 <strong>{formatLocalPreview(customLocal)}</strong> 截止
+            </p>
           ) : null}
         </div>
       )}
-      {hint ? <p className="meta text-[12px] !mb-0">{hint}</p> : null}
+      {hint ? <p className="j13-deadline-hint">{hint}</p> : null}
     </div>
   );
 }