refactor(lss): improve component formatting for enhanced readability

- Consolidated attributes in various components, including el-input and el-drawer, to streamline the code structure.
- Reduced unnecessary line breaks and improved overall formatting in the LSS view for better maintainability.
- Enhanced user experience by maintaining a clean and organized layout across the components.

src/views/lss/index.vue

@@ -226,9 +226,9 @@
                 <el-form-item>
                   <el-button type="primary" :icon="Search" @click="handleCameraSearch">{{ t('查询') }}</el-button>
                   <el-button :icon="RefreshRight" @click="handleCameraReset">{{ t('重置') }}</el-button>
+                  <el-button type="primary" :icon="Plus" @click="handleAddCamera">{{ t('新增') }}</el-button>
                 </el-form-item>
               </el-form>
-              <el-button type="primary" :icon="Plus" @click="handleAddCamera">{{ t('新增') }}</el-button>
             </div>
             <el-empty v-if="!cameraLoading && cameraList.length === 0" :description="t('暂无关联设备')" />
             <el-table v-else :data="cameraList" stripe size="small" border>

tests/e2e/lss.spec.ts

@@ -485,3 +485,309 @@ test.describe('LSS管理 - CodeEditor 组件测试 (JSON模式)', () => {
     await expect(editorContentReopened).toContainText(timestamp.toString())
   })
 })
