@coffic/cosy-ui 0.9.17 → 0.9.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -69,6 +69,7 @@ const {
|
|
|
69
69
|
favicon,
|
|
70
70
|
'class:list': classList,
|
|
71
71
|
background = 'default',
|
|
72
|
+
loadingDelay = 1000,
|
|
72
73
|
} = Astro.props;
|
|
73
74
|
|
|
74
75
|
// 处理背景色 class
|
|
@@ -119,6 +120,6 @@ let bodyClasses = [
|
|
|
119
120
|
</head>
|
|
120
121
|
<body class:list={[bodyClasses, classList, 'min-h-screen']}>
|
|
121
122
|
<slot />
|
|
122
|
-
<LoadingOverlay />
|
|
123
|
+
<LoadingOverlay loadingDelay={loadingDelay} />
|
|
123
124
|
</body>
|
|
124
125
|
</html>
|
|
@@ -4,14 +4,16 @@
|
|
|
4
4
|
*
|
|
5
5
|
* @description
|
|
6
6
|
* LoadingOverlay 组件是一个全屏加载弹出层，用于在页面跳转时显示加载状态。
|
|
7
|
-
* 它监听 Astro
|
|
7
|
+
* 它监听 Astro 的页面过渡事件，在跳转开始时延迟显示，跳转完成后隐藏。
|
|
8
|
+
* 为了避免频繁的视觉干扰，只有在加载时间超过指定延迟时间（默认1秒）时才显示。
|
|
8
9
|
*
|
|
9
10
|
* @design
|
|
10
11
|
* 设计理念：
|
|
11
12
|
* 1. 全屏覆盖 - 使用固定定位覆盖整个视口
|
|
12
13
|
* 2. 居中显示 - 加载指示器在屏幕中央显示
|
|
13
14
|
* 3. 平滑动画 - 使用淡入淡出动画效果
|
|
14
|
-
* 4.
|
|
15
|
+
* 4. 延迟显示 - 避免短时间加载的视觉干扰
|
|
16
|
+
* 5. 可定制性 - 支持自定义加载文本、样式和延迟时间
|
|
15
17
|
*
|
|
16
18
|
* @usage
|
|
17
19
|
* 基本用法：
|
|
@@ -23,9 +25,9 @@
|
|
|
23
25
|
* <LoadingOverlay />
|
|
24
26
|
* ```
|
|
25
27
|
*
|
|
26
|
-
*
|
|
28
|
+
* 自定义延迟时间：
|
|
27
29
|
* ```astro
|
|
28
|
-
* <LoadingOverlay text="页面加载中..." />
|
|
30
|
+
* <LoadingOverlay delay={2000} text="页面加载中..." />
|
|
29
31
|
* ```
|
|
30
32
|
*
|
|
31
33
|
* 自定义样式：
|
|
@@ -33,6 +35,7 @@
|
|
|
33
35
|
* <LoadingOverlay
|
|
34
36
|
* text="正在跳转..."
|
|
35
37
|
* class="custom-loading-overlay"
|
|
38
|
+
* delay={1500}
|
|
36
39
|
* />
|
|
37
40
|
* ```
|
|
38
41
|
*/
|
|
@@ -48,13 +51,16 @@ export interface Props {
|
|
|
48
51
|
showSpinner?: boolean;
|
|
49
52
|
/** 加载动画类型 */
|
|
50
53
|
spinnerType?: 'dots' | 'spinner' | 'pulse';
|
|
54
|
+
/** 延迟显示时间（毫秒），默认1000ms */
|
|
55
|
+
loadingDelay?: number;
|
|
51
56
|
}
|
|
52
57
|
|
|
53
58
|
const {
|
|
54
|
-
text = '
|
|
59
|
+
text = 'Loading...',
|
|
55
60
|
class: className,
|
|
56
61
|
showSpinner = true,
|
|
57
62
|
spinnerType = 'dots',
|
|
63
|
+
loadingDelay = 1000,
|
|
58
64
|
} = Astro.props;
|
|
59
65
|
|
|
60
66
|
// 生成唯一的 ID
|
|
@@ -106,55 +112,67 @@ const overlayId = `loading-overlay-${Math.random().toString(36).substr(2, 9)}`;
|
|
|
106
112
|
</div>
|
|
107
113
|
</div>
|
|
108
114
|
|
|
109
|
-
<script define:vars={{ overlayId }}>
|
|
115
|
+
<script define:vars={{ overlayId, loadingDelay }}>
|
|
110
116
|
// 获取加载弹出层元素
|
|
111
117
|
const overlay = document.getElementById(overlayId);
|
|
112
118
|
|
|
113
119
|
if (overlay) {
|
|
114
|
-
|
|
120
|
+
let loadingStartTime = null;
|
|
121
|
+
let showTimeout = null;
|
|
122
|
+
let isLoading = false;
|
|
123
|
+
|
|
124
|
+
// 显示加载弹出层的函数
|
|
125
|
+
const showOverlay = () => {
|
|
126
|
+
if (isLoading) return;
|
|
127
|
+
|
|
128
|
+
isLoading = true;
|
|
129
|
+
loadingStartTime = Date.now();
|
|
130
|
+
|
|
131
|
+
// 延迟显示，避免短时间加载的视觉干扰
|
|
132
|
+
showTimeout = window.setTimeout(() => {
|
|
133
|
+
overlay.style.opacity = '1';
|
|
134
|
+
overlay.style.pointerEvents = 'auto';
|
|
135
|
+
}, loadingDelay);
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
// 隐藏加载弹出层的函数
|
|
139
|
+
const hideOverlay = () => {
|
|
140
|
+
if (showTimeout) {
|
|
141
|
+
clearTimeout(showTimeout);
|
|
142
|
+
showTimeout = null;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
isLoading = false;
|
|
146
|
+
loadingStartTime = null;
|
|
115
147
|
|
|
116
|
-
// 监听 Astro 页面过渡事件
|
|
117
|
-
document.addEventListener('astro:page-load', () => {
|
|
118
|
-
console.log('astro:page-load - hiding overlay');
|
|
119
148
|
overlay.style.opacity = '0';
|
|
120
149
|
overlay.style.pointerEvents = 'none';
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
// 监听 Astro 页面过渡事件
|
|
153
|
+
document.addEventListener('astro:page-load', () => {
|
|
154
|
+
hideOverlay();
|
|
121
155
|
});
|
|
122
156
|
|
|
123
157
|
document.addEventListener('astro:before-preparation', () => {
|
|
124
|
-
|
|
125
|
-
overlay.style.opacity = '1';
|
|
126
|
-
overlay.style.pointerEvents = 'auto';
|
|
158
|
+
showOverlay();
|
|
127
159
|
});
|
|
128
160
|
|
|
129
161
|
// 监听路由变化
|
|
130
162
|
document.addEventListener('astro:before-swap', () => {
|
|
131
|
-
|
|
132
|
-
overlay.style.opacity = '1';
|
|
133
|
-
overlay.style.pointerEvents = 'auto';
|
|
163
|
+
showOverlay();
|
|
134
164
|
});
|
|
135
165
|
|
|
136
166
|
document.addEventListener('astro:after-swap', () => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
'astro:before-preparation',
|
|
147
|
-
'astro:after-preparation',
|
|
148
|
-
'astro:before-swap',
|
|
149
|
-
'astro:after-swap',
|
|
150
|
-
'astro:page-load',
|
|
151
|
-
'astro:page-loading',
|
|
152
|
-
];
|
|
153
|
-
|
|
154
|
-
astroEvents.forEach((eventName) => {
|
|
155
|
-
document.addEventListener(eventName, (e) => {
|
|
156
|
-
console.log(`Event triggered: ${eventName}`, e);
|
|
157
|
-
});
|
|
167
|
+
// 如果加载时间很短，立即隐藏
|
|
168
|
+
if (loadingStartTime && Date.now() - loadingStartTime < loadingDelay) {
|
|
169
|
+
hideOverlay();
|
|
170
|
+
} else {
|
|
171
|
+
// 否则延迟隐藏，给用户一个视觉反馈
|
|
172
|
+
setTimeout(() => {
|
|
173
|
+
hideOverlay();
|
|
174
|
+
}, 100);
|
|
175
|
+
}
|
|
158
176
|
});
|
|
159
177
|
}
|
|
160
178
|
</script>
|
|
@@ -66,4 +66,10 @@ export interface IMetaProps {
|
|
|
66
66
|
* @default 'default'
|
|
67
67
|
*/
|
|
68
68
|
background?: 'default' | 'white' | 'gray' | 'dark' | 'gradient-blue' | 'gradient-pink' | 'gradient-green';
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* 加载延迟时间（毫秒），默认1000ms
|
|
72
|
+
* @default 1000
|
|
73
|
+
*/
|
|
74
|
+
loadingDelay?: number;
|
|
69
75
|
}
|