@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/detail/error-context.tsx

@@ -21,9 +21,11 @@
 // 截图缩略图（任务 25，§12）：blobId 为服务端记录（白名单字符校验后才达此处），
 // 经成员代理 /api/bugs/screenshot（宽范围审查修复：Blob.userId 落项目 owner，
 // 既有 /api/blob/$id 只服务 blob 属主，非 owner 成员看不到截图）以 <img src>
-// 渲染——同样不拼 HTML，id 经 encodeURIComponent。
+// 渲染——同样不拼 HTML，id 经 encodeURIComponent。缩略图点击开共享 Dialog
+// lightbox 大图（任务 37，object-contain 适配大尺寸，Esc 关闭）。
 import { useState } from "react";
 import { FolderOpen, Globe, MonitorSmartphone } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { m } from "@/paraglide/messages.js";
 
 interface ErrorContextProps {
@@ -54,7 +56,11 @@ function MetaRow({ icon, label, value }: { icon: React.ReactNode; label: string;
 export function ErrorContext({ bugId, title, stack, url, userAgent, env, screenshotBlobId }: ErrorContextProps) {
   // blob 读取失败（404/网络）时回退占位，不留破图
   const [screenshotFailed, setScreenshotFailed] = useState(false);
+  // 任务 37：缩略图点击开 lightbox 大图（共享 Dialog，Esc/关闭键均可关）
+  const [lightboxOpen, setLightboxOpen] = useState(false);
   const showScreenshot = !!screenshotBlobId && !screenshotFailed;
+  const screenshotSrc = `/api/bugs/screenshot?bugId=${encodeURIComponent(bugId)}&blobId=${encodeURIComponent(screenshotBlobId ?? "")}`;
+  const screenshotAlt = m.bug_detail_screenshot_alt();
 
   return (
     <section className="space-y-3 px-6 py-4 border-t">
@@ -86,14 +92,28 @@ export function ErrorContext({ bugId, title, stack, url, userAgent, env, screens
       <div className="space-y-1">
         <div className="text-xs text-muted-foreground">{m.bug_detail_screenshot()}</div>
         {showScreenshot ? (
-          <img
-            src={`/api/bugs/screenshot?bugId=${encodeURIComponent(bugId)}&blobId=${encodeURIComponent(screenshotBlobId)}`}
-            alt={m.bug_detail_screenshot_alt()}
-            loading="lazy"
-            onError={() => setScreenshotFailed(true)}
-            data-testid="bug-screenshot-thumbnail"
-            className="max-h-72 max-w-full cursor-zoom-in rounded-md border object-contain"
-          />
+          <>
+            <img
+              src={screenshotSrc}
+              alt={screenshotAlt}
+              loading="lazy"
+              onClick={() => setLightboxOpen(true)}
+              onError={() => setScreenshotFailed(true)}
+              data-testid="bug-screenshot-thumbnail"
+              className="max-h-72 max-w-full cursor-zoom-in rounded-md border object-contain"
+            />
+            <Dialog open={lightboxOpen} onOpenChange={setLightboxOpen}>
+              <DialogContent className="max-w-5xl p-4">
+                <DialogTitle className="sr-only">{screenshotAlt}</DialogTitle>
+                <img
+                  src={screenshotSrc}
+                  alt={screenshotAlt}
+                  data-testid="bug-screenshot-lightbox"
+                  className="max-h-[80vh] w-full rounded-md object-contain"
+                />
+              </DialogContent>
+            </Dialog>
+          </>
         ) : (
           <div className="flex h-16 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground">
             {m.bug_detail_screenshot_empty()}

package/src/components/bug/detail/props-section.tsx

@@ -28,6 +28,7 @@ import { useDebouncedValue, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
 import type { BugState, BugSeverity } from "@/shared/bug/constants";
 import type { BugDetail, BugStoryBrief } from "../types";
 import type { UserBrief } from "@/components/story/types";
+import type { PropsSectionCollabProps } from "./bug-detail-body";
 import { StateEditor, SeverityEditor, AssigneeEditor, LabelsEditor } from "../inline-editors";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
@@ -40,6 +41,13 @@ interface PropsSectionProps {
   onBugUpdate: (bug: BugDetail) => void;
   /** 关联需求变更后回传（null = 解除关联） */
   onStoryChange: (story: BugStoryBrief | null) => void;
+  /**
+   * 协同写手分派（任务 22，§7.1 Bug 字段行）：传入时 state/severity/
+   * assigneeId/labelIds/env 编辑在 collabActive 期写 Y（保存通道短路），
+   * offline 降级走 DB 通道。storyId 关联不入 Y（走 link/unlink serverFn，
+   * DB 单一事实源），StoryLinkPicker 不受影响。
+   */
+  collabProps?: PropsSectionCollabProps;
 }
 
 function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
@@ -189,12 +197,23 @@ function StoryLinkPicker({ bug, onStoryChange }: Pick<PropsSectionProps, "bug" |
 }
 
 /** env 行内编辑：Enter 提交 / Esc 关闭 / 清除按钮置空（updateBugFn env 支持 nullable） */
-function EnvEditor({ bug, onBugUpdate }: Pick<PropsSectionProps, "bug" | "onBugUpdate">) {
+function EnvEditor({
+  bug,
+  onBugUpdate,
+  collabProps,
+}: Pick<PropsSectionProps, "bug" | "onBugUpdate" | "collabProps">) {
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState(bug.env ?? "");
   const [saving, setSaving] = useState(false);
 
   const save = async (value: string | null) => {
+    // 协同写手活跃：env 是 Y 属主字段——写 Y 短路 DB 通道（远端实时可见，
+    // 落库由 exporter 统一回写）；降级走原 DB 链路
+    if (collabProps?.collabActive) {
+      collabProps.setValue("env", value);
+      setOpen(false);
+      return;
+    }
     setSaving(true);
     try {
       const res = await updateBugFn({ data: { bugId: bug.id, env: value } });
@@ -213,6 +232,7 @@ function EnvEditor({ bug, onBugUpdate }: Pick<PropsSectionProps, "bug" | "onBugU
       open={open}
       onOpenChange={(v) => {
         setOpen(v);
+        if (collabProps) collabProps.setEditing("env", v);
         if (v) setDraft(bug.env ?? "");
       }}
     >
@@ -270,7 +290,7 @@ function EnvEditor({ bug, onBugUpdate }: Pick<PropsSectionProps, "bug" | "onBugU
   );
 }
 
-export function PropsSection({ bug, users, labels, onBugUpdate, onStoryChange }: PropsSectionProps) {
+export function PropsSection({ bug, users, labels, onBugUpdate, onStoryChange, collabProps }: PropsSectionProps) {
   const [savingField, setSavingField] = useState(false);
 
   const updateField = async (patch: {
@@ -279,6 +299,14 @@ export function PropsSection({ bug, users, labels, onBugUpdate, onStoryChange }:
     assigneeId?: string | null;
     labelIds?: string[];
   }) => {
+    // 协同写手活跃：Y 属主字段逐 key 写 Y，DB 通道短路（远端实时可见；
+    // 落库由 exporter 统一回写 + 活动）。offline 降级走原 DB 链路。
+    if (collabProps?.collabActive) {
+      for (const [key, value] of Object.entries(patch)) {
+        collabProps.setValue(key, value as unknown);
+      }
+      return;
+    }
     setSavingField(true);
     try {
       const res = await updateBugFn({ data: { bugId: bug.id, ...patch } });
@@ -309,7 +337,7 @@ export function PropsSection({ bug, users, labels, onBugUpdate, onStoryChange }:
           />
         </PropertyRow>
         <PropertyRow label={m.bug_detail_env()}>
-          <EnvEditor bug={bug} onBugUpdate={onBugUpdate} />
+          <EnvEditor bug={bug} onBugUpdate={onBugUpdate} collabProps={collabProps} />
         </PropertyRow>
         <PropertyRow label={m.bug_detail_labels()}>
           <LabelsEditor

package/src/components/bug/detail/repro-report-card.tsx

@@ -45,7 +45,7 @@ import { toast } from "@/components/ui/toast";
 import { listReproRunsFn, runBugReproFn, updateBugFn } from "@/server/serverFns/bug";
 import type { ReproRunItem } from "@/server/serverFns/bug/bug-repro";
 import { REPRO_VERDICT_COLOR, REPRO_VERDICT_LABEL, type BugReproVerdict } from "@/shared/bug/constants";
-import { MarkdownView } from "@/components/knowledge-public/markdown-view";
+import { MarkdownView } from "@/components/knowledge/public/markdown-view";
 import { formatRelative } from "./activity-timeline";
 import { m } from "@/paraglide/messages.js";
 import type { BugDetail } from "../types";

package/src/components/bug/display/constants.ts

@@ -15,7 +15,7 @@
 // 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 { ArrowDownUp, CircleDotDashed, CircleFadingArrowUp, Plus, RefreshCw, User, UserPlus, X, Tag, CalendarClock, Bug, type LucideIcon } from "lucide-react";
+import { ArrowDownUp, CircleDotDashed, CircleFadingArrowUp, Hash, Plus, RefreshCw, User, UserPlus, X, Tag, CalendarClock, Bug, type LucideIcon } from "lucide-react";
 import { m } from "@/paraglide/messages.js";
 import type { BugDisplayProperty, BugGroupKey, BugOrderKey } from "./types";
 
@@ -36,8 +36,9 @@ export const BUG_ORDER_LABELS: Record<BugOrderKey, () => string> = {
   severity: m.bug_display_order_severity,
 };
 
-/** 可显隐列标签 */
+/** 可显隐项标签 */
 export const BUG_PROPERTY_LABELS: Record<BugDisplayProperty, () => string> = {
+  id: m.bug_display_property_id,
   state: m.bug_display_property_state,
   severity: m.bug_display_property_severity,
   assignee: m.bug_display_property_assignee,
@@ -63,6 +64,7 @@ export const BUG_ORDER_ICONS: Record<BugOrderKey, LucideIcon> = {
 };
 
 export const BUG_PROPERTY_ICONS: Record<BugDisplayProperty, LucideIcon> = {
+  id: Hash,
   state: CircleDotDashed,
   severity: CircleFadingArrowUp,
   assignee: User,

package/src/components/bug/display/display-dropdown.tsx

@@ -15,17 +15,23 @@
 // 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 { useMemo, useState } from "react";
-import { ArrowDownNarrowWide, ArrowUpWideNarrow, ChartNoAxesGantt, Check, ChevronDown, ChevronRight, Lock, type LucideIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { useFeature } from "@/components/billing/use-feature";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { implementedModules } from "@/plugins/modules.gen";
-import { cn } from "@/lib/utils";
+// BUG 显示选项桶导出 = 共享 createDisplayDropdown 的 bug 实例（UI 对齐一期
+// PR-3 任务 13：原分区组件收拢至 shared-kit/list-kit/display 参数化工厂，此处
+// 仅装配；任务 40 起 subGroupBy 区与空分组开关开放——子分组维度集同
+// BUG_GROUP_KEYS，方向按钮对 manual 恒显——与 story 的差异经 support 矩阵
+// 与 orderDirVisible 缺省表达）。键集/文案/图标见 ./constants 与 ./types。
+// 任务 30：DisplayDropdown 补视图管理区（beforeOptions 插槽挂
+// BugViewListSection，story 同位；views 缺席时零渲染，无视图场景零感知）。
+
+import { ChartNoAxesGantt } from "lucide-react";
+import {
+  createDisplayDropdown,
+} from "@/components/shared-kit/list-kit/display/dropdown";
 import { m } from "@/paraglide/messages.js";
 import { BUG_GROUP_ICONS, BUG_GROUP_LABELS, BUG_ORDER_ICONS, BUG_ORDER_LABELS, BUG_PROPERTY_LABELS } from "./constants";
-import { BUG_DISPLAY_PROPERTIES, BUG_GROUP_KEYS, BUG_ORDER_KEYS, BUG_PAGE_SIZE_OPTIONS, DEFAULT_BUG_DISPLAY_OPTIONS, type BugDisplayOptions, type BugDisplayProperty, type BugGroupKey, type BugOrderDirection, type BugOrderKey, type BugPageSize } from "./types";
+import { BUG_DISPLAY_PROPERTIES, BUG_GROUP_KEYS, BUG_ORDER_KEYS, BUG_PAGE_SIZE_OPTIONS, DEFAULT_BUG_DISPLAY_OPTIONS, type BugDisplayOptions, type BugDisplayProperty, type BugGroupKey, type BugOrderKey } from "./types";
+import { BugViewListSection } from "../views/view-list-section";
+import type { BugViewModel } from "../views/view-types";
 
 /** 判断显示选项是否偏离默认值（触发器蓝点提示） */
 export function hasBugDisplayChanges(filters: BugDisplayOptions): boolean {
@@ -34,7 +40,11 @@ export function hasBugDisplayChanges(filters: BugDisplayOptions): boolean {
     filters.orderBy !== DEFAULT_BUG_DISPLAY_OPTIONS.orderBy ||
     filters.orderDir !== DEFAULT_BUG_DISPLAY_OPTIONS.orderDir ||
     filters.pageSize !== DEFAULT_BUG_DISPLAY_OPTIONS.pageSize ||
-    !hasDefaultProperties(filters.properties)
+    !hasDefaultProperties(filters.properties) ||
+    // 任务 40 双层分组三键纳入偏离判定
+    (filters.subGroupBy ?? DEFAULT_BUG_DISPLAY_OPTIONS.subGroupBy) !== DEFAULT_BUG_DISPLAY_OPTIONS.subGroupBy ||
+    (filters.showEmptyGroups ?? DEFAULT_BUG_DISPLAY_OPTIONS.showEmptyGroups) !== DEFAULT_BUG_DISPLAY_OPTIONS.showEmptyGroups ||
+    (filters.showSubItems ?? DEFAULT_BUG_DISPLAY_OPTIONS.showSubItems) !== DEFAULT_BUG_DISPLAY_OPTIONS.showSubItems
   );
 }
 
@@ -43,282 +53,68 @@ function hasDefaultProperties(props: BugDisplayProperty[]): boolean {
   return props.length === def.length && def.every((p) => props.includes(p));
 }
 
+const bugDisplay = createDisplayDropdown<BugDisplayOptions, BugGroupKey, BugOrderKey, BugDisplayProperty>({
+  groupKeys: BUG_GROUP_KEYS,
+  orderKeys: BUG_ORDER_KEYS,
+  availableProperties: BUG_DISPLAY_PROPERTIES,
+  groupLabels: BUG_GROUP_LABELS,
+  orderLabels: BUG_ORDER_LABELS,
+  propertyLabels: BUG_PROPERTY_LABELS,
+  groupIcons: BUG_GROUP_ICONS,
+  orderIcons: BUG_ORDER_ICONS,
+  pageSizeOptions: BUG_PAGE_SIZE_OPTIONS,
+  noneGroupKey: "none",
+  // 任务 40：subGroupBy 区开放 + 空分组开关行开放（bug 侧首次与 story 对齐双层
+  // 分组）。子分组维度集 = BUG_GROUP_KEYS（dropdown 自动排除当前 groupBy）；
+  // 空分组开关仅 groupBy ≠ none 时生效（none 无分组语义，行随组区隐藏）。
+  // bug 无父子层级，showSubItems 开关不渲染（类型字段占位与 story 对齐）。
+  support: ({ groupBy }) => ({
+    properties: true,
+    groupBy: true,
+    subGroupBy: true,
+    orderBy: true,
+    options: true,
+    showEmptyGroupsRow: groupBy !== "none",
+    showEmptyGroupsEnabled: groupBy !== "none",
+    showSubItems: false,
+  }),
+  hasChanges: hasBugDisplayChanges,
+  triggerIcon: ChartNoAxesGantt,
+  triggerAriaLabel: () => m.display_displayOptions(),
+  triggerTooltip: () => m.display_displayOptions(),
+  triggerTestId: "bug-display-trigger",
+  sectionTestIdPrefix: "display",
+});
+
 export interface BugDisplayDropdownProps {
   filters: BugDisplayOptions;
   onChange: (patch: Partial<BugDisplayOptions>) => void;
+  /** 视图管理区（任务 30）：views 缺席时零渲染，无视图场景零感知 */
+  views?: BugViewModel[];
+  activeViewId?: string;
+  onApplyView?: (view: BugViewModel) => void;
+  onEditView?: (view: BugViewModel) => void;
+  onDeleteView?: (view: BugViewModel) => void;
+  onAddView?: () => void;
 }
 
-/** BUG 显示选项下拉（照 story display-dropdown 裁剪：无子分组/空组开关/保存视图区） */
-export function BugDisplayDropdown({ filters, onChange }: BugDisplayDropdownProps) {
-  const changed = useMemo(() => hasBugDisplayChanges(filters), [filters]);
-
+export function BugDisplayDropdown({ views, activeViewId, onApplyView, onEditView, onDeleteView, onAddView, ...rest }: BugDisplayDropdownProps) {
+  const viewsReady = Boolean(views && activeViewId !== undefined && onApplyView && onEditView && onDeleteView && onAddView);
   return (
-    <Popover>
-      <Tooltip>
-        <PopoverTrigger render={<TooltipTrigger render={<Button
-              variant="outline"
-              size="sm"
-              aria-label={m.display_displayOptions()}
-              data-testid="bug-display-trigger"
-              className={cn(
-                "relative h-8 gap-1.5 px-2.5 text-sm font-normal",
-                changed && "border-primary/50 bg-primary/5 text-primary",
-              )} />} />}>
-              <ChartNoAxesGantt className="size-4" />
-              {changed && (
-                <span
-                  className="absolute right-1 top-1 size-1.5 rounded-full bg-primary"
-                  aria-hidden
-                />
-              )}
-            </PopoverTrigger>
-        <TooltipContent side="bottom">{m.display_displayOptions()}</TooltipContent>
-      </Tooltip>
-      <PopoverContent className="w-75 p-0" align="start">
-        <div className="max-h-[70vh] overflow-y-auto">
-          <PropertiesSection
-            selected={filters.properties}
-            onChange={(props) => onChange({ properties: props })}
-          />
-          <InlineRadioSection
-            dataSection="groupBy"
-            label={m.display_group()}
-            value={filters.groupBy}
-            optionKeys={[...BUG_GROUP_KEYS]}
-            iconMap={BUG_GROUP_ICONS as Record<string, LucideIcon>}
-            labelMap={BUG_GROUP_LABELS}
-            onSelect={(v) => onChange({ groupBy: v as BugGroupKey })}
-          />
-          <InlineRadioSection
-            dataSection="orderBy"
-            label={m.display_order()}
-            value={filters.orderBy}
-            optionKeys={[...BUG_ORDER_KEYS]}
-            iconMap={BUG_ORDER_ICONS as Record<string, LucideIcon>}
-            labelMap={BUG_ORDER_LABELS}
-            onSelect={(v) => onChange({ orderBy: v as BugOrderKey })}
-            orderDir={filters.orderDir}
-            onOrderDirChange={(dir) => onChange({ orderDir: dir })}
+    <bugDisplay.DisplayDropdown
+      {...rest}
+      beforeOptions={
+        viewsReady ? (
+          <BugViewListSection
+            views={views!}
+            activeViewId={activeViewId!}
+            onApplyView={onApplyView!}
+            onEditView={onEditView!}
+            onDeleteView={onDeleteView!}
+            onAddView={onAddView!}
           />
-          <PageSizeSection
-            pageSize={filters.pageSize}
-            onPageSizeChange={(v) => onChange({ pageSize: v })}
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-interface InlineRadioSectionProps {
-  dataSection: string;
-  label: string;
-  value: string;
-  optionKeys: string[];
-  iconMap: Record<string, LucideIcon>;
-  labelMap: Record<string, () => string>;
-  disabled?: boolean;
-  onSelect: (value: string) => void;
-  orderDir?: BugOrderDirection;
-  onOrderDirChange?: (dir: BugOrderDirection) => void;
-}
-
-function InlineRadioSection({
-  dataSection,
-  label,
-  value,
-  optionKeys,
-  iconMap,
-  labelMap,
-  disabled = false,
-  onSelect,
-  orderDir,
-  onOrderDirChange,
-}: InlineRadioSectionProps) {
-  const [collapsed, setCollapsed] = useState(false);
-  const options = optionKeys.map((k) => ({
-    value: k,
-    label: labelMap[k]?.() ?? k,
-    icon: iconMap[k],
-  }));
-
-  return (
-    <div data-section={dataSection} data-testid={`display-${dataSection}-section`} className="border-t px-3 py-2">
-      <div className="mb-1 flex items-center justify-between gap-1">
-        <button
-          type="button"
-          onClick={() => setCollapsed(!collapsed)}
-          className="flex w-full items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground"
-        >
-          {collapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
-          {label}
-        </button>
-        {orderDir !== undefined && onOrderDirChange && (
-          <div className="flex items-center gap-0.5">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              data-testid="order-dir-asc"
-              aria-label={m.display_asc()}
-              className={cn(
-                "size-6 rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-                orderDir === "asc" && "bg-muted text-foreground",
-              )}
-              onClick={() => onOrderDirChange("asc")}
-            >
-              <ArrowDownNarrowWide className="size-3" />
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              data-testid="order-dir-desc"
-              aria-label={m.display_desc()}
-              className={cn(
-                "size-6 rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-                orderDir === "desc" && "bg-muted text-foreground",
-              )}
-              onClick={() => onOrderDirChange("desc")}
-            >
-              <ArrowUpWideNarrow className="size-3" />
-            </Button>
-          </div>
-        )}
-      </div>
-      {!collapsed && (
-        <div className="flex flex-col gap-0.5">
-          {options.map((o) => {
-            const Icon = o.icon;
-            const selected = o.value === value;
-            return (
-              <button
-                key={o.value}
-                type="button"
-                disabled={disabled}
-                onClick={() => onSelect(o.value)}
-                className={cn(
-                  "flex w-full items-center gap-2 rounded-sm px-1.5 py-1 text-xs text-left hover:bg-muted",
-                  disabled && "cursor-not-allowed opacity-50",
-                )}
-              >
-                <span
-                  className={cn(
-                    "grid size-3.5 shrink-0 place-items-center rounded-full border",
-                    selected ? "border-primary bg-primary text-primary-foreground" : "border-border",
-                  )}
-                >
-                  {selected && <Check className="size-2.5" strokeWidth={3} />}
-                </span>
-                {Icon && <Icon className="size-3.5 shrink-0 text-muted-foreground" />}
-                <span className="text-foreground">{o.label}</span>
-              </button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface PropertiesSectionProps {
-  selected: BugDisplayProperty[];
-  onChange: (props: BugDisplayProperty[]) => void;
-}
-
-function PropertiesSection({ selected, onChange }: PropertiesSectionProps) {
-  const [collapsed, setCollapsed] = useState(false);
-  const toggle = (prop: BugDisplayProperty) => {
-    onChange(
-      selected.includes(prop)
-        ? selected.filter((p) => p !== prop)
-        : [...selected, prop],
-    );
-  };
-
-  return (
-    <div data-section="properties" data-testid="display-properties-section" className="px-3 py-2">
-      <button
-        type="button"
-        onClick={() => setCollapsed(!collapsed)}
-        className="mb-1.5 flex w-full items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground"
-      >
-        {collapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
-        {m.display_showProperties()}
-      </button>
-      {!collapsed && (
-        <div className="flex flex-wrap gap-1.5">
-          {BUG_DISPLAY_PROPERTIES.map((prop) => {
-            const checked = selected.includes(prop);
-            return (
-              <button
-                key={prop}
-                type="button"
-                onClick={() => toggle(prop)}
-                className={cn(
-                  "rounded border px-2 py-0.5 text-xs transition-all",
-                  checked
-                    ? "border-primary bg-primary text-primary-foreground"
-                    : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
-                )}
-              >
-                {BUG_PROPERTY_LABELS[prop]?.() ?? prop}
-              </button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface PageSizeSectionProps {
-  pageSize: BugPageSize;
-  onPageSizeChange: (v: BugPageSize) => void;
-}
-
-function PageSizeSection({ pageSize, onPageSizeChange }: PageSizeSectionProps) {
-  // OSS 环境（billing 模块未实现）只显示 100/200；Pro 环境显示全部
-  const sizeOptions = implementedModules.billing
-    ? (BUG_PAGE_SIZE_OPTIONS as readonly BugPageSize[])
-    : ([100, 200] as readonly BugPageSize[]);
-  const { enabled: largePageSizeEnabled, loading: largePageSizeLoading } = useFeature("largePageSize");
-
-  const isPageSizeLocked = (v: BugPageSize) => v > 200 && !largePageSizeEnabled && !largePageSizeLoading;
-
-  return (
-    <div data-section="options" data-testid="display-options-section" className="border-t px-3 py-2">
-      <div className="flex items-center justify-between gap-2 py-0.5">
-        <span className="text-xs font-medium text-foreground">{m.display_extraOptions()}</span>
-      </div>
-      <div className="mt-1 flex items-center justify-between py-1">
-        <span className="text-xs text-muted-foreground">{m.display_pageSize()}</span>
-        <div className="flex items-center gap-0.5 rounded border border-border p-0.5">
-          {sizeOptions.map((v) => {
-            const locked = isPageSizeLocked(v);
-            const checked = v === pageSize && !locked;
-            return (
-              <button
-                key={v}
-                type="button"
-                disabled={locked}
-                onClick={() => onPageSizeChange(v)}
-                className={cn(
-                  "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium transition-all",
-                  checked
-                    ? "bg-primary text-primary-foreground"
-                    : locked
-                      ? "cursor-not-allowed text-muted-foreground/50 hover:bg-transparent"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                )}
-              >
-                {v}
-                {locked && <Lock size={10} aria-hidden />}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    </div>
+        ) : undefined
+      }
+    />
   );
 }

package/src/components/bug/display/types.ts

@@ -17,7 +17,9 @@
 
 // BUG 显示选项常量与类型（照 components/story/display/types.ts 同构；客户端安全，
 // serverFn 与 UI 共用。枚举取值以规格 §7 list 视图为准：分组 state/severity/assignee/
-// createdBy，排序 manual/created/updated/severity）。
+// createdBy，排序 manual/created/updated/severity。任务 40：受共享 DisplayOptionsCore
+// 基型约束并补 subGroupBy/showEmptyGroups/showSubItems，与 story DisplayOptions 同构）。
+import type { DisplayOptionsCore } from "@/components/shared-kit/list-kit/display/types";
 import { BUG_STATES, BUG_SEVERITIES } from "@/shared/bug/constants";
 
 export const BUG_GROUP_KEYS = ["state", "severity", "assignee", "createdBy", "none"] as const;
@@ -29,8 +31,11 @@ export type BugOrderKey = (typeof BUG_ORDER_KEYS)[number];
 export const BUG_ORDER_DIRECTIONS = ["asc", "desc"] as const;
 export type BugOrderDirection = (typeof BUG_ORDER_DIRECTIONS)[number];
 
-/** 行展示可切换列（identifier/title 恒显示，不进此清单；规格 §7 行内展示字段裁剪） */
+/** 行展示可切换项（title 恒显示不进清单；identifier 以 "id" 入清单——任务 34
+ * 起 identifier 显示可控，列表行/看板卡片经 properties.includes("id") 门控，
+ * 规格原「恒显示」口径随表格视图移除一并定版） */
 export const BUG_DISPLAY_PROPERTIES = [
+  "id",
   "state",
   "severity",
   "assignee",
@@ -44,12 +49,20 @@ export type BugDisplayProperty = (typeof BUG_DISPLAY_PROPERTIES)[number];
 export const BUG_PAGE_SIZE_OPTIONS = [100, 200, 500, 1000] as const;
 export type BugPageSize = (typeof BUG_PAGE_SIZE_OPTIONS)[number];
 
-export interface BugDisplayOptions {
-  groupBy: BugGroupKey;
-  orderBy: BugOrderKey;
-  orderDir: BugOrderDirection;
-  properties: BugDisplayProperty[];
-  pageSize: BugPageSize;
+/**
+ * BUG 显示选项（任务 40 起受共享 DisplayOptionsCore 基型约束，子分组/空组/
+ * 子需求三字段对照 story DisplayOptions 同构补齐）。BUG 无父子层级，
+ * showSubItems 仅占位保持形状一致（UI 开关不渲染）；subGroupBy 值域同
+ * BugGroupKey（子分组区由 display-dropdown 自动排除当前 groupBy）。
+ */
+export interface BugDisplayOptions
+  extends DisplayOptionsCore<BugGroupKey, BugOrderKey, BugDisplayProperty, BugPageSize> {
+  /** 二级分组维度（none = 不分子组；与 groupBy 同值时 dropdown 自动排除） */
+  subGroupBy: BugGroupKey;
+  /** 空分组显示（state/severity 枚举维度的零计数组保留） */
+  showEmptyGroups: boolean;
+  /** 子需求开关（bug 无父子层级，恒 false 占位，与 story 形状对齐） */
+  showSubItems: boolean;
 }
 
 export const DEFAULT_BUG_DISPLAY_OPTIONS: BugDisplayOptions = {
@@ -58,6 +71,9 @@ export const DEFAULT_BUG_DISPLAY_OPTIONS: BugDisplayOptions = {
   orderDir: "desc",
   properties: [...BUG_DISPLAY_PROPERTIES],
   pageSize: 100,
+  subGroupBy: "none",
+  showEmptyGroups: false,
+  showSubItems: false,
 };
 
 /**