更新

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

@@ -116,6 +116,7 @@ body.fullscreen {
 		}
 	}
 	.cm-mainer {
+		position: relative;
 		flex: 1;
 		min-height: 0;
 		display: flex;
@@ -432,6 +433,38 @@ body.fullscreen {
 				}
 			}
 		}
+		.cm-autosave {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			z-index: 999;
+			&::before,
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				width: 0;
+				height: 2px;
+				transition: width 0.5s;
+			}
+			&::before {
+				border-radius: 1px 0 0 1px;
+				left: 50%;
+				background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
+			}
+			&::after {
+				border-radius: 0 1px 1px 0;
+				right: 50%;
+				background: linear-gradient(to left, #4cd964, #5ac8fa, #007aff);
+			}
+			&.active {
+				&::before,
+				&::after {
+					width: 50%;
+				}
+			}
+		}
 	}
 	.cm-progress-left {
 		position: absolute;

typecho/write/js/joe.write.js

@@ -19,6 +19,7 @@ class Joe extends JoeAction {
 		this.init_Preview();
 		this.init_Tools();
 		this.init_Insert();
+		this.init_AutoSave();
 	}
 
 	/* 已测 √ */
@@ -35,6 +36,7 @@ class Joe extends JoeAction {
                 <div class="cm-mainer">
                     <div class="cm-resize"></div>
                     <div class="cm-preview"><div class="cm-preview-content"></div></div>
+					<div class="cm-autosave"></div>
                 </div>
                 <div class="cm-progress-left"></div>
                 <div class="cm-progress-right"></div>
@@ -285,6 +287,36 @@ class Joe extends JoeAction {
 			this.cm.focus();
 		};
 	}
+
+	init_AutoSave() {
+		if (window.JoeConfig.autoSave !== 1) return;
+		const formEl = $('#text')[0].form;
+		let cid = $('input[name="cid"]').val();
+		let temp = null;
+		const saveFn = () => {
+			$('input[name="cid"]').val(cid);
+			$('#text').val(this.cm.state.doc.toString());
+			let data = $(formEl).serialize();
+			if (data !== temp) {
+				$('.cm-autosave').addClass('active');
+				$.ajax({
+					url: formEl.action,
+					type: 'POST',
+					data: data + '&do=save',
+					dataType: 'json',
+					success: res => {
+						cid = res.cid;
+						temp = data;
+						let timer = setTimeout(() => {
+							$('.cm-autosave').removeClass('active');
+							clearTimeout(timer);
+						}, 1000);
+					}
+				});
+			}
+		};
+		setInterval(saveFn, 5000);
+	}
 }
 
 document.addEventListener('DOMContentLoaded', () => new Joe());