From d4432a8ab6e710d08b38f60e56c3315ccb7d7430 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=A2=A6=E7=9A=84=E4=BA=BA?= <992246872@qq.com>
Date: Thu, 3 Jul 2025 17:25:29 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E5=A2=9E=E5=8A=A0=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                |   4 +-
 src/permission.ts           |   2 +-
 src/router/index.ts         |   5 ++
 src/views/test/xgplayer.vue | 140 ++++++++++++++++++++++++++++++++++++
 4 files changed, 149 insertions(+), 2 deletions(-)
 create mode 100644 src/views/test/xgplayer.vue

diff --git a/package.json b/package.json
index 6e2bcd92..7b67f1c1 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,9 @@
     "vue-json-pretty": "2.4.0",
     "vue-router": "4.5.0",
     "vue-types": "6.0.0",
-    "vxe-table": "4.13.7"
+    "vxe-table": "4.13.7",
+    "xgplayer": "^3.0.22",
+    "xgplayer-flv": "^3.0.22"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.276",
diff --git a/src/permission.ts b/src/permission.ts
index fb60b07c..77597d27 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -11,7 +11,7 @@ import { usePermissionStore } from '@/store/modules/permission';
 import { ElMessage } from 'element-plus/es';
 
 NProgress.configure({ showSpinner: false });
-const whiteList = ['/login', '/register', '/social-callback', '/register*', '/register/*'];
+const whiteList = ['/test/*', '/login', '/register', '/social-callback', '/register*', '/register/*'];
 
 const isWhiteList = (path: string) => {
   return whiteList.some((pattern) => isPathMatch(pattern, path));
diff --git a/src/router/index.ts b/src/router/index.ts
index a6497dbe..0a2505ce 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -42,6 +42,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     hidden: true,
     component: () => import('@/layout/components/SocialCallback/index.vue')
   },
+  {
+    path: '/test/xgplayer',
+    component: () => import('@/views/test/xgplayer.vue'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login.vue'),
diff --git a/src/views/test/xgplayer.vue b/src/views/test/xgplayer.vue
new file mode 100644
index 00000000..5bb5bd7a
--- /dev/null
+++ b/src/views/test/xgplayer.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <!-- 布局选择按钮 -->
+    <div class="layout-controls">
+      <button @click="setLayout(1)">1×1</button>
+      <button @click="setLayout(2)">2×2</button>
+      <button @click="setLayout(3)">3×3</button>
+      <button @click="setLayout(4)">4×4</button>
+    </div>
+
+    <!-- 视频容器 -->
+    <div class="video-container" :class="`grid-${layout}`">
+      <div v-for="n in layoutCount" :key="n" :id="`vs${n}`" class="video-item"></div>
+    </div>
+  </div>
+</template>
+
+<script setup name="xgplayer" lang="ts">
+import Player from 'xgplayer';
+import FlvPlugin from 'xgplayer-flv';
+import 'xgplayer/dist/index.min.css';
+import { ref, onMounted } from 'vue';
+
+const layout = ref<number>(1); // 当前布局大小：1×1、2×2...
+const players = ref<Record<string, any>>({}); // 存储播放器实例
+
+// 模拟视频流地址列表
+const videoUrls = [
+  'https://szaq.fjlyyc.com:38443/live/vsigf8eCxFu4f545f19bfe44352bcdc4/live.flv',
+  'your_flv_url_2',
+  'your_flv_url_3',
+  'your_flv_url_4',
+  'your_flv_url_5',
+  'your_flv_url_6',
+  'your_flv_url_7',
+  'your_flv_url_8',
+  'your_flv_url_9',
+  'your_flv_url_10',
+  'your_flv_url_11',
+  'your_flv_url_12',
+  'your_flv_url_13',
+  'your_flv_url_14',
+  'your_flv_url_15',
+  'your_flv_url_16'
+];
+
+// 计算当前需要显示的播放器数量
+const layoutCount = ref<number>(1);
+
+// 设置布局
+const setLayout = (size: number) => {
+  layout.value = size;
+  layoutCount.value = size * size;
+
+  // 下一帧再初始化播放器，确保 DOM 更新完成
+  nextTick(() => {
+    initPlayers();
+  });
+};
+
+// 初始化播放器
+const initPlayers = () => {
+  // 清除旧播放器
+  Object.values(players.value).forEach((player) => {
+    if (player && player.destroy) {
+      player.destroy();
+    }
+  });
+
+  players.value = {};
+
+  const totalPlayers = layoutCount.value;
+
+  for (let i = 1; i <= totalPlayers; i++) {
+    const url = videoUrls[(i - 1) % videoUrls.length]; // 循环使用 URL
+    try {
+      players.value[`player${i}`] = new Player({
+        id: `vs${i}`,
+        isLive: true,
+        plugins: [FlvPlugin],
+        url,
+        autoplay: true,
+        loop: true
+      });
+    } catch (error) {
+      console.error(`Player ${i} initialization failed:`, error);
+    }
+  }
+};
+
+onMounted(() => {
+  layoutCount.value = layout.value * layout.value;
+  initPlayers();
+});
+</script>
+
+<style lang="scss" scoped>
+.video-container {
+  width: 100vw; // 全屏宽度
+  height: 100vh; // 全屏高度
+  display: grid;
+  gap: 8px; // 窗口之间的间距
+  padding: 0; // 去掉内边距以确保填满
+  box-sizing: border-box;
+  background-color: #000;
+  position: relative;
+}
+
+.grid-1 {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+}
+
+.video-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  border: 1px solid #333;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+</style>
+