feat(desktop): 视频播放窗口支持置顶

aooiuu · Jun 2, 2024 · 12686e3 · 12686e3
1 parent 917f226
commit 12686e3
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 159 deletions.
diff --git a/packages/web/electron/api.ts b/packages/web/electron/api.ts
@@ -16,7 +16,7 @@ function success(data: any, msg = '') {
   };
 }
 
-export function createAPI(win: BrowserWindow) {
+export function createAPI() {
   const pm = new EasyPostMessage(Adapter);
   const { api } = require('@any-reader/shared');
 
@@ -26,29 +26,41 @@ export function createAPI(win: BrowserWindow) {
   });
 
   pm.answer('get@minimize', () => {
-    win.minimize();
+    BrowserWindow.getFocusedWindow()?.minimize();
     return success(true);
   });
+
   pm.answer('get@maximize', () => {
-    console.log('[maximize]');
-    win.isMaximized() ? win.unmaximize() : win.maximize();
+    const w = BrowserWindow.getFocusedWindow();
+    w?.isMaximized() ? w?.unmaximize() : w?.maximize();
     return success(true);
   });
+
   pm.answer('get@exit', () => {
-    app.quit();
-    process.exit(0);
+    const w = BrowserWindow.getFocusedWindow();
+    w?.close();
+
+    if (BrowserWindow.getAllWindows().length === 0) {
+      app.quit();
+      process.exit(0);
+    }
   });
 
   pm.answer('post@alwaysOnTop', ({ pinned = true }) => {
-    pinned ? win.setAlwaysOnTop(true, 'screen-saver') : win.setAlwaysOnTop(false);
-    return success(win.isAlwaysOnTop());
+    const w = BrowserWindow.getFocusedWindow();
+    pinned ? w?.setAlwaysOnTop(true, 'screen-saver') : w?.setAlwaysOnTop(false);
+    return success(w?.isAlwaysOnTop());
   });
 
   pm.answer('post@openWindow', (data) => {
     const window = new BrowserWindow({
       title: 'AnyReader',
-      // titleBarStyle: 'hidden',
-      webPreferences: { nodeIntegration: true, contextIsolation: false }
+      titleBarStyle: 'hidden',
+      webPreferences: {
+        nodeIntegration: true,
+        contextIsolation: false,
+        webSecurity: false
+      }
     });
 
     if (process.env.VITE_DEV_SERVER_URL) {

diff --git a/packages/web/electron/main.ts b/packages/web/electron/main.ts
@@ -14,7 +14,7 @@ app.whenReady().then(async () => {
   });
 
   api.init();
-  createAPI(win);
+  createAPI();
 
   // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
   if (process.env.VITE_DEV_SERVER_URL) {

diff --git a/packages/web/src/pages/pc/layout/BaseLayout.vue b/packages/web/src/pages/pc/layout/BaseLayout.vue
@@ -0,0 +1,52 @@
+<template>
+  <slot />
+</template>
+
+<style lang="scss">
+body {
+  --titleBar-inactiveBackground: rgb(31, 31, 31);
+  --titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
+  --titleBar-border-bottom: rgb(43, 43, 43);
+  /* --toolbar-activeBackground: rgba(90, 93, 94, 0.31); */
+  --toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+  --commandCenter-background: rgba(255, 255, 255, 0.05);
+  --commandCenter-inactiveBorder: rgba(204, 204, 204, 0.15);
+  --commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+  --foreground: rgb(134, 134, 134);
+  --activityBar-foreground: rgb(215, 215, 215);
+  --activityBar-background: rgb(24, 24, 24);
+  --main-background: rgb(31, 31, 31);
+  --scrollbarSlider-background: rgba(121, 121, 121, 0.4);
+  --editor-background: #1f1f1f;
+
+  scrollbar-color: var(--scrollbarSlider-background) var(--editor-background);
+
+  --color-bg-3: rgb(24, 24, 24);
+
+  &[arco-theme='dark'] {
+    --color-bg-3: rgb(24, 24, 24);
+  }
+}
+
+.app-region-none {
+  -webkit-app-region: none;
+
+  * {
+    -webkit-app-region: none;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+@media (max-width: 300px) {
+  .topbar__left {
+    display: none;
+  }
+}
+
+@media (max-width: 250px) {
+  .topbar__cmd {
+    display: none;
+  }
+}
+</style>
diff --git a/packages/web/src/pages/pc/layout/index.vue b/packages/web/src/pages/pc/layout/index.vue
@@ -1,106 +1,111 @@
 <template>
-  <div class="w-full h-full flex flex-col overflow-hidden">
-    <div
-      class="text-12 flex justify-center items-center h-34 lh-34 bg-[--titleBar-inactiveBackground] border-b-1 border-b-solid border-b-[--titleBar-border-bottom] pr-2"
-      :style="{
-        '-webkit-app-region': 'drag'
-      }"
-    >
-      <div class="topbar__left w-20%" />
-      <div class="w-60% flex gap-4 items-center justify-center flex-1 text-[--titleBar-inactiveForeground]">
-        <span
-          v-if="route.path !== '/pc/books'"
-          class="w-22 codicon codicon-home cursor-pointer hover:op-70 app-region-none"
-          @click="router.push('/pc/books')"
-        ></span>
-        <span class="w-22 codicon codicon-arrow-left cursor-pointer hover:op-70 app-region-none" @click="router.back"></span>
-        <span class="w-22 codicon codicon-arrow-right cursor-pointer hover:op-70 app-region-none" @click="router.forward"></span>
-        <div
-          class="topbar__cmd app-region-none box-content flex items-center justify-center ml-6 w-38vw max-w-600 bg-[--commandCenter-background] border-1 border-solid rounded-6 h-22 border-[--commandCenter-inactiveBorder] cursor-pointer hover:bg-[--commandCenter-activeBackground] px-6"
-        >
+  <BaseLayout>
+    <div class="w-full h-full flex flex-col overflow-hidden">
+      <div
+        class="text-12 flex justify-center items-center h-34 lh-34 bg-[--titleBar-inactiveBackground] border-b-1 border-b-solid border-b-[--titleBar-border-bottom] pr-2"
+        :style="{
+          '-webkit-app-region': 'drag'
+        }"
+      >
+        <div class="topbar__left w-20%" />
+        <div class="w-60% flex gap-4 items-center justify-center flex-1 text-[--titleBar-inactiveForeground]">
+          <span
+            v-if="route.path !== '/pc/books'"
+            class="w-22 codicon codicon-home cursor-pointer hover:op-70 app-region-none"
+            @click="router.push('/pc/books')"
+          ></span>
+          <span class="w-22 codicon codicon-arrow-left cursor-pointer hover:op-70 app-region-none" @click="router.back"></span>
+          <span class="w-22 codicon codicon-arrow-right cursor-pointer hover:op-70 app-region-none" @click="router.forward"></span>
           <div
-            v-if="route.path === '/pc/content'"
-            class="w-full h-full flex items-center justify-center"
-            :title="readStore.title"
-            @click.stop="openChaptersBox.emit"
+            class="topbar__cmd app-region-none box-content flex items-center justify-center ml-6 w-38vw max-w-600 bg-[--commandCenter-background] border-1 border-solid rounded-6 h-22 border-[--commandCenter-inactiveBorder] cursor-pointer hover:bg-[--commandCenter-activeBackground] px-6"
           >
-            <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{ readStore.title }}</span>
-          </div>
-          <div v-else class="w-full h-full flex items-center justify-center" @click.stop="searchBox.emit">
-            <span class="codicon codicon-search mr-10"></span>
-            <span class="overflow-hidden whitespace-nowrap text-ellipsis">搜索</span>
+            <div
+              v-if="route.path === '/pc/content'"
+              class="w-full h-full flex items-center justify-center"
+              :title="readStore.title"
+              @click.stop="openChaptersBox.emit"
+            >
+              <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{ readStore.title }}</span>
+            </div>
+            <div v-else class="w-full h-full flex items-center justify-center" @click.stop="searchBox.emit">
+              <span class="codicon codicon-search mr-10"></span>
+              <span class="overflow-hidden whitespace-nowrap text-ellipsis">搜索</span>
+            </div>
           </div>
         </div>
+        <div class="w-20% h-full flex gap-4 items-center justify-end text-[--titleBar-inactiveForeground]">
+          <template v-if="PLATFORM === 'electron'">
+            <!-- 布局 -->
+            <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none">
+              <span
+                :class="['codicon', settingStore.data.pinned ? 'codicon-pinned-dirty' : 'codicon-pinned']"
+                @click="settingStore.data.pinned = !settingStore.data.pinned"
+              />
+            </div>
+            <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none">
+              <span
+                :class="['codicon', settingStore.data.sidebar === 'hidden' ? 'codicon-layout-sidebar-left-off' : 'codicon-layout-sidebar-left']"
+                @click="changeSidebar"
+              />
+            </div>
+            <!-- 窗口 -->
+            <div
+              class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none"
+              @click="minimize"
+            >
+              <span class="codicon codicon-chrome-minimize" />
+            </div>
+            <div
+              class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] fullscreen app-region-none"
+              @click="maximize"
+            >
+              <span class="codicon codicon-chrome-maximize"></span>
+            </div>
+            <div
+              class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none"
+              @click="exit"
+            >
+              <span class="codicon codicon-chrome-close"></span>
+            </div>
+          </template>
+        </div>
       </div>
-      <div class="w-20% h-full flex gap-4 items-center justify-end text-[--titleBar-inactiveForeground]">
-        <template v-if="PLATFORM === 'electron'">
-          <!-- 布局 -->
-          <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none">
-            <span
-              :class="['codicon', settingStore.data.pinned ? 'codicon-pinned-dirty' : 'codicon-pinned']"
-              @click="settingStore.data.pinned = !settingStore.data.pinned"
-            />
-          </div>
-          <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none">
-            <span
-              :class="['codicon', settingStore.data.sidebar === 'hidden' ? 'codicon-layout-sidebar-left-off' : 'codicon-layout-sidebar-left']"
-              @click="changeSidebar"
-            />
-          </div>
-          <!-- 窗口 -->
-          <div
-            class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none"
-            @click="minimize"
-          >
-            <span class="codicon codicon-chrome-minimize" />
-          </div>
+      <div class="flex flex-1 overflow-auto">
+        <!-- 侧边栏 -->
+        <div
+          v-if="settingStore.data.sidebar !== 'hidden'"
+          class="w-48 flex flex-col py-10 text-[--foreground] bg-[--activityBar-background] text-24 border-r-1 border-r-solid border-r-[--titleBar-border-bottom]"
+        >
+          <!-- 收藏 -->
           <div
-            class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] fullscreen app-region-none"
-            @click="maximize"
+            v-for="nav in navs"
+            :key="nav.path"
+            :class="[
+              'w-42 h-42 flex items-center justify-center hover:text-[--activityBar-foreground] cursor-pointer',
+              route.path === nav.path ? 'text-[--activityBar-foreground]' : ''
+            ]"
+            @click="router.push(nav.path)"
           >
-            <span class="codicon codicon-chrome-maximize"></span>
+            <span :class="['codicon !text-24px', nav.icon]"></span>
           </div>
-          <div class="w-40 h-full flex justify-center items-center cursor-pointer hover:bg-[--toolbar-hoverBackground] app-region-none" @click="exit">
-            <span class="codicon codicon-chrome-close"></span>
+          <div class="flex-1"></div>
+
+          <div :class="['w-42 h-42 flex items-center justify-center hover:text-[--activityBar-foreground] cursor-pointer']" @click="openSetting">
+            <span :class="['codicon !text-24px codicon-settings-gear']"></span>
           </div>
-        </template>
-      </div>
-    </div>
-    <div class="flex flex-1 overflow-auto">
-      <!-- 侧边栏 -->
-      <div
-        v-if="settingStore.data.sidebar !== 'hidden'"
-        class="w-48 flex flex-col py-10 text-[--foreground] bg-[--activityBar-background] text-24 border-r-1 border-r-solid border-r-[--titleBar-border-bottom]"
-      >
-        <!-- 收藏 -->
-        <div
-          v-for="nav in navs"
-          :key="nav.path"
-          :class="[
-            'w-42 h-42 flex items-center justify-center hover:text-[--activityBar-foreground] cursor-pointer',
-            route.path === nav.path ? 'text-[--activityBar-foreground]' : ''
-          ]"
-          @click="router.push(nav.path)"
-        >
-          <span :class="['codicon !text-24px', nav.icon]"></span>
         </div>
