pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增强WebView内容的响应式设计，优化样式和布局，更新标题和描述文本

Browse Source
This commit is contained in:
Roe-xin
2026-01-28 17:33:06 +08:00
parent eae3968465
commit d0462ca4b9
1 changed files with 66 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/views/webviewContent.ts
View File

@ -400,6 +400,66 @@ export function getWebviewContent(
.quick-btn:hover { .quick-btn:hover {
background: var(--vscode-button-secondaryHoverBackground); background: var(--vscode-button-secondaryHoverBackground);
} }
/* 响应式调整 */
@media (max-height: 600px) {
.header {
/* 使用 clamp 动态调整内边距: 最小值 5px, 理想值 2vh, 最大值 20px */
padding: clamp(5px, 2vh, 20px) 20px;
flex: 0 0 auto;
min-height: auto;
}
.header img {
/* 使用 clamp 动态调整图片高度: 最小值 40px, 理想值 10vh, 最大值 60px */
max-height: clamp(40px, 10vh, 60px) !important;
}
.header p {
/* 使用 clamp 动态调整字体大小 */
font-size: clamp(12px, 2.5vh, 14px) !important;
margin-top: clamp(4px, 1.5vh, 8px) !important;
line-height: 1.2 !important;
margin-bottom: clamp(4px, 1.5vh, 8px) !important;
}
.quick-actions {
margin-bottom: 5px;
gap: 5px;
}
.quick-btn {
padding: 4px 8px;
font-size: 12px;
}
.chat-container {
padding: 0 10px 10px 10px;
}
}
/* 高度极小时隐藏描述文本 */
@media (max-height: 450px) {
.header p {
display: none !important;
}
.header {
padding: 4px;
}
.quick-actions {
margin-bottom: 4px;
}
}
@media (max-width: 480px) {
.header h1 {
font-size: 24px;
}
.header p {
font-size: 14px;
}
.quick-actions {
justify-content: center;
}
.chat-container {
padding: 0 10px 10px 10px;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -407,11 +467,13 @@ export function getWebviewContent(
${getProgressBarContent()} ${getProgressBarContent()}
${getInvitationModalContent(qrCodeUri, logoUri)} ${getInvitationModalContent(qrCodeUri, logoUri)}
<div class="header"> <div class="header">
<div style="display: flex; align-items: center; justify-content: center; gap: 15px;"> <div style="display: flex; align-items: center; justify-content: center;">
<img src="${iconUri}" alt="IC Coder" style="width: 48px; height: 48px;" /> <img src="${logoUri}" alt="IC Coder" style="max-width: 100%; height: auto; max-height: 80px;" />
<h1 style="margin: 0; font-size: 36px;">IC Coder</h1>
</div> </div>
<p style="font-size: 16px; margin-top: 12px;">The Agentic AI Verilog Coding Platform, 将芯片设计与验证的效率提升至少20倍！</p> <p style="font-size: 16px; margin-top: 12px; line-height: 1.5;">
The <span style="background: linear-gradient(to right, #42bcff, #4A9EFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;">Agentic AI</span> Verilog Coding Platform,
<span style="display: block; margin-top: 8px;">将芯片设计与验证的效率提升至少20倍！</span>
</p>
</div> </div>
<div class="chat-container"> <div class="chat-container">