Skip to content

Commit

Permalink
fix 添加音乐，要刷新一下才显示 kingwrcy#126
Browse files Browse the repository at this point in the history
  • Loading branch information
Jerry committed Jun 11, 2024
1 parent 4ad39d4 commit 5382574
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 81 deletions.
77 changes: 33 additions & 44 deletions components/FriendsMemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,12 @@
<a :href="props.memo.externalUrl" target="_blank" class="text-[#576b95]">{{ props.memo.externalTitle }}</a>
</div>

<!-- <iframe class="rounded" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86-->
<!-- :src="props.memo.music163Url" v-if="props.memo.music163Url"></iframe>-->

<div
style="max-width: 100%"
v-if="props.memo.music163Url && props.memo.music163Url !== '' && musicType && musicId"
>
<ClientOnly>
<meting-js
:key="musicBoxKey"
:server="musicPlatform"
:type="musicType"
:id="musicId"
:list-folded="true"
/>
<!-- <iframe class="rounded" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86-->
<!-- :src="props.memo.music163Url" v-if="props.memo.music163Url"></iframe>-->

<div style="max-width: 100%"
v-if="props.memo.music163Url && props.memo.music163Url !== '' && musicType && musicId">
<ClientOnly><meting-js :server="musicPlatform" :type="musicType" :id="musicId" :list-folded="true" />
</ClientOnly>
</div>

Expand Down Expand Up @@ -65,7 +56,7 @@

<div class="text-[#576b95] cursor-pointer" v-if="!isDetailPage && hh > maxHeight && !showAll" @click="showMore">全文
</div>

