feat(布局): 添加页面刷新功能并优化用户下拉菜单样式

- 在布局头部添加刷新按钮，通过emit触发页面刷新
- 优化用户下拉菜单的DOM结构和样式
- 调整设备详情页统计信息标题和雷达图最小宽度
- 为RouterView添加key属性实现强制刷新

src/App.vue

@@ -1,10 +1,11 @@
 <template>
   <a-config-provider :locale="locale" :auto-insert-space-in-button="false">
-    <RouterView v-if="isRouterReady">
+    <RouterView v-if="isRouterReady" :key="routerKey">
       <template #default="{ Component, route }">
         <component
           :is="isFullScreen ? Component : BaseLayout"
           v-bind="isFullScreen ? {} : { content: Component }"
+          v-on="isFullScreen ? {} : { refresh: refreshPage }"
         >
           <keep-alive>
             <component
@@ -39,6 +40,7 @@ const locale = zhCN
 const route = useRoute()
 const router = useRouter()
 const isRouterReady = ref(false)
+const routerKey = ref(Date.now())
 
 onMounted(() => {
   router.isReady().then(() => {
@@ -53,6 +55,11 @@ onMounted(() => {
 
 const isFullScreen = computed(() => Boolean(route.meta?.isFullScreen))
 console.log('🚀App route🚀', route)
+
+// 刷新页面
+const refreshPage = () => {
+  routerKey.value = Date.now()
+}
 </script>
 
 <style scoped lang="less"></style>

src/layout/components/userDropdown/index.vue

@@ -1,23 +1,21 @@
 <template>
-  <div class="userDropdown">
-    <a-dropdown>
-      <span class="avatar">
-        <a-avatar>
-          <template #icon>
-            <UserOutlined />
-          </template>
-        </a-avatar>
-        <span class="username"> {{ account }} </span>
-      </span>
-      <template #overlay>
-        <a-menu>
-          <a-menu-item>
-            <a href="javascript:;" @click="logout">退出登录</a>
-          </a-menu-item>
-        </a-menu>
-      </template>
-    </a-dropdown>
-  </div>
+  <a-dropdown class="userDropdown">
+    <div class="avatar">
+      <a-avatar>
+        <template #icon>
+          <UserOutlined />
+        </template>
+      </a-avatar>
+      <span class="username"> {{ account }} </span>
+    </div>
+    <template #overlay>
+      <a-menu>
+        <a-menu-item>
+          <a href="javascript:;" @click="logout">退出登录</a>
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
 </template>
 
 <script setup lang="ts">
@@ -40,19 +38,19 @@ const logout = async () => {
 </script>
 
 <style scoped lang="less">
-.avatar {
-  display: inline-block;
-}
-.username {
-  display: inline-block;
-  margin-left: 10px;
-  font-size: 16px;
-  font-weight: 600;
-}
 .userDropdown {
   cursor: pointer;
-  .ant-dropdown-trigger {
-    display: block;
+  display: flex;
+  align-items: center;
+
+  .avatar {
+    display: inline-block;
+  }
+  .username {
+    display: inline-block;
+    margin-left: 10px;
+    font-size: 16px;
+    font-weight: 600;
   }
 }
 </style>

src/layout/index.vue

@@ -27,6 +27,7 @@
         <slot name="header">
           <base-weather class="weather" mode="text"></base-weather>
           <time-now class="timeNow"></time-now>
+          <SyncOutlined class="refresh" @click="refresh" />
           <user-dropdown class="userDropdown"></user-dropdown>
         </slot>
       </a-layout-header>
@@ -76,13 +77,19 @@ import type { Route } from 'ant-design-vue/es/breadcrumb/Breadcrumb'
 import mqtt, { MqttClient } from 'mqtt'
 import { useUserStore } from '@/stores/user'
 import AlertModal from './components/alertModal/index.vue'
-import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import { ArrowLeftOutlined, SyncOutlined } from '@ant-design/icons-vue'
 
 const userStore = useUserStore()
 const userId = ref(userStore?.userInfo?.userId || '')
 const version = __APP_VERSION__
 // const buildTime = __BUILD_TIME__
 
+const emit = defineEmits(['refresh'])
+// 刷新
+const refresh = () => {
+  emit('refresh')
+}
+
 let mqttClient: MqttClient | null = null
 // let mqttTimeout: number | null = null
 // const MQTT_TIMEOUT_MS = 10000 // 10秒
@@ -415,6 +422,12 @@ const backHandler = async () => {
     position: sticky;
     top: 0;
     z-index: 1000;
+
+    .refresh {
+      margin-right: 14px;
+      font-size: 18px;
+      font-weight: 600;
+    }
   }
   .ant-layout-content {
     margin: 16px;

src/views/device/detail/index.vue

@@ -139,7 +139,7 @@
       <deviceStatsDrawer
         v-model:open="statsDrawerOpen"
         :dev-id="`${detailState.devId as string}`"
-        :title="`${detailState.devName} 统计信息`"
+        :title="`${detailState.devName || ''} 统计信息`"
       ></deviceStatsDrawer>
     </div>
   </a-spin>
@@ -433,7 +433,7 @@ onUnmounted(() => {
   .radarMap {
     flex-shrink: 0;
     margin-right: 16px;
-    min-width: 400px;
+    min-width: 430px;
     min-height: 400px;
     background-color: #f5f5f5;
     border-radius: 10px;