nsgm-cli 2.1.20 → 2.1.22

package/README.md

@@ -383,6 +383,8 @@ npm run export
 
 ### Production Deployment
 
+#### Local Deployment
+
 ```bash
 # Start production server
 npm start
@@ -391,6 +393,44 @@ npm start
 pm2 start npm --name "nsgm-app" -- start
 ```
 
+#### Vercel Deployment (Recommended)
+
+NSGM CLI 完全支持 Vercel 部署，包括自动化 CI/CD 流程。
+
+**快速开始：**
+
+1. 推送项目到 GitHub
+2. 访问 [Vercel Dashboard](https://vercel.com/dashboard)
+3. 导入 GitHub 仓库
+4. 配置环境变量（参考 `.env.vercel.example`）
+5. 点击 "Deploy"
+
+**详细指南：** 查看 [VERCEL_DEPLOYMENT.md](VERCEL_DEPLOYMENT.md)
+
+**特性：**
+
+- ✅ 自动 CI/CD 流程
+- ✅ 预览环境（每个 PR）
+- ✅ 自动 HTTPS
+- ✅ 全球 CDN
+- ✅ 无服务器函数
+- ✅ 一键回滚
+
+**环境变量配置：**
+
+```
+NODE_ENV=production
+LOGIN_USERNAME=admin
+LOGIN_PASSWORD_HASH=your_hash
+DATABASE_URL=mysql://...
+```
+
+**获取密码哈希：**
+
+```bash
+npm run generate-password yourPassword
+```
+
 ## 🤝 Contributing
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

package/client/components/Button.tsx

@@ -1,6 +1,4 @@
 // src/components/Button.js
-import React from 'react'
+const Button = ({ onClick, children }) => <button onClick={onClick}>{children}</button>;
 
-const Button = ({ onClick, children }) => <button onClick={onClick}>{children}</button>
-
-export default Button
+export default Button;

package/client/components/ClientProviders.tsx

@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { GlobalStyle } from '@/styled/common'
+import React, { useEffect, useState } from "react";
+import { ThemeProvider } from "styled-components";
+import { GlobalStyle } from "@/styled/common";
 
 interface ClientProvidersProps {
-  children: React.ReactNode
-  theme: any
-  whiteColor?: boolean
+  children: React.ReactNode;
+  theme: any;
+  whiteColor?: boolean;
 }
 
 const ClientProviders: React.FC<ClientProvidersProps> = ({ children, theme, whiteColor = true }) => {
-  const [isClient, setIsClient] = useState(false)
+  const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
     // 使用更安全的客户端检测
-    setIsClient(true)
-  }, [])
+    setIsClient(true);
+  }, []);
 
   // 在服务端渲染时，使用一个占位符来保持结构一致性
   // 但不渲染可能引起 useLayoutEffect 警告的组件
@@ -23,7 +23,7 @@ const ClientProviders: React.FC<ClientProvidersProps> = ({ children, theme, whit
       {isClient && <GlobalStyle whiteColor={whiteColor} />}
       {children}
     </ThemeProvider>
-  )
-}
+  );
+};
 
-export default ClientProviders
+export default ClientProviders;

package/client/components/LanguageSwitcher.tsx

@@ -1,40 +1,40 @@
-import React, { useEffect, useState } from 'react'
-import { Select } from 'antd'
-import { useRouter } from 'next/router'
-import { GlobalOutlined } from '@ant-design/icons'
+import React, { useEffect, useState } from "react";
+import { Select } from "antd";
+import { useRouter } from "next/router";
+import { GlobalOutlined } from "@ant-design/icons";
 
-const { Option } = Select
+const { Option } = Select;
 
 interface LanguageSwitcherProps {
-  style?: React.CSSProperties
-  size?: 'small' | 'middle' | 'large'
+  style?: React.CSSProperties;
+  size?: "small" | "middle" | "large";
 }
 
-const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ style, size = 'middle' }) => {
-  const router = useRouter()
-  const [mounted, setMounted] = useState(false)
-  const [currentLocale, setCurrentLocale] = useState('zh-CN')
+const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ style, size = "middle" }) => {
+  const router = useRouter();
+  const [mounted, setMounted] = useState(false);
+  const [currentLocale, setCurrentLocale] = useState("zh-CN");
 
   useEffect(() => {
-    setMounted(true)
+    setMounted(true);
     // 只在客户端获取当前语言
-    if (typeof window !== 'undefined' && router.locale) {
-      setCurrentLocale(router.locale)
+    if (typeof window !== "undefined" && router.locale) {
+      setCurrentLocale(router.locale);
     }
-  }, [router.locale])
+  }, [router.locale]);
 
   const languages = [
-    { code: 'zh-CN', name: '中文', flag: '🇨🇳' },
-    { code: 'en-US', name: 'English', flag: '🇺🇸' },
-    { code: 'ja-JP', name: '日本語', flag: '🇯🇵' },
-  ]
+    { code: "zh-CN", name: "中文", flag: "🇨🇳" },
+    { code: "en-US", name: "English", flag: "🇺🇸" },
+    { code: "ja-JP", name: "日本語", flag: "🇯🇵" },
+  ];
 
   const handleLanguageChange = (locale: string) => {
-    if (mounted && typeof window !== 'undefined') {
-      const { pathname, asPath, query } = router
-      router.push({ pathname, query }, asPath, { locale })
+    if (mounted && typeof window !== "undefined") {
+      const { pathname, asPath, query } = router;
+      router.push({ pathname, query }, asPath, { locale });
     }
-  }
+  };
 
   return (
     <Select
@@ -53,7 +53,7 @@ const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ style, size = 'midd
         </Option>
       ))}
     </Select>
