Align management UI with web design guide

frontend/src/views/Sessions.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <el-alert v-if="loadError" type="error" :closable="false" :title="loadError" class="session-error"><el-button size="small" @click="load">{{ $t('common.refresh') }}</el-button></el-alert>
     <!-- 在线会话 -->
     <el-card class="page-card" shadow="never" style="margin-bottom:16px">
       <template #header>
@@ -23,7 +24,7 @@
         <el-table-column :label="$t('sessions.connectedDuration')" width="120">
           <template #default="{ row }">{{ fmtDuration(row.connected_at) }}</template>
         </el-table-column>
-        <el-table-column :label="$t('common.traffic')" width="140">
+        <el-table-column :label="$t('common.traffic')" width="160" align="right" header-align="right">
           <template #default="{ row }">
             <span style="font-size:12px">{{ fmtBytes(row.rx_bytes) }} / {{ fmtBytes(row.tx_bytes) }}</span>
           </template>
@@ -89,6 +90,7 @@ const sessions = ref([])
 const logs = ref([])
 const alerts = ref([])
 const loading = ref(false)
+const loadError = ref('')
 
 function fmtDuration(dur) {
   if (!dur) return '-'
@@ -115,8 +117,9 @@ async function load() {
     sessions.value = s.data || []
     logs.value = l.data || []
     alerts.value = a.data || []
+    loadError.value = ''
   } catch (e) {
-    ElMessage.error(t('sessions.loadDataFailed'))
+    loadError.value = e.response?.data?.error || t('sessions.loadDataFailed')
   } finally { loading.value = false }
 }
 
@@ -133,3 +136,5 @@ let timer
 onMounted(() => { load(); timer = setInterval(load, 15000) })
 onUnmounted(() => clearInterval(timer))
 </script>
+
+<style scoped>.session-error { margin-bottom: var(--space-4); }</style>