mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-10 00:51:00 +08:00
Compare commits
32 Commits
codex/crea
...
feature/da
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
856d3dd513 | ||
|
|
d96aae59d2 | ||
|
|
ec0fd63e30 | ||
|
|
dfd4c70b6e | ||
|
|
d79dc8877d | ||
|
|
99bf80a47a | ||
|
|
bfadda1e7d | ||
|
|
02287c05be | ||
|
|
a1fa7b2d5b | ||
|
|
083c7980c6 | ||
|
|
3d51f29be7 | ||
|
|
d243e3a9d6 | ||
|
|
2b3c60f9a7 | ||
|
|
8b948a20cd | ||
|
|
5053ac213d | ||
|
|
e5ec801785 | ||
|
|
31e25232d0 | ||
|
|
cdc92aeebe | ||
|
|
d2c2213197 | ||
|
|
c687ffed54 | ||
|
|
5bc9ff45d7 | ||
|
|
78c7681bc8 | ||
|
|
5eb206a358 | ||
|
|
18179cca22 | ||
|
|
610a645092 | ||
|
|
504ca55cad | ||
|
|
0fc1415a14 | ||
|
|
50a84220fe | ||
|
|
af3e049c23 | ||
|
|
c33b411659 | ||
|
|
e8a162d859 | ||
|
|
e819926cf3 |
@@ -7,9 +7,11 @@ import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.security.core.Authentication;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
@RestController
|
||||
@@ -25,4 +27,10 @@ public class PointHistoryController {
|
||||
.map(pointHistoryMapper::toDto)
|
||||
.collect(Collectors.toList());
|
||||
}
|
||||
|
||||
@GetMapping("/trend")
|
||||
public List<Map<String, Object>> trend(Authentication auth,
|
||||
@RequestParam(value = "days", defaultValue = "30") int days) {
|
||||
return pointService.trend(auth.getName(), days);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,6 +36,7 @@ public class ReactionController {
|
||||
Authentication auth) {
|
||||
Reaction reaction = reactionService.reactToPost(auth.getName(), postId, req.getType());
|
||||
if (reaction == null) {
|
||||
pointService.deductForReactionOfPost(auth.getName(), postId);
|
||||
return ResponseEntity.noContent().build();
|
||||
}
|
||||
ReactionDto dto = reactionMapper.toDto(reaction);
|
||||
@@ -50,6 +51,7 @@ public class ReactionController {
|
||||
Authentication auth) {
|
||||
Reaction reaction = reactionService.reactToComment(auth.getName(), commentId, req.getType());
|
||||
if (reaction == null) {
|
||||
pointService.deductForReactionOfComment(auth.getName(), commentId);
|
||||
return ResponseEntity.noContent().build();
|
||||
}
|
||||
ReactionDto dto = reactionMapper.toDto(reaction);
|
||||
|
||||
@@ -5,6 +5,8 @@ public enum PointHistoryType {
|
||||
COMMENT,
|
||||
POST_LIKED,
|
||||
COMMENT_LIKED,
|
||||
POST_LIKE_CANCELLED,
|
||||
COMMENT_LIKE_CANCELLED,
|
||||
INVITE,
|
||||
FEATURE,
|
||||
SYSTEM_ONLINE,
|
||||
|
||||
@@ -5,6 +5,7 @@ import com.openisle.model.User;
|
||||
import com.openisle.model.Post;
|
||||
import com.openisle.model.Comment;
|
||||
import com.openisle.model.NotificationType;
|
||||
import com.openisle.model.ReactionType;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.domain.Page;
|
||||
import org.springframework.data.domain.Pageable;
|
||||
@@ -29,4 +30,8 @@ public interface NotificationRepository extends JpaRepository<Notification, Long
|
||||
List<Notification> findByTypeAndFromUser(NotificationType type, User fromUser);
|
||||
|
||||
void deleteByTypeAndFromUserAndPost(NotificationType type, User fromUser, Post post);
|
||||
|
||||
void deleteByTypeAndFromUserAndPostAndReactionType(NotificationType type, User fromUser, Post post, ReactionType reactionType);
|
||||
|
||||
void deleteByTypeAndFromUserAndCommentAndReactionType(NotificationType type, User fromUser, Comment comment, ReactionType reactionType);
|
||||
}
|
||||
|
||||
@@ -4,9 +4,12 @@ import com.openisle.model.PointHistory;
|
||||
import com.openisle.model.User;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
|
||||
import java.time.LocalDateTime;
|
||||
import java.util.List;
|
||||
|
||||
public interface PointHistoryRepository extends JpaRepository<PointHistory, Long> {
|
||||
List<PointHistory> findByUserOrderByIdDesc(User user);
|
||||
long countByUser(User user);
|
||||
|
||||
List<PointHistory> findByUserAndCreatedAtAfterOrderByCreatedAtDesc(User user, LocalDateTime createdAt);
|
||||
}
|
||||
|
||||
@@ -114,6 +114,14 @@ public class NotificationService {
|
||||
return n;
|
||||
}
|
||||
|
||||
public void deleteReactionNotification(User fromUser, Post post, Comment comment, ReactionType reactionType) {
|
||||
if (post != null) {
|
||||
notificationRepository.deleteByTypeAndFromUserAndPostAndReactionType(NotificationType.REACTION, fromUser, post, reactionType);
|
||||
} else if (comment != null) {
|
||||
notificationRepository.deleteByTypeAndFromUserAndCommentAndReactionType(NotificationType.REACTION, fromUser, comment, reactionType);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create notifications for all admins when a user submits a register request.
|
||||
* Old register request notifications from the same applicant are removed first.
|
||||
|
||||
@@ -7,6 +7,10 @@ import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.time.LocalDate;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Collections;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
@Service
|
||||
@RequiredArgsConstructor
|
||||
@@ -146,6 +150,16 @@ public class PointService {
|
||||
return addPoint(poster, 10, PointHistoryType.POST_LIKED, post, null, reactioner);
|
||||
}
|
||||
|
||||
public int deductForReactionOfPost(String reactionerName, Long postId) {
|
||||
User poster = postRepository.findById(postId).orElseThrow().getAuthor();
|
||||
User reactioner = userRepository.findByUsername(reactionerName).orElseThrow();
|
||||
if (poster.getId().equals(reactioner.getId())) {
|
||||
return 0;
|
||||
}
|
||||
Post post = postRepository.findById(postId).orElseThrow();
|
||||
return addPoint(poster, -10, PointHistoryType.POST_LIKE_CANCELLED, post, null, reactioner);
|
||||
}
|
||||
|
||||
// 考虑点赞者和评论者是同一个的情况
|
||||
public int awardForReactionOfComment(String reactionerName, Long commentId) {
|
||||
// 根据帖子id找到评论者
|
||||
@@ -165,6 +179,17 @@ public class PointService {
|
||||
return addPoint(commenter, 10, PointHistoryType.COMMENT_LIKED, post, comment, reactioner);
|
||||
}
|
||||
|
||||
public int deductForReactionOfComment(String reactionerName, Long commentId) {
|
||||
User commenter = commentRepository.findById(commentId).orElseThrow().getAuthor();
|
||||
User reactioner = userRepository.findByUsername(reactionerName).orElseThrow();
|
||||
if (commenter.getId().equals(reactioner.getId())) {
|
||||
return 0;
|
||||
}
|
||||
Comment comment = commentRepository.findById(commentId).orElseThrow();
|
||||
Post post = comment.getPost();
|
||||
return addPoint(commenter, -10, PointHistoryType.COMMENT_LIKE_CANCELLED, post, comment, reactioner);
|
||||
}
|
||||
|
||||
public java.util.List<PointHistory> listHistory(String userName) {
|
||||
User user = userRepository.findByUsername(userName).orElseThrow();
|
||||
if (pointHistoryRepository.countByUser(user) == 0) {
|
||||
@@ -173,4 +198,25 @@ public class PointService {
|
||||
return pointHistoryRepository.findByUserOrderByIdDesc(user);
|
||||
}
|
||||
|
||||
public List<Map<String, Object>> trend(String userName, int days) {
|
||||
if (days < 1) days = 1;
|
||||
User user = userRepository.findByUsername(userName).orElseThrow();
|
||||
LocalDate end = LocalDate.now();
|
||||
LocalDate start = end.minusDays(days - 1L);
|
||||
var histories = pointHistoryRepository.findByUserAndCreatedAtAfterOrderByCreatedAtDesc(
|
||||
user, start.atStartOfDay());
|
||||
int idx = 0;
|
||||
int balance = user.getPoint();
|
||||
List<Map<String, Object>> result = new ArrayList<>();
|
||||
for (LocalDate day = end; !day.isBefore(start); day = day.minusDays(1)) {
|
||||
result.add(Map.of("date", day.toString(), "value", balance));
|
||||
while (idx < histories.size() && histories.get(idx).getCreatedAt().toLocalDate().isEqual(day)) {
|
||||
balance -= histories.get(idx).getAmount();
|
||||
idx++;
|
||||
}
|
||||
}
|
||||
Collections.reverse(result);
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -42,6 +42,7 @@ public class ReactionService {
|
||||
java.util.Optional<Reaction> existing =
|
||||
reactionRepository.findByUserAndPostAndType(user, post, type);
|
||||
if (existing.isPresent()) {
|
||||
notificationService.deleteReactionNotification(user, post, null, type);
|
||||
reactionRepository.delete(existing.get());
|
||||
return null;
|
||||
}
|
||||
@@ -65,6 +66,7 @@ public class ReactionService {
|
||||
java.util.Optional<Reaction> existing =
|
||||
reactionRepository.findByUserAndCommentAndType(user, comment, type);
|
||||
if (existing.isPresent()) {
|
||||
notificationService.deleteReactionNotification(user, null, comment, type);
|
||||
reactionRepository.delete(existing.get());
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
package com.openisle.controller;
|
||||
|
||||
import com.openisle.config.CustomAccessDeniedHandler;
|
||||
import com.openisle.config.SecurityConfig;
|
||||
import com.openisle.service.PointService;
|
||||
import com.openisle.mapper.PointHistoryMapper;
|
||||
import com.openisle.service.JwtService;
|
||||
import com.openisle.repository.UserRepository;
|
||||
import com.openisle.model.User;
|
||||
import com.openisle.model.Role;
|
||||
import org.junit.jupiter.api.Test;
|
||||
import org.mockito.Mockito;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
|
||||
import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
|
||||
import org.springframework.boot.test.mock.mockito.MockBean;
|
||||
import org.springframework.context.annotation.Import;
|
||||
import org.springframework.test.web.servlet.MockMvc;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Optional;
|
||||
|
||||
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
|
||||
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
|
||||
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
|
||||
|
||||
@WebMvcTest(PointHistoryController.class)
|
||||
@AutoConfigureMockMvc
|
||||
@Import({SecurityConfig.class, CustomAccessDeniedHandler.class})
|
||||
class PointHistoryControllerTest {
|
||||
@Autowired
|
||||
private MockMvc mockMvc;
|
||||
|
||||
@MockBean
|
||||
private JwtService jwtService;
|
||||
@MockBean
|
||||
private UserRepository userRepository;
|
||||
@MockBean
|
||||
private PointService pointService;
|
||||
@MockBean
|
||||
private PointHistoryMapper pointHistoryMapper;
|
||||
|
||||
@Test
|
||||
void trendReturnsSeries() throws Exception {
|
||||
Mockito.when(jwtService.validateAndGetSubject("token")).thenReturn("user");
|
||||
User user = new User();
|
||||
user.setUsername("user");
|
||||
user.setPassword("p");
|
||||
user.setEmail("u@example.com");
|
||||
user.setRole(Role.USER);
|
||||
Mockito.when(userRepository.findByUsername("user")).thenReturn(Optional.of(user));
|
||||
List<Map<String, Object>> data = List.of(
|
||||
Map.of("date", java.time.LocalDate.now().minusDays(1).toString(), "value", 100),
|
||||
Map.of("date", java.time.LocalDate.now().toString(), "value", 110)
|
||||
);
|
||||
Mockito.when(pointService.trend(Mockito.eq("user"), Mockito.anyInt())).thenReturn(data);
|
||||
|
||||
mockMvc.perform(get("/api/point-histories/trend").param("days", "2")
|
||||
.header("Authorization", "Bearer token"))
|
||||
.andExpect(status().isOk())
|
||||
.andExpect(jsonPath("$[0].value").value(100))
|
||||
.andExpect(jsonPath("$[1].value").value(110));
|
||||
}
|
||||
}
|
||||
@@ -18,7 +18,7 @@
|
||||
--background-color-blur: rgba(255, 255, 255, 0.57);
|
||||
--menu-border-color: lightgray;
|
||||
--normal-border-color: lightgray;
|
||||
--menu-selected-background-color: rgba(228, 228, 228, 0.884);
|
||||
--menu-selected-background-color: rgba(242, 242, 242, 0.884);
|
||||
--menu-text-color: black;
|
||||
--scroller-background-color: rgba(130, 175, 180, 0.5);
|
||||
/* --normal-background-color: rgb(241, 241, 241); */
|
||||
@@ -142,6 +142,7 @@ body {
|
||||
.info-content-text video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.info-content-text {
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
|
||||
@@ -46,7 +46,6 @@ function onError() {
|
||||
|
||||
<style scoped>
|
||||
.base-image {
|
||||
display: block;
|
||||
transition:
|
||||
filter 0.35s ease,
|
||||
transform 0.35s ease,
|
||||
@@ -55,12 +54,12 @@ function onError() {
|
||||
}
|
||||
|
||||
.base-image-ph {
|
||||
filter: blur(10px) saturate(0.85);
|
||||
transform: scale(1.02);
|
||||
filter: blur(20px);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.base-image.is-loaded {
|
||||
filter: none;
|
||||
/* Allow filters from parent classes (e.g. grayscale for unfinished medals) */
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -54,6 +54,7 @@ function onTouchEnd(e) {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.base-tabs-items {
|
||||
|
||||
@@ -88,24 +88,24 @@ export default defineNuxtConfig({
|
||||
vite: {
|
||||
build: {
|
||||
// increase warning limit and split large libraries into separate chunks
|
||||
chunkSizeWarningLimit: 1024,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
if (id.includes('vditor')) {
|
||||
return 'vditor'
|
||||
}
|
||||
if (id.includes('echarts')) {
|
||||
return 'echarts'
|
||||
}
|
||||
if (id.includes('highlight.js')) {
|
||||
return 'highlight'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
// chunkSizeWarningLimit: 1024,
|
||||
// rollupOptions: {
|
||||
// output: {
|
||||
// manualChunks(id) {
|
||||
// if (id.includes('node_modules')) {
|
||||
// if (id.includes('vditor')) {
|
||||
// return 'vditor'
|
||||
// }
|
||||
// if (id.includes('echarts')) {
|
||||
// return 'echarts'
|
||||
// }
|
||||
// if (id.includes('highlight.js')) {
|
||||
// return 'highlight'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -89,28 +89,6 @@ export default {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.base-tabs-header) {
|
||||
top: calc(var(--header-height) + 1px);
|
||||
background-color: var(--background-color-blur);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
margin-bottom: 20px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
:deep(.base-tabs-item) {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.base-tabs-item.selected) {
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
|
||||
@@ -33,23 +33,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import {
|
||||
DataZoomComponent,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
} from 'echarts/components'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { getToken } from '~/utils/auth'
|
||||
const config = useRuntimeConfig()
|
||||
const API_BASE_URL = config.public.apiBaseUrl
|
||||
|
||||
use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
|
||||
|
||||
const dauOption = ref(null)
|
||||
const newUserOption = ref(null)
|
||||
const postOption = ref(null)
|
||||
|
||||
@@ -36,35 +36,19 @@
|
||||
|
||||
<div class="other-login-page-content">
|
||||
<div class="login-page-button" @click="loginWithGoogle">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/google.svg"
|
||||
alt="Google Logo"
|
||||
/>
|
||||
<img 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">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/github.svg"
|
||||
alt="GitHub Logo"
|
||||
/>
|
||||
<img 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">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/discord.svg"
|
||||
alt="Discord Logo"
|
||||
/>
|
||||
<img 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">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/twitter.svg"
|
||||
alt="Twitter Logo"
|
||||
/>
|
||||
<img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
|
||||
<div class="login-page-button-text">Twitter 登录</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -113,17 +113,23 @@ const error = ref(null)
|
||||
const conversationId = route.params.id
|
||||
const currentUser = ref(null)
|
||||
const messagesListEl = ref(null)
|
||||
let lastMessageEl = null
|
||||
const currentPage = ref(0)
|
||||
const totalPages = ref(0)
|
||||
const loadingMore = ref(false)
|
||||
let scrollInterval = null
|
||||
const conversationName = ref('')
|
||||
const isChannel = ref(false)
|
||||
const isFloatMode = computed(() => route.query.float !== undefined)
|
||||
const floatRoute = useState('messageFloatRoute')
|
||||
const replyTo = ref(null)
|
||||
|
||||
const isUserNearBottom = ref(true)
|
||||
function updateNearBottom() {
|
||||
const el = messagesListEl.value
|
||||
if (!el) return
|
||||
const threshold = 40 // px
|
||||
isUserNearBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold
|
||||
}
|
||||
|
||||
const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
|
||||
|
||||
const otherParticipant = computed(() => {
|
||||
@@ -133,20 +139,37 @@ const otherParticipant = computed(() => {
|
||||
return participants.value.find((p) => p.id !== currentUser.value.id)
|
||||
})
|
||||
|
||||
function isSentByCurrentUser(message) {
|
||||
return message.sender.id === currentUser.value?.id
|
||||
}
|
||||
|
||||
function handleAvatarError(event) {
|
||||
event.target.src = '/default-avatar.svg'
|
||||
}
|
||||
|
||||
function setReply(message) {
|
||||
replyTo.value = message
|
||||
}
|
||||
|
||||
// No changes needed here, as renderMarkdown is now imported.
|
||||
// The old function is removed.
|
||||
/** 改造:滚动函数 —— smooth & instant */
|
||||
function scrollToBottomSmooth() {
|
||||
const el = messagesListEl.value
|
||||
if (!el) return
|
||||
// 优先使用原生 smooth,失败则降级
|
||||
try {
|
||||
el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
|
||||
} catch {
|
||||
// 降级:简易动画
|
||||
const start = el.scrollTop
|
||||
const end = el.scrollHeight
|
||||
const duration = 200
|
||||
const startTs = performance.now()
|
||||
function step(now) {
|
||||
const p = Math.min(1, (now - startTs) / duration)
|
||||
el.scrollTop = start + (end - start) * p
|
||||
if (p < 1) requestAnimationFrame(step)
|
||||
}
|
||||
requestAnimationFrame(step)
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToBottomInstant() {
|
||||
const el = messagesListEl.value
|
||||
if (!el) return
|
||||
el.scrollTop = el.scrollHeight
|
||||
}
|
||||
|
||||
async function fetchMessages(page = 0) {
|
||||
if (page === 0) {
|
||||
@@ -181,7 +204,6 @@ async function fetchMessages(page = 0) {
|
||||
isChannel.value = conversationData.channel
|
||||
}
|
||||
|
||||
// Since the backend sorts by descending, we need to reverse for correct chat order
|
||||
const newMessages = pageData.content.reverse().map((item) => ({
|
||||
...item,
|
||||
src: item.sender.avatar,
|
||||
@@ -202,12 +224,16 @@ async function fetchMessages(page = 0) {
|
||||
currentPage.value = pageData.number
|
||||
totalPages.value = pageData.totalPages
|
||||
|
||||
// Scrolling is now fully handled by the watcher
|
||||
await nextTick()
|
||||
if (page > 0 && list) {
|
||||
// 加载更多:保持原视口位置
|
||||
const newScrollHeight = list.scrollHeight
|
||||
list.scrollTop = newScrollHeight - oldScrollHeight
|
||||
} else if (page === 0) {
|
||||
// 首次加载:定位到底部(不用动画,避免“闪动感”)
|
||||
scrollToBottomInstant()
|
||||
}
|
||||
updateNearBottom()
|
||||
} catch (e) {
|
||||
error.value = e.message
|
||||
toast.error(e.message)
|
||||
@@ -272,9 +298,10 @@ async function sendMessage(content, clearInput) {
|
||||
})
|
||||
clearInput()
|
||||
replyTo.value = null
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 100)
|
||||
|
||||
await nextTick()
|
||||
// 仅“发送消息成功后”才平滑滚动到底部
|
||||
scrollToBottomSmooth()
|
||||
} catch (e) {
|
||||
toast.error(e.message)
|
||||
} finally {
|
||||
@@ -290,7 +317,6 @@ async function markConversationAsRead() {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
// After marking as read, refresh the global unread count
|
||||
refreshGlobalUnreadCount()
|
||||
refreshChannelUnread()
|
||||
} catch (e) {
|
||||
@@ -298,37 +324,12 @@ async function markConversationAsRead() {
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
if (messagesListEl.value) {
|
||||
const element = messagesListEl.value
|
||||
// 強制滾動到底部,使用 smooth 行為確保視覺效果
|
||||
element.scrollTop = element.scrollHeight
|
||||
|
||||
// 再次確認滾動位置
|
||||
setTimeout(() => {
|
||||
if (element.scrollTop < element.scrollHeight - element.clientHeight) {
|
||||
element.scrollTop = element.scrollHeight
|
||||
}
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
messages,
|
||||
async (newMessages) => {
|
||||
if (newMessages.length === 0) return
|
||||
|
||||
await nextTick()
|
||||
|
||||
// Simple, reliable scroll to bottom
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 100)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
// 监听列表滚动,实时感知是否接近底部
|
||||
if (messagesListEl.value) {
|
||||
messagesListEl.value.addEventListener('scroll', updateNearBottom, { passive: true })
|
||||
}
|
||||
|
||||
currentUser.value = await fetchCurrentUser()
|
||||
if (currentUser.value) {
|
||||
await fetchMessages(0)
|
||||
@@ -345,9 +346,8 @@ onMounted(async () => {
|
||||
|
||||
watch(isConnected, (newValue) => {
|
||||
if (newValue) {
|
||||
// 等待一小段时间确保连接稳定
|
||||
setTimeout(() => {
|
||||
subscription = subscribe(`/topic/conversation/${conversationId}`, (message) => {
|
||||
subscription = subscribe(`/topic/conversation/${conversationId}`, async (message) => {
|
||||
// 避免重复显示当前用户发送的消息
|
||||
if (message.sender.id !== currentUser.value.id) {
|
||||
messages.value.push({
|
||||
@@ -357,11 +357,10 @@ watch(isConnected, (newValue) => {
|
||||
openUser(message.sender.id)
|
||||
},
|
||||
})
|
||||
// 实时收到消息时自动标记为已读
|
||||
// 收到消息后只标记已读,不强制滚动(符合“非发送不拉底”)
|
||||
markConversationAsRead()
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 100)
|
||||
await nextTick()
|
||||
updateNearBottom()
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
@@ -369,23 +368,12 @@ watch(isConnected, (newValue) => {
|
||||
})
|
||||
|
||||
onActivated(async () => {
|
||||
// This will be called every time the component is activated (navigated to)
|
||||
// 返回页面时:刷新数据与已读,不做强制滚动,保持用户当前位置
|
||||
if (currentUser.value) {
|
||||
await fetchMessages(0)
|
||||
await markConversationAsRead()
|
||||
|
||||
// 確保滾動到底部 - 使用多重延遲策略
|
||||
await nextTick()
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 100)
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 300)
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 500)
|
||||
|
||||
updateNearBottom()
|
||||
if (!isConnected.value) {
|
||||
const token = getToken()
|
||||
if (token) connect(token)
|
||||
@@ -406,6 +394,9 @@ onUnmounted(() => {
|
||||
subscription.unsubscribe()
|
||||
subscription = null
|
||||
}
|
||||
if (messagesListEl.value) {
|
||||
messagesListEl.value.removeEventListener('scroll', updateNearBottom)
|
||||
}
|
||||
disconnect()
|
||||
})
|
||||
|
||||
@@ -492,6 +483,7 @@ function goBack() {
|
||||
|
||||
.messages-list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 20px;
|
||||
padding-bottom: 100px;
|
||||
display: flex;
|
||||
@@ -597,6 +589,7 @@ function goBack() {
|
||||
}
|
||||
|
||||
.reply-preview {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
border-left: 5px solid var(--primary-color);
|
||||
margin-bottom: 5px;
|
||||
|
||||
@@ -701,19 +701,6 @@ onActivated(async () => {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.message-page :deep(.base-tabs-header) {
|
||||
position: sticky;
|
||||
top: 1px;
|
||||
z-index: 200;
|
||||
background-color: var(--background-color-blur);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: var(--blur-10);
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
}
|
||||
|
||||
.message-page-header-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -12,6 +12,13 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="trend" v-if="trendOption">
|
||||
<div class="section-title">积分走势</div>
|
||||
<ClientOnly>
|
||||
<VChart :option="trendOption" :autoresize="true" style="height: 300px" />
|
||||
</ClientOnly>
|
||||
</section>
|
||||
|
||||
<div class="loading-points-container" v-if="isLoading">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
@@ -97,6 +104,31 @@
|
||||
,获得{{ item.amount }}积分
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_LIKE_CANCELLED' && item.fromUserId">
|
||||
你的帖子
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">
|
||||
{{ item.postTitle }}
|
||||
</NuxtLink>
|
||||
被
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">
|
||||
{{ item.fromUserName }}
|
||||
</NuxtLink>
|
||||
取消点赞,扣除{{ -item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'COMMENT_LIKE_CANCELLED' && item.fromUserId">
|
||||
你的评论
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.commentContent, 100) }}
|
||||
</NuxtLink>
|
||||
被
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">
|
||||
{{ item.fromUserName }}
|
||||
</NuxtLink>
|
||||
取消点赞,扣除{{ -item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
|
||||
帖子
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
@@ -192,6 +224,7 @@ const isLoading = ref(false)
|
||||
const histories = ref([])
|
||||
const historyLoading = ref(false)
|
||||
const historyLoaded = ref(false)
|
||||
const trendOption = ref(null)
|
||||
|
||||
const pointRules = [
|
||||
'发帖:每天前两次,每次 30 积分',
|
||||
@@ -219,6 +252,28 @@ const iconMap = {
|
||||
FEATURE: 'fas fa-star',
|
||||
LOTTERY_JOIN: 'fas fa-ticket-alt',
|
||||
LOTTERY_REWARD: 'fas fa-ticket-alt',
|
||||
POST_LIKE_CANCELLED: 'fas fa-thumbs-down',
|
||||
COMMENT_LIKE_CANCELLED: 'fas fa-thumbs-down',
|
||||
}
|
||||
|
||||
const loadTrend = async () => {
|
||||
if (!authState.loggedIn) return
|
||||
const token = getToken()
|
||||
const res = await fetch(`${API_BASE_URL}/api/point-histories/trend?days=30`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
const dates = data.map((d) => d.date)
|
||||
const values = data.map((d) => d.value)
|
||||
trendOption.value = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: { type: 'category', data: dates, boundaryGap: false },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{ type: 'line', areaStyle: {}, smooth: true, data: values }],
|
||||
dataZoom: [{ type: 'slider', start: 80 }, { type: 'inside' }],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -226,8 +281,10 @@ onMounted(async () => {
|
||||
if (authState.loggedIn) {
|
||||
const user = await fetchCurrentUser()
|
||||
point.value = user ? user.point : null
|
||||
await Promise.all([loadGoods(), loadTrend()])
|
||||
} else {
|
||||
await loadGoods()
|
||||
}
|
||||
await loadGoods()
|
||||
isLoading.value = false
|
||||
})
|
||||
|
||||
@@ -363,7 +420,8 @@ const submitRedeem = async () => {
|
||||
}
|
||||
|
||||
.rules,
|
||||
.goods {
|
||||
.goods,
|
||||
.trend {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1225,7 +1225,6 @@ onMounted(async () => {
|
||||
.info-content-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.article-footer-container {
|
||||
|
||||
@@ -70,35 +70,19 @@
|
||||
|
||||
<div class="other-signup-page-content">
|
||||
<div class="signup-page-button" @click="signupWithGoogle">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/google.svg"
|
||||
alt="Google Logo"
|
||||
/>
|
||||
<img 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">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/github.svg"
|
||||
alt="GitHub Logo"
|
||||
/>
|
||||
<img 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">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/discord.svg"
|
||||
alt="Discord Logo"
|
||||
/>
|
||||
<img 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">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/twitter.svg"
|
||||
alt="Twitter Logo"
|
||||
/>
|
||||
<img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
|
||||
<div class="signup-page-button-text">Twitter 注册</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
18
frontend_nuxt/plugins/echarts.client.ts
Normal file
18
frontend_nuxt/plugins/echarts.client.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
// plugins/echarts.client.ts
|
||||
import { defineNuxtPlugin } from 'nuxt/app'
|
||||
import VueECharts from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
DataZoomComponent,
|
||||
TitleComponent,
|
||||
} from 'echarts/components'
|
||||
|
||||
use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.component('VChart', VueECharts)
|
||||
})
|
||||
@@ -48,7 +48,7 @@ function tiebaEmojiPlugin(md) {
|
||||
md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
|
||||
const name = tokens[idx].content
|
||||
const file = tiebaEmoji[name]
|
||||
return `<BaseImage class="emoji" src="${file}" alt="${name}">`
|
||||
return `<img class="emoji" src="${file}" alt="${name}">`
|
||||
}
|
||||
md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
|
||||
const pos = state.pos
|
||||
@@ -92,7 +92,7 @@ function linkPlugin(md) {
|
||||
|
||||
/** @section MarkdownIt 实例:开启 HTML,但配合强净化 */
|
||||
const md = new MarkdownIt({
|
||||
html: true, // ⭐ 允许行内 HTML(为 <video> 服务)
|
||||
html: true,
|
||||
linkify: true,
|
||||
breaks: true,
|
||||
highlight: (str, lang) => {
|
||||
@@ -106,11 +106,16 @@ const md = new MarkdownIt({
|
||||
.trim()
|
||||
.split('\n')
|
||||
.map(() => `<div class="line-number"></div>`)
|
||||
// 保留你原有的 CodeBlock + 复制按钮 + 行号结构
|
||||
return `<pre class="code-block"><button class="copy-code-btn">Copy</button><div class="line-numbers">${lineNumbers.join('')}</div><code class="hljs language-${lang || ''}">${code.trim()}</code></pre>`
|
||||
},
|
||||
})
|
||||
|
||||
const md2TextRender = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
breaks: true,
|
||||
})
|
||||
|
||||
md.use(mentionPlugin)
|
||||
md.use(tiebaEmojiPlugin)
|
||||
md.use(linkPlugin)
|
||||
@@ -221,7 +226,7 @@ export function handleMarkdownClick(e) {
|
||||
|
||||
/** @section 纯文本提取(保持你原有“统一正则法”) */
|
||||
export function stripMarkdown(text) {
|
||||
const html = md.render(text || '')
|
||||
const html = md2TextRender.render(text || '')
|
||||
let plainText = html.replace(/<[^>]+>/g, '')
|
||||
plainText = plainText
|
||||
.replace(/\r\n/g, '\n')
|
||||
|
||||
@@ -4,6 +4,17 @@ export default class TimeManager {
|
||||
if (Number.isNaN(date.getTime())) return ''
|
||||
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
|
||||
if (diffMs >= 0 && diffMs < 60 * 1000) {
|
||||
return '刚刚'
|
||||
}
|
||||
|
||||
if (diffMs >= 0 && diffMs < 60 * 60 * 1000) {
|
||||
const mins = Math.floor(diffMs / 60_000)
|
||||
return `${mins || 1}分钟前`
|
||||
}
|
||||
|
||||
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
||||
const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
|
||||
const diffDays = Math.floor((startOfToday - startOfDate) / 86400000)
|
||||
|
||||
Reference in New Issue
Block a user