@kne/super-select-plus 0.1.0 → 0.1.2

package/README.md

@@ -28,6 +28,7 @@ npm i --save @kne/super-select-plus
 - **单选/多选**：所有组件均支持单选和多选模式
 - **数据缓存**：枚举显示组件内置多层缓存机制，提升性能
 - **自定义渲染**：枚举显示组件支持自定义渲染函数，灵活展示
+- **批量显示**：枚举显示组件支持 `names` 数组，一次转换多个编码为 label
 
 ### 组件列表
 
@@ -57,14 +58,18 @@ npm i --save @kne/super-select-plus
 #### 示例代码
 
 - SelectFunction 职能选择器
-- 基于级联选择器的职能选择组件，支持多级职能数据的选择，具备搜索、单选/多选等功能
+- 基于级联选择器的职能选择组件，支持多级职能数据的选择、值回显、搜索、单选/多选等功能
 - _SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd)
 
 ```jsx
-const { SelectFunction } = _SuperSelectPlus;
+const { SelectFunction, FunctionEnum, enumItemsToSelectValue, enumItemToSelectValue } = _SuperSelectPlus;
 const { Flex, Divider, Tag, Switch } = antd;
 const { useState } = React;
 
+// 模拟后端接口返回的职能编码
+const savedFunctionCodes = ['001001001', '001001002', '001001003'];
+const savedFunctionCode = '001001001';
+
 // 基础多选示例
 const BasicMultiExample = ({ isPopup }) => {
   const [value, setValue] = useState([]);
@@ -155,6 +160,137 @@ const PopupModeExample = () => {
   );
 };
 
+// 值回显 - 仅传 id，组件自动从 options 解析名称
+const ValueEchoByIdExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedFunctionCodes.map((id) => ({ id })));
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（仅编码 {&#96;{ id }&#96;}）：</span>
+      <Tag color="default">后端编码：{savedFunctionCodes.join('、')}</Tag>
+      <SelectFunction
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择职能"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 仅传编码字符串数组
+const ValueEchoByCodesExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedFunctionCodes);
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（编码字符串数组）：</span>
+      <Tag color="default">后端编码：{savedFunctionCodes.join('、')}</Tag>
+      <SelectFunction
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择职能"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（对象编码）
+const SingleValueEchoExample = ({ isPopup }) => {
+  const [value, setValue] = useState({ id: '001001001' });
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（{&#96;{ id: '001001001' }&#96;}）：</span>
+      <SelectFunction
+        single
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择职能"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（字符串编码）
+const SingleValueEchoByCodeExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedFunctionCode);
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（编码字符串）：</span>
+      <SelectFunction
+        single
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择职能"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（FunctionEnum name）
+const SingleValueEchoWithEnumExample = ({ isPopup }) => {
+  const [value, setValue] = useState();
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（FunctionEnum name）：</span>
+      <Tag color="default">后端编码：{savedFunctionCode}</Tag>
+      <FunctionEnum name={savedFunctionCode}>
+        {(item) => {
+          const resolved = enumItemToSelectValue(item);
+          if (!resolved) return <span>加载中...</span>;
+          return (
+            <SelectFunction
+              single
+              value={value ?? resolved}
+              onChange={setValue}
+              isPopup={isPopup}
+              placeholder="请选择职能"
+              style={{ width: 320 }}
+            />
+          );
+        }}
+      </FunctionEnum>
+    </Flex>
+  );
+};
+
+// 值回显 - 结合 FunctionEnum，仅传编码数组 names={[code, code]}
+const ValueEchoWithEnumExample = ({ isPopup }) => {
+  const [value, setValue] = useState();
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（FunctionEnum names）：</span>
+      <Tag color="default">后端编码：{savedFunctionCodes.join('、')}</Tag>
+      <FunctionEnum names={savedFunctionCodes}>
+        {(items) => {
+          const resolved = enumItemsToSelectValue(items);
+          if (!resolved.length) return <span>加载中...</span>;
+          return (
+            <SelectFunction
+              value={value ?? resolved}
+              onChange={setValue}
+              isPopup={isPopup}
+              placeholder="请选择职能"
+              style={{ width: 320 }}
+            />
+          );
+        }}
+      </FunctionEnum>
+    </Flex>
+  );
+};
+
 const BaseExample = () => {
   const [isPopup, setIsPopup] = useState(true);
 
@@ -179,6 +315,20 @@ const BaseExample = () => {
       <Divider />
       <MaxLimitExample isPopup={isPopup} />
       <Divider />
+      <span style={{ fontWeight: 500 }}>单选值回显</span>
+      <SingleValueEchoExample isPopup={isPopup} />
+      <Divider />
+      <SingleValueEchoByCodeExample isPopup={isPopup} />
+      <Divider />
+      <SingleValueEchoWithEnumExample isPopup={isPopup} />
+      <Divider />
+      <span style={{ fontWeight: 500 }}>多选值回显</span>
+      <ValueEchoByIdExample isPopup={isPopup} />
+      <Divider />
+      <ValueEchoByCodesExample isPopup={isPopup} />
+      <Divider />
+      <ValueEchoWithEnumExample isPopup={isPopup} />
+      <Divider />
       <PopupModeExample />
     </Flex>
   );
@@ -189,14 +339,18 @@ render(<BaseExample />);
 ```
 
 - SelectIndustry 行业选择器
