@cloudtower/eagle 490.0.7 → 490.0.8

package/docs/core/Table/guide.md

@@ -0,0 +1,199 @@
+# Table
+
+## 简介
+
+Table 是基于 antd Table 二次封装的表格组件，提供统一的 CloudTower 表格样式。用于展示结构化数据列表，支持排序、行选择、展开行、加载状态、错误状态等功能。数据源要求每条记录包含 id 字段作为唯一标识。
+
+## 何时使用
+
+- 展示结构化的数据列表（如虚拟机列表、主机列表、集群列表）
+- 需要排序、筛选、分页等交互功能
+- 需要行选择（单选/多选）进行批量操作
+- 需要展开行显示详细信息
+
+不要使用：
+
+- 行内编辑场景 --> 请用 `TableForm`
+- 键值对信息展示 --> 请用 `SummaryTable`
+- 纯拖拽排序（不需要表格结构） --> 请用 `SortableList`
+
+## 基础用法
+
+```tsx
+import React from "react";
+import { Table } from "@cloudtower/eagle";
+
+interface VMData {
+  id: string;
+  name: string;
+  status: string;
+  cpu: number;
+  memory: number;
+}
+
+const columns = [
+  { key: "name", title: "名称", dataIndex: "name" },
+  { key: "status", title: "状态", dataIndex: "status" },
+  { key: "cpu", title: "CPU (核)", dataIndex: "cpu" },
+  { key: "memory", title: "内存 (MB)", dataIndex: "memory" },
+];
+
+const vms: VMData[] = [
+  {
+    id: "vm-001",
+    name: "web-server-01",
+    status: "running",
+    cpu: 4,
+    memory: 8192,
+  },
+  {
+    id: "vm-002",
+    name: "db-server-01",
+    status: "running",
+    cpu: 8,
+    memory: 16384,
+  },
+];
+
+const App = () => <Table<VMData> columns={columns} dataSource={vms} />;
+```
+
+## 常见模式
+
+### 模式一：行选择
+
+配合 `rowSelection` 实现行选择功能，常用于批量操作场景。
+
+```tsx
+import React, { useState } from "react";
+import { Table } from "@cloudtower/eagle";
+
+interface VMData {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const App = () => {
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  return (
+    <Table<VMData>
+      columns={columns}
+      dataSource={vms}
+      rowSelection={{
+        selectedRowKeys: selectedKeys,
+        onChange: (keys) => setSelectedKeys(keys as string[]),
+      }}
+    />
+  );
+};
+```
+
+### 模式二：排序功能
+
+通过 `onSorterChange` 回调处理排序逻辑，列配置中设置 `sorter: true` 启用排序。
+
+```tsx
+import React from "react";
+import { Table } from "@cloudtower/eagle";
+
+const columns = [
+  { key: "name", title: "名称", dataIndex: "name", sorter: true },
+  { key: "cpu", title: "CPU", dataIndex: "cpu", sorter: true },
+];
+
+const App = () => {
+  const handleSorterChange = (order, key) => {
+    console.log("排序:", order, key);
+  };
+
+  return (
+    <Table<VMData>
+      columns={columns}
+      dataSource={vms}
+      onSorterChange={handleSorterChange}
+    />
+  );
+};
+```
+
+### 模式三：加载与错误状态
+
+通过 `loading` 显示骨架屏加载状态，通过 `error` 显示错误信息。
+
+```tsx
+import React from "react";
+import { Table } from "@cloudtower/eagle";
+
+const App = () => {
+  const { data, isLoading, isError } = useFetchVMs();
+
+  return (
+    <Table<VMData>
+      columns={columns}
+      dataSource={data}
+      loading={isLoading}
+      error={isError ? "加载失败，请重试" : undefined}
+    />
+  );
+};
+```
+
+### 模式四：可展开行
+
+通过 `expandable` 配置展开行内容，适用于显示详细信息。
+
+```tsx
+import React from "react";
+import { Table } from "@cloudtower/eagle";
+
+const App = () => (
+  <Table<VMData>
+    columns={columns}
+    dataSource={vms}
+    expandable={{
+      expandedRowRender: (record) => (
+        <div>
+          <p>ID: {record.id}</p>
+          <p>详细信息: ...</p>
+        </div>
+      ),
+      rowExpandable: (record) => record.status === "running",
+    }}
+  />
+);
+```
+
+### 模式五：行操作菜单
+
+在列配置中添加操作列，渲染操作按钮或菜单。
+
+```tsx
+import React from "react";
+import { Table, Button, Icon } from "@cloudtower/eagle";
+import { MoreEllipsis316BoldBlueIcon } from "@cloudtower/icons-react";
+
+const columns = [
+  { key: "name", title: "名称", dataIndex: "name" },
+  {
+    key: "action",
+    title: "操作",
+    render: (_, record) => (
+      <Button
+        size="small"
+        type="tertiary"
+        prefixIcon={<Icon src={MoreEllipsis316BoldBlueIcon} />}
+        onClick={() => console.log("操作:", record)}
+      />
+    ),
+  },
+];
+```
+
+## 相关组件
+
+- `TableForm`: 表格表单，用于行内编辑场景
+- `SummaryTable`: 摘要表格，用于键值对信息展示
+- `BatchOperation`: 批量操作工具栏，配合行选择使用
+- `Pagination`: 分页器，用于分页控制

package/docs/llms.txt

@@ -54,7 +54,7 @@ npm 包名：@cloudtower/eagle
 
 ## 数据展示
 
-- Table: 表格，封装 antd Table
+- [Table](core/Table/guide.md): 表格组件，基于 antd Table 二次封装，支持排序、行选择、展开行、加载/错误状态
 - Tab: 标签页，封装 antd Tabs
 - Collapse: 折叠面板（继承 antd Collapse）
 - Tag: 标签，支持多种预设颜色

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudtower/eagle",
-  "version": "490.0.7",
+  "version": "490.0.8",
   "main": "dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "dist/src/index.d.ts",
@@ -27,8 +27,8 @@
     "sync:color": "node tools/fetch-figma-color.js"
   },
   "dependencies": {
-    "@cloudtower/icons-react": "^490.0.7",
-    "@cloudtower/parrot": "^490.0.7",
+    "@cloudtower/icons-react": "^490.0.8",
+    "@cloudtower/parrot": "^490.0.8",
     "@cloudtower/rc-notification": "^4.6.1",
     "@linaria/core": "^4.2.2",
     "@linaria/react": "^4.3.0",
@@ -116,5 +116,5 @@
     "vite": "^4.5.1",
     "vitest": "^3.1.1"
   },
-  "gitHead": "1a6679790080e9e7795cddbdc2eea5411e0d5456"
+  "gitHead": "2cb4416270f3177c216eae26478125019dd52175"
 }