@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/inline-editors/date-editor.tsx

@@ -31,9 +31,13 @@ interface DateEditorProps {
   label: string;
   icon: LucideIcon;
   overdue?: boolean;
+  /** 触发器外观透传（看板卡片用 ghost） */
+  variant?: "outline" | "ghost";
+  /** open 状态外泄（协同 editing 标记挂点，任务 20） */
+  onOpenChange?: (open: boolean) => void;
 }
 
-export function DateEditor({ value, onChange, label, icon: Icon, overdue }: DateEditorProps) {
+export function DateEditor({ value, onChange, label, icon: Icon, overdue, variant, onOpenChange }: DateEditorProps) {
   const [open, setOpen] = useState(false);
   const date = value ? new Date(value.slice(0, 10)) : null;
   const dayFormat = date
@@ -41,7 +45,7 @@ export function DateEditor({ value, onChange, label, icon: Icon, overdue }: Date
     : undefined;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={(v) => { setOpen(v); onOpenChange?.(v); }}>
       <InlineTrigger
         title={label}
         value={dayFormat ?? m.story_inline_notSelected()}
@@ -49,6 +53,7 @@ export function DateEditor({ value, onChange, label, icon: Icon, overdue }: Date
         icon={<Icon className={cn("size-3.5", overdue ? "text-destructive" : "text-muted-foreground")} />}
         label={dayFormat}
         className={overdue ? "text-destructive" : undefined}
+        variant={variant}
       />
       <PopoverContent className="w-auto p-0" align="start">
         <Calendar

package/src/components/story/inline-editors/inline-trigger.tsx

@@ -29,16 +29,29 @@ interface InlineTriggerProps {
   icon: ReactNode;
   label?: string;
   className?: string;
+  /** 触发器外观：outline 为列表视图的行内属性按钮，ghost 为看板卡片的轻量文本触发器 */
+  variant?: "outline" | "ghost";
 }
 
-export function InlineTrigger({ title, value, hasValue, icon, label, className }: InlineTriggerProps) {
+export function InlineTrigger({
+  title,
+  value,
+  hasValue,
+  icon,
+  label,
+  className,
+  variant = "outline",
+}: InlineTriggerProps) {
   return (
     <Tooltip>
-      <TooltipTrigger render={<PopoverTrigger render={<Button variant="outline"
+      <TooltipTrigger render={<PopoverTrigger render={<Button variant={variant}
             size="sm"
             className={cn(
-              "h-7 gap-1 rounded-md text-xs font-normal",
-              hasValue ? "px-2" : "size-7 shrink-0 justify-center px-0",
+              variant === "ghost"
+                ? "h-6 gap-1 rounded px-1 text-xs font-normal text-muted-foreground"
+                : "h-7 gap-1 rounded-md text-xs font-normal",
+              variant === "outline" &&
+                (hasValue ? "px-2" : "size-7 shrink-0 justify-center px-0"),
               className,
             )} />} />}>
             {icon}

package/src/components/story/inline-editors/labels-editor.tsx

@@ -15,14 +15,16 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useState } from "react";
-import { Tag, Check, Loader2, Sparkles } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Tag, Check, ChevronRight, Loader2, Plus, Sparkles } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 import { useSession } from "@/lib/auth/auth-client";
 import { toast } from "@/components/ui/toast";
-import { createLabelFn, suggestStoryLabelsFn } from "@/server/serverFns/story";
+import { createLabelFn, listLabelsFn, suggestStoryLabelsFn } from "@/server/serverFns/story";
 import { InlineTrigger } from "./inline-trigger";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
@@ -35,8 +37,14 @@ interface LabelsEditorProps {
   className?: string;
   variant?: "chip" | "button";
   aiContext?: { name: () => string; description?: () => string | undefined };
+  /** 手动/AI 创建新标签后回调（父级并入标签清单，否则 chip 因字典缺名不渲染） */
+  onLabelCreated?: (label: LabelLike) => void;
+  /** POP 列表可见标签上限（超出收「更多标签」折叠）；排序=已选中优先+名称序；输入过滤时全量显示 */
+  maxVisibleLabels?: number;
 }
 
+type LabelLike = { id: string; name: string; color: string };
+
 type AiPanel =
   | { phase: "idle" }
   | { phase: "loading" }
@@ -47,17 +55,78 @@ type AiPanel =
     }
   | { phase: "error" };
 
-export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", className, variant = "chip", aiContext }: LabelsEditorProps) {
+// 并发去重：详情页一次会挂载多个 LabelsEditor（依赖面板每行一个），各实例
+// 挂载即拉全量清单会在打开面板时形成请求突发、挤占 dev SSR 并发致其他
+// RPC 被丢（Failed to fetch）——同一批并发挂载共享同一个在途请求
+let labelsInFlight: Promise<LabelLike[]> | null = null;
+function fetchLabelsShared(): Promise<LabelLike[]> {
+  if (!labelsInFlight) {
+    labelsInFlight = listLabelsFn().finally(() => {
+      labelsInFlight = null;
+    });
+  }
+  return labelsInFlight;
+}
+
+export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", className, variant = "chip", aiContext, onLabelCreated, maxVisibleLabels = 5 }: LabelsEditorProps) {
   const [open, setOpen] = useState(false);
   const { data: session } = useSession();
   const hasAiKey = session?.user?.hasAiKey ?? false;
   const [ai, setAi] = useState<AiPanel>({ phase: "idle" });
   const [selectedExisting, setSelectedExisting] = useState<string[]>([]);
   const [selectedNew, setSelectedNew] = useState<string[]>([]);
+  // 本会话内手动创建的新标签（父级 labels 清单不含，chip/列表展示时合并）
+  const [localLabels, setLocalLabels] = useState<LabelLike[]>([]);
+  // 挂载时拉项目标签全量清单：labels prop 可能过期（其他入口新建的标签不在其中）
+  const [fetchedLabels, setFetchedLabels] = useState<LabelLike[]>([]);
+  const [newLabelName, setNewLabelName] = useState("");
+  const [creating, setCreating] = useState(false);
   const aiEnabled = !!aiContext && hasAiKey;
   const isMulti = mode === "multi";
   const showChip = variant === "chip";
 
+  const allLabels = useMemo(() => {
+    const base = [...labels, ...fetchedLabels, ...localLabels];
+    const seen = new Set<string>();
+    return base.filter((l) => (seen.has(l.id) ? false : (seen.add(l.id), true)));
+  }, [labels, fetchedLabels, localLabels]);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchLabelsShared()
+      .then((rows: LabelLike[]) => {
+        if (!cancelled) setFetchedLabels(rows);
+      })
+      .catch(() => {
+        // 清单拉取失败时静默用 props（与旧行为一致）
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // 列表排序与折叠：「最符合」优先——输入匹配 > 已选中 > 名称序；输入过滤时全量显示
+  const searchQuery = newLabelName.trim().toLowerCase();
+  const sortedLabels = useMemo(() => {
+    const sorted = [...allLabels].sort((a, b) => {
+      const aSel = labelIds.includes(a.id) ? 0 : 1;
+      const bSel = labelIds.includes(b.id) ? 0 : 1;
+      if (aSel !== bSel) return aSel - bSel;
+      return a.name.localeCompare(b.name, "zh");
+    });
+    if (!searchQuery) return sorted;
+    const matched = sorted.filter((l) => l.name.toLowerCase().includes(searchQuery));
+    const rest = sorted.filter((l) => !l.name.toLowerCase().includes(searchQuery));
+    return [...matched, ...rest];
+  }, [allLabels, labelIds, searchQuery]);
+
+  const filteredBySearch = searchQuery
+    ? sortedLabels.filter((l) => l.name.toLowerCase().includes(searchQuery))
+    : sortedLabels;
+  const effectiveLimit = maxVisibleLabels && !searchQuery ? maxVisibleLabels : undefined;
+  const visibleLabels = effectiveLimit ? filteredBySearch.slice(0, effectiveLimit) : filteredBySearch;
+  const hiddenLabels = filteredBySearch.slice(visibleLabels.length);
+
   const labelNames =
     labelIds.length > 0
       ? labelIds.map((id) => labels.find((l) => l.id === id)?.name).filter(Boolean).join("、")
@@ -115,6 +184,10 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
     for (const name of selectedNew) {
       const created = await createLabelFn({ data: { name } });
       newIds.push(created.id);
+      setLocalLabels((prev) =>
+        prev.some((l) => l.id === created.id) ? prev : [...prev, created],
+      );
+      onLabelCreated?.(created);
     }
     const merged = Array.from(new Set([...labelIds, ...selectedExisting, ...newIds]));
     onChange(merged);
@@ -124,14 +197,38 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
     setSelectedNew([]);
   };
 
+  /** 手动创建标签：upsert 同名复用，创建后自动选中（chip 展示经 localLabels 合并） */
+  const createManualLabel = async () => {
+    const name = newLabelName.trim();
+    if (!name || creating) return;
+    const existing = allLabels.find((l) => l.name.toLowerCase() === name.toLowerCase());
+    if (existing) {
+      if (!labelIds.includes(existing.id)) toggle(existing.id);
+      setNewLabelName("");
+      return;
+    }
+    setCreating(true);
+    try {
+      const created = await createLabelFn({ data: { name } });
+      setLocalLabels((prev) => [...prev, created]);
+      onLabelCreated?.(created);
+      toggle(created.id);
+      setNewLabelName("");
+    } catch (e) {
+      toastError(e, m.story_inline_labelCreateFailed());
+    } finally {
+      setCreating(false);
+    }
+  };
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip && labelIds.length > 0 ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1.5 overflow-x-auto whitespace-nowrap" />}>
             {labelIds.map((id) => {
-              const l = labels.find((lb) => lb.id === id);
+              const l = allLabels.find((lb) => lb.id === id);
               return l ? (
-                <span key={id} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
+                <span key={id} className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-sm border border-border px-1.5 py-1.5">
                   <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
                   <span className="text-xs leading-none">{l.name}</span>
                 </span>
@@ -149,37 +246,69 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
         />
       )}
       <PopoverContent className="w-52 p-1" align="start" finalFocus={false}>
-        {labels.length === 0 ? (
+        {allLabels.length === 0 ? (
           <div className="px-2 py-1.5 text-xs text-muted-foreground">{m.story_inline_noLabels()}</div>
         ) : (
-          labels.map((l) => {
-            const active = labelIds.includes(l.id);
-            return (
-              <button
-                key={l.id}
-                type="button"
-                onClick={() => toggle(l.id)}
-                className={cn(
-                  "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
-                  active ? "bg-accent font-medium" : "hover:bg-muted",
-                )}
-              >
-                {isMulti && (
-                  <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
-                    {active && <Check className="size-3" />}
-                  </div>
-                )}
-                {!isMulti && (
-                  <div className={cn("flex size-4 items-center justify-center rounded border", active ? "border-primary" : "border-border")}>
-                    {active && <span className="text-primary text-[10px]">✓</span>}
-                  </div>
-                )}
-                <span className="inline-block size-2.5 rounded-full shrink-0" style={{ backgroundColor: l.color }} />
-                {l.name}
-              </button>
-            );
-          })
+          <>
+            {visibleLabels.map((l) => {
+              const active = labelIds.includes(l.id);
+              return (
+                <button
+                  key={l.id}
+                  type="button"
+                  onClick={() => toggle(l.id)}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs font-medium hover:bg-muted",
+                  )}
+                >
+                  <span className="inline-block size-2.5 rounded-full shrink-0" style={{ backgroundColor: l.color }} />
+                  {l.name}
+                  {active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+                </button>
+              );
+            })}
+            {/* 超出上限的标签收进「更多标签」二级菜单（hover 弹出、右侧箭头；已选中的始终显示在最前） */}
+            {hiddenLabels.length > 0 && (
+              <HoverMoreLabels
+                hiddenLabels={hiddenLabels}
+                labelIds={labelIds}
+                onToggle={toggle}
+                label={m.story_inline_moreLabels({ count: hiddenLabels.length })}
+              />
+            )}
+          </>
         )}
+        {/* 手动创建标签：输入名称回车/点按钮创建并自动选中；输入兼作匹配过滤 */}
+        <div className="mt-1 border-t border-border pt-1">
+          <div className="flex items-center gap-1 px-1">
+            <Input
+              value={newLabelName}
+              onChange={(e) => setNewLabelName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void createManualLabel();
+                }
+              }}
+              placeholder={m.story_inline_createLabelPlaceholder()}
+              className="h-7 flex-1 text-xs md:text-xs"
+              disabled={creating}
+              data-testid="labels-editor-create-input"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-7 shrink-0"
+              disabled={creating || !newLabelName.trim()}
+              aria-label={m.story_inline_createLabel()}
+              data-testid="labels-editor-create-btn"
+              onClick={() => void createManualLabel()}
+            >
+              {creating ? <Loader2 className="size-3.5 animate-spin" /> : <Plus className="size-3.5" />}
+            </Button>
+          </div>
+        </div>
         {aiEnabled && (
           <div className="border-t border-border mt-1 pt-1">
             {ai.phase === "idle" && (
@@ -270,4 +399,83 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
       </PopoverContent>
     </Popover>
   );
+}
+
+/** 「更多标签」二级菜单：hover 弹出（移入子菜单保持），箭头在文字右侧。 */
+function HoverMoreLabels({
+  hiddenLabels,
+  labelIds,
+  onToggle,
+  label,
+}: {
+  hiddenLabels: LabelLike[];
+  labelIds: string[];
+  onToggle: (id: string) => void;
+  label: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const openNow = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+    setOpen(true);
+  };
+  const scheduleClose = () => {
+    closeTimer.current = setTimeout(() => setOpen(false), 150);
+  };
+  useEffect(() => () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+
+  return (
+    <Popover open={open} onOpenChange={(v) => { if (!v) setOpen(false); else openNow(); }}>
+      <PopoverTrigger
+        render={
+          <button
+            type="button"
+            aria-expanded={open}
+            className={cn(
+              "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted",
+              open && "bg-muted",
+            )}
+            onMouseEnter={openNow}
+            onMouseLeave={scheduleClose}
+          >
+            {label}
+            <ChevronRight className="ml-auto size-3.5 shrink-0" />
+          </button>
+        }
+      />
+      <PopoverContent
+        className="w-44 p-1"
+        align="start"
+        side="right"
+        sideOffset={4}
+        onMouseEnter={openNow}
+        onMouseLeave={scheduleClose}
+      >
+        {hiddenLabels.map((l) => {
+          const active = labelIds.includes(l.id);
+          return (
+            <button
+              key={l.id}
+              type="button"
+              onClick={() => onToggle(l.id)}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+                active ? "bg-accent font-medium" : "hover:bg-muted",
+              )}
+            >
+              <span className="inline-block size-2.5 rounded-full shrink-0" style={{ backgroundColor: l.color }} />
+              {l.name}
+              {active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+            </button>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
 }

package/src/components/story/inline-editors/parent-story-editor.tsx

@@ -65,7 +65,7 @@ export function ParentStoryEditor({
           </span>
         </div>
       ) : (
-        <div className={cn("group relative flex items-center", className)}>
+        <div className={cn("group relative flex items-center overflow-x-auto whitespace-nowrap", className)}>
           <Button
             variant="ghost"
             size="sm"

package/src/components/story/inline-editors/priority-editor.tsx

@@ -37,11 +37,13 @@ interface PriorityEditorProps {
   className?: string;
   /** 渲染形态：chip=有值时显示 chip 边框（默认，筛选场景），button=始终 Button（列表/详情场景） */
   variant?: "chip" | "button";
+  /** open 状态外泄（协同 editing 标记挂点，任务 20） */
+  onOpenChange?: (open: boolean) => void;
 }
 
 const PRIORITIES: StoryPriority[] = ["urgent", "high", "medium", "low", "none"];
 
-export function PriorityEditor({ value, onChange, mode = "single", selected, onMultiChange, className, variant = "chip" }: PriorityEditorProps) {
+export function PriorityEditor({ value, onChange, mode = "single", selected, onMultiChange, className, variant = "chip", onOpenChange }: PriorityEditorProps) {
   const [open, setOpen] = useState(false);
   const isMulti = mode === "multi";
   const showChip = variant === "chip";
@@ -49,9 +51,9 @@ export function PriorityEditor({ value, onChange, mode = "single", selected, onM
   const triggerText = isMulti && selected && selected.length > 0 ? "" : (PRIORITY_LABEL[value]?.() ?? value);
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={(v) => { setOpen(v); onOpenChange?.(v); }}>
       {showChip && isMulti && selected && selected.length > 0 ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
             {selected.map((s) => (
               <span key={s} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
                 <PriorityIcon priority={s as StoryPriority} />
@@ -60,7 +62,7 @@ export function PriorityEditor({ value, onChange, mode = "single", selected, onM
             ))}
           </PopoverTrigger>
       ) : showChip && !isMulti ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
             <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
               <PriorityIcon priority={value} />
               <span className="text-xs">{triggerText}</span>

package/src/components/story/inline-editors/state-editor.tsx

@@ -36,9 +36,11 @@ interface StateEditorProps {
   className?: string;
   /** 渲染形态：chip=有值时显示 chip 边框（默认，筛选场景），button=始终 Button（列表/详情场景） */
   variant?: "chip" | "button";
+  /** open 状态外泄（协同 editing 标记挂点，任务 20） */
+  onOpenChange?: (open: boolean) => void;
 }
 
-export function StateEditor({ value, onChange, mode = "single", selected, onMultiChange, className, variant = "chip" }: StateEditorProps) {
+export function StateEditor({ value, onChange, mode = "single", selected, onMultiChange, className, variant = "chip", onOpenChange }: StateEditorProps) {
   const [open, setOpen] = useState(false);
   const Icon = STATE_ICON[value];
   const isMulti = mode === "multi";
@@ -47,9 +49,9 @@ export function StateEditor({ value, onChange, mode = "single", selected, onMult
   const showChip = variant === "chip";
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={(v) => { setOpen(v); onOpenChange?.(v); }}>
       {showChip && isMulti && selected && selected.length > 0 ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
             {selected.map((s) => {
               const st = STORY_STATES.find((st) => st.value === s);
               const SI = st ? STATE_ICON[st.value] : null;
@@ -63,7 +65,7 @@ export function StateEditor({ value, onChange, mode = "single", selected, onMult
             })}
           </PopoverTrigger>
       ) : showChip && !isMulti && value ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
             <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
               {Icon && <Icon className={cn("size-3", STATE_COLOR[value as StoryState].split(" ").find((c) => c.startsWith("text")))} />}
               <span className="text-xs">{triggerText}</span>