Gods/go_fish_web
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feat: 新增钓鱼日志组件并优化钓鱼页面交互

Browse Source 
新增钓鱼日志组件，用于展示钓鱼记录。优化钓鱼页面的交互体验，增加动画效果和状态提示。同时，修复了请求拦截器中的错误处理逻辑，并改进了登录和注册页面的UI设计。
This commit is contained in:
lvjin
2025-04-15 16:52:12 +08:00
parent 5cde67672b
commit 709cf29b6d
11 changed files with 803 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+29
View File
@@ -0,0 +1,29 @@
# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
# 复制项目文件
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制源代码
COPY . .
# 构建项目
RUN npm run build
# 生产阶段
FROM nginx:1.25.3-alpine
# 从构建阶段复制构建结果到nginx目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制nginx配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
nginx.conf
+33
View File
@@ -0,0 +1,33 @@
server {
listen 80;
server_name localhost;
# 启用gzip压缩
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
# 设置根目录
root /usr/share/nginx/html;
index index.html;
# 启用 CORS
location / {
try_files $uri $uri/ /index.html;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
}
# 处理 404 页面
error_page 404 /index.html;
# 缓存静态资源
location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|json)$ {
expires max;
access_log off;
}
}
src/assets/fishing-scene.svg
+170
View File
@@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<!-- 渐变定义 -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB"/>
<stop offset="100%" style="stop-color:#4FC3F7"/>
</linearGradient>
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#29B6F6" stop-opacity="0.8"/>
<stop offset="100%" style="stop-color:#0288D1" stop-opacity="0.9"/>
</linearGradient>
<linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8D6E63"/>
<stop offset="100%" style="stop-color:#5D4037"/>
</linearGradient>
<!-- 水波纹动画效果 -->
<filter id="water-ripple">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence">
<animate attributeName="baseFrequency" dur="30s" values="0.01;0.015;0.01" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<!-- 光影效果 -->
<filter id="soft-light">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k1="1" k2="0.5" k3="0" k4="0"/>
</filter>
</defs>
<!-- 天空背景 -->
<rect x="0" y="0" width="400" height="200" fill="url(#skyGradient)"/>
<!-- 云朵 -->
<g>
<path d="M50,50 q20,-20 40,0 t40,0 t40,0 q20,20 0,40 h-120 q-20,-20 0,-40" fill="white" opacity="0.8">
<animateTransform attributeName="transform" type="translate" from="-100,0" to="500,0" dur="60s" repeatCount="indefinite"/>
</path>
<path d="M80,80 q15,-15 30,0 t30,0 t30,0 q15,15 0,30 h-90 q-15,-15 0,-30" fill="white" opacity="0.6">
<animateTransform attributeName="transform" type="translate" from="-100,0" to="500,0" dur="45s" repeatCount="indefinite"/>
</path>
</g>
<!-- 远处的树木和山丘 -->
<g transform="translate(20,150)">
<path d="M0,0 c-20,-40 -15,-45 0,-60 c15,15 20,20 0,60" fill="#2E7D32"/>
<rect x="-2" y="0" width="4" height="10" fill="#5D4037"/>
</g>
<g transform="translate(350,140)">
<path d="M0,0 c-25,-50 -20,-55 0,-70 c20,15 25,20 0,70" fill="#2E7D32"/>
<rect x="-3" y="0" width="6" height="15" fill="#5D4037"/>
</g>
<path d="M320,160 Q360,140 400,160" fill="#8D6E63" opacity="0.6"/>
<!-- 河岸和石头 -->
<path d="M0,180 Q100,170 200,180 T400,180 L400,200 L0,200 Z" fill="url(#groundGradient)"/>
<g transform="translate(100,175)">
<path d="M0,0 Q5,-5 10,0 Q15,-3 20,0" fill="#795548"/>
</g>
<g transform="translate(250,178)">
<path d="M0,0 Q8,-8 16,0 Q24,-5 32,0" fill="#795548"/>
</g>
<!-- 草丛装饰 -->
<g transform="translate(30,170)">
<path d="M0,0 Q5,-12 10,0 M5,0 Q10,-18 15,0 M10,0 Q15,-10 20,0" stroke="#4CAF50" stroke-width="2" fill="none"/>
<path d="M2,-2 Q7,-8 12,-2" stroke="#81C784" stroke-width="1.5" fill="none"/>
</g>
<g transform="translate(150,175)">
<path d="M0,0 Q5,-15 10,0 M5,0 Q10,-20 15,0 M10,0 Q15,-12 20,0" stroke="#4CAF50" stroke-width="2" fill="none"/>
<path d="M3,-3 Q8,-10 13,-3" stroke="#81C784" stroke-width="1.5" fill="none"/>
</g>
<g transform="translate(280,172)">
<path d="M0,0 Q5,-12 10,0 M5,0 Q10,-18 15,0 M10,0 Q15,-10 20,0" stroke="#4CAF50" stroke-width="2" fill="none"/>
<path d="M2,-2 Q7,-8 12,-2" stroke="#81C784" stroke-width="1.5" fill="none"/>
</g>
<!-- 水面 -->
<g>
<rect x="0" y="200" width="400" height="100" fill="url(#waterGradient)" filter="url(#water-ripple)"/>
<!-- 水面反光效果 -->
<path d="M50,220 Q200,210 350,220" stroke="white" stroke-width="1" fill="none" opacity="0.3">
<animate attributeName="d" dur="5s" repeatCount="indefinite"
values="M50,220 Q200,210 350,220;M50,220 Q200,230 350,220;M50,220 Q200,210 350,220"/>
</path>
<path d="M80,240 Q200,235 320,240" stroke="white" stroke-width="0.8" fill="none" opacity="0.2">
<animate attributeName="d" dur="7s" repeatCount="indefinite"
values="M80,240 Q200,235 320,240;M80,240 Q200,245 320,240;M80,240 Q200,235 320,240"/>
</path>
</g>
<!-- 钓鱼的人 -->
<g transform="translate(150,160)">
<!-- 腿 -->
<path d="M-8,0 C-8,5 -7,10 -5,15 M8,0 C8,5 7,10 5,15" stroke="#5D4037" stroke-width="4" stroke-linecap="round"/>
<!-- 鞋子 -->
<path d="M-7,15 Q-5,14 -3,15 L-3,17 L-7,17 Q-8,16 -7,15 Z" fill="#3E2723"/>
<path d="M3,15 Q5,14 7,15 L7,17 L3,17 Q2,16 3,15 Z" fill="#3E2723"/>
<!-- 身体 -->
<path d="M-5,-25 C-8,-20 -8,-10 -5,0 L5,0 C8,-10 8,-20 5,-25 Z" fill="#795548">
<!-- 衣服褶皱和纹理 -->
<path d="M-3,-20 C-1,-19 1,-19 3,-20" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
<path d="M-4,-15 C-2,-14 2,-14 4,-15" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
<path d="M-3,-10 C-1,-9 1,-9 3,-10" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
<path d="M-2,-5 C0,-4 2,-4 4,-5" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
</path>
<!-- 头 -->
<circle cx="0" cy="-35" r="10" fill="#FFA726"/>
<!-- 表情 -->
<path d="M-3,-37 Q0,-35 3,-37" stroke="#5D4037" stroke-width="0.5" fill="none">
<animate attributeName="d" dur="4s" repeatCount="indefinite"
values="M-3,-37 Q0,-35 3,-37;M-3,-36 Q0,-34 3,-36;M-3,-37 Q0,-35 3,-37"/>
</path>
<circle cx="-4" cy="-38" r="0.8" fill="#5D4037"/>
<circle cx="4" cy="-38" r="0.8" fill="#5D4037"/>
<!-- 帽子 -->
<path d="M-12,-38 C-8,-45 8,-45 12,-38 L0,-45 Z" fill="#8D6E63">
<path d="M-8,-41 L8,-41" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
</path>
<!-- 手臂 -->
<path d="M5,-20 Q15,-18 20,-15" stroke="#795548" stroke-width="4" stroke-linecap="round">
<animate attributeName="d" dur="4s" repeatCount="indefinite"
values="M5,-20 Q15,-18 20,-15;M5,-20 Q15,-17 20,-14;M5,-20 Q15,-18 20,-15"/>
</path>
</g>
<!-- 钓鱼竿 -->
<g transform="translate(170,145)">
<!-- 手柄 -->
<path d="M0,0 L10,-5" stroke="#5D4037" stroke-width="3" stroke-linecap="round"/>
<!-- 主杆 -->
<line x1="10" y1="-5" x2="30" y2="-20" stroke="#8D6E63" stroke-width="2" stroke-linecap="round"/>
<!-- 导环 -->
<circle cx="15" cy="-8" r="1" fill="none" stroke="#424242" stroke-width="0.5"/>
<circle cx="22" cy="-13" r="1" fill="none" stroke="#424242" stroke-width="0.5"/>
<!-- 鱼线轮 -->
<path d="M5,-3 A3,3 0 1,1 5,3" fill="#424242"/>
<!-- 伸出部分 -->
<line x1="30" y1="-20" x2="60" y2="40" stroke="#8D6E63" stroke-width="1.5" stroke-linecap="round">
<animate attributeName="x2" dur="4s" repeatCount="indefinite"
values="60;61;60"/>
<animate attributeName="y2" dur="4s" repeatCount="indefinite"
values="40;41;40"/>
</line>
<!-- 鱼线 -->
<path d="M60,40 C60,45 60,50 60,60" stroke="#A7FFEB" stroke-width="0.5" fill="none">
<animate attributeName="d" dur="2s" repeatCount="indefinite"
values="M60,40 C60,45 60,50 60,60;M60,40 C61,45 61,50 61,65;M60,40 C60,45 60,50 60,60"/>
</path>
<!-- 浮标 -->
<circle cx="60" cy="55" r="1.5" fill="#F44336">
<animate attributeName="cy" dur="2s" repeatCount="indefinite"
values="55;60;55"/>
</circle>
</g>
<!-- 水中的鱼 -->
<g transform="translate(250,250)">
<path d="M0,0 C2,-3 8,-3 10,0 L12,0 L10,2 C8,5 2,5 0,2 L-2,0 Z" fill="#FFB74D">
<animateTransform attributeName="transform" type="translate" values="-50,0;50,0;-50,0" dur="10s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;0.8;0.6" dur="10s" repeatCount="indefinite"/>
</path>
</g>
<g transform="translate(180,270)">
<path d="M0,0 C1,-2 4,-2 5,0 L6,0 L5,1 C4,3 1,3 0,1 L-1,0 Z" fill="#FFB74D">
<animateTransform attributeName="transform" type="translate" values="-30,0;30,0;-30,0" dur="8s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;0.6;0.4" dur="8s" repeatCount="indefinite"/>
</path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

