优化体验

frontend/src/layout/index.vue

@@ -24,16 +24,16 @@
               :class="{ 'is-active': isSidebarCollapsed }"
               aria-label="主导航"
             >
-              <router-link
+              <a
                 v-for="item in railNavItems"
-                :key="item.path"
-                :to="item.path"
+                :key="item.title"
+                href="#"
                 class="sidebar-rail-item"
-                :class="{ 'is-active': activeMenu === item.path }"
                 :title="item.title"
+                @click.prevent="handleRailClick"
               >
                 <el-icon><component :is="item.icon" /></el-icon>
-              </router-link>
+              </a>
             </nav>
 
             <el-menu
@@ -187,14 +187,15 @@ watch(
 )
 
 const railNavItems = [
-  { path: '/brand', title: '品牌管理', icon: Collection },
-  { path: '/model', title: '型号管理', icon: List },
-  { path: '/ota', title: 'OTA 管理', icon: Document },
-  { path: '/blacklist', title: '黑名单', icon: Warning },
-  { path: '/ota-target-device', title: '定向升级', icon: Aim },
-  { path: '/share-code/log', title: '分享日志', icon: Share }
+  { title: '耳机管理', icon: Headset },
+  { title: '升级管理', icon: Upload },
+  { title: '分享码', icon: Share }
 ]
 
+function handleRailClick() {
+  isSidebarCollapsed.value = false
+}
+
 const breadcrumbTitle = computed(() => {
   if (route.path === '/home') return ''
   const t = route.meta?.title

frontend/src/views/ota/index.vue

@@ -32,6 +32,17 @@
             <el-option label="停用" :value="0" />
           </el-select>
         </el-form-item>
+        <el-form-item label="灰度">
+          <el-select
+            v-model="searchForm.beta"
+            placeholder="全部"
+            clearable
+            style="width: 120px"
+          >
+            <el-option label="是" :value="1" />
+            <el-option label="否" :value="0" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="版本号">
           <el-input-number
             v-model="searchForm.verCode"
@@ -68,7 +79,16 @@
       <el-table :data="tableData" border stripe style="width: 100%">
         <el-table-column prop="id" label="ID" width="70" />
         <el-table-column prop="verCode" label="版本号" width="90" />
-        <el-table-column prop="verName" label="版本名" width="120" show-overflow-tooltip />
+        <el-table-column prop="verName" label="版本名" width="200">
+          <template #default="{ row }">
+            <div class="vername-cell">
+              <span class="vername-text" :title="row.verName">{{ row.verName }}</span>
+              <el-tag v-if="getLatestTag(row)" :type="row.beta === 1 ? 'warning' : 'success'" size="small" class="latest-tag">
+                {{ row.beta === 1 ? 'latest beta' : 'latest' }}
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="model" label="设备型号" width="120" show-overflow-tooltip />
         <el-table-column prop="hw" label="硬件" width="70" />
         <el-table-column prop="url" label="包地址" min-width="160">
@@ -102,6 +122,11 @@
             <el-tag v-else type="info" size="small">停用</el-tag>
           </template>
         </el-table-column>
+        <el-table-column prop="create_at" label="新增时间" width="170">
+          <template #default="{ row }">
+            {{ formatBlackDate(row.create_at) }}
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="280" fixed="right">
           <template #default="scope">
             <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
@@ -388,6 +413,7 @@ const searchForm = reactive({
   verName: '',
   model: undefined,
   status: undefined,
+  beta: undefined,
   verCode: null
 })
 
@@ -399,6 +425,23 @@ const pagination = reactive({
 
 const tableData = ref([])
 
+/** 计算每个 (model, beta) 组合下的最大 verCode，用于显示 latest 标签 */
+const latestVersionMap = computed(() => {
+  const map = {}
+  for (const row of tableData.value) {
+    const key = `${row.model || ''}__${row.beta}`
+    if (map[key] === undefined || row.verCode > map[key]) {
+      map[key] = row.verCode
+    }
+  }
+  return map
+})
+
+function getLatestTag(row) {
+  const key = `${row.model || ''}__${row.beta}`
+  return latestVersionMap.value[key] === row.verCode
+}
+
 function emptyForm() {
   return {
     id: null,
@@ -551,6 +594,9 @@ const loadData = async () => {
     if (typeof searchForm.verCode === 'number') {
       params.verCode = searchForm.verCode
     }
+    if (searchForm.beta === 0 || searchForm.beta === 1) {
+      params.beta = searchForm.beta
+    }
     const res = await getOtaList(params)
     if (res.code === 1 && res.data) {
       tableData.value = res.data.items || []
@@ -576,6 +622,7 @@ const handleReset = () => {
   searchForm.verName = ''
   searchForm.model = undefined
   searchForm.status = undefined
+  searchForm.beta = undefined
   searchForm.verCode = null
   pagination.page = 1
   loadData()
@@ -999,4 +1046,22 @@ onMounted(() => {
   flex-shrink: 0;
   margin-left: 12px;
 }
+
+.vername-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.vername-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.latest-tag {
+  flex-shrink: 0;
+}
 </style>