更新

assets/css/joe.global.min.scss

@@ -2222,7 +2222,7 @@
 				height: 12px;
 				border-radius: 6px;
 				overflow: hidden;
-				background: var(--classC);;
+				background: var(--classC);
 				min-width: 0;
 				flex: 1;
 				margin-right: 10px;
@@ -2232,8 +2232,8 @@
 					height: 100%;
 					border-radius: 6px;
 					transition: width 0.35s;
-					&::before{
-						content: "";
+					&::before {
+						content: '';
 						opacity: 0;
 						position: absolute;
 						top: 0;
@@ -2250,6 +2250,17 @@
 				color: var(--minor);
 			}
 		}
+		&-callout {
+			display: block;
+			padding: 12px;
+			border: 1px solid var(--classB);
+			border-left-width: 4px;
+			border-radius: 4px;
+			color: var(--routine);
+			*:last-child {
+				margin-bottom: 0 !important;
+			}
+		}
 
 		/* 以下未测试 */
 		&-protected {
@@ -3399,12 +3410,12 @@
 	}
 }
 @keyframes progress-active {
-    0% {
-        opacity: .3;
-        width: 0
-    }
-    to {
-        opacity: 0;
-        width: 100%
-    }
-}
+	0% {
+		opacity: 0.3;
+		width: 0;
+	}
+	to {
+		opacity: 0;
+		width: 100%;
+	}
+}

assets/js/joe.short.js

@@ -197,6 +197,30 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-progress', JoeProgress);
+	class JoeCallout extends HTMLElement {
+		constructor() {
+			super();
+			const _temp = this.querySelector('._temp');
+			this.options = {
+				color: this.getAttribute('color') || '#f0ad4e',
+				content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容'
+			};
+			const htmlStr = `
+				<span class="joe_detail__article-callout" style="border-left-color: ${this.options.color};">
+					${this.options.content}
+				</span>
+			`;
+			if (this.querySelector('._content')) {
+				this.querySelector('._content').innerHTML = htmlStr;
+			} else {
+				const div = document.createElement('div');
+				div.className = '_content';
+				div.innerHTML = htmlStr;
+				this.appendChild(div);
+			}
+		}
+	}
+	window.customElements.define('joe-callout', JoeCallout);
 
 	const article = document.querySelector('.joe_detail__article');
 	if (article) article.innerHTML = article.innerHTML.replace(/<p><\/p>/g, '');