diff --git a/.vscode/settings.json b/.vscode/settings.json
index af5aba8..1d04d2e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,17 @@
 {
-	"cSpell.words": ["greasyfork", "ICVE", "ocsjs", "scriptcat", "userscript", "userscripts"],
-	"eslint.validate": ["javascript", "javascriptreact", "vue"],
+	"cSpell.words": [
+		"greasyfork",
+		"ICVE",
+		"ocsjs",
+		"scriptcat",
+		"userscript",
+		"userscripts"
+	],
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact",
+		"vue"
+	],
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit"
@@ -20,5 +31,8 @@
 	"typescript.suggest.jsdoc.generateReturns": false,
 	"[typescript]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[jsonc]": {
+		"editor.defaultFormatter": "vscode.json-language-features"
 	}
-}
+}
\ No newline at end of file
diff --git a/packages/web/package.json b/packages/web/package.json
index fb95f78..c0ebeae 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -17,6 +17,7 @@
 		"chalk": "4.1.0",
 		"colorpicker-v3": "^2.10.2",
 		"dayjs": "^1.10.7",
+		"easy-us": "^0.0.11",
 		"events": "^3.3.0",
 		"markdown-it": "^13.0.1",
 		"markdown-it-anchor": "^8.6.7",
@@ -24,7 +25,7 @@
 		"markdown-it-emoji": "^2.0.2",
 		"marked": "^4.2.12",
 		"material-icons": "^1.13.1",
-		"ocsjs": "^4.4.15",
+		"ocsjs": "^4.8.13",
 		"playwright-core": "^1.28.0",
 		"video.js": "^8.0.4",
 		"vue": "^3.3.2",
diff --git a/packages/web/src/assets/css/common.css b/packages/web/src/assets/css/common.css
index 43dbf68..0f9248e 100644
--- a/packages/web/src/assets/css/common.css
+++ b/packages/web/src/assets/css/common.css
@@ -1,221 +1,221 @@
 body,
 html,
 #app {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  min-width: 500px;
-  min-height: 300px;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	max-width: 100%;
+	max-height: 100%;
+	min-width: 500px;
+	min-height: 300px;
 }
 /** 兼容 win11 以下的软件不会自动带有阴影和边框 */
 html.window-frame {
-  border: 1px solid #e1e1e1;
-  overflow: hidden;
-  box-shadow: 0px 0px 12px #d3d3d3;
+	border: 1px solid #e1e1e1;
+	overflow: hidden;
+	box-shadow: 0px 0px 12px #d3d3d3;
 }
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 .pointer {
-  cursor: pointer;
+	cursor: pointer;
 }
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 6px;
+	width: 10px;
+	height: 6px;
 }
 /* 滚动槽 */
 ::-webkit-scrollbar-track {
-  background: #ffffff00;
+	background: #ffffff00;
 }
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background: rgba(0, 0, 0, 0.1);
-  box-shadow: inset006pxrgba(0, 0, 0, 0.3);
+	border-radius: 2px;
+	background: rgba(0, 0, 0, 0.1);
+	box-shadow: inset006pxrgba(0, 0, 0, 0.3);
 }
 /** 通知栏样式 */
 .arco-notification {
-  /** 主容器 */
-  /** 底部按钮 */
+	/** 主容器 */
+	/** 底部按钮 */
 }
 .arco-notification .arco-notification-notice {
-  padding: 12px;
+	padding: 12px;
 }
 .arco-notification .arco-notification-notice-btn {
-  margin-top: 8px;
+	margin-top: 8px;
 }
 .arco-notification .arco-notification-notice-with-icon .arco-notification-notice-description {
-  margin-left: 0;
-  font-size: 12px;
+	margin-left: 0;
+	font-size: 12px;
 }
 .arco-notification .arco-notification-notice-with-icon .arco-notification-notice-message {
-  margin-left: 36px;
+	margin-left: 36px;
 }
 .arco-notification .arco-notification-notice-description {
-  overflow: auto;
+	overflow: auto;
 }
 .anticon {
-  vertical-align: 0px !important;
+	vertical-align: 0px !important;
 }
 .markdown {
-  font-size: 14px;
-  border: 1px solid #e6e6e6;
-  border-radius: 4px;
-  padding: 4px;
+	font-size: 14px;
+	border: 1px solid #e6e6e6;
+	border-radius: 4px;
+	padding: 4px;
 }
 code {
-  margin: 0px 2px !important;
-  padding: 2px 4px !important;
-  font-size: 90% !important;
-  color: #323030;
-  background-color: #eaeaea;
-  border-radius: 4px;
+	margin: 0px 2px !important;
+	padding: 2px 4px !important;
+	font-size: 90% !important;
+	color: #323030;
+	background-color: #eaeaea;
+	border-radius: 4px;
 }
 em {
-  background-color: yellow;
-  font-weight: bold;
+	background-color: yellow;
+	font-weight: bold;
 }
 body .arco-tree li span.arco-tree-iconEle {
-  vertical-align: unset;
+	vertical-align: unset;
 }
 body .arco-tree li .arco-tree-node-content-wrapper {
-  padding: 0;
+	padding: 0;
 }
 body .arco-tree li {
-  padding: 0px 8px 0px 0px !important;
-  text-overflow: hidden;
-  overflow: hidden;
-  white-space: nowrap;
+	padding: 0px 8px 0px 0px !important;
+	text-overflow: hidden;
+	overflow: hidden;
+	white-space: nowrap;
 }
 body .arco-tree-title {
-  padding: 4px 8px 4px 0px !important;
+	padding: 4px 8px 4px 0px !important;
 }
 body .arco-tree * {
-  animation-duration: 0s !important;
-  animation: none !important;
-  transition: none !important;
+	animation-duration: 0s !important;
+	animation: none !important;
+	transition: none !important;
 }
 body .arco-tree-iconEle.arco-tree-icon__customize {
-  width: 18px;
+	width: 18px;
 }
 body .arco-tree li span.arco-tree-switcher {
-  width: 18px;
+	width: 18px;
 }
 body[arco-theme='dark'] {
-  color: #cccccc;
-  background-color: #2c2c2c;
-  /** browser-panel toc */
-  /* 滚动槽 */
-  /* 滚动条滑块 */
+	color: #cccccc;
+	background-color: #2c2c2c;
+	/** browser-panel toc */
+	/* 滚动槽 */
+	/* 滚动条滑块 */
 }
 body[arco-theme='dark'] .bp-toc {
-  color: #cccccc;
-  background-color: #2c2c2c;
+	color: #cccccc;
+	background-color: #2c2c2c;
 }
 body[arco-theme='dark'] .text-secondary {
-  color: #aaaaaa !important;
+	color: #aaaaaa !important;
 }
 body[arco-theme='dark'] .title {
-  color: #cccccc;
-  background-color: #2c2c2c;
-  border-bottom: 1px solid #4b4848;
+	color: #cccccc;
+	background-color: #2c2c2c;
+	border-bottom: 1px solid #4b4848;
 }
 body[arco-theme='dark'] #title ul li {