-        <div class="flex-1"></div>
-
-        <div :class="['w-42 h-42 flex items-center justify-center hover:text-[--activityBar-foreground] cursor-pointer']" @click="openSetting">
-          <span :class="['codicon !text-24px codicon-settings-gear']"></span>
+        <div class="flex-1 overflow-hidden bg-[--main-background]">
+          <RouterView v-slot="{ Component, route: _route }">
+            <KeepAlive>
+              <component :is="Component" v-if="_route.meta.keepAlive" :key="_route.path" />
+            </KeepAlive>
+            <component :is="Component" v-if="!_route.meta.keepAlive" :key="_route.path" />
+          </RouterView>
         </div>
       </div>
-      <div class="flex-1 overflow-hidden bg-[--main-background]">
-        <RouterView v-slot="{ Component, route: _route }">
-          <KeepAlive>
-            <component :is="Component" v-if="_route.meta.keepAlive" :key="_route.path" />
-          </KeepAlive>
-          <component :is="Component" v-if="!_route.meta.keepAlive" :key="_route.path" />
-        </RouterView>
-      </div>
     </div>
-  </div>
-  <Search />
+    <Search />
+  </BaseLayout>
 </template>
 
 <script setup lang="jsx">
@@ -112,6 +117,7 @@ import { useSettingStore } from '@/stores/setting';
 import { useReadStore } from '@/stores/read';
 import Setting from '@/components/Setting/index.vue';
 import Search from '@/components/Search/index.vue';
