🚚 mv：将libs目录下的组件移至components子目录

为了更好地组织项目结构，将libs目录下的组件文件移动到新的libs/components子目录中。
同时，更新了setting-example.svelte组件中SettingPanel的导入路径，以反映新的文件位置。

src/libs/components/b3-typography.svelte

@@ -0,0 +1,3 @@
+<div class="item__readme b3-typography">
+    <slot/>
+</div>

src/libs/components/item-input.svelte

@@ -0,0 +1,108 @@
+<!--
+ 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
+    export let placeholder: string = "";
+    export let options: { [key: string | number]: string } = {};
+    export let slider: {
+        min: number;
+        max: number;
+        step: number;
+    } = { min: 0, max: 100, step: 1 };
+    export let button: {
+        label: string;
+        callback?: () => void;
+    } = { label: value, callback: () => {} };
+
+    const dispatch = createEventDispatcher();
+
+    function click() {
+        button?.callback();
+        dispatch("click", { key: key });
+    }
+
+    function changed() {
+        dispatch("changed", { key: key, value: value });
+    }
+</script>
+
+{#if type === "checkbox"}
+    <!-- Checkbox -->
+    <input
+        class="b3-switch fn__flex-center"
+        id={key}
+        type="checkbox"
+        bind:checked={value}
+        on:change={changed}
+    />
+{:else if type === "textinput"}
+    <!-- Text Input -->
+    <input
+        class="b3-text-field fn__flex-center fn__size200"
+        id={key}
+        {placeholder}
+        bind:value={value}
+        on:change={changed}
+    />
+{:else if type === "textarea"}
+    <textarea
+        class="b3-text-field fn__block"
+        style="resize: vertical; height: 10em; white-space: nowrap;"
+        bind:value={value}
+        on:change={changed}
+    />
+{:else if type === "number"}
+    <input
+        class="b3-text-field fn__flex-center fn__size200"
+        id={key}
+        type="number"
+        bind:value={value}
+        on:change={changed}
+    />
+{:else if type === "button"}
+    <!-- Button Input -->
+    <button
+        class="b3-button b3-button--outline fn__flex-center fn__size200"
+        id={key}
+        on:click={click}
+    >
+        {button.label}
+    </button>
+{:else if type === "select"}
+    <!-- Dropdown select -->
+    <select
+        class="b3-select fn__flex-center fn__size200"
+        id="iconPosition"
+        bind:value={value}
+        on:change={changed}
+    >
+        {#each Object.entries(options) as [value, text]}
+            <option {value}>{text}</option>
+        {/each}
+    </select>
+{:else if type == "slider"}
+    <!-- Slider -->
+    <div class="b3-tooltips b3-tooltips__n" aria-label={value}>
+        <input
+            class="b3-slider fn__size200"
+            id="fontSize"
+            min={slider.min}
+            max={slider.max}
+            step={slider.step}
+            type="range"
+            bind:value={value}
+            on:change={changed}
+        />
+    </div>
+{/if}

src/libs/components/item-wrap.svelte

@@ -0,0 +1,51 @@
+<!--
+ 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
+ Description  : The setting item container
+-->
+<script lang="ts">
+    export let title: string; // Displayint Setting Title
+    export let description: string; // Displaying Setting Text
+    export let direction: 'row' | 'column' = 'column';
+</script>
+
+{#if direction === "row"}
+    <div class="item-wrap b3-label" data-key="CustomCSS">
+        <div class="fn__block">
+            <span class="title">{title}</span>
+            <div class="b3-label__text">{@html description}</div>
+            <div class="fn__hr"></div>
+            <slot />
+        </div>
+    </div>
+{:else}
+    <div class="item-wrap fn__flex b3-label config__item">
+        <div class="fn__flex-1">
+            <span class="title">{title}</span>
+            <div class="b3-label__text">
+                {@html description}
+            </div>
+        </div>
+        <span class="fn__space" />
+        <slot />
+    </div>
+{/if}
+
+<style>
+    span.title {
+        font-weight: bold;
+        color: var(--b3-theme-primary)
+    }
+    .item-wrap.b3-label {
+        box-shadow: none !important;
+        padding-bottom: 16px;
+        margin-bottom: 16px;
+    }
+
+    .item-wrap.b3-label:not(:last-child) {
+        border-bottom: 1px solid var(--b3-border-color);
+    }
+</style>

src/libs/components/setting-panel.svelte

@@ -0,0 +1,52 @@
+<!--
+ Copyright (c) 2023 by frostime All Rights Reserved.
+ Author       : frostime
+ Date         : 2023-07-01 19:23:50
+ FilePath     : /src/libs/setting-panel.svelte
+ LastEditTime : 2024-06-08 18:25:34
+ Description  : 
+-->
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import ItemWrap from "./item-wrap.svelte";
+    import InputItem from "./item-input.svelte";
+
+    export let group: string;
+    export let settingItems: ISettingItem[];
+    export let display: boolean = true;
+
+    const dispatch = createEventDispatcher();
+
+    function onClick( {detail}) {
+        dispatch("click", { key: detail.key });
+    }
+    function onChanged( {detail}) {
+        dispatch("changed", {group: group, ...detail});
+    }
+
+    $: fn__none = display ? "" : "fn__none";
+
+</script>
+
+<div class="config__tab-container {fn__none}" data-name={group}>
+    <slot />
+    {#each settingItems as item (item.key)}
+        <ItemWrap
+            title={item.title}
+            description={item.description}
+            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>