add 颜色选择

web-react/src/assets/style/app.less

@@ -35,6 +35,7 @@
 @import './lib/tree-layout.less';
 @import './lib/authority-view.less';
 @import './lib/icon-selector.less';
+@import './lib/color-selector.less';
 @import './lib/anchor.less';
 @import './lib/disabled.less';
 @import './theme/primary.less';

web-react/src/assets/style/lib/color-selector.less

@@ -0,0 +1,18 @@
+@import (reference) '../extend.less';
+.ant-select-dropdown {
+  .chrome-picker {
+    width: auto !important;
+    margin: -@padding-xxs 0;
+
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+}
+.color-selector--palette {
+  width: 32px;
+  height: 32px;
+
+  border-radius: @border-radius-base;
+  box-shadow: inset 0 0 0 @border-width-base @border-color-base, inset 0 0 0 3px @white;
+}

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

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import { Col, Row, Select } from 'antd'
+import { ChromePicker } from 'react-color'
+
+export default class index extends Component {
+    select = React.createRef()
+
+    state = {
+        color: null,
+    }
+
+    onChange(color) {
+        this.setState({ color: color.hex })
+    }
+
+    onChangeComplete(color) {
+        this.props.onChange && this.props.onChange(color.hex)
+    }
+
+    render() {
+        const { color } = this.state
+
+        const { value } = this.props
+
+        return (
+            <Row gutter={8}>
+                <Col flex="1">
+                    <Select
+                        ref={this.select}
+                        dropdownRender={() => (
+                            <ChromePicker
+                                color={color || value || '#000'}
+                                disableAlpha
+                                onChange={color => this.onChange(color)}
+                                onChangeComplete={color => this.onChangeComplete(color)}
+                            />
+                        )}
+                        showArrow={false}
+                        {...this.props}
+                        value={value}
+                    />
+                </Col>
+                <Col flex="32px">
+                    <div
+                        className="color-selector--palette"
+                        style={{ backgroundColor: color || value || '#000' }}
+                        onClick={() => {
+                            this.select.current.focus()
+                        }}
+                    ></div>
+                </Col>
+            </Row>
+        )
+    }
+}

web-react/src/components/index.js

@@ -1,6 +1,7 @@
 export { default as AntIcon } from 'components/ant-icon'
 export { default as AuthorityView } from './authority-view'
 export { default as Auth } from './authorized'
+export { default as ColorSelector } from './color-selector'
 export { default as ComponentDynamic } from './component-dynamic'
 export { default as Container } from './container'
 export { default as IconSelector } from './icon-selector'

web-react/src/pages/system/app/form.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import { Form, Input, InputNumber, Spin } from 'antd'
-import { AntIcon, IconSelector } from 'components'
-import { cloneDeep } from 'lodash'
+import { AntIcon, ColorSelector, IconSelector } from 'components'
 import { api } from 'common/api'
 
 const initialValues = {
@@ -107,6 +106,9 @@ export default class form extends Component {
                                 }
                             />
                         </Form.Item>
+                        <Form.Item label="颜色" name="color">
+                            <ColorSelector placeholder="请选择颜色" />
+                        </Form.Item>
                         <Form.Item label="排序" name="sort">
                             <InputNumber
                                 max={1000}

web-react/src/pages/system/app/index.jsx

@@ -38,6 +38,33 @@ export default class index extends Component {
 
     // 表格字段
     columns = [
+        {
+            title: '图标',
+            dataIndex: 'icon',
+            width: 32,
+            render: (text, record) => (
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '32px',
+                        height: '32px',
+                        borderRadius: '100%',
+                        backgroundColor: record.color,
+                        margin: '0 auto',
+                    }}
+                >
+                    <AntIcon
+                        type={text}
+                        style={{
+                            fontSize: '20px',
+                            color: '#fff',
+                        }}
+                    />
+                </div>
+            ),
+        },
         {
             title: '应用名称',
             dataIndex: 'name',