添加附件
@@ -119,6 +165,11 @@ import {
deletePiece,
uploadAttachments,
deleteAttachment,
+ listTags,
+ listPlaylists,
+ playlistAddPiece,
+ playlistRemovePiece,
+ getPlaylist,
} from '../lib/api.js'
const props = defineProps({ id: { type: Number, required: true } })
@@ -138,6 +189,14 @@ const form = reactive({
const savingMeta = ref(false)
const savedFlash = ref(false)
+const tags = ref([]) // 当前 piece 的 tags 数组
+const allTags = ref([]) // 全局所有 tags（用于 datalist 提示）
+const tagInput = ref('')
+
+const playlists = ref([]) // 全部 playlists
+const memberPlaylists = ref([]) // 当前 piece 在哪些 playlists 里（id 集合）
+const addToPlaylistId = ref('')
+
const fileInputEl = ref(null)
const pendingFiles = ref([])
const uploadRole = ref(null)
@@ -156,6 +215,20 @@ async function load() {
form.category = p.category || ''
form.lyrics = p.lyrics || ''
form.notes = p.notes || ''
+ tags.value = [...(p.tags || [])]
+ // 全局 tag 列表 + 我所属的 playlists
+ const [allT, allPl] = await Promise.all([listTags(), listPlaylists()])
+ allTags.value = allT || []
+ playlists.value = allPl || []
+ // 反查所属：每个 playlist 拿 detail，看 pieces 包含 props.id 否
+ const memberships = await Promise.all(
+ (allPl || []).map(pl =>
+ getPlaylist(pl.id)
+ .then(d => (d.pieces || []).some(x => x.id === props.id) ? pl.id : null)
+ .catch(() => null)
+ )
+ )
+ memberPlaylists.value = memberships.filter(x => x != null)
} catch (e) {
loadErr.value = e.message || String(e)
} finally {
@@ -163,6 +236,39 @@ async function load() {
}
}
+function addTag() {
+ const v = tagInput.value.trim()
+ if (!v) return
+ if (!tags.value.includes(v)) tags.value.push(v)
+ tagInput.value = ''
+}
+
+function removeTag(t) {
+ tags.value = tags.value.filter(x => x !== t)
+}
+
+async function joinPlaylist() {
+ const pid = parseInt(addToPlaylistId.value)
+ if (!pid) return
+ try {
+ await playlistAddPiece(pid, props.id)
+ addToPlaylistId.value = ''
+ await load()
+ } catch (e) {
+ alert(e.message || String(e))
+ }
+}
+
+async function leavePlaylist(plId) {
+ if (!confirm('从这个歌单移除？')) return
+ try {
+ await playlistRemovePiece(plId, props.id)
+ await load()
+ } catch (e) {
+ alert(e.message || String(e))
+ }
+}
+
async function saveMeta() {
savingMeta.value = true
try {
@@ -172,6 +278,7 @@ async function saveMeta() {
category: form.category.trim() || null,
lyrics: form.lyrics || null,
notes: form.notes || null,
+ tags: tags.value,
})
savedFlash.value = true
setTimeout(() => (savedFlash.value = false), 1500)
@@ -393,4 +500,59 @@ onMounted(load)
.danger-block { background: rgba(239, 68, 68, 0.05); }
.danger-block .btn-danger { padding: 8px 18px; font-size: 13px; }
+
+.tag-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ align-items: center;
+ background: var(--bg-elev);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 6px 8px;
+}
+.tag-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ background: rgba(192, 132, 252, 0.12);
+ color: var(--accent);
+ border-radius: 12px;
+ padding: 2px 4px 2px 10px;
+ font-size: 12px;
+}
+.tag-x {
+ background: none;
+ color: var(--accent);
+ font-size: 14px;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+.tag-x:hover { background: rgba(192, 132, 252, 0.2); }
+.tag-input {
+ flex: 1;
+ min-width: 200px;
+ background: transparent;
+ border: none;
+ font-size: 13px;
+ color: var(--text);
+ padding: 4px 6px;
+}
+.tag-input:focus { outline: none; }
+
+.pl-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+.join-row { display: flex; gap: 8px; align-items: center; }
+.join-row select {
+ background: var(--bg-elev);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 6px 10px;
+ font-size: 13px;
+ color: var(--text);
+ min-width: 220px;
+}
diff --git a/apps/music/frontend/src/views/PlayerView.vue b/apps/music/frontend/src/views/PlayerView.vue
index 0cfed45..1470fb1 100644
--- a/apps/music/frontend/src/views/PlayerView.vue
+++ b/apps/music/frontend/src/views/PlayerView.vue
@@ -12,6 +12,38 @@