fix: 自定义按键布局

src/components/scroll.vue

@@ -87,7 +87,7 @@ function draw() {
 /**
  * 计算元素总长度
  */
-async function calHeight(first: boolean) {
+async function calHeight(first: boolean = false) {
     if (!first) {
         await sleep(20);
     }
@@ -207,6 +207,7 @@ onMounted(async () => {
 
     window.addEventListener('resize', resize);
     await calHeight(true);
+    await calHeight();
     draw();
 });
 

src/core/main/init/settings.tsx

@@ -38,9 +38,14 @@ function BooleanSetting(props: SettingComponentProps) {
     };
 
     return (
-        <div>
+        <div class="editor-boolean">
             <span>当前 {item.value ? '开启' : '关闭'}</span>
-            <Button type="primary" size="large" onClick={changeValue}>
+            <Button
+                class="boolean-button"
+                type="primary"
+                size="large"
+                onClick={changeValue}
+            >
                 {item.value ? '开启' : '关闭'}设置
             </Button>
         </div>
@@ -55,7 +60,7 @@ function NumberSetting(props: SettingComponentProps) {
     };
 
     return (
-        <div>
+        <div class="editor-number">
             <span> 修改设置： </span>
             <InputNumber
                 class="number-input"
@@ -81,10 +86,10 @@ function showSpecialSetting(id: string, vBind?: any) {
 }
 
 function HotkeySetting(props: SettingComponentProps) {
-    // todo: hotkey.vue
     return (
-        <div>
+        <div style="display: flex; justify-content: center">
             <Button
+                style="font-size: 75%"
                 type="primary"
                 size="large"
                 onClick={() =>
@@ -102,8 +107,9 @@ function HotkeySetting(props: SettingComponentProps) {
 function ToolbarSetting(props: SettingComponentProps) {
     // todo: toolSetting.vue
     return (
-        <div>
+        <div style="display: flex; justify-content: center">
             <Button
+                style="font-size: 75%"
                 type="primary"
                 size="large"
                 onClick={() => showSpecialSetting('toolSetting')}

src/ui/hotkey.vue

@@ -193,14 +193,14 @@ onUnmounted(() => {
 }
 
 .hotkey-group-one {
-    margin: 2px 0;
+    margin: 0 0 4px 0;
 }
 
 .hotkey-one {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin: 2% 3%;
+    margin: 0 3% 2% 3%;
     white-space: nowrap;
 }
 

src/ui/settings.vue

@@ -261,6 +261,31 @@ onUnmounted(() => {
     height: 100%;
 }
 
+.setting-info::v-deep(.editor-boolean) {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 10% 0 5%;
+
+    .boolean-button {
+        font-size: 75%;
+    }
+}
+
+.setting-info::v-deep(.editor-number) {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 10% 0 5%;
+
+    .number-input {
+        font-size: 80%;
+        width: 40%;
+    }
+}
+
 .setting-info {
     width: 25vw;
 
@@ -269,35 +294,10 @@ onUnmounted(() => {
         margin: 2% 0;
     }
 
-    .editor-boolean {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
-        padding: 0 10% 0 5%;
-
-        .boolean-button {
-            font-size: 75%;
-        }
-    }
-
     .info-text {
         font-size: 85%;
         min-height: 30%;
     }
-
-    .editor-number {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
-        padding: 0 10% 0 5%;
-
-        .number-input {
-            font-size: 80%;
-            width: 40%;
-        }
-    }
 }
 
 @media screen and (max-width: 600px) {