Skip to content

Commit ccb4c16

Browse files
LHRUNLHRUN
committed
feat(ui): upgrade and optimize some page styles and interactions
1 parent 5fd9fef commit ccb4c16

54 files changed

Lines changed: 5343 additions & 1255 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎cmdb-ui/src/components/CardTitle/CardTitle.vue‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ export default {
1212

1313
<style lang="less" scoped>
1414
.ops-card-title {
15-
border-top-left-radius: 15px;
16-
font-size: 1vw;
17-
height: 2.2vw;
18-
color: #011d93;
19-
background: linear-gradient(270deg, rgba(206, 226, 255, 0) -6.74%, #d2e4ff 96.74%);
20-
padding: 5px 10px;
15+
border-top-left-radius: 3px;
16+
font-size: 16px;
17+
height: 42px;
18+
line-height: 42px;
19+
color: @primary-color;
20+
background: linear-gradient(270deg, #fff -6.74%, fade(@primary-color, 8%) 96.74%);
21+
padding: 0 20px;
2122
display: inline-block;
22-
font-weight: 500;
23+
font-weight: 600;
2324
}
2425
</style>

‎cmdb-ui/src/components/CustomRadio/CustomRadio.vue‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<template>
22
<div class="custom-radio">
33
<div
4-
:class="`custom-radio-inner custom-radio-inner-${layout || 'inline'}`"
5-
v-for="{ value: radioValue, label, layout } in radioList"
6-
:key="radioValue"
4+
v-for="radio in radioList"
5+
:class="`custom-radio-inner custom-radio-inner-${radio.layout || 'inline'}`"
6+
:key="radio.value"
77
>
8-
<a-radio @click="clickRadio(radioValue)" :checked="value === radioValue" :key="`raido_${radioValue}`">{{
9-
label
10-
}}</a-radio>
11-
<slot :name="`extra_${radioValue}`" v-bind="{ radioValue, label }"></slot>
8+
<a-radio @click="clickRadio(radio.value)" :checked="value === radio.value" :key="`raido_${radio.value}`">
9+
<slot :name="`label_${radio.value}`" :radio="radio">
10+
{{ radio.label }}
11+
</slot>
12+
</a-radio>
13+
<slot
14+
:name="`extra_${radio.value}`"
15+
v-bind="{ radioValue: radio.value, label: radio.label }"
16+
></slot>
1217
</div>
1318
</div>
1419
</template>

‎cmdb-ui/src/components/TwoColumnLayout/TwoColumnLayout.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,14 @@ export default {
6767
width: 100%;
6868
.two-column-layout-sidebar {
6969
height: 100%;
70-
overflow-y: auto;
70+
overflow: hidden;
71+
background-color: #f7f8fa;
72+
border-right: 1px solid #e8eaed;
73+
padding: 12px 8px;
74+
75+
&:hover {
76+
overflow: auto;
77+
}
7178
}
7279
.two-column-layout-main {
7380
height: 100%;

‎cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@
1010
:row-class-name="(params) => getCurrentRowClass(params, addedRids)"
1111
>
1212
<vxe-column field="name"></vxe-column>
13-
<vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
13+
<vxe-column v-for="col in columns" :key="col" :field="col">
14+
<template #header>
15+
<span>{{ permMap[col] }}</span>
16+
<a-tooltip v-if="permDescMap[col]" :title="permDescMap[col]">
17+
<a-icon type="question-circle" style="margin-left: 4px; color: #999; cursor: help;" />
18+
</a-tooltip>
19+
</template>
1420
<template #default="{row}">
1521
<ReadCheckbox
1622
v-if="['read'].includes(col.split('_')[0])"
@@ -42,7 +48,7 @@
4248

4349
<script>
4450
import _ from 'lodash'
45-
import { permMap } from './constants.js'
51+
import { permMap, permDescMap } from './constants.js'
4652
import { grantCiType, revokeCiType } from '../../api/CIType'
4753
import ReadCheckbox from './readCheckbox.vue'
4854
import { getCurrentRowClass } from './utils'
@@ -97,6 +103,9 @@ export default {
97103
},
98104
permMap() {
99105
return permMap()
106+
},
107+
permDescMap() {
108+
return permDescMap()
100109
}
101110
},
102111
methods: {

‎cmdb-ui/src/modules/cmdb/components/cmdbGrant/constants.js‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
1-
import i18n from '@/lang'
2-
3-
export const permMap = () => {
4-
return {
5-
read: i18n.t('view'),
6-
add: i18n.t('new'),
7-
create: i18n.t('new'),
8-
update: i18n.t('update'),
9-
delete: i18n.t('delete'),
10-
config: i18n.t('cmdb.components.config'),
11-
grant: i18n.t('grant'),
12-
'read_attr': i18n.t('cmdb.components.readAttribute'),
13-
'read_ci': i18n.t('cmdb.components.readCI')
14-
}
15-
}
1+
import i18n from '@/lang'
2+
3+
export const permMap = () => {
4+
return {
5+
read: i18n.t('view'),
6+
add: i18n.t('new'),
7+
create: i18n.t('new'),
8+
update: i18n.t('update'),
9+
delete: i18n.t('delete'),
10+
config: i18n.t('cmdb.components.config'),
11+
grant: i18n.t('grant'),
12+
'read_attr': i18n.t('cmdb.components.readAttribute'),
13+
'read_ci': i18n.t('cmdb.components.readCI')
14+
}
15+
}
16+
17+
export const permDescMap = () => {
18+
return {
19+
config: i18n.t('cmdb.components.configDesc'),
20+
grant: i18n.t('cmdb.components.grantDesc'),
21+
'read_attr': i18n.t('cmdb.components.readAttributeDesc'),
22+
'read_ci': i18n.t('cmdb.components.readCIDesc')
23+
}
24+
}

‎cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div class="cmdb-grant" :style="{ }">
33
<template v-if="cmdbGrantType.includes('ci_type')">
44
<div class="cmdb-grant-title">{{ $t('cmdb.components.ciTypeGrant') }}</div>
5+
<div class="cmdb-grant-desc">{{ $t('cmdb.components.ciTypeGrantDesc') }}</div>
56
<CiTypeGrant
67
:CITypeId="CITypeId"
78
:tableData="tableData"
@@ -19,6 +20,7 @@
1920
"
2021
>
2122
<div class="cmdb-grant-title">{{ $t('cmdb.components.ciGrant') }}</div>
23+
<div class="cmdb-grant-desc">{{ $t('cmdb.components.ciGrantDesc') }}</div>
2224
<CiTypeGrant
2325
:CITypeId="CITypeId"
2426
:tableData="tableData"
@@ -355,6 +357,13 @@ export default {
355357
.cmdb-grant-title {
356358
border-left: 4px solid @primary-color;
357359
padding-left: 10px;
360+
margin-bottom: 8px;
361+
}
362+
.cmdb-grant-desc {
363+
color: #999;
364+
font-size: 12px;
365+
margin-bottom: 12px;
366+
padding-left: 14px;
358367
}
359368
}
360369
</style>

‎cmdb-ui/src/modules/cmdb/components/cmdbGrant/readGrantModal.vue‎

Lines changed: 50 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
<template>
22
<a-modal :width="680" :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
3-
<CustomRadio
4-
:radioList="[
5-
{ value: 1, label: $t('cmdb.components.all') },
6-
{ value: 2, label: $t('cmdb.components.customize'), layout: 'vertical' },
7-
{ value: 3, label: $t('cmdb.components.none') },
8-
]"
9-
:value="radioValue"
10-
@change="changeRadioValue"
11-
>
12-
<template slot="extra_2" v-if="radioValue === 2">
3+
<div class="read-grant-modal-desc">{{ modalDesc }}</div>
4+
<a-radio-group v-model="radioValue" @change="(e) => changeRadioValue(e.target.value)" style="width: 100%;">
5+
<div class="radio-option">
6+
<a-radio :value="1">
7+
{{ $t('cmdb.components.all') }}
8+
</a-radio>
9+
<span class="radio-desc">{{ $t('cmdb.components.allDesc') }}</span>
10+
</div>
11+
<div class="radio-option">
12+
<a-radio :value="2">
13+
{{ $t('cmdb.components.customize') }}
14+
</a-radio>
15+
<span class="radio-desc">{{ $t('cmdb.components.customizeDesc') }}</span>
16+
</div>
17+
<div v-if="radioValue === 2" style="margin-left: 24px; margin-top: 12px; margin-bottom: 12px;">
1318
<treeselect
1419
v-if="colType === 'read_attr'"
1520
v-model="selectedAttr"
@@ -55,8 +60,14 @@
5560
/>
5661
<div class="read-ci-tip">{{ $t('cmdb.ciType.ciGrantTip') }}</div>
5762
</a-form-model>
58-
</template>
59-
</CustomRadio>
63+
</div>
64+
<div class="radio-option">
65+
<a-radio :value="3">
66+
{{ $t('cmdb.components.none') }}
67+
</a-radio>
68+
<span class="radio-desc">{{ $t('cmdb.components.noneDesc') }}</span>
69+
</div>
70+
</a-radio-group>
6071
</a-modal>
6172
</template>
6273

@@ -112,6 +123,12 @@ export default {
112123
}
113124
return this.$t('cmdb.components.ciGrant')
114125
},
126+
modalDesc() {
127+
if (this.colType === 'read_attr') {
128+
return this.$t('cmdb.components.readAttrModalDesc')
129+
}
130+
return this.$t('cmdb.components.readCIModalDesc')
131+
},
115132
attrGroup() {
116133
return this.provide_attrGroup()
117134
},
@@ -211,6 +228,27 @@ export default {
211228
</script>
212229
213230
<style lang="less" scoped>
231+
.read-grant-modal-desc {
232+
color: #999;
233+
font-size: 12px;
234+
margin-bottom: 16px;
235+
padding: 8px 12px;
236+
background-color: #f5f5f5;
237+
border-left: 3px solid @primary-color;
238+
}
239+
240+
.radio-option {
241+
margin-bottom: 12px;
242+
display: flex;
243+
align-items: baseline;
244+
245+
.radio-desc {
246+
color: #999;
247+
font-size: 12px;
248+
margin-left: 8px;
249+
}
250+
}
251+
214252
.read-ci-tip {
215253
font-size: 12px;
216254
line-height: 22px;

0 commit comments

Comments
 (0)