feat: v0.8.x 功能更新与数据维护优化

- MAC地址格式统一为小写 xxxx-xxxx-xxxx，支持三种格式输入
- 更换设备MAC时自动清理OLT新发现列表中的冲突ONU记录
- 设备编辑新增场所类型字段（手动输入），区域改为下拉快速填充
- 编辑/更换设备时自动移除new_devices中同MAC的待入库记录
- 新增登录过期自动跳转（401拦截 + 过期提示）
- 新增关于页面（/about），支持Markdown渲染，管理员可在设置中编辑内容
- 新增device_status_history每日自动清理任务（保留30天）
- 更新README.md和about.md

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.6.5",
         "echarts": "^5.6.0",
         "element-plus": "^2.5.0",
+        "marked": "^18.0.2",
         "pinia": "^2.1.7",
         "vue": "^3.4.0",
         "vue-router": "^4.2.5"
@@ -1452,6 +1453,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.2",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-18.0.2.tgz",
+      "integrity": "sha512-NsmlUYBS/Zg57rgDWMYdnre6OTj4e+qq/JS2ot3KrYLSoHLw+sDu0Nm1ZGpRgYAq6c+b1ekaY5NzVchMCQnzcg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
     "axios": "^1.6.5",
     "echarts": "^5.6.0",
     "element-plus": "^2.5.0",
+    "marked": "^18.0.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.0",
     "vue-router": "^4.2.5"

frontend/src/components/Layout.vue

@@ -301,6 +301,14 @@ const allNavItems = [
       <polyline points="10 9 9 9 8 9"/>
     </svg>`
   },
+  {
+    path: '/about',
+    label: '关于',
+    icon: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+      <circle cx="12" cy="12" r="10"/>
+      <line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+    </svg>`
+  },
 ]
 
 const navItems = computed(() =>
@@ -314,7 +322,7 @@ const mobileNavItems = computed(() => navItems.value.slice(0, 3))
 const extraNavItems = computed(() =>
   navItems.value.slice(3).map((item, i) => ({
     ...item,
-    desc: ['7天趋势与区域分布', '物料出入库台账', '管理系统用户', '配置角色权限', '定时检查等系统配置', '查看操作审计记录'][i] || ''
+    desc: ['7天趋势与区域分布', '物料出入库台账', '管理系统用户', '配置角色权限', '定时检查等系统配置', '查看操作审计记录', '系统信息与说明'][i] || ''
   }))
 )
 

frontend/src/router/index.js

@@ -68,6 +68,11 @@ const routes = [
         component: () => import('../views/AuditLog.vue'),
         meta: { requiresRole: 'admin' }
       },
+      {
+        path: '/about',
+        name: 'About',
+        component: () => import('../views/About.vue')
+      },
     ]
   }
 ]

frontend/src/utils/request.js

@@ -13,4 +13,18 @@ request.interceptors.request.use(config => {
   return config
 })
 
+request.interceptors.response.use(
+  res => res,
+  err => {
+    if (err.response?.status === 401) {
+      localStorage.removeItem('token')
+      // 避免在登录/回调页重复跳转
+      if (!window.location.pathname.startsWith('/login') && !window.location.pathname.startsWith('/callback')) {
+        window.location.href = '/login?expired=1'
+      }
+    }
+    return Promise.reject(err)
+  }
+)
+
 export default request

