[System] 你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：规则：·组件限制：- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。- NGrid必须配合NGridItem使用。- 优先使用栅格进行布局- 禁止使用未接入的组件。·变量绑定：- 绑定变量时使用this，并通过"type": "JSExpression"实现。- 双向绑定使用v-model:value。- 示例：{  "componentName": "NText",  "props": {    "children": {      "type": "JSExpression",      "value": "this.title"    }  }}·循环渲染：- 渲染组件禁止使用map渲染，必须使用以下参考中的loop- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：{  "componentName": "NButton",  "props": {    "children": {      "type": "JSExpression",      "value": "this.item"    }  },  "loop": [1,2,3],  "loopArgs": ["item", "index"]}·事件绑定：- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：{      "componentName": "NButton",      "props": {        "__events": {          "eventDataList": [            {              "type": "nativeEvent",              "name": "onChange",              "relatedEventName": "onChange"            },            {              "type": "componentEvent",              "name": "onClick",              "relatedEventName": "myClick"            }          ]        },        "onChange": {          "type": "JSFunction",          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        },        "onClick": {          "type": "JSFunction",          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        }      }    }·样式类的使用：- 可在schema中的css属性中定义样式类，例如："css": ".mycolor{ color: blue;}.mydiv{  width:100px}",- 如需使用，请在组件props中指定class，如：{    "componentName": "NText",    "props": {      "class": "mycolor mydiv",    },}·变量和方法定义：- 禁止使用未定义的变量或方法。- 如需使用，请先在Schema中定义。·Schema更新：- 每次调整基于最新的Schema实现。- 可能提供多个Schema，确保最终输出基于最新版本。·截图匹配：- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。- 使用截图中的确切文本和样式。·输出要求：- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。- 仅返回Schema，确保可直接使用，不要返回markdown。- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {    console.log('组件被挂载');  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {    console.log('onClick');  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[]}||创建一个用户注册页面


[System] 你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：规则：·组件限制：- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。- NGrid必须配合NGridItem使用。- 优先使用栅格进行布局- 禁止使用未接入的组件。·变量绑定：- 绑定变量时使用this，并通过"type": "JSExpression"实现。- 双向绑定使用v-model:value。- 示例：{  "componentName": "NText",  "props": {    "children": {      "type": "JSExpression",      "value": "this.title"    }  }}·循环渲染：- 渲染组件禁止使用map渲染，必须使用以下参考中的loop- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：{  "componentName": "NButton",  "props": {    "children": {      "type": "JSExpression",      "value": "this.item"    }  },  "loop": [1,2,3],  "loopArgs": ["item", "index"]}·事件绑定：- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：{      "componentName": "NButton",      "props": {        "__events": {          "eventDataList": [            {              "type": "nativeEvent",              "name": "onChange",              "relatedEventName": "onChange"            },            {              "type": "componentEvent",              "name": "onClick",              "relatedEventName": "myClick"            }          ]        },        "onChange": {          "type": "JSFunction",          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        },        "onClick": {          "type": "JSFunction",          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        }      }    }·样式类的使用：- 可在schema中的css属性中定义样式类，例如："css": ".mycolor{ color: blue;}.mydiv{  width:100px}",- 如需使用，请在组件props中指定class，如：{    "componentName": "NText",    "props": {      "class": "mycolor mydiv",    },}·变量和方法定义：- 禁止使用未定义的变量或方法。- 如需使用，请先在Schema中定义。·Schema更新：- 每次调整基于最新的Schema实现。- 可能提供多个Schema，确保最终输出基于最新版本。·截图匹配：- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。- 使用截图中的确切文本和样式。·输出要求：- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。- 仅返回Schema，确保可直接使用，不要返回markdown。- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {    console.log('组件被挂载');  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {    console.log('onClick');  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[]}||使用循环渲染五个不同颜色的按钮

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7tx8np1","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"colors":{"type":"JSExpression","value":"['red', 'blue', 'green', 'yellow', 'purple']"}},"dataSource":{"list":[]},"css":".red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } .yellow { background-color: yellow; } .purple { background-color: purple; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {    console.log('组件被挂载');  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {    console.log('onClick');  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"children":[{"componentName":"NButton","id":"node_ocm7tx8np12","props":{"children":{"type":"JSExpression","value":"this.item"},"class":{"type":"JSExpression","value":"this.item"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}]},"onClick":{"type":"JSFunction","value":"function(){return this.onClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"bordered":true},"loop":{"type":"JSExpression","value":"this.colors"},"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}


[System] 你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：规则：·组件限制：- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。- NGrid必须配合NGridItem使用。- 优先使用栅格进行布局- 禁止使用未接入的组件。·变量绑定：- 绑定变量时使用this，并通过"type": "JSExpression"实现。- 双向绑定使用v-model:value。- 示例：{  "componentName": "NText",  "props": {    "children": {      "type": "JSExpression",      "value": "this.title"    }  }}·循环渲染：- 渲染组件禁止使用map渲染，必须使用以下参考中的loop- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：{  "componentName": "NButton",  "props": {    "children": {      "type": "JSExpression",      "value": "this.item"    }  },  "loop": [1,2,3],  "loopArgs": ["item", "index"]}·事件绑定：- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：{      "componentName": "NButton",      "props": {        "__events": {          "eventDataList": [            {              "type": "nativeEvent",              "name": "onChange",              "relatedEventName": "onChange"            },            {              "type": "componentEvent",              "name": "onClick",              "relatedEventName": "myClick"            }          ]        },        "onChange": {          "type": "JSFunction",          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        },        "onClick": {          "type": "JSFunction",          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        }      }    }·样式类的使用：- 可在schema中的css属性中定义样式类，例如："css": ".mycolor{ color: blue;}.mydiv{  width:100px}",- 如需使用，请在组件props中指定class，如：{    "componentName": "NText",    "props": {      "class": "mycolor mydiv",    },}·变量和方法定义：- 禁止使用未定义的变量或方法。- 如需使用，请先在Schema中定义。·Schema更新：- 每次调整基于最新的Schema实现。- 可能提供多个Schema，确保最终输出基于最新版本。·截图匹配：- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。- 使用截图中的确切文本和样式。·输出要求：- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。- 仅返回Schema，确保可直接使用，不要返回markdown。- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7tx8np1","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"colors":{"type":"JSExpression","value":"['red', 'blue', 'green', 'yellow', 'purple']"}},"dataSource":{"list":[]},"css":".red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } .yellow { background-color: yellow; } .purple { background-color: purple; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {    console.log('组件被挂载');  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {    console.log('onClick');  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"children":[{"componentName":"NButton","id":"node_ocm7tx8np12","props":{"children":{"type":"JSExpression","value":"this.item"},"class":{"type":"JSExpression","value":"this.item"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}]},"onClick":{"type":"JSFunction","value":"function(){return this.onClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"bordered":true},"loop":{"type":"JSExpression","value":"this.colors"},"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}||将按钮字体颜色改为按钮颜色的对比色

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7tx8np1","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"colors":{"type":"JSExpression","value":"['red', 'blue', 'green', 'yellow', 'purple']"}},"dataSource":{"list":[]},"css":".red { background-color: red; color: white; } .blue { background-color: blue; color: white; } .green { background-color: green; color: white; } .yellow { background-color: yellow; color: black; } .purple { background-color: purple; color: white; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {    console.log('组件被挂载');  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {    console.log('onClick');  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"children":[{"componentName":"NButton","id":"node_ocm7tx8np12","props":{"children":{"type":"JSExpression","value":"this.item"},"class":{"type":"JSExpression","value":"this.item"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}]},"onClick":{"type":"JSFunction","value":"function(){return this.onClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"bordered":true},"docId":"docm7tx8np1","loop":{"type":"JSExpression","value":"this.colors"},"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}


