jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-04 19:10:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 前端修改：图片loading做一个适配，现在图片没加载出来会出现如下情况， 不丝滑

Browse Source
This commit is contained in:
Tim
2025-08-27 12:07:23 +08:00
parent 6cc76593e4
commit 013d47e8e4
32 changed files with 130 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -1,9 +1,9 @@
<p align="center"> <p align="center">
<img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200"> <BaseImage alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200">
<br> <br>
高效的开源社区前后端平台 高效的开源社区前后端平台
<br><br><br> <br><br><br>
<img alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200"> <BaseImage alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200">
</p> </p>
## 💡 简介 ## 💡 简介

2
backend/src/main/java/com/openisle/controller/RssController.java
View File

@@ -41,7 +41,7 @@ public class RssController {
// 兼容 Markdown/HTML 两类图片写法（用于 enclosure） // 兼容 Markdown/HTML 两类图片写法（用于 enclosure）
private static final Pattern MD_IMAGE = Pattern.compile("!\\[[^\\]]*\\]\\(([^)]+)\\)"); private static final Pattern MD_IMAGE = Pattern.compile("!\\[[^\\]]*\\]\\(([^)]+)\\)");
private static final Pattern HTML_IMAGE = Pattern.compile("<img[^>]+src=[\"']?([^\"'>]+)[\"']?[^>]*>"); private static final Pattern HTML_IMAGE = Pattern.compile("<BaseImage[^>]+src=[\"']?([^\"'>]+)[\"']?[^>]*>");
private static final DateTimeFormatter RFC1123 = DateTimeFormatter.RFC_1123_DATE_TIME; private static final DateTimeFormatter RFC1123 = DateTimeFormatter.RFC_1123_DATE_TIME;

2
frontend_nuxt/components/AchievementList.vue
View File

@@ -9,7 +9,7 @@
]" ]"
@click="selectMedal(medal)" @click="selectMedal(medal)"
> >
<img <BaseImage
:src="medal.icon" :src="medal.icon"
:alt="medal.title" :alt="medal.title"
:class="['achievements-list-item-icon', { not_completed: !medal.completed }]" :class="['achievements-list-item-icon', { not_completed: !medal.completed }]"

2
frontend_nuxt/components/ActivityPopup.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<BasePopup :visible="visible" @close="close"> <BasePopup :visible="visible" @close="close">
<div class="activity-popup"> <div class="activity-popup">
<img v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" /> <BaseImage v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" />
<div class="activity-popup-text">{{ text }}</div> <div class="activity-popup-text">{{ text }}</div>
<div class="activity-popup-actions"> <div class="activity-popup-actions">
<div class="activity-popup-button" @click="gotoActivity">立即前往</div> <div class="activity-popup-button" @click="gotoActivity">立即前往</div>

2
frontend_nuxt/components/ArticleCategory.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="article-category-container" v-if="category"> <div class="article-category-container" v-if="category">
<div class="article-info-item" @click="gotoCategory"> <div class="article-info-item" @click="gotoCategory">
<img <BaseImage
v-if="category.smallIcon" v-if="category.smallIcon"
class="article-info-item-img" class="article-info-item-img"
:src="category.smallIcon" :src="category.smallIcon"

2
frontend_nuxt/components/ArticleTags.vue
View File

@@ -6,7 +6,7 @@
:key="tag.id || tag.name" :key="tag.id || tag.name"
@click="gotoTag(tag)" @click="gotoTag(tag)"
> >
<img <BaseImage
v-if="tag.smallIcon" v-if="tag.smallIcon"
class="article-info-item-img" class="article-info-item-img"
:src="tag.smallIcon" :src="tag.smallIcon"

2
frontend_nuxt/components/AvatarCropper.vue
View File

@@ -2,7 +2,7 @@
<div v-if="show" class="cropper-modal"> <div v-if="show" class="cropper-modal">
<div class="cropper-body"> <div class="cropper-body">
<div class="cropper-wrapper"> <div class="cropper-wrapper">
<img ref="image" :src="src" alt="to crop" /> <BaseImage ref="image" :src="src" alt="to crop" />
</div> </div>
<div class="cropper-actions"> <div class="cropper-actions">
<button class="cropper-btn" @click="$emit('close')">取消</button> <button class="cropper-btn" @click="$emit('close')">取消</button>

