项目知识库

2026-07-21-产品映射体验站字段层级优化-交接

15分钟阅读

产品映射体验站字段层级优化 交接文档

本次目标

  • 优化产品映射体验站的映射工作台信息层级。
  • 按用户反馈，在上方展示渠道标签和属性分类，渠道标签下方展示状态。

已完成内容

  • 列表卡片新增“渠道标签：渠道名”，并在其下展示当前状态。
  • 列表和详情页新增属性分类展示，分类范围为机型、SKU、机况、功能。
  • 对原“答案项”类渠道数据做业务归类：账号锁等归为功能，充电/屏幕等归为机况。
  • 顶部新增 6 个导入快捷入口：导入换机侠机型、导入换机侠 SKU、导入换机侠机况/功能、导入三方机型、导入三方 SKU、导入三方机况/功能。
  • 快捷入口支持选择本地 XLSX/CSV/TSV 表格文件；导入后按入口自动归类并追加到映射列表。
  • 已按换机侠真实业务字段适配“导入换机侠机型”：分类名称、分类编码、品牌、品牌编码、机型、机型名称、机型编码、机型ID、显示状态1展示 0不展示。
  • 换机侠机型导入规则：机型名称/机型 作为展示名称，机型编码/机型ID 作为外部编码，渠道标签为“换机侠标准库”，属性分类为“机型”，导入状态为“已通过”。
  • 左侧列表已按红字反馈简化：列表标题显示“渠道 + 属性分类 + 列表”，列表项只显示商品/机型名称，不再显示渠道标签、状态、ID、分类标签等辅助字段。
  • 右侧机型选择流程已优化：保留按相似度从高到低排序的“选择机型”控件，移除独立的“相似机型查找”列表及详情头部元数据，避免重复和干扰。
  • 已去掉右侧旧的外部编码展示和“名称、别名与属性综合命中”等杂项说明，减少运营选择机型时的干扰。
  • 顶部换机侠标准库导入区已收起为“换机侠属性”一个入口，通过下拉选择 机型、SKU、机况、功能 后再选择表格或导入示例。
  • 换机侠 机况、功能 已拆成独立属性选项，不再合并成“机况/功能”一个入口。
  • 工作台数据范围已调整：换机侠属性导入的数据只作为标准库匹配池，不进入左侧待处理列表、右侧详情和状态筛选；左侧与右侧只展示三方渠道数据。
  • 已移除工作台中部旧控件：导入成功提示条、状态快捷按钮、搜索框和“运行 AI 推荐”按钮不再展示，也不再参与筛选逻辑。
  • 已改为三个横向业务筛选组：渠道 闲鱼/干物焕新/回收宝，类型 机型/SKU/功能/机况，状态 待映射/已映射；当前项高亮，不再使用下拉框。
  • 右侧详情已按红框反馈收敛：不再显示属性分类、渠道标签、当前机型标题和独立相似机型结果，仅保留选择机型和审核按钮。
  • 已移除审核按钮下方的 AI 推荐说明提示，详情区不再显示额外灰色说明。
  • 已移除工作台顶部头部栏，不再显示页面标题、流程说明和“运行正常”状态。
  • 导入入口已收敛到工作台右上角两个小按钮：“第三方导入”和“换机侠导入”；点击后选择属性类型，随后立即打开本地文件上传。
  • 旧的大块导入卡片、“选择表格”和“示例”入口已移除。
  • 左右工作区卡片标题已统一字号和对齐方式，右侧标题为“请选择换机侠机型”，选择框与左侧列表内容从同一标题基线开始。
  • 筛选区已改为一个整体卡片，渠道、类型、状态各占一行；选中态使用浅蓝底和轻边框，减少视觉分割和强调。
  • 映射类型已明确：机型单独使用机型映射；SKU、机况、功能统一按功能项/答案项处理，右侧标题和下拉提示随类型切换。
  • 未找到标准项时支持“一键新增”：带入三方名称、类目、品牌，写入换机侠标准库并生成新的 JX_类型_时间戳 ID，同时完成当前映射。
  • 快捷入口仍保留“示例”按钮，便于没有本地表格时演示列表和详情联动。
  • 新版本已发布到原线上体验站地址。

代码位置

  • 本地路径：/Users/ayang/Documents/Codex/2026-07-17/referenced-chatgpt-conversation-this-is-untrusted/outputs/product-mapping-site
  • 私有 Git 仓库：https://github.com/961608564/product-mapping-site_2026-07-17.git

运行方式

cd /Users/ayang/Documents/Codex/2026-07-17/referenced-chatgpt-conversation-this-is-untrusted/outputs/product-mapping-site
npm install
npm run dev

