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

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/assets/index.3a37693c.css → front-view/public/assets/index.bbf0b1ef.css

-.my-loader-mask[data-v-6ecfd4d3]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column}.my-loader[data-v-6ecfd4d3]{position:relative}.my-loader .inner[data-v-6ecfd4d3],.my-loader .middle[data-v-6ecfd4d3],.my-loader .outer[data-v-6ecfd4d3]{border:4px solid transparent;border-top-color:#47b3ff;border-right-color:#47b3ff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0)}.my-loader .outer[data-v-6ecfd4d3]{width:35px;height:35px;animation:spin-6ecfd4d3 2.5s linear infinite}.my-loader .middle[data-v-6ecfd4d3]{width:21px;height:21px;animation:spin-6ecfd4d3 2s linear reverse infinite}.my-loader .inner[data-v-6ecfd4d3]{width:8px;height:8px;animation:spin-6ecfd4d3 1.5s linear infinite}@-moz-keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}@-webkit-keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}@-o-keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}@keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}h2[data-v-1848f50d]{padding:0 12px}.wrapper[data-v-1848f50d]{display:flex;flex-wrap:wrap}.wrapper>div[data-v-1848f50d]{width:25%;padding:10px;box-sizing:border-box}.wrapper>div .inner[data-v-1848f50d]{background:#3b3b47;height:140px;padding:10px 20px;cursor:pointer;transition:border .2s ease-in-out;border:1px solid transparent;box-sizing:border-box;position:relative}.wrapper>div .inner span[data-v-1848f50d]{color:#ccc;font-size:12px}.wrapper>div .inner.on[data-v-1848f50d],.wrapper>div .inner[data-v-1848f50d]:hover{border:1px solid #2f86ee}.wrapper>div .inner.on[data-v-1848f50d]:before{content:'';display:inline-block;position:absolute;top:2px;right:2px;width:0;height:0;border:10px solid transparent;border-top-color:inherit;border-right-color:inherit}.item[data-v-1848f50d]{width:40%;margin:40px auto;display:flex;height:34px}.item .btn[data-v-1848f50d]{float:none;margin:0;width:100px;margin-left:10px}.item input[data-v-1848f50d]{display:block;flex:1;border:none;outline:0;font-size:14px;padding:0 14px;line-height:34px;color:#2c3e50;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}html{background:#1e2127}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#eee;padding:0 10px}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.btn{z-index:1;position:relative;font-size:inherit;font-family:inherit;color:#fff;padding:10px 20px;outline:0;border:none;background-color:#3b3b47;overflow:hidden;transition:color .4s ease-in-out;float:right;margin:10px 10px 0 0}.disable-btn{z-index:1;position:relative;font-size:inherit;font-family:inherit;color:#fff;padding:10px 20px;outline:0;border:none;background-color:#3b3b47;overflow:hidden;transition:color .4s ease-in-out;float:right;margin:10px 10px 0 0;opacity:.5;cursor:not-allowed;pointer-events:all!important}.btn::before{content:'';z-index:-1;position:absolute;top:50%;left:50%;width:1em;height:1em;border-radius:50%;background-color:#2f86ee;transform-origin:center;transform:translate3d(-50%,-50%,0) scale3d(0,0,0);transition:transform .45s ease-in-out}.btn:hover{cursor:pointer;color:#161616}.btn:hover::before{transform:translate3d(-50%,-50%,0) scale3d(15,15,15)}
+.my-loader-mask[data-v-6ecfd4d3]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column}.my-loader[data-v-6ecfd4d3]{position:relative}.my-loader .inner[data-v-6ecfd4d3],.my-loader .middle[data-v-6ecfd4d3],.my-loader .outer[data-v-6ecfd4d3]{border:4px solid transparent;border-top-color:#47b3ff;border-right-color:#47b3ff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0)}.my-loader .outer[data-v-6ecfd4d3]{width:35px;height:35px;animation:spin-6ecfd4d3 2.5s linear infinite}.my-loader .middle[data-v-6ecfd4d3]{width:21px;height:21px;animation:spin-6ecfd4d3 2s linear reverse infinite}.my-loader .inner[data-v-6ecfd4d3]{width:8px;height:8px;animation:spin-6ecfd4d3 1.5s linear infinite}@-moz-keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}@-webkit-keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}@-o-keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}@keyframes spin-6ecfd4d3{to{transform:translate(-50%,-50%) rotate(360deg);border-top-color:#00f2ff;border-right-color:#00f2ff}}h2[data-v-12b72188]{padding:0 12px}.wrapper[data-v-12b72188]{display:flex;flex-wrap:wrap}.wrapper>div[data-v-12b72188]{width:25%;padding:10px;box-sizing:border-box}.wrapper>div .inner[data-v-12b72188]{background:#3b3b47;height:140px;padding:10px 20px;cursor:pointer;transition:border .2s ease-in-out;border:1px solid transparent;box-sizing:border-box;position:relative}.wrapper>div .inner span[data-v-12b72188]{color:#ccc;font-size:12px}.wrapper>div .inner.on[data-v-12b72188],.wrapper>div .inner[data-v-12b72188]:hover{border:1px solid #2f86ee}.wrapper>div .inner.on[data-v-12b72188]:before{content:'';display:inline-block;position:absolute;top:2px;right:2px;width:0;height:0;border:10px solid transparent;border-top-color:inherit;border-right-color:inherit}.item[data-v-12b72188]{width:40%;margin:40px auto;display:flex;height:34px}.item .btn[data-v-12b72188]{float:none;margin:0;width:100px;margin-left:10px}.item input[data-v-12b72188]{display:block;flex:1;border:none;outline:0;font-size:14px;padding:0 14px;line-height:34px;color:#2c3e50;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}html{background:#1e2127}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#eee;padding:0 10px}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.btn{z-index:1;position:relative;font-size:inherit;font-family:inherit;color:#fff;padding:10px 20px;outline:0;border:none;background-color:#3b3b47;overflow:hidden;transition:color .4s ease-in-out;float:right;margin:10px 10px 0 0}.disable-btn{z-index:1;position:relative;font-size:inherit;font-family:inherit;color:#fff;padding:10px 20px;outline:0;border:none;background-color:#3b3b47;overflow:hidden;transition:color .4s ease-in-out;float:right;margin:10px 10px 0 0;opacity:.5;cursor:not-allowed;pointer-events:all!important}.btn::before{content:'';z-index:-1;position:absolute;top:50%;left:50%;width:1em;height:1em;border-radius:50%;background-color:#2f86ee;transform-origin:center;transform:translate3d(-50%,-50%,0) scale3d(0,0,0);transition:transform .45s ease-in-out}.btn:hover{cursor:pointer;color:#161616}.btn:hover::before{transform:translate3d(-50%,-50%,0) scale3d(15,15,15)}
\ No newline at end of file

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',
 			'创建前端项目',