在CodeEditor中添加占位符支持

This commit is contained in:
fofolee 2025-01-25 00:30:32 +08:00
parent dcd392ba47
commit 4595ea8ef0
4 changed files with 92 additions and 4 deletions

View File

@ -1,6 +1,11 @@
<template> <template>
<div class="code-editor" :style="{ height: height }"> <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> </div>
</template> </template>
@ -36,6 +41,11 @@ export default {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
// placeholder
placeholder: {
type: String,
default: "请输入...",
},
}, },
emits: ["update:modelValue", "change"], emits: ["update:modelValue", "change"],
data() { data() {
@ -202,6 +212,11 @@ export default {
} }
}, },
}, },
computed: {
showPlaceholder() {
return this.placeholder && (!this.value || this.value.trim() === "");
},
},
}; };
</script> </script>
@ -211,10 +226,38 @@ export default {
border: 1px solid rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
position: relative;
} }
.editor-container { .editor-container {
width: 100%; width: 100%;
height: 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> </style>

View File

@ -291,6 +291,10 @@ export default {
runInTerminal, runInTerminal,
} = options; } = options;
// true使
const runInTerminalOptions =
runInTerminal === true ? {} : runInTerminal;
const unescapeAndQuote = (str) => `"${str.replace(/\\"/g, '"')}"`; const unescapeAndQuote = (str) => `"${str.replace(/\\"/g, '"')}"`;
if (!programs[language]) { if (!programs[language]) {
@ -304,7 +308,7 @@ export default {
const defaultCharset = const defaultCharset =
isWin && ["cmd", "powershell"].includes(language) ? "gbk" : "utf-8"; isWin && ["cmd", "powershell"].includes(language) ? "gbk" : "utf-8";
const { scriptCode = defaultCharset, outputCode = defaultCharset } = const { scriptCode = defaultCharset, outputCode = defaultCharset } =
charset; charset;
@ -315,7 +319,7 @@ export default {
charset: { scriptCode, outputCode }, charset: { scriptCode, outputCode },
scptarg: argsStr, scptarg: argsStr,
}, },
runInTerminal, runInTerminalOptions,
(result, err) => (err ? reject(err) : reslove(result)) (result, err) => (err ? reject(err) : reslove(result))
); );
false; false;

View File

@ -313,7 +313,7 @@ export const browserCommands = {
component: "CodeEditor", component: "CodeEditor",
icon: "code", icon: "code",
width: 12, width: 12,
placeholder: "输入JavaScript代码", placeholder: "输入JavaScript代码使用return返回结果",
}, },
{ {
topLabel: "要传递的参数", topLabel: "要传递的参数",

View File

@ -1,3 +1,5 @@
import programs from "js/options/programs";
export const scriptCommands = { export const scriptCommands = {
label: "编程相关", label: "编程相关",
icon: "integration_instructions", icon: "integration_instructions",
@ -26,6 +28,8 @@ export const scriptCommands = {
{ {
label: "JS脚本", label: "JS脚本",
component: "CodeEditor", component: "CodeEditor",
placeholder:
"共享当前上下文支持utoolsquickcommandquickcomposer等接口",
width: 12, width: 12,
}, },
], ],
@ -34,13 +38,50 @@ export const scriptCommands = {
value: "quickcommand.runCode", value: "quickcommand.runCode",
label: "执行代码", label: "执行代码",
icon: "script", icon: "script",
isAsync: true,
outputVariable: "result", outputVariable: "result",
saveOutput: true,
config: [ config: [
{ {
label: "脚本", label: "脚本",
component: "CodeEditor", component: "CodeEditor",
placeholder: "需要本机安装了对应的解释器/编译器",
width: 12, 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,
},
},
},
], ],
}, },
{ {