Fam Zheng
fbd6e3cb9c
点歌单本地管理 — 添加/上移/下移/置顶/删除 + 10 秒撤销倒计时 + YouTube 一键 搜，无 room / 无 ws。删掉了 partiverse 那套 yopu 和弦抓取 / LLM 聊天点歌 / QR 码（依赖后端，对单机无意义）。logic 全 immutable，21 个 vitest 覆盖 边界（首位上移 noop / 末位下移 noop / 缺失 id / 不变性）。
90 lines
2.6 KiB
Vue
90 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
show: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
close: []
|
|
add: [{ singer: string; title: string }]
|
|
}>()
|
|
|
|
const singer = ref('')
|
|
const title = ref('')
|
|
|
|
watch(
|
|
() => props.show,
|
|
(s) => {
|
|
if (s) {
|
|
singer.value = ''
|
|
title.value = ''
|
|
}
|
|
},
|
|
)
|
|
|
|
const canAdd = () => singer.value.trim() !== '' && title.value.trim() !== ''
|
|
|
|
function submit() {
|
|
if (!canAdd()) return
|
|
emit('add', { singer: singer.value.trim(), title: title.value.trim() })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="show" class="overlay" @click.self="$emit('close')">
|
|
<div class="modal">
|
|
<header>
|
|
<h2>添加歌曲</h2>
|
|
<button class="x" @click="$emit('close')">✕</button>
|
|
</header>
|
|
<section>
|
|
<label>歌手</label>
|
|
<input v-model="singer" type="text" placeholder="周杰伦" @keydown.enter="submit" />
|
|
</section>
|
|
<section>
|
|
<label>歌名</label>
|
|
<input v-model="title" type="text" placeholder="七里香" @keydown.enter="submit" />
|
|
</section>
|
|
<footer>
|
|
<button class="cancel" @click="$emit('close')">取消</button>
|
|
<button class="ok" :disabled="!canAdd()" @click="submit">添加</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 1500; padding: 16px;
|
|
}
|
|
.modal {
|
|
background: #232336;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
width: 100%; max-width: 480px;
|
|
padding: 16px;
|
|
}
|
|
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
h2 { margin: 0; font-size: 1.3rem; }
|
|
section { margin-bottom: 16px; }
|
|
label { display: block; margin-bottom: 6px; color: var(--fg-dim); font-weight: 500; font-size: 0.9rem; }
|
|
input {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-soft);
|
|
color: var(--fg);
|
|
font-size: 1rem;
|
|
}
|
|
input:focus { outline: 2px solid var(--accent); }
|
|
footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
|
|
button.x { width: 32px; height: 32px; border-radius: 6px; background: transparent; color: var(--fg-dim); border: 1px solid var(--border); }
|
|
button.cancel { background: var(--bg-soft); border: 1px solid var(--border); color: var(--fg); padding: 10px 18px; border-radius: 8px; }
|
|
button.ok { background: var(--accent); border: none; color: white; padding: 10px 18px; border-radius: 8px; font-weight: bold; }
|
|
</style>
|