diff --git a/front_end/src/App.vue b/front_end/src/App.vue
index 7d5b38cd..c36ecae2 100644
--- a/front_end/src/App.vue
+++ b/front_end/src/App.vue
@@ -48,6 +48,7 @@
 
         <el-container class="mainheight">
             <el-main class="common-layout">
+                <PlayerDialog />
                 <router-view />
                 <Footer />
             </el-main>
@@ -73,6 +74,7 @@ import { ref, onMounted, computed } from "vue";
 import LanguagePicker from "./components/widgets/LanguagePicker.vue";
 import Login from "./components/Login.vue";
 import Footer from "./components/Footer.vue";
+import PlayerDialog from "./components/PlayerDialog.vue";
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
 import { useLocalStore, useUserStore } from "./store";
 const store = useUserStore();
diff --git a/front_end/src/components/PlayerDialog.vue b/front_end/src/components/PlayerDialog.vue
new file mode 100644
index 00000000..193e7e70
--- /dev/null
+++ b/front_end/src/components/PlayerDialog.vue
@@ -0,0 +1,79 @@
+<template>
+    <el-dialog v-model="videoplayerstore.visible" style="backdrop-filter: blur(1px);" draggable align-center destroy-on-close
+        :modal="false" :lock-scroll="false">
+        <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
+            src="/flop/index.html" ref="video_iframe"></iframe>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+
+import { useVideoPlayerStore } from '@/store';
+import useCurrentInstance from '@/utils/common/useCurrentInstance';
+import { watch } from 'vue';
+import { generalNotification } from '@/utils/system/status';
+import { useI18n } from 'vue-i18n';
+const { proxy } = useCurrentInstance();
+const videoplayerstore = useVideoPlayerStore();
+const t = useI18n();
+
+watch(videoplayerstore, () => {
+    if (videoplayerstore.visible) {
+        preview(videoplayerstore.id)
+    }
+})
+
+const preview = (id: Number | undefined) => {
+    if (!id) {
+        return
+    }
+    (window as any).flop = null;
+    proxy.$axios.get('/video/get_software/',
+        {
+            params: {
+                id,
+            }
+        }
+    ).then(function (response) {
+        let url = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
+        // console.log(url);
+        if (response.data.msg == "a") {
+            url += ".avf";
+        } else if (response.data.msg == "e") {
+            url += ".evf";
+        }
+
+        if ((window as any).flop) {
+            playVideo(url);
+        } else {
+            (window as any).flop = {
+                onload: async function () {
+                    playVideo(url);
+                },
+            }
+        }
+    }).catch((error: any) => {
+        generalNotification(t, error.response.status, t.t('common.action.getSoftware'))
+    })
+}
+
+const playVideo = function (url: string) {
+    (window as any).flop.playVideo(url, {
+        share: {
+            uri: url,
+            pathname: "/flop-player/player",
+            anonymous: false,
+            background: "rgba(100, 100, 100, 0.05)",
+            title: "Flop Player Share",
+            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
+        },
+        anonymous: false,
+        background: "rgba(0, 0, 0, 0)",
+        listener: function () {
+            videoplayerstore.visible = false;
+            (window as any).flop = null;
+        },
+    });
+}
+
+</script>
\ No newline at end of file
diff --git a/front_end/src/components/PreviewDownload.vue b/front_end/src/components/PreviewDownload.vue
index 8d6d73e7..ef1b16e2 100644
--- a/front_end/src/components/PreviewDownload.vue
+++ b/front_end/src/components/PreviewDownload.vue
@@ -1,29 +1,20 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-model="preview_visible"
-            style="background-color: rgba(240, 240, 240, 0.48); backdrop-filter: blur(1px);" draggable align-center
-            destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
-    <el-button :size="'small'" plain icon="View" @click="preview($event, id);">预览</el-button>
+    <el-button :size="'small'" plain icon="View" @click="preview(id);">预览</el-button>
     <el-button :size="'small'" plain icon="Download" @click="download($event, id)">下载</el-button>
 </template>
 
 <script setup lang="ts" name="PreviewDownload">
 // 拟弃用
 // 两个按钮，预览或下载
-import { onMounted, watch, ref, toRefs } from "vue";
+import { onMounted, ref } from "vue";
 // import axios from 'axios';
 // import { getCurrentInstance } from 'vue';
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
+import { preview } from "@/utils/common/PlayerDialog";
 
 const { proxy } = useCurrentInstance();
 // import { genFileId, ElMessage } from 'element-plus'
 
