refactor: enhance localization in video demo and direct URL components

- Updated text elements in both the video demo and direct URL components to utilize the localization function for improved internationalization support.
- Ensured all user-facing strings are wrapped with the translation function for better localization management.

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

src/views/demo/direct-url.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-container">
     <div class="page-header">
-      <span class="title">直接 URL 播放</span>
+      <span class="title">{{ t('直接 URL 播放') }}</span>
     </div>
 
     <!-- 配置区域 -->
@@ -11,8 +11,8 @@
           <el-input v-model="urlConfig.url" placeholder="输入 MP4/WebM 等视频地址" style="width: 600px" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="playUrl">播放</el-button>
-          <el-button @click="urlConfig.url = ''">清空</el-button>
+          <el-button type="primary" @click="playUrl">{{ t('播放') }}</el-button>
+          <el-button @click="urlConfig.url = ''">{{ t('清空') }}</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -21,7 +21,7 @@
     <div class="player-section">
       <div v-if="!currentSrc" class="player-placeholder">
         <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
-        <p>请输入视频地址并点击播放</p>
+        <p>{{ t('请输入视频地址并点击播放') }}</p>
       </div>
       <VideoPlayer
         v-else
@@ -41,31 +41,31 @@
     <!-- 播放控制 -->
     <div class="control-section">
       <el-space wrap>
-        <el-button type="primary" @click="handlePlay">播放</el-button>
-        <el-button @click="handlePause">暂停</el-button>
-        <el-button type="danger" @click="handleStop">停止</el-button>
-        <el-button @click="handleScreenshot">截图</el-button>
-        <el-button @click="handleFullscreen">全屏</el-button>
+        <el-button type="primary" @click="handlePlay">{{ t('播放') }}</el-button>
+        <el-button @click="handlePause">{{ t('暂停') }}</el-button>
+        <el-button type="danger" @click="handleStop">{{ t('停止') }}</el-button>
+        <el-button @click="handleScreenshot">{{ t('截图') }}</el-button>
+        <el-button @click="handleFullscreen">{{ t('全屏') }}</el-button>
 
         <el-divider direction="vertical" />
 
-        <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
-        <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
+        <el-switch v-model="playConfig.muted" :active-text="t('静音')" :inactive-text="t('有声')" />
+        <el-switch v-model="playConfig.autoplay" :active-text="t('自动播放')" :inactive-text="t('手动')" />
       </el-space>
     </div>
 
     <!-- 日志区域 -->
     <div class="log-section">
       <div class="log-header">
-        <h4>事件日志</h4>
-        <el-button size="small" @click="logs = []">清空</el-button>
+        <h4>{{ t('事件日志') }}</h4>
+        <el-button size="small" @click="logs = []">{{ t('清空') }}</el-button>
       </div>
       <div class="log-content">
         <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
           <span class="time">{{ log.time }}</span>
           <span class="message">{{ log.message }}</span>
         </div>
-        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+        <div v-if="logs.length === 0" class="log-empty">{{ t('暂无日志') }}</div>
       </div>
     </div>
   </div>
@@ -76,6 +76,9 @@ import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { VideoPlay } from '@element-plus/icons-vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const playerRef = ref<InstanceType<typeof VideoPlayer>>()
 

src/views/demo/video-demo.vue

@@ -1,58 +1,58 @@
 <template>
   <div class="page-container">
     <div class="page-header">
-      <span class="title">视频播放测试</span>
+      <span class="title">{{ t('视频播放测试') }}</span>
     </div>
 
     <!-- 播放方式选择 -->
     <div class="config-section">
       <el-tabs v-model="activeTab" type="border-card">
         <!-- 方式1: 直接输入 URL -->
-        <el-tab-pane label="直接 URL" name="url">
+        <el-tab-pane :label="t('直接 URL')" name="url">
           <el-form label-width="120px">
-            <el-form-item label="视频地址">
+            <el-form-item :label="t('视频地址')">
               <el-input v-model="urlConfig.url" placeholder="输入 HLS/MP4/WebM 等视频地址" style="width: 600px" />
             </el-form-item>
