图表主题背景变更

src/components/chartDesigner/content.jsx

@@ -19,6 +19,7 @@ import { connect } from 'dva'
 import EmptyContent from '../common/emptyContent/index'
 import Thumbnail from '../common/echarts/thumbnail'
 import { hashcode } from '../../utils/baseUtils'
+import themes from './sections/style/theme/index'
 import './content.less'
 const { Header, Sider, Content, Footer } = Layout
 const { TabPane } = Tabs
@@ -67,10 +68,12 @@ class ChartDesignerContent extends React.Component {
     render() {
         const { chartDesigner, dispatch } = this.props;
         const { isOwner, autoRefresh } = this.state;
-        const { code, baseConfig, chartOption, styleConfig } = chartDesigner;
+        const { code, baseConfig, chartOption, theme: themeName, styleConfig } = chartDesigner;
         const { viewType } = baseConfig;
 
         let configForm, chartView;
+        let t = themes.find(t => t.name === themeName);
+        let theme = t ? t.config : themes[0].config;
 
         if(viewType === 'aggregateTable') {
             configForm = (<AggregateTableConfigForm autoRefresh={autoRefresh}/>);
@@ -159,7 +162,7 @@ class ChartDesignerContent extends React.Component {
                         <Header className='content-header'>
                             <ToolBar className='header-toolbar' autoRefresh={autoRefresh} isOwner={isOwner}/>
                         </Header>
-                        <Content className='content-body' >
+                        <Content className='content-body' style={{ backgroundColor: theme.base.backgroundColor }}>
                             {/* 创建一个隐藏echarts容器用于截缩略图 */}
                             <Thumbnail
                                 style={{ position: 'absolute', display: 'none', top: 0, left: 0 }}

src/components/dataSourceDetail/content.less

@@ -59,8 +59,10 @@
             &>.ant-tabs-content {
                 height: 100%;
                 >.tab-datasource {
-                    height: 100%;
                     overflow: auto;
+                    &.ant-tabs-tabpane-active {
+                        height: 100%;
+                    }
                 }
             }
         }