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

feat(ui): add SplitPane calcBasedParent prop

This commit is contained in:
songlh 2024-09-09 10:44:58 +08:00
parent 478e9519e8
commit ef8ddeebe7
14 changed files with 413 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
cmdb-ui/public/iconfont/demo_index.html
View File

@ -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>

30
cmdb-ui/public/iconfont/iconfont.css
View File

@ -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";
}

2
cmdb-ui/public/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

42
cmdb-ui/public/iconfont/iconfont.json
View File

@ -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",

BIN
cmdb-ui/public/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff2
View File

Binary file not shown.

6
cmdb-ui/src/components/SplitPane/SplitPane.vue
View File

@ -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

11
cmdb-ui/src/components/TwoColumnLayout/TwoColumnLayout.vue
View File

@ -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 {

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

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

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

@ -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>

1
cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
View File

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

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

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

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

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