<div class="text-[#576b95] cursor-pointer " v-if="!isDetailPage && showAll" @click="showLess">收起</div>
<div class="text-[#576b95] font-medium dark:text-white text-xs mt-2 mb-1 select-none" v-if="props.memo.location">
{{ props.memo.location?.split(/\s+/g).join(' · ') }}</div>
Expand Down Expand Up @@ -160,17 +151,7 @@ import { Heart, HeartCrack, MessageSquareMore, Trash2, FilePenLine, Pin } from '
import { memoUpdateEvent } from '@/lib/event'
import { toast } from 'vue-sonner';
import { getImgUrl } from '~/lib/utils';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
const token = useCookie('token')
dayjs.extend(relativeTime)
const props = withDefaults(
Expand Down Expand Up @@ -202,40 +183,42 @@ const musicType = ref('')
const musicId = ref('')
const musicPlatform = ref('netease')
if(props.memo.music163Url){
if(props.memo.music163Url.includes("music.163.com")){
if(props.memo.music163Url.includes("playlist")){
if (props.memo.music163Url) {
if (props.memo.music163Url.includes("music.163.com")) {
if (props.memo.music163Url.includes("playlist")) {
musicType.value = 'playlist'
musicId.value = props.memo.music163Url.split('playlist?id=')[1].split('&')[0]
}else if(props.memo.music163Url.includes("song")){
} else if (props.memo.music163Url.includes("song")) {
musicType.value = 'song'
musicId.value = props.memo.music163Url.split('song?id=')[1].split('&')[0]
}else if(props.memo.music163Url.includes("album")) {
} else if (props.memo.music163Url.includes("album")) {
musicType.value = 'album'
musicId.value = props.memo.music163Url.split('album?id=')[1].split('&')[0]
}
}else if(props.memo.music163Url.includes("y.qq.com")){
} else if (props.memo.music163Url.includes("y.qq.com")) {
musicPlatform.value = 'tencent'
if(props.memo.music163Url.includes("songDetail")){
if (props.memo.music163Url.includes("songDetail")) {
musicType.value = 'song'
musicId.value = props.memo.music163Url.split('songDetail/')[1].split('?')[0]
}else if(props.memo.music163Url.includes("playlist")){
} else if (props.memo.music163Url.includes("playlist")) {
musicType.value = 'playlist'
musicId.value = props.memo.music163Url.split('playlist/')[1].split('?')[0]
}
}else{
} else {
props.memo.music163Url = ''
}
}
console.log(props.memo.music163Url, musicType.value, musicId.value)
const { height } = useElementSize(el)
const likeList = useStorage<Array<number>>('likeList', [])
const linkReg = /\[(.*?)\]\((.*?)\)/g
const memoExt = computed(() => JSON.parse(props.memo.ext || '{}') as MemoExt)
const tags = computed(() => props.memo.content.match(/#(\S+)/g) || [])
const memoContent = computed(() => props.memo.content.replaceAll(/\n/g, '<br/>').replace(/#(\S+)/g, '').replace(linkReg,"<a class='mx-0.5 text-primary/80' href='$2' target='_blank'>$1</a>"))
const memoContent = computed(() => props.memo.content.replaceAll(/\n/g, '<br/>').replace(/#(\S+)/g, '').replace(linkReg, "<a class='mx-0.5 text-primary/80' href='$2' target='_blank'>$1</a>"))
const imgs = computed(() => props.memo.imgs ? props.memo.imgs.split(',') : []);
const gridStyle = computed(() => {
Expand All @@ -262,7 +245,7 @@ const gridStyle = computed(() => {
const like = async () => {
showToolbar.value = false
const contain = likeList.value.find((id) => id === props.memo.id)
const res = await $fetch('/api/memo/like', {
const res = await $fetch<{ success: boolean }>('/api/memo/like', {
method: 'POST',
body: JSON.stringify({
memoId: props.memo.id,
Expand All @@ -285,7 +268,7 @@ const toDetail = () => {
const pinned = async () => {
showToolbar.value = false
const res = await $fetch('/api/memo/pinned', {
const res = await $fetch<{ success: boolean }>('/api/memo/pinned', {
method: 'POST',
body: JSON.stringify({
memoId: props.memo.id,
Expand All @@ -300,7 +283,7 @@ const pinned = async () => {
const removeMemo = async () => {
showToolbar.value = false
const res = await $fetch('/api/memo/remove', {
const res = await $fetch<{ success: boolean }>('/api/memo/remove', {
method: 'POST',
body: JSON.stringify({
memoId: props.memo.id
Expand Down Expand Up @@ -372,7 +355,7 @@ watchOnce(height, () => {
width: 100%;
}
.aplayer-pic{
.aplayer-pic {
z-index: 1;
}
Expand All @@ -385,13 +368,19 @@ watchOnce(height, () => {
animation: scroll 8s linear infinite;
}
.aplayer-title, .aplayer-author {
.aplayer-title,
.aplayer-author {
padding-right: 10px;
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
.aplayer-lrc {
Expand Down
68 changes: 32 additions & 36 deletions components/MemoInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@
<PopoverContent as-child @interact-outside="imageOpen = false">
<div class="flex flex-col gap-2">
<Label for="imgUpload" :class="buttonVariants()" class="w-full my-2 cursor-pointer">
上传本地图片
上传本地图片
</Label>
<input type="file" id="imgUpload" class="hidden" name="file" @change="uploadImgs" multiple>
<Label >使用在线图片</Label>
<Label>使用在线图片</Label>
<Textarea class="my-2" placeholder="请输入图片地址,一行一个,最多9个" v-model="localImgUrl" />
<div class="flex flex-row gap-2">
<Button size="sm" @click="addLocalImage">确定</Button>
Expand Down Expand Up @@ -218,18 +218,10 @@

<Emoji v-if="showEmoji" class="mt-2" @emoji-selected="emojiSelected" />

<!-- <iframe class="rounded" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86-->
<!-- :src="music163IfrUrl" v-if="music163IfrUrl"></iframe>-->
<div style="max-width: 100%">
<ClientOnly>
<meting-js
:key="musicBoxKey"
:server="musicPlatform"
:type="musicType"
:id="musicId"
:list-folded="true"
v-if="music163Url && musicType && musicId"
/>
<meting-js :server="musicPlatform" :type="musicType" :id="musicId" :list-folded="true"
v-if="music163Url && musicType && musicId" />
</ClientOnly>
</div>

Expand Down Expand Up @@ -372,7 +364,6 @@ const externalPending = ref(false)
const externalFetchError = ref(false)
const externalTitleEditing = ref(false)
let musicBoxKey = ref(0)
const musicType = ref('')
const musicId = ref('')
const musicPlatform = ref('netease')
Expand Down Expand Up @@ -603,33 +594,31 @@ const importMusic = () => {
return
}
if (music163Url.value) {
if(music163Url.value.includes("music.163.com")){
if (music163Url.value.includes("music.163.com")) {
// 如果里面有playlist
if(music163Url.value.includes("playlist")){
if (music163Url.value.includes("playlist")) {
musicType.value = 'playlist'
musicId.value = music163Url.value.split('playlist?id=')[1].split('&')[0]
}else if(music163Url.value.includes("song")){
} else if (music163Url.value.includes("song")) {
musicType.value = 'song'
musicId.value = music163Url.value.split('song?id=')[1].split('&')[0]
}else if(music163Url.value.includes("album")) {
} else if (music163Url.value.includes("album")) {
musicType.value = 'album'
musicId.value = music163Url.value.split('album?id=')[1].split('&')[0]
}
}else if(music163Url.value.includes("y.qq.com")){
} else if (music163Url.value.includes("y.qq.com")) {
musicPlatform.value = 'tencent'
if(music163Url.value.includes("songDetail")){
if (music163Url.value.includes("songDetail")) {
musicType.value = 'song'
musicId.value = music163Url.value.split('songDetail/')[1].split('?')[0]
}else if(music163Url.value.includes("playlist")){
} else if (music163Url.value.includes("playlist")) {
musicType.value = 'playlist'
musicId.value = music163Url.value.split('playlist/')[1].split('?')[0]
}
}else{
} else {
music163Url.value = ''
}
music163Open.value = false
//@ts-expect-error
musicBoxKey++
}
music163Open.value = false
Expand Down Expand Up @@ -721,36 +710,36 @@ memoUpdateEvent.on((event: Memo & { index?: number }) => {
textareaRef.value?.getRef().focus()
showType.value = event.showType == 1
localImgUrl.value = event.imgs?.replaceAll(',', '\n') || ''
if(music163Url.value.includes("music.163.com")){
if (music163Url.value.includes("music.163.com")) {
// 如果里面有playlist
if(music163Url.value.includes("playlist")){
if (music163Url.value.includes("playlist")) {
musicType.value = 'playlist'
musicId.value = music163Url.value.split('playlist?id=')[1].split('&')[0]
}else if(music163Url.value.includes("song")){
} else if (music163Url.value.includes("song")) {
musicType.value = 'song'
musicId.value = music163Url.value.split('song?id=')[1].split('&')[0]
}else if(music163Url.value.includes("album")) {
} else if (music163Url.value.includes("album")) {
musicType.value = 'album'
musicId.value = music163Url.value.split('album?id=')[1].split('&')[0]
}
}else if(music163Url.value.includes("y.qq.com")){
} else if (music163Url.value.includes("y.qq.com")) {
musicPlatform.value = 'tencent'
if(music163Url.value.includes("songDetail")){
if (music163Url.value.includes("songDetail")) {
musicType.value = 'song'
musicId.value = music163Url.value.split('songDetail/')[1].split('?')[0]
}else if(music163Url.value.includes("playlist")){
} else if (music163Url.value.includes("playlist")) {
musicType.value = 'playlist'
musicId.value = music163Url.value.split('playlist/')[1].split('?')[0]
}
}else{
} else {
music163Url.value = ''
}
music163Open.value = false
//@ts-expect-error
musicBoxKey++
})
const addLocalImage = ()=>{
const addLocalImage = () => {
imgs.value = localImgUrl.value.split('\n')
imageOpen.value = false
}
Expand Down Expand Up @@ -851,12 +840,13 @@ async function updateLocation() {
-o-user-select: none;
user-select: none;
}
.aplayer-body {
max-width: 100%;
width: 100%;
}
.aplayer-pic{
.aplayer-pic {
z-index: 1;
}
Expand All @@ -869,13 +859,19 @@ async function updateLocation() {
animation: scroll 8s linear infinite;
}
.aplayer-title, .aplayer-author {
.aplayer-title,
.aplayer-author {
padding-right: 10px;
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
.aplayer-lrc {
Expand Down
2 changes: 1 addition & 1 deletion pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="my-2 text-sm">空空如也，赶紧去发表Moments吧!</div>
<Button @click="navigateTo('/login')">登录</Button>
</div>
<FriendsMemo :memo="memo" v-for="(memo, index) in state.memoList" :index="index" :key="index" :show-more="true"
<FriendsMemo :memo="memo" v-for="(memo, index) in state.memoList" :index="index" :key="memo.id" :show-more="true"
@memo-update="loadData(Math.ceil((index + 1) / state.size), 'edit')" />
</div>
<div ref="target" class="cursor-pointer text-center text-sm opacity-70 my-4"
Expand Down

0 comments on commit 5382574

Please sign in to comment.