40
frontend_nuxt/components/BaseImage.vue
View File

@@ -1,13 +1,14 @@
<template> <template>
<NuxtImg <NuxtImg
v-bind="attrs" v-bind="passAttrs"
:src="src" :src="src"
:alt="alt" :alt="alt"
loading="lazy" loading="lazy"
:placeholder="placeholder" :placeholder="placeholder"
placeholder-class="base-image-ph" placeholder-class="base-image-ph"
@load="onLoad" @load="onLoad"
:class="['base-image', attrs.class, { 'is-loaded': loaded }]" @error="onError"
:class="['base-image', passAttrs.class, { 'is-loaded': loaded }]"
/> />
</template> </template>
@@ -21,25 +22,46 @@ const props = defineProps({
}) })
const attrs = useAttrs() const attrs = useAttrs()
const passAttrs = computed(() => {
const { placeholder, ...rest } = attrs
return rest
})
const loaded = ref(false) const loaded = ref(false)
const img = useImage() const img = useImage()
const placeholder = computed(() => img(props.src, { w: 16, h: 16, f: 'webp', q: 40, blur: 2 }))
const placeholder = computed(() => {
if (!props.src) return undefined
return img(props.src, { w: 16, h: 16, f: 'webp', q: 20, blur: 1 })
})
function onLoad() { function onLoad() {
loaded.value = true loaded.value = true
} }
function onError() {
loaded.value = true
}
</script> </script>
<style scoped> <style scoped>
.base-image { .base-image {
opacity: 0; display: block;
transition: opacity 0.25s; transition:
filter 0.35s ease,
transform 0.35s ease,
opacity 0.35s ease;
opacity: 0.92;
} }
.base-image-ph {
filter: blur(10px) saturate(0.85);
transform: scale(1.02);
}
.base-image.is-loaded { .base-image.is-loaded {
filter: none;
transform: none;
opacity: 1; opacity: 1;
} }
:deep(img.base-image-ph) {
filter: blur(10px);
transform: scale(1.03);
}
</style> </style>

4
frontend_nuxt/components/BaseTimeline.vue
View File

@@ -6,9 +6,9 @@
:class="{ clickable: !!item.iconClick }" :class="{ clickable: !!item.iconClick }"
@click="item.iconClick && item.iconClick()" @click="item.iconClick && item.iconClick()"
> >
<img v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" /> <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
<i v-else-if="item.icon" :class="item.icon"></i> <i v-else-if="item.icon" :class="item.icon"></i>
<img v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" /> <BaseImage v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
</div> </div>
<div class="timeline-content"> <div class="timeline-content">
<slot name="item" :item="item">{{ item.content }}</slot> <slot name="item" :item="item">{{ item.content }}</slot>

2
frontend_nuxt/components/CategorySelect.vue
View File

@@ -9,7 +9,7 @@
<div class="option-container"> <div class="option-container">
<div class="option-main"> <div class="option-main">
<template v-if="option.icon"> <template v-if="option.icon">
<img <BaseImage
v-if="isImageIcon(option.icon)" v-if="isImageIcon(option.icon)"
:src="option.icon" :src="option.icon"
class="option-icon" class="option-icon"

2
frontend_nuxt/components/CommentItem.vue
View File

@@ -8,7 +8,7 @@
> >
<!-- <div class="user-avatar-container"> <!-- <div class="user-avatar-container">
<div class="user-avatar-item"> <div class="user-avatar-item">
<img class="user-avatar-item-img" :src="comment.avatar" alt="avatar" /> <BaseImage class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
</div> </div>
</div> --> </div> -->
<div class="info-content"> <div class="info-content">

18
frontend_nuxt/components/Dropdown.vue
View File

