diff --git a/web-react/craco.config.js b/web-react/craco.config.js
index e7c7826..59d3aa2 100644
--- a/web-react/craco.config.js
+++ b/web-react/craco.config.js
@@ -1,4 +1,5 @@
-const CracoLessPlugin = require('craco-less');
+const CracoLessPlugin = require('craco-less')
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 module.exports = {
     devServer: {
@@ -25,4 +26,9 @@ module.exports = {
             },
         },
     ],
-};
\ No newline at end of file
+    webpack: {
+        plugins: [
+            new MonacoWebpackPlugin()
+        ]
+    }
+}
\ No newline at end of file
diff --git a/web-react/src/components/modal-form/index.jsx b/web-react/src/components/modal-form/index.jsx
index 3e1a5e5..33e11f5 100644
--- a/web-react/src/components/modal-form/index.jsx
+++ b/web-react/src/components/modal-form/index.jsx
@@ -121,9 +121,11 @@ export default class ModalForm extends Component {
         try {
             const postData = await body.getData()
 
-            const { success } = await this.action(postData)
-            if (success) {
-                Message.success(this.props.successMessage || '保存成功')
+            const result = await this.action(postData)
+            if (!result || result.success) {
+                if (result && result.success) {
+                    Message.success(this.props.successMessage || '保存成功')
+                }
                 this.close()
                 if (typeof this.props.onSuccess === 'function') {
                     this.props.onSuccess(postData)
diff --git a/web-react/src/components/query-table/index.jsx b/web-react/src/components/query-table/index.jsx
index de69c37..85b9440 100644
--- a/web-react/src/components/query-table/index.jsx
+++ b/web-react/src/components/query-table/index.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Form, Button, Table } from 'antd'
+import { Form, Button, Table, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 
 const clearChildren = (data) => {
@@ -182,6 +182,18 @@ export default class QueryTable extends Component {
         this.onLoadData()
     }
 
+    onAddRow(record = {}) {
+        let { dataSource } = this.state
+        if (!dataSource.find(item => !item.id)) {
+            dataSource = [...dataSource, record]
+            this.setState({
+                dataSource
+            })
+            return dataSource.length - 1
+        }
+        return false
+    }
+
     /**
      * 渲染查询栏
      * @returns 
@@ -201,8 +213,10 @@ export default class QueryTable extends Component {
                     {query}
                     <Form.Item>
                         <Button.Group className="mr-xs">
-                            <Button htmlType="submit" type="primary">查询</Button>
-                            <Button onClick={() => this.onResetQuery()}>重置</Button>
+                            <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
+                            <Tooltip placement="bottom" title="重置查询">
+                                <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                            </Tooltip>
                         </Button.Group>
                         {
                             moreQuery && <Button>更多查询条件</Button>
@@ -213,6 +227,10 @@ export default class QueryTable extends Component {
         )
     }
 
+    renderTable(props, on) {
+        return <Table className="yo-table" {...props} {...on} />
+    }
+
     render() {
 
         const { loading, dataSource } = this.state
@@ -227,6 +245,7 @@ export default class QueryTable extends Component {
             bordered: true,
             size: 'middle',
             rowKey: record => record.id || Math.random().toString(16).slice(2),
+            sticky: true,
             ...this.props
         }
 
@@ -243,11 +262,20 @@ export default class QueryTable extends Component {
                     </div>
                     <div className="yo-action-bar--actions">
                         <Button.Group>
-                            <Button>刷新</Button>
+                            <Tooltip placement="bottom" title="刷新">
+                                <Button onClick={() => this.onReloadData()} type="text" icon={<AntIcon type="reload" />} />
+                            </Tooltip>
                         </Button.Group>
                     </div>
                 </div>
-                <Table className="yo-table" {...props} {...on} sticky />
+                {
+                    this.props.editable ?
+                        <Form ref={this.props.form}>
+                            {this.renderTable(props, on)}
+                        </Form>
+                        :
+                        this.renderTable(props, on)
+                }
             </section>
         )
     }
diff --git a/web-react/src/pages/system/app/index.jsx b/web-react/src/pages/system/app/index.jsx
index 053c19f..3652715 100644
--- a/web-react/src/pages/system/app/index.jsx
+++ b/web-react/src/pages/system/app/index.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Form, Input, Popconfirm, message as Message } from 'antd'
 import { isEqual } from 'lodash'
 import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
 import { api } from 'common/api'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import auth from 'components/authorized/handler'
 import { toCamelCase } from 'util/format'
 import FormBody from './form'
@@ -134,7 +134,7 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDicData('common_status').then(res => {
+        getDictData('common_status').then(res => {
             this.setState({
                 codes: res
             }, () => {
@@ -250,12 +250,6 @@ export default class index extends Component {
                                 onClick={() => this.onOpen(this.addForm)}
                             >新增{name}</Button>
                         }
-                        expandedRowRender={
-                            record => {
-                                console.log(record)
-                                return <div>123</div>
-                            }
-                        }
                     />
                 </Card>
 
diff --git a/web-react/src/pages/system/area/form.jsx b/web-react/src/pages/system/area/form.jsx
index 7d5d3ae..fde93a8 100644
--- a/web-react/src/pages/system/area/form.jsx
+++ b/web-react/src/pages/system/area/form.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Form, Input, InputNumber, Select, Spin } from 'antd'
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 
 const initialValues = {
     sort: 100
@@ -40,7 +40,7 @@ export default class form extends Component {
         this.record = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式
 
-        const codes = await getDicData('dic_areacode_type')
+        const codes = await getDictData('dic_areacode_type')
         const exist = !!params.record;
         this.setState({
             codes,
diff --git a/web-react/src/pages/system/area/index.jsx b/web-react/src/pages/system/area/index.jsx
index 263c341..ee8a43e 100644
--- a/web-react/src/pages/system/area/index.jsx
+++ b/web-react/src/pages/system/area/index.jsx
@@ -5,7 +5,7 @@ import { api } from 'common/api'
 import auth from 'components/authorized/handler'
 import { toCamelCase } from 'util/format'
 import { isEqual } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import FormBody from './form'
 
 const apiAction = {
@@ -118,7 +118,7 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDicData('dic_areacode_type').then(res => {
+        getDictData('dic_areacode_type').then(res => {
             this.setState({
                 codes: res
             }, () => {
diff --git a/web-react/src/pages/system/dict/dictdata/form.jsx b/web-react/src/pages/system/dict/dictdata/form.jsx
new file mode 100644
index 0000000..67ed191
--- /dev/null
+++ b/web-react/src/pages/system/dict/dictdata/form.jsx
@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+import { Form, message as Message, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
+import MonacoEditor from 'react-monaco-editor'
+
+const initialValues = {}
+
+export default class form extends Component {
+
+    state = {
+        // 加载状态
+        loading: true,
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    code = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params 
+     */
+    async fillData(params) {
+        this.record = cloneDeep(params.record)
+        //#region 从后端转换成前段所需格式
+        this.code.current.editor.setValue(this.record.extCode || '')
+        setTimeout(() => {
+            this.code.current.editor.getAction(['editor.action.formatDocument'])._run()
+        }, 100)
+        //#endregion
+        this.form.current.setFieldsValue(this.record)
+
+        this.setState({
+            loading: false
+        })
+    }
+
+    /**
+     * 获取数据
+     * 可以对postData进行数据结构调整
+     * [异步,必要]
+     * @returns 
+     */
+    async getData() {
+        const form = this.form.current
+
+        const valid = await form.validateFields()
+        if (valid) {
+            const postData = form.getFieldsValue()
+            if (this.record) {
+                postData.id = this.record.id
+            }
+            //#region 从前段转换后端所需格式
+            try {
+                const code = JSON.parse(this.code.current.editor.getValue());
+                if (code.constructor === Object) {
+                    postData.extCode = JSON.stringify(code);
+                } else {
+                    throw new Error(0);
+                }
+            } catch {
+                Message.error('错误的JSON格式')
+            }
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        return (
+            <Form
+                initialValues={initialValues}
+                ref={this.form}
+                className="yo-form"
+            >
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group">
+                        <MonacoEditor
+                            height={300}
+                            language="json"
+                            options={{
+                                fontSize: 12
+                            }}
+                            ref={this.code}
+                        />
+                    </div>
+                </Spin>
+            </Form>
+        )
+    }
+}
diff --git a/web-react/src/pages/system/dict/dictdata/index.jsx b/web-react/src/pages/system/dict/dictdata/index.jsx
new file mode 100644
index 0000000..c42c5af
--- /dev/null
+++ b/web-react/src/pages/system/dict/dictdata/index.jsx
@@ -0,0 +1,439 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, Popconfirm, message as Message, InputNumber } from 'antd'
+import { isEqual } from 'lodash'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import getDictData from 'util/dic'
+import auth from 'components/authorized/handler'
+import { toCamelCase } from 'util/format'
+import FormBody from './form'
+
+// 配置页面所需接口函数
+const apiAction = {
+    page: api.sysDictDataPage,
+    add: api.sysDictDataAdd,
+    edit: api.sysDictDataEdit,
+    delete: api.sysDictDataDelete,
+    deleteBatch: api.sysDictDataDeleteBatch
+}
+
+// 用于弹窗标题
+const name = '字典值'
+
+export default class index extends Component {
+
+    state = {
+        codes: {
+            commonStatus: []
+        },
+
+        selectedRowKeys: []
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    form = React.createRef()
+
+    // JSON编辑窗口实例
+    jsonForm = React.createRef()
+
+    // 表格字段
+    columns = [
+        {
+            title: '文本',
+            dataIndex: 'value',
+            sorter: true,
+            width: 200,
+            render: (text, record, index) =>
+                <Form.Item
+                    name={[index, 'value']}
+                    rules={[{ required: true, message: '请输入文本' }]}
+                    className="mb-none"
+                >
+                    <Input autoComplete="off" placeholder="请输入文本" />
+                </Form.Item>
+        },
+        {
+            title: '字典值',
+            dataIndex: 'code',
+            sorter: true,
+            width: 200,
+            render: (text, record, index) =>
+                <Form.Item
+                    name={[index, 'code']}
+                    rules={[{ required: true, message: '请输入文本' }]}
+                    className="mb-none"
+                >
+                    <Input autoComplete="off" placeholder="请输入字典值" />
+                </Form.Item>
+        },
+        {
+            title: '扩展值',
+            dataIndex: 'extCode',
+            width: 80,
+            align: 'center',
+            render: (text, record, index) =>
+                <>
+                    <Form.Item name={[index, 'extCode']} className="hidden">
+                        <Input type="hidden" />
+                    </Form.Item>
+                    {auth('sysDictData:edit') ?
+                        <a
+                            onClick={() => this.onOpen(this.jsonForm, record)}
+                            style={{
+                                fontWeight: 'bold',
+                                display: 'inline-block',
+                                transform: 'scaleY(.85)',
+                                color: 'transparent',
+                                backgroundImage: 'linear-gradient(135deg, #007bff, #52c41a)',
+                                WebkitBackgroundClip: 'text'
+                            }}
+                        >JSON</a>
+                        :
+                        <>{text}</>
+                    }
+                </>
+        },
+        {
+            title: '排序',
+            dataIndex: 'sort',
+            sorter: true,
+            width: 100,
+            render: (text, record, index) => <Form.Item name={[index, 'sort']} className="mb-none">
+                <InputNumber
+                    max={1000}
+                    min={0}
+                    step={1}
+                    className="w-100-p"
+                    autoComplete="off"
+                    placeholder="排序"
+                />
+            </Form.Item>
+        },
+        {
+            title: '备注',
+            dataIndex: 'remark',
+            sorter: true,
+            render: (text, record, index) => <Form.Item name={[index, 'remark']} className="mb-none">
+                <Input autoComplete="off" placeholder="请输入备注" />
+            </Form.Item>
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            sorter: true,
+            width: 80,
+            render: text => this.bindCodeValue(text, 'common_status')
+        }
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props 
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ sysDictData: [['edit'], ['delete']] })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record, index) => (<QueryTableActions>
+                    {
+                        record.id !== -1 ?
+                            <Auth auth="sysDictData:edit">
+                                <a onClick={() => this.onEdit(index)}>保存编辑</a>
+                            </Auth>
+                            :
+                            <Auth auth="sysDictData:add">
+                                <a onClick={() => this.onAdd(index)}>保存新增</a>
+                            </Auth>
+                    }
+                    <Auth auth="sysDictData:delete">
+                        <Popconfirm
+                            placement="topRight"
+                            title="是否确认删除"
+                            onConfirm={() => this.onDelete(record)}
+                        >
+                            <a>删除</a>
+                        </Popconfirm>
+                    </Auth>
+                </QueryTableActions>)
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props 
+     * @param {*} state 
+     * @returns 
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        this.table.current.onLoading()
+        getDictData('common_status').then(res => {
+            this.setState({
+                codes: res
+            }, () => {
+                this.table.current.onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params 
+     * @param {*} query 
+     * @returns 
+     */
+    loadData = async (params, query) => {
+
+        query = {
+            ...query,
+            typeId: this.props.type.id
+        }
+
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+
+        const values = {}
+        data.items.forEach((item, index) => {
+            values[index] = item
+        })
+
+        this.form.current.setFieldsValue(values)
+
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code 
+     * @param {*} name 
+     * @returns 
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find((p) => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal 
+     * @param {*} record 
+     */
+    onOpen(modal, record) {
+        modal.current.open({
+            record
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action 
+     * @param {*} successMessage 
+     */
+    async onAction(action, successMessage, reload = true) {
+        const table = this.table.current
+        table.onLoading()
+        try {
+            await action
+            Message.success(successMessage)
+            if (reload) {
+                table.onReloadData()
+            } else {
+                table.onLoaded()
+            }
+        } catch {
+            table.onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record 
+     */
+    onDelete(record) {
+        this.onAction(
+            apiAction.delete(record),
+            '删除成功'
+        )
+    }
+
+    //#region 自定义方法
+    onAddRow() {
+        const record = {
+            // 为了正常显示checkbox,默认给id赋予了-1
+            id: -1,
+            value: '',
+            code: '',
+            typeId: this.props.type.id,
+            sort: 100,
+            status: 0,
+            remark: null
+        }
+        const index = this.table.current.onAddRow(record)
+        if (index !== false) {
+            this.form.current.setFieldsValue({
+                [index]: record
+            })
+        }
+    }
+
+    async onAdd(index) {
+        const form = this.form.current
+        try {
+            await form.validateFields()
+        } catch (err) {
+            const e = err.errorFields.filter(item => item.name.includes(index))
+            if (e.length) {
+                return
+            }
+        }
+        const record = form.getFieldsValue([index])[index]
+        // 为了正常显示checkbox,默认给id赋予了-1,在这里删除id以表示新增
+        record.id = undefined
+        this.onAction(
+            apiAction.add(record),
+            '新增成功'
+        )
+    }
+
+    async onEdit(index) {
+        const form = this.form.current
+        try {
+            await form.validateFields()
+        } catch (err) {
+            const e = err.errorFields.filter(item => item.name.includes(index))
+            if (e.length) {
+                return
+            }
+        }
+        const record = form.getFieldsValue([index])[index]
+        this.onAction(
+            apiAction.edit(record),
+            '编辑成功',
+            false
+        )
+    }
+
+    async onDeleteBatch() {
+        await this.onAction(
+            apiAction.deleteBatch(this.state.selectedRowKeys),
+            '删除成功'
+        )
+
+        this.setState({
+            selectedRowKeys: []
+        })
+    }
+
+    onSaveExtCode = ({ id, extCode }) => {
+        const table = this.table.current,
+            { dataSource } = table.state,
+            data = dataSource.find(item => item.id === id),
+            index = dataSource.indexOf(data)
+        this.form.current.setFieldsValue({
+            [index]: {
+                extCode
+            }
+        })
+        dataSource[index].extCode = extCode
+        table.setState({ dataSource })
+    }
+    //#endregion
+
+    render() {
+
+        const { selectedRowKeys } = this.state
+
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        editable={true}
+                        form={this.form}
+                        sticky={false}
+                        rowSelection={{
+                            selectedRowKeys,
+                            onChange: selectedRowKeys => this.setState({ selectedRowKeys }),
+                            getCheckboxProps: (record) => ({
+                                disabled: record.id === -1
+                            })
+                        }}
+                        query={
+                            <Auth auth="sysDictData:page">
+                                <Form.Item label="文本" name="value">
+                                    <Input autoComplete="off" placeholder="请输入文本" />
+                                </Form.Item>
+                                <Form.Item label="字典值" name="code">
+                                    <Input autoComplete="off" placeholder="请输入字典值" />
+                                </Form.Item>
+                            </Auth>
+                        }
+                        operator={
+                            <Auth auth="sysDictData:delete">
+                                <Popconfirm
+                                    disabled={!selectedRowKeys.length}
+                                    placement="bottom"
+                                    title="是否确认批量删除"
+                                    onConfirm={() => this.onDeleteBatch()}
+                                >
+                                    <Button disabled={!selectedRowKeys.length} danger>批量删除</Button>
+                                </Popconfirm>
+                            </Auth>
+                        }
+                        footer={
+                            () =>
+                                <Auth auth="sysDictData:add">
+                                    <Button
+                                        block
+                                        icon={<AntIcon type="plus" />}
+                                        onClick={() => this.onAddRow()}
+                                    >新增{name}</Button>
+                                </Auth>
+                        }
+                    />
+                </Card>
+
+                <ModalForm
+                    title="编辑"
+                    action={this.onSaveExtCode}
+                    ref={this.jsonForm}
+                >
+                    <FormBody />
+                </ModalForm>
+            </Container>
+        )
+    }
+}
diff --git a/web-react/src/pages/system/dict/form.jsx b/web-react/src/pages/system/dict/form.jsx
new file mode 100644
index 0000000..821abd0
--- /dev/null
+++ b/web-react/src/pages/system/dict/form.jsx
@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class form extends Component {
+    render() {
+        return (
+            <div>
+                123
+            </div>
+        )
+    }
+}
diff --git a/web-react/src/pages/system/dict/index.jsx b/web-react/src/pages/system/dict/index.jsx
new file mode 100644
index 0000000..0653de9
--- /dev/null
+++ b/web-react/src/pages/system/dict/index.jsx
@@ -0,0 +1,291 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, message as Message, Popconfirm, Radio } from 'antd'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions, QueryTreeLayout } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { toCamelCase } from 'util/format'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import FormBody from './form'
+import DictData from './dictdata'
+
+const apiAction = {
+    tree: api.sysDictTypeTree,
+    page: api.sysDictTypePage,
+    add: api.sysDictTypeAdd,
+    edit: api.sysDictTypeEdit,
+    delete: api.sysDictTypeDelete
+}
+
+const name = '字典'
+
+export default class index extends Component {
+
+    state = {
+        codes: {
+            commonStatus: []
+        }
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    // 树选中节点
+    selectId = undefined
+
+    // 表格字段
+    columns = [
+        {
+            title: '字典名称',
+            dataIndex: 'name',
+            sorter: true,
+        },
+        {
+            title: '类型',
+            key: 'type',
+            dataIndex: 'code',
+            sorter: true,
+            render: text => text ? '字典类型' : '目录'
+        },
+        {
+            title: '唯一编码',
+            dataIndex: 'code',
+            sorter: true,
+        },
+        {
+            title: '排序',
+            dataIndex: 'sort',
+            sorter: true,
+        },
+        {
+            title: '备注',
+            dataIndex: 'remark',
+            width: 200,
+            sorter: true,
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            sorter: true,
+            render: text => this.bindCodeValue(text, 'common_status')
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props 
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ sysDict: [['edit'], ['delete']] })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (<QueryTableActions>
+                    <Auth auth="sysDict:edit">
+                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                    </Auth>
+                    <Auth auth="sysDict:delete">
+                        <Popconfirm
+                            placement="topRight"
+                            title="是否确认删除"
+                            onConfirm={() => this.onDelete(record)}
+                        >
+                            <a>删除</a>
+                        </Popconfirm>
+                    </Auth>
+                </QueryTableActions>)
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props 
+     * @param {*} state 
+     * @returns 
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        this.table.current.onLoading()
+        getDictData('common_status').then(res => {
+            this.setState({
+                codes: res
+            }, () => {
+                this.table.current.onLoadData()
+            })
+        })
+    }
+
+    /**
+    * 调用加载数据接口,可在调用前对query进行处理
+    * [异步,必要]
+    * @param {*} params 
+    * @param {*} query 
+    * @returns 
+    */
+    loadData = async (params, query) => {
+
+        query = {
+            ...query,
+            pid: this.selectId
+        }
+
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+    * 调用树结构数据接口
+    * [异步,必要]
+    * @returns
+    */
+    loadTreeData = async () => {
+        const { data } = await apiAction.tree()
+        return data
+    }
+
+    /**
+     * 树节点选中事件
+     * [必要]
+     * @param {*} id 
+     */
+    onSelectTree(id) {
+        this.selectId = id
+        this.table.current.onReloadData()
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code 
+     * @param {*} name 
+     * @returns 
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find((p) => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal 
+     * @param {*} record 
+     */
+    onOpen(modal, record) {
+        modal.current.open({
+            orgId: this.selectId,
+            record
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action 
+     * @param {*} successMessage 
+     */
+    async onAction(action, successMessage) {
+        this.table.current.onLoading()
+        try {
+            await action
+            Message.success(successMessage)
+            this.table.current.onReloadData()
+        } catch {
+            this.table.current.onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record 
+     */
+    onDelete(record) {
+        this.onAction(
+            apiAction.delete(record),
+            '删除成功'
+        )
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        return (
+            <QueryTreeLayout
+                loadData={this.loadTreeData}
+                defaultExpanded={true}
+                onSelect={(key) => this.onSelectTree(key)}
+            >
+                <Container mode="fluid">
+                    <Card bordered={false}>
+                        <QueryTable
+                            ref={this.table}
+                            autoLoad={false}
+                            loadData={this.loadData}
+                            columns={this.columns}
+                            queryInitialValues={{
+                                type: 2
+                            }}
+                            query={
+                                <Auth auth="sysDict:page">
+                                    <Form.Item label="类型名称" name="name">
+                                        <Input autoComplete="off" placeholder="请输入类型名称" />
+                                    </Form.Item>
+                                    <Form.Item label="唯一编码" name="code">
+                                        <Input autoComplete="off" placeholder="请输入唯一编码" />
+                                    </Form.Item>
+                                    <Form.Item label="类型" name="type">
+                                        <Radio.Group>
+                                            <Radio.Button value={1}>目录</Radio.Button>
+                                            <Radio.Button value={2}>字典类型</Radio.Button>
+                                        </Radio.Group>
+                                    </Form.Item>
+                                </Auth>
+                            }
+                            operator={
+                                <Auth auth="sysDict:add">
+                                    <Button
+                                        icon={<AntIcon type="plus" />}
+                                        onClick={() => this.onOpen(this.addForm)}
+                                    >新增{name}</Button>
+                                </Auth>
+                            }
+                            expandable={{
+                                expandedRowRender: record => <DictData type={record} />,
+                                rowExpandable: record => !!record.code
+                            }}
+                        />
+                    </Card>
+                </Container>
+            </QueryTreeLayout>
+        )
+    }
+}
diff --git a/web-react/src/pages/system/log/oplog/index.jsx b/web-react/src/pages/system/log/oplog/index.jsx
index 40fc3da..52bf8d0 100644
--- a/web-react/src/pages/system/log/oplog/index.jsx
+++ b/web-react/src/pages/system/log/oplog/index.jsx
@@ -4,7 +4,7 @@ import { Auth, Container, QueryTable } from 'components'
 import { api } from 'common/api'
 import { toCamelCase } from 'util/format'
 import { isEqual } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import moment from 'moment'
 
 const { RangePicker } = DatePicker;
@@ -80,7 +80,7 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDicData('op_type').then(res => {
+        getDictData('op_type').then(res => {
             this.setState({
                 codes: res
             }, () => {
diff --git a/web-react/src/pages/system/log/vislog/index.jsx b/web-react/src/pages/system/log/vislog/index.jsx
index b0651eb..ea0f940 100644
--- a/web-react/src/pages/system/log/vislog/index.jsx
+++ b/web-react/src/pages/system/log/vislog/index.jsx
@@ -4,7 +4,7 @@ import { Auth, Container, QueryTable } from 'components'
 import { api } from 'common/api'
 import { toCamelCase } from 'util/format'
 import { isEqual } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import moment from 'moment'
 
 const { RangePicker } = DatePicker;
@@ -80,7 +80,7 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDicData('vis_type').then(res => {
+        getDictData('vis_type').then(res => {
             this.setState({
                 codes: res
             }, () => {
diff --git a/web-react/src/pages/system/menu/form.jsx b/web-react/src/pages/system/menu/form.jsx
index e870986..83f9b8f 100644
--- a/web-react/src/pages/system/menu/form.jsx
+++ b/web-react/src/pages/system/menu/form.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Form, Input, InputNumber, Radio, Select, Spin, Switch, TreeSelect } from 'antd'
 import { AntIcon, IconSelector } from 'components'
 import { cloneDeep } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import { api } from 'common/api'
 import { EMPTY_ID } from 'util/global'
 
@@ -56,7 +56,7 @@ export default class form extends Component {
     async fillData(params) {
         this.record = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式
-        const { menuType, openType } = await getDicData('menu_type', 'open_type')
+        const { menuType, openType } = await getDictData('menu_type', 'open_type')
         const appList = await this.onLoadSysApplist()
         let parentTreeData = []
         if (params.isParent) {
diff --git a/web-react/src/pages/system/menu/index.jsx b/web-react/src/pages/system/menu/index.jsx
index ef3a4b2..bcde83a 100644
--- a/web-react/src/pages/system/menu/index.jsx
+++ b/web-react/src/pages/system/menu/index.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Form, Input, Popconfirm, message as Message } from 'antd'
 import { isEqual } from 'lodash'
 import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
 import { api } from 'common/api'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import auth from 'components/authorized/handler'
 import { toCamelCase } from 'util/format'
 import FormBody from './form'
@@ -130,7 +130,7 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDicData('menu_type', 'menu_weight').then(res => {
+        getDictData('menu_type', 'menu_weight').then(res => {
             this.setState({
                 codes: res
             }, () => {
diff --git a/web-react/src/pages/system/org/form.jsx b/web-react/src/pages/system/org/form.jsx
index 63b94d3..627bdec 100644
--- a/web-react/src/pages/system/org/form.jsx
+++ b/web-react/src/pages/system/org/form.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Cascader, Form, Input, InputNumber, Select, Spin, TreeSelect } from 'antd'
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import { EMPTY_ID } from 'util/global'
 import { api } from 'common/api'
 
@@ -52,7 +52,7 @@ export default class form extends Component {
         const orgData = await this.loadOrgData()
         const areaData = await this.loadAreaData()
 
-        const codes = await getDicData('org_type')
+        const codes = await getDictData('org_type')
         this.setState({
             codes,
             options: {
diff --git a/web-react/src/pages/system/org/index.jsx b/web-react/src/pages/system/org/index.jsx
index de26cad..a008e69 100644
--- a/web-react/src/pages/system/org/index.jsx
+++ b/web-react/src/pages/system/org/index.jsx
@@ -5,7 +5,7 @@ import { api } from 'common/api'
 import auth from 'components/authorized/handler'
 import { toCamelCase } from 'util/format'
 import { isEqual } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import FormBody from './form'
 
 const apiAction = {
@@ -120,7 +120,7 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDicData('org_type').then(res => {
+        getDictData('org_type').then(res => {
             this.setState({
                 codes: res
             }, () => {
diff --git a/web-react/src/pages/system/role/data.jsx b/web-react/src/pages/system/role/data.jsx
index f38b8a4..74a094d 100644
--- a/web-react/src/pages/system/role/data.jsx
+++ b/web-react/src/pages/system/role/data.jsx
@@ -3,7 +3,7 @@ import { Form, Select, Spin, TreeSelect } from 'antd'
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
 import { api } from 'common/api'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 
 const { SHOW_PARENT } = TreeSelect
 
@@ -45,7 +45,7 @@ export default class data extends Component {
 
         this.record = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式
-        const { dataScopeType } = await getDicData('data_scope_type')
+        const { dataScopeType } = await getDictData('data_scope_type')
         const orgTreeData = await this.onLoadOrgTreeData()
         const arerTreeData = await this.onLoadAreaTreeData()
         const orgCheckedKeys = await this.onLoadRoleOwn(this.record.id)
diff --git a/web-react/src/pages/system/user/form.jsx b/web-react/src/pages/system/user/form.jsx
index b9e4e8d..6749c33 100644
--- a/web-react/src/pages/system/user/form.jsx
+++ b/web-react/src/pages/system/user/form.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Button, Row, Col, Form, Input, DatePicker, Radio, Table, Select, Spin, TreeSelect } from 'antd'
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import { EMPTY_ID } from 'util/global'
 import { api } from 'common/api'
 import moment from 'moment'
diff --git a/web-react/src/pages/system/user/index.jsx b/web-react/src/pages/system/user/index.jsx
index 3188887..09931b6 100644
--- a/web-react/src/pages/system/user/index.jsx
+++ b/web-react/src/pages/system/user/index.jsx
@@ -4,7 +4,7 @@ import { AntIcon, Auth, Container, Image, ModalForm, QueryList, QueryTreeLayout
 import { api } from 'common/api'
 import { toCamelCase } from 'util/format'
 import { isEqual } from 'lodash'
-import getDicData from 'util/dic'
+import getDictData from 'util/dic'
 import FormBody from './form'
 
 // 配置页面所需接口函数
@@ -60,7 +60,7 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.list.current.onLoading()
-        getDicData('sex', 'common_status').then(res => {
+        getDictData('sex', 'common_status').then(res => {
             this.setState({
                 codes: res
             }, () => {
diff --git a/web-react/src/store/reducer.js b/web-react/src/store/reducer.js
deleted file mode 100644
index 86c6d66..0000000
--- a/web-react/src/store/reducer.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { combineReducers } from 'redux'
-
-const user = (state = {}, action) => {
-    // 写入各种action对应的操作
-    switch (action.type) {
-        case 'SET_USER_ACCOUNT':
-            const _state = { ...state, ...action.user }
-            return _state
-        default:
-            return state
-    }
-}
-
-const layout = (state = {
-    siderCollapsed: false
-}, action) => {
-    switch (action.type) {
-        // 打开窗口
-        case 'OPEN_WINDOW':
-            return state
-        // 关闭窗口
-        case 'CLOSE_WINDOW':
-            return state
-        // 重新加载窗口
-        case 'RELOAD_WINDOW':
-            return state
-        // 侧边收起状态
-        case 'TOGGLE_COLLAPSED':
-            const _state = { ...state, siderCollapsed: action.siderCollapsed }
-            return _state
-        default:
-            return state
-    }
-}
-
-const dicData = (state = {}, action) => {
-    switch (action.type) {
-        case 'ADD_DIC_DATA':
-            const _state = { ...state, ...action.value }
-            return _state
-        default:
-            return state
-    }
-}
-
-const combine = combineReducers({
-    user,
-    layout,
-    dicData
-})
-
-export default combine
\ No newline at end of file
diff --git a/web-react/src/store/reducer/dict-data.js b/web-react/src/store/reducer/dict-data.js
new file mode 100644
index 0000000..da7a016
--- /dev/null
+++ b/web-react/src/store/reducer/dict-data.js
@@ -0,0 +1,11 @@
+const dictData = (state = {}, action) => {
+    switch (action.type) {
+        case 'ADD_DICT_DATA':
+            const _state = { ...state, ...action.value }
+            return _state
+        default:
+            return state
+    }
+}
+
+export default dictData
\ No newline at end of file
diff --git a/web-react/src/store/reducer/index.js b/web-react/src/store/reducer/index.js
new file mode 100644
index 0000000..4624821
--- /dev/null
+++ b/web-react/src/store/reducer/index.js
@@ -0,0 +1,12 @@
+import { combineReducers } from 'redux'
+import user from './user'
+import layout from './layout'
+import dictData from './dict-data'
+
+const combine = combineReducers({
+    user,
+    layout,
+    dictData
+})
+
+export default combine
\ No newline at end of file
diff --git a/web-react/src/store/reducer/layout.js b/web-react/src/store/reducer/layout.js
new file mode 100644
index 0000000..7f2fa41
--- /dev/null
+++ b/web-react/src/store/reducer/layout.js
@@ -0,0 +1,23 @@
+const layout = (state = {
+    siderCollapsed: false
+}, action) => {
+    switch (action.type) {
+        // 打开窗口
+        case 'OPEN_WINDOW':
+            return state
+        // 关闭窗口
+        case 'CLOSE_WINDOW':
+            return state
+        // 重新加载窗口
+        case 'RELOAD_WINDOW':
+            return state
+        // 侧边收起状态
+        case 'TOGGLE_COLLAPSED':
+            const _state = { ...state, siderCollapsed: action.siderCollapsed }
+            return _state
+        default:
+            return state
+    }
+}
+
+export default layout
\ No newline at end of file
diff --git a/web-react/src/store/reducer/user.js b/web-react/src/store/reducer/user.js
new file mode 100644
index 0000000..d89ec92
--- /dev/null
+++ b/web-react/src/store/reducer/user.js
@@ -0,0 +1,12 @@
+const user = (state = {}, action) => {
+    // 写入各种action对应的操作
+    switch (action.type) {
+        case 'SET_USER_ACCOUNT':
+            const _state = { ...state, ...action.user }
+            return _state
+        default:
+            return state
+    }
+}
+
+export default user
\ No newline at end of file
diff --git a/web-react/src/util/dic/index.js b/web-react/src/util/dic/index.js
index 10a6763..3c1ffbe 100644
--- a/web-react/src/util/dic/index.js
+++ b/web-react/src/util/dic/index.js
@@ -5,16 +5,16 @@ import { toCamelCase } from 'util/format'
 
 const { getState, dispatch } = store
 
-const getDicData = async (...args) => {
-    const dicData = getState('dicData')
+const getDictData = async (...args) => {
+    const dictData = getState('dictData')
     let result = {}
     const code = []
     for (let i = 0; i < args.length; i++) {
         const codeName = toCamelCase(args[i])
-        if (!dicData.hasOwnProperty(codeName)) {
+        if (!dictData.hasOwnProperty(codeName)) {
             code.push(args[i])
         } else {
-            result[codeName] = dicData[codeName]
+            result[codeName] = dictData[codeName]
         }
     }
 
@@ -25,7 +25,7 @@ const getDicData = async (...args) => {
             })
 
             dispatch({
-                type: 'ADD_DIC_DATA',
+                type: 'ADD_DICT_DATA',
                 value
             })
 
@@ -36,7 +36,7 @@ const getDicData = async (...args) => {
         catch { }
     }
 
-    return dicData
+    return dictData
 }
 
-export default getDicData
\ No newline at end of file
+export default getDictData
\ No newline at end of file
diff --git a/web-react/yarn.lock b/web-react/yarn.lock
index 123d188..c0cf4a2 100644
--- a/web-react/yarn.lock
+++ b/web-react/yarn.lock
@@ -7510,17 +7510,17 @@ moment@^2.24.0, moment@^2.25.3:
   resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
 
-monaco-editor-webpack-plugin@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.nlark.com/monaco-editor-webpack-plugin/download/monaco-editor-webpack-plugin-3.1.0.tgz#972efc47a91b3bf3bd977885684a3180eb8f341b"
-  integrity sha1-ly78R6kbO/O9l3iFaEoxgOuPNBs=
+monaco-editor-webpack-plugin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.nlark.com/monaco-editor-webpack-plugin/download/monaco-editor-webpack-plugin-4.0.0.tgz#95be3f48f4220999b909266a9997727f0deab947"
+  integrity sha1-lb4/SPQiCZm5CSZqmZdyfw3quUc=
   dependencies:
     loader-utils "^2.0.0"
 
-monaco-editor@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.nlark.com/monaco-editor/download/monaco-editor-0.24.0.tgz#990b55096bcc95d08d8d28e55264c6eb17707269"
-  integrity sha1-mQtVCWvMldCNjSjlUmTG6xdwcmk=
+monaco-editor@*, monaco-editor@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.nlark.com/monaco-editor/download/monaco-editor-0.25.1.tgz#bba1de27d85cfe1cc5536b138371bf7811717d47"
+  integrity sha1-u6HeJ9hc/hzFU2sTg3G/eBFxfUc=
 
 move-concurrently@^1.0.1:
   version "1.0.1"
@@ -9630,6 +9630,14 @@ react-is@^17.0.1:
   resolved "https://registry.nlark.com/react-is/download/react-is-17.0.2.tgz?cache=0&sync_timestamp=1623273254569&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-is%2Fdownload%2Freact-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha1-5pHUqOnHiTZWVVOas3J2Kw77VPA=
 
+react-monaco-editor@^0.43.0:
+  version "0.43.0"
+  resolved "https://registry.npm.taobao.org/react-monaco-editor/download/react-monaco-editor-0.43.0.tgz#495578470db7b27ab306af813b31f206a6bf9d1c"
+  integrity sha1-SVV4Rw23snqzBq+BOzHyBqa/nRw=
+  dependencies:
+    monaco-editor "*"
+    prop-types "^15.7.2"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.nlark.com/react-refresh/download/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"