@jiangood/open-admin 1.0.0-beta.5

package/src/loading.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {Spin} from "antd";
+import {ThemeUtils} from "./framework";
+
+export default class extends React.Component {
+    render() {
+        return <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                background: ThemeUtils.getColor("background-color")
+            }}>
+            <Spin size='large'/>
+        </div>
+    }
+}

package/src/pages/404.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {Result} from "antd";
+
+export default class extends React.Component {
+
+    render() {
+        return <Result
+            status={404}
+            title='页面不存在'
+        />
+
+    }
+}

package/src/pages/about.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default class extends React.Component {
+
+
+    render() {
+        return <>
+            <h1>关于</h1>
+        </>
+
+    }
+}

package/src/pages/index.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import {Card} from "antd";
+
+
+export default function () {
+
+    return <Card>
+        欢迎使用本系统
+    </Card>
+}

package/src/pages/login.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {LoginPage} from "../framework/pages/LoginPage";
+
+
+export default class extends React.Component {
+
+
+    render() {
+        return <LoginPage/>
+        // 支持自定义
+        // return <LoginPage form={<Button type={"primary"} size='large'>xx登录</Button>} />
+    }
+
+
+}

package/src/pages/system/api/ApiDoc.jsx

@@ -0,0 +1,148 @@
+import React from "react";
+import {FieldRemoteSelect, HttpUtils, PageUtils} from "../../../framework";
+import {Button, Descriptions, message, Space, Table, Typography} from "antd";
+
+const {Title, Paragraph, Text, Link} = Typography;
+
+export class ApiDoc extends React.Component {
+
+    state = {
+        url: null,
+        appId: null,
+        apiList: [],
+        frameworkVersion: null,
+        errorList: []
+    }
+
+    columns = [
+        {dataIndex: 'name', title: '名称', width: 150},
+        {dataIndex: 'type', title: '类型', width: 100},
+        {
+            dataIndex: 'required', title: '必填', width: 100, render: v => {
+                if (v == null) {
+                    return null;
+                }
+                return v ? '是' : '否';
+            }
+        },
+        {dataIndex: 'desc', title: '描述'},
+    ]
+
+    componentDidMount() {
+        const id = PageUtils.currentParams().id
+        this.loadData(id);
+
+        let url = window.location.protocol + '//' + window.location.host
+        this.setState({url})
+    }
+
+    async loadData(id) {
+        const hide = message.loading('加载中...', 0)
+        const rs = await HttpUtils.get('admin/apiAccount/docInfo', {id})
+        this.setState(rs)
+        hide()
+    }
+
+
+    render() {
+        const {apiList} = this.state
+        return <div>
+
+            <Space>
+                <FieldRemoteSelect url='admin/apiAccount/accountOptions' placeholder='请选择账号'
+                                   onChange={v => this.loadData(v)}/>
+                <Button type='primary'>导出PDF</Button>
+            </Space>
+            <div id='doc-content'>
+                <Title level={1}>接口说明文档</Title>
+
+                <Title level={2}>一、基本信息</Title>
+                <Paragraph>
+                    <Descriptions column={1} bordered size='small'>
+                        <Descriptions.Item label='请求地址'>
+                            {this.state.url}/api/gateway/接口名称
+                        </Descriptions.Item>
+                        <Descriptions.Item label='appId'>
+                            私发
+                        </Descriptions.Item>
+                        <Descriptions.Item label='appSecret'>
+                            私发
+                        </Descriptions.Item>
+                    </Descriptions>
+
+                </Paragraph>
+
+
+                <Paragraph>
+                    <Typography.Text>
+                        <div>
+                            请求使用HTTP POST发送,请求参数也使用json格式
+                        </div>
+                        <div> 响应报文以JSON方式返回</div>
+                    </Typography.Text>
+                </Paragraph>
+
+
+                <Title level={4}>请求头</Title>
+
+                <Table rowKey='name' columns={this.columns} bordered dataSource={[
+                    {name: 'appId', type: 'String', required: true, desc: '账号标识,appId'},
+                    {name: 'timestamp', type: 'String', required: true, desc: '时间戳，当前UNIX时间戳，13位，精确到毫秒'},
+                    {
+                        name: 'sign',
+                        type: 'String',
+                        required: true,
+                        desc: '数据签名，appId + appSecret + timestamp拼接后，进行md5摘要，值为32位小写'
+                    },
+                ]} size='small' pagination={false}>
+                </Table>
+
+
+                <Typography.Title level={4}>公共错误码</Typography.Title>
+                <Table columns={[
+                    {dataIndex: 'code', title: '错误码'},
+                    {dataIndex: 'message', title: '错误描述'}
+                ]} rowKey='code' bordered dataSource={this.state.errorList} size='small' pagination={false}>
+                </Table>
+
+                <Typography.Title level={2}>二、接口列表</Typography.Title>
+                {apiList.map((api, index) => {
+                    return <div key={index}>
+                        <Typography.Title level={3}>{api.name} </Typography.Title>
+                        <p>接口名称： {api.action}</p>
+                        <p>功能描述：{api.desc}</p>
+
+
+                        <Title level={5}>请求参数</Title>
+                        <Table rowKey='name' columns={this.columns} bordered dataSource={api.parameterList}
+                               size='small' pagination={false}>
+                        </Table>
+
+                        <Title level={5}>响应数据</Title>
+                        <Table columns={this.columns} bordered
+                               rowKey={'name'}
+                               dataSource={[
+                                   {name: 'code', type: 'int', required: true, desc: '响应码，0表示成功'},
+                                   {name: 'message', type: 'String', required: false, desc: '结果提示信息'},
+                                   {name: 'data', type: api.returnType, required: false, desc: '返回数据'}
+                               ]} size='small' pagination={false}>
+                        </Table>
+                        {api.returnList != null && api.returnList.length > 0 && <>
+                            <Title level={5}>data 对象 {api.returnType} 说明</Title>
+
+                            <Table columns={this.columns}
+                                   rowKey={'name'}
+                                   bordered
+                                   dataSource={api.returnList} size='small' pagination={false}>
+                            </Table>
+                        </>
+                        }
+
+                    </div>
+                })}
+
+
+            </div>
+        </div>
+    }
+}

package/src/pages/system/api/index.jsx

@@ -0,0 +1,267 @@
+import {PlusOutlined} from '@ant-design/icons'
+import {Button, Form, Input, Modal, Popconfirm, Tabs} from 'antd'
+import React from 'react'
+import {
+    ButtonList,
+    FieldBoolean,
+    FieldDate,
+    HttpUtils,
+    Page,
+    PageUtils,
+    ProTable,
+    StringUtils,
+    ViewPassword
+} from "../../../framework";
+import {ApiDoc} from "./ApiDoc";
+
+
+export default class extends React.Component {
+
+    state = {
+        formValues: {},
+        formOpen: false
+    }
+
+    formRef = React.createRef()
+    tableRef = React.createRef()
+
+    handleAdd = () => {
+        this.setState({formOpen: true, formValues: {}})
+    }
+
+    handleEdit = record => {
+        this.setState({formOpen: true, formValues: record})
+    }
+
+    onFinish = values => {
+        HttpUtils.post('admin/apiAccount/save', values).then(rs => {
+            this.setState({formOpen: false})
+            this.tableRef.current.reload()
+        })
+    }
+
+    handleDelete = record => {
+        HttpUtils.get('admin/apiAccount/delete', {id: record.id}).then(rs => {
+            this.tableRef.current.reload()
+        })
+    }
+
+    columns = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+        },
+        {
+            title: 'appId',
+            dataIndex: 'appId',
+        },
+
+        {
+            title: 'appSecret',
+            dataIndex: 'appSecret',
+            render(v) {
+                return <ViewPassword value={v}></ViewPassword>;
+            }
+        },
+        {
+            title: '准入IP',
+            dataIndex: 'accessIp',
+        },
+        {
+            title: '有效期',
+            dataIndex: 'endTime',
+        },
+        {
+            title: '启用',
+            dataIndex: 'enable',
+            render(v) {
+                return v == null ? null : (v ? '是' : '否')
+            },
+        },
+        {
+            title: '操作',
+            dataIndex: 'option',
+            render: (_, record) => (
+                <ButtonList>
+                    <Button size='small' perm='api'
+                            onClick={() => PageUtils.open('/system/api/perm?accountId=' + record.id, '账户权限')}
+                            type='primary'>权限</Button>
+                    <Button size='small' perm='api' onClick={() => this.handleEdit(record)}>编辑</Button>
+                    <Popconfirm perm='api' title='是否确定删除接口访客' onConfirm={() => this.handleDelete(record)}>
+                        <Button size='small'>删除</Button>
+                    </Popconfirm>
+                </ButtonList>
+            ),
+        },
+    ]
+
+    randomAppSecret = () => {
+        const appSecret = StringUtils.random(32)
+        this.formRef.current.setFieldsValue({appSecret})
+    }
+
+    render() {
+        return <Page padding>
+            <Tabs items={[
+
+                {
+                    label: '接口列表',
+                    key: '2',
+                    children: <ProTable
+                        rowKey='action'
+                        columns={[
+                            {dataIndex: 'name', title: '名称'},
+                            {dataIndex: 'action', title: '动作'},
+                            {dataIndex: 'desc', title: '描述'},
+
+                        ]}
+                        request={(params,) => HttpUtils.get('admin/api/resource/page', params)}
+                    />
+                },
+
+                {
+                    label: '账号列表',
+                    key: '1',
+                    children: <ProTable
+                        actionRef={this.tableRef}
+                        toolBarRender={() => {
+                            return <ButtonList>
+                                <Button perm='api' type='primary' onClick={this.handleAdd}>
+                                    <PlusOutlined/> 新增
+                                </Button>
+                            </ButtonList>
+                        }}
+                        request={(params) => HttpUtils.get('admin/apiAccount/page', params)}
+                        columns={this.columns}
+                    />
+                }, {
+                    label: '接口文档',
+                    key: '3',
+                    children: <ApiDoc/>
+                },
+                {
+                    label: '访问记录',
+                    key: '4',
+                    children: <ProTable
+                        request={(params) => HttpUtils.get('admin/apiAccessLog/page', params)}
+                        columns={[
+
+                            {
+                                title: '接口名称',
+                                dataIndex: 'name',
+
+
+                            },
+
+                            {
+                                title: '接口',
+                                dataIndex: 'action',
+
+
+                            },
+
+                            {
+                                title: 'requestId',
+                                dataIndex: 'requestId',
+
+                            },
+
+                            {
+                                title: '请求数据',
+                                dataIndex: 'requestData',
+
+
+                            },
+
+                            {
+                                title: '响应数据',
+                                dataIndex: 'responseData',
+
+
+                            },
+
+                            {
+                                title: 'ip',
+                                dataIndex: 'ip',
+
+
+                            },
+
+                            {
+                                title: 'ipLocation',
+                                dataIndex: 'ipLocation',
+
+
+                            },
+
+                            {
+                                title: '执行时间',
+                                dataIndex: 'executionTime',
+
+
+                            },
+
+                            {
+                                title: '接口账户',
+                                dataIndex: 'accountName',
+
+
+                            },
+
+
+                        ]}
+                    />
+                },
+
+            ]}>
+
+            </Tabs>
+
+
+            <Modal title='接口访客'
+                   open={this.state.formOpen}
+                   onOk={() => this.formRef.current.submit()}
+                   onCancel={() => this.setState({formOpen: false})}
+                   destroyOnHidden
+                   maskClosable={false}
+            >
+
+                <Form ref={this.formRef} labelCol={{flex: '100px'}}
+                      initialValues={this.state.formValues}
+                      onFinish={this.onFinish}
+
+                >
+                    <Form.Item name='id' noStyle></Form.Item>
+
+                    <Form.Item label='名称' name='name' rules={[{required: true}]}>
+                        <Input/>
+                    </Form.Item>
+
+
+                    <Form.Item label='appId' name='appId'>
+                        <Input placeholder='多个用逗号分隔'/>
+                    </Form.Item>
+                    <Form.Item label='appSecret' name='appSecret' rules={[{required: true}, {len: 32}]}
+                               help={<Button size='small' type='link' onClick={this.randomAppSecret}>随机生成</Button>}
+                    >
+                        <Input/>
+                    </Form.Item>
+
+                    <Form.Item label='准入IP' name='accessIp'>
+                        <Input placeholder='多个用逗号分隔'/>
+                    </Form.Item>
+                    <Form.Item label='有效期' name='endTime' style={{marginTop: 32}}>
+                        <FieldDate type='YYYY-MM-DD'/>
+                    </Form.Item>
+                    <Form.Item label='启用' name='enable' rules={[{required: true}]}>
+                        <FieldBoolean/>
+                    </Form.Item>
+
+                </Form>
+            </Modal>
+        </Page>
+
+
+    }
+}
+

