mirror of https://github.com/Powerful-517/yys-editor.git synced 2026-03-05 06:55:26 +00:00

Files

rookie4show 15bae3be81 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

2026-02-20 17:23:59 +08:00

2.7 KiB

Raw Permalink Blame History

✅ yys-editor 组件化改造完成总结

🎉 完成情况

完成时间： 2026-02-20 状态： ✅ 全部完成

📦 交付成果

1. 核心组件

✅ src/YysEditorEmbed.vue - 嵌入式组件
✅ src/index.js - 导出入口
✅ src/TestEmbed.vue - 测试组件

2. 构建配置

✅ vite.config.lib.js - 库模式构建配置
✅ package.json - 更新导出配置

3. 构建产物

dist/
├── yys-editor.es.js       155 KB (gzip: 35 KB)
├── yys-editor.umd.js      112 KB (gzip: 31 KB)
└── yys-editor.css          69 KB (gzip: 33 KB)

4. 文档

✅ docs/2design/ComponentArchitecture.md - 设计文档
✅ docs/3build/YysEditorEmbed.md - 使用文档
✅ docs/3build/EMBED_README.md - 快速开始
✅ docs/4test/BUILD_TEST_REPORT.md - 测试报告
✅ examples/embed-demo.html - 示例页面

🎯 功能特性

双模式支持

✅ 预览模式：只读展示，无编辑 UI
✅ 编辑模式：完整编辑功能

完整接口

✅ Props：data, mode, width, height, 配置项
✅ Emits：update:data, save, cancel, error
✅ Methods：getGraphData(), setGraphData()

状态隔离

✅ 使用局部 Pinia 实例
✅ 样式 scoped
✅ 多实例互不影响

📖 使用方式

安装

# 在 onmyoji-wiki 项目中
npm install file:../yys-editor

使用

<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>

🚀 下一步

在 onmyoji-wiki 中集成

安装依赖

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

创建 MDC 组件
- 创建 components/content/YysEditor.vue
- 实现预览/编辑模式切换
在 Markdown 中使用
```
::yys-editor{id="flow-1"}
::
```

📁 文档索引

文档	路径	说明
项目计划	`docs/1management/plan.md`	项目整体规划
设计文档	`docs/2design/ComponentArchitecture.md`	架构设计
使用文档	`docs/3build/YysEditorEmbed.md`	API 和示例
快速开始	`docs/3build/EMBED_README.md`	快速上手
测试报告	`docs/4test/BUILD_TEST_REPORT.md`	构建测试

✅ 验收标准

可以作为 npm 包引用
支持预览和编辑模式
数据接口清晰
文档完善
构建产物正确
文件大小合理（< 200KB）

项目状态： ✅ 组件化改造完成 下一阶段： wiki 集成测试

2.7 KiB Raw Permalink Blame History Unescape Escape