安装与初始化

Molio 以 Vue 3 npm package 的形式发布。宿主应用需要安装 package、导入样式，并让 RDKit wasm 可以被浏览器访问。

安装

pnpm add @shangchien/molio

最小接入

<script setup lang="ts">
import { ref } from 'vue'
import {
  MolEditor,
  PRESET_TOOLS,
  configureRDKit,
  type DocumentSnapshot,
} from '@shangchien/molio'
import '@shangchien/molio/style.css'

configureRDKit({
  wasmUrl: new URL('@shangchien/molio/RDKit_minimal.wasm', import.meta.url).href,
})

const documentSnapshot = ref<DocumentSnapshot | null>(null)
const fullscreen = ref(false)
</script>

<template>
  <MolEditor
    v-model:document-snapshot="documentSnapshot"
    v-model:fullscreen="fullscreen"
    :options="{
      width: 960,
      height: 640,
      readonly: false,
      defaultTool: PRESET_TOOLS.select,
      viewport: {
        initial: { scale: 1.2 },
        autoFitOnInit: false,
        autoFitOnLoad: true,
      },
    }"
  />
</template>

RDKit wasm 定位

默认 runtime 会按应用的 base URL 查找 wasm。生产应用通常更推荐显式配置：

import { configureRDKit } from '@shangchien/molio'

configureRDKit({ wasmUrl: '/assets/RDKit_minimal.wasm' })

如果你的构建工具支持 package asset URL，也可以使用：

configureRDKit({
  wasmUrl: new URL('@shangchien/molio/RDKit_minimal.wasm', import.meta.url).href,
})

组件尺寸

options.width 和 options.height 是非全屏状态下的画布尺寸。宿主如果要做响应式布局，可以在父组件监听容器尺寸变化后调用：

editorRef.value?.resize(width, height)
editorRef.value?.setViewport({ scale: 1 })
editorRef.value?.autofit()

在线 demo 的非全屏尺寸使用 90vw x 90vh，然后把真实像素值传给 MolEditor.options。

导入样式

必须导入组件样式，否则 toolbar、dock、overlay 和内置面板不会得到正确布局：

import '@shangchien/molio/style.css'

下一步

• 宿主工具栏集成见 父组件集成
• 完整组件 props 和 events 见 MolEditor 组件
• 命令、工具和插件扩展见 命令与工具 与 Plugin Families