feat(frontend): 进阶配置添加字幕源设置

Signed-off-by: Myon <[email protected]>

frontend/src/components/CommonFormDialog.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-dialog
+    :model-value="visible"
+    @update:model-value="(val) => $emit('update:visible', val)"
+    v-bind="$attrs"
+    persistent
+  >
+    <q-card :style="{ width: width }">
+      <q-card-section>
+        <div class="text-h6">{{ title }}</div>
+      </q-card-section>
+      <q-separator />
+      <q-form ref="editForm" @submit="submit" class="q-gutter-md">
+        <q-card-section>
+          <slot></slot>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn class="q-px-md" v-close-popup flat color="primary" label="关闭" />
+          <q-btn class="q-px-md" type="submit" color="primary" :loading="submitting" label="提交">
+            <template v-slot:loading>
+              <q-spinner-facebook />
+            </template>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue';
+
+const props = defineProps({
+  title: String,
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: String,
+    default: '600px',
+  },
+  submitFn: {
+    type: Function,
+    default: (callback) => {
+      callback();
+    },
+  },
+});
+
+const submitting = ref(false);
+const submit = async () => {
+  submitting.value = true;
+  try {
+    await props.submitFn();
+  } catch (e) {
+    // handle error
+  }
+  submitting.value = false;
+};
+</script>
+
+<style scoped>
+::v-deep(.q-card__actions .q-btn) {
+  padding: 8px 18px;
+}
+</style>

frontend/src/constants/SettingConstants.js

@@ -31,3 +31,10 @@ export const AUTO_CONVERT_LANG_NAME_MAP = {
   [AUTO_CONVERT_LANG_CHS]: '转简体',
   [AUTO_CONVERT_LANG_CHT]: '轉繁體',
 };
+
+export const DEFAULT_SUB_SOURCE_URL_MAP = {
+  xunlei: 'http://sub.xmp.sandai.net:8000/subxl/%s.json',
+  shooter: 'https://www.shooter.cn/api/subapi.php',
+  subhd: 'https://subhd.tv',
+  zimuku: 'https://zimuku.org',
+};

frontend/src/pages/settings/AdvancedSettings.vue

@@ -101,10 +101,37 @@
 
       <q-separator spaced inset></q-separator>
 
+      <q-item>
+        <q-item-section>
+          <q-item-label class="q-mb-sm">字幕源设置</q-item-label>
+          <q-item v-for="item in ['xunlei', 'shooter', 'subhd', 'zimuku']" :key="item" clickable>
+            <q-item-section avatar class="text-bold" style="width: 120px">
+              {{ form.suppliers_settings[item].name }}
+            </q-item-section>
+            <q-item-section class="text-grey-8">
+              <q-item-label :lines="1">
+                {{ form.suppliers_settings[item].root_url }}
+              </q-item-label>
+              <q-item-label style="font-size: 90%">
+                每日下载次数限制：{{ form.suppliers_settings[item].daily_download_limit }}
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <edit-sub-source-btn-dialog
+                :data="form.suppliers_settings[item]"
+                @update="(data) => handleSubSourceUpdate(item, data)"
+              />
+            </q-item-section>
+          </q-item>
+        </q-item-section>
+      </q-item>
+
+      <q-separator spaced inset />
+
       <q-item>
         <q-item-section class="items-start" top>
           <q-item-label>自定义视频扩展名</q-item-label>
-          <q-item-label caption>原生支持mp4、mkv、rmvb、iso</q-item-label>
+          <q-item-label caption>原生支持mp4、mkv、rmvb、iso、m2ts</q-item-label>
           <template v-for="(item, i) in form.custom_video_exts" :key="i">
             <div class="row items-center q-gutter-x-md" :class="{ 'q-mt-md': i === 0 }">
               <q-input
@@ -164,6 +191,7 @@ import {
 import { formModel } from 'pages/settings/useSettings';
 import { toRefs } from '@vueuse/core';
 import ProxyCheckBtn from 'components/ProxyCheckBtn';
+import EditSubSourceBtnDialog from 'pages/settings/EditSubSourceBtnDialog';
 
 const subNameFormatDescMap = {
   [SUB_NAME_FORMAT_NORMAL]: '兼容性更好，AAA.zh.ass or AAA.zh.default.ass。',
@@ -171,4 +199,9 @@ const subNameFormatDescMap = {
 };
 
 const { advanced_settings: form } = toRefs(formModel);
+
+const handleSubSourceUpdate = (item, data) => {
+  formModel.advanced_settings.suppliers_settings[item].root_url = data.url;
+  formModel.advanced_settings.suppliers_settings[item].daily_download_limit = data.dailyLimit;
+};
 </script>

frontend/src/pages/settings/EditSubSourceBtnDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <q-btn dense flat color="primary" label="修改" @click="visible = true"></q-btn>
+  <common-form-dialog
+    :title="title"
+    v-model:visible="visible"
+    :submit-fn="handleSubmit"
+    @before-show="handleBeforeShow"
+  >
+    <q-input v-model="form.url" label="RootUrl" outlined :rules="[(val) => !!val || '不能为空']">
+      <template v-slot:after>
+        <q-btn dense flat label="重置" color="primary" title="重置成默认url" @click="resetUrl" />
+      </template>
+    </q-input>
+    <q-input
+      v-model.number="form.dailyLimit"
+      type="number"
+      label="每日下载次数下载"
+      placeholder="-1为不限制次数，最高建议100"
+      :rules="[(val) => !!val || '不能为空或0']"
+      outlined
+    />
+  </common-form-dialog>
+</template>
+
+<script setup>
+import CommonFormDialog from 'components/CommonFormDialog';
+import { computed, reactive, ref } from 'vue';
+import { DEFAULT_SUB_SOURCE_URL_MAP } from 'src/constants/SettingConstants';
+
+const props = defineProps({
+  data: Object,
+});
+
+const emit = defineEmits(['update']);
+
+const form = reactive({
+  url: '',
+  dailyLimit: -1,
+});
+
+const visible = ref(false);
+
+const title = computed(() => `修改字幕源：${props.data?.name}`);
+
+const handleSubmit = () => {
+  emit('update', form);
+  visible.value = false;
+};
+
+const handleBeforeShow = () => {
+  form.url = props.data?.root_url;
+  form.dailyLimit = props.data?.daily_download_limit;
+};
+
+const resetUrl = () => {
+  form.url = DEFAULT_SUB_SOURCE_URL_MAP[props.data?.name];
+};
+</script>

frontend/src/pages/settings/FormSubmitArea.vue

@@ -8,6 +8,6 @@
 
 <script setup>
 import { resetForm, submitting } from 'pages/settings/useSettings';
-import ExportSettingBtnDialog from 'pages/settings/exportSettingBtnDialog';
+import ExportSettingBtnDialog from 'pages/settings/ExportSettingBtnDialog';
 import { isJobRunning } from 'src/store/systemState';
 </script>