feat: localize quality labels and add quality template token

frontend/src/views/SettingsView.vue

@@ -8,7 +8,7 @@ import type {
   SystemSettings,
   WebhookTestResult
 } from "@/types";
-import { outputFormatLabelMap, recordingTemplateLabelMap, saveModeLabelMap } from "@/types";
+import { outputFormatLabelMap, qualityOptionList, recordingTemplateLabelMap, saveModeLabelMap } from "@/types";
 import { useAuthStore } from "@/stores/auth";
 import { useViewport } from "@/composables/useViewport";
 import { useUiPreferences } from "@/composables/useUiPreferences";
@@ -42,6 +42,8 @@ const webhookTestResult = ref<WebhookTestResult | null>(null);
 const retentionCleanupResult = ref<RetentionCleanupResult | null>(null);
 const loadError = ref("");
 const activeSettingTab = ref("recording");
+const qualitySupportHint = "抖音和 Bilibili 支持按画质选流；虎牙暂未实现。若目标档位不可用，平台会自动回退到最接近的可用画质。";
+const qualityOptions = qualityOptionList;
 
 const savebarStyle = computed(() => {
   if (isMobile.value) {
@@ -63,7 +65,7 @@ const form = reactive<SystemSettings>({
   ffmpegPath: "ffmpeg",
   outputRoot: "records",
   outputDirectoryTemplate: "{platform}/{yyyy}/{MM}/{dd}/{anchor}",
-  outputFileNameTemplate: "{HHmmss}_{anchor}_{title}_{roomId}{segmentSuffix}",
+  outputFileNameTemplate: "{HHmmss}_{quality}_{anchor}_{title}_{roomId}{segmentSuffix}",
   defaultQuality: "origin",
   defaultOutputFormat: 0,
   saveMode: 0,
@@ -187,6 +189,7 @@ const outputTemplateTokens = [
   "{roomId}",
   "{anchor}",
   "{title}",
+  "{quality}",
   "{yyyy}",
   "{MM}",
   "{dd}",
@@ -266,12 +269,12 @@ const canSendTestWebhook = computed(() => Boolean(form.webhookUrl.trim()));
 
 const segmentedExamplePath = computed(() => {
   const extension = form.defaultOutputFormat === 1 ? "ts" : "mp4";
-  return `Douyin/2026/04/15/主播名/221530_主播名_直播标题_123456789_00001.${extension}`;
+  return `Douyin/2026/04/15/主播名/221530_origin_主播名_直播标题_123456789_00001.${extension}`;
 });
 
 const nestedSegmentedExamplePath = computed(() => {
   const extension = form.defaultOutputFormat === 1 ? "ts" : "mp4";
-  return `Douyin/2026/04/15/主播名/221530_主播名_直播标题_123456789/221530_主播名_直播标题_123456789_00001.${extension}`;
+  return `Douyin/origin/2026/04/15/主播名/221530_origin_主播名_直播标题_123456789/221530_origin_主播名_直播标题_123456789_00001.${extension}`;
 });
 
 async function loadSettings() {
@@ -599,7 +602,14 @@ onMounted(loadSettings);
             </el-col>
             <el-col :span="12">
               <el-form-item label="默认清晰度">
-                <el-input v-model="form.defaultQuality" placeholder="origin / FULL_HD / HD / SD" />
+                <el-select v-model="form.defaultQuality">
+                  <el-option
+                    v-for="option in qualityOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -670,6 +680,10 @@ onMounted(loadSettings);
             </el-col>
           </el-row>
         </el-form>
+
+        <div class="helper-panel">
+          {{ qualitySupportHint }}
+        </div>
       </el-card>
 
       <el-card class="surface-card settings-card" shadow="never">
@@ -815,7 +829,7 @@ onMounted(loadSettings);
               v-model="form.outputFileNameTemplate"
               type="textarea"
               :rows="3"
-              placeholder="{HHmmss}_{anchor}_{title}_{roomId}{segmentSuffix}"
+              placeholder="{HHmmss}_{quality}_{anchor}_{title}_{roomId}{segmentSuffix}"
             />
           </el-form-item>
         </el-form>
@@ -834,6 +848,10 @@ onMounted(loadSettings);
           目录模板和文件名模板中的时间变量统一按北京时间（UTC+8）渲染，示例路径也按北京时间展示。
         </div>
 
+        <div class="helper-panel">
+          <code>{quality}</code> 输出稳定画质键，例如 <code>origin</code>、<code>FULL_HD</code>、<code>HD</code>、<code>SD</code>，适合放进目录名或文件名里做脚本处理。
+        </div>
+
         <div class="token-list">
           <span v-for="token in outputTemplateTokens" :key="token" class="token-chip">{{ token }}</span>
         </div>