feat: 新增底栏展示

.env

@@ -5,6 +5,7 @@ VITE_SITE_KEYWORDS = "Snavigation,导航,网站导航,主页,简约导航,起始
 VITE_SITE_DES = "一个简约的起始页，支持自定义搜索引擎，自定义快捷方式，自定义壁纸以及数据备份"
 VITE_SITE_LOGO = "/favicon.png"
 VITE_SITE_APPLE_LOGO = "/logo/logo.png"
+VITE_SITE_COPYRIGHTLINK = "https://github.com/imsyy/Snavigation"
 
 # 进入欢迎词
 VITE_WELCOME_TEXT = "欢迎访问本站"

src/App.vue

@@ -157,9 +157,12 @@ onMounted(() => {
   &.main-set {
     .main-box {
       opacity: 1;
-      margin-top: 220px;
+      margin-top: 20vh;
       transform: scale(1);
       visibility: visible;
+      @media (max-width: 478px) {
+        margin-top: 22vh;
+      }
     }
     .search-input {
       :deep(.all) {

src/components/AllFunc/AllFunc.vue

@@ -28,7 +28,7 @@ const status = statusStore();
 .main-box {
   position: absolute;
   width: 80%;
-  height: 460px;
+  height: 64vh;
   max-width: 1200px;
   background-color: var(--main-background-light-color);
   backdrop-filter: blur(20px);
@@ -40,7 +40,8 @@ const status = statusStore();
     overflow: hidden;
     height: 100%;
     :deep(.scrollbar) {
-      max-height: calc(460px - 84px);
+      max-height: calc(64vh - 84px);
+      transition: max-height 0.3s;
     }
     :deep(.set-item) {
       width: 100%;
@@ -97,14 +98,14 @@ const status = statusStore();
     height: 100%;
     :deep(.n-tab-pane) {
       .scrollbar {
-        max-height: calc(460px - 84px);
+        max-height: calc(64vh - 84px);
       }
       .not-shortcut {
-        min-height: calc(460px - 84px);
+        min-height: calc(64vh - 84px);
       }
       &.no-padding {
         .scrollbar {
-          max-height: calc(460px - 44px);
+          max-height: calc(64vh - 44px);
         }
       }
     }
@@ -116,5 +117,8 @@ const status = statusStore();
       max-height: calc(80vh - 84px);
     }
   }
+  @media (max-width: 478px) {
+    height: 60vh;
+  }
 }
 </style>

src/components/AllFunc/Box/ShortCut.vue

@@ -6,7 +6,7 @@
         <n-grid
           class="all-shortcut"
           responsive="screen"
-          cols="3 s:4 m:5 l:6"
+          cols="2 s:3 m:4 l:5"
           :x-gap="10"
           :y-gap="10"
         >
@@ -70,7 +70,8 @@
       <n-form-item label="捷径名称" path="name">
         <n-input
           clearable
-          type="text"
+          show-count
+          maxlength="14"
           v-model:value="addShortcutValue.name"
           placeholder="请输入捷径名称"
         />
@@ -78,7 +79,6 @@
       <n-form-item label="站点链接" path="url">
         <n-input
           clearable
-          type="text"
           v-model:value="addShortcutValue.url"
           placeholder="请输入站点链接"
         />

src/components/Footer.vue

@@ -1,7 +1,75 @@
 <template>
-  <footer id="footer">114514</footer>
+  <footer id="footer" @click.stop>
+    <div class="copyright">
+      <span class="site-name">{{ siteName }}</span>
+      <span class="year">{{ fullYear }}</span>
+      <span
+        class="anthor"
+        @click="jumpTo(copyrightLink ?? 'https://github.com/imsyy/Snavigation')"
+      >
+        {{ siteAnthor }}
+      </span>
+      <span v-if="icp" class="icp" @click="jumpTo('https://beian.miit.gov.cn')">
+        {{ icp }}
+      </span>
+      <span class="about" @click="aboutSiteModal = true">关于</span>
+    </div>
+    <!-- 关于 -->
+    <n-modal
+      preset="card"
+      :bordered="false"
+      v-model:show="aboutSiteModal"
+      transform-origin="center"
+    >
+      <div class="about-modal">
+        <div class="about">
+          <span class="name">{{ siteName }}</span>
+          <span class="version">v {{ packageJson.version }}</span>
+        </div>
+        <div class="desc">
+          <n-space class="link" justify="center">
+            <n-button
+              strong
+              secondary
+              @click="jumpTo('https://github.com/imsyy/Snavigation')"
+            >
+              Github
+            </n-button>
+          </n-space>
+        </div>
+      </div>
+    </n-modal>
+  </footer>
 </template>
 
+<script setup>
+import { ref } from "vue";
+import { setStore } from "@/stores";
+import { NModal, NButton, NSpace } from "naive-ui";
+import packageJson from "@/../package.json";
+
+const set = setStore();
+
+// 站点数据
+const icp = import.meta.env.VITE_ICP;
+const siteName = import.meta.env.VITE_SITE_TITLE;
+const siteAnthor = import.meta.env.VITE_SITE_ANTHOR;
+const copyrightLink = import.meta.env.VITE_SITE_COPYRIGHTLINK;
+const fullYear = new Date().getFullYear();
+
+// 关于弹窗数据
+const aboutSiteModal = ref(false);
+
+// 跳转
+const jumpTo = (url) => {
+  if (set.urlJumpType === "href") {
+    window.location.href = url;
+  } else if (set.urlJumpType === "open") {
+    window.open(url, "_blank");
+  }
+};
+</script>
+
 <style lang="scss" scoped>
 #footer {
   position: absolute;
@@ -9,10 +77,71 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 60px;
+  height: 50px;
   width: 100%;
-  font-size: 14px;
   color: var(--main-text-color);
   z-index: 1;
+  .copyright {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    span {
+      margin: 0 2px;
+      opacity: 0.6;
+      transition: opacity 0.3s;
+      &::before {
+        opacity: 0.6;
+        transition: none;
+      }
+    }
+    .year {
+      &::before {
+        content: "@";
+        opacity: 1;
+        margin-right: 4px;
+      }
+    }
+    .icp {
+      &::before {
+        content: "|";
+        margin-right: 4px;
+      }
+    }
+    .about {
+      &::before {
+        content: "|";
+        margin-right: 4px;
+      }
+    }
+    .anthor,
+    .icp,
+    .about {
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+.about-modal {
+  margin-bottom: 10px;
+  .about {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    .name {
+      font-size: 26px;
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+    .version {
+      opacity: 0.6;
+      font-size: 16px;
+    }
+  }
+  .desc {
+    margin-top: 20px;
+  }
 }
 </style>

src/components/SearchInput/SearchEngine.vue

@@ -47,7 +47,6 @@
           <n-form-item label="自定义搜索引擎地址" path="url">
             <n-input
               clearable
-              type="text"
               v-model:value="customEngineValue.url"
               placeholder="请输入自定义搜索引擎地址"
             />

src/components/SearchInput/SearchInp.vue

@@ -225,7 +225,6 @@ const changeEngine = () => {
       &::placeholder {
         width: 100%;
         text-align: center;
-        transform: translateY(1px);
         color: var(--main-text-color);
         letter-spacing: 2px;
         transition: opacity 0.3s;
@@ -251,7 +250,7 @@ const changeEngine = () => {
     }
   }
   &.small {
-    width: 240px;
+    width: 260px;
     .all {
       .engine,
       .go {
@@ -259,7 +258,7 @@ const changeEngine = () => {
       }
       .input {
         &::placeholder {
-          opacity: 0.3;
+          opacity: 0.6;
         }
       }
       &.focus {
@@ -270,7 +269,7 @@ const changeEngine = () => {
       }
     }
     &:hover {
-      width: calc(100% - 60px);
+      // width: calc(100% - 60px);
       .all {
         .input {
           &::placeholder {

src/components/WeatherTime.vue

@@ -221,13 +221,19 @@ onBeforeUnmount(() => {
 
   &.focus {
     transform: translateY(-180px);
+    // transform: translateY(-24vh);
   }
   &.box,
   &.set {
-    transform: translateY(-220px);
+    // transform: translateY(-220px);
+    transform: translateY(-34vh);
+    @media (max-width: 478px) {
+      transform: translateY(-32vh);
+    }
   }
   &.hidden {
     transform: translateY(-180px);
+    // transform: translateY(-24vh);
     opacity: 0;
   }
   &.lunar {