style:优化展示区域的样式

src/views/exampleShowcase.ts

@@ -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-card" onclick="sendExample(0)">
-          <div class="example-icon">📝</div>
+          <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-title">生成一个SPI控制器</div>
-            <div class="example-desc">生成一个 8 位全加器的 Verilog 代码</div>
           </div>
         </div>
 
-        <div class="example-card" onclick="fillExample(1)">
+        <div class="example-card" onclick="sendExample(1)">
-          <div class="example-icon">🔍</div>
+          <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-title">生成一个GMII接口的以太网UDP通信模块</div>
-            <div class="example-desc">分析当前项目中的时序逻辑设计</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(-3px);
-      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
 
     .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();
+        }
       }
     }