-- 基于级联选择器的行业选择组件，支持多级行业数据的选择，具备搜索、单选/多选等功能
+- 基于级联选择器的行业选择组件，支持多级行业数据的选择、值回显、搜索、单选/多选等功能
 - _SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd)
 
 ```jsx
-const { SelectIndustry } = _SuperSelectPlus;
+const { SelectIndustry, IndustryEnum, enumItemsToSelectValue, enumItemToSelectValue } = _SuperSelectPlus;
 const { Flex, Divider, Tag, Switch } = antd;
 const { useState } = React;
 
+// 模拟后端接口返回的行业编码
+const savedIndustryCodes = ['001', '003', '004'];
+const savedIndustryCode = '001';
+
 // 基础多选示例
 const BasicMultiExample = ({ isPopup }) => {
   const [value, setValue] = useState([]);
@@ -266,6 +420,137 @@ const MaxLimitExample = ({ isPopup }) => {
   );
 };
 
+// 值回显 - 仅传 id，组件自动从 options 解析名称
+const ValueEchoByIdExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedIndustryCodes.map((id) => ({ id })));
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（仅编码 {&#96;{ id }&#96;}）：</span>
+      <Tag color="default">后端编码：{savedIndustryCodes.join('、')}</Tag>
+      <SelectIndustry
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择行业"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 仅传编码字符串数组
+const ValueEchoByCodesExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedIndustryCodes);
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（编码字符串数组）：</span>
+      <Tag color="default">后端编码：{savedIndustryCodes.join('、')}</Tag>
+      <SelectIndustry
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择行业"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（对象编码）
+const SingleValueEchoExample = ({ isPopup }) => {
+  const [value, setValue] = useState({ id: '001' });
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（{&#96;{ id: '001' }&#96;}）：</span>
+      <SelectIndustry
+        single
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择行业"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（字符串编码）
+const SingleValueEchoByCodeExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedIndustryCode);
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（编码字符串）：</span>
+      <SelectIndustry
+        single
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择行业"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（IndustryEnum name）
+const SingleValueEchoWithEnumExample = ({ isPopup }) => {
+  const [value, setValue] = useState();
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（IndustryEnum name）：</span>
+      <Tag color="default">后端编码：{savedIndustryCode}</Tag>
+      <IndustryEnum name={savedIndustryCode}>
+        {(item) => {
+          const resolved = enumItemToSelectValue(item);
+          if (!resolved) return <span>加载中...</span>;
+          return (
+            <SelectIndustry
+              single
+              value={value ?? resolved}
+              onChange={setValue}
+              isPopup={isPopup}
+              placeholder="请选择行业"
+              style={{ width: 320 }}
+            />
+          );
+        }}
+      </IndustryEnum>
+    </Flex>
+  );
+};
+
+// 值回显 - 结合 IndustryEnum，仅传编码数组 names={[code, code]}
+const ValueEchoWithEnumExample = ({ isPopup }) => {
+  const [value, setValue] = useState();
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（IndustryEnum names）：</span>
+      <Tag color="default">后端编码：{savedIndustryCodes.join('、')}</Tag>
+      <IndustryEnum names={savedIndustryCodes}>
+        {(items) => {
+          const resolved = enumItemsToSelectValue(items);
+          if (!resolved.length) return <span>加载中...</span>;
+          return (
+            <SelectIndustry
+              value={value ?? resolved}
+              onChange={setValue}
+              isPopup={isPopup}
+              placeholder="请选择行业"
+              style={{ width: 320 }}
+            />
+          );
+        }}
+      </IndustryEnum>
+    </Flex>
+  );
+};
+
 const BaseExample = () => {
   const [isPopup, setIsPopup] = useState(true);
 
@@ -289,6 +574,20 @@ const BaseExample = () => {
       <SingleSelectExample isPopup={isPopup} />
       <Divider />
       <MaxLimitExample isPopup={isPopup} />
+      <Divider />
+      <span style={{ fontWeight: 500 }}>单选值回显</span>
+      <SingleValueEchoExample isPopup={isPopup} />
+      <Divider />
+      <SingleValueEchoByCodeExample isPopup={isPopup} />
+      <Divider />
+      <SingleValueEchoWithEnumExample isPopup={isPopup} />
+      <Divider />
+      <span style={{ fontWeight: 500 }}>多选值回显</span>
+      <ValueEchoByIdExample isPopup={isPopup} />
+      <Divider />
+      <ValueEchoByCodesExample isPopup={isPopup} />
+      <Divider />
+      <ValueEchoWithEnumExample isPopup={isPopup} />
     </Flex>
   );
 };
@@ -298,14 +597,18 @@ render(<BaseExample />);
 ```
 
 - SelectAddress 城市选择器
