feat:初步添加正则图解功能

src/anyrule.ts

@@ -2,13 +2,16 @@ import { ExtensionContext, CompletionItem, CompletionItemKind, languages, Dispos
 import { generateFilterString, getRulesByText } from "./utils";
 import { IRule } from "./interface";
 import { loadRules } from './loader';
+import { RegexDiagram } from './diagram/panel';
 
 export class AnyRule {
     context: ExtensionContext;
     disposable: Disposable | null = null;
     rules: IRule[] | null = null;
+    regexDiagram: RegexDiagram | null = null;
     constructor(context: ExtensionContext) {
         this.context = context;
+        this.regexDiagram = new RegexDiagram(context);
         loadRules(context.extensionPath).then(rules => {
             this.rules = rules;
             this.load();

src/diagram/panel.ts

@@ -0,0 +1,19 @@
+import { WebviewPanel, window, ViewColumn, Uri, workspace, ExtensionContext } from "vscode";
+import { join } from 'path';
+import { readFileSync } from "fs";
+
+export class RegexDiagram {
+    regex: string | null = null;
+    panel: WebviewPanel | null = null;
+    constructor(context: ExtensionContext) {
+        this.panel = window.createWebviewPanel('regexDiagram', '图解正则表达式', ViewColumn.Two, {
+            enableScripts: true,
+            retainContextWhenHidden: false,
+        });
+        console.log(join(context.extensionPath, 'src/diagram', './index.html'));
+        this.panel.webview.html = readFileSync(join(context.extensionPath, 'src/diagram', './index.html')).toString();
+        this.panel.webview.postMessage({
+            regex: this.regex || '/aaaaab{1,3}/',
+        });
+    }
+}