LFeng/Thing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

音乐模块调整

Browse Source
This commit is contained in:
LFeng
2026-09-12 15:47:16 +08:00
parent d702ed0d31
commit ffa410b399
33 changed files with 5452 additions and 2237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/music/SourcePicker.vue
+36 -15
View File
@@ -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>