style: 用 Element Plus 变量替换硬编码中性色值

src/components/Upload/SingleImageUpload.vue

@@ -199,7 +199,7 @@ const onError = (error: any) => {
     font-size: 16px;
     color: #ff7901;
     cursor: pointer;
-    background: #fff;
+    background: var(--el-bg-color);
     border-radius: 100%;
 
     :hover {

src/layouts/components/LayoutSettings.vue

@@ -429,14 +429,18 @@ const handleCloseDrawer = () => {
   height: 80px;
   overflow: hidden;
   cursor: pointer;
-  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
-  border: 2px solid var(--el-border-color-light);
+  background: linear-gradient(145deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%);
+  border: 2px solid var(--el-border-color);
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover {
-    background: linear-gradient(145deg, #ffffff 0%, var(--el-color-primary-light-9) 100%);
+    background: linear-gradient(
+      145deg,
+      var(--el-bg-color) 0%,
+      var(--el-color-primary-light-9) 100%
+    );
     border-color: var(--el-color-primary-light-3);
     transform: translateY(-4px) scale(1.05);
   }
@@ -480,7 +484,7 @@ const handleCloseDrawer = () => {
 
   .layout-main {
     position: absolute;
-    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    background: linear-gradient(135deg, var(--el-fill-color-light) 0%, var(--el-fill-color) 100%);
     border: 1px solid var(--el-border-color-lighter);
     border-radius: 2px;
   }
@@ -572,43 +576,6 @@ const handleCloseDrawer = () => {
   }
 }
 
-/* 深色模式适配 */
-.dark {
-  .action-footer {
-    background: var(--el-bg-color);
-    border-top-color: var(--el-border-color);
-  }
-
-  .action-card {
-    background: var(--el-fill-color-extra-light);
-  }
-
-  .layout-item {
-    background: linear-gradient(145deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%);
-    border-color: var(--el-border-color);
-
-    &:hover {
-      background: linear-gradient(
-        145deg,
-        var(--el-bg-color-page) 0%,
-        var(--el-color-primary-light-9) 100%
-      );
-    }
-
-    &.is-active {
-      background: linear-gradient(
-        145deg,
-        var(--el-color-primary-light-9) 0%,
-        var(--el-color-primary-light-8) 100%
-      );
-    }
-
-    .layout-main {
-      background: linear-gradient(135deg, var(--el-fill-color) 0%, var(--el-fill-color-light) 100%);
-    }
-  }
-}
-
 :deep(.copy-config-dialog) {
   .el-message-box__content {
     max-height: 400px;

src/views/demo/dict-sync.vue

@@ -281,7 +281,7 @@ pre {
   overflow-y: auto;
   overflow-wrap: break-word;
   white-space: pre-wrap;
-  background-color: #f8f9fa;
+  background-color: var(--el-fill-color-light);
   border-radius: 4px;
 }
 
@@ -290,7 +290,7 @@ pre {
   padding: 8px;
   overflow-y: auto;
   font-size: 12px;
-  background-color: #f8f9fa;
+  background-color: var(--el-fill-color-light);
   border-radius: 4px;
 }
 
@@ -300,10 +300,10 @@ pre {
 
 .text-muted {
   font-size: 0.9em;
-  color: #909399;
+  color: var(--el-text-color-secondary);
 }
 
 .border-top {
-  border-top: 1px solid #ebeef5;
+  border-top: 1px solid var(--el-border-color-light);
 }
 </style>

src/views/demo/signature.vue

@@ -26,6 +26,7 @@ import FileAPI from "@/api/file";
 const imgUrl = ref("");
 const canvas = ref();
 let ctx: CanvasRenderingContext2D;
+let strokeColor = "#000";
 
 // 正在绘制中，用来控制 move 和 end 事件
 let painting = false;
@@ -78,6 +79,8 @@ const onEventEnd = () => {
 
 onMounted(() => {
   ctx = canvas.value.getContext("2d") as CanvasRenderingContext2D;
+  const rootStyle = getComputedStyle(document.documentElement);
+  strokeColor = rootStyle.getPropertyValue("--el-text-color-primary").trim() || "#000";
 });
 const handleToFile = async () => {
   if (isCanvasBlank(canvas.value)) {
@@ -148,7 +151,7 @@ function paint(
   ctx.beginPath();
   ctx.globalAlpha = 1;
   ctx.lineWidth = 2;
-  ctx.strokeStyle = "#000";
+  ctx.strokeStyle = strokeColor;
   ctx.moveTo(startX, startY);
   ctx.lineTo(endX, endY);
   ctx.closePath();
@@ -160,10 +163,10 @@ function paint(
   width: 100%;
   height: 100%;
   padding: 0 20px;
-  background-color: #fff;
+  background-color: var(--el-bg-color);
 
   canvas {
-    border: 1px solid #e6e6e6;
+    border: 1px solid var(--el-border-color);
   }
 
   header {