🐞 fix: 天气 API 切换至高德 #32

- 修复捷径无法添加 ip 地址 #31

.env

@@ -16,3 +16,9 @@ VITE_INPUT_TIP = "想要搜点什么"
 # ICP 备案号
 ## 若不需要，请设为空即可
 VITE_ICP = "豫ICP备2022018134号-1"
+
+# 天气 Key
+## 请前往 高德开放平台注册 Web服务 Key
+## 请注意不是 Web端 (JS API)，免费申请，每日上限 5000 次
+## 此处提供的服务可能会超量从而无法访问，请自行申请！请自行申请！请自行申请！
+VITE_WEATHER_KEY = "6c13af6fc30868bee488faf2cc652ab4"

src/api/index.js

@@ -3,12 +3,23 @@ import fetchJsonp from "fetch-jsonp";
 
 /**
  * 获取天气
- * https://api.oioweb.cn/doc/weather/GetWeather
+ * https://lbs.amap.com/api/webservice/guide/api/weatherinfo
  */
-export const getWeather = () => {
+// 获取高德地理位置信息
+export const getAdcode = async (key) => {
   return axios({
     method: "GET",
-    url: "https://api.oioweb.cn/api/weather/GetWeather",
+    url: "https://restapi.amap.com/v3/ip",
+    params: { key },
+  });
+};
+
+// 获取高德地理天气信息
+export const getWeather = async (key, city) => {
+  return axios({
+    method: "GET",
+    url: "https://restapi.amap.com/v3/weather/weatherInfo",
+    params: { key, city, extensions: "base" },
   });
 };
 

src/components/WeatherTime.vue

@@ -42,11 +42,11 @@
       <span class="day">{{ timeData.day ?? "0" }}</span>
       <span class="weekday">{{ timeData.weekday ?? "星期八" }}</span>
     </div>
-    <div v-if="weatherShow && set.showWeather" class="weather">
+    <div v-if="set.showWeather" class="weather">
-      <span class="status">{{ weatherData.condition ?? "N/A" }}</span>
+      <span class="status">{{ weatherData?.condition ?? "N/A" }}</span>
-      <span class="temperature">{{ weatherData.temp ?? "N/A" }} ℃</span>
+      <span class="temperature">{{ weatherData?.temp ?? "N/A" }} ℃</span>
-      <span class="wind">{{ weatherData.windDir ?? "N/A" }}</span>
+      <span class="wind">{{ weatherData?.windDir ?? "N/A" }}</span>
-      <span v-if="weatherData.windLevel" class="wind-level"> {{ weatherData.windLevel }} 级 </span>
+      <span v-if="weatherData?.windLevel" class="wind-level"> {{ weatherData.windLevel }} 级 </span>
     </div>
   </div>
 </template>
@@ -55,7 +55,7 @@
 import { getCurrentTime } from "@/utils/timeTools";
 import { ref, onMounted, onBeforeUnmount, watch } from "vue";
 import { statusStore, setStore } from "@/stores";
-import { getWeather } from "@/api";
+import { getAdcode, getWeather } from "@/api";
 
 const set = setStore();
 const status = statusStore();
@@ -65,8 +65,8 @@ const timeData = ref({});
 const timeInterval = ref(null);
 
 // 天气数据
-const weatherShow = ref(true);
+const weatherData = ref(null);
-const weatherData = ref({});
+const weatherKey = import.meta.env.VITE_WEATHER_KEY;
 
 // 更新时间
 const updateTimeData = () => {
@@ -74,7 +74,10 @@ const updateTimeData = () => {
 };
 
 // 获取天气数据
-const getWeatherData = () => {
+const getWeatherData = async () => {
+  if (!weatherKey) {
+    return $message.warning("请配置天气 Key");
+  }
   // 当前时间戳
   const currentTime = Date.now();
   // 上次获取天气数据的数据
@@ -84,28 +87,29 @@ const getWeatherData = () => {
   };
   // 上次获取天气数据的时间戳与当前时间的时间差（毫秒）
   const timeDifference = currentTime - lastWeatherData.lastFetchTime;
-  // 是否超出 2 分钟
+  // 是否超出 5 分钟
-  if (timeDifference >= 2 * 60 * 1000) {
+  if (timeDifference >= 5 * 60 * 1000) {
-    getWeather()
+    const adCodeResult = await getAdcode(weatherKey);
-      .then((res) => {
+    if (adCodeResult.infocode !== "10000") {
-        console.log(res);
+      return $message.error("地区查询失败");
-        weatherData.value = res.result.condition;
+    }
-        lastWeatherData = {
+    // 获取天气数据
-          data: res.result.condition,
+    const weatherResult = await getWeather(weatherKey, adCodeResult.adcode);
-          lastFetchTime: currentTime,
+    if (weatherResult.infocode !== "10000") {
-        };
+      return $message.error("地区查询失败");
-        // 将新的天气数据和时间戳存储到 localStorage 中
+    }
-        localStorage.setItem("lastWeatherData", JSON.stringify(lastWeatherData));
+    const data = weatherResult.lives[0];
-      })
+    weatherData.value = {
-      .catch((error) => {
+      condition: data.weather,
-        console.error("天气获取失败：" + error);
+      temp: data.temperature,
-        $message.warning("天气获取失败", {
+      windDir: data.winddirection + "风",
-          duration: 1500,
+      windLevel: data.windpower,
-        });
+    };
-        weatherShow.value = false;
+    lastWeatherData = { data: weatherData.value, lastFetchTime: currentTime };
-      });
+    // 储存新天气数据
+    localStorage.setItem("lastWeatherData", JSON.stringify(lastWeatherData));
   } else {
-    console.log("从缓存中读取天气数据");
+    console.log("从缓存中读取天气数据：", lastWeatherData);
     weatherData.value = lastWeatherData.data;
   }
 };

src/utils/identifyInput.js

@@ -10,7 +10,7 @@ const identifyInput = (input) => {
    * @type {RegExp}
    */
   const urlRegex =
-    /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
+    /^(?:(?:(?:https?|ftp):)?\/\/)?(?:\d{1,3}(?:\.\d{1,3}){3}|[a-z0-9-]+\.[a-z]{2,})(?::\d+)?(?:\/[^?\s]*)?$/i;
 
   const ipv4Regex =
     /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;