From 42ed9492b023319b24c9cd2bee0f35726c51aaa5 Mon Sep 17 00:00:00 2001
From: Lex Lim <hyperzlib@outlook.com>
Date: Thu, 22 Aug 2024 16:14:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8B=9F=E7=89=A9=E7=94=B5?=
 =?UTF-8?q?=E6=B1=A0=E7=9A=AE=E8=82=A4=EF=BC=8C=E5=A2=9E=E5=8A=A0=E7=9A=AE?=
 =?UTF-8?q?=E8=82=A4=E8=AF=A6=E7=BB=86=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/ViewerApp.vue                    | 127 +++++------
 frontend/src/charts/Bar1.vue                  |  28 +--
 frontend/src/charts/Battery1.vue              | 209 ++++++++++++++++++
 frontend/src/charts/Circle1.vue               |  86 ++-----
 frontend/src/charts/HealthBar1.vue            |  44 ++--
 frontend/src/charts/HealthBar1NoText.vue      | 107 ---------
 frontend/src/charts/chartRoutes.ts            |  62 +++++-
 frontend/src/charts/loading.png               | Bin 799 -> 0 bytes
 frontend/src/charts/types.d.ts                |   7 +
 frontend/src/charts/types/ChartParamDef.ts    |   7 +
 frontend/src/charts/utils/transitionRef.ts    |  33 +++
 .../components/dialogs/GetLiveCompDialog.vue  |  65 +++++-
 frontend/src/pages/Controller.vue             |   7 +-
 frontend/src/style.scss                       |  18 ++
 frontend/src/utils/request.ts                 |  27 +++
 frontend/vite.config.ts                       |   5 +
 16 files changed, 537 insertions(+), 295 deletions(-)
 create mode 100644 frontend/src/charts/Battery1.vue
 delete mode 100644 frontend/src/charts/HealthBar1NoText.vue
 delete mode 100644 frontend/src/charts/loading.png
 create mode 100644 frontend/src/charts/types.d.ts
 create mode 100644 frontend/src/charts/types/ChartParamDef.ts
 create mode 100644 frontend/src/charts/utils/transitionRef.ts
 create mode 100644 frontend/src/utils/request.ts

