@allbluecn/web-app 0.18.3 → 0.19.0

package/src/components/bug/views/create-view-dialog.tsx

@@ -0,0 +1,160 @@
+// 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/>.
+
+// 创建（保存）/编辑筛选视图对话框（testcase 同名件底座 + story 同名件的内嵌
+// FilterRow 形态：BUG 筛选为 FilterCondition 体系，与 story 同构，对话框内嵌
+// BugFilterRow 采集/回填筛选条件；BugFilterView 无 description 列，表单只有
+// name/icon + 筛选条件）。filters 键集收敛与 serverFn 调用由父组件（bug-list-view）
+// 完成——本组件零 serverFn 依赖，纯展示提交。表单控件一律 ui 组件（Input，
+// AGENTS.md 禁原生表单控件），Enter 提交、Esc 关闭（Dialog 默认）。
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
+import { BugFilterRow, type FilterCondition } from "../filters";
+import type { UserBrief } from "@/components/story/types";
+import { m } from "@/paraglide/messages.js";
+
+export interface CreateViewDialogPayload {
+  /** 编辑态必带（update 路由依据）；创建态 undefined */
+  id?: string;
+  name: string;
+  icon: string;
+  /** UI 形状的筛选条件（父组件经 toViewFilters 收敛三键后落库） */
+  filters: FilterCondition[];
+}
+
+export interface CreateViewDialogInitialValues {
+  /** 编辑态：被编辑视图 id（随 payload 原样带回） */
+  id?: string;
+  name: string;
+  icon: string;
+  /** 编辑态回填被编辑视图筛选；创建态快照当前页面筛选 */
+  filters: FilterCondition[];
+}
+
+interface CreateViewDialogProps {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  mode: "create" | "edit";
+  initialValues: CreateViewDialogInitialValues;
+  /** 成员花名册（FilterRow 值编辑器/chip 消费） */
+  users: UserBrief[];
+  /** 标签花名册（FilterRow 值编辑器/chip 消费） */
+  labels: { id: string; name: string; color: string }[];
+  onSubmit: (payload: CreateViewDialogPayload) => Promise<void>;
+}
+
+export function CreateViewDialog({ open, onOpenChange, mode, initialValues, users, labels, onSubmit }: CreateViewDialogProps) {
+  const [name, setName] = useState(initialValues.name);
+  const [icon, setIcon] = useState(initialValues.icon);
+  const [conditions, setConditions] = useState<FilterCondition[]>(initialValues.filters);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setName(initialValues.name);
+      setIcon(initialValues.icon);
+      setConditions(initialValues.filters);
+      setSubmitting(false);
+      setError("");
+    }
+  }, [open, initialValues]);
+
+  const handleSubmit = async () => {
+    if (!name.trim() || submitting) return;
+    setSubmitting(true);
+    setError("");
+    try {
+      await onSubmit({
+        id: mode === "edit" ? initialValues.id : undefined,
+        name: name.trim(),
+        icon,
+        filters: conditions,
+      });
+      onOpenChange(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : m.bug_view_saveFailed());
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-160">
+        <DialogHeader>
+          <DialogTitle className="text-lg">
+            {mode === "edit" ? m.bug_view_editView() : m.bug_view_createView()}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <LucideIconPicker
+              value={icon}
+              onChange={(v: string) => setIcon(v)}
+              modal
+            />
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") void handleSubmit();
+              }}
+              placeholder={m.bug_view_namePlaceholder()}
+              maxLength={50}
+            />
+          </div>
+
+          <div className="space-y-1">
+            <span className="text-xs font-medium text-muted-foreground">{m.bug_view_filterConditions()}</span>
+            {conditions.length === 0 && mode === "create" && (
+              <p className="text-xs text-muted-foreground">{m.bug_view_filterEmpty()}</p>
+            )}
+            <BugFilterRow
+              conditions={conditions}
+              onChange={setConditions}
+              onClearAll={() => setConditions([])}
+              users={users}
+              labels={labels}
+            />
+          </div>
+        </div>
+
+        {error && <p className="break-words text-sm text-destructive">{error}</p>}
+
+        <DialogFooter className="items-center gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
+            {m.bug_view_cancel()}
+          </Button>
+          <Button onClick={() => void handleSubmit()} disabled={submitting || !name.trim()}>
+            {submitting ? m.bug_view_saving() : m.bug_view_save()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/bug/views/view-list-section.tsx

@@ -0,0 +1,140 @@
+// 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/>.
+
+// 显示选项下拉的视图管理区（仿 story/views/view-list-section 同名件裁剪）：
+// 可折叠「视图」分组头 + 行内应用/编辑/删除 + 右上「创建视图」入口。BUG 视图为
+// userId 维度全局平铺（BugFilterView.projectId 本期不参与分组/应用语义），无
+// story 的跨项目分组段。经 DisplayDropdown 的 beforeOptions 插槽渲染（story 同位）。
+import { useState } from "react";
+import { Check, ChevronDown, ChevronRight, Pencil, Plus, Trash2 } from "lucide-react";
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import { cn } from "@/lib/utils";
+import { ViewIcon } from "@/components/shared-kit/views/view-icon";
+import type { BugViewModel } from "./view-types";
+import { m } from "@/paraglide/messages.js";
+
+interface BugViewListSectionProps {
+  views: BugViewModel[];
+  activeViewId: string;
+  onApplyView: (view: BugViewModel) => void;
+  onEditView: (view: BugViewModel) => void;
+  onDeleteView: (view: BugViewModel) => void;
+  onAddView: () => void;
+}
+
+export function BugViewListSection({ views, activeViewId, onApplyView, onEditView, onDeleteView, onAddView }: BugViewListSectionProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div data-section="views" className="border-t px-3 py-2">
+      <div className="mb-1 flex w-full items-center gap-1 text-xs font-medium text-muted-foreground">
+        <button type="button" onClick={() => setCollapsed(!collapsed)} className="flex items-center gap-1 hover:text-foreground">
+          {collapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
+          {m.bug_view_title()}
+        </button>
+        <button
+          type="button"
+          aria-label={m.bug_view_create()}
+          onClick={onAddView}
+          className="ml-auto grid size-5 place-items-center rounded hover:bg-muted hover:text-foreground"
+        >
+          <Plus className="size-3.5" />
+        </button>
+      </div>
+
+      {!collapsed && (
+        <div className="flex flex-col gap-0.5">
+          {views.length === 0 && (
+            <span className="px-1.5 py-1 text-xs text-muted-foreground">{m.bug_view_noViews()}</span>
+          )}
+          {views.map((view) => (
+            <ViewRow
+              key={view.id}
+              view={view}
+              active={view.id === activeViewId}
+              onApply={() => onApplyView(view)}
+              onEdit={() => onEditView(view)}
+              onDelete={() => onDeleteView(view)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ViewRowProps {
+  view: BugViewModel;
+  active: boolean;
+  onApply: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+function ViewRow({ view, active, onApply, onEdit, onDelete }: ViewRowProps) {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  return (
+    <div className="group flex items-center gap-2 rounded-sm px-1.5 py-1 text-xs hover:bg-muted">
+      <button
+        type="button"
+        onClick={onApply}
+        className="flex flex-1 items-center gap-2 text-left"
+      >
+        <span
+          className={cn(
+            "grid size-3.5 shrink-0 place-items-center rounded-full border",
+            active ? "border-primary bg-primary text-primary-foreground" : "border-border",
+          )}
+        >
+          {active && <Check className="size-2.5" strokeWidth={3} />}
+        </span>
+        <ViewIcon name={view.icon} className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="truncate text-foreground">{view.name}</span>
+      </button>
+      {!view.isBuiltIn && (
+        <div className="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100">
+          <button
+            type="button"
+            aria-label={m.bug_view_edit()}
+            onClick={onEdit}
+            className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-foreground"
+          >
+            <Pencil className="size-3" />
+          </button>
+          <ConfirmDialog
+            open={confirmOpen}
+            onOpenChange={setConfirmOpen}
+            trigger={
+              <button
+                type="button"
+                aria-label={m.bug_view_delete()}
+                className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-destructive"
+              >
+                <Trash2 className="size-3" />
+              </button>
+            }
+            title={m.bug_view_deleteTitle()}
+            description={m.bug_view_deleteConfirmMsg({ name: view.name })}
+            cancelLabel={m.bug_view_cancel()}
+            confirmLabel={m.bug_view_deleteConfirm()}
+            onConfirm={() => { onDelete(); setConfirmOpen(false); }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/bug/views/view-selector-button.tsx

@@ -0,0 +1,145 @@
+// 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/>.
+
+// 保存视图选择器（仿 testcase/views/view-selector-button 同名件，任务 22 完整
+// 形态：视图行 hover 显编辑/删除入口、删除走 ConfirmDialog、底部「创建视图」
+// 入口）。BUG 视图为 userId 维度全局平铺（BugFilterView 无 icon 列，icon 由
+// view-types 从 displayOptions JSON 抽出），不做 story 的跨项目分组。视图行操作
+// 按钮只挂 aria-label（AGENTS.md 禁 HTML title；testcase 蓝本残留 title 不复制）。
+import { useState } from "react";
+import { Check, ChevronsUpDown, Pencil, Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { ViewIcon } from "@/components/shared-kit/views/view-icon";
+import type { BugViewModel } from "./view-types";
+import { m } from "@/paraglide/messages.js";
+
+interface ViewSelectorButtonProps {
+  /** 含内置默认视图在内的完整视图列表（首位为默认视图） */
+  views: BugViewModel[];
+  activeViewId: string;
+  onApplyView: (view: BugViewModel) => void;
+  onEditView: (view: BugViewModel) => void;
+  onDeleteView: (view: BugViewModel) => void;
+  onAddView: () => void;
+}
+
+export function ViewSelectorButton({ views, activeViewId, onApplyView, onEditView, onDeleteView, onAddView }: ViewSelectorButtonProps) {
+  const [open, setOpen] = useState(false);
+  const active = views.find((v) => v.id === activeViewId);
+
+  const handleApply = (view: BugViewModel) => {
+    onApplyView(view);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger render={<Button variant="ghost" size="sm" className="h-8 shrink-0 gap-1.5 border-0 px-2.5 font-medium text-muted-foreground hover:text-foreground @max-[1000px]:border @max-[1000px]:border-border @max-[1000px]:bg-background dark:@max-[1000px]:border-input dark:@max-[1000px]:bg-input/30 @max-[1000px]:px-2" />}>
+        <ViewIcon name={active?.icon} className="size-4" />
+        <span className="max-w-40 truncate @max-[1000px]:hidden">{active?.name ?? m.bug_view_default()}</span>
+        <ChevronsUpDown className="size-3 @max-[1000px]:hidden" />
+      </PopoverTrigger>
+      <PopoverContent className="w-52 p-1" align="start">
+        {views.length === 0 && (
+          <span className="block px-2 py-1.5 text-sm text-muted-foreground">{m.bug_view_noViews()}</span>
+        )}
+        <div className="[&>div+div]:mt-0.5">
+          {views.map((view) => (
+            <ViewRow
+              key={view.id}
+              view={view}
+              active={view.id === activeViewId}
+              onApply={() => handleApply(view)}
+              onEdit={() => { onEditView(view); setOpen(false); }}
+              onDelete={() => onDeleteView(view)}
+            />
+          ))}
+        </div>
+        {views.length > 0 && <Separator orientation="horizontal" data-horizontal className="-my-1.5" />}
+        <button
+          type="button"
+          onClick={() => { onAddView(); setOpen(false); }}
+          className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <Plus className="size-4" />
+          {m.bug_view_create()}
+        </button>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface ViewRowProps {
+  view: BugViewModel;
+  active: boolean;
+  onApply: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+function ViewRow({ view, active, onApply, onEdit, onDelete }: ViewRowProps) {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  return (
+    <div className={cn("group flex items-center gap-0.5 rounded px-2 py-1.5 text-sm hover:bg-muted", active && "bg-accent font-medium")}>
+      <button
+        type="button"
+        onClick={onApply}
+        className="flex min-w-0 flex-1 items-center justify-between gap-2 rounded text-left"
+      >
+        <span className="flex min-w-0 items-center gap-2">
+          <ViewIcon name={view.icon} className="size-4 shrink-0 text-muted-foreground" />
+          <span className="truncate">{view.name}</span>
+        </span>
+        {active && <Check className="size-3.5 shrink-0 text-primary" />}
+      </button>
+      {!view.isBuiltIn && (
+        <div className="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100">
+          <button
+            type="button"
+            aria-label={m.bug_view_edit()}
+            onClick={onEdit}
+            className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-foreground"
+          >
+            <Pencil className="size-3" />
+          </button>
+          <ConfirmDialog
+            open={confirmOpen}
+            onOpenChange={setConfirmOpen}
+            trigger={
+              <button
+                type="button"
+                aria-label={m.bug_view_delete()}
+                className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-destructive"
+              >
+                <Trash2 className="size-3" />
+              </button>
+            }
+            title={m.bug_view_deleteTitle()}
+            description={m.bug_view_deleteConfirmMsg({ name: view.name })}
+            cancelLabel={m.bug_view_cancel()}
+            confirmLabel={m.bug_view_deleteConfirm()}
+            onConfirm={() => { onDelete(); setConfirmOpen(false); }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/bug/views/view-switcher.tsx

@@ -15,18 +15,20 @@
 // 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 { Grid3x3, TableProperties } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import { VIEW_BOARD_ICON, VIEW_LIST_ICON } from "@/components/shared-kit/list-kit/icon-semantics";
 import { cn } from "@/lib/utils";
 import { m } from "@/paraglide/messages.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { BugView } from "./view-types";
 
-/** BUG 列表页布局（规格 §5.2 两视图；P1 不做 kanban/calendar/timeline） */
-export type BugView = "list" | "table";
-
+// BUG 视图切换器：列表/看板 两档（任务 34 定版 list|board，表格档移除；testcase
+// view-switcher 同构）。图标取 icon-semantics 语义单一事实源（VIEW_LIST_ICON=
+// TableProperties、VIEW_BOARD_ICON=SquareKanban，§6.1）；类型与存量回退守卫见
+// view-types.ts（BugView/isBugView 统一出口）。
 const BUG_VIEWS: { value: BugView; label: () => string; icon: LucideIcon }[] = [
-  { value: "list", label: m.bug_view_layout_list, icon: TableProperties },
-  { value: "table", label: m.bug_view_layout_table, icon: Grid3x3 },
+  { value: "list", label: m.bug_view_layout_list, icon: VIEW_LIST_ICON },
+  { value: "board", label: m.bug_view_layout_board, icon: VIEW_BOARD_ICON },
 ];
 
 interface BugViewSwitcherProps {

package/src/components/bug/views/view-types.ts

@@ -0,0 +1,162 @@
+// 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/>.
+
+// BUG 保存视图的客户端模型（仿 testcase/views/view-types 同名件裁剪；类型一律
+// import type 引 display/types 的 serverFn DTO，编译期擦除无运行时依赖）。
+// 内置默认视图 __default__ 不落库（与 story/testcase 同口径，控制者裁决）。
+//
+// icon 存储说明：BugFilterView 表无 icon 列（P1 建表即无，本期禁止迁移），唯一
+// 自由形状落点是 displayOptions JSON（bug-views.ts validator 对 displayOptions
+// 为 z.unknown 透传）。约定 icon 随 displayOptions JSON 一起存（`icon` 键），
+// 读取侧在本模块抽出为客户端模型字段；写回显示选项持久化行（保留行）前剥离
+// （updateBugDisplayOptionsFn validator 键集白名单，icon 即使漏传也会被 zod 剥除，
+// 双保险）。
+import {
+  BUG_GROUP_KEYS,
+  BUG_ORDER_KEYS,
+  BUG_ORDER_DIRECTIONS,
+  BUG_DISPLAY_PROPERTIES,
+  BUG_PAGE_SIZE_OPTIONS,
+  DEFAULT_BUG_DISPLAY_OPTIONS,
+  type BugSavedView,
+  type BugViewFilterCondition,
+  type BugDisplayOptions,
+  type BugDisplayProperty,
+  type BugGroupKey,
+  type BugOrderKey,
+  type BugOrderDirection,
+  type BugPageSize,
+} from "../display/types";
+import { generateConditionId } from "../filters/field-configs";
+import type { FilterCondition } from "../filters";
+import { m } from "@/paraglide/messages.js";
+
+// 视图布局定版 list|board（任务 34 移除表格视图；view-switcher BUG_VIEWS 同值。
+// 原 BugViewType（任务 30 deferred ④ 的 "list"|"table" 重复定义）随之消亡，类型
+// 统一本文件出口）。存量回退面：bug 与 testcase 不同，任务 31 起视图布局有
+// localStorage 持久化（bug.view），旧值在挂载恢复守卫 isBugView 处回落 list
+// 缺省（testcase 任务 27 的 normalizeViewType 同位物；DB displayOptions JSON
+// 不承载布局值，无需服务端反序列化回退）。
+export type BugView = "list" | "board";
+
+/** localStorage bug.view 恢复守卫：新值域内为真；存量旧值（"table" 及更早残留）
+ * 返回 false → 调用侧保持缺省 list（任务 34 收缩后的旧值回退面） */
+export function isBugView(v: string | null): v is BugView {
+  return v === "list" || v === "board";
+}
+
+/** 内置默认视图 id（不落库；story/testcase DEFAULT_VIEW_ID 同值同口径） */
+export const DEFAULT_VIEW_ID = "__default__";
+
+/** 默认视图 icon（ViewIcon 对未知名回落 List，语义一致） */
+export const DEFAULT_BUG_VIEW_ICON = "list";
+
+/** 客户端视图模型（icon 自 displayOptions JSON 抽出；isBuiltIn 标记内置默认视图） */
+export interface BugViewModel {
+  id: string;
+  name: string;
+  filters: BugViewFilterCondition[];
+  displayOptions: BugDisplayOptions;
+  icon: string;
+  isBuiltIn: boolean;
+}
+
+export function buildDefaultView(): BugViewModel {
+  return {
+    id: DEFAULT_VIEW_ID,
+    name: m.bug_view_default(),
+    filters: [],
+    displayOptions: { ...DEFAULT_BUG_DISPLAY_OPTIONS },
+    icon: DEFAULT_BUG_VIEW_ICON,
+    isBuiltIn: true,
+  };
+}
+
+/** 存量 displayOptions JSON 逐键白名单解析（照 bug-display-options.ts
+ * parseStoredOptions 收敛：非法/缺失字段回落默认值，icon 键不进显示域） */
+function normalizeDisplayOptions(raw: Record<string, unknown>): BugDisplayOptions {
+  const groupBy = (BUG_GROUP_KEYS as readonly string[]).includes(raw.groupBy as string)
+    ? (raw.groupBy as BugGroupKey)
+    : DEFAULT_BUG_DISPLAY_OPTIONS.groupBy;
+  const orderBy = (BUG_ORDER_KEYS as readonly string[]).includes(raw.orderBy as string)
+    ? (raw.orderBy as BugOrderKey)
+    : DEFAULT_BUG_DISPLAY_OPTIONS.orderBy;
+  const orderDir = (BUG_ORDER_DIRECTIONS as readonly string[]).includes(raw.orderDir as string)
+    ? (raw.orderDir as BugOrderDirection)
+    : DEFAULT_BUG_DISPLAY_OPTIONS.orderDir;
+  const properties = Array.isArray(raw.properties)
+    ? (raw.properties as unknown[]).filter(
+        (p): p is BugDisplayProperty =>
+          typeof p === "string" && (BUG_DISPLAY_PROPERTIES as readonly string[]).includes(p),
+      )
+    : [];
+  const pageSize = (BUG_PAGE_SIZE_OPTIONS as readonly number[]).includes(raw.pageSize as number)
+    ? (raw.pageSize as BugPageSize)
+    : DEFAULT_BUG_DISPLAY_OPTIONS.pageSize;
+  const subGroupBy = (BUG_GROUP_KEYS as readonly string[]).includes(raw.subGroupBy as string)
+    ? (raw.subGroupBy as BugGroupKey)
+    : DEFAULT_BUG_DISPLAY_OPTIONS.subGroupBy;
+  return {
+    groupBy,
+    orderBy,
+    orderDir,
+    properties: properties.length > 0 ? properties : [...DEFAULT_BUG_DISPLAY_OPTIONS.properties],
+    pageSize,
+    // 任务 40 双层分组三键：存量视图 JSON 缺失时回落默认值
+    subGroupBy,
+    showEmptyGroups: typeof raw.showEmptyGroups === "boolean" ? raw.showEmptyGroups : DEFAULT_BUG_DISPLAY_OPTIONS.showEmptyGroups,
+    showSubItems: typeof raw.showSubItems === "boolean" ? raw.showSubItems : DEFAULT_BUG_DISPLAY_OPTIONS.showSubItems,
+  };
+}
+
+/** serverFn DTO → 客户端视图模型：icon 自 displayOptions JSON 抽出（缺省回落
+ * DEFAULT_BUG_VIEW_ICON），剩余键白名单收敛为 BugDisplayOptions */
+export function toSavedView(dto: BugSavedView): BugViewModel {
+  const raw = (dto.displayOptions ?? {}) as unknown as Record<string, unknown>;
+  const icon = typeof raw.icon === "string" && raw.icon ? raw.icon : DEFAULT_BUG_VIEW_ICON;
+  return {
+    id: dto.id,
+    name: dto.name,
+    filters: Array.isArray(dto.filters) ? dto.filters : [],
+    displayOptions: normalizeDisplayOptions(raw),
+    icon,
+    isBuiltIn: false,
+  };
+}
+
+/** 显示域对象附加视图 icon（创建/编辑视图落库用；调用方展开为新鲜字面量） */
+export function withViewIcon(display: BugDisplayOptions, icon: string): BugDisplayOptions & { icon: string } {
+  return { ...display, icon };
+}
+
+/** UI 筛选条件 → 视图 filters（收敛为三键数组去 id；bug-views.ts validator 契约） */
+export function toViewFilters(conditions: FilterCondition[]): BugViewFilterCondition[] {
+  return conditions.map(({ property, operator, value }) => ({ property, operator, value }));
+}
+
+/** 视图 filters → UI 筛选条件（补生成 id；非法行丢弃——property/operator 缺失
+ * 无法渲染。图标键等脏数据由 Array.isArray + filter 双守卫） */
+export function viewFiltersToConditions(filters: BugViewFilterCondition[]): FilterCondition[] {
+  return (Array.isArray(filters) ? filters : [])
+    .filter((c) => c && typeof c.property === "string" && typeof c.operator === "string")
+    .map((c) => ({
+      id: generateConditionId(),
+      property: c.property as FilterCondition["property"],
+      operator: c.operator as FilterCondition["operator"],
+      value: typeof c.value === "string" ? c.value : "",
+    }));
+}

package/src/components/collab/activity-attribution.tsx

@@ -37,7 +37,7 @@
 
 import { UserAvatar } from '@/components/shared-kit'
 import { cn } from '@/lib/utils'
-import type { AvatarConfig, ShapeType } from '@allbluecn/kernel'
+import type { AvatarConfig } from '@allbluecn/kernel'
 import { m } from '@/paraglide/messages.js'
 
 /**
@@ -198,7 +198,7 @@ export function CollabActivityAttribution({
             <UserAvatar
               name={user.username}
               avatarConfig={(user.avatarConfig ?? null) as AvatarConfig | null}
-              bgShape={(user.bgShape ?? undefined) as ShapeType | undefined}
+              bgShape={user.bgShape}
               bgColor={user.bgColor ?? undefined}
               size="xs"
             />

package/src/components/collab/collab-presence-header.tsx

@@ -41,7 +41,7 @@ import {
 } from '@/components/magicui/components/animate/avatar-group'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
-import type { AvatarConfig, ShapeType } from '@allbluecn/kernel'
+import type { AvatarConfig } from '@allbluecn/kernel'
 import type { CollabAwareness, CollabProviderHandle } from '@/lib/collab/provider'
 import { useSelfProfileBroadcast, type CollabPresenceUser } from '@/lib/collab/use-self-profile-broadcast'
 import { m } from '@/paraglide/messages.js'
@@ -180,7 +180,7 @@ export function CollabPresenceHeader({
               <UserAvatar
                 name={user.username}
                 avatarConfig={(user.avatarConfig ?? null) as AvatarConfig | null}
-                bgShape={(user.bgShape ?? undefined) as ShapeType | undefined}
+                bgShape={user.bgShape}
                 bgColor={user.bgColor ?? undefined}
                 size="sm"
               />