From 8e651f1c6066b7895e6e53635e1bdc32148d7e48 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 16 Oct 2023 12:38:04 +0800
Subject: [PATCH 1/6] Optimize: user list

---
 frontend/src/widgets/UserList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/widgets/UserList.vue b/frontend/src/widgets/UserList.vue
index 200a56fc..7a89f28c 100644
--- a/frontend/src/widgets/UserList.vue
+++ b/frontend/src/widgets/UserList.vue
@@ -346,7 +346,7 @@ onMounted(async () => {
                         </a-menu-item> -->
                       </a-menu>
                     </template>
-                    <a-button>
+                    <a-button size="">
                       {{ t("TXT_CODE_fe731dfc") }}
                       <DownOutlined />
                     </a-button>

From 7942f310f756cbd2a3d40836b41d8a0230ab7e99 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 16 Oct 2023 12:38:24 +0800
Subject: [PATCH 2/6] Feat: select instances

---
 frontend/components.d.ts                      |   1 +
 frontend/src/components/SelectInstances.vue   | 226 ++++++++++++++++++
 frontend/src/types/index.ts                   |  12 +-
 frontend/src/widgets/user/AccessSettings.vue  |  98 +++++---
 .../src/widgets/user/dialog/UserResources.vue |  54 +++++
 5 files changed, 348 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/components/SelectInstances.vue
 create mode 100644 frontend/src/widgets/user/dialog/UserResources.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 11b05744..9d406d14 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -69,5 +69,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']
   }
 }
