mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 23:16:18 +08:00
runCode 样式调整
This commit is contained in:
fofolee
parent
fef0a08940
commit
89843bc9cc
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="q-pa-md relative">
|
<div class="relative">
|
||||||
<!-- 匹配类型 -->
|
<!-- 匹配类型 -->
|
||||||
<div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
|
<div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
@ -63,9 +63,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 说明、图标及标签 -->
|
<!-- 说明、图标及标签 -->
|
||||||
<div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
|
<div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<q-img width="40px" src="/logo/quickcommand.png"></q-img>
|
<q-img width="40px" src="/logo/quickcommand.png"></q-img>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<q-select
|
<q-select
|
||||||
dense
|
dense
|
||||||
@ -187,12 +187,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 编程语言 -->
|
<!-- 编程语言 -->
|
||||||
<div class="row q-gutter-sm q-py-xs">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div>
|
<div>
|
||||||
<q-select
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
filled
|
||||||
|
square
|
||||||
|
hide-bottom-space
|
||||||
color="teal"
|
color="teal"
|
||||||
transition-show="jump-down"
|
transition-show="jump-down"
|
||||||
transition-hide="jump-up"
|
transition-hide="jump-up"
|
||||||
@ -202,8 +204,12 @@
|
|||||||
:options="programLanguages"
|
:options="programLanguages"
|
||||||
label="编程语言"
|
label="编程语言"
|
||||||
>
|
>
|
||||||
<template v-slot:append>
|
<template v-slot:prepend>
|
||||||
<q-avatar rounded>
|
<q-avatar
|
||||||
|
size="lg"
|
||||||
|
square
|
||||||
|
:src="'/logo/' + quickcommandInfo.program + '.png'"
|
||||||
|
>
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
||||||
</q-avatar>
|
</q-avatar>
|
||||||
</template>
|
</template>
|
||||||
@ -220,94 +226,57 @@
|
|||||||
</q-select>
|
</q-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<q-separator vertical />
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<div
|
<q-input
|
||||||
style="max-width: 300px"
|
dense
|
||||||
class="row q-gutter-sm"
|
filled
|
||||||
v-show="quickcommandInfo.program === 'custom'"
|
square
|
||||||
>
|
hide-bottom-space
|
||||||
<div class="col">
|
color="teal"
|
||||||
<q-input
|
input-style="width: 120px;"
|
||||||
dense
|
v-model="quickcommandInfo.scptarg"
|
||||||
color="teal"
|
label="脚本参数"
|
||||||
v-model="quickcommandInfo.customOptions.bin"
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
stack-label
|
/>
|
||||||
label="解释器路径"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input
|
|
||||||
dense
|
|
||||||
color="teal"
|
|
||||||
v-model="quickcommandInfo.customOptions.argv"
|
|
||||||
stack-label
|
|
||||||
label="解释器参数"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input
|
|
||||||
dense
|
|
||||||
color="teal"
|
|
||||||
v-model="quickcommandInfo.customOptions.ext"
|
|
||||||
@blur="matchLanguage"
|
|
||||||
label="后缀,不含."
|
|
||||||
stack-label
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto doc-container">
|
<div class="col-auto justify-end flex">
|
||||||
<div class="row q-gutter-sm items-center justify-end">
|
<q-btn-group>
|
||||||
<q-input
|
<q-btn
|
||||||
dense
|
flat
|
||||||
outlined
|
|
||||||
color="teal"
|
color="teal"
|
||||||
input-style="width: 120px;"
|
icon="help"
|
||||||
v-model="quickcommandInfo.scptarg"
|
@click="showHelp"
|
||||||
label="脚本参数"
|
v-show="quickcommandInfo.program === 'quickcommand'"
|
||||||
|
><q-tooltip>查看文档</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="teal"
|
||||||
|
icon="code"
|
||||||
|
@click="showCustomOptions"
|
||||||
v-show="quickcommandInfo.program !== 'quickcommand'"
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
/>
|
><q-tooltip>其他编程语言或自定义解释器路径</q-tooltip></q-btn
|
||||||
<q-btn-group>
|
>
|
||||||
<q-btn
|
<q-btn
|
||||||
rounded
|
flat
|
||||||
color="teal"
|
color="teal"
|
||||||
flat
|
icon="format_size"
|
||||||
icon="description"
|
@click="showCodingPage()"
|
||||||
@click="showHelp"
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
v-show="quickcommandInfo.program === 'quickcommand'"
|
><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
|
||||||
><q-tooltip>查看文档</q-tooltip></q-btn
|
>
|
||||||
>
|
<q-btn flat color="teal" icon="send" @click="runCurrentCommand()"
|
||||||
<q-btn
|
><q-tooltip>运行命令</q-tooltip></q-btn
|
||||||
rounded
|
>
|
||||||
color="teal"
|
</q-btn-group>
|
||||||
flat
|
|
||||||
icon="format_size"
|
|
||||||
@click="showCodingPage()"
|
|
||||||
v-show="quickcommandInfo.program !== 'quickcommand'"
|
|
||||||
><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
rounded
|
|
||||||
flat
|
|
||||||
color="teal"
|
|
||||||
icon="send"
|
|
||||||
@click="runCurrentCommand()"
|
|
||||||
><q-tooltip>运行命令</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</q-btn-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<MonocaEditor
|
<MonocaEditor
|
||||||
class="absolute"
|
class="absolute-bottom"
|
||||||
ref="editor"
|
ref="editor"
|
||||||
:style="{
|
:style="{
|
||||||
bottom: '2px',
|
top: this.action.type === 'run' ? '40px' : '250px',
|
||||||
left: '2px',
|
|
||||||
right: '2px',
|
|
||||||
top: this.action.type === 'run' ? '70px' : '250px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
border: '1px solid #8080808c',
|
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<q-dialog v-model="isResultShow" @hide="runResult = ''" position="bottom">
|
<q-dialog v-model="isResultShow" @hide="runResult = ''" position="bottom">
|
||||||
@ -464,6 +433,35 @@ export default {
|
|||||||
] = res;
|
] = res;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 自定义解释器路径界面
|
||||||
|
showCustomOptions() {
|
||||||
|
quickcommand
|
||||||
|
.showInputBox(
|
||||||
|
{
|
||||||
|
labels: ["解释器路径", "解释器参数", "脚本后缀"],
|
||||||
|
hints: [
|
||||||
|
"绝对路径，如：/home/.bin/python",
|
||||||
|
"运行参数，如：-u",
|
||||||
|
"脚本的后缀，不含点，如：py",
|
||||||
|
],
|
||||||
|
values: [
|
||||||
|
this.quickcommandInfo.customOptions?.bin,
|
||||||
|
this.quickcommandInfo.customOptions?.argv,
|
||||||
|
this.quickcommandInfo.customOptions?.ext,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
"其他编程语言或自定义解释器路径"
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res)
|
||||||
|
[
|
||||||
|
this.quickcommandInfo.customOptions.bin,
|
||||||
|
this.quickcommandInfo.customOptions.argv,
|
||||||
|
this.quickcommandInfo.customOptions.ext,
|
||||||
|
] = res;
|
||||||
|
this.matchLanguage(this.quickcommandInfo.customOptions.ext)
|
||||||
|
});
|
||||||
|
},
|
||||||
// 运行命令
|
// 运行命令
|
||||||
async runCurrentCommand() {
|
async runCurrentCommand() {
|
||||||
let cmd = this.$refs.editor.getEditorValue();
|
let cmd = this.$refs.editor.getEditorValue();
|
||||||
@ -543,6 +541,3 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user