Merge pull request #52 from imsyy/dev

社交链接添加配置文件

.env

@@ -1,6 +1,7 @@
 # 站点名称
 VITE_SITE_NAME = "無名の主页"
 VITE_SITE_URL = "imsyy.top"
+VITE_SITE_LOGO = "/images/icon/logo.png"
 
 # 简介文本
 VITE_DESC_HELLO = "Hello World !"
@@ -9,17 +10,13 @@ VITE_DESC_HELLO_OTHER = "Oops !"
 VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关闭 ）"
 
 # 社交链接
-VITE_SOCIAL_GITHUB = "imsyy"
-VITE_SOCIAL_QQ = "1539250352"
-VITE_SOCIAL_EMAIL = "one@imsyy.top"
-VITE_SOCIAL_TELEGRAM = "bottom_user"
-VITE_SOCIAL_TWITTER = "iimmsyy"
+## 请在根目录下的 socialLinks.json 文件中配置
 
 # 网站链接
-## 请在 src/components/Links/index.vue 中设置
+## 请在 src/components/Links/index.vue 文件中配置
 
 # 天气 Key
-## 请前往高德开放平台注册 Web服务 Key
+## 请前往高德开放平台注册 Web服务 Key（免费的）
 ## 请各位大佬行行好，别再让我超量了
 VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
 

.hintrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/html": "off",
+    "no-protocol-relative-urls": "off"
+  }
+}

dev-dist/sw.js

