Merge pull request #613 from veops/dev_ui_240909

feat(ui): add SplitPane calcBasedParent prop

cmdb-ui/public/iconfont/demo_index.html

@@ -54,6 +54,42 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe9c6;</span>
+                <div class="name">oneterm-connect</div>
+                <div class="code-name">&amp;#xe9c6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe9c7;</span>
+                <div class="name">oneterm-session</div>
+                <div class="code-name">&amp;#xe9c7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe9c8;</span>
+                <div class="name">oneterm-assets</div>
+                <div class="code-name">&amp;#xe9c8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe9c3;</span>
+                <div class="name">oneterm-RDP</div>
+                <div class="code-name">&amp;#xe9c3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe9c4;</span>
+                <div class="name">oneterm-SSH</div>
+                <div class="code-name">&amp;#xe9c4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe9c5;</span>
+                <div class="name">oneterm-VNC</div>
+                <div class="code-name">&amp;#xe9c5;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe9c2;</span>
                 <div class="name">caise-websphere</div>
@@ -5772,9 +5808,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1725351982733') format('woff2'),
-       url('iconfont.woff?t=1725351982733') format('woff'),
-       url('iconfont.ttf?t=1725351982733') format('truetype');
+  src: url('iconfont.woff2?t=1725846934130') format('woff2'),
+       url('iconfont.woff?t=1725846934130') format('woff'),
+       url('iconfont.ttf?t=1725846934130') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -5800,6 +5836,60 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont oneterm-connect1"></span>
+            <div class="name">
+              oneterm-connect
+            </div>
+            <div class="code-name">.oneterm-connect1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont oneterm-session1"></span>
+            <div class="name">
+              oneterm-session
+            </div>
+            <div class="code-name">.oneterm-session1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont oneterm-assets"></span>
+            <div class="name">
+              oneterm-assets
+            </div>
+            <div class="code-name">.oneterm-assets
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont a-oneterm-ssh1"></span>
+            <div class="name">
+              oneterm-RDP
+            </div>
+            <div class="code-name">.a-oneterm-ssh1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont a-oneterm-ssh2"></span>
+            <div class="name">
+              oneterm-SSH
+            </div>
+            <div class="code-name">.a-oneterm-ssh2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont oneterm-rdp"></span>
+            <div class="name">
+              oneterm-VNC
+            </div>
+            <div class="code-name">.oneterm-rdp
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont caise-websphere"></span>
             <div class="name">
@@ -14377,6 +14467,54 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#oneterm-connect1"></use>
+                </svg>
+                <div class="name">oneterm-connect</div>
+                <div class="code-name">#oneterm-connect1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#oneterm-session1"></use>
+                </svg>
+                <div class="name">oneterm-session</div>
+                <div class="code-name">#oneterm-session1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#oneterm-assets"></use>
+                </svg>
+                <div class="name">oneterm-assets</div>
+                <div class="code-name">#oneterm-assets</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#a-oneterm-ssh1"></use>
+                </svg>
+                <div class="name">oneterm-RDP</div>
+                <div class="code-name">#a-oneterm-ssh1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#a-oneterm-ssh2"></use>
+                </svg>
+                <div class="name">oneterm-SSH</div>
+                <div class="code-name">#a-oneterm-ssh2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#oneterm-rdp"></use>
+                </svg>
+                <div class="name">oneterm-VNC</div>
+                <div class="code-name">#oneterm-rdp</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#caise-websphere"></use>

cmdb-ui/public/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3857903 */
-  src: url('iconfont.woff2?t=1725351982733') format('woff2'),
-       url('iconfont.woff?t=1725351982733') format('woff'),
-       url('iconfont.ttf?t=1725351982733') format('truetype');
+  src: url('iconfont.woff2?t=1725846934130') format('woff2'),
+       url('iconfont.woff?t=1725846934130') format('woff'),
+       url('iconfont.ttf?t=1725846934130') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.oneterm-connect1:before {
+  content: "\e9c6";
+}
+
+.oneterm-session1:before {
+  content: "\e9c7";
+}
+
+.oneterm-assets:before {
+  content: "\e9c8";
+}
+
+.a-oneterm-ssh1:before {
+  content: "\e9c3";
+}
+
+.a-oneterm-ssh2:before {
+  content: "\e9c4";
+}
+
+.oneterm-rdp:before {
+  content: "\e9c5";
+}
+
 .caise-websphere:before {
   content: "\e9c2";
 }

cmdb-ui/public/iconfont/iconfont.json

@@ -5,6 +5,48 @@
   "css_prefix_text": "",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "41735717",
