优化单双面样式

src/components/DuplexToggle.css

@@ -0,0 +1,32 @@
+.duplex-toggle {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  gap: 10px;
+  transition: opacity 0.2s ease;
+}
+
+.duplex-toggle:hover {
+  opacity: 0.8;
+}
+
+.duplex-toggle-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  font-family: NotoSansCJKsc-Medium;
+}
+
+
+.duplex-toggle-label {
+  font-size: 20px;
+  font-family: NotoSansCJKsc-Regular;
+  color: rgba(0, 45, 93, 1);
+}

src/components/DuplexToggle.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import "./DuplexToggle.css";
+
+interface DuplexToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+}
+
+const DuplexToggle: React.FC<DuplexToggleProps> = ({
+    checked,
+    onChange,
+    label = "",
+}) => {
+    const handleClick = () => {
+        onChange(!checked);
+    };
+
+    return (
+        <div className="duplex-toggle" onClick={handleClick}>
+            <div className={`duplex-toggle-icon ${checked ? "checked" : "unchecked"}`}>
+                {checked ? "双" : "单"}
+            </div>
+            <span className="duplex-toggle-label">{label}</span>
+        </div>
+    );
+};
+
+export default DuplexToggle;
+

src/pages/UI8/UI8.css

@@ -355,28 +355,4 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-}
-
-.ui8-duplex-label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  border: none;
-  background-color: inherit;
-}
-
-.ui8-duplex-checkbox {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  accent-color: rgba(0, 45, 93, 0);
-  border: none;
-  background-color: inherit;
-}
-
-.ui8-duplex-text {
-  font-size: 20px;
-  font-family: NotoSansCJKsc-Regular;
-  color: rgba(0, 45, 93, 0);
 }

src/pages/UI8/UI8.tsx

@@ -5,6 +5,7 @@ import "./UI8.css";
 import "../../assets/css/basic.css";
 import { useNavigate } from "react-router-dom";
 import ConfirmButton from "../../components/ConfirmButton";
+import DuplexToggle from "../../components/DuplexToggle";
 import ui8A from "../../assets/ui8A.png";
 import ui8B from "../../assets/ui8B.png";
 import { getDaojiandanPdf } from "../../api/hisApi";
@@ -410,6 +411,17 @@ const UI8: React.FC = () => {
             }
           }}
         >
+          <DuplexToggle
+            checked={duplexEnabled}
+            onChange={(enabled) => {
+              setDuplexEnabled(enabled);
+              localStorage.setItem(PREFERRED_DUPLEX_KEY, enabled.toString());
+              window.electronAPI?.log(
+                "info",
+                `[UI8] 双面打印设置为: ${enabled ? "启用" : "禁用"}`
+              );
+            }}
+          />
           <span>
             {printersLoading
               ? "打印机加载中..."
@@ -447,25 +459,7 @@ const UI8: React.FC = () => {
         {printerError && (
           <div className="ui8-printer-error">{printerError}</div>
         )}
-        <label className="ui8-duplex-label">
-          <input
-            type="checkbox"
-            checked={duplexEnabled}
-            onChange={(e) => {
-              const enabled = e.target.checked;
-              setDuplexEnabled(enabled);
-              localStorage.setItem(PREFERRED_DUPLEX_KEY, enabled.toString());
-              window.electronAPI?.log(
-                "info",
-                `[UI8] 双面打印设置为: ${enabled ? "启用" : "禁用"}`
-              );
-            }}
-            className="ui8-duplex-checkbox"
-          />
-        </label>
-        <div className="ui8-duplex-option">
 
-        </div>
       </div>
 
       <div className="basic-white-block">