@cloudtower/eagle 0.0.0-no-uikit-1 → 0.0.0-theme-rc-1

package/docs/coreX/DeleteDialog/guide.md

@@ -0,0 +1,161 @@
+# DeleteDialog
+
+## 简介
+
+DeleteDialog 是一个预设了删除确认样式的对话框组件，基于 SmallDialog 封装。确认按钮默认使用危险（红色）样式以突出操作风险，支持异步删除（confirmLoading）和 footer 错误信息展示。固定宽度 492px。
+
+## 何时使用
+
+- 删除单个或多个资源前需要用户二次确认
+- 需要展示删除操作的风险提示（主描述 + 辅助说明）
+- 异步删除操作需要 loading 状态和错误反馈
+
+不要使用：
+
+- 操作被拒绝/不可执行的反馈 --> 请用 `RejectDialog`
+- 包含表单输入的删除确认 --> 请用 `MediumDialog`
+- 非删除类的简单确认 --> 请用 `SmallDialog`
+
+## 基础用法
+
+```tsx
+import React from "react";
+import {
+  DeleteDialog,
+  Button,
+  KitStoreProvider,
+  ModalStack,
+} from "@cloudtower/eagle";
+import { usePushModal } from "@cloudtower/eagle";
+
+const App = () => {
+  const pushModal = usePushModal();
+
+  return (
+    <Button
+      type="primary"
+      danger
+      onClick={() =>
+        pushModal({
+          component: () => (
+            <DeleteDialog
+              title="删除虚拟机"
+              description="确定要删除虚拟机 vm-prod-01 吗？"
+              secondaryDesc="删除后数据将无法恢复。"
+              onOk={(popModal) => {
+                console.log("confirmed delete");
+                popModal();
+              }}
+            />
+          ),
+          props: {},
+        })
+      }
+    >
+      删除虚拟机
+    </Button>
+  );
+};
+```
+
+## 常见模式
+
+### 模式一：异步删除 + 错误处理
+
+适用于删除操作需要调用 API 的场景。通过 `confirmLoading` 控制按钮加载状态，`error` 展示操作失败信息。
+
+```tsx
+import React, { useState } from "react";
+import { DeleteDialog, Button } from "@cloudtower/eagle";
+import { usePushModal } from "@cloudtower/eagle";
+
+const AsyncDeleteDialog = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+
+  return (
+    <DeleteDialog
+      title="删除集群"
+      description="确定要删除集群 cluster-01 吗？"
+      secondaryDesc="删除过程中请耐心等待。"
+      confirmLoading={loading}
+      error={error}
+      onOk={async (popModal) => {
+        setLoading(true);
+        setError(undefined);
+        try {
+          await deleteCluster("cluster-01");
+          popModal();
+        } catch {
+          setError("删除失败，请重试");
+        } finally {
+          setLoading(false);
+        }
+      }}
+    />
+  );
+};
+
+// 使用方式
+const App = () => {
+  const pushModal = usePushModal();
+
+  return (
+    <Button
+      type="primary"
+      danger
+      onClick={() =>
+        pushModal({ component: () => <AsyncDeleteDialog />, props: {} })
+      }
+    >
+      删除集群
+    </Button>
+  );
+};
+```
+
+### 模式二：自定义按钮文案
+
+适用于需要更明确的按钮文案来引导用户决策的场景。
+
+```tsx
+import React from "react";
+import { DeleteDialog, Button } from "@cloudtower/eagle";
+import { usePushModal } from "@cloudtower/eagle";
+
+const App = () => {
+  const pushModal = usePushModal();
+
+  return (
+    <Button
+      type="primary"
+      danger
+      onClick={() =>
+        pushModal({
+          component: () => (
+            <DeleteDialog
+              title="删除数据盘"
+              description="该数据盘中可能包含重要数据，删除后将无法恢复。"
+              cancelText="暂不删除"
+              okText="确认删除"
+              onOk={(popModal) => {
+                console.log("confirmed delete disk");
+                popModal();
+              }}
+            />
+          ),
+          props: {},
+        })
+      }
+    >
+      删除数据盘
+    </Button>
+  );
+};
+```
+
+## 相关组件
+
+- `SmallDialog`: 底层对话框组件（492px），DeleteDialog 基于其封装
+- `RejectDialog`: 操作拒绝反馈对话框，用于告知用户操作无法执行的原因
+- `MediumDialog`: 中型对话框（720px），适用于包含表单的删除确认

package/docs/coreX/RejectDialog/guide.md

