From 2320fe5af5af90e66e4a7e51eaac450ae2c7f935 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 24 Nov 2016 23:08:58 +0800 Subject: [PATCH] add theme --- .babelrc | 8 - package.json | 90 +++--- src/components/dashboard/numberCard.less | 15 +- src/components/dashboard/sales.js | 19 ++ src/components/layout/common.less | 2 + src/components/layout/main.less | 13 +- src/components/skin.less | 11 + src/components/vars.less | 364 ++++++++++++----------- src/routes/app.js | 2 +- src/routes/dashboard.js | 15 +- src/theme.js | 7 + webpack.config.js | 38 +-- 12 files changed, 323 insertions(+), 261 deletions(-) delete mode 100644 .babelrc create mode 100644 src/components/dashboard/sales.js create mode 100644 src/components/skin.less create mode 100644 src/theme.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index c77c179..0000000 --- a/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "plugins": [ - ["import", { - "libraryName": "antd", - "style": "css" - }] - ] -} diff --git a/package.json b/package.json index c11c1eb..e1dbf38 100644 --- a/package.json +++ b/package.json @@ -1,44 +1,46 @@ -{ - "private": true, - "entry": { - "index": "./src/index.js" - }, - "dependencies": { - "antd": "^2.3.1", - "classnames": "^2.2.5", - "dva": "1.0.0", - "js-cookie": "^2.1.3", - "qs": "^6.2.0", - "react": "^15.1.0", - "react-dom": "^15.1.0" - }, - "devDependencies": { - "atool-build": "^0.7.6", - "babel-eslint": "^6.0.4", - "babel-plugin-dev-expression": "^0.2.1", - "babel-plugin-dva-hmr": "^0.1.0", - "babel-plugin-import": "^1.0.1", - "babel-plugin-transform-runtime": "^6.9.0", - "babel-runtime": "^6.9.2", - "dora": "0.3.x", - "dora-plugin-proxy": "^0.7.0", - "dora-plugin-webpack": "0.6.x", - "dora-plugin-webpack-hmr": "^0.1.0", - "eslint": "^2.13.1", - "eslint-config-airbnb": "^9.0.1", - "eslint-plugin-import": "^1.8.1", - "eslint-plugin-jsx-a11y": "^1.4.2", - "eslint-plugin-react": "^5.1.1", - "glob": "^7.0.5", - "mockjs": "^1.0.1-beta3", - "redbox-react": "^1.2.10", - "robe-ajax": "^1.0.0", - "watchjs": "^0.0.0" - }, - "scripts": { - "start": "dora --plugins \"proxy,webpack,webpack-hmr\"", - "dev": "dora --plugins \"webpack,webpack-hmr\"", - "lint": "eslint --fix --ext .js,.jsx src/components/layout", - "build": "atool-build" - } -} +{ + "private": true, + "entry": { + "index": "./src/index.js" + }, + "dependencies": { + "antd": "^2.3.1", + "classnames": "^2.2.5", + "dva": "1.0.0", + "js-cookie": "^2.1.3", + "qs": "^6.2.0", + "react": "^15.1.0", + "react-dom": "^15.1.0", + "recharts": "^0.19.0" + }, + "devDependencies": { + "atool-build": "^0.7.6", + "babel-eslint": "^6.0.4", + "babel-plugin-dev-expression": "^0.2.1", + "babel-plugin-dva-hmr": "^0.1.0", + "babel-plugin-import": "^1.0.1", + "babel-plugin-transform-runtime": "^6.9.0", + "babel-runtime": "^6.9.2", + "dora": "0.3.x", + "dora-plugin-proxy": "^0.7.0", + "dora-plugin-webpack": "0.6.x", + "dora-plugin-webpack-hmr": "^0.1.0", + "eslint": "^2.13.1", + "eslint-config-airbnb": "^9.0.1", + "eslint-plugin-import": "^1.8.1", + "eslint-plugin-jsx-a11y": "^1.4.2", + "eslint-plugin-react": "^5.1.1", + "glob": "^7.0.5", + "mockjs": "^1.0.1-beta3", + "redbox-react": "^1.2.10", + "robe-ajax": "^1.0.0", + "watchjs": "^0.0.0" + }, + "scripts": { + "start": "dora --plugins \"proxy,webpack,webpack-hmr\"", + "dev": "dora --plugins \"webpack,webpack-hmr\"", + "lint": "eslint --fix --ext .js,.jsx src/components/layout", + "build": "atool-build" + }, + "theme": "./src/theme.js" +} diff --git a/src/components/dashboard/numberCard.less b/src/components/dashboard/numberCard.less index 0f981ac..6daa31f 100644 --- a/src/components/dashboard/numberCard.less +++ b/src/components/dashboard/numberCard.less @@ -1,9 +1,16 @@ +@import "../vars.less"; .numberCard{ - box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.01); + box-shadow: @shadow-1; padding: 32px; font-family: monospace; background-color: #fff; margin-bottom: 24px; + cursor: pointer; + transition: @transition-ease-in; + &:hover{ + box-shadow: @shadow-2; + transform: translateY(-2px); + } .iconWarp{ font-size: 54px; float: left; @@ -26,9 +33,3 @@ } } } - -.text-overflow(){ - overflow: hidden; - text-overflow: ellipsis; - white-space:nowrap; -} diff --git a/src/components/dashboard/sales.js b/src/components/dashboard/sales.js new file mode 100644 index 0000000..4bf6cc7 --- /dev/null +++ b/src/components/dashboard/sales.js @@ -0,0 +1,19 @@ +import React, { PropTypes } from 'react' +import { Icon } from 'antd' +import styles from './numberCard.less' +import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts' + +function Sales(props) { + const { icon, color, title, number } = props + return ( +
+ +
+

