vue3-mgt-template/demoHtml/flex/GEMINI.md

## 项目概述
这个一个指定1920*1080大小画布，自由拖动组合生成模板布局的项目

## 技术栈
- **html5**
- **css3**
- **javascript**
- **jquery**

## DOM结构
```html
<div id="app">
    <!-- 组件列表 -->
    <div id="components-panel"></div>
    <!-- 画布容器 -->
    <div id="canvas-panel"></div>
    <!-- 当前选中组件属性 -->
    <div id="props-panel"></div>
</div>
```

## localStorage 数据结构
**localStorage存储的数据结构放置在data.json中**

## 请阅读以下要求，必须严格遵守
* 执行任何任务的时候，请先输出你的思路，等待我确认之后再修改代码
* 有任何不确认的地方，请先向我确认再执行任务
* 请任何时候使用中文与我沟通或者确认，包括项目中使用注释也使用中文
* 不要更改之前的代码逻辑，包括删除注释等，只允许添加代码，或者当老代码不能满足需求的时候才允许修改

## 任务
* 在index.js中conputedInitData函数，当type为save的时候帮我处理带有下划线的数据，数据结构参考data.json和下面示例(xxx为省略结果不代表真实值)
```
mainData = {
    xxx,
    children: [{
        "focusedStyle_background": "",
        "focusedStyle_border_width": 0,
        "focusedStyle_border_color": "",
        "focusedStyle_scale": 1,
        ...这里后续还有可能扩展（例如）
        "other_name": "",
    }]
}

最终转换为(最终转换的结果需要保留原址，类似focusedStyle_background)：
mainData = {
    xxx,
    children: [{
        focusedStyle: {
            background: xxx,
            border: {
                width: xxx,
                color: xxx
            },
            scale: xxx
        },
        ...这里后续还有扩展也保持一样的转换（例如）
        other: {
            name: xxx
        }
    }]
}
```