Airtable Parity: 产品视图和界面细节优化（全局UI提升）

[hotlong]

📝 背景

当前 CRM 产品目录界面已达Airtable基本水准，但对齐顶级Airtable用户体验还有细致表层gap。为实现ObjectUI的Airtable体验极限和ROADMAP中的parity目标，需对主要产品视图和相关配置界面做以下UI/UX优化。

---

🧩 优化细节清单

1. 产品表格（Grid）区

• 【P0】IS ACTIVE 列渲染为 <Checkbox disabled>（支持 BooleanCellRenderer，空白变为显式布尔开关）
• 【P0】价格 列使用货币格式化显示（如 $2,499.99 而非 2499.99），利用 formatCurrency 方法
• 【P0】设置默认 行高 为 short 或 compact，提升信息密度
• 【P1】行号（#）列 hover 时显示 Checkbox（支持多选行为）
• 【P1】Stock=0 的商品行用红色高亮（条件格式化，参考 conditionalFormatting 规则）
• 【P2】SKU、CATEGORY 列默认宽度收窄，NAME 保持主要展现
• 【P2】Stock 列低库存（如<5）添加视觉警示（淡黄色/橙色）
• 【P2】价格列对齐方式为右对齐

2. Toolbar 顶部工具栏

• 【P1】Filter/Sort/Group/Color 按钮分组，主次分明，有分隔符
• 【P1】所有 filter chips（active 条件、标签等）统一嵌入 Filter 下拉弹窗内（删除 toolbar 零散 chips，toolbar 按钮只保留 filter+badge）
• 【P1】inline search 搜索框放置于 toolbar 左端，宽度 w-48，风格与 Airtable 一致
• 【P2】Filter/Sort/Group 按钮支持激活状态高亮（bg-primary/10，已大部分支持，但需补齐所有variant）
• 【P2】Toolbar 滚动溢出优化，对齐 ROADMAP P2.7，overflow-x-auto

3. 配置面板（右侧 View Config Panel）

• 【P1】高级/非常用开关（如 允许打印/导出/table row resizable/etc.）默认折叠，仅保留常用开关展开（如 搜索/排序/筛选）
• 【P2】View Config 面板宽度默认提升为 320px（当前 CSS 变量 --config-panel-width: 280px）
• 【P2】面板内标题、描述、开关项文案全部统一为中文，如有中英混合，全部引用i18n key
• 【P2】排序/分组等逻辑表达式控件区域，分组层级更清晰（分隔线/底色增强）

4. 侧边栏 & Tab

• 【P2】产品导航 Products 激活状态，增加 3px 左色条指示，参考 SidebarMenuButton active state
• 【P2】分组分隔线加粗加深，加强导航区域感知
• 【P2】Recent 区域默认折叠（节省空间）
• 【P2】Tab（All Products等）• 标记用更明确的 badge/tooltip 替代

---

🚦 验收标准

• 主要列表和配置区域体验与 Airtable 基本达到视觉和交互一致
• 经过测试验证主要 UX gap 已全部覆盖

🔨 关联需求/文档

• ROADMAP：P1.8.1, P2.7, P1.9 及上述细节
• 评估参考：Airtable 官方 UI 体验
• 

---

优化完成后必须运行 test 全量测试，并及时更新 ROADMAP 优化卡片。