测试结果

  • npm test 通过：构建成功，11 个页面结构测试通过。
  • 本地预览 http://localhost:3000/ 已确认新版字段显示。
  • 本地预览已点击验证“三方机型”导入，列表从 6 条增加到 7 条，详情同步选中新数据。
  • 本地预览已点击“导入三方 SKU”并选择本地 CSV，页面提示导入成功，列表与详情同步更新。
  • 本地预览已点击“导入换机侠机型”并选择 /Users/ayang/Desktop/换机侠机型_20260502.xlsx，页面提示导入 6502 条数据；首条映射为 360奇酷旗舰 / JX1000003004。
  • 本地预览已确认左侧列表标题为“闲鱼机型列表 6 条”，首行只显示“苹果15PM”，未出现渠道、状态、ID、分类标签。
  • 本地预览已确认默认机型“苹果15PM”的候选结果只显示 iPhone 15 Pro Max / 相似度 100，详情区无外部编码字段。
  • 本地预览已用 /Users/ayang/Desktop/换机侠机型_20260502.xlsx 重新导入 6502 条，候选前三为 360奇酷旗舰 100、360奇酷青春 67、360手机奇酷 50，排序正确。
  • 本地预览已确认顶部只显示一个“换机侠属性”入口，下拉项为 机型、SKU、机况、功能；选择 功能 后示例导入正常。
  • 本地预览已用 /Users/ayang/Desktop/换机侠机型_20260502.xlsx 重新导入 6502 条标准库数据；导入后左侧仍为 6 条三方渠道数据，右侧未切到换机侠标准库，状态筛选也只统计三方渠道数据。
  • 本地预览已确认中部旧控件消失；筛选项显示为横向 渠道/类型/状态 按钮组，选择 闲鱼 + 机型 + 待映射 后列表只剩 苹果15PM。
  • 本地预览已确认右侧详情红框内容消失，仅保留“选择机型”、按相似度排序的候选下拉和审核按钮；按钮下方的灰色说明也已移除。
  • 本地预览已确认顶部头部栏消失，工作区直接从导入与横向筛选区域开始。
  • 本地预览已确认两个导入按钮默认收起，展开后按 机型/SKU/机况/功能 选择属性并触发本地文件上传。
  • 本地预览已确认左右卡片标题字号一致且顶部对齐，右侧显示“请选择换机侠机型”。
  • 本地预览已确认筛选区为单卡片三行布局，选中样式弱化且窄屏可自然换行。
  • 本地预览已确认非机型记录使用功能项/答案项标题；无已选标准项时出现“一键新增”，生成新标准 ID 并隐藏于工作台待处理列表之外。
  • 本地预览已确认机型右侧标题为“请选择换机侠机型”；SKU、机况、功能统一显示“功能项列表”和“请选择换机侠答案项”，选择框使用答案候选项。
  • 本地预览已确认 SKU、机况、功能右侧同时显示“问题项”和“答案项”两个独立选择框；导入字段支持问题项/问题/功能项与答案项/答案/选项/值等别名。
  • 本轮已补齐左侧列表：SKU、机况、功能每条记录显示“问题项”和“答案项”两行；机型记录仍只显示机型名称，缺失答案显示“待选择”。
  • 本轮 npm test 通过：构建成功，14 个页面结构测试通过。
  • 本轮已优化相似度视觉：候选项使用“— 相似度”分隔，当前相似度使用红色显示，避免与答案内容混淆。
  • 本轮已修复工作台重复渲染：page==="workbench" 仅保留一份，页面不再在下方新增重复列表；新增结构测试防止回归。
  • 本轮已修复线上启动失败：工作台 JSX 错误地位于组件返回结构外，导致 page is not defined 和 Cloudflare 1101；已移回返回结构内，生产服务本地返回 200，线上地址返回 200。
  • 本轮已调整答案项选择框：答案名称与红色“— 相似度”在同一个自定义选择框内显示，删除框外相似度行；答案名称过长时省略号截断，切换答案项同步更新相似度。
  • 本轮已调整左侧映射列表：所有记录统一为“问题项 / 答案项”横向两列，移除机型名称单独展示；左侧最小宽度 680px、工作区最小宽度 1280px，窄屏保持两列并允许横向滚动。
  • 线上资源已确认包含“选择表格”、.xlsx,.csv,.tsv,.txt、分类名称/机型编码/机型ID 等新版导入逻辑。
  • 线上资源已确认旧的左侧多字段结构 row-main 不再存在。
  • 线上资源已确认包含“选择机型”和“相似度”排序逻辑，不包含独立的“相似机型查找”、详情元数据和旧的 AI 推荐杂项说明。
  • 线上资源已确认包含“换机侠属性”和四个属性选项，不包含旧的“导入换机侠机型 / 导入换机侠 SKU / 导入换机侠机况”三按钮文案。
  • 线上资源已确认包含标准库隐藏逻辑和“暂无三方渠道数据”空态文案。
  • 线上资源已确认包含新的横向业务筛选按钮，不包含业务下拉框、旧的搜索框、“运行 AI 推荐”、状态 pill 和导入提示条逻辑。
  • npm audit --omit=dev 检查：未新增高危或严重生产依赖；仍有项目原有 Next/PostCSS 中危提示。

部署或发布状态

  • Sites 项目：产品映射系统。
  • 生产地址：https://product-mapping-ops-demo.magicyoungyang.chatgpt.site
  • 已部署版本：v25（本轮左侧列表横向双列布局）。
  • 源码提交：7dd7bf89bef9ceb2f4a5892d302bf1bf1d9b5110。

风险和待办

  • 当前仍是体验版，数据保存在浏览器 localStorage，不是共享数据库生产系统。
  • 当前本地文件导入支持 .xlsx/.csv/.tsv/.txt；.xls 旧格式暂未接入。
  • 正式生产版本需要接入后端持久化与人工审核权限体系。

安全说明

  • 本文档不记录 API Key、密码、Cookie、私钥、真实账号令牌。

关系图谱