{title || 'No Title'}

+

{number || '10,000'}

+
+
+ ) +} + +export default Sales diff --git a/src/components/layout/common.less b/src/components/layout/common.less index d964893..d840e7e 100644 --- a/src/components/layout/common.less +++ b/src/components/layout/common.less @@ -101,3 +101,5 @@ body { :global .ant-form-item-control{ vertical-align:middle; } + +@import "../skin.less"; diff --git a/src/components/layout/main.less b/src/components/layout/main.less index 0ea5ce6..9b23ea1 100644 --- a/src/components/layout/main.less +++ b/src/components/layout/main.less @@ -46,9 +46,9 @@ } .bread { - height: 48px; - line-height: 48px; - padding: 0 16px; + height: 64px; + line-height: 64px; + padding: 0 24px; margin-bottom: -24px; } @@ -59,15 +59,16 @@ height: 100vh; .container { - margin: 24px 16px; + margin: 24px; .content { - min-height: e("calc(100vh - 168px)"); + min-height: e("calc(100vh - 184px)"); position: relative; :global .content-inner{ background: #fff; padding: 24px; - min-height: e("calc(100vh - 168px)"); + box-shadow: @shadow-1; + min-height: e("calc(100vh - 184px)"); } } } diff --git a/src/components/skin.less b/src/components/skin.less new file mode 100644 index 0000000..8e6375a --- /dev/null +++ b/src/components/skin.less @@ -0,0 +1,11 @@ +@import "./vars.less"; +:global{ + .ant-card{ + box-shadow: @shadow-1; + transition: @transition-ease-in; + &:hover{ + box-shadow: @shadow-2; + transform: translateY(-2px); + } + } +} diff --git a/src/components/vars.less b/src/components/vars.less index 29ab682..a97a5cc 100644 --- a/src/components/vars.less +++ b/src/components/vars.less @@ -1,173 +1,191 @@ -@import "../../node_modules/antd/lib/style/themes/default.less"; -// // Prefix -// @ant-prefix : ant; -// -// // Color -// @primary-color : #2db7f5; -// @info-color : #2db7f5; -// @success-color : #87d068; -// @error-color : #f50; -// @warning-color : #fa0; -// @normal-color : #d9d9d9; -// -// // ------ Base & Require ------ -// @body-background : #fff; -// @font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; -// @code-family : Consolas,Menlo,Courier,monospace; -// @text-color : #666; -// @heading-color : #404040; -// @font-size-base : 12px; -// @line-height-base : 1.5; -// @line-height-computed : floor((@font-size-base * @line-height-base)); -// @border-radius-base : 6px; -// @border-radius-sm : 4px; -// -// // ICONFONT -// @iconfont-css-prefix : anticon; -// @icon-url : "https://at.alicdn.com/t/font_1473840929_824008"; -// -// // LINK -// @link-color : #2db7f5; -// @link-hover-color : tint(@link-color, 20%); -// @link-active-color : shade(@link-color, 5%); -// @link-hover-decoration : none; -// -// // Disabled cursor for form controls and buttons. -// @cursor-disabled : not-allowed; -// -// // Animation -// @ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); -// @ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); -// @ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); -// @ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); -// @ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); -// @ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); -// @ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); -// @ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); -// @ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); -// @ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); -// @ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); -// @ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); -// -// // Border color -// @border-color-base : #d9d9d9; // base border outline a component -// @border-color-split : #e9e9e9; // split border inside a component -// -// // Outline -// @outline-blur-size : 0; -// @outline-width : 2px; -// @outline-color : @primary-color; -// -// // Background color -// @background-color-base : #f7f7f7; // basic gray background -// -// // Shadow -// @shadow-color : rgba(100, 100, 100, .2); -// @box-shadow-base : @shadow-1-down; -// @shadow-1-up : 0 -1px 6px @shadow-color; -// @shadow-1-down : 0 1px 6px @shadow-color; -// @shadow-1-left : -1px 0 6px @shadow-color; -// @shadow-1-right : 1px 0 6px @shadow-color; -// @shadow-2 : 0 1px 8px @shadow-color; -// -// // Buttons -// @btn-font-weight : 500; -// @btn-border-radius-base : @border-radius-base; -// @btn-border-radius-sm : @border-radius-sm; -// -// @btn-primary-color : #fff; -// @btn-primary-bg : @primary-color; -// @btn-group-border : shade(@primary-color, 5%); -// -// @btn-default-color : @text-color; -// @btn-default-bg : @background-color-base; -// @btn-default-border : @border-color-base; -// -// @btn-ghost-color : @text-color; -// @btn-ghost-bg : transparent; -// @btn-ghost-border : @border-color-base; -// -// @btn-disable-color : #ccc; -// @btn-disable-bg : @background-color-base; -// @btn-disable-border : @border-color-base; -// -// @btn-padding-base : 4px 15px; -// -// @btn-font-size-lg : 14px; -// @btn-padding-lg : 4px 15px 5px 15px; -// -// @btn-padding-sm : 1px 7px; -// -// @btn-circle-size : 28px; -// @btn-circle-size-lg : 32px; -// @btn-circle-size-sm : 22px; -// -// // Media queries breakpoints -// // Extra small screen / phone -// @screen-xs : 480px; -// @screen-xs-min : @screen-xs; -// @screen-xs-max : (@screen-xs-min - 1); -// -// // Small screen / tablet -// @screen-sm : 768px; -// @screen-sm-min : @screen-sm; -// @screen-sm-max : (@screen-sm-min - 1); -// -// // Medium screen / desktop -// @screen-md : 992px; -// @screen-md-min : @screen-md; -// @screen-md-max : (@screen-md-min - 1); -// -// // Large screen / wide desktop -// @screen-lg : 1200px; -// @screen-lg-min : @screen-lg; -// @screen-lg-max : (@screen-lg-min - 1); -// -// // Layout and Grid system -// @grid-columns : 24; -// @grid-gutter-width : 0; -// -// // Container sizes -// @container-sm : (720px + @grid-gutter-width); -// @container-md : (940px + @grid-gutter-width); -// @container-lg : (1140px + @grid-gutter-width); -// -// // z-index list -// @zindex-affix : 10; -// @zindex-back-top : 10; -// @zindex-modal-mask : 1000; -// @zindex-modal : 1000; -// @zindex-notification : 1010; -// @zindex-message : 1010; -// @zindex-popover : 1030; -// @zindex-picker : 1050; -// @zindex-dropdown : 1050; -// @zindex-tooltip : 1060; -// -// // Form -// // -------------------------------- -// // Legend -// @legend-color : #999; -// @legend-border-color : @border-color-base; -// // Label -// @label-required-color : #f50; -// @label-color : @text-color; -// // Input -// @input-height-base: 28px; -// @input-height-lg: 32px; -// @input-height-sm: 22px; -// -// @input-padding-horizontal : 7px; -// @input-padding-vertical-base : 4px; -// @input-padding-vertical-sm : 1px; -// @input-padding-vertical-lg : 6px; -// -// @input-placeholder-color : #ccc; -// @input-color : @text-color; -// @input-border-color : @border-color-base; -// @input-bg : #fff; -// -// @input-hover-border-color : @primary-color; -// @input-disabled-bg : @background-color-base; -// -// @form-item-margin-bottom : 24px; +// @import "../../node_modules/antd/lib/style/themes/default.less"; +// Prefix +@ant-prefix : ant; + +// Color +@primary-color : #2db7f5; +@info-color : #2db7f5; +@success-color : #87d068; +@error-color : #f50; +@warning-color : #fa0; +@normal-color : #d9d9d9; + +// ------ Base & Require ------ +@body-background : #fff; +@font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; +@code-family : Consolas,Menlo,Courier,monospace; +@text-color : #666; +@heading-color : #404040; +@font-size-base : 12px; +@line-height-base : 1.5; +@line-height-computed : floor((@font-size-base * @line-height-base)); +@border-radius-base : 6px; +@border-radius-sm : 4px; + +// ICONFONT +@iconfont-css-prefix : anticon; +@icon-url : "https://at.alicdn.com/t/font_1473840929_824008"; + +// LINK +@link-color : #2db7f5; +@link-hover-color : tint(@link-color, 20%); +@link-active-color : shade(@link-color, 5%); +@link-hover-decoration : none; + +// Disabled cursor for form controls and buttons. +@cursor-disabled : not-allowed; + +// Animation +@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); +@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); +@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); +@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); +@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); +@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); +@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); +@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); +@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); + +// Border color +@border-color-base : #d9d9d9; // base border outline a component +@border-color-split : #e9e9e9; // split border inside a component + +// Outline +@outline-blur-size : 0; +@outline-width : 2px; +@outline-color : @primary-color; + +// Background color +@background-color-base : #f7f7f7; // basic gray background + +// Shadow +@shadow-color : rgba(100, 100, 100, .2); +@box-shadow-base : @shadow-1-down; +@shadow-1-up : 0 -1px 6px @shadow-color; +@shadow-1-down : 0 1px 6px @shadow-color; +@shadow-1-left : -1px 0 6px @shadow-color; +@shadow-1-right : 1px 0 6px @shadow-color; +@shadow-2 : 0 1px 8px @shadow-color; + +// Buttons +@btn-font-weight : 500; +@btn-border-radius-base : @border-radius-base; +@btn-border-radius-sm : @border-radius-sm; + +@btn-primary-color : #fff; +@btn-primary-bg : @primary-color; +@btn-group-border : shade(@primary-color, 5%); + +@btn-default-color : @text-color; +@btn-default-bg : @background-color-base; +@btn-default-border : @border-color-base; + +@btn-ghost-color : @text-color; +@btn-ghost-bg : transparent; +@btn-ghost-border : @border-color-base; + +@btn-disable-color : #ccc; +@btn-disable-bg : @background-color-base; +@btn-disable-border : @border-color-base; + +@btn-padding-base : 4px 15px; + +@btn-font-size-lg : 14px; +@btn-padding-lg : 4px 15px 5px 15px; + +@btn-padding-sm : 1px 7px; + +@btn-circle-size : 28px; +@btn-circle-size-lg : 32px; +@btn-circle-size-sm : 22px; + +// Media queries breakpoints +// Extra small screen / phone +@screen-xs : 480px; +@screen-xs-min : @screen-xs; +@screen-xs-max : (@screen-xs-min - 1); + +// Small screen / tablet +@screen-sm : 768px; +@screen-sm-min : @screen-sm; +@screen-sm-max : (@screen-sm-min - 1); + +// Medium screen / desktop +@screen-md : 992px; +@screen-md-min : @screen-md; +@screen-md-max : (@screen-md-min - 1); + +// Large screen / wide desktop +@screen-lg : 1200px; +@screen-lg-min : @screen-lg; +@screen-lg-max : (@screen-lg-min - 1); + +// Layout and Grid system +@grid-columns : 24; +@grid-gutter-width : 0; + +// Container sizes +@container-sm : (720px + @grid-gutter-width); +@container-md : (940px + @grid-gutter-width); +@container-lg : (1140px + @grid-gutter-width); + +// z-index list +@zindex-affix : 10; +@zindex-back-top : 10; +@zindex-modal-mask : 1000; +@zindex-modal : 1000; +@zindex-notification : 1010; +@zindex-message : 1010; +@zindex-popover : 1030; +@zindex-picker : 1050; +@zindex-dropdown : 1050; +@zindex-tooltip : 1060; + +// Form +// -------------------------------- +// Legend +@legend-color : #999; +@legend-border-color : @border-color-base; +// Label +@label-required-color : #f50; +@label-color : @text-color; +// Input +@input-height-base: 28px; +@input-height-lg: 32px; +@input-height-sm: 22px; + +@input-padding-horizontal : 7px; +@input-padding-vertical-base : 4px; +@input-padding-vertical-sm : 1px; +@input-padding-vertical-lg : 6px; + +@input-placeholder-color : #ccc; +@input-color : @text-color; +@input-border-color : @border-color-base; +@input-bg : #fff; + +@input-hover-border-color : @primary-color; +@input-disabled-bg : @background-color-base; + +@form-item-margin-bottom : 24px; + +/*========================*/ +/*=======Antd Admin=======*/ +/*========================*/ + +// Shadow +@shadow-1 : 4px 4px 20px 0 rgba(0,0,0,0.01); +@shadow-2 : 4px 4px 40px 0 rgba(0,0,0,0.05); + +//transition +@transition-ease-in : all .3s @ease-in; + +//mix +.text-overflow(){ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/routes/app.js b/src/routes/app.js index 4d5df1e..372ed56 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -9,8 +9,8 @@ import Sider from '../components/layout/sider' import styles from '../components/layout/main.less' import '../components/layout/common.less' import {Spin,message} from 'antd' + function App({children, location, dispatch, app}) { - console.log(children); const {login, loading, loginButtonLoading, user} = app const loginProps = { loading, diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js index a041255..e18289f 100644 --- a/src/routes/dashboard.js +++ b/src/routes/dashboard.js @@ -1,12 +1,10 @@ import React, {PropTypes} from 'react' import {Link} from 'dva/router' -import {Row, Col, Icon} from 'antd' +import {Row, Col, Icon, Card} from 'antd' import NumberCard from '../components/dashboard/numberCard' +import Sales from '../components/dashboard/sales' -const [colorGreen, - colorBlue, - colorPurple, - colorRed] = ['#64ea91', '#8fc9fb', '#d897eb', '#f69899'] +const [colorGreen,colorBlue,colorPurple,colorRed] = ['#64ea91', '#8fc9fb', '#d897eb', '#f69899'] const numberCardData = [ { @@ -44,6 +42,13 @@ function Dashboard() { {numberCards} + + + + + + + ) } diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000..7c025a3 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,7 @@ +module.exports = () => { + return { + '@primary-color': '#1DA57A', + '@link-color': '#1DA57A', + '@border-radius-base': '2px', + }; +}; diff --git a/webpack.config.js b/webpack.config.js index f861251..4b8fe8f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,41 +1,45 @@ -const fs = require('fs'); -const path = require('path'); +const fs = require('fs') +const path = require('path') module.exports = function(webpackConfig, env) { - webpackConfig.babel.plugins.push('transform-runtime'); + webpackConfig.babel.plugins.push('transform-runtime') + webpackConfig.babel.plugins.push(['import', { + libraryName: 'antd', + style: true, + }]) // Support hmr if (env === 'development') { - webpackConfig.devtool = '#eval'; + webpackConfig.devtool = '#eval' webpackConfig.babel.plugins.push(['dva-hmr', { entries: [ './src/index.js', ], - }]); + }]) } else { - webpackConfig.babel.plugins.push('dev-expression'); + webpackConfig.babel.plugins.push('dev-expression') } // Support CSS Modules // Parse all less files as css module. webpackConfig.module.loaders.forEach(function(loader, index) { if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) { - loader.include = /node_modules/; - loader.test = /\.less$/; + loader.include = /node_modules/ + loader.test = /\.less$/ } if (loader.test.toString() === '/\\.module\\.less$/') { - loader.exclude = /node_modules/; - loader.test = /\.less$/; + loader.exclude = /node_modules/ + loader.test = /\.less$/ } if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) { - loader.include = /node_modules/; - loader.test = /\.css$/; + loader.include = /node_modules/ + loader.test = /\.css$/ } if (loader.test.toString() === '/\\.module\\.css$/') { - loader.exclude = /node_modules/; - loader.test = /\.css$/; + loader.exclude = /node_modules/ + loader.test = /\.css$/ } - }); + }) - return webpackConfig; -}; + return webpackConfig +}