@next-bricks/presentational 1.21.9 → 1.21.11

package/docs/eo-divider.md

@@ -1,54 +1,142 @@
-分割线构件 `eo-divider`
+---
+tagName: eo-divider
+displayName: WrappedEoDivider
+description: 分割线
+category: container-display
+source: "@next-bricks/presentational"
+---
+
+# eo-divider
+
+> 分割线
+
+## Props
+
+| 属性         | 类型                                        | 必填 | 默认值         | 说明                                                                   |
+| ------------ | ------------------------------------------- | ---- | -------------- | ---------------------------------------------------------------------- |
+| orientation  | `"left" \| "center" \| "right"`             | 否   | `"center"`     | 标题位置，在 `horizontal` 类型的分割线中使用                           |
+| dashed       | `boolean`                                   | 否   | `false`        | 是否渲染为虚线                                                         |
+| type         | `"horizontal" \| "vertical" \| "radiation"` | 否   | `"horizontal"` | 分割线类型：水平、垂直或放射。`radiation` 是特殊样式类型，外观固定     |
+| proportion   | `[number, number]`                          | 否   | -              | 数值比例，仅在 `type="radiation"` 时生效。例如展示"1/3"时传入 `[1, 3]` |
+| dividerStyle | `CSSProperties`                             | 否   | -              | 分割线容器的自定义内联样式                                             |
 
 ## Examples
 
 ### Basic
 
+水平分割线，无文字内容。
+
 ```yaml preview
 - brick: eo-divider
 ```
 
 ### orientation
 
+设置 `orientation` 控制插槽文字在水平分割线中的对齐位置。
+
 ```yaml preview
-- brick: eo-divider
+- brick: div
   properties:
-    orientation: left
-    textContent: 基本
+    style:
+      display: flex
+      flexDirection: column
+      gap: 8px
+  children:
+    - brick: eo-divider
+      properties:
+        orientation: left
+      children:
+        - brick: span
+          properties:
+            textContent: 左对齐
+    - brick: eo-divider
+      properties:
+        orientation: center
+      children:
+        - brick: span
+          properties:
+            textContent: 居中
+    - brick: eo-divider
+      properties:
+        orientation: right
+      children:
+        - brick: span
+          properties:
+            textContent: 右对齐
 ```
 
-### 虚线 dashed
+### dashed
+
+启用 `dashed` 后分割线以虚线样式呈现。
 
 ```yaml preview
 - brick: eo-divider
   properties:
-    orientation: center
-    textContent: 基本
     dashed: true
+  children:
+    - brick: span
+      properties:
+        textContent: 虚线分割
 ```
 
 ### type vertical
 
+`type="vertical"` 用于行内元素之间的垂直分隔。
+
 ```yaml preview
-- brick: span
-  properties:
-    textContent: span1
-- brick: eo-divider
-  properties:
-    type: vertical
-- brick: span
+- brick: div
   properties:
-    textContent: span2
+    style:
+      display: flex
+      alignItems: center
+  children:
+    - brick: span
+      properties:
+        textContent: 文本A
+    - brick: eo-divider
+      properties:
+        type: vertical
+    - brick: span
+      properties:
+        textContent: 文本B
+    - brick: eo-divider
+      properties:
+        type: vertical
+        dashed: true
+    - brick: span
+      properties:
+        textContent: 文本C
 ```
 
 ### type radiation
 
+`type="radiation"` 配合 `proportion` 展示数值比例（如进度或占比）。
+
 ```yaml preview
 - brick: eo-divider
   properties:
     type: radiation
-    textContent: 标题
     proportion:
-      - 0
+      - 1
       - 3
+  children:
+    - brick: span
+      properties:
+        textContent: 完成进度
+```
+
+### dividerStyle
+
+通过 `dividerStyle` 自定义分割线容器的内联样式。
+
+```yaml preview
+- brick: eo-divider
+  properties:
+    dividerStyle:
+      borderColor: "#1890ff"
+      margin: "16px 0"
+  children:
+    - brick: span
+      properties:
+        textContent: 自定义样式
 ```

package/docs/eo-divider.react.md

@@ -0,0 +1,129 @@
+---
+tagName: eo-divider
+displayName: WrappedEoDivider
+description: 分割线
+category: container-display
+source: "@next-bricks/presentational"
+---
+
+# eo-divider (React)
+
+> 分割线
+
+## Props
+
+| 属性         | 类型                                        | 必填 | 默认值         | 说明                                                                   |
+| ------------ | ------------------------------------------- | ---- | -------------- | ---------------------------------------------------------------------- |
+| orientation  | `"left" \| "center" \| "right"`             | 否   | `"center"`     | 标题位置，在 `horizontal` 类型的分割线中使用                           |
+| dashed       | `boolean`                                   | 否   | `false`        | 是否渲染为虚线                                                         |
+| type         | `"horizontal" \| "vertical" \| "radiation"` | 否   | `"horizontal"` | 分割线类型：水平、垂直或放射。`radiation` 是特殊样式类型，外观固定     |
+| proportion   | `[number, number]`                          | 否   | -              | 数值比例，仅在 `type="radiation"` 时生效。例如展示"1/3"时传入 `[1, 3]` |
+| dividerStyle | `CSSProperties`                             | 否   | -              | 分割线容器的自定义内联样式                                             |
+
+## Examples
+
+### Basic
+
+水平分割线，无文字内容。
+
+```tsx preview
+import { WrappedEoDivider } from "@next-bricks/presentational/eo-divider";
+
+export function App() {
+  return <WrappedEoDivider />;
+}
+```
+
+### orientation
+
+设置 `orientation` 控制插槽文字在水平分割线中的对齐位置。
+
+```tsx preview
+import { WrappedEoDivider } from "@next-bricks/presentational/eo-divider";
+
+export function App() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      <WrappedEoDivider orientation="left">
+        <span>左对齐</span>
+      </WrappedEoDivider>
+      <WrappedEoDivider orientation="center">
+        <span>居中</span>
+      </WrappedEoDivider>
+      <WrappedEoDivider orientation="right">
+        <span>右对齐</span>
+      </WrappedEoDivider>
+    </div>
+  );
+}
+```
+
+### dashed
+
+启用 `dashed` 后分割线以虚线样式呈现。
+
+```tsx preview
+import { WrappedEoDivider } from "@next-bricks/presentational/eo-divider";
+
+export function App() {
+  return (
+    <WrappedEoDivider dashed>
+      <span>虚线分割</span>
+    </WrappedEoDivider>
+  );
+}
+```
+
+### type vertical
+
+`type="vertical"` 用于行内元素之间的垂直分隔。
+
+```tsx preview
+import { WrappedEoDivider } from "@next-bricks/presentational/eo-divider";
+
+export function App() {
+  return (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <span>文本A</span>
+      <WrappedEoDivider type="vertical" />
+      <span>文本B</span>
+      <WrappedEoDivider type="vertical" dashed />
+      <span>文本C</span>
+    </div>
+  );
+}
+```
+
+### type radiation
+
+`type="radiation"` 配合 `proportion` 展示数值比例（如进度或占比）。
+
+```tsx preview
+import { WrappedEoDivider } from "@next-bricks/presentational/eo-divider";
+
+export function App() {
+  return (
+    <WrappedEoDivider type="radiation" proportion={[1, 3]}>
+      <span>完成进度</span>
+    </WrappedEoDivider>
+  );
+}
+```
+
+### dividerStyle
+
+通过 `dividerStyle` 自定义分割线容器的内联样式。
+
+```tsx preview
+import { WrappedEoDivider } from "@next-bricks/presentational/eo-divider";
+
+export function App() {
+  return (
+    <WrappedEoDivider
+      dividerStyle={{ borderColor: "#1890ff", margin: "16px 0" }}
+    >
+      <span>自定义样式</span>
+    </WrappedEoDivider>
+  );
+}
+```

package/docs/eo-humanize-time.md

@@ -1,73 +1,120 @@
-人性化时间展示
+---
+tagName: eo-humanize-time
+displayName: EoHumanizeTime
+description: 人性化时间展示，可显示完整时间、相对时间、未来时间、耗时等，支持自定义输入值格式和输出格式。
+category: ""
+source: "@next-bricks/presentational"
+---
+
+# eo-humanize-time
+
+> 人性化时间展示，可显示完整时间、相对时间、未来时间、耗时等，支持自定义输入值格式和输出格式。
+
+## Props
+
+| 属性          | 类型                                                                              | 必填 | 默认值       | 说明                                                                                                                                                                                      |
+| ------------- | --------------------------------------------------------------------------------- | ---- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| string`                                                                | 是   | -            | 时间戳（秒或毫秒，由 `isMillisecond` 决定），或时间字符串（字符串类型时应提供 `inputFormat`）                                                                                             |
+| formatter     | `"full" \| "default" \| "relative" \| "past" \| "future" \| "accurate" \| "auto"` | 否   | `"auto"`     | 格式类型：`"full"` 完整时间、`"default"` 自动相对/完整、`"relative"` 相对时间（支持过去和未来）、`"past"` 仅过去相对时间、`"future"` 仅未来相对时间、`"accurate"` 精确耗时、`"auto"` 自动 |
+| isMillisecond | `boolean`                                                                         | 否   | `false`      | `value` 值的单位是否为毫秒，默认将 `value` 视为秒级时间戳                                                                                                                                 |
+| isCostTime    | `boolean`                                                                         | 否   | `false`      | 是否展示为耗费时间，例如：'1 个月 20 天'                                                                                                                                                  |
+| inputFormat   | `string`                                                                          | 否   | -            | 字符串类型 `value` 的解析格式，如 `"YYYY-MM-DD"`，[时间格式参照表](https://momentjs.com/docs/#/parsing/string-format/)                                                                    |
+| outputFormat  | `string`                                                                          | 否   | -            | 自定义输出格式，如 `"YYYY-MM-DD HH:mm:ss"`，设置后 `formatter` 属性无效，[时间格式参照表](https://momentjs.com/docs/#/displaying/format/)                                                 |
+| type          | `"datetime" \| "date"`                                                            | 否   | `"datetime"` | 使用日期+时间格式输出还是仅日期                                                                                                                                                           |
+| link          | `LinkInfo`                                                                        | 否   | -            | 将时间显示为可点击链接，`LinkInfo` — { url: 链接地址, target: 打开方式 }                                                                                                                  |
+| isMicrosecond | `boolean`                                                                         | 否   | -            | **已废弃**，请使用 `isMillisecond`                                                                                                                                                        |
 
 ## Examples
 
-### 完整
+### Basic
+
+使用默认格式展示一个秒级时间戳。
 
 ```yaml preview
-- brick: eo-humanize-time
-  properties:
-    formatter: full
-    value: 1714026348
+brick: eo-humanize-time
+properties:
+  value: 1714026348
 ```
 
-### 精确
+### 完整时间
+
+使用 `formatter: full` 展示精确的完整时间。
 
 ```yaml preview
-- brick: eo-humanize-time
-  properties:
-    formatter: accurate
-    value: 1714026348
+brick: eo-humanize-time
+properties:
+  formatter: full
+  value: 1714026348
 ```
 
-### 相对
+### 精确时间
+
+使用 `formatter: accurate` 展示精确的相对耗时。
 
 ```yaml preview
-- brick: eo-humanize-time
-  properties:
-    formatter: relative
-    isMillisecond: true
-    value: 1714026348000
+brick: eo-humanize-time
+properties:
+  formatter: accurate
+  value: 1714026348
 ```
 
-### 耗时
+### 相对时间
+
+使用毫秒级时间戳和 `formatter: relative` 展示相对时间（如"3 天前"）。
 
 ```yaml preview
-- brick: eo-humanize-time
-  properties:
-    formatter: relative
-    isCostTime: true
-    value: 1000
+brick: eo-humanize-time
+properties:
+  formatter: relative
+  isMillisecond: true
+  value: 1714026348000
 ```
 
-### 链接
+### 耗时展示
+
+使用 `isCostTime` 将时间戳转换为易读的耗时格式（如"1 个月 20 天"）。
 
 ```yaml preview
-- brick: eo-humanize-time
-  properties:
-    formatter: full
-    link:
-      target: _blank
-      url: /aaa/bbb
-    value: 1714026348
+brick: eo-humanize-time
+properties:
+  isCostTime: true
+  value: 1000
+```
+
+### 仅日期
+
+使用 `type: date` 只展示日期部分，不展示时间。
+
+```yaml preview
+brick: eo-humanize-time
+properties:
+  formatter: full
+  type: date
+  value: 1714026348
 ```
 
 ### 自定义格式
 
+通过 `inputFormat` 解析字符串输入，通过 `outputFormat` 自定义展示格式。
+
 ```yaml preview
-- brick: eo-humanize-time
-  properties:
-    inputFormat: YYYY-MM-DD
-    outputFormat: LLL
-    value: "2020-02-27 16:36"
+brick: eo-humanize-time
+properties:
+  inputFormat: YYYY-MM-DD
+  outputFormat: LLL
+  value: "2020-02-27 16:36"
 ```
 
-### 仅日期
+### 链接
+
+设置 `link` 将时间文本渲染为可点击链接。
 
 ```yaml preview
