pages kit 版本:0.2.452
import React from '@blocklet/pages-kit/builtin/react'; import { Box, Typography, Button, Grid } from '@blocklet/pages-kit/builtin/mui/material'; import { Icon } from '@blocklet/pages-kit/builtin/iconify/react'; const ProductIntroduction = ({ title, description, features, imageUrl, imagePosition }) => { return ( <Box sx={{ padding: 4, backgroundColor: '#f9f9f9', borderRadius: 2 }}> <Grid container spacing={2} alignItems="center"> {imagePosition === 'left' && ( <Grid item xs={12} sm={6}> <img src={imageUrl} alt={title} style={{ width: '100%', borderRadius: 8 }} /> </Grid> )} <Grid item xs={12} sm={6} sx={{ textAlign: 'center' }}> <Typography variant="h4" sx={{ marginBottom: 2, fontWeight: 'bold' }}> {title} </Typography> <Typography variant="body1" sx={{ marginBottom: 3 }}> {description} </Typography> <Box sx={{ marginBottom: 3 }}> {features.map((feature, index) => ( <Box key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 1 }}> <Icon icon="mdi:star" sx={{ marginRight: 1, color: 'primary.main' }} /> <Typography variant="body2">{feature}</Typography> </Box> ))} </Box> <Button variant="contained" color="primary"> Learn More </Button> </Grid> {imagePosition === 'right' && ( <Grid item xs={12} sm={6}> <img src={imageUrl} alt={title} style={{ width: '100%', borderRadius: 8 }} /> </Grid> )} </Grid> </Box> ); }; export default ProductIntroduction; export const PROPERTIES_SCHEMA = [ { id: '1', key: 'title', type: 'string', locales: { en: { name: 'Product Title', defaultValue: 'Amazing Product' }, zh: { name: '产品标题', defaultValue: '惊人的产品' } } }, { id: '2', key: 'description', type: 'string', locales: { en: { name: 'Product Description', defaultValue: 'This product offers amazing features and benefits.' }, zh: { name: '产品描述', defaultValue: '该产品提供惊人的功能和好处。' } } }, { id: '3', key: 'features', type: 'json', locales: { en: { name: 'Product Features', defaultValue: JSON.stringify(['Feature 1', 'Feature 2', 'Feature 3'], null, 2) }, zh: { name: '产品特点', defaultValue: JSON.stringify(['特点 1', '特点 2', '特点 3'], null, 2) } } }, { id: '4', key: 'imageUrl', type: 'url', locales: { en: { name: 'Product Image URL', defaultValue: 'https://example.com/image.jpg' }, zh: { name: '产品图片网址', defaultValue: 'https://example.com/image.jpg' } } }, { id: '5', key: 'imagePosition', type: 'string', locales: { en: { name: 'Image Position', defaultValue: 'left' }, zh: { name: '图片位置', defaultValue: '左' } } } ];
AI 生成的组件会通过 PROPERTIES_SCHEMA 将组件需要的属性定义出来,如果自定义组件在界面上添加了属性,就会忽略 PROPERTIES_SCHEMA 中定义的属性,因为缺少了属性所以页面中出现了报错。
PROPERTIES_SCHEMA
如果需要对 AI 生成的组件进行二次开发,需要将 PROPERTIES_SCHEMA 中定义的属性在界面中重新配置,然后删除 PROPERTIES_SCHEMA 。
我之前发布过一个代码雨的,好像不会这样🤔
这块设计是这样的,我们更推荐使用 GUI 来配置属性。
之前没有报错可能是属性为空时代码执行上没有错误,而这次的组件中使用了 .map 方法导致报错。
.map
Have you tried filling in the prop Parameters with the constant/properties shown in the code?
Example: key: 'title', type: 'Text', name: 'Product Title', defaultValue: 'Amazing Product'
If you do this in the GUi for all the properties shown in the code, it might work
I know how to use it, I just want to raise questions to earn bug bounty
8 replies
pages kit 版本:0.2.452
AI 生成的组件会通过
PROPERTIES_SCHEMA将组件需要的属性定义出来,如果自定义组件在界面上添加了属性,就会忽略PROPERTIES_SCHEMA中定义的属性,因为缺少了属性所以页面中出现了报错。如果需要对 AI 生成的组件进行二次开发,需要将
PROPERTIES_SCHEMA中定义的属性在界面中重新配置,然后删除PROPERTIES_SCHEMA。我之前发布过一个代码雨的,好像不会这样🤔
这块设计是这样的,我们更推荐使用 GUI 来配置属性。
之前没有报错可能是属性为空时代码执行上没有错误,而这次的组件中使用了
.map方法导致报错。Have you tried filling in the prop Parameters with the constant/properties shown in the code?
Example: key: 'title', type: 'Text', name: 'Product Title', defaultValue: 'Amazing Product'
If you do this in the GUi for all the properties shown in the code, it might work
I know how to use it, I just want to raise questions to earn bug bounty
I know how to use it, I just want to raise questions to earn bug bounty