运行命令界面模块化

This commit is contained in:
fofolee 2022-04-08 12:18:03 +08:00
parent cfd7f2f884
commit 790c4a872c
5 changed files with 162 additions and 122 deletions

View File

@ -144,40 +144,21 @@
transition: '0.3s',
}"
/>
<q-dialog v-model="isResultShow" @hide="runResult = ''" position="bottom">
<q-card style="width: 90vh">
<q-toolbar>
<q-avatar>
<q-icon
:class="runResultStatus ? 'text-green' : 'text-red'"
style="font-size: 30px"
:name="runResultStatus ? 'task_alt' : 'error'"
></q-icon>
</q-avatar>
<q-toolbar-title
><span class="text-weight-bold">运行结果</span></q-toolbar-title
>
</q-toolbar>
<q-card-section class="row items-center">
<pre
:class="runResultStatus ? '' : 'text-red'"
v-html="runResult"
></pre>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="关闭" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
<!-- 运行结果 -->
<CommandRunResult
:action="runResultAction"
ref="result"
></CommandRunResult>
</div>
</template>
<script>
import MonocaEditor from "components/MonocaEditor";
import CommandMenu from "components/CommandMenu";
import CommandRunResult from "components/CommandRunResult";
export default {
components: { MonocaEditor, CommandMenu },
components: { MonocaEditor, CommandMenu, CommandRunResult },
data() {
return {
programLanguages: Object.keys(this.$programmings),
@ -198,14 +179,15 @@ export default {
ext: "",
},
},
isResultShow: false,
runResult: "",
runResultStatus: true,
resultMaxLength: 10000,
showSidebar: this.action.type !== "run",
isRunCodePage: this.action.type === "run",
parent: this.$parent.$parent.$parent.$parent,
commandString: this.$q.platform.is.mac ? "⌘" : "ctrl",
runResultAction: {
type: "inPlugin",
data: {},
},
};
},
props: {
@ -350,82 +332,6 @@ export default {
this.matchLanguage(this.quickcommandInfo.customOptions.ext);
});
},
//
async runCurrentCommand() {
let cmd = this.$refs.editor.getEditorValue();
cmd = window.special(cmd);
cmd = await this.replaceTempInputVals(cmd);
let terminal = false;
let raw = true;
switch (this.$refs.menu?.currentCommand.output) {
case "html":
raw = false;
break;
case "terminal":
terminal = true;
break;
case "ignore":
utools.hideMainWindow();
break;
}
if (this.quickcommandInfo.program === "quickcommand") {
window.runCodeInVm(cmd, (stdout, stderr) => {
if (stderr) return this.showRunResult(stderr, raw, false);
this.showRunResult(stdout, raw, true);
});
} else {
let option = this.$programmings[this.quickcommandInfo.program];
if (this.quickcommandInfo.program === "custom")
option = this.quickcommandInfo.customOptions;
option.scptarg = this.quickcommandInfo.scptarg;
option.charset = this.quickcommandInfo.charset;
window.runCodeFile(cmd, option, terminal, (stdout, stderr) => {
if (terminal) return;
if (stderr) return this.showRunResult(stderr, raw, false);
this.showRunResult(stdout, raw, true);
});
}
},
//
async replaceTempInputVals(cmd) {
let tempInputVals = [];
let needInputVal = [
"input",
"subinput",
"pwd",
"SelectFile",
"WindowInfo",
"MatchedFiles",
];
needInputVal.forEach((x) => {
let m = cmd.match(new RegExp("{{" + x + ".*?}}", "g"));
m &&
m.forEach((y) => tempInputVals.includes(y) || tempInputVals.push(y));
});
if (!tempInputVals.length) return cmd;
let inputs = await quickcommand.showInputBox(
tempInputVals,
"需要临时为以下变量赋值"
);
tempInputVals.forEach((t, n) => {
cmd = cmd.replace(new RegExp(t, "g"), inputs[n]);
});
return cmd;
},
//
showRunResult(content, raw, isSuccess) {
this.isResultShow = true;
this.runResultStatus = isSuccess;
let contlength = content.length;
if (contlength > this.resultMaxLength)
content =
content.slice(0, this.resultMaxLength - 100) +
`\n\n...\n${
contlength - this.resultMaxLength - 100
} 字省略\n...\n\n` +
content.slice(contlength - 100);
this.runResult += htmlEncode(content, raw);
},
closeEditor() {
this.$refs.editor?.destoryEditor();
this.$emit("editorEvent", {
@ -454,6 +360,12 @@ export default {
?.click();
});
},
//
runCurrentCommand() {
this.quickcommandInfo.cmd = this.$refs.editor?.getEditorValue();
this.quickcommandInfo.output = this.$refs.menu?.currentCommand.output;
this.$refs.result.runCurrentCommand(this.quickcommandInfo);
},
},
};
</script>

