lhmin0604andClaude
3b224cf41b
修正工作流批次②（问题1 重叠误报）： - addSticker 按 mask 短边 60% 归一化 width/height（契约实现注记： width/height 语义 = 画布显示像素），渲染/碰撞/WCD 三方自洽 - 拖动与缩放后坐标钳制在 [0, mask尺寸-显示尺寸]，杜绝负坐标/拖出画布 - 读取端兼容：旧数据 width > mask 尺寸时按 mask 等比归一化（不做存量迁移） - canvas-image/preview-image 补 transform-origin: top left， 缩放原点与碰撞盒（左上角）语义一致 Co-Authored-By: Claude <noreply@anthropic.com>
1 line
8.7 KiB
Plaintext
1 line
8.7 KiB
Plaintext
.diy-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;padding:0 32rpx calc(48rpx + env(safe-area-inset-bottom))}.diy-page .page-header{-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 24rpx;padding-bottom:16rpx;padding-top:0}.diy-page .page-header.surface-card{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.diy-page .page-header .flex-between{min-height:88rpx}.back-btn{-ms-flex-align:center;-ms-flex-pack:center;-ms-flex-negative:0;-webkit-align-items:center;align-items:center;background:var(--bg-card);border:1rpx solid var(--border-strong);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;flex-shrink:0;font-size:36rpx;height:80rpx;-webkit-justify-content:center;justify-content:center;line-height:1;width:80rpx}.back-btn:active{-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.diy-page .page-title{color:var(--text-primary);-webkit-flex:1;-ms-flex:1;flex:1;font-size:34rpx;font-weight:700;letter-spacing:0;line-height:1.2;min-width:0;overflow:hidden;padding:0 16rpx;text-align:center;text-overflow:ellipsis;white-space:nowrap}.header-spacer{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;height:80rpx;width:80rpx}.canvas-wrapper{-ms-flex-pack:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-radius:24rpx;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;padding:24rpx}.canvas-area{background:var(--bg-input);border-radius:24rpx;-webkit-box-shadow:inset 0 0 0 1rpx var(--border-strong);box-shadow:inset 0 0 0 1rpx var(--border-strong);-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;min-height:400rpx;min-width:300rpx;overflow:hidden;position:relative}.mask-border{border:1rpx solid var(--border-strong);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.canvas-image{border:2rpx solid transparent;border-radius:8rpx;max-height:100%;max-width:100%;position:absolute;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;z-index:5}.canvas-image.active{border-color:var(--accent-primary);-webkit-box-shadow:0 0 0 8rpx var(--accent-primary-soft);box-shadow:0 0 0 8rpx var(--accent-primary-soft)}.canvas-image.overlap{border-color:var(--danger);-webkit-box-shadow:0 0 0 8rpx var(--danger-soft);box-shadow:0 0 0 8rpx var(--danger-soft)}.sticker-panel{padding:24rpx}.sticker-panel .section-title{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:20rpx}.sticker-list{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16rpx}.sticker-thumb{background:var(--bg-input);border:1rpx solid var(--border);border-radius:20rpx;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);height:164rpx;overflow:hidden;position:relative;width:164rpx}.sticker-thumb.active{border-color:var(--accent-primary);-webkit-box-shadow:0 0 0 6rpx var(--accent-primary-soft);box-shadow:0 0 0 6rpx var(--accent-primary-soft)}.sticker-thumb.overlap{border-color:var(--danger);-webkit-box-shadow:0 0 0 6rpx var(--danger-soft);box-shadow:0 0 0 6rpx var(--danger-soft)}.sticker-thumb-img{height:100%;width:100%}.sticker-del{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--danger);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);display:-webkit-flex;display:-ms-flexbox;display:flex;height:44rpx;-webkit-justify-content:center;justify-content:center;position:absolute;right:8rpx;top:8rpx;width:44rpx;z-index:10}.del-icon{color:#fff;font-size:28rpx;font-weight:700;line-height:1}.sticker-add-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-muted);border:1rpx solid var(--border-strong);border-radius:20rpx;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:164rpx;-webkit-justify-content:center;justify-content:center;width:164rpx}.sticker-add-btn:active{-webkit-transform:scale(.97);-ms-transform:scale(.97);transform:scale(.97)}.add-icon{color:var(--accent-primary);font-size:44rpx;font-weight:600;line-height:1}.add-label{color:var(--text-secondary);font-size:22rpx;margin-top:8rpx}.overlap-hint{color:var(--danger);display:block;font-size:24rpx;font-weight:600;margin-top:16rpx;text-align:center}.toolbar{padding:24rpx}.tool-row{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;-webkit-justify-content:space-between;justify-content:space-between;padding:8rpx 0}.tool-row + .tool-row{border-top:1rpx solid var(--border);margin-top:8rpx;padding-top:16rpx}.tool-label{color:var(--text-primary);font-size:26rpx;font-weight:600}.tool-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:1rpx solid var(--border);border-radius:16rpx;color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:32rpx;font-weight:600;height:64rpx;-webkit-justify-content:center;justify-content:center;width:64rpx}.tool-btn:active{background:var(--bg-muted);-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.tool-value{color:var(--accent-primary);font-size:26rpx;font-variant-numeric:tabular-nums;font-weight:600;min-width:88rpx;text-align:center}.tool-hint{color:var(--text-secondary);font-size:24rpx}.edit-btn-bar{-ms-flex-pack:end;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:24rpx}.edit-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:1rpx solid var(--border-strong);border-radius:999rpx;color:var(--text-secondary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:28rpx;font-weight:600;height:88rpx;-webkit-justify-content:center;justify-content:center;min-width:176rpx;padding:0 40rpx;text-align:center;-webkit-transition:all .2s ease;transition:all .2s ease}.edit-btn.active{background:var(--accent-primary-soft);border-color:var(--accent-primary);color:var(--accent-primary)}.edit-btn.disabled{opacity:.45;pointer-events:none}.bottom-action-bar .btn-primary,.bottom-action-bar .btn-secondary{-webkit-flex:1;-ms-flex:1;flex:1;font-size:28rpx;font-weight:600;line-height:1.2;padding:28rpx 0;text-align:center}.preview-overlay{-ms-flex-align:end;-ms-flex-pack:center;-webkit-align-items:flex-end;align-items:flex-end;background:rgba(0,0,0,.45);bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.preview-card{background:var(--bg-card);border:1rpx solid var(--border);border-radius:32rpx 32rpx 0 0;-webkit-box-shadow:var(--shadow-elevated);box-shadow:var(--shadow-elevated);-webkit-box-sizing:border-box;box-sizing:border-box;max-height:88vh;overflow-y:auto;padding:40rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));width:100%}.preview-card::before{background:var(--bg-muted);border-radius:999rpx;content:"";display:block;height:8rpx;margin:0 auto 32rpx;width:64rpx}.preview-title{color:var(--text-primary);display:block;font-size:34rpx;font-weight:700;letter-spacing:0;margin-bottom:24rpx;text-align:center}.preview-canvas{background:var(--bg-input);border:1rpx solid var(--border-strong);border-radius:24rpx;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto 24rpx;max-width:100%;min-height:400rpx;min-width:300rpx;overflow:hidden;position:relative}.preview-image{max-height:100%;max-width:100%;position:absolute;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;z-index:5}.preview-image.overlap{border:2rpx solid var(--danger);border-radius:8rpx}.product-info{margin-bottom:28rpx;text-align:center}.product-name{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:8rpx}.product-size{color:var(--text-secondary);font-size:24rpx}.preview-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx}.preview-actions .btn-primary,.preview-actions .btn-secondary{-webkit-flex:1;-ms-flex:1;flex:1;font-size:28rpx;font-weight:600;line-height:1.2;padding:28rpx 0;text-align:center}.preview-actions .btn-primary.disabled{opacity:.5;pointer-events:none}.mt-20{margin-top:24rpx} |