下拉筛选为什么接近错误答案
上一篇整理了课程的一个观点：咨询申请表单，也就是填入数值后一次性提交的表格，只要顺着数值的存储流程去看，就能像数独一样解开。课程接着问：不是表单的地方也有正确答案吗？例子是服务介绍页里的案例区块，也就是页面从上到下分出的区域中，集中展示客户案例的那一块。这家公司卖 A·B·C 三种服务套餐，它们的案例以一排卡片的形式排开。
卡片列表上方有一个筛选。写着「全部」的框右侧带着向下的折角箭头，点开后展开全部·A·B·C。选 B，框里的字变成 B，只剩下 B 的案例。这种要点一下才会展开列表的选择框叫下拉框。很常见，功能也没问题。
课程问：这是正确答案还是错误答案？判断标准是这个区块的意图。案例是一种证言。这个位置的作用，是展示 A·B·C 各自的案例，让访客想要申请咨询。
可是相当多的访客，要到这个区块才第一次知道这家公司的服务分成 A·B·C。即使页面顶部的横幅，也就是大幅宣传图片区域，一张张轮播介绍了 A·B·C，没有滑动、一路往下滚的人也看不到。下拉框又把这三个名字折回框里。不点开，就只看到「全部」一个词。
所以更接近正确答案的做法，是一开始就把选项摆在外面。全部·A·B·C 并排可见，当前正在看什么也有标示。「服务是有区分的」这个区块意图，在点击之前就传达出去了。
| 形式 | 选项看得见吗 | 看得出当前在看什么吗 |
|---|---|---|
| 下拉框 | 要点开才展开 | 只有框里的一个词 |
| 摆在外面的选项 | 一开始就并排可见 | 选中的那个醒目标出 |
一张卡片里装着的数据
课程在这里又往里走了一步。这些卡片里也藏着数据。案例 1、2、3、4 号卡片，以两种方式之一出现在屏幕上。
一种是把要显示的内容直接写进页面代码。因为把值硬生生钉进代码里，所以叫硬编码。要换案例就得改代码。另一种是显示管理员录入的值。在只有运营者能进入的管理后台登记案例，这些值就进入数据库，也就是像电子表格一样把值堆起来的地方，案例列表再把值取过来随时显示。就像管理员查看咨询申请记录一样，案例通常也走这条路。
取过来的值长什么样？卡片有好几张，所以是列表。按顺序装着多个值的列表叫数组，用方括号开头，用逗号分隔。方括号里依次放着案例 1、2、3、4。
数一数一张卡片需要的值：案例标题、客户公司、图片、日期。「查看详情」按钮每张卡片都一样，所以不是值。图片如果不是固定的，就是值。要在屏幕上显示图片，需要图片存放的地址，所以每张卡片都带一个图片地址。像这样用花括号把一张卡片的值包成的一块，叫对象。
但这还不是全部。按 B 要只剩 B 的案例，所以每张卡片还需要一个值，说明它属于哪种服务，也就是屏幕上看不到的类型值。总结一下，卡片列表的数据是数组里装着多个对象的形状，每个对象里有四个看得见的值和一个看不见的值。
[
{
title: "案例 1 标题",
customer: "客户公司 1",
imageUrl: "/cases/case-1.webp",
createdAt: "2026-09-01",
type: "A" ← 屏幕上不显示
},
{
title: "案例 2 标题",
customer: "客户公司 2",
imageUrl: "/cases/case-2.webp",
createdAt: "2026-09-08",
type: "B"
},
...
]
方括号 [ ] = 列表（数组），花括号 { } = 一张卡片（对象）现在显示什么 — 状态
光有数据，页面还没完成。访客按下 B，就得发生只显示 B 案例的动作。为此，页面必须在某处记住自己当前在显示哪种类型。
这份记忆叫状态，英文是 state。它是看不见的、附着在页面一侧的值。用电子表格来比，表里堆着的值是数据，当前挂着的筛选条件接近状态。如果说数据是「有什么」，状态就是「现在显示其中哪些」。
状态值的形状可以从两个方向来想。如果允许同时选多个类型，状态就是列表。全部时 A·B·C 都在数组里；选了 A 和 C，就显示 A 和 C 的案例；三个都选，就又显示全部。这和上一篇咨询表单里的复选框结构相同，也就是保留之前的选择、可以再多选的格子。
反过来，如果按下 B 的瞬间 A 要被取消、只显示 B，并且「全部」不是把 A·B·C 都选上，而是作为单独的一个选项来处理，那么状态就是一个值。选了别的，前一个选择就被取消，这种逻辑就是单选按钮。
课程要求的就是这种思考。看着筛选，先问它是复选框逻辑还是单选按钮逻辑。答案定了，状态的形状就定了；状态的形状定了，要向 AI 提什么要求也就定了。
可以选多个时（复选框逻辑）
selectedTypes = ["A", "B", "C"] → 全部
selectedTypes = ["A", "C"] → 只有 A 和 C 的案例
只能选一个时（单选按钮逻辑）
selectedType = "all" → 全部
selectedType = "B" → 只有 B 的案例标签页只是换了外观的单选按钮
有一种熟悉的形式，行为和单选按钮逻辑很相似：标签页。全部·A·B·C 并排贴在一起，按下的那个显露在最前面。它也符合前面「把选项摆在外面」的答案。
标签页有两种做法。一种是预先分别做好全部页面和 A·B·C 页面，每次按下就换成对应的页面。另一种是内部和单选按钮完全一样。状态里只保存选中的一个类型，标签页只负责把选中的那个显露到前面，下方的卡片列表在状态每次变化时重新绘制。外表一样，背后不同。
课程的结论是：屏幕上的许多 UI，也就是人看到并点按的界面元素，只要和两种数据联系起来思考，很大程度上就能得出正确答案。一种是录入数据库的数据，另一种是放进状态的数据。
今天可以试的事是：在自己的服务或常用的应用里挑一个筛选或标签页，确认三件事。点击之前选项看得见吗？看得出当前在看什么吗？只能选一个，还是能选多个？如果发现要改的地方，就像下面这样向 AI 提要求。
还剩一个问题：知道什么样的意图有哪些 UI 选项。下一篇讲为什么要知道这些选项的名字，也就是组件的名字，才能把页面准确地传达给 AI。
改之前先给我看两件事。
1) 案例列表数据是什么形状（数组里对象的字段名）
2) 当前选中的筛选用什么值记住（状态的名字和形状）
然后把案例列表上方的下拉筛选改成标签页。
- 全部·A·B·C 一开始就全部可见。
- 一次只能选一个（单选按钮逻辑）。全部是单独的一个选项。
- 当前选中的标签页要醒目标出。
- 卡片列表按每个案例的 type 值筛选。