diff --git a/assets/css/frontend/resource-meta/part.css b/assets/css/frontend/resource-meta/part.css index b8e05418..27fecfc7 100644 --- a/assets/css/frontend/resource-meta/part.css +++ b/assets/css/frontend/resource-meta/part.css @@ -242,6 +242,48 @@ margin: 0; } +/* 下载按钮 + 复制/备注按钮并排,对应参考主题的 .but-download.flex.ac */ +.resource-download-box__row { + display: flex; + align-items: stretch; + gap: 8px; +} + +.resource-download-box__row > .resource-download-box__btn { + flex: 1 1 auto; + min-width: 0; +} + +/* 提取码 / 点击复制按钮 */ +.resource-download-box__btn--extract { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + min-height: 44px; + padding: 10px 14px; + border: 1px dashed var(--main-border-color, rgb(132 145 165 / 35%)); + border-radius: 10px; + background: var(--muted-bg-color, rgb(132 145 165 / 8%)); + color: var(--muted-color, #6b7280); + font-size: 13px; + font-weight: 600; + line-height: 1.3; + cursor: pointer; + transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; +} + +.resource-download-box__btn--extract:hover { + border-color: var(--focus-color, #f04494); + background: var(--focus-color-opacity1, rgb(240 68 148 / 10%)); + color: var(--focus-color, #f04494); +} + +.resource-download-box__btn--extract:active { + transform: scale(0.98); +} + /* 下载按钮 */ .resource-download-box__btn { display: flex; @@ -734,6 +776,33 @@ margin: 0; } +/* ---- 下载按钮 + 复制/备注按钮并排 ---- */ +.resource-mobile-download-bar .resource-download-box__row { + display: flex; + align-items: stretch; + gap: 8px; +} + +.resource-mobile-download-bar .resource-download-box__row > .resource-download-box__btn { + flex: 1 1 auto; + min-width: 0; +} + +/* ---- 提取码 / 点击复制按钮 ---- */ +.resource-mobile-download-bar .resource-download-box__btn--extract { + flex: 0 0 auto; + min-height: 50px; + padding: 12px 14px; + border: 1px dashed var(--main-border-color, rgb(132 145 165 / 35%)); + border-radius: 10px; + background: var(--muted-bg-color, rgb(132 145 165 / 8%)); + color: var(--muted-color, #6b7280); + font-size: 13px; + font-weight: 600; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + /* ---- 下载按钮(核心交互元素)---- */ .resource-mobile-download-bar .resource-download-box__btn { display: flex; diff --git a/templates/parts/resource-download-box.php b/templates/parts/resource-download-box.php index ad94f5e4..a15837d2 100644 --- a/templates/parts/resource-download-box.php +++ b/templates/parts/resource-download-box.php @@ -374,25 +374,27 @@ if ($is_need_purchase && $user_amount > 0) { } ?>
  • - - data-source-index="" - data-source-type="" - style="--service-color: " - > - - - - - - - - - +
    + + data-source-index="" + data-source-type="" + style="--service-color: " + > + + + + + + + + + +
  • diff --git a/tests/widget-system/download-direct-contract.test.cjs b/tests/widget-system/download-direct-contract.test.cjs index dea13ea7..1e0d486b 100644 --- a/tests/widget-system/download-direct-contract.test.cjs +++ b/tests/widget-system/download-direct-contract.test.cjs @@ -52,6 +52,16 @@ test('the download box renders direct anchors with inline extract codes', () => assert.match(box, /\$btn_text = \$label;/); assert.match(box, /resource-download-box__btn--custom/); + // The copy button must sit beside the anchor (not stacked full-width below it) + // and must carry live clipboard attributes the delegated runtime can act on. + assert.match(box, /
    /); + assert.match(box, /resource-download-box__btn--extract/); + const css = read('assets/css/frontend/resource-meta/part.css'); + assert.match(css, /\.resource-download-box__row \{[\s\S]*?display:\s*flex;/); + assert.match(css, /\.resource-download-box__btn--extract \{/); + // Mobile download bar scopes its own copy-button rule. + assert.match(css, /\.resource-mobile-download-bar \.resource-download-box__btn--extract \{/); + // The login gate keeps its own anchor. assert.match(box, /\$btn_href = \$login_url;/); });