From 87576ebe4e1c75931a517f707c3a86f3ebef15f9 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Mon, 28 Sep 2020 11:17:22 +0800
Subject: [PATCH] =?UTF-8?q?U=20=E6=97=A0=E6=9D=83=E9=99=90=E7=9A=84?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E7=8E=B0=E5=B7=B2=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E6=98=BE=E7=A4=BA=20#203?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/components/Action.js             | 39 ++++++++++
 spug_web/src/components/AuthButton.js         |  2 +-
 spug_web/src/components/AuthLink.js           | 17 -----
 spug_web/src/components/index.js              |  4 +-
 spug_web/src/index.css                        |  4 +-
 spug_web/src/pages/alarm/contact/Table.js     | 16 ++--
 spug_web/src/pages/alarm/group/Table.js       | 16 ++--
 spug_web/src/pages/config/app/Table.js        | 22 +++---
 .../src/pages/config/environment/Table.js     | 16 ++--
 spug_web/src/pages/config/service/Table.js    | 19 +++--
 .../src/pages/config/setting/TableView.js     | 18 ++---
 spug_web/src/pages/deploy/app/Table.js        | 38 +++++-----
 spug_web/src/pages/deploy/request/Table.js    | 74 +++++++++----------
 spug_web/src/pages/exec/template/Table.js     | 16 ++--
 spug_web/src/pages/host/Table.js              | 27 +++----
 spug_web/src/pages/monitor/Table.js           | 19 +++--
 spug_web/src/pages/schedule/Table.js          | 21 ++----
 spug_web/src/pages/system/account/Table.js    |  9 +--
 18 files changed, 190 insertions(+), 187 deletions(-)
 create mode 100644 spug_web/src/components/Action.js
 delete mode 100644 spug_web/src/components/AuthLink.js

diff --git a/spug_web/src/components/Action.js b/spug_web/src/components/Action.js
new file mode 100644
index 0000000..230b337
--- /dev/null
+++ b/spug_web/src/components/Action.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Divider, Button } from 'antd';
+import { hasPermission } from 'libs';
+
+function canVisible(auth) {
+  return !auth || hasPermission(auth)
+}
+
+class Action extends React.Component {
+  static Link(props) {
+    return <Link {...props}/>
+  }
+
+  static Button(props) {
+    return <Button type="link" {...props} style={{padding: 0}}/>
+  }
+
+  render() {
+    const children = [];
+    this.props.children.forEach((el, index) => {
+      if (canVisible(el.props.auth)) {
+        if (children.length !== 0) children.push(<Divider key={index} type="vertical"/>);
+        children.push(el)
+      }
+    })
+
+    return <span>
+      {children}
+    </span>
+  }
+}
+
+export default Action
diff --git a/spug_web/src/components/AuthButton.js b/spug_web/src/components/AuthButton.js
index 52e700d..9fe5a7e 100644
--- a/spug_web/src/components/AuthButton.js
+++ b/spug_web/src/components/AuthButton.js
@@ -13,5 +13,5 @@ export default function AuthButton(props) {
   if (props.auth && !hasPermission(props.auth)) {
     disabled = true;
   }
-  return <Button {...props} disabled={disabled}>{props.children}</Button>
+  return disabled ? null : <Button {...props}>{props.children}</Button>
 }
diff --git a/spug_web/src/components/AuthLink.js b/spug_web/src/components/AuthLink.js
deleted file mode 100644
index 0dee9c2..0000000
--- a/spug_web/src/components/AuthLink.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
- * Copyright (c) <spug.dev@gmail.com>
- * Released under the AGPL-3.0 License.
- */
-import React from 'react';
-import {Link} from 'react-router-dom';
-import { hasPermission } from 'libs';
-
-
-export default function AuthLink(props) {
-  let disabled = props.disabled;
-  if (props.auth && !hasPermission(props.auth)) {
-    disabled = true;
-  }
-  return <Link {...props} disabled={disabled}>{props.children}</Link>
-}
diff --git a/spug_web/src/components/index.js b/spug_web/src/components/index.js
index 225b322..0cd38c8 100644
--- a/spug_web/src/components/index.js
+++ b/spug_web/src/components/index.js
@@ -8,10 +8,10 @@ import SearchForm from './SearchForm';
 import LinkButton from './LinkButton';
 import AuthButton from './AuthButton';
 import AuthFragment from './AuthFragment';
-import AuthLink from './AuthLink';
 import AuthCard from './AuthCard';
 import AuthDiv from './AuthDiv';
 import ACEditor from './ACEditor';
