174 lines
5.8 KiB
TypeScript
174 lines
5.8 KiB
TypeScript
import * as vscode from "vscode";
|
|
import * as path from "path";
|
|
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" class="dark">
|
|
<head >
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Git Commit Filter</title>
|
|
<link rel="stylesheet" href="${webviewView.webview.asWebviewUri(
|
|
vscode.Uri.file(
|
|
path.join(this.context.extensionPath, "media", "elui.css")
|
|
)
|
|
)}">
|
|
<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);
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="${webviewView.webview.asWebviewUri(
|
|
vscode.Uri.file(
|
|
path.join(this.context.extensionPath, "media", "elui.css")
|
|
)
|
|
)}">
|
|
<link rel="stylesheet" href="${webviewView.webview.asWebviewUri(
|
|
vscode.Uri.file(
|
|
path.join(this.context.extensionPath, "media", "elui.color.css")
|
|
)
|
|
)}">
|
|
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<el-input v-model="filterText" placeholder="Enter commit message to filter"></el-input>
|
|
<el-button @click="filterCommits">过滤</el-button>
|
|
<el-tree :data="commits" :props="defaultProps" ></el-tree>
|
|
</div>
|
|
<script src="${webviewView.webview.asWebviewUri(
|
|
vscode.Uri.file(
|
|
path.join(this.context.extensionPath, "media", "vue.js")
|
|
)
|
|
)}"></script>
|
|
<script src="${webviewView.webview.asWebviewUri(
|
|
vscode.Uri.file(
|
|
path.join(this.context.extensionPath, "media", "elui.js")
|
|
)
|
|
)}"></script>
|
|
<script>
|
|
const vscode = acquireVsCodeApi();
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
filterText: '',
|
|
commits: [],
|
|
defaultProps: {
|
|
children: 'files',
|
|
label: 'message'
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
filterCommits() {
|
|
vscode.postMessage({ command: 'filterCommits', text: this.filterText });
|
|
},
|
|
updateCommits(commits) {
|
|
this.commits = commits.map(commit => ({
|
|
message: commit.msg,
|
|
files: commit.files.map(file => ({ message: file }))
|
|
}));
|
|
}
|
|
},
|
|
mounted() {
|
|
const root = document.documentElement;
|
|
const observer = new MutationObserver(() => {
|
|
root.style.setProperty('--el-color-primary', getComputedStyle(root).getPropertyValue('--vscode-button-background'));
|
|
});
|
|
observer.observe(root, { attributes: true, attributeFilter: ['style'] });
|
|
|
|
console.log("mounted")
|
|
debugger;
|
|
window.addEventListener('message', event => {
|
|
console.log("recv update",JSON.stringify(event.data));
|
|
debugger;
|
|
const message = event.data;
|
|
switch (message.command) {
|
|
case 'updateCommits':
|
|
this.updateCommits(message.commits);
|
|
break;
|
|
}
|
|
});
|
|
setTimeout(()=> vscode.postMessage({ command: 'filterCommits', text: '' }),100);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`;
|
|
}
|
|
|
|
private async filterCommits(filterText: string) {
|
|
if (this._view) {
|
|
const commits = await this._gitService.getCommits(filterText);
|
|
this._view.webview.postMessage({
|
|
command: "updateCommits",
|
|
commits
|
|
});
|
|
}
|
|
}
|
|
}
|