package/src/pages/system/api/perm.jsx

@@ -0,0 +1,69 @@
+import {message, Switch} from 'antd'
+import React from 'react'
+import {ArrUtils, HttpUtils, Page, PageUtils, ProTable} from "../../../framework";
+
+
+export default class extends React.Component {
+
+
+    state = {
+        perms: []
+    }
+
+    constructor(props) {
+        super(props);
+        this.accountId = PageUtils.currentParams().accountId
+    }
+
+    async componentDidMount() {
+        const rs = await HttpUtils.get('admin/apiAccount/get', {id: this.accountId})
+        this.setState({perms: rs.perms})
+    }
+
+    onChange = async (action, checked) => {
+        const hide = message.loading('保存中...', 0)
+        await HttpUtils.post('admin/apiAccount/grant', {accountId: this.accountId, action, checked});
+
+        const perms = this.state.perms
+        if (checked) {
+            ArrUtils.add(perms, action)
+        } else {
+            ArrUtils.remove(perms, action)
+        }
+        this.setState({perms})
+        hide();
+    }
+
+
+    render() {
+        return <Page>
+
+
+            <ProTable
+                rowKey='action'
+                columns={[
+                    {dataIndex: 'name', title: '名称'},
+                    {dataIndex: 'action', title: '动作'},
+                    {dataIndex: 'desc', title: '描述'},
+                    {
+                        dataIndex: 'option', title: '操作',
+                        render: (_, record) => {
+                            let action = record.action;
+                            return <Switch checked={this.state.perms.includes(action)}
+                                           onChange={(checked) => {
+                                               this.onChange(action, checked)
+
+                                           }}> </Switch>
+                        }
+                    }
+                ]}
+                request={(params,) => HttpUtils.get('admin/api/resource/page', params)}
+            />
+
+        </Page>
+
+
+    }
+}
+
+

