Merge branch 'dev'

# Conflicts:
#	package.json
#	src/layouts/Content/SliceList/index.vue
#	src/layouts/index.vue
#	src/views/guaPlayer/index.vue

Author: ZhaoJiSen

components.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NList: typeof import('naive-ui')['NList']
     NListItem: typeof import('naive-ui')['NListItem']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
@@ -35,7 +36,6 @@ declare module 'vue' {
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
-    NThing: typeof import('naive-ui')['NThing']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']

package.json

@@ -88,7 +88,6 @@
   },
   "devDependencies": {
     "@electron/notarize": "^2.5.0",
-    "@types/electron": "^1.6.10",
     "@types/node": "^22.5.1",
     "@unocss/preset-web-fonts": "^0.62.3",
     "@vicons/antd": "^0.12.0",

src/lang/modules/en.ts

@@ -14,4 +14,5 @@ export default {
   emptyCommand: 'The command list is empty',
   videoInformation: 'Video Information: ',
   toggleLangSuccess: 'Language changed',
+  scalingRatio: 'Scaling Ratio'
 };

src/lang/modules/zh.ts

@@ -14,4 +14,5 @@ export default {
   emptyCommand: '命令列表为空',
   videoInformation: '视频信息：',
   toggleLangSuccess: '语言已更改',
+  scalingRatio: '缩放比',
 };

src/layouts/Content/SliceList/index.vue

@@ -318,7 +318,7 @@ setVideoInfoSetting();
   border: none;
   padding-left: 0;
   padding-right: 0;
-  margin: 10px 0;
+  margin: 10px 12px;
 
   :deep(.n-list) {
     padding-left: 0;

src/layouts/Content/Upload/index.vue

@@ -4,10 +4,7 @@
     flex-col
     items-center
     justify-center
-    p-10px
-    multiple
     directory-dnd
-    style="height: calc(100% - 20px)"
     :max="1"
     :custom-request="handleCustomRequest"
     :trigger-style="{ width: '100%', height: '85%' }"

src/layouts/Side/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div w-65px flex flex-col items-center justify-between h-full side-bg-base>
+  <div flex flex-col items-center justify-between h-screen side-bg-base w-65px>
     <n-flex mt-10px>
       <n-image :src="Logo" :height="34" :width="34" :preview-disabled="true" cursor-pointer />
     </n-flex>

src/layouts/index.vue

@@ -1,35 +1,50 @@
 <template>
-  <n-flex class="page-root">
+  <n-flex class="!gap-0 !flex-nowrap">
     <Side />
-    <n-layout class="page-main">
-      <n-layout-header class="page-header">
+
+    <n-layout class="flex flex-col">
+      <n-layout-header class="flex items-center w-full h-14">
         <Header @back="handleBack" />
       </n-layout-header>
-      <n-divider />
-      <n-layout-content
-        class="page-content"
-        content-style="overflow: hidden; height: calc(100vh - 56px);"
+
+      <n-divider class="!m-0" />
+
+      <n-layout
+        has-sider
+        :content-style="{ gap: '24px', height: 'calc(100vh - 4rem)' }"
+        sider-placement="right"
+        class="w-full"
       >
-        <n-grid :cols="12" class="page-grid">
-          <n-gi :span="8">
-            <div class="pane-left">
-              <Upload v-if="!showPlayer" @parser="handleParser" class="pane-fill" />
-
-              <router-view v-else :key="route.fullPath" class="pane-fill" />
-            </div>
-          </n-gi>
-          <n-gi :span="4">
-            <div class="pane-right">
-              <SliceList
-                @play="handlePlay"
-                :json-file="currentPartJsonFile"
-                @show-upload="handleShowUpload"
-                class="pane-fill"
-              />
-            </div>
-          </n-gi>
-        </n-grid>
-      </n-layout-content>
+        <n-layout-content
+          :content-style="{
+            display: 'flex',
+            padding: '0 12px 0 20px'
+          }"
+        >
+          <Upload v-if="!showPlayer" @parser="handleParser" />
+
+          <div v-else ref="playerWrapRef" class="w-full h-full">
+            <router-view :key="route.fullPath" />
+          </div>
+        </n-layout-content>
+
+        <n-layout-sider
+          bordered
+          :collapsed-width="0"
+          :width="480"
+          :native-scrollbar="false"
+          show-trigger="bar"
+          collapse-mode="width"
+          v-model:collapsed="siderCollapsed"
+          content-style="padding: 24px;"
+        >
+          <SliceList
+            @play="handlePlay"
+            :json-file="currentPartJsonFile"
+            @show-upload="handleShowUpload"
+          />
+        </n-layout-sider>
+      </n-layout>
     </n-layout>
   </n-flex>
 </template>
@@ -40,24 +55,28 @@ import Header from '@/layouts/Header/index.vue';
 import Upload from './Content/Upload/index.vue';
 import SliceList from './Content/SliceList/index.vue';
 
-import { ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
 import { useMessage } from 'naive-ui';
-import { useResolveFile } from '@/hooks/useResolveFile.ts';
 import type { UploadFileInfo } from 'naive-ui';
+import { useRouter, useRoute } from 'vue-router';
+import { useResolveFile } from '@/hooks/useResolveFile.ts';
+import { useResizeObserver, useDebounceFn } from '@vueuse/core';
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
 const route = useRoute();
 const router = useRouter();
 const message = useMessage();
 const { fileParser } = useResolveFile();
 
+const siderCollapsed = ref(false);
+const playerWrapRef = ref<HTMLElement | null>(null);
+
 const jsonFile = ref<string>('');
 const videoUrl = ref<string>('');
 const showPlayer = ref<boolean>(false);
 const currentPartJsonFile = ref({});
 
 /**
- * 处理返回时间
+ * 返回：关闭播放器回到上传
  */
 const handleBack = () => {
   showPlayer.value = false;
@@ -87,61 +106,36 @@ const handleParser = async (options: {
 
 /**
  * 点击 Item 开始播放
- *
- * @param videoUrl
- * @param type
- * @param jsonFile
  */
 const handlePlay = (videoUrl: string, type: string, jsonFile: object) => {
   switch (type) {
     case 'mp4': {
       showPlayer.value = true;
       currentPartJsonFile.value = jsonFile;
-
-      router.push({
-        name: 'mp4Player',
-        params: { videoUrl }
-      });
-
+      router.push({ name: 'mp4Player', params: { videoUrl } });
       break;
     }
     case 'cast': {
       showPlayer.value = true;
       currentPartJsonFile.value = jsonFile;
-      router.push({
-        name: 'asciicastPlayer',
-        params: { castUrl: videoUrl }
-      });
-
+      router.push({ name: 'asciicastPlayer', params: { castUrl: videoUrl } });
       break;
     }
     case 'gua': {
       showPlayer.value = true;
-      router.push({
-        name: 'guaPlayer',
-        params: { guaUrl: videoUrl }
-      });
-
+      router.push({ name: 'guaPlayer', params: { guaUrl: videoUrl } });
       break;
     }
     case 'part': {
       showPlayer.value = true;
-
       currentPartJsonFile.value = jsonFile;
-
       setTimeout(() => {
-        router.push({
-          name: 'guaPlayer',
-          params: { guaUrl: videoUrl }
-        });
+        router.push({ name: 'guaPlayer', params: { guaUrl: videoUrl } });
       });
-
       break;
     }
-
     default: {
       showPlayer.value = false;
-
       break;
     }
   }
@@ -156,65 +150,38 @@ const handleShowUpload = () => {
     currentPartJsonFile.value = {};
   }, 100);
 };
-</script>
 
-<style scoped lang="scss">
-.page-root {
-  gap: unset !important;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.page-main {
-  width: calc(100vw - 65px);
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 55px;
-}
-
-:deep(.n-divider) {
-  margin: 0 !important;
-}
-
-.page-content {
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-}
-
-.page-grid {
-  width: 100%;
-  height: 100%;
-}
-
-.pane-left,
-.pane-right {
-  height: 100%;
-  width: 100%;
-  display: flex;
-}
-
-.pane-left {
-  align-items: stretch;
-  justify-content: stretch;
-}
-
-.pane-right {
-  align-items: stretch;
-  justify-content: stretch;
-}
-
-.pane-fill {
-  width: 100%;
-  height: 100%;
-}
-</style>
+const triggerRecomputeScale = () => {
+  window.dispatchEvent(new CustomEvent('recompute-scale', { detail: Date.now() }));
+};
+
+const debouncedTrigger = useDebounceFn(triggerRecomputeScale, 80);
+
+useResizeObserver(playerWrapRef as any, () => {
+  debouncedTrigger();
+});
+
+watch(siderCollapsed, async () => {
+  await nextTick();
+
+  // 立即触发一次
+  triggerRecomputeScale();
+
+  // 在动画期间多次触发，确保各个阶段都能自适应
+  const delays = [50, 150, 250, 400, 600];
+  delays.forEach(delay => {
+    setTimeout(triggerRecomputeScale, delay);
+  });
+});
+
+onMounted(() => {
+  window.addEventListener('resize', debouncedTrigger);
+  if (showPlayer.value) {
+    setTimeout(triggerRecomputeScale, 200);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', debouncedTrigger);
+});
+</script>