7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #663 from veops/dev_ui_241224 

feat(ui): update style
This commit is contained in:
Leo Song 2024-12-24 15:23:33 +08:00 committed by GitHub
parent b253fdfea0 655b642930
commit b669775cd6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
50 changed files with 1136 additions and 961 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
cmdb-ui/src/components/CMDBFilterComp/expression.vue
View File

@ -106,7 +106,7 @@
<CIReferenceAttr <CIReferenceAttr
v-if="getAttr(item.property).is_reference && (item.exp === 'is' || item.exp === '~is')" v-if="getAttr(item.property).is_reference && (item.exp === 'is' || item.exp === '~is')"
:style="{ width: '175px' }" :style="{ width: '175px' }"
class="select-filter-component" class="select-filter-component ops-select-bg"
:referenceTypeId="getAttr(item.property).reference_type_id" :referenceTypeId="getAttr(item.property).reference_type_id"
:disabled="disabled" :disabled="disabled"
v-model="item.value" v-model="item.value"
@ -114,7 +114,7 @@
<a-select <a-select
v-else-if="getAttr(item.property).is_bool && (item.exp === 'is' || item.exp === '~is')" v-else-if="getAttr(item.property).is_bool && (item.exp === 'is' || item.exp === '~is')"
v-model="item.value" v-model="item.value"
class="select-filter-component" class="select-filter-component ops-select-bg"
:style="{ width: '175px' }" :style="{ width: '175px' }"
:disabled="disabled" :disabled="disabled"
:placeholder="$t('placeholder2')" :placeholder="$t('placeholder2')"
@ -398,7 +398,6 @@ export default {
/deep/ .ant-select-selection { /deep/ .ant-select-selection {
height: 24px; height: 24px;
background: #f7f8fa;
line-height: 24px; line-height: 24px;
border: none; border: none;

2
cmdb-ui/src/components/CMDBFilterComp/index.vue
View File

@ -262,7 +262,7 @@ export default {
& > a { & > a {
padding: 2px 8px; padding: 2px 8px;
&:hover { &:hover {
background-color: #f0faff; background-color: @primary-color_5;
border-radius: 5px; border-radius: 5px;
} }
} }

2
cmdb-ui/src/components/Crontab/Crontab.vue
View File

@ -341,7 +341,7 @@ export default {
}, },
} }
</script> </script>
<style scoped> <style lang="less" scoped>
.pop_btn { .pop_btn {
text-align: right; text-align: right;
margin-top: 24px; margin-top: 24px;

6
cmdb-ui/src/modules/acl/views/module/resourceGroupModal.vue
View File

@ -226,16 +226,16 @@ export default {
right: 4px; right: 4px;
display: none; display: none;
&:hover { &:hover {
color: #1f78d1; color: @primary-color;
} }
} }
&:hover .ant-transfer-list-icon { &:hover .ant-transfer-list-icon {
display: inline; display: inline;
background-color: #c0eaff; background-color: @primary-color_4;
border-radius: 4px; border-radius: 4px;
} }
} }
.ant-transfer-list-content-item-selected { .ant-transfer-list-content-item-selected {
background-color: #f0faff; background-color: ~'@{primary-color_8}35';
} }
</style> </style>

9
cmdb-ui/src/modules/acl/views/roles.vue
View File

