feat: 优化样例复制功能,增加成功和失败提示

This commit is contained in:
2026-04-12 15:06:21 +08:00
parent bae46aef77
commit 16e678d924

View File

@@ -67,7 +67,10 @@ if ($pr_flag) {
margin: 0;
padding: 48px 18px 16px;
overflow: auto;
background: transparent;
background: #ffffff;
border: 1px solid #d8e2f0;
border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.sample-box code {
@@ -334,6 +337,9 @@ if ($pr_flag) {
$showSampleIndex = count($samplePairs) > 1;
$singleSampleInput = trim_sample_chunk($sampleInputText);
$singleSampleOutput = trim_sample_chunk($sampleOutputText);
$sampleCopyLabel = $MSG_COPY;
$sampleCopySuccessLabel = $MSG_COPY . $MSG_SUCCESS . '!';
$sampleCopyFailLabel = $MSG_COPY . $MSG_FAIL . '!';
?>
<?php if ($showSampleIndex) { ?>
<?php foreach ($samplePairs as $sampleIndex => $samplePair) { ?>
@@ -342,7 +348,8 @@ if ($pr_flag) {
<h4 class="ui top attached block header sample-header"><?php echo $MSG_Sample_Input . ' ' . ($sampleIndex + 1); ?></h4>
<div class="ui bottom attached segment font-content sample-box">
<span class="copy sample-copy"
data-clipboard-text="<?php echo format_sample_attr($samplePair['input']); ?>"><?php echo $MSG_COPY; ?></span>
data-copy-label="<?php echo htmlentities($sampleCopyLabel, ENT_QUOTES, 'UTF-8'); ?>"
data-clipboard-text="<?php echo format_sample_attr($samplePair['input']); ?>"><?php echo $sampleCopyLabel; ?></span>
<pre
style="margin-top: 0; margin-bottom: 0; "><code class="lang-plain"><?php echo format_sample_code($samplePair['input']); ?></code></pre>
</div>
@@ -353,7 +360,8 @@ if ($pr_flag) {
<h4 class="ui top attached block header sample-header"><?php echo $MSG_Sample_Output . ' ' . ($sampleIndex + 1); ?></h4>
<div class="ui bottom attached segment font-content sample-box">
<span class="copy sample-copy"
data-clipboard-text="<?php echo format_sample_attr($samplePair['output']); ?>"><?php echo $MSG_COPY; ?></span>
data-copy-label="<?php echo htmlentities($sampleCopyLabel, ENT_QUOTES, 'UTF-8'); ?>"
data-clipboard-text="<?php echo format_sample_attr($samplePair['output']); ?>"><?php echo $sampleCopyLabel; ?></span>
<pre
style="margin-top: 0; margin-bottom: 0; "><code class="lang-plain"><?php echo format_sample_code($samplePair['output']); ?></code></pre>
</div>
@@ -367,7 +375,8 @@ if ($pr_flag) {
<h4 class="ui top attached block header sample-header"><?php echo $MSG_Sample_Input ?></h4>
<div class="ui bottom attached segment font-content sample-box">
<span class="copy sample-copy"
data-clipboard-text="<?php echo format_sample_attr($singleSampleInput); ?>"><?php echo $MSG_COPY; ?></span>
data-copy-label="<?php echo htmlentities($sampleCopyLabel, ENT_QUOTES, 'UTF-8'); ?>"
data-clipboard-text="<?php echo format_sample_attr($singleSampleInput); ?>"><?php echo $sampleCopyLabel; ?></span>
<pre
style="margin-top: 0; margin-bottom: 0; "><code class="lang-plain"><?php echo format_sample_code($singleSampleInput); ?></code></pre>
</div>
@@ -380,7 +389,8 @@ if ($pr_flag) {
<h4 class="ui top attached block header sample-header"><?php echo $MSG_Sample_Output ?></h4>
<div class="ui bottom attached segment font-content sample-box">
<span class="copy sample-copy"
data-clipboard-text="<?php echo format_sample_attr($singleSampleOutput); ?>"><?php echo $MSG_COPY; ?></span>
data-copy-label="<?php echo htmlentities($sampleCopyLabel, ENT_QUOTES, 'UTF-8'); ?>"
data-clipboard-text="<?php echo format_sample_attr($singleSampleOutput); ?>"><?php echo $sampleCopyLabel; ?></span>
<pre
style="margin-top: 0; margin-bottom: 0; "><code class="lang-plain"><?php echo format_sample_code($singleSampleOutput); ?></code></pre>
</div>
@@ -764,19 +774,27 @@ if ($pr_flag) {
<script>
var sampleCopyLabels = {
idle: <?php echo json_encode($sampleCopyLabel, JSON_UNESCAPED_UNICODE); ?>,
success: <?php echo json_encode($sampleCopySuccessLabel, JSON_UNESCAPED_UNICODE); ?>,
fail: <?php echo json_encode($sampleCopyFailLabel, JSON_UNESCAPED_UNICODE); ?>
};
$('.sample-copy').each(function () {
var button = $(this);
var defaultLabel = button.text();
var defaultLabel = button.attr('data-copy-label') || sampleCopyLabels.idle;
var clipboard = new Clipboard(this);
button.text(defaultLabel);
clipboard.on('success', function (e) {
button.text("<?php echo $MSG_COPY . $MSG_SUCCESS; ?>!");
button.text(sampleCopyLabels.success);
setTimeout(function () { button.text(defaultLabel); }, 1500);
console.log(e);
});
clipboard.on('error', function (e) {
button.text("<?php echo $MSG_COPY . $MSG_FAIL; ?>!");
button.text(sampleCopyLabels.fail);
setTimeout(function () { button.text(defaultLabel); }, 1500);
console.log(e);
});