feat(ptz): enhance PTZ control with camera vendor support and configuration

- Introduced a new CameraVendor type to manage different camera manufacturers.
- Updated PTZConfig to include optional cameraId and vendor fields.
- Implemented a new sendPTZCommand function for unified PTZ command handling.
- Refactored PTZ control functions to utilize the new command interface.
- Enhanced CameraSelector and PtzOverlay components to support vendor-specific PTZ configurations.
- Updated VideoCell and webrtc-stream views to dynamically handle PTZ settings based on selected cameras.

src/assets/styles/index.scss

@@ -168,7 +168,9 @@ ol {
 
 // 页面容器
 .page-container {
-  // padding: var(--content-padding);
+  padding: var(--content-padding);
+  height: 100%;
+  overflow-y: auto;
   background-color: var(--bg-container);
   border-radius: var(--radius-lg);
   // box-shadow: var(--shadow-sm);

src/layout/index.vue

@@ -466,6 +466,10 @@ onUnmounted(() => {
         padding: 0;
       }
 
+      .layout__nav {
+        padding: 0;
+      }
+
       .layout__nav-item,
       .layout__logout {
         justify-content: center;

src/locales/en.json

@@ -86,7 +86,7 @@
   "摄像头总数": "Total Cameras",
   "摄像头数": "Cameras",
   "摄像头管理": "Camera Management",
-  "摄像头管理系统": "Camera Management System",
+  "摄像头管理系统": "Camera Management",
   "摄像头连接失败": "Camera connection failed",
   "摄像头连接正常": "Camera connection successful",
   "播放": "Play",

src/views/audit/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="audit-container">
+  <div class="page-container">
     <!-- 搜索区域 -->
     <el-card class="search-card" shadow="hover">
       <el-form :model="queryParams" inline>

src/views/camera-vendor/index.vue

@@ -627,10 +627,7 @@ onMounted(() => {
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  padding: 1rem;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 .form-container {

src/views/camera/channel.vue

@@ -96,7 +96,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 1rem;
 }
 
 .page-header {

src/views/camera/index.vue

@@ -672,10 +672,7 @@ onMounted(() => {
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  padding: 1rem;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 .form-container {

src/views/camera/stream-test.vue

@@ -236,7 +236,6 @@ function goBack() {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 1rem;
 }
 
 .page-header {

src/views/camera/video.vue

@@ -38,7 +38,6 @@ function goBack() {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 1rem;
 }
 
 .page-header {

src/views/cc/cloud.vue

@@ -36,7 +36,9 @@
       <!-- 播放器区域 -->
       <div class="player-section">
         <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
-          <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+          <el-icon :size="60" color="#ddd">
+            <VideoPlay />
+          </el-icon>
           <p>请输入 Video ID 并点击播放</p>
         </div>
         <VideoPlayer
@@ -66,28 +68,44 @@
         <!-- PTZ 方向控制 九宫格 -->
         <div class="ptz-controls">
           <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopLeft /></el-icon>
+            <el-icon>
+              <TopLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Top /></el-icon>
+            <el-icon>
+              <Top />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopRight /></el-icon>
+            <el-icon>
+              <TopRight />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Back /></el-icon>
+            <el-icon>
+              <Back />
+            </el-icon>
           </div>
           <div class="ptz-btn ptz-center" @click="handlePTZStop">
-            <el-icon><Refresh /></el-icon>
+            <el-icon>
+              <Refresh />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Right /></el-icon>
+            <el-icon>
+              <Right />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><BottomLeft /></el-icon>
+            <el-icon>
+              <BottomLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Bottom /></el-icon>
+            <el-icon>
+              <Bottom />
+            </el-icon>
           </div>
           <div
             class="ptz-btn"
@@ -95,7 +113,9 @@
             @mouseup="handlePTZStop"
             @mouseleave="handlePTZStop"
           >
-            <el-icon><BottomRight /></el-icon>
+            <el-icon>
+              <BottomRight />
+            </el-icon>
           </div>
         </div>
 
@@ -110,9 +130,13 @@
         <!-- 缩放控制 -->
         <div class="zoom-controls">
           <div class="zoom-header">
-            <el-icon><ZoomOut /></el-icon>
+            <el-icon>
+              <ZoomOut />
+            </el-icon>
             <span>缩放</span>
-            <el-icon><ZoomIn /></el-icon>
+            <el-icon>
+              <ZoomIn />
+            </el-icon>
           </div>
           <el-slider
             v-model="zoomValue"
@@ -401,9 +425,6 @@ async function handleZoomRelease() {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 1rem;
-  min-height: 100vh;
-  background-color: var(--bg-page);
 }
 
 .page-header {

src/views/cc/cloudflare.vue

@@ -36,7 +36,9 @@
       <!-- 播放器区域 -->
       <div class="player-section">
         <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
-          <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+          <el-icon :size="60" color="#ddd">
+            <VideoPlay />
+          </el-icon>
           <p>请输入 Video ID 并点击播放</p>
         </div>
         <VideoPlayer
@@ -66,28 +68,44 @@
         <!-- PTZ 方向控制 九宫格 -->
         <div class="ptz-controls">
           <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopLeft /></el-icon>
+            <el-icon>
+              <TopLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Top /></el-icon>
+            <el-icon>
+              <Top />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopRight /></el-icon>
+            <el-icon>
+              <TopRight />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Back /></el-icon>
+            <el-icon>
+              <Back />
+            </el-icon>
           </div>
           <div class="ptz-btn ptz-center" @click="handlePTZStop">
-            <el-icon><Refresh /></el-icon>
+            <el-icon>
+              <Refresh />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Right /></el-icon>
+            <el-icon>
+              <Right />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><BottomLeft /></el-icon>
+            <el-icon>
+              <BottomLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Bottom /></el-icon>
+            <el-icon>
+              <Bottom />
+            </el-icon>
           </div>
           <div
             class="ptz-btn"
@@ -95,7 +113,9 @@
             @mouseup="handlePTZStop"
             @mouseleave="handlePTZStop"
           >
-            <el-icon><BottomRight /></el-icon>
+            <el-icon>
+              <BottomRight />
+            </el-icon>
           </div>
         </div>
 
@@ -110,9 +130,13 @@
         <!-- 缩放控制 -->
         <div class="zoom-controls">
           <div class="zoom-header">
-            <el-icon><ZoomOut /></el-icon>
+            <el-icon>
+              <ZoomOut />
+            </el-icon>
             <span>缩放</span>
-            <el-icon><ZoomIn /></el-icon>
+            <el-icon>
+              <ZoomIn />
+            </el-icon>
           </div>
           <el-slider
             v-model="zoomValue"
@@ -401,8 +425,6 @@ async function handleZoomRelease() {
 
 <style lang="scss" scoped>
 .page-container {
-  min-height: 100vh;
-  background-color: var(--bg-page);
 }
 
 .page-header {

src/views/dashboard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard">
+  <div class="page-container">
     <!-- Page Header -->
     <div class="dashboard__header">
       <h1 class="dashboard__title">{{ t('仪表盘') }}</h1>
@@ -255,6 +255,7 @@ onMounted(() => {
 .dashboard {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   padding: 1rem;
+
   // Page Header
   &__header {
     margin-bottom: 2rem;
@@ -504,6 +505,7 @@ onMounted(() => {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

src/views/demo/cloudflareStream.vue

@@ -43,7 +43,9 @@
       <!-- 播放器区域 -->
       <div class="player-section">
         <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
-          <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+          <el-icon :size="60" color="#ddd">
+            <VideoPlay />
+          </el-icon>
           <p>请输入 Video ID 并点击播放</p>
         </div>
         <VideoPlayer
@@ -73,28 +75,44 @@
         <!-- PTZ 方向控制 九宫格 -->
         <div class="ptz-controls">
           <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopLeft /></el-icon>
+            <el-icon>
+              <TopLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Top /></el-icon>
+            <el-icon>
+              <Top />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopRight /></el-icon>
+            <el-icon>
+              <TopRight />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Back /></el-icon>
+            <el-icon>
+              <Back />
+            </el-icon>
           </div>
           <div class="ptz-btn ptz-center" @click="handlePTZStop">
-            <el-icon><Refresh /></el-icon>
+            <el-icon>
+              <Refresh />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Right /></el-icon>
+            <el-icon>
+              <Right />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><BottomLeft /></el-icon>
+            <el-icon>
+              <BottomLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Bottom /></el-icon>
+            <el-icon>
+              <Bottom />
+            </el-icon>
           </div>
           <div
             class="ptz-btn"
@@ -102,7 +120,9 @@
             @mouseup="handlePTZStop"
             @mouseleave="handlePTZStop"
           >
-            <el-icon><BottomRight /></el-icon>
+            <el-icon>
+              <BottomRight />
+            </el-icon>
           </div>
         </div>
 
@@ -117,9 +137,13 @@
         <!-- 缩放控制 -->
         <div class="zoom-controls">
           <div class="zoom-header">
-            <el-icon><ZoomOut /></el-icon>
+            <el-icon>
+              <ZoomOut />
+            </el-icon>
             <span>缩放</span>
-            <el-icon><ZoomIn /></el-icon>
+            <el-icon>
+              <ZoomIn />
+            </el-icon>
           </div>
           <el-slider
             v-model="zoomValue"
@@ -427,10 +451,6 @@ async function handleZoomRelease() {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 1rem;
-  background-color: var(--bg-page);
-  height: 100%;
-  overflow: auto;
 }
 
 .page-header {

src/views/demo/direct-url.vue

@@ -20,7 +20,9 @@
     <!-- 播放器区域 -->
     <div class="player-section">
       <div v-if="!currentSrc" class="player-placeholder">
-        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <el-icon :size="60" color="#ddd">
+          <VideoPlay />
+        </el-icon>
         <p>{{ t('请输入视频地址并点击播放') }}</p>
       </div>
       <VideoPlayer
@@ -171,8 +173,6 @@ function onError(error: any) {
 
 <style lang="scss" scoped>
 .page-container {
-  min-height: 100vh;
-  background-color: var(--bg-page);
 }
 
 .page-header {

src/views/demo/hls-stream.vue

@@ -6,7 +6,7 @@
 
     <!-- 配置区域 -->
     <div class="config-section">
-      <el-form label-width="120px">
+      <el-form label-width="auto">
         <el-form-item label="M3U8 地址">
           <el-input v-model="hlsConfig.url" placeholder="输入 m3u8 地址" style="width: 600px" />
         </el-form-item>
@@ -20,7 +20,9 @@
     <!-- 播放器区域 -->
     <div class="player-section">
       <div v-if="!currentSrc" class="player-placeholder">
-        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <el-icon :size="60" color="#ddd">
+          <VideoPlay />
+        </el-icon>
         <p>请输入 M3U8 地址并点击播放</p>
       </div>
       <VideoPlayer
@@ -161,16 +163,11 @@ function onError(error: any) {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 1rem;
-  min-height: 100vh;
-  background-color: var(--bg-page);
 }
 
 .page-header {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
-  padding: 15px 20px;
   background-color: var(--bg-container);
   border-radius: var(--radius-base);
   color: var(--text-primary);
@@ -182,7 +179,6 @@ function onError(error: any) {
 }
 
 .config-section {
-  margin-bottom: 20px;
   padding: 20px;
   background-color: var(--bg-container);
   border-radius: var(--radius-base);

src/views/demo/rtsp-stream.vue

@@ -30,7 +30,9 @@
     <div class="player-wrapper">
       <div class="player-section">
         <div v-if="!currentSrc" class="player-placeholder">
-          <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+          <el-icon :size="60" color="#ddd">
+            <VideoPlay />
+          </el-icon>
           <p>请输入 RTSP 转换服务地址并点击播放</p>
         </div>
         <VideoPlayer
@@ -216,8 +218,6 @@ function onError(error: any) {
 
 <style lang="scss" scoped>
 .page-container {
-  min-height: 100vh;
-  background-color: var(--bg-page);
 }
 
 .page-header {

src/views/demo/sample-videos.vue

@@ -23,7 +23,9 @@
     <!-- 播放器区域 -->
     <div class="player-section">
       <div v-if="!currentSrc" class="player-placeholder">
-        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <el-icon :size="60" color="#ddd">
+          <VideoPlay />
+        </el-icon>
         <p>请选择测试视频并点击播放</p>
       </div>
       <VideoPlayer
@@ -216,9 +218,6 @@ function onError(error: any) {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 1rem;
-  min-height: 100vh;
-  background-color: var(--bg-page);
 }
 
 .page-header {

src/views/demo/video-demo.vue

@@ -100,7 +100,9 @@
     <!-- 播放器区域 -->
     <div class="player-section">
       <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
-        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <el-icon :size="60" color="#ddd">
+          <VideoPlay />
+        </el-icon>
         <p>{{ t('请选择视频源并点击播放') }}</p>
       </div>
       <VideoPlayer
@@ -379,9 +381,6 @@ function onError(error: any) {
 
 <style lang="scss" scoped>
 .page-container {
-  // padding: 20px;
-  min-height: 100vh;
-  background-color: #f5f7fa;
 }
 
 .page-header {

src/views/demo/webrtc-stream.vue

@@ -65,7 +65,9 @@
       <!-- 播放器区域 -->
       <div class="player-section">
         <div v-if="!isPlaying" class="player-placeholder">
-          <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+          <el-icon :size="60" color="#ddd">
+            <VideoPlay />
+          </el-icon>
           <p>请配置 go2rtc 地址和流名称后点击播放</p>
         </div>
         <VideoPlayer
@@ -92,28 +94,44 @@
         <!-- PTZ 方向控制 九宫格 -->
         <div class="ptz-controls">
           <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopLeft /></el-icon>
+            <el-icon>
+              <TopLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Top /></el-icon>
+            <el-icon>
+              <Top />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><TopRight /></el-icon>
+            <el-icon>
+              <TopRight />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Back /></el-icon>
+            <el-icon>
+              <Back />
+            </el-icon>
           </div>
           <div class="ptz-btn ptz-center" @click="handlePTZStop">
-            <el-icon><Refresh /></el-icon>
+            <el-icon>
+              <Refresh />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Right /></el-icon>
+            <el-icon>
+              <Right />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><BottomLeft /></el-icon>
+            <el-icon>
+              <BottomLeft />
+            </el-icon>
           </div>
           <div class="ptz-btn" @mousedown="handlePTZ('DOWN')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
-            <el-icon><Bottom /></el-icon>
+            <el-icon>
+              <Bottom />
+            </el-icon>
           </div>
           <div
             class="ptz-btn"
@@ -121,7 +139,9 @@
             @mouseup="handlePTZStop"
             @mouseleave="handlePTZStop"
           >
-            <el-icon><BottomRight /></el-icon>
+            <el-icon>
+              <BottomRight />
+            </el-icon>
           </div>
         </div>
 
@@ -136,9 +156,13 @@
         <!-- 缩放控制 -->
         <div class="zoom-controls">
           <div class="zoom-header">
-            <el-icon><ZoomOut /></el-icon>
+            <el-icon>
+              <ZoomOut />
+            </el-icon>
             <span>缩放</span>
-            <el-icon><ZoomIn /></el-icon>
+            <el-icon>
+              <ZoomIn />
+            </el-icon>
           </div>
           <el-slider
             v-model="zoomValue"
@@ -494,9 +518,6 @@ async function handleZoomRelease() {
 
 <style lang="scss" scoped>
 .page-container {
-  background-color: var(--bg-page);
-  height: 100%;
-  overflow: auto;
 }
 
 .page-header {

src/views/live-stream/index.vue

@@ -685,10 +685,7 @@ onMounted(() => {
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  padding: 1rem;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 .search-form {
@@ -800,6 +797,7 @@ onMounted(() => {
     }
   }
 }
+
 .command-template {
   background: #f5f7fa;
   padding: 16px;

src/views/lss/index.vue

@@ -332,10 +332,7 @@ onMounted(() => {
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  padding: 1rem;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 .search-form {

src/views/machine/index.vue

@@ -510,10 +510,7 @@ onMounted(() => {
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  padding: 1rem;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 // 批量操作栏

src/views/stats/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="stats-container">
+  <div class="page-container">
     <!-- 刷新按钮 -->
     <el-card class="filter-card" shadow="hover">
       <el-form inline>
@@ -18,7 +18,9 @@
         <el-card shadow="hover" class="summary-card machines">
           <el-statistic title="机器总数" :value="statsData?.machineTotal || 0">
             <template #prefix>
-              <el-icon><Monitor /></el-icon>
+              <el-icon>
+                <Monitor />
+              </el-icon>
             </template>
           </el-statistic>
           <div class="stat-detail">已启用: {{ statsData?.machineEnabled || 0 }}</div>
@@ -28,7 +30,9 @@
         <el-card shadow="hover" class="summary-card cameras">
           <el-statistic title="摄像头总数" :value="statsData?.cameraTotal || 0">
             <template #prefix>
-              <el-icon><VideoCamera /></el-icon>
+              <el-icon>
+                <VideoCamera />
+              </el-icon>
             </template>
           </el-statistic>
           <div class="stat-detail">
@@ -41,7 +45,9 @@
         <el-card shadow="hover" class="summary-card channels">
           <el-statistic title="通道总数" :value="statsData?.channelTotal || 0">
             <template #prefix>
-              <el-icon><Connection /></el-icon>
+              <el-icon>
+                <Connection />
+              </el-icon>
             </template>
           </el-statistic>
           <div class="stat-detail">可用通道数量</div>
@@ -51,7 +57,9 @@
         <el-card shadow="hover" class="summary-card rate">
           <el-statistic title="摄像头在线率" :value="onlineRate" suffix="%">
             <template #prefix>
-              <el-icon><CircleCheck /></el-icon>
+              <el-icon>
+                <CircleCheck />
+              </el-icon>
             </template>
           </el-statistic>
           <div class="stat-detail">系统运行状态</div>
@@ -68,7 +76,9 @@
       </template>
       <el-empty description="详细统计功能开发中...">
         <template #image>
-          <el-icon :size="60" style="color: #c0c4cc"><TrendCharts /></el-icon>
+          <el-icon :size="60" style="color: #c0c4cc">
+            <TrendCharts />
+          </el-icon>
         </template>
       </el-empty>
     </el-card>
@@ -190,8 +200,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.stats-container {
-  // padding: 20px;
+.page-container {
 }
 
 .filter-card {

src/views/stream/live-list.vue

@@ -380,7 +380,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 20px;
 }
 
 .table-actions {

src/views/stream/video-list.vue

@@ -41,7 +41,9 @@
           >
             <template #error>
               <div class="image-error">
-                <el-icon><Picture /></el-icon>
+                <el-icon>
+                  <Picture />
+                </el-icon>
               </div>
             </template>
           </el-image>
@@ -110,7 +112,9 @@
     <!-- 上传弹窗 -->
     <el-dialog v-model="uploadDialogVisible" title="上传视频" width="500px" destroy-on-close>
       <el-upload drag :auto-upload="false" :limit="1" accept="video/*" :on-change="handleFileChange">
-        <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
+        <el-icon class="el-icon--upload">
+          <UploadFilled />
+        </el-icon>
         <div class="el-upload__text">
           拖拽视频文件到此处，或
           <em>点击上传</em>
@@ -457,7 +461,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 20px;
 }
 
 .search-form {

src/views/test/cc-simple.vue

@@ -31,8 +31,6 @@ function showMessage() {
 
 <style lang="scss" scoped>
 .page-container {
-  min-height: 100vh;
-  background-color: var(--bg-page);
 }
 
 .page-header {

src/views/test/m-table-demo.vue

@@ -324,12 +324,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 1rem;
-  box-sizing: border-box;
-  overflow: hidden;
 }
 
 .search-form {

src/views/user/index.vue

@@ -335,6 +335,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page-container {
   padding: var(--content-padding);
+  height: 100%;
+  overflow-y: auto;
 }
 
 .search-form {