x

public/font/LICENSE.txt

@@ -0,0 +1,21 @@
+Font license info
+
+
+## Entypo
+
+   Copyright (C) 2012 by Daniel Bruce
+
+   Author:    Daniel Bruce
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://www.entypo.com
+
+
+## Font Awesome
+
+   Copyright (C) 2016 by Dave Gandy
+
+   Author:    Dave Gandy
+   License:   SIL ()
+   Homepage:  http://fortawesome.github.com/Font-Awesome/
+
+

public/font/README.txt

@@ -0,0 +1,75 @@
+This webfont is generated by http://fontello.com open source project.
+
+
+================================================================================
+Please, note, that you should obey original font licenses, used to make this
+webfont pack. Details available in LICENSE.txt file.
+
+- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
+  site in "About" section.
+
+- If your project is open-source, usually, it will be ok to make LICENSE.txt
+  file publicly available in your repository.
+
+- Fonts, used in Fontello, don't require a clickable link on your site.
+  But any kind of additional authors crediting is welcome.
+================================================================================
+
+
+Comments on archive content
+---------------------------
+
+- /font/* - fonts in different formats
+
+- /css/*  - different kinds of css, for all situations. Should be ok with 
+  twitter bootstrap. Also, you can skip <i> style and assign icon classes
+  directly to text elements, if you don't mind about IE7.
+
+- demo.html - demo file, to show your webfont content
+
+- LICENSE.txt - license info about source fonts, used to build your one.
+
+- config.json - keeps your settings. You can import it back into fontello
+  anytime, to continue your work
+
+
+Why so many CSS files ?
+-----------------------
+
+Because we like to fit all your needs :)
+
+- basic file, <your_font_name>.css - is usually enough, it contains @font-face
+  and character code definitions
+
+- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
+  directly into html
+
+- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
+  rules, but still wish to benefit from css generation. That can be very
+  convenient for automated asset build systems. When you need to update font -
+  no need to manually edit files, just override old version with archive
+  content. See fontello source code for examples.
+
+- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
+  CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
+  We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
+  server headers. But if you ok with dirty hack - this file is for you. Note,
+  that data url moved to separate @font-face to avoid problems with <IE9, when
+  string is too long.
+
+- animate.css - use it to get ideas about spinner rotation animation.
+
+
+Attention for server setup
+--------------------------
+
+You MUST setup server to reply with proper `mime-types` for font files -
+otherwise some browsers will fail to show fonts.
+
+Usually, `apache` already has necessary settings, but `nginx` and other
+webservers should be tuned. Here is list of mime types for our file extensions:
+
+- `application/vnd.ms-fontobject` - eot
+- `application/x-font-woff` - woff
+- `application/x-font-ttf` - ttf
+- `image/svg+xml` - svg

public/font/config.json

@@ -0,0 +1,34 @@
+{
+  "name": "commit",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "7222571caa5c15f83dcfd447c58d68d9",
+      "css": "search-1",
+      "code": 59401,
+      "src": "entypo"
+    },
+    {
+      "uid": "7bf14281af5633a597f85b061ef1cfb9",
+      "css": "angle-right",
+      "code": 61701,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "f3f90c8c89795da30f7444634476ea4f",
+      "css": "angle-left",
+      "code": 61700,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c709da589c923ba3c2ad48d9fc563e93",
+      "css": "cancel",
+      "code": 59392,
+      "src": "entypo"
+    }
+  ]
+}

public/font/css/animation.css

@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

public/font/css/commit-codes.css

@@ -0,0 +1,5 @@
+
+.icon-cancel:before { content: '\e800'; } /* '' */
+.icon-search-1:before { content: '\e809'; } /* '' */
+.icon-angle-left:before { content: '\f104'; } /* '' */
+.icon-angle-right:before { content: '\f105'; } /* '' */

public/font/css/commit-ie7-codes.css

