重构

apps/admin/src/components/RobotVerify.vue

@@ -22,18 +22,18 @@ function drawCaptcha() {
   const ctx = canvas.getContext('2d');
   if (!ctx) return;
 
-  ctx.fillStyle = '#7c3aed';
+  ctx.fillStyle = '#3d413b';
   ctx.fillRect(0, 0, w, h);
 
   for (let i = 0; i < 28; i++) {
-    ctx.fillStyle = `rgba(255,255,255,${0.15 + Math.random() * 0.35})`;
+    ctx.fillStyle = `rgba(255,255,255,${0.2 + Math.random() * 0.32})`;
     ctx.beginPath();
     ctx.arc(Math.random() * w, Math.random() * h, Math.random() * 2.2, 0, Math.PI * 2);
     ctx.fill();
   }
 
   for (let i = 0; i < 5; i++) {
-    ctx.strokeStyle = `rgba(255,255,255,${0.2 + Math.random() * 0.3})`;
+    ctx.strokeStyle = `rgba(255,255,255,${0.22 + Math.random() * 0.26})`;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(Math.random() * w, Math.random() * h);
@@ -98,16 +98,21 @@ defineExpose({ validate, refresh });
   flex: 1;
   min-width: 0;
   padding: 0 14px;
-  border: none;
+  border: 1px solid var(--border);
+  border-right: none;
   border-radius: 8px 0 0 8px;
   background: #ffffff;
-  color: #111;
+  color: var(--text);
   font-size: 15px;
-  font-weight: 500;
+  font-weight: 650;
   outline: none;
 }
 .captcha-input::placeholder {
-  color: #9ca3af;
+  color: #aaa49a;
+}
+.captcha-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(31, 35, 32, 0.08);
 }
 .captcha-canvas {
   flex-shrink: 0;
@@ -116,5 +121,8 @@ defineExpose({ validate, refresh });
   cursor: pointer;
   display: block;
   border-radius: 0 8px 8px 0;
+  border: 1px solid #3d413b;
+  border-left: none;
+  box-sizing: border-box;
 }
 </style>