Skip to content

Commit 933ea54

Browse files
qianmoQqianmoQ
committed
feat (core): 添加程序加载动画
1 parent 41f1f71 commit 933ea54

3 files changed

Lines changed: 151 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,157 @@
55
<link rel="icon" type="image/svg+xml" href="/codeforge.svg"/>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
77
<title>CodeForge</title>
8+
<style>
9+
/* 预加载样式 */
10+
#app-loading {
11+
position: fixed;
12+
top: 0;
13+
left: 0;
14+
width: 100%;
15+
height: 100%;
16+
background-color: #f9fafb;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
z-index: 9999;
22+
}
23+
24+
.loading-logo {
25+
width: 80px;
26+
height: 80px;
27+
margin-bottom: 2rem;
28+
position: relative;
29+
}
30+
31+
.loading-logo img {
32+
width: 100%;
33+
height: 100%;
34+
animation: pulse 2s infinite;
35+
}
36+
37+
.loading-spinner {
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
border: 2px solid transparent;
44+
border-top: 2px solid #3b82f6;
45+
border-radius: 50%;
46+
animation: spin 1s linear infinite;
47+
}
48+
49+
.loading-title {
50+
font-size: 2rem;
51+
font-weight: bold;
52+
color: #1f2937;
53+
margin-bottom: 0.5rem;
54+
}
55+
56+
.loading-subtitle {
57+
color: #6b7280;
58+
margin-bottom: 2rem;
59+
}
60+
61+
.loading-dots {
62+
display: flex;
63+
gap: 0.25rem;
64+
}
65+
66+
.loading-dot {
67+
width: 12px;
68+
height: 12px;
69+
background-color: #3b82f6;
70+
border-radius: 50%;
71+
animation: bounce 1.2s infinite;
72+
}
73+
74+
.loading-dot:nth-child(2) {
75+
animation-delay: 0.1s;
76+
}
77+
78+
.loading-dot:nth-child(3) {
79+
animation-delay: 0.2s;
80+
}
81+
82+
@keyframes spin {
83+
to {
84+
transform: rotate(360deg);
85+
}
86+
}
87+
88+
@keyframes pulse {
89+
0%, 100% {
90+
opacity: 1;
91+
transform: scale(1);
92+
}
93+
50% {
94+
opacity: 0.8;
95+
transform: scale(1.05);
96+
}
97+
}
98+
99+
@keyframes bounce {
100+
0%, 80%, 100% {
101+
transform: translateY(0);
102+
}
103+
40% {
104+
transform: translateY(-10px);
105+
}
106+
}
107+
</style>
8108
</head>
9109

10110
<body>
111+
<!-- 预加载动画 -->
112+
<div id="app-loading">
113+
<div class="loading-logo">
114+
<img src="/codeforge.svg" alt="CodeForge"/>
115+
<div class="loading-spinner"></div>
116+
</div>
117+
<h1 class="loading-title">CodeForge</h1>
118+
<p class="loading-subtitle">轻量级代码执行器</p>
119+
<div class="loading-dots">
120+
<div class="loading-dot"></div>
121+
<div class="loading-dot"></div>
122+
<div class="loading-dot"></div>
123+
</div>
124+
</div>
125+
126+
<!-- Vue 应用 -->
11127
<div id="app"></div>
128+
12129
<script type="module" src="/src/main.ts"></script>
130+
<script>
131+
console.log('🎬 页面脚本已加载，等待 app-ready 事件')
132+
133+
// 监听应用准备就绪事件
134+
window.addEventListener('app-ready', function () {
135+
console.log('📡 收到 app-ready 事件，开始隐藏加载动画')
136+
const appLoading = document.getElementById('app-loading');
137+
if (appLoading) {
138+
console.log('🎭 开始淡出动画')
139+
appLoading.style.opacity = '0';
140+
appLoading.style.transition = 'opacity 0.3s ease-out';
141+
setTimeout(() => {
142+
console.log('✨ 预加载动画已移除')
143+
appLoading.remove();
144+
}, 300);
145+
}
146+
else {
147+
console.log('⚠️ 找不到预加载元素')
148+
}
149+
});
150+
151+
// 超时保护，避免永远加载
152+
setTimeout(() => {
153+
console.log('⏰ 超时保护触发，强制隐藏加载动画')
154+
const appLoading = document.getElementById('app-loading');
155+
if (appLoading) {
156+
appLoading.remove();
157+
}
158+
}, 10000); // 10秒超时
159+
</script>
13160
</body>
14161
</html>

‎src-tauri/tauri.conf.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"minHeight": 600,
1818
"width": 1800,
1919
"height": 1200,
20+
"center": true,
2021
"additionalBrowserArgs": "--disable-context-menu"
2122
}
2223
],

‎src/App.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -448,6 +448,9 @@ onMounted(async () => {
448448
unlistenExecutionStoppedFn = await listen('code-execution-stopped', handleExecutionStopped)
449449
unlistenExecutionTimeoutFn = await listen('code-execution-timeout', handleExecutionTimeout)
450450
unlistenExecutionErrorFn = await listen('code-execution-error', handleExecutionError)
451+
452+
// 触发 app-ready 事件，通知主进程
453+
window.dispatchEvent(new CustomEvent('app-ready'))
451454
})
452455
453456
onUnmounted(() => {

0 commit comments

Comments
 (0)