-- 城市地址选择组件，支持国内外城市搜索选择，具备拼音搜索、首字母搜索等功能
+- 城市地址选择组件，支持国内外城市搜索选择、值回显，具备拼音搜索、首字母搜索等功能
 - _SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],(@kne/current-lib_super-select-plus/dist/index.css),antd(antd)
 
 ```jsx
-const { SelectAddress } = _SuperSelectPlus;
+const { SelectAddress, AddressEnum, addressEnumToSelectValue, addressEnumToSelectValueSingle } = _SuperSelectPlus;
 const { Flex, Divider, Tag, Switch } = antd;
 const { useState } = React;
 
+// 模拟后端接口返回的城市编码
+const savedCityCodes = ['010', '020'];
+const savedCityCode = '010';
+
 // 基础多选示例
 const BasicMultiExample = ({ isPopup }) => {
   const [value, setValue] = useState([]);
@@ -375,6 +678,142 @@ const MaxLimitExample = ({ isPopup }) => {
   );
 };
 
+// 值回显 - 仅传 value 编码，组件自动解析 label
+const ValueEchoByCodeExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedCityCodes.map((code) => ({ value: code })));
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（仅编码 {&#96;{ value }&#96;}）：</span>
+      <Tag color="default">后端编码：{savedCityCodes.join('、')}</Tag>
+      <SelectAddress
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择城市"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 完整对象（表单已缓存 label）
+const cachedCityValue = [
+  { value: '010', label: '北京' },
+  { value: '020', label: '上海' }
+];
+
+const ValueEchoWithLabelExample = ({ isPopup }) => {
+  const [value, setValue] = useState(cachedCityValue);
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（含 label）：</span>
+      <Tag color="default">后端编码：{savedCityCodes.join('、')}</Tag>
+      <SelectAddress
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择城市"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 结合 AddressEnum，仅传编码数组 names={[code, code]}
+const ValueEchoWithEnumExample = ({ isPopup }) => {
+  const [value, setValue] = useState();
+
+  return (
+    <Flex vertical gap={8}>
+      <span>值回显（AddressEnum names）：</span>
+      <Tag color="default">后端编码：{savedCityCodes.join('、')}</Tag>
+      <AddressEnum names={savedCityCodes}>
+        {(outputs) => {
+          const resolved = addressEnumToSelectValue(outputs);
+          if (!resolved.length) return <span>加载中...</span>;
+          return (
+            <SelectAddress
+              value={value ?? resolved}
+              onChange={setValue}
+              isPopup={isPopup}
+              placeholder="请选择城市"
+              style={{ width: 320 }}
+            />
+          );
+        }}
+      </AddressEnum>
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（仅编码）
+const SingleValueEchoExample = ({ isPopup }) => {
+  const [value, setValue] = useState({ value: '010' });
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（{&#96;{ value: '010' }&#96;}）：</span>
+      <SelectAddress
+        single
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择城市"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（字符串编码）
+const SingleValueEchoByCodeExample = ({ isPopup }) => {
+  const [value, setValue] = useState(savedCityCode);
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（编码字符串）：</span>
+      <SelectAddress
+        single
+        value={value}
+        onChange={setValue}
+        isPopup={isPopup}
+        placeholder="请选择城市"
+        style={{ width: 320 }}
+      />
+    </Flex>
+  );
+};
+
+// 值回显 - 单选（AddressEnum name）
+const SingleValueEchoWithEnumExample = ({ isPopup }) => {
+  const [value, setValue] = useState();
+
+  return (
+    <Flex vertical gap={8}>
+      <span>单选值回显（AddressEnum name）：</span>
+      <Tag color="default">后端编码：{savedCityCode}</Tag>
+      <AddressEnum name={savedCityCode}>
+        {(output) => {
+          const resolved = addressEnumToSelectValueSingle(output);
+          if (!resolved) return <span>加载中...</span>;
+          return (
+            <SelectAddress
+              single
+              value={value ?? resolved}
+              onChange={setValue}
+              isPopup={isPopup}
+              placeholder="请选择城市"
+              style={{ width: 320 }}
+            />
+          );
+        }}
+      </AddressEnum>
+    </Flex>
+  );
+};
+
 const BaseExample = () => {
   const [isPopup, setIsPopup] = useState(true);
 
@@ -398,6 +837,20 @@ const BaseExample = () => {
       <SingleSelectExample isPopup={isPopup} />
       <Divider />
       <MaxLimitExample isPopup={isPopup} />
+      <Divider />
+      <span style={{ fontWeight: 500 }}>单选值回显</span>
+      <SingleValueEchoExample isPopup={isPopup} />
+      <Divider />
+      <SingleValueEchoByCodeExample isPopup={isPopup} />
+      <Divider />
+      <SingleValueEchoWithEnumExample isPopup={isPopup} />
+      <Divider />
+      <span style={{ fontWeight: 500 }}>多选值回显</span>
+      <ValueEchoByCodeExample isPopup={isPopup} />
+      <Divider />
+      <ValueEchoWithLabelExample isPopup={isPopup} />
+      <Divider />
+      <ValueEchoWithEnumExample isPopup={isPopup} />
     </Flex>
   );
 };
@@ -470,8 +923,26 @@ const BaseExample = createWithRemoteLoader({
             <div><strong>姓名：</strong>张三</div>
             <div><strong>所在城市：</strong><AddressEnum name="010" /></div>
             <div><strong>期望工作城市：</strong><AddressEnum name="020" /></div>
+            <div><strong>可接受城市：</strong><AddressEnum names={['010', '020', '050020']} /></div>
           </div>
         </InfoPage.Part>
+
+        <InfoPage.Part title="批量显示 names">
+          <Flex vertical gap={12}>
+            <p>默认渲染：<AddressEnum names={['010', '020', '050020']} /></p>
+            <AddressEnum names={['010', '020']}>
+              {(outputs, { labels }) => (
+                <Flex gap={8} wrap="wrap">
+                  {labels.map(label => (
+                    <span key={label} style={{ padding: '4px 8px', background: '#f6ffed', borderRadius: '4px' }}>
+                      {label}
+                    </span>
+                  ))}
+                </Flex>
+              )}
+            </AddressEnum>
+          </Flex>
+        </InfoPage.Part>
         
         <InfoPage.Part title="错误处理">
           <p>不存在的城市编码 999999：<AddressEnum name="999999" /></p>
@@ -486,7 +957,7 @@ render(<BaseExample />);
 ```
 
 - FunctionEnum 职能枚举显示
