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

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

src/views/live-stream/index.vue

@@ -215,13 +215,25 @@
       destroy-on-close
       class="media-drawer"
     >
+      <!-- 左上角关闭按钮 -->
+      <div class="drawer-close-btn" @click="mediaDrawerVisible = false">
+        <el-icon :size="20">
+          <Close />
+        </el-icon>
+      </div>
       <div class="media-drawer-content">
         <!-- 左侧：视频播放区域 -->
         <div class="video-area">
           <div class="video-header">
-            <span class="title">{{ currentMediaStream?.name || t('流媒体播放') }}</span>
-            <el-tag v-if="playbackInfo.isLive" type="success" size="small">{{ t('直播中') }}</el-tag>
-            <el-tag v-else type="info" size="small">{{ t('离线') }}</el-tag>
+            <div class="header-left">
+              <span class="title">{{ currentMediaStream?.name || t('流媒体播放') }}</span>
+              <el-tag v-if="playbackInfo.isLive" type="success" size="small">{{ t('直播中') }}</el-tag>
+              <el-tag v-else type="info" size="small">{{ t('离线') }}</el-tag>
+            </div>
+            <el-button type="danger" size="small" @click="mediaDrawerVisible = false">
+              <Icon icon="mdi:close" width="16" height="16" />
+              {{ t('关闭') }}
+            </el-button>
           </div>
           <div class="player-container">
             <div v-if="!playbackInfo.videoId" class="player-placeholder">
@@ -407,7 +419,8 @@ import {
   ZoomIn,
   ZoomOut,
   Edit,
-  Delete
+  Delete,
+  Close
 } from '@element-plus/icons-vue'
 import { listLiveStreams, addLiveStream, updateLiveStream, deleteLiveStream } from '@/api/live-stream'
 import { listAllLssNodes } from '@/api/lss'
@@ -1262,9 +1275,31 @@ onMounted(() => {
     flex-direction: column;
     height: 100%;
     background-color: #f5f7fa;
+    position: relative;
   }
 }
 
+.drawer-close-btn {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // border-radius: 50%;
+  cursor: pointer;
+  z-index: 10;
+  color: #303133;
+  transition: all 0.2s;
+
+  // &:hover {
+  //   background-color: rgba(0, 0, 0, 0.7);
+  // }
+}
+
 .media-drawer-content {
   display: flex;
   height: 100%;
@@ -1287,11 +1322,17 @@ onMounted(() => {
   .video-header {
     display: flex;
     align-items: center;
-    gap: 12px;
+    justify-content: space-between;
     padding: 12px 16px;
     background-color: #fff;
     border-bottom: 1px solid #e5e7eb;
 
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
     .title {
       font-size: 16px;
       font-weight: 600;