feat: 适配天气 API #162 #151

.env

@@ -28,6 +28,7 @@ VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关
 ## 请前往 高德开放平台注册 Web服务 Key
 ## 请注意不是 Web端 (JS API)，免费申请，每日上限 5000 次
 ## 此处提供的服务可能会超量从而无法访问，请自行申请！请自行申请！请自行申请！
+## 若此处设为空则调用 教书先生 API https://api.oioweb.cn/doc/weather/GetWeather
 VITE_WEATHER_KEY = "6c13af6fc30868bee488faf2cc652ab4"
 
 # 建站日期

package.json

@@ -4,7 +4,7 @@
   "github": "https://github.com/imsyy/home",
   "home": "https://imsyy.top",
   "private": true,
-  "version": "4.0.4",
+  "version": "4.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
@@ -33,7 +33,7 @@
     "unplugin-auto-import": "^0.11.2",
     "unplugin-vue-components": "^0.22.8",
     "vite": "^3.1.0",
-    "vite-plugin-html": "^3.0.6",
+    "vite-plugin-html": "^3.2.0",
     "vite-plugin-pwa": "^0.14.1"
   }
 }

pnpm-lock.yaml

@@ -65,8 +65,8 @@ devDependencies:
     specifier: ^3.1.0
     version: 3.1.0(sass@1.55.0)(terser@5.16.1)
   vite-plugin-html:
-    specifier: ^3.0.6
+    specifier: ^3.2.0
-    version: 3.0.6(vite@3.1.0)
+    version: 3.2.0(vite@3.1.0)
   vite-plugin-pwa:
     specifier: ^0.14.1
     version: 0.14.1(vite@3.1.0)(workbox-build@6.6.0)(workbox-window@6.6.0)
@@ -2890,7 +2890,7 @@ packages:
       he: 1.2.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.16.1
+      terser: 5.18.1
     dev: true
 
   /idb@7.1.1:
@@ -3563,7 +3563,7 @@ packages:
       jest-worker: 26.6.2
       rollup: 2.79.1
       serialize-javascript: 4.0.0
-      terser: 5.16.1
+      terser: 5.18.1
     dev: true
 
   /rollup@2.78.1:
@@ -3841,7 +3841,6 @@ packages:
       acorn: 8.9.0
       commander: 2.20.3
       source-map-support: 0.5.21
-    dev: false
 
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
@@ -4011,8 +4010,8 @@ packages:
     dependencies:
       punycode: 2.3.0
 
-  /vite-plugin-html@3.0.6(vite@3.1.0):
+  /vite-plugin-html@3.2.0(vite@3.1.0):
-    resolution: {integrity: sha512-B6ZAufvqUqdfPhcV+El8NNI3qV0d3ZntIur2UnP4tcHBV/O2d+6wHF79bJWuqR4WsvmsV7dejCNS3rAYFCisWw==}
+    resolution: {integrity: sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==}
     peerDependencies:
       vite: '>=2.0.0'
     dependencies:

public/loading/loading.css

@@ -6,7 +6,7 @@
 #loading-box .loading-left-bg,
 #loading-box .loading-right-bg {
   position: fixed;
-    z-index: 999998;
+  z-index: 999;
   width: 50%;
   height: 100%;
   background-color: #515151e0;
@@ -84,21 +84,30 @@
   left: 0%;
   top: 0%;
   animation: rotate-one 1s linear infinite;
-    border-bottom: 3px solid #EFEFFA;
+  border-bottom: 3px solid #efeffa;
 }
 
 .inner.two {
   right: 0%;
   top: 0%;
   animation: rotate-two 1s linear infinite;
-    border-right: 3px solid #EFEFFA;
+  border-right: 3px solid #efeffa;
 }
 
 .inner.three {
   right: 0%;
   bottom: 0%;
   animation: rotate-three 1s linear infinite;
-    border-top: 3px solid #EFEFFA;
+  border-top: 3px solid #efeffa;
+}
+
+noscript {
+  z-index: 1000;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 26px;
 }
 
 @keyframes rotate-one {

public/loading/loading.min.css

@@ -1 +1 @@
-*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999998;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
+*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}noscript{z-index:1000;position:absolute;display:flex;justify-content:center;width:100%;margin-top:26px}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}

src/App.vue

