feat: 页脚增加一言显示，天气左侧添加城市信息

src/api/index.js

@@ -34,3 +34,14 @@ export const getSearchSuggestions = async (keyWord) => {
     return null;
   }
 };
+
+/**
+ * 获取一言文案
+ * https://developer.hitokoto.cn/
+ */
+export const getHitokoto = () => {
+  return axios({
+    method: "GET",
+    url: "https://v1.hitokoto.cn",
+  });
+};

src/components/Footer.vue

@@ -1,5 +1,8 @@
 <template>
   <footer id="footer" @click.stop>
+    <div v-if="hitokotoShow" class="hitokoto">
+      {{ hitokotoData }}
+    </div>
     <div class="copyright">
       <span class="site-name">{{ siteName }}</span>
       <span class="year">{{ fullYear }}</span>
@@ -43,10 +46,11 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { setStore } from "@/stores";
 import { NModal, NButton, NSpace } from "naive-ui";
 import packageJson from "@/../package.json";
+import { getHitokoto } from "@/api";
 
 const set = setStore();
 
@@ -60,6 +64,10 @@ const fullYear = new Date().getFullYear();
 // 关于弹窗数据
 const aboutSiteModal = ref(false);
 
+// 一言显示 和 数据
+const hitokotoShow = ref(false);
+const hitokotoData = ref("");
+
 // 跳转
 const jumpTo = (url) => {
   if (set.urlJumpType === "href") {
@@ -68,22 +76,47 @@ const jumpTo = (url) => {
     window.open(url, "_blank");
   }
 };
+
+// 获取天气数据
+const getHitokotoData = () => {
+  getHitokoto()
+    .then((res) => {
+      hitokotoData.value = "[ " + res.hitokoto.substr(0, res.hitokoto.length - 1) + " ]";
+      hitokotoShow.value = true;
+    })
+    .catch((error) => {
+      console.error("一言获取失败：" + error);
+      $message.warning("一言获取失败", {
+        duration: 1500,
+      });
+    });
+};
+
+onMounted(() => {
+  // 获取一言数据
+  getHitokotoData();
+});
 </script>
 
 <style lang="scss" scoped>
 #footer {
   position: absolute;
-  display: flex;
   align-items: center;
   justify-content: center;
   bottom: 0;
   height: 50px;
   width: 100%;
   color: var(--main-text-color);
   z-index: 1;
+  .hitokoto{
+    display: flex;
+    justify-content: center;
+    opacity: 0.6;
+  }
   .copyright {
     display: flex;
     align-items: center;
+    justify-content: center;
     font-size: 13px;
     span {
       margin: 0 2px;

src/components/WeatherTime.vue

@@ -47,6 +47,7 @@
       <span class="weekday">{{ timeData.weekday ?? "星期八" }}</span>
     </div>
     <div v-if="weatherShow && set.showWeather" class="weather">
+      <span>{{ cityName ?? "N/A"}}&nbsp;</span>
       <span class="status">{{ weatherData.condition ?? "N/A" }}</span>
       <span class="temperature">{{ weatherData.temp ?? "N/A" }} ℃</span>
       <span class="wind">{{ weatherData.windDir ?? "N/A" }}</span>
@@ -73,6 +74,7 @@ const timeInterval = ref(null);
 // 天气数据
 const weatherShow = ref(true);
 const weatherData = ref({});
+const cityName = ref("");
 
 // 更新时间
 const updateTimeData = () => {
@@ -96,7 +98,9 @@ const getWeatherData = () => {
       .then((res) => {
         console.log(res);
         weatherData.value = res.result.condition;
+        cityName.value = res.result.city.city_name;
         lastWeatherData = {
+          cityName: res.result.city.city_name,
           data: res.result.condition,
           lastFetchTime: currentTime,
         };
@@ -116,6 +120,7 @@ const getWeatherData = () => {
   } else {
     console.log("从缓存中读取天气数据");
     weatherData.value = lastWeatherData.data;
+    cityName.value = lastWeatherData.cityName;
   }
 };