@ -58,10 +58,7 @@
:title="$t('acl.visualRole')" :title="$t('acl.visualRole')"
:width="120" :width="120"
align="center" align="center"
:filters="[ :filters="visualRoleFilters"
{ label: $t('yes'), value: 1 },
{ label: $t('no'), value: 0 },
]"
:filterMultiple="false" :filterMultiple="false"
:filter-method=" :filter-method="
({ value, row }) => { ({ value, row }) => {
@ -155,6 +152,10 @@ export default {
pageSizeOptions: ['20', '50', '100', '200'], pageSizeOptions: ['20', '50', '100', '200'],
searchName: '', searchName: '',
filterTableValue: { user_role: 1, user_only: 0 }, filterTableValue: { user_role: 1, user_only: 0 },
visualRoleFilters: [
{ label: this.$t('yes'), value: 1 },
{ label: this.$t('no'), value: 0 }
]
} }
}, },
computed: { computed: {

2
cmdb-ui/src/modules/cmdb/components/attrMapTable/index.vue
View File

@ -187,7 +187,7 @@ export default {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: @primary-color; background-color: @primary-color;
border: solid 3px #E2E7FC; border: solid 3px @primary-color_4;
border-radius: 50%; border-radius: 50%;
} }

14
cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
View File

@ -7,7 +7,7 @@
class="ops-stripe-table" class="ops-stripe-table"
:data="filterTableData" :data="filterTableData"
:max-height="`${tableHeight}px`" :max-height="`${tableHeight}px`"
:row-style="(params) => getCurrentRowStyle(params, addedRids)" :row-class-name="(params) => getCurrentRowClass(params, addedRids)"
> >
<vxe-column field="name"></vxe-column> <vxe-column field="name"></vxe-column>
<vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]"> <vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
@ -24,7 +24,7 @@
</template> </template>
</vxe-column> </vxe-column>
<template #empty> <template #empty>
<div v-if="loading()" style="height: 200px; line-height: 200px;color:#2F54EB"> <div v-if="loading()" class="ci-type-grant-loading">
<a-icon type="loading" /> {{ $t('loading') }} <a-icon type="loading" /> {{ $t('loading') }}
</div> </div>
<div v-else> <div v-else>
@ -45,7 +45,7 @@ import _ from 'lodash'
import { permMap } from './constants.js' import { permMap } from './constants.js'
import { grantCiType, revokeCiType } from '../../api/CIType' import { grantCiType, revokeCiType } from '../../api/CIType'
import ReadCheckbox from './readCheckbox.vue' import ReadCheckbox from './readCheckbox.vue'
import { getCurrentRowStyle } from './utils' import { getCurrentRowClass } from './utils'
export default { export default {
name: 'CiTypeGrant', name: 'CiTypeGrant',
@ -100,7 +100,7 @@ export default {
} }
}, },
methods: { methods: {
getCurrentRowStyle, getCurrentRowClass,
async handleChange(e, col, row) { async handleChange(e, col, row) {
if (e.target.checked) { if (e.target.checked) {
await grantCiType(this.CITypeId, row.rid, { perms: [col] }).catch(() => { await grantCiType(this.CITypeId, row.rid, { perms: [col] }).catch(() => {
@ -146,5 +146,11 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.ci-type-grant { .ci-type-grant {
padding: 10px 0; padding: 10px 0;
&-loading {
height: 200px;
line-height: 200px;
color: @primary-color;
}
} }
</style> </style>

4
cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
View File

@ -366,5 +366,9 @@ export default {
.btn-wave-hover(@primary-color_4, -1); .btn-wave-hover(@primary-color_4, -1);
} }
.grant-table-row-focus {
background-color: @primary-color_8;
}
} }
</style> </style>

6
cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
View File

@ -7,7 +7,7 @@
class="ops-stripe-table" class="ops-stripe-table"
:data="tableData" :data="tableData"
:max-height="`${tableHeight}px`" :max-height="`${tableHeight}px`"
:row-style="(params) => getCurrentRowStyle(params, addedRids)" :row-class-name="(params) => getCurrentRowClass(params, addedRids)"
> >
<vxe-column field="name"></vxe-column> <vxe-column field="name"></vxe-column>
<vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]"> <vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
@ -26,7 +26,7 @@
<script> <script>
import { permMap } from './constants.js' import { permMap } from './constants.js'
import { grantRelationView, revokeRelationView } from '../../api/preference.js' import { grantRelationView, revokeRelationView } from '../../api/preference.js'
import { getCurrentRowStyle } from './utils' import { getCurrentRowClass } from './utils'
export default { export default {
name: 'RelationViewGrant', name: 'RelationViewGrant',
@ -69,7 +69,7 @@ export default {
} }
}, },
methods: { methods: {
getCurrentRowStyle, getCurrentRowClass,
grantDepart() { grantDepart() {
this.$emit('grantDepart', this.grantType) this.$emit('grantDepart', this.grantType)
}, },

6
cmdb-ui/src/modules/cmdb/components/cmdbGrant/topologyViewGrant.vue
View File

@ -8,7 +8,7 @@
:data="tableData" :data="tableData"
:max-height="`${tableHeight}px`" :max-height="`${tableHeight}px`"
:scroll-y="{enabled: true}" :scroll-y="{enabled: true}"
:row-style="(params) => getCurrentRowStyle(params, addedRids)" :row-class-name="(params) => getCurrentRowClass(params, addedRids)"
> >
<vxe-column field="name"></vxe-column> <vxe-column field="name"></vxe-column>
<vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]"> <vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
@ -27,7 +27,7 @@
<script> <script>
import { permMap } from './constants.js' import { permMap } from './constants.js'
import { grantTopologyView, revokeTopologyView } from '@/modules/cmdb/api/topology.js' import { grantTopologyView, revokeTopologyView } from '@/modules/cmdb/api/topology.js'
import { getCurrentRowStyle } from './utils' import { getCurrentRowClass } from './utils'
export default { export default {
name: 'TopologyViewGrant', name: 'TopologyViewGrant',
inject: ['loading', 'isModal'], inject: ['loading', 'isModal'],
@ -73,7 +73,7 @@ export default {
} }
}, },
methods: { methods: {
getCurrentRowStyle, getCurrentRowClass,
grantDepart() { grantDepart() {
this.$emit('grantDepart', this.grantType) this.$emit('grantDepart', this.grantType)
}, },

6
cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
View File

@ -7,7 +7,7 @@
class="ops-stripe-table" class="ops-stripe-table"
:data="tableData" :data="tableData"
:max-height="`${tableHeight}px`" :max-height="`${tableHeight}px`"
:row-style="(params) => getCurrentRowStyle(params, addedRids)" :row-class-name="(params) => getCurrentRowClass(params, addedRids)"
> >
<vxe-column field="name"></vxe-column> <vxe-column field="name"></vxe-column>
<vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]"> <vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
@ -26,7 +26,7 @@
<script> <script>
import { permMap } from './constants.js' import { permMap } from './constants.js'
import { grantTypeRelation, revokeTypeRelation } from '../../api/CITypeRelation.js' import { grantTypeRelation, revokeTypeRelation } from '../../api/CITypeRelation.js'
import { getCurrentRowStyle } from './utils' import { getCurrentRowClass } from './utils'
export default { export default {
name: 'TypeRelationGrant', name: 'TypeRelationGrant',
@ -69,7 +69,7 @@ export default {
} }
}, },
methods: { methods: {
getCurrentRowStyle, getCurrentRowClass,
grantDepart() { grantDepart() {
this.$emit('grantDepart', this.grantType) this.$emit('grantDepart', this.grantType)
}, },

17
cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
View File

@ -16,12 +16,8 @@
<template v-for="(item, index) in preferenceSearchList.slice(0, 3)"> <template v-for="(item, index) in preferenceSearchList.slice(0, 3)">
<span <span
v-if="item.name.length > 6" v-if="item.name.length > 6"
class="preference-search-tag" :class="['preference-search-tag', item.id === currentPreferenceSearch ? 'preference-search-tag-focus' : '']"
:key="`${item.id}_${index}`" :key="`${item.id}_${index}`"
:style="{
backgroundColor: item.id === currentPreferenceSearch ? '#2f54eb' : '',
color: item.id === currentPreferenceSearch ? '#fff' : '',
}"
> >
<a-tooltip :title="item.name"> <a-tooltip :title="item.name">
<span @click="clickPreferenceSearch(item)">{{ `${item.name.slice(0, 6)}...` }}</span> <span @click="clickPreferenceSearch(item)">{{ `${item.name.slice(0, 6)}...` }}</span>
@ -33,11 +29,7 @@
<span <span
v-else v-else
:key="`${item.id}_${index}`" :key="`${item.id}_${index}`"
class="preference-search-tag" :class="['preference-search-tag', item.id === currentPreferenceSearch ? 'preference-search-tag-focus' : '']"
:style="{
backgroundColor: item.id === currentPreferenceSearch ? '#2f54eb' : '',
color: item.id === currentPreferenceSearch ? '#fff' : '',
}"
> >
<span @click="clickPreferenceSearch(item)">{{ item.name }}</span> <span @click="clickPreferenceSearch(item)">{{ item.name }}</span>
<a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="deletePreferenceSearch(item)"> <a-popconfirm :title="$t('cmdb.ciType.confirmDelete2')" @confirm="deletePreferenceSearch(item)">
@ -193,6 +185,11 @@ export default {
&:hover { &:hover {
color: @primary-color; color: @primary-color;
} }
&-focus {
background-color: @primary-color;
color: #FFFFFF !important;
}
} }
.preference-search-delete { .preference-search-delete {
color: #a9a9a9; color: #a9a9a9;

12
cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
View File

@ -53,7 +53,7 @@
<a-icon <a-icon
type="search" type="search"
slot="suffix" slot="suffix"
:style="{ color: fuzzySearch ? '#2f54eb' : '#d9d9d9', cursor: 'pointer' }" :class="['search-form-bar-input-icon', fuzzySearch ? 'search-form-bar-input-icon-focus' : '']"
@click="emitRefresh" @click="emitRefresh"
/> />
<a-tooltip slot="prefix" placement="bottom" :overlayStyle="{ maxWidth: '550px', whiteSpace: 'pre-line' }"> <a-tooltip slot="prefix" placement="bottom" :overlayStyle="{ maxWidth: '550px', whiteSpace: 'pre-line' }">
@ -308,6 +308,16 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 32px; height: 32px;
&-input-icon {
cursor: pointer;
color: #d9d9d9;
&-focus {
color: @primary-color;
}
}
.search-form-bar-filter { .search-form-bar-filter {
.ops_display_wrapper(transparent); .ops_display_wrapper(transparent);

5
cmdb-ui/src/modules/cmdb/lang/en.js
View File

@ -315,8 +315,9 @@ const cmdb_en = {
ciGrantTip: `Filter conditions can be changed dynamically using {{}} referenced variables, currently user variables are supported, such as {{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`, ciGrantTip: `Filter conditions can be changed dynamically using {{}} referenced variables, currently user variables are supported, such as {{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`,
searchInputTip: 'Please search for resource keywords', searchInputTip: 'Please search for resource keywords',
columnSearchInputTip: '192.168.1.1\n192.168.1.2\n192.168.1.3', columnSearchInputTip: '192.168.1.1\n192.168.1.2\n192.168.1.3',
rowSearchMode: 'Single Row Search', rowSearchMode: 'Single Row',
columnSearchMode: 'Multi Row Search', columnSearchMode: 'Multi Row',
columnSearchTip: 'Supports retrieval of short texts only',
resourceSearch: 'Resource Search', resourceSearch: 'Resource Search',
recentSearch: 'Recent Search', recentSearch: 'Recent Search',
myCollection: 'My Collection', myCollection: 'My Collection',

5
cmdb-ui/src/modules/cmdb/lang/zh.js
View File

@ -315,8 +315,9 @@ const cmdb_zh = {
ciGrantTip: `筛选条件可使用{{}}引用变量实现动态变化，目前支持用户变量，如{{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`, ciGrantTip: `筛选条件可使用{{}}引用变量实现动态变化，目前支持用户变量，如{{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`,
searchInputTip: '请搜索资源关键字', searchInputTip: '请搜索资源关键字',
columnSearchInputTip: '192.168.1.1\n192.168.1.2\n192.168.1.3', columnSearchInputTip: '192.168.1.1\n192.168.1.2\n192.168.1.3',
rowSearchMode: '单行搜索', rowSearchMode: '单行',
columnSearchMode: '多行搜索', columnSearchMode: '多行',
columnSearchTip: '仅支持检索短文本',
resourceSearch: '资源搜索', resourceSearch: '资源搜索',
recentSearch: '最近搜索', recentSearch: '最近搜索',
myCollection: '我的收藏', myCollection: '我的收藏',

22
cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
View File

@ -14,7 +14,7 @@
<p v-html="$t('cmdb.batch.drawTips1')"></p> <p v-html="$t('cmdb.batch.drawTips1')"></p>
<p v-html="$t('cmdb.batch.drawTips2')"></p> <p v-html="$t('cmdb.batch.drawTips2')"></p>
<div v-for="item in fileList" :key="item.name" class="cmdb-batch-upload-dragger-file"> <div v-for="item in fileList" :key="item.name" class="cmdb-batch-upload-dragger-file">
<span><a-icon type="file" :style="{ color: '#2F54EB', marginRight: '5px' }" />{{ item.name }}</span> <span><a-icon type="file" class="cmdb-batch-upload-dragger-file-icon"/>{{ item.name }}</span>
<a-progress :status="progressStatus" :percent="percent" /> <a-progress :status="progressStatus" :percent="percent" />
</div> </div>
</a-upload-dragger> </a-upload-dragger>
@ -92,12 +92,7 @@ export default {
} }
.ant-upload.ant-upload-drag { .ant-upload.ant-upload-drag {
border: none; border: none;
background: linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x, background: ~'linear-gradient(90deg, @{text-color_5} 50%, transparent 0) repeat-x 0 0 / 15px 1px, linear-gradient(90deg, @{text-color_5} 50%, transparent 0) repeat-x 0 100% / 15px 1px, linear-gradient(0deg, @{text-color_5} 50%, transparent 0) repeat-y 0 0 / 1px 15px, linear-gradient(0deg, @{text-color_5} 50%, transparent 0) repeat-y 100% 0 / 1px 15px';
linear-gradient(90deg, @text-color_5 50%, transparent 0) repeat-x,
linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y,
linear-gradient(0deg, @text-color_5 50%, transparent 0) repeat-y;
background-size: 15px 1px, 15px 1px, 1px 15px, 1px 15px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
.ant-upload-drag-container > i { .ant-upload-drag-container > i {
font-size: 60px; font-size: 60px;
} }
@ -106,13 +101,7 @@ export default {
} }
&:hover { &:hover {
background: linear-gradient(90deg, @primary-color_2 50%, transparent 0) repeat-x, background: ~'linear-gradient(90deg, @{primary-color_2} 50%, transparent 0) repeat-x 0 0 / 15px 1px, linear-gradient(90deg, @{primary-color_2} 50%, transparent 0) repeat-x 0 100% / 15px 1px, linear-gradient(0deg, @{primary-color_2} 50%, transparent 0) repeat-y 0 0 / 1px 15px, linear-gradient(0deg, @{primary-color_2} 50%, transparent 0) repeat-y 100% 0 / 1px 15px, @{primary-color_7}';
linear-gradient(90deg, @primary-color_2 50%, transparent 0) repeat-x,
linear-gradient(0deg, @primary-color_2 50%, transparent 0) repeat-y,
linear-gradient(0deg, @primary-color_2 50%, transparent 0) repeat-y;
background-size: 15px 1px, 15px 1px, 1px 15px, 1px 15px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-color: @primary-color_7;
} }
} }
.ant-upload.ant-upload-drag .ant-upload-drag-container { .ant-upload.ant-upload-drag .ant-upload-drag-container {
@ -139,6 +128,11 @@ export default {
white-space: nowrap; white-space: nowrap;
margin-right: 10px; margin-right: 10px;
} }
&-icon {
color: @primary-color;
margin-right: 5px;
}
} }
.cmdb-batch-upload-tips { .cmdb-batch-upload-tips {
width: 50%; width: 50%;

23
cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
View File

@ -47,8 +47,8 @@
<a-descriptions layout="horizontal" bordered size="small" :column="2"> <a-descriptions layout="horizontal" bordered size="small" :column="2">
<a-descriptions-item v-for="item in propertyList" :key="item.property" :label="item.label"> <a-descriptions-item v-for="item in propertyList" :key="item.property" :label="item.label">
<ops-icon <ops-icon
:style="{ color: property[item.property] ? '#7f97fa' : '', fontSize: '10px' }"
:type="`ops-${item.property}-disabled`" :type="`ops-${item.property}-disabled`"
:class="['attribute-card-footer-icon', property[item.property] ? 'attribute-card-footer-icon-mark' : '']"
/> />
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label></a-descriptions-item> <a-descriptions-item label></a-descriptions-item>
@ -58,7 +58,7 @@
<ops-icon <ops-icon
v-for="item in propertyList.filter((p) => property[p.property])" v-for="item in propertyList.filter((p) => property[p.property])"
:key="item.property" :key="item.property"
:style="{ color: '#7f97fa', fontSize: '10px' }" class="attribute-card-footer-icon attribute-card-footer-icon-mark"
:type="`ops-${item.property}-disabled`" :type="`ops-${item.property}-disabled`"
/> />
</a-space> </a-space>
@ -247,13 +247,13 @@ export default {
.attribute-card { .attribute-card {
width: 172px; width: 172px;
height: 75px; height: 75px;
background: @primary-color_6; background-color: @primary-color_6;
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
margin-bottom: 16px; margin-bottom: 16px;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
box-shadow: 0 4px 12px #4e5ea066; box-shadow: 0 4px 12px @primary-color_8;
.attribute-card-operation { .attribute-card-operation {
visibility: visible !important; visibility: visible !important;
} }
@ -342,6 +342,15 @@ export default {
padding: 2px 0 2px 5px; padding: 2px 0 2px 5px;
} }
} }
.attribute-card-footer-icon {
font-size: 10px;
&-mark {
color: @primary-color_2;
}
}
.attribute-card-inherited { .attribute-card-inherited {
background: @primary-color_7; background: @primary-color_7;
.attribute-card-footer { .attribute-card-footer {
@ -356,10 +365,10 @@ export default {
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
background-color: inherit; background-color: inherit !important;
&:hover { &:hover {
box-shadow: none; box-shadow: none !important;
background-color: @primary-color_6; background-color: @primary-color_6 !important;
} }
&:after { &:after {
content: ''; content: '';

2
cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
View File

@ -140,7 +140,7 @@
:type="ci.icon.split('$$')[0]" :type="ci.icon.split('$$')[0]"
/> />
</template> </template>
<span :style="{ color: '#2f54eb' }" v-else>{{ ci.name[0].toUpperCase() }}</span> <span class="primary-color" v-else>{{ ci.name[0].toUpperCase() }}</span>
</span> </span>
</div> </div>
<span class="ci-types-left-detail-title">{{ ci.alias || ci.name }}</span> <span class="ci-types-left-detail-title">{{ ci.alias || ci.name }}</span>

11
cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
View File

@ -35,7 +35,7 @@
:title="$t('cmdb.ciType.choiceWebhookTips')" :title="$t('cmdb.ciType.choiceWebhookTips')"
> >
<a-icon <a-icon
style="position:absolute;top:3px;left:-17px;color:#2f54eb;" class="tab-webhook-filter-icon"
type="question-circle" type="question-circle"
theme="filled" theme="filled"
/> />
@ -553,7 +553,7 @@ export default {
&-tag { &-tag {
background-color: #E1EFFF; background-color: #E1EFFF;
color: #2F54EB; color: @primary-color;
font-size: 10px; font-size: 10px;
font-weight: 400; font-weight: 400;
padding: 0 3px; padding: 0 3px;
@ -575,6 +575,13 @@ export default {
} }
} }
.tab-webhook-filter-icon {
position: absolute;
top: 3px;
left: -17px;
color: @primary-color;
}
.script-tip { .script-tip {
font-size: 12px; font-size: 12px;
line-height: 22px; line-height: 22px;

2
cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
View File

@ -363,7 +363,7 @@ export default {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: @primary-color; background-color: @primary-color;
border: solid 3px #E2E7FC; border: solid 3px @primary-color_4;
border-radius: 50% border-radius: 50%
} }

4
cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
View File

@ -31,7 +31,7 @@
<vxe-column field="source_ci_type_name" :title="$t('cmdb.ciType.sourceCIType')"></vxe-column> <vxe-column field="source_ci_type_name" :title="$t('cmdb.ciType.sourceCIType')"></vxe-column>
<vxe-column field="relation_type" :title="$t('cmdb.ciType.relationType')"> <vxe-column field="relation_type" :title="$t('cmdb.ciType.relationType')">
<template #default="{row}"> <template #default="{row}">
<span style="color:#2f54eb" v-if="row.isParent">{{ $t('cmdb.ciType.isParent') }}</span> <span class="primary-color" v-if="row.isParent">{{ $t('cmdb.ciType.isParent') }}</span>
{{ row.relation_type }} {{ row.relation_type }}
</template> </template>
</vxe-column> </vxe-column>
@ -700,7 +700,7 @@ export default {
} }
/deep/ .relation-table-parent { /deep/ .relation-table-parent {
background-color: #f5f8ff !important; background-color: @primary-color_5 !important;
} }
} }
</style> </style>

2
cmdb-ui/src/modules/cmdb/views/ci_types/uniqueConstraint.vue
View File

@ -24,7 +24,7 @@
<vxe-column field="attr_ids" :title="$t('cmdb.ciType.attributes')" :edit-render="{}"> <vxe-column field="attr_ids" :title="$t('cmdb.ciType.attributes')" :edit-render="{}">
<template #default="{ row }"> <template #default="{ row }">
<template v-for="(attr, index) in row.attr_ids"> <template v-for="(attr, index) in row.attr_ids">
<span :key="attr" :style="{ color: '#2f54eb' }">{{ getDisplayName(attr) }}</span> <span :key="attr" class="primary-color">{{ getDisplayName(attr) }}</span>
<span :key="`_${attr}`" v-if="index !== row.attr_ids.length - 1"> + </span> <span :key="`_${attr}`" v-if="index !== row.attr_ids.length - 1"> + </span>
</template> </template>
</template> </template>

2
cmdb-ui/src/modules/cmdb/views/custom_dashboard/chart.vue
View File

@ -19,7 +19,7 @@
:type="ciType.icon.split('$$')[0]" :type="ciType.icon.split('$$')[0]"
/> />
</template> </template>
<span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span> <span class="primary-color" v-else>{{ ciType.name[0].toUpperCase() }}</span>
</div> </div>
<span :style="{ ...options.fontConfig }">{{ toThousands(data) }}</span> <span :style="{ ...options.fontConfig }">{{ toThousands(data) }}</span>
</div> </div>

4
cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
View File

@ -148,7 +148,7 @@
:type="ciType.icon.split('$$')[0]" :type="ciType.icon.split('$$')[0]"
/> />
</template> </template>
<span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span> <span class="primary-color" v-else>{{ ciType.name[0].toUpperCase() }}</span>
</template> </template>
<span :style="{ color: '#000' }"> {{ form.name }}</span> <span :style="{ color: '#000' }"> {{ form.name }}</span>
</div> </div>
@ -800,7 +800,7 @@ export default {
} }
} }
.chart-right-type-box-selected { .chart-right-type-box-selected {
background-color: #e5f1ff; background-color: @primary-color_3;
} }
} }
.chart-width { .chart-width {

2
cmdb-ui/src/modules/cmdb/views/custom_dashboard/customLayout.vue
View File

@ -63,7 +63,7 @@
:type="getCiType(item).icon.split('$$')[0]" :type="getCiType(item).icon.split('$$')[0]"
/> />
</template> </template>
<span :style="{ color: '#2f54eb' }" v-else>{{ getCiType(item).name[0].toUpperCase() }}</span> <span class="primary-color" v-else>{{ getCiType(item).name[0].toUpperCase() }}</span>
</template> </template>
<span :style="{ color: item.options.chartType === 'count' ? item.options.fontColor : '#000' }">{{ <span :style="{ color: item.options.chartType === 'count' ? item.options.fontColor : '#000' }">{{
item.options.name item.options.name

6
cmdb-ui/src/modules/cmdb/views/dcim/components/dcimMain/rackGrid.vue
View File

@ -268,18 +268,18 @@ export default {
margin-right: 2px; margin-right: 2px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #3F75FF; color: #2F54EB;
} }
&-icon { &-icon {
font-size: 12px; font-size: 12px;
color: #3F75FF; color: #2F54EB;
} }
} }
&:hover { &:hover {
background-color: #FFFFFF; background-color: #FFFFFF;
box-shadow: 0px 22px 33px 0px rgba(41, 65, 126, 0.25); box-shadow: ~'0px 22px 33px 0px @{primary-color}15';
z-index: 2; z-index: 2;
.rack-grid-item-name { .rack-grid-item-name {

10
cmdb-ui/src/modules/cmdb/views/dcim/components/dcimTree.vue
View File

@ -58,15 +58,11 @@
> >
<ops-icon <ops-icon
:type="treeNodeData.icon" :type="treeNodeData.icon"
class="dcim-tree-node-icon" :class="['dcim-tree-node-icon', treeNodeData.dcimType === DCIM_TYPE.REGION ? 'primary-color' : '']"
:style="{ color: treeNodeData.iconColor }"
/> />
<a-tooltip :title="treeNodeData.title"> <a-tooltip :title="treeNodeData.title">
<span <span
class="dcim-tree-node-title" :class="['dcim-tree-node-title', treeKey === treeNodeData.key ? 'primary-color' : '']"
:style="{
color: treeKey === treeNodeData.key ? '#2F54EB' : ''
}"
> >
{{ treeNodeData.title }} {{ treeNodeData.title }}
</span> </span>
@ -164,6 +160,7 @@ export default {
DCIM_TYPE.REGION, DCIM_TYPE.REGION,
DCIM_TYPE.IDC DCIM_TYPE.IDC
], ],
DCIM_TYPE,
viewDetailCITypeId: 0, viewDetailCITypeId: 0,
viewDetailAttrObj: {}, viewDetailAttrObj: {},
@ -365,6 +362,7 @@ export default {
&-icon { &-icon {
font-size: 12px; font-size: 12px;
flex-shrink: 0; flex-shrink: 0;
color: #A5A9BC;
} }
&-title { &-title {

9
cmdb-ui/src/modules/cmdb/views/dcim/components/rackDetail/rackView/rackUnitView.vue
View File

@ -117,8 +117,8 @@
}" }"
@click="addDevice(index)" @click="addDevice(index)"
> >
<ops-icon <a-icon
type="monitor-add" type="plus-circle"
class="rack-container-main-list-gap-icon" class="rack-container-main-list-gap-icon"
/> />
<span <span
@ -492,12 +492,13 @@ export default {
&-icon { &-icon {
font-size: 12px; font-size: 12px;
display: none; display: none;
color: @primary-color;
} }
&-text { &-text {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: rgba(0, 87, 255, 0.80); color: @primary-color;
margin-left: 6px; margin-left: 6px;
display: none; display: none;
} }
@ -508,7 +509,7 @@ export default {
} }
&:hover { &:hover {
background-color: #D5DDEE; background-color: @primary-color_4;
.rack-container-main-list-gap-icon { .rack-container-main-list-gap-icon {
display: inline-block; display: inline-block;

6
cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
View File

@ -165,7 +165,7 @@ export default {
display: inline-block; display: inline-block;
width: 180px; width: 180px;
height: 105px; height: 105px;
box-shadow: 0px 2px 8px rgba(122, 140, 204, 0.25); box-shadow: 0px 2px 8px @primary-color_3;
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
margin-bottom: 40px; margin-bottom: 40px;
@ -297,7 +297,7 @@ export default {
&, &.discovery-card-small { &, &.discovery-card-small {
&:hover { &:hover {
box-shadow: 0px 6px 20px 0px rgba(122, 140, 204, 0.30); box-shadow: 0px 6px 20px 0px @primary-color_3;
} }
} }
@ -314,7 +314,7 @@ export default {
} }
&:hover { &:hover {
box-shadow: 0px 6px 28px 0px rgba(122, 140, 204, 0.30); box-shadow: 0px 6px 28px 0px @primary-color_3;
} }
} }
} }

6
cmdb-ui/src/modules/cmdb/views/discovery/index.vue
View File

@ -70,7 +70,7 @@
class="setting-discovery-add" class="setting-discovery-add"
@click="handleOpenEditDrawer(null, 'add', DISCOVERY_CATEGORY_TYPE.PLUGIN)" @click="handleOpenEditDrawer(null, 'add', DISCOVERY_CATEGORY_TYPE.PLUGIN)"
> >
<a-icon type="plus-circle" theme="twoTone" /> <a-icon class="setting-discovery-add-icon" type="plus-circle" />
<span class="setting-discovery-add-text"> <span class="setting-discovery-add-text">
{{ $t('cmdb.ad.addPlugin') }} {{ $t('cmdb.ad.addPlugin') }}
</span> </span>
@ -380,6 +380,10 @@ export default {
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
&-icon {
color: @primary-color_9;
}
&-text { &-text {
color: @text-color_3; color: @text-color_3;
font-size: 12px; font-size: 12px;

2
cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
View File

@ -24,7 +24,7 @@
:type="ciType.icon.split('$$')[0]" :type="ciType.icon.split('$$')[0]"
/> />
</template> </template>
<span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span> <span class="primary-color" v-else>{{ ciType.name[0].toUpperCase() }}</span>
</span> </span>
<span :title="ciType.alias || ciType.name" class="cmdb-adc-side-name">{{ ciType.alias || ciType.name }}</span> <span :title="ciType.alias || ciType.name" class="cmdb-adc-side-name">{{ ciType.alias || ciType.name }}</span>
</div> </div>

5
cmdb-ui/src/modules/cmdb/views/ipam/components/ipamTree.vue
View File

@ -26,10 +26,7 @@
/> />
<a-tooltip :title="treeNodeData.title"> <a-tooltip :title="treeNodeData.title">
<span <span
class="ipam-tree-node-title" :class="['ipam-tree-node-title', treeKey === treeNodeData.key ? 'primary-color' : '']"
:style="{
color: treeKey === treeNodeData.key ? '#2F54EB' : ''
}"
> >
{{ treeNodeData.title }} {{ treeNodeData.title }}
</span> </span>

15
cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue
View File

@ -20,7 +20,7 @@
<vxe-column <vxe-column
field="relation_type_id" field="relation_type_id"
:title="$t('cmdb.custom_dashboard.relation')" :title="$t('cmdb.custom_dashboard.relation')"
:filters="[{ data: '' }]" :filters="relationTypeList"
:filter-multiple="false" :filter-multiple="false"
> >
<template #default="{ row }"> <template #default="{ row }">
@ -144,7 +144,7 @@ export default {
return { return {
drawerVisible: false, drawerVisible: false,
tableData: [], tableData: [],
relationTypeList: null, relationTypeList: [],
type2attributes: {}, type2attributes: {},
tableAttrList: [], tableAttrList: [],
} }
@ -201,13 +201,6 @@ export default {
async getRelationTypes() { async getRelationTypes() {
const res = await getRelationTypes() const res = await getRelationTypes()
this.relationTypeList = res.map((item) => ({ value: item.id, label: item.name })) this.relationTypeList = res.map((item) => ({ value: item.id, label: item.name }))
const $table = this.$refs.xTable
if ($table) {
const nameColumn = $table.getColumnByField('relation_type_id')
if (nameColumn) {
$table.setFilter(nameColumn, this.relationTypeList)
}
}
}, },
// 转换关联关系 // 转换关联关系
handleConstraint(constraintId) { handleConstraint(constraintId) {
@ -359,5 +352,9 @@ export default {
&-action { &-action {
margin-left: 5px; margin-left: 5px;
} }
/deep/ .ant-select-selection {
box-shadow: none;
}
} }
</style> </style>

8
cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
View File

@ -30,7 +30,7 @@
<span>{{ column.title }}</span> <span>{{ column.title }}</span>
<a-popover trigger="click" placement="bottom"> <a-popover trigger="click" placement="bottom">
<a-icon class="filter" type="filter" theme="filled" /> <a-icon class="filter" type="filter" theme="filled" />
<a slot="content"> <a class="filter-content" slot="content">
<a-input <a-input
:placeholder="$t('cmdb.history.userTips')" :placeholder="$t('cmdb.history.userTips')"
size="small" size="small"
@ -453,4 +453,10 @@ export default {
color: #606266; color: #606266;
} }
} }
.filter-content {
display: flex;
align-items: center;
column-gap: 8px;
}
</style> </style>

10
cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
View File

@ -28,7 +28,7 @@
<span>{{ column.title }}</span> <span>{{ column.title }}</span>
<a-popover trigger="click" placement="bottom"> <a-popover trigger="click" placement="bottom">
<a-icon class="filter" type="filter" theme="filled" /> <a-icon class="filter" type="filter" theme="filled" />
<a slot="content"> <a class="filter-content" slot="content">
<a-input <a-input
:placeholder="$t('cmdb.history.userTips')" :placeholder="$t('cmdb.history.userTips')"
size="small" size="small"
@ -47,7 +47,7 @@
<span>{{ column.title }}</span> <span>{{ column.title }}</span>
<a-popover trigger="click" placement="bottom"> <a-popover trigger="click" placement="bottom">
<a-icon class="filter" type="filter" theme="filled" /> <a-icon class="filter" type="filter" theme="filled" />
<a slot="content"> <a class="filter-content" slot="content">
<a-select <a-select
v-model="queryParams.operate_type" v-model="queryParams.operate_type"
:placeholder="$t('cmdb.history.filterOperate')" :placeholder="$t('cmdb.history.filterOperate')"
@ -445,4 +445,10 @@ export default {
color: #606266; color: #606266;
} }
} }
.filter-content {
display: flex;
align-items: center;
column-gap: 8px;
}
</style> </style>

8
cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue
View File

@ -26,7 +26,7 @@
<span>{{ column.title }}</span> <span>{{ column.title }}</span>
<a-popover trigger="click" placement="bottom"> <a-popover trigger="click" placement="bottom">
<a-icon class="filter" type="filter" theme="filled" /> <a-icon class="filter" type="filter" theme="filled" />
<a slot="content"> <a class="filter-content" slot="content">
<a-select <a-select
v-model="queryParams.operate_type" v-model="queryParams.operate_type"
:placeholder="$t('cmdb.history.filterOperate')" :placeholder="$t('cmdb.history.filterOperate')"
@ -563,4 +563,10 @@ export default {
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
.filter-content {
display: flex;
align-items: center;
column-gap: 8px;
}
</style> </style>

8
cmdb-ui/src/modules/cmdb/views/preference/index.vue
View File

@ -654,11 +654,11 @@ export default {
height: 155px; height: 155px;
border-radius: @border-radius-box; border-radius: @border-radius-box;
background-color: #fff; background-color: #fff;
box-shadow: 0px 2px 8px rgba(149, 160, 208, 0.25); box-shadow: ~'0px 2px 8px @{primary-color}15';
margin: 0 20px 20px 0; margin: 0 20px 20px 0;
padding: 12px; padding: 12px;
&:hover { &:hover {
box-shadow: 4px 25px 30px rgba(50, 89, 134, 0.25); box-shadow: ~'4px 25px 30px @{primary-color}15';
transform: scale(1.1); transform: scale(1.1);
} }
.cmdb-preference-header { .cmdb-preference-header {
@ -733,10 +733,10 @@ export default {
align-items: center; align-items: center;
gap: 3px; gap: 3px;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.76); color: @text-color_1;
&:hover { &:hover {
color: #1890ff; color: @primary-color;
} }
} }

13
cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/searchCondition.vue
View File

@ -13,12 +13,11 @@
<div class="search-condition-control"> <div class="search-condition-control">
<treeselect <treeselect
:value="sourceCIType" :value="sourceCIType"
class="custom-treeselect custom-treeselect-bgcAndBorder filter-content-ciTypes" class="custom-treeselect custom-treeselect-white filter-content-ciTypes"
:style="{ :style="{
width: '100%', width: '100%',
zIndex: '1000', zIndex: '1000',
'--custom-height': '32px', '--custom-height': '32px',
'--custom-bg-color': '#FFF',
'--custom-multiple-lineHeight': '32px', '--custom-multiple-lineHeight': '32px',
}" }"
:multiple="false" :multiple="false"
@ -699,14 +698,14 @@ export default {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #D9E4FA; background-color: @primary-color_4;
.search-condition-favor-name { .search-condition-favor-name {
color: #2F54EB; color: @primary-color;
} }
.search-condition-favor-close { .search-condition-favor-close {
color: #2F54EB; color: @primary-color;
} }
} }
} }
@ -737,10 +736,10 @@ export default {
} }
&:hover { &:hover {
background-color: #D9E4FA; background-color: @primary-color_4;
.search-condition-hide-icon { .search-condition-hide-icon {
color: #2F54EB; color: @primary-color_4;
} }
} }
} }

6
cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/index.vue
View File

@ -656,15 +656,15 @@ export default {
&:hover { &:hover {
.relation-search-expand-handle { .relation-search-expand-handle {
background-color: #D9E4FA; background-color: @primary-color_4;
} }
.relation-search-expand-icon { .relation-search-expand-icon {
color: #2F54EB; color: @primary-color;
} }
.relation-search-expand-text { .relation-search-expand-text {
color: #2F54EB; color: @primary-color;
} }
} }
} }

6
cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/instanceDetail.vue
View File

@ -327,7 +327,7 @@ export default {
&-header { &-header {
width: 100%; width: 100%;
height: 75px; height: 75px;
background-color: #EBF0F9; background-color: @primary-color_3;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
@ -342,7 +342,7 @@ export default {
right: -20px; right: -20px;
top: 0px; top: 0px;
transform: rotate(40deg); transform: rotate(40deg);
background: rgba(248, 249, 253, 0.60); background-color: @primary-color_5;
} }
&-line-2 { &-line-2 {
@ -352,7 +352,7 @@ export default {
right: -110px; right: -110px;
top: 0px; top: 0px;
transform: rotate(40deg); transform: rotate(40deg);
background: rgba(248, 249, 253, 0.60); background-color: @primary-color_5;
} }
&-row { &-row {

2
cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/instanceList.vue
View File

@ -431,7 +431,7 @@ export default {
} }
&:hover { &:hover {
box-shadow: 0px 2px 12px 0px rgba(147, 168, 223, 0.20); box-shadow: ~'0px 2px 12px 0px @{primary-color}15';
.list-card-collect { .list-card-collect {
display: inline-block; display: inline-block;

345
cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/searchInput.vue
View File

@ -1,36 +1,48 @@
<template> <template>
<div :class="['search-input', classType ? 'search-input-' + classType : '', { 'column-search-mode': isColumnSearch }]"> <div :class="['search-input', classType ? 'search-input-' + classType : '']">
<div class="search-area"> <div class="search-area">
<div v-show="!isColumnSearch" class="input-wrapper"> <a-input
<a-input v-show="searchMode === SEARCH_MODE.NORMAL"
:value="searchValue" :value="searchValue"
class="search-input-component" class="search-input-component"
:placeholder="$t('cmdb.ciType.searchInputTip')" :placeholder="$t('cmdb.ciType.searchInputTip')"
@change="handleChangeSearchValue" @change="handleChangeSearchValue"
@pressEnter="saveCondition(true, 'normal')" @pressEnter="saveCondition(true)"
/> >
<a-icon <a-icon
class="search-icon" class="search-icon"
slot="prefix"
type="search" type="search"
@click="saveCondition(true, 'normal')" @click="saveCondition(true)"
/> />
</div> </a-input>
<div v-show="isColumnSearch" class="textarea-wrapper"> <div
<div class="textarea-container"> v-show="searchMode === SEARCH_MODE.COLUMN"
<a-textarea class="search-textarea-component"
:value="searchValue" >
class="column-search-component" <a-textarea
:rows="4" :value="searchValue"
:placeholder="$t('cmdb.ciType.columnSearchInputTip')" :autosize="{
@change="handleChangeColumnSearchValue" minRows: 3,
@pressEnter="handlePressEnter" maxRows: 3,
/> }"
:placeholder="$t('cmdb.ciType.columnSearchInputTip')"
@change="handleChangeSearchValue"
/>
<div class="search-textarea-icon-wrap">
<a-icon <a-icon
class="search-icon" class="search-icon"
type="search" type="search"
@click="saveCondition(true, 'column')" @click="saveCondition(true)"
/> />
<a-tooltip :title="$t('cmdb.ciType.columnSearchTip')">
<a-icon
type="info-circle"
class="search-icon"
/>
</a-tooltip>
</div> </div>
</div> </div>
@ -46,11 +58,26 @@
@saveCondition="saveCondition" @saveCondition="saveCondition"
/> />
<div class="column-search-btn" @click="toggleColumnSearch"> <div class="search-mode-switch">
<a-icon class="column-search-btn-icon" type="menu" /> <span
<span class="column-search-btn-title"> v-for="(item) in searchModeList"
{{ isColumnSearch ? $t('cmdb.ciType.rowSearchMode') : $t('cmdb.ciType.columnSearchMode') }} :key="item.value"
:class="['search-mode-switch-item', searchMode === item.value ? 'search-mode-switch-item-active' : '']"
:style="{
width: isZh ? '40px' : '65px'
}"
@click="updateSearchMode(item.value)"
>
{{ $t(item.label) }}
</span> </span>
<span
class="search-mode-switch-slide"
:style="{
left: searchMode === SEARCH_MODE.COLUMN ? (isZh ? '44px' : '69px') : '4px',
width: isZh ? '40px' : '65px'
}"
></span>
</div> </div>
</div> </div>
</div> </div>
@ -68,6 +95,7 @@
</template> </template>
<script> <script>
import { SEARCH_MODE } from '../constants.js'
import FilterPopover from './filterPopover.vue' import FilterPopover from './filterPopover.vue'
export default { export default {
@ -100,12 +128,31 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
isColumnSearch: { searchMode: {
type: Boolean, type: String,
default: false default: SEARCH_MODE.NORMAL
}
},
data() {
return {
SEARCH_MODE,
searchModeList: [
{
value: SEARCH_MODE.NORMAL,
label: 'cmdb.ciType.rowSearchMode'
},
{
value: SEARCH_MODE.COLUMN,
label: 'cmdb.ciType.columnSearchMode'
},
]
} }
}, },
computed: { computed: {
isZh() {
return this.$i18n.locale === 'zh'
},
// 复制文字展示，与实际文本复制内容区别在于，未选择模型时不展示所有模型拼接数据 // 复制文字展示，与实际文本复制内容区别在于，未选择模型时不展示所有模型拼接数据
copyText() { copyText() {
const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
@ -119,14 +166,15 @@ export default {
textArray.push(exp) textArray.push(exp)
} }
if (this.searchValue) { if (this.searchValue) {
let processedValue = this.searchValue if (
if (this.isColumnSearch) { this.searchMode === SEARCH_MODE.COLUMN &&
this.searchValue.includes('\n')
) {
const values = this.searchValue.split('\n').filter(v => v.trim()) const values = this.searchValue.split('\n').filter(v => v.trim())
if (values.length) { textArray.push(`(${values.join(';')})`)
processedValue = `(${values.join(';')})` } else {
} textArray.push(`*${this.searchValue}*`)
} }
textArray.push(`${!this.isColumnSearch ? '*' : ''}${processedValue}${!this.isColumnSearch ? '*' : ''}`)
} }
return textArray.length ? `q=${textArray.join(',')}` : '' return textArray.length ? `q=${textArray.join(',')}` : ''
@ -136,8 +184,8 @@ export default {
updateAllAttributesList(value) { updateAllAttributesList(value) {
this.$emit('updateAllAttributesList', value) this.$emit('updateAllAttributesList', value)
}, },
saveCondition(isSubmit, searchType = 'normal') { saveCondition(isSubmit) {
this.$emit('saveCondition', isSubmit, searchType) this.$emit('saveCondition', isSubmit)
}, },
handleChangeSearchValue(e) { handleChangeSearchValue(e) {
const value = e.target.value const value = e.target.value
@ -163,9 +211,21 @@ export default {
ciTypeIds.push(...ids) ciTypeIds.push(...ids)
}) })
} }
const copyText = `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${
searchValue ? `,${!this.isColumnSearch ? '*' : ''}${searchValue}${!this.isColumnSearch ? '*' : ''}` : '' let copySearchValue = ''
}` if (searchValue) {
if (
this.searchMode === SEARCH_MODE.COLUMN &&
this.searchValue.includes('\n')
) {
const values = searchValue.split('\n').filter(v => v.trim())
copySearchValue = `,(${values.join(';')})`
} else {
copySearchValue = `,*${searchValue}*`
}
}
const copyText = `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${copySearchValue}`
this.$copyText(copyText) this.$copyText(copyText)
.then(() => { .then(() => {
@ -176,33 +236,8 @@ export default {
}) })
}, },
toggleColumnSearch() { updateSearchMode(mode) {
this.$emit('toggleSearchMode', !this.isColumnSearch) this.$emit('updateSearchMode', mode)
this.saveCondition(false, !this.isColumnSearch ? 'column' : 'normal')
},
handleChangeColumnSearchValue(e) {
const value = e.target.value
this.changeFilter({
name: 'searchValue',
value
})
},
handlePressEnter(e) {
if (this.isColumnSearch) {
// 列搜索模式下，按下 Enter 键时阻止默认行为并插入换行符
e.preventDefault()
const value = this.searchValue || ''
const cursorPosition = e.target.selectionStart
const newValue = value.slice(0, cursorPosition) + '\n' + value.slice(cursorPosition)
this.changeFilter({
name: 'searchValue',
value: newValue
})
} else {
this.saveCondition(true, 'normal')
}
} }
} }
} }
@ -211,115 +246,132 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.search-input { .search-input {
width: 100%; width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px; margin-bottom: 16px;
.search-area { .search-area {
display: flex;
align-items: flex-start;
min-height: 48px;
width: 100%; width: 100%;
}
.input-wrapper {
position: relative; position: relative;
flex-grow: 1;
.search-input-component { .search-input-component {
height: 48px; height: 48px;
line-height: 48px;
border-radius: 48px;
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #d9d9d9;
font-size: 14px; font-size: 14px;
border-radius: 8px;
/deep/ input { &:hover {
height: 100%; /deep/ .ant-input {
padding-right: 40px; background-color: @primary-color_5;
}
}
/deep/ .ant-input {
border: none;
height: 48px;
line-height: 48px;
border-radius: 48px;
&:focus {
border: solid 1px @primary-color;
background-color: #FFFFFF !important;
}
}
}
.search-textarea-component {
position: relative;
.search-textarea-icon-wrap {
position: absolute;
top: 10px;
left: 12px;
display: flex;
flex-direction: column;
row-gap: 6px;
}
&:hover {
/deep/ .ant-input {
background-color: @primary-color_5;
}
}
/deep/ .ant-input {
border: none;
padding-left: 36px;
resize: none;
&:focus {
border: solid 1px @primary-color;
background-color: #FFFFFF !important;
}
} }
} }
.search-icon { .search-icon {
position: absolute; color: @primary-color;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #2F54EB;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
} }
.textarea-wrapper { .operation-area {
flex-grow: 1; position: absolute;
display: flex;
align-items: center;
right: 0px;
top: 0px;
height: 48px;
transform: translateX(100%);
.textarea-container { .search-mode-switch {
display: flex;
align-items: center;
height: 32px;
background-color: @primary-color_3;
border-radius: 32px;
position: relative; position: relative;
width: 100%; padding: 0 4px;
max-height: 200px; margin-left: 14px;
cursor: pointer;
.column-search-component { &-item {
width: 100%; height: 24px;
max-height: 200px; width: 40px;
background-color: #FFFFFF; display: flex;
border: 1px solid #d9d9d9; align-items: center;
font-size: 14px; justify-content: center;
border-radius: 8px; font-size: 12px;
padding-right: 35px; font-weight: 400;
resize: none; color: @text-color_2;
transition: all 0.3s; z-index: 1;
position: relative;
&:hover, &:focus { &-active {
border-color: #40a9ff; color: @primary-color;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} }
} }
.search-icon { &-slide {
position: absolute; position: absolute;
right: 12px; transition: left 0.2s;
top: 12px; border-radius: 24px;
color: #2F54EB; background-color: #FFFFFF;
font-size: 14px; height: 24px;
cursor: pointer; top: 4px;
width: 40px;
z-index: 0;
} }
} }
} }
.operation-area {
display: flex;
align-items: center;
height: 48px;
margin-left: 10px;
}
.column-search-btn {
flex-shrink: 0;
display: flex;
align-items: center;
margin-left: 13px;
cursor: pointer;
&-icon {
color: #2F54EB;
font-size: 12px;
}
&-title {
font-size: 14px;
font-weight: 400;
color: #2F54EB;
margin-left: 3px;
}
}
.expression-display { .expression-display {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 20px; max-width: 100%;
max-width: 30%; width: fit-content;
margin-top: 8px;
&-text { &-text {
width: 100%; width: 100%;
@ -335,16 +387,9 @@ export default {
} }
} }
.search-input-component, &-after {
.column-search-component { .search-area {
&:hover { max-width: 420px;
border-color: #40a9ff;
}
&:focus {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
outline: none;
} }
} }
} }

4
cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/constants.js Normal file
View File

@ -0,0 +1,4 @@
export const SEARCH_MODE = {
NORMAL: 'normal',
COLUMN: 'column'
}

65
cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/index.vue
View File

@ -15,11 +15,11 @@
:searchValue="searchValue" :searchValue="searchValue"
:selectCITypeIds="selectCITypeIds" :selectCITypeIds="selectCITypeIds"
:expression="expression" :expression="expression"
:isColumnSearch="currentSearchType === 'column'" :searchMode="currentSearchMode"
@changeFilter="changeFilter" @changeFilter="changeFilter"
@updateAllAttributesList="updateAllAttributesList" @updateAllAttributesList="updateAllAttributesList"
@saveCondition="saveCondition" @saveCondition="saveCondition"
@toggleSearchMode="handleToggleSearchMode" @updateSearchMode="updateSearchMode"
/> />
<HistoryList <HistoryList
:recentList="recentList" :recentList="recentList"
@ -48,11 +48,11 @@
:searchValue="searchValue" :searchValue="searchValue"
:selectCITypeIds="selectCITypeIds" :selectCITypeIds="selectCITypeIds"
:expression="expression" :expression="expression"
:isColumnSearch="currentSearchType === 'column'" :searchMode="currentSearchMode"
@changeFilter="changeFilter" @changeFilter="changeFilter"
@updateAllAttributesList="updateAllAttributesList" @updateAllAttributesList="updateAllAttributesList"
@saveCondition="saveCondition" @saveCondition="saveCondition"
@toggleSearchMode="handleToggleSearchMode" @updateSearchMode="updateSearchMode"
/> />
<HistoryList <HistoryList
:recentList="recentList" :recentList="recentList"
@ -127,6 +127,7 @@ import { getPreferenceSearch, savePreferenceSearch, getSubscribeAttributes, dele
import { searchAttributes, getCITypeAttributesByTypeIds } from '@/modules/cmdb/api/CITypeAttr' import { searchAttributes, getCITypeAttributesByTypeIds } from '@/modules/cmdb/api/CITypeAttr'
import { searchCI } from '@/modules/cmdb/api/ci' import { searchCI } from '@/modules/cmdb/api/ci'
import { getCITypes } from '@/modules/cmdb/api/CIType' import { getCITypes } from '@/modules/cmdb/api/CIType'
import { SEARCH_MODE } from './constants.js'
import SearchInput from './components/searchInput.vue' import SearchInput from './components/searchInput.vue'
import HistoryList from './components/historyList.vue' import HistoryList from './components/historyList.vue'
@ -176,7 +177,7 @@ export default {
showInstanceDetail: false, showInstanceDetail: false,
detailCIId: -1, detailCIId: -1,
detailCITypeId: -1, detailCITypeId: -1,
currentSearchType: 'normal', currentSearchMode: SEARCH_MODE.NORMAL,
} }
}, },
computed: { computed: {
@ -245,9 +246,7 @@ export default {
} }
}, },
async saveCondition(isSubmit, searchType = 'normal') { async saveCondition(isSubmit) {
this.currentSearchType = searchType
if ( if (
this.searchValue || this.searchValue ||
this.expression || this.expression ||
@ -261,7 +260,7 @@ export default {
option.searchValue === this.searchValue && option.searchValue === this.searchValue &&
option.expression === this.expression && option.expression === this.expression &&
_.isEqual(option.ciTypeIds, this.selectCITypeIds) && _.isEqual(option.ciTypeIds, this.selectCITypeIds) &&
option.searchType === this.currentSearchType option.searchMode === this.currentSearchMode
) { ) {
needDeleteList.push(item.id) needDeleteList.push(item.id)
} else { } else {
@ -288,7 +287,7 @@ export default {
expression: this.expression, expression: this.expression,
ciTypeIds: this.selectCITypeIds, ciTypeIds: this.selectCITypeIds,
ciTypeNames, ciTypeNames,
searchType: this.currentSearchType searchMode: this.currentSearchMode
}, },
name: '__recent__' name: '__recent__'
}) })
@ -299,7 +298,7 @@ export default {
this.isSearch = true this.isSearch = true
this.currentPage = 1 this.currentPage = 1
this.hideDetail() this.hideDetail()
this.loadInstance(this.currentSearchType) this.loadInstance()
} }
}, },
@ -316,19 +315,11 @@ export default {
this.getRecentList() this.getRecentList()
}, },
async loadInstance(searchType = 'normal') { async loadInstance() {
const { selectCITypeIds, expression } = this const { selectCITypeIds, expression, searchValue } = this
let { searchValue } = this
const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
const exp = expression.match(regQ) ? expression.match(regQ)[0] : null const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
if (searchType === 'column' && searchValue) {
const values = searchValue.split('\n').filter(v => v.trim())
if (values.length) {
searchValue = `(${values.join(';')})`
}
}
const ciTypeIds = [...selectCITypeIds] const ciTypeIds = [...selectCITypeIds]
if (!ciTypeIds.length) { if (!ciTypeIds.length) {
this.CITypeGroup.forEach((item) => { this.CITypeGroup.forEach((item) => {
@ -337,10 +328,21 @@ export default {
}) })
} }
let querySearchValue = ''
if (searchValue) {
if (
this.currentSearchMode === SEARCH_MODE.COLUMN &&
searchValue.includes('\n')
) {
const values = searchValue.split('\n').filter(v => v.trim())
querySearchValue = `,(${values.join(';')})`
} else {
querySearchValue = `,*${searchValue}*`
}
}
const res = await searchCI({ const res = await searchCI({
q: `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${ q: `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${querySearchValue}`,
searchValue ? `,${searchType === 'normal' ? '*' : ''}${searchValue}${searchType === 'normal' ? '*' : ''}` : ''
}`,
count: this.pageSize, count: this.pageSize,
page: this.currentPage, page: this.currentPage,
sort: '_type' sort: '_type'
@ -406,6 +408,7 @@ export default {
} }
this.ciTabList = ciTabList this.ciTabList = ciTabList
// 处理引用属性
const allAttr = [] const allAttr = []
subscribedRes.map((item) => { subscribedRes.map((item) => {
allAttr.push(...item.attributes) allAttr.push(...item.attributes)
@ -493,21 +496,21 @@ export default {
this.searchValue = data?.searchValue || '' this.searchValue = data?.searchValue || ''
this.expression = data?.expression || '' this.expression = data?.expression || ''
this.selectCITypeIds = data?.ciTypeIds || [] this.selectCITypeIds = data?.ciTypeIds || []
this.currentSearchType = data?.searchType || 'normal' this.currentSearchMode = data?.searchMode || 'normal'
this.hideDetail() this.hideDetail()
this.loadInstance(this.currentSearchType) this.loadInstance()
}, },
handlePageSizeChange(_, pageSize) { handlePageSizeChange(_, pageSize) {
this.pageSize = pageSize this.pageSize = pageSize
this.currentPage = 1 this.currentPage = 1
this.loadInstance(this.currentSearchType) this.loadInstance()
}, },
changePage(page) { changePage(page) {
this.currentPage = page this.currentPage = page
this.loadInstance(this.currentSearchType) this.loadInstance()
}, },
changeFilter(data) { changeFilter(data) {
@ -552,8 +555,8 @@ export default {
this.showDetail(data) this.showDetail(data)
}, },
handleToggleSearchMode(isColumn) { updateSearchMode(mode) {
this.currentSearchType = isColumn ? 'column' : 'normal' this.currentSearchMode = mode
} }
} }
} }
@ -567,7 +570,7 @@ export default {
&-before { &-before {
width: 100%; width: 100%;
max-width: 725px; max-width: 718px;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
padding-top: 100px; padding-top: 100px;

2
cmdb-ui/src/modules/cmdb/views/topology_view/index.vue
View File

@ -109,7 +109,7 @@
:type="topo.icon.split('$$')[0]" :type="topo.icon.split('$$')[0]"
/> />
</template> </template>
<span :style="{ color: '#2f54eb' }" v-else>{{ topo.name[0].toUpperCase() }}</span> <span class="primary-color" v-else>{{ topo.name[0].toUpperCase() }}</span>
</span> </span>
</div> </div>
<span class="topo-left-detail-title">{{ topo.alias || topo.name }}</span> <span class="topo-left-detail-title">{{ topo.alias || topo.name }}</span>

2
cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
View File

@ -48,7 +48,7 @@
:type="ciType.icon.split('$$')[0]" :type="ciType.icon.split('$$')[0]"
/> />
</template> </template>
<span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span> <span class="primary-color" v-else>{{ ciType.name[0].toUpperCase() }}</span>
</span> </span>
<span class="tree-views-left-header-name">{{ ciType.alias || ciType.name }}</span> <span class="tree-views-left-header-name">{{ ciType.alias || ciType.name }}</span>
<div class="actions"> <div class="actions">

88
cmdb-ui/src/style/global.less
View File

@ -824,6 +824,10 @@ body {
color: @primary-color !important; color: @primary-color !important;
} }
.el-select-dropdown__item.hover {
background-color: @primary-color_5;
}
.ant-tabs-nav .ant-tabs-tab { .ant-tabs-nav .ant-tabs-tab {
margin-right: 16px; margin-right: 16px;
} }
@ -969,7 +973,7 @@ body {
// 白色背景 // 白色背景
.custom-treeselect-white { .custom-treeselect-white {
.custom-vue-treeselect__control( .custom-vue-treeselect__control(
#fff, ~'#fff !important',
1px solid #d9d9d9, 1px solid #d9d9d9,
none, none,
@primary-color @primary-color
@ -1064,7 +1068,7 @@ body {
// } // }
.vxe-body--row { .vxe-body--row {
&.row--stripe { &.row--stripe {
background-color: rgba(240, 245, 255, 0.4) !important; background-color: @primary-color_6 !important;
border-top: 1px solid rgba(0, 0, 0, 0.1) !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 5px !important; border-radius: 5px !important;
> td { > td {
@ -1097,6 +1101,7 @@ body {
&:focus { &:focus {
background-color: @primary-color_7; background-color: @primary-color_7;
border: solid 1px @primary-color;
} }
} }
} }
@ -1110,15 +1115,24 @@ body {
color: #333; color: #333;
cursor: default; cursor: default;
} }
.ant-input:focus,
.ant-input-number:focus,
.ant-input-number-focused {
box-shadow: none;
}
.ant-pagination-options-quick-jumper input:focus {
box-shadow: none;
}
// vxe-table checkbox 选中 highlight // vxe-table checkbox 选中 highlight
.vxe-table--render-default .vxe-body--row.row--checked, .vxe-table--render-default .vxe-body--row.row--checked,
.vxe-table--render-default .vxe-body--row.row--radio { .vxe-table--render-default .vxe-body--row.row--radio {
background: aliceblue !important; background: @primary-color_5 !important;
} }
.vxe-table--render-default .vxe-body--row.row--hover.row--checked, .vxe-table--render-default .vxe-body--row.row--hover.row--checked,
.vxe-table--render-default .vxe-body--row.row--hover.row--radio { .vxe-table--render-default .vxe-body--row.row--hover.row--radio {
background: lightskyblue !important; background: @primary-color_4 !important;
} }
// vxe-table 颜色 // vxe-table 颜色
@ -1179,6 +1193,15 @@ body {
border-color: @primary-color !important; border-color: @primary-color !important;
} }
.vxe-table--render-default .vxe-body--row.row--hover,
.vxe-table--render-default .vxe-body--row.row--hover.row--stripe {
background-color: @primary-color_7;
}
.vxe-select-option:not(.is--disabled).is--hover {
background-color: @primary-color_5;
}
//批量操作 //批量操作
.ops-list-batch-action { .ops-list-batch-action {
display: inline-block; display: inline-block;
@ -1262,7 +1285,7 @@ body {
} }
.ant-btn-primary:not(.ant-btn-background-ghost) { .ant-btn-primary:not(.ant-btn-background-ghost) {
.btn-wave-hover(#3F75FF); .btn-wave-hover(@primary-color_9);
} }
// button // button
@ -1296,6 +1319,35 @@ body {
} }
} }
.ops-select-bg {
.ant-select-selection {
background-color: @primary-color_7;
}
&:hover {
.ant-select-selection {
background-color: @primary-color_5;
}
}
.ant-select-focused {
.ant-select-selection {
background-color: @primary-color_7;
border: solid 1px @primary-color;
}
}
}
.ant-select-selection {
box-shadow: none !important;
}
// date picker
.ant-calendar-today .ant-calendar-date {
color: @primary-color;
border-color: @primary-color;
}
//dropdown //dropdown
.ops-dropdown { .ops-dropdown {
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-item:hover,
@ -1305,6 +1357,11 @@ body {
} }
} }
// radio
.ant-radio-input:focus + .ant-radio-inner {
box-shadow: none;
}
//modal //modal
.ant-modal-content { .ant-modal-content {
.ant-modal-close-x { .ant-modal-close-x {
@ -1396,6 +1453,14 @@ body {
.el-input-number--small .el-input-number__decrease, .el-input-number--small .el-input-number__decrease,
.el-input-number--small .el-input-number__increase { .el-input-number--small .el-input-number__increase {
width: 28px; width: 28px;
&:hover {
color: @primary-color;
&:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
border-color: @primary-color;
}
}
} }
.el-input-number--small { .el-input-number--small {
@ -1466,3 +1531,16 @@ body {
.ant-form-explain{ .ant-form-explain{
font-size: 12px; font-size: 12px;
} }
.ant-message-info .anticon,
.ant-message-loading .anticon {
color: @primary-color_9;
}
.primary-color {
color: @primary-color !important;
}
.primary-bg-color {
background-color: @primary-color;
}

12
cmdb-ui/src/style/static.less
View File

@ -10,6 +10,7 @@
@primary-color_6: #f9fbff; @primary-color_6: #f9fbff;
@primary-color_7: #f7f8fa; @primary-color_7: #f7f8fa;
@primary-color_8: #b1c9ff; @primary-color_8: #b1c9ff;
@primary-color_9: #3F75FF;
@link-color: @primary-color; @link-color: @primary-color;
@ -73,7 +74,8 @@
.btn-wave-hover( .btn-wave-hover(
@hoverBgColor, @hoverBgColor,
@bgZIndex: 0 @bgZIndex: 0,
@duration: 0.3s
) { ) {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -99,10 +101,10 @@
transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%);
transform-origin: left top; transform-origin: left top;
-webkit-transition: -webkit-transform 0.3s ease-out; -webkit-transition: -webkit-transform @duration ease-out;
transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform @duration ease-out;
transition: transform 0.3s ease-out; transition: transform @duration ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: transform @duration ease-out, -webkit-transform @duration ease-out;
} }
&:not([disabled]):hover { &:not([disabled]):hover {

4
cmdb-ui/src/views/setting/companyStructure/index.vue
View File

@ -100,7 +100,7 @@
/> />
</div> </div>
<!-- 筛选框 --> <!-- 筛选框 -->
<div class="Screening-box" v-if="activeGroupIndex === 1" style="background-color: rgb(240, 245, 255)"> <div class="Screening-box" v-if="activeGroupIndex === 1">
<a-popover <a-popover
@visibleChange="visibleChange" @visibleChange="visibleChange"
trigger="click" trigger="click"
@ -1166,7 +1166,7 @@ export default {
.Screening-box { .Screening-box {
margin-left: 10px; margin-left: 10px;
display: inline-block; display: inline-block;
.ops_display_wrapper(#fff); .ops_display_wrapper(@primary-color_5);
.screening-box-scene-icon { .screening-box-scene-icon {
color: @primary-color; color: @primary-color;
font-size: 12px; font-size: 12px;

2
cmdb-ui/src/views/setting/components/settingFilterComp/index.vue
View File

@ -340,7 +340,7 @@ export default {
& > a { & > a {
padding: 2px 8px; padding: 2px 8px;
&:hover { &:hover {
background-color: #f0faff; background-color: @primary-color_5;
border-radius: 5px; border-radius: 5px;
} }
} }