+import Action from './Action';
 
 export {
   StatisticsCard,
@@ -19,8 +19,8 @@ export {
   SearchForm,
   LinkButton,
   AuthButton,
-  AuthLink,
   AuthCard,
   AuthDiv,
   ACEditor,
+  Action,
 }
diff --git a/spug_web/src/index.css b/spug_web/src/index.css
index 4e61174..5c577d2 100644
--- a/spug_web/src/index.css
+++ b/spug_web/src/index.css
@@ -15,6 +15,6 @@ code {
 }
 
 /* Common CSS style */
-.span-button {
-    padding: 0;
+.none {
+    display: none;
 }
\ No newline at end of file
diff --git a/spug_web/src/pages/alarm/contact/Table.js b/spug_web/src/pages/alarm/contact/Table.js
index 97a35ac..a3bbb66 100644
--- a/spug_web/src/pages/alarm/contact/Table.js
+++ b/spug_web/src/pages/alarm/contact/Table.js
@@ -5,11 +5,11 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
+import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import http from 'libs/http';
+import {http, hasPermission} from 'libs';
 import store from './store';
-import { LinkButton } from "components";
+import { Action } from "components";
 
 @observer
 class ComTable extends React.Component {
@@ -42,12 +42,12 @@ class ComTable extends React.Component {
     ellipsis: true
   }, {
     title: '操作',
+    className: hasPermission('alarm.contact.edit|alarm.contact.del') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/alarm/group/Table.js b/spug_web/src/pages/alarm/group/Table.js
index 586268d..cee4bcf 100644
--- a/spug_web/src/pages/alarm/group/Table.js
+++ b/spug_web/src/pages/alarm/group/Table.js
@@ -5,12 +5,12 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
+import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import http from 'libs/http';
+import {http, hasPermission} from 'libs';
 import store from './store';
 import contactStore from '../contact/store';
-import { LinkButton } from "components";
+import { Action } from "components";
 import lds from 'lodash';
 
 @observer
@@ -58,12 +58,12 @@ class ComTable extends React.Component {
     ellipsis: true
   }, {
     title: '操作',
+    className: hasPermission('alarm.group.edit|alarm.group.del') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/config/app/Table.js b/spug_web/src/pages/config/app/Table.js
index d266056..c7bbe8c 100644
--- a/spug_web/src/pages/config/app/Table.js
+++ b/spug_web/src/pages/config/app/Table.js
@@ -5,10 +5,10 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
-import http from 'libs/http';
+import { Table, Modal, message } from 'antd';
+import { http, hasPermission } from 'libs';
 import store from './store';
-import { LinkButton, AuthLink } from 'components';
+import { Action } from 'components';
 
 @observer
 class ComTable extends React.Component {
@@ -33,16 +33,14 @@ class ComTable extends React.Component {
     ellipsis: true
   }, {
     title: '操作',
+    className: hasPermission('config.app.edit|config.app.del|config.app.view_config') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-        <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>
-      </span>
+      <Action>
+        <Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+        <Action.Button auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</Action.Button>
+        <Action.Link auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</Action.Link>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/config/environment/Table.js b/spug_web/src/pages/config/environment/Table.js
index 20534b3..9776c0d 100644
--- a/spug_web/src/pages/config/environment/Table.js
+++ b/spug_web/src/pages/config/environment/Table.js
@@ -5,11 +5,11 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
+import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import http from 'libs/http';
+import {http, hasPermission} from 'libs';
 import store from './store';
-import { LinkButton } from "components";
+import { Action } from "components";
 
 @observer
 class ComTable extends React.Component {
@@ -34,12 +34,12 @@ class ComTable extends React.Component {
     ellipsis: true
   }, {
     title: '操作',
+    className: hasPermission('config.env.edit|config.env.del') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="config.env.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="config.env.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth="config.env.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="config.env.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/config/service/Table.js b/spug_web/src/pages/config/service/Table.js
index 05327e7..128e189 100644
--- a/spug_web/src/pages/config/service/Table.js
+++ b/spug_web/src/pages/config/service/Table.js
@@ -5,11 +5,11 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
+import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import http from 'libs/http';
+import { http, hasPermission } from 'libs';
 import store from './store';
-import { LinkButton, AuthLink } from "components";
+import { Action } from "components";
 
 @observer
 class ComTable extends React.Component {
@@ -34,14 +34,13 @@ class ComTable extends React.Component {
     ellipsis: true
   }, {
     title: '操作',
+    className: hasPermission('config.src.edit|config.src.del|config.src.view_config') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <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>
-      </span>
+      <Action>
+        <Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+        <Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/config/setting/TableView.js b/spug_web/src/pages/config/setting/TableView.js
index 1d62f5a..185d5c7 100644
--- a/spug_web/src/pages/config/setting/TableView.js
+++ b/spug_web/src/pages/config/setting/TableView.js
@@ -5,10 +5,10 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, Tooltip, Icon, message } from 'antd';
-import { LinkButton } from 'components';
+import { Table, Modal, Tooltip, Icon, message } from 'antd';
+import { Action } from 'components';
 import ComForm from './Form';
-import http from 'libs/http';
+import { http, hasPermission } from 'libs';
 import store from './store';
 
 @observer
@@ -31,7 +31,6 @@ class TableView extends React.Component {
   }, {
     title: 'Value',
     dataIndex: 'value',
-    ellipsis: true
   }, {
     title: '修改人',
     width: 120,
@@ -43,12 +42,13 @@ class TableView extends React.Component {
   }, {
     title: '操作',
     width: 120,
+    className: hasPermission(`config.${store.type}.edit_config`) ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth={`config.${store.type}.edit_config`} onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth={`config.${store.type}.edit_config`} onClick={() => this.handleDelete(info)}>删除</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth={`config.${store.type}.edit_config`} onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth={`config.${store.type}.edit_config`}
+                       onClick={() => this.handleDelete(info)}>删除</Action.Button>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/deploy/app/Table.js b/spug_web/src/pages/deploy/app/Table.js
index a7be40c..63c3c04 100644
--- a/spug_web/src/pages/deploy/app/Table.js
+++ b/spug_web/src/pages/deploy/app/Table.js
@@ -6,10 +6,10 @@
 import React from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, Tag, Icon, message } from 'antd';
-import http from 'libs/http';
+import { Table, Modal, Tag, Icon, message } from 'antd';
+import { http, hasPermission } from 'libs';
 import store from './store';
-import { LinkButton } from "components";
+import { Action } from "components";
 import CloneConfirm from './CloneConfirm';
 import envStore from 'pages/config/environment/store';
 import lds from 'lodash';
@@ -45,16 +45,14 @@ class ComTable extends React.Component {
     ellipsis: true
   }, {
     title: '操作',
+    className: hasPermission('deploy.app.edit|deploy.app.del') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
+        <Action.Button auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</Action.Button>
+        <Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
+        <Action.Button auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</Action.Button>
+      </Action>
     )
   }];
 
@@ -127,15 +125,15 @@ class ComTable extends React.Component {
       render: value => value ? <Tag color="green">开启</Tag> : <Tag color="red">关闭</Tag>
     }, {
       title: '操作',
+      className: hasPermission('deploy.app.config|deploy.app.edit') ? null : 'none',
       render: info => (
-        <span>
-          <LinkButton auth="deploy.app.config"
-                      onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</LinkButton>
-          <Divider type="vertical"/>
-          <LinkButton auth="deploy.app.edit" onClick={e => store.showExtForm(e, record.id, info)}>编辑</LinkButton>
-          <Divider type="vertical"/>
-          <LinkButton auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</LinkButton>
-        </span>
+        <Action>
+          <Action.Button
+            auth="deploy.app.config"
+            onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</Action.Button>
+          <Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, record.id, info)}>编辑</Action.Button>
+          <Action.Button auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</Action.Button>
+        </Action>
       )
     }];
 
diff --git a/spug_web/src/pages/deploy/request/Table.js b/spug_web/src/pages/deploy/request/Table.js
index 4329f4e..db71d00 100644
--- a/spug_web/src/pages/deploy/request/Table.js
+++ b/spug_web/src/pages/deploy/request/Table.js
@@ -5,10 +5,10 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, Icon, Popover, Tag, message } from 'antd';
-import http from 'libs/http';
+import { Table, Modal, Icon, Popover, Tag, message } from 'antd';
+import { http, hasPermission } from 'libs';
+import { Action } from "components";
 import store from './store';
-import { LinkButton, AuthLink } from "components";
 
 @observer
 class ComTable extends React.Component {
@@ -82,54 +82,54 @@ class ComTable extends React.Component {
     sorter: (a, b) => a['created_at'].localeCompare(b['created_at'])
   }, {
     title: '操作',
+    className: hasPermission('deploy.request.do|deploy.request.edit|deploy.request.approve|deploy.request.del') ? null : 'none',
     render: info => {
       switch (info.status) {
         case '-3':
-          return <React.Fragment>
-            <AuthLink auth="deploy.request.do" to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</AuthLink>
-            <Divider type="vertical"/>
-            <AuthLink auth="deploy.request.do" to={`/deploy/do/ext${info['app_extend']}/${info.id}`}>发布</AuthLink>
-            <Divider type="vertical"/>
-            <LinkButton
+          return <Action>
+            <Action.Link
+              auth="deploy.request.do"
+              to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</Action.Link>
+            <Action.Link auth="deploy.request.do" to={`/deploy/do/ext${info['app_extend']}/${info.id}`}>发布</Action.Link>
+            <Action.Button
               auth="deploy.request.do"
               disabled={info.type === '2'}
               loading={this.state.loading}
-              onClick={() => this.handleRollback(info)}>回滚</LinkButton>
-          </React.Fragment>;
+              onClick={() => this.handleRollback(info)}>回滚</Action.Button>
+          </Action>;
         case '3':
-          return <React.Fragment>
-            <AuthLink auth="deploy.request.do" to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</AuthLink>
-            <Divider type="vertical"/>
-            <LinkButton
+          return <Action>
+            <Action.Link
+              auth="deploy.request.do"
+              to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</Action.Link>
+            <Action.Button
               auth="deploy.request.do"
               disabled={info.type === '2'}
               loading={this.state.loading}
-              onClick={() => this.handleRollback(info)}>回滚</LinkButton>
-          </React.Fragment>;
+              onClick={() => this.handleRollback(info)}>回滚</Action.Button>
+          </Action>;
         case '-1':
-          return <React.Fragment>
-            <LinkButton auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-            <Divider type="vertical"/>
-            <LinkButton auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-          </React.Fragment>;
+          return <Action>
+            <Action.Button auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+            <Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+          </Action>;
         case '0':
-          return <React.Fragment>
-            <LinkButton auth="deploy.request.approve" onClick={() => store.showApprove(info)}>审核</LinkButton>
-            <Divider type="vertical"/>
-            <LinkButton auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-            <Divider type="vertical"/>
-            <LinkButton auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-          </React.Fragment>;
+          return <Action>
+            <Action.Button auth="deploy.request.approve" onClick={() => store.showApprove(info)}>审核</Action.Button>
+            <Action.Button auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+            <Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+          </Action>;
         case '1':
-          return <React.Fragment>
-            <AuthLink auth="deploy.request.do" to={`/deploy/do/ext${info['app_extend']}/${info.id}`}>发布</AuthLink>
-            <Divider type="vertical"/>
-            <LinkButton auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-          </React.Fragment>;
+          return <Action>
+            <Action.Link auth="deploy.request.do" to={`/deploy/do/ext${info['app_extend']}/${info.id}`}>发布</Action.Link>
+            <Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+          </Action>;
         case '2':
-          return (
-            <AuthLink auth="deploy.request.do" to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</AuthLink>
-          );
+          return <Action>
+            <Action.Link
+              auth="deploy.request.do"
+              to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</Action.Link>
+          </Action>;
         default:
           return null
       }
diff --git a/spug_web/src/pages/exec/template/Table.js b/spug_web/src/pages/exec/template/Table.js
index dbfb29f..e5be097 100644
--- a/spug_web/src/pages/exec/template/Table.js
+++ b/spug_web/src/pages/exec/template/Table.js
@@ -5,11 +5,11 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
+import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import http from 'libs/http';
+import {http,hasPermission } from 'libs';
+import { Action } from "components";
 import store from './store';
-import { LinkButton } from "components";
 
 @observer
 class ComTable extends React.Component {
@@ -33,12 +33,12 @@ class ComTable extends React.Component {
     ellipsis: true
   }, {
     title: '操作',
+    className: hasPermission('exec.template.edit|exec.template.del') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="exec.template.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="exec.template.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth="exec.template.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="exec.template.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/host/Table.js b/spug_web/src/pages/host/Table.js
index ee776a4..1ed7bb9 100644
--- a/spug_web/src/pages/host/Table.js
+++ b/spug_web/src/pages/host/Table.js
@@ -5,11 +5,11 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, message } from 'antd';
-import { LinkButton } from 'components';
+import { Table, Modal, message } from 'antd';
+import { Action } from 'components';
 import ComForm from './Form';
 import ComImport from './Import';
-import http from 'libs/http';
+import { http, hasPermission} from 'libs';
 import store from './store';
 
 @observer
@@ -19,11 +19,6 @@ class ComTable extends React.Component {
   }
 
   columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80
-  }, {
     title: '类别',
     dataIndex: 'zone',
   }, {
@@ -36,7 +31,8 @@ class ComTable extends React.Component {
     sorter: (a, b) => a.name.localeCompare(b.name)
   }, {
     title: '端口',
-    dataIndex: 'port'
+    dataIndex: 'port',
+    width: 100,
   }, {
     title: '备注',
     dataIndex: 'desc',
@@ -44,14 +40,13 @@ class ComTable extends React.Component {
   }, {
     title: '操作',
     width: 200,
+    className: hasPermission('host.host.edit|host.host.del|host.host.console') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+        <Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/monitor/Table.js b/spug_web/src/pages/monitor/Table.js
index 76162af..3d39591 100644
--- a/spug_web/src/pages/monitor/Table.js
+++ b/spug_web/src/pages/monitor/Table.js
@@ -5,10 +5,10 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, Tag, message } from 'antd';
-import { LinkButton } from 'components';
+import { Table, Modal, Tag, message } from 'antd';
+import { Action } from 'components';
 import ComForm from './Form';
-import http from 'libs/http';
+import {http, hasPermission} from 'libs';
 import store from './store';
 import hostStore from '../host/store';
 import lds from 'lodash';
@@ -82,14 +82,13 @@ class ComTable extends React.Component {
     sorter: (a, b) => a.latest_run_time.localeCompare(b.latest_run_time)
   }, {
     title: '操作',
+    className: hasPermission('monitor.monitor.edit|monitor.monitor.del') ? null : 'none',
     render: info => (
-      <span>
-        <LinkButton auth="monitor.monitor.edit" onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="monitor.monitor.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="monitor.monitor.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
-      </span>
+      <Action>
+        <Action.Button auth="monitor.monitor.edit" onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</Action.Button>
+        <Action.Button auth="monitor.monitor.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+        <Action.Button auth="monitor.monitor.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+      </Action>
     ),
     width: 180
   }];
diff --git a/spug_web/src/pages/schedule/Table.js b/spug_web/src/pages/schedule/Table.js
index 368761f..4e20812 100644
--- a/spug_web/src/pages/schedule/Table.js
+++ b/spug_web/src/pages/schedule/Table.js
@@ -5,11 +5,11 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, Tag, Dropdown, Icon, Menu, message } from 'antd';
+import { Table, Modal, Tag, Dropdown, Icon, Menu, message } from 'antd';
 import ComForm from './Form';
-import http from 'libs/http';
+import {http} from 'libs';
 import store from './store';
-import { LinkButton } from "components";
+import { LinkButton, Action } from "components";
 import Info from './Info';
 import Record from './Record';
 
@@ -40,11 +40,6 @@ class ComTable extends React.Component {
   );
 
   columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
     title: '任务名称',
     dataIndex: 'name',
   }, {
@@ -75,17 +70,15 @@ class ComTable extends React.Component {
     title: '操作',
     width: 180,
     render: info => (
-      <span>
-        <LinkButton disabled={!info['latest_run_time']} onClick={() => store.showInfo(info)}>详情</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton auth="schedule.schedule.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
+      <Action>
+        <Action.Button disabled={!info['latest_run_time']} onClick={() => store.showInfo(info)}>详情</Action.Button>
+        <Action.Button auth="schedule.schedule.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
         <Dropdown overlay={() => this.moreMenus(info)} trigger={['click']}>
           <LinkButton>
             更多 <Icon type="down"/>
           </LinkButton>
         </Dropdown>
-      </span>
+      </Action>
     )
   }];
 
diff --git a/spug_web/src/pages/system/account/Table.js b/spug_web/src/pages/system/account/Table.js
index a90d8e9..be3a595 100644
--- a/spug_web/src/pages/system/account/Table.js
+++ b/spug_web/src/pages/system/account/Table.js
@@ -50,14 +50,13 @@ class ComTable extends React.Component {
     title: '操作',
     render: info => (
       <span>
-        <LinkButton className="span-button"
-                    onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</LinkButton>
+        <LinkButton onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</LinkButton>
         <Divider type="vertical"/>
-        <LinkButton className="span-button" onClick={() => store.showForm(info)}>编辑</LinkButton>
+        <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
         <Divider type="vertical"/>
-        <LinkButton disabled={info['type'] === 'ldap'} className="span-button" onClick={() => this.handleReset(info)}>重置密码</LinkButton>
+        <LinkButton disabled={info['type'] === 'ldap'} onClick={() => this.handleReset(info)}>重置密码</LinkButton>
         <Divider type="vertical"/>
-        <LinkButton className="span-button" onClick={() => this.handleDelete(info)}>删除</LinkButton>
+        <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
       </span>
     )
   }];