chore(viewer): 播放失败时添加抬头提示, close #229

apps/blue-archive-story-viewer/package.json

@@ -31,7 +31,8 @@
     "xxhashjs": "^0.2.2",
     "tailwindcss": "~3.3.5",
     "autoprefixer": "~10.4.16",
-    "dayjs": "~1.11.9"
+    "dayjs": "~1.11.9",
+    "element-plus": "^2.3.7"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",

apps/blue-archive-story-viewer/src/components/StoryViewer.vue

@@ -69,6 +69,7 @@
           :use-super-sampling="useSuperSampling"
           :exit-fullscreen-time-out="5000"
           @end="handleStoryEnd"
+          @error="handleError()"
         />
         <img
           :src="useSuperSamplingImgPath"
@@ -157,6 +158,7 @@ import {
   StoryContent,
   StoryIndex,
 } from "@/types/StoryJson";
+import { ElMessage } from "element-plus";
 import { getI18nString } from "@i18n/getI18nString";
 import { stories } from "@index/mainStoryIndex";
 import { stories as OtherStories } from "@index/otherStoryIndex";
@@ -461,6 +463,14 @@ async function handleReplay() {
 function handleGoBack() {
   router.go(-1);
 }
+
+function handleError(message = "播放可能失败，请刷新页面重试") {
+  ElMessage.error({
+    message: message,
+    center: true,
+    showClose: true,
+  });
+}
 </script>
 
 <style scoped lang="scss">

apps/blue-archive-story-viewer/src/style.scss

@@ -35,6 +35,9 @@ html {
   --color-pallete-arona-blue: #3f88f2;
   --color-pallete-warning: #ffa00c;
   --color-pallete-danger: #ff3a30;
+  --color-eden-danger-1: 255, 240, 232;
+  --color-eden-danger-6: 233, 88, 59;
+  --color-eden-danger-7: 194, 58, 37;
 
   --color-card-background: #fff;
 
@@ -108,6 +111,9 @@ html[data-theme="dark"] {
   --color-pallete-arona-blue: #b2cffa;
   --color-pallete-warning: #cc820a;
   --color-pallete-danger: #cc2f27;
+  --color-eden-danger-1: 77, 3, 0;
+  --color-eden-danger-6: 237, 125, 96;
+  --color-eden-danger-7: 242, 155, 129;
 
   --color-card-background: #2f2f2f;
   --color-glass-panel-border: #4b93dc;
@@ -281,6 +287,13 @@ a {
   transition: color 0.375s ease-in-out;
 }
 
+.el-message--error {
+  --el-message-border-color: rgb(var(--color-eden-danger-7)) !important;
+  --el-message-bg-color: rgb(var(--color-eden-danger-1)) !important;
+  --el-message-text-color: rgb(var(--color-eden-danger-6)) !important;
+  box-shadow: 0 0 10px rgba(var(--color-eden-danger-7), 0.1);
+}
+
 .fluent-tag {
   border-radius: 4px;
   background-color: var(--color-tag-fluent);