FEAT => 本次更新项目为：

更新模块完成
2025-08-05 11:59:18 +08:00
parent 192c8c3c0a
commit 57a32e252d
17 changed files with 646 additions and 190 deletions
--- a/nkebao/src/components/UpdateNotification/index.tsx
+++ b/nkebao/src/components/UpdateNotification/index.tsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from "react";
+import { Button } from "antd-mobile";
+import { updateChecker } from "@/utils/updateChecker";
+import {
+  ReloadOutlined,
+  CloudDownloadOutlined,
+  RocketOutlined,
+} from "@ant-design/icons";
+
+interface UpdateNotificationProps {
+  position?: "top" | "bottom";
+  autoReload?: boolean;
+  showToast?: boolean;
+}
+
+const UpdateNotification: React.FC<UpdateNotificationProps> = ({
+  position = "top",
+  autoReload = false,
+  showToast = true,
+}) => {
+  const [hasUpdate, setHasUpdate] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // 注册更新检测回调
+    const handleUpdate = (info: { hasUpdate: boolean }) => {
+      if (info.hasUpdate) {
+        setHasUpdate(true);
+        setIsVisible(true);
+
+        if (autoReload) {
+          // 自动刷新
+          setTimeout(() => {
+            updateChecker.forceReload();
+          }, 3000);
+        }
+      }
+    };
+
+    updateChecker.onUpdate(handleUpdate);
+
+    // 启动更新检测
+    updateChecker.start();
+
+    return () => {
+      updateChecker.offUpdate(handleUpdate);
+      updateChecker.stop();
+    };
+  }, [autoReload, showToast]);
+  const handleReload = () => {
+    updateChecker.forceReload();
+  };
+
+  // if (!isVisible || !hasUpdate) {
+  //   return null;
+  // }
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 99999,
+        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        color: "white",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "20px",
+        textAlign: "center",
+      }}
+    >
+      {/* 背景装饰 */}
+      <div
+        style={{
+          position: "absolute",
+          top: "10%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          fontSize: "120px",
+          opacity: 0.1,
+          animation: "float 3s ease-in-out infinite",
+        }}
+      >
+        <RocketOutlined />
+      </div>
+
+      {/* 主要内容 */}
+      <div style={{ position: "relative", zIndex: 1 }}>
+        {/* 图标 */}
+        <div
+          style={{
+            fontSize: "80px",
+            marginBottom: "20px",
+            animation: "pulse 2s ease-in-out infinite",
+          }}
+        >
+          <CloudDownloadOutlined />
+        </div>
+
+        {/* 标题 */}
+        <div
+          style={{
+            fontSize: "28px",
+            fontWeight: "bold",
+            marginBottom: "12px",
+            textShadow: "0 2px 4px rgba(0,0,0,0.3)",
+          }}
+        >
+          发现新版本
+        </div>
+
+        {/* 描述 */}
+        <div
+          style={{
+            fontSize: "16px",
+            opacity: 0.9,
+            marginBottom: "40px",
+            lineHeight: "1.5",
+            maxWidth: "300px",
+          }}
+        >
+          为了给您提供更好的体验，请更新到最新版本
+        </div>
+
+        {/* 更新按钮 */}
+        <Button
+          size="large"
+          style={{
+            background: "rgba(255,255,255,0.2)",
+            border: "2px solid rgba(255,255,255,0.3)",
+            color: "white",
+            fontSize: "18px",
+            fontWeight: "bold",
+            padding: "12px 40px",
+            borderRadius: "50px",
+            backdropFilter: "blur(10px)",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
+            transition: "all 0.3s ease",
+          }}
+          onClick={handleReload}
+        >
+          <ReloadOutlined style={{ marginRight: "8px" }} />
+          立即更新
+        </Button>
+
+        {/* 提示文字 */}
+        <div
+          style={{
+            fontSize: "12px",
+            opacity: 0.7,
+            marginTop: "20px",
+          }}
+        >
+          更新将自动重启应用
+        </div>
+      </div>
+
+      {/* 动画样式 */}
+      <style>
+        {`
+          @keyframes float {
+            0%, 100% { transform: translateX(-50%) translateY(0px); }
+            50% { transform: translateX(-50%) translateY(-20px); }
+          }
+          @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default UpdateNotification;