vscode向webview通信

This commit is contained in:
OBKoro1 2019-12-31 18:01:35 +08:00
parent 17652d0617
commit 5e7b687ccf
8 changed files with 63 additions and 23 deletions

0
.env
View File

View File

@ -1 +0,0 @@
NODE_ENV = production

View File

@ -2,7 +2,7 @@
* Author : OBKoro1 * Author : OBKoro1
* Date : 2019-12-25 15:15:42 * Date : 2019-12-25 15:15:42
* LastEditors : OBKoro1 * LastEditors : OBKoro1
* LastEditTime : 2019-12-27 13:27:08 * LastEditTime : 2019-12-31 16:29:11
* FilePath : /autoCommit/src/extension.ts * FilePath : /autoCommit/src/extension.ts
* Description : 自动commit插件 * Description : 自动commit插件
* https://github.com/OBKoro1 * https://github.com/OBKoro1
@ -16,7 +16,6 @@ import { setExtensionContext } from './util/vscodeUtil'
// 扩展激活 默认运行 // 扩展激活 默认运行
export function activate(context: vscode.ExtensionContext) { export function activate(context: vscode.ExtensionContext) {
setExtensionContext(context) setExtensionContext(context)
const autoCommit = vscode.commands.registerCommand('extension.autoCommit', () => { const autoCommit = vscode.commands.registerCommand('extension.autoCommit', () => {
new ExtensionLogic(context) new ExtensionLogic(context)
}) })

View File

@ -2,7 +2,7 @@
* Author : OBKoro1 * Author : OBKoro1
* Date : 2019-12-26 13:49:02 * Date : 2019-12-26 13:49:02
* LastEditors : OBKoro1 * LastEditors : OBKoro1
* LastEditTime : 2019-12-30 20:10:46 * LastEditTime : 2019-12-31 16:43:30
* FilePath : /autoCommit/src/models/WebView.ts * FilePath : /autoCommit/src/models/WebView.ts
* Description : 创建webview * Description : 创建webview
* https://github.com/OBKoro1 * https://github.com/OBKoro1
@ -11,7 +11,7 @@
import * as vscode from 'vscode'; import * as vscode from 'vscode';
import * as path from 'path'; import * as path from 'path';
import * as fs from 'fs'; import * as fs from 'fs';
import { showMessage } from '../util/vscodeUtil'; import { showMessage, isProduction } from '../util/vscodeUtil';
import { webviewMsg } from '../util/dataStatement'; import { webviewMsg } from '../util/dataStatement';
// webview 设置 // webview 设置
@ -35,8 +35,7 @@ class WebView {
column: vscode.ViewColumn = vscode.ViewColumn.One column: vscode.ViewColumn = vscode.ViewColumn.One
) { ) {
// 获取资源地址 // 获取资源地址
// TODO: 打包 const srcPath = isProduction() ? 'out' : 'src';
const srcPath = process.env.NODE_ENV !== 'production' ? 'src' : 'dist';
this.currentPanel = vscode.window.createWebviewPanel( this.currentPanel = vscode.window.createWebviewPanel(
WebviewPanelOption.type, WebviewPanelOption.type,
WebviewPanelOption.title, WebviewPanelOption.title,
@ -111,9 +110,9 @@ class WebView {
* @param command * @param command
* @param message * @param message
*/ */
public postMessage(command: string, data: object) { public postMessage(command: string, data: any) {
if (!this.currentPanel) return if (!this.currentPanel) return;
this.currentPanel.webview.postMessage({ command, data }) this.currentPanel.webview.postMessage({ command, data });
} }
} }

View File

@ -2,7 +2,7 @@
* Author : OBKoro1 * Author : OBKoro1
* Date : 2019-12-30 16:59:30 * Date : 2019-12-30 16:59:30
* LastEditors : OBKoro1 * LastEditors : OBKoro1
* LastEditTime : 2019-12-30 20:21:13 * LastEditTime : 2019-12-31 18:00:43
* FilePath : /autoCommit/src/models/commitHandle.ts * FilePath : /autoCommit/src/models/commitHandle.ts
* Description : commit * Description : commit
* https://github.com/OBKoro1 * https://github.com/OBKoro1
@ -37,6 +37,15 @@ class CommitHandle {
detailTimeArr = detailTimeArr.filter(ele => { detailTimeArr = detailTimeArr.filter(ele => {
return !this.timeArr.includes(ele); return !this.timeArr.includes(ele);
}); });
// TODO: commit number
// if(){
// }
// detailTimeArr.map(element=>{
// return {
// time: element
// }
// })
this.timeArr.push(...detailTimeArr); this.timeArr.push(...detailTimeArr);
}); });
this.sortTime(); this.sortTime();

View File

@ -2,7 +2,7 @@
* Author : OBKoro1 * Author : OBKoro1
* Date : 2019-12-25 17:08:18 * Date : 2019-12-25 17:08:18
* LastEditors : OBKoro1 * LastEditors : OBKoro1
* LastEditTime : 2019-12-30 21:02:57 * LastEditTime : 2019-12-31 16:42:46
* FilePath : /autoCommit/src/models/index.ts * FilePath : /autoCommit/src/models/index.ts
* Description : 插件逻辑入口 * Description : 插件逻辑入口
* https://github.com/OBKoro1 * https://github.com/OBKoro1
@ -10,7 +10,7 @@
import * as vscode from 'vscode'; import * as vscode from 'vscode';
import WebView from './WebView'; import WebView from './WebView';
import { webviewMsg } from '../util/dataStatement'; import { webviewMsg } from '../util/dataStatement';
import { setPanelWebview } from '../util/vscodeUtil'; import { setPanelWebview, isProduction } from '../util/vscodeUtil';
import CommitHandle from './commitHandle'; import CommitHandle from './commitHandle';
import { outputLog } from '../util/vscodeUtil'; import { outputLog } from '../util/vscodeUtil';
import * as fs from 'fs'; import * as fs from 'fs';
@ -20,6 +20,7 @@ class ExtensionLogic {
public MessageCallBack: any; public MessageCallBack: any;
public autoCommitView: WebView; public autoCommitView: WebView;
public CommitHandle: any; public CommitHandle: any;
public isDebug: boolean;
public constructor(context: vscode.ExtensionContext) { public constructor(context: vscode.ExtensionContext) {
this.context = context; this.context = context;
@ -27,6 +28,7 @@ class ExtensionLogic {
this.context, this.context,
this.messageCallBack.bind(this) this.messageCallBack.bind(this)
); );
this.isDebug = true;
setPanelWebview(this.autoCommitView); setPanelWebview(this.autoCommitView);
this.createView(); this.createView();
} }
@ -37,6 +39,7 @@ class ExtensionLogic {
fileName: 'autoCommit' fileName: 'autoCommit'
}; };
this.autoCommitView.create(option); this.autoCommitView.create(option);
this.autoCommitView.postMessage('isProduction', isProduction());
} }
// 处理webview的消息 // 处理webview的消息
private messageCallBack(message: webviewMsg) { private messageCallBack(message: webviewMsg) {
@ -52,10 +55,12 @@ class ExtensionLogic {
canSelectFolders: true, // 是否可以选择文件夹 canSelectFolders: true, // 是否可以选择文件夹
canSelectMany: false // 是否可以选择多个文件 canSelectMany: false // 是否可以选择多个文件
}); });
if (!urlArr) return; // 用户取消选择
const itemSrc = urlArr[0].path; const itemSrc = urlArr[0].path;
if (this.hasGit(itemSrc)) { if (this.hasGit(itemSrc)) {
this.autoCommitView.postMessage('choose item success', itemSrc); this.autoCommitView.postMessage('choose item success', itemSrc);
} else { } else {
this.autoCommitView.postMessage('choose item error', itemSrc);
outputLog('项目地址错误', `${itemSrc}根目录没有.git文件夹`); outputLog('项目地址错误', `${itemSrc}根目录没有.git文件夹`);
} }
} }

