finstep-template-cli 1.0.1

package/template/src/components/stats-section.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+
+function CountUp({ end, duration = 2000 }: { end: number; duration?: number }) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    let startTime: number;
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const progress = timestamp - startTime;
+      const percentage = Math.min(progress / duration, 1);
+      
+      setCount(Math.floor(end * percentage));
+      
+      if (percentage < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  }, [end, duration]);
+
+  return <span>{count}</span>;
+}
+
+export default function StatsSection() {
+  return (
+    <section className="bg-slate-950 py-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center"
+          >
+            <div className="text-4xl font-bold text-white mb-2">
+              <CountUp end={500} />+
+            </div>
+            <div className="text-slate-400">合作企业</div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            className="text-center"
+          >
+            <div className="text-4xl font-bold text-white mb-2">
+              <CountUp end={50} />+
+            </div>
+            <div className="text-slate-400">AI产品</div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-center"
+          >
+            <div className="text-4xl font-bold text-white mb-2">
+              <CountUp end={99} />.9%
+            </div>
+            <div className="text-slate-400">准确率</div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="text-center"
+          >
+            <div className="text-4xl font-bold text-white mb-2">
+              <CountUp end={24} />/7
+            </div>
+            <div className="text-slate-400">技术支持</div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/components/trusted-by.tsx

@@ -0,0 +1,53 @@
+// AI生成的代码 - 合作伙伴展示组件
+
+import { motion } from "framer-motion";
+
+export default function TrustedBy() {
+  const companies = [
+    { name: "国泰海通", logo: "ri-money-dollar-circle-line" },
+    { name: "华锐技术", logo: "ri-shield-line" },
+    { name: "国金证券", logo: "ri-money-dollar-circle-line" },
+    { name: "东吴证券", logo: "ri-money-dollar-circle-line" },
+    { name: "上海银行", logo: "ri-bank-line" },
+  ];
+
+  return (
+    <section className="bg-slate-950 py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="text-center"
+        >
+          <p className="text-slate-400 text-sm font-medium mb-8 uppercase tracking-wider">
+            全球 500+ 金融机构的信赖选择
+          </p>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 items-center">
+            {companies.map((company, index) => (
+              <motion.div
+                key={company.name}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className="flex flex-col items-center group cursor-pointer"
+              >
+                <div className="w-16 h-16 bg-slate-800/50 border border-slate-700 rounded-xl flex items-center justify-center mb-3 group-hover:border-slate-600 group-hover:bg-slate-800 transition-all duration-200">
+                  <div className="w-8 h-8 flex items-center justify-center">
+                    <i
+                      className={`${company.logo} text-slate-400 group-hover:text-slate-300 text-2xl`}
+                    ></i>
+                  </div>
+                </div>
+                <span className="text-slate-500 text-sm font-medium group-hover:text-slate-400 transition-colors">
+                  {company.name}
+                </span>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

package/template/src/hooks/useGlobalLoading.ts

@@ -0,0 +1,57 @@
+// AI生成的代码 - 全局Loading自定义Hook
+import { useStore } from "@/stores/store-context";
+import { useCallback } from "react";
+
+export const useGlobalLoading = () => {
+  const { loadingStore } = useStore();
+
+  // AI生成的代码 - 显示loading的方法
+  const showLoading = useCallback(
+    (text?: string) => {
+      loadingStore.showLoading(text);
+    },
+    [loadingStore]
+  );
+
+  // AI生成的代码 - 隐藏loading的方法
+  const hideLoading = useCallback(() => {
+    loadingStore.hideLoading();
+  }, [loadingStore]);
+
+  // AI生成的代码 - 强制隐藏loading的方法
+  const forceHideLoading = useCallback(() => {
+    loadingStore.forceHideLoading();
+  }, [loadingStore]);
+
+  // AI生成的代码 - 设置loading文本的方法
+  const setLoadingText = useCallback(
+    (text: string) => {
+      loadingStore.setLoadingText(text);
+    },
+    [loadingStore]
+  );
+
+  // AI生成的代码 - 包装异步函数的方法
+  const withLoading = useCallback(
+    async <T>(asyncFn: () => Promise<T>, loadingText?: string): Promise<T> => {
+      showLoading(loadingText);
+      try {
+        const result = await asyncFn();
+        return result;
+      } finally {
+        hideLoading();
+      }
+    },
+    [showLoading, hideLoading]
+  );
+
+  return {
+    isLoading: loadingStore.isLoading,
+    loadingText: loadingStore.loadingText,
+    showLoading,
+    hideLoading,
+    forceHideLoading,
+    setLoadingText,
+    withLoading,
+  };
+};

package/template/src/index.css

@@ -0,0 +1,341 @@
+/* AI生成的代码 - 全局样式文件 */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.min.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Pacifico&display=swap');
+@import "tailwindcss";
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background-color: #0f172a;
+  color: #ffffff;
+}
+
+/* 自定义滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1e293b;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #475569;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+
+/* AI生成的代码 - 优化后的HeroSection动画关键帧，移除filter属性以提升性能 */
+@keyframes energyOrb1 {
+  0%, 100% { 
+    transform: translateY(0px) translateX(0px) scale(1); 
+    opacity: 0.3;
+  }
+  25% { 
+    transform: translateY(-30px) translateX(20px) scale(1.1); 
+    opacity: 0.5;
+  }
+  50% { 
+    transform: translateY(-15px) translateX(35px) scale(0.9); 
+    opacity: 0.4;
+  }
+  75% { 
+    transform: translateY(-45px) translateX(15px) scale(1.05); 
+    opacity: 0.6;
+  }
+}
+
+@keyframes energyOrb2 {
+  0%, 100% { 
+    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
+    opacity: 0.25;
+  }
+  33% { 
+    transform: translateY(-35px) translateX(-20px) rotate(90deg) scale(1.2); 
+    opacity: 0.4;
+  }
+  66% { 
+    transform: translateY(-20px) translateX(-40px) rotate(180deg) scale(0.85); 
+    opacity: 0.35;
+  }
+}
+
+@keyframes energyOrb3 {
+  0%, 100% { 
+    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
+    opacity: 0.2;
+  }
+  50% { 
+    transform: translateY(-50px) translateX(-25px) scale(1.3) rotate(120deg); 
+    opacity: 0.45;
+  }
+}
+
+@keyframes floatSmall {
+  0% { 
+    transform: translateY(100vh) translateX(0px) scale(0); 
+    opacity: 0; 
+  }
+  10% { 
+    opacity: 1; 
+    scale: 1;
+  }
+  90% { 
+    opacity: 1; 
+  }
+  100% { 
+    transform: translateY(-100px) translateX(20px) scale(0); 
+    opacity: 0; 
+  }
+}
+
+/* AI生成的代码 - 覆盖 Ant Design 下拉菜单背景色 */
+.ant-dropdown-menu.ant-dropdown-menu-root.ant-dropdown-menu-vertical.ant-dropdown-menu-light {
+  background: unset !important;
+}
+
+/* 兼容性样式 - 处理可能的 CSS-in-JS 类名 */
+.ant-dropdown-menu[class*="css-dev-only-do-not-override"] {
+  background: unset !important;
+}
+
+/* AI生成的代码 - 全局提示组件样式 */
+
+/* 全局消息容器样式 */
+.ant-message {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  z-index: 999999 !important;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  top: 30px !important;
+}
+
+/* 消息项基础样式 */
+.ant-message .ant-message-notice {
+  padding: 0;
+  margin-bottom: 12px;
+}
+
+.ant-message .ant-message-notice-content {
+  padding: 16px 24px !important;
+  border-radius: 16px !important;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
+  backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px !important;
+  min-width: 320px !important;
+  animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  background: rgba(30, 41, 59, 0.95) !important;
+  color: #ffffff !important;
+}
+
+/* 成功消息样式 */
+.ant-message-success .anticon {
+  color: #10b981;
+  font-size: 18px;
+  background: rgba(16, 185, 129, 0.15);
+  border-radius: 50%;
+  padding: 4px;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 错误消息样式 */
+.ant-message-error .anticon {
+  color: #ef4444;
+  font-size: 18px;
+  background: rgba(239, 68, 68, 0.15);
+  border-radius: 50%;
+  padding: 4px;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 警告消息样式 */
+.ant-message-warning .anticon {
+  color: #f59e0b;
+  font-size: 18px;
+  background: rgba(245, 158, 11, 0.15);
+  border-radius: 50%;
+  padding: 4px;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 信息消息样式 */
+.ant-message-info .anticon {
+  color: #3b82f6;
+  font-size: 18px;
+  background: rgba(59, 130, 246, 0.15);
+  border-radius: 50%;
+  padding: 4px;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 加载消息样式 */
+.ant-message-loading .anticon {
+  color: #6b7280;
+  font-size: 18px;
+  background: rgba(107, 114, 128, 0.15);
+  border-radius: 50%;
+  padding: 4px;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 加载动画 */
+.finstep-message-loading .anticon-loading {
+  animation: spin 1s linear infinite;
+}
+
+/* 悬停效果 */
+.ant-message .ant-message-notice-content:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* 关闭按钮样式 */
+.ant-message .ant-message-notice .ant-message-notice-close {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: color 0.2s ease;
+}
+
+.ant-message .ant-message-notice .ant-message-notice-close:hover {
+  color: #ffffff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .ant-message .ant-message-notice-content {
+    min-width: 280px;
+    max-width: calc(100vw - 32px);
+    padding: 14px 20px;
+    font-size: 13px;
+    border-radius: 14px;
+    gap: 10px;
+  }
+  
+  .ant-message {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+    width: auto !important;
+    margin: 0 16px !important;
+  }
+  
+  .ant-message-success .anticon,
+  .ant-message-error .anticon,
+  .ant-message-warning .anticon,
+  .ant-message-info .anticon,
+  .ant-message-loading .anticon {
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+  }
+}
+
+/* 动画定义 */
+@keyframes slideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+    filter: blur(4px);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translateY(-5px) scale(1.02);
+    filter: blur(1px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 暗色主题适配 */
+@media (prefers-color-scheme: dark) {
+  .ant-message .ant-message-notice-content {
+    border-color: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(15px);
+  }
+}
+
+/* 高对比度模式适配 */
+@media (prefers-contrast: high) {
+  .ant-message .ant-message-notice-content {
+    border-width: 2px;
+    font-weight: 600;
+  }
+}
+
+/* 减少动画模式适配 */
+@media (prefers-reduced-motion: reduce) {
+  .ant-message .ant-message-notice-content {
+    animation: none;
+  }
+  
+  .ant-message .ant-message-notice-content:hover {
+    transform: none;
+    transition: none;
+  }
+  
+  .ant-message-loading .anticon-loading {
+    animation: none;
+  }
+}

package/template/src/main.tsx

@@ -0,0 +1,30 @@
+// AI生成的代码 - 应用入口文件
+import { createRoot } from "react-dom/client";
+import { ConfigProvider, theme } from "antd";
+import zhCN from "antd/locale/zh_CN";
+// AI生成的代码 - 修正导入路径，导入全局状态管理的Provider组件
+import { StoreProvider } from "@/stores/store-context";
+import "./index.css";
+// AI生成的代码 - 导入组件库样式
+// import "finstep-b-components/dist/index.css";
+import App from "./App.tsx";
+
+// Antd主题配置
+const customTheme = {
+  token: {
+    colorPrimary: "#3b82f6",
+    colorBgBase: "#0f172a",
+    colorTextBase: "#ffffff",
+    colorBgContainer: "#1e293b",
+    colorBorder: "#334155",
+  },
+  algorithm: theme.darkAlgorithm,
+};
+
+createRoot(document.getElementById("root")!).render(
+  <StoreProvider>
+    <ConfigProvider theme={customTheme} locale={zhCN}>
+      <App />
+    </ConfigProvider>
+  </StoreProvider>
+);