├── .editorconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .umirc.js
├── README.md
├── mock
├── .gitkeep
└── index.js
├── package.json
└── src
├── app.js
├── components
├── configButton
│ └── index.js
├── configTree
│ ├── component
│ │ ├── compactArrayView.js
│ │ └── compactObjectView.js
│ ├── index.js
│ ├── index.less
│ ├── parser
│ │ ├── highlight.js
│ │ └── index.js
│ ├── render
│ │ ├── iconRender.js
│ │ └── nameRender.js
│ └── treeNode.js
├── drawer
│ └── index.js
├── guide
│ ├── index.js
│ └── index.less
├── jsonEditor
│ ├── index.js
│ ├── index.less
│ ├── lint
│ │ ├── basicType.js
│ │ └── index.js
│ └── suggestions
│ │ ├── actions.js
│ │ ├── dependency.js
│ │ ├── index.js
│ │ └── request.js
├── jsonEditorDrawer
│ └── index.js
├── jsonFormTemp
│ ├── component
│ │ └── formDrawer.js
│ └── index.js
├── jsonTableTemp
│ ├── component
│ │ └── tableDrawer.js
│ └── index.js
├── languageSwitch
│ ├── index.js
│ └── index.less
├── pluginTree
│ ├── index.js
│ ├── index.less
│ └── sulaconfig
│ │ ├── actions.js
│ │ ├── columns.js
│ │ ├── fieldPlugins.js
│ │ └── renderPlugins.js
├── styleSelect
│ ├── index.js
│ └── index.less
├── themeSwitch
│ ├── index.js
│ └── index.less
├── tipsSwitch
│ └── index.js
└── tipsWrapper
│ └── index.js
├── global.js
├── layout
├── index.js
├── index.less
└── themeContext.js
├── locales
├── en-US.js
└── zh-CN.js
├── menus.js
├── pages
├── exception
│ └── 404.js
├── form
│ ├── card.js
│ ├── horizontal.js
│ ├── media.js
│ ├── nestedcard.js
│ ├── stepform.js
│ └── vertical.js
├── list
│ ├── advancedsearch.js
│ ├── basic.js
│ ├── nopagination.js
│ ├── singlesearch.js
│ └── stepquerytable.js
├── sulalayout
│ ├── components
│ │ ├── index.js
│ │ └── style.less
│ └── form.js
└── sulaplugin
│ ├── form.js
│ └── table.js
├── routes.js
└── utils
├── getFormMode.js
└── serialize.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
15 | [Makefile]
16 | indent_style = tab
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /npm-debug.log*
6 | /yarn-error.log
7 | /yarn.lock
8 | /package-lock.json
9 |
10 | # production
11 | /dist
12 |
13 | # misc
14 | .DS_Store
15 |
16 | # umi
17 | .umi
18 | .umi-production
19 | .umi-test
20 | /.env.local
21 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | **/*.md
2 | **/*.svg
3 | **/*.ejs
4 | **/*.html
5 | package.json
6 | .umi
7 | .umi-production
8 | .umi-test
9 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "all",
4 | "printWidth": 80,
5 | "overrides": [
6 | {
7 | "files": ".prettierrc",
8 | "options": { "parser": "json" }
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/.umirc.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'umi';
2 |
3 | export default defineConfig({
4 | sula: {},
5 | hash: true,
6 | history: {
7 | type: 'hash',
8 | },
9 | locale: {
10 | default: 'en-US',
11 | antd: true,
12 | },
13 | nodeModulesTransform: {
14 | type: 'none',
15 | },
16 | routes: [
17 | {
18 | name: 'Home',
19 | path: '/',
20 | component: '../layout',
21 | routes: [
22 | {
23 | component: './exception/404',
24 | },
25 | ],
26 | },
27 | ],
28 | });
29 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # umi project
2 |
3 | ## Getting Started
4 |
5 | Install dependencies,
6 |
7 | ```bash
8 | $ yarn install
9 | ```
10 |
11 | Start the dev server,
12 |
13 | ```bash
14 | $ yarn start
15 | ```
16 |
17 | 🍳 Let's cook it!
18 |
--------------------------------------------------------------------------------
/mock/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/umijs/sula-cooker/5d98874b7804c71eea7cd69a56d1cb3f2adbdcab/mock/.gitkeep
--------------------------------------------------------------------------------
/mock/index.js:
--------------------------------------------------------------------------------
1 | import { Random, mock } from 'mockjs';
2 | import moment from 'moment';
3 |
4 | const status = ['dispatching', 'success', 'warning'];
5 |
6 | const level = ['High', 'Medium', 'Low'];
7 |
8 | const recipientName = ['Lucy', 'Lily', 'Jack', 'Mocy'];
9 |
10 | const recipientTime = ['morning', 'afternoon', 'night'];
11 |
12 | const priceProject = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
13 |
14 | const SERIAL = 'SERIAL_NUMBER_';
15 |
16 | const success = {
17 | success: true,
18 | code: 200,
19 | message: 'success',
20 | description: 'success',
21 | };
22 |
23 | const faild = {
24 | success: false,
25 | code: 404,
26 | message: 'faild',
27 | description: 'Page not found',
28 | };
29 |
30 | let dataSource = [];
31 | for (let i = 0; i < 200; i += 1) {
32 | dataSource.push({
33 | id: i + '',
34 | name: Random.name(),
35 | senderName: Random.name(),
36 | senderNumber: Random.id(),
37 | senderAddress: Random.sentence(2, 3),
38 | recipientName: Random.pick(recipientName),
39 | recipientNumber: Random.id(),
40 | recipientAddress: Random.sentence(2, 3),
41 | recipientTime: Random.pick(recipientTime),
42 | time: [Random.date('yyyy-MM-dd'), Random.date('yyyy-MM-dd')],
43 | priceProject: Random.pick(priceProject),
44 | address: Random.city(true),
45 | status: Random.pick(status),
46 | level: Random.pick(level),
47 | description: Random.sentence(3, 4),
48 | times: Random.natural(),
49 | createTime: Random.date('MM-dd HH:mm:ss'),
50 | ruler: [[{ type: 'price', comparator: 'lt', value: '100' }]],
51 | });
52 | }
53 |
54 | let maxId = -1;
55 | dataSource.forEach(({ id }) => {
56 | if (id > maxId) {
57 | maxId = id;
58 | }
59 | });
60 |
61 | function getPagingData(
62 | { current, pageSize },
63 | filters = {},
64 | { order, columnKey } = {},
65 | nopag,
66 | ) {
67 | let filteredDataSource = dataSource;
68 | if (Object.keys(filters).length) {
69 | filteredDataSource = filteredDataSource.filter((row) => {
70 | const isMatched = Object.keys(filters).every((key) => {
71 | const filterValue = filters[key];
72 | const cellValue = row[key];
73 | if (filterValue === null) {
74 | return true;
75 | }
76 | if (Array.isArray(filterValue)) {
77 | if (filterValue.length === 0) {
78 | return true;
79 | }
80 | if (typeof cellValue === 'string') {
81 | return filterValue.includes(cellValue);
82 | }
83 | if (Array.isArray(cellValue) && cellValue.length) {
84 | return (
85 | moment(filterValue[0]).valueOf() <=
86 | moment(cellValue[0]).valueOf() &&
87 | moment(cellValue[0]).valueOf() <=
88 | moment(filterValue[1]).valueOf() &&
89 | moment(filterValue[0]).valueOf() <=
90 | moment(cellValue[1]).valueOf() &&
91 | moment(cellValue[1]).valueOf() <= moment(filterValue[1]).valueOf()
92 | );
93 | }
94 | return true;
95 | }
96 | if (typeof cellValue === 'number' || typeof cellValue === 'boolean') {
97 | return filterValue === cellValue;
98 | }
99 | if (typeof cellValue !== 'number' && !cellValue) {
100 | return true;
101 | }
102 |
103 | if (key === 'id') {
104 | return `${SERIAL}${cellValue}`.includes(filterValue);
105 | }
106 |
107 | return cellValue.includes(filterValue);
108 | });
109 |
110 | return isMatched;
111 | });
112 | }
113 |
114 | if (order) {
115 | filteredDataSource.sort((a, b) => {
116 | return order === 'ascend'
117 | ? a[columnKey] - b[columnKey]
118 | : b[columnKey] - a[columnKey];
119 | });
120 | }
121 |
122 | const pageData = [];
123 | const start = (current - 1) * pageSize;
124 | let end = current * pageSize;
125 |
126 | if (end > filteredDataSource.length) {
127 | end = filteredDataSource.length;
128 | }
129 | for (let i = start; i < end; i += 1) {
130 | pageData.push(filteredDataSource[i]);
131 | }
132 |
133 | if (nopag) {
134 | return {
135 | ...success,
136 | data: dataSource.slice(0, 20),
137 | };
138 | }
139 |
140 | return {
141 | ...success,
142 | data: {
143 | list: pageData,
144 | total: filteredDataSource.length,
145 | pageSize,
146 | current,
147 | },
148 | };
149 | }
150 |
151 | const listApi = (body, nopag) => {
152 | const { filters, pageSize, current, sorter } = body;
153 | return getPagingData({ current, pageSize }, filters, sorter, nopag);
154 | };
155 |
156 | const addApi = (body) => {
157 | const { name, time = [], ...restReq } = body;
158 | dataSource.forEach(({ id }) => {
159 | if (Number(id) > Number(maxId)) {
160 | maxId = id;
161 | }
162 | });
163 | dataSource.unshift({
164 | id: String(maxId * 1 + 1),
165 | status: Random.pick(status),
166 | time: time.map((v) => moment(v).format('YYYY-MM-DD')),
167 | ...restReq,
168 | });
169 | return success;
170 | };
171 |
172 | const deleteApi = ({ rowKeys }) => {
173 | const selectedRowKeys = Array.isArray(rowKeys) ? rowKeys : [rowKeys];
174 | selectedRowKeys.forEach((id) => {
175 | dataSource = dataSource.filter((v) => v.id != id);
176 | });
177 | return success;
178 | };
179 |
180 | const detailApi = (body) => {
181 | const { id } = body;
182 | const data = dataSource.find((v) => v.id == id);
183 | return {
184 | ...success,
185 | data,
186 | };
187 | };
188 |
189 | const getList = (data) => ({
190 | ...success,
191 | data: data.map((v) => ({ text: v, value: v })),
192 | });
193 |
194 | const getPlugins = () => ({
195 | ...success,
196 | data: {
197 | id: 123454321,
198 | input: 'sula',
199 | autocomplete: 'sula',
200 | textarea: 'sula-sula',
201 | inputnumber: 123,
202 | rate: 2,
203 | slider: 10,
204 | switch: true,
205 | checkboxgroup: ['sula'],
206 | radiogroup: 'sula',
207 | select: 'sula',
208 | treeselect: '0-0-1',
209 | cascader: ['zhejiang', 'hangzhou', 'xihu'],
210 | transfer: ['0', '1'],
211 | timepicker: '2019-12-16T13:08:31.001Z',
212 | datepicker: '2019-12-17T11:06:30.005Z',
213 | rangepicker: ['2019-12-16T11:06:30.009Z', '2019-12-19T11:06:30.009Z'],
214 | upload: [
215 | {
216 | uid: 'rc-upload-1576589336277-4',
217 | lastModified: 1576318435446,
218 | lastModifiedDate: '2019-12-14T10:13:55.446Z',
219 | name: 'scatter-simple.html',
220 | size: 1823,
221 | type: 'text/html',
222 | percent: 0,
223 | originFileObj: {
224 | uid: 'rc-upload-1576589336277-4',
225 | },
226 | },
227 | ],
228 | },
229 | });
230 |
231 | function logInfo(req, data) {
232 | const { url, type, body } = req;
233 | const jsonBody = JSON.parse(body);
234 |
235 | console.log(
236 | `%c request: %c ${type} ${url}`,
237 | 'color:#f80;font-weight:bold;',
238 | 'color:#f00;',
239 | );
240 | console.log('%c params:', 'color:#f80;font-weight:bold;', jsonBody);
241 | console.log('%c response:', 'color:#f80;font-weight:bold;', data);
242 | console.log('');
243 | }
244 |
245 | mock('/api/manage/list.json', 'post', function (req) {
246 | const { body } = req;
247 | const data = listApi(JSON.parse(body));
248 | logInfo(req, data);
249 | return data;
250 | });
251 |
252 | mock('/api/manage/listnopag.json', 'post', function (req) {
253 | const { body } = req;
254 | const data = listApi(JSON.parse(body), true);
255 | return data;
256 | });
257 |
258 | mock('/api/manage/add.json', 'post', function (req) {
259 | const { body } = req;
260 | const data = addApi(JSON.parse(body));
261 | logInfo(req, data);
262 | return data;
263 | });
264 |
265 | mock('/api/manage/delete.json', 'post', function (req) {
266 | const { body } = req;
267 | const data = deleteApi(JSON.parse(body));
268 | logInfo(req, data);
269 | return data;
270 | });
271 |
272 | mock('/api/manage/detail.json', 'post', function (req) {
273 | const { body } = req;
274 | const data = detailApi(JSON.parse(body));
275 | logInfo(req, data);
276 | return data;
277 | });
278 |
279 | mock('/api/manage/statusList.json', function (req) {
280 | const data = getList(status);
281 | logInfo(req, data);
282 | return data;
283 | });
284 | mock('/api/manage/priceList.json', function (req) {
285 | const data = getList(priceProject);
286 | logInfo(req, data);
287 | return data;
288 | });
289 | mock('/api/manage/recipientList.json', function (req) {
290 | const data = getList(recipientName);
291 | logInfo(req, data);
292 | return data;
293 | });
294 | mock('/api/manage/plugins.json', 'post', function (req) {
295 | const data = getPlugins();
296 | logInfo(req, data);
297 | return data;
298 | });
299 |
300 | mock('/api/techuiplugin.json', 'post', function (req) {
301 | const data = {
302 | ...success,
303 | data: {
304 | checkcard: true,
305 | checkcardgroup: ['B'],
306 | colorpicker: ['#FF86B7', '#5B8FF9'],
307 | inputamount: { amount: 11, currency: 'Rmb' },
308 | sliderinput: 0.39,
309 | tagfilter: ['cat9'],
310 | lightfilter: [1, '23'],
311 | },
312 | };
313 | logInfo(req, data);
314 | return data;
315 | });
316 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Sula",
3 | "private": true,
4 | "description": "sula cooker",
5 | "scripts": {
6 | "start": "umi dev",
7 | "build": "umi build",
8 | "predeploy": "npm run build",
9 | "deploy": "now deploy ./dist -n cook --prod"
10 | },
11 | "dependencies": {
12 | "@monaco-editor/react": "^3.3.0",
13 | "@sula/nav": "1.0.0-alpha.2",
14 | "antd": "^4.2.5",
15 | "sula": "^1.0.0-beta.6"
16 | },
17 | "devDependencies": {
18 | "@sula/templates": "^1.0.3",
19 | "@umijs/preset-react": "^1.5.19",
20 | "acorn": "^7.2.0",
21 | "acorn-walk": "^7.1.1",
22 | "ast-types": "^0.13.3",
23 | "copy-to-clipboard": "^3.3.1",
24 | "mockjs": "^1.1.0",
25 | "umi": "^3.2.14",
26 | "umi-plugin-sula": "^1.0.0-beta.1"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import extraRoutes from '@/routes';
2 |
3 | export function patchRoutes({ routes }) {
4 | routes[0].routes = extraRoutes.concat(routes[0].routes);
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/configButton/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Affix, Button } from 'antd';
3 | import { SettingOutlined } from '@ant-design/icons';
4 | import ThemeContext from '@/layout/themeContext';
5 | import { Guide } from '@/components/guide';
6 |
7 | export default props => {
8 | const { onClick } = props;
9 | const theme = React.useContext(ThemeContext);
10 |
11 | if (theme.hiddenCustomControls) {
12 | return null;
13 | }
14 |
15 | const style = { position: 'fixed', top: 360, right: 24, zIndex: 1001 };
16 |
17 | return (
18 |
19 |
25 | }
28 | type="primary"
29 | onClick={onClick}
30 | />
31 |
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/components/configTree/component/compactArrayView.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const prefixCls = 'tree-compact';
4 |
5 | export default class CompactArrayView extends React.Component {
6 | shouldComponentUpdate(nextProps) {
7 | return nextProps.array.length !== this.props.array.length;
8 | }
9 |
10 | render() {
11 | let { array } = this.props;
12 | let count = array.length;
13 |
14 | if (count === 0) {
15 | return {'[ ]'};
16 | }
17 | return (
18 |
19 | {'['}
20 | {count + ' element' + (count > 1 ? 's' : '')}
21 | {']'}
22 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/configTree/component/compactObjectView.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const prefixCls = 'tree-compact';
4 |
5 | export default class CompactObjectView extends React.Component {
6 | shouldComponentUpdate(nextProps) {
7 | const nextLength = Object.keys(nextProps.object).length;
8 | const prevLength = Object.keys(this.props.object).length;
9 | return nextLength !== prevLength;
10 | }
11 |
12 | render() {
13 | let keys = this.props.object.map(v => v.name);
14 | let count = keys.length;
15 |
16 | if (count === 0) {
17 | return {'{ }'};
18 | }
19 | if (count > 2) {
20 | keys = keys.slice(0, 2).concat([`... +${count - 2}`]);
21 | }
22 | return (
23 |
24 | {'{'}
25 | {keys.join(', ')}
26 | {'}'}
27 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/configTree/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import castArray from 'lodash/castArray';
3 | import createTreeData, { getConfigNode } from './parser';
4 | import { createHighLightTreeData, clearActiveNode } from './parser/highlight';
5 | import TreeNode from './treeNode';
6 | import iconRender from './render/iconRender';
7 | import nameRender from './render/nameRender';
8 |
9 | import './index.less';
10 |
11 | export { iconRender, nameRender };
12 |
13 | function parseData(data) {
14 | let res;
15 | try {
16 | res = createTreeData(getConfigNode(data));
17 | } catch (e) {}
18 |
19 | return res;
20 | }
21 |
22 | export default props => {
23 | const {
24 | data,
25 | onToggle,
26 | onSelect,
27 | nameRender,
28 | iconRender,
29 | contextMenuRender,
30 | style,
31 | level = 0,
32 | currentLine,
33 | } = props;
34 | const [treeData, setTreeData] = useState(parseData(data));
35 | const [activeLine, setActiveLine] = useState(-1);
36 |
37 | useEffect(() => {
38 | setTreeData(parseData(data));
39 | }, [data]);
40 |
41 | useEffect(() => {
42 | if (!treeData || !treeData[0]) {
43 | setActiveLine(-1);
44 | } else {
45 | setActiveLine(currentLine);
46 | }
47 | }, [treeData, currentLine]);
48 |
49 | useEffect(() => {
50 | setTimeout(() => {
51 | setTreeData(createHighLightTreeData(treeData, activeLine));
52 | });
53 | }, [activeLine]);
54 |
55 | const handleSelect = (node, hasChildren) => {
56 | const noActiveData = clearActiveNode(treeData);
57 | setTreeData(noActiveData);
58 | onSelect(node, hasChildren);
59 | };
60 |
61 | return (
62 |
63 | {castArray(treeData).map((node, index) => {
64 | if (!node) return;
65 |
66 | return (
67 |
78 | );
79 | })}
80 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/src/components/configTree/index.less:
--------------------------------------------------------------------------------
1 | // hover background
2 | @hover-background: #1990ffab;
3 |
4 | .si-tree {
5 | font-size: 14px;
6 |
7 | &-node {
8 | &-block {
9 | display: flex;
10 | align-items: center;
11 | padding: 2px 4px;
12 | cursor: pointer;
13 | user-select: none;
14 | &:hover {
15 | background-color: @hover-background;
16 | color: #fff;
17 | }
18 |
19 | &-actived {
20 | background-color: @hover-background;
21 | color: #fff;
22 | }
23 | }
24 |
25 | &-switcher {
26 | margin-right: 2px;
27 | }
28 |
29 | &-icon {
30 | margin-right: 4px;
31 | display: flex;
32 | }
33 |
34 | &-name {
35 | }
36 | }
37 | }
38 |
39 | .tree-compact {
40 | margin-left: 4px;
41 | font-size: 13px;
42 | font-style: italic;
43 | color: #49aa19;
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/configTree/parser/highlight.js:
--------------------------------------------------------------------------------
1 | const isHightLight = (hightLightData, highLightLine) => {
2 | const { children, loc = [0, 0, 0, 0] } = hightLightData;
3 | const [lineStart, , lineEnd] = loc;
4 | if (children) {
5 | return isActiveObj(highLightLine, lineStart, lineEnd);
6 | }
7 | return lineStart <= highLightLine && lineEnd >= highLightLine;
8 | };
9 |
10 | const hasHighLightChildren = (hightLightData = {}, highLightLine) => {
11 | const { children, loc = [0, 0, 0, 0] } = hightLightData;
12 | const [lineStart, , lineEnd] = loc;
13 | if (children) {
14 | return (
15 | isActiveObj(highLightLine, lineStart, lineEnd) ||
16 | children.some(v => hasHighLightChildren(v, highLightLine))
17 | );
18 | }
19 | return lineStart <= highLightLine && lineEnd >= highLightLine;
20 | };
21 |
22 | function isActiveObj(highLightLine, start, end) {
23 | return highLightLine === start || highLightLine === end;
24 | }
25 |
26 | function createHighLightTreeData(treeData, highLightLine) {
27 | const data = Array.isArray(treeData) ? [...treeData] : [treeData];
28 |
29 | data.forEach(node => {
30 | if (!node) return;
31 | node.toggled = hasHighLightChildren(node, highLightLine);
32 | node.active = isHightLight(node, highLightLine);
33 | if (node.children) {
34 | if (node.active) {
35 | node.children = clearActiveNode(node.children);
36 | } else {
37 | node.children = createHighLightTreeData(node.children, highLightLine);
38 | }
39 | }
40 | });
41 |
42 | return data;
43 | }
44 |
45 | function clearActiveNode(treeData) {
46 | const data = Array.isArray(treeData) ? [...treeData] : [treeData];
47 | data.forEach(node => {
48 | if (!node) return;
49 | node.active = false;
50 | if (node.children) {
51 | node.children = clearActiveNode(node.children);
52 | }
53 | });
54 | return data;
55 | }
56 |
57 | export { createHighLightTreeData, clearActiveNode };
58 |
--------------------------------------------------------------------------------
/src/components/configTree/parser/index.js:
--------------------------------------------------------------------------------
1 | import { parse } from '@babel/parser';
2 | import { visit } from 'ast-types';
3 |
4 | function getConfigNode(data) {
5 | let configNode;
6 |
7 | visit(parse(data), {
8 | visitIdentifier: path => {
9 | if (configNode) {
10 | return false;
11 | }
12 | const name = path.getValueProperty('name');
13 | if (name === 'config') {
14 | const node = path.parentPath.getValueProperty('init');
15 | if (node) {
16 | configNode = node;
17 | }
18 | }
19 | return false;
20 | },
21 | });
22 |
23 | return configNode;
24 | }
25 |
26 | export { getConfigNode };
27 |
28 | function locToPositon(data) {
29 | const { start, end } = data;
30 | const { line: startLine, column: startCol } = start;
31 | const { line: endLine, column: endCol } = end;
32 | const position = [startLine, startCol + 1, endLine, endCol + 1];
33 | return position;
34 | }
35 |
36 | export default function createTreeData(data) {
37 | if (!data) return;
38 |
39 | const { loc, properties = [] } = data;
40 | const astTree = properties.map(node => {
41 | if (!node) return;
42 | const { key, value, loc, type } = node;
43 | // 直接使用value类型 字符串 数值 布尔值
44 | const valueType = [
45 | 'StringLiteral',
46 | 'NumericLiteral',
47 | 'BooleanLiteral',
48 | 'ConditionalExpression',
49 | 'MemberExpression',
50 | ];
51 | const objectType = ['ObjectExpression'];
52 | const arrayType = ['ArrayExpression'];
53 | const funcType = ['ArrowFunctionExpression', 'FunctionExpression'];
54 | const paramsType = ['Identifier', 'ThisExpression'];
55 |
56 | const position = locToPositon(loc);
57 |
58 | const name = key?.name || key?.value;
59 |
60 | // 方法的快捷表示法
61 | if (type === 'ObjectMethod') {
62 | return {
63 | name,
64 | value: null,
65 | loc: position,
66 | };
67 | }
68 |
69 | if (valueType.includes(value.type)) {
70 | return {
71 | name,
72 | value: value.value,
73 | loc: position,
74 | };
75 | }
76 |
77 | if (objectType.includes(value.type)) {
78 | return {
79 | name,
80 | value: null,
81 | loc: position,
82 | children: createTreeData(value),
83 | type: 'object',
84 | };
85 | }
86 |
87 | if (arrayType.includes(value.type)) {
88 | return {
89 | name,
90 | value: null,
91 | loc: position,
92 | children: value.elements.map((v, idx) => {
93 | return {
94 | name: idx,
95 | value: null,
96 | type: 'object',
97 | loc: locToPositon(v.loc),
98 | children: createTreeData(v),
99 | };
100 | }),
101 | type: 'array',
102 | };
103 | }
104 |
105 | if (funcType.includes(value.type)) {
106 | return {
107 | name,
108 | value: null,
109 | loc: position,
110 | };
111 | }
112 |
113 | if (paramsType.includes(value.type)) {
114 | return {
115 | name,
116 | value: null,
117 | loc: position,
118 | };
119 | }
120 | });
121 |
122 | return astTree;
123 | }
124 |
--------------------------------------------------------------------------------
/src/components/configTree/render/iconRender.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CompactArrayView from '../component/compactArrayView';
3 | import CompactObjectView from '../component/compactObjectView';
4 |
5 | function iconRender(data) {
6 | const { name, type, children, toggled } = data;
7 | if (toggled) {
8 | return name;
9 | }
10 | if (type === 'array') {
11 | return (
12 |
13 | {name}
14 |
15 |
16 | );
17 | }
18 | if (type === 'object') {
19 | return (
20 |
21 | {name}
22 |
23 |
24 | );
25 | }
26 | return name;
27 | }
28 |
29 | export default iconRender;
30 |
--------------------------------------------------------------------------------
/src/components/configTree/render/nameRender.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default data => {
4 | const { type, name } = data;
5 |
6 | const pluginTypes = ['render', 'action', 'type', 'container', 'validator'];
7 | if (pluginTypes.includes(name)) {
8 | return ;
9 | }
10 |
11 | if (name === 'fields' || name === 'columns') {
12 | return (
13 |
14 | );
15 | }
16 |
17 | if (typeof name === 'number' && type === 'object') {
18 | return ;
19 | }
20 |
21 | return
;
22 | };
23 |
--------------------------------------------------------------------------------
/src/components/configTree/treeNode.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import isArray from 'lodash/isArray';
3 | import cx from 'classnames';
4 |
5 | function TreeNode(props) {
6 | const {
7 | data,
8 | nameRender,
9 | iconRender,
10 | level,
11 | contextMenuRender,
12 | activeLine,
13 | } = props;
14 | const [nodeData, setNodeData] = useState(data);
15 | const isDirectory = !!nodeData.children;
16 |
17 | const handleClick = () => {
18 | const { onToggle, onSelect } = props;
19 | const newNodeData = { ...nodeData };
20 | // newNodeData.active = true;
21 | if (newNodeData.children) {
22 | newNodeData.toggled = !nodeData.toggled;
23 | }
24 | setNodeData(newNodeData);
25 | if (onSelect) {
26 | onSelect(newNodeData, !!nodeData.children);
27 | }
28 | };
29 |
30 | useEffect(() => {
31 | setNodeData(data);
32 | }, [activeLine]);
33 |
34 | const renderChildren = level => {
35 | const {
36 | onToggle,
37 | onSelect,
38 | nameRender,
39 | iconRender,
40 | contextMenuRender,
41 | } = props;
42 |
43 | if (nodeData.loading) {
44 | return loading...;
45 | }
46 |
47 | let children = nodeData.children;
48 | if (!isArray(children)) {
49 | children = children ? [children] : [];
50 | }
51 |
52 | return (
53 |
54 | {children.map((child, index) => (
55 |
66 | ))}
67 |
68 | );
69 | };
70 |
71 | let blockNode = (
72 |
79 |
85 | {isDirectory ? (
86 |
92 | ) : (
93 |
94 | )}
95 | {iconRender ? (
96 |
{iconRender(nodeData)}
97 | ) : null}
98 |
99 | {nameRender ? nameRender(nodeData) : nodeData.name}
100 |
101 |
110 | {blockNode}
111 | {nodeData.toggled ? renderChildren(level + 1) : null}
112 |
113 | );
114 | }
115 |
116 | export default TreeNode;
117 |
--------------------------------------------------------------------------------
/src/components/drawer/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Drawer } from 'antd';
3 |
4 | export default props => {
5 | const { children, ...restProps } = props;
6 |
7 | return (
8 |
9 | {children}
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/src/components/guide/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react';
2 |
3 | import style from './index.less';
4 | import { Space, Button, Popover } from 'antd';
5 | import ThemeContext, { GUIDE, DONE } from '@/layout/themeContext';
6 |
7 | function getElementLeft(element) {
8 | let actualLeft = element.offsetLeft;
9 | let current = element.offsetParent;
10 |
11 | while (current !== null) {
12 | actualLeft += current.offsetLeft;
13 | current = current.offsetParent;
14 | }
15 |
16 | return actualLeft;
17 | }
18 | function getElementTop(element) {
19 | let actualTop = element.offsetTop;
20 | let current = element.offsetParent;
21 |
22 | while (current !== null) {
23 | actualTop += current.offsetTop;
24 | current = current.offsetParent;
25 | }
26 |
27 | return actualTop;
28 | }
29 |
30 | export default props => {
31 | const { children } = props;
32 | const containerRef = useRef();
33 | const [visible, setVisible] = useState(true);
34 | const [guideNodes, setGuideNodes] = useState([]);
35 | const [activeIdx, setActiveIdx] = useState(0);
36 | const theme = React.useContext(ThemeContext);
37 |
38 | useEffect(() => {
39 | setTimeout(() => {
40 | setGuideNodes(markDom());
41 | });
42 | window.addEventListener('resize', onWindowResize, false);
43 | return () => {
44 | window.removeEventListener('resize', onWindowResize, false);
45 | };
46 | }, []);
47 |
48 | function onWindowResize() {
49 | setGuideNodes(markDom());
50 | }
51 |
52 | const markDom = () => {
53 | const nodeList = [...document.querySelectorAll('[data-guide-step]')].sort(
54 | (p, c) => p.dataset.guideStep - c.dataset.guideStep,
55 | );
56 |
57 | const dots = nodeList.map(node => {
58 | const height = node.clientHeight || node.offsetHeight;
59 | const width = node.clientWidth || node.offsetWidth;
60 | const left = getElementLeft(node);
61 | const top = getElementTop(node);
62 |
63 | return {
64 | left: left - 10,
65 | top: top - 10,
66 | width: width + 20,
67 | height: height + 20,
68 | tips: node.getAttribute('data-guide-tips'),
69 | step: node.getAttribute('data-guide-step'),
70 | snapshot: node.getAttribute('data-guide-snapshot'),
71 | };
72 | });
73 |
74 | return dots;
75 | };
76 |
77 | function closeGuideTips() {
78 | theme.toggleGuideTips(true);
79 | localStorage.setItem(GUIDE, DONE);
80 | }
81 |
82 | const onSkip = () => {
83 | setActiveIdx(-1);
84 | closeGuideTips();
85 | };
86 |
87 | const onNext = () => {
88 | setActiveIdx(activeIdx + 1);
89 | if (activeIdx === guideNodes.length - 1) {
90 | closeGuideTips();
91 | }
92 | };
93 |
94 | const onPrev = () => {
95 | setActiveIdx(activeIdx - 1);
96 | };
97 |
98 | useEffect(() => {
99 | setVisible(activeIdx > -1 && activeIdx < guideNodes.length);
100 | }, [activeIdx, guideNodes]);
101 |
102 | const renderShallow = () => {
103 | return (
104 |
105 |
106 | {guideNodes.map((node, idx, { length }) => {
107 | const { tips, step, snapshot, ...nodeStyle } = node;
108 | const content = (
109 |
110 |
111 |
112 |
113 |
114 |
117 |
118 |
125 |
128 |
129 |
130 |
131 | );
132 | return (
133 |
150 | );
151 | })}
152 |
158 | {children}
159 | {visible && renderShallow()}
160 |
161 | );
162 | };
163 |
164 | export function Guide(props) {
165 | const {
166 | children,
167 | step,
168 | tips = '',
169 | snapshot = 'https://img.alicdn.com/tfs/TB1_e8_H1L2gK0jSZPhXXahvXXa-696-272.png',
170 | ...rest
171 | } = props;
172 | const theme = React.useContext(ThemeContext);
173 |
174 | if (theme.hiddenGuideTips) {
175 | return children;
176 | }
177 |
178 | return (
179 |
186 | {children}
187 |
188 | );
189 | }
190 |
--------------------------------------------------------------------------------
/src/components/guide/index.less:
--------------------------------------------------------------------------------
1 | .activeNode {
2 | position: absolute;
3 | z-index: 10000;
4 | border: 1px solid #000;
5 | box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
6 | border-radius: 4px;
7 | }
8 |
9 | .shadow {
10 | position: fixed;
11 | left: 0;
12 | right: 0;
13 | top: 0;
14 | bottom: 0;
15 | background-color: #000;
16 | opacity: 0.5;
17 | z-index: 100;
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/jsonEditor/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import {
3 | Typography,
4 | Button,
5 | message,
6 | Popconfirm,
7 | Tooltip,
8 | Row,
9 | Col,
10 | Space,
11 | } from 'antd';
12 | import copy from 'copy-to-clipboard';
13 | import Editor, { monaco } from '@monaco-editor/react';
14 | import serialize, { deserialize } from '@/utils/serialize';
15 | import {
16 | BulbOutlined,
17 | PlayCircleOutlined,
18 | DeleteOutlined,
19 | CopyOutlined,
20 | FullscreenOutlined,
21 | FullscreenExitOutlined,
22 | } from '@ant-design/icons';
23 | import validateSulaConfig from './lint';
24 | import * as acorn from 'acorn';
25 | import * as walk from 'acorn-walk';
26 | import ConfigTree, { iconRender, nameRender } from '@/components/configTree';
27 | import registerSuggestions from './suggestions';
28 | import style from './index.less';
29 |
30 | const { Title } = Typography;
31 | const STRTEMP = 'const config = ';
32 |
33 | const getEditorValue = data => {
34 | return `${STRTEMP}${serialize(data, { space: 2, unsafe: true })}`;
35 | };
36 |
37 | let isRegister;
38 | let decorations = [];
39 |
40 | export default props => {
41 | const monacoRef = React.useRef(null);
42 | const {
43 | onRun,
44 | value,
45 | type,
46 | onFullScreen = () => {},
47 | shallowHeight = 0,
48 | } = props;
49 |
50 | const editorRef = React.useRef(null);
51 | const [highLightLine, setHighLightLine] = React.useState();
52 | const [isFull, setFull] = React.useState(false);
53 |
54 | const finalValue = getEditorValue(value);
55 |
56 | const [treeData, setTreeData] = React.useState(finalValue);
57 |
58 | const handleCopy = () => {
59 | const jsonEditorValue = editorRef.current.getValue();
60 | const val = serialize(jsonEditorValue, { space: 2 });
61 | copy(deserialize(val).slice(STRTEMP.length));
62 | message.success('JSON Schema Copied 🎉');
63 | };
64 |
65 | const formatDocument = () => {
66 | setTimeout(() => {
67 | editorRef.current &&
68 | editorRef.current.getAction('editor.action.formatDocument').run();
69 | }, 300);
70 | };
71 |
72 | monaco.init().then(ref => {
73 | monacoRef.current = ref;
74 | if (!isRegister) {
75 | registerSuggestions(ref);
76 | isRegister = true;
77 | }
78 | });
79 |
80 | const onEditorDidMount = (_monaco, editor) => {
81 | editorRef.current = editor;
82 | const model = editor.getModel();
83 |
84 | formatDocument();
85 |
86 | editor.onKeyDown(e => {
87 | if (e.shiftKey) {
88 | editorRef.current &&
89 | editorRef.current.trigger(
90 | 'auto completion',
91 | 'editor.action.triggerSuggest',
92 | );
93 | }
94 | });
95 |
96 | editor.onDidChangeCursorPosition(e => {
97 | const lineCount = editor.getModel().getLineCount();
98 | if (e.position.lineNumber === 1) {
99 | editor.setPosition({
100 | lineNumber: 2,
101 | column: 1,
102 | });
103 | } else if (e.position.lineNumber === lineCount) {
104 | editor.setPosition({
105 | lineNumber: lineCount - 1,
106 | column: 1,
107 | });
108 | }
109 | });
110 |
111 | editor.onMouseDown(event => {
112 | clearDecorations();
113 | onEditorLineChange(event.target.position);
114 | });
115 |
116 | editor.onKeyDown(event => {
117 | setTimeout(() => {
118 | const position = editor.getPosition();
119 | onEditorLineChange(position);
120 | setTreeData(editor.getValue());
121 | });
122 | });
123 |
124 | editor.onDidChangeModelContent(() => {
125 | const content = editor.getValue();
126 | const markers = monacoRef.current.editor.getModelMarkers();
127 |
128 | if (markers.length > 0) {
129 | markers.forEach(marker => {
130 | monacoRef.current.editor.setModelMarkers(
131 | editor.getModel(),
132 | marker.owner,
133 | [],
134 | );
135 | });
136 | }
137 | const ast = acorn.parse(content, { locations: true });
138 | walk.full(ast, node => {
139 | // if (node?.loc?.start?.column < 5) {
140 | validateSulaConfig(node, monacoRef.current, editor);
141 | // }
142 | });
143 | });
144 | };
145 |
146 | function onEditorLineChange(position) {
147 | const { lineNumber } = position || {};
148 | setHighLightLine(lineNumber);
149 | }
150 |
151 | // console.log(`点击字段： ${clickType}, 点击字段所属字段: ${type}, 提示: ${suggestionType}`);
152 |
153 | const onClickRun = () => {
154 | const value = editorRef.current.getValue().slice(STRTEMP.length);
155 |
156 | try {
157 | const res = deserialize(value);
158 | onRun(res);
159 | formatDocument();
160 | setFull(false);
161 | message.success(`Run Success 🎉`);
162 | } catch (e) {
163 | message.error(`JSON 格式错误`);
164 | }
165 | };
166 |
167 | const onClickDelete = () => {
168 | editorRef.current.setValue(`${STRTEMP}{\n\n}`);
169 | };
170 |
171 | function clearDecorations() {
172 | if (decorations.length) {
173 | decorations = editorRef.current.deltaDecorations(decorations, []);
174 | }
175 | }
176 |
177 | function setDecorations(range) {
178 | const [startLineNumber, startColumn, endLineNumber, endColumn] = range;
179 | const newDecorations = editorRef.current.deltaDecorations(
180 | [],
181 | [
182 | {
183 | range: {
184 | endColumn,
185 | endLineNumber,
186 | startColumn,
187 | startLineNumber,
188 | },
189 | options: {
190 | className: 'si-editor-highlight',
191 | },
192 | },
193 | ],
194 | );
195 | decorations = decorations.concat(newDecorations);
196 | }
197 |
198 | const handleSelect = (node, hasChildren) => {
199 | const { loc, name } = node;
200 | clearDecorations();
201 | // 高亮
202 | if (hasChildren) {
203 | const [line, startColumn] = loc;
204 | const keyPosition = [line, startColumn, line, 100];
205 | setDecorations(keyPosition);
206 | } else {
207 | setDecorations(loc);
208 | }
209 | editorRef.current.revealLine(loc[0]); // 行跳转
210 | };
211 |
212 | const handleFullScreen = () => {
213 | setFull(true);
214 | };
215 |
216 | const handleExitFullScreen = () => {
217 | setFull(false);
218 | };
219 |
220 | useEffect(() => {
221 | editorRef?.current?.layout();
222 | onFullScreen && onFullScreen(isFull);
223 | }, [isFull]);
224 |
225 | useEffect(() => {
226 | editorRef?.current?.layout();
227 | }, [shallowHeight]);
228 |
229 | const hasConfigTree = type !== 'editor';
230 |
231 | return (
232 |
233 |
234 |
235 | 代码展示
236 |
237 |
238 |
241 |
242 |
243 |
244 | }
249 | onClick={onClickRun}
250 | shape="circle"
251 | />
252 |
253 |
254 |
255 | }
258 | size="small"
259 | shape="circle"
260 | />
261 |
262 |
263 |
264 | }
267 | onClick={handleCopy}
268 | style={{
269 | border: 'none',
270 | }}
271 | shape="circle"
272 | size="small"
273 | />
274 |
275 |
276 |
277 | }
280 | onClick={handleExitFullScreen}
281 | style={{
282 | border: 'none',
283 | display: !isFull ? 'none' : '',
284 | }}
285 | shape="circle"
286 | size="small"
287 | />
288 |
289 |
290 | }
293 | onClick={handleFullScreen}
294 | style={{
295 | border: 'none',
296 | display: isFull ? 'none' : '',
297 | }}
298 | shape="circle"
299 | size="small"
300 | />
301 |
302 |
303 |
304 |
305 |
306 |
307 |
317 |
318 | {hasConfigTree && (
319 |
320 | 属性节点树
321 |
333 |
334 | )}
335 |
336 |
42 |
43 |
49 |
50 |
58 |
65 |
66 |
102 |
103 |
104 |
105 | {!isDetail && (
106 |
107 |
表单模式
108 |
113 | 新建
114 | 编辑
115 | 查看
116 |
117 |
118 | )}
119 |
120 |
127 |
128 | {isWizard && (
129 |
130 |
分布表单方向
131 |
136 | 横向
137 | 纵向
138 |
139 |
140 | )}
141 |
142 | {!isWizard && (
143 |
144 |
表单按钮位置
145 |
150 | 默认
151 | 居中
152 | 右侧
153 | 底部
154 |
155 |
156 | )}
157 |
158 |
171 |
172 | {!visible && !iconVisible &&
}
173 |
262 |
268 | setFormDrawerVisible(true)}
275 | onClose={() => setFormDrawerVisible(false)}
276 | onRun={handleDo}
277 | code={code}
278 | changeMode={onModeChange}
279 | changeDirection={onDirectionChange}
280 | isWizard={isWizard}
281 | actionsPosition={actionsPosition}
282 | changeActionsPosition={onActionsPositionChange}
283 | width="900px"
284 | />
285 | {
289 | setVisible(false);
290 | }}
291 | value={controlValue}
292 | onRun={onRun}
293 | />
294 |
295 | );
296 | };
297 |
--------------------------------------------------------------------------------
/src/components/jsonTableTemp/component/tableDrawer.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { message } from 'antd';
3 | import Drawer from '@/components/drawer';
4 | import ConfigButton from '@/components/configButton';
5 | import StyleSelect from '@/components/styleSelect';
6 | import Editor from '@/components/jsonEditor';
7 |
8 | const tableStyleList = [
9 | {
10 | type: '快速搜索',
11 | img: 'https://img.alicdn.com/tfs/TB1al1JqHr1gK0jSZR0XXbP8XXa-40-40.svg',
12 | url: '/list/singlesearch',
13 | },
14 | {
15 | type: '高级搜索',
16 | img: 'https://img.alicdn.com/tfs/TB1QgKIqQL0gK0jSZFtXXXQCXXa-40-40.svg',
17 | url: '/list/advancedsearch',
18 | },
19 | {
20 | type: '一般搜索',
21 | img: 'https://img.alicdn.com/tfs/TB1xHCPqRr0gK0jSZFnXXbRRXXa-40-40.svg',
22 | url: '/list/basic',
23 | },
24 | {
25 | type: '无分页表格',
26 | img: 'https://img.alicdn.com/tfs/TB1txuMqQL0gK0jSZFxXXXWHVXa-40-40.svg',
27 | url: '/list/nopagination',
28 | },
29 | {
30 | type: '分步查询表格',
31 | img: 'https://img.alicdn.com/tfs/TB10IOmGkL0gK0jSZFAXXcA9pXa-53-46.svg',
32 | url: '/list/stepquerytable',
33 | },
34 | ];
35 |
36 | export default React.memo(props => {
37 | const {
38 | width = 600,
39 | visible,
40 | onClick,
41 | onClose,
42 | onRun,
43 | code: defaultCode,
44 | iconVisible,
45 | } = props;
46 | const [code, setCode] = useState(defaultCode);
47 | const [init, setInit] = useState(false);
48 | const [jsonEditorVal, setJsonEditorVal] = useState(defaultCode);
49 | const styleRef = React.useRef(null);
50 |
51 | React.useEffect(() => {
52 | setInit(true);
53 | }, []);
54 |
55 | const onClickRun = value => {
56 | setJsonEditorVal(value);
57 | try {
58 | setCode(value);
59 | } catch (e) {
60 | message.error('JSON 格式错误');
61 | }
62 | };
63 |
64 | React.useEffect(() => {
65 | if (init) {
66 | onRun(code);
67 | }
68 | }, [code]);
69 |
70 | const height =
71 | styleRef?.current?.clientHeight || styleRef?.current?.offsetHeight;
72 |
73 | return (
74 |
75 |
76 |
77 |
82 |
83 |
84 |
90 |
91 |
92 | {!visible && !iconVisible &&
}
93 |
305 |
309 |
setTableDrawerVisible(true)}
312 | onClose={() => setTableDrawerVisible(false)}
313 | onRun={handleDo}
314 | code={code}
315 | iconVisible={visible}
316 | width="900"
317 | key={'config' + key}
318 | />
319 | setVisible(false)}
322 | onRun={onRun}
323 | value={clickCode}
324 | onSelectCode={onRun}
325 | clickType={clickType}
326 | />
327 |
40 |
41 |
43 | {data.map(plugin => {
44 | return (
45 |
52 | );
53 | })}
54 |
60 |
65 |
66 |
67 | {tablePaneRender(plugins)}
68 |
69 | {!hasField && !isColumnsType && (
70 |
71 | {tablePaneRender(actionPlugins, true)}
72 |
73 | )}
74 |
75 |
76 | );
77 | };
78 |
79 | function PluginCard(props) {
80 | const {
81 | plugin = {},
82 | onClickTypeChange,
83 | onEditorValueChange,
84 | isAction = false,
85 | } = props;
86 | const {
87 | avatar = 'https://img.alicdn.com/tfs/TB1BQlopUY1gK0jSZFCXXcwqXXa-56-50.svg',
88 | type = '',
89 | desc = '',
90 | code = '',
91 | } = plugin;
92 | return (
93 | {
97 | onClickTypeChange(type);
98 | onEditorValueChange(code, isAction);
99 | }}
100 | >
101 |
104 | 
105 |
106 | }
107 | title={type}
108 | description={
109 |
110 |
{desc}
111 | {/*
112 | "question-circle"
113 | */}
114 |
14 |
{title}
15 | {data.map(({ img, type, url, isView }) => {
16 | if (isView && mode !== 'view') {
17 | return null;
18 | }
19 |
20 | const isActive = hash.includes(url);
21 |
22 | return (
23 |
24 | {
27 | const finalUrl =
28 | mode && mode !== 'create' ? `${url}/${mode}/${id}` : url;
29 | history.push(finalUrl);
30 | }}
31 | >
32 | 
33 |
34 |
35 | );
36 | })}
37 |
32 |
33 |
34 |
35 |
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/themeSwitch/index.less:
--------------------------------------------------------------------------------
1 | .themeLogo {
2 | overflow: hidden;
3 | border-radius: 50%;
4 | width: 36px;
5 | height: 36px;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | transition: all 0.3s;
10 | &:hover {
11 | background-color: #eef9ff;
12 | }
13 | img {
14 | border-radius: 50%;
15 | width: 26px;
16 | height: 26px;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/tipsSwitch/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip } from 'antd';
3 | import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
4 |
5 | export default props => {
6 | const [view, setView] = React.useState(false);
7 | const { onClick } = props;
8 |
9 | const handleClick = () => {
10 | setView(view => !view);
11 | onClick(view);
12 | };
13 |
14 | return (
15 |
16 | {view ? (
17 |
18 | ) : (
19 |
23 | )}
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/tipsWrapper/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Popover, Space, Popconfirm, Button } from 'antd';
3 | import ThemeContext from '@/layout/themeContext';
4 |
5 | export default props => {
6 | const {
7 | title = '',
8 | onSet,
9 | onAddBefore,
10 | onAddAfter,
11 | onDelete,
12 | children,
13 | ...restProps
14 | } = props;
15 | const [visible, setVisible] = React.useState(false);
16 |
17 | const theme = React.useContext(ThemeContext);
18 |
19 | if (theme.hiddenCustomControls) {
20 | return children;
21 | }
22 |
23 | const getTitle = (title = '') => {
24 | return 点击按钮配置{title && ` ${title} `};
25 | };
26 |
27 | const content = (
28 |
29 |
30 |
39 | {onDelete && (
40 |
41 |
44 |
45 | )}
46 |
47 |
48 |
49 | {onAddBefore && (
50 |
53 | )}
54 | {onAddAfter && (
55 |
58 | )}
59 |
60 |
61 | );
62 |
63 | return (
64 | {
72 | setVisible(!visible);
73 | }}
74 | >
75 | {children}
76 |
77 | );
78 | };
79 |
--------------------------------------------------------------------------------
/src/global.js:
--------------------------------------------------------------------------------
1 | import { Icon } from 'sula';
2 | import {
3 | EditOutlined,
4 | DeleteOutlined,
5 | PlusOutlined,
6 | RedoOutlined,
7 | EyeOutlined,
8 | } from '@ant-design/icons';
9 | import Mock from 'mockjs';
10 |
11 | import 'antd/dist/antd.min.css';
12 | import '../mock';
13 |
14 | Mock.setup({
15 | timeout: '1000-2000',
16 | });
17 |
18 | Icon.iconRegister({
19 | edit: {
20 | outlined: EditOutlined,
21 | },
22 | delete: {
23 | outlined: DeleteOutlined,
24 | },
25 | plus: {
26 | outlined: PlusOutlined,
27 | },
28 | redo: {
29 | outlined: RedoOutlined,
30 | },
31 | eye: {
32 | outlined: EyeOutlined,
33 | },
34 | });
35 |
--------------------------------------------------------------------------------
/src/layout/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Layout, Space, Tooltip } from 'antd';
3 | import {
4 | DingtalkOutlined,
5 | AlipayCircleOutlined,
6 | GithubOutlined,
7 | } from '@ant-design/icons';
8 | import Nav from '@sula/nav';
9 | import { ConfigProvider } from 'sula';
10 | import routes from '@/routes';
11 | import menus from '@/menus';
12 | import TipsSwitch from '@/components/tipsSwitch';
13 | import LanguageSwitch from '@/components/languageSwitch';
14 | import ThemeSwitch from '@/components/themeSwitch';
15 | import GuideWrapper from '@/components/guide';
16 | import { setLocale, getLocale, history } from 'umi';
17 | import ThemeContext, { GUIDE, DONE } from './themeContext';
18 |
19 | import zhCN from 'sula/es/localereceiver/zh_CN';
20 | import enUS from 'sula/es/localereceiver/en_US';
21 |
22 | import styles from './index.less';
23 |
24 | export default class LayoutComponent extends React.Component {
25 | state = {
26 | hiddenCustomControls: false,
27 | locale: getLocale(),
28 | theme: 'bluebird',
29 | hiddenGuideTips: localStorage.getItem(GUIDE) === DONE,
30 | };
31 |
32 | componentDidMount() {
33 | Nav.start({
34 | siderConfig: {
35 | menus,
36 | },
37 | getUserInfo: () => {
38 | return Promise.resolve({
39 | operatorName: 'Sula',
40 | });
41 | },
42 | userInfoViewVisible: false,
43 | getTopMenus: () => {
44 | return Promise.resolve([
45 | {
46 | name: 'DingDing',
47 | icon: ,
48 | },
49 | {
50 | name: 'Alipay',
51 | icon: ,
52 | },
53 | ]);
54 | },
55 | navRightExtra: this.navRightExtraRender(),
56 | breadcrumbVisible: true, // 是否显示面包屑
57 | routes, // 路由信息（项目路由配置信息)
58 | });
59 | }
60 |
61 | handleChangeLanguage = lang => {
62 | setLocale(lang);
63 | this.setState({
64 | locale: lang,
65 | });
66 | };
67 |
68 | handleChangeTheme = theme => {
69 | this.setState({
70 | theme,
71 | });
72 | };
73 |
74 | toggleQuestion = () => {
75 | this.setState({
76 | hiddenCustomControls: !this.state.hiddenCustomControls,
77 | });
78 | };
79 |
80 | navRightExtraRender = () => {
81 | return (
82 |
83 |
87 | {/* */}
88 |
89 |
90 | {
92 | window.open('https://github.com/umijs/sula');
93 | }}
94 | className={styles.github}
95 | />
96 |
97 |
98 | );
99 | };
100 |
101 | toggleGuideTips = visible => {
102 | this.setState({
103 | hiddenGuideTips: visible,
104 | });
105 | };
106 |
107 | render() {
108 | const { children } = this.props;
109 | const { hiddenCustomControls, hiddenGuideTips, locale, theme } = this.state;
110 |
111 | return (
112 |
119 |
120 |
121 |
122 |
127 | {children}
128 |
129 |
130 |
131 |
132 |
133 | );
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/layout/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '~antd/lib/style/themes/default';
2 |
3 | .wrapper {
4 | background: #f1f2f6;
5 | padding: 16px 24px;
6 | min-height: calc(100vh - 48px - 64px);
7 | }
8 |
9 | .navExtra {
10 | display: flex;
11 | color: rgb(64, 137, 247);
12 | user-select: none;
13 | margin-right: 16px;
14 | }
15 |
16 | .github {
17 | color: #24292f;
18 | font-size: 24px;
19 | }
20 |
--------------------------------------------------------------------------------
/src/layout/themeContext.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const theme = {
4 | hiddenCustomControls: false,
5 | hiddenGuideTips: false,
6 | toggleGuideTips: () => {},
7 | };
8 |
9 | const ThemeContext = React.createContext(theme);
10 |
11 | export default ThemeContext;
12 |
13 | export const GUIDE = 'sula-guide';
14 | export const DONE = 'sula-guide-done-01';
15 |
--------------------------------------------------------------------------------
/src/locales/en-US.js:
--------------------------------------------------------------------------------
1 | export default {
2 | WELCOME_TO_UMI_WORLD: "{name}, welcome to umi's world",
3 | /** index */
4 | delete: 'Delete',
5 | create: 'Create',
6 | refresh: 'Refresh',
7 | reset: 'Reset',
8 |
9 | /** list */
10 | list_id: 'ID',
11 | list_info: 'Info',
12 | list_sender: 'Sender Name',
13 | list_recipient: 'Recipient Name',
14 | list_time: 'Time',
15 | list_description: 'Description',
16 | list_status: 'Status',
17 | list_price: 'Price Protection',
18 | list_operator: 'Operator',
19 | list_placeholder_search_id: 'Search Id',
20 | list_placeholder_search_status: 'Search status',
21 | list_placeholder_search_sender: 'Search sender name',
22 | list_placeholder_search_recipient: 'Search recipient name',
23 | list_confirm_delete: 'Are you sure to delete?',
24 | list_confirm_refresh: 'Are you sure to refresh?',
25 | list_tooltip_refresh: 'Refresh',
26 | list_tooltip_view: 'View',
27 | list_tooltip_edit: 'Edit',
28 | list_tooltip_delete: 'Delete',
29 | list_title: 'Basic Infomation',
30 |
31 | /** form */
32 | form_title_sender: 'Sender',
33 | form_title_recipient: 'Recipient',
34 | form_title_basic: 'Basic',
35 | form_title_wrapper: 'Wrapper',
36 | form_title_submit: 'Submit',
37 | form_title_other: 'Other',
38 | form_title_tab1: 'Tab1',
39 | form_title_tab2: 'Tab2',
40 | form_title_tab3: 'Tab3',
41 | form_title_tab4: 'Tab4',
42 | form_title_step1: 'Step1',
43 | form_title_step2: 'Step2',
44 | form_title_step3: 'Step3',
45 | form_title_step4: 'Step4',
46 | form_label_sender_name: 'Sender Name',
47 | form_label_sender_secrecy: 'Secercy',
48 | form_label_sender_number: 'Sender Number',
49 | form_label_sender_address: 'Sender Address',
50 | form_label_recipient_name: 'Recipient Name',
51 | form_label_recipient_time: 'Recipient Time',
52 | form_label_recipient_number: 'Recipient Number',
53 | form_label_recipient_address: 'Recipient Address',
54 | form_label_delivery_time: 'Delicery Time',
55 | form_label_price_protection: 'Price Protection',
56 | form_label_basic_description: 'Description',
57 | form_label_ruler: 'Ruler',
58 | form_label_description: 'Description',
59 | form_placeholder_sender_name: 'Please input sender name',
60 | form_placeholder_sender_number: 'Please input sender number',
61 | form_placeholder_sender_address: 'Please input sender address',
62 | form_placeholder_recipient_name: 'Please input recipient name',
63 | form_placeholder_recipient_number: 'Please input recipient number',
64 | form_placeholder_recipient_address: 'Please input recipient address',
65 | form_placeholder_basic_description: 'Please input description',
66 | form_placeholder_start_time: 'Start time',
67 | form_placeholder_end_time: 'End time',
68 | form_placeholder_price_protection: 'Please select price protection',
69 | form_placeholder_description: 'Please input description',
70 | form_validator_input: 'Please input',
71 |
72 | /** plugins */
73 | plugins_title_table: 'Table Plugins',
74 | plugins_title_text: 'Text',
75 | plugins_title_number: 'Number',
76 | plugins_title_select: 'Select',
77 | plugins_title_time: 'Time',
78 | plugins_title_field: 'Field',
79 | plugins_title_other: 'Other',
80 | plugins_placeholder_input: 'Add Something...',
81 | plugins_title_columnmerge: 'columnmerge plugin',
82 | plugins_title_operationgroup: 'operationgroup plugin',
83 | plugins_title_modalform: 'modalform plugin',
84 | plugins_title_drawerform: 'drawerform plugin',
85 | plugins_title_actions: 'action plugin',
86 | plugins_title_tag: 'tag plugin',
87 | plugins_title_badge: 'badge plugin',
88 | plugins_title_progress: 'progress plugin',
89 | };
90 |
--------------------------------------------------------------------------------
/src/locales/zh-CN.js:
--------------------------------------------------------------------------------
1 | export default {
2 | /** index */
3 | delete: '删除',
4 | create: '新增',
5 | refresh: '刷新',
6 | reset: '重置',
7 |
8 | /** list */
9 | list_id: 'ID',
10 | list_info: '信息',
11 | list_sender: '发送人',
12 | list_recipient: '接收人',
13 | list_time: '时间',
14 | list_description: '描述',
15 | list_status: '状态',
16 | list_price: '保护价格',
17 | list_operator: '操作',
18 | list_placeholder_search_id: '搜索Id',
19 | list_placeholder_search_status: '搜索状态',
20 | list_placeholder_search_sender: '搜索发送人',
21 | list_placeholder_search_recipient: '搜索接收人',
22 | list_confirm_delete: '确定要删除吗？',
23 | list_confirm_refresh: '确定要刷新吗？',
24 | list_tooltip_refresh: '刷新',
25 | list_tooltip_view: '查看',
26 | list_tooltip_edit: '编辑',
27 | list_tooltip_delete: '删除',
28 | list_title: '基本信息',
29 |
30 | /** form */
31 | form_title_sender: '发送',
32 | form_title_recipient: '接收',
33 | form_title_basic: '基础',
34 | form_title_wrapper: '嵌套',
35 | form_title_submit: '提交',
36 | form_title_other: '其他',
37 | form_title_tab1: '标签1',
38 | form_title_tab2: '标签2',
39 | form_title_tab3: '标签3',
40 | form_title_tab4: '标签4',
41 | form_title_step1: '步骤1',
42 | form_title_step2: '步骤2',
43 | form_title_step3: '步骤3',
44 | form_title_step4: '步骤4',
45 | form_label_sender_name: '发送人姓名',
46 | form_label_sender_secrecy: '是否保密',
47 | form_label_sender_number: '发送人号码',
48 | form_label_sender_address: '发送人地址',
49 | form_label_recipient_name: '接收人姓名',
50 | form_label_recipient_time: '接收时间',
51 | form_label_recipient_number: '接收人号码',
52 | form_label_recipient_address: '接收人地址',
53 | form_label_delivery_time: '送货时间',
54 | form_label_price_protection: '价格保护',
55 | form_label_basic_description: '其他信息',
56 | form_label_ruler: '规则',
57 | form_label_description: '描述',
58 | form_placeholder_sender_name: '请输入发送人姓名',
59 | form_placeholder_sender_number: '请输入发送人号码',
60 | form_placeholder_sender_address: '请输入发送人地址',
61 | form_placeholder_recipient_name: '请选择接收人姓名',
62 | form_placeholder_recipient_number: '请输入接收人号码',
63 | form_placeholder_recipient_address: '请输入接收人地址',
64 | form_placeholder_basic_description: '请输入其他信息',
65 | form_placeholder_start_time: '开始时间',
66 | form_placeholder_end_time: '结束时间',
67 | form_placeholder_price_protection: '请选择保护价格',
68 | form_placeholder_description: '请输入其他描述',
69 | form_validator_input: '该项为必填项',
70 |
71 | /** plugins */
72 | plugins_title_table: '表格插件',
73 | plugins_title_text: '文本输入',
74 | plugins_title_number: '数字输入',
75 | plugins_title_select: '选择输入',
76 | plugins_title_time: '时间输入',
77 | plugins_title_field: '文件输入',
78 | plugins_title_other: '其他',
79 | plugins_placeholder_input: '请输入',
80 | plugins_title_columnmerge: '列合并插件',
81 | plugins_title_operationgroup: '列合并插件',
82 | plugins_title_modalform: '弹框表单插件',
83 | plugins_title_drawerform: '抽屉表单插件',
84 | plugins_title_actions: '行为插件',
85 | plugins_title_tag: '标签插件',
86 | plugins_title_badge: '徽标数插件',
87 | plugins_title_progress: '进度条插件',
88 | };
89 |
--------------------------------------------------------------------------------
/src/menus.js:
--------------------------------------------------------------------------------
1 | import {
2 | BulbOutlined,
3 | TableOutlined,
4 | FormOutlined,
5 | LayoutOutlined,
6 | } from '@ant-design/icons';
7 |
8 | export default [
9 | {
10 | name: 'List',
11 | icon: ,
12 | hasChildren: true,
13 | children: [
14 | {
15 | name: 'Table',
16 | link: '#/list/basic',
17 | },
18 | {
19 | name: 'SingleSearch',
20 | link: '#/list/singlesearch',
21 | },
22 | {
23 | name: 'AdvancedSearch',
24 | link: '#/list/advancedsearch',
25 | },
26 | {
27 | name: 'StepQueryTable',
28 | link: '#/list/stepquerytable',
29 | },
30 | {
31 | name: 'NoPagination',
32 | link: '#/list/nopagination',
33 | },
34 | ],
35 | },
36 | {
37 | name: 'Form',
38 | icon: ,
39 | hasChildren: true,
40 | children: [
41 | {
42 | name: 'Card',
43 | link: '#/form/card',
44 | },
45 | {
46 | name: 'NestedCard',
47 | link: '#/form/nestedcard',
48 | },
49 | {
50 | name: 'Vertical',
51 | link: '#/form/vertical',
52 | },
53 | {
54 | name: 'Media',
55 | link: '#/form/media',
56 | },
57 | {
58 | name: 'Horizontal',
59 | link: '#/form/horizontal',
60 | },
61 | {
62 | name: 'StepForm',
63 | link: '#/form/stepform',
64 | },
65 | ],
66 | },
67 | {
68 | name: 'Form Layout',
69 | icon: ,
70 | hasChildren: true,
71 | children: [
72 | {
73 | name: 'form',
74 | link: '#/layout/form',
75 | },
76 | ],
77 | },
78 | {
79 | name: 'Plugin',
80 | icon: ,
81 | hasChildren: true,
82 | children: [
83 | {
84 | name: 'table',
85 | link: '#/plugin/table',
86 | },
87 | {
88 | name: 'form',
89 | link: '#/plugin/form',
90 | },
91 | ],
92 | },
93 | ];
94 |
--------------------------------------------------------------------------------
/src/pages/exception/404.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'umi';
3 | import { Result, Button } from 'antd';
4 |
5 | export default () => (
6 |
12 |
13 |
14 | }
15 | />
16 | );
17 |
--------------------------------------------------------------------------------
/src/pages/form/card.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CreateForm from '@/components/jsonFormTemp';
3 | import { cardConfig as config } from '@sula/templates';
4 |
5 | export default (props) => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/form/horizontal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CreateForm from '@/components/jsonFormTemp';
3 | import { horizontalConfig as config } from '@sula/templates';
4 |
5 | export default (props) => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/form/media.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CreateForm from '@/components/jsonFormTemp';
3 | import { mediaConfig as config } from '@sula/templates';
4 |
5 | export default (props) => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/form/nestedcard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CreateForm from '@/components/jsonFormTemp';
3 | import { nestcardConfig as config } from '@sula/templates';
4 |
5 | export default (props) => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/form/stepform.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import StepForm from '@/components/jsonFormTemp';
3 | import { Card } from 'sula';
4 | import { stepformConfig as config } from '@sula/templates';
5 |
6 | export default (props) => {
7 | return (
8 |
9 |
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/src/pages/form/vertical.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CreateForm from '@/components/jsonFormTemp';
3 | import { verticalConfig as config } from '@sula/templates';
4 |
5 | export default (props) => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/list/advancedsearch.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QueryTable from '@/components/jsonTableTemp';
3 | import { advancesearchConfig as config } from '@sula/templates';
4 |
5 | export default () => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/list/basic.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QueryTable from '@/components/jsonTableTemp';
3 | import { useIntl } from 'umi';
4 |
5 | export default () => {
6 | // 国际化配置
7 | const inti = useIntl();
8 |
9 | const config = {
10 | layout: 'vertical',
11 | rowKey: 'id',
12 | columns: [
13 | {
14 | key: 'id',
15 | title: inti.formatMessage({ id: 'list_id' }),
16 | sorter: true,
17 | render: {
18 | type: 'button',
19 | props: {
20 | type: 'link',
21 | size: 'small',
22 | children: 'SERIAL_NUMBER_#{text}',
23 | href: '#/form/card/view/#{text}',
24 | style: {
25 | padding: 0,
26 | },
27 | },
28 | },
29 | },
30 | {
31 | key: 'senderName',
32 | title: inti.formatMessage({ id: 'list_sender' }),
33 | filterRender: 'search',
34 | },
35 | {
36 | key: 'recipientName',
37 | title: inti.formatMessage({ id: 'list_recipient' }),
38 | filters: [
39 | { text: 'Jack', value: 'Jack' },
40 | { text: 'Lucy', value: 'Lucy' },
41 | { text: 'Lily', value: 'lily' },
42 | { text: 'Mocy', value: 'Mocy' },
43 | ],
44 | },
45 | {
46 | key: 'status',
47 | title: inti.formatMessage({ id: 'list_status' }),
48 | render: {
49 | type: 'tag',
50 | props: {
51 | children: '#{text}',
52 | color:
53 | '#{text === "dispatching" ? "#2db7f5" : text === "success" ? "#87d068" : "#f50"}',
54 | },
55 | },
56 | },
57 | {
58 | key: 'operator',
59 | title: inti.formatMessage({ id: 'list_operator' }),
60 | render: [
61 | {
62 | type: 'icon',
63 | props: {
64 | type: 'edit',
65 | },
66 | action: {
67 | type: 'route',
68 | path: '/form/card/edit/#{record.id}',
69 | },
70 | },
71 | {
72 | type: 'icon',
73 | props: {
74 | type: 'delete',
75 | },
76 | tooltip: inti.formatMessage({ id: 'list_tooltip_delete' }),
77 | confirm: inti.formatMessage({ id: 'list_confirm_delete' }),
78 | visible: '#{record.id % 3 === 0}',
79 | action: [
80 | {
81 | type: 'request',
82 | url: '/api/manage/delete.json',
83 | method: 'POST',
84 | params: {
85 | rowKeys: '#{record.id}',
86 | },
87 | },
88 | 'refreshtable',
89 | ],
90 | },
91 | ],
92 | },
93 | ],
94 | actionsRender: [
95 | {
96 | type: 'button',
97 | props: {
98 | children: inti.formatMessage({ id: 'create' }),
99 | type: 'primary',
100 | },
101 | action: {
102 | type: 'route',
103 | path: '/form/card/create',
104 | },
105 | },
106 | ],
107 | fields: [
108 | {
109 | name: 'id',
110 | label: inti.formatMessage({ id: 'list_id' }),
111 | field: {
112 | type: 'input',
113 | props: {
114 | placeholder: inti.formatMessage({
115 | id: 'list_placeholder_search_id',
116 | }),
117 | },
118 | },
119 | },
120 | {
121 | name: 'senderName',
122 | label: inti.formatMessage({ id: 'form_label_sender_name' }),
123 | field: {
124 | type: 'input',
125 | props: {
126 | placeholder: inti.formatMessage({
127 | id: 'form_placeholder_sender_name',
128 | }),
129 | },
130 | },
131 | },
132 | {
133 | name: 'recipientName',
134 | label: inti.formatMessage({ id: 'form_placeholder_recipient_name' }),
135 | field: {
136 | type: 'select',
137 | props: {
138 | mode: 'multiple',
139 | allowClear: true,
140 | placeholder: inti.formatMessage({
141 | id: 'form_placeholder_recipient_name',
142 | }),
143 | },
144 | },
145 | remoteSource: {
146 | url: '/api/manage/recipientList.json',
147 | },
148 | },
149 | ],
150 | remoteDataSource: {
151 | url: '/api/manage/list.json',
152 | method: 'post',
153 | },
154 | };
155 |
156 | return ;
157 | };
158 |
--------------------------------------------------------------------------------
/src/pages/list/nopagination.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QueryTable from '@/components/jsonTableTemp';
3 | import { nopaginationConfig as config } from '@sula/templates';
4 |
5 | export default () => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/list/singlesearch.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QueryTable from '@/components/jsonTableTemp';
3 | import { singlesearchConfig as config } from '@sula/templates';
4 |
5 | export default () => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/list/stepquerytable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import StepQueryTable from '@/components/jsonTableTemp';
3 | import { stepquerytableConfig as config } from '@sula/templates';
4 |
5 | export default () => {
6 | return ;
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/sulalayout/components/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Radio, Input } from 'antd';
3 |
4 | export function RadioGroup(props) {
5 | const { source = [], ...rest } = props;
6 | return (
7 |
8 | {source.map((ele) => (
9 |
10 | {ele}
11 |
12 | ))}
13 |
14 | );
15 | }
16 |
17 | export function TextArea(props) {
18 | const [height, setHeight] = useState(32);
19 |
20 | return (
21 |
22 | {
24 | setHeight(height);
25 | }}
26 | style={{ height, width: '100%' }}
27 | value={`height: ${height}`}
28 | {...props}
29 | />
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/sulalayout/components/style.less:
--------------------------------------------------------------------------------
1 | :global {
2 | .react-resizable {
3 | position: relative;
4 | }
5 | .react-resizable-handle {
6 | position: absolute;
7 | width: 20px;
8 | height: 20px;
9 | background-repeat: no-repeat;
10 | background-origin: content-box;
11 | box-sizing: border-box;
12 | background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
13 | background-position: bottom right;
14 | padding: 0 3px 3px 0;
15 | }
16 | .react-resizable-handle-sw {
17 | bottom: 0;
18 | left: 0;
19 | cursor: sw-resize;
20 | transform: rotate(90deg);
21 | }
22 | .react-resizable-handle-se {
23 | bottom: 0;
24 | right: 0;
25 | cursor: se-resize;
26 | }
27 | .react-resizable-handle-nw {
28 | top: 0;
29 | left: 0;
30 | cursor: nw-resize;
31 | transform: rotate(180deg);
32 | }
33 | .react-resizable-handle-ne {
34 | top: 0;
35 | right: 0;
36 | cursor: ne-resize;
37 | transform: rotate(270deg);
38 | }
39 | .react-resizable-handle-w,
40 | .react-resizable-handle-e {
41 | top: 50%;
42 | margin-top: -10px;
43 | cursor: ew-resize;
44 | }
45 | .react-resizable-handle-w {
46 | left: 0;
47 | transform: rotate(135deg);
48 | }
49 | .react-resizable-handle-e {
50 | right: 0;
51 | transform: rotate(315deg);
52 | }
53 | .react-resizable-handle-n,
54 | .react-resizable-handle-s {
55 | left: 50%;
56 | margin-left: -10px;
57 | cursor: ns-resize;
58 | }
59 | .react-resizable-handle-n {
60 | top: 0;
61 | transform: rotate(225deg);
62 | }
63 | .react-resizable-handle-s {
64 | bottom: 0;
65 | transform: rotate(45deg);
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/pages/sulalayout/form.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Form } from 'sula';
3 | import { message, Popover, Collapse, Space, Button, Col } from 'antd';
4 | import copy from 'copy-to-clipboard';
5 | import { isEmpty, isNumber } from 'lodash';
6 | import { TextArea, RadioGroup } from './components';
7 |
8 | const initialLayoutValue = {
9 | fieldCount: 3,
10 | layout: 'horizontal',
11 | iSpan: 0,
12 | cols: 3,
13 | };
14 |
15 | const initialSingleValue = {
16 | hiddenLabel: false,
17 | span: undefined,
18 | wSpan: undefined,
19 | offset: undefined,
20 | lOffset: undefined,
21 | wOffset: undefined,
22 | showOffsetSetting: false,
23 | };
24 |
25 | export default () => {
26 | const [fieldList, setFieldList] = useState([]);
27 | const [layoutConfig, setLayoutConfig] = useState(initialLayoutValue);
28 |
29 | const layoutFormRef = React.useRef();
30 |
31 | const formLayoutConfig = {
32 | ref: layoutFormRef,
33 | container: 'card',
34 | onValuesChange: (value, values) => {
35 | setLayoutConfig(values);
36 | },
37 | initialValues: initialLayoutValue,
38 | itemLayout: {
39 | span: 12,
40 | },
41 | fields: [
42 | {
43 | name: 'fieldCount',
44 | label: '表单项数量',
45 | field: {
46 | type: 'inputnumber',
47 | props: {
48 | min: 1,
49 | max: 8,
50 | },
51 | },
52 | },
53 | {
54 | name: 'layout',
55 | label: '布局',
56 | field: () => {
57 | return ;
58 | },
59 | },
60 | {
61 | name: 'cols',
62 | label: 'cols（多列布局）',
63 | field: {
64 | type: 'slider',
65 | props: {
66 | style: { width: '80%' },
67 | min: 0,
68 | max: 4,
69 | dots: true,
70 | },
71 | },
72 | },
73 | {
74 | name: 'iSpan',
75 | label: '每项表单占位栅格数',
76 | field: {
77 | type: 'slider',
78 | props: {
79 | style: { width: '80%' },
80 | min: 0,
81 | max: 24,
82 | dots: true,
83 | step: 2,
84 | },
85 | },
86 | dependency: {
87 | value: {
88 | relates: [['cols']],
89 | inputs: ['*'],
90 | output: 0,
91 | },
92 | },
93 | },
94 | {
95 | name: 'lSpan',
96 | label: '标题占位格数',
97 | field: {
98 | type: 'slider',
99 | props: {
100 | style: { width: '80%' },
101 | min: 0,
102 | max: 24,
103 | dots: true,
104 | step: 2,
105 | },
106 | },
107 | },
108 | {
109 | name: 'wSpan',
110 | label: '表单控件占位格数',
111 | field: {
112 | type: 'slider',
113 | props: {
114 | style: { width: '80%' },
115 | min: 0,
116 | max: 24,
117 | dots: true,
118 | step: 2,
119 | },
120 | },
121 | },
122 | {
123 | label: true,
124 | colon: false,
125 | render: [
126 | {
127 | type: 'button',
128 | props: {
129 | children: '获取配置',
130 | onClick: onCopy,
131 | type: 'primary',
132 | },
133 | },
134 | {
135 | type: 'button',
136 | props: {
137 | children: '重置',
138 | onClick: () => {},
139 | },
140 | },
141 | ],
142 | },
143 | ],
144 | };
145 |
146 | const { iSpan, lSpan, wSpan, fieldCount, layout, cols } = layoutConfig;
147 |
148 | const fields = new Array(fieldCount).fill(0).map((v, idx) => {
149 | const content = (
150 |