优化

优化

web/src/pages/AdminLibraryPanelSections.tsx

@@ -1,6 +1,7 @@
-import { FormEvent } from 'react'
-import { Plus, Trash2 } from 'lucide-react'
+import { FormEvent, useState } from 'react'
+import { Folder, Plus, Trash2 } from 'lucide-react'
 
+import { LocalDirBrowserDialog } from '../components/LocalDirBrowserDialog'
 import type { RootDraft } from './adminLibraryPanelModel'
 
 type CreateFormProps = {
@@ -30,51 +31,77 @@ export function AdminLibraryCreateForm({
   onRemoveRoot,
   onSubmit,
 }: CreateFormProps) {
+  const [browsingIndex, setBrowsingIndex] = useState<number | null>(null)
+
+  const handleSelectDir = (selectedPath: string) => {
+    if (browsingIndex === null) return
+    const currentRoot = roots[browsingIndex]
+    const segments = selectedPath.split(/[/\\]/).filter(Boolean)
+    const baseName = segments.length > 0 ? segments[segments.length - 1] : ''
+    const patch: Partial<RootDraft> = { path: selectedPath }
+    if (!currentRoot?.name?.trim() && baseName) {
+      patch.name = baseName
+    }
+    onRootChange(browsingIndex, patch)
+    setBrowsingIndex(null)
+  }
+
   return (
-    <form onSubmit={onSubmit} className="glass-panel grid gap-3 md:grid-cols-4">
-      <input
-        required
-        className="input-base"
-        placeholder="名称"
-        value={name}
-        onChange={(e) => onNameChange(e.target.value)}
-      />
-      <select className="input-base" value={type} onChange={(e) => onTypeChange(e.target.value)}>
-        <option value="movie">电影</option>
-        <option value="tv">电视剧</option>
-        <option value="variety">综艺</option>
-        <option value="anime">动漫</option>
-        <option value="music">音乐</option>
-      </select>
-      <input
-        className="input-base md:col-span-2"
-        placeholder="自定义封面 URL（可选）"
-        value={coverURL}
-        onChange={(e) => onCoverURLChange(e.target.value)}
-      />
-      <div className="md:col-span-4 space-y-2">
-        {roots.map((root, index) => (
-          <CreateRootRow
-            key={index}
-            root={root}
-            index={index}
-            canRemove={roots.length > 1}
-            onChange={onRootChange}
-            onRemove={onRemoveRoot}
-          />
-        ))}
-        <button type="button" className="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm" onClick={onAddRoot}>
-          <Plus size={16} /> 添加路径
+    <>
+      <form onSubmit={onSubmit} className="glass-panel grid gap-3 md:grid-cols-4">
+        <input
+          required
+          className="input-base"
+          placeholder="名称"
+          value={name}
+          onChange={(e) => onNameChange(e.target.value)}
+        />
+        <select className="input-base" value={type} onChange={(e) => onTypeChange(e.target.value)}>
+          <option value="movie">电影</option>
+          <option value="tv">电视剧</option>
+          <option value="variety">综艺</option>
+          <option value="anime">动漫</option>
+          <option value="music">音乐</option>
+        </select>
+        <input
+          className="input-base md:col-span-2"
+          placeholder="自定义封面 URL（可选）"
+          value={coverURL}
+          onChange={(e) => onCoverURLChange(e.target.value)}
+        />
+        <div className="md:col-span-4 space-y-2">
+          {roots.map((root, index) => (
+            <CreateRootRow
+              key={index}
+              root={root}
+              index={index}
+              canRemove={roots.length > 1}
+              onChange={onRootChange}
+              onBrowse={() => setBrowsingIndex(index)}
+              onRemove={onRemoveRoot}
+            />
+          ))}
+          <button type="button" className="inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm" onClick={onAddRoot}>
+            <Plus size={16} /> 添加路径
+          </button>
+        </div>
+        <p className="md:col-span-4 -mt-2 text-xs text-sand-500">
+          支持直接点选或手动输入；名称和类型与现有媒体库一致时，会自动把这里填写的路径追加到该媒体库。
+        </p>
+        <button type="submit" className="neon-button md:col-span-4">
+          新建 / 追加路径
         </button>
-      </div>
-      <p className="md:col-span-4 -mt-2 text-xs text-sand-500">
-        名称和类型与现有媒体库一致时，会自动把这里填写的路径追加到该媒体库；Docker
-        部署请优先填写容器内路径，例如 /media/电影、/media/电视剧/国产剧。
-      </p>
-      <button type="submit" className="neon-button md:col-span-4">
-        新建 / 追加路径
-      </button>
-    </form>
+      </form>
+
+      {browsingIndex !== null && (
+        <LocalDirBrowserDialog
+          initialDir={roots[browsingIndex]?.path || undefined}
+          title="选择媒体库目录"
+          onSelect={handleSelectDir}
+          onClose={() => setBrowsingIndex(null)}
+        />
+      )}
+    </>
   )
 }
 
@@ -83,25 +110,35 @@ type CreateRootRowProps = {
   index: number
   canRemove: boolean
   onChange: (index: number, patch: Partial<RootDraft>) => void
+  onBrowse: () => void
   onRemove: (index: number) => void
 }
 
-function CreateRootRow({ root, index, canRemove, onChange, onRemove }: CreateRootRowProps) {
+function CreateRootRow({ root, index, canRemove, onChange, onBrowse, onRemove }: CreateRootRowProps) {
   return (
-    <div className="grid gap-2 rounded-xl border border-gray-200/80 bg-white/60 p-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]">
+    <div className="grid gap-2 rounded-xl border border-gray-200/80 bg-white/60 p-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto_auto]">
       <input
         className="input-base"
-        placeholder="路径名称"
+        placeholder="路径名称（如 国产剧）"
         value={root.name ?? ''}
         onChange={(e) => onChange(index, { name: e.target.value })}
       />
       <input
         required={index === 0}
         className="input-base"
-        placeholder="容器路径，如 /media/电视剧/国产剧"
+        placeholder="本地或容器目录，如 /media/电视剧/国产剧"
         value={root.path}
         onChange={(e) => onChange(index, { path: e.target.value })}
       />
+      <button
+        type="button"
+        onClick={onBrowse}
+        className="inline-flex items-center justify-center gap-1 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-ink-100 transition hover:bg-gray-50"
+        title="点选浏览本地目录"
+      >
+        <Folder size={14} className="text-brand-400" />
+        浏览
+      </button>
       <button
         type="button"
         className="rounded-lg border border-red-400/40 px-3 text-red-400 hover:bg-red-400/10 disabled:opacity-40"
@@ -114,3 +151,4 @@ function CreateRootRow({ root, index, canRemove, onChange, onRemove }: CreateRoo
     </div>
   )
 }
+