diff --git a/src/public/assets/data-1491837999815-H1_44Qtal.jpg b/src/public/assets/data-1491837999815-H1_44Qtal.jpg
new file mode 100644
index 0000000..3149998
Binary files /dev/null and b/src/public/assets/data-1491837999815-H1_44Qtal.jpg differ
diff --git a/src/public/assets/data-1493804606544-r1PBU7D1W.jpg b/src/public/assets/data-1493804606544-r1PBU7D1W.jpg
new file mode 100644
index 0000000..230daf2
Binary files /dev/null and b/src/public/assets/data-1493804606544-r1PBU7D1W.jpg differ
diff --git a/src/public/assets/data-1493804610896-SJoBIXPkW.jpg b/src/public/assets/data-1493804610896-SJoBIXPkW.jpg
new file mode 100644
index 0000000..728d5c4
Binary files /dev/null and b/src/public/assets/data-1493804610896-SJoBIXPkW.jpg differ
diff --git a/src/routes/chart/ECharts/MoonComponent.js b/src/routes/chart/ECharts/MoonComponent.js
index 36361cb..d175458 100644
--- a/src/routes/chart/ECharts/MoonComponent.js
+++ b/src/routes/chart/ECharts/MoonComponent.js
@@ -4,13 +4,13 @@ import 'echarts-gl'
 
 const option = {
   globe: {
-    baseTexture: '/asset/data-1493804606544-r1PBU7D1W.jpg',
-    heightTexture: '/asset/data-1493804610896-SJoBIXPkW.jpg',
+    baseTexture: '/assets/data-1493804606544-r1PBU7D1W.jpg',
+    heightTexture: '/assets/data-1493804610896-SJoBIXPkW.jpg',
 
     displacementScale: 0.05,
     displacementQuality: 'medium',
 
-    environment: '/asset/data-1491837999815-H1_44Qtal.jpg',
+    environment: '/assets/data-1491837999815-H1_44Qtal.jpg',
 
     shading: 'realistic',
     realisticMaterial: {
diff --git a/src/routes/chart/areaChart/index.js b/src/routes/chart/areaChart/index.js
deleted file mode 100644
index 06720c6..0000000
--- a/src/routes/chart/areaChart/index.js
+++ /dev/null
@@ -1,293 +0,0 @@
-import React from 'react'
-import * as d3 from 'd3-shape'
-import { Row, Col, Card, Button } from 'antd'
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-} from 'recharts'
-import Container from '../Container'
-
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const mixData = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const percentData = [
-  {
-    month: '2015.01',
-    a: 4000,
-    b: 2400,
-    c: 2400,
-  }, {
-    month: '2015.02',
-    a: 3000,
-    b: 1398,
-    c: 2210,
-  }, {
-    month: '2015.03',
-    a: 2000,
-    b: 9800,
-    c: 2290,
-  }, {
-    month: '2015.04',
-    a: 2780,
-    b: 3908,
-    c: 2000,
-  }, {
-    month: '2015.05',
-    a: 1890,
-    b: 4800,
-    c: 2181,
-  }, {
-    month: '2015.06',
-    a: 2390,
-    b: 3800,
-    c: 2500,
-  }, {
-    month: '2015.07',
-    a: 3490,
-    b: 4300,
-    c: 2100,
-  },
-]
-
-const colProps = {
-  lg: 12,
-  md: 24,
-}
-
-const SimpleAreaChart = () => (
-  <Container>
-    <AreaChart data={data}
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
-    </AreaChart>
-  </Container>
-)
-
-const StackedAreaChart = () => (
-  <Container>
-    <AreaChart data={mixData}
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
-      <Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
-      <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
-    </AreaChart>
-  </Container>
-)
-
-// StackedAreaChart
-
-const toPercent = (decimal, fixed = 0) => {
-  return `${(decimal * 100).toFixed(fixed)}%`
-}
-
-const getPercent = (value, total) => {
-  const ratio = total > 0
-    ? value / total
-    : 0
-
-  return toPercent(ratio, 2)
-}
-
-const renderTooltipContent = (o) => {
-  const { payload, label } = o
-  const total = payload.reduce((result, entry) => (result + entry.value), 0)
-
-  return (
-    <div className="customized-tooltip-content">
-      <p className="total">{`${label} (Total: ${total})`}</p>
-      <ul className="list">
-        {payload.map((entry, index) => (
-          <li key={`item-${index}`}
-            style={{
-              color: entry.color,
-            }}
-          >
-            {`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`}
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
-
-const PercentAreaChart = () => (
-  <Container>
-    <AreaChart data={percentData}
-      stackOffset="expand"
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="month" />
-      <YAxis tickFormatter={toPercent} />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip content={renderTooltipContent} />
-      <Area type="monotone" dataKey="a" stackId="1" stroke="#8884d8" fill="#8884d8" />
-      <Area type="monotone" dataKey="b" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
-      <Area type="monotone" dataKey="c" stackId="1" stroke="#ffc658" fill="#ffc658" />
-    </AreaChart>
-  </Container>
-)
-
-// CardinalAreaChart
-const cardinal = d3.curveCardinal.tension(0.2)
-const CardinalAreaChart = () => (
-  <Container>
-    <AreaChart data={mixData}
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
-      <Area type={cardinal} dataKey="pv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />
-    </AreaChart>
-  </Container>
-)
-
-const EditorPage = () => (
-  <div className="content-inner">
-    <Button type="primary"
-      size="large"
-      style={{
-        position: 'absolute',
-        right: 0,
-        top: -48,
-      }}
-    >
-      <a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
-    </Button>
-    <Row gutter={32}>
-      <Col {...colProps}>
-        <Card title="SimpleAreaChart">
-          <SimpleAreaChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="StackedAreaChart">
-          <StackedAreaChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="PercentAreaChart">
-          <PercentAreaChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="CardinalAreaChart">
-          <CardinalAreaChart />
-        </Card>
-      </Col>
-    </Row>
-  </div>
-)
-
-export default EditorPage
diff --git a/src/routes/chart/barChart/index.js b/src/routes/chart/barChart/index.js
deleted file mode 100644
index 255241d..0000000
--- a/src/routes/chart/barChart/index.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Row, Col, Card, Button } from 'antd'
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-} from 'recharts'
-import Container from '../Container'
-
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const mixData = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    female: 2400,
-    male: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    female: 1398,
-    male: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    female: 9800,
-    male: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    female: 3908,
-    male: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    female: 4800,
-    male: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    female: 3800,
-    male: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    female: 4300,
-    male: 2100,
-  },
-]
-const colProps = {
-  lg: 12,
-  md: 24,
-}
-
-const SimpleBarChart = () => (
-  <Container>
-    <BarChart data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Bar dataKey="pv" fill="#8884d8" />
-      <Bar dataKey="uv" fill="#82ca9d" />
-    </BarChart>
-  </Container>
-)
-
-const StackedBarChart = () => (
-  <Container>
-    <BarChart data={data}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Bar dataKey="pv" stackId="a" fill="#8884d8" />
-      <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
-    </BarChart>
-  </Container>
-)
-
-const MixBarChart = () => (
-  <Container>
-    <BarChart data={mixData}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Bar dataKey="female" stackId="a" fill="#8884d8" />
-      <Bar dataKey="male" stackId="a" fill="#82ca9d" />
-      <Bar dataKey="uv" fill="#ffc658" />
-    </BarChart>
-  </Container>
-)
-
-// CustomShapeBarChart
-const getPath = (x, y, width, height) => {
-  return `M${x},${y + height}
-        C${x + (width / 3)},${y + height} ${x + (width / 2)},${y + (height / 3)} ${x + (width / 2)}, ${y}
-        C${x + (width / 2)},${y + (height / 3)} ${x + (2 * (width / 3))},${y + height} ${x + width}, ${y + height}
-        Z`
-}
-
-const TriangleBar = (props) => {
-  const { fill, x, y, width, height } = props
-  return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />
-}
-
-TriangleBar.propTypes = {
-  fill: PropTypes.string,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  width: PropTypes.number,
-  height: PropTypes.number,
-}
-
-const CustomShapeBarChart = () => (
-  <Container>
-    <BarChart data={mixData}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Bar dataKey="female" fill="#8884d8" shape={<TriangleBar />} label />
-    </BarChart>
-  </Container>
-)
-
-const EditorPage = () => (
-  <div className="content-inner">
-    <Button type="primary"
-      size="large"
-      style={{
-        position: 'absolute',
-        right: 0,
-        top: -48,
-      }}
-    >
-      <a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
-    </Button>
-    <Row gutter={32}>
-      <Col {...colProps}>
-        <Card title="SimpleBarChart">
-          <SimpleBarChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="StackedBarChart">
-          <StackedBarChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="MixBarChart">
-          <MixBarChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="CustomShapeBarChart">
-          <CustomShapeBarChart />
-        </Card>
-      </Col>
-    </Row>
-  </div>
-)
-
-export default EditorPage
diff --git a/src/routes/chart/lineChart/index.js b/src/routes/chart/lineChart/index.js
deleted file mode 100644
index 2c98d13..0000000
--- a/src/routes/chart/lineChart/index.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Row, Col, Card, Button } from 'antd'
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-} from 'recharts'
-import Container from '../Container'
-
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const colProps = {
-  lg: 12,
-  md: 24,
-}
-
-const SimpleLineChart = () => (
-  <Container>
-    <LineChart data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line type="monotone"
-        dataKey="pv"
-        stroke="#8884d8"
-        activeDot={{
-          r: 8,
-        }}
-      />
-      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
-    </LineChart>
-  </Container>
-)
-
-const VerticalLineChart = () => (
-  <Container>
-    <LineChart layout="vertical"
-      width={600}
-      height={300}
-      data={data}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis type="number" />
-      <YAxis dataKey="name" type="category" />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line dataKey="pv" stroke="#8884d8" />
-      <Line dataKey="uv" stroke="#82ca9d" />
-    </LineChart>
-  </Container>
-)
-
-const DashedLineChart = () => (
-  <Container>
-    <LineChart width={600}
-      height={300}
-      data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line type="monotone" dataKey="pv" stroke="#8884d8" strokeDasharray="5 5" />
-      <Line type="monotone" dataKey="uv" stroke="#82ca9d" strokeDasharray="3 4 5 2" />
-    </LineChart>
-  </Container>
-)
-
-// CustomizedDotLineChart
-const CustomizedDot = ({ cx, cy, payload }) => {
-  if (payload.pv > 2500) {
-    return (
-      <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="red" viewBox="0 0 1024 1024">
-        <path d="M512 1009.984c-274.912 0-497.76-222.848-497.76-497.76s222.848-497.76 497.76-497.76c274.912 0 497.76 222.848 497.76 497.76s-222.848 497.76-497.76 497.76zM340.768 295.936c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM686.176 296.704c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM772.928 555.392c-18.752-8.864-40.928-0.576-49.632 18.528-40.224 88.576-120.256 143.552-208.832 143.552-85.952 0-164.864-52.64-205.952-137.376-9.184-18.912-31.648-26.592-50.08-17.28-18.464 9.408-21.216 21.472-15.936 32.64 52.8 111.424 155.232 186.784 269.76 186.784 117.984 0 217.12-70.944 269.76-186.784 8.672-19.136 9.568-31.2-9.12-40.096z" />
-      </svg>
-    )
-  }
-
-  return (
-    <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="green" viewBox="0 0 1024 1024">
-      <path d="M517.12 53.248q95.232 0 179.2 36.352t145.92 98.304 98.304 145.92 36.352 179.2-36.352 179.2-98.304 145.92-145.92 98.304-179.2 36.352-179.2-36.352-145.92-98.304-98.304-145.92-36.352-179.2 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352zM663.552 261.12q-15.36 0-28.16 6.656t-23.04 18.432-15.872 27.648-5.632 33.28q0 35.84 21.504 61.44t51.2 25.6 51.2-25.6 21.504-61.44q0-17.408-5.632-33.28t-15.872-27.648-23.04-18.432-28.16-6.656zM373.76 261.12q-29.696 0-50.688 25.088t-20.992 60.928 20.992 61.44 50.688 25.6 50.176-25.6 20.48-61.44-20.48-60.928-50.176-25.088zM520.192 602.112q-51.2 0-97.28 9.728t-82.944 27.648-62.464 41.472-35.84 51.2q-1.024 1.024-1.024 2.048-1.024 3.072-1.024 8.704t2.56 11.776 7.168 11.264 12.8 6.144q25.6-27.648 62.464-50.176 31.744-19.456 79.36-35.328t114.176-15.872q67.584 0 116.736 15.872t81.92 35.328q37.888 22.528 63.488 50.176 17.408-5.12 19.968-18.944t0.512-18.944-3.072-7.168-1.024-3.072q-26.624-55.296-100.352-88.576t-176.128-33.28z" />
-    </svg>
-  )
-}
-
-CustomizedDot.propTypes = {
-  cx: PropTypes.number,
-  cy: PropTypes.number,
-  payload: PropTypes.object,
-}
-
-const CustomizedDotLineChart = () => (
-  <Container>
-    <LineChart width={600}
-      height={300}
-      data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line type="monotone" dataKey="pv" stroke="#8884d8" dot={<CustomizedDot />} />
-      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
-    </LineChart>
-  </Container>
-)
-
-const EditorPage = () => (
-  <div className="content-inner">
-    <Button type="primary"
-      size="large"
-      style={{
-        position: 'absolute',
-        right: 0,
-        top: -48,
-      }}
-    >
-      <a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
-    </Button>
-    <Row gutter={32}>
-      <Col {...colProps}>
-        <Card title="SimpleLineChart">
-          <SimpleLineChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="DashedLineChart">
-          <DashedLineChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="CustomizedDotLineChart">
-          <CustomizedDotLineChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="VerticalLineChart">
-          <VerticalLineChart />
-        </Card>
-      </Col>
-    </Row>
-  </div>
-)
-
-export default EditorPage