refactor(live-stream, lss): enhance input components and streamline formatting

- Consolidated input attributes for improved readability and consistency in both live stream and LSS views.
- Reduced unnecessary line breaks and improved overall code formatting for better clarity.
- Updated pagination and drawer structures to enhance user experience.

src/views/live-stream/index.vue

@@ -11,6 +11,9 @@
             @keyup.enter="handleSearch"
           />
         </el-form-item>
+        <el-form-item :label="t('设备ID')">
+          <el-input v-model.trim="searchForm.cameraId" placeholder="搜索设备ID" clearable @keyup.enter="handleSearch" />
+        </el-form-item>
         <el-form-item :label="t('状态')">
           <el-select v-model="searchForm.enabled" placeholder="全部" clearable style="width: 120px">
             <el-option :label="t('启用')" :value="true" />
@@ -68,38 +71,23 @@
         </el-table-column>
         <el-table-column :label="t('推流控制')" align="center">
           <template #default="{ row }">
+            {{ row.status === '1' ? t('开启') : t('关闭') }}
             <el-switch
               :model-value="row.status === '1'"
               :loading="row._starting || row._stopping"
-              :active-text="t('开启')"
-              :inactive-text="t('关闭')"
               inline-prompt
               @change="(val: boolean) => handleToggleStream(row, val)"
             />
           </template>
         </el-table-column>
-        <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('推流状态')" align="center">
+        <el-table-column prop="streamStartTime" :label="t('启动时间')" width="160" align="center">
           <template #default="{ row }">
-            <el-tag size="small" :type="getStatusTagType(row.status)">
-              {{ getStatusLabel(row.status) }}
-            </el-tag>
+            {{ formatDateTime(row.streamStartTime) }}
           </template>
         </el-table-column>
-        <el-table-column prop="enabled" :label="t('启用')" align="center">
+        <el-table-column prop="streamEndTime" :label="t('关闭时间')" width="160" align="center">
           <template #default="{ row }">
-            <el-tag size="small" :type="row.enabled ? 'success' : 'danger'">
-              {{ row.enabled ? t('是') : t('否') }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" :label="t('创建时间')" width="160" align="center">
-          <template #default="{ row }">
-            {{ formatDateTime(row.createdAt) }}
+            {{ formatDateTime(row.streamEndTime) }}
           </template>
         </el-table-column>
         <el-table-column :label="t('操作')" align="center" fixed="right">
@@ -521,9 +509,11 @@ const sortState = reactive<{
 // 搜索表单
 const searchForm = reactive<{
   keyword: string
+  cameraId: string
   enabled: boolean | null
 }>({
   keyword: '',
+  cameraId: '',
   enabled: null
 })
 

src/views/lss/index.vue

@@ -71,7 +71,7 @@
         </el-table-column>
         <el-table-column :label="t('设备列表')" align="center">
           <template #default="{ row }">
-            <el-button type="primary" link @click="handleCameraList(row)">
+            <el-button type="primary" link @click="handleEdit(row, 'camera')">
               <Icon icon="mdi:cctv" />
             </el-button>
           </template>
@@ -112,7 +112,7 @@
         </el-table-column> -->
         <el-table-column :label="t('操作')" align="center" fixed="right">
           <template #default="{ row }">
-            <el-button type="primary" link :icon="Edit" @click="handleEdit(row)" />
+            <el-button type="primary" link :icon="Edit" @click="handleEdit(row, 'detail')" />
             <el-button type="primary" link @click="handleScanDevices(row)">
               <Icon icon="mdi:radar" />
             </el-button>
@@ -927,12 +927,12 @@ function handleScanDevices(row: LssNodeDTO) {
   console.log(row)
 }
 
-function handleEdit(row: LssNodeDTO) {
+function handleEdit(row: LssNodeDTO, tab: 'detail' | 'camera' | 'pusher') {
   currentLss.value = row
   lssEditForm.lssName = row.lssName || ''
   lssEditForm.address = row.address || ''
   lssEditForm.ably = JSON.stringify(row.ably)
-  editActiveTab.value = 'detail'
+  editActiveTab.value = tab
   lssEditDrawerVisible.value = true
 }
 
@@ -1348,19 +1348,11 @@ onMounted(() => {
 
 // 十字瞄准按钮样式
 .crosshairs-btn {
-  color: #909399;
+  color: var(--color-info);
   transition: color 0.2s;
 
-  &:hover {
-    color: #606266;
-  }
-
   &.active {
-    color: red;
-
-    &:hover {
-      color: red;
-    }
+    color: var(--color-primary);
   }
 }