mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-30 13:02:46 +08:00
在CodeEditor中添加占位符支持
This commit is contained in:
parent
dcd392ba47
commit
4595ea8ef0
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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: "要传递的参数",
|
||||||
|
@ -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:
|
||||||
|
"共享当前上下文,支持utools,quickcommand,quickcomposer等接口",
|
||||||
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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user