From 879be290d47aa5ba245e32f34c13d4d43107f970 Mon Sep 17 00:00:00 2001
From: HIsheR <shawn1440982358@163.com>
Date: Mon, 26 Oct 2026 16:14:59 +0800
Subject: [PATCH] =?UTF-8?q?iter(g168):=20=E8=A1=A5=E9=85=8D=E6=96=B9=2011?=
 =?UTF-8?q?=20=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 llms-full.txt                 | 28 ++++++++++++++++++++++++++++
 packages/tools/cli/recipes.md | 28 ++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/llms-full.txt b/llms-full.txt
index 3c6f805..c9134ae 100644
--- a/llms-full.txt
+++ b/llms-full.txt
@@ -2325,6 +2325,34 @@ floatButton({ icon: '🌗', label: '切换主题', onClick: () => dark(!dark())
 - 初值顺序是「先 localStorage、再 prefers-color-scheme」；反过来会让用户的手动选择被系统偏好覆盖。
 - 同步设置 `color-scheme`，否则原生控件（日期选择、滚动条）在暗色下仍是白底。
 
+## 配方 11：数据看板筛选区（区间滑块 + 日期预设 + 分组下拉）
+
+```ts
+const price = signal(200);        // 价格下限
+const priceTop = signal(800);     // 价格上限
+const from = signal('');          // 日期区间起点
+const to = signal('');            // 日期区间终点
+const stack = signal('');         // 技术栈（分组下拉）
+
+grid({ columns: 3, gutter: 'md' },
+  slider({ value: price, end: priceTop, range: true, min: 0, max: 2000, step: 50 }), // 双滑块：两端都受控
+  datePicker({ range: true, value: from, end: to, presets: [{ label: '最近 7 天', days: 7 }, { label: '最近 30 天', days: 30 }] }),
+  select({ value: stack, options: [
+    { value: 'vue', label: 'Vue 3', group: '前端框架' },
+    { value: 'react', label: 'React 19', group: '前端框架' },
+    { value: 'node', label: 'Node.js 22', group: '服务端运行时' },
+    { value: 'deno', label: 'Deno 2', group: '服务端运行时' },
+  ] }),
+);
+
+dataTable({ columns, data: rows, selectable: true }); // 表格只吃派生出来的查询条件
+```
+
+要点：
+- 三个筛选控件全部受控于信号：查询参数从信号派生（`computed`），表格不另存一份筛选状态，否则「重置」要逐处清。
+- 区间类控件都自带先后与越界修正：`slider` 的 `value`/`end` 越界会压平，`datePicker` 点早了会自动交换两端——调用方不要再写 clamp。
+- 长候选集给 `option.group` 分块、常用时间段给 `presets`（`days` 相对今天，跨月跨年由组件算），比让用户逐行扫列表更快。
+
 ## 通用约定
 
 - 状态一律放信号（`signal` / `computed`），组件只读写信号，不持有业务数据副本。
diff --git a/packages/tools/cli/recipes.md b/packages/tools/cli/recipes.md
index bbdfc07..11ec352 100644
--- a/packages/tools/cli/recipes.md
+++ b/packages/tools/cli/recipes.md
@@ -202,6 +202,34 @@ floatButton({ icon: '🌗', label: '切换主题', onClick: () => dark(!dark())
 - 初值顺序是「先 localStorage、再 prefers-color-scheme」；反过来会让用户的手动选择被系统偏好覆盖。
 - 同步设置 `color-scheme`，否则原生控件（日期选择、滚动条）在暗色下仍是白底。
 
+## 配方 11：数据看板筛选区（区间滑块 + 日期预设 + 分组下拉）
+
+```ts
+const price = signal(200);        // 价格下限
+const priceTop = signal(800);     // 价格上限
+const from = signal('');          // 日期区间起点
+const to = signal('');            // 日期区间终点
+const stack = signal('');         // 技术栈（分组下拉）
+
+grid({ columns: 3, gutter: 'md' },
+  slider({ value: price, end: priceTop, range: true, min: 0, max: 2000, step: 50 }), // 双滑块：两端都受控
+  datePicker({ range: true, value: from, end: to, presets: [{ label: '最近 7 天', days: 7 }, { label: '最近 30 天', days: 30 }] }),
+  select({ value: stack, options: [
+    { value: 'vue', label: 'Vue 3', group: '前端框架' },
+    { value: 'react', label: 'React 19', group: '前端框架' },
+    { value: 'node', label: 'Node.js 22', group: '服务端运行时' },
+    { value: 'deno', label: 'Deno 2', group: '服务端运行时' },
+  ] }),
+);
+
+dataTable({ columns, data: rows, selectable: true }); // 表格只吃派生出来的查询条件
+```
+
+要点：
+- 三个筛选控件全部受控于信号：查询参数从信号派生（`computed`），表格不另存一份筛选状态，否则「重置」要逐处清。
+- 区间类控件都自带先后与越界修正：`slider` 的 `value`/`end` 越界会压平，`datePicker` 点早了会自动交换两端——调用方不要再写 clamp。
+- 长候选集给 `option.group` 分块、常用时间段给 `presets`（`days` 相对今天，跨月跨年由组件算），比让用户逐行扫列表更快。
+
 ## 通用约定
 
 - 状态一律放信号（`signal` / `computed`），组件只读写信号，不持有业务数据副本。