From 2d2d413b93aaf9701eabdffc841afb2eed090ee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E4=BC=AF=E6=B4=8B?= <jiangby@weipaitang.com>
Date: Thu, 9 Jul 2020 15:16:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=9D=A2=E5=8C=85=E5=B1=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/components/AuthCard.js        |  9 ++-
 spug_web/src/components/AuthDiv.js         |  4 +-
 spug_web/src/components/PageWrapper.js     | 75 ++++++++++++++++++++++
 spug_web/src/components/index.module.css   | 14 ++++
 spug_web/src/layout/layout.module.css      |  5 +-
 spug_web/src/pages/config/app/Table.js     |  2 +-
 spug_web/src/pages/config/service/Table.js |  2 +-
 spug_web/src/pages/config/setting/index.js |  8 ++-
 8 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 spug_web/src/components/PageWrapper.js

diff --git a/spug_web/src/components/AuthCard.js b/spug_web/src/components/AuthCard.js
index 94ed861..5a3d4e6 100644
--- a/spug_web/src/components/AuthCard.js
+++ b/spug_web/src/components/AuthCard.js
@@ -4,14 +4,13 @@
  * Released under the AGPL-3.0 License.
  */
 import React from 'react';
-import {Card} from 'antd';
-import { hasPermission } from 'libs';
+import { hasPermission } from "../libs";
+import PageWrapper from './PageWrapper';
 
-
-export default function AuthCard(props) {
+export default function AuthDiv(props) {
   let disabled = props.disabled === undefined ? false : props.disabled;
   if (props.auth && !hasPermission(props.auth)) {
     disabled = true;
   }
-  return disabled ? null : <Card {...props}>{props.children}</Card>
+  return disabled ? null : (props.auth.indexOf('add')===-1?<PageWrapper breadcrumbs={props.breadcrumbs}><div {...props}>{props.children}</div></PageWrapper>:<div {...props}>{props.children}</div>)
 }
diff --git a/spug_web/src/components/AuthDiv.js b/spug_web/src/components/AuthDiv.js
index 8d7fbad..5a3d4e6 100644
--- a/spug_web/src/components/AuthDiv.js
+++ b/spug_web/src/components/AuthDiv.js
@@ -5,12 +5,12 @@
  */
 import React from 'react';
 import { hasPermission } from "../libs";
-
+import PageWrapper from './PageWrapper';
 
 export default function AuthDiv(props) {
   let disabled = props.disabled === undefined ? false : props.disabled;
   if (props.auth && !hasPermission(props.auth)) {
     disabled = true;
   }
-  return disabled ? null : <div {...props}>{props.children}</div>
+  return disabled ? null : (props.auth.indexOf('add')===-1?<PageWrapper breadcrumbs={props.breadcrumbs}><div {...props}>{props.children}</div></PageWrapper>:<div {...props}>{props.children}</div>)
 }
diff --git a/spug_web/src/components/PageWrapper.js b/spug_web/src/components/PageWrapper.js
new file mode 100644
index 0000000..0ddb21b
--- /dev/null
+++ b/spug_web/src/components/PageWrapper.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Breadcrumb } from 'antd';
+import menus from '../menus';
+import styles from './index.module.css';
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.lastPath = window.location.pathname;
+    const breadInfo = this.assembleMenu(this.lastPath);
+    this.state = {breadInfo};
+  }
+
+  assembleMenu(currentPath) {
+    const menu = []
+    if (Array.isArray(menu)) {
+      menus.forEach(item => {
+        if (!item) return false;
+        if (item.path === currentPath) {
+          menu.push({
+            title: item.title
+          })
+        } else {
+          if (Array.isArray(item.child)) {
+            item.child.forEach(itemChild => {
+              if (itemChild.path === currentPath) {
+                menu.push({
+                  title: item.title
+                }, {
+                  title: itemChild.title
+                })
+              }
+            })
+          }
+        }
+      })
+    }
+    return menu
+  }
+
+  componentDidUpdate() {
+    const currentPath = window.location.pathname;
+    if (this.lastPath !== currentPath) {
+      const breadInfo = this.assembleMenu(currentPath)
+      this.setState({breadInfo});
+    }
+  }
+
+  render() {
+    const { breadcrumbs, children } = this.props;
+    const { breadInfo } = this.state;
+    return (
+      <div className={styles.breadWrapper}>
+        {(!!breadInfo.length || (breadcrumbs && breadcrumbs.length > 0)) && (
+          <div className={styles.breadStyle}>
+            <Breadcrumb>
+              {
+                (breadcrumbs ? breadcrumbs : breadInfo).map(item => {
+                  return (
+                    <Breadcrumb.Item key={item.title}>
+                      {
+                        item.href ? (<a href={item.href}>{item.title}</a>) : item.title
+                      }
+                    </Breadcrumb.Item>
+                  )
+                })
+              }
+            </Breadcrumb>
+          </div>
+        )}
+        <div className={styles.router}>{children}</div>
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/spug_web/src/components/index.module.css b/spug_web/src/components/index.module.css
index 4555710..d773178 100644
--- a/spug_web/src/components/index.module.css
+++ b/spug_web/src/components/index.module.css
@@ -36,3 +36,17 @@
     top: 0;
     right: 0;
 }
+
+.breadWrapper .router {
+    padding: 24px 24px 0;
+}
+
+.breadStyle {
+    width: 100%;
+    height: 54px;
+    overflow: hidden;
+    background: #fff;
+    padding: 16px 32px 0;
+    border-bottom: 1px solid #e8e8e8;
+    z-index: 1;
+}
\ No newline at end of file
diff --git a/spug_web/src/layout/layout.module.css b/spug_web/src/layout/layout.module.css
index 651b7c4..a218d44 100644
--- a/spug_web/src/layout/layout.module.css
+++ b/spug_web/src/layout/layout.module.css
@@ -15,10 +15,13 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 24px 24px 0;
     overflow-y: scroll;
 }
 
