feat: 表单设计暗黑模式样式调整

src/components/FormCreateDesigner/FcDesigner.vue

@@ -20,7 +20,7 @@
 					</template>
 				</el-aside>
 				<ElContainer class="_fc-m">
-					<el-header class="_fc-m-tools" height="45">
+					<el-header v-if="false" class="_fc-m-tools" height="45">
 						<slot name="handle"></slot>
 						<el-button size="small" @click="setJson">导入JSON</el-button>
 						<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
@@ -40,7 +40,7 @@
 							</template>
 						</el-popconfirm>
 					</el-header>
-					<ElMain style="background: #f5f5f5; padding: 20px">
+					<ElMain class="_fc-el-main">
 						<div class="_fc-m-drag">
 							<DragForm v-model:api="dragForm.api" :rule="dragForm.rule" :option="form.value"></DragForm>
 						</div>
@@ -1075,7 +1075,7 @@ export default defineComponent({
 }
 
 ._fc-m .form-create ._fc-l-item {
-	background: #2e73ff;
+	background: var(--el-color-primary);
 	width: 100%;
 	height: 10px;
 	overflow: hidden;
@@ -1085,7 +1085,8 @@ export default defineComponent({
 ._fc-l,
 ._fc-m,
 ._fc-r {
-	border-top: 1px solid #ececec;
+	/* #ececec */
+	border-top: 1px solid var(--el-border-color-lighter);
 	box-sizing: border-box;
 }
 
@@ -1101,8 +1102,8 @@ export default defineComponent({
 
 ._fc-l-item {
 	display: inline-block;
-	background: #fff;
-	color: #000;
+	background: var(--el-bg-color);
+	color: var(--el-text-color-primary);
 	min-width: 70px;
 	width: 33.33%;
 	height: 70px;
@@ -1126,8 +1127,10 @@ export default defineComponent({
 }
 
 ._fc-l-item:hover {
-	background: #2e73ff;
-	color: #fff;
+	/*background: #2e73ff;*/
+	background: var(--el-color-primary);
+	/*color: #fff;*/
+	color: var(--el-color-white);
 }
 
 ._fc-m-tools {
@@ -1135,7 +1138,8 @@ export default defineComponent({
 	align-items: center;
 	display: flex;
 	justify-content: flex-end;
-	border: 1px solid #ececec;
+	/*border: 1px solid #ececec;*/
+	border: 1px solid var(--el-border-color);
 	border-top: 0 none;
 }
 
@@ -1152,13 +1156,15 @@ export default defineComponent({
 
 ._fc-r .el-tabs__nav-wrap::after {
 	height: 1px;
-	background-color: #ececec;
+	/*background-color: #ececec;*/
+	background-color: var(--el-bg-color-page);
 }
 
 ._fc-r ._fc-r-tabs {
 	display: flex;
 	padding: 0;
-	border-bottom: 1px solid #ececec;
+	/*border-bottom: 1px solid #ececec;*/
+	border-bottom: 1px solid var(--el-border-color-extra-light);
 }
 
 ._fc-r ._fc-r-tab {
@@ -1176,8 +1182,8 @@ export default defineComponent({
 }
 
 ._fc-r ._fc-r-tab.active {
-	color: #409eff;
-	border-bottom: 2px solid #409eff;
+	color: var(--el-color-primary);
+	border-bottom: 2px solid var(--el-color-primary);
 }
 
 .drag-box {
@@ -1193,7 +1199,7 @@ export default defineComponent({
 
 ._fc-m-drag,
 .draggable-drag {
-	background: #fff;
+	background: var(--el-bg-color);
 	height: 100%;
 	position: relative;
 }
@@ -1202,4 +1208,9 @@ export default defineComponent({
 ._fc-m-drag > form > .el-row {
 	height: 100%;
 }
+
+._fc-el-main {
+	background: var(--el-bg-color-page);
+	padding: 20px;
+}
 </style>