mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-07-01 05:23:54 +08:00
命令编辑界面样式调整
This commit is contained in:
fofolee
parent
b09ec5fa3d
commit
d28629775d
@ -2,165 +2,186 @@
|
|||||||
<div class="relative">
|
<div class="relative">
|
||||||
<!-- 命令设置栏 -->
|
<!-- 命令设置栏 -->
|
||||||
<div
|
<div
|
||||||
class="absolute-left"
|
class="absolute-left shadow-10"
|
||||||
:style="{
|
:style="{
|
||||||
top: languageBarHeight,
|
|
||||||
width: sideBarWidth,
|
width: sideBarWidth,
|
||||||
background: $q.dark.isActive ? '#2d2d2d' : '#f2f2f2',
|
background: $q.dark.isActive ? '#2d2d2d' : '#f2f2f2',
|
||||||
|
zIndex: 1,
|
||||||
}"
|
}"
|
||||||
v-if="notRunCodePage"
|
v-if="showSidebar"
|
||||||
>
|
>
|
||||||
<div class="row q-pa-md q-gutter-md">
|
<div class="row q-pa-md q-gutter-md">
|
||||||
<q-img width="48px" :src="commandIcon" />
|
<div class="row">
|
||||||
<div>
|
<q-btn
|
||||||
<q-input
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
dense
|
dense
|
||||||
square
|
flat
|
||||||
v-model="quickcommandInfo.features.explain"
|
color="grey"
|
||||||
type="text"
|
icon="arrow_back_ios_new"
|
||||||
label="说明"
|
@click="closeEditor"
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
dense
|
|
||||||
square
|
|
||||||
v-model="commandType"
|
|
||||||
type="text"
|
|
||||||
label="匹配类型"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
dense
|
|
||||||
square
|
|
||||||
v-model="quickcommandInfo.features.cmds[0]"
|
|
||||||
type="text"
|
|
||||||
label="关键字"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
dense
|
|
||||||
square
|
|
||||||
v-model="quickcommandInfo.tags"
|
|
||||||
type="text"
|
|
||||||
label="标签"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
dense
|
|
||||||
square
|
|
||||||
type="text"
|
|
||||||
label="变量"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
dense
|
|
||||||
square
|
|
||||||
type="text"
|
|
||||||
label="输出"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
dense
|
|
||||||
square
|
|
||||||
v-model="quickcommandInfo.features.platform"
|
|
||||||
type="text"
|
|
||||||
label="平台"
|
|
||||||
/>
|
/>
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<q-img class="commandLogo" width="80px" :src="commandIcon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
v-model="quickcommandInfo.features.explain"
|
||||||
|
type="text"
|
||||||
|
label="说明"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
v-model="commandType"
|
||||||
|
type="text"
|
||||||
|
label="匹配类型"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
v-model="quickcommandInfo.features.cmds[0]"
|
||||||
|
type="text"
|
||||||
|
label="关键字"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
v-model="quickcommandInfo.tags"
|
||||||
|
type="text"
|
||||||
|
label="标签"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
type="text"
|
||||||
|
label="变量"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
type="text"
|
||||||
|
label="输出"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
v-model="quickcommandInfo.features.platform"
|
||||||
|
type="text"
|
||||||
|
label="平台"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div></div>
|
||||||
<q-btn-group spread class="absolute-bottom">
|
|
||||||
<q-btn color="red" icon="close" label="退出" @click="closeEditor" />
|
|
||||||
<q-btn
|
|
||||||
color="blue-9"
|
|
||||||
icon="save"
|
|
||||||
label="保存"
|
|
||||||
@click="clickHandler2"
|
|
||||||
/>
|
|
||||||
</q-btn-group>
|
|
||||||
</div>
|
|
||||||
<div class="row"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 编程语言栏 -->
|
<!-- 编程语言栏 -->
|
||||||
<div class="row" v-show="languageBarHeight">
|
<div
|
||||||
<div class="col">
|
class="absolute-top"
|
||||||
<div>
|
:style="{
|
||||||
<q-select
|
left: showSidebar ? sideBarWidth : 0,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="row" v-show="languageBarHeight">
|
||||||
|
<div class="col">
|
||||||
|
<div>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
square
|
||||||
|
hide-bottom-space
|
||||||
|
color="primary"
|
||||||
|
transition-show="jump-down"
|
||||||
|
transition-hide="jump-up"
|
||||||
|
@update:model-value="programChanged"
|
||||||
|
v-model="quickcommandInfo.program"
|
||||||
|
:options="programLanguages"
|
||||||
|
label="编程语言"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-avatar size="lg" square>
|
||||||
|
<img :src="currentProgramLogo" />
|
||||||
|
</q-avatar>
|
||||||
|
</template>
|
||||||
|
<template v-slot:option="scope">
|
||||||
|
<q-item v-bind="scope.itemProps">
|
||||||
|
<q-item-section avatar>
|
||||||
|
<img width="32" :src="'/logo/' + scope.opt + '.png'" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label v-html="scope.opt" />
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-separator vertical />
|
||||||
|
<div class="col-auto">
|
||||||
|
<q-input
|
||||||
dense
|
dense
|
||||||
standout="bg-primary text-white"
|
standout="bg-primary text-white"
|
||||||
square
|
square
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
color="primary"
|
color="primary"
|
||||||
transition-show="jump-down"
|
input-style="width: 120px;"
|
||||||
transition-hide="jump-up"
|
v-model="quickcommandInfo.scptarg"
|
||||||
@update:model-value="programChanged"
|
label="脚本参数"
|
||||||
v-model="quickcommandInfo.program"
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
:options="programLanguages"
|
/>
|
||||||
label="编程语言"
|
</div>
|
||||||
>
|
<div class="col-auto justify-end flex">
|
||||||
<template v-slot:append>
|
<q-btn-group>
|
||||||
<q-avatar size="lg" square>
|
<q-btn
|
||||||
<img :src="currentProgramLogo" />
|
flat
|
||||||
</q-avatar>
|
color="primary"
|
||||||
</template>
|
icon="help"
|
||||||
<template v-slot:option="scope">
|
@click="showHelp"
|
||||||
<q-item v-bind="scope.itemProps">
|
v-show="quickcommandInfo.program === 'quickcommand'"
|
||||||
<q-item-section avatar>
|
><q-tooltip>查看文档</q-tooltip></q-btn
|
||||||
<img width="32" :src="'/logo/' + scope.opt + '.png'" />
|
>
|
||||||
</q-item-section>
|
<q-btn
|
||||||
<q-item-section>
|
flat
|
||||||
<q-item-label v-html="scope.opt" />
|
color="primary"
|
||||||
</q-item-section>
|
icon="code"
|
||||||
</q-item>
|
@click="showCustomOptions"
|
||||||
</template>
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
</q-select>
|
><q-tooltip>其他编程语言或自定义解释器路径</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
icon="format_size"
|
||||||
|
@click="showCodingPage()"
|
||||||
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
|
><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
icon="play_arrow"
|
||||||
|
@click="runCurrentCommand()"
|
||||||
|
><q-tooltip>运行命令 {{ commandString }}+b</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
v-if="!isRunCodePage"
|
||||||
|
color="primary"
|
||||||
|
icon="save"
|
||||||
|
@click="saveCurrentCommand()"
|
||||||
|
><q-tooltip>保存 {{ commandString }}+s</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-btn-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<q-separator vertical />
|
|
||||||
<div class="col-auto">
|
|
||||||
<q-input
|
|
||||||
dense
|
|
||||||
standout="bg-primary text-white"
|
|
||||||
square
|
|
||||||
hide-bottom-space
|
|
||||||
color="primary"
|
|
||||||
input-style="width: 120px;"
|
|
||||||
v-model="quickcommandInfo.scptarg"
|
|
||||||
label="脚本参数"
|
|
||||||
v-show="quickcommandInfo.program !== 'quickcommand'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto justify-end flex">
|
|
||||||
<q-btn-group>
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
color="primary"
|
|
||||||
icon="help"
|
|
||||||
@click="showHelp"
|
|
||||||
v-show="quickcommandInfo.program === 'quickcommand'"
|
|
||||||
><q-tooltip>查看文档</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
color="primary"
|
|
||||||
icon="code"
|
|
||||||
@click="showCustomOptions"
|
|
||||||
v-show="quickcommandInfo.program !== 'quickcommand'"
|
|
||||||
><q-tooltip>其他编程语言或自定义解释器路径</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
color="primary"
|
|
||||||
icon="format_size"
|
|
||||||
@click="showCodingPage()"
|
|
||||||
v-show="quickcommandInfo.program !== 'quickcommand'"
|
|
||||||
><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn flat color="primary" icon="send" @click="runCurrentCommand()"
|
|
||||||
><q-tooltip>运行命令</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</q-btn-group>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<MonocaEditor
|
<MonocaEditor
|
||||||
@ -237,6 +258,9 @@ export default {
|
|||||||
runResult: "",
|
runResult: "",
|
||||||
runResultStatus: true,
|
runResultStatus: true,
|
||||||
resultMaxLength: 10000,
|
resultMaxLength: 10000,
|
||||||
|
showSidebar: this.action.type !== "run",
|
||||||
|
isRunCodePage: this.action.type === "run",
|
||||||
|
commandString: this.$q.platform.is.mac ? "⌘" : "ctrl",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -246,9 +270,6 @@ export default {
|
|||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
notRunCodePage() {
|
|
||||||
return this.action.type !== "run";
|
|
||||||
},
|
|
||||||
commandIcon() {
|
commandIcon() {
|
||||||
return this.quickcommandInfo.features?.icon || this.currentProgramLogo;
|
return this.quickcommandInfo.features?.icon || this.currentProgramLogo;
|
||||||
},
|
},
|
||||||
@ -448,6 +469,20 @@ export default {
|
|||||||
data: {},
|
data: {},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 保存
|
||||||
|
saveCurrentCommand() {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.commandLogo {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 10s;
|
||||||
|
filter: drop-shadow(2px 1px 1px grey);
|
||||||
|
}
|
||||||
|
.commandLogo:hover {
|
||||||
|
transition: 10s;
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user