From de5bcc3ce652d17a453dcec1565a72f7c71f02f0 Mon Sep 17 00:00:00 2001
From: LyMysterious <LyMy1234@outlook.com>
Date: Wed, 16 Apr 2025 17:45:59 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/equipments/Equipments.vue |   9 +-
 src/pages/fishing/Fishing.vue       | 539 +++++++++++++---------------
 2 files changed, 251 insertions(+), 297 deletions(-)

diff --git a/src/pages/equipments/Equipments.vue b/src/pages/equipments/Equipments.vue
index bad4c93..5b70819 100644
--- a/src/pages/equipments/Equipments.vue
+++ b/src/pages/equipments/Equipments.vue
@@ -57,14 +57,7 @@
       </div>
 
       <div class="back-button">
-        <el-button
-          @click="$router.push({ name: 'Home' })"
-          size="small"
-          type="default"
-          icon="ArrowLeft"
-        >
-          返回首页
-        </el-button>
+        <el-button @click="$router.push({ name: 'Home' })" size="small" type="">返回首页</el-button>
       </div>
     </div>
   </div>
diff --git a/src/pages/fishing/Fishing.vue b/src/pages/fishing/Fishing.vue
index 4ecc483..24b82ef 100644
--- a/src/pages/fishing/Fishing.vue
+++ b/src/pages/fishing/Fishing.vue
@@ -1,48 +1,28 @@
 <template>
-  <div class="fishing-page">
-    <div class="fishing-container">
-      <div class="fishing-area">
-        <div
-          class="fishing-animation"
-          :class="{
+    <div class="fishing-page">
+        <div class="fishing-container">
+            <div class="fishing-area">
+                <div class="fishing-animation" :class="{
             'fishing-active': isFishing,
             reeling: isReeling,
-          }"
-        >
-          <div class="fishing-scene" @click="handleFish"></div>
-          <div class="ripple"></div>
+          }">
+                    <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.length > 0 ? '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="">返回首页</el-button>
+                </div>
+            </div>
         </div>
