@hsu-react/ui 0.0.2 → 0.0.4

package/src/components/Chart/index.md

@@ -16,7 +16,28 @@ title: Chart 图表
 import { Chart } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 子组件一览
+
+`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` |
+
+> 以下示例均放在固定高度的容器中（echarts 需要有尺寸的容器才能渲染）。
+
+## 折线图
 
 以 `Chart.Line` 为例，传入 `xAxisData` 与 `seriesData` 即可渲染折线图：
 
@@ -34,24 +55,276 @@ export default () => (
 );
 ```
 
-## 子组件
+## 柱状图
 
-`Chart` 提供以下子组件：
+柱状图，与 `Chart.Line` 用法一致，传入 `xAxisData` 与 `seriesData`。
 
-| 子组件 | 说明 |
-| --- | --- |
-| 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` |
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Bar
+      legendData={["销量"]}
+      xAxisData={["一月", "二月", "三月", "四月", "五月", "六月"]}
+      seriesData={[120, 200, 150, 80, 70, 110]}
+    />
+  </div>
+);
+```
+
+## 饼图
+
+饼图，`seriesData` 为 `{ name, value }` 对象数组。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Pie
+      chartTitle="访问来源"
+      seriesData={[
+        { name: "直接访问", value: 335 },
+        { name: "搜索引擎", value: 234 },
+        { name: "邮件营销", value: 154 },
+        { name: "联盟广告", value: 135 },
+      ]}
+    />
+  </div>
+);
+```
+
+## 雷达图
+
+雷达图，`indicators` 定义各维度（`{ name, max }`），`data` 为对应数值数组。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Radar
+      name="能力评估"
+      indicators={[
+        { name: "研发", max: 100 },
+        { name: "测试", max: 100 },
+        { name: "运维", max: 100 },
+        { name: "设计", max: 100 },
+        { name: "产品", max: 100 },
+      ]}
+      data={[80, 70, 65, 90, 75]}
+    />
+  </div>
+);
+```
+
+## 仪表盘
+
+仪表盘，`seriesData` 为 `{ value, name }` 数组（默认量程 0~100）。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Gauge seriesData={[{ value: 72, name: "完成率" }]} />
+  </div>
+);
+```
+
+## 桑基图
+
+桑基图，`seriesData` 为节点 `{ name }` 数组，`seriesLinks` 为连线 `{ source, target }` 数组。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Sankey
+      seriesData={[
+        { name: "访问" },
+        { name: "注册" },
+        { name: "下单" },
+        { name: "复购" },
+      ]}
+      seriesLinks={[
+        { source: "访问", target: "注册" },
+        { source: "注册", target: "下单" },
+        { source: "下单", target: "复购" },
+      ]}
+    />
+  </div>
+);
+```
+
+## 热力图
+
+热力图，`data` 为 `[xIndex, yIndex, value]` 数组，配合 `xAxisData`、`yAxisData` 类目。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Heatmap
+      xAxisData={["周一", "周二", "周三"]}
+      yAxisData={["上午", "下午", "晚上"]}
+      data={[
+        [0, 0, 5],
+        [0, 1, 7],
+        [0, 2, 3],
+        [1, 0, 8],
+        [1, 1, 2],
+        [1, 2, 6],
+        [2, 0, 4],
+        [2, 1, 9],
+        [2, 2, 1],
+      ]}
+    />
+  </div>
+);
+```
+
+## 气泡图
+
+气泡图，`data` 为 `{ name, value }` 数组，气泡大小随 `value` 自适应。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Bubble
+      data={[
+        { name: "前端", value: 120 },
+        { name: "后端", value: 90 },
+        { name: "测试", value: 60 },
+        { name: "运维", value: 40 },
+        { name: "设计", value: 30 },
+      ]}
+    />
+  </div>
+);
+```
+
+## 树图
+
+树图，`seriesData` 为带 `children` 的层级节点数组（节点需含 `value` 字段）。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Tree
+      seriesData={[
+        {
+          name: "根节点",
+          value: 1,
+          children: [
+            {
+              name: "分支 A",
+              value: 1,
+              children: [
+                { name: "叶子 1", value: 1 },
+                { name: "叶子 2", value: 1 },
+              ],
+            },
+            { name: "分支 B", value: 1 },
+          ],
+        },
+      ]}
+    />
+  </div>
+);
+```
+
+## 极坐标图
+
+极坐标进度环，`seriesData` 为单个 `{ name, value }` 对象（`angleAxis.max` 默认 100）。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Polar
+      title1="75%"
+      title2="完成度"
+      title1Style={{ color: "#333" }}
+      title2Style={{ color: "#999" }}
+      color={["#1675FB", "#5AB5F6"]}
+      seriesData={{ name: "完成度", value: 75 }}
+    />
+  </div>
+);
+```
+
+## 通用图表
+
+通用图表，直接透传 echarts 原生 `EChartsOption`，适合上述封装未覆盖的场景。
+
+```tsx
+import React from "react";
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 280 }}>
+    <Chart.Common
+      tooltip={{ trigger: "axis" }}
+      xAxis={{ type: "category", data: ["A", "B", "C", "D", "E"] }}
+      yAxis={{ type: "value" }}
+      series={[{ type: "line", smooth: true, data: [10, 22, 18, 30, 25] }]}
+    />
+  </div>
+);
+```
+
+## 组合图表
+
+组合图表，通过 `chartGroup` 传入若干 `{ type, options }`，可按 `pageSize` 分页展示并在 `Line`/`Bar`/`Pie` 间组合。其内部依赖布局样式，建议在业务页面中使用：
+
+```tsx | pure
+import { Chart } from "@hsu-react/ui";
+
+export default () => (
+  <Chart.Group
+    style={{ height: 320 }}
+    pageSize={2}
+    chartGroup={[
+      {
+        type: "Bar",
+        options: {
+          chartTitle: "销量",
+          xAxisData: ["一月", "二月", "三月"],
+          seriesData: [120, 200, 150],
+        },
+      },
+      {
+        type: "Pie",
+        options: {
+          chartTitle: "占比",
+          seriesData: [
+            { name: "直接访问", value: 335 },
+            { name: "搜索引擎", value: 234 },
+          ],
+        },
+      },
+    ]}
+  />
+);
+```
 
 ## API
 

package/src/components/Chat/index.md

@@ -16,7 +16,7 @@ title: Chat 对话
 import { Chat } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 对话
 
 ```tsx
 import React, { useState } from "react";