View File

@ -2,7 +2,7 @@
* Author : OBKoro1 * Author : OBKoro1
* Date : 2019-12-25 17:13:30 * Date : 2019-12-25 17:13:30
* LastEditors : OBKoro1 * LastEditors : OBKoro1
* LastEditTime : 2019-12-30 21:10:57 * LastEditTime : 2019-12-31 16:36:12
* FilePath : /autoCommit/src/util/vscodeUtil.ts * FilePath : /autoCommit/src/util/vscodeUtil.ts
* Description : vscode * Description : vscode
* https://github.com/OBKoro1 * https://github.com/OBKoro1
@ -38,6 +38,11 @@ function outputLog(...arr: any) {
webview.postMessage('console-log', arr); webview.postMessage('console-log', arr);
} }
// 是否生产环境
function isProduction() {
return process.env.NODE_ENV === 'production' // production时 为打包安装版本
}
// vscode 消息通知 // vscode 消息通知
function showMessage(message: string, type = 'error') { function showMessage(message: string, type = 'error') {
const actions: any = { const actions: any = {
@ -56,6 +61,7 @@ function showMessage(message: string, type = 'error') {
} }
export { export {
isProduction, // 是否生产环境
outputLog, // 打印日志 outputLog, // 打印日志
getPanelWebview, // 获取webview getPanelWebview, // 获取webview
setPanelWebview, // 存储webview setPanelWebview, // 存储webview

View File

@ -13,6 +13,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="form-title">Github自动提交commit工具</div> <div class="form-title">Github自动提交commit工具</div>
<div>{{ event }}</div>
<el-container> <el-container>
<el-main> <el-main>
<el-form ref="form" :model="form" :rules="rules" label-width="160px"> <el-form ref="form" :model="form" :rules="rules" label-width="160px">
@ -116,6 +117,7 @@
} }
} }
return { return {
isProduction: false,
showText:{ showText:{
oldParams: '', // 保存的参数 oldParams: '', // 保存的参数
paramsStr: '', // commit参数 paramsStr: '', // commit参数
@ -193,18 +195,39 @@
data data
}); });
}, },
logDebug(command,data){
this.showText.logArr.unshift(`command: ${command}`);
this.showText.logArr.unshift(`数据: ${data}`);
this.formatLog()
},
acceptLogFn(paramArr){
const logStr = paramArr.join(' ')
this.showText.logArr.unshift(logStr);
this.formatLog()
},
// 注册 // 注册
initListener() { initListener() {
// TODO: 通信问题 接收不到 window.onmessage = (e) =>{
window.addEventListener('message', event => {
const { command, data } = event.data; const { command, data } = event.data;
console.log('data',data) if (command === 'choose item success') {
console.log('event', event,command,data); // 选择文件夹成功
// console.log('登录成功 addEventListener', event); this.form.itemSrc = data
// if (command === 'success') { }else if(command === 'choose item error'){
// // 登录成功 this.$message({
// } type: 'error',
showClose: true,
message: `${data}根目录没有.git文件夹`,
duration: 0
}); });
} else if(command === 'console-log'){
this.acceptLogFn(data)
}else if(command === 'isProduction'){
this.isProduction = data
}
if(!this.isProduction){
this.logDebug(command, data)
}
}
}, },
// 重置: commit成功和中断commit // 重置: commit成功和中断commit
reset() { reset() {