Svelte
Svelte 是一个以编译器为核心的前端框架，把组件代码转换成浏览器可执行的 JavaScript。它让你用组件和响应式状态组织交互界面，减少手动更新页面的工作，例如让筛选条件变化后自动刷新商品列表。
你可能会说：「我想做一个交互式后台，改了筛选条件，列表和统计数字就能一起更新。」
读之前建议先了解
动手看看切换筛选条件，更新商品列表
我们写一个商品筛选组件：用状态记录筛选条件，用模板描述列表。本例的商品数据已在本地，不需要请求接口。
要点Svelte 怎样把数据变化变成界面变化？
- 1
把界面拆成可复用组件
你可以把搜索栏、结果列表和详情面板分别写成组件。一个 Svelte 组件文件通常放模板、逻辑和样式，这样修改搜索栏时，就更容易找到相关代码，也能在别的页面复用它。
- 2
构建时编译组件代码
浏览器不能直接运行 Svelte 组件文件，所以构建工具会调用编译器，把它转换成可执行代码。编译器会生成界面创建和更新逻辑，但这不意味着应用完全没有运行时支持。
- 3
用响应式状态驱动界面
当你把筛选条件定义为响应式状态，依赖它的界面就能随变化更新。Svelte 5 可用 $state 声明这类状态；让 AI 写代码时说明版本，有助于避免混用不同版本的写法。
容易混淆的地方
Svelte 和 React 都能用组件组织界面，但 Svelte 更强调在编译阶段生成更新代码，React 通常通过运行时渲染与协调更新界面。SvelteKit 则是基于 Svelte 的应用框架，补上路由、服务端渲染等能力；选了 Svelte，不等于这些能力已经自动具备。
什么时候用
适合用
- 从零开发订单后台，把筛选器、表格和编辑面板拆成可复用组件。
- 制作 AI 聊天工具，让消息列表、生成状态和输入区随数据变化更新。
- 开发带实时预览的配置工具，让表单修改立即反映到预览区域。
不适合用
- 只做没有复杂交互的公告页，直接用 HTML 和 CSS 通常就够了。
- 给现有 React 后台加一个普通页面，沿用 React 比引入第二套框架更省维护成本。
- 开发需要原生移动控件的手机应用，可优先考虑 Swift、Kotlin 或 Flutter。
练一练选一个答案，看看解释
你用 Svelte 做订单后台。用户切换“只看待处理”后，希望列表和数量同步变化，同时保留正在编辑的备注。哪种方案最合适？
让 AI 帮你做复制给 AI Agent 直接用
请用 Svelte 5 做一个订单筛选页面，把筛选栏、数量统计和列表拆成组件，用响应式状态同步更新界面，保留未提交的备注。先检查项目版本与现有结构；如果需要新增路由，请说明是否使用 SvelteKit，并给出构建和交互验证步骤。