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

style:优化展示区域的样式

Browse Source
This commit is contained in:
Roe-xin
2026-01-13 17:05:50 +08:00
parent 83b706d5be
commit f55a5bfbcb
1 changed files with 78 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/views/exampleShowcase.ts
View File

@ -4,21 +4,33 @@
export function getExampleShowcaseContent(): string {
return `
<div class="example-showcase" id="exampleShowcase">
<div class="showcase-title">展示</div>
<div class="showcase-title">示例</div>
<div class="example-cards">
<div class="example-card" onclick="fillExample(0)">
<div class="example-icon">📝</div>
<div class="example-card" onclick="sendExample(0)">
<div class="example-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 9H9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="example-content">
<div class="example-title">代码生成</div>
<div class="example-desc">生成一个 8 位全加器的 Verilog 代码</div>
<div class="example-title">生成一个SPI控制器</div>
</div>
</div>
<div class="example-card" onclick="fillExample(1)">
<div class="example-icon">🔍</div>
<div class="example-card" onclick="sendExample(1)">
<div class="example-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="example-content">
<div class="example-title">代码分析</div>
<div class="example-desc">分析当前项目中的时序逻辑设计</div>
<div class="example-title">生成一个GMII接口的以太网UDP通信模块</div>
</div>
</div>
</div>
@ -71,26 +83,50 @@ export function getExampleShowcaseStyles(): string {
background: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border);
border-radius: 8px;
padding: 14px;
padding: 12px;
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
gap: 10px;
position: relative;
overflow: hidden;
}
.example-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 50%, rgba(168, 85, 247, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.example-card:hover::before {
opacity: 1;
}
.example-card:hover {
border-color: var(--vscode-focusBorder);
background: var(--vscode-list-hoverBackground);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.example-icon {
font-size: 28px;
line-height: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--vscode-foreground);
}
.example-icon svg {
width: 20px;
height: 20px;
}
.example-content {
@ -99,12 +135,23 @@ export function getExampleShowcaseStyles(): string {
gap: 4px;
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
}
.example-title {
font-size: 13px;
font-weight: 600;
color: var(--vscode-foreground);
line-height: 1.4;
transition: all 0.3s ease;
}
.example-card:hover .example-title {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.example-desc {
@ -175,20 +222,29 @@ export function getExampleShowcaseScript(): string {
return `
// 示例文本数组
const exampleTexts = [
'生成一个 8 位全加器的 Verilog 代码',
'分析当前项目中的时序逻辑设计'
'生成一个SPI控制器',
'生成一个GMII接口的以太网UDP通信模块'
];
// 填充示例到输入框
function fillExample(index) {
// 直接发送示例消息
function sendExample(index) {
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
if (messageInput && exampleTexts[index]) {
messageInput.value = exampleTexts[index];
messageInput.focus();
// 触发自动调整高度
if (typeof autoResizeTextarea === 'function') {
autoResizeTextarea();
}
// 直接触发发送
if (sendButton && typeof sendButton.click === 'function') {
sendButton.click();
} else if (typeof sendMessage === 'function') {
sendMessage();
}
}
}