+      "name": "oneterm-connect",
+      "font_class": "oneterm-connect1",
+      "unicode": "e9c6",
+      "unicode_decimal": 59846
+    },
+    {
+      "icon_id": "41735716",
+      "name": "oneterm-session",
+      "font_class": "oneterm-session1",
+      "unicode": "e9c7",
+      "unicode_decimal": 59847
+    },
+    {
+      "icon_id": "41735703",
+      "name": "oneterm-assets",
+      "font_class": "oneterm-assets",
+      "unicode": "e9c8",
+      "unicode_decimal": 59848
+    },
+    {
+      "icon_id": "41725683",
+      "name": "oneterm-RDP",
+      "font_class": "a-oneterm-ssh1",
+      "unicode": "e9c3",
+      "unicode_decimal": 59843
+    },
+    {
+      "icon_id": "41725684",
+      "name": "oneterm-SSH",
+      "font_class": "a-oneterm-ssh2",
+      "unicode": "e9c4",
+      "unicode_decimal": 59844
+    },
+    {
+      "icon_id": "41725685",
+      "name": "oneterm-VNC",
+      "font_class": "oneterm-rdp",
+      "unicode": "e9c5",
+      "unicode_decimal": 59845
+    },
     {
       "icon_id": "41724497",
       "name": "caise-websphere",

cmdb-ui/src/components/SplitPane/SplitPane.vue

@@ -1,183 +1,187 @@
-<template>
-  <div ref="splitPane" class="split-pane" :class="direction + ' ' + appName" :style="{ flexDirection: direction }">
-    <div class="pane pane-one" ref="one" :style="lengthType + ':' + paneLengthValue1">
-      <slot name="one"></slot>
-    </div>
-
-    <div class="spliter-wrap">
-      <a-button
-        v-show="collapsable"
-        :icon="isExpanded ? 'left' : 'right'"
-        class="collapse-btn"
-        @click="handleExpand"
-      ></a-button>
-      <div
-        class="pane-trigger"
-        @mousedown="handleMouseDown"
-        :style="{ backgroundColor: triggerColor, width: `${triggerLength}px` }"
-      ></div>
-    </div>
-
-    <div class="pane pane-two" ref="two" :style="lengthType + ':' + paneLengthValue2">
-      <slot name="two"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SplitPane',
-  props: {
-    direction: {
-      type: String,
-      default: 'row',
-    },
-
-    min: {
-      type: Number,
-      default: 10,
-    },
-
-    max: {
-      type: Number,
-      default: 90,
-    },
-
-    paneLengthPixel: {
-      type: Number,
-      default: 220,
-    },
-
-    triggerLength: {
-      type: Number,
-      default: 8,
-    },
-
-    appName: {
-      type: String,
-      default: 'viewer',
-    },
-
-    collapsable: {
-      type: Boolean,
-      default: false,
-    },
-    triggerColor: {
-      type: String,
-      default: '#f7f8fa',
-    },
-  },
-  data() {
-    return {
-      triggerLeftOffset: 0, // 鼠标距滑动器左(顶)侧偏移量
-      isExpanded: localStorage.getItem(`${this.appName}-isExpanded`)
-        ? JSON.parse(localStorage.getItem(`${this.appName}-isExpanded`))
-        : false,
-      parentContainer: null,
-    }
-  },
-  computed: {
-    lengthType() {
-      return this.direction === 'row' ? 'width' : 'height'
-    },
-
-    minLengthType() {
-      return this.direction === 'row' ? 'minWidth' : 'minHeight'
-    },
-
-    paneLengthValue1() {
-      return `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})`
-    },
-
-    paneLengthValue2() {
-      const rest = 100 - this.paneLengthPercent
-      return `calc(${rest}% - ${this.triggerLength / 2 + 'px'})`
-    },
-
-    paneLengthPercent() {
-      const clientRectWidth = this.parentContainer
-        ? this.parentContainer.clientWidth
-        : document.documentElement.getBoundingClientRect().width
-      return (this.paneLengthPixel / clientRectWidth) * 100
-    },
-  },
-
-  watch: {
-    isExpanded(newValue) {
-      if (newValue) {
-        document.querySelector(`.${this.appName} .pane-two`).style.display = 'none'
-      } else {
-        document.querySelector(`.${this.appName} .pane-two`).style.display = ''
-      }
-    },
-  },
-
-  mounted() {
-    const paneLengthPixel = localStorage.getItem(`${this.appName}-paneLengthPixel`)
-    if (paneLengthPixel) {
-      this.$emit('update:paneLengthPixel', Number(paneLengthPixel))
-    }
-    this.parentContainer = document.querySelector(`.${this.appName}`)
-    if (this.isExpanded) {
-      document.querySelector(`.${this.appName} .pane-two`).style.display = 'none'
-    } else {
-      document.querySelector(`.${this.appName} .pane-two`).style.display = ''
-    }
-  },
-
-  methods: {
-    // 按下滑动器
-    handleMouseDown(e) {
-      document.addEventListener('mousemove', this.handleMouseMove)
-      document.addEventListener('mouseup', this.handleMouseUp)
-      if (this.direction === 'row') {
-        this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left
-      } else {
-        this.triggerLeftOffset = e.pageY - e.srcElement.getBoundingClientRect().top
-      }
-    },
-
-    // 按下滑动器后移动鼠标
-    handleMouseMove(e) {
-      this.isExpanded = false
-      this.$emit('expand', this.isExpanded)
-      const clientRect = this.$refs.splitPane.getBoundingClientRect()
-      let paneLengthPixel = 0
-
-      if (this.direction === 'row') {
-        const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
-        paneLengthPixel = offset
-      } else {
-        const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
-        paneLengthPixel = offset
-      }
-
-      if (paneLengthPixel < this.min) {
-        paneLengthPixel = this.min
-      }
-      if (paneLengthPixel > this.max) {
-        paneLengthPixel = this.max
-      }
-
-      this.$emit('update:paneLengthPixel', paneLengthPixel)
-
-      localStorage.setItem(`${this.appName}-paneLengthPixel`, paneLengthPixel)
-    },
-
-    // 松开滑动器
-    handleMouseUp() {
-      document.removeEventListener('mousemove', this.handleMouseMove)
-    },
-
-    handleExpand() {
-      this.isExpanded = !this.isExpanded
-      this.$emit('expand', this.isExpanded)
-      localStorage.setItem(`${this.appName}-isExpanded`, this.isExpanded)
-    },
-  },
-}
-</script>
-
-<style scoped lang="less">
-@import './index.less';
-</style>
+<template>
+  <div ref="splitPane" class="split-pane" :class="direction + ' ' + appName" :style="{ flexDirection: direction }">
+    <div class="pane pane-one" ref="one" :style="lengthType + ':' + paneLengthValue1">
+      <slot name="one"></slot>
+    </div>
+
+    <div class="spliter-wrap">
+      <a-button
+        v-show="collapsable"
+        :icon="isExpanded ? 'left' : 'right'"
+        class="collapse-btn"
+        @click="handleExpand"
+      ></a-button>
+      <div
+        class="pane-trigger"
+        @mousedown="handleMouseDown"
+        :style="{ backgroundColor: triggerColor, width: `${triggerLength}px` }"
+      ></div>
+    </div>
+
+    <div class="pane pane-two" ref="two" :style="lengthType + ':' + paneLengthValue2">
+      <slot name="two"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SplitPane',
+  props: {
+    direction: {
+      type: String,
+      default: 'row',
+    },
+
+    min: {
+      type: Number,
+      default: 10,
+    },
+
+    max: {
+      type: Number,
+      default: 90,
+    },
+
+    paneLengthPixel: {
+      type: Number,
+      default: 220,
+    },
+
+    triggerLength: {
+      type: Number,
+      default: 8,
+    },
+
+    appName: {
+      type: String,
+      default: 'viewer',
+    },
+
+    collapsable: {
+      type: Boolean,
+      default: false,
+    },
+    triggerColor: {
+      type: String,
+      default: '#f7f8fa',
+    },
+    calcBasedParent: {
+      type: Boolean,
+      defualt: false
+    }
+  },
+  data() {
+    return {
+      triggerLeftOffset: 0, // 鼠标距滑动器左(顶)侧偏移量
+      isExpanded: localStorage.getItem(`${this.appName}-isExpanded`)
+        ? JSON.parse(localStorage.getItem(`${this.appName}-isExpanded`))
+        : false,
+      parentContainer: null,
+    }
+  },
+  computed: {
+    lengthType() {
+      return this.direction === 'row' ? 'width' : 'height'
+    },
+
+    minLengthType() {
+      return this.direction === 'row' ? 'minWidth' : 'minHeight'
+    },
+
+    paneLengthValue1() {
+      return `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})`
+    },
+
+    paneLengthValue2() {
+      const rest = 100 - this.paneLengthPercent
+      return `calc(${rest}% - ${this.triggerLength / 2 + 'px'})`
+    },
+
+    paneLengthPercent() {
+      const clientRectWidth = this.parentContainer && this.calcBasedParent
+        ? this.parentContainer.clientWidth
+        : document.documentElement.getBoundingClientRect().width
+      return (this.paneLengthPixel / clientRectWidth) * 100
+    },
+  },
+
+  watch: {
+    isExpanded(newValue) {
+      if (newValue) {
+        document.querySelector(`.${this.appName} .pane-two`).style.display = 'none'
+      } else {
+        document.querySelector(`.${this.appName} .pane-two`).style.display = ''
+      }
+    },
+  },
+
+  mounted() {
+    const paneLengthPixel = localStorage.getItem(`${this.appName}-paneLengthPixel`)
+    if (paneLengthPixel) {
+      this.$emit('update:paneLengthPixel', Number(paneLengthPixel))
+    }
+    this.parentContainer = document.querySelector(`.${this.appName}`)
+    if (this.isExpanded) {
+      document.querySelector(`.${this.appName} .pane-two`).style.display = 'none'
+    } else {
+      document.querySelector(`.${this.appName} .pane-two`).style.display = ''
+    }
+  },
+
+  methods: {
+    // 按下滑动器
+    handleMouseDown(e) {
+      document.addEventListener('mousemove', this.handleMouseMove)
+      document.addEventListener('mouseup', this.handleMouseUp)
+      if (this.direction === 'row') {
+        this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left
+      } else {
+        this.triggerLeftOffset = e.pageY - e.srcElement.getBoundingClientRect().top
+      }
+    },
+
+    // 按下滑动器后移动鼠标
+    handleMouseMove(e) {
+      this.isExpanded = false
+      this.$emit('expand', this.isExpanded)
+      const clientRect = this.$refs.splitPane.getBoundingClientRect()
+      let paneLengthPixel = 0
+
+      if (this.direction === 'row') {
+        const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
+        paneLengthPixel = offset
+      } else {
+        const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
+        paneLengthPixel = offset
+      }
+
+      if (paneLengthPixel < this.min) {
+        paneLengthPixel = this.min
+      }
+      if (paneLengthPixel > this.max) {
+        paneLengthPixel = this.max
+      }
+
+      this.$emit('update:paneLengthPixel', paneLengthPixel)
+
+      localStorage.setItem(`${this.appName}-paneLengthPixel`, paneLengthPixel)
+    },
+
+    // 松开滑动器
+    handleMouseUp() {
+      document.removeEventListener('mousemove', this.handleMouseMove)
+    },
+
+    handleExpand() {
+      this.isExpanded = !this.isExpanded
+      this.$emit('expand', this.isExpanded)
+      localStorage.setItem(`${this.appName}-isExpanded`, this.isExpanded)
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+@import './index.less';
+</style>

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

@@ -6,7 +6,8 @@
       :paneLengthPixel.sync="paneLengthPixel"
       :appName="appName"
       :triggerColor="triggerColor"
-      :triggerLength="18"
+      :triggerLength="triggerLength"
+      :calcBasedParent="calcBasedParent"
     >
       <template #one>
         <div class="two-column-layout-sidebar">
@@ -37,6 +38,14 @@ export default {
       type: String,
       default: '#f7f8fa',
     },
+    triggerLength: {
+      type: Number,
+      default: 18
+    },
+    calcBasedParent: {
+      type: Boolean,
+      defualt: false
+    }
   },
   data() {
     return {

cmdb-ui/src/modules/cmdb/views/ci_types/index.vue

@@ -13,6 +13,7 @@
       :paneLengthPixel.sync="paneLengthPixel"
       appName="cmdb-ci-types"
       :triggerLength="18"
+      calcBasedParent
     >
       <template #one>
         <div class="ci-types-left">

cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <TwoColumnLayout appName="cmdb-adc">
+  <TwoColumnLayout appName="cmdb-adc" calcBasedParent>
     <template #one>
       <div class="cmdb-adc-group" v-for="group in ci_types_list" :key="group.id">
         <p>

cmdb-ui/src/modules/cmdb/views/relation_views/index.vue

@@ -7,6 +7,7 @@
         :paneLengthPixel.sync="paneLengthPixel"
         :appName="`cmdb-relation-views-${viewId}`"
         :triggerLength="18"
+        calcBasedParent
       >
         <template #one>
           <div class="relation-views-left" :style="{ height: `${windowHeight - 64}px` }">

cmdb-ui/src/modules/cmdb/views/topology_view/index.vue

@@ -15,6 +15,7 @@
       :paneLengthPixel.sync="paneLengthPixel"
       appName="cmdb-topo-views"
       :triggerLength="18"
+      calcBasedParent
     >
       <template #one>
         <a-input

cmdb-ui/src/modules/cmdb/views/tree_views/index.vue

@@ -10,6 +10,7 @@
         :paneLengthPixel.sync="paneLengthPixel"
         appName="cmdb-tree-views"
         :triggerLength="18"
+        calcBasedParent
       >
         <template #one>
           <div class="tree-views-left" :style="{ height: `${windowHeight - 64}px` }">