src/components/FishingLog.vue
+87
View File
@@ -0,0 +1,87 @@
<template>
<div class="fishing-log">
<h2>钓鱼日志</h2>
<el-scrollbar height="300px">
<div v-if="logs.length > 0" class="log-list">
<div v-for="(log, index) in logs" :key="index" class="log-item" :class="{ rare: log.isRare }">
<div class="log-time">{{ formatTime(log.time) }}</div>
<div class="log-content">
<el-tag :type="log.isRare ? 'warning' : 'info'" effect="plain">
{{ log.fishName }}
</el-tag>
<span class="log-weight">{{ log.weight }}</span>
</div>
</div>
</div>
<el-empty v-else description="暂无钓鱼记录" />
</el-scrollbar>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
logs: {
type: Array,
default: () => []
}
})
const formatTime = (time) => {
return new Date(time).toLocaleString()
}
</script>
<style scoped>
.fishing-log {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.log-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.log-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-radius: 4px;
background: #f5f7fa;
transition: all 0.3s ease;
}
.log-item:hover {
transform: translateX(5px);
background: #ecf5ff;
}
.log-time {
color: #909399;
font-size: 14px;
}
.log-content {
display: flex;
align-items: center;
gap: 10px;
}
.log-weight {
color: #606266;
}
.rare {
background: #fdf6ec;
}
.rare:hover {
background: #faecd8;
}
</style>
src/pages/equipments/Equipments.vue
+1 -1
View File
@@ -51,7 +51,7 @@ onMounted(async () => {
const handleEquip = async (id) => {
try {
await equip(id)
ElMessage.success('装备成功！')
ElMessage.success('装备成功！🎯')
// 重新加载数据
const res = await getEquipments()
equipmentList.value = res || []
src/pages/fishbaskets/Fishbaskets.vue
+8 -8
View File
@@ -55,7 +55,7 @@ const fetchFishList = async () => {
fishList.value = res;
}
} catch (err) {
ElMessage.warning('请检查网络或重试')
ElMessage.warning('请检查网络或重试 🌐')
}
}
@@ -76,14 +76,14 @@ const handleProcessFish = async () => {
try {
const res = await autoHandleFish()
if (res) {
ElMessage.success(res)
ElMessage.success(res + ' 🎉')
fetchFishList()
}
} catch (err) {
console.log('====================================');
console.log(err);
console.log('====================================');
ElMessage.warning('处理失败，请稍后再试')
ElMessage.warning('处理失败，请稍后再试 ⏳')
}
}
// 手动处理鱼
@@ -92,14 +92,14 @@ const handleFish = async (fishId) => {
try {
const res = await handleFishById(fishId)
if (res) {
ElMessage.success(res)
ElMessage.success(res + ' 🎉')
fetchFishList()
}
} catch (err) {
console.log('====================================');
console.log(err);
console.log('====================================');
ElMessage.warning('处理失败，请稍后再试')
ElMessage.warning('处理失败，请稍后再试 ⏳')
}
finally {
loading.value = false
@@ -119,13 +119,13 @@ const handleSell = async (fish) => {
try {
const res = await sellFish({ FishBagId: fish.id, Points: price })
if (res.success) {
ElMessage.success(res.message)
ElMessage.success(res.message + ' 🎉')
fetchFishList()
} else {
ElMessage.error('出售失败 ' + res.message);
ElMessage.error('出售失败 ' + res.message + ' 😢');
}
} catch (err) {
ElMessage.error('出售失败，请稍后再试')
ElMessage.error('出售失败，请稍后再试 🛒')
}
}
}
src/pages/fishing/Fishing.vue
+217 -37
View File
@@ -1,68 +1,248 @@
<template>
<div class="equipments-page">
<h1>钓鱼</h1>
<div style="margin-top: 200px;">
<el-button type="primary" @click="handleFish">开始钓鱼</el-button>
<el-button @click="goHome" style="margin-left: 10px">返回</el-button>
<div class="result">
<p v-if="resultMessage">{{ resultMessage }}</p>
<p v-if="nextPullTime">下次可钓鱼时间：{{ nextPullTime }}</p>
<div class="fishing-page">
<div class="fishing-container">
<div class="fishing-area">
<div class="fishing-animation" :class="{ 'fishing-active': isFishing }">
<div class="fishing-scene" @click="handleFish"></div>
<div class="ripple"></div>
</div>
<div class="result" v-if="resultMessage || nextPullTime">
<el-alert
v-if="resultMessage"
:title="resultMessage"
:type="currentCatch ? 'success' : 'info'"
:closable="false"
show-icon
/>
<el-alert
v-if="nextPullTime"
:title="`下次可钓鱼时间：${nextPullTime}`"
type="warning"
:closable="false"
show-icon
/>
</div>
</div>
<div class="log-area">
<FishingLog :logs="fishingLogs" />
<div class="back-button">
<el-button
@click="goHome"
size="small"
type="default"
icon="ArrowLeft"
>返回</el-button
>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { fishingClick } from '@/api/fishing/fishing'
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { fishingClick } from "@/api/fishing/fishing";
import FishingLog from "@/components/FishingLog.vue";
const router = useRouter()
const resultMessage = ref('')
const nextPullTime = ref('')
const router = useRouter();
const resultMessage = ref("");
const nextPullTime = ref("");
const isFishing = ref(false);
const currentCatch = ref(null);
const fishingLogs = ref([]);
// 从localStorage加载缓存的钓鱼日志
const loadCachedLogs = () => {
const cachedLogs = localStorage.getItem("fishingLogs");
if (cachedLogs) {
fishingLogs.value = JSON.parse(cachedLogs);
}
};
// 保存钓鱼日志到localStorage
const saveLogs = () => {
localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
};
// 组件挂载时加载缓存的日志
onMounted(() => {
loadCachedLogs();
});
// 组件卸载前清除缓存
onBeforeUnmount(() => {
localStorage.removeItem("fishingLogs");
});
const handleFish = async () => {
if (isFishing.value) return;
isFishing.value = true;
currentCatch.value = null;
resultMessage.value = "正在钓鱼中...";
try {
const res = await fishingClick()
if (res.success) {
const items = res.data.items
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString()
const res = await fishingClick();
if (res.success && res.data) {
const items = res.data.items || [];
if (res.data.nextPullTime) {
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
}
if (items.length > 0) {
const fish = items[0]
resultMessage.value = `你钓到了一条${fish.isRare ? '稀有的' : ''}「${fish.fishName}」，重量 ${fish.weight}`
ElMessage.success('钓鱼成功！')
const fish = items[0];
currentCatch.value = fish;
resultMessage.value = `你钓到了一条${fish.isRare ? "稀有的" : ""}「${
fish.fishName
}」，重量 ${fish.weight}`;
ElMessage.success("钓鱼成功！🎣");
// 添加到日志并保存到localStorage
fishingLogs.value.unshift({
time: new Date(),
fishName: fish.fishName,
weight: fish.weight,
isRare: fish.isRare,
});
saveLogs();
} else {
resultMessage.value = '什么也没钓到，下次好运 🍀'
ElMessage.warning('什么也没钓到，下次好运 🍀')
resultMessage.value = "什么也没钓到，下次好运 🍀";
ElMessage.warning("什么也没钓到，下次好运 🍀");
}
} else {
nextPullTime.value = res.message
resultMessage.value = ''
ElMessage.error(res.message || '钓鱼失败')
resultMessage.value = res.message || "钓鱼失败";
if (res.data?.nextPullTime) {
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
}
ElMessage.error(res.message || "钓鱼失败 🎣");
}
} catch (err) {
ElMessage.error('钓鱼出错，请稍后重试')
console.error(err)
}
resultMessage.value = "钓鱼出错，请稍后重试";
ElMessage.error("钓鱼出错，请稍后重试 🌊");
console.error(err);
} finally {
isFishing.value = false;
}
};
const goHome = () => {
router.push('/')
}
router.push("/");
};
</script>
<style scoped>
.equipments-page {
.fishing-page {
padding: 20px;
}
.fishing-container {
display: grid;
grid-template-columns: 1fr 400px;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
min-height: calc(100vh - 40px);
}
.back-button {
margin-top: 20px;
text-align: center;
margin-top: 50px;
}
.back-button .el-button {
padding: 12px 24px;
font-size: 16px;
border-radius: 24px;
transition: all 0.3s ease;
background: #409eff;
border: 1px solid #409eff;
color: white;
font-weight: bold;
}
.back-button .el-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
background: #66b1ff;
border-color: #66b1ff;
}
.fishing-area {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
position: relative;
}
.fishing-animation {
height: 500px;
position: relative;
margin: 20px 0;
overflow: hidden;
border-radius: 8px;
background: #fff;
cursor: pointer;
}
.fishing-scene {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("@/assets/fishing-scene.svg") no-repeat center;
background-size: cover;
}
.fishing-active .fishing-scene {
animation: scene-active 3s ease-in-out infinite;
}
.ripple {
position: absolute;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
left: 60%;
top: 70%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
.fishing-active .ripple {
animation: ripple 2s infinite;
}
.fishing-controls {
margin: 20px 0;
}
.result {
margin-top: 20px;
font-size: 16px;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
@keyframes scene-active {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
</style>
src/pages/login/Login.vue
+108 -19
View File
@@ -37,6 +37,13 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Email" label="邮箱">
<el-input v-model="form.Email" placeholder="请输入邮箱"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Password" label="密码">
@@ -102,10 +109,10 @@ async function handleLogin () {
localStorage.setItem('token', res.token)
router.push('/')
} else {
ElMessage.error('登录失败，未返回token')
ElMessage.error('登录失败，未返回token 🔑')
}
} catch (err) {
ElMessage.error('登录失败，请检查网络或重试')
//ElMessage.error('登录失败，请检查网络或重试')
console.error('登录错误:', err)
}
} else {
@@ -120,15 +127,17 @@ async function handleRegister () {
try {
const res = await register({
Name: form.value.Name,
Email: form.value.Email,
Password: form.value.Password
})
if (res) {
ElMessage.success('注册成功')
ElMessage.success('注册成功 😀😀')
toggleForm() // 注册成功后切换到登录表单
} else {
ElMessage.error('注册失败')
ElMessage.error('注册失败 😢😢')
}
} catch (err) {
ElMessage.error('注册失败，请检查网络或重试')
ElMessage.error('注册失败，请检查网络或重试 📶')
console.error('注册失败:', err)
}
} else {
@@ -139,6 +148,11 @@ async function handleRegister () {
function toggleForm () {
isLogin.value = !isLogin.value // 切换登录和注册表单
form.value = {
Name: '',
Password: ''
}
formRef.value?.resetFields() // 重置表单验证状态
}
</script>
@@ -147,44 +161,119 @@ function toggleForm () {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
min-height: 100vh;
background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
padding: 20px;
}
.login-card {
width: 500px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.92);
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 0 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18), 0 0 15px rgba(0, 0, 0, 0.08);
}
.title {
text-align: center;
margin-bottom: 30px;
font-size: 2rem;
color: #409eff;
font-weight: bold;
margin-bottom: 40px;
font-size: 2.8rem;
background: linear-gradient(45deg, #0d47a1, #1976d2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
letter-spacing: 3px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}
.el-input {
width: 100%;
}
.el-input :deep(.el-input__wrapper) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 8px 15px;
}
.el-input :deep(.el-input__wrapper:hover) {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.el-button {
width: 100%;
height: 48px;
border-radius: 12px;
font-size: 17px;
font-weight: 600;
letter-spacing: 1.2px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.el-button:not(.el-button--text) {
background: linear-gradient(45deg, #0d47a1, #1976d2);
border: none;
box-shadow: 0 4px 15px rgba(13, 71, 161, 0.4);
}
.el-button:not(.el-button--text):hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(30, 136, 229, 0.5);
}
.toggle-link {
margin-top: 15px;
margin-top: 35px;
text-align: center;
padding: 20px 16px 0;
border-top: 1px solid rgba(235, 238, 245, 0.8);
transition: all 0.3s ease;
}
.toggle-link span {
margin-right: 5px;
margin-right: 8px;
color: #606266;
font-size: 15px;
}
.toggle-link el-button {
.toggle-link .el-button {
padding: 0;
font-size: 14px;
font-size: 16px;
font-weight: 600;
background: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-left: 4px;
height: auto;
}
.toggle-link .el-button:hover {
color: #1e88e5;
transform: scale(1.08);
text-shadow: 0 0 10px rgba(30, 136, 229, 0.3);
}
.el-form-item {
margin-bottom: 28px;
}
@media (max-width: 576px) {
.login-card {
padding: 25px;
}
.title {
font-size: 2.2rem;
margin-bottom: 35px;
}
}
</style>
src/pages/ranking/Ranking.vue
+30 -21
View File
@@ -15,14 +15,23 @@
<el-card class="my-info-card" shadow="hover">
<template #header>🎣 我的钓鱼成绩</template>
<div class="my-info">
<p><strong>得分：</strong>{{ myScore?.score }}</p>
<p><strong>描述：</strong>{{ myScore?.description }}</p>
<p><strong>得分：</strong>{{ myScore?.score || "暂无得分" }}</p>
<p><strong>描述：</strong>{{ myScore?.description || "暂无描述" }}</p>
</div>
</el-card>
<!-- 排名列表 -->
<el-table v-if="rankings?.items?.length" :data="rankings.items" border style="width: 100%; margin-top: 20px">
<el-table-column prop="rank" label="名次" width="80" />
<el-table
v-if="rankings?.items?.length"
:data="rankings.items"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column label="名次" width="80">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="玩家名称" />
<el-table-column prop="score" label="得分" width="120" />
<el-table-column prop="count" label="钓鱼数" width="120" />
@@ -38,36 +47,36 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { myRanking, globalRanking } from '@/api/ranking/ranking'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from "vue";
import { myRanking, globalRanking } from "@/api/ranking/ranking";
import { ElMessage } from "element-plus";
const rankings = ref(null)
const myScore = ref(null)
const rankings = ref(null);
const myScore = ref(null);
const fetchRankings = async () => {
try {
const res = await globalRanking()
rankings.value = res
const res = await globalRanking();
rankings.value = res;
} catch (err) {
ElMessage.error('获取排行榜失败')
}
ElMessage.error("获取排行榜失败 🏆");
}
};
const fetchMyScore = async () => {
try {
const res = await myRanking()
myScore.value = res
const res = await myRanking();
myScore.value = res;
} catch (err) {
ElMessage.error('获取我的得分失败')
}
ElMessage.error("获取我的得分失败 📊");
}
};
onMounted(() => {
document.title = '钓鱼排行榜'
fetchRankings()
fetchMyScore()
})
document.title = "钓鱼排行榜";
fetchRankings();
fetchMyScore();
});
</script>
<style scoped>
src/pages/shop/Shop.vue
+7 -7
View File
@@ -37,7 +37,7 @@ const fetchData = async () => {
points.value = pointsRes.points
items.value = pointsRes.items
} catch (err) {
ElMessage.error('加载数据失败，请重试')
ElMessage.error('加载数据失败，请重试 🛍️')
}
}
@@ -52,16 +52,16 @@ const buyItem = async (good) => {
if (count) {
try {
const res = await await buy({ EquipmentId: good.id, Quantity: 1 })
const res = await await buy({ EquipmentId: good.id, Quantity: count })
if (res) {
good.myQuantity += 1
points.value -= good.points
ElMessage.success("购买成功")
good.myQuantity += count
points.value -= count
ElMessage.success("购买成功 😎")
} else {
ElMessage.error(res.message)
ElMessage.error(res.message + ' 😞')
}
} catch (err) {
ElMessage.error('购买失败，请稍后再试')
ElMessage.error('购买失败，请稍后再试 👿')
}
}
}
src/utils/request.js
+71 -23
View File
@@ -7,58 +7,106 @@
* @LastEditTime: 2025-04-12 14:17:15
* @FilePath: \go_fish_web\src\utils\request.js
*/
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "@/router";
let isRefreshing = false
let isRefreshing = false;
let requestQueue = [];
// 创建 axios 实例
// 清理登录状态的函数
export function clearLoginState() {
localStorage.removeItem("token");
localStorage.removeItem("fishingLogs");
}
const request = axios.create({
baseURL: 'http://49.235.165.171:31001',
baseURL: "http://49.235.165.171:31001",
timeout: 5000,
})
});
// 设置默认 Content-Type
request.defaults.headers['Content-Type'] = 'application/json'
request.defaults.headers["Content-Type"] = "application/json";
// 请求拦截器：添加 token
request.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token')
const token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = `Bearer ${token}`
config.headers.Authorization = `Bearer ${token}`;
// 登录成功后重试队列中的请求
if (requestQueue.length > 0) {
requestQueue.forEach(({ resolve, config }) => {
resolve(request(config));
});
requestQueue = [];
}
return config
}
return config;
},
(error) => Promise.reject(error)
)
);
// 响应拦截器
request.interceptors.response.use(
(response) => response.data,
(error) => {
const status = error.response?.status
console.dir(error);
const status = error.response?.status;
const config = error.config;
if (status === 401) {
if (status === 400) {
// 处理400错误，解析并显示具体的验证错误信息
const errorData = error.response?.data;
if (errorData?.errors) {
// 收集所有错误信息
const errorMessages = [];
Object.entries(errorData.errors).forEach(([field, messages]) => {
if (Array.isArray(messages)) {
messages.forEach((msg) => errorMessages.push(msg));
}
});
// 显示合并后的错误信息
if (errorMessages.length > 0) {
ElMessage.error(errorMessages.join("\n"));
} else {
ElMessage.error("请求参数验证失败");
}
} else {
// 如果没有详细的错误信息，显示通用错误消息
ElMessage.error(errorData?.title || "请求参数错误");
}
return Promise.reject(error);
} else if (status === 401) {
// 避免重复处理 401
if (!isRefreshing) {
isRefreshing = true
ElMessage.warning('登录已过期，请重新登录')
localStorage.removeItem('token')
router.push('/login')
isRefreshing = true;
ElMessage.warning("登录已过期，请重新登录");
clearLoginState();
// 清空请求队列
requestQueue = [];
router.push("/login");
// 重置标志位，避免死锁
setTimeout(() => {
isRefreshing = false
}, 3000) // 避免多次跳转，给 3 秒冷却时间
isRefreshing = false;
}, 3000); // 避免多次跳转，给 3 秒冷却时间
}
// 将请求加入队列
return new Promise((resolve) => {
requestQueue.push({
resolve,
config,
});
});
} else {
ElMessage.error(error.response?.data?.message || '请求失败，请稍后再试')
ElMessage.error(error.response?.data?.message || "请求失败，请稍后再试");
}
return Promise.reject(error)
return Promise.reject(error);
}
)
);
export default request
export default request;