mirror of https://github.com/certd/certd
perf: plugins增加图标
xiaojunnuo
parent
e5a5d0a607
commit
a8da658a97
|
|
@ -55,6 +55,9 @@ https://certd.handsfree.work/
|
||||||
-------> [点我查看详细使用步骤演示](./step.md) <--------
|
-------> [点我查看详细使用步骤演示](./step.md) <--------
|
||||||
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
||||||
|
|
||||||
|
当前支持的部署插件列表
|
||||||
|
|
||||||
|
|
||||||
## 四、私有化部署
|
## 四、私有化部署
|
||||||
|
|
||||||
由于证书、授权信息等属于高度敏感数据，请务必私有化部署，保障数据安全
|
由于证书、授权信息等属于高度敏感数据，请务必私有化部署，保障数据安全
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 327 KiB |
|
|
@ -26,6 +26,7 @@ export type TaskInputDefine = FormItemProps;
|
||||||
export type PluginDefine = Registrable & {
|
export type PluginDefine = Registrable & {
|
||||||
default?: any;
|
default?: any;
|
||||||
group?: string;
|
group?: string;
|
||||||
|
icon?: string;
|
||||||
input?: {
|
input?: {
|
||||||
[key: string]: TaskInputDefine;
|
[key: string]: TaskInputDefine;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ export * from "./cert-reader.js";
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: "CertApply",
|
name: "CertApply",
|
||||||
title: "证书申请（JS版）",
|
title: "证书申请（JS版）",
|
||||||
|
icon: "ph:certificate",
|
||||||
group: pluginGroups.cert.key,
|
group: pluginGroups.cert.key,
|
||||||
desc: "免费通配符域名证书申请，支持多个域名打到同一个证书上",
|
desc: "免费通配符域名证书申请，支持多个域名打到同一个证书上",
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ export type { CertInfo };
|
||||||
|
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: "CertApplyLego",
|
name: "CertApplyLego",
|
||||||
|
icon: "ph:certificate",
|
||||||
title: "证书申请（Lego）",
|
title: "证书申请（Lego）",
|
||||||
group: pluginGroups.cert.key,
|
group: pluginGroups.cert.key,
|
||||||
desc: "支持海量DNS解析提供商，推荐使用，一样的免费通配符域名证书申请，支持多个域名打到同一个证书上",
|
desc: "支持海量DNS解析提供商，推荐使用，一样的免费通配符域名证书申请，支持多个域名打到同一个证书上",
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<link rel="icon" href="/logo.svg"/>
|
<link rel="icon" href="/logo.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Certd-让你的证书永不过期</title>
|
<title>Certd-让你的证书永不过期</title>
|
||||||
|
<script src="/icons/iconfont.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,539 @@
|
||||||
|
/* Logo 字体 */
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
font-size: 160px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tabs */
|
||||||
|
.nav-tabs {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs .nav-more {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs li {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#tabs .active {
|
||||||
|
border-bottom-color: #f00;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-container .content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面布局 */
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo {
|
||||||
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1;
|
||||||
|
height: 110px;
|
||||||
|
margin-top: -50px;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
font-size: 160px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps pre {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
border: solid 1px #e7e1cd;
|
||||||
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists {
|
||||||
|
width: 100% !important;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li {
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon {
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 42px;
|
||||||
|
margin: 10px auto;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon:hover {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .svg-icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .name,
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* markdown 样式 */
|
||||||
|
.markdown {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: #404040;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>p,
|
||||||
|
.markdown>blockquote,
|
||||||
|
.markdown>.highlight,
|
||||||
|
.markdown>ol,
|
||||||
|
.markdown>ul {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul>li {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li,
|
||||||
|
.markdown blockquote ul>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li p,
|
||||||
|
.markdown>ol li p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol>li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ol li,
|
||||||
|
.markdown blockquote ol>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
width: 95%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th,
|
||||||
|
.markdown>table td {
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>br,
|
||||||
|
.markdown>p>br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-strong,
|
||||||
|
.hljs-emphasis,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-type {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name {
|
||||||
|
color: #63a35c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码高亮 */
|
||||||
|
/* PrismJS 1.15.0
|
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||||
|
/**
|
||||||
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
|
* Based on dabblet (http://dabblet.com)
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: black;
|
||||||
|
background: none;
|
||||||
|
text-shadow: 0 1px white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection,
|
||||||
|
pre[class*="language-"] ::-moz-selection,
|
||||||
|
code[class*="language-"]::-moz-selection,
|
||||||
|
code[class*="language-"] ::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::selection,
|
||||||
|
pre[class*="language-"] ::selection,
|
||||||
|
code[class*="language-"]::selection,
|
||||||
|
code[class*="language-"] ::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 1em;
|
||||||
|
margin: .5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre)>code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: #f5f2f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre)>code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #905;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #690;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #9a6e3a;
|
||||||
|
background: hsla(0, 0%, 100%, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword {
|
||||||
|
color: #07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #DD4A68;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,278 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>iconfont Demo</title>
|
||||||
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<link rel="stylesheet" href="iconfont.css">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
<!-- jQuery -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||||
|
<!-- 代码高亮 -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||||
|
<style>
|
||||||
|
.main .logo {
|
||||||
|
margin-top: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo .sub-title {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||||
|
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||||
|
|
||||||
|
</a></h1>
|
||||||
|
<div class="nav-tabs">
|
||||||
|
<ul id="tabs" class="dib-box">
|
||||||
|
<li class="dib active"><span>Unicode</span></li>
|
||||||
|
<li class="dib"><span>Font class</span></li>
|
||||||
|
<li class="dib"><span>Symbol</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4688792" target="_blank" class="nav-more">查看项目</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tab-container">
|
||||||
|
<div class="content unicode" style="display: block;">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">aliyun</div>
|
||||||
|
<div class="code-name">&#xe601;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">腾讯云</div>
|
||||||
|
<div class="code-name">&#xe747;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">doge</div>
|
||||||
|
<div class="code-name">&#xe605;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">bt</div>
|
||||||
|
<div class="code-name">&#xe600;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="unicode-">Unicode 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Unicode 使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>@font-face {
|
||||||
|
font-family: 'iconfont';
|
||||||
|
src: url('iconfont.svg?t=1726734453480#iconfont') format('svg');
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre>
|
||||||
|
<code class="language-html"
|
||||||
|
><span class="iconfont">&#x33;</span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content font-class">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-aliyun"></span>
|
||||||
|
<div class="name">
|
||||||
|
aliyun
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-aliyun
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-tencentcloud"></span>
|
||||||
|
<div class="name">
|
||||||
|
腾讯云
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-tencentcloud
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-dogecloud"></span>
|
||||||
|
<div class="name">
|
||||||
|
doge
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-dogecloud
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-bt"></span>
|
||||||
|
<div class="name">
|
||||||
|
bt
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-bt
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="font-class-">font-class 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"
|
||||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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-aliyun"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">aliyun</div>
|
||||||
|
<div class="code-name">#icon-aliyun</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-tencentcloud"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">腾讯云</div>
|
||||||
|
<div class="code-name">#icon-tencentcloud</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-dogecloud"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">doge</div>
|
||||||
|
<div class="code-name">#icon-dogecloud</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-bt"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">bt</div>
|
||||||
|
<div class="code-name">#icon-bt</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="symbol-">Symbol 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.tab-container .content:first').show()
|
||||||
|
|
||||||
|
$('#tabs li').click(function (e) {
|
||||||
|
var tabContent = $('.tab-container .content')
|
||||||
|
var index = $(this).index()
|
||||||
|
|
||||||
|
if ($(this).hasClass('active')) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
$('#tabs li').removeClass('active')
|
||||||
|
$(this).addClass('active')
|
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 4688792 */
|
||||||
|
src: url('iconfont.svg?t=1726734453480#iconfont') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-aliyun:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-tencentcloud:before {
|
||||||
|
content: "\e747";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dogecloud:before {
|
||||||
|
content: "\e605";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bt:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"id": "4688792",
|
||||||
|
"name": "certd",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "icon-",
|
||||||
|
"description": "",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "26492886",
|
||||||
|
"name": "aliyun",
|
||||||
|
"font_class": "aliyun",
|
||||||
|
"unicode": "e601",
|
||||||
|
"unicode_decimal": 58881
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "9126093",
|
||||||
|
"name": "腾讯云",
|
||||||
|
"font_class": "tencentcloud",
|
||||||
|
"unicode": "e747",
|
||||||
|
"unicode_decimal": 59207
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "29654736",
|
||||||
|
"name": "doge",
|
||||||
|
"font_class": "dogecloud",
|
||||||
|
"unicode": "e605",
|
||||||
|
"unicode_decimal": 58885
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "39910795",
|
||||||
|
"name": "bt",
|
||||||
|
"font_class": "bt",
|
||||||
|
"unicode": "e600",
|
||||||
|
"unicode_decimal": 58880
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -30,3 +30,36 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ant-drawer-content {
|
||||||
|
&.fullscreen {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 22px
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-drawer {
|
||||||
|
.ant-drawer-header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.ant-drawer-title {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<a-drawer v-model:open="notificationDrawerVisible" placement="right" :closable="true" width="600px" class="pi-notification-form" @after-open-change="notificationDrawerOnAfterVisibleChange">
|
<a-drawer
|
||||||
|
v-model:open="notificationDrawerVisible"
|
||||||
|
placement="right"
|
||||||
|
:closable="true"
|
||||||
|
width="600px"
|
||||||
|
class="pi-notification-form"
|
||||||
|
@after-open-change="notificationDrawerOnAfterVisibleChange"
|
||||||
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
|
<div>
|
||||||
编辑触发器
|
编辑触发器
|
||||||
<a-button v-if="mode === 'edit'" @click="notificationDelete()">
|
<a-button v-if="mode === 'edit'" @click="notificationDelete()">
|
||||||
<template #icon><DeleteOutlined /></template>
|
<template #icon><DeleteOutlined /></template>
|
||||||
</a-button>
|
</a-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="currentNotification">
|
<template v-if="currentNotification">
|
||||||
<pi-container>
|
<pi-container>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<a-drawer v-model:open="stepDrawerVisible" placement="right" :closable="true" width="700px">
|
<a-drawer v-model:open="stepDrawerVisible" placement="right" :closable="true" width="700px" class="step-form-drawer" :class="{ fullscreen }">
|
||||||
<template #title>
|
<template #title>
|
||||||
|
<div>
|
||||||
编辑步骤
|
编辑步骤
|
||||||
<a-button v-if="editMode" @click="stepDelete()">
|
<template v-if="editMode">
|
||||||
|
<a-button @click="stepDelete()">
|
||||||
<template #icon><DeleteOutlined /></template>
|
<template #icon><DeleteOutlined /></template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</template>
|
</template>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<fs-icon
|
||||||
|
class="icon-button"
|
||||||
|
:icon="fullscreen ? 'material-symbols:fullscreen-exit' : 'material-symbols:fullscreen'"
|
||||||
|
@click="fullscreen = !fullscreen"
|
||||||
|
></fs-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<template v-if="currentStep">
|
<template v-if="currentStep">
|
||||||
<pi-container v-if="currentStep._isAdd" class="pi-step-form">
|
<pi-container v-if="currentStep._isAdd" class="pi-step-form">
|
||||||
<template #header>
|
<template #header>
|
||||||
|
|
@ -24,7 +35,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row v-else :gutter="10">
|
<a-row v-else :gutter="10">
|
||||||
<a-col v-for="item of group.plugins" :key="item.key" class="step-plugin" :span="12">
|
<a-col v-for="item of group.plugins" :key="item.key" class="step-plugin">
|
||||||
<a-card
|
<a-card
|
||||||
hoverable
|
hoverable
|
||||||
:class="{ current: item.name === currentStep.type }"
|
:class="{ current: item.name === currentStep.type }"
|
||||||
|
|
@ -36,7 +47,7 @@
|
||||||
>
|
>
|
||||||
<a-card-meta>
|
<a-card-meta>
|
||||||
<template #title>
|
<template #title>
|
||||||
<a-avatar :src="item.icon || '/images/plugin.png'" />
|
<fs-icon class="plugin-icon" :icon="item.icon || 'clarity:plugin-line'"></fs-icon>
|
||||||
<span class="title">{{ item.title }}</span>
|
<span class="title">{{ item.title }}</span>
|
||||||
<vip-button v-if="item.needPlus" mode="icon" />
|
<vip-button v-if="item.needPlus" mode="icon" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -129,6 +140,7 @@ export default {
|
||||||
const currentStep: Ref = ref({ title: undefined, input: {} });
|
const currentStep: Ref = ref({ title: undefined, input: {} });
|
||||||
const stepFormRef: Ref = ref(null);
|
const stepFormRef: Ref = ref(null);
|
||||||
const stepDrawerVisible: Ref = ref(false);
|
const stepDrawerVisible: Ref = ref(false);
|
||||||
|
const fullscreen: Ref<boolean> = ref(false);
|
||||||
const rules: Ref = ref({
|
const rules: Ref = ref({
|
||||||
name: [
|
name: [
|
||||||
{
|
{
|
||||||
|
|
@ -336,7 +348,8 @@ export default {
|
||||||
stepDelete,
|
stepDelete,
|
||||||
rules,
|
rules,
|
||||||
blankFn,
|
blankFn,
|
||||||
stepCopy
|
stepCopy,
|
||||||
|
fullscreen
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -376,6 +389,24 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
.step-form-drawer {
|
||||||
|
&.fullscreen {
|
||||||
|
.pi-step-form {
|
||||||
|
.body {
|
||||||
|
.step-plugin {
|
||||||
|
width: 16.666666%;
|
||||||
|
}
|
||||||
|
.step-form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.fs-form-item {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.pi-step-form {
|
.pi-step-form {
|
||||||
.bottom-button {
|
.bottom-button {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
@ -383,9 +414,21 @@ export default {
|
||||||
margin-left: 100px;
|
margin-left: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.plugin-icon {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #00b7ff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
||||||
|
.step-plugin {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-tabs-content {
|
.ant-tabs-content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -438,4 +481,5 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,12 @@
|
||||||
@after-open-change="taskDrawerOnAfterVisibleChange"
|
@after-open-change="taskDrawerOnAfterVisibleChange"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
|
<div>
|
||||||
编辑任务
|
编辑任务
|
||||||
<a-button v-if="editMode" @click="taskDelete()">
|
<a-button v-if="editMode" @click="taskDelete()">
|
||||||
<template #icon><DeleteOutlined /></template>
|
<template #icon><DeleteOutlined /></template>
|
||||||
</a-button>
|
</a-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="currentTask">
|
<template v-if="currentTask">
|
||||||
<pi-container>
|
<pi-container>
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,12 @@
|
||||||
@after-open-change="triggerDrawerOnAfterVisibleChange"
|
@after-open-change="triggerDrawerOnAfterVisibleChange"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
|
<div>
|
||||||
编辑触发器
|
编辑触发器
|
||||||
<a-button v-if="mode === 'edit'" @click="triggerDelete()">
|
<a-button v-if="mode === 'edit'" @click="triggerDelete()">
|
||||||
<template #icon><DeleteOutlined /></template>
|
<template #icon><DeleteOutlined /></template>
|
||||||
</a-button>
|
</a-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="currentTrigger">
|
<template v-if="currentTrigger">
|
||||||
<pi-container>
|
<pi-container>
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,7 @@ export class AutoRegisterCron {
|
||||||
async init() {
|
async init() {
|
||||||
logger.info('加载定时trigger开始');
|
logger.info('加载定时trigger开始');
|
||||||
await this.pipelineService.onStartup(this.immediateTriggerOnce, this.onlyAdminUser);
|
await this.pipelineService.onStartup(this.immediateTriggerOnce, this.onlyAdminUser);
|
||||||
// logger.info(this.echoPlugin, this.echoPlugin.test);
|
logger.info('加载定时trigger完成');
|
||||||
// logger.info('加载定时trigger完成');
|
|
||||||
//
|
//
|
||||||
// const meta = getClassMetadata(CLASS_KEY, this.echoPlugin);
|
// const meta = getClassMetadata(CLASS_KEY, this.echoPlugin);
|
||||||
// console.log('meta', meta);
|
// console.log('meta', meta);
|
||||||
|
|
|
||||||
|
|
@ -180,7 +180,6 @@ export class PipelineService extends BaseService<PipelineEntity> {
|
||||||
* 应用启动后初始加载记录
|
* 应用启动后初始加载记录
|
||||||
*/
|
*/
|
||||||
async onStartup(immediateTriggerOnce: boolean, onlyAdminUser: boolean) {
|
async onStartup(immediateTriggerOnce: boolean, onlyAdminUser: boolean) {
|
||||||
logger.info('加载定时trigger开始');
|
|
||||||
await this.foreachPipeline(async entity => {
|
await this.foreachPipeline(async entity => {
|
||||||
if (onlyAdminUser && entity.userId !== 1) {
|
if (onlyAdminUser && entity.userId !== 1) {
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
|
|
@ -1,236 +0,0 @@
|
||||||
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput, utils } from '@certd/pipeline';
|
|
||||||
import { AliyunAccess, AliyunClient } from '@certd/plugin-plus';
|
|
||||||
import { appendTimeSuffix } from '../../utils/index.js';
|
|
||||||
import { CertInfo } from '@certd/plugin-cert';
|
|
||||||
|
|
||||||
@IsTaskPlugin({
|
|
||||||
name: 'DeployCertToAliyunAckIngress',
|
|
||||||
title: '部署到阿里云AckIngress',
|
|
||||||
group: pluginGroups.aliyun.key,
|
|
||||||
input: {},
|
|
||||||
output: {},
|
|
||||||
default: {
|
|
||||||
strategy: {
|
|
||||||
runStrategy: RunStrategy.SkipWhenSucceed,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export class DeployCertToAliyunAckIngressPlugin extends AbstractTaskPlugin {
|
|
||||||
@TaskInput({
|
|
||||||
title: '集群id',
|
|
||||||
component: {
|
|
||||||
placeholder: '集群id',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
clusterId!: string;
|
|
||||||
|
|
||||||
@TaskInput({
|
|
||||||
title: '保密字典Id',
|
|
||||||
component: {
|
|
||||||
placeholder: '保密字典Id',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
secretName!: string | string[];
|
|
||||||
|
|
||||||
@TaskInput({
|
|
||||||
title: '大区',
|
|
||||||
value: 'cn-shanghai',
|
|
||||||
component: {
|
|
||||||
placeholder: '集群所属大区',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
regionId!: string;
|
|
||||||
|
|
||||||
@TaskInput({
|
|
||||||
title: '命名空间',
|
|
||||||
value: 'default',
|
|
||||||
component: {
|
|
||||||
placeholder: '命名空间',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
namespace: string = 'default';
|
|
||||||
@TaskInput({
|
|
||||||
title: 'ingress名称',
|
|
||||||
value: '',
|
|
||||||
component: {
|
|
||||||
placeholder: 'ingress名称',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
helper: '可以传入一个数组',
|
|
||||||
})
|
|
||||||
ingressName!: string;
|
|
||||||
@TaskInput({
|
|
||||||
title: 'ingress类型',
|
|
||||||
value: 'nginx',
|
|
||||||
component: {
|
|
||||||
placeholder: '暂时只支持nginx类型',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
ingressClass!: string;
|
|
||||||
@TaskInput({
|
|
||||||
title: '是否私网ip',
|
|
||||||
value: false,
|
|
||||||
component: {
|
|
||||||
name: 'a-switch',
|
|
||||||
vModel: 'checked',
|
|
||||||
placeholder: '集群连接端点是否是私网ip',
|
|
||||||
},
|
|
||||||
helper: '如果您当前certd运行在同一个私网下，可以选择是。',
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
isPrivateIpAddress!: boolean;
|
|
||||||
@TaskInput({
|
|
||||||
title: '域名证书',
|
|
||||||
helper: '请选择前置任务输出的域名证书',
|
|
||||||
component: {
|
|
||||||
name: 'pi-output-selector',
|
|
||||||
from: ['CertApply', 'CertApplyLego'],
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
cert!: CertInfo;
|
|
||||||
@TaskInput({
|
|
||||||
title: 'Access授权',
|
|
||||||
helper: '阿里云授权AccessKeyId、AccessKeySecret',
|
|
||||||
component: {
|
|
||||||
name: 'pi-access-selector',
|
|
||||||
type: 'aliyun',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
accessId!: string;
|
|
||||||
K8sClient: any;
|
|
||||||
async onInstance() {
|
|
||||||
const sdk = await import('@certd/lib-k8s');
|
|
||||||
this.K8sClient = sdk.K8sClient;
|
|
||||||
}
|
|
||||||
async execute(): Promise<void> {
|
|
||||||
this.logger.info('开始部署证书到阿里云cdn');
|
|
||||||
const { regionId, ingressClass, clusterId, isPrivateIpAddress, cert } = this;
|
|
||||||
const access = (await this.accessService.getById(this.accessId)) as AliyunAccess;
|
|
||||||
const client = await this.getClient(access, regionId);
|
|
||||||
const kubeConfigStr = await this.getKubeConfig(client, clusterId, isPrivateIpAddress);
|
|
||||||
|
|
||||||
this.logger.info('kubeconfig已成功获取');
|
|
||||||
const k8sClient = new this.K8sClient({
|
|
||||||
kubeConfigStr,
|
|
||||||
logger: this.logger,
|
|
||||||
});
|
|
||||||
const ingressType = ingressClass || 'qcloud';
|
|
||||||
if (ingressType === 'qcloud') {
|
|
||||||
throw new Error('暂未实现');
|
|
||||||
// await this.patchQcloudCertSecret({ k8sClient, props, context })
|
|
||||||
} else {
|
|
||||||
await this.patchNginxCertSecret({ cert, k8sClient });
|
|
||||||
}
|
|
||||||
|
|
||||||
await utils.sleep(3000); // 停留2秒，等待secret部署完成
|
|
||||||
// await this.restartIngress({ k8sClient, props })
|
|
||||||
}
|
|
||||||
|
|
||||||
async restartIngress(options: { k8sClient: any }) {
|
|
||||||
const { k8sClient } = options;
|
|
||||||
const { namespace } = this;
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
metadata: {
|
|
||||||
labels: {
|
|
||||||
certd: appendTimeSuffix('certd'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const ingressList = await k8sClient.getIngressList({ namespace });
|
|
||||||
this.logger.info('ingressList:', ingressList);
|
|
||||||
if (!ingressList || !ingressList.items) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const ingressNames = ingressList.items
|
|
||||||
.filter((item: any) => {
|
|
||||||
if (!item.spec.tls) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
for (const tls of item.spec.tls) {
|
|
||||||
if (tls.secretName === this.secretName) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
})
|
|
||||||
.map((item: any) => {
|
|
||||||
return item.metadata.name;
|
|
||||||
});
|
|
||||||
for (const ingress of ingressNames) {
|
|
||||||
await k8sClient.patchIngress({ namespace, ingressName: ingress, body });
|
|
||||||
this.logger.info(`ingress已重启:${ingress}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async patchNginxCertSecret(options: { cert: CertInfo; k8sClient: any }) {
|
|
||||||
const { cert, k8sClient } = options;
|
|
||||||
const crt = cert.crt;
|
|
||||||
const key = cert.key;
|
|
||||||
const crtBase64 = Buffer.from(crt).toString('base64');
|
|
||||||
const keyBase64 = Buffer.from(key).toString('base64');
|
|
||||||
|
|
||||||
const { namespace, secretName } = this;
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
data: {
|
|
||||||
'tls.crt': crtBase64,
|
|
||||||
'tls.key': keyBase64,
|
|
||||||
},
|
|
||||||
metadata: {
|
|
||||||
labels: {
|
|
||||||
certd: appendTimeSuffix('certd'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
let secretNames: any = secretName;
|
|
||||||
if (typeof secretName === 'string') {
|
|
||||||
secretNames = [secretName];
|
|
||||||
}
|
|
||||||
for (const secret of secretNames) {
|
|
||||||
await k8sClient.patchSecret({ namespace, secretName: secret, body });
|
|
||||||
this.logger.info(`CertSecret已更新:${secret}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async getClient(aliyunProvider: any, regionId: string) {
|
|
||||||
|
|
||||||
const client = new AliyunClient({logger:this.logger})
|
|
||||||
await client.init({
|
|
||||||
accessKeyId: aliyunProvider.accessKeyId,
|
|
||||||
accessKeySecret: aliyunProvider.accessKeySecret,
|
|
||||||
endpoint: `https://cs.${regionId}.aliyuncs.com`,
|
|
||||||
apiVersion: '2015-12-15',
|
|
||||||
})
|
|
||||||
return client
|
|
||||||
}
|
|
||||||
|
|
||||||
async getKubeConfig(client: any, clusterId: string, isPrivateIpAddress = false) {
|
|
||||||
const httpMethod = 'GET';
|
|
||||||
const uriPath = `/k8s/${clusterId}/user_config`;
|
|
||||||
const queries = {
|
|
||||||
PrivateIpAddress: isPrivateIpAddress,
|
|
||||||
};
|
|
||||||
const body = '{}';
|
|
||||||
const headers = {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
};
|
|
||||||
const requestOption = {};
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await client.request(httpMethod, uriPath, queries, body, headers, requestOption);
|
|
||||||
return res.config;
|
|
||||||
} catch (e) {
|
|
||||||
console.error('请求出错：', e);
|
|
||||||
throw e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
new DeployCertToAliyunAckIngressPlugin();
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { AliyunAccess, AliyunClient } from "@certd/plugin-plus";
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'DeployCertToAliyunCDN',
|
name: 'DeployCertToAliyunCDN',
|
||||||
title: '部署证书至阿里云CDN',
|
title: '部署证书至阿里云CDN',
|
||||||
|
icon: 'ant-design:aliyun-outlined',
|
||||||
group: pluginGroups.aliyun.key,
|
group: pluginGroups.aliyun.key,
|
||||||
desc: '自动部署域名证书至阿里云CDN',
|
desc: '自动部署域名证书至阿里云CDN',
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
|
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { AliyunAccess, AliyunClient } from "@certd/plugin-plus";
|
import { AliyunAccess, AliyunClient } from '@certd/plugin-plus';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'DeployCertToAliyunDCDN',
|
name: 'DeployCertToAliyunDCDN',
|
||||||
title: '部署证书至阿里云DCDN',
|
title: '部署证书至阿里云DCDN',
|
||||||
|
icon: 'ant-design:aliyun-outlined',
|
||||||
group: pluginGroups.aliyun.key,
|
group: pluginGroups.aliyun.key,
|
||||||
desc: '依赖证书申请前置任务，自动部署域名证书至阿里云DCDN',
|
desc: '依赖证书申请前置任务，自动部署域名证书至阿里云DCDN',
|
||||||
default: {
|
default: {
|
||||||
|
|
@ -59,14 +60,14 @@ export class DeployCertToAliyunDCDN extends AbstractTaskPlugin {
|
||||||
}
|
}
|
||||||
|
|
||||||
async getClient(access: AliyunAccess) {
|
async getClient(access: AliyunAccess) {
|
||||||
const client = new AliyunClient({logger:this.logger})
|
const client = new AliyunClient({ logger: this.logger });
|
||||||
await client.init({
|
await client.init({
|
||||||
accessKeyId: access.accessKeyId,
|
accessKeyId: access.accessKeyId,
|
||||||
accessKeySecret: access.accessKeySecret,
|
accessKeySecret: access.accessKeySecret,
|
||||||
endpoint: 'https://dcdn.aliyuncs.com',
|
endpoint: 'https://dcdn.aliyuncs.com',
|
||||||
apiVersion: '2018-01-15',
|
apiVersion: '2018-01-15',
|
||||||
})
|
});
|
||||||
return client
|
return client;
|
||||||
}
|
}
|
||||||
|
|
||||||
async buildParams() {
|
async buildParams() {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
export * from './deploy-to-cdn/index.js';
|
export * from './deploy-to-cdn/index.js';
|
||||||
export * from './deploy-to-dcdn/index.js';
|
export * from './deploy-to-dcdn/index.js';
|
||||||
export * from './deploy-to-ack-ingress/index.js';
|
|
||||||
export * from './upload-to-aliyun/index.js';
|
export * from './upload-to-aliyun/index.js';
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { AliyunAccess, AliyunClient } from '@certd/plugin-plus';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'uploadCertToAliyun',
|
name: 'uploadCertToAliyun',
|
||||||
title: '上传证书到阿里云',
|
title: '上传证书到阿里云',
|
||||||
|
icon: 'ant-design:aliyun-outlined',
|
||||||
group: pluginGroups.aliyun.key,
|
group: pluginGroups.aliyun.key,
|
||||||
desc: '',
|
desc: '',
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { CertInfo, CertReader } from '@certd/plugin-cert';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'CloudflareDeployToCDN',
|
name: 'CloudflareDeployToCDN',
|
||||||
title: '部署证书到CF CDN',
|
title: '部署证书到CF CDN',
|
||||||
|
icon: 'simple-icons:cloudflare',
|
||||||
group: pluginGroups.other.key,
|
group: pluginGroups.other.key,
|
||||||
desc: '暂未实现，不可用',
|
desc: '暂未实现，不可用',
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { CertInfo, CertReader } from '@certd/plugin-cert';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'demoTest',
|
name: 'demoTest',
|
||||||
title: 'Demo测试插件',
|
title: 'Demo测试插件',
|
||||||
|
icon: 'clarity:plugin-line',
|
||||||
group: pluginGroups.other.key,
|
group: pluginGroups.other.key,
|
||||||
default: {
|
default: {
|
||||||
strategy: {
|
strategy: {
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import dayjs from 'dayjs';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'DogeCloudDeployToCDN',
|
name: 'DogeCloudDeployToCDN',
|
||||||
title: '部署证书到多吉云CDN',
|
title: '部署证书到多吉云CDN',
|
||||||
|
icon: 'svg:icon-dogecloud',
|
||||||
group: pluginGroups.cdn.key,
|
group: pluginGroups.cdn.key,
|
||||||
default: {
|
default: {
|
||||||
strategy: {
|
strategy: {
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import path from 'path';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'CopyToLocal',
|
name: 'CopyToLocal',
|
||||||
title: '复制到本机',
|
title: '复制到本机',
|
||||||
|
icon: 'solar:copy-bold-duotone',
|
||||||
group: pluginGroups.host.key,
|
group: pluginGroups.host.key,
|
||||||
default: {
|
default: {
|
||||||
strategy: {
|
strategy: {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { SshClient } from '../../lib/ssh.js';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'hostShellExecute',
|
name: 'hostShellExecute',
|
||||||
title: '执行远程主机脚本命令',
|
title: '执行远程主机脚本命令',
|
||||||
|
icon:"tabler:brand-powershell",
|
||||||
group: pluginGroups.host.key,
|
group: pluginGroups.host.key,
|
||||||
input: {},
|
input: {},
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import { SshAccess } from '../../access/index.js';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'uploadCertToHost',
|
name: 'uploadCertToHost',
|
||||||
title: '上传证书到主机',
|
title: '上传证书到主机',
|
||||||
|
icon:"line-md:uploading-loop",
|
||||||
group: pluginGroups.host.key,
|
group: pluginGroups.host.key,
|
||||||
desc: '也支持复制证书到本机',
|
desc: '也支持复制证书到本机',
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'RestartCertd',
|
name: 'RestartCertd',
|
||||||
title: '重启Certd',
|
title: '重启Certd',
|
||||||
|
icon: 'mdi:restart',
|
||||||
desc: '延迟一定时间后自动杀死自己，然后通过Docker来自动重启',
|
desc: '延迟一定时间后自动杀死自己，然后通过Docker来自动重启',
|
||||||
group: pluginGroups.other.key,
|
group: pluginGroups.other.key,
|
||||||
default: {
|
default: {
|
||||||
|
|
@ -24,6 +25,7 @@ export class RestartCertdPlugin extends AbstractTaskPlugin {
|
||||||
delay = 30;
|
delay = 30;
|
||||||
async onInstance() {}
|
async onInstance() {}
|
||||||
async execute(): Promise<void> {
|
async execute(): Promise<void> {
|
||||||
|
this.logger.info(`Certd 将在 ${this.delay} 秒后关闭`);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}, this.delay * 1000);
|
}, this.delay * 1000);
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ export type CustomScriptContext = {
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'CustomScript',
|
name: 'CustomScript',
|
||||||
title: '自定义js脚本',
|
title: '自定义js脚本',
|
||||||
|
icon:"ri:javascript-line",
|
||||||
desc: '测试',
|
desc: '测试',
|
||||||
group: pluginGroups.other.key,
|
group: pluginGroups.other.key,
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1 @@
|
||||||
export * from './dnspod-access.js';
|
export * from './dnspod-access.js';
|
||||||
export * from './tencent-access.js';
|
|
||||||
|
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
import { IsAccess, AccessInput } from '@certd/pipeline';
|
|
||||||
|
|
||||||
@IsAccess({
|
|
||||||
name: 'tencent',
|
|
||||||
title: '腾讯云',
|
|
||||||
})
|
|
||||||
export class TencentAccess {
|
|
||||||
@AccessInput({
|
|
||||||
title: 'secretId',
|
|
||||||
helper: '使用对应的插件需要有对应的权限，比如上传证书，需要证书管理权限;部署到clb需要clb相关权限',
|
|
||||||
component: {
|
|
||||||
placeholder: 'secretId',
|
|
||||||
},
|
|
||||||
rules: [{ required: true, message: '该项必填' }],
|
|
||||||
})
|
|
||||||
secretId = '';
|
|
||||||
@AccessInput({
|
|
||||||
title: 'secretKey',
|
|
||||||
component: {
|
|
||||||
placeholder: 'secretKey',
|
|
||||||
},
|
|
||||||
encrypt: true,
|
|
||||||
rules: [{ required: true, message: '该项必填' }],
|
|
||||||
})
|
|
||||||
secretKey = '';
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { Autowire, HttpClient, ILogger } from '@certd/pipeline';
|
import { Autowire, HttpClient, ILogger } from '@certd/pipeline';
|
||||||
import { AbstractDnsProvider, CreateRecordOptions, IsDnsProvider, RemoveRecordOptions } from '@certd/plugin-cert';
|
import { AbstractDnsProvider, CreateRecordOptions, IsDnsProvider, RemoveRecordOptions } from '@certd/plugin-cert';
|
||||||
import { TencentAccess } from '../access/index.js';
|
import { TencentAccess } from '@certd/plugin-plus';
|
||||||
|
|
||||||
@IsDnsProvider({
|
@IsDnsProvider({
|
||||||
name: 'tencent',
|
name: 'tencent',
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
|
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
|
||||||
import { TencentAccess } from '../../access/index.js';
|
import { TencentAccess } from '@certd/plugin-plus';
|
||||||
import { CertInfo } from '@certd/plugin-cert';
|
import { CertInfo } from '@certd/plugin-cert';
|
||||||
|
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'DeployCertToTencentCDN',
|
name: 'DeployCertToTencentCDN',
|
||||||
title: '部署到腾讯云CDN',
|
title: '部署到腾讯云CDN',
|
||||||
|
icon: 'svg:icon-tencentcloud',
|
||||||
group: pluginGroups.tencent.key,
|
group: pluginGroups.tencent.key,
|
||||||
default: {
|
default: {
|
||||||
strategy: {
|
strategy: {
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput, utils } from '@certd/pipeline';
|
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput, utils } from '@certd/pipeline';
|
||||||
import { TencentAccess } from '../../access/index.js';
|
import { TencentAccess } from '@certd/plugin-plus';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'DeployCertToTencentCLB',
|
name: 'DeployCertToTencentCLB',
|
||||||
title: '部署到腾讯云CLB',
|
title: '部署到腾讯云CLB',
|
||||||
|
icon: 'svg:icon-tencentcloud',
|
||||||
group: pluginGroups.tencent.key,
|
group: pluginGroups.tencent.key,
|
||||||
desc: '暂时只支持单向认证证书，暂时只支持通用负载均衡，必须开启sni',
|
desc: '暂时只支持单向认证证书，暂时只支持通用负载均衡，必须开启sni',
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
|
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
|
||||||
import { TencentAccess } from '../../access/index.js';
|
import { TencentAccess } from '@certd/plugin-plus';
|
||||||
|
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'DeployCertToTencentEO',
|
name: 'DeployCertToTencentEO',
|
||||||
title: '部署到腾讯云EO',
|
title: '部署到腾讯云EO',
|
||||||
|
icon: 'svg:icon-tencentcloud',
|
||||||
desc: '腾讯云边缘安全加速平台EO，必须配置上传证书到腾讯云任务',
|
desc: '腾讯云边缘安全加速平台EO，必须配置上传证书到腾讯云任务',
|
||||||
group: pluginGroups.tencent.key,
|
group: pluginGroups.tencent.key,
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
|
|
@ -1,253 +0,0 @@
|
||||||
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput, utils } from '@certd/pipeline';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
|
|
||||||
@IsTaskPlugin({
|
|
||||||
name: 'DeployCertToTencentTKEIngress',
|
|
||||||
title: '部署到腾讯云TKE-ingress',
|
|
||||||
group: pluginGroups.tencent.key,
|
|
||||||
desc: '需要【上传到腾讯云】作为前置任务',
|
|
||||||
default: {
|
|
||||||
strategy: {
|
|
||||||
runStrategy: RunStrategy.SkipWhenSucceed,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export class DeployCertToTencentTKEIngressPlugin extends AbstractTaskPlugin {
|
|
||||||
@TaskInput({ title: '大区', value: 'ap-guangzhou', required: true })
|
|
||||||
region!: string;
|
|
||||||
|
|
||||||
@TaskInput({
|
|
||||||
title: '集群ID',
|
|
||||||
required: true,
|
|
||||||
desc: '例如：cls-6lbj1vee',
|
|
||||||
request: true,
|
|
||||||
})
|
|
||||||
clusterId!: string;
|
|
||||||
|
|
||||||
@TaskInput({ title: '集群namespace', value: 'default', required: true })
|
|
||||||
namespace!: string;
|
|
||||||
|
|
||||||
@TaskInput({ title: '证书的secret名称', required: true })
|
|
||||||
secretName!: string | string[];
|
|
||||||
|
|
||||||
@TaskInput({ title: 'ingress名称', required: true })
|
|
||||||
ingressName!: string | string[];
|
|
||||||
|
|
||||||
@TaskInput({
|
|
||||||
title: 'ingress类型',
|
|
||||||
value: 'qcloud',
|
|
||||||
component: {
|
|
||||||
name: 'a-auto-complete',
|
|
||||||
vModel: 'value',
|
|
||||||
options: [{ value: 'qcloud' }, { value: 'nginx' }],
|
|
||||||
},
|
|
||||||
helper: '可选 qcloud / nginx',
|
|
||||||
})
|
|
||||||
ingressClass!: string;
|
|
||||||
|
|
||||||
@TaskInput({ title: '集群内网ip', helper: '如果开启了外网的话，无需设置' })
|
|
||||||
clusterIp!: string;
|
|
||||||
|
|
||||||
@TaskInput({
|
|
||||||
title: '集群域名',
|
|
||||||
helper: '可不填，默认为:[clusterId].ccs.tencent-cloud.com',
|
|
||||||
})
|
|
||||||
clusterDomain!: string;
|
|
||||||
@TaskInput({
|
|
||||||
title: '腾讯云证书id',
|
|
||||||
helper: '请选择“上传证书到腾讯云”前置任务的输出',
|
|
||||||
component: {
|
|
||||||
name: 'pi-output-selector',
|
|
||||||
from: 'UploadCertToTencent',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
tencentCertId!: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* AccessProvider的key,或者一个包含access的具体的对象
|
|
||||||
*/
|
|
||||||
@TaskInput({
|
|
||||||
title: 'Access授权',
|
|
||||||
helper: 'access授权',
|
|
||||||
component: {
|
|
||||||
name: 'pi-access-selector',
|
|
||||||
type: 'tencent',
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
accessId!: string;
|
|
||||||
|
|
||||||
@TaskInput({
|
|
||||||
title: '域名证书',
|
|
||||||
helper: '请选择前置任务输出的域名证书',
|
|
||||||
component: {
|
|
||||||
name: 'pi-output-selector',
|
|
||||||
from: ['CertApply', 'CertApplyLego'],
|
|
||||||
},
|
|
||||||
required: true,
|
|
||||||
})
|
|
||||||
cert!: any;
|
|
||||||
|
|
||||||
K8sClient: any;
|
|
||||||
|
|
||||||
async onInstance() {
|
|
||||||
// const TkeClient = this.tencentcloud.tke.v20180525.Client;
|
|
||||||
const k8sSdk = await import('@certd/lib-k8s');
|
|
||||||
this.K8sClient = k8sSdk.K8sClient;
|
|
||||||
}
|
|
||||||
async execute(): Promise<void> {
|
|
||||||
const accessProvider = await this.accessService.getById(this.accessId);
|
|
||||||
const tkeClient = await this.getTkeClient(accessProvider, this.region);
|
|
||||||
const kubeConfigStr = await this.getTkeKubeConfig(tkeClient, this.clusterId);
|
|
||||||
|
|
||||||
this.logger.info('kubeconfig已成功获取');
|
|
||||||
const k8sClient = new this.K8sClient({
|
|
||||||
kubeConfigStr,
|
|
||||||
logger: this.logger,
|
|
||||||
});
|
|
||||||
if (this.clusterIp != null) {
|
|
||||||
if (!this.clusterDomain) {
|
|
||||||
this.clusterDomain = `${this.clusterId}.ccs.tencent-cloud.com`;
|
|
||||||
}
|
|
||||||
// 修改内网解析ip地址
|
|
||||||
k8sClient.setLookup({ [this.clusterDomain]: { ip: this.clusterIp } });
|
|
||||||
}
|
|
||||||
const ingressType = this.ingressClass || 'qcloud';
|
|
||||||
if (ingressType === 'qcloud') {
|
|
||||||
await this.patchQcloudCertSecret({ k8sClient });
|
|
||||||
} else {
|
|
||||||
await this.patchNginxCertSecret({ k8sClient });
|
|
||||||
}
|
|
||||||
|
|
||||||
await utils.sleep(2000); // 停留2秒，等待secret部署完成
|
|
||||||
await this.restartIngress({ k8sClient });
|
|
||||||
}
|
|
||||||
|
|
||||||
async getTkeClient(accessProvider: any, region = 'ap-guangzhou') {
|
|
||||||
const sdk = await import('tencentcloud-sdk-nodejs/tencentcloud/services/tke/v20180525/index.js');
|
|
||||||
const TkeClient = sdk.v20180525.Client;
|
|
||||||
const clientConfig = {
|
|
||||||
credential: {
|
|
||||||
secretId: accessProvider.secretId,
|
|
||||||
secretKey: accessProvider.secretKey,
|
|
||||||
},
|
|
||||||
region,
|
|
||||||
profile: {
|
|
||||||
httpProfile: {
|
|
||||||
endpoint: 'tke.tencentcloudapi.com',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return new TkeClient(clientConfig);
|
|
||||||
}
|
|
||||||
|
|
||||||
async getTkeKubeConfig(client: any, clusterId: string) {
|
|
||||||
// Depends on tencentcloud-sdk-nodejs version 4.0.3 or higher
|
|
||||||
const params = {
|
|
||||||
ClusterId: clusterId,
|
|
||||||
};
|
|
||||||
const ret = await client.DescribeClusterKubeconfig(params);
|
|
||||||
this.checkRet(ret);
|
|
||||||
this.logger.info('注意：后续操作需要在【集群->基本信息】中开启外网或内网访问,https://console.cloud.tencent.com/tke2/cluster');
|
|
||||||
return ret.Kubeconfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
appendTimeSuffix(name: string) {
|
|
||||||
if (name == null) {
|
|
||||||
name = 'certd';
|
|
||||||
}
|
|
||||||
return name + '-' + dayjs().format('YYYYMMDD-HHmmss');
|
|
||||||
}
|
|
||||||
|
|
||||||
async patchQcloudCertSecret(options: { k8sClient: any }) {
|
|
||||||
if (this.tencentCertId == null) {
|
|
||||||
throw new Error('请先将【上传证书到腾讯云】作为前置任务');
|
|
||||||
}
|
|
||||||
this.logger.info('腾讯云证书ID:', this.tencentCertId);
|
|
||||||
const certIdBase64 = Buffer.from(this.tencentCertId).toString('base64');
|
|
||||||
|
|
||||||
const { namespace, secretName } = this;
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
data: {
|
|
||||||
qcloud_cert_id: certIdBase64,
|
|
||||||
},
|
|
||||||
metadata: {
|
|
||||||
labels: {
|
|
||||||
certd: this.appendTimeSuffix('certd'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
let secretNames: any = secretName;
|
|
||||||
if (typeof secretName === 'string') {
|
|
||||||
secretNames = [secretName];
|
|
||||||
}
|
|
||||||
for (const secret of secretNames) {
|
|
||||||
await options.k8sClient.patchSecret({
|
|
||||||
namespace,
|
|
||||||
secretName: secret,
|
|
||||||
body,
|
|
||||||
});
|
|
||||||
this.logger.info(`CertSecret已更新:${secret}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async patchNginxCertSecret(options: { k8sClient: any }) {
|
|
||||||
const { k8sClient } = options;
|
|
||||||
const { cert } = this;
|
|
||||||
const crt = cert.crt;
|
|
||||||
const key = cert.key;
|
|
||||||
const crtBase64 = Buffer.from(crt).toString('base64');
|
|
||||||
const keyBase64 = Buffer.from(key).toString('base64');
|
|
||||||
|
|
||||||
const { namespace, secretName } = this;
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
data: {
|
|
||||||
'tls.crt': crtBase64,
|
|
||||||
'tls.key': keyBase64,
|
|
||||||
},
|
|
||||||
metadata: {
|
|
||||||
labels: {
|
|
||||||
certd: this.appendTimeSuffix('certd'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
let secretNames = secretName;
|
|
||||||
if (typeof secretName === 'string') {
|
|
||||||
secretNames = [secretName];
|
|
||||||
}
|
|
||||||
for (const secret of secretNames) {
|
|
||||||
await k8sClient.patchSecret({ namespace, secretName: secret, body });
|
|
||||||
this.logger.info(`CertSecret已更新:${secret}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async restartIngress(options: { k8sClient: any }) {
|
|
||||||
const { k8sClient } = options;
|
|
||||||
const { namespace, ingressName } = this;
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
metadata: {
|
|
||||||
labels: {
|
|
||||||
certd: this.appendTimeSuffix('certd'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
let ingressNames = this.ingressName;
|
|
||||||
if (typeof ingressName === 'string') {
|
|
||||||
ingressNames = [ingressName];
|
|
||||||
}
|
|
||||||
for (const ingress of ingressNames) {
|
|
||||||
await k8sClient.patchIngress({ namespace, ingressName: ingress, body });
|
|
||||||
this.logger.info(`ingress已重启:${ingress}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
checkRet(ret: any) {
|
|
||||||
if (!ret || ret.Error) {
|
|
||||||
throw new Error('执行失败：' + ret.Error.Code + ',' + ret.Error.Message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
export * from './deploy-to-clb/index.js';
|
export * from './deploy-to-clb/index.js';
|
||||||
export * from './deploy-to-tke-ingress/index.js';
|
|
||||||
export * from './deploy-to-cdn/index.js';
|
export * from './deploy-to-cdn/index.js';
|
||||||
export * from './upload-to-tencent/index.js';
|
export * from './upload-to-tencent/index.js';
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import dayjs from 'dayjs';
|
||||||
@IsTaskPlugin({
|
@IsTaskPlugin({
|
||||||
name: 'UploadCertToTencent',
|
name: 'UploadCertToTencent',
|
||||||
title: '上传证书到腾讯云',
|
title: '上传证书到腾讯云',
|
||||||
|
icon: 'svg:icon-tencentcloud',
|
||||||
desc: '上传成功后输出：tencentCertId',
|
desc: '上传成功后输出：tencentCertId',
|
||||||
group: pluginGroups.tencent.key,
|
group: pluginGroups.tencent.key,
|
||||||
default: {
|
default: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue