From 70020d643abeee1a1a507fb5ec70da3675873963 Mon Sep 17 00:00:00 2001
From: Lex Lim <hyperzlib@outlook.com>
Date: Mon, 18 Nov 2024 01:12:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/partials/StrengthSettings.vue  | 71 --------------
 .../FadeAndSlideTransitionGroup.vue           | 67 +++++++++-----
 frontend/src/main.ts                          | 10 +-
 frontend/src/pages/Controller.vue             | 26 +++---
 .../controller}/GameConnection.vue            |  0
 .../controller}/PulseSettings.vue             | 92 +++++++++----------
 .../src/pages/controller/StrengthSettings.vue | 75 +++++++++++++++
 frontend/vite.config.ts                       |  1 +
 8 files changed, 190 insertions(+), 152 deletions(-)
 delete mode 100644 frontend/src/components/partials/StrengthSettings.vue
 rename frontend/src/{components/partials => pages/controller}/GameConnection.vue (100%)
 rename frontend/src/{components/partials => pages/controller}/PulseSettings.vue (58%)
 create mode 100644 frontend/src/pages/controller/StrengthSettings.vue

diff --git a/frontend/src/components/partials/StrengthSettings.vue b/frontend/src/components/partials/StrengthSettings.vue
deleted file mode 100644
index 83328e5..0000000
--- a/frontend/src/components/partials/StrengthSettings.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts" setup>
-import { ControllerPageState } from '../../pages/Controller.vue';
-import { Reactive } from 'vue';
-
-import CoyoteBluetoothPanel from './CoyoteBluetoothPanel.vue';
-
-defineOptions({
-    name: 'StrengthSettings',
-});
-
-const props = defineProps<{
-    state: any;
-}>();
-
-// 从父组件获取state
-let parentState: Reactive<ControllerPageState>;
-watch(() => props.state, (value) => {
-    parentState = value;
-}, { immediate: true });
-</script>
-
-<template>
-    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
-        <label class="font-semibold w-30 flex-shrink-0">强度变化频率</label>
-        <div class="w-full flex-shrink flex gap-2 flex-col lg:items-center lg:flex-row lg:gap-8">
-            <div class="h-6 lg:h-auto flex-grow flex items-center">
-                <Slider class="w-full" v-model="parentState.randomFreq" range :max="60" />
-            </div>
-            <div class="w-40">
-                <InputGroup class="input-small">
-                    <InputNumber class="input-text-center" v-model="parentState.randomFreq[0]" />
-                    <InputGroupAddon>-</InputGroupAddon>
-                    <InputNumber class="input-text-center" v-model="parentState.randomFreq[1]" />
-                </InputGroup>
-            </div>
-        </div>
-    </div>
-    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
-        <label class="font-semibold w-30">基础强度</label>
-        <InputNumber class="input-small" v-model="parentState.strengthVal" />
-        <div class="flex-grow flex-shrink"></div>
-    </div>
-    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
-        <label class="font-semibold w-30">随机强度</label>
-        <InputNumber class="input-small" v-model="parentState.randomStrengthVal" />
-        <div class="flex-grow flex-shrink"></div>
-    </div>
-    <div class="flex gap-8 mb-4 w-full">
-        <div class="w-30"></div>
-        <div class="opacity-60 text-right">
-            强度范围：{{ parentState.strengthVal }} - {{ parentState.strengthVal + parentState.randomStrengthVal }}，强度上限请在DG-Lab中设置
-        </div>
-    </div>
-    <div class="flex items-center gap-2 lg:gap-8 mb-4 w-full">
-        <label class="font-semibold w-30">B通道</label>
-        <ToggleButton v-model="parentState.bChannelEnabled" onIcon="pi pi-circle-on" onLabel="已启用" offIcon="pi pi-circle-off"
-            offLabel="已禁用" />
-    </div>
-    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
-        <label class="font-semibold w-30">B通道强度倍数</label>
-        <InputNumber class="input-small" :disabled="!parentState.bChannelEnabled" v-model="parentState.bChannelMultiple" />
-        <div class="flex-grow flex-shrink"></div>
-    </div>
-    <div class="flex gap-8 w-full">
-        <div class="w-30"></div>
-        <div class="opacity-60 text-right">
-            B通道的强度 = A通道强度 * 强度倍数
-        </div>
-    </div>
-    <CoyoteBluetoothPanel></CoyoteBluetoothPanel>
-</template>
\ No newline at end of file
diff --git a/frontend/src/components/transitions/FadeAndSlideTransitionGroup.vue b/frontend/src/components/transitions/FadeAndSlideTransitionGroup.vue
index 6ea3a9e..97502e8 100644
--- a/frontend/src/components/transitions/FadeAndSlideTransitionGroup.vue
+++ b/frontend/src/components/transitions/FadeAndSlideTransitionGroup.vue
@@ -1,47 +1,70 @@
 <script lang="ts" setup>
-import { TransitionGroup } from 'vue';
-
 defineOptions({
-    name: 'FadeAndSlideTransitionGroup',
+  name: 'FadeAndSlideTransitionGroup',
 });
 
 const transitionRef = ref<any | null>(null);
 
 const onEnter = (el: Element, done: () => void) => {
-    const transitionContainer = transitionRef.value!.$el as HTMLElement;
-    console.log('onEnter', el, transitionContainer);
-    let prevHeight = el.clientHeight;
-    transitionContainer.style.height = `${prevHeight}px`;
-
-    setTimeout(() => {
-        transitionContainer.style.height = '';
-    }, 300);
+  console.log('onEnter');
+  const transitionContainer = transitionRef.value!.$el as HTMLElement;
+  const transitionEl = el as HTMLElement;
+  let prevHeight = el.clientHeight;
+  transitionContainer.style.height = `${prevHeight}px`;
+  transitionEl.style.visibility = 'hidden';
+
+  let timer = setInterval(() => {
+    const height = el.clientHeight;
+    if (height !== prevHeight) {
+      transitionContainer.style.height = `${height}px`;
+      prevHeight = height;
+    }
+  }, 100);
+
+  setTimeout(() => {
+    // 与onLeave的duration保持一致
+    transitionEl.style.visibility = '';
+    transitionContainer.style.opacity = '1';
+  }, 150);
+
+  setTimeout(() => {
+    clearInterval(timer);
+    transitionContainer.style.height = '';
+    transitionContainer.style.opacity = '';
     done();
+  }, 400);
 };
 
 const onLeave = (el: Element, done: () => void) => {
-    const transitionContainer = transitionRef.value!.$el as HTMLElement;
-    const height = el.clientHeight;
-    transitionContainer.style.height = `${height}px`;
+  console.log('onLeave');
+  const transitionContainer = transitionRef.value!.$el as HTMLElement;
+  const height = el.clientHeight;
+  transitionContainer.style.height = `${height}px`;
+  transitionContainer.style.opacity = '0';
+
+  setTimeout(() => {
+    console.log('onLeave done');
     done();
+  }, 150);
 };
 
 const onAfterEnter = () => {
-    // const transitionContainer = transitionRef.value!.$el as HTMLElement;
-    // transitionContainer.style.height = '';
+  // const transitionContainer = transitionRef.value!.$el as HTMLElement;
+  // transitionContainer.style.height = '';
 };
 </script>
 
 <template>
-    <TransitionGroup name="fade-and-slide" tag="div" class="fade-and-slide" ref="transitionRef"
-        @enter="onEnter" @leave="onLeave" @after-enter="onAfterEnter">
-        <slot></slot>
-    </TransitionGroup>
+  <TransitionGroup name="fade-and-slide" tag="div" class="fade-and-slide" ref="transitionRef" @enter="onEnter"
+    @leave="onLeave" @after-enter="onAfterEnter" mode="out-in">
+    <slot></slot>
+  </TransitionGroup>
 </template>
 
 <style scoped>
 .fade-and-slide {
-    transition: height 250ms ease-in-out;
-    overflow: hidden;
+  transition: height 250ms ease-in-out, opacity 100ms linear;
+  opacity: 1;
+  overflow: hidden;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 3b988af..cf7078c 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -20,7 +20,15 @@ import App from './App.vue'
 const appName = '战败惩罚';
 
 const routes: RouteRecordRaw[] = [
-    { path: '/', component: () => import('./pages/Controller.vue'), name: '控制器' },
+    {
+        path: '/', component: () => import('./pages/Controller.vue'), name: '控制器',
+        children: [
+            { path: '', redirect: 'strength' },
+            { path: 'strength', component: () => import('./pages/controller/StrengthSettings.vue'), name: '控制器 - 强度设置' },
+            { path: 'pulse', component: () => import('./pages/controller/PulseSettings.vue'), name: '控制器 - 波形设置' },
+            { path: 'game', component: () => import('./pages/controller/GameConnection.vue'), name: '控制器 - 游戏连接' },
+        ],
+    },
 ];
 
 const router = createRouter({
diff --git a/frontend/src/pages/Controller.vue b/frontend/src/pages/Controller.vue
index 8828251..22c65fc 100644
--- a/frontend/src/pages/Controller.vue
+++ b/frontend/src/pages/Controller.vue
@@ -14,7 +14,6 @@ import { PulseItemInfo } from '../type/pulse';
 import { useConfirm } from 'primevue/useconfirm';
 import { ConnectorType, CoyoteDeviceVersion } from '../type/common';
 import CoyoteBluetoothService from '../components/partials/CoyoteBluetoothService.vue';
-import PulseSettings from '../components/partials/PulseSettings.vue';
 import ClientInfoDialog from '../components/dialogs/ClientInfoDialog.vue';
 import { useClientsStore } from '../stores/ClientsStore';
 import ConnectToSavedClientsDialog from '../components/dialogs/ConnectToSavedClientsDialog.vue';
@@ -93,6 +92,8 @@ const state = reactive<ControllerPageState>({
   showConnectToSavedClientsDialog: false,
 });
 
+const router = useRouter();
+
 const coyoteBTRef = ref<InstanceType<typeof CoyoteBluetoothService> | null>(null);
 
 const controllerPageTabs = [
@@ -101,6 +102,10 @@ const controllerPageTabs = [
   { title: '游戏连接', id: 'game', icon: 'pi pi-map' },
 ];
 
+watch(() => state.controllerPage, (newVal) => {
+  router.push({ path: newVal });
+});
+
 // 在收到服务器的配置后设置为true，防止触发watch
 let receivedConfig = false;
 
@@ -391,6 +396,7 @@ const postCustomPulseConfig = async () => {
     console.error('Cannot post custom pulse config:', error);
   }
 };
+provide('postCustomPulseConfig', postCustomPulseConfig);
 
 const handleStartGame = async () => {
   if (!dgClientConnected) {
@@ -533,17 +539,13 @@ watch([gameConfig, strengthConfig], () => {
         </template>
 
         <template #content>
-          <FadeAndSlideTransitionGroup>
-            <div v-if="state.controllerPage === 'strength'">
-              <StrengthSettings :state="state" />
-            </div>
-            <div v-else-if="state.controllerPage === 'pulse'">
-              <PulseSettings :state="state" @post-custom-pulse-config="postCustomPulseConfig" />
-            </div>
-            <div v-else-if="state.controllerPage === 'game'">
-              TODO: Game settings
-            </div>
-          </FadeAndSlideTransitionGroup>
+          <RouterView>
+            <template #default="{ Component }">
+              <FadeAndSlideTransitionGroup>
+                <component :is="Component" :state="state" />
+              </FadeAndSlideTransitionGroup>
+            </template>
+          </RouterView>
         </template>
       </Card>
     </div>
diff --git a/frontend/src/components/partials/GameConnection.vue b/frontend/src/pages/controller/GameConnection.vue
similarity index 100%
rename from frontend/src/components/partials/GameConnection.vue
rename to frontend/src/pages/controller/GameConnection.vue
diff --git a/frontend/src/components/partials/PulseSettings.vue b/frontend/src/pages/controller/PulseSettings.vue
similarity index 58%
rename from frontend/src/components/partials/PulseSettings.vue
rename to frontend/src/pages/controller/PulseSettings.vue
index a9aaa74..3c3cf3f 100644
--- a/frontend/src/components/partials/PulseSettings.vue
+++ b/frontend/src/pages/controller/PulseSettings.vue
@@ -40,9 +40,7 @@ const state = reactive({
   showRenamePulseDialog: false,
 });
 
-const emit = defineEmits<{
-  postCustomPulseConfig: []
-}>();
+const postCustomPulseConfig = inject<() => void>('postCustomPulseConfig');
 
 const toast = inject<ToastServiceMethods>('parentToast');
 const confirm = inject<{
@@ -75,7 +73,7 @@ const handlePulseImported = async (pulseInfo: PulseItemInfo) => {
   parentState.customPulseList.push(pulseInfo);
   toast?.add({ severity: 'success', summary: '导入成功', detail: '波形已导入', life: 3000 });
 
-  emit('postCustomPulseConfig');
+  postCustomPulseConfig?.();
 };
 
 const togglePulse = (pulseId: string) => {
@@ -110,7 +108,7 @@ const handleRenamePulseConfirm = async (newName: string) => {
   let pulse = parentState.customPulseList.find((item) => item.id === renamePulseId);
   if (pulse) {
     pulse.name = newName;
-    emit('postCustomPulseConfig');
+    postCustomPulseConfig?.();
   }
 };
 
@@ -135,7 +133,7 @@ const handleDeletePulse = async (pulseId: string) => {
         parentState.selectPulseIds = [fullPulseList.value[0].id];
       }
 
-      emit('postCustomPulseConfig');
+      postCustomPulseConfig?.();
     },
   });
 };
@@ -143,47 +141,49 @@ const handleDeletePulse = async (pulseId: string) => {
 </script>
 
 <template>
-  <div class="flex flex-col justify-between gap-2 mb-2 items-start md:flex-row md:items-center">
-    <h2 class="font-bold text-xl">波形列表</h2>
-    <div class="flex gap-2 items-center">
-      <Button icon="pi pi-sort-alpha-down" title="波形排序" severity="secondary" @click="state.showSortPulseDialog = true"
-        v-if="parentState.pulseMode === 'sequence'"></Button>
-      <Button icon="pi pi-plus" title="导入波形" severity="secondary"
-        @click="state.showImportPulseDialog = true"></Button>
-      <Button icon="pi pi-clock" title="波形切换间隔" severity="secondary" :label="parentState.pulseChangeInterval + 's'"
-        @click="showPulseTimePopover"></Button>
-      <SelectButton v-model="parentState.pulseMode" :options="pulseModeOptions" optionLabel="label" optionValue="value"
-        :allowEmpty="false" aria-labelledby="basic" />
+  <div class="w-full">
+    <div class="flex flex-col justify-between gap-2 mb-2 items-start md:flex-row md:items-center">
+      <h2 class="font-bold text-xl">波形列表</h2>
+      <div class="flex gap-2 items-center">
+        <Button icon="pi pi-sort-alpha-down" title="波形排序" severity="secondary" @click="state.showSortPulseDialog = true"
+          v-if="parentState.pulseMode === 'sequence'"></Button>
+        <Button icon="pi pi-plus" title="导入波形" severity="secondary"
+          @click="state.showImportPulseDialog = true"></Button>
+        <Button icon="pi pi-clock" title="波形切换间隔" severity="secondary" :label="parentState.pulseChangeInterval + 's'"
+          @click="showPulseTimePopover"></Button>
+        <SelectButton v-model="parentState.pulseMode" :options="pulseModeOptions" optionLabel="label" optionValue="value"
+          :allowEmpty="false" aria-labelledby="basic" />
+      </div>
     </div>
-  </div>
-  <div v-if="parentState.pulseList" class="grid justify-center grid-cols-1 md:grid-cols-2 gap-4 pb-2">
-    <PulseCard v-for="pulse in fullPulseList" :key="pulse.id" :pulse-info="pulse"
-      :is-current-pulse="parentState.selectPulseIds.includes(pulse.id)"
-      :is-fire-pulse="pulse.id === parentState.firePulseId" @set-current-pulse="togglePulse"
-      @set-fire-pulse="setFirePulse" @delete-pulse="handleDeletePulse" @rename-pulse="handleRenamePulse" />
-  </div>
-  <div v-else class="flex justify-center py-4">
-    <ProgressSpinner />
-  </div>
-  <SortPulseDialog v-model:visible="state.showSortPulseDialog" :pulse-list="parentState.pulseList ?? []"
-    v-model:modelValue="parentState.selectPulseIds" />
-  <ImportPulseDialog v-model:visible="state.showImportPulseDialog" @on-pulse-imported="handlePulseImported" />
-  <PromptDialog v-model:visible="state.showRenamePulseDialog" @confirm="handleRenamePulseConfirm" title="重命名波形"
-    input-label="波形名称" :default-value="state.willRenamePulseName" />
-
-  <Popover class="popover-pulseTime" ref="pulseTimePopoverRef">
-    <div class="flex flex-col gap-4 w-[25rem]">
-      <div>
-        <span class="font-medium block mb-2">波形切换间隔</span>
-        <div class="flex gap-2">
-          <InputGroup>
-            <InputNumber v-model="parentState.pulseChangeInterval" :min="5" :max="600" />
-            <InputGroupAddon>秒</InputGroupAddon>
-          </InputGroup>
-          <SelectButton v-model="parentState.pulseChangeInterval" :options="presetPulseTimeOptions" optionLabel="label"
-            optionValue="value" :allowEmpty="false" aria-labelledby="basic" />
+    <div v-if="parentState.pulseList" class="grid justify-center grid-cols-1 md:grid-cols-2 gap-4 pb-2">
+      <PulseCard v-for="pulse in fullPulseList" :key="pulse.id" :pulse-info="pulse"
+        :is-current-pulse="parentState.selectPulseIds.includes(pulse.id)"
+        :is-fire-pulse="pulse.id === parentState.firePulseId" @set-current-pulse="togglePulse"
+        @set-fire-pulse="setFirePulse" @delete-pulse="handleDeletePulse" @rename-pulse="handleRenamePulse" />
+    </div>
+    <div v-else class="flex justify-center py-4">
+      <ProgressSpinner />
+    </div>
+    <SortPulseDialog v-model:visible="state.showSortPulseDialog" :pulse-list="parentState.pulseList ?? []"
+      v-model:modelValue="parentState.selectPulseIds" />
+    <ImportPulseDialog v-model:visible="state.showImportPulseDialog" @on-pulse-imported="handlePulseImported" />
+    <PromptDialog v-model:visible="state.showRenamePulseDialog" @confirm="handleRenamePulseConfirm" title="重命名波形"
+      input-label="波形名称" :default-value="state.willRenamePulseName" />
+
+    <Popover class="popover-pulseTime" ref="pulseTimePopoverRef">
+      <div class="flex flex-col gap-4 w-[25rem]">
+        <div>
+          <span class="font-medium block mb-2">波形切换间隔</span>
+          <div class="flex gap-2">
+            <InputGroup>
+              <InputNumber v-model="parentState.pulseChangeInterval" :min="5" :max="600" />
+              <InputGroupAddon>秒</InputGroupAddon>
+            </InputGroup>
+            <SelectButton v-model="parentState.pulseChangeInterval" :options="presetPulseTimeOptions" optionLabel="label"
+              optionValue="value" :allowEmpty="false" aria-labelledby="basic" />
+          </div>
         </div>
       </div>
-    </div>
-  </Popover>
+    </Popover>
+  </div>
 </template>
\ No newline at end of file
diff --git a/frontend/src/pages/controller/StrengthSettings.vue b/frontend/src/pages/controller/StrengthSettings.vue
new file mode 100644
index 0000000..cf943e8
--- /dev/null
+++ b/frontend/src/pages/controller/StrengthSettings.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { ControllerPageState } from '../../pages/Controller.vue';
+import { Reactive } from 'vue';
+
+import CoyoteBluetoothPanel from '../../components/partials/CoyoteBluetoothPanel.vue';
+
+defineOptions({
+  name: 'StrengthSettings',
+});
+
+const props = defineProps<{
+  state: any;
+}>();
+
+// 从父组件获取state
+let parentState: Reactive<ControllerPageState>;
+watch(() => props.state, (value) => {
+  parentState = value;
+}, { immediate: true });
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
+      <label class="font-semibold w-30 flex-shrink-0">强度变化频率</label>
+      <div class="w-full flex-shrink flex gap-2 flex-col lg:items-center lg:flex-row lg:gap-8">
+        <div class="h-6 lg:h-auto flex-grow flex items-center">
+          <Slider class="w-full" v-model="parentState.randomFreq" range :max="60" />
+        </div>
+        <div class="w-40">
+          <InputGroup class="input-small">
+            <InputNumber class="input-text-center" v-model="parentState.randomFreq[0]" />
+            <InputGroupAddon>-</InputGroupAddon>
+            <InputNumber class="input-text-center" v-model="parentState.randomFreq[1]" />
+          </InputGroup>
+        </div>
+      </div>
+    </div>
+    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
+      <label class="font-semibold w-30">基础强度</label>
+      <InputNumber class="input-small" v-model="parentState.strengthVal" />
+      <div class="flex-grow flex-shrink"></div>
+    </div>
+    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
+      <label class="font-semibold w-30">随机强度</label>
+      <InputNumber class="input-small" v-model="parentState.randomStrengthVal" />
+      <div class="flex-grow flex-shrink"></div>
+    </div>
+    <div class="flex gap-8 mb-4 w-full">
+      <div class="w-30"></div>
+      <div class="opacity-60 text-right">
+        强度范围：{{ parentState.strengthVal }} - {{ parentState.strengthVal + parentState.randomStrengthVal
+        }}，强度上限请在DG-Lab中设置
+      </div>
+    </div>
+    <div class="flex items-center gap-2 lg:gap-8 mb-4 w-full">
+      <label class="font-semibold w-30">B通道</label>
+      <ToggleButton v-model="parentState.bChannelEnabled" onIcon="pi pi-circle-on" onLabel="已启用"
+        offIcon="pi pi-circle-off" offLabel="已禁用" />
+    </div>
+    <div class="w-full flex flex-col md:flex-row items-top lg:items-center gap-2 lg:gap-8 mb-8 lg:mb-4">
+      <label class="font-semibold w-30">B通道强度倍数</label>
+      <InputNumber class="input-small" :disabled="!parentState.bChannelEnabled"
+        v-model="parentState.bChannelMultiple" />
+      <div class="flex-grow flex-shrink"></div>
+    </div>
+    <div class="flex gap-8 w-full">
+      <div class="w-30"></div>
+      <div class="opacity-60 text-right">
+        B通道的强度 = A通道强度 * 强度倍数
+      </div>
+    </div>
+    <CoyoteBluetoothPanel></CoyoteBluetoothPanel>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 2e6d84a..7e36ad2 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
       output: {
         manualChunks: {
           'chartRoutes': ['./src/charts/chartRoutes.ts'],
+          'dg-pulse-helper': ['./src/lib/dg-pulse-helper/index.ts'],
         }
       }
     },