frontend/src/views/About.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="about-page">
+    <div class="page-header">
+      <div class="page-title-group">
+        <h1 class="page-title">关于</h1>
+        <span class="page-subtitle">系统信息与说明</span>
+      </div>
+    </div>
+
+    <div class="about-card">
+      <div v-if="loading" class="about-loading">
+        <div class="spin-ring"></div>
+      </div>
+      <div v-else-if="content" class="markdown-body" v-html="renderedContent"></div>
+      <div v-else class="about-empty">暂无内容</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { marked } from 'marked'
+import request from '../utils/request'
+
+const content = ref('')
+const loading = ref(true)
+
+const renderedContent = computed(() => {
+  if (!content.value) return ''
+  return marked.parse(content.value)
+})
+
+onMounted(async () => {
+  try {
+    const { data } = await request.get('/settings/about')
+    content.value = data.content || ''
+  } catch {}
+  loading.value = false
+})
+</script>
+
+<style scoped>
+.about-page {
+  padding: 24px 28px;
+  max-width: 860px;
+}
+
+.page-header {
+  margin-bottom: 20px;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 2px;
+}
+
+.page-subtitle {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.about-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius);
+  padding: 28px 32px;
+  min-height: 200px;
+}
+
+.about-loading {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+.spin-ring {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--border-default);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.about-empty {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 40px 0;
+}
+
+/* Markdown 渲染样式 */
+.markdown-body {
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3),
+.markdown-body :deep(h4) {
+  color: var(--text-primary);
+  font-weight: 600;
+  margin: 1.4em 0 0.6em;
+  line-height: 1.4;
+}
+
+.markdown-body :deep(h1) { font-size: 1.5em; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.3em; }
+.markdown-body :deep(h2) { font-size: 1.25em; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.2em; }
+.markdown-body :deep(h3) { font-size: 1.1em; }
+
+.markdown-body :deep(p) { margin: 0.8em 0; }
+
+.markdown-body :deep(a) {
+  color: var(--accent);
+  text-decoration: none;
+}
+.markdown-body :deep(a:hover) { text-decoration: underline; }
+
+.markdown-body :deep(code) {
+  font-family: var(--font-mono);
+  font-size: 0.88em;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+.markdown-body :deep(pre) {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  padding: 14px 16px;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.markdown-body :deep(pre code) {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 13px;
+}
+
+.markdown-body :deep(ul),
+.markdown-body :deep(ol) {
+  padding-left: 1.6em;
+  margin: 0.6em 0;
+}
+
+.markdown-body :deep(li) { margin: 0.3em 0; }
+
+.markdown-body :deep(blockquote) {
+  border-left: 3px solid var(--accent);
+  margin: 1em 0;
+  padding: 6px 16px;
+  color: var(--text-secondary);
+  background: var(--accent-dim);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+
+.markdown-body :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  font-size: 13px;
+}
+
+.markdown-body :deep(th),
+.markdown-body :deep(td) {
+  border: 1px solid var(--border-default);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.markdown-body :deep(th) {
+  background: var(--bg-elevated);
+  font-weight: 600;
+}
+
+.markdown-body :deep(tr:nth-child(even) td) {
+  background: var(--bg-elevated);
+}
+
+.markdown-body :deep(hr) {
+  border: none;
+  border-top: 1px solid var(--border-default);
+  margin: 1.5em 0;
+}
+
+@media (max-width: 767px) {
+  .about-page { padding: 16px 12px; }
+  .about-card { padding: 20px 16px; }
+}
+</style>

frontend/src/views/DeviceList.vue

@@ -361,7 +361,7 @@
       </div>
       <el-form :model="replaceForm" label-width="80px">
         <el-form-item label="新 MAC 地址" required>
-          <el-input v-model="replaceForm.new_mac" placeholder="例：AABBCCDDEEFF 或 AA:BB:CC:DD:EE:FF" clearable />
+          <el-input v-model="replaceForm.new_mac" placeholder="例：AABB-CCDD-EEFF" clearable @input="formatMacInput" />
         </el-form-item>
         <el-form-item label="更换原因">
           <el-input v-model="replaceForm.reason" type="textarea" :rows="2" placeholder="可选，填写更换原因" />
@@ -385,10 +385,23 @@
     <!-- 编辑对话框 -->
     <el-dialog v-model="editVisible" title="编辑设备信息" width="460px" destroy-on-close>
       <el-form :model="editForm" label-width="70px">
-        <el-form-item label="区域"><el-input v-model="editForm.region" /></el-form-item>
+        <el-form-item label="区域">
+          <el-select
+            v-model="editForm.region"
+            filterable
+            allow-create
+            placeholder="选择或输入区域"
+            style="width: 100%"
+          >
+            <el-option v-for="r in regionOptions" :key="r" :label="r" :value="r" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="学校"><el-input v-model="editForm.school_name" /></el-form-item>
         <el-form-item label="楼宇"><el-input v-model="editForm.building" /></el-form-item>
         <el-form-item label="房间号"><el-input v-model="editForm.room_number" /></el-form-item>
+        <el-form-item label="场所类型">
+          <el-input v-model="editForm.place_type" placeholder="如：宿舍、教室、办公室…" />
+        </el-form-item>
         <el-form-item label="备注"><el-input v-model="editForm.notes" type="textarea" :rows="2" /></el-form-item>
       </el-form>
       <template #footer>
@@ -526,7 +539,8 @@ let cooldownTimer = null
 const clearing = ref(false)
 
 const editVisible = ref(false)
-const editForm = ref({ region: '', school_name: '', building: '', room_number: '', notes: '' })
+const editForm = ref({ region: '', school_name: '', building: '', room_number: '', place_type: '', notes: '' })
+const regionOptions = ref([])
 const editSaving = ref(false)
 
 const replaceVisible = ref(false)
@@ -602,8 +616,10 @@ const openEditFromCard = (device) => {
     school_name: device.school_name || '',
     building: device.building || '',
     room_number: device.room_number || '',
+    place_type: device.place_type || '',
     notes: device.notes || '',
   }
+  loadRegionOptions()
   editVisible.value = true
 }
 
@@ -727,6 +743,18 @@ const openReplace = async () => {
   replaceVisible.value = true
 }
 
+// 输入时自动格式化为 xxxx-xxxx-xxxx（小写）
+const formatMacInput = () => {
+  const raw = replaceForm.value.new_mac.toLowerCase().replace(/[^0-9a-f]/g, '')
+  if (raw.length <= 4) {
+    replaceForm.value.new_mac = raw
+  } else if (raw.length <= 8) {
+    replaceForm.value.new_mac = raw.slice(0, 4) + '-' + raw.slice(4)
+  } else {
+    replaceForm.value.new_mac = raw.slice(0, 4) + '-' + raw.slice(4, 8) + '-' + raw.slice(8, 12)
+  }
+}
+
 const doReplace = async () => {
   if (!replaceForm.value.new_mac.trim()) {
     ElMessage.warning('请输入新 MAC 地址')
@@ -753,12 +781,21 @@ const openEdit = () => {
     school_name: selectedDevice.value.school_name || '',
     building: selectedDevice.value.building || '',
     room_number: selectedDevice.value.room_number || '',
+    place_type: selectedDevice.value.place_type || '',
     notes: selectedDevice.value.notes || '',
   }
+  loadRegionOptions()
   detailVisible.value = false
   editVisible.value = true
 }
 
+const loadRegionOptions = async () => {
+  try {
+    const { data } = await deviceApi.getRegions()
+    regionOptions.value = data
+  } catch {}
+}
+
 const saveEdit = async () => {
   editSaving.value = true
   try {

frontend/src/views/Login.vue

@@ -20,6 +20,13 @@
         </div>
       </div>
 
+      <div v-if="expired" class="expired-tip">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        登录已过期，请重新登录
+      </div>
+
       <div v-if="!error" class="login-status">
         <div class="spin-ring"></div>
         <p class="status-text">正在跳转到登录页面…</p>
@@ -49,6 +56,7 @@ import { ref, onMounted } from 'vue'
 import { getLoginUrl } from '../api/auth'
 
 const error = ref('')
+const expired = ref(new URLSearchParams(window.location.search).get('expired') === '1')
 
 const doRedirect = async () => {
   error.value = ''
@@ -225,4 +233,18 @@ onMounted(doRedirect)
   border: 1px solid var(--border-subtle);
   border-radius: 10px;
 }
+
+.expired-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--warning, #f59e0b);
+  background: rgba(245,158,11,0.08);
+  border: 1px solid rgba(245,158,11,0.2);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  width: 100%;
+  box-sizing: border-box;
+}
 </style>

frontend/src/views/Settings.vue

@@ -70,6 +70,35 @@
         </div>
       </div>
     </div>
+
+    <!-- 关于页面编辑 -->
+    <div class="settings-card" style="margin-top: 20px">
+      <div class="card-header">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: -2px; margin-right: 8px">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        关于页面内容
+      </div>
+      <div class="card-body">
+        <p class="setting-desc">支持 Markdown 格式，保存后在「关于」页面展示。</p>
+        <div class="about-editor-wrap">
+          <textarea
+            v-model="aboutContent"
+            class="about-textarea"
+            placeholder="在此输入 Markdown 内容，例如：&#10;# 系统名称&#10;&#10;版本、联系方式、使用说明等…"
+            :disabled="aboutSaving"
+          ></textarea>
+        </div>
+        <div class="form-footer">
+          <button class="save-btn" :disabled="aboutSaving" @click="saveAbout">
+            <svg v-if="aboutSaving" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinning">
+              <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+            </svg>
+            {{ aboutSaving ? '保存中…' : '保存内容' }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -77,6 +106,7 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { ElMessage } from '../utils/message'
 import { getSettings, updateCheckInterval } from '../api/settings'
+import request from '../utils/request'
 
 const intervalMinutes = ref(30)
 const currentSeconds = ref(1800)
@@ -148,9 +178,32 @@ const save = async () => {
 
 onMounted(() => {
   load()
+  loadAbout()
   const timer = setInterval(load, 10000)
   onUnmounted(() => clearInterval(timer))
 })
+
+const aboutContent = ref('')
+const aboutSaving = ref(false)
+
+const loadAbout = async () => {
+  try {
+    const { data } = await request.get('/settings/about')
+    aboutContent.value = data.content || ''
+  } catch {}
+}
+
+const saveAbout = async () => {
+  aboutSaving.value = true
+  try {
+    await request.put('/settings/about', { content: aboutContent.value })
+    ElMessage.success('关于页面内容已保存')
+  } catch (e) {
+    ElMessage.error(e?.response?.data?.detail || '保存失败')
+  } finally {
+    aboutSaving.value = false
+  }
+}
 </script>
 
 <style scoped>
@@ -344,6 +397,36 @@ onMounted(() => {
   animation: spin 0.8s linear infinite;
 }
 
+.about-editor-wrap {
+  margin: 12px 0;
+}
+
+.about-textarea {
+  width: 100%;
+  min-height: 280px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.7;
+  padding: 12px 14px;
+  resize: vertical;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.about-textarea:focus {
+  border-color: var(--accent);
+}
+
+.about-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 @media (max-width: 767px) {
   .settings-page {
     padding: 16px 12px;