+.content .router {
+    padding: 24px 24px 0;
+}
+
 .trigger {
     font-size: 20px;
     line-height: 64px;
diff --git a/spug_web/src/pages/config/app/Table.js b/spug_web/src/pages/config/app/Table.js
index d266056..0701893 100644
--- a/spug_web/src/pages/config/app/Table.js
+++ b/spug_web/src/pages/config/app/Table.js
@@ -41,7 +41,7 @@ class ComTable extends React.Component {
         <Divider type="vertical"/>
         <LinkButton auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</LinkButton>
         <Divider type="vertical"/>
-        <AuthLink auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</AuthLink>
+        <AuthLink auth="config.app.view_config" to={{pathname:`/config/setting/app/${info.id}`,state:{title:info.name}}}>配置</AuthLink>
       </span>
     )
   }];
diff --git a/spug_web/src/pages/config/service/Table.js b/spug_web/src/pages/config/service/Table.js
index 05327e7..64ae318 100644
--- a/spug_web/src/pages/config/service/Table.js
+++ b/spug_web/src/pages/config/service/Table.js
@@ -40,7 +40,7 @@ class ComTable extends React.Component {
         <Divider type="vertical"/>
         <LinkButton auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
         <Divider type="vertical"/>
-        <AuthLink auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</AuthLink>
+        <AuthLink auth="config.src.view_config" to={{pathname:`/config/setting/src/${info.id}`,state:{title:info.name}}}>配置</AuthLink>
       </span>
     )
   }];
diff --git a/spug_web/src/pages/config/setting/index.js b/spug_web/src/pages/config/setting/index.js
index 7d64c68..b7522ee 100644
--- a/spug_web/src/pages/config/setting/index.js
+++ b/spug_web/src/pages/config/setting/index.js
@@ -60,10 +60,16 @@ class Index extends React.Component {
     })
   };
 
+  chooseBread() {
+    const currentPath = window.location.pathname;
+    if (currentPath.indexOf('src') !== -1) return [{title:'配置中心'}, {title:'服务配置'}, {title:this.props.location.state.title}];
+    if (currentPath.indexOf('app') !== -1) return [{title:'配置中心'}, {title:'应用配置'}, {title:this.props.location.state.title}];
+  }
+
   render() {
     const {view} = this.state;
     return (
-      <AuthDiv auth={`config.${store.type}.view_config`} className={styles.container}>
+      <AuthDiv breadcrumbs={this.chooseBread()} auth={`config.${store.type}.view_config`} className={styles.container}>
         <div className={styles.left}>
           <PageHeader
             title="环境列表"