feat: add STRM output directory presets

web/src/api/strm.ts

@@ -88,10 +88,18 @@ export type STRMRefreshResult = {
   }>
 }
 
+export type STRMOutputPreset = {
+  label: string
+  path: string
+  kind: 'default' | 'library' | string
+}
+
 export const strmAPI = {
   set: (mediaID: string, url: string) =>
     api.put(`/media/${mediaID}/strm`, { url }).then((r) => r.data),
   clear: (mediaID: string) => api.delete(`/media/${mediaID}/strm`).then((r) => r.data),
+  outputPresets: () =>
+    api.get<{ items: STRMOutputPreset[] }>('/strm/output-presets').then((r) => r.data.items),
   importURL: (libraryID: string, title: string, url: string) =>
     api.post('/strm/import', { library_id: libraryID, title, url }).then((r) => r.data),
   generate: (input: GenerateSTRMInput) =>

web/src/pages/StrmGenerateSection.tsx

@@ -1,6 +1,6 @@
 import type { FormEvent } from 'react'
 
-import type { GenerateSTRMResult } from '../api/strm'
+import type { GenerateSTRMResult, STRMOutputPreset } from '../api/strm'
 import type { Library } from '../types'
 import type { CloudPlaybackMode } from './strmPageModel'
 import {
@@ -17,6 +17,7 @@ export type StrmGenerateSectionProps = {
   generateLibraryID: string
   baseURL: string
   outputDir: string
+  outputPresets: STRMOutputPreset[]
   cloudPlaybackMode: CloudPlaybackMode
   strmPlaybackEnabled: boolean
   redirectProxyEnabled: boolean

web/src/pages/StrmGenerateSectionParts.tsx

@@ -4,6 +4,7 @@ import type { GenerateSTRMResult } from '../api/strm'
 import type { Library } from '../types'
 import { currentOrigin, type CloudPlaybackMode } from './strmPageModel'
 import type { StrmGenerateSectionProps } from './StrmGenerateSection'
+import { StrmOutputDirPicker } from './StrmOutputDirPicker'
 
 type PlaybackStatusProps = Pick<
   StrmGenerateSectionProps,
@@ -141,6 +142,7 @@ type StrmGenerateFormProps = Pick<
   | 'generateLibraryID'
   | 'baseURL'
   | 'outputDir'
+  | 'outputPresets'
   | 'overwrite'
   | 'includeLocal'
   | 'preserveTree'
@@ -161,6 +163,7 @@ export function StrmGenerateForm({
   generateLibraryID,
   baseURL,
   outputDir,
+  outputPresets,
   overwrite,
   includeLocal,
   preserveTree,
@@ -198,11 +201,12 @@ export function StrmGenerateForm({
         <CompactOption checked={preserveTree} label="保留目录树" onChange={setPreserveTree} />
         <CompactOption checked={refreshLibrary} label="生成后刷新媒体库" onChange={setRefreshLibrary} />
       </div>
-      <input
-        className="input-base md:col-span-4"
+      <StrmOutputDirPicker
+        className="md:col-span-4"
+        presets={outputPresets}
         placeholder="输出目录可留空，默认写入 data/strm/分类/子分类"
         value={outputDir}
-        onChange={(e) => setOutputDir(e.target.value)}
+        onChange={setOutputDir}
       />
       <button type="submit" disabled={generating || !generateLibraryID || !baseURL.trim()} className="neon-button md:col-span-4">
         {generating ? <Loader2 size={16} className="animate-spin" /> : <Wand2 size={16} />}

web/src/pages/StrmOutputDirPicker.tsx

@@ -0,0 +1,50 @@
+import type { STRMOutputPreset } from '../api/strm'
+
+type StrmOutputDirPickerProps = {
+  className?: string
+  inputClassName?: string
+  presets: STRMOutputPreset[]
+  placeholder: string
+  value: string
+  required?: boolean
+  onChange: (value: string) => void
+}
+
+export function StrmOutputDirPicker({
+  className = '',
+  inputClassName = '',
+  presets,
+  placeholder,
+  value,
+  required = false,
+  onChange,
+}: StrmOutputDirPickerProps) {
+  const normalizedValue = value.trim()
+  const selectedPreset = presets.some((preset) => preset.path === normalizedValue) ? normalizedValue : ''
+
+  return (
+    <div className={`grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(10rem,16rem)] ${className}`}>
+      <input
+        required={required}
+        className={`input-base ${inputClassName}`}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <select
+        className="input-base"
+        value={selectedPreset}
+        onChange={(e) => {
+          if (e.target.value) onChange(e.target.value)
+        }}
+      >
+        <option value="">选择输出目录</option>
+        {presets.map((preset) => (
+          <option key={`${preset.kind}:${preset.path}`} value={preset.path}>
+            {preset.kind === 'library' ? `${preset.label} - ${preset.path}` : preset.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

web/src/pages/StrmPage.tsx

@@ -24,6 +24,7 @@ export function StrmPage() {
         generateLibraryID={strm.generate.generateLibraryID}
         baseURL={strm.generate.baseURL}
         outputDir={strm.generate.outputDir}
+        outputPresets={strm.outputPresets}
         cloudPlaybackMode={strm.generate.cloudPlaybackMode}
         strmPlaybackEnabled={strm.generate.strmPlaybackEnabled}
         redirectProxyEnabled={strm.generate.redirectProxyEnabled}
@@ -51,9 +52,9 @@ export function StrmPage() {
         setRefreshLibrary={strm.generate.setRefreshLibrary}
       />
 
-      <StrmTreeGenerateSection {...strm.treeGenerate} />
+      <StrmTreeGenerateSection {...strm.treeGenerate} outputPresets={strm.outputPresets} />
 
-      <StrmRepairSection {...strm.repair} />
+      <StrmRepairSection {...strm.repair} outputPresets={strm.outputPresets} />
 
       <StrmImportSection
         libraries={strm.libraries}

web/src/pages/StrmRepairSection.tsx

@@ -1,13 +1,18 @@
 import { Loader2, RotateCcw, Wrench } from 'lucide-react'
 
+import type { STRMOutputPreset } from '../api/strm'
 import { currentOrigin } from './strmPageModel'
+import { StrmOutputDirPicker } from './StrmOutputDirPicker'
 import type { useStrmRepairForm } from './useStrmRepairForm'
 
-type StrmRepairSectionProps = ReturnType<typeof useStrmRepairForm>
+type StrmRepairSectionProps = ReturnType<typeof useStrmRepairForm> & {
+  outputPresets: STRMOutputPreset[]
+}
 
 export function StrmRepairSection({
   baseURL,
   outputDir,
+  outputPresets,
   repairing,
   refreshLibrary,
   result,
@@ -25,12 +30,13 @@ export function StrmRepairSection({
         <p className="text-sm text-ink-50">批量修复已存在 .strm 文件中的本服务播放地址。</p>
       </div>
       <form onSubmit={onRepair} className="grid gap-3 md:grid-cols-4">
-        <input
+        <StrmOutputDirPicker
+          className="md:col-span-2"
           required
-          className="input-base md:col-span-2"
+          presets={outputPresets}
           placeholder="STRM 输出目录"
           value={outputDir}
-          onChange={(e) => setOutputDir(e.target.value)}
+          onChange={setOutputDir}
         />
         <input
           className="input-base"

web/src/pages/StrmTreeGenerateSection.tsx

@@ -1,10 +1,14 @@
 import { FolderTree, Loader2, Upload, X } from 'lucide-react'
 
+import type { STRMOutputPreset } from '../api/strm'
 import { currentOrigin } from './strmPageModel'
 import { StrmGenerateResultPanel } from './StrmGenerateSectionParts'
+import { StrmOutputDirPicker } from './StrmOutputDirPicker'
 import type { useStrmTreeGenerateForm } from './useStrmTreeGenerateForm'
 
-type StrmTreeGenerateSectionProps = ReturnType<typeof useStrmTreeGenerateForm>
+type StrmTreeGenerateSectionProps = ReturnType<typeof useStrmTreeGenerateForm> & {
+  outputPresets: STRMOutputPreset[]
+}
 
 const outputPrefixPresets = [
   '电影/演唱会',
@@ -37,6 +41,7 @@ export function StrmTreeGenerateSection({
   onPreview,
   onImportTreeFile,
   outputDir,
+  outputPresets,
   outputPrefix,
   overwrite,
   pathsText,
@@ -83,12 +88,13 @@ export function StrmTreeGenerateSection({
           value={sourceRoot}
           onChange={(e) => setSourceRoot(e.target.value)}
         />
-        <input
+        <StrmOutputDirPicker
+          className="md:col-span-2"
           required
-          className="input-base"
+          presets={outputPresets}
           placeholder="输出目录"
           value={outputDir}
-          onChange={(e) => setOutputDir(e.target.value)}
+          onChange={setOutputDir}
         />
         <select
           className="input-base"

web/src/pages/useStrmPage.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import { libraryAPI } from '../api/library'
+import { strmAPI, type STRMOutputPreset } from '../api/strm'
 import type { Library } from '../types'
 import { useStrmAttachForm } from './useStrmAttachForm'
 import { useStrmGenerateForm } from './useStrmGenerateForm'
@@ -10,6 +11,7 @@ import { useStrmTreeGenerateForm } from './useStrmTreeGenerateForm'
 
 export function useStrmPage() {
   const [libraries, setLibraries] = useState<Library[]>([])
+  const [outputPresets, setOutputPresets] = useState<STRMOutputPreset[]>([])
   const generate = useStrmGenerateForm(libraries)
   const treeGenerate = useStrmTreeGenerateForm()
   const repair = useStrmRepairForm()
@@ -18,6 +20,7 @@ export function useStrmPage() {
 
   useEffect(() => {
     libraryAPI.list().then(setLibraries).catch(() => undefined)
+    strmAPI.outputPresets().then(setOutputPresets).catch(() => undefined)
   }, [])
 
   return {
@@ -25,6 +28,7 @@ export function useStrmPage() {
     generate,
     importForm,
     libraries,
+    outputPresets,
     repair,
     treeGenerate,
   }