-
{{ this.title }}
-
+
+
+
+
+ {{ this.title }}
+ {{ childLength }}
+
@@ -18,7 +14,7 @@ export default {
name: 'TreeViewsNode',
props: {
title: {
- type: String,
+ type: [String, Number],
default: '',
},
treeKey: {
@@ -33,25 +29,57 @@ export default {
type: Boolean,
default: () => false,
},
+ childLength: {
+ type: Number,
+ default: 0,
+ },
},
data() {
return {
- switchIcon: 'down',
+ switchIcon: 'caret-right',
}
},
- computed: {
- childLength() {
- const reg = /(?<=\()\S+(?=\))/g
- return Number(this.title.match(reg)[0])
- },
- },
+ computed: {},
methods: {
clickNode() {
this.$emit('onNodeClick', this.treeKey)
- this.switchIcon = this.switchIcon === 'down' ? 'up' : 'down'
+ this.switchIcon = this.switchIcon === 'caret-right' ? 'caret-down' : 'caret-right'
},
},
}
-
+
diff --git a/cmdb-ui/src/style/global.less b/cmdb-ui/src/style/global.less
index dcb0552..790f2e4 100644
--- a/cmdb-ui/src/style/global.less
+++ b/cmdb-ui/src/style/global.less
@@ -50,7 +50,7 @@ body {
}
.ant-layout {
- background-color: #f7f8fa;
+ background-color: @layout-content-background;
}
.layout.ant-layout {
@@ -161,7 +161,7 @@ body {
transition: width 0.2s;
&.ant-header-side-opened {
- width: calc(100% - 200px);
+ width: calc(100% - 220px);
}
&.ant-header-side-closed {
@@ -411,7 +411,6 @@ body {
// 菜单样式
.sider {
- box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
position: relative;
z-index: 10;
min-height: 100vh;
@@ -431,19 +430,9 @@ body {
&.ant-fixed-sidemenu {
position: fixed;
height: 100%;
- background: @layout-background-color;
z-index: 99;
}
- .ant-menu-dark {
- background: @layout-background-color;
-
- .ant-menu-inline.ant-menu-sub {
- background: @layout-background-color-light;
- box-shadow: none;
- }
- }
-
.logo {
position: relative;
height: @layout-header-height;
@@ -478,21 +467,11 @@ body {
&.light {
background-color: #fff;
- box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
.logo {
background: @layout-header-background;
- box-shadow: 1px 1px 0px 0px #e8e8e8;
+ box-shadow: 0 1px 3px 0px #9eabbe25;
}
-
- // .ant-menu-light {
- // .ant-menu-item {
- // margin: 0;
- // }
- // .ant-menu-item-selected {
- // background: #0000000a;
- // }
- // }
}
}
@@ -506,6 +485,9 @@ body {
// 从此处开始
.ops-side-bar.ant-menu {
transition: none;
+ .ant-menu-item {
+ text-overflow: initial !important;
+ }
}
.ops-side-bar.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: @layout-sidebar-selected-color;
@@ -525,7 +507,7 @@ body {
}
.ops-side-bar.ant-menu-light {
- border-right-color: transparent;
+ border-right-color: #e8e8e8;
background: @layout-sidebar-color;
background-repeat: no-repeat !important;
background-size: cover;
@@ -538,6 +520,9 @@ body {
display: inline-flex;
align-items: center;
color: @layout-sidebar-font-color;
+ i {
+ color: @text-color_5;
+ }
}
&:hover {
.scroll {
@@ -590,8 +575,11 @@ body {
.ant-menu-item-selected {
a,
a:hover {
- color: @layout-sidebar-font-color;
+ color: @layout-sidebar-selected-font-color;
font-weight: 600;
+ i {
+ color: @layout-sidebar-selected-font-color;
+ }
}
}
.ant-menu-item::after,
@@ -601,6 +589,9 @@ body {
.ant-menu-submenu {
color: @layout-sidebar-font-color;
+ i {
+ color: @text-color_5;
+ }
}
.ant-menu-submenu-title:hover {
color: @layout-sidebar-font-color;
@@ -613,8 +604,11 @@ body {
}
.ant-menu-submenu-selected {
> .ant-menu-submenu-title {
- color: @layout-sidebar-font-color;
+ color: @layout-sidebar-selected-font-color;
font-weight: 800;
+ i {
+ color: @layout-sidebar-selected-font-color;
+ }
}
}
.ant-menu-submenu-content .ant-menu-submenu-active .ant-menu-submenu-title {
@@ -852,7 +846,7 @@ body {
.ant-layout-sider {
box-shadow: none;
.ant-layout-sider-children {
- background: @primary-color_5;
+ background: @primary-color_7;
.ant-menu {
display: none;
}
@@ -883,7 +877,7 @@ body {
}
}
-.custom-vue-treeselect__control(@bgColor:@primary-color_5,@border:none) {
+.custom-vue-treeselect__control(@bgColor:@primary-color_7,@border:none) {
background-color: @bgColor;
border: @border;
}
@@ -956,13 +950,13 @@ body {
//非斑马纹
.ops-unstripe-table {
.vxe-table--border-line {
- border: none !important;
+ // border: none !important;
}
.vxe-table--header-wrapper {
- background-color: @primary-color_5 !important;
+ background-color: @primary-color_6 !important;
}
.vxe-header--row .vxe-header--column:hover {
- background: #2f54eb1f !important;
+ background: @primary-color_3;
}
}
.ops-unstripe-table.vxe-table--render-default.border--full {
@@ -983,7 +977,7 @@ body {
border: none !important;
}
.vxe-table--header-wrapper {
- background-color: @primary-color_5 !important;
+ background-color: @primary-color_6 !important;
}
// .vxe-table--header-wrapper.body--wrapper {
// border-radius: 8px !important;
@@ -1010,19 +1004,19 @@ body {
}
}
.vxe-header--row .vxe-header--column:hover {
- background: #2f54eb1f !important;
+ background: @primary-color_3;
}
}
.ops-input {
.ant-input,
.ant-time-picker-input {
- background-color: @primary-color_5;
+ background-color: @primary-color_7;
border: none;
}
}
.ops-input.ant-input {
- background-color: @primary-color_5;
+ background-color: @primary-color_7;
border: none;
}
.ops-input.ant-input[disabled] {
@@ -1030,14 +1024,6 @@ body {
color: #333;
cursor: default;
}
-.ops-input-radius {
- .ant-input {
- border-radius: 20px;
- }
-}
-.ops-input-radius.ant-input {
- border-radius: 20px;
-}
// vxe-table checkbox 选中 highlight
.vxe-table--render-default .vxe-body--row.row--checked,
@@ -1110,12 +1096,12 @@ body {
//批量操作
.ops-list-batch-action {
display: inline-block;
- background-color: @primary-color_5;
+ background-color: @primary-color_6;
font-size: 12px;
- color: rgba(0, 0, 0, 0.55);
+ color: @text-color_3;
> span {
display: inline-block;
- padding: 4px 8px;
+ padding: 7px 8px;
cursor: pointer;
&:hover {
color: @primary-color;
@@ -1127,7 +1113,7 @@ body {
}
}
-//tab
+// card tab
.ops-tab.ant-tabs.ant-tabs-card {
.ant-tabs-card-bar {
margin: 0;
@@ -1147,15 +1133,53 @@ body {
}
}
-//button
+// line tab
+.ops-tab.ant-tabs {
+ .ant-tabs-bar {
+ margin-bottom: 20px;
+ border-bottom: none;
+ .ant-tabs-nav.ant-tabs-nav-animated,
+ .ant-tabs-nav.ant-tabs-nav-animated > div:first-child {
+ border-bottom: 1px solid @border-color-base;
+ }
+ .ant-tabs-tab {
+ color: @text-color_4;
+ }
+ .ant-tabs-tab-active {
+ color: @primary-color;
+ }
+ }
+}
+
+// button
.ops-button-primary {
background-color: @primary-color_4;
border-color: @primary-color_4;
color: @primary-color;
box-shadow: none;
}
+// button
+.ops-button-ghost.ant-btn-background-ghost.ant-btn-primary {
+ background-color: @primary-color_5!important;
+ border-color: @primary-color_8;
+}
+.ops-button-ghost.ant-btn-background-ghost.ant-btn-primary[disabled] {
+ border-color: #d9d9d9;
+ background-color: @primary-color_7!important;
+}
-//select
+// button
+.ant-btn.ant-btn-icon-only {
+ &:hover > i {
+ color: @primary-color;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ }
+ > i {
+ color: #d9d9d9;
+ }
+}
+
+// select
.ops-select {
&.white {
.ant-select-selection {
@@ -1173,10 +1197,6 @@ body {
}
}
}
- .ant-select-selection {
- background-color: @primary-color_5;
- border-color: @primary-color_5;
- }
}
//dropdown
@@ -1190,9 +1210,7 @@ body {
//modal
.ant-modal-content {
- border-radius: 15px;
.ant-modal-header {
- border-radius: 15px;
border-bottom: none;
.ant-modal-title {
padding-left: 10px;
@@ -1328,12 +1346,8 @@ body {
border-bottom-color: @primary-color;
}
}
-// .ant-menu.ant-menu-light {
-// &.ops-menu {
-// background-color: white;
-// background: none;
-// .ant-menu-submenu {
-// color: rgba(0, 0, 0, 0.65);
-// }
-// }
-// }
+
+.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
+.ant-tree li .ant-tree-node-content-wrapper:hover {
+ background-color: @primary-color_3;
+}
diff --git a/cmdb-ui/src/style/static.less b/cmdb-ui/src/style/static.less
index 096a500..0e3b422 100644
--- a/cmdb-ui/src/style/static.less
+++ b/cmdb-ui/src/style/static.less
@@ -1,41 +1,48 @@
@border-radius-base: 2px; // 组件/浮层圆角
@border-radius-box: 4px; // big box radius
-@primary-color: #2f54eb; // 全局主色 六大品牌色
+// primary color
+@primary-color: #2f54eb;
@primary-color_2: #7f97fa;
-@primary-color_3: #d3e3fd;
+@primary-color_3: #ebeff8;
@primary-color_4: #e1efff;
@primary-color_5: #f0f5ff;
@primary-color_6: #f9fbff;
+@primary-color_7: #f7f8fa;
+@primary-color_8: #b1c9ff;
-@text-color_1: #1d2119;
+// Neutral color
+@text-color_1: #1d2129;
@text-color_2: #4e5969;
@text-color_3: #86909c;
@text-color_4: #a5a9bc;
+@text-color_5: #cacdd9;
+@text-color_6: #e4e7ed;
+@text-color_7: #f0f1f5;
-@border-color: #e4e7ed;
+@func-color_1: #fd4c6a;
+@func-color_2: #ff7d00;
+@func-color_3: #00b42a;
+@func-color_4: #fad337;
+
+@border-color-base: @text-color_6; // 边框色
@scrollbar-color: rgba(47, 122, 235, 0.2);
+@layout-content-background: @primary-color_7;
@layout-header-background: #fff;
@layout-header-height: 40px;
@layout-header-icon-height: 34px;
@layout-header-font-color: #020000;
-@layout-header-font-selected-color: #2857bc;
+@layout-header-font-selected-color: @primary-color;
-//dark
-@layout-background-color: #182132;
-@layout-background-color-light: #262f40;
-//light
-@layout-background-light-color: #fafafa;
-@layout-background-light-color-light: #f0f0f0;
-
-@layout-sidebar-color: #1d264c; //bg
-@layout-sidebar-sub-color: #000c37; //bg
-@layout-sidebar-selected-color: #3e4a71; //selected bg
-@layout-sidebar-arrow-color: rgba(255, 255, 255, 0.6);
-@layout-sidebar-font-color: #fff;
-@layout-sidebar-disabled-font-color: rgba(255, 255, 255, 0.6);
+@layout-sidebar-color: #ffffff; //bg
+@layout-sidebar-sub-color: @primary-color_7; //bg
+@layout-sidebar-selected-color: @primary-color_5; //selected bg
+@layout-sidebar-arrow-color: @text-color_4;
+@layout-sidebar-font-color: @text-color_2;
+@layout-sidebar-selected-font-color: @primary-color;
+@layout-sidebar-disabled-font-color: @text-color_4;
#custom_colors() {
color_1: #2f54eb; //primary color
@@ -47,7 +54,7 @@
cursor: pointer;
padding: 5px 8px;
background-color: @backgroundColor;
- border-radius: 5px;
+ border-radius: @border-radius-box;
height: 30px;
color: rgba(0, 0, 0, 0.6);
white-space: nowrap;
@@ -57,10 +64,10 @@
cursor: pointer;
padding: 5px 10px;
&:hover {
- background-color: @primary-color_5;
+ background-color: @primary-color_3;
}
}
.ops_popover_item_selected() {
- background-color: @primary-color_5;
+ background-color: @primary-color_3;
color: @primary-color;
}
diff --git a/cmdb-ui/src/views/setting/auth/index.vue b/cmdb-ui/src/views/setting/auth/index.vue
index 1bfd111..65a2b59 100644
--- a/cmdb-ui/src/views/setting/auth/index.vue
+++ b/cmdb-ui/src/views/setting/auth/index.vue
@@ -17,8 +17,12 @@
{{ $t('save') }}
- {{ $t('cs.auth.testConnect') }}
- {{ $t('cs.auth.testLogin') }}
+ {{
+ $t('cs.auth.testConnect')
+ }}
+ {{
+ $t('cs.auth.testLogin')
+ }}
{{ $t('reset') }}
@@ -56,28 +60,28 @@ export default {
computed: {
authList() {
return [
- {
- value: 'LDAP',
- label: 'LDAP',
- },
- {
- value: 'CAS',
- label: 'CAS',
- },
- {
- value: 'OAUTH2',
- label: 'OAUTH2',
- },
- {
- value: 'OIDC',
- label: 'OIDC',
- },
- {
- value: 'AuthCommonConfig',
- label: this.$t('cs.auth.common'),
- },
- ]
- }
+ {
+ value: 'LDAP',
+ label: 'LDAP',
+ },
+ {
+ value: 'CAS',
+ label: 'CAS',
+ },
+ {
+ value: 'OAUTH2',
+ label: 'OAUTH2',
+ },
+ {
+ value: 'OIDC',
+ label: 'OIDC',
+ },
+ {
+ value: 'AuthCommonConfig',
+ label: this.$t('cs.auth.common'),
+ },
+ ]
+ },
},
methods: {
getAuthDataEnable() {
@@ -129,7 +133,7 @@ export default {
...values,
}
}
- testLDAP(type, { data: _data })
+ testLDAP({ data: _data, test_type: type })
.then((res) => {
this.$message.success(this.$t('cs.auth.testSuccess'))
})
diff --git a/cmdb-ui/src/views/user/Login.vue b/cmdb-ui/src/views/user/Login.vue
index a0d60aa..9353633 100644
--- a/cmdb-ui/src/views/user/Login.vue
+++ b/cmdb-ui/src/views/user/Login.vue
@@ -1,10 +1,12 @@
-
维易科技
让运维更简单
+
OneOps统一运维平台
+
-

+

+
欢迎登录
自动登录
-
+
登录
+ LDAP
其他登录方式
-
+
{{ item.auth_type }}
@@ -93,6 +100,7 @@ export default {
loginType: 0,
smsSendBtn: false,
},
+ auth_with_ldap: false,
}
},
computed: {
@@ -104,6 +112,18 @@ export default {
return this.enable_list.filter((en) => en.auth_type !== 'LDAP')
},
},
+ watch: {
+ enable_list: {
+ immediate: true,
+ handler(newVal) {
+ if (newVal && newVal.length === 1 && newVal[0].auth_type === 'LDAP') {
+ this.auth_with_ldap = true
+ } else {
+ this.auth_with_ldap = false
+ }
+ },
+ },
+ },
created() {},
async mounted() {
await this.GetAuthDataEnable()
@@ -124,10 +144,12 @@ export default {
handleSubmit(e) {
e.preventDefault()
const {
+ enable_list,
form: { validateFields },
state,
customActiveKey,
Login,
+ auth_with_ldap,
} = this
state.loginBtn = true
@@ -136,11 +158,15 @@ export default {
validateFields(validateFieldsKey, { force: true }, (err, values) => {
if (!err) {
- console.log('login form', values)
const loginParams = { ...values }
delete loginParams.username
loginParams.username = values.username
loginParams.password = appConfig.useEncryption ? md5(values.password) : values.password
+ loginParams.auth_with_ldap =
+ enable_list && enable_list.length === 1 && enable_list[0].auth_type === 'LDAP'
+ ? Number(auth_with_ldap)
+ : undefined
+
localStorage.setItem('ops_auth_type', '')
Login({ userInfo: loginParams })
.then((res) => this.loginSuccess(res))
@@ -184,6 +210,13 @@ export default {
background: url('../../assets/login_bg.png') no-repeat;
background-position: center;
background-size: cover;
+ > img {
+ width: 80%;
+ position: absolute;
+ top: 60%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
> span {
color: white;
position: absolute;
@@ -191,7 +224,6 @@ export default {
left: 50%;
transform: translateX(-50%);
font-size: 1.75vw;
- text-align: center;
}
}
.ops-login-right {
@@ -202,6 +234,14 @@ export default {
width: 70%;
margin-left: 15%;
}
+ .ops-login-right-welcome {
+ text-align: center;
+ color: rgba(29, 57, 196, 1);
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 1.25vw;
+ }
.login-button {
width: 100%;
}