Skip to content

Commit

Permalink
Merge pull request #611 from veops/dev_ui_240903
Browse files Browse the repository at this point in the history 
feat: update icon select
  • Loading branch information
@LHRUN
LHRUN authored Sep 3, 2024
2 parents 251b9e7 + 9e69be8 commit 9b4dc3e
Show file tree
Hide file tree
Showing 8 changed files with 463 additions and 13 deletions.
282 changes: 279 additions & 3 deletions cmdb-ui/public/iconfont/demo_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,78 @@ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" targ
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">

<li class="dib">
<span class="icon iconfont">&#xe9c2;</span>
<div class="name">caise-websphere</div>
<div class="code-name">&amp;#xe9c2;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9c1;</span>
<div class="name">caise-vps</div>
<div class="code-name">&amp;#xe9c1;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9c0;</span>
<div class="name">caise-F5</div>
<div class="code-name">&amp;#xe9c0;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9bf;</span>
<div class="name">caise-HAProxy</div>
<div class="code-name">&amp;#xe9bf;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9be;</span>
<div class="name">caise-JBoss</div>
<div class="code-name">&amp;#xe9be;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9bd;</span>
<div class="name">caise-dongfangtong</div>
<div class="code-name">&amp;#xe9bd;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9b7;</span>
<div class="name">caise-kafka</div>
<div class="code-name">&amp;#xe9b7;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9b8;</span>
<div class="name">caise-weblogic</div>
<div class="code-name">&amp;#xe9b8;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9b9;</span>
<div class="name">caise-TDSQL</div>
<div class="code-name">&amp;#xe9b9;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9ba;</span>
<div class="name">caise-kingbase</div>
<div class="code-name">&amp;#xe9ba;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9bb;</span>
<div class="name">达梦</div>
<div class="code-name">&amp;#xe9bb;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9bc;</span>
<div class="name">caise-TIDB</div>
<div class="code-name">&amp;#xe9bc;</div>
</li>

<li class="dib">
<span class="icon iconfont">&#xe9b6;</span>
<div class="name">veops-expand</div>
Expand Down Expand Up @@ -5700,9 +5772,9 @@ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</co
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1725331691589') format('woff2'),
url('iconfont.woff?t=1725331691589') format('woff'),
url('iconfont.ttf?t=1725331691589') format('truetype');
src: url('iconfont.woff2?t=1725351982733') format('woff2'),
url('iconfont.woff?t=1725351982733') format('woff'),
url('iconfont.ttf?t=1725351982733') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
Expand All @@ -5728,6 +5800,114 @@ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面
<div class="content font-class">
<ul class="icon_lists dib-box">

<li class="dib">
<span class="icon iconfont caise-websphere"></span>
<div class="name">
caise-websphere
</div>
<div class="code-name">.caise-websphere
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-vps"></span>
<div class="name">
caise-vps
</div>
<div class="code-name">.caise-vps
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-F5"></span>
<div class="name">
caise-F5
</div>
<div class="code-name">.caise-F5
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-HAProxy"></span>
<div class="name">
caise-HAProxy
</div>
<div class="code-name">.caise-HAProxy
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-JBoss"></span>
<div class="name">
caise-JBoss
</div>
<div class="code-name">.caise-JBoss
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-dongfangtong"></span>
<div class="name">
caise-dongfangtong
</div>
<div class="code-name">.caise-dongfangtong
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-kafka"></span>
<div class="name">
caise-kafka
</div>
<div class="code-name">.caise-kafka
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-weblogic"></span>
<div class="name">
caise-weblogic
</div>
<div class="code-name">.caise-weblogic
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-TDSQL"></span>
<div class="name">
caise-TDSQL
</div>
<div class="code-name">.caise-TDSQL
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-kingbase"></span>
<div class="name">
caise-kingbase
</div>
<div class="code-name">.caise-kingbase
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-dameng"></span>
<div class="name">
达梦
</div>
<div class="code-name">.caise-dameng
</div>
</li>

<li class="dib">
<span class="icon iconfont caise-TIDB"></span>
<div class="name">
caise-TIDB
</div>
<div class="code-name">.caise-TIDB
</div>
</li>

<li class="dib">
<span class="icon iconfont veops-expand"></span>
<div class="name">
Expand Down Expand Up @@ -14197,6 +14377,102 @@ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h
<div class="content symbol">
<ul class="icon_lists dib-box">

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-websphere"></use>
</svg>
<div class="name">caise-websphere</div>
<div class="code-name">#caise-websphere</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-vps"></use>
</svg>
<div class="name">caise-vps</div>
<div class="code-name">#caise-vps</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-F5"></use>
</svg>
<div class="name">caise-F5</div>
<div class="code-name">#caise-F5</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-HAProxy"></use>
</svg>
<div class="name">caise-HAProxy</div>
<div class="code-name">#caise-HAProxy</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-JBoss"></use>
</svg>
<div class="name">caise-JBoss</div>
<div class="code-name">#caise-JBoss</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-dongfangtong"></use>
</svg>
<div class="name">caise-dongfangtong</div>
<div class="code-name">#caise-dongfangtong</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-kafka"></use>
</svg>
<div class="name">caise-kafka</div>
<div class="code-name">#caise-kafka</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-weblogic"></use>
</svg>
<div class="name">caise-weblogic</div>
<div class="code-name">#caise-weblogic</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-TDSQL"></use>
</svg>
<div class="name">caise-TDSQL</div>
<div class="code-name">#caise-TDSQL</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-kingbase"></use>
</svg>
<div class="name">caise-kingbase</div>
<div class="code-name">#caise-kingbase</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-dameng"></use>
</svg>
<div class="name">达梦</div>
<div class="code-name">#caise-dameng</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-TIDB"></use>
</svg>
<div class="name">caise-TIDB</div>
<div class="code-name">#caise-TIDB</div>
</li>

<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-expand"></use>
Expand Down
54 changes: 51 additions & 3 deletions cmdb-ui/public/iconfont/iconfont.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3857903 */
src: url('iconfont.woff2?t=1725331691589') format('woff2'),
url('iconfont.woff?t=1725331691589') format('woff'),
url('iconfont.ttf?t=1725331691589') format('truetype');
src: url('iconfont.woff2?t=1725351982733') format('woff2'),
url('iconfont.woff?t=1725351982733') format('woff'),
url('iconfont.ttf?t=1725351982733') format('truetype');
}

.iconfont {
Expand All @@ -13,6 +13,54 @@
-moz-osx-font-smoothing: grayscale;
}

.caise-websphere:before {
content: "\e9c2";
}

.caise-vps:before {
content: "\e9c1";
}

.caise-F5:before {
content: "\e9c0";
}

.caise-HAProxy:before {
content: "\e9bf";
}

.caise-JBoss:before {
content: "\e9be";
}

.caise-dongfangtong:before {
content: "\e9bd";
}

.caise-kafka:before {
content: "\e9b7";
}

.caise-weblogic:before {
content: "\e9b8";
}

.caise-TDSQL:before {
content: "\e9b9";
}

.caise-kingbase:before {
content: "\e9ba";
}

.caise-dameng:before {
content: "\e9bb";
}

.caise-TIDB:before {
content: "\e9bc";
}

.veops-expand:before {
content: "\e9b6";
}
Expand Down
2 changes: 1 addition & 1 deletion cmdb-ui/public/iconfont/iconfont.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 9b4dc3e

Please sign in to comment.