mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-29 20:32:44 +08:00
在CodeEditor中添加占位符支持
This commit is contained in:
parent
dcd392ba47
commit
4595ea8ef0
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="code-editor" :style="{ height: height }">
|
||||
<div ref="editorContainer" class="editor-container"></div>
|
||||
<div ref="editorContainer" class="editor-container" />
|
||||
<div class="placeholder-wrapper" v-show="!value && placeholder">
|
||||
<div class="placeholder">
|
||||
{{ placeholder }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -36,6 +41,11 @@ export default {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// placeholder提示文本
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入...",
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue", "change"],
|
||||
data() {
|
||||
@ -202,6 +212,11 @@ export default {
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
showPlaceholder() {
|
||||
return this.placeholder && (!this.value || this.value.trim() === "");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -211,10 +226,38 @@ export default {
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.placeholder-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-left: 45px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
color: #535353;
|
||||
user-select: none;
|
||||
font-style: italic;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.code-editor:focus-within .placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.body--dark .placeholder {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
@ -291,6 +291,10 @@ export default {
|
||||
runInTerminal,
|
||||
} = options;
|
||||
|
||||
// 兼容编排,传入true时,使用默认终端
|
||||
const runInTerminalOptions =
|
||||
runInTerminal === true ? {} : runInTerminal;
|
||||
|
||||
const unescapeAndQuote = (str) => `"${str.replace(/\\"/g, '"')}"`;
|
||||
|
||||
if (!programs[language]) {
|
||||
@ -304,7 +308,7 @@ export default {
|
||||
|
||||
const defaultCharset =
|
||||
isWin && ["cmd", "powershell"].includes(language) ? "gbk" : "utf-8";
|
||||
|
||||
|
||||
const { scriptCode = defaultCharset, outputCode = defaultCharset } =
|
||||
charset;
|
||||
|
||||
@ -315,7 +319,7 @@ export default {
|
||||
charset: { scriptCode, outputCode },
|
||||
scptarg: argsStr,
|
||||
},
|
||||
runInTerminal,
|
||||
runInTerminalOptions,
|
||||
(result, err) => (err ? reject(err) : reslove(result))
|
||||
);
|
||||
false;
|
||||
|
@ -313,7 +313,7 @@ export const browserCommands = {
|
||||
component: "CodeEditor",
|
||||
icon: "code",
|
||||
width: 12,
|
||||
placeholder: "输入JavaScript代码",
|
||||
placeholder: "输入JavaScript代码,使用return返回结果",
|
||||
},
|
||||
{
|
||||
topLabel: "要传递的参数",
|
||||
|
@ -1,3 +1,5 @@
|
||||
import programs from "js/options/programs";
|
||||
|
||||
export const scriptCommands = {
|
||||
label: "编程相关",
|
||||
icon: "integration_instructions",
|
||||
@ -26,6 +28,8 @@ export const scriptCommands = {
|
||||
{
|
||||
label: "JS脚本",
|
||||
component: "CodeEditor",
|
||||
placeholder:
|
||||
"共享当前上下文,支持utools,quickcommand,quickcomposer等接口",
|
||||
width: 12,
|
||||
},
|
||||
],
|
||||
@ -34,13 +38,50 @@ export const scriptCommands = {
|
||||
value: "quickcommand.runCode",
|
||||
label: "执行代码",
|
||||
icon: "script",
|
||||
isAsync: true,
|
||||
outputVariable: "result",
|
||||
saveOutput: true,
|
||||
config: [
|
||||
{
|
||||
label: "脚本",
|
||||
component: "CodeEditor",
|
||||
placeholder: "需要本机安装了对应的解释器/编译器",
|
||||
width: 12,
|
||||
},
|
||||
{
|
||||
component: "OptionEditor",
|
||||
width: 12,
|
||||
options: {
|
||||
language: {
|
||||
label: "语言",
|
||||
component: "QSelect",
|
||||
icon: "language",
|
||||
options: Object.keys(programs).slice(2, -1),
|
||||
width: 8,
|
||||
},
|
||||
runInTerminal: {
|
||||
label: "终端运行",
|
||||
icon: "terminal",
|
||||
component: "CheckButton",
|
||||
width: 4,
|
||||
},
|
||||
args: {
|
||||
topLabel: "参数",
|
||||
icon: "data_array",
|
||||
component: "ArrayEditor",
|
||||
width: 12,
|
||||
},
|
||||
charset: {
|
||||
label: "编码",
|
||||
icon: "abc",
|
||||
component: "DictEditor",
|
||||
options: {
|
||||
optionKeys: ["scriptCode", "outputCode"],
|
||||
},
|
||||
width: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
Loading…
x
Reference in New Issue
Block a user