音乐模块调整
This commit is contained in:
@@ -0,0 +1,253 @@
|
||||
# 2026-09-12
|
||||
|
||||
## 设置页图标修复 + WebDAV 凭据加密存储 / 配置后隐藏
|
||||
|
||||
- **图标不显示根因**：设置页模板用了 `HardDriveDownload` 但从未 import——`vue-tsc` 不报错（未在 script 中引用、模板解析为未知组件静默失败），**运行时图标直接消失**。以后设置页新增图标必须同步加到 lucide import 列表。
|
||||
- **WebDAV 凭据加密**：新增 Rust 命令 `webdav_get_secret` / `webdav_save_secret`（`commands.rs`，非 specta，走 raw invoke；已注册 mod.rs 导出 + lib.rs generate_handler）。Windows 用 **keyring v3（windows-native，凭据管理器，DPAPI 保护）**，service="Thing" user="webdav-credentials"，blob 为 `{"username","password"}` JSON；NoEntry 视为未配置。
|
||||
- **feiniuStore**：`WEBDAV_KEY` localStorage 现在只存 `{url, dir}`；`patchWebdav` 检测 `username/password` 字段时调 `webdav_save_secret`；`init()` 从凭据管理器加载凭据，并做一次性迁移（localStorage 有旧明文凭据 → 写入凭据管理器 + 立即改写 LS 去掉明文；用 `hasStoredSecret` 标志避免误覆盖）。`davConfig()` 仍从内存取明文传给 webdav_* 命令，链路不变。
|
||||
- **设置页 UI**：`webdavEditing` ref 控制——`webdavReady && !webdavEditing` 时显示摘要卡（服务地址/目标目录 + 「账号/密码已保存（系统凭据管理器加密存储）」），带「修改配置」「测试连接」；编辑态完整表单（密码框 type=password 本身掩码）+「收起」。
|
||||
- 校验：cargo check（新增 keyring 3.6.3）/ vue-tsc / vite build 全 0。
|
||||
|
||||
## 音乐模块全链路检查 + 排序/设置页/任务页调整
|
||||
|
||||
- **模块排序**：`music/index.ts` order 55→15（代理=10 之后、整体第二）；`appStore.ts` loadSettings 增加一次性迁移（`musicOrderMigrated` 标记随设置持久化，声明在 store setup 内的非响应式 let），已保存过 moduleOrder 的用户下次启动自动把 music 移到 proxy 后，之后尊重手动拖动。
|
||||
- **隐藏 bug 修复（MusicModule.vue）**：
|
||||
1. `downloadToFeiniu` 早退分支（Rust 引擎/无下载源）未清理 `feiniuUploadingKeys` → 行按钮 spinner 永久卡死；
|
||||
2. `resolvePendingUploads` 只处理 done，临时「下载到飞牛」任务 error/cancelled/interrupted 或被手动移除时 spinner 同样卡死 → 增加失败/移除清理分支（注意：临时任务的 tempTaskIds.add 发生在任务进入 tasks 之后，watch 触发时序依赖后续状态变化再触发一次）；
|
||||
3. `feiniu.uploading` 时不再叠加触发 `uploadRecentToFeiniu`。
|
||||
- **下载任务 tabs**：去掉标题上的进行中计数（连同 `activeTaskCount` computed，noUnusedLocals 会拦未用变量）；任务卡片容器 `py-4`→`pb-4`，贴近 tabs。
|
||||
- **设置页 UI 重做**：section+Separator 改为 Card/CardHeader/CardTitle/CardContent 卡片式（max-w-2xl、gap-4、图标+text-base 标题，与 DownloaderModule 设置页一致）；「播放条常驻在所有模块底部」等过时文案改为「标题栏播放控制」。
|
||||
- 全链路审查结论：旧审查的 P0（曲库搜索失效/重启后播放键失效/双音频引擎）均已在现码修复；musicdl 事件幂等、任务持久化签名 watch、歌词二分+邻近缓存等设计良好。
|
||||
- 校验：`vue-tsc --noEmit` 0 错误，`vite build` 通过。
|
||||
|
||||
## 「下载到飞牛」改为同链路落地即传（用户实测 URL 直传失败）
|
||||
|
||||
用户确认：WebDAV 测试连接 OK、下载+自动上传 OK，但发现音乐行的「下载并上传」失败（旧的 URL 拉流直传机制）。按要求改为与「下载完成后自动上传」完全同链路：
|
||||
|
||||
- `downloadToFeiniu`：直接 `store.startDownload([song])`（musicdl 引擎，含引擎侧解析/代理/音质），不再手动 resolve + 拼 headers；记 `tempTaskStarts`（taskId→创建时刻，扫描下界）。
|
||||
- 任务 done → `finishTempUpload`：`uploadRecentToFeiniu(0, { since, deleteLocal: true })` 上传 → `feiniu_delete_local` 删本地音频及同名 lrc/封面 → `store.removeTask` 移除记录。**失败时保留本地文件与任务记录**供排查重试。
|
||||
- `uploadRecentToFeiniu` 扩展 opts `{ since?, deleteLocal? }`；默认行为（自动上传）不变、不删本地。
|
||||
- 后端新增 `feiniu_delete_local`（音频/歌词/封面扩展名白名单 + 拒绝目录）；**删除** `webdav_upload_from_url` 命令与 webdav.rs `upload_from_url`（机制废弃）。
|
||||
- musicdl 引擎守卫保留：Rust 引擎任务在「下载器」模块，无法回传。
|
||||
- 校验：tsc / vite / cargo 全 0。
|
||||
|
||||
## 文件服务 → WebDAV（飞牛传输改版，最终形态）
|
||||
|
||||
fnOS 文件服务（WS + RSA/AES 登录）经三轮协议修复仍无法在用户 NAS 上稳定登录，且会话易失（重启要重登）。用户确认局域网场景改用标准文件协议，整体替换为 **WebDAV**（fnOS 系统设置 → 文件服务 → WebDAV，HTTP 5005/HTTPS 5006，Basic 认证，文件夹需在可见范围+团队文件夹要勾"允许协议挂载"）。
|
||||
|
||||
- **删除**：`fnos.rs`（WS 客户端）、`Feiniu.fnos_sessions`、`feiniu_fnos_*` 与 `feiniu_upload_from_url` 命令、ConnectionsSettings 云朵登录弹窗。
|
||||
- **新增**：`src-tauri/src/music/feiniu/webdav.rs`——无状态：`test`（PROPFIND Depth 0）、`upload_file`（128KB 分块流式 PUT，unfold 转 Stream 免 tokio-util）、`upload_from_url`（GET 拉流→直接 PUT，本地不落地，**不再要求 Content-Length**）、`delete`；上传前逐级 MKCOL；URL 逐段百分号编码；401/403/404/409 可读错误。
|
||||
- **命令**：`webdav_test` / `webdav_upload` / `webdav_upload_from_url` / `webdav_delete`（config 由前端每次传入，serde+specta 结构 `WebDavConfig`）。
|
||||
- **前端**：`feiniuStore.webdav = {url, username, password, dir}` 持久化 `thing.music.feiniu.webdav`（密码明文 localStorage，LAN 工具可接受）；`webdavReady` computed 四项齐备；`patchWebdav` / `testWebdav`；曲库目标目录语义改为 **WebDAV 根下相对路径**。设置页「存储与上传」为配置表单 + 测试按钮 + fnOS 侧设置折叠提示；TrackItem/发现音乐「下载到飞牛」门控全部改 `webdavReady`。
|
||||
- 校验：vue-tsc / vite build / cargo check 全 0。
|
||||
|
||||
## fnOS 登录协议修复（第三轮："fnOS 登录未返回 token"）
|
||||
|
||||
第二轮修复后登录请求**有响应了**（不再超时），但 rid 命中的回包里没有 token。对照 pyfnos 发现关键行为：**登录最终成功包可能不按 reqid 关联**——pyfnos 的 `_is_final_login_success` 是按内容特征（`result=="succ" && token && secret`）识别任意消息，而非按 reqid 匹配。rid 命中的那条很可能只是中间应答，带 token 的包以独立推送到达，被旧 reader 直接丢弃。
|
||||
|
||||
修复（`fnos.rs`）：
|
||||
- 新增 `login_waiter` 通道；reader 对每条消息先做内容识别，命中最终成功包就投递给登录流程，reqid 匹配照旧（并容忍服务端把 reqid 回显成数字，`resp_rid` 辅助函数）。
|
||||
- `login()` 双通道等待：rid 应答里直接有 token → 用之；是中间应答 → 最多再等 8s 登录推送；send_and_wait 超时 → 再宽限 5s 等推送。
|
||||
- 识别两步验证挑战（`isBindTwofaSecret` / `isTwofaEnforced` / `accessToken`），明确报"账号开启了两步验证"而不是干等。
|
||||
- 诊断兜底：若始终等不到 token，报错里带上服务端实际回包的前 300 字符，用户可直接贴回继续定位。
|
||||
- 断开时同时唤醒登录等待者（Null）。
|
||||
|
||||
`cargo check` 通过。协议参考：pyfnos `client.py`（响应扁平结构：`result/token/secret/longToken/reqid` 顶层）。
|
||||
|
||||
## fnOS 登录协议修复（第二轮："fnOS 请求超时(encrypted)"）
|
||||
|
||||
上一轮修完 WS 并发缺陷后，错误变成"请求超时(encrypted)"——说明握手和 `util.crypto.getRSAPub` 都通了，**卡在登录这一条**。根因：**加密登录体里缺字段**。
|
||||
|
||||
已对照两个参考实现逐字核对并修复：
|
||||
- **FNOSP/fnnas-api** `sdk/encryption.py` 的 `login_encrypt()` 示例（原开发注释里引用的就是它）
|
||||
- **Timandes/pyfnos** `fnos/client.py` 的 `_encrypt_login_data()`
|
||||
|
||||
### 正确的加密登录体（必须逐字段对齐）
|
||||
```json
|
||||
{"reqid":"...","user":"...","password":"...","deviceType":"Browser",
|
||||
"deviceName":"...","stay":false,"req":"user.login","si":"..."}
|
||||
```
|
||||
要点：
|
||||
- **`req: "user.login"` 必须在加密体内** —— 服务端靠它路由；缺了就静默不回包（=超时）。
|
||||
- **`reqid` 必须在加密体内**，且与 `pending` 等待者登记的 key 一致；外层 `encrypted` **不带** reqid。
|
||||
- **没有 `did` 字段**（FNOSP 示例没有；pyfnos 有但非必需，为减少变量已去掉）。
|
||||
- `stay: false`。
|
||||
- 加密方式：AES-256-CBC(key=32 字节随机 ASCII 串, iv=16 字节随机) + PKCS7，RSA 只加密那个 32 字符 key（PKCS1v1.5），全部 base64。
|
||||
|
||||
### 顺带核对过、确认我们原本就正确的部分
|
||||
- 签名：`hmac_sha256_b64(sign_key, json) + json`（签名前置）；`sign_key` = 登录响应 `secret` → AES 解密 → base64(明文) → **base64 解码后的字节**。
|
||||
- **不签名白名单**：`encrypted` / `util.getSI` / `util.crypto.getRSAPub`（已按参考实现补上 `UNSIGNED_REQ`）。
|
||||
- 后续请求不携带 token 字段，服务端靠 WS 连接 + 签名识别会话；HTTP 上传走 `Trim-Token` 头。
|
||||
- reqid 格式宽松（各实现 18~28 位不等），我们现有的 `0000000000000000<hex毫秒>` 服务端接受（getRSAPub 已验证）。
|
||||
|
||||
### 其他改动
|
||||
- `request()` 拆成 `send_and_wait(message, rid, label)` + `request()`，登录走前者以便用加密体内的 reqid 关联。
|
||||
- 错误处理补齐 `result=="fail"` 分支并带出 `msg`/`errmsg`（密码错误等现在能看到具体原因）。
|
||||
- 新增**应用层心跳**：fnOS 网关会关闭长时间无消息的连接（参考实现默认 10s 一次 `{"req":"ping"}`）。做成"发请求前按需补发"（>20s 才发），避免常驻任务的生命周期问题——多文件批量上传时 WS 不会被闲置断开。
|
||||
- 报错里的 label 更可读（如 `user.login(encrypted)`）。
|
||||
|
||||
校验：`cargo check` exit 0。**仍未对真实 NAS 验证**，需要用户实测。
|
||||
|
||||
---
|
||||
|
||||
## 修复 fnOS 文件服务登录（"输入密码没反应，很久后报发送请求失败"）
|
||||
|
||||
### 根因（`src-tauri/src/music/feiniu/fnos.rs`）
|
||||
1. **WS 读写共用一个 `tokio::sync::Mutex`，且 reader 在持锁状态下 `await stream.next()`** —— `request()` 要拿同一把锁才能发送。第一次 `request()` 里 `ensure_reader()` 先 spawn 了 reader，reader 抢到锁后就在等一条永远不会发出的消息；发送方要么永久阻塞（超时也覆盖不到锁获取），要么在 reader 已退出后发送才报错 —— 这正是"等很久 → 发送请求失败"的来源。
|
||||
2. **握手没带 `Origin`**。浏览器发起的 WS 必带 `Origin`，Rust 客户端默认不带；fnOS 会据此判断来源，缺了它会"握手成功但立刻被对端关闭"。这是"连上了却什么都没发生"的典型原因。
|
||||
3. **没有回 Pong**。tungstenite 的 Stream/Sink API 不会自动回 Pong，服务端 ping 得不到响应会判定死连接。
|
||||
4. 连接/请求均**没有超时覆盖**（`timeout` 只包了 `rx`，不含锁获取与握手），主机不可达时会干等系统 TCP 重试。
|
||||
|
||||
### 修复
|
||||
- 读写分离：`futures_util::StreamExt::split(ws)` → writer 任务独占写半边（mpsc 队列），reader 独占读半边。发送不再与"等响应"争锁。
|
||||
- 握手请求改为构造 `Request` 并注入 `Origin`（由 ws url 反推 `http://host:port`）与浏览器 UA。
|
||||
- reader 显式处理 `Ping → Pong`，并记录断开原因到 `closed: Arc<Mutex<Option<String>>>`。
|
||||
- `connect_async` 加 12s 超时；`request` 的 15s 超时改为覆盖整个等待，并在入口先检查 `closed`，断开时立刻带原因报错。
|
||||
- 所有报错都带上尝试的 ws 地址或断开原因，例如 `连接 fnOS 文件服务失败：ws://ip:port/websocket?type=main → ...`。
|
||||
- 前端：`ConnectionsSettings` 的 fnOS 弹窗加 `fnosConnecting`（按钮显示"连接中…"）与弹窗内联错误块（错误里含地址/状态码，留在弹窗里可复制），并显示"当前地址"供核对。
|
||||
- `feiniuStore.fnosLogin(connectionId, ...)` 改为显式接收 connectionId 并校验它等于 activeId —— 上传命令按 `settings.feiniu_active_id` 找会话，登录非激活连接会存成永远用不上的会话。
|
||||
|
||||
**注意**：以上都只做了 `cargo check` + 前端构建校验，没有对真实飞牛 NAS 验证过协议细节（`Origin` 校验、`file.checkUpload`/`Trim-Path` 约定可能随 fnOS 版本不同）。如果仍失败，报错文案已包含具体地址与失败阶段。
|
||||
|
||||
---
|
||||
|
||||
## 发现音乐：分组头去白底 + 新增「下载到飞牛」一条龙 + 飞牛上传链路修复
|
||||
|
||||
### 分组头
|
||||
`MusicModule.vue` 里源分组头原来是 `sticky top-0 z-10 bg-background/95 backdrop-blur`，在浅色背景下会形成一条白色横条。已去掉 sticky 与底色，改为普通的 `border-b border-border/60 px-2` 分组标签（px-2 与行对齐）。
|
||||
|
||||
### 新增 Rust 命令 `feiniu_upload_from_url`（下载 + 上传一条龙，本地不留文件）
|
||||
链路：前端 `feiniuStore.uploadUrlToFeiniu()` → `invoke('feiniu_upload_from_url')` → `Feiniu::fnos_upload_from_url()` → `fnos::upload_stream()`。
|
||||
|
||||
- `fnos.rs` 新增泛型 `upload_stream<S, E>()`：`Part::stream_with_length(Body::wrap_stream(stream), size)`，配套 `upload_client(proxy)`（`proxy` 为空则 `no_proxy()`）。
|
||||
- `upload_file()` 重写为**流式**（`stream::unfold` + `tokio::fs::File` 分块 128KB）。原来用 `std::fs::read` 把整个文件读进内存，100MB 无损会直接吃 100MB RAM。用 unfold 是为了不引入 `tokio-util` 依赖。
|
||||
- `FnOsSession::connect` 增加 scheme 校验：`https://` 直接返回可读错误（`ws_url` 只把 `http://` 换成 `ws://`，https 会变成非法 WS scheme 并抛出难懂的 tungstenite 错误）。
|
||||
- `guess_mime(&Path)` 改为 `mime_of(&str)`（现在需要按 NAS 上的文件名推断）。
|
||||
- **依赖音源返回 `Content-Length`**（fnOS `checkUpload` 需要精确 size），缺失时返回可读错误，而不是先把整首缓冲进内存。
|
||||
- 前端 `downloadToFeiniu()`：懒解析歌曲先 `resolveSong(source, index, quality)` 拿真实链接（quality 取默认下载音质），合并 `defaultDownloadHeaders` + `defaultDownloadCookies` 为 Cookie 头，并**过滤非 ASCII 头**（reqwest 遇到非法头值会 panic，不能把外部数据直接塞进去）。
|
||||
|
||||
### 飞牛上传链路审查结论（重要）
|
||||
1. **fnOS 会话只存在内存里**（`Feiniu.fnos_sessions`），应用重启即失效 → 设置页显示的「未连接」是准确的，需要重新点云朵图标登录。已在设置页与登录弹窗里明确写出"仅本次运行有效"。
|
||||
2. **仅支持 `http://` 局域网直连**，https/frp 无法上传（协议限制），已给出明确报错。
|
||||
3. `feiniu_scan_local` 扫描 `savedir` + `feiniu_local_dirs`，因此下载到本地目录的文件能被"上传最近下载"找到；但该功能是**按 mtime 10 分钟窗口**筛选，与具体下载任务无关联——这是它不可靠的根因（这就是为什么要新增 URL 直传）。
|
||||
4. `feiniu_fnos_upload` 用 `settings.feiniu_active_id` 找连接，`fnos_login` 用传入的 connection_id；只要激活连接一致就没问题。
|
||||
|
||||
### 校验（本机 bash 不可用，PowerShell + 绝对路径）
|
||||
- `cargo check`（`src-tauri`，`%USERPROFILE%\.cargo\bin\cargo.exe`）→ exit 0，仅 3 个既有 warning
|
||||
- `vue-tsc --noEmit` → exit 0；`vite build` → exit 0
|
||||
|
||||
---
|
||||
|
||||
## 曲库左栏：去掉灰底容器、数量列对齐、行高统一
|
||||
|
||||
用户反馈截图问题（灰底 + 文字竖向不齐）后的修正，`MyMusicLibrary.vue`：
|
||||
- **去掉 `bg-muted` 容器**：来源项不再包在灰色圆角块里。选中态保留 `bg-background font-medium shadow-sm`，并**补 `ring-1 ring-border`**——否则白底上的白色胶囊只有 5% 透明度的阴影，几乎看不见（顶部 Tabs 那个"可见边框"其实是 `:focus-visible` 的 ring，不是常态样式，不能照抄）。
|
||||
- **数量列始终渲染**：原来 `v-if="nav.count"` 会在 0 时隐藏整列，造成右侧数字列参差。改为无歌曲时显示 `0`，并加 `min-w-[3ch] text-right tabular-nums` 让个位数/三位数右边缘对齐。
|
||||
- **行高统一为固定值**：来源项 `h-8`、歌单子项 `h-7`，配合 `items-center`，不再依赖 `py-1.5` + 行高推算，彻底消除逐行细微的垂直错位。
|
||||
- 未选中项 hover 从 `hover:bg-accent/50` 统一为 `hover:bg-accent/60`（无容器后需要更明显的悬停反馈）。
|
||||
- 歌单子项的选中态也同步改成同一套胶囊样式，保持层级内一致。
|
||||
|
||||
---
|
||||
|
||||
## 曲库左栏收窄 + 选中态对齐顶部 Tabs + 切换动画
|
||||
|
||||
`MyMusicLibrary.vue`：
|
||||
- 左栏宽度 `w-[210px]` → `w-[168px]`（"飞牛曲库 → 数量"之间的大段空白因此明显收窄）。内边距 `p-2.5` → `p-2`，字号 13px → 保留。
|
||||
- 三个来源（飞牛曲库/本地曲库/我的歌单）从裸列表改为 **`rounded-lg bg-muted p-1` 容器 + 选中项 `bg-background font-medium shadow-sm rounded-md`**，与顶部 `TabsList`/`TabsTrigger` 的默认选中态一致。
|
||||
- 歌单子树加 `border-l` 缩进表示层级；展开/收起加了 `pl-list` Transition（opacity + translateY(-6px)，0.18s）。
|
||||
- **标签截断修复**：`<span class="truncate">` 在 flex 行里不会真正截断（flex item 默认 `min-width:auto`）。改成 `min-w-0 flex-1 truncate` + 右侧计数 `shrink-0`，并去掉 `ml-auto`。以后左栏加条目记得照这个写。
|
||||
- 右栏内容切换动画：给 `<section>` 加 `:key="view"` + 全局 `tab-animate`，靠重挂载触发动画（与模块级 TabsContent 的做法一致，无需自造 Transition）。
|
||||
|
||||
---
|
||||
|
||||
## 歌单新增「编辑音乐」编辑器
|
||||
|
||||
- 新组件 `src/modules/music/components/PlaylistEditorDialog.vue`（props `open` / `playlistId`，emit `update:open`）。
|
||||
- 双 Tab：**全部音乐**（来源筛选 全部/飞牛/本地 → 勾选加入；已在歌单的项置灰并标「已加入」，不可重复勾选）、**已在歌单**（勾选批量移出，勾选框用 destructive 色）。
|
||||
- 含搜索（歌名/歌手/专辑）、全选当前列表、增量渲染每批 120 + 「显示更多」、飞牛曲库「继续加载」、本地曲库未扫描时的内联「扫描本地」按钮。
|
||||
- 勾选框**不用** `Checkbox` 组件：整行是 `<button>`，视觉勾选框是纯 span（避免 label/按钮与 Checkbox 双重触发导致 net-zero toggle）。若以后要加交互型复选框，注意这个坑。
|
||||
- 关闭/打开时 `resetState()`，切 Tab 与切来源时清空选择（避免"看不见的项仍被选中"导致数量对不上）。
|
||||
- 入口：`MyMusicLibrary.vue` 歌单详情工具栏的「编辑音乐」按钮，以及歌单为空时 `Empty` 里的按钮。
|
||||
- 依赖 store 既有 API：`addToPlaylist`（内部已按 `guid+source` 去重）、`removeItemsFromPlaylist(id, keys)`（key 形如 `${source}:${guid}`）。
|
||||
|
||||
---
|
||||
|
||||
## 音乐模块播放器入口改版 + tabs 统一（在同日重构之后）
|
||||
|
||||
> 本节修订上面「结构变更」里的播放器结论，以本节为准。
|
||||
|
||||
- **删除底部播放条**：`GlobalPlayerBar.vue` 已删除，`App.vue` 不再渲染播放条。不要再新增底部坞站播放条。
|
||||
- **新增标题栏音乐栏** `src/components/layout/TitleBarMusic.vue`，插在 `TitleBar.vue` 里**搜索输入框的左侧**（在保存设置按钮与搜索框之间），外层包 `pointer-events-auto`，触发按钮带 `@mousedown.stop`（标题栏是 Tauri 拖拽区，不加会导致点击被拖拽吞掉）。
|
||||
- 未播放过（`store.nowPlaying` 为空）→ 只显示唱片图标，隐藏歌名。
|
||||
- 有曲目 → 图标替换为封面（`rounded-full` + `overflow-hidden`），`store.playing` 为真时用 CSS `animation-play-state` 旋转（8s/圈，暂停保留角度）。
|
||||
- 点击弹出方形控制窗（`Popover`，`w-[300px]`，约 300×340）：封面（点击进大屏）、曲目信息、`ScrubBar` 进度、循环/上下首/播放/队列、音量 `ScrubBar`、歌词/队列入口。
|
||||
- `feiniu.playError` 的 toast 消费点从 GlobalPlayerBar 移到了这里——**删播放条时容易漏掉这个 watcher**，导致播放失败静默。
|
||||
- **音乐模块 tabs 回归统一写法**：改回 `<Tabs><div ref="tabsListRef" class="shrink-0"><TabsList class="grid w-full max-w-md grid-cols-4 !bg-transparent !p-0 !shadow-none">…<TabsTrigger class="gap-1.5"><Icon class="size-3.5"/>标签</TabsTrigger>` + `<TabsContent class="mt-4 min-h-0 flex-1 tab-animate">`；模块根节点恢复 `h-full p-6 overflow-hidden flex flex-col`。`SegmentedNav` 不再被 MusicModule 使用，仅 `NowPlayingDialog` 的歌词/队列切换仍在用。
|
||||
- 发现音乐 / 任务 / 设置三块内部的横向内边距改为 `0`（由模块根 `p-6` 统一提供，避免左右不对称）。
|
||||
|
||||
---
|
||||
|
||||
## 音乐模块重构（审查之后落地实施）
|
||||
|
||||
### 结构变更（重要，改这块前先读）
|
||||
- ~~**播放器已提升到全局层**：`GlobalPlayerBar.vue` + `NowPlayingDialog.vue`~~ → 已被上一节取代；`NowPlayingDialog.vue`（大屏，含歌词/队列）保留，由标题栏方形控制窗打开。
|
||||
- **新增通用组件**：`src/components/common/ScrubBar.vue`（提交式 seek 进度条，含缓冲层/时间气泡/键盘支持）、`SegmentedNav.vue`（分段导航，现由 NowPlayingDialog 使用）。
|
||||
- **音乐模块导航**：模块级 `Tabs`（曲库/发现音乐/下载任务/设置）；「曲库」内部是 `MyMusicLibrary` 的「左侧来源树 + 右侧列表」两栏，来源树含飞牛曲库/本地曲库/我的歌单（歌单列表在树内展开）。
|
||||
- `TrackItem.vue` 重写为 44px 紧凑行（网格列 `28px 36px 1fr 74px 28px`，有专辑时多一列）；序号列悬停原位切换播放按钮，播放中显示 `.music-eq` 跳动均衡器（该 CSS 已加到 `style.css` 全局，NowPlayingDialog 复用）。
|
||||
- 所有列表表头/行网格用**字面量** Tailwind 类或内联 `gridTemplateColumns`（Tailwind v4 不识别运行时拼接的类名）。
|
||||
|
||||
### feiniuStore 关键 API 变化
|
||||
- `PlayableItem.source` 增加 `'preview'`，另加 `coverUrl` / `url` / `ext` 字段。
|
||||
- 新增 `nowPlaying`（试听优先于队列当前项）、`playPreview` / `stopPreview`、`playNext` / `addToQueue` / `removeFromQueue` / `clearQueue`、`loadMoreTracks`（分页 200/页）、`searchKeyword`（曲库搜索，之前是孤立局部变量导致搜索无效）、`playError` / `clearPlayError`、`muted` / `toggleMute`、`setPlayMode`、`bufferedPercent`、`nowPlayingTab`。
|
||||
- `playItem(item, context?)` 第二参数是播放上下文；不传则退化为单曲播放。
|
||||
- `init()` 幂等；`setCacheMode`/`clearCache` 不再中断播放；shuffle 用「待播池 + 历史栈」，自动切歌也随机；`currentLine()` 改为缓存索引 + 二分。
|
||||
- 已移除 `queueVisible` / `lyricVisible`（改用 `nowPlayingOpen` + `nowPlayingTab`）。
|
||||
- `musicStore.startDownload` 返回值改为 `{ engine, skipped, taskId? }`。
|
||||
|
||||
### 校验方式（本机 bash 工具不可用，用 PowerShell + node 直接跑）
|
||||
```
|
||||
node node_modules/vue-tsc/bin/vue-tsc.js --noEmit -p tsconfig.json
|
||||
node node_modules/vite/bin/vite.js build
|
||||
```
|
||||
两者在本次重构后均为 exit 0。注意：PowerShell 工具不返回 stdout，需 `| Out-File` 后再 Read；`Remove-Item` 被沙箱拦截（静默失败），删文件要用 `node -e "fs.unlinkSync(...)"`。
|
||||
|
||||
排障经验：`feiniuStore` 任何「返回对象里引用了不存在的变量」（如漏掉 `clearQueue` 函数体）都会让 TS 对整个 store 的类型推断失败，进而让所有 `store.xxx` 变成 `any`，报出一堆看似无关的 `TS7006 implicitly has an 'any' type`。遇到成片 implicit any，先检查 store 自身的错误。
|
||||
|
||||
### 报告
|
||||
`MUSIC_MODULE_REVIEW.md` 已追加「§9 重构落地记录」，逐条对应 30 项改动与「仍未做」清单。
|
||||
|
||||
---
|
||||
|
||||
## 音乐模块全链路审查（数据请求 / 播放控制 / 状态管理 / UI）
|
||||
|
||||
产出：
|
||||
- `MUSIC_MODULE_REVIEW.md` —— 完整审查报告（P0/P1 bug + 性能瓶颈 + 25 条界面缺陷 + 重设计方案 + 分阶段落地路径）
|
||||
- `music-redesign-mockup.html` —— 「当前实现 / 建议方案」可切换的界面改版对照稿（浅色主题）
|
||||
|
||||
### 关键结论（后续如要动这块，先看这些）
|
||||
|
||||
**架构共识（不要改错方向）**
|
||||
- 搜索/解析/下载 → Python 桥接 musicdl；播放 → Rust 本地流代理 `127.0.0.1:<port>/feiniu/stream`（`src-tauri/src/music/feiniu/proxy.rs`），**真流式透传 Range，seek 依赖它，别改成前端直连 NAS**。
|
||||
- 播放内核在 `src/stores/feiniuStore.ts`（不是 musicStore）；`musicStore` 只管搜索/下载任务。
|
||||
- `PlayerBar.vue` / `PlayerFull.vue` 用的是 `useFeiniuStore`，不是 musicStore。
|
||||
|
||||
**P0（确认可复现）**
|
||||
1. 飞牛曲库搜索框完全无效：`MyMusicLibrary.vue:21` 的 `keywordInput` 从未写入 `feiniuStore.keyword`，而 `loadTracks` 读的是 store 的 `keyword`（全仓无赋值点）。
|
||||
2. 重启后点播放键无反应：`restoreQueue()` 只恢复队列不设 `audio.src`，`toggle()` 里 `play()` 被空 catch 吞掉。
|
||||
3. 双音频引擎可同时发声：`MusicModule.vue:1413` 的试听 `<audio>` 与 `feiniuStore` 的 `new Audio()` 互不感知。
|
||||
|
||||
**最值得优先做的一件事**
|
||||
把 `PlayerBar` + `PlayerFull` 从 `MusicModule.vue` 提升到 `App.vue` 全局层。原因：`App.vue` 的模块容器是 `:key="activeModule"` 重挂载，切到其他模块时播放条整体卸载，但音频继续播 → 用户失去所有控制入口。
|
||||
|
||||
**其它已确认的坑**
|
||||
- shuffle 模式下自动切歌是顺序的（`next(manual)` 的随机分支带 `manual` 条件）。
|
||||
- `setCacheMode('stream')` / `clearCache()` 都会 `clearPlayback()`，改设置即中断播放。
|
||||
- `CacheSettings.vue` 的 `cacheEnabled` 开关从不回填 store 的 `cacheMode`，状态不同步；`cacheMax` 是死代码（后端字段是 `feiniu_cache_max_gb`）。
|
||||
- `feiniuStore.init()` 被 `MyMusicLibrary`/`CacheSettings` 重复调用，内含 `restoreQueue()` 会覆盖内存队列，应加幂等标志。
|
||||
- `musicStore` 任务持久化把每首歌的 `rawSearch` 一起写 localStorage，大歌单会爆 5MB 配额且静默失败。
|
||||
- `playItem` 未命中队列时替换整个队列（单曲播放语义），歌单里的 TrackItem 还没有双击且播放键会被 disabled → 正在播的歌无法暂停。
|
||||
- rust 下载引擎下 `doDownload` 仍跳「下载任务」tab，但该 tab 是空的（任务在下载器模块）。
|
||||
- 拖动进度条即写 `currentTime` → 流式下反复中断 Range 请求，应改「拖动预览 + 松手提交」。
|
||||
|
||||
**界面主线（详见报告 §5）**
|
||||
播放条未贴底且离开模块即消失；模块左右内边距不对称（左 28 / 右 40 含滚动条）；三套切换控件（模块 Tabs / 自绘 segmented / 裸文字）；音质徽标 5 色抢戏；列表是「卡片堆」而非紧凑行；`Empty` 组件被裸 children 误用（gap-6 + md:p-12 + border-dashed 无 border）。改版方向：左侧来源树 + 紧凑表格列表 + 全宽坞站播放条 + 可折叠「正在播放」右栏。
|
||||
@@ -0,0 +1,31 @@
|
||||
# 项目长期记忆（Thing / F:\AtieProject\Thing）
|
||||
|
||||
Tauri + Vue 3 + Pinia + Tailwind v4 + reka-ui(shadcn-vue) 的桌面工具箱，按模块组织（`src/modules/<id>/`）。
|
||||
|
||||
## 架构约定
|
||||
|
||||
- **模块挂载**：`App.vue` 的 `ModuleContainer` 用 `:key="activeModule"` 重挂载，**模块不 keep-alive**。因此任何「需要跨模块常驻」的 UI 都必须挂在 `App.vue` 层，不能放在模块内部。
|
||||
- **音乐播放器**：内核在 `src/stores/feiniuStore.ts`（不是 musicStore）；UI 入口在**标题栏** `src/components/layout/TitleBarMusic.vue`（搜索框左侧：唱片图标 + 歌名，点击弹出方形控制窗，播放中图标换封面并旋转），大屏 `src/components/layout/NowPlayingDialog.vue`（歌词/队列）由控制窗的入口打开，由 `App.vue` 渲染。`musicStore` 只负责搜索/歌单解析/下载任务。
|
||||
- 历史沿革：`PlayerBar/PlayerFull`（模块内）→ `GlobalPlayerBar`（App 全局坞站）→ 现为 `TitleBarMusic`（标题栏）。前者们均已删除，不要再新增底部播放条。
|
||||
- **模块顶部 tabs 统一写法**：`<Tabs v-model>` → `<div ref="tabsListRef" class="shrink-0">` → `<TabsList class="grid w-full max-w-md grid-cols-N !bg-transparent !p-0 !shadow-none">` → `TabsTrigger`(带 `class="gap-1.5"` + 图标) → `TabsContent class="mt-4 min-h-0 flex-1 ... tab-animate"`；模块根节点统一 `h-full p-6 overflow-hidden flex flex-col`。
|
||||
- 注意：顶部 Tabs 上那个"可见边框"是 `:focus-visible` 的 ring，并非常态样式。别处若要复刻选中态且背景也是白色，需要自己补 `ring-1 ring-border`，否则白色胶囊只靠 `shadow-sm`（5% 透明度）在白底上几乎不可见。
|
||||
- **列表/导航行的对齐**：行高用固定值（`h-8` / `h-7`）+ `items-center`，不要靠 `py-x` 推算；右侧数字列始终渲染（空时显示 `0`）并加 `min-w-[3ch] text-right tabular-nums`，否则数字列会参差。
|
||||
- 音乐播放走 Rust 本地流代理 `127.0.0.1:<port>/feiniu/stream`，**真流式透传 Range**（`src-tauri/src/music/feiniu/proxy.rs`），seek 依赖它，不要改成前端直连 NAS。
|
||||
- 模块生命周期钩子：`src/modules/<id>/index.ts` 的 `lifecycle.onActivate/onDeactivate/onEnable/onDisable`。
|
||||
- 模块内分段导航统一用 `src/components/common/SegmentedNav.vue`；进度/音量统一用 `src/components/common/ScrubBar.vue`（拖动只预览、松手才提交 seek）。
|
||||
|
||||
## 工程约定
|
||||
|
||||
- **Tailwind v4**：不识别运行时拼接的类名。动态网格用内联 `gridTemplateColumns`，或把完整字面量类名写在模板里。
|
||||
- **tsconfig 开启 `noUnusedLocals` / `noUnusedParameters`**，未使用的 import 会导致构建失败。
|
||||
- 主题 token 在 `src/style.css`（`--primary` / `--muted` / `--background` 等）。**禁止硬编码** `bg-white` / `border-white/10`，否则暗色主题会失效。
|
||||
- 全局可复用动画类写在 `src/style.css`（如 `.music-eq`、`.tab-animate`）。
|
||||
- 构建校验：`npm run build`（= `vue-tsc --noEmit && vite build`）。
|
||||
|
||||
## 本机环境注意事项
|
||||
|
||||
- Bash 工具在本机不可用（PATH 未初始化，`ls`/`find` 等均 not found）。用 PowerShell + 显式绝对路径的 node 执行命令。
|
||||
- PowerShell 工具**不返回 stdout**：需 `| Out-File` 写文件后再用 Read 读取。
|
||||
- `Remove-Item` 被沙箱静默拦截；删除文件用 `node -e "require('fs').unlinkSync('绝对路径')"`。
|
||||
- 受管 node：`C:\Users\Administrator\.workbuddy\binaries\node\versions\22.22.2-3\node.exe`。
|
||||
- 排障经验：Pinia setup store 里若返回对象引用了未定义变量，TS 会让整个 store 退化成 `any`，进而报出成片无关的 `TS7006 implicitly has an 'any' type`。先查 store 自身的错误。
|
||||
@@ -0,0 +1,465 @@
|
||||
# 音乐模块全链路审查报告
|
||||
|
||||
> 审查范围：数据请求（搜索/歌单解析/下载/解析真实链接）、播放控制（试听、播放器内核、队列、歌词、缓存）、状态管理（musicStore / feiniuStore）、UI 交互与视觉。
|
||||
> 覆盖文件（前端 11 个 + Rust 4 个）：
|
||||
> `src/stores/musicStore.ts`、`src/stores/feiniuStore.ts`、`src/modules/music/MusicModule.vue`、`components/PlayerBar.vue`、`components/PlayerFull.vue`、`components/MyMusicLibrary.vue`、`components/TrackItem.vue`、`components/settings/ConnectionsSettings.vue`、`components/settings/CacheSettings.vue`、`SourcePicker.vue`、`sources.ts`、`index.ts`、`src/App.vue`、`src/components/layout/ModuleContainer.vue`、`src-tauri/src/music/{mod,commands}.rs`、`src-tauri/src/music/feiniu/{mod,proxy}.rs`
|
||||
|
||||
---
|
||||
|
||||
## 0. 结论摘要
|
||||
|
||||
整体架构是清晰的：**搜索/下载走 Python 桥接（musicdl）**，**播放走飞牛 NAS 本地流代理（Rust axum，支持 Range 透传）**，两个 store 职责分离，流代理与缓存设计是对的。问题集中在三类：
|
||||
|
||||
| 类别 | 数量 | 代表问题 |
|
||||
|---|---|---|
|
||||
| P0 功能性失效 | 3 | 飞牛曲库搜索框完全无效；重启后播放键无响应；两个音频引擎可同时发声 |
|
||||
| P1 逻辑/状态缺陷 | 12 | shuffle 自动切歌不随机；缓存开关状态不同步；队列被单曲播放重置；任务持久化写入 `rawSearch` 撑爆 localStorage |
|
||||
| P2 性能瓶颈 | 9 | 拖动进度条即发 Range 请求；歌词/队列无虚拟滚动；全屏模糊背景；每行 2 个 Tooltip |
|
||||
| P3 界面与交互缺陷 | 25 | 播放条未贴底且离开模块即消失；左右内边距不对称；三套切换控件；徽标 5 色抢戏；列表变卡片堆 |
|
||||
|
||||
**最需要优先决策的一件事**：把 `PlayerBar` / `PlayerFull` 从 `MusicModule.vue` 提升到 `App.vue` 全局层。当前它们挂载在音乐模块内部，而模块容器是 `:key="activeModule"` 重挂载（`App.vue:36-41`）——**切到任何其他模块，播放条和"正在播放"大屏整体卸载，但音频仍在后台播放，用户完全失去控制入口**。这是当前体验上最严重的问题。
|
||||
|
||||
---
|
||||
|
||||
## 1. P0 功能性失效（必须修）
|
||||
|
||||
### 1.1 飞牛曲库搜索框完全无效
|
||||
**现象**：输入关键词、回车，曲库列表纹丝不动。
|
||||
|
||||
**根因**：`MyMusicLibrary.vue:21` 定义了本地 `keywordInput`，`onSearchInput`（:24-29）只做了防抖后调用 `store.loadTracks(1)`，而 `loadTracks` 读的是 **store 里的 `keyword`**（`feiniuStore.ts:381`）。检查全仓：`store.keyword` **从未被任何 UI 赋值**。
|
||||
|
||||
```ts
|
||||
// feiniuStore.ts:375-382
|
||||
const data = await invoke('feiniu_list_tracks', {
|
||||
page: p, size: 50,
|
||||
keyword: keyword.value.trim() || null // ← keyword 永远是 ''
|
||||
})
|
||||
```
|
||||
|
||||
**修复**：把输入直接接到 store 字段，去掉中间层。
|
||||
|
||||
```vue
|
||||
<!-- MyMusicLibrary.vue -->
|
||||
<Input v-model="store.keyword" placeholder="搜索飞牛曲库（歌名 / 歌手）"
|
||||
@input="onSearchInput" @keydown.enter="onSearchInput" />
|
||||
```
|
||||
```ts
|
||||
// onSearchInput 里补一句：清空关键词时立即回全量
|
||||
function onSearchInput() {
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => store.loadTracks(1).catch(e => toast.error(String(e))), 400)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 1.2 应用重启后，播放键点了没反应
|
||||
**现象**：重启应用，底部播放条显示着上次的歌，点播放键没任何反应，也没有提示。
|
||||
|
||||
**根因**：`restoreQueue()`（`feiniuStore.ts:644-655`）只恢复了 `queue` / `queueIndex`，**没有给 audio 设置 `src`**。此时点击播放走 `toggle()`（:564-568）：
|
||||
|
||||
```ts
|
||||
function toggle() {
|
||||
const a = ensureAudio()
|
||||
if (a.paused) a.play().catch(() => {}) // ← 无 src，play() 直接 reject，被静默吞掉
|
||||
else a.pause()
|
||||
}
|
||||
```
|
||||
|
||||
`ensureAudio()` 新建的 `Audio()` 没有 `src`，`play()` 抛 `NotSupportedError`，被空 catch 吞掉。点「上一首/下一首」反而能用（走 `playCurrent()` 会设 src），所以表现为"只有播放键坏了"。
|
||||
|
||||
**修复**：`toggle()` 检测无 src 时先走一次 `playCurrent()`；同时给失败加可见提示。
|
||||
|
||||
```ts
|
||||
function toggle() {
|
||||
const a = ensureAudio()
|
||||
if (!a.src) { // 恢复队列后首次播放
|
||||
if (current.value) playCurrent()
|
||||
return
|
||||
}
|
||||
if (a.paused) a.play().catch(err => { playing.value = false; logger.error(`播放失败: ${err}`) })
|
||||
else a.pause()
|
||||
}
|
||||
```
|
||||
另外建议 `startPlayback` 的 catch 里落一条 `toast.error('播放失败：' + err.message)`，当前 `:558-561` 是先 catch 再静默，用户拿不到任何信息。
|
||||
|
||||
---
|
||||
|
||||
### 1.3 两个独立音频引擎，可同时发声
|
||||
**现象**：在「发现音乐」点某首歌试听，再回到播放器播另一首 → 两首歌同时响；或者试听中点播放器播放，两路声音叠加。
|
||||
|
||||
**根因**：存在两个互不知晓的 `<audio>`：
|
||||
- `MusicModule.vue:1413` —— 试听用的模板 `<audio ref="audioEl">`（`togglePlay` :372-406 驱动）
|
||||
- `feiniuStore.ts:109-126` —— 播放器内核 `new Audio()`
|
||||
|
||||
二者没有互斥，`playingKey` 与 `store.playing` 彼此独立。附带问题：试听音频在**切换 tab / 卸载模块时不会停止**（模板 audio 被移除，引用置空，媒体仍可能继续播到自然结束）。
|
||||
|
||||
**修复（推荐）**：废弃模块内试听 audio，试听直接走同一内核——`playQueue([{...}], 0)`，source 用 `'preview'`，播完即止。若短期不想动内核，至少在 `togglePlay` 之前 `feiniu.clearPlayback()`，并在 `onBeforeUnmount` 里 `audioEl.value?.pause()`。
|
||||
|
||||
---
|
||||
|
||||
## 2. P1 逻辑与状态缺陷
|
||||
|
||||
| # | 问题 | 位置 | 说明与改法 |
|
||||
|---|---|---|---|
|
||||
| 2.1 | **shuffle 自动切歌不随机** | `feiniuStore.ts:570-586` | `next(manual)` 的随机分支带 `manual` 条件，`onEnded → next(false)` 在 shuffle 下走的是顺序 `++`。用户开了随机，一首播完却是下一首。改：把随机逻辑与 `manual` 解耦，`shuffle` 时无论手动/自动都随机（并记录已播集合避免短期重复）。 |
|
||||
| 2.2 | **prev 在 shuffle 下也是顺序** | `feiniuStore.ts:598-607` | 同上；随机模式应回退到历史栈。 |
|
||||
| 2.3 | **切缓存模式/清缓存会中断播放** | `feiniuStore.ts:266-280` | `setCacheMode('stream')` 和 `clearCache()` 都调 `clearPlayback()`；而 `CacheSettings.setEnabled(false)` 又会触发 `setCacheMode('stream')`。改设置就把歌停了，属于误伤。应只在必要（如清掉正在播的那首缓存）时停止，或改为"下一首生效"。 |
|
||||
| 2.4 | **缓存开关与真实模式不同步** | `CacheSettings.vue:13-23,32-35` | `cacheEnabled` 初始恒为 `false`，`onMounted` 只读了 `cacheMode` 没回填开关；若历史已是 cache 模式，打开设置页看到的是"关"，但实际在缓存。另外 `cacheMax = ref(5)` 是死代码（从未使用，后端对应字段是 `feiniu_cache_max_gb`），`cacheStatus` 在 onMounted 也没刷新。 |
|
||||
| 2.5 | **单曲播放会重置整个队列** | `feiniuStore.ts:500-511` | `playItem` 未命中队列时 `queue.value = [{...item}]`——用户从 2000 首的曲库点播放，队列被替换成 1 首，播完就停。播放器语义应是"以所在列表为上下文播放"。改：`playItem(item, contextList?)`，命中则跳转，未命中则以 `contextList` 建队列。 |
|
||||
| 2.6 | **歌单内的曲目无法暂停 / 无法整单播放** | `MyMusicLibrary.vue:228-233` | 歌单里的 `TrackItem` 既没有 `@dblclick`，播放按钮又被 `TrackItem.vue:71` 的 `:disabled="store.playing && store.current?.guid === item.guid"` 禁用——正在播这首时按钮变灰，**没有任何方式暂停**。且点击播放会走 2.5 的"单曲替换队列"。 |
|
||||
| 2.7 | **`init()` 被重复调用，会覆盖内存中的队列** | `feiniuStore.ts:129-157` | `MyMusicLibrary.onMounted`（:64-69）与 `CacheSettings.onMounted`（:16-20）都调 `store.init()`；`init` 内含 `restoreQueue()`，会在用户切到设置页时用 localStorage 的旧值覆盖当前队列/索引。应加 `inited` 标志位做幂等，或把 `restoreQueue` 只放在应用启动路径。 |
|
||||
| 2.8 | **任务持久化把 `rawSearch` 一起写进 localStorage** | `musicStore.ts:79-93,228-234,439` | `songsData: songs` 保留了每首歌的 `rawSearch`（上游 API 原始响应）。一个 500 首歌单任务 → 序列化后极易超过 5MB 配额，`persistTasks` 的 catch 会静默失败，历史记录随机丢失。改：持久化前剥离 `rawSearch` / `defaultDownloadHeaders`，只留重下所需字段。 |
|
||||
| 2.9 | **`pendingUploadOnDone` 泄漏，造成误上传** | `MusicModule.vue:60,74-82,483-500` | 该标志在下发下载请求时置 `true`，只有"检测到有任务 done"才清 `false`。若下载报错/被取消、或用户在选择音质弹窗点了取消，标志会残留，之后**任意一个无关任务完成**都会触发一次上传。`autoUpload` 打开时则是每个任务完成都重复全量上传一次。建议改为按 `taskId` 记录"待上传任务集合"，完成时精确消费。 |
|
||||
| 2.10 | **Rust 引擎下载后跳到空的任务页** | `MusicModule.vue:460` | `doDownload` 无条件 `activeTab.value = 'tasks'`，但 `downloadEngine === 'rust'` 时任务被交给「下载器」模块（`musicStore.ts:391-430` 不创建本模块任务），本模块任务列表是空的，用户看到"暂无下载任务"。且此时 `downloadTarget === 'feiniu'` 的自动上传链路也永远不会触发。应在 rust 引擎下改为提示"已交给下载器模块"并跳转到对应模块。 |
|
||||
| 2.11 | **`duration` 未知时拖动进度条无效** | `feiniuStore.ts:609-613`（配合 `PlayerBar.vue:18-20`） | `onProgress` 用 `store.duration` 换算秒数；若流没有返回 `Content-Length`，`loadedmetadata` 后 `duration` 为 `NaN`，`a.currentTime = NaN` 被忽略，进度条要么不动要么跳回 0。应在 `seek` 内做 `if (!isFinite(a.duration) || a.duration <= 0) return` 并给出"当前音频不支持跳转"的提示。 |
|
||||
| 2.12 | **`nowPlayingOpen` 状态跨模块残留** | `feiniuStore.ts:105` + `PlayerFull.vue:43` | 大屏开着时切走模块，Dialog 随模块卸载消失，但 `nowPlayingOpen` 仍是 `true`；回到音乐模块会突兀地自动弹出。建议改为由组件本地 `ref` 承载，或在 `onMounted` 时重置。 |
|
||||
|
||||
其它可在后续清理的小项：`doneCount` 在重复 `done` 事件下会虚增（`musicStore.ts:320`）；`redownloadTask` 用的是**当前默认音质**而非原任务音质（`musicStore.ts:523`）；音质弹窗取消后 `selectedKeys` 已被清空（`MusicModule.vue:505-509`）；`installRuntime` 的进度监听清理逻辑正确，但 `installError` 与最后一条进度事件之间缺少"失败即清进度"的处理（注释已提到，代码未做）。
|
||||
|
||||
---
|
||||
|
||||
## 3. 性能瓶颈与优化点
|
||||
|
||||
### 3.1 拖动进度条 = 连续发起 Range 请求（最该改的一项）
|
||||
`PlayerBar.vue:104-110` / `PlayerFull.vue:75-80` 把 Slider 的 `update:model-value` 直接接到 `store.seek()`，而 `seek` 立刻写 `a.currentTime`。飞牛流代理是**真流式透传 Range**（`proxy.rs:131-133`），所以拖动一次会触发几十次"中断旧请求 → 发新 Range 请求"：
|
||||
|
||||
- 占用带宽、NAS 侧反复建连
|
||||
- 拖动过程中出现爆音/卡顿
|
||||
- 拖到底后又从新位置重新缓冲
|
||||
|
||||
**推荐**：拖动期间只更新本地"预览位置"，`pointerup` / `change` 时提交 `seek`。
|
||||
|
||||
```ts
|
||||
// 父组件维护 dragging + previewValue
|
||||
const dragging = ref(false)
|
||||
const preview = ref(0)
|
||||
function onProgressInput(v?: number[]) { dragging.value = true; preview.value = v?.[0] ?? 0 }
|
||||
function onProgressCommit(v?: number[]) {
|
||||
dragging.value = false
|
||||
store.seek(((v?.[0] ?? 0) / 100) * store.duration)
|
||||
}
|
||||
```
|
||||
```vue
|
||||
<Slider :model-value="[dragging ? preview : store.progress]" @update:model-value="onProgressInput" @value-commit="onProgressCommit" />
|
||||
```
|
||||
另外 `:step="0.5"`（200 档）对 4 分钟歌 ≈ 1.2s 粒度尚可，但对播客/长音频（1 小时以上）单档 ≈ 18s，建议改为按 `duration` 动态计算 step（如 `100 / duration`）。
|
||||
|
||||
### 3.2 进度时间轴以 4Hz 驱动整棵组件树
|
||||
`timeupdate` 约每 250ms 一次写 `position.value`，凡是读它的组件都会重渲染。当前影响面：
|
||||
- `PlayerBar` + `PlayerFull` **同时挂载**（大屏打开时）→ 双份重渲染
|
||||
- `PlayerFull` 的 `currentLine()`（`feiniuStore.ts:710-717`）是**线性扫描**，每次重算 O(歌词行数)。改：缓存上次命中的索引，只在 `position > 下一行时间` 时 `idx++`（歌词已排序，单调推进），或二分查找。
|
||||
- `PlayerFull.vue:33-39` 的 `watchEffect` 每次行切换都 `querySelectorAll('[data-line]')` 全量查询后再 `scrollIntoView({behavior:'smooth'})`。改：用 `ref` 数组或在 v-for 里收集 DOM，仅对目标行滚动；并给滚动加 `prefers-reduced-motion` 降级。
|
||||
|
||||
```ts
|
||||
let lastLineIdx = -1
|
||||
function currentLine(): number {
|
||||
const lines = lyricLines.value
|
||||
if (lastLineIdx >= 0 && lastLineIdx < lines.length
|
||||
&& (lastLineIdx + 1 >= lines.length || position.value < lines[lastLineIdx + 1].t)) {
|
||||
while (lastLineIdx > 0 && position.value < lines[lastLineIdx].t) lastLineIdx--
|
||||
while (lastLineIdx + 1 < lines.length && lines[lastLineIdx + 1].t <= position.value) lastLineIdx++
|
||||
return lastLineIdx
|
||||
}
|
||||
lastLineIdx = -1
|
||||
for (let k = 0; k < lines.length; k++) if (lines[k].t <= position.value) lastLineIdx = k; else break
|
||||
return lastLineIdx
|
||||
}
|
||||
```
|
||||
同时建议歌词/队列上**虚拟滚动**：LRC 常有 80~200 行，长播放列表可上千行，当前是全量 DOM。
|
||||
|
||||
### 3.3 大屏背景的整图高斯模糊
|
||||
`PlayerFull.vue:50-52`：`<img class="h-full w-full scale-110 object-cover blur-2xl opacity-30">` 铺满整个弹窗（`min-h-[70vh]`，实际常超 900×700）。一张全尺寸图叠加 `blur-2xl` + `scale-110`，在打开期间持续占用合成/光栅资源，低端机上会明显掉帧（拖进度条时最明显）。
|
||||
|
||||
**推荐**：改为一次性低分辨率方案——用同图 `size=96` 缩略图 + CSS 渐变遮罩，或直接用取色（后端返回主色）生成柔和纯色/线性渐变背景。收益远大于视觉损失。
|
||||
|
||||
### 3.4 搜索结果行每行 2 个 Tooltip 组件
|
||||
`MusicModule.vue:928-965`：每首歌行包了 2 个 `Tooltip`（reka-ui 组件 + 上下文）。首批 80 行 = 160 个 Tooltip 实例，滚动加载到 500 行 = 1000 个。挂载/更新成本高，且 Tooltip 会随列表 diff 频繁重建。
|
||||
|
||||
**推荐**：列表行用原生 `title` 属性承载提示（无需组件）；只对"需要富文本提示"的 `+N` 音质档位保留一个 Tooltip。
|
||||
|
||||
### 3.5 其它
|
||||
- **下载任务聚合计算**：`taskAggDone/taskAggTotal`（`MusicModule.vue:547-548`）每次渲染都遍历全部 `songs`。一个 500 首歌的任务，每来一次进度事件就重算 500×2。改：在 `handleDownloadEvent` 里维护 `task.doneBytes/totalBytes` 增量字段。
|
||||
- **`displayItems` / `groupKeys` / `groupAllSelected`**：模板中对每个源分组头调用 `groupAllSelected`，内部 `filteredResults.filter(...)` 是 O(n)；结果集大时是 O(n × 分组数)。改：用一次 `computed` 预生成 `Map<source, keys[]>`。
|
||||
- **飞牛曲库无分页**：`loadTracks` 固定 `size: 50`，`page/total` 暴露了却没有 UI。曲库 > 50 首时后面的歌**完全访问不到**（`playAll` 也只能播前 50 首）。应加无限滚动或分页。
|
||||
- **本地扫描无上限**：`scanLocal` 一次性返回全部条目，超大音乐目录下会长时间占住主线程做映射与渲染。
|
||||
- **缓存模式首播延迟**：`feiniu_cache_fetch`（`commands.rs:421-429` → `cache_fetch`）是"**下载完整文件后返回路径**"，即 `cache` 模式下首次播放要等整首下完；而 `loadingPlay` 这个状态在 UI 上**从未被使用**（`PlayerBar`/`PlayerFull` 都没读），用户看到的是"点了没反应"。要么改用边下边播的双源策略，要么至少把 `loadingPlay` 接上 spinner。
|
||||
|
||||
---
|
||||
|
||||
## 4. 交互体验问题（按操作路径）
|
||||
|
||||
**播放控制**
|
||||
1. 播放/暂停按钮 `disabled` 时无视觉降级（`PlayerBar.vue:76-84`），看起来可点却没反应。
|
||||
2. 音量图标（`PlayerBar.vue:117`）不可点击，没有"一键静音"；音量条只有 80px，长按/滚轮调节都没有。
|
||||
3. 切歌没有 crossfade，也没有间奏/淡出，切歌瞬间是硬切。
|
||||
4. 播放模式按钮图标随状态变（Repeat/Repeat1/Shuffle），初看像三个不同功能，且没有文字提示（只有 Tooltip）。
|
||||
5. 队列入口用 `ListMusic` 图标 + 数字角标，但点击是**平铺开关**（`store.queueVisible = !store.queueVisible`），而队列实际渲染在 `PlayerFull` 的右栏里——在大屏没打开时点这个图标看不到任何反馈（因为它只切了右栏的 tab，而弹窗没开）。
|
||||
6. 上一首/下一首没有"按住快进/快退"（老播放器的常见预期）。
|
||||
|
||||
**进度条**
|
||||
7. 没有 hover 时间气泡、没有缓冲进度层、没有"拖动时显示预览时间"。当前拖动时只能看两侧的小字。
|
||||
8. 轨道 6px + 16px 白色圆点滑块，`Slider.vue:40` 硬编码 `bg-white`，在浅色主题下白滑块白描边几乎隐形。
|
||||
|
||||
**列表切换**
|
||||
9. 发现音乐页切到「我的音乐」再切回，搜索关键词和结果**全部丢失**（模块内 tab 用 `Tabs` 非 keep-alive，`flatResults` 被重算但 store 里 `results` 还在——实际是因为 `MusicModule` 未卸载所以结果还在，但 `visibleCount` 会被 `watch(filteredResults)` 重置，滚动位置丢失）。
|
||||
10. 列表里双击行不会播放（只有点小图标才播），不符合音乐软件的肌肉记忆。
|
||||
11. 键盘：无空格播放/暂停、无 ↑↓ 选行、无 Enter 播放；所有列表行都不可聚焦。
|
||||
12. 多选操作只有"下载所选"，缺"加入歌单""加入队列""下一首播放"。
|
||||
|
||||
---
|
||||
|
||||
## 5. 界面缺陷清单（具体位置 + 改法）
|
||||
|
||||
### 5.1 结构与布局
|
||||
|
||||
| # | 缺陷 | 位置 | 改法 |
|
||||
|---|---|---|---|
|
||||
| L1 | **播放条没贴底**：被模块根 `p-6` 包住，`border-t` 只在左右各缩进 24px 的宽度上出现，视觉上像一张"飘着的卡片"而非底部坞站 | `MusicModule.vue:688,1416` | 把 `PlayerBar` 提升到 `App.vue`，作为 `flex-col` 壳层的最后一行（全宽、`border-t`、`h-[72px]`）；音乐模块内容区 `pb-[72px]` 让位 |
|
||||
| L2 | **左右内边距不对称**：模块左 24px + `px-1`(4px) = 28px；右 24px + `pr-3`(12px) + `px-1` = 40px，右侧被滚动条再吃一层，卡片右边距明显窄于左边 | `MusicModule.vue:688,706-707,987-988` | 统一成 `px-6`，滚动区改成 `[&>[data-slot=scroll-area-viewport]]:pr-6` 或让 ScrollArea 用 `scrollbar-gutter: stable`，避免内边距被滚动条挤压 |
|
||||
| L3 | **三套切换控件**：模块级 `TabsList`（半透明覆盖）、`MyMusicLibrary` 自绘分段按钮（:89-114）、`PlayerFull` 的裸文字切换（:113-129）——三种视觉语言表达同一件事 | 三处 | 统一为一种 segmented 控件（建议用现有 `Tabs`/`TabsList`，或统一样式的 `ButtonGroup`），并用同一套"选中=主色底/浅底 + 中粗字"的规则 |
|
||||
| L4 | **`Empty` 组件误用**：直接塞裸 children，继承 `gap-6`(24px) 与 `md:p-12`(48px)，图标与文案间距过大且垂直被撑高；`border-dashed` 没有宽度声明，虚线框实际不显示 | `MusicModule.vue:801-809, 977-980`、`MyMusicLibrary.vue:76-83,135-140` | 用组件既定的子结构：`EmptyMedia / EmptyTitle / EmptyDescription`；或给容器加 `border` + `border-dashed`、`gap-3`、`p-8` |
|
||||
| L5 | **横向 Tab 与子 Tab 层级混乱**：顶层 4 个 tab 里，「我的音乐」内部又横排 3 个子 tab，「设置」内部又竖排 5 张卡；导航成本高 | `MusicModule.vue:691-696`、`MyMusicLibrary.vue:88-114` | 见 §6 的"左侧来源树 + 右侧主区"结构，把两级 tab 压成一级 |
|
||||
| L6 | **首屏被低价值信息占据**：「下载到 本地/飞牛」占一整个卡片行（`MusicModule.vue:709-726`），说明文字是 12px 灰字却放在最显眼位置；真正的搜索框被挤到第二行 | `MusicModule.vue:708-794` | 把"下载目标"收进搜索工具栏右侧的 `Select`（与源选择器同排），或放进设置页；首行只留 搜索输入 + 源选择 + 搜索按钮 |
|
||||
| L7 | **歌单详情页底部孤零零一个"移除最后一首"按钮** | `MyMusicLibrary.vue:234-243` | 语义错误，删掉。改为：行 hover 显示「⋯」菜单（从歌单移除 / 上移 / 下移），或支持多选后批量移除 |
|
||||
| L8 | **歌单左栏无滚动**：`grid-cols-[220px_1fr]`，左栏是普通 `div`，歌单多了会撑高整页 | `MyMusicLibrary.vue:189-205` | 左栏用 `ScrollArea` 并固定高度（`h-[calc(100vh-260px)]`），或整体改三栏布局 |
|
||||
| L9 | **设置页信息密度过低 + 语义重复**：「飞牛音乐连接」管连接，「上传到飞牛曲库」又要求用户回头去前一张卡点云朵登录；5 张卡片纵向拉得很长 | `MusicModule.vue:1123-1371` | 合并为「连接与存储」一张卡：连接列表 + NAS 文件服务登录 + 曲库目录 + 自动上传；「播放缓存」并入「播放」分组；「环境检查」做成折叠的"诊断"面板 |
|
||||
|
||||
### 5.2 视觉与色彩
|
||||
|
||||
| # | 缺陷 | 位置 | 改法 |
|
||||
|---|---|---|---|
|
||||
| V1 | **音质徽标 5 色抢戏**：Hi-Res=琥珀、无损=紫、320K=天蓝、192K=橙、128K=锌灰，一行里 2 个高饱和徽标 + 1 个 `+N`，视觉噪音压过歌名 | `MusicModule.vue:336-355, 879-905` | 降为**两档**：无损/高解析用实心浅色徽标（一个色），其余用 `outline` 中性色；颜色不承担"档位"信息，档位靠文字。或改为歌名后的一个小图标 + Tooltip 详情 |
|
||||
| V2 | **列表变成卡片堆**：每行 `border` + `rounded-lg` + `p-2.5` + `space-y-2`，80 行 = 80 张卡，行间 8px 空隙，扫描效率低 | `MusicModule.vue:845-859` | 改紧凑单行：行高 44~48px、无独立边框、`border-b border-border/60` 或干脆无分隔、hover `bg-accent/60`；表头一行（`# / 标题 / 专辑 / 时长 / 操作`） |
|
||||
| V3 | **源分组头与大卡片行不匹配**：分组头只是 12px 小字，紧贴一堆 56px 卡片 | `MusicModule.vue:848-857` | 分组头改 `sticky top-0 z-10 bg-background/95 backdrop-blur` + 底部分隔线，字号 13px medium；或改用左侧来源 Tab 过滤，取消组内嵌头 |
|
||||
| V4 | **当前播放项用"选中态"表达**：`border-primary bg-primary/10` 在浅色主题下是"近黑边框 + 10% 黑底"，像复选框选中而非"正在播放" | `TrackItem.vue:53-54` | 改为：左侧 3px 主色竖条 + 歌名主色 + 一个 12px 的跳动均衡器图标；hover 与 active 语义分离 |
|
||||
| V5 | **`PlayerFull` 硬编码白色边框**：`border-l border-white/10`，浅色主题下完全不可见 | `PlayerFull.vue:112` | 改用 `border-border` |
|
||||
| V6 | **`PlayerFull` 背景被"洗白"**：整图 `opacity-30` + 白→白渐变，浅色下糊成一片；同时是持续 GPU 开销 | `PlayerFull.vue:50-53` | 改为缩略图小尺寸模糊，或纯色/双色线性渐变（从封面取色）；浅色主题下用极浅的封面色调，深色主题下用暗化封面色 |
|
||||
| V7 | **滑块基本不可见**：`Slider.vue:40` 硬编码 `bg-white`，16px 白色滑块 + 白色描边叠在浅底上；轨道仅 6px | `Slider.vue:36-41` | 滑块改 `bg-background` + 主色描边（或直接用 `bg-primary`）；静息轨道 4px、hover/拖动时平滑增到 8px；加 `transition-[height]` |
|
||||
| V8 | **`PlayerFull` 歌词行区分度不足**：非当前行 `text-muted-foreground/60`，当前行仅 `font-medium text-foreground`，没有位置指示 | `PlayerFull.vue:136-145` | 当前行放大到 17~18px + `text-foreground` + 左侧或下方主色指示；两侧行逐级降透明度（60/40/25）形成景深；点击区域扩大到整行并加 hover 背景 |
|
||||
| V9 | **`PlayerFull` 进度时间只在下方一行小字**，且控制按钮组与进度条分属两个块，视觉不聚合 | `PlayerFull.vue:74-108` | 进度条与控制键合并为一块：`[时间] ──●──── [时间]` 上、`[模式][上一首][播放][下一首][队列]` 下的居中控制簇 |
|
||||
| V10 | **「词」按钮用单个汉字**当歌词开关 | `PlayerBar.vue:125-132` | 换成 `Lyrics` 图标（`FileText`/`MicVocal`），与两侧图标风格一致 |
|
||||
| V11 | **下载任务标题行过载**：状态标签 + 歌名 + 歌手 + 音质标签 + 已下载/总量 + 最多 4 个图标按钮挤在一行；且 `Card` 被 `gap-0 py-0` + `CardContent py-2` 覆盖，内边距与模块内其它卡片不一致 | `MusicModule.vue:995-1060` | 拆两行：第一行 `[状态] 歌名 · 歌手 ……… [音质] [⋯菜单]`；第二行进度条 + 大小 + "打开目录/取消/重下"收进 `⋯` 菜单。`Card` 统一 `p-0` + 内部 `p-3` |
|
||||
| V12 | **多曲目任务行进度条只有 56px**（`w-14`），几乎读不出进度；错误信息被截断到 112px | `MusicModule.vue:1086-1097` | 进度条改占满剩余宽度（去掉固定宽度，放歌名下方一行）；错误信息用 Tooltip 或点击展开 |
|
||||
| V13 | **`TrackItem` 悬停才出现的播放按钮占 40px 固定宽度**，未悬停时标题左侧留出空白列，触屏/键盘用户无法触发 | `TrackItem.vue:68-75` | 改为：封面左下角 24px 半透明播放浮层（hover 显现），或整行 hover 时标题左侧淡入小图标；并支持双击整行播放 |
|
||||
| V14 | **飞牛曲库行/本地曲库行/歌单行的"来源"标识不统一**：本地用行内小标签「本地」，飞牛没有标识，歌单混排时无法区分 | `TrackItem.vue:81` | 统一在行尾或封面角标显示来源（NAS 云图标 / 本机图标），并在歌单详情里按来源分组或加筛选 |
|
||||
| V15 | **搜索历史下拉不适合键盘操作**：`@focusout` 关闭 + `@mousedown.prevent` 的组合同样让 Tab 导航无法进入历史项 | `MusicModule.vue:738-760` | 改用 `Combobox`/`Popover` + `Command` 组件（仓库已有 `components/ui/combobox`），支持 ↑↓ 选择、Enter 确认、Esc 关闭 |
|
||||
| V16 | **`+N` 音质档位靠 Tooltip**，触屏不可达；`visibleTiers` 固定展示 2 个，长歌名下把歌名挤窄 | `MusicModule.vue:888-904` | 行内只留 1 个"最高音质"徽标，全部档位收进右侧 `⋯` 菜单或点击弹出 popover |
|
||||
| V17 | **`PlayerBar` 缺少播放态反馈**：`loadingPlay` 未接 UI；NAS 慢时点播放毫无反应 | `PlayerBar.vue:76-84` | 播放键上叠加 spinner（`loadingPlay` 时），或封面加旋转/脉冲 |
|
||||
| V18 | **`PlayerBar` 三段留白失衡**：左侧信息 `max-w-44`，中间控制区 `flex-1` 里塞了模式/上下首/播放/队列 + 进度条，右侧音量+词+最大化；窄窗口下中间进度条被压到很短 | `PlayerBar.vue:34-141` | 采用标准三段：左 `w-[240px]` 固定、中 `flex-1 min-w-0`（控制 + 进度）、右 `w-[200px]`（音量/词/大屏）；窄容器下用 `container query` 渐进隐藏音量条与歌词按钮 |
|
||||
| V19 | **`TabsList` 同时带 `grid w-full max-w-md` 与组件默认 `inline-flex w-fit`**，并靠 `!p-0 !bg-transparent !shadow-none` 强行覆盖 | `MusicModule.vue:691` | 不要用覆盖式改写；把"模块级分段导航"抽成一个 `SegmentedNav` 组件（`grid grid-cols-N`、`bg-muted p-0.5`、激活项 `bg-background shadow-sm`） |
|
||||
| V20 | **封面圆角/阴影规格不统一**：列表 40px `rounded-md`、播放条 44px `rounded-md shadow`、大屏 256px `rounded-xl shadow-2xl` | 多处 | 定规格：列表 6px 无阴影、播放条 6px 无阴影、大屏 12px + `ring-1 ring-border/60` 无重阴影 |
|
||||
| V21 | **下载任务空态文案指向错误**：「去"搜索"页选择歌曲下载」，但 tab 已改名为「发现音乐」 | `MusicModule.vue:991` | 改为"去「发现音乐」页选择歌曲下载" |
|
||||
| V22 | **`PlayerFull` 未提供音量、队列收起、下一首信息**；队列项没有播放态指示（只有 `bg-primary/10`） | `PlayerFull.vue:147-163` | 补：右上角音量滑条；队列项用序号↔均衡器切换表示当前项，hover 显示"下一首播放/移除" |
|
||||
| V23 | **`ConnectionsSettings` 图标按钮语义不明**：`Power` 既表示"激活"又表示"登出"，两个含义相同的图标相邻 | `ConnectionsSettings.vue:157-171` | 激活用 `CircleCheck`/`RadioButton`，登出用 `LogOut`，删除保留 `Trash2`；并为所有 icon-only 按钮补 `Tooltip` + `aria-label` |
|
||||
| V24 | **歌单/曲库的「播放全部」用文字 `▶ 播放全部`**，与其他按钮的图标风格不统一 | `MyMusicLibrary.vue:115-117,214-216` | 统一为图标 + 文字：`<Play class="size-4"/> 播放全部` |
|
||||
| V25 | **`MusicModule` 里两处搜索框文案不一致**（"输入歌名/歌手/专辑关键词" vs "粘贴歌单链接"）且歌单解析行的 Input 靠 `border-0 bg-transparent` 融进容器，缺少"这是一行输入"的暗示 | `MusicModule.vue:730-782` | 歌单解析改为折叠的"粘贴歌单链接"次级入口（默认收起），避免与主搜索竞争注意力 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 重设计方案
|
||||
|
||||
### 6.1 参考基准
|
||||
- **Spotify / Apple Music**：左侧来源树 + 中间列表 + 底部全宽播放条 + 右侧可折叠"正在播放"。
|
||||
- **网易云音乐 / QQ 音乐**：紧凑表格行（`# / 标题 / 歌手 / 专辑 / 时长`）、行内 hover 操作、双击播放、底部播放条 + 播放列表面板。
|
||||
- **foobar2000 / MusicBee**：信息密度高、可排序表头、键盘优先。
|
||||
本项目的定位是"NAS 曲库 + 本地曲库 + 多平台搜索下载"的**工具型播放器**，建议取 **Spotify 的骨架 + 网易云的列表密度**，避免做成消费级流媒体的强视觉风格。
|
||||
|
||||
### 6.2 目标信息架构（三级 tab → 一级导航）
|
||||
|
||||
```
|
||||
音乐
|
||||
├── 曲库
|
||||
│ ├── 飞牛曲库 (NAS 曲目，分页/无限滚动 + 搜索 + 排序)
|
||||
│ ├── 本地曲库 (扫描目录，按文件夹浏览)
|
||||
│ └── 我的歌单 (歌单列表 → 歌单详情，可拖拽排序)
|
||||
├── 发现音乐 (多平台搜索 + 歌单解析 + 下载)
|
||||
├── 下载任务 (进行中 / 已完成 分组)
|
||||
└── 设置 (连接与存储 / 播放 / 下载 / 诊断，用左侧锚点或分段)
|
||||
```
|
||||
把「我的音乐」内部的 3 个子 tab 提升为导航的一级子项（来源树），「设置」内部的 5 张卡片改为分组锚点。
|
||||
|
||||
### 6.3 布局结构（目标）
|
||||
|
||||
```
|
||||
┌───────────────────────────────────────────────────────────────────────┐
|
||||
│ TitleBar（含模块浮动切换器） │
|
||||
├──────────┬──────────────┬─────────────────────────────────────────────┤
|
||||
│ Sidebar │ 来源树 │ 内容主区 │
|
||||
│ （模块） │ 240px │ ┌ 固定工具栏 ────────────────────────────┐ │
|
||||
│ │ │ │ 搜索 来源筛 音质筛 排序 多选操作 │ │
|
||||
│ │ 曲库 │ ├ 表头 (# 标题 歌手 专辑 时长 操作) ──────┤ │
|
||||
│ │ · 飞牛曲库 │ │ 44px 紧凑行，hover 显示操作 │ │
|
||||
│ │ · 本地曲库 │ │ 播放中：主色竖条 + 跳动的均衡器 │ │
|
||||
│ │ · 我的歌单 │ │ ... │ │
|
||||
│ │ 发现音乐 │ └────────────────────────────────────────┘ │
|
||||
│ │ 下载任务 │ │
|
||||
│ │ 设置 │ （可选右栏 320px：正在播放/歌词/队列） │
|
||||
├──────────┴──────────────┴─────────────────────────────────────────────┤
|
||||
│ MiniPlayer 72px（全宽坞站：左曲目 中控制+进度 右音量/歌词/大屏） │
|
||||
└───────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
要点：
|
||||
1. **MiniPlayer 提升到 `App.vue`**，全宽贴底、不参与任何模块内边距；音乐模块内容区 `pb-[72px]`。这样在任何模块都能控制播放。
|
||||
2. **`PlayerFull` 也提升到 `App.vue`**（全局 Dialog/Overlay），解决跨模块残留问题。
|
||||
3. **去掉"模块级横向 Tab"**，音乐模块内部用来源树；`useModuleTabs` 仍可保留，用于把来源树的第一级注册给 TitleBar 浮动切换器（保持现有能力）。
|
||||
4. **右栏"正在播放"可折叠**：窄窗口默认收起，宽窗口（≥1280px）默认展开，用 `container query` 或 `useMediaQuery` 决定。
|
||||
|
||||
### 6.4 视觉规范（建议写入项目 Design Token）
|
||||
|
||||
| 项目 | 规范 |
|
||||
|---|---|
|
||||
| 主色使用 | 只用于：主操作按钮、播放中指示、"正在播放"高亮。**不用于**徽标分类、分组头 |
|
||||
| 中性色阶 | 文本 `foreground` / 次文本 `muted-foreground` / 三级文本 `muted-foreground/70`；分隔线 `border/60`；hover 面 `accent/60` |
|
||||
| 圆角 | 行/输入 6px（`radius-md`）、卡片 10px（`radius-lg`）、大图 12px、头像/封面圆形仅用于单曲大图 |
|
||||
| 阴影 | 列表与播放条**不用阴影**，靠 `border` 分层；只有 Dialog/Popover 用 `shadow-lg` |
|
||||
| 行高 | 列表行 44px（紧凑）/ 48px（标准）；表头 32px |
|
||||
| 字号 | 歌名 14px/500，歌手·专辑 12px/400，时长时间数字 12px `tabular-nums` |
|
||||
| 徽标 | 一类语义一个样式：状态用实心浅底，属性（音质/格式）用 `outline` 中性色 + 文字；不超过 2 个 |
|
||||
| 动效 | 仅 `opacity` / `transform`，120~180ms `ease-out`；进度条高度过渡 150ms；尊重 `prefers-reduced-motion` |
|
||||
| 明暗主题 | **禁止硬编码** `bg-white` / `border-white/10` / `text-white`；一律走 token |
|
||||
| 空状态 | 统一 `EmptyMedia(32px 图标) → EmptyTitle(14px) → EmptyDescription(12px)`，`gap-3`、`p-10`、无边框 |
|
||||
|
||||
### 6.5 关键组件规格
|
||||
|
||||
**MiniPlayer**
|
||||
```
|
||||
高度 72px | 全宽 | border-t | bg-background/85 backdrop-blur
|
||||
左 240px ：封面 48px(6px 圆角) + 歌名 14px/500 截断 + 歌手 12px 截断 + ♥
|
||||
中 flex-1：① [模式][上一首][播放 40px 圆形主色][下一首][队列] 居中
|
||||
② [时间 00:00] ──进度条(hover 4→8px，含缓冲层)── [总时长] 居中 max-w-[560px]
|
||||
右 200px ：音量图标(可点静音) + 音量条 96px | 歌词 | 大屏 | （窄屏只留大屏）
|
||||
播放中：封面右侧叠加 3 条均衡器动效；`loadingPlay` 时播放键显示 spinner
|
||||
```
|
||||
|
||||
**列表行（TrackItem 重写）**
|
||||
```
|
||||
[#/均衡器 24px] [封面 40px] [标题 14px/500 + 歌手 12px] [专辑 12px 可隐藏] [时长 12px tabular] [⋯ hover 显示]
|
||||
高度 44px | 无边框 | border-b border-border/50 | hover:bg-accent/60 | 当前项：左侧 3px 主色条 + 标题主色
|
||||
双击整行播放；⋯ 菜单：下一首播放 / 加入队列 / 加入歌单 / 查看文件位置 / 下载
|
||||
```
|
||||
|
||||
**进度条交互**
|
||||
```
|
||||
拖动中：只更新预览位置 + 显示时间气泡；轨道加粗；不写 currentTime
|
||||
释放时：一次性 seek；若 duration 未知则禁用拖动并提示"该音频不支持跳转"
|
||||
缓冲层：在轨道里用 bg-muted-foreground/25 画已缓冲区间（audio.buffered）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 落地路径（按性价比排序）
|
||||
|
||||
| 阶段 | 内容 | 影响面 | 预估 |
|
||||
|---|---|---|---|
|
||||
| **S1 修 Bug（不做设计变更）** | 1.1 搜索框绑定 store.keyword；1.2 `toggle()` 无 src 兜底；1.3 试听与播放器互斥（或合并内核）；2.1/2.2 shuffle 自动切歌；2.4 缓存开关回填；2.7 `init` 幂等；2.8 持久化剥离 `rawSearch` | 仅改逻辑，风险低 | 半天 |
|
||||
| **S2 播放器骨架调整** | 3.1 拖动提交式 seek；3.2 歌词行索引缓存；3.3 大屏背景降级；4.1 播放键 loading 态；L1/V18 MiniPlayer 全宽贴底；V5/V7 主题 token 修正 | 播放条 + 大屏 | 1~2 天 |
|
||||
| **S3 列表与信息架构** | V2 紧凑列表；V1 徽标降噪；V3 分组头；V13/V4 TrackItem 重写；L6 首屏工具栏重构；2.5 上下文队列；2.6 歌单播放/暂停 | 发现音乐 + 曲库 | 3~4 天 |
|
||||
| **S4 结构性重构** | §6.2/6.3 左侧来源树 + 全局播放条；PlayerBar/PlayerFull 提升到 App.vue；右栏正在播放；设置页分组 | 模块外壳 | 1 周 |
|
||||
| **S5 体验补全** | 键盘快捷键、虚拟滚动、分页/无限滚动、拖拽排序歌单、音质档位 popover、缓冲层、桌面歌词 | — | 按需 |
|
||||
|
||||
**建议先做 S1 + S2**：S1 全是低风险的逻辑修复，S2 集中在两个组件文件里，能立刻解决"卡顿 + 没有控制感 + 拖动难用"的主观感受；S4 的结构调整等到前面稳定后再动，避免一次改动面过大。
|
||||
|
||||
---
|
||||
|
||||
## 8. 附：值得保留的设计
|
||||
|
||||
- 流代理走 `127.0.0.1` 动态端口 + `Cookie` 注入 + **Range 透传**（`proxy.rs`）——这是正确做法，seek 能真正生效，不要改成前端直连。
|
||||
- 桥接进程按需拉起、禁用模块时停止（`music/index.ts:34-45`）——避免了常驻 Python 进程。
|
||||
- `tasksSignature` 轻量签名代替深度 watch（`musicStore.ts:257-266`）——思路正确（只是 payload 需要瘦身）。
|
||||
- 搜索结果**懒解析**（搜索阶段拿档位、播放/下载前才解析真实链接）+ `rawSearch` 支持隔夜链接重解析（`musicStore.ts:355-370,458`）——设计合理。
|
||||
- 发现音乐列表的**增量渲染 + IntersectionObserver 哨兵**（`MusicModule.vue:265-305`）——方向正确，可平滑迁移为新列表的基础。
|
||||
|
||||
---
|
||||
|
||||
## 9. 重构落地记录（本次已实施）
|
||||
|
||||
### 9.1 新增文件
|
||||
|
||||
| 文件 | 作用 |
|
||||
|---|---|
|
||||
| `src/components/layout/TitleBarMusic.vue` | 标题栏音乐栏：唱片图标 + 歌名，点击弹出**方形播放控制窗** |
|
||||
| `src/modules/music/components/PlaylistEditorDialog.vue` | 歌单音乐编辑器：从全部音乐勾选加入 / 批量移出 |
|
||||
| `src/components/layout/NowPlayingDialog.vue` | 「正在播放」大屏（封面 + 控制 + 歌词 / 队列），由方形控制窗的「歌词 / 队列」入口打开 |
|
||||
| `src/components/common/ScrubBar.vue` | 通用拖拽进度条：**拖动只预览、松手才 seek**，含缓冲层与时间气泡 |
|
||||
| `src/components/common/SegmentedNav.vue` | 分段导航（现由 `NowPlayingDialog` 的「歌词 / 队列」切换使用） |
|
||||
|
||||
`PlayerBar.vue` / `PlayerFull.vue` 已删除；`GlobalPlayerBar.vue` 曾短暂作为全局坞站播放条存在，现已被标题栏音乐栏取代并删除。
|
||||
|
||||
**播放器入口最终形态**：标题栏搜索框左侧的音乐栏（`TitleBarMusic`）——未播放过时只显示唱片图标；有曲目后图标替换为封面并随播放旋转，右侧显示截断歌名。点击弹出约 300×340 的方形控制窗（封面 / 曲目信息 / 进度 / 循环·上下首·播放·队列 / 音量 / 歌词·队列入口），点击封面或「歌词 / 队列」进入大屏。
|
||||
|
||||
### 9.2 修复的缺陷
|
||||
|
||||
**P0**
|
||||
1. 飞牛曲库搜索框：直接 `v-model="store.searchKeyword"` 并新增 `loadTracks(page, append)` + `loadMoreTracks()`，搜索真正生效且支持分页续拉。
|
||||
2. 重启后播放键失效：`toggle()` 在 `audio` 无 src 时先按当前条目装载（试听或队列当前曲），失败原因经 `playError` 冒泡成 toast。
|
||||
3. 双音频引擎：删除模块内试听 `<audio>`，试听改走 `feiniu.playPreview()`，与队列播放**共用同一个 audio 实例**，天然互斥。
|
||||
|
||||
**P1**
|
||||
4. shuffle 自动切歌：`next()` 不再区分手动/自动，随机模式下都从「待播池」抽取；新增切歌历史栈，`prev()` 在随机模式下真正回退。播放模式持久化。
|
||||
5. 缓存模式：`setCacheMode` / `clearCache` 不再调用 `clearPlayback`，改设置不中断播放。
|
||||
6. 缓存开关状态：`CacheSettings` 的开关改为 `cacheMode` 的双向 computed，删除死代码 `cacheMax`，补 `ensureCacheStatus` 刷新。
|
||||
7. `init()` 幂等化（`inited` 标志），不会再覆盖内存队列。
|
||||
8. 任务持久化：超过 1.5MB 时自动剥离 `rawSearch` / `defaultDownloadHeaders` 后重试。
|
||||
9. 上传触发：`pendingUploadOnDone` 布尔标志改为 `uploadOnDoneTaskIds` 任务集合 + `uploadedTaskIds` 去重表，每个任务最多触发一次；启动时的历史任务不触发重传。
|
||||
10. Rust 引擎下载：`startDownload` 返回 `{ engine, skipped, taskId }`；Rust 引擎不再跳到空的任务页，改为提示到「下载器」查看；「下载到飞牛 + Rust 引擎」组合直接给出可读的错误提示并阻止。
|
||||
11. 队列语义：`playItem(item, context?)` 支持以所在列表为播放上下文，解决「从大曲库点一首就只剩一首」；新增 `playNext` / `addToQueue` / `removeFromQueue`。
|
||||
12. `done` 事件幂等，`doneCount` 不再虚增；`redownloadTask` 沿用原任务音质。
|
||||
|
||||
**性能**
|
||||
13. 提交式 seek（`ScrubBar`），拖动不再触发几十次 Range 请求中断重建。
|
||||
14. 歌词行索引由 O(n) 全量扫描改为「命中缓存微调 + 未命中二分」，并缓存上次索引。
|
||||
15. 大屏背景从「整图 `blur-2xl scale-110`」改为主题色径向渐变，去掉持续 GPU 开销。
|
||||
16. 列表行去掉 reka Tooltip（改用原生 `title` + 单个 Popover 展示音质档位），500 行不再产生 1000 个组件实例。
|
||||
17. 歌词滚动用函数 ref 收集节点，不再每次 `querySelectorAll`。
|
||||
18. 播放队列增量渲染（每批 200 行）。
|
||||
19. 曲库分页 200/页 + 滚动续拉；任务明细进度条由固定 56px 改为占满剩余宽度。
|
||||
|
||||
**交互与视觉**
|
||||
20. 播放入口改到**标题栏**：移除模块内播放条与全局坞站播放条，在自定义标题栏搜索框左侧新增音乐栏（唱片图标 + 歌名，未播放过时隐藏歌名）；点击弹出方形控制窗；播放中图标替换为封面并旋转。
|
||||
21. 音乐模块顶部 tabs 改回与其余模块完全一致的写法：`<Tabs><div ref="tabsListRef"><TabsList class="grid w-full max-w-md grid-cols-4 !bg-transparent !p-0 !shadow-none">` + `TabsTrigger` + `TabsContent class="mt-4 min-h-0 flex-1 ... tab-animate"`，根节点恢复为 `h-full p-6 overflow-hidden flex flex-col`。
|
||||
22. 三级 tab 压成「模块 tab → 曲库内左侧来源树」两级。左栏由 `w-[210px]` 收窄到 `w-[168px]`，来源项的选中态对齐顶部 Tabs（`rounded-lg bg-muted` 容器 + `bg-background shadow-sm` 胶囊），歌单子树用 `border-l` 缩进 + 展开动画；右栏内容切换加 `tab-animate`（`:key="view"` 重挂载触发），不再生硬。
|
||||
23. 首屏工具栏：搜索框回到首行，下载目标 / 来源筛选 / 音质筛选收到筛选条，歌单解析收进 Popover。
|
||||
24. 列表改 44px 紧凑行：无独立边框、hover 高亮、双击整行播放、序号列悬停原位切换为播放按钮（不再出现 40px 空白列）；播放中行用 `music-eq` 跳动均衡器 + 主色文字。
|
||||
25. 音质徽标由 5 色降为单枚中性 outline 徽标 + Popover 详情。
|
||||
26. `Empty` 全部改为组件既定结构（`EmptyMedia` / `EmptyTitle` / `EmptyDescription`）。
|
||||
27. 歌单：删除语义奇怪的「移除最后一首」，改为行内「⋯」菜单的支持上移 / 下移 / 移除；新增重命名；左侧歌单列表可独立滚动。
|
||||
28. **歌单页新增「编辑音乐」**（`components/PlaylistEditorDialog.vue`）：双 Tab 编辑器——「全部音乐」按来源（全部 / 飞牛 / 本地）勾选加入，已在歌单的曲目置灰标记「已加入」不可重复勾选；「已在歌单」批量勾选移出。含搜索、全选当前列表、增量渲染（每批 120）、飞牛曲库续拉、本地未扫描时的内联扫描入口。
|
||||
29. 源分组头去掉 `sticky` 与白色底色（原 `bg-background/95 backdrop-blur` 会在浅色背景上形成白色横条）。
|
||||
30. **发现音乐每行新增「下载到飞牛」**（试听 / 下载右侧）：走新增的 Rust 命令 `feiniu_upload_from_url`，由后端边拉音源边传给 NAS，**本地不落地文件**；懒解析歌曲会先按默认音质解析真实链接，并合并 `defaultDownloadHeaders` + `defaultDownloadCookies`（过滤非 ASCII 头，避免 reqwest panic）。
|
||||
31. 设置页从「5 张卡片」改为「连接 / 存储与上传 / 播放 / 搜索与下载 / 环境与诊断（折叠）」分组，并把「NAS 文件服务登录」并入存储分组。
|
||||
32. 主题一致性：删除 `border-white/10`、`bg-white` 等硬编码；滑块、均衡器、进度条全部走 `--primary` / `--muted` / `--background` token。
|
||||
33. 连接管理图标语义修正（激活用 `CircleCheck`、登出用 `LogOut`），全部 icon-only 按钮补齐 `title` + `aria-label`。
|
||||
34. 搜索历史下拉改为 `focusin/focusout` 容器判定，Tab 键可以进入历史项。
|
||||
|
||||
### 9.2.1 飞牛上传链路：fnOS 文件服务 → WebDAV（最终形态）
|
||||
|
||||
> 演进：multipart over WS 的 fnOS 文件服务存在会话易失、握手/登录协议联调困难等问题（三轮修复：
|
||||
> WS 读写分离与 Origin → 加密登录体补 `req`/`reqid` → 登录结果双通道等待），最终整体替换为 **WebDAV**。
|
||||
|
||||
| 结论 | 说明 |
|
||||
|---|---|
|
||||
| **协议选型** | fnOS 提供的 SMB / WebDAV / FTP / NFS 中选 **WebDAV**：纯 HTTP 语义、reqwest 即可实现、Basic 认证随请求携带**无会话**（重启免登录）；SMB 的 Rust 客户端生态差、FTP 明文且被动模式易出问题、NFS 无 Windows 客户端方案 |
|
||||
| 后端实现 | `src-tauri/src/music/feiniu/webdav.rs`（`fnos.rs` 已删除）：`test`（PROPFIND Depth 0）/ `upload_file`（本地文件 128KB 分块流式 PUT）/ `delete`；上传前逐级 MKCOL 补目录 |
|
||||
| 「下载到飞牛」机制 | **与自动上传同链路**：正常走 musicdl 下载（引擎侧解析/代理/音质）→ 任务完成后扫描下载目录（下界=任务创建时刻）→ WebDAV 上传 → 删除本地音频及同名歌词/封面（`feiniu_delete_local`，扩展名白名单）→ 移除任务记录。失败时保留本地文件与任务记录供排查。早期的「URL 拉流直传」（`webdav_upload_from_url`）因可靠性不足已移除 |
|
||||
| 前端配置 | `feiniuStore.webdav = { url, username, password, dir }` 持久化 localStorage（`thing.music.feiniu.webdav`）；`webdavReady` 四项齐备才放行上传；设置页「存储与上传」分组内配置 + 「测试连接」 |
|
||||
| fnOS 侧设置 | 系统设置 → 文件服务 → WebDAV 开启（HTTP 5005 / HTTPS 5006）；目标文件夹在「可见文件夹范围」内；团队文件夹需勾选「允许通过文件共享协议挂载」；账号需读写权限（已写成设置页折叠提示） |
|
||||
| 路径语义 | 目标目录是 **WebDAV 根下的相对路径**（不是 NAS 内部绝对路径），URL 逐段百分号编码 |
|
||||
| 错误可读化 | 401 认证失败 / 403 无权限 / 404 目录不存在或不在可见范围 / 409 父目录不存在，均带上下文 |
|
||||
|
||||
### 9.3 校验
|
||||
|
||||
```
|
||||
vue-tsc --noEmit → exit 0（0 error）
|
||||
vite build → exit 0（11.5s）
|
||||
cargo check → exit 0
|
||||
```
|
||||
|
||||
### 9.4 仍未做的部分（建议后续）
|
||||
|
||||
- 键盘全局快捷键（空格播放/暂停、↑↓ 选行）——需接入项目既有快捷键体系，避免与输入框冲突。
|
||||
- 列表虚拟滚动（当前为增量渲染，千级以上仍有优化空间）。
|
||||
- 歌单拖拽排序（`vue-draggable-plus` 已在依赖中，可直接接入）。
|
||||
- 本地文件的时长 / 内嵌封面解析（当前时长列退化为文件大小）。
|
||||
- 缓存模式改为「边下边播」的双源策略（当前 `cache` 模式首播仍需等整首下完）。
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"pinia": "^3.0.4",
|
||||
"pinyin-pro": "^3.28.2",
|
||||
"reka-ui": "^2.10.1",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tailwindcss": "^4.3.2",
|
||||
@@ -381,6 +382,8 @@
|
||||
|
||||
"pinia": ["pinia@3.0.4", "https://registry.npmmirror.com/pinia/-/pinia-3.0.4.tgz", { "dependencies": { "@vue/devtools-api": "^7.7.7" }, "peerDependencies": { "typescript": ">=4.5.0", "vue": "^3.5.11" }, "optionalPeers": ["typescript"] }, "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw=="],
|
||||
|
||||
"pinyin-pro": ["pinyin-pro@3.29.4", "https://registry.npmmirror.com/pinyin-pro/-/pinyin-pro-3.29.4.tgz", {}, "sha512-SPXpDT2cHEy+d26V1RXYMlVzXN42hotFAak1fzyWPi4o2dKXb61UqD4pzxDJHwk6gbv8vQ6EfErd+hYX0Qhzug=="],
|
||||
|
||||
"postcss": ["postcss@8.5.19", "https://registry.npmmirror.com/postcss/-/postcss-8.5.19.tgz", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ=="],
|
||||
|
||||
"reka-ui": ["reka-ui@2.10.1", "https://registry.npmmirror.com/reka-ui/-/reka-ui-2.10.1.tgz", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^14.1.0", "@vueuse/shared": "^14.1.0", "aria-hidden": "^1.2.4", "defu": "^6.1.5", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.4.0" } }, "sha512-drcOQ4rQtDYAcGCsyQBqQg8QQ+H3B+zDaMJU0h8KPEPMa7g9BHu3zcOi4OB39XJSWizceFoNO0Z9tctSGLOXqg=="],
|
||||
|
||||
@@ -0,0 +1,430 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>音乐模块 · 界面改版对照稿</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root{
|
||||
--bg:#f4f4f5; --panel:#ffffff; --panel-2:#fafafa; --line:#e7e7e9; --line-2:#f0f0f1;
|
||||
--fg:#18181b; --fg-2:#71717a; --fg-3:#a1a1aa;
|
||||
--primary:#18181b; --primary-fg:#fafafa; --accent:#f4f4f5;
|
||||
--ok:#0f7b4f; --warn:#9a3412; --err:#b91c1c;
|
||||
}
|
||||
body{
|
||||
font-family: system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
|
||||
background:var(--bg); color:var(--fg); font-size:13px; line-height:1.55; padding:28px 20px 60px;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
.wrap{ max-width:1180px; margin:0 auto; }
|
||||
h1{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
|
||||
.sub{ color:var(--fg-2); font-size:12.5px; margin-top:4px; }
|
||||
.toolbar{ display:flex; align-items:center; gap:10px; margin:18px 0 14px; flex-wrap:wrap; }
|
||||
.seg{ display:inline-flex; background:#e9e9eb; border-radius:8px; padding:3px; gap:2px; }
|
||||
.seg button{
|
||||
border:0; background:transparent; font:inherit; font-size:12.5px; color:var(--fg-2);
|
||||
padding:6px 14px; border-radius:6px; cursor:pointer; transition:.15s;
|
||||
}
|
||||
.seg button.on{ background:#fff; color:var(--fg); font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.08); }
|
||||
.hint{ color:var(--fg-3); font-size:12px; }
|
||||
|
||||
/* ---------- window frame ---------- */
|
||||
.win{
|
||||
background:var(--panel); border:1px solid var(--line); border-radius:11px; overflow:hidden;
|
||||
box-shadow:0 8px 28px rgba(0,0,0,.07); display:flex; flex-direction:column; height:640px;
|
||||
}
|
||||
.titlebar{
|
||||
height:38px; flex:0 0 38px; display:flex; align-items:center; gap:8px; padding:0 12px;
|
||||
background:var(--panel-2); border-bottom:1px solid var(--line);
|
||||
}
|
||||
.dots{ display:flex; gap:5px; }
|
||||
.dots i{ width:9px; height:9px; border-radius:50%; background:#dcdce0; display:block; }
|
||||
.tb-title{ font-size:12px; color:var(--fg-2); margin-left:6px; }
|
||||
.tb-tabs{ margin-left:auto; display:flex; gap:4px; }
|
||||
.tb-tabs span{ font-size:11px; color:var(--fg-2); padding:3px 9px; border-radius:5px; }
|
||||
.tb-tabs span.on{ background:#e9e9eb; color:var(--fg); }
|
||||
.body{ flex:1; display:flex; min-height:0; }
|
||||
|
||||
/* ---------- left module rail ---------- */
|
||||
.rail{
|
||||
width:52px; flex:0 0 52px; border-right:1px solid var(--line); background:var(--panel-2);
|
||||
display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0;
|
||||
}
|
||||
.rail i{
|
||||
width:32px; height:32px; border-radius:8px; background:#ececed; display:grid; place-items:center;
|
||||
font-size:12px; color:var(--fg-2); font-style:normal;
|
||||
}
|
||||
.rail i.on{ background:var(--primary); color:#fff; }
|
||||
|
||||
/* ---------- source tree ---------- */
|
||||
.tree{ width:186px; flex:0 0 186px; border-right:1px solid var(--line); padding:12px 10px; background:var(--panel); }
|
||||
.tree h4{ font-size:11px; color:var(--fg-3); font-weight:500; padding:6px 8px 4px; letter-spacing:.03em; }
|
||||
.tree a{
|
||||
display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px;
|
||||
color:var(--fg-2); text-decoration:none; font-size:12.5px; margin-bottom:1px;
|
||||
}
|
||||
.tree a.on{ background:#ececed; color:var(--fg); font-weight:500; }
|
||||
.tree a b{ margin-left:auto; font-weight:400; font-size:11px; color:var(--fg-3); }
|
||||
|
||||
/* ---------- main ---------- */
|
||||
.main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--panel); }
|
||||
.main-head{ padding:12px 16px 10px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:8px; }
|
||||
.field{
|
||||
height:30px; border:1px solid var(--line); border-radius:7px; background:#fff;
|
||||
display:flex; align-items:center; padding:0 10px; color:var(--fg-3); font-size:12.5px; flex:1; max-width:330px;
|
||||
}
|
||||
.btn{ height:30px; padding:0 12px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--fg); font-size:12.5px; display:inline-flex; align-items:center; gap:5px; }
|
||||
.btn.dark{ background:var(--primary); color:#fff; border-color:var(--primary); }
|
||||
.main-body{ flex:1; min-height:0; overflow:hidden; }
|
||||
.thead{
|
||||
display:grid; grid-template-columns:34px 44px minmax(0,3fr) minmax(0,2fr) 52px 34px;
|
||||
gap:10px; align-items:center; padding:6px 16px; border-bottom:1px solid var(--line-2);
|
||||
font-size:11px; color:var(--fg-3);
|
||||
}
|
||||
.row{
|
||||
display:grid; grid-template-columns:34px 44px minmax(0,3fr) minmax(0,2fr) 52px 34px;
|
||||
gap:10px; align-items:center; padding:5px 16px; height:44px; border-bottom:1px solid var(--line-2);
|
||||
}
|
||||
.row:hover{ background:var(--accent); }
|
||||
.row.on{ background:#f4f4f5; }
|
||||
.row.on .t1{ color:var(--fg); font-weight:500; }
|
||||
.idx{ font-size:11.5px; color:var(--fg-3); text-align:right; }
|
||||
.eq{ display:flex; align-items:flex-end; gap:2px; height:12px; }
|
||||
.eq i{ width:2.5px; background:var(--primary); border-radius:1px; display:block; }
|
||||
.eq i:nth-child(1){ height:5px } .eq i:nth-child(2){ height:11px } .eq i:nth-child(3){ height:8px }
|
||||
.cov{ width:36px; height:36px; border-radius:6px; background:#e9e9eb; }
|
||||
.t1{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.t2{ font-size:11.5px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.tag{ font-size:10px; padding:1px 6px; border-radius:4px; border:1px solid var(--line); color:var(--fg-2); white-space:nowrap; }
|
||||
.tag.solid{ background:#ececed; border-color:transparent; }
|
||||
.dur{ font-size:11.5px; color:var(--fg-3); font-variant-numeric:tabular-nums; text-align:right; }
|
||||
.more{ color:var(--fg-3); text-align:center; opacity:0; }
|
||||
.row:hover .more{ opacity:1; }
|
||||
|
||||
/* ---------- right now playing ---------- */
|
||||
.np{ width:250px; flex:0 0 250px; border-left:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--panel); }
|
||||
.np-cover{ width:100%; aspect-ratio:1; border-radius:10px; background:linear-gradient(150deg,#e8e8ea,#d6d6da); }
|
||||
.np h3{ font-size:14px; font-weight:500; }
|
||||
.np p{ font-size:12px; color:var(--fg-2); }
|
||||
.lyric{ display:flex; flex-direction:column; gap:7px; margin-top:4px; }
|
||||
.lyric span{ font-size:12.5px; color:var(--fg-3); }
|
||||
.lyric span.on{ font-size:14px; color:var(--fg); font-weight:500; }
|
||||
|
||||
/* ---------- player bar ---------- */
|
||||
.player{
|
||||
flex:0 0 72px; height:72px; border-top:1px solid var(--line); background:rgba(255,255,255,.92);
|
||||
backdrop-filter:blur(12px); display:flex; align-items:center; gap:14px; padding:0 16px;
|
||||
}
|
||||
.pl-left{ width:236px; flex:0 0 236px; display:flex; align-items:center; gap:10px; min-width:0; }
|
||||
.pl-left .cov{ width:44px; height:44px; border-radius:6px; }
|
||||
.pl-mid{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
|
||||
.pl-ctrl{ display:flex; align-items:center; gap:16px; color:var(--fg-2); }
|
||||
.pl-play{ width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-size:11px; }
|
||||
.pl-seek{ width:100%; max-width:520px; display:flex; align-items:center; gap:8px; }
|
||||
.pl-seek .time{ font-size:10.5px; color:var(--fg-3); font-variant-numeric:tabular-nums; width:34px; }
|
||||
.track{ flex:1; height:4px; border-radius:2px; background:#e4e4e7; position:relative; }
|
||||
.track .buf{ position:absolute; inset:0 auto 0 0; width:34%; background:#d4d4d8; border-radius:2px; }
|
||||
.track .fill{ position:absolute; inset:0 auto 0 0; width:22%; background:var(--primary); border-radius:2px; }
|
||||
.track .knob{ position:absolute; left:22%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--primary); }
|
||||
.pl-right{ width:196px; flex:0 0 196px; display:flex; align-items:center; justify-content:flex-end; gap:10px; color:var(--fg-2); }
|
||||
.vol{ width:76px; height:4px; border-radius:2px; background:#e4e4e7; position:relative; }
|
||||
.vol i{ position:absolute; inset:0 auto 0 0; width:70%; background:var(--primary); border-radius:2px; display:block; }
|
||||
|
||||
/* ---------- before view ---------- */
|
||||
.before-pad{ padding:22px 22px 0; flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
|
||||
.b-tabs{ display:grid; grid-template-columns:repeat(4,1fr); max-width:430px; background:#ececed; border-radius:8px; padding:3px; font-size:12.5px; text-align:center; }
|
||||
.b-tabs span{ padding:5px 0; border-radius:6px; color:var(--fg-2); }
|
||||
.b-tabs span.on{ background:#fff; color:var(--fg); font-weight:500; }
|
||||
.b-card{ border:1px solid var(--line); border-radius:9px; padding:9px 12px; display:flex; align-items:center; gap:10px; font-size:12.5px; }
|
||||
.b-card.muted{ background:#fafafa; }
|
||||
.b-row{ border:1px solid var(--line); border-radius:9px; padding:9px 11px; display:flex; align-items:center; gap:11px; margin-bottom:7px; }
|
||||
.b-sub{ display:inline-flex; gap:3px; background:#ececed; border-radius:7px; padding:3px; font-size:12px; }
|
||||
.b-sub span{ padding:4px 11px; border-radius:5px; color:var(--fg-2); }
|
||||
.b-sub span.on{ background:var(--primary); color:#fff; }
|
||||
.b-player{ border-top:1px solid var(--line); margin:0 22px; padding:10px 0; display:flex; align-items:center; gap:12px; }
|
||||
.mark{
|
||||
width:17px; height:17px; border-radius:50%; background:#b91c1c; color:#fff; font-size:10.5px;
|
||||
display:inline-grid; place-items:center; flex:0 0 17px; font-weight:500;
|
||||
}
|
||||
.mark.g{ background:#0f7b4f; }
|
||||
.mark.amber{ background:#b45309; }
|
||||
|
||||
/* ---------- legend ---------- */
|
||||
.legend{ margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:10px; }
|
||||
.li{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:11px 13px; display:flex; gap:10px; }
|
||||
.li b{ display:block; font-size:12.5px; font-weight:500; margin-bottom:2px; }
|
||||
.li p{ font-size:12px; color:var(--fg-2); }
|
||||
.hide{ display:none !important; }
|
||||
.note{ font-size:11.5px; color:var(--fg-3); margin-top:6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<h1>音乐模块 · 界面改版对照稿</h1>
|
||||
<p class="sub">左边是当前实现的实际问题，右边是按建议方案重排后的目标形态。改版要点见下方图例。</p>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="seg" id="seg">
|
||||
<button data-v="before" class="on">当前实现</button>
|
||||
<button data-v="after">建议方案</button>
|
||||
</div>
|
||||
<span class="hint" id="hint">红/橙标记 = 缺陷位置</span>
|
||||
</div>
|
||||
|
||||
<!-- ================= BEFORE ================= -->
|
||||
<div class="win" id="view-before">
|
||||
<div class="titlebar">
|
||||
<div class="dots"><i></i><i></i><i></i></div>
|
||||
<span class="tb-title">Thing</span>
|
||||
<div class="tb-tabs"><span class="on">我的音乐</span><span>发现音乐</span><span>下载任务</span><span>设置</span></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="rail">
|
||||
<i class="on">音</i><i>载</i><i>监</i><i>代</i><i>设</i>
|
||||
</div>
|
||||
<div class="before-pad">
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div class="b-tabs">
|
||||
<span class="on">我的音乐</span><span>发现音乐</span><span>下载任务</span><span>设置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<span class="b-sub"><span class="on">飞牛曲库</span><span>本地曲库</span><span>我的歌单</span></span>
|
||||
<span class="hint">← 第二套切换控件，与上一行风格不同</span>
|
||||
<span class="mark" style="margin-left:auto">3</span>
|
||||
</div>
|
||||
|
||||
<div class="b-card">
|
||||
<span class="hint">下载到</span>
|
||||
<span class="tag">本地目录 ▾</span>
|
||||
<span class="hint">下载到本地目录（musicdl）</span>
|
||||
<span class="mark" style="margin-left:auto">1</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:8px;align-items:center">
|
||||
<div class="field" style="max-width:none">输入歌名 / 歌手 / 专辑关键词</div>
|
||||
<span class="tag">已选 3 个源 ▾</span>
|
||||
<span class="btn dark">搜索</span>
|
||||
</div>
|
||||
|
||||
<div class="b-card muted">
|
||||
<span class="hint">粘贴歌单链接（网易云 / QQ 音乐等）</span>
|
||||
<span class="btn" style="margin-left:auto">解析歌单</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:2px">
|
||||
<div class="b-row">
|
||||
<span class="tag">☐</span><div class="cov" style="width:38px;height:38px"></div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="t1">海阔天空 <span class="tag" style="color:#7c3aed">无损 flac 32.4 MB</span> <span class="tag" style="color:#0369a1">320K mp3</span> <span class="tag">+2</span></div>
|
||||
<div class="t2">Beyond · 乐与怒</div>
|
||||
</div>
|
||||
<span class="tag">05:21</span><span class="tag">▷</span><span class="tag">⤓</span>
|
||||
<span class="mark">2</span><span class="mark">5</span>
|
||||
</div>
|
||||
<div class="b-row">
|
||||
<span class="tag">☐</span><div class="cov" style="width:38px;height:38px"></div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="t1">光辉岁月 <span class="tag" style="color:#b45309">Hi-Res flac 96.1 MB</span> <span class="tag" style="color:#a16207">192K mp3</span></div>
|
||||
<div class="t2">Beyond · 命运派对</div>
|
||||
</div>
|
||||
<span class="tag">04:58</span><span class="tag">▷</span><span class="tag">⤓</span>
|
||||
<span class="mark">2</span>
|
||||
</div>
|
||||
<div class="b-row">
|
||||
<span class="tag">☐</span><div class="cov" style="width:38px;height:38px"></div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="t1">喜欢你</div><div class="t2">Beyond · 秘密警察</div>
|
||||
</div>
|
||||
<span class="tag">04:35</span><span class="tag">▷</span><span class="tag">⤓</span>
|
||||
<span class="mark">6</span>
|
||||
</div>
|
||||
<span class="note">每行都是独立圆角卡片 + 8px 间距；一行内 6~8 个视觉元素，彩色徽标抢过歌名。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-player">
|
||||
<div class="cov" style="width:44px;height:44px;border-radius:6px"></div>
|
||||
<div style="min-width:0;max-width:150px">
|
||||
<div class="t1">未播放</div><div class="t2">选择一首歌曲开始播放</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px">
|
||||
<div class="pl-ctrl" style="font-size:13px"><span>⟳</span><span>⏮</span><span class="pl-play">▶</span><span>⏭</span><span>☰</span></div>
|
||||
<div class="pl-seek" style="max-width:360px">
|
||||
<span class="time">--:--</span>
|
||||
<div class="track"><div class="fill" style="width:0"></div><div class="knob" style="left:0"></div></div>
|
||||
<span class="time">--:--</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-right"><span>🔊</span><div class="vol"><i></i></div><span>词</span><span>⤢</span></div>
|
||||
<span class="mark" style="position:absolute">4</span>
|
||||
</div>
|
||||
<div style="position:relative">
|
||||
<span class="mark" style="position:absolute;right:14px;bottom:44px">7</span>
|
||||
<span class="mark" style="position:absolute;left:14px;bottom:60px">8</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= AFTER ================= -->
|
||||
<div class="win hide" id="view-after">
|
||||
<div class="titlebar">
|
||||
<div class="dots"><i></i><i></i><i></i></div>
|
||||
<span class="tb-title">Thing</span>
|
||||
<div class="tb-tabs"><span class="on">曲库</span><span>发现音乐</span><span>下载任务</span><span>设置</span></div>
|
||||
<span class="mark g" style="margin-left:8px">3</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="rail">
|
||||
<i class="on">音</i><i>载</i><i>监</i><i>代</i><i>设</i>
|
||||
</div>
|
||||
|
||||
<div class="tree">
|
||||
<h4>曲库</h4>
|
||||
<a class="on">飞牛曲库 <b>1.2k</b></a>
|
||||
<a>本地曲库 <b>318</b></a>
|
||||
<a>我的歌单 <b>7</b></a>
|
||||
<h4>其他</h4>
|
||||
<a>发现音乐</a>
|
||||
<a>下载任务 <b>2</b></a>
|
||||
<a>设置</a>
|
||||
<span class="mark g" style="margin:10px 0 0 8px">3</span>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="main-head">
|
||||
<div class="field">搜索歌名 / 歌手 / 专辑</div>
|
||||
<span class="tag">全部来源 ▾</span>
|
||||
<span class="tag">全部音质 ▾</span>
|
||||
<span class="btn" style="margin-left:auto">排序 ▾</span>
|
||||
<span class="btn">扫描本地</span>
|
||||
<span class="btn dark">▶ 播放全部</span>
|
||||
<span class="mark g" style="margin-left:6px">1</span>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div class="thead">
|
||||
<span style="text-align:right">#</span><span></span><span>标题</span><span>专辑</span><span style="text-align:right">时长</span><span></span>
|
||||
</div>
|
||||
<div class="row on">
|
||||
<span class="idx"><span class="eq"><i></i><i></i><i></i></span></span>
|
||||
<div class="cov"></div>
|
||||
<div style="min-width:0">
|
||||
<div class="t1">海阔天空</div>
|
||||
<div class="t2">Beyond · 1993</div>
|
||||
</div>
|
||||
<div class="t2">乐与怒</div>
|
||||
<span class="dur">05:21</span>
|
||||
<span class="more">⋯</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="idx">2</span>
|
||||
<div class="cov"></div>
|
||||
<div style="min-width:0"><div class="t1">光辉岁月</div><div class="t2">Beyond</div></div>
|
||||
<div class="t2">命运派对</div>
|
||||
<span class="dur">04:58</span>
|
||||
<span class="more">⋯</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="idx">3</span>
|
||||
<div class="cov"></div>
|
||||
<div style="min-width:0"><div class="t1">喜欢你</div><div class="t2">Beyond</div></div>
|
||||
<div class="t2">秘密警察</div>
|
||||
<span class="dur">04:35</span>
|
||||
<span class="more">⋯</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="idx">4</span>
|
||||
<div class="cov"></div>
|
||||
<div style="min-width:0"><div class="t1">冷雨夜</div><div class="t2">Beyond</div></div>
|
||||
<div class="t2">现代舞台</div>
|
||||
<span class="dur">04:12</span>
|
||||
<span class="more">⋯</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="idx">5</span>
|
||||
<div class="cov"></div>
|
||||
<div style="min-width:0"><div class="t1">真的爱你</div><div class="t2">Beyond</div></div>
|
||||
<div class="t2">Beyond IV</div>
|
||||
<span class="dur">04:41</span>
|
||||
<span class="more">⋯</span>
|
||||
</div>
|
||||
<div style="padding:8px 16px" class="note">
|
||||
行高 44px、无独立边框、hover 高亮、双击整行播放；播放中行用主色竖条 + 均衡器表示，不再用“选中框”。
|
||||
<span class="mark g">2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np">
|
||||
<div class="np-cover"></div>
|
||||
<div>
|
||||
<h3>海阔天空</h3>
|
||||
<p>Beyond · 乐与怒</p>
|
||||
</div>
|
||||
<div class="track" style="height:4px"><div class="fill" style="width:38%"></div><div class="knob" style="left:38%"></div></div>
|
||||
<div class="lyric">
|
||||
<span>今天我 寒夜里看雪飘过</span>
|
||||
<span>怀着冷却了的心窝漂远方</span>
|
||||
<span class="on">风雨里追赶 雾里分不清影踪</span>
|
||||
<span>天空海阔你与我</span>
|
||||
<span>可会变（谁没在变）</span>
|
||||
</div>
|
||||
<span class="note">右栏“正在播放”可折叠（窄窗口自动收起）</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player">
|
||||
<div class="pl-left">
|
||||
<div class="cov"></div>
|
||||
<div style="min-width:0">
|
||||
<div class="t1">海阔天空</div>
|
||||
<div class="t2">Beyond · 乐与怒</div>
|
||||
</div>
|
||||
<span class="mark g" style="margin-left:auto">4</span>
|
||||
</div>
|
||||
<div class="pl-mid">
|
||||
<div class="pl-ctrl"><span>🔀</span><span>⏮</span><span class="pl-play">❚❚</span><span>⏭</span><span>☰</span></div>
|
||||
<div class="pl-seek">
|
||||
<span class="time">01:12</span>
|
||||
<div class="track"><div class="buf"></div><div class="fill"></div><div class="knob"></div></div>
|
||||
<span class="time">05:21</span>
|
||||
</div>
|
||||
<span class="note" style="margin:0">拖动只更新预览，松手才 seek；轨道含缓冲层，hover 加粗到 8px</span>
|
||||
</div>
|
||||
<div class="pl-right">
|
||||
<span class="mark g">5</span>
|
||||
<span>🔊</span><div class="vol"><i></i></div><span>詞</span><span>⤢</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend" id="legend">
|
||||
<div class="li"><span class="mark">1</span><div><b>首屏信息层级</b><p>“下载到 本地/飞牛”不再独占一行卡片，收进工具栏；搜索框回到首行黄金位置。</p></div></div>
|
||||
<div class="li"><span class="mark">2</span><div><b>列表密度与徽标降噪</b><p>卡片堆 → 44px 紧凑表格行；音质徽标从 5 色降为 1 类中性 outline，档位详情收进 ⋯ 菜单。</p></div></div>
|
||||
<div class="li"><span class="mark">3</span><div><b>两级横向 Tab → 左侧来源树</b><p>模块级 Tab + 子 Tab 合并为一条来源树，导航层级从三层降到两层。</p></div></div>
|
||||
<div class="li"><span class="mark g">4</span><div><b>播放条全宽贴底</b><p>MiniPlayer 提升到 App 全局层：任何模块都能控制播放；离开音乐模块不再丢失控制入口。</p></div></div>
|
||||
<div class="li"><span class="mark g">5</span><div><b>进度与音量交互</b><p>提交式 seek + 缓冲进度层；音量图标可点静音；滑块配色改走主题 token（原为硬编码纯白）。</p></div></div>
|
||||
<div class="li"><span class="mark">6</span><div><b>来源与来源标识统一</b><p>本地/NAS/歌单混排时用统一图标标识来源，不再靠行内小标签。</p></div></div>
|
||||
<div class="li"><span class="mark">7</span><div><b>内边距不对称</b><p>模块左 28px / 右 40px（含滚动条），卡片右边距明显偏窄；统一为 24px 并保留滚动条槽位。</p></div></div>
|
||||
<div class="li"><span class="mark">8</span><div><b>播放条未贴底</b><p>被模块 p-6 包住，分隔线左右各缩进 24px，读作“漂浮卡片”而非底部坞站。</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var seg = document.getElementById('seg');
|
||||
var before = document.getElementById('view-before');
|
||||
var after = document.getElementById('view-after');
|
||||
var hint = document.getElementById('hint');
|
||||
seg.addEventListener('click', function (e) {
|
||||
var b = e.target.closest('button');
|
||||
if (!b) return;
|
||||
var v = b.getAttribute('data-v');
|
||||
seg.querySelectorAll('button').forEach(function (x) { x.classList.toggle('on', x === b); });
|
||||
before.classList.toggle('hide', v !== 'before');
|
||||
after.classList.toggle('hide', v !== 'after');
|
||||
hint.textContent = v === 'before' ? '红/橙标记 = 缺陷位置' : '绿色标记 = 改版要点';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+13
@@ -2865,6 +2865,18 @@ dependencies = [
|
||||
"unicode-segmentation",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "keyring"
|
||||
version = "3.6.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "eebcc3aff044e5944a8fbaf69eb277d11986064cba30c468730e8b9909fb551c"
|
||||
dependencies = [
|
||||
"byteorder",
|
||||
"log",
|
||||
"windows-sys 0.60.2",
|
||||
"zeroize",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "kqueue"
|
||||
version = "1.2.0"
|
||||
@@ -6149,6 +6161,7 @@ dependencies = [
|
||||
"futures-util",
|
||||
"hmac",
|
||||
"image",
|
||||
"keyring",
|
||||
"librqbit",
|
||||
"md-5",
|
||||
"notify",
|
||||
|
||||
@@ -60,6 +60,8 @@ windows-capture = "2.0.1"
|
||||
|
||||
[target.'cfg(windows)'.dependencies]
|
||||
winreg = "0.52"
|
||||
# WebDAV 凭据加密存储（Windows 凭据管理器，DPAPI 保护，不落明文）
|
||||
keyring = { version = "3", features = ["windows-native"] }
|
||||
raw-window-handle = "0.6"
|
||||
windows-sys = { version = "0.52", features = [
|
||||
"Win32_Networking_WinInet",
|
||||
|
||||
+13
-14
@@ -44,14 +44,13 @@ use monitor_kernel::{
|
||||
};
|
||||
use music::{
|
||||
feiniu_activate_connection, feiniu_cache_clear, feiniu_cache_fetch, feiniu_cache_status,
|
||||
feiniu_delete_connection, feiniu_fnconnect_resolve, feiniu_fnos_delete, feiniu_fnos_list,
|
||||
feiniu_fnos_login, feiniu_fnos_logout, feiniu_fnos_status, feiniu_fnos_upload,
|
||||
feiniu_get_config, feiniu_list_connections, feiniu_list_tracks, feiniu_login, feiniu_logout,
|
||||
feiniu_lyric, feiniu_media_prefix, feiniu_save_connection, feiniu_scan_local,
|
||||
feiniu_test_connection, music_cancel_runtime_install, music_download, music_download_cancel,
|
||||
music_env_status, music_get_settings, music_get_sources, music_install_runtime,
|
||||
music_parse_playlist, music_ping, music_resolve, music_save_settings, music_search,
|
||||
music_stop_bridge, MusicManager,
|
||||
feiniu_delete_connection, feiniu_delete_local, feiniu_fnconnect_resolve, feiniu_get_config,
|
||||
feiniu_list_connections, feiniu_list_tracks, feiniu_login, feiniu_logout, feiniu_lyric,
|
||||
feiniu_media_prefix, feiniu_save_connection, feiniu_scan_local, feiniu_test_connection,
|
||||
music_cancel_runtime_install, music_download, music_download_cancel, music_env_status,
|
||||
music_get_settings, music_get_sources, music_install_runtime, music_parse_playlist, music_ping,
|
||||
music_resolve, music_save_settings, music_search, music_stop_bridge, webdav_delete,
|
||||
webdav_get_secret, webdav_save_secret, webdav_test, webdav_upload, MusicManager,
|
||||
};
|
||||
use network_monitor::network_status;
|
||||
use osd_window::{
|
||||
@@ -287,13 +286,13 @@ pub fn run() {
|
||||
feiniu_cache_status,
|
||||
feiniu_cache_clear,
|
||||
feiniu_cache_fetch,
|
||||
feiniu_fnos_login,
|
||||
feiniu_fnos_logout,
|
||||
feiniu_fnos_status,
|
||||
feiniu_fnos_upload,
|
||||
feiniu_fnos_delete,
|
||||
feiniu_fnos_list,
|
||||
feiniu_fnconnect_resolve,
|
||||
webdav_test,
|
||||
webdav_upload,
|
||||
webdav_delete,
|
||||
webdav_get_secret,
|
||||
webdav_save_secret,
|
||||
feiniu_delete_local,
|
||||
network_status,
|
||||
osd_apply_overlay_style,
|
||||
osd_begin_drag,
|
||||
|
||||
+109
-79
@@ -437,102 +437,132 @@ fn new_conn_id() -> String {
|
||||
format!("c{n:x}")
|
||||
}
|
||||
|
||||
// ============ P6：下载到飞牛 + 曲库增删（fnOS 文件服务） ============
|
||||
// ============ P6：下载到飞牛 + 曲库增删（WebDAV，无状态） ============
|
||||
|
||||
/// fnOS 登录：为某连接建立 NAS 文件服务会话（WS + RSA/AES）。成功后不持久化凭据。
|
||||
/// 测试 WebDAV 连接与目标目录是否可达。
|
||||
#[tauri::command]
|
||||
pub async fn feiniu_fnos_login(
|
||||
state: State<'_, MusicManager>,
|
||||
connection_id: String,
|
||||
username: String,
|
||||
password: String,
|
||||
#[specta::specta]
|
||||
pub async fn webdav_test(
|
||||
config: crate::music::feiniu::webdav::WebDavConfig,
|
||||
dir: String,
|
||||
) -> Result<serde_json::Value, String> {
|
||||
let settings = state.load_settings();
|
||||
let conn = settings
|
||||
.feiniu_connections
|
||||
.iter()
|
||||
.find(|c| c.id == connection_id)
|
||||
.cloned()
|
||||
.ok_or_else(|| "连接不存在".to_string())?;
|
||||
state
|
||||
.feiniu
|
||||
.fnos_login(&connection_id, &conn.base_url, &username, &password)
|
||||
.await?;
|
||||
Ok(json!({ "ok": true }))
|
||||
let msg = crate::music::feiniu::webdav::test(&config, &dir).await?;
|
||||
Ok(json!({ "ok": true, "message": msg }))
|
||||
}
|
||||
|
||||
/// 登出 fnOS 文件服务会话。
|
||||
/// 上传本地文件到 WebDAV 目标目录（流式，不整载内存）。
|
||||
#[tauri::command]
|
||||
pub fn feiniu_fnos_logout(
|
||||
state: State<'_, MusicManager>,
|
||||
connection_id: String,
|
||||
) -> Result<serde_json::Value, String> {
|
||||
state.feiniu.fnos_logout(&connection_id);
|
||||
Ok(json!({ "ok": true }))
|
||||
}
|
||||
|
||||
/// fnOS 文件服务登录状态：{ loggedIn }（按连接）。
|
||||
#[tauri::command]
|
||||
pub fn feiniu_fnos_status(
|
||||
state: State<'_, MusicManager>,
|
||||
connection_id: String,
|
||||
) -> Result<serde_json::Value, String> {
|
||||
Ok(json!({ "loggedIn": state.feiniu.fnos_logged_in(&connection_id) }))
|
||||
}
|
||||
|
||||
/// 上传本地文件到 NAS（激活连接的 fnOS 会话）。返回上传文件名。
|
||||
#[tauri::command]
|
||||
pub async fn feiniu_fnos_upload(
|
||||
state: State<'_, MusicManager>,
|
||||
#[specta::specta]
|
||||
pub async fn webdav_upload(
|
||||
config: crate::music::feiniu::webdav::WebDavConfig,
|
||||
local_path: String,
|
||||
nas_path: String,
|
||||
remote_path: String,
|
||||
) -> Result<serde_json::Value, String> {
|
||||
let settings = state.load_settings();
|
||||
let conn = settings
|
||||
.feiniu_connections
|
||||
.iter()
|
||||
.find(|c| c.id == settings.feiniu_active_id)
|
||||
.cloned()
|
||||
.ok_or_else(|| "没有激活连接".to_string())?;
|
||||
let name = state
|
||||
.feiniu
|
||||
.fnos_upload(&conn.id, std::path::Path::new(&local_path), &nas_path)
|
||||
.await?;
|
||||
let name = crate::music::feiniu::webdav::upload_file(
|
||||
&config,
|
||||
std::path::Path::new(&local_path),
|
||||
&remote_path,
|
||||
)
|
||||
.await?;
|
||||
Ok(json!({ "ok": true, "name": name }))
|
||||
}
|
||||
|
||||
/// 删除 NAS 文件（激活连接的 fnOS 会话）。
|
||||
/// 删除 WebDAV 远程文件（404 视为已删除）。
|
||||
#[tauri::command]
|
||||
pub async fn feiniu_fnos_delete(
|
||||
state: State<'_, MusicManager>,
|
||||
nas_path: String,
|
||||
#[specta::specta]
|
||||
pub async fn webdav_delete(
|
||||
config: crate::music::feiniu::webdav::WebDavConfig,
|
||||
remote_path: String,
|
||||
) -> Result<serde_json::Value, String> {
|
||||
let settings = state.load_settings();
|
||||
let conn = settings
|
||||
.feiniu_connections
|
||||
.iter()
|
||||
.find(|c| c.id == settings.feiniu_active_id)
|
||||
.cloned()
|
||||
.ok_or_else(|| "没有激活连接".to_string())?;
|
||||
state.feiniu.fnos_delete(&conn.id, &nas_path).await?;
|
||||
crate::music::feiniu::webdav::delete(&config, &remote_path).await?;
|
||||
Ok(json!({ "ok": true }))
|
||||
}
|
||||
|
||||
/// 列出 NAS 目录（激活连接的 fnOS 会话）。
|
||||
// ============ WebDAV 凭据加密存储（Windows 凭据管理器，DPAPI 保护） ============
|
||||
|
||||
/// 凭据以 JSON blob 存入系统凭据管理器：{"username","password"}。
|
||||
/// 明文仅存在于内存与系统凭据库，绝不写回 localStorage / 配置文件。
|
||||
#[cfg(windows)]
|
||||
const WEBDAV_SECRET_SERVICE: &str = "Thing";
|
||||
#[cfg(windows)]
|
||||
const WEBDAV_SECRET_USER: &str = "webdav-credentials";
|
||||
|
||||
#[cfg(windows)]
|
||||
fn webdav_secret_entry() -> Result<keyring::Entry, String> {
|
||||
keyring::Entry::new(WEBDAV_SECRET_SERVICE, WEBDAV_SECRET_USER)
|
||||
.map_err(|e| format!("无法访问系统凭据管理器: {e}"))
|
||||
}
|
||||
|
||||
#[cfg(windows)]
|
||||
fn webdav_secret_read() -> Result<Option<serde_json::Value>, String> {
|
||||
let entry = webdav_secret_entry()?;
|
||||
match entry.get_password() {
|
||||
Ok(blob) => serde_json::from_str(&blob)
|
||||
.map(Some)
|
||||
.map_err(|e| format!("凭据数据损坏: {e}")),
|
||||
// 未配置过凭据不算错误
|
||||
Err(keyring::Error::NoEntry) => Ok(None),
|
||||
Err(e) => Err(format!("读取凭据失败: {e}")),
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(windows)]
|
||||
fn webdav_secret_write(username: &str, password: &str) -> Result<(), String> {
|
||||
let blob = json!({ "username": username, "password": password }).to_string();
|
||||
let entry = webdav_secret_entry()?;
|
||||
entry.set_password(&blob).map_err(|e| format!("保存凭据失败: {e}"))
|
||||
}
|
||||
|
||||
/// 读取 WebDAV 凭据。未配置时 username/password 为 null。
|
||||
#[tauri::command]
|
||||
pub async fn feiniu_fnos_list(
|
||||
state: State<'_, MusicManager>,
|
||||
path: String,
|
||||
) -> Result<serde_json::Value, String> {
|
||||
let settings = state.load_settings();
|
||||
let conn = settings
|
||||
.feiniu_connections
|
||||
.iter()
|
||||
.find(|c| c.id == settings.feiniu_active_id)
|
||||
.cloned()
|
||||
.ok_or_else(|| "没有激活连接".to_string())?;
|
||||
let v = state.feiniu.fnos_list(&conn.id, &path).await?;
|
||||
Ok(v)
|
||||
pub fn webdav_get_secret() -> Result<serde_json::Value, String> {
|
||||
#[cfg(windows)]
|
||||
{
|
||||
Ok(webdav_secret_read()?.unwrap_or_else(|| json!({ "username": null, "password": null })))
|
||||
}
|
||||
#[cfg(not(windows))]
|
||||
{
|
||||
Ok(json!({ "username": null, "password": null }))
|
||||
}
|
||||
}
|
||||
|
||||
/// 保存 WebDAV 凭据（账号 + 密码整体覆盖）。
|
||||
#[tauri::command]
|
||||
pub fn webdav_save_secret(username: String, password: String) -> Result<serde_json::Value, String> {
|
||||
#[cfg(windows)]
|
||||
{
|
||||
webdav_secret_write(&username, &password)?;
|
||||
}
|
||||
#[cfg(not(windows))]
|
||||
{
|
||||
let _ = (&username, &password);
|
||||
}
|
||||
Ok(json!({ "ok": true }))
|
||||
}
|
||||
|
||||
/// 删除本地媒体文件（「下载到飞牛」落地即传流程的收尾）。
|
||||
/// 仅允许音频 / 歌词 / 封面扩展名，且拒绝目录——防止前端误删任意文件。
|
||||
#[tauri::command]
|
||||
#[specta::specta]
|
||||
pub fn feiniu_delete_local(path: String) -> Result<serde_json::Value, String> {
|
||||
const ALLOWED: [&str; 13] = [
|
||||
"mp3", "flac", "wav", "m4a", "aac", "ogg", "ape", "wma", "lrc", "jpg", "jpeg", "png", "webp",
|
||||
];
|
||||
let p = std::path::Path::new(&path);
|
||||
let ext_ok = p
|
||||
.extension()
|
||||
.and_then(|e| e.to_str())
|
||||
.map(|e| ALLOWED.contains(&e.to_lowercase().as_str()))
|
||||
.unwrap_or(false);
|
||||
if !ext_ok {
|
||||
return Err(format!("拒绝删除非媒体文件：{path}"));
|
||||
}
|
||||
let meta = std::fs::metadata(p).map_err(|e| format!("文件不存在: {e}"))?;
|
||||
if meta.is_dir() {
|
||||
return Err("拒绝删除目录".to_string());
|
||||
}
|
||||
std::fs::remove_file(p).map_err(|e| format!("删除失败: {e}"))?;
|
||||
Ok(json!({ "ok": true }))
|
||||
}
|
||||
|
||||
// ============ P7：FnConnect 远程连接解析 ============
|
||||
|
||||
@@ -1,410 +0,0 @@
|
||||
//! fnOS 文件服务客户端（WebSocket 协议 + HTTP 上传）。
|
||||
//!
|
||||
//! 协议参照 `FNOSP/fnnas-api`：
|
||||
//! 1. 连接 `ws://{host}:{port}/websocket?type=main`
|
||||
//! 2. `util.crypto.getRSAPub` 取 RSA 公钥与 si
|
||||
//! 3. `user.login`：随机 AES key/iv，AES-CBC 加密登录体 + RSA 加密 key，发 `{"req":"encrypted",...}`
|
||||
//! 4. 之后每个请求 `{base64(HMAC-SHA256(json))}{json}` 签名
|
||||
//! 5. 上传：WS `file.checkUpload` → HTTP `POST /upload`（Trim-Token/Trim-Path/Trim-Sign）
|
||||
//! 6. 删除：WS `file.rm`
|
||||
//!
|
||||
//! 仅支持 http://（ws://）直连；https/frp 的文件上传留待后续。
|
||||
|
||||
use std::collections::HashMap;
|
||||
use std::sync::atomic::{AtomicBool, Ordering};
|
||||
use std::sync::{Arc, Mutex};
|
||||
use std::time::{Duration, SystemTime, UNIX_EPOCH};
|
||||
|
||||
use aes::cipher::{BlockDecrypt, BlockEncrypt, KeyInit};
|
||||
use aes::Aes256;
|
||||
use base64::Engine;
|
||||
use futures_util::{SinkExt, StreamExt};
|
||||
use hmac::{Hmac, Mac};
|
||||
use rand::RngCore;
|
||||
use rsa::pkcs8::DecodePublicKey;
|
||||
use rsa::{Pkcs1v15Encrypt, RsaPublicKey};
|
||||
use serde_json::{json, Value};
|
||||
use sha2::Sha256;
|
||||
use tokio_tungstenite::tungstenite::Message;
|
||||
use tokio_tungstenite::{connect_async, MaybeTlsStream, WebSocketStream};
|
||||
|
||||
type HmacSha256 = Hmac<Sha256>;
|
||||
type WsStream = WebSocketStream<MaybeTlsStream<tokio::net::TcpStream>>;
|
||||
|
||||
const KEY_CHARS: &[u8] = b"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
|
||||
fn random_key() -> String {
|
||||
let mut rng = rand::thread_rng();
|
||||
(0..32)
|
||||
.map(|_| {
|
||||
let i = rng.next_u64() as usize % KEY_CHARS.len();
|
||||
KEY_CHARS[i] as char
|
||||
})
|
||||
.collect()
|
||||
}
|
||||
|
||||
fn random_iv() -> [u8; 16] {
|
||||
let mut iv = [0u8; 16];
|
||||
rand::thread_rng().fill_bytes(&mut iv);
|
||||
iv
|
||||
}
|
||||
|
||||
/// 手动 AES-256-CBC 加密（避免 cbc crate trait 兼容问题），PKCS7 填充，返回 base64。
|
||||
fn aes_cbc_encrypt_b64(data: &[u8], key: &[u8; 32], iv: &[u8; 16]) -> String {
|
||||
let cipher = Aes256::new(key.into());
|
||||
let mut padded = data.to_vec();
|
||||
let pad_len = 16 - (padded.len() % 16);
|
||||
padded.extend(std::iter::repeat(pad_len as u8).take(pad_len));
|
||||
let mut out = Vec::with_capacity(padded.len());
|
||||
let mut prev = *iv;
|
||||
for chunk in padded.chunks(16) {
|
||||
let mut block = [0u8; 16];
|
||||
for i in 0..16 {
|
||||
block[i] = chunk[i] ^ prev[i];
|
||||
}
|
||||
cipher.encrypt_block((&mut block).into());
|
||||
out.extend_from_slice(&block);
|
||||
prev = block;
|
||||
}
|
||||
base64::engine::general_purpose::STANDARD.encode(out)
|
||||
}
|
||||
|
||||
/// AES-256-CBC 解密 → 返回 base64(明文)（对齐 fnnas-api 的 aes_decrypt）。
|
||||
fn aes_cbc_decrypt_b64(ciphertext_b64: &str, key: &[u8; 32], iv: &[u8; 16]) -> Result<String, String> {
|
||||
let ct = base64::engine::general_purpose::STANDARD
|
||||
.decode(ciphertext_b64)
|
||||
.map_err(|e| format!("AES 密文解码失败: {e}"))?;
|
||||
let cipher = Aes256::new(key.into());
|
||||
let mut prev = *iv;
|
||||
let mut plain = Vec::with_capacity(ct.len());
|
||||
for chunk in ct.chunks(16) {
|
||||
let mut block = [0u8; 16];
|
||||
block.copy_from_slice(chunk);
|
||||
let enc = block;
|
||||
cipher.decrypt_block((&mut block).into());
|
||||
for i in 0..16 {
|
||||
plain.push(block[i] ^ prev[i]);
|
||||
}
|
||||
prev = enc;
|
||||
}
|
||||
// 去 PKCS7 填充
|
||||
if let Some(&last) = plain.last() {
|
||||
let n = last as usize;
|
||||
if n > 0 && n <= 16 && plain.len() >= n && plain[plain.len() - n..].iter().all(|&b| b == last) {
|
||||
plain.truncate(plain.len() - n);
|
||||
}
|
||||
}
|
||||
Ok(base64::engine::general_purpose::STANDARD.encode(plain))
|
||||
}
|
||||
|
||||
fn rsa_encrypt_b64(pub_pem: &str, data: &str) -> Result<String, String> {
|
||||
let key = RsaPublicKey::from_public_key_pem(pub_pem)
|
||||
.map_err(|e| format!("解析 RSA 公钥失败: {e}"))?;
|
||||
let mut rng = rand::thread_rng();
|
||||
let ct = key
|
||||
.encrypt(&mut rng, Pkcs1v15Encrypt, data.as_bytes())
|
||||
.map_err(|e| format!("RSA 加密失败: {e}"))?;
|
||||
Ok(base64::engine::general_purpose::STANDARD.encode(ct))
|
||||
}
|
||||
|
||||
fn hmac_sha256_b64(key: &[u8], data: &str) -> String {
|
||||
let mut mac = <HmacSha256 as Mac>::new_from_slice(key).expect("hmac key");
|
||||
mac.update(data.as_bytes());
|
||||
base64::engine::general_purpose::STANDARD.encode(mac.finalize().into_bytes())
|
||||
}
|
||||
|
||||
fn reqid() -> String {
|
||||
let n = SystemTime::now()
|
||||
.duration_since(UNIX_EPOCH)
|
||||
.map(|d| d.as_millis())
|
||||
.unwrap_or(0);
|
||||
format!("0000000000000000{n:x}")
|
||||
}
|
||||
|
||||
fn ws_url(base_url: &str) -> String {
|
||||
let u = base_url.trim_end_matches('/');
|
||||
u.replacen("http://", "ws://", 1) + "/websocket?type=main"
|
||||
}
|
||||
|
||||
/// 一次 fnOS 会话（登录后复用；命令层按 connection 存于 Feiniu）。
|
||||
pub struct FnOsSession {
|
||||
pub base_url: String,
|
||||
token: Mutex<String>,
|
||||
sign_key: Mutex<Vec<u8>>,
|
||||
ws: Arc<tokio::sync::Mutex<Option<WsStream>>>,
|
||||
pending: Arc<Mutex<HashMap<String, tokio::sync::oneshot::Sender<Value>>>>,
|
||||
reader: Arc<AtomicBool>,
|
||||
}
|
||||
|
||||
impl FnOsSession {
|
||||
/// 建立会话（新 WS 连接 + 登录）。
|
||||
pub async fn connect(base_url: &str, username: &str, password: &str) -> Result<Self, String> {
|
||||
let url = ws_url(base_url);
|
||||
let (ws, _) = connect_async(&url)
|
||||
.await
|
||||
.map_err(|e| format!("连接 fnOS WebSocket 失败: {e}"))?;
|
||||
let session = Self {
|
||||
base_url: base_url.trim_end_matches('/').to_string(),
|
||||
token: Mutex::new(String::new()),
|
||||
sign_key: Mutex::new(Vec::new()),
|
||||
ws: Arc::new(tokio::sync::Mutex::new(Some(ws))),
|
||||
pending: Arc::new(Mutex::new(HashMap::new())),
|
||||
reader: Arc::new(AtomicBool::new(false)),
|
||||
};
|
||||
session.login(username, password).await?;
|
||||
Ok(session)
|
||||
}
|
||||
|
||||
pub fn token(&self) -> String {
|
||||
self.token.lock().unwrap_or_else(|e| e.into_inner()).clone()
|
||||
}
|
||||
|
||||
fn ensure_reader(&self) {
|
||||
if self.reader.swap(true, Ordering::SeqCst) {
|
||||
return;
|
||||
}
|
||||
let ws = self.ws.clone();
|
||||
let pending = self.pending.clone();
|
||||
tokio::spawn(async move {
|
||||
loop {
|
||||
let msg = {
|
||||
let mut guard = ws.lock().await;
|
||||
let Some(stream) = guard.as_mut() else { break };
|
||||
match stream.next().await {
|
||||
Some(Ok(m)) => m,
|
||||
_ => break,
|
||||
}
|
||||
};
|
||||
if let Message::Text(text) = msg {
|
||||
if let Ok(v) = serde_json::from_str::<Value>(&text) {
|
||||
if let Some(rid) = v["reqid"].as_str() {
|
||||
if let Some(sender) =
|
||||
pending.lock().unwrap_or_else(|e| e.into_inner()).remove(rid)
|
||||
{
|
||||
let _ = sender.send(v);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let pendings: Vec<_> = pending
|
||||
.lock()
|
||||
.unwrap_or_else(|e| e.into_inner())
|
||||
.drain()
|
||||
.map(|(_, s)| s)
|
||||
.collect();
|
||||
for s in pendings {
|
||||
let _ = s.send(Value::Null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/// 发送签名请求并等待响应。
|
||||
async fn request(&self, req: &str, data: Value) -> Result<Value, String> {
|
||||
self.ensure_reader();
|
||||
let rid = reqid();
|
||||
let mut body = json!({ "req": req, "reqid": rid });
|
||||
if let Value::Object(map) = data {
|
||||
for (k, v) in map {
|
||||
body[k] = v;
|
||||
}
|
||||
}
|
||||
let json_str = serde_json::to_string(&body).map_err(|e| e.to_string())?;
|
||||
let sign_key = self.sign_key.lock().unwrap_or_else(|e| e.into_inner()).clone();
|
||||
let message = if sign_key.is_empty() {
|
||||
json_str.clone()
|
||||
} else {
|
||||
hmac_sha256_b64(&sign_key, &json_str) + &json_str
|
||||
};
|
||||
|
||||
let (tx, rx) = tokio::sync::oneshot::channel::<Value>();
|
||||
self.pending
|
||||
.lock()
|
||||
.unwrap_or_else(|e| e.into_inner())
|
||||
.insert(rid.clone(), tx);
|
||||
{
|
||||
let mut guard = self.ws.lock().await;
|
||||
let stream = guard
|
||||
.as_mut()
|
||||
.ok_or_else(|| "fnOS 连接已断开".to_string())?;
|
||||
stream
|
||||
.send(Message::Text(message.into()))
|
||||
.await
|
||||
.map_err(|e| format!("发送请求失败: {e}"))?;
|
||||
}
|
||||
|
||||
let resp = tokio::time::timeout(Duration::from_secs(10), rx)
|
||||
.await
|
||||
.map_err(|_| "fnOS 请求超时".to_string())?
|
||||
.map_err(|_| "fnOS 请求通道关闭".to_string())?;
|
||||
if resp.is_null() {
|
||||
return Err("fnOS 连接已断开".to_string());
|
||||
}
|
||||
if let Some(errno) = resp["errno"].as_i64() {
|
||||
if errno != 0 {
|
||||
return Err(format!("fnOS 请求失败（errno {errno}）"));
|
||||
}
|
||||
}
|
||||
Ok(resp)
|
||||
}
|
||||
|
||||
async fn login(&self, username: &str, password: &str) -> Result<(), String> {
|
||||
let resp = self.request("util.crypto.getRSAPub", Value::Null).await?;
|
||||
let pub_pem = resp["pub"].as_str().ok_or("getRSAPub 未返回 pub")?.to_string();
|
||||
let si = resp["si"].as_str().unwrap_or("").to_string();
|
||||
|
||||
let key = random_key();
|
||||
let iv = random_iv();
|
||||
let login_body = json!({
|
||||
"user": username,
|
||||
"password": password,
|
||||
"deviceType": "Browser",
|
||||
"deviceName": "Thing Client",
|
||||
"stay": false,
|
||||
"si": si,
|
||||
});
|
||||
let json_str = serde_json::to_string(&login_body).map_err(|e| e.to_string())?;
|
||||
let key_bytes: [u8; 32] = key
|
||||
.as_bytes()
|
||||
.try_into()
|
||||
.map_err(|_| "AES 密钥长度错误".to_string())?;
|
||||
let aes_b64 = aes_cbc_encrypt_b64(json_str.as_bytes(), &key_bytes, &iv);
|
||||
let rsa_b64 = rsa_encrypt_b64(&pub_pem, &key)?;
|
||||
let enc = json!({
|
||||
"req": "encrypted",
|
||||
"iv": base64::engine::general_purpose::STANDARD.encode(iv),
|
||||
"rsa": rsa_b64,
|
||||
"aes": aes_b64,
|
||||
});
|
||||
let resp = self.request("encrypted", enc).await?;
|
||||
let token = resp["token"].as_str().ok_or("fnOS 登录未返回 token")?.to_string();
|
||||
let secret = resp["secret"].as_str().ok_or("fnOS 登录未返回 secret")?.to_string();
|
||||
let secret_dec = aes_cbc_decrypt_b64(&secret, &key_bytes, &iv)?;
|
||||
let sign_key = base64::engine::general_purpose::STANDARD
|
||||
.decode(&secret_dec)
|
||||
.map_err(|e| format!("sign_key base64 解码失败: {e}"))?;
|
||||
*self.token.lock().unwrap_or_else(|e| e.into_inner()) = token;
|
||||
*self.sign_key.lock().unwrap_or_else(|e| e.into_inner()) = sign_key;
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// `file.checkUpload`：返回 uploadName。
|
||||
pub async fn check_upload(&self, nas_path: &str, size: u64, overwrite: u32) -> Result<String, String> {
|
||||
let resp = self
|
||||
.request(
|
||||
"file.checkUpload",
|
||||
json!({ "size": size, "path": nas_path, "overwrite": overwrite }),
|
||||
)
|
||||
.await?;
|
||||
resp["uploadName"]
|
||||
.as_str()
|
||||
.map(|s| s.to_string())
|
||||
.ok_or_else(|| "checkUpload 未返回 uploadName".to_string())
|
||||
}
|
||||
|
||||
/// `file.rm`：删除 NAS 文件（移入回收站）。
|
||||
pub async fn delete_file(&self, nas_path: &str) -> Result<(), String> {
|
||||
let name = nas_path.rsplit('/').next().unwrap_or(nas_path).to_string();
|
||||
self.request(
|
||||
"file.rm",
|
||||
json!({
|
||||
"files": [nas_path],
|
||||
"moveToTrashbin": true,
|
||||
"details": { "name": name, "count": 1, "dir": 0 },
|
||||
}),
|
||||
)
|
||||
.await?;
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// `file.ls`：列出目录。
|
||||
pub async fn list(&self, path: &str) -> Result<Value, String> {
|
||||
self.request("file.ls", json!({ "path": path })).await
|
||||
}
|
||||
}
|
||||
|
||||
/// HTTP 上传到 NAS（需要已登录的 session）。返回上传后的文件名。
|
||||
pub async fn upload_file(
|
||||
session: &FnOsSession,
|
||||
local_path: &std::path::Path,
|
||||
nas_path: &str,
|
||||
overwrite: u32,
|
||||
) -> Result<String, String> {
|
||||
let size = std::fs::metadata(local_path)
|
||||
.map_err(|e| format!("读取本地文件失败: {e}"))?
|
||||
.len();
|
||||
let upload_name = session.check_upload(nas_path, size, overwrite).await?;
|
||||
let parent = nas_path.rsplit('/').nth(1).unwrap_or("").to_string();
|
||||
let trim_path = if parent.is_empty() {
|
||||
upload_name.clone()
|
||||
} else {
|
||||
format!("{parent}/{upload_name}")
|
||||
};
|
||||
let mtim = SystemTime::now()
|
||||
.duration_since(UNIX_EPOCH)
|
||||
.map(|d| d.as_secs())
|
||||
.unwrap_or(0)
|
||||
.to_string();
|
||||
let sign_key = session.sign_key.lock().unwrap_or_else(|e| e.into_inner()).clone();
|
||||
let trim_sign = hmac_sha256_b64(&sign_key, &trim_path);
|
||||
let token = session.token();
|
||||
|
||||
let file_name = local_path
|
||||
.file_name()
|
||||
.and_then(|n| n.to_str())
|
||||
.unwrap_or("music.bin")
|
||||
.to_string();
|
||||
let bytes = std::fs::read(local_path).map_err(|e| format!("读取本地文件失败: {e}"))?;
|
||||
let mime = guess_mime(local_path);
|
||||
let form = reqwest::multipart::Form::new().part(
|
||||
"trim-upload-file",
|
||||
reqwest::multipart::Part::bytes(bytes)
|
||||
.file_name(file_name)
|
||||
.mime_str(mime)
|
||||
.map_err(|e| e.to_string())?,
|
||||
);
|
||||
|
||||
let client = reqwest::Client::builder()
|
||||
.no_proxy()
|
||||
.timeout(Duration::from_secs(300))
|
||||
.build()
|
||||
.map_err(|e| e.to_string())?;
|
||||
let resp = client
|
||||
.post(format!("{}/upload", session.base_url))
|
||||
.header("Trim-Token", token)
|
||||
.header("Trim-Path", trim_path)
|
||||
.header("Trim-Sign", trim_sign)
|
||||
.header("Trim-Mtim", mtim)
|
||||
.header("Trim-Overwrite", overwrite.to_string())
|
||||
.header("Referer", format!("{}/", session.base_url))
|
||||
.header("User-Agent", "Thing/1.0")
|
||||
.header("Accept", "application/json, text/plain, */*")
|
||||
.multipart(form)
|
||||
.send()
|
||||
.await
|
||||
.map_err(|e| format!("上传请求失败: {e}"))?;
|
||||
let status = resp.status();
|
||||
if !status.is_success() {
|
||||
let body = resp.text().await.unwrap_or_default();
|
||||
return Err(format!("上传失败（HTTP {status}）: {body}"));
|
||||
}
|
||||
Ok(upload_name)
|
||||
}
|
||||
|
||||
fn guess_mime(p: &std::path::Path) -> &'static str {
|
||||
match p
|
||||
.extension()
|
||||
.and_then(|e| e.to_str())
|
||||
.map(|e| e.to_lowercase())
|
||||
.as_deref()
|
||||
{
|
||||
Some("mp3") => "audio/mpeg",
|
||||
Some("flac") => "audio/flac",
|
||||
Some("wav") => "audio/wav",
|
||||
Some("m4a") => "audio/mp4",
|
||||
Some("aac") => "audio/aac",
|
||||
Some("ogg") => "audio/ogg",
|
||||
Some("ape") => "audio/x-ape",
|
||||
_ => "application/octet-stream",
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,6 @@
|
||||
//! 对照 FeiNiuMusic(Flutter) `api_client.dart` 的第三方纯前端实现翻译。
|
||||
//! 所有对 NAS 的 HTTP 请求在本模块收敛（页面/命令层不直接发请求）。
|
||||
|
||||
use std::collections::HashMap;
|
||||
use std::path::Path;
|
||||
use std::sync::{Arc, Mutex};
|
||||
use std::time::Duration;
|
||||
@@ -21,12 +20,11 @@ pub use conn::normalize_base_url;
|
||||
mod cache;
|
||||
mod conn;
|
||||
mod fnconnect;
|
||||
mod fnos;
|
||||
pub mod proxy;
|
||||
pub mod webdav;
|
||||
|
||||
pub use cache::CacheManager;
|
||||
pub use fnconnect::{extract_fn_id, resolve_base_url};
|
||||
pub use fnos::FnOsSession;
|
||||
|
||||
use conn::{generate_device_id, sha256_hex};
|
||||
use proxy::{ProxyCfg, ProxyShared};
|
||||
@@ -90,8 +88,6 @@ pub struct Feiniu {
|
||||
conn: Mutex<Conn>,
|
||||
proxy: Mutex<Option<(u16, ProxyShared)>>,
|
||||
cache: CacheManager,
|
||||
/// fnOS 文件服务会话：connection id → 会话
|
||||
fnos_sessions: Mutex<HashMap<String, Arc<FnOsSession>>>,
|
||||
}
|
||||
|
||||
impl Default for Feiniu {
|
||||
@@ -108,7 +104,6 @@ impl Default for Feiniu {
|
||||
}),
|
||||
proxy: Mutex::new(None),
|
||||
cache: CacheManager::new(Path::new("placeholder")), // 由 set_cache_root 重建
|
||||
fnos_sessions: Mutex::new(HashMap::new()),
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -435,76 +430,8 @@ impl Feiniu {
|
||||
Ok(self.cache.hit(guid))
|
||||
}
|
||||
|
||||
// ===== fnOS 文件服务（P6：上传/删除） =====
|
||||
|
||||
/// fnOS 登录：为指定连接建立文件服务会话。
|
||||
pub async fn fnos_login(
|
||||
&self,
|
||||
connection_id: &str,
|
||||
base_url: &str,
|
||||
username: &str,
|
||||
password: &str,
|
||||
) -> Result<(), String> {
|
||||
let session = Arc::new(FnOsSession::connect(base_url, username, password).await?);
|
||||
if let Ok(mut m) = self.fnos_sessions.lock() {
|
||||
m.insert(connection_id.to_string(), session);
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
pub fn fnos_logout(&self, connection_id: &str) {
|
||||
if let Ok(mut m) = self.fnos_sessions.lock() {
|
||||
m.remove(connection_id);
|
||||
}
|
||||
}
|
||||
|
||||
pub fn fnos_logged_in(&self, connection_id: &str) -> bool {
|
||||
self.fnos_sessions
|
||||
.lock()
|
||||
.map(|m| m.contains_key(connection_id))
|
||||
.unwrap_or(false)
|
||||
}
|
||||
|
||||
/// 上传本地文件到 NAS（走 fnOS 会话；会话缺失返回 Err）。
|
||||
pub async fn fnos_upload(
|
||||
&self,
|
||||
connection_id: &str,
|
||||
local_path: &std::path::Path,
|
||||
nas_path: &str,
|
||||
) -> Result<String, String> {
|
||||
let session = self
|
||||
.fnos_sessions
|
||||
.lock()
|
||||
.map(|m| m.get(connection_id).cloned())
|
||||
.ok()
|
||||
.flatten()
|
||||
.ok_or_else(|| "请先登录 NAS 文件服务（设置 → 连接 → fnOS 登录）")?;
|
||||
fnos::upload_file(&session, local_path, nas_path, 2).await
|
||||
}
|
||||
|
||||
/// 删除 NAS 文件。
|
||||
pub async fn fnos_delete(&self, connection_id: &str, nas_path: &str) -> Result<(), String> {
|
||||
let session = self
|
||||
.fnos_sessions
|
||||
.lock()
|
||||
.map(|m| m.get(connection_id).cloned())
|
||||
.ok()
|
||||
.flatten()
|
||||
.ok_or_else(|| "请先登录 NAS 文件服务")?;
|
||||
session.delete_file(nas_path).await
|
||||
}
|
||||
|
||||
/// 列出 NAS 目录。
|
||||
pub async fn fnos_list(&self, connection_id: &str, path: &str) -> Result<Value, String> {
|
||||
let session = self
|
||||
.fnos_sessions
|
||||
.lock()
|
||||
.map(|m| m.get(connection_id).cloned())
|
||||
.ok()
|
||||
.flatten()
|
||||
.ok_or_else(|| "请先登录 NAS 文件服务")?;
|
||||
session.list(path).await
|
||||
}
|
||||
// ===== WebDAV 传输（下载到飞牛 / 曲库增删）=====
|
||||
// 无状态：配置由前端每次调用传入，实现在 webdav 模块，命令层直接调用。
|
||||
|
||||
async fn ensure_proxy(&self) -> Result<u16, String> {
|
||||
if let Ok(g) = self.proxy.lock() {
|
||||
|
||||
@@ -0,0 +1,217 @@
|
||||
//! WebDAV 客户端（无状态）——用于把音乐传输到 fnOS NAS 的曲库目录。
|
||||
//!
|
||||
//! 选择 WebDAV 而非 SMB/FTP/NFS 的原因：
|
||||
//! - 纯 HTTP 语义，`reqwest` 即可实现，无原生依赖（SMB 在 Rust 侧生态差）；
|
||||
//! - **无会话**：Basic 认证随每个请求携带，没有"重启后要重新登录"的问题；
|
||||
//! - fnOS 原生支持：系统设置 → 文件服务 → WebDAV（HTTP 5005 / HTTPS 5006）。
|
||||
//!
|
||||
//! fnOS 侧需要的设置（作为 UI 提示展示）：
|
||||
//! 1. 开启 WebDAV 服务并记下端口；
|
||||
//! 2. 目标文件夹必须在「可见文件夹范围」内（团队文件夹需勾选
|
||||
//! 「允许通过文件共享协议(SMB、WebDAV、FTP)挂载到其他设备上」）；
|
||||
//! 3. 账号对该文件夹有读写权限。
|
||||
|
||||
use bytes::Bytes;
|
||||
use serde::{Deserialize, Serialize};
|
||||
use std::time::Duration;
|
||||
|
||||
/// WebDAV 连接配置（由前端每次调用时传入，后端不持有状态）。
|
||||
#[derive(Debug, Clone, Deserialize, Serialize, specta::Type)]
|
||||
pub struct WebDavConfig {
|
||||
/// 服务地址，如 `http://192.168.110.100:5005`
|
||||
pub url: String,
|
||||
pub username: String,
|
||||
pub password: String,
|
||||
}
|
||||
|
||||
/// WebDAV 操作结果状态码相关的可读错误。
|
||||
fn status_err(action: &str, status: u16, url: &str) -> String {
|
||||
match status {
|
||||
401 => format!("WebDAV 认证失败（401）：请检查账号与密码"),
|
||||
403 => format!("WebDAV 拒绝访问（403）：账号可能没有该目录的写入权限"),
|
||||
404 => format!("WebDAV 目标不存在（404）：{url}（目录需要先在 NAS 上创建，且在 WebDAV 可见范围内）"),
|
||||
409 => format!("WebDAV 父目录不存在（409）：{url}"),
|
||||
_ => format!("WebDAV {action}失败（HTTP {status}）：{url}"),
|
||||
}
|
||||
}
|
||||
|
||||
fn dav_client(_cfg: &WebDavConfig) -> Result<reqwest::Client, String> {
|
||||
// NAS 通常在内网，默认禁用系统代理（走代理会连不上）；Basic 认证在请求级设置
|
||||
reqwest::Client::builder()
|
||||
.timeout(Duration::from_secs(600))
|
||||
.connect_timeout(Duration::from_secs(10))
|
||||
.no_proxy()
|
||||
.build()
|
||||
.map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
/// 拼接 WebDAV 完整 URL：base + 远程路径（逐段百分号编码，保留 `/`）。
|
||||
fn dav_url(cfg: &WebDavConfig, remote_path: &str) -> String {
|
||||
let base = cfg.url.trim_end_matches('/');
|
||||
let path = remote_path.trim_start_matches('/');
|
||||
let encoded: Vec<String> = path
|
||||
.split('/')
|
||||
.filter(|s| !s.is_empty())
|
||||
.map(|seg| {
|
||||
let mut out = String::new();
|
||||
for b in seg.bytes() {
|
||||
match b {
|
||||
b'A'..=b'Z' | b'a'..=b'z' | b'0'..=b'9' | b'-' | b'_' | b'.' | b'~' => {
|
||||
out.push(b as char)
|
||||
}
|
||||
_ => out.push_str(&format!("%{b:02X}")),
|
||||
}
|
||||
}
|
||||
out
|
||||
})
|
||||
.collect();
|
||||
format!("{base}/{}", encoded.join("/"))
|
||||
}
|
||||
|
||||
fn with_auth(mut rb: reqwest::RequestBuilder, cfg: &WebDavConfig) -> reqwest::RequestBuilder {
|
||||
if !cfg.username.is_empty() {
|
||||
rb = rb.basic_auth(&cfg.username, Some(&cfg.password));
|
||||
}
|
||||
rb
|
||||
}
|
||||
|
||||
/// 逐级 MKCOL 创建远程目录（已存在会被忽略）。
|
||||
async fn ensure_dirs(cfg: &WebDavConfig, remote_path: &str) -> Result<(), String> {
|
||||
let path = remote_path.trim_start_matches('/');
|
||||
let segs: Vec<&str> = path.split('/').filter(|s| !s.is_empty()).collect();
|
||||
// 最后一段是文件名，只建目录部分
|
||||
let dirs: Vec<String> = segs
|
||||
.iter()
|
||||
.take(segs.len().saturating_sub(1))
|
||||
.fold(Vec::new(), |mut acc, s| {
|
||||
let prev = acc.last().cloned().unwrap_or_default();
|
||||
acc.push(if prev.is_empty() {
|
||||
s.to_string()
|
||||
} else {
|
||||
format!("{prev}/{s}")
|
||||
});
|
||||
acc
|
||||
});
|
||||
let client = dav_client(cfg)?;
|
||||
for d in dirs {
|
||||
let url = dav_url(cfg, &d);
|
||||
let method = reqwest::Method::from_bytes(b"MKCOL").expect("MKCOL 是合法的 HTTP 方法");
|
||||
let resp = with_auth(client.request(method, &url), cfg)
|
||||
.send()
|
||||
.await
|
||||
.map_err(|e| format!("WebDAV MKCOL 失败: {e}"))?;
|
||||
// 201 创建成功；405 已存在；其余只记不阻断（权限问题会在 PUT 时暴露）
|
||||
let code = resp.status().as_u16();
|
||||
if code != 201 && code != 405 && code != 301 && code != 409 && code != 200 {
|
||||
return Err(status_err("创建目录", code, &url));
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// 测试连接：PROPFIND 目标目录（Depth 0）。成功返回目录确认信息。
|
||||
pub async fn test(cfg: &WebDavConfig, dir: &str) -> Result<String, String> {
|
||||
let url = dav_url(cfg, dir);
|
||||
let client = dav_client(cfg)?;
|
||||
let resp = with_auth(
|
||||
client
|
||||
.request(reqwest::Method::from_bytes(b"PROPFIND").unwrap(), &url)
|
||||
.header("Depth", "0")
|
||||
.body(String::new()),
|
||||
cfg,
|
||||
)
|
||||
.send()
|
||||
.await
|
||||
.map_err(|e| format!("无法连接 WebDAV 服务：{e}（请确认地址与端口）"))?;
|
||||
let code = resp.status().as_u16();
|
||||
match code {
|
||||
207 | 200 => Ok(format!("连接成功：{url}")),
|
||||
404 => Err(format!(
|
||||
"WebDAV 服务可达，但目标目录不存在（404）：{url}\n请先在 NAS 上创建该目录，并确认它在 WebDAV「可见文件夹范围」内"
|
||||
)),
|
||||
401 => Err("WebDAV 认证失败（401）：请检查账号与密码".to_string()),
|
||||
403 => Err("WebDAV 拒绝访问（403）：账号可能没有该目录的读取权限".to_string()),
|
||||
_ => Err(status_err("连接", code, &url)),
|
||||
}
|
||||
}
|
||||
|
||||
/// 上传本地文件（流式读取，不整载内存）。返回远程路径。
|
||||
pub async fn upload_file(
|
||||
cfg: &WebDavConfig,
|
||||
local_path: &std::path::Path,
|
||||
remote_path: &str,
|
||||
) -> Result<String, String> {
|
||||
ensure_dirs(cfg, remote_path).await?;
|
||||
let file = tokio::fs::File::open(local_path)
|
||||
.await
|
||||
.map_err(|e| format!("读取本地文件失败: {e}"))?;
|
||||
// 128KB 分块流：用 unfold 把 AsyncRead 转 Stream，避免引入 tokio-util
|
||||
let stream = futures_util::stream::unfold(file, |mut f| async move {
|
||||
use tokio::io::AsyncReadExt;
|
||||
let mut buf = vec![0u8; 128 * 1024];
|
||||
match f.read(&mut buf).await {
|
||||
Ok(0) => None,
|
||||
Ok(n) => Some((Ok::<Bytes, std::io::Error>(Bytes::copy_from_slice(&buf[..n])), f)),
|
||||
Err(e) => Some((Err(e), f)),
|
||||
}
|
||||
});
|
||||
let url = dav_url(cfg, remote_path);
|
||||
let client = dav_client(cfg)?;
|
||||
let resp = with_auth(client.put(&url), cfg)
|
||||
.header("Content-Type", mime_of(remote_path))
|
||||
.body(reqwest::Body::wrap_stream(stream))
|
||||
.send()
|
||||
.await
|
||||
.map_err(|e| format!("WebDAV 上传失败: {e}"))?;
|
||||
let code = resp.status().as_u16();
|
||||
if !(200..300).contains(&code) {
|
||||
return Err(status_err("上传", code, &url));
|
||||
}
|
||||
Ok(remote_path.to_string())
|
||||
}
|
||||
|
||||
/// 删除远程文件（404 视为已删除）。
|
||||
pub async fn delete(cfg: &WebDavConfig, remote_path: &str) -> Result<(), String> {
|
||||
let url = dav_url(cfg, remote_path);
|
||||
let client = dav_client(cfg)?;
|
||||
let resp = with_auth(client.delete(&url), cfg)
|
||||
.send()
|
||||
.await
|
||||
.map_err(|e| format!("WebDAV 删除失败: {e}"))?;
|
||||
let code = resp.status().as_u16();
|
||||
if code == 404 {
|
||||
return Ok(());
|
||||
}
|
||||
if !(200..300).contains(&code) {
|
||||
return Err(status_err("删除", code, &url));
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
pub fn mime_of(name: &str) -> &'static str {
|
||||
let ext = name.rsplit('.').next().unwrap_or("").to_lowercase();
|
||||
match ext.as_str() {
|
||||
"mp3" => "audio/mpeg",
|
||||
"flac" => "audio/flac",
|
||||
"wav" => "audio/wav",
|
||||
"m4a" => "audio/mp4",
|
||||
"aac" => "audio/aac",
|
||||
"ogg" => "audio/ogg",
|
||||
"ape" => "audio/x-ape",
|
||||
_ => "application/octet-stream",
|
||||
}
|
||||
}
|
||||
|
||||
/// 保留给调用方校验配置完整性。
|
||||
pub fn validate(cfg: &WebDavConfig, dir: &str) -> Result<(), String> {
|
||||
if cfg.url.trim().is_empty() {
|
||||
return Err("请先填写 WebDAV 服务地址（如 http://192.168.110.100:5005）".into());
|
||||
}
|
||||
if cfg.username.trim().is_empty() {
|
||||
return Err("请先填写 WebDAV 账号".into());
|
||||
}
|
||||
if dir.trim().is_empty() {
|
||||
return Err("请先填写 WebDAV 曲库目标目录".into());
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
@@ -24,14 +24,13 @@ pub use feiniu::{extract_fn_id, normalize_base_url, resolve_base_url, Feiniu, Fe
|
||||
|
||||
pub use commands::{
|
||||
feiniu_activate_connection, feiniu_cache_clear, feiniu_cache_fetch, feiniu_cache_status,
|
||||
feiniu_delete_connection, feiniu_fnconnect_resolve, feiniu_fnos_delete, feiniu_fnos_list,
|
||||
feiniu_fnos_login, feiniu_fnos_logout, feiniu_fnos_status, feiniu_fnos_upload,
|
||||
feiniu_get_config, feiniu_list_connections, feiniu_list_tracks, feiniu_login, feiniu_logout,
|
||||
feiniu_lyric, feiniu_media_prefix, feiniu_save_connection, feiniu_scan_local,
|
||||
feiniu_test_connection, music_cancel_runtime_install, music_download, music_download_cancel,
|
||||
music_env_status, music_get_settings, music_get_sources, music_install_runtime,
|
||||
music_parse_playlist, music_ping, music_resolve, music_save_settings, music_search,
|
||||
music_stop_bridge,
|
||||
feiniu_delete_connection, feiniu_delete_local, feiniu_fnconnect_resolve, feiniu_get_config,
|
||||
feiniu_list_connections, feiniu_list_tracks, feiniu_login, feiniu_logout, feiniu_lyric,
|
||||
feiniu_media_prefix, feiniu_save_connection, feiniu_scan_local, feiniu_test_connection,
|
||||
music_cancel_runtime_install, music_download, music_download_cancel, music_env_status,
|
||||
music_get_settings, music_get_sources, music_install_runtime, music_parse_playlist, music_ping,
|
||||
music_resolve, music_save_settings, music_search, music_stop_bridge, webdav_delete,
|
||||
webdav_get_secret, webdav_save_secret, webdav_test, webdav_upload,
|
||||
};
|
||||
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
+8
-1
@@ -5,8 +5,10 @@ import { getCurrentWindow } from '@tauri-apps/api/window'
|
||||
import TitleBar from '@/components/layout/TitleBar.vue'
|
||||
import Sidebar from '@/components/layout/Sidebar.vue'
|
||||
import ModuleContainer from '@/components/layout/ModuleContainer.vue'
|
||||
import NowPlayingDialog from '@/components/layout/NowPlayingDialog.vue'
|
||||
import { Toaster } from '@/components/ui/sonner'
|
||||
import { useAppStore } from '@/stores/appStore'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import { useScreenshotStore } from '@/stores/screenshotStore'
|
||||
import { useQuickPanelStore } from '@/stores/quickpanelStore'
|
||||
import { useMonitorStore } from '@/stores/monitorStore'
|
||||
@@ -19,6 +21,7 @@ import { EVENTS, STORAGE_KEYS, WINDOWS } from '@/lib/constants'
|
||||
import { commands } from '@/lib/bindings'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const feiniuStore = useFeiniuStore()
|
||||
const screenshotStore = useScreenshotStore()
|
||||
const quickpanelStore = useQuickPanelStore()
|
||||
const monitorStore = useMonitorStore()
|
||||
@@ -197,6 +200,9 @@ const resolveDefaultModule = (): string => {
|
||||
onMounted(async () => {
|
||||
await appStore.init().catch(e => console.error('App init error:', e))
|
||||
|
||||
// 全局播放器：恢复队列/音量/播放模式等本地状态（幂等，音乐模块内会再次调用但不会重复执行）
|
||||
feiniuStore.init().catch(e => console.error('播放器初始化失败:', e))
|
||||
|
||||
// 初始化监控 store：订阅后端 monitor-data / monitor-network 等事件，
|
||||
// 使 OSD 窗口在应用启动后即可接收数据流，不依赖用户手动打开监控模块。
|
||||
// init() 幂等：MonitorModule 挂载时再次调用不会重复订阅。
|
||||
@@ -283,7 +289,7 @@ onUnmounted(() => {
|
||||
<TooltipProvider>
|
||||
<div class="flex flex-col h-screen w-screen overflow-hidden">
|
||||
<TitleBar :modules="availableModules" @search="handleSearch" />
|
||||
<div class="flex-1 flex overflow-hidden">
|
||||
<div class="flex-1 flex overflow-hidden min-h-0">
|
||||
<Sidebar
|
||||
:modules="availableModules"
|
||||
:active-module="activeModule"
|
||||
@@ -292,6 +298,7 @@ onUnmounted(() => {
|
||||
<ModuleContainer :active-component="activeComponent" :active-module="activeModule" :loading="moduleLoading" />
|
||||
</div>
|
||||
</div>
|
||||
<NowPlayingDialog />
|
||||
<Toaster position="bottom-right" rich-colors close-button :style="{ zIndex: 99999 }" />
|
||||
</TooltipProvider>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,293 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 通用拖拽进度条。
|
||||
*
|
||||
* 关键行为：拖动过程中**不**向外提交，只更新本地预览值；
|
||||
* 指针抬起（或键盘操作）时才 emit `seek`。
|
||||
* 这样流式音频不会因为拖动而反复中断并重建 Range 请求。
|
||||
*/
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** 当前进度 0~1 */
|
||||
value: number
|
||||
/** 已缓冲比例 0~1 */
|
||||
buffered?: number
|
||||
/** 总秒数：>0 时显示两侧时间与拖动气泡 */
|
||||
durationSec?: number
|
||||
/** 紧凑模式（音量条）：细轨道、无时间、无气泡 */
|
||||
compact?: boolean
|
||||
disabled?: boolean
|
||||
/** 无障碍标签 */
|
||||
label?: string
|
||||
}>(),
|
||||
{ buffered: 0, durationSec: 0, compact: false, disabled: false, label: '进度' }
|
||||
)
|
||||
|
||||
const emit = defineEmits<{ seek: [ratio: number] }>()
|
||||
|
||||
const rootRef = ref<HTMLElement | null>(null)
|
||||
const dragging = ref(false)
|
||||
const dragRatio = ref(0)
|
||||
const hoverRatio = ref<number | null>(null)
|
||||
|
||||
function clamp(v: number) {
|
||||
return Math.min(1, Math.max(0, Number.isFinite(v) ? v : 0))
|
||||
}
|
||||
function pct(v: number) {
|
||||
return `${clamp(v) * 100}%`
|
||||
}
|
||||
const activeRatio = computed(() => (dragging.value ? dragRatio.value : clamp(props.value)))
|
||||
const bubbleRatio = computed(() => (dragging.value ? dragRatio.value : hoverRatio.value))
|
||||
const showTime = computed(() => !props.compact && props.durationSec > 0)
|
||||
|
||||
function ratioFromClientX(clientX: number) {
|
||||
const el = rootRef.value
|
||||
if (!el) return 0
|
||||
const r = el.getBoundingClientRect()
|
||||
if (r.width <= 0) return 0
|
||||
return clamp((clientX - r.left) / r.width)
|
||||
}
|
||||
|
||||
function fmt(sec: number) {
|
||||
if (!Number.isFinite(sec) || sec < 0) return '--:--'
|
||||
const s = Math.floor(sec)
|
||||
const h = Math.floor(s / 3600)
|
||||
const m = Math.floor((s % 3600) / 60)
|
||||
const r = s % 60
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(r).padStart(2, '0')}`
|
||||
return `${String(m).padStart(2, '0')}:${String(r).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function onDown(e: PointerEvent) {
|
||||
if (props.disabled) return
|
||||
const el = e.currentTarget as HTMLElement
|
||||
dragging.value = true
|
||||
dragRatio.value = ratioFromClientX(e.clientX)
|
||||
try {
|
||||
el.focus({ preventScroll: true })
|
||||
el.setPointerCapture(e.pointerId)
|
||||
} catch {
|
||||
/* 部分环境不支持指针捕获/聚焦，降级为普通拖动 */
|
||||
}
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
function onMove(e: PointerEvent) {
|
||||
const r = ratioFromClientX(e.clientX)
|
||||
hoverRatio.value = r
|
||||
if (dragging.value) dragRatio.value = r
|
||||
}
|
||||
|
||||
function onUp(e: PointerEvent) {
|
||||
if (!dragging.value) return
|
||||
dragging.value = false
|
||||
dragRatio.value = ratioFromClientX(e.clientX)
|
||||
emit('seek', dragRatio.value)
|
||||
}
|
||||
|
||||
function onLeave() {
|
||||
if (!dragging.value) hoverRatio.value = null
|
||||
}
|
||||
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (props.disabled) return
|
||||
const step = e.shiftKey ? 0.1 : 0.02
|
||||
let next: number | null = null
|
||||
if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next = clamp(props.value + step)
|
||||
else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = clamp(props.value - step)
|
||||
else if (e.key === 'Home') next = 0
|
||||
else if (e.key === 'End') next = 1
|
||||
if (next !== null) {
|
||||
emit('seek', next)
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="scrub"
|
||||
:class="{ 'is-compact': compact, 'is-dragging': dragging, 'is-disabled': disabled }"
|
||||
>
|
||||
<span v-if="showTime" class="scrub-time">{{ fmt(activeRatio * durationSec) }}</span>
|
||||
|
||||
<div
|
||||
ref="rootRef"
|
||||
class="scrub-track"
|
||||
role="slider"
|
||||
:tabindex="disabled ? -1 : 0"
|
||||
:aria-label="label"
|
||||
:aria-valuenow="Math.round(activeRatio * 100)"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-disabled="disabled"
|
||||
@pointerdown="onDown"
|
||||
@pointermove="onMove"
|
||||
@pointerup="onUp"
|
||||
@pointercancel="onUp"
|
||||
@pointerleave="onLeave"
|
||||
@keydown="onKey"
|
||||
>
|
||||
<span class="scrub-buffered" :style="{ width: pct(buffered) }" />
|
||||
<span class="scrub-played" :style="{ width: pct(activeRatio) }" />
|
||||
<span class="scrub-thumb" :style="{ left: pct(activeRatio) }" />
|
||||
<span
|
||||
v-if="showTime && bubbleRatio !== null"
|
||||
class="scrub-bubble"
|
||||
:style="{ left: pct(bubbleRatio) }"
|
||||
>
|
||||
{{ fmt(bubbleRatio * durationSec) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span v-if="showTime" class="scrub-time">{{ fmt(durationSec) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scrub {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.scrub-time {
|
||||
font-size: 11px;
|
||||
color: var(--muted-foreground);
|
||||
font-variant-numeric: tabular-nums;
|
||||
flex: 0 0 auto;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
.scrub-time:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.scrub-track {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 视觉轨道（高 4px，hover / 拖动时增到 7px） */
|
||||
.scrub-track::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: var(--muted);
|
||||
transition: height 0.15s ease;
|
||||
}
|
||||
.scrub:hover .scrub-track::before,
|
||||
.scrub.is-dragging .scrub-track::before {
|
||||
height: 7px;
|
||||
}
|
||||
.scrub-track:focus-visible::before {
|
||||
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 45%, transparent);
|
||||
}
|
||||
|
||||
.scrub-buffered,
|
||||
.scrub-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
transition: height 0.15s ease;
|
||||
}
|
||||
.scrub:hover .scrub-buffered,
|
||||
.scrub.is-dragging .scrub-buffered,
|
||||
.scrub:hover .scrub-played,
|
||||
.scrub.is-dragging .scrub-played {
|
||||
height: 7px;
|
||||
}
|
||||
.scrub-buffered {
|
||||
background: color-mix(in oklab, var(--muted-foreground) 28%, transparent);
|
||||
}
|
||||
.scrub-played {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.scrub-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: -6px 0 0 -6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 0 2px var(--background);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.scrub:hover .scrub-thumb,
|
||||
.scrub.is-dragging .scrub-thumb,
|
||||
.scrub-track:focus-visible .scrub-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
.scrub.is-dragging .scrub-thumb {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.scrub-bubble {
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
background: var(--popover);
|
||||
color: var(--popover-foreground);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scrub.is-compact .scrub-time {
|
||||
display: none;
|
||||
}
|
||||
.scrub.is-compact .scrub-track {
|
||||
height: 14px;
|
||||
}
|
||||
.scrub.is-compact .scrub-track::before,
|
||||
.scrub.is-compact .scrub-buffered,
|
||||
.scrub.is-compact .scrub-played {
|
||||
height: 4px;
|
||||
}
|
||||
.scrub.is-compact:hover .scrub-track::before,
|
||||
.scrub.is-compact:hover .scrub-buffered,
|
||||
.scrub.is-compact:hover .scrub-played,
|
||||
.scrub.is-compact.is-dragging .scrub-track::before,
|
||||
.scrub.is-compact.is-dragging .scrub-buffered,
|
||||
.scrub.is-compact.is-dragging .scrub-played {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scrub.is-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.scrub-track::before,
|
||||
.scrub-buffered,
|
||||
.scrub-played,
|
||||
.scrub-thumb {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
|
||||
export interface SegmentedItem {
|
||||
value: string
|
||||
label: string
|
||||
/** lucide 图标组件 */
|
||||
icon?: Component
|
||||
/** 右侧计数徽标 */
|
||||
count?: number
|
||||
}
|
||||
|
||||
/** 模块内统一的分段导航（替代此前并存的三套切换控件） */
|
||||
defineProps<{
|
||||
modelValue: string
|
||||
items: SegmentedItem[]
|
||||
/** 铺满容器宽度（等分） */
|
||||
block?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="inline-flex items-center rounded-lg bg-muted p-0.5"
|
||||
:class="block ? 'flex w-full' : 'w-fit'"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.value"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="modelValue === item.value"
|
||||
class="flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-[7px] px-3 py-1.5 text-[13px] transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
|
||||
:class="
|
||||
modelValue === item.value
|
||||
? 'bg-background font-medium text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
"
|
||||
@click="emit('update:modelValue', item.value)"
|
||||
>
|
||||
<component :is="item.icon" v-if="item.icon" class="size-3.5 shrink-0" />
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
<span
|
||||
v-if="item.count"
|
||||
class="shrink-0 rounded-full bg-muted px-1.5 text-[10px] tabular-nums text-muted-foreground"
|
||||
:class="modelValue === item.value ? 'bg-muted' : 'bg-background/70'"
|
||||
>
|
||||
{{ item.count }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,319 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { Music2, Pause, Play, Plus, Repeat, Repeat1, Shuffle, SkipBack, SkipForward, Trash2, X } from '@lucide/vue'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import ScrubBar from '@/components/common/ScrubBar.vue'
|
||||
import SegmentedNav from '@/components/common/SegmentedNav.vue'
|
||||
import { Dialog, DialogContent, DialogClose, DialogTitle } from '@/components/ui/dialog'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
const coverUrl = computed(() => {
|
||||
const t = store.nowPlaying
|
||||
if (!t) return ''
|
||||
if (t.coverUrl) return t.coverUrl
|
||||
if (t.source === 'feiniu' && t.coverId && store.mediaPrefix) {
|
||||
return `${store.mediaPrefix}/cover?coverId=${encodeURIComponent(t.coverId)}&size=400`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
const coverFailed = ref(false)
|
||||
watch(coverUrl, () => (coverFailed.value = false))
|
||||
|
||||
const isPreview = computed(() => store.nowPlaying?.source === 'preview')
|
||||
const hasTrack = computed(() => !!store.nowPlaying)
|
||||
|
||||
const modeIcon = computed(() => {
|
||||
if (store.playMode === 'loopOne') return Repeat1
|
||||
if (store.playMode === 'shuffle') return Shuffle
|
||||
return Repeat
|
||||
})
|
||||
const modeLabel = computed(() =>
|
||||
store.playMode === 'loopAll' ? '列表循环' : store.playMode === 'loopOne' ? '单曲循环' : '随机播放'
|
||||
)
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ value: 'lyric', label: '歌词' },
|
||||
{ value: 'queue', label: `队列` }
|
||||
])
|
||||
const activeTab = computed({
|
||||
get: () => store.nowPlayingTab,
|
||||
set: (v: string) => (store.nowPlayingTab = v === 'queue' ? 'queue' : 'lyric')
|
||||
})
|
||||
|
||||
const currentLineIdx = computed(() => store.currentLine())
|
||||
|
||||
// ===== 歌词滚动跟随（用函数 ref 收集节点，避免每次全量 querySelectorAll） =====
|
||||
const lineEls: (HTMLElement | null)[] = []
|
||||
function setLineEl(el: Element | { $el?: Element } | null, idx: number) {
|
||||
lineEls[idx] = (el as HTMLElement) ?? null
|
||||
}
|
||||
const reduceMotion = typeof window !== 'undefined' && window.matchMedia
|
||||
? window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||||
: false
|
||||
watch(currentLineIdx, (idx) => {
|
||||
if (idx < 0) return
|
||||
lineEls[idx]?.scrollIntoView({ block: 'center', behavior: reduceMotion ? 'auto' : 'smooth' })
|
||||
})
|
||||
watch(
|
||||
() => store.lyricLines,
|
||||
() => {
|
||||
lineEls.length = 0
|
||||
}
|
||||
)
|
||||
|
||||
// ===== 队列：大列表增量渲染（避免上千行一次性挂载） =====
|
||||
const QUEUE_STEP = 200
|
||||
const queueLimit = ref(QUEUE_STEP)
|
||||
watch(
|
||||
() => store.queue.length,
|
||||
() => (queueLimit.value = QUEUE_STEP)
|
||||
)
|
||||
const visibleQueue = computed(() =>
|
||||
store.queue.slice(0, queueLimit.value).map((item, index) => ({ item, index }))
|
||||
)
|
||||
const hasMoreQueue = computed(() => store.queue.length > queueLimit.value)
|
||||
|
||||
function onSeek(ratio: number) {
|
||||
store.seek(ratio * store.duration)
|
||||
}
|
||||
|
||||
function playAt(index: number) {
|
||||
const item = store.queue[index]
|
||||
if (item) store.playItem(item)
|
||||
}
|
||||
|
||||
/** 暂停/继续当前曲目（不切换上下文） */
|
||||
function toggleAt(index: number) {
|
||||
if (index === store.queueIndex) store.toggle()
|
||||
else playAt(index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:open="store.nowPlayingOpen">
|
||||
<DialogContent
|
||||
class="max-w-5xl overflow-hidden border p-0 sm:max-w-5xl"
|
||||
:show-close-button="false"
|
||||
>
|
||||
<DialogTitle class="sr-only">正在播放</DialogTitle>
|
||||
|
||||
<div class="relative flex h-[min(78vh,600px)] flex-col">
|
||||
<!-- 背景：主题色轻渐变（不使用整图高斯模糊，避免持续 GPU 开销） -->
|
||||
<div
|
||||
class="pointer-events-none absolute inset-0"
|
||||
style="
|
||||
background:
|
||||
radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--muted) 92%, transparent), transparent 62%),
|
||||
linear-gradient(180deg, color-mix(in oklab, var(--muted) 55%, transparent), var(--background) 72%);
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="relative flex min-h-0 flex-1">
|
||||
<!-- ===== 左：封面 + 控制 ===== -->
|
||||
<div class="flex w-[46%] min-w-0 flex-col justify-center gap-5 px-9 py-8">
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
v-if="coverUrl && !coverFailed"
|
||||
:src="coverUrl"
|
||||
class="aspect-square w-[min(240px,60%)] rounded-xl object-cover ring-1 ring-border/60"
|
||||
alt=""
|
||||
referrerpolicy="no-referrer"
|
||||
@error="coverFailed = true"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="flex aspect-square w-[min(240px,60%)] items-center justify-center rounded-xl bg-muted/60 text-muted-foreground ring-1 ring-border/60"
|
||||
>
|
||||
<Music2 class="size-16" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 text-center">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<h3 class="truncate text-[19px] font-semibold">{{ store.nowPlaying?.title || '未播放' }}</h3>
|
||||
<span
|
||||
v-if="isPreview"
|
||||
class="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
|
||||
>
|
||||
试听
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-1 truncate text-[13px] text-muted-foreground">
|
||||
{{ store.nowPlaying?.artistNames || '—'
|
||||
}}<template v-if="store.nowPlaying?.album"> · {{ store.nowPlaying.album }}</template>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<ScrubBar
|
||||
:value="store.progress / 100"
|
||||
:buffered="store.bufferedPercent / 100"
|
||||
:duration-sec="store.duration"
|
||||
:disabled="!hasTrack"
|
||||
label="播放进度"
|
||||
@seek="onSeek"
|
||||
/>
|
||||
<div class="mt-1 flex items-center justify-center gap-6">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
:aria-label="modeLabel"
|
||||
@click="store.togglePlayMode()"
|
||||
>
|
||||
<component :is="modeIcon" class="size-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ modeLabel }}</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
|
||||
:disabled="!store.queue.length"
|
||||
aria-label="上一首"
|
||||
@click="store.prev()"
|
||||
>
|
||||
<SkipBack class="size-6" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
|
||||
:disabled="!hasTrack"
|
||||
:aria-label="store.playing ? '暂停' : '播放'"
|
||||
@click="store.toggle()"
|
||||
>
|
||||
<span
|
||||
v-if="store.loadingPlay"
|
||||
class="size-5 animate-spin rounded-full border-2 border-current border-t-transparent"
|
||||
/>
|
||||
<Pause v-else-if="store.playing" class="size-6" />
|
||||
<Play v-else class="size-6 translate-x-px" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
|
||||
:disabled="!store.queue.length"
|
||||
aria-label="下一首"
|
||||
@click="store.next()"
|
||||
>
|
||||
<SkipForward class="size-6" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
:class="{ 'text-foreground': store.nowPlayingTab === 'queue' }"
|
||||
aria-label="播放队列"
|
||||
@click="store.nowPlayingTab = 'queue'"
|
||||
>
|
||||
<Plus class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 右：歌词 / 队列 ===== -->
|
||||
<div class="flex min-w-0 flex-1 flex-col border-l border-border px-6 py-7">
|
||||
<div class="mb-4 flex items-center">
|
||||
<SegmentedNav v-model="activeTab" :items="tabs" />
|
||||
</div>
|
||||
|
||||
<ScrollArea class="min-h-0 flex-1">
|
||||
<div v-if="activeTab === 'lyric'" class="flex flex-col gap-0.5 px-1 pb-6" data-slot="lyric-list">
|
||||
<p v-if="!store.lyricLines.length" class="py-8 text-center text-[13px] text-muted-foreground">
|
||||
{{ isPreview ? '试听不加载歌词' : store.nowPlaying?.source === 'local' ? '本地文件无歌词' : '暂无歌词' }}
|
||||
</p>
|
||||
<button
|
||||
v-for="(line, idx) in store.lyricLines"
|
||||
:key="idx"
|
||||
:ref="(el) => setLineEl(el as Element | null, idx)"
|
||||
type="button"
|
||||
class="rounded-md px-3 py-1.5 text-left text-[14px] leading-7 transition-all duration-200"
|
||||
:class="
|
||||
idx === currentLineIdx
|
||||
? 'bg-accent/60 text-[16px] font-medium text-foreground'
|
||||
: idx < currentLineIdx
|
||||
? 'text-muted-foreground/45 hover:text-muted-foreground'
|
||||
: 'text-muted-foreground/75 hover:text-foreground'
|
||||
"
|
||||
@click="store.seek(line.t)"
|
||||
>
|
||||
{{ line.text }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-col gap-0.5 px-1 pb-6">
|
||||
<div v-if="!store.queue.length" class="py-8 text-center text-[13px] text-muted-foreground">
|
||||
队列为空
|
||||
</div>
|
||||
<div
|
||||
v-for="row in visibleQueue"
|
||||
:key="`${row.item.source}:${row.item.guid ?? row.index}`"
|
||||
class="group flex items-center gap-3 rounded-md px-2 py-1.5 transition-colors"
|
||||
:class="row.index === store.queueIndex && !isPreview ? 'bg-accent/60' : 'hover:bg-accent/40'"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex size-6 shrink-0 items-center justify-center text-[11px] tabular-nums text-muted-foreground"
|
||||
:aria-label="row.index === store.queueIndex ? '暂停/继续' : '播放'"
|
||||
@click="toggleAt(row.index)"
|
||||
>
|
||||
<span v-if="row.index === store.queueIndex && !isPreview" class="music-eq" :class="{ 'is-paused': !store.playing }">
|
||||
<i /><i /><i />
|
||||
</span>
|
||||
<template v-else>
|
||||
<Play class="size-3.5 opacity-0 transition-opacity group-hover:opacity-100" />
|
||||
<span class="group-hover:hidden">{{ row.index + 1 }}</span>
|
||||
</template>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div
|
||||
class="truncate text-[13px]"
|
||||
:class="row.index === store.queueIndex && !isPreview ? 'font-medium' : ''"
|
||||
>
|
||||
{{ row.item.title }}
|
||||
</div>
|
||||
<div class="truncate text-[11.5px] text-muted-foreground">{{ row.item.artistNames || '—' }}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
|
||||
aria-label="从队列移除"
|
||||
@click="store.removeFromQueue(row.index)"
|
||||
>
|
||||
<Trash2 class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="hasMoreQueue"
|
||||
type="button"
|
||||
class="mt-1 rounded-md py-2 text-[12px] text-muted-foreground hover:bg-accent/40"
|
||||
@click="queueLimit += QUEUE_STEP"
|
||||
>
|
||||
显示更多（{{ store.queue.length - queueLimit }}）
|
||||
</button>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogClose as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-4 top-4 z-10 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<X class="size-5" />
|
||||
</button>
|
||||
</DialogClose>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
|
||||
import { Search, Settings, ChevronRight, ArrowUp, Check, Loader2 } from '@lucide/vue'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import TitleBarMusic from '@/components/layout/TitleBarMusic.vue'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { getCurrentWindow } from '@tauri-apps/api/window'
|
||||
import { useSearchStore, type SearchItem } from '@/stores/searchStore'
|
||||
@@ -363,6 +364,11 @@ const handleBlur = () => {
|
||||
保存设置
|
||||
</button>
|
||||
</Transition>
|
||||
<!-- 音乐栏：唱片图标 + 歌名（点击弹出方形播放控制窗），位于搜索框左侧 -->
|
||||
<div class="pointer-events-auto">
|
||||
<TitleBarMusic />
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-xs mr-3 pointer-events-auto">
|
||||
<Search
|
||||
class="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground"
|
||||
|
||||
@@ -0,0 +1,296 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
import {
|
||||
Disc3,
|
||||
ListMusic,
|
||||
Maximize2,
|
||||
MicVocal,
|
||||
Pause,
|
||||
Play,
|
||||
Repeat,
|
||||
Repeat1,
|
||||
Shuffle,
|
||||
SkipBack,
|
||||
SkipForward,
|
||||
Volume2,
|
||||
VolumeX
|
||||
} from '@lucide/vue'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import ScrubBar from '@/components/common/ScrubBar.vue'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
const coverUrl = computed(() => {
|
||||
const t = store.nowPlaying
|
||||
if (!t) return ''
|
||||
if (t.coverUrl) return t.coverUrl
|
||||
if (t.source === 'feiniu' && t.coverId && store.mediaPrefix) {
|
||||
return `${store.mediaPrefix}/cover?coverId=${encodeURIComponent(t.coverId)}&size=96`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
const bigCoverUrl = computed(() => {
|
||||
const t = store.nowPlaying
|
||||
if (!t) return ''
|
||||
if (t.coverUrl) return t.coverUrl
|
||||
if (t.source === 'feiniu' && t.coverId && store.mediaPrefix) {
|
||||
return `${store.mediaPrefix}/cover?coverId=${encodeURIComponent(t.coverId)}&size=320`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
const coverFailed = ref(false)
|
||||
watch(coverUrl, () => (coverFailed.value = false))
|
||||
|
||||
/** 是否已播放过（未播放过时不展示歌名，只留唱片图标） */
|
||||
const hasTrack = computed(() => !!store.nowPlaying)
|
||||
const title = computed(() => store.nowPlaying?.title ?? '')
|
||||
const subtitle = computed(() => {
|
||||
const t = store.nowPlaying
|
||||
if (!t) return ''
|
||||
return t.artistNames || (t.source === 'local' ? '本地文件' : '')
|
||||
})
|
||||
const isPreview = computed(() => store.nowPlaying?.source === 'preview')
|
||||
|
||||
const modeIcon = computed(() => {
|
||||
if (store.playMode === 'loopOne') return Repeat1
|
||||
if (store.playMode === 'shuffle') return Shuffle
|
||||
return Repeat
|
||||
})
|
||||
const modeLabel = computed(() =>
|
||||
store.playMode === 'loopAll' ? '列表循环' : store.playMode === 'loopOne' ? '单曲循环' : '随机播放'
|
||||
)
|
||||
const volumePercent = computed(() => (store.muted ? 0 : store.volume))
|
||||
|
||||
function onSeek(ratio: number) {
|
||||
store.seek(ratio * store.duration)
|
||||
}
|
||||
|
||||
function openLyrics(tab: 'lyric' | 'queue') {
|
||||
store.nowPlayingTab = tab
|
||||
store.nowPlayingOpen = true
|
||||
open.value = false
|
||||
}
|
||||
|
||||
// 播放失败统一在这里提示（store 只记录原因）
|
||||
watch(
|
||||
() => store.playError,
|
||||
(msg) => {
|
||||
if (!msg) return
|
||||
toast.error(msg)
|
||||
store.clearPlayError()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<!-- 音乐栏：唱片图标 + 歌名（未播放过时只显示图标） -->
|
||||
<button
|
||||
type="button"
|
||||
class="mr-2 flex h-7 max-w-[210px] items-center gap-2 rounded-md px-1.5 text-left transition-colors hover:bg-secondary/60"
|
||||
:title="hasTrack ? `${title}${subtitle ? ' · ' + subtitle : ''}` : '未在播放'"
|
||||
:aria-label="hasTrack ? `音乐控制：${title}` : '音乐控制'"
|
||||
@mousedown.stop
|
||||
>
|
||||
<span
|
||||
class="disc flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full"
|
||||
:class="{ 'is-playing': store.playing }"
|
||||
>
|
||||
<img
|
||||
v-if="coverUrl && !coverFailed"
|
||||
:src="coverUrl"
|
||||
class="size-full object-cover"
|
||||
alt=""
|
||||
referrerpolicy="no-referrer"
|
||||
@error="coverFailed = true"
|
||||
/>
|
||||
<Disc3 v-else class="size-4 text-muted-foreground" />
|
||||
</span>
|
||||
<span v-if="hasTrack" class="min-w-0 flex-1 truncate text-xs text-foreground/90">
|
||||
{{ title }}
|
||||
</span>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
|
||||
<!-- 方形播放控制窗 -->
|
||||
<PopoverContent
|
||||
align="end"
|
||||
:side-offset="8"
|
||||
class="w-[300px] p-3"
|
||||
@mousedown.stop
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<!-- 封面 -->
|
||||
<button
|
||||
type="button"
|
||||
class="group relative aspect-square w-[132px] overflow-hidden rounded-lg bg-muted ring-1 ring-border/60"
|
||||
:title="'打开歌词与大屏'"
|
||||
@click="openLyrics('lyric')"
|
||||
>
|
||||
<img
|
||||
v-if="bigCoverUrl"
|
||||
:src="bigCoverUrl"
|
||||
class="size-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
alt=""
|
||||
referrerpolicy="no-referrer"
|
||||
@error="($event.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<span v-else class="flex size-full items-center justify-center text-muted-foreground">
|
||||
<Disc3 class="size-10" />
|
||||
</span>
|
||||
<span
|
||||
class="absolute inset-0 hidden items-center justify-center bg-foreground/35 text-primary-foreground group-hover:flex"
|
||||
>
|
||||
<Maximize2 class="size-5" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- 曲目信息 -->
|
||||
<div class="w-full min-w-0 text-center">
|
||||
<div class="flex items-center justify-center gap-1.5">
|
||||
<span class="truncate text-[13px] font-medium">{{ title || '未播放' }}</span>
|
||||
<span
|
||||
v-if="isPreview"
|
||||
class="shrink-0 rounded bg-muted px-1 py-px text-[10px] text-muted-foreground"
|
||||
>
|
||||
试听
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-0.5 truncate text-[11.5px] text-muted-foreground">
|
||||
{{ subtitle || '—' }}<template v-if="store.nowPlaying?.album"> · {{ store.nowPlaying.album }}</template>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 进度 -->
|
||||
<ScrubBar
|
||||
class="w-full"
|
||||
:value="store.progress / 100"
|
||||
:buffered="store.bufferedPercent / 100"
|
||||
:duration-sec="store.duration"
|
||||
:disabled="!hasTrack"
|
||||
label="播放进度"
|
||||
@seek="onSeek"
|
||||
/>
|
||||
|
||||
<!-- 控制 -->
|
||||
<div class="flex w-full items-center justify-center gap-5">
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
:title="modeLabel"
|
||||
:aria-label="modeLabel"
|
||||
@click="store.togglePlayMode()"
|
||||
>
|
||||
<component :is="modeIcon" class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
|
||||
:disabled="!store.queue.length"
|
||||
aria-label="上一首"
|
||||
@click="store.prev()"
|
||||
>
|
||||
<SkipBack class="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
|
||||
:disabled="!hasTrack"
|
||||
:aria-label="store.playing ? '暂停' : '播放'"
|
||||
@click="store.toggle()"
|
||||
>
|
||||
<span
|
||||
v-if="store.loadingPlay"
|
||||
class="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
|
||||
/>
|
||||
<Pause v-else-if="store.playing" class="size-4" />
|
||||
<Play v-else class="size-4 translate-x-px" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
|
||||
:disabled="!store.queue.length"
|
||||
aria-label="下一首"
|
||||
@click="store.next()"
|
||||
>
|
||||
<SkipForward class="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
|
||||
:disabled="isPreview"
|
||||
:title="`播放队列（${store.queue.length}）`"
|
||||
aria-label="播放队列"
|
||||
@click="openLyrics('queue')"
|
||||
>
|
||||
<ListMusic class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 音量 + 入口 -->
|
||||
<div class="flex w-full items-center gap-2 border-t pt-2.5">
|
||||
<button
|
||||
type="button"
|
||||
class="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
|
||||
:aria-label="store.muted ? '取消静音' : '静音'"
|
||||
@click="store.toggleMute()"
|
||||
>
|
||||
<VolumeX v-if="volumePercent === 0" class="size-3.5" />
|
||||
<Volume2 v-else class="size-3.5" />
|
||||
</button>
|
||||
<div class="w-16 shrink-0">
|
||||
<ScrubBar compact :value="volumePercent" label="音量" @seek="store.setVolume($event)" />
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 rounded-md px-1.5 py-1 text-[11.5px] text-muted-foreground transition-colors hover:bg-secondary/60 hover:text-foreground"
|
||||
@click="openLyrics('lyric')"
|
||||
>
|
||||
<MicVocal class="size-3.5" />
|
||||
歌词
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 rounded-md px-1.5 py-1 text-[11.5px] text-muted-foreground transition-colors hover:bg-secondary/60 hover:text-foreground"
|
||||
:disabled="isPreview"
|
||||
@click="openLyrics('queue')"
|
||||
>
|
||||
<ListMusic class="size-3.5" />
|
||||
队列
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 唱片图标：播放时旋转（暂停保持当前角度继续待命） */
|
||||
.disc {
|
||||
animation: discSpin 8s linear infinite;
|
||||
animation-play-state: paused;
|
||||
background: var(--muted);
|
||||
}
|
||||
.disc.is-playing {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes discSpin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.disc {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+1098
-782
File diff suppressed because it is too large
Load Diff
@@ -26,8 +26,11 @@ const toggle = (code: string) => {
|
||||
emit('update:model-value', [...next])
|
||||
}
|
||||
|
||||
const selectAll = () => emit('update:model-value', [...props.options])
|
||||
const clearAll = () => emit('update:model-value', [])
|
||||
|
||||
const label = computed(() => {
|
||||
if (props.modelValue.length === 0) return '未选择'
|
||||
if (props.modelValue.length === 0) return '选择搜索源'
|
||||
if (props.modelValue.length === 1) return sourceName(props.modelValue[0])
|
||||
return `已选 ${props.modelValue.length} 个源`
|
||||
})
|
||||
@@ -36,34 +39,52 @@ const label = computed(() => {
|
||||
<template>
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="justify-between font-normal" size="sm">
|
||||
<Button variant="outline" size="sm" class="h-9 max-w-56 justify-between font-normal">
|
||||
<span class="truncate">{{ label }}</span>
|
||||
<ChevronDown class="size-3.5 opacity-50 shrink-0" />
|
||||
<ChevronDown class="size-3.5 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-64 p-2" align="start">
|
||||
<!-- ScrollArea 的 viewport h-full 需要 root 有确定高度才滚动；max-h 不生效，用固定 h-72 -->
|
||||
<div class="mb-1 flex items-center justify-between px-1">
|
||||
<span class="text-[11px] text-muted-foreground">搜索源</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-[11px] text-muted-foreground hover:text-foreground disabled:opacity-40"
|
||||
:disabled="modelValue.length === options.length"
|
||||
@click="selectAll"
|
||||
>
|
||||
全选
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-[11px] text-muted-foreground hover:text-foreground disabled:opacity-40"
|
||||
:disabled="modelValue.length === 0"
|
||||
@click="clearAll"
|
||||
>
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ScrollArea 的 viewport 为 h-full，需要根节点有确定高度才能滚动 -->
|
||||
<ScrollArea class="h-72">
|
||||
<div class="space-y-0.5 pr-2">
|
||||
<label
|
||||
v-for="code in options"
|
||||
:key="code"
|
||||
class="flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-muted/50"
|
||||
class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent/60"
|
||||
>
|
||||
<Checkbox
|
||||
:model-value="checked.has(code)"
|
||||
@update:model-value="toggle(code)"
|
||||
/>
|
||||
<Label class="text-sm cursor-pointer truncate">{{ sourceName(code) }}</Label>
|
||||
<Checkbox :model-value="checked.has(code)" @update:model-value="toggle(code)" />
|
||||
<Label class="cursor-pointer truncate text-[13px]">{{ sourceName(code) }}</Label>
|
||||
</label>
|
||||
<p v-if="options.length === 0" class="px-2 py-3 text-xs text-muted-foreground">
|
||||
未获取到可用源，请先安装环境
|
||||
<p v-if="options.length === 0" class="px-2 py-3 text-[11.5px] text-muted-foreground">
|
||||
未获取到可用源，请先在「设置 → 环境与诊断」安装运行时。
|
||||
</p>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div class="mt-1 border-t pt-1.5 px-1 flex items-center justify-between">
|
||||
<span class="text-xs text-muted-foreground">{{ options.length }} 个可选源</span>
|
||||
<span class="text-xs text-muted-foreground">已选 {{ props.modelValue.length }}</span>
|
||||
<div class="mt-1 flex items-center justify-between border-t px-1 pt-1.5">
|
||||
<span class="text-[11px] text-muted-foreground">{{ options.length }} 个可选源</span>
|
||||
<span class="text-[11px] text-muted-foreground">已选 {{ modelValue.length }}</span>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
@@ -1,269 +1,503 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { FolderOpen, Loader2, Music2, Plus, RefreshCw, Trash2 } from '@lucide/vue'
|
||||
import { useFeiniuStore, type Playlist } from '@/stores/feiniuStore'
|
||||
import {
|
||||
Cloud,
|
||||
FolderOpen,
|
||||
HardDrive,
|
||||
ListMusic,
|
||||
ListPlus,
|
||||
Loader2,
|
||||
Music2,
|
||||
Pencil,
|
||||
Play,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Trash2
|
||||
} from '@lucide/vue'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import TrackItem from './TrackItem.vue'
|
||||
import PlaylistEditorDialog from './PlaylistEditorDialog.vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Empty } from '@/components/ui/empty'
|
||||
import { Empty, EmptyDescription, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog'
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
type SubTab = 'feiniu' | 'local' | 'playlists'
|
||||
const subTab = ref<SubTab>('feiniu')
|
||||
/** 曲库视图：飞牛 / 本地 / 歌单 */
|
||||
type LibraryView = 'feiniu' | 'local' | 'playlists'
|
||||
const view = ref<LibraryView>('feiniu')
|
||||
|
||||
// 未登录（无激活连接且未登录）
|
||||
const needsLogin = computed(() => !store.config.loggedIn && !store.activeConn)
|
||||
|
||||
const keywordInput = ref('')
|
||||
let searchTimer: ReturnType<typeof setTimeout> | undefined
|
||||
const sourceNav = computed(() => [
|
||||
{ value: 'feiniu' as const, label: '飞牛曲库', icon: Cloud, count: store.total || store.tracks.length },
|
||||
{ value: 'local' as const, label: '本地曲库', icon: HardDrive, count: store.localTracks.length },
|
||||
{ value: 'playlists' as const, label: '我的歌单', icon: ListMusic, count: store.playlists.length }
|
||||
])
|
||||
|
||||
// ===== 飞牛曲库：搜索（直接绑定 store.searchKeyword，此前绑定的是孤立局部变量，导致搜索完全无效）=====
|
||||
let searchTimer: ReturnType<typeof setTimeout> | undefined
|
||||
let searchSeq = 0
|
||||
function onSearchInput() {
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
store.loadTracks(1).catch((e) => toast.error(String(e)))
|
||||
searchTimer = setTimeout(async () => {
|
||||
const seq = ++searchSeq
|
||||
try {
|
||||
await store.loadTracks(1)
|
||||
} catch (e) {
|
||||
if (seq === searchSeq) toast.error(String(e))
|
||||
}
|
||||
}, 400)
|
||||
}
|
||||
|
||||
function refreshFeiniu() {
|
||||
store.loadTracks(store.page).catch((e) => toast.error(String(e)))
|
||||
store.loadTracks(1).catch((e) => toast.error(String(e)))
|
||||
}
|
||||
|
||||
function refreshLocal() {
|
||||
store.scanLocal().catch((e) => toast.error(String(e)))
|
||||
}
|
||||
|
||||
function playAll() {
|
||||
const list =
|
||||
subTab.value === 'feiniu' ? store.tracks : subTab.value === 'local' ? store.localTracks : []
|
||||
if (list.length) store.playQueue(list, 0)
|
||||
function playFeiniu() {
|
||||
if (store.tracks.length) store.playQueue(store.tracks, 0)
|
||||
}
|
||||
function playLocal() {
|
||||
if (store.localTracks.length) store.playQueue(store.localTracks, 0)
|
||||
}
|
||||
function playActivePlaylist() {
|
||||
if (activePlaylist.value?.items.length) store.playQueue(activePlaylist.value.items, 0)
|
||||
}
|
||||
|
||||
// ===== 滚动加载更多（飞牛曲库分页）=====
|
||||
const loadMoreRef = ref<HTMLElement | null>(null)
|
||||
let loadMoreObserver: IntersectionObserver | null = null
|
||||
onMounted(() => {
|
||||
loadMoreObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (!entries.some((e) => e.isIntersecting)) return
|
||||
store.loadMoreTracks().catch(() => {})
|
||||
},
|
||||
{ rootMargin: '400px' }
|
||||
)
|
||||
watch(
|
||||
loadMoreRef,
|
||||
(el) => {
|
||||
if (!loadMoreObserver) return
|
||||
loadMoreObserver.disconnect()
|
||||
if (el) loadMoreObserver.observe(el)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeout(searchTimer)
|
||||
loadMoreObserver?.disconnect()
|
||||
})
|
||||
|
||||
// ===== 歌单 =====
|
||||
const playlistName = ref('')
|
||||
const createOpen = ref(false)
|
||||
const activePlaylistId = ref('')
|
||||
const activePlaylist = computed<Playlist | null>(
|
||||
() => store.playlists.find((p) => p.id === activePlaylistId.value) || null
|
||||
const activePlaylist = computed(() => store.playlists.find((p) => p.id === activePlaylistId.value) || null)
|
||||
|
||||
const createOpen = ref(false)
|
||||
const newName = ref('')
|
||||
const renameOpen = ref(false)
|
||||
const renameValue = ref('')
|
||||
/** 编辑歌单音乐（勾选加入 / 批量移出） */
|
||||
const editorOpen = ref(false)
|
||||
|
||||
// 切换歌单时关闭编辑器，避免对着已切换的目标继续编辑
|
||||
watch(activePlaylistId, () => (editorOpen.value = false))
|
||||
|
||||
// 切到歌单视图时自动选中第一个
|
||||
watch(
|
||||
[view, () => store.playlists.length],
|
||||
() => {
|
||||
if (view.value !== 'playlists') return
|
||||
if (activePlaylistId.value && store.playlists.some((p) => p.id === activePlaylistId.value)) return
|
||||
activePlaylistId.value = store.playlists[0]?.id ?? ''
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function createPlaylist() {
|
||||
if (!playlistName.value.trim()) {
|
||||
const name = newName.value.trim()
|
||||
if (!name) {
|
||||
toast.error('请输入歌单名称')
|
||||
return
|
||||
}
|
||||
const id = store.createPlaylist(playlistName.value.trim())
|
||||
activePlaylistId.value = id
|
||||
playlistName.value = ''
|
||||
activePlaylistId.value = store.createPlaylist(name)
|
||||
newName.value = ''
|
||||
createOpen.value = false
|
||||
view.value = 'playlists'
|
||||
}
|
||||
|
||||
function openRename() {
|
||||
if (!activePlaylist.value) return
|
||||
renameValue.value = activePlaylist.value.name
|
||||
renameOpen.value = true
|
||||
}
|
||||
function confirmRename() {
|
||||
const name = renameValue.value.trim()
|
||||
if (!name || !activePlaylist.value) return
|
||||
store.renamePlaylist(activePlaylist.value.id, name)
|
||||
renameOpen.value = false
|
||||
}
|
||||
|
||||
function removePlaylist() {
|
||||
if (!activePlaylist.value) return
|
||||
store.deletePlaylist(activePlaylist.value.id)
|
||||
activePlaylistId.value = ''
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await store.init()
|
||||
if (store.config.loggedIn) {
|
||||
store.loadTracks(1).catch(() => {})
|
||||
if (store.config.loggedIn) store.loadTracks(1).catch(() => {})
|
||||
})
|
||||
|
||||
/** 表格表头与 TrackItem 行保持同一条网格 */
|
||||
const GRID = { gridTemplateColumns: '28px 36px minmax(0,1fr) 74px 28px' }
|
||||
|
||||
const listEmptyHint = computed(() => {
|
||||
if (view.value === 'feiniu') {
|
||||
if (store.searchKeyword.trim()) return '没有匹配「' + store.searchKeyword.trim() + '」的曲目'
|
||||
return store.config.loggedIn ? '曲库为空，试试刷新或检查 NAS 曲库目录' : '请先在「设置 → 飞牛音乐连接」登录'
|
||||
}
|
||||
return '暂无本地音乐，点击「扫描本地曲库」或先到「发现音乐」下载'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollArea class="h-full pr-3">
|
||||
<div class="flex flex-col gap-4 px-1 pt-1 pb-4 min-w-0">
|
||||
<!-- 未登录态：引导配置连接 -->
|
||||
<div v-if="needsLogin" class="flex flex-col items-center gap-3 py-16 text-center">
|
||||
<Music2 class="size-10 text-muted-foreground" />
|
||||
<p class="text-sm text-muted-foreground">
|
||||
还没有可用的飞牛音乐连接。请到「设置 → 飞牛音乐连接」添加并登录，
|
||||
<br />
|
||||
或先到「发现音乐」下载歌曲到本地曲库。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex h-full min-h-0">
|
||||
<!-- ===== 左：来源导航 ===== -->
|
||||
<aside class="flex w-[168px] shrink-0 flex-col border-r">
|
||||
<ScrollArea class="min-h-0 flex-1">
|
||||
<div class="flex flex-col p-2">
|
||||
<p class="px-2 pb-1.5 pt-0.5 text-[11px] font-medium tracking-wide text-muted-foreground">曲库</p>
|
||||
|
||||
<template v-else>
|
||||
<!-- 页头 + 子导航 -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1 rounded-lg border bg-card p-1">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-3 py-1 text-sm transition-colors"
|
||||
:class="subTab === 'feiniu' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="subTab = 'feiniu'"
|
||||
<!-- 来源：选中态与顶部 Tabs 一致（无容器底色，选中项为浮起胶囊） -->
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<button
|
||||
v-for="nav in sourceNav"
|
||||
:key="nav.value"
|
||||
type="button"
|
||||
class="flex h-8 items-center gap-1.5 rounded-md px-2 text-[13px] transition-colors duration-150"
|
||||
:class="
|
||||
view === nav.value
|
||||
? 'bg-background font-medium text-foreground shadow-sm ring-1 ring-border'
|
||||
: 'text-muted-foreground hover:bg-accent/60 hover:text-foreground'
|
||||
"
|
||||
@click="view = nav.value"
|
||||
>
|
||||
<component :is="nav.icon" class="size-3.5 shrink-0" />
|
||||
<span class="min-w-0 flex-1 truncate">{{ nav.label }}</span>
|
||||
<!-- 数量始终渲染（无歌曲时显示 0），并固定宽度右对齐，保证数字列竖向对齐 -->
|
||||
<span
|
||||
class="min-w-[3ch] shrink-0 text-right text-[10.5px] tabular-nums"
|
||||
:class="view === nav.value ? 'text-muted-foreground' : 'text-muted-foreground/70'"
|
||||
>
|
||||
飞牛曲库
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-3 py-1 text-sm transition-colors"
|
||||
:class="subTab === 'local' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="subTab = 'local'"
|
||||
>
|
||||
本地曲库
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-3 py-1 text-sm transition-colors"
|
||||
:class="subTab === 'playlists' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="subTab = 'playlists'"
|
||||
>
|
||||
我的歌单
|
||||
</button>
|
||||
</div>
|
||||
<Button v-if="store.config.loggedIn" variant="outline" size="sm" @click="playAll">
|
||||
▶ 播放全部
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 飞牛曲库 ===== -->
|
||||
<template v-if="subTab === 'feiniu'">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1">
|
||||
<Input v-model="keywordInput" placeholder="搜索飞牛曲库（歌名 / 歌手）" @input="onSearchInput" @keydown.enter="onSearchInput" />
|
||||
</div>
|
||||
<Button variant="outline" size="icon" :disabled="store.loading" @click="refreshFeiniu">
|
||||
<RefreshCw :class="store.loading ? 'size-4 animate-spin' : 'size-4'" />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div v-if="store.loading" class="flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground">
|
||||
<Loader2 class="size-4 animate-spin" /> 加载曲库…
|
||||
</div>
|
||||
<Empty v-else-if="!store.tracks.length" class="min-h-40">
|
||||
<Music2 class="size-10 text-muted-foreground" />
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ store.config.loggedIn ? '曲库为空或未匹配到结果' : '请先在设置中登录飞牛音乐连接' }}
|
||||
</p>
|
||||
</Empty>
|
||||
<template v-else>
|
||||
<TrackItem
|
||||
v-for="(t, i) in store.tracks"
|
||||
:key="t.guid || i"
|
||||
:item="t"
|
||||
:active="store.current?.guid === t.guid"
|
||||
@dblclick="store.playQueue(store.tracks, i)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== 本地曲库 ===== -->
|
||||
<template v-else-if="subTab === 'local'">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" :disabled="store.localScanBusy" @click="refreshLocal">
|
||||
<Loader2 v-if="store.localScanBusy" class="size-4 animate-spin" />
|
||||
<FolderOpen v-else class="size-4" />
|
||||
扫描本地
|
||||
</Button>
|
||||
<span class="text-xs text-muted-foreground">{{ store.localTracks.length }} 首（目录：音乐下载目录 + 自定义）</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<Empty v-if="!store.localTracks.length && !store.localScanBusy" class="min-h-40">
|
||||
<FolderOpen class="size-10 text-muted-foreground" />
|
||||
<p class="text-sm text-muted-foreground">暂无本地音乐，点击「扫描本地」或先到发现音乐下载</p>
|
||||
</Empty>
|
||||
<template v-else>
|
||||
<TrackItem
|
||||
v-for="(t, i) in store.localTracks"
|
||||
:key="t.guid || i"
|
||||
:item="t"
|
||||
:active="store.current?.guid === t.guid"
|
||||
@dblclick="store.playQueue(store.localTracks, i)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== 我的歌单 ===== -->
|
||||
<template v-else>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" @click="createOpen = true">
|
||||
<Plus class="size-4" /> 新建歌单
|
||||
</Button>
|
||||
{{ nav.count > 999 ? '999+' : nav.count }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 歌单列表（左） + 详情（右） -->
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-[220px_1fr]">
|
||||
<div class="flex flex-col gap-1 rounded-lg border bg-card p-2">
|
||||
<!-- 歌单列表（选中「我的歌单」时展开） -->
|
||||
<Transition name="pl-list">
|
||||
<div v-if="view === 'playlists'" class="mt-1.5 ml-1.5 flex flex-col gap-0.5 border-l pl-1.5">
|
||||
<button
|
||||
v-for="p in store.playlists"
|
||||
:key="p.id"
|
||||
type="button"
|
||||
class="flex items-center justify-between rounded-md px-3 py-2 text-sm transition-colors"
|
||||
:class="activePlaylistId === p.id ? 'bg-primary/10 text-foreground' : 'text-muted-foreground hover:bg-muted/40'"
|
||||
class="flex h-7 items-center gap-1.5 rounded-md px-2 text-left text-[12.5px] transition-colors duration-150"
|
||||
:class="
|
||||
activePlaylistId === p.id
|
||||
? 'bg-background font-medium text-foreground shadow-sm ring-1 ring-border'
|
||||
: 'text-muted-foreground hover:bg-accent/60 hover:text-foreground'
|
||||
"
|
||||
@click="activePlaylistId = p.id"
|
||||
>
|
||||
<span class="truncate">{{ p.name }}</span>
|
||||
<span class="text-xs">{{ p.items.length }}</span>
|
||||
<span class="min-w-0 flex-1 truncate">{{ p.name }}</span>
|
||||
<span class="min-w-[3ch] shrink-0 text-right text-[10.5px] tabular-nums">
|
||||
{{ p.items.length > 999 ? '999+' : p.items.length }}
|
||||
</span>
|
||||
</button>
|
||||
<Empty v-if="!store.playlists.length" class="min-h-32">
|
||||
<p class="text-sm text-muted-foreground">还没有歌单</p>
|
||||
</Empty>
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-7 items-center gap-1.5 rounded-md px-2 text-[12.5px] text-muted-foreground transition-colors duration-150 hover:bg-accent/60 hover:text-foreground"
|
||||
@click="createOpen = true"
|
||||
>
|
||||
<Plus class="size-3.5 shrink-0" />
|
||||
<span class="min-w-0 flex-1 truncate">新建歌单</span>
|
||||
</button>
|
||||
<p v-if="!store.playlists.length" class="px-2 py-1 text-[11.5px] text-muted-foreground">
|
||||
还没有歌单
|
||||
</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</aside>
|
||||
|
||||
<!-- ===== 右：内容（key 随来源变化，复用全局 tab-animate 切换动画） ===== -->
|
||||
<section :key="view" class="tab-animate flex min-w-0 flex-1 flex-col">
|
||||
<!-- 未登录态 -->
|
||||
<div v-if="needsLogin" class="flex min-h-0 flex-1 items-center justify-center px-6">
|
||||
<Empty>
|
||||
<EmptyMedia>
|
||||
<Music2 class="size-8 text-muted-foreground" />
|
||||
</EmptyMedia>
|
||||
<EmptyTitle>还没有可用的飞牛音乐连接</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
到「设置 → 飞牛音乐连接」添加并登录，或先到「发现音乐」下载歌曲到本地曲库。
|
||||
</EmptyDescription>
|
||||
</Empty>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- 工具栏 -->
|
||||
<header class="flex shrink-0 items-center gap-2 border-b px-4 py-2.5">
|
||||
<template v-if="view === 'feiniu'">
|
||||
<div class="relative w-full max-w-sm">
|
||||
<Search class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
v-model="store.searchKeyword"
|
||||
class="h-8 pl-8"
|
||||
placeholder="搜索歌名 / 歌手 / 专辑"
|
||||
@input="onSearchInput"
|
||||
@keydown.enter="onSearchInput"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" class="h-8" :disabled="store.loading" @click="refreshFeiniu">
|
||||
<RefreshCw :class="store.loading ? 'size-3.5 animate-spin' : 'size-3.5'" />
|
||||
刷新
|
||||
</Button>
|
||||
<span class="ml-1 text-[11.5px] text-muted-foreground">
|
||||
{{ store.tracks.length }}<template v-if="store.total > store.tracks.length"> / {{ store.total }}</template> 首
|
||||
</span>
|
||||
<Button size="sm" class="ml-auto h-8" :disabled="!store.tracks.length" @click="playFeiniu">
|
||||
<Play class="size-3.5" /> 播放全部
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="view === 'local'">
|
||||
<Button variant="outline" size="sm" class="h-8" :disabled="store.localScanBusy" @click="refreshLocal">
|
||||
<Loader2 v-if="store.localScanBusy" class="size-3.5 animate-spin" />
|
||||
<FolderOpen v-else class="size-3.5" />
|
||||
扫描本地曲库
|
||||
</Button>
|
||||
<span class="text-[11.5px] text-muted-foreground">{{ store.localTracks.length }} 首</span>
|
||||
<Button size="sm" class="ml-auto h-8" :disabled="!store.localTracks.length" @click="playLocal">
|
||||
<Play class="size-3.5" /> 播放全部
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<template v-if="activePlaylist">
|
||||
<div class="min-w-0">
|
||||
<div class="truncate text-[13px] font-medium">{{ activePlaylist.name }}</div>
|
||||
<div class="text-[11.5px] text-muted-foreground">{{ activePlaylist.items.length }} 首</div>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-1.5">
|
||||
<Button variant="outline" size="sm" class="h-8" @click="editorOpen = true">
|
||||
<ListPlus class="size-3.5" />
|
||||
编辑音乐
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-8"
|
||||
aria-label="重命名歌单"
|
||||
@click="openRename"
|
||||
>
|
||||
<Pencil class="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-8 text-destructive hover:text-destructive"
|
||||
aria-label="删除歌单"
|
||||
@click="removePlaylist"
|
||||
>
|
||||
<Trash2 class="size-3.5" />
|
||||
</Button>
|
||||
<Button size="sm" class="h-8" :disabled="!activePlaylist.items.length" @click="playActivePlaylist">
|
||||
<Play class="size-3.5" /> 播放全部
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else class="text-[12.5px] text-muted-foreground">选择左侧歌单查看内容</span>
|
||||
</template>
|
||||
</header>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ScrollArea class="min-h-0 flex-1">
|
||||
<div class="px-2 pb-4">
|
||||
<!-- 表头 -->
|
||||
<div
|
||||
v-if="
|
||||
(view === 'feiniu' && store.tracks.length) ||
|
||||
(view === 'local' && store.localTracks.length) ||
|
||||
(view === 'playlists' && activePlaylist?.items.length)
|
||||
"
|
||||
class="grid h-8 items-center gap-3 px-2 text-[11px] text-muted-foreground"
|
||||
:style="GRID"
|
||||
>
|
||||
<span class="text-center">#</span>
|
||||
<span />
|
||||
<span>标题</span>
|
||||
<span class="text-right">时长</span>
|
||||
<span />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div v-if="activePlaylist" class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-base font-semibold">{{ activePlaylist.name }}</div>
|
||||
<div class="text-xs text-muted-foreground">{{ activePlaylist.items.length }} 首</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" :disabled="!activePlaylist.items.length" @click="store.playQueue(activePlaylist.items, 0)">
|
||||
▶ 播放全部
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-8 text-destructive"
|
||||
@click="store.deletePlaylist(activePlaylist.id); activePlaylistId = ''"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<!-- 飞牛曲库 -->
|
||||
<template v-if="view === 'feiniu'">
|
||||
<div v-if="store.loading" class="flex items-center justify-center gap-2 py-14 text-[12.5px] text-muted-foreground">
|
||||
<Loader2 class="size-4 animate-spin" /> 加载曲库…
|
||||
</div>
|
||||
<div v-if="activePlaylist" class="flex flex-col gap-1.5">
|
||||
<Empty v-else-if="!store.tracks.length">
|
||||
<EmptyMedia><Music2 class="size-8 text-muted-foreground" /></EmptyMedia>
|
||||
<EmptyTitle>{{ store.searchKeyword.trim() ? '没有匹配的曲目' : '曲库为空' }}</EmptyTitle>
|
||||
<EmptyDescription>{{ listEmptyHint }}</EmptyDescription>
|
||||
</Empty>
|
||||
<template v-else>
|
||||
<TrackItem
|
||||
v-for="(t, i) in activePlaylist.items"
|
||||
:key="`${t.source}-${t.guid}-${i}`"
|
||||
v-for="(t, i) in store.tracks"
|
||||
:key="t.guid || i"
|
||||
:item="t"
|
||||
:index="i"
|
||||
:context="store.tracks"
|
||||
:active="store.current?.guid === t.guid"
|
||||
/>
|
||||
<div class="mt-1 flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="text-xs text-muted-foreground"
|
||||
@click="store.removeFromPlaylist(activePlaylist.id, activePlaylist.items.length - 1)"
|
||||
>
|
||||
移除最后一首
|
||||
</Button>
|
||||
<div
|
||||
v-if="store.hasMoreTracks"
|
||||
ref="loadMoreRef"
|
||||
class="flex items-center justify-center gap-2 py-4 text-[12px] text-muted-foreground"
|
||||
>
|
||||
<Loader2 v-if="store.loadingMore" class="size-3.5 animate-spin" />
|
||||
正在加载更多…
|
||||
</div>
|
||||
</div>
|
||||
<Empty v-else class="min-h-40">
|
||||
<p class="text-sm text-muted-foreground">选择左侧歌单查看内容</p>
|
||||
</Empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 新建歌单弹窗 -->
|
||||
<Dialog v-model:open="createOpen">
|
||||
<DialogContent class="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建歌单</DialogTitle>
|
||||
<DialogDescription>歌单保存在本机，可混合飞牛 NAS 与本地曲目。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Input v-model="playlistName" placeholder="歌单名称" @keydown.enter="createPlaylist" />
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="createOpen = false">取消</Button>
|
||||
<Button @click="createPlaylist">创建</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<!-- 本地曲库 -->
|
||||
<template v-else-if="view === 'local'">
|
||||
<Empty v-if="!store.localTracks.length && !store.localScanBusy">
|
||||
<EmptyMedia><HardDrive class="size-8 text-muted-foreground" /></EmptyMedia>
|
||||
<EmptyTitle>暂无本地音乐</EmptyTitle>
|
||||
<EmptyDescription>{{ listEmptyHint }}</EmptyDescription>
|
||||
</Empty>
|
||||
<template v-else>
|
||||
<TrackItem
|
||||
v-for="(t, i) in store.localTracks"
|
||||
:key="t.guid || i"
|
||||
:item="t"
|
||||
:index="i"
|
||||
:context="store.localTracks"
|
||||
:active="store.current?.guid === t.guid"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 歌单详情 -->
|
||||
<template v-else>
|
||||
<template v-if="activePlaylist">
|
||||
<Empty v-if="!activePlaylist.items.length">
|
||||
<EmptyMedia><ListMusic class="size-8 text-muted-foreground" /></EmptyMedia>
|
||||
<EmptyTitle>歌单还是空的</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
点击「编辑音乐」从全部音乐里勾选加入，或在曲库列表中通过「⋯」菜单单首添加。
|
||||
</EmptyDescription>
|
||||
<Button size="sm" class="mt-1" @click="editorOpen = true">
|
||||
<ListPlus class="size-3.5" />
|
||||
编辑音乐
|
||||
</Button>
|
||||
</Empty>
|
||||
<TrackItem
|
||||
v-for="(t, i) in activePlaylist.items"
|
||||
:key="`${t.source}:${t.guid}:${i}`"
|
||||
:item="t"
|
||||
:index="i"
|
||||
:context="activePlaylist.items"
|
||||
:playlist-id="activePlaylist.id"
|
||||
:playlist-index="i"
|
||||
:active="store.current?.guid === t.guid"
|
||||
show-source
|
||||
/>
|
||||
</template>
|
||||
<Empty v-else>
|
||||
<EmptyMedia><ListMusic class="size-8 text-muted-foreground" /></EmptyMedia>
|
||||
<EmptyTitle>还没有歌单</EmptyTitle>
|
||||
<EmptyDescription>点击左侧「新建歌单」开始整理你的收藏。</EmptyDescription>
|
||||
</Empty>
|
||||
</template>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<!-- 新建歌单 -->
|
||||
<Dialog v-model:open="createOpen">
|
||||
<DialogContent class="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建歌单</DialogTitle>
|
||||
<DialogDescription>歌单保存在本机，可混合飞牛 NAS 与本地曲目。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Input v-model="newName" placeholder="歌单名称" @keydown.enter="createPlaylist" />
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="createOpen = false">取消</Button>
|
||||
<Button @click="createPlaylist">创建</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- 重命名歌单 -->
|
||||
<Dialog v-model:open="renameOpen">
|
||||
<DialogContent class="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>重命名歌单</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Input v-model="renameValue" placeholder="歌单名称" @keydown.enter="confirmRename" />
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="renameOpen = false">取消</Button>
|
||||
<Button @click="confirmRename">保存</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- 编辑歌单音乐：从全部音乐勾选加入 / 批量移出 -->
|
||||
<PlaylistEditorDialog
|
||||
v-if="activePlaylist"
|
||||
v-model:open="editorOpen"
|
||||
:playlist-id="activePlaylist.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 歌单子树展开 / 收起 */
|
||||
.pl-list-enter-active,
|
||||
.pl-list-leave-active {
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
.pl-list-enter-from,
|
||||
.pl-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pl-list-enter-active,
|
||||
.pl-list-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ListMusic, Maximize2, Music2, Pause, Play, Repeat, Repeat1, Shuffle, SkipBack, SkipForward, Volume2 } from '@lucide/vue'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
const coverUrl = computed(() => {
|
||||
const t = store.current
|
||||
if (t?.source === 'feiniu' && t.coverId && store.mediaPrefix) {
|
||||
return `${store.mediaPrefix}/cover?coverId=${encodeURIComponent(t.coverId)}&size=96`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
function onProgress(v: number[] | undefined) {
|
||||
store.seek(((v?.[0] ?? 0) / 100) * store.duration)
|
||||
}
|
||||
|
||||
function onVolume(v: number[] | undefined) {
|
||||
store.setVolume((v?.[0] ?? 0) / 100)
|
||||
}
|
||||
|
||||
const modeIcon = computed(() => {
|
||||
if (store.playMode === 'loopOne') return Repeat1
|
||||
if (store.playMode === 'shuffle') return Shuffle
|
||||
return Repeat
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center gap-3 border-t bg-background/80 px-4 py-2.5 backdrop-blur"
|
||||
data-slot="player-bar"
|
||||
>
|
||||
<!-- 封面 + 信息（点击开 Now-Playing） -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex min-w-0 items-center gap-3 text-left"
|
||||
@click="store.nowPlayingOpen = true"
|
||||
>
|
||||
<img
|
||||
v-if="coverUrl"
|
||||
:src="coverUrl"
|
||||
class="size-11 shrink-0 rounded-md object-cover shadow"
|
||||
alt=""
|
||||
@error="($event.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<div v-else class="flex size-11 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
||||
<Music2 class="size-5" />
|
||||
</div>
|
||||
<div class="min-w-0 max-w-44">
|
||||
<div class="truncate text-sm font-medium">{{ store.current?.title || '未播放' }}</div>
|
||||
<div class="truncate text-xs text-muted-foreground">{{ store.current?.artistNames || '选择一首歌曲开始播放' }}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- 控制区 -->
|
||||
<div class="flex flex-1 flex-col items-center gap-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<button type="button" class="text-muted-foreground transition-colors hover:text-foreground" @click="store.togglePlayMode()">
|
||||
<component :is="modeIcon" class="size-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{{ store.playMode === 'loopAll' ? '列表循环' : store.playMode === 'loopOne' ? '单曲循环' : '随机播放' }}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<button type="button" class="text-muted-foreground transition-colors hover:text-foreground" @click="store.prev()">
|
||||
<SkipBack class="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity hover:opacity-90"
|
||||
:disabled="!store.current"
|
||||
@click="store.toggle()"
|
||||
>
|
||||
<Pause v-if="store.playing" class="size-5" />
|
||||
<Play v-else class="size-5 translate-x-[1px]" />
|
||||
</button>
|
||||
<button type="button" class="text-muted-foreground transition-colors hover:text-foreground" @click="store.next()">
|
||||
<SkipForward class="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="relative text-muted-foreground transition-colors hover:text-foreground"
|
||||
@click="store.queueVisible = !store.queueVisible"
|
||||
>
|
||||
<ListMusic class="size-4" />
|
||||
<span
|
||||
v-if="store.queue.length"
|
||||
class="absolute -right-1.5 -top-1 flex size-3.5 items-center justify-center rounded-full bg-primary text-[8px] font-medium text-primary-foreground"
|
||||
>
|
||||
{{ store.queue.length }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex w-full max-w-lg items-center gap-2">
|
||||
<span class="w-10 text-right text-[10px] tabular-nums text-muted-foreground">{{ store.fmtDuration(store.position) }}</span>
|
||||
<Slider
|
||||
:model-value="[store.progress]"
|
||||
class="flex-1"
|
||||
:max="100"
|
||||
:step="0.5"
|
||||
@update:model-value="onProgress"
|
||||
/>
|
||||
<span class="w-10 text-[10px] tabular-nums text-muted-foreground">{{ store.fmtDuration(store.duration) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音量 + 歌词 + 最大化 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<Volume2 class="size-4 text-muted-foreground" />
|
||||
<Slider
|
||||
:model-value="[store.volume * 100]"
|
||||
class="w-20"
|
||||
:max="100"
|
||||
:step="1"
|
||||
@update:model-value="onVolume"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
:class="{ 'text-primary': store.lyricVisible }"
|
||||
@click="store.lyricVisible = !store.lyricVisible"
|
||||
>
|
||||
词
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
@click="store.nowPlayingOpen = true"
|
||||
>
|
||||
<Maximize2 class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,176 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watchEffect } from 'vue'
|
||||
import { ListMusic, Music2, Pause, Play, Repeat, Repeat1, Shuffle, SkipBack, SkipForward, X } from '@lucide/vue'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Dialog, DialogContent, DialogClose } from '@/components/ui/dialog'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
const coverUrl = computed(() => {
|
||||
const t = store.current
|
||||
if (t?.source === 'feiniu' && t.coverId && store.mediaPrefix) {
|
||||
return `${store.mediaPrefix}/cover?coverId=${encodeURIComponent(t.coverId)}&size=400`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const currentLineIdx = computed(() => store.currentLine())
|
||||
|
||||
function onProgress(v: number[] | undefined) {
|
||||
store.seek(((v?.[0] ?? 0) / 100) * store.duration)
|
||||
}
|
||||
|
||||
const modeIcon = computed(() => {
|
||||
if (store.playMode === 'loopOne') return Repeat1
|
||||
if (store.playMode === 'shuffle') return Shuffle
|
||||
return Repeat
|
||||
})
|
||||
|
||||
// 歌词滚动跟随
|
||||
const lyricScrollEl = ref<HTMLElement | null>(null)
|
||||
watchEffect(() => {
|
||||
const idx = currentLineIdx.value
|
||||
if (idx < 0 || !lyricScrollEl.value) return
|
||||
const nodes = lyricScrollEl.value.querySelectorAll<HTMLElement>('[data-line]')
|
||||
const node = nodes[idx]
|
||||
if (node) node.scrollIntoView({ block: 'center', behavior: 'smooth' })
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:open="store.nowPlayingOpen">
|
||||
<DialogContent
|
||||
class="max-w-4xl overflow-hidden border-0 p-0 sm:max-w-5xl"
|
||||
:show-close-button="false"
|
||||
>
|
||||
<div class="relative flex min-h-[70vh] flex-col">
|
||||
<!-- 背景渐变 -->
|
||||
<div class="pointer-events-none absolute inset-0">
|
||||
<img v-if="coverUrl" :src="coverUrl" class="h-full w-full scale-110 object-cover blur-2xl opacity-30" alt="" />
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-background/60 via-background/85 to-background" />
|
||||
</div>
|
||||
|
||||
<div class="relative flex min-h-0 flex-1">
|
||||
<!-- 左：封面 + 控制 -->
|
||||
<div class="flex w-1/2 flex-col items-center justify-center gap-5 p-8">
|
||||
<img
|
||||
v-if="coverUrl"
|
||||
:src="coverUrl"
|
||||
class="size-64 rounded-xl object-cover shadow-2xl ring-1 ring-border"
|
||||
alt=""
|
||||
/>
|
||||
<div v-else class="flex size-64 items-center justify-center rounded-xl bg-muted/40 text-muted-foreground shadow-2xl">
|
||||
<Music2 class="size-20" />
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="truncate text-2xl font-semibold">{{ store.current?.title || '未播放' }}</div>
|
||||
<div class="mt-1 truncate text-sm text-muted-foreground">
|
||||
{{ store.current?.artistNames || '—' }}<template v-if="store.current?.album"> · {{ store.current.album }}</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full max-w-sm flex-col gap-2">
|
||||
<Slider
|
||||
:model-value="[store.progress]"
|
||||
:max="100"
|
||||
:step="0.5"
|
||||
@update:model-value="onProgress"
|
||||
/>
|
||||
<div class="flex justify-between text-[11px] tabular-nums text-muted-foreground">
|
||||
<span>{{ store.fmtDuration(store.position) }}</span>
|
||||
<span>{{ store.fmtDuration(store.duration) }}</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center justify-center gap-6">
|
||||
<button type="button" class="text-muted-foreground hover:text-foreground" @click="store.togglePlayMode()">
|
||||
<component :is="modeIcon" class="size-5" />
|
||||
</button>
|
||||
<button type="button" class="text-muted-foreground hover:text-foreground" @click="store.prev()">
|
||||
<SkipBack class="size-7" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex size-16 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity hover:opacity-90"
|
||||
:disabled="!store.current"
|
||||
@click="store.toggle()"
|
||||
>
|
||||
<Pause v-if="store.playing" class="size-8" />
|
||||
<Play v-else class="size-8 translate-x-[1px]" />
|
||||
</button>
|
||||
<button type="button" class="text-muted-foreground hover:text-foreground" @click="store.next()">
|
||||
<SkipForward class="size-7" />
|
||||
</button>
|
||||
<button type="button" class="text-muted-foreground hover:text-foreground" @click="store.queueVisible = true">
|
||||
<ListMusic class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右：歌词 / 队列 -->
|
||||
<div class="flex w-1/2 flex-col border-l border-white/10 p-6">
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm"
|
||||
:class="!store.queueVisible ? 'font-semibold text-foreground' : 'text-muted-foreground'"
|
||||
@click="store.queueVisible = false"
|
||||
>
|
||||
歌词
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm"
|
||||
:class="store.queueVisible ? 'font-semibold text-foreground' : 'text-muted-foreground'"
|
||||
@click="store.queueVisible = true"
|
||||
>
|
||||
队列（{{ store.queue.length }}）
|
||||
</button>
|
||||
</div>
|
||||
<ScrollArea class="min-h-0 flex-1 pr-3">
|
||||
<div v-if="!store.queueVisible" ref="lyricScrollEl" class="flex flex-col gap-1 py-2">
|
||||
<p v-if="!store.lyricLines.length" class="text-sm text-muted-foreground/60">
|
||||
{{ store.current?.source === 'local' ? '本地文件无歌词' : '暂无歌词' }}
|
||||
</p>
|
||||
<p
|
||||
v-for="(line, idx) in store.lyricLines"
|
||||
:key="idx"
|
||||
data-line
|
||||
class="cursor-pointer py-1 text-[15px] leading-7 transition-colors"
|
||||
:class="idx === currentLineIdx ? 'font-medium text-foreground' : 'text-muted-foreground/60'"
|
||||
@click="store.seek(line.t)"
|
||||
>
|
||||
{{ line.text }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="flex flex-col gap-1.5 py-1">
|
||||
<p v-if="!store.queue.length" class="text-sm text-muted-foreground/60">队列为空</p>
|
||||
<button
|
||||
v-for="(q, i) in store.queue"
|
||||
:key="i"
|
||||
type="button"
|
||||
class="flex items-center gap-3 rounded-md px-2 py-1.5 text-left transition-colors"
|
||||
:class="i === store.queueIndex ? 'bg-primary/10' : 'hover:bg-muted/40'"
|
||||
@click="store.queueIndex = i; store.playItem(q)"
|
||||
>
|
||||
<span class="w-5 text-right text-xs tabular-nums text-muted-foreground">{{ i + 1 }}</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm" :class="i === store.queueIndex ? 'font-medium' : ''">{{ q.title }}</div>
|
||||
<div class="truncate text-xs text-muted-foreground">{{ q.artistNames }}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogClose as-child>
|
||||
<button type="button" class="absolute right-4 top-4 z-10 rounded-md p-1.5 text-muted-foreground hover:bg-muted/40 hover:text-foreground">
|
||||
<X class="size-5" />
|
||||
</button>
|
||||
</DialogClose>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,418 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { Check, HardDrive, Loader2, Music2, Plus, FolderOpen, Minus } from '@lucide/vue'
|
||||
import { useFeiniuStore, type PlayableItem } from '@/stores/feiniuStore'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
playlistId: string
|
||||
}>()
|
||||
const emit = defineEmits<{ 'update:open': [value: boolean] }>()
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
const playlist = computed(() => store.playlists.find((p) => p.id === props.playlistId) || null)
|
||||
const itemKey = (t: PlayableItem) => `${t.source}:${t.guid ?? ''}`
|
||||
|
||||
/** 歌单已有曲目 key 集合 */
|
||||
const inPlaylistKeys = computed(() => new Set((playlist.value?.items ?? []).map(itemKey)))
|
||||
|
||||
// ===== 状态 =====
|
||||
const tab = ref<'all' | 'inPlaylist'>('all')
|
||||
const sourceFilter = ref<'all' | 'feiniu' | 'local'>('all')
|
||||
const keyword = ref('')
|
||||
const checked = ref<Set<string>>(new Set())
|
||||
|
||||
function resetState() {
|
||||
tab.value = 'all'
|
||||
sourceFilter.value = 'all'
|
||||
keyword.value = ''
|
||||
checked.value = new Set()
|
||||
limit.value = LIMIT
|
||||
}
|
||||
|
||||
// 打开时重置并确保曲库有数据可挑
|
||||
watch(
|
||||
() => props.open,
|
||||
async (open) => {
|
||||
if (!open) return
|
||||
resetState()
|
||||
if (store.config.loggedIn && store.tracks.length === 0) {
|
||||
store.loadTracks(1).catch((e) => toast.error(String(e)))
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 切 tab / 切来源时清空选择，避免"看不到的项仍被选中"造成数量对不上
|
||||
watch([tab, sourceFilter], () => {
|
||||
checked.value = new Set()
|
||||
limit.value = LIMIT
|
||||
})
|
||||
|
||||
// ===== 数据源 =====
|
||||
const allTracks = computed<PlayableItem[]>(() => {
|
||||
if (sourceFilter.value === 'feiniu') return store.tracks
|
||||
if (sourceFilter.value === 'local') return store.localTracks
|
||||
return [...store.tracks, ...store.localTracks]
|
||||
})
|
||||
|
||||
const baseList = computed<PlayableItem[]>(() => {
|
||||
const list = tab.value === 'inPlaylist' ? playlist.value?.items ?? [] : allTracks.value
|
||||
const kw = keyword.value.trim().toLowerCase()
|
||||
if (!kw) return list
|
||||
return list.filter(
|
||||
(t) =>
|
||||
t.title.toLowerCase().includes(kw) ||
|
||||
t.artistNames.toLowerCase().includes(kw) ||
|
||||
(t.album ?? '').toLowerCase().includes(kw)
|
||||
)
|
||||
})
|
||||
|
||||
// 大列表增量渲染
|
||||
const LIMIT = 120
|
||||
const limit = ref(LIMIT)
|
||||
const visibleList = computed(() => baseList.value.slice(0, limit.value))
|
||||
const hasMore = computed(() => baseList.value.length > limit.value)
|
||||
watch(baseList, () => (limit.value = LIMIT))
|
||||
|
||||
/** 已在歌单的曲目在「全部音乐」里不可重复勾选 */
|
||||
function isAlreadyIn(item: PlayableItem): boolean {
|
||||
return tab.value === 'all' && inPlaylistKeys.value.has(itemKey(item))
|
||||
}
|
||||
function isSelectable(item: PlayableItem): boolean {
|
||||
return !isAlreadyIn(item)
|
||||
}
|
||||
|
||||
const selectableKeys = computed(() =>
|
||||
baseList.value.filter((t) => isSelectable(t)).map(itemKey)
|
||||
)
|
||||
const allChecked = computed(
|
||||
() => selectableKeys.value.length > 0 && selectableKeys.value.every((k) => checked.value.has(k))
|
||||
)
|
||||
|
||||
function toggle(key: string) {
|
||||
const next = new Set(checked.value)
|
||||
if (next.has(key)) next.delete(key)
|
||||
else next.add(key)
|
||||
checked.value = next
|
||||
}
|
||||
function toggleAll() {
|
||||
checked.value = allChecked.value ? new Set() : new Set(selectableKeys.value)
|
||||
}
|
||||
|
||||
const selectedItems = computed(() => {
|
||||
const map = new Map<string, PlayableItem>()
|
||||
for (const t of baseList.value) map.set(itemKey(t), t)
|
||||
for (const t of playlist.value?.items ?? []) map.set(itemKey(t), t)
|
||||
const out: PlayableItem[] = []
|
||||
for (const k of checked.value) {
|
||||
const t = map.get(k)
|
||||
if (t) out.push(t)
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
const selectedCount = computed(() => checked.value.size)
|
||||
|
||||
// ===== 执行 =====
|
||||
function apply() {
|
||||
if (!playlist.value) return
|
||||
const n = selectedCount.value
|
||||
if (n === 0) return
|
||||
if (tab.value === 'all') {
|
||||
store.addToPlaylist(playlist.value.id, selectedItems.value)
|
||||
toast.success(`已添加 ${n} 首到「${playlist.value.name}」`)
|
||||
} else {
|
||||
store.removeItemsFromPlaylist(playlist.value.id, [...checked.value])
|
||||
toast.success(`已从「${playlist.value.name}」移除 ${n} 首`)
|
||||
}
|
||||
emit('update:open', false)
|
||||
}
|
||||
|
||||
const localEmpty = computed(() => store.localTracks.length === 0)
|
||||
async function scanLocal() {
|
||||
try {
|
||||
await store.scanLocal()
|
||||
toast.success(`已扫描到 ${store.localTracks.length} 首本地音乐`)
|
||||
} catch (e) {
|
||||
toast.error(String(e))
|
||||
}
|
||||
}
|
||||
|
||||
const durationText = (ms?: number) => (ms ? store.fmtDuration(ms / 1000) : '')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="open" @update:open="(v: boolean) => emit('update:open', v)">
|
||||
<DialogContent class="flex max-h-[80vh] flex-col overflow-hidden sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑歌单 · {{ playlist?.name || '' }}</DialogTitle>
|
||||
<DialogDescription>
|
||||
从全部音乐里勾选加入歌单，或切换到「已在歌单」批量移出。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs v-model="tab" class="flex flex-col">
|
||||
<div class="flex items-center gap-2">
|
||||
<TabsList class="grid w-[220px] shrink-0 grid-cols-2">
|
||||
<TabsTrigger value="all" class="gap-1.5">
|
||||
<Plus class="size-3.5" />全部音乐
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="inPlaylist" class="gap-1.5">
|
||||
<Minus class="size-3.5" />已在歌单
|
||||
<span class="text-xs text-muted-foreground">({{ playlist?.items.length ?? 0 }})</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<Input
|
||||
v-model="keyword"
|
||||
class="h-8 max-w-56"
|
||||
placeholder="搜索歌名 / 歌手 / 专辑"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ===== 全部音乐：来源筛选 ===== -->
|
||||
<div v-if="tab === 'all'" class="mt-2 flex items-center gap-1.5">
|
||||
<button
|
||||
v-for="opt in (['all', 'feiniu', 'local'] as const)"
|
||||
:key="opt"
|
||||
type="button"
|
||||
class="rounded-md border px-2 py-1 text-[11.5px] transition-colors"
|
||||
:class="
|
||||
sourceFilter === opt
|
||||
? 'border-primary bg-primary/10 text-foreground'
|
||||
: 'border-border text-muted-foreground hover:bg-accent/50'
|
||||
"
|
||||
@click="sourceFilter = opt"
|
||||
>
|
||||
{{ opt === 'all' ? '全部来源' : opt === 'feiniu' ? '飞牛曲库' : '本地曲库' }}
|
||||
</button>
|
||||
<span class="ml-1 text-[11.5px] text-muted-foreground">{{ baseList.length }} 首</span>
|
||||
|
||||
<label class="ml-auto flex cursor-pointer items-center gap-1.5 text-[11.5px] text-muted-foreground">
|
||||
<Checkbox
|
||||
:model-value="allChecked"
|
||||
:disabled="selectableKeys.length === 0"
|
||||
aria-label="全选当前列表"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
全选当前列表
|
||||
</label>
|
||||
</div>
|
||||
<div v-else class="mt-2 flex items-center gap-2">
|
||||
<span class="text-[11.5px] text-muted-foreground">{{ baseList.length }} 首</span>
|
||||
<label class="ml-auto flex cursor-pointer items-center gap-1.5 text-[11.5px] text-muted-foreground">
|
||||
<Checkbox
|
||||
:model-value="allChecked"
|
||||
:disabled="selectableKeys.length === 0"
|
||||
aria-label="全选当前列表"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
全选当前列表
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<TabsContent value="all" class="mt-2">
|
||||
<ScrollArea class="h-[min(320px,45vh)] rounded-md border">
|
||||
<div class="flex flex-col gap-0.5 p-1">
|
||||
<!-- 本地曲库未扫描 -->
|
||||
<div
|
||||
v-if="sourceFilter !== 'feiniu' && localEmpty"
|
||||
class="flex items-center gap-2 rounded-md border border-dashed px-3 py-2.5"
|
||||
>
|
||||
<FolderOpen class="size-4 shrink-0 text-muted-foreground" />
|
||||
<span class="text-[12px] text-muted-foreground">本地曲库尚未扫描，扫描后即可一起勾选。</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
class="ml-auto h-7 shrink-0"
|
||||
:disabled="store.localScanBusy"
|
||||
@click="scanLocal"
|
||||
>
|
||||
<Loader2 v-if="store.localScanBusy" class="size-3.5 animate-spin" />
|
||||
<span :class="store.localScanBusy ? 'ml-1.5' : ''">
|
||||
{{ store.localScanBusy ? '扫描中' : '扫描本地' }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="store.loading && !store.tracks.length"
|
||||
class="flex items-center justify-center gap-2 py-10 text-[12px] text-muted-foreground"
|
||||
>
|
||||
<Loader2 class="size-4 animate-spin" /> 加载曲库…
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-else-if="baseList.length === 0"
|
||||
class="py-10 text-center text-[12px] text-muted-foreground"
|
||||
>
|
||||
{{ keyword.trim() ? '没有匹配的曲目' : '没有可添加的曲目' }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-for="item in visibleList"
|
||||
:key="itemKey(item)"
|
||||
type="button"
|
||||
class="flex h-11 items-center gap-3 rounded-md px-2 text-left transition-colors"
|
||||
:class="
|
||||
isSelectable(item)
|
||||
? 'hover:bg-accent/50'
|
||||
: 'cursor-not-allowed opacity-55'
|
||||
"
|
||||
:disabled="!isSelectable(item)"
|
||||
@click="toggle(itemKey(item))"
|
||||
>
|
||||
<span
|
||||
class="flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors"
|
||||
:class="
|
||||
checked.has(itemKey(item))
|
||||
? 'border-primary bg-primary text-primary-foreground'
|
||||
: 'border-input'
|
||||
"
|
||||
>
|
||||
<Check v-if="checked.has(itemKey(item))" class="size-3" />
|
||||
</span>
|
||||
|
||||
<span class="flex size-8 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
|
||||
<HardDrive v-if="item.source === 'local'" class="size-3.5" />
|
||||
<Music2 v-else class="size-3.5" />
|
||||
</span>
|
||||
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="block truncate text-[13px]">{{ item.title }}</span>
|
||||
<span class="block truncate text-[11.5px] text-muted-foreground">
|
||||
{{ item.artistNames || '—' }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="isAlreadyIn(item)"
|
||||
class="shrink-0 rounded border border-border px-1.5 py-0.5 text-[10.5px] text-muted-foreground"
|
||||
>
|
||||
已加入
|
||||
</span>
|
||||
<span class="shrink-0 text-[11.5px] tabular-nums text-muted-foreground">
|
||||
{{ durationText(item.durationMs) }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="flex items-center justify-center gap-2 py-2">
|
||||
<Button
|
||||
v-if="hasMore"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="text-[11.5px] text-muted-foreground"
|
||||
@click="limit += LIMIT"
|
||||
>
|
||||
显示更多（还剩 {{ baseList.length - limit }} 首）
|
||||
</Button>
|
||||
<Button
|
||||
v-if="sourceFilter !== 'local' && store.hasMoreTracks"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="text-[11.5px] text-muted-foreground"
|
||||
:disabled="store.loadingMore"
|
||||
@click="store.loadMoreTracks()"
|
||||
>
|
||||
<Loader2 v-if="store.loadingMore" class="size-3.5 animate-spin" />
|
||||
<span :class="store.loadingMore ? 'ml-1.5' : ''">
|
||||
{{ store.loadingMore ? '加载中' : '继续加载飞牛曲库' }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
<!-- ===== 已在歌单：批量移出 ===== -->
|
||||
<TabsContent value="inPlaylist" class="mt-2">
|
||||
<ScrollArea class="h-[min(320px,45vh)] rounded-md border">
|
||||
<div class="flex flex-col gap-0.5 p-1">
|
||||
<p
|
||||
v-if="baseList.length === 0"
|
||||
class="py-10 text-center text-[12px] text-muted-foreground"
|
||||
>
|
||||
{{ keyword.trim() ? '没有匹配的曲目' : '这个歌单还没有歌曲' }}
|
||||
</p>
|
||||
<button
|
||||
v-for="item in visibleList"
|
||||
:key="itemKey(item)"
|
||||
type="button"
|
||||
class="flex h-11 items-center gap-3 rounded-md px-2 text-left transition-colors hover:bg-accent/50"
|
||||
@click="toggle(itemKey(item))"
|
||||
>
|
||||
<span
|
||||
class="flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors"
|
||||
:class="
|
||||
checked.has(itemKey(item))
|
||||
? 'border-destructive bg-destructive text-white'
|
||||
: 'border-input'
|
||||
"
|
||||
>
|
||||
<Minus v-if="checked.has(itemKey(item))" class="size-3" />
|
||||
</span>
|
||||
|
||||
<span class="flex size-8 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
|
||||
<HardDrive v-if="item.source === 'local'" class="size-3.5" />
|
||||
<Music2 v-else class="size-3.5" />
|
||||
</span>
|
||||
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="block truncate text-[13px]">{{ item.title }}</span>
|
||||
<span class="block truncate text-[11.5px] text-muted-foreground">
|
||||
{{ item.artistNames || '—' }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="shrink-0 text-[11.5px] tabular-nums text-muted-foreground">
|
||||
{{ durationText(item.durationMs) }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div v-if="hasMore" class="flex justify-center py-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="text-[11.5px] text-muted-foreground"
|
||||
@click="limit += LIMIT"
|
||||
>
|
||||
显示更多（还剩 {{ baseList.length - limit }} 首）
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<DialogFooter class="items-center gap-2 sm:justify-between">
|
||||
<span class="text-[12px] text-muted-foreground">
|
||||
已选 <span class="font-medium text-foreground">{{ selectedCount }}</span> 首
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" @click="emit('update:open', false)">取消</Button>
|
||||
<Button
|
||||
:variant="tab === 'inPlaylist' ? 'destructive' : 'default'"
|
||||
:disabled="selectedCount === 0"
|
||||
@click="apply"
|
||||
>
|
||||
{{ tab === 'inPlaylist' ? `移除 ${selectedCount} 首` : `添加 ${selectedCount} 首` }}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -1,7 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { Cloud, Music2, MoreHorizontal, Play, Plus } from '@lucide/vue'
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
Cloud,
|
||||
FolderOpen,
|
||||
HardDrive,
|
||||
ListPlus,
|
||||
MoreHorizontal,
|
||||
Music2,
|
||||
Play,
|
||||
Plus,
|
||||
Trash2
|
||||
} from '@lucide/vue'
|
||||
import type { PlayableItem } from '@/stores/feiniuStore'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import { Button } from '@/components/ui/button'
|
||||
@@ -17,10 +29,26 @@ import {
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
|
||||
const props = defineProps<{
|
||||
item: PlayableItem
|
||||
active?: boolean
|
||||
}>()
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
item: PlayableItem
|
||||
/** 是否为当前播放项 */
|
||||
active?: boolean
|
||||
/** 列表内序号（从 0 开始） */
|
||||
index?: number
|
||||
/** 播放上下文：点击播放时以该列表建立队列 */
|
||||
context?: PlayableItem[]
|
||||
/** 显示专辑列 */
|
||||
showAlbum?: boolean
|
||||
/** 显示来源标识（歌单等混排列表） */
|
||||
showSource?: boolean
|
||||
/** 所属歌单 id（提供时可从菜单移除 / 移动） */
|
||||
playlistId?: string
|
||||
/** 歌单内的序号（用于移除 / 移动） */
|
||||
playlistIndex?: number
|
||||
}>(),
|
||||
{ active: false, index: 0, showAlbum: false, showSource: false }
|
||||
)
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
@@ -28,10 +56,38 @@ const coverUrl = computed(() => {
|
||||
if (props.item.source === 'feiniu' && props.item.coverId && store.mediaPrefix) {
|
||||
return `${store.mediaPrefix}/cover?coverId=${encodeURIComponent(props.item.coverId)}&size=64`
|
||||
}
|
||||
return ''
|
||||
return props.item.coverUrl ?? ''
|
||||
})
|
||||
const coverFailed = ref(false)
|
||||
|
||||
const durationText = computed(() =>
|
||||
store.fmtDuration(props.item.durationMs ? props.item.durationMs / 1000 : undefined)
|
||||
)
|
||||
/** 本地文件没有时长信息时，退化为展示文件大小 */
|
||||
const fallbackText = computed(() => {
|
||||
if (props.item.durationMs) return ''
|
||||
const n = props.item.size
|
||||
if (!n || n <= 0) return ''
|
||||
if (n >= 1048576) return `${(n / 1048576).toFixed(1)} MB`
|
||||
if (n >= 1024) return `${(n / 1024).toFixed(0)} KB`
|
||||
return `${n} B`
|
||||
})
|
||||
|
||||
const durationText = computed(() => store.fmtDuration(props.item.durationMs ? props.item.durationMs / 1000 : undefined))
|
||||
const isCurrent = computed(
|
||||
() =>
|
||||
props.active ||
|
||||
(store.queueIndex >= 0 &&
|
||||
store.nowPlaying?.guid === props.item.guid &&
|
||||
store.nowPlaying?.source === props.item.source)
|
||||
)
|
||||
|
||||
const playlistLength = computed(
|
||||
() => (props.playlistId ? store.playlists.find((p) => p.id === props.playlistId)?.items.length ?? 1 : 1)
|
||||
)
|
||||
|
||||
function play() {
|
||||
store.playItem(props.item, props.context)
|
||||
}
|
||||
|
||||
function addToPlaylist(playlistId: string) {
|
||||
store.addToPlaylist(playlistId, [props.item])
|
||||
@@ -50,70 +106,149 @@ async function uploadToFeiniu() {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="group flex items-center gap-3 rounded-lg border px-3 py-2 transition-colors"
|
||||
:class="active ? 'border-primary bg-primary/10' : 'border-border hover:bg-muted/40'"
|
||||
class="group grid h-11 items-center gap-3 rounded-md px-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50"
|
||||
:class="[
|
||||
showAlbum
|
||||
? 'grid-cols-[28px_36px_minmax(0,1fr)_minmax(0,0.75fr)_74px_28px]'
|
||||
: 'grid-cols-[28px_36px_minmax(0,1fr)_74px_28px]',
|
||||
isCurrent ? 'bg-accent/60' : 'hover:bg-accent/40'
|
||||
]"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@dblclick="play"
|
||||
@keydown.enter.prevent="play"
|
||||
>
|
||||
<!-- 序号 / 播放态指示：悬停时原位切换，不占用固定的空白列 -->
|
||||
<div class="flex size-7 items-center justify-center text-[11.5px] tabular-nums text-muted-foreground">
|
||||
<span v-if="isCurrent" class="music-eq" :class="{ 'is-paused': !store.playing }"><i /><i /><i /></span>
|
||||
<template v-else>
|
||||
<span class="group-hover:hidden">{{ index + 1 }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="hidden text-foreground group-hover:block"
|
||||
:aria-label="'播放 ' + item.title"
|
||||
@click.stop="play"
|
||||
>
|
||||
<Play class="size-3.5" />
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 封面 -->
|
||||
<img
|
||||
v-if="coverUrl"
|
||||
v-if="coverUrl && !coverFailed"
|
||||
:src="coverUrl"
|
||||
class="size-10 shrink-0 rounded-md object-cover"
|
||||
class="size-9 rounded object-cover"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
@error="($event.target as HTMLImageElement).style.display = 'none'"
|
||||
referrerpolicy="no-referrer"
|
||||
@error="coverFailed = true"
|
||||
/>
|
||||
<div v-else class="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
||||
<div v-else class="flex size-9 items-center justify-center rounded bg-muted text-muted-foreground">
|
||||
<Music2 class="size-4" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity group-hover:opacity-100"
|
||||
:disabled="store.playing && store.current?.guid === item.guid"
|
||||
@click="store.playItem(item)"
|
||||
>
|
||||
<Play class="size-4 translate-x-[1px]" />
|
||||
</button>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm font-medium">{{ item.title }}</div>
|
||||
<div class="truncate text-xs text-muted-foreground">
|
||||
{{ item.artistNames }}<template v-if="item.artistNames && item.album"> · </template>{{ item.album }}
|
||||
<span v-if="item.source === 'local'" class="ml-1 rounded bg-muted px-1 text-[10px]">本地</span>
|
||||
<!-- 标题 + 元信息 -->
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="truncate text-[13px]" :class="isCurrent ? 'font-medium text-foreground' : ''">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span
|
||||
v-if="showSource"
|
||||
class="shrink-0 text-muted-foreground"
|
||||
:title="item.source === 'local' ? '本地文件' : '飞牛 NAS'"
|
||||
>
|
||||
<HardDrive v-if="item.source === 'local'" class="size-3" />
|
||||
<Cloud v-else class="size-3" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="truncate text-[11.5px] text-muted-foreground">{{ item.artistNames || '—' }}</div>
|
||||
</div>
|
||||
|
||||
<span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ durationText }}</span>
|
||||
<!-- 专辑 -->
|
||||
<div v-if="showAlbum" class="truncate text-[11.5px] text-muted-foreground">
|
||||
{{ item.album || '' }}
|
||||
</div>
|
||||
|
||||
<!-- 时长（本地无时长时退化为文件大小） -->
|
||||
<div class="text-right text-[11.5px] tabular-nums text-muted-foreground">
|
||||
<span v-if="item.durationMs">{{ durationText }}</span>
|
||||
<span v-else-if="fallbackText" class="text-[11px]">{{ fallbackText }}</span>
|
||||
<span v-else>--:--</span>
|
||||
</div>
|
||||
|
||||
<!-- 操作菜单 -->
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button size="icon" variant="ghost" class="size-8">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
class="size-7 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:opacity-100"
|
||||
:aria-label="'更多操作：' + item.title"
|
||||
>
|
||||
<MoreHorizontal class="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" class="w-48">
|
||||
<DropdownMenuLabel>{{ item.title }}</DropdownMenuLabel>
|
||||
<DropdownMenuLabel class="truncate">{{ item.title }}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="store.playItem(item)">
|
||||
<DropdownMenuItem @click="play">
|
||||
<Play class="size-4" /> 播放
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
v-if="item.source === 'local' && store.fnosLoggedIn && store.libraryNasPath"
|
||||
:disabled="store.uploading"
|
||||
@click="uploadToFeiniu"
|
||||
>
|
||||
<Cloud class="size-4" /> 上传到飞牛曲库
|
||||
<DropdownMenuItem @click="store.playNext(item); toast.success('已加入下一首')">
|
||||
<ListPlus class="size-4" /> 下一首播放
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="store.addToQueue(item); toast.success('已加入队列')">
|
||||
<Plus class="size-4" /> 加入队列
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<Plus class="size-4" /> 加入歌单
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent class="w-48 max-h-64 overflow-y-auto">
|
||||
<DropdownMenuSubContent class="max-h-64 w-48 overflow-y-auto">
|
||||
<DropdownMenuItem v-if="store.playlists.length === 0" disabled>还没有歌单</DropdownMenuItem>
|
||||
<DropdownMenuItem v-for="p in store.playlists" :key="p.id" @click="addToPlaylist(p.id)">
|
||||
{{ p.name }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
|
||||
<template v-if="item.source === 'local'">
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
v-if="store.webdavReady"
|
||||
:disabled="store.uploading"
|
||||
@click="uploadToFeiniu"
|
||||
>
|
||||
<Cloud class="size-4" /> 上传到飞牛曲库
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled>
|
||||
<FolderOpen class="size-4" /> {{ item.dir || '未知目录' }}
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
|
||||
<template v-if="playlistId">
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
:disabled="(playlistIndex ?? 0) <= 0"
|
||||
@click="store.moveInPlaylist(playlistId, playlistIndex ?? 0, (playlistIndex ?? 0) - 1)"
|
||||
>
|
||||
<ArrowUp class="size-4" /> 上移
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
:disabled="(playlistIndex ?? 0) >= playlistLength - 1"
|
||||
@click="store.moveInPlaylist(playlistId, playlistIndex ?? 0, (playlistIndex ?? 0) + 1)"
|
||||
>
|
||||
<ArrowDown class="size-4" /> 下移
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-destructive focus:text-destructive"
|
||||
@click="store.removeFromPlaylist(playlistId, playlistIndex ?? 0)"
|
||||
>
|
||||
<Trash2 class="size-4" /> 从歌单移除
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
@@ -1,37 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { HardDriveDownload, Trash2 } from '@lucide/vue'
|
||||
import { HardDriveDownload, Loader2, RefreshCw, Trash2 } from '@lucide/vue'
|
||||
import { useFeiniuStore } from '@/stores/feiniuStore'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
|
||||
const store = useFeiniuStore()
|
||||
|
||||
const cacheMax = ref(5)
|
||||
const cacheEnabled = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
await store.init()
|
||||
cacheMode.value = store.cacheMode
|
||||
cacheMax.value = 5
|
||||
/** 开关状态直接由 store.cacheMode 派生，避免与此前一样出现「开关显示关闭但实际在缓存」 */
|
||||
const cacheEnabled = computed({
|
||||
get: () => store.cacheMode === 'cache',
|
||||
set: (v: boolean) => store.setCacheMode(v ? 'cache' : 'stream')
|
||||
})
|
||||
|
||||
// 本地持久化缓存设置（后端 cache_fetch 用 settings.feiniu_cache_max_gb；这里给个默认）
|
||||
const cacheMode = ref<'stream' | 'cache'>(store.cacheMode)
|
||||
const usedMb = computed(() => Math.round((store.cacheStatus.usedMb ?? 0) * 10) / 10)
|
||||
|
||||
function setMode(v: unknown) {
|
||||
const mode = v === 'cache' ? 'cache' : 'stream'
|
||||
cacheMode.value = mode
|
||||
store.setCacheMode(mode)
|
||||
toast.success(mode === 'cache' ? '已开启缓存后播放' : '已切换为直连流式播放')
|
||||
}
|
||||
onMounted(() => {
|
||||
void store.ensureCacheStatus()
|
||||
})
|
||||
|
||||
function setEnabled(v: boolean) {
|
||||
cacheEnabled.value = v
|
||||
if (!v) store.setCacheMode('stream')
|
||||
async function refresh() {
|
||||
await store.ensureCacheStatus()
|
||||
toast.success('缓存状态已刷新')
|
||||
}
|
||||
|
||||
async function clearAll() {
|
||||
@@ -41,43 +33,42 @@ async function clearAll() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<HardDriveDownload class="size-4 text-muted-foreground" />
|
||||
<Label class="font-medium">播放缓存</Label>
|
||||
<Label class="font-medium">缓存后播放</Label>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
缓存后播放：把 NAS 音频缓存到本机（{{ store.cacheStatus.usedMb }} MB / {{ store.cacheStatus.count }} 首），
|
||||
超出上限自动按 LRU 淘汰。直连流式则每次在线拉取。
|
||||
<p class="mt-1 text-[11.5px] text-muted-foreground">
|
||||
开启后先把 NAS 音频缓存到本机再播放（首播需要等待整首下载完成）；关闭则直连流式播放，
|
||||
边下边播、拖动即时生效，但每次都要联网拉取。
|
||||
</p>
|
||||
</div>
|
||||
<Switch v-model:model-value="cacheEnabled" @update:model-value="setEnabled" />
|
||||
<Switch v-model="cacheEnabled" class="mt-0.5 shrink-0" />
|
||||
</div>
|
||||
|
||||
<template v-if="cacheEnabled">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label class="text-muted-foreground">播放模式</Label>
|
||||
<Select :model-value="cacheMode" @update:model-value="setMode">
|
||||
<SelectTrigger class="w-44">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="stream">直连流式</SelectItem>
|
||||
<SelectItem value="cache">缓存后播放</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div class="flex items-center justify-between gap-4 rounded-lg border bg-card px-3 py-2">
|
||||
<div class="flex items-center gap-2 text-[12.5px]">
|
||||
<span class="text-muted-foreground">当前占用</span>
|
||||
<span class="tabular-nums">{{ usedMb }} MB</span>
|
||||
<span class="text-muted-foreground">· {{ store.cacheStatus.count }} 首</span>
|
||||
<span class="text-[11.5px] text-muted-foreground/80">（超出上限按 LRU 自动淘汰）</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<Label class="text-muted-foreground">当前占用</Label>
|
||||
<span class="text-sm tabular-nums">{{ store.cacheStatus.usedMb }} MB（{{ store.cacheStatus.count }} 首）</span>
|
||||
<div class="flex shrink-0 items-center gap-1.5">
|
||||
<Button variant="ghost" size="icon" class="size-8" title="刷新" @click="refresh">
|
||||
<RefreshCw class="size-3.5" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" class="text-destructive" :disabled="!store.cacheStatus.count" @click="clearAll">
|
||||
<Trash2 class="size-3.5" />
|
||||
<span class="ml-1.5">清空缓存</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" size="sm" class="text-destructive" @click="clearAll">
|
||||
<Trash2 class="size-4" /> 清空缓存
|
||||
</Button>
|
||||
</template>
|
||||
<p class="flex items-center gap-1.5 text-[11.5px] text-muted-foreground">
|
||||
<Loader2 class="size-3" />
|
||||
切换缓存模式不会中断当前播放，下一首起按新模式取流。
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { Check, Cloud, Loader2, Pencil, Plus, Power, Trash2 } from '@lucide/vue'
|
||||
import { Check, CircleCheck, Loader2, LogOut, Pencil, Plus, Trash2 } from '@lucide/vue'
|
||||
import { useFeiniuStore, type FeiniuConnection } from '@/stores/feiniuStore'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
@@ -22,10 +22,6 @@ const editing = ref<Partial<FeiniuConnection> | null>(null)
|
||||
const editOpen = ref(false)
|
||||
const password = ref('')
|
||||
const testing = ref(false)
|
||||
const fnosPassword = ref('')
|
||||
const fnosFormOpen = ref(false)
|
||||
/** 目标 fnOS 登录连接 */
|
||||
const fnosTarget = ref<FeiniuConnection | null>(null)
|
||||
|
||||
function newForm() {
|
||||
editing.value = { name: '', kind: 'lan', baseUrl: '', username: '', accessCode: '', insecure: false, fnId: '' }
|
||||
@@ -39,12 +35,6 @@ function editForm(c: FeiniuConnection) {
|
||||
editOpen.value = true
|
||||
}
|
||||
|
||||
function openFnosLogin(c: FeiniuConnection) {
|
||||
fnosTarget.value = c
|
||||
fnosPassword.value = ''
|
||||
fnosFormOpen.value = true
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!editing.value) return
|
||||
if (!editing.value.name?.trim() || !editing.value.baseUrl?.trim()) {
|
||||
@@ -103,21 +93,6 @@ async function remove(c: FeiniuConnection) {
|
||||
toast.success('已删除')
|
||||
}
|
||||
|
||||
async function fnosLogin() {
|
||||
if (!fnosTarget.value) return
|
||||
if (!fnosPassword.value) {
|
||||
toast.error('请输入 NAS 密码')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await store.fnosLogin(fnosTarget.value.username, fnosPassword.value)
|
||||
fnosFormOpen.value = false
|
||||
toast.success('NAS 文件服务已连接')
|
||||
} catch (e) {
|
||||
toast.error(String(e))
|
||||
}
|
||||
}
|
||||
|
||||
function kindLabel(k: string) {
|
||||
return k === 'lan' ? '局域网' : k === 'frp' ? 'frp 域名' : 'FnConnect'
|
||||
}
|
||||
@@ -154,19 +129,39 @@ onMounted(() => store.refreshConnections())
|
||||
<span v-if="c.loggedIn" class="mr-1 flex items-center gap-1 text-xs text-emerald-600">
|
||||
<Check class="size-3.5" /> 已登录
|
||||
</span>
|
||||
<Button v-if="store.activeId !== c.id" variant="ghost" size="icon" class="size-8" @click="activate(c)">
|
||||
<Power class="size-4" />
|
||||
<Button
|
||||
v-if="store.activeId !== c.id"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-8"
|
||||
:title="`设为激活连接（${c.name}）`"
|
||||
:aria-label="`设为激活连接 ${c.name}`"
|
||||
@click="activate(c)"
|
||||
>
|
||||
<CircleCheck class="size-4" />
|
||||
</Button>
|
||||
<Button v-if="store.activeId === c.id && !store.fnosLoggedIn" variant="ghost" size="icon" class="size-8" :title="`连接 NAS 文件服务（${c.username}）`" @click="openFnosLogin(c)">
|
||||
<Cloud class="size-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" class="size-8" @click="editForm(c)">
|
||||
<Button variant="ghost" size="icon" class="size-8" title="编辑连接" aria-label="编辑连接" @click="editForm(c)">
|
||||
<Pencil class="size-4" />
|
||||
</Button>
|
||||
<Button v-if="c.loggedIn" variant="ghost" size="icon" class="size-8" @click="logout(c)">
|
||||
<Power class="size-4" />
|
||||
<Button
|
||||
v-if="c.loggedIn"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-8"
|
||||
title="登出"
|
||||
aria-label="登出"
|
||||
@click="logout(c)"
|
||||
>
|
||||
<LogOut class="size-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" class="size-8 text-destructive" @click="remove(c)">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-8 text-destructive"
|
||||
title="删除连接"
|
||||
aria-label="删除连接"
|
||||
@click="remove(c)"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@@ -234,24 +229,9 @@ onMounted(() => store.refreshConnections())
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- fnOS 文件服务登录（上传到飞牛用） -->
|
||||
<Dialog v-model:open="fnosFormOpen">
|
||||
<DialogContent class="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>连接 NAS 文件服务</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
账号：{{ fnosTarget?.username }}。连接后即可把本地音乐上传到飞牛曲库目录、从曲库删除音乐。
|
||||
</p>
|
||||
<div class="space-y-1.5">
|
||||
<Label>NAS 密码</Label>
|
||||
<Input v-model="fnosPassword" type="password" placeholder="NAS 登录密码" @keydown.enter="fnosLogin" />
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="fnosFormOpen = false">取消</Button>
|
||||
<Button @click="fnosLogin">连接</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
提示：上传音乐到 NAS（「下载到飞牛」/ 上传 / 删除）已改用 <strong class="font-medium">WebDAV</strong>，
|
||||
在「存储与上传」分组里配置，无需在此登录文件服务。
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -3,9 +3,9 @@ import type { SearchIndexItem } from '@/stores/searchIndex'
|
||||
|
||||
const searchItems: SearchIndexItem[] = [
|
||||
{
|
||||
title: '我的音乐',
|
||||
description: '飞牛 NAS 曲库 / 本地曲库 / 自定义歌单与内嵌播放器',
|
||||
keywords: ['音乐', 'music', '飞牛', 'NAS', '曲库', '歌单', '播放', '本地'],
|
||||
title: '曲库',
|
||||
description: '飞牛 NAS 曲库 / 本地曲库 / 自定义歌单，标题栏播放控制',
|
||||
keywords: ['音乐', 'music', '曲库', '我的音乐', '飞牛', 'NAS', '歌单', '播放', '本地', '歌词', '队列'],
|
||||
tab: 'mymusic'
|
||||
},
|
||||
{
|
||||
@@ -43,5 +43,6 @@ export const moduleConfig: ModuleConfig = {
|
||||
.catch(() => {})
|
||||
}
|
||||
},
|
||||
order: 55
|
||||
// 默认排在「代理」之后、整体第二位（proxy=10、clipboard=20）
|
||||
order: 15
|
||||
}
|
||||
|
||||
+17
-1
@@ -59,6 +59,8 @@ export const useAppStore = defineStore('app', () => {
|
||||
const isAutoStart = ref(false)
|
||||
const silentAutoStart = ref(false)
|
||||
const isInitialized = ref(false)
|
||||
/** 模块排序一次性迁移标记（音乐 → 代理之后），随设置持久化 */
|
||||
let musicOrderMigrated = false
|
||||
const modules = ref<ModuleInfo[]>(initModulesFromRegistry())
|
||||
const moduleOrder = ref<string[]>(initModuleOrder())
|
||||
|
||||
@@ -111,6 +113,19 @@ export const useAppStore = defineStore('app', () => {
|
||||
const known = savedOrder.filter(id => allUserIds.includes(id))
|
||||
const newlyAdded = allUserIds.filter(id => !savedOrder.includes(id))
|
||||
moduleOrder.value = [...known, ...newlyAdded]
|
||||
|
||||
// 一次性迁移：音乐模块默认排序调整为「代理之后、整体第二位」。
|
||||
// 迁移后写入标记，尊重用户后续手动拖动的新排序。
|
||||
if (!settings.musicOrderMigrated) {
|
||||
const musicIdx = moduleOrder.value.indexOf('music')
|
||||
if (musicIdx !== -1) {
|
||||
moduleOrder.value.splice(musicIdx, 1)
|
||||
const proxyIdx = moduleOrder.value.indexOf('proxy')
|
||||
moduleOrder.value.splice(proxyIdx === -1 ? 0 : proxyIdx + 1, 0, 'music')
|
||||
}
|
||||
saveSettings()
|
||||
}
|
||||
musicOrderMigrated = true
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
@@ -132,7 +147,8 @@ export const useAppStore = defineStore('app', () => {
|
||||
isAutoStart: isAutoStart.value,
|
||||
silentAutoStart: silentAutoStart.value,
|
||||
modules: modulesData,
|
||||
moduleOrder: moduleOrder.value
|
||||
moduleOrder: moduleOrder.value,
|
||||
musicOrderMigrated
|
||||
}))
|
||||
} catch {
|
||||
console.error('Failed to save settings to localStorage')
|
||||
|
||||
+595
-166
File diff suppressed because it is too large
Load Diff
+33
-13
@@ -224,10 +224,27 @@ export const useMusicStore = defineStore('music', () => {
|
||||
// 任务历史持久化（localStorage，应用重启后保留记录；恢复时不尝试续传）
|
||||
const TASKS_KEY = 'thing.music.tasks'
|
||||
const MAX_TASKS = 30
|
||||
/** 单次持久化的体积上限：超过则剥离 rawSearch（懒解析字段）后重试，避免撑爆 localStorage 配额 */
|
||||
const MAX_PERSIST_CHARS = 1_500_000
|
||||
let persistTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
/** 剥离仅解析期使用的重字段（只影响「重新下载」对懒解析歌曲的能力） */
|
||||
function stripHeavy(s: MusicSong): MusicSong {
|
||||
const { rawSearch, defaultDownloadHeaders, defaultDownloadCookies, ...rest } = s
|
||||
void rawSearch
|
||||
void defaultDownloadHeaders
|
||||
void defaultDownloadCookies
|
||||
return rest
|
||||
}
|
||||
|
||||
function persistTasks() {
|
||||
const base = tasks.value.slice(0, MAX_TASKS)
|
||||
try {
|
||||
localStorage.setItem(TASKS_KEY, JSON.stringify(tasks.value.slice(0, MAX_TASKS)))
|
||||
let payload = JSON.stringify(base)
|
||||
if (payload.length > MAX_PERSIST_CHARS) {
|
||||
payload = JSON.stringify(base.map((t) => ({ ...t, songsData: t.songsData.map(stripHeavy) })))
|
||||
}
|
||||
localStorage.setItem(TASKS_KEY, payload)
|
||||
} catch {
|
||||
// localStorage 不可用/超限时静默降级（仅影响历史记录）
|
||||
}
|
||||
@@ -314,10 +331,11 @@ export const useMusicStore = defineStore('music', () => {
|
||||
} else if (type === 'done') {
|
||||
const st = task.songs.find((s) => s.key === ev.key)
|
||||
if (st) {
|
||||
// 幂等：重复的 done 事件（断点续传/重发）不再累加 doneCount
|
||||
if (st.status !== 'done') task.doneCount++
|
||||
st.status = 'done'
|
||||
st.downloaded = st.total || st.downloaded
|
||||
}
|
||||
task.doneCount++
|
||||
} else if (type === 'error') {
|
||||
const st = task.songs.find((s) => s.key === ev.key)
|
||||
if (st) {
|
||||
@@ -350,14 +368,15 @@ export const useMusicStore = defineStore('music', () => {
|
||||
)
|
||||
}
|
||||
|
||||
/** 懒解析：解析单首歌曲的真实下载链接（试听前调用），成功后原地更新
|
||||
* 搜索结果并返回带链接的最新歌曲对象；失败返回 null */
|
||||
async function resolveSong(source: string, index: number): Promise<MusicSong | null> {
|
||||
/** 懒解析：解析单首歌曲的真实下载链接（试听/上传前调用），成功后原地更新
|
||||
* 搜索结果并返回带链接的最新歌曲对象；失败返回 null。
|
||||
* `quality` 为音质档位 label（"" = 最高），解析时按「≤所选最优档」封顶。 */
|
||||
async function resolveSong(source: string, index: number, quality = ''): Promise<MusicSong | null> {
|
||||
const song = results.value[source]?.[index]
|
||||
if (!song) return null
|
||||
if (song.downloadUrl) return song
|
||||
if (!song.rawSearch) return null
|
||||
const v = (await invoke('music_resolve', { song })) as {
|
||||
const v = (await invoke('music_resolve', { song, quality })) as {
|
||||
songs: (MusicSong | null)[]
|
||||
}
|
||||
const resolved = v.songs?.[0]
|
||||
@@ -369,8 +388,8 @@ export const useMusicStore = defineStore('music', () => {
|
||||
return resolved
|
||||
}
|
||||
|
||||
/** 启动下载。engine='rust' 时交给下载器模块（任务在其列表中管理），返回跳过的无链接歌曲数；
|
||||
* 否则走 musicdl 桥接，返回 0 */
|
||||
/** 启动下载。engine='rust' 时交给下载器模块（任务在其列表中管理）；
|
||||
* 否则走 musicdl 桥接。返回实际使用的引擎与跳过的无链接歌曲数 */
|
||||
async function startDownload(
|
||||
songs: MusicSong[],
|
||||
opts: {
|
||||
@@ -383,8 +402,8 @@ export const useMusicStore = defineStore('music', () => {
|
||||
/** 目标音质 label（"" 表示最高）；解析下载时按「≤所选最优档」封顶 */
|
||||
quality?: string
|
||||
}
|
||||
): Promise<number> {
|
||||
if (songs.length === 0) return 0
|
||||
): Promise<{ engine: 'musicdl' | 'rust'; skipped: number; taskId?: string }> {
|
||||
if (songs.length === 0) return { engine: 'musicdl', skipped: 0 }
|
||||
await ensureDownloadListener()
|
||||
const quality = opts.quality ?? ''
|
||||
|
||||
@@ -426,7 +445,7 @@ export const useMusicStore = defineStore('music', () => {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
return skipped
|
||||
return { engine: 'rust', skipped }
|
||||
}
|
||||
|
||||
const taskId = crypto.randomUUID()
|
||||
@@ -468,7 +487,7 @@ export const useMusicStore = defineStore('music', () => {
|
||||
task.errorMessage = String(e)
|
||||
throw e
|
||||
}
|
||||
return 0
|
||||
return { engine: 'musicdl', skipped: 0, taskId }
|
||||
}
|
||||
|
||||
async function cancelDownload(taskId: string) {
|
||||
@@ -520,7 +539,8 @@ export const useMusicStore = defineStore('music', () => {
|
||||
proxyUrl: proxy,
|
||||
engine: s.downloadEngine,
|
||||
maxConcurrent: s.maxConcurrent,
|
||||
quality: s.defaultDownloadQuality ?? ''
|
||||
// 沿用原任务的目标音质（"最高" 存为空串），而不是当前默认音质
|
||||
quality: task.quality ?? s.defaultDownloadQuality ?? ''
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -245,3 +245,40 @@ input, textarea, [contenteditable='true'] {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* 音乐：正在播放的跳动均衡器指示（列表行与播放队列共用） */
|
||||
.music-eq {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 12px;
|
||||
}
|
||||
.music-eq > i {
|
||||
display: block;
|
||||
width: 2.5px;
|
||||
border-radius: 1px;
|
||||
background: var(--primary);
|
||||
animation: musicEqBounce 0.9s ease-in-out infinite;
|
||||
}
|
||||
.music-eq > i:nth-child(1) {
|
||||
height: 6px;
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
.music-eq > i:nth-child(2) {
|
||||
height: 12px;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.music-eq > i:nth-child(3) {
|
||||
height: 8px;
|
||||
animation-delay: -0.35s;
|
||||
}
|
||||
.music-eq.is-paused > i {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
@keyframes musicEqBounce {
|
||||
0%, 100% { transform: scaleY(0.45); }
|
||||
50% { transform: scaleY(1); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.music-eq > i { animation: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user