Merge pull request #146 from alley-rs/dev

feat: 改进设置组件布局
alley-rs · Dec 27, 2024 · a23bce6 · a23bce6
2 parents 9f9a056 + 8b33571
commit a23bce6
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/settings/DarkMode.tsx b/src/components/settings/DarkMode.tsx
@@ -24,7 +24,7 @@ const DarkMode = (props: DarkModeProps) => {
     )),
   );
   return (
-    <LazySpace gap={16}>
+    <LazySpace gap={16} justify="between">
       <LazyLabel>暗色模式</LazyLabel>
 
       <LazySpace gap={8}>{items()}</LazySpace>

diff --git a/src/components/settings/Transparent.tsx b/src/components/settings/Transparent.tsx
@@ -1,3 +1,4 @@
+import { AiOutlineCheck, AiOutlineClose } from "solid-icons/ai";
 import { LazyLabel, LazySpace, LazySwitch } from "~/lazy";
 
 interface TransparentProps {
@@ -7,10 +8,16 @@ interface TransparentProps {
 
 const Transparent = (props: TransparentProps) => {
   return (
-    <LazySpace gap={16}>
+    <LazySpace gap={16} justify="between">
       <LazyLabel>窗口透明</LazyLabel>
 
-      <LazySwitch checked={props.enabled} setChecked={props.onSwitch} />
+      <LazySwitch
+        checked={props.enabled}
+        setChecked={props.onSwitch}
+        size="small"
+        checkedChild={<AiOutlineCheck />}
+        uncheckedChild={<AiOutlineClose />}
+      />
     </LazySpace>
   );
 };

diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
@@ -94,7 +94,7 @@ const Settings = () => {
       onClose={() => { }}
       maskClosable={false}
     >
-      <LazyFlex direction="vertical" gap={8} style={{ "min-width": "400px" }}>
+      <LazyFlex direction="vertical" gap={16} style={{ "min-width": "400px" }}>
         <Transparent
           enabled={!!lsarConfig()?.transparent}
           onSwitch={async (enabled) => {
@@ -124,7 +124,7 @@ const Settings = () => {
           }
         />
 
-        <LazySpace>
+        <LazySpace justify="between">
           <LazyLabel>播放器绝对路径</LazyLabel>
 
           <Show when={lsarConfig()?.player.path}>