第四版视觉检查调整

src/components/chartDesigner/charts/tableView.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Table } from 'antd'
 import EmptyContent from '../../common/emptyContent'
+import EllipsisTooltip from '../../common/ellipsisTooltip/index';
 import './tableView.less'
 
 class TableView extends React.Component {
@@ -57,7 +58,10 @@ class TableView extends React.Component {
             { !columns || columns.length === 0 ? <EmptyContent /> : <Table
                 className={`table-view ${themeConfig.name}`}
                 columns={columns ? columns.map((c, i) => {
-                    let obj = { ...c };
+                    let obj = {
+                        ...c,
+                        title: <EllipsisTooltip key={i} title={c.title} style={{ width: `${columnWidth - 16}px` }}>{c.title}</EllipsisTooltip>,
+                    };
                     if(i !== columns.length - 1) {
                         obj.onCell = () => {
                             return {

src/components/chartDesigner/sections/chartDataPreview.jsx

@@ -49,6 +49,8 @@ class ChartDataPreview extends React.Component {
                 columns={columns.map((c, i) => {
                     let obj = {
                         ...c,
+                        title: <EllipsisTooltip key={i} title={c.title} style={{ width: '134px' }}>{c.title}</EllipsisTooltip>,
+                        width: 150,
                         onCell: () => {
                             return {
                                 style: {

src/components/chartDesigner/sections/style/theme/default.less

@@ -21,11 +21,26 @@
         }
     }
 }
-.dashboard-viewcontent.theme2 {
+.dashboard-viewcontent.default {
     .chartview {
         &> .chartview-toolbar {
             &> .chart-title {
-                color: #2C82BE !important;
+                color: #2C82BE;
+            }
+        }
+    }
+}
+.previewbox.default {
+    .chartview {
+        &> .chartview-toolbar {
+            &> .chart-title {
+                color: #2C82BE;
+            }
+            .anticon {
+                color: #2C82BE;
+                &:hover {
+                    color: @icon-color-hover;
+                }
             }
         }
     }

src/components/chartDesigner/sections/style/theme/theme2.less

@@ -189,10 +189,15 @@
         >.ant-modal-body {
             background: rgba(41,52,65,1);
             .chartview-toolbar {
-                color: #E9F0F5;
                 background: rgba(41,52,65,1);
-                .anticon:hover {
-                    color: @icon-color-hover;
+                > .chart-title {
+                    color: #9fc8e6;
+                }
+                .anticon {
+                    color: #9fc8e6;
+                    &:hover {
+                        color: @icon-color-hover;
+                    }
                 }
             }
         }

src/components/common/ellipsisTooltip/index.jsx

@@ -18,6 +18,7 @@ class EllipsisTooltip extends React.Component {
             <div ref={node => this.container = node} style={{
                 textOverflow: 'ellipsis',
                 overflow: 'hidden',
+                ...this.props.style
             }}>{this.props.children}</div>
         </Tooltip>
         )

src/components/common/filterBox/filter.jsx

@@ -156,7 +156,7 @@ class Filter extends React.Component {
                     dropdownRender={menu => (
                         <div>
                             {menu}
-                            {columnData.length > 0 && <Divider style={{ margin: '4px 0' }} />}
+                            {columnData.length > 0 && <Divider style={{ margin: '0' }} />}
                             {columnData.length > 0 && <div style={{ padding: '8px', cursor: 'pointer' }}>
                                 {/** https://github.com/ant-design/ant-design/issues/13448 */}
                                 <span onMouseDown={this.lockClose} onMouseUp={this.lockClose} onClick={() => {

src/components/common/filterBox/filter2.jsx

@@ -168,7 +168,7 @@ class Filter extends React.Component {
                     dropdownRender={menu => (
                         <div>
                             {menu}
-                            {columnData.length > 0 && <Divider style={{ margin: '4px 0' }} />}
+                            {columnData.length > 0 && <Divider style={{ margin: '0' }} />}
                             {columnData.length > 0 && <div style={{ padding: '8px', cursor: 'pointer' }}>
                                 {/** https://github.com/ant-design/ant-design/issues/13448 */}
                                 <span onMouseDown={this.lockClose} onMouseUp={this.lockClose} onClick={() => {

src/components/dashboard/copyBox.jsx

@@ -61,24 +61,31 @@ class CopyBox extends React.Component {
             maskClosable={false}
             destroyOnClose={true}
         >
-            <div>复制对象包括报表和报表包含的图表</div>
             <Form>
                 <FormItem
                     label='切换数据链接'
                     {...formItemLayout}
                 >
                     <Select
+                        allowClear
                         disabled={!currentDataConnectCode}
                         placeholder={currentDataConnectCode ? '不切换...' : '无需选择数据链接'}
                         onChange={(value) => {
-                            this.setState({
-                                selectedDataConnectCode: value
-                            })
+                            if(!value) {
+                                this.setState({
+                                    selectedDataConnectCode: currentDataConnectCode
+                                })
+                            }else {
+                                this.setState({
+                                    selectedDataConnectCode: value
+                                })
+                            }
                         }}
                     >
                         { this.generateOption() }
                     </Select>
                 </FormItem>
+                <span>{`将生成报表、报表包含的图表${selectedDataConnectCode !== currentDataConnectCode ? '，以及切换数据链接后的数据源' : ''}副本。`}</span>
             </Form>
         </Modal>
     }

src/components/dashboardDesigner/content.jsx

@@ -69,7 +69,7 @@ class DashboardDesignerContent extends React.Component {
         let _scroll = viewContentEl.scrollHeight > viewContentEl.clientHeight;
         let padding = 0;
         let width = viewContentEl.offsetWidth - padding * 2 - (_scroll ? 10 : 2); // 有滚动条时需要减去滚动条的宽度
-        let height = viewContentEl.clientHeight;
+        let height = viewContentEl.offsetHeight - padding * 2;
         this.setState({
             contentSize: {
                 width,

src/components/dashboardDesigner/viewLayout.jsx

@@ -136,7 +136,7 @@ class ViewLayout extends React.Component {
                 verticalCompact={true}
                 compactType='vertical'
             >
-                {(children.length === 0) ? <div key='default-chartview' className='default-chartview' data-grid={{ x: 0, y: 0, w: maxLayoutW, h: 2, minW: maxLayoutW, maxW: maxLayoutW, minH: 2, maxH: 2, static: true }}>
+                {(children.length === 0) ? <div key={`default-chartview-${((contentSize.height - 8) / 48)}`} className='default-chartview' data-grid={{ x: 0, y: 0, w: maxLayoutW, h: ((contentSize.height - 8) / 48) , minW: maxLayoutW, maxW: maxLayoutW, minH: 2, maxH: ((contentSize.height - 8) / 48), static: true }}>
                     <EmptyContent />
                 </div> : children}
             </ReactGridLayout>

src/components/dataSourceDetail/accessConfig.jsx

@@ -233,7 +233,7 @@ class DataSourceAccessConfig extends React.Component{
                 this.setState({
                     visibleDeleteBox: true
                 });
-            }}>删除</span></div>,
+            }}><Icon type='delete'></Icon>删除</span></div>,
             width: 120
         }];
 

src/themes/default/base.less

@@ -107,6 +107,9 @@ input::-webkit-input-placeholder {
 .ant-table-small > .ant-table-content .ant-table-placeholder, .ant-table-small > .ant-table-content .ant-table-row:last-child td {
     border-bottom: 1px solid #e8e8e8;
 }
+.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr{
+    border-bottom: none;
+}
 .ant-table-pagination {
     position: absolute;
     bottom: 0;