R54 A1-A6：Cutover 控制台与特性开关增强

- Feature Flag 变更历史查看与影响范围预览
- Feature Flag 批量操作（启用/禁用/继承）
- Cutover 控制台页面增强（摘要卡片、时间线、延迟生效）
- 单测覆盖 changelog、batch、权限边界

client/src/pages/FeatureFlagsPage.tsx

@@ -1,26 +1,41 @@
 import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { fetchDepartments } from "../api/departments";
+import { mapApiErrorMessage } from "../api/errorMessages";
 import {
+  batchUpdateFeatureFlags,
+  fetchFeatureFlagChangelog,
+  fetchFeatureFlagImpact,
   fetchFeatureFlags,
   updateFeatureFlag,
   type FeatureFlagItem,
   type FeatureFlagKey,
   type FeatureFlagOverrideMode,
   type FeatureFlagRolloutType,
+  type FeatureFlagSection,
+  type FeatureFlagSnapshot,
 } from "../api/featureFlags";
-import { toast } from "sonner";
-import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
 import { PageHeader } from "../components/common/PageHeader";
+import { Pagination } from "../components/common/Pagination";
 import { TableSkeleton } from "../components/common/TableSkeleton";
+import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog";
 import { Label } from "../components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 
 const OVERRIDE_MODE_OPTIONS: Array<{ value: FeatureFlagOverrideMode; label: string }> = [
   { value: "force_off", label: "强制关闭" },
-  { value: "inherit", label: "继承Env" },
+  { value: "inherit", label: "继承 Env" },
   { value: "force_on", label: "强制开启" },
 ];
 
