@cloudtower/eagle 0.0.0-config-rc-7 → 0.0.0-data-testid

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,169 @@
+# @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: 警告提示条，支持 success/info/warning/error 类型，可关闭
+- 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 二次封装，支持排序、行选择、展开行、加载/错误状态
+- 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 类名
+- 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/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@cloudtower/eagle",
-  "version": "0.0.0-config-rc-7",
+  "version": "0.0.0-data-testid",
   "main": "dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "dist/src/index.d.ts",
   "files": [
     "dist",
-    "antd"
+    "antd",
+    "docs"
   ],
   "sideEffects": false,
   "license": "MIT",
@@ -16,10 +17,9 @@
     "url": "https://github.com/webzard-io/cloudtower-ui-kit.git"
   },
   "scripts": {
-    "build": "rollup --config rollup.config.js --bundleConfigAsCjs",
-    "prebuild": "node tools/prebuild-antd-less.js && npx ts-node tools/prebuild-antd5-style.tsx",
+    "build": "rollup --config rollup.config.js --bundleConfigAsCjs --silent",
     "test": "vitest",
-    "test:ci": "vitest run",
+    "test:ci": "vitest run --silent",
     "coverage": "vitest run --coverage",
     "typings": "tsc --emitDeclarationOnly && tsc-alias",
     "storybook": "storybook dev -p 6006",
@@ -27,27 +27,27 @@
     "sync:color": "node tools/fetch-figma-color.js"
   },
   "dependencies": {
-    "@cloudtower/icons-react": "0.0.0-config-rc-7",
-    "@cloudtower/parrot": "0.0.0-config-rc-7",
+    "@cloudtower/icons-react": "^0.0.0-data-testid",
+    "@cloudtower/parrot": "^0.0.0-data-testid",
     "@cloudtower/rc-notification": "^4.6.1",
     "@linaria/core": "^4.2.2",
     "@linaria/react": "^4.3.0",
     "antd": "4.5.0",
-    "antd5": "npm:antd@^5.12.2",
-    "classnames": "^2.3.2",
+    "antd5": "npm:antd@5.14.0",
+    "classnames": "2.3.2",
     "dayjs": "^1.11.10",
     "react-beautiful-dnd": "^13.0.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-highlight-words": "^0.17.0",
     "react-i18next": "^13.0.1",
     "react-redux": "^7.1.3",
     "react-svg-unique-id": "^1.3.3",
     "react-transition-group": "^4.3.0",
-    "recharts": "^2.1.16",
+    "recharts": "2.15.1",
     "redux": "^4.2.0",
     "timezones.json": "^1.6.1"
   },
   "devDependencies": {
-    "@ant-design/static-style-extract": "^1.0.2",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
@@ -57,6 +57,7 @@
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^6.0.1",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-designs": "^7.0.5",
     "@storybook/addon-essentials": "^7.4.1",
@@ -69,14 +70,16 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "@types/axios": "^0.14.0",
     "@types/history": "4.7.3",
+    "@types/moment": "^2.13.0",
     "@types/react": "^17.0.50",
     "@types/react-beautiful-dnd": "^13.1.4",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-highlight-words": "^0.16.7",
     "@types/react-is": "^17.0.3",
     "@types/react-transition-group": "4.2.4",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-c8": "^0.24.1",
     "copy-to-clipboard": "^3.3.3",
     "history": "^4.9.0",
     "i18next": "^23.2.3",
@@ -111,7 +114,7 @@
     "tsc-alias": "^1.8.8",
     "typescript": "5.0.2",
     "vite": "^4.5.1",
-    "vitest": "^0.24.1"
+    "vitest": "^3.1.1"
   },
-  "gitHead": "9bc3cf8d39b05b9273cc143d2a324c7cfffc8cec"
+  "gitHead": "fa58917905e45f16034c6fa8c583ed179e10cf57"
 }

package/README.md

@@ -1,64 +0,0 @@
-# CloudTower UI KIT
-
-[storybook]: https://cloudtower-ui-kit.vercel.app
-[next storybook]: https://next-cloudtower-ui-kit.vercel.app
-[v3.x storybook]: https://v3xx-cloudtower-ui-kit.vercel.app
-[贡献代码]: ./CONTRIBUTE.md
-
-## [StoryBook]
-
-main 分支 storybook [storyBook]
-
-next 分支 storybook [next storybook]
-
-v3.x 分支 storybook [v3.x storybook]
-
-## 使用
-
-```tsx
-import { antdKit } from "@cloudtower/eagle";
-import { initParrotI18n, UIKitProvider } from "@cloudtower/eagle";
-// Set Up Style
-import "@cloudtower/eagle/dist/style.css";
-
-initParrotI18n();
-// Set Up Providers
-ReactDOM.render(
-  <React.StrictMode>
-    <UIKitProvider>
-      <App />
-    <UIKitProvider>
-  </React.StrictMode>,
-  document.getElementById("root") as HTMLElement
-);
-```
-
-```tsx
-import { Button } from "@cloudtower/eagle";
-import React, { useContext } from "react";
-
-const App = () => {
-  return (
-    <div>
-      <Button
-        onClick={() => {
-          alert("hello");
-        }}
-      >
-        say hello
-      </Button>
-    </div>
-  );
-};
-
-export default App;
-```
-
-## 如何 [贡献代码]
-
-- 快速开始
-  ```
-  yarn && cd packages/eagle && yarn storybook
-  ```
-
-详细参考 [贡献代码]

package/dist/src/core/Modal/index.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { ModalProps } from "./modal.type";
-declare const Modal: React.FC<ModalProps>;
-export default Modal;
-export * from "./modal.type";

package/dist/src/core/Modal/modal.type.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-import { ModalProps as AntdModalProps } from "antd/lib/modal";
-export type WizardSteps = {
-    title: string;
-    render: React.ReactNode;
-    /**
-     * custom prev button text
-     */
-    prevText?: string | React.ReactNode;
-    /**
-     * custom prev button event handler
-     * @returns void
-     */
-    onPrev?: () => void;
-    okText?: string | React.ReactNode;
-    onOk?: (e: React.MouseEvent<HTMLElement>) => void;
-    disabled?: boolean;
-}[];
-export type ModalProps = Omit<AntdModalProps, "okType"> & {
-    confirmLoading?: boolean;
-    fullscreen?: boolean;
-    error?: string | React.ReactNode;
-    normal?: boolean;
-    children?: React.ReactNode;
-    showCancel?: boolean;
-    showOk?: boolean;
-    closeIcon?: React.ReactNode;
-    wizard?: {
-        step: number;
-        onStepChange?: (step: number) => void;
-        steps: WizardSteps;
-        hideLeft?: boolean;
-        right?: React.ReactNode;
-        destroyOtherStep?: boolean;
-        disablePrevStep?: boolean;
-    } | boolean;
-};

package/dist/stories/docs/core/Modal.stories.d.ts

@@ -1,16 +0,0 @@
-import Button from "../../../src/core/Button";
-import { ModalProps } from "../../../src/core/Modal";
-import { Meta } from "@storybook/react";
-import React from "react";
-declare const story: Meta<ModalProps>;
-export default story;
-export declare const ImmersiveDialog: {
-    (args: Parameters<typeof Button>): React.JSX.Element;
-    args: {
-        onClick: () => void;
-    };
-};
-export declare const WithAside: {
-    (): React.JSX.Element;
-    args: {};
-};