feat(core): 添加使用教程, 重载 el 函数, 修改cors跨域模块使用 setTab, getTab 进行cors跨域标签分…

…区. 优化页面选择逻辑
ocsjs · Nov 9, 2022 · eaa6ae5 · eaa6ae5
1 parent 7a20041
commit eaa6ae5
Show file tree

Hide file tree

Showing 22 changed files with 814 additions and 605 deletions.
diff --git a/packages/core/assets/css/style.css b/packages/core/assets/css/style.css
diff --git a/packages/core/assets/less/style.less b/packages/core/assets/less/style.less
@@ -70,10 +70,10 @@ container-element {
 	font: 12px/1.5 @base-font-family;
 }
 
-.header {
-	@base-height: 32px;
-	@size: 18px;
+@base-height: 32px;
+@size: 18px;
 
+.header {
 	cursor: move;
 	white-space: nowrap;
 	justify-content: end;
@@ -93,40 +93,34 @@ container-element {
 		margin-left: 12px;
 	}
 	& > * {
-		text-align: center;
 		height: @size;
 		line-height: @size;
 		margin-top: calc((@base-height - @size) / 2);
 	}
+}
 
-	.close {
-		color: black;
-		width: @size;
-		background: #ff00004f;
-		cursor: pointer;
-		border-radius: 100%;
-	}
+.close,
+.switch,
+.panel-switch,
+.logo {
+	color: black;
+	width: @size;
+	cursor: pointer;
+	border-radius: 100%;
+	display: inline-block;
+	text-align: center;
+}
 
-	.switch {
-		color: black;
-		width: @size;
-		background: #ffa6003e;
-		cursor: pointer;
-		border-radius: 100%;
-	}
+.close {
+	background: #ff00004f;
+}
 
-	.panel-switch {
-		color: black;
-		width: @size;
-		background: #14a00d50;
-		cursor: pointer;
-		border-radius: 100%;
-	}
+.switch {
+	background: #ffa6003e;
+}
 
-	.logo {
-		cursor: pointer;
-		border-radius: 100%;
-	}
+.panel-switch {
+	background: #14a00d50;
 }
 
 .body {
@@ -146,17 +140,13 @@ scrip-panel-element + scrip-panel-element {
 	margin-top: 12px;
 }
 
-.footer {
-}
-
 .card + .card {
 	margin-top: 12px;
 }
 
 .card {
-	border-radius: 3px;
-	padding: 4px;
-
+	border-radius: 2px;
+	padding: 0px 4px;
 	width: -webkit-fill-available;
 }
 
@@ -180,9 +170,7 @@ scrip-panel-element + scrip-panel-element {
 
 .configs {
 	display: table;
-
 	background: #e1e1e107;
-	border-left: 4px solid #cecece;
 
 	.configs-body {
 		display: table-row-group;
@@ -200,18 +188,20 @@ scrip-panel-element + scrip-panel-element {
 			width: 100%;
 			display: table-row;
 
-			.config-wrapper {
+			label {
+				font-size: 13px;
+				white-space: nowrap;
+				color: #4e5969;
 				display: table-cell;
+				padding-right: 12px;
+				text-align: left;
+				vertical-align: top;
+				margin-right: 12px;
+			}
 
-				label {
-					font-size: 13px;
-					white-space: nowrap;
-					color: #4e5969;
-					display: table-cell;
-					padding-right: 12px;
-					text-align: left;
-					vertical-align: top;
-				}
+			.config-wrapper {
+				display: table-cell;
+				vertical-align: middle;
 
 				select {
 					outline: none;
@@ -246,15 +236,18 @@ scrip-panel-element + scrip-panel-element {
 					width: fit-content;
 					min-width: 32px;
 					height: 16px;
-					border-radius: 100px !important;
+					border-radius: 100px;
 					display: flex;
 					align-items: center;
 					padding: 2px 4px;
 					transition: all 0.2s ease-in-out;
 					width: auto;
 
 					&:checked {
-						background: #1890ff !important;
+						background: #1890ff;
+					}
+					&:disabled {
+						background-color: #f7f7f78b;
 					}
 
 					&:checked::before {
@@ -288,6 +281,7 @@ scrip-panel-element + scrip-panel-element {
 				background-color: @form-control-bg;
 				border-radius: 2px;
 				color: black;
+				float: right;
 			}
 			.config-wrapper > *:disabled {
 				cursor: not-allowed;
@@ -452,6 +446,8 @@ model-element.confirm {
 	left: 0px;
 	z-index: 9999999;
 	background-color: rgba(0, 0, 0, 0.265);
+	color: #636363;
+	font: 12px/1.5 @base-font-family;
 }
 
 .pointer {
@@ -498,3 +494,12 @@ model-element.confirm {
 		display: none;
 	}
 }
+
+.user-guide {
+	max-width: 400px;
+	padding-left: 16px;
+
+	& > li {
+		padding: 4px 0px;
+	}
+}
diff --git a/packages/core/src/custom.d.ts b/packages/core/src/custom.d.ts
diff --git a/packages/core/src/elements/config.ts b/packages/core/src/elements/config.ts
@@ -1,5 +1,5 @@
-import { getValue, setValue } from '../utils/common';
 import { el, tooltip } from '../utils/dom';
+import { getValue, setValue } from '../utils/tampermonkey';
 
 import { ConfigTagMap } from './configs/interface';
 import { IElement } from './interface';
@@ -24,8 +24,15 @@ export class ConfigElement<T extends keyof ConfigTagMap = 'input'> extends IElem
 			this.provider = el('input');
 			if (['checkbox', 'radio'].some((t) => t === this.attrs?.type)) {
 				this.provider.checked = getValue(this.key);
+				const provider = this.provider;
+				provider.onchange = () => {
+					setValue(this.key, provider.checked);
+				};
 			} else {
 				this.provider.value = getValue(this.key);
+				this.provider.onchange = () => {
+					setValue(this.key, this.provider.value);
+				};
 			}
 		};
 		switch (this.tag) {
@@ -58,12 +65,6 @@ export class ConfigElement<T extends keyof ConfigTagMap = 'input'> extends IElem
 			}
 		}
 
-		// 储存值
-		this.provider.onchange = () => {
-			// eslint-disable-next-line no-undef
-			setValue(this.key, this.provider.value);
-		};
-
 		// 处理跨域
 		if (this.sync) {
 			// eslint-disable-next-line no-undef

diff --git a/packages/core/src/elements/message.ts b/packages/core/src/elements/message.ts
@@ -14,7 +14,9 @@ export class MessageElement extends IElement {
 
 	connectedCallback() {
 		this.classList.add(this.type);
-		this.contentContainer.append(this.content);
+		this.contentContainer.append(
+			typeof this.content === 'string' ? el('div', { innerHTML: this.content }) : this.content
+		);
 		this.duration = Math.max(this.duration, 0);
 		this.append(this.contentContainer);
 

diff --git a/packages/core/src/elements/model.ts b/packages/core/src/elements/model.ts
@@ -1,9 +1,10 @@
 import { el } from '../utils/dom';
+import { getInfos } from '../utils/tampermonkey';
 import { IElement } from './interface';
 
 export class ModelElement extends IElement {
 	modelProfile: HTMLDivElement = el('div', {
-		innerText: '弹窗来自: OCS-' + process.env.__VERSION__,
+		innerText: '弹窗来自: OCS-' + getInfos().script.version,
 		className: 'model-profile'
 	});
 
@@ -26,7 +27,7 @@ export class ModelElement extends IElement {
 	connectedCallback() {
 		this.classList.add(this.type);
 		this.modalTitle.innerText = this.title;
-		this.modalBody.append(this.content);
+		this.modalBody.append(typeof this.content === 'string' ? el('div', { innerHTML: this.content }) : this.content);
 		this.cancelButton.innerText = this.cancelButtonText || '取消';
 		this.confirmButton.innerText = this.confirmButtonText || '确定';
 		this.modalInput.placeholder = this.placeholder || '';

diff --git a/packages/core/src/elements/script.panel.ts b/packages/core/src/elements/script.panel.ts
@@ -16,8 +16,8 @@ export class ScriptPanelElement extends IElement {
 		this.replaceChildren();
 		this.separator.innerText = this.name || '';
 		this.append(this.separator);
-		this.notesContainer.childElementCount && this.append(this.notesContainer);
-		this.configsBody.childElementCount && this.append(this.configsContainer);
+		this.append(this.notesContainer);
+		this.append(this.configsContainer);
 		this.append(this.body);
 	}
 }