feat(all): 添加配置分割线，便于设置区域分组

ocsjs · May 19, 2023 · 980d591 · 980d591
1 parent 61be509
commit 980d591
Show file tree

Hide file tree

Showing 7 changed files with 553 additions and 549 deletions.
diff --git a/packages/core/src/elements/script.panel.ts b/packages/core/src/elements/script.panel.ts
@@ -17,9 +17,7 @@ export class ScriptPanelElement extends IElement {
 	/** 创建提示板块 */
 	notesContainer: HTMLDivElement = el('div', { className: 'notes card' });
 	/** 创建设置板块 */
-	configsContainer: HTMLDivElement = el('div', { className: 'configs card' });
-	/** 设置区域主体 */
-	configsBody: HTMLDivElement = el('div', { className: 'configs-body' });
+	configsContainer: HTMLDivElement = el('div', { className: 'card' });
 	/** 主体 */
 	body: HTMLDivElement = el('div', { className: 'script-panel-body' });
 	/** 锁定配置板块 */

diff --git a/packages/core/src/interfaces/config.ts b/packages/core/src/interfaces/config.ts
@@ -8,5 +8,7 @@ export interface Config<T extends keyof ConfigTagMap = keyof ConfigTagMap, V = a
 	defaultValue: V;
 	/** 将本地修改后的值同步到元素中 */
 	sync?: boolean;
+	/** 在元素上方创建一个分隔元素 */
+	separator?: string;
 	onload?: (this: ConfigTagMap[T], el: ConfigElement<T>) => void;
 }
diff --git a/packages/core/src/utils/creator.ts b/packages/core/src/utils/creator.ts
@@ -138,16 +138,31 @@ export const $creator = {
 		script.panel = scriptPanel;
 
 		scriptPanel.notesContainer.innerHTML = script.configs?.notes?.defaultValue || '';
-		const els = $creator.configs(script.namespace, script.configs || {}, opts.onload);
+
+		let configs = Object.create({});
 		const elList = [];
-		for (const key in els) {
-			if (Object.prototype.hasOwnProperty.call(els, key)) {
-				elList.push(els[key]);
+		for (const key in script.configs) {
+			if (Object.prototype.hasOwnProperty.call(script.configs, key)) {
+				const cfg = script.configs[key];
+				// 如果存在分隔符
+				if (cfg.separator) {
+					// 将之前的配置项生成配置区域，并添加到列表中
+					elList.push($creator.configsArea($creator.configs(script.namespace, configs || {}, opts.onload)));
+					// 添加分隔符
+					elList.push(el('div', { className: 'separator', style: { margin: '0px 8px' } }, cfg.separator));
+					// 清空配置项
+					configs = Object.create({});
+				}
+
+				configs[key] = cfg;
 			}
 		}
+		// 如果还有剩余的配置项，生成配置区域，并添加到列表中
+		if (Object.keys(configs).length > 0) {
+			elList.push($creator.configsArea($creator.configs(script.namespace, configs || {}, opts.onload)));
+		}
 
-		scriptPanel.configsBody.append(...elList);
-		scriptPanel.configsContainer.append(scriptPanel.configsBody);
+		scriptPanel.configsContainer.replaceChildren(...elList);
 
 		return scriptPanel;
 	},