-- brick: eo-humanize-time
-  properties:
-    formatter: full
-    type: date
-    value: 1714026348
+brick: eo-humanize-time
+properties:
+  formatter: full
+  link:
+    target: _blank
+    url: /aaa/bbb
+  value: 1714026348
 ```

package/docs/eo-humanize-time.react.md

@@ -0,0 +1,109 @@
+---
+tagName: eo-humanize-time
+displayName: WrappedEoHumanizeTime
+description: 人性化时间展示，可显示完整时间、相对时间、未来时间、耗时等，支持自定义输入值格式和输出格式。
+category: ""
+source: "@next-bricks/presentational"
+---
+
+# WrappedEoHumanizeTime
+
+> 人性化时间展示，可显示完整时间、相对时间、未来时间、耗时等，支持自定义输入值格式和输出格式。
+
+## 导入
+
+```tsx
+import { WrappedEoHumanizeTime } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型                                                                              | 必填 | 默认值       | 说明                                                                                                                                                                                      |
+| ------------- | --------------------------------------------------------------------------------- | ---- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| string`                                                                | 是   | -            | 时间戳（秒或毫秒，由 `isMillisecond` 决定），或时间字符串（字符串类型时应提供 `inputFormat`）                                                                                             |
+| formatter     | `"full" \| "default" \| "relative" \| "past" \| "future" \| "accurate" \| "auto"` | 否   | `"auto"`     | 格式类型：`"full"` 完整时间、`"default"` 自动相对/完整、`"relative"` 相对时间（支持过去和未来）、`"past"` 仅过去相对时间、`"future"` 仅未来相对时间、`"accurate"` 精确耗时、`"auto"` 自动 |
+| isMillisecond | `boolean`                                                                         | 否   | `false`      | `value` 值的单位是否为毫秒，默认将 `value` 视为秒级时间戳                                                                                                                                 |
+| isCostTime    | `boolean`                                                                         | 否   | `false`      | 是否展示为耗费时间，例如：'1 个月 20 天'                                                                                                                                                  |
+| inputFormat   | `string`                                                                          | 否   | -            | 字符串类型 `value` 的解析格式，如 `"YYYY-MM-DD"`，[时间格式参照表](https://momentjs.com/docs/#/parsing/string-format/)                                                                    |
+| outputFormat  | `string`                                                                          | 否   | -            | 自定义输出格式，如 `"YYYY-MM-DD HH:mm:ss"`，设置后 `formatter` 属性无效，[时间格式参照表](https://momentjs.com/docs/#/displaying/format/)                                                 |
+| type          | `"datetime" \| "date"`                                                            | 否   | `"datetime"` | 使用日期+时间格式输出还是仅日期                                                                                                                                                           |
+| link          | `LinkInfo`                                                                        | 否   | -            | 将时间显示为可点击链接，`LinkInfo` — { url: 链接地址, target: 打开方式 }                                                                                                                  |
+| isMicrosecond | `boolean`                                                                         | 否   | -            | **已废弃**，请使用 `isMillisecond`                                                                                                                                                        |
+
+## Examples
+
+### Basic
+
+使用默认格式展示一个秒级时间戳。
+
+```tsx preview
+<WrappedEoHumanizeTime value={1714026348} />
+```
+
+### 完整时间
+
+使用 `formatter="full"` 展示精确的完整时间。
+
+```tsx preview
+<WrappedEoHumanizeTime formatter="full" value={1714026348} />
+```
+
+### 精确时间
+
+使用 `formatter="accurate"` 展示精确的相对耗时。
+
+```tsx preview
+<WrappedEoHumanizeTime formatter="accurate" value={1714026348} />
+```
+
+### 相对时间
+
+使用毫秒级时间戳和 `formatter="relative"` 展示相对时间（如"3 天前"）。
+
+```tsx preview
+<WrappedEoHumanizeTime
+  formatter="relative"
+  isMillisecond={true}
+  value={1714026348000}
+/>
+```
+
+### 耗时展示
+
+使用 `isCostTime` 将时间戳转换为易读的耗时格式（如"1 个月 20 天"）。
+
+```tsx preview
+<WrappedEoHumanizeTime isCostTime={true} value={1000} />
+```
+
+### 仅日期
+
+使用 `type="date"` 只展示日期部分，不展示时间。
+
+```tsx preview
+<WrappedEoHumanizeTime formatter="full" type="date" value={1714026348} />
+```
+
+### 自定义格式
+
+通过 `inputFormat` 解析字符串输入，通过 `outputFormat` 自定义展示格式。
+
+```tsx preview
+<WrappedEoHumanizeTime
+  inputFormat="YYYY-MM-DD"
+  outputFormat="LLL"
+  value="2020-02-27 16:36"
+/>
+```
+
+### 链接
+
+设置 `link` 将时间文本渲染为可点击链接。
+
+```tsx preview
+<WrappedEoHumanizeTime
+  formatter="full"
+  link={{ url: "/aaa/bbb", target: "_blank" }}
+  value={1714026348}
+/>
+```