@bit-sun/business-component 2.1.23 → 2.2.0

package/src/components/Business/JsonQueryTable/jsonEditor/index.js

@@ -0,0 +1,346 @@
+import React, { useEffect } from 'react';
+import {
+  Typography,
+  Button,
+  message,
+  Popconfirm,
+  Tooltip,
+  Row,
+  Col,
+  Space,
+} from 'antd';
+import Editor, { monaco } from '@monaco-editor/react';
+import serialize, { deserialize } from '@/utils/serialize';
+import {
+  BulbOutlined,
+  PlayCircleOutlined,
+  DeleteOutlined,
+  CopyOutlined,
+  SaveOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+} from '@ant-design/icons';
+import validateSulaConfig from './lint';
+import * as acorn from 'acorn';
+import * as walk from 'acorn-walk';
+import ConfigTree, { iconRender, nameRender } from '../configTree';
+import registerSuggestions from './suggestions';
+import style from './index.less';
+
+const { Title } = Typography;
+const STRTEMP = 'const config = ';
+
+const getEditorValue = data => {
+  return `${STRTEMP}${serialize(data, { space: 2, unsafe: true })}`;
+};
+
+let isRegister;
+let decorations = [];
+
+export default props => {
+  const monacoRef = React.useRef(null);
+  const {
+    onRun,
+    value,
+    type,
+    onFullScreen = () => {},
+    shallowHeight = 0,
+  } = props;
+
+  const editorRef = React.useRef(null);
+  const [highLightLine, setHighLightLine] = React.useState();
+  const [isFull, setFull] = React.useState(false);
+
+  const isTableAllValue = !!value?.columns;
+
+  const finalValue = getEditorValue(isTableAllValue ? {columns: value?.columns, fields: value?.fields} : value);
+  const [treeData, setTreeData] = React.useState(finalValue);
+
+  const handleCopy = () => {
+    const value1 = editorRef.current.getValue().slice(STRTEMP.length);
+
+    try {
+      const res = deserialize(value1);
+      onRun(isTableAllValue ? {...value, columns: res.columns, fields: res.fields}: res, true);
+      formatDocument();
+      setFull(false);
+    } catch (e) {
+      message.error(`JSON 格式错误`);
+    }
+  };
+
+  const formatDocument = () => {
+    setTimeout(() => {
+      editorRef.current &&
+        editorRef.current.getAction('editor.action.formatDocument').run();
+    }, 300);
+  };
+
+  monaco.init().then(ref => {
+    monacoRef.current = ref;
+    if (!isRegister) {
+      registerSuggestions(ref);
+      isRegister = true;
+    }
+  });
+
+  const onEditorDidMount = (_monaco, editor) => {
+    editorRef.current = editor;
+    const model = editor.getModel();
+
+    formatDocument();
+
+    editor.onKeyDown(e => {
+      if (e.shiftKey) {
+        editorRef.current &&
+          editorRef.current.trigger(
+            'auto completion',
+            'editor.action.triggerSuggest',
+          );
+      }
+    });
+
+    editor.onDidChangeCursorPosition(e => {
+      const lineCount = editor.getModel().getLineCount();
+      if (e.position.lineNumber === 1) {
+        editor.setPosition({
+          lineNumber: 2,
+          column: 1,
+        });
+      } else if (e.position.lineNumber === lineCount) {
+        editor.setPosition({
+          lineNumber: lineCount - 1,
+          column: 1,
+        });
+      }
+    });
+
+    editor.onMouseDown(event => {
+      clearDecorations();
+      onEditorLineChange(event.target.position);
+    });
+
+    editor.onKeyDown(event => {
+      setTimeout(() => {
+        const position = editor.getPosition();
+        onEditorLineChange(position);
+        setTreeData(editor.getValue());
+      });
+    });
+
+    editor.onDidChangeModelContent(() => {
+      const content = editor.getValue();
+      const markers = monacoRef.current.editor.getModelMarkers();
+
+      if (markers.length > 0) {
+        markers.forEach(marker => {
+          monacoRef.current.editor.setModelMarkers(
+            editor.getModel(),
+            marker.owner,
+            [],
+          );
+        });
+      }
+      const ast = acorn.parse(content, { locations: true });
+      walk.full(ast, node => {
+        // if (node?.loc?.start?.column < 5) {
+        validateSulaConfig(node, monacoRef.current, editor);
+        // }
+      });
+    });
+  };
+
+  function onEditorLineChange(position) {
+    const { lineNumber } = position || {};
+    setHighLightLine(lineNumber);
+  }
+
+  // console.log(`点击字段： ${clickType}, 点击字段所属字段: ${type}, 提示: ${suggestionType}`);
+
+  const onClickRun = () => {
+    const value1 = editorRef.current.getValue().slice(STRTEMP.length);
+
+    try {
+      const res = deserialize(value1);
+      onRun(isTableAllValue ? {...value, columns: res.columns, fields: res.fields}: res);
+      formatDocument();
+      setFull(false);
+      message.success(`Run Success 🎉`);
+    } catch (e) {
+      message.error(`JSON 格式错误`);
+    }
+  };
+
+  const onClickDelete = () => {
+    editorRef.current.setValue(`${STRTEMP}{\n\n}`);
+  };
+
+  function clearDecorations() {
+    if (decorations.length) {
+      decorations = editorRef.current.deltaDecorations(decorations, []);
+    }
+  }
+
+  function setDecorations(range) {
+    const [startLineNumber, startColumn, endLineNumber, endColumn] = range;
+    const newDecorations = editorRef.current.deltaDecorations(
+      [],
+      [
+        {
+          range: {
+            endColumn,
+            endLineNumber,
+            startColumn,
+            startLineNumber,
+          },
+          options: {
+            className: 'si-editor-highlight',
+          },
+        },
+      ],
+    );
+    decorations = decorations.concat(newDecorations);
+  }
+
+  const handleSelect = (node, hasChildren) => {
+    const { loc, name } = node;
+    clearDecorations();
+    // 高亮
+    if (hasChildren) {
+      const [line, startColumn] = loc;
+      const keyPosition = [line, startColumn, line, 100];
+      setDecorations(keyPosition);
+    } else {
+      setDecorations(loc);
+    }
+    editorRef.current.revealLine(loc[0]); // 行跳转
+  };
+
+  const handleFullScreen = () => {
+    setFull(true);
+  };
+
+  const handleExitFullScreen = () => {
+    setFull(false);
+  };
+
+  useEffect(() => {
+    editorRef?.current?.layout();
+    onFullScreen && onFullScreen(isFull);
+  }, [isFull]);
+
+  useEffect(() => {
+    editorRef?.current?.layout();
+  }, [shallowHeight]);
+
+  const hasConfigTree = type !== 'editor';
+
+  return (
+    <div className={isFull ? style.editorWrapper : ''}>
+      <div style={{ overflow: 'hidden' }}>
+        <Title style={{ float: 'left' }} level={4}>
+          代码展示
+        </Title>
+        <Tooltip title="按 shift 键快速呼出提示">
+          <BulbOutlined
+            style={{ marginLeft: 8, lineHeight: '32px', cursor: 'pointer' }}
+          />
+        </Tooltip>
+        <Space style={{ float: 'right' }}>
+          <Tooltip title="运行代码">
+            <Button
+              shape="circle"
+              size="small"
+              type="primary"
+              icon={<PlayCircleOutlined />}
+              onClick={onClickRun}
+              shape="circle"
+            />
+          </Tooltip>
+          {/* <Popconfirm title="确定要清空吗？" onConfirm={onClickDelete}>
+            <Tooltip title="清空代码">
+              <Button
+                type="primary"
+                icon={<DeleteOutlined />}
+                size="small"
+                shape="circle"
+              />
+            </Tooltip>
+          </Popconfirm> */}
+          <Tooltip title="保存">
+            <Button
+              type="primary"
+              icon={<SaveOutlined />}
+              onClick={handleCopy}
+              style={{
+                border: 'none',
+              }}
+              shape="circle"
+              size="small"
+            />
+          </Tooltip>
+          <div>
+            <Tooltip title="退出全屏">
+              <Button
+                type="primary"
+                icon={<FullscreenExitOutlined />}
+                onClick={handleExitFullScreen}
+                style={{
+                  border: 'none',
+                  display: !isFull ? 'none' : '',
+                }}
+                shape="circle"
+                size="small"
+              />
+            </Tooltip>
+            {/* <Tooltip title="全屏编辑">
+              <Button
+                type="primary"
+                icon={<FullscreenOutlined />}
+                onClick={handleFullScreen}
+                style={{
+                  border: 'none',
+                  display: isFull ? 'none' : '',
+                }}
+                shape="circle"
+                size="small"
+              />
+            </Tooltip> */}
+          </div>
+        </Space>
+      </div>
+      <Row>
+        <Col span={hasConfigTree ? 16 : 24}>
+          <Editor
+            height={`calc(100vh - ${shallowHeight + 100}px)`}
+            language="javascript"
+            editorDidMount={onEditorDidMount}
+            options={{
+              selectOnLineNumbers: true,
+              renderSideBySide: false,
+            }}
+            value={finalValue}
+            // value={{columns: finalValue.columns, fields: finalValue.fields}}
+          />
+        </Col>
+        {hasConfigTree && (
+          <Col span={8}>
+            <div className={style.title}>属性节点树</div>
+            <ConfigTree
+              style={{
+                height: 'calc(100vh - 300px)',
+                overflowY: 'scroll',
+              }}
+              level={1}
+              data={treeData}
+              onSelect={handleSelect}
+              currentLine={highLightLine}
+              iconRender={iconRender}
+              nameRender={nameRender}
+            />
+          </Col>
+        )}
+      </Row>
+    </div>
+  );
+};

