全局复制事件监听与提示浮层

1
<script lang="ts">
2
import { onMount } from "svelte";
3

4
const SHOW_DURATION = 3000;
5
let isVisible = $state(false);
6
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
7

8
const showCopyMessage = () => {
9
  if (hideTimeout) {
10
    clearTimeout(hideTimeout);
11
    hideTimeout = null;
12
  }
13
  isVisible = false;
14
  setTimeout(() => {
15
    isVisible = true;
16
    hideTimeout = setTimeout(() => {
17
      isVisible = false;
18
    }, SHOW_DURATION);
19
  }, 10); // 短暂延迟触发重排
20
};
21

22
const handleCopy = () => {
23
  const selection = window.getSelection();
24
  if (selection?.toString().trim()) showCopyMessage();
25
};
26

27
onMount(() => {
28
  document.addEventListener("copy", handleCopy);
29
  return () => {
30
    document.removeEventListener("copy", handleCopy);
31
    if (hideTimeout) clearTimeout(hideTimeout);
32
  };
33
});
34
</script>
35

36
<div class="copy-message" class:show={isVisible}>
37
  <div class="message-background">
38
    <div class="progress-bar" class:active={isVisible}></div>
39
  </div>
40
  <div class="message-content">
41
    <span class="text">✨️ 复制成功，转载请标注本文地址</span>
42
  </div>
43
</div>
44

45
<style>
46
  .copy-message {
47
    --duration: 3000ms;
48
    --height: 50px;
49
    --transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
50
    --bg-gradient: linear-gradient(90deg, var(--primary) 0%, var(--primary) 25%, var(--primary) 50%, var(--primary) 75%, var(--primary) 100%);
51
    position: fixed;
52
    top: 0;
53
    left: 0;
54
    width: 100%;
55
    height: var(--height);
56
    display: flex;
57
    align-items: center;
58
    justify-content: center;
59
    z-index: 9999;
60
    transform: translateY(-100%);
61
    transition: var(--transition), opacity 0.4s ease;
62
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
63
    overflow: hidden;
64
    opacity: 0;
65
  }
66

67
  .copy-message.show { transform: translateY(0); opacity: 1; }
68

69
  .copy-message .message-background {
70
    position: absolute;
71
    inset: 0;
72
    background: var(--bg-gradient);
73
    z-index: 1;
74
  }
75

76
  .copy-message .progress-bar {
77
    position: absolute;
78
    top: 0;
79
    left: -100%;
80
    width: 100%;
81
    height: 100%;
82
    background: linear-gradient(
83
      90deg,
84
      rgba(255, 255, 255, 0) 0%,
85
      rgba(255, 255, 255, 0.3) 50%,
86
      rgba(255, 255, 255, 0) 100%
87
    );
88
    z-index: 2;
89
    transform: translateX(0);
90
    transition: transform 0ms;
91
  }
92

93
  .copy-message .progress-bar.active {
94
    transform: translateX(200%);
95
    transition: transform var(--duration) linear;
96
  }
97

98
  .copy-message .message-content {
99
    display: flex;
100
    align-items: center;
101
    font-size: 16px;
102
    font-weight: 600;
103
    color: white;
104
    position: relative;
105
    z-index: 3;
106
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
107
  }
108

109
  @media (max-width: 768px) {
110
    .copy-message { --height: 44px; }
111
    .copy-message .message-content {
112
      font-size: 14px;
113
      padding: 0 16px;
114
      text-align: center;
115
    }
116
  }
117

118
  @media (prefers-color-scheme: dark) {
119
    .copy-message {
120
      --bg-gradient: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
121
    }
122
  }
123
</style>