-- 用于显示职能名称的枚举组件，支持国际化、自定义渲染等功能
+- 用于显示职能名称的枚举组件，支持国际化、自定义渲染及 names 批量显示
 - _SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd),remoteLoader(@kne/remote-loader)
 
 ```jsx
@@ -555,8 +1026,26 @@ const BaseExample = createWithRemoteLoader({
             <div><strong>姓名：</strong>李四</div>
             <div><strong>当前职能：</strong><FunctionEnum name="001001001" /></div>
             <div><strong>期望职能：</strong><FunctionEnum name="001001002" /></div>
+            <div><strong>可胜任职能：</strong><FunctionEnum names={['001001001', '001001002', '001001003']} /></div>
           </div>
         </InfoPage.Part>
+
+        <InfoPage.Part title="批量显示 names">
+          <Flex vertical gap={12}>
+            <p>默认渲染：<FunctionEnum names={['001001001', '001001002', '001001003']} /></p>
+            <FunctionEnum names={['001001001', '001001002']}>
+              {(items, { labels }) => (
+                <Flex gap={8} wrap="wrap">
+                  {labels.map(label => (
+                    <span key={label} style={{ padding: '4px 8px', background: '#e6f7ff', borderRadius: '4px' }}>
+                      {label}
+                    </span>
+                  ))}
+                </Flex>
+              )}
+            </FunctionEnum>
+          </Flex>
+        </InfoPage.Part>
         
         <InfoPage.Part title="国际化支持">
           <FunctionEnum name="001001003">
@@ -580,7 +1069,7 @@ render(<BaseExample />);
 ```
 
 - IndustryEnum 行业枚举显示