@@ -53,6 +53,49 @@ export default () => {
 };
 ```
 
+## 历史会话
+
+历史会话列表，`historyList` 为按分组（如日期）组织的会话数据，支持新建、点击切换、重命名与删除会话。
+
+```tsx
+import React, { useState } from "react";
+import { Chat } from "@hsu-react/ui";
+
+export default () => {
+  const [currentChatId, setCurrentChatId] = useState("1");
+
+  const historyList = {
+    今天: [
+      { id: "1", name: "如何学习 React", conversationId: "c1" },
+      { id: "2", name: "TypeScript 入门", conversationId: "c2" },
+    ],
+    昨天: [{ id: "3", name: "前端性能优化", conversationId: "c3" }],
+  };
+
+  return (
+    <div
+      style={{
+        height: 360,
+        width: 260,
+        border: "1px solid #f0f0f0",
+        borderRadius: 8,
+        overflow: "hidden",
+      }}
+    >
+      <Chat.History
+        historyList={historyList}
+        currentChatId={currentChatId}
+        width="260px"
+        onNewChat={() => setCurrentChatId("")}
+        onChatItemClick={(item) => setCurrentChatId(item.id)}
+        updateTitle={(chatId, title) => console.log("重命名", chatId, title)}
+        deleteHistory={(item) => console.log("删除", item)}
+      />
+    </div>
+  );
+};
+```
+
 ## Chat.List
 
 消息列表，渲染用户提问与 AI 回答。

package/src/components/Checkbox/index.md

@@ -16,7 +16,7 @@ title: Checkbox 多选框
 import { Checkbox } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 多选框
 
 ```tsx
 import React from "react";
@@ -47,6 +47,38 @@ export default () => {
 };
 ```
 
+## 多选框组
+
+多选框组，支持 `hasAll`（全选）、`layout`（排列方向）与 `outline`（描边样式）。
+
+```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: 16 }}>
+      <Checkbox.Group
+        options={options}
+        value={value}
+        onChange={setValue}
+        hasAll
+        outline
+        layout="vertical"
+      />
+    </div>
+  );
+};
+```
+
 ## API
 
 ### Checkbox

package/src/components/CodeMirror/index.md

@@ -16,7 +16,7 @@ title: CodeMirror 代码编辑
 import { CodeMirror } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 代码编辑
 
 ```tsx
 import React from "react";

package/src/components/Copy/index.md

@@ -16,7 +16,7 @@ title: Copy 复制
 import { Copy } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 复制
 
 ```tsx
 import React from "react";

package/src/components/DatePicker/index.md

@@ -16,7 +16,7 @@ title: DatePicker 日期选择
 import { DatePicker } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 日期选择
 
 ```tsx
 import React, { useState } from "react";
@@ -36,7 +36,46 @@ export default () => {
     >
       <DatePicker value={value} onChange={(date) => setValue(date)} />
       <DatePicker showPicker onChange={(date, picker) => console.log(date, picker)} />
-      <div>当前值：{value || "（空）"}</div>
+    </div>
+  );
+};
+```
+
+## 日期范围选择
+
+区间选择，`value` / `defaultValue` 为 `string[]`，`onChange` 返回格式化后的 `string[]`，同样支持 `picker` / `showPicker` 等粒度切换。
+
+```tsx
+import React, { useState } from "react";
+import { DatePicker } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = useState<string[]>();
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <DatePicker.RangePicker value={value} onChange={(dates) => setValue(dates)} />
+      <DatePicker.RangePicker showPicker onChange={(dates, picker) => console.log(dates, picker)} />
+    </div>
+  );
+};
+```
+
+## 步进日期选择
+
+按 `step` 步进的日期选择，支持 `picker: 'day' | 'month' | 'year'`，以及 `minDate` / `maxDate` 边界限制。
+
+```tsx
+import React, { useState } from "react";
+import { DatePicker } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = useState<string>();
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <DatePicker.StepPicker picker="day" step={1} onChange={(date) => setValue(date)} />
+      <DatePicker.StepPicker picker="month" onChange={(date) => setValue(date)} />
     </div>
   );
 };

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

