237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add online device management and desktop settings integration

Browse Source
This commit is contained in:
yuyx
2026-02-19 17:34:41 +08:00
parent 365ada1a4a
commit 19f53875c9
7 changed files with 1070 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/app.html
View File

@@ -2913,6 +2913,67 @@
</div>
</div>
<!-- 在线设备 -->
<h3 class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;">
<i class="fas fa-laptop-house"></i> 在线设备
</h3>
<div class="settings-panel" style="background: var(--bg-card); padding: 20px; border-radius: 12px; border: 1px solid var(--glass-border); margin-bottom: 30px;">
<div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
<div style="color: var(--text-secondary); font-size: 13px;">
可查看当前账号已登录设备，并支持远程强制下线
</div>
<button class="btn btn-secondary" @click="loadOnlineDevices()" :disabled="onlineDevices.loading || !!onlineDevices.kickingSessionId">
<i :class="onlineDevices.loading ? 'fas fa-sync-alt fa-spin' : 'fas fa-sync-alt'"></i>
{{ onlineDevices.loading ? '刷新中...' : '刷新设备列表' }}
</button>
</div>
<div v-if="onlineDevices.error" style="margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(239,68,68,0.1); color: #ef4444; font-size: 13px;">
<i class="fas fa-exclamation-triangle"></i> {{ onlineDevices.error }}
</div>
<div v-if="onlineDevices.loading && onlineDevices.items.length === 0" style="text-align: center; padding: 20px; color: var(--text-muted);">
<i class="fas fa-spinner fa-spin"></i> 正在加载设备列表...
</div>
<div v-else-if="onlineDevices.items.length === 0" style="text-align: center; padding: 20px; color: var(--text-muted);">
暂无在线设备记录
</div>
<div v-else style="display: grid; gap: 10px;">
<div
v-for="device in onlineDevices.items"
:key="device.session_id"
style="border: 1px solid var(--glass-border); border-radius: 10px; background: var(--bg-secondary); padding: 12px; display: grid; gap: 8px;"
>
<div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;">
<div style="display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;">
<strong style="color: var(--text-primary);">{{ device.device_name || '未知设备' }}</strong>
<span style="font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(99,102,241,0.16); color: #6366f1;">
{{ formatOnlineDeviceType(device.client_type) }}
</span>
<span v-if="device.is_current" style="font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(34,197,94,0.16); color: #16a34a;">
本机
</span>
</div>
<button
class="btn btn-danger"
style="padding: 6px 12px; border-radius: 8px;"
:disabled="onlineDevices.kickingSessionId === device.session_id"
@click="kickOnlineDevice(device)"
>
<i :class="onlineDevices.kickingSessionId === device.session_id ? 'fas fa-spinner fa-spin' : 'fas fa-power-off'"></i>
{{ device.is_current ? '下线本机' : '踢下线' }}
</button>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; font-size: 12px; color: var(--text-secondary);">
<div>平台：{{ device.platform || '-' }}</div>
<div>IP：{{ device.ip_address || '-' }}</div>
<div>最近活跃：{{ formatDate(device.last_active_at) }}</div>
<div>登录时间：{{ formatDate(device.created_at) }}</div>
</div>
</div>
</div>
</div>
<!-- 界面设置 -->
<h3 class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;"><i class="fas fa-palette"></i> 界面设置</h3>
<div class="settings-panel settings-theme-panel" style="background: var(--bg-card); padding: 20px; border-radius: 12px; border: 1px solid var(--glass-border); margin-bottom: 30px;">