主题抽离初步调整

kanban-client/app/assets/Form/index.css

@@ -1,13 +1,3 @@
-html,
-body,
-#root {
-  height: 100%;
-  font-size: 16px;
-  overflow: hidden;
-}
-#root {
-  background-color: #2f2e2c;
-}
 .rc-form {
   height: 100%;
   overflow: hidden;

kanban-client/app/assets/Form/index.less

@@ -1,12 +1,3 @@
-html,body,#root{
-    height: 100%;
-    font-size: 16px;
-    overflow: hidden;
-}
-#root {
-    background-color: #2f2e2c;
-}
-
 @prefixCls: rc-form;
 
 .@{prefixCls} {

kanban-client/app/assets/Table/index.css

@@ -1,15 +1,54 @@
+.default .rc-table {
+  color: #676a6c;
+}
+.default .rc-table-thead {
+  background-color: #ffffff;
+  border-bottom: 2px solid #e4eaec;
+}
+.default .rc-table-thead th {
+  border-color: #e4eaec;
+  font-weight: normal;
+}
+.default .rc-table-body .rc-table-row {
+  border-color: #e4eaec;
+  background-color: #ffffff;
+}
+.default .rc-table-body .rc-table-row td {
+  border-color: #e4eaec;
+}
+.default .rc-table-body .rc-table-row:nth-child(even) {
+  background-color: #f9f9f9;
+}
+.dark .rc-table {
+  color: #010101;
+}
+.dark .rc-table-thead {
+  color: #ffffff;
+  background-color: #010101;
+}
+.dark .rc-table .rc-table-row {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.macarons .rc-table {
+  color: #010101;
+}
+.macarons .rc-table-thead {
+  color: #ffffff;
+  background-color: #010101;
+}
+.macarons .rc-table .rc-table-row {
+  color: #ffffff;
+  border-color: #ffffff;
+}
 .rc-table {
   height: 100%;
-  color: white;
 }
 .rc-table-main {
   width: 100%;
   border-collapse: collapse;
   text-align: center;
 }
-.rc-table-thead {
-  background-color: #010101;
-}
 .rc-table-header-item {
   font-weight: bold;
 }
@@ -32,10 +71,11 @@
 .rc-table th,
 .rc-table td {
   text-align: left;
-  padding-left: 5px;
+  padding: 8px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  border: 1px solid white;
+  border-width: 1px;
+  border-style: solid;
   box-sizing: border-box;
 }

kanban-client/app/assets/Table/index.less

@@ -1,8 +1,8 @@
+@import url('theme.less');
 @prefixCls: rc-table;
 
 .@{prefixCls} {
     height: 100%;
-    color: white;
 }
 
 .@{prefixCls}-main {
@@ -12,10 +12,6 @@
     text-align: center;
 }
 
-.@{prefixCls}-thead {
-    background-color: #010101;
-}
-
 .@{prefixCls}-header-item {
     // font-size: 1rem;
     font-weight: bold;
@@ -40,11 +36,12 @@
     }
     th, td {
         text-align: left;
-        padding-left: 5px;
+        padding: 8px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        border: 1px solid white;
+        border-width: 1px;
+        border-style: solid;
         box-sizing: border-box;
     }
   }

kanban-client/app/assets/Table/theme.css

@@ -0,0 +1,43 @@
+.default .rc-table {
+  color: #676a6c;
+}
+.default .rc-table-thead {
+  background-color: #ffffff;
+  border-bottom: 2px solid #e4eaec;
+}
+.default .rc-table-thead th {
+  border-color: #e4eaec;
+  font-weight: bold;
+}
+.default .rc-table-body .rc-table-row {
+  border-color: #e4eaec;
+  background-color: #ffffff;
+}
+.default .rc-table-body .rc-table-row td {
+  border-color: #e4eaec;
+}
+.default .rc-table-body .rc-table-row:nth-child(even) {
+  background-color: #f9f9f9;
+}
+.dark .rc-table {
+  color: #010101;
+}
+.dark .rc-table-thead {
+  color: #ffffff;
+  background-color: #010101;
+}
+.dark .rc-table .rc-table-row {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.macarons .rc-table {
+  color: #010101;
+}
+.macarons .rc-table-thead {
+  color: #ffffff;
+  background-color: #010101;
+}
+.macarons .rc-table .rc-table-row {
+  color: #ffffff;
+  border-color: #ffffff;
+}

kanban-client/app/assets/Table/theme.less

@@ -0,0 +1,58 @@
+@prefixCls: rc-table;
+
+.default {
+    .@{prefixCls} {
+        color: #676a6c;
+    }
+    .@{prefixCls}-thead {
+        background-color: #ffffff;
+        border-bottom: 2px solid #e4eaec;
+        th {
+            border-color: #e4eaec;
+            font-weight: bold;
+        }
+    }
+    .@{prefixCls}-body {
+        .rc-table-row {
+            border-color: #e4eaec;
+            background-color: #ffffff;
+            td {
+                border-color: #e4eaec;
+            }
+        }
+        .rc-table-row:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+    }
+    
+}
+.dark {
+    .@{prefixCls} {
+        color: #010101;
+    }
+    .@{prefixCls}-thead {
+        color: #ffffff;
+        background-color: #010101;
+    }
+    .@{prefixCls} {
+        .rc-table-row {
+            color: #ffffff;
+            border-color: #ffffff;
+        }
+      }
+}
+.macarons {
+    .@{prefixCls} {
+        color: #010101;
+    }
+    .@{prefixCls}-thead {
+        color: #ffffff;
+        background-color: #010101;
+    }
+    .@{prefixCls} {
+        .rc-table-row {
+            color: #ffffff;
+            border-color: #ffffff;
+        }
+      }
+}

kanban-client/app/assets/layoutStyle.css

@@ -50,9 +50,6 @@
 #content {
   width: 100%;
 }
-.react-grid-layout {
-  background: #2f2e2c;
-}
 .layoutJSON {
   background: #ddd;
   border: 1px solid black;
@@ -68,8 +65,7 @@
   box-sizing: content-box;
 }
 .react-grid-item:not(.react-grid-placeholder) {
-  background: #2f2e2c;
-  border: 1px solid black;
+  border: 1px solid #d0d0d0;
 }
 .react-grid-item.resizing {
   opacity: 0.9;

kanban-client/app/assets/root.css

@@ -0,0 +1,17 @@
+html,
+body,
+#root {
+  height: 100%;
+  font-size: 16px;
+  overflow: hidden;
+}
+.main-theme-default {
+  background-color: #ffffff;
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.main-theme-dark {
+  background-color: #2f2e2c;
+}
+.main-theme-macarons {
+  background-color: #f1f1f1;
+}

kanban-client/app/assets/root.less

@@ -0,0 +1,15 @@
+html,body,#root{
+    height: 100%;
+    font-size: 16px;
+    overflow: hidden;
+}
+.main-theme-default {
+    background-color: #ffffff;
+    font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+.main-theme-dark {
+    background-color: #2f2e2c;
+}
+.main-theme-macarons {
+    background-color: #f1f1f1;
+}

kanban-client/app/component/Layout.dev.js

@@ -5,7 +5,7 @@ var ReactGridLayout = WidthProvider(require('react-grid-layout'));
 import '../assets/layoutStyle.css';
 
 import Form from '../src/Form/index.dev.js';
-import Table from './Table.dev.jsx';
+import Table from './ScrollTable.dev.jsx';
 import Charts from '../src/Charts/ECharts.dev.js';
 
 
@@ -38,16 +38,16 @@ class BasicLayout extends React.Component {
 
   // 创建div元素
   generateDOM() {
-    const { items } = this.newProps;
+    const { items, theme } = this.newProps;
 
     return items.map(function (item, i) {
       let { type, config } = item;
       if (type == 'form') {
-        return (<div key={i}><Form {...config} /></div>);
+        return (<div key={i}><Form theme = {theme} {...config} /></div>);
       } else if (type == 'table') {
-        return (<div key={i}><Table {...config} /></div>);
+        return (<div key={i}><Table theme = {theme} {...config} /></div>);
       } else if (type == 'charts') {
-        return <div key={i}><Charts {...config} /></div>
+        return <div key={i}><Charts theme = {theme} {...config} /></div>
       } else {
         return (<div key={i}><span className="text">{i}</span></div>);
       }

kanban-client/app/component/ScrollTable.dev.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Table from '../src/Table/index.js';
+import Animate from 'rc-animate';
+import {isEqual} from '../utils/BaseUtils.js';
+import '../assets/Table/index.less';
+import '../assets/Table/animation.less';
+import {sort} from '../utils/BaseUtils.js';
+
+class TableModel extends React.Component {
+	constructor(props) {
+		super(props);
+		this.newProps = props;
+        this.columns = this.setColumnsRender(props.columns);
+		this.state = {
+			data: []
+		};
+		this.sorts = []; // 排序规则
+	}
+	// 初始化检索columns，获得排序规则
+	initSort() {
+		// 先重置
+		this.sorts = [];
+
+		let cols = this.columns;
+		let i = 0;
+		for (i; i < cols.length; i++) {
+			let col = cols[i];
+			if (Math.abs(col['sort']) > 0) {
+				this.sorts.push({
+					sortKey: col['dataIndex'],
+					sortLevel: Math.abs(col['sort']), // 仅用于规则排序
+					direction: col['sort'] > 0 ? 1 : -1
+				});
+			}
+		}
+		// 把排序规则排序
+		sort(this.sorts, [{ key: 'sortLevel', direction: 1 }]);
+	}
+	// 根据sort值分层排序data
+	sortData(data) {
+		let sortArray = this.sorts.map(function (s, i) {
+			return {
+				key: s.sortKey,
+				direction: s.direction
+			};
+		});
+		if (sortArray) { }
+		let sortData = sort(data || [], sortArray);
+		return sortData;
+	}
+	// 根据renderName设置每列的render
+	setColumnsRender(columns) {
+		let cols = columns;
+		// 如果需要增加序号列
+		if (this.newProps.index) {
+			cols.unshift({
+				key: 'index',
+				title: '序号',
+				render: function(v,r,i) {
+					return {
+						children: i+1, 
+						props: {}
+					}
+				}
+			})
+		}
+		// 根据render方法名获得对应方法实体
+		for (let i = 0; i < cols.length; i++) {
+			let col = cols[i];
+			let renderFunction = col.render ? col.render : this.newProps.render ? this.newProps.render : function (_v, _r, _i) { return { children: _v, props: {} } };
+			col.render = renderFunction;
+		}
+		return cols;
+	}
+	componentWillMount() {
+	}
+	componentDidMount() {
+		this.initSort();
+		this.setState({
+            data: this.sortData(this.newProps.data)
+        });
+	}
+	componentWillUnmount() {
+	}
+	componentWillReceiveProps(nextProps) {
+		if (isEqual(nextProps.data, this.newProps.data)) {
+			return;
+		}
+		this.newProps = nextProps;
+		this.columns = this.setColumnsRender(this.newProps.columns);
+        this.initSort();
+        this.setState({
+            data: this.sortData(this.newProps.data)
+        });
+	}
+
+	shouldComponentUpdate(nextProps, nextState) {
+		return true;
+	}
+	getBodyWrapper(body) {
+		return (
+			<Animate transitionName="fade" component="tbody" className={body.props.className}
+				transitionAppear={true}
+				transitionLeave={true}
+			>
+				{body.props.children}
+			</Animate>
+		);
+	}
+
+	getTitle() {
+		const { title } = this.newProps;
+		return title;
+	}
+
+	render() {
+		const { fontSize } = this.newProps;
+		return (
+			<div ref='body' style={{ width: '100%', height: '100%', overflowX: 'hidden', overflowY: 'scroll', padding: '0px' }}>
+				<Table
+					title={this.getTitle()}
+					emptyText={this.newProps.emptyText || 'No Data'}
+					columns={this.columns || []}
+					data={this.state.data || []}
+					getBodyWrapper={this.getBodyWrapper}
+					headerRowsStyle={this.newProps.headerRowsStyle}
+					rowsStyle={this.newProps.rowsStyle}
+					scroll={{y: 400 }}
+				/>
+			</div>
+		);
+	}
+}
+export default TableModel;

kanban-client/app/component/Table.dev.jsx

@@ -58,7 +58,12 @@ class TableModel extends React.Component {
 			cols.unshift({
 				key: 'index',
 				title: '序号',
-				render: 'index_render'
+				render: function(v,r,i) {
+					return {
+						children: i+1, 
+						props: {}
+					}
+				}
 			})
 		}
 		// 根据render方法名获得对应方法实体

kanban-client/app/component/factory.dev.js

@@ -5,7 +5,7 @@ import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import { converter } from './converter.dev.js';
 import URL from '../constants/url.dev.json';
 
-import tempdata from '../data/bug1.json';
+import tempdata from '../data/testtable.json';
 
 class Factory extends React.Component {
 
@@ -16,7 +16,8 @@ class Factory extends React.Component {
         this.state = {
             titleHeight: 0,
             error: null,
-            firstRequestTime: new Date()
+            firstRequestTime: new Date(),
+            theme: 'default'
         };
     }
 
@@ -158,7 +159,8 @@ class Factory extends React.Component {
     }
 
     render() {
-        let { titleHeight, model, error } = this.state;
+        let { theme, titleHeight, model, error } = this.state;
+        theme = theme || 'default';
         if (this.state.error) {
             return <MessageBox static={this.props.static} titleHeight={titleHeight} error={error} />
         }
@@ -176,9 +178,9 @@ class Factory extends React.Component {
         const staticC = {
         }
         return (
-            <div ref='body'>
+            <div ref='body' className={`main-theme-${theme}`}>
                 <Title static={staticC} setTitleHeight={this.setTitleHeight.bind(this)} {...titleConfig} />
-                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
+                <Container className={theme} theme={theme} static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
             </div>
         );
     }

kanban-client/app/data/testtable.json

@@ -327,10 +327,9 @@
                                     "title": "备注"
                                 }
                             ],
-                            "pagesize": 0,
+                            "pagesize": 11,
                             "interval": 0,
-                            "title": {},
-                            "headerrowsstyle": "{\"color\":\"#FFFF00\"}"
+                            "title": {}
                         }
                     }
                 ]

kanban-client/app/main.dev.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Factory from './component/factory.dev.js';
 import DateFormatter from './utils/DateTimeUtils.js';
+import '../app/assets/root.less';
 
 var code = '63B27949A17';
 

kanban-client/app/src/Charts/ECharts.dev.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {isEqual} from '../../utils/BaseUtils.js';
 import ReactEcharts from 'echarts-for-react';
 import reset from './ResetCharts.js';
-import {dark} from './Theme/Theme.js';
+import {themList} from './Theme/Theme.js';
 
 export class ReactEchart extends React.Component {
     constructor(props) {
@@ -16,7 +16,7 @@ export class ReactEchart extends React.Component {
     }
 
     static defaultProps = {
-        theme: 'dark',
+        theme: 'default',
         showCount: 0
     }
     

kanban-client/app/src/Charts/Theme/Theme.js

@@ -1,3 +1,11 @@
 import dark from './dark.js';
+import macarons from './macarons.js';
+import shine from './shine.js';
 
-export {dark};
+let themList = {
+    dark,
+    macarons,
+    shine
+}
+
+export {themList};

kanban-client/app/src/Charts/Theme/macarons.js

@@ -0,0 +1,198 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));

kanban-client/app/src/Charts/Theme/shine.js

@@ -0,0 +1,157 @@
+(function (root, factory) {if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#c12e34','#e6b600','#0098d9','#2b821d',
+        '#005eaa','#339ca8','#cda819','#32a487'
+    ];
+
+    var theme = {
+
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+
+        visualMap: {
+            color:['#1790cf','#a2d4e6']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: '#06467c'
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(0,0,0,0.6)'
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#dedede',
+            fillerColor: 'rgba(154,217,247,0.2)',
+            handleColor: '#005eaa'
+        },
+
+        timeline: {
+            lineStyle: {
+                color: '#005eaa'
+            },
+            controlStyle: {
+                normal: {
+                    color: '#005eaa',
+                    borderColor: '#005eaa'
+                }
+            }
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#c12e34',
+                    color0: '#2b821d',
+                    lineStyle: {
+                        width: 1,
+                        color: '#c12e34',
+                        color0: '#2b821d'
+                    }
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#c12e34'
+                    }
+                },
+                emphasis: {
+                    textStyle: {
+                        color: '#c12e34'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#e6b600'
+                }
+            }
+        },
+
+        gauge: {
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: [[0.2, '#2b821d'],[0.8, '#005eaa'],[1, '#c12e34']],
+                    width: 5
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length:8,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            axisLabel: {
+                textStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length: 12,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer: {
+                length: '90%',
+                width: 3,
+                color: 'auto'
+            },
+            title: {
+                textStyle: {
+                    color: '#333'
+                }
+            },
+            detail: {
+                textStyle: {
+                    color: 'auto'
+                }
+            }
+        }
+    };
+    echarts.registerTheme('shine', theme);
+}));