diff --git a/frontend/src/ViewerApp.vue b/frontend/src/ViewerApp.vue
index a5e094c..a2040ef 100644
--- 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>
\ No newline at end of file
diff --git a/frontend/src/charts/Bar1.vue b/frontend/src/charts/Bar1.vue
index a4820bc..48f7ea7 100644
--- 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>
\ No newline at end of file
diff --git a/frontend/src/charts/Battery1.vue b/frontend/src/charts/Battery1.vue
new file mode 100644
index 0000000..13ecb50
--- /dev/null
+++ b/frontend/src/charts/Battery1.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+// Credits: https://codepen.io/clark116/pen/oNMGBW and http://a.singlediv.com/#battery
+import { transitionRef } from './utils/transitionRef';
+
+defineOptions({
+    name: 'Battery1',
+    inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+    realStrength?: number;
+    strengthLimit?: number;
+    valLow?: number;
+    valHigh?: number;
+    valLimit?: number;
+    running?: boolean;
+    hideText?: boolean;
+    yellowBar?: boolean;
+}>(), {
+    realStrength: 5,
+    strengthLimit: 50,
+    running: false,
+});
+
+const batteryPercent = computed(() => {
+    if (props.strengthLimit === 0) {
+        return 0;
+    } else {
+        return Math.min(100, props.realStrength * 100 / props.strengthLimit);
+    }
+});
+
+const batteryPercentAnimated = transitionRef(batteryPercent, 100);
+
+const batteryBarBackground = computed(() => {
+    let gradientList: string[] = [];
+
+    let colors = ["#316d08","#60b939", "#51aa31", "#64ce11", "#255405"];
+    if (props.yellowBar) {
+        colors = ["#754f00","#f2bb00", "#dbb300", "#df8f00", "#593c00"];
+    }
+
+    if (batteryPercentAnimated.value === 0) {
+        gradientList.push('black 0');
+        gradientList.push('black 100%');
+    } else {
+        gradientList.push(`${colors[0]} 0`);
+        gradientList.push(`${colors[0]} 2%`);
+
+        if (batteryPercentAnimated.value > 3) {
+            gradientList.push(`${colors[1]} 3%`);
+        }
+
+        if (batteryPercentAnimated.value > 5) {
+            gradientList.push(`${colors[1]} 5%`);
+        }
+
+        if (batteryPercentAnimated.value > 6) {
+            gradientList.push(`${colors[2]} 6%`);
+        }
+
+        if (batteryPercentAnimated.value > 9) {
+            gradientList.push(`${colors[2]} ${batteryPercentAnimated.value - 3}%`);
+            gradientList.push(`${colors[3]} ${batteryPercentAnimated.value - 2}%`);
+        }
+
+        gradientList.push(`${colors[3]} ${batteryPercentAnimated.value}%`);
+        gradientList.push(`${colors[4]} ${batteryPercentAnimated.value}%`);
+        gradientList.push(`black ${batteryPercentAnimated.value + 5}%`);
+        gradientList.push(`black 100%`);
+    }
+
+    return `linear-gradient(to right, ${gradientList.join(', ')})`;
+});
+</script>
+
+<template>
+    <div class="battery">
+        <div class="battery-bar" :style="{ backgroundImage: batteryBarBackground }"></div>
+        <div class="battery-screw"></div>
+        <div class="battery-cover"></div>
+        <div class="battery-electrode-container">
+            <div class="battery-electrode"></div>
+        </div>
+    </div>
+    <div class="mt-2 px-2 flex justify-between items-center value-text" v-if="!props.hideText">
+        <div class="flex gap-2 items-center">
+            <div class="metal-text">
+                <div class="text">
+                    <span>{{ props.valLow }}</span> - <span>{{ props.valHigh }}</span>
+                </div>
+                <div class="text-shadow">
+                    <span>{{ props.valLow }}</span> - <span>{{ props.valHigh }}</span>
+                </div>
+            </div>
+
+            <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>
+                <path d="M447.934893 512.104171v383.973957h-175.840488V512.104171z" fill="#00C9CA" p-id="9377"></path>
+                <path d="M447.934893 127.921872V512.104171h-175.840488V127.921872z" fill="#00A1A2" p-id="9378"></path>
+            </svg>
+        </div>
+        <div class="metal-text">
+            <div class="text">
+                MAX: <span class="color-max">{{ props.valLimit }}</span>
+            </div>
+            <div class="text-shadow">
+                MAX: <span class="color-max">{{ props.valLimit }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.battery {
+    position: relative;
+    width: 250px;
+    height: 120px;
+    background-color: black;
+    border-radius: 0.3333333;
+
+    --progress-green: 10%;
+
+    > .battery-bar {
+        position: absolute;
+        z-index: 1;
+        inset: 0;
+        left: 16px;
+        right: 20px;
+        box-sizing: border-box;
+        background-image: linear-gradient(to right, #316d08 0, #316d08 2%, #60b939 3%, #60b939 5%, #51aa31 6%, #51aa31 var(--progress-green), #64ce11 calc(var(--progress-green) + 1%), #64ce11 calc(var(--progress-green) + 3%), #255405 calc(var(--progress-green) + 3%), black calc(var(--progress-green) + 8%), black 95%, transparent 95%);
+    }
+
+    > .battery-screw {
+        display: block;
+        position: absolute;
+        z-index: 0;
+        inset: 0;
+        border-left: 2px solid rgba(255, 255, 255, 0.2);
+        border-right: 2px solid rgba(255, 255, 255, 0.2);
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.4) 4%, rgba(255, 255, 255, 0.2) 7%, rgba(255, 255, 255, 0.2) 14%, rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.4) 86%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.1) 92%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.5) 98%)
+    }
+
+    > .battery-cover {
+        display: block;
+        position: absolute;
+        z-index: 2;
+        width: 224px;
+        height: 120px;
+        left: 12px;
+        top: 0;
+        box-sizing: border-box;
+        border-radius: 0.1666667;
+        border-left: 4px solid black;
+        border-right: 4px solid black;
+        background-image: linear-gradient(rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.2) 5%, transparent 5%, transparent 14%, rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0.12) 40%, rgba(0, 0, 0, 0.05) 42%, rgba(0, 0, 0, 0.05) 48%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.3) 87%, rgba(255, 255, 255, 0.3) 92%, transparent 92%, transparent 97%, rgba(255, 255, 255, 0.4) 97%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 2%, black 2%, black 6%, transparent 6%), linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.3) 90%, rgba(255, 255, 255, 0) 90%);
+    }
+
+    > .battery-electrode-container {
+        display: block;
+        position: absolute;
+        width: 12px;
+        height: 55px;
+        right: -12px;
+        top: 32px;
+        border-top-right-radius: 6px 10px;
+        border-bottom-right-radius: 6px 10px;
+        background-color: black;
+    }
+
+    > .battery-electrode-container > .battery-electrode {
+        width: 100%;
+        height: 100%;
+        background-image: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.4) 86%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.1) 92%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.5) 98%);
+    }
+}
+
+.value-text {
+    font-size: 1.6rem;
+    font-weight: bolder;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.metal-text {
+    position: relative;
+
+    .text {
+        position: relative;
+        z-index: 2;
+        color: transparent;
+        background: linear-gradient(#7f7f7f, #eaeaea, #535353);
+        background-clip: text;
+        -webkit-background-clip: text;
+    }
+
+    .text-shadow {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        color: #000;
+        text-shadow: 1px 1px 0 #262626, 2px 2px 0 #262626, 1px 1px 0 #262626, 2px 2px 5px rgba(0, 0, 0, 0.6), 1px 1px 0 #fff;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/charts/Circle1.vue b/frontend/src/charts/Circle1.vue
index c144f65..f05c372 100644
--- a/frontend/src/charts/Circle1.vue
+++ b/frontend/src/charts/Circle1.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineOptions({
     name: 'Circle1',
+    inheritAttrs: false,
 });
 
 const strokeDasharray = 628;
@@ -9,14 +10,12 @@ 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,
 });
 
@@ -39,29 +38,6 @@ const circleOffset = computed(() => {
     };
 });
 
-const setValLow = (val: number) => {
-    let deltaVal = val - state.valLow;
-    state.valLow = Math.min(val, state.valLimit);
-    // 为 valHigh 添加变化的值，但不超过 valLimit
-    state.valHigh = Math.min(state.valHigh + deltaVal, state.valLimit);
-
-    emitValuesChange();
-};
-
-const setValHigh = (val: number) => {
-    state.valHigh = Math.min(val, state.valLimit);
-    // 限制 valLow 的值不超过 valHigh
-    state.valLow = Math.min(state.valLow, val);
-
-    emitValuesChange();
-};
-
-const emitValuesChange = () => {
-    emit('update:valLow', state.valLow);
-    emit('update:valHigh', state.valHigh);
-    emit('update:valLimit', state.valLimit);
-};
-
 // 监听父组件传递的值变化
 watch(() => [props.valLow, props.valHigh, props.valLimit], ([valLow, valHigh, valLimit]) => {
     state.valLow = valLow;
@@ -73,25 +49,22 @@ watch(() => [props.valLow, props.valHigh, props.valLimit], ([valLow, valHigh, va
 <template>
     <div class="progress" :class="{ dark: props.darkMode }">
         <div class="progress__number">
-            <input class="progress__input" style="color: hsl(213, 90%, 55%)" type="number" :readonly="props.readonly"
-                :value="state.valLow" @change="setValLow(($event.target as any).value)" />
+            <span class="strength-num color-low">{{ state.valLow }}</span>
             <span>-</span>
-            <input class="progress__input" style="color: hsl(33, 90%, 55%)" type="number" :readonly="props.readonly"
-                :value="state.valHigh" @change="setValHigh(($event.target as any).value)" />
+            <span class="strength-num color-high">{{ state.valHigh }}</span>
         </div>
         <div class="progress__number">
             <span>MAX:</span>
-            <input id="progress-limit-input" class="progress__input" style="color: hsl(273, 90%, 55%)" type="number"
-                :read-only="props.readonly" :value="state.valLimit" readonly />
+            <span class="strength-num color-max">{{ state.valLimit }}</span>
         </div>
         <div class="progress__icon">
-            <svg t="1718546024843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            <svg t="1718546024843" class="icon animation-pulse" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="15408" style="display: block; width: 2rem; height: 2rem; margin: 0 auto" v-if="props.running">
                 <path
                     d="M341.333333 1024l76.074667-342.314667C422.528 658.773333 407.466667 640 384 640H170.666667L682.666667 0l-76.074667 342.357333c-5.12 22.912 9.941333 41.642667 33.408 41.642667h213.333333L341.333333 1024z"
                     fill="#FFA702" p-id="15409"></path>
             </svg>
-            <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-else>
                 <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>
@@ -190,22 +163,23 @@ watch(() => [props.valLow, props.valHigh, props.valLimit], ([valLow, valHigh, va
     transition-duration: 0.3s;
 }
 
-.progress__input {
-    width: 2.5rem;
+.color-low {
+    color: #007bff;
+}
+
+.color-high {
+    color: #ffc107;
+}
+
+.color-max {
+    color: #9725f4;
+}
+
+.strength-num {
     font-size: var(--progress-font-size);
     font-weight: bold;
-    text-align: center;
-    border: 0;
-    border-radius: 0.5rem;
-    background-color: transparent;
-    -moz-appearance: textfield;
-    appearance: textfield;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
+    padding: 0 0.4rem;
+    min-width: 2.5rem;
 }
 
 @keyframes heartbeat {
@@ -222,24 +196,6 @@ watch(() => [props.valLow, props.valHigh, props.valLimit], ([valLow, valHigh, va
     }
 }
 
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.icon {
-    animation: pulse 1.5s infinite;
-}
-
 @media (prefers-color-scheme: dark) {
     .progress {
         background-color: black;
diff --git a/frontend/src/charts/HealthBar1.vue b/frontend/src/charts/HealthBar1.vue
index 363e0f9..187cbc0 100644
--- a/frontend/src/charts/HealthBar1.vue
+++ b/frontend/src/charts/HealthBar1.vue
@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import Heart from './healthBar1/Heart.vue';
+import { transitionRef } from './utils/transitionRef';
+
+defineOptions({
+    name: 'HealthBar1',
+    inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<{
     valLow?: number;
     valHigh?: number;
     valLimit?: number;
     randomStrength?: number;
-    readonly?: boolean;
     running?: boolean;
     textInverted?: boolean;
     hideText?: boolean;
@@ -15,7 +20,6 @@ const props = withDefaults(defineProps<{
     valHigh: 10,
     valLimit: 50,
     randomStrength: 5,
-    readonly: false,
     running: false,
 });
 
@@ -23,17 +27,19 @@ const heartNum = computed(() => {
     return Math.ceil(props.valLimit / 4); // 每个心心可以分成4份
 });
 
-const hp = computed(() => ({
-    low: Math.max(0, props.valLimit - props.valHigh),
-    high: Math.max(0, props.valLimit - props.valLow),
-}));
+const hpLow = computed(() => Math.max(0, props.valLimit - props.valHigh));
+const hpHigh = computed(() => Math.max(0, props.valLimit - props.valLow));
+
+// 通过transitionRef来实现动画效果
+const hpLowAnimated = transitionRef(hpLow, 40);
+const hpHighAnimated = transitionRef(hpHigh, 40);
 
 const heartValueList = computed(() => { // 计算每个心心的红黄色值
     const heartValueList = [];
     for (let i = 0; i < heartNum.value; i++) {
         heartValueList.push({
-            valRed: Math.min(100, Math.max(0, (hp.value.low - i * 4) * 100 / 4)),
-            valYellow: Math.min(100, Math.max(0, (hp.value.high - i * 4) * 100 / 4)),
+            valRed: Math.min(100, Math.max(0, (hpLowAnimated.value - i * 4) * 100 / 4)),
+            valYellow: Math.min(100, Math.max(0, (hpHighAnimated.value - i * 4) * 100 / 4)),
         });
     }
     return heartValueList;
@@ -47,10 +53,10 @@ const heartValueList = computed(() => { // 计算每个心心的红黄色值
         </div>
         <div class="mt-2 pr-2 flex justify-between items-center value-text" :class="{ 'text-inverted': props.textInverted, 'hidden': props.hideText }">
             <div class="flex gap-2 items-center">
-                <span>HP:</span><span>{{ hp.low }}/{{ props.valLimit }}</span><span>(+{{ props.randomStrength }})</span>
+                <span>HP:</span><span>{{ hpHigh }}/{{ props.valLimit }}</span><span>(+{{ props.randomStrength }})</span>
             </div>
             <div>
-                <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>
@@ -92,22 +98,4 @@ const heartValueList = computed(() => { // 计算每个心心的红黄色值
 .hidden {
     display: none;
 }
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.icon {
-    animation: pulse 1.5s infinite;
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/charts/HealthBar1NoText.vue b/frontend/src/charts/HealthBar1NoText.vue
deleted file mode 100644
index eba4696..0000000
--- a/frontend/src/charts/HealthBar1NoText.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts" setup>
-import Heart from './healthBar1/Heart.vue';
-
-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,
-});
-
-const heartNum = computed(() => {
-    return Math.ceil(props.valLimit / 4); // 每个心心可以分成4份
-});
-
-const heartValueList = computed(() => { // 计算每个心心的红黄色值
-    const heartValueList = [];
-    let hpLow = Math.max(0, props.valLimit - props.valHigh);
-    let hpHigh = Math.max(0, props.valLimit - props.valLow);
-    for (let i = 0; i < heartNum.value; i++) {
-        heartValueList.push({
-            valRed: Math.min(100, Math.max(0, (hpLow - i * 4) * 100 / 4)),
-            valYellow: Math.min(100, Math.max(0, (hpHigh - i * 4) * 100 / 4)),
-        });
-    }
-    return heartValueList;
-});
-</script>
-
-<template>
-    <div class="bar-chart">
-        <div class="progress">
-            <Heart class="heart-icon" v-for="val, i in heartValueList" :key="i" :valRed="val.valRed" :valYellow="val.valYellow" />
-        </div>
-        <div class="mt-2 pr-2 flex justify-between items-center value-text">
-            <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"
-                    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>
-                    <path d="M447.934893 512.104171v383.973957h-175.840488V512.104171z" fill="#00C9CA" p-id="9377"></path>
-                    <path d="M447.934893 127.921872V512.104171h-175.840488V127.921872z" fill="#00A1A2" p-id="9378"></path>
-                </svg>
-            </div>
-            <div>
-                MAX: <span class="color-max">{{ props.valLimit }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.bar-chart {
-    width: 420px;
-    padding: 20px;
-}
-
-.heart-icon {
-    display: inline-block;
-    margin-right: 6px;
-}
-
-.value-text {
-    font-size: 1.6rem;
-    font-weight: bolder;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.color-low {
-    color: #007bff;
-}
-
-.color-high {
-    color: #ffc107;
-}
-
-.color-max {
-    color: #9725f4;
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.icon {
-    animation: pulse 1.5s infinite;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/charts/chartRoutes.ts b/frontend/src/charts/chartRoutes.ts
index 0644bb9..950b919 100644
--- a/frontend/src/charts/chartRoutes.ts
+++ b/frontend/src/charts/chartRoutes.ts
@@ -1,10 +1,60 @@
 import { RouteRecordRaw } from 'vue-router';
 
 export const chartRoutes: RouteRecordRaw[] = [
-    { path: '/', component: () => import('./Circle1.vue'), name: '圆形1' },
-    { path: '/circle1-dark', component: () => import('./Circle1.vue'), name: '圆形1 (深色)', props: { darkMode: true } },
-    { path: '/bar1', component: () => import('./Bar1.vue'), name: '进度条1' },
-    { path: '/health-bar1', component: () => import('./HealthBar1.vue'), name: 'HP条1' },
-    { path: '/health-bar1-invert', component: () => import('./HealthBar1.vue'), name: 'HP条1 (白色文字)', props: { textInverted: true } },
-    { path: '/health-bar1-notext', component: () => import('./HealthBar1.vue'), name: 'HP条1 (隐藏文字)', props: { hideText: true } },
+    {
+        path: '/',
+        component: () => import('./Circle1.vue'),
+        name: '经典圆盘进度条',
+        meta: {
+            params: [
+                {
+                    prop: 'darkMode',
+                    type: 'boolean',
+                    name: '深色模式',
+                },
+            ],
+        },
+    },
+    {
+        path: '/bar1',
+        component: () => import('./Bar1.vue'),
+        name: '横向胶囊进度条',
+    },
+    {
+        path: '/health-bar1',
+        component: () => import('./HealthBar1.vue'),
+        name: '像素心心HP条',
+        meta: {
+            params: [
+                {
+                    prop: 'textInverted',
+                    type: 'boolean',
+                    name: '白色文字',
+                },
+                {
+                    prop: 'hideText',
+                    type: 'boolean',
+                    name: '隐藏文字',
+                },
+            ],
+        },
+    },
+    {
+        path: '/battery1',
+        component: () => import('./Battery1.vue'), name: '拟物电池 (仅当前电量)',
+        meta: {
+            params: [
+                {
+                    prop: 'yellowBar',
+                    type: 'boolean',
+                    name: '黄色电量条',
+                },
+                {
+                    prop: 'hideText',
+                    type: 'boolean',
+                    name: '隐藏文字',
+                },
+            ],
+        },
+    },
 ];
\ No newline at end of file
diff --git a/frontend/src/charts/loading.png b/frontend/src/charts/loading.png
deleted file mode 100644
index dfb39ace852a05d9bb5630f64d5bfa742d5f1abf..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 799
zcmV+)1K|9LP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!!AV3xRCwC7mrqDkQ544SyYId1pD?Kv
zsTI{C6c<GVEm}x~WE5$O3ThV-xM<ZT3_@BYMAW85ix7kg6(R_U2&82;i=aqdM1Q13
zrO`+tPBz+i;Ja`dX6B9Kdk20z=JMuz_ndp~z2|x6!DmyZg}{O(k^^%f13rQ@cmbY+
zg(zoUgs=#$0aaiT{LOn75|{>e!5vPjsN-U`4r~VN`JRn<-&q~F2FAge<qB^En?Rrh
zCBi=-%Sa{aYS09ZfL`!P`H)FJWb}Sisy$H8XmfO)Wy<Euh*l<e8r%Te)c9kL=ZZz#
z05)*kr|6F|MGdp^2(<8NScsim^Ma|aVTuDX1HRGOa%~oz1Gm*!7dVwKEJ8c@^!dl{
zW@RRkUIv5ew?v)N!VTOuAtRhL@tBBR0AEzmUNWj;w=z<R_-lpfEtU2woP^j#uu4R0
z!CLvjs+%(L+YqB(V$_GN+OIw<I0=&s4yfa{&9a(9k}=8IOC`J~V3oO|noUsny;|p8
z0oT`6cQ!%cX(e18sPotznMs=4EsO4cb!%LeplF?1;~C4#Jmhw&O;EUr5epwg_$SjH
z=G`c9+d+y-#BVH5s*vK%39Yl}bWl{pM=a0f1&Y@&C2`vc&`8lKCoIS0TShGF+{R~I
zCQZdv743cLWZX7Nv#kkOeJ5i|x%jvVwy1mHp1v06*_OJs-pBNKD-`Vp$5l0Vv%&bU
z19=BV)%AFYSJ>(bMCCNR1<otcKJcVi&-E0HDe=AFIyg{f^y2R*7zW3fUJ-r9mbYX>
zZ`m8Qs{YGoieB-spL8i>bGQ@iXPdj7@B8#6O<#}hFr&UC#L-!9v7i8<stI3>TRwlW
z%^fb}JSdU2G^1;0Bq^rbqjOL7RYsk|88&$R;CH3pPR@L;x3HUsL5dTfV@EmxUUNAj
dKid8YFaSxJucJ9LoMQk0002ovPDHLkV1myhae@E<

diff --git a/frontend/src/charts/types.d.ts b/frontend/src/charts/types.d.ts
new file mode 100644
index 0000000..4a8efc4
--- /dev/null
+++ b/frontend/src/charts/types.d.ts
@@ -0,0 +1,7 @@
+import { ChartParamDef } from './types/ChartParamDef';
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        params: ChartParamDef[];
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/charts/types/ChartParamDef.ts b/frontend/src/charts/types/ChartParamDef.ts
new file mode 100644
index 0000000..e28866d
--- /dev/null
+++ b/frontend/src/charts/types/ChartParamDef.ts
@@ -0,0 +1,7 @@
+export type ChartParamDef = {
+    prop: string;
+    type: 'boolean' | 'int' | 'float' | 'string' | 'select';
+    name: string;
+    help?: string;
+    options?: { value: string, label: string }[];
+};
\ No newline at end of file
diff --git a/frontend/src/charts/utils/transitionRef.ts b/frontend/src/charts/utils/transitionRef.ts
new file mode 100644
index 0000000..77a1f64
--- /dev/null
+++ b/frontend/src/charts/utils/transitionRef.ts
@@ -0,0 +1,33 @@
+export function transitionRef(value: Ref<number>, valuePerSec: number): Ref<number> {
+    const refWithTransition = ref<number>(value.value);
+
+    let transitionTimer: NodeJS.Timeout | null = null;
+    let transitionTargetValue = value.value;
+
+    const update = () => {
+        if (transitionTargetValue === refWithTransition.value && transitionTimer) {
+            clearInterval(transitionTimer);
+            transitionTimer = null;
+            return;
+        } else if (transitionTargetValue > refWithTransition.value) {
+            refWithTransition.value += 1;
+        } else {
+            refWithTransition.value -= 1;
+        }
+    }
+
+    const startTransition = () => {
+        if (transitionTimer) {
+            return;
+        }
+
+        transitionTimer = setInterval(update, 1000 / valuePerSec);
+    };
+
+    watch(value, (newValue) => {
+        transitionTargetValue = newValue;
+        startTransition();
+    });
+
+    return refWithTransition;
+}
diff --git a/frontend/src/components/dialogs/GetLiveCompDialog.vue b/frontend/src/components/dialogs/GetLiveCompDialog.vue
index 3fc177a..f6b8a8b 100644
--- a/frontend/src/components/dialogs/GetLiveCompDialog.vue
+++ b/frontend/src/components/dialogs/GetLiveCompDialog.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import Toast from 'primevue/toast';
 import Select from 'primevue/select';
+import ToggleSwitch from 'primevue/toggleswitch';
+
 import { useToast } from 'primevue/usetoast';
 import { chartRoutes } from '../../charts/chartRoutes';
 
@@ -18,22 +20,56 @@ const visible = defineModel('visible');
 
 const state = reactive({
   theme: 'default',
+  chartParams: {} as Record<string, string>,
 });
 
+const getThemeNameFromPath = (path: string) => {
+  return path.replace(/^\//, '') || 'default';
+}
+
 const themeOptions = computed(() => {
   return chartRoutes.map((route) => {
     return {
       label: route.name,
-      value: route.path.replace(/^\//, '') || 'default',
+      value: getThemeNameFromPath(route.path),
+      params: route.meta?.params ?? [],
     };
   })
 });
 
+const buildChartParams = (params: Record<string, any>) => {
+  const chartParams: Record<string, string> = {};
+  for (let [key, value] of Object.entries(params)) {
+    if (typeof value === 'string') {
+      if (value !== '') {
+        chartParams[key] = value;
+      }
+    } else if (typeof value === 'boolean') {
+      if (value) {
+        chartParams[key] = 'true';
+      }
+    } else {
+      if (value !== null && value !== undefined) {
+        chartParams[key] = value.toString();
+      }
+    }
+  }
+  return chartParams;
+};
+
+const chartParamsDef = computed(() => {
+  return themeOptions.value.find((theme) => theme.value === state.theme)?.params ?? [];
+});
+
 const viewerUrl = computed(() => {
   const baseUrl = location.origin + import.meta.env.BASE_URL.replace(/\/$/, '');
   if (props.clientId) {
     const theme = state.theme === 'default' ? '' : state.theme;
-    return `${baseUrl}/viewer.html?clientId=${props.clientId}#/${theme}`;
+    let url = `${baseUrl}/viewer.html?clientId=${props.clientId}#/${theme}`;
+    if (Object.keys(state.chartParams).length) {
+      url += '?' + new URLSearchParams(buildChartParams(state.chartParams)).toString();
+    }
+    return url;
   } else {
     return '';
   }
@@ -68,6 +104,31 @@ const copyUrl = () => {
             class="w-full"
           ></Select>
         </div>
+        <template v-for="paramDef in chartParamsDef" :key="paramDef.name">
+          <div v-if="paramDef.type === 'boolean'" class="flex justify-start gap-4 items-center mt-4">
+            <span class="block font-semibold">{{ paramDef.name }}：</span>
+            <ToggleSwitch v-model="state.chartParams[paramDef.prop]" class="w-[4rem]"></ToggleSwitch>
+          </div>
+          <div v-else-if="paramDef.type === 'string'" class="flex flex-col items-start mt-4">
+            <span class="block font-semibold mb-2">{{ paramDef.name }}：</span>
+            <InputText v-model="state.chartParams[paramDef.prop]" class="w-full"></InputText>
+          </div>
+          <div v-else-if="paramDef.type === 'int' || paramDef.type === 'float'" class="flex flex-col items-start mt-4">
+            <span class="block font-semibold mb-2">{{ paramDef.name }}：</span>
+            <InputNumber v-if="paramDef.type === 'int'" v-model="state.chartParams[paramDef.prop]" class="w-full" showButtons></InputNumber>
+            <InputNumber v-else v-model="state.chartParams[paramDef.prop]" class="w-full" showButtons :minFractionDigits="1" :maxFractionDigits="6"></InputNumber>
+          </div>
+          <div v-else-if="paramDef.type === 'select' && Array.isArray(paramDef.options)" class="flex flex-col items-start mt-4">
+            <span class="block font-semibold mb-2">{{ paramDef.name }}：</span>
+            <Select
+              v-model="state.chartParams[paramDef.prop]"
+              :options="paramDef.options"
+              optionLabel="label"
+              optionValue="value"
+              class="w-full"
+            ></Select>
+          </div>
+        </template>
         <div class="flex flex-col items-start mt-4">
           <span class="block font-semibold mb-2">请使用以下URL添加浏览器源：</span>
           <InputGroup>
diff --git a/frontend/src/pages/Controller.vue b/frontend/src/pages/Controller.vue
index a23ae96..0de8b73 100644
--- a/frontend/src/pages/Controller.vue
+++ b/frontend/src/pages/Controller.vue
@@ -337,7 +337,8 @@ watch(gameConfig, () => {
     <Toast></Toast>
     <div class="flex flex-col lg:flex-row items-center lg:items-start gap-8">
       <div class="flex">
-        <StatusChart v-model:val-low="chartVal.valLow" v-model:val-high="chartVal.valHigh" :val-limit="chartVal.valLimit" :running="state.gameStarted" readonly />
+        <StatusChart v-model:val-low="chartVal.valLow" v-model:val-high="chartVal.valHigh"
+          :val-limit="chartVal.valLimit" :running="state.gameStarted" readonly />
       </div>
 
       <Card class="controller-panel flex-grow-1 flex-shrink-1 w-full">
@@ -455,8 +456,8 @@ watch(gameConfig, () => {
         </template>
       </Card>
     </div>
-    <ConnectToClientDialog v-model:visible="state.showConnectionDialog" :clientWsUrlList="state.clientWsUrlList" :client-id="state.clientId"
-      @reset-client-id="handleResetClientId" @update:client-id="handleConnSetClientId" />
+    <ConnectToClientDialog v-model:visible="state.showConnectionDialog" :clientWsUrlList="state.clientWsUrlList"
+      :client-id="state.clientId" @reset-client-id="handleResetClientId" @update:client-id="handleConnSetClientId" />
     <GetLiveCompDialog v-model:visible="state.showLiveCompDialog" :client-id="state.clientId" />
     <ConfigSavePrompt :visible="state.showConfigSavePrompt" @save="handleSaveConfig" @cancel="handleCancelSaveConfig" />
   </div>
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index e60f527..e3ad1b7 100644
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -3,4 +3,22 @@ body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     margin: 0;
     --progress-font-size: 1.8rem;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.animation-pulse {
+    animation: pulse 1.5s infinite;
 }
\ No newline at end of file
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
new file mode 100644
index 0000000..e97f02c
--- /dev/null
+++ b/frontend/src/utils/request.ts
@@ -0,0 +1,27 @@
+import { RouteLocationNormalizedLoaded } from "vue-router";
+
+export function parseChartParams(route: RouteLocationNormalizedLoaded): Record<string, string> {
+    const result: Record<string, any> = {};
+
+    for (let paramDef of route.meta?.params ?? []) {
+        const value = route.query[paramDef.prop];
+        if (value !== undefined && typeof value === 'string') {
+            switch (paramDef.type) {
+                case 'boolean':
+                    result[paramDef.prop] = value === 'true' || value === '1';
+                    break;
+                case 'int':
+                    result[paramDef.prop] = parseInt(value);
+                    break;
+                case 'float':
+                    result[paramDef.prop] = parseFloat(value);
+                    break;
+                default:
+                    result[paramDef.prop] = value;
+                    break;
+            }
+        }
+    }
+
+    return result;
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 75e0918..65f813a 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -14,6 +14,11 @@ export default defineConfig({
         index: resolve('./index.html'),
         viewer: resolve('./viewer.html'),
       },
+      output: {
+        manualChunks: {
+          'chartRoutes': ['./src/charts/chartRoutes.ts'],
+        }
+      }
     },
   },
   server: {