iter(g168): 补配方 11 数据看板筛选区

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`），组件只读写信号，不持有业务数据副本。