@hsu-react/ui 0.0.1 → 0.0.2

package/src/components/Panel/index.md

@@ -8,10 +8,155 @@ title: Panel 页面容器
 
 # Panel 页面容器
 
-> `Panel` 组件。完整 API 见源码类型定义，下方为基础用法。
+页面级容器集合，封装了「左侧树 + 顶部搜索 + 表格」的列表页、内嵌 iframe 页以及通用内容页等常见布局形态。
 
 ## 引入
 
 ```ts
 import { Panel } from "@hsu-react/ui";
 ```
+
+## 子组件
+
+| 组件 | 说明 |
+| --- | --- |
+| `Panel.List` | 列表页容器，集成 `Search`、`Table`、`TabBar`、`Tree`、列管理与工具栏 |
+| `Panel.List.Modal` | 弹窗内的列表页容器，用于在 `Modal` 中复用列表布局 |
+| `Panel.Iframe` | iframe 内容容器，带加载态与全屏按钮 |
+| `Panel.Default` | 通用内容容器，可选左侧树与面包屑 |
+
+## 基础用法
+
+### Panel.List 列表页
+
+`Panel.List` 通过 `searchProps`（搜索区）、`tableProps`（表格区）组合出标准增删改查列表页。下方为可交互示例：输入姓名搜索会实时过滤行，点击「新增」「编辑」有反馈。
+
+> 注意：`Panel.List` / `Search` 内部用到 `Button.Chakra`，需要在外层包一层 `ChakraProvider`（真实项目通常在入口统一提供）。
+
+```tsx
+import React, { useState } from "react";
+import { Panel, Button } from "@hsu-react/ui";
+import { message } from "antd";
+import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
+
+const system = createSystem(defaultConfig, {
+  disableLayers: true,
+  preflight: false,
+});
+
+const ALL = [
+  { id: 1, name: "张三", role: "管理员", status: "启用" },
+  { id: 2, name: "李四", role: "成员", status: "启用" },
+  { id: 3, name: "王五", role: "成员", status: "禁用" },
+];
+
+export default () => {
+  const [data, setData] = useState(ALL);
+
+  const columns = [
+    { title: "姓名", dataIndex: "name" },
+    { title: "角色", dataIndex: "role" },
+    { title: "状态", dataIndex: "status" },
+    {
+      title: "操作",
+      dataIndex: "op",
+      render: (_, row) => (
+        <Button type="link" onClick={() => message.info("编辑：" + row.name)}>
+          编辑
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <ChakraProvider value={system}>
+      <div style={{ height: 380 }}>
+        <Panel.List
+          searchProps={{
+            searchItems: [{ type: "INPUT", name: "name", label: "姓名" }],
+            onSearch: (v) =>
+              setData(ALL.filter((x) => !v.name || x.name.includes(v.name))),
+            onReset: () => setData(ALL),
+            beforeButtonGroup: [
+              {
+                title: "新增",
+                colorPalette: "blue",
+                onClick: () => message.success("点击了新增"),
+              },
+            ],
+          }}
+          tableProps={{
+            columns,
+            dataSource: data,
+            rowKey: "id",
+            pagination: false,
+          }}
+        />
+      </div>
+    </ChakraProvider>
+  );
+};
+```
+
+### Panel.Default 内容页
+
+```tsx
+import React from "react";
+import { Panel } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ height: 200 }}>
+    <Panel.Default>
+      <div style={{ padding: 16 }}>这里是通用内容区域</div>
+    </Panel.Default>
+  </div>
+);
+```
+
+### Panel.Iframe 内嵌页
+
+`Panel.Iframe` 用于内嵌外部页面，带加载态与全屏按钮（外部站点受 X-Frame-Options 限制，此处仅示意用法）：
+
+```tsx | pure
+import React from "react";
+import { Panel } from "@hsu-react/ui";
+
+export default () => <Panel.Iframe src="https://example.com" fullBtn />;
+```
+
+## API
+
+### Panel.List（ListPanelProps）
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| searchMode | Search 组件模式：`Default` / `Advanced` / `Collapsible` / `WithFilter` / `WithMore` / `Card` | `SearchModeKeys` | `'Default'` |
+| searchProps | 搜索区配置（随 `searchMode` 变化） | `SearchModePropsMap[T]` | - |
+| tableProps | 表格区配置，含 `title`、`buttonGroup`、`tabBarProps`、`tableTools` 等 | `ListPanelTabelProps` | - |
+| treeProps | 左侧树配置 | `TreeProps` | - |
+| headerTabBarProps | 顶部页签配置 | `TabBarProps` | - |
+| headerTabBarChildren | 顶部页签区自定义内容 | `ReactNode` | - |
+| hasPermi | 权限码，无权限时不渲染 | `string[]` | - |
+| baseTreeBreadcrumb | 树面包屑的基础项 | `BreadcrumbProps['items']` | - |
+| showTreeBreadcrumb | 是否展示树面包屑 | `boolean` | `true` |
+| treeResize | 左侧树可拖拽调宽配置（`enabled`/`defaultWidth`/`minWidth`/`maxWidth`/`minContentWidth`） | `object` | - |
+| className / wrapperClassName | 自定义类名 | `string` | - |
+
+### Panel.Iframe（IframePanelProps）
+
+继承原生 `<iframe>` 属性，并扩展：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| fullBtn | 是否显示全屏按钮 | `boolean` | - |
+| children | 自定义内容（传入后替代 iframe 渲染） | `ReactNode` | - |
+
+### Panel.Default（DefaultPanelProps）
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| children | 内容区 | `ReactNode` | - |
+| treeProps | 左侧树配置（传入即展示树） | `TreeProps` | - |
+| baseTreeBreadcrumb | 树面包屑的基础项 | `BreadcrumbProps['items']` | - |
+| showTreeBreadcrumb | 是否展示树面包屑 | `boolean` | `true` |
+| className / contentClassName / wrapperClassName | 自定义类名 | `string` | - |