-- 用于显示行业名称的枚举组件，支持国际化、自定义渲染等功能
+- 用于显示行业名称的枚举组件，支持国际化、自定义渲染及 names 批量显示
 - _SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd),remoteLoader(@kne/remote-loader)
 
 ```jsx
@@ -639,15 +1128,27 @@ const BaseExample = createWithRemoteLoader({
         </InfoPage.Part>
         
         <InfoPage.Part title="行业标签展示">
-          <Flex gap={8}>
-            <IndustryEnum name="001">
-              {(item) => item && <span style={{ padding: '4px 8px', background: '#e6f7ff', borderRadius: '4px' }}>{item.label}</span>}
-            </IndustryEnum>
-            <IndustryEnum name="003">
-              {(item) => item && <span style={{ padding: '4px 8px', background: '#f6ffed', borderRadius: '4px' }}>{item.label}</span>}
+          <Flex gap={8} wrap="wrap">
+            <IndustryEnum names={['001', '003', '004']}>
+              {(items, { labels }) => labels.map(label => (
+                <span key={label} style={{ padding: '4px 8px', background: '#e6f7ff', borderRadius: '4px' }}>
+                  {label}
+                </span>
+              ))}
             </IndustryEnum>
-            <IndustryEnum name="004">
-              {(item) => item && <span style={{ padding: '4px 8px', background: '#fff7e6', borderRadius: '4px' }}>{item.label}</span>}
+          </Flex>
+        </InfoPage.Part>
+
+        <InfoPage.Part title="批量显示 names">
+          <Flex vertical gap={12}>
+            <p>默认渲染（逗号分隔）：<IndustryEnum names={['001', '003', '004']} /></p>
+            <IndustryEnum names={['001', '004']}>
+              {(items, { labels, locale }) => (
+                <div>
+                  <div style={{ marginBottom: 8 }}>当前语言：{locale}</div>
+                  <div>{labels.join(' · ')}</div>
+                </div>
+              )}
             </IndustryEnum>
           </Flex>
         </InfoPage.Part>
@@ -661,7 +1162,7 @@ render(<BaseExample />);
 ```
 
 - EnumDisplay 通用枚举显示
-- 通用枚举显示组件，支持自定义数据源、国际化、缓存等功能
+- 通用枚举显示组件，支持自定义数据源、国际化、缓存及 names 批量显示
 - _SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd),remoteLoader(@kne/remote-loader)
 
 ```jsx
@@ -734,13 +1235,63 @@ const BaseExample = createWithRemoteLoader({
             <div><strong>姓名：</strong>赵六</div>
             <div><strong>最高学历：</strong><EnumDisplay name="3" type="education" {...educationEnumApi} /></div>
             <div><strong>第二学历：</strong><EnumDisplay name="2" type="education" {...educationEnumApi} /></div>
+            <div><strong>全部学历：</strong><EnumDisplay names={['3', '2', '1']} type="education" {...educationEnumApi} /></div>
           </div>
         </InfoPage.Part>
+
+        <InfoPage.Part title="批量显示 names">
+          <Flex vertical gap={12}>
+            <p>默认渲染（label 数组 toString，逗号分隔）：</p>
+            <p>学历编码 ['1', '2', '3']：<EnumDisplay names={['1', '2', '3']} type="education" {...educationEnumApi} /></p>
+            <p>学历编码 ['1', '3']：<EnumDisplay names={['1', '3']} type="education" {...educationEnumApi} /></p>
+            <p>空数组：<EnumDisplay names={[]} type="education" {...educationEnumApi} /></p>
+          </Flex>
+        </InfoPage.Part>
+
+        <InfoPage.Part title="names 自定义渲染">
+          <EnumDisplay names={['1', '2', '3']} type="education" {...educationEnumApi}>
+            {(items, { labels, mapping, locale }) => (
+              <Flex vertical gap={8}>
+                <div>当前语言：{locale}</div>
+                <div>labels：{labels.join(' / ')}</div>
+                <Flex gap={8} wrap="wrap">
+                  {items.map((item, index) => item && (
+                    <span
+                      key={item.code}
+                      style={{ padding: '4px 8px', background: '#f0f5ff', borderRadius: '4px' }}
+                    >
+                      {item.label}
+                      {mapping.get(item.code)?.enName && &#96; (${mapping.get(item.code).enName})&#96;}
+                    </span>
+                  ))}
+                </Flex>
+              </Flex>
+            )}
+          </EnumDisplay>
+        </InfoPage.Part>
         
         <InfoPage.Part title="错误处理">
-          <EnumDisplay name="999" type="education" {...educationEnumApi}>
-            {(item) => <span>{item ? item.label : '未知学历'}</span>}
-          </EnumDisplay>
+          <Flex vertical gap={12}>
+            <p>单个无效编码：</p>
+            <EnumDisplay name="999" type="education" {...educationEnumApi}>
+              {(item) => <span>{item ? item.label : '未知学历'}</span>}
+            </EnumDisplay>
+            <p>批量含无效编码（默认跳过无效项）：</p>
+            <EnumDisplay names={['1', '999', '3']} type="education" {...educationEnumApi} />
+            <p>批量含无效编码（自定义处理）：</p>
+            <EnumDisplay names={['1', '999', '3']} type="education" {...educationEnumApi}>
+              {(items, { labels }) => (
+                <span>
+                  {items.map((item, index) => (
+                    <span key={index}>
+                      {index > 0 && '、'}
+                      {item ? item.label : '未知'}
+                    </span>
+                  ))}
+                </span>
+              )}
+            </EnumDisplay>
+          </Flex>
         </InfoPage.Part>
       </InfoPage>
     </PureGlobal>
@@ -795,6 +1346,48 @@ render(<BaseExample />);
 }
 ```
 
+#### 值回显
+
+`value` 每项需包含 `id`（职能编码）和 `name`（显示名称）。编辑场景下后端通常只返回编码，组件会在 options 加载后自动解析 name：
+
+```javascript
+// 方式一：仅传编码，组件加载 options 后自动解析 name
+const value = ['001001001', '001001002'];
+// 或对象形式
+const value = [{ id: '001001001' }, { id: '001001002' }];
+
+// 方式二：单选回显
+const singleValue = { id: '001001001' };
+// 或字符串编码
+const singleValue = '001001001';
+
+// 方式三：结合 FunctionEnum name，单选编码回显
+<FunctionEnum name="001001001">
+  {(item) => (
+    <SelectFunction
+      single
+      value={enumItemToSelectValue(item)}
+      onChange={setValue}
+    />
+  )}
+</FunctionEnum>
+
+// 方式四：结合 FunctionEnum names，多选编码数组回显（推荐）
+const savedCodes = ['001001001', '001001002'];
+
+<FunctionEnum names={savedCodes}>
+  {(items) => {
+    const resolved = enumItemsToSelectValue(items);
+    return (
+      <SelectFunction
+        value={value ?? resolved}
+        onChange={setValue}
+      />
+    );
+  }}
+</FunctionEnum>
+```
+
 ---
 
 ### SelectIndustry 行业选择器
@@ -839,6 +1432,48 @@ render(<BaseExample />);
 }
 ```
 
+#### 值回显
+
+`value` 每项需包含 `id`（行业编码）和 `name`（显示名称）。编辑场景下后端通常只返回编码，组件会在 options 加载后自动解析 name：
+
+```javascript
+// 方式一：仅传编码，组件加载 options 后自动解析 name
+const value = ['001', '003'];
+// 或对象形式
+const value = [{ id: '001' }, { id: '003' }];
+
+// 方式二：单选回显
+const singleValue = { id: '001' };
+// 或字符串编码
+const singleValue = '001';
+
+// 方式三：结合 IndustryEnum name，单选编码回显
+<IndustryEnum name="001">
+  {(item) => (
+    <SelectIndustry
+      single
+      value={enumItemToSelectValue(item)}
+      onChange={setValue}
+    />
+  )}
+</IndustryEnum>
+
+// 方式四：结合 IndustryEnum names，多选编码数组回显（推荐）
+const savedCodes = ['001', '003'];
+
+<IndustryEnum names={savedCodes}>
+  {(items) => {
+    const resolved = enumItemsToSelectValue(items);
+    return (
+      <SelectIndustry
+        value={value ?? resolved}
+        onChange={setValue}
+      />
+    );
+  }}
+</IndustryEnum>
+```
+
 ---
 
 ### SelectAddress 城市选择器
@@ -894,6 +1529,46 @@ render(<BaseExample />);
 }
 ```
 
+#### 值回显
+
+编辑场景下后端通常只返回编码，组件会在数据加载后自动解析 label：
+
+```javascript
+// 方式一：仅传编码，组件加载数据后自动解析 label
+const value = [{ value: '010' }, { value: '020' }];
+
+// 方式二：单选回显
+const singleValue = { value: '010' };
+// 或字符串编码
+const singleValue = '010';
+
+// 方式三：结合 AddressEnum name，单选编码回显
+<AddressEnum name="010">
+  {(output) => (
+    <SelectAddress
+      single
+      value={addressEnumToSelectValueSingle(output)}
+      onChange={setValue}
+    />
+  )}
+</AddressEnum>
+
+// 方式四：结合 AddressEnum names，多选编码数组回显（推荐）
+const savedCodes = ['010', '020'];
+
+<AddressEnum names={savedCodes}>
+  {(outputs) => {
+    const resolved = addressEnumToSelectValue(outputs);
+    return (
+      <SelectAddress
+        value={value ?? resolved}
+        onChange={setValue}
+      />
+    );
+  }}
+</AddressEnum>
+```
+
 ---
 
 ### AddressEnum 地址枚举显示组件
@@ -904,7 +1579,8 @@ render(<BaseExample />);
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|-------|------|
-| name | string | - | 城市编码，必需 |
+| name | string | - | 城市编码，与 names 二选一 |
+| names | string[] | - | 城市编码数组，与 name 二选一，默认 label 数组 toString 输出 |
 | displayParent | boolean | false | 是否显示父级城市名称 |
 | force | boolean | false | 是否强制刷新缓存 |
 | children | function | - | 自定义渲染函数 |
@@ -913,14 +1589,19 @@ render(<BaseExample />);
 #### 自定义渲染函数
 
 ```javascript
+// 单个编码 name
 children={({ city, parent }, { displayParent, locale, getLabelForLocal }) => {
   // city: 城市数据对象
   // parent: 父级城市数据对象
-  // displayParent: 是否显示父级
-  // locale: 当前语言环境
-  // getLabelForLocal: 获取本地化标签的函数
   return <span>{getLabelForLocal(city, locale)}</span>;
 }}
+
+// 批量编码 names
+children={(outputs, { labels, locale, getLabelForLocal }) => {
+  // outputs: [{ city, parent }, ...] 数组
+  // labels: 有效项的 label 字符串数组
+  return <span>{labels.join('、')}</span>;
+}}
 ```
 
 #### 静态方法
@@ -936,16 +1617,16 @@ children={({ city, parent }, { displayParent, locale, getLabelForLocal }) => {
 // 基本用法
 <AddressEnum name="010" />
 
+// 批量显示
+<AddressEnum names={['010', '020']} />
+
 // 显示父级
 <AddressEnum name="010" displayParent />
 
-// 自定义渲染
-<AddressEnum name="010">
-  {({ city, parent }, { getLabelForLocal, locale }) => (
-    <div>
-      {parent && <span>{getLabelForLocal(parent, locale)} · </span>}
-      {getLabelForLocal(city, locale)}
-    </div>
+// 结合 SelectAddress 值回显
+<AddressEnum names={['010', '020']}>
+  {(outputs) => (
+    <SelectAddress value={addressEnumToSelectValue(outputs)} />
   )}
 </AddressEnum>
 ```
@@ -960,7 +1641,8 @@ children={({ city, parent }, { displayParent, locale, getLabelForLocal }) => {
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|-------|------|
-| name | string | - | 职能编码，必需 |
+| name | string | - | 职能编码，与 names 二选一 |
+| names | string[] | - | 职能编码数组，与 name 二选一，默认 label 数组 toString 输出 |
 | force | boolean | false | 是否强制刷新缓存 |
 | children | function | - | 自定义渲染函数 |
 | api | object | - | 自定义 API 配置 |
@@ -968,12 +1650,21 @@ children={({ city, parent }, { displayParent, locale, getLabelForLocal }) => {
 #### 自定义渲染函数
 
 ```javascript
-children={(item, { locale, mapping }) => {
+// 单个编码 name
+children={(item, { locale, mapping, labels, names }) => {
   // item: 职能数据对象，包含 label, chName, enName 等
   // locale: 当前语言环境
   // mapping: 所有职能数据的 Map 对象
+  // labels: 当前项的 label 数组
   return <span>{item.label}</span>;
 }}
+
+// 批量编码 names
+children={(items, { locale, mapping, labels, names }) => {
+  // items: 职能数据对象数组，无效编码对应 undefined
+  // labels: 有效项的 label 字符串数组
+  return <span>{labels.join('、')}</span>;
+}}
 ```
 
 #### 静态方法
@@ -989,6 +1680,9 @@ children={(item, { locale, mapping }) => {
 // 基本用法
 <FunctionEnum name="001001001" />
 
+// 批量显示
+<FunctionEnum names={['001001001', '001001002', '001001003']} />
+
 // 自定义渲染
 <FunctionEnum name="001001001">
   {(item, { locale }) => (
@@ -998,6 +1692,11 @@ children={(item, { locale, mapping }) => {
     </div>
   )}
 </FunctionEnum>
+
+// 批量自定义渲染
+<FunctionEnum names={['001001001', '001001002']}>
+  {(items, { labels }) => labels.join(' / ')}
+</FunctionEnum>
 ```
 
 ---
@@ -1010,7 +1709,8 @@ children={(item, { locale, mapping }) => {
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|-------|------|
-| name | string | - | 行业编码，必需 |
+| name | string | - | 行业编码，与 names 二选一 |
+| names | string[] | - | 行业编码数组，与 name 二选一，默认 label 数组 toString 输出 |
 | force | boolean | false | 是否强制刷新缓存 |
 | children | function | - | 自定义渲染函数 |
 | api | object | - | 自定义 API 配置 |
@@ -1018,12 +1718,21 @@ children={(item, { locale, mapping }) => {
 #### 自定义渲染函数
 
 ```javascript
-children={(item, { locale, mapping }) => {
+// 单个编码 name
+children={(item, { locale, mapping, labels, names }) => {
   // item: 行业数据对象，包含 label, chName, enName 等
   // locale: 当前语言环境
   // mapping: 所有行业数据的 Map 对象
+  // labels: 当前项的 label 数组
   return <span>{item.label}</span>;
 }}
+
+// 批量编码 names
+children={(items, { locale, mapping, labels, names }) => {
+  // items: 行业数据对象数组，无效编码对应 undefined
+  // labels: 有效项的 label 字符串数组
+  return <span>{labels.join('、')}</span>;
+}}
 ```
 
 #### 静态方法
@@ -1039,6 +1748,9 @@ children={(item, { locale, mapping }) => {
 // 基本用法
 <IndustryEnum name="001" />
 
+// 批量显示
+<IndustryEnum names={['001', '003', '004']} />
+
 // 自定义渲染
 <IndustryEnum name="001">
   {(item, { locale }) => (
@@ -1048,6 +1760,11 @@ children={(item, { locale, mapping }) => {
     </div>
   )}
 </IndustryEnum>
+
+// 批量自定义渲染
+<IndustryEnum names={['001', '004']}>
+  {(items, { labels }) => labels.join(' · ')}
+</IndustryEnum>
 ```
 
 ---
@@ -1060,7 +1777,8 @@ children={(item, { locale, mapping }) => {
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|-------|------|
-| name | string | - | 枚举值编码，必需 |
+| name | string | - | 单个枚举值编码，与 names 二选一 |
+| names | string[] | - | 多个枚举值编码，与 name 二选一，默认 label 数组 toString 输出 |
 | type | string | - | 枚举类型标识 |
 | cache | string | 'ENUM_DATA' | 缓存键名 |
 | force | boolean | false | 是否强制刷新缓存 |
@@ -1092,12 +1810,22 @@ api={{
 #### 自定义渲染函数
 
 ```javascript
-children={(item, { locale, mapping }) => {
+// 单个编码 name
+children={(item, { locale, mapping, labels, names }) => {
   // item: 枚举数据对象
   // locale: 当前语言环境
   // mapping: 所有枚举数据的 Map 对象
+  // labels: 当前项的 label 数组
   return <span>{item.label}</span>;
 }}
+
+// 批量编码 names
+children={(items, { locale, mapping, labels, names }) => {
+  // items: 枚举数据对象数组，无效编码对应 undefined
+  // labels: 有效项的 label 字符串数组
+  // names: 传入的编码数组
+  return <span>{labels.join('、')}</span>;
+}}
 ```
 
 #### 使用示例
@@ -1116,6 +1844,13 @@ children={(item, { locale, mapping }) => {
   }}
 />
 
+// 批量显示
+<EnumDisplay
+  names={['1', '2', '3']}
+  type="education"
+  api={educationEnumApi}
+/>
+
 // 自定义 getLabel
 <EnumDisplay
   name="1"
@@ -1125,6 +1860,40 @@ children={(item, { locale, mapping }) => {
     return locale === 'en-US' ? item.enName : item.name;
   }}
 />
+
+// 批量自定义渲染
+<EnumDisplay names={['1', '2', '3']} type="education" api={api}>
+  {(items, { labels }) => labels.join(' / ')}
+</EnumDisplay>
+```
+
+#### 工具函数
+
+用于将 `names={[code, code]}` 解析结果转为选择器 `value`：
+
+| 函数 | 说明 |
+|------|------|
+| `enumItemsToSelectValue(items, options?)` | 将 FunctionEnum / IndustryEnum 的 items 转为 `{ id, name }[]`，可选 `valueKey` / `labelKey` |
+| `enumItemToSelectValue(item, options?)` | 单选：将 FunctionEnum / IndustryEnum 的 item 转为 `{ id, name }` |
+| `addressEnumToSelectValue(outputs)` | 将 AddressEnum 解析结果转为 SelectAddress 的 `{ value, label }[]`（支持 name 单值或 names 数组） |
+| `addressEnumToSelectValueSingle(output)` | 单选：将 AddressEnum name 解析结果转为 `{ value, label }` |
+
+```javascript
+import { enumItemsToSelectValue, addressEnumToSelectValue } from '@kne/super-select-plus';
+
+// 职能/行业选择器回显
+<FunctionEnum names={['001001001', '001001002']}>
+  {(items) => (
+    <SelectFunction value={enumItemsToSelectValue(items)} />
+  )}
+</FunctionEnum>
+
+// 城市选择器回显
+<AddressEnum names={['010', '020']}>
+  {(outputs) => (
+    <SelectAddress value={addressEnumToSelectValue(outputs)} />
+  )}
+</AddressEnum>
 ```
 
 ---