-            <el-form-item label="播放器类型">
+            <el-form-item :label="t('播放器类型')">
               <el-select v-model="urlConfig.playerType" style="width: 200px">
                 <el-option label="HLS.js (推荐)" value="hls" />
                 <el-option label="原生 Video" value="native" />
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="playUrl">播放</el-button>
-              <el-button @click="urlConfig.url = ''">清空</el-button>
+              <el-button type="primary" @click="playUrl">{{ t('播放') }}</el-button>
+              <el-button @click="urlConfig.url = ''">{{ t('清空') }}</el-button>
             </el-form-item>
           </el-form>
         </el-tab-pane>
 
         <!-- 方式2: Cloudflare Stream -->
-        <el-tab-pane label="Cloudflare Stream" name="cloudflare">
+        <el-tab-pane :label="t('Cloudflare Stream')" name="cloudflare">
           <el-form label-width="120px">
-            <el-form-item label="Video ID">
+            <el-form-item :label="t('Video ID')">
               <el-input v-model="cfConfig.videoId" placeholder="Cloudflare Stream Video ID" style="width: 400px" />
             </el-form-item>
-            <el-form-item label="自定义域名">
+            <el-form-item :label="t('自定义域名')">
               <el-input
                 v-model="cfConfig.customerDomain"
                 placeholder="customer-xxx.cloudflarestream.com"
                 style="width: 400px"
               />
             </el-form-item>
-            <el-form-item label="播放方式">
+            <el-form-item :label="t('播放方式')">
               <el-select v-model="cfConfig.playMode" style="width: 200px">
                 <el-option label="iframe 嵌入" value="iframe" />
                 <el-option label="HLS 播放" value="hls" />
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="playCloudflare">播放</el-button>
-              <el-button @click="generateCfUrl">生成地址</el-button>
+              <el-button type="primary" @click="playCloudflare">{{ t('播放') }}</el-button>
+              <el-button @click="generateCfUrl">{{ t('生成地址') }}</el-button>
             </el-form-item>
-            <el-form-item v-if="cfGeneratedUrl" label="生成的地址">
+            <el-form-item v-if="cfGeneratedUrl" :label="t('生成的地址')">
               <el-input :value="cfGeneratedUrl" readonly style="width: 600px">
                 <template #append>
-                  <el-button @click="copyUrl(cfGeneratedUrl)">复制</el-button>
+                  <el-button @click="copyUrl(cfGeneratedUrl)">{{ t('复制') }}</el-button>
                 </template>
               </el-input>
             </el-form-item>
@@ -60,37 +60,37 @@
         </el-tab-pane>
 
         <!-- 方式3: RTSP 转换 -->
-        <el-tab-pane label="RTSP 流" name="rtsp">
+        <el-tab-pane :label="t('RTSP 流')" name="rtsp">
           <el-form label-width="120px">
-            <el-form-item label="RTSP 地址">
+            <el-form-item :label="t('RTSP 地址')">
               <el-input
                 v-model="rtspConfig.rtspUrl"
                 placeholder="rtsp://username:password@ip:port/stream"
                 style="width: 600px"
               />
             </el-form-item>
-            <el-form-item label="转换服务地址">
+            <el-form-item :label="t('转换服务地址')">
               <el-input v-model="rtspConfig.proxyUrl" placeholder="http://localhost:8080/stream" style="width: 400px" />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="playRtsp">播放</el-button>
+              <el-button type="primary" @click="playRtsp">{{ t('播放') }}</el-button>
             </el-form-item>
             <el-alert type="info" :closable="false" style="margin-top: 10px">
-              RTSP 流需要通过服务端转换为 HLS/WebRTC 后才能在浏览器播放
+              {{ t('RTSP 流需要通过服务端转换为 HLS/WebRTC 后才能在浏览器播放') }}
             </el-alert>
           </el-form>
         </el-tab-pane>
 
         <!-- 方式4: 测试视频 -->
