From 10bea9c95e8fa9b7ddd873ed8acc11aa96573516 Mon Sep 17 00:00:00 2001
From: kerms <kerms@niazo.org>
Date: Wed, 22 May 2024 19:32:04 +0800
Subject: [PATCH] feat(fullscreen, navbar UI): make navbar smaller on small
 screen

---
 package-lock.json                    | 24 +-----------
 package.json                         |  4 +-
 src/assets/icon/close-fullscreen.svg |  1 +
 src/assets/icon/open-in-full.svg     |  1 +
 src/assets/page.css                  |  7 +++-
 src/views/navigation/NavBar.vue      | 55 ++++++++++++++++++++--------
 6 files changed, 52 insertions(+), 40 deletions(-)
 create mode 100644 src/assets/icon/close-fullscreen.svg
 create mode 100644 src/assets/icon/open-in-full.svg

diff --git a/package-lock.json b/package-lock.json
index 554918e..16f5b4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
-        "element-plus": "^2.6.1",
+        "@vueuse/core": "^10.9.0",
+        "element-plus": "^2.7.3",
         "mitt": "^3.0.1",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
@@ -106,7 +107,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -122,7 +122,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -138,7 +137,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -154,7 +152,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -170,7 +167,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -186,7 +182,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -202,7 +197,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -218,7 +212,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -234,7 +227,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -250,7 +242,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -266,7 +257,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -282,7 +272,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -298,7 +287,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -314,7 +302,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -330,7 +317,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -346,7 +332,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -362,7 +347,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -378,7 +362,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -394,7 +377,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -410,7 +392,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -426,7 +407,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
diff --git a/package.json b/package.json
index 136e716..c0d93d6 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": ". ./set_env.sh && vite",
+    "devh": ". ./set_env.sh && vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": ". ./set_env.sh && vite preview",
     "build-only": ". ./set_env.sh && vite build",
@@ -14,7 +15,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "element-plus": "^2.6.1",
+    "@vueuse/core": "^10.9.0",
+    "element-plus": "^2.7.3",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
diff --git a/src/assets/icon/close-fullscreen.svg b/src/assets/icon/close-fullscreen.svg
new file mode 100644
index 0000000..36f90c5
--- /dev/null
+++ b/src/assets/icon/close-fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#5f6368"><path d="m136-80-56-56 264-264H160v-80h320v320h-80v-184L136-80Zm344-400v-320h80v184l264-264 56 56-264 264h184v80H480Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icon/open-in-full.svg b/src/assets/icon/open-in-full.svg
new file mode 100644
index 0000000..a757944
--- /dev/null
+++ b/src/assets/icon/open-in-full.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#5f6368"><path d="M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/page.css b/src/assets/page.css
index 68acde3..823a87b 100644
--- a/src/assets/page.css
+++ b/src/assets/page.css
@@ -1,5 +1,5 @@
 .text-layout {
-    @apply m-auto max-w-2xl min-w-min px-2
+    @apply mx-auto max-w-2xl w-full sm:min-w-[640px] px-2
 }
 
 .page-title {
@@ -14,3 +14,8 @@
     @apply text-blue-600 font-bold;
     cursor: default;
 }
+
+.el-checkbox:hover {
+    background-color: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary-light-8);
+}
diff --git a/src/views/navigation/NavBar.vue b/src/views/navigation/NavBar.vue
index a83c863..8c99488 100644
--- a/src/views/navigation/NavBar.vue
+++ b/src/views/navigation/NavBar.vue
@@ -1,25 +1,31 @@
 <template>
-  <nav class="relative px-2 py-1 flex justify-between items-center border-b">
+  <nav class="relative px-2 py-0.5 sm:py-1 flex justify-between items-center border-b h-full">
     <div class="flex">
-      <button @click.prevent="sideMenuOpen=true" class="flex items-center hover:text-blue-600 p-3">
-        <svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <button @click.prevent="sideMenuOpen=true" class="flex items-center hover:text-blue-600 pl-1 mx-4">
+        <svg class="block h-3 lg:h-4 lg:w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <title>导航侧栏</title>
           <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
         </svg>
       </button>
 
-      <router-link to="/" class="text-3xl px-4 font-bold leading-none" title="走，去码头整点薯条">
-        <InlineSvg name="favicon" class="h-10"></InlineSvg>
+      <router-link to="/" class="text-3xl px-4 font-bold leading-none hidden items-center sm:flex" title="走，去码头整点薯条">
+        <InlineSvg name="favicon" class="h-5 lg:h-8"></InlineSvg>
       </router-link>
