@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/bug/filters/field-configs.tsx

@@ -200,19 +200,73 @@ function renderValueEditor({ property, operator, value, onChange, multi, selecte
   }
 }
 
-interface SelectRenderProps {
+/** 值编辑器三选择器（Enum/User/Label）共用的 Popover 骨架：触发器（多选 chip /
+ *  单选触发内容）+ 选项列表（多选勾选框 / 单选尾部勾 + 选中高亮）+ 点击语义
+ *  （多选切换不关层；单选回填后收起）。仅骨架，选项内容与选中判定由调用方注入。 */
+function OptionPopoverSelect({
+  mode,
+  selectedKeys,
+  items,
+  onItemSelect,
+  renderChip,
+  renderSingleTrigger,
+  triggerClassName,
+  contentClassName,
+  empty,
+}: {
   mode: "single" | "multi";
-  selected: string[];
-}
+  selectedKeys: string[];
+  items: { key: string; active: boolean; content: React.ReactNode }[];
+  onItemSelect: (key: string) => void;
+  renderChip: (key: string) => React.ReactNode;
+  renderSingleTrigger: () => React.ReactNode;
+  triggerClassName?: string;
+  contentClassName?: string;
+  empty?: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const isMulti = mode === "multi";
 
-/** 单/多选通用触发表ul：单选显示当前项 chip，多选显示全部已选 chip */
-function ChipTriggers({ mode, selected, renderOption }: SelectRenderProps & { renderOption: (v: string) => React.ReactNode }) {
-  if (mode === "multi" && selected.length > 0) {
-    return (
-      <>{selected.map((s) => <span key={s}>{renderOption(s)}</span>)}</>
-    );
-  }
-  return null;
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {isMulti && selectedKeys.length > 0 ? (
+        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
+          {selectedKeys.map((k) => (
+            <span key={k}>{renderChip(k)}</span>
+          ))}
+        </PopoverTrigger>
+      ) : (
+        <PopoverTrigger render={<button type="button" className={cn("whitespace-nowrap transition-colors hover:bg-muted/80", triggerClassName)} />}>
+          {renderSingleTrigger()}
+        </PopoverTrigger>
+      )}
+      <PopoverContent className={cn("p-1", contentClassName)} align="start">
+        {items.length === 0 && empty}
+        {items.map((item) => (
+          <button
+            key={item.key}
+            type="button"
+            onClick={() => {
+              onItemSelect(item.key);
+              if (!isMulti) setOpen(false);
+            }}
+            className={cn(
+              "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+              item.active ? "bg-accent font-medium" : "hover:bg-muted",
+            )}
+          >
+            {isMulti && (
+              <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", item.active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
+                {item.active && <Check className="size-3" />}
+              </div>
+            )}
+            {item.content}
+            {!isMulti && item.active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+          </button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
 }
 
 function EnumSelect({
@@ -232,9 +286,6 @@ function EnumSelect({
   onMultiChange?: (value: string) => void;
   className?: string;
 }) {
-  const [open, setOpen] = useState(false);
-  const isMulti = mode === "multi";
-
   const renderChip = (v: string) => {
     const opt = options.find((o) => o.value === v);
     if (!opt) return <FallbackChip key={v} value={v} />;
@@ -248,48 +299,25 @@ function EnumSelect({
   const current = options.find((o) => o.value === value);
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      {isMulti && selected.length > 0 ? (
-        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
-          <ChipTriggers mode={mode} selected={selected} renderOption={renderChip} />
-        </PopoverTrigger>
-      ) : (
-        <PopoverTrigger render={<button type="button" className={cn("whitespace-nowrap transition-colors hover:bg-muted/80", className)} />}>
-          <span className={cn("rounded-sm px-1", current?.colorToken)}>{current?.label() ?? value}</span>
-        </PopoverTrigger>
+    <OptionPopoverSelect
+      mode={mode}
+      selectedKeys={selected}
+      items={options.map((opt) => ({
+        key: opt.value,
+        active: mode === "multi" ? selected.includes(opt.value) : value === opt.value,
+        content: <span className={cn("rounded-sm px-1", opt.colorToken)}>{opt.label()}</span>,
+      }))}
+      onItemSelect={(key) => {
+        if (mode === "multi") onMultiChange?.(key);
+        else onChange(key);
+      }}
+      renderChip={renderChip}
+      renderSingleTrigger={() => (
+        <span className={cn("rounded-sm px-1", current?.colorToken)}>{current?.label() ?? value}</span>
       )}
-      <PopoverContent className="w-40 p-1" align="start">
-        {options.map((opt) => {
-          const active = isMulti ? selected.includes(opt.value) : value === opt.value;
-          return (
-            <button
-              key={opt.value}
-              type="button"
-              onClick={() => {
-                if (isMulti) {
-                  onMultiChange?.(opt.value);
-                } else {
-                  onChange(opt.value);
-                  setOpen(false);
-                }
-              }}
-              className={cn(
-                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
-                active ? "bg-accent font-medium" : "hover:bg-muted",
-              )}
-            >
-              {isMulti && (
-                <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
-                  {active && <Check className="size-3" />}
-                </div>
-              )}
-              <span className={cn("rounded-sm px-1", opt.colorToken)}>{opt.label()}</span>
-              {!isMulti && active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
-            </button>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
+      triggerClassName={className}
+      contentClassName="w-40"
+    />
   );
 }
 
@@ -310,9 +338,6 @@ function UserSelect({
   onMultiChange?: (value: string) => void;
   className?: string;
 }) {
-  const [open, setOpen] = useState(false);
-  const isMulti = mode === "multi";
-
   const renderChip = (v: string) => {
     if (v === "__none__") {
       return (
@@ -333,82 +358,52 @@ function UserSelect({
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      {isMulti && selected.length > 0 ? (
-        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
-          <ChipTriggers mode={mode} selected={selected} renderOption={renderChip} />
-        </PopoverTrigger>
-      ) : (
-        <PopoverTrigger render={<button type="button" className={cn("flex items-center gap-1 whitespace-nowrap transition-colors hover:bg-muted/80", className)} />}>
-          {value ? (
+    <OptionPopoverSelect
+      mode={mode}
+      selectedKeys={selected}
+      items={[
+        {
+          key: "__none__",
+          active: mode === "multi" ? selected.includes("__none__") : value === null,
+          content: (
             <>
-              <UserAvatar avatarConfig={value.avatarConfig} bgShape="circle" bgColor={value.bgColor} name={value.username} size="xs" className="!w-3.5 !h-3.5" />
-              <span>{value.username}</span>
+              <CircleUser className="size-3.5 text-muted-foreground" />
+              {m.bug_list_unassigned()}
             </>
-          ) : (
+          ),
+        },
+        ...users.map((u) => ({
+          key: u.id,
+          active: mode === "multi" ? selected.includes(u.id) : value?.id === u.id,
+          content: (
             <>
-              <CircleUser className="size-3 text-muted-foreground" />
-              <span className="text-muted-foreground">{m.bug_list_unassigned()}</span>
-            </>
-          )}
-        </PopoverTrigger>
-      )}
-      <PopoverContent className="w-48 p-1" align="start">
-        <button
-          type="button"
-          onClick={() => {
-            if (isMulti) {
-              onMultiChange?.("__none__");
-            } else {
-              onChange(null);
-              setOpen(false);
-            }
-          }}
-          className={cn(
-            "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
-            selected.includes("__none__") ? "bg-accent font-medium" : "hover:bg-muted",
-          )}
-        >
-          {isMulti && (
-            <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", selected.includes("__none__") ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
-              {selected.includes("__none__") && <Check className="size-3" />}
-            </div>
-          )}
-          <CircleUser className="size-3.5 text-muted-foreground" />
-          {m.bug_list_unassigned()}
-        </button>
-        {users.map((u) => {
-          const active = isMulti ? selected.includes(u.id) : value?.id === u.id;
-          return (
-            <button
-              key={u.id}
-              type="button"
-              onClick={() => {
-                if (isMulti) {
-                  onMultiChange?.(u.id);
-                } else {
-                  onChange(u.id);
-                  setOpen(false);
-                }
-              }}
-              className={cn(
-                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
-                active ? "bg-accent font-medium" : "hover:bg-muted",
-              )}
-            >
-              {isMulti && (
-                <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
-                  {active && <Check className="size-3" />}
-                </div>
-              )}
               <UserAvatar avatarConfig={u.avatarConfig} bgShape="circle" bgColor={u.bgColor} name={u.username} size="xs" className="!w-4 !h-4" />
               <span className="truncate">{u.username}</span>
-              {!isMulti && active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
-            </button>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
+            </>
+          ),
+        })),
+      ]}
+      onItemSelect={(key) => {
+        if (mode === "multi") onMultiChange?.(key);
+        else onChange(key === "__none__" ? null : key);
+      }}
+      renderChip={renderChip}
+      renderSingleTrigger={() =>
+        value ? (
+          <>
+            <UserAvatar avatarConfig={value.avatarConfig} bgShape="circle" bgColor={value.bgColor} name={value.username} size="xs" className="!w-3.5 !h-3.5" />
+            <span>{value.username}</span>
+          </>
+        ) : (
+          <>
+            <CircleUser className="size-3 text-muted-foreground" />
+            <span className="text-muted-foreground">{m.bug_list_unassigned()}</span>
+          </>
+        )
+      }
+      triggerClassName={cn("flex items-center gap-1", className)}
+      contentClassName="w-48"
+    />
   );
 }
 
@@ -425,7 +420,6 @@ function LabelSelect({
   mode: "single" | "multi";
   className?: string;
 }) {
-  const [open, setOpen] = useState(false);
   const isMulti = mode === "multi";
 
   const toggle = (id: string) => {
@@ -445,50 +439,38 @@ function LabelSelect({
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      {isMulti && labelIds.length > 0 ? (
-        <PopoverTrigger nativeButton={false} render={<div className="flex items-center gap-1" />}>
-          {labelIds.map(renderChip)}
-        </PopoverTrigger>
-      ) : (
-        <PopoverTrigger render={<button type="button" className={cn("whitespace-nowrap transition-colors hover:bg-muted/80", className)} />}>
-          {labelIds.length === 1 ? renderChip(labelIds[0]) : <span className="text-muted-foreground">{m.bug_filter_select_label()}</span>}
-        </PopoverTrigger>
-      )}
-      <PopoverContent className="w-48 p-1" align="start">
-        {labels.length === 0 ? (
-          <div className="px-2 py-3 text-center text-xs text-muted-foreground">{m.bug_filter_no_labels()}</div>
-        ) : (
-          labels.map((l) => {
-            const active = labelIds.includes(l.id);
-            return (
-              <button
-                key={l.id}
-                type="button"
-                onClick={() => {
-                  if (isMulti || labelIds.length > 0) {
-                    toggle(l.id);
-                  } else {
-                    onChange([l.id]);
-                    setOpen(false);
-                  }
-                }}
-                className={cn(
-                  "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
-                  active ? "bg-accent font-medium" : "hover:bg-muted",
-                )}
-              >
-                <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
-                  {active && <Check className="size-3" />}
-                </div>
-                <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
-                <span className="truncate">{l.name}</span>
-              </button>
-            );
-          })
-        )}
-      </PopoverContent>
-    </Popover>
+    <OptionPopoverSelect
+      mode={mode}
+      selectedKeys={labelIds}
+      items={labels.map((l) => ({
+        key: l.id,
+        active: labelIds.includes(l.id),
+        content: (
+          <>
+            <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
+            <span className="truncate">{l.name}</span>
+          </>
+        ),
+      }))}
+      onItemSelect={(id) => {
+        if (isMulti) {
+          toggle(id);
+        } else if (labelIds.length === 1 && labelIds[0] === id) {
+          // 单选反选：点击已选项清空（服务端 is 操作符单值语义，不得追加成多值）
+          onChange([]);
+        } else {
+          // 单选替换：点击未选项直接替换，而非叠加（此前走 toggle 会拼成 "a,b" 双值）
+          onChange([id]);
+        }
+      }}
+      renderChip={renderChip}
+      renderSingleTrigger={() =>
+        labelIds.length === 1 ? renderChip(labelIds[0]) : <span className="text-muted-foreground">{m.bug_filter_select_label()}</span>
+      }
+      triggerClassName={className}
+      contentClassName="w-48"
+      empty={<div className="px-2 py-3 text-center text-xs text-muted-foreground">{m.bug_filter_no_labels()}</div>}
+    />
   );
 }
 

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

@@ -39,7 +39,10 @@ export function AssigneeEditor({ assignee, users, onChange, className, variant =
   const [search, setSearch] = useState("");
   const showChip = variant === "chip";
   const filtered = useMemo(
-    () => (search ? users.filter((u) => u.username.includes(search)) : users),
+    () =>
+      search
+        ? users.filter((u) => u.username.toLowerCase().includes(search.toLowerCase()))
+        : users,
     [users, search],
   );
 

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

@@ -15,8 +15,8 @@
 // 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 { format } from "date-fns";
+import { useMemo, useState } from "react";
+import { format, parseISO, isValid } from "date-fns";
 import type { LucideIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -29,11 +29,20 @@ interface DateEditorProps {
   onChange: (value: string | null) => void;
   label: string;
   icon: LucideIcon;
+  /** 是否渲染「清除」按钮（服务端非可空字段传 false 隐藏死控件，如 row.tsx 的 lastOccurAt） */
+  clearable?: boolean;
 }
 
-export function DateEditor({ value, onChange, label, icon: Icon }: DateEditorProps) {
+export function DateEditor({ value, onChange, label, icon: Icon, clearable = true }: DateEditorProps) {
   const [open, setOpen] = useState(false);
-  const date = value ? new Date(value.slice(0, 10)) : null;
+  // parseISO 按本地时区解析纯日期串（new Date("YYYY-MM-DD") 按 UTC 零点解析，
+  // UTC 西侧时区经 getMonth/getDate 会前移一天，且与 react-day-picker 的本地
+  // selected 口径错位）——与 field-configs 的日期 chip 同一解析口径
+  const date = useMemo(() => {
+    if (!value) return null;
+    const parsed = parseISO(value.slice(0, 10));
+    return isValid(parsed) ? parsed : null;
+  }, [value]);
   const dayFormat = date
     ? m.bug_inline_date_short({ month: date.getMonth() + 1, day: date.getDate() })
     : undefined;
@@ -53,7 +62,7 @@ export function DateEditor({ value, onChange, label, icon: Icon }: DateEditorPro
           selected={date ?? undefined}
           onSelect={(d) => { onChange(d ? format(d, "yyyy-MM-dd") : null); setOpen(false); }}
         />
-        {value && (
+        {value && clearable && (
           <div className="border-t p-1">
             <Button
               variant="ghost"

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

@@ -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 { useMemo, useState } from "react";
+import { useState } from "react";
 import { Check } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
@@ -46,22 +46,19 @@ export function SeverityEditor({ value, onChange, className, variant = "chip" }:
   // 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>,
-    [],
-  );
+  // label 为 i18n 求值：必须渲染期构建（模块作用域会在 SSR import 时烘焙 locale），
+  // 且不能 useMemo([]) 固化——那只在首渲染求值一次，运行时切语言后徽章文案停留
+  // 旧 locale；表仅 4 项，直接每渲染重建即可（无 memo 子组件依赖其引用稳定）。
+  const severityLevelMeta = 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}>

package/src/components/bug/peek-panel.tsx

@@ -29,6 +29,7 @@ import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { CalendarClock, Folder } from "lucide-react";
 import { getBugDetailFn, getBugNeighborsFn } from "@/server/serverFns/bug";
 import { formatTimestamp } from "@/lib/datetime";
+import { errorMessage } from "@/lib/toast-error";
 import type { BugPatch } from "./display/use-paged-bug-groups";
 import type { BugDetail } from "./types";
 import type { UserBrief } from "@/components/story/types";
@@ -132,7 +133,7 @@ export function BugPeekPanel({
         }
       } catch (e) {
         if (!cancelled) {
-          setError(e instanceof Error ? e.message : m.bug_detail_load_failed());
+          setError(errorMessage(e, m.bug_detail_load_failed()));
           setRefreshing(false);
         }
       }
@@ -164,6 +165,8 @@ export function BugPeekPanel({
         const nextLabelIds = next.labels.map((l) => l.id).sort().join(",");
         const prevLabelIds = prev.labels.map((l) => l.id).sort().join(",");
         if (nextLabelIds !== prevLabelIds) patch.labelIds = next.labels.map((l) => l.id);
+        // lastOccurAt 变更也随 patch 同步列表行，否则详情改日期后列表停留旧值
+        if (next.lastOccurAt !== prev.lastOccurAt) patch.lastOccurAt = next.lastOccurAt;
         if (Object.keys(patch).length > 0) onBugPatched(patch);
       }
     },

package/src/components/bug/select-bug-dialog.tsx

@@ -84,9 +84,14 @@ export function BugSelectDialog({ open, onOpenChange, storyId, projectId, projec
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [loadingMore, setLoadingMore] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-  // 打开时本需求已关联的 BUG（取消勾选 = 解绑的 diff 基准，仅含已加载部分）
+  // 打开时本需求已关联的 BUG（取消勾选 = 解绑的 diff 基准，仅含已加载部分）。
+  // ref 参与 pendingLink/pendingUnlink memo 但不入 deps：ref 变更均伴随
+  // absorbPage 内的 setSelectedIds/setItems（会触发重算），此处刻意省略。
   const initialLinkedRef = useRef<Set<string>>(new Set());
   const requestIdRef = useRef(0);
+  // open effect 已按空 search 拉取首屏：search effect 本轮跳过一次，
+  // 避免打开弹窗时 debounce 通道再发一次首页请求并把首屏重置为 loading（闪烁）
+  const skipEmptySearchRef = useRef(false);
 
   const filtered = useMemo(() => {
     let rows = items ?? [];
@@ -105,6 +110,7 @@ export function BugSelectDialog({ open, onOpenChange, storyId, projectId, projec
   // 打开重置 + 拉首页
   useEffect(() => {
     if (!open) return;
+    skipEmptySearchRef.current = true;
     setSearch("");
     setDebouncedSearch("");
     setSelectedStates(new Set(ALL_STATES));
@@ -171,6 +177,11 @@ export function BugSelectDialog({ open, onOpenChange, storyId, projectId, projec
 
   useEffect(() => {
     if (!open) return;
+    if (skipEmptySearchRef.current) {
+      skipEmptySearchRef.current = false;
+      // open effect 同轮已按空 search 拉取首屏：仅当用户已输入搜索词才走 debounce 通道
+      if (!search) return;
+    }
     debouncedSearchCallback(search);
   }, [search, open, debouncedSearchCallback]);
 
@@ -189,6 +200,9 @@ export function BugSelectDialog({ open, onOpenChange, storyId, projectId, projec
       absorbPage(res.items);
       setHasMore(res.nextCursor !== null);
       setNextCursor(res.nextCursor);
+    } catch (e) {
+      // 滚动翻页失败不再逃逸为 unhandled rejection：toast 归属，已加载内容保持不动
+      toastError(e, m.bug_storyDialog_loadMoreFailed());
     } finally {
       setLoadingMore(false);
     }

package/src/components/bug/settings/bug-settings-panel.tsx

@@ -20,8 +20,9 @@
 // （BugProjectSettings 四开关）/ 收集页（CollectPageManager，任务 19）。
 // 数据自取（同 ActivityTabs 自包含分区模式）。
 import { useCallback, useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, TriangleAlert } from "lucide-react";
 import { toast } from "@/components/ui/toast";
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import {
@@ -71,7 +72,9 @@ export function BugSettingsPanel({ projectId }: BugSettingsPanelProps) {
     null,
   );
 
-  const [settings, setSettings] = useState<BugProjectSettings | null>(null);
+  // 上报设置三态：null=加载中 / "error"=加载失败（带重试入口）/ 对象=就绪。
+  // 此前 null 双义导致失败后 report tab 永久转圈。
+  const [settings, setSettings] = useState<BugProjectSettings | null | "error">(null);
   const [settingsSaving, setSettingsSaving] = useState(false);
 
   const loadTokens = useCallback(async () => {
@@ -85,12 +88,17 @@ export function BugSettingsPanel({ projectId }: BugSettingsPanelProps) {
     }
   }, [projectId]);
 
-  useEffect(() => {
-    void loadTokens();
+  const loadSettings = useCallback(() => {
+    setSettings(null);
     getBugProjectSettingsFn({ data: { projectId } })
       .then(setSettings)
-      .catch(() => setSettings(null));
-  }, [projectId, loadTokens]);
+      .catch(() => setSettings("error"));
+  }, [projectId]);
+
+  useEffect(() => {
+    void loadTokens();
+    loadSettings();
+  }, [projectId, loadTokens, loadSettings]);
 
   const handleCreate = async (name: string): Promise<CreatedTokenResult | null> => {
     setCreating(true);
@@ -121,7 +129,7 @@ export function BugSettingsPanel({ projectId }: BugSettingsPanelProps) {
   };
 
   const updateSetting = async (patch: Partial<BugProjectSettings>) => {
-    if (!settings) return;
+    if (!settings || settings === "error") return;
     const next = { ...settings, ...patch };
     setSettings(next); // 乐观更新，失败回滚
     setSettingsSaving(true);
@@ -170,7 +178,15 @@ export function BugSettingsPanel({ projectId }: BugSettingsPanelProps) {
 
       <TabsContent value="report" className="mt-4">
         <p className="mb-4 text-sm text-muted-foreground">{m.bug_settings_report_desc()}</p>
-        {settings === null ? (
+        {settings === "error" ? (
+          <div className="flex flex-col items-center gap-2 py-8 text-sm text-muted-foreground">
+            <TriangleAlert className="size-5 text-muted-foreground" />
+            {m.bug_settings_report_loadFailed()}
+            <Button variant="outline" size="sm" onClick={loadSettings}>
+              {m.common_button_retry()}
+            </Button>
+          </div>
+        ) : settings === null ? (
           <div className="flex items-center justify-center py-8">
             <Loader2 className="size-4 animate-spin text-muted-foreground" />
           </div>