-        <el-tab-pane label="测试视频" name="sample">
+        <el-tab-pane :label="t('测试视频')" name="sample">
           <el-form label-width="120px">
-            <el-form-item label="选择测试源">
+            <el-form-item :label="t('选择测试源')">
               <el-select v-model="sampleConfig.selected" style="width: 400px">
                 <el-option v-for="item in sampleVideos" :key="item.url" :label="item.name" :value="item.url" />
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="playSample">播放测试视频</el-button>
+              <el-button type="primary" @click="playSample">{{ t('播放测试视频') }}</el-button>
             </el-form-item>
           </el-form>
         </el-tab-pane>
@@ -101,7 +101,7 @@
     <div class="player-section">
       <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
         <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
-        <p>请选择视频源并点击播放</p>
+        <p>{{ t('请选择视频源并点击播放') }}</p>
       </div>
       <VideoPlayer
         v-else
@@ -124,26 +124,26 @@
     <!-- 播放控制 -->
     <div class="control-section">
       <el-space wrap>
-        <el-button type="primary" @click="handlePlay">播放</el-button>
-        <el-button @click="handlePause">暂停</el-button>
-        <el-button type="danger" @click="handleStop">停止</el-button>
-        <el-button @click="handleScreenshot">截图</el-button>
-        <el-button @click="handleFullscreen">全屏</el-button>
+        <el-button type="primary" @click="handlePlay">{{ t('播放') }}</el-button>
+        <el-button @click="handlePause">{{ t('暂停') }}</el-button>
+        <el-button type="danger" @click="handleStop">{{ t('停止') }}</el-button>
+        <el-button @click="handleScreenshot">{{ t('截图') }}</el-button>
+        <el-button @click="handleFullscreen">{{ t('全屏') }}</el-button>
 
         <el-divider direction="vertical" />
 
-        <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
-        <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
+        <el-switch v-model="playConfig.muted" :active-text="t('静音')" :inactive-text="t('有声')" />
+        <el-switch v-model="playConfig.autoplay" :active-text="t('自动播放')" :inactive-text="t('手动')" />
       </el-space>
     </div>
 
     <!-- 当前状态 -->
     <div class="status-section">
-      <el-descriptions title="当前状态" :column="3" border>
-        <el-descriptions-item label="播放器类型">{{ currentPlayerType }}</el-descriptions-item>
-        <el-descriptions-item label="iframe 模式">{{ useIframe ? '是' : '否' }}</el-descriptions-item>
-        <el-descriptions-item label="Video ID">{{ currentVideoId || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="视频地址" :span="3">
+      <el-descriptions :title="t('当前状态')" :column="3" border>
+        <el-descriptions-item :label="t('播放器类型')">{{ currentPlayerType }}</el-descriptions-item>
+        <el-descriptions-item :label="t('iframe 模式')">{{ useIframe ? t('是') : t('否') }}</el-descriptions-item>
+        <el-descriptions-item :label="t('Video ID')">{{ currentVideoId || '-' }}</el-descriptions-item>
+        <el-descriptions-item :label="t('视频地址')" :span="3">
           <el-text truncated style="max-width: 800px">{{ currentSrc || '-' }}</el-text>
         </el-descriptions-item>
       </el-descriptions>
@@ -152,15 +152,15 @@
     <!-- 日志区域 -->
     <div class="log-section">
       <div class="log-header">
-        <h4>事件日志</h4>
-        <el-button size="small" @click="logs = []">清空</el-button>
+        <h4>{{ t('事件日志') }}</h4>
+        <el-button size="small" @click="logs = []">{{ t('清空') }}</el-button>
       </div>
       <div class="log-content">
         <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
           <span class="time">{{ log.time }}</span>
           <span class="message">{{ log.message }}</span>
         </div>
-        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+        <div v-if="logs.length === 0" class="log-empty">{{ t('暂无日志') }}</div>
       </div>
     </div>
   </div>
@@ -171,6 +171,9 @@ import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { VideoPlay } from '@element-plus/icons-vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const playerRef = ref<InstanceType<typeof VideoPlayer>>()
 const activeTab = ref('url')