添加快捷键及右键菜单选项启动

front-view/public/assets/index.e69163f5.js → front-view/public/assets/index.81937249.js

-import{p as e,a as t,o as a,c as l,r as s,w as n,b as o,d as i,e as c,f as d,g as r,v as u,F as m,h as p,i as v,j as y,k as g,t as b,l as f}from"./vendor.f6a3a0fc.js";const k={name:"MyLoader",displayName:"m-loader",props:{background:{type:String,default:"rgba(0,0,0,0.3)"}}},C=n();e("data-v-6ecfd4d3");const L=o("div",{class:"my-loader"},[o("div",{class:"outer"}),o("div",{class:"middle"}),o("div",{class:"inner"})],-1);t();const h=C(((e,t,n,o,i,c)=>(a(),l("div",{class:"my-loader-mask",style:`background:${n.background}`},[L,s(e.$slots,"default",{},void 0,!0)],4))));k.render=h,k.__scopeId="data-v-6ecfd4d3";const w={name:"Main",components:{Loader:k},setup(){const e=i(null),t=i(1),a=i(null),l=i(null),s=i(!1),n=i([{title:"Vue3版大屏",desc:"Vue3.0 + TypeScript + Vite2.0大屏用",url:"gitee:guomingyao/my-view"},{title:"Vue2大屏",desc:"Vue2.0大屏用",url:"gitee:guomingyao/monitor-template"},{title:"Vite App",desc:"Vue3.0 + Vite2.0 普通项目用",url:"gitee:guomingyao/my-vite-app"},{title:"微前端",desc:"微前端父项目模板",url:"gitee:guomingyao/micfrontend-template"}]),o=i(null),r=i(null),u=e=>{const{command:t,data:a}=e.data;switch(t){case"DIRECTORY":r.value=a.text;break;case"CLOSE_LOADER":s.value=!1}};c((()=>{window.addEventListener("message",u)})),d((()=>{window.removeEventListener("message",u)}));return{fileRef:e,step:t,curIndex:a,curData:l,templates:n,filename:o,directory:r,onClick:(e,t)=>{l.value=e,a.value=t},selectDirectory:()=>{vscode.postMessage({command:"SELECT_FOLDER"})},toStep:e=>{t.value=e},submit:()=>{s.value=!0,vscode.postMessage({command:"FETCH_PROJECT",data:{url:l.value.url,filePath:r.value,filename:o.value}})},showLoader:s}}},E=n();e("data-v-1848f50d");const V=o("h2",null,"选择模板",-1),D={class:"wrapper"},S=o("h2",null,"选择目录",-1),_={class:"item"},M={class:"item directory"};t();const R=E(((e,t,s,n,i,c)=>{const d=g("Loader");return a(),l("main",null,[r(o("section",null,[V,o("div",D,[(a(!0),l(m,null,p(n.templates,((e,t)=>(a(),l("div",{key:e.title},[o("div",{class:["inner",{on:n.curIndex===t}],onClick:a=>n.onClick(e,t)},[o("h3",null,b(e.title),1),o("span",null,b(e.desc),1)],10,["onClick"])])))),128))]),o("button",{onClick:t[1]||(t[1]=e=>n.toStep(2)),class:""+(n.curData?"btn":"disable-btn")},"下一步",2)],512),[[u,1===n.step]]),r(o("section",null,[S,o("div",_,[r(o("input",{type:"text","onUpdate:modelValue":t[2]||(t[2]=e=>n.filename=e),title:n.filename,placeholder:"请输入项目名称"},null,8,["title"]),[[v,n.filename]])]),o("div",M,[o("input",{value:n.directory,title:n.directory,type:"text",placeholder:"请选择项目存放路径",readonly:""},null,8,["value","title"]),o("button",{class:"btn",onClick:t[3]||(t[3]=(...e)=>n.selectDirectory&&n.selectDirectory(...e))},"选择")]),o("button",{onClick:t[4]||(t[4]=(...e)=>n.submit&&n.submit(...e)),class:""+(n.filename&&n.directory?"btn":"disable-btn")},"完成",2),o("button",{onClick:t[5]||(t[5]=e=>n.toStep(1)),class:"btn"},"上一步")],512),[[u,2===n.step]]),n.showLoader?(a(),l(d,{key:0})):y("",!0)])}));w.render=R,w.__scopeId="data-v-1848f50d";const x={name:"App",components:{Main:w}};x.render=function(e,t,s,n,o,i){const c=g("Main");return a(),l(c)};f(x).mount("#app");
+import{p as e,a as t,o as a,c as l,r as s,w as n,b as o,d as i,e as c,f as d,g as r,v as u,F as m,h as p,i as v,j as y,k as b,t as g,l as f}from"./vendor.f6a3a0fc.js";const k={name:"MyLoader",displayName:"m-loader",props:{background:{type:String,default:"rgba(0,0,0,0.3)"}}},C=n();e("data-v-6ecfd4d3");const L=o("div",{class:"my-loader"},[o("div",{class:"outer"}),o("div",{class:"middle"}),o("div",{class:"inner"})],-1);t();const h=C(((e,t,n,o,i,c)=>(a(),l("div",{class:"my-loader-mask",style:`background:${n.background}`},[L,s(e.$slots,"default",{},void 0,!0)],4))));k.render=h,k.__scopeId="data-v-6ecfd4d3";const w={name:"Main",components:{Loader:k},setup(){const e=i(null),t=i(1),a=i(null),l=i(null),s=i(!1),n=i([{title:"Vue3版大屏",desc:"Vue3.0 + TypeScript + Vite2.0大屏用",url:"gitee:guomingyao/my-view"},{title:"Vue2大屏",desc:"Vue2.0大屏用",url:"gitee:guomingyao/monitor-template"},{title:"Vite App",desc:"Vue3.0 + Vite2.0 普通项目用",url:"gitee:guomingyao/my-vite-app"},{title:"微前端",desc:"微前端父项目模板",url:"gitee:guomingyao/micfrontend-template"}]),o=i(null),r=i(null),u=e=>{const{command:t,data:a}=e.data;switch(t){case"DIRECTORY":r.value=a.text;break;case"CLOSE_LOADER":s.value=!1}};c((()=>{window.addEventListener("message",u)})),d((()=>{window.removeEventListener("message",u)}));return{fileRef:e,step:t,curIndex:a,curData:l,templates:n,filename:o,directory:r,onClick:(e,t)=>{l.value=e,a.value=t},selectDirectory:()=>{vscode.postMessage({command:"SELECT_FOLDER"})},toStep:e=>{t.value=e},submit:()=>{s.value=!0,vscode.postMessage({command:"FETCH_PROJECT",data:{url:l.value.url,filePath:r.value,filename:o.value}})},showLoader:s}}},E=n();e("data-v-12b72188");const V=o("h2",null,"选择模板",-1),D={class:"wrapper"},S=o("h2",null,"项目配置",-1),_={class:"item"},M={class:"item directory"};t();const R=E(((e,t,s,n,i,c)=>{const d=b("Loader");return a(),l("main",null,[r(o("section",null,[V,o("div",D,[(a(!0),l(m,null,p(n.templates,((e,t)=>(a(),l("div",{key:e.title},[o("div",{class:["inner",{on:n.curIndex===t}],onClick:a=>n.onClick(e,t)},[o("h3",null,g(e.title),1),o("span",null,g(e.desc),1)],10,["onClick"])])))),128))]),o("button",{onClick:t[1]||(t[1]=e=>n.toStep(2)),class:""+(n.curData?"btn":"disable-btn")},"下一步",2)],512),[[u,1===n.step]]),r(o("section",null,[S,o("div",_,[r(o("input",{type:"text","onUpdate:modelValue":t[2]||(t[2]=e=>n.filename=e),title:n.filename,placeholder:"请输入项目名称"},null,8,["title"]),[[v,n.filename]])]),o("div",M,[o("input",{value:n.directory,title:n.directory,type:"text",placeholder:"请选择项目存放路径",readonly:""},null,8,["value","title"]),o("button",{class:"btn",onClick:t[3]||(t[3]=(...e)=>n.selectDirectory&&n.selectDirectory(...e))},"选择")]),o("button",{onClick:t[4]||(t[4]=(...e)=>n.submit&&n.submit(...e)),class:""+(n.filename&&n.directory?"btn":"disable-btn")},"完成",2),o("button",{onClick:t[5]||(t[5]=e=>n.toStep(1)),class:"btn"},"上一步")],512),[[u,2===n.step]]),n.showLoader?(a(),l(d,{key:0})):y("",!0)])}));w.render=R,w.__scopeId="data-v-12b72188";const x={name:"App",components:{Main:w}};x.render=function(e,t,s,n,o,i){const c=b("Main");return a(),l(c)};f(x).mount("#app");

