export declare const uiDesignPromptTemplate = "# UI\u8BBE\u8BA1\u89C4\u5219\uFF0C\u7279\u522B\u6CE8\u610F\u5FC5\u987B\u4F7F\u7528UI\u89C4\u8303`.bytefun/UI\u8BBE\u8BA1\u89C4\u8303.md`\u91CC\u9762\u9ED8\u8BA4\u7684\u4E3B\u9898\u76AE\u80A4\u6765\u8BBE\u8BA1\uFF0C\u4E0D\u5F97\u4F7F\u7528\u5176\u4ED6\u4E3B\u9898\u76AE\u80A4\u3002\n\n## \u4E00\u3001\u6837\u5F0F\u89C4\u5219\n- \u6837\u5F0F\u4EE3\u7801\u5FC5\u987B\u4F7F\u7528\u7C7B\u9009\u62E9\u5668\u6837\u5F0FClass-based Style / Class Selector Style\u65B9\u5F0F\uFF0C\u4E0D\u5F97\u4F7F\u7528\u884C\u5185\u6837\u5F0FInline Style\u6216\u5916\u90E8\u6587\u4EF6\u3002\n- \u9075\u5FAA\u624B\u673A\u5C3A\u5BF8\u89C4\u683C(\u5BBD\u5EA6 393px \u9AD8\u5EA6 808px)\n- \u9996\u9875/\u63A8\u8350tab\u7684\u5206\u7C7B/\u529F\u80FD\u5404\u4E2A\u5165\u53E3\u7684\u56FE\u6807\u4E00\u822C\u9700\u8981\u4F7F\u7528\u4E0D\u4E00\u6837\u7684\u989C\u8272\uFF0C\u5F88\u5C11\u4F1A\u7EDF\u4E00\u5168\u90E8\u4F7F\u7528\u54C1\u724C\u4E3B\u9898\u8272\n- \u6240\u6709radio\u3001checkBox\u90FD\u5FC5\u987B\u4F7F\u7528i\u6807\u7B7E\u8BBE\u7F6EFontAwesome\u56FE\u6807\u6765\u5B9E\u73B0\uFF0C\u4E0D\u5F97\u4F7F\u7528\u7CFB\u7EDF\u7684input\u6807\u7B7E\u5B9E\u73B0\u3002\n- \u5982\u7528\u6237\u6CA1\u6709\u660E\u786E\u63CF\u8FF0\u8BF4\u660E\u9875\u9762\u80CC\u666F\u8272\uFF0C\u53EA\u6709\u95EA\u5C4F\u9875\u9762\u7684\u80CC\u666F\u8272\u5141\u8BB8\u8BBE\u7F6E\u54C1\u724C\u4E3B\u8272\u6216\u54C1\u724C\u4E3B\u8272\u4E0E\u54C1\u724C\u6B21\u8272\u7684\u6E10\u53D8\u8272\uFF0C\u5176\u4ED6\u9875\u9762\u5FC5\u987B\u4F7F\u7528\u975E \u54C1\u724C\u4E3B\u8272 \u4E0E\u975E \u54C1\u724C\u6B21\u8272 \u7684\u7EAF\u8272\u505A\u9875\u9762\u80CC\u666F\u8272\uFF0C\u6BD4\u5982\u4E00\u822C\u4F7F\u7528\u767D\u8272\u7CFB\uFF0C\u5982\u679C\u662F\u6697\u9ED1\u98CE\u90A3\u5C31\u662F\u9ED1\u8272\u7CFB\u3002\n- \u8F93\u5165\u6846`input`\u5982\u679C\u9700\u8981\u5C55\u793A\u6587\u5B57 label\uFF0C\u5C3D\u91CF\u4F7F\u7528 icon \u4EE3\u66FF\u6587\u5B57 label\uFF0C\u5E76\u4E14 icon \u91CD\u53E0\u5728\u8F93\u5165\u6846\u7684\u5DE6\u4FA7\uFF0C\u8FD9\u6837\u6574\u4E2A\u9875\u9762\u7684\u7A7A\u95F4\u5229\u7528\u7387\u9AD8\u3002\n- \u5982\u679C\u4E3B\u9898\u98CE\u683C\u662F\u6697\u9ED1\u98CE\u683C\u7684\u8BDD\uFF0C\u9ED8\u8BA4\u53EF\u4EE5\u7ED9\u6BCF\u4E2A\u9875\u9762\u6DFB\u52A0\u591A\u4E2A\u73BB\u7483\u6548\u679C\u7684\u5706\u5F62\u5F84\u5411\u6E10\u53D8\u80CC\u666F\uFF0C\u7C7B\u4F3C\u8FD9\u6837\uFF1A`background: radial-gradient(circle, rgba(0, 242, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);`\uFF0C\u91CC\u9762\u7684\u989C\u8272\u548C\u6E10\u53D8\u8303\u56F4\u53EF\u4EE5\u6839\u636E\u5B9E\u9645\u60C5\u51B5\u8C03\u6574\u3002\n- \u80CC\u666F\u8272\u4E3A\u4E86\u589E\u5F3A\u5C42\u6B21\u611F\uFF0C\u6DFB\u52A0\u7684\u68A6\u5E7B\u6CE1\u6CE1\u6216\u8005\u5706\u5F62\u5F84\u5411\u6E10\u53D8\u5143\u7D20\u7684div\uFF0C\u5FC5\u987B\u53EA\u80FD\u58F0\u660E\u4E3A`circle`\uFF0C\u5E76\u4E14\u4E00\u4E2Adiv\u7684`background:`\u53EA\u80FD\u58F0\u660E\u4E00\u4E2A`radial-gradient`\uFF0C\u6BD4\u5982\u6B63\u786E\u7684\u5199\u6CD5\uFF1Abackground: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%);\uFF0C\u5982\u679C\u9700\u8981\u591A\u4E2A`radial-gradient`\u5F84\u5411\u6E10\u53D8\u80CC\u666F\uFF0C\u6BCF\u4E2A\u5F84\u5411\u6E10\u53D8\u80CC\u666F\u90FD\u5FC5\u987B\u58F0\u660E\u4E3A\u4E00\u4E2Adiv\u8282\u70B9\uFF0C\u6BCF\u4E2Adiv\u7684`background:`\u53EA\u80FD\u58F0\u660E\u4E00\u4E2A`radial-gradient`\u3002\n- \u6309\u94AE\u3001\u5361\u7247\u3001item\u9879\u7B49\u5143\u7D20\u5FC5\u987B\u8981\u6709\u4E00\u4E2Ahover\u540E\u6539\u53D8\u80CC\u666F\u8272\u7684\u53CD\u9988\u6548\u679C\uFF0C\u4E0D\u80FD\u4F7F\u7528transform\u6548\u679C\uFF0C\u53EA\u80FD\u4F7F\u7528\u80CC\u666F\u8272\u6548\u679C\u3002\n- css\u6837\u5F0F\u91CC\u9762\u7684`background-image`\u5C5E\u6027\u7684\u503C\u5FC5\u987B\u662F\u8FDC\u7A0B\u56FE\u7247\uFF0C\u4E0D\u80FD\u8BBE\u7F6E\u4E0D\u662F\u8FDC\u7A0B\u56FE\u7247\u7684\u4EFB\u4F55\u503C\uFF0C\u6BD4\u5982\u4E0D\u80FD\u8BBE\u7F6E'base64'\u3001\u6E10\u53D8'radial-gradient'\u7B49\u3002\n\n## \u4E8C\u3001\u5FC5\u987B\u7ED9\u6BCF\u4E00\u4E2A\u8282\u70B9\u6DFB\u52A0id\u3001name\u3001nodeType\u5C5E\u6027\n- \u7279\u522B\u6CE8\u610F\uFF0C`i`\u548C`div`\u7B49\u6807\u7B7E\u4E5F\u5FC5\u987B\u6DFB\u52A0 id\u3001name\u3001nodeType \u5C5E\u6027\uFF0C\u6BCF\u4E00\u4E2A\u8282\u70B9\u90FD\u9700\u8981\u6DFB\u52A0\u8FD9\u4E09\u4E2A\u5C5E\u6027\uFF0C\u5343\u4E07\u522B\u6F0F\u6389\u4E86\uFF0C\u8FD9\u662F\u5FC5\u8981\u6761\u4EF6\n- id \u5C5E\u6027\u5FC5\u987B\u53EA\u80FD\u4F7F\u7528\u82F1\u6587\u6216\u6570\u5B57\u7EC4\u6210\uFF0C\u4E14\u4E0D\u80FD\u4EE5\u6570\u5B57\u5F00\u5934\uFF0C\u5E76\u4E14\u6574\u4E2A\u9875\u9762 id \u5C5E\u6027\u7684\u503C\u5FC5\u987B\u552F\u4E00\uFF0C\u4F7F\u7528\u9A7C\u5CF0\u7684\u547D\u540D\u65B9\u5F0F\n- name \u5C5E\u6027\u5FC5\u987B\u662F\u4E2D\u6587\u6216\u6570\u5B57\uFF0C\u5E76\u4E14\u4E0D\u80FD\u5305\u542B\u7279\u6B8A\u5B57\u7B26\n- \u5982\u679C\u662F\u901A\u8FC7\u70B9\u51FBitem\u9879\u5207\u6362\u5C55\u793A\u5185\u5BB9\u7684\uFF0C\u90A3\u4E48item\u9879\u7684nodeType\u5FC5\u987B\u662F`tabMenuBarItem`\uFF0Ctab panel\u7684nodeType\u5FC5\u987B\u662F`tabPanel`\uFF0C`tabMenuBarItem`\u7684\u7236\u4EB2\u5BB9\u5668\u662F`tabMenuBar`\uFF0C\u4E0D\u5F97\u4F7F\u7528`horizontalListView`\u6765\u4EE3\u66FF`tabMenuBar`\n- \u9875\u9762\u7684header\u6807\u9898\u680FnodeType\u5FC5\u987B\u662F`titleBar`\u6216\u8005`topNavigateBar`\uFF0C\u800C\u4E0D\u662F`container`\n- nodeType \u5C5E\u6027\u7684\u503C\u5FC5\u987B\u662F`\u7EC4\u4EF6\u7C7B\u578B\u679A\u4E3E (nodeType)\u679A\u4E3E` \u4E2D\u7684\u4E00\u4E2A\uFF0C\u4E00\u4E9B\u5E03\u5C40\u5BB9\u5668\u9700\u8981\u9075\u5B88\u4EE5\u4E0B\u8BF4\u660E\u6765\u9009\u62E9\u6B63\u786E\u7684nodeType\uFF1A\n  - \u5F00\u5173\u7EC4\u4EF6\uFF1A`switch`\uFF0C\u7528\u4E8E\u4E24\u4E2A\u72B6\u6001\u5207\u6362\u7684\u573A\u666F\uFF0C\u6BD4\u5982\uFF1A\u6253\u5F00/\u5173\u95ED\u3001\u663E\u793A/\u9690\u85CF\u3001\u540C\u610F/\u62D2\u7EDD\u7B49\u7B49\uFF0C\u5177\u4F53\u573A\u666F\u6BD4\u5982\uFF1A\u8BBE\u7F6E\u4E2D\u7684\u5F00\u5173\u529F\u80FD\u3001\u540C\u610F/\u62D2\u7EDD\u534F\u8BAE\u3001\u5BC6\u7801\u663E\u793A\u4E0E\u9690\u85CF\u56FE\u6807\u5F00\u5173\u7B49\uFF0C\u6BD4\u5982\uFF1A\n  ``` html\n    <div\n      id=\"passwordShowHideCheckbox\"\n      name=\"\u5BC6\u7801\u663E\u793A\u9690\u85CF\u5207\u6362\u5F00\u5173\"\n      nodeType=\"switch\"\n      class=\"password-show-hide-checkbox\"\n      onclick=\"togglePasswordShowHide()\"\n    >\n      <i\n        id=\"passwordShowHideIcon\"\n        name=\"\u5BC6\u7801\u663E\u793A\u9690\u85CF\u5207\u6362\u56FE\u6807\"\n        nodeType=\"icon\"\n        class=\"far fa-eye\"\n        checkedClass=\"far fa-eye-slash\"\n      ></i>\n    </div>\n  ```\n  - \u8131\u79BB\u6587\u6863\u6D41\u7684\u5F39\u7A97/Toast\u7A97\u53E3\u5BB9\u5668\uFF1A`dialogOverlay`\u3001`dialog`\u3001`toast`\uFF0C\u7528\u4E8E\u5C55\u793A\u5F39\u7A97/Toast\u7C7B\u522B\u7684loading\uFF0C\u4E0D\u5F97\u4F7F\u7528`oneStateContentContainer`\uFF0C\u5E94\u8BE5Toast\u7C7B\u522B\u4F7F\u7528`toast`\uFF0C\u5F39\u7A97\u7C7B\u522B\u4F7F\u7528`dialogOverlay`\u5305\u542B1\u4E2A`dialog`\uFF0C`dialog`\u662F\u5BF9\u8BDD\u6846\u7684\u5185\u5BB9\u5BB9\u5668\uFF0C\u4E00\u822C\u5C4F\u5E55\u5C45\u4E2D\u663E\u793A\u3002\n  - \u5217\u8868\u5BB9\u5668\uFF1A`verticalListView`\u3001`horizontalListView`\u3001`listItemCard`\uFF0C\u7528\u4E8E\u5E03\u5C40\u591A\u4E2A\u5217\u8868\u9879\uFF0C\u6BD4\u5982\uFF1A\u5546\u54C1\u5217\u8868\u3001\u5206\u7C7B\u5217\u8868\u3001\u6807\u7B7E\u5217\u8868\u7B49\uFF0C\u53EF\u4EE5\u652F\u6301\u591A\u884C\u591A\u5217\u7684\u5217\u8868\u5E03\u5C40\n  - \u5217\u8868\u9875\u811A\u5BB9\u5668\uFF1A`listFooterContainer`\uFF0C\u7528\u4E8E\u5E03\u5C40\u5217\u8868\u7684\u9875\u811A\uFF0C\u6BD4\u5982\uFF1A\u52A0\u8F7D\u66F4\u591A\u3001\u6CA1\u6709\u66F4\u591A\u4E86\u7B49\n  - tab\u9009\u9879\u5361\uFF1A`tabPanelFather`\u4E0E`tabMenuBar`\u7EC4\u5408\u5B9E\u73B0tab\u9009\u9879\u5361\uFF0C\u6CE8\u610FtabMenuBar\u652F\u6301\u6A2A\u5411\u548C\u7AD6\u5411\u7684tab\u9009\u9879\u5361\uFF0C\u6BD4\u5982\u5206\u7C7B\u7AD6\u5411\u7684tab\u9009\u9879\u5361\u83DC\u5355\u680F\uFF0C\u4E00\u822C\u5206\u7C7B\u90FD\u4F7F\u7528tab\u9009\u9879\u5361\u6765\u5B9E\u73B0\uFF0C\u7981\u6B62\u4F7F\u7528`verticalListView`\u548C`horizontalListView`\u5217\u8868\u6765\u4EE3\u66FFtab\u9009\u9879\u5361\u3002\n  - \u7F51\u683C\u5BB9\u5668\uFF1AgridContainer\u7528\u4E8E\u5E03\u5C40\u591A\u4E2A\u7F51\u683C\u9879\uFF0C\u91CC\u9762\u5305\u542BN\u4E2AgridItem\uFF0C\u6BD4\u5982\uFF1A\u5206\u7C7B\u7F51\u683C\u5165\u53E3\n  - \u6D41\u5F0F\u5BB9\u5668\uFF1A\u7528\u4E8E\u5E03\u5C40\u591A\u4E2A\u5B50\u9879\uFF0C\u5B50\u9879\u53EF\u4EE5\u5728\u4E00\u884C\u663E\u793A\uFF0C\u5F53\u4F4D\u7F6E\u4E0D\u591F\u65F6\u5C31\u6362\u884C\u663E\u793A\uFF0C\u6BD4\u5982\uFF1A\u4E00\u7EC4\u6807\u7B7Etag\u7684\u6392\u7248\u5E03\u5C40\n  - \u591A\u72B6\u6001\u5BB9\u5668\uFF1A`multiStateContainer`, `oneStateContentContainer`\uFF0C\u7528\u4E8E\u4E0D\u662F\u901A\u8FC7\u4EA4\u4E92\uFF0C\u800C\u662F\u901A\u8FC7\u903B\u8F91\u72B6\u6001\u53D8\u91CF\u53D8\u5316\u800C\u663E\u793A\u4E0D\u540C\u72B6\u6001\u7684\u5185\u5BB9\u5BB9\u5668\uFF0C\u6BD4\u5982\uFF1A\u767B\u5F55\u72B6\u6001\u548C\u672A\u767B\u5F55\u72B6\u6001\u5206\u522B\u663E\u793A\u4E0D\u540C\u7684\u5185\u5BB9\u3001\u4E0D\u540C\u6743\u9650/\u7B49\u7EA7/\u65F6\u671F\u7B49\u7B49\u663E\u793A\u4E0D\u540C\u7684\u529F\u80FD\uFF0C\u7B49\u7B49\u8FD9\u4E9B\u901A\u8FC7\u903B\u8F91\u72B6\u6001\u53D8\u91CF\u53D8\u5316\u800C\u663E\u793A\u4E0D\u540C\u72B6\u6001\u7684\u5185\u5BB9\u5BB9\u5668\uFF0C\u90FD\u5FC5\u987B\u4F7F\u7528`multiStateContainer`\u548C`oneStateContentContainer`\u6765\u5B9E\u73B0\uFF0C\u7279\u522B\u6CE8\u610F\u8131\u79BB\u6587\u6863\u6D41\u7684\u5F39\u7A97/Toast\u7A97\u53E3\u5BB9\u5668\u7C7B\u522B\u7684loading\uFF0C\u4E0D\u5F97\u4F7F\u7528`oneStateContentContainer`\uFF0C\u5E94\u8BE5\u4F7F\u7528`dialogOverlay/dialog`\u6216\u8005`toast`\u3002\n- \u9AD8\u7EA7\u7EC4\u4EF6\u8282\u70B9\u7684nodeType\u7ED3\u6784\u89C4\u5219\uFF1A\n  - \u5BF9\u8BDD\u6846\uFF1A`dialogOverlay`\u662F\u5F39\u7A97/Toast\u7A97\u53E3\u5BB9\u5668\u7684\u906E\u7F69\u5C42\uFF0C`dialog`\u662F\u5BF9\u8BDD\u6846\u7684\u5185\u5BB9\u5BB9\u5668\uFF0C`dialogOverlay`\u5305\u542B\u4E00\u4E2A`dialog`\uFF0C`dialog`\u4E00\u822C\u5C4F\u5E55\u5C45\u4E2D\u663E\u793A\n  - tab \u9009\u9879\u5361\uFF1A`tabMenuBar`\u662Ftab\u9009\u9879\u5361\u83DC\u5355\u680F\uFF0C\u91CC\u9762\u5305\u542BN\u4E2A`tabMenuBarItem`\uFF0C`tabPanelFather`\u662Ftab\u9009\u9879\u5361\u5185\u5BB9\u5BB9\u5668\uFF0C\u91CC\u9762\u5305\u542BN\u4E2A`tabPanel`\uFF0C`tabMenuBar`\u548C`tabPanelFather`\u5FC5\u987B\u540C\u65F6\u5B58\u5728\uFF0C`tabPanel`\u7684\u6570\u91CF\u5FC5\u987B\u548C`tabMenuBarItem`\u7684\u6570\u91CF\u76F8\u540C\uFF0C\u6CE8\u610FtabMenuBar\u652F\u6301\u6A2A\u5411\u548C\u7AD6\u5411\u7684tab\u9009\u9879\u5361\uFF0C\u6BD4\u5982\u5206\u7C7B\u7AD6\u5411\u7684tab\u9009\u9879\u5361\u83DC\u5355\u680F\uFF0C\u4E00\u822C\u5206\u7C7B\u90FD\u4F7F\u7528tab\u9009\u9879\u5361\u6765\u5B9E\u73B0\uFF0C\u7981\u6B62\u4F7F\u7528`verticalListView`\u548C`horizontalListView`\u5217\u8868\u6765\u4EE3\u66FFtab\u9009\u9879\u5361\u3002\n  - viewPager \u8F6E\u64AD\uFF1A`viewPager`\u662F\u8F6E\u64AD\u5BB9\u5668\uFF0C\u91CC\u9762\u5305\u542BN\u4E2A`viewPagerItem`\uFF0C`viewPagerIndicatorContainer`\u662F\u8F6E\u64AD\u6307\u793A\u5668\u5BB9\u5668\uFF0C`viewPager`\u4E0E`viewPagerIndicatorContainer`\u5FC5\u987B\u540C\u65F6\u5B58\u5728\n  - \u4E00\u884C\u4E0D\u591F\u4F4D\u7F6E\u663E\u793A\u5C31\u6362\u884C\u7684\u5BB9\u5668\uFF1A`inlineBlockAndWrap`\uFF0C\u91CC\u9762\u5305\u542BN\u4E2A`blockItem`\uFF0C`blockItem`\u662F\u5B83\u7684\u5B50\u9879\n  - \u591A\u72B6\u6001\u5BB9\u5668\uFF1A\u4E00\u4E2A`multiStateContainer`\u591A\u72B6\u6001\u5BB9\u5668\u5305\u542B\u591A\u4E2A`oneStateContentContainer`\n\n- \u7EC4\u4EF6\u7C7B\u578B\u679A\u4E3E (nodeType)\u679A\u4E3E\uFF1A\n\n  - \u5F62\u72B6\uFF1A`rect`, `circle`, `line`\n  - \u57FA\u7840\u7EC4\u4EF6\uFF1A`text`\u3001`button`\u3001`input`\u3001`icon`\u3001`image`\n  - \u57FA\u7840\u5BB9\u5668\uFF1A`container`\n  - \u7F51\u683C\u5BB9\u5668\uFF1A`gridContainer`\u3001`gridItem`\n  - \u6D41\u5F0F\u5BB9\u5668\uFF1A`inlineBlockAndWrap`\u3001`blockItem`\n  - \u5F00\u5173\uFF1A`switch`\n  - \u5355\u9009\uFF1A`radioGroup`\u3001`radio`\n  - \u591A\u9009\uFF1A`checkBoxGroup`\u3001`checkBox`\n  - \u9876\u90E8\u5BFC\u822A\u680F\uFF1A`titleBar`\u3001`topNavigateBar`\n  - \u5E95\u90E8\u64CD\u4F5C\u680F\uFF1A`bottomOperateBar`\n  - \u591A\u72B6\u6001\u5BB9\u5668\uFF1A`multiStateContainer`, `oneStateContentContainer`\n  - \u5217\u8868\uFF1A`verticalListView`, `horizontalListView`, `listItemCard`\u3001`listFooterContainer`\n  - \u8F6E\u64AD\uFF1A`viewPager`, `viewPagerItem`, `viewPagerIndicatorContainer`\n  - tab \u9009\u9879\u5361\uFF1A`tabPanelFather`, `tabPanel`, `tabMenuBar`, `tabMenuBarItem`\n  - \u5E95\u90E8\u5BFC\u822A: `bottomTabContentContainer`, `subPage`, `bottomTabNavigateBar`, `bottomTabNavigateBarItem`\n  - \u5BF9\u8BDD\u6846\uFF1A`dialogOverlay`, `dialogContent`\n  - toast \u63D0\u793A\uFF1A`toast`\n  - \u4E0B\u62C9\u83DC\u5355\uFF1A`dropDownMenu`\n  - \u4FA7\u6ED1\u9762\u677F\uFF1A`sideSlidePanel`\n  - \u624B\u673A\u786C\u4EF6\u5143\u7D20\uFF1A`phoneTopStatusBar`\u3001`phoneBottomIndicatorBar`\uFF0C\u8FD9\u4E24\u4E2A\u5143\u7D20\u662F\u624B\u673A\u786C\u4EF6\u81EA\u5E26\u7684\u5143\u7D20\uFF0C\u4E0D\u80FD\u5728\u9875\u9762\u4E2D\u6DFB\u52A0\u3002\n\n## \u4E09\u3001\u8F6E\u64AD\u4E0ETabs\u7EC4\u4EF6\u7684\u89C4\u5219\n- \u8F6E\u64AD\u7684\u6BCF\u4E00\u4E2ASlide\u548CTabs\u9009\u9879\u5361\u7EC4\u4EF6\u6BCF\u4E00\u4E2ATab Panel\u90FD\u5FC5\u987B\u4F7F\u7528`display: none`\u548C`display: block/flex`\u6765\u5B9E\u73B0\u9690\u85CF\u548C\u663E\u793A\u7684\u4E92\u65A5\u5207\u6362\n- \u8F6E\u64AD\u7684\u6BCF\u4E00\u4E2ASlide\u5FC5\u987B\u6709html\u4EE3\u7801\u5B9E\u73B0\uFF0C\u4E0D\u5F97\u53EA\u5199\u7B2C1\u4E2ASlide\u7684\u5177\u4F53\u5185\u5BB9\u7684html\u4EE3\u7801\uFF0C\u5176\u4ED6Slide\u7684\u5177\u4F53\u5185\u5BB9\u7684html\u4EE3\u7801\u4E5F\u5FC5\u987B\u8981\u5199\uFF0C\u7EDD\u5BF9\u7981\u6B62\u6577\u884D\u5730\u4F7F\u7528`Placeholder content/\u5F85\u5F00\u53D1/\u5F00\u53D1\u4E2D/\u5373\u5C06\u4E0A\u7EBF`\u7B49\u7B49\u6765\u6577\u884D\u5730\u5C55\u793A\u8F6E\u64AD\u7684\u6BCF\u4E00\u4E2ASlide\uFF0C\u5FC5\u987B\u6BCF\u4E00\u4E2ASlide\u90FD\u6709\u5177\u4F53\u771F\u5B9E\u7684\u5185\u5BB9\u5C55\u793A\u5B9E\u73B0\u3002\n- Tabs\u9009\u9879\u5361\u7EC4\u4EF6\u9700\u8981\u6DFB\u52A0\u70B9\u51FB\u5207\u6362Tab Panel\u7684\u529F\u80FD\uFF0C\u4E0D\u5F97\u53EA\u5199\u7B2C1\u4E2ATab Panel\u7684html\u4EE3\u7801\uFF0C\u5176\u4ED6Tab Panel\u7684\u5177\u4F53\u5185\u5BB9\u7684html\u4EE3\u7801\u4E5F\u5FC5\u987B\u8981\u5199\uFF0C\u7EDD\u5BF9\u7981\u6B62\u6577\u884D\u5730\u4F7F\u7528`Placeholder content/\u5F85\u5F00\u53D1/\u5F00\u53D1\u4E2D/\u5373\u5C06\u4E0A\u7EBF`\u7B49\u7B49\u6765\u6577\u884D\u5730\u5C55\u793ATabs\u9009\u9879\u5361\u7EC4\u4EF6\u7684\u6BCF\u4E00\u4E2ATab Panel\uFF0C\u5FC5\u987B\u6BCF\u4E00\u4E2ATab Panel\u90FD\u6709\u5177\u4F53\u771F\u5B9E\u7684\u5185\u5BB9\u5C55\u793A\u5B9E\u73B0\u3002\n- \u4F8B\u5B50\uFF1A\n```html\n<tabPanelFather nodeType=\"tabPanelFather\" id=\"tabPanelFather\" name=\"Tabs\u9009\u9879\u5361\u5185\u5BB9\u5BB9\u5668\">\n  <!-- Tab Panel 1 -->\n  <tabPanel nodeType=\"tabPanel\" id=\"tabPanel1\" name=\"Tabs\u9009\u9879\u53611\">\n    <text nodeType=\"text\" id=\"tabPanel1Text\" name=\"Tabs\u9009\u9879\u53611\u7684\u6587\u672C\">Tabs\u9009\u9879\u53611\u7684\u5185\u5BB9</text>\n    ...\n    <div nodeType=\"div\" id=\"tabPanel1Div\" name=\"Tabs\u9009\u9879\u53611\u7684div\u5BB9\u5668\">\n      ...\n    </div>\n  </tabPanel>\n  <!-- Tab Panel 2 -->\n  <tabPanel nodeType=\"tabPanel\" id=\"tabPanel2\" name=\"Tabs\u9009\u9879\u53612\">\n    <text nodeType=\"text\" id=\"tabPanel2Text\" name=\"Tabs\u9009\u9879\u53612\u7684\u6587\u672C\">Tabs\u9009\u9879\u53612\u7684\u5185\u5BB9</text>\n    ...\n    <div nodeType=\"div\" id=\"tabPanel2Div\" name=\"Tabs\u9009\u9879\u53612\u7684div\u5BB9\u5668\">\n      ...\n    </div>\n  </tabPanel>\n  <!-- \u66F4\u591ATab Panel\u548C\u5177\u4F53\u5185\u5BB9... -->\n</tabPanelFather>\n```\n\n## \u56DB\u3001\u56FE\u6807\u4E0E\u56FE\u7247\u7684\u89C4\u5219\n- \u5F53\u9700\u8981icon\u56FE\u6807\u65F6\u5FC5\u987B\u4F7F\u7528FontAwesome\u56FE\u6807\uFF0C\u6BD4\u5982\uFF1A`<i name=\"\u5FAE\u4FE1Icon\" vtype=\"icon\" id=\"wxIcon\" class=\"fab fa-weixin\"></i>`\uFF0C\u5E76\u4E14\u6CE8\u610F\u56FE\u6807\u7684\u989C\u8272\uFF0C\u6BD4\u5982\u5FAE\u4FE1\u56FE\u6807\u4E00\u822C\u4F7F\u7528\u7EFF\u8272\u7CFB\uFF0CQQ\u56FE\u6807\u4E00\u822C\u4F7F\u7528\u84DD\u8272\u7CFB\uFF0C\u5FAE\u535A\u56FE\u6807\u4E00\u822C\u4F7F\u7528\u7EA2\u8272\u7CFB\uFF0C\u652F\u4ED8\u5B9D\u56FE\u6807\u4E00\u822C\u4F7F\u7528\u6D45\u84DD\u8272\u7CFB\u7B49\u7B49\n- \u7EDD\u5BF9\u4E0D\u80FD\u4F7F\u7528 emoji \u8868\u60C5\u7B26\u53F7\uFF0C\u4E0D\u5F97\u4F7F\u7528\u4EFB\u4F55 emoji \u8868\u60C5\u7B26\u53F7\uFF0C\u8BF7\u4F7F\u7528FontAwesome\u5B57\u4F53\u56FE\u6807\u6765\u4EE3\u66FF\u3002\n- LOGO\u56FE\u7247\u548C\u5F15\u5BFC\u9875\u7684\u5F15\u5BFC\u56FE\u7247\u5FC5\u987B\u4F7F\u7528`doc/res/svgMap.json`\u6587\u4EF6\u4E2Djson\u5BF9\u8C61\u6B63\u786E\u5B57\u6BB5\u7684https\u94FE\u63A5\u503C\uFF0C\u7981\u6B62\u4F7F\u7528\u672C\u5730\u56FE\u7247\u8DEF\u5F84`doc/res/logo.svg`\u6587\u4EF6\uFF0C\u800C\u662F\u4F7F\u7528\u7C7B\u4F3C\uFF1A`https://editor.bytefungo.com/dfile/img/xxxxx.svg`\u8FD9\u6837\u7684\u56FE\u7247\u94FE\u63A5\u5730\u5740\uFF0C\u6BD4\u5982\u95EA\u5C4F\u9875\u3001\u767B\u5F55\u9875\u3001\u6CE8\u518C\u9875\u7528\u5230\u7684LOGO\u56FE\u7247\uFF0C\u5F15\u5BFC\u9875\u7684\u5F15\u5BFC\u56FE\u7247\u7B49\u3002\n- jpg\u3001jpeg\u7C7B\u578B\u56FE\u7247\u5FC5\u987B\u4F7F\u7528\u56FE\u7247\u5730\u5740\uFF1A`https://oss.bytefungo.com/f1/showImg1.jpg`)\uFF0C\u5176\u4E2D\u7ED3\u5C3E\u7684\u2019showImg1'\u53EF\u4EE5\u6362\u4E3A\u4ECE 1 \u5230 30 \u7684\u6570\u5B57\uFF0C1~30 \u7684\u6570\u5B57\u5FC5\u987B\u968F\u673A\u6311\u9009\uFF0C\u4E0D\u5F97\u6BCF\u4E2A\u9875\u9762\u6BCF\u4E2A\u56FE\u7247\u90FD\u4F7F\u7528\u540C\u4E00\u4E2A\u6570\u5B57\u3002\u5199\u6CD5\u6BD4\u5982\uFF1A`<img src=\"https://oss.bytefungo.com/f1/showImg17.jpg\" alt=\"xxx\" class=\"xxx\" nodeType=\"image\">`\n\n## \u4E94\u3001\u5FC5\u987B\u7406\u89E3\u5E76\u9075\u5B88\u4EE5\u4E0B\u7981\u6B62\u7684\u591A\u4E2AUI\u8BBE\u8BA1\u4EE3\u7801\u5199\u6CD5\n- \u7981\u6B62\u4F7F\u7528\u4EFB\u4F55\u524D\u7AEF\u6846\u67B6\uFF0C\u53EA\u4F7F\u7528 html+\u7C7B\u9009\u62E9\u5668\u6837\u5F0F+js \u6765\u5B9E\u73B0\u3002\n- \u7981\u6B62\u4F7F\u7528js\u4EE3\u7801\u6765\u62FC\u63A5html\u5B57\u7B26\u4E32\uFF0C\u5FC5\u987B\u5728body\u6807\u7B7E\u91CC\u9762\u76F4\u63A5\u5199html\u4EE3\u7801\u3002\n- \u7981\u6B62\u4F7F\u7528js\u4EE3\u7801\u6765\u58F0\u660E\u4EFB\u4F55\u9875\u9762\u663E\u793A\u6240\u9700\u7684\u6570\u636E\uFF0C\u6240\u6709\u6570\u636E\u90FD\u5FC5\u987B\u5728html\u4EE3\u7801\u4E2D\u76F4\u63A5\u5199\u6B7B\u3002\n- \u7981\u6B62\u4F7F\u7528\u6587\u672C\u6E10\u53D8\u8272\uFF0C\u5FC5\u987B\u4F7F\u7528\u7EAF\u8272\u6587\u672C\uFF0C\u4E5F\u5C31\u662F\u7981\u6B62\u4F7F\u7528`-webkit-text-fill-color`\u5C5E\u6027\u3002\n- \u7981\u6B62\u7ED9\u9875\u9762\u6DFB\u52A0`\u624B\u673A\u9876\u90E8\u72B6\u6001\u680F`\u3001`\u624B\u673A\u5E95\u90E8\u6307\u793A\u5668\u680F`\u4E24\u4E2A\u975E\u9875\u9762\u5185\u5BB9\u7684\u5143\u7D20\u8282\u70B9\uFF0C\u8FD9\u662F\u624B\u673A\u786C\u4EF6\u81EA\u5E26\u7684\u5143\u7D20\uFF0C\u4E0D\u80FD\u5728\u9875\u9762\u4E2D\u6DFB\u52A0\u3002\n- \u7981\u6B62\u4F7F\u7528`:before`\u3001`:after`\u4F2A\u5143\u7D20\uFF0C\u5FC5\u987B\u4F7F\u7528\u5176\u4ED6\u6807\u7B7E\u6765\u5B9E\u73B0\u3002\n- \u7981\u6B62\u4F7F\u7528`backdrop-filter`\u7B49\u73BB\u7483\u6548\u679C\uFF0C\u5FC5\u987B\u5220\u9664\u6389\u6240\u6709\u4F7F\u7528\u5230\u73BB\u7483\u6548\u679C\u7684\u4EE3\u7801\u3002\n- \u7981\u6B62\u4F7F\u7528\u591A\u4E2Ap\u6807\u7B7E\u6216\u591A\u4E2A\u5176\u4ED6\u6807\u7B7E\u6765\u663E\u793A\u4E00\u4E2A\u4ECE\u7F51\u7EDC\u6216\u5176\u4ED6\u5730\u65B9\u62C9\u53D6\u56DE\u6765\u7684\u957F\u6587\u672C\uFF0C\u5FC5\u987B\u53EA\u80FD\u4F7F\u7528\u4E00\u4E2A\u6807\u7B7E\u6765\u663E\u793A\uFF0C\u6BD4\u5982\uFF1Adiv\u3001span\u7B49\uFF0C\u56E0\u4E3A\u7F51\u7EDC\u62C9\u53D6\u56DE\u6765\u7684\u957F\u6587\u672C\u662F\u4E00\u4E2A\u6587\u672C\uFF0C\u65E0\u6CD5\u4F7F\u7528\u591A\u4E2A\u6807\u7B7E\u6765\u663E\u793A\u4E00\u4E2A\u6587\u672C\uFF0C\u5FC5\u987B\u53EA\u80FD\u4F7F\u7528\u4E00\u4E2A\u6807\u7B7E\u6765\u663E\u793A\u3002\n- loading\u8282\u70B9\u7684\u5B9E\u73B0\u7981\u6B62\u4F7F\u7528div\u6807\u7B7E\u4E0E\u8FB9\u6846\u5C5E\u6027\u5B9E\u73B0\uFF0C\u5FC5\u987B\u4F7F\u7528\u56FE\u6807icon\u7684i\u6807\u7B7E\u6765\u5B9E\u73B0loading\u7684\u8282\u70B9\n- \u7981\u6B62\u4E3Ahtml\u6807\u7B7E\u8282\u70B9\u6DFB\u52A0\u52A8\u753B\u6216\u8FC7\u6E21\u6548\u679C\uFF0C\u9875\u9762\u8BBE\u8BA1\u4E0D\u9700\u8981\u4EFB\u4F55\u52A8\u753B\u548C\u8FC7\u6E21\u6548\u679C\uFF0C\u6BD4\u5982\u7981\u6B62\uFF1A@keyframes\u3001transition\u3001animation \u7B49\u3002\n- \u6309\u94AE\u3001\u5361\u7247\u3001item\u9879\u7B49\u5143\u7D20\u5FC5\u987B\u8981\u6709hover\u4E0E\u70B9\u51FB\u53CD\u9988\uFF0C\u70B9\u51FB\u53CD\u9988\u5FC5\u987B\u4F7F\u7528\u6D45\u8272\u7684\u80CC\u666F\u8272background\u6765\u53CD\u9988\u5C31\u884C\uFF0C\u4E25\u7981\u4F7F\u7528transform\u6548\u679C\n    - \u274C \u9519\u8BEF\u7684\u7528\u6CD5\uFF1A \n    ``` css\n    .hot-sales-item:hover {\n        transform: translateX(...px);\n    }\n    ```\n    - \u2705 \u6B63\u786E\u7684\u7528\u6CD5\uFF1A\n    ``` css\n    .hot-sales-item:hover {\n        background: ...;\n    }\n    ```\n- \u7981\u6B62\u4F7F\u7528div\u6807\u7B7E\u6765\u5B9E\u73B0image\u56FE\u7247\uFF0C\u5FC5\u987B\u8981\u4F7F\u7528img\u6807\u7B7E\u6765\u5B9E\u73B0\u56FE\u7247\u8282\u70B9\uFF0Cimg\u6807\u7B7E\u7684src\u5C5E\u6027\u5FC5\u987B\u8BBE\u7F6E\u4E3A\uFF1A`https://oss.bytefungo.com/f1/showImg1.jpg`\uFF0C\u5176\u4E2D\u91CC\u9762\u7684`showImg1`\u53EF\u4EE5\u6539\u4E3A1~30\u7684\u4EFB\u610F\u4E00\u4E2A\u6570\u5B57\uFF0C\u6BD4\u5982\uFF1A`showImg5`\u3002\n  - \u274C\u9519\u8BEF\u7684\u5199\u6CD5\uFF1A\n    ``` html\n    <div class=\"bestseller-cover\" id=\"bestsellerCover1\" name=\"\u7545\u9500\u4E66\u7C4D\u5C01\u97621\" nodeType=\"image\">\n    </div>\n    ```\n  - \u2705 \u6B63\u786E\u7684\u5199\u6CD5\uFF1A\n    ``` html\n    <img class=\"bestseller-cover\" id=\"bestsellerCover1\" name=\"\u7545\u9500\u4E66\u7C4D\u5C01\u97621\" nodeType=\"image\" src=\"https://oss.bytefungo.com/f1/showImg7.jpg\">  \n    ```\n- \u7981\u6B62 id \u5C5E\u6027\u4E0D\u89C4\u8303\uFF0Cid \u5FC5\u987B\u552F\u4E00\uFF0C\u4E14\u53EA\u80FD\u7531\u5B57\u6BCD\u548C\u6570\u5B57\u7EC4\u6210\uFF08\u4E0D\u80FD\u4EE5\u6570\u5B57\u5F00\u5934\uFF09\uFF0C\u5EFA\u8BAE\u4F7F\u7528\u9A7C\u5CF0\u547D\u540D\u3002\n- \u7981\u6B62\u4F7F\u7528\u884C\u5185 style \u5C5E\u6027\uFF0C\u5FC5\u987B\u901A\u8FC7 class \u548C CSS \u6587\u4EF6\u6765\u5B9A\u4E49\u6837\u5F0F\u3002\n- \u7981\u6B62 radial-gradient \u6837\u5F0F\u4E0D\u89C4\u8303\uFF0C\u5F84\u5411\u6E10\u53D8\u5FC5\u987B\u663E\u5F0F\u58F0\u660E\u4E3A circle\uFF0C\u4E14\u4E00\u4E2A DOM \u8282\u70B9\u53EA\u80FD\u5305\u542B\u4E00\u4E2A radial-gradient\u3002\n\n## \u516D\u3001\u9996\u9875\u4E3B\u4F53\u9875\u4E0E\u5B50\u9875\u9762\u7684\u89C4\u5219\n- \u9996\u9875\u4E3B\u4F53\u9875\u5D4C\u5957\u4E86\u591A\u4E2A\u5B50\u9875\u9762\uFF0C\u6BCF\u4E00\u4E2A\u5B50\u9875\u9762\u90FD\u4E0D\u9700\u8981\u586B\u5145\u5185\u5BB9\uFF0C\u7A7A\u767D\u5C31\u884C\uFF0C\u540E\u9762\u4F1A\u6709\u4E13\u95E8\u7684\u4EFB\u52A1\u6765\u8BBE\u8BA1\u5177\u4F53\u7684\u5B50\u9875\u9762\u3002\n- \u4EFB\u4F55\u5B50\u9875\u9762\u90FD\u5FC5\u987B\u7981\u6B62\u6DFB\u52A0\u5E95\u90E8\u5BFC\u822A\u680F\u8282\u70B9\u5230\u9875\u9762\uFF0C\u56E0\u4E3A\u5B50\u9875\u9762\u662F\u5D4C\u5957\u5728\u9996\u9875\u4E3B\u4F53\u9875\u4E2D\u7684\uFF0C\u7236\u9875\u9762\u5DF2\u7ECF\u6709\u5E95\u90E8\u5BFC\u822A\u680F\u4E86\uFF0C\u5B50\u9875\u9762\u4E0D\u9700\u8981\u518D\u6DFB\u52A0\u5E95\u90E8\u5BFC\u822A\u680F\uFF0C\u4E5F\u4E0D\u5F97\u6DFB\u52A0\u4E8C\u7EA7\u9875\u9762\u7684\u6807\u9898\u680F\u5230\u5B50\u9875\u9762\u4E2D\uFF0C\u56E0\u4E3A\u5B50\u9875\u9762\u662F\u5D4C\u5957\u5728\u9996\u9875\u4E3B\u4F53\u9875\u4E2D\u7684\uFF0C\u9996\u9875\u4E3B\u4F53\u9875\u548C\u5B83\u7684\u5B50\u9875\u9762\u90FD\u662F\u4E00\u7EA7\u9875\u9762\uFF0C\u56E0\u6B64\u4E0D\u5F97\u6DFB\u52A0\u4E8C\u7EA7\u9875\u9762\u7684\u6807\u9898\u680F\u5230\u5B50\u9875\u9762\u4E2D\u3002\n\n## \u4E03\u3001\u5982\u679C\u7528\u6237\u6CA1\u6709\u660E\u786E\u8BF4\u660E\u8BE5\u9875\u9762\u8BBE\u8BA1\u9700\u6C42\uFF0C\u90A3\u5C31\u6309\u7167\u4EE5\u4E0B\u9875\u9762\u9ED8\u8BA4\u89C4\u5219\u8BBE\u8BA1\n- \u95EA\u5C4F\u9875\uFF1A\u7981\u6B62\u4F7F\u7528\u5168\u5C4F\u56FE\u7247\uFF0C\u4E00\u822C\u4F7F\u7528\u4E3B\u9898\u76F8\u5173\u7684\u6E10\u53D8\u8272\uFF0C\u7136\u540E\u5E26\u6709\u4E00\u4E9B\u989D\u5916\u7684\u80CC\u666F\u5143\u7D20\u589E\u5F3A\u754C\u9762\u5C42\u6B21\u611F\uFF0C\u6BD4\u5982\uFF1A\u68A6\u5E7B\u5706\u5708\u6CE1\u6CE1\u3001\u73BB\u7483\u6548\u679C\u7684\u5706\u5F62\u5F84\u5411\u6E10\u53D8\u7B49\u7B49\u5143\u7D20\n- \u5F15\u5BFC\u9875\uFF1A\u5C3D\u91CF\u4E0D\u4F7F\u7528\u5168\u5C4F\u56FE\u7247\uFF0C\u4E00\u822C\u6BCF\u4E00\u9875\u5F15\u5BFC\u9875\u80CC\u666F\u8272\u4E5F\u53EF\u4EE5\u6E10\u53D8\uFF0C\u7136\u540E\u6BCF\u4E00\u9875\u529F\u80FD\u8BF4\u660E\u4E00\u822C\u6709\u975E\u5168\u5C4F\u56FE\u7247\u3001\u6807\u9898\u3001\u526F\u6807\u9898\u7B49\u7B49\uFF0C\u4F60\u53EF\u4EE5\u5E26\u5165\u5176\u4ED6\u5143\u7D20\uFF0C\u8BA9\u9875\u9762\u66F4\u52A0\u7F8E\u89C2\uFF0C\u5E76\u4E14\u5F15\u5BFC\u9875\u7684\u5F15\u5BFC\u56FE\u7247\u9700\u8981\u81EA\u5DF1\u7ED8\u5236svg\u56FE\u7247\uFF0C\u5E76\u5B58\u653E\u5728`doc/res`\u6587\u4EF6\u5939\u4E0B\u9762\uFF0C\u5E76\u5728html\u4E2D\u4F7F\u7528\n- \u80CC\u666F\u8272\u4E3A\u4E86\u589E\u5F3A\u5C42\u6B21\u611F\uFF0C\u6DFB\u52A0\u7684\u68A6\u5E7B\u6CE1\u6CE1\u6216\u8005\u5706\u5F62\u5F84\u5411\u6E10\u53D8\u5143\u7D20\u7684div\uFF0C\u5FC5\u987B\u53EA\u80FD\u58F0\u660E\u4E3A`circle`\uFF0C\u5E76\u4E14\u4E00\u4E2Adiv\u7684`background:`\u53EA\u80FD\u58F0\u660E\u4E00\u4E2A`radial-gradient`\uFF0C\u6BD4\u5982\u6B63\u786E\u7684\u5199\u6CD5\uFF1Abackground: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%);\uFF0C\u5982\u679C\u9700\u8981\u591A\u4E2A`radial-gradient`\u5F84\u5411\u6E10\u53D8\u80CC\u666F\uFF0C\u6BCF\u4E2A\u5F84\u5411\u6E10\u53D8\u80CC\u666F\u90FD\u5FC5\u987B\u58F0\u660E\u4E3A\u4E00\u4E2Adiv\u8282\u70B9\uFF0C\u6BCF\u4E2Adiv\u7684`background:`\u53EA\u80FD\u58F0\u660E\u4E00\u4E2A`radial-gradient`\u3002\n";
//# sourceMappingURL=uiDesign.d.ts.map