@@ -0,0 +1,185 @@
+# RejectDialog
+
+## 简介
+
+RejectDialog 是操作拒绝反馈对话框，基于 SmallDialog 封装。用于告知用户某个操作无法执行及其原因，通过 `type` 属性（RejectDialogType 枚举）支持四种模式：Single（单个对象拒绝）、All（批量全部拒绝）、Part（批量部分拒绝）、Custom（自定义内容）。仅 Part 模式显示确认按钮（允许用户继续操作未被拒绝的部分）。
+
+## 何时使用
+
+- 单个资源操作被拒绝，需要展示拒绝原因（Single 模式）
+- 批量操作中全部资源都不可操作，需要逐一列出原因（All 模式）
+- 批量操作中部分资源不可操作，用户可选择跳过并继续（Part 模式）
+- 标准模式无法满足的特殊拒绝反馈（Custom 模式）
+
+不要使用：
+
+- 删除确认场景 --> 请用 `DeleteDialog`
+- 通用确认/提示场景 --> 请用 `SmallDialog`
+- 包含表单的操作反馈 --> 请用 `MediumDialog`
+
+## 基础用法
+
+```tsx
+import React from "react";
+import {
+  RejectDialog,
+  RejectDialogType,
+  Button,
+  KitStoreProvider,
+  ModalStack,
+} from "@cloudtower/eagle";
+import { usePushModal } from "@cloudtower/eagle";
+
+const App = () => {
+  const pushModal = usePushModal();
+
+  return (
+    <Button
+      onClick={() =>
+        pushModal({
+          component: () => (
+            <RejectDialog
+              type={RejectDialogType.Single}
+              title="无法删除虚拟机"
+              content="虚拟机正在运行中，请先关机再执行删除操作"
+              description="请解决以上问题后重试"
+            />
+          ),
+          props: {},
+        })
+      }
+    >
+      删除虚拟机
+    </Button>
+  );
+};
+```
+
+## 常见模式
+
+### 模式一：单个对象拒绝 - 多条原因
+
+适用于单个资源有多个拒绝原因需要列出的场景。支持有序列表（ordered）、无序列表（unordered）和资源列表（resource）三种列表样式。
+
+```tsx
+import React from "react";
+import { RejectDialog, RejectDialogType, Button } from "@cloudtower/eagle";
+import { usePushModal } from "@cloudtower/eagle";
+
+const App = () => {
+  const pushModal = usePushModal();
+
+  return (
+    <Button
+      onClick={() =>
+        pushModal({
+          component: () => (
+            <RejectDialog
+              type={RejectDialogType.Single}
+              title="无法删除虚拟机"
+              content={[
+                "虚拟机当前状态为运行中，需要先关机",
+                "存在未完成的数据备份任务",
+                "该虚拟机已被安全策略锁定",
+              ]}
+              listType="ordered"
+              description="请解决以上问题后重试"
+            />
+          ),
+          props: {},
+        })
+      }
+    >
+      删除虚拟机
+    </Button>
+  );
+};
+```
+
+### 模式二：批量全部拒绝
+
+适用于批量操作中所有资源均被拒绝的场景。content 使用 `{ [对象名]: [原因列表] }` 格式。
+
+```tsx
+import React from "react";
+import { RejectDialog, RejectDialogType, Button } from "@cloudtower/eagle";
+import { usePushModal } from "@cloudtower/eagle";
+
+const App = () => {
+  const pushModal = usePushModal();
+
+  return (
+    <Button
+      onClick={() =>
+        pushModal({
+          component: () => (
+            <RejectDialog
+              type={RejectDialogType.All}
+              title="无法删除选中的虚拟机"
+              content={{
+                "vm-master-01": ["作为集群主节点，需要先迁移控制平面"],
+                "vm-db-01": ["当前为主数据库节点", "有活跃的数据库连接"],
+              }}
+              description="以下虚拟机无法执行删除操作"
+              secondaryDesc="建议在业务低峰期执行删除操作"
+            />
+          ),
+          props: {},
+        })
+      }
+    >
+      批量删除虚拟机
+    </Button>
+  );
+};
+```
+
+### 模式三：批量部分拒绝
+
+适用于批量操作中部分资源可继续操作的场景。Part 模式会显示确认按钮（默认 danger 样式），通过 `okButtonProps={{ danger: false }}` 可改为非危险样式。
+
+```tsx
+import React from "react";
+import { RejectDialog, RejectDialogType, Button } from "@cloudtower/eagle";
+import { usePushModal } from "@cloudtower/eagle";
+
+const App = () => {
+  const pushModal = usePushModal();
+
+  return (
+    <Button
+      onClick={() =>
+        pushModal({
+          component: () => (
+            <RejectDialog
+              type={RejectDialogType.Part}
+              title="升级虚拟机工具"
+              description="选中的 3 个虚拟机中，有 1 个可以升级。"
+              content={{
+                vm1: ["无需升级"],
+                vm2: ["未安装虚拟机工具"],
+              }}
+              partialDescription="2 个虚拟机无法升级，继续操作将跳过这些虚拟机。"
+              okText="部分升级"
+              okButtonProps={{ danger: false }}
+              onOk={(popModal) => {
+                console.log("执行部分升级");
+                popModal();
+              }}
+            />
+          ),
+          props: {},
+        })
+      }
+    >
+      批量升级虚拟机工具
+    </Button>
+  );
+};
+```
+
+## 相关组件
+
+- `SmallDialog`: 底层对话框组件（492px），RejectDialog 基于其封装
+- `DeleteDialog`: 删除确认对话框，用于需要用户确认的删除操作
+- `MediumDialog`: 中型对话框（720px），适用于包含表单的复杂反馈场景

package/docs/llms.txt

