diff --git a/src/views/exampleShowcase.ts b/src/views/exampleShowcase.ts new file mode 100644 index 0000000..1d8ff39 --- /dev/null +++ b/src/views/exampleShowcase.ts @@ -0,0 +1,216 @@ +/** + * 获取展示区域的 HTML 内容 + */ +export function getExampleShowcaseContent(): string { + return ` +
+
展示
+
+
+
📝
+
+
代码生成
+
生成一个 8 位全加器的 Verilog 代码
+
+
+ +
+
🔍
+
+
代码分析
+
分析当前项目中的时序逻辑设计
+
+
+
+ +
+ + 🌐 + IC Coder Web端 + → + +
+
+ `; +} + +/** + * 获取展示区域的样式 + */ +export function getExampleShowcaseStyles(): string { + return ` + .example-showcase { + margin-top: 24px; + padding: 0; + opacity: 1; + transition: opacity 0.3s ease; + } + + .example-showcase.hidden { + display: none; + } + + .showcase-title { + font-size: 14px; + font-weight: 600; + color: var(--vscode-foreground); + margin-bottom: 12px; + text-align: left; + } + + .example-cards { + display: flex; + flex-direction: row; + gap: 12px; + margin-bottom: 20px; + } + + .example-card { + flex: 1; + min-width: 0; + background: var(--vscode-input-background); + border: 1px solid var(--vscode-input-border); + border-radius: 8px; + padding: 14px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + flex-direction: row; + align-items: center; + gap: 12px; + } + + .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); + } + + .example-icon { + font-size: 28px; + line-height: 1; + flex-shrink: 0; + } + + .example-content { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; + min-width: 0; + } + + .example-title { + font-size: 13px; + font-weight: 600; + color: var(--vscode-foreground); + } + + .example-desc { + font-size: 11px; + color: var(--vscode-descriptionForeground); + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + .web-link { + display: flex; + justify-content: center; + padding-top: 20px; + border-top: 1px solid var(--vscode-panel-border); + margin-top: 8px; + } + + .web-link-button { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + background: transparent; + border: none; + text-decoration: none; + font-size: 14px; + font-weight: 600; + transition: all 0.2s ease; + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #a855f7 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + outline: none; + } + + .web-link-button:focus { + outline: none; + } + + .web-link-button:hover { + transform: translateY(-1px); + opacity: 0.8; + } + + .link-icon { + font-size: 16px; + } + + .link-arrow { + font-size: 16px; + transition: transform 0.2s ease; + } + + .web-link-button:hover .link-arrow { + transform: translateX(3px); + } + `; +} + +/** + * 获取展示区域的脚本 + */ +export function getExampleShowcaseScript(): string { + return ` + // 示例文本数组 + const exampleTexts = [ + '生成一个 8 位全加器的 Verilog 代码', + '分析当前项目中的时序逻辑设计' + ]; + + // 填充示例到输入框 + function fillExample(index) { + const messageInput = document.getElementById('messageInput'); + if (messageInput && exampleTexts[index]) { + messageInput.value = exampleTexts[index]; + messageInput.focus(); + // 触发自动调整高度 + if (typeof autoResizeTextarea === 'function') { + autoResizeTextarea(); + } + } + } + + // 监听消息变化，自动隐藏/显示展示区域 + function updateShowcaseVisibility() { + const showcase = document.getElementById('exampleShowcase'); + if (showcase) { + if (hasMessages) { + showcase.classList.add('hidden'); + } else { + showcase.classList.remove('hidden'); + } + } + } + + // 扩展原有的布局更新函数 + const originalUpdateInputAreaLayout = updateInputAreaLayout; + updateInputAreaLayout = function() { + if (originalUpdateInputAreaLayout) { + originalUpdateInputAreaLayout(); + } + updateShowcaseVisibility(); + }; + `; +} diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts index 8aa6815..9baa1bd 100644 --- a/src/views/inputArea.ts +++ b/src/views/inputArea.ts @@ -29,16 +29,21 @@ import { getOptimizeButtonStyles, getOptimizeButtonScript, } from "./optimizeButton"; +import { + getExampleShowcaseContent, + getExampleShowcaseStyles, + getExampleShowcaseScript, +} from "./exampleShowcase"; import { sendIconSvg, stopIconSvg } from "../constants/toolIcons"; /** * 获取输入区域的 HTML 内容 */ export function getInputAreaContent( - autoIcon: string = '', - liteIcon: string = '', - syIcon: string = '', - maxIcon: string = '' + autoIcon: string = "", + liteIcon: string = "", + syIcon: string = "", + maxIcon: string = "" ): string { return `
@@ -71,6 +76,8 @@ export function getInputAreaContent(
+ + ${getExampleShowcaseContent()} `; } @@ -86,6 +93,7 @@ export function getInputAreaStyles(): string { ${getContextDisplayStyles()} ${getContextCompressStyles()} ${getOptimizeButtonStyles()} + ${getExampleShowcaseStyles()} .input-area { border-top: 1px solid var(--vscode-panel-border); padding-top: 15px; @@ -95,7 +103,7 @@ export function getInputAreaStyles(): string { /* 居中模式：未发起对话时 */ .input-area.centered { position: absolute; - top: 50%; + top: 55%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); @@ -292,6 +300,7 @@ export function getInputAreaScript(): string { ${getContextDisplayScript()} ${getContextCompressScript()} ${getOptimizeButtonScript()} + ${getExampleShowcaseScript()} // 对话状态管理 let isConversationActive = false;