Hero-1v2组件轮播内容精简为2组并同步更新参数

By 15899177518, 6 May, 2026
推理
用户想要将 hero-1v2 组件中的右侧轮播从4张图片改为2张图片,同时左侧的文字内容也要从4组改为2组,保持左右一一对应。

具体来说:
1. `right.elements` 中目前有4个图片元素(包括第4个是嵌套结构),需要改为2个
2. `left.elements` 中目前有4个 text 组件,需要改为2个

我需要确保左右对应,并且保持JSON格式完整。

让我仔细看看:

右侧 `right.elements` 有4个元素:
1. type: img, src: business-13.jpg
2. type: img, src: business-14.jpeg
3. type: img, src: business-15.jpeg
4. 一个嵌套了更多字段的 img 元素,src: business-16.jpeg

左侧 `left.elements` 有4个 text 元素:
1. "Storybook 是什么?"
2. "组件驱动开发"
3. "组件展示和测试"
4. "文档化"

需要改为2组对应。

用户想改成2张图片,那我就保留前2张或者后2张,或者让用户选择?用户没明确说保留哪些,我建议保留前2张比较合理,因为通常第一个是最重要的。

让我保留前2张图片和前2个文字内容,删除后2个。

左侧保留:
1. "Storybook 是什么?" - 介绍Storybook
2. "组件驱动开发" - 介绍组件驱动开发

右侧保留:
1. business-13.jpg
2. business-14.jpeg

同时右侧的第4个元素是嵌套结构(有fullWidth, spacer等字段),需要删掉。

我还要检查一下第4个元素,它虽然type也是img,但结构更复杂,有fullWidth, spacer等额外字段。不过用户说要改成2张,那我就直接保留前2个右侧元素和前2个左侧元素。

让我输出优化后的JSON。
角色
assistant
content

我来帮您将 hero-1v2 组件从4组(图+文)改为2组(图+文),保持左右一一对应。

按照保留前2组("Storybook 是什么?" 和 "组件驱动开发")来处理,这是最合理的选择,因为它们是整体概念的引入。

```json
{
"summary": "将 hero-1v2 组件的轮播图片和文字从4组改为2组,保留前2组内容('Storybook 是什么?'和'组件驱动开发'),删除后2组('组件展示和测试'和'文档化'),保持左右侧一一对应,轮播参数同步更新。",
"widget": {
"fullWidth": false,
"spacer": "none",
"containerClasses": "!overflow-visible",
"bg": {
"classes": "bg-center overlay overlay-80",
"overlay": "",
"img": {
"src": "/assets/images/hero/bg-pattern-hero.png",
"alt": "",
"classes": "bg-cover",
"mobile": "/assets/images/hero/bg-pattern-hero.png"
}
},
"animate": {
"aos": {
"enable": false
}
},
"extra": {
"uuid": "0d9561ad-82f5-4ac6-a07e-bfc186705257",
"id": "441",
"type": "json"
},
"bgClasses": "bg-center overlay overlay-80",
"overlay": "",
"id": "",
"type": "hero-1v2",
"classes": "text-light text-center",
"right": {
"params": {
"navigation": false,
"slidesPerView": 1,
"spaceBetween": 0,
"pagination": true
},
"classes": "",
"elements": [
{
"type": "img",
"src": "https://builder.design/assets/images/16-9/business-13.jpg",
"style": {
"opacity": "",
"borderRadius": "",
"boxShadow": "",
"aspectRatio": "",
"objectFit": ""
},
"classes": "object-cover",
"width": 800,
"height": 500
},
{
"type": "img",
"src": "https://builder.design/assets/images/16-9/business-14.jpeg",
"style": {
"opacity": "",
"borderRadius": "",
"boxShadow": "",
"aspectRatio": "",
"objectFit": ""
},
"classes": "object-cover",
"width": 800,
"height": 500
}
]
},
"left": {
"params": {
"navigation": false,
"slidesPerView": 1,
"spaceBetween": 0,
"pagination": false
},
"classes": "",
"elements": [
{
"type": "text",
"title": {
"label": "Storybook 是什么?",
"classes": "mat-headline-3"
},
"classes": "text-white",
"body": "Storybook是一个开源的前端工具,用于开发、测试和文档化UI组件。它提供了一个独立的环境,开发人员可以在其中构建和展示单个UI组件,而无需依赖于整个应用程序的上下文。",
"actionsAlign": "start",
"actions": [
{
"href": "#",
"mode": "raised",
"label": "查看更多",
"pill": true,
"type": "btn"
}
]
},
{
"type": "text",
"title": {
"label": "组件驱动开发",
"classes": "mat-headline-3"
},
"classes": "text-white",
"body": "Storybook采用了组件驱动开发的方法,即将UI组件作为开发的核心单元。开发人员可以在Storybook中为每个UI组件创建\"stories\",描述组件在不同状态和交互方式下的行为和外观。这种方法能够提高组件的可重用性和可测试性。",
"actionsAlign": "start",
"actions": [
{
"href": "#",
"mode": "raised",
"label": "查看更多",
"pill": true,
"type": "btn"
}
]
}
]
}
}
}
```

### 改动说明

| 区域 | 修改内容 |
|------|---------|
| **左侧文字** `left.elements` | 从4组删减为2组,保留第1、2项("Storybook 是什么?" 和 "组件驱动开发") |
| **右侧图片** `right.elements` | 从4张删减为2张,保留第1、2张(business-13.jpg、business-14.jpeg) |
| **轮播参数** | 保持不变(slidesPerView: 1),2张图片依然正常轮播 |

> 提示:如果您希望保留不同的组合(例如保留第3、4组),或者想用新的图片/文案替换,请告诉我,我可以进一步调整。

total_tokens
4974
summary
将 hero-1v2 组件的轮播图片和文字从4组改为2组,保留前2组内容('Storybook 是什么?'和'组件驱动开发'),删除后2组('组件展示和测试'和'文档化'),保持左右侧一一对应,轮播参数同步更新。
uiParsing
关闭