feat(frontend): 优化一些获取 subtitlebest api 字幕的错误提示

frontend/src/pages/library/SearchPanelCsfApi.vue

@@ -29,11 +29,18 @@
       </q-item>
     </q-list>
     <div v-else-if="!loading" class="text-grey">
-      <div>ImdbId: {{ imdbId || '-' }}</div>
+      <div>
+        <span>ImdbId: {{ imdbId || '-' }}</span>
+        <span v-if="imdbId && !isImdbId(imdbId)" class="q-ml-md text-negative">这是个无效的ImdbId</span>
+      </div>
       <template v-if="tmdbErrorMsg">
         <div class="text-negative">{{ tmdbErrorMsg }}</div>
         <div><q-btn flat label="重试" color="primary" dense @click="searchCsf" /></div>
       </template>
+      <template v-else-if="subtitleBestApiErrorMsg">
+        <div class="text-negative">获取字幕列表失败，错误信息：{{ subtitleBestApiErrorMsg }}</div>
+        <div><q-btn flat label="重试" color="primary" dense @click="searchCsf" /></div>
+      </template>
       <template v-else>
         <div>未搜索到数据，<q-btn flat label="重试" color="primary" dense @click="searchCsf" /></div>
         <div>如果报错信息提示没有 ApiKey，请到<b>配置中心-字幕源设置</b>，填写SubtitleBest的ApiKey</div>
@@ -61,6 +68,7 @@ import { VIDEO_TYPE_MOVIE, VIDEO_TYPE_TV } from 'src/constants/SettingConstants'
 import { settingsState } from 'src/store/settingsState';
 import SubtitleBestApiLimitBanner from 'components/SubtitleBestApiLimitBanner.vue';
 import { useApiLimit } from 'src/composables/use-api-limit';
+import { isImdbId } from 'src/utils/common';
 
 const props = defineProps({
   path: String,
@@ -83,6 +91,7 @@ const { nextRequestCountdownSecond, countdownLoading, waitRequestReady } = useAp
 );
 
 const tmdbErrorMsg = ref('');
+const subtitleBestApiErrorMsg = ref('');
 const loading = ref(false);
 const loadingMsg = ref('');
 const csfSearchResult = ref(null);
@@ -122,6 +131,7 @@ const setLock = async () => {
 
 const searchCsf = async () => {
   loading.value = true;
+  subtitleBestApiErrorMsg.value = '';
   loadingMsg.value = '正在从TMDB获取视频详细信息...';
   const [d, e] = await LibraryApi.getImdbId({
     is_movie: props.isMovie,
@@ -137,16 +147,25 @@ const searchCsf = async () => {
     }
     loading.value = false;
     loadingMsg.value = '';
+    SystemMessage.error(e.message);
     return;
   }
   tmdbErrorMsg.value = '';
   loadingMsg.value = '正在获取字幕列表...';
   imdbId.value = d?.ImdbId;
+
+  if (!isImdbId(imdbId.value)) {
+    loadingMsg.value = '';
+    loading.value = false;
+    return;
+  }
+
   if (props.isMovie) {
     const [data, err] = await CsfSubtitlesApi.searchMovie({
       imdb_id: imdbId.value,
     });
     if (err !== null) {
+      subtitleBestApiErrorMsg.value = err.message;
       SystemMessage.error(err.message);
     } else {
       csfSearchResult.value = data.subtitles;
@@ -158,6 +177,7 @@ const searchCsf = async () => {
       episode: props.episode,
     });
     if (err !== null) {
+      subtitleBestApiErrorMsg.value = err.message;
       SystemMessage.error(err.message);
     } else {
       csfSearchResult.value = data.subtitles;

frontend/src/pages/library/SearchPanelCsfApiTvPackage.vue

@@ -77,11 +77,18 @@
       </template>
     </q-splitter>
     <div v-else-if="!loading" class="text-grey">
-      <div>ImdbId: {{ imdbId || '-' }}</div>
+      <div>
+        <span>ImdbId: {{ imdbId || '-' }}</span>
+        <span v-if="imdbId && !isImdbId(imdbId)" class="q-ml-md text-negative">这是个无效的ImdbId</span>
+      </div>
       <template v-if="tmdbErrorMsg">
         <div class="text-negative">{{ tmdbErrorMsg }}</div>
         <div><q-btn flat label="重试" color="primary" dense @click="searchPackages" /></div>
       </template>
+      <template v-else-if="subtitleBestApiErrorMsg">
+        <div class="text-negative">获取字幕列表失败，错误信息：{{ subtitleBestApiErrorMsg }}</div>
+        <div><q-btn flat label="重试" color="primary" dense @click="searchPackages" /></div>
+      </template>
       <template v-else>
         <div>未搜索到数据，<q-btn flat label="重试" color="primary" dense @click="searchPackages" /></div>
         <div>如果报错信息提示没有 ApiKey，请到<b>配置中心-字幕源设置</b>，填写SubtitleBest的ApiKey</div>
@@ -110,6 +117,7 @@ import { VIDEO_TYPE_TV } from 'src/constants/SettingConstants';
 import { settingsState } from 'src/store/settingsState';
 import SubtitleBestApiLimitBanner from 'components/SubtitleBestApiLimitBanner.vue';
 import { useApiLimit } from 'src/composables/use-api-limit';
+import { isImdbId } from 'src/utils/common';
 
 const props = defineProps({
   episodes: Array,
@@ -123,6 +131,7 @@ const { nextRequestCountdownSecond, countdownLoading, waitRequestReady } = useAp
 
 const splitterModel = ref(300);
 const tmdbErrorMsg = ref('');
+const subtitleBestApiErrorMsg = ref('');
 const packages = ref([]);
 const selectedPackage = ref(null);
 
@@ -171,6 +180,7 @@ const setLock = async (paths) => {
 
 const searchPackages = async () => {
   loading.value = true;
+  subtitleBestApiErrorMsg.value = '';
   loadingMsg.value = '正在从TMDB获取视频详细信息...';
   const [d, e] = await LibraryApi.getImdbId({
     is_movie: false,
@@ -192,12 +202,20 @@ const searchPackages = async () => {
   tmdbErrorMsg.value = '';
   loadingMsg.value = '正在获取字幕包列表...';
   imdbId.value = d?.ImdbId;
+
+  if (!isImdbId(imdbId.value)) {
+    loadingMsg.value = '';
+    loading.value = false;
+    return;
+  }
+
   const [data, err] = await CsfSubtitlesApi.searchTvSeasonPackage({
     imdb_id: imdbId.value,
     season: currentSeason.value,
   });
   if (err !== null) {
     SystemMessage.error(err.message);
+    subtitleBestApiErrorMsg.value = err.message;
   } else {
     packages.value = data.season_package_ids;
   }

frontend/src/utils/common.js

@@ -5,3 +5,9 @@ export const gotoGithubIssuePage = () => {
   searchParams.append('template', '----bug----.md');
   window.open(`https://github.com/ChineseSubFinder/ChineseSubFinder/issues/new?${searchParams.toString()}`, '_blank');
 };
+
+export const isImdbId = (str) => {
+  if (!str) return false;
+  if (str === 'tt00000') return false;
+  return str.startsWith('tt') && str.length === 9;
+};