{"id":1489,"date":"2024-05-16T15:35:27","date_gmt":"2024-05-16T15:35:27","guid":{"rendered":"https:\/\/www.nicekj.com\/?p=1489"},"modified":"2024-05-16T15:35:38","modified_gmt":"2024-05-16T15:35:38","slug":"ant-codeai-tongguojietushengchengdaima-2","status":"publish","type":"post","link":"https:\/\/www.nicekj.com\/ant-codeai-tongguojietushengchengdaima-2.html","title":{"rendered":"ant-codeAI \u901a\u8fc7\u622a\u56fe\u751f\u6210\u4ee3\u7801"},"content":{"rendered":"<h3 data-id=\"heading-0\">\u4e00\u3001\u2728\u7b80\u4ecb<\/h3>\n<p>\u6700\u8fd1\u5f00\u6e90\u9879\u76eescreenshot-to-code\u706b\u7206\uff0c\u5728screenshot-to-code\u57fa\u7840\u4e0a\u5c06\u540e\u7aef\u4ee3\u7801\u6539\u4e3anode\uff0c\u5f00\u6e90\u5730\u5740<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsparrow-js%2Fant-codeAI\" target=\"_blank\" title=\"https:\/\/github.com\/sparrow-js\/ant-codeAI\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">ant-codeAI<\/a>\uff0c\u63d0\u4f9b\u622a\u56fe\u751f\u6210\u4ee3\u7801\u7684\u529f\u80fd\uff0c\u4f7f\u7528GPT-4 Vision\u751f\u6210\uff0c\u5728\u539f\u6709\uff08React\uff0cTailwind CSS\uff09\u7b49\u4ee3\u7801\u57fa\u7840\u4e0a\uff0c\u65b0\u589ereact\/ant design\u7684\u4ee3\u7801\u8f93\u51fa\uff0c\u540e\u7eed\u4f1a\u9010\u6b65\u8fed\u4ee3\u81ea\u5df1\u7684\u521b\u610f\uff0c\u4e0d\u6b62\u4e8e\u622a\u56fe\u751f\u6210\u4ee3\u7801\u3002<\/p>\n<p><span href=\"https:\/\/www.ixigua.com\/7311564325506777650?utm_source=xiguastudio\" target=\"_blank\" class=\"jj-video-container\" style=\"box-sizing:border-box;display:block;position:relative;z-index:1;\"><iframe class=\"jj-video-frame\" style=\"position:absolute;visibility:hidden;z-index:1;width:100%;aspect-ratio: 16\/9;border-radius:8px;border:0.5px solid rgba(128,128,128,0.4);\" src=\"https:\/\/www.ixigua.com\/iframe\/7311564325506777650?autoplay=0\" loading=\"lazy\" allowfullscreen=\"\" frameborder=\"0\" referrerpolicy=\"unsafe-url\"><\/iframe><span class=\"jj-video-placeholder\"><img decoding=\"async\" class=\"jj-video-placeholder-img medium-zoom-image\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/44acb4da85b988f38de59e170e41945e.png\" style=\"width:100%;aspect-ratio: 16\/9;border-radius:8px;border:0.5px solid rgba(128,128,128,0.4);\" loading=\"lazy\"><\/span><\/span><\/p>\n<h3 data-id=\"heading-1\">\u4e8c\u3001\ud83d\ude80 \u672c\u5730\u8bd5\u7528<\/h3>\n<p>\u53ef\u4ee5\u5148\u4e0b\u8f7d\u4e0b\u6765\u672c\u5730\u8fd0\u884c\u5c1d\u8bd5\uff0c\u5c06\u5c3d\u5feb\u627e\u670d\u52a1\u5668\u90e8\u7f72\u5230\u7ebf\u4e0a\uff0c\uff08\u6709\u6ca1\u6709\u514d\u8d39\u7684\u90e8\u7f72\u73af\u5883\u5e2e\u63a8\u8350\u4e00\u4e2a\ud83e\udd26\u200d\u2642\ufe0f\uff09\u3002\u817e\u8baf\u4e91\u6709\u90e8\u7f72\u5982\u9700\u8981\u5c1d\u8bd5\u53ef\u4ee5\u79c1\u804a\u3002<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">shell<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-shell code-block-extension-codeShowNum\" lang=\"shell\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\">cd client<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\">yarn dev<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\">cd service<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\">npm run start:dev<\/span>\n<\/code><\/pre>\n<h3 data-id=\"heading-2\">\u4e09\u3001\ud83d\udee0 \u8bbe\u7f6e<\/h3>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/db880be0d9f6afb87d7e42b6a144a042.png\" alt=\"289367350-2daf0da1-dc53-4c2a-b450-2667abcf940b.png\" \/><\/figure>\n<\/p>\n<ul>\n<li>OpenAI API Key<\/li>\n<li>OpenAI Base URL\uff1a\u4ee3\u7406\u5730\u5740\uff0c\u9ed8\u8ba4\uff1a<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fapi.openai.com%2Fv1\" target=\"_blank\" title=\"https:\/\/api.openai.com\/v1\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">api.openai.com\/v1<\/a><\/li>\n<li>Mock AI Response\uff1a\u6a21\u62df AI\u8fd4\u56de\u7684\u6570\u636e\uff0c\u4e0d\u76f4\u63a5\u8bf7\u6c42openAI\uff0c\u8bf7\u6c42OpenAI \u63a5\u53e3\u4f1a\u6d88\u8017\u8d39\u7528\u3002<\/li>\n<\/ul>\n<h3 data-id=\"heading-3\">\u56db\u3001\ud83d\udd25 \u4f7f\u7528\u573a\u666f<\/h3>\n<p>\u8bd5\u7528\u901a\u8fc7\u56fe\u7247\u751f\u6210\u7684\u4ee3\u7801\u7ec6\u8282\u51c6\u786e\u5ea6\u4e0d\u9ad8\u3002\u53ef\u4ee5\u7528\u4e8e\u5feb\u901f\u9a8c\u8bc1\u65b9\u6848\u3001\u5bf9\u7ec6\u8282\u4e0d\u654f\u611f\u7684\u9879\u76ee\u3001\u5728\u751f\u6210\u7684\u4ee3\u7801\u57fa\u7840\u4e0a\u81ea\u884c\u8865\u5168\u7ec6\u8282\u3002<\/p>\n<ul>\n<li>\u4e2d\u540e\u53f0\u9879\u76ee<\/li>\n<li>\u5feb\u901f\u9a8c\u8bc1\u65b9\u6848\uff0c\u5bf9\u8fd8\u539f\u5ea6\u8981\u6c42\u4e0d\u9ad8\u7684\u9879\u76ee<\/li>\n<li>\u751f\u6210\u4ee3\u7801\u540e\u4e8c\u6b21\u5f00\u53d1<\/li>\n<\/ul>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/7ce8c062ebb4f84b3697cb563ce4ef0e.png\" alt=\"289540880-781e496e-6141-413b-804a-72e7c17f0fe1.png\" \/><\/figure>\n<\/p>\n<h3 data-id=\"heading-4\">\u4e94\u3001\u2328\ufe0f \u8f93\u51fa\u4ee3\u7801<\/h3>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">html<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-html code-block-extension-codeShowNum\" lang=\"html\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Registration Form<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/antd@5.12.1\/dist\/antd.min.css\"<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"root\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/react\/umd\/react.development.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/react-dom\/umd\/react-dom.development.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/dayjs@1.11.10\/dayjs.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/@babel\/standalone\/babel.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/antd@5.12.1\/dist\/antd.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\">  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/babel\"<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\">    <span class=\"hljs-keyword\">const<\/span> { <span class=\"hljs-title class_\">Form<\/span>, <span class=\"hljs-title class_\">Input<\/span>, <span class=\"hljs-title class_\">Cascader<\/span>, <span class=\"hljs-title class_\">Checkbox<\/span>, <span class=\"hljs-title class_\">Button<\/span>,  <span class=\"hljs-title class_\">Select<\/span>} = antd;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\">    <span class=\"hljs-keyword\">const<\/span> residenceOptions = [<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\">      {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\">        <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-string\">'zhejiang'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\">        <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">'Zhejiang'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\">        <span class=\"hljs-attr\">children<\/span>: [<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"23\">          {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"24\">            <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-string\">'hangzhou'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"25\">            <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">'Hangzhou'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"26\">            <span class=\"hljs-attr\">children<\/span>: [<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"27\">              {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"28\">                <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-string\">'westlake'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"29\">                <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">'West Lake'<\/span>,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"30\">              },<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"31\">            ],<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"32\">          },<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"33\">        ],<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"34\">      },<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"35\">      <span class=\"hljs-comment\">\/\/ ...other province options<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"36\">    ];<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"37\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"38\">    <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">RegistrationForm<\/span>(<span class=\"hljs-params\"><\/span>) {<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"39\">      <span class=\"hljs-keyword\">return<\/span> (<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"40\">        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form<\/span><\/span><\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"41\">          <span class=\"hljs-attr\">labelCol<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">span:<\/span> <span class=\"hljs-attr\">8<\/span> }}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"42\">          <span class=\"hljs-attr\">wrapperCol<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">span:<\/span> <span class=\"hljs-attr\">16<\/span> }}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"43\">          <span class=\"hljs-attr\">layout<\/span>=<span class=\"hljs-string\">\"horizontal\"<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"44\">        &gt;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"45\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Nickname\"<\/span> <span class=\"hljs-attr\">required<\/span> <span class=\"hljs-attr\">tooltip<\/span>=<span class=\"hljs-string\">\"This is a required field\"<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"46\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Input<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"47\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"48\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Habitual Residence\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"49\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Cascader<\/span><\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"50\">              <span class=\"hljs-attr\">options<\/span>=<span class=\"hljs-string\">{residenceOptions}<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"51\">              <span class=\"hljs-attr\">defaultValue<\/span>=<span class=\"hljs-string\">{[<\/span>'<span class=\"hljs-attr\">zhejiang<\/span>', '<span class=\"hljs-attr\">hangzhou<\/span>', '<span class=\"hljs-attr\">westlake<\/span>']}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"52\">              <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Please select your habitual residence\"<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"53\">            \/&gt;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"54\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"55\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Phone Number\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"56\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Input<\/span> <span class=\"hljs-attr\">addonBefore<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">Select<\/span> <span class=\"hljs-attr\">defaultValue<\/span>=<span class=\"hljs-string\">\"+86\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">width:<\/span> <span class=\"hljs-attr\">70<\/span> }}&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"57\">              {\/* Add other country codes as needed *\/}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"58\">            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Select<\/span>&gt;<\/span>} style={{ width: '100%' }} \/&gt;<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"59\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"60\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Donation\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"61\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Input<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"\"<\/span> \/&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"62\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"63\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Website\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"64\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Input<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"website\"<\/span> \/&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"65\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"66\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Intro\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"67\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Input.TextArea<\/span> <span class=\"hljs-attr\">showCount<\/span> <span class=\"hljs-attr\">maxLength<\/span>=<span class=\"hljs-string\">{100}<\/span> \/&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"68\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"69\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Gender\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"70\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Select<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"select your gender\"<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"71\">              {\/* Add gender options as needed *\/}<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"72\">            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Select<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"73\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"74\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">\"Captcha\"<\/span> <span class=\"hljs-attr\">extra<\/span>=<span class=\"hljs-string\">\"We must make sure that your are a human.\"<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"75\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Input<\/span> \/&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"76\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"77\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">wrapperCol<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">offset:<\/span> <span class=\"hljs-attr\">8<\/span>, <span class=\"hljs-attr\">span:<\/span> <span class=\"hljs-attr\">16<\/span> }}&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"78\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Checkbox<\/span>&gt;<\/span>I have read the agreement<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Checkbox<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"79\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"80\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Form.Item<\/span> <span class=\"hljs-attr\">wrapperCol<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">offset:<\/span> <span class=\"hljs-attr\">8<\/span>, <span class=\"hljs-attr\">span:<\/span> <span class=\"hljs-attr\">16<\/span> }}&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"81\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"primary\"<\/span>&gt;<\/span>Register<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Button<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"82\">          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form.Item<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"83\">        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Form<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"84\">      );<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"85\">    }<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"86\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"87\">    <span class=\"hljs-title class_\">ReactDOM<\/span>.<span class=\"hljs-title function_\">render<\/span>(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">RegistrationForm<\/span> \/&gt;<\/span><\/span>, <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">'root'<\/span>));<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"88\">  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"89\"><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"90\"><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/span>\n<\/code><\/pre>\n<h3 data-id=\"heading-5\">\u516d\u3001\ud83d\ude4b\u200d\u2642\ufe0f \u5f00\u6e90\u5730\u5740<\/h3>\n<p><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsparrow-js%2Fant-codeAI\" target=\"_blank\" title=\"https:\/\/github.com\/sparrow-js\/ant-codeAI\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">ant-codeAI<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>ant-codeAI\u63d0\u4f9b\u622a\u56fe\u751f\u6210\u4ee3\u7801\u7684\u529f\u80fd\uff0c\u4f7f\u7528GPT-4 Vision\u751f\u6210\uff0c\u5728screensh\u539f\u6709\uff08React\uff0cTailwind CSS\uff09\u7b49\u4ee3\u7801\u57fa\u7840\u4e0a\uff0c\u65b0\u589ereact\/ant design\u7684\u4ee3\u7801\u8f93\u51fa<\/p>\n","protected":false},"author":1,"featured_media":9075,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","views":"","footnotes":""},"categories":[3],"tags":[136,126,127,128,129],"collection":[],"class_list":["post-1489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fenlei2","tag-136","tag-gpt","tag-ai","tag-128","tag-129"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts\/1489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/comments?post=1489"}],"version-history":[{"count":0,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts\/1489\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/media\/9075"}],"wp:attachment":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/media?parent=1489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/categories?post=1489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/tags?post=1489"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/collection?post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}