front-view/public/index.html

@@ -6,9 +6,9 @@
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>My Cli</title>
-<script type="module" crossorigin src="./assets/index.e69163f5.js"></script>
+<script type="module" crossorigin src="./assets/index.81937249.js"></script>
   <link rel="modulepreload" href="./assets/vendor.f6a3a0fc.js">
-  <link rel="stylesheet" href="./assets/index.3a37693c.css">
+  <link rel="stylesheet" href="./assets/index.bbf0b1ef.css">
 </head>
 
 <body>

front-view/src/components/main.vue

@@ -13,7 +13,7 @@
     <button @click="toStep(2)" :class="`${curData ? 'btn' : 'disable-btn'}`">下一步</button>
   </section>
   <section v-show="step === 2">
-    <h2>选择目录</h2>
+    <h2>项目配置</h2>
     <div class="item">
       <input type="text" v-model="filename" :title="filename" placeholder="请输入项目名称"/>
     </div>

package.json

@@ -3,6 +3,7 @@
   "displayName": "my-cli",
   "description": "A tool to generate frontend project with template",
   "version": "0.0.1",
+  "publisher": "GuoMingyao",
   "engines": {
     "vscode": "^1.57.0"
   },
@@ -17,9 +18,32 @@
     "commands": [
       {
         "command": "my-cli.my-cli",
-        "title": "My Cli"
+        "title": "My-Cli:创建前端项目"
+      }
+    ],
+    "keybindings": [
+      {
+        "command": "my-cli.my-cli",
+        "key": "ctrl+f10",
+        "mac": "cmd+f10",
+        "when": "editorTextFocus"
+      }
+    ],
+    "menus": {
+      "explorer/context": [
+        {
+          "command": "my-cli.my-cli",
+          "group": "navigation"
+        }
+      ],
+      "editor/context": [
+        {
+          "when": "editorTextFocus",
+          "command": "my-cli.my-cli",
+          "group": "navigation"
         }
       ]
+    }
   },
   "scripts": {
     "vscode:prepublish": "npm run package",

src/extension.ts

@@ -14,7 +14,7 @@ export function activate(context: vscode.ExtensionContext) {
 	// The command has been defined in the package.json file
 	// Now provide the implementation of the command with registerCommand
 	// The commandId parameter must match the command field in package.json
-	let disposable = vscode.commands.registerCommand('my-cli.my-cli', () => {
+	const disposable = vscode.commands.registerCommand('my-cli.my-cli', () => {
 		const panel = vscode.window.createWebviewPanel(
 			'my-cli',
 			'创建前端项目',