vscode向webview通信

.env.production

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

src/extension.ts

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

src/models/WebView.ts

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

src/models/commitHandle.ts

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

src/models/index.ts

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

src/util/vscodeUtil.ts

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

src/views/autoCommit.html

@@ -13,6 +13,7 @@
 <body>
   <div id="app">
     <div class="form-title">Github自动提交commit工具</div>
+    <div>{{ event }}</div>
     <el-container>
       <el-main>
         <el-form ref="form" :model="form" :rules="rules" label-width="160px">
@@ -116,6 +117,7 @@
         }
       }
       return {
+        isProduction: false,
         showText:{
           oldParams: '', // 保存的参数
           paramsStr: '', // commit参数
@@ -193,18 +195,39 @@
           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() {
-        // TODO: 通信问题 接收不到
-        window.addEventListener('message', event => {
+        window.onmessage = (e) =>{
           const { command, data } = event.data;
-          console.log('data',data)
-          console.log('event', event,command,data);
-          // console.log('登录成功 addEventListener', event);
-          // if (command === 'success') {
-          //   // 登录成功
-          // }
-        });
+          if (command === 'choose item success') {
+            // 选择文件夹成功
+            this.form.itemSrc = data
+          }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
       reset() {