mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-07 15:41:02 +08:00
Compare commits
42 Commits
codex/add-
...
feature/co
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d8534fb94d | ||
|
|
37bef0b2d7 | ||
|
|
3519a41a2e | ||
|
|
ab04a8b6b1 | ||
|
|
ea079e8b8a | ||
|
|
519656359f | ||
|
|
dc64785279 | ||
|
|
9421d004d4 | ||
|
|
90bd41e740 | ||
|
|
7d5c864f64 | ||
|
|
3f35add587 | ||
|
|
1e284e15df | ||
|
|
9d76926b8a | ||
|
|
d2ce203236 | ||
|
|
b2228296af | ||
|
|
7020ae19d0 | ||
|
|
227fb6f6cc | ||
|
|
0e46a67ea6 | ||
|
|
b20b705e46 | ||
|
|
4b3ffbab99 | ||
|
|
74039c89f9 | ||
|
|
10dca73d2f | ||
|
|
e37ed1b70b | ||
|
|
8500a7a914 | ||
|
|
3adf722b3b | ||
|
|
791e5a4daf | ||
|
|
7d25e87fbc | ||
|
|
d02c316a70 | ||
|
|
c189c80c05 | ||
|
|
07db73c9c7 | ||
|
|
c296e25927 | ||
|
|
61fc9d799d | ||
|
|
20c6c73f8c | ||
|
|
81d1f79aae | ||
|
|
4ff76d2586 | ||
|
|
f24bc239cc | ||
|
|
143691206d | ||
|
|
843e53143d | ||
|
|
16c94690bd | ||
|
|
5be00e7013 | ||
|
|
a3201f05fb | ||
|
|
da311806c1 |
@@ -249,6 +249,6 @@ https://resend.com/emails 创建账号并登录
|
||||
|
||||
## 开源共建和API文档
|
||||
|
||||
- API文档: https://openisle-docs.netlify.app/docs/openapi
|
||||
- API文档: https://docs.open-isle.com/openapi
|
||||
|
||||
|
||||
|
||||
@@ -44,6 +44,8 @@ public class CachingConfig {
|
||||
public static final String VERIFY_CACHE_NAME="openisle_verify";
|
||||
// 发帖频率限制
|
||||
public static final String LIMIT_CACHE_NAME="openisle_limit";
|
||||
// 用户访问统计
|
||||
public static final String VISIT_CACHE_NAME="openisle_visit";
|
||||
|
||||
/**
|
||||
* 自定义Redis的序列化器
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
package com.openisle.config;
|
||||
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.amqp.core.Binding;
|
||||
import org.springframework.amqp.core.BindingBuilder;
|
||||
import org.springframework.amqp.core.Queue;
|
||||
@@ -23,6 +24,7 @@ import java.util.List;
|
||||
|
||||
@Configuration
|
||||
@RequiredArgsConstructor
|
||||
@Slf4j
|
||||
public class RabbitMQConfig {
|
||||
|
||||
public static final String EXCHANGE_NAME = "openisle-exchange";
|
||||
@@ -38,7 +40,7 @@ public class RabbitMQConfig {
|
||||
|
||||
@PostConstruct
|
||||
public void init() {
|
||||
System.out.println("RabbitMQ配置初始化: 队列数量=" + queueCount + ", 持久化=" + queueDurable);
|
||||
log.info("RabbitMQ配置初始化: 队列数量={}, 持久化={}", queueCount, queueDurable);
|
||||
}
|
||||
|
||||
@Bean
|
||||
@@ -51,7 +53,7 @@ public class RabbitMQConfig {
|
||||
*/
|
||||
@Bean
|
||||
public List<Queue> shardedQueues() {
|
||||
System.out.println("开始创建分片队列 Bean...");
|
||||
log.info("开始创建分片队列 Bean...");
|
||||
|
||||
List<Queue> queues = new ArrayList<>();
|
||||
for (int i = 0; i < queueCount; i++) {
|
||||
@@ -61,7 +63,7 @@ public class RabbitMQConfig {
|
||||
queues.add(queue);
|
||||
}
|
||||
|
||||
System.out.println("分片队列 Bean 创建完成,总数: " + queues.size());
|
||||
log.info("分片队列 Bean 创建完成,总数: {}", queues.size());
|
||||
return queues;
|
||||
}
|
||||
|
||||
@@ -70,7 +72,7 @@ public class RabbitMQConfig {
|
||||
*/
|
||||
@Bean
|
||||
public List<Binding> shardedBindings(TopicExchange exchange, @Qualifier("shardedQueues") List<Queue> shardedQueues) {
|
||||
System.out.println("开始创建分片绑定 Bean...");
|
||||
log.info("开始创建分片绑定 Bean...");
|
||||
List<Binding> bindings = new ArrayList<>();
|
||||
if (shardedQueues != null) {
|
||||
for (Queue queue : shardedQueues) {
|
||||
@@ -82,7 +84,7 @@ public class RabbitMQConfig {
|
||||
}
|
||||
}
|
||||
|
||||
System.out.println("分片绑定 Bean 创建完成,总数: " + bindings.size());
|
||||
log.info("分片绑定 Bean 创建完成,总数: {}", bindings.size());
|
||||
return bindings;
|
||||
}
|
||||
|
||||
@@ -135,14 +137,14 @@ public class RabbitMQConfig {
|
||||
@Qualifier("shardedBindings") List<Binding> shardedBindings,
|
||||
Binding legacyBinding) {
|
||||
return args -> {
|
||||
System.out.println("=== 开始主动声明 RabbitMQ 组件 ===");
|
||||
log.info("=== 开始主动声明 RabbitMQ 组件 ===");
|
||||
|
||||
try {
|
||||
// 声明交换
|
||||
rabbitAdmin.declareExchange(exchange);
|
||||
|
||||
// 声明分片队列 - 检查存在性
|
||||
System.out.println("开始检查并声明 " + shardedQueues.size() + " 个分片队列...");
|
||||
log.info("开始检查并声明 {} 个分片队列...", shardedQueues.size());
|
||||
int successCount = 0;
|
||||
int skippedCount = 0;
|
||||
|
||||
@@ -159,45 +161,44 @@ public class RabbitMQConfig {
|
||||
skippedCount++;
|
||||
}
|
||||
} catch (Exception e) {
|
||||
System.err.println("队列声明失败: " + queueName + ", 错误: " + e.getMessage());
|
||||
log.error("队列声明失败: {}, 错误: {}", queueName, e.getMessage());
|
||||
}
|
||||
}
|
||||
System.out.println("分片队列处理完成: 成功 " + successCount + ", 跳过 " + skippedCount + ", 总数 " + shardedQueues.size());
|
||||
log.info("分片队列处理完成: 成功 {}, 跳过 {}, 总数 {}", successCount, skippedCount, shardedQueues.size());
|
||||
|
||||
// 声明分片绑定
|
||||
System.out.println("开始声明 " + shardedBindings.size() + " 个分片绑定...");
|
||||
log.info("开始声明 {} 个分片绑定...", shardedBindings.size());
|
||||
int bindingSuccessCount = 0;
|
||||
for (Binding binding : shardedBindings) {
|
||||
try {
|
||||
rabbitAdmin.declareBinding(binding);
|
||||
bindingSuccessCount++;
|
||||
} catch (Exception e) {
|
||||
System.err.println("绑定声明失败: " + e.getMessage());
|
||||
log.error("绑定声明失败: {}", e.getMessage());
|
||||
}
|
||||
}
|
||||
System.out.println("分片绑定声明完成: 成功 " + bindingSuccessCount + "/" + shardedBindings.size());
|
||||
log.info("分片绑定声明完成: 成功 {}/{}", bindingSuccessCount, shardedBindings.size());
|
||||
|
||||
// 声明遗留队列和绑定 - 检查存在性
|
||||
try {
|
||||
rabbitAdmin.declareQueue(legacyQueue);
|
||||
rabbitAdmin.declareBinding(legacyBinding);
|
||||
System.out.println("遗留队列和绑定就绪: " + QUEUE_NAME + " (已存在或新创建)");
|
||||
log.info("遗留队列和绑定就绪: {} (已存在或新创建)", QUEUE_NAME);
|
||||
} catch (org.springframework.amqp.AmqpIOException e) {
|
||||
if (e.getMessage().contains("PRECONDITION_FAILED") && e.getMessage().contains("durable")) {
|
||||
System.out.println("遗留队列已存在但 durable 设置不匹配: " + QUEUE_NAME + ", 保持现有队列");
|
||||
log.warn("遗留队列已存在但 durable 设置不匹配: {}, 保持现有队列", QUEUE_NAME);
|
||||
} else {
|
||||
System.err.println("遗留队列声明失败: " + QUEUE_NAME + ", 错误: " + e.getMessage());
|
||||
log.error("遗留队列声明失败: {}, 错误: {}", QUEUE_NAME, e.getMessage());
|
||||
}
|
||||
} catch (Exception e) {
|
||||
System.err.println("遗留队列声明失败: " + QUEUE_NAME + ", 错误: " + e.getMessage());
|
||||
log.error("遗留队列声明失败: {}, 错误: {}", QUEUE_NAME, e.getMessage());
|
||||
}
|
||||
|
||||
System.out.println("=== RabbitMQ 组件声明完成 ===");
|
||||
System.out.println("请检查 RabbitMQ 管理界面确认队列已正确创建");
|
||||
log.info("=== RabbitMQ 组件声明完成 ===");
|
||||
log.info("请检查 RabbitMQ 管理界面确认队列已正确创建");
|
||||
|
||||
} catch (Exception e) {
|
||||
System.err.println("RabbitMQ 组件声明过程中发生严重错误:");
|
||||
e.printStackTrace();
|
||||
log.error("RabbitMQ 组件声明过程中发生严重错误", e);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import com.openisle.repository.UserRepository;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.data.redis.core.RedisTemplate;
|
||||
import org.springframework.http.HttpMethod;
|
||||
import org.springframework.security.authentication.AuthenticationManager;
|
||||
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
|
||||
@@ -26,6 +27,8 @@ import org.springframework.web.cors.CorsConfiguration;
|
||||
import org.springframework.web.cors.CorsConfigurationSource;
|
||||
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
|
||||
import java.time.LocalDate;
|
||||
import java.util.List;
|
||||
|
||||
import jakarta.servlet.FilterChain;
|
||||
@@ -44,6 +47,8 @@ public class SecurityConfig {
|
||||
@Value("${app.website-url}")
|
||||
private String websiteUrl;
|
||||
|
||||
private final RedisTemplate redisTemplate;
|
||||
|
||||
@Bean
|
||||
public PasswordEncoder passwordEncoder() {
|
||||
return new BCryptPasswordEncoder();
|
||||
@@ -208,7 +213,8 @@ public class SecurityConfig {
|
||||
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
|
||||
var auth = org.springframework.security.core.context.SecurityContextHolder.getContext().getAuthentication();
|
||||
if (auth != null && auth.isAuthenticated() && !(auth instanceof org.springframework.security.authentication.AnonymousAuthenticationToken)) {
|
||||
userVisitService.recordVisit(auth.getName());
|
||||
String key = CachingConfig.VISIT_CACHE_NAME+":"+ LocalDate.now();
|
||||
redisTemplate.opsForSet().add(key, auth.getName());
|
||||
}
|
||||
filterChain.doFilter(request, response);
|
||||
}
|
||||
|
||||
@@ -155,10 +155,10 @@ public class PostController {
|
||||
if (tagId != null) {
|
||||
tids = java.util.List.of(tagId);
|
||||
}
|
||||
|
||||
if (auth != null) {
|
||||
userVisitService.recordVisit(auth.getName());
|
||||
}
|
||||
// 只需要在请求的一开始统计一次
|
||||
// if (auth != null) {
|
||||
// userVisitService.recordVisit(auth.getName());
|
||||
// }
|
||||
|
||||
boolean hasCategories = ids != null && !ids.isEmpty();
|
||||
boolean hasTags = tids != null && !tids.isEmpty();
|
||||
@@ -195,10 +195,10 @@ public class PostController {
|
||||
if (tagId != null) {
|
||||
tids = java.util.List.of(tagId);
|
||||
}
|
||||
|
||||
if (auth != null) {
|
||||
userVisitService.recordVisit(auth.getName());
|
||||
}
|
||||
// 只需要在请求的一开始统计一次
|
||||
// if (auth != null) {
|
||||
// userVisitService.recordVisit(auth.getName());
|
||||
// }
|
||||
|
||||
return postService.listPostsByViews(ids, tids, page, pageSize)
|
||||
.stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
|
||||
@@ -223,10 +223,10 @@ public class PostController {
|
||||
if (tagId != null) {
|
||||
tids = java.util.List.of(tagId);
|
||||
}
|
||||
|
||||
if (auth != null) {
|
||||
userVisitService.recordVisit(auth.getName());
|
||||
}
|
||||
// 只需要在请求的一开始统计一次
|
||||
// if (auth != null) {
|
||||
// userVisitService.recordVisit(auth.getName());
|
||||
// }
|
||||
|
||||
return postService.listPostsByLatestReply(ids, tids, page, pageSize)
|
||||
.stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
|
||||
@@ -251,9 +251,10 @@ public class PostController {
|
||||
if (tagId != null) {
|
||||
tids = java.util.List.of(tagId);
|
||||
}
|
||||
if (auth != null) {
|
||||
userVisitService.recordVisit(auth.getName());
|
||||
}
|
||||
// 只需要在请求的一开始统计一次
|
||||
// if (auth != null) {
|
||||
// userVisitService.recordVisit(auth.getName());
|
||||
// }
|
||||
return postService.listFeaturedPosts(ids, tids, page, pageSize)
|
||||
.stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
|
||||
}
|
||||
|
||||
@@ -100,6 +100,7 @@ public class UserController {
|
||||
));
|
||||
}
|
||||
|
||||
// 这个方法似乎没有使用?
|
||||
@PostMapping("/me/signin")
|
||||
@SecurityRequirement(name = "JWT")
|
||||
@Operation(summary = "Daily sign in", description = "Sign in to receive rewards")
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
package com.openisle.scheduler;
|
||||
|
||||
import com.openisle.config.CachingConfig;
|
||||
import com.openisle.model.User;
|
||||
import com.openisle.model.UserVisit;
|
||||
import com.openisle.repository.UserRepository;
|
||||
import com.openisle.repository.UserVisitRepository;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.data.redis.core.RedisTemplate;
|
||||
import org.springframework.scheduling.annotation.Scheduled;
|
||||
import org.springframework.stereotype.Component;
|
||||
import org.springframework.util.CollectionUtils;
|
||||
|
||||
import java.time.LocalDate;
|
||||
import java.util.Set;
|
||||
|
||||
/**
|
||||
* 执行计划
|
||||
* 将每天用户访问落库
|
||||
* @author smallclover
|
||||
* @since 2025-09-09
|
||||
*/
|
||||
@Component
|
||||
@RequiredArgsConstructor
|
||||
public class UserVisitScheduler {
|
||||
private final RedisTemplate redisTemplate;
|
||||
private final UserRepository userRepository;
|
||||
private final UserVisitRepository userVisitRepository;
|
||||
|
||||
@Scheduled(cron = "0 5 0 * * ?")// 每天 00:05 执行
|
||||
public void persistDailyVisits(){
|
||||
LocalDate yesterday = LocalDate.now().minusDays(1);
|
||||
String key = CachingConfig.VISIT_CACHE_NAME+":"+ yesterday;
|
||||
Set<String> usernames = redisTemplate.opsForSet().members(key);
|
||||
if(!CollectionUtils.isEmpty(usernames)){
|
||||
for(String username: usernames){
|
||||
User user = userRepository.findByUsername(username).orElse(null);
|
||||
if(user != null){
|
||||
UserVisit userVisit = new UserVisit();
|
||||
userVisit.setUser(user);
|
||||
userVisit.setVisitDate(yesterday);
|
||||
userVisitRepository.save(userVisit);
|
||||
}
|
||||
}
|
||||
redisTemplate.delete(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,22 @@
|
||||
package com.openisle.service;
|
||||
|
||||
import com.openisle.config.CachingConfig;
|
||||
import com.openisle.model.User;
|
||||
import com.openisle.model.UserVisit;
|
||||
import com.openisle.repository.UserRepository;
|
||||
import com.openisle.repository.UserVisitRepository;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.cache.annotation.CacheConfig;
|
||||
import org.springframework.data.redis.core.RedisTemplate;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.springframework.util.CollectionUtils;
|
||||
|
||||
import java.time.Duration;
|
||||
import java.time.LocalDate;
|
||||
import java.time.LocalDateTime;
|
||||
import java.util.LinkedHashMap;
|
||||
import java.util.Map;
|
||||
import java.util.Set;
|
||||
|
||||
@Service
|
||||
@RequiredArgsConstructor
|
||||
@@ -17,6 +24,8 @@ public class UserVisitService {
|
||||
private final UserVisitRepository userVisitRepository;
|
||||
private final UserRepository userRepository;
|
||||
|
||||
private final RedisTemplate redisTemplate;
|
||||
|
||||
public boolean recordVisit(String username) {
|
||||
User user = userRepository.findByUsername(username)
|
||||
.orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
|
||||
@@ -30,10 +39,36 @@ public class UserVisitService {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 统计访问次数,改为从缓存获取/数据库获取
|
||||
* @param username
|
||||
* @return
|
||||
*/
|
||||
public long countVisits(String username) {
|
||||
User user = userRepository.findByUsername(username)
|
||||
.orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
|
||||
return userVisitRepository.countByUser(user);
|
||||
|
||||
// 如果缓存存在就返回
|
||||
String key1 = CachingConfig.VISIT_CACHE_NAME + ":"+LocalDate.now()+":count:"+username;
|
||||
Integer cached = (Integer) redisTemplate.opsForValue().get(key1);
|
||||
if(cached != null){
|
||||
return cached.longValue();
|
||||
}
|
||||
|
||||
// Redis Set 检查今天是否访问
|
||||
String todayKey = CachingConfig.VISIT_CACHE_NAME + ":" + LocalDate.now();
|
||||
boolean todayVisited = redisTemplate.opsForSet().isMember(todayKey, username);
|
||||
|
||||
Long visitCount = userVisitRepository.countByUser(user);
|
||||
if (todayVisited) visitCount += 1;
|
||||
|
||||
LocalDateTime now = LocalDateTime.now();
|
||||
LocalDateTime endOfDay = now.toLocalDate().atTime(23, 59, 59);
|
||||
long secondsUntilEndOfDay = Duration.between(now, endOfDay).getSeconds();
|
||||
|
||||
// 写入缓存,设置 TTL,当天剩余时间
|
||||
redisTemplate.opsForValue().set(key1, visitCount, Duration.ofSeconds(secondsUntilEndOfDay));
|
||||
return visitCount;
|
||||
}
|
||||
|
||||
public long countDau(LocalDate date) {
|
||||
|
||||
@@ -4,7 +4,9 @@ NUXT_PUBLIC_WEBSOCKET_URL=https://127.0.0.1:8082
|
||||
NUXT_PUBLIC_WEBSITE_BASE_URL=http://localhost:3000
|
||||
|
||||
NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com
|
||||
NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
|
||||
# NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
|
||||
; 本地
|
||||
NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liOlrZnPKRF7s7NN
|
||||
NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
|
||||
NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ
|
||||
NUXT_PUBLIC_TELEGRAM_BOT_ID=8450237135
|
||||
|
||||
@@ -239,8 +239,16 @@ body {
|
||||
}
|
||||
|
||||
.info-content-text img {
|
||||
max-width: 100%;
|
||||
max-width: min(800px, 100%);
|
||||
max-height: 600px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.11);
|
||||
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.info-content-text img:hover {
|
||||
box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.info-content-text table {
|
||||
@@ -346,25 +354,41 @@ body {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Adjust diff2html layout on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.content-diff .d2h-wrapper,
|
||||
.content-diff .d2h-code-line,
|
||||
.content-diff .d2h-code-side-line,
|
||||
.content-diff .d2h-code-line-ctn,
|
||||
.content-diff .d2h-code-side-line-ctn,
|
||||
.content-diff .d2h-file-header {
|
||||
font-size: 12px;
|
||||
.d2h-file-name {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.content-diff .d2h-wrapper {
|
||||
overflow-x: auto;
|
||||
.d2h-file-header {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.d2h-code-linenumber {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.d2h-code-line {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
/* .d2h-diff-table {
|
||||
font-size: 6px !important;
|
||||
}
|
||||
|
||||
.d2h-code-line ins {
|
||||
height: 100%;
|
||||
font-size: 13px !important;
|
||||
} */
|
||||
|
||||
/* .d2h-code-line {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.d2h-code-line-ctn {
|
||||
font-size: 12px !important;
|
||||
} */
|
||||
}
|
||||
|
||||
/* Transition API */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
|
||||
@@ -100,7 +100,7 @@ export default {
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
width: calc(100% - 32px);
|
||||
width: calc(100% - 42px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@@ -6,8 +6,15 @@
|
||||
</div>
|
||||
<div class="comment-bottom-container">
|
||||
<div class="comment-submit" :class="{ disabled: isDisabled }" @click="submit">
|
||||
<template v-if="!loading"> 发布评论 </template>
|
||||
<template v-else> <loading-four /> 发布中... </template>
|
||||
<template v-if="!loading">
|
||||
发布评论
|
||||
<span class="shortcut-icon" v-if="!isMobile">
|
||||
{{ isMac ? '⌘' : 'Ctrl' }} ⏎
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<loading-four /> 发布中...
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,6 +31,7 @@ import {
|
||||
} from '~/utils/vditor'
|
||||
import '~/assets/global.css'
|
||||
import LoginOverlay from '~/components/LoginOverlay.vue'
|
||||
import { useIsMobile } from '~/utils/screen'
|
||||
|
||||
export default {
|
||||
name: 'CommentEditor',
|
||||
@@ -52,12 +60,22 @@ export default {
|
||||
},
|
||||
components: { LoginOverlay },
|
||||
setup(props, { emit }) {
|
||||
const isMobile = useIsMobile()
|
||||
const vditorInstance = ref(null)
|
||||
const text = ref('')
|
||||
const editorId = ref(props.editorId)
|
||||
if (!editorId.value) {
|
||||
editorId.value = 'editor-' + useId()
|
||||
}
|
||||
|
||||
const isMac = ref(false)
|
||||
|
||||
if (navigator.userAgentData) {
|
||||
isMac.value = navigator.userAgentData.platform === 'macOS'
|
||||
} else {
|
||||
isMac.value = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
const getEditorTheme = getEditorThemeUtil
|
||||
const getPreviewTheme = getPreviewThemeUtil
|
||||
const applyTheme = () => {
|
||||
@@ -96,7 +114,27 @@ export default {
|
||||
applyTheme()
|
||||
},
|
||||
})
|
||||
// applyTheme()
|
||||
// 不是手机的情况下不添加快捷键
|
||||
if(!isMobile.value){
|
||||
// 添加快捷键监听 (Ctrl+Enter 或 Cmd+Enter)
|
||||
const handleKeydown = (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
|
||||
const el = document.getElementById(editorId.value)
|
||||
if (el) {
|
||||
el.addEventListener('keydown', handleKeydown)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (el) {
|
||||
el.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -134,7 +172,7 @@ export default {
|
||||
},
|
||||
)
|
||||
|
||||
return { submit, isDisabled, editorId }
|
||||
return { submit, isDisabled, editorId, isMac, isMobile}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -174,10 +212,16 @@ export default {
|
||||
.comment-submit:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comment-editor-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/** 评论按钮快捷键样式 */
|
||||
.shortcut-icon {
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.comment-submit.disabled .shortcut-icon {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -314,6 +314,7 @@ const gotoTag = (t) => {
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
@@ -408,6 +409,7 @@ const gotoTag = (t) => {
|
||||
gap: 5px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.section-item:hover {
|
||||
|
||||
@@ -5,7 +5,10 @@
|
||||
</div>
|
||||
<div class="message-bottom-container">
|
||||
<div class="message-submit" :class="{ disabled: isDisabled }" @click="submit">
|
||||
<template v-if="!loading"> 发送 </template>
|
||||
<template v-if="!loading">
|
||||
发送
|
||||
<span class="shortcut-icon" v-if="!isMobile"> {{ isMac ? '⌘' : 'Ctrl' }} ⏎ </span>
|
||||
</template>
|
||||
<template v-else> <loading-four /> 发送中... </template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -21,6 +24,8 @@ import {
|
||||
getEditorTheme as getEditorThemeUtil,
|
||||
getPreviewTheme as getPreviewThemeUtil,
|
||||
} from '~/utils/vditor'
|
||||
import { useIsMobile } from '~/utils/screen'
|
||||
import { isMac } from '~/utils/device'
|
||||
import '~/assets/global.css'
|
||||
|
||||
export default {
|
||||
@@ -44,6 +49,7 @@ export default {
|
||||
const vditorInstance = ref(null)
|
||||
const text = ref('')
|
||||
const editorId = ref(props.editorId)
|
||||
const isMobile = useIsMobile()
|
||||
if (!editorId.value) {
|
||||
editorId.value = 'editor-' + useId()
|
||||
}
|
||||
@@ -70,23 +76,6 @@ export default {
|
||||
onMounted(() => {
|
||||
vditorInstance.value = createVditor(editorId.value, {
|
||||
placeholder: '输入消息...',
|
||||
height: 150,
|
||||
toolbar: [
|
||||
'emoji',
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'link',
|
||||
'|',
|
||||
'list',
|
||||
'|',
|
||||
'line',
|
||||
'quote',
|
||||
'code',
|
||||
'inline-code',
|
||||
'|',
|
||||
'upload',
|
||||
],
|
||||
preview: {
|
||||
actions: [],
|
||||
markdown: { toc: false },
|
||||
@@ -101,6 +90,28 @@ export default {
|
||||
applyTheme()
|
||||
},
|
||||
})
|
||||
|
||||
// 不是手机的情况下不添加快捷键
|
||||
if (!isMobile.value) {
|
||||
// 添加快捷键监听 (Ctrl+Enter 或 Cmd+Enter)
|
||||
const handleKeydown = (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
|
||||
const el = document.getElementById(editorId.value)
|
||||
if (el) {
|
||||
el.addEventListener('keydown', handleKeydown)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (el) {
|
||||
el.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -138,7 +149,7 @@ export default {
|
||||
},
|
||||
)
|
||||
|
||||
return { submit, isDisabled, editorId }
|
||||
return { submit, isDisabled, editorId, isMac, isMobile }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -149,11 +160,17 @@ export default {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.vditor {
|
||||
min-height: 50px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.message-bottom-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: var(--bg-color-soft);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom-left-radius: 8px;
|
||||
@@ -179,4 +196,17 @@ export default {
|
||||
.message-submit:not(.disabled):hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
/** 评论按钮快捷键样式 */
|
||||
.shortcut-icon {
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.comment-submit.disabled .shortcut-icon {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -110,11 +110,13 @@ const diffHtml = computed(() => {
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.change-log-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.change-log-user {
|
||||
font-weight: bold;
|
||||
margin-right: 4px;
|
||||
@@ -132,6 +134,7 @@ const diffHtml = computed(() => {
|
||||
margin-right: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.change-log-time {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
|
||||
96
frontend_nuxt/config/uploadConfig.js
Normal file
96
frontend_nuxt/config/uploadConfig.js
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 文件上传配置 - 简化版
|
||||
* 专注于 FFmpeg.wasm 视频压缩,支持 Chrome/Safari
|
||||
*/
|
||||
|
||||
export const UPLOAD_CONFIG = {
|
||||
// 视频文件配置 - 专为 FFmpeg.wasm 优化
|
||||
VIDEO: {
|
||||
// 文件大小限制 (字节)
|
||||
MAX_SIZE: 20 * 1024 * 1024,
|
||||
TARGET_SIZE: 5 * 1024 * 1024, // 5MB
|
||||
|
||||
// 支持的输入格式 (FFmpeg.wasm 支持更多格式)
|
||||
SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],
|
||||
|
||||
// 输出格式 - MP4 (兼容性最好)
|
||||
OUTPUT_FORMAT: 'mp4',
|
||||
OUTPUT_CODEC: 'h264',
|
||||
},
|
||||
|
||||
// 图片文件配置
|
||||
IMAGE: {
|
||||
MAX_SIZE: 5 * 1024 * 1024, // 5MB
|
||||
TARGET_SIZE: 5 * 1024 * 1024, // 5MB
|
||||
SUPPORTED_FORMATS: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'],
|
||||
},
|
||||
|
||||
// 音频文件配置
|
||||
AUDIO: {
|
||||
MAX_SIZE: 5 * 1024 * 1024, // 5MB
|
||||
TARGET_SIZE: 5 * 1024 * 1024, // 5MB
|
||||
SUPPORTED_FORMATS: ['mp3', 'wav', 'ogg', 'aac', 'm4a'],
|
||||
},
|
||||
|
||||
// 通用文件配置
|
||||
GENERAL: {
|
||||
MAX_SIZE: 100 * 1024 * 1024, // 100MB
|
||||
CHUNK_SIZE: 5 * 1024 * 1024, // 5MB 分片大小
|
||||
},
|
||||
|
||||
// 用户体验配置
|
||||
UI: {
|
||||
SUCCESS_DURATION: 2000,
|
||||
ERROR_DURATION: 3000,
|
||||
WARNING_DURATION: 3000,
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件类型配置
|
||||
*/
|
||||
export function getFileTypeConfig(filename) {
|
||||
const ext = filename.split('.').pop().toLowerCase()
|
||||
|
||||
if (UPLOAD_CONFIG.VIDEO.SUPPORTED_FORMATS.includes(ext)) {
|
||||
return { type: 'video', config: UPLOAD_CONFIG.VIDEO }
|
||||
}
|
||||
|
||||
if (UPLOAD_CONFIG.IMAGE.SUPPORTED_FORMATS.includes(ext)) {
|
||||
return { type: 'image', config: UPLOAD_CONFIG.IMAGE }
|
||||
}
|
||||
|
||||
if (UPLOAD_CONFIG.AUDIO.SUPPORTED_FORMATS.includes(ext)) {
|
||||
return { type: 'audio', config: UPLOAD_CONFIG.AUDIO }
|
||||
}
|
||||
|
||||
return { type: 'general', config: UPLOAD_CONFIG.GENERAL }
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化文件大小
|
||||
*/
|
||||
export function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算压缩节省的费用 (示例函数)
|
||||
*/
|
||||
export function calculateSavings(originalSize, compressedSize, costPerMB = 0.01) {
|
||||
const originalMB = originalSize / (1024 * 1024)
|
||||
const compressedMB = compressedSize / (1024 * 1024)
|
||||
const savedMB = originalMB - compressedMB
|
||||
const savedCost = savedMB * costPerMB
|
||||
|
||||
return {
|
||||
savedMB: savedMB.toFixed(2),
|
||||
savedCost: savedCost.toFixed(4),
|
||||
originalCost: (originalMB * costPerMB).toFixed(4),
|
||||
compressedCost: (compressedMB * costPerMB).toFixed(4),
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { defineNuxtConfig } from 'nuxt/config'
|
||||
export default defineNuxtConfig({
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
port: 3000
|
||||
port: 3000,
|
||||
},
|
||||
ssr: true,
|
||||
modules: ['@nuxt/image'],
|
||||
@@ -97,26 +97,9 @@ 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'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
optimizeDeps: {
|
||||
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
|
||||
},
|
||||
build: {},
|
||||
},
|
||||
})
|
||||
|
||||
2457
frontend_nuxt/package-lock.json
generated
2457
frontend_nuxt/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"@ffmpeg/ffmpeg": "^0.12.2",
|
||||
"@ffmpeg/util": "^0.12.2",
|
||||
"@nuxt/image": "^1.11.0",
|
||||
"@stomp/stompjs": "^7.0.0",
|
||||
"cropperjs": "^1.6.2",
|
||||
@@ -25,6 +27,7 @@
|
||||
"ldrs": "^1.0.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"mermaid": "^10.9.4",
|
||||
"nanoid": "^5.1.5",
|
||||
"nprogress": "^0.2.0",
|
||||
"nuxt": "latest",
|
||||
"sanitize-html": "^2.17.0",
|
||||
|
||||
@@ -1,23 +1,48 @@
|
||||
<template>
|
||||
<div class="about-page">
|
||||
<BaseTabs v-model="selectedTab" :tabs="tabs">
|
||||
<div class="about-loading" v-if="isFetching">
|
||||
<l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="about-content"
|
||||
v-html="renderMarkdown(content)"
|
||||
@click="handleContentClick"
|
||||
></div>
|
||||
<template v-if="selectedTab === 'api'">
|
||||
<div class="about-api">
|
||||
<div class="about-api-title">调试Token</div>
|
||||
<div v-if="!authState.loggedIn" class="about-api-login">
|
||||
请<NuxtLink to="/login" class="about-api-login-link">登录</NuxtLink>后查看 Token
|
||||
</div>
|
||||
<div v-else class="about-api-token">
|
||||
<div class="token-row">
|
||||
<span class="token-text">{{ shortToken }}</span>
|
||||
<span @click="copyToken"><copy class="copy-icon" /></span>
|
||||
</div>
|
||||
<div class="warning-row">
|
||||
<info-icon class="warning-icon" />
|
||||
<div class="token-warning">请不要将 Token 泄露给他人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-api-title">API文档和调试入口</div>
|
||||
<div class="about-api-link">API Playground <share /></div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="about-loading" v-if="isFetching">
|
||||
<l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="about-content"
|
||||
v-html="renderMarkdown(content)"
|
||||
@click="handleContentClick"
|
||||
></div>
|
||||
</template>
|
||||
</BaseTabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from '#imports'
|
||||
import { authState, getToken } from '~/utils/auth'
|
||||
import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
|
||||
import BaseTabs from '~/components/BaseTabs.vue'
|
||||
import { toast } from '~/composables/useToast'
|
||||
|
||||
export default {
|
||||
name: 'AboutPageView',
|
||||
@@ -44,11 +69,25 @@ export default {
|
||||
label: '隐私政策',
|
||||
file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
|
||||
},
|
||||
{
|
||||
key: 'api',
|
||||
label: 'API与调试',
|
||||
},
|
||||
]
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const selectedTab = ref(tabs[0].key)
|
||||
const content = ref('')
|
||||
const token = computed(() => (authState.loggedIn ? getToken() : ''))
|
||||
|
||||
const shortToken = computed(() => {
|
||||
if (!token.value) return ''
|
||||
if (token.value.length <= 20) return token.value
|
||||
return `${token.value.slice(0, 20)}...${token.value.slice(-10)}`
|
||||
})
|
||||
|
||||
const loadContent = async (file) => {
|
||||
if (!file) return
|
||||
try {
|
||||
isFetching.value = true
|
||||
const res = await fetch(file)
|
||||
@@ -65,19 +104,58 @@ export default {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadContent(tabs[0].file)
|
||||
const initTab = route.query.tab
|
||||
if (initTab && tabs.find((t) => t.key === initTab)) {
|
||||
selectedTab.value = initTab
|
||||
const tab = tabs.find((t) => t.key === initTab)
|
||||
if (tab && tab.file) loadContent(tab.file)
|
||||
} else {
|
||||
loadContent(tabs[0].file)
|
||||
}
|
||||
})
|
||||
|
||||
watch(selectedTab, (name) => {
|
||||
const tab = tabs.find((t) => t.key === name)
|
||||
if (tab) loadContent(tab.file)
|
||||
if (tab && tab.file) loadContent(tab.file)
|
||||
router.replace({ query: { ...route.query, tab: name } })
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.query.tab,
|
||||
(name) => {
|
||||
if (name && name !== selectedTab.value && tabs.find((t) => t.key === name)) {
|
||||
selectedTab.value = name
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const copyToken = async () => {
|
||||
if (import.meta.client && token.value) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(token.value)
|
||||
toast.success('已复制 Token')
|
||||
} catch (e) {
|
||||
toast.error('复制失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleContentClick = (e) => {
|
||||
handleMarkdownClick(e)
|
||||
}
|
||||
|
||||
return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
|
||||
return {
|
||||
tabs,
|
||||
selectedTab,
|
||||
content,
|
||||
renderMarkdown,
|
||||
isFetching,
|
||||
handleContentClick,
|
||||
authState,
|
||||
token,
|
||||
copyToken,
|
||||
shortToken,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -101,6 +179,66 @@ export default {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.about-api {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.about-api-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.about-api-login-link {
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.about-api-login-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.warning-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.token-warning {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.token-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font: 14px;
|
||||
margin-bottom: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.about-api-link {
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.about-api-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-tabs {
|
||||
width: 100vw;
|
||||
|
||||
@@ -424,7 +424,8 @@ const sanitizeDescription = (text) => stripMarkdown(text)
|
||||
|
||||
.topic-container {
|
||||
position: sticky;
|
||||
top: calc(var(--header-height) + 1px);
|
||||
top: var(--header-height);
|
||||
padding-top: 10px;
|
||||
z-index: 10;
|
||||
background-color: var(--background-color-blur);
|
||||
display: flex;
|
||||
@@ -432,12 +433,10 @@ const sanitizeDescription = (text) => stripMarkdown(text)
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
backdrop-filter: var(--blur-10);
|
||||
}
|
||||
|
||||
.topic-item-container {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -478,6 +477,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
|
||||
width: 100%;
|
||||
color: gray;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
padding-top: 30px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -487,6 +487,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<div class="chat-container" :class="{ float: isFloatMode }">
|
||||
<vue-easy-lightbox
|
||||
:visible="lightboxVisible"
|
||||
:index="lightboxIndex"
|
||||
:imgs="lightboxImgs"
|
||||
@hide="lightboxVisible = false"
|
||||
/>
|
||||
<div v-if="!loading" class="chat-header">
|
||||
<div class="header-main">
|
||||
<div class="back-button" @click="goBack">
|
||||
@@ -14,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="messages-list" ref="messagesListEl">
|
||||
<div class="messages-list" ref="messagesListEl" @click="handleContentClick">
|
||||
<div v-if="loading" class="loading-container">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
@@ -101,7 +107,7 @@ import {
|
||||
import { useRoute } from 'vue-router'
|
||||
import { getToken, fetchCurrentUser } from '~/utils/auth'
|
||||
import { toast } from '~/main'
|
||||
import { renderMarkdown, stripMarkdownLength } from '~/utils/markdown'
|
||||
import { renderMarkdown, stripMarkdownLength, handleMarkdownClick } from '~/utils/markdown'
|
||||
import MessageEditor from '~/components/MessageEditor.vue'
|
||||
import ReactionsGroup from '~/components/ReactionsGroup.vue'
|
||||
import { useWebSocket } from '~/composables/useWebSocket'
|
||||
@@ -110,6 +116,7 @@ import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
|
||||
import TimeManager from '~/utils/time'
|
||||
import BaseTimeline from '~/components/BaseTimeline.vue'
|
||||
import BasePlaceholder from '~/components/BasePlaceholder.vue'
|
||||
import VueEasyLightbox from 'vue-easy-lightbox'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const route = useRoute()
|
||||
@@ -135,6 +142,9 @@ const isFloatMode = computed(() => route.query.float !== undefined)
|
||||
const floatRoute = useState('messageFloatRoute')
|
||||
const replyTo = ref(null)
|
||||
const newMessagesCount = ref(0)
|
||||
const lightboxVisible = ref(false)
|
||||
const lightboxIndex = ref(0)
|
||||
const lightboxImgs = ref([])
|
||||
|
||||
const isUserNearBottom = ref(true)
|
||||
function updateNearBottom() {
|
||||
@@ -451,6 +461,17 @@ function minimize() {
|
||||
navigateTo('/')
|
||||
}
|
||||
|
||||
function handleContentClick(e) {
|
||||
handleMarkdownClick(e)
|
||||
if (e.target.tagName === 'IMG') {
|
||||
const container = e.target.parentNode
|
||||
const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
|
||||
lightboxImgs.value = imgs
|
||||
lightboxIndex.value = imgs.indexOf(e.target.src)
|
||||
lightboxVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function openUser(id) {
|
||||
if (isFloatMode.value) {
|
||||
// 先不处理...
|
||||
|
||||
@@ -445,7 +445,7 @@ const handleContentClick = (e) => {
|
||||
|
||||
const onCommentDeleted = (id) => {
|
||||
removeCommentFromList(Number(id), comments.value)
|
||||
fetchComments()
|
||||
fetchTimeline()
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -557,7 +557,7 @@ const postComment = async (parentUserName, text, clear) => {
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
console.debug('Post comment response data', data)
|
||||
await fetchComments()
|
||||
await fetchTimeline()
|
||||
clear()
|
||||
if (data.reward && data.reward > 0) {
|
||||
toast.success(`评论成功,获得 ${data.reward} 经验值`)
|
||||
@@ -612,7 +612,7 @@ const approvePost = async () => {
|
||||
status.value = 'PUBLISHED'
|
||||
toast.success('已通过审核')
|
||||
await refreshPost()
|
||||
await fetchChangeLogs()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
@@ -628,7 +628,7 @@ const pinPost = async () => {
|
||||
if (res.ok) {
|
||||
toast.success('已置顶')
|
||||
await refreshPost()
|
||||
await fetchChangeLogs()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
@@ -644,7 +644,7 @@ const unpinPost = async () => {
|
||||
if (res.ok) {
|
||||
toast.success('已取消置顶')
|
||||
await refreshPost()
|
||||
await fetchChangeLogs()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
@@ -660,7 +660,7 @@ const excludeRss = async () => {
|
||||
if (res.ok) {
|
||||
rssExcluded.value = true
|
||||
toast.success('已标记为rss不推荐')
|
||||
await fetchChangeLogs()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
@@ -676,7 +676,8 @@ const includeRss = async () => {
|
||||
if (res.ok) {
|
||||
rssExcluded.value = false
|
||||
toast.success('已标记为rss推荐')
|
||||
await fetchChangeLogs()
|
||||
await refreshPost()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
@@ -693,7 +694,7 @@ const closePost = async () => {
|
||||
closed.value = true
|
||||
toast.success('已关闭')
|
||||
await refreshPost()
|
||||
await fetchChangeLogs()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
@@ -710,7 +711,7 @@ const reopenPost = async () => {
|
||||
closed.value = false
|
||||
toast.success('已重新打开')
|
||||
await refreshPost()
|
||||
await fetchChangeLogs()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
@@ -755,7 +756,7 @@ const rejectPost = async () => {
|
||||
status.value = 'REJECTED'
|
||||
toast.success('已驳回')
|
||||
await refreshPost()
|
||||
await fetchChangeLogs()
|
||||
await fetchTimeline()
|
||||
} else {
|
||||
toast.error('操作失败')
|
||||
}
|
||||
|
||||
25
frontend_nuxt/plugins/ffmpeg.client.ts
Normal file
25
frontend_nuxt/plugins/ffmpeg.client.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { FFmpeg } from '@ffmpeg/ffmpeg'
|
||||
import { toBlobURL } from '@ffmpeg/util'
|
||||
import { defineNuxtPlugin } from 'nuxt/app'
|
||||
|
||||
let ffmpeg: FFmpeg | null = null
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
return {
|
||||
provide: {
|
||||
ffmpeg: async () => {
|
||||
if (ffmpeg) return ffmpeg
|
||||
ffmpeg = new FFmpeg()
|
||||
const base = `https://unpkg.com/@ffmpeg/core@0.12.2/dist/esm`
|
||||
const libBase = `https://unpkg.com/@ffmpeg/ffmpeg@0.12.2/dist/esm`
|
||||
await ffmpeg.load({
|
||||
coreURL: await toBlobURL(`${base}/ffmpeg-core.js`, 'text/javascript'),
|
||||
wasmURL: await toBlobURL(`${base}/ffmpeg-core.wasm`, 'application/wasm'),
|
||||
workerURL: await toBlobURL(`${libBase}/worker.js`, 'text/javascript'),
|
||||
})
|
||||
|
||||
return ffmpeg
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
@@ -77,6 +77,7 @@ import {
|
||||
Open,
|
||||
Dislike,
|
||||
CheckOne,
|
||||
Share,
|
||||
} from '@icon-park/vue-next'
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
@@ -157,4 +158,5 @@ export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.component('OpenIcon', Open)
|
||||
nuxtApp.vueApp.component('Dislike', Dislike)
|
||||
nuxtApp.vueApp.component('CheckOne', CheckOne)
|
||||
nuxtApp.vueApp.component('Share', Share)
|
||||
})
|
||||
|
||||
28
frontend_nuxt/utils/device.js
Normal file
28
frontend_nuxt/utils/device.js
Normal file
@@ -0,0 +1,28 @@
|
||||
export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
|
||||
|
||||
export const isMac = getIsMac()
|
||||
|
||||
function getIsMac() {
|
||||
if (!isClient) {
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
// 优先使用现代浏览器的 navigator.userAgentData API
|
||||
if (navigator.userAgentData && navigator.userAgentData.platform) {
|
||||
return navigator.userAgentData.platform === 'macOS'
|
||||
}
|
||||
|
||||
// 降级到传统的 User-Agent 检测
|
||||
if (navigator.userAgent) {
|
||||
return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
// 默认返回false
|
||||
return false
|
||||
} catch (error) {
|
||||
// 异常处理,记录错误并返回默认值
|
||||
console.warn('检测Mac设备时发生错误:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
327
frontend_nuxt/utils/ffmpegVideoCompressor.js
Normal file
327
frontend_nuxt/utils/ffmpegVideoCompressor.js
Normal file
@@ -0,0 +1,327 @@
|
||||
/**
|
||||
* FFmpeg.wasm 视频压缩器
|
||||
*
|
||||
* 用法:
|
||||
* const { $ffmpeg } = useNuxtApp()
|
||||
* const ff = await $ffmpeg() // 插件里已完成 ffmpeg.load()
|
||||
* const out = await compressVideoWithFFmpeg(ff, file, { onProgress, strictSize: false })
|
||||
*
|
||||
* 设计要点:
|
||||
* - 本文件不再负责加载/初始化,只负责转码逻辑;和 Nuxt 插件解耦。
|
||||
* - 针对【同一个 ffmpeg 实例】做串行队列,避免并发 exec 踩内存文件系统。
|
||||
* - 使用 nanoid 生成唯一文件名;日志环形缓冲;默认 CRF+VBV,可选 strictSize(two-pass)。
|
||||
* - 体积明显小于目标时直通返回,减少无谓重编码。
|
||||
*/
|
||||
|
||||
import { fetchFile } from '@ffmpeg/util'
|
||||
import { nanoid } from 'nanoid'
|
||||
import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
|
||||
|
||||
/*************************
|
||||
* 每实例一个串行队列 *
|
||||
*************************/
|
||||
// WeakMap<FFmpeg, { q: (()=>Promise<any>)[], running: boolean, resolvers: {res,rej}[] }>
|
||||
const queues = new WeakMap()
|
||||
|
||||
function enqueueOn(instance, taskFn) {
|
||||
return new Promise((res, rej) => {
|
||||
let st = queues.get(instance)
|
||||
if (!st) {
|
||||
st = { q: [], running: false, resolvers: [] }
|
||||
queues.set(instance, st)
|
||||
}
|
||||
st.q.push(taskFn)
|
||||
st.resolvers.push({ res, rej })
|
||||
drain(instance)
|
||||
})
|
||||
}
|
||||
|
||||
async function drain(instance) {
|
||||
const st = queues.get(instance)
|
||||
if (!st || st.running) return
|
||||
st.running = true
|
||||
try {
|
||||
while (st.q.length) {
|
||||
const task = st.q.shift()
|
||||
const rr = st.resolvers.shift()
|
||||
try {
|
||||
rr.res(await task())
|
||||
} catch (e) {
|
||||
rr.rej(e)
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
st.running = false
|
||||
}
|
||||
}
|
||||
|
||||
/*****************
|
||||
* 工具函数 *
|
||||
*****************/
|
||||
function decideScale(widthHint) {
|
||||
if (!widthHint) return { filter: null, width: null }
|
||||
const evenW = widthHint % 2 === 0 ? widthHint : widthHint - 1
|
||||
return { filter: `scale=${evenW}:-2:flags=bicubic,setsar=1`, width: evenW }
|
||||
}
|
||||
|
||||
function calculateParamsByRatio(originalSize, targetSize) {
|
||||
const ratio = Math.min(targetSize / originalSize, 1)
|
||||
const crf = ratio < 0.35 ? 29 : ratio < 0.5 ? 27 : ratio < 0.7 ? 25 : 23
|
||||
const preset = ratio < 0.35 ? 'slow' : ratio < 0.5 ? 'medium' : 'veryfast'
|
||||
const s =
|
||||
ratio < 0.35
|
||||
? decideScale(720)
|
||||
: ratio < 0.6
|
||||
? decideScale(960)
|
||||
: ratio < 0.8
|
||||
? decideScale(1280)
|
||||
: { filter: null, width: null }
|
||||
const audioBitrateK = ratio < 0.5 ? 96 : ratio < 0.7 ? 128 : 160
|
||||
const profile = s.width && s.width <= 1280 ? 'main' : 'high'
|
||||
return { crf, preset, scaleFilter: s.filter, scaleWidth: s.width, audioBitrateK, profile }
|
||||
}
|
||||
|
||||
function makeRingLogger(capBytes = 4000) {
|
||||
const buf = []
|
||||
let total = 0
|
||||
function push(s) {
|
||||
if (!s) return
|
||||
buf.push(s)
|
||||
total += s.length
|
||||
while (total > capBytes) total -= buf.shift().length
|
||||
}
|
||||
return { push, dump: () => buf.slice() }
|
||||
}
|
||||
|
||||
function parseDurationFromLogs(logs) {
|
||||
// 避免正则:查找 Duration: 后的 00:00:00.xx
|
||||
const text = logs.join(' ')
|
||||
const idx = text.indexOf('Duration:')
|
||||
if (idx === -1) return null
|
||||
let i = idx + 'Duration:'.length
|
||||
while (i < text.length && text[i] === ' ') i++
|
||||
function read2(start) {
|
||||
const a = text.charCodeAt(start) - 48
|
||||
const b = text.charCodeAt(start + 1) - 48
|
||||
if (a < 0 || a > 9 || b < 0 || b > 9) return null
|
||||
return a * 10 + b
|
||||
}
|
||||
const hh = read2(i)
|
||||
if (hh === null) return null
|
||||
i += 2
|
||||
if (text[i++] !== ':') return null
|
||||
const mm = read2(i)
|
||||
if (mm === null) return null
|
||||
i += 2
|
||||
if (text[i++] !== ':') return null
|
||||
const s1 = read2(i)
|
||||
if (s1 === null) return null
|
||||
i += 2
|
||||
if (text[i++] !== '.') return null
|
||||
let j = i
|
||||
while (j < text.length && text.charCodeAt(j) >= 48 && text.charCodeAt(j) <= 57) j++
|
||||
const frac = parseFloat('0.' + text.slice(i, j) || '0')
|
||||
return hh * 3600 + mm * 60 + s1 + frac
|
||||
}
|
||||
|
||||
export function isFFmpegSupported() {
|
||||
return typeof WebAssembly !== 'undefined' && typeof Worker !== 'undefined'
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取 ffmpeg 核心版本(通过 -version),会进入队列避免并发冲突
|
||||
*/
|
||||
export async function getFFmpegInfo(ffmpegInstance) {
|
||||
return enqueueOn(ffmpegInstance, async () => {
|
||||
const logs = []
|
||||
const onLog = ({ type, message }) => {
|
||||
if (type === 'info' || type === 'fferr') logs.push(message)
|
||||
}
|
||||
ffmpegInstance.on('log', onLog)
|
||||
try {
|
||||
await ffmpegInstance.exec(['-version'])
|
||||
} finally {
|
||||
ffmpegInstance.off('log', onLog)
|
||||
}
|
||||
const line = logs.find((l) => l.toLowerCase().includes('ffmpeg version')) || ''
|
||||
const parts = line.trim().split(' ').filter(Boolean)
|
||||
const version = parts.length > 2 ? parts[2] : parts[1] || null
|
||||
return { version }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 压缩:接受一个已经 load() 完成的 ffmpeg 实例
|
||||
* @param {*} ffmpegInstance 已初始化的 FFmpeg 实例(来自 Nuxt 插件)
|
||||
* @param {File|Blob} file 输入文件
|
||||
* @param {{ onProgress?:(p:{stage:string,progress:number})=>void, signal?:AbortSignal, strictSize?:boolean, targetSize?:number }} opts
|
||||
*/
|
||||
export async function compressVideoWithFFmpeg(ffmpegInstance, file, opts = {}) {
|
||||
return enqueueOn(ffmpegInstance, () => doCompress(ffmpegInstance, file, opts))
|
||||
}
|
||||
|
||||
async function doCompress(ffmpegInstance, file, opts) {
|
||||
const onProgress = opts.onProgress || (() => {})
|
||||
const { signal, strictSize = false } = opts
|
||||
|
||||
onProgress({ stage: 'preparing', progress: 10 })
|
||||
|
||||
const targetSize = opts.targetSize ?? UPLOAD_CONFIG?.VIDEO?.TARGET_SIZE ?? 12 * 1024 * 1024
|
||||
|
||||
// 小体积直通
|
||||
const sizeKnown = 'size' in file && typeof file.size === 'number'
|
||||
if (sizeKnown && file.size <= targetSize * 0.9) {
|
||||
onProgress({ stage: 'skipped', progress: 100 })
|
||||
return file
|
||||
}
|
||||
|
||||
const params = calculateParamsByRatio(sizeKnown ? file.size : targetSize * 2, targetSize)
|
||||
const { crf, preset, scaleFilter, audioBitrateK, profile } = params
|
||||
|
||||
const name = 'name' in file && typeof file.name === 'string' ? file.name : 'input.mp4'
|
||||
const dot = name.lastIndexOf('.')
|
||||
const outName = (dot > -1 ? name.slice(0, dot) : name) + '.mp4'
|
||||
|
||||
const ext = dot > -1 ? name.slice(dot + 1).toLowerCase() : 'mp4'
|
||||
const id = nanoid()
|
||||
const inputName = `input-${id}.${ext}`
|
||||
const outputName = `output-${id}.mp4`
|
||||
const passlog = `ffpass-${id}`
|
||||
|
||||
// 监听
|
||||
const ring = makeRingLogger()
|
||||
const onFfmpegProgress = ({ progress: p }) => {
|
||||
const adjusted = 20 + p * 70
|
||||
onProgress({ stage: 'compressing', progress: Math.min(90, adjusted) })
|
||||
}
|
||||
const onFfmpegLog = ({ type, message }) => {
|
||||
if (type === 'fferr' || type === 'info') ring.push(message)
|
||||
}
|
||||
ffmpegInstance.on('progress', onFfmpegProgress)
|
||||
ffmpegInstance.on('log', onFfmpegLog)
|
||||
|
||||
let aborted = false
|
||||
const abortHandler = () => {
|
||||
aborted = true
|
||||
}
|
||||
if (signal) signal.addEventListener('abort', abortHandler, { once: true })
|
||||
|
||||
try {
|
||||
await ffmpegInstance.writeFile(inputName, await fetchFile(file))
|
||||
onProgress({ stage: 'analyzing', progress: 20 })
|
||||
|
||||
let durationSec = null
|
||||
try {
|
||||
await ffmpegInstance.exec(['-hide_banner', '-i', inputName, '-f', 'null', '-'])
|
||||
durationSec = parseDurationFromLogs(ring.dump())
|
||||
} catch {
|
||||
durationSec = durationSec ?? parseDurationFromLogs(ring.dump())
|
||||
}
|
||||
|
||||
let videoBitrate = null
|
||||
if (durationSec && sizeKnown && targetSize < file.size) {
|
||||
const totalTargetBits = targetSize * 8
|
||||
const audioBits = audioBitrateK * 1000 * durationSec
|
||||
const maxVideoBits = Math.max(totalTargetBits - audioBits, totalTargetBits * 0.7)
|
||||
const bps = Math.max(180000, Math.floor(maxVideoBits / durationSec))
|
||||
videoBitrate = String(Math.min(bps, 5000000))
|
||||
}
|
||||
|
||||
const baseArgs = [
|
||||
'-hide_banner',
|
||||
'-i',
|
||||
inputName,
|
||||
'-c:v',
|
||||
'libx264',
|
||||
'-pix_fmt',
|
||||
'yuv420p',
|
||||
'-profile:v',
|
||||
profile,
|
||||
'-movflags',
|
||||
'+faststart',
|
||||
'-preset',
|
||||
preset,
|
||||
'-c:a',
|
||||
'aac',
|
||||
'-b:a',
|
||||
`${audioBitrateK}k`,
|
||||
'-ac',
|
||||
'2',
|
||||
]
|
||||
if (scaleFilter) baseArgs.push('-vf', scaleFilter)
|
||||
|
||||
const onePassArgs = [...baseArgs, '-crf', String(crf)]
|
||||
if (videoBitrate)
|
||||
onePassArgs.push('-maxrate', videoBitrate, '-bufsize', String(parseInt(videoBitrate, 10) * 2))
|
||||
|
||||
const twoPassFirst = [
|
||||
'-y',
|
||||
'-hide_banner',
|
||||
'-i',
|
||||
inputName,
|
||||
'-c:v',
|
||||
'libx264',
|
||||
'-b:v',
|
||||
`${videoBitrate || '1000000'}`,
|
||||
'-pass',
|
||||
'1',
|
||||
'-passlogfile',
|
||||
passlog,
|
||||
'-an',
|
||||
'-f',
|
||||
'mp4',
|
||||
'/dev/null',
|
||||
]
|
||||
const twoPassSecond = [
|
||||
...baseArgs,
|
||||
'-b:v',
|
||||
`${videoBitrate || '1000000'}`,
|
||||
'-pass',
|
||||
'2',
|
||||
'-passlogfile',
|
||||
passlog,
|
||||
outputName,
|
||||
]
|
||||
|
||||
if (aborted) throw new DOMException('Aborted', 'AbortError')
|
||||
|
||||
if (!strictSize) {
|
||||
await ffmpegInstance.exec([...onePassArgs, outputName])
|
||||
} else {
|
||||
if (!videoBitrate) videoBitrate = '1000000'
|
||||
await ffmpegInstance.exec(twoPassFirst)
|
||||
onProgress({ stage: 'second-pass', progress: 85 })
|
||||
await ffmpegInstance.exec(twoPassSecond)
|
||||
}
|
||||
|
||||
if (aborted) throw new DOMException('Aborted', 'AbortError')
|
||||
|
||||
onProgress({ stage: 'finalizing', progress: 95 })
|
||||
const out = await ffmpegInstance.readFile(outputName)
|
||||
|
||||
const mime = 'video/mp4'
|
||||
const blob = new Blob([out], { type: mime })
|
||||
const hasFileCtor = typeof File === 'function'
|
||||
const result = hasFileCtor ? new File([blob], outName, { type: mime }) : blob
|
||||
|
||||
onProgress({ stage: 'completed', progress: 100 })
|
||||
return result
|
||||
} finally {
|
||||
try {
|
||||
await ffmpegInstance.deleteFile(inputName)
|
||||
} catch {}
|
||||
try {
|
||||
await ffmpegInstance.deleteFile(outputName)
|
||||
} catch {}
|
||||
try {
|
||||
await ffmpegInstance.deleteFile(`${passlog}-0.log`)
|
||||
} catch {}
|
||||
try {
|
||||
await ffmpegInstance.deleteFile(`${passlog}-0.log.mbtree`)
|
||||
} catch {}
|
||||
|
||||
ffmpegInstance.off('progress', onFfmpegProgress)
|
||||
ffmpegInstance.off('log', onFfmpegLog)
|
||||
if (signal) signal.removeEventListener('abort', abortHandler)
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,8 @@ import { getToken, authState } from './auth'
|
||||
import { searchUsers, fetchFollowings, fetchAdmins } from './user'
|
||||
import { tiebaEmoji } from './tiebaEmoji'
|
||||
import vditorPostCitation from './vditorPostCitation.js'
|
||||
import { checkFileSize, formatFileSize, compressVideo, VIDEO_CONFIG } from './videoCompressor.js'
|
||||
import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
|
||||
|
||||
export function getEditorTheme() {
|
||||
return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
|
||||
@@ -91,10 +93,81 @@ export function createVditor(editorId, options = {}) {
|
||||
multiple: false,
|
||||
handler: async (files) => {
|
||||
const file = files[0]
|
||||
vditor.tip('图片上传中', 0)
|
||||
const ext = file.name.split('.').pop().toLowerCase()
|
||||
const videoExts = ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv']
|
||||
const isVideo = videoExts.includes(ext)
|
||||
|
||||
// 检查文件大小
|
||||
const sizeCheck = checkFileSize(file)
|
||||
if (!sizeCheck.isValid) {
|
||||
console.log(
|
||||
'文件大小不能超过',
|
||||
formatFileSize(sizeCheck.maxSize),
|
||||
',当前文件',
|
||||
formatFileSize(sizeCheck.actualSize),
|
||||
)
|
||||
vditor.tip(
|
||||
`文件大小不能超过 ${formatFileSize(sizeCheck.maxSize)},当前文件 ${formatFileSize(sizeCheck.actualSize)}`,
|
||||
3000,
|
||||
)
|
||||
return '文件过大'
|
||||
}
|
||||
|
||||
let processedFile = file
|
||||
|
||||
// 如果是视频文件且需要压缩
|
||||
if (isVideo && sizeCheck.needsCompression) {
|
||||
try {
|
||||
vditor.tip('开始部署ffmpeg环境... 请稍等', 0)
|
||||
vditor.disabled()
|
||||
|
||||
// 使用 FFmpeg 压缩视频
|
||||
processedFile = await compressVideo(file, (progress) => {
|
||||
const messages = {
|
||||
initializing: '初始化 FFmpeg',
|
||||
preparing: '准备压缩',
|
||||
analyzing: '分析视频',
|
||||
compressing: '压缩中',
|
||||
finalizing: '完成压缩',
|
||||
completed: '压缩完成',
|
||||
}
|
||||
const message = messages[progress.stage] || progress.stage
|
||||
vditor.tip(`${message} ${progress.progress}%`, 0)
|
||||
})
|
||||
|
||||
const originalSize = formatFileSize(file.size)
|
||||
const compressedSize = formatFileSize(processedFile.size)
|
||||
const savings = Math.round((1 - processedFile.size / file.size) * 100)
|
||||
|
||||
vditor.tip(`压缩完成!${originalSize} → ${compressedSize} (节省 ${savings}%)`, 2000)
|
||||
// 压缩成功但仍然超过最大限制,则阻止上传
|
||||
if (processedFile.size > VIDEO_CONFIG.MAX_SIZE) {
|
||||
vditor.tip(
|
||||
`压缩后仍超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请降低分辨率或码率后再上传。`,
|
||||
4000,
|
||||
)
|
||||
vditor.enable()
|
||||
return '压缩后仍超过大小限制'
|
||||
}
|
||||
} catch (error) {
|
||||
// 压缩失败时,如果原文件超过最大限制,则阻止上传
|
||||
if (file.size > VIDEO_CONFIG.MAX_SIZE) {
|
||||
vditor.tip(
|
||||
`视频压缩失败,且文件超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请先压缩后再上传。`,
|
||||
4000,
|
||||
)
|
||||
vditor.enable()
|
||||
return '视频压缩失败且文件过大'
|
||||
}
|
||||
vditor.tip('视频压缩失败,将尝试上传原文件', 3000)
|
||||
processedFile = file
|
||||
}
|
||||
}
|
||||
|
||||
vditor.tip('文件上传中', 0)
|
||||
vditor.disabled()
|
||||
const res = await fetch(
|
||||
`${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(file.name)}`,
|
||||
`${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(processedFile.name)}`,
|
||||
{ headers: { Authorization: `Bearer ${getToken()}` } },
|
||||
)
|
||||
if (!res.ok) {
|
||||
@@ -103,14 +176,13 @@ export function createVditor(editorId, options = {}) {
|
||||
return '获取上传地址失败'
|
||||
}
|
||||
const info = await res.json()
|
||||
const put = await fetch(info.uploadUrl, { method: 'PUT', body: file })
|
||||
const put = await fetch(info.uploadUrl, { method: 'PUT', body: processedFile })
|
||||
if (!put.ok) {
|
||||
vditor.enable()
|
||||
vditor.tip('上传失败')
|
||||
return '上传失败'
|
||||
}
|
||||
|
||||
const ext = file.name.split('.').pop().toLowerCase()
|
||||
const imageExts = [
|
||||
'apng',
|
||||
'bmp',
|
||||
@@ -132,6 +204,8 @@ export function createVditor(editorId, options = {}) {
|
||||
md = ``
|
||||
} else if (audioExts.includes(ext)) {
|
||||
md = `<audio controls="controls" src="${info.fileUrl}"></audio>`
|
||||
} else if (videoExts.includes(ext)) {
|
||||
md = `<video width="600" controls>\n <source src="${info.fileUrl}" type="video/${ext}">\n 你的浏览器不支持 video 标签。\n</video>`
|
||||
} else {
|
||||
md = `[${file.name}](${info.fileUrl})`
|
||||
}
|
||||
|
||||
79
frontend_nuxt/utils/videoCompressor.js
Normal file
79
frontend_nuxt/utils/videoCompressor.js
Normal file
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* 基于 FFmpeg.wasm 的视频压缩工具
|
||||
* 专为现代浏览器 (Chrome/Safari) 优化
|
||||
*/
|
||||
|
||||
import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
|
||||
import { compressVideoWithFFmpeg, isFFmpegSupported } from './ffmpegVideoCompressor.js'
|
||||
import { useNuxtApp } from '#app'
|
||||
|
||||
// 导出配置供外部使用
|
||||
export const VIDEO_CONFIG = UPLOAD_CONFIG.VIDEO
|
||||
|
||||
/**
|
||||
* 检查文件大小是否超出限制
|
||||
*/
|
||||
export function checkFileSize(file) {
|
||||
return {
|
||||
isValid: file.size <= VIDEO_CONFIG.MAX_SIZE,
|
||||
actualSize: file.size,
|
||||
maxSize: VIDEO_CONFIG.MAX_SIZE,
|
||||
needsCompression: file.size > VIDEO_CONFIG.TARGET_SIZE,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化文件大小显示
|
||||
*/
|
||||
export function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
/**
|
||||
* 压缩视频文件 - 使用 FFmpeg.wasm
|
||||
*/
|
||||
export async function compressVideo(file, onProgress = () => {}) {
|
||||
// 检查是否需要压缩
|
||||
const sizeCheck = checkFileSize(file)
|
||||
if (!sizeCheck.needsCompression) {
|
||||
onProgress({ stage: 'completed', progress: 100 })
|
||||
return file
|
||||
}
|
||||
|
||||
// 检查 FFmpeg 支持
|
||||
if (!isFFmpegSupported()) {
|
||||
throw new Error('当前浏览器不支持视频压缩功能,请使用 Chrome 或 Safari 浏览器')
|
||||
}
|
||||
|
||||
try {
|
||||
const { $ffmpeg } = useNuxtApp()
|
||||
const ff = await $ffmpeg()
|
||||
return await compressVideoWithFFmpeg(ff, file, { onProgress })
|
||||
} catch (error) {
|
||||
console.error('FFmpeg 压缩失败:', error)
|
||||
throw new Error(`视频压缩失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 预加载 FFmpeg(可选的性能优化)
|
||||
*/
|
||||
export async function preloadVideoCompressor() {
|
||||
try {
|
||||
// FFmpeg 初始化现在通过 Nuxt 插件处理
|
||||
// 这里只需要检查支持性
|
||||
if (!isFFmpegSupported()) {
|
||||
throw new Error('当前浏览器不支持 FFmpeg')
|
||||
}
|
||||
const { $ffmpeg } = useNuxtApp()
|
||||
await $ffmpeg()
|
||||
return { success: true, message: 'FFmpeg 预加载成功' }
|
||||
} catch (error) {
|
||||
console.warn('FFmpeg 预加载失败:', error)
|
||||
return { success: false, error: error.message }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user