-        <div class="result" v-if="resultMessage || nextPullTime">
-          <el-alert
-            v-if="resultMessage"
-            :title="resultMessage"
-            :type="currentCatch.length > 0 ? '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>
@@ -64,352 +44,333 @@ const fishEscapeTimer = ref(null);
 
 // 从localStorage加载缓存的钓鱼日志
 const loadCachedLogs = () => {
-  const cachedLogs = localStorage.getItem("fishingLogs");
-  if (cachedLogs) {
-    fishingLogs.value = JSON.parse(cachedLogs);
-  }
+    const cachedLogs = localStorage.getItem("fishingLogs");
+    if (cachedLogs) {
+        fishingLogs.value = JSON.parse(cachedLogs);
+    }
 };
 
 // 保存钓鱼日志到localStorage
 const saveLogs = () => {
-  localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
+    localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
 };
 
 // 生成随机等待时间（1-3秒）
 const generateWaitTime = () => {
-  return Math.floor(Math.random() * 2000) + 1000;
+    return Math.floor(Math.random() * 2000) + 1000;
 };
 
 // 生成随机逃跑概率（10%）
 const willFishEscape = () => {
-  return Math.random() < 0.1;
+    return Math.random() < 0.1;
 };
 
 // 生成随机提竿失败概率（20%）
 const willReelFail = () => {
-  return Math.random() < 0.2;
+    return Math.random() < 0.2;
 };
 
 // 组件挂载时加载缓存的日志
 onMounted(() => {
-  loadCachedLogs();
+    loadCachedLogs();
 });
 
 // 组件卸载时清除定时器
 onBeforeUnmount(() => {
-  if (fishEscapeTimer.value) {
-    clearTimeout(fishEscapeTimer.value);
-  }
+    if (fishEscapeTimer.value) {
+        clearTimeout(fishEscapeTimer.value);
+    }
 });
 
 const handleFish = async () => {
-  // 下杆前校验：如果设置了下次钓鱼时间，则判断当前时间是否在等待中
-  if (nextPullTime.value) {
-    // 尝试将 nextPullTime 转换为 Date 对象
-    const nextTime = new Date(nextPullTime.value);
-    if (Date.now() < nextTime.getTime()) {
-      ElMessage.warning(
-        `还未到下杆时间，请在 ${nextTime.toLocaleTimeString()} 后尝试`
-      );
-      return;
+    // 下杆前校验：如果设置了下次钓鱼时间，则判断当前时间是否在等待中
+    if (nextPullTime.value) {
+        // 尝试将 nextPullTime 转换为 Date 对象
+        const nextTime = new Date(nextPullTime.value);
+        if (Date.now() < nextTime.getTime()) {
+            ElMessage.warning(
+                `还未到下杆时间，请在 ${nextTime.toLocaleTimeString()} 后尝试`
+            );
+            return;
+        }
     }
-  }
-  // 如果正在钓鱼且还处于等待上钩阶段，不允许操作
-  if (isFishing.value && !isWaiting.value) return;
-
-  // 第一阶段：开始钓鱼
-  if (!isWaiting.value) {
-    isFishing.value = true;
-    resultMessage.value = "放下鱼竿，等待不知好歹的🐟";
-
-    // 随机等待时间后判断是否有鱼上钩
-    setTimeout(() => {
-      if (willFishEscape()) {
-        resultMessage.value = "鱼儿警觉地游走了... 🐟";
-        isFishing.value = false;
+    // 如果正在钓鱼且还处于等待上钩阶段，不允许操作
+    if (isFishing.value && !isWaiting.value) return;
+
+    // 第一阶段：开始钓鱼
+    if (!isWaiting.value) {
+        isFishing.value = true;
+        resultMessage.value = "放下鱼竿，等待不知好歹的🐟";
+
+        // 随机等待时间后判断是否有鱼上钩
+        setTimeout(() => {
+            if (willFishEscape()) {
+                resultMessage.value = "鱼儿警觉地游走了... 🐟";
+                isFishing.value = false;
+                return;
+            }
+
+            isWaiting.value = true;
+            resultMessage.value = "鱼儿上钩啦！速速收杆！速速速速速速";
+
+            isReeling.value = true;
+
+            // 设置逃跑计时器
+            fishEscapeTimer.value = setTimeout(() => {
+                if (isWaiting.value && isFishing.value) {
+                    isWaiting.value = false;
+                    isFishing.value = false;
+                    resultMessage.value = "鱼儿挣脱逃走了！";
+                }
+            }, 5000); // 5秒内必须完成提竿
+        }, generateWaitTime());
         return;
-      }
+    }
 
-      isWaiting.value = true;
-      resultMessage.value = "鱼儿上钩啦！速速收杆！速速速速速速";
+    // 清除逃跑计时器
+    if (fishEscapeTimer.value) {
+        clearTimeout(fishEscapeTimer.value);
+        fishEscapeTimer.value = null;
+    }
 
-      isReeling.value = true;
+    // 第二阶段：达到目标点击次数，判断是否提竿成功
+    isWaiting.value = false;
+    isReeling.value = false;
 
-      // 设置逃跑计时器
-      fishEscapeTimer.value = setTimeout(() => {
-        if (isWaiting.value && isFishing.value) {
-          isWaiting.value = false;
-          isFishing.value = false;
-          resultMessage.value = "鱼儿挣脱逃走了！";
-        }
-      }, 5000); // 5秒内必须完成提竿
-    }, generateWaitTime());
-    return;
-  }
-
-  // 清除逃跑计时器
-  if (fishEscapeTimer.value) {
-    clearTimeout(fishEscapeTimer.value);
-    fishEscapeTimer.value = null;
-  }
-
-  // 第二阶段：达到目标点击次数，判断是否提竿成功
-  isWaiting.value = false;
-  isReeling.value = false;
-
-  if (willReelFail()) {
-    isFishing.value = false;
-    resultMessage.value = "提竿时机不对，鱼儿溜走了！";
-    return;
-  }
-
-  // 调用钓鱼接口
-  currentCatch.value = [];
-  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) {
-        currentCatch.value = items;
-
-        // 构建展示信息
-        const messageList = items.map(
-          (fish) =>
-            `「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${
-              fish.weight
-            }`
-        );
-        resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
-        // 根据钓到的鱼的数量显示不同的消息和动画效果
-        if (items.length > 1) {
-          ElMessage({
-            message: `太棒了！一次钓到${items.length}条鱼！🎣✨`,
-            type: "success",
-            duration: 5000,
-            showClose: true,
-            customClass: "multi-catch-message",
-          });
-          // 添加额外的动画类
-          document
-            .querySelector(".fishing-animation")
-            .classList.add("multi-catch");
-          setTimeout(() => {
-            document
-              .querySelector(".fishing-animation")
-              .classList.remove("multi-catch");
-          }, 3000);
+    if (willReelFail()) {
+        isFishing.value = false;
+        resultMessage.value = "提竿时机不对，鱼儿溜走了！";
+        return;
+    }
+
+    // 调用钓鱼接口
+    currentCatch.value = [];
+    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) {
+                currentCatch.value = items;
+
+                // 构建展示信息
+                const messageList = items.map(
+                    (fish) =>
+                        `「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${fish.weight
+                        }`
+                );
+                resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
+                // 根据钓到的鱼的数量显示不同的消息和动画效果
+                if (items.length > 1) {
+                    ElMessage({
+                        message: `太棒了！一次钓到${items.length}条鱼！🎣✨`,
+                        type: "success",
+                        duration: 5000,
+                        showClose: true,
+                        customClass: "multi-catch-message",
+                    });
+                    // 添加额外的动画类
+                    document
+                        .querySelector(".fishing-animation")
+                        .classList.add("multi-catch");
+                    setTimeout(() => {
+                        document
+                            .querySelector(".fishing-animation")
+                            .classList.remove("multi-catch");
+                    }, 3000);
+                } else {
+                    ElMessage.success("钓鱼成功！🎣");
+                }
+
+                // 添加所有钓到的鱼到日志
+                const newLogs = items.map((fish) => ({
+                    time: new Date(),
+                    fishName: fish.fishName,
+                    weight: fish.weight,
+                    isRare: fish.isRare,
+                }));
+                fishingLogs.value.unshift(...newLogs);
+                saveLogs();
+            } else {
+                resultMessage.value = "什么也没钓到，下次好运 🍀";
+                ElMessage.warning("什么也没钓到，下次好运 🍀");
+            }
         } else {
-          ElMessage.success("钓鱼成功！🎣");
+            resultMessage.value = res.message || "钓鱼失败";
+            if (res.data?.nextPullTime) {
+                nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
+            }
+            ElMessage.error(res.message || "钓鱼失败 🎣");
         }
-
-        // 添加所有钓到的鱼到日志
-        const newLogs = items.map((fish) => ({
-          time: new Date(),
-          fishName: fish.fishName,
-          weight: fish.weight,
-          isRare: fish.isRare,
-        }));
-        fishingLogs.value.unshift(...newLogs);
-        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;
     }
