mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-12-23 02:33:33 +08:00
OS/URL/PATH/BUFFER组件调整
This commit is contained in:
fofolee
@@ -1,368 +0,0 @@
|
||||
<template>
|
||||
<div class="os-editor">
|
||||
<!-- 操作类型选择 -->
|
||||
<OperationCard
|
||||
:model-value="argvs.operation"
|
||||
@update:model-value="(val) => updateArgvs('operation', val)"
|
||||
:options="operations"
|
||||
/>
|
||||
|
||||
<!-- 操作配置 -->
|
||||
<div class="operation-options q-mt-sm" v-if="hasOptions">
|
||||
<div class="bubble-pointer" :style="pointerStyle"></div>
|
||||
<!-- CPU信息配置 -->
|
||||
<div v-if="argvs.operation === 'cpus'" class="options-container">
|
||||
<div class="row items-center q-gutter-x-sm">
|
||||
<div
|
||||
v-for="opt in formatOptions"
|
||||
:key="opt.value"
|
||||
:class="['custom-btn', { active: argvs.format === opt.value }]"
|
||||
@click="updateArgvs('format', opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内存信息配置 -->
|
||||
<div v-if="argvs.operation === 'memory'" class="options-container">
|
||||
<div class="row items-center q-gutter-x-sm">
|
||||
<div
|
||||
v-for="opt in memoryOptions"
|
||||
:key="opt.value"
|
||||
:class="['custom-btn', { active: argvs.type === opt.value }]"
|
||||
@click="updateArgvs('type', opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网络信息配置 -->
|
||||
<div v-if="argvs.operation === 'network'" class="options-container">
|
||||
<div class="row items-center q-gutter-x-sm">
|
||||
<div
|
||||
v-for="opt in networkOptions"
|
||||
:key="opt.value"
|
||||
:class="['custom-btn', { active: argvs.type === opt.value }]"
|
||||
@click="updateArgvs('type', opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-mt-xs" v-if="argvs.type === 'networkInterfaces'">
|
||||
<q-checkbox
|
||||
:model-value="argvs.internal"
|
||||
@update:model-value="(val) => updateArgvs('internal', val)"
|
||||
label="包含内部接口"
|
||||
dense
|
||||
class="text-caption"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 平台信息配置 -->
|
||||
<div v-if="argvs.operation === 'platform'" class="options-container">
|
||||
<div class="row items-center q-gutter-x-sm wrap">
|
||||
<div
|
||||
v-for="opt in platformOptions"
|
||||
:key="opt.value"
|
||||
:class="['custom-btn', { active: argvs.type === opt.value }]"
|
||||
@click="updateArgvs('type', opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
import { stringifyArgv, parseFunction } from "js/composer/formatString";
|
||||
import OperationCard from "components/composer/common/OperationCard.vue";
|
||||
export default defineComponent({
|
||||
name: "OsEditor",
|
||||
components: {
|
||||
OperationCard,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
data() {
|
||||
return {
|
||||
operations: [
|
||||
{ value: "arch", label: "系统架构", icon: "memory" },
|
||||
{ value: "cpus", label: "CPU信息", icon: "developer_board" },
|
||||
{ value: "memory", label: "内存信息", icon: "storage" },
|
||||
{ value: "network", label: "网络信息", icon: "wifi" },
|
||||
{ value: "platform", label: "平台信息", icon: "computer" },
|
||||
],
|
||||
formatOptions: [
|
||||
{ label: "完整信息", value: "full" },
|
||||
{ label: "仅型号和速度", value: "simple" },
|
||||
],
|
||||
memoryOptions: [
|
||||
{ label: "总内存", value: "totalmem" },
|
||||
{ label: "空闲内存", value: "freemem" },
|
||||
],
|
||||
networkOptions: [
|
||||
{ label: "主机名", value: "hostname" },
|
||||
{ label: "网络接口", value: "networkInterfaces" },
|
||||
],
|
||||
platformOptions: [
|
||||
{ label: "操作系统名称", value: "platform" },
|
||||
{ label: "操作系统类型", value: "type" },
|
||||
{ label: "操作系统版本", value: "release" },
|
||||
{ label: "操作系统架构", value: "arch" },
|
||||
{ label: "CPU字节序", value: "endianness" },
|
||||
{ label: "系统临时目录", value: "tmpdir" },
|
||||
{ label: "主目录", value: "homedir" },
|
||||
{ label: "系统正常运行时间", value: "uptime" },
|
||||
{ label: "用户信息", value: "userInfo" },
|
||||
],
|
||||
defaultArgvs: {
|
||||
operation: "arch",
|
||||
format: "full",
|
||||
type: "platform",
|
||||
internal: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
argvs: {
|
||||
get() {
|
||||
return (
|
||||
this.modelValue.argvs ||
|
||||
this.parseCodeToArgvs(this.modelValue.code) || {
|
||||
...this.defaultArgvs,
|
||||
}
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
// 根据操作类型重置相关参数
|
||||
const newValue = { ...value };
|
||||
if (value.operation !== this.argvs.operation) {
|
||||
switch (value.operation) {
|
||||
case "cpus":
|
||||
newValue.format = "full";
|
||||
delete newValue.type;
|
||||
delete newValue.internal;
|
||||
break;
|
||||
case "memory":
|
||||
newValue.type = "totalmem";
|
||||
delete newValue.format;
|
||||
delete newValue.internal;
|
||||
break;
|
||||
case "network":
|
||||
newValue.type = "hostname";
|
||||
delete newValue.format;
|
||||
break;
|
||||
case "platform":
|
||||
newValue.type = "platform";
|
||||
delete newValue.format;
|
||||
delete newValue.internal;
|
||||
break;
|
||||
default:
|
||||
delete newValue.format;
|
||||
delete newValue.type;
|
||||
delete newValue.internal;
|
||||
}
|
||||
}
|
||||
|
||||
this.updateModelValue(newValue);
|
||||
},
|
||||
},
|
||||
hasOptions() {
|
||||
return ["cpus", "memory", "network", "platform"].includes(
|
||||
this.argvs.operation
|
||||
);
|
||||
},
|
||||
pointerStyle() {
|
||||
const activeIndex = this.operations.findIndex(
|
||||
(op) => op.value === this.argvs.operation
|
||||
);
|
||||
if (activeIndex === -1) return {};
|
||||
|
||||
// 获取操作卡片容器的宽度
|
||||
const container = document.querySelector(".operation-cards");
|
||||
if (!container) return {};
|
||||
|
||||
const containerWidth = container.offsetWidth;
|
||||
const cardCount = this.operations.length;
|
||||
|
||||
// 计算每个卡片的位置
|
||||
const cardWidth = 100; // 卡片宽度
|
||||
const pointerWidth = 12; // 尖角宽度
|
||||
|
||||
// 计算卡片之间的间距
|
||||
const totalGapWidth = containerWidth - cardWidth * cardCount;
|
||||
const gapWidth = totalGapWidth / (cardCount - 1);
|
||||
|
||||
// 计算当前选中卡片的中心位置
|
||||
const leftOffset =
|
||||
(cardWidth + gapWidth) * activeIndex + cardWidth / 2 - pointerWidth / 2;
|
||||
|
||||
return {
|
||||
left: `${leftOffset}px`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
generateCode(argvs = this.argvs) {
|
||||
const params = {};
|
||||
|
||||
// 根据不同操作类型添加特定参数
|
||||
switch (argvs.operation) {
|
||||
case "cpus":
|
||||
params.format = argvs.format;
|
||||
break;
|
||||
case "memory":
|
||||
params.type = argvs.type;
|
||||
break;
|
||||
case "network":
|
||||
params.type = argvs.type;
|
||||
if (argvs.type === "networkInterfaces") {
|
||||
params.internal = argvs.internal;
|
||||
}
|
||||
break;
|
||||
case "platform":
|
||||
params.type = argvs.type;
|
||||
break;
|
||||
}
|
||||
|
||||
// 如果没有参数，直接调用函数
|
||||
if (Object.keys(params).length === 0) {
|
||||
return `${this.modelValue.value}.${argvs.operation}()`;
|
||||
}
|
||||
|
||||
return `${this.modelValue.value}.${argvs.operation}(${stringifyArgv(
|
||||
params
|
||||
)})`;
|
||||
},
|
||||
parseCodeToArgvs(code) {
|
||||
if (!code) return null;
|
||||
|
||||
try {
|
||||
// 使用 parseFunction 解析代码
|
||||
const result = parseFunction(code);
|
||||
if (!result) return this.defaultArgvs;
|
||||
|
||||
// 获取操作名称（方法名）
|
||||
const operation = result.name.split(".").pop();
|
||||
const [params = {}] = result.argvs;
|
||||
|
||||
return {
|
||||
...this.defaultArgvs,
|
||||
operation,
|
||||
...params,
|
||||
};
|
||||
} catch (e) {
|
||||
console.error("解析OS参数失败:", e);
|
||||
return this.defaultArgvs;
|
||||
}
|
||||
},
|
||||
updateArgvs(key, value) {
|
||||
this.argvs = {
|
||||
...this.argvs,
|
||||
[key]: value,
|
||||
};
|
||||
},
|
||||
getSummary(argvs) {
|
||||
return this.operations.find((op) => op.value === argvs.operation).label;
|
||||
},
|
||||
updateModelValue(argvs) {
|
||||
this.$emit("update:modelValue", {
|
||||
...this.modelValue,
|
||||
summary: this.getSummary(argvs),
|
||||
argvs,
|
||||
code: this.generateCode(argvs),
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.modelValue.argvs && !this.modelValue.code) {
|
||||
this.updateModelValue(this.defaultArgvs);
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.os-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.operation-options {
|
||||
position: relative;
|
||||
background: #f8f8f8;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-top: 12px !important;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
min-height: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bubble-pointer {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #f8f8f8;
|
||||
transform: rotate(45deg);
|
||||
transition: left 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.body--dark .operation-options,
|
||||
.body--dark .bubble-pointer {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.custom-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--q-primary);
|
||||
background: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.custom-btn:hover {
|
||||
background: var(--q-primary-opacity-1);
|
||||
}
|
||||
|
||||
.custom-btn.active {
|
||||
color: white;
|
||||
background: var(--q-primary);
|
||||
}
|
||||
|
||||
/* 覆盖command-composer的样式 */
|
||||
.command-composer .operation-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.command-composer .operation-card {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,438 +0,0 @@
|
||||
<template>
|
||||
<div class="path-editor">
|
||||
<!-- 操作类型选择 -->
|
||||
<OperationCard
|
||||
:model-value="argvs.operation"
|
||||
@update:model-value="(val) => updateArgvs('operation', val)"
|
||||
:options="operations"
|
||||
/>
|
||||
|
||||
<!-- 操作配置 -->
|
||||
<div class="operation-options q-mt-sm">
|
||||
<!-- 通用路径输入 -->
|
||||
<div class="options-container">
|
||||
<template
|
||||
v-if="
|
||||
[
|
||||
'normalize',
|
||||
'parse',
|
||||
'dirname',
|
||||
'basename',
|
||||
'extname',
|
||||
'isAbsolute',
|
||||
].includes(argvs.operation)
|
||||
"
|
||||
>
|
||||
<VariableInput
|
||||
:model-value="argvs.path"
|
||||
@update:model-value="(val) => updateArgvs('path', val)"
|
||||
label="路径"
|
||||
icon="folder"
|
||||
/>
|
||||
<!-- basename 的扩展名参数 -->
|
||||
<div v-if="argvs.operation === 'basename'" class="q-mt-sm">
|
||||
<VariableInput
|
||||
:model-value="argvs.ext"
|
||||
@update:model-value="(val) => updateArgvs('ext', val)"
|
||||
label="要移除的扩展名（可选）"
|
||||
icon="extension"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- join 和 resolve 的多路径输入 -->
|
||||
<template v-if="['join', 'resolve'].includes(argvs.operation)">
|
||||
<div
|
||||
v-for="(path, index) in argvs.paths"
|
||||
:key="index"
|
||||
class="q-mb-sm"
|
||||
>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<div class="col">
|
||||
<VariableInput
|
||||
:model-value="path"
|
||||
@update:model-value="(val) => updatePathAtIndex(index, val)"
|
||||
:label="'路径片段 ' + (index + 1)"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="index === argvs.paths.length - 1"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
size="sm"
|
||||
color="primary"
|
||||
@click="addPath"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="argvs.paths.length > 1"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="remove"
|
||||
color="negative"
|
||||
size="sm"
|
||||
@click="removePath(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- relative 的起始和目标路径 -->
|
||||
<template v-if="argvs.operation === 'relative'">
|
||||
<VariableInput
|
||||
:model-value="argvs.from"
|
||||
@update:model-value="(val) => updateArgvs('from', val)"
|
||||
label="起始路径"
|
||||
icon="folder"
|
||||
/>
|
||||
<div class="q-mt-sm">
|
||||
<VariableInput
|
||||
:model-value="argvs.to"
|
||||
@update:model-value="(val) => updateArgvs('to', val)"
|
||||
label="目标路径"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- format 的路径对象 -->
|
||||
<template v-if="argvs.operation === 'format'">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-sm-6">
|
||||
<VariableInput
|
||||
:model-value="argvs.pathObject.root"
|
||||
@update:model-value="(val) => updatePathObject('root', val)"
|
||||
label="根路径"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<VariableInput
|
||||
:model-value="argvs.pathObject.dir"
|
||||
@update:model-value="(val) => updatePathObject('dir', val)"
|
||||
label="目录"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<VariableInput
|
||||
:model-value="argvs.pathObject.base"
|
||||
@update:model-value="(val) => updatePathObject('base', val)"
|
||||
label="基本名称"
|
||||
icon="description"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<VariableInput
|
||||
:model-value="argvs.pathObject.name"
|
||||
@update:model-value="(val) => updatePathObject('name', val)"
|
||||
label="文件名"
|
||||
icon="insert_drive_file"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<VariableInput
|
||||
:model-value="argvs.pathObject.ext"
|
||||
@update:model-value="(val) => updatePathObject('ext', val)"
|
||||
label="扩展名"
|
||||
icon="extension"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
import { stringifyArgv, parseFunction } from "js/composer/formatString";
|
||||
import VariableInput from "components/composer/common/VariableInput.vue";
|
||||
import OperationCard from "components/composer/common/OperationCard.vue";
|
||||
export default defineComponent({
|
||||
name: "PathEditor",
|
||||
components: {
|
||||
VariableInput,
|
||||
OperationCard,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
data() {
|
||||
return {
|
||||
operations: [
|
||||
{ value: "normalize", label: "规范化路径", icon: "straighten" },
|
||||
{ value: "join", label: "连接路径", icon: "add_link" },
|
||||
{ value: "parse", label: "解析路径", icon: "account_tree" },
|
||||
{ value: "dirname", label: "获取目录名", icon: "folder" },
|
||||
{ value: "basename", label: "获取文件名", icon: "description" },
|
||||
{ value: "extname", label: "获取扩展名", icon: "extension" },
|
||||
{ value: "isAbsolute", label: "判断绝对路径", icon: "check_circle" },
|
||||
{ value: "relative", label: "计算相对路径", icon: "compare_arrows" },
|
||||
{ value: "resolve", label: "解析绝对路径", icon: "assistant_direction" },
|
||||
{ value: "format", label: "格式化路径", icon: "format_shapes" },
|
||||
],
|
||||
defaultArgvs: {
|
||||
operation: "normalize",
|
||||
path: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
paths: [
|
||||
{
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
],
|
||||
from: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
to: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
ext: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
pathObject: {
|
||||
root: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
dir: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
base: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
name: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
ext: {
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
argvs: {
|
||||
get() {
|
||||
return (
|
||||
this.modelValue.argvs ||
|
||||
this.parseCodeToArgvs(this.modelValue.code) || {
|
||||
...this.defaultArgvs,
|
||||
}
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
this.updateModelValue(value);
|
||||
},
|
||||
},
|
||||
pointerStyle() {
|
||||
const activeIndex = this.operations.findIndex(
|
||||
(op) => op.value === this.argvs.operation
|
||||
);
|
||||
if (activeIndex === -1) return {};
|
||||
|
||||
const cardWidth = 80;
|
||||
const gap = 4;
|
||||
const pointerWidth = 12;
|
||||
const leftOffset =
|
||||
(cardWidth + gap) * activeIndex + cardWidth / 2 - pointerWidth / 2;
|
||||
|
||||
return {
|
||||
left: `${leftOffset}px`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
generateCode(argvs = this.argvs) {
|
||||
switch (argvs.operation) {
|
||||
case "normalize":
|
||||
case "parse":
|
||||
case "dirname":
|
||||
case "extname":
|
||||
case "isAbsolute":
|
||||
return `${this.modelValue.value}.${argvs.operation}(${stringifyArgv(
|
||||
argvs.path
|
||||
)})`;
|
||||
|
||||
case "basename":
|
||||
if (argvs.ext && argvs.ext.value) {
|
||||
return `${this.modelValue.value}.${argvs.operation}(${stringifyArgv(
|
||||
argvs.path
|
||||
)}, ${stringifyArgv(argvs.ext)})`;
|
||||
}
|
||||
return `${this.modelValue.value}.${argvs.operation}(${stringifyArgv(
|
||||
argvs.path
|
||||
)})`;
|
||||
|
||||
case "join":
|
||||
case "resolve":
|
||||
return `${this.modelValue.value}.${argvs.operation}(${argvs.paths
|
||||
.map((p) => stringifyArgv(p))
|
||||
.join(", ")})`;
|
||||
|
||||
case "relative":
|
||||
return `${this.modelValue.value}.${argvs.operation}(${stringifyArgv(
|
||||
argvs.from
|
||||
)}, ${stringifyArgv(argvs.to)})`;
|
||||
|
||||
case "format":
|
||||
return `${this.modelValue.value}.${argvs.operation}(${stringifyArgv(
|
||||
argvs.pathObject
|
||||
)})`;
|
||||
|
||||
default:
|
||||
return `${this.modelValue.value}.${argvs.operation}()`;
|
||||
}
|
||||
},
|
||||
parseCodeToArgvs(code) {
|
||||
if (!code) return null;
|
||||
|
||||
try {
|
||||
// 定义需要使用variable格式的路径
|
||||
const variableFormatPaths = [
|
||||
"arg*", // 所有参数
|
||||
"arg*.**", // 所有参数的所有嵌套属性
|
||||
];
|
||||
|
||||
// 使用 parseFunction 解析代码
|
||||
const result = parseFunction(code, { variableFormatPaths });
|
||||
if (!result) return this.defaultArgvs;
|
||||
|
||||
const operation = result.name.split(".").pop();
|
||||
const [firstArg, secondArg] = result.argvs;
|
||||
|
||||
const newArgvs = {
|
||||
...this.defaultArgvs,
|
||||
operation,
|
||||
};
|
||||
|
||||
switch (operation) {
|
||||
case "normalize":
|
||||
case "parse":
|
||||
case "dirname":
|
||||
case "extname":
|
||||
case "isAbsolute":
|
||||
newArgvs.path = firstArg;
|
||||
break;
|
||||
|
||||
case "basename":
|
||||
newArgvs.path = firstArg;
|
||||
if (secondArg) {
|
||||
newArgvs.ext = secondArg;
|
||||
}
|
||||
break;
|
||||
|
||||
case "join":
|
||||
case "resolve":
|
||||
newArgvs.paths = result.argvs.map((arg) => arg);
|
||||
break;
|
||||
|
||||
case "relative":
|
||||
newArgvs.from = firstArg;
|
||||
newArgvs.to = secondArg;
|
||||
break;
|
||||
|
||||
case "format":
|
||||
newArgvs.pathObject = firstArg;
|
||||
break;
|
||||
}
|
||||
|
||||
return newArgvs;
|
||||
} catch (e) {
|
||||
console.error("解析Path参数失败:", e);
|
||||
return this.defaultArgvs;
|
||||
}
|
||||
},
|
||||
updateArgvs(key, value) {
|
||||
this.argvs = {
|
||||
...this.argvs,
|
||||
[key]: value,
|
||||
};
|
||||
},
|
||||
updatePathAtIndex(index, value) {
|
||||
const newPaths = [...this.argvs.paths];
|
||||
newPaths[index] = value;
|
||||
this.updateArgvs("paths", newPaths);
|
||||
},
|
||||
updatePathObject(key, value) {
|
||||
this.updateArgvs("pathObject", {
|
||||
...this.argvs.pathObject,
|
||||
[key]: value,
|
||||
});
|
||||
},
|
||||
addPath() {
|
||||
this.updateArgvs("paths", [
|
||||
...this.argvs.paths,
|
||||
{
|
||||
value: "",
|
||||
isString: true,
|
||||
__varInputVal__: true,
|
||||
},
|
||||
]);
|
||||
},
|
||||
removePath(index) {
|
||||
const newPaths = [...this.argvs.paths];
|
||||
newPaths.splice(index, 1);
|
||||
this.updateArgvs("paths", newPaths);
|
||||
},
|
||||
getSummary(argvs) {
|
||||
return this.operations.find((op) => op.value === argvs.operation)?.label;
|
||||
},
|
||||
updateModelValue(argvs) {
|
||||
this.$emit("update:modelValue", {
|
||||
...this.modelValue,
|
||||
summary: this.getSummary(argvs),
|
||||
argvs,
|
||||
code: this.generateCode(argvs),
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!this.modelValue.argvs && !this.modelValue.code) {
|
||||
this.updateModelValue(this.defaultArgvs);
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.path-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
min-height: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user