jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-02 18: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

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-normal">
<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 class="activity-card-normal-right">
<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="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>
<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>
<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>
<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>
</div>

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

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

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

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

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

@@ -45,7 +45,7 @@
<div class="prize-row">
<span class="prize-row-title">奖品图片</span>
<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>
<div class="prize-overlay">上传奖品图片</div>
<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">
<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-cost">
<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="user-avatar-container" @click="gotoProfile">
<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 v-if="isMobile" class="info-content-header">
<div class="user-name">
@@ -99,7 +99,7 @@
<div class="prize-info">
<div class="prize-info-left">
<div class="prize-icon">
<img
<BaseImage
class="prize-icon-img"
v-if="lottery.prizeIcon"
:src="lottery.prizeIcon"
@@ -146,7 +146,7 @@
</div>
</div>
<div class="prize-member-container">
<img
<BaseImage
v-for="p in lotteryParticipants"
:key="p.id"
class="prize-member-avatar"
@@ -157,7 +157,7 @@
<div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
<i class="fas fa-medal medal-icon"></i>
<span class="prize-member-winner-name">获奖者: </span>
<img
<BaseImage
v-for="w in lotteryWinners"
:key="w.id"
class="prize-member-avatar"

2
frontend_nuxt/pages/settings.vue
View File

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

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

@@ -7,7 +7,7 @@
<div v-else>
<div class="profile-page-header">
<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 class="profile-page-header-user-info">
<div class="profile-page-header-user-info-name">{{ user.username }}</div>