@ovine/core/lib/components/aside_layout/item_code.js

Build flexible admin system with json.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
/* eslint-disable no-unused-vars */
import { Drawer, Spinner } from 'amis';
import { Editor, toast } from 'amis/lib/components';
import { cloneDeep, isObject, isFunction, map } from 'lodash';
import React, { useState, useRef, useEffect } from 'react';
import { app } from "../../app";
import { storage } from "../../constants";
import { getRouteConfig } from "../../routes/config";
import { getAppLimits } from "../../routes/limit/exports";
import { getGlobal, setGlobal } from "../../utils/store";
export default (props) => {
    const { render, theme } = props;
    const [show, toggle] = useState(false);
    const [loading, toggleLoading] = useState(true);
    const storeRef = useRef({});
    useEffect(() => {
        setGlobal(storage.dev.code, { enable: true });
    }, []);
    const toggleDrawer = () => toggle((t) => !t);
    const onEditorMounted = () => {
        if (loading) {
            toggleLoading(false);
        }
    };
    const getCodeString = (type) => {
        let json = {};
        switch (type) {
            case 'page': {
                json = getGlobal(storage.dev.code) || {};
                if (!json.schema) {
                    return false;
                }
                // reorder jsonSchema output
                const _a = json.schema, { definitions, preset } = _a, reset = __rest(_a, ["definitions", "preset"]);
                json.schema = Object.assign(Object.assign({}, reset), { definitions, preset });
                transSchema(cloneDeep(json.schema));
                break;
            }
            case 'route':
                json = getRouteConfig(true);
                transSchema(json);
                break;
            case 'limit':
                json = getAppLimits();
                break;
            default:
                return false;
        }
        const jsonStr = JSON.stringify(json.schema || json);
        return jsonStr;
    };
    const viewCode = (codeType) => {
        const codeString = getCodeString(codeType);
        storeRef.current.codeString = codeString;
        if (codeType === 'page' && !codeString) {
            toast.info('当前页面无数据', '系统提示');
            return;
        }
        toggleDrawer();
    };
    const dropDownSchema = {
        type: 'lib-dropdown',
        className: 'l-h-1',
        body: {
            type: 'button',
            iconOnly: true,
            icon: 'fa fa-code',
            level: 'blank',
            // className: 'h-full',
        },
        items: [
            {
                type: 'button',
                level: 'link',
                icon: 'fa fa-file-code-o',
                label: '本页面JSON',
                onClick: () => viewCode('page'),
            },
            {
                type: 'button',
                level: 'link',
                icon: 'fa fa-code-fork',
                label: 'APP路由配置',
                onClick: () => viewCode('route'),
            },
            {
                type: 'button',
                level: 'link',
                icon: 'fa fa-unlock',
                label: '当前拥有权限',
                onClick: () => viewCode('limit'),
            },
        ],
    };
    if (app.env.isRelease) {
        return null;
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(Drawer, { closeOnOutside: true, theme: theme, size: "lg", onHide: toggleDrawer, show: show, position: "left" },
            React.createElement(Spinner, { overlay: true, show: show && loading, size: "lg" }),
            show && (React.createElement(Editor, { editorDidMount: onEditorMounted, options: { readOnly: true }, editorTheme: theme === 'dark' ? 'vs-dark' : 'vs', language: "json", value: storeRef.current.codeString }))),
        render('body', dropDownSchema)));
};
function transSchema(schema) {
    if (!isObject(schema)) {
        return;
    }
    map(schema, (val, key) => {
        if (isFunction(val)) {
            ;
            schema[key] = 'Function Body';
        }
        else if (isObject(val)) {
            transSchema(val);
        }
    });
}