mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-14 01:47:03 +08:00
初步设计编辑界面
This commit is contained in:
fofolee
parent
89843bc9cc
commit
f101fced6d
@ -1,193 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<!-- 匹配类型 -->
|
<!-- 命令设置栏 -->
|
||||||
<div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
|
<div
|
||||||
<div class="col">
|
class="absolute-left"
|
||||||
<q-select
|
:style="{
|
||||||
dense
|
top: languageBarHeight,
|
||||||
outlined
|
width: sideBarWidth,
|
||||||
color="teal"
|
background: $q.dark.isActive? '#2d2d2d' : '#f2f2f2',
|
||||||
transition-show="jump-down"
|
}"
|
||||||
transition-hide="jump-up"
|
v-if="notRunCodePage"
|
||||||
label-color="teal"
|
|
||||||
v-model="currentMatchType"
|
|
||||||
:options="matchTypes"
|
|
||||||
label="匹配类型"
|
|
||||||
>
|
>
|
||||||
<template v-slot:append>
|
<div class="row q-pa-md q-gutter-md">
|
||||||
<q-avatar rounded>
|
<q-img width="48px" :src="commandIcon" />
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
<div>
|
||||||
</q-avatar>
|
<q-input standout="bg-teal text-white" dense square
|
||||||
</template>
|
v-model="quickcommandInfo.features.explain"
|
||||||
<template v-slot:option="scope">
|
type="text"
|
||||||
<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 class="col">
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
color="teal"
|
|
||||||
transition-show="jump-down"
|
|
||||||
transition-hide="jump-up"
|
|
||||||
label-color="teal"
|
|
||||||
v-model="quickcommandInfo.program"
|
|
||||||
:options="programLanguages"
|
|
||||||
label="匹配规则"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-avatar rounded>
|
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
|
||||||
</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>
|
|
||||||
<!-- 说明、图标及标签 -->
|
|
||||||
<div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
|
|
||||||
<div class="col-auto">
|
|
||||||
<q-img width="40px" src="/logo/quickcommand.png"></q-img>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
color="teal"
|
|
||||||
transition-show="jump-down"
|
|
||||||
transition-hide="jump-up"
|
|
||||||
label-color="teal"
|
|
||||||
v-model="currentMatchType"
|
|
||||||
:options="matchTypes"
|
|
||||||
label="说明"
|
label="说明"
|
||||||
>
|
/>
|
||||||
<template v-slot:append>
|
<q-input standout="bg-teal text-white" dense square v-model="commandType" type="text" label="匹配类型" />
|
||||||
<q-avatar rounded>
|
<q-input standout="bg-teal text-white" dense square
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
v-model="quickcommandInfo.features.cmds[0]"
|
||||||
</q-avatar>
|
type="text"
|
||||||
</template>
|
label="关键字"
|
||||||
<template v-slot:option="scope">
|
/>
|
||||||
<q-item v-bind="scope.itemProps">
|
<q-input standout="bg-teal text-white" dense square v-model="quickcommandInfo.tags" type="text" label="标签" />
|
||||||
<q-item-section avatar>
|
<q-input standout="bg-teal text-white" dense square type="text" label="变量" />
|
||||||
<img width="32" :src="'/logo/' + scope.opt + '.png'" />
|
<q-input standout="bg-teal text-white" dense square type="text" label="输出" />
|
||||||
</q-item-section>
|
<q-input standout="bg-teal text-white" dense square
|
||||||
<q-item-section>
|
v-model="quickcommandInfo.features.platform"
|
||||||
<q-item-label v-html="scope.opt" />
|
type="text"
|
||||||
</q-item-section>
|
label="平台"
|
||||||
</q-item>
|
/>
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
color="teal"
|
|
||||||
transition-show="jump-down"
|
|
||||||
transition-hide="jump-up"
|
|
||||||
label-color="teal"
|
|
||||||
v-model="quickcommandInfo.program"
|
|
||||||
:options="programLanguages"
|
|
||||||
label="标签"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-avatar rounded>
|
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
<!-- 特殊变量、输出 -->
|
<div>
|
||||||
<div class="row q-gutter-sm q-py-xs" v-if="notRunCodePage">
|
<q-btn-group spread class="absolute-bottom">
|
||||||
<div class="col">
|
<q-btn color="red" icon="close" label="退出" @click="closeEditor" />
|
||||||
<q-select
|
<q-btn
|
||||||
dense
|
color="primary"
|
||||||
outlined
|
icon="save"
|
||||||
color="teal"
|
label="保存"
|
||||||
transition-show="jump-down"
|
@click="clickHandler2"
|
||||||
transition-hide="jump-up"
|
/>
|
||||||
label-color="teal"
|
</q-btn-group>
|
||||||
v-model="currentMatchType"
|
|
||||||
:options="matchTypes"
|
|
||||||
label="变量"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-avatar rounded>
|
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
|
||||||
</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>
|
||||||
<div class="col">
|
<div class="row"></div>
|
||||||
<q-select
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
color="teal"
|
|
||||||
transition-show="jump-down"
|
|
||||||
transition-hide="jump-up"
|
|
||||||
label-color="teal"
|
|
||||||
v-model="quickcommandInfo.program"
|
|
||||||
:options="programLanguages"
|
|
||||||
label="输出"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-avatar rounded>
|
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
|
||||||
</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>
|
||||||
</div>
|
<!-- 编程语言栏 -->
|
||||||
<!-- 编程语言 -->
|
<div class="row" v-show="languageBarHeight">
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div>
|
<div>
|
||||||
<q-select
|
<q-select
|
||||||
@ -204,13 +65,9 @@
|
|||||||
:options="programLanguages"
|
:options="programLanguages"
|
||||||
label="编程语言"
|
label="编程语言"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:append>
|
||||||
<q-avatar
|
<q-avatar size="lg" square>
|
||||||
size="lg"
|
<img :src="currentProgramLogo" />
|
||||||
square
|
|
||||||
:src="'/logo/' + quickcommandInfo.program + '.png'"
|
|
||||||
>
|
|
||||||
<img :src="'/logo/' + quickcommandInfo.program + '.png'" />
|
|
||||||
</q-avatar>
|
</q-avatar>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:option="scope">
|
<template v-slot:option="scope">
|
||||||
@ -276,7 +133,8 @@
|
|||||||
class="absolute-bottom"
|
class="absolute-bottom"
|
||||||
ref="editor"
|
ref="editor"
|
||||||
:style="{
|
:style="{
|
||||||
top: this.action.type === 'run' ? '40px' : '250px',
|
top: languageBarHeight,
|
||||||
|
left: this.action.type === 'run' ? '0' : sideBarWidth,
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<q-dialog v-model="isResultShow" @hide="runResult = ''" position="bottom">
|
<q-dialog v-model="isResultShow" @hide="runResult = ''" position="bottom">
|
||||||
@ -317,6 +175,8 @@ export default {
|
|||||||
programLanguages: Object.keys(this.$programmings),
|
programLanguages: Object.keys(this.$programmings),
|
||||||
matchTypes: ["关键字", "正则", "窗口", "文件", "专业模式"],
|
matchTypes: ["关键字", "正则", "窗口", "文件", "专业模式"],
|
||||||
currentMatchType: "关键字",
|
currentMatchType: "关键字",
|
||||||
|
sideBarWidth: "200px",
|
||||||
|
languageBarHeight: "40px",
|
||||||
quickcommandInfo: {
|
quickcommandInfo: {
|
||||||
features: {
|
features: {
|
||||||
explain: "",
|
explain: "",
|
||||||
@ -355,6 +215,16 @@ export default {
|
|||||||
notRunCodePage() {
|
notRunCodePage() {
|
||||||
return this.action.type !== "run";
|
return this.action.type !== "run";
|
||||||
},
|
},
|
||||||
|
commandIcon() {
|
||||||
|
return this.quickcommandInfo.features?.icon || this.currentProgramLogo;
|
||||||
|
},
|
||||||
|
currentProgramLogo() {
|
||||||
|
return "/logo/" + this.quickcommandInfo.program + ".png";
|
||||||
|
},
|
||||||
|
commandType() {
|
||||||
|
let cmd = this.quickcommandInfo.features.cmds[0];
|
||||||
|
return typeof cmd === "string" ? "关键字" : cmd?.type;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
methods: {
|
methods: {
|
||||||
@ -459,7 +329,7 @@ export default {
|
|||||||
this.quickcommandInfo.customOptions.argv,
|
this.quickcommandInfo.customOptions.argv,
|
||||||
this.quickcommandInfo.customOptions.ext,
|
this.quickcommandInfo.customOptions.ext,
|
||||||
] = res;
|
] = res;
|
||||||
this.matchLanguage(this.quickcommandInfo.customOptions.ext)
|
this.matchLanguage(this.quickcommandInfo.customOptions.ext);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 运行命令
|
// 运行命令
|
||||||
@ -538,6 +408,12 @@ export default {
|
|||||||
content.slice(contlength - 100);
|
content.slice(contlength - 100);
|
||||||
this.runResult += htmlEncode(content, raw);
|
this.runResult += htmlEncode(content, raw);
|
||||||
},
|
},
|
||||||
|
closeEditor() {
|
||||||
|
this.$emit("editorEvent", {
|
||||||
|
type: "close",
|
||||||
|
data: {},
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -173,39 +173,10 @@
|
|||||||
transition-hide="slide-down"
|
transition-hide="slide-down"
|
||||||
>
|
>
|
||||||
<q-card>
|
<q-card>
|
||||||
<q-bar>
|
<CommandEditor
|
||||||
<q-space />
|
:action="commandEditorAction"
|
||||||
<q-btn
|
@editorEvent="editorEvent"
|
||||||
dense
|
></CommandEditor>
|
||||||
flat
|
|
||||||
icon="minimize"
|
|
||||||
@click="maximizedToggle = false"
|
|
||||||
:disable="!maximizedToggle"
|
|
||||||
>
|
|
||||||
<q-tooltip
|
|
||||||
v-if="maximizedToggle"
|
|
||||||
content-class="bg-white text-primary"
|
|
||||||
>Minimize</q-tooltip
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
icon="crop_square"
|
|
||||||
@click="maximizedToggle = true"
|
|
||||||
:disable="maximizedToggle"
|
|
||||||
>
|
|
||||||
<q-tooltip
|
|
||||||
v-if="!maximizedToggle"
|
|
||||||
content-class="bg-white text-primary"
|
|
||||||
>Maximize</q-tooltip
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn dense flat icon="close" v-close-popup>
|
|
||||||
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-bar>
|
|
||||||
<CommandEditor :action="commandEditorAction"></CommandEditor>
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</div>
|
</div>
|
||||||
@ -552,6 +523,15 @@ export default {
|
|||||||
};
|
};
|
||||||
this.isCommandEditorShow = true;
|
this.isCommandEditorShow = true;
|
||||||
},
|
},
|
||||||
|
editorEvent(event) {
|
||||||
|
switch (event.type) {
|
||||||
|
case "close":
|
||||||
|
this.isCommandEditorShow = false;
|
||||||
|
return;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user