导航样式微调

src/components/chart/list.jsx

@@ -50,6 +50,7 @@ class ChartList extends React.Component {
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = chart.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
+        console.log(chart.filterLabel,filterLabel);
 
         const operationMenu = (
             <Menu className='menu-operation'>
@@ -105,7 +106,20 @@ class ChartList extends React.Component {
                                 <img alt='' style={{ height: '100px', marginTop: '10%' }} src='https://test-feapp.oss-cn-beijing.aliyuncs.com/feapp/master_a_20180711/images/chart/empty_column_chart.svg'></img>
                             </Row>
                             <Row className='desc'>
-                                <Ellipsis tooltip={l.description.length > 16} lines={2}>{l.description}</Ellipsis>
+                                <Ellipsis tooltip={l.description.length > 16} lines={2}>{
+                                    <span>
+                                    { 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>
                             </Row>
                             <Row className='footer' type='flex' justify='end' align='bottom'>
                                 <Col style={{ textAlign: 'left' }} span={22}>

src/components/chartDesigner/charts/resolveChartOption.js

@@ -1,7 +1,7 @@
 export default (config) => {
     const { viewType, data } = config;
     console.log(viewType);
-    let option = {}
+    let option;
     switch(viewType) {
         case 'bar': {
             option = barConfig(data ? data.data: {});
@@ -20,6 +20,8 @@ export default (config) => {
             break;
         }
         default:{
+            option = {};
+            break;
         }
     }
     return option;

src/components/common/navigator.jsx

@@ -3,6 +3,7 @@ import { Menu, Icon } from 'antd'
 import { Link } from 'react-router-dom'
 import { connect } from 'dva'
 import '../../models/main'
+import './navigator.less'
 
 class Navigator extends React.Component {
     constructor(props) {
@@ -20,20 +21,20 @@ class Navigator extends React.Component {
             selectedKeys={[main.currentPage]}
             mode="horizontal"
         >     
-            <Menu.Item key="home">
+            <Menu.Item className='nav-page' key="home">
                 <Link to='/home'><Icon type="home" />我的</Link>
             </Menu.Item>
-            <Menu.Item key="dashboard">
+            <Menu.Item className='nav-page' key="dashboard">
                 <Link to='/dashboard'><Icon type="desktop" />报告与看板</Link>
             </Menu.Item>
-            <Menu.Item key="chart">
+            <Menu.Item className='nav-page' key="chart">
                 <Link to='/chart'><Icon type="area-chart" />图表</Link>
             </Menu.Item>
-            <Menu.Item key="datasource">
+            <Menu.Item className='nav-page' key="datasource">
                 <Link to='/datasource'><Icon type="database" />数据源</Link>
             </Menu.Item>
-            <Menu.Item key="modeling">
-                <Icon type="tool" />建模分析
+            <Menu.Item className='nav-page' key="modeling">
+                <Link to='#'><Icon type="tool" />建模分析</Link>
             </Menu.Item>
         </Menu>
     }

src/components/common/navigator.less

@@ -0,0 +1,34 @@
+.navigator-menu {
+    .nav-page {
+        border-bottom: none !important;
+        .hover {
+            ::after {
+                width: calc(100% - 8px);
+            }
+        }
+        ::after {
+            content: ' ';
+            display: block;
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 0;
+            height: 2px;
+            margin: -2px auto;
+            box-shadow: inset 0 2px #1890ff;
+            transition: width .25s cubic-bezier(0.31, 0.93, 1, 1);
+        }
+    }
+    .ant-menu-item-selected {
+        ::after {
+            width: calc(100% - 8px);
+            box-shadow: inset 0 2px #1890ff;
+        }
+    }
+    .ant-menu-item-active {
+        ::after {
+            width: calc(100% - 8px);
+        }
+    }
+}

src/models/chart.js

@@ -111,7 +111,7 @@ export default {
                             type: d.chartType,
                             creator: d.createBy,
                             createTime: d.createDate,
-                            description: d.describes
+                            description: d.describes || ''
                         }
                     })
                     yield put({ type: 'list', list: list });