+import BaseLayout from './BaseLayout.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -143,52 +149,3 @@ function openSetting() {
   });
 }
 </script>
-
-<style lang="scss">
-body {
-  --titleBar-inactiveBackground: rgb(31, 31, 31);
-  --titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
-  --titleBar-border-bottom: rgb(43, 43, 43);
-  /* --toolbar-activeBackground: rgba(90, 93, 94, 0.31); */
-  --toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
-  --commandCenter-background: rgba(255, 255, 255, 0.05);
-  --commandCenter-inactiveBorder: rgba(204, 204, 204, 0.15);
-  --commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
-  --foreground: rgb(134, 134, 134);
-  --activityBar-foreground: rgb(215, 215, 215);
-  --activityBar-background: rgb(24, 24, 24);
-  --main-background: rgb(31, 31, 31);
-  --scrollbarSlider-background: rgba(121, 121, 121, 0.4);
-  --editor-background: #1f1f1f;
-
-  scrollbar-color: var(--scrollbarSlider-background) var(--editor-background);
-
-  --color-bg-3: rgb(24, 24, 24);
-
-  &[arco-theme='dark'] {
-    --color-bg-3: rgb(24, 24, 24);
-  }
-}
-
-.app-region-none {
-  -webkit-app-region: none;
-
-  * {
-    -webkit-app-region: none;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-@media (max-width: 300px) {
-  .topbar__left {
-    display: none;
-  }
-}
-
-@media (max-width: 250px) {
-  .topbar__cmd {
-    display: none;
-  }
-}
-</style>