refactor(live-stream): streamline component structure and improve readability

- Consolidated attributes in input and table components for better clarity and maintainability.
- Reduced unnecessary line breaks and improved formatting across various sections.
- Enhanced pagination and drawer structures for a more cohesive user experience.

src/views/live-stream/index.vue

@@ -218,7 +218,7 @@
     <el-drawer
       v-model="mediaDrawerVisible"
       direction="rtl"
-      size="95%"
+      size="90%"
       :with-header="false"
       destroy-on-close
       class="media-drawer"

tests/e2e/lss.spec.ts

@@ -0,0 +1,181 @@
+import { test, expect, type Page } from '@playwright/test'
+
+// 测试账号配置
+const TEST_USERNAME = process.env.TEST_USERNAME || 'admin'
+const TEST_PASSWORD = process.env.TEST_PASSWORD || '123456'
+
+// 日本相关测试数据
+const TEST_DATA = {
+  name: '東京テスト環境',
+  address: '東京都渋谷区神宮前1-2-3',
+  // 用于恢复的原始数据
+  originalName: '初台測試環境',
+  originalAddress: ''
+}
+
+test.describe('LSS管理 CRUD 测试', () => {
+  // 登录辅助函数
+  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 })
+  }
+
+  test('LSS管理页面正确显示', async ({ page }) => {
+    await login(page)
+    await page.goto('/lss')
+
+    // 验证页面标题
+    await expect(page.locator('text=LSS 管理')).toBeVisible()
+
+    // 验证搜索表单元素
+    await expect(page.getByPlaceholder('LSS ID')).toBeVisible()
+    await expect(page.getByPlaceholder('名称')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Search' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible()
+
+    // 验证表头
+    await expect(page.locator('th:has-text("LSS ID")')).toBeVisible()
+    await expect(page.locator('th:has-text("Name")')).toBeVisible()
+    await expect(page.locator('th:has-text("Address")')).toBeVisible()
+    await expect(page.locator('th:has-text("IP")')).toBeVisible()
+    await expect(page.locator('th:has-text("Actions")')).toBeVisible()
+  })
+
+  test('编辑LSS节点 - 修改Name和Address', async ({ page }) => {
+    await login(page)
+    await page.goto('/lss')
+
+    // 等待表格加载
+    await page.waitForTimeout(1000)
+
+    // 找到数据行中的编辑按钮（Actions列第一个按钮）
+    const editButton = page.locator('tbody tr').first().locator('button').nth(1)
+    await expect(editButton).toBeVisible({ timeout: 10000 })
+    await editButton.click()
+
+    // 验证编辑对话框打开
+    const dialog = page.locator('.el-drawer, .el-dialog').filter({ hasText: 'LSS详情' })
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // 修改 Name 字段
+    const nameInput = dialog
+      .locator('input')
+      .filter({ hasText: /名称|Name/ })
+      .or(dialog.locator('label:has-text("Name")').locator('..').locator('input'))
+      .first()
+
+    // 使用更通用的方式定位 Name 输入框
+    const nameField = dialog.getByPlaceholder('请输入名称')
+    await nameField.clear()
+    await nameField.fill(TEST_DATA.name)
+
+    // 修改 Address 字段
+    const addressField = dialog.getByPlaceholder('请输入地址')
+    await addressField.clear()
+    await addressField.fill(TEST_DATA.address)
+
+    // 点击 Update 按钮保存
+    await dialog.getByRole('button', { name: 'Update' }).click()
+
+    // 等待对话框关闭
+    await expect(dialog).not.toBeVisible({ timeout: 10000 })
+
+    // 验证列表中数据已更新
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    await expect(firstRow).toContainText(TEST_DATA.name)
+    await expect(firstRow).toContainText(TEST_DATA.address)
+  })
+
+  test('查询LSS节点', async ({ page }) => {
+    await login(page)
+    await page.goto('/lss')
+
+    // 等待表格加载
+    await page.waitForTimeout(1000)
+
+    // 在名称搜索框输入关键词
+    await page.getByPlaceholder('名称').fill('東京')
+
+    // 点击搜索
+    await page.getByRole('button', { name: 'Search' }).click()
+    await page.waitForTimeout(500)
+
+    // 验证搜索结果
+    const tableRows = page.locator('tbody tr')
+    const rowCount = await tableRows.count()
+
+    if (rowCount > 0) {
+      // 验证每行都包含搜索关键词
+      for (let i = 0; i < rowCount; i++) {
+        const row = tableRows.nth(i)
+        const rowText = await row.textContent()
+        expect(rowText).toContain('東京')
+      }
+    }
+  })
+
+  test('重置搜索条件', async ({ page }) => {
+    await login(page)
+    await page.goto('/lss')
+
+    // 填入搜索条件
+    await page.getByPlaceholder('LSS ID').fill('test-id')
+    await page.getByPlaceholder('名称').fill('test-name')
+
+    // 点击重置
+    await page.getByRole('button', { name: 'Reset' }).click()
+    await page.waitForTimeout(300)
+
+    // 验证搜索条件已清空
+    await expect(page.getByPlaceholder('LSS ID')).toHaveValue('')
+    await expect(page.getByPlaceholder('名称')).toHaveValue('')
+  })
+
+  test('查看LSS节点设备列表', async ({ page }) => {
+    await login(page)
+    await page.goto('/lss')
+
+    // 等待表格加载
+    await page.waitForTimeout(1000)
+
+    // 点击 Device List 列的按钮
+    const deviceListButton = page.locator('tbody tr').first().locator('button').first()
+    await expect(deviceListButton).toBeVisible({ timeout: 10000 })
+    await deviceListButton.click()
+
+    // 验证设备列表面板打开
+    const devicePanel = page.locator('.el-drawer, .el-dialog').filter({ hasText: '设备列表' })
+    await expect(devicePanel).toBeVisible({ timeout: 5000 })
+
+    // 验证设备列表表头
+    await expect(devicePanel.locator('th:has-text("设备ID")')).toBeVisible()
+    await expect(devicePanel.locator('th:has-text("名称")')).toBeVisible()
+
+    // 关闭面板
+    await devicePanel.locator('button[aria-label*="Close"], .el-drawer__close-btn, .el-dialog__close').first().click()
+    await expect(devicePanel).not.toBeVisible({ timeout: 5000 })
+  })
+
+  test('从侧边栏导航到LSS管理', async ({ page }) => {
+    await login(page)
+
+    // 点击侧边栏 LSS 管理菜单项
+    await page.getByText('LSS 管理').first().click()
+
+    // 验证跳转到 LSS 管理页面
+    await expect(page).toHaveURL(/\/lss/)
+    await expect(page.locator('text=LSS 管理')).toBeVisible()
+  })
+})