@@ -1,92 +1 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  let registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-148cb7e5'], (function (workbox) { 'use strict';
-
-  self.skipWaiting();
-  workbox.clientsClaim();
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-  workbox.precacheAndRoute([{
-    "url": "registerSW.js",
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
-  }, {
-    "revision": null,
-    "url": "index.html"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-}));
+if(!self.define){let e,s={};const t=(t,i)=>(t=new URL(t+".js",i).href,s[t]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=t,e.onload=s,document.head.appendChild(e)}else e=t,importScripts(t),s()})).then((()=>{let e=s[t];if(!e)throw new Error(`Module ${t} didn’t register its module`);return e})));self.define=(i,n)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(s[o])return;let r={};const c=e=>t(e,o),l={module:{uri:o},exports:r,require:c};s[o]=Promise.all(i.map((e=>l[e]||c(e)))).then((e=>(n(...e),r)))}}define(["./workbox-082d0e8a"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"3ca0b8505b4bec776b69afdba2768812"},{revision:null,url:"index.html"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"),{allowlist:[/^\/$/]})),e.registerRoute(/(.*?)\.(js|css|woff2|woff|ttf)/,new e.CacheFirst({cacheName:"js-css-cache",plugins:[]}),"GET"),e.registerRoute(/(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/,new e.CacheFirst({cacheName:"image-cache",plugins:[]}),"GET")}));

index.html

@@ -23,6 +23,16 @@
       window.location.href =
       "https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href)
   </script>
+  <!-- 百度统计 -->
+  <script>
+    var _hmt = _hmt || [];
+    (function () {
+      var hm = document.createElement("script");
+      hm.src = "https://hm.baidu.com/hm.js?14e9f35ff8bc67fd4bcb5f07a6e6655a";
+      var s = document.getElementsByTagName("script")[0];
+      s.parentNode.insertBefore(hm, s);
+    })();
+  </script>
 </head>
 
 <body class="loading">

package.json

@@ -4,7 +4,7 @@
   "github": "https://github.com/imsyy/home",
   "home": "https://imsyy.top",
   "private": true,
-  "version": "4.0.0",
+  "version": "4.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

socialLinks.json

@@ -0,0 +1,26 @@
+[{
+    "name": "Github",
+    "icon": "/images/icon/github.png",
+    "tip": "去 Github 看看",
+    "url": "https://github.com/imsyy"
+}, {
+    "name": "BiliBili",
+    "icon": "/images/icon/bilibili.png",
+    "tip": "(゜-゜)つロ 干杯 ~",
+    "url": "https://space.bilibili.com/98544142"
+}, {
+    "name": "QQ",
+    "icon": "/images/icon/qq.png",
+    "tip": "有什么事吗",
+    "url": "https://wpa.qq.com/msgrd?v=3&uin=1539250352&site=qq&menu=yes"
+}, {
+    "name": "Email",
+    "icon": "/images/icon/email.png",
+    "tip": "来封 Email ~",
+    "url": "mailto:one@imsyy.top"
+}, {
+    "name": "Telegram",
+    "icon": "/images/icon/telegram.png",
+    "tip": "你懂的 ~",
+    "url": "https://twitter.com/iimmsyy"
+}]

src/api/index.js

@@ -36,3 +36,13 @@ export const getWeather = async (key, city) => {
     const res = await fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`);
     return await res.json();
 }
+
+/**
+ * 获取配置
+ */
+
+// 获取社交链接
+export const getSocialLinks = async () => {
+    const res = await fetch("/socialLinks.json");
+    return await res.json();
+}

src/components/Message/index.vue

@@ -3,7 +3,7 @@
   <div class="message">
     <!-- Logo -->
     <div class="logo">
-      <img class="logo-img" src="/images/icon/logo.png" alt="logo" />
+      <img class="logo-img" :src="siteLogo" alt="logo" />
       <div class="name">
         <span class="bg">{{ siteUrl[0] }}</span>
         <span class="sm">.{{ siteUrl[1] }}</span>
@@ -35,6 +35,8 @@ import { Error } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 const store = mainStore();
 
+// 主页站点logo
+let siteLogo = import.meta.env.VITE_SITE_LOGO;
 // 站点链接
 let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
 

src/components/SocialLinks/index.vue

@@ -3,58 +3,14 @@
   <div class="social">
     <div class="link">
       <a
-        id="github"
-        :href="socialLinks.github"
+        v-for="item in socialLinksData"
+        :key="item.name"
+        :href="item.url"
         target="_blank"
-        @mouseenter="changeTip"
-        @mouseleave="leaveTip"
+        @mouseenter="socialTip = item.tip"
+        @mouseleave="socialTip = '通过这里联系我吧'"
       >
-        <Icon size="24">
-          <Github />
-        </Icon>
-      </a>
-      <a
-        id="qq"
-        :href="socialLinks.qq"
-        target="_blank"
-        @mouseenter="changeTip"
-        @mouseleave="leaveTip"
-      >
-        <Icon size="24">
-          <Qq />
-        </Icon>
-      </a>
-      <a
-        id="email"
-        :href="socialLinks.email"
-        @mouseenter="changeTip"
-        @mouseleave="leaveTip"
-      >
-        <Icon size="28">
-          <EmailRound />
-        </Icon>
-      </a>
-      <a
-        id="telegram"
-        :href="socialLinks.telegram"
-        target="_blank"
-        @mouseenter="changeTip"
-        @mouseleave="leaveTip"
-      >
-        <Icon size="24">
-          <Telegram />
-        </Icon>
-      </a>
-      <a
-        id="twitter"
-        :href="socialLinks.twitter"
-        target="_blank"
-        @mouseenter="changeTip"
-        @mouseleave="leaveTip"
-      >
-        <Icon size="24">
-          <Twitter />
-        </Icon>
+        <img class="icon" :src="item.icon" height="24" />
       </a>
     </div>
     <span class="tip">{{ socialTip }}</span>
@@ -62,61 +18,37 @@
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
-import { Github, Qq, Telegram, Twitter } from "@vicons/fa";
-import { EmailRound } from "@vicons/material";
-import { Icon } from "@vicons/utils";
+import { ref, onMounted } from "vue";
+import { getSocialLinks } from "@/api";
+import { Error } from "@icon-park/vue-next";
 
 // 社交链接数据
-let socialHover = ref(false);
+let socialLinksData = ref([]);
 let socialTip = ref("通过这里联系我吧");
-let socialTipData = {
-  github: "去 Github 看看",
-  qq: "有什么事吗",
-  email: "来封 Email",
-  telegram: "你懂的 ~",
-  twitter: "你懂的 ~",
+
+// 获取社交链接数据
+const getSocialLinksData = () => {
+  getSocialLinks()
+    .then((res) => {
+      socialLinksData.value = res;
+      console.log(socialLinksData.value);
+    })
+    .catch((err) => {
+      console.error(err);
+      ElMessage({
+        message: "社交链接获取失败",
+        grouping: true,
+        icon: h(Error, {
+          theme: "filled",
+          fill: "#efefef",
+        }),
+      });
+    });
 };
 
-// 社交链接地址
-const socialLinks = reactive({
-  github: "https://github.com/" + import.meta.env.VITE_SOCIAL_GITHUB,
-  qq:
-    "https://wpa.qq.com/msgrd?v=3&uin=" +
-    import.meta.env.VITE_SOCIAL_QQ +
-    "&site=qq&menu=yes",
-  email: "mailto:" + import.meta.env.VITE_SOCIAL_EMAIL,
-  telegram: "https://t.me/" + import.meta.env.VITE_SOCIAL_TELEGRAM,
-  twitter: "https://twitter.com/" + import.meta.env.VITE_SOCIAL_TWITTER,
+onMounted(() => {
+  getSocialLinksData();
 });
-
-// 鼠标移入移出事件
-const changeTip = (e) => {
-  let tipKey = e.target.id;
-  switch (tipKey) {
-    case "github":
-      socialTip.value = socialTipData.github;
-      return true;
-    case "qq":
-      socialTip.value = socialTipData.qq;
-      return true;
-    case "email":
-      socialTip.value = socialTipData.email;
-      return true;
-    case "telegram":
-      socialTip.value = socialTipData.telegram;
-      return true;
-    case "twitter":
-      socialTip.value = socialTipData.twitter;
-      return true;
-    default:
-      return true;
-  }
-};
-
-const leaveTip = () => {
-  socialTip.value = "通过这里联系我吧";
-};
 </script>
 
 <style lang="scss" scoped>
@@ -151,8 +83,12 @@ const leaveTip = () => {
     justify-content: center;
     a {
       display: inherit;
-      span {
+      .icon {
         margin: 0 12px;
+        transition: all 0.3s;
+        &:active {
+          transform: scale(0.9);
+        }
       }
     }
   }

src/main.js

@@ -15,13 +15,3 @@ pinia.use(piniaPluginPersistedstate);
 
 app.use(pinia);
 app.mount('#app')
-
-// if ('serviceWorker' in navigator) {
-//     navigator.serviceWorker.register('/sw.js')
-//         .then(() => {
-//             console.log('Service worker registered.');
-//         })
-//         .catch(err => {
-//             console.log('Failed to register service worker: ', err);
-//         });
-// }