feat: add poetry

This commit is contained in:
Tristan 2019-09-21 14:31:31 +08:00
parent 2066b61d1f
commit 4f5a62c8f1
12 changed files with 159 additions and 80 deletions

77
package-lock.json generated
View File

@ -1309,7 +1309,7 @@
},
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz",
"resolved": "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
"dev": true
}
@ -2356,7 +2356,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@ -2369,7 +2369,7 @@
},
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",
"resolved": "http://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
"dev": true
},
@ -3035,7 +3035,7 @@
},
"camelcase-keys": {
"version": "4.2.0",
"resolved": "https://registry.npm.taobao.org/camelcase-keys/download/camelcase-keys-4.2.0.tgz?cache=0&sync_timestamp=1564587881114&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase-keys%2Fdownload%2Fcamelcase-keys-4.2.0.tgz",
"resolved": "https://registry.npm.taobao.org/camelcase-keys/download/camelcase-keys-4.2.0.tgz",
"integrity": "sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=",
"dev": true,
"requires": {
@ -3757,7 +3757,7 @@
},
"dargs": {
"version": "4.1.0",
"resolved": "https://registry.npm.taobao.org/dargs/download/dargs-4.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdargs%2Fdownload%2Fdargs-4.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/dargs/download/dargs-4.1.0.tgz",
"integrity": "sha1-A6nbtLXC8Tm/FK5T8LiipqhvThc=",
"dev": true,
"requires": {
@ -3809,7 +3809,7 @@
"dependencies": {
"map-obj": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/map-obj/download/map-obj-1.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmap-obj%2Fdownload%2Fmap-obj-1.0.1.tgz",
"resolved": "https://registry.npm.taobao.org/map-obj/download/map-obj-1.0.1.tgz",
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
"dev": true
}
@ -3849,7 +3849,7 @@
},
"default-gateway": {
"version": "4.2.0",
"resolved": "https://registry.npm.taobao.org/default-gateway/download/default-gateway-4.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdefault-gateway%2Fdownload%2Fdefault-gateway-4.2.0.tgz",
"resolved": "https://registry.npm.taobao.org/default-gateway/download/default-gateway-4.2.0.tgz",
"integrity": "sha1-FnEEx1AMIRX23WmwpTa7jtcgVSs=",
"dev": true,
"requires": {
@ -4089,7 +4089,7 @@
},
"dot-prop": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/dot-prop/download/dot-prop-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdot-prop%2Fdownload%2Fdot-prop-3.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/dot-prop/download/dot-prop-3.0.0.tgz?cache=0&sync_timestamp=1559892335353&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdot-prop%2Fdownload%2Fdot-prop-3.0.0.tgz",
"integrity": "sha1-G3CK8JSknJoOfbyteQq6U52sEXc=",
"dev": true,
"requires": {
@ -4815,7 +4815,7 @@
},
"faye-websocket": {
"version": "0.11.3",
"resolved": "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.11.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffaye-websocket%2Fdownload%2Ffaye-websocket-0.11.3.tgz",
"resolved": "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.11.3.tgz",
"integrity": "sha1-XA6aiWjokSwoZjn96XeosgnyUI4=",
"dev": true,
"requires": {
@ -6444,7 +6444,7 @@
},
"import-local": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/import-local/download/import-local-2.0.0.tgz",
"resolved": "http://registry.npm.taobao.org/import-local/download/import-local-2.0.0.tgz",
"integrity": "sha1-VQcL44pZk88Y72236WH1vuXFoJ0=",
"dev": true,
"requires": {
@ -6454,7 +6454,7 @@
"dependencies": {
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-up%2Fdownload%2Ffind-up-3.0.0.tgz",
"integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
"dev": true,
"requires": {
@ -6984,6 +6984,11 @@
}
}
},
"jinrishici": {
"version": "1.0.6",
"resolved": "https://registry.npm.taobao.org/jinrishici/download/jinrishici-1.0.6.tgz",
"integrity": "sha1-Hz4SWd5eiJzhurAPEYJIx8NGvZg="
},
"js-levenshtein": {
"version": "1.1.6",
"resolved": "http://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz",
@ -7649,7 +7654,7 @@
},
"map-obj": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/map-obj/download/map-obj-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmap-obj%2Fdownload%2Fmap-obj-2.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/map-obj/download/map-obj-2.0.0.tgz",
"integrity": "sha1-plzSkIepJZi4eRJXpSPgISIqwfk=",
"dev": true
},
@ -7692,7 +7697,7 @@
"dependencies": {
"mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/mimic-fn/download/mimic-fn-2.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmimic-fn%2Fdownload%2Fmimic-fn-2.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/mimic-fn/download/mimic-fn-2.1.0.tgz",
"integrity": "sha1-ftLCzMyvhNP/y3pptXcR/CCDQBs=",
"dev": true
}
@ -8485,7 +8490,7 @@
},
"os-locale": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/os-locale/download/os-locale-3.1.0.tgz?cache=0&sync_timestamp=1560274285880&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fos-locale%2Fdownload%2Fos-locale-3.1.0.tgz",
"resolved": "http://registry.npm.taobao.org/os-locale/download/os-locale-3.1.0.tgz",
"integrity": "sha1-qAKm7hfyTBBIOrmTVxnO9O0Wvxo=",
"dev": true,
"requires": {
@ -8805,7 +8810,7 @@
"dependencies": {
"async": {
"version": "1.5.2",
"resolved": "https://registry.npm.taobao.org/async/download/async-1.5.2.tgz?cache=0&sync_timestamp=1563385399810&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync%2Fdownload%2Fasync-1.5.2.tgz",
"resolved": "https://registry.npm.taobao.org/async/download/async-1.5.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync%2Fdownload%2Fasync-1.5.2.tgz",
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
"dev": true
}
@ -9207,7 +9212,7 @@
},
"@nodelib/fs.stat": {
"version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz",
"resolved": "https://registry.npm.taobao.org/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40nodelib%2Ffs.stat%2Fdownload%2F%40nodelib%2Ffs.stat-1.1.3.tgz",
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
"dev": true
},
@ -9254,7 +9259,7 @@
},
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-up%2Fdownload%2Ffind-up-3.0.0.tgz",
"integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
"dev": true,
"requires": {
@ -9278,7 +9283,7 @@
},
"ignore": {
"version": "3.3.10",
"resolved": "https://registry.npm.taobao.org/ignore/download/ignore-3.3.10.tgz",
"resolved": "https://registry.npm.taobao.org/ignore/download/ignore-3.3.10.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fignore%2Fdownload%2Fignore-3.3.10.tgz",
"integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=",
"dev": true
},
@ -9422,7 +9427,7 @@
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fread-pkg%2Fdownload%2Fread-pkg-3.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-3.0.0.tgz",
"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true,
"requires": {
@ -9956,7 +9961,7 @@
"dependencies": {
"http-errors": {
"version": "1.6.3",
"resolved": "https://registry.npm.taobao.org/http-errors/download/http-errors-1.6.3.tgz",
"resolved": "http://registry.npm.taobao.org/http-errors/download/http-errors-1.6.3.tgz",
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
"dev": true,
"requires": {
@ -9968,7 +9973,7 @@
},
"setprototypeof": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.1.0.tgz",
"resolved": "http://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.1.0.tgz",
"integrity": "sha1-0L2FU2iHtv58DYGMuWLZ2RxU5lY=",
"dev": true
}
@ -10920,7 +10925,7 @@
},
"webpack-sources": {
"version": "1.4.3",
"resolved": "https://registry.npm.taobao.org/webpack-sources/download/webpack-sources-1.4.3.tgz?cache=0&sync_timestamp=1568303698842&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-sources%2Fdownload%2Fwebpack-sources-1.4.3.tgz",
"resolved": "https://registry.npm.taobao.org/webpack-sources/download/webpack-sources-1.4.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-sources%2Fdownload%2Fwebpack-sources-1.4.3.tgz",
"integrity": "sha1-7t2OwLko+/HL/plOItLYkPMwqTM=",
"dev": true,
"requires": {
@ -11396,7 +11401,7 @@
},
"uuid": {
"version": "3.3.3",
"resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.3.3.tgz?cache=0&sync_timestamp=1566221268624&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.3.3.tgz",
"resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.3.3.tgz",
"integrity": "sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=",
"dev": true
},
@ -11762,7 +11767,7 @@
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
@ -11805,7 +11810,7 @@
"dependencies": {
"strip-ansi": {
"version": "4.0.0",
"resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
@ -11849,13 +11854,13 @@
},
"get-caller-file": {
"version": "1.0.3",
"resolved": "http://registry.npm.taobao.org/get-caller-file/download/get-caller-file-1.0.3.tgz",
"resolved": "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-1.0.3.tgz",
"integrity": "sha1-+Xj6TJDR3+f/LWvtoqUV5xO9z0o=",
"dev": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@ -11864,13 +11869,13 @@
},
"is-path-cwd": {
"version": "2.2.0",
"resolved": "https://registry.npm.taobao.org/is-path-cwd/download/is-path-cwd-2.2.0.tgz?cache=0&sync_timestamp=1562347283002&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-path-cwd%2Fdownload%2Fis-path-cwd-2.2.0.tgz",
"resolved": "https://registry.npm.taobao.org/is-path-cwd/download/is-path-cwd-2.2.0.tgz",
"integrity": "sha1-Z9Q7gmZKe1GR/ZEZEn6zAASKn9s=",
"dev": true
},
"is-path-in-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/is-path-in-cwd/download/is-path-in-cwd-2.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-path-in-cwd%2Fdownload%2Fis-path-in-cwd-2.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/is-path-in-cwd/download/is-path-in-cwd-2.1.0.tgz",
"integrity": "sha1-v+Lcomxp85cmWkAJljYCk1oFOss=",
"dev": true,
"requires": {
@ -11931,7 +11936,7 @@
},
"p-map": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/p-map/download/p-map-2.1.0.tgz?cache=0&sync_timestamp=1563032875018&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-map%2Fdownload%2Fp-map-2.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/p-map/download/p-map-2.1.0.tgz",
"integrity": "sha1-MQko/u+cnsxltosXaTAYpmXOoXU=",
"dev": true
},
@ -11949,7 +11954,7 @@
},
"require-main-filename": {
"version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/require-main-filename/download/require-main-filename-1.0.1.tgz",
"resolved": "https://registry.npm.taobao.org/require-main-filename/download/require-main-filename-1.0.1.tgz",
"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
"dev": true
},
@ -11961,7 +11966,7 @@
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz",
"resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz",
"integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=",
"dev": true,
"requires": {
@ -11993,7 +11998,7 @@
},
"yargs": {
"version": "12.0.5",
"resolved": "https://registry.npm.taobao.org/yargs/download/yargs-12.0.5.tgz?cache=0&sync_timestamp=1567812322754&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-12.0.5.tgz",
"resolved": "https://registry.npm.taobao.org/yargs/download/yargs-12.0.5.tgz",
"integrity": "sha1-BfWZe2CWR7ZPZrgeO0sQo2jnrRM=",
"dev": true,
"requires": {
@ -12013,7 +12018,7 @@
},
"yargs-parser": {
"version": "11.1.1",
"resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-11.1.1.tgz?cache=0&sync_timestamp=1567798682591&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-11.1.1.tgz",
"resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-11.1.1.tgz",
"integrity": "sha1-h5oIZZc7yp9rq1y987HGfsfTvPQ=",
"dev": true,
"requires": {
@ -12025,7 +12030,7 @@
},
"webpack-log": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/webpack-log/download/webpack-log-2.0.0.tgz?cache=0&sync_timestamp=1564684394562&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-log%2Fdownload%2Fwebpack-log-2.0.0.tgz",
"resolved": "http://registry.npm.taobao.org/webpack-log/download/webpack-log-2.0.0.tgz",
"integrity": "sha1-W3ko4GN1k/EZ0y9iJ8HgrDHhtH8=",
"dev": true,
"requires": {
@ -12482,7 +12487,7 @@
},
"yargs-parser": {
"version": "10.1.0",
"resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-10.1.0.tgz?cache=0&sync_timestamp=1567798682591&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-10.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-10.1.0.tgz",
"integrity": "sha1-cgImW4n36eny5XZeD+c1qQXtuqg=",
"dev": true,
"requires": {

View File

@ -31,6 +31,7 @@
"color-convert": "^2.0.1",
"file-saver": "^2.0.2",
"html2canvas": "^1.0.0-rc.3",
"jinrishici": "^1.0.6",
"pinyin": "^2.9.0",
"react": "^16.9.0",
"react-copy-to-clipboard": "^5.0.1",

View File

@ -27,6 +27,7 @@ colors.push({
const Colors = colors.map(set => {
set.RGB = convert.hex.rgb(set.hex);
set.colors = set.colors.map(c => {
let heteronymIdx = c.name.indexOf('藏') > -1 ? 1 : 0;
return {
...c,
RGB: convert.hex.rgb(c.hex),
@ -36,7 +37,7 @@ const Colors = colors.map(set => {
segment: true // 启用分词,以解决多音字问题。
})
.map(item => {
return item.length > 1 ? item[item.length - 1] : item;
return item.length > 1 ? item[heteronymIdx] : item;
})
.join(' ')
};

View File

@ -7,7 +7,7 @@ const Wrapper = styled.div`
.circular-chart {
display: block;
min-width: 2.6rem;
max-width: 2.4rem;
.circle-bg {
fill: rgba(255, 255, 255, 0.8);
stroke: #eee;

View File

@ -1,6 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import Circle from './CircleProgress';
import IconCopy from './ColorTitle/IconCopy';
const Wrapper = styled.section`
color: #333;
display: flex;
@ -11,6 +13,9 @@ const Wrapper = styled.section`
border-top: 1px solid rgba(255, 255, 255, 0.6);
padding: 1rem 0.2rem 0.6rem 0.2rem;
position: relative;
&.cmyk {
padding-left: 2.4rem;
}
&.rgb {
color: #fff;
text-align: right;
@ -38,22 +43,22 @@ const Wrapper = styled.section`
}
}
`;
const ColorParam = ({ CMYK, RGB = [0, 0, 0], ...rest }) => {
const ColorParam = ({ CMYK, RGB = [0, 0, 0], hex, ...rest }) => {
const [C, M, Y, K] = CMYK;
const [R, G, B] = RGB;
return (
<Wrapper {...rest}>
<div className="item c" data-id="c">
<div className="item cmyk c" data-id="c">
<Circle progress={C} color={'#0093D3'} />
</div>
<div className="item m" data-id="m">
<div className="item cmyk m" data-id="m">
<Circle progress={M} color={'#CC006B'} />
</div>
<div className="item y" data-id="y">
<div className="item cmyk y" data-id="y">
<Circle progress={Y} color={'#FFF10C'} />
</div>
<div className="item rgb k" data-id="k">
<div className="item cmyk k" data-id="k">
<Circle progress={K} color={'#333'} />
</div>
<div className="item rgb r" data-id="r">
@ -65,6 +70,9 @@ const ColorParam = ({ CMYK, RGB = [0, 0, 0], ...rest }) => {
<div className="item rgb b" data-id="b">
{B}
</div>
<div className="item" data-id="hex">
<IconCopy currColorHex={hex} />
</div>
</Wrapper>
);
};

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import FadeInUp from '../animates/FadeInUp';
// import FadeInDown from '../animates/FadeInDown';
const Wrapper = styled.div`
cursor: pointer;
display: flex;
@ -13,21 +13,20 @@ const Wrapper = styled.div`
}
> .hex {
font-size: 0.6rem;
padding: 0.2rem;
padding: 0.3rem;
background: rgba(51, 51, 51, 0.5);
border-radius: 0.2rem;
text-transform: uppercase;
}
.copyTip {
position: absolute;
left: 0.3rem;
top: 2rem;
left: -3rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.6rem;
padding: 0.3rem 0.4rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 0.2rem;
animation: ${FadeInUp} 1s;
animation-fill-mode: both;
}
`;
const IconFav = ({ currColorHex }) => {

View File

@ -0,0 +1,42 @@
import React from 'react';
import styled from 'styled-components';
import { useMobile } from '../../hooks';
const Wrapper = styled.div`
display: flex;
font-size: 0.6rem;
line-height: 1.4;
padding: 0.4rem;
margin-top: 1rem;
/* background: rgba(33, 33, 33, 0.6); */
text-shadow: 0 0 4px rgba(33, 33, 33, 0.6);
&.mobile {
font-size: 0.8rem;
}
> h2 {
color: inherit;
font-size: 0.4rem;
align-self: flex-end;
writing-mode: vertical-lr;
margin-right: 0.3rem;
}
.line {
color: inherit;
writing-mode: vertical-lr;
letter-spacing: 0.14rem;
font-weight: bold;
}
`;
const Poetry = ({ content = '', author = '', title = '', color = '#fff' }) => {
const { isMobile } = useMobile();
return (
<Wrapper className={isMobile ? 'mobile' : ''} style={{ color }}>
<h2>
{author} · {title}
</h2>
<p className="line">{content.replace(/[|。||]/g, ' ').trim()}</p>
</Wrapper>
);
};
export default Poetry;

View File

@ -1,15 +1,16 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
const jinrishici = require('jinrishici');
import IconFav from './IconFav';
import IconCopy from './IconCopy';
import { useMobile } from '../../hooks';
import { getCorrectTextColor } from '../../utils';
import Poetry from './Poetry';
const Wrapper = styled.hgroup`
color: #333;
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: space-around;
align-items: center;
/* align-self: center; */
@ -19,16 +20,22 @@ const Wrapper = styled.hgroup`
position: relative;
width: 4.6rem;
cursor: default;
margin-top: 3rem;
margin-top: 2rem;
margin-right: 0.5rem;
transition: all 0.6s;
&.mobile {
width: 5.8rem;
margin-top: 6rem;
> h1 {
font-size: 3.6rem;
}
}
&:hover > h1 {
transform: scale(1.1);
}
> h1 {
color: inherit;
font-size: 3.2rem;
letter-spacing: -0.5rem;
writing-mode: vertical-lr;
@ -43,29 +50,46 @@ const Wrapper = styled.hgroup`
writing-mode: vertical-lr;
position: absolute;
right: 0.2rem;
bottom: 0.4rem;
color: rgba(255, 255, 255, 0.66);
top: 0.4rem;
color: inherit;
}
> h3 {
width: 100%;
position: absolute;
left: -0.4rem;
bottom: -2.8rem;
top: -2rem;
display: flex;
}
`;
const ColorTitle = ({ name, pinyin, hex, RGB, CMYK }) => {
const { isMobile } = useMobile();
const [poetry, setPoetry] = useState(null);
useEffect(() => {
console.log('jrsc', jinrishici);
jinrishici.load(
result => {
let obj = {
content: result.data.content,
author: result.data.origin.author,
title: result.data.origin.title
};
setPoetry(obj);
},
err => {
setPoetry(null);
console.log('err', err);
}
);
}, [name]);
return (
<Wrapper className={isMobile ? 'mobile' : ''}>
<h1 style={{ color: getCorrectTextColor(RGB) }}>{name}</h1>
<Wrapper className={isMobile ? 'mobile' : ''} style={{ color: getCorrectTextColor(RGB) }}>
<h1>{name}</h1>
<IconFav currColor={{ hex, name, pinyin, RGB, CMYK }} />
<h2>{pinyin}</h2>
<h3>
<IconCopy currColorHex={hex} />
</h3>
{poetry && <Poetry {...poetry} color={getCorrectTextColor(RGB)} />}
</Wrapper>
);
};

View File

@ -1,6 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { useMobile } from '../hooks';
import { getCorrectTextColor } from '../utils';
import Logo from '../assets/img/logo.png';
const Wrapper = styled.header`
display: flex;
@ -35,7 +36,7 @@ export default function Header({ rgb = [0, 0, 0] }) {
alt="logo"
style={{ backgroundColor: `rgba(${rgb.join(',')},.5)` }}
/>
<h1>chinese color</h1>
<h1 style={{ color: getCorrectTextColor(rgb) }}>chinese color</h1>
</Wrapper>
);
}

View File

@ -0,0 +1,14 @@
import { keyframes } from 'styled-components';
const FadeInDown = keyframes`
from {
opacity: 0;
transform: translate3d(0, -400%, 0);
}
to {
opacity: 1;
transform: translate3d(0, -250%, 0);
}
`;
export default FadeInDown;

View File

@ -1,16 +0,0 @@
import { keyframes } from 'styled-components';
const FadeInUp = keyframes`
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
`;
export default FadeInUp;

View File

@ -35,8 +35,8 @@ export function getCorrectTextColor(rgb = [0, 0, 0]) {
const cBrightness = (hRed * 299 + hGreen * 587 + hBlue * 114) / 1000;
if (cBrightness > threshold) {
return '#333';
return '#50616d';
} else {
return '#fff';
return '#e9f1f6';
}
}