Merge pull request #148 from jiangby123/bread_crumb

增加面包屑

spug_api/apps/setting/views.py

@@ -55,14 +55,16 @@ def email_test(request):
     if error is None:
         try:
             if form.port == 465:
-                server = smtplib.SMTP_SSL(form.server, form.port)
+                server = smtplib.SMTP_SSL(form.server, form.port, timeout=3)
             else:
-                server = smtplib.SMTP(form.server, form.port)
+                server = smtplib.SMTP(form.server, form.port, timeout=3)
             server.login(form.username, form.password)
-            return json_response()
+            return json_response()    
+
         except Exception as e:
-            error = e.smtp_error.decode('utf-8')
+            error = f'{e}'
             return json_response(error=error)
+
     return json_response(error=error)
 
 

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>)
 }

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>)
 }

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>
+    )
+  }
+}

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;
+}

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;

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>
     )
   }];

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>
     )
   }];

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="环境列表"

spug_web/src/pages/deploy/do/Ext2Index.js

@@ -144,7 +144,7 @@ class Ext1Index extends React.Component {
                   <Steps.Step {...this.getStatus('local', 2 + index)} key={index} title={item.title}/>
                 ))}
               </Steps>}>
-              <OutView outputs={lds.get(store.outputs, 'local.data', [])}/>
+              <OutView id="local"/>
             </Collapse.Panel>
           </Collapse>
 
@@ -164,7 +164,7 @@ class Ext1Index extends React.Component {
                       ))}
                     </Steps>
                   </div>}>
-                  <OutView outputs={lds.get(store.outputs, `${item.id}.data`, [])}/>
+                  <OutView id={item.id}/>
                 </Collapse.Panel>
               ))}
             </Collapse>