[System] 你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：规则：·组件限制：- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。- NGrid必须配合NGridItem使用。- 优先使用栅格进行布局- 禁止使用未接入的组件。·变量绑定：- 绑定变量时使用this，并通过"type": "JSExpression"实现。- 双向绑定使用v-model:value。- 示例：{  "componentName": "NText",  "props": {    "children": {      "type": "JSExpression",      "value": "this.title"    }  }}·循环渲染：- 渲染组件禁止使用map渲染，必须使用以下参考中的loop- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：{  "componentName": "NButton",  "props": {    "children": {      "type": "JSExpression",      "value": "this.item"    }  },  "loop": [1,2,3],  "loopArgs": ["item", "index"]}·事件绑定：- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：{      "componentName": "NButton",      "props": {        "__events": {          "eventDataList": [            {              "type": "nativeEvent",              "name": "onChange",              "relatedEventName": "onChange"            },            {              "type": "componentEvent",              "name": "onClick",              "relatedEventName": "myClick"            }          ]        },        "onChange": {          "type": "JSFunction",          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        },        "onClick": {          "type": "JSFunction",          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"        }      }    }·样式类的使用：- 可在schema中的css属性中定义样式类，例如："css": ".mycolor{ color: blue;}.mydiv{  width:100px}",- 如需使用，请在组件props中指定class，如：{    "componentName": "NText",    "props": {      "class": "mycolor mydiv",    },}·变量和方法定义：- 禁止使用未定义的变量或方法。- 如需使用，请先在Schema中定义。·Schema更新：- 每次调整基于最新的Schema实现。- 可能提供多个Schema，确保最终输出基于最新版本。·截图匹配：- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。- 使用截图中的确切文本和样式。·输出要求：- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。- 仅返回Schema，确保可直接使用，不要返回markdown。- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7u6s2mh","fileName":"index","state":{"username":{"type":"JSExpression","value":"\"\""},"password":{"type":"JSExpression","value":"\"\""}},"dataSource":{"list":[]},"css":".login-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-form { width: 300px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .login-form-item { margin-bottom: 15px; } .login-form-button { width: 100%; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {    console.log('组件被挂载');  }"}},"methods":{"onLogin":{"type":"JSFunction","value":"function onLogin() {    console.log('用户名:', this.username);    console.log('密码:', this.password);  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NLayout","id":"node_ocm7u6s2mhb","props":{"class":"login-container"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NCard","id":"node_ocm7u6s2mhc","props":{"class":"login-form"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NForm","id":"node_ocm7u6s2mhd","props":{},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NFormItem","id":"node_ocm7u6s2mhe","props":{"label":"用户名","class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhf","props":{"v-model:value":{"type":"JSExpression","value":"this.username"},"placeholder":"请输入用户名"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhg","props":{"label":"密码","class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhh","props":{"v-model:value":{"type":"JSExpression","value":"this.password"},"type":"password","placeholder":"请输入密码"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhi","props":{"class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NButton","id":"node_ocm7u6s2mhj","props":{"type":"primary","class":"login-form-button","onClick":{"type":"JSFunction","value":"function(){return this.onLogin.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onLogin"}]}},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":["登录"]}]}]}]}]}]}||用户名默认 小明 页面背景美化一下 卡片边框增加一些阴影使其看起来有悬浮感

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7u6s2mh","fileName":"index","state":{"username":{"type":"JSExpression","value":"\"小明\""},"password":{"type":"JSExpression","value":"\"\""}},"dataSource":{"list":[]},"css":".login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .login-form { width: 300px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background: white; } .login-form-item { margin-bottom: 15px; } .login-form-button { width: 100%; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {    console.log('组件被挂载');  }"}},"methods":{"onLogin":{"type":"JSFunction","value":"function onLogin() {    console.log('用户名:', this.username);    console.log('密码:', this.password);  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NLayout","id":"node_ocm7u6s2mhb","props":{"class":"login-container"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NCard","id":"node_ocm7u6s2mhc","props":{"class":"login-form","segmented":{"content":false,"footer":false,"action":false}},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NForm","id":"node_ocm7u6s2mhd","props":{},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NFormItem","id":"node_ocm7u6s2mhe","props":{"label":"用户名","class":"login-form-item","show-label":true},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhf","props":{"v-model:value":{"type":"JSExpression","value":"this.username"},"placeholder":"请输入用户名"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhg","props":{"label":"密码","class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhh","props":{"v-model:value":{"type":"JSExpression","value":"this.password"},"type":"password","placeholder":"请输入密码"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhi","props":{"class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NButton","id":"node_ocm7u6s2mhj","props":{"type":"primary","class":"login-form-button","onClick":{"type":"JSFunction","value":"function(){return this.onLogin.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onLogin"}]}},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":["登录"]}]}]}]}]}]}


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[]}||创建一个用户注册页面


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[]}||使用循环渲染五个不同颜色的按钮

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7tx8np1","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"colors":{"type":"JSExpression","value":"['red', 'blue', 'green', 'yellow', 'purple']"}},"dataSource":{"list":[]},"css":".red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } .yellow { background-color: yellow; } .purple { background-color: purple; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"children":[{"componentName":"NButton","id":"node_ocm7tx8np12","props":{"children":{"type":"JSExpression","value":"this.item"},"class":{"type":"JSExpression","value":"this.item"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}]},"onClick":{"type":"JSFunction","value":"function(){return this.onClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"bordered":true},"loop":{"type":"JSExpression","value":"this.colors"},"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7tx8np1","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"colors":{"type":"JSExpression","value":"['red', 'blue', 'green', 'yellow', 'purple']"}},"dataSource":{"list":[]},"css":".red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } .yellow { background-color: yellow; } .purple { background-color: purple; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"children":[{"componentName":"NButton","id":"node_ocm7tx8np12","props":{"children":{"type":"JSExpression","value":"this.item"},"class":{"type":"JSExpression","value":"this.item"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}]},"onClick":{"type":"JSFunction","value":"function(){return this.onClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"bordered":true},"loop":{"type":"JSExpression","value":"this.colors"},"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}||将按钮字体颜色改为按钮颜色的对比色

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7tx8np1","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"colors":{"type":"JSExpression","value":"['red', 'blue', 'green', 'yellow', 'purple']"}},"dataSource":{"list":[]},"css":".red { background-color: red; color: white; } .blue { background-color: blue; color: white; } .green { background-color: green; color: white; } .yellow { background-color: yellow; color: black; } .purple { background-color: purple; color: white; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"children":[{"componentName":"NButton","id":"node_ocm7tx8np12","props":{"children":{"type":"JSExpression","value":"this.item"},"class":{"type":"JSExpression","value":"this.item"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}]},"onClick":{"type":"JSFunction","value":"function(){return this.onClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"bordered":true},"docId":"docm7tx8np1","loop":{"type":"JSExpression","value":"this.colors"},"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[]}||在页面中画一个卡片展示用户的浏览量排行，展示的内容包含：排行、用户姓名、用户头像、所在单位、浏览量


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7u6s2mh","fileName":"index","state":{"username":{"type":"JSExpression","value":"\"\""},"password":{"type":"JSExpression","value":"\"\""}},"dataSource":{"list":[]},"css":".login-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-form { width: 300px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .login-form-item { margin-bottom: 15px; } .login-form-button { width: 100%; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onLogin":{"type":"JSFunction","value":"function onLogin() {\n    console.log('用户名:', this.username);\n    console.log('密码:', this.password);\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NLayout","id":"node_ocm7u6s2mhb","props":{"class":"login-container"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NCard","id":"node_ocm7u6s2mhc","props":{"class":"login-form"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NForm","id":"node_ocm7u6s2mhd","props":{},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NFormItem","id":"node_ocm7u6s2mhe","props":{"label":"用户名","class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhf","props":{"v-model:value":{"type":"JSExpression","value":"this.username"},"placeholder":"请输入用户名"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhg","props":{"label":"密码","class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhh","props":{"v-model:value":{"type":"JSExpression","value":"this.password"},"type":"password","placeholder":"请输入密码"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhi","props":{"class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NButton","id":"node_ocm7u6s2mhj","props":{"type":"primary","class":"login-form-button","onClick":{"type":"JSFunction","value":"function(){return this.onLogin.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onLogin"}]}},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":["登录"]}]}]}]}]}]}||用户名默认 小明 页面背景美化一下 卡片边框增加一些阴影使其看起来有悬浮感

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm7u6s2mh","fileName":"index","state":{"username":{"type":"JSExpression","value":"\"小明\""},"password":{"type":"JSExpression","value":"\"\""}},"dataSource":{"list":[]},"css":".login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .login-form { width: 300px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background: white; } .login-form-item { margin-bottom: 15px; } .login-form-button { width: 100%; }","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onLogin":{"type":"JSFunction","value":"function onLogin() {\n    console.log('用户名:', this.username);\n    console.log('密码:', this.password);\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NLayout","id":"node_ocm7u6s2mhb","props":{"class":"login-container"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NCard","id":"node_ocm7u6s2mhc","props":{"class":"login-form","segmented":{"content":false,"footer":false,"action":false}},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NForm","id":"node_ocm7u6s2mhd","props":{},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NFormItem","id":"node_ocm7u6s2mhe","props":{"label":"用户名","class":"login-form-item","show-label":true},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhf","props":{"v-model:value":{"type":"JSExpression","value":"this.username"},"placeholder":"请输入用户名"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhg","props":{"label":"密码","class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NInput","id":"node_ocm7u6s2mhh","props":{"v-model:value":{"type":"JSExpression","value":"this.password"},"type":"password","placeholder":"请输入密码"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]},{"componentName":"NFormItem","id":"node_ocm7u6s2mhi","props":{"class":"login-form-item"},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"NButton","id":"node_ocm7u6s2mhj","props":{"type":"primary","class":"login-form-button","onClick":{"type":"JSFunction","value":"function(){return this.onLogin.apply(this,Array.prototype.slice.call(arguments).concat([])) }"},"__events":{"eventDataList":[{"type":"componentEvent","name":"onClick","relatedEventName":"onLogin"}]}},"docId":"docm7u6s2mh","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":["登录"]}]}]}]}]}]}


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[]}||创建一个用户管理页面


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm85hrykd","fileName":"index","state":{"text":"这是一段文字"},"dataSource":{"list":[]},"css":".red-font{\r\n  color: red;\r\n}\r\n.blue-font{\r\n  color: blue;\r\n}\r\n.green-font{\r\n  color: green;\r\n}","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","meta":{"originCode":"import { defineComponent } from 'vue';\n\nexport default defineComponent({\n  data: () => ({\n    text: \"这是一段文字\",\n  }),\n  methods: {\n    onClick() {\n    console.log('onClick');\n  },\n  },\n  mounted() {\n    console.log('组件被挂载');\n  },\n})\n"},"children":[{"componentName":"NText","id":"node_ocm85hrykd1","props":{"children":"红色","type":"default","tag":"span","class":"red-font"},"docId":"docm85hrykd","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""},{"componentName":"NText","id":"node_ocm85hrykd2","props":{"children":"蓝色","type":"default","tag":"span","class":"blue-font"},"docId":"docm85hrykd","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""},{"componentName":"NText","id":"node_ocm85hrykd3","props":{"children":"绿色","type":"default","tag":"span","class":"green-font"},"docId":"docm85hrykd","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}||在页面中添加一个柱状图、饼状图、折线图


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NButton","id":"node_ocm85i1fy22","props":{"children":"按钮","bordered":true},"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}||点击按钮时弹出一个确认对话框


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[]}||生成一个左-上中下结构的布局


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm85ig96q","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"buttons":{"type":"JSExpression","value":"[{\r\n  \"name\": \"按钮1\",\r\n  \"color\": \"red\",\r\n}, {\r\n  \"name\": \"按钮2\",\r\n  \"color\": \"blue\",\r\n}, {\r\n  \"name\": \"按钮3\",\r\n  \"color\": \"green\",\r\n}]"}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}||根据buttons中的数据渲染按钮

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm85ig96q","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"buttons":{"type":"JSExpression","value":"[{\r\n  \"name\": \"按钮1\",\r\n  \"color\": \"red\",\r\n}, {\r\n  \"name\": \"按钮2\",\r\n  \"color\": \"blue\",\r\n}, {\r\n  \"name\": \"按钮3\",\r\n  \"color\": \"green\",\r\n}]"}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NButton","id":"node_ocm85ig96q1","props":{"children":{"type":"JSExpression","value":"this.item.name","mock":"按钮"},"bordered":true,"color":{"type":"JSExpression","value":"this.item.color"},"_unsafe_MixedSetter____loop____select":"VariableSetter"},"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","loop":{"type":"JSExpression","value":"this.buttons"},"loopArgs":["item","index"]}]}


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}||生成三个指标卡片


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NButton","id":"node_ocm85iuphl2","props":{"children":"按钮","bordered":true},"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}||再按钮下方添加一行文字

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口","children":[{"componentName":"NButton","id":"node_ocm85iuphl2","props":{"children":"按钮","bordered":true},"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""},{"componentName":"NText","id":"node_ocm85iuphl4","props":{"children":"文本内容","type":"default","tag":"span","style":{"display":"block"}},"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}||生成一个三行四列的布局


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}||生成一个面包屑


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}||生成一个面包屑