@@ -30,6 +45,7 @@ const ROLLOUT_TYPE_OPTIONS: Array<{ value: FeatureFlagRolloutType; label: string
 ];
 
 function toDisplayName(flagKey: string) {
+  if (flagKey === "ai_assist") return "AI 辅助";
   if (flagKey === "erp_sync") return "ERP 同步";
   if (flagKey === "invoice_verification") return "发票验真";
   if (flagKey === "leave_holiday_calendar") return "请假日历增强";
@@ -44,6 +60,7 @@ function toDisplayName(flagKey: string) {
   if (flagKey === "weekly_report_v1") return "周报工作台";
   if (flagKey === "employee_lifecycle_v1") return "人员生命周期";
   if (flagKey === "todo_board_v1") return "待办工作台";
+  if (flagKey === "wecom_entry_v1") return "企业微信入口";
   if (flagKey === "project_domain_v1") return "项目主域";
   if (flagKey === "project_linking_v1") return "项目联动";
   if (flagKey === "project_communication_log_v1") return "项目沟通回填";
@@ -53,10 +70,55 @@ function toDisplayName(flagKey: string) {
   return flagKey;
 }
 
+function formatOverrideModeLabel(value: FeatureFlagOverrideMode) {
+  return OVERRIDE_MODE_OPTIONS.find((option) => option.value === value)?.label ?? value;
+}
+
+function formatRolloutTypeLabel(value: FeatureFlagRolloutType) {
+  return ROLLOUT_TYPE_OPTIONS.find((option) => option.value === value)?.label ?? value;
+}
+
+function formatSectionLabel(value: FeatureFlagSection) {
+  if (value === "main") return "主导航";
+  if (value === "admin") return "管理入口";
+  if (value === "backup") return "备用入口";
+  return value;
+}
+
+function formatDateTime(value: string | null) {
+  if (!value) return "-";
+  return value.slice(0, 19).replace("T", " ");
+}
+
 function dedupeIds(items: string[]) {
   return Array.from(new Set(items.filter(Boolean)));
 }
 
+function resolveErrorMessage(error: unknown) {
+  if (isApiError(error)) {
+    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "请求失败，请稍后重试。";
+}
+
+function summarizeSnapshot(snapshot: FeatureFlagSnapshot | null) {
+  if (!snapshot) {
+    return "无快照";
+  }
+
+  const parts = [
+    `override：${formatOverrideModeLabel(snapshot.overrideMode)}`,
+    `rollout：${formatRolloutTypeLabel(snapshot.rolloutType)}`,
+    `白名单部门：${snapshot.departmentIds.length}`,
+    `说明：${snapshot.note || "-"}`,
+    `version：${snapshot.version}`,
+  ];
+  return parts.join(" | ");
+}
+
 type DraftState = {
   overrideMode: FeatureFlagOverrideMode;
   rolloutType: FeatureFlagRolloutType;
@@ -79,6 +141,13 @@ export function FeatureFlagsPage() {
   const queryClient = useQueryClient();
   const [error, setError] = useState("");
   const [drafts, setDrafts] = useState<Record<string, DraftState>>({});
+  const [batchMode, setBatchMode] = useState(false);
+  const [selectedFlagKeys, setSelectedFlagKeys] = useState<FeatureFlagKey[]>([]);
+  const [batchAction, setBatchAction] = useState<FeatureFlagOverrideMode | null>(null);
+  const [batchNote, setBatchNote] = useState("");
+  const [historyFlagKey, setHistoryFlagKey] = useState<FeatureFlagKey | null>(null);
+  const [historyPage, setHistoryPage] = useState(1);
+  const [impactFlagKey, setImpactFlagKey] = useState<FeatureFlagKey | null>(null);
 
   const flagsQuery = useQuery({
     queryKey: ["feature-flags"],
@@ -90,14 +159,30 @@ export function FeatureFlagsPage() {
     queryFn: () => fetchDepartments({ includeArchived: false }),
   });
 
+  const historyQuery = useQuery({
+    enabled: Boolean(historyFlagKey),
+    queryKey: ["feature-flag-changelog", historyFlagKey, historyPage],
+    queryFn: () =>
+      fetchFeatureFlagChangelog(historyFlagKey!, {
+        page: historyPage,
+        pageSize: 10,
+      }),
+  });
+
+  const impactQuery = useQuery({
+    enabled: Boolean(impactFlagKey),
+    queryKey: ["feature-flag-impact", impactFlagKey],
+    queryFn: () => fetchFeatureFlagImpact(impactFlagKey!),
+  });
+
   const updateMutation = useMutation({
-    mutationFn: async (flagKey: string) => {
+    mutationFn: async (flagKey: FeatureFlagKey) => {
       const draft = drafts[flagKey];
       if (!draft) {
         throw new Error("未找到待提交草稿");
       }
 
-      return updateFeatureFlag(flagKey as FeatureFlagKey, {
+      return updateFeatureFlag(flagKey, {
         overrideMode: draft.overrideMode,
         rolloutType: draft.rolloutType,
         departmentIds:
@@ -106,15 +191,61 @@ export function FeatureFlagsPage() {
         expectedVersion: draft.version,
       });
     },
-    onSuccess: async () => {
+    onSuccess: async (result, flagKey) => {
+      setDrafts((prev) => ({
+        ...prev,
+        [flagKey]: buildDraft(result.item),
+      }));
       await queryClient.invalidateQueries({ queryKey: ["feature-flags"] });
       setError("");
       toast.success("开关已更新");
     },
     onError: (err) => {
-      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "更新开关失败";
-      setError(msg);
-      toast.error(msg);
+      const message = resolveErrorMessage(err);
+      setError(message);
+      toast.error(message);
+    },
+  });
+
+  const batchMutation = useMutation({
+    mutationFn: () => {
+      const selectedItems = items.filter((item) => selectedFlagKeys.includes(item.flagKey));
+      if (!batchAction) {
+        throw new Error("未选择批量动作");
+      }
+      if (!selectedItems.length || selectedItems.length !== selectedFlagKeys.length) {
+        throw new Error("批量选择项已过期，请刷新后重试");
+      }
+
+      return batchUpdateFeatureFlags({
+        items: selectedItems.map((item) => ({
+          flagKey: item.flagKey,
+          overrideMode: batchAction,
+          expectedVersion: item.version,
+        })),
+        note: batchNote.trim(),
+      });
+    },
+    onSuccess: async (result) => {
+      setDrafts((prev) => {
+        const next = { ...prev };
+        for (const flagKey of selectedFlagKeys) {
+          delete next[flagKey];
+        }
+        return next;
+      });
+      await queryClient.invalidateQueries({ queryKey: ["feature-flags"] });
+      setError("");
+      setBatchMode(false);
+      setSelectedFlagKeys([]);
+      setBatchAction(null);
+      setBatchNote("");
+      toast.success(`已批量更新 ${result.count} 个开关`);
+    },
+    onError: (err) => {
+      const message = resolveErrorMessage(err);
+      setError(message);
+      toast.error(message);
     },
   });
 
@@ -127,6 +258,14 @@ export function FeatureFlagsPage() {
   }, [departmentsQuery.data?.items]);
 
   const items = flagsQuery.data?.items ?? [];
+  const selectedItems = useMemo(
+    () => items.filter((item) => selectedFlagKeys.includes(item.flagKey)),
+    [items, selectedFlagKeys],
+  );
+  const historyTotalPages = Math.max(
+    1,
+    Math.ceil((historyQuery.data?.total ?? 0) / (historyQuery.data?.pageSize ?? 10)),
+  );
 
   const ensureDraft = (item: FeatureFlagItem) => {
     if (drafts[item.flagKey]) {
@@ -135,10 +274,15 @@ export function FeatureFlagsPage() {
     return buildDraft(item);
   };
 
-  const patchDraft = (flagKey: string, updater: (prev: DraftState) => DraftState) => {
+  const patchDraft = (flagKey: FeatureFlagKey, updater: (prev: DraftState) => DraftState) => {
     setDrafts((prev) => {
       const base = prev[flagKey];
-      const next = updater(base ?? buildDraft(items.find((item) => item.flagKey === flagKey)!));
+      const fallback = items.find((item) => item.flagKey === flagKey);
+      if (!fallback) {
+        return prev;
+      }
+
+      const next = updater(base ?? buildDraft(fallback));
       return {
         ...prev,
         [flagKey]: next,
@@ -146,8 +290,30 @@ export function FeatureFlagsPage() {
     });
   };
 
+  const handleBatchModeChange = () => {
+    if (batchMode) {
+      setBatchMode(false);
+      setSelectedFlagKeys([]);
+      setBatchAction(null);
+      setBatchNote("");
+      return;
+    }
+
+    setBatchMode(true);
+  };
+
+  const handleBatchAction = (overrideMode: FeatureFlagOverrideMode) => {
+    if (!selectedItems.length) {
+      toast.error("请先选择至少一个功能开关");
+      return;
+    }
+
+    setBatchAction(overrideMode);
+    setBatchNote("");
+  };
+
   return (
-    <div className="space-y-6">
+    <div className={batchMode ? "space-y-6 pb-32" : "space-y-6"}>
       <PageHeader
         title="功能开关"
         subtitle="统一治理外部桥接、验真与请假日历灰度。Env 仍是硬闸，在线开关用于部门级灰度。"
@@ -157,20 +323,24 @@ export function FeatureFlagsPage() {
         <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
       ) : null}
 
-      <div className="card-std p-6 space-y-4">
-        <h3 className="text-base font-semibold text-zinc-900">开关列表</h3>
-
-        {flagsQuery.isLoading ? <TableSkeleton columns={6} rows={2} /> : null}
+      <SectionPanel
+        title="开关列表"
+        description="单条编辑保留原能力；批量模式只统一切换 overrideMode，并要求共享变更说明。"
+        actions={
+          <Button
+            type="button"
+            variant={batchMode ? "secondary" : "default"}
+            onClick={handleBatchModeChange}
+          >
+            {batchMode ? "退出批量" : "批量操作"}
+          </Button>
+        }
+      >
+        {flagsQuery.isLoading ? <TableSkeleton columns={batchMode ? 7 : 6} rows={4} /> : null}
 
         {flagsQuery.isError ? (
           <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
-            {isApiError(flagsQuery.error)
-              ? `${flagsQuery.error.code}: ${mapApiErrorMessage(
-                  flagsQuery.error.code,
-                  flagsQuery.error.details,
-                  flagsQuery.error.message,
-                )}`
-              : "加载功能开关失败"}
+            {resolveErrorMessage(flagsQuery.error)}
           </p>
         ) : null}
 
@@ -179,21 +349,43 @@ export function FeatureFlagsPage() {
             <Table data-testid="feature-flags-table">
               <TableHeader>
                 <tr>
+                  {batchMode ? <TableHead className="w-14">选择</TableHead> : null}
                   <TableHead>功能</TableHead>
                   <TableHead>当前状态</TableHead>
                   <TableHead>覆盖策略</TableHead>
                   <TableHead>灰度范围</TableHead>
                   <TableHead>备注</TableHead>
-                  <TableHead className="w-40">操作</TableHead>
+                  <TableHead className="w-56">操作</TableHead>
                 </tr>
               </TableHeader>
               <TableBody>
                 {items.map((item) => {
                   const draft = ensureDraft(item);
                   const isPending = updateMutation.isPending && updateMutation.variables === item.flagKey;
+                  const isSelected = selectedFlagKeys.includes(item.flagKey);
+                  const singleEditDisabled = batchMode || isPending || batchMutation.isPending;
 
                   return (
                     <TableRow key={item.flagKey} data-testid={`feature-flag-row-${item.flagKey}`}>
+                      {batchMode ? (
+                        <TableCell>
+                          <input
+                            aria-label={`select-${item.flagKey}`}
+                            checked={isSelected}
+                            className="h-4 w-4 rounded border border-zinc-300"
+                            onChange={(event) => {
+                              setSelectedFlagKeys((prev) => {
+                                if (event.target.checked) {
+                                  return dedupeIds([...prev, item.flagKey]) as FeatureFlagKey[];
+                                }
+                                return prev.filter((value) => value !== item.flagKey);
+                              });
+                            }}
+                            type="checkbox"
+                          />
+                        </TableCell>
+                      ) : null}
+
                       <TableCell>
                         <div className="font-medium text-zinc-900">{toDisplayName(item.flagKey)}</div>
                         <div className="font-mono text-xs text-zinc-500">{item.flagKey}</div>
@@ -220,6 +412,7 @@ export function FeatureFlagsPage() {
                           <Label className="mb-1 block text-xs text-zinc-500">override</Label>
                           <select
                             className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+                            disabled={singleEditDisabled}
                             value={draft.overrideMode}
                             onChange={(event) =>
                               patchDraft(item.flagKey, (prev) => ({
@@ -240,15 +433,14 @@ export function FeatureFlagsPage() {
                           <Label className="mb-1 block text-xs text-zinc-500">rollout</Label>
                           <select
                             className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+                            disabled={singleEditDisabled}
                             value={draft.rolloutType}
                             onChange={(event) =>
                               patchDraft(item.flagKey, (prev) => ({
                                 ...prev,
                                 rolloutType: event.target.value as FeatureFlagRolloutType,
                                 departmentIds:
-                                  event.target.value === "department_allowlist"
-                                    ? prev.departmentIds
-                                    : [],
+                                  event.target.value === "department_allowlist" ? prev.departmentIds : [],
                               }))
                             }
                           >
@@ -266,6 +458,7 @@ export function FeatureFlagsPage() {
                           <div className="space-y-2">
                             <select
                               className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+                              disabled={singleEditDisabled}
                               value=""
                               onChange={(event) => {
                                 const selected = event.target.value;
@@ -293,7 +486,8 @@ export function FeatureFlagsPage() {
                                   >
                                     <span>{departmentsById.get(departmentId) ?? departmentId}</span>
                                     <button
-                                      className="text-red-600"
+                                      className="text-red-600 disabled:text-zinc-400"
+                                      disabled={singleEditDisabled}
                                       type="button"
                                       onClick={() =>
                                         patchDraft(item.flagKey, (prev) => ({
@@ -318,7 +512,8 @@ export function FeatureFlagsPage() {
 
                       <TableCell>
                         <textarea
-                          className="min-h-24 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+                          className="min-h-24 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:text-zinc-500"
+                          disabled={singleEditDisabled}
                           placeholder="填写本次变更说明"
                           value={draft.note}
                           onChange={(event) =>
@@ -332,19 +527,40 @@ export function FeatureFlagsPage() {
                       </TableCell>
 
                       <TableCell>
-                        <div className="space-y-2">
+                        <div className="flex flex-wrap gap-2">
+                          <Button
+                            size="sm"
+                            type="button"
+                            variant="secondary"
+                            onClick={() => {
+                              setHistoryPage(1);
+                              setHistoryFlagKey(item.flagKey);
+                            }}
+                          >
+                            变更历史
+                          </Button>
+                          <Button
+                            size="sm"
+                            type="button"
+                            variant="secondary"
+                            onClick={() => setImpactFlagKey(item.flagKey)}
+                          >
+                            影响范围
+                          </Button>
                           <Button
                             data-testid={`feature-flag-save-${item.flagKey}`}
-                            disabled={isPending}
+                            disabled={singleEditDisabled}
+                            size="sm"
                             onClick={() => updateMutation.mutate(item.flagKey)}
                             type="button"
                           >
                             {isPending ? "保存中..." : "保存"}
                           </Button>
-
                           <Button
                             data-testid={`feature-flag-reset-${item.flagKey}`}
-                            variant="secondary"
+                            disabled={singleEditDisabled}
+                            size="sm"
+                            variant="outline"
                             type="button"
                             onClick={() =>
                               setDrafts((prev) => ({
@@ -364,7 +580,251 @@ export function FeatureFlagsPage() {
             </Table>
           </div>
         ) : null}
-      </div>
+      </SectionPanel>
+
+      <Dialog
+        open={Boolean(historyFlagKey)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setHistoryFlagKey(null);
+            setHistoryPage(1);
+          }
+        }}
+      >
+        <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>变更历史</DialogTitle>
+            <DialogDescription>
+              {historyFlagKey ? `${toDisplayName(historyFlagKey)} 的历史变更审计记录。` : "查看开关变更轨迹。"}
+            </DialogDescription>
+          </DialogHeader>
+
+          {historyQuery.isLoading ? <TableSkeleton columns={1} rows={3} /> : null}
+          {historyQuery.isError ? (
+            <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+              {resolveErrorMessage(historyQuery.error)}
+            </p>
+          ) : null}
+          {!historyQuery.isLoading && !historyQuery.isError ? (
+            <div className="space-y-4">
+              {historyQuery.data?.items.length ? (
+                historyQuery.data.items.map((item) => (
+                  <div key={item.id} className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <div className="text-sm font-medium text-zinc-900">
+                        {item.actorName || item.actorId}
+                      </div>
+                      <div className="text-xs text-zinc-500">{formatDateTime(item.createdAt)}</div>
+                    </div>
+                    <div className="mt-3 grid gap-3 md:grid-cols-2">
+                      <div className="rounded-lg border border-zinc-200 bg-white p-3">
+                        <div className="mb-1 text-xs font-medium text-zinc-500">变更前</div>
+                        <div className="text-sm text-zinc-700">{summarizeSnapshot(item.from)}</div>
+                      </div>
+                      <div className="rounded-lg border border-zinc-200 bg-white p-3">
+                        <div className="mb-1 text-xs font-medium text-zinc-500">变更后</div>
+                        <div className="text-sm text-zinc-700">{summarizeSnapshot(item.to)}</div>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
+                  暂无变更历史。
+                </div>
+              )}
+
+              {historyQuery.data && historyTotalPages > 1 ? (
+                <Pagination page={historyPage} totalPages={historyTotalPages} onPageChange={setHistoryPage} />
+              ) : null}
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={Boolean(impactFlagKey)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setImpactFlagKey(null);
+          }
+        }}
+      >
+        <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>影响范围</DialogTitle>
+            <DialogDescription>
+              {impactFlagKey ? `${toDisplayName(impactFlagKey)} 影响的前端导航与后端模块。` : "查看开关影响范围。"}
+            </DialogDescription>
+          </DialogHeader>
+
+          {impactQuery.isLoading ? <TableSkeleton columns={1} rows={3} /> : null}
+          {impactQuery.isError ? (
+            <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+              {resolveErrorMessage(impactQuery.error)}
+            </p>
+          ) : null}
+          {!impactQuery.isLoading && !impactQuery.isError && impactQuery.data ? (
+            <div className="space-y-6">
+              <div className="space-y-3">
+                <h4 className="text-sm font-semibold text-zinc-900">前端导航</h4>
+                {impactQuery.data.navigationItems.length ? (
+                  impactQuery.data.navigationItems.map((item) => (
+                    <div key={`${item.path}-${item.section}`} className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
+                      <div className="font-medium text-zinc-900">{item.label}</div>
+                      <div className="text-sm text-zinc-600">{item.path}</div>
+                      <div className="mt-1 text-xs text-zinc-500">{formatSectionLabel(item.section)}</div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
+                    当前没有直接受此开关控制的导航项。
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-3">
+                <h4 className="text-sm font-semibold text-zinc-900">后端模块</h4>
+                {impactQuery.data.backendModules.length ? (
+                  impactQuery.data.backendModules.map((item) => (
+                    <div key={item.label} className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
+                      <div className="font-medium text-zinc-900">{item.label}</div>
+                      <div className="mt-2 space-y-1 text-sm text-zinc-600">
+                        {item.routes.map((route) => (
+                          <div key={route} className="font-mono text-xs text-zinc-500">
+                            {route}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
+                    当前没有登记在映射表中的后端模块。
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={Boolean(batchAction)}
+        onOpenChange={(open) => {
+          if (!open && !batchMutation.isPending) {
+            setBatchAction(null);
+            setBatchNote("");
+          }
+        }}
+      >
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {batchAction ? `${formatOverrideModeLabel(batchAction)}所选开关` : "批量更新"}
+            </DialogTitle>
+            <DialogDescription>确认本次批量修改的功能开关，并填写共享变更说明。</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="max-h-48 overflow-y-auto rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+              {selectedItems.map((item) => (
+                <div key={item.flagKey} className="mb-2 rounded-lg bg-white px-3 py-2 last:mb-0">
+                  <div className="font-medium text-zinc-900">{toDisplayName(item.flagKey)}</div>
+                  <div className="font-mono text-xs text-zinc-500">
+                    {item.flagKey} · version {item.version}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="space-y-2">
+              <Label>变更说明</Label>
+              <textarea
+                className="min-h-28 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+                placeholder="填写本次批量变更说明"
+                value={batchNote}
+                onChange={(event) => setBatchNote(event.target.value)}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              disabled={batchMutation.isPending}
+              onClick={() => {
+                setBatchAction(null);
+                setBatchNote("");
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              disabled={batchMutation.isPending || !batchNote.trim() || !selectedItems.length}
+              onClick={() => batchMutation.mutate()}
+            >
+              {batchMutation.isPending ? "提交中..." : "确认执行"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {batchMode ? (
+        <div className="fixed bottom-6 left-1/2 z-50 w-[min(960px,calc(100vw-2rem))] -translate-x-1/2 rounded-2xl border border-zinc-200 bg-white/95 p-4 shadow-xl backdrop-blur">
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <div className="text-sm text-zinc-700">
+              已选择 <span className="font-semibold text-zinc-900">{selectedItems.length}</span> 个功能开关
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Button
+                size="sm"
+                type="button"
+                variant="secondary"
+                onClick={() => setSelectedFlagKeys(items.map((item) => item.flagKey))}
+              >
+                全选
+              </Button>
+              <Button
+                size="sm"
+                type="button"
+                variant="outline"
+                onClick={() => setSelectedFlagKeys([])}
+              >
+                取消全选
+              </Button>
+              <Button
+                size="sm"
+                type="button"
+                disabled={!selectedItems.length || batchMutation.isPending}
+                onClick={() => handleBatchAction("force_on")}
+              >
+                批量启用
+              </Button>
+              <Button
+                size="sm"
+                type="button"
+                variant="destructive"
+                disabled={!selectedItems.length || batchMutation.isPending}
+                onClick={() => handleBatchAction("force_off")}
+              >
+                批量禁用
+              </Button>
+              <Button
+                size="sm"
+                type="button"
+                variant="secondary"
+                disabled={!selectedItems.length || batchMutation.isPending}
+                onClick={() => handleBatchAction("inherit")}
+              >
+                批量继承
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }