@kne-components/entry-selector 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/build/asset-manifest.json +12 -12
  2. package/build/index.html +1 -1
  3. package/build/remoteEntry.js +1 -1
  4. package/build/remoteEntry.js.map +1 -1
  5. package/build/static/css/{198.47b22c40.chunk.css → 198.5c6620fc.chunk.css} +2 -2
  6. package/build/static/css/198.5c6620fc.chunk.css.map +1 -0
  7. package/build/static/css/{268.29761d26.chunk.css → 268.b54078b9.chunk.css} +2 -2
  8. package/build/static/css/268.b54078b9.chunk.css.map +1 -0
  9. package/build/static/js/{198.ab5e0aa6.chunk.js → 198.2017e521.chunk.js} +2 -2
  10. package/build/static/js/{198.ab5e0aa6.chunk.js.map → 198.2017e521.chunk.js.map} +1 -1
  11. package/build/static/js/{268.cbadad83.chunk.js → 268.0ab44ef5.chunk.js} +2 -2
  12. package/build/static/js/{268.cbadad83.chunk.js.map → 268.0ab44ef5.chunk.js.map} +1 -1
  13. package/build/static/js/{main.9be89edd.js → main.4d5fcd03.js} +2 -2
  14. package/build/static/js/{main.9be89edd.js.map → main.4d5fcd03.js.map} +1 -1
  15. package/package.json +1 -1
  16. package/build/static/css/198.47b22c40.chunk.css.map +0 -1
  17. package/build/static/css/268.29761d26.chunk.css.map +0 -1
package/build/static/js/{198.ab5e0aa6.chunk.js → 198.2017e521.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- "use strict";(globalThis.webpackChunk_kne_components_entry_selector=globalThis.webpackChunk_kne_components_entry_selector||[]).push([[198],{69666(e,t,n){n.d(t,{A:()=>l});var r=n(82879),a=(n(72241),n(55199));const l={name:"entry-selector",summary:"<p>EntrySelector \u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002</p>\n<h3>\u4e3b\u8981\u529f\u80fd</h3>\n<ul>\n<li><strong>\u53cc\u5217\u8868\u5c55\u793a</strong>\uff1a\u6e05\u6670\u5730\u5206\u79bb\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee</li>\n<li><strong>\u62d6\u62fd\u6392\u5e8f</strong>\uff1a\u652f\u6301\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u62d6\u62fd\u6392\u5e8f</li>\n<li><strong>\u641c\u7d22\u8fc7\u6ee4</strong>\uff1a\u53ef\u4ee5\u901a\u8fc7\u5173\u952e\u8bcd\u641c\u7d22\u8fc7\u6ee4\u6761\u76ee</li>\n<li><strong>\u81ea\u5b9a\u4e49\u6e32\u67d3</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6761\u76ee\u7684\u6e32\u67d3\u65b9\u5f0f</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u8bed\u8a00\u652f\u6301</li>\n<li><strong>\u6dfb\u52a0\u65b0\u6761\u76ee</strong>\uff1a\u652f\u6301\u6dfb\u52a0\u4e0d\u5728\u9884\u8bbe\u5217\u8868\u4e2d\u7684\u65b0\u6761\u76ee</li>\n</ul>\n<h3>\u4f7f\u7528\u573a\u666f</h3>\n<p>EntrySelector \u9002\u7528\u4e8e\u9700\u8981\u4ece\u9884\u5b9a\u4e49\u5217\u8868\u4e2d\u9009\u62e9\u591a\u4e2a\u6761\u76ee\u5e76\u8fdb\u884c\u6392\u5e8f\u7684\u573a\u666f\uff0c\u4f8b\u5982\uff1a</p>\n<ul>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u6587\u7ae0\u5206\u7c7b</li>\n<li>\u7ba1\u7406\u4ea7\u54c1\u6807\u7b7e</li>\n<li>\u914d\u7f6e\u7528\u6237\u6743\u9650</li>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u5c55\u793a\u9879\u76ee</li>\n</ul>\n<h3>\u57fa\u672c\u539f\u7406</h3>\n<p>\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u5df2\u9009\u6761\u76ee\u5217\u8868\u548c\u53ef\u9009\u6761\u76ee\u5217\u8868\u4e24\u4e2a\u72b6\u6001\uff0c\u901a\u8fc7\u7528\u6237\u4ea4\u4e92\u5728\u8fd9\u4e24\u4e2a\u5217\u8868\u4e4b\u95f4\u79fb\u52a8\u6761\u76ee\u3002\u7ec4\u4ef6\u4f7f\u7528 react-sortablejs\n\u5b9e\u73b0\u62d6\u62fd\u6392\u5e8f\u529f\u80fd\uff0c\u5e76\u652f\u6301\u901a\u8fc7\u641c\u7d22\u6846\u8fc7\u6ee4\u6761\u76ee\u5217\u8868\u3002</p>",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector",api:"<h3>\u7ec4\u4ef6\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>\u5df2\u9009\u6761\u76ee\u5217\u8868\uff0c\u6bcf\u4e2a\u6761\u76ee\u5e94\u5305\u542b\u552f\u4e00id\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>\u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u65b0\u7684value\u503c</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>\u6dfb\u52a0\u65b0\u6761\u76ee\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001value\u548conChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u6761\u76ee\u5217\u8868\u7684API\u51fd\u6570\uff0c\u7528\u4e8e\u52a0\u8f7d\u53ef\u9009\u6761\u76ee\u6570\u636e</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>\u6761\u76ee\u64cd\u4f5c\u9009\u9879\u5217\u8868\uff0c\u7528\u4e8eButtonGroup\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bel\u3001target\u3001fetchApi\u3001onChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bfetchApi\u3001el\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bsearchProps\u3001setSearchProps\u3001fetchApi\u3001options\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u914d\u7f6e\u641c\u7d22\u529f\u80fd</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u6587\u672c\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5df2\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u53ef\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5217\u8868\u6807\u9898\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001searchProps\u3001setSearchProps\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>\u8bbe\u7f6e\u6eda\u52a8\u533a\u57df\u7684\u6700\u5927\u9ad8\u5ea6\uff08\u5355\u4f4d\uff1a\u50cf\u7d20\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u652f\u6301</h3>\n<p>\u7ec4\u4ef6\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u4e24\u79cd\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4f7f\u7528\u4e2d\u6587\u3002\u53ef\u901a\u8fc7createWithIntlProvider\u914d\u7f6e\u56fd\u9645\u5316\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u8bed\u8a00</th>\n<th>\u4ee3\u7801</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>\u4e2d\u6587</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>\u82f1\u6587</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u6587\u672c\u952e\u503c</h3>\n<table>\n<thead>\n<tr>\n<th>\u952e\u540d</th>\n<th>\u4e2d\u6587</th>\n<th>\u82f1\u6587</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>\u6dfb\u52a0</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>\u5df2\u9009</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5217\u8868</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u8bf7\u8f93\u5165\u5173\u952e\u5b57</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"entry_selector_f371f",style:".entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"\u57fa\u7840\u7528\u6cd5",description:"\u5c55\u793aEntrySelector\u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528\uff0c\u5305\u62ec\u6761\u76ee\u9009\u62e9\u3001\u641c\u7d22\u8fc7\u6ee4\u548c\u62d6\u62fd\u6392\u5e8f\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// \u6a21\u62df\u9762\u8bd5\u9898\u5e93\u6570\u636e\nconst mockQuestionDatabase = [\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1', category: '\u4e2a\u4eba\u4ecb\u7ecd', difficulty: '\u7b80\u5355' },\n { id: 2, title: '\u4f60\u8ba4\u4e3a\u81ea\u5df1\u6700\u5927\u7684\u4f18\u70b9\u548c\u7f3a\u70b9\u662f\u4ec0\u4e48\uff1f', category: '\u6027\u683c\u5206\u6790', difficulty: '\u7b80\u5355' },\n { id: 3, title: '\u8bf7\u63cf\u8ff0\u4e00\u6b21\u4f60\u6210\u529f\u89e3\u51b3\u56e2\u961f\u51b2\u7a81\u7684\u7ecf\u5386', category: '\u56e2\u961f\u534f\u4f5c', difficulty: '\u4e2d\u7b49' },\n { id: 4, title: '\u4f60\u5982\u4f55\u5904\u7406\u5de5\u4f5c\u4e2d\u7684\u9ad8\u538b\u60c5\u51b5\uff1f\u8bf7\u4e3e\u4f8b\u8bf4\u660e', category: '\u538b\u529b\u7ba1\u7406', difficulty: '\u4e2d\u7b49' },\n { id: 5, title: '\u8bf7\u5206\u4eab\u4e00\u6b21\u4f60\u5feb\u901f\u4f5c\u51fa\u51b3\u7b56\u7684\u7ecf\u9a8c', category: '\u51b3\u7b56\u80fd\u529b', difficulty: '\u4e2d\u7b49' },\n { id: 6, title: '\u4f60\u5982\u4f55\u770b\u5f85\u52a0\u73ed\uff1f\u5982\u4f55\u5e73\u8861\u5de5\u4f5c\u4e0e\u751f\u6d3b\uff1f', category: '\u5de5\u4f5c\u6001\u5ea6', difficulty: '\u7b80\u5355' },\n { id: 7, title: '\u63cf\u8ff0\u4e00\u6b21\u4f60\u4e3b\u52a8\u627f\u62c5\u8d23\u4efb\u5e76\u8d85\u51fa\u9884\u671f\u7684\u9879\u76ee', category: '\u4e3b\u52a8\u6027', difficulty: '\u56f0\u96be' },\n { id: 8, title: '\u4f60\u5982\u4f55\u8ba9\u56e2\u961f\u6210\u5458\u6709\u6548\u9ad8\u8d28\u5b8c\u6210\u5de5\u4f5c\uff1f', category: '\u56e2\u961f\u7ba1\u7406', difficulty: '\u56f0\u96be' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(`\u5df2\u9009\u62e9 ${value.length} \u9053\u9898\u76ee`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // \u6a21\u62dfAPI\u8bf7\u6c42\u5ef6\u8fdf\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // \u6839\u636e\u641c\u7d22\u5173\u952e\u8bcd\u8fc7\u6ee4\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"\u641c\u7d22\u9898\u76ee\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u9898\u76ee\uff08\u53ef\u62d6\u62fd\u6392\u5e8f\uff09\"\n listTitle=\"\u9898\u76ee\u5e93\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:a}]},{title:"\u81ea\u5b9a\u4e49\u6e32\u67d3",description:"\u5c55\u793a\u5982\u4f55\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee\uff0c\u5b9e\u73b0\u66f4\u4e30\u5bcc\u7684\u4ea4\u4e92\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// \u6a21\u62df\u4ea7\u54c1\u7279\u6027\u6570\u636e\nconst mockFeatures = [\n { id: 1, title: '\u7528\u6237\u6ce8\u518c\u767b\u5f55', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u57fa\u7840\u529f\u80fd' },\n { id: 2, title: '\u5546\u54c1\u641c\u7d22\u4e0e\u7b5b\u9009', status: '\u5f00\u53d1\u4e2d', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 3, title: '\u8d2d\u7269\u8f66\u529f\u80fd', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 4, title: '\u8ba2\u5355\u7ba1\u7406', status: '\u5f85\u5f00\u53d1', priority: 'medium', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 5, title: '\u652f\u4ed8\u96c6\u6210', status: '\u5f85\u5f00\u53d1', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 6, title: '\u7528\u6237\u8bc4\u4ef7\u7cfb\u7edf', status: '\u5f00\u53d1\u4e2d', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' },\n { id: 7, title: '\u6570\u636e\u7edf\u8ba1\u9762\u677f', status: '\u5f85\u5f00\u53d1', priority: 'low', category: '\u589e\u503c\u529f\u80fd' },\n { id: 8, title: '\u6d88\u606f\u63a8\u9001', status: '\u5df2\u5b8c\u6210', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '\u5df2\u5b8c\u6210': 'green',\n '\u5f00\u53d1\u4e2d': 'blue',\n '\u5f85\u5f00\u53d1': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u7279\u6027\u540d\u79f0\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u7279\u6027\uff08\u9700\u6392\u671f\u5f00\u53d1\uff09\"\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\uff1a\u5c55\u793a\u4f18\u5148\u7ea7\u5f00\u5173\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>\u9ad8\u4f18\u5148\u7ea7</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(`\u5df2${checked ? '\u5f00\u542f' : '\u5173\u95ed'} \"${item.title}\" \u7684\u4f18\u5148\u7ea7`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\uff1a\u5c55\u793a\u6807\u7b7e\u548c\u72b6\u6001\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '\u9ad8' : item.priority === 'medium' ? '\u4e2d' : '\u4f4e'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: () => {\n message.info(`\u67e5\u770b\u7279\u6027\uff1a${item.title}`);\n }\n },\n {\n children: '\u7f16\u8f91',\n onClick: () => {\n message.info(`\u7f16\u8f91\u7279\u6027\uff1a${item.title}`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:a}]},{title:"\u5b8c\u6574\u529f\u80fd",description:"\u5c55\u793aEntrySelector\u7684\u5b8c\u6574\u529f\u80fd\uff0c\u5305\u62ec\u6dfb\u52a0\u65b0\u6761\u76ee\u3001\u64cd\u4f5c\u9009\u9879\u3001\u81ea\u5b9a\u4e49\u6807\u9898\u7b49",code:"const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// \u6a21\u62df\u5019\u9009\u4eba\u6280\u80fd\u6570\u636e\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 3, title: 'React', level: 'advanced', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 6, title: 'Python', level: 'intermediate', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '\u6570\u636e\u5e93' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '\u6570\u636e\u5e93' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '\u8fd0\u7ef4\u5de5\u5177' },\n { id: 10, title: 'Git', level: 'advanced', category: '\u7248\u672c\u63a7\u5236' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '\u7cbe\u901a',\n intermediate: '\u719f\u7ec3',\n beginner: '\u4e86\u89e3'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // \u5904\u7406\u6dfb\u52a0\u65b0\u6280\u80fd\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // \u63d0\u4ea4\u65b0\u6280\u80fd\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(`\u5df2\u6dfb\u52a0\u6280\u80fd\uff1a${values.title}`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('\u8868\u5355\u9a8c\u8bc1\u5931\u8d25:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // \u6dfb\u52a0\u65b0\u6761\u76ee\u529f\u80fd\n onAdd={handleAdd}\n // API\u914d\u7f6e\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // \u641c\u7d22\u914d\u7f6e\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u6280\u80fd\u540d\u79f0\u6216\u5206\u7c7b\"\n // \u81ea\u5b9a\u4e49\u6807\u9898\n selectedTitle=\"\u5019\u9009\u4eba\u6280\u80fd\u6e05\u5355\uff08\u53ef\u62d6\u62fd\u8c03\u6574\u987a\u5e8f\uff09\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n \u6280\u80fd\u5e93 ({fetchApi.data?.totalCount || 0} \u9879)\n </span>\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>\u65b0\u589e</Tag>}\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // \u64cd\u4f5c\u9009\u9879\n options={[\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>\u6280\u80fd\u7b49\u7ea7\uff1a{levelLabels[item.level]}</p>\n <p>\u6240\u5c5e\u5206\u7c7b\uff1a{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '\u6dfb\u52a0\u5230\u6536\u85cf',\n onClick: (e, item) => {\n message.success(`\u5df2\u6536\u85cf\u6280\u80fd\uff1a${item.title}`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* \u6dfb\u52a0\u65b0\u6280\u80fd\u7684\u5f39\u7a97 */}\n <Modal\n title=\"\u6dfb\u52a0\u65b0\u6280\u80fd\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"\u786e\u5b9a\"\n cancelText=\"\u53d6\u6d88\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"\u6280\u80fd\u540d\u79f0\"\n name=\"title\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6280\u80fd\u540d\u79f0' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1aGraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"\u719f\u7ec3\u7a0b\u5ea6\"\n name=\"level\"\n rules={[{ required: true, message: '\u8bf7\u9009\u62e9\u719f\u7ec3\u7a0b\u5ea6' }]}\n >\n <Select placeholder=\"\u8bf7\u9009\u62e9\">\n <Select.Option value=\"beginner\">\u4e86\u89e3</Select.Option>\n <Select.Option value=\"intermediate\">\u719f\u7ec3</Select.Option>\n <Select.Option value=\"advanced\">\u7cbe\u901a</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"\u6240\u5c5e\u5206\u7c7b\"\n name=\"category\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6240\u5c5e\u5206\u7c7b' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1a\u524d\u7aef\u5f00\u53d1\u3001\u540e\u7aef\u5f00\u53d1\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:n(13050)}]}]}}},11448(e,t,n){n(94922);var r=n(87558),a=n(55199),l=n(94312),o=n(13050),i=n(89261);window.PUBLIC_URL="/entry-selector";const d={url:"https://uc.fatalent.cn",tpl:"{{url}}/packages/@kne-components/{{remote}}/{{version}}/build"};var s=n(65457),c=n(94679),m=n(89170),p=(n(91296),n(46446));const u=m.Ay.ExampleRoutes,g=e=>{let{globalPreset:t,...n}=e;return(0,i.jsx)(c.HashRouter,{children:(0,i.jsx)(u,{...n,paths:[{key:"components",path:"/",title:"\u9996\u9875"}],preset:t,themeToken:t.themeToken,readme:p.default,pageProps:{menu:null}})})},h=s.createRoot(document.getElementById("root"));(async e=>{const t=await(async()=>{const e=(0,l.A)({errorHandler:e=>a.message.error(e)}),t={...d,remote:"components-core",defaultVersion:"0.4.51"};return(0,o.preset)({remotes:{default:t,"components-core":t,"components-iconfont":{...d,remote:"components-iconfont",defaultVersion:"0.2.1"},"entry-selector":{...d,remote:"entry-selector",defaultVersion:"0.2.4"}}}),(0,r.preset)({ajax:e,loading:(0,i.jsx)(a.Spin,{delay:500,style:{position:"absolute",left:"50%",padding:"10px",transform:"translateX(-50%)"}}),error:null,empty:(0,i.jsx)(a.Empty,{}),transformResponse:e=>{const{data:t}=e;return e.data={code:0===t.code?200:t.code,msg:t.msg,results:t.data},e}}),{ajax:e,enums:{},apis:{},themeToken:{colorPrimary:"#4183F0"}}})();h.render((0,i.jsx)(e,{themeToken:t.themeToken,globalPreset:t}))})(g)},72241(){}}]);
2
- //# sourceMappingURL=198.ab5e0aa6.chunk.js.map
1
+ "use strict";(globalThis.webpackChunk_kne_components_entry_selector=globalThis.webpackChunk_kne_components_entry_selector||[]).push([[198],{69666(e,t,n){n.d(t,{A:()=>l});var r=n(82879),a=(n(72241),n(55199));const l={name:"entry-selector",summary:"<p>EntrySelector \u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002</p>\n<h3>\u4e3b\u8981\u529f\u80fd</h3>\n<ul>\n<li><strong>\u53cc\u5217\u8868\u5c55\u793a</strong>\uff1a\u6e05\u6670\u5730\u5206\u79bb\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee</li>\n<li><strong>\u62d6\u62fd\u6392\u5e8f</strong>\uff1a\u652f\u6301\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u62d6\u62fd\u6392\u5e8f</li>\n<li><strong>\u641c\u7d22\u8fc7\u6ee4</strong>\uff1a\u53ef\u4ee5\u901a\u8fc7\u5173\u952e\u8bcd\u641c\u7d22\u8fc7\u6ee4\u6761\u76ee</li>\n<li><strong>\u81ea\u5b9a\u4e49\u6e32\u67d3</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6761\u76ee\u7684\u6e32\u67d3\u65b9\u5f0f</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u8bed\u8a00\u652f\u6301</li>\n<li><strong>\u6dfb\u52a0\u65b0\u6761\u76ee</strong>\uff1a\u652f\u6301\u6dfb\u52a0\u4e0d\u5728\u9884\u8bbe\u5217\u8868\u4e2d\u7684\u65b0\u6761\u76ee</li>\n</ul>\n<h3>\u4f7f\u7528\u573a\u666f</h3>\n<p>EntrySelector \u9002\u7528\u4e8e\u9700\u8981\u4ece\u9884\u5b9a\u4e49\u5217\u8868\u4e2d\u9009\u62e9\u591a\u4e2a\u6761\u76ee\u5e76\u8fdb\u884c\u6392\u5e8f\u7684\u573a\u666f\uff0c\u4f8b\u5982\uff1a</p>\n<ul>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u6587\u7ae0\u5206\u7c7b</li>\n<li>\u7ba1\u7406\u4ea7\u54c1\u6807\u7b7e</li>\n<li>\u914d\u7f6e\u7528\u6237\u6743\u9650</li>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u5c55\u793a\u9879\u76ee</li>\n</ul>\n<h3>\u57fa\u672c\u539f\u7406</h3>\n<p>\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u5df2\u9009\u6761\u76ee\u5217\u8868\u548c\u53ef\u9009\u6761\u76ee\u5217\u8868\u4e24\u4e2a\u72b6\u6001\uff0c\u901a\u8fc7\u7528\u6237\u4ea4\u4e92\u5728\u8fd9\u4e24\u4e2a\u5217\u8868\u4e4b\u95f4\u79fb\u52a8\u6761\u76ee\u3002\u7ec4\u4ef6\u4f7f\u7528 react-sortablejs\n\u5b9e\u73b0\u62d6\u62fd\u6392\u5e8f\u529f\u80fd\uff0c\u5e76\u652f\u6301\u901a\u8fc7\u641c\u7d22\u6846\u8fc7\u6ee4\u6761\u76ee\u5217\u8868\u3002</p>",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector",api:"<h3>\u7ec4\u4ef6\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>\u5df2\u9009\u6761\u76ee\u5217\u8868\uff0c\u6bcf\u4e2a\u6761\u76ee\u5e94\u5305\u542b\u552f\u4e00id\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>\u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u65b0\u7684value\u503c</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>\u6dfb\u52a0\u65b0\u6761\u76ee\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001value\u548conChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u6761\u76ee\u5217\u8868\u7684API\u51fd\u6570\uff0c\u7528\u4e8e\u52a0\u8f7d\u53ef\u9009\u6761\u76ee\u6570\u636e</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>\u6761\u76ee\u64cd\u4f5c\u9009\u9879\u5217\u8868\uff0c\u7528\u4e8eButtonGroup\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bel\u3001target\u3001fetchApi\u3001onChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bfetchApi\u3001el\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bsearchProps\u3001setSearchProps\u3001fetchApi\u3001options\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u914d\u7f6e\u641c\u7d22\u529f\u80fd</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u6587\u672c\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5df2\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u53ef\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5217\u8868\u6807\u9898\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001searchProps\u3001setSearchProps\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>\u8bbe\u7f6e\u6eda\u52a8\u533a\u57df\u7684\u6700\u5927\u9ad8\u5ea6\uff08\u5355\u4f4d\uff1a\u50cf\u7d20\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u652f\u6301</h3>\n<p>\u7ec4\u4ef6\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u4e24\u79cd\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4f7f\u7528\u4e2d\u6587\u3002\u53ef\u901a\u8fc7createWithIntlProvider\u914d\u7f6e\u56fd\u9645\u5316\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u8bed\u8a00</th>\n<th>\u4ee3\u7801</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>\u4e2d\u6587</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>\u82f1\u6587</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u6587\u672c\u952e\u503c</h3>\n<table>\n<thead>\n<tr>\n<th>\u952e\u540d</th>\n<th>\u4e2d\u6587</th>\n<th>\u82f1\u6587</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>\u6dfb\u52a0</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>\u5df2\u9009</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5217\u8868</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u8bf7\u8f93\u5165\u5173\u952e\u5b57</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"entry_selector_f371f",style:".entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"\u57fa\u7840\u7528\u6cd5",description:"\u5c55\u793aEntrySelector\u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528\uff0c\u5305\u62ec\u6761\u76ee\u9009\u62e9\u3001\u641c\u7d22\u8fc7\u6ee4\u548c\u62d6\u62fd\u6392\u5e8f\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// \u6a21\u62df\u9762\u8bd5\u9898\u5e93\u6570\u636e\nconst mockQuestionDatabase = [\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1', category: '\u4e2a\u4eba\u4ecb\u7ecd', difficulty: '\u7b80\u5355' },\n { id: 2, title: '\u4f60\u8ba4\u4e3a\u81ea\u5df1\u6700\u5927\u7684\u4f18\u70b9\u548c\u7f3a\u70b9\u662f\u4ec0\u4e48\uff1f', category: '\u6027\u683c\u5206\u6790', difficulty: '\u7b80\u5355' },\n { id: 3, title: '\u8bf7\u63cf\u8ff0\u4e00\u6b21\u4f60\u6210\u529f\u89e3\u51b3\u56e2\u961f\u51b2\u7a81\u7684\u7ecf\u5386', category: '\u56e2\u961f\u534f\u4f5c', difficulty: '\u4e2d\u7b49' },\n { id: 4, title: '\u4f60\u5982\u4f55\u5904\u7406\u5de5\u4f5c\u4e2d\u7684\u9ad8\u538b\u60c5\u51b5\uff1f\u8bf7\u4e3e\u4f8b\u8bf4\u660e', category: '\u538b\u529b\u7ba1\u7406', difficulty: '\u4e2d\u7b49' },\n { id: 5, title: '\u8bf7\u5206\u4eab\u4e00\u6b21\u4f60\u5feb\u901f\u4f5c\u51fa\u51b3\u7b56\u7684\u7ecf\u9a8c', category: '\u51b3\u7b56\u80fd\u529b', difficulty: '\u4e2d\u7b49' },\n { id: 6, title: '\u4f60\u5982\u4f55\u770b\u5f85\u52a0\u73ed\uff1f\u5982\u4f55\u5e73\u8861\u5de5\u4f5c\u4e0e\u751f\u6d3b\uff1f', category: '\u5de5\u4f5c\u6001\u5ea6', difficulty: '\u7b80\u5355' },\n { id: 7, title: '\u63cf\u8ff0\u4e00\u6b21\u4f60\u4e3b\u52a8\u627f\u62c5\u8d23\u4efb\u5e76\u8d85\u51fa\u9884\u671f\u7684\u9879\u76ee', category: '\u4e3b\u52a8\u6027', difficulty: '\u56f0\u96be' },\n { id: 8, title: '\u4f60\u5982\u4f55\u8ba9\u56e2\u961f\u6210\u5458\u6709\u6548\u9ad8\u8d28\u5b8c\u6210\u5de5\u4f5c\uff1f', category: '\u56e2\u961f\u7ba1\u7406', difficulty: '\u56f0\u96be' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(`\u5df2\u9009\u62e9 ${value.length} \u9053\u9898\u76ee`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // \u6a21\u62dfAPI\u8bf7\u6c42\u5ef6\u8fdf\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // \u6839\u636e\u641c\u7d22\u5173\u952e\u8bcd\u8fc7\u6ee4\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"\u641c\u7d22\u9898\u76ee\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u9898\u76ee\uff08\u53ef\u62d6\u62fd\u6392\u5e8f\uff09\"\n listTitle=\"\u9898\u76ee\u5e93\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:a}]},{title:"\u81ea\u5b9a\u4e49\u6e32\u67d3",description:"\u5c55\u793a\u5982\u4f55\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee\uff0c\u5b9e\u73b0\u66f4\u4e30\u5bcc\u7684\u4ea4\u4e92\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// \u6a21\u62df\u4ea7\u54c1\u7279\u6027\u6570\u636e\nconst mockFeatures = [\n { id: 1, title: '\u7528\u6237\u6ce8\u518c\u767b\u5f55', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u57fa\u7840\u529f\u80fd' },\n { id: 2, title: '\u5546\u54c1\u641c\u7d22\u4e0e\u7b5b\u9009', status: '\u5f00\u53d1\u4e2d', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 3, title: '\u8d2d\u7269\u8f66\u529f\u80fd', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 4, title: '\u8ba2\u5355\u7ba1\u7406', status: '\u5f85\u5f00\u53d1', priority: 'medium', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 5, title: '\u652f\u4ed8\u96c6\u6210', status: '\u5f85\u5f00\u53d1', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 6, title: '\u7528\u6237\u8bc4\u4ef7\u7cfb\u7edf', status: '\u5f00\u53d1\u4e2d', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' },\n { id: 7, title: '\u6570\u636e\u7edf\u8ba1\u9762\u677f', status: '\u5f85\u5f00\u53d1', priority: 'low', category: '\u589e\u503c\u529f\u80fd' },\n { id: 8, title: '\u6d88\u606f\u63a8\u9001', status: '\u5df2\u5b8c\u6210', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '\u5df2\u5b8c\u6210': 'green',\n '\u5f00\u53d1\u4e2d': 'blue',\n '\u5f85\u5f00\u53d1': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u7279\u6027\u540d\u79f0\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u7279\u6027\uff08\u9700\u6392\u671f\u5f00\u53d1\uff09\"\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\uff1a\u5c55\u793a\u4f18\u5148\u7ea7\u5f00\u5173\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>\u9ad8\u4f18\u5148\u7ea7</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(`\u5df2${checked ? '\u5f00\u542f' : '\u5173\u95ed'} \"${item.title}\" \u7684\u4f18\u5148\u7ea7`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\uff1a\u5c55\u793a\u6807\u7b7e\u548c\u72b6\u6001\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '\u9ad8' : item.priority === 'medium' ? '\u4e2d' : '\u4f4e'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: () => {\n message.info(`\u67e5\u770b\u7279\u6027\uff1a${item.title}`);\n }\n },\n {\n children: '\u7f16\u8f91',\n onClick: () => {\n message.info(`\u7f16\u8f91\u7279\u6027\uff1a${item.title}`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:a}]},{title:"\u5b8c\u6574\u529f\u80fd",description:"\u5c55\u793aEntrySelector\u7684\u5b8c\u6574\u529f\u80fd\uff0c\u5305\u62ec\u6dfb\u52a0\u65b0\u6761\u76ee\u3001\u64cd\u4f5c\u9009\u9879\u3001\u81ea\u5b9a\u4e49\u6807\u9898\u7b49",code:"const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// \u6a21\u62df\u5019\u9009\u4eba\u6280\u80fd\u6570\u636e\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 3, title: 'React', level: 'advanced', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 6, title: 'Python', level: 'intermediate', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '\u6570\u636e\u5e93' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '\u6570\u636e\u5e93' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '\u8fd0\u7ef4\u5de5\u5177' },\n { id: 10, title: 'Git', level: 'advanced', category: '\u7248\u672c\u63a7\u5236' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '\u7cbe\u901a',\n intermediate: '\u719f\u7ec3',\n beginner: '\u4e86\u89e3'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // \u5904\u7406\u6dfb\u52a0\u65b0\u6280\u80fd\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // \u63d0\u4ea4\u65b0\u6280\u80fd\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(`\u5df2\u6dfb\u52a0\u6280\u80fd\uff1a${values.title}`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('\u8868\u5355\u9a8c\u8bc1\u5931\u8d25:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // \u6dfb\u52a0\u65b0\u6761\u76ee\u529f\u80fd\n onAdd={handleAdd}\n // API\u914d\u7f6e\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // \u641c\u7d22\u914d\u7f6e\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u6280\u80fd\u540d\u79f0\u6216\u5206\u7c7b\"\n // \u81ea\u5b9a\u4e49\u6807\u9898\n selectedTitle=\"\u5019\u9009\u4eba\u6280\u80fd\u6e05\u5355\uff08\u53ef\u62d6\u62fd\u8c03\u6574\u987a\u5e8f\uff09\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n \u6280\u80fd\u5e93 ({fetchApi.data?.totalCount || 0} \u9879)\n </span>\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>\u65b0\u589e</Tag>}\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // \u64cd\u4f5c\u9009\u9879\n options={[\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>\u6280\u80fd\u7b49\u7ea7\uff1a{levelLabels[item.level]}</p>\n <p>\u6240\u5c5e\u5206\u7c7b\uff1a{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '\u6dfb\u52a0\u5230\u6536\u85cf',\n onClick: (e, item) => {\n message.success(`\u5df2\u6536\u85cf\u6280\u80fd\uff1a${item.title}`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* \u6dfb\u52a0\u65b0\u6280\u80fd\u7684\u5f39\u7a97 */}\n <Modal\n title=\"\u6dfb\u52a0\u65b0\u6280\u80fd\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"\u786e\u5b9a\"\n cancelText=\"\u53d6\u6d88\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"\u6280\u80fd\u540d\u79f0\"\n name=\"title\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6280\u80fd\u540d\u79f0' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1aGraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"\u719f\u7ec3\u7a0b\u5ea6\"\n name=\"level\"\n rules={[{ required: true, message: '\u8bf7\u9009\u62e9\u719f\u7ec3\u7a0b\u5ea6' }]}\n >\n <Select placeholder=\"\u8bf7\u9009\u62e9\">\n <Select.Option value=\"beginner\">\u4e86\u89e3</Select.Option>\n <Select.Option value=\"intermediate\">\u719f\u7ec3</Select.Option>\n <Select.Option value=\"advanced\">\u7cbe\u901a</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"\u6240\u5c5e\u5206\u7c7b\"\n name=\"category\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6240\u5c5e\u5206\u7c7b' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1a\u524d\u7aef\u5f00\u53d1\u3001\u540e\u7aef\u5f00\u53d1\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:n(13050)}]}]}}},11448(e,t,n){n(94922);var r=n(87558),a=n(55199),l=n(94312),o=n(13050),i=n(89261);window.PUBLIC_URL="/entry-selector";const d={url:"https://uc.fatalent.cn",tpl:"{{url}}/packages/@kne-components/{{remote}}/{{version}}/build"};var s=n(65457),c=n(94679),m=n(89170),p=(n(91296),n(46446));const u=m.Ay.ExampleRoutes,g=e=>{let{globalPreset:t,...n}=e;return(0,i.jsx)(c.HashRouter,{children:(0,i.jsx)(u,{...n,paths:[{key:"components",path:"/",title:"\u9996\u9875"}],preset:t,themeToken:t.themeToken,readme:p.default,pageProps:{menu:null}})})},h=s.createRoot(document.getElementById("root"));(async e=>{const t=await(async()=>{const e=(0,l.A)({errorHandler:e=>a.message.error(e)}),t={...d,remote:"components-core",defaultVersion:"0.4.51"};return(0,o.preset)({remotes:{default:t,"components-core":t,"components-iconfont":{...d,remote:"components-iconfont",defaultVersion:"0.2.1"},"entry-selector":{...d,remote:"entry-selector",defaultVersion:"0.2.5"}}}),(0,r.preset)({ajax:e,loading:(0,i.jsx)(a.Spin,{delay:500,style:{position:"absolute",left:"50%",padding:"10px",transform:"translateX(-50%)"}}),error:null,empty:(0,i.jsx)(a.Empty,{}),transformResponse:e=>{const{data:t}=e;return e.data={code:0===t.code?200:t.code,msg:t.msg,results:t.data},e}}),{ajax:e,enums:{},apis:{},themeToken:{colorPrimary:"#4183F0"}}})();h.render((0,i.jsx)(e,{themeToken:t.themeToken,globalPreset:t}))})(g)},72241(){}}]);
2
+ //# sourceMappingURL=198.2017e521.chunk.js.map
package/build/static/js/{198.ab5e0aa6.chunk.js.map → 198.2017e521.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/198.ab5e0aa6.chunk.js","mappings":"+MAMA,MAwmBA,EAxmBqB,CACjBA,KAAM,iBACNC,QAAS,+vEAqBTC,YAAa,2bACbC,YAAa,sBACbC,IAAK,ulIAqJLC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACXC,MAAO,uGAKPC,KAAM,CAAC,CACXC,MAAO,2BACPR,YAAa,wLACbS,KAAM,irGAgENC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,iCACPR,YAAa,iLACbS,KAAM,wvJAyHNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,2BACPR,YAAa,kLACbS,KAAM,s3OA2MNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,GACb,CACEd,KAAM,eACNG,YAAa,qBACbW,U,iGCnmBJC,OAAOC,WAAaC,kBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,2DCTtC,MAAMC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,KAAiBC,GAAOF,EACrC,OACIG,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACL,EAAa,IACNI,EACJI,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNrB,MAAO,iBAGXsB,OAAQR,EACRS,WAAYT,EAAaS,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,WCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMjB,OFSkBiB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,EAAuB,IACxB7B,EAAU8B,OAAQ,kBAAmBC,eAAgB,UAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,sBAAuB,IAC1F7B,EAAU8B,OAAQ,sBAAuBC,eAAgB,SAC3D,iBAEC,IACC/B,EAAU8B,OAAQ,iBAAkBC,eAAgBhC,aAM7DoC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS5B,EAAAA,EAAAA,KAAC6B,EAAAA,KAAI,CAACC,MAAO,IACPhD,MAAO,CACLiD,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNf,MAAO,KAAMgB,OAAOnC,EAAAA,EAAAA,KAACoC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdtD,KAAoB,IAAdsD,EAAKtD,KAAa,IAAMsD,EAAKtD,KAAMuD,IAAKD,EAAKC,IAAKC,QAASF,EAAKA,MAEjED,KAIJ,CACLtB,OAAM0B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGpC,WAAY,CACrCqC,aAAc,aEjDSC,GACpBlC,EAAKmC,QAAO9C,EAAAA,EAAAA,KAAC+C,EAAG,CAACxC,WAAYT,EAAaS,WAAYT,aAAcA,MAG7EkD,CAAWD,E","sources":["../../README.md","preset.js","App.js","bootstrap.js"],"sourcesContent":["import * as component_1 from '@kne/current-lib_entry-selector';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_3 from 'antd';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_6 from '@kne/remote-loader';\nconst readmeConfig = {\n name: `entry-selector`,\n summary: `<p>EntrySelector 是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。</p>\n<h3>主要功能</h3>\n<ul>\n<li><strong>双列表展示</strong>：清晰地分离已选条目和可选条目</li>\n<li><strong>拖拽排序</strong>：支持对已选条目进行拖拽排序</li>\n<li><strong>搜索过滤</strong>：可以通过关键词搜索过滤条目</li>\n<li><strong>自定义渲染</strong>：支持自定义条目的渲染方式</li>\n<li><strong>国际化支持</strong>：内置中文和英文语言支持</li>\n<li><strong>添加新条目</strong>：支持添加不在预设列表中的新条目</li>\n</ul>\n<h3>使用场景</h3>\n<p>EntrySelector 适用于需要从预定义列表中选择多个条目并进行排序的场景，例如：</p>\n<ul>\n<li>选择并排序文章分类</li>\n<li>管理产品标签</li>\n<li>配置用户权限</li>\n<li>选择并排序展示项目</li>\n</ul>\n<h3>基本原理</h3>\n<p>组件内部维护已选条目列表和可选条目列表两个状态，通过用户交互在这两个列表之间移动条目。组件使用 react-sortablejs\n实现拖拽排序功能，并支持通过搜索框过滤条目列表。</p>`,\n description: `EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。`,\n packageName: `@kne/entry-selector`,\n api: `<h3>组件属性</h3>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>已选条目列表，每个条目应包含唯一id属性</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>值变化时的回调函数，参数为新的value值</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>添加新条目的回调函数，参数为包含fetchApi、value和onChange的对象</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>获取条目列表的API函数，用于加载可选条目数据</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>条目操作选项列表，用于ButtonGroup组件</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染已选条目的函数，参数为条目数据和包含el、target、fetchApi、onChange的对象</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染可选条目的函数，参数为条目数据和包含fetchApi、el的对象</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染操作选项的函数，参数为条目数据和包含searchProps、setSearchProps、fetchApi、options的对象</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>获取搜索属性的函数，用于配置搜索功能</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>搜索框占位文本，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义已选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义可选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染列表标题的函数，参数为包含fetchApi、searchProps、setSearchProps的对象</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>设置滚动区域的最大高度（单位：像素）</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化支持</h3>\n<p>组件内置中文和英文两种语言，默认使用中文。可通过createWithIntlProvider配置国际化。</p>\n<table>\n<thead>\n<tr>\n<th>语言</th>\n<th>代码</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>中文</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>英文</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化文本键值</h3>\n<table>\n<thead>\n<tr>\n<th>键名</th>\n<th>中文</th>\n<th>英文</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>添加</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>已选</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>列表</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>请输入关键字</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `entry_selector_f371f`,\n style: `.entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}`,\n list: [{\n title: `基础用法`,\n description: `展示EntrySelector组件的基本使用，包括条目选择、搜索过滤和拖拽排序功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// 模拟面试题库数据\nconst mockQuestionDatabase = [\n { id: 1, title: '请简单介绍一下你自己', category: '个人介绍', difficulty: '简单' },\n { id: 2, title: '你认为自己最大的优点和缺点是什么？', category: '性格分析', difficulty: '简单' },\n { id: 3, title: '请描述一次你成功解决团队冲突的经历', category: '团队协作', difficulty: '中等' },\n { id: 4, title: '你如何处理工作中的高压情况？请举例说明', category: '压力管理', difficulty: '中等' },\n { id: 5, title: '请分享一次你快速作出决策的经验', category: '决策能力', difficulty: '中等' },\n { id: 6, title: '你如何看待加班？如何平衡工作与生活？', category: '工作态度', difficulty: '简单' },\n { id: 7, title: '描述一次你主动承担责任并超出预期的项目', category: '主动性', difficulty: '困难' },\n { id: 8, title: '你如何让团队成员有效高质完成工作？', category: '团队管理', difficulty: '困难' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '请简单介绍一下你自己' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(\\`已选择 \\${value.length} 道题目\\`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // 模拟API请求延迟\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // 根据搜索关键词过滤\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"搜索题目或分类\"\n selectedTitle=\"已选题目（可拖拽排序）\"\n listTitle=\"题目库\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `自定义渲染`,\n description: `展示如何自定义渲染已选条目和可选条目，实现更丰富的交互功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// 模拟产品特性数据\nconst mockFeatures = [\n { id: 1, title: '用户注册登录', status: '已完成', priority: 'high', category: '基础功能' },\n { id: 2, title: '商品搜索与筛选', status: '开发中', priority: 'high', category: '核心功能' },\n { id: 3, title: '购物车功能', status: '已完成', priority: 'high', category: '核心功能' },\n { id: 4, title: '订单管理', status: '待开发', priority: 'medium', category: '核心功能' },\n { id: 5, title: '支付集成', status: '待开发', priority: 'high', category: '核心功能' },\n { id: 6, title: '用户评价系统', status: '开发中', priority: 'medium', category: '增值功能' },\n { id: 7, title: '数据统计面板', status: '待开发', priority: 'low', category: '增值功能' },\n { id: 8, title: '消息推送', status: '已完成', priority: 'medium', category: '增值功能' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '已完成': 'green',\n '开发中': 'blue',\n '待开发': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索特性名称或分类\"\n selectedTitle=\"已选特性（需排期开发）\"\n // 自定义渲染已选条目：展示优先级开关\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>高优先级</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(\\`已\\${checked ? '开启' : '关闭'} \"\\${item.title}\" 的优先级\\`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染可选条目：展示标签和状态\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染操作选项\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '查看详情',\n onClick: () => {\n message.info(\\`查看特性：\\${item.title}\\`);\n }\n },\n {\n children: '编辑',\n onClick: () => {\n message.info(\\`编辑特性：\\${item.title}\\`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `完整功能`,\n description: `展示EntrySelector的完整功能，包括添加新条目、操作选项、自定义标题等`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// 模拟候选人技能数据\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '前端开发' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '前端开发' },\n { id: 3, title: 'React', level: 'advanced', category: '前端框架' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '前端框架' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '后端开发' },\n { id: 6, title: 'Python', level: 'intermediate', category: '后端开发' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '数据库' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '数据库' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '运维工具' },\n { id: 10, title: 'Git', level: 'advanced', category: '版本控制' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '精通',\n intermediate: '熟练',\n beginner: '了解'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // 处理添加新技能\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // 提交新技能\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(\\`已添加技能：\\${values.title}\\`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('表单验证失败:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // 添加新条目功能\n onAdd={handleAdd}\n // API配置\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // 搜索配置\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索技能名称或分类\"\n // 自定义标题\n selectedTitle=\"候选人技能清单（可拖拽调整顺序）\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n 技能库 ({fetchApi.data?.totalCount || 0} 项)\n </span>\n </Flex>\n )}\n // 自定义渲染已选条目\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>新增</Tag>}\n </Flex>\n )}\n // 自定义渲染可选条目\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // 操作选项\n options={[\n {\n children: '查看详情',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>技能等级：{levelLabels[item.level]}</p>\n <p>所属分类：{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '添加到收藏',\n onClick: (e, item) => {\n message.success(\\`已收藏技能：\\${item.title}\\`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* 添加新技能的弹窗 */}\n <Modal\n title=\"添加新技能\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"确定\"\n cancelText=\"取消\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"技能名称\"\n name=\"title\"\n rules={[{ required: true, message: '请输入技能名称' }]}\n >\n <Input placeholder=\"例如：GraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"熟练程度\"\n name=\"level\"\n rules={[{ required: true, message: '请选择熟练程度' }]}\n >\n <Select placeholder=\"请选择\">\n <Select.Option value=\"beginner\">了解</Select.Option>\n <Select.Option value=\"intermediate\">熟练</Select.Option>\n <Select.Option value=\"advanced\">精通</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"所属分类\"\n name=\"category\"\n rules={[{ required: true, message: '请输入所属分类' }]}\n >\n <Input placeholder=\"例如：前端开发、后端开发\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n},{\n name: \"remoteLoader\",\n packageName: \"@kne/remote-loader\",\n component: component_6\n}]\n}]\n }\n};\nexport default readmeConfig;\n","import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.51'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'entry-selector': process.env.NODE_ENV === 'development' ? {\n remote: 'entry-selector', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'entry-selector', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n"],"names":["name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component","window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_jsx","HashRouter","children","paths","key","path","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","position","left","padding","transform","empty","Empty","transformResponse","response","data","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot"],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/198.2017e521.chunk.js","mappings":"+MAMA,MAwmBA,EAxmBqB,CACjBA,KAAM,iBACNC,QAAS,+vEAqBTC,YAAa,2bACbC,YAAa,sBACbC,IAAK,ulIAqJLC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACXC,MAAO,uGAKPC,KAAM,CAAC,CACXC,MAAO,2BACPR,YAAa,wLACbS,KAAM,irGAgENC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,iCACPR,YAAa,iLACbS,KAAM,wvJAyHNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,2BACPR,YAAa,kLACbS,KAAM,s3OA2MNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,GACb,CACEd,KAAM,eACNG,YAAa,qBACbW,U,iGCnmBJC,OAAOC,WAAaC,kBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,2DCTtC,MAAMC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,KAAiBC,GAAOF,EACrC,OACIG,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACL,EAAa,IACNI,EACJI,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNrB,MAAO,iBAGXsB,OAAQR,EACRS,WAAYT,EAAaS,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,WCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMjB,OFSkBiB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,EAAuB,IACxB7B,EAAU8B,OAAQ,kBAAmBC,eAAgB,UAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,sBAAuB,IAC1F7B,EAAU8B,OAAQ,sBAAuBC,eAAgB,SAC3D,iBAEC,IACC/B,EAAU8B,OAAQ,iBAAkBC,eAAgBhC,aAM7DoC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS5B,EAAAA,EAAAA,KAAC6B,EAAAA,KAAI,CAACC,MAAO,IACPhD,MAAO,CACLiD,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNf,MAAO,KAAMgB,OAAOnC,EAAAA,EAAAA,KAACoC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdtD,KAAoB,IAAdsD,EAAKtD,KAAa,IAAMsD,EAAKtD,KAAMuD,IAAKD,EAAKC,IAAKC,QAASF,EAAKA,MAEjED,KAIJ,CACLtB,OAAM0B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGpC,WAAY,CACrCqC,aAAc,aEjDSC,GACpBlC,EAAKmC,QAAO9C,EAAAA,EAAAA,KAAC+C,EAAG,CAACxC,WAAYT,EAAaS,WAAYT,aAAcA,MAG7EkD,CAAWD,E","sources":["../../README.md","preset.js","App.js","bootstrap.js"],"sourcesContent":["import * as component_1 from '@kne/current-lib_entry-selector';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_3 from 'antd';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_6 from '@kne/remote-loader';\nconst readmeConfig = {\n name: `entry-selector`,\n summary: `<p>EntrySelector 是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。</p>\n<h3>主要功能</h3>\n<ul>\n<li><strong>双列表展示</strong>：清晰地分离已选条目和可选条目</li>\n<li><strong>拖拽排序</strong>：支持对已选条目进行拖拽排序</li>\n<li><strong>搜索过滤</strong>：可以通过关键词搜索过滤条目</li>\n<li><strong>自定义渲染</strong>：支持自定义条目的渲染方式</li>\n<li><strong>国际化支持</strong>：内置中文和英文语言支持</li>\n<li><strong>添加新条目</strong>：支持添加不在预设列表中的新条目</li>\n</ul>\n<h3>使用场景</h3>\n<p>EntrySelector 适用于需要从预定义列表中选择多个条目并进行排序的场景，例如：</p>\n<ul>\n<li>选择并排序文章分类</li>\n<li>管理产品标签</li>\n<li>配置用户权限</li>\n<li>选择并排序展示项目</li>\n</ul>\n<h3>基本原理</h3>\n<p>组件内部维护已选条目列表和可选条目列表两个状态，通过用户交互在这两个列表之间移动条目。组件使用 react-sortablejs\n实现拖拽排序功能，并支持通过搜索框过滤条目列表。</p>`,\n description: `EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。`,\n packageName: `@kne/entry-selector`,\n api: `<h3>组件属性</h3>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>已选条目列表，每个条目应包含唯一id属性</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>值变化时的回调函数，参数为新的value值</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>添加新条目的回调函数，参数为包含fetchApi、value和onChange的对象</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>获取条目列表的API函数，用于加载可选条目数据</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>条目操作选项列表，用于ButtonGroup组件</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染已选条目的函数，参数为条目数据和包含el、target、fetchApi、onChange的对象</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染可选条目的函数，参数为条目数据和包含fetchApi、el的对象</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染操作选项的函数，参数为条目数据和包含searchProps、setSearchProps、fetchApi、options的对象</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>获取搜索属性的函数，用于配置搜索功能</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>搜索框占位文本，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义已选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义可选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染列表标题的函数，参数为包含fetchApi、searchProps、setSearchProps的对象</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>设置滚动区域的最大高度（单位：像素）</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化支持</h3>\n<p>组件内置中文和英文两种语言，默认使用中文。可通过createWithIntlProvider配置国际化。</p>\n<table>\n<thead>\n<tr>\n<th>语言</th>\n<th>代码</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>中文</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>英文</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化文本键值</h3>\n<table>\n<thead>\n<tr>\n<th>键名</th>\n<th>中文</th>\n<th>英文</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>添加</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>已选</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>列表</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>请输入关键字</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `entry_selector_f371f`,\n style: `.entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}`,\n list: [{\n title: `基础用法`,\n description: `展示EntrySelector组件的基本使用，包括条目选择、搜索过滤和拖拽排序功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// 模拟面试题库数据\nconst mockQuestionDatabase = [\n { id: 1, title: '请简单介绍一下你自己', category: '个人介绍', difficulty: '简单' },\n { id: 2, title: '你认为自己最大的优点和缺点是什么？', category: '性格分析', difficulty: '简单' },\n { id: 3, title: '请描述一次你成功解决团队冲突的经历', category: '团队协作', difficulty: '中等' },\n { id: 4, title: '你如何处理工作中的高压情况？请举例说明', category: '压力管理', difficulty: '中等' },\n { id: 5, title: '请分享一次你快速作出决策的经验', category: '决策能力', difficulty: '中等' },\n { id: 6, title: '你如何看待加班？如何平衡工作与生活？', category: '工作态度', difficulty: '简单' },\n { id: 7, title: '描述一次你主动承担责任并超出预期的项目', category: '主动性', difficulty: '困难' },\n { id: 8, title: '你如何让团队成员有效高质完成工作？', category: '团队管理', difficulty: '困难' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '请简单介绍一下你自己' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(\\`已选择 \\${value.length} 道题目\\`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // 模拟API请求延迟\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // 根据搜索关键词过滤\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"搜索题目或分类\"\n selectedTitle=\"已选题目（可拖拽排序）\"\n listTitle=\"题目库\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `自定义渲染`,\n description: `展示如何自定义渲染已选条目和可选条目，实现更丰富的交互功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// 模拟产品特性数据\nconst mockFeatures = [\n { id: 1, title: '用户注册登录', status: '已完成', priority: 'high', category: '基础功能' },\n { id: 2, title: '商品搜索与筛选', status: '开发中', priority: 'high', category: '核心功能' },\n { id: 3, title: '购物车功能', status: '已完成', priority: 'high', category: '核心功能' },\n { id: 4, title: '订单管理', status: '待开发', priority: 'medium', category: '核心功能' },\n { id: 5, title: '支付集成', status: '待开发', priority: 'high', category: '核心功能' },\n { id: 6, title: '用户评价系统', status: '开发中', priority: 'medium', category: '增值功能' },\n { id: 7, title: '数据统计面板', status: '待开发', priority: 'low', category: '增值功能' },\n { id: 8, title: '消息推送', status: '已完成', priority: 'medium', category: '增值功能' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '已完成': 'green',\n '开发中': 'blue',\n '待开发': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索特性名称或分类\"\n selectedTitle=\"已选特性（需排期开发）\"\n // 自定义渲染已选条目：展示优先级开关\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>高优先级</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(\\`已\\${checked ? '开启' : '关闭'} \"\\${item.title}\" 的优先级\\`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染可选条目：展示标签和状态\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染操作选项\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '查看详情',\n onClick: () => {\n message.info(\\`查看特性：\\${item.title}\\`);\n }\n },\n {\n children: '编辑',\n onClick: () => {\n message.info(\\`编辑特性：\\${item.title}\\`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `完整功能`,\n description: `展示EntrySelector的完整功能，包括添加新条目、操作选项、自定义标题等`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// 模拟候选人技能数据\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '前端开发' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '前端开发' },\n { id: 3, title: 'React', level: 'advanced', category: '前端框架' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '前端框架' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '后端开发' },\n { id: 6, title: 'Python', level: 'intermediate', category: '后端开发' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '数据库' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '数据库' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '运维工具' },\n { id: 10, title: 'Git', level: 'advanced', category: '版本控制' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '精通',\n intermediate: '熟练',\n beginner: '了解'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // 处理添加新技能\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // 提交新技能\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(\\`已添加技能：\\${values.title}\\`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('表单验证失败:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // 添加新条目功能\n onAdd={handleAdd}\n // API配置\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // 搜索配置\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索技能名称或分类\"\n // 自定义标题\n selectedTitle=\"候选人技能清单（可拖拽调整顺序）\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n 技能库 ({fetchApi.data?.totalCount || 0} 项)\n </span>\n </Flex>\n )}\n // 自定义渲染已选条目\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>新增</Tag>}\n </Flex>\n )}\n // 自定义渲染可选条目\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // 操作选项\n options={[\n {\n children: '查看详情',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>技能等级：{levelLabels[item.level]}</p>\n <p>所属分类：{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '添加到收藏',\n onClick: (e, item) => {\n message.success(\\`已收藏技能：\\${item.title}\\`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* 添加新技能的弹窗 */}\n <Modal\n title=\"添加新技能\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"确定\"\n cancelText=\"取消\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"技能名称\"\n name=\"title\"\n rules={[{ required: true, message: '请输入技能名称' }]}\n >\n <Input placeholder=\"例如：GraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"熟练程度\"\n name=\"level\"\n rules={[{ required: true, message: '请选择熟练程度' }]}\n >\n <Select placeholder=\"请选择\">\n <Select.Option value=\"beginner\">了解</Select.Option>\n <Select.Option value=\"intermediate\">熟练</Select.Option>\n <Select.Option value=\"advanced\">精通</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"所属分类\"\n name=\"category\"\n rules={[{ required: true, message: '请输入所属分类' }]}\n >\n <Input placeholder=\"例如：前端开发、后端开发\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n},{\n name: \"remoteLoader\",\n packageName: \"@kne/remote-loader\",\n component: component_6\n}]\n}]\n }\n};\nexport default readmeConfig;\n","import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.51'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'entry-selector': process.env.NODE_ENV === 'development' ? {\n remote: 'entry-selector', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'entry-selector', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n"],"names":["name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component","window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_jsx","HashRouter","children","paths","key","path","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","position","left","padding","transform","empty","Empty","transformResponse","response","data","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot"],"sourceRoot":""}
package/build/static/js/{268.cbadad83.chunk.js → 268.0ab44ef5.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- "use strict";(globalThis.webpackChunk_kne_components_entry_selector=globalThis.webpackChunk_kne_components_entry_selector||[]).push([[268],{30268(e,t,n){n.r(t),n.d(t,{default:()=>a,manifest:()=>i});var r=n(82879),l=n(55199);const a={EntrySelector:{name:"entry-selector",summary:"<p>EntrySelector \u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002</p>\n<h3>\u4e3b\u8981\u529f\u80fd</h3>\n<ul>\n<li><strong>\u53cc\u5217\u8868\u5c55\u793a</strong>\uff1a\u6e05\u6670\u5730\u5206\u79bb\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee</li>\n<li><strong>\u62d6\u62fd\u6392\u5e8f</strong>\uff1a\u652f\u6301\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u62d6\u62fd\u6392\u5e8f</li>\n<li><strong>\u641c\u7d22\u8fc7\u6ee4</strong>\uff1a\u53ef\u4ee5\u901a\u8fc7\u5173\u952e\u8bcd\u641c\u7d22\u8fc7\u6ee4\u6761\u76ee</li>\n<li><strong>\u81ea\u5b9a\u4e49\u6e32\u67d3</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6761\u76ee\u7684\u6e32\u67d3\u65b9\u5f0f</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u8bed\u8a00\u652f\u6301</li>\n<li><strong>\u6dfb\u52a0\u65b0\u6761\u76ee</strong>\uff1a\u652f\u6301\u6dfb\u52a0\u4e0d\u5728\u9884\u8bbe\u5217\u8868\u4e2d\u7684\u65b0\u6761\u76ee</li>\n</ul>\n<h3>\u4f7f\u7528\u573a\u666f</h3>\n<p>EntrySelector \u9002\u7528\u4e8e\u9700\u8981\u4ece\u9884\u5b9a\u4e49\u5217\u8868\u4e2d\u9009\u62e9\u591a\u4e2a\u6761\u76ee\u5e76\u8fdb\u884c\u6392\u5e8f\u7684\u573a\u666f\uff0c\u4f8b\u5982\uff1a</p>\n<ul>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u6587\u7ae0\u5206\u7c7b</li>\n<li>\u7ba1\u7406\u4ea7\u54c1\u6807\u7b7e</li>\n<li>\u914d\u7f6e\u7528\u6237\u6743\u9650</li>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u5c55\u793a\u9879\u76ee</li>\n</ul>\n<h3>\u57fa\u672c\u539f\u7406</h3>\n<p>\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u5df2\u9009\u6761\u76ee\u5217\u8868\u548c\u53ef\u9009\u6761\u76ee\u5217\u8868\u4e24\u4e2a\u72b6\u6001\uff0c\u901a\u8fc7\u7528\u6237\u4ea4\u4e92\u5728\u8fd9\u4e24\u4e2a\u5217\u8868\u4e4b\u95f4\u79fb\u52a8\u6761\u76ee\u3002\u7ec4\u4ef6\u4f7f\u7528 react-sortablejs\n\u5b9e\u73b0\u62d6\u62fd\u6392\u5e8f\u529f\u80fd\uff0c\u5e76\u652f\u6301\u901a\u8fc7\u641c\u7d22\u6846\u8fc7\u6ee4\u6761\u76ee\u5217\u8868\u3002</p>",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector",api:"<h3>\u7ec4\u4ef6\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>\u5df2\u9009\u6761\u76ee\u5217\u8868\uff0c\u6bcf\u4e2a\u6761\u76ee\u5e94\u5305\u542b\u552f\u4e00id\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>\u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u65b0\u7684value\u503c</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>\u6dfb\u52a0\u65b0\u6761\u76ee\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001value\u548conChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u6761\u76ee\u5217\u8868\u7684API\u51fd\u6570\uff0c\u7528\u4e8e\u52a0\u8f7d\u53ef\u9009\u6761\u76ee\u6570\u636e</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>\u6761\u76ee\u64cd\u4f5c\u9009\u9879\u5217\u8868\uff0c\u7528\u4e8eButtonGroup\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bel\u3001target\u3001fetchApi\u3001onChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bfetchApi\u3001el\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bsearchProps\u3001setSearchProps\u3001fetchApi\u3001options\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u914d\u7f6e\u641c\u7d22\u529f\u80fd</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u6587\u672c\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5df2\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u53ef\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5217\u8868\u6807\u9898\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001searchProps\u3001setSearchProps\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>\u8bbe\u7f6e\u6eda\u52a8\u533a\u57df\u7684\u6700\u5927\u9ad8\u5ea6\uff08\u5355\u4f4d\uff1a\u50cf\u7d20\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u652f\u6301</h3>\n<p>\u7ec4\u4ef6\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u4e24\u79cd\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4f7f\u7528\u4e2d\u6587\u3002\u53ef\u901a\u8fc7createWithIntlProvider\u914d\u7f6e\u56fd\u9645\u5316\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u8bed\u8a00</th>\n<th>\u4ee3\u7801</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>\u4e2d\u6587</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>\u82f1\u6587</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u6587\u672c\u952e\u503c</h3>\n<table>\n<thead>\n<tr>\n<th>\u952e\u540d</th>\n<th>\u4e2d\u6587</th>\n<th>\u82f1\u6587</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>\u6dfb\u52a0</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>\u5df2\u9009</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5217\u8868</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u8bf7\u8f93\u5165\u5173\u952e\u5b57</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"entry_selector_f371f",style:".entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"\u57fa\u7840\u7528\u6cd5",description:"\u5c55\u793aEntrySelector\u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528\uff0c\u5305\u62ec\u6761\u76ee\u9009\u62e9\u3001\u641c\u7d22\u8fc7\u6ee4\u548c\u62d6\u62fd\u6392\u5e8f\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// \u6a21\u62df\u9762\u8bd5\u9898\u5e93\u6570\u636e\nconst mockQuestionDatabase = [\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1', category: '\u4e2a\u4eba\u4ecb\u7ecd', difficulty: '\u7b80\u5355' },\n { id: 2, title: '\u4f60\u8ba4\u4e3a\u81ea\u5df1\u6700\u5927\u7684\u4f18\u70b9\u548c\u7f3a\u70b9\u662f\u4ec0\u4e48\uff1f', category: '\u6027\u683c\u5206\u6790', difficulty: '\u7b80\u5355' },\n { id: 3, title: '\u8bf7\u63cf\u8ff0\u4e00\u6b21\u4f60\u6210\u529f\u89e3\u51b3\u56e2\u961f\u51b2\u7a81\u7684\u7ecf\u5386', category: '\u56e2\u961f\u534f\u4f5c', difficulty: '\u4e2d\u7b49' },\n { id: 4, title: '\u4f60\u5982\u4f55\u5904\u7406\u5de5\u4f5c\u4e2d\u7684\u9ad8\u538b\u60c5\u51b5\uff1f\u8bf7\u4e3e\u4f8b\u8bf4\u660e', category: '\u538b\u529b\u7ba1\u7406', difficulty: '\u4e2d\u7b49' },\n { id: 5, title: '\u8bf7\u5206\u4eab\u4e00\u6b21\u4f60\u5feb\u901f\u4f5c\u51fa\u51b3\u7b56\u7684\u7ecf\u9a8c', category: '\u51b3\u7b56\u80fd\u529b', difficulty: '\u4e2d\u7b49' },\n { id: 6, title: '\u4f60\u5982\u4f55\u770b\u5f85\u52a0\u73ed\uff1f\u5982\u4f55\u5e73\u8861\u5de5\u4f5c\u4e0e\u751f\u6d3b\uff1f', category: '\u5de5\u4f5c\u6001\u5ea6', difficulty: '\u7b80\u5355' },\n { id: 7, title: '\u63cf\u8ff0\u4e00\u6b21\u4f60\u4e3b\u52a8\u627f\u62c5\u8d23\u4efb\u5e76\u8d85\u51fa\u9884\u671f\u7684\u9879\u76ee', category: '\u4e3b\u52a8\u6027', difficulty: '\u56f0\u96be' },\n { id: 8, title: '\u4f60\u5982\u4f55\u8ba9\u56e2\u961f\u6210\u5458\u6709\u6548\u9ad8\u8d28\u5b8c\u6210\u5de5\u4f5c\uff1f', category: '\u56e2\u961f\u7ba1\u7406', difficulty: '\u56f0\u96be' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(`\u5df2\u9009\u62e9 ${value.length} \u9053\u9898\u76ee`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // \u6a21\u62dfAPI\u8bf7\u6c42\u5ef6\u8fdf\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // \u6839\u636e\u641c\u7d22\u5173\u952e\u8bcd\u8fc7\u6ee4\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"\u641c\u7d22\u9898\u76ee\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u9898\u76ee\uff08\u53ef\u62d6\u62fd\u6392\u5e8f\uff09\"\n listTitle=\"\u9898\u76ee\u5e93\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:l}]},{title:"\u81ea\u5b9a\u4e49\u6e32\u67d3",description:"\u5c55\u793a\u5982\u4f55\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee\uff0c\u5b9e\u73b0\u66f4\u4e30\u5bcc\u7684\u4ea4\u4e92\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// \u6a21\u62df\u4ea7\u54c1\u7279\u6027\u6570\u636e\nconst mockFeatures = [\n { id: 1, title: '\u7528\u6237\u6ce8\u518c\u767b\u5f55', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u57fa\u7840\u529f\u80fd' },\n { id: 2, title: '\u5546\u54c1\u641c\u7d22\u4e0e\u7b5b\u9009', status: '\u5f00\u53d1\u4e2d', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 3, title: '\u8d2d\u7269\u8f66\u529f\u80fd', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 4, title: '\u8ba2\u5355\u7ba1\u7406', status: '\u5f85\u5f00\u53d1', priority: 'medium', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 5, title: '\u652f\u4ed8\u96c6\u6210', status: '\u5f85\u5f00\u53d1', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 6, title: '\u7528\u6237\u8bc4\u4ef7\u7cfb\u7edf', status: '\u5f00\u53d1\u4e2d', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' },\n { id: 7, title: '\u6570\u636e\u7edf\u8ba1\u9762\u677f', status: '\u5f85\u5f00\u53d1', priority: 'low', category: '\u589e\u503c\u529f\u80fd' },\n { id: 8, title: '\u6d88\u606f\u63a8\u9001', status: '\u5df2\u5b8c\u6210', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '\u5df2\u5b8c\u6210': 'green',\n '\u5f00\u53d1\u4e2d': 'blue',\n '\u5f85\u5f00\u53d1': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u7279\u6027\u540d\u79f0\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u7279\u6027\uff08\u9700\u6392\u671f\u5f00\u53d1\uff09\"\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\uff1a\u5c55\u793a\u4f18\u5148\u7ea7\u5f00\u5173\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>\u9ad8\u4f18\u5148\u7ea7</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(`\u5df2${checked ? '\u5f00\u542f' : '\u5173\u95ed'} \"${item.title}\" \u7684\u4f18\u5148\u7ea7`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\uff1a\u5c55\u793a\u6807\u7b7e\u548c\u72b6\u6001\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '\u9ad8' : item.priority === 'medium' ? '\u4e2d' : '\u4f4e'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: () => {\n message.info(`\u67e5\u770b\u7279\u6027\uff1a${item.title}`);\n }\n },\n {\n children: '\u7f16\u8f91',\n onClick: () => {\n message.info(`\u7f16\u8f91\u7279\u6027\uff1a${item.title}`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:l}]},{title:"\u5b8c\u6574\u529f\u80fd",description:"\u5c55\u793aEntrySelector\u7684\u5b8c\u6574\u529f\u80fd\uff0c\u5305\u62ec\u6dfb\u52a0\u65b0\u6761\u76ee\u3001\u64cd\u4f5c\u9009\u9879\u3001\u81ea\u5b9a\u4e49\u6807\u9898\u7b49",code:"const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// \u6a21\u62df\u5019\u9009\u4eba\u6280\u80fd\u6570\u636e\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 3, title: 'React', level: 'advanced', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 6, title: 'Python', level: 'intermediate', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '\u6570\u636e\u5e93' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '\u6570\u636e\u5e93' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '\u8fd0\u7ef4\u5de5\u5177' },\n { id: 10, title: 'Git', level: 'advanced', category: '\u7248\u672c\u63a7\u5236' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '\u7cbe\u901a',\n intermediate: '\u719f\u7ec3',\n beginner: '\u4e86\u89e3'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // \u5904\u7406\u6dfb\u52a0\u65b0\u6280\u80fd\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // \u63d0\u4ea4\u65b0\u6280\u80fd\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(`\u5df2\u6dfb\u52a0\u6280\u80fd\uff1a${values.title}`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('\u8868\u5355\u9a8c\u8bc1\u5931\u8d25:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // \u6dfb\u52a0\u65b0\u6761\u76ee\u529f\u80fd\n onAdd={handleAdd}\n // API\u914d\u7f6e\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // \u641c\u7d22\u914d\u7f6e\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u6280\u80fd\u540d\u79f0\u6216\u5206\u7c7b\"\n // \u81ea\u5b9a\u4e49\u6807\u9898\n selectedTitle=\"\u5019\u9009\u4eba\u6280\u80fd\u6e05\u5355\uff08\u53ef\u62d6\u62fd\u8c03\u6574\u987a\u5e8f\uff09\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n \u6280\u80fd\u5e93 ({fetchApi.data?.totalCount || 0} \u9879)\n </span>\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>\u65b0\u589e</Tag>}\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // \u64cd\u4f5c\u9009\u9879\n options={[\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>\u6280\u80fd\u7b49\u7ea7\uff1a{levelLabels[item.level]}</p>\n <p>\u6240\u5c5e\u5206\u7c7b\uff1a{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '\u6dfb\u52a0\u5230\u6536\u85cf',\n onClick: (e, item) => {\n message.success(`\u5df2\u6536\u85cf\u6280\u80fd\uff1a${item.title}`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* \u6dfb\u52a0\u65b0\u6280\u80fd\u7684\u5f39\u7a97 */}\n <Modal\n title=\"\u6dfb\u52a0\u65b0\u6280\u80fd\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"\u786e\u5b9a\"\n cancelText=\"\u53d6\u6d88\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"\u6280\u80fd\u540d\u79f0\"\n name=\"title\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6280\u80fd\u540d\u79f0' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1aGraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"\u719f\u7ec3\u7a0b\u5ea6\"\n name=\"level\"\n rules={[{ required: true, message: '\u8bf7\u9009\u62e9\u719f\u7ec3\u7a0b\u5ea6' }]}\n >\n <Select placeholder=\"\u8bf7\u9009\u62e9\">\n <Select.Option value=\"beginner\">\u4e86\u89e3</Select.Option>\n <Select.Option value=\"intermediate\">\u719f\u7ec3</Select.Option>\n <Select.Option value=\"advanced\">\u7cbe\u901a</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"\u6240\u5c5e\u5206\u7c7b\"\n name=\"category\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6240\u5c5e\u5206\u7c7b' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1a\u524d\u7aef\u5f00\u53d1\u3001\u540e\u7aef\u5f00\u53d1\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:l},{name:"remoteLoader",packageName:"@kne/remote-loader",component:n(13050)}]}]}}},i={name:"entry-selector",version:"0.2.4","open-version":!0,"public-url":"/entry-selector",modules:[{name:"entry-selector",baseDir:"/home/runner/work/entry-selector/entry-selector",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector"}]}}}]);
2
- //# sourceMappingURL=268.cbadad83.chunk.js.map
1
+ "use strict";(globalThis.webpackChunk_kne_components_entry_selector=globalThis.webpackChunk_kne_components_entry_selector||[]).push([[268],{30268(e,t,n){n.r(t),n.d(t,{default:()=>a,manifest:()=>i});var r=n(82879),l=n(55199);const a={EntrySelector:{name:"entry-selector",summary:"<p>EntrySelector \u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002</p>\n<h3>\u4e3b\u8981\u529f\u80fd</h3>\n<ul>\n<li><strong>\u53cc\u5217\u8868\u5c55\u793a</strong>\uff1a\u6e05\u6670\u5730\u5206\u79bb\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee</li>\n<li><strong>\u62d6\u62fd\u6392\u5e8f</strong>\uff1a\u652f\u6301\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u62d6\u62fd\u6392\u5e8f</li>\n<li><strong>\u641c\u7d22\u8fc7\u6ee4</strong>\uff1a\u53ef\u4ee5\u901a\u8fc7\u5173\u952e\u8bcd\u641c\u7d22\u8fc7\u6ee4\u6761\u76ee</li>\n<li><strong>\u81ea\u5b9a\u4e49\u6e32\u67d3</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6761\u76ee\u7684\u6e32\u67d3\u65b9\u5f0f</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u8bed\u8a00\u652f\u6301</li>\n<li><strong>\u6dfb\u52a0\u65b0\u6761\u76ee</strong>\uff1a\u652f\u6301\u6dfb\u52a0\u4e0d\u5728\u9884\u8bbe\u5217\u8868\u4e2d\u7684\u65b0\u6761\u76ee</li>\n</ul>\n<h3>\u4f7f\u7528\u573a\u666f</h3>\n<p>EntrySelector \u9002\u7528\u4e8e\u9700\u8981\u4ece\u9884\u5b9a\u4e49\u5217\u8868\u4e2d\u9009\u62e9\u591a\u4e2a\u6761\u76ee\u5e76\u8fdb\u884c\u6392\u5e8f\u7684\u573a\u666f\uff0c\u4f8b\u5982\uff1a</p>\n<ul>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u6587\u7ae0\u5206\u7c7b</li>\n<li>\u7ba1\u7406\u4ea7\u54c1\u6807\u7b7e</li>\n<li>\u914d\u7f6e\u7528\u6237\u6743\u9650</li>\n<li>\u9009\u62e9\u5e76\u6392\u5e8f\u5c55\u793a\u9879\u76ee</li>\n</ul>\n<h3>\u57fa\u672c\u539f\u7406</h3>\n<p>\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u5df2\u9009\u6761\u76ee\u5217\u8868\u548c\u53ef\u9009\u6761\u76ee\u5217\u8868\u4e24\u4e2a\u72b6\u6001\uff0c\u901a\u8fc7\u7528\u6237\u4ea4\u4e92\u5728\u8fd9\u4e24\u4e2a\u5217\u8868\u4e4b\u95f4\u79fb\u52a8\u6761\u76ee\u3002\u7ec4\u4ef6\u4f7f\u7528 react-sortablejs\n\u5b9e\u73b0\u62d6\u62fd\u6392\u5e8f\u529f\u80fd\uff0c\u5e76\u652f\u6301\u901a\u8fc7\u641c\u7d22\u6846\u8fc7\u6ee4\u6761\u76ee\u5217\u8868\u3002</p>",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector",api:"<h3>\u7ec4\u4ef6\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>\u5df2\u9009\u6761\u76ee\u5217\u8868\uff0c\u6bcf\u4e2a\u6761\u76ee\u5e94\u5305\u542b\u552f\u4e00id\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>\u503c\u53d8\u5316\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u65b0\u7684value\u503c</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>\u6dfb\u52a0\u65b0\u6761\u76ee\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001value\u548conChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u6761\u76ee\u5217\u8868\u7684API\u51fd\u6570\uff0c\u7528\u4e8e\u52a0\u8f7d\u53ef\u9009\u6761\u76ee\u6570\u636e</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>\u6761\u76ee\u64cd\u4f5c\u9009\u9879\u5217\u8868\uff0c\u7528\u4e8eButtonGroup\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bel\u3001target\u3001fetchApi\u3001onChange\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bfetchApi\u3001el\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u6761\u76ee\u6570\u636e\u548c\u5305\u542bsearchProps\u3001setSearchProps\u3001fetchApi\u3001options\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u914d\u7f6e\u641c\u7d22\u529f\u80fd</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u6587\u672c\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5df2\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u53ef\u9009\u5217\u8868\u7684\u6807\u9898\uff0c\u672a\u8bbe\u7f6e\u65f6\u4f7f\u7528\u56fd\u9645\u5316\u6587\u672c</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5217\u8868\u6807\u9898\u7684\u51fd\u6570\uff0c\u53c2\u6570\u4e3a\u5305\u542bfetchApi\u3001searchProps\u3001setSearchProps\u7684\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>\u8bbe\u7f6e\u6eda\u52a8\u533a\u57df\u7684\u6700\u5927\u9ad8\u5ea6\uff08\u5355\u4f4d\uff1a\u50cf\u7d20\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u652f\u6301</h3>\n<p>\u7ec4\u4ef6\u5185\u7f6e\u4e2d\u6587\u548c\u82f1\u6587\u4e24\u79cd\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4f7f\u7528\u4e2d\u6587\u3002\u53ef\u901a\u8fc7createWithIntlProvider\u914d\u7f6e\u56fd\u9645\u5316\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u8bed\u8a00</th>\n<th>\u4ee3\u7801</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>\u4e2d\u6587</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>\u82f1\u6587</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>\u56fd\u9645\u5316\u6587\u672c\u952e\u503c</h3>\n<table>\n<thead>\n<tr>\n<th>\u952e\u540d</th>\n<th>\u4e2d\u6587</th>\n<th>\u82f1\u6587</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>\u6dfb\u52a0</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>\u5df2\u9009</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5217\u8868</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u8bf7\u8f93\u5165\u5173\u952e\u5b57</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"entry_selector_f371f",style:".entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"\u57fa\u7840\u7528\u6cd5",description:"\u5c55\u793aEntrySelector\u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528\uff0c\u5305\u62ec\u6761\u76ee\u9009\u62e9\u3001\u641c\u7d22\u8fc7\u6ee4\u548c\u62d6\u62fd\u6392\u5e8f\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// \u6a21\u62df\u9762\u8bd5\u9898\u5e93\u6570\u636e\nconst mockQuestionDatabase = [\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1', category: '\u4e2a\u4eba\u4ecb\u7ecd', difficulty: '\u7b80\u5355' },\n { id: 2, title: '\u4f60\u8ba4\u4e3a\u81ea\u5df1\u6700\u5927\u7684\u4f18\u70b9\u548c\u7f3a\u70b9\u662f\u4ec0\u4e48\uff1f', category: '\u6027\u683c\u5206\u6790', difficulty: '\u7b80\u5355' },\n { id: 3, title: '\u8bf7\u63cf\u8ff0\u4e00\u6b21\u4f60\u6210\u529f\u89e3\u51b3\u56e2\u961f\u51b2\u7a81\u7684\u7ecf\u5386', category: '\u56e2\u961f\u534f\u4f5c', difficulty: '\u4e2d\u7b49' },\n { id: 4, title: '\u4f60\u5982\u4f55\u5904\u7406\u5de5\u4f5c\u4e2d\u7684\u9ad8\u538b\u60c5\u51b5\uff1f\u8bf7\u4e3e\u4f8b\u8bf4\u660e', category: '\u538b\u529b\u7ba1\u7406', difficulty: '\u4e2d\u7b49' },\n { id: 5, title: '\u8bf7\u5206\u4eab\u4e00\u6b21\u4f60\u5feb\u901f\u4f5c\u51fa\u51b3\u7b56\u7684\u7ecf\u9a8c', category: '\u51b3\u7b56\u80fd\u529b', difficulty: '\u4e2d\u7b49' },\n { id: 6, title: '\u4f60\u5982\u4f55\u770b\u5f85\u52a0\u73ed\uff1f\u5982\u4f55\u5e73\u8861\u5de5\u4f5c\u4e0e\u751f\u6d3b\uff1f', category: '\u5de5\u4f5c\u6001\u5ea6', difficulty: '\u7b80\u5355' },\n { id: 7, title: '\u63cf\u8ff0\u4e00\u6b21\u4f60\u4e3b\u52a8\u627f\u62c5\u8d23\u4efb\u5e76\u8d85\u51fa\u9884\u671f\u7684\u9879\u76ee', category: '\u4e3b\u52a8\u6027', difficulty: '\u56f0\u96be' },\n { id: 8, title: '\u4f60\u5982\u4f55\u8ba9\u56e2\u961f\u6210\u5458\u6709\u6548\u9ad8\u8d28\u5b8c\u6210\u5de5\u4f5c\uff1f', category: '\u56e2\u961f\u7ba1\u7406', difficulty: '\u56f0\u96be' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '\u8bf7\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u4f60\u81ea\u5df1' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(`\u5df2\u9009\u62e9 ${value.length} \u9053\u9898\u76ee`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // \u6a21\u62dfAPI\u8bf7\u6c42\u5ef6\u8fdf\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // \u6839\u636e\u641c\u7d22\u5173\u952e\u8bcd\u8fc7\u6ee4\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"\u641c\u7d22\u9898\u76ee\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u9898\u76ee\uff08\u53ef\u62d6\u62fd\u6392\u5e8f\uff09\"\n listTitle=\"\u9898\u76ee\u5e93\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:l}]},{title:"\u81ea\u5b9a\u4e49\u6e32\u67d3",description:"\u5c55\u793a\u5982\u4f55\u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\u548c\u53ef\u9009\u6761\u76ee\uff0c\u5b9e\u73b0\u66f4\u4e30\u5bcc\u7684\u4ea4\u4e92\u529f\u80fd",code:"const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// \u6a21\u62df\u4ea7\u54c1\u7279\u6027\u6570\u636e\nconst mockFeatures = [\n { id: 1, title: '\u7528\u6237\u6ce8\u518c\u767b\u5f55', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u57fa\u7840\u529f\u80fd' },\n { id: 2, title: '\u5546\u54c1\u641c\u7d22\u4e0e\u7b5b\u9009', status: '\u5f00\u53d1\u4e2d', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 3, title: '\u8d2d\u7269\u8f66\u529f\u80fd', status: '\u5df2\u5b8c\u6210', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 4, title: '\u8ba2\u5355\u7ba1\u7406', status: '\u5f85\u5f00\u53d1', priority: 'medium', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 5, title: '\u652f\u4ed8\u96c6\u6210', status: '\u5f85\u5f00\u53d1', priority: 'high', category: '\u6838\u5fc3\u529f\u80fd' },\n { id: 6, title: '\u7528\u6237\u8bc4\u4ef7\u7cfb\u7edf', status: '\u5f00\u53d1\u4e2d', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' },\n { id: 7, title: '\u6570\u636e\u7edf\u8ba1\u9762\u677f', status: '\u5f85\u5f00\u53d1', priority: 'low', category: '\u589e\u503c\u529f\u80fd' },\n { id: 8, title: '\u6d88\u606f\u63a8\u9001', status: '\u5df2\u5b8c\u6210', priority: 'medium', category: '\u589e\u503c\u529f\u80fd' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '\u5df2\u5b8c\u6210': 'green',\n '\u5f00\u53d1\u4e2d': 'blue',\n '\u5f85\u5f00\u53d1': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u7279\u6027\u540d\u79f0\u6216\u5206\u7c7b\"\n selectedTitle=\"\u5df2\u9009\u7279\u6027\uff08\u9700\u6392\u671f\u5f00\u53d1\uff09\"\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\uff1a\u5c55\u793a\u4f18\u5148\u7ea7\u5f00\u5173\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>\u9ad8\u4f18\u5148\u7ea7</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(`\u5df2${checked ? '\u5f00\u542f' : '\u5173\u95ed'} \"${item.title}\" \u7684\u4f18\u5148\u7ea7`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\uff1a\u5c55\u793a\u6807\u7b7e\u548c\u72b6\u6001\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '\u9ad8' : item.priority === 'medium' ? '\u4e2d' : '\u4f4e'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u64cd\u4f5c\u9009\u9879\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: () => {\n message.info(`\u67e5\u770b\u7279\u6027\uff1a${item.title}`);\n }\n },\n {\n children: '\u7f16\u8f91',\n onClick: () => {\n message.info(`\u7f16\u8f91\u7279\u6027\uff1a${item.title}`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:l}]},{title:"\u5b8c\u6574\u529f\u80fd",description:"\u5c55\u793aEntrySelector\u7684\u5b8c\u6574\u529f\u80fd\uff0c\u5305\u62ec\u6dfb\u52a0\u65b0\u6761\u76ee\u3001\u64cd\u4f5c\u9009\u9879\u3001\u81ea\u5b9a\u4e49\u6807\u9898\u7b49",code:"const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// \u6a21\u62df\u5019\u9009\u4eba\u6280\u80fd\u6570\u636e\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '\u524d\u7aef\u5f00\u53d1' },\n { id: 3, title: 'React', level: 'advanced', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '\u524d\u7aef\u6846\u67b6' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 6, title: 'Python', level: 'intermediate', category: '\u540e\u7aef\u5f00\u53d1' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '\u6570\u636e\u5e93' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '\u6570\u636e\u5e93' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '\u8fd0\u7ef4\u5de5\u5177' },\n { id: 10, title: 'Git', level: 'advanced', category: '\u7248\u672c\u63a7\u5236' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '\u7cbe\u901a',\n intermediate: '\u719f\u7ec3',\n beginner: '\u4e86\u89e3'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // \u5904\u7406\u6dfb\u52a0\u65b0\u6280\u80fd\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // \u63d0\u4ea4\u65b0\u6280\u80fd\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(`\u5df2\u6dfb\u52a0\u6280\u80fd\uff1a${values.title}`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('\u8868\u5355\u9a8c\u8bc1\u5931\u8d25:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // \u6dfb\u52a0\u65b0\u6761\u76ee\u529f\u80fd\n onAdd={handleAdd}\n // API\u914d\u7f6e\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // \u641c\u7d22\u914d\u7f6e\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"\u641c\u7d22\u6280\u80fd\u540d\u79f0\u6216\u5206\u7c7b\"\n // \u81ea\u5b9a\u4e49\u6807\u9898\n selectedTitle=\"\u5019\u9009\u4eba\u6280\u80fd\u6e05\u5355\uff08\u53ef\u62d6\u62fd\u8c03\u6574\u987a\u5e8f\uff09\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n \u6280\u80fd\u5e93 ({fetchApi.data?.totalCount || 0} \u9879)\n </span>\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u5df2\u9009\u6761\u76ee\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>\u65b0\u589e</Tag>}\n </Flex>\n )}\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u53ef\u9009\u6761\u76ee\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // \u64cd\u4f5c\u9009\u9879\n options={[\n {\n children: '\u67e5\u770b\u8be6\u60c5',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>\u6280\u80fd\u7b49\u7ea7\uff1a{levelLabels[item.level]}</p>\n <p>\u6240\u5c5e\u5206\u7c7b\uff1a{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '\u6dfb\u52a0\u5230\u6536\u85cf',\n onClick: (e, item) => {\n message.success(`\u5df2\u6536\u85cf\u6280\u80fd\uff1a${item.title}`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* \u6dfb\u52a0\u65b0\u6280\u80fd\u7684\u5f39\u7a97 */}\n <Modal\n title=\"\u6dfb\u52a0\u65b0\u6280\u80fd\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"\u786e\u5b9a\"\n cancelText=\"\u53d6\u6d88\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"\u6280\u80fd\u540d\u79f0\"\n name=\"title\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6280\u80fd\u540d\u79f0' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1aGraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"\u719f\u7ec3\u7a0b\u5ea6\"\n name=\"level\"\n rules={[{ required: true, message: '\u8bf7\u9009\u62e9\u719f\u7ec3\u7a0b\u5ea6' }]}\n >\n <Select placeholder=\"\u8bf7\u9009\u62e9\">\n <Select.Option value=\"beginner\">\u4e86\u89e3</Select.Option>\n <Select.Option value=\"intermediate\">\u719f\u7ec3</Select.Option>\n <Select.Option value=\"advanced\">\u7cbe\u901a</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"\u6240\u5c5e\u5206\u7c7b\"\n name=\"category\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u6240\u5c5e\u5206\u7c7b' }]}\n >\n <Input placeholder=\"\u4f8b\u5982\uff1a\u524d\u7aef\u5f00\u53d1\u3001\u540e\u7aef\u5f00\u53d1\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n",scope:[{name:"_EntrySelector",packageName:"@kne/current-lib_entry-selector",importStatement:'import * as _EntrySelector from "@kne/entry-selector"',component:r},{name:"antd",packageName:"antd",component:l},{name:"remoteLoader",packageName:"@kne/remote-loader",component:n(13050)}]}]}}},i={name:"entry-selector",version:"0.2.5","open-version":!0,"public-url":"/entry-selector",modules:[{name:"entry-selector",baseDir:"/home/runner/work/entry-selector/entry-selector",description:"EntrySelector\u662f\u4e00\u4e2a\u7528\u4e8e\u9009\u62e9\u548c\u7ba1\u7406\u6761\u76ee\u5217\u8868\u7684 React \u7ec4\u4ef6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u76f4\u89c2\u7684\u754c\u9762\uff0c\u5141\u8bb8\u7528\u6237\u4ece\u53ef\u9009\u5217\u8868\u4e2d\u9009\u62e9\u6761\u76ee\uff0c\u5e76\u5bf9\u5df2\u9009\u6761\u76ee\u8fdb\u884c\u7ba1\u7406\uff0c\u5305\u62ec\u6392\u5e8f\u3001\u641c\u7d22\u548c\u5220\u9664\u7b49\u64cd\u4f5c\u3002",packageName:"@kne/entry-selector"}]}}}]);
2
+ //# sourceMappingURL=268.0ab44ef5.chunk.js.map
package/build/static/js/{268.cbadad83.chunk.js.map → 268.0ab44ef5.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/268.cbadad83.chunk.js","mappings":"gOAMA,MCNiE,GAAgBA,cDM5D,CACjBC,KAAM,iBACNC,QAAS,+vEAqBTC,YAAa,2bACbC,YAAa,sBACbC,IAAK,ulIAqJLC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACXC,MAAO,uGAKPC,KAAM,CAAC,CACXC,MAAO,2BACPR,YAAa,wLACbS,KAAM,irGAgENC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,iCACPR,YAAa,iLACbS,KAAM,wvJAyHNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,2BACPR,YAAa,kLACbS,KAAM,s3OA2MNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,GACb,CACEd,KAAM,eACNG,YAAa,qBACbW,U,gBCxmBSC,EAAW,CAAC,KAAO,iBAAiB,QAAU,QAAQ,gBAAe,EAAK,aAAa,kBAAkB,QAAU,CAAC,CAAC,KAAO,iBAAiB,QAAU,kDAAkD,YAAc,2bAA6F,YAAc,wB","sources":["../../README.md","../node_modules/readme/modules.js"],"sourcesContent":["import * as component_1 from '@kne/current-lib_entry-selector';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_3 from 'antd';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_6 from '@kne/remote-loader';\nconst readmeConfig = {\n name: `entry-selector`,\n summary: `<p>EntrySelector 是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。</p>\n<h3>主要功能</h3>\n<ul>\n<li><strong>双列表展示</strong>：清晰地分离已选条目和可选条目</li>\n<li><strong>拖拽排序</strong>：支持对已选条目进行拖拽排序</li>\n<li><strong>搜索过滤</strong>：可以通过关键词搜索过滤条目</li>\n<li><strong>自定义渲染</strong>：支持自定义条目的渲染方式</li>\n<li><strong>国际化支持</strong>：内置中文和英文语言支持</li>\n<li><strong>添加新条目</strong>：支持添加不在预设列表中的新条目</li>\n</ul>\n<h3>使用场景</h3>\n<p>EntrySelector 适用于需要从预定义列表中选择多个条目并进行排序的场景，例如：</p>\n<ul>\n<li>选择并排序文章分类</li>\n<li>管理产品标签</li>\n<li>配置用户权限</li>\n<li>选择并排序展示项目</li>\n</ul>\n<h3>基本原理</h3>\n<p>组件内部维护已选条目列表和可选条目列表两个状态，通过用户交互在这两个列表之间移动条目。组件使用 react-sortablejs\n实现拖拽排序功能，并支持通过搜索框过滤条目列表。</p>`,\n description: `EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。`,\n packageName: `@kne/entry-selector`,\n api: `<h3>组件属性</h3>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>已选条目列表，每个条目应包含唯一id属性</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>值变化时的回调函数，参数为新的value值</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>添加新条目的回调函数，参数为包含fetchApi、value和onChange的对象</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>获取条目列表的API函数，用于加载可选条目数据</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>条目操作选项列表，用于ButtonGroup组件</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染已选条目的函数，参数为条目数据和包含el、target、fetchApi、onChange的对象</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染可选条目的函数，参数为条目数据和包含fetchApi、el的对象</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染操作选项的函数，参数为条目数据和包含searchProps、setSearchProps、fetchApi、options的对象</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>获取搜索属性的函数，用于配置搜索功能</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>搜索框占位文本，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义已选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义可选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染列表标题的函数，参数为包含fetchApi、searchProps、setSearchProps的对象</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>设置滚动区域的最大高度（单位：像素）</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化支持</h3>\n<p>组件内置中文和英文两种语言，默认使用中文。可通过createWithIntlProvider配置国际化。</p>\n<table>\n<thead>\n<tr>\n<th>语言</th>\n<th>代码</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>中文</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>英文</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化文本键值</h3>\n<table>\n<thead>\n<tr>\n<th>键名</th>\n<th>中文</th>\n<th>英文</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>添加</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>已选</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>列表</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>请输入关键字</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `entry_selector_f371f`,\n style: `.entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}`,\n list: [{\n title: `基础用法`,\n description: `展示EntrySelector组件的基本使用，包括条目选择、搜索过滤和拖拽排序功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// 模拟面试题库数据\nconst mockQuestionDatabase = [\n { id: 1, title: '请简单介绍一下你自己', category: '个人介绍', difficulty: '简单' },\n { id: 2, title: '你认为自己最大的优点和缺点是什么？', category: '性格分析', difficulty: '简单' },\n { id: 3, title: '请描述一次你成功解决团队冲突的经历', category: '团队协作', difficulty: '中等' },\n { id: 4, title: '你如何处理工作中的高压情况？请举例说明', category: '压力管理', difficulty: '中等' },\n { id: 5, title: '请分享一次你快速作出决策的经验', category: '决策能力', difficulty: '中等' },\n { id: 6, title: '你如何看待加班？如何平衡工作与生活？', category: '工作态度', difficulty: '简单' },\n { id: 7, title: '描述一次你主动承担责任并超出预期的项目', category: '主动性', difficulty: '困难' },\n { id: 8, title: '你如何让团队成员有效高质完成工作？', category: '团队管理', difficulty: '困难' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '请简单介绍一下你自己' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(\\`已选择 \\${value.length} 道题目\\`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // 模拟API请求延迟\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // 根据搜索关键词过滤\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"搜索题目或分类\"\n selectedTitle=\"已选题目（可拖拽排序）\"\n listTitle=\"题目库\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `自定义渲染`,\n description: `展示如何自定义渲染已选条目和可选条目，实现更丰富的交互功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// 模拟产品特性数据\nconst mockFeatures = [\n { id: 1, title: '用户注册登录', status: '已完成', priority: 'high', category: '基础功能' },\n { id: 2, title: '商品搜索与筛选', status: '开发中', priority: 'high', category: '核心功能' },\n { id: 3, title: '购物车功能', status: '已完成', priority: 'high', category: '核心功能' },\n { id: 4, title: '订单管理', status: '待开发', priority: 'medium', category: '核心功能' },\n { id: 5, title: '支付集成', status: '待开发', priority: 'high', category: '核心功能' },\n { id: 6, title: '用户评价系统', status: '开发中', priority: 'medium', category: '增值功能' },\n { id: 7, title: '数据统计面板', status: '待开发', priority: 'low', category: '增值功能' },\n { id: 8, title: '消息推送', status: '已完成', priority: 'medium', category: '增值功能' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '已完成': 'green',\n '开发中': 'blue',\n '待开发': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索特性名称或分类\"\n selectedTitle=\"已选特性（需排期开发）\"\n // 自定义渲染已选条目：展示优先级开关\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>高优先级</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(\\`已\\${checked ? '开启' : '关闭'} \"\\${item.title}\" 的优先级\\`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染可选条目：展示标签和状态\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染操作选项\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '查看详情',\n onClick: () => {\n message.info(\\`查看特性：\\${item.title}\\`);\n }\n },\n {\n children: '编辑',\n onClick: () => {\n message.info(\\`编辑特性：\\${item.title}\\`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `完整功能`,\n description: `展示EntrySelector的完整功能，包括添加新条目、操作选项、自定义标题等`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// 模拟候选人技能数据\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '前端开发' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '前端开发' },\n { id: 3, title: 'React', level: 'advanced', category: '前端框架' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '前端框架' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '后端开发' },\n { id: 6, title: 'Python', level: 'intermediate', category: '后端开发' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '数据库' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '数据库' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '运维工具' },\n { id: 10, title: 'Git', level: 'advanced', category: '版本控制' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '精通',\n intermediate: '熟练',\n beginner: '了解'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // 处理添加新技能\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // 提交新技能\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(\\`已添加技能：\\${values.title}\\`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('表单验证失败:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // 添加新条目功能\n onAdd={handleAdd}\n // API配置\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // 搜索配置\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索技能名称或分类\"\n // 自定义标题\n selectedTitle=\"候选人技能清单（可拖拽调整顺序）\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n 技能库 ({fetchApi.data?.totalCount || 0} 项)\n </span>\n </Flex>\n )}\n // 自定义渲染已选条目\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>新增</Tag>}\n </Flex>\n )}\n // 自定义渲染可选条目\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // 操作选项\n options={[\n {\n children: '查看详情',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>技能等级：{levelLabels[item.level]}</p>\n <p>所属分类：{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '添加到收藏',\n onClick: (e, item) => {\n message.success(\\`已收藏技能：\\${item.title}\\`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* 添加新技能的弹窗 */}\n <Modal\n title=\"添加新技能\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"确定\"\n cancelText=\"取消\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"技能名称\"\n name=\"title\"\n rules={[{ required: true, message: '请输入技能名称' }]}\n >\n <Input placeholder=\"例如：GraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"熟练程度\"\n name=\"level\"\n rules={[{ required: true, message: '请选择熟练程度' }]}\n >\n <Select placeholder=\"请选择\">\n <Select.Option value=\"beginner\">了解</Select.Option>\n <Select.Option value=\"intermediate\">熟练</Select.Option>\n <Select.Option value=\"advanced\">精通</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"所属分类\"\n name=\"category\"\n rules={[{ required: true, message: '请输入所属分类' }]}\n >\n <Input placeholder=\"例如：前端开发、后端开发\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n},{\n name: \"remoteLoader\",\n packageName: \"@kne/remote-loader\",\n component: component_6\n}]\n}]\n }\n};\nexport default readmeConfig;\n","import EntrySelector from '@components/entry-selector/README.md';export default {EntrySelector};\nexport const manifest = {\"name\":\"entry-selector\",\"version\":\"0.2.4\",\"open-version\":true,\"public-url\":\"/entry-selector\",\"modules\":[{\"name\":\"entry-selector\",\"baseDir\":\"/home/runner/work/entry-selector/entry-selector\",\"description\":\"EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。\",\"packageName\":\"@kne/entry-selector\"}]};"],"names":["EntrySelector","name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component","manifest"],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/268.0ab44ef5.chunk.js","mappings":"gOAMA,MCNiE,GAAgBA,cDM5D,CACjBC,KAAM,iBACNC,QAAS,+vEAqBTC,YAAa,2bACbC,YAAa,sBACbC,IAAK,ulIAqJLC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACXC,MAAO,uGAKPC,KAAM,CAAC,CACXC,MAAO,2BACPR,YAAa,wLACbS,KAAM,irGAgENC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,iCACPR,YAAa,iLACbS,KAAM,wvJAyHNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,2BACPR,YAAa,kLACbS,KAAM,s3OA2MNC,MAAO,CAAC,CACRZ,KAAM,iBACNG,YAAa,kCACbU,gBAAiB,wDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,GACb,CACEd,KAAM,eACNG,YAAa,qBACbW,U,gBCxmBSC,EAAW,CAAC,KAAO,iBAAiB,QAAU,QAAQ,gBAAe,EAAK,aAAa,kBAAkB,QAAU,CAAC,CAAC,KAAO,iBAAiB,QAAU,kDAAkD,YAAc,2bAA6F,YAAc,wB","sources":["../../README.md","../node_modules/readme/modules.js"],"sourcesContent":["import * as component_1 from '@kne/current-lib_entry-selector';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_3 from 'antd';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport '@kne/current-lib_entry-selector/dist/index.css';\nimport * as component_6 from '@kne/remote-loader';\nconst readmeConfig = {\n name: `entry-selector`,\n summary: `<p>EntrySelector 是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。</p>\n<h3>主要功能</h3>\n<ul>\n<li><strong>双列表展示</strong>：清晰地分离已选条目和可选条目</li>\n<li><strong>拖拽排序</strong>：支持对已选条目进行拖拽排序</li>\n<li><strong>搜索过滤</strong>：可以通过关键词搜索过滤条目</li>\n<li><strong>自定义渲染</strong>：支持自定义条目的渲染方式</li>\n<li><strong>国际化支持</strong>：内置中文和英文语言支持</li>\n<li><strong>添加新条目</strong>：支持添加不在预设列表中的新条目</li>\n</ul>\n<h3>使用场景</h3>\n<p>EntrySelector 适用于需要从预定义列表中选择多个条目并进行排序的场景，例如：</p>\n<ul>\n<li>选择并排序文章分类</li>\n<li>管理产品标签</li>\n<li>配置用户权限</li>\n<li>选择并排序展示项目</li>\n</ul>\n<h3>基本原理</h3>\n<p>组件内部维护已选条目列表和可选条目列表两个状态，通过用户交互在这两个列表之间移动条目。组件使用 react-sortablejs\n实现拖拽排序功能，并支持通过搜索框过滤条目列表。</p>`,\n description: `EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。`,\n packageName: `@kne/entry-selector`,\n api: `<h3>组件属性</h3>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Array</td>\n<td>[]</td>\n<td>已选条目列表，每个条目应包含唯一id属性</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Function</td>\n<td>-</td>\n<td>值变化时的回调函数，参数为新的value值</td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Function</td>\n<td>-</td>\n<td>添加新条目的回调函数，参数为包含fetchApi、value和onChange的对象</td>\n</tr>\n<tr>\n<td>api</td>\n<td>Function</td>\n<td>-</td>\n<td>获取条目列表的API函数，用于加载可选条目数据</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Array</td>\n<td>-</td>\n<td>条目操作选项列表，用于ButtonGroup组件</td>\n</tr>\n<tr>\n<td>renderSelectedItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染已选条目的函数，参数为条目数据和包含el、target、fetchApi、onChange的对象</td>\n</tr>\n<tr>\n<td>renderItem</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染可选条目的函数，参数为条目数据和包含fetchApi、el的对象</td>\n</tr>\n<tr>\n<td>renderOptions</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染操作选项的函数，参数为条目数据和包含searchProps、setSearchProps、fetchApi、options的对象</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>Function</td>\n<td>-</td>\n<td>获取搜索属性的函数，用于配置搜索功能</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>String</td>\n<td>-</td>\n<td>搜索框占位文本，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>selectedTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义已选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>listTitle</td>\n<td>String</td>\n<td>-</td>\n<td>自定义可选列表的标题，未设置时使用国际化文本</td>\n</tr>\n<tr>\n<td>renderListTitle</td>\n<td>Function</td>\n<td>-</td>\n<td>自定义渲染列表标题的函数，参数为包含fetchApi、searchProps、setSearchProps的对象</td>\n</tr>\n<tr>\n<td>maxScrollerHeight</td>\n<td>Number</td>\n<td>800</td>\n<td>设置滚动区域的最大高度（单位：像素）</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化支持</h3>\n<p>组件内置中文和英文两种语言，默认使用中文。可通过createWithIntlProvider配置国际化。</p>\n<table>\n<thead>\n<tr>\n<th>语言</th>\n<th>代码</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>中文</td>\n<td>zh-CN</td>\n</tr>\n<tr>\n<td>英文</td>\n<td>en-US</td>\n</tr>\n</tbody>\n</table>\n<h3>国际化文本键值</h3>\n<table>\n<thead>\n<tr>\n<th>键名</th>\n<th>中文</th>\n<th>英文</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>add</td>\n<td>添加</td>\n<td>Add</td>\n</tr>\n<tr>\n<td>selected</td>\n<td>已选</td>\n<td>Selected</td>\n</tr>\n<tr>\n<td>list</td>\n<td>列表</td>\n<td>List</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>请输入关键字</td>\n<td>Please input keyword</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `entry_selector_f371f`,\n style: `.entry_selector_f371f .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}`,\n list: [{\n title: `基础用法`,\n description: `展示EntrySelector组件的基本使用，包括条目选择、搜索过滤和拖拽排序功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { message } = antd;\n\n// 模拟面试题库数据\nconst mockQuestionDatabase = [\n { id: 1, title: '请简单介绍一下你自己', category: '个人介绍', difficulty: '简单' },\n { id: 2, title: '你认为自己最大的优点和缺点是什么？', category: '性格分析', difficulty: '简单' },\n { id: 3, title: '请描述一次你成功解决团队冲突的经历', category: '团队协作', difficulty: '中等' },\n { id: 4, title: '你如何处理工作中的高压情况？请举例说明', category: '压力管理', difficulty: '中等' },\n { id: 5, title: '请分享一次你快速作出决策的经验', category: '决策能力', difficulty: '中等' },\n { id: 6, title: '你如何看待加班？如何平衡工作与生活？', category: '工作态度', difficulty: '简单' },\n { id: 7, title: '描述一次你主动承担责任并超出预期的项目', category: '主动性', difficulty: '困难' },\n { id: 8, title: '你如何让团队成员有效高质完成工作？', category: '团队管理', difficulty: '困难' }\n];\n\nconst BaseExample = () => {\n const [selectedQuestions, setSelectedQuestions] = useState([\n { id: 1, title: '请简单介绍一下你自己' }\n ]);\n\n return (\n <EntrySelector\n value={selectedQuestions}\n onChange={value => {\n setSelectedQuestions(value);\n message.success(\\`已选择 \\${value.length} 道题目\\`);\n }}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n // 模拟API请求延迟\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockQuestionDatabase;\n \n // 根据搜索关键词过滤\n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => {\n return { title: searchText };\n }}\n searchPlaceholder=\"搜索题目或分类\"\n selectedTitle=\"已选题目（可拖拽排序）\"\n listTitle=\"题目库\"\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `自定义渲染`,\n description: `展示如何自定义渲染已选条目和可选条目，实现更丰富的交互功能`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { useState } = React;\nconst { Tag, Switch, Flex, message } = antd;\n\n// 模拟产品特性数据\nconst mockFeatures = [\n { id: 1, title: '用户注册登录', status: '已完成', priority: 'high', category: '基础功能' },\n { id: 2, title: '商品搜索与筛选', status: '开发中', priority: 'high', category: '核心功能' },\n { id: 3, title: '购物车功能', status: '已完成', priority: 'high', category: '核心功能' },\n { id: 4, title: '订单管理', status: '待开发', priority: 'medium', category: '核心功能' },\n { id: 5, title: '支付集成', status: '待开发', priority: 'high', category: '核心功能' },\n { id: 6, title: '用户评价系统', status: '开发中', priority: 'medium', category: '增值功能' },\n { id: 7, title: '数据统计面板', status: '待开发', priority: 'low', category: '增值功能' },\n { id: 8, title: '消息推送', status: '已完成', priority: 'medium', category: '增值功能' }\n];\n\nconst priorityColors = {\n high: 'red',\n medium: 'orange',\n low: 'blue'\n};\n\nconst statusColors = {\n '已完成': 'green',\n '开发中': 'blue',\n '待开发': 'default'\n};\n\nconst CustomRenderExample = () => {\n const [selectedFeatures, setSelectedFeatures] = useState([]);\n\n return (\n <EntrySelector\n value={selectedFeatures}\n onChange={setSelectedFeatures}\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockFeatures;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.includes(title) || item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索特性名称或分类\"\n selectedTitle=\"已选特性（需排期开发）\"\n // 自定义渲染已选条目：展示优先级开关\n renderSelectedItem={(item, { el, onReplace }) => {\n return (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n <Flex align=\"center\" gap={8}>\n <span style={{ fontSize: '12px' }}>高优先级</span>\n <Switch\n size=\"small\"\n checked={item.isPriority}\n onChange={checked => {\n onReplace({ ...item, isPriority: checked });\n message.info(\\`已\\${checked ? '开启' : '关闭'} \"\\${item.title}\" 的优先级\\`);\n }}\n />\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染可选条目：展示标签和状态\n renderItem={(item, { el }) => {\n return (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={statusColors[item.status]} style={{ margin: 0 }}>\n {item.status}\n </Tag>\n <Tag color={priorityColors[item.priority]} style={{ margin: 0 }}>\n {item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n );\n }}\n // 自定义渲染操作选项\n renderOptions={(item, { fetchApi }) => {\n return [\n {\n children: '查看详情',\n onClick: () => {\n message.info(\\`查看特性：\\${item.title}\\`);\n }\n },\n {\n children: '编辑',\n onClick: () => {\n message.info(\\`编辑特性：\\${item.title}\\`);\n }\n }\n ];\n }}\n maxScrollerHeight={600}\n />\n );\n};\n\nrender(<CustomRenderExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `完整功能`,\n description: `展示EntrySelector的完整功能，包括添加新条目、操作选项、自定义标题等`,\n code: `const { default: EntrySelector } = _EntrySelector;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { useState } = React;\nconst { Button, Modal, Form, Input, Select, message, Tag, Flex } = antd;\n\n// 模拟候选人技能数据\nconst mockSkillsDatabase = [\n { id: 1, title: 'JavaScript', level: 'advanced', category: '前端开发' },\n { id: 2, title: 'TypeScript', level: 'advanced', category: '前端开发' },\n { id: 3, title: 'React', level: 'advanced', category: '前端框架' },\n { id: 4, title: 'Vue.js', level: 'intermediate', category: '前端框架' },\n { id: 5, title: 'Node.js', level: 'advanced', category: '后端开发' },\n { id: 6, title: 'Python', level: 'intermediate', category: '后端开发' },\n { id: 7, title: 'MySQL', level: 'advanced', category: '数据库' },\n { id: 8, title: 'MongoDB', level: 'intermediate', category: '数据库' },\n { id: 9, title: 'Docker', level: 'intermediate', category: '运维工具' },\n { id: 10, title: 'Git', level: 'advanced', category: '版本控制' }\n];\n\nconst levelColors = {\n advanced: 'green',\n intermediate: 'blue',\n beginner: 'orange'\n};\n\nconst levelLabels = {\n advanced: '精通',\n intermediate: '熟练',\n beginner: '了解'\n};\n\nconst FullFeaturesExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [selectedSkills, setSelectedSkills] = useState([]);\n const [modalVisible, setModalVisible] = useState(false);\n const [form] = Form.useForm();\n\n // 处理添加新技能\n const handleAdd = ({ fetchApi, onChange }) => {\n setModalVisible(true);\n };\n\n // 提交新技能\n const handleSubmit = async () => {\n try {\n const values = await form.validateFields();\n const newSkill = {\n id: Date.now(),\n ...values,\n isNew: true\n };\n onChange(prev => [...prev, newSkill]);\n message.success(\\`已添加技能：\\${values.title}\\`);\n setModalVisible(false);\n form.resetFields();\n } catch (error) {\n console.error('表单验证失败:', error);\n }\n };\n\n return (\n <PureGlobal\n preset={{\n ajax: async api => {\n return { data: { code: 0, data: api.loader() } };\n }\n }}\n >\n <EntrySelector\n value={selectedSkills}\n onChange={setSelectedSkills}\n // 添加新条目功能\n onAdd={handleAdd}\n // API配置\n pagination={{ paramsType: 'params' }}\n api={{\n loader: async ({ params }) => {\n await new Promise(resolve => setTimeout(resolve, 300));\n \n const { title } = params || {};\n let filteredData = mockSkillsDatabase;\n \n if (title) {\n filteredData = filteredData.filter(\n item => item.title.toLowerCase().includes(title.toLowerCase()) || \n item.category.includes(title)\n );\n }\n \n return {\n totalCount: filteredData.length,\n pageData: filteredData\n };\n }\n }}\n // 搜索配置\n getSearchProps={({ searchText }) => ({ title: searchText })}\n searchPlaceholder=\"搜索技能名称或分类\"\n // 自定义标题\n selectedTitle=\"候选人技能清单（可拖拽调整顺序）\"\n renderListTitle={({ fetchApi, searchProps, setSearchProps }) => (\n <Flex justify=\"space-between\" align=\"center\" style={{ width: '100%' }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>\n 技能库 ({fetchApi.data?.totalCount || 0} 项)\n </span>\n </Flex>\n )}\n // 自定义渲染已选条目\n renderSelectedItem={(item, { el, onReplace }) => (\n <Flex vertical gap={4} style={{ width: '100%' }}>\n {el}\n {item.isNew && <Tag color=\"cyan\" style={{ margin: 0 }}>新增</Tag>}\n </Flex>\n )}\n // 自定义渲染可选条目\n renderItem={(item, { el }) => (\n <Flex vertical gap={4}>\n {el}\n <Flex gap={4}>\n <Tag color={levelColors[item.level]} style={{ margin: 0 }}>\n {levelLabels[item.level]}\n </Tag>\n <Tag color=\"purple\" style={{ margin: 0 }}>\n {item.category}\n </Tag>\n </Flex>\n </Flex>\n )}\n // 操作选项\n options={[\n {\n children: '查看详情',\n onClick: (e, item) => {\n Modal.info({\n title: item.title,\n content: (\n <div>\n <p>技能等级：{levelLabels[item.level]}</p>\n <p>所属分类：{item.category}</p>\n </div>\n )\n });\n }\n },\n {\n children: '添加到收藏',\n onClick: (e, item) => {\n message.success(\\`已收藏技能：\\${item.title}\\`);\n }\n }\n ]}\n maxScrollerHeight={600}\n />\n\n {/* 添加新技能的弹窗 */}\n <Modal\n title=\"添加新技能\"\n open={modalVisible}\n onOk={handleSubmit}\n onCancel={() => {\n setModalVisible(false);\n form.resetFields();\n }}\n okText=\"确定\"\n cancelText=\"取消\"\n >\n <Form form={form} layout=\"vertical\">\n <Form.Item\n label=\"技能名称\"\n name=\"title\"\n rules={[{ required: true, message: '请输入技能名称' }]}\n >\n <Input placeholder=\"例如：GraphQL\" />\n </Form.Item>\n <Form.Item\n label=\"熟练程度\"\n name=\"level\"\n rules={[{ required: true, message: '请选择熟练程度' }]}\n >\n <Select placeholder=\"请选择\">\n <Select.Option value=\"beginner\">了解</Select.Option>\n <Select.Option value=\"intermediate\">熟练</Select.Option>\n <Select.Option value=\"advanced\">精通</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item\n label=\"所属分类\"\n name=\"category\"\n rules={[{ required: true, message: '请输入所属分类' }]}\n >\n <Input placeholder=\"例如：前端开发、后端开发\" />\n </Form.Item>\n </Form>\n </Modal>\n </PureGlobal>\n );\n});\n\nrender(<FullFeaturesExample />);\n\n`,\n scope: [{\n name: \"_EntrySelector\",\n packageName: \"@kne/current-lib_entry-selector\",\n importStatement: \"import * as _EntrySelector from \\\"@kne/entry-selector\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n},{\n name: \"remoteLoader\",\n packageName: \"@kne/remote-loader\",\n component: component_6\n}]\n}]\n }\n};\nexport default readmeConfig;\n","import EntrySelector from '@components/entry-selector/README.md';export default {EntrySelector};\nexport const manifest = {\"name\":\"entry-selector\",\"version\":\"0.2.5\",\"open-version\":true,\"public-url\":\"/entry-selector\",\"modules\":[{\"name\":\"entry-selector\",\"baseDir\":\"/home/runner/work/entry-selector/entry-selector\",\"description\":\"EntrySelector是一个用于选择和管理条目列表的 React 组件。它提供了一个直观的界面，允许用户从可选列表中选择条目，并对已选条目进行管理，包括排序、搜索和删除等操作。\",\"packageName\":\"@kne/entry-selector\"}]};"],"names":["EntrySelector","name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component","manifest"],"sourceRoot":""}