From e5c5f89cc5b80d5d543820121a9d0f11b36f684a Mon Sep 17 00:00:00 2001
From: llq-yyds <958614130@qq.com>
Date: Sun, 14 Jan 2024 00:10:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=AB=98=E7=BA=A7?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sidebar.ts                       |   4 +
 src/Descriptions/demos/Demo1.tsx |  26 +++
 src/Descriptions/index.less      |   7 +
 src/Descriptions/index.md        |  79 +++++++++
 src/Descriptions/index.tsx       | 280 +++++++++++++++++++++++++++++++
 src/index.ts                     |   2 +
 6 files changed, 398 insertions(+)
 create mode 100644 src/Descriptions/demos/Demo1.tsx
 create mode 100644 src/Descriptions/index.less
 create mode 100644 src/Descriptions/index.md
 create mode 100644 src/Descriptions/index.tsx

diff --git a/sidebar.ts b/sidebar.ts
index 413514f3..d946b2e7 100644
--- a/sidebar.ts
+++ b/sidebar.ts
@@ -64,6 +64,10 @@ export default {
           title: 'LEditTable-高级编辑表格',
           link: '/components/edit-table',
         },
+        {
+          title: 'LDescriptions-高级描述列表',
+          link: '/components/descriptions',
+        },
         {
           title: 'LList-高级列表',
           link: '/components/list',
diff --git a/src/Descriptions/demos/Demo1.tsx b/src/Descriptions/demos/Demo1.tsx
new file mode 100644
index 00000000..72537395
--- /dev/null
+++ b/src/Descriptions/demos/Demo1.tsx
@@ -0,0 +1,26 @@
+import { LDescriptions } from 'lighting-design';
+
+export default function Demo1() {
+  return (
+    <div>
+      <LDescriptions
+        colon={false}
+        title="大萨达"
+        extra="发送"
+        titleWidth={120}
+        columns={[
+          { title: '姓名', dataIndex: 'name' },
+          { title: 'Age', dataIndex: 'age' },
+          { title: 'Address', dataIndex: 'address' },
+          { title: 'Desc', dataIndex: 'desc' },
+        ]}
+        record={{
+          name: '李岚清',
+          age: 20,
+          address: <div style={{ color: 'red', fontWeight: 700, fontSize: 18 }}>北京</div>,
+          desc: '姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名',
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/Descriptions/index.less b/src/Descriptions/index.less
new file mode 100644
index 00000000..40934f3b
--- /dev/null
+++ b/src/Descriptions/index.less
@@ -0,0 +1,7 @@
+@prefix-cls: ~'lightd-descriptions';
+
+.@{prefix-cls} {
+  .ant-form-item.ligthd-from-item .ant-form-item-label > label::after {
+    color: var(--lightd-descriptions-colon-color, rgba(0, 0, 0, 88%));
+  }
+}
diff --git a/src/Descriptions/index.md b/src/Descriptions/index.md
new file mode 100644
index 00000000..a330085c
--- /dev/null
+++ b/src/Descriptions/index.md
@@ -0,0 +1,79 @@
+---
+title: LDescriptions
+toc: content
+nav:
+  path: /components
+---
+
+# LDescriptions
+
+用于显示描述信息。
+
+## 代码演示
+
+### 基础用法
+
+<code src='./demos/Demo1.tsx' background='#f5f5f5'></code>
+
+## API
+
+:::warning{title=注意}
+
+- 其中 `LColorChromePicker` `LColorSketchPicker` 在颜色模式为 `rgb` 时，支持设置透明度。
+
+- 在表单中推荐使用 [LFormItemColor](/components/form-item-color)
+
+  :::
+
+```ts
+import { LDescriptions } from 'lighting-design';
+```
+
+### LDescriptionsProps
+
+| 参数         | 说明                                                                      | 类型                                     | 默认值         |
+| ------------ | ------------------------------------------------------------------------- | ---------------------------------------- | -------------- |
+| title        | 左上角标题                                                                | `ReactNode`                              | `- `           |
+| extra        | 右上角额外元素                                                            | `ReactNode`                              | `true`         |
+| className    | 根容器类名                                                                | `string`                                 | `-`            |
+| style        | 根容器样式                                                                | `CSSProperties`                          | `-`            |
+| headerStyle  | 头部容器样式                                                              | `CSSProperties`                          | `-`            |
+| columns      | 列字段配置                                                                | [LDescriptionItem](/LDescriptionItem)[]  | `[]`           |
+| column       | 一行展示几列, 或`{ xs: 8, sm: 16, md: 24, ...}`的配置来设置响应式展示几列 | `number\| ColProps`                      | `3`            |
+| gutter       | 每一项的间距                                                              | `ColProps['gutter']`                     | `16`           |
+| layout       | 布局模式                                                                  | `'horizontal' \| 'inline' \| 'vertical'` | `'horizontal'` |
+| titleAlign   | 每一项标题对齐方式                                                        | `'left' \| 'right'`                      | `'right'`      |
+| titleWidth   | 每一项标题宽度                                                            | `number \| string`                       | `-`            |
+| titleWrap    | 每一项标题过长时是否换行                                                  | `boolean`                                | `false`        |
+| colon        | 每一项标题后面是否加上`：`符号                                            | `boolean`                                | `true`         |
+| isLastBlock  | 最后一项标题是否占满`包含块`                                              | `boolean`                                | `true`         |
+| marginBottom | 每一项的`marginBottom`值                                                  | `number \| string`                       | `16`           |
+| loading      | loading                                                                   | `boolean \| SpinProps`                   | `-`            |
+| record       | 字段数据源                                                                | `Record<string, ReactNode>`              | `-`            |
+| renderTitle  | 重新渲染每一项的标题                                                      | `FormProps['requiredMark']`              | `-`            |
+
+### LDescriptionsItem
+
+```ts
+export type LDescriptionItem = {
+  /** 当前项的标题 */
+  title?: React.ReactNode;
+  /** 当前项的key */
+  dataIndex: string;
+  /** ColProps['span'] */
+  span?: number;
+  /** 当前项的样式 */
+  style?: React.CSSProperties;
+  /** 当前项标题宽 */
+  titleWidth?: number | string;
+  /**`ColProps`的配置来设置响应式展示几列  { xs: 8, sm: 16, md: 24, ...}*/
+  col?: ColProps;
+  /** Col的样式 */
+  colStyle?: React.CSSProperties;
+  tooltip?: FormItemProps['tooltip'];
+  /** 是否展示星星 */
+  required?: boolean;
+  /** 重新渲染当前项 */
+  render?: (curVal: ReactNode, record: Record<string, ReactNode>, index: number) => ReactNode;
+};
+```
diff --git a/src/Descriptions/index.tsx b/src/Descriptions/index.tsx
new file mode 100644
index 00000000..cfd42591
--- /dev/null
+++ b/src/Descriptions/index.tsx
@@ -0,0 +1,280 @@
+import type { ColProps, FormItemProps, RowProps, SpinProps } from 'antd';
+import { Col, Form, Row, Spin } from 'antd';
+import type { FormProps } from 'antd/lib';
+import classnames from 'classnames';
+import LFormItem from 'lighting-design/FormItem';
+import { emptyArray, emptyObject } from 'lighting-design/constants';
+import type { FC, ReactNode } from 'react';
+import { useMemo } from 'react';
+import './index.less';
+
+const prefixCls = 'lightd-descriptions';
+
+export type LDescriptionItem = {
+  /** 当前项的标题 */
+  title?: ReactNode;
+  /** 当前项的key */
+  dataIndex: string;
+  span?: number;
+  style?: React.CSSProperties;
+  titleWidth?: number | string;
+  col?: ColProps;
+  colStyle?: React.CSSProperties;
+  tooltip?: FormItemProps['tooltip'];
+  required?: boolean;
+  /** 重新渲染当前项 */
+  render?: (curVal: ReactNode, record: Record<string, ReactNode>, index: number) => ReactNode;
+};
+
+export type LDescriptionsProps = {
+  /**
+   *左上角标题
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  title?: ReactNode;
+  /**
+   *右上角额外元素
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  extra?: ReactNode;
+  /**
+   *类名
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  className?: string;
+  /**
+   *样式
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  style?: React.CSSProperties;
+  /**
+   *头部样式 控制 `title`与`extra`的容器
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  headerStyle?: React.CSSProperties;
+  /**
+   *列字段配置
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  columns?: LDescriptionItem[];
+  /**
+   *一行展示几列 也可以设置 `ColProps`的配置来设置响应式展示几列
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  column?: number | ColProps;
+  /**
+   *每一项的间距
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  gutter?: RowProps['gutter'];
+  /**
+   *布局模式
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  layout?: FormProps['layout'];
+  /**
+   *每一项标题对齐方式
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  titleAlign?: 'left' | 'right';
+  /**
+   *每一项标题宽度
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  titleWidth?: number | string;
+  /**
+   *每一项标题过长时是否换行
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  titleWrap?: boolean;
+  /**
+   *每一项标题后面是否加上`：`符号
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  colon?: boolean;
+  /**
+   *最后一项标题是否占满包含块
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  isLastBlock?: boolean;
+  /**
+   *每一项的`marginBottom`值
+   *@default 24
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  marginBottom?: number | string;
+  /**
+   *loading配置
+   *@default 24
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  loading?: boolean | SpinProps;
+  /**
+   *字段数据
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  record?: Record<string, ReactNode>;
+  /**
+   *重新渲染每一项的标题
+   *@author 李岚清 <https://github.com/llq0802>
+   *@version 2.1.29
+   *@see 官网 https://llq0802.github.io/lighting-design/latest LDescriptionsProps
+   */
+  renderTitle?: FormProps['requiredMark'];
+};
+
+const LDescriptions: FC<LDescriptionsProps> = ({
+  renderTitle,
+  marginBottom = 16,
+  className,
+  style,
+  title,
+  extra,
+  columns = emptyArray,
+  record = emptyObject,
+  headerStyle = emptyObject,
+  column: outColumn = 3,
+  layout = 'horizontal',
+  titleAlign = 'right',
+  titleWidth,
+  titleWrap,
+  gutter = 16,
+  loading = false,
+  isLastBlock = true,
+  colon = 'rgba(0, 0, 0, 0.88)',
+}) => {
+  const spinProps = useMemo(() => {
+    if (typeof loading === 'boolean') return { spinning: loading };
+    return loading;
+  }, [loading]);
+
+  const { column, colSpan } = useMemo(() => {
+    if (typeof outColumn === 'number') {
+      return {
+        column: outColumn,
+        colSpan: {},
+      };
+    }
+    return {
+      column: void 0,
+      colSpan: outColumn,
+    };
+  }, [outColumn]);
+  const isSpace = layout === 'inline';
+  return (
+    <Spin {...spinProps}>
+      <Form
+        requiredMark={renderTitle}
+        className={classnames(`${prefixCls}`, className)}
+        layout={layout}
+        component="div"
+        labelWrap={titleWrap}
+        style={{
+          // @ts-ignore
+          [`--${prefixCls}-colon-color`]: colon || 'rgba(0, 0, 0, 0.88)',
+          ...style,
+        }}
+      >
+        {(!!title || !!extra) && (
+          <div
+            style={{
+              display: 'flex',
+              marginBottom: 24,
+              justifyContent: 'space-between',
+              ...headerStyle,
+            }}
+          >
+            <div role="title">{title}</div>
+            <div role="extra">{extra}</div>
+          </div>
+        )}
+        <Row gutter={gutter}>
+          {columns.map(
+            (
+              {
+                render,
+                dataIndex,
+                title,
+                style: itemStyle,
+                span,
+                tooltip,
+                colStyle,
+                required,
+                titleWidth: itemTitleWidth,
+                col = {},
+              },
+              i,
+            ) => {
+              const curVal = record[dataIndex];
+              const isLastItem = i === columns.length - 1;
+              const getSpanNum = () => {
+                if (isSpace) return void 0;
+                if (typeof column !== 'number') return void 0;
+                if (isLastItem) return isLastBlock ? void 0 : span || Math.floor(24 / column);
+                return span || Math.floor(24 / column);
+              };
+
+              return (
+                <Col
+                  key={dataIndex || i}
+                  span={getSpanNum()}
+                  {...colSpan}
+                  {...col}
+                  style={colStyle}
+                  flex={isLastItem && isLastBlock ? 1 : void 0}
+                >
+                  <LFormItem
+                    required={required}
+                    tooltip={tooltip}
+                    labelWidth={!isSpace ? itemTitleWidth || titleWidth : void 0}
+                    labelAlign={titleAlign}
+                    label={title}
+                    colon={colon}
+                    style={{ marginBottom, ...itemStyle }}
+                  >
+                    {render ? render?.(curVal, record, i) : curVal}
+                  </LFormItem>
+                </Col>
+              );
+            },
+          )}
+        </Row>
+      </Form>
+    </Spin>
+  );
+};
+export default LDescriptions;
diff --git a/src/index.ts b/src/index.ts
index fa31e558..edb12c91 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,8 @@ export { default as LCardGroup } from './CardGroup';
 export * from './CollapseCard';
 export { default as LCollapseCard } from './CollapseCard';
 export * from './ColorPick';
+export * from './Descriptions';
+export { default as LDescriptions } from './Descriptions';
 export * from './DrawerForm';
 export { default as LDrawerForm } from './DrawerForm';
 export * from './Echarts';