⚡️ perf: 优化各个组件

src/libs/components/item-input.svelte

@@ -1,18 +1,10 @@
-<!--
- Copyright (c) 2024 by frostime. All Rights Reserved.
- Author       : frostime
- Date         : 2024-06-07 18:49:52
- FilePath     : /src/libs/components/input-item.svelte
- LastEditTime : 2024-06-07 20:07:58
- Description  : 
--->
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
     export let type: string; // Setting Type
     export let key: string;
     export let value: any;
 
-    //Optional
+    // Optional parameters
     export let placeholder: string = "";
     export let options: { [key: string | number]: string } = {};
     export let slider: {
@@ -24,6 +16,8 @@
         label: string;
         callback?: () => void;
     } = { label: value, callback: () => {} };
+    export let fnSize: boolean = true; // If the form input is used within setting panel context, it is usually given a fixed width by a class named "fn__size200".
+    export let style: string = ""; // Custom style
 
     const dispatch = createEventDispatcher();
 
@@ -45,47 +39,61 @@
         type="checkbox"
         bind:checked={value}
         on:change={changed}
+        style={style}
     />
 {:else if type === "textinput"}
     <!-- Text Input -->
     <input
-        class="b3-text-field fn__flex-center fn__size200"
+        class:b3-text-field={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id={key}
         {placeholder}
         bind:value={value}
         on:change={changed}
+        style={style}
     />
 {:else if type === "textarea"}
     <textarea
         class="b3-text-field fn__block"
-        style="resize: vertical; height: 10em; white-space: nowrap;"
+        style={`resize: vertical; height: 10em; white-space: nowrap; ${style}`}
         bind:value={value}
         on:change={changed}
     />
 {:else if type === "number"}
     <input
-        class="b3-text-field fn__flex-center fn__size200"
+        class:b3-text-field={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id={key}
         type="number"
         bind:value={value}
         on:change={changed}
+        style={style}
     />
 {:else if type === "button"}
     <!-- Button Input -->
     <button
-        class="b3-button b3-button--outline fn__flex-center fn__size200"
+        class:b3-button={true}
+        class:b3-button--outline={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id={key}
         on:click={click}
+        style={style}
     >
         {button.label}
     </button>
 {:else if type === "select"}
     <!-- Dropdown select -->
     <select
-        class="b3-select fn__flex-center fn__size200"
+        class:b3-select={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id="iconPosition"
         bind:value={value}
         on:change={changed}
+        style={style}
     >
         {#each Object.entries(options) as [value, text]}
             <option {value}>{text}</option>
@@ -95,7 +103,8 @@
     <!-- Slider -->
     <div class="b3-tooltips b3-tooltips__n" aria-label={value}>
         <input
-            class="b3-slider fn__size200"
+            class:b3-slider={true}
+            class:fn__size200={fnSize}
             id="fontSize"
             min={slider.min}
             max={slider.max}
@@ -103,6 +112,7 @@
             type="range"
             bind:value={value}
             on:change={changed}
+            style={style}
         />
     </div>
 {/if}

src/libs/components/item-wrap.svelte

@@ -2,8 +2,8 @@
  Copyright (c) 2024 by frostime. All Rights Reserved.
  Author       : frostime
  Date         : 2024-06-01 20:03:50
- FilePath     : /src/libs/setting-item-wrap.svelte
- LastEditTime : 2024-06-07 19:14:28
+ FilePath     : /src/libs/components/item-wrap.svelte
+ LastEditTime : 2024-07-19 15:28:57
  Description  : The setting item container
 -->
 <script lang="ts">
@@ -18,7 +18,9 @@
             <span class="title">{title}</span>
             <div class="b3-label__text">{@html description}</div>
             <div class="fn__hr"></div>
-            <slot />
+            <div style="display: flex; flex-direction: column; gap: 5px; position: relative;">
+                <slot />
+            </div>
         </div>
     </div>
 {:else}