feat: 完成组件化改造 - 支持作为可嵌入组件使用

- 创建 YysEditorEmbed.vue 嵌入式组件
- 实现 preview/edit 双模式
- 配置 Vite library mode 构建
- 生成 ES Module + UMD + CSS 构建产物
- 完善设计文档和使用文档
- 更新 plan.md 标记阶段 2 完成

构建产物:
- dist/yys-editor.es.js (155KB, gzip: 35KB)
- dist/yys-editor.umd.js (112KB, gzip: 31KB)
- dist/yys-editor.css (69KB, gzip: 33KB)

相关文档:
- docs/2design/ComponentArchitecture.md
- docs/3build/YysEditorEmbed.md
- docs/3build/EMBED_README.md
- docs/4test/BUILD_TEST_REPORT.md
This commit is contained in:
2026-02-20 17:23:59 +08:00
parent 92557d553b
commit 15bae3be81
13 changed files with 3553 additions and 424 deletions

69
vite.config.lib.js Normal file
View File

@@ -0,0 +1,69 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('lf-')
}
}
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
lib: {
// 入口文件 - 创建一个入口文件而不是直接使用 .vue 文件
entry: path.resolve(__dirname, 'src/index.js'),
name: 'YysEditor',
// 输出文件名
fileName: (format) => `yys-editor.${format}.js`,
formats: ['es', 'umd']
},
rollupOptions: {
// 外部化依赖(不打包进库)
external: [
'vue',
'element-plus',
'pinia',
'@logicflow/core',
'@logicflow/extension',
'@logicflow/vue-node-registry',
'@element-plus/icons-vue',
'@vueup/vue-quill',
'vue3-draggable-resizable',
'vuedraggable',
'html2canvas',
'vue-i18n'
],
output: {
// 全局变量名
globals: {
vue: 'Vue',
'element-plus': 'ElementPlus',
pinia: 'Pinia',
'@logicflow/core': 'LogicFlow',
'@logicflow/extension': 'LogicFlowExtension',
'@logicflow/vue-node-registry': 'LogicFlowVueNodeRegistry'
},
// 导出 CSS
assetFileNames: (assetInfo) => {
if (assetInfo.name === 'style.css') return 'yys-editor.css'
return assetInfo.name
}
}
},
// 生成 sourcemap
sourcemap: true,
// 清空输出目录
emptyOutDir: false
}
})