diff --git a/cmdb-ui/src/components/Menu/index.module.less b/cmdb-ui/src/components/Menu/index.module.less
index c42c2af8..f89f30c3 100644
--- a/cmdb-ui/src/components/Menu/index.module.less
+++ b/cmdb-ui/src/components/Menu/index.module.less
@@ -11,10 +11,19 @@
 
     .ant-input {
       box-shadow: none;
-      border: none;
-      background-color: #F7F8FA;
       height: 30px;
       line-height: 30px;
+      border-radius: 30px;
+
+      &:focus {
+        border: solid 1px #B1C9FF;
+      }
+    }
+
+    .cmdb-side-menu-search-focused {
+      .ant-input {
+        border: solid 1px #B1C9FF;
+      }
     }
 
     .ant-input-suffix {
diff --git a/cmdb-ui/src/components/Menu/menu.js b/cmdb-ui/src/components/Menu/menu.js
index e6b31db9..8179d4a0 100644
--- a/cmdb-ui/src/components/Menu/menu.js
+++ b/cmdb-ui/src/components/Menu/menu.js
@@ -92,7 +92,7 @@ export default {
       e.preventDefault()
       e.stopPropagation()
       this.$confirm({
-        title: this.$t('alert'),
+        title: this.$t('warning'),
         content: this.$t('cmdb.preference.confirmcancelSub2', { name: menu.meta.title }),
         onOk() {
           const citypeId = menu.meta.typeId
@@ -313,10 +313,7 @@ export default {
         <Item class={styles['cmdb-side-menu-search']}>
           <a-input
             ref="cmdbSideMenuSearchInputRef"
-            class={styles['cmdb-side-menu-search-input']}
-            style={{
-              border: this.$route.name === 'cmdb_resource_search' ? 'solid 1px #B1C9FF' : ''
-            }}
+            class={`ops-input ${this.$route.name === 'cmdb_resource_search' ? 'cmdb-side-menu-search-focused' : ''}`}
             placeholder={this.$t('cmdbSearch')}
             onPressEnter={(e) => {
               this.jumpCMDBSearch(e.target.value)
diff --git a/cmdb-ui/src/components/OpsTable/index.vue b/cmdb-ui/src/components/OpsTable/index.vue
index 53885dee..c91bae82 100644
--- a/cmdb-ui/src/components/OpsTable/index.vue
+++ b/cmdb-ui/src/components/OpsTable/index.vue
@@ -1,121 +1,121 @@
-<template>
-  <vxe-table v-bind="$attrs" v-on="new$listeners" ref="xTable">
-    <slot></slot>
-    <template #empty>
-      <slot name="empty">
-        <div :style="{ paddingTop: '10px' }">
-          <img :style="{ width: '140px', height: '90px' }" :src="require('@/assets/data_empty.png')" />
-          <div>{{ $t('noData') }}</div>
-        </div>
-      </slot>
-    </template>
-    <template #loading>
-      <slot name="loading"></slot>
-    </template>
-  </vxe-table>
-</template>
-
-<script>
-import _ from 'lodash'
-// 该组件使用方法与vxe-table一致，但调用它的方法时，需先调用getVxetableRef()获取到vxe-table实体
-export default {
-  name: 'OpsTable',
-  data() {
-    return {
-      // isShifting: false,
-      // lastIndex: -1,
-      lastSelected: [],
-      currentSelected: [],
-    }
-  },
-  computed: {
-    new$listeners() {
-      if (!Object.keys(this.$listeners).length) {
-        return this.$listeners
-      }
-      return Object.assign(this.$listeners, {
-        // 在这里覆盖原有的change事件
-        // 'checkbox-change': this.selectChangeEvent,
-        'checkbox-range-change': this.checkboxRangeChange,
-        'checkbox-range-start': this.checkboxRangeStart,
-        'checkbox-range-end': this.checkboxRangeEnd,
-      })
-    },
-  },
-  mounted() {
-    // window.onkeydown = (e) => {
-    //   if (e.key === 'Shift') {
-    //     this.isShifting = true
-    //   }
-    // }
-    // window.onkeyup = (e) => {
-    //   if (e.key === 'Shift') {
-    //     this.isShifting = false
-    //     this.lastIndex = -1
-    //   }
-    // }
-  },
-  beforeDestroy() {
-    // window.onkeydown = ''
-    // window.onkeyup = ''
-  },
-  methods: {
-    getVxetableRef() {
-      return this.$refs.xTable
-    },
-    // selectChangeEvent(e) {
-    //   const xTable = this.$refs.xTable
-    //   const { lastIndex } = this
-    //   const currentIndex = e.rowIndex
-    //   const { tableData } = xTable.getTableData()
-    //   if (lastIndex > -1 && this.isShifting) {
-    //     let start = lastIndex
-    //     let end = currentIndex
-    //     if (lastIndex > currentIndex) {
-    //       start = currentIndex
-    //       end = lastIndex
-    //     }
-    //     const rangeData = tableData.slice(start, end + 1)
-    //     xTable.setCheckboxRow(rangeData, true)
-    //   }
-    //   this.lastIndex = currentIndex
-    //   this.$emit('checkbox-change', { ...e, records: xTable.getCheckboxRecords() })
-    // },
-    checkboxRangeStart(e) {
-      const xTable = this.$refs.xTable
-      const lastSelected = xTable.getCheckboxRecords()
-      const selectedReserve = xTable.getCheckboxReserveRecords()
-      this.lastSelected = [...lastSelected, ...selectedReserve]
-      this.$emit('checkbox-range-start', e)
-    },
-    checkboxRangeChange(e) {
-      const xTable = this.$refs.xTable
-      xTable.setCheckboxRow(this.lastSelected, true)
-      this.currentSelected = e.records
-      // this.lastSelected = [...new Set([...this.lastSelected, ...e.records])]
-      this.$emit('checkbox-range-change', {
-        ...e,
-        records: [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()],
-      })
-    },
-    checkboxRangeEnd(e) {
-      const xTable = this.$refs.xTable
-      const isAllSelected = this.currentSelected.every((item) => {
-        const _idx = this.lastSelected.findIndex((ele) => _.isEqual(ele, item))
-        return _idx > -1
-      })
-      if (isAllSelected) {
-        xTable.setCheckboxRow(this.currentSelected, false)
-      }
-      this.currentSelected = []
-      this.lastSelected = []
-      this.$emit('checkbox-range-end', {
-        ...e,
-        records: [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()],
-      })
-    },
-  },
-}
-</script>
-
-<style lang="less"></style>
+<template>
+  <vxe-table v-bind="$attrs" v-on="new$listeners" ref="xTable">
+    <slot></slot>
+    <template #empty>
+      <slot name="empty">
+        <div :style="{ paddingTop: '10px' }">
+          <img :style="{ width: '140px', height: '120px' }" :src="require('@/assets/data_empty.png')" />
+          <div>{{ $t('noData') }}</div>
+        </div>
+      </slot>
+    </template>
+    <template #loading>
+      <slot name="loading"></slot>
+    </template>
+  </vxe-table>
+</template>
+
+<script>
+import _ from 'lodash'
+// 该组件使用方法与vxe-table一致，但调用它的方法时，需先调用getVxetableRef()获取到vxe-table实体
+export default {
+  name: 'OpsTable',
+  data() {
+    return {
+      // isShifting: false,
+      // lastIndex: -1,
+      lastSelected: [],
+      currentSelected: [],
+    }
+  },
+  computed: {
+    new$listeners() {
+      if (!Object.keys(this.$listeners).length) {
+        return this.$listeners
+      }
+      return Object.assign(this.$listeners, {
+        // 在这里覆盖原有的change事件
+        // 'checkbox-change': this.selectChangeEvent,
+        'checkbox-range-change': this.checkboxRangeChange,
+        'checkbox-range-start': this.checkboxRangeStart,
+        'checkbox-range-end': this.checkboxRangeEnd,
+      })
+    },
+  },
+  mounted() {
+    // window.onkeydown = (e) => {
+    //   if (e.key === 'Shift') {
+    //     this.isShifting = true
+    //   }
+    // }
+    // window.onkeyup = (e) => {
+    //   if (e.key === 'Shift') {
+    //     this.isShifting = false
+    //     this.lastIndex = -1
+    //   }
+    // }
+  },
+  beforeDestroy() {
+    // window.onkeydown = ''
+    // window.onkeyup = ''
+  },
+  methods: {
+    getVxetableRef() {
+      return this.$refs.xTable
+    },
+    // selectChangeEvent(e) {
+    //   const xTable = this.$refs.xTable
+    //   const { lastIndex } = this
+    //   const currentIndex = e.rowIndex
+    //   const { tableData } = xTable.getTableData()
+    //   if (lastIndex > -1 && this.isShifting) {
+    //     let start = lastIndex
+    //     let end = currentIndex
+    //     if (lastIndex > currentIndex) {
+    //       start = currentIndex
+    //       end = lastIndex
+    //     }
+    //     const rangeData = tableData.slice(start, end + 1)
+    //     xTable.setCheckboxRow(rangeData, true)
+    //   }
+    //   this.lastIndex = currentIndex
+    //   this.$emit('checkbox-change', { ...e, records: xTable.getCheckboxRecords() })
+    // },
+    checkboxRangeStart(e) {
+      const xTable = this.$refs.xTable
+      const lastSelected = xTable.getCheckboxRecords()
+      const selectedReserve = xTable.getCheckboxReserveRecords()
+      this.lastSelected = [...lastSelected, ...selectedReserve]
+      this.$emit('checkbox-range-start', e)
+    },
+    checkboxRangeChange(e) {
+      const xTable = this.$refs.xTable
+      xTable.setCheckboxRow(this.lastSelected, true)
+      this.currentSelected = e.records
+      // this.lastSelected = [...new Set([...this.lastSelected, ...e.records])]
+      this.$emit('checkbox-range-change', {
+        ...e,
+        records: [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()],
+      })
+    },
+    checkboxRangeEnd(e) {
+      const xTable = this.$refs.xTable
+      const isAllSelected = this.currentSelected.every((item) => {
+        const _idx = this.lastSelected.findIndex((ele) => _.isEqual(ele, item))
+        return _idx > -1
+      })
+      if (isAllSelected) {
+        xTable.setCheckboxRow(this.currentSelected, false)
+      }
+      this.currentSelected = []
+      this.lastSelected = []
+      this.$emit('checkbox-range-end', {
+        ...e,
+        records: [...xTable.getCheckboxRecords(), ...xTable.getCheckboxReserveRecords()],
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less"></style>
diff --git a/cmdb-ui/src/modules/acl/views/resource_types.vue b/cmdb-ui/src/modules/acl/views/resource_types.vue
index 824103a7..cb59e34e 100644
--- a/cmdb-ui/src/modules/acl/views/resource_types.vue
+++ b/cmdb-ui/src/modules/acl/views/resource_types.vue
@@ -195,11 +195,11 @@ export default {
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
-  padding: 24px;
+  padding: 20px;
   .acl-resource-types-header {
     width: 100%;
     display: inline-flex;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
     align-items: center;
   }
 }
diff --git a/cmdb-ui/src/modules/acl/views/resources.vue b/cmdb-ui/src/modules/acl/views/resources.vue
index 8f8da1a5..5f6ea139 100644
--- a/cmdb-ui/src/modules/acl/views/resources.vue
+++ b/cmdb-ui/src/modules/acl/views/resources.vue
@@ -358,11 +358,11 @@ export default {
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
-  padding: 12px 24px 24px 24px;
+  padding: 8px 20px 20px 20px;
   .acl-resources-header {
     width: 100%;
     display: inline-flex;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
     align-items: center;
     justify-content: space-between;
     .ant-switch {
diff --git a/cmdb-ui/src/modules/acl/views/roles.vue b/cmdb-ui/src/modules/acl/views/roles.vue
index d16253d0..d9bfe350 100644
--- a/cmdb-ui/src/modules/acl/views/roles.vue
+++ b/cmdb-ui/src/modules/acl/views/roles.vue
@@ -291,11 +291,11 @@ export default {
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
-  padding: 24px;
+  padding: 20px;
   .acl-roles-header {
     width: 100%;
     display: inline-flex;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
     align-items: center;
     .ant-checkbox-wrapper {
       margin-left: auto;
diff --git a/cmdb-ui/src/modules/acl/views/trigger.vue b/cmdb-ui/src/modules/acl/views/trigger.vue
index 9b41eb90..311d8b61 100644
--- a/cmdb-ui/src/modules/acl/views/trigger.vue
+++ b/cmdb-ui/src/modules/acl/views/trigger.vue
@@ -326,11 +326,11 @@ export default {
   background-color: #fff;
   height: calc(100vh - 64px);
   margin-bottom: -24px;
-  padding: 24px;
+  padding: 20px;
   .acl-trigger-header {
     width: 100%;
     display: inline-flex;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
     align-items: center;
   }
 }
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
index 7bfd856f..bc10e44e 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
@@ -1,371 +1,370 @@
-<template>
-  <div class="cmdb-grant" :style="{ }">
-    <template v-if="cmdbGrantType.includes('ci_type')">
-      <div class="cmdb-grant-title">{{ $t('cmdb.components.ciTypeGrant') }}</div>
-      <CiTypeGrant
-        :CITypeId="CITypeId"
-        :tableData="tableData"
-        grantType="ci_type"
-        @grantDepart="grantDepart"
-        @grantRole="grantRole"
-        @getTableData="getTableData"
-        ref="grant_ci_type"
-        :addedRids="addedRids"
-      />
-    </template>
-    <template
-      v-if="
-        cmdbGrantType.includes('ci_type,ci') || (cmdbGrantType.includes('ci') && !cmdbGrantType.includes('ci_type'))
-      "
-    >
-      <div class="cmdb-grant-title">{{ $t('cmdb.components.ciGrant') }}</div>
-      <CiTypeGrant
-        :CITypeId="CITypeId"
-        :tableData="tableData"
-        grantType="ci"
-        @grantDepart="grantDepart"
-        @grantRole="grantRole"
-        @getTableData="getTableData"
-        @openReadGrantModal="openReadGrantModal"
-        ref="grant_ci"
-        :addedRids="addedRids"
-      />
-    </template>
-    <template v-if="cmdbGrantType.includes('type_relation')">
-      <div class="cmdb-grant-title">{{ $t('cmdb.components.relationGrant') }}</div>
-      <TypeRelationGrant
-        :typeRelationIds="typeRelationIds"
-        :tableData="tableData"
-        grantType="type_relation"
-        @grantDepart="grantDepart"
-        @grantRole="grantRole"
-        @getTableData="getTableData"
-        ref="grant_type_relation"
-        :addedRids="addedRids"
-      />
-    </template>
-    <template v-if="cmdbGrantType.includes('relation_view')">
-      <div class="cmdb-grant-title">{{ resourceTypeName }}{{ $t('cmdb.components.perm') }}</div>
-      <RelationViewGrant
-        :resourceTypeName="resourceTypeName"
-        :tableData="tableData"
-        grantType="relation_view"
-        @grantDepart="grantDepart"
-        @grantRole="grantRole"
-        @getTableData="getTableData"
-        ref="grant_relation_view"
-        :addedRids="addedRids"
-      />
-    </template>
-    <template v-if="cmdbGrantType.includes('TopologyView')">
-      <div class="cmdb-grant-title">{{ resourceTypeName }}{{ $t('cmdb.components.perm') }}</div>
-      <TopologyViewGrant
-        :resourceTypeName="resourceTypeName"
-        :tableData="tableData"
-        :viewId="CITypeId"
-        grantType="TopologyView"
-        @grantDepart="grantDepart"
-        @grantRole="grantRole"
-        @getTableData="getTableData"
-        ref="grantTopologyView"
-        :addedRids="addedRids"
-      />
-    </template>
-
-    <GrantModal ref="grantModal" @handleOk="handleOk" />
-    <ReadGrantModal ref="readGrantModal" :CITypeId="CITypeId" @updateTableDataRead="updateTableDataRead" />
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import CiTypeGrant from './ciTypeGrant.vue'
-import TypeRelationGrant from './typeRelationGrant.vue'
-import { searchResource } from '@/modules/acl/api/resource'
-import { getResourcePerms } from '@/modules/acl/api/permission'
-import GrantModal from './grantModal.vue'
-import ReadGrantModal from './readGrantModal'
-import RelationViewGrant from './relationViewGrant.vue'
-import TopologyViewGrant from './topologyViewGrant.vue'
-import { getCITypeGroupById, ciTypeFilterPermissions } from '../../api/CIType'
-
-export default {
-  name: 'GrantComp',
-  components: { CiTypeGrant, TypeRelationGrant, RelationViewGrant, TopologyViewGrant, GrantModal, ReadGrantModal },
-  props: {
-    CITypeId: {
-      type: Number,
-      default: null,
-    },
-    resourceTypeName: {
-      type: String,
-      default: '',
-    },
-    resourceType: {
-      type: String,
-      default: 'CIType',
-    },
-    app_id: {
-      type: String,
-      default: 'cmdb',
-    },
-    cmdbGrantType: {
-      type: String,
-      default: 'ci_type,ci',
-    },
-    typeRelationIds: {
-      type: Array,
-      default: null,
-    },
-    isModal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  inject: ['resource_type'],
-  data() {
-    return {
-      tableData: [],
-      grantType: '',
-      resource_id: null,
-      attrGroup: [],
-      filerPerimissions: {},
-      loading: false,
-      addedRids: [], // added rid this time
-    }
-  },
-  computed: {
-    ...mapState({
-      allEmployees: (state) => state.user.allEmployees,
-      allDepartments: (state) => state.user.allDepartments,
-    }),
-    child_resource_type() {
-      return this.resource_type()
-    },
-    windowHeight() {
-      return this.$store.state.windowHeight
-    },
-  },
-  provide() {
-    return {
-      attrGroup: () => {
-        return this.attrGroup
-      },
-      filerPerimissions: () => {
-        return this.filerPerimissions
-      },
-      loading: () => {
-        return this.loading
-      },
-      isModal: this.isModal,
-    }
-  },
-  watch: {
-    resourceTypeName: {
-      immediate: true,
-      handler() {
-        this.init()
-      },
-    },
-    CITypeId: {
-      immediate: true,
-      handler() {
-        if (this.CITypeId && this.cmdbGrantType.includes('ci')) {
-          this.getFilterPermissions()
-          this.getAttrGroup()
-        }
-      },
-    },
-  },
-  mounted() {},
-  methods: {
-    getAttrGroup() {
-      getCITypeGroupById(this.CITypeId, { need_other: true }).then((res) => {
-        this.attrGroup = res
-      })
-    },
-    getFilterPermissions() {
-      ciTypeFilterPermissions(this.CITypeId).then((res) => {
-        this.filerPerimissions = res
-      })
-    },
-    async init() {
-      const _find = this.child_resource_type.groups.find((item) => item.name === this.resourceType)
-      const resource_type_id = _find?.id ?? 0
-      const res = await searchResource({
-        app_id: this.app_id,
-        resource_type_id,
-        page_size: 9999,
-      })
-      const _tempFind = res.resources.find((item) => item.name === this.resourceTypeName)
-      console.log(this.resourceTypeName)
-      this.resource_id = _tempFind?.id || 0
-      this.getTableData()
-    },
-    async getTableData() {
-      this.loading = true
-      const _tableData = await getResourcePerms(this.resource_id, { need_users: 0 })
-      const perms = []
-      for (const key in _tableData) {
-        const obj = {}
-        obj.name = key
-        _tableData[key].perms.forEach((perm) => {
-          obj[`${perm.name}`] = true
-          obj.rid = perm?.rid ?? null
-        })
-        perms.push(obj)
-      }
-      this.tableData = perms
-      this.loading = false
-    },
-    // Grant the department in common-setting and get the roleid from it
-    grantDepart(grantType) {
-      this.$refs.grantModal.open('depart')
-      this.grantType = grantType
-    },
-    // Grant the oldest role permissions
-    grantRole(grantType) {
-      this.$refs.grantModal.open('role')
-      this.grantType = grantType
-    },
-    handleOk(params, type) {
-      const { grantType } = this
-      let rids
-      if (type === 'depart') {
-        rids = [
-          ...params.department.map((rid) => {
-            const _find = this.allDepartments.find((dep) => dep.acl_rid === rid)
-            return { rid, name: _find?.department_name ?? rid }
-          }),
-          ...params.user.map((rid) => {
-            const _find = this.allEmployees.find((dep) => dep.acl_rid === rid)
-            return { rid, name: _find?.nickname ?? rid }
-          }),
-        ]
-      }
-      if (type === 'role') {
-        rids = [
-          ...params.map((role) => {
-            return { rid: role.id, name: role.name }
-          }),
-        ]
-      }
-      if (grantType === 'ci_type') {
-        this.tableData.unshift(
-          ...rids.map(({ rid, name }) => {
-            const _find = this.tableData.find((item) => item.rid === rid)
-            return {
-              rid,
-              name,
-              conifg: false,
-              grant: false,
-              ..._find,
-            }
-          })
-        )
-      }
-      if (grantType === 'ci') {
-        this.tableData.unshift(
-          ...rids.map(({ rid, name }) => {
-            const _find = this.tableData.find((item) => item.rid === rid)
-            return {
-              rid,
-              name,
-              read_attr: false,
-              read_ci: false,
-              create: false,
-              update: false,
-              delete: false,
-              ..._find,
-            }
-          })
-        )
-      }
-      if (grantType === 'type_relation') {
-        this.tableData.unshift(
-          ...rids.map(({ rid, name }) => {
-            return {
-              rid,
-              name,
-              create: false,
-              grant: false,
-              delete: false,
-            }
-          })
-        )
-      }
-      if (grantType === 'relation_view') {
-        this.tableData.unshift(
-          ...rids.map(({ rid, name }) => {
-            return {
-              rid,
-              name,
-              read: false,
-              grant: false,
-            }
-          })
-        )
-      }
-      if (grantType === 'TopologyView') {
-        this.tableData.unshift(
-          ...rids.map(({ rid, name }) => {
-            return {
-              rid,
-              name,
-              read: false,
-              update: false,
-              delete: false,
-              grant: false,
-            }
-          })
-        )
-      }
-      this.addedRids = rids
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.$refs[`grant_${grantType}`].$refs.xTable.elemStore['main-body-wrapper'].scrollTo(0, 0)
-        }, 300)
-      })
-    },
-    openReadGrantModal(col, row) {
-      this.$refs.readGrantModal.open(col, row)
-    },
-    updateTableDataRead(row, hasRead) {
-      const _idx = this.tableData.findIndex((item) => item.rid === row.rid)
-      this.$set(this.tableData, _idx, { ...this.tableData[_idx], read: hasRead })
-      this.getFilterPermissions()
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.cmdb-grant {
-  position: relative;
-  padding: 0 20px;
-  overflow: auto;
-  .cmdb-grant-title {
-    border-left: 4px solid @primary-color;
-    padding-left: 10px;
-  }
-}
-</style>
-
-<style lang="less">
-
-.cmdb-grant {
-  .grant-button {
-    padding: 6px 8px;
-    color: @primary-color;
-    background-color: @primary-color_5;
-    border-radius: 2px;
-    cursor: pointer;
-    margin: 15px 0;
-    display: inline-block;
-    transition: all 0.3s;
-    &:hover {
-      box-shadow: 2px 3px 4px @primary-color_5;
-    }
-  }
-}
-</style>
+<template>
+  <div class="cmdb-grant" :style="{ }">
+    <template v-if="cmdbGrantType.includes('ci_type')">
+      <div class="cmdb-grant-title">{{ $t('cmdb.components.ciTypeGrant') }}</div>
+      <CiTypeGrant
+        :CITypeId="CITypeId"
+        :tableData="tableData"
+        grantType="ci_type"
+        @grantDepart="grantDepart"
+        @grantRole="grantRole"
+        @getTableData="getTableData"
+        ref="grant_ci_type"
+        :addedRids="addedRids"
+      />
+    </template>
+    <template
+      v-if="
+        cmdbGrantType.includes('ci_type,ci') || (cmdbGrantType.includes('ci') && !cmdbGrantType.includes('ci_type'))
+      "
+    >
+      <div class="cmdb-grant-title">{{ $t('cmdb.components.ciGrant') }}</div>
+      <CiTypeGrant
+        :CITypeId="CITypeId"
+        :tableData="tableData"
+        grantType="ci"
+        @grantDepart="grantDepart"
+        @grantRole="grantRole"
+        @getTableData="getTableData"
+        @openReadGrantModal="openReadGrantModal"
+        ref="grant_ci"
+        :addedRids="addedRids"
+      />
+    </template>
+    <template v-if="cmdbGrantType.includes('type_relation')">
+      <div class="cmdb-grant-title">{{ $t('cmdb.components.relationGrant') }}</div>
+      <TypeRelationGrant
+        :typeRelationIds="typeRelationIds"
+        :tableData="tableData"
+        grantType="type_relation"
+        @grantDepart="grantDepart"
+        @grantRole="grantRole"
+        @getTableData="getTableData"
+        ref="grant_type_relation"
+        :addedRids="addedRids"
+      />
+    </template>
+    <template v-if="cmdbGrantType.includes('relation_view')">
+      <div class="cmdb-grant-title">{{ resourceTypeName }}{{ $t('cmdb.components.perm') }}</div>
+      <RelationViewGrant
+        :resourceTypeName="resourceTypeName"
+        :tableData="tableData"
+        grantType="relation_view"
+        @grantDepart="grantDepart"
+        @grantRole="grantRole"
+        @getTableData="getTableData"
+        ref="grant_relation_view"
+        :addedRids="addedRids"
+      />
+    </template>
+    <template v-if="cmdbGrantType.includes('TopologyView')">
+      <div class="cmdb-grant-title">{{ resourceTypeName }}{{ $t('cmdb.components.perm') }}</div>
+      <TopologyViewGrant
+        :resourceTypeName="resourceTypeName"
+        :tableData="tableData"
+        :viewId="CITypeId"
+        grantType="TopologyView"
+        @grantDepart="grantDepart"
+        @grantRole="grantRole"
+        @getTableData="getTableData"
+        ref="grantTopologyView"
+        :addedRids="addedRids"
+      />
+    </template>
+
+    <GrantModal ref="grantModal" @handleOk="handleOk" />
+    <ReadGrantModal ref="readGrantModal" :CITypeId="CITypeId" @updateTableDataRead="updateTableDataRead" />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CiTypeGrant from './ciTypeGrant.vue'
+import TypeRelationGrant from './typeRelationGrant.vue'
+import { searchResource } from '@/modules/acl/api/resource'
+import { getResourcePerms } from '@/modules/acl/api/permission'
+import GrantModal from './grantModal.vue'
+import ReadGrantModal from './readGrantModal'
+import RelationViewGrant from './relationViewGrant.vue'
+import TopologyViewGrant from './topologyViewGrant.vue'
+import { getCITypeGroupById, ciTypeFilterPermissions } from '../../api/CIType'
+
+export default {
+  name: 'GrantComp',
+  components: { CiTypeGrant, TypeRelationGrant, RelationViewGrant, TopologyViewGrant, GrantModal, ReadGrantModal },
+  props: {
+    CITypeId: {
+      type: Number,
+      default: null,
+    },
+    resourceTypeName: {
+      type: String,
+      default: '',
+    },
+    resourceType: {
+      type: String,
+      default: 'CIType',
+    },
+    app_id: {
+      type: String,
+      default: 'cmdb',
+    },
+    cmdbGrantType: {
+      type: String,
+      default: 'ci_type,ci',
+    },
+    typeRelationIds: {
+      type: Array,
+      default: null,
+    },
+    isModal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  inject: ['resource_type'],
+  data() {
+    return {
+      tableData: [],
+      grantType: '',
+      resource_id: null,
+      attrGroup: [],
+      filerPerimissions: {},
+      loading: false,
+      addedRids: [], // added rid this time
+    }
+  },
+  computed: {
+    ...mapState({
+      allEmployees: (state) => state.user.allEmployees,
+      allDepartments: (state) => state.user.allDepartments,
+    }),
+    child_resource_type() {
+      return this.resource_type()
+    },
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  provide() {
+    return {
+      attrGroup: () => {
+        return this.attrGroup
+      },
+      filerPerimissions: () => {
+        return this.filerPerimissions
+      },
+      loading: () => {
+        return this.loading
+      },
+      isModal: this.isModal,
+    }
+  },
+  watch: {
+    resourceTypeName: {
+      immediate: true,
+      handler() {
+        this.init()
+      },
+    },
+    CITypeId: {
+      immediate: true,
+      handler() {
+        if (this.CITypeId && this.cmdbGrantType.includes('ci')) {
+          this.getFilterPermissions()
+          this.getAttrGroup()
+        }
+      },
+    },
+  },
+  mounted() {},
+  methods: {
+    getAttrGroup() {
+      getCITypeGroupById(this.CITypeId, { need_other: true }).then((res) => {
+        this.attrGroup = res
+      })
+    },
+    getFilterPermissions() {
+      ciTypeFilterPermissions(this.CITypeId).then((res) => {
+        this.filerPerimissions = res
+      })
+    },
+    async init() {
+      const _find = this.child_resource_type.groups.find((item) => item.name === this.resourceType)
+      const resource_type_id = _find?.id ?? 0
+      const res = await searchResource({
+        app_id: this.app_id,
+        resource_type_id,
+        page_size: 9999,
+      })
+      const _tempFind = res.resources.find((item) => item.name === this.resourceTypeName)
+      console.log(this.resourceTypeName)
+      this.resource_id = _tempFind?.id || 0
+      this.getTableData()
+    },
+    async getTableData() {
+      this.loading = true
+      const _tableData = await getResourcePerms(this.resource_id, { need_users: 0 })
+      const perms = []
+      for (const key in _tableData) {
+        const obj = {}
+        obj.name = key
+        _tableData[key].perms.forEach((perm) => {
+          obj[`${perm.name}`] = true
+          obj.rid = perm?.rid ?? null
+        })
+        perms.push(obj)
+      }
+      this.tableData = perms
+      this.loading = false
+    },
+    // Grant the department in common-setting and get the roleid from it
+    grantDepart(grantType) {
+      this.$refs.grantModal.open('depart')
+      this.grantType = grantType
+    },
+    // Grant the oldest role permissions
+    grantRole(grantType) {
+      this.$refs.grantModal.open('role')
+      this.grantType = grantType
+    },
+    handleOk(params, type) {
+      const { grantType } = this
+      let rids
+      if (type === 'depart') {
+        rids = [
+          ...params.department.map((rid) => {
+            const _find = this.allDepartments.find((dep) => dep.acl_rid === rid)
+            return { rid, name: _find?.department_name ?? rid }
+          }),
+          ...params.user.map((rid) => {
+            const _find = this.allEmployees.find((dep) => dep.acl_rid === rid)
+            return { rid, name: _find?.nickname ?? rid }
+          }),
+        ]
+      }
+      if (type === 'role') {
+        rids = [
+          ...params.map((role) => {
+            return { rid: role.id, name: role.name }
+          }),
+        ]
+      }
+      if (grantType === 'ci_type') {
+        this.tableData.unshift(
+          ...rids.map(({ rid, name }) => {
+            const _find = this.tableData.find((item) => item.rid === rid)
+            return {
+              rid,
+              name,
+              conifg: false,
+              grant: false,
+              ..._find,
+            }
+          })
+        )
+      }
+      if (grantType === 'ci') {
+        this.tableData.unshift(
+          ...rids.map(({ rid, name }) => {
+            const _find = this.tableData.find((item) => item.rid === rid)
+            return {
+              rid,
+              name,
+              read_attr: false,
+              read_ci: false,
+              create: false,
+              update: false,
+              delete: false,
+              ..._find,
+            }
+          })
+        )
+      }
+      if (grantType === 'type_relation') {
+        this.tableData.unshift(
+          ...rids.map(({ rid, name }) => {
+            return {
+              rid,
+              name,
+              create: false,
+              grant: false,
+              delete: false,
+            }
+          })
+        )
+      }
+      if (grantType === 'relation_view') {
+        this.tableData.unshift(
+          ...rids.map(({ rid, name }) => {
+            return {
+              rid,
+              name,
+              read: false,
+              grant: false,
+            }
+          })
+        )
+      }
+      if (grantType === 'TopologyView') {
+        this.tableData.unshift(
+          ...rids.map(({ rid, name }) => {
+            return {
+              rid,
+              name,
+              read: false,
+              update: false,
+              delete: false,
+              grant: false,
+            }
+          })
+        )
+      }
+      this.addedRids = rids
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.$refs[`grant_${grantType}`].$refs.xTable.elemStore['main-body-wrapper'].scrollTo(0, 0)
+        }, 300)
+      })
+    },
+    openReadGrantModal(col, row) {
+      this.$refs.readGrantModal.open(col, row)
+    },
+    updateTableDataRead(row, hasRead) {
+      const _idx = this.tableData.findIndex((item) => item.rid === row.rid)
+      this.$set(this.tableData, _idx, { ...this.tableData[_idx], read: hasRead })
+      this.getFilterPermissions()
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.cmdb-grant {
+  position: relative;
+  padding: 0 20px;
+  overflow: auto;
+  .cmdb-grant-title {
+    border-left: 4px solid @primary-color;
+    padding-left: 10px;
+  }
+}
+</style>
+
+<style lang="less">
+.cmdb-grant {
+  .grant-button {
+    padding: 6px 8px;
+    color: @primary-color;
+    background-color: @primary-color_5;
+    border-radius: 2px;
+    cursor: pointer;
+    margin: 15px 0;
+    display: inline-block;
+    transition: all 0.3s;
+    z-index: 1;
+
+    .btn-wave-hover(@primary-color_4, -1);
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/revokeModal.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/revokeModal.vue
index bd6eb1eb..eb7a88b1 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/revokeModal.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/revokeModal.vue
@@ -1,122 +1,118 @@
-<template>
-  <a-modal :visible="visible" @cancel="handleCancel" @ok="handleOK" :title="$t('revoke')">
-    <a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
-      <a-form-model-item :label="$t('user')">
-        <EmployeeTreeSelect
-          class="custom-treeselect custom-treeselect-bgcAndBorder"
-          :style="{
-            '--custom-height': '32px',
-            lineHeight: '32px',
-            '--custom-bg-color': '#fff',
-            '--custom-border': '1px solid #d9d9d9',
-            '--custom-multiple-lineHeight': '18px',
-          }"
-          :multiple="true"
-          v-model="form.users"
-          :placeholder="$t('cmdb.serviceTree.userPlaceholder')"
-          :idType="2"
-          departmentKey="acl_rid"
-          employeeKey="acl_rid"
-        />
-      </a-form-model-item>
-      <a-form-model-item :label="$t('role')">
-        <treeselect
-          v-model="form.roles"
-          :multiple="true"
-          :options="filterAllRoles"
-          class="custom-treeselect custom-treeselect-bgcAndBorder"
-          :style="{
-            '--custom-height': '32px',
-            lineHeight: '32px',
-            '--custom-bg-color': '#fff',
-            '--custom-border': '1px solid #d9d9d9',
-            '--custom-multiple-lineHeight': '18px',
-          }"
-          :limit="10"
-          :limitText="(count) => `+ ${count}`"
-          :normalizer="
-            (node) => {
-              return {
-                id: node.id,
-                label: node.name,
-              }
-            }
-          "
-          appendToBody
-          zIndex="1050"
-          :placeholder="$t('cmdb.serviceTree.rolePlaceholder')"
-          @search-change="searchRole"
-        />
-      </a-form-model-item>
-    </a-form-model>
-  </a-modal>
-</template>
-
-<script>
-import EmployeeTreeSelect from '@/views/setting/components/employeeTreeSelect.vue'
-import { getAllDepAndEmployee } from '@/api/company'
-import { searchRole } from '@/modules/acl/api/role'
-
-export default {
-  name: 'RevokeModal',
-  components: { EmployeeTreeSelect },
-  data() {
-    return {
-      visible: false,
-      form: {
-        users: undefined,
-        roles: undefined,
-      },
-      allTreeDepAndEmp: [],
-      allRoles: [],
-      filterAllRoles: [],
-    }
-  },
-  provide() {
-    return {
-      provide_allTreeDepAndEmp: () => {
-        return this.allTreeDepAndEmp
-      },
-    }
-  },
-  mounted() {
-    this.getAllDepAndEmployee()
-    this.loadRoles()
-  },
-  methods: {
-    async loadRoles() {
-      const res = await searchRole({ page_size: 9999, app_id: 'cmdb', is_all: true })
-      this.allRoles = res.roles
-      this.filterAllRoles = this.allRoles.slice(0, 100)
-    },
-    getAllDepAndEmployee() {
-      getAllDepAndEmployee({ block: 0 }).then((res) => {
-        this.allTreeDepAndEmp = res
-      })
-    },
-    open() {
-      this.visible = true
-      this.$nextTick(() => {
-        this.form = {
-          users: undefined,
-          roles: undefined,
-        }
-      })
-    },
-    handleCancel() {
-      this.visible = false
-    },
-    searchRole(searchQuery) {
-      this.filterAllRoles = this.allRoles
-        .filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase()))
-        .slice(0, 100)
-    },
-    handleOK() {
-      this.$emit('handleRevoke', this.form)
-      this.handleCancel()
-    },
-  },
-}
-</script>
-
-<style></style>
+<template>
+  <a-modal :visible="visible" @cancel="handleCancel" @ok="handleOK" :title="$t('revoke')">
+    <a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
+      <a-form-model-item :label="$t('user')">
+        <EmployeeTreeSelect
+          class="custom-treeselect custom-treeselect-white"
+          :style="{
+            '--custom-height': '32px',
+            lineHeight: '32px',
+            '--custom-multiple-lineHeight': '18px',
+          }"
+          :multiple="true"
+          v-model="form.users"
+          :placeholder="$t('cmdb.serviceTree.userPlaceholder')"
+          :idType="2"
+          departmentKey="acl_rid"
+          employeeKey="acl_rid"
+        />
+      </a-form-model-item>
+      <a-form-model-item :label="$t('role')">
+        <treeselect
+          v-model="form.roles"
+          :multiple="true"
+          :options="filterAllRoles"
+          class="custom-treeselect custom-treeselect-white"
+          :style="{
+            '--custom-height': '32px',
+            lineHeight: '32px',
+            '--custom-multiple-lineHeight': '18px',
+          }"
+          :limit="10"
+          :limitText="(count) => `+ ${count}`"
+          :normalizer="
+            (node) => {
+              return {
+                id: node.id,
+                label: node.name,
+              }
+            }
+          "
+          appendToBody
+          zIndex="1050"
+          :placeholder="$t('cmdb.serviceTree.rolePlaceholder')"
+          @search-change="searchRole"
+        />
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+import EmployeeTreeSelect from '@/views/setting/components/employeeTreeSelect.vue'
+import { getAllDepAndEmployee } from '@/api/company'
+import { searchRole } from '@/modules/acl/api/role'
+
+export default {
+  name: 'RevokeModal',
+  components: { EmployeeTreeSelect },
+  data() {
+    return {
+      visible: false,
+      form: {
+        users: undefined,
+        roles: undefined,
+      },
+      allTreeDepAndEmp: [],
+      allRoles: [],
+      filterAllRoles: [],
+    }
+  },
+  provide() {
+    return {
+      provide_allTreeDepAndEmp: () => {
+        return this.allTreeDepAndEmp
+      },
+    }
+  },
+  mounted() {
+    this.getAllDepAndEmployee()
+    this.loadRoles()
+  },
+  methods: {
+    async loadRoles() {
+      const res = await searchRole({ page_size: 9999, app_id: 'cmdb', is_all: true })
+      this.allRoles = res.roles
+      this.filterAllRoles = this.allRoles.slice(0, 100)
+    },
+    getAllDepAndEmployee() {
+      getAllDepAndEmployee({ block: 0 }).then((res) => {
+        this.allTreeDepAndEmp = res
+      })
+    },
+    open() {
+      this.visible = true
+      this.$nextTick(() => {
+        this.form = {
+          users: undefined,
+          roles: undefined,
+        }
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    searchRole(searchQuery) {
+      this.filterAllRoles = this.allRoles
+        .filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase()))
+        .slice(0, 100)
+    },
+    handleOK() {
+      this.$emit('handleRevoke', this.form)
+      this.handleCancel()
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue b/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue
index fc98eb93..dab4b7dc 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue
@@ -3,12 +3,10 @@
     :disabled="disabled"
     ref="cmdb_type_select"
     :disable-branch-nodes="true"
-    class="custom-treeselect custom-treeselect-bgcAndBorder"
+    class="custom-treeselect custom-treeselect-white"
     :style="{
       '--custom-height': '30px',
-      lineHeight: '30px',
-      '--custom-bg-color': '#fff',
-      '--custom-border': '1px solid #d9d9d9',
+      lineHeight: '30px'
     }"
     v-model="currenCiType"
     :multiple="multiple"
diff --git a/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue b/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
index 205fd990..e4d438f5 100644
--- a/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
+++ b/cmdb-ui/src/modules/cmdb/components/preferenceSearch/preferenceSearch.vue
@@ -35,8 +35,8 @@
         :key="`${item.id}_${index}`"
         class="preference-search-tag"
         :style="{
-          backgroundColor: item.id === currentPreferenceSearch ? '#2f54eb' : '#fafafa',
-          color: item.id === currentPreferenceSearch ? '#fff' : '#000000a6',
+          backgroundColor: item.id === currentPreferenceSearch ? '#2f54eb' : '',
+          color: item.id === currentPreferenceSearch ? '#fff' : '',
         }"
       >
         <span @click="clickPreferenceSearch(item)">{{ item.name }}</span>
@@ -189,6 +189,10 @@ export default {
   > i {
     font-size: 12px;
   }
+
+  &:hover {
+    color: @primary-color;
+  }
 }
 .preference-search-delete {
   color: #a9a9a9;
diff --git a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
index afad4bde..63249102 100644
--- a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
@@ -5,13 +5,11 @@
         <a-space>
           <treeselect
             v-if="type === 'resourceSearch'"
-            class="custom-treeselect custom-treeselect-bgcAndBorder"
+            class="custom-treeselect"
             :style="{
               width: '200px',
               marginRight: '10px',
               '--custom-height': '32px',
-              '--custom-bg-color': '#fff',
-              '--custom-border': '1px solid #d9d9d9',
               '--custom-multiple-lineHeight': '16px',
             }"
             v-model="currenCiType"
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue b/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
index 67e0ad8a..7d57cdd2 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/authorization.vue
@@ -135,9 +135,15 @@ export default {
     border: 1px solid #f3f4f6;
   }
   .authorization-input {
-    border: none;
+    border: 1px solid transparent;
+
     &:focus {
       box-shadow: none;
+      border-color: @primary-color;
+    }
+
+    &:hover {
+      border-color: @primary-color;
     }
   }
 }
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/header.vue b/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
index 486f4d74..6d85de96 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/header.vue
@@ -29,7 +29,7 @@
         <tr v-for="(item, index) in headers" :key="item.id">
           <td><a-input class="headers-input" v-model="item.key" :placeholder="$t('cmdb.components.param', { param: `${index + 1}` })" /></td>
           <td><a-input class="headers-input" v-model="item.value" :placeholder="$t('cmdb.components.value', { value: `${index + 1}` })" /></td>
-          <td>
+          <td class="headers-delete">
             <a style="color:red">
               <ops-icon type="icon-xianxing-delete" @click="deleteParam(index)" />
             </a>
@@ -92,10 +92,20 @@ export default {
     border: 1px solid #f3f4f6;
   }
   .headers-input {
-    border: none;
+    border: 1px solid transparent;
+
     &:focus {
       box-shadow: none;
+      border-color: @primary-color;
+    }
+
+    &:hover {
+      border-color: @primary-color;
     }
   }
+
+  .headers-delete {
+    text-align: center;
+  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/index.vue b/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
index 36e25281..86456de8 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/index.vue
@@ -3,12 +3,10 @@
     <a-input-group compact>
       <treeselect
         :disable-branch-nodes="true"
-        class="custom-treeselect custom-treeselect-bgcAndBorder"
+        class="custom-treeselect custom-treeselect-white"
         :style="{
           '--custom-height': '30px',
           lineHeight: '30px',
-          '--custom-bg-color': '#fff',
-          '--custom-border': '1px solid #d9d9d9',
           display: 'inline-block',
           width: '100px',
         }"
diff --git a/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue b/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue
index 033098bf..21ec7652 100644
--- a/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue
+++ b/cmdb-ui/src/modules/cmdb/components/webhook/paramaters.vue
@@ -23,7 +23,7 @@
         <tr v-for="(item, index) in parameters" :key="item.id">
           <td><a-input class="parameters-input" v-model="item.key" :placeholder="$t('cmdb.components.param', { param: `${index + 1}` })" /></td>
           <td><a-input class="parameters-input" v-model="item.value" :placeholder="$t('cmdb.components.value', { value: `${index + 1}` })" /></td>
-          <td>
+          <td class="parameters-delete">
             <a style="color:red">
               <ops-icon type="icon-xianxing-delete" @click="deleteParam(index)" />
             </a>
@@ -91,10 +91,20 @@ export default {
     border: 1px solid #f3f4f6;
   }
   .parameters-input {
-    border: none;
+    border: 1px solid transparent;
+
     &:focus {
       box-shadow: none;
+      border-color: @primary-color;
+    }
+
+    &:hover {
+      border-color: @primary-color;
     }
   }
+
+  .parameters-delete {
+    text-align: center;
+  }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
index 5abcd12d..780aeeac 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
@@ -104,6 +104,16 @@ export default {
     .cmdb-batch-upload-tips {
       color: @primary-color;
     }
+
+    &:hover {
+      background: linear-gradient(90deg, @primary-color_2 50%, transparent 0) repeat-x,
+      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 {
     vertical-align: baseline;
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue
index 58d79f08..709555e7 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue
@@ -9,22 +9,18 @@
     "
     :title="$t('cmdb.ci.attributeDesc')"
     width="72%"
-    :bodyStyle="{ height: '100vh' }"
+    :bodyStyle="{ height: '100vh', paddingTop: '16px' }"
   >
-    <vxe-toolbar>
-      <template #buttons>
-        <a-input
-          v-model="searchKey"
-          :style="{ display: 'inline-block', width: '244px' }"
-          class="ops-input ops-input-radius"
-          type="search"
-          :placeholder="$t('cmdb.ci.tips5')"
-          @keyup="searchAttributes"
-        >
-          <a-icon type="search" slot="suffix" />
-        </a-input>
-      </template>
-    </vxe-toolbar>
+    <a-input
+      v-model="searchKey"
+      :style="{ display: 'inline-block', width: '244px', marginBottom: '16px' }"
+      class="ops-input ops-input-radius"
+      type="search"
+      :placeholder="$t('cmdb.ci.tips5')"
+      @keyup="searchAttributes"
+    >
+      <a-icon type="search" slot="suffix" />
+    </a-input>
 
     <a-spin :spinning="loading">
       <vxe-table
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
index f049bc19..f35c753f 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
@@ -33,8 +33,8 @@
       </a-tab-pane>
       <a-tab-pane key="tab_3">
         <span slot="tab"><a-icon type="clock-circle" />{{ $t('cmdb.ci.history') }}</span>
-        <div :style="{ padding: '24px', height: '100%' }">
-          <a-space :style="{ 'margin-bottom': '10px', display: 'flex' }">
+        <div :style="{ padding: '16px 24px 24px', height: '100%' }">
+          <a-space :style="{ marginBottom: '16px', display: 'flex' }">
             <a-button type="primary" class="ops-button-ghost" ghost @click="handleRollbackCI()">
               <ops-icon type="shishizhuangtai" />{{ $t('cmdb.ci.rollback') }}
             </a-button>
@@ -180,7 +180,7 @@ export default {
       ci_types: [],
       hasPermission: true,
       itsmInstalled: true,
-      tableHeight: this.attributeHistoryTableHeight || (this.$store.state.windowHeight - 120),
+      tableHeight: this.attributeHistoryTableHeight || (this.$store.state.windowHeight - 130),
       initQueryLoading: true,
     }
   },
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/cloudTab/index.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/cloudTab/index.vue
index 7b2b9ce5..e31336d6 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/cloudTab/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/cloudTab/index.vue
@@ -61,16 +61,20 @@ export default {
     justify-content: center;
     font-size: 12px;
     font-weight: 400;
-    color: #4E5969;
-    background-color: #F7F8FA;
+    color: @text-color_2;
+    background-color: @primary-color_7;
     width: 105px;
     height: 32px;
     cursor: pointer;
 
     &-active {
-      border: solid 1px #B1C9FF;
-      background-color: #E1EFFF;
-      color: #2F54EB;
+      border: solid 1px @primary-color_8;
+      background-color: @primary-color_4;
+      color: @primary-color;
+    }
+
+    &:hover {
+      color: @primary-color;
     }
   }
 }
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabs.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabs.vue
index 8b000624..1d4e748a 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabs.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabs.vue
@@ -154,6 +154,17 @@ export default {
       margin-left: 6px;
     }
 
+    &:hover {
+      background-color: @primary-color_5;
+
+      .attr-ad-tab-edit {
+        display: inline-block;
+      }
+      .attr-ad-tab-delete {
+        display: inline-block;
+      }
+    }
+
     &_active {
       border: solid 1px @primary-color_8;
       background-color: @primary-color_6;
@@ -161,14 +172,9 @@ export default {
       .attr-ad-tab-name {
         color: @primary-color;
       }
-    }
 
-    &:hover {
-      .attr-ad-tab-edit {
-        display: inline-block;
-      }
-      .attr-ad-tab-delete {
-        display: inline-block;
+      &:hover {
+        background-color: @primary-color_6;
       }
     }
   }
@@ -178,6 +184,11 @@ export default {
     background-color: @primary-color_7;
     font-size: 12px;
     color: @text-color_4;
+
+    &:hover {
+      background-color: @primary-color_5;
+      color: @primary-color;
+    }
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTest.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTest.vue
index 2726513e..5218f6bd 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTest.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTest.vue
@@ -3,12 +3,14 @@
     <div class="attr-ad-header attr-ad-header-margin">{{ $t('cmdb.ciType.configCheckTitle') }}</div>
     <div class="attr-ad-content">
       <div class="ad-test-title-info">{{ $t('cmdb.ciType.checkTestTip') }}</div>
-      <div
-        class="ad-test-btn"
+      <a-button
+        type="primary"
+        class="ops-button-ghost ad-test-btn"
+        ghost
         @click="showCheckModal"
       >
         {{ $t('cmdb.ciType.checkTestBtn') }}
-      </div>
+      </a-button>
       <div class="ad-test-btn-info">{{ $t('cmdb.ciType.checkTestTip2') }}</div>
       <!-- <div
         class="ad-test-btn"
@@ -140,15 +142,6 @@ export default {
 
   .ad-test-btn {
     margin-top: 30px;
-    padding: 5px 12px;
-    background-color: #F4F9FF;
-    border: solid 1px @primary-color_8;
-    display: inline-block;
-    cursor: pointer;
-
-    color: @link-color;
-    font-size: 12px;
-    font-weight: 400;
   }
 
   .ad-test-btn-info {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
index ee5b9aa4..73265fde 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
@@ -1194,7 +1194,7 @@ export default {
     .selected {
       background-color: @primary-color_3;
       .ci-types-left-detail-title {
-        font-weight: 700;
+        color: @primary-color;
       }
     }
   }
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
index 286be29e..a6b06491 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
@@ -61,13 +61,11 @@
               :disable-branch-nodes="true"
               :class="{
                 'custom-treeselect': true,
-                'custom-treeselect-bgcAndBorder': true,
+                'custom-treeselect-white': true,
               }"
               :style="{
                 '--custom-height': '32px',
                 lineHeight: '32px',
-                '--custom-bg-color': '#fff',
-                '--custom-border': '1px solid #d9d9d9',
                 '--custom-multiple-lineHeight': '14px',
               }"
               v-model="choice_other.type_ids"
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
index fdfc22d0..29452413 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/triggerForm.vue
@@ -198,13 +198,11 @@
                 :disable-branch-nodes="true"
                 :class="{
                   'custom-treeselect': true,
-                  'custom-treeselect-bgcAndBorder': true,
+                  'custom-treeselect-white': true,
                 }"
                 :style="{
                   '--custom-height': '32px',
                   lineHeight: '32px',
-                  '--custom-bg-color': '#fff',
-                  '--custom-border': '1px solid #d9d9d9',
                   '--custom-multiple-lineHeight': '14px',
                 }"
                 v-model="selectedBot"
diff --git a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
index d35c842a..32a4040f 100644
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
@@ -195,12 +195,14 @@
             </template>
           </div>
           <a-form-model-item
-            :label="$t('cmdb.custom_dashboard.showIcon')"
             prop="showIcon"
-            :label-col="{ span: 5 }"
-            :wrapper-col="{ span: 18 }"
+            :label-col="{ span: 0 }"
+            :wrapper-col="{ span: 23 }"
           >
-            <a-switch v-model="form.showIcon"></a-switch>
+            <div class="chart-left-show-icon">
+              <span class="chart-left-show-icon-label">{{ $t('cmdb.custom_dashboard.showIcon') }}:</span>
+              <a-switch v-model="form.showIcon"></a-switch>
+            </div>
           </a-form-model-item>
         </a-form-model>
       </div>
@@ -733,6 +735,9 @@ export default {
       width: 92%;
       position: relative;
       padding: 12px;
+      margin-top: 4px;
+      display: inline-block;
+
       .chart-left-preview-operation {
         color: #86909c;
         position: absolute;
@@ -753,12 +758,26 @@ export default {
       background-position-x: center;
       background-position-y: center;
     }
+
+    &-show-icon {
+      display: flex;
+      align-items: center;
+
+      &-label {
+        flex-shrink: 0;
+        margin-right: 8px;
+      }
+    }
   }
   .chart-right {
     width: 50%;
     h4 {
       font-weight: 700;
       color: #000;
+
+      &:not(:first-child) {
+        margin-top: 14px;
+      }
     }
     .chart-right-type {
       display: flex;
@@ -797,7 +816,7 @@ export default {
 <style lang="less">
 .chart-wrapper {
   .ant-form-item {
-    margin-bottom: 0;
+    margin-bottom: 8px;
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue b/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
index d1117e2b..ba49ed24 100644
--- a/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
@@ -170,6 +170,7 @@ export default {
   position: relative;
   margin-bottom: 40px;
   margin-right: 40px;
+  cursor: pointer;
 
   &-inner {
     position: absolute;
@@ -294,6 +295,12 @@ export default {
     }
   }
 
+  &, &.discovery-card-small {
+    &:hover {
+      box-shadow: 0px 6px 20px 0px rgba(122, 140, 204, 0.30);
+    }
+  }
+
   &-http {
     width: 263px;
     height: 142px;
@@ -305,6 +312,10 @@ export default {
         max-width: 30px !important;
       }
     }
+
+    &:hover {
+      box-shadow: 0px 6px 28px 0px rgba(122, 140, 204, 0.30);
+    }
   }
 }
 .discovery-card-small {
@@ -312,7 +323,7 @@ export default {
   height: 80px;
   cursor: pointer;
 }
-.discovery-card-small:hover,
+
 .discovery-card-small-selected {
   .discovery-top {
     background-color: #f0f1f5;
diff --git a/cmdb-ui/src/modules/cmdb/views/discovery/index.vue b/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
index b4c78d80..fc932abd 100644
--- a/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
@@ -25,18 +25,24 @@
           :fileList="[]"
           :beforeUpload="beforeUpload"
         >
-          <a class="setting-discovery-header-action-btn">
+          <a-button
+            type="primary"
+            class="ops-button-ghost"
+            ghost
+          >
             <a-icon type="upload" />
             {{ $t('cmdb.ad.upload') }}
-          </a>
+          </a-button>
         </a-upload>
-        <a
+        <a-button
+          type="primary"
+          class="ops-button-ghost"
+          ghost
           @click="download"
-          class="setting-discovery-header-action-btn"
         >
           <a-icon type="download" />
           {{ $t('cmdb.ad.download') }}
-        </a>
+        </a-button>
       </div>
     </div>
     <div
diff --git a/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue b/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
index b0a39017..5d855fe5 100644
--- a/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
@@ -46,10 +46,15 @@
             <span @click="batchDelete">{{ $t('delete') }}</span>
             <span>{{ $t('cmdb.ci.selectRows', { rows: selectedCount }) }}</span>
           </span>
-          <div @click="clickLog" class="discovery-ci-log">
+          <a-button
+            type="primary"
+            ghost
+            class="ops-button-ghost discovery-ci-log"
+            @click="clickLog"
+          >
             <ops-icon type="a-cmdb-log1" />
             <span>{{ $t('cmdb.ad.log') }}</span>
-          </div>
+          </a-button>
         </div>
         <ops-table
           show-overflow
@@ -458,16 +463,7 @@ export default {
   }
 
   .discovery-ci-log {
-    cursor: pointer;
-    background-color: #F4F9FF;
-    border: solid 1px @primary-color_8;
-    color: @primary-color;
-    font-size: 12px;
-    padding: 5px 12px;
     margin-left: auto;
-    display: flex;
-    align-items: center;
-    gap: 6px;
   }
 
   .checkbox-hover-table {
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
index 618b657d..37b2fbe3 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="operation-history">
     <a-card :bordered="false">
       <a-tabs default-active-key="1">
         <a-tab-pane key="1" :tab="$t('cmdb.history.ciChange')">
@@ -40,4 +40,10 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.operation-history {
+  /deep/ .ant-tabs-tab {
+    padding-top: 0px;
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
index 49513884..3bdeee33 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <a-form :colon="false">
+    <a-form
+      :colon="false"
+      :labelCol="{ span:4 }"
+      :wrapperCol="{ span:20 }"
+      labelAlign="left"
+    >
       <a-row :gutter="24">
         <a-col
           :sm="24"
@@ -10,12 +15,7 @@
           v-for="attr in attrList.slice(0,3)"
           :key="attr.name"
         >
-          <a-form-item
-            :label="attr.alias || attr.name "
-            :labelCol="{span:4}"
-            :wrapperCol="{span:20}"
-            labelAlign="right"
-          >
+          <a-form-item :label="attr.alias || attr.name">
             <a-select
               v-model="queryParams[attr.name]"
               :placeholder="$t('cmdb.history.pleaseSelect')"
@@ -57,12 +57,7 @@
             :key="'expand_' + item.name"
             v-for="item in attrList.slice(3)"
           >
-            <a-form-item
-              :label="item.alias || item.name"
-              :label-col="{ span: 4 }"
-              :wrapper-col="{ span: 20 }"
-              labelAlign="right"
-            >
+            <a-form-item :label="item.alias || item.name">
               <a-select
                 v-model="queryParams[item.name]"
                 :placeholder="$t('cmdb.history.pleaseSelect')"
@@ -97,7 +92,7 @@
         </template>
       </a-row>
       <a-row>
-        <a-col :span="24" :style="{ textAlign: 'right' , marginBottom: '10px' }">
+        <a-col :span="24" :style="{ textAlign: 'right', marginBottom: '20px', marginTop: '-4px'}">
           <a-button type="primary" html-type="submit" @click="handleSearch">
             {{ $t('query') }}
           </a-button>
diff --git a/cmdb-ui/src/modules/cmdb/views/preference/index.vue b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
index 324e9975..4dc25f96 100644
--- a/cmdb-ui/src/modules/cmdb/views/preference/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/preference/index.vue
@@ -114,7 +114,11 @@
         :placeholder="$t('cmdb.preference.searchPlaceholder')"
       />
       <div v-for="group in filterCiTypeData" :key="group.id">
-        <p @click="changeGroupExpand(group)" :style="{ display: 'inline-block', cursor: 'pointer' }">
+        <p
+          @click="changeGroupExpand(group)"
+          :style="{ display: 'inline-block', cursor: 'pointer' }"
+          class="cmdb-preference-right-group-title"
+        >
           <a-icon :type="expandKeys.includes(group.id) ? 'caret-down' : 'caret-right'" />{{ group.name }}({{
             group.ci_types ? group.ci_types.length : 0
           }})
@@ -624,6 +628,16 @@ export default {
     flex: 1;
     height: 100%;
     padding-top: 24px;
+
+    &-group-title {
+      width: 300px;
+      margin-bottom: 20px;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
     .cmdb-preference-content {
       display: flex;
       flex-direction: row;
diff --git a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
index 8e7199b9..83388e59 100644
--- a/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
@@ -1697,6 +1697,10 @@ export default {
     background-color: #fff;
     padding: 20px;
     border-radius: @border-radius-box;
+
+    .ant-tabs-tab {
+      padding-top: 0px;
+    }
   }
 }
 </style>
diff --git a/cmdb-ui/src/modules/cmdb/views/resource_search_2/components/filterPopover.vue b/cmdb-ui/src/modules/cmdb/views/resource_search_2/components/filterPopover.vue
index 52aac388..75139ac5 100644
--- a/cmdb-ui/src/modules/cmdb/views/resource_search_2/components/filterPopover.vue
+++ b/cmdb-ui/src/modules/cmdb/views/resource_search_2/components/filterPopover.vue
@@ -19,13 +19,11 @@
           >
             <treeselect
               :value="selectCITypeIds"
-              class="custom-treeselect custom-treeselect-bgcAndBorder filter-content-ciTypes"
+              class="custom-treeselect custom-treeselect-white filter-content-ciTypes"
               :style="{
                 width: '400px',
                 zIndex: '1000',
                 '--custom-height': '32px',
-                '--custom-bg-color': '#FFF',
-                '--custom-border': '1px solid #d9d9d9',
                 '--custom-multiple-lineHeight': '32px',
               }"
               :multiple="true"
diff --git a/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/saveConditionModal.vue b/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/saveConditionModal.vue
index ee985208..a5c0ee89 100644
--- a/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/saveConditionModal.vue
+++ b/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/saveConditionModal.vue
@@ -78,21 +78,3 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped>
-.save-condition-modal {
-  /deep/ .ant-modal-close-x {
-    width: 48px;
-    height: 48px;
-    line-height: 48px;
-  }
-
-  /deep/ .ant-modal-body {
-    padding: 24px 18px;
-  }
-
-  /deep/ .ant-modal-footer {
-    padding: 10px 18px 18px;
-  }
-}
-</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/searchCondition.vue b/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/searchCondition.vue
index 4a8636aa..588d37b3 100644
--- a/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/searchCondition.vue
+++ b/cmdb-ui/src/modules/cmdb/views/resource_search_2/relationSearch/components/searchCondition.vue
@@ -512,15 +512,31 @@ export default {
       padding: 14px 18px;
       width: 500px;
     }
+
+    /deep/ .filter-content-ciTypes {
+      &:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) {
+        .vue-treeselect__control {
+          border: solid 1px transparent;
+
+          &:hover {
+            border-color: @primary-color;
+          }
+        }
+      }
+    }
   }
 
   &-input {
     width: 100%;
 
     /deep/ .ant-input {
-      border: none;
+      border: solid 1px transparent;
       box-shadow: none;
       cursor: pointer;
+
+      &:hover {
+        border-color: @primary-color;
+      }
     }
 
     &-suffix {
@@ -532,8 +548,12 @@ export default {
     width: 100%;
 
     /deep/ .ant-select-selection {
-      border: none;
+      border: solid 1px transparent;
       box-shadow: none;
+
+      &:hover {
+        border-color: @primary-color;
+      }
     }
   }
 
diff --git a/cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/searchInput.vue b/cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/searchInput.vue
index b6cba1e5..6a2bf135 100644
--- a/cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/searchInput.vue
+++ b/cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/searchInput.vue
@@ -164,8 +164,12 @@ export default {
     /deep/ & > input {
       height: 100%;
       margin-left: 10px;
-      border: none;
+      border: solid 1px transparent;
       box-shadow: none;
+
+      &:focus {
+        border-color: @primary-color;
+      }
     }
   }
 
diff --git a/cmdb-ui/src/style/global.less b/cmdb-ui/src/style/global.less
index 729bcf2e..f5b11ec3 100644
--- a/cmdb-ui/src/style/global.less
+++ b/cmdb-ui/src/style/global.less
@@ -116,6 +116,10 @@ body {
     display: inline-flex;
     align-items: center;
     margin-right: 10px;
+
+    &:hover {
+      color: @primary-color;
+    }
   }
 
   .topmenu {
@@ -560,7 +564,7 @@ body {
       top: 10px;
       border-radius: 5px;
       &:hover {
-        background: #c1bfbf;
+        color: @primary-color;
       }
       .anticon {
         margin-right: 0;
@@ -661,7 +665,7 @@ body {
         margin-right: 5px !important;
       }
       &:hover {
-        background-color: #e7e7e7;
+        background-color: @primary-color_5;
       }
     }
   }
@@ -869,6 +873,10 @@ body {
       align-items: center;
       height: 30px;
     }
+
+    &:hover {
+      border-color: #597ef7 !important;
+    }
   }
   .vue-treeselect__placeholder,
   .vue-treeselect__single-value {
@@ -885,15 +893,46 @@ body {
     border-radius: 2px !important;
     border-color: #e4e7ed;
   }
+
+  &:hover {
+    border-color: #597ef7 !important;
+  }
 }
 
-.custom-vue-treeselect__control(@bgColor:@primary-color_7,@border:none) {
-  background-color: @bgColor;
-  border: @border;
+.custom-vue-treeselect__control(
+  @bgColor: @primary-color_7,
+  @border: none,
+  @hoverBgColor: none,
+  @hoverBorderColor: none,
+) {
+  .vue-treeselect__control {
+    background-color: @bgColor;
+    border: @border;
+  }
+
+  .mixin(@borderColor) when (iscolor(@borderColor)) {
+    border-color: @borderColor !important;
+  }
+
+  &:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) {
+    .vue-treeselect__control {
+      &:hover {
+        background-color: if(iscolor(@hoverBgColor), @hoverBgColor, @bgColor);
+        .mixin(@hoverBorderColor)
+      }
+    }
+  }
 }
+
 .custom-treeselect {
+  .custom-vue-treeselect__control(
+    @primary-color_7,
+    none,
+    @primary-color_5,
+    none
+  );
+
   .vue-treeselect__control {
-    .custom-vue-treeselect__control();
     height: var(--custom-height) !important;
     border-radius: 2px !important;
   }
@@ -909,12 +948,34 @@ body {
   .vue-treeselect__limit-tip-text {
     margin: 0;
   }
+
+  &.vue-treeselect--focused {
+    .vue-treeselect__control {
+      border: 1px solid @primary-color;
+    }
+  }
 }
 
 // 自定义背景颜色和border
-.custom-treeselect-bgcAndBorder .vue-treeselect__control {
-  .custom-vue-treeselect__control(var(--custom-bg-color), var(--custom-border));
+.custom-treeselect-bgcAndBorder {
+  .custom-vue-treeselect__control(
+    var(--custom-bg-color),
+    var(--custom-border),
+    var(--custom-hover-bg-color),
+    var(--custom-hover-border-color)
+  );
 }
+
+// 白色背景
+.custom-treeselect-white {
+  .custom-vue-treeselect__control(
+    #fff,
+    1px solid #d9d9d9,
+    none,
+    @primary-color
+  );
+}
+
 // 自定义背景颜色和border
 .custom-treeselect.vue-treeselect--multi {
   .vue-treeselect__multi-value,
@@ -1025,6 +1086,20 @@ body {
     background-color: @primary-color_7;
     border: none;
   }
+
+  &,
+  .ant-input,
+  .ant-time-picker-input {
+    &:not([disabled]) {
+      &:hover {
+        background-color: @primary-color_5;
+      }
+  
+      &:focus {
+        background-color: @primary-color_7;
+      }
+    }
+  }
 }
 .ops-input.ant-input {
   background-color: @primary-color_7;
@@ -1163,13 +1238,31 @@ body {
 }
 
 // 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 {
+  position: relative;
+  overflow: hidden;
+
+  &.ant-btn-background-ghost.ant-btn-primary {
+    border-color: @primary-color_8;
+    background-color: @primary-color_5 !important;
+    box-shadow: none;
+
+    .btn-wave-hover(@primary-color_4);
+
+    &[disabled] {
+      border-color: #d9d9d9;
+      background-color: @primary-color_7!important;
+    }
+  
+    &:not([disabled]):hover {
+      color: #3F75FF;
+      border-color: transparent;
+    }
+  }
 }
-.ops-button-ghost.ant-btn-background-ghost.ant-btn-primary[disabled] {
-  border-color: #d9d9d9;
-  background-color: @primary-color_7!important;
+
+.ant-btn-primary:not(.ant-btn-background-ghost) {
+  .btn-wave-hover(#3F75FF);
 }
 
 // button
@@ -1214,15 +1307,25 @@ body {
 
 //modal
 .ant-modal-content {
+  .ant-modal-close-x {
+    width: 56px;
+    height: 56px;
+    line-height: 56px;
+  }
+
   .ant-modal-header {
     border-bottom: none;
+    padding: 22px 22px;
+
     .ant-modal-title {
       padding-left: 10px;
       border-left: 4px solid @primary-color;
     }
   }
+
   .ant-modal-footer {
     border-top: none;
+    padding: 16px 22px 22px;
   }
 }
 
diff --git a/cmdb-ui/src/style/static.less b/cmdb-ui/src/style/static.less
index 2dcadcaa..4430d4ce 100644
--- a/cmdb-ui/src/style/static.less
+++ b/cmdb-ui/src/style/static.less
@@ -70,3 +70,46 @@
   background-color: @primary-color_3;
   color: @primary-color;
 }
+
+.btn-wave-hover(
+  @hoverBgColor,
+  @bgZIndex: 0
+) {
+  position: relative;
+  overflow: hidden;
+
+  & > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:not([disabled])::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: @bgZIndex;
+    width: 100%;
+    aspect-ratio: 1/1;
+    border-radius: 50%;
+
+    background-color: @hoverBgColor;
+    -webkit-transform: scale(0) translate(-50%, -50%);
+    -ms-transform: scale(0) translate(-50%, -50%);
+    transform: scale(0) translate(-50%, -50%);
+    transform-origin: left top;
+
+    -webkit-transition: -webkit-transform 0.3s ease-out;
+    transition: -webkit-transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
+    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
+  }
+
+  &:not([disabled]):hover {
+    &::after {
+      -webkit-transform: scale(2) translate(-50%, -50%);
+      -ms-transform: scale(2) translate(-50%, -50%);
+      transform: scale(2) translate(-50%, -50%);
+    }
+  }
+}