@@ -13,7 +13,7 @@
<template v-for="(label, idx) in selectedLabels" :key="label.id"> <template v-for="(label, idx) in selectedLabels" :key="label.id">
<div class="selected-label"> <div class="selected-label">
<template v-if="label.icon"> <template v-if="label.icon">
<img <BaseImage
v-if="isImageIcon(label.icon)" v-if="isImageIcon(label.icon)"
:src="label.icon" :src="label.icon"
class="option-icon" class="option-icon"
@@ -32,7 +32,7 @@
<span v-if="selectedLabels.length"> <span v-if="selectedLabels.length">
<div class="selected-label"> <div class="selected-label">
<template v-if="selectedLabels[0].icon"> <template v-if="selectedLabels[0].icon">
<img <BaseImage
v-if="isImageIcon(selectedLabels[0].icon)" v-if="isImageIcon(selectedLabels[0].icon)"
:src="selectedLabels[0].icon" :src="selectedLabels[0].icon"
class="option-icon" class="option-icon"
@@ -69,7 +69,12 @@
> >
<slot name="option" :option="o" :isSelected="isSelected(o.id)"> <slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon"> <template v-if="o.icon">
<img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" /> <BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<i v-else :class="['option-icon', o.icon]"></i> <i v-else :class="['option-icon', o.icon]"></i>
</template> </template>
<span>{{ o.name }}</span> <span>{{ o.name }}</span>
@@ -100,7 +105,12 @@
> >
<slot name="option" :option="o" :isSelected="isSelected(o.id)"> <slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon"> <template v-if="o.icon">
<img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" /> <BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<i v-else :class="['option-icon', o.icon]"></i> <i v-else :class="['option-icon', o.icon]"></i>
</template> </template>
<span>{{ o.name }}</span> <span>{{ o.name }}</span>

12
frontend_nuxt/components/HeaderComponent.vue
View File

