需在Codex组件中用computed管理filteredList并实现筛选排序：声明响应式listData和searchKeyword等ref，computed动态过滤并处理空值；sortConfig控制排序，点击表头切换asc/desc，.sort()基于筛选后副本执行且处理大小写与null。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Codex中开发一个支持筛选和排序的列表，你需要在组件中集成数据过滤逻辑、状态管理以及响应式UI更新机制，而不是依赖外部库或后端接口临时拼接。
定义可响应的数据源和状态
在组件顶层声明 reactive 变量，包含原始数据 listData 和当前展示数据 filteredList，两者必须独立；直接用 listData.filter() 赋值给 filteredList 会导致响应失效。
使用 ref 或 reactive 包裹原始数据，再用 computed 声明 filteredList，确保每次依赖变化时自动重算。
这一步不可跳过，否则后续筛选结果不会触发视图更新。
实现动态筛选逻辑
方法一：监听输入框实时过滤
绑定 input 事件到搜索字段，更新 searchKeyword ref；computed 中用 includes() 判断字符串匹配，注意对 null/undefined 做兜底处理——【未做空值判断会导致页面白屏】。
方法二：多条件下拉筛选
为每个筛选维度（如 status、category）建立独立 ref，将所有条件聚合进一个 filter 函数，逐条比对对象属性值是否满足全部条件。
方法三：支持模糊+精确混合模式
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
在筛选函数内根据字段类型自动切换逻辑：字符串走 includes，数字走 === 或区间判断，布尔值直接全等匹配。
添加排序功能并联动筛选结果
第一步：定义 sortConfig = { key: 'name', order: 'asc' } 响应式对象。
第二步：在 computed 的 filteredList 中，先执行筛选，再调用 .sort() 方法——注意不能直接在原始 listData 上 sort，必须基于筛选后的数组副本操作。
第三步：点击表头时更新 sortConfig.key 和 sortConfig.order，若连续点击同一字段，则 order 在 'asc' ↔ 'desc' 间切换。
这一步的关键是 sort() 必须返回新数组，且比较函数要处理字符串大小写、null 值前置等边界情况；否则排序结果错乱且无法还原。
渲染带交互控件的列表结构
用 v-for 渲染 filteredList，每行绑定 :key="item.id"，禁止用 index。
表头单元格添加 @click="handleSort('price')" 事件，右侧显示当前排序方向图标（↑ / ↓），图标显隐由 sortConfig.key === 'price' && sortConfig.order 决定。
搜索框旁放置「清空筛选」按钮，点击后重置所有筛选 ref 为初始值，并将 sortConfig 恢复为默认字段和 asc。
