feat: 真机反馈 11 项(下拉层级/侧脸蒙版/报告改版/护理建议 V2.3/水分图)
1. 城市下拉浮层 z-index 提至 50,不再被肤质轮播圆点压盖 2. 倒计时音频已更新(用户重生成,解码验证 2.62s) 3. 侧脸步蒙版鼻向修正:2/3 右脸鼻朝右、3/3 左脸鼻朝左(原与设计稿 06/07 相反) 4. 无进展提示上移至 bottom:24%(引导 chips 上方,不再压快门) 5. 相册选择器「拍照」项为 iOS/安卓系统行为,web 无法移除(详见回复) 6. 报告页顶栏移除,返回/历史改悬浮 7. 肌龄小字按产品要求不再展示(钳制留痕仍随数据返回) 8. 关注行对齐设计稿:前缀灰 + 维度名深色 500 9. 三维度排版对齐设计稿:去掉档位徽章,最低分标红 10. 肤色水润图改用 water_area(接口水分图),REPORT_MAPS 与 mock fixture 同步更新 11. 报告「综合分析」「生活方式建议」通栏移除,新增「护理建议」卡(V2.3 §8:肤质定制/最差2分类/精华/生活方式 五段,§8.5.1 无内部标注;skin-score 实现 8.6/8.7 全量文案库,回归新增 §8.8 两组样例逐字断言 86/86 绿) e2e 全量绿(含真实 API:水分图/红区合成图挂载、护理建议五段)
This commit is contained in:
Ubuntu
+29
-30
@@ -701,17 +701,11 @@
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
function setDim(scoreSel, lvSel, dim) {
|
||||
var el = $(scoreSel), lv = $(lvSel);
|
||||
if (dim.S == null) {
|
||||
el.textContent = '-.-';
|
||||
lv.textContent = '未检出';
|
||||
lv.className = 'dim-lv';
|
||||
return;
|
||||
}
|
||||
el.textContent = dim.S.toFixed(1);
|
||||
lv.textContent = dim.level;
|
||||
lv.className = 'dim-lv ' + (LV_CLASS[dim.level] || '');
|
||||
function setDim(scoreSel, dim, isWorst) {
|
||||
var el = $(scoreSel);
|
||||
// 设计稿:最低分标红,其余深色;无档位徽章
|
||||
el.textContent = dim.S == null ? '-.-' : dim.S.toFixed(1);
|
||||
el.classList.toggle('dim-bad', !!isWorst && dim.S != null);
|
||||
}
|
||||
|
||||
function setCat(key, cat) {
|
||||
@@ -731,7 +725,7 @@
|
||||
{ key: 'mole', color: '#282828' }, // 痣
|
||||
{ key: 'acne', color: '#D30C0C' } // 痤疮
|
||||
] },
|
||||
tone: { img: '#viz-tone', blendMap: 'brown_area' }, // 肤色:正脸×色沉图正片叠底(直挂是悬浮面具感,合成后色沉落在脸上)
|
||||
tone: { img: '#viz-tone', blendMap: 'water_area' }, // 肤色水润:正脸×水分图正片叠底(water_area,接口返回)
|
||||
sens: { img: '#viz-sens', blendMap: 'red_area' }, // 敏感:正脸×红区图正片叠底(直挂白底过淡不可读)
|
||||
acne: { img: '#viz-acne', photo: true, marks: [ // 痘痘:正脸+闭口粉刺/痤疮标记
|
||||
{ key: 'closed_comedones', color: '#E8A13D' }, // 闭口粉刺
|
||||
@@ -902,28 +896,27 @@
|
||||
}
|
||||
$('#stat-score').textContent = total != null ? total + '分' : '--分';
|
||||
$('#stat-age').textContent = vm.skinAgeDisplay != null ? vm.skinAgeDisplay + '岁' : '--岁';
|
||||
// 肌龄小字:常显「与实际年龄相差X岁」,触发钳制时追加留痕(契约格式「触发(原X→Y)」不变)
|
||||
var ageNote = '';
|
||||
if (vm.skinAgeDisplay != null && vm.realAge != null) {
|
||||
var ageDiff = Math.abs(vm.skinAgeDisplay - vm.realAge);
|
||||
ageNote = ageDiff === 0 ? '与实际年龄相符' : '与实际年龄相差' + ageDiff + '岁';
|
||||
}
|
||||
if (vm.ageClampNote) ageNote += (ageNote ? ' · ' : '') + vm.ageClampNote;
|
||||
$('#stat-age-note').textContent = ageNote;
|
||||
$('#stat-age-note').textContent = ''; // 肌龄小字按产品要求不展示(钳制留痕 vm.ageClampNote 仍随数据返回)
|
||||
|
||||
// 三维度:S 值(1 位小数) + 档位(良好绿/改善琥珀/预警红)
|
||||
setDim('#dim-firm', '#dim-firm-lv', vm.dims.firm);
|
||||
setDim('#dim-vita', '#dim-vita-lv', vm.dims.vita);
|
||||
setDim('#dim-stab', '#dim-stab-lv', vm.dims.stab);
|
||||
// 关注行(设计稿两行:灰小字「近期优先关注:X」+ 深色维度口号)
|
||||
// 三维度:S 值(1 位小数),最低分标红(设计稿无档位徽章)
|
||||
var dimPs = { firm: vm.dims.firm.P, vita: vm.dims.vita.P, stab: vm.dims.stab.P };
|
||||
var worstDimKey = Object.keys(dimPs).reduce(function (a, b) {
|
||||
if (dimPs[a] == null) return b;
|
||||
if (dimPs[b] == null) return a;
|
||||
return dimPs[b] < dimPs[a] ? b : a;
|
||||
});
|
||||
setDim('#dim-firm', vm.dims.firm, worstDimKey === 'firm');
|
||||
setDim('#dim-vita', vm.dims.vita, worstDimKey === 'vita');
|
||||
setDim('#dim-stab', vm.dims.stab, worstDimKey === 'stab');
|
||||
// 关注行(设计稿两行:「近期优先关注：」灰 + 维度名深色,下行为深色口号)
|
||||
var DIM_SLOGAN = {
|
||||
'紧塑力': '紧塑提拉力，轮廓上扬不松垮',
|
||||
'活力感': '活力透亮感，水润澎弹有光泽',
|
||||
'稳定力': '强韧稳态力，锁水保湿抵御刺激' // 设计稿原文
|
||||
};
|
||||
$('#dims-note').innerHTML = vm.focus.name
|
||||
? '<span class="dims-note-l1">近期优先关注：' + esc(vm.focus.name) + '</span><br><span class="dims-note-l2">' + esc(DIM_SLOGAN[vm.focus.name] || '') + '</span>'
|
||||
: '<span class="dims-note-l1">近期优先关注：---</span>';
|
||||
? '<span class="dims-note-l1">近期优先关注：<b>' + esc(vm.focus.name) + '</b></span><br><span class="dims-note-l2">' + esc(DIM_SLOGAN[vm.focus.name] || '') + '</span>'
|
||||
: '<span class="dims-note-l1">近期优先关注：<b>---</b></span>';
|
||||
|
||||
// 三个 Tab 面板:各所辖两个分类(S + 档位徽章 + 话术正文)
|
||||
var keys = ['contour', 'wrinkles', 'smooth', 'tone', 'sens', 'acne'];
|
||||
@@ -943,9 +936,15 @@
|
||||
notesEl.style.display = 'none';
|
||||
}
|
||||
|
||||
// 综合文案 / 生活方式 / 精华推荐
|
||||
$('#vm-summary').textContent = vm.summary;
|
||||
$('#vm-lifestyle').textContent = vm.lifestyle;
|
||||
// 护理建议(V2.3 §8 五段:肤质定制/最差2分类/精华/生活方式);综合分析与生活方式通栏已按需求移除
|
||||
var careBox = $('#care-list');
|
||||
if (careBox) {
|
||||
careBox.innerHTML = (vm.careAdvice || []).map(function (s, i) {
|
||||
return '<p class="care-item"><b>' + (i + 1) + '、【' + esc(s.tag) + '】</b>' + esc(s.text) + '</p>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 精华推荐卡
|
||||
$('#essence-name').textContent = vm.essence.name;
|
||||
$('#essence-text').textContent = vm.essence.text;
|
||||
$('#essence-triggers').textContent = vm.essence.triggers.length ? '触发:' + vm.essence.triggers.join('、') : '';
|
||||
|
||||
@@ -589,6 +589,57 @@
|
||||
3: { name: '50+重塑精华', text: '建议搭配使用50+重塑精华：针对熟龄肌松弛与轮廓流失问题，深层重塑支撑结构，改善明显松弛与纹路，重建面部紧实与弹性。' }
|
||||
};
|
||||
|
||||
/* ─── V2.3 §8 护理建议 ─── */
|
||||
var SKIN_TYPE_TEXT = { // §8.6 五类映射【肤质定制】段全文 + 联动句
|
||||
'干性肌肤': { base: '你的日常肤质为干性肌肤：全脸皮脂分泌偏少，角质层保水能力弱，易紧绷起屑。护理以高效保湿与封闭锁水为核心，洁面选用温和低泡产品，避免频繁去角质，面霜可选择含神经酰胺、角鲨烷等封闭性成分的配方。',
|
||||
link: function (c) { return c.tone && c.tone.level === '预警' ? '当前已处于明显缺水状态，建议暂缓一切控油类产品' : ''; } },
|
||||
'油性肌肤': { base: '你的日常肤质为油性肌肤：皮脂分泌旺盛，毛孔易被氧化油脂堵塞。护理以温和控油与毛孔疏通为核心，可选择含烟酰胺、水杨酸的清爽配方，但清洁仍需适度，避免过度去脂反而刺激代偿性出油。',
|
||||
link: function (c) { return c.tone && c.tone.level === '预警' ? '需警惕外油内干：控油同时必须叠加保湿，避免屏障受损' : ''; } },
|
||||
'中性肌肤': { base: '你的日常肤质为中性肌肤：水油分泌平衡，角质状态稳定，是理想的肌肤基础态。护理以维持现状为核心，精简护肤流程，做好基础清洁、保湿与防晒即可，无需叠加过多功效产品。',
|
||||
link: function () { return ''; } },
|
||||
'混合偏干肌肤': { base: '你的日常肤质为混合偏干肌肤：T区状态尚可，但两颊及面部外侧偏干，易出现紧绷与细纹。建议分区护理：两颊侧重保湿滋养，选用滋润型乳液/面霜，T区轻量保湿即可，避免全脸统一用厚重面霜。',
|
||||
link: function (c) { return c.smooth && c.smooth.level === '预警' ? '干燥会放大纹理粗糙感，建议先将两颊水合度提上来再做角质调理' : ''; } },
|
||||
'混合偏油肌肤': { base: '你的日常肤质为混合偏油肌肤：T区出油旺盛而两颊偏干，呈典型外油内干倾向。建议分区护理：T区使用控油清爽产品，两颊加强保湿；全脸避免高滋润面霜，可选用质地轻薄的保湿乳分区涂抹。',
|
||||
link: function (c) { return c.tone && c.tone.level === '预警' ? '外油内干状态下切勿加大清洁力度，补水优先于控油' : ''; } }
|
||||
};
|
||||
function skinTypeKey(name) { // 归一:用户自选五类名;未知/缺失按中性
|
||||
var keys = ['混合偏干肌肤', '混合偏油肌肤', '干性肌肤', '油性肌肤', '中性肌肤'];
|
||||
for (var i = 0; i < keys.length; i++) if (name && name.indexOf(keys[i].replace('肌肤', '')) >= 0) return keys[i];
|
||||
return '中性肌肤';
|
||||
}
|
||||
var CARE_POINTS = { // §8.7 护理要点库(6分类×3档,逐字;肤色水润=色沉+水分并列,先色沉后水分)
|
||||
contour: {
|
||||
'预警': '强化轮廓紧致管理，重点针对面中、苹果肌与下颌线支持带区域，配合向上提升按摩手法，促进真皮层胶原再生与微循环。',
|
||||
'改善': '加强弹韧护理补充胶原支架营养，关注易显疲态区域的支撑力，日常可增加紧致精华步骤并配合向上按摩。',
|
||||
'良好': '维持现有抗老护理节奏，做好光损伤防护与状态管理，巩固真皮胶原网络密度。'
|
||||
},
|
||||
wrinkles: {
|
||||
'预警': '加强纹路分级管理，重点针对眼周、法令纹等动态纹高发区域，使用视黄醇/胜肽类淡纹精华并配合点按手法，遏制静态纹转化。',
|
||||
'改善': '加强日常淡纹与弹润护理，维持真皮基质含水量，保持肌肤饱满平滑。',
|
||||
'良好': '以抗初老预防为核心，提前建立抗氧化/紧致护理习惯，延缓第一道静态纹出现。'
|
||||
},
|
||||
smooth: {
|
||||
'预警': '加强细腻度管理，避免过度清洁破坏角质屏障，重点关注毛孔显著区域，配合低浓度酸类（如水杨酸）周期护理与柔润精华。',
|
||||
'改善': '加强基础清洁与角质调理，关注鼻翼、下颌等易粗糙部位，提升毛孔通畅度与柔滑度。',
|
||||
'良好': '维持当前温和护理节奏，保护角质层排列与微循环稳态。'
|
||||
},
|
||||
tone: { // 每档 = [色沉段, 水分段](并列输出,先色沉后水分)
|
||||
'预警': ['强化透亮与色素代谢管理，严格广谱防晒，配合温和抗氧化成分（如维C衍生物）抑制黑色素转运。', '强化屏障锁水修复，停用控油类产品，改用含神经酰胺的封闭性面霜，每周2-3次补水面膜快速纠正缺水状态。'],
|
||||
'改善': ['加强日常光泽管理与局部色素防控，做好基础防晒与抗氧化打底。', '注重水油平衡调理，选用清爽保湿乳液，避免过度清洁带走皮脂膜。'],
|
||||
'良好': ['维持现有防护与护理习惯，巩固肤色均匀度与透亮感。', '维持现有补水习惯，巩固水合状态与水油平衡。']
|
||||
},
|
||||
sens: {
|
||||
'预警': '优先屏障修复与舒缓管理，精简护肤流程，避免频繁更换方案与叠加功效成分，修复受损角质层。',
|
||||
'改善': '保持温和护理节奏，注意防晒与环境防护，逐步提升皮肤耐受度。',
|
||||
'良好': '维持规律护理并按季节阶段性调整，巩固皮肤耐受稳态。'
|
||||
},
|
||||
acne: { // 痘痘:V1.2 无原文,V2.3 本版新撰
|
||||
'预警': '优先抗炎与痘肌修护，避免挤压与厚重型封闭产品，选用含水杨酸或壬二酸的清爽配方，局部点涂抗痘精华，必要时寻求皮肤科处理。',
|
||||
'改善': '维持温和清洁与控油节奏，注意枕巾与手部卫生，避免叠加过多功效产品刺激皮损。',
|
||||
'良好': '维持现有清洁控油习惯，保持作息与饮食规律，防止毛孔堵塞复发。'
|
||||
}
|
||||
};
|
||||
|
||||
/* ─── 主入口 ─── */
|
||||
function buildViewModel(apiResult, sideResults, profile) {
|
||||
var r = apiResult || {};
|
||||
@@ -717,6 +768,22 @@
|
||||
+ (tail ? tail + '。' : '');
|
||||
}
|
||||
|
||||
/* 护理建议(V2.3 §8.5 五段固定顺序:【肤质】【最差分类1】【最差分类2】【精华】【生活方式】;
|
||||
§8.5.1 输出纪律:段内不得出现 P/S 数值、档位名、判据、字段名等内部标注) */
|
||||
var careAdvice = [];
|
||||
var stDef = SKIN_TYPE_TEXT[skinTypeKey(profile.skinType)];
|
||||
var linkSeg = stDef.link(cats);
|
||||
careAdvice.push({ tag: '肤质', text: stDef.base + (linkSeg ? linkSeg + '。' : '') });
|
||||
if (sorted && sorted.length >= 2) {
|
||||
for (i = 0; i < 2; i++) {
|
||||
var ck = CAT_DEFS.filter(function (d) { return d.name === sorted[i].name; })[0].key;
|
||||
var lv2 = cats[ck].level || '良好', pts = CARE_POINTS[ck][lv2];
|
||||
careAdvice.push({ tag: sorted[i].name, text: Array.isArray(pts) ? pts.join('') : pts });
|
||||
}
|
||||
}
|
||||
careAdvice.push({ tag: '精华', text: essence.text });
|
||||
careAdvice.push({ tag: '生活方式', text: worst ? LIFESTYLE[worst.catKey] : '' });
|
||||
|
||||
return {
|
||||
total: pick(r, 'total_score'),
|
||||
skinAgeRaw: skinAge,
|
||||
@@ -732,6 +799,7 @@
|
||||
focus: focus,
|
||||
summary: summary,
|
||||
lifestyle: worst ? LIFESTYLE[worst.catKey] : '',
|
||||
careAdvice: careAdvice,
|
||||
notes: notes
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user