From 44da36ca859ee93b6a454e426dc473867af0d067 Mon Sep 17 00:00:00 2001
From: jwb <jiangwenbin@readboy.com>
Date: Tue, 18 Feb 2025 15:41:04 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=B5=8C=E5=85=A5B=E7=AB=99?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=94=AF=E6=8C=81av/bv=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/components/BilibiliPreview.vue | 22 ++++++++++++++++++----
 front/components/UploadVideo.vue     | 12 ++++++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/front/components/BilibiliPreview.vue b/front/components/BilibiliPreview.vue
index e57a1d0c..3d7646bd 100644
--- a/front/components/BilibiliPreview.vue
+++ b/front/components/BilibiliPreview.vue
@@ -8,11 +8,25 @@
 <script setup lang="ts">
 const props = defineProps<{ url: string }>()
 const bilibiliUrl = computed(() => {
-  const match = props.url.match(/src=['"]([^'"]+)['"]/)
-  if (match && match.length > 1) {
-    const url = match[1]
-    return url + '&autoplay=0&high_quality=1&as_wide=1'
+  // 处理 iframe 嵌入代码
+  const iframeMatch = props.url.match(/src=['"]([^'"]+)['"]/);
+  if (iframeMatch && iframeMatch.length > 1) {
+    const url = iframeMatch[1];
+    return url + "&autoplay=0&high_quality=1&as_wide=1";
   }
+
+  // 处理 AV 号
+  const avMatch = props.url.match(/[aA][vV](\d+)/);
+  if (avMatch && avMatch.length > 1) {
+    return `//player.bilibili.com/player.html?aid=${avMatch[1]}&autoplay=0&high_quality=1&as_wide=1`;
+  }
+
+  // 处理 BV 号
+  const bvMatch = props.url.match(/([bB][vV][\w]+)/);
+  if (bvMatch && bvMatch.length > 1) {
+    return `//player.bilibili.com/player.html?bvid=${bvMatch[1]}&autoplay=0&high_quality=1&as_wide=1`;
+  }
+
   return ""
 })
 </script>
diff --git a/front/components/UploadVideo.vue b/front/components/UploadVideo.vue
index 5ad58a8f..3fdd5caa 100644
--- a/front/components/UploadVideo.vue
+++ b/front/components/UploadVideo.vue
@@ -72,6 +72,7 @@ const videoType = ref<VideoType>(props.type)
 const youtubeUrl = ref('')
 const bilibiliUrl = ref('')
 const onlineUrl = ref('')
+const bilibiliUrlRegs = [/src=['"]([^'"]+)['"]/, /[aA][vV](\d+)/, /([bB][vV][\w]+)/]
 const youtubeUrlRegs = [/v=([^&#]+)/, /youtu\.be\/(.*)\?/]
 const progress = ref(0)
 const filename = ref('')
@@ -115,10 +116,17 @@ const handleUploadVideo = async (files: FileList) => {
   }
 }
 const confirm = (close: Function) => {
-  const match = bilibiliUrl.value.match(/src=['"]([^'"]+)['"]/)
   if (bilibiliUrl.value.trim()) {
     videoType.value = 'bilibili'
-    if (match && match.length > 1) {
+    let success = false
+    for (let i = 0; i < bilibiliUrlRegs.length; i++) {
+      const match = bilibiliUrl.value.match(bilibiliUrlRegs[i])
+      if (match && match.length > 1) {
+        success = true
+        break
+      }
+    }
+    if (success) {
       emit('confirm', {
         type: videoType.value,
         value: bilibiliUrl.value

From 7428c8b0414f404dd4f17deede773da7b99275cd Mon Sep 17 00:00:00 2001
From: jwb <jiangwenbin@readboy.com>
Date: Wed, 19 Feb 2025 08:49:54 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E5=BA=93?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=E5=A4=84=E7=90=86=E5=90=8E=E7=9A=84B?=
 =?UTF-8?q?=E7=AB=99=E8=A7=86=E9=A2=91=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/main.go                      |  1 +
 backend/migrate.go                   | 33 +++++++++++++++++++++++++++-
 front/components/BilibiliPreview.vue | 21 +-----------------
 front/components/UploadVideo.vue     | 20 ++++++++++++++++-
 4 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/backend/main.go b/backend/main.go
index 34d9b763..9c30f7ca 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -89,6 +89,7 @@ func main() {
 	}
 
 	migrateTo3(tx, myLogger)
+	migrateBiliBiliUrl(tx, myLogger)
 
 	e.HideBanner = true
 	err = e.Start(fmt.Sprintf(":%d", cfg.Port))
diff --git a/backend/migrate.go b/backend/migrate.go
index 9ab95722..36673150 100644
--- a/backend/migrate.go
+++ b/backend/migrate.go
@@ -4,13 +4,15 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
+	"regexp"
+	"strings"
+
 	"github.com/kingwrcy/moments/db"
 	"github.com/kingwrcy/moments/handler"
 	"github.com/kingwrcy/moments/vo"
 	"github.com/rs/zerolog"
 	"github.com/tidwall/gjson"
 	"gorm.io/gorm"
-	"strings"
 )
 
 func migrateTo3(tx *gorm.DB, log zerolog.Logger) {
@@ -173,3 +175,32 @@ WHERE
     ((createdAt NOT LIKE '%-%' AND length(createdAt) = 13) OR 
     (updatedAt NOT LIKE '%-%' AND length(updatedAt) = 13))`)
 }
+
+func migrateBiliBiliUrl(tx *gorm.DB, log zerolog.Logger) {
+	var memos []db.Memo
+	tx.Find(&memos)
+	re := regexp.MustCompile(`src=['"]([^'"]+)['"]`)
+	for _, memo := range memos {
+		var ext vo.MemoExt
+		err := json.Unmarshal([]byte(memo.Ext), &ext)
+		if err != nil {
+			log.Warn().Msgf("memo id:%d ext属性不是标准的json格式 => %s,忽略..", memo.Id, memo.Ext)
+			continue
+		}
+
+		if ext.Video.Type == "bilibili" && re.MatchString(ext.Video.Value) {
+			log.Info().Msgf("开始迁移memo id:%d 的bilibili url", memo.Id)
+			log.Info().Msgf("原始url:%s", ext.Video.Value)
+			ext.Video.Value = re.FindStringSubmatch(ext.Video.Value)[1] + "&autoplay=0&high_quality=1&as_wide=1"
+			log.Info().Msgf("迁移后的url:%s", ext.Video.Value)
+
+			extContent, _ := json.Marshal(ext)
+			memo.Ext = string(extContent)
+			if err = tx.Save(&memo).Error; err != nil {
+				log.Error().Msgf("迁移memo id:%d 失败，原因：%v", memo.Id, err)
+			} else {
+				log.Info().Msgf("迁移memo id:%d 成功", memo.Id)
+			}
+		}
+	}
+}
diff --git a/front/components/BilibiliPreview.vue b/front/components/BilibiliPreview.vue
index 3d7646bd..d1206eba 100644
--- a/front/components/BilibiliPreview.vue
+++ b/front/components/BilibiliPreview.vue
@@ -8,26 +8,7 @@
 <script setup lang="ts">
 const props = defineProps<{ url: string }>()
 const bilibiliUrl = computed(() => {
-  // 处理 iframe 嵌入代码
-  const iframeMatch = props.url.match(/src=['"]([^'"]+)['"]/);
-  if (iframeMatch && iframeMatch.length > 1) {
-    const url = iframeMatch[1];
-    return url + "&autoplay=0&high_quality=1&as_wide=1";
-  }
-
-  // 处理 AV 号
-  const avMatch = props.url.match(/[aA][vV](\d+)/);
-  if (avMatch && avMatch.length > 1) {
-    return `//player.bilibili.com/player.html?aid=${avMatch[1]}&autoplay=0&high_quality=1&as_wide=1`;
-  }
-
-  // 处理 BV 号
-  const bvMatch = props.url.match(/([bB][vV][\w]+)/);
-  if (bvMatch && bvMatch.length > 1) {
-    return `//player.bilibili.com/player.html?bvid=${bvMatch[1]}&autoplay=0&high_quality=1&as_wide=1`;
-  }
-
-  return ""
+  return props.url
 })
 </script>
 
diff --git a/front/components/UploadVideo.vue b/front/components/UploadVideo.vue
index 3fdd5caa..f7a7aeb5 100644
--- a/front/components/UploadVideo.vue
+++ b/front/components/UploadVideo.vue
@@ -119,17 +119,35 @@ const confirm = (close: Function) => {
   if (bilibiliUrl.value.trim()) {
     videoType.value = 'bilibili'
     let success = false
+    let type = 0
+    let param = ""
     for (let i = 0; i < bilibiliUrlRegs.length; i++) {
       const match = bilibiliUrl.value.match(bilibiliUrlRegs[i])
       if (match && match.length > 1) {
         success = true
+        type = i
+        param = match[1]
         break
       }
     }
     if (success) {
+      let url
+      switch (type) {
+        case 0: // 处理 iframe 嵌入代码
+          url = param + "&autoplay=0&high_quality=1&as_wide=1"
+          break
+        case 1: // 处理 AV 号
+          url = `//player.bilibili.com/player.html?aid=${param}&autoplay=0&high_quality=1&as_wide=1`
+          break
+        case 2: // 处理 BV 号
+          url = `//player.bilibili.com/player.html?bvid=${param}&autoplay=0&high_quality=1&as_wide=1`
+          break
+        default:
+          url = ""
+      }
       emit('confirm', {
         type: videoType.value,
-        value: bilibiliUrl.value
+        value: url
       })
       close()
     } else {

From da9ead7a8b85b636b80c28fc9b954dc5c2767c4b Mon Sep 17 00:00:00 2001
From: xuewenG <gexuewen@outlook.com>
Date: Wed, 19 Feb 2025 23:00:59 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=E7=AB=99?=
 =?UTF-8?q?=E5=A4=96=E8=A7=86=E9=A2=91=E9=93=BE=E6=8E=A5=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/main.go                         |   2 +-
 backend/migrate.go                      |  83 ++++++++++--
 front/components/BilibiliPreview.vue    |  17 ---
 front/components/Memo.vue               |   8 +-
 front/components/MemoEdit.vue           |   3 +-
 front/components/UploadVideo.vue        | 168 ++++++++++++++----------
 front/components/VideoPreviewIframe.vue |  25 ++++
 front/components/YoutubePreview.vue     |  27 ----
 8 files changed, 196 insertions(+), 137 deletions(-)
 delete mode 100644 front/components/BilibiliPreview.vue
 create mode 100644 front/components/VideoPreviewIframe.vue
 delete mode 100644 front/components/YoutubePreview.vue

diff --git a/backend/main.go b/backend/main.go
index 9c30f7ca..eb8d1c30 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -89,7 +89,7 @@ func main() {
 	}
 
 	migrateTo3(tx, myLogger)
-	migrateBiliBiliUrl(tx, myLogger)
+	migrateIframeVideoUrl(tx, myLogger)
 
 	e.HideBanner = true
 	err = e.Start(fmt.Sprintf(":%d", cfg.Port))
diff --git a/backend/migrate.go b/backend/migrate.go
index 36673150..91e46efe 100644
--- a/backend/migrate.go
+++ b/backend/migrate.go
@@ -176,31 +176,86 @@ WHERE
     (updatedAt NOT LIKE '%-%' AND length(updatedAt) = 13))`)
 }
 
-func migrateBiliBiliUrl(tx *gorm.DB, log zerolog.Logger) {
+func migrateIframeVideoUrl(tx *gorm.DB, log zerolog.Logger) {
 	var memos []db.Memo
 	tx.Find(&memos)
-	re := regexp.MustCompile(`src=['"]([^'"]+)['"]`)
+
+	bilibiliUrlReg := regexp.MustCompile(`src=['"](?:https?:)?(?:\/)*([^'"]+)['"]`)
+	youtubeUrlRegList := []*regexp.Regexp{
+		regexp.MustCompile(`v=([^&#]+)`),
+		regexp.MustCompile(`youtu\.be\/([^\/\?]+)`),
+	}
+
 	for _, memo := range memos {
 		var ext vo.MemoExt
 		err := json.Unmarshal([]byte(memo.Ext), &ext)
 		if err != nil {
-			log.Warn().Msgf("memo id:%d ext属性不是标准的json格式 => %s,忽略..", memo.Id, memo.Ext)
+			log.Warn().Msgf("memo id: %d 的 ext 不是标准的 json 格式 => %s", memo.Id, memo.Ext)
 			continue
 		}
 
-		if ext.Video.Type == "bilibili" && re.MatchString(ext.Video.Value) {
-			log.Info().Msgf("开始迁移memo id:%d 的bilibili url", memo.Id)
-			log.Info().Msgf("原始url:%s", ext.Video.Value)
-			ext.Video.Value = re.FindStringSubmatch(ext.Video.Value)[1] + "&autoplay=0&high_quality=1&as_wide=1"
-			log.Info().Msgf("迁移后的url:%s", ext.Video.Value)
+		// 测试数据开始
+		// if ext.Video.Value != "" {
+		// 	ext.Video.Type = "bilibili"
+		// 	ext.Video.Value = `<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=123&bvid=FDA1FAD&cid=123&p=1" scrolling></iframe>`
+		// 	ext.Video.Value = `//player.bilibili.com/player.html?isOutside=true&aid=123&bvid=FDA1FAD&cid=123&p=1`
+		// 	ext.Video.Value = `https://player.bilibili.com/player.html?isOutside=true&aid=123&bvid=FDA1FAD&cid=123&p=1`
+		// }
 
-			extContent, _ := json.Marshal(ext)
-			memo.Ext = string(extContent)
-			if err = tx.Save(&memo).Error; err != nil {
-				log.Error().Msgf("迁移memo id:%d 失败，原因：%v", memo.Id, err)
-			} else {
-				log.Info().Msgf("迁移memo id:%d 成功", memo.Id)
+		// if ext.Video.Value != "" {
+		// 	ext.Video.Type = "youtube"
+		// 	ext.Video.Value = "https://www.youtube.com/watch?v=hacdT_G2Ara&q=123"
+		// 	ext.Video.Value = "https://youtu.be/hacdT_G2Ara?si=aa_a_a_aaa"
+		// 	ext.Video.Value = "https://youtu.be/hacdT_G2Ara"
+		// 	ext.Video.Value = "//www.youtube.com/embed/hacdT_G2Ara"
+		// 	ext.Video.Value = "https://www.youtube.com/embed/hacdT_G2Ara"
+		// }
+		// 测试数据结束
+
+		if ext.Video.Value == "" ||
+			strings.HasPrefix(ext.Video.Value, "https://player.bilibili.com/player.html") ||
+			strings.HasPrefix(ext.Video.Value, "https://www.youtube.com/embed") {
+			continue
+		}
+
+		log.Info().Msgf("开始迁移 memo id: %d 的 %s url: %s", memo.Id, ext.Video.Type, ext.Video.Value)
+
+		if strings.HasPrefix(ext.Video.Value, "//") {
+			ext.Video.Value = fmt.Sprintf("https:%s", ext.Video.Value)
+		} else if strings.HasPrefix(ext.Video.Value, "http://") {
+			ext.Video.Value = strings.Replace(ext.Video.Value, "http://", "https://", 1)
+		} else if ext.Video.Type == "bilibili" {
+			matchResult := bilibiliUrlReg.FindStringSubmatch(ext.Video.Value)
+			if matchResult == nil {
+				continue
+			}
+
+			ext.Video.Value = fmt.Sprintf(`https://%s`, matchResult[1])
+		} else if ext.Video.Type == "youtube" {
+			for _, youtubeUrlReg := range youtubeUrlRegList {
+				matchResult := youtubeUrlReg.FindStringSubmatch(ext.Video.Value)
+				if matchResult == nil {
+					continue
+				}
+
+				ext.Video.Value = fmt.Sprintf(
+					`https://www.youtube.com/embed/%s`,
+					matchResult[1],
+				)
+				break
 			}
+		} else {
+			log.Info().Msgf("视频地址无需迁移")
+			continue
+		}
+
+		log.Info().Msgf("迁移后的 url: %s", ext.Video.Value)
+		extContent, _ := json.Marshal(ext)
+		memo.Ext = string(extContent)
+		if err = tx.Save(&memo).Error; err == nil {
+			log.Info().Msgf("迁移 memo id: %d 成功", memo.Id)
+		} else {
+			log.Error().Msgf("迁移 memo id: %d 失败, 原因：%v", memo.Id, err)
 		}
 	}
 }
diff --git a/front/components/BilibiliPreview.vue b/front/components/BilibiliPreview.vue
deleted file mode 100644
index d1206eba..00000000
--- a/front/components/BilibiliPreview.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <iframe v-if="url" class="w-full h-[250px] rounded" :src="bilibiliUrl"
-          title="YouTube video player" frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ url: string }>()
-const bilibiliUrl = computed(() => {
-  return props.url
-})
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/front/components/Memo.vue b/front/components/Memo.vue
index 030dfe17..91775ec1 100644
--- a/front/components/Memo.vue
+++ b/front/components/Memo.vue
@@ -53,12 +53,8 @@
           <music-preview v-if="extJSON.music && extJSON.music.id" v-bind="extJSON.music"/>
           <douban-book-preview v-if="extJSON.doubanBook && extJSON.doubanBook.title" :book="extJSON.doubanBook"/>
           <douban-movie-preview v-if="extJSON.doubanMovie && extJSON.doubanMovie.title" :movie="extJSON.doubanMovie"/>
-          <youtube-preview v-if="extJSON.video && extJSON.video.type === 'youtube' && extJSON.video.value"
-                           :url="extJSON.video.value"/>
-          <bilibili-preview v-if="extJSON.video && extJSON.video.type === 'bilibili' && extJSON.video.value"
-                            :url="extJSON.video.value"/>
-          <video-preview v-if="extJSON.video && extJSON.video.type === 'online' && extJSON.video.value"
-                         :url="extJSON.video.value"/>
+          <video-preview-iframe v-if="extJSON.video && ['bilibili', 'youtube'].includes(extJSON.video.type) && extJSON.video.value" :url="extJSON.video.value"/>
+          <video-preview v-if="extJSON.video && extJSON.video.type === 'online' && extJSON.video.value" :url="extJSON.video.value"/>
         </div>
 
         <div class="text-[#576b95] font-medium dark:text-white text-xs mt-2 mb-1 select-none flex items-center gap-0.5"
diff --git a/front/components/MemoEdit.vue b/front/components/MemoEdit.vue
index 38c5ce4b..93ee7edf 100644
--- a/front/components/MemoEdit.vue
+++ b/front/components/MemoEdit.vue
@@ -79,8 +79,7 @@
                      v-bind="state.music"/>
       <douban-book-preview :book="doubanData" v-if="doubanType === 'book' && doubanData&& doubanData.title"/>
       <douban-movie-preview :movie="doubanData" v-if="doubanType === 'movie' && doubanData&& doubanData.title"/>
-      <youtube-preview v-if="state.video.type === 'youtube' && state.video.value" :url="state.video.value"/>
-      <bilibili-preview v-if="state.video.type === 'bilibili' && state.video.value" :url="state.video.value"/>
+      <video-preview-iframe v-if="['bilibili', 'youtube'].includes(state.video.type) && state.video.value" :url="state.video.value"/>
       <video-preview v-if="state.video.type === 'online' && state.video.value" :url="state.video.value"/>
     </div>
   </div>
diff --git a/front/components/UploadVideo.vue b/front/components/UploadVideo.vue
index f7a7aeb5..d36b1281 100644
--- a/front/components/UploadVideo.vue
+++ b/front/components/UploadVideo.vue
@@ -51,7 +51,7 @@
 
         <UButtonGroup>
           <UButton @click="confirm(close)">确定</UButton>
-          <UButton color="white" @click="reset(close)">清空</UButton>
+          <UButton color="white" @click="reset()">清空</UButton>
         </UButtonGroup>
       </div>
     </template>
@@ -59,25 +59,24 @@
 </template>
 
 <script setup lang="ts">
-import type {Video, VideoType} from "~/types";
-import {toast} from "vue-sonner";
-import {useUpload} from "~/utils";
+import type { Video, VideoType } from "~/types";
+import { toast } from "vue-sonner";
+import { useUpload } from "~/utils";
 
 const props = withDefaults(defineProps<Video>(), {
   type: "youtube",
   value: ""
 })
 const emit = defineEmits(['confirm'])
-const videoType = ref<VideoType>(props.type)
+
 const youtubeUrl = ref('')
 const bilibiliUrl = ref('')
 const onlineUrl = ref('')
-const bilibiliUrlRegs = [/src=['"]([^'"]+)['"]/, /[aA][vV](\d+)/, /([bB][vV][\w]+)/]
-const youtubeUrlRegs = [/v=([^&#]+)/, /youtu\.be\/(.*)\?/]
 const progress = ref(0)
 const filename = ref('')
 const total = ref(0)
 const current = ref(0)
+
 const items = [{
   slot: 'uploadVideo',
   label: '本地'
@@ -86,8 +85,36 @@ const items = [{
   label: '在线'
 }]
 
+const youtubeUrlTemplateList = [
+  {
+    reg: /src=['"](?:https?:)?(?:\/)*([^'"]+)['"]/,
+    template: 'https://@{placeholder}',
+  },
+  {
+    reg: /v=([^&#]+)/,
+    template: 'https://www.youtube.com/embed/@{placeholder}',
+  },
+  {
+    reg: /youtu\.be\/([^\/\?]+)/,
+    template: 'https://www.youtube.com/embed/@{placeholder}',
+  },
+]
+const bilibiliUrlTemplateList = [
+  {
+    reg: /src=['"](?:https?:)?(?:\/)*([^'"]+)['"]/,
+    template: 'https://@{placeholder}',
+  },
+  {
+    reg: /av(\d+)/i,
+    template: 'https://player.bilibili.com/player.html?aid=@{placeholder}',
+  },
+  {
+    reg: /(bv[\w]+)/i,
+    template: 'https://player.bilibili.com/player.html?bvid=@{placeholder}',
+  },
+]
+
 watch(props, () => {
-  videoType.value = props.type
   if (props.type === 'youtube') {
     youtubeUrl.value = props.value
   } else if (props.type === 'bilibili') {
@@ -99,7 +126,7 @@ watch(props, () => {
 
 const handleUploadVideo = async (files: FileList) => {
   for (let i = 0; i < files.length; i++) {
-    if (files[i].type.indexOf("video") < 0){
+    if (files[i].type.indexOf("video") < 0) {
       toast.error("只能上传视频文件");
       return
     }
@@ -115,87 +142,90 @@ const handleUploadVideo = async (files: FileList) => {
     onlineUrl.value = result[0]
   }
 }
+
+const emitUrl = (type: VideoType, value: string) => {
+  if (type !== 'youtube') {
+    youtubeUrl.value = ''
+  }
+
+  if (type !== 'bilibili') {
+    bilibiliUrl.value = ''
+  }
+
+  if (type !== 'online') {
+    onlineUrl.value = ''
+  }
+
+  emit('confirm', {
+    type,
+    value,
+  })
+}
+
 const confirm = (close: Function) => {
+  if (bilibiliUrl.value.trim() && youtubeUrl.value.trim()) {
+    toast.warning("请勿同时填写两个地址")
+    return
+  }
+
   if (bilibiliUrl.value.trim()) {
-    videoType.value = 'bilibili'
-    let success = false
-    let type = 0
-    let param = ""
-    for (let i = 0; i < bilibiliUrlRegs.length; i++) {
-      const match = bilibiliUrl.value.match(bilibiliUrlRegs[i])
-      if (match && match.length > 1) {
-        success = true
-        type = i
-        param = match[1]
-        break
-      }
-    }
-    if (success) {
-      let url
-      switch (type) {
-        case 0: // 处理 iframe 嵌入代码
-          url = param + "&autoplay=0&high_quality=1&as_wide=1"
-          break
-        case 1: // 处理 AV 号
-          url = `//player.bilibili.com/player.html?aid=${param}&autoplay=0&high_quality=1&as_wide=1`
-          break
-        case 2: // 处理 BV 号
-          url = `//player.bilibili.com/player.html?bvid=${param}&autoplay=0&high_quality=1&as_wide=1`
-          break
-        default:
-          url = ""
-      }
-      emit('confirm', {
-        type: videoType.value,
-        value: url
-      })
+    if (bilibiliUrl.value.startsWith('https://player.bilibili.com/player.html')) {
+      emitUrl('bilibili', bilibiliUrl.value)
       close()
-    } else {
-      toast.warning("无效的B站视频地址")
       return
     }
+
+    for (const bilibiliUrlTemplate of bilibiliUrlTemplateList) {
+      const { reg, template } = bilibiliUrlTemplate
+      const [_, matchedValue] = bilibiliUrl.value.match(reg) || []
+      if (matchedValue) {
+        const url = template.replace('@{placeholder}', matchedValue)
+        emitUrl('bilibili', url)
+        close()
+        return
+      }
+    }
+
+    toast.warning("无效的B站视频地址")
     return
   }
 
   if (youtubeUrl.value.trim()) {
-    videoType.value = 'youtube'
-    let success = false
-    for (let i = 0; i < youtubeUrlRegs.length; i++) {
-      const match = youtubeUrl.value.match(youtubeUrlRegs[i])
-      if (match && match.length > 1) {
-        success = true
-        break
-      }
-    }
-    if (success) {
-      emit('confirm', {
-        type: videoType.value,
-        value: youtubeUrl.value
-      })
+    if (youtubeUrl.value.startsWith('https://www.youtube.com/embed')) {
+      emitUrl('youtube', youtubeUrl.value)
       close()
-    } else {
-      toast.warning("无效的Youtube视频地址")
+      return
+    }
+
+    for (const youtubeUrlTemplate of youtubeUrlTemplateList) {
+      const { reg, template } = youtubeUrlTemplate
+      const [_, matchedValue] = youtubeUrl.value.match(reg) || []
+      if (matchedValue) {
+        const url = template.replace('@{placeholder}', matchedValue)
+        emitUrl('youtube', url)
+        close()
+        return
+      }
     }
+
+    toast.warning("无效的Youtube视频地址")
     return
   }
+
   if (onlineUrl.value.trim()) {
-    videoType.value = 'online'
-    emit('confirm', {
-      type: videoType.value,
-      value: onlineUrl.value.trim()
-    })
+    emitUrl('online', onlineUrl.value.trim())
     close()
     return
   }
 }
 
-const reset = (close: Function) => {
-  videoType.value = 'youtube'
+const reset = () => {
   youtubeUrl.value = ''
   bilibiliUrl.value = ''
   onlineUrl.value = ''
+
   emit('confirm', {
-    type: videoType.value,
+    type: 'youtube',
     value: ""
   })
 }
@@ -203,6 +233,4 @@ const reset = (close: Function) => {
 
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/front/components/VideoPreviewIframe.vue b/front/components/VideoPreviewIframe.vue
new file mode 100644
index 00000000..56ce7255
--- /dev/null
+++ b/front/components/VideoPreviewIframe.vue
@@ -0,0 +1,25 @@
+<template>
+  <iframe
+    v-if="url"
+    :src="videoUrl"
+    class="w-full h-[250px] rounded"
+    title="Video player iframe"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  >
+  </iframe>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ url: string }>()
+
+const videoUrl = computed(() => {
+  const url = new URL(props.url)
+  url.searchParams.set("autoplay", "0")
+  return url.toString()
+})
+</script>
+
+<style scoped></style>
diff --git a/front/components/YoutubePreview.vue b/front/components/YoutubePreview.vue
deleted file mode 100644
index 36c4317b..00000000
--- a/front/components/YoutubePreview.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <iframe v-if="url" class="w-full h-[250px] rounded" :src="youtubeUrl"
-          title="YouTube video player" frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ url: string }>()
-const youtubeUrlRegs = [/v=([^&#]+)/, /youtu\.be\/(.*)\?/]
-const youtubeUrl = computed(() => {
-  for (let i = 0; i < youtubeUrlRegs.length; i++) {
-    const match = props.url.match(youtubeUrlRegs[i])
-    if (match && match.length > 1) {
-      const id = match[1]
-      return `https://www.youtube.com/embed/${id}?autoplay=0&frameborder="0"`
-    }
-  }
-  return props.url
-})
-
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file