fix(select): option设置content未生效

script/generate-usage/config.js

@@ -1066,4 +1066,37 @@ module.exports = {
       }, [changedProps]);
     `,
   },
+  Collapse: {
+    importStr: `
+    import configProps from './props.json';\n
+    import { Collapse } from 'tdesign-react';\n`,
+    configStr: `
+    const [configList, setConfigList] = useState(configProps);
+  `,
+    panelStr: `
+    const panelList = [{ label: 'collapse', value: 'collapse' }];
+  `,
+    usageStr: `
+    const { Panel } = Collapse;
+    useEffect(() => {
+      setRenderComp((
+        <Collapse defaultValue="default" {...changedProps}>
+          <Panel header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </Panel>
+          <Panel header="设置默认展开项" value="default">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </Panel>
+          <Panel header="嵌套使用折叠面板">
+            <Collapse>
+              <Panel header="这是一个折叠标题">
+                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+              </Panel>
+            </Collapse>
+          </Panel>
+        </Collapse>
+      ));
+    }, [changedProps]);
+  `,
+  },
 };

src/collapse/_usage/index.jsx

@@ -0,0 +1,65 @@
+/**
+ *  该脚本为自动生成，如有需要请在 /script/generate-usage.js 中调整
+ */
+
+// @ts-nocheck
+import React, { useState, useEffect, useMemo } from "react";
+import BaseUsage, {
+  useConfigChange,
+  usePanelChange,
+} from "@site/src/components/BaseUsage";
+import jsxToString from "react-element-to-jsx-string";
+
+import { Collapse } from "tdesign-react";
+import configProps from "./props.json";
+
+
+export default function Usage() {
+  const [configList, setConfigList] = useState(configProps);
+
+  const { changedProps, onConfigChange } = useConfigChange(configList);
+
+  const panelList = [{ label: "collapse", value: "collapse" }];
+
+  const { panel, onPanelChange } = usePanelChange(panelList);
+
+  const [renderComp, setRenderComp] = useState();
+
+  const { Panel } = Collapse;
+  useEffect(() => {
+    setRenderComp(
+      <Collapse defaultValue="default" {...changedProps}>
+        <Panel header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </Panel>
+        <Panel header="设置默认展开项" value="default">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </Panel>
+        <Panel header="嵌套使用折叠面板">
+          <Collapse>
+            <Panel header="这是一个折叠标题">
+              这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+            </Panel>
+          </Collapse>
+        </Panel>
+      </Collapse>
+    );
+  }, [changedProps]);
+
+  const jsxStr = useMemo(() => {
+    if (!renderComp) return "";
+    return jsxToString(renderComp);
+  }, [renderComp]);
+
+  return (
+    <BaseUsage
+      code={jsxStr}
+      panelList={panelList}
+      configList={configList}
+      onPanelChange={onPanelChange}
+      onConfigChange={onConfigChange}
+    >
+      {renderComp}
+    </BaseUsage>
+  );
+}

src/message/_example/close-function.jsx

@@ -5,7 +5,6 @@ export default function () {
   const [instance, setInstance] = useState(null);
   const isMessageOpen = instance === null;
   const buttonTips = isMessageOpen ? '打开' : '关闭';
-
   return (
     <Button
       onClick={() => {

src/select/_example/base.jsx

@@ -18,7 +18,7 @@ export default function SingleSelect() {
         { label: '大数据', value: '2' },
         { label: '区块链', value: '3' },
         { label: '物联网', value: '4', disabled: true },
-        { label: '人工智能', value: '5' },
+        { label: '人工智能', value: '5', content: <span>人工智能（新）</span> },
       ]}
     ></Select>
   );

src/select/_example/multiple.jsx

@@ -8,7 +8,7 @@ const options1 = [
   { label: '大数据', value: '2' },
   { label: '区块链', value: '3' },
   { label: '物联网', value: '4', disabled: true },
-  { label: '人工智能', value: '5' },
+  { label: '人工智能', value: '5', content: <span>人工智能（新）</span> },
   {
     label: '计算场景',
     value: '6',
@@ -21,7 +21,7 @@ const options2 = [
   { label: '域名注册', value: '3' },
   { label: '网站备案', value: '4' },
   { label: '对象存储', value: '5' },
-  { label: '低代码平台', value: '6' },
+  { label: '低代码平台', value: '6', content: <span>低代码平台（新）</span> },
 ];
 
 const MultipleSelect = () => {
@@ -33,7 +33,7 @@ const MultipleSelect = () => {
       <br></br>
       <Select defaultValue={['1', '2', '3', '4', '5', '6']} placeholder="请选择云产品" multiple>
         {options2.map((item) => (
-          <Option value={item.value} label={item.label} key={item.value}></Option>
+          <Option value={item.value} label={item.label} key={item.value} content={item.content}></Option>
         ))}
       </Select>
     </Space>

src/select/base/Option.tsx

@@ -102,7 +102,7 @@ const Option = (props: SelectOptionProps) => {
             onClick={(e) => e.stopPropagation()}
           />
           <span className={classNames(`${classPrefix}-checkbox__input`)}></span>
-          <span className={classNames(`${classPrefix}-checkbox__label`)}>{children || label}</span>
+          <span className={classNames(`${classPrefix}-checkbox__label`)}>{children || content || label}</span>
         </label>
       );
     }

src/select/base/PopupContent.tsx

@@ -114,7 +114,7 @@ const PopupContent = forwardRef((props: SelectPopupProps, ref: Ref<HTMLDivElemen
       // 通过 options API配置的
       return (
         <ul className={`${classPrefix}-select__list`}>
-          {(options as OptionsType).map(({ value: optionValue, label, disabled, ...restData }, index) => (
+          {(options as OptionsType).map(({ value: optionValue, label, disabled, content, ...restData }, index) => (
             <Option
               key={index}
               max={max}
@@ -127,6 +127,7 @@ const PopupContent = forwardRef((props: SelectPopupProps, ref: Ref<HTMLDivElemen
               disabled={disabled}
               restData={restData}
               keys={keys}
+              content={content}
             />
           ))}
         </ul>