Skip to content

Commit

Permalink
feat: show grade
Browse files Browse the repository at this point in the history
  • Loading branch information
ZTL-UwU committed Dec 8, 2023
1 parent 0ee886d commit d76d64b
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 39 deletions.
24 changes: 16 additions & 8 deletions pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -201,9 +201,11 @@ onMounted(async () => {
歌单
</UiTabsTrigger>
</UiTabsList>
<UiTabsContent ref="dragLeft" v-drag="dragLeftHandler" value="songList"
<UiTabsContent
ref="dragLeft" v-drag="dragLeftHandler" value="songList"
:style="`transform: translate(${tabShift}px, 0); opacity: ${1 - tabShift / -150 - 0.2}`"
class="duration-100">
class="duration-100"
>
<template v-if="!isSongListLoading">
<UiInput v-model="searchContent" placeholder="搜索歌曲" class="text-md mb-2" />
<TransitionGroup name="list" tag="ul">
Expand All @@ -224,12 +226,16 @@ onMounted(async () => {
</template>
<ContentLoading v-else />
</UiTabsContent>
<UiTabsContent ref="dragRight" v-drag="dragRightHandler" value="arrangement"
<UiTabsContent
ref="dragRight" v-drag="dragRightHandler" value="arrangement"
:style="`transform: translate(${tabShift}px, 0); opacity: ${1 - tabShift / 150 - 0.2}`"
class="duration-100">
class="duration-100"
>
<template v-if="!isArrangementLoading">
<DatePicker v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required />
<DatePicker
v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required
/>
<TransitionGroup name="list" tag="ul">
<li v-for="song in arrangement" :key="song.id">
<MusicCard :song="song" show-mine />
Expand Down Expand Up @@ -283,8 +289,10 @@ onMounted(async () => {
</UiCardHeader>
<UiCardContent>
<template v-if="!isArrangementLoading">
<DatePicker v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required />
<DatePicker
v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required
/>
<UiScrollArea class="h-[calc(100svh-19rem)]">
<TransitionGroup name="list" tag="ul">
<li v-for="song in arrangement" :key="song.id">
Expand Down
65 changes: 42 additions & 23 deletions pages/manage/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -327,8 +327,10 @@ onMounted(async () => {
</UiCardTitle>
</UiCardHeader>
<UiCardContent>
<DatePicker v-model="date" mode="date" color="gray" locale="zh" :attributes="calendarAttr"
:masks="{ title: 'YYYY MMM' }" class="rounded-lg border pb-3" expanded trim-weeks borderless is-required />
<DatePicker
v-model="date" mode="date" color="gray" locale="zh" :attributes="calendarAttr"
:masks="{ title: 'YYYY MMM' }" class="rounded-lg border pb-3" expanded trim-weeks borderless is-required
/>
<div class="flex flex-row items-center space-x-1 rounded-md text-secondary-foreground mt-4">
<UiButton :disabled="arrangeLoading" variant="outline" class="basis-1/2 px-3 shadow-none" @click="arrange">
<Loader2 v-if="arrangeLoading" class="w-4 h-4 mr-2 animate-spin" />
Expand All @@ -346,12 +348,16 @@ onMounted(async () => {
<UiDropdownMenuContent align="end" :align-offset="-5" class="w-[200px]">
<UiDropdownMenuLabel>排歌时长</UiDropdownMenuLabel>
<UiDropdownMenuSeparator />
<UiDropdownMenuCheckboxItem :checked="autoArrangeScopeLength === 'day'"
@click="setAutoArrangeScopeLength('day')">
<UiDropdownMenuCheckboxItem
:checked="autoArrangeScopeLength === 'day'"
@click="setAutoArrangeScopeLength('day')"
>
一天
</UiDropdownMenuCheckboxItem>
<UiDropdownMenuCheckboxItem :checked="autoArrangeScopeLength === 'week'"
@click="setAutoArrangeScopeLength('week')">
<UiDropdownMenuCheckboxItem
:checked="autoArrangeScopeLength === 'week'"
@click="setAutoArrangeScopeLength('week')"
>
一周
</UiDropdownMenuCheckboxItem>
</UiDropdownMenuContent>
Expand All @@ -366,8 +372,10 @@ onMounted(async () => {
<TimeAvailability show-button class="mt-4" />
<UiPopover v-model:open="accountOpen">
<UiPopoverTrigger as-child>
<UiButton variant="outline" role="combobox" :aria-expanded="accountOpen"
class="justify-between absolute bottom-5 left-5 w-[200px]">
<UiButton
variant="outline" role="combobox" :aria-expanded="accountOpen"
class="justify-between absolute bottom-5 left-5 w-[200px]"
>
{{ userStore.userId }}
<span class="icon-[radix-icons--caret-sort] text-lg" />
</UiButton>
Expand Down Expand Up @@ -417,7 +425,7 @@ onMounted(async () => {
<li v-for="song in arrangement" :key="song.id">
<UiContextMenu>
<UiContextMenuTrigger>
<MusicCard :song="song" sorting>
<MusicCard :song="song" sorting show-grade>
<template #prefix>
<UiButton variant="outline" size="icon" class="h-7 w-8" @click="move(song, -1)">
<ChevronUp class="w-3.5 h-3.5" />
Expand All @@ -430,8 +438,10 @@ onMounted(async () => {
<UiTooltipProvider>
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton class="basis-1/2 hover:bg-red-200 hover:border-red-400 hover:text-red-700"
variant="outline" size="icon" @click="removeFromArrangement(song)">
<UiButton
class="basis-1/2 hover:bg-red-200 hover:border-red-400 hover:text-red-700"
variant="outline" size="icon" @click="removeFromArrangement(song)"
>
<ChevronRight class="w-4 h-4" />
</UiButton>
</UiTooltipTrigger>
Expand Down Expand Up @@ -464,8 +474,10 @@ onMounted(async () => {
</UiScrollArea>
</div>
</UiCardContent>
<UiButton v-if="arrangement?.length === 0" variant="destructive" class="absolute right-5 bottom-5"
@click="removeArrangement" :disable="removeArrangementLoading">
<UiButton
v-if="arrangement?.length === 0" variant="destructive" class="absolute right-5 bottom-5"
:disable="removeArrangementLoading" @click="removeArrangement"
>
<Loader2 v-if="removeArrangementLoading" class="w-4 h-4 mr-2 animate-spin" />
删除排歌表
</UiButton>
Expand Down Expand Up @@ -510,13 +522,15 @@ onMounted(async () => {
<li v-for="song in approvedList.slice(0, showLength.approved)" :key="song.id">
<UiContextMenu>
<UiContextMenuTrigger>
<MusicCard :song="song">
<MusicCard :song="song" show-grade>
<template #suffix>
<UiTooltipProvider>
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton class="basis-1/2 hover:bg-green-200 hover:border-green-400 hover:text-green-700"
variant="outline" size="icon" @click="addToArrangement(song)">
<UiButton
class="basis-1/2 hover:bg-green-200 hover:border-green-400 hover:text-green-700"
variant="outline" size="icon" @click="addToArrangement(song)"
>
<ChevronLeft class="w-4 h-4" />
</UiButton>
</UiTooltipTrigger>
Expand Down Expand Up @@ -561,15 +575,16 @@ onMounted(async () => {
<li v-for="song in unsetList.slice(0, showLength.unset)" :key="song.id">
<UiContextMenu>
<UiContextMenuTrigger>
<MusicCard :song="song">
<MusicCard :song="song" show-grade>
<template #suffix>
<div class="flex flex-row gap-1">
<UiTooltipProvider>
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton
class="basis-1/2 hover:bg-green-200 hover:border-green-400 hover:text-green-700"
variant="outline" size="icon" @click="updateSong(song, 'approved')">
variant="outline" size="icon" @click="updateSong(song, 'approved')"
>
<Check class="w-4 h-4" />
</UiButton>
</UiTooltipTrigger>
Expand All @@ -581,8 +596,10 @@ onMounted(async () => {
<UiTooltipProvider>
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton class="basis-1/2 hover:bg-red-200 hover:border-red-400 hover:text-red-700"
variant="outline" size="icon" @click="updateSong(song, 'rejected')">
<UiButton
class="basis-1/2 hover:bg-red-200 hover:border-red-400 hover:text-red-700"
variant="outline" size="icon" @click="updateSong(song, 'rejected')"
>
<X class="w-4 h-4" />
</UiButton>
</UiTooltipTrigger>
Expand Down Expand Up @@ -632,13 +649,15 @@ onMounted(async () => {
<li v-for="song in rejectedList.slice(0, showLength.rejected)" :key="song.id">
<UiContextMenu>
<UiContextMenuTrigger>
<MusicCard :song="song">
<MusicCard :song="song" show-grade>
<template #suffix>
<UiTooltipProvider>
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton class="basis-1/2 hover:bg-green-200 hover:border-green-400 hover:text-green-700"
variant="outline" size="icon" @click="updateSong(song, 'approved')">
<UiButton
class="basis-1/2 hover:bg-green-200 hover:border-green-400 hover:text-green-700"
variant="outline" size="icon" @click="updateSong(song, 'approved')"
>
<Check class="w-4 h-4" />
</UiButton>
</UiTooltipTrigger>
Expand Down
21 changes: 13 additions & 8 deletions pages/manage/review.vue
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,8 @@ onMounted(async () => {
}
// prefetch songList cache
for (const song of unsetList.value.slice(0, 100)) {
for (const song of unsetList.value.slice(0, 100))
await getSearchList(song);
}
});
</script>

Expand All @@ -151,8 +150,10 @@ onMounted(async () => {
<li v-for="song in unsetList.slice(0, showLength.unset)" :key="song.id">
<UiContextMenu>
<UiContextMenuTrigger>
<MusicCard :song="song" :selected="selectedSong === song" class="cursor-pointer"
@click="selectedSong = song; setSearchList()" />
<MusicCard
:song="song" :selected="selectedSong === song" class="cursor-pointer"
@click="selectedSong = song; setSearchList()"
/>
</UiContextMenuTrigger>
<UiContextMenuContent>
<UiContextMenuItem @click="updateSong(song, 'approved')">
Expand Down Expand Up @@ -188,14 +189,18 @@ onMounted(async () => {
歌曲试听
</UiCardTitle>
<div v-if="selectedSong" class="ml-auto h-4">
<UiButton variant="secondary" size="icon"
<UiButton
variant="secondary" size="icon"
class="w-20 my-[-10px] hover:bg-green-200 hover:border-green-400 hover:text-green-700"
@click="reviewSong(selectedSong, 'approved');">
@click="reviewSong(selectedSong, 'approved');"
>
<Check class="w-5 h-5" />
</UiButton>
<UiButton variant="secondary" size="icon"
<UiButton
variant="secondary" size="icon"
class="w-20 ml-3 my-[-10px] hover:bg-red-200 hover:border-red-400 hover:text-red-700"
@click="reviewSong(selectedSong, 'rejected');">
@click="reviewSong(selectedSong, 'rejected');"
>
<X class="w-5 h-5" />
</UiButton>
</div>
Expand Down

0 comments on commit d76d64b

Please sign in to comment.