refactor(live-stream): update LiveStreamStatus types and streamline component layout

- Revised LiveStreamStatus to include more descriptive states: 'idle', 'starting', 'streaming', 'stopping', 'stopped', 'error', and 'reconnecting'.
- Enhanced the layout of the live stream management view by consolidating attributes in input components and reducing unnecessary line breaks for improved readability.
- Updated button conditions to reflect the new status types, ensuring a more intuitive user experience.

src/types/index.ts

@@ -468,7 +468,42 @@ export interface StreamChannelUpdateRequest {
 // ==================== LiveStream 推流管理相关类型 ====================
 
 // LiveStream 状态
-export type LiveStreamStatus = 'IDLE' | 'STREAMING' | 'STOPPED' | 'ERROR'
+// IDLE("idle", "空闲"),
+
+// /**
+//  * 启动中 - FFmpeg进程正在启动
+//  */
+// STARTING("starting", "启动中"),
+
+// /**
+//  * 推流中 - 正常推流
+//  */
+// STREAMING("streaming", "推流中"),
+
+// /**
+//  * 停止中 - 正在停止推流
+//  */
+// STOPPING("stopping", "停止中"),
+
+// /**
+//  * 已停止 - 推流已停止
+//  */
+// STOPPED("stopped", "已停止"),
+
+// /**
+//  * 错误 - 推流发生错误
+//  */
+// ERROR("error", "错误"),
+
+// /**
+//  * 重连中 - 正在重新连接
+//  */
+// RECONNECTING("reconnecting", "重连中");
+export type LiveStreamStatus = 'idle' | 'starting' | 'streaming' | 'stopping' | 'stopped' | 'error' | 'reconnecting'
+// 'IDLE' | 'STREAMING' | 'STOPPED' | 'ERROR'
+/**
+ * 空闲 - 未开始推流
+ */
 
 // LiveStream 信息 (LiveStreamInfoDTO)
 export interface LiveStreamDTO {

src/views/live-stream/index.vue

@@ -64,8 +64,9 @@
         </el-table-column>
         <el-table-column :label="t('推流控制')" width="120" align="center">
           <template #default="{ row }">
+            <!-- LiveStreamStatus: idle, starting, streaming, stopping, stopped, error, reconnecting 如何实现这里 -->
             <el-button
-              v-if="row.status !== 'STREAMING'"
+              v-if="row.status !== 'idle'"
               type="success"
               size="small"
               :loading="row._starting"
@@ -73,7 +74,13 @@
             >
               {{ t('启动') }}
             </el-button>
-            <el-button v-else type="danger" size="small" :loading="row._stopping" @click="handleStopStream(row)">
+            <el-button
+              v-else="row.status !== 'streaming'"
+              type="danger"
+              size="small"
+              :loading="row._stopping"
+              @click="handleStopStream(row)"
+            >
               {{ t('停止') }}
             </el-button>
           </template>
@@ -1209,6 +1216,7 @@ onMounted(() => {
   height: 100%;
   padding: 16px;
   gap: 16px;
+  overflow: auto;
 }
 
 .media-drawer-header {
@@ -1227,7 +1235,7 @@ onMounted(() => {
 
 .player-section {
   width: 100%;
-  height: 380px;
+  min-height: 300px;
   border-radius: 8px;
   overflow: hidden;
   background-color: #000;