bytefun-ai-mcp
Version:
ByteFun AI MCP服务 - 打通产品设计、UI设计、代码开发的服务平台，支持设计稿转代码和跨平台原生代码开发
2 lines • 15.2 kB
TypeScript
export declare const uiDesignPromptTemplate = "# 1\u3001UI\u8BBE\u8BA1\u8981\u6C42\n- **\u5FC5\u987B\u9075\u5FAA'UI\u8BBE\u8BA1\u89C4\u8303.md'\u7684UI\u8BBE\u8BA1\u89C4\u8303\u6765\u5B9A\u4E49\u989C\u8272\u3001\u6837\u5F0F\u3001\u5B57\u4F53\u3001\u5E03\u5C40\u7B49**\n- \u9075\u5FAAiPhone 16 Pro\u5C3A\u5BF8\u89C4\u683C(\u5BBD\u5EA6393px\u9AD8\u5EA6852px)\n- \u91C7\u7528\u660E\u4EAE\u3001\u6D3B\u529B\u7684\u914D\u8272\u65B9\u6848\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\u7F6Eprimary\u4E3B\u8272\u6216primary\u4E0Esecondary\u7684\u6E10\u53D8\u8272\uFF0C\u5176\u4ED6\u9875\u9762\u5FC5\u987B\u4F7F\u7528\u975Eprimary\u4E0E\u975Esecondary\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- hover\u4E0E\u70B9\u51FB\u53CD\u9988\uFF1A\u8BF7\u4F7F\u7528\u6D45\u8272\u7684\u80CC\u666F\u8272background\u6765\u53CD\u9988\u5C31\u884C\uFF0C\u4E25\u7981\u4F7F\u7528transform\u6548\u679C\uFF0C\u5982\u4E0D\u5F97\u4F7F\u7528\uFF1A \n .hot-sales-item:hover {\n transform: translateX(...px);\n }\n \u6B63\u786E\u5199\u6CD5\u5E94\u8BE5\u662F\uFF1A\n .hot-sales-item:hover {\n background: ...;\n }\n- \u8F93\u5165\u6846`input`\u5982\u679C\u9700\u8981\u5C55\u793A\u6587\u5B57label\uFF0C\u5C3D\u91CF\u4F7F\u7528icon\u4EE3\u66FF\u6587\u5B57label\uFF0C\u5E76\u4E14icon\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- \u9876\u90E8\u5BFC\u822A\u680F\u5DE6\u8FB9\u7684\u8FD4\u56DE\u6309\u94AE\u5FC5\u987B\u4F7F\u7528`icon`\u56FE\u6807\u7EC4\u4EF6\u6765\u5B9E\u73B0\uFF0C\u4E0D\u5F97\u4F7F\u7528`text`\u548C`button`\u7EC4\u4EF6\u6765\u5B9E\u73B0\u3002\n- \u9875\u9762\u5185\u5BB9\u663E\u793A\u533A\u91CC\u9762\u7684\u5B69\u5B50\u8282\u70B9\u7981\u6B62\u4F7F\u7528overflow\u3001overflow-x\u3001overflow-y\u5C5E\u6027\u3002\n- \u624B\u673A\u72B6\u6001\u680FphoneTopStatusBar\u8282\u70B9\u7684\u9AD8\u5EA6\u5FC5\u987B\u6C38\u8FDC\u8BBE\u8BA1\u4E3A22px\uFF0C\u5FC5\u987B\u8BBE\u7F6Eheight\u3001min-height\u3001max-height\u5C5E\u6027\u548C\u503C\u662F22px\uFF0Ccss\u4EE3\u7801\u5982\u4E0B\uFF1A\n```css\n...\nheight: 22px;\nmin-height: 22px;\nmax-height: 22px;\n...\n```\n- \u56E0\u4E3A\u9875\u9762\u5F00\u542F\u4E86\u5E95\u90E8\u6C89\u6D78\u5F0F\uFF0C\u6240\u4EE5`bottomTabContentContainer`\u8282\u70B9\u5FC5\u987B\u8BBE\u7F6Epadding-bottom\u5C5E\u6027\uFF0C\u503C\u4E3A22px\n\n# 2\u3001icon\u56FE\u6807\u4E0Eimg\u56FE\u7247\u5199\u6CD5\u548C\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>`\n- \u5F53\u9700\u8981img\u56FE\u7247\u65F6\uFF0Csrc\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\u4ECE1\u523030\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\" vtype=\"image\">`\n- \u7EDD\u5BF9\u4E0D\u80FD\u4F7F\u7528emoji\u8868\u60C5\u7B26\u53F7\uFF0C\u4E0D\u5F97\u4F7F\u7528\u4EFB\u4F55emoji\u8868\u60C5\u7B26\u53F7\uFF0C\u8BF7\u4F7F\u7528icon\u6216img\u56FE\u7247\u8282\u70B9\u6765\u4EE3\u66FF\u3002\n- \u9700\u8981\u4E25\u683C\u9075\u5B88`UI\u8BBE\u8BA1\u89C4\u8303.md`\u7684UI\u8BBE\u8BA1\u89C4\u8303\u91CC\u9762\u7684`\u56FE\u6807\u89C4\u8303`\u6765\u8BBE\u8BA1icon\u56FE\u6807\u3002\n\n# 3\u3001html\u8282\u70B9\u89C4\u5219\n- \u6BCF\u4E2A\u7EC4\u4EF6\u90FD\u5FC5\u987B\u5305\u542B\uFF1Aid\u3001name\u3001vtype\u5C5E\u6027\n- id\u5C5E\u6027\u5FC5\u987B\u662F\u82F1\u6587\u6216\u6570\u5B57\uFF0C\u4E14\u4E0D\u80FD\u4EE5\u6570\u5B57\u5F00\u5934\uFF0C\u5E76\u4E14\u6574\u4E2A\u9875\u9762id\u5C5E\u6027\u7684\u503C\u5FC5\u987B\u552F\u4E00\n- name\u5C5E\u6027\u5FC5\u987B\u662F\u4E2D\u6587\u6216\u6570\u5B57\uFF0C\u5E76\u4E14\u4E0D\u80FD\u5305\u542B\u7279\u6B8A\u5B57\u7B26\n- vtype\u5C5E\u6027\u7684\u503C\u5FC5\u987B\u662F`\u7EC4\u4EF6\u7C7B\u578B\u679A\u4E3E (vtype)` \u4E2D\u7684\u4E00\u4E2A\n- \u624B\u673A\u72B6\u6001\u680FphoneTopStatusBar\u8282\u70B9\u7684\u9AD8\u5EA6\u5FC5\u987B\u8BBE\u8BA1\u4E3A22px\uFF0C\u5199\u6B7B\uFF1Aheight: 22px\n- \u6240\u6709css\u6837\u5F0F\u5B9A\u4E49\u53EA\u80FD\u4F7F\u7528\u4EE5\u4E0B\u8FD9\u4E9Bcss\u4F2A\u7C7B\u9009\u62E9\u5668\uFF1Ahover\u3001active\u3001focus\u3001disabled\u3001checked\u3001selected\u3001placeholder\n- \u8282\u70B9\u5982\u679C\u8BBE\u7F6E\u4E86padding\u3001padding-top\u3001padding-bottom\u3001padding-left\u3001padding-right\u5C5E\u6027\uFF0C\u90A3\u4E48\u5FC5\u987B\u8BBE\u7F6Ebox-sizing: border-box;\n- \u7981\u6B62\u5199css\u52A8\u753B\u7684\u4EE3\u7801\uFF0C\u8FD9\u662FUI\u8BBE\u8BA1\u7A3F\uFF0C\u4E0D\u9700\u8981\u52A8\u753B\uFF0C\u4E0D\u5F97\u4F7F\u7528animation\u3001@keyframes\u3001transform\u3001transition\u7B49\u4EFB\u4F55\u52A8\u753B\u76F8\u5173\u7684css\u5C5E\u6027\u3002\n- \u7981\u6B62\u4F7F\u7528rem\u548Cem\u7B49\u5176\u4ED6\uFF0C\u50CF\u7D20\u5FC5\u987B\u4F7F\u7528px\n- \u7981\u6B62\u5199\u4EFB\u4F55@media\u76F8\u5173\u7684(\u54CD\u5E94\u5F0F\u8C03\u6574)css\u4EE3\u7801\uFF0C\u56E0\u4E3A\u5DF2\u7ECF\u660E\u786E\u662F\u4EE5393*852\u7684\u5206\u8FA8\u7387\u8BBE\u8BA1APP\u79FB\u52A8\u7AEF\u4E86\n- vtype=\"switch\"\u3001vtype=\"radio\"\u3001vtype=\"checkBox\"\u8282\u70B9\u7684\u5B69\u5B50i\u6807\u7B7E\u8282\u70B9\u5FC5\u987B\u6DFB\u52A0\u4E00\u4E2AcheckedClass\u5C5E\u6027\uFF0C\u7528\u4E8E\u8868\u793A\u9009\u4E2D\u72B6\u6001\u7684icon\u56FE\u6807\u6837\u5F0F\u7C7B\u540D\uFF0C\u6BD4\u5982\uFF1A\n``` html\n<div vtype=\"radio\" id=\"xxxRadio\" name=\"xxx\u5355\u9009\">\n <i name=\"\u5355\u9009Icon\" vtype=\"icon\" id=\"xxxRadioIcon\" class=\"fa xxx\" checkedClass=\"fa yyy\"></i>\n</div>\n```\n\n# 4\u3001\u9AD8\u7EA7\u8282\u70B9\u7ED3\u6784\u6B63\u786E\u6027\u548C\u4F7F\u7528\u573A\u666F\n- `subPage`\u8282\u70B9\u7EDD\u5BF9\u4E0D\u80FD\u6709\u5B69\u5B50\u8282\u70B9\uFF0C\u50CF\u9996\u9875\u7684\u5B50\u9875\u9762`subPage`\u8282\u70B9\u7A7A\u5185\u5BB9\u5C31\u884C\uFF0C\u4E0D\u80FD\u6709\u4EFB\u4F55\u5B69\u5B50\u8282\u70B9\u3002\n- \u4E00\u4E2A`dialogOverlay`\u8282\u70B9\u5FC5\u987B\u53EA\u80FD\u5305\u542B\u4E00\u4E2A`dialog`\u8282\u70B9\uFF0C\u5E76\u4E14`dialog`\u8282\u70B9\u5FC5\u987B\u662F`dialogOverlay`\u8282\u70B9\u7684\u552F\u4E00\u5B69\u5B50\u8282\u70B9\uFF0C`dialog`\u8282\u70B9\u76F8\u5BF9`dialogOverlay`\u8282\u70B9\u5FC5\u987B\u5C45\u4E2D\u5C55\u793A\uFF0C`dialog`\u7684css\u4EE3\u7801\u5982\u4E0B\uFF1A\n```css\n...\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\n...\n```\n- `inlineBlockAndWrap`\u8282\u70B9\u5FC5\u987B\u5305\u542BN\u4E2A`blockItem`\u8282\u70B9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u5F53\u9700\u8981\u5C55\u793A\u591A\u4E2A\u8282\u70B9\u6A2A\u6392\uFF0C\u5E76\u4E14\u8FD9\u4E9B\u8282\u70B9\u5BBD\u5EA6\u4E0D\u56FA\u5B9A\uFF0C\u5F53\u7236\u4EB2\u5BB9\u5668\u8BE5\u884C\u663E\u793A\u4E0D\u4E0B\u9700\u8981\u81EA\u52A8\u6362\u884C\u5E03\u5C40\u65F6\uFF0C\u6BD4\u5982\uFF1A\u591A\u4E2A\u6807\u7B7Etag\u3001\u70ED\u95E8\u641C\u7D22tag\u3001\u5546\u54C1tag\u7B49\u7B49\u6807\u7B7Etag\u7C7B\u573A\u666F\u3002\n- `multiStateContainer`\u8282\u70B9\u5FC5\u987B\u5305\u542BN\u4E2A`oneStateContentContainer`\u8282\u70B9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u5F53\u9700\u8981\u5C55\u793A\u591A\u4E2A\u4E0D\u540C\u72B6\u6001\u7684\u5185\u5BB9\u65F6\uFF0C\u6BD4\u5982\uFF1A\u767B\u5F55\u72B6\u6001\u4E0B\u5C55\u793A\u4E2A\u4EBA\u4FE1\u606F\u5185\u5BB9\uFF0C\u672A\u767B\u5F55\u72B6\u6001\u4E0B\u5C55\u793A\u767B\u5F55\u6CE8\u518C\u5185\u5BB9\u3002\n- `radioGroup`\u8282\u70B9\u5FC5\u987B\u5305\u542B\u591A\u4E2A`radio`\u8282\u70B9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u5355\u9009\u7EC4\uFF0C\u6BD4\u5982\uFF1A\u6027\u522B\u9009\u62E9\u3001\u652F\u4ED8\u65B9\u5F0F\u9009\u62E9\u7B49\u3002\n- `checkBoxGroup`\u8282\u70B9\u5FC5\u987B\u5305\u542B\u591A\u4E2A`checkBox`\u8282\u70B9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u591A\u9009\u7EC4\uFF0C\u6BD4\u5982\uFF1A\u9009\u62E9\u8D2D\u7269\u8F66\u5546\u54C1\u3001\u9009\u62E9\u5546\u54C1\u89C4\u683C\u7B49\u3002\n- `verticalListView`\u3001`horizontalListView`\u8282\u70B9\u5FC5\u987B\u5305\u542BN\u4E2A`listItemCard`\u8282\u70B9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u5F53\u9700\u8981\u5C55\u793A\u591A\u4E2A\u76F8\u540C\u6837\u5F0F\u7684item\u8282\u70B9\u7AD6\u6392\u6216\u6A2A\u6392\u65F6\uFF0C\u6BD4\u5982\uFF1A\u70ED\u95E8\u5546\u54C1\u5217\u8868\u3001\u63A8\u8350\u5546\u54C1\u5217\u8868\u3001xxx\u5217\u8868\u3002\n- `viewPager`\u8282\u70B9\u5FC5\u987B\u591A\u4E2A`oneViewPagerContent`\u8282\u70B9\uFF0C\u5E76\u4E14\u5FC5\u987B\u8981\u6709\u4E00\u4E2A`viewPagerIndicatorContainer`\u8282\u70B9\u4E0E`viewPager`\u8282\u70B9\u4F5C\u4E3A\u5144\u5F1F\u8282\u70B9\uFF0C`viewPagerIndicatorContainer`\u8282\u70B9\u5FC5\u987B\u5305\u542B\u7740\u591A\u4E2A`rect`\u6216`circle`\u7EC4\u4EF6\uFF0C\u5176\u4E2D`rect`\u6216`circle`\u7EC4\u4EF6\u4E0D\u5141\u8BB8\u6DFB\u52A0\u5B69\u5B50\uFF0C`rect`\u6216`circle`\u8282\u70B9\u5C31\u662F\u6307\u793A\u5668\u7684\u5706\u70B9, \u6CE8\u610F\u8F6E\u64AD\u6307\u793A\u5668\u7684`rect`\u6216`circle`\u8282\u70B9\u4E2A\u6570\u8981\u548C`oneViewPagerContent`\u8282\u70B9\u7684\u4E2A\u6570\u4E00\u6837\uFF0C\u5E76\u4E14\u6BCF\u4E00\u4E2A`oneViewPagerContent`\u8282\u70B9\u7684\u5185\u5BB9\u7EDD\u5BF9\u4E0D\u53EF\u4EE5\u7701\u7565\uFF0C\u5FC5\u987B\u8BBE\u8BA1\u771F\u5B9E\u5B8C\u6574\u5185\u5BB9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u5F53\u9700\u8981\u5C55\u793A\u591A\u4E2A\u8F6E\u64AD\u9879\u65F6\uFF0C\u6BD4\u5982\uFF1A\u5E7F\u544A\u8F6E\u64AD\u3001\u5546\u54C1\u8F6E\u64AD\u7B49\u3002\n- `tabContainer`\u8282\u70B9\u5FC5\u987B\u5305\u542BN\u4E2A`oneTabContentContainer`\u8282\u70B9\uFF0C\u5E76\u4E14\u5FC5\u987B\u8981\u6709\u4E00\u4E2A`tabMenuBar`\u8282\u70B9\u4E0E`tabContainer`\u8282\u70B9\u4F5C\u4E3A\u5144\u5F1F\u8282\u70B9\uFF0C\u5176\u4E2D`tabMenuBar`\u8282\u70B9\u5FC5\u987B\u5305\u542BN\u4E2A`tabMenuBarItem`\u8282\u70B9\uFF0C\u6BCF\u4E00\u4E2A`oneTabContentContainer`\u8282\u70B9\u7684\u5185\u5BB9\u7EDD\u5BF9\u4E0D\u53EF\u4EE5\u7701\u7565\uFF0C\u5FC5\u987B\u8BBE\u8BA1\u771F\u5B9E\u5B8C\u6574\u7684`oneTabContentContainer`\u8282\u70B9\u5185\u5BB9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u5F53\u9700\u8981\u5C55\u793A\u591A\u4E2A\u6807\u7B7E\u9875\u65F6\uFF0C\u6BD4\u5982\uFF1A\u5386\u53F2\u548C\u6536\u85CF\u7684tab\u6807\u7B7E\u9875\u7B49\u3002\n- `bottomTabContentContainer`\u8282\u70B9\u5FC5\u987B\u5305\u542BN\u4E2A`subPage`\u8282\u70B9\uFF0C\u5E76\u4E14\u5FC5\u987B\u8981\u6709\u4E00\u4E2A`bottomTabNavigateBar`\u8282\u70B9\u4E0E`bottomTabContentContainer`\u8282\u70B9\u4F5C\u4E3A\u5144\u5F1F\u8282\u70B9\uFF0C`bottomTabContentContainer`\u8282\u70B9\u7684width\u548Cheight\u5FC5\u987B\u8BBE\u8BA1\u4E3A100%\uFF0C\u5176\u4E2D`bottomTabNavigateBar`\u8282\u70B9\u5FC5\u987B\u5305\u542BN\u4E2A`bottomTabNavigateBarItem`\u8282\u70B9\uFF0C\u4F7F\u7528\u573A\u666F\uFF1A\u5F53\u9700\u8981\u5C55\u793A\u591A\u4E2A\u5E95\u90E8\u5BFC\u822A\u9879\u65F6\uFF0C\u6BD4\u5982\uFF1A\u9996\u9875\u3001\u5206\u7C7B\u3001\u8D2D\u7269\u8F66\u3001\u6211\u7684\u7B49\u5E95\u90E8\u5BFC\u822A\u9879\u3002\n\n# 5\u3001\u6570\u636E\u83B7\u53D6\u65B9\u5F0F`fromApiOrCacheData: true`\u7684\u8BBE\u7F6E\u6761\u4EF6\uFF1A\n- vtype\u5FC5\u987B\u662F`verticalListView`\u3001`horizontalListView`\u3001`viewPager`\u3001`tabContainer`\u3001`radioGroup`\u3001`checkBoxGroup`\u3001`inlineBlockAndWrap`\u7C7B\u578B\u7684\u7EC4\u4EF6\n- \u8BE5\u7EC4\u4EF6\u7684\u6570\u636E\u662F\u4ECE\u7F51\u7EDC\u6216\u8005\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u56DE\u6765\u7684\uFF0C\u6BD4\u5982\uFF1A\u70ED\u95E8\u5546\u54C1\u5217\u8868\u7EC4\u4EF6`verticalListView`\uFF0C\u8BE5\u7EC4\u4EF6\u7684\u6570\u636E\u662F\u4ECE\u7F51\u7EDC\u6216\u8005\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u56DE\u6765\u7684\n- \u5982\u679C\u662F\u4E00\u4E9B\u4E0D\u9700\u8981\u540E\u7AEFAPI\u8054\u7F51\u6216\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u83B7\u53D6\u7684\u9759\u6001\u5199\u6B7B\u7684\u6570\u636E\uFF0C\u90A3\u4E48\u5C31\u4E0D\u9700\u8981fromApiOrCacheData\u5C5E\u6027\u4E86\uFF0C\u6BD4\u5982\uFF1A\u4E2A\u4EBA\u4E2D\u5FC3\u5217\u8868\u9879\u3001\u8BBE\u7F6E\u5217\u8868\u9879\u3001\u83DC\u5355\u5217\u8868\u9879\uFF0C\u8FD9\u4E9B\u6839\u672C\u4E0D\u9700\u8981\u7ECF\u8FC7\u540E\u53F0API\u8054\u7F51\u6216\u672C\u5730\u6301\u4E45\u5316\u7F13\u5B58\u62C9\u53D6\u83B7\u53D6\u7684\uFF0C\u90A3\u4E48\u5C31\u4E0D\u8981fromApiOrCacheData\u5C5E\u6027\n\n# 6\u3001\u8282\u70B9\u663E\u793A\u9690\u85CF\u89C4\u5219\n- `oneStateContentContainer`\u3001`oneViewPagerContent`\u3001`oneTabContentContainer`\u8282\u70B9\u663E\u793A\u4E0E\u9690\u85CF\u7684\u5207\u6362\u5FC5\u987B\u4F7F\u7528`display: none`\u6765\u5B9E\u73B0\uFF0C\u4E0D\u80FD\u4F7F\u7528`opacity: 0`\u548C`visibility: hidden`\u6765\u5B9E\u73B0\n\n# 7\u3001\u5FC5\u987B\u6DFB\u52A0\u8282\u70B9\u663E\u793A\u548C\u9690\u85CF\u7684\u5207\u6362js\u65B9\u6CD5\n- \u5982\u679C\u4E00\u4E2A\u8282\u70B9\u9700\u8981\u663E\u793A\u548C\u9690\u85CF\u7684\u5207\u6362\uFF0C\u90A3\u4E48\u5C31\u5FC5\u987B\u6DFB\u52A0\u4E00\u4E2Ajs\u65B9\u6CD5\u6765\u5B9E\u73B0\u663E\u793A\u548C\u9690\u85CF\u7684\u5207\u6362\uFF0Cjs\u65B9\u6CD5\u7684\u547D\u540D\u89C4\u5219\uFF1A`switchTo` + \u8282\u70B9id\uFF0C\u5E76\u4E14\u8BE5js\u65B9\u6CD5\u4E0D\u5F97\u5E26\u6709\u4EFB\u4F55\u53C2\u6570\u3002\n- js\u65B9\u6CD5\u7684\u547D\u540D\u89C4\u5219\uFF1A`switchTo` + \u8282\u70B9id\uFF0C\u6BD4\u5982\uFF1A`switchToAgeContainer`\u3001`switchToPhoneContainer`\n- \u5207\u6362\u663E\u793A\u548C\u9690\u85CF\u7684js\u65B9\u6CD5\u4E0D\u5F97\u5E26\u6709\u4EFB\u4F55\u53C2\u6570\uFF0C\u6BD4\u5982\uFF1A`switchToAgeContainer()`\u3001`switchToPhoneContainer()`\n\n# 8\u3001\u7EC4\u4EF6\u7C7B\u578B\u679A\u4E3E (vtype)\n- \u57FA\u7840: `text`, `button`, `textButton`, `iconButton`, `icon`, `image`, `rect`, `circle`, `line`, `container`\n- \u5E03\u5C40: `multiStateContainer`, `oneStateContentContainer`, `inlineBlockAndWrap`, `blockItem`, `verticalLinearLayout`, `horizontalLinearLayout`\n- \u8868\u5355: `input`, `switch`, `radio`, `checkBox`, `radioGroup`, `checkBoxGroup`\n- \u5217\u8868: `verticalListView`, `horizontalListView`, `listItemCard`\n- \u8F6E\u64AD\uFF1A`viewPager`, `oneViewPagerContent`, `viewPagerIndicatorContainer`\n- tab\uFF1A`tabContainer`, `oneTabContentContainer`, `tabMenuBar`, `tabMenuBarItem`\n- \u5E95\u90E8\u5BFC\u822A: `bottomTabContentContainer`, `subPage`, `bottomTabNavigateBar`, `bottomTabNavigateBarItem`\n- \u64CD\u4F5C\u680F\uFF1A`topNavigateBar`, `bottomOperateBar`\n- \u5F39\u7A97: `dialog`, `dialogOverlay`, `toast`, `dropDownMenu`, `sideSlidePanel`\n- \u7CFB\u7EDF\u9876\u90E8\u72B6\u6001\u680F: `phoneTopStatusBar`\n";
//# sourceMappingURL=uiDesign00.d.ts.map