fix(all): 修复添加配置分隔线后，OCS配置同步锁的样式显示出错

ocsjs · May 20, 2023 · a257084 · a257084
1 parent a2bfa20
commit a257084
Show file tree

Hide file tree

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

diff --git a/packages/scripts/assets/css/style.css b/packages/scripts/assets/css/style.css
@@ -185,7 +185,6 @@ script-panel-element {
   background-color: white;
   border-radius: 0px 0px 8px 8px;
   padding: 0px 8px 12px 8px;
-  resize: vertical;
   overflow: auto;
 }
 script-panel-element .script-panel-body {
@@ -224,42 +223,42 @@ script-panel-element + script-panel-element {
   border-radius: 2px;
   line-height: 18px;
 }
-.configs {
-  display: table;
-  background: #e1e1e107;
-  width: -webkit-fill-available;
-}
-.configs .lock {
+.configs-container.lock {
   filter: blur(1px);
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
 }
-.configs .lock-wrapper {
+.configs-container .lock-wrapper {
   cursor: not-allowed !important;
   border-radius: 4px;
   position: absolute;
-  left: 16px;
+  left: 0px;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.configs .lock-message {
+.configs-container .lock-message {
   background-color: #ffffff7d;
   border-radius: 4px;
   box-shadow: 0px 0px 12px #6a6a6a98;
   padding: 2px;
 }
+.configs {
+  display: table;
+  background: #e1e1e107;
+  width: -webkit-fill-available;
+}
 .configs .configs-body {
   display: table-row-group;
 }
 .configs .configs-body config-element + config-element label {
-  padding-top: 3px;
+  padding-top: 4px;
 }
 .configs .configs-body config-element + config-element .config-wrapper {
-  padding-top: 3px;
+  padding-top: 4px;
 }
 .configs .configs-body config-element {
   width: 100%;

diff --git a/packages/scripts/assets/less/style.less b/packages/scripts/assets/less/style.less
@@ -198,7 +198,6 @@ script-panel-element {
 	background-color: white;
 	border-radius: 0px 0px 8px 8px;
 	padding: 0px 8px 12px 8px;
-	resize: vertical;
 	overflow: auto;
 
 	.script-panel-body {
@@ -244,12 +243,8 @@ script-panel-element + script-panel-element {
 	line-height: 18px;
 }
 
-.configs {
-	display: table;
-	background: #e1e1e107;
-	width: -webkit-fill-available;
-
-	.lock {
+.configs-container {
+	&.lock {
 		filter: blur(1px);
 		user-select: none;
 		-webkit-user-select: none;
@@ -260,7 +255,7 @@ script-panel-element + script-panel-element {
 		cursor: not-allowed !important;
 		border-radius: 4px;
 		position: absolute;
-		left: 16px;
+		left: 0px;
 		z-index: 1;
 		display: inline-flex;
 		align-items: center;
@@ -273,16 +268,22 @@ script-panel-element + script-panel-element {
 		box-shadow: 0px 0px 12px #6a6a6a98;
 		padding: 2px;
 	}
+}
+
+.configs {
+	display: table;
+	background: #e1e1e107;
+	width: -webkit-fill-available;
 
 	.configs-body {
 		display: table-row-group;
 
 		config-element + config-element {
 			label {
-				padding-top: 3px;
+				padding-top: 4px;
 			}
 			.config-wrapper {
-				padding-top: 3px;
+				padding-top: 4px;
 			}
 		}
 

diff --git a/packages/scripts/src/projects/background.ts b/packages/scripts/src/projects/background.ts
@@ -157,7 +157,7 @@ export const BackgroundProject = Project.create({
 			onrender({ panel }) {
 				// 同步面板不会被锁定
 				panel.lockWrapper.remove();
-				panel.configsBody.classList.remove('lock');
+				panel.configsContainer.classList.remove('lock');
 
 				const update = () => {
 					if (this.cfg.sync) {
@@ -228,10 +228,12 @@ export const BackgroundProject = Project.create({
 										// 重新定义渲染函数。在渲染后添加锁定面板的代码
 										script.onrender = ({ panel, header }) => {
 											originalRender?.({ panel, header });
-											if (panel.configsBody.children.length) {
-												panel.configsBody.classList.add('lock');
-												panel.lockWrapper.style.width = (panel.configsBody.clientWidth || panel.clientWidth) + 'px';
-												panel.lockWrapper.style.height = (panel.configsBody.clientHeight || panel.clientHeight) + 'px';
+											if (panel.configsContainer.children.length) {
+												panel.configsContainer.classList.add('lock');
+												panel.lockWrapper.style.width =
+													(panel.configsContainer.clientWidth || panel.clientWidth) + 'px';
+												panel.lockWrapper.style.height =
+													(panel.configsContainer.clientHeight || panel.clientHeight) + 'px';
 												panel.configsContainer.prepend(panel.lockWrapper);
 
 												panel.lockWrapper.title =

diff --git a/scripts/build-core.js b/scripts/build-core.js
@@ -19,6 +19,10 @@ function cleanOutput() {
 }
 
 async function buildPackages() {
+	// @ts-ignore
+	await execOut('tsc', { cwd: '../packages/core' });
+	// @ts-ignore
+	await execOut('tsc', { cwd: '../packages/scripts' });
 	// @ts-ignore
 	await execOut('vite build', { cwd: '../packages/core' });
 	// @ts-ignore
@@ -37,60 +41,60 @@ async function createUserJs(cb) {
 	const ocs = require(path.join(distPath, 'index.js'));
 
 	const createOptions = () =>
-		/** @type {import('../packages/utils').CreateOptions} */
-		({
-			parseRequire: true,
-			parseResource: true,
-			resourceBuilder: (key, value) => `const ${key} = \`${value}\`;`,
-			metaDataFormatter: {
-				header: '==UserScript==',
-				footer: '==/UserScript==',
-				prefix: '// ',
-				symbol: '@',
-				gap: '\t'.repeat(4)
-			},
-			metadata: {
-				name: 'OCS 网课助手',
-				version: version,
-				description: `OCS(online-course-script) 网课助手，专注于帮助大学生从网课中释放出来。让自己的时间把握在自己的手中，拥有人性化的操作页面，流畅的步骤提示，支持 ${ocs
-					.definedProjects()
-					.filter((p) => p.studyProject)
-					.map((s) => `【${s.name}】`)
-					.join(' ')}，等网课的学习，作业。具体的功能请查看脚本悬浮窗中的教程页面，OCS官网 https://docs.ocsjs.com 。`,
-				author: 'enncy',
-				license: 'MIT',
-				namespace: 'https://enncy.cn',
-				homepage: 'https://docs.ocsjs.com',
-				source: 'https://github.com/ocsjs/ocsjs',
-				icon: 'https://cdn.ocsjs.com/logo.png',
-				connect: ['enncy.cn', 'icodef.com', 'ocsjs.com', 'localhost'],
-				match: ocs
-					.definedProjects()
-					.map((p) => p.domains.map((d) => `*://*.${d}/*`))
-					.flat(),
-				grant: [
-					'GM_info',
-					'GM_getTab',
-					'GM_saveTab',
-					'GM_setValue',
-					'GM_getValue',
-					'unsafeWindow',
-					'GM_listValues',
-					'GM_deleteValue',
-					'GM_notification',
-					'GM_xmlhttpRequest',
-					'GM_getResourceText',
-					'GM_addValueChangeListener',
-					'GM_removeValueChangeListener'
-				],
-				require: [path.join(__dirname, distPath, 'index.js')],
-				resource: [`STYLE ${path.join(__dirname, '../packages/scripts/assets/css/style.css')}`],
-				'run-at': 'document-start',
-				antifeature: 'payment'
-			},
-			entry: path.join(__dirname, '../packages/scripts/entry.js'),
-			dist: path.join(__dirname, distPath, 'ocs.user.js')
-		});
+	/** @type {import('../packages/utils').CreateOptions} */
+	({
+		parseRequire: true,
+		parseResource: true,
+		resourceBuilder: (key, value) => `const ${key} = \`${value}\`;`,
+		metaDataFormatter: {
+			header: '==UserScript==',
+			footer: '==/UserScript==',
+			prefix: '// ',
+			symbol: '@',
+			gap: '\t'.repeat(4)
+		},
+		metadata: {
+			name: 'OCS 网课助手',
+			version: version,
+			description: `OCS(online-course-script) 网课助手，专注于帮助大学生从网课中释放出来。让自己的时间把握在自己的手中，拥有人性化的操作页面，流畅的步骤提示，支持 ${ocs
+				.definedProjects()
+				.filter((p) => p.studyProject)
+				.map((s) => `【${s.name}】`)
+				.join(' ')}，等网课的学习，作业。具体的功能请查看脚本悬浮窗中的教程页面，OCS官网 https://docs.ocsjs.com 。`,
+			author: 'enncy',
+			license: 'MIT',
+			namespace: 'https://enncy.cn',
+			homepage: 'https://docs.ocsjs.com',
+			source: 'https://github.com/ocsjs/ocsjs',
+			icon: 'https://cdn.ocsjs.com/logo.png',
+			connect: ['enncy.cn', 'icodef.com', 'ocsjs.com', 'localhost'],
+			match: ocs
+				.definedProjects()
+				.map((p) => p.domains.map((d) => `*://*.${d}/*`))
+				.flat(),
+			grant: [
+				'GM_info',
+				'GM_getTab',
+				'GM_saveTab',
+				'GM_setValue',
+				'GM_getValue',
+				'unsafeWindow',
+				'GM_listValues',
+				'GM_deleteValue',
+				'GM_notification',
+				'GM_xmlhttpRequest',
+				'GM_getResourceText',
+				'GM_addValueChangeListener',
+				'GM_removeValueChangeListener'
+			],
+			require: [path.join(__dirname, distPath, 'index.js')],
+			resource: [`STYLE ${path.join(__dirname, '../packages/scripts/assets/css/style.css')}`],
+			'run-at': 'document-start',
+			antifeature: 'payment'
+		},
+		entry: path.join(__dirname, '../packages/scripts/entry.js'),
+		dist: path.join(__dirname, distPath, 'ocs.user.js')
+	});
 
 	await createUserScript(createOptions());
 	const opts = createOptions();