[System]
你现在是一名低代码网页设计专家，专注于使用naiveUI组件库构建和调整网页Schema。我将提供网页的Schema、需求描述或网页截图，你需要根据以下规则调整Schema以满足需求或使其与截图完全一致：
规则：
·组件限制：
- 仅使用以下已接入的naiveUI组件:NTag、NDataTable、NBreadcrumb、NText、NAvatar、NButton、NCard、NScrollbar、NGrid、NGridItem、NDivider、NSpin、NPopover、NModal、NDrawer、NDropdown、NSteps、NBackTop、NMenu、NPageHeader、NForm、NFormItem、NCascader、NSwitch、NInput、NCheckbox、NRadio、NInputNumber、NRate、NSelect、NSlider、NTimePicker、NDatePicker、NTransfer、NUpload、NCollapse、NTimeline、NPagination、NProgress、NStatistic、NWatermark、NTreeSelect、NTabs、NSpace、NLayout、NLayoutSider、NLayoutContent、NLayoutHeader、NLayoutFooter、NQrCode。
- NGrid必须配合NGridItem使用。
- 优先使用栅格进行布局
- 禁止使用未接入的组件。
·变量绑定：
- 绑定变量时使用this，并通过"type": "JSExpression"实现。
- 双向绑定使用v-model:value。
- 示例：
{
  "componentName": "NText",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.title"
    }
  }
}
·循环渲染：
- 渲染组件禁止使用map渲染，必须使用以下参考中的loop
- 使用循环渲染组件时，参考以下格式，以下是一个通过循环渲染三个按钮的示例：
{
  "componentName": "NButton",
  "props": {
    "children": {
      "type": "JSExpression",
      "value": "this.item"
    }
  },
  "loop": [1,2,3],
  "loopArgs": ["item", "index"]
}
·事件绑定：
- 组件可绑定事件分为两类，nativeEvent(原生事件)、componentEvent(naiveUI组件中的事件)
- 在组件添加一个事件后，必须在组件props中的__events.eventDataList中添加对应的数据，示例：
{
      "componentName": "NButton",
      "props": {
        "__events": {
          "eventDataList": [
            {
              "type": "nativeEvent",
              "name": "onChange",
              "relatedEventName": "onChange"
            },
            {
              "type": "componentEvent",
              "name": "onClick",
              "relatedEventName": "myClick"
            }
          ]
        },
        "onChange": {
          "type": "JSFunction",
          "value": "function(){return this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        },
        "onClick": {
          "type": "JSFunction",
          "value": "function(){return this.myClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
        }
      }
    }
·样式类的使用：
- 可在schema中的css属性中定义样式类，例如：
"css": ".mycolor{ color: blue;}.mydiv{  width:100px}",
- 如需使用，请在组件props中指定class，如：
{
    "componentName": "NText",
    "props": {
      "class": "mycolor mydiv",
    },
}
·变量和方法定义：
- 禁止使用未定义的变量或方法。
- 如需使用，请先在Schema中定义。
·Schema更新：
- 每次调整基于最新的Schema实现。
- 可能提供多个Schema，确保最终输出基于最新版本。
·截图匹配：
- 当提供网页截图时，确保Schema生成的页面与截图完全一致，一比一还原。
- 关注细节：组件位置、背景颜色、文本颜色、字体大小、字体系列、填充、边距、边框等。
- 使用截图中的确切文本和样式。
·输出要求：
- 完成调整后，返回完整的Schema，不包含任何注释或额外解释。
- 仅返回Schema，确保可直接使用，不要返回markdown。
- 不要在开头或结尾包含“```json”或“```”。

[User] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}||定义一个数组用于存储用户信息，并且初始化两条数据

[Assistant] {"componentName":"Page","id":"schema_code","props":{"_mode":"Flowing"},"docId":"docm85iuphl","fileName":"index","state":{"text":{"type":"JSExpression","value":"\"这是一段文字\""},"userList":{"type":"JSExpression","value":"[\r\n  { \"username\": \"小红\", \"age\": \"15\" },\r\n  { \"username\": \"小明\", \"age\": \"18\" },\r\n]"}},"dataSource":{"list":[]},"css":"","lifeCycles":{"mounted":{"type":"JSFunction","value":"function mounted() {\n    console.log('组件被挂载');\n  }"}},"methods":{"onClick":{"type":"JSFunction","value":"function onClick() {\n    console.log('onClick');\n  }"}},"originCode":"","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","isComponent":false,"fileTitle":"应用入口"}