package/src/components/Search/index.md

@@ -8,10 +8,82 @@ title: Search 搜索
 
 # Search 搜索
 
-> `Search` 组件。完整 API 见源码类型定义，下方为基础用法。
+配置驱动的搜索栏组件，通过 `searchItems` 描述搜索项，内置查询 / 重置按钮、列自适应与展开收起能力。
 
 ## 引入
 
 ```ts
 import { Search } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+`Search` 通过 `searchItems`（复用 `FormItem` 的配置）定义搜索项，`onSearch` / `onReset` 接收回调：
+
+```tsx
+import React from "react";
+import { Search } from "@hsu-react/ui";
+import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
+
+const system = createSystem(defaultConfig, {
+  disableLayers: true,
+  preflight: false,
+});
+
+export default () => {
+  return (
+    <ChakraProvider value={system}>
+      <Search
+        columnNum={3}
+        searchItems={[
+          { type: "INPUT", name: "keyword", label: "关键字" },
+          {
+            type: "SELECT",
+            name: "status",
+            label: "状态",
+            componentProps: {
+              options: [
+                { label: "启用", value: 1 },
+                { label: "停用", value: 0 },
+              ],
+            },
+          },
+          { type: "RANGEPICKER", name: "date", label: "时间范围" },
+        ]}
+        onSearch={(data) => console.log("search", data)}
+        onReset={() => console.log("reset")}
+      />
+    </ChakraProvider>
+  );
+};
+```
+
+## API
+
+`SearchProps` 继承自 `BaseSearchProps`：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| searchItems | 搜索项配置（复用 `FormItemProps`） | `FormItemProps[]` | `[]` |
+| moreSearchItems | 展开后显示的更多搜索项 | `FormItemProps[]` | `[]` |
+| onSearch | 点击查询的回调，返回收集到的表单值 | `(data?: Partial<T>) => void` | - |
+| onReset | 点击重置的回调 | `() => void` | - |
+| externalForm | 外部传入的表单实例 | `FormInstance` | - |
+| hasPermi | 权限码；无权限时不渲染 | `string[]` | - |
+| columnNum | 搜索项列数（按钮组额外占一列） | `number` | `4` |
+| beforeButtonGroup | 查询 / 重置按钮前的附加按钮 | `ChakraButtonProps[]` | - |
+| affterButtonGroup | 查询 / 重置按钮后的附加按钮 | `ChakraButtonProps[]` | - |
+| searchData | 搜索项的初始值 | `Record<string, unknown>` | - |
+| minLabelWidth | 标签最小宽度，或是否启用最小宽度 | `boolean \| number` | - |
+| defaultExpanded | 默认是否展开 | `boolean` | `false` |
+| onExpandChange | 展开状态变化回调 | `(expand: boolean) => void` | - |
+| autoAdaptWidth | 是否启用基于宽度的自适应布局 | `boolean` | `true` |
+| baseWidth | 自适应布局的基准宽度 | `number` | - |
+| onValuesChange | 表单值变化回调 | `(value, values) => void` | - |
+| searchDisabled | 是否禁用查询按钮 | `boolean` | `false` |
+| showAllSearchItems | 是否一次性展示全部搜索项 | `boolean` | `false` |
+| searchText | 查询按钮文本 | `ReactNode` | - |
+| resetText | 重置按钮文本 | `ReactNode` | - |
+| columnOffsetWidth | 列宽计算的偏移量 | `number` | `0` |
+
+> 另提供多种搜索形态：`Search.Card`、`Search.Advanced`、`Search.Collapsible`、`Search.WithFilter`（带筛选下拉）、`Search.WithMore`。

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

@@ -48,7 +48,7 @@
         justify-content: flex-start;
       }
 
-      .ant-btn-icon {
+      :global(.ant-btn-icon) {
         font-size: 16px;
       }
 
@@ -166,7 +166,7 @@
 }
 
 .filterDropdown {
-  .ant-dropdown-menu {
+  :global(.ant-dropdown-menu) {
     height: max-content;
     max-height: 500px;
 

package/src/components/SecondConf/index.md

@@ -8,10 +8,48 @@ title: SecondConf 二次确认
 
 # SecondConf 二次确认
 
-> `SecondConf` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 `Modal` 封装的二次确认弹窗，内置问号图标，自动拼接「确认{contentTitle}吗？」标题与说明文案。
 
 ## 引入
 
 ```ts
 import { SecondConf } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+```tsx
+import React, { useState } from "react";
+import { SecondConf } from "@hsu-react/ui";
+import { Button } from "antd";
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button danger onClick={() => setOpen(true)}>
+        删除
+      </Button>
+      <SecondConf
+        open={open}
+        contentTitle="删除该条数据"
+        contentText="删除后将无法恢复，请谨慎操作。"
+        onOk={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+      />
+    </>
+  );
+};
+```
+
+## API
+
+在 `Modal`（即 antd `ModalProps`）基础上扩展（`title` 已被内部接管）：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| contentTitle | 标题中「确认 … 吗？」的中间内容 | `ReactNode` | - |
+| contentText | 标题下方的补充说明文案 | `ReactNode` | - |
+
+> 其余属性（`open`、`onOk`、`onCancel`、`width`、`confirmLoading` 等）与 `Modal` 一致；组件内部默认 `width={800}`、`centered`、`maskClosable={false}`、`mask={false}`。

