feat(live-stream): add live stream dialog styling and improve camera view handling

- Introduced a new SCSS style for the live stream dialog to enhance the user interface with specific layout and design elements.
- Updated the camera view handling to utilize the new dialog class for better user experience when creating live streams.
- Improved component formatting for consistency and readability across the live-stream view.

src/assets/styles/theme/element-override.scss

@@ -190,6 +190,78 @@
   --el-message-border-radius: var(--radius-base);
 }
 
+// Live Stream 创建提示对话框
+.live-stream-dialog {
+  width: 420px !important;
+  padding-bottom: 10px;
+  border-radius: 0;
+
+  .el-message-box__header {
+    padding: 30px 20px 10px;
+  }
+
+  .el-message-box__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+
+    display: flex;
+    flex-direction: row;
+  }
+
+  .el-message-box__status {
+    font-size: 48px !important;
+    margin-bottom: 15px;
+
+    &.el-message-box-icon--warning {
+      color: #faad14;
+    }
+  }
+
+  .el-message-box__content {
+    padding: 10px 20px 20px;
+  }
+
+  .el-message-box__message {
+    font-size: 14px;
+    color: #606266;
+  }
+
+  .el-message-box__btns {
+    padding: 10px 20px 20px;
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+
+    .el-button {
+      min-width: 120px;
+      padding: 10px 20px;
+      font-size: 14px;
+      border-radius: 0;
+    }
+
+    .el-button--default {
+      border-color: #dcdfe6;
+      color: #606266;
+
+      &:hover {
+        border-color: #c0c4cc;
+        color: #303133;
+      }
+    }
+
+    .el-button--primary {
+      background-color: #409eff;
+      border-color: #409eff;
+
+      &:hover {
+        background-color: #66b1ff;
+        border-color: #66b1ff;
+      }
+    }
+  }
+}
+
 // 标签
 .el-tag {
   --el-tag-border-radius: var(--radius-sm);

src/views/live-stream/index.vue

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

src/views/lss/index.vue

@@ -652,14 +652,8 @@ async function handleViewCamera(row: CameraInfoDTO) {
         cancelButtonText: t('取消'),
         type: 'warning',
         center: true,
-        customClass: 'custom-dialog',
-        customStyle: {
-          height: '300px',
-          display: 'inline-flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center'
-        }
+        customClass: 'live-stream-dialog',
+        distinguishCancelAndClose: true
       })
       router.push(`/live-stream?cameraId=${row.cameraId}&lssId=${row.lssId}&action=create`)
     } catch {