package/src/components/Business/JsonQueryTable/jsonEditor/index.less

@@ -0,0 +1,22 @@
+:global {
+  .si-editor-highlight {
+    background: #1990ffab;
+  }
+}
+
+.title {
+  color: #1890ff;
+  padding: 12px;
+  font-weight: bold;
+}
+
+.editorWrapper {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: 24px;
+  background-color: #fff;
+  z-index: 10000;
+}

package/src/components/Business/JsonQueryTable/jsonEditor/lint/basicType.js

@@ -0,0 +1,147 @@
+import { isString, isNumber, isBoolean, lowerCase } from 'lodash';
+
+const getData = data => data.value || data;
+
+/**
+ *
+ * 其他类型暂时忽略
+ */
+
+const isIgnoreType = node => {
+  return getData(node).type === 'ConditionalExpression';
+};
+
+/**
+ * 基础类型
+ */
+export const isStringType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return isString(getData(node).value);
+};
+
+export const isArrayType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return getData(node).type === 'ArrayExpression';
+};
+
+export const isNumberType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return isNumber(getData(node).value);
+};
+
+export const isBooleanType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return isBoolean(getData(node).value);
+};
+
+export const isObjectType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return getData(node).type === 'ObjectExpression';
+};
+
+export const isEmptyObjectType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return isObjectType(node) && !getData(node).value;
+};
+
+export const isFunctionType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return (
+    getData(node).type === 'ArrowFunctionExpression' ||
+    getData(node).type === 'FunctionExpression' ||
+    getData(node).type === 'ObjectMethod'
+  );
+};
+
+/**
+ * field
+ */
+
+export const isNameType = node => {
+  return isStringType(node) || isNumberType(node) || isArrayType(node);
+};
+
+export const isFieldRenderType = node => {
+  return isStringType(node) || isObjectType(node) || isFunctionType(node);
+};
+
+export const isLayoutType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return ['vertical', 'horizontal', 'inline'].indexOf(getData(node).value) > -1;
+};
+
+export const isModeType = node => {
+  // console.log(getv(node).value);
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return ['view', 'create', 'edit'].indexOf(getData(node).value) > -1;
+};
+
+/**
+ * 通用
+ */
+export const isFetchType = node => {
+  const { properties } = getData(node);
+  if (!properties.length) return false;
+  return properties.some(item => {
+    const { key, value } = item || {};
+    if ((key.name || key.value) === 'url') {
+      return true;
+    }
+  });
+};
+
+export const isMethodType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return ['post', 'get', 'delete'].indexOf(lowerCase(getData(node).value)) > -1;
+};
+
+/**
+ * table
+ */
+
+export const isColumnRender = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return (
+    isStringType(node) ||
+    isObjectType(node) ||
+    isArrayType(node) ||
+    isFunctionType(node)
+  );
+};
+
+/**
+ * action
+ */
+export const isActionType = node => {
+  if (isIgnoreType(node)) {
+    return true;
+  }
+  return (
+    isStringType(node) ||
+    isObjectType(node) ||
+    isArrayType(node) ||
+    isFunctionType(node)
+  );
+};