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

web/template/syzoj/problem.php

@@ -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);
       });