react-big-screen 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -0
- package/package.json +79 -0
package/README.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# Big-Screen
|
|
2
|
+
|
|
3
|
+
一个基于 React 的大屏看板 No-Code 搭建平台，用于快速验证原型。
|
|
4
|
+
|
|
5
|
+
> 状态：`开发中`
|
|
6
|
+
|
|
7
|
+
## 在线预览
|
|
8
|
+
[https://tangjiahui-cn.github.io/big-screen](https://tangjiahui-cn.github.io/big-screen)
|
|
9
|
+
|
|
10
|
+
## 如何运行
|
|
11
|
+
```shell
|
|
12
|
+
# 安装依赖（pnpm@16.20.1、pnpm@7.30.5）
|
|
13
|
+
pnpm i
|
|
14
|
+
|
|
15
|
+
# 运行
|
|
16
|
+
pnpm dev
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 功能 <font color="white" size="3">（开发中）</font>
|
|
20
|
+
|
|
21
|
+
- ✅ 拖拽移动、缩放。
|
|
22
|
+
- ✅ 快捷键。
|
|
23
|
+
- ✅ 批量处理组件。
|
|
24
|
+
- ✅ 自定义新组件。
|
|
25
|
+
- ✅ 自定义组件属性配置面板。
|
|
26
|
+
- ✅ 自定义组件右键菜单。
|
|
27
|
+
- ✅ 鼠标范围框选。
|
|
28
|
+
- ✅ 支持预览页面。
|
|
29
|
+
- ✅ 成组/取消成组。
|
|
30
|
+
- ✅ 布局组件。
|
|
31
|
+
- ✅ 数据源。
|
|
32
|
+
- ✅ 多组件联动。
|
|
33
|
+
- 支持子页面。
|
|
34
|
+
- 支持远程组件包。
|
|
35
|
+
- 可撤销历史记录。
|
|
36
|
+
- 收藏夹。
|
|
37
|
+
- 国际化语言。
|
|
38
|
+
|
|
39
|
+
## 设计理念
|
|
40
|
+
|
|
41
|
+
`数据`与`逻辑`分离。
|
|
42
|
+
|
|
43
|
+
## 核心概念
|
|
44
|
+
|
|
45
|
+
读取 `json格式对象`，将`components`与`componentNodes`合并渲染到页面，渲染过程中注册`instance`，编辑器通过修改 `componentNodes` 生效变更。
|
|
46
|
+
|
|
47
|
+
- engine: 全部api的集合，统一管理所有的功能。
|
|
48
|
+
- component: 注册的组件模板。
|
|
49
|
+
- componentNode: 组件的数据实例，也是完整导出、保存的数据。
|
|
50
|
+
- instance: 组件运行时的行为实例，管理单个组件所有的内部行为。
|
|
51
|
+
- store：存储全局数据（不做复杂action，仅用作响应式变量触发引用位置更新）。
|
|
52
|
+
- 实例：等于component + componentNode + instance。
|
|
53
|
+
|
|
54
|
+
## 处理事件
|
|
55
|
+
点击事件只涉及到: `click`、`mousedown`、`mousemove`、`mouseup`。
|
|
56
|
+
|
|
57
|
+
## 相关项目
|
|
58
|
+
- [lowcode-engine](https://github.com/tangjiahui-cn/lowcode-engine)
|
|
59
|
+
|
|
60
|
+
## 开发计划
|
|
61
|
+
|
|
62
|
+
### v0.0.1 （进行中）
|
|
63
|
+
完成基本大屏功能，支持拖拽移动设计大屏页面，修改页面组件属性，并支持上传导入、导出，可预览。
|
|
64
|
+
|
|
65
|
+
- ✅ 基本布局
|
|
66
|
+
- ✅ 拖拽组件到页面创建
|
|
67
|
+
- ✅ 内置几种类型组件
|
|
68
|
+
- ✅ 选中组件/范围框选
|
|
69
|
+
- ✅ 组件锁定/解锁
|
|
70
|
+
- ✅ 拖拽移动/缩放
|
|
71
|
+
- ✅ 编辑器 右键菜单禁用
|
|
72
|
+
- ✅ 组件右键菜单（复制、删除、上移一层、下移一层、置顶、置底）
|
|
73
|
+
- ✅ 完成页面右侧属性面板
|
|
74
|
+
- ✅ 完成预览页面
|
|
75
|
+
- ✅ 成组/取消成组
|
|
76
|
+
- ✅ layout类（容器组件）
|
package/package.json
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-big-screen",
|
|
3
|
+
"private": false,
|
|
4
|
+
"homepage": "https://github.com/tangjiahui-cn/big-screen.git",
|
|
5
|
+
"author": "tangjiahui-cn",
|
|
6
|
+
"description": "一个前端大屏看板项目",
|
|
7
|
+
"version": "0.0.0",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"dev": "cross-env vite",
|
|
10
|
+
"build": "tsc -b && vite build",
|
|
11
|
+
"lint": "eslint .",
|
|
12
|
+
"preview": "vite preview",
|
|
13
|
+
"postinstall": "husky install",
|
|
14
|
+
"commit": "git add . && git-cz",
|
|
15
|
+
"build:github-page": "cross-env deploy=github pnpm build"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"README.md"
|
|
19
|
+
],
|
|
20
|
+
"config": {
|
|
21
|
+
"commitizen": {
|
|
22
|
+
"path": "@commitlint/cz-commitlint"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"lint-staged": {
|
|
26
|
+
"**/*.{js,jsx,ts,tsx}": [
|
|
27
|
+
"prettier --write",
|
|
28
|
+
"eslint --fix"
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"@ant-design/icons": "^5.5.2",
|
|
33
|
+
"ahooks": "^3.8.4",
|
|
34
|
+
"antd": "4.24.1",
|
|
35
|
+
"classnames": "^2.5.1",
|
|
36
|
+
"dayjs": "^1.11.13",
|
|
37
|
+
"echarts": "^5.6.0",
|
|
38
|
+
"hotkeys-js": "^3.13.9",
|
|
39
|
+
"lodash-es": "^4.17.21",
|
|
40
|
+
"monaco-editor": "^0.52.2",
|
|
41
|
+
"react": "^18.3.1",
|
|
42
|
+
"react-color": "^2.19.3",
|
|
43
|
+
"react-dom": "^18.3.1",
|
|
44
|
+
"react-router-dom": "^6",
|
|
45
|
+
"umi-request": "^1.4.0",
|
|
46
|
+
"zustand": "^5.0.2"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@commitlint/cli": "^19.4.0",
|
|
50
|
+
"@commitlint/config-conventional": "^19.2.2",
|
|
51
|
+
"@commitlint/cz-commitlint": "^19.4.0",
|
|
52
|
+
"@types/lodash-es": "^4.17.12",
|
|
53
|
+
"@types/react": "^18.3.1",
|
|
54
|
+
"@types/react-color": "^3.0.13",
|
|
55
|
+
"@types/react-dom": "^18.3.1",
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
|
57
|
+
"@typescript-eslint/parser": "^5.58.0",
|
|
58
|
+
"@vitejs/plugin-react": "^4.3.1",
|
|
59
|
+
"commitizen": "^4.3.0",
|
|
60
|
+
"conventional-changelog-cli": "^5.0.0",
|
|
61
|
+
"cross-env": "^7.0.3",
|
|
62
|
+
"eslint": "^8.38.0",
|
|
63
|
+
"eslint-config-prettier": "^8.8.0",
|
|
64
|
+
"eslint-plugin-prettier": "^4.2.1",
|
|
65
|
+
"eslint-plugin-react": "^7.32.2",
|
|
66
|
+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
|
67
|
+
"eslint-plugin-react-refresh": "^0.4.9",
|
|
68
|
+
"globals": "^15.9.0",
|
|
69
|
+
"husky": "^8",
|
|
70
|
+
"inquirer": "8",
|
|
71
|
+
"less": "^4.2.0",
|
|
72
|
+
"lint-staged": "^13.2.1",
|
|
73
|
+
"prettier": "^2.8.7",
|
|
74
|
+
"typescript": "^5.5.3",
|
|
75
|
+
"typescript-eslint": "^8.0.1",
|
|
76
|
+
"vite": "^5.4.1",
|
|
77
|
+
"vite-plugin-html": "^3.2.2"
|
|
78
|
+
}
|
|
79
|
+
}
|