@@ -5,6 +5,7 @@
 
   width: 100%;
   height: 100%;
+  min-height: 32px;
   max-height: max-content;
 
   border-radius: 6px;

package/src/components/Descriptions/index.md

@@ -16,7 +16,7 @@ title: Descriptions 描述列表
 import { Descriptions } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 描述列表
 
 ```tsx
 import React from "react";

package/src/components/Editor/index.md

@@ -16,7 +16,7 @@ title: Editor 富文本
 import { Editor } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 富文本
 
 ```tsx
 import React from "react";

package/src/components/FileCol/index.md

@@ -16,7 +16,7 @@ title: FileCol 文件列
 import { FileCol } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 文件列
 
 ```tsx
 import React from "react";

package/src/components/FilePreview/index.md

@@ -16,7 +16,7 @@ title: FilePreview 文件预览
 import { FilePreview } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 文件预览
 
 文本 / Markdown 类型通过 `text` 传入内容，无需远程地址即可预览；视频 / PDF / 图片 / Excel 类型则通过 `fileUrl` 传入文件地址。
 

package/src/components/FlexFill/index.md

@@ -16,7 +16,7 @@ title: FlexFill 自适应填充
 import { FlexFill } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 自适应填充
 
 将 `FlexFill` 放在弹性容器的子元素末尾，即可让最后一行的卡片按正常间距左对齐排列。
 

package/src/components/Form/index.md

@@ -16,7 +16,7 @@ title: Form 表单
 import { Form } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 弹窗表单
 
 `Form` 是一个命名空间对象，常用 `Form.Modal` 渲染弹窗表单，表单项通过 `formItems` 配置。点击下方按钮试试：
 
@@ -70,6 +70,93 @@ export default () => {
 };
 ```
 
+## 抽屉表单
+
+抽屉形态的表单，用法与 `Form.Modal` 一致，通过 `formItems` 配置表单项，适合内容较多的录入场景。
+
+```tsx
+import React, { useState } from "react";
+import { Form } from "@hsu-react/ui";
+import { Button, message } from "antd";
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  const formItems = [
+    { type: "INPUT", name: "name", label: "姓名", required: true },
+    {
+      type: "SELECT",
+      name: "role",
+      label: "角色",
+      componentProps: {
+        options: [
+          { label: "管理员", value: "admin" },
+          { label: "访客", value: "guest" },
+        ],
+      },
+    },
+    { type: "TEXTAREA", name: "remark", label: "备注" },
+  ];
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        打开抽屉表单
+      </Button>
+      <Form.Drawer
+        open={open}
+        title="编辑用户"
+        formItems={formItems}
+        onClose={() => setOpen(false)}
+        buttonGroup={[
+          {
+            title: "取消",
+            onClick: () => setOpen(false),
+          },
+          {
+            title: "确定",
+            type: "primary",
+            onClick: () => {
+              message.success("已提交");
+              setOpen(false);
+            },
+          },
+        ]}
+      />
+    </>
+  );
+};
+```
+
+## 导入表单
+
+导入表单，弹窗内提供文件上传，可配置上传地址 `uploadAction` 与模板下载地址 `template`。
+
+```tsx
+import React, { useState } from "react";
+import { Form } from "@hsu-react/ui";
+import { Button } from "antd";
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        导入数据
+      </Button>
+      <Form.Import
+        open={open}
+        title="导入数据"
+        uploadAction="https://example.com/api/upload"
+        templateName="导入模板.xlsx"
+        onCancel={() => setOpen(false)}
+      />
+    </>
+  );
+};
+```
+
 ## API
 
 `Form` 是一个对象，包含以下成员：

package/src/components/FormItem/FormInput/FormPasswordStrength/index.module.less

@@ -1,3 +1,15 @@
+.passwordStrength {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  width: 100%;
+
+  .passwordInput {
+    width: 100%;
+  }
+}
+
 .strengthBar {
   position: relative;
 

package/src/components/FormItem/FormInput/FormPasswordStrength/index.tsx

@@ -16,7 +16,7 @@ const PasswordStrength: React.FC<InputProps> = (props) => {
   const [fraction, setFraction] = useState<number>(0);
 
   return (
-    <>
+    <div className={styles.passwordStrength}>
       <Input.Password
         {...inputConfig}
         placeholder={placeholder ?? "请输入"}
@@ -38,7 +38,7 @@ const PasswordStrength: React.FC<InputProps> = (props) => {
         value={fraction}
         className={styles.strengthBar}
       />
-    </>
+    </div>
   );
 };