-  } catch (err) {
-    resultMessage.value = "钓鱼出错，请稍后重试";
-    ElMessage.error("钓鱼出错，请稍后重试 🌊");
-    console.error(err);
-  } finally {
-    isFishing.value = false;
-  }
 };
 
 const goHome = () => {
-  router.push("/");
+    router.push("/");
 };
 </script>
 
 <style scoped>
 .fishing-page {
-  padding: 20px;
+    padding: 20px;
 }
 
 .fishing-container {
-  display: grid;
-  grid-template-columns: 1fr 400px;
-  gap: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-  min-height: calc(100vh - 40px);
+    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;
+    margin-top: 20px;
+    text-align: center;
 }
 
 .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;
+    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;
+    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;
-  transition: transform 0.2s ease;
-  cursor: pointer;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: url("@/assets/fishing-scene.svg") no-repeat center;
+    background-size: cover;
+    transition: transform 0.2s ease;
+    cursor: pointer;
 }
 
 .fishing-active .fishing-scene {
-  animation: scene-active 3s ease-in-out infinite;
+    animation: scene-active 3s ease-in-out infinite;
 }
 
 .reeling .fishing-scene {
-  animation: reel 0.2s ease-in-out;
+    animation: reel 0.2s ease-in-out;
 }
 
 .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;
