Feat: background support warp & baseinfo.vue support id copy

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);

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']

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>
+    <component :is="component" v-for="(component, index) in GLOBAL_COMPONENTS" :key="index" />
-    <MyselfInfoDialog></MyselfInfoDialog>
   </AppConfigProvider>
 </template>

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>

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>
+        <div style="display: flex; gap: 10px">
-        <span v-if="isRunning" class="color-success">
+          <div>
-          <CheckCircleOutlined />
+            <span>{{ t("TXT_CODE_e70a8e24") }}</span>
-          {{ statusText }}
+            <span v-if="isRunning" class="color-success">
-        </span>
+              <CheckCircleOutlined />
-        <span v-else-if="isStopped" class="color-info">
+              {{ statusText }}
-          <ExclamationCircleOutlined />
+            </span>
-          {{ statusText }}
+            <span v-else-if="isStopped" class="color-info">
-        </span>
+              <ExclamationCircleOutlined />
-        <span v-else>
+              {{ statusText }}
-          {{ statusText }}
+            </span>
-        </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>