本文介绍如何在多个预生成布局中，根据用户对各功能模块（如行情列表、图表、投资组合等）的评分偏好，通过加权差异度计算精准匹配最贴近的布局方案。
本文介绍如何在多个预生成布局中，根据用户对各功能模块（如行情列表、图表、投资组合等）的评分偏好，通过加权差异度计算精准匹配最贴近的布局方案。
在构建可配置仪表盘或交易终端时，常需为用户提供“个性化布局推荐”能力——即从一组候选布局中，自动选出最契合其使用习惯的一套配置。核心挑战在于：如何量化“契合度”？ 简单的字段相等判断无法满足需求（例如用户期望 chart: 5，而某布局为 chart: 4，应比 chart: 0 更优），且需支持关键约束：若用户将某项设为 0（表示禁用），则候选布局该项也必须为 0。
✅ 解决思路：加权曼哈顿距离 + 零值硬约束
我们采用改进的加权绝对差（Weighted Manhattan Distance）作为相似度指标，并嵌入零值强制匹配逻辑：
- 对每个功能字段（如
watchList,chart），计算布局值与用户偏好的绝对差：|layout[key] - user[key]| - 若用户指定某项为
0，则仅保留该项值也为0的布局（硬过滤） - 可为不同字段设置权重（如
portfolio权重 2.0，Mazaneh权重 0.5），体现业务重要性 - 总差异度 = Σ(权重 × 绝对差)，差异越小，匹配度越高
? 示例代码实现
// 用户偏好（0 表示禁用该模块）
const userScores = {
watchList: 3,
instrumentDetail: 5,
portfolio: 2,
orders: 3,
transactions: 4,
chart: 5,
Mazaneh: 0,
};
// 字段权重配置（可按需调整）
const WEIGHTS = {
watchList: 1.0,
instrumentDetail: 1.2,
portfolio: 2.0, // 投资组合更重要
orders: 0.8,
transactions: 0.9,
chart: 1.5, // 图表高权重
Mazaneh: 0.5,
};
// 计算单个布局与用户的加权差异度
function calculateDeviation(layout, user, weights) {
let totalDeviation = 0;
// 零值硬约束：若用户设为 0，则布局该项必须为 0，否则直接淘汰（返回 Infinity）
for (const key in user) {
if (user[key] === 0 && layout.options[key] !== 0) {
return Infinity; // 不满足约束，彻底排除
}
}
// 计算加权绝对差
for (const key in user) {
if (user[key] > 0) { // 跳过已过滤的零值项
const diff = Math.abs(layout.options[key] - user[key]);
totalDeviation += (weights[key] || 1.0) * diff;
}
}
return totalDeviation;
}
// 从布局列表中找出最优匹配
function findBestLayout(layouts, user, weights) {
return layouts
.map(layout => ({
layout,
deviation: calculateDeviation(layout, user, weights),
}))
.filter(item => item.deviation !== Infinity) // 移除不满足零约束的项
.reduce((best, current) =>
current.deviation < best.deviation ? current : best,
{ layout: null, deviation: Infinity }
).layout;
}
// 使用示例
const bestMatch = findBestLayout(randomLayouts, userScores, WEIGHTS);
console.log("✅ 最佳匹配布局：", bestMatch?.name);
console.log("? 差异度得分：", calculateDeviation(bestMatch, userScores, WEIGHTS).toFixed(2));⚠️ 关键注意事项
-
零值是硬性过滤条件，非权重项：
Mazaneh: 0意味着用户明确拒绝该模块，任何Mazaneh ≠ 0的布局均被一票否决，不可通过降低权重“妥协”。 -
权重设计需结合业务逻辑：高频核心模块（如
chart,portfolio）应赋予更高权重；辅助功能（如Mazaneh）可适度降低影响。 -
扩展性建议：
- 支持动态权重：允许用户在设置页调节各模块重要性滑块；
- 引入归一化：当字段取值范围差异大（如
chart: [0–5]vsportfolio: [1–5]），可先将所有值映射到[0, 1]区间再计算差异； - 多解处理：若多个布局差异度相同，可按生成时间、名称字典序或用户历史点击频次二次排序。
该方案兼顾准确性、可解释性与工程落地性，无需依赖复杂机器学习模型，即可在毫秒级完成 20+ 布局的实时匹配，适用于前端轻量级个性化推荐场景。
