Merge pull request #692 from veops/dev_ui_250410

dev_ ui_250410

Author: LHRUN

cmdb-ui/src/modules/cmdb/components/ciIcon/index.vue

@@ -21,7 +21,7 @@
     </template>
     <span
       class="ci-icon-letter"
-      v-else
+      v-else-if="title"
     >
       <span>
         {{ title[0].toUpperCase() }}

cmdb-ui/src/modules/cmdb/lang/en.js

@@ -721,6 +721,7 @@ if __name__ == "__main__":
         batchRollbacking: 'Deleting {total} items in total, {successNum} items successful, {errorNum} items failed',
         baselineTips: 'Changes at this point in time will also be rollbacked, Unique ID, password and dynamic attributes do not support',
         cover: 'Cover',
+        detail: 'Detail'
     },
     serviceTree: {
         remove: 'Remove',

cmdb-ui/src/modules/cmdb/lang/zh.js

@@ -720,6 +720,7 @@ if __name__ == "__main__":
         batchRollbacking: '正在回滚，共{total}个，成功{successNum}个，失败{errorNum}个',
         baselineTips: '该时间点的变更也会被回滚, 唯一标识、密码属性、动态属性不支持回滚',
         cover: '覆盖',
+        detail: '详情'
     },
     serviceTree: {
         remove: '移除',

cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailComponent/ciDetailTableTitle.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ci-detail-table-title">
+    {{ title }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CIDetailTableTitle',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ci-detail-table-title {
+  height: 42px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: @text-color_1;
+  padding: 0px 20px;
+  position: relative;
+  overflow: hidden;
+  background: #EBF0F9;
+
+  &::before {
+    content: "";
+    height: 44px;
+    width: 300px;
+    background: #F8F9FD60;
+    transform: rotate(40deg);
+
+    position: absolute;
+    top: 0px;
+    left: 25%;
+  }
+
+  &::after {
+    content: "";
+    height: 44px;
+    width: 300px;
+    background: #F8F9FD60;
+    transform: rotate(40deg);
+
+    position: absolute;
+    top: 0px;
+    left: calc(25% + 100px);
+  }
+}
+</style>

cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailComponent/ciDetailTitle.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="ci-detail-title">
+    <CIIcon :icon="icon" size="20" />
+    <span class="ci-detail-title-text">{{ title }}</span>
+  </div>
+</template>
+
+<script>
+import CIIcon from '@/modules/cmdb/components/ciIcon'
+
+export default {
+  name: 'CIDetailTitle',
+  components: {
+    CIIcon
+  },
+  props: {
+    ci: {
+      type: Object,
+      default: () => {}
+    },
+    ci_types: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    findCIType() {
+      return this.ci_types?.find?.((item) => item?.id === this.ci?._type)
+    },
+    icon() {
+      return this?.findCiType?.icon || ''
+    },
+    title() {
+      return this?.ci?.[this.findCIType?.show_name] || this?.ci?.[this.findCIType?.unique_key] || ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ci-detail-title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  column-gap: 9px;
+
+  &-text {
+    width: 100%;
+    font-size: 16px;
+    font-weight: 700;
+    color: @text-color_1;
+  }
+}
+</style>