refactor(live-stream, lss): streamline input components and enhance layout for improved readability

- Consolidated attributes in input components across the live stream and LSS views for better clarity and maintainability.
- Reduced unnecessary line breaks and improved formatting in various sections, enhancing overall code readability.
- Updated pagination and drawer structures for a more cohesive user experience.

src/views/live-stream/index.vue

@@ -51,22 +51,22 @@
             <span>{{ row.lssId || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="cameraId" :label="t('设备ID')" width="120" show-overflow-tooltip>
+        <el-table-column prop="cameraId" :label="t('设备ID')" show-overflow-tooltip>
           <template #default="{ row }">
             <span>{{ row.cameraId || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="pushMethod" :label="t('推流方式')" width="120" align="center">
+        <el-table-column prop="pushMethod" :label="t('推流方式')" align="center">
           <template #default="{ row }">
             <el-tag size="small">{{ row.pushMethod || 'ffmpeg' }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="commandTemplate" :label="t('命令模板')" width="100" align="center">
+        <el-table-column prop="commandTemplate" :label="t('命令模板')" align="center">
           <template #default="{ row }">
             <el-link type="primary" @click="openCommandDialog(row)">{{ t('查看') }}</el-link>
           </template>
         </el-table-column>
-        <el-table-column :label="t('推流控制')" width="100" align="center">
+        <el-table-column :label="t('推流控制')" align="center">
           <template #default="{ row }">
             <el-switch
               :model-value="row.status === '1'"
@@ -78,19 +78,19 @@
             />
           </template>
         </el-table-column>
-        <el-table-column prop="pushMethod" :label="t('推流方式')" width="100" align="center">
+        <el-table-column prop="pushMethod" :label="t('推流方式')" align="center">
           <template #default="{ row }">
             <el-tag size="small">{{ row.pushMethod || 'ffmpeg' }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="status" :label="t('推流状态')" width="100" align="center">
+        <el-table-column prop="status" :label="t('推流状态')" align="center">
           <template #default="{ row }">
             <el-tag size="small" :type="getStatusTagType(row.status)">
               {{ getStatusLabel(row.status) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="enabled" :label="t('启用')" width="80" align="center">
+        <el-table-column prop="enabled" :label="t('启用')" align="center">
           <template #default="{ row }">
             <el-tag size="small" :type="row.enabled ? 'success' : 'danger'">
               {{ row.enabled ? t('是') : t('否') }}
@@ -157,7 +157,7 @@
                 <el-option
                   v-for="camera in cameraOptions"
                   :key="camera.cameraId"
-                  :label="`${camera.cameraId} - ${camera.name}`"
+                  :label="`${camera.cameraId} - ${camera.cameraName}`"
                   :value="camera.cameraId"
                 />
               </el-select>

src/views/lss/index.vue

@@ -269,7 +269,7 @@
               </el-table-column>
               <el-table-column prop="brand" label="厂商" min-width="90">
                 <template #default="{ row }">
-                  {{ formatBrand(row.brand) }}
+                  {{ formatBrand(row.vendorName) }}
                 </template>
               </el-table-column>
               <el-table-column prop="model" label="型号" min-width="130" show-overflow-tooltip />
@@ -343,7 +343,7 @@
             <el-table v-else :data="cameraList" stripe size="small" border>
               <!-- <el-table-column prop="ip" label="本地IP" min-width="110" /> -->
               <el-table-column prop="cameraId" label="设备ID" min-width="100" show-overflow-tooltip />
-              <el-table-column prop="name" label="名称" min-width="100" show-overflow-tooltip />
+              <el-table-column prop="cameraName" label="名称" min-width="100" show-overflow-tooltip />
               <el-table-column :label="t('状态(心跳)')" min-width="140">
                 <template #default="{ row }">
                   <span :class="['status-text', row.status === 'active' ? 'status-active' : 'status-dead']">
@@ -361,7 +361,7 @@
                   <el-button type="primary" link @click="handleViewRunParams(row)">查看</el-button>
                 </template>
               </el-table-column>
-              <el-table-column prop="brand" label="厂商" min-width="90">
+              <el-table-column prop="brand" :label="t('厂商')" min-width="90">
                 <template #default="{ row }">
                   {{ formatBrand(row.brand) }}
                 </template>
@@ -376,11 +376,7 @@
                 <template #default="{ row }">
                   <el-button type="primary" link :icon="Edit" @click="handleEditCamera(row)" />
                   <el-button type="danger" link :icon="Delete" @click="handleDeleteCamera(row)" />
-                  <el-button
-                    link
-                    :class="['crosshairs-btn', { active: activeCameraId === row.id }]"
-                    @click="handleViewCamera(row)"
-                  >
+                  <el-button link :class="['crosshairs-btn', { active: !row.streamSn }]" @click="handleViewCamera(row)">
                     <Icon icon="mdi:crosshairs" />
                   </el-button>
                 </template>
@@ -503,10 +499,10 @@
           <el-input v-model="cameraForm.password" type="password" show-password placeholder="请输入密码" />
         </el-form-item> -->
         <el-form-item label="参数配置">
-          <JsonEditor v-model="cameraForm.paramConfig" height="140px" placeholder="请输入参数配置 (JSON)" />
+          <JsonEditor v-model="cameraForm.paramConfig" height="200px" placeholder="请输入参数配置 (JSON)" />
         </el-form-item>
         <el-form-item label="设备运行参数">
-          <JsonEditor v-model="cameraForm.runtimeParams" height="140px" placeholder="设备运行参数 (JSON)" />
+          <JsonEditor v-model="cameraForm.runtimeParams" height="200px" placeholder="设备运行参数 (JSON)" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -578,9 +574,11 @@ import type {
 import type { FormInstance, FormRules } from 'element-plus'
 import dayjs from 'dayjs'
 import { useI18n } from 'vue-i18n'
-
+import { useRouter } from 'vue-router'
 const { t } = useI18n({ useScope: 'global' })
 
+const router = useRouter()
+
 // 格式化状态显示
 function formatStatus(status: LssNodeStatus | undefined): string {
   switch (status) {
@@ -636,12 +634,7 @@ const activeCameraId = ref<number | null>(null)
 
 function handleViewCamera(row: CameraInfoDTO) {
   // 切换激活状态
-  if (activeCameraId.value === row.id) {
-    activeCameraId.value = null
-  } else {
-    activeCameraId.value = row.id
-  }
-  console.log('Camera active:', row.id, activeCameraId.value === row.id)
+  router.push(`/live-stream?cameraId=${row.cameraId}`)
 }
 
 // 格式化品牌
@@ -697,7 +690,7 @@ function getHeartbeatClass(status: LssHeartbeatStatus | undefined): string {
 function handleViewConfig(row: CameraInfoDTO) {
   paramsCamera.value = row
   paramsDialogType.value = 'config'
-  paramsDialogTitle.value = `参数配置 - ${row.name}`
+  paramsDialogTitle.value = `参数配置 - ${row.cameraName}`
   paramsContent.value = row.paramConfig || ''
   paramsDialogVisible.value = true
 }
@@ -706,7 +699,7 @@ function handleViewConfig(row: CameraInfoDTO) {
 function handleViewRunParams(row: CameraInfoDTO) {
   paramsCamera.value = row
   paramsDialogType.value = 'run'
-  paramsDialogTitle.value = `运行参数 - ${row.name}`
+  paramsDialogTitle.value = `运行参数 - ${row.cameraName}`
   paramsContent.value = row.runtimeParams || ''
   paramsDialogVisible.value = true
 }
@@ -1360,10 +1353,10 @@ onMounted(() => {
   }
 
   &.active {
-    color: #67c23a;
+    color: red;
 
     &:hover {
-      color: #85ce61;
+      color: red;
     }
   }
 }