@@ -0,0 +1,171 @@
+# @cloudtower/eagle
+
+> CloudTower 产品的 React UI 组件库，基于 Ant Design 二次封装。
+
+## 安装与初始化
+
+npm 包名：@cloudtower/eagle
+样式引入：import "@cloudtower/eagle/dist/style.css"
+
+使用 UIKitProvider 包裹应用根节点，内部管理 ConfigProvider、i18n、message 等上下文。
+
+## 反馈
+
+- [SmallDialog](core/SmallDialog/guide.md): 小型对话框（492px），用于简单确认和提示
+- [MediumDialog](core/MediumDialog/guide.md): 中型对话框（720px），用于表单和较多内容
+- [ImmersiveDialog](core/ImmersiveDialog/guide.md): 沉浸式全屏对话框，支持左右面板布局
+- [WizardDialog](core/WizardDialog/guide.md): 向导对话框，支持多步骤流程
+- [DeleteDialog](coreX/DeleteDialog/guide.md): 删除确认对话框，基于 SmallDialog 封装，自带 danger 按钮，支持异步删除和错误信息展示
+- [RejectDialog](coreX/RejectDialog/guide.md): 操作拒绝反馈对话框，支持 Single/All/Part/Custom 四种模式
+- message: 全局提示，支持 success/error/warning/info/loading 类型
+- message-group: 消息分组，将多条消息合并为一组展示
+- [Alert](core/Alert/guide.md): 提示框，支持 info/error/warning/success/normal 类型，可关闭，支持展开/收起
+- Banner: 全局横幅通知，支持 error/info/warning 类型，固定在页面顶部
+- notification: 通知提醒（继承 antd notification）
+
+## 数据录入
+
+- Form: 表单容器，封装 antd Form，管理表单数据收集和校验
+- FormItem: 表单项，封装 antd Form.Item，提供 label、校验规则等
+- Input: 输入框，封装 antd Input
+- InputNumber: 数字输入框，封装 antd InputNumber
+- InputInteger: 整数输入框，只允许输入整数
+- InputPassword: 密码输入框，支持显示/隐藏切换
+- InputGroup: 输入框组合，将多个输入控件组合为一行
+- InputTagItem: 标签样式的输入项，用于标签化显示
+- TextArea: 多行文本输入框
+- Select: 下拉选择器，封装 antd Select，支持搜索和多选
+- Cascader: 级联选择器，封装 antd Cascader
+- AutoComplete: 自动补全输入框
+- Checkbox: 复选框
+- Radio: 单选框
+- Switch: 开关切换
+- DateRangePicker: 日期范围选择器，支持绝对日期和相对时间两种模式
+- TimePicker: 时间选择器
+- Calendar: 日历面板
+- TimeZoneSelect: 时区选择器，内置全球时区数据
+- [SearchInput](core/SearchInput/guide.md): 搜索输入框，支持防抖搜索、结果导航（上下翻页/计数器）和最近搜索历史
+- [TableForm](core/TableForm/guide.md): 表格表单，行内编辑的表格，支持批量填充、多种列类型、增删行、拖拽排序和三种校验模式
+- Fields: 表单字段集合，包含 Boolean/DateTime/Enum/Float/Int/String/TextArea 等预设字段
+- CronPlan: 定时计划配置组件，支持按天/周/月设置 cron 表达式
+- CronCalendar: 定时计划日历预览，可视化展示 cron 表达式的执行日期
+- SortableList: 可拖拽排序列表，基于 react-beautiful-dnd
+- SwitchWithText: 带文字标签的开关组件
+
+## 数据展示
+
+- [Table](core/Table/guide.md): 表格组件，基于 antd Table 二次封装，支持排序、行选择、展开行、加载/错误状态
+- [LogView](core/LogView/guide.md): 日志查看器，基于 xterm 封装，支持静态日志、EventSource 流式日志、搜索导航和滚动缓冲控制
+- Tab: 标签页，封装 antd Tabs
+- Collapse: 折叠面板（继承 antd Collapse）
+- Tag: 标签，支持多种预设颜色
+- Token: 令牌标签，支持颜色、大小和可关闭
+- Badge: 徽标数，封装 antd Badge
+- StatusCapsule: 状态胶囊，圆角标签用于显示状态，支持多种颜色和 loading
+- Legend: 图例标签，用于图表图例展示，支持多种形状和颜色
+- Tooltip: 文字提示气泡
+- Truncate: 文本截断，超长文本省略并 hover 显示完整内容
+- Card: 卡片容器，封装 antd Card
+- AccordionCard: 手风琴卡片，支持展开/收起的卡片容器
+- DetailCard: 详情卡片，带标题的详情展示卡片
+- Avatar: 头像
+- Skeleton: 骨架屏，封装 antd Skeleton
+- Empty: 空状态占位，封装 antd Empty
+- BlankState: 空白状态页，支持 large/medium/small/area 四种尺寸
+- ExpandableList: 可展开列表，包含 ExpandableContainer/ExpandableItem/ExpandIcon/RoundOrder
+- Overflow: 溢出检测组件，内容溢出时显示替代内容
+- OverflowTooltip: 溢出提示，文本溢出时自动显示 Tooltip
+- NamesTooltip: 名称列表提示，hover 显示完整名称列表
+- UnderlineTooltip: 下划线提示，文本带下划线并 hover 显示 Tooltip
+- SummaryTable: 摘要表格，键值对形式的信息展示
+- InfoRowList: 信息行列表，label-content 两列布局的详情信息展示
+- CheckPointList: 检查点列表，展示多步骤检查结果和状态
+- I18nNameTag: 国际化名称标签，在翻译文本中嵌入名称 Tag
+- DonutChart: 环形图，基于 recharts 的饼图组件
+- LineChart: 折线图，支持指标数据时序展示
+- BarChart: 条形图，堆叠式水平条形图
+- Metric: 指标图表组件，集成折线图和图例
+- ChartWithTooltip: 带 Tooltip 的图表，结合单位格式化展示指标数据
+- UnitWithChart: 单位数值与图表组合展示
+- Progress: 进度条，支持线形和区域两种模式
+- StepProgress: 步骤进度，圆形进度指示器
+- Counting: 计数器，按指定间隔自动刷新渲染
+
+## 通用
+
+- Button: 按钮，封装 antd Button
+- ButtonGroup: 按钮组，将多个按钮组合为一组
+- Icon: 图标容器，统一图标尺寸和样式
+- BaseIcon: 基础图标，支持 SVG 图标渲染
+- Link: 链接，封装 antd Typography.Link
+- Typo: 排版样式集合，提供 Display/Heading/Label/Paragraph 等预定义的 Linaria 类名；若需要根据 Figma Typography 名称查找对应样式，请使用公开导出的 `FIGMA_TO_TYPO`
+- Color: 颜色 token；若目标文件已依赖全局 Sass 变量或已有 `$...` 写法，优先使用 `dist/variables.scss` 中的 Sass 变量，否则优先使用公开导出的 `Color.*`
+- Loading: 加载中动画，三条竖线动画
+- CircleLoading: 圆形加载动画，旋转渐变圆形图标
+- Space: 间距组件，封装 antd Space
+- Antd5Flex: 弹性布局，直接导出 antd5 Flex
+- Show: 条件渲染组件，根据 condition 决定是否渲染 children
+- DropdownTransition: 下拉过渡动画，基于 CSSTransition 的显示/隐藏过渡
+
+## 布局
+
+- Nav: 顶部导航栏，支持左/中/右三区域布局
+- Sider: 侧边栏布局，基于 antd Layout.Sider，含菜单和底部操作区
+- SidebarMenu: 侧边菜单，多级导航菜单
+- SidebarSubtitle: 侧边栏小标题
+- Divider: 分隔线（继承 antd Divider）
+- GoBackButton: 返回按钮，带箭头图标的导航返回按钮
+- TabMenu: 标签菜单，顶部标签切换 + 内容区，支持下拉溢出菜单
+
+## 导航
+
+- Breadcrumb: 面包屑导航
+- Pagination: 分页器，封装 antd Pagination
+- SimplePagination: 简易分页，仅显示页码输入和前后翻页
+- Steps: 步骤条，封装 antd Steps
+- SegmentControl: 分段控制器，封装 antd5 Segmented
+- DropdownMenu: 下拉菜单，封装 antd Dropdown + Menu
+- Antd5Dropdown: 下拉菜单，封装 antd5 Dropdown
+- Antd5Anchor: 锚点导航，封装 antd5 Anchor
+- Antd5Tree: 树形控件，封装 antd5 Tree
+- Timeline: 时间线，封装 antd Timeline
+- BatchOperation: 批量操作工具栏，表格多选后显示的操作栏
+
+## 数据格式化
+
+- Byte: 字节格式化显示（自动转换 KB/MB/GB 等）
+- BytePerSecond: 字节每秒速率格式化
+- Bit: 比特格式化显示
+- BitPerSecond: 比特每秒速率格式化
+- Bps: 每秒传输速率格式化
+- Frequency: 频率格式化显示（Hz/GHz 等）
+- Percent: 百分比格式化显示
+- Second: 秒数格式化显示
+- Speed: 速度格式化显示
+- Time: 时间日期格式化显示
+- Arch: CPU 架构文本显示（x86_64/aarch64 等国际化文本）
+
+## 错误处理
+
+- Error: 简单错误文本显示
+- ErrorBoundary: 错误边界，捕获子组件渲染错误并显示回退 UI
+- BasicCTError: CloudTower 错误信息展示，解析并展示 CT 业务错误
+- FailedLoad: 加载失败组件，展示错误信息和重试按钮
+
+## 基础设施
+
+- ConfigProvider: 全局配置，管理 antd4/antd5 双版本 locale 和主题
+- KitStoreProvider: 组件库 Redux Store Provider，管理弹窗栈等全局状态
+- ModalStack: 弹窗栈渲染器，渲染通过 usePushModal 打开的弹窗
+- ParrotTrans: 国际化文本组件，封装 react-i18next Trans 并注入 parrot i18n 实例
+
+## 废弃组件
+
+- [~~LegacyModal~~](core/LegacyModal/migrate-guide.md): 已废弃，请迁移至 SmallDialog / MediumDialog / ImmersiveDialog / WizardDialog
+- ~~LegacySelect~~: 已废弃，请迁移至 Select
+- ~~DeprecatedProgress~~: 已废弃，请迁移至 Progress
+- ~~DeprecatedDonutChart~~: 已废弃，请迁移至 DonutChart
+- ~~KubeConfigModal~~: 业务专用弹窗，基于 LegacyModal，不建议新代码使用
+- ~~Styled~~: 已废弃的通用样式组件集合（CommonContent, ModalBody, WizardBody 等）
+
+各废弃组件的迁移指南见对应目录下的 migrate-guide.md。

