更新

typecho/write/css/joe.write.min.scss

@@ -1086,6 +1086,53 @@ body.fullscreen {
 		transform-origin: left;
 	}
 }
+.joe_collapse {
+	&__item {
+		margin-bottom: 10px;
+		color: #606266;
+		&-head {
+			display: flex;
+			align-items: center;
+			background: #f2f6fc;
+			padding: 10px 12px;
+			padding-right: 8px;
+			cursor: pointer;
+			overflow: hidden;
+			border: 1px solid #ebeef5;
+			user-select: none;
+			&--label {
+				padding-right: 8px;
+			}
+			&--icon {
+				flex-shrink: 0;
+				margin-left: auto;
+				fill: #909399;
+				transition: transform 0.3s ease;
+			}
+		}
+		&-wrapper {
+			max-height: 0;
+			overflow: hidden;
+			transition: max-height .3s ease;
+			&--content {
+				border: 1px solid #ebeef5;
+				border-top: 0;
+				padding: 12px;
+				*:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+		&:last-child {
+			margin-bottom: 0;
+		}
+		&.active {
+			.joe_collapse__item-head--icon {
+				transform: rotate(-180deg);
+			}
+		}
+	}
+}
 
 @media (max-width: 768px) {
 	.cm-modal__wrapper {

typecho/write/js/_actions.js

@@ -768,4 +768,9 @@ export default class JoeAction {
 		this._replaceSelection(cm, str);
 		cm.focus();
 	}
+	handleCollapse(cm) {
+		const str = `${this._getLineCh(cm) ? '\n\n' : '\n'}{collapse}\n{collapse-item label="折叠标题一" open}\n 折叠内容一\n{/collapse-item}\n{collapse-item label="折叠标题二"}\n 折叠内容二\n{/collapse-item}\n{/collapse}\n\n`;
+		this._replaceSelection(cm, str);
+		cm.focus();
+	}
 }

typecho/write/js/_create.js

@@ -38,6 +38,7 @@ export default function createPreviewHtml(str) {
 	str = str.replace(/{tabs}([\s\S]*?){\/tabs}/g, '<section style="margin-bottom: 15px"><joe-tabs><span class="_temp" style="display: none">$1</span></joe-tabs></section>');
 	str = str.replace(/{card-list}([\s\S]*?){\/card-list}/g, '<section style="margin-bottom: 15px"><joe-card-list><span class="_temp" style="display: none">$1</span></joe-card-list></section>');
 	str = str.replace(/{timeline}([\s\S]*?){\/timeline}/g, '<section style="margin-bottom: 15px"><joe-timeline><span class="_temp" style="display: none">$1</span></joe-timeline></section>');
+	str = str.replace(/{collapse}([\s\S]*?){\/collapse}/g, '<section style="margin-bottom: 15px"><joe-collapse><span class="_temp" style="display: none">$1</span></joe-collapse></section>');
 
 	$('.cm-preview-content').html(str);
 	$('.cm-preview-content p:empty').remove();

typecho/write/js/_tools.js

@@ -215,6 +215,11 @@ export default [
 		title: '跑马灯',
 		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M848 432a80.064 80.064 0 0 0-73.216 48H217.216A80.096 80.096 0 0 0 144 432a80.096 80.096 0 0 0-80 80c0 44.128 35.904 80 80 80a80 80 0 0 0 73.216-48h557.536a80 80 0 0 0 73.216 48c44.128 0 80-35.872 80-80A80.032 80.032 0 0 0 848 432z"/></svg>'
 	},
+	{
+		type: 'collapse',
+		title: '折叠面板',
+		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M944 128H80c-8.8 0-16 7.2-16 16v736c0 8.8 7.2 16 16 16h864c8.8 0 16-7.2 16-16V144c0-8.8-7.2-16-16-16zm-48 64v216H128V192h768zM128 832V472h768v360H128z"/><path d="M706 340.8c6.4 7.6 18 7.6 24.4 0l58.8-69.2c8.8-10.4 1.6-26.4-12-26.4H659.6c-13.6 0-21.2 16-12 26.4l58.4 69.2z"/></svg>'
+	},
 	/* --------------------------- 短代码结束 --------------------------- */
 	{
 		type: 'clean',

typecho/write/js/joe.write.js

@@ -330,6 +330,9 @@ class Joe extends JoeAction {
 						case 'lamp':
 							super.handleLamp(this.cm);
 							break;
+						case 'collapse':
+							super.handleCollapse(this.cm);
+							break;
 						case 'preview':
 							el.toggleClass('active');
 							if (el.hasClass('active')) window.JoeConfig.canPreview = true;