Compare commits

..

1 Commits

Author SHA1 Message Date
Tim 9554030054 refactor: add reusable switch component 2025-08-21 12:36:02 +08:00
25 changed files with 176 additions and 500 deletions
@@ -53,7 +53,7 @@ public class AuthController {
try { try {
User user = userService.registerWithInvite( User user = userService.registerWithInvite(
req.getUsername(), req.getEmail(), req.getPassword()); req.getUsername(), req.getEmail(), req.getPassword());
inviteService.consume(req.getInviteToken(), user.getUsername()); inviteService.consume(req.getInviteToken());
emailService.sendEmail(user.getEmail(), "在网站填写验证码以验证", "您的验证码是 " + user.getVerificationCode()); emailService.sendEmail(user.getEmail(), "在网站填写验证码以验证", "您的验证码是 " + user.getVerificationCode());
return ResponseEntity.ok(Map.of( return ResponseEntity.ok(Map.of(
"token", jwtService.generateToken(user.getUsername()), "token", jwtService.generateToken(user.getUsername()),
@@ -154,7 +154,7 @@ public class AuthController {
if (resultOpt.isPresent()) { if (resultOpt.isPresent()) {
AuthResult result = resultOpt.get(); AuthResult result = resultOpt.get();
if (viaInvite && result.isNewUser()) { if (viaInvite && result.isNewUser()) {
inviteService.consume(req.getInviteToken(), user.getUsername()); inviteService.consume(req.getInviteToken());
return ResponseEntity.ok(Map.of( return ResponseEntity.ok(Map.of(
"token", jwtService.generateToken(result.getUser().getUsername()), "token", jwtService.generateToken(result.getUser().getUsername()),
"reason_code", "INVITE_APPROVED" "reason_code", "INVITE_APPROVED"
@@ -229,7 +229,7 @@ public class AuthController {
if (resultOpt.isPresent()) { if (resultOpt.isPresent()) {
AuthResult result = resultOpt.get(); AuthResult result = resultOpt.get();
if (viaInvite && result.isNewUser()) { if (viaInvite && result.isNewUser()) {
inviteService.consume(req.getInviteToken(), user.getUsername()); inviteService.consume(req.getInviteToken());
return ResponseEntity.ok(Map.of( return ResponseEntity.ok(Map.of(
"token", jwtService.generateToken(result.getUser().getUsername()), "token", jwtService.generateToken(result.getUser().getUsername()),
"reason_code", "INVITE_APPROVED" "reason_code", "INVITE_APPROVED"
@@ -276,7 +276,7 @@ public class AuthController {
if (resultOpt.isPresent()) { if (resultOpt.isPresent()) {
AuthResult result = resultOpt.get(); AuthResult result = resultOpt.get();
if (viaInvite && result.isNewUser()) { if (viaInvite && result.isNewUser()) {
inviteService.consume(req.getInviteToken(), user.getUsername()); inviteService.consume(req.getInviteToken());
return ResponseEntity.ok(Map.of( return ResponseEntity.ok(Map.of(
"token", jwtService.generateToken(result.getUser().getUsername()), "token", jwtService.generateToken(result.getUser().getUsername()),
"reason_code", "INVITE_APPROVED" "reason_code", "INVITE_APPROVED"
@@ -323,7 +323,7 @@ public class AuthController {
if (resultOpt.isPresent()) { if (resultOpt.isPresent()) {
AuthResult result = resultOpt.get(); AuthResult result = resultOpt.get();
if (viaInvite && result.isNewUser()) { if (viaInvite && result.isNewUser()) {
inviteService.consume(req.getInviteToken(), user.getUsername()); inviteService.consume(req.getInviteToken());
return ResponseEntity.ok(Map.of( return ResponseEntity.ok(Map.of(
"token", jwtService.generateToken(result.getUser().getUsername()), "token", jwtService.generateToken(result.getUser().getUsername()),
"reason_code", "INVITE_APPROVED" "reason_code", "INVITE_APPROVED"
@@ -47,7 +47,7 @@ public class CommentController {
Comment comment = commentService.addComment(auth.getName(), postId, req.getContent()); Comment comment = commentService.addComment(auth.getName(), postId, req.getContent());
CommentDto dto = commentMapper.toDto(comment); CommentDto dto = commentMapper.toDto(comment);
dto.setReward(levelService.awardForComment(auth.getName())); dto.setReward(levelService.awardForComment(auth.getName()));
dto.setPointReward(pointService.awardForComment(auth.getName(), postId, comment.getId())); dto.setPointReward(pointService.awardForComment(auth.getName(),postId));
log.debug("createComment succeeded for comment {}", comment.getId()); log.debug("createComment succeeded for comment {}", comment.getId());
return ResponseEntity.ok(dto); return ResponseEntity.ok(dto);
} }
@@ -1,28 +0,0 @@
package com.openisle.controller;
import com.openisle.dto.PointHistoryDto;
import com.openisle.mapper.PointHistoryMapper;
import com.openisle.service.PointService;
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.RestController;
import java.util.List;
import java.util.stream.Collectors;
@RestController
@RequestMapping("/api/point-histories")
@RequiredArgsConstructor
public class PointHistoryController {
private final PointService pointService;
private final PointHistoryMapper pointHistoryMapper;
@GetMapping
public List<PointHistoryDto> list(Authentication auth) {
return pointService.listHistory(auth.getName()).stream()
.map(pointHistoryMapper::toDto)
.collect(Collectors.toList());
}
}
@@ -45,7 +45,7 @@ public class PostController {
draftService.deleteDraft(auth.getName()); draftService.deleteDraft(auth.getName());
PostDetailDto dto = postMapper.toDetailDto(post, auth.getName()); PostDetailDto dto = postMapper.toDetailDto(post, auth.getName());
dto.setReward(levelService.awardForPost(auth.getName())); dto.setReward(levelService.awardForPost(auth.getName()));
dto.setPointReward(pointService.awardForPost(auth.getName(), post.getId())); dto.setPointReward(pointService.awardForPost(auth.getName()));
return ResponseEntity.ok(dto); return ResponseEntity.ok(dto);
} }
@@ -1,23 +0,0 @@
package com.openisle.dto;
import com.openisle.model.PointHistoryType;
import lombok.Getter;
import lombok.Setter;
import java.time.LocalDateTime;
@Getter
@Setter
public class PointHistoryDto {
private Long id;
private PointHistoryType type;
private int amount;
private int balance;
private Long postId;
private String postTitle;
private Long commentId;
private String commentContent;
private Long fromUserId;
private String fromUserName;
private LocalDateTime createdAt;
}
@@ -1,34 +0,0 @@
package com.openisle.mapper;
import com.openisle.dto.PointHistoryDto;
import com.openisle.model.PointHistory;
import org.springframework.stereotype.Component;
@Component
public class PointHistoryMapper {
public PointHistoryDto toDto(PointHistory history) {
PointHistoryDto dto = new PointHistoryDto();
dto.setId(history.getId());
dto.setType(history.getType());
dto.setAmount(history.getAmount());
dto.setBalance(history.getBalance());
dto.setCreatedAt(history.getCreatedAt());
if (history.getPost() != null) {
dto.setPostId(history.getPost().getId());
dto.setPostTitle(history.getPost().getTitle());
}
if (history.getComment() != null) {
dto.setCommentId(history.getComment().getId());
dto.setCommentContent(history.getComment().getContent());
if (history.getComment().getPost() != null && dto.getPostId() == null) {
dto.setPostId(history.getComment().getPost().getId());
dto.setPostTitle(history.getComment().getPost().getTitle());
}
}
if (history.getFromUser() != null) {
dto.setFromUserId(history.getFromUser().getId());
dto.setFromUserName(history.getFromUser().getUsername());
}
return dto;
}
}
@@ -1,49 +0,0 @@
package com.openisle.model;
import jakarta.persistence.*;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import java.time.LocalDateTime;
/** Point change history for a user. */
@Entity
@Getter
@Setter
@NoArgsConstructor
@Table(name = "point_histories")
public class PointHistory {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@ManyToOne(fetch = FetchType.LAZY, optional = false)
@JoinColumn(name = "user_id")
private User user;
@Enumerated(EnumType.STRING)
@Column(nullable = false)
private PointHistoryType type;
@Column(nullable = false)
private int amount;
@Column(nullable = false)
private int balance;
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "post_id")
private Post post;
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "comment_id")
private Comment comment;
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "from_user_id")
private User fromUser;
@Column(name = "created_at", nullable = false)
private LocalDateTime createdAt;
}
@@ -1,10 +0,0 @@
package com.openisle.model;
public enum PointHistoryType {
POST,
COMMENT,
POST_LIKED,
COMMENT_LIKED,
INVITE,
SYSTEM_ONLINE
}
@@ -1,12 +0,0 @@
package com.openisle.repository;
import com.openisle.model.PointHistory;
import com.openisle.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;
public interface PointHistoryRepository extends JpaRepository<PointHistory, Long> {
List<PointHistory> findByUserOrderByIdDesc(User user);
long countByUser(User user);
}
@@ -45,10 +45,10 @@ public class InviteService {
return invite != null && invite.getUsageCount() < 3; return invite != null && invite.getUsageCount() < 3;
} }
public void consume(String token, String newUserName) { public void consume(String token) {
InviteToken invite = inviteTokenRepository.findById(token).orElseThrow(); InviteToken invite = inviteTokenRepository.findById(token).orElseThrow();
invite.setUsageCount(invite.getUsageCount() + 1); invite.setUsageCount(invite.getUsageCount() + 1);
inviteTokenRepository.save(invite); inviteTokenRepository.save(invite);
pointService.awardForInvite(invite.getInviter().getUsername(), newUserName); pointService.awardForInvite(invite.getInviter().getUsername());
} }
} }
@@ -1,6 +1,7 @@
package com.openisle.service; package com.openisle.service;
import com.openisle.model.*; import com.openisle.model.PointLog;
import com.openisle.model.User;
import com.openisle.repository.*; import com.openisle.repository.*;
import lombok.RequiredArgsConstructor; import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
@@ -15,22 +16,19 @@ public class PointService {
private final PointLogRepository pointLogRepository; private final PointLogRepository pointLogRepository;
private final PostRepository postRepository; private final PostRepository postRepository;
private final CommentRepository commentRepository; private final CommentRepository commentRepository;
private final PointHistoryRepository pointHistoryRepository;
public int awardForPost(String userName, Long postId) { public int awardForPost(String userName) {
User user = userRepository.findByUsername(userName).orElseThrow(); User user = userRepository.findByUsername(userName).orElseThrow();
PointLog log = getTodayLog(user); PointLog log = getTodayLog(user);
if (log.getPostCount() > 1) return 0; if (log.getPostCount() > 1) return 0;
log.setPostCount(log.getPostCount() + 1); log.setPostCount(log.getPostCount() + 1);
pointLogRepository.save(log); pointLogRepository.save(log);
Post post = postRepository.findById(postId).orElseThrow(); return addPoint(user, 30);
return addPoint(user, 30, PointHistoryType.POST, post, null, null);
} }
public int awardForInvite(String userName, String inviteeName) { public int awardForInvite(String userName) {
User user = userRepository.findByUsername(userName).orElseThrow(); User user = userRepository.findByUsername(userName).orElseThrow();
User invitee = userRepository.findByUsername(inviteeName).orElseThrow(); return addPoint(user, 500);
return addPoint(user, 500, PointHistoryType.INVITE, null, null, invitee);
} }
private PointLog getTodayLog(User user) { private PointLog getTodayLog(User user) {
@@ -47,38 +45,20 @@ public class PointService {
}); });
} }
private int addPoint(User user, int amount, PointHistoryType type, private int addPoint(User user, int amount) {
Post post, Comment comment, User fromUser) {
user.setPoint(user.getPoint() + amount); user.setPoint(user.getPoint() + amount);
userRepository.save(user); userRepository.save(user);
recordHistory(user, type, amount, post, comment, fromUser);
return amount; return amount;
} }
private void recordHistory(User user, PointHistoryType type, int amount,
Post post, Comment comment, User fromUser) {
PointHistory history = new PointHistory();
history.setUser(user);
history.setType(type);
history.setAmount(amount);
history.setBalance(user.getPoint());
history.setPost(post);
history.setComment(comment);
history.setFromUser(fromUser);
history.setCreatedAt(java.time.LocalDateTime.now());
pointHistoryRepository.save(history);
}
// 同时为评论者和发帖人增加积分,返回值为评论者增加的积分数 // 同时为评论者和发帖人增加积分,返回值为评论者增加的积分数
// 注意需要考虑发帖和回复是同一人的场景 // 注意需要考虑发帖和回复是同一人的场景
public int awardForComment(String commenterName, Long postId, Long commentId) { public int awardForComment(String commenterName, Long postId) {
// 标记评论者是否已达到积分奖励上限 // 标记评论者是否已达到积分奖励上限
boolean isTheRewardCapped = false; boolean isTheRewardCapped = false;
// 根据帖子id找到发帖人 // 根据帖子id找到发帖人
Post post = postRepository.findById(postId).orElseThrow(); User poster = postRepository.findById(postId).orElseThrow().getAuthor();
User poster = post.getAuthor();
Comment comment = commentRepository.findById(commentId).orElseThrow();
// 获取评论者的加分日志 // 获取评论者的加分日志
User commenter = userRepository.findByUsername(commenterName).orElseThrow(); User commenter = userRepository.findByUsername(commenterName).orElseThrow();
@@ -94,15 +74,15 @@ public class PointService {
} else { } else {
log.setCommentCount(log.getCommentCount() + 1); log.setCommentCount(log.getCommentCount() + 1);
pointLogRepository.save(log); pointLogRepository.save(log);
return addPoint(commenter, 10, PointHistoryType.COMMENT, post, comment, null); return addPoint(commenter, 10);
} }
} else { } else {
addPoint(poster, 10, PointHistoryType.COMMENT, post, comment, commenter); addPoint(poster, 10);
// 如果发帖人与评论者不是同一个,则根据是否达到积分上限来判断评论者加分情况 // 如果发帖人与评论者不是同一个,则根据是否达到积分上限来判断评论者加分情况
if (isTheRewardCapped) { if (isTheRewardCapped) {
return 0; return 0;
} else { } else {
return addPoint(commenter, 10, PointHistoryType.COMMENT, post, comment, null); return addPoint(commenter, 10);
} }
} }
} }
@@ -121,8 +101,7 @@ public class PointService {
} }
// 如果不是同一个,则为发帖人加分 // 如果不是同一个,则为发帖人加分
Post post = postRepository.findById(postId).orElseThrow(); return addPoint(poster, 10);
return addPoint(poster, 10, PointHistoryType.POST_LIKED, post, null, reactioner);
} }
// 考虑点赞者和评论者是同一个的情况 // 考虑点赞者和评论者是同一个的情况
@@ -139,17 +118,7 @@ public class PointService {
} }
// 如果不是同一个,则为发帖人加分 // 如果不是同一个,则为发帖人加分
Comment comment = commentRepository.findById(commentId).orElseThrow(); return addPoint(commenter, 10);
Post post = comment.getPost();
return addPoint(commenter, 10, PointHistoryType.COMMENT_LIKED, post, comment, reactioner);
}
public java.util.List<PointHistory> listHistory(String userName) {
User user = userRepository.findByUsername(userName).orElseThrow();
if (pointHistoryRepository.countByUser(user) == 0) {
recordHistory(user, PointHistoryType.SYSTEM_ONLINE, 0, null, null, null);
}
return pointHistoryRepository.findByUserOrderByIdDesc(user);
} }
} }
+65
View File
@@ -0,0 +1,65 @@
<template>
<label class="switch">
<input
type="checkbox"
:checked="modelValue"
@change="$emit('update:modelValue', $event.target.checked)"
/>
<span class="slider"></span>
</label>
</template>
<script setup>
defineProps({
modelValue: { type: Boolean, default: false },
})
defineEmits(['update:modelValue'])
</script>
<style scoped>
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.2s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.2s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--primary-color);
}
input:checked + .slider:before {
transform: translateX(20px);
}
</style>
+8 -8
View File
@@ -50,7 +50,7 @@ onMounted(async () => {
}) })
const checkMilkTeaActivity = async () => { const checkMilkTeaActivity = async () => {
if (!import.meta.client) return if (!process.client) return
if (localStorage.getItem('milkTeaActivityPopupShown')) return if (localStorage.getItem('milkTeaActivityPopupShown')) return
try { try {
const res = await fetch(`${API_BASE_URL}/api/activities`) const res = await fetch(`${API_BASE_URL}/api/activities`)
@@ -68,7 +68,7 @@ const checkMilkTeaActivity = async () => {
} }
const checkInviteCodeActivity = async () => { const checkInviteCodeActivity = async () => {
if (!import.meta.client) return if (!process.client) return
if (localStorage.getItem('inviteCodeActivityPopupShown')) return if (localStorage.getItem('inviteCodeActivityPopupShown')) return
try { try {
const res = await fetch(`${API_BASE_URL}/api/activities`) const res = await fetch(`${API_BASE_URL}/api/activities`)
@@ -86,30 +86,30 @@ const checkInviteCodeActivity = async () => {
} }
const closeInviteCodePopup = () => { const closeInviteCodePopup = () => {
if (!import.meta.client) return if (!process.client) return
localStorage.setItem('inviteCodeActivityPopupShown', 'true') localStorage.setItem('inviteCodeActivityPopupShown', 'true')
showInviteCodePopup.value = false showInviteCodePopup.value = false
} }
const closeMilkTeaPopup = () => { const closeMilkTeaPopup = () => {
if (!import.meta.client) return if (!process.client) return
localStorage.setItem('milkTeaActivityPopupShown', 'true') localStorage.setItem('milkTeaActivityPopupShown', 'true')
showMilkTeaPopup.value = false showMilkTeaPopup.value = false
} }
const checkNotificationSetting = async () => { const checkNotificationSetting = async () => {
if (!import.meta.client) return if (!process.client) return
if (!authState.loggedIn) return if (!authState.loggedIn) return
if (localStorage.getItem('notificationSettingPopupShown')) return if (localStorage.getItem('notificationSettingPopupShown')) return
showNotificationPopup.value = true showNotificationPopup.value = true
} }
const closeNotificationPopup = () => { const closeNotificationPopup = () => {
if (!import.meta.client) return if (!process.client) return
localStorage.setItem('notificationSettingPopupShown', 'true') localStorage.setItem('notificationSettingPopupShown', 'true')
showNotificationPopup.value = false showNotificationPopup.value = false
} }
const checkNewMedals = async () => { const checkNewMedals = async () => {
if (!import.meta.client) return if (!process.client) return
if (!authState.loggedIn || !authState.userId) return if (!authState.loggedIn || !authState.userId) return
try { try {
const res = await fetch(`${API_BASE_URL}/api/medals?userId=${authState.userId}`) const res = await fetch(`${API_BASE_URL}/api/medals?userId=${authState.userId}`)
@@ -127,7 +127,7 @@ const checkNewMedals = async () => {
} }
} }
const closeMedalPopup = () => { const closeMedalPopup = () => {
if (!import.meta.client) return if (!process.client) return
const seen = new Set(JSON.parse(localStorage.getItem('seenMedals') || '[]')) const seen = new Set(JSON.parse(localStorage.getItem('seenMedals') || '[]'))
newMedals.value.forEach((m) => seen.add(m.type)) newMedals.value.forEach((m) => seen.add(m.type))
localStorage.setItem('seenMedals', JSON.stringify([...seen])) localStorage.setItem('seenMedals', JSON.stringify([...seen]))
@@ -40,7 +40,7 @@ const stopObserver = () => {
} }
const startObserver = () => { const startObserver = () => {
if (!import.meta.client || props.pause || done.value) return if (!process.client || props.pause || done.value) return
stopObserver() stopObserver()
io = new IntersectionObserver( io = new IntersectionObserver(
async (entries) => { async (entries) => {
+1 -1
View File
@@ -63,7 +63,7 @@ const isImageIcon = (icon) => {
} }
const buildTagsUrl = (kw = '') => { const buildTagsUrl = (kw = '') => {
const base = API_BASE_URL || (import.meta.client ? window.location.origin : '') const base = API_BASE_URL || (process.client ? window.location.origin : '')
const url = new URL('/api/tags', base) const url = new URL('/api/tags', base)
if (kw) url.searchParams.set('keyword', kw) if (kw) url.searchParams.set('keyword', kw)
+5 -5
View File
@@ -1,7 +1,7 @@
// 导出一个便捷的 toast 对象 // 导出一个便捷的 toast 对象
export const toast = { export const toast = {
success: async (message) => { success: async (message) => {
if (import.meta.client) { if (process.client) {
try { try {
const { useToast } = await import('vue-toastification') const { useToast } = await import('vue-toastification')
const toastInstance = useToast() const toastInstance = useToast()
@@ -12,7 +12,7 @@ export const toast = {
} }
}, },
error: async (message) => { error: async (message) => {
if (import.meta.client) { if (process.client) {
try { try {
const { useToast } = await import('vue-toastification') const { useToast } = await import('vue-toastification')
const toastInstance = useToast() const toastInstance = useToast()
@@ -23,7 +23,7 @@ export const toast = {
} }
}, },
warning: async (message) => { warning: async (message) => {
if (import.meta.client) { if (process.client) {
try { try {
const { useToast } = await import('vue-toastification') const { useToast } = await import('vue-toastification')
const toastInstance = useToast() const toastInstance = useToast()
@@ -34,7 +34,7 @@ export const toast = {
} }
}, },
info: async (message) => { info: async (message) => {
if (import.meta.client) { if (process.client) {
try { try {
const { useToast } = await import('vue-toastification') const { useToast } = await import('vue-toastification')
const toastInstance = useToast() const toastInstance = useToast()
@@ -48,7 +48,7 @@ export const toast = {
// 导出 useToast composable // 导出 useToast composable
export const useToast = () => { export const useToast = () => {
if (import.meta.client) { if (process.client) {
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
try { try {
const { useToast: useVueToast } = await import('vue-toastification') const { useToast: useVueToast } = await import('vue-toastification')
-13
View File
@@ -1,8 +1,5 @@
<template> <template>
<div class="site-stats-page"> <div class="site-stats-page">
<div v-if="isLoading" class="loading-message">
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div>
<ClientOnly> <ClientOnly>
<VChart <VChart
v-if="dauOption" v-if="dauOption"
@@ -54,10 +51,8 @@ const dauOption = ref(null)
const newUserOption = ref(null) const newUserOption = ref(null)
const postOption = ref(null) const postOption = ref(null)
const commentOption = ref(null) const commentOption = ref(null)
const isLoading = ref(false)
async function loadData() { async function loadData() {
isLoading.value = true
const token = getToken() const token = getToken()
const headers = { Authorization: `Bearer ${token}` } const headers = { Authorization: `Bearer ${token}` }
@@ -98,7 +93,6 @@ async function loadData() {
const data = await commentRes.json() const data = await commentRes.json()
commentOption.value = toOption('每日回贴量', data) commentOption.value = toOption('每日回贴量', data)
} }
isLoading.value = false
} }
onMounted(loadData) onMounted(loadData)
@@ -111,11 +105,4 @@ onMounted(loadData)
background-color: var(--background-color); background-color: var(--background-color);
margin: 0 auto; margin: 0 auto;
} }
.loading-message {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
</style> </style>
+1 -1
View File
@@ -338,7 +338,7 @@ watch([selectedCategory, selectedTags], () => {
watch(selectedTopic, (val) => { watch(selectedTopic, (val) => {
loadOptions() loadOptions()
selectedTopicCookie.value = val selectedTopicCookie.value = val
if (import.meta.client) localStorage.setItem('homeTab', val) if (process.client) localStorage.setItem('homeTab', val)
}) })
/** 选项首屏加载:服务端执行一次;客户端兜底 **/ /** 选项首屏加载:服务端执行一次;客户端兜底 **/
+20 -26
View File
@@ -33,15 +33,13 @@
<div v-if="selectedTab === 'control'"> <div v-if="selectedTab === 'control'">
<div class="message-control-container"> <div class="message-control-container">
<div class="message-control-title">通知设置</div> <div class="message-control-title">通知设置</div>
<div class="message-control-push-item-container"> <div class="message-control-item-container">
<div <div v-for="pref in notificationPrefs" :key="pref.type" class="message-control-item">
v-for="pref in notificationPrefs" <div class="message-control-item-label">{{ formatType(pref.type) }}</div>
:key="pref.type" <BaseSwitch
class="message-control-push-item" :model-value="pref.enabled"
:class="{ select: pref.enabled }" @update:modelValue="(val) => togglePref(pref, val)"
@click="togglePref(pref)" />
>
{{ formatType(pref.type) }}
</div> </div>
</div> </div>
</div> </div>
@@ -550,6 +548,7 @@ import {
updateNotificationPreference, updateNotificationPreference,
} from '~/utils/notification' } from '~/utils/notification'
import TimeManager from '~/utils/time' import TimeManager from '~/utils/time'
import BaseSwitch from '~/components/BaseSwitch.vue'
const config = useRuntimeConfig() const config = useRuntimeConfig()
const API_BASE_URL = config.public.apiBaseUrl const API_BASE_URL = config.public.apiBaseUrl
@@ -582,10 +581,10 @@ const fetchPrefs = async () => {
notificationPrefs.value = await fetchNotificationPreferences() notificationPrefs.value = await fetchNotificationPreferences()
} }
const togglePref = async (pref) => { const togglePref = async (pref, value) => {
const ok = await updateNotificationPreference(pref.type, !pref.enabled) const ok = await updateNotificationPreference(pref.type, value)
if (ok) { if (ok) {
pref.enabled = !pref.enabled pref.enabled = value
await fetchNotifications({ await fetchNotifications({
page: page.value, page: page.value,
size: pageSize, size: pageSize,
@@ -846,26 +845,21 @@ onActivated(async () => {
padding: 20px; padding: 20px;
} }
.message-control-push-item-container { .message-control-item-container {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: wrap;
gap: 10px; gap: 10px;
} }
.message-control-push-item { .message-control-item {
font-size: 14px; display: flex;
margin-bottom: 5px; align-items: center;
padding: 8px 16px; justify-content: space-between;
border: 1px solid var(--normal-border-color); max-width: 200px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
} }
.message-control-push-item.select { .message-control-item-label {
background-color: var(--primary-color); font-size: 14px;
color: white;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
+38 -173
View File
@@ -1,151 +1,62 @@
<template> <template>
<div class="point-mall-page"> <div class="point-mall-page">
<div class="point-tabs"> <section class="rules">
<div <div class="section-title">🎉 积分规则</div>
:class="['point-tab-item', { selected: selectedTab === 'mall' }]" <div class="section-content">
@click="selectedTab = 'mall'" <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
>
积分兑换
</div>
<div
:class="['point-tab-item', { selected: selectedTab === 'history' }]"
@click="selectedTab = 'history'"
>
积分历史
</div> </div>
</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> </div>
<template v-if="selectedTab === 'mall'"> <div class="point-info">
<section class="rules"> <p v-if="authState.loggedIn && point !== null">
<div class="section-title">🎉 积分规则</div> <span><i class="fas fa-coins coin-icon"></i></span>我的积分<span class="point-value">{{
<div class="section-content"> point
<div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div> }}</span>
</p>
</div>
<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" />
<div class="goods-item-name">{{ good.name }}</div>
<div class="goods-item-cost">
<i class="fas fa-coins"></i>
{{ good.cost }} 积分
</div> </div>
</section> <div
class="goods-item-button"
<div class="loading-points-container" v-if="isLoading"> :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch> @click="openRedeem(good)"
</div> >
兑换
<div class="point-info">
<p v-if="authState.loggedIn && point !== null">
<span><i class="fas fa-coins coin-icon"></i></span>我的积分<span class="point-value">{{
point
}}</span>
</p>
</div>
<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" />
<div class="goods-item-name">{{ good.name }}</div>
<div class="goods-item-cost">
<i class="fas fa-coins"></i>
{{ good.cost }} 积分
</div>
<div
class="goods-item-button"
:class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
@click="openRedeem(good)"
>
兑换
</div>
</div> </div>
</section>
<RedeemPopup
:visible="dialogVisible"
v-model="contact"
:loading="loading"
@close="closeRedeem"
@submit="submitRedeem"
/>
</template>
<template v-else>
<div class="loading-points-container" v-if="historyLoading">
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div> </div>
<BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" /> </section>
<div class="timeline-container" v-else> <RedeemPopup
<BaseTimeline :items="histories"> :visible="dialogVisible"
<template #item="{ item }"> v-model="contact"
<div class="history-content"> :loading="loading"
<template v-if="item.type === 'POST'"> @close="closeRedeem"
发送帖子 @submit="submitRedeem"
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{ />
item.postTitle
}}</NuxtLink>
获得{{ item.amount }}积分
</template>
<template v-else-if="item.type === 'COMMENT' && item.commentId && !item.fromUserId">
发送评论
<NuxtLink
:to="`/posts/${item.postId}#comment-${item.commentId}`"
class="timeline-link"
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
>
获得{{ item.amount }}积分
</template>
<template v-else-if="item.type === 'POST_LIKED' && 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_LIKED' && 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 === 'INVITE' && item.fromUserId">
邀请了好友
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
item.fromUserName
}}</NuxtLink
>加入社区获得 {{ item.amount }} 积分
</template>
<template v-else-if="item.type === 'SYSTEM_ONLINE'">
积分历史系统上线你目前的积分是 {{ item.balance }}
</template>
</div>
</template>
</BaseTimeline>
</div>
</template>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import { authState, fetchCurrentUser, getToken } from '~/utils/auth' import { authState, fetchCurrentUser, getToken } from '~/utils/auth'
import { toast } from '~/main' import { toast } from '~/main'
import RedeemPopup from '~/components/RedeemPopup.vue' import RedeemPopup from '~/components/RedeemPopup.vue'
import BaseTimeline from '~/components/BaseTimeline.vue'
import BasePlaceholder from '~/components/BasePlaceholder.vue'
import { stripMarkdownLength } from '~/utils/markdown'
const config = useRuntimeConfig() const config = useRuntimeConfig()
const API_BASE_URL = config.public.apiBaseUrl const API_BASE_URL = config.public.apiBaseUrl
const selectedTab = ref('mall')
const point = ref(null) const point = ref(null)
const isLoading = ref(false) const isLoading = ref(false)
const histories = ref([])
const historyLoading = ref(false)
const historyLoaded = ref(false)
const pointRules = [ const pointRules = [
'发帖:每天前两次,每次 30 积分', '发帖:每天前两次,每次 30 积分',
@@ -171,12 +82,6 @@ onMounted(async () => {
isLoading.value = false isLoading.value = false
}) })
watch(selectedTab, (val) => {
if (val === 'history' && !historyLoaded.value) {
loadHistory()
}
})
const loadGoods = async () => { const loadGoods = async () => {
const res = await fetch(`${API_BASE_URL}/api/point-goods`) const res = await fetch(`${API_BASE_URL}/api/point-goods`)
if (res.ok) { if (res.ok) {
@@ -184,23 +89,6 @@ const loadGoods = async () => {
} }
} }
const loadHistory = async () => {
if (!authState.loggedIn) {
historyLoaded.value = true
return
}
historyLoading.value = true
const token = getToken()
const res = await fetch(`${API_BASE_URL}/api/point-histories`, {
headers: { Authorization: `Bearer ${token}` },
})
if (res.ok) {
histories.value = await res.json()
}
historyLoading.value = false
historyLoaded.value = true
}
const openRedeem = (good) => { const openRedeem = (good) => {
if (!authState.loggedIn || point.value === null || point.value < good.cost) { if (!authState.loggedIn || point.value === null || point.value < good.cost) {
toast.error('积分不足') toast.error('积分不足')
@@ -247,29 +135,6 @@ const submitRedeem = async () => {
margin: 0 auto; margin: 0 auto;
} }
.point-tabs {
display: flex;
border-bottom: 1px solid var(--normal-border-color);
}
.point-tab-item {
padding: 10px 15px;
cursor: pointer;
}
.point-tab-item.selected {
border-bottom: 2px solid var(--primary-color);
font-weight: bold;
}
.timeline-container {
margin-top: 20px;
}
.timeline-link {
color: var(--primary-color);
}
.loading-points-container { .loading-points-container {
margin-top: 100px; margin-top: 100px;
display: flex; display: flex;
+4 -5
View File
@@ -295,7 +295,7 @@ const commentSort = ref('NEWEST')
const isFetchingComments = ref(false) const isFetchingComments = ref(false)
const isMobile = useIsMobile() const isMobile = useIsMobile()
const headerHeight = import.meta.client const headerHeight = process.client
? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 0 ? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 0
: 0 : 0
@@ -309,7 +309,7 @@ useHead(() => ({
], ],
})) }))
if (import.meta.client) { if (process.client) {
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener('scroll', updateCurrentIndex) window.removeEventListener('scroll', updateCurrentIndex)
if (countdownTimer) clearInterval(countdownTimer) if (countdownTimer) clearInterval(countdownTimer)
@@ -355,7 +355,7 @@ const updateCountdown = () => {
countdown.value = `${h}:${m}:${s}` countdown.value = `${h}:${m}:${s}`
} }
const startCountdown = () => { const startCountdown = () => {
if (!import.meta.client) return if (!process.client) return
if (countdownTimer) clearInterval(countdownTimer) if (countdownTimer) clearInterval(countdownTimer)
updateCountdown() updateCountdown()
countdownTimer = setInterval(updateCountdown, 1000) countdownTimer = setInterval(updateCountdown, 1000)
@@ -515,7 +515,7 @@ watchEffect(() => {
}) })
// 404 // 404
// if (postError.value?.statusCode === 404 && import.meta.client) { // if (postError.value?.statusCode === 404 && process.client) {
// router.replace('/404') // router.replace('/404')
// } // }
@@ -877,7 +877,6 @@ const gotoProfile = () => {
} }
const initPage = async () => { const initPage = async () => {
scrollTo(0, 0)
await fetchComments() await fetchComments()
const hash = location.hash const hash = location.hash
const id = hash.startsWith('#comment-') ? hash.substring('#comment-'.length) : null const id = hash.startsWith('#comment-') ? hash.substring('#comment-'.length) : null
+2 -49
View File
@@ -38,10 +38,7 @@
</div> </div>
<div class="form-row switch-row"> <div class="form-row switch-row">
<div class="setting-title">毛玻璃效果</div> <div class="setting-title">毛玻璃效果</div>
<label class="switch"> <BaseSwitch v-model="frosted" />
<input type="checkbox" v-model="frosted" />
<span class="slider"></span>
</label>
</div> </div>
</div> </div>
<div v-if="role === 'ADMIN'" class="admin-section"> <div v-if="role === 'ADMIN'" class="admin-section">
@@ -76,6 +73,7 @@ import { ref, onMounted, watch } from 'vue'
import AvatarCropper from '~/components/AvatarCropper.vue' import AvatarCropper from '~/components/AvatarCropper.vue'
import BaseInput from '~/components/BaseInput.vue' import BaseInput from '~/components/BaseInput.vue'
import Dropdown from '~/components/Dropdown.vue' import Dropdown from '~/components/Dropdown.vue'
import BaseSwitch from '~/components/BaseSwitch.vue'
import { toast } from '~/main' import { toast } from '~/main'
import { fetchCurrentUser, getToken, setToken } from '~/utils/auth' import { fetchCurrentUser, getToken, setToken } from '~/utils/auth'
import { frostedState, setFrosted } from '~/utils/frosted' import { frostedState, setFrosted } from '~/utils/frosted'
@@ -318,51 +316,6 @@ const save = async () => {
max-width: 200px; max-width: 200px;
} }
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.2s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.2s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--primary-color);
}
input:checked + .slider:before {
transform: translateX(20px);
}
.profile-section { .profile-section {
margin-bottom: 30px; margin-bottom: 30px;
} }
+1 -1
View File
@@ -1,7 +1,7 @@
import { clearToken } from '~/utils/auth' import { clearToken } from '~/utils/auth'
export default defineNuxtPlugin(() => { export default defineNuxtPlugin(() => {
if (import.meta.client) { if (process.client) {
const originalFetch = window.fetch const originalFetch = window.fetch
window.fetch = async (input, init) => { window.fetch = async (input, init) => {
const response = await originalFetch(input, init) const response = await originalFetch(input, init)
@@ -4,7 +4,7 @@ import '~/assets/toast.css'
export default defineNuxtPlugin(async (nuxtApp) => { export default defineNuxtPlugin(async (nuxtApp) => {
// 确保只在客户端环境中注册插件 // 确保只在客户端环境中注册插件
if (import.meta.client) { if (process.client) {
try { try {
// 使用动态导入来避免 CommonJS 模块问题 // 使用动态导入来避免 CommonJS 模块问题
const { default: Toast, POSITION } = await import('vue-toastification') const { default: Toast, POSITION } = await import('vue-toastification')
+6 -6
View File
@@ -12,7 +12,7 @@ export const authState = reactive({
role: null, role: null,
}) })
if (import.meta.client) { if (process.client) {
authState.loggedIn = authState.loggedIn =
localStorage.getItem(TOKEN_KEY) !== null && localStorage.getItem(TOKEN_KEY) !== '' localStorage.getItem(TOKEN_KEY) !== null && localStorage.getItem(TOKEN_KEY) !== ''
authState.userId = localStorage.getItem(USER_ID_KEY) authState.userId = localStorage.getItem(USER_ID_KEY)
@@ -21,18 +21,18 @@ if (import.meta.client) {
} }
export function getToken() { export function getToken() {
return import.meta.client ? localStorage.getItem(TOKEN_KEY) : null return process.client ? localStorage.getItem(TOKEN_KEY) : null
} }
export function setToken(token) { export function setToken(token) {
if (import.meta.client) { if (process.client) {
localStorage.setItem(TOKEN_KEY, token) localStorage.setItem(TOKEN_KEY, token)
authState.loggedIn = true authState.loggedIn = true
} }
} }
export function clearToken() { export function clearToken() {
if (import.meta.client) { if (process.client) {
localStorage.removeItem(TOKEN_KEY) localStorage.removeItem(TOKEN_KEY)
clearUserInfo() clearUserInfo()
authState.loggedIn = false authState.loggedIn = false
@@ -40,7 +40,7 @@ export function clearToken() {
} }
export function setUserInfo({ id, username }) { export function setUserInfo({ id, username }) {
if (import.meta.client) { if (process.client) {
authState.userId = id authState.userId = id
authState.username = username authState.username = username
if (arguments[0] && arguments[0].role) { if (arguments[0] && arguments[0].role) {
@@ -53,7 +53,7 @@ export function setUserInfo({ id, username }) {
} }
export function clearUserInfo() { export function clearUserInfo() {
if (import.meta.client) { if (process.client) {
localStorage.removeItem(USER_ID_KEY) localStorage.removeItem(USER_ID_KEY)
localStorage.removeItem(USERNAME_KEY) localStorage.removeItem(USERNAME_KEY)
localStorage.removeItem(ROLE_KEY) localStorage.removeItem(ROLE_KEY)