refactor: update styles and localization for improved UI consistency

- Removed hover background color from LangDropdown component.
- Replaced fixed gap in VideoGrid with a variable spacing value.
- Enhanced localization files for both English and Chinese to include new terms related to video monitoring.
- Adjusted styles in monitor index view for better layout and spacing.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/LangDropdown.vue

@@ -45,7 +45,6 @@ function handleLanguage(lang: string) {
     transition: background-color 0.2s;
 
     &:hover {
-      background-color: var(--lang-hover-bg, #faf5f6);
       color: var(--lang-hover-color, #409eff);
     }
   }

src/components/monitor/VideoGrid.vue

@@ -38,7 +38,7 @@ function getSlotByPosition(position: number): GridSlot | undefined {
 <style lang="scss" scoped>
 .video-grid {
   display: grid;
-  gap: 8px;
+  gap: var(--spacing-base);
   width: 100%;
   align-content: start;
 

src/locales/en.json

@@ -67,5 +67,9 @@
   "配置说明": "Configuration Description",
   "如何获取 Customer Subdomain": "How to get Customer Subdomain",
   "测试播放": "Test Playback",
-  "复制": "Copy"
-}
+  "复制": "Copy",
+  "WebRTC 流": "WebRTC Stream",
+  "多视频监控": "Multi-Video Monitoring",
+  "新建标签": "New Tab",
+  "Stream 管理": "Stream Management"
+}

src/locales/zh-cn.json

@@ -67,5 +67,9 @@
   "配置说明": "配置说明",
   "如何获取 Customer Subdomain": "如何获取 Customer Subdomain",
   "测试播放": "测试播放",
-  "复制": "复制"
-}
+  "复制": "复制",
+  "WebRTC 流": "WebRTC 流",
+  "多视频监控": "多视频监控",
+  "新建标签": "新建标签",
+  "Stream 管理": "Stream 管理"
+}

src/views/monitor/index.vue

@@ -149,7 +149,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   height: calc(100vh - 100px);
-  background-color: var(--bg-page);
+  // background-color: var(--bg-container);
 
   // 全局去除圆角
   :deep(.el-button) {
@@ -178,7 +178,7 @@ onMounted(() => {
   padding: 12px 16px;
   background-color: var(--bg-container);
   border-radius: var(--radius-base);
-  margin-bottom: 12px;
+  margin-bottom: var(--spacing-base);
 
   .toolbar-left {
     display: flex;
@@ -194,7 +194,11 @@ onMounted(() => {
 }
 
 .monitor-tabs {
-  margin-bottom: 12px;
+  margin-bottom: 0;
+  background-color: var(--bg-container);
+  padding-top: var(--spacing-base);
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
 
   :deep(.el-tabs__header) {
     margin: 0;
@@ -220,7 +224,10 @@ onMounted(() => {
   flex: 1;
   background-color: var(--bg-container);
   border-radius: var(--radius-base);
-  padding: 12px;
+  // padding-top: var(--spacing-base);
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+  padding-bottom: var(--spacing-base);
   overflow: auto;
 }
 </style>