diff --git a/.vscode/launch.json b/.vscode/launch.json
index 0f3cf01..c42edc0 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -10,8 +10,7 @@
 			"type": "extensionHost",
 			"request": "launch",
 			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}",
-				"--disable-extensions"
+				"--extensionDevelopmentPath=${workspaceFolder}"
 			],
 			"outFiles": [
 				"${workspaceFolder}/dist/**/*.js"
diff --git a/README.md b/README.md
index 3733d18..149f192 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,10 @@
 # gitcommitfilter README
 
-This is the README for your extension "gitcommitfilter". After writing up a brief description, we recommend including the following sections.
+git仓库提交历史过滤查询
 
 ## Features
 
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
-
-For example if there is an image subfolder under your extension project workspace:
-
-\!\[feature X\]\(images/feature-x.png\)
-
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+git仓库提交历史过滤查询
 
 ## Requirements
 
@@ -18,54 +12,10 @@ If you have any requirements or dependencies, add a section describing those and
 
 ## Extension Settings
 
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
 
-For example:
-
-This extension contributes the following settings:
-
-* `myExtension.enable`: Enable/disable this extension.
-* `myExtension.thing`: Set to `blah` to do something.
 
 ## Known Issues
 
-Calling out known issues can help limit users opening duplicate issues against your extension.
 
 ## Release Notes
 
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
-
-### 1.0.1
-
-Fixed issue #.
-
-### 1.1.0
-
-Added features X, Y, and Z.
-
----
-
-## Following extension guidelines
-
-Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
-
-* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
-
-## Working with Markdown
-
-You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
-
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
-* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
-* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
-
-## For more information
-
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
-
-**Enjoy!**
diff --git a/package.json b/package.json
index 773e9f3..a706261 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,13 @@
   "categories": [
     "Other"
   ],
+  "extensionKind": [
+		"ui",
+		"workspace"
+	],
   "activationEvents": [],
   "main": "./dist/extension.js",
   "contributes": {
-    "commands": [
-      {
-        "command": "gitcommitfilter.helloWorld",
-        "title": "Hello World"
-      },
-      {
-        "command": "gitcommitfilter.showCommitPanel",
-        "title": "Show Git Commits"
-      }
-    ],
     "viewsContainers": {
       "activitybar": [
         {
@@ -34,8 +28,9 @@
     "views": {
       "gitCommitFilterView": [
         {
-          "id": "gitCommitFilter",
-          "name": "Git Commits",
+          "type": "webview",
+          "id": "gitcommitfilter.view",
+          "name": "MyCustomView",
           "when": "true"
         }
       ]
diff --git a/src/CommitPanel.ts b/src/CommitPanel.ts
deleted file mode 100644
index 75b0669..0000000
--- a/src/CommitPanel.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import * as vscode from 'vscode';
-import { GitService } from './GitService';
-
-export class CommitPanel {
-    public static currentPanel: CommitPanel | undefined;
-    private readonly _panel: vscode.WebviewPanel;
-    private readonly _extensionPath: string;
-    private readonly _gitService: GitService;
-    private _disposables: vscode.Disposable[] = [];
-
-    public static show(extensionContext: vscode.ExtensionContext, gitService: GitService) {
-        const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
-
-        if (CommitPanel.currentPanel) {
-            CommitPanel.currentPanel._panel.reveal(column);
-            return;
-        }
-
-        const panel = vscode.window.createWebviewPanel(
-            'commitPanel',
-            'Git Commits',
-            column || vscode.ViewColumn.One,
-            {
-                enableScripts: true
-            }
-        );
-
-        // 修正：传递正确的参数
-        CommitPanel.currentPanel = new CommitPanel(panel, extensionContext, gitService);
-    }
-
-    constructor(panel: vscode.WebviewPanel, extensionContext: vscode.ExtensionContext, gitService: GitService) {
-        this._panel = panel;
-        this._extensionPath = extensionContext.extensionPath;
-        this._gitService = gitService;
-
-        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
-        this._panel.onDidChangeViewState(e => {
-            if (this._panel.visible) {
-                this._update();
-            }
-        }, null, this._disposables);
-
-        this._panel.webview.onDidReceiveMessage(message => {
-            switch (message.command) {
-                case 'filterCommits':
-                    this._filterCommits(message.filter);
-                    return;
-                case 'showCommitFiles':
-                    this._showCommitFiles(message.commit);
-                    return;
-            }
-        }, null, this._disposables);
-
-        this._update();
-    }
-
-    public dispose() {
-        CommitPanel.currentPanel = undefined;
-
-        this._panel.dispose();
-
-        while (this._disposables.length) {
-            const x = this._disposables.pop();
-            if (x) {
-                x.dispose();
-            }
-        }
-    }
-
-    private async _update() {
-        const commits = await this._gitService.getCommits();
-        this._panel.webview.html = this._getHtmlForWebview(commits);
-    }
-
-    private async _filterCommits(filter: string) {
-        const commits = await this._gitService.getCommits(filter);
-        this._panel.webview.postMessage({ command: 'updateCommits', commits });
-    }
-
-    private async _showCommitFiles(commit: string) {
-        const files = await this._gitService.getCommitFiles(commit);
-        this._panel.webview.postMessage({ command: 'showCommitFiles', files });
-    }
-
-    private _getHtmlForWebview(commits: any[]) {
-        const commitListHtml = commits.map(commit => `<li data-commit="${commit.hash}">${commit.message}</li>`).join('');
-       return `
-            <!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Git Commits</title>
-            </head>
-            <body>
-                <input type="text" id="filterInput" placeholder="Filter commits...">
-                <ul id="commitList">
-                    ${commitListHtml}
-                </ul>
-                <div id="commitFiles"></div>
-                <script>
-                    const vscode = acquireVsCodeApi();
-                    document.getElementById('filterInput').addEventListener('input', (e) => {
-                        vscode.postMessage({ command: 'filterCommits', filter: e.target.value });
-                    });
-                    document.getElementById('commitList').addEventListener('click', (e) => {
-                        if (e.target && e.target.nodeName === 'LI') {
-                            vscode.postMessage({ command: 'showCommitFiles', commit: e.target.getAttribute('data-commit') });
-                        }
-                    });
-                    window.addEventListener('message', event => {
-                        const message = event.data;
-                        switch (message.command) {
-                            case 'updateCommits':
-                                const commitList = document.getElementById('commitList');
-                                commitList.innerHTML = message.commits.map(commit => \`<li data-commit=\"\${commit.hash}">\${commit.message}</li>\`).join('');
-                                break;
-                            case 'showCommitFiles':
-                                const commitFiles = document.getElementById('commitFiles');
-                                commitFiles.innerHTML = message.files.map(file => \`<p>\${file}</p>\`).join('');
-                                break;
-                        }
-                    });
-                </script>
-            </body>
-            </html>`;
-    }
-}
\ No newline at end of file
diff --git a/src/extension.ts b/src/extension.ts
index 69e36e2..eace552 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,21 +1,16 @@
 import * as vscode from 'vscode';
-import { CommitPanel } from './CommitPanel';
+
 import { GitService } from './GitService';
+import { GViewProvider } from './view.provider';
 
 export function activate(context: vscode.ExtensionContext) {
+    console.log('Congratulations, your extension "commit-panel" is now active!');
     const gitService = new GitService();
 
-    // 创建一个TreeDataProvider实例
-    const commitTreeDataProvider = new CommitTreeDataProvider();
+    const viewProvider = new GViewProvider(context, gitService);
 
-    // 注册TreeDataProvider
-    const activityBarIcon = vscode.window.registerTreeDataProvider('gitCommitFilter', commitTreeDataProvider);
+    const activityBarIcon = vscode.window.registerWebviewViewProvider(GViewProvider.viewType, viewProvider);
 
-    let disposable = vscode.commands.registerCommand('gitcommitfilter.showCommitPanel', () => {
-        CommitPanel.show(context, gitService);
-    });
-
-    context.subscriptions.push(disposable);
     context.subscriptions.push(activityBarIcon);
 }
 
@@ -26,7 +21,11 @@ class CommitTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem>
     private _onDidChangeTreeData: vscode.EventEmitter<vscode.TreeItem | undefined | void> = new vscode.EventEmitter<vscode.TreeItem | undefined | void>();
     readonly onDidChangeTreeData: vscode.Event<vscode.TreeItem | undefined | void> = this._onDidChangeTreeData.event;
 
-    constructor() {}
+    private gitService: GitService;
+
+    constructor(gitService: GitService) {
+        this.gitService = gitService;
+    }
 
     refresh(): void {
         this._onDidChangeTreeData.fire();
@@ -40,9 +39,5 @@ class CommitTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem>
         if (element) {
             return [];
         }
-        const icon = new vscode.TreeItem('Git Commits', vscode.TreeItemCollapsibleState.None);
-        icon.command = { command: 'gitcommitfilter.showCommitPanel', title: 'Show Git Commits' };
-        icon.iconPath = new vscode.ThemeIcon('git-commit');
-        return [icon];
     }
-}
+}
\ No newline at end of file
diff --git a/src/view.provider.ts b/src/view.provider.ts
new file mode 100644
index 0000000..169ba18
--- /dev/null
+++ b/src/view.provider.ts
@@ -0,0 +1,114 @@
+import * as vscode from 'vscode';
+import { GitService } from './GitService';
+
+export class GViewProvider implements vscode.WebviewViewProvider {
+  public static readonly viewType = "gitcommitfilter.view";
+
+  private _view?: vscode.WebviewView;
+
+  constructor(
+    private context: vscode.ExtensionContext,
+    private readonly _gitService: GitService
+  ) {}
+
+  public resolveWebviewView(
+    webviewView: vscode.WebviewView,
+    context: vscode.WebviewViewResolveContext
+  ) {
+    webviewView.webview.options = { enableScripts: true };
+    this._view = webviewView;
+    console.log("resolveWebviewView:------------");
+    webviewView.webview.html = this.generateHtml(webviewView);
+
+    // 添加事件监听器
+    webviewView.webview.onDidReceiveMessage(message => {
+      switch (message.command) {
+        case 'filterCommits':
+          const filterText = message.text;
+          this.filterCommits(filterText);
+          return;
+      }
+    }, undefined, this.context.subscriptions);
+  }
+
+  generateHtml(webviewView: vscode.WebviewView) {
+    return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Git Commit Filter</title>
+        <style>
+            body {
+                font-family: var(--vscode-font-family);
+                color: var(--vscode-foreground);
+                background-color: var(--vscode-editor-background);
+                padding: 20px;
+                margin: 0;
+            }
+
+            input[type="text"] {
+                width: 100%;
+                padding: 8px;
+                margin-bottom: 10px;
+                background-color: var(--vscode-input-background);
+                color: var(--vscode-input-foreground);
+                border: 1px solid var(--vscode-input-border);
+            }
+
+            button {
+                padding: 8px 16px;
+                background-color: var(--vscode-button-background);
+                color: var(--vscode-button-foreground);
+                border: 1px solid var(--vscode-button-border);
+                cursor: pointer;
+            }
+
+            button:hover {
+                background-color: var(--vscode-button-hoverBackground);
+            }
+
+            .commit {
+                margin-bottom: 10px;
+            }
+        </style>
+    </head>
+    <body>
+        <input type="text" id="commitFilter" placeholder="Enter commit message to filter">
+        <button id="filterButton">过滤</button>
+        <div id="commits"></div>
+        <script>
+            const vscode = acquireVsCodeApi();
+
+            document.getElementById('filterButton').addEventListener('click', () => {
+                const filterText = document.getElementById('commitFilter').value;
+                vscode.postMessage({ command: 'filterCommits', text: filterText });
+            });
+
+            function updateCommits(commits) {
+                const commitsDiv = document.getElementById('commits');
+                commitsDiv.innerHTML = '';
+                commits.forEach(commit => {
+                    const commitDiv = document.createElement('div');
+                    commitDiv.className = 'commit';
+                    commitDiv.textContent = commit.message;
+                    commitsDiv.appendChild(commitDiv);
+                });
+            }
+
+            // 初始加载commits
+            vscode.postMessage({ command: 'filterCommits', text: '' });
+        </script>
+    </body>
+    </html>
+    `;
+  }
+
+  private filterCommits(filterText: string) {
+    if (this._view) {
+      const commits = this._gitService.getFilteredCommits(filterText);
+      this._view.webview.postMessage({ command: 'updateCommits', commits: commits });
+    }
+  }
+}
\ No newline at end of file