@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/filters/{filter-value-input.tsx → field-configs.tsx}

@@ -15,28 +15,92 @@
 // 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 筛选字段配置层（UI 对齐一期 PR-3 任务 12：原 filter-types.ts + 六组件的
+// 值编辑器/chip 渲染 switch 收拢于此）。类型与序列化已上移 list-kit 共享层，
+// 此文件只保留 bug 专属的 9 字段 key 联合、i18n 文案/图标配置、值编辑器与
+// 值 chip 渲染器及窄化实例。组件运行时由共享 createFiltersModule 实例化
+// （见 ./index.tsx），消费方 import 路径不变。
+// property 恰为规格 §5.2 字段集，与 serverFn bug-list-query.ts 的翻译分支一一对应。
 import { useState } from "react";
-import { CalendarIcon, Check, CircleUser } from "lucide-react";
-import { format } from "date-fns";
-import type { DateRange } from "react-day-picker";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
+import { m } from '@/paraglide/messages.js';
+import {
+  Calendar,
+  CalendarClock,
+  Check,
+  CircleDot,
+  CircleUser,
+  Flag,
+  Inbox,
+  Monitor,
+  Tag,
+  Type,
+  type LucideIcon,
+} from "lucide-react";
+import { parseISO, isValid } from "date-fns";
 import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { UserAvatar } from "@/components/shared-kit";
-import { BUG_STATES, BUG_SEVERITIES, BUG_SOURCES, type BugState, type BugSeverity, type BugSource } from "@/shared/bug/constants";
-import type { BugFilterKey, FilterOperator } from "./filter-types";
-import type { UserBrief } from "@/components/story/types";
+import {
+  BUG_STATES,
+  BUG_SEVERITIES,
+  BUG_SOURCES,
+  STATE_LABEL,
+  STATE_COLOR,
+  SEVERITY_LABEL,
+  SEVERITY_COLOR,
+  SOURCE_LABEL,
+  SOURCE_COLOR,
+  type BugState,
+  type BugSeverity,
+  type BugSource,
+} from "@/shared/bug/constants";
+import {
+  createDefaultCondition as createDefaultConditionIn,
+  FilterDateSelect,
+  FilterFallbackValue,
+  FILTER_VALUE_CHIP_CLASS,
+  type FilterValueChipContext,
+  type FilterValueEditorContext,
+  type FiltersModuleOptions,
+} from "@/components/shared-kit/list-kit/filters";
+import type {
+  FilterCondition as SharedFilterCondition,
+  FilterFieldConfig as SharedFilterFieldConfig,
+  FilterOperator,
+  FilterFieldType,
+} from "@/components/shared-kit/list-kit/filters/types";
 import { cn } from "@/lib/utils";
-import { m } from "@/paraglide/messages.js";
+import type { UserBrief } from "@/components/story/types";
 
