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

新增钓鱼日志组件，用于展示钓鱼记录。优化钓鱼页面的交互体验，增加动画效果和状态提示。同时，修复了请求拦截器中的错误处理逻辑，并改进了登录和注册页面的UI设计。

src/pages/equipments/Equipments.vue

@@ -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

@@ -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

@@ -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>
+  <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 () => {
-    try {
-        const res = await fishingClick()
-        if (res.success) {
-            const items = res.data.items
-            nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString()
+  if (isFishing.value) return;
 
-            if (items.length > 0) {
-                const fish = items[0]
-                resultMessage.value = `你钓到了一条${fish.isRare ? '稀有的' : ''}「${fish.fishName}」，重量 ${fish.weight}`
-                ElMessage.success('钓鱼成功！')
-            } else {
-                resultMessage.value = '什么也没钓到，下次好运 🍀'
-                ElMessage.warning('什么也没钓到，下次好运 🍀')
-            }
-        } else {
-            nextPullTime.value = res.message
-            resultMessage.value = ''
-            ElMessage.error(res.message || '钓鱼失败')
-        }
-    } catch (err) {
-        ElMessage.error('钓鱼出错，请稍后重试')
-        console.error(err)
+  isFishing.value = true;
+  currentCatch.value = null;
+  resultMessage.value = "正在钓鱼中...";
+
+  try {
+    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];
+        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("什么也没钓到，下次好运 🍀");
+      }
+    } else {
+      resultMessage.value = res.message || "钓鱼失败";
+      if (res.data?.nextPullTime) {
+        nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
+      }
+      ElMessage.error(res.message || "钓鱼失败 🎣");
     }
-}
+  } catch (err) {
+    resultMessage.value = "钓鱼出错，请稍后重试";
+    ElMessage.error("钓鱼出错，请稍后重试 🌊");
+    console.error(err);
+  } finally {
+    isFishing.value = false;
+  }
+};
 
 const goHome = () => {
-    router.push('/')
-}
+  router.push("/");
+};
 </script>
 
 <style scoped>
-.equipments-page {
-    text-align: center;
-    margin-top: 50px;
+.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;
+}
+
+.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;
+  margin-top: 20px;
+}
+
+@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

@@ -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

@@ -8,81 +8,90 @@
  * @FilePath: \go_fish_web\src\pages\ranking\Ranking.vue
 -->
 <template>
-    <div class="ranking-page">
-        <h1>🏆 钓鱼排行榜</h1>
+  <div class="ranking-page">
+    <h1>🏆 钓鱼排行榜</h1>
 
-        <!-- 我的信息 -->
-        <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>
-            </div>
-        </el-card>
+    <!-- 我的信息 -->
+    <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>
+      </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-column prop="name" label="玩家名称" />
-            <el-table-column prop="score" label="得分" width="120" />
-            <el-table-column prop="count" label="钓鱼数" width="120" />
-            <el-table-column label="最大鱼" min-width="250">
-                <template #default="{ row }">
-                    {{ row.maxFishName }} - {{ row.maxWeight }}
-                </template>
-            </el-table-column>
-        </el-table>
+    <!-- 排名列表 -->
+    <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" />
+      <el-table-column label="最大鱼" min-width="250">
+        <template #default="{ row }">
+          {{ row.maxFishName }} - {{ row.maxWeight }}
+        </template>
+      </el-table-column>
+    </el-table>
 
-        <el-empty v-else description="暂无排行榜数据" style="margin-top: 30px" />
-    </div>
+    <el-empty v-else description="暂无排行榜数据" style="margin-top: 30px" />
+  </div>
 </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
-    } catch (err) {
-        ElMessage.error('获取排行榜失败')
-    }
-}
+  try {
+    const res = await globalRanking();
+    rankings.value = res;
+  } catch (err) {
+    ElMessage.error("获取排行榜失败 🏆");
+  }
+};
 
 const fetchMyScore = async () => {
-    try {
-        const res = await myRanking()
-        myScore.value = res
-    } catch (err) {
-        ElMessage.error('获取我的得分失败')
-    }
-}
+  try {
+    const res = await myRanking();
+    myScore.value = res;
+  } catch (err) {
+    ElMessage.error("获取我的得分失败 📊");
+  }
+};
 
 onMounted(() => {
-    document.title = '钓鱼排行榜'
-    fetchRankings()
-    fetchMyScore()
-})
+  document.title = "钓鱼排行榜";
+  fetchRankings();
+  fetchMyScore();
+});
 </script>
 
 <style scoped>
 .ranking-page {
-    padding: 20px;
-    max-width: 900px;
-    margin: 0 auto;
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .my-info-card {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .my-info p {
-    margin: 8px 0;
-    font-size: 16px;
+  margin: 8px 0;
+  font-size: 16px;
 }
 </style>

src/pages/shop/Shop.vue

@@ -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('购买失败，请稍后再试 👿')
         }
     }
 }