-
-const preview_visible = ref(false);
 // const hashkey = ref("");
 
 const { id } = defineProps({
@@ -60,78 +51,6 @@ const { id } = defineProps({
 //   onSuccess(`https://example.com/${id}.avf`)
 // }
 
-const preview = (event: MouseEvent, id: Number | undefined) => {
-    if (!id) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-
-        // (window as any).flop.playVideo(uri);
-        if ((window as any).flop) {
-            // console.log("985", 'playVideo' in window.flop);
-            // console.log("523", window.flop.hasOwnProperty('playVideo'));
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    // console.log("444", window.flop);
-                    // console.log("111", window.flop.playVideo);
-                    playVideo(uri);
-                },
-            }
-        }
-
-        // console.log("333", window.flop);
-        // console.log("777", window.flop.playVideo);
-        // window.flop = null;
-        // playVideo(uri);
-
-        // 等待 Flop Player 初始化完成
-        // (window as any).flop = {
-        // 	onload: () => {
-        // 		// 具体参数说明参见：https://github.com/hgraceb/flop-player#flopplayvideouri-options
-        // 		(window as any).flop.playVideo(uri, {
-        // 			share: {
-        // 				uri: uri,
-        // 				pathname: "/flop-player/player",
-        // 				anonymous: false,
-        // 				background: "rgba(100, 100, 100, 0.05)",
-        // 				title: "Flop Player Share",
-        // 				favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        // 			},
-        // 			anonymous: false,
-        // 			background: "rgba(0, 0, 0, 0)",
-        // 			listener: function () {
-        // 				preview_visible.value = false;
-        // 			},
-        // 		});
-        // 	},
-        // };
-
-    }).catch(
-        (res) => {
-            // console.log("报错");
-            // console.log(res);
-        }
-    )
-}
-
 
 const download = (event: MouseEvent, id: Number | undefined) => {
     if (!id) {
@@ -150,29 +69,6 @@ const download = (event: MouseEvent, id: Number | undefined) => {
 // 	flop: any
 // }
 
-const playVideo = function (uri: string) {
-    // console.log(uri);
-
-    // console.log("747", window.flop);
-    // console.log("585", window.flop.playVideo);
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
 onMounted(() => {
 
     // (window as any).flop = {
diff --git a/front_end/src/components/PreviewNumber.vue b/front_end/src/components/PreviewNumber.vue
index f79987dc..5fabc4cd 100644
--- a/front_end/src/components/PreviewNumber.vue
+++ b/front_end/src/components/PreviewNumber.vue
@@ -1,24 +1,11 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-if="preview_visible" v-model="preview_visible" style="backdrop-filter: blur(1px);" draggable
-            align-center destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
     <el-link v-if="data.id" :underline="false" @click="preview(data.id);" class="clickable">{{ data.text }}</el-link>
     <span v-else>--</span>
 </template>
 
 <script setup lang="ts" name="PreviewNumber">
 // 某个数字或字符串，点击后预览
-import { ref } from "vue";
-import useCurrentInstance from "@/utils/common/useCurrentInstance";
-import { generalNotification } from "@/utils/system/status";
-import { useI18n } from "vue-i18n";
-const { proxy } = useCurrentInstance();
-const preview_visible = ref(false);
-const t = useI18n();
+import { preview } from '@/utils/common/PlayerDialog';
 
 const data = defineProps({
     id: {
@@ -29,62 +16,6 @@ const data = defineProps({
     },
 })
 
-
-const preview = (id: Number | undefined) => {
-    if (!id) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-        if ((window as any).flop) {
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    playVideo(uri);
-                },
-            }
-        }
-    }).catch((error: any) => {
-        generalNotification(t, error.response.status, t.t('common.action.getSoftware'))
-    })
-}
-
-const playVideo = function (uri: string) {
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
-
 </script>
 
 <style lang="less" scoped></style>
\ No newline at end of file
diff --git a/front_end/src/components/VideoList.vue b/front_end/src/components/VideoList.vue
index 5b610990..36ad5725 100644
--- a/front_end/src/components/VideoList.vue
+++ b/front_end/src/components/VideoList.vue
@@ -1,13 +1,5 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-model="preview_visible"
-            style="backdrop-filter: blur(1px);" draggable align-center
-            destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
-    <el-table :data="videos_trans" :show-header="false" @row-click="preview" table-layout="auto"
+    <el-table :data="videos_trans" :show-header="false" @row-click="(row: any) => preview(row.key)" table-layout="auto"
         style="width: 100%;font-size: 16px;user-select: none;">
         <el-table-column prop="time" min-width="200" :formatter="simple_formatter(utc_to_local_format)"/>
         <el-table-column v-if="need_player_name" min-width="80">
@@ -41,16 +33,15 @@
 import { ref, computed } from 'vue'
 import { utc_to_local_format } from "@/utils/system/tools";
 import PlayerName from '@/components/PlayerName.vue';
-const preview_visible = ref(false);
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
 import { Check, Close } from '@element-plus/icons-vue';
 import { ElNotification } from 'element-plus';
+import { preview } from '@/utils/common/PlayerDialog';
 
 import { useUserStore } from '@/store';
 const store = useUserStore()
 
 import { ms_to_s, approve, freeze, simple_formatter } from '@/utils';
-import { generalNotification } from '@/utils/system/status';
 import { useI18n } from 'vue-i18n';
 const { proxy } = useCurrentInstance();
 
@@ -115,63 +106,6 @@ const videos_trans = computed(() => {
 
 // console.log(videos_trans);
 
-
-const preview = (row: any, column: any, event: Event) => {
-
-    if (!row.key) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id: row.key,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + row.key;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-        if ((window as any).flop) {
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    playVideo(uri);
-                },
-            }
-        }
-    }).catch((error: any) => {
-        generalNotification(t, error.response.status, t.t('common.action.getSoftware'));
-    })
-}
-
-
-const playVideo = function (uri: string) {
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
 const handleApprove = async function (row: any) {
     let status = await approve(proxy, row.key);
     if (status == 'True') {
diff --git a/front_end/src/store/index.ts b/front_end/src/store/index.ts
index 8535a639..bdcf1c0a 100644
--- a/front_end/src/store/index.ts
+++ b/front_end/src/store/index.ts
@@ -29,6 +29,13 @@ export const useUserStore = defineStore('user', {
     ),
 })
 
+export const usePlayerStore = defineStore('player', {
+    state: () => ({
+        visible: false,
+        id: 0,
+    }),
+})
+
 export const useLocalStore = defineStore('local', {
     state: () => ({
         darkmode: false,
diff --git a/front_end/src/utils/common/PlayerDialog.ts b/front_end/src/utils/common/PlayerDialog.ts
new file mode 100644
index 00000000..ed32b8b1
--- /dev/null
+++ b/front_end/src/utils/common/PlayerDialog.ts
@@ -0,0 +1,11 @@
+import { useVideoPlayerStore } from "@/store";
+
+const videoplayerstore = useVideoPlayerStore();
+
+export const preview = (id: number | undefined) => {
+    if (!id) {
+        return;
+    }
+    videoplayerstore.id = id;
+    videoplayerstore.visible = true;
+}
\ No newline at end of file
diff --git a/front_end/src/utils/system/status.ts b/front_end/src/utils/system/status.ts
index 06cc6455..c74bd644 100644
--- a/front_end/src/utils/system/status.ts
+++ b/front_end/src/utils/system/status.ts
@@ -1,6 +1,5 @@
 import { useLocalStore } from "@/store";
 import { ElNotification } from "element-plus"
-const local = useLocalStore();
 
 const notificationType = ['', '', 'success', '', 'error', 'error'];
 const notificationTitle = ['', '', 'common.msg.actionSuccess', '', 'common.msg.actionFail', 'common.msg.actionFail'];
@@ -21,6 +20,6 @@ export function generalNotification(t: any, status: number, action: string) {
         title: t.t(notificationTitle[type], [action]),
         message: t.t(notificationMessage[status]),
         type: notificationType[type],
-        duration: local.notification_duration,
+        duration: localStorage.getItem('local').notification_duration,
     })
 }
diff --git a/front_end/src/views/VideoView.vue b/front_end/src/views/VideoView.vue
index 0d294247..aa90505b 100644
--- a/front_end/src/views/VideoView.vue
+++ b/front_end/src/views/VideoView.vue
@@ -1,12 +1,4 @@
 <template>
-    <Teleport to=".common-layout">
-        <el-dialog v-model="preview_visible"
-            style="background-color: rgba(240, 240, 240, 0.48); backdrop-filter: blur(1px);" draggable align-center
-            destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
-                src="/flop/index.html" ref="video_iframe"></iframe>
-        </el-dialog>
-    </Teleport>
     <el-row class="mb-4" style="margin-bottom: 10px;">
         <el-button v-for="(tag, key) in level_tags" type="warning" :plain="!(level_tag_selected == key)" :size="'small'"
             @click="level_tag_selected = key as string; request_videos();">{{ $t('common.level.' + tag.key)
@@ -25,7 +17,7 @@
     </el-row>
 
     <div style="font-size:20px;margin: auto;margin-top: 10px;">
-        <el-table :data="videoList" @sort-change="handleSortChange" @row-click="preview" border table-layout="auto">
+        <el-table :data="videoList" @sort-change="handleSortChange" @row-click="(row: any) => preview(row.id)" border table-layout="auto">
             <el-table-column type="index" :index="offsetIndex" fixed></el-table-column>
             <el-table-column :label="$t('common.prop.realName')" v-slot="scope" width="auto">
                 <span class="nobr">
@@ -51,20 +43,18 @@
 
 <script lang="ts" setup>
 // 全网录像的检索器，根据三个维度排序
-import { onMounted, ref, Ref, reactive } from 'vue'
+import { onMounted, ref, reactive } from 'vue'
 import useCurrentInstance from "@/utils/common/useCurrentInstance";
-import PreviewDownload from '@/components/PreviewDownload.vue';
 import PlayerName from '@/components/PlayerName.vue';
 const { proxy } = useCurrentInstance();
 import { utc_to_local_format } from "@/utils/system/tools";
 import { ms_to_s } from "@/utils";
-import { genFileId, ElMessage } from 'element-plus'
+import { preview } from '@/utils/common/PlayerDialog';
 
 import { useI18n } from 'vue-i18n';
+import { generalNotification } from '@/utils/system/status';
 const t = useI18n();
 
-const preview_visible = ref(false);
-
 const level_tag_selected = ref("EXPERT");
 const mode_tag_selected = ref("STD");
 const index_tag_selected = ref("timems");
@@ -258,9 +248,8 @@ const request_videos = () => {
         videoList.splice(0, videoList.length);
         videoList.push(...data.videos);
         state.VideoCount = data.count;
-    }).catch(() => {
-        // 触发限流
-        ElMessage.error({ message: '请稍后再试', offset: 68 });
+    }).catch((error: any) => {
+        generalNotification(t, error.response.status, t.t('common.action.videoQuery'))
     })
 }
 
@@ -268,66 +257,6 @@ const index_select = (key: string | number, value: NameKeyReverse) => {
     index_tags[key].selected = !value.selected;
 }
 
-const preview = (row: any) => {
-    var id = row.id
-    if (!id) {
-        return
-    }
-    (window as any).flop = null;
-    preview_visible.value = true;
-    proxy.$axios.get('/video/get_software/',
-        {
-            params: {
-                id,
-            }
-        }
-    ).then(function (response) {
-        let uri = import.meta.env.VITE_BASE_API + "/video/preview/?id=" + id;
-        // console.log(uri);
-        if (response.data.msg == "a") {
-            uri += ".avf";
-        } else if (response.data.msg == "e") {
-            uri += ".evf";
-        }
-
-        if ((window as any).flop) {
-            playVideo(uri);
-        } else {
-            (window as any).flop = {
-                onload: async function () {
-                    playVideo(uri);
-                },
-            }
-        }
-    }).catch(
-        (res) => {
-            // console.log("报错");
-            // console.log(res);
-        }
-    )
-}
-
-
-const playVideo = function (uri: string) {
-    (window as any).flop.playVideo(uri, {
-        share: {
-            uri: uri,
-            pathname: "/flop-player/player",
-            anonymous: false,
-            background: "rgba(100, 100, 100, 0.05)",
-            title: "Flop Player Share",
-            favicon: "https://avatars.githubusercontent.com/u/38378650?s=32", // 胡帝的头像
-        },
-        anonymous: false,
-        background: "rgba(0, 0, 0, 0)",
-        listener: function () {
-            preview_visible.value = false;
-            (window as any).flop = null;
-        },
-    });
-}
-
-
 </script>