From 2d66ecd419c34746deaf5e04222b055ff34f86ff Mon Sep 17 00:00:00 2001 From: unitwk Date: Thu, 21 Dec 2023 11:11:23 +0800 Subject: [PATCH] Feat: add docker config dialog --- frontend/components.d.ts | 1 + frontend/src/assets/tools.scss | 6 +- .../src/components/fc/KvOptionsDialog.vue | 125 ++++++++++++++++++ frontend/src/components/fc/index.ts | 37 ++++++ frontend/src/types/ant.ts | 2 +- .../instance/dialogs/InstanceDetails.vue | 40 ++++-- 6 files changed, 199 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/fc/KvOptionsDialog.vue diff --git a/frontend/components.d.ts b/frontend/components.d.ts index c9d345ee..6c32c5fd 100644 --- a/frontend/components.d.ts +++ b/frontend/components.d.ts @@ -73,6 +73,7 @@ declare module 'vue' { InnerCard: typeof import('./src/components/InnerCard.vue')['default'] InputDialogProvider: typeof import('./src/components/InputDialogProvider.vue')['default'] InstanceConfigEditor: typeof import('./src/components/InstanceConfigEditor.vue')['default'] + KvOptionsDialog: typeof import('./src/components/fc/KvOptionsDialog.vue')['default'] LayoutCard: typeof import('./src/components/LayoutCard.vue')['default'] LeftMenuBtn: typeof import('./src/components/LeftMenuBtn.vue')['default'] LeftMenusPanel: typeof import('./src/components/LeftMenusPanel.vue')['default'] diff --git a/frontend/src/assets/tools.scss b/frontend/src/assets/tools.scss index 3c3965c6..e002d128 100644 --- a/frontend/src/assets/tools.scss +++ b/frontend/src/assets/tools.scss @@ -182,14 +182,14 @@ .require-field { &::before { - content: '*'; - color:red; + content: "*"; + color: red; margin-right: 4px; } } .dialog-overflow-container { - height: 80vh; + max-height: 80vh; overflow-x: hidden; } diff --git a/frontend/src/components/fc/KvOptionsDialog.vue b/frontend/src/components/fc/KvOptionsDialog.vue new file mode 100644 index 00000000..8e22f3a5 --- /dev/null +++ b/frontend/src/components/fc/KvOptionsDialog.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/frontend/src/components/fc/index.ts b/frontend/src/components/fc/index.ts index eabf0a5e..40761c19 100644 --- a/frontend/src/components/fc/index.ts +++ b/frontend/src/components/fc/index.ts @@ -3,6 +3,15 @@ import type { UserInstance } from "@/types/user"; import SelectInstances from "@/components/fc/SelectInstances.vue"; import CmdAssistantDialog from "@/components/fc/CmdAssistantDialog/index.vue"; +import KvOptionsDialogVue from "@/components/fc/KvOptionsDialog.vue"; +import { t } from "@/lang/i18n"; +import type { AntColumnsType } from "@/types/ant"; + +interface PortConfigItem { + host: string; + container: string; + protocol: string; +} export async function useSelectInstances() { return await useMountComponent().mount(SelectInstances); @@ -11,3 +20,31 @@ export async function useSelectInstances() { export async function useCmdAssistantDialog() { return await useMountComponent().mount(CmdAssistantDialog); } + +export async function usePortEditDialog(data: PortConfigItem[] = []) { + return ( + (await useMountComponent({ + data, + title: t("容器端口映射配置"), + keyTitle: t("主机端口"), + valueTitle: t("容器端口"), + columns: [ + { + align: "center", + dataIndex: "host", + title: t("主机端口") + }, + { + align: "center", + dataIndex: "container", + title: t("容器端口") + }, + { + align: "center", + dataIndex: "protocol", + title: t("协议") + } + ] as AntColumnsType[] + }).mount(KvOptionsDialogVue)) || [] + ); +} diff --git a/frontend/src/types/ant.ts b/frontend/src/types/ant.ts index 1c284e33..a9d788ec 100644 --- a/frontend/src/types/ant.ts +++ b/frontend/src/types/ant.ts @@ -17,6 +17,6 @@ export interface AntTableCell { } export interface AntColumnsType extends ColumnType, Record { - key: string; + key?: string; align: any; } diff --git a/frontend/src/widgets/instance/dialogs/InstanceDetails.vue b/frontend/src/widgets/instance/dialogs/InstanceDetails.vue index becbe93c..52d5539e 100644 --- a/frontend/src/widgets/instance/dialogs/InstanceDetails.vue +++ b/frontend/src/widgets/instance/dialogs/InstanceDetails.vue @@ -15,7 +15,7 @@ import { Dayjs } from "dayjs"; import _ from "lodash"; import { GLOBAL_INSTANCE_NAME } from "../../../config/const"; import { dayjsToTimestamp, timestampToDayjs } from "../../../tools/time"; -import { useCmdAssistantDialog } from "@/components/fc"; +import { useCmdAssistantDialog, usePortEditDialog } from "@/components/fc"; interface FormDetail extends InstanceDetail { dayjsEndTime?: Dayjs; @@ -165,6 +165,28 @@ const openCmdAssistDialog = async () => { if (options.value && cmd) options.value.config.startCommand = cmd; }; +const handleEditDockerConfig = async (type: "port" | "network") => { + if (type === "port" && options.value?.config) { + // "25565:25565/tcp 8080:8080/tcp" -> Array + const portArray = (options.value?.config.docker.ports || []).map((iterator) => { + const pad = iterator.split("/"); + const ports = pad[0]; + const protocol = pad[1]; + const port1 = ports.split(":")[0]; + const port2 = ports.split(":")[1]; + return { + host: port1, + container: port2, + protocol + }; + }); + const result = await usePortEditDialog(portArray); + const portsArray = result.map((v) => `${v.host}:${v.container}/${v.protocol}`); + options.value!.config.docker.ports = portsArray; + console.log("结根：", portArray); + } +}; + defineExpose({ openDialog }); @@ -335,7 +357,7 @@ defineExpose({ - + {{ t("TXT_CODE_6904cb3") }} @@ -361,25 +383,27 @@ defineExpose({ - + {{ t("TXT_CODE_cf88c936") }} - {{ t("TXT_CODE_c7b95258") }} + {{ t("通过映射让容器进程使用主机的真实端口") }} - - {{ t("编辑") }} + + + {{ t("编辑") }} + - + {{ t("TXT_CODE_3e68ca00") }} - {{ t("TXT_CODE_29c2884") }} + {{ t("挂载额外路径到容器中") }}