7x31/cmdb
1
0
Fork 0
mirror of https://github.com/veops/cmdb.git synced 2025-08-07 12:40:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add relation search

Browse Source
This commit is contained in:
songlh
2024-10-17 17:55:36 +08:00
parent b967de2d10
commit 0ce42334f2
33 changed files with 5927 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,6 +54,198 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe9e8;</span>
<div class="name">oneterm-mysql</div>
<div class="code-name">&amp;#xe9e8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e7;</span>
<div class="name">oneterm-redis</div>
<div class="code-name">&amp;#xe9e7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e6;</span>
<div class="name">veops-sign_out</div>
<div class="code-name">&amp;#xe9e6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e5;</span>
<div class="name">veops-company</div>
<div class="code-name">&amp;#xe9e5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e4;</span>
<div class="name">veops-emails</div>
<div class="code-name">&amp;#xe9e4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e3;</span>
<div class="name">veops-switch</div>
<div class="code-name">&amp;#xe9e3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e2;</span>
<div class="name">veops-qiyeweixin</div>
<div class="code-name">&amp;#xe9e2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e1;</span>
<div class="name">veops-progress</div>
<div class="code-name">&amp;#xe9e1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9e0;</span>
<div class="name">veops-completed</div>
<div class="code-name">&amp;#xe9e0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9df;</span>
<div class="name">itsm-ticketTime</div>
<div class="code-name">&amp;#xe9df;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9dc;</span>
<div class="name">veops-notification</div>
<div class="code-name">&amp;#xe9dc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9dd;</span>
<div class="name">veops-account_password</div>
<div class="code-name">&amp;#xe9dd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9de;</span>
<div class="name">veops-personal</div>
<div class="code-name">&amp;#xe9de;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9da;</span>
<div class="name">itsm-evaluation2</div>
<div class="code-name">&amp;#xe9da;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9db;</span>
<div class="name">itsm-over2</div>
<div class="code-name">&amp;#xe9db;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d9;</span>
<div class="name">veops-search</div>
<div class="code-name">&amp;#xe9d9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d8;</span>
<div class="name">itsm-evaluation</div>
<div class="code-name">&amp;#xe9d8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d7;</span>
<div class="name">itsm-over</div>
<div class="code-name">&amp;#xe9d7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d6;</span>
<div class="name">itsm-requirement</div>
<div class="code-name">&amp;#xe9d6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d5;</span>
<div class="name">itsm-release</div>
<div class="code-name">&amp;#xe9d5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d4;</span>
<div class="name">veops-link</div>
<div class="code-name">&amp;#xe9d4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d3;</span>
<div class="name">oneterm-command_record</div>
<div class="code-name">&amp;#xe9d3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d2;</span>
<div class="name">ai-question</div>
<div class="code-name">&amp;#xe9d2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d1;</span>
<div class="name">ai-sending</div>
<div class="code-name">&amp;#xe9d1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9d0;</span>
<div class="name">ai-dialogue</div>
<div class="code-name">&amp;#xe9d0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9cf;</span>
<div class="name">ai-report2</div>
<div class="code-name">&amp;#xe9cf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9cd;</span>
<div class="name">ai-delete</div>
<div class="code-name">&amp;#xe9cd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9ce;</span>
<div class="name">caise-knowledge</div>
<div class="code-name">&amp;#xe9ce;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9cc;</span>
<div class="name">ai-article</div>
<div class="code-name">&amp;#xe9cc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9cb;</span>
<div class="name">ai-model_setup (1)</div>
<div class="code-name">&amp;#xe9cb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9ca;</span>
<div class="name">ai-report</div>
<div class="code-name">&amp;#xe9ca;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9c9;</span>
<div class="name">ai-customer_service</div>
<div class="code-name">&amp;#xe9c9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9c6;</span>
<div class="name">oneterm-connect</div>
@@ -5808,9 +6000,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1725846934130') format('woff2'),
url('iconfont.woff?t=1725846934130') format('woff'),
url('iconfont.ttf?t=1725846934130') format('truetype');
src: url('iconfont.woff2?t=1729157759723') format('woff2'),
url('iconfont.woff?t=1729157759723') format('woff'),
url('iconfont.ttf?t=1729157759723') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -5836,6 +6028,294 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont oneterm-mysql"></span>
<div class="name">
oneterm-mysql
</div>
<div class="code-name">.oneterm-mysql
</div>
</li>
<li class="dib">
<span class="icon iconfont oneterm-redis"></span>
<div class="name">
oneterm-redis
</div>
<div class="code-name">.oneterm-redis
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-sign_out"></span>
<div class="name">
veops-sign_out
</div>
<div class="code-name">.veops-sign_out
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-company"></span>
<div class="name">
veops-company
</div>
<div class="code-name">.veops-company
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-emails"></span>
<div class="name">
veops-emails
</div>
<div class="code-name">.veops-emails
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-switch"></span>
<div class="name">
veops-switch
</div>
<div class="code-name">.veops-switch
</div>
</li>
<li class="dib">
<span class="icon iconfont qiyeweixin"></span>
<div class="name">
veops-qiyeweixin
</div>
<div class="code-name">.qiyeweixin
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-progress"></span>
<div class="name">
veops-progress
</div>
<div class="code-name">.veops-progress
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-completed"></span>
<div class="name">
veops-completed
</div>
<div class="code-name">.veops-completed
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-ticketTime"></span>
<div class="name">
itsm-ticketTime
</div>
<div class="code-name">.itsm-ticketTime
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-notification"></span>
<div class="name">
veops-notification
</div>
<div class="code-name">.veops-notification
</div>
</li>
<li class="dib">
<span class="icon iconfont a-veops-account1"></span>
<div class="name">
veops-account_password
</div>
<div class="code-name">.a-veops-account1
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-personal"></span>
<div class="name">
veops-personal
</div>
<div class="code-name">.veops-personal
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-customer_satisfaction2"></span>
<div class="name">
itsm-evaluation2
</div>
<div class="code-name">.itsm-customer_satisfaction2
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-over2"></span>
<div class="name">
itsm-over2
</div>
<div class="code-name">.itsm-over2
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-search1"></span>
<div class="name">
veops-search
</div>
<div class="code-name">.veops-search1
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-customer_satisfaction"></span>
<div class="name">
itsm-evaluation
</div>
<div class="code-name">.itsm-customer_satisfaction
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-over"></span>
<div class="name">
itsm-over
</div>
<div class="code-name">.itsm-over
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-request"></span>
<div class="name">
itsm-requirement
</div>
<div class="code-name">.itsm-request
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-release"></span>
<div class="name">
itsm-release
</div>
<div class="code-name">.itsm-release
</div>
</li>
<li class="dib">
<span class="icon iconfont veops-link"></span>
<div class="name">
veops-link
</div>
<div class="code-name">.veops-link
</div>
</li>
<li class="dib">
<span class="icon iconfont oneterm-command_record"></span>
<div class="name">
oneterm-command_record
</div>
<div class="code-name">.oneterm-command_record
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-question"></span>
<div class="name">
ai-question
</div>
<div class="code-name">.ai-question
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-sending"></span>
<div class="name">
ai-sending
</div>
<div class="code-name">.ai-sending
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-dialogue"></span>
<div class="name">
ai-dialogue
</div>
<div class="code-name">.ai-dialogue
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-report2"></span>
<div class="name">
ai-report2
</div>
<div class="code-name">.ai-report2
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-delete"></span>
<div class="name">
ai-delete
</div>
<div class="code-name">.ai-delete
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-knowledge"></span>
<div class="name">
caise-knowledge
</div>
<div class="code-name">.caise-knowledge
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-article"></span>
<div class="name">
ai-article
</div>
<div class="code-name">.ai-article
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-model_setup1"></span>
<div class="name">
ai-model_setup (1)
</div>
<div class="code-name">.ai-model_setup1
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-report"></span>
<div class="name">
ai-report
</div>
<div class="code-name">.ai-report
</div>
</li>
<li class="dib">
<span class="icon iconfont ai-customer_service"></span>
<div class="name">
ai-customer_service
</div>
<div class="code-name">.ai-customer_service
</div>
</li>
<li class="dib">
<span class="icon iconfont oneterm-connect1"></span>
<div class="name">
@@ -14467,6 +14947,262 @@
<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-mysql"></use>
</svg>
<div class="name">oneterm-mysql</div>
<div class="code-name">#oneterm-mysql</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#oneterm-redis"></use>
</svg>
<div class="name">oneterm-redis</div>
<div class="code-name">#oneterm-redis</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-sign_out"></use>
</svg>
<div class="name">veops-sign_out</div>
<div class="code-name">#veops-sign_out</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-company"></use>
</svg>
<div class="name">veops-company</div>
<div class="code-name">#veops-company</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-emails"></use>
</svg>
<div class="name">veops-emails</div>
<div class="code-name">#veops-emails</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-switch"></use>
</svg>
<div class="name">veops-switch</div>
<div class="code-name">#veops-switch</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#qiyeweixin"></use>
</svg>
<div class="name">veops-qiyeweixin</div>
<div class="code-name">#qiyeweixin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-progress"></use>
</svg>
<div class="name">veops-progress</div>
<div class="code-name">#veops-progress</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-completed"></use>
</svg>
<div class="name">veops-completed</div>
<div class="code-name">#veops-completed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-ticketTime"></use>
</svg>
<div class="name">itsm-ticketTime</div>
<div class="code-name">#itsm-ticketTime</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-notification"></use>
</svg>
<div class="name">veops-notification</div>
<div class="code-name">#veops-notification</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-veops-account1"></use>
</svg>
<div class="name">veops-account_password</div>
<div class="code-name">#a-veops-account1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-personal"></use>
</svg>
<div class="name">veops-personal</div>
<div class="code-name">#veops-personal</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-customer_satisfaction2"></use>
</svg>
<div class="name">itsm-evaluation2</div>
<div class="code-name">#itsm-customer_satisfaction2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-over2"></use>
</svg>
<div class="name">itsm-over2</div>
<div class="code-name">#itsm-over2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-search1"></use>
</svg>
<div class="name">veops-search</div>
<div class="code-name">#veops-search1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-customer_satisfaction"></use>
</svg>
<div class="name">itsm-evaluation</div>
<div class="code-name">#itsm-customer_satisfaction</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-over"></use>
</svg>
<div class="name">itsm-over</div>
<div class="code-name">#itsm-over</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-request"></use>
</svg>
<div class="name">itsm-requirement</div>
<div class="code-name">#itsm-request</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-release"></use>
</svg>
<div class="name">itsm-release</div>
<div class="code-name">#itsm-release</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-link"></use>
</svg>
<div class="name">veops-link</div>
<div class="code-name">#veops-link</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#oneterm-command_record"></use>
</svg>
<div class="name">oneterm-command_record</div>
<div class="code-name">#oneterm-command_record</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-question"></use>
</svg>
<div class="name">ai-question</div>
<div class="code-name">#ai-question</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-sending"></use>
</svg>
<div class="name">ai-sending</div>
<div class="code-name">#ai-sending</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-dialogue"></use>
</svg>
<div class="name">ai-dialogue</div>
<div class="code-name">#ai-dialogue</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-report2"></use>
</svg>
<div class="name">ai-report2</div>
<div class="code-name">#ai-report2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-delete"></use>
</svg>
<div class="name">ai-delete</div>
<div class="code-name">#ai-delete</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-knowledge"></use>
</svg>
<div class="name">caise-knowledge</div>
<div class="code-name">#caise-knowledge</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-article"></use>
</svg>
<div class="name">ai-article</div>
<div class="code-name">#ai-article</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-model_setup1"></use>
</svg>
<div class="name">ai-model_setup (1)</div>
<div class="code-name">#ai-model_setup1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-report"></use>
</svg>
<div class="name">ai-report</div>
<div class="code-name">#ai-report</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ai-customer_service"></use>
</svg>
<div class="name">ai-customer_service</div>
<div class="code-name">#ai-customer_service</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#oneterm-connect1"></use>