未签名按钮置灰

src/components/ConfirmButton.css

@@ -32,4 +32,20 @@
   text-align: center;
   white-space: nowrap;
   line-height: 51px;
+}
+
+.confirm-button--disabled {
+  filter: grayscale(1);
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.confirm-button--disabled:hover {
+  transform: none;
+  opacity: 0.5;
+}
+
+.confirm-button--disabled:active {
+  transform: none;
 }

src/components/ConfirmButton.tsx

@@ -4,11 +4,26 @@ import "./ConfirmButton.css";
 interface ConfirmButtonProps {
   text: string;
   onClick?: () => void;
+  disabled?: boolean;
 }
 
-const ConfirmButton: React.FC<ConfirmButtonProps> = ({ text, onClick }) => {
+const ConfirmButton: React.FC<ConfirmButtonProps> = ({
+  text,
+  onClick,
+  disabled = false,
+}) => {
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+
   return (
-    <div className="confirm-button" onClick={onClick}>
+    <div
+      className={`confirm-button${disabled ? " confirm-button--disabled" : ""}`}
+      onClick={handleClick}
+      aria-disabled={disabled}
+    >
       <span className="confirm-button-text">{text}</span>
     </div>
   );

src/pages/UI7/UI7.tsx

@@ -101,6 +101,7 @@ const UI7: React.FC = () => {
   const [isDrawing, setIsDrawing] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
+  const [hasSignature, setHasSignature] = useState(false);
   const [currentPdfPageCount, setCurrentPdfPageCount] = useState(0);
 
   const totalRequiredSignatures = pdfInfoList.length + 1;
@@ -240,6 +241,10 @@ const UI7: React.FC = () => {
     setCurrentPdfPageCount(0);
   }, [currentStep, currentPdfFile]);
 
+  useEffect(() => {
+    setHasSignature(false);
+  }, [currentStep]);
+
   const resetCountdown = useCallback(() => {
     setCountdown(5);
     setShowWaitButton(true);
@@ -327,6 +332,7 @@ const UI7: React.FC = () => {
       ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, midX, midY);
       ctx.stroke();
       lastPointRef.current = { x, y };
+      setHasSignature(true);
     },
     [getCoordinates, isDrawing]
   );
@@ -355,6 +361,7 @@ const UI7: React.FC = () => {
     ctx.lineWidth = 10;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
+    setHasSignature(false);
   }, []);
 
   const isCanvasBlank = useCallback(() => {
@@ -586,6 +593,7 @@ const UI7: React.FC = () => {
               <ConfirmButton
                 text={isSubmitting ? "提交中..." : "确定"}
                 onClick={handleConfirm}
+                disabled={!hasSignature || isSubmitting}
               />
             )}
           </div>