Skip to content

Commit

Permalink
[all]: Remove some unnecessary nested <span>
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThrRip
ThrRip committed Dec 26, 2023
1 parent 3e9362e commit 35746d2
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 74 deletions.
114 changes: 46 additions & 68 deletions packages/admin/components/PlaylistList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,12 +141,12 @@
class="z-20 flex flex-row order-2 justify-between items-center self-end px-6 pr-2 py-1.5 h-12
bg-white-alta/75 border-t border-gray backdrop-blur"
>
<span v-if="props.type === 'main'">
<span v-if="props.countTotal !== props.countDisplayed">改动前共 {{ props.countTotal }} 首歌，改动后</span>共 {{ props.countDisplayed }} 首歌
</span>
<span v-if="props.type === 'changes'">
共 {{ props.countTotal }} 首歌有改动
</span>
{{
props.type === 'main' ?
(props.countTotal !== props.countDisplayed ? `改动前共 ${props.countTotal} 首歌，改动后` : '') +
`共 ${props.countDisplayed} 首歌` :
`共 ${props.countTotal} 首歌有改动`
}}
<span
v-if="props.type === 'main'"
class="flex flex-row gap-x-1 h-full
Expand Down Expand Up @@ -317,17 +317,13 @@
transition-[box-shadow,opacity] duration-200': props.type === 'main'
}"
>
<span
v-if="props.type === 'main' || (
props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.name === song.name :
getUnmodifiedSongById(song.$id)?.name === song.name
)
)"
>
{{ song.name }}
</span>
{{ props.type === 'main' || (
props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.name === song.name :
getUnmodifiedSongById(song.$id)?.name === song.name
)
) ? song.name : '' }}
<span
v-if="props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
Expand All @@ -340,12 +336,10 @@
v-if="(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
(getPublishingStateById(song.$id)?.old && getPublishingStateById(song.$id)?.old?.name !== '') :
(getUnmodifiedSongById(song.$id) && getUnmodifiedSongById(song.$id)?.name !== '')"
class="px-2.5 py-0.5 rounded-lg bg-pink-l/75"
class="px-2.5 py-0.5 line-through rounded-lg bg-pink-l/75"
>
<s>
{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.name : getUnmodifiedSongById(song.$id)?.name }}
</s>
{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.name : getUnmodifiedSongById(song.$id)?.name }}
</span>
<span v-if="song.name" class="px-2.5 py-0.5 rounded-lg bg-blue-l/50">
{{ song.name }}
Expand Down Expand Up @@ -387,17 +381,13 @@
transition-[box-shadow,opacity] duration-200': props.type === 'main'
}"
>
<span
v-if="props.type === 'main' || (
props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.artist === song.artist :
getUnmodifiedSongById(song.$id)?.artist === song.artist
)
)"
>
{{ song.artist }}
</span>
{{ props.type === 'main' || (
props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.artist === song.artist :
getUnmodifiedSongById(song.$id)?.artist === song.artist
)
) ? song.artist : '' }}
<span
v-if="props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
Expand All @@ -410,12 +400,10 @@
v-if="(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
(getPublishingStateById(song.$id)?.old && getPublishingStateById(song.$id)?.old?.artist !== '') :
(getUnmodifiedSongById(song.$id) && getUnmodifiedSongById(song.$id)?.artist !== '')"
class="px-2.5 py-0.5 rounded-lg bg-pink-l/75"
class="px-2.5 py-0.5 line-through rounded-lg bg-pink-l/75"
>
<s>
{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.artist : getUnmodifiedSongById(song.$id)?.artist }}
</s>
{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.artist : getUnmodifiedSongById(song.$id)?.artist }}
</span>
<span v-if="song.artist" class="px-2.5 py-0.5 rounded-lg bg-blue-l/50">
{{ song.artist }}
Expand Down Expand Up @@ -472,17 +460,13 @@
)"
:class="{ 'text-[0.625rem] leading-snug': props.type === 'main' }"
>
<span
v-if="props.type === 'main' || (
props.type === 'changes' && song.payment_amount && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.payment_amount === song.payment_amount :
getUnmodifiedSongById(song.$id)?.payment_amount === song.payment_amount
)
)"
>
¥{{ song.payment_amount }}
</span>
{{ props.type === 'main' || (
props.type === 'changes' && song.payment_amount && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.payment_amount === song.payment_amount :
getUnmodifiedSongById(song.$id)?.payment_amount === song.payment_amount
)
) ? `¥${song.payment_amount}` : '' }}
<span
v-if="props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
Expand All @@ -495,10 +479,10 @@
v-if="(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
(getPublishingStateById(song.$id)?.old && getPublishingStateById(song.$id)?.old?.payment_amount) :
(getUnmodifiedSongById(song.$id) && getUnmodifiedSongById(song.$id)?.payment_amount)"
class="px-2 py-0.5 w-fit rounded-md bg-pink-l/75"
class="px-2 py-0.5 w-fit line-through rounded-md bg-pink-l/75"
>
<s>¥{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.payment_amount : getUnmodifiedSongById(song.$id)?.payment_amount }}</s>
¥{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.payment_amount : getUnmodifiedSongById(song.$id)?.payment_amount }}
</span>
<span v-if="song.payment_amount" class="px-2 py-0.5 w-fit rounded-md bg-blue-l/50">
¥{{ song.payment_amount }}
Expand Down Expand Up @@ -540,17 +524,13 @@
transition-[box-shadow,opacity] duration-200': props.type === 'main'
}"
>
<span
v-if="props.type === 'main' || (
props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.language === song.language :
getUnmodifiedSongById(song.$id)?.language === song.language
)
)"
>
{{ song.language }}
</span>
{{ props.type === 'main' || (
props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.language === song.language :
getUnmodifiedSongById(song.$id)?.language === song.language
)
) ? song.language : '' }}
<span
v-if="props.type === 'changes' && (
(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
Expand All @@ -563,12 +543,10 @@
v-if="(getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
(getPublishingStateById(song.$id)?.old && getPublishingStateById(song.$id)?.old?.language !== '') :
(getUnmodifiedSongById(song.$id) && getUnmodifiedSongById(song.$id)?.language !== '')"
class="px-2.5 py-0.5 w-fit rounded-lg bg-pink-l/75"
class="px-2.5 py-0.5 w-fit line-through rounded-lg bg-pink-l/75"
>
<s>
{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.language : getUnmodifiedSongById(song.$id)?.language }}
</s>
{{ (getPublishingStateById(song.$id) && getPublishingStateById(song.$id)?.state !== 'processing') ?
getPublishingStateById(song.$id)?.old?.language : getUnmodifiedSongById(song.$id)?.language }}
</span>
<span v-if="song.language" class="px-2.5 py-0.5 w-fit rounded-lg bg-blue-l/50">
{{ song.language }}
Expand Down
8 changes: 2 additions & 6 deletions packages/home/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,12 +185,8 @@
class="flex flex-row order-2 justify-between items-center self-end pl-6 pr-2.5 py-1.5 h-12
bg-white-alta/75 border-t border-gray backdrop-blur"
>
<span>
共 {{ viewPlaylistCountTotal }} 首歌
<span v-if="viewPlaylistCountTotal !== viewPlaylistCountDisplayed">
，已显示 {{ viewPlaylistCountDisplayed }} 首
</span>
</span>
{{ `共 ${viewPlaylistCountTotal} 首歌` +
(viewPlaylistCountTotal !== viewPlaylistCountDisplayed ? `，已显示 ${viewPlaylistCountDisplayed} 首` : '') }}
<button
class="aspect-square flex flex-row justify-center items-center h-full rounded-lg hover:bg-gray
transition active:scale-95 duration-200"
Expand Down

0 comments on commit 35746d2

Please sign in to comment.