创建自定义模块

本指南教你如何为 OpenTree 创建一个新的数据模块。

1. 定义数据模型

// packages/main/src/database/models/Mood.ts

import { DataTypes, Model } from 'sequelize'

export class Mood extends Model {
  id!: string
  mood!: string      // 😊 😢 😡
  note?: string
  date!: string
}

Mood.init({
  id: { type: DataTypes.UUID, primaryKey: true, defaultValue: DataTypes.UUIDV4 },
  mood: { type: DataTypes.STRING, allowNull: false },
  note: { type: DataTypes.TEXT },
  date: { type: DataTypes.DATEONLY, allowNull: false },
}, { tableName: 'moods', sequelize })

2. 注册 IPC 处理器

// packages/main/src/ipc/mood.ts

import { ipcMain } from 'electron'
import { Mood } from '../database/models/Mood'

export function registerMoodIpc() {
  ipcMain.handle('mood-get-all', async () => {
    return await Mood.findAll({ order: [['date', 'DESC']] })
  })

  ipcMain.handle('mood-create', async (_, data) => {
    return await Mood.create(data)
  })

  ipcMain.handle('mood-update', async (_, id, data) => {
    await Mood.update(data, { where: { id } })
    return await Mood.findByPk(id)
  })

  ipcMain.handle('mood-delete', async (_, id) => {
    return await Mood.destroy({ where: { id } })
  })
}

3. 暴露到渲染进程

// packages/main/src/preload.ts

contextBridge.exposeInMainWorld('electronAPI', {
  // ... 已有模块

  mood: {
    getAll: () => ipcRenderer.invoke('mood-get-all'),
    create: (data) => ipcRenderer.invoke('mood-create', data),
    update: (id, data) => ipcRenderer.invoke('mood-update', id, data),
    remove: (id) => ipcRenderer.invoke('mood-delete', id),
  },
})

4. 在元宇宙中接入

// static/metaverse-v2/app.js

// 在 getWtElectronAPI 中添加
mood: {
  getAll: () => ipc.invoke('mood-get-all'),
  create: (data) => ipc.invoke('mood-create', data),
  update: (id, data) => ipc.invoke('mood-update', id, data),
  remove: (id) => ipc.invoke('mood-delete', id),
},

// 添加渲染函数
async function renderMoodModule(body, title) {
  title.textContent = '😊 心情'
  const api = getWtElectronAPI()
  const items = await api.mood.getAll()
  
  body.innerHTML = ''
  // 渲染列表...
}

5. 添加浮动按钮

<!-- index.html -->
<button class="float-btn mod-btn" data-mod="mood" title="心情（J）">
  <span class="btn-icon">😊</span>
  <span class="btn-label">心情</span>
</button>

6. 绑定快捷键

// app.js
else if (key === 'j') openMod('mood')

7. 连接到 renderModule

} else if (id === 'mood') {
  renderMoodModule(body, title)
}

完成

现在你的自定义模块已经可以在世界树和元宇宙中使用了！