This is an automated email from the ASF dual-hosted git repository.
likeguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 8828fc2a Fixed abnormal display of the AUTH page (#244)
8828fc2a is described below
commit 8828fc2ac1ca796794ede7e0ef53bb70f4fe169d
Author: WeiS <[email protected]>
AuthorDate: Thu Sep 29 21:24:31 2022 +0800
Fixed abnormal display of the AUTH page (#244)
* update SiderMenu
* Optimized the verification code function
* HomePage update
* Optimize the style of HomePage
* fix error
* BasicConfig Auth styles update
* SearchList search display exception resolved
---
src/index.less | 19 +++++--
src/routes/Plugin/Common/index.js | 56 ++++++++++-----------
src/routes/Plugin/index.less | 31 ++++++++++--
src/routes/System/AppAuth/SearchContent.js | 13 ++---
src/routes/System/AppAuth/index.less | 80 ++++++++++++++++++------------
5 files changed, 125 insertions(+), 74 deletions(-)
diff --git a/src/index.less b/src/index.less
index 094d0a3e..8a6eb80c 100644
--- a/src/index.less
+++ b/src/index.less
@@ -25,13 +25,16 @@ body,
.plug-content-wrap {
padding: 24px
}
- .open{
+
+ .open {
color: #14c974;
}
- .close{
+
+ .close {
color: #ff586d;
}
- .ant-btn-danger{
+
+ .ant-btn-danger {
background: #f5222d !important;
color: #fff !important;
}
@@ -57,6 +60,7 @@ ol {
:global(.edit) {
cursor: pointer;
color: @primary-color;
+
&:hover {
color: @primary-color;
}
@@ -64,6 +68,7 @@ ol {
:global(.searchblock) {
display: flex !important;
+
button {
margin-left: 30px;
}
@@ -84,12 +89,16 @@ ol {
justify-content: space-between;
line-height: 40px;
padding: 0 20px;
+ border-radius: 5px;
+ box-shadow: 1px 2px 2px rgba(191, 189, 189, 0.5);
height: 40px;
background: #fff;
+
h3 {
font-size: 16px;
overflow: hidden;
}
+
button {
margin-top: 4px;
}
@@ -109,7 +118,9 @@ body {
:global {
.ant-spin-container {
overflow: visible !important;
+ box-shadow: 1px 2px 2px rgba(191, 189, 189, 0.5);
}
+
.global-spin {
width: 100%;
margin: 40px 0 !important;
@@ -135,4 +146,4 @@ body {
.ant-modal {
max-width: calc(100vw - 32px);
}
-}
+}
\ No newline at end of file
diff --git a/src/routes/Plugin/Common/index.js
b/src/routes/Plugin/Common/index.js
index 37897db9..7478db8c 100644
--- a/src/routes/Plugin/Common/index.js
+++ b/src/routes/Plugin/Common/index.js
@@ -48,15 +48,15 @@ export default class Common extends Component {
componentDidMount() {
const { dispatch, plugins } = this.props;
- const { selectorPage,selectorPageSize} = this.state;
+ const { selectorPage, selectorPageSize } = this.state;
if (plugins && plugins.length > 0) {
- this.getAllSelectors(selectorPage,selectorPageSize, plugins);
+ this.getAllSelectors(selectorPage, selectorPageSize, plugins);
} else {
dispatch({
type: "global/fetchPlugins",
payload: {
callback: pluginList => {
- this.getAllSelectors(selectorPage,selectorPageSize, pluginList);
+ this.getAllSelectors(selectorPage, selectorPageSize, pluginList);
}
}
});
@@ -66,7 +66,7 @@ export default class Common extends Component {
componentDidUpdate(prevProps) {
const preId = prevProps.match.params.id;
const newId = this.props.match.params.id;
- const {selectorPage,selectorPageSize} = this.state;
+ const { selectorPage, selectorPageSize } = this.state;
if (newId !== preId) {
const { dispatch } = this.props;
dispatch({
@@ -74,13 +74,13 @@ export default class Common extends Component {
});
if (prevProps.plugins && prevProps.plugins.length > 0) {
- this.getAllSelectors(selectorPage,selectorPageSize, prevProps.plugins);
+ this.getAllSelectors(selectorPage, selectorPageSize,
prevProps.plugins);
} else {
dispatch({
type: "global/fetchPlugins",
payload: {
callback: pluginList => {
- this.getAllSelectors(selectorPage,selectorPageSize, pluginList);
+ this.getAllSelectors(selectorPage, selectorPageSize, pluginList);
}
}
});
@@ -112,7 +112,7 @@ export default class Common extends Component {
});
};
- getAllRules = (page,pageSize) => {
+ getAllRules = (page, pageSize) => {
const { dispatch, currentSelector } = this.props;
const { ruleName } = this.state;
const selectorId = currentSelector ? currentSelector.id : "";
@@ -163,12 +163,12 @@ export default class Common extends Component {
searchSelector = () => {
const { plugins } = this.props;
- const {selectorPage,selectorPageSize} = this.state;
- this.getAllSelectors(selectorPage,selectorPageSize, plugins);
+ const { selectorPage, selectorPageSize } = this.state;
+ this.getAllSelectors(selectorPage, selectorPageSize, plugins);
};
addSelector = () => {
- const { selectorPage,selectorPageSize } = this.state;
+ const { selectorPage, selectorPageSize } = this.state;
const { dispatch, plugins } = this.props;
let name = this.props.match.params ? this.props.match.params.id : "";
const plugin = this.getPlugin(plugins, name);
@@ -203,12 +203,12 @@ export default class Common extends Component {
searchRule = () => {
this.setState({ rulePage: 1 });
- const {rulePageSize } = this.state;
- this.getAllRules(1,rulePageSize);
+ const { rulePageSize } = this.state;
+ this.getAllRules(1, rulePageSize);
};
addRule = () => {
- const { rulePage,rulePageSize, pluginId } = this.state;
+ const { rulePage, rulePageSize, pluginId } = this.state;
const { dispatch, currentSelector, plugins } = this.props;
let name = this.props.match.params ? this.props.match.params.id : "";
const plugin = this.getPlugin(plugins, name);
@@ -249,7 +249,7 @@ export default class Common extends Component {
editSelector = record => {
const { dispatch, plugins } = this.props;
- const { selectorPage,selectorPageSize } = this.state;
+ const { selectorPage, selectorPageSize } = this.state;
let name = this.props.match.params ? this.props.match.params.id : "";
const plugin = this.getPlugin(plugins, name);
const { id: pluginId, config } = plugin;
@@ -295,7 +295,7 @@ export default class Common extends Component {
deleteSelector = record => {
const { dispatch, plugins } = this.props;
- const { selectorPage,selectorPageSize } = this.state;
+ const { selectorPage, selectorPageSize } = this.state;
let name = this.props.match.params ? this.props.match.params.id : "";
const pluginId = this.getPluginId(plugins, name);
dispatch({
@@ -314,25 +314,25 @@ export default class Common extends Component {
pageSelectorChange = page => {
this.setState({ selectorPage: page });
const { plugins } = this.props;
- const {selectorPageSize} = this.state;
- this.getAllSelectors(page,selectorPageSize, plugins);
+ const { selectorPageSize } = this.state;
+ this.getAllSelectors(page, selectorPageSize, plugins);
};
- pageSelectorChangeSize = (currentPage,pageSize) => {
+ pageSelectorChangeSize = (currentPage, pageSize) => {
const { plugins } = this.props;
- this.setState({ selectorPage: 1, selectorPageSize: pageSize});
+ this.setState({ selectorPage: 1, selectorPageSize: pageSize });
this.getAllSelectors(1, pageSize, plugins);
};
pageRuleChange = page => {
- this.setState({ rulePage: page});
+ this.setState({ rulePage: page });
const { rulePageSize } = this.state;
- this.getAllRules(page,rulePageSize);
+ this.getAllRules(page, rulePageSize);
};
- pageRuleChangeSize = (currentPage,pageSize) => {
- this.setState({rulePage: 1, rulePageSize: pageSize});
- this.getAllRules(1,pageSize);
+ pageRuleChangeSize = (currentPage, pageSize) => {
+ this.setState({ rulePage: 1, rulePageSize: pageSize });
+ this.getAllRules(1, pageSize);
};
// select
@@ -358,7 +358,7 @@ export default class Common extends Component {
editRule = record => {
const { dispatch, currentSelector, plugins } = this.props;
- const { rulePage,rulePageSize, pluginId } = this.state;
+ const { rulePage, rulePageSize, pluginId } = this.state;
let name = this.props.match.params ? this.props.match.params.id : "";
const plugin = this.getPlugin(plugins, name);
const { config } = plugin;
@@ -407,7 +407,7 @@ export default class Common extends Component {
deleteRule = record => {
const { dispatch, currentSelector, ruleList } = this.props;
- const { rulePage,rulePageSize } = this.state;
+ const { rulePage, rulePageSize } = this.state;
const currentPage =
rulePage > 1 && ruleList.length === 1 ? rulePage - 1 : rulePage;
dispatch({
@@ -616,12 +616,12 @@ export default class Common extends Component {
<Row gutter={20}>
<Col span={8}>
<div className="table-header">
- <h3>{getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.TITLE")}</h3>
+ <h3 style={{ overflow: "visible"
}}>{getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.TITLE")}</h3>
<div className={styles.headerSearch}>
<AuthButton perms={`plugin:${name}Selector:query`}>
<Search
className={styles.search}
- style={{ maxWidth: "50%" }}
+ style={{ width: "130px" }}
placeholder={getIntlContent(
"SHENYU.PLUGIN.SEARCH.SELECTOR.NAME"
)}
diff --git a/src/routes/Plugin/index.less b/src/routes/Plugin/index.less
index 803ea0d4..90314976 100644
--- a/src/routes/Plugin/index.less
+++ b/src/routes/Plugin/index.less
@@ -22,9 +22,12 @@
.headerSearch {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
+ margin-left: 10px;
+
.search {
margin-right: 10px;
+
:global(.ant-input) {
margin-top: 4px;
}
@@ -42,17 +45,20 @@
.ruleConditions {
margin-top: 8px;
display: flex;
+
.header {
text-align: right;
- width: 87px ;
+ width: 87px;
margin-bottom: 0;
font-size: 14px;
+
strong {
color: #f5222d;
margin-right: 4px;
font-weight: normal;
}
}
+
.content {
ul {
padding: 0 0 10px 6px;
@@ -61,11 +67,13 @@
justify-content: space-between;
max-height: 200px;
overflow: hidden;
+
li {
margin-right: 6px;
}
}
}
+
button {
margin-left: 14px;
}
@@ -74,12 +82,14 @@
.handleWrap {
display: flex;
margin-top: 8px;
+
.header {
h3 {
text-align: right;
width: 87px;
margin-bottom: 0;
font-size: 14px;
+
strong {
color: #f5222d;
margin-right: 4px;
@@ -87,12 +97,14 @@
}
}
}
+
.springHeader {
h3 {
text-align: right;
width: 120px;
margin-bottom: 0;
font-size: 14px;
+
strong {
color: #f5222d;
margin-right: 4px;
@@ -100,16 +112,20 @@
}
}
}
+
.handleUl {
padding: 0 0 0px 6px;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
+
li {
margin-right: 6px;
}
+
.loadbalanceLine {
display: flex;
+
.loadText {
padding: 0 8px;
border: 1px solid #eee;
@@ -119,11 +135,13 @@
}
}
}
+
.handleSelectorUl {
li {
width: 254px;
}
}
+
.springUl {
li {
margin-bottom: 6px;
@@ -134,13 +152,16 @@
.divideHandle {
margin-top: 8px;
display: flex;
+
.header {
width: 87px;
+
h3 {
text-align: right;
width: 100px;
margin-bottom: 0;
font-size: 14px;
+
strong {
color: #f5222d;
margin-right: 4px;
@@ -148,6 +169,7 @@
}
}
}
+
.content {
ul {
padding: 0 0 10px 6px;
@@ -156,15 +178,18 @@
justify-content: space-between;
max-height: 200px;
overflow: hidden;
+
li {
margin-right: 6px;
}
}
}
+
button {
margin-left: 6px;
}
+
.labelwidth {
width: 180px;
}
-}
+}
\ No newline at end of file
diff --git a/src/routes/System/AppAuth/SearchContent.js
b/src/routes/System/AppAuth/SearchContent.js
index b8cffd2b..ee8998b1 100644
--- a/src/routes/System/AppAuth/SearchContent.js
+++ b/src/routes/System/AppAuth/SearchContent.js
@@ -19,12 +19,13 @@ import React from "react";
import { Form, Input, Button } from 'antd';
import { getIntlContent } from "../../../utils/IntlUtils";
import AuthButton from '../../../utils/AuthButton';
+import styles from "./index.less";
class InlineSearch extends React.Component {
handleSubmit = e => {
e.preventDefault();
- const searchCont= this.props.form.getFieldsValue()
+ const searchCont = this.props.form.getFieldsValue()
this.props.onClick(searchCont)
};
@@ -33,18 +34,18 @@ class InlineSearch extends React.Component {
const { getFieldDecorator } = this.props.form;
return (
<Form layout="inline" onSubmit={this.handleSubmit}>
- <Form.Item>
+ <Form.Item className={styles.formInput}>
{getFieldDecorator('appKey', {
- initialValue:null
+ initialValue: null
})(
<Input
placeholder={getIntlContent("SHENYU.AUTH.INPUTAPPKEY")}
/>,
)}
</Form.Item>
- <Form.Item>
+ <Form.Item className={styles.formInput}>
{getFieldDecorator('phone', {
- initialValue:null
+ initialValue: null
})(
<Input
type="phone"
@@ -52,7 +53,7 @@ class InlineSearch extends React.Component {
/>,
)}
</Form.Item>
- <Form.Item>
+ <Form.Item className={styles.formItem}>
<AuthButton perms="system:authen:list">
<Button type="primary" htmlType="submit">
{getIntlContent("SHENYU.SYSTEM.SEARCH")}
diff --git a/src/routes/System/AppAuth/index.less
b/src/routes/System/AppAuth/index.less
index 69eeea21..00b192bd 100644
--- a/src/routes/System/AppAuth/index.less
+++ b/src/routes/System/AppAuth/index.less
@@ -16,41 +16,55 @@
*/
.condition {
- margin-top: 8px;
+ margin-top: 8px;
+ display: flex;
+
+ ul {
+ padding: 0 0 10px 6px;
+ margin: 0;
display: flex;
- ul {
- padding: 0 0 10px 6px;
- margin: 0;
- display: flex;
- justify-content: space-between;
- align-items: top;
- // max-height: 200px;
- // overflow: hidden;
- li {
- margin-right: 4px;
- .title {
- // font-size: 14px;
- }
- .appName {
- width: 65px;
- // height: 25px;
- text-align: center;
- // line-height: 25px;
- padding: 0;
- font-size: 12px;
- }
- .appParam {
- width: 150px;
- // height: 25px;
- text-align: center;
- // line-height: 25px;
- padding: 0;
- font-size: 12px;
- }
- }
+ justify-content: space-between;
+ align-items: top;
+
+ // max-height: 200px;
+ // overflow: hidden;
+ li {
+ margin-right: 4px;
+
+ .title {
+ // font-size: 14px;
+ }
+
+ .appName {
+ width: 65px;
+ // height: 25px;
+ text-align: center;
+ // line-height: 25px;
+ padding: 0;
+ font-size: 12px;
}
- .btn {
- margin-left: 10px;
+ .appParam {
+ width: 150px;
+ // height: 25px;
+ text-align: center;
+ // line-height: 25px;
+ padding: 0;
+ font-size: 12px;
}
+ }
+ }
+
+ .btn {
+ margin-left: 10px;
+
+ }
}
+
+.formInput {
+ width: 175px;
+}
+
+.formItem {
+ margin-right: 0px !important;
+}
\ No newline at end of file
