feat：输入框下面展示案例和web端的跳转

src/views/exampleShowcase.ts

@@ -0,0 +1,216 @@
+/**
+ * 获取展示区域的 HTML 内容
+ */
+export function getExampleShowcaseContent(): string {
+  return `
+    <div class="example-showcase" id="exampleShowcase">
+      <div class="showcase-title">展示</div>
+      <div class="example-cards">
+        <div class="example-card" onclick="fillExample(0)">
+          <div class="example-icon">📝</div>
+          <div class="example-content">
+            <div class="example-title">代码生成</div>
+            <div class="example-desc">生成一个 8 位全加器的 Verilog 代码</div>
+          </div>
+        </div>
+
+        <div class="example-card" onclick="fillExample(1)">
+          <div class="example-icon">🔍</div>
+          <div class="example-content">
+            <div class="example-title">代码分析</div>
+            <div class="example-desc">分析当前项目中的时序逻辑设计</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="web-link">
+        <a href="https://iccoder.com" target="_blank" class="web-link-button">
+          <span class="link-icon">🌐</span>
+          <span>IC Coder Web端</span>
+          <span class="link-arrow">→</span>
+        </a>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 获取展示区域的样式
+ */
+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();
+    };
+  `;
+}

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 = '',
+  autoIcon: string = "",
-  liteIcon: string = '',
+  liteIcon: string = "",
-  syIcon: string = '',
+  syIcon: string = "",
-  maxIcon: string = ''
+  maxIcon: string = ""
 ): string {
   return `
     <div class="input-area centered" id="inputArea">
@@ -71,6 +76,8 @@ export function getInputAreaContent(
           </div>
         </div>
       </div>
+      <!-- 展示区域：案例和 Web 端链接 -->
+      ${getExampleShowcaseContent()}
     </div>
   `;
 }
@@ -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;