配置功能。

easyj-projects · May 16, 2024 · 5480377 · 5480377
1 parent 8e96b76
commit 5480377
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 6 deletions.
diff --git a/p/index.html b/p/index.html
@@ -9,12 +9,16 @@
         body{padding:0;margin:0;font-size:20px}
 		#tools{position:fixed;left:0;top:0;z-index:1;background-color:#efefef;width:100%;padding:5px 5px 0 5px}
 		#tools div{padding-bottom:5px}
-		#imgs{margin-top:70px;padding:5px 0 0 5px}
-        img{margin-top:15px;background-color:#efefef;}
+		#imgs{margin-top:70px;padding:5px 0 0 5px;padding-bottom:10px}
+        img{margin-top:15px;background-color:#efefef}
 		img:first-child, img.hidden{margin-top:0}
+
 		.mobile #tools{top:auto;bottom:0}
-		.mobile #imgs{margin-top:0;padding-bottom:72px}
-		.mobile #imgs img:last-child{margin-bottom:70px;}
+		.mobile #imgs{margin-top:0;padding-bottom:80px}
+		.mobile #imgs img:last-child{margin-bottom:80px}
+
+		#configs{position:fixed;left:0;bottom:0;z-index:2;background-color:#efefef;border:1px solid #aaa;padding:5px;width:100%;display:none}
+        .mobile #configs{top:0;bottom:auto}
 	</style>
 </head>
 <body>
@@ -29,12 +33,26 @@
 	<div id="bottons">
 		<input id="auto" type="button" value="手动"/>
 
-		<input id="save" type="button" value="收藏" style="margin-left:17px"/>
+		<input id="save" type="button" value="收藏" style="margin-left:10px"/>
 		<input id="remove" type="button" value="删除"/>
 		<input id="last" type="button" value="最后"/>
 
-		<input id="prev" type="button" value="上一张" style="margin-left:17px"/>
+		<input id="prev" type="button" value="上一张" style="margin-left:10px"/>
 		<input id="next" type="button" value="下一张"/>
+
+		<input id="openConfigBtn" type="button" value="配置" style="margin-left:10px"/>
+	</div>
+</div>
+
+<div id="configs">
+	<div id="saveConfigPanel">
+		<div>
+			<label for="saveConfig">收藏PID列表：</label><br/>
+			<textarea id="saveConfig" style="width:95%" rows="10"></textarea>
+		</div>
+
+		<input id="closeConfigBtn" type="button" value="取消" />
+		<input id="saveConfigBtn" type="button" value="保存" style="margin-left:20px" />
 	</div>
 </div>
 

diff --git a/p/index.js b/p/index.js
@@ -13,6 +13,12 @@ const last = document.getElementById("last"); // 最后：加载最后一张收
 const prev = document.getElementById("prev"); // 上一张
 const next = document.getElementById("next"); // 下一张
 
+const configs = document.getElementById("configs"); // 配置框
+const openConfigBtn = document.getElementById("openConfigBtn"); // 打开配置
+const closeConfigBtn = document.getElementById("closeConfigBtn"); // 关闭配置
+const saveConfigBtn = document.getElementById("saveConfigBtn"); // 保存配置
+const saveConfig = document.getElementById("saveConfig"); // 收藏配置
+
 const imgs = document.getElementById("imgs"); // 图片列表
 
 
@@ -135,6 +141,52 @@ let inFocus = false; // 输入框是否获取到了焦点
 			doNext();
 		}
 	});
+
+	// “配置” 按钮点击事件
+	openConfigBtn.addEventListener("click", function () {
+		saveConfig.style.width = (windowWidth - 10) + "px";
+		saveConfig.value = localStorage.getItem("savePidList") || '';
+		configs.style.display = 'block';
+	});
+
+	// “取消” 按钮点击事件
+	closeConfigBtn.addEventListener("click", function () {
+		configs.style.display = 'none';
+	});
+
+	// “保存” 按钮点击事件
+	saveConfigBtn.addEventListener("click", function () {
+		let pidList = saveConfig.value
+			.replaceAll(/[^0-9,\[\]\s]/g, '')
+			.replaceAll(/[,\s]{1,}/g, ',');
+
+		if (pidList !== '' && pidList !== ',' && pidList !== '[]' && pidList !== '[,]') {
+			if (pidList[0] === ',') {
+				pidList = pidList.substring(1);
+			}
+			if (pidList[pidList.length - 1] === ',') {
+				pidList = pidList.substring(0, pidList.length - 1);
+			}
+			if (pidList[0] !== '[') {
+				pidList = '[' + pidList;
+			}
+			if (pidList[pidList.length - 1] !== ']') {
+				pidList = pidList + ']';
+			}
+		}
+
+		if (pidList === '' || pidList === ',' || pidList === '[]' || pidList === '[,]') {
+			saveConfig.value = '';
+			alert("请输入收藏PID列表");
+			return;
+		}
+
+		const savePidList = JSON.parse(pidList);
+		savePidList.sort((a, b) => a - b);
+		localStorage.setItem("savePidList", JSON.stringify(savePidList));
+
+		configs.style.display = 'none';
+	});
 }