@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/shared-kit/list-kit/filters/index.tsx

@@ -0,0 +1,757 @@
+// 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/>.
+
+// list-kit filters 参数化运行时工厂（设计 §4.6 / UI 对齐一期 PR-3 任务 11）。
+// 以 story/filters 六组件为蓝本收拢：字段表（字段名/label/图标/fieldType）
+// 由 createFiltersModule(configs) 注入；字段值编辑器与值 chip 渲染经 options
+// 注入（story 的 StateEditor/PriorityEditor 等属各业务模块，不进共享层）；
+// 其余渲染逻辑/交互/hover 类与 story 原实现逐行一致。通用文案走 list_kit_* i18n 域。
+
+import { useCallback, useState } from "react";
+import {
+  Archive,
+  BrushCleaning,
+  CalendarIcon,
+  CopyPlus,
+  Plus,
+  X,
+} from "lucide-react";
+import { format, parseISO, isValid } from "date-fns";
+import type { DateRange } from "react-day-picker";
+import type { AvatarConfig } from "@allbluecn/kernel";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { FILTER_ACTIVE_ICON, FILTER_ICON } from "@/components/shared-kit/list-kit/icon-semantics";
+import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
+import type { FilterCondition, FilterFieldConfig, FilterOperator } from "./types";
+
+export { deserializeFilters, serializeFilters } from "./types";
+export type { FilterCondition, FilterFieldConfig, FilterFieldType, FilterOperator } from "./types";
+
+/** 日期行内短格式（设计 §5.2：行内短格式 = i18n key「M月D日」/「M/D」，
+ *  日期范围 chip 与范围编辑器触发器共用；禁硬编码 date-fns MM/dd） */
+function filterDateShort(d: Date): string {
+  return m.list_kit_filter_date_short({ month: d.getMonth() + 1, day: d.getDate() });
+}
+
+// ---------------------------------------------------------------------------
+// 注入上下文与共享 props 类型
+// ---------------------------------------------------------------------------
+
+// users 通道的结构化最小类型（story UserBrief 可结构化赋值；chip 渲染器
+// 消费 avatarConfig/bgColor/username，与 UserAvatar 的 props 对齐）
+export interface FilterUserLike {
+  id: string;
+  username: string;
+  email?: string;
+  avatarConfig?: AvatarConfig | null;
+  bgShape?: string | null;
+  bgColor?: string | null;
+}
+
+export interface FilterLabelLike {
+  id: string;
+  name: string;
+  color: string;
+}
+
+// folders 通道（UI 对齐二期 TC-B 任务 21 新增，story/bug 不消费）：testcase
+// 的 folder（模块）筛选字段值编辑器/chip 需要模块树花名册（id/name 两字段）。
+// 经独立通道注入而非复用 labels（labels 的 color 为必填且语义是标签色）。
+export interface FilterFolderLike {
+  id: string;
+  name: string;
+}
+
+export interface FilterValueEditorContext<K extends string = string> {
+  property: K;
+  operator: FilterOperator;
+  value: string;
+  multi: boolean;
+  selected: string[];
+  toggleMultiValue: (value: string) => void;
+  onChange: (value: string) => void;
+  users?: FilterUserLike[];
+  labels?: FilterLabelLike[];
+  folders?: FilterFolderLike[];
+}
+
+export interface FilterValueChipContext<K extends string = string> {
+  property: K;
+  valueItem: string;
+  users?: FilterUserLike[];
+  labels?: FilterLabelLike[];
+  folders?: FilterFolderLike[];
+}
+
+export interface FiltersModuleOptions<K extends string = string> {
+  // 字段值编辑器（原 FilterValueInput 的 property switch；缺省渲染 null）
+  renderValueEditor?: (ctx: FilterValueEditorContext<K>) => React.ReactNode;
+  // 值 chip 渲染器（原 AppliedFilters 的 ValueChip switch；缺省回落原样文本）
+  renderValueChip?: (ctx: FilterValueChipContext<K>) => React.ReactNode;
+  // 归档全部按钮的显隐判定（原 story hasArchiveableState；缺省恒显——随 onArchiveAll）
+  hasArchiveableConditions?: (conditions: FilterCondition<K>[]) => boolean;
+  // 归档全部按钮文案（归档属业务语义，无通用 key；缺省不渲染按钮）
+  archiveAllLabel?: () => string;
+  // 筛选开关按钮的 aria-label（bug 原 toggle 带无障碍标注；缺省不加属性）
+  toggleAriaLabel?: () => string;
+  // 按作用域解析可用字段键（任务 21，display resolveGroupKeys 同构）：testcase
+  // 的 folder 字段仅单项目 scope 可达，projectId 缺省（全部项目聚合）时从
+  // 添加下拉与字段切换隐藏；缺省恒为全部配置键（story/bug 行为不变）
+  resolveKeys?: (ctx: { projectId?: string }) => K[];
+}
+
+export interface FilterToggleProps<K extends string = string> {
+  visible: boolean;
+  conditions: FilterCondition<K>[];
+  onToggle: () => void;
+}
+
+export interface FilterRowProps<K extends string = string> {
+  conditions: FilterCondition<K>[];
+  onChange: (conditions: FilterCondition<K>[]) => void;
+  onClearAll: () => void;
+  onCancel?: () => void;
+  onSaveAsView?: () => void;
+  users?: FilterUserLike[];
+  labels?: FilterLabelLike[];
+  folders?: FilterFolderLike[];
+  /** 作用域项目（resolveKeys 消费；缺省 = 全部配置键） */
+  projectId?: string;
+}
+
+export interface AppliedFiltersProps<K extends string = string> {
+  conditions: FilterCondition<K>[];
+  onRemove: (id: string) => void;
+  onClearAll: () => void;
+  onArchiveAll?: () => void;
+  users?: FilterUserLike[];
+  labels?: FilterLabelLike[];
+  folders?: FilterFolderLike[];
+}
+
+export interface AddFilterDropdownProps<K extends string = string> {
+  conditions: FilterCondition<K>[];
+  onAdd: (property: K) => void;
+  /** 可用字段（经 resolveKeys 解析后的键序；缺省由 FilterRow 传全部配置键） */
+  configs?: FilterFieldConfig<K>[];
+}
+
+export interface FilterValueInputProps<K extends string = string> {
+  property: K;
+  operator: FilterOperator;
+  value: string;
+  onChange: (value: string) => void;
+  users?: FilterUserLike[];
+  labels?: FilterLabelLike[];
+  folders?: FilterFolderLike[];
+}
+
+export interface FiltersModule<K extends string = string> {
+  FilterToggle: (props: FilterToggleProps<K>) => React.ReactNode;
+  FilterRow: (props: FilterRowProps<K>) => React.ReactNode;
+  AppliedFilters: (props: AppliedFiltersProps<K>) => React.ReactNode;
+  AddFilterDropdown: (props: AddFilterDropdownProps<K>) => React.ReactNode;
+  FilterValueInput: (props: FilterValueInputProps<K>) => React.ReactNode;
+}
+
+// ---------------------------------------------------------------------------
+// 值 chip 公共片段（各业务模块 renderValueChip 复用；类串与回落 chip 单一来源）
+// ---------------------------------------------------------------------------
+
+export const FILTER_VALUE_CHIP_CLASS = "inline-flex items-center gap-1 px-1 py-0.5 leading-none";
+
+export function FilterFallbackValue({ value }: { value: string }) {
+  return <span className={cn(FILTER_VALUE_CHIP_CLASS, "whitespace-nowrap text-foreground")}>{value}</span>;
+}
+
+// ---------------------------------------------------------------------------
+// 通用操作符文案与默认条件（原 story/filters/filter-types.ts 同名层）
+// ---------------------------------------------------------------------------
+
+export const OPERATOR_LABELS: Record<FilterOperator, () => string> = {
+  is: m.list_kit_filter_operator_is,
+  is_not: m.list_kit_filter_operator_is_not,
+  is_any_of: m.list_kit_filter_operator_is_any_of,
+  is_not_any_of: m.list_kit_filter_operator_is_not_any_of,
+  is_empty: m.list_kit_filter_operator_is_empty,
+  is_not_empty: m.list_kit_filter_operator_is_not_empty,
+
+  before: m.list_kit_filter_operator_before,
+  after: m.list_kit_filter_operator_after,
+  on_or_before: m.list_kit_filter_operator_on_or_before,
+  on_or_after: m.list_kit_filter_operator_on_or_after,
+  between: m.list_kit_filter_operator_between,
+  contains: m.list_kit_filter_operator_contains,
+  not_contains: m.list_kit_filter_operator_not_contains,
+};
+
+let _idCounter = 0;
+export function generateConditionId(): string {
+  _idCounter++;
+  return `fc_${Date.now()}_${_idCounter}`;
+}
+
+export function createDefaultCondition<K extends string>(
+  configs: Record<K, FilterFieldConfig<K>>,
+  property: K,
+): FilterCondition<K> {
+  // own-property 守卫：存量视图 JSON 的 property 可能撞上 Object.prototype 键名
+  // （如 "constructor"，configs[key] 沿原型链取到 truthy 函数 → operators 为 undefined，
+  // OperatorSelect 渲染即崩页）；未命中 own 键一律回落首配置（保持旧 .find() 语义）。
+  const config = Object.hasOwn(configs, property)
+    ? configs[property]
+    : (Object.values(configs)[0] as FilterFieldConfig<K>);
+  return {
+    id: generateConditionId(),
+    property,
+    operator: config.defaultOperator,
+    value: config.defaultValue ?? "",
+  };
+}
+
+// ---------------------------------------------------------------------------
+// 工厂
+// ---------------------------------------------------------------------------
+
+export function createFiltersModule<K extends string>(
+  configs: Record<K, FilterFieldConfig<K>>,
+  options?: FiltersModuleOptions<K>,
+): FiltersModule<K> {
+  const configList = Object.values(configs) as FilterFieldConfig<K>[];
+
+  function getConfig(key: K): FilterFieldConfig<K> {
+    // 同 createDefaultCondition：own-property 守卫防原型链键名（如 "constructor"）取到脏值
+    return Object.hasOwn(configs, key) ? configs[key] : configList[0];
+  }
+
+  // resolveKeys 键数组 → 配置对象数组（未知键剔除；缺省恒为全部配置键序）
+  function resolveAvailableConfigs(projectId?: string | undefined): FilterFieldConfig<K>[] {
+    const resolved = options?.resolveKeys?.({ projectId });
+    if (!resolved) return configList;
+    return resolved
+      .filter((key) => Object.hasOwn(configs, key))
+      .map((key) => configs[key]);
+  }
+
+  function FilterToggle({ visible, conditions, onToggle }: FilterToggleProps<K>) {
+    const activeCount = conditions.length;
+    const hasActive = activeCount > 0;
+    const isOpen = visible || hasActive;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger render={
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={options?.toggleAriaLabel?.()}
+            onClick={onToggle}
+            className={cn(
+              "h-8 gap-1.5 px-2.5 text-sm font-normal relative",
+              hasActive && "border-primary/50 bg-primary/5 text-primary",
+              !hasActive && "text-muted-foreground",
+            )}
+          />
+        }>
+            {isOpen ? <FILTER_ACTIVE_ICON className="size-4" /> : <FILTER_ICON className="size-4" />}
+            {activeCount > 0 && (
+              <span className="flex size-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
+                {activeCount}
+              </span>
+            )}
+        </TooltipTrigger>
+        <TooltipContent>{isOpen ? m.list_kit_filter_cancel() : m.list_kit_filter_toggleOpen()}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  function AddFilterDropdown({ conditions, onAdd, configs: configOptions }: AddFilterDropdownProps<K>) {
+    const [open, setOpen] = useState(false);
+    const usedKeys = new Set(conditions.map((c) => c.property));
+    const available = (configOptions ?? configList).filter((c) => !usedKeys.has(c.key));
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger render={
+          <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" />
+            {m.list_kit_filter_addCondition()}
+        </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">{m.list_kit_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>{config.label()}</span>
+                </button>
+              );
+            })
+          )}
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  function FilterValueInput({ property, operator, value, onChange, users, labels, folders }: FilterValueInputProps<K>) {
+    const multi = operator === "is_any_of" || operator === "is_not_any_of";
+    const selected = value ? value.split(",").filter(Boolean) : [];
+
+    const handleMultiToggle = (val: string) => {
+      const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+      onChange(next.length ? next.join(",") : "");
+    };
+
+    if (!options?.renderValueEditor) return null;
+    return options.renderValueEditor({
+      property,
+      operator,
+      value,
+      multi,
+      selected,
+      toggleMultiValue: handleMultiToggle,
+      onChange,
+      users,
+      labels,
+      folders,
+    });
+  }
+
+  function FilterConditionRow({ condition, configs: configOptions, onChangeProperty, onChangeOperator, onChangeValue, onRemove, users, labels, folders }: {
+    condition: FilterCondition<K>;
+    /** 可用字段（FilterRow 经 resolveKeys 解析后传入；属性切换同受作用域约束） */
+    configs: FilterFieldConfig<K>[];
+    onChangeProperty: (property: K) => void;
+    onChangeOperator: (operator: FilterOperator) => void;
+    onChangeValue: (value: string) => void;
+    onRemove: () => void;
+    users?: FilterUserLike[];
+    labels?: FilterLabelLike[];
+    folders?: FilterFolderLike[];
+  }) {
+    const config = getConfig(condition.property);
+
+    const Icon = config.icon;
+
+    return (
+      <div className="inline-flex h-7 items-center rounded-sm border border-border bg-muted/30 text-xs">
+        <PropertySelect
+          current={condition.property}
+          options={configOptions}
+          onChange={onChangeProperty}
+        />
+
+        <div className="h-4 w-px bg-border" />
+
+        <OperatorSelect
+          current={condition.operator}
+          operators={config.operators}
+          onChange={onChangeOperator}
+        />
+
+        {condition.operator !== "is_empty" && condition.operator !== "is_not_empty" && (
+          <>
+            <div className="h-4 w-px bg-border" />
+            <div className="px-1.5">
+              <FilterValueInput
+                property={condition.property}
+                operator={condition.operator}
+                value={condition.value}
+                onChange={onChangeValue}
+                users={users}
+                labels={labels}
+                folders={folders}
+              />
+            </div>
+          </>
+        )}
+
+        <button
+          type="button"
+          onClick={onRemove}
+          className="flex size-7 shrink-0 items-center justify-center rounded-r-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+        >
+          <X className="size-3.5" />
+        </button>
+      </div>
+    );
+  }
+
+  function PropertySelect({ current, options: propertyOptions, onChange }: { current: K; options: FilterFieldConfig<K>[]; onChange: (key: K) => void }) {
+    const CurrentIcon = propertyOptions.find((o) => o.key === current)?.icon;
+    return (
+      <Popover>
+        <PopoverTrigger render={<button className="flex h-full items-center gap-1 rounded-l-sm px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
+            {CurrentIcon && <CurrentIcon className="size-3.5 shrink-0" />}
+            <span className="pr-1">{propertyOptions.find((o) => o.key === current)?.label() ?? current}</span>
+        </PopoverTrigger>
+        <PopoverContent className="w-40 p-1" align="start">
+          {propertyOptions.map((opt) => {
+            const OptIcon = opt.icon;
+            const active = opt.key === current;
+            return (
+              <button
+                key={opt.key}
+                type="button"
+                onClick={() => onChange(opt.key)}
+                className={cn("flex w-full items-center gap-2 rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
+              >
+                <OptIcon className="size-4 text-muted-foreground" />
+                <span>{opt.label()}</span>
+              </button>
+            );
+          })}
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  function OperatorSelect({ current, operators, onChange }: { current: FilterOperator; operators: FilterOperator[]; onChange: (op: FilterOperator) => void }) {
+    const isSingle = (op: FilterOperator) => op === "is" || op === "is_not";
+    const isMulti = (op: FilterOperator) => op === "is_any_of" || op === "is_not_any_of";
+
+    return (
+      <Popover>
+        <PopoverTrigger render={<button className="flex h-full items-center px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
+            {OPERATOR_LABELS[current]()}
+        </PopoverTrigger>
+        <PopoverContent className="w-40 p-1" align="start">
+          {operators.map((op) => {
+            const active = op === current;
+            return (
+              <button
+                key={op}
+                type="button"
+                onClick={() => onChange(op)}
+                className={cn("flex w-full items-center justify-between rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
+              >
+                <span>{OPERATOR_LABELS[op]()}</span>
+                {isSingle(op) && (
+                  <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.list_kit_filter_single()}</span>
+                )}
+                {isMulti(op) && (
+                  <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.list_kit_filter_multi()}</span>
+                )}
+              </button>
+            );
+          })}
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  function FilterRow({ conditions, onChange, onClearAll, onCancel, onSaveAsView, users, labels, folders, projectId }: FilterRowProps<K>) {
+    // 作用域键解析（resolveKeys）：添加下拉与属性切换共用同一份可用字段
+    const availableProperties = resolveAvailableConfigs(projectId);
+    const handleAdd = useCallback((property: K) => {
+      onChange([...conditions, createDefaultCondition(configs, property)]);
+    }, [conditions, onChange]);
+
+    const handleRemove = useCallback((id: string) => {
+      onChange(conditions.filter((c) => c.id !== id));
+    }, [conditions, onChange]);
+
+    const handleChangeProperty = useCallback((id: string, property: K) => {
+      const defaultOp = createDefaultCondition(configs, property);
+      onChange(conditions.map((c) => c.id === id ? { ...c, property, operator: defaultOp.operator, value: "" } : c));
+    }, [conditions, onChange]);
+
+    const handleChangeOperator = useCallback((id: string, operator: FilterOperator) => {
+      onChange(conditions.map((c) => c.id === id ? { ...c, operator, value: operator === "is_empty" || operator === "is_not_empty" ? "" : c.value } : c));
+    }, [conditions, onChange]);
+
+    const handleChangeValue = useCallback((id: string, value: string) => {
+      onChange(conditions.map((c) => c.id === id ? { ...c, value } : c));
+    }, [conditions, onChange]);
+
+    return (
+      <div className="flex w-full flex-wrap items-center gap-2 rounded-lg bg-muted/50 px-3 py-2 @container">
+        <div className="flex flex-1 flex-wrap items-center gap-1.5">
+          {conditions.length > 0 ? (
+            conditions.map((condition) => (
+              <FilterConditionRow
+                key={condition.id}
+                condition={condition}
+                configs={availableProperties}
+                onChangeProperty={(p) => handleChangeProperty(condition.id, p)}
+                onChangeOperator={(o) => handleChangeOperator(condition.id, o)}
+                onChangeValue={(v) => handleChangeValue(condition.id, v)}
+                onRemove={() => handleRemove(condition.id)}
+                users={users}
+                labels={labels}
+                folders={folders}
+              />
+            ))
+          ) : (
+            <span className="px-1 text-xs text-muted-foreground">{m.list_kit_filter_label()}</span>
+          )}
+          <div className="@max-[640px]:hidden">
+            <AddFilterDropdown conditions={conditions} onAdd={handleAdd} configs={availableProperties} />
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2 border-l border-border pl-3 @max-[640px]:w-full @max-[640px]:border-l-0 @max-[640px]:border-t @max-[640px]:pl-0 @max-[640px]:pt-2 @max-[640px]:justify-between">
+          <div className="hidden @max-[640px]:block">
+            <AddFilterDropdown conditions={conditions} onAdd={handleAdd} configs={availableProperties} />
+          </div>
+          <div className="flex items-center gap-2">
+            {conditions.length > 0 ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onClearAll}
+                className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <BrushCleaning className="size-3.5" />
+                {m.list_kit_filter_clear()}
+              </Button>
+            ) : onCancel ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onCancel}
+                className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <X className="size-3.5" />
+                {m.list_kit_filter_cancel()}
+              </Button>
+            ) : null}
+            {onSaveAsView && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onSaveAsView}
+                className="h-7 gap-1 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <CopyPlus className="size-3.5" />
+                {m.list_kit_filter_saveAsView()}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  function AppliedValueChip({ property, valueItem, users, labels, folders }: {
+    property: K;
+    valueItem: string;
+    users?: FilterUserLike[];
+    labels?: FilterLabelLike[];
+    folders?: FilterFolderLike[];
+  }) {
+    const custom = options?.renderValueChip?.({ property, valueItem, users, labels, folders });
+    if (custom !== undefined && custom !== null) return custom;
+    return <FallbackValue value={valueItem} />;
+  }
+
+  function FallbackValue({ value }: { value: string }) {
+    return <span className={cn(FILTER_VALUE_CHIP_CLASS, "whitespace-nowrap text-foreground")}>{value}</span>;
+  }
+
+  function DateRangeChip({ from, to }: { from: string; to: string }) {
+    const f = parseISO(from);
+    const t = parseISO(to);
+    return (
+      <span className={FILTER_VALUE_CHIP_CLASS}>
+        <CalendarIcon className="size-3 text-muted-foreground" />
+        <span className="whitespace-nowrap">
+          {isValid(f) ? filterDateShort(f) : from} ~ {isValid(t) ? filterDateShort(t) : to}
+        </span>
+      </span>
+    );
+  }
+  function AppliedFilters({ conditions, onRemove, onClearAll, onArchiveAll, users, labels, folders }: AppliedFiltersProps<K>) {
+    if (conditions.length === 0) return null;
+
+    const showArchiveAll =
+      !!onArchiveAll &&
+      !!options?.archiveAllLabel &&
+      (!options?.hasArchiveableConditions || options.hasArchiveableConditions(conditions));
+
+    return (
+      <div className="flex flex-wrap items-center gap-1.5">
+        {conditions.map((c) => {
+          const fieldConfig = getConfig(c.property);
+          const Icon = fieldConfig.icon;
+          const isRange = c.operator === "between";
+          const isEmptyOp = c.operator === "is_empty" || c.operator === "is_not_empty";
+          const valueItems = !isEmptyOp && c.value ? (fieldConfig.fieldType === "text" ? [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">{fieldConfig.label()}</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) => (
+                        <AppliedValueChip
+                          key={item}
+                          property={c.property}
+                          valueItem={item}
+                          users={users}
+                          labels={labels}
+                          folders={folders}
+                        />
+                      ))
+                    )}
+                  </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" />
+          {m.list_kit_filter_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" />
+            {options!.archiveAllLabel!()}
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  return { FilterToggle, FilterRow, AppliedFilters, AddFilterDropdown, FilterValueInput };
+}
+
+// ---------------------------------------------------------------------------
+// 通用日期值编辑器（原 story/filters/filter-value-input.tsx 的 DateSelect；
+// 无业务依赖，供各模块字段配置表的 date 字段复用）
+// ---------------------------------------------------------------------------
+
+function parseDate(value: string): Date | undefined {
+  const d = new Date(value);
+  return isNaN(d.getTime()) ? undefined : d;
+}
+
+export function FilterDateSelect({ operator, value, onChange }: { operator: FilterOperator; value: string; onChange: (v: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [range, setRange] = useState<DateRange | undefined>();
+
+  if (operator === "between") {
+    const from = range?.from;
+    const to = range?.to;
+
+    return (
+      <Popover
+        open={open}
+        onOpenChange={(o) => {
+          setOpen(o);
+          if (o) {
+            const parts = value ? value.split(",") : ["", ""];
+            const f = parseDate(parts[0]);
+            const t = parseDate(parts[1]);
+            setRange(f && t ? { from: f, to: t } : undefined);
+          }
+        }}
+      >
+        <PopoverTrigger render={<button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap" />}>
+            <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
+            {from && to ? `${filterDateShort(from)}~${filterDateShort(to)}` : m.list_kit_filter_selectRange()}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            defaultMonth={from ?? new Date()}
+            numberOfMonths={2}
+            min={1}
+            onSelect={(r) => {
+              setRange(r);
+              if (r?.from && r?.to) {
+                onChange([format(r.from, "yyyy-MM-dd"), format(r.to, "yyyy-MM-dd")].join(","));
+              }
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  const date = parseDate(value ?? "");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger render={<button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap" />}>
+          <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
+          {date ? format(date, "yyyy-MM-dd") : m.list_kit_filter_selectDate()}
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start" initialFocus={false} finalFocus={false}>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={(d) => {
+            if (d) {
+              onChange(format(d, "yyyy-MM-dd"));
+              setOpen(false);
+            }
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}