From 41fbee2317f26865c69a73744c1b5c74ac8157f8 Mon Sep 17 00:00:00 2001
From: unitwk <unitwk@outlook.com>
Date: Mon, 5 Feb 2024 15:07:49 +0800
Subject: [PATCH] Feat: background support warp & baseinfo.vue support id copy

---
 daemon/src/entity/instance/instance.ts     |  2 +-
 frontend/components.d.ts                   |  2 ++
 frontend/src/App.vue                       | 10 ++++--
 frontend/src/components/BgWrap.vue         | 14 ++++++++
 frontend/src/widgets/instance/BaseInfo.vue | 40 ++++++++++++++--------
 5 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/BgWrap.vue

diff --git a/daemon/src/entity/instance/instance.ts b/daemon/src/entity/instance/instance.ts
index 0c2e5c4f..1c3f0ec2 100755
--- a/daemon/src/entity/instance/instance.ts
+++ b/daemon/src/entity/instance/instance.ts
@@ -91,7 +91,7 @@ export default class Instance extends EventEmitter {
       this.forceExec(new FunctionDispatcher());
     }
 
-    if (cfg?.enableRcon !== this.config.enableRcon) {
+    if (cfg?.enableRcon != null && cfg?.enableRcon !== this.config.enableRcon) {
       if (this.status() != Instance.STATUS_STOP)
         throw new Error($t("运行中状态无法启用或关闭 RCON 协议"));
       configureEntityParams(this.config, cfg, "enableRcon", Boolean);
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 1bf5f4bc..4fd3b92d 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -65,6 +65,8 @@ declare module 'vue' {
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default']
+    BgWarp: typeof import('./src/components/BgWarp.vue')['default']
+    BgWrap: typeof import('./src/components/BgWrap.vue')['default']
     CardError: typeof import('./src/components/CardError.vue')['default']
     CardOperator: typeof import('./src/components/CardOperator.vue')['default']
     CardPanel: typeof import('./src/components/CardPanel.vue')['default']
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 72fec879..572972a8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,10 +9,13 @@ import { Button, Select, Input, Table } from "ant-design-vue";
 import MyselfInfoDialog from "./components/MyselfInfoDialog.vue";
 import { closeAppLoading } from "./tools/dom";
 import { useLayoutConfigStore } from "./stores/useLayoutConfig";
+import BgWrap from "./components/BgWrap.vue";
 
 const { isDarkTheme } = useAppConfigStore();
 const { getSettingsConfig, hasBgImage } = useLayoutConfigStore();
 
+const GLOBAL_COMPONENTS = [InputDialogProvider, MyselfInfoDialog];
+
 function setBackground(url: string) {
   const body = document.querySelector("body");
   if (body) {
@@ -46,14 +49,15 @@ onMounted(async () => {
 </script>
 
 <template>
+  <BgWrap v-if="hasBgImage" />
   <AppConfigProvider :has-bg-image="hasBgImage">
+    <!-- App Container -->
     <div class="global-app-container">
-      <AppHeader></AppHeader>
+      <AppHeader />
       <RouterView :key="$route.fullPath" />
     </div>
 
     <!-- Global Components -->
-    <InputDialogProvider></InputDialogProvider>
-    <MyselfInfoDialog></MyselfInfoDialog>
+    <component :is="component" v-for="(component, index) in GLOBAL_COMPONENTS" :key="index" />
   </AppConfigProvider>
 </template>
diff --git a/frontend/src/components/BgWrap.vue b/frontend/src/components/BgWrap.vue
new file mode 100644
index 00000000..90f517b5
--- /dev/null
+++ b/frontend/src/components/BgWrap.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="global-bg-wrap"></div>
+</template>
+
+<style scoped>
+.global-bg-wrap {
+  background-color: rgba(0, 0, 0, 0.348);
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  top: 0px;
+}
+</style>
diff --git a/frontend/src/widgets/instance/BaseInfo.vue b/frontend/src/widgets/instance/BaseInfo.vue
index c5134d53..cc0dd775 100644
--- a/frontend/src/widgets/instance/BaseInfo.vue
+++ b/frontend/src/widgets/instance/BaseInfo.vue
@@ -61,18 +61,25 @@ onMounted(async () => {
         {{ t("TXT_CODE_68831be6") }}{{ instanceTypeText }}
       </a-typography-paragraph>
       <a-typography-paragraph>
-        <span>{{ t("TXT_CODE_e70a8e24") }}</span>
-        <span v-if="isRunning" class="color-success">
-          <CheckCircleOutlined />
-          {{ statusText }}
-        </span>
-        <span v-else-if="isStopped" class="color-info">
-          <ExclamationCircleOutlined />
-          {{ statusText }}
-        </span>
-        <span v-else>
-          {{ statusText }}
-        </span>
+        <div style="display: flex; gap: 10px">
+          <div>
+            <span>{{ t("TXT_CODE_e70a8e24") }}</span>
+            <span v-if="isRunning" class="color-success">
+              <CheckCircleOutlined />
+              {{ statusText }}
+            </span>
+            <span v-else-if="isStopped" class="color-info">
+              <ExclamationCircleOutlined />
+              {{ statusText }}
+            </span>
+            <span v-else>
+              {{ statusText }}
+            </span>
+          </div>
+          <div>
+            <span> {{ t("TXT_CODE_ad30f3c5") }}{{ instanceInfo?.started }} </span>
+          </div>
+        </div>
       </a-typography-paragraph>
       <a-typography-paragraph>
         {{ t("TXT_CODE_46f575ae") }}{{ parseTimestamp(instanceInfo?.config.lastDatetime) }}
@@ -103,15 +110,18 @@ onMounted(async () => {
       <a-typography-paragraph>
         {{ t("TXT_CODE_8b8e08a6") }}{{ parseTimestamp(instanceInfo?.config.createDatetime) }}
       </a-typography-paragraph>
-      <a-typography-paragraph>
-        {{ t("TXT_CODE_ad30f3c5") }}{{ instanceInfo?.started }}
-      </a-typography-paragraph>
       <a-typography-paragraph>
         <span>{{ t("TXT_CODE_cec321b4") }}{{ instanceInfo?.config.oe.toUpperCase() }} </span>
         <span class="ml-6">
           {{ t("TXT_CODE_400a4210") }}{{ instanceInfo?.config.ie.toUpperCase() }}
         </span>
       </a-typography-paragraph>
+      <a-typography-paragraph>
+        <a-typography-text> {{ t("实例ID：") }} </a-typography-text>
+        <a-typography-text :copyable="{ text: instanceInfo?.instanceUuid }"> </a-typography-text>
+        <a-typography-text class="ml-10"> {{ t("节点ID：") }} </a-typography-text>
+        <a-typography-text :copyable="{ text: daemonId }"> </a-typography-text>
+      </a-typography-paragraph>
     </template>
   </CardPanel>