Alpine V3 新改动让弱智AI自我博弈半小时

我让 AI 写了个搜索框
搜索框部分：

<div x-data="{
        init() {
            this.$watch('$store.search.open', value => {
                document.body.style.overflow = value ? 'hidden' : '';
                if (value) {
                    this.$nextTick(() => this.$refs.searchInput?.focus());
                }
            });
        }
    }" class="search-modal" :class="{ '!hidden': !$store.search.open }">
        <div class="search-overlay" x-show="$store.search.open" x-transition:enter="searchFadeIn"></div>
        <div class="search-container" x-show="$store.search.open" x-transition:enter="searchSlideIn">
            <div class="search-box" @click.outside="$store.search.close()" @keydown.escape.window="$store.search.close()" @keydown.window.ctrl.k.prevent="$store.search.toggle()">
                <div class="search-input-wrapper">
                    <?php echo XIcon::get('search', ['class' => 'search-icon w-5 h-5']); ?>
                    <form action="<?php $this->options->siteUrl(); ?>" method="get" @submit="$store.search.close()">
                        <input type="search" name="s" placeholder="搜索文章..." class="search-input" autocomplete="off" x-ref="searchInput">
                    </form>
                    <button class="search-close-btn" aria-label="关闭搜索" @click="$store.search.close()">
                        <?php echo XIcon::get('x-mark', ['class' => 'w-5 h-5']); ?>
                    </button>
                </div>
                <div class="search-hint">
                    <span class="hint-key">ESC</span> 关闭
                </div>
            </div>
        </div>
    </div>

按钮部分：

<button @click="$store.search.toggle()" class="search-btn p-2 text-gray-600 dark:text-gray-300 hover:text-theme-color transition-colors" aria-label="搜索">
    <?php echo XIcon::get('search', ['class' => 'w-5 h-5']); ?>
</button>

因为我用的是 Claude Code + glm-4.7(GLM Code Lite)，这弱智 AI 来回调也没解决。

然后我丢给了 Grok，直接告诉我Alpine 的 directives（如 @click、x-show 等）只在有 x-data 的作用域内生效，我直接给body加了个x-data完美解决。