# go-editor

**Repository Path**: yzdalhj/go-editor

## Basic Information

- **Project Name**: go-editor
- **Description**: 基于 go-view 编辑器能力独立拆解的可视化大屏编辑器内核。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-14
- **Last Updated**: 2026-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# go-editor

基于 [go-view](https://gitee.com/MTrun/go-view) 编辑器能力独立拆解的可视化大屏编辑器内核。项目以 Vue 3 + Vite 为基础，使用 Element Plus 重构原有依赖特定 UI 框架的编辑器界面和配置组件，保留画布编排、组件配置、图层管理、标尺缩放和预设加载等核心工作流。

本仓库可独立运行，也可作为业务系统中的编辑器模块集成。

## 特性

- **三栏编辑器布局**：左侧组件库、中间画布、右侧属性配置。
- **画布能力**：拖拽添加、选中、多选、缩放、标尺、辅助线、分组、容器嵌套和右键操作。
- **组件配置**：名称、尺寸、位置、滤镜、动画、数据和事件分区配置。
- **图层管理**：组件层级、显示/隐藏、锁定及容器子组件管理。
- **页面配置**：设计尺寸、背景图/背景色、预览适配方式和主题色。
- **预设支持**：以声明式 JSON 加载完整页面和嵌套组件。
- **组件扩展**：提供统一的静态注册、props 和事件协议，便于后续按源码扩展业务组件。

## 技术栈

- **框架**: Vue 3 + TypeScript + Vite
- **UI 库**: Element Plus
- **状态管理**: Pinia + Vue Router
- **工具库**: vue3-sketch-ruler
- **可视化**: ECharts、Three.js、GSAP 等

## 架构说明

项目将 go-view 的编辑器职责拆分到 `src/editor`，业务展示和编辑页面保持在 `src/views` 中。

```text
src/
├── editor/
│   ├── canvas/       # 画布、标尺、选择框、拖拽与容器渲染
│   ├── config/       # 右侧页面/组件配置面板
│   ├── layers/       # 图层面板
│   ├── packages/     # 组件元数据、实例工厂、视图与配置面板注册
│   ├── presets/      # 页面预设及预览渲染
│   ├── store/        # 编辑器、历史、布局和主题状态
│   ├── styles/       # 编辑器公共样式与 Element Plus 覆盖样式
│   └── settings/     # 主题与全局配置
├── components/       # 通用设置控件
├── views/            # 业务页面与演示入口
│   ├── demo/         # 编辑器独立演示入口
│   └── preview/      # 页面预览视图
```

## Element Plus 重构

原项目中与编辑器紧耦合的界面已改为 Element Plus 实现，包括：

- **基础组件**：左右侧面板、分类导航、搜索和组件卡片。
- **配置表单**：页面与组件配置表单、折叠面板、颜色选择、上传和消息提示。
- **配置分段**：组件配置分段标签（定制、动画、数据、事件）。
- **交互增强**：右键菜单、快捷键说明弹窗、工具栏和面板收起状态。

核心画布模型、组件数据结构与交互语义保持独立，不与 Element Plus 业务组件耦合。

## 快速开始

环境要求：Node.js 18+，推荐使用 pnpm。

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 生产构建
pnpm build
```

## 新增组件

组件通过源码在应用启动时静态注册。一个组件由四部分组成：

1.  `config`：组件元数据，用于左侧组件库展示。
2.  `create`：组件实例工厂，每次创建独立的画布配置数据。
3.  `view`：画布渲染组件。
4.  `settings`：可选的右侧定制配置面板。

使用 `registerEditorComponent` 完成注册。画布视图统一接收 `chartConfig`、`themeSetting`、`themeColor`、`editorMode`，并通过 `update:option`、`update:request`、`component-event` 回传数据。

详细约定见 [组件扩展说明](src/editor/packages/EXTERNAL_COMPONENT.md)。

## 开发约定

- 编辑器核心逻辑放在 `src/editor`，业务页面避免直接修改画布内部状态。
- 新增组件优先复用现有组件注册协议和通用配置控件。
- 提交前执行与修改范围匹配的格式或测试检查，避免无关的全量改动。

## 许可

本项目基于 go-view 的编辑器能力进行独立拆解与重构。使用、分发或二次开发时，请同时遵循相关上游项目及所使用第三方依赖的许可证要求。