🔨 refactor: 重构基于 svelte 的设置面板功能

src/libs/setting-panel.svelte

@@ -3,12 +3,13 @@
  Author       : frostime
  Date         : 2023-07-01 19:23:50
  FilePath     : /src/libs/setting-panel.svelte
- LastEditTime : 2024-04-27 16:46:49
+ LastEditTime : 2024-06-08 18:25:34
  Description  : 
 -->
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import SettingItem from "./setting-item.svelte";
+    import ItemWrap from "./item-wrap.svelte";
+    import InputItem from "./item-input.svelte";
 
     export let group: string;
     export let settingItems: ISettingItem[];
@@ -30,18 +31,22 @@
 <div class="config__tab-container {fn__none}" data-name={group}>
     <slot />
     {#each settingItems as item (item.key)}
-        <SettingItem
-            type={item.type}
+        <ItemWrap
             title={item.title}
             description={item.description}
-            settingKey={item.key}
-            settingValue={item.value}
-            placeholder={item?.placeholder}
-            options={item?.options}
-            slider={item?.slider}
-            button={item?.button}
-            on:click={onClick}
-            on:changed={onChanged}
-        />
+            direction={item?.direction}
+        > 
+            <InputItem
+                type={item.type}
+                key={item.key}
+                bind:value={item.value}
+                placeholder={item?.placeholder}
+                options={item?.options}
+                slider={item?.slider}
+                button={item?.button}
+                on:click={onClick}
+                on:changed={onChanged}
+            />
+        </ItemWrap>
     {/each}
 </div>