@allbluecn/web-app 0.3.0

package/src/components/story/display/use-paged-story-groups.ts

@@ -0,0 +1,362 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { StoryListItem, UserBrief } from "../types";
+import type { StoryFilters } from "../story-toolbar";
+import type { FilterCondition } from "../filters";
+import { serializeFilters } from "../filters";
+import { listStoriesInGroupFn, listStoryGroupsFn, listAllGroupsItemsFn } from "@/server/serverFns/story";
+import { resolveGroupLabel, resolveGroupIcon, resolveGroupColor } from "./group-resolver";
+import type { DisplayOptions, GroupContext, GroupKey, GroupNode } from "./types";
+
+/** 服务端按组分页的组节点：在 GroupNode 上标记 total/hasMore/loading */
+export interface PagedGroupNode extends GroupNode {
+  items: StoryListItem[];
+  subGroups?: PagedGroupNode[];
+  total?: number;
+  hasMore?: boolean;
+  loading?: boolean;
+}
+
+export interface PagedStoriesArgs {
+  filters: StoryFilters;
+  conditions: FilterCondition[];
+  display: DisplayOptions;
+  users: UserBrief[];
+  labels: GroupContext["labels"];
+  projects: GroupContext["projects"];
+  /** 仅 view === "list" 时启用分页预取，避免非 list 视图发起无谓请求 */
+  enabled?: boolean;
+}
+
+type PageState = {
+  /** 本次已加载数据对应的 signature，用于丢弃过期请求结果 */
+  sig: string;
+  groups: PagedGroupNode[];
+  isLoading: boolean;
+};
+
+/** 首次加载前发给组内分页 serverFn 的公共过滤参数 */
+type GroupQueryParams = {
+  archived: boolean;
+  projectId?: string;
+  search?: string;
+  filters?: string;
+};
+
+function buildGroupParams(filters: StoryFilters, conditions: FilterCondition[]): GroupQueryParams {
+  const isArchived = filters.projectId === "__archived__";
+  return {
+    archived: isArchived,
+    projectId: isArchived ? undefined : filters.projectId,
+    search: filters.search,
+    filters: serializeFilters(conditions),
+  };
+}
+
+const UNGROUPED_KEY = "all";
+
+export function usePagedStoryGroups(args: PagedStoriesArgs): {
+  groups: PagedGroupNode[];
+  isLoading: boolean;
+  loadMore: (groupKey: string, subGroupKey?: string) => void;
+  refresh: () => void;
+} {
+  const { filters, conditions, display, users, labels, projects, enabled = true } = args;
+  const { t } = useTranslation("story");
+  const groupBy = display.groupBy;
+  const subGroupBy = display.subGroupBy;
+  const pageSize = display.pageSize;
+
+  const [refreshTick, setRefreshTick] = useState(0);
+
+  const sig = useMemo(
+    () =>
+      JSON.stringify([
+        filters,
+        conditions,
+        groupBy,
+        display.subGroupBy,
+        display.orderBy,
+        display.orderDir,
+        pageSize,
+        enabled,
+        refreshTick,
+      ]),
+    [filters, conditions, groupBy, display.subGroupBy, display.orderBy, display.orderDir, pageSize, enabled, refreshTick],
+  );
+
+  const [state, setState] = useState<PageState>({
+    sig: "",
+    groups: [],
+    isLoading: true,
+  });
+
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+
+  const requestRef = useRef<{ sig: string; groupBy: typeof groupBy; subGroupBy: GroupKey; pageSize: number; orderBy: typeof display.orderBy; orderDir: typeof display.orderDir; base: GroupQueryParams }>({
+    sig,
+    groupBy,
+    subGroupBy,
+    pageSize,
+    orderBy: display.orderBy,
+    orderDir: display.orderDir,
+    base: buildGroupParams(filters, conditions),
+  });
+  requestRef.current = { sig, groupBy, subGroupBy, pageSize, orderBy: display.orderBy, orderDir: display.orderDir, base: buildGroupParams(filters, conditions) };
+
+  const loadingKeysRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!enabled) return;
+    let alive = true;
+    setState((s) => ({ ...s, isLoading: true }));
+
+    const ctx: GroupContext = { users, labels, projects };
+    const base = buildGroupParams(filters, conditions);
+
+    (async () => {
+      try {
+        const groupInfos =
+          groupBy === "none"
+            ? [{ key: UNGROUPED_KEY, total: 0 }]
+            : (
+                await listStoryGroupsFn({
+                  data: { ...base, groupBy, showEmptyGroups: display.showEmptyGroups },
+                })
+              ).groups;
+
+        const scaffolds: PagedGroupNode[] = groupInfos.map((g) => ({
+          key: g.key,
+          label: groupBy === "none" ? t("group.all") : resolveGroupLabel(g.key, groupBy, ctx, t),
+          icon: groupBy === "none" ? undefined : resolveGroupIcon(g.key, groupBy, ctx),
+          color: resolveGroupColor(g.key, groupBy),
+          items: [],
+          subGroups: [],
+          total: g.total,
+        }));
+
+        if (subGroupBy !== "none") {
+          // 子组模式：按顶层组枚举子组 keys，并并发加载各子组首屏；父组不直接装 item
+          await Promise.all(
+            scaffolds.map(async (g) => {
+              const subGroupsInfo = (
+                await listStoryGroupsFn({
+                  data: {
+                    ...base,
+                    groupBy: subGroupBy,
+                    parentGroupBy: groupBy,
+                    parentGroupKey: g.key,
+                  },
+                })
+              ).groups;
+              const subScaffolds: PagedGroupNode[] = subGroupsInfo.map((sg) => ({
+                key: sg.key,
+                label: resolveGroupLabel(sg.key, subGroupBy, ctx, t),
+                icon: resolveGroupIcon(sg.key, subGroupBy, ctx),
+                color: resolveGroupColor(sg.key, subGroupBy),
+                items: [],
+                total: sg.total,
+              }));
+              const subLoaded = await Promise.all(
+                subScaffolds.map((sg) =>
+                  listStoriesInGroupFn({
+                    data: {
+                      ...base,
+                      groupBy,
+                      groupKey: g.key,
+                      subGroupBy,
+                      subGroupKey: sg.key,
+                      orderBy: display.orderBy,
+                      orderDir: display.orderDir,
+                      skip: 0,
+                      take: pageSize,
+                    },
+                  }).catch(() => ({ items: [] as StoryListItem[], total: sg.total ?? 0, hasMore: false })),
+                ),
+              );
+              subLoaded.forEach((res, i) => {
+                subScaffolds[i].items = res.items;
+                subScaffolds[i].total = res.total;
+                subScaffolds[i].hasMore = res.hasMore;
+              });
+              g.subGroups = subScaffolds;
+              g.totalCount = subScaffolds.reduce((sum, sg) => sum + (sg.total ?? sg.items.length), 0);
+            }),
+          );
+        } else if (groupBy !== "none" && groupBy !== "labels") {
+          const itemsData = await listAllGroupsItemsFn({
+            data: {
+              ...base,
+              groupBy,
+              orderBy: display.orderBy,
+              orderDir: display.orderDir,
+              skip: 0,
+              take: pageSize,
+              groupCount: groupInfos.length,
+            },
+          }).catch(() => ({ grouped: {} as Record<string, StoryListItem[]> }));
+          const itemsByGroup = itemsData.grouped as Record<string, StoryListItem[]>;
+          scaffolds.forEach((s) => {
+            s.items = itemsByGroup[s.key] ?? [];
+            s.hasMore = s.total != null ? s.items.length < s.total : s.items.length >= pageSize;
+          });
+        } else {
+          const loaded = await Promise.all(
+            scaffolds.map((g) =>
+              listStoriesInGroupFn({
+                data: { ...base, groupBy, groupKey: g.key, orderBy: display.orderBy, orderDir: display.orderDir, skip: 0, take: pageSize },
+              }).catch(() => ({ items: [] as StoryListItem[], total: g.total ?? 0, hasMore: false })),
+            ),
+          );
+          loaded.forEach((res, i) => {
+            scaffolds[i].items = res.items;
+            scaffolds[i].total = res.total;
+            scaffolds[i].hasMore = res.hasMore;
+          });
+        }
+
+        if (alive) setState({ sig, groups: scaffolds, isLoading: false });
+      } catch {
+        if (alive) setState((s) => ({ ...s, isLoading: false }));
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+    // 闭包内的过滤/分组参数均编码进 sig，仅 sig 变化时重载
+  }, [sig]);
+
+  const loadMore = useCallback((containerKey: string, subContainerKey?: string) => {
+    const { sig: currentSig, base, groupBy, subGroupBy, pageSize, orderBy, orderDir } = requestRef.current;
+    const snapshot = stateRef.current;
+    if (snapshot.sig !== currentSig) return;
+    const group = snapshot.groups.find((g) => g.key === containerKey);
+    if (!group) return;
+    const target = subContainerKey
+      ? group.subGroups?.find((sg) => sg.key === subContainerKey)
+      : group;
+    if (!target || target.loading || !target.hasMore) return;
+    const loadKey = subContainerKey ? `${containerKey}/${subContainerKey}` : containerKey;
+    if (loadingKeysRef.current.has(loadKey)) return;
+    loadingKeysRef.current.add(loadKey);
+
+    setState((prev) => {
+      if (prev.sig !== currentSig) return prev;
+      return {
+        ...prev,
+        groups: prev.groups.map((g) => {
+          if (g.key !== containerKey) return g;
+          if (subContainerKey) {
+            return {
+              ...g,
+              subGroups: (g.subGroups ?? []).map((sg) =>
+                sg.key === subContainerKey ? { ...sg, loading: true } : sg,
+              ),
+            };
+          }
+          return { ...g, loading: true };
+        }),
+      };
+    });
+
+    void listStoriesInGroupFn({
+      data: {
+        ...base,
+        groupBy,
+        groupKey: containerKey,
+        subGroupBy: subContainerKey ? subGroupBy : "none",
+        subGroupKey: subContainerKey ?? "",
+        orderBy,
+        orderDir,
+        skip: target.items.length,
+        take: pageSize,
+      },
+    })
+      .then((res) => {
+        loadingKeysRef.current.delete(loadKey);
+        setState((prev) => {
+          if (prev.sig !== currentSig) return prev;
+          const g = prev.groups.find((x) => x.key === containerKey);
+          if (!g) return prev;
+          if (subContainerKey) {
+            const updatedSubGroups = (g.subGroups ?? []).map((s) =>
+              s.key === subContainerKey
+                ? {
+                    ...s,
+                    items: [...s.items, ...res.items.filter((si) => !new Set(s.items.map((x) => x.id)).has(si.id))],
+                    total: res.total,
+                    hasMore: res.hasMore,
+                    loading: false,
+                  }
+                : s,
+            );
+            const newTotalCount = updatedSubGroups.reduce((sum, sg) => sum + (sg.total ?? sg.items.length), 0);
+            return {
+              ...prev,
+              groups: prev.groups.map((x) =>
+                x.key === containerKey
+                  ? { ...x, subGroups: updatedSubGroups, totalCount: newTotalCount }
+                  : x,
+              ),
+            };
+          }
+          const known = new Set(g.items.map((s) => s.id));
+          const fresh = res.items.filter((s) => !known.has(s.id));
+          return {
+            ...prev,
+            groups: prev.groups.map((x) =>
+              x.key === containerKey
+                ? { ...x, items: [...x.items, ...fresh], total: res.total, hasMore: res.hasMore, loading: false }
+                : x,
+            ),
+          };
+        });
+      })
+      .catch(() => {
+        loadingKeysRef.current.delete(loadKey);
+        setState((prev) => {
+          if (prev.sig !== currentSig) return prev;
+          return {
+            ...prev,
+            groups: prev.groups.map((g) => {
+              if (g.key !== containerKey) return g;
+              if (subContainerKey) {
+                return {
+                  ...g,
+                  subGroups: (g.subGroups ?? []).map((sg) =>
+                    sg.key === subContainerKey ? { ...sg, loading: false } : sg,
+                  ),
+                };
+              }
+              return { ...g, loading: false };
+            }),
+          };
+        });
+      });
+  }, []);
+
+  const refresh = useCallback(() => setRefreshTick((t) => t + 1), []);
+
+  return { groups: state.groups, isLoading: state.isLoading, loadMore, refresh };
+}

