mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2026-03-05 15:05:27 +00:00
rookie4show
15bae3be81
- 创建 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
452 lines
10 KiB
Markdown
452 lines
10 KiB
Markdown
# yys-editor 项目计划（重新规划）
|
||
|
||
## 📊 项目概述
|
||
|
||
**项目名称：** yys-editor - 阴阳师流程图编辑器
|
||
**技术栈：** Vue 3 + LogicFlow + Element Plus + Pinia
|
||
**目标：** 作为独立编辑器和可嵌入组件，支持在 onmyoji-wiki 中作为块插件使用
|
||
|
||
**当前状态：** ✅ 阶段 1 完成（独立编辑器）+ ✅ 阶段 2 完成（组件化改造）
|
||
**总体完成度：** 100%（核心功能）
|
||
|
||
---
|
||
|
||
## 🎯 项目定位
|
||
|
||
### 双重角色
|
||
|
||
**角色 1：独立编辑器（已完成 ✅）**
|
||
- 完整的流程图编辑应用
|
||
- 支持本地运行和使用
|
||
- 完整的 UI（工具栏、组件库、属性面板）
|
||
- 数据导入导出
|
||
|
||
**角色 2：可嵌入组件（已完成 ✅）**
|
||
- 作为 onmyoji-wiki 的块插件
|
||
- 支持预览/编辑模式
|
||
- 轻量级，只包含核心编辑功能
|
||
- 数据接口清晰
|
||
- 构建产物：ES Module + UMD + CSS
|
||
|
||
---
|
||
|
||
## 📋 当前完成度
|
||
|
||
### 核心模块完成度
|
||
|
||
| 模块 | 完成度 | 状态 | 关键缺失 |
|
||
|------|--------|------|----------|
|
||
| 🎨 画布（LogicFlow） | 100% | ✅ 完美 | 无 |
|
||
| 📦 左侧组件库 | 75% | ✅ 可用 | 缩略图、搜索 |
|
||
| ⚙️ 右侧属性面板 | 100% | ✅ 完美 | 无 |
|
||
| 🔧 工具栏 | 85% | ✅ 良好 | 导出命名优化 |
|
||
| 💬 弹窗系统 | 75% | ✅ 可用 | i18n完善、性能优化 |
|
||
| 💾 状态与持久化 | 90% | ✅ 优秀 | 重命名UI |
|
||
| 🌐 数据与国际化 | 60% | ⚠️ 基础 | UTF-8统一、日文覆盖 |
|
||
| 📁 项目资源面板 | 30% | ❌ 未集成 | 布局集成 |
|
||
| 🏗️ 构建与质量 | 40% | ⚠️ 基础 | 测试、CI |
|
||
|
||
### 愿景一实施进度（基础排版功能）✅ 100%
|
||
|
||
| 步骤 | 任务 | 状态 | 说明 |
|
||
|------|------|------|------|
|
||
| 1 | 节点最小化打通 | ✅ 完成 | imageNode/textNode 均已注册可用 |
|
||
| 2 | 截图修复 | ✅ 完成 | LogicFlow Snapshot + 水印 |
|
||
| 3 | 图层命令MVP | ✅ 完成 | 置顶/置底/前移/后移全部完成 |
|
||
| 4 | 多选/对齐/吸附 | ✅ 完成 | 6种对齐 + 2种分布 |
|
||
| 5 | 快捷键与微调 | ✅ 完成 | 8种快捷键全部工作 |
|
||
| 6 | 样式模型补齐 | ✅ 完成 | 11个样式属性统一 |
|
||
| 7 | 扩展与控制 | ✅ 完成 | MiniMap/Control + 开关 |
|
||
| 8 | 矢量节点MVP | ✅ 完成 | vectorNode + SVG Pattern 平铺 |
|
||
| 9 | 资源与导出增强 | ⚠️ 取消 | 实现必要性不大 |
|
||
| 10 | 历史与撤销重做 | ✅ 完成 | LogicFlow 框架原生支持 Ctrl+Z/Y |
|
||
|
||
---
|
||
|
||
## 🎯 新愿景：作为块插件集成
|
||
|
||
### 愿景二：可嵌入组件（1-2 周）
|
||
|
||
**目标：** 将 yys-editor 改造为可嵌入的组件，支持在 onmyoji-wiki 中作为块插件使用
|
||
|
||
#### 核心需求
|
||
|
||
**1. 组件化改造**
|
||
- 提供可嵌入的 Vue 组件
|
||
- 支持通过 Props 传入初始数据
|
||
- 支持数据导出（通过 Emit 或回调）
|
||
- 支持只读模式和编辑模式
|
||
|
||
**2. 模式切换**
|
||
- **预览模式**：只读展示流程图，不显示工具栏和面板
|
||
- **编辑模式**：完整编辑功能，显示所有 UI
|
||
- 支持模式切换（通过 Props 控制）
|
||
|
||
**3. 数据接口**
|
||
- 输入：接收 LogicFlow GraphData 格式
|
||
- 输出：导出 LogicFlow GraphData 格式
|
||
- 支持数据验证和错误处理
|
||
|
||
**4. 轻量化**
|
||
- 移除不必要的依赖
|
||
- 优化打包体积
|
||
- 支持按需加载
|
||
|
||
---
|
||
|
||
## 📋 实施计划
|
||
|
||
### ✅ 阶段 1：独立编辑器（已完成）
|
||
|
||
**完成度：** 98%
|
||
|
||
- [x] 画布功能完整
|
||
- [x] 节点系统完善
|
||
- [x] 属性面板完整
|
||
- [x] 工具栏功能
|
||
- [x] 状态管理
|
||
- [x] 数据持久化
|
||
|
||
---
|
||
|
||
### ✅ 阶段 2：组件化改造（已完成）
|
||
|
||
**完成度：** 100%
|
||
**完成时间：** 2026-02-20
|
||
|
||
#### 步骤 1：组件接口设计 ✅
|
||
|
||
- [x] 设计组件 Props 接口
|
||
```typescript
|
||
interface YysEditorProps {
|
||
// 初始数据
|
||
data?: GraphData
|
||
// 模式：preview（预览）/ edit（编辑）
|
||
mode?: 'preview' | 'edit'
|
||
// 宽度和高度
|
||
width?: string | number
|
||
height?: string | number
|
||
// 是否显示工具栏
|
||
showToolbar?: boolean
|
||
// 是否显示属性面板
|
||
showPropertyPanel?: boolean
|
||
// 是否显示组件库
|
||
showComponentPanel?: boolean
|
||
// 配置选项
|
||
config?: EditorConfig
|
||
}
|
||
```
|
||
|
||
- [x] 设计组件 Emits 接口
|
||
```typescript
|
||
interface YysEditorEmits {
|
||
// 数据变更
|
||
'update:data': (data: GraphData) => void
|
||
// 保存
|
||
'save': (data: GraphData) => void
|
||
// 取消
|
||
'cancel': () => void
|
||
// 错误
|
||
'error': (error: Error) => void
|
||
}
|
||
```
|
||
|
||
#### 步骤 2：创建嵌入式组件 ✅
|
||
|
||
- [x] 创建 `YysEditorEmbed.vue` 组件
|
||
- [x] 实现预览模式（只读，无 UI）
|
||
- [x] 实现编辑模式（完整 UI）
|
||
- [x] 实现模式切换
|
||
- [x] 实现数据输入输出
|
||
|
||
#### 步骤 3：优化和测试 ✅
|
||
|
||
- [x] 优化组件性能
|
||
- [x] 减少打包体积（gzip 后 35KB）
|
||
- [x] 编写组件文档（`docs/3build/YysEditorEmbed.md`）
|
||
- [x] 创建使用示例（`examples/embed-demo.html`）
|
||
|
||
#### 步骤 4：构建配置 ✅
|
||
|
||
- [x] 配置库模式构建（`vite.config.lib.js`）
|
||
- [x] 配置导出入口（`src/index.js`）
|
||
- [x] 更新 package.json
|
||
```json
|
||
{
|
||
"name": "yys-editor",
|
||
"version": "1.0.0",
|
||
"main": "./dist/yys-editor.umd.js",
|
||
"module": "./dist/yys-editor.es.js",
|
||
"exports": {
|
||
".": {
|
||
"import": "./dist/yys-editor.es.js",
|
||
"require": "./dist/yys-editor.umd.js"
|
||
},
|
||
"./style.css": "./dist/yys-editor.css"
|
||
}
|
||
}
|
||
```
|
||
|
||
**验收标准：** ✅ 全部达成
|
||
- ✅ 可以作为 npm 包引用
|
||
- ✅ 支持预览和编辑模式
|
||
- ✅ 数据接口清晰
|
||
- ✅ 文档完善
|
||
|
||
**构建产物：**
|
||
- `dist/yys-editor.es.js` - 155 KB (gzip: 35 KB)
|
||
- `dist/yys-editor.umd.js` - 112 KB (gzip: 31 KB)
|
||
- `dist/yys-editor.css` - 69 KB (gzip: 33 KB)
|
||
|
||
**相关文档：**
|
||
- 设计文档：`docs/2design/ComponentArchitecture.md`
|
||
- 使用文档：`docs/3build/YysEditorEmbed.md`
|
||
- 快速开始：`docs/3build/EMBED_README.md`
|
||
- 测试报告：`docs/4test/BUILD_TEST_REPORT.md`
|
||
|
||
---
|
||
|
||
### 🎨 阶段 3：wiki 集成测试（待开发）
|
||
|
||
**目标：** 在 onmyoji-wiki 中测试集成效果
|
||
|
||
#### 步骤 5：本地引用测试（1-2 天）
|
||
|
||
- [ ] 在 wiki 中引用 yys-editor（file: 方式）
|
||
- [ ] 创建 YysEditorBlock 组件
|
||
- [ ] 测试预览模式
|
||
- [ ] 测试编辑模式
|
||
- [ ] 测试数据保存
|
||
|
||
#### 步骤 6：交互优化（2-3 天）
|
||
|
||
- [ ] 优化模式切换体验
|
||
- [ ] 优化数据同步
|
||
- [ ] 优化错误处理
|
||
- [ ] 优化加载性能
|
||
|
||
**验收标准：**
|
||
- 在 wiki 中可以正常使用
|
||
- 预览/编辑切换流畅
|
||
- 数据保存正确
|
||
- 体验类似 Notion 块
|
||
|
||
---
|
||
|
||
## 🔧 技术架构
|
||
|
||
### 组件架构
|
||
|
||
```
|
||
yys-editor/
|
||
├── 独立应用模式
|
||
│ ├── App.vue（完整 UI）
|
||
│ ├── 工具栏
|
||
│ ├── 组件库
|
||
│ ├── 属性面板
|
||
│ └── 画布
|
||
│
|
||
└── 嵌入组件模式
|
||
├── YysEditorEmbed.vue（可嵌入）
|
||
├── 预览模式（只有画布）
|
||
└── 编辑模式（完整 UI）
|
||
```
|
||
|
||
### 数据流
|
||
|
||
```
|
||
wiki 块编辑器
|
||
↓ (传入 GraphData)
|
||
YysEditorBlock（包装组件）
|
||
↓ (Props)
|
||
YysEditorEmbed（yys-editor 组件）
|
||
↓ (初始化)
|
||
LogicFlow 画布
|
||
↓ (编辑)
|
||
数据变更
|
||
↓ (Emit)
|
||
YysEditorBlock
|
||
↓ (保存)
|
||
wiki 文档
|
||
```
|
||
|
||
### 模式对比
|
||
|
||
| 特性 | 预览模式 | 编辑模式 |
|
||
|------|---------|---------|
|
||
| 画布 | ✅ 只读 | ✅ 可编辑 |
|
||
| 工具栏 | ❌ 隐藏 | ✅ 显示 |
|
||
| 组件库 | ❌ 隐藏 | ✅ 显示 |
|
||
| 属性面板 | ❌ 隐藏 | ✅ 显示 |
|
||
| 交互 | 点击切换到编辑 | 保存/取消 |
|
||
|
||
---
|
||
|
||
## 🎯 里程碑
|
||
|
||
### Milestone 1：独立编辑器 ✅
|
||
- [x] 完整的编辑功能
|
||
- [x] 节点系统
|
||
- [x] 属性面板
|
||
- [x] 数据持久化
|
||
|
||
**完成时间：** 2026-02-17
|
||
|
||
### Milestone 2：组件化改造 ✅
|
||
- [x] 组件接口设计
|
||
- [x] 嵌入式组件开发
|
||
- [x] 预览/编辑模式
|
||
- [x] 构建配置
|
||
- [x] 文档和示例
|
||
|
||
**完成时间：** 2026-02-20
|
||
|
||
### Milestone 3：wiki 集成（待开发）
|
||
- [ ] 本地引用测试
|
||
- [ ] 交互优化
|
||
- [ ] 文档完善
|
||
|
||
**预计完成：** 与 wiki 同步
|
||
|
||
---
|
||
|
||
## 🤔 技术决策
|
||
|
||
### ADR-001: 组件化方案
|
||
|
||
**背景：** 需要将独立应用改造为可嵌入组件
|
||
|
||
**决策：** 创建独立的嵌入式组件
|
||
|
||
**方案：**
|
||
1. 保留原有的 App.vue（独立应用）
|
||
2. 创建新的 YysEditorEmbed.vue（嵌入组件）
|
||
3. 共享核心逻辑和组件
|
||
|
||
**优点：**
|
||
- 不影响现有功能
|
||
- 独立应用和嵌入组件分离
|
||
- 易于维护
|
||
|
||
### ADR-002: 模式切换方案
|
||
|
||
**背景：** 需要支持预览和编辑模式
|
||
|
||
**决策：** 通过 Props 控制模式
|
||
|
||
**实现：**
|
||
```vue
|
||
<YysEditorEmbed
|
||
:mode="mode"
|
||
:data="flowData"
|
||
@save="handleSave"
|
||
/>
|
||
```
|
||
|
||
**优点：**
|
||
- 简单直观
|
||
- 易于控制
|
||
- 性能好
|
||
|
||
### ADR-003: 数据格式
|
||
|
||
**背景：** 需要定义数据输入输出格式
|
||
|
||
**决策：** 使用 LogicFlow 原生 GraphData 格式
|
||
|
||
**格式：**
|
||
```typescript
|
||
interface GraphData {
|
||
nodes: NodeData[]
|
||
edges: EdgeData[]
|
||
}
|
||
```
|
||
|
||
**优点：**
|
||
- 标准格式
|
||
- 易于序列化
|
||
- 兼容性好
|
||
|
||
---
|
||
|
||
## 📚 使用示例
|
||
|
||
### 在 wiki 中使用
|
||
|
||
```vue
|
||
<template>
|
||
<div class="yys-editor-block">
|
||
<!-- 预览模式 -->
|
||
<div v-if="!isEditing" @click="startEdit">
|
||
<YysEditorEmbed
|
||
mode="preview"
|
||
:data="flowData"
|
||
:height="400"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 编辑模式 -->
|
||
<div v-else class="editor-modal">
|
||
<YysEditorEmbed
|
||
mode="edit"
|
||
:data="flowData"
|
||
:height="600"
|
||
@save="handleSave"
|
||
@cancel="handleCancel"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { YysEditorEmbed } from 'yys-editor'
|
||
|
||
const isEditing = ref(false)
|
||
const flowData = ref({
|
||
nodes: [],
|
||
edges: []
|
||
})
|
||
|
||
const startEdit = () => {
|
||
isEditing.value = true
|
||
}
|
||
|
||
const handleSave = (data) => {
|
||
flowData.value = data
|
||
isEditing.value = false
|
||
// 保存到文档
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
isEditing.value = false
|
||
}
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 更新日志
|
||
|
||
### 2026-02-20
|
||
- ✅ 完成组件化改造
|
||
- 创建 `YysEditorEmbed.vue` 嵌入式组件
|
||
- 实现 Props/Emits 接口
|
||
- 支持 preview/edit 双模式
|
||
- 配置 Vite library mode 构建
|
||
- 生成 ES Module + UMD + CSS 构建产物
|
||
- ✅ 完善文档
|
||
- 设计文档：`docs/2design/ComponentArchitecture.md`
|
||
- 使用文档：`docs/3build/YysEditorEmbed.md`
|
||
- 快速开始：`docs/3build/EMBED_README.md`
|
||
- 测试报告：`docs/4test/BUILD_TEST_REPORT.md`
|
||
- 📝 重新规划项目定位
|
||
- 📝 明确双重角色：独立编辑器 + 可嵌入组件
|
||
- 📝 规划 wiki 集成路径
|
||
|
||
---
|
||
|
||
**最后更新：** 2026-02-20
|
||
**文档版本：** v2.1.0（组件化改造完成）
|
||
**文档版本：** v2.0.0（重新规划）
|