-  color: #cccccc;
+	color: #cccccc;
 }
 body[arco-theme='dark'] ::-webkit-scrollbar-track {
-  background: #9693933a;
+	background: #9693933a;
 }
 body[arco-theme='dark'] ::-webkit-scrollbar-thumb {
-  background: #c9bfbf98;
+	background: #c9bfbf98;
 }
 body[arco-theme='dark'] a,
 body[arco-theme='dark'] a.link {
-  color: #61a5e4 !important;
+	color: #61a5e4 !important;
 }
 body[arco-theme='dark'] .border-end,
 body[arco-theme='dark'] .border-start,
 body[arco-theme='dark'] .border-bottom,
 body[arco-theme='dark'] .border-top {
-  border-color: #4b4848 !important;
+	border-color: #4b4848 !important;
 }
 body[arco-theme='dark'] * {
-  box-shadow: none !important;
+	box-shadow: none !important;
 }
 body[arco-theme='dark'] .entity:hover {
-  background: #3b3b3b !important;
+	background: #3b3b3b !important;
 }
 body[arco-theme='dark'] .screenshot-item {
-  border: 1px solid;
-  border-color: #4b4848 !important;
+	border: 1px solid;
+	border-color: #4b4848 !important;
 }
 body[arco-theme='dark'] .breadcrumb {
-  background-color: #2c2c2c;
-  border: 1px solid #4b4848;
+	background-color: #2c2c2c;
+	border: 1px solid #4b4848;
 }
 body[arco-theme='dark'] .path-item {
-  color: #cccccc;
+	color: #cccccc;
 }
 body[arco-theme='dark'] .entity {
-  border-bottom: 1px solid #4b4848;
+	border-bottom: 1px solid #4b4848;
 }
 body[arco-theme='dark'] .entity-properties {
-  background-color: #4b4b4b;
-  color: #aaaaaa;
+	background-color: #4b4b4b;
+	color: #aaaaaa;
 }
 body[arco-theme='dark'] .sider-item.active {
-  background-color: #4b4b4b;
+	background-color: #4b4b4b;
 }
 body[arco-theme='dark'] .sider {
-  border-right: 1px solid #4b4848;
+	border-right: 1px solid #4b4848;
 }
 body[arco-theme='dark'] .sider .sider-item {
-  border-left: 6px solid #2c2c2c;
+	border-left: 6px solid #2c2c2c;
 }
 body[arco-theme='dark'] .sider .sider-item.active {
-  background-color: #4b4b4b;
-  border-left: 6px solid #4898e2;
+	background-color: #4b4b4b;
+	border-left: 6px solid #4898e2;
 }
 body[arco-theme='dark'] .ps-table .ps-body-cell {
-  border: 1px solid #4b4848;
+	border: 1px solid #4b4848;
 }
 body[arco-theme='dark'] .ps-table .ps-body-cell .arco-input-wrapper {
-  background: #4b4b4b;
+	background: #4b4b4b;
 }
 body[arco-theme='dark'] .ps-table .arco-table-tr .ps-table-index {
-  background-color: #4b4b4b;
-  color: #aaaaaa;
+	background-color: #4b4b4b;
+	color: #aaaaaa;
 }
 .arco-trigger-popup {
-  animation-duration: 0s !important;
-  animation: none !important;
-  transition: none !important;
+	animation-duration: 0s !important;
+	animation: none !important;
+	transition: none !important;
 }
 .arco-trigger-popup * {
-  animation-duration: 0s !important;
-  animation: none !important;
-  transition: none !important;
+	animation-duration: 0s !important;
+	animation: none !important;
+	transition: none !important;
 }
 .arco-dropdown-option-content {
-  font-size: 12px;
-  line-height: 28px;
+	font-size: 12px;
+	line-height: 28px;
 }
 /** 简单模式下不要有头部间隔 */
 .arco-modal-simple .arco-modal-header {
-  margin-bottom: 0px;
+	margin-bottom: 0px;
 }
 /** 防止被标题栏遮挡 */
 .arco-drawer-container,
 .arco-modal-container {
-  top: 32px;
+	top: 32px;
 }
 .arco-notification-list,
 .arco-message-list {
-  top: 52px;
+	top: 52px;
 }