+
+
 <!--      <a class="text-3xl px-4 font-bold leading-none" href="/">-->
 <!--        <InlineSvg name="home" class="h-10"></InlineSvg>-->
 <!--      </a>-->
 <!--      <router-link to="/" class="flex items-center text-sm text-blue-600 font-bold">主页</router-link>-->
 <!--      <a class="flex items-center text-sm text-blue-600 font-bold" href="/">主页6</a>-->
+
+      <div class="flex pt-0.5 sm:pt-1 ml-4 text-sm items-center sm:hidden">
+        <router-link :to="route.fullPath">{{ route.meta.title }}</router-link>
+      </div>
     </div>
 
     <div class="flex">
-      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 md:flex md:mx-auto md:items-center md:w-auto md:space-x-6">
+      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 sm:flex sm:mx-auto sm:items-center sm:w-auto sm:space-x-6">
         <li v-for="(item, index) in menuItems" :key="index" class="router-link">
           <router-link :to="item.href" :class="item?.class">{{item.name}}</router-link>
         </li>
@@ -27,12 +33,22 @@
     </div>
 
     <!--  <a class="md:ml-auto md:mr-3"></a>-->
-    <div class="flex">
-      <el-button :type="wsColor" size="large" class="transition duration-1000">
-        <InlineSvg v-show="wsColor!=='success'" name="link-off" class="mr-2" width="20"></InlineSvg>
-        <InlineSvg v-show="wsColor==='success'" name="link" class="mr-2" width="20"></InlineSvg>
-        {{ wsState }}
-      </el-button>
+    <div class="flex h-full">
+      <div id="page-spec-slot" class="content-center h-full flex flex-row"></div>
+      <div class="lg:hidden">
+        <el-button :type="wsColor" size="small" class="transition duration-1000 min-h-full">
+          <InlineSvg v-show="wsColor!=='success'" name="link-off" class="mr-2" width="20"></InlineSvg>
+          <InlineSvg v-show="wsColor==='success'" name="link" class="mr-2" width="20"></InlineSvg>
+          <div class="text-xs sm:text-sm lg:text-base">{{ wsState }}</div>
+        </el-button>
+      </div>
+      <div class="hidden lg:flex">
+        <el-button :type="wsColor" size="large" class="transition duration-1000 min-h-full">
+          <InlineSvg v-show="wsColor!=='success'" name="link-off" class="mr-2" width="20"></InlineSvg>
+          <InlineSvg v-show="wsColor==='success'" name="link" class="mr-2" width="20"></InlineSvg>
+          <div class="text-base">{{ wsState }}</div>
+        </el-button>
+      </div>
     </div>
   </nav>
   <div :class='["custom-drawer", {open: sideMenuOpen}]'>
@@ -42,7 +58,7 @@
         size=""
         :direction="'ltr'"
     >
-      <div id="testborder" :class="[sideMenuItemClass]" class="pr-6 flex text-gray-500" @click="sideMenuOpen=false">
+      <div :class="[sideMenuItemClass]" class="pr-6 flex text-gray-500" @click="sideMenuOpen=false">
         <InlineSvg name="cross" class="h-6"></InlineSvg>
         <div>
           <p class="h-6 flex items-center">{{ $t("page.close") }}</p>
@@ -59,9 +75,12 @@
 
       <template #footer>
         <div>
-          <p class="text-xs text-center text-gray-400">
-            <span>Copyright <a href="http://github.com/kerms">kerms</a> 2024</span>
-          </p>
+          <el-button @click="toggle">
+            <InlineSvg v-if="!isFullscreen" name="open-in-full" width="16px" fill="#000000"></InlineSvg>
+            <p v-if="!isFullscreen">全屏</p>
+            <InlineSvg v-if="isFullscreen" name="close-fullscreen" width="16px" fill="#000000"></InlineSvg>
+            <p v-if="isFullscreen">缩小</p>
+          </el-button>
         </div>
       </template>
     </el-drawer>
@@ -90,8 +109,12 @@ import {computed, ref} from "vue";
 import {useWsStore} from "@/stores/websocket";
 import {translate} from "@/locales";
 import {ControlEvent} from "@/api";
+import {useRoute} from "vue-router";
+import { useFullscreen } from '@vueuse/core'
 
 const wsStore = useWsStore();
+const {isFullscreen, toggle} = useFullscreen();
+const route = useRoute();
 
 const sideMenuItemClass = "block p-4 text-sm font-semibold hover:bg-blue-50 hover:text-blue-600 rounded"
 const sideMenuOpen = ref(false);