diff --git a/frontend/src/components/SelectInstances.vue b/frontend/src/components/SelectInstances.vue
new file mode 100644
index 00000000..ebfba39a
--- /dev/null
+++ b/frontend/src/components/SelectInstances.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import type { UserInstance } from "@/types";
+import { t } from "@/lang/i18n";
+import {
+  SearchOutlined,
+  DownOutlined,
+  FormOutlined,
+  DatabaseOutlined,
+  FrownOutlined
+} from "@ant-design/icons-vue";
+import BetweenMenus from "@/components/BetweenMenus.vue";
+import { remoteInstances } from "@/services/apis";
+import { remoteNodeList } from "../services/apis";
+import type { NodeStatus } from "../types/index";
+import { message } from "ant-design-vue";
+import { computeNodeName } from "../tools/nodes";
+import { throttle } from "lodash";
+
+const emit = defineEmits(["callback"]);
+const operationForm = ref({
+  instanceName: "",
+  currentPage: 1,
+  pageSize: 10
+});
+
+const currentRemoteNode = ref<NodeStatus>();
+
+const { execute: getNodes, state: nodes } = remoteNodeList();
+const { execute: getInstances, state: instances, isLoading } = remoteInstances();
+
+const instancesList = computed(() => {
+  const newInstances: UserInstance[] = [];
+  for (const instance of instances.value?.data || []) {
+    newInstances.push({
+      instanceUuid: instance.instanceUuid,
+      serviceUuid: currentRemoteNode.value?.uuid ?? "",
+      nickname: instance.config.nickname,
+      status: instance.status,
+      hostIp: `${currentRemoteNode.value?.ip}:${currentRemoteNode.value?.port}`
+    });
+  }
+  return newInstances;
+});
+
+const initNodes = async () => {
+  await getNodes();
+  if (!nodes.value?.length) {
+    return message.error(t("TXT_CODE_e3d96a26"));
+  }
+  if (localStorage.getItem("pageSelectedRemote")) {
+    currentRemoteNode.value = JSON.parse(localStorage.pageSelectedRemote);
+  } else {
+    currentRemoteNode.value = nodes.value[0];
+  }
+};
+
+const initInstancesData = async () => {
+  if (!currentRemoteNode.value) {
+    await initNodes();
+  }
+  try {
+    await getInstances({
+      params: {
+        remote_uuid: currentRemoteNode.value?.uuid ?? "",
+        page: operationForm.value.currentPage,
+        page_size: operationForm.value.pageSize,
+        instance_name: operationForm.value.instanceName.trim()
+      }
+    });
+  } catch (err) {
+    return message.error(t("访问远程节点异常"));
+  }
+};
+
+const selectedItems = ref<UserInstance[]>([]);
+
+const columns = [
+  {
+    align: "center",
+    title: t("实例名称"),
+    dataIndex: "nickname",
+    key: "instanceUuid"
+  },
+  {
+    align: "center",
+    title: t("操作"),
+    key: "operation"
+  }
+];
+
+const selectItem = (item: UserInstance) => {
+  selectedItems.value.push(item);
+  emit("callback", selectedItems.value);
+};
+
+const findItem = (record: UserInstance) => {
+  return selectedItems.value.some((item) => JSON.stringify(item) === JSON.stringify(record));
+};
+
+const removeItem = (item: UserInstance) => {
+  selectedItems.value.splice(selectedItems.value.indexOf(item), 1);
+  emit("callback", selectedItems.value);
+};
+
+onMounted(async () => {
+  await initInstancesData();
+});
+
+const handleQueryInstance = throttle(async () => {
+  await initInstancesData();
+}, 600);
+
+const handleChangeNode = async (item: NodeStatus) => {
+  try {
+    currentRemoteNode.value = item;
+    await initInstancesData();
+    localStorage.setItem("pageSelectedRemote", JSON.stringify(item));
+  } catch (err: any) {
+    console.error(err.message);
+  }
+};
+</script>
+
+<template>
+  <div style="height: 100%" class="container">
+    <a-row :gutter="[24, 24]" style="height: 100%">
+      <a-col :span="24">
+        <BetweenMenus>
+          <template #left>
+            <a-dropdown>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item
+                    v-for="item in nodes"
+                    :key="item.uuid"
+                    @click="handleChangeNode(item)"
+                  >
+                    <DatabaseOutlined v-if="item.available" />
+                    <FrownOutlined v-else />
+                    {{ computeNodeName(item.ip, item.available, item.remarks) }}
+                  </a-menu-item>
+                  <a-menu-divider />
+                  <a-menu-item key="toNodesPage">
+                    <FormOutlined />
+                    {{ t("TXT_CODE_28e53fed") }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+              <a-button class="mr-12">
+                {{
+                  computeNodeName(
+                    currentRemoteNode?.ip || "",
+                    currentRemoteNode?.available || true,
+                    currentRemoteNode?.remarks
+                  )
+                }}
+                <DownOutlined />
+              </a-button>
+            </a-dropdown>
+          </template>
+          <template #right>
+            <div class="search-input">
+              <a-input
+                v-model:value="operationForm.instanceName"
+                :placeholder="t('TXT_CODE_ce132192')"
+                @press-enter="handleQueryInstance"
+                @change="handleQueryInstance"
+              >
+                <template #prefix>
+                  <search-outlined />
+                </template>
+              </a-input>
+            </div>
+          </template>
+        </BetweenMenus>
+      </a-col>
+      <a-col :span="24">
+        <div v-if="instances" class="flex-between align-center">
+          <a-typography-text>
+            {{ t("已选择") }} {{ selectedItems.length }} {{ t("项") }}
+          </a-typography-text>
+          <a-pagination
+            v-model:current="operationForm.currentPage"
+            v-model:pageSize="operationForm.pageSize"
+            :total="instances.maxPage * operationForm.pageSize"
+            show-size-changer
+            @change="initInstancesData"
+          />
+        </div>
+      </a-col>
+      <template v-if="instancesList">
+        <a-col :span="24">
+          <a-table
+            :loading="isLoading"
+            :data-source="instancesList"
+            :columns="columns"
+            :pagination="false"
+            size="small"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'operation'">
+                <a-button v-if="findItem(record)" danger size="" @click="removeItem(record)">
+                  {{ t("移除") }}
+                </a-button>
+                <a-button v-else size="" @click="selectItem(record)">
+                  {{ t("选择") }}
+                </a-button>
+              </template>
+            </template>
+          </a-table>
+        </a-col>
+      </template>
+    </a-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.instance-card {
+  cursor: pointer;
+}
+.instance-card:hover {
+  border: 1px solid var(--color-gray-8);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
+}
+</style>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 62dee759..3235c6c8 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -99,17 +99,17 @@ export interface UserInfo {
 }
 
 export interface UserInstance {
-  endTime: string;
+  // endTime: string;
   hostIp: string;
-  ie: string;
+  // ie: string;
   instanceUuid: string;
-  lastDatetime: string;
+  // lastDatetime: string;
   nickname: string;
-  oe: string;
-  remarks: string;
+  // oe: string;
+  // remarks: string;
   serviceUuid: string;
   status: number;
-  stopCommand: string;
+  // stopCommand: string;
 }
 
 export interface ImageInfo {
diff --git a/frontend/src/widgets/user/AccessSettings.vue b/frontend/src/widgets/user/AccessSettings.vue
index 2e0cad4e..cf8f3c23 100644
--- a/frontend/src/widgets/user/AccessSettings.vue
+++ b/frontend/src/widgets/user/AccessSettings.vue
@@ -10,12 +10,15 @@ import { arrayFilter } from "@/tools/array";
 import { userInfoApiAdvanced } from "@/services/apis";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { updateUserInstance } from "@/services/apis";
+import UserResources from "./dialog/UserResources.vue";
+import { message } from "ant-design-vue";
 
 const props = defineProps<{
   card: LayoutCard;
   uuid: string;
 }>();
 
+const userResourcesDialog = ref<InstanceType<typeof UserResources>>();
 const screen = useScreen();
 
 let dataSource: Ref<UserInstance[]> = ref([]);
@@ -30,19 +33,32 @@ const handleDelete = async (deletedInstance: UserInstance) => {
       deletedInstance.instanceUuid == instance.instanceUuid
     ) {
       dataSource.value.splice(valueKey, 1);
-      await updateUserInstance().execute({
-        data: {
-          config: {
-            instances: dataSource.value
-          },
-          uuid: <string>userUuid
-        }
-      });
       break;
     }
   }
 };
 
