Align management UI with web design guide

frontend/src/views/ClientDevices.vue

@@ -8,16 +8,17 @@
             {{ $t('clientDevices.hint') }}
           </span>
         </div>
-        <el-button :icon="Refresh" circle :loading="loading" @click="load" />
+        <el-button :icon="Refresh" circle :loading="loading" :aria-label="$t('common.refresh')" @click="load" />
       </div>
     </template>
-    <el-table :data="devices" size="small" v-loading="loading">
+    <el-alert v-if="loadError" type="error" :closable="false" :title="loadError" class="load-error"><el-button size="small" @click="load">{{ $t('common.refresh') }}</el-button></el-alert>
+    <el-table :data="devices" size="default" v-loading="loading">
       <el-table-column prop="username" :label="$t('common.username')" width="140" />
       <el-table-column prop="name" :label="$t('clientDevices.deviceName')" min-width="150" />
       <el-table-column prop="platform" :label="$t('clientDevices.platform')" width="100" />
       <el-table-column prop="tunnel_name" :label="$t('clientDevices.tunnel')" min-width="140" />
       <el-table-column prop="client_address" :label="$t('clientDevices.address')" width="130" />
-      <el-table-column :label="$t('common.traffic')" width="170">
+      <el-table-column :label="$t('common.traffic')" width="170" align="right" header-align="right">
         <template #default="{ row }">{{ fmtBytes(row.rx_bytes) }} / {{ fmtBytes(row.tx_bytes) }}</template>
       </el-table-column>
       <el-table-column :label="$t('clientDevices.lastHandshake')" width="170">
@@ -40,7 +41,7 @@
           <span v-else style="color:#c0c4cc">—</span>
         </template>
       </el-table-column>
-      <template #empty>{{ $t('clientDevices.empty') }}</template>
+      <template #empty><el-empty :description="$t('clientDevices.empty')" /></template>
     </el-table>
   </el-card>
 </template>
@@ -56,22 +57,29 @@ import { fmtBytes } from '../utils/format'
 const { t } = useI18n()
 const devices = ref([])
 const loading = ref(false)
+const loadError = ref('')
 
 async function load() {
   loading.value = true
   try {
     const { data } = await api.get('/client-devices')
     devices.value = data.devices || []
+    loadError.value = ''
+  } catch (e) {
+    loadError.value = e.response?.data?.error || t('common.loadFailed')
   } finally {
     loading.value = false
   }
 }
 
 async function revoke(row) {
-  await api.post(`/client-devices/${row.id}/revoke`)
-  ElMessage.success(t('clientDevices.revokeDone'))
-  load()
+  try {
+    await api.post(`/client-devices/${row.id}/revoke`)
+    await load()
+  } catch (e) { ElMessage.error(e.response?.data?.error || t('common.operationFailed')) }
 }
 
 onMounted(load)
 </script>
+
+<style scoped>.load-error { margin-bottom: var(--space-4); }</style>