Mapagmataas's questions

在svelte 5 的 shadcn ui 端口中-选择组件（使用bitsui select）bind:value 要求 state(string)，但 Writable<string> 也同样有效，因此 bind:value={$theme 或 $language} 可以正确获取和设置值。但我的设置组件可以使用作为 props 传递给它的附加设置，并将 store 作为对象元素之一，我无法从对象中正确获取 writable 工作。

<script lang="ts" module>
    interface SelectItem {
        label: string;
        labelRu: string;
        value: string;
    }

    export interface Setting {
        store: Writable<string>;
        name: string;
        nameRu: string;
        values: SelectItem[];
    }
</script>

<script lang="ts">
    import * as Select from '$shared/components/ui/select/index.js';

    import { theme } from '$shared/stores/theme';
    import { language } from '$shared/stores/language';
    import { derived, type Writable } from 'svelte/store';

    let { additionalSettings = null }: { additionalSettings?: { [key: string]: Setting } | null } =
        $props();
    let clazz = $state('');
    export { clazz as class };

    let settings: { [key: string]: Setting } = {
        theme: {
            store: theme,
            name: 'Theme',
            nameRu: 'Тема',
            values: [
                { label: 'Light', labelRu: 'Светлая', value: 'light' },
                { label: 'Dark', labelRu: 'Темная', value: 'dark' }
            ]
        },
        language: {
            store: language,
            name: 'Lingo',
            nameRu: 'Язык',
            values: [
                { label: 'English', labelRu: 'Английский', value: 'en' },
                { label: 'Russian', labelRu: 'Русский', value: 'ru' }
            ]
        }
    };

    settings = { ...settings, ...(additionalSettings ?? {}) };

    const settingLabel = Object.fromEntries(
        Object.entries(settings).map(([key, setting]) => [
            key,
            derived([setting.store, language], ([$store, $language]) => {
                const selectedValue = setting.values.find((value) => value.value === $store);
                return $language === 'ru' ? selectedValue?.labelRu : selectedValue?.label;
            })
        ])
    );
</script>

<div
    class="{clazz !== '' ? clazz + ' ' : ''}flex min-w-[240px] flex-col space-y-4 px-2 py-4 text-sm"
>
    {#each Object.entries(settings) as [key, setting]}
        <div class="flex items-center space-x-2">
            <p class="min-w-[48px]">{$language === 'ru' ? setting.nameRu : setting.name}:</p>
            <Select.Root type="single" name={key} bind:value={$setting.store}>
                <Select.Trigger>
                    {#await settingLabel[key] then label}
                        {(label ?? $language === 'ru')
                            ? 'Выберите ' + setting.nameRu
                            : 'Select ' + setting.name}
                    {/await}
                </Select.Trigger>
                <Select.Content>
                    {#each setting.values as value}
                        <Select.Item value={value.value}>
                            {$language === 'ru' ? value.labelRu : value.label}
                        </Select.Item>
                    {/each}
                </Select.Content>
            </Select.Root>
        </div>
    {/each}
</div>

我是 Svelte 5 反应功能的新手，所以也许我问的是一些容易修复的问题。对此抱歉(