diff --git a/packages/web/src/components/OCSConfigs.vue b/packages/web/src/components/OCSConfigs.vue
index 66d6ec4..88dd304 100644
--- a/packages/web/src/components/OCSConfigs.vue
+++ b/packages/web/src/components/OCSConfigs.vue
@@ -1,14 +1,16 @@
 <template>
 	<div class="h-100">
-		<a-select v-model="Store.render.setting.ocs.currentProjectName">
-			<template #prefix> 配置 : </template>
+		<a-radio-group
+			v-model="Store.render.setting.ocs.currentProjectName"
+			type="button"
+		>
 			<template
 				v-for="project of state.projects"
 				:key="project.name"
 			>
-				<a-option :value="project.name"> {{ project.name }} </a-option>
+				<a-radio :value="project.name">{{ project.name }}</a-radio>
 			</template>
-		</a-select>
+		</a-radio-group>
 		<div
 			id="ocs-browser-configs"
 			class="mt-3"
@@ -20,6 +22,7 @@
 import { onMounted, nextTick, onActivated, reactive, watch, ref, WatchStopHandle, onDeactivated } from 'vue';
 import { remote } from '../utils/remote';
 import { store as Store } from '../store/index';
+import { definedCustomElements, h, $, $ui, MemoryStoreProvider, $store, $elements } from 'easy-us';
 
 type Project = any;
 
