增加拟物电池皮肤，增加皮肤详细配置功能

hyperzlib · Aug 22, 2024 · 42ed949 · 42ed949
1 parent 93e0272
commit 42ed949
Show file tree

Hide file tree

Showing 16 changed files with 537 additions and 295 deletions.
diff --git a/frontend/src/ViewerApp.vue b/frontend/src/ViewerApp.vue
@@ -1,30 +1,38 @@
 <script lang="ts" setup>
 import { SocketApi } from './apis/socketApi';
 import { ServerInfoResData, webApi } from './apis/webApi';
+import { parseChartParams } from './utils/request';
 import { handleApiResponse } from './utils/response';
 
 const state = reactive({
-    strength: 0,
-    randomStrength: 0,
-    strengthLimit: 50,
+  strength: 0,
+  randomStrength: 0,
+  strengthLimit: 50,
 
-    tempStrength: 0,
+  tempStrength: 0,
+  realStrength: 0,
 
-    clientId: '',
+  clientId: '',
 
-    gameStarted: false,
+  gameStarted: false,
 
-    error: null as string | null,
+  error: null as string | null,
 });
 
 let serverInfo: ServerInfoResData;
 let wsClient: SocketApi;
 
+const route = useRoute();
+
+const chartParams = computed(() => {
+  return parseChartParams(route);
+});
+
 const chartVal = computed(() => ({
   valLow: Math.min(state.strength + state.tempStrength, state.strengthLimit),
   valHigh: Math.min(state.strength + state.tempStrength + state.randomStrength, state.strengthLimit),
   valLimit: state.strengthLimit,
-}))
+}));
 
 const initServerInfo = async () => {
   try {
@@ -51,12 +59,13 @@ const initWebSocket = async () => {
   wsClient.on('strengthChanged', (strength) => {
     state.strengthLimit = strength.limit;
     state.tempStrength = strength.tempStrength;
+    state.realStrength = strength.strength;
   });
 
   wsClient.on('configUpdated', (config) => {
     state.strength = config.strength.strength;
     state.randomStrength = config.strength.randomStrength;
-    
+
     state.strength = Math.min(state.strength, state.strengthLimit); // 限制当前值不超过上限
   });
 
@@ -81,77 +90,71 @@ const bindClient = async () => {
   }
 };
 
+onBeforeUnmount(() => {
+  wsClient.close();
+});
+
 onMounted(async () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    if (!urlParams.has('clientId')) {
-        state.error = '缺少 clientId 参数';
-        return;
-    }
+  const urlParams = new URLSearchParams(window.location.search);
+  if (!urlParams.has('clientId')) {
+    state.error = '缺少 clientId 参数';
+    return;
+  }
+
+  state.clientId = urlParams.get('clientId')!;
 
-    state.clientId = urlParams.get('clientId')!;
-    await initServerInfo();
-    await initWebSocket();
+  await initServerInfo();
+  await initWebSocket();
 });
 </script>
 
 <template>
-    <div class="w-full h-full">
-        <!-- <StatusChart
-            :val-low="chartVal.valLow"
-            :val-high="chartVal.valHigh"
-            :val-limit="chartVal.valLimit"
-            :running="state.gameStarted"
-            readonly
-        /> -->
-        <RouterView>
-            <template #default="{ Component }">
-                <Component
-                    :is="Component"
-                    :valLimit="chartVal.valLimit"
-                    :valLow="chartVal.valLow"
-                    :valHigh="chartVal.valHigh"
-                    :strength="state.strength"
-                    :randomStrength="state.randomStrength"
-                    :tempStrength="state.tempStrength"
-                    :strengthLimit="state.strengthLimit"
-                    :running="state.gameStarted"
-                />
-            </template>
-        </RouterView>
-        <Transition name="fade">
-            <div class="fixed w-full h-full left-0 top-0 error-cover" v-if="state.error">
-                <div class="flex flex-col items-center justify-center h-full">
-                    <p class="text-xl font-semibold text-white">{{ state.error }}</p>
-                </div>
-            </div>
-        </Transition>
-    </div>
+  <div class="w-full h-full">
+    <RouterView>
+      <template #default="{ Component }">
+        <Component :is="Component" v-bind="chartParams" :valLimit="chartVal.valLimit" :valLow="chartVal.valLow"
+          :valHigh="chartVal.valHigh" :strength="state.strength" :randomStrength="state.randomStrength"
+          :tempStrength="state.tempStrength" :realStrength="state.realStrength" :strengthLimit="state.strengthLimit"
+          :running="state.gameStarted" />
+      </template>
+    </RouterView>
+    <Transition name="fade">
+      <div class="fixed w-full h-full left-0 top-0 error-cover" v-if="state.error">
+        <div class="flex flex-col items-center justify-center h-full">
+          <p class="text-xl font-semibold text-white">{{ state.error }}</p>
+        </div>
+      </div>
+    </Transition>
+  </div>
 </template>
 
 <style>
 body {
-    background-color: transparent;
-    height: 100vh;
-    display: grid;
-    place-items: center;
+  background-color: transparent;
+  height: 100vh;
+  display: grid;
+  place-items: center;
 }
 
 .error-cover {
-    background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(5px);
-    z-index: 20;
-    text-shadow: 0 0 5px black;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+  z-index: 20;
+  text-shadow: 0 0 5px black;
 }
 
-.fade-enter-active, .fade-leave-active {
-    transition: opacity 150ms;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 150ms;
 }
 
-.fade-enter, .fade-leave-to {
-    opacity: 0;
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
 }
 
-.fade-enter-to, .fade-leave {
-    opacity: 1;
+.fade-enter-to,
+.fade-leave {
+  opacity: 1;
 }
 </style>
diff --git a/frontend/src/charts/Bar1.vue b/frontend/src/charts/Bar1.vue
@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+defineOptions({
+    name: 'Bar1',
+    inheritAttrs: false,
+});
+
 const pillsNum = 40;
 const pillWidth = 5;
 const pillOffset = 4;
@@ -7,14 +12,11 @@ const props = withDefaults(defineProps<{
     valLow?: number;
     valHigh?: number;
     valLimit?: number;
-    readonly?: boolean;
     running?: boolean;
-    darkMode?: boolean;
 }>(), {
     valLow: 5,
     valHigh: 10,
     valLimit: 50,
-    readonly: false,
     running: false,
 });
 
@@ -68,7 +70,7 @@ const progressWidth = computed(() => {
             <div class="flex gap-2 items-center">
                 <span class="color-low">{{ props.valLow }}</span> - <span class="color-high">{{ props.valHigh }}</span>
 
-                <svg t="1719514976614" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                <svg t="1719514976614" class="icon animation-pulse" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                     p-id="9374" style="display: block; width: 2rem; height: 2rem; margin: 0 auto" v-if="!props.running">
                     <path d="M752.113937 512.104171v383.973957h-176.04883V512.104171z" fill="#00C9CA" p-id="9375"></path>
                     <path d="M752.113937 127.921872V512.104171h-176.04883V127.921872z" fill="#00A1A2" p-id="9376"></path>
@@ -149,22 +151,4 @@ const progressWidth = computed(() => {
 .color-max {
     color: #9725f4;
 }
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.icon {
-    animation: pulse 1.5s infinite;
-}
 </style>