update pay function

2025-11-19 19:41:26 +08:00
parent 17c04211bb
commit a4d16e7686
12 changed files with 4667 additions and 140 deletions
--- a/src/components/Button2/index.tsx
+++ b/src/components/Button2/index.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import Link, { LinkProps } from "next/link";
+
+type CommonProps = {
+    className?: string;
+    children?: React.ReactNode;
+    isPrimary?: boolean;
+    isSecondary?: boolean;
+};
+
+type ButtonAsButton = {
+    as?: "button";
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+type ButtonAsAnchor = {
+    as: "a";
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type ButtonAsLink = {
+    as: "link";
+} & LinkProps;
+
+type ButtonProps = CommonProps &
+    (ButtonAsButton | ButtonAsAnchor | ButtonAsLink);
+
+const Button: React.FC<ButtonProps> = ({
+    className,
+    children,
+    isPrimary,
+    isSecondary,
+    as = "button",
+    ...props
+}) => {
+    const isLink = as === "link";
+    const Component: React.ElementType = isLink ? Link : as;
+
+    return (
+        <Component
+            className={`relative inline-flex justify-center items-center h-10 px-3.5 rounded-lg text-title-5 cursor-pointer transition-all ${
+                isPrimary ? "bg-white text-black hover:bg-white/90" : ""
+            } ${
+                isSecondary
+                    ? "shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset] text-white after:absolute after:inset-0 after:border after:border-line after:rounded-lg after:pointer-events-none after:transition-colors hover:after:border-white"
+                    : ""
+            }  ${className || ""}`}
+            {...(isLink ? (props as LinkProps) : props)}
+        >
+            {children}
+        </Component>
+    );
+};
+
+export default Button;
--- a/src/components/Subscription/SubscriptionContentNew.tsx
+++ b/src/components/Subscription/SubscriptionContentNew.tsx
--- a/src/views/Pages/Account/subscription-content.tsx
+++ b/src/views/Pages/Account/subscription-content.tsx
@@ -0,0 +1,221 @@
+export const subscriptionConfig = {
+  plans: [
+    {
+      name: 'free',
+      displayName: '基础版',
+      description: '免费体验核心功能,7项实用工具',
+      icon: 'star',
+      price: 0,
+      badge: '免费',
+      badgeColor: 'gray',
+      cardBorder: 'gray',
+      features: [
+        { name: '新闻信息流', enabled: true },
+        { name: '历史事件对比', enabled: true, limit: 'TOP3' },
+        { name: '事件传导链分析(AI)', enabled: true, limit: '有限体验' },
+        { name: 'AI复盘功能', enabled: true },
+        { name: '企业概览', enabled: true, limit: '限制预览' },
+        { name: '个股深度分析(AI)', enabled: true, limit: '10家/月' },
+        { name: '概念中心(548大概念)', enabled: true, limit: 'TOP5' },
+        { name: '涨停板块数据分析', enabled: true },
+        { name: '个股涨停分析', enabled: true },
+        { name: '事件-相关标的分析', enabled: false },
+        { name: '相关概念展示', enabled: false },
+        { name: '高效数据筛选工具', enabled: false },
+      ],
+    },
+    {
+      name: 'pro',
+      displayName: 'Pro 专业版',
+      description: '为专业投资者打造,解锁高级分析功能',
+      icon: 'gem',
+      badge: '推荐',
+      badgeColor: 'gold',
+      cardBorder: 'gold',
+      highlight: false,
+      pricingOptions: [
+        {
+          cycleKey: 'monthly',
+          label: '月付',
+          months: 1,
+          price: 299,
+          originalPrice: null,
+          discountPercent: 0,
+        },
+        {
+          cycleKey: '3months',
+          label: '季付',
+          months: 3,
+          price: 799,
+          originalPrice: 897,
+          discountPercent: 11,
+        },
+        {
+          cycleKey: '6months',
+          label: '半年付',
+          months: 6,
+          price: 1499,
+          originalPrice: 1794,
+          discountPercent: 16,
+        },
+        {
+          cycleKey: 'yearly',
+          label: '年付',
+          months: 12,
+          price: 2699,
+          originalPrice: 3588,
+          discountPercent: 25,
+        },
+      ],
+      features: [
+        { name: '新闻信息流', enabled: true },
+        { name: '历史事件对比', enabled: true },
+        { name: '事件传导链分析(AI)', enabled: true },
+        { name: '事件-相关标的分析', enabled: true },
+        { name: '相关概念展示', enabled: true },
+        { name: 'AI复盘功能', enabled: true },
+        { name: '企业概览', enabled: true },
+        { name: '个股深度分析(AI)', enabled: true, limit: '50家/月' },
+        { name: '高效数据筛选工具', enabled: true },
+        { name: '概念中心(548大概念)', enabled: true },
+        { name: '历史时间轴查询', enabled: true, limit: '100天' },
+        { name: '涨停板块数据分析', enabled: true },
+        { name: '个股涨停分析', enabled: true },
+        { name: '板块深度分析(AI)', enabled: false },
+        { name: '概念高频更新', enabled: false },
+      ],
+    },
+    {
+      name: 'max',
+      displayName: 'Max 旗舰版',
+      description: '旗舰级体验,无限制使用所有功能',
+      icon: 'crown',
+      badge: '最受欢迎',
+      badgeColor: 'gold',
+      cardBorder: 'gold',
+      highlight: true,
+      pricingOptions: [
+        {
+          cycleKey: 'monthly',
+          label: '月付',
+          months: 1,
+          price: 599,
+          originalPrice: null,
+          discountPercent: 0,
+        },
+        {
+          cycleKey: '3months',
+          label: '季付',
+          months: 3,
+          price: 1599,
+          originalPrice: 1797,
+          discountPercent: 11,
+        },
+        {
+          cycleKey: '6months',
+          label: '半年付',
+          months: 6,
+          price: 2999,
+          originalPrice: 3594,
+          discountPercent: 17,
+        },
+        {
+          cycleKey: 'yearly',
+          label: '年付',
+          months: 12,
+          price: 5399,
+          originalPrice: 7188,
+          discountPercent: 25,
+        },
+      ],
+      features: [
+        { name: '新闻信息流', enabled: true },
+        { name: '历史事件对比', enabled: true },
+        { name: '事件传导链分析(AI)', enabled: true },
+        { name: '事件-相关标的分析', enabled: true },
+        { name: '相关概念展示', enabled: true },
+        { name: '板块深度分析(AI)', enabled: true },
+        { name: 'AI复盘功能', enabled: true },
+        { name: '企业概览', enabled: true },
+        { name: '个股深度分析(AI)', enabled: true, limit: '无限制' },
+        { name: '高效数据筛选工具', enabled: true },
+        { name: '概念中心(548大概念)', enabled: true },
+        { name: '历史时间轴查询', enabled: true, limit: '无限制' },
+        { name: '概念高频更新', enabled: true },
+        { name: '涨停板块数据分析', enabled: true },
+        { name: '个股涨停分析', enabled: true },
+      ],
+    },
+  ],
+
+  faqs: [
+    {
+      question: '如何取消订阅？',
+      answer: '您可以随时在账户设置中取消订阅。取消后,您的订阅将在当前计费周期结束时到期,期间您仍可继续使用付费功能。取消后不会立即扣款,也不会自动续费。',
+    },
+    {
+      question: '支持哪些支付方式？',
+      answer: '我们目前支持微信支付。扫描支付二维码后,系统会自动检测支付状态并激活您的订阅。支付过程安全可靠,所有交易都经过加密处理。',
+    },
+    {
+      question: '升级或切换套餐时,原套餐的费用怎么办？',
+      answer: '当您升级套餐或切换计费周期时,系统会自动计算您当前订阅的剩余价值并用于抵扣新套餐的费用。\n\n计算方式：\n• 剩余价值 = 原套餐价格 × (剩余天数 / 总天数)\n• 实付金额 = 新套餐价格 - 剩余价值 - 优惠码折扣\n\n例如：您购买了年付Pro版（¥2699）,使用了180天后升级到Max版（¥5399/年）,剩余价值约¥1350将自动抵扣,实付约¥4049。',
+    },
+    {
+      question: '可以在不同计费周期之间切换吗？',
+      answer: '可以。您可以随时更改计费周期。如果从短期切换到长期,系统会计算剩余价值并应用到新的订阅中。长期套餐（季付、半年付、年付）可享受更大的折扣优惠。',
+    },
+    {
+      question: '是否支持退款？',
+      answer: '为了保障服务质量和维护公平的商业环境,我们不支持退款。\n\n建议您在订阅前：\n• 充分了解各套餐的功能差异\n• 使用免费版体验基础功能\n• 根据实际需求选择合适的计费周期\n• 如有疑问可联系客服咨询\n\n提示：选择长期套餐（如半年付、年付）可享受更大折扣,性价比更高。',
+    },
+    {
+      question: 'Pro版和Max版有什么区别？',
+      answer: 'Pro版适合个人专业用户,提供高级图表、历史数据分析等功能,有一定的使用限制。Max版则是为重度用户设计,提供无限制的数据查询、板块深度分析、概念高频更新等独家功能,并享有优先技术支持。',
+    },
+  ],
+};
+
+// 主题颜色配置 - 黑金配色
+export const themeColors = {
+  // 背景渐变
+  bgGradient: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)',
+  bgRadialGold: 'radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%)',
+
+  // 主色调
+  primary: {
+    gold: '#D4AF37',        // 金色
+    goldLight: '#F4E3A7',   // 浅金色
+    goldDark: '#B8941F',    // 深金色
+  },
+
+  // 背景色
+  bg: {
+    primary: '#0a0a0a',     // 主背景（纯黑）
+    secondary: '#1a1a1a',   // 次级背景（深黑）
+    card: '#1e1e1e',        // 卡片背景
+    cardHover: '#252525',   // 卡片悬停
+  },
+
+  // 文字颜色
+  text: {
+    primary: '#ffffff',     // 主文字（纯白）
+    secondary: '#b8b8b8',   // 次级文字（灰白）
+    muted: '#808080',       // 弱化文字（灰）
+    gold: '#D4AF37',        // 金色文字
+  },
+
+  // 边框颜色
+  border: {
+    default: 'rgba(255, 255, 255, 0.1)',
+    gold: 'rgba(212, 175, 55, 0.3)',
+    goldGlow: 'rgba(212, 175, 55, 0.5)',
+  },
+
+  // 状态颜色
+  status: {
+    active: '#00ff88',      // 激活（绿色）
+    inactive: '#ff4444',    // 未激活（红色）
+    warning: '#ff9900',     // 警告（橙色）
+  },
+};
--- a/src/views/Pricing/content.tsx
+++ b/src/views/Pricing/content.tsx
@@ -0,0 +1,35 @@
+export const pricing = [
+    {
+        title: "STARTER",
+        price: 99,
+        features: [
+            "1 Active Bot",
+            "1,000 Conversations per month",
+            "Web & WhatsApp Integration",
+            "Basic Dashboard & Chat Reports",
+            "Email Support",
+        ],
+    },
+    {
+        title: "PRO",
+        price: 149,
+        features: [
+            "Up to 5 Active Bots",
+            "10,000 Conversations per month",
+            "Multi-Channel (Web, WhatsApp, IG, Telegram)",
+            "Custom Workflows & Automation",
+            "Real-Time Reports & Zapier Integration",
+        ],
+    },
+    {
+        title: "ENTERPRISE",
+        price: 199,
+        features: [
+            "Unlimited Bots & Chats",
+            "Role-Based Access & Team Management",
+            "Integration to CRM & Custom APIs",
+            "Advanced AI Training (LLM/NLP)",
+            "Dedicated Onboarding Team",
+        ],
+    },
+];
--- a/src/views/Pricing/index.tsx
+++ b/src/views/Pricing/index.tsx
@@ -0,0 +1,129 @@
+import { motion } from "framer-motion";
+import Button from "@/components/Button2";
+
+import { pricing } from "./content";
+
+const Pricing = () => (
+    <div
+        id="pricing"
+        className="pt-34.5 pb-25 max-2xl:pt-25 max-lg:py-20 max-md:py-15"
+    >
+        <div className="center">
+            <motion.div
+                className="max-w-175 mx-auto mb-17.5 text-center max-xl:mb-14 max-md:mb-8"
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                transition={{ delay: 0.2, duration: 0.7 }}
+                viewport={{ amount: 0.7 }}
+            >
+                <div className="label mb-3 max-md:mb-1.5">Pricing</div>
+                <div className="bg-radial-white-2 bg-clip-text text-transparent text-title-1 max-lg:text-title-2 max-md:text-title-1-mobile">
+                    Start Automation Today
+                </div>
+            </motion.div>
+            <motion.div
+                className="flex gap-4 max-lg:-mx-10 max-lg:px-10 max-lg:overflow-x-auto max-lg:scrollbar-none max-md:-mx-5 max-md:px-5"
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                transition={{ delay: 0.2, duration: 0.7 }}
+                viewport={{ amount: 0.35 }}
+            >
+                {pricing.map((item, index) => (
+                    <div
+                        className={`relative flex flex-col flex-1 rounded-[1.25rem] overflow-hidden after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-lg:shrink-0 max-lg:flex-auto max-lg:w-84 ${
+                            item.title === "PRO"
+                                ? "shadow-2 before:absolute before:-top-20 before:left-1/2 before:z-1 before:-translate-x-1/2 before:w-65 before:h-57 before:bg-green/10 before:rounded-full before:blur-[3.375rem]"
+                                : "shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset]"
+                        }`}
+                        key={index}
+                    >
+                        {item.title === "PRO" && (
+                            <div className="absolute -top-36 left-13 w-105 mask-radial-at-center mask-radial-from-20% mask-radial-to-52%">
+                                <video
+                                    className="w-full"
+                                    src="/videos/video-1.mp4"
+                                    autoPlay
+                                    loop
+                                    muted
+                                    playsInline
+                                />
+                            </div>
+                        )}
+                        <div
+                            className={`relative z-2 pt-8 px-8.5 pb-10 text-title-4 max-md:text-title-5 ${
+                                item.title === "PRO"
+                                    ? "bg-[#175673]/20 rounded-t-[1.25rem] text-green"
+                                    : "text-white"
+                            }`}
+                        >
+                            {item.title}
+                        </div>
+                        <div
+                            className={`relative z-3 flex flex-col grow -mt-5 p-3.5 pb-8.25 rounded-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none ${
+                                item.title === "PRO"
+                                    ? "backdrop-blur-[2rem] shadow-2 bg-white/7"
+                                    : "backdrop-blur-[1.25rem] bg-white/1"
+                            }`}
+                        >
+                            <div
+                                className={`relative mb-8 p-5 rounded-[0.8125rem] backdrop-blur-[1.25rem] shadow-2 after:absolute after:inset-0 after:border after:border-line after:rounded-[0.8125rem] after:pointer-events-none ${
+                                    item.title === "PRO"
+                                        ? "bg-line"
+                                        : "bg-white/2"
+                                }`}
+                            >
+                                <div className="flex items-end gap-3 mb-4">
+                                    <div className="bg-radial-white-2 bg-clip-text text-transparent text-title-1 leading-[3.1rem] max-xl:text-title-2 max-xl:leading-[2.4rem]">
+                                        ${item.price}
+                                    </div>
+                                    <div className="text-title-5">/Month</div>
+                                </div>
+                                <Button
+                                    className={`w-full bg-line ${
+                                        item.title !== "PRO"
+                                            ? "!text-description hover:!text-white"
+                                            : ""
+                                    }`}
+                                    isPrimary={item.title === "PRO"}
+                                    isSecondary={item.title !== "PRO"}
+                                >
+                                    {item.title === "STARTER"
+                                        ? "Start with Beginner"
+                                        : item.title === "PRO"
+                                        ? "Choose Pro Plan"
+                                        : "Contact for Enterprise"}
+                                </Button>
+                            </div>
+                            <div className="flex flex-col gap-6.5 px-3.5 max-xl:px-0 max-xl:gap-5 max-md:px-3.5">
+                                {item.features.map((feature, index) => (
+                                    <div
+                                        className="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile"
+                                        key={index}
+                                    >
+                                        <div className="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
+                                            <svg
+                                                className="size-5 fill-black"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                width="20"
+                                                height="20"
+                                                viewBox="0 0 20 20"
+                                            >
+                                                <path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
+                                            </svg>
+                                        </div>
+                                        {feature}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </motion.div>
+            <div className="mt-13.5 text-center max-md:mt-8 max-md:text-title-3-mobile">
+                Free 7 Day Trial
+            </div>
+        </div>
+    </div>
+);
+
+export default Pricing;