feat(UpdateNotification): 优化更新提示组件样式和功能

- 添加 forceShow 和 onClose 属性支持强制显示和关闭回调
- 重新设计 UI 样式为顶部通知栏布局
- 新增"稍后"按钮支持延迟更新
- 优化动画效果和交互体验

Cunkebao/src/components/UpdateNotification/index.tsx

@@ -1,22 +1,22 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "antd-mobile";
 import { updateChecker } from "@/utils/updateChecker";
-import {
-  ReloadOutlined,
-  CloudDownloadOutlined,
-  RocketOutlined,
-} from "@ant-design/icons";
+import { ReloadOutlined } from "@ant-design/icons";
 
 interface UpdateNotificationProps {
   position?: "top" | "bottom";
   autoReload?: boolean;
   showToast?: boolean;
+  forceShow?: boolean;
+  onClose?: () => void;
 }
 
 const UpdateNotification: React.FC<UpdateNotificationProps> = ({
   position = "top",
   autoReload = false,
   showToast = true,
+  forceShow = false,
+  onClose,
 }) => {
   const [hasUpdate, setHasUpdate] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
@@ -51,7 +51,19 @@ const UpdateNotification: React.FC<UpdateNotificationProps> = ({
     updateChecker.forceReload();
   };
 
-  if (!isVisible || !hasUpdate) {
+  const handleLater = () => {
+    setIsVisible(false);
+    onClose?.();
+    // 10分钟后再次检查
+    setTimeout(
+      () => {
+        updateChecker.start();
+      },
+      10 * 60 * 1000,
+    );
+  };
+
+  if ((!isVisible || !hasUpdate) && !forceShow) {
     return null;
   }
 
@@ -62,110 +74,134 @@ const UpdateNotification: React.FC<UpdateNotificationProps> = ({
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
         zIndex: 99999,
-        background: "linear-gradient(135deg, #1890ff 0%, #096dd9 100%)",
+        background: "linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)",
         color: "white",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "20px",
-        textAlign: "center",
+        padding: "16px 16px",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
+        borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+        animation: "slideDownBar 0.3s ease-out",
       }}
     >
-      {/* 背景装饰 */}
       <div
         style={{
-          position: "absolute",
-          top: "10%",
-          left: "50%",
-          transform: "translateX(-50%)",
-          fontSize: "120px",
-          opacity: 0.1,
-          animation: "float 3s ease-in-out infinite",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          maxWidth: "1200px",
+          margin: "0 auto",
         }}
       >
-        <RocketOutlined />
-      </div>
-
-      {/* 主要内容 */}
-      <div style={{ position: "relative", zIndex: 1 }}>
-        {/* 图标 */}
+        {/* 左侧内容 */}
         <div
           style={{
-            fontSize: "80px",
-            marginBottom: "20px",
-            animation: "pulse 2s ease-in-out infinite",
+            display: "flex",
+            alignItems: "center",
+            gap: "16px",
+            flex: 1,
           }}
         >
-          <CloudDownloadOutlined />
+          {/* 更新图标 */}
+          <div
+            style={{
+              width: "36px",
+              height: "36px",
+              background: "linear-gradient(135deg, #188eee 0%, #188eee 100%)",
+              borderRadius: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "18px",
+              animation: "pulse 2s ease-in-out infinite",
+            }}
+          >
+            <ReloadOutlined />
+          </div>
+          {/* 文本信息 */}
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: "14px",
+                fontWeight: "600",
+                marginBottom: "2px",
+                lineHeight: "1.2",
+              }}
+            >
+              发现新版本
+            </div>
+            <div
+              style={{
+                fontSize: "12px",
+                opacity: 0.8,
+                lineHeight: "1.3",
+              }}
+            >
+              建议立即更新获得更好体验
+            </div>
+          </div>
         </div>
 
-        {/* 标题 */}
+        {/* 右侧按钮组 */}
         <div
           style={{
-            fontSize: "28px",
-            fontWeight: "bold",
-            marginBottom: "12px",
-            textShadow: "0 2px 4px rgba(0,0,0,0.3)",
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            flexShrink: 0,
           }}
         >
-          发现新版本
-        </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.9)",
-            border: "2px solid rgba(255,255,255,0.5)",
-            color: "#1890ff",
-            fontSize: "18px",
-            fontWeight: "bold",
-            padding: "12px 40px",
-            borderRadius: "50px",
-            backdropFilter: "blur(10px)",
-            boxShadow: "0 8px 32px rgba(24,144,255,0.3)",
-            transition: "all 0.3s ease",
-          }}
-          onClick={handleReload}
-        >
-          <ReloadOutlined style={{ marginRight: "8px" }} />
-          立即更新
-        </Button>
-
-        {/* 提示文字 */}
-        <div
-          style={{
-            fontSize: "12px",
-            opacity: 0.7,
-            marginTop: "20px",
-          }}
-        >
-          更新将自动重启应用
+          <Button
+            size="small"
+            style={{
+              background: "rgba(255, 255, 255, 0.1)",
+              border: "1px solid rgba(255, 255, 255, 0.2)",
+              color: "rgba(255, 255, 255, 0.8)",
+              fontSize: "12px",
+              fontWeight: "500",
+              borderRadius: "6px",
+              height: "32px",
+              minHeight: "32px",
+              padding: "0 12px",
+              minWidth: "56px",
+            }}
+            onClick={handleLater}
+          >
+            稍后
+          </Button>
+          <Button
+            size="small"
+            style={{
+              background: "linear-gradient(135deg, #1890ff 0%, #096dd9 100%)",
+              border: "none",
+              color: "white",
+              fontSize: "12px",
+              fontWeight: "600",
+              borderRadius: "6px",
+              height: "32px",
+              minHeight: "32px",
+              padding: "0 16px",
+              minWidth: "64px",
+              boxShadow: "0 2px 8px rgba(24, 144, 255, 0.3)",
+            }}
+            onClick={handleReload}
+          >
+            立即更新
+          </Button>
         </div>
       </div>
 
       {/* 动画样式 */}
       <style>
         {`
-          @keyframes float {
-            0%, 100% { transform: translateX(-50%) translateY(0px); }
-            50% { transform: translateX(-50%) translateY(-20px); }
+          @keyframes slideDownBar {
+            0% {
+              transform: translateY(-100%);
+              opacity: 0;
+            }
+            100% {
+              transform: translateY(0);
+              opacity: 1;
+            }
           }
           @keyframes pulse {
             0%, 100% { transform: scale(1); }