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：查看生成的文件

```bash
# 查看 dist 目录
ls -lh dist/

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

### 方法 2：在浏览器中测试

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

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

#### 步骤 1：安装依赖

在 `onmyoji-wiki` 项目中：

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

#### 步骤 2：创建测试组件

创建 `components/TestYysEditor.vue`：

```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：运行测试

```bash
npm run dev
# 访问测试页面
```

---

## 📋 功能测试清单

### ✅ 已验证

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

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

- [ ] **预览模式**
  - [ ] 正确渲染流程图
  - [ ] 只读，无法编辑
  - [ ] 不显示工具栏、组件库、属性面板

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

- [ ] **数据接口**
  - [ ] Props 传入数据正确渲染
  - [ ] 数据变更触发 update:data 事件
  - [ ] 保存触发 save 事件
  - [ ] 取消触发 cancel 事件

- [ ] **状态隔离**
  - [ ] 多个实例互不影响
  - [ ] 不污染全局状态

---

## 📖 使用文档

### 基础使用

```vue
<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 中集成测试