-interface FilterValueInputProps {
-  property: BugFilterKey;
-  operator: FilterOperator;
-  value: string;
-  onChange: (value: string) => void;
-  users?: UserBrief[];
-  labels?: { id: string; name: string; color: string }[];
-}
+export { serializeFilters, deserializeFilters, OPERATOR_LABELS, generateConditionId } from "@/components/shared-kit/list-kit/filters";
+export type { FilterOperator, FilterFieldType };
+
+export type BugFilterKey =
+  | "title"
+  | "state"
+  | "severity"
+  | "assigneeId"
+  | "labelId"
+  | "source"
+  | "env"
+  | "createdDate"
+  | "lastOccurAt";
+
+export interface FilterCondition extends SharedFilterCondition<BugFilterKey> {}
+
+export interface FilterFieldConfig extends SharedFilterFieldConfig<BugFilterKey> {}
+
+const SELECT_OPERATORS: FilterOperator[] = ["is", "is_not", "is_any_of", "is_not_any_of", "is_empty", "is_not_empty"];
+const USER_OPERATORS: FilterOperator[] = ["is", "is_not", "is_any_of", "is_not_any_of", "is_empty", "is_not_empty"];
+const DATE_OPERATORS: FilterOperator[] = ["is", "is_not", "before", "after", "on_or_before", "on_or_after", "between", "is_empty", "is_not_empty"];
+const TITLE_OPERATORS: FilterOperator[] = ["contains", "not_contains", "is_empty", "is_not_empty"];
+// env 与 serverFn 翻译分支对齐：值语义为精确 in/notIn（无 contains 翻译），故不提供 contains
+const ENV_OPERATORS: FilterOperator[] = ["is", "is_not", "is_empty", "is_not_empty"];
+
+// ---------------------------------------------------------------------------
+// 值编辑器渲染器（原 filter-value-input.tsx 的 property switch 原样搬移；
+// multi/selected/toggleMultiValue 由共享 FilterValueInput 计算后经 ctx 注入）
+// ---------------------------------------------------------------------------
 
 const compactBtn = "h-6 rounded-sm bg-muted px-2 text-xs font-normal";
 
@@ -46,15 +110,7 @@ interface EnumOption {
   colorToken?: string;
 }
 