+const addAnotherInstances = (array: UserInstance) => {
+  dataSource.value = dataSource.value.concat(array);
+};
+
+const saveData = async () => {
+  try {
+    await updateUserInstance().execute({
+      data: {
+        config: {
+          instances: dataSource.value
+        },
+        uuid: <string>userUuid
+      }
+    });
+    return message.success(t("更新成功"));
+  } catch (err: any) {
+    console.error(err);
+    return message.error(err.message);
+  }
+};
+
 async function refreshChart() {
   if (userUuid == null) {
     return;
@@ -112,39 +128,47 @@ const columns = computed(() => {
 
 <template>
   <div style="height: 100%" class="container">
-    <a-row :gutter="[24, 24]" style="height: 100%">
-      <div v-if="userUuid" class="h-100 w-100">
-        <a-col :span="24">
-          <BetweenMenus>
-            <template #left>
-              <a-typography-title class="mb-0" :level="4">
-                {{ t("TXT_CODE_e1c9a6ac") }}
-              </a-typography-title>
-            </template>
-            <template #right>
-              <a-button type="primary">{{ t("TXT_CODE_a60466a1") }}</a-button>
-            </template>
-          </BetweenMenus>
-        </a-col>
+    <a-row v-if="userUuid" :gutter="[24, 24]" style="height: 100%">
+      <a-col :span="24">
+        <BetweenMenus>
+          <template #left>
+            <a-typography-title class="mb-0" :level="4">
+              {{ t("TXT_CODE_e1c9a6ac") }}
+            </a-typography-title>
+          </template>
+          <template #right>
+            <a-button v-show="!screen.isPhone.value" class="mr-8" @click="refreshChart()">
+              {{ t("刷新") }}
+            </a-button>
+            <a-button class="mr-8" type="primary" ghost @click="saveData()">
+              {{ t("保存数据") }}
+            </a-button>
+            <a-button type="primary" @click="userResourcesDialog?.openDialog()">
+              {{ t("TXT_CODE_a60466a1") }}
+            </a-button>
+          </template>
+        </BetweenMenus>
+      </a-col>
 
-        <a-col :span="24">
-          <CardPanel class="h-100">
-            <template #body>
-              <a-table :data-source="dataSource" :columns="columns">
-                <template #bodyCell="{ column, record }">
-                  <template v-if="column.key === 'operation'">
-                    <a-button danger @click="handleDelete(record)">
-                      {{ t("TXT_CODE_ecbd7449") }}
-                    </a-button>
-                  </template>
+      <a-col :span="24">
+        <CardPanel class="h-100">
+          <template #body>
+            <a-table :data-source="dataSource" :columns="columns">
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'operation'">
+                  <a-button danger size="" @click="handleDelete(record)">
+                    {{ t("TXT_CODE_ecbd7449") }}
+                  </a-button>
                 </template>
-              </a-table>
-            </template>
-          </CardPanel>
-        </a-col>
-      </div>
+              </template>
+            </a-table>
+          </template>
+        </CardPanel>
+      </a-col>
     </a-row>
   </div>
+
+  <UserResources ref="userResourcesDialog" @selected-instances="addAnotherInstances" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/widgets/user/dialog/UserResources.vue b/frontend/src/widgets/user/dialog/UserResources.vue
new file mode 100644
index 00000000..f4a28f4c
--- /dev/null
+++ b/frontend/src/widgets/user/dialog/UserResources.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { t } from "@/lang/i18n";
+import { message } from "ant-design-vue";
+import SelectInstances from "@/components/SelectInstances.vue";
+import type { UserInstance } from "@/types";
+
+const emit = defineEmits(["selectedInstances"]);
+
+const open = ref(false);
+const openDialog = () => {
+  open.value = true;
+};
+const selectedItems = ref<UserInstance[]>([]);
+
+const submit = async () => {
+  try {
+    emit("selectedInstances", selectedItems.value);
+    selectedItems.value.splice(0, selectedItems.value.length);
+    open.value = false;
+    return;
+  } catch (err: any) {
+    return message.error(err.message);
+  }
+};
+
+defineExpose({
+  openDialog
+});
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    centered
+    :mask-closable="false"
+    :title="t('请选择实例')"
+    :ok-text="t('保存')"
+    @ok="submit"
+  >
+    <a-typography-paragraph>
+      <a-typography-text type="secondary">
+        {{ t("利用远程主机地址与模糊查询来为此用户增加应用实例") }}
+      </a-typography-text>
+    </a-typography-paragraph>
+    <SelectInstances
+      @callback="
+        (items: UserInstance[]) => {
+          selectedItems = items;
+        }
+      "
+    />
+  </a-modal>
+</template>

From 6abe0c37d00ed3cc21b4772f19b096f53adce053 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Tue, 17 Oct 2023 11:19:22 +0800
Subject: [PATCH 3/6] Optimize: instance status

---
 frontend/src/types/const.ts                  |  9 +++++++++
 frontend/src/widgets/UserInstanceList.vue    | 11 ++---------
 frontend/src/widgets/user/AccessSettings.vue |  4 ++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/types/const.ts b/frontend/src/types/const.ts
index 06ad94d4..a85e706f 100644
--- a/frontend/src/types/const.ts
+++ b/frontend/src/types/const.ts
@@ -1,3 +1,4 @@
+import { t } from "@/lang/i18n";
 export const CARD_FIXED_HEIGHT = 200;
 
 export const TERMINAL_CODE = [
@@ -11,3 +12,11 @@ export const TERMINAL_CODE = [
   "KS_C_5601",
   "UTF-16"
 ];
+
+export const INSTANCE_STATUS = {
+  "-1": t("状态未知"),
+  "0": t("已停止"),
+  "1": t("正在停止"),
+  "2": t("正在启动"),
+  "3": t("正在运行")
+};
diff --git a/frontend/src/widgets/UserInstanceList.vue b/frontend/src/widgets/UserInstanceList.vue
index c22c09d2..e7c5629d 100644
--- a/frontend/src/widgets/UserInstanceList.vue
+++ b/frontend/src/widgets/UserInstanceList.vue
@@ -4,6 +4,7 @@ import { onMounted } from "vue";
 import type { LayoutCard } from "@/types";
 import { userInfoApi } from "@/services/apis/index";
 import { useRouter } from "vue-router";
+import { INSTANCE_STATUS } from "@/types/const";
 
 defineProps<{
   card: LayoutCard;
@@ -13,14 +14,6 @@ const router = useRouter();
 
 const { execute, state } = userInfoApi();
 
-const status = {
-  "-1": t("状态未知"),
-  "0": t("已停止"),
-  "1": t("正在停止"),
-  "2": t("正在启动"),
-  "3": t("正在运行")
-};
-
 const columns = [
   {
     title: t("实例名称"),
@@ -32,7 +25,7 @@ const columns = [
     dataIndex: "status",
     key: "status",
     customRender: (e: { text: "-1" | "1" | "2" | "3" }) => {
-      return status[e.text] || e.text;
+      return INSTANCE_STATUS[e.text] || e.text;
     }
   },
   {
diff --git a/frontend/src/widgets/user/AccessSettings.vue b/frontend/src/widgets/user/AccessSettings.vue
index cf8f3c23..e58ed8ee 100644
--- a/frontend/src/widgets/user/AccessSettings.vue
+++ b/frontend/src/widgets/user/AccessSettings.vue
@@ -12,6 +12,7 @@ import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { updateUserInstance } from "@/services/apis";
 import UserResources from "./dialog/UserResources.vue";
 import { message } from "ant-design-vue";
+import { INSTANCE_STATUS } from "@/types/const";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -113,6 +114,9 @@ const columns = computed(() => {
       dataIndex: "status",
       key: "status",
       minWidth: "200px",
+      customRender: (e: { text: "-1" | "1" | "2" | "3" }) => {
+        return INSTANCE_STATUS[e.text] || e.text;
+      },
       condition: () => !screen.isPhone.value
     },
     {

From 10020b59ad16f110ed8a93859d2f1ed0ee258cf0 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Tue, 17 Oct 2023 16:16:46 +0800
Subject: [PATCH 4/6] Feat: add custom mount component

---
 frontend/src/hooks/useMountComponent.ts | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 frontend/src/hooks/useMountComponent.ts

diff --git a/frontend/src/hooks/useMountComponent.ts b/frontend/src/hooks/useMountComponent.ts
new file mode 100644
index 00000000..456af657
--- /dev/null
+++ b/frontend/src/hooks/useMountComponent.ts
@@ -0,0 +1,34 @@
+import { createApp, type Component } from "vue";
+import { sleep } from "@/tools/commom";
+
+export function useMountComponent() {
+  let isOpen = false;
+  const mount = <T>(component: Component) => {
+    if (isOpen) return;
+    isOpen = true;
+    return new Promise<T>((resolve, reject) => {
+      const div = document.createElement("div");
+      document.body.appendChild(div);
+
+      const app = createApp(component, {
+        async destroyComponent(delay = 0) {
+          console.log(delay);
+
+          await sleep(delay);
+          app.unmount();
+          div.remove();
+          isOpen = false;
+        },
+        emitResult(data: T) {
+          isOpen = false;
+          resolve(data);
+        }
+      });
+      app.mount(div);
+    });
+  };
+
+  return {
+    mount
+  };
+}

From c19ec752329bc85ce1729b36d49d75111a072e08 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Tue, 17 Oct 2023 16:20:09 +0800
Subject: [PATCH 5/6] Optimize: select instances

---
 frontend/src/components/SelectInstances.vue   | 39 ++++++++++++--
 frontend/src/hooks/useSelectInstances.ts      |  8 +++
 frontend/src/widgets/user/AccessSettings.vue  | 16 +++---
 .../src/widgets/user/dialog/UserResources.vue | 54 -------------------
 4 files changed, 51 insertions(+), 66 deletions(-)
 create mode 100644 frontend/src/hooks/useSelectInstances.ts
 delete mode 100644 frontend/src/widgets/user/dialog/UserResources.vue

diff --git a/frontend/src/components/SelectInstances.vue b/frontend/src/components/SelectInstances.vue
index ebfba39a..3ed12b9a 100644
--- a/frontend/src/components/SelectInstances.vue
+++ b/frontend/src/components/SelectInstances.vue
@@ -17,7 +17,18 @@ import { message } from "ant-design-vue";
 import { computeNodeName } from "../tools/nodes";
 import { throttle } from "lodash";
 
-const emit = defineEmits(["callback"]);
+const props = defineProps<{
+  destroyComponent: Function;
+  emitResult: Function;
+}>();
+
+const open = ref(false);
+
+const cancel = async () => {
+  open.value = false;
+  if (props.destroyComponent) props.destroyComponent(1000);
+};
+
 const operationForm = ref({
   instanceName: "",
   currentPage: 1,
@@ -91,7 +102,6 @@ const columns = [
 
 const selectItem = (item: UserInstance) => {
   selectedItems.value.push(item);
-  emit("callback", selectedItems.value);
 };
 
 const findItem = (record: UserInstance) => {
@@ -100,11 +110,16 @@ const findItem = (record: UserInstance) => {
 
 const removeItem = (item: UserInstance) => {
   selectedItems.value.splice(selectedItems.value.indexOf(item), 1);
-  emit("callback", selectedItems.value);
+};
+
+const submit = async () => {
+  if (props.emitResult) props.emitResult(selectedItems.value);
+  await cancel();
 };
 
 onMounted(async () => {
   await initInstancesData();
+  open.value = true;
 });
 
 const handleQueryInstance = throttle(async () => {
@@ -123,7 +138,21 @@ const handleChangeNode = async (item: NodeStatus) => {
 </script>
 
 <template>
-  <div style="height: 100%" class="container">
+  <a-modal
+    v-model:open="open"
+    centered
+    :mask-closable="false"
+    :title="t('请选择实例')"
+    :ok-text="t('保存')"
+    :cancel-text="t('取消')"
+    @ok="submit"
+    @cancel="cancel"
+  >
+    <a-typography-paragraph>
+      <a-typography-text type="secondary">
+        {{ t("利用远程主机地址与模糊查询来为此用户增加应用实例") }}
+      </a-typography-text>
+    </a-typography-paragraph>
     <a-row :gutter="[24, 24]" style="height: 100%">
       <a-col :span="24">
         <BetweenMenus>
@@ -212,7 +241,7 @@ const handleChangeNode = async (item: NodeStatus) => {
         </a-col>
       </template>
     </a-row>
-  </div>
+  </a-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/hooks/useSelectInstances.ts b/frontend/src/hooks/useSelectInstances.ts
new file mode 100644
index 00000000..e76b0eaa
--- /dev/null
+++ b/frontend/src/hooks/useSelectInstances.ts
@@ -0,0 +1,8 @@
+import { useMountComponent } from "./useMountComponent";
+import SelectInstances from "@/components/SelectInstances.vue";
+import type { UserInstance } from "@/types";
+
+export function useSelectInstances() {
+  const { mount } = useMountComponent();
+  return mount<UserInstance>(SelectInstances);
+}
diff --git a/frontend/src/widgets/user/AccessSettings.vue b/frontend/src/widgets/user/AccessSettings.vue
index e58ed8ee..e04a27ce 100644
--- a/frontend/src/widgets/user/AccessSettings.vue
+++ b/frontend/src/widgets/user/AccessSettings.vue
@@ -10,7 +10,7 @@ import { arrayFilter } from "@/tools/array";
 import { userInfoApiAdvanced } from "@/services/apis";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { updateUserInstance } from "@/services/apis";
-import UserResources from "./dialog/UserResources.vue";
+import { useSelectInstances } from "@/hooks/useSelectInstances";
 import { message } from "ant-design-vue";
 import { INSTANCE_STATUS } from "@/types/const";
 
@@ -19,7 +19,6 @@ const props = defineProps<{
   uuid: string;
 }>();
 
-const userResourcesDialog = ref<InstanceType<typeof UserResources>>();
 const screen = useScreen();
 
 let dataSource: Ref<UserInstance[]> = ref([]);
@@ -39,8 +38,13 @@ const handleDelete = async (deletedInstance: UserInstance) => {
   }
 };
 
-const addAnotherInstances = (array: UserInstance) => {
-  dataSource.value = dataSource.value.concat(array);
+const assignApp = async () => {
+  try {
+    const selectedInstances = await useSelectInstances();
+    if (selectedInstances) dataSource.value = dataSource.value.concat(selectedInstances);
+  } catch (err: any) {
+    console.error(err);
+  }
 };
 
 const saveData = async () => {
@@ -147,7 +151,7 @@ const columns = computed(() => {
             <a-button class="mr-8" type="primary" ghost @click="saveData()">
               {{ t("保存数据") }}
             </a-button>
-            <a-button type="primary" @click="userResourcesDialog?.openDialog()">
+            <a-button type="primary" @click="assignApp">
               {{ t("TXT_CODE_a60466a1") }}
             </a-button>
           </template>
@@ -171,8 +175,6 @@ const columns = computed(() => {
       </a-col>
     </a-row>
   </div>
-
-  <UserResources ref="userResourcesDialog" @selected-instances="addAnotherInstances" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/widgets/user/dialog/UserResources.vue b/frontend/src/widgets/user/dialog/UserResources.vue
deleted file mode 100644
index f4a28f4c..00000000
--- a/frontend/src/widgets/user/dialog/UserResources.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { t } from "@/lang/i18n";
-import { message } from "ant-design-vue";
-import SelectInstances from "@/components/SelectInstances.vue";
-import type { UserInstance } from "@/types";
-
-const emit = defineEmits(["selectedInstances"]);
-
-const open = ref(false);
-const openDialog = () => {
-  open.value = true;
-};
-const selectedItems = ref<UserInstance[]>([]);
-
-const submit = async () => {
-  try {
-    emit("selectedInstances", selectedItems.value);
-    selectedItems.value.splice(0, selectedItems.value.length);
-    open.value = false;
-    return;
-  } catch (err: any) {
-    return message.error(err.message);
-  }
-};
-
-defineExpose({
-  openDialog
-});
-</script>
-
-<template>
-  <a-modal
-    v-model:open="open"
-    centered
-    :mask-closable="false"
-    :title="t('请选择实例')"
-    :ok-text="t('保存')"
-    @ok="submit"
-  >
-    <a-typography-paragraph>
-      <a-typography-text type="secondary">
-        {{ t("利用远程主机地址与模糊查询来为此用户增加应用实例") }}
-      </a-typography-text>
-    </a-typography-paragraph>
-    <SelectInstances
-      @callback="
-        (items: UserInstance[]) => {
-          selectedItems = items;
-        }
-      "
-    />
-  </a-modal>
-</template>

From 3ba3d2b29315b4eb645390640534421f317357db Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Tue, 17 Oct 2023 19:58:30 +0800
Subject: [PATCH 6/6] Optimize: code

---
 frontend/src/components/SelectInstances.vue | 11 ++++-------
 frontend/src/hooks/useMountComponent.ts     |  2 --
 frontend/src/types/index.ts                 | 11 +++++------
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/SelectInstances.vue b/frontend/src/components/SelectInstances.vue
index 3ed12b9a..4bd7e1b1 100644
--- a/frontend/src/components/SelectInstances.vue
+++ b/frontend/src/components/SelectInstances.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import type { UserInstance } from "@/types";
+import type { UserInstance, MountComponent } from "@/types";
 import { t } from "@/lang/i18n";
 import {
   SearchOutlined,
@@ -17,10 +17,7 @@ import { message } from "ant-design-vue";
 import { computeNodeName } from "../tools/nodes";
 import { throttle } from "lodash";
 
-const props = defineProps<{
-  destroyComponent: Function;
-  emitResult: Function;
-}>();
+const props = defineProps<MountComponent>();
 
 const open = ref(false);
 
@@ -104,8 +101,8 @@ const selectItem = (item: UserInstance) => {
   selectedItems.value.push(item);
 };
 
-const findItem = (record: UserInstance) => {
-  return selectedItems.value.some((item) => JSON.stringify(item) === JSON.stringify(record));
+const findItem = (item: UserInstance) => {
+  return selectedItems.value.some((i) => JSON.stringify(i) === JSON.stringify(item));
 };
 
 const removeItem = (item: UserInstance) => {
diff --git a/frontend/src/hooks/useMountComponent.ts b/frontend/src/hooks/useMountComponent.ts
index 456af657..d49be8de 100644
--- a/frontend/src/hooks/useMountComponent.ts
+++ b/frontend/src/hooks/useMountComponent.ts
@@ -12,8 +12,6 @@ export function useMountComponent() {
 
       const app = createApp(component, {
         async destroyComponent(delay = 0) {
-          console.log(delay);
-
           await sleep(delay);
           app.unmount();
           div.remove();
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 3235c6c8..051da621 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -99,17 +99,11 @@ export interface UserInfo {
 }
 
 export interface UserInstance {
-  // endTime: string;
   hostIp: string;
-  // ie: string;
   instanceUuid: string;
-  // lastDatetime: string;
   nickname: string;
-  // oe: string;
-  // remarks: string;
   serviceUuid: string;
   status: number;
-  // stopCommand: string;
 }
 
 export interface ImageInfo {
@@ -185,3 +179,8 @@ export interface QuickStartTemplate {
   author: string;
   targetLink: string;
 }
+
+export interface MountComponent {
+  destroyComponent: Function;
+  emitResult: Function;
+}