初步设计编辑界面

This commit is contained in:
fofolee 2022-04-05 08:28:56 +08:00
parent 89843bc9cc
commit f101fced6d
2 changed files with 82 additions and 226 deletions

View File

@ -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>

View File

@ -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>