-export function FilterValueInput({ property, operator, value, onChange, users, labels }: FilterValueInputProps) {
-  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(",") : "");
-  };
-
+function renderValueEditor({ property, operator, value, onChange, multi, selected, toggleMultiValue, users, labels }: FilterValueEditorContext<BugFilterKey>): React.ReactNode {
   switch (property) {
     case "state":
       return (
@@ -64,7 +120,7 @@ export function FilterValueInput({ property, operator, value, onChange, users, l
           onChange={(v) => onChange(v)}
           mode={multi ? "multi" : "single"}
           selected={selected}
-          onMultiChange={handleMultiToggle}
+          onMultiChange={toggleMultiValue}
           className={compactBtn}
         />
       );
@@ -76,7 +132,7 @@ export function FilterValueInput({ property, operator, value, onChange, users, l
           onChange={(v) => onChange(v)}
           mode={multi ? "multi" : "single"}
           selected={selected}
-          onMultiChange={handleMultiToggle}
+          onMultiChange={toggleMultiValue}
           className={compactBtn}
         />
       );
@@ -88,7 +144,7 @@ export function FilterValueInput({ property, operator, value, onChange, users, l
           onChange={(v) => onChange(v)}
           mode={multi ? "multi" : "single"}
           selected={selected}
-          onMultiChange={handleMultiToggle}
+          onMultiChange={toggleMultiValue}
           className={compactBtn}
         />
       );
@@ -97,12 +153,12 @@ export function FilterValueInput({ property, operator, value, onChange, users, l
       const selectedUser = !multi && realSelected[0] ? users?.find((u) => u.id === realSelected[0]) ?? null : null;
       return (
         <UserSelect
-          value={selectedUser}
-          users={users ?? []}
+          value={selectedUser as UserBrief | null}
+          users={(users ?? []) as UserBrief[]}
           onChange={(id) => onChange(id ?? "__none__")}
           mode={multi ? "multi" : "single"}
           selected={selected}
-          onMultiChange={handleMultiToggle}
+          onMultiChange={toggleMultiValue}
           className={compactBtn}
         />
       );
@@ -119,7 +175,7 @@ export function FilterValueInput({ property, operator, value, onChange, users, l
       );
     case "createdDate":
     case "lastOccurAt":
-      return <DateSelect operator={operator} value={value} onChange={onChange} />;
+      return <FilterDateSelect operator={operator} value={value} onChange={onChange} />;
     case "title":
       return (
         <Input
@@ -194,7 +250,7 @@ function EnumSelect({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {isMulti && selected.length > 0 ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
           <ChipTriggers mode={mode} selected={selected} renderOption={renderChip} />
         </PopoverTrigger>
       ) : (
@@ -279,7 +335,7 @@ function UserSelect({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {isMulti && selected.length > 0 ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
           <ChipTriggers mode={mode} selected={selected} renderOption={renderChip} />
         </PopoverTrigger>
       ) : (
@@ -391,7 +447,7 @@ function LabelSelect({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {isMulti && labelIds.length > 0 ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
           {labelIds.map(renderChip)}
         </PopoverTrigger>
       ) : (
@@ -436,83 +492,139 @@ function LabelSelect({
   );
 }
 
-function parseDate(value: string): Date | undefined {
-  const d = new Date(value);
-  return isNaN(d.getTime()) ? undefined : d;
+function FallbackChip({ value }: { value: string }) {
+  return (
+    <span className="inline-flex items-center rounded-sm border border-border px-1.5 py-0.5 text-xs whitespace-nowrap">
+      {value}
+    </span>
+  );
 }
 
-function DateSelect({ 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;
+// ---------------------------------------------------------------------------
+// 值 chip 渲染器（原 applied-filters.tsx 的 ValueChip switch 原样搬移；
+// between 范围段仍由共享 AppliedFilters 的 DateRangeChip 处理，不经此函数）
+// ---------------------------------------------------------------------------
 
-    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 ? `${format(from, "MM/dd")}~${format(to, "MM/dd")}` : m.bug_filter_select_range()}
-        </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(","));
-              }
-            }}
+function renderValueChip({ property, valueItem, users, labels }: FilterValueChipContext<BugFilterKey>): React.ReactNode {
+  switch (property) {
+    case "state": {
+      const v = valueItem as BugState;
+      return (
+        <span className={FILTER_VALUE_CHIP_CLASS}>
+          <span className={cn("whitespace-nowrap rounded-sm px-1", STATE_COLOR[v])}>{STATE_LABEL[v]?.() ?? valueItem}</span>
+        </span>
+      );
+    }
+    case "severity": {
+      const v = valueItem as BugSeverity;
+      return (
+        <span className={FILTER_VALUE_CHIP_CLASS}>
+          <span className={cn("whitespace-nowrap rounded-sm px-1", SEVERITY_COLOR[v])}>{SEVERITY_LABEL[v]?.() ?? valueItem}</span>
+        </span>
+      );
+    }
+    case "source": {
+      const v = valueItem as BugSource;
+      return (
+        <span className={FILTER_VALUE_CHIP_CLASS}>
+          <span className={cn("whitespace-nowrap rounded-sm px-1", SOURCE_COLOR[v])}>{SOURCE_LABEL[v]?.() ?? valueItem}</span>
+        </span>
+      );
+    }
+    case "assigneeId": {
+      if (valueItem === "__none__") {
+        return (
+          <span className={FILTER_VALUE_CHIP_CLASS}>
+            <CircleUser className="size-3 text-muted-foreground" />
+            <span className="whitespace-nowrap text-muted-foreground">{m.bug_list_unassigned()}</span>
+          </span>
+        );
+      }
+      const u = users?.find((user) => user.id === valueItem);
+      if (!u) return <FilterFallbackValue value={valueItem} />;
+      return (
+        <span className={FILTER_VALUE_CHIP_CLASS}>
+          <UserAvatar
+            avatarConfig={u.avatarConfig}
+            bgShape="circle"
+            bgColor={u.bgColor}
+            name={u.username}
+            size="xs"
+            className="!w-4 !h-4"
           />
-        </PopoverContent>
-      </Popover>
-    );
+          <span className="whitespace-nowrap">{u.username}</span>
+        </span>
+      );
+    }
+    case "labelId": {
+      const l = labels?.find((lb) => lb.id === valueItem);
+      if (!l) return <FilterFallbackValue value={valueItem} />;
+      return (
+        <span className={FILTER_VALUE_CHIP_CLASS}>
+          <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
+          <span className="whitespace-nowrap">{l.name}</span>
+        </span>
+      );
+    }
+    case "createdDate":
+    case "lastOccurAt": {
+      const d = parseISO(valueItem);
+      return (
+        <span className={FILTER_VALUE_CHIP_CLASS}>
+          <Calendar className="size-3 text-muted-foreground" />
+          <span className="whitespace-nowrap">
+            {isValid(d)
+              ? m.bug_inline_date_short({ month: d.getMonth() + 1, day: d.getDate() })
+              : valueItem}
+          </span>
+        </span>
+      );
+    }
+    default:
+      return <FilterFallbackValue value={valueItem} />;
   }
+}
 
-  const date = parseDate(value ?? "");
+// ---------------------------------------------------------------------------
+// 字段配置表（原 filter-types.ts 的 FILTER_FIELD_CONFIGS 数组照原样收拢为
+// Record；键序 = 原数组声明序 = 添加条件下拉的展示序）
+// ---------------------------------------------------------------------------
 
-  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.bug_filter_select_date()}
-      </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>
-  );
+export const BUG_FILTER_FIELD_CONFIGS: Record<BugFilterKey, FilterFieldConfig> = {
+  title: { key: "title", label: m.bug_filter_field_title, icon: Type, fieldType: "text", operators: TITLE_OPERATORS, defaultOperator: "contains" },
+  state: { key: "state", label: m.bug_filter_field_state, icon: CircleDot, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "open" },
+  severity: { key: "severity", label: m.bug_filter_field_severity, icon: Flag, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "medium" },
+  assigneeId: { key: "assigneeId", label: m.bug_filter_field_assignee, icon: CircleUser, fieldType: "user", operators: USER_OPERATORS, defaultOperator: "is", defaultValue: "__none__" },
+  labelId: { key: "labelId", label: m.bug_filter_field_label, icon: Tag, fieldType: "multi_select", operators: SELECT_OPERATORS, defaultOperator: "is_any_of" },
+  source: { key: "source", label: m.bug_filter_field_source, icon: Inbox, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "manual" },
+  env: { key: "env", label: m.bug_filter_field_env, icon: Monitor, fieldType: "text", operators: ENV_OPERATORS, defaultOperator: "is" },
+  createdDate: { key: "createdDate", label: m.bug_filter_field_createdDate, icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
+  lastOccurAt: { key: "lastOccurAt", label: m.bug_filter_field_lastOccurAt, icon: CalendarClock, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
+};
+
+// 消费方兼容：原 FILTER_FIELD_CONFIGS 数组（顺序 = 配置表声明序）
+export const FILTER_FIELD_CONFIGS: FilterFieldConfig[] = Object.values(BUG_FILTER_FIELD_CONFIGS);
+
+export const BUG_FILTERS_MODULE_OPTIONS: FiltersModuleOptions<BugFilterKey> = {
+  renderValueEditor,
+  renderValueChip,
+  toggleAriaLabel: m.bug_filter_toggle,
+};
+
+export function getFilterConfig(key: BugFilterKey): FilterFieldConfig {
+  // own-property 守卫：存量视图 JSON 的 property 可能撞上 Object.prototype 键名
+  // （如 "constructor"），直接索引会沿原型链取到 truthy 函数，必须回落首配置。
+  return Object.hasOwn(BUG_FILTER_FIELD_CONFIGS, key) ? BUG_FILTER_FIELD_CONFIGS[key] : FILTER_FIELD_CONFIGS[0];
 }
 
-function FallbackChip({ value }: { value: string }) {
-  return (
-    <span className="inline-flex items-center rounded-sm border border-border px-1.5 py-0.5 text-xs whitespace-nowrap">
-      {value}
-    </span>
-  );
+export function getFilterLabel(key: BugFilterKey): () => string {
+  return getFilterConfig(key).label;
+}
+
+export function getFilterIcon(key: BugFilterKey): LucideIcon {
+  return getFilterConfig(key).icon;
+}
+
+export function createDefaultCondition(property: BugFilterKey): FilterCondition {
+  return createDefaultConditionIn(BUG_FILTER_FIELD_CONFIGS, property);
 }

package/src/components/bug/filters/index.tsx

@@ -15,8 +15,17 @@
 // 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/>.
 
-export { BugFilterToggle } from "./filter-toggle";
-export { BugFilterRow } from "./filter-row";
-export { AppliedFilters } from "./applied-filters";
-export { deserializeFilters, serializeFilters, createDefaultCondition, getFilterConfig, getFilterLabel, getFilterIcon, FILTER_FIELD_CONFIGS, OPERATOR_LABELS } from "./filter-types";
-export type { FilterCondition, BugFilterKey, FilterOperator, FilterFieldType } from "./filter-types";
+// BUG 筛选桶导出 = 共享 createFiltersModule 的九字段实例（UI 对齐一期 PR-3
+// 任务 12：原六组件收拢至 shared-kit/list-kit/filters 参数化工厂，此处仅装配；
+// 导出名与组件 props 签名对消费方完全不变，字段配置与业务渲染器见 ./field-configs）。
+import { createFiltersModule } from "@/components/shared-kit/list-kit/filters";
+import { BUG_FILTERS_MODULE_OPTIONS, BUG_FILTER_FIELD_CONFIGS } from "./field-configs";
+
+const bugFilters = createFiltersModule(BUG_FILTER_FIELD_CONFIGS, BUG_FILTERS_MODULE_OPTIONS);
+
+export const BugFilterToggle = bugFilters.FilterToggle;
+export const BugFilterRow = bugFilters.FilterRow;
+export const AppliedFilters = bugFilters.AppliedFilters;
+
+export { deserializeFilters, serializeFilters, createDefaultCondition, getFilterConfig, getFilterLabel, getFilterIcon, FILTER_FIELD_CONFIGS, OPERATOR_LABELS } from "./field-configs";
+export type { FilterCondition, BugFilterKey, FilterOperator, FilterFieldType } from "./field-configs";

package/src/components/bug/inline-editors/assignee-editor.tsx

@@ -46,7 +46,7 @@ export function AssigneeEditor({ assignee, users, onChange, className, variant =
   return (
     <Popover open={open} onOpenChange={(v) => { setOpen(v); if (v) setSearch(""); }}>
       {showChip && assignee ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
             <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
               <UserAvatar
                 avatarConfig={assignee.avatarConfig}
@@ -118,7 +118,7 @@ export function AssigneeEditor({ assignee, users, onChange, className, variant =
                 >
                   <UserAvatar
                     avatarConfig={u.avatarConfig}
-                    bgShape={u.bgShape as "circle" | "rounded" | "square" | null}
+                    bgShape={u.bgShape}
                     bgColor={u.bgColor}
                     name={u.username}
                     size="sm"

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

@@ -65,7 +65,7 @@ export function LabelsEditor({ labelIds, labels, onChange, className, variant =
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip && labelIds.length > 0 ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>{triggerContent}</PopoverTrigger>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>{triggerContent}</PopoverTrigger>
       ) : (
         <InlineTrigger
           title={m.bug_filter_field_label()}

package/src/components/bug/inline-editors/severity-editor.tsx

@@ -15,10 +15,15 @@
 // 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 { useMemo, useState } from "react";
 import { Check } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { BUG_SEVERITIES, SEVERITY_LABEL, SEVERITY_COLOR } from "@/shared/bug/constants";
+import {
+  LevelBadge,
+  extractTextColors,
+  type LevelBadgeMeta,
+} from "@/components/shared-kit/list-kit/level-badge";
+import { BUG_SEVERITIES, SEVERITY_LABEL, SEVERITY_COLOR, SEVERITY_ICON } from "@/shared/bug/constants";
 import type { BugSeverity } from "@/shared/bug/constants";
 import { cn } from "@/lib/utils";
 import { InlineTrigger } from "./inline-trigger";
@@ -28,36 +33,50 @@ interface SeverityEditorProps {
   value: BugSeverity;
   onChange: (value: BugSeverity) => void;
   className?: string;
-  /** 渲染形态：chip=有值时显示 chip 边框（筛选场景），button=始终 Button（列表/详情场景） */
+  /** 渲染形态：chip=LevelBadge 徽章触发器（筛选场景），button=InlineTrigger（列表/详情场景） */
   variant?: "chip" | "button";
 }
 
-/** BUG 严重度色点（colorToken 的 text-* 部分驱动 bg-current，禁止硬编码色） */
-function ColoredDot({ colorToken, className }: { colorToken: string; className?: string }) {
-  const textClass = colorToken.split(" ").find((c) => c.startsWith("text"));
-  return <span aria-hidden="true" className={cn("size-2 shrink-0 rounded-full bg-current", textClass, className)} />;
-}
-
 export function SeverityEditor({ value, onChange, className, variant = "chip" }: SeverityEditorProps) {
   const [open, setOpen] = useState(false);
   const showChip = variant === "chip";
   const triggerText = SEVERITY_LABEL[value]?.() ?? value;
 
+  // LevelBadge meta（任务 37 接 shared-kit LevelBadge，参照 testcase 任务 29
+  // priority-editor 先例：徽章形态触发器 + 选项行 icon 变体）。icon/色 token 引
+  // constants 单一来源；constants 字段实名 colorToken（= §5.1 徽章公式
+  // bg-x-500/15 text-x-600 dark:text-x-400），映射为 LevelBadgeMeta.color。
+  // label 为 i18n 求值，必须渲染期构建——模块作用域会在 SSR 首次 import 时以
+  // 初始化期 locale 烘焙文案（后续请求 locale 变化不生效），useMemo 保引用稳定。
+  const severityLevelMeta = useMemo(
+    () =>
+      Object.fromEntries(
+        BUG_SEVERITIES.map((s) => [
+          s.value,
+          {
+            label: SEVERITY_LABEL[s.value](),
+            icon: SEVERITY_ICON[s.value],
+            color: SEVERITY_COLOR[s.value],
+          },
+        ]),
+      ) as Record<string, LevelBadgeMeta>,
+    [],
+  );
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
-            <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
-              <ColoredDot colorToken={SEVERITY_COLOR[value] ?? ""} />
-              <span className="text-xs">{triggerText}</span>
-            </span>
-          </PopoverTrigger>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
+          <span className="cursor-pointer">
+            <LevelBadge level={value} meta={severityLevelMeta} />
+          </span>
+        </PopoverTrigger>
       ) : (
         <InlineTrigger
           title={m.bug_filter_field_severity()}
           value={triggerText}
           hasValue={!!value}
-          icon={<ColoredDot colorToken={SEVERITY_COLOR[value] ?? ""} />}
+          icon={<LevelBadge level={value} meta={severityLevelMeta} variant="icon" />}
           label={triggerText}
           className={className}
         />
@@ -78,8 +97,8 @@ export function SeverityEditor({ value, onChange, className, variant = "chip" }:
                 active ? "bg-accent font-medium" : "hover:bg-muted",
               )}
             >
-              <ColoredDot colorToken={s.colorToken} />
-              {s.label()}
+              <LevelBadge level={s.value} meta={severityLevelMeta} variant="icon" />
+              <span className={cn("font-medium", extractTextColors(SEVERITY_COLOR[s.value]))}>{s.label()}</span>
               {active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
             </button>
           );

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

@@ -46,7 +46,7 @@ export function StateEditor({ value, onChange, className, variant = "chip" }: St
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip ? (
-        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
             <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
               <ColoredDot colorToken={STATE_COLOR[value] ?? ""} />
               <span className="text-xs">{triggerText}</span>