# cpu-editor

**Repository Path**: furtherbank/cpu-editor

## Basic Information

- **Project Name**: cpu-editor
- **Description**: 一个可以自动归纳schema然后生成可视化编辑的json编辑器，还没做完，目前还在迭代中
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-15
- **Last Updated**: 2022-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自配置 json 配置编辑器

## 安装

使用 electron + react + ts 开发。

安装 npm 依赖：

```
npm i
```

然后开始测试运行：

```
npm run dev
```

目前项目还在开发当中(一边学一边写的，前面写的烂代码得需要重构)

## 设计目的

该项目的设计初衷是为了快速的配置游戏中 json 的常量数据。  
但是实际上任何 json 都可以配置的，如果这个 json 是某个东西的配置文件，基于自动生成的 schema 基础，然后补全所有的描述性信息充当 json 的文档，完全可以做到编辑的同时看帮助，不需要翻文档了！  
(例如 eslintrc 等等那种)  
这个编辑器要有通用性和高效率，也就是要保证：

- 编辑 json 不是按照某个特定模式，是一个自动的通用模式，也就是说，你的 json 写成怎样的也都要能编辑。
- 用这个软件工作效率必须高，高于常见的 json 编辑模式，比如用 vscode 写等等。不然做这东西就没有任何意义

虽然理想很丰满，但是现实很骨感。实际上做的并不怎么好。详情看 [关于 json-editor](#关于json-editor)

## 功能/使用步骤

刚开始是这样的：

![image-20220316220131475](readme.assets/image-20220316220131475.png)

1. 从`文件->指定项目路径`指定`项目目录`以及`数据目录`，然后会有下图效果

   - `项目目录`是你整个项目的目录，读这个目录可以知道你这个项目是什么项目(unity,npm,cocos 等等)，然后应用一些默认配置，读取一些资源
   - `数据目录`就是你放 json 文件的目录，一定在`项目目录`下边（发现最后这个概念可以去掉）

   ![image-20220316220457667](readme.assets/image-20220316220457667.png)

2. 从左侧选择要编辑的数据文件，然后会自动生成对应的`jsonschema配置文件`，然后直接在编辑器上编辑数据文件，保存。  
   也可以切换编辑`jsonschema配置文件`，补充自动生成不具备的细节以及信息

   - 自动生成 json-schema 来适应当前的 ui。  
     现在的流程是通过 quicktype 自动根据输入 json 生成 schema，然后 editor 会根据 schema 自动生成表单，然后返回编辑  
     全程不需要任何需要脑子的人工操作，点就是了

   - 如果该 json 保存的是数组，左边有一选择栏可以选择，可以多选进行数据复制粘贴(未实装)
   - 用户理想状态下是直接点开配置文件就去填，当然表单必须得是合适的。用户不想去配置表单。  
      但是自动生成的 schema 肯定不能保证完全合适，需要用户自己去编辑 schema 补充细节。  
      所以这里可以用编辑器去编辑 schema。
     关于 jsonschema 的更多信息请参考[json-schema](https://json-schema.org/)
   - schema 文件自动命名为`$schema.[filename].json`，这个文件不会出现在左侧列表中。
   - 用户是操作 json 的量比较大的数据，ui 排列必须是紧凑的

   ![image-20220316221254432](readme.assets/image-20220316221254432.png)

   ![image-20220316221313886](readme.assets/image-20220316221313886.png)

## 特性

### 项目识别(暂未实装)

可以通过项目目录下的文件识别是怎样的项目，应用默认的配置。  
比如游戏引擎项目识别：

1. unity
   寻找`[projectname].sln`
2. npm
   寻找`package.json`
3. RMMV
   寻找`game.rmmvproject`  
   忽略 data 文件夹下的`Mapxxx.json`
4. RMMZ
   寻找`game.rmmzproject`  
   忽略 data 文件夹下的`Mapxxx.json`
5. cocos creator

配置包括：

1. 可识别的非 json 文件，以及需要忽略的 json 文件
2. 默认引入被拓展过的 schema 文件

顺便，如果可以，用来配置一些项目的配置文件(例如某些插件的配置 json)就挺不错的

接下来可以去做成 vscode 左侧栏，右侧标签化的模式，或者如果可以就直接嵌进去
另外，考虑后续取消 data 目录，而改成纯纯的树选择。

（不能在想怎么设计好了，在想最后就会直接嵌入 vscode 里面当插件。。。）

### 关于 json-editor

之前开发很长时间想要使用一个合适的开源库做这一个工作。  
但是实际上找了很多的库，花费了很长的时间，发现这些库都不合适。  
于是乎，只能自己手写一个，详情见 [json-schemaeditor-antd](https://gitee.com/furtherbank/json-schemaeditor-antd)

关于 json-schema 的信息，可以参考 jsoneditor 仓库的文档，也可以去官网了解。

http://json-schema.org/

## 注意和问题

1. 注意`style-loader`和`css-loader`的版本，版本高了会出现`webpack`打包错误
2. 注意对于`jpg,png,svg`等图片文件的 webpack 配置，不然在 css 里面会出现`url([object Module])`无法读取的情况(但是 css 里问题解决了，electrontitlebar 的 icon 就读取不了了)
3. webpackyyds！我的常年低血压终于被治好了！

## 使用的部分开源项目

[electron-react-ts-boilerplate]()

[阿里 Antd 组件库](https://ant.design/index-cn)

[quicktype](https://github.com/quicktype/quicktype)

[react-可拖选列表](https://github.com/valerybugakov/react-selectable-fast)