feat: 设置及盒子页面构建

ZSCGR · Aug 7, 2023 · c184efb · c184efb
1 parent 1b016cb
commit c184efb
Show file tree

Hide file tree

Showing 24 changed files with 451 additions and 87 deletions.
diff --git a/index.html b/index.html
@@ -1,26 +1,30 @@
 <!doctype html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Snavigation</title>
-    <!-- HarmonyOS Sans -->
-    <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
-    <!-- IE Out -->
-    <script>
-      if (
-        /*@cc_on!@*/
-        false ||
-        (!!window.MSInputMethodContext && !!document.documentMode)
-      )
-        window.location.href =
-        "https://support.dmeng.net/upgrade-your-browser.html?referrer=" +
-        encodeURIComponent(window.location.href);
-    </script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Snavigation</title>
+  <!-- HarmonyOS Sans -->
+  <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
+  <!-- IE Out -->
+  <script>
+    if (
+      /*@cc_on!@*/
+      false ||
+      (!!window.MSInputMethodContext && !!document.documentMode)
+    )
+      window.location.href =
+      "https://support.dmeng.net/upgrade-your-browser.html?referrer=" +
+      encodeURIComponent(window.location.href);
+  </script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="/lib/iconfont.js" async></script>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "snavigation",
   "private": true,
-  "version": "2.0.0 beta 2",
+  "version": "2.0.0 beta 3",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
@@ -21,6 +21,7 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "naive-ui": "^2.34.4",
     "terser": "^5.19.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-compression": "^0.5.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/lib/iconfont.js b/public/lib/iconfont.js
diff --git a/src/App.vue b/src/App.vue
@@ -4,10 +4,43 @@
     <Cover @loadComplete="loadComplete" />
     <!-- 主界面 -->
     <Transition name="fade" mode="out-in">
-      <main v-if="status.imgLoadStatus" id="main" @click="mainClick">
+      <main
+        v-if="status.imgLoadStatus"
+        tabindex="0"
+        id="main"
+        :class="`main-${status.siteStatus}`"
+        @click="status.setSiteStatus('normal')"
+        @contextmenu="mainContextmenu"
+        @keydown="mainPressKeyboard"
+      >
         <WeatherTime />
-        <SearchInp />
+        <SearchInp @contextmenu.stop />
+        <AllFunc @contextmenu.stop />
         <Footer />
+        <!-- 状态切换 -->
+        <Transition name="fade">
+          <div
+            v-show="
+              status.siteStatus !== 'focus' && status.siteStatus !== 'normal'
+            "
+            class="change-status"
+            :title="status.siteStatus !== 'set' ? '设置' : '首页'"
+            @click.stop="
+              status.setSiteStatus(
+                status.siteStatus !== 'set' ? 'set' : 'normal'
+              )
+            "
+          >
+            <Transition name="fade" mode="out-in">
+              <SvgIcon
+                :iconName="`icon-${
+                  status.siteStatus !== 'set' ? 'setting' : 'home'
+                }`"
+                :key="status.siteStatus !== 'set' ? 'setting' : 'home'"
+              />
+            </Transition>
+          </div>
+        </Transition>
         <!-- Notification -->
         <Notification />
       </main>
@@ -26,17 +59,19 @@ import { getGreeting } from "@/utils/timeTools";
 import Provider from "@/components/Provider.vue";
 import Cover from "@/components/Cover.vue";
 import WeatherTime from "@/components/WeatherTime.vue";
-import SearchInp from "@/components/SearchInp.vue";
+import SearchInp from "@/components/SearchInput/SearchInp.vue";
+import AllFunc from "@/components/AllFunc/AllFunc.vue";
 import Footer from "@/components/Footer.vue";
 
 const status = statusStore();
 
 // 获取配置
 const welcomeText = import.meta.env.VITE_WELCOME_TEXT ?? "欢迎访问本站";
 
-// 全局点击
-const mainClick = () => {
-  status.setSiteStatus("normal");
+// 鼠标右键
+const mainContextmenu = (event) => {
+  event.preventDefault();
+  status.setSiteStatus("box");
 };
 
 // 加载完成事件
@@ -48,6 +83,18 @@ const loadComplete = () => {
     });
   });
 };
+
+// 全局键盘事件
+const mainPressKeyboard = (event) => {
+  const keyCode = event.keyCode;
+  // 回车
+  if (keyCode === 13) {
+    // focus 元素
+    const mainInput = document.getElementById("main-input");
+    status.setSiteStatus("focus");
+    mainInput?.focus();
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -62,6 +109,53 @@ const loadComplete = () => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  &.main-normal,
+  &.main-focus {
+    .main-box {
+      opacity: 0;
+      margin-top: 0;
+      transform: scale(0.35);
+      pointer-events: none;
+    }
+  }
+  &.main-box,
+  &.main-set {
+    .main-box {
+      opacity: 1;
+      margin-top: 200px;
+      transform: scale(1);
+      visibility: visible;
+    }
+    .search-input {
+      :deep(.all) {
+        opacity: 0;
+        width: 0;
+        visibility: hidden;
+      }
+    }
+  }
+  .change-status {
+    cursor: pointer;
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    padding: 8px;
+    border-radius: 8px;
+    color: var(--main-text-color);
+    z-index: 1;
+    transition: opacity 0.3s, background-color 0.3s, transform 0.3s;
+    &:hover {
+      backdrop-filter: blur(20px);
+      background-color: var(--main-background-light-color);
+    }
+    &:active {
+      transform: scale(0.95);
+    }
+  }
 }
 #loading {
   color: var(--main-text-color);

diff --git a/src/components/AllFunc/AllBox.vue b/src/components/AllFunc/AllBox.vue
@@ -0,0 +1,12 @@
+<!-- 全局设置 -->
+<template>
+  <n-tabs class="func" size="large" justify-content="space-evenly" animated>
+    <n-tab-pane name="link" tab="捷径"> 即将完善 </n-tab-pane>
+    <n-tab-pane name="note" tab="便签"> 即将完善 </n-tab-pane>
+    <n-tab-pane name="more" tab="还能有啥"> 还能有啥呢 😢 </n-tab-pane>
+  </n-tabs>
+</template>
+
+<script setup>
+import { NTabs, NTabPane } from "naive-ui";
+</script>