feat: enhance internationalization for monitor group features

- Integrated the useI18n function for dynamic translation of monitor group names in the useMonitorStore composable.
- Updated localization files to include new terms and improved translations for video management features in both English and Chinese.
- Set default language to English if not specified in localStorage for better user experience.

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

src/composables/useMonitorStore.ts

@@ -1,4 +1,7 @@
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 export interface GridSlot {
   position: number
@@ -26,7 +29,7 @@ function generateId(): string {
 function createDefaultTab(): MonitorTab {
   return {
     id: generateId(),
-    name: '监控组1',
+    name: t('监控组') + ' ' + '1',
     gridSize: 2,
     slots: []
   }
@@ -81,7 +84,7 @@ export function useMonitorStore() {
   function addTab() {
     const newTab: MonitorTab = {
       id: generateId(),
-      name: `监控组${tabs.value.length + 1}`,
+      name: t('监控组') + ' ' + `${tabs.value.length + 1}`,
       gridSize: 2,
       slots: []
     }

src/locales/en.json

@@ -58,7 +58,7 @@
   "版本": "Version",
   "正常": "Normal",
   "获取统计数据失败": "Failed to get statistics",
-  "Cloudflare Stream 配置": "Cloudflare Stream 配置",
+  "Cloudflare Stream 配置": "Cloudflare Stream Configuration",
   "播放域名的子域名部分": "The subdomain part of the playback domain",
   "仅在前端直接调用 API 时需要（不推荐）": "Only needed when directly calling the API in the frontend (not recommended)",
   "推荐通过后端代理调用，避免暴露 Token": "Recommended to call through the backend proxy to avoid exposing the Token",
@@ -75,11 +75,42 @@
   "Video Test": "Video Test",
   "直接 URL": "Direct URL",
   "RTSP 流": "RTSP Stream",
-  "測试视频": "Test Video",
+  "测试视频": "Test Video",
   "M3U8/HLS": "M3U8/HLS",
   "Stream": "Stream",
   "Management": "Management",
-  "Video Management": "Video Management",
-  "Live Management": "Live Management",
-  "Stream Configuration": "Stream Configuration"
+  "直接 URL 播放": "Direct URL Playback",
+  "播放": "Play",
+  "清空": "Clear",
+  "请输入视频地址并点击播放": "Please enter video URL and click play",
+  "暂停": "Pause",
+  "停止": "Stop",
+  "截图": "Screenshot",
+  "全屏": "Fullscreen",
+  "静音": "Muted",
+  "有声": "Sound",
+  "自动播放": "Autoplay",
+  "手动": "Manual",
+  "事件日志": "Event Log",
+  "暂无日志": "No logs",
+  "视频播放测试": "Video Playback Test",
+  "视频地址": "Video URL",
+  "播放器类型": "Player Type",
+  "Cloudflare Stream": "Cloudflare Stream",
+  "Video ID": "Video ID",
+  "自定义域名": "Custom Domain",
+  "播放方式": "Playback Method",
+  "生成地址": "Generate URL",
+  "生成的地址": "Generated URL",
+  "转换服务地址": "Proxy Service URL",
+  "RTSP 流需要通过服务端转换为 HLS/WebRTC 后才能在浏览器播放": "RTSP streams need to be converted to HLS/WebRTC via server before playing in browser",
+  "选择测试源": "Select Test Source",
+  "播放测试视频": "Play Test Video",
+  "请选择视频源并点击播放": "Please select video source and click play",
+  "当前状态": "Current Status",
+  "iframe 模式": "iframe Mode",
+  "是": "Yes",
+  "否": "No",
+  "快速测试": "Quick Test",
+  "监控组": "Monitor Group"
 }

src/locales/index.ts

@@ -11,11 +11,11 @@ const messages = {
   }
 }
 
-// 默认语言从环境变量获取
-const DEFAULT_LANG = import.meta.env.VITE_APP_LANG || 'zh-cn'
+// 默认语言从环境变量获取，默认英文
+const DEFAULT_LANG = import.meta.env.VITE_APP_LANG || 'en'
 
-// 开发环境下重置语言为环境变量值（方便调试）
-if (import.meta.env.DEV) {
+// 如果 localStorage 没有设置语言，使用默认语言
+if (!localStorage.getItem('language')) {
   localStorage.setItem('language', JSON.stringify(DEFAULT_LANG))
 }
 

src/locales/zh-cn.json

@@ -74,12 +74,46 @@
   "Stream 管理": "Stream 管理",
   "直接 URL": "直接 URL",
   "RTSP 流": "RTSP 流",
-  "測试视频": "測试视频",
+  "测试视频": "测试视频",
   "M3U8/HLS": "M3U8/HLS",
   "Stream": "Stream",
   "Management": "Management",
   "Video Management": "视频管理",
   "Live Management": "直播管理",
   "Stream Configuration": "Stream 配置",
-  "快速测试": "快速测试"
+  "快速测试": "快速测试",
+  "直接 URL 播放": "直接 URL 播放",
+  "播放": "播放",
+  "清空": "清空",
+  "请输入视频地址并点击播放": "请输入视频地址并点击播放",
+  "暂停": "暂停",
+  "停止": "停止",
+  "截图": "截图",
+  "全屏": "全屏",
+  "静音": "静音",
+  "有声": "有声",
+  "自动播放": "自动播放",
+  "手动": "手动",
+  "事件日志": "事件日志",
+  "暂无日志": "暂无日志",
+  "视频播放测试": "视频播放测试",
+  "视频地址": "视频地址",
+  "播放器类型": "播放器类型",
+  "Cloudflare Stream": "Cloudflare Stream",
+  "Video ID": "Video ID",
+  "自定义域名": "自定义域名",
+  "播放方式": "播放方式",
+  "生成地址": "生成地址",
+  "生成的地址": "生成的地址",
+  "转换服务地址": "转换服务地址",
+  "RTSP 流需要通过服务端转换为 HLS/WebRTC 后才能在浏览器播放": "RTSP 流需要通过服务端转换为 HLS/WebRTC 后才能在浏览器播放",
+  "选择测试源": "选择测试源",
+  "播放测试视频": "播放测试视频",
+  "请选择视频源并点击播放": "请选择视频源并点击播放",
+  "当前状态": "当前状态",
+  "iframe 模式": "iframe 模式",
+  "是": "是",
+  "否": "否",
+  "Video Test": "视频测试",
+  "监控组": "监控组"
 }