-  )
-}
+  );
+};
 
-export default LanguageSwitcher
+export default LanguageSwitcher;

package/client/components/SSRSafeAntdProvider.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import { ConfigProvider } from 'antd'
+import React from "react";
+import { ConfigProvider } from "antd";
 
 interface SSRSafeAntdProviderProps {
-  children: React.ReactNode
-  locale?: any
+  children: React.ReactNode;
+  locale?: any;
 }
 
 const SSRSafeAntdProvider: React.FC<SSRSafeAntdProviderProps> = ({ children, locale }) => {
@@ -18,7 +18,7 @@ const SSRSafeAntdProvider: React.FC<SSRSafeAntdProviderProps> = ({ children, loc
     >
       {children}
     </ConfigProvider>
-  )
-}
+  );
+};
 
-export default SSRSafeAntdProvider
+export default SSRSafeAntdProvider;

package/client/components/SuppressHydrationWarnings.tsx

@@ -1,55 +1,55 @@
-import { useEffect } from 'react'
+import { useEffect } from "react";
 
 // 全局抑制 useLayoutEffect 警告的函数
 const suppressUseLayoutEffectWarnings = () => {
-  if (typeof window === 'undefined' && process.env.NODE_ENV === 'development') {
-    const originalError = console.error
-    const originalWarn = console.warn
+  if (typeof window === "undefined" && process.env.NODE_ENV === "development") {
+    const originalError = console.error;
+    const originalWarn = console.warn;
 
     console.error = (...args) => {
-      const errorMessage = args[0]
+      const errorMessage = args[0];
       if (
-        typeof errorMessage === 'string' &&
-        (errorMessage.includes('useLayoutEffect does nothing on the server') ||
-          errorMessage.includes('Warning: useLayoutEffect does nothing on the server'))
+        typeof errorMessage === "string" &&
+        (errorMessage.includes("useLayoutEffect does nothing on the server") ||
+          errorMessage.includes("Warning: useLayoutEffect does nothing on the server"))
       ) {
-        return
+        return;
       }
-      originalError.apply(console, args)
-    }
+      originalError.apply(console, args);
+    };
 
     console.warn = (...args) => {
-      const warnMessage = args[0]
+      const warnMessage = args[0];
       if (
-        typeof warnMessage === 'string' &&
-        (warnMessage.includes('useLayoutEffect does nothing on the server') ||
-          warnMessage.includes('Warning: useLayoutEffect does nothing on the server'))
+        typeof warnMessage === "string" &&
+        (warnMessage.includes("useLayoutEffect does nothing on the server") ||
+          warnMessage.includes("Warning: useLayoutEffect does nothing on the server"))
       ) {
-        return
+        return;
       }
-      originalWarn.apply(console, args)
-    }
+      originalWarn.apply(console, args);
+    };
 
     // 返回清理函数
     return () => {
-      console.error = originalError
-      console.warn = originalWarn
-    }
+      console.error = originalError;
+      console.warn = originalWarn;
+    };
   }
-  return undefined
-}
+  return undefined;
+};
 
 // 在模块加载时立即执行
-suppressUseLayoutEffectWarnings()
+suppressUseLayoutEffectWarnings();
 
 const SuppressHydrationWarnings = () => {
   useEffect(() => {
     // 在客户端也抑制这些警告（以防万一）
-    const cleanup = suppressUseLayoutEffectWarnings()
-    return cleanup
-  }, [])
+    const cleanup = suppressUseLayoutEffectWarnings();
+    return cleanup;
+  }, []);
 
-  return null
-}
+  return null;
+};
 
-export default SuppressHydrationWarnings
+export default SuppressHydrationWarnings;

package/client/components/__tests__/Button.test.tsx

@@ -1,15 +1,15 @@
 // src/components/Button.test.js
-import { render, screen, fireEvent } from '@testing-library/react'
-import Button from '../Button'
+import { render, screen, fireEvent } from "@testing-library/react";
+import Button from "../Button";
 
-test('renders button with text', () => {
-  render(<Button>Click me</Button>)
-  expect(screen.getByText('Click me')).toBeInTheDocument()
-})
+test("renders button with text", () => {
+  render(<Button>Click me</Button>);
+  expect(screen.getByText("Click me")).toBeInTheDocument();
+});
 
-test('calls onClick when clicked', () => {
-  const handleClick = jest.fn()
-  render(<Button onClick={handleClick}>Click me</Button>)
-  fireEvent.click(screen.getByText('Click me'))
-  expect(handleClick).toHaveBeenCalledTimes(1)
-})
+test("calls onClick when clicked", () => {
+  const handleClick = jest.fn();
+  render(<Button onClick={handleClick}>Click me</Button>);
+  fireEvent.click(screen.getByText("Click me"));
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});