@@ -12,7 +12,7 @@
></span> ></span>
</div> </div>
<NuxtLink class="logo-container" :to="`/`" @click="refrechData"> <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
<img <BaseImage
alt="OpenIsle" alt="OpenIsle"
src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
width="60" width="60"
@@ -63,7 +63,7 @@
<DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems"> <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
<template #trigger> <template #trigger>
<div class="avatar-container"> <div class="avatar-container">
<img class="avatar-img" :src="avatar" alt="avatar" /> <BaseImage class="avatar-img" :src="avatar" alt="avatar" />
<i class="fas fa-caret-down dropdown-icon"></i> <i class="fas fa-caret-down dropdown-icon"></i>
</div> </div>
</template> </template>
@@ -75,7 +75,6 @@
</div> </div>
</div> </div>
</ClientOnly> </ClientOnly>
<SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" /> <SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
</div> </div>
</header> </header>
@@ -149,13 +148,14 @@ const copyInviteLink = async () => {
if (res.ok) { if (res.ok) {
const data = await res.json() const data = await res.json()
const inviteLink = data.token ? `${WEBSITE_BASE_URL}/signup?invite_token=${data.token}` : '' const inviteLink = data.token ? `${WEBSITE_BASE_URL}/signup?invite_token=${data.token}` : ''
/** /**
* navigator.clipboard在webkit中有点奇怪的行为 * navigator.clipboard在webkit中有点奇怪的行为
* https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message * https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message
* https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/ * https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/
*/ */
setTimeout(() => { setTimeout(() => {
navigator.clipboard.writeText(inviteLink) navigator.clipboard
.writeText(inviteLink)
.then(() => { .then(() => {
toast.success('邀请链接已复制') toast.success('邀请链接已复制')
}) })

2
frontend_nuxt/components/MedalPopup.vue
View File

@@ -4,7 +4,7 @@
<div class="medal-popup-title">恭喜你获得以下勋章</div> <div class="medal-popup-title">恭喜你获得以下勋章</div>
<div class="medal-popup-list"> <div class="medal-popup-list">
<div v-for="medal in medals" :key="medal.type" class="medal-popup-item"> <div v-for="medal in medals" :key="medal.type" class="medal-popup-item">
<img :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" /> <BaseImage :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" />
<div class="medal-popup-item-title">{{ medal.title }}</div> <div class="medal-popup-item-title">{{ medal.title }}</div>
</div> </div>
</div> </div>

4
frontend_nuxt/components/MenuComponent.vue
View File

@@ -88,7 +88,7 @@
@click="gotoCategory(c)" @click="gotoCategory(c)"
> >
<template v-if="c.smallIcon || c.icon"> <template v-if="c.smallIcon || c.icon">
<img <BaseImage
v-if="isImageIcon(c.smallIcon || c.icon)" v-if="isImageIcon(c.smallIcon || c.icon)"
:src="c.smallIcon || c.icon" :src="c.smallIcon || c.icon"
class="section-item-icon" class="section-item-icon"
@@ -114,7 +114,7 @@
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch> <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div> </div>
<div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)"> <div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
<img <BaseImage
v-if="isImageIcon(t.smallIcon || t.icon)" v-if="isImageIcon(t.smallIcon || t.icon)"
:src="t.smallIcon || t.icon" :src="t.smallIcon || t.icon"
class="section-item-icon" class="section-item-icon"

6
frontend_nuxt/components/ReactionsGroup.vue
View File

@@ -14,7 +14,7 @@
:class="{ selected: userReacted(r.type) }" :class="{ selected: userReacted(r.type) }"
@click="toggleReaction(r.type)" @click="toggleReaction(r.type)"
> >
<img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" /> <BaseImage :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
<div>{{ counts[r.type] }}</div> <div>{{ counts[r.type] }}</div>
</div> </div>
@@ -30,7 +30,7 @@
class="reactions-viewer-item" class="reactions-viewer-item"
@click="openPanel" @click="openPanel"
> >
<img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" /> <BaseImage :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
</div> </div>
<div class="reactions-count">{{ totalCount }}</div> <div class="reactions-count">{{ totalCount }}</div>
</template> </template>
@@ -61,7 +61,7 @@
@click="toggleReaction(t)" @click="toggleReaction(t)"
:class="{ selected: userReacted(t) }" :class="{ selected: userReacted(t) }"
> >
<img :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{ <BaseImage :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
counts[t] counts[t]
}}</span> }}</span>
</div> </div>

2
frontend_nuxt/components/SearchPersonDropdown.vue
View File

@@ -24,7 +24,7 @@
</template> </template>
<template #option="{ option }"> <template #option="{ option }">
<div class="search-option-item"> <div class="search-option-item">
<img <BaseImage
:src="option.avatar || '/default-avatar.svg'" :src="option.avatar || '/default-avatar.svg'"
class="avatar" class="avatar"
@error="handleAvatarError" @error="handleAvatarError"

2
frontend_nuxt/components/TagSelect.vue
View File

@@ -11,7 +11,7 @@
<div class="option-container"> <div class="option-container">
<div class="option-main"> <div class="option-main">
<template v-if="option.icon"> <template v-if="option.icon">
<img <BaseImage
v-if="isImageIcon(option.icon)" v-if="isImageIcon(option.icon)"
:src="option.icon" :src="option.icon"
class="option-icon" class="option-icon"

2
frontend_nuxt/components/UserList.vue
View File

@@ -2,7 +2,7 @@
<div class="user-list"> <div class="user-list">
<BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="fas fa-inbox" /> <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="fas fa-inbox" />
<div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)"> <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
<img :src="u.avatar" alt="avatar" class="user-avatar" /> <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
<div class="user-info"> <div class="user-info">
<div class="user-name">{{ u.username }}</div> <div class="user-name">{{ u.username }}</div>
<div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div> <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>

2
frontend_nuxt/pages/activities.vue
View File

@@ -7,7 +7,7 @@
<div class="activity-list-page-card" v-for="a in activities" :key="a.id"> <div class="activity-list-page-card" v-for="a in activities" :key="a.id">
<div class="activity-list-page-card-normal"> <div class="activity-list-page-card-normal">
<div v-if="a.icon" class="activity-card-normal-left"> <div v-if="a.icon" class="activity-card-normal-left">
<img :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" /> <BaseImage :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
</div> </div>
<div class="activity-card-normal-right"> <div class="activity-card-normal-right">
<div class="activity-card-normal-right-header"> <div class="activity-card-normal-right-header">

24
frontend_nuxt/pages/login.vue
View File

@@ -36,19 +36,35 @@
<div class="other-login-page-content"> <div class="other-login-page-content">
<div class="login-page-button" @click="loginWithGoogle"> <div class="login-page-button" @click="loginWithGoogle">
<img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" /> <BaseImage
class="login-page-button-icon"
src="../assets/icons/google.svg"
alt="Google Logo"
/>
<div class="login-page-button-text">Google 登录</div> <div class="login-page-button-text">Google 登录</div>
</div> </div>
<div class="login-page-button" @click="loginWithGithub"> <div class="login-page-button" @click="loginWithGithub">
<img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" /> <BaseImage
class="login-page-button-icon"
src="../assets/icons/github.svg"
alt="GitHub Logo"
/>
<div class="login-page-button-text">GitHub 登录</div> <div class="login-page-button-text">GitHub 登录</div>
</div> </div>
<div class="login-page-button" @click="loginWithDiscord"> <div class="login-page-button" @click="loginWithDiscord">
<img class="login-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" /> <BaseImage
class="login-page-button-icon"
src="../assets/icons/discord.svg"
alt="Discord Logo"
/>
<div class="login-page-button-text">Discord 登录</div> <div class="login-page-button-text">Discord 登录</div>
</div> </div>
<div class="login-page-button" @click="loginWithTwitter"> <div class="login-page-button" @click="loginWithTwitter">
<img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" /> <BaseImage
class="login-page-button-icon"
src="../assets/icons/twitter.svg"
alt="Twitter Logo"
/>
<div class="login-page-button-text">Twitter 登录</div> <div class="login-page-button-text">Twitter 登录</div>
</div> </div>
</div> </div>

7
frontend_nuxt/pages/message-box/[id].vue
View File

@@ -25,7 +25,7 @@
{{ loadingMore ? '加载中...' : '查看更多消息' }} {{ loadingMore ? '加载中...' : '查看更多消息' }}
</div> </div>
</div> </div>
<BaseTimeline :items="messages" hover> <BaseTimeline :items="messages">
<template #item="{ item }"> <template #item="{ item }">
<div class="message-header"> <div class="message-header">
<div class="user-name"> <div class="user-name">
@@ -35,7 +35,7 @@
{{ TimeManager.format(item.createdAt) }} {{ TimeManager.format(item.createdAt) }}
</div> </div>
</div> </div>
<div v-if="item.replyTo" class="reply-preview"> <div v-if="item.replyTo" class="reply-preview info-content-text">
<div class="reply-author">{{ item.replyTo.sender.username }}</div> <div class="reply-author">{{ item.replyTo.sender.username }}</div>
<div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div> <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
</div> </div>
@@ -597,10 +597,11 @@ function goBack() {
} }
.reply-preview { .reply-preview {
padding: 5px 10px; padding: 10px;
border-left: 5px solid var(--primary-color); border-left: 5px solid var(--primary-color);
margin-bottom: 5px; margin-bottom: 5px;
font-size: 13px; font-size: 13px;
background-color: var(--menu-selected-background-color);
} }
.reply-author { .reply-author {

4
frontend_nuxt/pages/message-box/index.vue
View File

@@ -41,7 +41,7 @@
@click="goToConversation(convo.id)" @click="goToConversation(convo.id)"
> >
<div class="conversation-avatar"> <div class="conversation-avatar">
<img <BaseImage
:src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'" :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
:alt="getOtherParticipant(convo)?.username || '用户'" :alt="getOtherParticipant(convo)?.username || '用户'"
class="avatar-img" class="avatar-img"
@@ -88,7 +88,7 @@
@click="goToChannel(ch.id)" @click="goToChannel(ch.id)"
> >
<div class="conversation-avatar"> <div class="conversation-avatar">
<img <BaseImage
:src="ch.avatar || '/default-avatar.svg'" :src="ch.avatar || '/default-avatar.svg'"
:alt="ch.name" :alt="ch.name"
class="avatar-img" class="avatar-img"

2
frontend_nuxt/pages/new-post.vue
View File

@@ -45,7 +45,7 @@
<div class="prize-row"> <div class="prize-row">
<span class="prize-row-title">奖品图片</span> <span class="prize-row-title">奖品图片</span>
<label class="prize-container"> <label class="prize-container">
<img v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" /> <BaseImage v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
<i v-else class="fa-solid fa-image default-prize-icon"></i> <i v-else class="fa-solid fa-image default-prize-icon"></i>
<div class="prize-overlay">上传奖品图片</div> <div class="prize-overlay">上传奖品图片</div>
<input type="file" class="prize-input" accept="image/*" @change="onPrizeIconChange" /> <input type="file" class="prize-input" accept="image/*" @change="onPrizeIconChange" />

2
frontend_nuxt/pages/points.vue
View File

@@ -39,7 +39,7 @@
<section class="goods"> <section class="goods">
<div class="goods-item" v-for="(good, idx) in goods" :key="idx"> <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
<img class="goods-item-image" :src="good.image" alt="good.name" /> <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
<div class="goods-item-name">{{ good.name }}</div> <div class="goods-item-name">{{ good.name }}</div>
<div class="goods-item-cost"> <div class="goods-item-cost">
<i class="fas fa-coins"></i> <i class="fas fa-coins"></i>

8
frontend_nuxt/pages/posts/[id]/index.vue
View File

@@ -47,7 +47,7 @@
<div class="info-content-container author-info-container"> <div class="info-content-container author-info-container">
<div class="user-avatar-container" @click="gotoProfile"> <div class="user-avatar-container" @click="gotoProfile">
<div class="user-avatar-item"> <div class="user-avatar-item">
<img class="user-avatar-item-img" :src="author.avatar" alt="avatar" /> <BaseImage class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
</div> </div>
<div v-if="isMobile" class="info-content-header"> <div v-if="isMobile" class="info-content-header">
<div class="user-name"> <div class="user-name">
@@ -99,7 +99,7 @@
<div class="prize-info"> <div class="prize-info">
<div class="prize-info-left"> <div class="prize-info-left">
<div class="prize-icon"> <div class="prize-icon">
<img <BaseImage
class="prize-icon-img" class="prize-icon-img"
v-if="lottery.prizeIcon" v-if="lottery.prizeIcon"
:src="lottery.prizeIcon" :src="lottery.prizeIcon"
@@ -146,7 +146,7 @@
</div> </div>
</div> </div>
<div class="prize-member-container"> <div class="prize-member-container">
<img <BaseImage
v-for="p in lotteryParticipants" v-for="p in lotteryParticipants"
:key="p.id" :key="p.id"
class="prize-member-avatar" class="prize-member-avatar"
@@ -157,7 +157,7 @@
<div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner"> <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
<i class="fas fa-medal medal-icon"></i> <i class="fas fa-medal medal-icon"></i>
<span class="prize-member-winner-name">获奖者: </span> <span class="prize-member-winner-name">获奖者: </span>
<img <BaseImage
v-for="w in lotteryWinners" v-for="w in lotteryWinners"
:key="w.id" :key="w.id"
class="prize-member-avatar" class="prize-member-avatar"

2
frontend_nuxt/pages/settings.vue
View File

@@ -15,7 +15,7 @@
<div class="avatar-row"> <div class="avatar-row">
<!-- label 充当点击区域，内部隐藏 input --> <!-- label 充当点击区域，内部隐藏 input -->
<label class="avatar-container"> <label class="avatar-container">
<img :src="avatar" class="avatar-preview" alt="avatar" /> <BaseImage :src="avatar" class="avatar-preview" alt="avatar" />
<!-- 半透明蒙层：hover 时出现 --> <!-- 半透明蒙层：hover 时出现 -->
<div class="avatar-overlay">更换头像</div> <div class="avatar-overlay">更换头像</div>
<input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" /> <input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" />

24
frontend_nuxt/pages/signup.vue
View File

@@ -70,19 +70,35 @@
<div class="other-signup-page-content"> <div class="other-signup-page-content">
<div class="signup-page-button" @click="signupWithGoogle"> <div class="signup-page-button" @click="signupWithGoogle">
<img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" /> <BaseImage
class="signup-page-button-icon"
src="~/assets/icons/google.svg"
alt="Google Logo"
/>
<div class="signup-page-button-text">Google 注册</div> <div class="signup-page-button-text">Google 注册</div>
</div> </div>
<div class="signup-page-button" @click="signupWithGithub"> <div class="signup-page-button" @click="signupWithGithub">
<img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" /> <BaseImage
class="signup-page-button-icon"
src="~/assets/icons/github.svg"
alt="GitHub Logo"
/>
<div class="signup-page-button-text">GitHub 注册</div> <div class="signup-page-button-text">GitHub 注册</div>
</div> </div>
<div class="signup-page-button" @click="signupWithDiscord"> <div class="signup-page-button" @click="signupWithDiscord">
<img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" /> <BaseImage
class="signup-page-button-icon"
src="~/assets/icons/discord.svg"
alt="Discord Logo"
/>
<div class="signup-page-button-text">Discord 注册</div> <div class="signup-page-button-text">Discord 注册</div>
</div> </div>
<div class="signup-page-button" @click="signupWithTwitter"> <div class="signup-page-button" @click="signupWithTwitter">
<img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" /> <BaseImage
class="signup-page-button-icon"
src="~/assets/icons/twitter.svg"
alt="Twitter Logo"
/>
<div class="signup-page-button-text">Twitter 注册</div> <div class="signup-page-button-text">Twitter 注册</div>
</div> </div>
</div> </div>

2
frontend_nuxt/pages/users/[id].vue
View File

@@ -7,7 +7,7 @@
<div v-else> <div v-else>
<div class="profile-page-header"> <div class="profile-page-header">
<div class="profile-page-header-avatar"> <div class="profile-page-header-avatar">
<img :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" /> <BaseImage :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
</div> </div>
<div class="profile-page-header-user-info"> <div class="profile-page-header-user-info">
<div class="profile-page-header-user-info-name">{{ user.username }}</div> <div class="profile-page-header-user-info-name">{{ user.username }}</div>

2
frontend_nuxt/utils/markdown.js
View File

@@ -48,7 +48,7 @@ function tiebaEmojiPlugin(md) {
md.renderer.rules['tieba-emoji'] = (tokens, idx) => { md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
const name = tokens[idx].content const name = tokens[idx].content
const file = tiebaEmoji[name] const file = tiebaEmoji[name]
return `<img class="emoji" src="${file}" alt="${name}">` return `<BaseImage class="emoji" src="${file}" alt="${name}">`
} }
md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => { md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
const pos = state.pos const pos = state.pos

2
frontend_nuxt/utils/vditor.js
View File

@@ -77,7 +77,7 @@ export function createVditor(editorId, options = {}) {
const list = await fetchMentions(key) const list = await fetchMentions(key)
return list.map((u) => ({ return list.map((u) => ({
value: `@[${u.username}]`, value: `@[${u.username}]`,
html: `<img src="${u.avatar}" /> @${u.username}`, html: `<BaseImage src="${u.avatar}" /> @${u.username}`,
})) }))
}, },
}, },

2
package.json
View File

@@ -2,7 +2,7 @@
"name": "openisle", "name": "openisle",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"description": "<p align=\"center\"> <img alt=\"OpenIsle\" src=\"https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png\" width=\"200\"> <br><br> 高效的开源社区前后端端平台 <br><br> <a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\"></a> </p>", "description": "<p align=\"center\"> <BaseImage alt=\"OpenIsle\" src=\"https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png\" width=\"200\"> <br><br> 高效的开源社区前后端端平台 <br><br> <a href=\"LICENSE\"><BaseImage src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\"></a> </p>",
"author": "nagisa77", "author": "nagisa77",
"license": "ISC", "license": "ISC",
"homepage": "https://www.open-isle.com", "homepage": "https://www.open-isle.com",