View File

@ -0,0 +1,134 @@
<template>
<div>
<div v-if="action.type === 'inPlugin'">
<q-dialog v-model="isResultShow" @hide="runResult = ''" position="bottom">
<q-card style="width: 90vh">
<q-toolbar>
<q-avatar>
<q-icon
:class="runResultStatus ? 'text-green' : 'text-red'"
style="font-size: 30px"
:name="runResultStatus ? 'task_alt' : 'error'"
></q-icon>
</q-avatar>
<q-toolbar-title
><span class="text-weight-bold">运行结果</span></q-toolbar-title
>
</q-toolbar>
<q-card-section class="row items-center">
<pre
:class="runResultStatus ? '' : 'text-red'"
v-html="runResult"
></pre>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="关闭" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</div>
<div v-else>
<q-card>
{{ action.data }}
</q-card>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isResultShow: false,
runResult: "",
runResultStatus: true,
};
},
props: {
action: Object,
},
methods: {
//
async runCurrentCommand(currentCommand) {
currentCommand.cmd = window.special(currentCommand.cmd);
currentCommand.cmd = await this.replaceTempInputVals(currentCommand.cmd);
let terminal = false;
let raw = true;
switch (currentCommand.output) {
case "html":
raw = false;
break;
case "terminal":
terminal = true;
break;
case "ignore":
utools.hideMainWindow();
break;
}
if (currentCommand.program === "quickcommand") {
window.runCodeInVm(currentCommand.cmd, (stdout, stderr) => {
if (stderr) return this.showRunResult(stderr, raw, false);
this.showRunResult(stdout, raw, true);
});
} else {
let option = this.$programmings[currentCommand.program];
if (currentCommand.program === "custom")
option = currentCommand.customOptions;
option.scptarg = currentCommand.scptarg;
option.charset = currentCommand.charset;
window.runCodeFile(
currentCommand.cmd,
option,
terminal,
(stdout, stderr) => {
if (terminal) return;
if (stderr) return this.showRunResult(stderr, raw, false);
this.showRunResult(stdout, raw, true);
}
);
}
},
//
async replaceTempInputVals(cmd) {
let tempInputVals = [];
let needInputVal = [
"input",
"subinput",
"pwd",
"SelectFile",
"WindowInfo",
"MatchedFiles",
];
needInputVal.forEach((x) => {
let m = cmd.match(new RegExp("{{" + x + ".*?}}", "g"));
m &&
m.forEach((y) => tempInputVals.includes(y) || tempInputVals.push(y));
});
if (!tempInputVals.length) return cmd;
let inputs = await quickcommand.showInputBox(
tempInputVals,
"需要临时为以下变量赋值"
);
tempInputVals.forEach((t, n) => {
cmd = cmd.replace(new RegExp(t, "g"), inputs[n]);
});
return cmd;
},
//
showRunResult(content, raw, isSuccess) {
this.isResultShow = true;
this.runResultStatus = isSuccess;
let contlength = content.length;
if (contlength > this.resultMaxLength)
content =
content.slice(0, this.resultMaxLength - 100) +
`\n\n...\n${
contlength - this.resultMaxLength - 100
} 字省略\n...\n\n` +
content.slice(contlength - 100);
this.runResult += htmlEncode(content, raw);
},
},
};
</script>

View File

@ -1,23 +1,22 @@
<template>
<div
:style="{
whiteSpace: 'pre',
}"
>
{{ enterData }}
<div>
<CommandRunResult :action="action"></CommandRunResult>
</div>
</template>
<script>
import CommandRunResult from "components/CommandRunResult.vue";
export default {
component: { CommandRunResult },
data() {
return {
output: "",
enterData: "",
action: {
type: "fromUtools",
data: quickcommand.enterData,
},
};
},
mounted() {
this.enterData = quickcommand.enterData;
},
mounted() {},
};
</script>

View File

@ -1,5 +0,0 @@
<template>
<div>
quickPanel
</div>
</template>

View File

@ -17,7 +17,7 @@ const routes = [
},
{
path: '/panel_:tags(\\w+)',
component: () => import('pages/QuickPanel.vue')
component: () => import('pages/ConfigurationPage.vue')
},
{
path: '/needupdate',