study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-10-11 08:03:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

重构命令输出变量系统：新增OutputEditor组件，支持更灵活的变量配置和回调函数创建

Browse Source
This commit is contained in:
fofolee
2025-01-26 01:36:20 +08:00
parent 0f020d394a
commit 208a6a08d9
21 changed files with 551 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/composer/ComposerCard.vue
View File

@@ -36,7 +36,6 @@
<CommandHead
:command="localCommand"
@update:outputVariable="handleOutputVariableUpdate"
@toggle-output="handleToggleOutput"
@toggle-collapse="handleToggleCollapse"
@run="runCommand"
@remove="$emit('remove')"
@@ -96,7 +95,6 @@ import VariableInput from "components/composer/common/VariableInput.vue";
import MultiParams from "components/composer/MultiParams.vue";
import CommandHead from "components/composer/card/CommandHead.vue";
import * as CardComponents from "js/composer/cardComponents";
import { processVariable } from "js/composer/variableManager";
import { newVarInputVal } from "js/composer/varInputValManager";
import ControlCommand from "components/composer/control/ControlCommand.vue";
@@ -156,24 +154,28 @@ export default defineComponent({
return { getCurrentExistingVar };
},
methods: {
handleOutputVariableUpdate(value) {
const result = processVariable({
value,
existingVars: this.getCurrentExistingVar().map((v) => v.name),
});
handleOutputVariableUpdate(result) {
const { outputVariable, mode, functionInfo } = result;
if (result.warning) {
quickcommand.showMessageBox(result.warning, "info");
}
if (outputVariable.name || outputVariable.details) {
this.localCommand.outputVariable = { ...outputVariable };
// 如果是回调模式，添加 callbackFunc 属性
if (mode === "callback") {
this.localCommand.callbackFunc = functionInfo.name;
} else {
delete this.localCommand.callbackFunc;
}
this.localCommand.outputVariable = result.processedValue;
},
handleToggleOutput() {
this.localCommand.saveOutput = !this.localCommand.saveOutput;
// 如果关闭输出，清空变量名
if (!this.localCommand.saveOutput) {
this.localCommand.outputVariable = null;
// 如果是回调函数模式，创建新函数
if (mode === "callback" && functionInfo) {
this.$emit("add-command", {
command: functionInfo,
type: "function",
});
}
} else {
delete this.localCommand.outputVariable;
delete this.localCommand.callbackFunc;
}
},
runCommand() {
@@ -182,9 +184,10 @@ export default defineComponent({
// 创建一个带临时变量的命令副本
const tempCommand = {
...this.localCommand,
outputVariable:
this.localCommand.outputVariable || `temp_${Date.now()}`,
saveOutput: true,
outputVariable: {
name: `temp_${Date.now()}`,
...this.localCommand.outputVariable,
},
};
this.$emit("run", tempCommand);
},
@@ -234,12 +237,10 @@ export default defineComponent({
},
handleAddPrint() {
// 创建一个打印命令
if (!this.localCommand.outputVariable) {
this.localCommand.outputVariable = `temp_${parseInt(
new Date().getTime() / 1000
)}`;
this.localCommand.saveOutput = true;
}
this.localCommand.outputVariable = {
name: `temp_${Date.now()}`,
...this.localCommand.outputVariable,
};
const printCommand = {
value: "console.log",
label: "显示消息",
@@ -250,7 +251,7 @@ export default defineComponent({
icon: "info",
},
],
argvs: [newVarInputVal("var", this.localCommand.outputVariable)],
argvs: [newVarInputVal("var", this.localCommand.outputVariable.name)],
};
this.$emit("add-command", {
command: printCommand,

51
src/components/composer/ComposerFlow.vue
View File

@@ -293,12 +293,6 @@ export default defineComponent({
...parsedAction,
id: this.getUniqueId(),
};
if (newCommand.saveOutput && newCommand.outputVariable) {
newCommand.outputVariable = processVariable({
value: newCommand.outputVariable,
existingVars: this.getCurrentExistingVar().map((v) => v.name),
}).processedValue;
}
return newCommand;
},
getUniqueId() {
@@ -351,7 +345,9 @@ export default defineComponent({
command,
{
//没有输出，则不打印
code: `if(${command.outputVariable}!==undefined){console.log(${command.outputVariable})}`,
code: `if(${command.outputVariable.name}!==undefined){
console.log(${command.outputVariable.name})
}`,
},
],
};
@@ -446,24 +442,31 @@ export default defineComponent({
});
return newCommands;
},
handleAddCommand({ command, type }, index) {
if (type === "chain") {
// 如果是复制链式命令
const { startIndex, endIndex } = this.getChainIndex(command.chainId);
const chainCommands = this.commands.slice(startIndex, endIndex + 1);
const newChainCommands = this.copyCommands(chainCommands);
const newCommands = [...this.commands];
newCommands.splice(endIndex + 1, 0, ...newChainCommands);
this.$emit("update:modelValue", newCommands);
handleAddCommand(event, index) {
const { command, type } = event;
if (type === "function") {
// 如果是创建新函数的事件，传递给FlowTabs处理
this.$emit("action", "addFlow", command);
} else {
// 单个命令的复制逻辑
const newCommand = {
...command,
id: this.getUniqueId(),
};
const newCommands = [...this.commands];
newCommands.splice(index + 1, 0, newCommand);
this.$emit("update:modelValue", newCommands);
// 原有的复制命令逻辑保持不变
if (type === "chain") {
// 如果是复制链式命令
const { startIndex, endIndex } = this.getChainIndex(command.chainId);
const chainCommands = this.commands.slice(startIndex, endIndex + 1);
const newChainCommands = this.copyCommands(chainCommands);
const newCommands = [...this.commands];
newCommands.splice(endIndex + 1, 0, ...newChainCommands);
this.$emit("update:modelValue", newCommands);
} else {
// 单个命令的复制逻辑
const newCommand = {
...command,
id: this.getUniqueId(),
};
const newCommands = [...this.commands];
newCommands.splice(index + 1, 0, newCommand);
this.$emit("update:modelValue", newCommands);
}
}
},
handleToggleChainDisable({ chainId, disabled }) {

74
src/components/composer/FlowTabs.vue
View File

@@ -84,7 +84,7 @@
v-model="showVariableManager"
:flow="flow"
:variables="flow.customVariables"
@update-flow="updateFlow(flow)"
@update-flow="Sub(flow)"
:is-main-flow="flow.id === 'main'"
:output-variables="outputVariables"
class="variable-panel"
@@ -102,7 +102,6 @@ import FlowManager from "components/composer/flow/FlowManager.vue";
import { generateCode } from "js/composer/generateCode";
import { findCommandByValue } from "js/composer/composerConfig";
import { generateUniqSuffix } from "js/composer/variableManager";
import { parseVariables } from "js/composer/variableManager";
export default defineComponent({
name: "FlowTabs",
components: {
@@ -152,9 +151,10 @@ export default defineComponent({
const getOutputVariables = (flow = getCurrentFlow()) => {
const variables = [];
for (const [index, cmd] of flow.commands.entries()) {
if (cmd.saveOutput && cmd.outputVariable) {
if (cmd.outputVariable) {
const { name, details = {} } = cmd.outputVariable;
variables.push(
...parseVariables(cmd.outputVariable).map((variable) => ({
...[name, ...Object.values(details)].map((variable) => ({
name: variable,
// 提供来源命令的标志信息
sourceCommand: {
@@ -231,16 +231,43 @@ export default defineComponent({
)
);
},
addFlow() {
addFlow(options = {}) {
const id = this.$root.getUniqueId();
const name = this.generateFlowName();
this.subFlows.push({
const name = options.name || this.generateFlowName();
const newFlow = {
id,
name,
label: name.replace("func_", "函数"),
commands: [],
customVariables: [],
});
};
// 添加函数参数
if (options.params) {
options.params.forEach((param) => {
newFlow.customVariables.push({
name: param,
type: "param",
});
});
}
// 添加局部变量
if (options.localVars && options.localVars.length > 0) {
options.localVars.forEach((varInfo) => {
newFlow.customVariables.push({
name: varInfo.name,
type: "var",
value: varInfo.value,
});
});
}
this.subFlows.push(newFlow);
if (options.params || options.localVars) {
return;
}
this.activeTab = id;
this.$nextTick(() => {
this.toggleVariableManager();
@@ -253,6 +280,16 @@ export default defineComponent({
this.activeTab = this.flows[0].id;
}
},
updateSubFlow(index, payload) {
const { params, localVars } = payload;
this.subFlows[index].customVariables = [
...params.map((param) => ({
name: param,
type: "param",
})),
...localVars,
];
},
generateFlowCode(flow) {
return generateCode(flow);
},
@@ -282,6 +319,16 @@ export default defineComponent({
case "toggleVariableManager":
this.toggleVariableManager();
break;
case "addFlow":
// 处理新函数创建
const index = this.subFlows.findIndex((f) => f.name === payload.name);
if (index > -1) {
// 如果函数已存在，则更新
this.updateSubFlow(index, payload);
} else {
this.addFlow(payload);
}
break;
default:
this.$emit("action", type, this.generateAllFlowCode());
}
@@ -295,18 +342,22 @@ export default defineComponent({
...flow,
commands: flow.commands.map((cmd) => {
const cmdCopy = { ...cmd };
// 移除不必要的属性
// 移除不必要保存的属性
const uselessProps = [
"config",
"code",
"label",
"component",
"subCommands",
"outputs",
"options",
"defaultValue",
"icon",
"width",
"placeholder",
"isAsync",
"summary",
"type",
];
uselessProps.forEach((prop) => delete cmdCopy[prop]);
return cmdCopy;
@@ -323,6 +374,7 @@ export default defineComponent({
const newFlows = flowsData.map((flow) => ({
...flow,
commands: flow.commands.map((cmd) => {
// 恢复所有属性
const command = findCommandByValue(cmd.value);
return {
...command,
@@ -330,7 +382,7 @@ export default defineComponent({
};
}),
}));
this.updateFlow(newFlows);
this.Sub(newFlows);
this.activeTab = this.mainFlow.id;
},
runFlows(flow) {
@@ -358,7 +410,7 @@ export default defineComponent({
this.activeTab = flow.id;
this.toggleVariableManager();
},
updateFlow(flow) {
Sub(flow) {
this.mainFlow = flow[0];
this.subFlows = flow.slice(1);
},

101
src/components/composer/card/CommandButtons.vue
View File

@@ -6,39 +6,18 @@
class="output-section row items-center no-wrap"
v-if="!isControlFlow"
>
<!-- 变量输入框 -->
<q-input
v-if="command.saveOutput"
v-model="inputValue"
@focus="sourceValue = inputValue"
@blur="handleBlur"
outlined
placeholder="变量名"
class="variable-input"
align="center"
>
</q-input>
<!-- 保存变量按钮 -->
<!-- 输出变量按钮 -->
<q-icon
:name="command.saveOutput ? 'data_object' : 'output'"
name="output"
v-if="!command.neverHasOutput"
class="output-btn"
@click="$emit('toggle-output')"
:color="command.outputVariable ? 'primary' : ''"
@click="showOutputEditor = true"
>
<q-tooltip>
<div class="text-body2">
{{
command.saveOutput
? "当前命令的输出将保存到变量中"
: "点击将此命令的输出保存为变量以供后续使用"
}}
</div>
<div class="text-body2">配置命令输出变量</div>
<div class="text-caption text-grey-5">
{{
command.saveOutput
? "点击取消输出到变量"
: "保存后可在其他命令中使用此变量"
}}
将命令的输出保存为变量以供后续使用
</div>
</q-tooltip>
</q-icon>
@@ -113,12 +92,24 @@
</q-icon>
</div>
</div>
<!-- 输出编辑器 -->
<OutputEditor
v-model="showOutputEditor"
:command="command"
@confirm="$emit('update:outputVariable', $event)"
/>
</div>
</template>
<script>
import OutputEditor from "./OutputEditor.vue";
export default {
name: "CommandButtons",
components: {
OutputEditor,
},
props: {
command: {
type: Object,
@@ -143,18 +134,11 @@ export default {
},
data() {
return {
inputValue: this.command.outputVariable || "",
sourceValue: "",
showOutputEditor: false,
};
},
watch: {
"command.outputVariable"(newVal) {
this.inputValue = newVal || "";
},
},
emits: [
"update:outputVariable",
"toggle-output",
"run",
"remove",
"toggle-collapse",
@@ -162,17 +146,6 @@ export default {
"toggle-disable",
"add-print",
],
methods: {
handleBlur() {
// 如果输入框的值和源值相同，则不更新
if (
this.inputValue.replace(/[ ]/g, "") ===
this.sourceValue.replace(/[ ]/g, "")
)
return;
this.$emit("update:outputVariable", this.inputValue);
},
},
};
</script>
@@ -185,37 +158,9 @@ export default {
/* 输出部分样式 */
.output-section {
/* margin-right: 8px; */
gap: 8px;
}
.variable-input {
width: 120px;
}
.output-section :deep(.q-field) {
border-radius: 4px;
}
.output-section :deep(.q-field__control) {
height: 20px;
min-height: 20px;
padding: 0 4px;
}
.output-section :deep(.q-field__marginal) {
height: 20px;
width: 24px;
min-width: 24px;
}
.output-section :deep(.q-field__native) {
padding: 0;
font-size: 12px;
min-height: 20px;
text-align: center;
}
/* 按钮样式 */
.output-btn,
.run-btn,
@@ -251,14 +196,6 @@ export default {
}
/* 暗色模式适配 */
.body--dark .output-section :deep(.q-field) {
background: rgba(255, 255, 255, 0.03);
}
.body--dark .output-section :deep(.q-field--focused) {
background: #1d1d1d;
}
.body--dark .output-btn {
border-color: rgba(255, 255, 255, 0.1);
}

9
src/components/composer/card/CommandHead.vue
View File

@@ -46,7 +46,6 @@
:isFirstCommandInChain="isFirstCommandInChain"
:isLastCommandInChain="isLastCommandInChain"
@update:outputVariable="$emit('update:outputVariable', $event)"
@toggle-output="$emit('toggle-output')"
@run="$emit('run')"
@remove="$emit('remove')"
/>
@@ -67,13 +66,7 @@ export default {
required: true,
},
},
emits: [
"update:outputVariable",
"toggle-output",
"run",
"remove",
"toggle-collapse",
],
emits: ["update:outputVariable", "run", "remove", "toggle-collapse"],
computed: {
contentClass() {
return {

318
src/components/composer/card/OutputEditor.vue Normal file
View File

@@ -0,0 +1,318 @@
<template>
<q-dialog v-model="isOpen" persistent>
<q-card class="output-editor q-px-sm">
<div class="row justify-center q-px-sm q-pt-md">
{{ commandName }}
</div>
<div class="simple-output q-px-sm">
<q-badge color="primary" class="q-mb-sm q-pa-xs">完整结果</q-badge>
<q-input v-model="simpleOutputVar" filled dense autofocus>
<template v-slot:prepend>
<div class="variable-label">
{{ currentOutputs?.label || "输出变量名" }}
</div>
</template>
</q-input>
</div>
<div v-if="hasNestedFields(currentOutputs)">
<q-badge color="primary" class="q-ma-sm q-pa-xs">详细输出</q-badge>
<q-scroll-area
style="height: 200px"
:thumb-style="{
width: '2px',
}"
>
<div class="detail-output column q-col-gutter-sm q-px-sm">
<div v-for="(output, key) in detailOutputs" :key="key">
<!-- 如果是嵌套对象 -->
<div v-if="hasNestedFields(output)">
<BorderLabel :label="output.label || key" :model-value="false">
<div class="column q-col-gutter-sm">
<div
v-for="(subOutput, subKey) in getNestedFields(output)"
:key="subKey"
>
<div class="output-item">
<q-input
v-model="outputVars[`${key}.${subKey}`]"
filled
dense
autofocus
class="col"
:placeholder="subOutput.placeholder"
>
<template v-slot:prepend>
<div class="variable-label">
{{ subOutput.label }}
</div>
</template>
</q-input>
</div>
</div>
</div>
</BorderLabel>
</div>
<!-- 如果是普通字段 -->
<div v-else class="output-item">
<q-input
v-model="outputVars[key]"
filled
dense
class="col"
:placeholder="output.placeholder"
autofocus
>
<template v-slot:prepend>
<div class="variable-label">{{ output.label }}</div>
</template>
</q-input>
</div>
</div>
</div>
</q-scroll-area>
</div>
<div v-if="isAsyncCommand">
<q-badge color="primary" class="q-ma-sm q-pa-xs">输出模式</q-badge>
<div class="row q-col-gutter-sm q-px-sm">
<q-select
v-model="outputMode"
:options="outputModeOptions"
filled
dense
autofocus
emit-value
map-options
class="col"
>
</q-select>
<q-input
v-model="callbackFunc"
filled
dense
autofocus
class="col-8"
v-if="outputMode === 'callback'"
>
<template v-slot:prepend>
<div class="variable-label">回调函数名</div>
</template>
</q-input>
</div>
</div>
<div class="row justify-end q-px-sm q-py-sm">
<q-btn flat label="取消" color="primary" v-close-popup />
<q-btn flat label="确定" color="primary" @click="handleConfirm" />
</div>
</q-card>
</q-dialog>
</template>
<script>
import { defineComponent } from "vue";
import BorderLabel from "components/composer/common/BorderLabel.vue";
export default defineComponent({
name: "OutputEditor",
components: {
BorderLabel,
},
props: {
modelValue: {
type: Boolean,
default: false,
},
command: {
type: Object,
required: true,
},
},
emits: ["update:modelValue", "confirm"],
computed: {
isOpen: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
currentSubCommand() {
if (!this.command.subCommands) return {};
return this.command.subCommands.find(
(cmd) => cmd.value === this.command.value
);
},
commandName() {
return this.currentSubCommand.label || this.command.label;
},
isAsyncCommand() {
return this.currentSubCommand.isAsync || this.command.isAsync;
},
currentOutputs() {
return this.currentSubCommand.outputs || this.command.outputs;
},
detailOutputs() {
let outputs = { ...this.currentOutputs };
delete outputs.label;
delete outputs.placeholder;
return outputs;
},
},
data() {
return {
simpleOutputVar: "",
outputVars: {},
outputMode: "wait",
outputModeOptions: [
{
label: "等待运行完毕",
value: "wait",
},
{
label: "输出到回调函数",
value: "callback",
},
],
callbackFunc: "",
};
},
watch: {
"command.outputVariable": {
immediate: true,
deep: true,
handler(outputVariable) {
this.initOutputVars(outputVariable);
},
},
"command.callbackFunc": {
immediate: true,
handler(callbackFunc) {
if (callbackFunc) {
this.outputMode = "callback";
this.callbackFunc = callbackFunc;
} else {
this.outputMode = "wait";
}
},
},
},
methods: {
hasNestedFields(output) {
console.log(output);
return Object.keys(output).some(
(key) => key !== "label" && key !== "placeholder"
);
},
getNestedFields(output) {
const fields = {};
Object.entries(output).forEach(([key, value]) => {
if (key !== "label" && key !== "placeholder") {
fields[key] = value;
}
});
return fields;
},
initOutputVars(outputVariable) {
// 初始化完整输出变量名
if (!outputVariable) return;
this.simpleOutputVar = outputVariable.name || "";
if (this.currentOutputs) {
// 初始化详细输出变量，直接使用扁平化的结构
this.outputVars = outputVariable?.details || {};
}
},
handleConfirm() {
const outputVariable = {
name: this.simpleOutputVar,
};
if (this.currentOutputs) {
const flatVars = {};
Object.entries(this.outputVars).forEach(([path, value]) => {
if (!value) return; // 跳过空值
flatVars[path] = value;
});
// 如果有非空的变量，才添加到结果中
if (Object.keys(flatVars).length > 0) {
outputVariable.details = flatVars;
}
}
// 根据输出模式处理
const result = {
outputVariable,
mode: this.outputMode,
};
// 如果是回调函数模式，添加回调函数名和参数信息
if (this.outputMode === "callback" && this.callbackFunc) {
// 添加函数参数和本地变量信息
result.functionInfo = {
name: this.callbackFunc,
params: [outputVariable.name],
localVars: outputVariable.details
? Object.entries(outputVariable.details).map(([path, varName]) => ({
name: varName,
type: "var",
value: `${outputVariable.name}.${path}`,
}))
: [],
};
}
this.$emit("confirm", result);
this.isOpen = false;
},
},
});
</script>
<style scoped>
.output-editor {
width: 450px;
}
.output-item {
border-radius: 8px;
transition: all 0.3s ease;
}
.output-item:hover {
background: rgba(0, 0, 0, 0.02);
}
.variable-label {
font-size: 12px;
border-radius: 4px;
padding-right: 10px;
text-align: center;
}
.body--dark .output-item:hover {
background: rgba(255, 255, 255, 0.02);
}
.output-editor :deep(.q-field--filled .q-field__control),
.output-editor :deep(.q-field--filled .q-field__control > *),
.output-editor :deep(.q-field--filled .q-field__native) {
max-height: 36px;
min-height: 36px;
border-radius: 5px;
font-size: 12px;
}
/* 去除filled输入框边框 */
.output-editor :deep(.q-field__control:before) {
border: none;
}
/* 去除filled输入框下划线 */
.output-editor :deep(.q-field__control:after) {
height: 0;
border-bottom: none;
}
</style>

8
src/components/composer/common/ButtonGroup.vue
View File

@@ -9,6 +9,9 @@
<div
v-for="opt in options"
:key="opt.value"
:style="{
height: height,
}"
:class="['button-item', { active: modelValue === opt.value }]"
@click="$emit('update:modelValue', opt.value)"
>
@@ -31,6 +34,10 @@ export default defineComponent({
modelValue: {
required: true,
},
height: {
type: String,
default: "26px",
},
options: {
type: Array,
required: true,
@@ -67,7 +74,6 @@ export default defineComponent({
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 0 12px;
font-size: 12px;
border-radius: 4px;

107
src/components/composer/flow/ComposerButtons.vue
View File

@@ -60,28 +60,33 @@
<q-tooltip>载入</q-tooltip>
</q-btn>
<q-separator vertical />
<q-btn
flat
dense
icon="preview"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<q-btn flat dense icon="preview" @click="isVisible = true">
<q-tooltip>预览代码</q-tooltip>
</q-btn>
<q-btn dense flat icon="play_circle" @click="$emit('action', 'run')">
<q-tooltip>运行</q-tooltip>
</q-btn>
</div>
<transition name="preview-fade">
<div v-if="isVisible" class="preview-popup">
<div class="preview-header">
<q-icon name="code" size="16px" class="q-mr-xs" />
<span>预览代码</span>
</div>
<pre class="preview-code"><code>{{ code }}</code></pre>
</div>
</transition>
<q-dialog v-model="isVisible">
<q-card style="width: 550px">
<q-card-section class="row items-center q-py-xs q-px-md">
<div>
<q-icon name="code" size="16px" class="q-mr-sm" />
预览代码
</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<q-card-section class="q-pa-none">
<q-separator />
<q-scroll-area style="height: 400px">
<pre class="preview-code"><code>{{ code }}</code></pre>
</q-scroll-area>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
@@ -112,27 +117,16 @@ export default defineComponent({
return {
isVisible: false,
code: "",
previewTimer: null,
isDev: window.utools.isDev(),
};
},
methods: {
handleMouseEnter() {
this.previewTimer = setTimeout(() => {
watch: {
isVisible(val) {
if (val) {
this.code = this.generateCode();
this.isVisible = true;
}, 200);
}
},
handleMouseLeave() {
clearTimeout(this.previewTimer);
this.isVisible = false;
},
},
beforeUnmount() {
clearTimeout(this.previewTimer);
},
});
</script>
@@ -165,31 +159,6 @@ export default defineComponent({
color: var(--q-primary);
}
.preview-popup {
position: absolute;
top: 40px;
right: 30px;
min-width: 300px;
max-width: 600px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 1000;
transform-origin: center right;
}
.preview-header {
padding: 10px 14px;
background: rgba(var(--q-primary-rgb), 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 8px 8px 0 0;
font-size: 13px;
font-weight: 500;
color: var(--q-primary);
display: flex;
align-items: center;
}
.preview-code {
margin: 0;
padding: 14px;
@@ -215,30 +184,4 @@ export default defineComponent({
.preview-code::-webkit-scrollbar-thumb:hover {
background: var(--q-primary-opacity-30);
}
/* 过渡动画 */
.preview-fade-enter-active,
.preview-fade-leave-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.preview-fade-enter-from,
.preview-fade-leave-to {
opacity: 0;
transform: translateX(20px) scale(0.95);
}
/* 暗色模式适配 */
.body--dark .preview-popup {
background: #1d1d1d;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.body--dark .preview-header {
background: rgba(255, 255, 255, 0.03);
}
.body--dark .preview-code {
color: #e0e0e0;
}
</style>