添加高德天气及日期时间

src/api/dashboard/weatherApi.ts

@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+const AMAP_API_KEY = '293e33e7459080855866ed525e7a9d39';
+
+// 创建一个axios实例
+const axiosInstance = axios.create();
+
+// 添加请求拦截器，移除clientid头
+axiosInstance.interceptors.request.use(
+  (config) => {
+    if (config.headers.clientid) {
+      delete config.headers.clientid;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+});
+
+export const getWeather = async (city: string) => {
+  const url = `https://restapi.amap.com/v3/weather/weatherInfo`;
+  const params = {
+    key: AMAP_API_KEY,
+    city,
+    extensions: 'base'
+  };
+
+  try {
+    const response = await axiosInstance.get(url, { params });
+    return response.data;
+  } catch (error) {
+    console.error('获取天气数据出错:', error);
+    throw error;
+  }
+};

src/components/HeaderSection/index.vue

@@ -8,6 +8,19 @@
     </div>
     <div class="header-right">
       <el-input class="custom-input" placeholder="请输入" :suffix-icon="Search" />
+      <div v-if="weatherInfo" class="weather-info">
+        <p>{{ currentDate }}</p>
+        <p>
+          <span>{{ weatherInfo.city }}</span>
+          <span class="weather-separator"></span>
+          <span>{{ weatherInfo.weather }}</span>
+          <span class="weather-separator"></span>
+          <span>{{ weatherInfo.temperature }}°C</span>
+        </p>
+      </div>
+      <div v-else>
+        <p>加载...</p>
+      </div>
       <div class="avatar-container">
         <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
           <div class="avatar-wrapper">
@@ -32,7 +45,9 @@
 <script lang="ts" setup>
 import useUserStore from '@/store/modules/user';
 import useSettingsStore from '@/store/modules/settings';
-import { Search } from '@element-plus/icons-vue'
+import { Search } from '@element-plus/icons-vue';
+import { getWeather } from '@/api/dashboard/weatherApi';
+import { onMounted } from 'vue';
 
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
@@ -62,6 +77,41 @@ const handleCommand = (command: string) => {
     commandMap[command]();
   }
 };
+
+// 获取天气
+const weatherInfo = ref<any>(null);
+const fetchWeather = async () => {
+  try {
+    const data = await getWeather('440900'); // 替换为实际城市代码
+    if (data.status === '1' && data.lives && data.lives.length > 0) {
+      weatherInfo.value = data.lives[0];
+    } else {
+      console.error('无法获取天气数据');
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+};
+
+// 获取当前日期
+const currentDate = ref<string>(new Date().toLocaleDateString());
+const updateCurrentDate = () => {
+  currentDate.value = new Date().toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
+};
+
+onMounted(() => {
+  fetchWeather();
+  updateCurrentDate();
+  setInterval(updateCurrentDate, 1000); // 每秒更新一次
+});
 </script>
 
 <style lang="scss" scoped>
@@ -95,6 +145,20 @@ const handleCommand = (command: string) => {
 .header-right {
   display: flex;
   align-items: center;
+  .weather-info {
+    margin-left: 20px;
+    font-size: 50px;
+    line-height: 1.2;
+    p {
+      margin: 0;
+      display: flex;
+      align-items: center;
+    }
+    .weather-separator {
+      display: inline-block;
+      width: 80px;
+    }
+  }
   .avatar-container {
     margin-left: 138px;
     .avatar-wrapper {