@hsu-react/ui 0.0.1 → 0.0.2

package/lib/components/Tree/index.module.less

@@ -56,25 +56,25 @@
     overflow-y: auto;
     scrollbar-gutter: stable;
 
-    .ant-tree-treenode {
+    :global(.ant-tree-treenode) {
       &:hover {
         background: var(--cf-subtle);
       }
 
-      &:has(> .ant-tree-node-selected) {
+      &:has(> :global(.ant-tree-node-selected)) {
         background-color: #e6f4ff;
 
-        .ant-tree-node-selected {
+        :global(.ant-tree-node-selected) {
           background-color: transparent;
         }
       }
     }
 
-    .ant-tree-indent-unit {
+    :global(.ant-tree-indent-unit) {
       width: var(--tree-indent-unit-width);
     }
 
-    .ant-tree-switcher {
+    :global(.ant-tree-switcher) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -95,7 +95,7 @@
       }
     }
 
-    .ant-tree-node-content-wrapper {
+    :global(.ant-tree-node-content-wrapper) {
       display: inline-flex;
       align-items: center;
       column-gap: 4px;
@@ -105,7 +105,7 @@
 
       padding: 2px 0px;
 
-      .ant-tree-title {
+      :global(.ant-tree-title) {
         display: inline-block;
       }
 
@@ -113,7 +113,7 @@
         background: transparent;
       }
 
-      .ant-tree-iconEle {
+      :global(.ant-tree-iconEle) {
         display: inline-flex;
         align-items: center;
 
@@ -123,17 +123,17 @@
   }
 
   &.hideLeafExpand {
-    .ant-tree-switcher-noop {
+    :global(.ant-tree-switcher-noop) {
       display: none;
     }
   }
 
   &.legacyHasSelectedNodeBackground {
     .treeContainer {
-      .ant-tree-treenode.ant-tree-treenode-selected {
+      :global(.ant-tree-treenode):global(.ant-tree-treenode-selected) {
         background-color: #e6f4ff;
 
-        .ant-tree-node-selected {
+        :global(.ant-tree-node-selected) {
           background-color: transparent;
         }
       }

package/lib/components/Upload/index.module.less

@@ -4,18 +4,18 @@
   width: 100%;
   height: 100%;
 
-  span.ant-upload {
+  span:global(.ant-upload) {
     display: inline-flex;
   }
 
-  .ant-upload-list {
+  :global(.ant-upload-list) {
     display: flex;
     flex-direction: column;
     row-gap: 5px;
 
     width: 100%;
 
-    &.ant-upload-list-picture-card {
+    &:global(.ant-upload-list-picture-card) {
       flex-direction: row;
       flex-wrap: wrap;
       gap: 5px;

package/lib/styles/antd-overload.less

@@ -130,4 +130,4 @@
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Button/index.md

@@ -21,10 +21,9 @@ import { Button } from "@hsu-react/ui";
 ```tsx
 import React from "react";
 import { Button } from "@hsu-react/ui";
-import { Space } from "antd";
 
 export default () => (
-  <Space>
+  <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
     <Button type="primary">主要按钮</Button>
     <Button>默认按钮</Button>
     <Button type="dashed">虚线按钮</Button>
@@ -32,7 +31,7 @@ export default () => (
     <Button type="primary" disabled>
       禁用
     </Button>
-  </Space>
+  </div>
 );
 ```
 

package/src/components/ChainGraph/index.md

@@ -8,10 +8,75 @@ title: ChainGraph 关系图
 
 # ChainGraph 关系图
 
-> `ChainGraph` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 `@antv/g6` 封装的树状关系图，支持节点展开/收起、搜索、缩略图、自适应布局与自定义节点渲染。
 
 ## 引入
 
 ```ts
 import { ChainGraph } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+```tsx
+import React from "react";
+import { ChainGraph } from "@hsu-react/ui";
+
+// TreeGraphData：每个节点含 id / label / 可选 children；level 用于标记根节点层级
+const data = {
+  id: "root",
+  label: "根节点",
+  level: 1,
+  children: [
+    { id: "a", label: "节点 A", level: 2 },
+    {
+      id: "b",
+      label: "节点 B",
+      level: 2,
+      children: [{ id: "b-1", label: "节点 B-1", level: 3 }],
+    },
+  ],
+};
+
+export default () => (
+  <div style={{ height: 320, width: "100%" }}>
+    <ChainGraph
+      data={data}
+      showSearch
+      showMiniMap
+      showExpandBtn
+      onClick={(node) => console.log(node)}
+    />
+  </div>
+);
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 树状图数据（可携带 `origin` 原始数据） | `TreeGraphData` | - |
+| octopus | 是否启用八爪鱼（双向）布局 | `boolean` | - |
+| level | 默认展开层级 | `number` | `1` |
+| rootLevel | 根节点层级 | `number` | `1` |
+| onClick | 节点点击回调 | `(node?: TreeGraphData) => void` | - |
+| styles | 节点样式配置 | `ChainGraphServicesStyles` | - |
+| showPort | 是否显示连接端点 | `boolean` | `true` |
+| showMiniMap | 是否显示缩略图 | `boolean` | `true` |
+| miniMapSize | 缩略图尺寸 | `[number, number]` | `[200, 150]` |
+| getImage | 获取图表快照（base64） | `(img: string) => void` | - |
+| className | 内层容器类名 | `string` | - |
+| wrapperClassName | 外层（Spin）容器类名 | `string` | - |
+| showSearch | 是否显示搜索框 | `boolean` | `true` |
+| showExpandBtn | 是否显示展开/收起按钮 | `boolean` | `true` |
+| expandClassName | 展开按钮类名 | `string` | - |
+| resize | 是否监听容器尺寸自适应 | `boolean` | `true` |
+| offset | 容器宽高偏移 `[x, y]` | `[number, number]` | `[0, 0]` |
+| fitLeft | 是否左对齐布局 | `boolean` | `false` |
+| paddingLeft | 左侧内边距 | `number` | `20` |
+| loading | 是否加载中 | `boolean` | `false` |
+| hasHover | 是否启用 hover 效果 | `boolean` | `true` |
+| hasSelected | 是否启用选中效果 | `boolean` | `true` |
+| minZoom | 最小缩放比例 | `number` | - |
+| labelRender | 自定义节点文本 | `(label: TreeGraphData) => string` | - |
+| addShape | 自定义节点图形绘制 | `(group: IGroup, cfg: ModelConfig & { origin?: Record<string, unknown> }) => void` | - |

package/src/components/ChainGraph/index.module.less

@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
 
-  .ant-spin-container {
+  :global(.ant-spin-container) {
     width: 100%;
     height: 100%;
   }

package/src/components/Chart/index.md

@@ -8,10 +8,87 @@ title: Chart 图表
 
 # Chart 图表
 
-> `Chart` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 echarts 封装的图表集合，以 `Chart.Line`、`Chart.Bar`、`Chart.Pie` 等子组件形式提供常用图表，自动处理实例创建、容器自适应与销毁。
 
 ## 引入
 
 ```ts
 import { Chart } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+以 `Chart.Line` 为例，传入 `xAxisData` 与 `seriesData` 即可渲染折线图：
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <Chart.Line
+    style={{ height: 300 }}
+    legendData={["销量"]}
+    xAxisData={["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}
+    seriesData={[120, 200, 150, 80, 70, 110, 130]}
+  />
+);
+```
+
+## 子组件
+
+`Chart` 提供以下子组件：
+
+| 子组件 | 说明 |
+| --- | --- |
+| Chart.Line | 折线图 |
+| Chart.Bar | 柱状图 |
+| Chart.Pie | 饼图（另含 `Chart.Pie.Three` 3D 饼图） |
+| Chart.Polar | 极坐标图 |
+| Chart.Gauge | 仪表盘 |
+| Chart.Sankey | 桑基图 |
+| Chart.Tree | 树图 |
+| Chart.Bubble | 气泡图 |
+| Chart.Heatmap | 热力图 |
+| Chart.Radar | 雷达图 |
+| Chart.Group | 组合图表（可在 `Line`/`Bar`/`Pie` 间切换） |
+| Chart.Common | 通用图表，直接透传 echarts 的 `EChartsOption` |
+
+## API
+
+### Chart.Line / Chart.Bar
+
+在 echarts `EChartsOption` 基础上扩展（`Chart.Bar` 同此表）：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| xAxisData | X 轴类目数据 | `string[]` | - |
+| seriesData | 系列数据，可为数字数组或带 `name`/`series` 的对象数组 | `SeriesDataType` | - |
+| legendData | 图例数据 | `string[]` | - |
+| chartTitle | 图表标题 | `string` | - |
+| scrollConfig | 滚动/缩放配置 | `ChartScrollConfig` | - |
+| insideDataZoom | 内置型数据缩放配置 | `DataZoomComponentOption` | - |
+| sliderDataZoom | 滑动条型数据缩放配置 | `DataZoomComponentOption` | - |
+| enableLegendAutoScroll | 是否启用图例自动滚动 | `boolean` | `false` |
+| legendVisibleCount | 图例每页可见数量 | `number` | `8` |
+| legendScrollInterval | 图例滚动间隔（ms） | `number` | `1500` |
+| onClick | 图元点击回调 | `(event: ECElementEvent) => void` | - |
+| className | 容器类名 | `string` | - |
+| style | 容器样式 | `ChartCSSProperties` | - |
+
+> `Chart.Line` 额外支持 `yAxisNameOffsets?: number[]`；其余 echarts 原生配置项（`grid`、`xAxis`、`yAxis`、`tooltip`、`series` 等）均可直接透传。
+
+### Chart.Pie
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| seriesData | 系列数据 | `SeriesDataType` | - |
+| chartTitle | 图表中心标题 | `string` | - |
+| extendSeries | 追加的额外系列 | `Series[]` | `[]` |
+| isSemiCircle | 是否为半圆 | `boolean` | `false` |
+| position | 半圆贴边位置 | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` |
+| spanAngle | 显示角度 | `number` | `180` |
+| center | 中心位置 | `[string, string]` | - |
+| radius | 半径配置 | `[string, string]` | - |
+| enableLegendAutoScroll | 是否启用图例自动滚动 | `boolean` | `false` |
+| onClick | 图元点击回调 | `(event: ECElementEvent) => void` | - |
+| onChart | 图表实例就绪回调 | `(chart: EChartsType) => void` | - |

package/src/components/Chat/ChatInput/_components/SendButton/index.module.less

@@ -10,7 +10,7 @@
   border: none;
   border-radius: 4px;
 
-  .ant-btn-icon {
+  :global(.ant-btn-icon) {
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/Chat/ChatInput/_components/UploadButton/index.module.less

@@ -4,7 +4,7 @@
 
   border-radius: 4px;
 
-  .ant-btn-icon {
+  :global(.ant-btn-icon) {
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/Chat/ChatInput/index.module.less

@@ -57,7 +57,7 @@
           opacity: 0.8;
           width: 140px;
           height: 100%;
-          .ant-select-selector {
+          :global(.ant-select-selector) {
             border: none;
             margin: 1px 0 0;
           }
@@ -92,7 +92,7 @@
 
   border-radius: 4px;
 
-  .ant-btn-icon {
+  :global(.ant-btn-icon) {
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/index.module.less

@@ -20,7 +20,7 @@
   }
 
   .answerBubble {
-    .ant-bubble-dot {
+    :global(.ant-bubble-dot) {
       column-gap: var(--ant-margin-xxs);
     }
 

package/src/components/Chat/index.md

@@ -8,10 +8,106 @@ title: Chat 对话
 
 # Chat 对话
 
-> `Chat` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 `@ant-design/x` 封装的 AI 对话组件集合，以 `Chat.List`（消息列表）、`Chat.Input`（输入框）、`Chat.History`（历史会话）三个子组件构成完整对话界面。
 
 ## 引入
 
 ```ts
 import { Chat } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+```tsx
+import React, { useState } from "react";
+import { Chat } from "@hsu-react/ui";
+
+export default () => {
+  const [list, setList] = useState([
+    {
+      query: { query: "你好，请介绍一下你自己" },
+      answers: [
+        { answer: "你好！我是 AI 助手，有什么可以帮你的吗？", messageId: "1" },
+      ],
+    },
+  ]);
+
+  const handleSend = (value) => {
+    setList((prev) => [
+      ...prev,
+      {
+        query: { query: value },
+        answers: [{ answer: `已收到：${value}`, messageId: String(Date.now()) }],
+      },
+    ]);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: 420 }}>
+      <div style={{ flex: 1, overflow: "auto" }}>
+        <Chat.List list={list} />
+      </div>
+      <Chat.Input onSend={handleSend} uploadEnabled={false} />
+    </div>
+  );
+};
+```
+
+## Chat.List
+
+消息列表，渲染用户提问与 AI 回答。
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| list | 消息列表数据 | `ChatMessage[]` | `[]` |
+| assistanting | AI 是否正在回答中 | `boolean` | - |
+| onAgain | 重新生成回调 | `(query: string) => void` | - |
+| onLikeChange | 点赞/点踩变化回调 | `(messageId: string, like: boolean \| null, content: string) => void` | - |
+| hideTool | 是否隐藏消息工具栏 | `boolean` | - |
+| defaultAnswer | 默认（空态）回答内容 | `string` | - |
+| userName / assistantName | 用户/助手名称 | `string` | - |
+| userAvatar / assistantAvatar | 用户/助手头像 | `ReactNode` | - |
+| userRenderContent | 自定义用户消息内容 | `(originContent: ReactNode, item: QueryMessage) => ReactNode` | - |
+| userRenderQuery | 自定义用户提问文本 | `(query: string \| undefined, item: QueryMessage) => string \| undefined` | - |
+| noAnswerTip | 无回答时的提示文案 | `string` | - |
+| className | 容器类名 | `string` | - |
+
+> 另有 `defaultAnswerClassName`、`userClassName`、`assistantClassName`、`userHeaderClassName`、`assistantHeaderClassName` 等多个样式类名属性。
+
+## Chat.Input
+
+对话输入框，支持文件上传、模型切换、功能（agent）开关。
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| onSend | 发送回调 | `(value: string) => void` | - |
+| assistanting | AI 是否回答中（显示停止按钮） | `boolean` | - |
+| onStop | 停止回答回调 | `() => void` | - |
+| fileList | 文件列表 | `UploadFile[]` | `[]` |
+| onFileListChange | 文件列表变化回调 | `(fileList: UploadFile[]) => void` | - |
+| uploadEnabled | 是否启用上传 | `boolean` | `true` |
+| uploadConfig | 上传配置 | `UploadConfig` | - |
+| modelConfig | 模型切换配置 | `{ modelList: ModelConfig[]; modelType: string; setModelType: (value: string) => void }` | - |
+| agents | 功能开关配置 | `AgentToggleConfig[]` | `[]` |
+| agentsState | 功能开关状态（受控） | `AgentConfig[]` | - |
+| onAgentsChange | 功能开关变化回调 | `(agents: AgentConfig[]) => void` | - |
+| placeholder | 占位提示文字 | `string` | `'询问问题'` |
+| sendIcon / stopIcon | 发送/停止图标 | `string` | - |
+| buttonGroup | 额外按钮组 | `ButtonProps[]` | - |
+| wrapperClassName | 容器类名 | `string` | - |
+
+## Chat.History
+
+历史会话列表，支持新建、重命名、删除会话。
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| historyList | 分组历史会话数据 | `Record<string, ChatHistoryData[]>` | - |
+| currentChatId | 当前选中的会话 id | `string` | - |
+| onNewChat | 新建会话回调 | `() => void` | - |
+| onChatItemClick | 会话点击回调 | `(item: ChatHistoryData) => void` | - |
+| updateTitle | 重命名回调 | `(chatId: string, title: string) => void` | - |
+| deleteHistory | 删除会话回调 | `(item?: ChatHistoryData) => void` | - |
+| onScrollEnd | 滚动到底部回调（加载更多） | `() => void` | - |
+| width | 容器宽度 | `string` | - |
+| tools | 顶部自定义工具区 | `ReactNode` | - |

package/src/components/Checkbox/CheckboxGroup/index.module.less

@@ -10,7 +10,7 @@
     height: 100%;
 
     // 当 hasAll 为 true 时，Group 作为子元素
-    > .ant-checkbox-group {
+    > :global(.ant-checkbox-group) {
       display: flex;
       flex-direction: column;
       row-gap: 8px;
@@ -28,9 +28,9 @@
   }
 
   &.outline {
-    .ant-checkbox-wrapper {
-      .ant-checkbox {
-        .ant-checkbox-inner {
+    :global(.ant-checkbox-wrapper) {
+      :global(.ant-checkbox) {
+        :global(.ant-checkbox-inner) {
           border-color: rgba(204, 204, 204, 1) !important;
 
           background: transparent !important;
@@ -41,16 +41,16 @@
           }
         }
 
-        &.ant-checkbox-checked {
-          .ant-checkbox-inner {
+        &:global(.ant-checkbox-checked) {
+          :global(.ant-checkbox-inner) {
             background: rgba(255, 255, 255, 1) !important;
           }
         }
       }
 
-      &.ant-checkbox-wrapper-disabled {
-        .ant-checkbox {
-          .ant-checkbox-inner {
+      &:global(.ant-checkbox-wrapper-disabled) {
+        :global(.ant-checkbox) {
+          :global(.ant-checkbox-inner) {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
@@ -58,8 +58,8 @@
             }
           }
 
-          &.ant-checkbox-checked {
-            .ant-checkbox-inner {
+          &:global(.ant-checkbox-checked) {
+            :global(.ant-checkbox-inner) {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }
@@ -68,7 +68,7 @@
     }
   }
 
-  .ant-checkbox-wrapper {
+  :global(.ant-checkbox-wrapper) {
     align-items: center;
 
     font-family: inherit;
@@ -76,7 +76,7 @@
     font-weight: inherit;
     color: inherit;
 
-    .ant-checkbox {
+    :global(.ant-checkbox) {
       width: 16px;
       min-width: 16px;
       height: 16px;
@@ -84,12 +84,12 @@
 
       border-radius: 2px;
 
-      input[type="checkbox"].ant-checkbox-input {
+      input[type="checkbox"]:global(.ant-checkbox-input) {
         width: 100%;
         height: 100%;
       }
 
-      .ant-checkbox-inner {
+      :global(.ant-checkbox-inner) {
         width: 100%;
         height: 100%;
 
@@ -106,7 +106,7 @@
       }
 
       &-indeterminate {
-        .ant-checkbox-inner {
+        :global(.ant-checkbox-inner) {
           &::after {
             left: 50%;
             top: 50%;

package/src/components/Checkbox/index.md

@@ -8,10 +8,62 @@ title: Checkbox 多选框
 
 # Checkbox 多选框
 
-> `Checkbox` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 antd `Checkbox` 封装的多选框，额外提供 `outline` 描边样式，并附带支持全选、布局方向的 `Checkbox.Group`。
 
 ## 引入
 
 ```ts
 import { Checkbox } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+```tsx
+import React from "react";
+import { Checkbox } from "@hsu-react/ui";
+
+const options = [
+  { label: "苹果", value: "apple" },
+  { label: "香蕉", value: "banana" },
+  { label: "橙子", value: "orange" },
+];
+
+export default () => {
+  const [value, setValue] = React.useState(["apple"]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        alignItems: "flex-start",
+      }}
+    >
+      <Checkbox outline>描边多选框</Checkbox>
+      <Checkbox.Group options={options} value={value} onChange={setValue} />
+    </div>
+  );
+};
+```
+
+## API
+
+### Checkbox
+
+在 [antd CheckboxProps](https://ant.design/components/checkbox-cn) 基础上扩展：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| outline | 是否使用描边样式 | `boolean` | - |
+
+### Checkbox.Group
+
+在 antd `Checkbox.Group` 基础上扩展：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| outline | 是否使用描边样式 | `boolean` | - |
+| hasAll | 是否显示"全选"选项 | `boolean` | - |
+| layout | 选项排列方向 | `'vertical' \| 'horizontal'` | `'horizontal'` |
+| allMaxHeight | 含全选时容器最大高度（px） | `number` | - |