mirror of https://github.com/certd/certd
perf: tab增加图标显示
xiaojunnuo
parent
0e73fa40bc
commit
a03ae5a216
|
|
@ -6,25 +6,27 @@ export class PluginGroup {
|
|||
desc?: string;
|
||||
order: number;
|
||||
plugins: PluginDefine[];
|
||||
constructor(key: string, title: string, order = 0, desc = "") {
|
||||
icon?: string;
|
||||
|
||||
constructor(key: string, title: string, order = 0, icon = "") {
|
||||
this.key = key;
|
||||
this.title = title;
|
||||
this.order = order;
|
||||
this.desc = desc;
|
||||
this.icon = icon;
|
||||
this.plugins = [];
|
||||
}
|
||||
}
|
||||
|
||||
export const pluginGroups = {
|
||||
cert: new PluginGroup("cert", "证书申请", 1),
|
||||
aliyun: new PluginGroup("aliyun", "阿里云", 2),
|
||||
huawei: new PluginGroup("huawei", "华为云", 3),
|
||||
tencent: new PluginGroup("tencent", "腾讯云", 4),
|
||||
volcengine: new PluginGroup("volcengine", "火山引擎", 4),
|
||||
qiniu: new PluginGroup("qiniu", "七牛云", 5),
|
||||
aws: new PluginGroup("aws", "亚马逊云", 6),
|
||||
host: new PluginGroup("host", "主机", 7),
|
||||
cdn: new PluginGroup("cdn", "CDN", 8),
|
||||
panel: new PluginGroup("panel", "面板", 9),
|
||||
other: new PluginGroup("other", "其他", 10),
|
||||
cert: new PluginGroup("cert", "证书申请", 1, "ph:certificate"),
|
||||
aliyun: new PluginGroup("aliyun", "阿里云", 2, "svg:icon-aliyun"),
|
||||
huawei: new PluginGroup("huawei", "华为云", 3, "svg:icon-huawei"),
|
||||
tencent: new PluginGroup("tencent", "腾讯云", 4, "svg:icon-tencentcloud"),
|
||||
volcengine: new PluginGroup("volcengine", "火山引擎", 4, "svg:icon-volcengine"),
|
||||
qiniu: new PluginGroup("qiniu", "七牛云", 5, "svg:icon-qiniuyun"),
|
||||
aws: new PluginGroup("aws", "亚马逊云", 6, "svg:icon-aws"),
|
||||
host: new PluginGroup("host", "主机", 7, "clarity:host-line"),
|
||||
cdn: new PluginGroup("cdn", "CDN", 8, "svg:icon-cdn"),
|
||||
panel: new PluginGroup("panel", "面板", 9, "fluent:panel-left-header-24-filled"),
|
||||
other: new PluginGroup("other", "其他", 10, "clarity:plugin-line"),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -54,6 +54,12 @@
|
|||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cdn</div>
|
||||
<div class="code-name">&#xe6e4;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">京东云</div>
|
||||
|
|
@ -192,7 +198,7 @@
|
|||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.svg?t=1743171100316#iconfont') format('svg');
|
||||
src: url('iconfont.svg?t=1743267254898#iconfont') format('svg');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
|
|
@ -218,6 +224,15 @@
|
|||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-cdn"></span>
|
||||
<div class="name">
|
||||
cdn
|
||||
</div>
|
||||
<div class="code-name">.icon-cdn
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jdcloud"></span>
|
||||
<div class="name">
|
||||
|
|
@ -425,6 +440,14 @@
|
|||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-cdn"></use>
|
||||
</svg>
|
||||
<div class="name">cdn</div>
|
||||
<div class="code-name">#icon-cdn</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jdcloud"></use>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4688792 */
|
||||
src: url('iconfont.svg?t=1743171100316#iconfont') format('svg');
|
||||
src: url('iconfont.svg?t=1743267254898#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -11,6 +11,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cdn:before {
|
||||
content: "\e6e4";
|
||||
}
|
||||
|
||||
.icon-jdcloud:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,13 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "13592652",
|
||||
"name": "cdn",
|
||||
"font_class": "cdn",
|
||||
"unicode": "e6e4",
|
||||
"unicode_decimal": 59108
|
||||
},
|
||||
{
|
||||
"icon_id": "30950102",
|
||||
"name": "京东云",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="cdn" unicode="" d="M811.8272 770.116267c15.837867 0 31.675733-2.184533 46.421333-7.099734 7.645867-2.184533 14.7456-5.461333 21.845334-9.284266s13.653333-7.645867 20.206933-12.561067c12.561067-9.8304 22.391467-21.2992 29.4912-33.314133 6.5536-11.4688 10.922667-24.576 12.014933-38.229334 1.092267-13.1072-1.092267-26.760533-6.007466-38.775466-5.461333-13.1072-14.199467-25.122133-25.122134-34.4064-6.007467-4.9152-12.014933-9.8304-19.114666-13.653334-6.5536-3.822933-14.199467-7.099733-21.2992-9.8304-7.645867-2.730667-15.291733-4.369067-22.9376-6.007466-12.014933-2.184533-23.483733-2.184533-35.498667-1.6384-11.4688 1.092267-22.9376 3.2768-33.860267 6.5536L675.84 483.396267c7.099733-11.4688 12.561067-22.9376 16.384-35.498667 7.645867-24.576 7.645867-50.7904 0.546133-75.3664-3.822933-13.1072-9.284267-25.122133-16.384-36.590933l109.226667-93.3888c12.561067 4.9152 26.2144 8.192 39.867733 9.284266 13.1072 1.092267 26.2144 0.546133 39.3216-1.6384 17.476267-2.730667 33.860267-8.738133 49.152-17.476266 7.645867-4.369067 15.291733-9.284267 21.845334-15.291734 13.1072-10.922667 24.576-24.576 32.221866-39.867733 7.645867-14.7456 12.014933-30.037333 13.1072-45.8752s-1.092267-31.675733-6.5536-46.421333c-6.007467-15.837867-15.291733-30.037333-27.306666-41.506134-6.5536-6.007467-13.1072-11.4688-20.753067-16.384-7.645867-4.9152-15.291733-8.738133-23.483733-11.4688-8.192-3.2768-16.930133-5.461333-25.122134-7.099733-35.498667-6.007467-72.635733 0.546133-103.765333 18.568533-8.192 4.9152-15.291733 10.376533-22.391467 16.384-10.922667 9.8304-20.206933 20.753067-27.306666 33.860267-6.5536 11.4688-11.4688 24.576-13.653334 37.6832-2.184533 12.561067-2.184533 25.668267-0.546133 38.775467 2.184533 12.561067 6.5536 25.122133 13.1072 36.590933l-104.8576 91.204267c-7.645867-4.369067-15.291733-8.192-23.483733-11.4688s-16.384-6.007467-24.576-8.192c-16.930133-4.369067-34.4064-6.5536-51.336534-6.5536-14.7456 0-28.945067 1.6384-43.690666 4.369066-14.199467 3.2768-27.8528 7.645867-40.96 13.653334l-112.503467-98.304c4.369067-10.922667 6.5536-22.391467 7.099733-33.860267 0.546133-11.4688-0.546133-23.483733-3.2768-34.952533-3.2768-12.014933-7.645867-22.9376-14.199466-33.314134-7.099733-10.922667-15.291733-21.2992-25.122134-30.037333-7.099733-6.007467-14.199467-11.4688-22.391466-16.384-31.1296-18.568533-68.266667-25.122133-103.765334-18.568533-8.738133 1.6384-16.930133 3.822933-25.122133 7.099733-8.192 3.2768-15.837867 7.099733-23.483733 11.4688-7.645867 4.9152-14.199467 10.376533-20.753067 16.384-12.014933 11.4688-21.2992 25.668267-27.306667 41.506133-5.461333 14.7456-7.645867 30.583467-6.5536 46.421334 1.092267 15.837867 5.461333 31.1296 13.1072 45.8752 8.192 15.291733 19.114667 28.945067 32.221867 39.867733 13.653333 11.4688 29.4912 20.206933 45.8752 26.2144 21.845333 7.645867 45.329067 10.376533 68.8128 7.645867 12.014933-1.6384 23.483733-4.369067 34.4064-8.738134 5.461333-2.184533 10.922667-4.369067 16.384-7.645866l103.765333 89.565866c-9.8304 12.561067-17.476267 26.760533-22.9376 42.052267-9.8304 28.945067-9.284267 60.074667 1.092267 89.019733 5.461333 14.7456 13.1072 28.398933 22.9376 40.96l-95.0272 81.92c-9.8304-4.369067-19.6608-7.645867-30.037333-9.8304-18.0224-3.822933-37.137067-4.369067-55.159467-1.092266-7.645867 1.092267-15.837867 3.2768-22.9376 6.007466-7.645867 2.730667-14.7456 6.007467-21.2992 9.8304s-13.1072 8.192-19.114667 13.653334c-10.922667 9.284267-19.6608 21.2992-25.122133 34.4064-4.9152 12.014933-7.099733 25.668267-6.007467 38.775466 1.092267 13.1072 4.9152 26.2144 12.014934 38.229334 7.645867 13.1072 17.476267 24.029867 29.4912 33.314133 6.5536 4.9152 13.1072 9.284267 20.206933 12.561067 7.099733 3.822933 14.199467 6.5536 21.845333 9.284266 14.7456 4.9152 30.583467 7.099733 46.421334 7.099734 7.645867 0 15.837867-0.546133 23.483733-1.6384 7.645867-1.092267 15.291733-3.2768 22.391467-5.461334s14.199467-5.461333 20.753066-9.284266 13.1072-7.645867 18.568534-12.561067c8.738133-7.645867 15.837867-15.837867 21.2992-25.122133 10.922667-17.476267 14.7456-38.229333 10.922666-58.436267-1.6384-10.376533-5.461333-20.206933-10.922666-29.4912l98.850133-84.104533c20.206933 9.284267 42.052267 15.837867 63.8976 18.0224 24.576 2.730667 49.698133 1.092267 74.274133-5.461334 8.192-2.184533 16.930133-4.9152 24.576-8.192 8.192-3.2768 15.837867-7.099733 23.483734-11.4688l92.842666 79.735467c-7.645867 9.284267-13.1072 20.206933-16.384 31.675733-3.2768 10.922667-4.369067 22.391467-3.2768 33.314134s4.369067 21.845333 10.376534 32.221866c6.007467 10.922667 13.653333 20.206933 22.9376 27.8528 6.007467 4.9152 12.014933 9.284267 18.568533 12.561067 6.5536 3.822933 13.653333 6.5536 20.753067 9.284267 7.099733 2.184533 14.7456 4.369067 22.391466 5.461333 8.738133 0.546133 16.384 1.092267 24.029867 1.092267z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="jdcloud" unicode="" d="M1764.515669 474.466832c17.649055-24.683993 30.854991-58.192512 29.373951-128.41847-19.870614-220.489763-207.036987-359.707481-393.40113-359.707481-201.668219 0-343.662885 145.141875-429.0695 307.315707C951.239827 331.978486 936.614562 374.743503 922.853236 411.769491c-26.967262-36.655729-83.802155-96.452701-112.744136-124.283902A715.835781 715.835781 0 0 1 878.360339 146.416573c22.770983-35.483239 80.222976-115.767924 162.358961-179.329206 74.669077-57.575412 146.314366-92.935232 227.33957-113.114395a555.01957 555.01957 0 0 1 403.521567 56.896602c146.561205 83.987284 249.863714 238.694207 268.561838 399.325289-36.100339 59.858682-114.348595 130.57832-175.626606 164.271969zM531.488535 532.906185a271.894177 271.894177 0 0 0 144.463065-41.407398c34.742719 37.025988 65.47429 75.286177 97.378351 113.854915A421.602591 421.602591 0 0 1 109.700813 259.962938a424.50296 424.50296 0 0 1 4.998509-64.857191c11.786607-14.563555 130.51661-4.689958 149.029604 11.971737a275.905326 275.905326 0 0 0-5.183638 52.885454 272.943247 272.943247 0 0 0 272.943247 272.943247zM531.488535-162.133333a421.726012 421.726012 0 0 0-365.199668 210.924715c5.677318 7.528618 138.353778 22.277303 170.010997 20.487715a272.017597 272.017597 0 0 1 195.188671-82.259406s167.851149-12.897386 324.717921 111.077967c0 0 58.994742-84.048994 104.289868-115.644505 0 0-147.918825-144.586486-429.007789-144.586486zM1623.384941 881.999548C1424.123413 965.739993 1229.736972 941.302839 1037.6338 800.110403 868.239902 675.641371 800.852603 550.246689 692.489876 442.624482c-129.59096-128.727021-226.78418-172.047427-303.859948-201.174539-79.605875-30.11447-190.683842-50.663894-273.930606-46.097355a422.589951 422.589951 0 0 1 51.589545-146.314366c212.529175 3.640889 362.361009 84.974644 458.998839 143.907677 84.480964 51.527835 211.603525 181.303924 278.312015 265.352918 107.190237 134.898019 246.839924 263.933589 374.517876 304.415338 178.341845 56.464633 351.746893-22.524143 435.795887-134.095789 7.528618-9.811887 165.135909-66.39994 214.689024-108.979827C1910.398064 596.899435 1824.49777 797.456874 1623.384941 881.999548zM1923.97426 536.670494A565.880527 565.880527 0 0 1 1602.156708 640.096421c-139.526268 0-279.237665-54.366494-377.541664-151.189454-71.521868-70.349378-106.326298-127.431111-185.623624-222.526192a648.942162 648.942162 0 0 1 105.400648-123.419961c10.243857 14.933815 67.880979 96.514411 111.077966 153.842982 55.538983 72.941198 111.941906 131.25713 197.47194 165.01249a398.276219 398.276219 0 0 0 486.398071-158.532941A552.983141 552.983141 0 0 1 1923.97426 536.670494z" horiz-adv-x="2030" />
|
||||
|
||||
<glyph glyph-name="volcengine" unicode="" d="M836.395 420.139L709.973-74.155a8.661 8.661 0 0 1 0-4.138 9.216 9.216 0 0 1 9.174-7.04H971.86a9.216 9.216 0 0 1 9.216 11.178L854.06 420.14a9.301 9.301 0 0 1-14.379 4.736 8.96 8.96 0 0 1-3.328-4.694M140.8 308.14L42.88-74.155a9.173 9.173 0 0 1 9.259-11.136h195.029a9.344 9.344 0 0 1 7.381 3.328 8.917 8.917 0 0 1 1.792 3.67 8.661 8.661 0 0 1 0.043 4.138L158.379 308.14a8.96 8.96 0 0 1-3.328 4.65 9.387 9.387 0 0 1-5.419 1.792 9.387 9.387 0 0 1-5.547-1.792 8.96 8.96 0 0 1-3.285-4.65M313.43 624.64L135.082-74.155a8.96 8.96 0 0 1 1.706-7.594 9.088 9.088 0 0 1 7.04-3.542H500.65a9.216 9.216 0 0 1 9.258 11.094L331.051 624.725a8.96 8.96 0 0 1-3.328 4.651 9.387 9.387 0 0 1-5.462 1.792 9.387 9.387 0 0 1-5.504-1.792 8.96 8.96 0 0 1-3.328-4.693M621.141 846.89a8.96 8.96 0 0 1-3.328 4.651 9.387 9.387 0 0 1-5.504 1.792 9.387 9.387 0 0 1-5.461-1.792 8.96 8.96 0 0 1-3.328-4.65L359.723-74.155a9.173 9.173 0 0 1 9.216-11.093h487.253a9.344 9.344 0 0 1 7.339 3.328 9.472 9.472 0 0 1 1.877 3.67 9.173 9.173 0 0 1 0 4.095L621.141 846.891zM442.027 523.05L287.36-74.111a8.832 8.832 0 0 1 1.835-7.85 9.216 9.216 0 0 1 7.381-3.371h308.608a9.387 9.387 0 0 1 7.424 3.413 9.301 9.301 0 0 1 1.835 7.808L459.648 523.093a8.96 8.96 0 0 1-3.328 4.608 9.387 9.387 0 0 1-5.504 1.835 9.387 9.387 0 0 1-5.461-1.835 8.96 8.96 0 0 1-3.328-4.608" horiz-adv-x="1024" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 49 KiB |
|
|
@ -3,7 +3,9 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:16px;
|
||||
|
||||
}
|
||||
.fs-icon {
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,13 @@
|
|||
</template>
|
||||
<div class="flex-col h-100 w-100 overflow-hidden">
|
||||
<a-tabs v-model:active-key="pluginGroupActive" tab-position="left" class="flex-1 overflow-hidden">
|
||||
<a-tab-pane v-for="group of computedPluginGroups" :key="group.key" :tab="group.title" class="scroll-y">
|
||||
<a-tab-pane v-for="group of computedPluginGroups" :key="group.key" class="scroll-y">
|
||||
<template #tab>
|
||||
<div class="cd-step-form-tab-label">
|
||||
<fs-icon :icon="group.icon" class="mr-2" />
|
||||
<div>{{ group.title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-row v-if="!group.plugins || group.plugins.length === 0" :gutter="10">
|
||||
<a-col class="flex-o">
|
||||
<div class="flex-o m-10">没有找到插件</div>
|
||||
|
|
@ -412,11 +418,36 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.cd-step-form-tab-label {
|
||||
// 包括dropdown
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//width: 120px;
|
||||
.fs-iconify.fs-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -5px;
|
||||
}
|
||||
.fs-icon {
|
||||
svg {
|
||||
vertical-align: middle !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-drawer {
|
||||
max-width: 100%;
|
||||
.ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.ant-tabs-nav .ant-tabs-tab {
|
||||
margin-top: 10px !important;
|
||||
.fs-icon {
|
||||
color: #00b7ff;
|
||||
}
|
||||
}
|
||||
&.fullscreen {
|
||||
.pi-step-form {
|
||||
.body {
|
||||
|
|
@ -465,7 +496,6 @@ export default {
|
|||
|
||||
.step-plugin {
|
||||
}
|
||||
|
||||
.ant-tabs-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,14 +45,15 @@ export class PluginGroups {
|
|||
key: "all",
|
||||
title: "全部",
|
||||
order: 0,
|
||||
plugins: []
|
||||
plugins: [],
|
||||
icon: "material-symbols:border-all-rounded",
|
||||
};
|
||||
for (const key in groups) {
|
||||
all.plugins.push(...groups[key].plugins);
|
||||
}
|
||||
this.groups = {
|
||||
all,
|
||||
...groups
|
||||
...groups,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -81,7 +82,7 @@ export class PluginGroups {
|
|||
currentStageIndex,
|
||||
currentTaskIndex,
|
||||
currentStepIndex,
|
||||
currentTask
|
||||
currentTask,
|
||||
});
|
||||
const options: any[] = [];
|
||||
for (const step of steps) {
|
||||
|
|
@ -90,7 +91,7 @@ export class PluginGroups {
|
|||
options.push({
|
||||
value: `step.${step.id}.${key}`,
|
||||
label: `${stepDefine.output[key].title}【from：${step.title}】`,
|
||||
type: step.type
|
||||
type: step.type,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue