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'),
+  src: url('iconfont.woff2?t=1725846934130') format('woff2'),
-       url('iconfont.woff?t=1725351982733') format('woff'),
+       url('iconfont.woff?t=1725846934130') format('woff'),
-       url('iconfont.ttf?t=1725351982733') format('truetype');
+       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'),
+  src: url('iconfont.woff2?t=1725846934130') format('woff2'),
-       url('iconfont.woff?t=1725351982733') format('woff'),
+       url('iconfont.woff?t=1725846934130') format('woff'),
-       url('iconfont.ttf?t=1725351982733') format('truetype');
+       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

@@ -66,6 +66,10 @@ export default {
       type: String,
       default: '#f7f8fa',
     },
+    calcBasedParent: {
+      type: Boolean,
+      defualt: false
+    }
   },
   data() {
     return {
@@ -95,7 +99,7 @@ export default {
     },
 
     paneLengthPercent() {
-      const clientRectWidth = this.parentContainer
+      const clientRectWidth = this.parentContainer && this.calcBasedParent
         ? this.parentContainer.clientWidth
         : document.documentElement.getBoundingClientRect().width
       return (this.paneLengthPixel / clientRectWidth) * 100

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` }">