package/src/pages/system/dict/Dict.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import {HttpUtils, ProTable} from "../../../framework";
+
+
+export default class extends React.Component {
+
+    state = {
+        formValues: {},
+        formOpen: false,
+        selectedRowKeys: []
+    }
+
+    formRef = React.createRef()
+    tableRef = React.createRef()
+
+    columns = [
+
+
+        {
+            title: '编码',
+            dataIndex: 'code',
+
+
+        },
+        {
+            title: '文本',
+            dataIndex: 'text',
+        },
+
+
+    ]
+
+
+    render() {
+        return <>
+            <ProTable
+                actionRef={this.tableRef}
+
+                request={(params) => HttpUtils.get('admin/sysDict/page', params)}
+                columns={this.columns}
+                rowKey='id'
+
+                rowSelection={{
+                    type: 'radio',
+                    selectedRowKeys: this.state.selectedRowKeys,
+                    onChange: (selectedRowKeys, selectedRows) => {
+                        this.setState({selectedRowKeys: selectedRowKeys})
+                        this.props.onChange(selectedRowKeys[0])
+                    }
+                }}
+                onRow={(record) => ({
+                    onClick: () => {
+                        this.setState({selectedRowKeys: [record.id]})
+                        this.props.onChange(record.id)
+                    }
+                })}
+            />
+
+
+        </>
+
+
+    }
+}
+
+
+