+    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;
+    animation: ripple 2s infinite;
 }
 
 .result {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 
 @keyframes ripple {
-  0% {
-    transform: translate(-50%, -50%) scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(4);
-    opacity: 0;
-  }
+    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) rotate(0deg);
-    filter: brightness(1);
-  }
-  25% {
-    transform: scale(1.05) rotate(-2deg);
-    filter: brightness(1.2);
-  }
-  75% {
-    transform: scale(1.05) rotate(2deg);
-    filter: brightness(1.2);
-  }
+    0%,
+    100% {
+        transform: scale(1) rotate(0deg);
+        filter: brightness(1);
+    }
+    25% {
+        transform: scale(1.05) rotate(-2deg);
+        filter: brightness(1.2);
+    }
+    75% {
+        transform: scale(1.05) rotate(2deg);
+        filter: brightness(1.2);
+    }
 }
 
 @keyframes reel {
-  0% {
-    transform: rotate(0deg) scale(1);
-  }
-  50% {
-    transform: rotate(-8deg) scale(1.1);
-  }
-  100% {
-    transform: rotate(0deg) scale(1);
-  }
+    0% {
+        transform: rotate(0deg) scale(1);
+    }
+    50% {
+        transform: rotate(-8deg) scale(1.1);
+    }
+    100% {
+        transform: rotate(0deg) scale(1);
+    }
 }
 
 /* 多条鱼时的特殊动画效果 */
 @keyframes multi-catch {
-  0%,
-  100% {
-    transform: scale(1) rotate(0deg);
-    filter: brightness(1) contrast(1);
-  }
-  25% {
-    transform: scale(1.15) rotate(-5deg);
-    filter: brightness(1.3) contrast(1.1);
-  }
-  75% {
-    transform: scale(1.15) rotate(5deg);
-    filter: brightness(1.3) contrast(1.1);
-  }
+    0%,
+    100% {
+        transform: scale(1) rotate(0deg);
+        filter: brightness(1) contrast(1);
+    }
+    25% {
+        transform: scale(1.15) rotate(-5deg);
+        filter: brightness(1.3) contrast(1.1);
+    }
+    75% {
+        transform: scale(1.15) rotate(5deg);
+        filter: brightness(1.3) contrast(1.1);
+    }
 }
 
 .multi-catch {
-  animation: multi-catch 1s ease-in-out 3 !important;
+    animation: multi-catch 1s ease-in-out 3 !important;
 }
 
 .multi-catch-message {
-  font-size: 16px !important;
-  font-weight: bold !important;
-  background: linear-gradient(45deg, #4caf50, #2196f3) !important;
-  color: white !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+    background: linear-gradient(45deg, #4caf50, #2196f3) !important;
+    color: white !important;
 }
 
 .fishing-scene:active {
-  transform: scale(0.98);
+    transform: scale(0.98);
 }
 
 .fishing-animation:not(.fishing-active) .fishing-scene:hover {
-  transform: scale(1.02);
+    transform: scale(1.02);
 }
 </style>