Svelte/SvelteKit组件切换失效，点击设置图标无响应

问题核心 #

你在SvelteKit的+page.svelte里手动编写了<body>标签，这是错误的——SvelteKit会自动生成页面的根DOM结构，自定义的<body>会导致Svelte的事件绑定机制失效，所以点击按钮完全没有反应，控制台也不会输出日志。

修复步骤 #

1. 移除自定义<body>标签，将原body上的样式和类名迁移到最外层的div元素上：

<script>
    import Settings from '../../components/Settings.svelte';

    let showSettings = false;

    function toggleSettings() {
        showSettings = !showSettings;
        console.log('Toggle Settings Clicked. showSettings:', showSettings);
    }
</script>

<style>
    /* 你的样式 */
</style>

<!-- 把原body的属性移到这里 -->
<div class="container-fluid min-vh-100 d-flex flex-column text-white" style="width: 80%; background-color: #000000;">
    <div class="row flex-grow-1">
        <div class="col-md-4 border-right" id="sidebar-container">
            <div class="p-3">
                <div class="d-flex align-items-center justify-content-between">
                    <h3 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; color: #e7e9ea;">Messages</h3>
                    <div class="fs-6 text-white">
                        <button id="gear-icon" class="icon-button" on:click={toggleSettings} aria-label="Toggle Settings">
                            <i class="bi bi-gear me-3"></i>
                        </button>
                        <i class="bi bi-envelope-at"></i>
                    </div>
                </div>
                <br id="break-tag">
                <div id="welcome-message">
                    <h4 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 31px; line-height: 36px; color: #e7e9ea;">Welcome to your inbox!</h4>
                    <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; line-height: 20px; color: #71767b;">Search for a user and have private conversations with them.</p>
                    <button class="btn p-3" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 17px; line-height: 20px; color: #ffffff; background-color: #1d9bf0; border-radius: 50px;">Write a message</button>
                </div>
            </div>
        </div>
        {#if showSettings}
            <Settings />
        {:else}
            <div id="content-column" class="col-md-8 border-right d-flex flex-column align-items-center justify-content-center">
                <div class="p-3 text-center">
                    <h3 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 31px; line-height: 36px; color: #e7e9ea;">Select a message</h3>
                    <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; line-height: 20px; color: #71767b;">Choose from your existing conversations, or start a new one.</p>
                    <button class="btn p-3" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 17px; line-height: 20px; color: #ffffff; background-color: #1d9bf0; border-radius: 50px;">New message</button>
                </div>
            </div>
        {/if}
    </div>
</div>

修改后，按钮的on:click事件就能正常触发，控制台也会打印状态日志。

补充：Settings组件返回功能实现 #

要在Settings组件内点击返回关闭组件，可通过props传递切换函数实现：

1. 在+page.svelte中给Settings组件传参：

{#if showSettings}
    <Settings onClose={toggleSettings} />
{:else}
    <!-- 原内容 -->
{/if}

2. 在Settings.svelte中接收props并绑定返回按钮事件：

<script>
    export let onClose;
</script>

<!-- Settings组件内容 -->
<button on:click={onClose}>返回</button>

内容的提问来源于stack exchange，提问作者hypedstan