package/src/components/story/filters/add-filter-dropdown.tsx

@@ -0,0 +1,71 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// 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 { useTranslation } from "react-i18next";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { FILTER_FIELD_CONFIGS, getFilterIcon, type FilterKey, type FilterCondition } from "./filter-types";
+
+interface AddFilterDropdownProps {
+  conditions: FilterCondition[];
+  onAdd: (property: FilterKey) => void;
+}
+
+export function AddFilterDropdown({ conditions, onAdd }: AddFilterDropdownProps) {
+  const { t } = useTranslation("story");
+  const [open, setOpen] = useState(false);
+  const usedKeys = new Set(conditions.map((c) => c.property));
+  const available = FILTER_FIELD_CONFIGS.filter((c) => !usedKeys.has(c.key));
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={available.length === 0}
+          className="h-7 gap-1 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
+        >
+          <Plus className="size-3.5" />
+          {t("filter.addCondition")}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-48 p-1" align="start">
+        {available.length === 0 ? (
+          <div className="px-2 py-4 text-center text-xs text-muted-foreground">{t("filter.allAdded")}</div>
+        ) : (
+          available.map((config) => {
+            const Icon = config.icon;
+            return (
+              <button
+                key={config.key}
+                type="button"
+                onClick={() => { onAdd(config.key); setOpen(false); }}
+                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted transition-colors"
+              >
+                <Icon className="size-4 text-muted-foreground shrink-0" />
+                <span>{t(config.label)}</span>
+              </button>
+            );
+          })
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/story/filters/applied-filters.tsx

@@ -0,0 +1,227 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// 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 { X, Calendar, CircleUser, Archive, BrushCleaning } from "lucide-react";
+import { format, parseISO, isValid } from "date-fns";
+import { Button } from "@/components/ui/button";
+import { UserAvatar } from "@allbluecn/ui";
+import { PriorityIcon } from "../priority-icon";
+import { STORY_STATES, STATE_ICON, PRIORITY_LABEL, type StoryState, type StoryPriority } from "../constants";
+import { getFilterLabel, getFilterIcon, type FilterCondition, type FilterKey } from "./filter-types";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+import type { UserBrief } from "../types";
+
+interface AppliedFiltersProps {
+  conditions: FilterCondition[];
+  onRemove: (id: string) => void;
+  onClearAll: () => void;
+  onArchiveAll?: () => void;
+  users?: UserBrief[];
+  labels?: { id: string; name: string; color: string }[];
+}
+
+const valueChipClass = "inline-flex items-center gap-1 px-1 py-0.5 leading-none";
+
+export function AppliedFilters({ conditions, onRemove, onClearAll, onArchiveAll, users, labels }: AppliedFiltersProps) {
+  const { t } = useTranslation("story");
+  if (conditions.length === 0) return null;
+
+  const showArchiveAll = !!onArchiveAll && hasArchiveableState(conditions);
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {conditions.map((c) => {
+        const Icon = getFilterIcon(c.property);
+        const isRange = c.operator === "between";
+        const isEmptyOp = c.operator === "is_empty" || c.operator === "is_not_empty";
+        const valueItems = !isEmptyOp && c.value ? (c.property === "title" ? [c.value] : c.value.split(",").filter(Boolean)) : [];
+
+        return (
+          <span
+            key={c.id}
+            className="inline-flex h-7 items-center rounded-full border border-border bg-muted/30 text-xs"
+          >
+            <span className="flex h-full items-center gap-1 rounded-l-full pl-2 pr-1.5 text-foreground">
+              <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+              <span className="whitespace-nowrap font-medium">{t(getFilterLabel(c.property))}</span>
+            </span>
+
+            {!isEmptyOp && valueItems.length > 0 && (
+              <>
+                <div className="h-4 w-px bg-border" />
+                <span className={cn("flex h-full items-center px-1.5", valueItems.length > 1 ? "gap-1.5" : "gap-1")}>
+                  {isRange && valueItems.length === 2 ? (
+                    <DateRangeChip from={valueItems[0]} to={valueItems[1]} />
+                  ) : (
+                    valueItems.map((item) => (
+                      <ValueChip
+                        key={item}
+                        property={c.property}
+                        valueItem={item}
+                        users={users}
+                        labels={labels}
+                      />
+                    ))
+                  )}
+                </span>
+              </>
+            )}
+
+            <button
+              type="button"
+              onClick={() => onRemove(c.id)}
+              className="flex size-7 shrink-0 items-center justify-center rounded-r-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            >
+              <X className="size-3.5" />
+            </button>
+          </span>
+        );
+      })}
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onClearAll}
+        className="h-7 rounded px-2 text-xs text-muted-foreground hover:text-foreground"
+      >
+        <BrushCleaning className="mr-1 size-3.5" />
+        {t("filters.clearAll")}
+      </Button>
+      {showArchiveAll && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onArchiveAll}
+          className="h-7 rounded px-2 text-xs text-muted-foreground hover:text-foreground"
+        >
+          <Archive className="mr-1 size-3.5" />
+          {t("filters.archiveAll")}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function ValueChip({
+  property,
+  valueItem,
+  users,
+  labels,
+}: {
+  property: FilterKey;
+  valueItem: string;
+  users?: UserBrief[];
+  labels?: { id: string; name: string; color: string }[];
+}) {
+  const { t } = useTranslation("story");
+  switch (property) {
+    case "state": {
+      const st = STORY_STATES.find((s) => s.value === valueItem);
+      if (!st) return <FallbackValue value={valueItem} />;
+      const SI = STATE_ICON[st.value];
+      const tc = st.color.split(" ").find((c) => c.startsWith("text")) ?? "";
+      return (
+        <span className={valueChipClass}>
+          <SI className={cn("size-3", tc)} />
+          <span className={cn("whitespace-nowrap", tc)}>{t(st.label)}</span>
+        </span>
+      );
+    }
+    case "priority": {
+      const p = valueItem as StoryPriority;
+      return (
+        <span className={valueChipClass}>
+          <PriorityIcon priority={p} />
+          <span className="whitespace-nowrap">{t(PRIORITY_LABEL[p] ?? valueItem)}</span>
+        </span>
+      );
+    }
+    case "assigneeId": {
+      if (valueItem === "__none__") {
+        return (
+          <span className={valueChipClass}>
+            <CircleUser className="size-3 text-muted-foreground" />
+            <span className="whitespace-nowrap text-muted-foreground">{t("filter.unassignedAssignee")}</span>
+          </span>
+        );
+      }
+      const u = users?.find((user) => user.id === valueItem);
+      if (!u) return <FallbackValue value={valueItem} />;
+      return (
+        <span className={valueChipClass}>
+          <UserAvatar
+            avatarConfig={u.avatarConfig}
+            bgShape="circle"
+            bgColor={u.bgColor}
+            name={u.username}
+            size="xs"
+            className="!w-4 !h-4"
+          />
+          <span className="whitespace-nowrap">{u.username}</span>
+        </span>
+      );
+    }
+    case "labelId": {
+      const l = labels?.find((lb) => lb.id === valueItem);
+      if (!l) return <FallbackValue value={valueItem} />;
+      return (
+        <span className={valueChipClass}>
+          <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
+          <span className="whitespace-nowrap">{l.name}</span>
+        </span>
+      );
+    }
+    case "createdDate":
+    case "targetDate": {
+      const d = parseISO(valueItem);
+      return (
+        <span className={valueChipClass}>
+          <Calendar className="size-3 text-muted-foreground" />
+          <span className="whitespace-nowrap">{isValid(d) ? format(d, "MM/dd") : valueItem}</span>
+        </span>
+      );
+    }
+    default:
+      return <FallbackValue value={valueItem} />;
+  }
+}
+
+function DateRangeChip({ from, to }: { from: string; to: string }) {
+  const f = parseISO(from);
+  const t = parseISO(to);
+  return (
+    <span className={valueChipClass}>
+      <Calendar className="size-3 text-muted-foreground" />
+      <span className="whitespace-nowrap">
+        {isValid(f) ? format(f, "MM/dd") : from} ~ {isValid(t) ? format(t, "MM/dd") : to}
+      </span>
+    </span>
+  );
+}
+
+function FallbackValue({ value }: { value: string }) {
+  return <span className={cn(valueChipClass, "whitespace-nowrap text-foreground")}>{value}</span>;
+}
+
+function hasArchiveableState(conditions: FilterCondition[]): boolean {
+  return conditions.some((c) => {
+    if (c.property !== "state") return false;
+    if (c.operator === "is_not" || c.operator === "is_not_any_of") return false;
+    const values = c.value.split(",").filter(Boolean);
+    return values.some((v) => v === "done" || v === "cancelled");
+  });
+}