add react版前端

web-react/src/components/ant-icon/index.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import * as Icon from '@ant-design/icons'
+
+export default class AntIcon extends Component {
+
+    render() {
+
+        const type = (this.props.type || '').toUpperCase()
+
+        if (type) {
+            if (type.indexOf('OUTLINED') >= 0 || type.indexOf('FILLED') >= 0 || type.indexOf('TWOTONE') >= 0) {
+                const I = Icon[this.props.type]
+                return <I {...this.props} />
+            } else {
+                const t = type.split('-').map(p => {
+                    return p[0] + p.slice(1).toLowerCase()
+                }).join('') + 'Outlined'
+                const I = Icon[t]
+                return <I {...this.props} />
+            }
+        }
+
+        return <></>
+    }
+}

web-react/src/components/authority-view/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class AuthorityView extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/authorized/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Auth extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/component-dynamic/index.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { cloneDeep } from 'lodash'
+
+export default class ComponentDynamic extends Component {
+
+    state = {
+        component: null
+    }
+
+    async componentDidMount() {
+        let c;
+
+        try {
+            if (this.props.is) {
+                if (this.props.is.constructor === Function) {
+                    // 导入函数
+                    c = await this.props.is()
+                } else {
+                    // 导入路径,必须是src以下节点,如 pages/home
+                    c = await import(`../../${this.props.is}`)
+                }
+            }
+        }
+        catch {
+            c = await import(`views/error/404`)
+        }
+
+        this.setState({
+            component: c.default
+        })
+    }
+
+    render() {
+
+        const props = cloneDeep(this.props)
+
+        delete props.is
+
+        return (<>
+            {
+                this.state.component && <this.state.component {...props} />
+            }
+        </>)
+    }
+}

web-react/src/components/container/index.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+
+export default class Container extends Component {
+
+    getMode(mode) {
+        const c = 'container'
+        switch (mode) {
+            case 'sm':
+                return c + '-sm'
+            case 'md':
+                return c + '-md'
+            case 'fluid':
+                return c + '-fluid'
+            default:
+                return c
+        }
+    }
+
+    render() {
+        const className = this.getMode(this.props.mode)
+
+        return (
+            <section className={className}>{this.props.children}</section>
+        )
+    }
+}

web-react/src/components/icon-selector/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class IconSelector extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/image/index.jsx

@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import { Avatar } from 'antd'
+import { isEqual } from 'lodash'
+import { PreviewFileBase64 } from 'util/file'
+
+const getSrc = async (id) => {
+    if (id) {
+        const base64 = await PreviewFileBase64(id)
+        return base64
+    }
+    return ''
+}
+
+let id = ''
+
+export default class Image extends Component {
+
+    state = {
+        src: ''
+    }
+
+    constructor(props) {
+        super(props)
+
+        this.setSrc()
+    }
+
+    shouldComponentUpdate(props) {
+        // props变更或state.src变更时进行渲染
+        return !isEqual(this.props, props) || !this.state.src
+    }
+
+    componentDidUpdate() {
+        if (id !== this.props.id && this.props.id) {
+            this.setSrc()
+        }
+    }
+
+    setSrc = async () => {
+        if (this.props.id) {
+            id = this.props.id
+            const src = await getSrc(id)
+            this.setState({ src })
+        }
+    }
+
+    render() {
+        if (this.props.type === 'avatar') {
+            return (
+                <Avatar src={this.state.src} {...this.props} />
+            )
+        } else {
+            return (
+                <img src={this.state.src} {...this.props} alt="" />
+            )
+        }
+    }
+}

web-react/src/components/index.js

@@ -0,0 +1,31 @@
+import AntIcon from './ant-icon'
+import AuthorityView from './authority-view'
+import Auth from './authorized'
+import ComponentDynamic from './component-dynamic'
+import Container from './container'
+import IconSelector from './icon-selector'
+import Image from './image'
+import ModalForm from './modal-form'
+import PhotoSwipe from './photo-swipe'
+import QueryList from './query-list'
+import QueryTable from './query-table'
+import QueryTableActions from './query-table-actions'
+import QueryTreeLayout from './query-tree-layout'
+
+const components = {
+    AntIcon,
+    AuthorityView,
+    Auth,
+    ComponentDynamic,
+    Container,
+    IconSelector,
+    Image,
+    ModalForm,
+    PhotoSwipe,
+    QueryList,
+    QueryTable,
+    QueryTableActions,
+    QueryTreeLayout
+}
+
+export default components

web-react/src/components/modal-form/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class ModalForm extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/photo-swipe/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class PhotoSwipe extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-list/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryList extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-table-actions/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryTableActions extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-table/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryTable extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-tree-layout/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryTreeLayout extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}