diff --git a/frontend/components.d.ts b/frontend/components.d.ts index 484c1f77..74054107 100644 --- a/frontend/components.d.ts +++ b/frontend/components.d.ts @@ -64,6 +64,8 @@ declare module 'vue' { CardError: typeof import('./src/components/CardError.vue')['default'] CardOperator: typeof import('./src/components/CardOperator.vue')['default'] CardPanel: typeof import('./src/components/CardPanel.vue')['default'] + CmdAssistantDialog: typeof import('./src/components/fc/CmdAssistantDialog.vue')['default'] + CommandDialog: typeof import('./src/components/commandDialog.vue')['default'] CopyButton: typeof import('./src/components/CopyButton.vue')['default'] DataStatistic: typeof import('./src/components/DataStatistic.vue')['default'] Editor: typeof import('./src/components/Editor.vue')['default'] @@ -84,6 +86,6 @@ declare module 'vue' { PlaceHolderCard: typeof import('./src/components/PlaceHolderCard.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] - SelectInstances: typeof import('./src/components/SelectInstances.vue')['default'] + SelectInstances: typeof import('./src/components/fc/SelectInstances.vue')['default'] } } diff --git a/frontend/src/components/NewCardList/params.vue b/frontend/src/components/NewCardList/params.vue index f32dd28e..9d5f5336 100644 --- a/frontend/src/components/NewCardList/params.vue +++ b/frontend/src/components/NewCardList/params.vue @@ -5,7 +5,7 @@ import type { MapData } from "@/types/index"; import type { FormInstance } from "ant-design-vue"; import { BulbOutlined } from "@ant-design/icons-vue"; import { $t as t } from "@/lang/i18n"; -import { useSelectInstances } from "@/hooks/useSelectInstances"; +import { useSelectInstances } from "@/components/fc"; const open = ref(false); const card = ref(); diff --git a/frontend/src/components/fc/CmdAssistantDialog.vue b/frontend/src/components/fc/CmdAssistantDialog.vue new file mode 100644 index 00000000..ec7dd2c7 --- /dev/null +++ b/frontend/src/components/fc/CmdAssistantDialog.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/frontend/src/components/SelectInstances.vue b/frontend/src/components/fc/SelectInstances.vue similarity index 99% rename from frontend/src/components/SelectInstances.vue rename to frontend/src/components/fc/SelectInstances.vue index d9d82c8d..d5b0112b 100644 --- a/frontend/src/components/SelectInstances.vue +++ b/frontend/src/components/fc/SelectInstances.vue @@ -14,7 +14,7 @@ import { remoteInstances, remoteNodeList } from "@/services/apis"; import { message } from "ant-design-vue"; import { computeNodeName } from "@/tools/nodes"; import { throttle } from "lodash"; -import { useScreen } from "../hooks/useScreen"; +import { useScreen } from "@/hooks/useScreen"; const props = defineProps(); const { isPhone } = useScreen(); diff --git a/frontend/src/components/fc/index.ts b/frontend/src/components/fc/index.ts new file mode 100644 index 00000000..77dc113c --- /dev/null +++ b/frontend/src/components/fc/index.ts @@ -0,0 +1,13 @@ +import { useMountComponent } from "@/hooks/useMountComponent"; +import type { UserInstance } from "@/types/user"; + +import SelectInstances from "@/components/fc/SelectInstances.vue"; +import CmdAssistantDialog from "@/components/fc/CmdAssistantDialog.vue"; + +export async function useSelectInstances() { + return await useMountComponent().mount(SelectInstances); +} + +export async function useCmdAssistantDialog() { + return await useMountComponent().mount(CmdAssistantDialog); +} diff --git a/frontend/src/hooks/useMountComponent.ts b/frontend/src/hooks/useMountComponent.ts index c1db9f1e..a2e833d6 100644 --- a/frontend/src/hooks/useMountComponent.ts +++ b/frontend/src/hooks/useMountComponent.ts @@ -1,7 +1,7 @@ import { createApp, type Component } from "vue"; import { sleep } from "@/tools/common"; -export function useMountComponent() { +export function useMountComponent(data: Record = {}) { let isOpen = false; const mount = (component: Component) => { if (isOpen) return; @@ -9,9 +9,9 @@ export function useMountComponent() { return new Promise((resolve, reject) => { const div = document.createElement("div"); document.body.appendChild(div); - const app = createApp(component, { - async destroyComponent(delay = 0) { + ...data, + async destroyComponent(delay = 1000) { await sleep(delay); app.unmount(); div.remove(); diff --git a/frontend/src/hooks/useSelectInstances.ts b/frontend/src/hooks/useSelectInstances.ts deleted file mode 100644 index 932d5ab8..00000000 --- a/frontend/src/hooks/useSelectInstances.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useMountComponent } from "./useMountComponent"; -import SelectInstances from "@/components/SelectInstances.vue"; -import type { UserInstance } from "@/types/user"; - -export function useSelectInstances() { - const { mount } = useMountComponent(); - return mount(SelectInstances); -} diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 4db909f0..a624ddb4 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -195,8 +195,8 @@ export interface QuickStartTemplate { } export interface MountComponent { - destroyComponent: Function; - emitResult: Function; + destroyComponent(delay?: number): void; + emitResult(data?: any): void; } export interface Schedule { diff --git a/frontend/src/widgets/instance/dialogs/InstanceDetails.vue b/frontend/src/widgets/instance/dialogs/InstanceDetails.vue index 8d79cf47..5c17d2d2 100644 --- a/frontend/src/widgets/instance/dialogs/InstanceDetails.vue +++ b/frontend/src/widgets/instance/dialogs/InstanceDetails.vue @@ -15,6 +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"; interface FormDetail extends InstanceDetail { dayjsEndTime?: Dayjs; @@ -157,6 +158,11 @@ const encodeFormData = () => { throw new Error("Ref Options is null"); }; +const openCmdAssistDialog = async () => { + const cmd = useCmdAssistantDialog(); + console.debug("cmd:", cmd); +}; + defineExpose({ openDialog }); @@ -238,7 +244,7 @@ defineExpose({ :rows="3" style="min-height: 40px" /> - + {{ t("TXT_CODE_2728d0d4") }} diff --git a/frontend/src/widgets/user/AccessSettings.vue b/frontend/src/widgets/user/AccessSettings.vue index b4a7e193..fa050f62 100644 --- a/frontend/src/widgets/user/AccessSettings.vue +++ b/frontend/src/widgets/user/AccessSettings.vue @@ -11,7 +11,7 @@ import { arrayFilter } from "@/tools/array"; import { userInfoApiAdvanced } from "@/services/apis"; import { useLayoutCardTools } from "@/hooks/useCardTools"; import { updateUserInstance } from "@/services/apis"; -import { useSelectInstances } from "@/hooks/useSelectInstances"; +import { useSelectInstances } from "@/components/fc"; import { message } from "ant-design-vue"; import { INSTANCE_STATUS } from "@/types/const";