fix: 修复环路检测失败 + 多项UX增强
修复: - 环路检测正则 \s+(Onu\S+)\s+ → \s+(Onu\S+) (splitlines移除换行后尾随\s无法匹配) - 权限中间件 Header(...) → Header(None) 避免缺失Auth头返回422而非401 - 环路检测请求超时30s→120s (SSH连接30+台OLT实测需58秒) 重构 (ssh_service.py): - 提取 _send_and_wait 为私有方法,消除3处重复内部函数 - 添加 __enter__/__exit__ 上下文管理器支持 - 加固 execute_command prompt检测 (按行匹配<DEVICE_NAME>) - 移除未使用的settings import - olt.py/devices.py 调用方改用 with 语法 新功能: - 侧边栏退出登录上方显示当前用户名和角色 - 版本号从VERSION文件自动读取 (后端/health返回,前端动态显示) - 基于广西南宁经纬度计算日落时间,自动切换深色/浅色主题 - /api/olt/loopback-detection 响应增加raw字段便于排查 基础设施: - CLAUDE.md 加入 .gitignore - 新增 .claude/rules/07-remote-operations.md (远程部署操作) - 新增 .claude/rules/08-frp-notes.md (frp隧道注意事项) - 新增 VERSION 文件 (版本号 0.10.0) - 新增环路检测解析测试用例 (5个) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -74,6 +74,13 @@
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div v-if="authStore.user" class="sidebar-user">
|
||||
<div class="sidebar-user-avatar">{{ (authStore.user.display_name || authStore.user.username || '?')[0] }}</div>
|
||||
<div class="sidebar-user-info">
|
||||
<div class="sidebar-user-name">{{ authStore.user.display_name || authStore.user.username }}</div>
|
||||
<div class="sidebar-user-role">{{ roleLabel }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="logout-btn" @click="handleLogout">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
@@ -116,7 +123,7 @@
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
v0.5.0
|
||||
v{{ appVersion }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -199,6 +206,7 @@ import { useMobile } from '../composables/useMobile'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const appVersion = ref('0.0.0')
|
||||
const themeStore = useThemeStore()
|
||||
const { isMobile } = useMobile()
|
||||
|
||||
@@ -218,6 +226,14 @@ const onKeydown = (e) => {
|
||||
if (e.ctrlKey && shortcuts[e.key]) { e.preventDefault(); router.push(shortcuts[e.key]) }
|
||||
}
|
||||
|
||||
const fetchVersion = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/health')
|
||||
const data = await res.json()
|
||||
if (data.version) appVersion.value = data.version
|
||||
} catch { /* 静默 */ }
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
updateTime()
|
||||
timer = setInterval(updateTime, 1000)
|
||||
@@ -225,6 +241,7 @@ onMounted(async () => {
|
||||
if (authStore.token && !authStore.user) {
|
||||
await authStore.fetchProfile()
|
||||
}
|
||||
fetchVersion()
|
||||
})
|
||||
onUnmounted(() => { clearInterval(timer); document.removeEventListener('keydown', onKeydown) })
|
||||
|
||||
@@ -351,6 +368,9 @@ const pageNameMap = {
|
||||
}
|
||||
const currentPageName = computed(() => pageNameMap[route.path] || '页面')
|
||||
|
||||
const roleLabels = { admin: '超级管理员', area_admin: '区域管理员', school_admin: '学校管理员', user: '普通用户' }
|
||||
const roleLabel = computed(() => roleLabels[authStore.role] || authStore.role)
|
||||
|
||||
const handleLogout = () => {
|
||||
authStore.logout()
|
||||
router.push('/login')
|
||||
@@ -510,6 +530,49 @@ const handleLogout = () => {
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.sidebar-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-subtle);
|
||||
}
|
||||
|
||||
.sidebar-user-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-user-info {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-user-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sidebar-user-role {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -1,17 +1,34 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, watch } from 'vue'
|
||||
import { isAfterSunset, getMsUntilNextSwitch } from '../utils/sunset'
|
||||
|
||||
export const useThemeStore = defineStore('theme', () => {
|
||||
const STORAGE_KEY = 'onu-theme'
|
||||
const theme = ref(localStorage.getItem(STORAGE_KEY) || 'dark')
|
||||
const savedTheme = localStorage.getItem(STORAGE_KEY)
|
||||
// 无手动偏好时，根据广西日落时间自动选择
|
||||
const theme = ref(savedTheme || (isAfterSunset() ? 'dark' : 'light'))
|
||||
|
||||
const applyTheme = (t) => {
|
||||
document.documentElement.setAttribute('data-theme', t)
|
||||
}
|
||||
|
||||
let switchTimer = null
|
||||
|
||||
// 初始化时立即应用
|
||||
applyTheme(theme.value)
|
||||
|
||||
// 设置日落/日出自动切换定时器，仅在用户未手动选择时生效
|
||||
const scheduleAutoSwitch = () => {
|
||||
if (switchTimer) clearTimeout(switchTimer)
|
||||
// 始终在日落/日出时自动切换
|
||||
const delay = getMsUntilNextSwitch()
|
||||
switchTimer = setTimeout(() => {
|
||||
theme.value = isAfterSunset() ? 'dark' : 'light'
|
||||
scheduleAutoSwitch() // 递归调度下一次
|
||||
}, delay + 60000) // 加 1 分钟余量
|
||||
}
|
||||
scheduleAutoSwitch()
|
||||
|
||||
// 切换
|
||||
const toggle = () => {
|
||||
theme.value = theme.value === 'dark' ? 'light' : 'dark'
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 广西（南宁）日落时间计算
|
||||
* 纬度 22.82°N, 经度 108.37°E, 时区 UTC+8
|
||||
*/
|
||||
|
||||
const LAT = 22.82 // 南宁纬度
|
||||
const LON = 108.37 // 南宁经度
|
||||
|
||||
function toRad(deg) { return deg * Math.PI / 180 }
|
||||
function toDeg(rad) { return rad * 180 / Math.PI }
|
||||
|
||||
/**
|
||||
* 计算指定日期的日落时间（北京时间）
|
||||
* @param {Date} date
|
||||
* @returns {{ hour: number, minute: number }} 日落时分
|
||||
*/
|
||||
export function getSunsetTime(date = new Date()) {
|
||||
const dayOfYear = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 86400000)
|
||||
|
||||
// 太阳赤纬 (solar declination)
|
||||
const declination = 23.45 * Math.sin(toRad(360 / 365 * (284 + dayOfYear)))
|
||||
|
||||
// 日落时角 cos(ω) = -tan(lat)*tan(δ)
|
||||
const cosOmega = -Math.tan(toRad(LAT)) * Math.tan(toRad(declination))
|
||||
const omega = Math.acos(Math.max(-1, Math.min(1, cosOmega))) // 弧度
|
||||
|
||||
// 日落地方太阳时（小时）
|
||||
const solarHour = 12 + toDeg(omega) / 15
|
||||
|
||||
// 修正：时区经度(120°E)与本地经度差
|
||||
const correction = (120 - LON) / 15 * 60 // 分钟
|
||||
const totalMinutes = solarHour * 60 + correction
|
||||
|
||||
const hour = Math.floor(totalMinutes / 60) % 24
|
||||
const minute = Math.round(totalMinutes % 60)
|
||||
|
||||
return { hour, minute }
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断当前是否在日落之后（应使用深色模式）
|
||||
*/
|
||||
export function isAfterSunset() {
|
||||
const now = new Date()
|
||||
const sunset = getSunsetTime(now)
|
||||
const currentMinutes = now.getHours() * 60 + now.getMinutes()
|
||||
const sunsetMinutes = sunset.hour * 60 + sunset.minute
|
||||
// 日出约为 12 - (sunset - 12) = 24 - sunset（粗略估算）
|
||||
const sunriseMinutes = (24 * 60 - sunsetMinutes) % (24 * 60)
|
||||
// 深色时间：日落之后 到 日出之前
|
||||
return currentMinutes >= sunsetMinutes || currentMinutes < sunriseMinutes
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取距离下次切换的毫秒数
|
||||
* 用于设置定时器在日落/日出时自动切换
|
||||
*/
|
||||
export function getMsUntilNextSwitch() {
|
||||
const now = new Date()
|
||||
const sunset = getSunsetTime(now)
|
||||
const sunsetMin = sunset.hour * 60 + sunset.minute
|
||||
const sunriseMin = (24 * 60 - sunsetMin) % (24 * 60)
|
||||
const currentMin = now.getHours() * 60 + now.getMinutes()
|
||||
|
||||
let targetMin
|
||||
if (currentMin >= sunsetMin || currentMin < sunriseMin) {
|
||||
// 当前是深色时间，下次切换是日出
|
||||
targetMin = sunriseMin
|
||||
} else {
|
||||
// 当前是浅色时间，下次切换是日落
|
||||
targetMin = sunsetMin
|
||||
}
|
||||
|
||||
const diffMin = (targetMin - currentMin + 24 * 60) % (24 * 60)
|
||||
return diffMin * 60 * 1000
|
||||
}
|
||||
@@ -951,7 +951,7 @@ const runQuickScan = async () => {
|
||||
const runLoopbackDetection = async () => {
|
||||
loopDetecting.value = true
|
||||
try {
|
||||
const { data } = await request.post('/olt/loopback-detection')
|
||||
const { data } = await request.post('/olt/loopback-detection', null, { timeout: 120000 })
|
||||
loopResults.value = data
|
||||
const map = {}
|
||||
for (const item of data) {
|
||||
|
||||
Reference in New Issue
Block a user