From 318d3964bd3056d62fff845fba0701df28935e6c Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Mon, 29 Dec 2025 11:26:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(contextButton):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E6=96=87=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=8F=8A=E7=9B=B8=E5=85=B3=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增上下文按钮组件及其 HTML 内容、样式和脚本代码
- 在输入区域中集成上下文按钮组件，替换原内联代码
- 将上下文按钮样式从输入区域样式中移除并统一管理
- 将上下文按钮事件处理函数移入独立脚本并集成至输入区域脚本
- 保持输入区域功能完整性，简化代码结构，提高可维护性
---
 src/views/contextButton.ts | 71 ++++++++++++++++++++++++++++++++++++++
 src/views/inputArea.ts     | 53 +++++-----------------------
 2 files changed, 79 insertions(+), 45 deletions(-)
 create mode 100644 src/views/contextButton.ts

diff --git a/src/views/contextButton.ts b/src/views/contextButton.ts
new file mode 100644
index 0000000..b1d6fed
--- /dev/null
+++ b/src/views/contextButton.ts
@@ -0,0 +1,71 @@
+/**
+ * 添加上下文按钮组件
+ */
+
+/**
+ * 获取添加上下文按钮的 HTML 内容
+ */
+export function getContextButtonContent(): string {
+  return `
+    <div class="tooltip">
+      <button class="add-context-button" onclick="handleAddContext()">
+        <svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200">
+          <path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path>
+        </svg>
+        <span class="add-context-label">添加上下文</span>
+      </button>
+      <span class="tooltiptext">添加文件或代码片段作为上下文</span>
+    </div>
+  `;
+}
+
+/**
+ * 获取添加上下文按钮的样式
+ */
+export function getContextButtonStyles(): string {
+  return `
+    /* 添加上下文按钮样式 */
+    .add-context-button {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: rgba(128, 128, 128, 0.2);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 6px;
+      color: var(--vscode-foreground);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    .add-context-button:hover {
+      background: rgba(128, 128, 128, 0.3);
+      border-color: var(--vscode-focusBorder);
+    }
+
+    .add-context-button svg {
+      width: 16px;
+      height: 16px;
+      color: #409eff;
+    }
+
+    .add-context-label {
+      white-space: nowrap;
+    }
+  `;
+}
+
+/**
+ * 获取添加上下文按钮的脚本
+ */
+export function getContextButtonScript(): string {
+  return `
+    // 添加上下文处理函数
+    function handleAddContext() {
+      // 发送添加上下文请求到扩展
+      vscode.postMessage({ command: 'addContext' });
+    }
+  `;
+}
diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts
index bdc3bbe..8c9ba5c 100644
--- a/src/views/inputArea.ts
+++ b/src/views/inputArea.ts
@@ -4,6 +4,11 @@ import {
   getModelSelectorStyles,
   getModelSelectorScript
 } from "./modelSelector";
+import {
+  getContextButtonContent,
+  getContextButtonStyles,
+  getContextButtonScript
+} from "./contextButton";
 
 /**
  * 获取输入区域的 HTML 内容
@@ -15,14 +20,7 @@ export function getInputAreaContent(): string {
         <div class="input-wrapper">
           <!-- 顶部工具栏 -->
           <div class="input-top-toolbar">
-            <!-- 添加上下文按钮 -->
-            <div class="tooltip">
-              <button class="add-context-button" onclick="handleAddContext()">
-                <svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200"><path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path></svg>
-                <span class="add-context-label">添加上下文</span>
-              </button>
-              <span class="tooltiptext">添加文件或代码片段作为上下文</span>
-            </div>
+            ${getContextButtonContent()}
 
             <!-- Plan 开关 -->
             <div class="tooltip">
@@ -121,6 +119,7 @@ export function getInputAreaContent(): string {
 export function getInputAreaStyles(): string {
   return `
     ${getModelSelectorStyles()}
+    ${getContextButtonStyles()}
     .input-area {
       border-top: 1px solid var(--vscode-panel-border);
       padding-top: 15px;
@@ -158,37 +157,6 @@ export function getInputAreaStyles(): string {
       margin-bottom: 8px;
       gap: 12px;
     }
-
-    /* 添加上下文按钮样式 */
-    .add-context-button {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      background: rgba(128, 128, 128, 0.2);
-      border: 1px solid var(--vscode-input-border);
-      border-radius: 6px;
-      color: var(--vscode-foreground);
-      cursor: pointer;
-      transition: all 0.2s ease;
-      font-size: 13px;
-      font-weight: 500;
-    }
-
-    .add-context-button:hover {
-      background: rgba(128, 128, 128, 0.3);
-      border-color: var(--vscode-focusBorder);
-    }
-
-    .add-context-button svg {
-      width: 16px;
-      height: 16px;
-      color: #409eff;
-    }
-
-    .add-context-label {
-      white-space: nowrap;
-    }
     .plan-toggle {
       display: flex;
       align-items: center;
@@ -562,6 +530,7 @@ export function getInputAreaStyles(): string {
 export function getInputAreaScript(): string {
   return `
     ${getModelSelectorScript()}
+    ${getContextButtonScript()}
 
     // 自动调整 textarea 高度
     function autoResizeTextarea() {
@@ -649,12 +618,6 @@ export function getInputAreaScript(): string {
       resetOptimizeButton();
     }
 
-    // 添加上下文处理函数
-    function handleAddContext() {
-      // 发送添加上下文请求到扩展
-      vscode.postMessage({ command: 'addContext' });
-    }
-
     // Plan 开关处理函数
     function handlePlanToggle() {
       const planToggle = document.getElementById('planToggle');