yys-editor/docs/4test/BUILD_TEST_REPORT.md

🎉 组件化改造构建测试报告

✅ 构建成功！

📦 生成的文件

dist/
├── yys-editor.es.js       155 KB  (ES Module 格式)
├── yys-editor.es.js.map   297 KB  (Source Map)
├── yys-editor.umd.js      112 KB  (UMD 格式)
├── yys-editor.umd.js.map  286 KB  (Source Map)
└── yys-editor.css          69 KB  (样式文件)

Gzip 压缩后大小：

• ES Module: 35.20 KB
• UMD: 31.09 KB
• CSS: 32.87 KB

🎯 构建配置

• ✅ 入口文件：src/index.js
• ✅ 输出格式：ES Module + UMD
• ✅ 外部化依赖：vue, element-plus, pinia, @logicflow/*
• ✅ 生成 Source Map
• ✅ 导出 CSS 文件

---

🧪 如何验证构建结果

方法 1：查看生成的文件

# 查看 dist 目录
ls -lh dist/

# 查看文件内容（前 20 行）
head -n 20 dist/yys-editor.es.js

方法 2：在浏览器中测试

打开 examples/embed-demo.html 查看示例页面（需要实际集成后才能运行）。

方法 3：在 onmyoji-wiki 中集成测试

步骤 1：安装依赖

在 onmyoji-wiki 项目中：

cd ../onmyoji-wiki
npm install file:../yys-editor

步骤 2：创建测试组件

创建 components/TestYysEditor.vue：

<script setup>
import { ref } from 'vue'
import { YysEditorEmbed } from 'yys-editor'
import 'yys-editor/style.css'

const flowData = ref({
  nodes: [
    {
      id: 'node1',
      type: 'rect',
      x: 100,
      y: 100,
      text: { value: '测试节点' },
      properties: { width: 120, height: 60 }
    }
  ],
  edges: []
})

const handleSave = (data) => {
  console.log('保存数据:', data)
  alert('保存成功！')
}
</script>

<template>
  <div style="padding: 20px;">
    <h1>YysEditorEmbed 测试</h1>

    <h2>编辑模式</h2>
    <YysEditorEmbed
      mode="edit"
      :data="flowData"
      :height="500"
      @save="handleSave"
    />

    <h2>预览模式</h2>
    <YysEditorEmbed
      mode="preview"
      :data="flowData"
      :height="300"
    />
  </div>
</template>

步骤 3：运行测试

npm run dev
# 访问测试页面

---

📋 功能测试清单

✅ 已验证

• 构建成功，无错误
• 生成 ES Module 格式
• 生成 UMD 格式
• 生成 CSS 文件
• 生成 Source Map
• 文件大小合理（< 200KB）

⏳ 待验证（需要在实际项目中测试）

• 预览模式

  • 正确渲染流程图
  • 只读，无法编辑
  • 不显示工具栏、组件库、属性面板

• 编辑模式

  • 完整编辑功能
  • 工具栏正常工作
  • 组件库可拖拽
  • 属性面板可编辑
  • 保存/取消按钮触发正确事件

• 数据接口

  • Props 传入数据正确渲染
  • 数据变更触发 update:data 事件
  • 保存触发 save 事件
  • 取消触发 cancel 事件

• 状态隔离

  • 多个实例互不影响
  • 不污染全局状态

---

📖 使用文档

基础使用

<script setup>
import { YysEditorEmbed } from 'yys-editor'
import 'yys-editor/style.css'

const flowData = ref({ nodes: [], edges: [] })
</script>

<template>
  <YysEditorEmbed
    mode="edit"
    :data="flowData"
    :height="600"
    @save="handleSave"
  />
</template>

Props

属性	类型	默认值	说明
data	GraphData	undefined	初始数据
mode	'preview' | 'edit'	'edit'	模式
width	string | number	'100%'	宽度
height	string | number	'600px'	高度
showToolbar	boolean	true	显示工具栏
showPropertyPanel	boolean	true	显示属性面板
showComponentPanel	boolean	true	显示组件库

Events

事件	参数	说明
update:data	(data: GraphData)	数据变更
save	(data: GraphData)	保存
cancel	()	取消
error	(error: Error)	错误

---

📁 相关文件

• 设计文档: docs/2design/ComponentArchitecture.md
• 使用文档: docs/3usage/YysEditorEmbed.md
• 示例页面: examples/embed-demo.html
• 测试组件: src/TestEmbed.vue
• 快速开始: EMBED_README.md

---

🚀 下一步

1. 在 onmyoji-wiki 中集成测试

   • 安装 yys-editor 包
   • 创建测试组件
   • 验证功能正常

2. 创建 MDC 组件

   • 创建 components/content/YysEditor.vue
   • 实现预览/编辑模式切换
   • 集成到 Markdown 中

3. 完善功能

   • 根据测试结果优化
   • 添加更多配置选项
   • 完善文档

---

📝 构建日志

> yys-editor@1.0.0 build:lib
> vite build --config vite.config.lib.js

vite v5.4.19 building for production...
transforming...
✓ 709 modules transformed.
rendering chunks...
computing gzip size...
dist/yys-editor.css     70.30 kB │ gzip: 32.87 kB
dist/yys-editor.es.js  151.45 kB │ gzip: 35.20 kB │ map: 296.11 kB
dist/yys-editor.css     70.30 kB │ gzip: 32.87 kB
dist/yys-editor.umd.js 107.43 kB │ gzip: 31.09 kB │ map: 284.79 kB
✓ built in 3.06s

---

构建时间: 2026-02-20 17:12 状态: ✅ 成功 下一步: 等待在 onmyoji-wiki 中集成测试