@@ -38,8 +41,6 @@ const emits = defineEmits<{
 }>();
 
 const state = reactive({
-	/** ocs root 元素 */
-	root: undefined as ShadowRoot | undefined,
 	css: '',
 	/** 是否加载 */
 	loading: false,
@@ -61,20 +62,21 @@ state.watchStopHandle = watch(store, () => {
 	emits('update:store', store.value);
 });
 
+const wrapper = h('div');
+const root = wrapper.attachShadow({ mode: 'closed' });
+
 function renderOCS() {
-	// @ts-ignore
-	const OCS = global.OCS as typeof import('ocsjs');
 	const project = state.projects.find((p) => p.name === Store.render.setting.ocs.currentProjectName);
 
 	// 清空元素
-	OCS.$elements.root.replaceChildren();
+	root.replaceChildren();
 
-	OCS.$.loadCustomElements(OCS.definedCustomElements);
+	loadCustomElements(definedCustomElements as any[]);
 
-	OCS.$elements.root.append(OCS.el('style', state.css));
+	root.append(h('style', state.css));
 
 	/** 删除阴影 */
-	OCS.$elements.root.append(OCS.el('style', `script-panel-element {box-shadow: none;resize: none;color:#2e2e2e}`));
+	root.append(h('style', `script-panel-element {box-shadow: none;resize: none;color:#2e2e2e}`));
 
 	if (project) {
 		for (const key in project.scripts) {
@@ -82,7 +84,7 @@ function renderOCS() {
 				const script = project.scripts[key];
 
 				/** 为对象添加响应式特性，在设置值的时候同步到本地存储中 */
-				script.cfg = Object.keys(script.cfg).length === 0 ? OCS.$.createConfigProxy(script) : script.cfg;
+				script.cfg = Object.keys(script.cfg).length === 0 ? $.createConfigProxy(script) : script.cfg;
 				const { notes, ...otherConfigs } = script.configs || {};
 
 				if (
@@ -91,12 +93,12 @@ function renderOCS() {
 					Object.keys(otherConfigs).filter((k) => otherConfigs[k].label !== undefined).length &&
 					script.hideInPanel !== false
 				) {
-					const panel = OCS.$creator.scriptPanel(script, { projectName: '' });
+					const panel = $ui.scriptPanel(script, $store);
 
 					/** 添加到页面中，并执行 onrender 函数 */
-					OCS.$elements.root.append(panel);
+					root.append(panel);
 					try {
-						script.onrender?.({ panel, header: OCS.el('header-element') })?.catch((err) => {
+						script.onrender?.({ panel, header: h('header-element') })?.catch((err) => {
 							console.error(err);
 						});
 					} catch (err) {
@@ -107,8 +109,7 @@ function renderOCS() {
 		}
 
 		/** 挂载 ocs panel */
-		OCS.$el(`#ocs-browser-configs`)?.replaceChildren(OCS.$elements.panel);
-		state.root = state.root || OCS.$elements.root;
+		document.querySelector('#ocs-browser-configs')?.replaceChildren(wrapper);
 	}
 }
 
@@ -130,9 +131,12 @@ async function loadOCS() {
 
 		// @ts-ignore
 		const OCS = global.OCS as typeof import('ocsjs');
+		global.OCS.$elements.root = root;
+		$elements.root = root;
+		console.log(OCS);
 
 		/** 双向绑定数据 */
-		OCS.ObjectStoreProvider._source.store = store.value;
+		MemoryStoreProvider._source.store = store.value;
 
 		state.projects = OCS.definedProjects();
 		emits('update:project', state.projects as Project[]);
@@ -141,6 +145,7 @@ async function loadOCS() {
 		}
 	} catch (err) {
 		state.err = String(err);
+		console.error(err);
 		emits('error', state.err);
 	}
 
@@ -165,6 +170,31 @@ onActivated(() => {
 onDeactivated(() => {
 	state.watchStopHandle?.();
 });
+
+/** 加载自定义元素 */
+function loadCustomElements(elements: { new (): HTMLElement }[]) {
+	for (const element of elements) {
+		const name = resolveCustomElementName(element, '-');
+		// 不能重复加载
+		if (customElements.get(name) === undefined) {
+			customElements.define(name, element);
+		}
+	}
+}
+
+/**
+ * 将每个驼峰前面添加目标字符串，用于自定义元素名的转换
+ * @param el  自定义元素
+ * @param target 目标字符串
+ */
+function resolveCustomElementName<T extends HTMLElement = HTMLElement>(el: { new (): T }, target: string) {
+	return el.name
+		.replace(/([A-Z])/g, target + '$1')
+		.toLowerCase()
+		.split(target)
+		.slice(1)
+		.join(target);
+}
 </script>
 
 <style scoped lang="less">
diff --git a/packages/web/src/pages/setting/index.vue b/packages/web/src/pages/setting/index.vue
index 2684e13..109d4ea 100644
--- a/packages/web/src/pages/setting/index.vue
+++ b/packages/web/src/pages/setting/index.vue
@@ -8,6 +8,7 @@
 					<div
 						v-show="state.loading === false && state.err !== ''"
 						style="color: red"
+						:title="state.err"
 					>
 						解析错误！，请尝试重启软件
 					</div>
@@ -32,14 +33,22 @@
 
 					<a-modal
 						v-model:visible="state.show"
+						title="OCS配置"
 						:footer="false"
-						:simple="true"
-						:width="500"
+						width="auto"
 						modal-class="p-0 m-0"
+						:mask-closable="false"
+						body-style="padding: 0"
+						@close="
+							() => {
+								if (store.render.setting.ocs.openSync === false) {
+									Message.info('开启右侧的同步功能才可生效哦。');
+								}
+							}
+						"
 					>
 						<div
 							id="ocs-global-configs"
-							style="height: 90vh"
 							class="m-2"
 						>
 							<OCSConfigs
@@ -159,6 +168,7 @@ import Icon from '../../components/Icon.vue';
 import { forceClearBrowserCache } from '../../utils/browser';
 import { Folder } from '../../fs/folder';
 import { Browser } from '../../fs/browser';
+import { Message } from '@arco-design/web-vue';
 
 const state = reactive({
 	/** 是否加载 */
@@ -199,7 +209,7 @@ async function onUserDataDirsFolderChange(previous: string, current: string) {
 }
 
 #ocs-global-configs {
-	height: 70vh;
+	height: 80vh;
 	overflow: overlay;
 }
 </style>