Merge pull request #104 from hotlcc/develop-20240417-用户配置

dashboard配置支持保存入库

src/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
+import api from '@/api'
 import store from './store'
 
 
@@ -36,10 +37,30 @@ function startSSEMessager() {
   }
 }
 
+// 加载用户监控面板配置
+async function loadDashboardConfig() {
+  const response = await api.get('/user/config/Dashboard')
+  if (response && response.data && response.data.value) {
+      const data = JSON.stringify(response.data.value)
+      if (data != localStorage.getItem("MP_DASHBOARD")) {
+        localStorage.setItem("MP_DASHBOARD", data)
+      }
+    }
+}
+
+// 尝试加载用户监控面板配置（本地无配置时才加载）
+async function tryLoadDashboardConfig() {
+  if (localStorage.getItem("MP_DASHBOARD")) {
+    return
+  }
+  await loadDashboardConfig()
+}
+
 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
   setTheme()
   startSSEMessager()
+  await tryLoadDashboardConfig()
 })
 </script>
 

src/pages/dashboard.vue

@@ -9,6 +9,7 @@ import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
 import MediaServerLatest from '@/views/dashboard/MediaServerLatest.vue'
 import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
 import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
+import api from '@/api'
 
 // 仪表盘配置
 const dashboard_names = {
@@ -48,8 +49,15 @@ if (Object.keys(config.value).length === 0) {
 
 // 设置项目
 function setDashboardConfig() {
-  localStorage.setItem('MP_DASHBOARD', JSON.stringify(config.value))
+  const data = JSON.stringify(config.value)
+  localStorage.setItem('MP_DASHBOARD', data)
   dialog.value = false
+  // 保存到服务端
+  api.post('/user/config/Dashboard', data, {
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
 }
 </script>
 

src/pages/login.vue

@@ -66,6 +66,32 @@ async function fetchOTP() {
     })
 }
 
+// 加载用户监控面板配置
+async function loadDashboardConfig() {
+  const response = await api.get('/user/config/Dashboard')
+  if (response && response.data && response.data.value) {
+    const data = JSON.stringify(response.data.value)
+    if (data != localStorage.getItem("MP_DASHBOARD")) {
+      localStorage.setItem("MP_DASHBOARD", data)
+    }
+  }
+}
+
+// 尝试加载用户监控面板配置（本地无配置时才加载）
+async function tryLoadDashboardConfig() {
+  if (localStorage.getItem("MP_DASHBOARD")) {
+    return
+  }
+  await loadDashboardConfig()
+}
+
+async function afterLogin() {
+  // 尝试加载用户监控面板配置（本地无配置时才加载）
+  await tryLoadDashboardConfig()
+  // 跳转到首页或回原始页面
+  router.push(store.state.auth.originalPath ?? '/')
+}
+
 // 登录获取token事件
 function login() {
   errorMessage.value = ''
@@ -103,8 +129,7 @@ function login() {
       store.dispatch('auth/updateUserName', username)
       store.dispatch('auth/updateAvatar', avatar)
 
-      // 跳转到首页或回原始页面
-      router.push(store.state.auth.originalPath ?? '/')
+      afterLogin()
     })
     .catch((error: any) => {
       // 登录失败，显示错误提示