@@ -83,11 +83,10 @@ onMounted(() => {
   window.addEventListener("mousedown", (event) => {
     if (event.button == 1) {
       store.backgroundShow = !store.backgroundShow;
-      if (store.backgroundShow) {
+      ElMessage({
-        ElMessage("已开启壁纸展示状态");
+        message: `已${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`,
-      } else {
+        grouping: true,
-        ElMessage("已退出壁纸展示状态");
+      });
-      }
     }
   });
 
@@ -96,18 +95,19 @@ onMounted(() => {
   window.addEventListener("resize", getWidth);
 
   // 控制台输出
-  let styleTitle1 = "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
+  const styleTitle1 =
-  let styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
+    "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
-  let styleContent = "color: rgb(30,152,255);";
+  const styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
-  let title1 = "無名の主页";
+  const styleContent = "color: rgb(30,152,255);";
-  let title2 = `
+  const title1 = "無名の主页";
+  const title2 = `
  _____ __  __  _______     ____     __
 |_   _|  \\/  |/ ____\\ \\   / /\\ \\   / /
   | | | \\  / | (___  \\ \\_/ /  \\ \\_/ /
   | | | |\\/| |\\___ \\  \\   /    \\   /
  _| |_| |  | |____) |  | |      | |
 |_____|_|  |_|_____/   |_|      |_|`;
-  let content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
+  const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
   console.info(
     `%c${title1} %c${title2} %c${content}`,
     styleTitle1,

src/api/index.js

@@ -67,3 +67,10 @@ export const getWeather = async (key, city) => {
   );
   return await res.json();
 };
+
+// 获取教书先生天气 API
+// https://api.oioweb.cn/doc/weather/GetWeather
+export const getOtherWeather = async () => {
+  const res = await fetch("https://api.oioweb.cn/api/weather/GetWeather");
+  return await res.json();
+};

src/components/Weather/index.vue

@@ -6,7 +6,13 @@
     <span>{{ weatherData.adCode.city }}&nbsp;</span>
     <span>{{ weatherData.weather.weather }}&nbsp;</span>
     <span>{{ weatherData.weather.temperature }}℃</span>
-    <span class="sm-hidden">&nbsp;{{ weatherData.weather.winddirection }}风&nbsp;</span>
+    <span class="sm-hidden">
+      &nbsp;{{
+        weatherData.weather.winddirection?.endsWith("风")
+          ? weatherData.weather.winddirection
+          : weatherData.weather.winddirection + "风"
+      }}&nbsp;
+    </span>
     <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
   </div>
   <div class="weather" v-else>
@@ -16,7 +22,7 @@
 
 <script setup>
 import { onMounted, reactive, h } from "vue";
-import { getAdcode, getWeather } from "@/api";
+import { getAdcode, getWeather, getOtherWeather } from "@/api";
 import { Error } from "@icon-park/vue-next";
 
 // 高德开发者 Key
@@ -39,10 +45,29 @@ const weatherData = reactive({
 // 获取天气数据
 const getWeatherData = () => {
   // 获取地理位置信息
-  if (!mainKey) return onError("请配置天气 Key");
+  if (!mainKey) {
+    getOtherWeather()
+      .then((res) => {
+        console.log(res);
+        const data = res.result;
+        weatherData.adCode = {
+          city: data.city.name,
+          adcode: data.city.cityId,
+        };
+        weatherData.weather = {
+          weather: data.condition.condition,
+          temperature: data.condition.temp,
+          winddirection: data.condition.windDir,
+          windpower: data.condition.windLevel,
+        };
+      })
+      .catch((err) => {
+        console.error("天气信息获取失败:" + err);
+        onError("天气信息获取失败");
+      });
+  } else {
     getAdcode(mainKey)
       .then((res) => {
-      if (res.status) {
         weatherData.adCode = {
           city: res.city,
           adcode: res.adcode,
@@ -50,33 +75,29 @@ const getWeatherData = () => {
         // 获取天气信息
         getWeather(mainKey, weatherData.adCode.adcode)
           .then((res) => {
-            if (res.status) {
             weatherData.weather = {
               weather: res.lives[0].weather,
               temperature: res.lives[0].temperature,
               winddirection: res.lives[0].winddirection,
               windpower: res.lives[0].windpower,
             };
-            } else {
-              onError("天气信息获取失败");
-            }
           })
-          .catch(() => {
+          .catch((err) => {
+            console.error("天气信息获取失败:" + err);
             onError("天气信息获取失败");
           });
-      } else {
-        onError("地理位置获取失败");
-      }
       })
-    .catch(() => {
+      .catch((err) => {
+        console.error("地理位置获取失败:" + err);
         onError("地理位置获取失败");
       });
+  }
 };
 
 // 报错信息
 const onError = (message) => {
   ElMessage({
-    message: message,
+    message,
     icon: h(Error, {
       theme: "filled",
       fill: "#efefef",

vite.config.js

@@ -32,7 +32,6 @@ export default ({
     }),
     createHtmlPlugin({
       minify: true,
-      template: 'index.html',
       inject: {
         data: {
           logo: loadEnv(mode, process.cwd()).VITE_SITE_LOGO,