Skip to content

Commit d9f32f3

Browse files
bingggbinggg
authored
feat(interactive): ✨ enhance environment selection UI with success state and CodeBuddy webview compatibility (#113)
1 parent 54e4614 commit d9f32f3

1 file changed

Lines changed: 152 additions & 1 deletion

File tree

‎mcp/src/interactive-server.ts‎

Lines changed: 152 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -784,6 +784,71 @@ export class InteractiveServer {
784784
0% { transform: rotate(0deg); }
785785
100% { transform: rotate(360deg); }
786786
}
787+
788+
@keyframes spin {
789+
0% { transform: rotate(0deg); }
790+
100% { transform: rotate(360deg); }
791+
}
792+
793+
.success-state {
794+
text-align: center;
795+
padding: 40px 20px;
796+
animation: fadeInUp 0.8s ease-out both;
797+
}
798+
799+
.success-icon {
800+
margin-bottom: 20px;
801+
color: var(--accent-color);
802+
animation: successPulse 2s ease-in-out infinite;
803+
}
804+
805+
@keyframes successPulse {
806+
0%, 100% {
807+
transform: scale(1);
808+
filter: drop-shadow(0 0 8px rgba(103, 233, 233, 0.3));
809+
}
810+
50% {
811+
transform: scale(1.1);
812+
filter: drop-shadow(0 0 16px rgba(103, 233, 233, 0.6));
813+
}
814+
}
815+
816+
.success-title {
817+
font-size: 24px;
818+
font-weight: 700;
819+
color: var(--text-primary);
820+
margin-bottom: 12px;
821+
}
822+
823+
.success-message {
824+
color: var(--text-secondary);
825+
font-size: 16px;
826+
line-height: 1.5;
827+
}
828+
829+
.selected-env-info {
830+
margin-top: 20px;
831+
padding: 16px;
832+
background: rgba(103, 233, 233, 0.1);
833+
border: 1px solid var(--accent-color);
834+
border-radius: 12px;
835+
display: flex;
836+
align-items: center;
837+
gap: 12px;
838+
}
839+
840+
.env-label {
841+
color: var(--text-secondary);
842+
font-size: 14px;
843+
font-weight: 500;
844+
}
845+
846+
.env-value {
847+
color: var(--accent-color);
848+
font-size: 16px;
849+
font-weight: 600;
850+
font-family: var(--font-mono);
851+
}
787852
</style>
788853
</head>
789854
<body>
@@ -838,6 +903,20 @@ export class InteractiveServer {
838903
<div class="spinner"></div>
839904
<span>正在配置环境...</span>
840905
</div>
906+
907+
<div class="success-state" id="successState" style="display: none;">
908+
<div class="success-icon">
909+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
910+
<path d="M20 6L9 17l-5-5"/>
911+
</svg>
912+
</div>
913+
<h2 class="success-title">环境配置成功！</h2>
914+
<p class="success-message">已成功选择云开发环境</p>
915+
<div class="selected-env-info">
916+
<span class="env-label">环境 ID:</span>
917+
<span class="env-value" id="selectedEnvDisplay"></span>
918+
</div>
919+
</div>
841920
</div>
842921
</div>
843922
@@ -911,7 +990,14 @@ export class InteractiveServer {
911990
}).then(data => {
912991
console.log('📥 响应数据:', data);
913992
if (data.success) {
914-
console.log('✅ 请求成功，即将关闭窗口');
993+
console.log('✅ 请求成功，展示成功提示');
994+
// 隐藏选择区和按钮，仅展示成功提示
995+
document.getElementById('envList').style.display = 'none';
996+
document.querySelector('.actions').style.display = 'none';
997+
document.getElementById('loading').style.display = 'none';
998+
document.getElementById('successState').style.display = 'block';
999+
// 显示选中的环境 ID
1000+
document.getElementById('selectedEnvDisplay').textContent = selectedEnvId;
9151001
window.close();
9161002
} else {
9171003
console.error('❌ 请求失败:', data);
@@ -1930,6 +2016,71 @@ export class InteractiveServer {
19302016
0% { transform: rotate(0deg); }
19312017
100% { transform: rotate(360deg); }
19322018
}
2019+
2020+
@keyframes spin {
2021+
0% { transform: rotate(0deg); }
2022+
100% { transform: rotate(360deg); }
2023+
}
2024+
2025+
.success-state {
2026+
text-align: center;
2027+
padding: 40px 20px;
2028+
animation: fadeInUp 0.8s ease-out both;
2029+
}
2030+
2031+
.success-icon {
2032+
margin-bottom: 20px;
2033+
color: var(--accent-color);
2034+
animation: successPulse 2s ease-in-out infinite;
2035+
}
2036+
2037+
@keyframes successPulse {
2038+
0%, 100% {
2039+
transform: scale(1);
2040+
filter: drop-shadow(0 0 8px rgba(103, 233, 233, 0.3));
2041+
}
2042+
50% {
2043+
transform: scale(1.1);
2044+
filter: drop-shadow(0 0 16px rgba(103, 233, 233, 0.6));
2045+
}
2046+
}
2047+
2048+
.success-title {
2049+
font-size: 24px;
2050+
font-weight: 700;
2051+
color: var(--text-primary);
2052+
margin-bottom: 12px;
2053+
}
2054+
2055+
.success-message {
2056+
color: var(--text-secondary);
2057+
font-size: 16px;
2058+
line-height: 1.5;
2059+
}
2060+
2061+
.selected-env-info {
2062+
margin-top: 20px;
2063+
padding: 16px;
2064+
background: rgba(103, 233, 233, 0.1);
2065+
border: 1px solid var(--accent-color);
2066+
border-radius: 12px;
2067+
display: flex;
2068+
align-items: center;
2069+
gap: 12px;
2070+
}
2071+
2072+
.env-label {
2073+
color: var(--text-secondary);
2074+
font-size: 14px;
2075+
font-weight: 500;
2076+
}
2077+
2078+
.env-value {
2079+
color: var(--accent-color);
2080+
font-size: 16px;
2081+
font-weight: 600;
2082+
font-family: var(--font-mono);
2083+
}
19332084
</style>
19342085
</head>
19352086
<body>

0 commit comments

Comments
 (0)