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;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<span class="icon iconfont">&#xe9c2;</span> <span class="icon iconfont">&#xe9c2;</span>
<div class="name">caise-websphere</div> <div class="name">caise-websphere</div>
@ -5772,9 +5808,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; 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> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -5800,6 +5836,60 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<span class="icon iconfont caise-websphere"></span> <span class="icon iconfont caise-websphere"></span>
<div class="name"> <div class="name">
@ -14377,6 +14467,54 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-websphere"></use> <use xlink:href="#caise-websphere"></use>

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

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3857903 */ 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 { .iconfont {
@ -13,6 +13,30 @@
-moz-osx-font-smoothing: grayscale; -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 { .caise-websphere:before {
content: "\e9c2"; 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": "", "css_prefix_text": "",
"description": "", "description": "",
"glyphs": [ "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", "icon_id": "41724497",
"name": "caise-websphere", "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, type: String,
default: '#f7f8fa', default: '#f7f8fa',
}, },
calcBasedParent: {
type: Boolean,
defualt: false
}
}, },
data() { data() {
return { return {
@ -95,7 +99,7 @@ export default {
}, },
paneLengthPercent() { paneLengthPercent() {
const clientRectWidth = this.parentContainer const clientRectWidth = this.parentContainer && this.calcBasedParent
? this.parentContainer.clientWidth ? this.parentContainer.clientWidth
: document.documentElement.getBoundingClientRect().width : document.documentElement.getBoundingClientRect().width
return (this.paneLengthPixel / clientRectWidth) * 100 return (this.paneLengthPixel / clientRectWidth) * 100

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

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

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

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

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

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

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

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

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

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