@@ -0,0 +1,5 @@
+
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-search-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-angle-left { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-angle-right { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/font/css/commit-ie7.css

@@ -0,0 +1,16 @@
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'commit';
+  font-style: normal;
+  font-weight: normal;
+ 
+  /* fix buttons height */
+  line-height: 1em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+}
+ 
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-search-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-angle-left { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-angle-right { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/font/css/commit.css

@@ -0,0 +1,61 @@
+@font-face {
+  font-family: 'commit';
+  src: url('../font/commit.eot?48289248');
+  src: url('../font/commit.eot?48289248#iefix') format('embedded-opentype'),
+       url('../font/commit.woff2?48289248') format('woff2'),
+       url('../font/commit.woff?48289248') format('woff'),
+       url('../font/commit.ttf?48289248') format('truetype'),
+       url('../font/commit.svg?48289248#commit') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'commit';
+    src: url('../font/commit.svg?48289248#commit') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "commit";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-cancel:before { content: '\e800'; } /* '' */
+.icon-search-1:before { content: '\e809'; } /* '' */
+.icon-angle-left:before { content: '\f104'; } /* '' */
+.icon-angle-right:before { content: '\f105'; } /* '' */

public/font/demo.html

@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html>
+  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <meta charset="UTF-8"><style>/*
+ * Bootstrap v2.2.1
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.clearfix:after {
+  clear: both;
+}
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+a:hover,
+a:active {
+  outline: 0;
+}
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
+button,
+input {
+  *overflow: visible;
+  line-height: normal;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: #333;
+  background-color: #fff;
+}
+a {
+  color: #08c;
+  text-decoration: none;
+}
+a:hover {
+  color: #005580;
+  text-decoration: underline;
+}
+.row {
+  margin-left: -20px;
+  *zoom: 1;
+}
+.row:before,
+.row:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.row:after {
+  clear: both;
+}
+[class*="span"] {
+  float: left;
+  min-height: 1px;
+  margin-left: 20px;
+}
+.container,
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  width: 940px;
+}
+.span12 {
+  width: 940px;
+}
+.span11 {
+  width: 860px;
+}
+.span10 {
+  width: 780px;
+}
+.span9 {
+  width: 700px;
+}
+.span8 {
+  width: 620px;
+}
+.span7 {
+  width: 540px;
+}
+.span6 {
+  width: 460px;
+}
+.span5 {
+  width: 380px;
+}
+.span4 {
+  width: 300px;
+}
+.span3 {
+  width: 220px;
+}
+.span2 {
+  width: 140px;
+}
+.span1 {
+  width: 60px;
+}
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  *zoom: 1;
+}
+.container:before,
+.container:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.container:after {
+  clear: both;
+}
+p {
+  margin: 0 0 10px;
+}
+.lead {
+  margin-bottom: 20px;
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 30px;
+}
+small {
+  font-size: 85%;
+}
+h1 {
+  margin: 10px 0;
+  font-family: inherit;
+  font-weight: bold;
+  line-height: 20px;
+  color: inherit;
+  text-rendering: optimizelegibility;
+}
+h1 small {
+  font-weight: normal;
+  line-height: 1;
+  color: #999;
+}
+h1 {
+  line-height: 40px;
+}
+h1 {
+  font-size: 38.5px;
+}
+h1 small {
+  font-size: 24.5px;
+}
+body {
+  margin-top: 90px;
+}
+.header {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  margin-left: -480px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+  padding-top: 10px;
+  z-index: 10;
+}
+.footer {
+  color: #ddd;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 20px;
+}
+.footer a {
+  color: #ccc;
+  text-decoration: underline;
+}
+.the-icons {
+  font-size: 14px;
+  line-height: 24px;
+}
+.switch {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  color: #666;
+}
+.switch input {
+  margin-right: 0.3em;
+}
+.codesOn .i-name {
+  display: none;
+}
+.codesOn .i-code {
+  display: inline;
+}
+.i-code {
+  display: none;
+}
+@font-face {
+      font-family: 'commit';
+      src: url('./font/commit.eot?15835597');
+      src: url('./font/commit.eot?15835597#iefix') format('embedded-opentype'),
+           url('./font/commit.woff?15835597') format('woff'),
+           url('./font/commit.ttf?15835597') format('truetype'),
+           url('./font/commit.svg?15835597#commit') format('svg');
+      font-weight: normal;
+      font-style: normal;
+    }
+     
+     
+    .demo-icon
+    {
+      font-family: "commit";
+      font-style: normal;
+      font-weight: normal;
+      speak: none;
+     
+      display: inline-block;
+      text-decoration: inherit;
+      width: 1em;
+      margin-right: .2em;
+      text-align: center;
+      /* opacity: .8; */
+     
+      /* For safety - reset parent styles, that can break glyph codes*/
+      font-variant: normal;
+      text-transform: none;
+     
+      /* fix buttons height, for twitter bootstrap */
+      line-height: 1em;
+     
+      /* Animation center compensation - margins should be symmetric */
+      /* remove if not needed */
+      margin-left: .2em;
+     
+      /* You can be more comfortable with increased icons size */
+      /* font-size: 120%; */
+     
+      /* Font smoothing. That was taken from TWBS */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+     
+      /* Uncomment for 3D effect */
+      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+     </style>
+    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
+    <script>
+      function toggleCodes(on) {
+        var obj = document.getElementById('icons');
+      
+        if (on) {
+          obj.className += ' codesOn';
+        } else {
+          obj.className = obj.className.replace(' codesOn', '');
+        }
+      }
+      
+    </script>
+  </head>
+  <body>
+    <div class="container header">
+      <h1>commit <small>font demo</small></h1>
+      <label class="switch">
+        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
+      </label>
+    </div>
+    <div class="container" id="icons">
+      <div class="row">
+        <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-cancel">&#xe800;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe800</span></div>
+        <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-search-1">&#xe809;</i> <span class="i-name">icon-search-1</span><span class="i-code">0xe809</span></div>
+        <div class="the-icons span3" title="Code: 0xf104"><i class="demo-icon icon-angle-left">&#xf104;</i> <span class="i-name">icon-angle-left</span><span class="i-code">0xf104</span></div>
+        <div class="the-icons span3" title="Code: 0xf105"><i class="demo-icon icon-angle-right">&#xf105;</i> <span class="i-name">icon-angle-right</span><span class="i-code">0xf105</span></div>
+      </div>
+    </div>
+    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
+  </body>
+</html>

public/font/font/commit.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
+<defs>
+<font id="commit" horiz-adv-x="1000" >
+<font-face font-family="commit" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="cancel" unicode="&#xe800;" d="M452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
+
+<glyph glyph-name="search-1" unicode="&#xe809;" d="M772 78q30-34 6-62l-46-46q-36-32-68 0l-190 190q-74-42-156-42-128 0-223 95t-95 223 90 219 218 91 224-95 96-223q0-88-46-162z m-678 358q0-88 68-156t156-68 151 63 63 153q0 88-68 155t-156 67-151-63-63-151z" horiz-adv-x="789" />
+
+<glyph glyph-name="angle-left" unicode="&#xf104;" d="M350 546q0-7-6-12l-219-220 219-219q6-6 6-13t-6-13l-28-28q-5-5-12-5t-13 5l-260 261q-6 5-6 12t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="357.1" />
+
+<glyph glyph-name="angle-right" unicode="&#xf105;" d="M332 314q0-7-5-12l-261-261q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l261-260q5-5 5-13z" horiz-adv-x="357.1" />
+</font>
+</defs>
+</svg>

public/index.html

@@ -26,11 +26,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="%PUBLIC_URL%/font/css/commit.css">
     <title>文件管理系统</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="dialog"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

public/style.css

@@ -16,17 +16,53 @@ h1,
 h2,
 h3 {
   font-weight: 400;
-  color: #1f2f3d;
+  margin: 0;
+  padding: 0;
 }
 
+body {
+  background-color: #121212;
+  color: #e8e8e8 ;
+}
+
+html, body, #root, .app {
+  height: 100%;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+}
 
 .title {
   font-size: 28px;
   text-align: center;
 }
 
-.app {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
+.header {
+  flex: 0 0 auto;
+}
+
+.section {
+  flex: 1;
+  display: flex;
+  align-items: stretch
+}
+
+.main {
+  flex: 1;
+  margin: 22px 48px;
+}
+
+.slide {
+  flex: 0 0 260px;
+}
+
+input {
+  margin: 0 8px;
+  background: transparent;
+  padding: 4px 10px;
+  border: 1px solid #2e2e2e;
+  outline: none;
+  color: inherit;
 }

src/@types/index.d.ts

@@ -0,0 +1,9 @@
+import { RouteComponentProps } from 'react-router'
+
+export interface Props {
+  className?: string
+}
+
+export interface RouteProps extends Props, RouteComponentProps {
+
+}

src/components/Dialog/index.tsx

@@ -0,0 +1,45 @@
+import React, {useState} from 'react'
+import ReactDOM from 'react-dom'
+import styles from './style.module.css'
+
+
+interface Props {
+  node: HTMLDivElement,
+  children: Array<any> | Function,
+  stateChange?: Function,
+  show?: boolean,
+  title?: string
+}
+
+function Dialog({node, children, stateChange, show = false, title}: Props) {
+  const [ishow, setIShow] = useState(false)
+  const showChange = (show: boolean) => {
+    setIShow(show)
+    stateChange && stateChange(show)
+  }
+
+  if (show !== ishow) {
+    setIShow(show)
+    return null
+  }
+
+  const Layer = ishow ? (
+    <div className={styles.layer}>
+      <div className={styles.content}>
+        <span className="icon-cancel" onClick={() => showChange(false)}></span>
+        {title && <div className={styles.title}>{title}</div>}
+        <div className={styles.content}>
+          {children}
+        </div>
+        <div className={styles.bar}>
+          <span onClick={() => showChange(false)} >取消</span>
+          <span onClick={() => showChange(true)}>确定</span>
+        </div>
+      </div>
+    </div>
+  ) : null
+
+  return ReactDOM.createPortal(Layer, node)
+}
+
+export default Dialog

src/components/Dialog/style.module.css

@@ -0,0 +1,58 @@
+.layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+  background-color: rgba(0,0,0,0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  padding: 18px 16px;
+  background-color: #1b1b1b;
+  position: relative;
+  min-width: 300px;
+}
+
+
+.title {
+  color: inherit;
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+
+.content > span {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  color: #a5a5a5;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.bar {
+  text-align: right;
+}
+
+.bar span {
+  display: inline-block;
+  vertical-align: sub;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.bar span:nth-child(1) {
+  margin: 0 20px;
+  color: #409eff;
+}
+
+.bar span:nth-child(2) {
+  padding: 8px 20px;
+  color: #fff;
+  background-color: #409eff;
+  border-radius: 5px;
+}

src/page/components/Paging/index.module.css

@@ -6,23 +6,38 @@
 .paginglayer > span {
   display: inline-block;
   border-color: transparent;
-  height: 22px;
-  min-width: 22px;
-  border-color: transparent;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 22px;
   height: 22px;
-  min-width: 22px;
   cursor: pointer;
-  margin: 0 5px;
-  background-color: #f4f4f5;
-  color: #606266;
-  min-width: 30px;
-  border-radius: 2px;
+  margin: 0 8px;
+  color: #a1a1a1;
   text-align: center;
 }
 
+.paginglayer>span:hover {
+  color: #409eff;
+}
+
 .paginglayer > span.active {
   color: #409eff;
   cursor: default;
+}
+
+.paginglayer > div {
+  display: inline-block;
+  font-size: 13px;
+  color: #a1a1a1;
+}
+
+.info {
+  margin-right: 20px;
+}
+
+.goto {
+  margin-left: 20px;
+}
+
+.goto input { 
+  width: 20px;
 }

src/components/Paging/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import styles from './index.module.css'
+
+interface PagingProps {
+  current: number,
+  total: number,
+  handleChange: Function,
+  show: number,
+  className?: string,
+  number: number
+}
+
+function intercept(current: number, maxT: number, dis: number, minT = 1) {
+  let cdis = Math.floor(dis / 2)
+  let min = current - cdis
+  let max = current + cdis
+
+  if (min < minT) {
+    max = max + (minT - min)
+    min = minT
+  } else if (max > maxT) {
+    min = min - (max - maxT)
+    max = maxT
+  }
+
+  min = min < minT ? minT : min
+  max = max > maxT ? maxT : max
+
+  return { min, max }
+}
+
+function Paging({ current = 1, show = 5, total, handleChange, className = '', number} : PagingProps) {
+  const { min, max } = intercept(current, total, show)
+  const [val, setVal] = useState(current)
+  const clickHandle = (select: number) => {
+    if (select < min || select > max) {
+      select = current
+    }
+    setVal(select)
+    handleChange(select)
+  }
+
+  let items = []
+  for (let i = min; i <= max; i++) {
+    items.push(<span key={i} onClick={() => clickHandle(i)} className={i === current ? styles.active: ''}>{i}</span>)
+  }
+
+  return (
+    <div className={styles.paginglayer + ' ' + className}>
+      <div className={styles.info}>共{number}条</div>
+      <span className='icon-angle-left' onClick={() => clickHandle(current - 1)}></span>
+      {items}
+      <span className='icon-angle-right' onClick={() => clickHandle(current + 1)}></span>
+      <div className={styles.goto}>
+        前往<input value={val} onChange={ev => setVal(Number(ev.target.value) || current)} onBlur={ev => clickHandle(Number(ev.target.value))} />页
+      </div>
+    </div>
+  )
+}
+
+export default Paging

src/page/components/Upload/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.css'
 import List from '../List'
 import Item from './Item'
 import { UPREADY, UPSUCCESS, UPING, UPERR} from './constant'
-import http from '../../../http'
+import http from '../../http'
 
 
 async function uploadFile({ url, file, body, cb, check }: { url: string, file: Array<File> | File, body: any, cb: Function, check?: string}) {

src/page/components/item/index.module.css

@@ -7,14 +7,15 @@
   padding-left: 10px;
   padding-right: 10px;
   font-size: 14px;
-  color: #606266;
+  color: #d8d8d8;
   padding: 12px 0;
-  border-bottom: 1px solid #ebebeb;
+  border-bottom: 1px solid #232323;
+  text-align: center;
 }
 
 .item a,
 .item b {
-  color: inherit;
+  color: #d8d8d8;
   text-decoration: none;
   margin: 0 3px;
   font-weight:  normal;

src/index.tsx

@@ -1,22 +1,47 @@
-import React from 'react';
+import React, {useState} from 'react';
 import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import {Route, Router} from 'react-router'
 import { createHashHistory } from 'history'
-import Home from './page/Home'
-import StyleEdit from './page/StyleEdit'
+import config from './router.config'
+import Header from './layout/Header'
+import Slide from './layout/Slide';
+import Combination from './layout/Combination'
+import { RouteComponentProps, Switch, Redirect } from 'react-router'
 
 const history = createHashHistory()
 
+
 function App() {
+  let [route, setRoute] = useState()
+  
+  let Items = config.map(item => (
+    <Route
+      key={item.path}
+      path={item.path}
+      component={(r: any) => (
+        <Combination 
+          {...r}
+          real={route}
+          layer={item.component}
+          className="main"
+          currentRoute={(r: RouteComponentProps) => (route && r.match.path === route.match.path) || setRoute(r) } />
+      )}
+    />
+  ))
+
   return (
     <div className="app">
-      <Router history={history}>
-        <h1 className='title'>文件管理系统</h1>
-        <Route path="/home" component={Home} />
-        <Route path="/style/:id" component={StyleEdit} />
-        {/* <Redirect from="/:a" to="/home" /> */}
-      </Router>
+      <Header className='header' />
+      <div className='section'>
+        <Router history={history}>
+          <Route path="/" component={() => <Slide {...route} className='slide' />} />
+          <Switch>
+            {Items}
+            <Redirect to="/gis" />
+          </Switch>
+        </Router>
+      </div>
     </div>
   )
 }

src/layout/Combination.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { RouteProps } from '../@types';
+import SubHead from './SubHead'
+
+interface Props extends RouteProps {
+  layer: any,
+  currentRoute?: Function
+}
+
+function Combination(props: Props) {
+  let args = {...props}
+  let Layer = args.layer
+  let cls = args.className
+  delete args.layer
+  delete args.className
+  delete args.currentRoute
+
+  props.currentRoute && props.currentRoute(props)
+  return (
+    <div className={cls}>
+      <SubHead {...args} />
+      <Layer {...args} />
+    </div>
+  )
+}
+
+export default Combination

src/layout/Header.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Props } from '../@types'
+
+
+const style = {
+  title: {
+    backgroundColor: '#252525',
+    padding: '15px',
+    fontSize: '16px'
+  }
+}
+
+function Header(props: Props) {
+  return (
+    <div style={style.title} className={props.className}>
+      <h1>文件管理系统</h1>
+    </div>
+  )
+}
+
+export default Header

src/layout/Slide.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import config from '../router.config'
+import { Link } from 'react-router-dom'
+import style from './style.module.css'
+import { RouteProps } from '../@types'
+
+function Slide(props: RouteProps) {
+  let router = config.filter(item => item.navigation)
+  let query = (item: any, currItem: any) : boolean => {
+    if (!currItem) return false
+    if (currItem === item) return true
+    if (currItem.parent) {
+      return query(item, currItem.parent)
+    } else {
+      return false
+    }
+  }
+  const currItem = props.match && config.find(item => item.path === props.match.path)
+
+          // <Redirect from="/" to="/gis" />
+
+  return (
+    <div className={style.slidelayer + ' ' + props.className}>
+      {router.map(item => (
+        <Link to={item.path} key={item.path} className={query(item, currItem) ? style.active : ''} >
+          <img src={item.icon} />
+          {item.title}
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export default Slide

src/layout/SubHead.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { RouteProps } from '../@types';
+import config from '../router.config'
+import style from './style.module.css'
+
+function SubHead(props: RouteProps) {
+  let item = config.find(item => props.match.path === item.path)
+  
+  return item ? (
+    <h2 className={style.subhead}>
+      {item.title}
+    </h2>
+  ): null
+}
+
+export default SubHead

src/layout/style.module.css

@@ -0,0 +1,30 @@
+.slidelayer {
+  background-color: #1b1b1b;
+  padding: 10px;
+}
+
+.slidelayer a {
+  display: block;
+  background-color: #2d2d2d;
+  color: inherit;
+  margin-top: 15px;
+  border-radius: 25px;
+  font-size: 14px;
+  text-decoration: none;
+  padding: 15px;
+  filter: brightness(0.7);
+}
+
+.slidelayer a img {
+  vertical-align: baseline;
+  margin-right: 10px;
+}
+
+.slidelayer .active {
+  filter: brightness(1);
+}
+
+.subhead {
+  font-size: 18px;
+  margin-bottom: 20px;
+}

src/page/Home/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ResterList from '../List/ResterList'
 import ModelList from '../List/ModelList'
 import GeoList from '../List/GeoList'
-import Tab from '../components/Tab'
+import Tab from '../../components/Tab'
 import styles from './index.module.css'
 
 

src/page/List/Coor.tsx

@@ -46,7 +46,7 @@ export default function Coor(props: {coor: string, onChange: Function}) {
   }
 
   return (
-    <div className={styles.tip}>
+    <div className={styles.tip + ' ' + styles.inputitem}>
       输入坐标：<input value={coor} placeholder="输入对应坐标" onChange={changeInput} onFocus={changeInput} onBlur={blurHandle} />
       <div style={{ display: info ? 'block' : 'none' }}>
         <p>{info}</p>

src/page/List/GeoList.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import GrentReducer from './grent'
-import Upload from '../components/Upload'
+import Upload from '../../components/Upload'
 import { Link } from 'react-router-dom'
 import styles from './index.module.css'
 import Coor from './Coor'
@@ -15,8 +15,8 @@ export default function GeoList({ className }: any) {
     transformUrl: '/vector/command/geojson/',
     judgeUrl: '/vector/command/judge/coord/',
     ItemFn (model: Model) {
-      if (model.status === 8 || model.status === 10 || model.status === 11 || model.status === 12) {
-        return <Link to={"/style/" + model.id}>编辑样式</Link>
+      if (model.status === 8 || model.status === 11 || model.status === 12) {
+        return <Link to={"/style/" + model.id} style={{ color: '#3e7cd3' }}>编辑样式</Link>
       }
     },
     region: true
@@ -36,14 +36,14 @@ export default function GeoList({ className }: any) {
 
   return (
     <div className={className}>
-      {Element}
       <div className={styles.uplayer + ' ' + styles.inuplayer} >
         <Coor coor={coorstr} onChange={(val:string) => setCoor(val)} />
-        <div>
+        <div className={styles.inputitem}>
           输入目录：<input value={dir} placeholder="输入对应文件夹" onChange={ev => setDir(ev.target.value)} />
         </div>
-        <Upload api={'/vector/uploadMult/' + dir + '/'} body={{ coord }} upHandle={referData} multiple />
+        <Upload api={'/vector/uploadMult/' + dir + '/'} body={{ coord }} upHandle={referData} multiple className={styles.inputitem} />
       </div>
+      {Element}
     </div>
   )
 }

src/page/List/GrentOper.tsx

@@ -1,16 +1,19 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { zipItemAction, sectionItemAction, judgeItemAction, transferItemAction } from './ListState'
-import Item from '../components/item'
+import Item from '../../components/item'
+import GDialog from '../../components/Dialog'
+import styles from './index.module.css'
 
 const JUDGEING = 1, JUGESUCCESS = 2, JUGEERR = 3
 const SECTIONING = 4, SECTIONSUCCESS = 5, SECTIONEERR = 6
 const TRANING = 7, TRANSUCCESS = 8, TRANEERR = 9
 const ZIPING = 10, ZIPSUCCESS = 11, ZIPEERR = 12
 const TRANSFERING = 13, TRANSFERSUCCESS = 14, TRANSFEREERR = 15
+const node = document.querySelector('#dialog')
+const Dialog = (props: any) => <GDialog node={node} {...props} />
 
 
-
-export default function Grent({ setItemStaus, modelDispatch, referData, delHandle, api, region }: any) {
+export default function Grent({ setItemStaus, modelDispatch, referData, delHandle, api, region, showDialog, setShowDialog }: any) {
   let [text, setText] = ['', (dom: HTMLInputElement) => { text = dom.value }]
   let [min, setMin] = ['9', (dom: HTMLInputElement) => {
     let i = Number(dom.value)
@@ -99,23 +102,33 @@ export default function Grent({ setItemStaus, modelDispatch, referData, delHandl
   }
 
   const ItemFn = (model: Model, privItem: Function | void) => {
-    let Zip: any = <b onClick={() => zipHandle(model)} style={{ cursor: 'pointer' }}>解压</b>
-    let Sect: any = <b onClick={() => section(model)} style={{ cursor: 'pointer' }}>切片</b>
-    let Jude: any = <b onClick={() => judge(model)} style={{ cursor: 'pointer' }}>判断</b>
-    let Tran: any = <b onClick={() => transform(model)} style={{ cursor: 'pointer' }}>转geojson</b>
+    let Zip: any = <b onClick={() => zipHandle(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>解压</b>
+    let Sect: any = <b onClick={() => section(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>切片</b>
+    let Jude: any = <b onClick={() => judge(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>判断</b>
+    let Tran: any = <b onClick={() => transform(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>转geojson</b>
     let Tf: any = (
       <Fragment>
-        <input type="text" defaultValue={text} onChange={ev => setText(ev.target)} placeholder="发布参数" />
-        <b onClick={() => transfer(model)} style={{ cursor: 'pointer' }}>发布</b>
+        <Dialog title="服务发布" show={showDialog} stateChange={(enter: boolean) => { setShowDialog(false); enter && transfer(model) }}>
+          <div className={styles.dialogitem}>
+            <label>发布参数</label>
+            <input type="text" defaultValue={text} onChange={ev => setText(ev.target)} placeholder="发布参数" />
+          </div>
+        </Dialog>
+        <b style={{ cursor: 'pointer', color: '#3e7cd3' }} onClick={() => setShowDialog(true)}>发布</b>
       </Fragment>
     )
 
     if (region) {
       Sect = (
         <Fragment>
-          <input type="text" defaultValue={min} onBlur={ev => setMin(ev.target)} placeholder="最小层级" />
-          <input type="text" defaultValue={max} onBlur={ev => setMax(ev.target)} placeholder="最大层级" />
-          {Sect}
+          <Dialog title="数据切片" show={showDialog} stateChange={(enter: boolean) => { setShowDialog(false); enter && section(model) }}>
+            <div className={styles.dialogitem + ' ' + styles.min}>
+              <label>层级设置</label>
+              <input type="text" defaultValue={min} onBlur={ev => setMin(ev.target)} placeholder="最小层级" />
+              <input type="text" defaultValue={max} onBlur={ev => setMax(ev.target)} placeholder="最大层级" />
+            </div>
+          </Dialog>
+          <b style={{ cursor: 'pointer', color: '#3e7cd3' }} onClick={() => setShowDialog(true)}>切片</b>
         </Fragment>
       )
     }
@@ -137,9 +150,9 @@ export default function Grent({ setItemStaus, modelDispatch, referData, delHandl
             {api.judge && ((model.status === 2 || model.status === 9) && Jude)}
             {api.transform && ((model.status === 3 || model.status === 7) && Tran)}
             {api.section && (model.status === 4 && Sect)}
-            {api.transfer && (model.status === 5 || model.status === 8 || model.status === 11 || model.status === 10 || model.status === 12 && Tf)}
-            <b onClick={() => delHandle(model)} style={{ cursor: 'pointer' }}>删除</b>
+            {api.transfer && ((model.status === 5 || model.status === 10) && Tf)}
             {privItem && privItem(model)}
+            <b onClick={() => delHandle(model)} style={{ cursor: 'pointer', color: '#f46579' }}>删除</b>
           </Fragment>
         )}
       </Item>

src/page/List/ListState/action.ts

@@ -75,6 +75,7 @@ export const getListAction = async (dispatch: Function, url: string, current: nu
     type: CHANGE_PAGING,
     plyload: {
       total: res.data.data.totalPages,
+      number: res.data.data.totalElements,
       current: current
     }
   })

src/page/List/ListState/state.ts

@@ -6,7 +6,8 @@ export const initState = <T>(): State<T>  => {
     list: [],
     paging: {
       current: 1,
-      total: 0
+      total: 0,
+      number: 0
     }
   }
 }

src/page/List/ListState/type.d.ts

@@ -5,7 +5,8 @@ interface Action {
 
 interface Paging {
   current: number,
-  total: number
+  total: number,
+  number: number
 }
 
 interface State<T> {

src/page/List/ModelList.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import GrentReducer from './grent'
-import Upload from '../components/Upload'
+import Upload from '../../components/Upload'
 import styles from './index.module.css'
 
 export default function ModelList({ className }: any) {
@@ -14,10 +14,10 @@ export default function ModelList({ className }: any) {
 
   return (
     <div className={className}>
-      {Element}
-      <div className={styles.uplayer + ' ' + styles.inuplayer} >
-        <Upload className={styles.uplayer} api='/fdModel/upload' check='/fdModel/check/' upHandle={referData} />
+      <div className={styles.uplayer} >
+        <Upload api='/fdModel/upload' check='/fdModel/check/' upHandle={referData} className={styles.inputitem} />
       </div>
+      {Element}
     </div>
   )
 }

src/page/List/ResterList.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import GrentReducer from './grent'
-import Upload from '../components/Upload'
+import Upload from '../../components/Upload'
 import styles from './index.module.css'
 import { sectionStepAction } from './ListState'
-import Step from '../components/Upload/Step'
+import Step from '../../components/Upload/Step'
 import Coor from './Coor'
 
 const intervals: Array<any> = []
@@ -59,11 +59,11 @@ export default function ModelList({ className }: any) {
 
   return (
     <div className={className}>
-      {Element}
       <div className={styles.uplayer + ' ' + styles.inuplayer} >
         <Coor coor={coorstr} onChange={(val: string) => setCoor(val)} />
-        <Upload className={styles.uplayer} api='/raster/upload' body={{ coord }} check='/raster/check/' upHandle={referData} />
+        <Upload api='/raster/upload' body={{ coord }} check='/raster/check/' upHandle={referData} className={styles.inputitem} />
       </div>
+      {Element}
     </div>
   )
 }

src/page/List/grent.tsx

@@ -1,7 +1,7 @@
 import React, { useReducer, useEffect, useState, Fragment } from 'react'
-import List from '../components/List'
-import Item from '../components/item'
-import Paging from '../components/Paging'
+import List from '../../components/List'
+import Item from '../../components/item'
+import Paging from '../../components/Paging'
 import styles from './index.module.css'
 import GrentOper from './GrentOper'
 import {
@@ -18,12 +18,13 @@ interface ItemsProps {
   children: Function,
   changePage: Function,
   total: number,
-  current: number
+  current: number,
+  number: number
 }
 
 const ListItems = (props: ItemsProps) => {
   return (
-    <Fragment>
+    <div className={styles.mainlayer}>
       <List data={props.list} className={styles.listlayer}>
         <Item data={['文件名', '路径', '类型', '创建时间', '当前状态', '操作']} />
         {(model: Model) => props.children(model)}
@@ -33,10 +34,11 @@ const ListItems = (props: ItemsProps) => {
           total={props.total}
           current={props.current}
           show={5}
+          number={props.number}
           handleChange={(current: number) => props.changePage(current)} />
       </div>
 
-    </Fragment>
+    </div>
   )
 }
 
@@ -52,7 +54,8 @@ interface GrentApi {
   ItemFn?: Function,
   region?: boolean
 }
-export default function GrentReducer({ getUrl, delUrl, zipUrl, sectionUrl, transformUrl, transferUrl, judgeUrl, ItemFn, region  }: GrentApi) {
+export default function GrentReducer({ getUrl, delUrl, zipUrl, sectionUrl, transformUrl, transferUrl, judgeUrl, ItemFn, region }: GrentApi) {
+  let [showDialog, setShowDialog] = useState(false)
   let [referCount, setReferCount] = useState(0)
   let [modelState, modelDispatch] = useReducer(reducer, initialState())
   const models = getList(modelState)
@@ -76,6 +79,7 @@ export default function GrentReducer({ getUrl, delUrl, zipUrl, sectionUrl, trans
       list={models}
       total={modelState.paging.total}
       current={modelState.paging.current}
+      number={modelState.paging.number}
       changePage={(page: number) => updateAction(page)}>
       {(model: Model) => {
         let { ItemFn: PublicItemFn } = GrentOper({
@@ -84,7 +88,9 @@ export default function GrentReducer({ getUrl, delUrl, zipUrl, sectionUrl, trans
           referData,
           delHandle,
           api: { zip: zipUrl, section: sectionUrl, transfer: transferUrl, judge: judgeUrl, transform: transformUrl },
-          region
+          region,
+          showDialog, 
+          setShowDialog
         })
         return (
           <Fragment key={model.id}>

src/page/List/index.module.css

@@ -1,43 +1,32 @@
-.listlayer {
-  display: grid;
-  grid-template-columns: 2fr minmax(100px, 4fr) 1fr 2fr minmax(100px, 2fr) minmax(100px, 3fr);
+.mainlayer {
+  background-color: #1b1b1b;
   padding: 24px;
-  border: 1px solid #ebebeb;
   border-radius: 3px;
+  margin-top: 15px;
 }
 
-.uplayer {
-  display: inline-block;
-  margin-top: 20px;
+.listlayer {
+  display: grid;
+  grid-template-columns: 2fr minmax(100px, 4fr) 1fr 2fr minmax(100px, 2fr) minmax(100px, 3fr);
 }
 
-.paging {
-  margin-top: 10px;
-  text-align: center;
-}
 
-.inuplayer {
-  height: 32px;
-  position: relative;
-  box-sizing: border-box;
-  font-size: 12px;
-}
 
-.inuplayer input {
-  width: 201px;
-  height: 100%;;
-  left: 0;
-  top: 0;
-  box-sizing: border-box;
-  padding: 5px 10px;
+.uplayer {
+  margin-top: 20px;
+  background-color: #1b1b1b;
+  padding: 25px 18px;
 }
 
-.inuplayer > div {
-  margin-top: 10px;
+ 
+.paging {
+  margin-top: 20px;
+  text-align: right;
 }
 
 .tip {
   position: relative;
+  display: inline-block;
 }
 
 .tip > div {
@@ -55,4 +44,36 @@
   color: #E6A23C;
   font-size: 12px;
   z-index: 3;
+}
+
+.inputitem {
+  display: inline-block;
+  font-size: 13px;
+  margin-right: 10px;
+  vertical-align: text-top;
+}
+
+.inputitem input {
+  height: 22px;
+  line-height: 22px;
+  margin: 0;
+}
+
+
+.dialogitem label {
+  display: block;
+  font-size: 13px;
+  color: #b1b1b1;;
+  margin-bottom: 10px;
+}
+
+.dialogitem input {
+  height: 22px;
+  line-height: 22px;
+  margin: 0;
+  color: #b1b1b1;
+}
+
+.min input{
+  width: 100px;
 }

src/page/StyleEdit/index.tsx

@@ -1,7 +1,7 @@
 import React, { useReducer, useEffect, useState, Fragment } from 'react'
 import { RouteComponentProps } from 'react-router'
 import { reducer, initialState, getLayersAction, updateLayerAction, saveLayersAction, Item } from './reducer'
-import VectorShow from '../components/VectorShow'
+import VectorShow from '../../components/VectorShow'
 
 type Attr = 'lineColor' | 'lineWidth' | 'fillColor' | 'show'
 type EvAttr = 'value' | 'checked'
@@ -19,7 +19,13 @@ function StyleEdit(props: RouteComponentProps) {
   const changeHandle = (attr: Attr, evAttr: EvAttr = 'value') => (ev: React.ChangeEvent<HTMLInputElement>) => {
     updateLayerAction(dispatch, layer, { ...style, [attr]: ev.target[evAttr] })
   }
-  const saveHandle = () => { saveLayersAction(style, params.id) }
+  const saveHandle = async () => {{
+    if (await saveLayersAction(style, params.id)) {
+      alert('成功发布')
+    } else {
+      alert('发布失败')
+    }
+  }}
   const verctorInfo = style && { ...style, url: style.getUrl }
 
   return (
@@ -45,7 +51,7 @@ function StyleEdit(props: RouteComponentProps) {
             <label>是否显示</label>
             <input type="checkbox" checked={style.show} onChange={changeHandle('show', 'checked')} />
           </div>
-          <button onClick={saveHandle}>保存</button>
+          <button onClick={saveHandle}>发布</button>
         </Fragment>
       )}
       {style && <VectorShow {...verctorInfo} height={2500} />}

src/page/StyleEdit/reducer.ts

@@ -1,5 +1,5 @@
 import http from '../../http'
-import { LayerStyle } from '../components/VectorShow'
+import { LayerStyle } from '../../components/VectorShow'
 import path from 'path'
 
 export const ADDLAYER = Symbol('add_layer')

src/page/components/Paging/index.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import styles from './index.module.css'
-
-interface PagingProps {
-  current: number,
-  total: number,
-  handleChange: Function,
-  show: number,
-  className?: string
-}
-
-function intercept(current: number, maxT: number, dis: number, minT = 1) {
-  let cdis = Math.floor(dis / 2)
-  let min = current - cdis
-  let max = current + cdis
-
-  if (min < minT) {
-    max = max + (minT - min)
-    min = minT
-  } else if (max > maxT) {
-    min = min - (max - maxT)
-    max = maxT
-  }
-
-  min = min < minT ? minT : min
-  max = max > maxT ? maxT : max
-
-  return { min, max }
-}
-
-function Paging({ current = 1, show = 5, total, handleChange, className = ''} : PagingProps) {
-  const clickHandle = (select: number) => current !== select && handleChange(select)
-  const { min, max } = intercept(current, total, show)
-
-  let items = []
-  for (let i = min; i <= max; i++) {
-    items.push(<span key={i} onClick={() => clickHandle(i)} className={i === current ? styles.active: ''}>{i}</span>)
-  }
-
-  return (
-    <div className={styles.paginglayer + ' ' + className}>{items}</div>
-  )
-}
-
-export default Paging

src/router.config.ts

@@ -0,0 +1,42 @@
+interface RouteItem {
+  title: string,
+  path: string,
+  navigation:boolean,
+  icon?: string,
+  parent?: RouteItem,
+  component: any
+}
+
+const config: Array<RouteItem> = [
+  {
+    title: '栅格数据',
+    path: '/grid',
+    navigation: true,
+    icon: require('./assets/images/icon_sys01.png'),
+    component: require('./page/List/ResterList').default
+  },
+  {
+    title: '3D模型',
+    path: '/model',
+    navigation: true,
+    icon: require('./assets/images/icon_sys02.png'),
+    component: require('./page/List/ModelList').default
+  },
+  {
+    title: '矢量数据',
+    path: '/gis',
+    navigation: true,
+    icon: require('./assets/images/icon_sys03.png'),
+    component: require('./page/List/GeoList').default
+  }
+]
+
+config.push({
+  title: '编辑样式',
+  path: '/style/:id',
+  navigation: false,
+  component: require('./page/StyleEdit').default,
+  parent: config[2]
+})
+
+export default config