+
+test.describe('LSS管理 - 摄像头列表搜索测试', () => {
+  // 登录辅助函数
+  async function login(page: Page) {
+    await page.goto('/login')
+    await page.evaluate(() => {
+      localStorage.clear()
+      document.cookie.split(';').forEach((c) => {
+        document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/')
+      })
+    })
+    await page.reload()
+
+    await page.getByPlaceholder('用户名').fill(TEST_USERNAME)
+    await page.getByPlaceholder('密码').fill(TEST_PASSWORD)
+    await page.getByRole('button', { name: '登录' }).click()
+    await expect(page).not.toHaveURL(/\/login/, { timeout: 15000 })
+  }
+
+  // 打开摄像头列表辅助函数
+  async function openCameraList(page: Page) {
+    await page.goto('/lss')
+    await page.waitForTimeout(1000)
+
+    // 点击 Device List 按钮打开设备列表 - 点击编辑按钮进入 LSS 编辑抽屉
+    const editButton = page.locator('tbody tr').first().locator('button').nth(1)
+    await expect(editButton).toBeVisible({ timeout: 10000 })
+    await editButton.click()
+
+    // 等待 LSS 编辑抽屉打开
+    const drawer = page.locator('.el-drawer').filter({ hasText: 'LSS详情' })
+    await expect(drawer).toBeVisible({ timeout: 5000 })
+
+    // 点击"摄像头列表" Tab
+    await drawer.locator('.el-tabs__item').filter({ hasText: '摄像头列表' }).click()
+    await page.waitForTimeout(500)
+
+    return drawer
+  }
+
+  /**
+   * 测试摄像头搜索表单元素显示
+   */
+  test('摄像头列表 - 验证搜索表单元素显示', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 验证 Device ID 搜索框存在
+    await expect(toolbar.getByPlaceholder('设备ID')).toBeVisible()
+
+    // 验证 Name 搜索框存在
+    await expect(toolbar.getByPlaceholder('名称')).toBeVisible()
+
+    // 验证 Status 下拉框存在
+    await expect(toolbar.locator('.el-select').first()).toBeVisible()
+
+    // 验证查询按钮存在
+    await expect(toolbar.getByRole('button', { name: /查询|Search/ })).toBeVisible()
+
+    // 验证重置按钮存在
+    await expect(toolbar.getByRole('button', { name: /重置|Reset/ })).toBeVisible()
+
+    // 验证新增按钮存在
+    await expect(toolbar.getByRole('button', { name: /新增|Add/ })).toBeVisible()
+  })
+
+  /**
+   * 测试按设备ID搜索
+   */
+  test('摄像头列表 - 按设备ID搜索', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 等待表格数据加载
+    await page.waitForTimeout(500)
+
+    // 使用固定的设备ID搜索
+    const searchId = 'CT-IP100'
+
+    // 输入设备ID搜索
+    await toolbar.getByPlaceholder('设备ID').fill(searchId)
+
+    // 点击搜索
+    await toolbar.getByRole('button', { name: /查询|Search/ }).click()
+    await page.waitForTimeout(500)
+
+    // 验证搜索条件已应用
+    await expect(toolbar.getByPlaceholder('设备ID')).toHaveValue(searchId)
+
+    // 验证搜索结果应该返回1条记录
+    const tableRows = drawer.locator('.tab-content-wrapper tbody tr')
+    const rowCount = await tableRows.count()
+    expect(rowCount).toBe(1)
+
+    // 验证搜索结果中的设备ID
+    const firstRowDeviceId = await tableRows.first().locator('td').first().textContent()
+    expect(firstRowDeviceId).toContain('CT-IP100')
+  })
+
+  /**
+   * 测试按名称搜索
+   */
+  test('摄像头列表 - 按名称搜索', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 等待表格数据加载
+    await page.waitForTimeout(500)
+
+    // 使用固定的名称搜索
+    const searchName = '初台64'
+
+    // 输入名称搜索
+    await toolbar.getByPlaceholder('名称').fill(searchName)
+
+    // 点击搜索
+    await toolbar.getByRole('button', { name: /查询|Search/ }).click()
+    await page.waitForTimeout(500)
+
+    // 验证搜索条件已应用
+    await expect(toolbar.getByPlaceholder('名称')).toHaveValue(searchName)
+
+    // 验证搜索结果应该返回1条记录
+    const tableRows = drawer.locator('.tab-content-wrapper tbody tr')
+    const rowCount = await tableRows.count()
+    expect(rowCount).toBe(1)
+
+    // 验证搜索结果中的名称
+    const firstRowName = await tableRows.first().locator('td').nth(1).textContent()
+    expect(firstRowName).toContain('初台64')
+  })
+
+  /**
+   * 测试组合搜索 - 设备ID + 名称
+   */
+  test('摄像头列表 - 组合搜索设备ID和名称', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 等待表格数据加载
+    await page.waitForTimeout(500)
+
+    // 输入设备ID
+    await toolbar.getByPlaceholder('设备ID').fill('CT')
+
+    // 输入名称
+    await toolbar.getByPlaceholder('名称').fill('初台')
+
+    // 点击搜索
+    await toolbar.getByRole('button', { name: /查询|Search/ }).click()
+    await page.waitForTimeout(500)
+
+    // 验证搜索条件已应用（输入框保留值）
+    await expect(toolbar.getByPlaceholder('设备ID')).toHaveValue('CT')
+    await expect(toolbar.getByPlaceholder('名称')).toHaveValue('初台')
+  })
+
+  /**
+   * 测试重置搜索条件
+   */
+  test('摄像头列表 - 重置搜索条件', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 填入搜索条件
+    await toolbar.getByPlaceholder('设备ID').fill('test-device-id')
+    await toolbar.getByPlaceholder('名称').fill('test-camera-name')
+
+    // 验证输入值
+    await expect(toolbar.getByPlaceholder('设备ID')).toHaveValue('test-device-id')
+    await expect(toolbar.getByPlaceholder('名称')).toHaveValue('test-camera-name')
+
+    // 点击重置
+    await toolbar.getByRole('button', { name: /重置|Reset/ }).click()
+    await page.waitForTimeout(300)
+
+    // 验证搜索条件已清空
+    await expect(toolbar.getByPlaceholder('设备ID')).toHaveValue('')
+    await expect(toolbar.getByPlaceholder('名称')).toHaveValue('')
+  })
+
+  /**
+   * 测试搜索无结果情况
+   */
+  test('摄像头列表 - 搜索无结果显示空状态', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 输入一个不存在的设备ID
+    await toolbar.getByPlaceholder('设备ID').fill('non-existent-device-id-xyz123')
+
+    // 点击搜索
+    await toolbar.getByRole('button', { name: /查询|Search/ }).click()
+    await page.waitForTimeout(500)
+
+    // 验证显示空状态或表格无数据
+    const tableRows = drawer.locator('.tab-content-wrapper tbody tr')
+    const rowCount = await tableRows.count()
+
+    if (rowCount === 0) {
+      // 验证显示空状态组件
+      await expect(drawer.locator('.el-empty')).toBeVisible()
+    }
+  })
+
+  /**
+   * 测试按Enter键搜索
+   */
+  test('摄像头列表 - 按Enter键触发搜索', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 等待表格数据加载
+    await page.waitForTimeout(500)
+
+    // 在设备ID输入框输入并按Enter
+    const deviceIdInput = toolbar.getByPlaceholder('设备ID')
+    await deviceIdInput.fill('CT-IP100')
+    await deviceIdInput.press('Enter')
+    await page.waitForTimeout(500)
+
+    // 验证搜索已执行（检查输入值保留）
+    await expect(deviceIdInput).toHaveValue('CT-IP100')
+
+    // 验证搜索结果
+    const tableRows = drawer.locator('.tab-content-wrapper tbody tr')
+    const rowCount = await tableRows.count()
+    expect(rowCount).toBe(1)
+  })
+
+  /**
+   * 测试名称输入框按Enter键搜索
+   */
+  test('摄像头列表 - 名称输入框按Enter键触发搜索', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    const toolbar = drawer.locator('.camera-toolbar')
+
+    // 等待表格数据加载
+    await page.waitForTimeout(500)
+
+    // 在名称输入框输入并按Enter
+    const nameInput = toolbar.getByPlaceholder('名称')
+    await nameInput.fill('初台64')
+    await nameInput.press('Enter')
+    await page.waitForTimeout(500)
+
+    // 验证搜索已执行（检查输入值保留）
+    await expect(nameInput).toHaveValue('初台64')
+
+    // 验证搜索结果
+    const tableRows = drawer.locator('.tab-content-wrapper tbody tr')
+    const rowCount = await tableRows.count()
+    expect(rowCount).toBe(1)
+  })
+
+  /**
+   * 测试表格列显示正确
+   */
+  test('摄像头列表 - 验证表格列显示', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    // 验证表头列（中英文）
+    await expect(drawer.locator('th:has-text("设备ID"), th:has-text("Device ID")')).toBeVisible()
+    await expect(drawer.locator('th:has-text("名称"), th:has-text("Name")')).toBeVisible()
+    await expect(drawer.locator('th:has-text("状态"), th:has-text("Status")')).toBeVisible()
+    await expect(drawer.locator('th:has-text("厂商"), th:has-text("Vendor")')).toBeVisible()
+    await expect(drawer.locator('th:has-text("型号"), th:has-text("Model")')).toBeVisible()
+  })
+
+  /**
+   * 测试设备总数显示
+   */
+  test('摄像头列表 - 验证设备总数显示', async ({ page }) => {
+    await login(page)
+    const drawer = await openCameraList(page)
+
+    // 等待表格数据加载
+    await page.waitForTimeout(500)
+
+    // 获取表格行数
+    const tableRows = drawer.locator('.tab-content-wrapper tbody tr')
+    const rowCount = await tableRows.count()
+
+    if (rowCount > 0) {
+      // 验证总数显示（例如 "共 2 个设备" 或 "Total 2 Device"）
+      await expect(drawer.locator('.camera-count')).toBeVisible()
+    }
+  })
+})