@hsu-react/ui 0.0.1 → 0.0.3

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

@@ -15,16 +15,16 @@
     cursor: pointer;
   }
 
-  .ant-table-container {
+  :global(.ant-table-container) {
     border-left: none !important;
   }
 
-  .ant-table-thead {
+  :global(.ant-table-thead) {
     tr {
-      .ant-table-cell {
+      :global(.ant-table-cell) {
         padding: var(--th-padding);
 
-        &.ant-table-column-has-sorters {
+        &:global(.ant-table-column-has-sorters) {
           background: var(--cf-subtle);
 
           &:hover {
@@ -35,22 +35,22 @@
     }
   }
 
-  .ant-table-tbody {
-    .ant-table-placeholder {
+  :global(.ant-table-tbody) {
+    :global(.ant-table-placeholder) {
       height: 100%;
     }
 
-    .ant-table-expanded-row {
-      .ant-table-cell {
+    :global(.ant-table-expanded-row) {
+      :global(.ant-table-cell) {
         padding: var(--expanded-cell-padding);
       }
     }
 
-    .ant-table-row {
-      .ant-table-cell {
+    :global(.ant-table-row) {
+      :global(.ant-table-cell) {
         padding: var(--td-padding);
 
-        &:not(.ant-table-cell-ellipsis):not(.noWarp) {
+        &:not(:global(.ant-table-cell-ellipsis)):not(.noWarp) {
           white-space: pre-wrap;
           word-break: break-all;
         }
@@ -59,21 +59,21 @@
           white-space: nowrap;
         }
 
-        &.ant-table-column-sort {
+        &:global(.ant-table-column-sort) {
           background: transparent;
 
-          &.ant-table-cell-row-hover {
+          &:global(.ant-table-cell-row-hover) {
             background: var(--cf-subtle);
           }
         }
       }
 
-      &.ant-table-row-selected {
-        .ant-table-cell {
-          &.ant-table-column-sort {
+      &:global(.ant-table-row-selected) {
+        :global(.ant-table-cell) {
+          &:global(.ant-table-column-sort) {
             background: rgba(19, 194, 194, 0.12);
 
-            &.ant-table-cell-row-hover {
+            &:global(.ant-table-cell-row-hover) {
               background: rgba(19, 194, 194, 0.22);
             }
           }
@@ -82,15 +82,15 @@
     }
   }
 
-  .ant-table-summary {
+  :global(.ant-table-summary) {
     > tr {
-      .ant-table-cell {
+      :global(.ant-table-cell) {
         padding: var(--td-padding);
 
-        &.ant-table-column-sort {
+        &:global(.ant-table-column-sort) {
           background: transparent;
 
-          &.ant-table-cell-row-hover {
+          &:global(.ant-table-cell-row-hover) {
             background: var(--cf-subtle);
           }
         }
@@ -98,11 +98,11 @@
     }
   }
 
-  .ant-table-tbody-virtual-scrollbar {
+  :global(.ant-table-tbody-virtual-scrollbar) {
     display: none;
   }
 
-  .ant-table-cell {
+  :global(.ant-table-cell) {
     &.hidden {
       width: 0px !important;
       overflow: hidden !important;
@@ -115,7 +115,7 @@
       }
     }
 
-    .ant-table-row-expand-icon {
+    :global(.ant-table-row-expand-icon) {
       &::before {
         top: calc(50% - 0.5px);
       }
@@ -128,9 +128,9 @@
       content: none !important;
     }
 
-    .ant-checkbox {
-      &.ant-checkbox-checked {
-        .ant-checkbox-inner {
+    :global(.ant-checkbox) {
+      &:global(.ant-checkbox-checked) {
+        :global(.ant-checkbox-inner) {
           &::after {
             top: 45%;
             inset-inline-start: 25%;
@@ -147,10 +147,10 @@
   .antdTable {
     border-color: var(--cf-border-weak);
 
-    *:not(.ant-table-cell *) {
+    *:not(:global(.ant-table-cell) *) {
       border-color: inherit !important;
 
-      .ant-table-cell::after {
+      :global(.ant-table-cell)::after {
         border-color: inherit !important;
       }
     }
@@ -164,15 +164,15 @@
     }
 
     &.hideEmpty {
-      .ant-table-placeholder {
+      :global(.ant-table-placeholder) {
         display: none !important;
       }
     }
 
     &:not(.scroll) {
-      .ant-table-bordered {
-        .ant-table-container {
-          .ant-table-content {
+      :global(.ant-table-bordered) {
+        :global(.ant-table-container) {
+          :global(.ant-table-content) {
             > table {
               border-left: 1px solid var(--cf-border-weak);
             }
@@ -181,12 +181,12 @@
       }
     }
 
-    .ant-table {
+    :global(.ant-table) {
       line-height: normal;
     }
 
     &.isExpandedCellTable {
-      .ant-table-tbody {
+      :global(.ant-table-tbody) {
         tr {
           &:last-child {
             td {
@@ -196,9 +196,9 @@
         }
       }
 
-      .ant-table-bordered {
-        .ant-table-container {
-          > .ant-table-content {
+      :global(.ant-table-bordered) {
+        :global(.ant-table-container) {
+          > :global(.ant-table-content) {
             > table {
               border-radius: 0 !important;
               border-left: none !important;
@@ -212,7 +212,7 @@
                 }
               }
 
-              .ant-table-thead {
+              :global(.ant-table-thead) {
                 tr {
                   th {
                     &:first-child {
@@ -235,23 +235,23 @@
       width: 100%;
       min-height: 0px;
 
-      .ant-table-bordered {
-        .ant-table-container {
-          > .ant-table-header {
+      :global(.ant-table-bordered) {
+        :global(.ant-table-container) {
+          > :global(.ant-table-header) {
             > table {
               border-radius: 6px 6px 0 0;
               border-left: 1px solid var(--cf-border-weak);
             }
           }
 
-          > .ant-table-body {
+          > :global(.ant-table-body) {
             > table {
               border-radius: 0px !important;
               border-left: 1px solid var(--cf-border-weak);
             }
           }
 
-          > .ant-table-summary {
+          > :global(.ant-table-summary) {
             > table {
               border-radius: 0px !important;
               border-left: 1px solid var(--cf-border-weak);
@@ -262,23 +262,23 @@
       }
 
       &.isExpanded {
-        .ant-table-bordered {
-          .ant-table-container {
-            > .ant-table-header {
+        :global(.ant-table-bordered) {
+          :global(.ant-table-container) {
+            > :global(.ant-table-header) {
               > table {
                 border-radius: 0px !important;
                 border-left: none !important;
               }
             }
 
-            > .ant-table-body {
+            > :global(.ant-table-body) {
               > table {
                 border-radius: 0px !important;
                 border-left: none !important;
               }
             }
 
-            > .ant-table-summary {
+            > :global(.ant-table-summary) {
               > table {
                 border-radius: 0px !important;
                 border-left: none !important;
@@ -289,38 +289,38 @@
         }
       }
 
-      .ant-table-wrapper {
+      :global(.ant-table-wrapper) {
         width: 100%;
         height: 100%;
       }
 
-      .ant-spin-nested-loading {
+      :global(.ant-spin-nested-loading) {
         width: 100%;
         height: 100%;
 
-        .ant-spin-container {
+        :global(.ant-spin-container) {
           display: flex;
           flex-direction: column;
 
           width: 100%;
           height: 100%;
 
-          .ant-table {
+          :global(.ant-table) {
             width: 100%;
             height: 100%;
 
-            .ant-table-container {
+            :global(.ant-table-container) {
               display: flex;
               flex-direction: column;
 
               width: 100%;
               height: 100%;
 
-              > .ant-table-header {
+              > :global(.ant-table-header) {
                 min-height: max-content;
               }
 
-              > .ant-table-body {
+              > :global(.ant-table-body) {
                 position: relative;
 
                 flex: 1;
@@ -344,11 +344,11 @@
       }
 
       &.y-unScroll {
-        .ant-spin-nested-loading {
-          .ant-spin-container {
-            .ant-table {
-              .ant-table-container {
-                > .ant-table-body {
+        :global(.ant-spin-nested-loading) {
+          :global(.ant-spin-container) {
+            :global(.ant-table) {
+              :global(.ant-table-container) {
+                > :global(.ant-table-body) {
                   overflow-y: visible !important;
                 }
               }

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.3",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Button/index.md

@@ -16,15 +16,14 @@ title: Button 按钮
 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,24 @@ export default () => (
     <Button type="primary" disabled>
       禁用
     </Button>
-  </Space>
+  </div>
+);
+```
+
+## Chakra 按钮
+
+基于 Chakra UI 的按钮，支持 `hasPermi`、`hidden`、`iconPosition`、`icon` 等扩展属性（Chakra system 由文档站全局提供）。
+
+```tsx
+import React from "react";
+import { Button } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+    <Button.Chakra colorPalette="blue">主要按钮</Button.Chakra>
+    <Button.Chakra variant="outline">描边按钮</Button.Chakra>
+    <Button.Chakra disabled>禁用</Button.Chakra>
+  </div>
 );
 ```
 

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

@@ -1,11 +1,17 @@
-.select {
+// 定位容器给定 32px 固定高度，Select 通过 height:100% 填满它，
+// 避免 Select 根的 height:100% 直接相对图谱（绝对定位祖先）解析成整图高度而被拉伸。
+.wrapper {
   position: absolute;
   top: 20px;
   left: 20px;
 
   width: 240px;
   height: 32px;
+}
+
+.select {
+  width: 100%;
+  height: 100%;
 
   border-radius: 2px;
 }
-

package/src/components/ChainGraph/_components/SearchSelect/index.tsx

@@ -8,22 +8,24 @@ interface SearchSelectProps {
 
 export const SearchSelect: React.FC<SearchSelectProps> = ({ onChange }) => {
   return (
-    <Select
-      className={styles.select}
-      showSearch
-      placeholder="请输入关键词进行搜索"
-      optionFilterProp="children"
-      filterOption={(input, option) =>
-        !!(
-          option?.label &&
-          option?.label
-            ?.toString()
-            .toLowerCase()
-            .includes(input.toLowerCase())
-        )
-      }
-      onChange={onChange}
-    />
+    <div className={styles.wrapper}>
+      <Select
+        className={styles.select}
+        showSearch
+        placeholder="请输入关键词进行搜索"
+        optionFilterProp="children"
+        filterOption={(input, option) =>
+          !!(
+            option?.label &&
+            option?.label
+              ?.toString()
+              .toLowerCase()
+              .includes(input.toLowerCase())
+          )
+        }
+        onChange={onChange}
+      />
+    </div>
   );
 };
 

package/src/components/ChainGraph/index.md

@@ -8,10 +8,76 @@ 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
+      miniMapSize={[120, 80]}
+      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%;
   }