package/docs/theme-color-gaps.md

@@ -0,0 +1,135 @@
+# 颜色迁移待确认项
+
+迁移仅做等值替换：RGB、透明度和完整配方均须等价。没有等值 token 的位置保留原值，交给设计决定；不按语义改色，不自动新增变量。以下是待决事项，不是 token 源或 lint baseline。
+
+透明度也逐项比较：例如 rgba(...,.1) 与八位十六进制 ...1A（约 .101961）并非严格等值，保留原透明度，不将精度差异视为设计确认。
+
+## Eagle 保留值
+
+同值多处使用合并列出；设计需确认其用途及是否改用候选 token。候选仅说明差异，不表示已获确认。
+
+| 保留原值／表达式 | 使用文件（相对 `src/`） | 此前候选及差异 |
+| --- | --- | --- |
+| `rgba(0, 128, 255, 0.1)` | `core/AccordionCard/index.tsx`、`core/Steps/style.ts`、`coreX/CronPlan/index.tsx`、`coreX/TabMenu/index.tsx`、`styles/component/menu.scss` | `$fill-outstanding-light → rgba(0, 136, 255, 0.1019607843)` |
+| `var(--color, #06101f)` | `core/Button/index.tsx` | `var(--color, $text-neutral-primary) → var(--color, #00122E)` |
+| `var(--border-color, #d9d9d9)` | `core/Button/index.tsx` | `var(--border-color, $stroke-neutral-trans-2) → var(--border-color, rgba(211, 218, 235, 0.6))` |
+| `rgba(255, 187, 0, 0.1)` | `core/Button/index.tsx`、`core/Styled/index.tsx`、`core/Token/index.tsx`、`styles/override.scss` | `#{$fill-notice-light} → rgba(254, 160, 8, 0.1019607843)`；`$fill-notice-light → rgba(254, 160, 8, 0.1019607843)` |
+| `rgba(255, 187, 0, 0.16)` | `core/Button/index.tsx`、`core/StatusCapsule/index.tsx`、`styles/override.scss` | `#{$fill-notice-lighthover} → rgba(254, 160, 8, 0.1607843137)`；`$fill-notice-lighthover → rgba(254, 160, 8, 0.1607843137)` |
+| `rgba(255, 187, 0, 0.2)` | `core/Button/index.tsx` | `#{$fill-notice-lightactive} → rgba(254, 160, 8, 0.2)` |
+| `drop-shadow(0px 2px 8px rgba(255, 187, 0, 0.1))` | `core/Button/index.tsx` | `drop-shadow(0px 2px 8px $fill-notice-light) → drop-shadow(0px 2px 8px rgba(254, 160, 8, 0.1019607843))` |
+| `#ff4d4f !important` | `core/FormItem/index.tsx` | `$stroke-serious-base !important → #F0483E !important` |
+| `#0096ff` | `core/InputInteger/index.tsx`、`core/Styled/index.tsx`、`core/Table/index.tsx`、`coreX/CronCalendar/index.tsx`、`coreX/CronPlan/index.tsx` | `$stroke-outstanding-base → #0080FF`；`$text-colorful-outstanding → #0080FF`；`$fill-outstanding-base → #0080FF` |
+| `#e75a3a` | `core/InputInteger/index.tsx`、`core/Styled/index.tsx`、`styles/override.scss` | `$stroke-serious-base → #F0483E`；`$text-colorful-serious → #F0483E` |
+| `rgba(235, 239, 245, 0.6)` | `core/InputTagItem/index.tsx`、`styles/override.scss` | `$fill-neutral-trans-2 → rgba(225, 230, 241, 0.6)`；`$stroke-neutral-trans-1 → rgba(225, 230, 241, 0.6)` |
+| `1px solid rgba(223, 228, 235, 0.6)` | `core/InputTagItem/index.tsx` | `1px solid $stroke-neutral-trans-2 → 1px solid rgba(211, 218, 235, 0.6)` |
+| `rgba(0, 0, 0, 0.75)` | `core/Metric/styled.ts` | `$fill-neutral-trans-8 → rgba(23, 38, 64, 0.8)` |
+| `1px solid #e1e5eb` | `core/Styled/index.tsx` | `1px solid $stroke-neutral-trans-1 → 1px solid rgba(225, 230, 241, 0.6)` |
+| `rgba(213, 219, 227, 0.6)` | `core/Styled/index.tsx`、`core/Table/index.tsx`、`styles/component/menu.scss` | `$stroke-neutral-trans-1 → rgba(225, 230, 241, 0.6)`；`$fill-neutral-trans-3 → rgba(211, 218, 235, 0.6)` |
+| `rgba(240, 243, 247, 0.6)` | `core/Styled/index.tsx` | `$fill-neutral-trans-1 → rgba(237, 241, 250, 0.6)` |
+| `1px solid rgba(213, 219, 227, 0.6)` | `core/Styled/index.tsx`、`coreX/CronPlan/index.tsx`、`styles/override.scss` | `1px solid $stroke-neutral-trans-2 → 1px solid rgba(211, 218, 235, 0.6)`；`1px solid $stroke-neutral-trans-1 → 1px solid rgba(225, 230, 241, 0.6)` |
+| `#f2f4f6` | `core/Styled/index.tsx` | `$fill-neutral-opaque-1 → #F2F5FA` |
+| `#8e9aa9` | `core/Styled/index.tsx` | `$text-neutral-tertiary → rgba(44, 56, 82, 0.6)` |
+| `1px solid #e75a3a` | `core/Styled/index.tsx` | `1px solid $stroke-serious-base → 1px solid #F0483E` |
+| `rgba(0, 0, 0, 0.25)` | `core/Styled/index.tsx` | `$text-neutral-quaternary → rgba(0, 21, 64, 0.3019607843)` |
+| `rgba(0, 0, 0, 0.45)` | `core/Styled/index.tsx` | `$text-neutral-tertiary → rgba(44, 56, 82, 0.6)` |
+| `#3e4652` | `core/Styled/index.tsx`、`coreX/CronCalendar/index.tsx`、`styles/override.scss` | `$text-neutral-primary → #00122E` |
+| `1px solid rgba(204, 212, 227, 0.18)` | `core/Table/TableWidget.tsx` | `1px solid $stroke-neutral-trans-1 → 1px solid rgba(225, 230, 241, 0.6)` |
+| `#FFA500` | `core/TableForm/const.ts` | `Color.text.colorful.notice → #FEA008` |
+| `#ffa500` | `core/TableForm/style.ts` | `$text-colorful-notice → #FEA008` |
+| `#f5f7fa` | `coreX/BarChart/index.tsx`、`coreX/CronPlan/index.tsx`、`styles/override.scss` | `$fill-neutral-opaque-1 → #F2F5FA` |
+| `rgba(245, 247, 250, 0.6)` | `coreX/CronCalendar/index.tsx` | `$fill-neutral-trans-1 → rgba(237, 241, 250, 0.6)` |
+| `rgba(62, 70, 82, 0.6)` | `coreX/CronCalendar/index.tsx`、`coreX/CronPlan/index.tsx`、`styles/override.scss` | `$text-neutral-tertiary → rgba(44, 56, 82, 0.6)` |
+| `rgba(129, 138, 153, 0.6)` | `coreX/CronCalendar/index.tsx`、`coreX/CronPlan/index.tsx`、`styles/component/menu.scss` | `$text-neutral-tertiary → rgba(44, 56, 82, 0.6)` |
+| `1px solid rgba(129, 138, 153, 0.6)` | `coreX/CronPlan/index.tsx` | `1px solid $stroke-neutral-trans-4 → 1px solid rgba(107, 128, 167, 0.6)` |
+| `2px solid rgba(129, 138, 153, 0.6)` | `coreX/CronPlan/index.tsx` | `2px solid $stroke-neutral-trans-4 → 2px solid rgba(107, 128, 167, 0.6)` |
+| `#d9d9d9` | `coreX/CronPlan/index.tsx` | `$stroke-neutral-trans-2 → rgba(211, 218, 235, 0.6)` |
+| `#e6f4ff` | `coreX/DateRangePicker/DateRangePicker.style.ts` | `$fill-outstanding-light → rgba(0, 136, 255, 0.1019607843)` |
+| `rgba(0, 0, 0, 0.25) !important` | `coreX/Sider/index.tsx` | `$text-neutral-quaternary !important → rgba(0, 21, 64, 0.3019607843) !important` |
+| `rgba(0, 128, 255, 0.16)` | `coreX/TabMenu/index.tsx` | `$fill-outstanding-lighthover → rgba(0, 136, 255, 0.1607843137)` |
+| `rgba(0, 128, 255, 0.2)` | `coreX/TabMenu/index.tsx` | `$fill-outstanding-lightactive → rgba(0, 136, 255, 0.2)` |
+| `rgba(45, 58, 86, 0.6)` | `coreX/TabMenu/index.tsx` | `$text-neutral-tertiary → rgba(44, 56, 82, 0.6)` |
+| `1px solid #dfe4eb` | `styles/component/menu.scss` | `1px solid $stroke-neutral-trans-2 → 1px solid rgba(211, 218, 235, 0.6)` |
+| `rgba(240, 72, 62, 0.1)` | `styles/component/menu.scss` | `$fill-serious-light → rgba(255, 74, 74, 0.1019607843)` |
+| `rgba(223, 228, 235, 0.6)` | `styles/override.scss` | `$fill-neutral-trans-3 → rgba(211, 218, 235, 0.6)` |
+| `#d9d9d9 !important` | `styles/override.scss` | `$stroke-neutral-trans-2 !important → rgba(211, 218, 235, 0.6) !important` |
+| `#29adff` | `styles/override.scss` | `$stroke-outstanding-base → #0080FF` |
+| `1px dashed rgba(129, 138, 153, 0.6)` | `styles/override.scss` | `1px dashed $stroke-neutral-trans-4 → 1px dashed rgba(107, 128, 167, 0.6)` |
+| `rgba(107, 125, 153, 0.3)` | `styles/override.scss` | `$dim-single-dialogmask → rgba(16, 26, 41, 0.4)` |
+| `drop-shadow(0px 2px 8px 0px rgba(255, 187, 0, 0.1))` | `styles/override.scss` | `drop-shadow(0px 2px 8px 0px $fill-notice-light) → drop-shadow(0px 2px 8px 0px rgba(254, 160, 8, 0.1019607843))` |
+| `rgba(0, 21, 64, 0.3)` | `core/BlankState/style.ts`、`core/DetailCard/index.tsx`、`core/LocalUpload/LocalUpload.style.ts`、`core/Select/select.style.ts`、`core/Styled/index.tsx`、`coreX/DateRangePicker/DateRangePicker.style.ts`、`coreX/GoBackButton/index.tsx`、`coreX/InfoRowList/InfoRowList.tsx` | `$text-neutral-quaternary → rgba(0, 21, 64, 0.3019607843)` |
+| `rgba(0, 136, 255, 0.16)` | `core/Button/index.tsx`、`core/StatusCapsule/index.tsx`、`core/TimeZoneSelect/index.tsx`、`coreX/DateRangePicker/DateRangePicker.style.ts`、`styles/override.scss` | `#{$stroke-outstanding-light} → rgba(0, 136, 255, 0.1607843137)`；`#{$fill-outstanding-lighthover} → rgba(0, 136, 255, 0.1607843137)`；`$fill-outstanding-lighthover → rgba(0, 136, 255, 0.1607843137)`；`$stroke-outstanding-light → rgba(0, 136, 255, 0.1607843137)` |
+| `rgba(255, 74, 74, 0.16)` | `core/Button/index.tsx`、`core/StatusCapsule/index.tsx`、`styles/override.scss` | `#{$stroke-serious-light} → rgba(255, 74, 74, 0.1607843137)`；`#{$fill-serious-lighthover} → rgba(255, 74, 74, 0.1607843137)`；`$fill-serious-lighthover → rgba(255, 74, 74, 0.1607843137)` |
+| `rgba(0, 136, 255, 0.1)` | `core/Button/index.tsx`、`core/ExpandableList/RoundOrder.tsx`、`core/LocalUpload/LocalUpload.style.ts`、`core/Radio/index.tsx`、`core/Steps/style.ts`、`core/Styled/index.tsx`、`core/Tab/Tab.style.ts`、`core/Table/index.tsx`、`core/TableForm/style.ts`、`core/TimeZoneSelect/index.tsx`、`core/Token/index.tsx`、`styles/override.scss` | `#{$fill-outstanding-light} → rgba(0, 136, 255, 0.1019607843)`；`$fill-outstanding-light → rgba(0, 136, 255, 0.1019607843)`；`$blue-blue-a10-50 → rgba(0, 136, 255, 0.1019607843)` |
+| `rgba(255, 74, 74, 0.1)` | `core/Button/index.tsx`、`core/LocalUpload/LocalUpload.style.ts`、`core/Token/index.tsx`、`styles/override.scss` | `#{$fill-serious-light} → rgba(255, 74, 74, 0.1019607843)`；`$fill-serious-light → rgba(255, 74, 74, 0.1019607843)` |
+| `drop-shadow(0px 2px 8px rgba(0, 136, 255, 0.1))` | `core/Button/index.tsx`、`core/ButtonGroup/index.tsx` | `drop-shadow(0px 2px 8px $fill-outstanding-light) → drop-shadow(0px 2px 8px rgba(0, 136, 255, 0.1019607843))` |
+| `drop-shadow(0px 2px 8px rgba(255, 74, 74, 0.1))` | `core/Button/index.tsx` | `drop-shadow(0px 2px 8px $fill-serious-light) → drop-shadow(0px 2px 8px rgba(255, 74, 74, 0.1019607843))` |
+| `rgba(44, 56, 82, 0.75)` | `core/SegmentControl/index.tsx`、`core/Steps/style.ts` | `$text-neutral-secondary → rgba(44, 56, 82, 0.7490196078)` |
+| `rgba(30, 201, 127, 0.16)` | `core/StatusCapsule/index.tsx`、`styles/override.scss` | `$fill-positive-lighthover → rgba(30, 201, 127, 0.1607843137)` |
+| `rgba(0, 136, 255, 0.1) !important` | `core/Steps/style.ts` | `$fill-outstanding-light !important → rgba(0, 136, 255, 0.1019607843) !important` |
+| `rgba(30, 201, 127, 0.1)` | `core/Token/index.tsx`、`styles/override.scss` | `$fill-positive-light → rgba(30, 201, 127, 0.1019607843)` |
+| `drop-shadow(0px 2px 8px 0px rgba(0, 136, 255, 0.1))` | `styles/override.scss` | `drop-shadow(0px 2px 8px 0px $fill-outstanding-light) → drop-shadow(0px 2px 8px 0px rgba(0, 136, 255, 0.1019607843))` |
+| `drop-shadow(0px 2px 8px 0px rgba(30, 201, 127, 0.1))` | `styles/override.scss` | `drop-shadow(0px 2px 8px 0px $fill-positive-light) → drop-shadow(0px 2px 8px 0px rgba(30, 201, 127, 0.1019607843))` |
+| `drop-shadow(0px 2px 8px 0px rgba(255, 74, 74, 0.1))` | `styles/override.scss` | `drop-shadow(0px 2px 8px 0px $fill-serious-light) → drop-shadow(0px 2px 8px 0px rgba(255, 74, 74, 0.1019607843))` |
+| `drop-shadow(0px 0px 0px 4px rgba(0, 136, 255, 0.16))` | `styles/override.scss` | `drop-shadow(0px 0px 0px 4px $fill-outstanding-lighthover) → drop-shadow(0px 0px 0px 4px rgba(0, 136, 255, 0.1607843137))` |
+| `drop-shadow(0px 0px 0px 4px rgba(255, 74, 74, 0.16))` | `styles/override.scss` | `drop-shadow(0px 0px 0px 4px $stroke-serious-light) → drop-shadow(0px 0px 0px 4px rgba(255, 74, 74, 0.1607843137))` |
+| `rgba(126, 65, 255, 0.1)` | `styles/override.scss` | `$fill-purple-light → rgba(126, 65, 255, 0.1019607843)` |
+| `rgba(126, 65, 255, 0.16)` | `styles/override.scss` | `$fill-purple-lighthover → rgba(126, 65, 255, 0.1607843137)` |
+
+另有以下完整配方或专用值继续保留：
+
+| 使用位置 | 保留值／配方及待确认差异 |
+| --- | --- |
+| `core/Card/CardWrapper.tsx` | 原默认八层阴影、hover 两层阴影；与 Effect.shadow.dashboardCard 的层数、偏移、模糊及颜色不同。 |
+| `styles/component/menu.scss`、`styles/override.scss` 的 menu／panel／card 阴影辅助类 | 原完整阴影及叠放顺序；部分与 Effect 的半径、偏移或层顺序不同。 |
+| `core/Styled/index.tsx`、`coreX/CronCalendar/index.tsx`、`coreX/DateRangePicker/DateRangePicker.style.ts`、`coreX/InfoRowList/InfoRow.tsx`、`styles/override.scss` | inset 描边／焦点阴影的旧颜色及透明度；不能换成数值不同的 stroke／fill token。 |
+| `core/Loading/style.ts` | 保留渐变尾端 rgba(0,128,255,.16)，候选 blue-a16-50 的 G 通道为 136；起点 #0080FF 已等值引用 token。 |
+| `core/LineChart/RenderChart.tsx`、`core/LineChart/ThresholdIntersectionLayer.tsx` | 阈值色 #FF4D4F；stroke.serious.base 为 #F0483E。 |
+| `core/LogView/LogView.theme.ts`、`core/LogView/LogView.style.ts` | overview ruler #000000、滚动条 hover #4A607A；没有等值 token，不能换成主文字色或相邻灰阶。 |
+| `coreX/DateRangePicker/DateRangePicker.style.ts` | 范围高亮背景／描边 #E6F4FF、pinned header 外阴影和 inset 描边；不透明浅蓝不能换成透明填充。 |
+| `core/Styled/index.tsx`、`styles/override.scss`、`coreX/KubeConfigModal/KubeConfigModal.style.ts` | TagSpan 三组线性渐变、badge 三组径向渐变、211.41° 灰色渐变；端点、角度、半径和位置按原式保留。 |
+| `styles/override.scss` 的 `*-filter` 类 | 原 drop-shadow 配方；不能直接套用 box-shadow token。 |
+| `core/LineChart/styled.ts`、`core/Metric/styled.ts`、`coreX/ChartWithTooltip/index.tsx`、`core/Styled/index.tsx` | 图例／辅助文字 #B4BECA、#CCCCCC 以及 Dot #8E9AA9（opacity .4）；保留原灰色，不推断语义层级。 |
+
+Avatar／Nav 的 previewPanel 阴影及其余等价 Effect 替换保留。TableLoading 空占位背景使用等值不透明 token 加原透明度；LogView 遮罩使用原基色 token 加原透明度。
+
+## Ant Design 保留值
+
+Ant 4／5 的原始基础色集中在 `src/styles/antd-themes.json`，保留历史值；未定制项及 hover／active 等派生值继续由官方主题生成。Ant 5 保留调用方覆盖。抽取配置不代表已对齐 Eagle token，也不改变原始浅色。下表候选仍待设计确认，不加入等值映射。
+
+| 版本／变量 | 保留值 | 待确认候选及差异 |
+| --- | --- | --- |
+| antd5 `colorPrimary` | `#1677ff` | `fill-outstanding-base` = `#0080FF` |
+| antd5 `colorLink` | `#1677ff` | `link-outstandingnormal` = `#0080FF` |
+| antd4 `link-hover-color` | `#299bff` | `link-outstandinghover` = `#009DFF` |
+| antd5 `colorLinkHover` | `#69b1ff` | `link-outstandinghover` = `#009DFF` |
+| antd4 `link-active-color` | `#0065d9` | `link-outstandingactive` = `#005ED1` |
+| antd5 `colorLinkActive` | `#0958d9` | `link-outstandingactive` = `#005ED1` |
+| antd4 `primary-5` | `#299bff` | `fill-outstanding-bright` = `#009DFF` |
+| antd5 `colorPrimaryHover` | `#4096ff` | `fill-outstanding-bright` = `#009DFF` |
+| antd4 `primary-7` | `#0065d9` | `fill-outstanding-dark` = `#005ED1` |
+| antd5 `colorPrimaryActive` | `#0958d9` | `fill-outstanding-dark` = `#005ED1` |
+| antd4 `success-color` | `#25C764` | `fill-positive-base` = `#00BA5D` |
+| antd5 `colorSuccess` | `#52c41a` | `fill-positive-base` = `#00BA5D` |
+| antd4 `warning-color` | `#faad14` | `fill-notice-base` = `#FEA008` |
+| antd5 `colorWarning` | `#faad14` | `fill-notice-base` = `#FEA008` |
+| antd4 `error-color` | `#ff4d4f` | `fill-serious-base` = `#F0483E` |
+| antd5 `colorError` | `#ff4d4f` | `fill-serious-base` = `#F0483E` |
+| antd5 `colorInfo` | `#1677ff` | `fill-outstanding-base` = `#0080FF` |
+| antd4 `text-color` | `#06101F` | `text-neutral-primary` = `#00122E` |
+| antd5 `colorText` | `rgba(0, 0, 0, 0.88)` | `text-neutral-primary` = `#00122E` |
+| antd4 `text-color-secondary` | `rgba(0, 0, 0, 0.45)` | `text-neutral-secondary` = `#2C3852BF` |
+| antd5 `colorTextSecondary` | `rgba(0, 0, 0, 0.65)` | `text-neutral-secondary` = `#2C3852BF` |
+| antd4 `heading-color` | `rgba(0, 0, 0, 0.85)` | `text-neutral-primary` = `#00122E` |
+| antd5 `colorTextHeading` | `rgba(0, 0, 0, 0.88)` | `text-neutral-primary` = `#00122E` |
+| antd4 `disabled-color` | `rgba(0, 0, 0, 0.25)` | `text-neutral-quaternary` = `#0015404D` |
+| antd5 `colorTextDisabled` | `rgba(0, 0, 0, 0.25)` | `text-neutral-quaternary` = `#0015404D` |
+| antd5 `colorBgLayout` | `#f5f5f5` | `pagebackground-primary` = `#FFFFFF` |
+| antd4 `border-color-base` | `#d9d9d9` | `stroke-neutral-trans-2` = `#D3DAEB99` |
+| antd5 `colorBorder` | `#d9d9d9` | `stroke-neutral-trans-2` = `#D3DAEB99` |
+| antd4 `border-color-split` | `#f0f0f0` | `stroke-neutral-trans-1` = `#E1E6F199` |
+| antd5 `colorBorderSecondary` | `#f0f0f0` | `stroke-neutral-trans-1` = `#E1E6F199` |
+| antd4 `box-shadow-base` | `0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` | `effect-shadow-menu-default` = `0px 0px 10px 0px rgba(107,125,153,0.18), 0px 12px 40px 0px rgba(45,58,86,0.3)` |
+| antd5 `boxShadowSecondary` | `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` | `effect-shadow-menu-default` = `0px 0px 10px 0px rgba(107,125,153,0.18), 0px 12px 40px 0px rgba(45,58,86,0.3)` |
+| antd5 `colorTextBase` | `#000` | `text-neutral-primary` = `#00122E` |
+
+2026-11-03：以上保留值尚未完成主题映射，不能宣称完整暗色适配；设计确认后再逐项修改。颜色格式不同但等值（例如 #fff 与 #FFFFFF）无需记录为缺口。