样式调整

src/components/chart/chooseDataSourceBox.jsx

@@ -193,9 +193,9 @@ class ChooseDataSourceBox extends React.Component {
                 maskClosable={false}
                 destroyOnClose={true}
             >
-                <div>
-                    <Row type='flex' justify='end'>
-                        <Col style={{ padding: '8px' }}>
+                <div className='content'>
+                    <Row className='toolbar' type='flex' justify='end'>
+                        <Col>
                             <ListFilter
                                 modelName={null}
                                 model={{

src/components/chart/chooseDataSourceBox.less

@@ -1,14 +1,14 @@
 .choosedatasource-box {
     width: 800px !important;
-    .ant-modal-header {
-        .list-filter {
-            float: right;
-        }
-    }
     .ant-modal-body {
-        padding: 0;
+        padding: 0 36px;
         max-height: 60vh;
         overflow-y: auto;
+        .content {
+            .toolbar {
+                padding: 12px 0;
+            }
+        }
         .choosedatasource-table {
             .ant-table-header {
                 overflow-y: hidden;
@@ -19,4 +19,7 @@
             }
         }
     }
+    .ant-modal-footer {
+        border: none;
+    }
 }

src/components/chart/list.jsx

@@ -259,9 +259,6 @@ class ChartList extends React.Component {
                 { selectedRecord && (currentUser.code === selectedRecord.creatorCode || currentUser.role === 'superAdmin') && <Menu.SubMenu className='setgroupmenu' title={<div><Icon style={{ marginRight: '6px' }} type='profile' />移动到</div>}>
                     {[<Menu.Item key='-1' onClick={() => {
                         dispatch({ type: 'chart/remoteSetGroup', chart: selectedRecord, group: { code: '-1'} });
-                        // this.setState({
-                        //     noGroup: true
-                        // });
                     }}>
                         {selectedRecord.groupCode === '-1' ? <span className='current' style={{ fontWeight: 'bold' }}>未分组</span> : '未分组'}
                     </Menu.Item>].concat(this.createGroupMenu(treeData))}
@@ -293,12 +290,13 @@ class ChartList extends React.Component {
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = chart.filterLabel ? (chart.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
         
-        
+        console.time('generateCard');
         let cards = list.map( (l, i) => (
             <CardGrid className={`chart-card`} key={i} onClick={() => {
                 this.setState({ selectedRecord: l })
             }}>
                 <Card
+                    bordered={false}
                     title={
                         <Row type='flex' justify='space-between'>
                             <Col className='label' style={{ overflow: 'hidden', textOverflow: 'ellipsis', padding: '0 16px' }} >
@@ -327,23 +325,8 @@ class ChartList extends React.Component {
                                 </div> : (!l.access ? <div className='deny-body'>
                                     <div className='deny-tip'>无数据权限</div>
                                 </div> : null)}
-                                <Thumbnail style={{ opacity: (l.access && l.database) ? 1 : 0.3 }} type={l.type} code={l.code} option={l.chartOption}/>
-                            </Row>
-                            <Row className='desc'>
-                                <Ellipsis tooltip={l.description&&l.description.length > 16} lines={2}>{
-                                    <span>
-                                    { (filterItem.name === 'description' && filterLabel) ?
-                                        ((l.description || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                            return (
-                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                                fragment
-                                            )
-                                        }
-                                        )) : l.description
-                                    }
-                                    </span>
-                                }</Ellipsis>
+                                <img className="chart-area" src="https://www.echartsjs.com/examples/data/thumb/line-pen.png" style={{width: '100%', display: 'inline'}} />
+                                {/* <Thumbnail style={{ opacity: (l.access && l.database) ? 1 : 0.3 }} type={l.type} code={l.code} option={l.chartOption}/> */}
                             </Row>
                             <Row className='footer' type='flex' justify='end' align='bottom'>
                                 <Col style={{ textAlign: 'left', lineHeight: '28px' }} span={21}>
@@ -371,6 +354,7 @@ class ChartList extends React.Component {
                 </Card>
             </CardGrid>
         ));
+        console.timeEnd('generateCard');
         if(cards.length === 0) {
             return <EmptyContent />
         }
@@ -387,13 +371,6 @@ class ChartList extends React.Component {
                     title={selectedRecord.groupCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.label}</span> : t.label}
                     onTitleClick={() => {
                         dispatch({ type: 'chart/remoteSetGroup', chart: selectedRecord, group: t });
-                        // dispatch({ type: 'chart/setCurrentGroup', group: t });
-                        // this.setState({noGroup: false})
-                        // this.setState({
-                        //     page: 1
-                        // }, () => {
-                        //     this.bodyRef.current.parentNode.scrollTo && this.bodyRef.current.parentNode.scrollTo(0, 0)
-                        // })
                     }}
                 >
                     {this.createGroupMenu(t.children)}
@@ -401,13 +378,6 @@ class ChartList extends React.Component {
             }else {
                 return <Menu.Item key={t.code} onClick={() => {
                     dispatch({ type: 'chart/remoteSetGroup', chart: selectedRecord, group: t });
-                    // dispatch({ type: 'chart/setCurrentGroup', group: t });
-                    // this.setState({noGroup: false})
-                    // this.setState({
-                    //     page: 1
-                    // }, () => {
-                    //     this.bodyRef.current.parentNode.scrollTo && this.bodyRef.current.parentNode.scrollTo(0, 0)
-                    // })
                 }}>{selectedRecord.groupCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.label}</span> : t.label}</Menu.Item>
             }
         })

src/components/chart/list.less

@@ -50,6 +50,7 @@
                         }
                         .btn-refresh {
                             border: none;
+                            background: none;
                             box-shadow: none;
                             font-size: 18px;
                             &:after {
@@ -75,10 +76,11 @@
                         text-align: center;
                         margin: 8px;
                         padding: 0;
+                        box-shadow: none;
+                        border: 1px solid #D6EEFE;
+                        border-radius: @border-radius-base;
                         &>.ant-card {
-                            // border: 2px solid @border-color-base;
                             &>.ant-card-head {
-                                // border-bottom: 2px solid @border-color-base;
                                 min-height: 20px;
                                 cursor: default;
                                 padding: 0;
@@ -88,6 +90,10 @@
                                         padding: 6px 0;
                                         .ant-row-flex {
                                             flex: 1;
+                                            .label {
+                                                width: 100%;
+                                                text-align: center;
+                                            }
                                         }
                                         .anticon {
                                             cursor: pointer;
@@ -97,7 +103,6 @@
                             }
                         }
                         .ant-card-cover {
-                            height: 200px;
                             .cover-body {
                                 padding: 10px;
                                 .thumb {
@@ -159,12 +164,9 @@
                             }
                         }
                         .ant-card-body {
-                            padding: 10px;
+                            padding: 0;
                         }
                     }
-                    .chart-card-hide {
-                        display: none;
-                    }
                 }
             }
         }

src/components/chartDesigner/charts/aggregateTableView.jsx

@@ -38,7 +38,7 @@ class AggregateTableView extends React.Component {
         if(direction === 'vertical') {
             return <tbody>
                 <tr>
-                    <th rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
+                    <th className='target-cell' rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
                 </tr>
                 {
                     statistics.map((s, i) => <tr key={i}>
@@ -50,7 +50,7 @@ class AggregateTableView extends React.Component {
         }
         return <tbody>
             <tr>
-                <th colSpan={`${statistics.length}`}>{targetColumn.label}</th>
+                <th className='target-cell' colSpan={`${statistics.length}`}>{targetColumn.label}</th>
             </tr>
             <tr>
                 { statistics.map((s, i) => <td key={i}>{s.label}</td>) }
@@ -71,7 +71,7 @@ class AggregateTableView extends React.Component {
                     { group1s.map((g, i) => <td key={i}>{g}</td>) }
                 </tr>
                 <tr>
-                    <th rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
+                    <th className='target-cell' rowSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
                 </tr>
                 {
                     statistics.map((s, si) => <tr key={si}>
@@ -83,7 +83,7 @@ class AggregateTableView extends React.Component {
         }
         return <tbody>
             <tr>
-                <th colSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
+                <th className='target-cell' colSpan={`${statistics.length + 1}`}>{targetColumn.label}</th>
             </tr>
             <tr>
                 <td></td>
@@ -112,7 +112,7 @@ class AggregateTableView extends React.Component {
                     {group1s.map((g, i) => <td key={i}>{g}</td>)}
                 </tr>
                 <tr>
-                    <th rowSpan={`${group2s.length * statistics.length + 1}`}>{targetColumn.label}</th>
+                    <th className='target-cell' rowSpan={`${group2s.length * statistics.length + 1}`}>{targetColumn.label}</th>
                 </tr>
                 {
                     group2s.map((g2, idx2) => {
@@ -130,7 +130,7 @@ class AggregateTableView extends React.Component {
         }
         return <tbody>
             <tr>
-                <th colSpan={direction === 'vertical' ? group1s.length + 3 : statistics.length * group2s.length + 1}>{targetColumn.label}</th>
+                <th className='target-cell' colSpan={direction === 'vertical' ? group1s.length + 3 : statistics.length * group2s.length + 1}>{targetColumn.label}</th>
             </tr>
             <tr>
                 <td rowSpan={2}></td>
@@ -157,6 +157,7 @@ class AggregateTableView extends React.Component {
 
     render() {
         const { chartOption } = this.props;
+        const { direction } = chartOption;
         if(!chartOption || !chartOption.targetColumn || !chartOption.statistics || chartOption.statistics.length === 0) {
             return <EmptyContent />
         }
@@ -165,7 +166,7 @@ class AggregateTableView extends React.Component {
             return <EmptyContent />
         }
         return <div ref={ node => this.formRef = node } className='aggregate-container'>
-            <table className={`aggregate-table`} border='1'>
+            <table className={`aggregate-table ${direction}`} border='1'>
                 { body }
             </table>
         </div>

src/components/chartDesigner/charts/aggregateTableView.less

@@ -4,10 +4,15 @@
     height: 100%;
     overflow: auto;
     .aggregate-table {
+        border: none;
         tbody {
             tr {
-                td {
+                th, td {
                     padding: 8px 16px;
+                    border-color: #4A90E2;
+                }
+                .target-cell {
+                    background: #D6EEFE;
                 }
             }
         }

src/components/chartDesigner/charts/echartsView.jsx

@@ -7,6 +7,7 @@ const EchartsView = ({ chartOption }) => {
     if(!chartOption || ((!chartOption.series || chartOption.series.length === 0) && (!chartOption.baseOption || !chartOption.baseOption.series || chartOption.baseOption.series.length === 0))) {
         return <EmptyContent />
     }else {
+        console.log(chartOption);
         return <Echarts
         key={hashcode(chartOption)}
         option={chartOption}

src/components/chartDesigner/charts/tableView.jsx

@@ -31,7 +31,6 @@ class TableView extends React.Component {
     }
 
     getTableLayout = () => {
-        console.log('getTableLayout');
         const { chartOption, viewRef, onPageSizeChange } = this.props;
         let bodyRef = this[viewRef];
         const containerHeight = bodyRef.offsetHeight;

src/components/chartDesigner/sections/style/bar.jsx

@@ -535,14 +535,14 @@ class BarStyle extends React.Component {
                 />
             </FormItem>
             {!!groupBy && !!groupBy.key && <Divider>数据堆叠</Divider>}
-            {!!groupBy && !!groupBy.key && <FormItem label='数据堆叠' {...formItemLayout}>
+            {!!groupBy && !!groupBy.key && <FormItem label='启用' {...formItemLayout}>
                 <Checkbox
                     checked={!!barStyle.stack}
                     onChange={e => {
                         let checked = e.target.checked;
-                        let fields = [];
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { stack: checked } }) }];
                         if(!!chartOption.baseOption) {
-                            let seriesArr = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { stack: checked } }) }];
+                            let seriesArr = [];
                             for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                 seriesArr.push({
                                     stack: checked

src/components/chartDesigner/sections/toolbar.jsx

@@ -5,6 +5,7 @@ import { connect } from 'dva'
 import moment from 'moment'
 import DataPreview from '../../common/dataPreview/dataPreview'
 import Filter from '../../common/filterBox/filter'
+import CusIcon from '../../common/cusIcon/index'
 import './toolbar.less'
 
 class Toolbar extends React.Component {
@@ -125,11 +126,18 @@ class Toolbar extends React.Component {
                     ))}
                 </div>
                 <div className='tools'>
-                    <Button className='tools-button' size='small' onClick={() => {
+                    <span onClick={() => {
                         this.setState({
                             visibleDataPreviewBox: true
                         })
-                    }}>查看列</Button>
+                    }}>
+                        <CusIcon type='bi-view-columns'/>查看列
+                    </span>
+                    {/* <Button className='tools-button' size='small' onClick={() => {
+                        this.setState({
+                            visibleDataPreviewBox: true
+                        })
+                    }}>查看列</Button> */}
                 </div>
                 {visibleFilterBox && <FilterBox code={code} columns={columns} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
                 {visibleDataPreviewBox && <DataPreview

src/components/chartDesigner/sections/toolbar.less

@@ -31,27 +31,19 @@
                 }
             }
             .filter-tag-add {
-                height: 24px;
-                background-color: white;
-                border-style: solid;
+                border: none;
+                background: transparent;
+                line-height: 26px;
             }
         }
         .tools {
-            .tools-button {
-                margin-top: 6px;
+            width: 68px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #408DC6;
+            i {
+                margin-right: 4px;
             }
         }
     }
-}
-.filter-box {
-    max-height: 80vh;
-    width: 50%;
-    .ant-modal-content {
-        max-height: 100vh;
-        .ant-modal-body {
-            padding: 6px;
-            max-height: 60vh;
-            overflow: auto;
-        }
-    }
 }

src/components/common/cusIcon/index.jsx

@@ -2,6 +2,6 @@ import { Icon } from 'antd'
 import scriptUrl from '../../../../static/iconfont/iconfont.js'
  
 export default Icon.createFromIconfontCN({
-    // scriptUrl: '//at.alicdn.com/t/font_755957_y4aj6wyohhm.js'
-    scriptUrl
+    scriptUrl: '//at.alicdn.com/t/font_755957_8duvb0svgqb.js'
+    // scriptUrl
 });

src/components/common/filterBox/filterBox.less

@@ -1,6 +1,23 @@
 .filter-box {
+  max-height: 80vh;
+  width: 50%;
+  .ant-modal-content {
+    max-height: 100vh;
+    .ant-modal-body {
+      max-height: 60vh;
+      overflow: auto;
+      .filter-add-button {
+        width: 100%;
+      }
+    }
+  }
   .ant-modal-footer {
     border: none;
+    div {
+      button:first-child {
+        float: left;
+      }
+    }
   }
 }
 .ant-form-item {

src/components/dashboard/list.less

@@ -37,6 +37,7 @@
                     }
                     .btn-refresh {
                         border: none;
+                        background: none;
                         box-shadow: none;
                         font-size: 18px;
                         &:after {

src/components/dashboardDesigner/chooseChartBox.jsx

@@ -235,8 +235,8 @@ class ChooseChartBox extends React.Component {
                 destroyOnClose={true}
             >
                 <div>
-                    <Row type='flex' justify='end'>
-                        <Col style={{ padding: '8px' }}>
+                    <Row type='flex' justify='end' style={{ padding: '12px 0' }}>
+                        <Col>
                             <ListFilter
                                 modelName={null}
                                 model={{

src/components/dashboardDesigner/chooseChartBox.less

@@ -1,6 +1,6 @@
 .choosechart-box {
     .ant-modal-body {
-        padding: 0;
+        padding: 0 36px;
         max-height: 60vh;
         overflow-y: auto;
         .choosechart-table {
@@ -14,4 +14,7 @@
             }
         }
     }
+    .ant-modal-footer {
+        border: none;
+    }
 }

src/components/dashboardDesigner/layout.less

@@ -71,9 +71,10 @@
                 border: none;
                 .filters {
                     display: flex;
+                    border: none;
+                    background: #FCFCFC;
                     width: 100%;
                     justify-content: space-between;
-                    border-bottom: 1px solid @border-color-base;
                     padding-left: 8px;
                     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                     &.closed {
@@ -99,8 +100,9 @@
                             color: white;
                         }
                         .filter-tag-add {
-                            background-color: white;
-                            border-style: solid;
+                            border: none;
+                            background: transparent;
+                            line-height: 20px;
                         }
                     }
                     .right {

src/components/dashboardDesigner/viewLayout.less

@@ -46,6 +46,7 @@
         line-height: 40px;
         white-space: nowrap;
         .anticon {
+          color: @icon-color-default;
           display: none;
           margin-left: 10px;
           cursor: pointer;
@@ -128,7 +129,7 @@
         .anticon {
           display: inline-block;
           &:hover {
-            color: @item-active-bg-color;
+            color: @icon-color-hover;
           }
         }
       }
@@ -319,6 +320,7 @@
         }
         .chartview-content {
           flex:1;
+          overflow: hidden;
           .ant-table-body {
             margin-top: 0;
           }

src/components/dataConnect/list.less

@@ -15,6 +15,7 @@
                         }
                         .btn-refresh {
                             border: none;
+                            background: none;
                             box-shadow: none;
                             font-size: 18px;
                             &:after {

src/components/dataSource/list.less

@@ -46,6 +46,7 @@
                     }
                     .btn-refresh {
                         border: none;
+                        background: none;
                         box-shadow: none;
                         font-size: 18px;
                         &:after {

src/components/homePage/collection.jsx

@@ -34,10 +34,10 @@ class Collection extends React.Component {
                 <li className='item' key={i}  onClick={() => {
                     this.openTab(c);
                 }}>
-                    <span style={{ fontWeight: 'bold', cursor: 'pointer' }}>
+                    <span style={{ fontWeight: 'bold', cursor: 'pointer', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                         <CusIcon style={{ marginRight: '8px' }} type="bi-nav-dashboard" />
                         {
-                            <span>
+                            <span title={c.name}>
                                 { (c.name || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {
                                     return (
                                         fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'), '\\$1') === regLabel.toLowerCase() ?
@@ -48,7 +48,7 @@ class Collection extends React.Component {
                             </span>
                         }
                     </span>
-                    <Icon type="star" theme="filled" style={{ color: '#F2B91D', cursor: 'pointer' }} onClick={(e) => {
+                    <Icon type="star" theme="filled" style={{ color: '#F2B91D', cursor: 'pointer', marginTop: '4px' }} onClick={(e) => {
                         e.stopPropagation()
                         dispatch({ type: 'home/uncollect', data: c });
                     }}/>

src/components/homePage/sider.jsx

@@ -93,7 +93,7 @@ class MenuLayout extends React.Component {
                         }
                     }}
                     extraTools={{
-                        render: (menuItem) => {return menuItem.type === 'dashboard' ? <Icon type="star" theme={collectionDashboards.findIndex(c => c.code === menuItem.code) > -1 ? 'filled': ''} style={{ color: '#F2B91D', cursor: 'pointer' }} onClick={(e) => {
+                        render: (menuItem) => {return menuItem.type === 'dashboard' ? <Icon type="star" theme={collectionDashboards.findIndex(c => c.code === menuItem.code) > -1 ? 'filled': ''} style={{ color: '#F2B91D', cursor: 'pointer', marginTop: '5px' }} onClick={(e) => {
                             e.stopPropagation()
                             if(collectionDashboards.findIndex(c => c.code === menuItem.code) > -1) {
                                 dispatch({ type: 'home/uncollect', data: menuItem });

src/components/homePage/toolbar.less

@@ -14,8 +14,9 @@
             i {
                 font-size: 18px;
                 margin: 0 4px;
+                color: @icon-color-default;
                 &:hover {
-                    color: @item-active-bg-color;
+                    color: @icon-color-hover;
                 }
             }
         }

src/models/parseChartOption.js

@@ -455,7 +455,7 @@ function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleCon
     let option = {
         themeConfig,
         targetColumn,
-        direction,
+        direction: direction || 'horizontal',
         group1Name: groupBy.length > 0 ? groupBy[0].key : null,
         group2Name: groupBy.length > 1 ? groupBy[1].key : null,
         group1s,

src/theme.js

@@ -16,6 +16,16 @@ module.exports = {
     // Checkbox
     'checkbox-color': '#2C82BE',
 
+    // Buttons
+    'btn-primary-bg': '#2C82BE',
+    'btn-primary-color': '#fff',
+    'btn-default-color': '#2C82BE',
+    'btn-default-bg': '#F5FBFE',
+    'btn-default-border': '#2C82BE',
+    'btn-danger-color': '#FF5E4E',
+    'btn-danger-bg': '#FFFDFD',
+    'btn-danger-border': '#FF5E4E',
+
 
     
     /** 
@@ -36,4 +46,8 @@ module.exports = {
 
     // Checkbox
     'checkbox-border-radius': '0',
+
+    // Icon
+    'icon-color-default': '#2C82BE',
+    'icon-color-hover': '#53A8E2',
 };

src/themes/default/base.less

@@ -37,7 +37,7 @@
     overflow: auto !important;
 }
 .ant-table-small {
-    border: none;
+    border: 1px solid #EDEDED;
     border-radius: 0;
 }
 .ant-table-small > .ant-table-content > .ant-table-body {
@@ -86,6 +86,15 @@
     cursor: default;
 }
 
+// FilterBox
+.filter-box {
+    .ant-modal-content {
+        .ant-modal-body {
+            padding: 12px 36px;
+        }
+    }
+}
+
 // Dropdown Menu
 .ant-dropdown-menu {
     border: 1px solid #408DC6;
@@ -99,6 +108,13 @@
     }
 }
 
+.ant-select-dropdown-menu {
+    .ant-select-dropdown-menu-item:hover {
+        color: @item-active-color;
+        background-color: @item-active-bg-color;
+    }
+}
+
 // Checkbox
 .ant-checkbox-inner {
     border-radius: @checkbox-border-radius;
@@ -127,6 +143,7 @@
     padding: 24px 36px;
 }
 .ant-modal-footer {
+    border: none;
     padding: 12px 36px;
 }
 .ant-modal-close {
@@ -141,6 +158,10 @@
     }
 }
 
+.placeholder {
+    color: #cccccc;
+}
+
 
 // 滚动条
 *::-webkit-scrollbar {

src/themes/default/chart.less

@@ -27,6 +27,7 @@
                 .chart-card {
                     .ant-card {
                         .ant-card-head {
+                            border: none;
                             .ant-card-head-wrapper {
                                 background: #D6EEFE;
                                 .label {

src/themes/default/chartdesigner.less

@@ -3,7 +3,7 @@
     @tab-bg-color-active: #727D99;
     @text-color: #D2E0F3;
     &> .layout-header {
-        background: @content-background-color;
+        background: #fff;
     }
     &> .layout-content {
         &> .chartdesigner {
@@ -61,7 +61,8 @@
             &> .view-content {
                 >.ant-layout {
                     >.content-header {
-                        background: @content-background-color;
+                        background: #FCFCFC;
+                        border: none;
                     }
                     >.content-body {
                         background: @content-background-color;
@@ -77,10 +78,14 @@
 }
 
 .baseconfig-viewtype {
-    border: 1px solid #E2EFFF;
     .ant-select-dropdown-menu .ant-select-dropdown-menu-item .viewtype-box {
         .viewtype-icon {
             color: #419BF9;
         }
+        &:hover {
+            .viewtype-icon {
+                color: #fff;
+            }
+        }
     }
 }

src/themes/default/dashboarddesigner.less

@@ -64,7 +64,7 @@
                         >.dashboard-viewcontent {
                             >.react-grid-layout {
                                 >.chartview {
-                                    box-shadow: 0 0 4px 0 rgba(0,0,0,0.10);
+                                    // box-shadow: 0 0 4px 0 rgba(0,0,0,0.10);
                                     >.chartview-toolbar {
                                         >.chart-title {
                                             color: #408DC6;