refactor(live-stream, lss): enhance component formatting for improved readability

- Consolidated attributes in various components, including el-table, el-pagination, and el-drawer, to streamline the code structure.
- Reduced unnecessary line breaks and improved overall formatting in both live-stream and LSS views for better maintainability.
- Updated icon usage for consistency across the application and ensured a cleaner layout.

src/views/live-stream/index.vue

@@ -90,7 +90,7 @@
         <el-table-column :label="t('操作')" align="center" fixed="right">
           <template #default="{ row }">
             <el-button type="primary" link @click="handleViewCloudflare(row)">
-              <Icon icon="mdi:play" width="20" height="20" />
+              <Icon icon="mdi:play-circle" width="20" height="20" />
             </el-button>
             <el-button type="primary" link @click="handleEdit(row)">
               <Icon icon="mdi:note-edit-outline" width="20" height="20" />

src/views/lss/index.vue

@@ -200,8 +200,17 @@
               <el-form :model="cameraSearchForm" inline>
                 <el-form-item>
                   <el-input
-                    v-model.trim="cameraSearchForm.keyword"
-                    :placeholder="t('IP / 设备ID / 名称')"
+                    v-model.trim="cameraSearchForm.cameraId"
+                    :placeholder="t('设备ID')"
+                    clearable
+                    style="width: 200px"
+                    @keyup.enter="handleCameraSearch"
+                  />
+                </el-form-item>
+                <el-form-item>
+                  <el-input
+                    v-model.trim="cameraSearchForm.cameraName"
+                    :placeholder="t('名称')"
                     clearable
                     style="width: 200px"
                     @keyup.enter="handleCameraSearch"
@@ -570,7 +579,8 @@ import type {
   CameraAddRequest,
   CameraUpdateRequest,
   CameraVendorDTO,
-  IAbly
+  IAbly,
+  CameraHeartbeatStatus
 } from '@/types'
 import type { FormInstance, FormRules } from 'element-plus'
 import dayjs from 'dayjs'
@@ -775,8 +785,9 @@ const cameraVendorList = ref<CameraVendorDTO[]>([])
 
 // 摄像头搜索表单
 const cameraSearchForm = reactive({
-  keyword: '',
-  status: '' as 'ONLINE' | 'OFFLINE' | ''
+  cameraId: '',
+  cameraName: '',
+  status: '' as CameraHeartbeatStatus | ''
 })
 
 // 摄像头编辑弹窗状态
@@ -931,11 +942,17 @@ function handleEdit(row: LssNodeDTO, tab: 'detail' | 'camera' | 'pusher') {
   lssEditForm.ably = JSON.stringify(row.ably)
   editActiveTab.value = tab
   lssEditDrawerVisible.value = true
+  // 每次打开抽屉都刷新摄像头列表
+  cameraSearchForm.cameraId = ''
+  cameraSearchForm.cameraName = ''
+  cameraSearchForm.status = ''
+  loadCameraList()
 }
 
 async function handleCameraList(row: LssNodeDTO) {
   currentLss.value = row
-  cameraSearchForm.keyword = ''
+  cameraSearchForm.cameraId = ''
+  cameraSearchForm.cameraName = ''
   cameraSearchForm.status = ''
   deviceActiveTab.value = 'camera'
   cameraDrawerVisible.value = true
@@ -951,7 +968,7 @@ async function handleUpdateLss() {
       lssId: currentLss.value.lssId,
       lssName: lssEditForm.lssName,
       address: lssEditForm.address,
-      ablyInfo: lssEditForm.ablyInfo
+      ablyInfo: lssEditForm.ably
     })
     if (res.success) {
       ElMessage.success('更新成功')
@@ -975,12 +992,19 @@ async function loadCameraList() {
 
   try {
     const params: any = { lssId: currentLss.value.lssId }
-    if (cameraSearchForm.keyword) {
-      params.keyword = cameraSearchForm.keyword
+
+    if (cameraSearchForm.cameraId) {
+      params.cameraId = cameraSearchForm.cameraId
     }
+
+    if (cameraSearchForm.cameraName) {
+      params.cameraName = cameraSearchForm.cameraName
+    }
+
     if (cameraSearchForm.status) {
       params.status = cameraSearchForm.status
     }
+
     const res = await adminListCameras(params)
     if (res.success && res.data) {
       cameraList.value = res.data.list || []