## DIY 组件注册机制（uniapp 端）

⚠️注意：这些调查结果没经过二次核验，需要根据实际情况调整或者验证。
关键文件：`pages/diy/components/diy/diy.vue`

注册方式是一个**超长的 if-else 链**：

```html
<component-diy-xxx v-if="item.key == 'xxx'" ... :propValue="item.com_data" />
```

### 添加自定义组件到 uniapp 的步骤

假设我们要添加一个 **VR 座位选择器** 组件：

#### 1. 创建 Vue 组件
```
pages/diy/components/diy/vr-seat-picker.vue
```

组件模板（必须遵守的 prop 接口）：

```vue
<template>
  <view class="vr-seat-picker" :style="style_container">
    <!-- 座位图渲染逻辑 -->
    <view v-for="zone in zones" :key="zone.id" class="zone">
      <text>{{ zone.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
    props: {
        propValue: { type: Object, default: () => ({}) }, // 完整配置对象
        propKey:   { type: [String, Number], default: '' },
        propIndex: { type: Number, default: 0 },
        propDiyIndex: { type: Number, default: 0 },
    },
    data() { return { form: {}, new_style: {} } },
    mounted() { this.init() },
    methods: {
        init() {
            // propValue = { content: {...}, style: {...} }
            this.form = this.propValue.content || {};
            this.new_style = this.propValue.style || {};
            // 从 form 读取配置，从 new_style 读取样式
        }
    }
}
</script>
```

#### 2. 在 diy.vue 中注册

在 `<script>` 的 import 区添加：

```javascript
import componentDiyVrSeatPicker from '@/pages/diy/components/diy/vr-seat-picker';
```

在 components 注册对象中添加：

```javascript
components: {
    // ...现有组件
    componentDiyVrSeatPicker,
}
```

在模板的 if-else 链中添加（放在"工具组件"区域）：

```html
<component-diy-vr-seat-picker 
    v-else-if="item.key == 'vr-seat-picker'" 
    :propIndex="get_prop_index(item)" 
    :propDiyIndex="index"
    :propKey="item.id + index" 
    :propValue="item.com_data" />
```

#### 3. 在 shopxo-diy 设计器中注册（可选但推荐）

在 `vr-shopxo-diy/src/components/model-xxx/index.vue` 中创建设计器组件：

```
vr-shopxo-diy/src/components/model-vr-seat-picker/index.vue   ← 设计器编辑器
vr-shopxo-diy/src/config/const/vr-seat-picker.ts             ← 默认配置
```

需要定义的内容：
- `content`: 数据配置（座标图ID、颜色等）
- `style`: 样式配置（边距、圆角、背景色等）

#### 4. JSON 数据格式（存入数据库的格式）

保存到 `vrt_diy_data.diy_data` 的 JSON：

```json
{
  "key": "vr-seat-picker",
  "id": "xxxxxxxxxxxx",
  "is_enable": "1",
  "com_data": {
    "content": {
      "seat_template_id": 1,
      "theme": "dark"
    },
    "style": {
      "common_style": { "margin": 10, "padding": 10 },
      ...其他样式
    }
  }
}
```

---

## 备选方案：整页作为自定义页面

如果不想改 DIY 系统，可以创建一个**独立页面**，然后在装修里通过一个 `custom` 组件加载它。

`custom` 组件的数据来源可以配置为「自定义」类型，直接填入 HTML 或跳转链接——这样就能把独立页面嵌入到装修里了。

---

**核心结论**：
- uniapp 端的渲染核心是 `diy.vue` 的 if-else 链，加组件只需 import + 注册 + 添加一行模板
- 设计器端需要额外创建配置 ts 文件，但可以先跳过
- 最简路径：**先写 uniapp 组件** → 在 shopxo-diy 设计器里注册 key → 测试 ✅