package/src/components/Select/AutoCompleteSelect/index.module.less

@@ -28,11 +28,11 @@
     .antdAutoComplete {
       cursor: not-allowed;
 
-      .ant-select-selection-item {
+      :global(.ant-select-selection-item) {
         color: var(--cf-text-3);
       }
 
-      .ant-select-arrow {
+      :global(.ant-select-arrow) {
         cursor: not-allowed;
       }
     }
@@ -75,7 +75,7 @@
     margin-inline-start: 4px;
   }
 
-  &:has(.ant-select-status-error) {
+  &:has(:global(.ant-select-status-error)) {
     border: 1px solid #ff4d4f;
 
     .prefix,
@@ -108,24 +108,24 @@
     font-weight: inherit;
     color: inherit !important;
 
-    &:has(> .ant-select-arrow),
-    &:has(> .ant-select-clear) {
-      .ant-select-selector {
+    &:has(> :global(.ant-select-arrow)),
+    &:has(> :global(.ant-select-clear)) {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
     &.legacyHasArrowOrClear {
-      .ant-select-selector {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
-    &.ant-select {
+    &:global(.ant-select) {
       width: 100%;
       height: 100%;
 
-      .ant-select-selector {
+      :global(.ant-select-selector) {
         width: 100%;
         height: 100%;
         padding: 0;
@@ -143,7 +143,7 @@
           content: none;
         }
 
-        .ant-select-selection-wrap {
+        :global(.ant-select-selection-wrap) {
           height: 100%;
 
           font-family: inherit;
@@ -152,7 +152,7 @@
           color: inherit;
         }
 
-        .ant-select-selection-search {
+        :global(.ant-select-selection-search) {
           inset-inline-start: 0px;
           inset-inline-end: 0px;
 
@@ -171,7 +171,7 @@
           }
         }
 
-        .ant-select-selection-placeholder {
+        :global(.ant-select-selection-placeholder) {
           display: inline-flex;
           align-items: center;
 
@@ -183,7 +183,7 @@
           font-weight: inherit;
         }
 
-        .ant-select-selection-item {
+        :global(.ant-select-selection-item) {
           padding-inline-end: 0px;
 
           font-family: inherit;
@@ -192,8 +192,8 @@
           color: inherit;
         }
 
-        .ant-select-selection-overflow-item {
-          .ant-select-selection-item {
+        :global(.ant-select-selection-overflow-item) {
+          :global(.ant-select-selection-item) {
             line-height: normal;
 
             padding-inline-end: 4px;
@@ -201,50 +201,50 @@
         }
       }
 
-      &.ant-select-focused {
-        .ant-select-selector {
+      &:global(.ant-select-focused) {
+        :global(.ant-select-selector) {
           border: none !important;
 
           box-shadow: none !important;
         }
       }
 
-      &.ant-select-open {
-        .ant-select-arrow {
+      &:global(.ant-select-open) {
+        :global(.ant-select-arrow) {
           transform: rotate(-180deg) translateY(50%);
         }
 
         &.noArrowAnimation {
-          .ant-select-arrow {
+          :global(.ant-select-arrow) {
             transform: translateY(-50%);
             transition: none !important;
           }
         }
       }
 
-      &.ant-select-status-error {
-        .ant-select-selector {
+      &:global(.ant-select-status-error) {
+        :global(.ant-select-selector) {
           border: none !important;
         }
       }
 
-      &.ant-select-multiple {
-        > .ant-select-selector {
-          > .ant-select-selection-overflow {
-            .ant-select-selection-search {
+      &:global(.ant-select-multiple) {
+        > :global(.ant-select-selector) {
+          > :global(.ant-select-selection-overflow) {
+            :global(.ant-select-selection-search) {
               width: 0px !important;
 
               margin-inline-start: 0px;
             }
           }
 
-          > .ant-select-selection-placeholder {
+          > :global(.ant-select-selection-placeholder) {
             inset-inline-start: 0px;
           }
         }
       }
 
-      .ant-select-arrow {
+      :global(.ant-select-arrow) {
         width: 14px;
         height: 14px;
         margin-top: 0px;
@@ -258,7 +258,7 @@
         pointer-events: all;
       }
 
-      .ant-select-clear {
+      :global(.ant-select-clear) {
         width: 14px;
         height: 14px;
         margin-top: 0px;
@@ -273,14 +273,14 @@
   }
 
   &.popupMatchContentWidth {
-    .ant-select-dropdown {
+    :global(.ant-select-dropdown) {
       [class="rc-virtual-list-holder-inner"] {
         position: relative !important;
       }
     }
   }
 
-  .ant-select-dropdown {
+  :global(.ant-select-dropdown) {
     position: fixed;
 
     font-family: inherit;
@@ -288,16 +288,16 @@
     font-weight: inherit;
     color: inherit;
 
-    .ant-select-item {
+    :global(.ant-select-item) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
-    .ant-select-item-empty,
-    .ant-empty,
-    .ant-empty-description {
+    :global(.ant-select-item-empty),
+    :global(.ant-empty),
+    :global(.ant-empty-description) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;

package/src/components/Select/IconSelect/index.module.less

@@ -10,7 +10,7 @@
     cursor: pointer;
   }
 
-  .ant-input-group-addon {
+  :global(.ant-input-group-addon) {
     padding: 0;
   }
 }
@@ -26,11 +26,11 @@
 .tabs {
   max-width: min-content;
 
-  .ant-tabs-nav {
+  :global(.ant-tabs-nav) {
     margin-bottom: 10px;
   }
 
-  .ant-tabs-tab {
+  :global(.ant-tabs-tab) {
     padding: 4px 0px 6px;
   }
 

package/src/components/Select/TreeSelect/index.module.less

@@ -11,7 +11,7 @@
   border: 1px solid var(--cf-border);
   border-radius: 6px;
 
-  .ant-select-selector {
+  :global(.ant-select-selector) {
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
@@ -21,14 +21,14 @@
     border: none !important;
     border-radius: inherit !important;
 
-    .ant-select-selection-wrap {
+    :global(.ant-select-selection-wrap) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
-    .ant-select-selection-search {
+    :global(.ant-select-selection-search) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
@@ -42,13 +42,13 @@
       }
     }
 
-    .ant-select-selection-placeholder {
+    :global(.ant-select-selection-placeholder) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
     }
 
-    .ant-select-selection-item {
+    :global(.ant-select-selection-item) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
@@ -56,21 +56,21 @@
     }
   }
 
-  .ant-select-arrow {
+  :global(.ant-select-arrow) {
     width: 14px;
     height: 14px;
 
     font-size: 14px;
   }
 
-  .ant-select-clear {
+  :global(.ant-select-clear) {
     width: 14px;
     height: 14px;
 
     font-size: 14px;
   }
 
-  .ant-tree-select-dropdown {
+  :global(.ant-tree-select-dropdown) {
     position: fixed;
 
     font-family: inherit;
@@ -78,17 +78,17 @@
     font-weight: inherit;
     color: inherit;
 
-    .ant-select-tree,
-    .ant-select-tree-treenode,
-    .ant-select-tree-node-content-wrapper,
-    .ant-select-tree-title {
+    :global(.ant-select-tree),
+    :global(.ant-select-tree-treenode),
+    :global(.ant-select-tree-node-content-wrapper),
+    :global(.ant-select-tree-title) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
-    .ant-select-tree-switcher {
+    :global(.ant-select-tree-switcher) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -103,19 +103,19 @@
       }
     }
 
-    .ant-select-tree-indent-unit {
+    :global(.ant-select-tree-indent-unit) {
       width: var(--tree-indent-unit-width);
     }
 
-    .ant-empty,
-    .ant-empty-description {
+    :global(.ant-empty),
+    :global(.ant-empty-description) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
-    .ant-select-tree-list-scrollbar {
+    :global(.ant-select-tree-list-scrollbar) {
       width: 5px !important;
 
       > div {