feat: 新增配音素材管理页面 VoiceMaterialLibrary

- 新建 VoiceMaterialLibrary.tsx：卡片/列表双布局、上传、试听、编辑、删除
- 元信息：名称、音色描述、性别（男/女/童声/中性）、风格标签
- V21 设计系统样式（voice-materials.css），含性别色带、响应式适配
- 路由 /app/voice-materials，导航 + PageHead 面包屑配置
- 当前阶段：静态页面 + Mock 数据，等后端 API 就绪后对接

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/web/src/components/layout/PageHead.tsx

@@ -62,6 +62,7 @@ const ROUTE_TITLE_MAP: Record<string, string> = {
   "/app/editing-planner": "剪辑规划",
   "/app/my-templates": "我的模板",
   "/app/voice-clone": "我的音色",
+  "/app/voice-materials": "配音素材",
   "/app/accounts": "账号管理",
   "/app/duplication": "查重",
   "/app/duplication/results": "查重结果",

apps/web/src/config/navigation.tsx

@@ -67,6 +67,12 @@ export const NAV_ITEMS: NavItem[] = [
     path: "/app/voice-clone",
     icon: <AudioOutlined />,
   },
+  {
+    key: "voice-materials",
+    label: "配音素材",
+    path: "/app/voice-materials",
+    icon: <AudioOutlined />,
+  },
   {
     key: "templates",
     label: "模板库",
@@ -153,6 +159,12 @@ export const NAV_GROUPS: NavGroup[] = [
         path: "/app/voice-clone",
         icon: <AudioOutlined />,
       },
+      {
+        key: "voice-materials",
+        label: "配音素材",
+        path: "/app/voice-materials",
+        icon: <AudioOutlined />,
+      },
       {
         key: "titles",
         label: "标题库",

apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx

@@ -0,0 +1,988 @@
+/**
+ * 配音素材管理页面 — V21 设计系统
+ *
+ * 功能：配音素材的增删改查
+ * - 卡片 / 列表双布局
+ * - 上传配音（音频文件 + 元信息）
+ * - 试听播放
+ * - 编辑元信息（名称、描述、性别、风格标签）
+ * - 删除素材
+ *
+ * 当前阶段：静态页面 + Mock 数据，等后端 API 就绪后对接
+ */
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import {
+  AudioOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  SearchOutlined,
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  UploadOutlined,
+  UnorderedListOutlined,
+  AppstoreOutlined,
+  CloseOutlined,
+  SoundOutlined,
+  UserOutlined,
+  ManOutlined,
+  WomanOutlined,
+} from "@ant-design/icons";
+import { Button, Input, Select, Modal, Tag } from "@/components/ui";
+import PageHead from "@/components/layout/PageHead";
+import "./voice-materials.css";
+
+/* ============================================================
+ * 类型定义
+ * ============================================================ */
+
+type VoiceGender = "male" | "female" | "child" | "neutral";
+type ViewMode = "card" | "list";
+
+/** 风格标签预设 */
+const STYLE_TAGS = [
+  "活力",
+  "沉稳",
+  "温柔",
+  "专业",
+  "甜美",
+  "磁性",
+  "清新",
+  "激昂",
+  "幽默",
+  "庄重",
+];
+
+/** 性别选项 */
+const GENDER_OPTIONS: { value: VoiceGender; label: string; icon: React.ReactNode }[] = [
+  { value: "male", label: "男声", icon: <ManOutlined /> },
+  { value: "female", label: "女声", icon: <WomanOutlined /> },
+  { value: "child", label: "童声", icon: <UserOutlined /> },
+  { value: "neutral", label: "中性", icon: <SoundOutlined /> },
+];
+
+/** 配音素材数据模型 */
+interface VoiceMaterial {
+  id: string;
+  name: string;
+  description: string;
+  gender: VoiceGender;
+  tags: string[];
+  fileName: string;
+  fileSize: number; // bytes
+  duration: number; // seconds
+  mimeType: string;
+  createdAt: string;
+}
+
+/* ============================================================
+ * Mock 数据
+ * ============================================================ */
+
+const MOCK_MATERIALS: VoiceMaterial[] = [
+  {
+    id: "vm-001",
+    name: "品牌宣传片配音",
+    description: "适合企业品牌宣传片的男声配音，沉稳大气",
+    gender: "male",
+    tags: ["沉稳", "专业"],
+    fileName: "brand_promo.mp3",
+    fileSize: 4_500_000,
+    duration: 45,
+    mimeType: "audio/mpeg",
+    createdAt: "2026-06-28T10:00:00Z",
+  },
+  {
+    id: "vm-002",
+    name: "产品解说配音-活力版",
+    description: "适合短视频产品介绍的活力女声",
+    gender: "female",
+    tags: ["活力", "甜美"],
+    fileName: "product_intro_v1.mp3",
+    fileSize: 2_800_000,
+    duration: 28,
+    mimeType: "audio/mpeg",
+    createdAt: "2026-06-29T14:30:00Z",
+  },
+  {
+    id: "vm-003",
+    name: "儿童故事旁白",
+    description: "温柔亲切的童声风格，适合儿童内容",
+    gender: "child",
+    tags: ["温柔", "清新"],
+    fileName: "kids_story.wav",
+    fileSize: 8_200_000,
+    duration: 82,
+    mimeType: "audio/wav",
+    createdAt: "2026-07-01T09:15:00Z",
+  },
+  {
+    id: "vm-004",
+    name: "新闻播报配音",
+    description: "专业新闻播报风格，中性偏男声",
+    gender: "neutral",
+    tags: ["专业", "庄重"],
+    fileName: "news_report.mp3",
+    fileSize: 3_600_000,
+    duration: 36,
+    mimeType: "audio/mpeg",
+    createdAt: "2026-07-02T16:45:00Z",
+  },
+  {
+    id: "vm-005",
+    name: "广告旁白-磁性男声",
+    description: "磁性男声，适合高端产品广告",
+    gender: "male",
+    tags: ["磁性", "专业"],
+    fileName: "ad_voice_male.mp3",
+    fileSize: 1_900_000,
+    duration: 19,
+    mimeType: "audio/mpeg",
+    createdAt: "2026-07-03T11:20:00Z",
+  },
+  {
+    id: "vm-006",
+    name: "教程解说配音",
+    description: "清晰亲切的女声解说，适合教学视频",
+    gender: "female",
+    tags: ["清新", "专业"],
+    fileName: "tutorial_voice.mp3",
+    fileSize: 5_100_000,
+    duration: 51,
+    mimeType: "audio/mpeg",
+    createdAt: "2026-07-04T08:00:00Z",
+  },
+  {
+    id: "vm-007",
+    name: "搞笑视频配音",
+    description: "幽默风格的男声配音，适合搞笑短视频",
+    gender: "male",
+    tags: ["幽默", "活力"],
+    fileName: "funny_voice.mp3",
+    fileSize: 1_200_000,
+    duration: 12,
+    mimeType: "audio/mpeg",
+    createdAt: "2026-07-05T13:30:00Z",
+  },
+  {
+    id: "vm-008",
+    name: "有声书旁白-温柔女声",
+    description: "温柔细腻的女声，适合有声读物和情感类内容",
+    gender: "female",
+    tags: ["温柔", "甜美"],
+    fileName: "audiobook_voice.mp3",
+    fileSize: 12_000_000,
+    duration: 120,
+    mimeType: "audio/mpeg",
+    createdAt: "2026-07-06T17:00:00Z",
+  },
+];
+
+/* ============================================================
+ * 工具函数
+ * ============================================================ */
+
+const genderLabel = (g: VoiceGender) =>
+  GENDER_OPTIONS.find((o) => o.value === g)?.label ?? g;
+
+const genderIcon = (g: VoiceGender) =>
+  GENDER_OPTIONS.find((o) => o.value === g)?.icon ?? null;
+
+const genderClass = (g: VoiceGender) => `vmat-gender--${g}`;
+
+const formatDuration = (seconds: number): string => {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const formatDate = (iso: string): string =>
+  new Date(iso).toLocaleDateString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+
+/* ============================================================
+ * 上传 / 编辑 表单
+ * ============================================================ */
+
+interface MaterialFormProps {
+  initial?: VoiceMaterial;
+  onSubmit: (data: Omit<VoiceMaterial, "id" | "createdAt"> & { file?: File }) => void;
+  onCancel: () => void;
+  loading?: boolean;
+}
+
+const MaterialForm: React.FC<MaterialFormProps> = ({
+  initial,
+  onSubmit,
+  onCancel,
+  loading,
+}) => {
+  const [name, setName] = useState(initial?.name ?? "");
+  const [description, setDescription] = useState(initial?.description ?? "");
+  const [gender, setGender] = useState<VoiceGender>(initial?.gender ?? "female");
+  const [selectedTags, setSelectedTags] = useState<string[]>(initial?.tags ?? []);
+  const [file, setFile] = useState<File | undefined>(undefined);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleTagToggle = (tag: string) => {
+    setSelectedTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
+    );
+  };
+
+  const handleSubmit = () => {
+    if (!name.trim()) return;
+    if (!initial && !file) return;
+    onSubmit({
+      name: name.trim(),
+      description: description.trim(),
+      gender,
+      tags: selectedTags,
+      fileName: file?.name ?? initial?.fileName ?? "",
+      fileSize: file?.size ?? initial?.fileSize ?? 0,
+      duration: initial?.duration ?? 0,
+      mimeType: file?.type ?? initial?.mimeType ?? "audio/mpeg",
+      file,
+    });
+  };
+
+  return (
+    <div className="vmat-form">
+      {/* 音频文件上传（编辑模式不显示） */}
+      {!initial && (
+        <div className="vmat-form-field">
+          <label className="vmat-form-label">音频文件 *</label>
+          <div
+            className="vmat-upload-zone"
+            onClick={() => fileInputRef.current?.click()}
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={(e) => {
+              e.preventDefault();
+              const f = e.dataTransfer.files[0];
+              if (f?.type.startsWith("audio/")) setFile(f);
+            }}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="audio/*"
+              style={{ display: "none" }}
+              onChange={(e) => {
+                const f = e.target.files?.[0];
+                if (f) setFile(f);
+              }}
+            />
+            {file ? (
+              <div className="vmat-upload-selected">
+                <SoundOutlined className="vmat-upload-icon" />
+                <span className="vmat-upload-filename">{file.name}</span>
+                <span className="vmat-upload-filesize">
+                  {formatFileSize(file.size)}
+                </span>
+                <button
+                  type="button"
+                  className="vmat-upload-clear"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setFile(undefined);
+                  }}
+                >
+                  <CloseOutlined />
+                </button>
+              </div>
+            ) : (
+              <div className="vmat-upload-placeholder">
+                <UploadOutlined className="vmat-upload-icon" />
+                <p>点击或拖拽音频文件到此处</p>
+                <span>支持 MP3、WAV、AAC、FLAC 等格式</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 名称 */}
+      <div className="vmat-form-field">
+        <label className="vmat-form-label">名称 *</label>
+        <Input
+          placeholder="输入配音素材名称"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          maxLength={50}
+        />
+      </div>
+
+      {/* 音色描述 */}
+      <div className="vmat-form-field">
+        <label className="vmat-form-label">音色描述</label>
+        <Input.TextArea
+          placeholder="描述音色特点，如：适合产品宣传的男声配音..."
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={3}
+          maxLength={200}
+        />
+      </div>
+
+      {/* 性别 */}
+      <div className="vmat-form-field">
+        <label className="vmat-form-label">性别</label>
+        <div className="vmat-gender-group">
+          {GENDER_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              className={`vmat-gender-btn${gender === opt.value ? " active" : ""} ${genderClass(opt.value)}`}
+              onClick={() => setGender(opt.value)}
+            >
+              {opt.icon}
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 风格标签 */}
+      <div className="vmat-form-field">
+        <label className="vmat-form-label">风格标签</label>
+        <div className="vmat-tag-group">
+          {STYLE_TAGS.map((tag) => (
+            <button
+              key={tag}
+              type="button"
+              className={`vmat-tag-btn${selectedTags.includes(tag) ? " active" : ""}`}
+              onClick={() => handleTagToggle(tag)}
+            >
+              {tag}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 操作按钮 */}
+      <div className="vmat-form-actions">
+        <Button buttonType="ghost" buttonSize="md" onClick={onCancel}>
+          取消
+        </Button>
+        <Button
+          buttonType="primary"
+          buttonSize="md"
+          onClick={handleSubmit}
+          loading={loading}
+          disabled={!name.trim() || (!initial && !file)}
+        >
+          {initial ? "保存修改" : "上传"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+/* ============================================================
+ * 卡片组件
+ * ============================================================ */
+
+interface VoiceCardProps {
+  material: VoiceMaterial;
+  isPlaying: boolean;
+  currentTime: number;
+  onPlay: () => void;
+  onPause: () => void;
+  onSeek: (time: number) => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+const VoiceMaterialCard: React.FC<VoiceCardProps> = ({
+  material,
+  isPlaying,
+  currentTime,
+  onPlay,
+  onPause,
+  onSeek,
+  onEdit,
+  onDelete,
+}) => {
+  const progressRef = useRef<HTMLDivElement>(null);
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!progressRef.current) return;
+    const rect = progressRef.current.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    onSeek(Math.max(0, Math.min(1, percent)) * material.duration);
+  };
+
+  const progress =
+    material.duration > 0 ? (currentTime / material.duration) * 100 : 0;
+
+  return (
+    <div className={`vmat-card ${genderClass(material.gender)}${isPlaying ? " playing" : ""}`}>
+      {/* 操作按钮 */}
+      <div className="vmat-card-actions">
+        <button
+          type="button"
+          className="vmat-card-action-btn"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit();
+          }}
+          title="编辑"
+        >
+          <EditOutlined />
+        </button>
+        <button
+          type="button"
+          className="vmat-card-action-btn vmat-card-action-btn--danger"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          title="删除"
+        >
+          <DeleteOutlined />
+        </button>
+      </div>
+
+      {/* 头部：图标 + 名称 + 性别 */}
+      <div className="vmat-card-header">
+        <div className="vmat-card-avatar">
+          <AudioOutlined />
+        </div>
+        <div className="vmat-card-title-area">
+          <h4 className="vmat-card-name" title={material.name}>
+            {material.name}
+          </h4>
+          <span className={`vmat-card-gender ${genderClass(material.gender)}`}>
+            {genderIcon(material.gender)}
+            {genderLabel(material.gender)}
+          </span>
+        </div>
+      </div>
+
+      {/* 描述 */}
+      {material.description && (
+        <p className="vmat-card-desc">{material.description}</p>
+      )}
+
+      {/* 标签 */}
+      <div className="vmat-card-tags">
+        {material.tags.map((tag) => (
+          <Tag key={tag} variant="info">
+            {tag}
+          </Tag>
+        ))}
+      </div>
+
+      {/* 元信息 */}
+      <div className="vmat-card-meta">
+        <span>{formatDuration(material.duration)}</span>
+        <span>{formatFileSize(material.fileSize)}</span>
+        <span>{formatDate(material.createdAt)}</span>
+      </div>
+
+      {/* 播放控制 */}
+      <div className="vmat-card-player">
+        <button
+          type="button"
+          className="vmat-play-btn"
+          onClick={(e) => {
+            e.stopPropagation();
+            isPlaying ? onPause() : onPlay();
+          }}
+        >
+          {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+        </button>
+        <div
+          ref={progressRef}
+          className="vmat-progress"
+          onClick={handleProgressClick}
+        >
+          <div
+            className="vmat-progress-bar"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+        <span className="vmat-time">
+          {isPlaying ? formatDuration(currentTime) : formatDuration(material.duration)}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+/* ============================================================
+ * 列表行组件
+ * ============================================================ */
+
+interface VoiceRowProps {
+  material: VoiceMaterial;
+  isPlaying: boolean;
+  currentTime: number;
+  onPlay: () => void;
+  onPause: () => void;
+  onSeek: (time: number) => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+const VoiceMaterialRow: React.FC<VoiceRowProps> = ({
+  material,
+  isPlaying,
+  currentTime,
+  onPlay,
+  onPause,
+  onSeek,
+  onEdit,
+  onDelete,
+}) => {
+  const progressRef = useRef<HTMLDivElement>(null);
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!progressRef.current) return;
+    const rect = progressRef.current.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    onSeek(Math.max(0, Math.min(1, percent)) * material.duration);
+  };
+
+  const progress =
+    material.duration > 0 ? (currentTime / material.duration) * 100 : 0;
+
+  return (
+    <div className={`vmat-row ${genderClass(material.gender)}${isPlaying ? " playing" : ""}`}>
+      {/* 播放按钮 */}
+      <button
+        type="button"
+        className="vmat-row-play"
+        onClick={(e) => {
+          e.stopPropagation();
+          isPlaying ? onPause() : onPlay();
+        }}
+      >
+        {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+      </button>
+
+      {/* 名称 + 描述 */}
+      <div className="vmat-row-info">
+        <h4 className="vmat-row-name">{material.name}</h4>
+        {material.description && (
+          <p className="vmat-row-desc">{material.description}</p>
+        )}
+      </div>
+
+      {/* 性别 */}
+      <span className={`vmat-row-gender ${genderClass(material.gender)}`}>
+        {genderIcon(material.gender)}
+        {genderLabel(material.gender)}
+      </span>
+
+      {/* 标签 */}
+      <div className="vmat-row-tags">
+        {material.tags.map((tag) => (
+          <Tag key={tag} variant="info">
+            {tag}
+          </Tag>
+        ))}
+      </div>
+
+      {/* 进度条 */}
+      <div
+        ref={progressRef}
+        className="vmat-row-progress"
+        onClick={handleProgressClick}
+      >
+        <div
+          className="vmat-row-progress-bar"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+
+      {/* 时长 */}
+      <span className="vmat-row-time">
+        {isPlaying ? formatDuration(currentTime) : formatDuration(material.duration)}
+      </span>
+
+      {/* 文件大小 */}
+      <span className="vmat-row-size">{formatFileSize(material.fileSize)}</span>
+
+      {/* 操作 */}
+      <div className="vmat-row-actions">
+        <button
+          type="button"
+          className="vmat-row-action-btn"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit();
+          }}
+          title="编辑"
+        >
+          <EditOutlined />
+        </button>
+        <button
+          type="button"
+          className="vmat-row-action-btn vmat-row-action-btn--danger"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          title="删除"
+        >
+          <DeleteOutlined />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+/* ============================================================
+ * 主组件
+ * ============================================================ */
+
+const VoiceMaterialLibrary: React.FC = () => {
+  // 数据（Mock）
+  const [materials, setMaterials] = useState<VoiceMaterial[]>(MOCK_MATERIALS);
+
+  // 视图
+  const [viewMode, setViewMode] = useState<ViewMode>("card");
+  const [searchText, setSearchText] = useState("");
+  const [filterGender, setFilterGender] = useState<string>("all");
+  const [filterTag, setFilterTag] = useState<string>("all");
+
+  // 播放
+  const [playingId, setPlayingId] = useState<string | null>(null);
+  const [currentTime, setCurrentTime] = useState(0);
+  const intervalRef = useRef<number | null>(null);
+
+  // 弹窗
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [editingMaterial, setEditingMaterial] = useState<VoiceMaterial | null>(null);
+
+  /* ── 播放控制 ─────────────────────────────────────────── */
+
+  const stopPlayback = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setPlayingId(null);
+    setCurrentTime(0);
+  }, []);
+
+  const startPlayback = useCallback(
+    (id: string, duration: number) => {
+      stopPlayback();
+      setPlayingId(id);
+      setCurrentTime(0);
+      intervalRef.current = window.setInterval(() => {
+        setCurrentTime((prev) => {
+          if (prev >= duration) {
+            if (intervalRef.current) clearInterval(intervalRef.current);
+            intervalRef.current = null;
+            setPlayingId(null);
+            return 0;
+          }
+          return prev + 0.1;
+        });
+      }, 100);
+    },
+    [stopPlayback],
+  );
+
+  const handlePlay = useCallback(
+    (id: string, duration: number) => {
+      if (playingId === id) return;
+      startPlayback(id, duration);
+    },
+    [playingId, startPlayback],
+  );
+
+  const handlePause = useCallback(() => {
+    stopPlayback();
+  }, [stopPlayback]);
+
+  const handleSeek = useCallback(
+    (id: string, time: number, duration: number) => {
+      setCurrentTime(time);
+      if (playingId !== id) {
+        startPlayback(id, duration);
+      }
+    },
+    [playingId, startPlayback],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  /* ── 数据操作（Mock） ──────────────────────────────────── */
+
+  const handleUpload = (data: Omit<VoiceMaterial, "id" | "createdAt"> & { file?: File }) => {
+    const newMaterial: VoiceMaterial = {
+      ...data,
+      id: `vm-${Date.now()}`,
+      createdAt: new Date().toISOString(),
+      // 模拟音频时长（实际应从 Audio 元素获取）
+      duration: data.duration || Math.floor(Math.random() * 60) + 10,
+    };
+    setMaterials((prev) => [newMaterial, ...prev]);
+    setUploadOpen(false);
+  };
+
+  const handleEdit = (data: Omit<VoiceMaterial, "id" | "createdAt"> & { file?: File }) => {
+    if (!editingMaterial) return;
+    setMaterials((prev) =>
+      prev.map((m) =>
+        m.id === editingMaterial.id
+          ? { ...m, name: data.name, description: data.description, gender: data.gender, tags: data.tags }
+          : m,
+      ),
+    );
+    setEditingMaterial(null);
+  };
+
+  const handleDelete = (id: string) => {
+    const material = materials.find((m) => m.id === id);
+    if (!material) return;
+    Modal.confirm({
+      title: "确认删除",
+      content: `确定删除配音素材「${material.name}」吗？删除后不可恢复。`,
+      okText: "删除",
+      okButtonProps: { danger: true },
+      cancelText: "取消",
+      onOk: () => {
+        if (playingId === id) stopPlayback();
+        setMaterials((prev) => prev.filter((m) => m.id !== id));
+      },
+    });
+  };
+
+  /* ── 筛选 ─────────────────────────────────────────────── */
+
+  const filtered = React.useMemo(() => {
+    let list = materials;
+    if (filterGender !== "all") {
+      list = list.filter((m) => m.gender === filterGender);
+    }
+    if (filterTag !== "all") {
+      list = list.filter((m) => m.tags.includes(filterTag));
+    }
+    if (searchText.trim()) {
+      const q = searchText.trim().toLowerCase();
+      list = list.filter(
+        (m) =>
+          m.name.toLowerCase().includes(q) ||
+          m.description.toLowerCase().includes(q) ||
+          m.tags.some((t) => t.toLowerCase().includes(q)),
+      );
+    }
+    return list;
+  }, [materials, filterGender, filterTag, searchText]);
+
+  /* ── 所有用到的标签（用于筛选下拉） ────────────────────── */
+
+  const allTags = React.useMemo(() => {
+    const set = new Set<string>();
+    materials.forEach((m) => m.tags.forEach((t) => set.add(t)));
+    return Array.from(set).sort();
+  }, [materials]);
+
+  /* ── 渲染 ─────────────────────────────────────────────── */
+
+  const pageActions = (
+    <div className="vmat-page-actions">
+      <Button
+        buttonType="primary"
+        buttonSize="sm"
+        icon={<PlusOutlined />}
+        onClick={() => setUploadOpen(true)}
+      >
+        上传配音
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className="vmat-page">
+      <PageHead
+        title="配音素材"
+        description="管理配音音频素材，支持上传、试听、编辑元信息"
+        actions={pageActions}
+      />
+
+      {/* 工具栏：搜索 + 筛选 + 视图切换 */}
+      <div className="vmat-toolbar">
+        <div className="vmat-toolbar-left">
+          <Input
+            placeholder="搜索配音素材..."
+            prefix={<SearchOutlined />}
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            allowClear
+            style={{ width: 240 }}
+          />
+          <Select
+            value={filterGender}
+            onChange={setFilterGender}
+            style={{ width: 120 }}
+            options={[
+              { value: "all", label: "全部性别" },
+              { value: "male", label: "男声" },
+              { value: "female", label: "女声" },
+              { value: "child", label: "童声" },
+              { value: "neutral", label: "中性" },
+            ]}
+          />
+          <Select
+            value={filterTag}
+            onChange={setFilterTag}
+            style={{ width: 120 }}
+            options={[
+              { value: "all", label: "全部风格" },
+              ...allTags.map((t) => ({ value: t, label: t })),
+            ]}
+          />
+        </div>
+        <div className="vmat-toolbar-right">
+          <span className="vmat-result-count">
+            共 {filtered.length} 个素材
+          </span>
+          <div className="vmat-view-toggle">
+            <button
+              type="button"
+              className={`vmat-view-btn${viewMode === "card" ? " active" : ""}`}
+              onClick={() => setViewMode("card")}
+              title="卡片视图"
+            >
+              <AppstoreOutlined />
+            </button>
+            <button
+              type="button"
+              className={`vmat-view-btn${viewMode === "list" ? " active" : ""}`}
+              onClick={() => setViewMode("list")}
+              title="列表视图"
+            >
+              <UnorderedListOutlined />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 内容区 */}
+      {filtered.length > 0 && viewMode === "card" && (
+        <div className="vmat-grid">
+          {filtered.map((m) => (
+            <VoiceMaterialCard
+              key={m.id}
+              material={m}
+              isPlaying={playingId === m.id}
+              currentTime={playingId === m.id ? currentTime : 0}
+              onPlay={() => handlePlay(m.id, m.duration)}
+              onPause={handlePause}
+              onSeek={(t) => handleSeek(m.id, t, m.duration)}
+              onEdit={() => setEditingMaterial(m)}
+              onDelete={() => handleDelete(m.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {filtered.length > 0 && viewMode === "list" && (
+        <div className="vmat-list">
+          {/* 列表头 */}
+          <div className="vmat-list-header">
+            <span className="vmat-lh-play" />
+            <span className="vmat-lh-info">名称</span>
+            <span className="vmat-lh-gender">性别</span>
+            <span className="vmat-lh-tags">风格</span>
+            <span className="vmat-lh-progress">试听</span>
+            <span className="vmat-lh-time">时长</span>
+            <span className="vmat-lh-size">大小</span>
+            <span className="vmat-lh-actions">操作</span>
+          </div>
+          {filtered.map((m) => (
+            <VoiceMaterialRow
+              key={m.id}
+              material={m}
+              isPlaying={playingId === m.id}
+              currentTime={playingId === m.id ? currentTime : 0}
+              onPlay={() => handlePlay(m.id, m.duration)}
+              onPause={handlePause}
+              onSeek={(t) => handleSeek(m.id, t, m.duration)}
+              onEdit={() => setEditingMaterial(m)}
+              onDelete={() => handleDelete(m.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {filtered.length === 0 && (
+        <div className="vmat-empty">
+          <div className="vmat-empty-icon">
+            <AudioOutlined />
+          </div>
+          <h3>暂无配音素材</h3>
+          <p>
+            {searchText || filterGender !== "all" || filterTag !== "all"
+              ? "未找到匹配的素材，试试调整筛选条件"
+              : "上传音频文件，开始管理配音素材"}
+          </p>
+          {!searchText && filterGender === "all" && filterTag === "all" && (
+            <Button
+              buttonType="primary"
+              buttonSize="md"
+              icon={<UploadOutlined />}
+              onClick={() => setUploadOpen(true)}
+            >
+              上传配音
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* 上传弹窗 */}
+      <Modal
+        title="上传配音素材"
+        open={uploadOpen}
+        onCancel={() => setUploadOpen(false)}
+        footer={null}
+        width={520}
+        destroyOnClose
+      >
+        <MaterialForm
+          onSubmit={handleUpload}
+          onCancel={() => setUploadOpen(false)}
+        />
+      </Modal>
+
+      {/* 编辑弹窗 */}
+      <Modal
+        title="编辑配音素材"
+        open={!!editingMaterial}
+        onCancel={() => setEditingMaterial(null)}
+        footer={null}
+        width={520}
+        destroyOnClose
+      >
+        {editingMaterial && (
+          <MaterialForm
+            initial={editingMaterial}
+            onSubmit={handleEdit}
+            onCancel={() => setEditingMaterial(null)}
+          />
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default VoiceMaterialLibrary;

apps/web/src/pages/voice-materials/voice-materials.css

@@ -0,0 +1,814 @@
+/* ============================================================
+ * 配音素材管理页面 — V21 设计系统
+ * ============================================================ */
+
+.vmat-page {
+  padding: 24px 32px;
+  min-height: 100%;
+}
+
+/* ── 页面操作按钮 ─────────────────────────────────────────── */
+
+.vmat-page-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ── 工具栏 ───────────────────────────────────────────────── */
+
+.vmat-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.vmat-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.vmat-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.vmat-result-count {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+/* ── 视图切换 ─────────────────────────────────────────────── */
+
+.vmat-view-toggle {
+  display: flex;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.vmat-view-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  background: var(--bg-surface);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-size: 15px;
+}
+
+.vmat-view-btn:first-child {
+  border-right: 1px solid var(--border-primary);
+}
+
+.vmat-view-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.vmat-view-btn.active {
+  color: var(--primary-600);
+  background: var(--primary-50);
+}
+
+/* ── 卡片网格 ─────────────────────────────────────────────── */
+
+.vmat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+/* ── 卡片 ─────────────────────────────────────────────────── */
+
+.vmat-card {
+  position: relative;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  padding: 18px;
+  transition: all var(--transition-normal);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.vmat-card:hover {
+  border-color: var(--primary-300);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.vmat-card.playing {
+  border-color: var(--primary-500);
+  box-shadow: 0 0 0 1px var(--primary-500), var(--shadow-md);
+}
+
+/* 性别色带 */
+.vmat-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  background: var(--neutral-300);
+}
+
+.vmat-card.vmat-gender--male::before {
+  background: var(--primary-500);
+}
+
+.vmat-card.vmat-gender--female::before {
+  background: var(--secondary-500);
+}
+
+.vmat-card.vmat-gender--child::before {
+  background: var(--accent-500);
+}
+
+.vmat-card.vmat-gender--neutral::before {
+  background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
+}
+
+/* 卡片操作按钮 */
+.vmat-card-actions {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.vmat-card:hover .vmat-card-actions {
+  opacity: 1;
+}
+
+.vmat-card-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all var(--transition-fast);
+}
+
+.vmat-card-action-btn:hover {
+  background: var(--primary-50);
+  color: var(--primary-600);
+}
+
+.vmat-card-action-btn--danger:hover {
+  background: var(--error-50);
+  color: var(--error-600);
+}
+
+/* 卡片头部 */
+.vmat-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.vmat-card-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--primary-50);
+  color: var(--primary-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.vmat-gender--female .vmat-card-avatar {
+  background: var(--secondary-50);
+  color: var(--secondary-600);
+}
+
+.vmat-gender--child .vmat-card-avatar {
+  background: var(--accent-50);
+  color: var(--accent-600);
+}
+
+.vmat-gender--neutral .vmat-card-avatar {
+  background: var(--indigo-50);
+  color: var(--indigo-600);
+}
+
+.vmat-card-title-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.vmat-card-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vmat-card-gender {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.vmat-card-gender.vmat-gender--male {
+  color: var(--primary-600);
+}
+
+.vmat-card-gender.vmat-gender--female {
+  color: var(--secondary-600);
+}
+
+.vmat-card-gender.vmat-gender--child {
+  color: var(--accent-600);
+}
+
+/* 描述 */
+.vmat-card-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 标签 */
+.vmat-card-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+/* 元信息 */
+.vmat-card-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+/* 播放器 */
+.vmat-card-player {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-light);
+}
+
+.vmat-play-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: var(--primary-500);
+  color: #fff;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.vmat-play-btn:hover {
+  background: var(--primary-600);
+  transform: scale(1.05);
+}
+
+.vmat-play-btn:active {
+  transform: scale(0.95);
+}
+
+.vmat-progress {
+  flex: 1;
+  height: 4px;
+  background: var(--neutral-200);
+  border-radius: 2px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.vmat-progress:hover {
+  height: 6px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+.vmat-progress-bar {
+  height: 100%;
+  background: var(--primary-500);
+  border-radius: 2px;
+  transition: width 0.1s linear;
+}
+
+.vmat-time {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+  min-width: 36px;
+  text-align: right;
+}
+
+/* ── 列表视图 ─────────────────────────────────────────────── */
+
+.vmat-list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.vmat-list-header {
+  display: grid;
+  grid-template-columns: 48px 1fr 80px 160px 120px 60px 70px 80px;
+  align-items: center;
+  padding: 10px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-primary);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.vmat-row {
+  display: grid;
+  grid-template-columns: 48px 1fr 80px 160px 120px 60px 70px 80px;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-light);
+  transition: background var(--transition-fast);
+  position: relative;
+}
+
+.vmat-row:last-child {
+  border-bottom: none;
+}
+
+.vmat-row:hover {
+  background: var(--bg-hover);
+}
+
+.vmat-row.playing {
+  background: var(--primary-50);
+}
+
+/* 列表性别色条 */
+.vmat-row::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: transparent;
+}
+
+.vmat-row.vmat-gender--male::before {
+  background: var(--primary-500);
+}
+
+.vmat-row.vmat-gender--female::before {
+  background: var(--secondary-500);
+}
+
+.vmat-row.vmat-gender--child::before {
+  background: var(--accent-500);
+}
+
+.vmat-row.vmat-gender--neutral::before {
+  background: linear-gradient(180deg, var(--primary-500), var(--secondary-500));
+}
+
+/* 列表播放按钮 */
+.vmat-row-play {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--primary-600);
+  cursor: pointer;
+  font-size: 20px;
+  transition: all var(--transition-fast);
+}
+
+.vmat-row-play:hover {
+  background: var(--primary-50);
+}
+
+/* 列表信息 */
+.vmat-row-info {
+  min-width: 0;
+  padding-right: 12px;
+}
+
+.vmat-row-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0 0 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vmat-row-desc {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 列表性别 */
+.vmat-row-gender {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.vmat-row-gender.vmat-gender--male {
+  color: var(--primary-600);
+}
+
+.vmat-row-gender.vmat-gender--female {
+  color: var(--secondary-600);
+}
+
+.vmat-row-gender.vmat-gender--child {
+  color: var(--accent-600);
+}
+
+/* 列表标签 */
+.vmat-row-tags {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+/* 列表进度条 */
+.vmat-row-progress {
+  height: 4px;
+  background: var(--neutral-200);
+  border-radius: 2px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.vmat-row-progress:hover {
+  height: 6px;
+}
+
+.vmat-row-progress-bar {
+  height: 100%;
+  background: var(--primary-500);
+  border-radius: 2px;
+  transition: width 0.1s linear;
+}
+
+/* 列表其他列 */
+.vmat-row-time,
+.vmat-row-size {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 列表操作 */
+.vmat-row-actions {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+}
+
+.vmat-row-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all var(--transition-fast);
+}
+
+.vmat-row-action-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.vmat-row-action-btn--danger:hover {
+  background: var(--error-50);
+  color: var(--error-600);
+}
+
+/* ── 空状态 ───────────────────────────────────────────────── */
+
+.vmat-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 24px;
+  text-align: center;
+}
+
+.vmat-empty-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--neutral-100);
+  color: var(--neutral-400);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  margin-bottom: 16px;
+}
+
+.vmat-empty h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 8px;
+}
+
+.vmat-empty p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 20px;
+}
+
+/* ── 表单 ─────────────────────────────────────────────────── */
+
+.vmat-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.vmat-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.vmat-form-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+/* 上传区域 */
+.vmat-upload-zone {
+  border: 2px dashed var(--border-primary);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: center;
+}
+
+.vmat-upload-zone:hover {
+  border-color: var(--primary-400);
+  background: var(--primary-50);
+}
+
+.vmat-upload-placeholder {
+  color: var(--text-tertiary);
+}
+
+.vmat-upload-placeholder .vmat-upload-icon {
+  font-size: 32px;
+  color: var(--primary-400);
+  margin-bottom: 8px;
+}
+
+.vmat-upload-placeholder p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 8px 0 4px;
+}
+
+.vmat-upload-placeholder span {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.vmat-upload-selected {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.vmat-upload-selected .vmat-upload-icon {
+  font-size: 20px;
+  color: var(--primary-500);
+}
+
+.vmat-upload-filename {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vmat-upload-filesize {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.vmat-upload-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background: var(--neutral-100);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  font-size: 12px;
+  transition: all var(--transition-fast);
+}
+
+.vmat-upload-clear:hover {
+  background: var(--error-50);
+  color: var(--error-600);
+}
+
+/* 性别选择 */
+.vmat-gender-group {
+  display: flex;
+  gap: 8px;
+}
+
+.vmat-gender-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.vmat-gender-btn:hover {
+  border-color: var(--primary-300);
+  color: var(--text-primary);
+}
+
+.vmat-gender-btn.active.vmat-gender--male {
+  border-color: var(--primary-500);
+  background: var(--primary-50);
+  color: var(--primary-700);
+}
+
+.vmat-gender-btn.active.vmat-gender--female {
+  border-color: var(--secondary-500);
+  background: var(--secondary-50);
+  color: var(--secondary-700);
+}
+
+.vmat-gender-btn.active.vmat-gender--child {
+  border-color: var(--accent-500);
+  background: var(--accent-50);
+  color: var(--accent-700);
+}
+
+.vmat-gender-btn.active.vmat-gender--neutral {
+  border-color: var(--indigo-500);
+  background: var(--indigo-50);
+  color: var(--indigo-700);
+}
+
+/* 标签选择 */
+.vmat-tag-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.vmat-tag-btn {
+  padding: 5px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.vmat-tag-btn:hover {
+  border-color: var(--primary-300);
+  color: var(--text-primary);
+}
+
+.vmat-tag-btn.active {
+  border-color: var(--primary-500);
+  background: var(--primary-50);
+  color: var(--primary-700);
+}
+
+/* 表单操作 */
+.vmat-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 8px;
+}
+
+/* ── 响应式 ───────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .vmat-page {
+    padding: 16px;
+  }
+
+  .vmat-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .vmat-list-header,
+  .vmat-row {
+    grid-template-columns: 40px 1fr 60px 80px;
+  }
+
+  .vmat-lh-progress,
+  .vmat-lh-time,
+  .vmat-lh-size,
+  .vmat-lh-actions,
+  .vmat-row-progress,
+  .vmat-row-time,
+  .vmat-row-size,
+  .vmat-row-actions {
+    display: none;
+  }
+
+  .vmat-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .vmat-toolbar-right {
+    justify-content: space-between;
+  }
+}

apps/web/src/router/index.tsx

@@ -156,6 +156,13 @@ export const router = createBrowserRouter([
             Component: m.default,
           })),
       },
+      {
+        path: "voice-materials",
+        lazy: () =>
+          import("@/pages/voice-materials/VoiceMaterialLibrary").then((m) => ({
+            Component: m.default,
+          })),
+      },
       {
         path: "my-voices",
         lazy: () =>