nsgm-cli 2.1.14 → 2.1.15

package/next-i18next.config.js

@@ -0,0 +1,18 @@
+/**
+ * @type {import('next-i18next').UserConfig}
+ */
+module.exports = {
+  i18n: {
+    defaultLocale: 'zh-CN',
+    locales: ['zh-CN', 'en-US', 'ja-JP'],
+    localeDetection: false, // 禁用自动语言检测
+  },
+  localePath: './public/locales',
+  /** To avoid issues when deploying to some platforms, we can configure the cache */
+  saveMissing: false,
+  strictMode: true,
+  serializeConfig: false,
+  react: {
+    useSuspense: false,
+  },
+}

package/next.config.js

@@ -4,6 +4,7 @@
 const { PHASE_DEVELOPMENT_SERVER, PHASE_EXPORT } = require('next/constants')
 const fs = require('fs')
 const path = require('path')
+const { i18n } = require('./next-i18next.config')
 
 module.exports = (phase, defaultConfig, options) => {
   let projectConfig = null
@@ -38,10 +39,11 @@ module.exports = (phase, defaultConfig, options) => {
   if (phase === PHASE_DEVELOPMENT_SERVER) {
     prefix = ''
   }
-  
+
   let configObj = {
     // target: 'serverless',
     // crossOrign: 'anonymous',
+    i18n,
     serverRuntimeConfig: {},
     publicRuntimeConfig: {
       version,
@@ -51,22 +53,32 @@ module.exports = (phase, defaultConfig, options) => {
       port,
       env,
       phase,
-      isExport: (phase === PHASE_EXPORT)
+      isExport: phase === PHASE_EXPORT,
     },
-    transpilePackages: ["antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table"],
+    transpilePackages: [
+      'antd',
+      '@ant-design',
+      'rc-util',
+      'rc-pagination',
+      'rc-picker',
+      'rc-notification',
+      'rc-tooltip',
+      'rc-tree',
+      'rc-table',
+    ],
     // Bundle 优化配置
     experimental: {
       optimizeCss: true, // 启用 CSS 优化（已安装 critters 依赖）
-      esmExternals: true // 支持 ESM 外部依赖
+      esmExternals: true, // 支持 ESM 外部依赖
     },
     compiler: {
       removeConsole: phase !== PHASE_DEVELOPMENT_SERVER,
-      styledComponents: true
+      styledComponents: true,
     },
     ...(phase === PHASE_DEVELOPMENT_SERVER && {
       devIndicators: {
-        position: 'bottom-right'
-      }
+        position: 'bottom-right',
+      },
     }),
     allowedDevOrigins: [
       'http://127.0.0.1:8080',
@@ -76,9 +88,39 @@ module.exports = (phase, defaultConfig, options) => {
       '127.0.0.1:8080',
       'localhost:8080',
       '127.0.0.1',
-      'localhost'
+      'localhost',
     ],
     webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+      // 抑制服务端渲染时的 useLayoutEffect 警告
+      if (dev && isServer) {
+        const originalWarn = console.warn
+        const originalError = console.error
+
+        console.warn = (...args) => {
+          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'))
+          ) {
+            return
+          }
+          originalWarn.apply(console, args)
+        }
+
+        console.error = (...args) => {
+          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'))
+          ) {
+            return
+          }
+          originalError.apply(console, args)
+        }
+      }
+
       // 启用压缩
       if (!dev && !isServer) {
         config.optimization = {
@@ -134,10 +176,7 @@ module.exports = (phase, defaultConfig, options) => {
       }
 
       // 支持 TypeScript 路径映射
-      config.resolve.modules = [
-        path.resolve(__dirname, 'client'),
-        'node_modules'
-      ]
+      config.resolve.modules = [path.resolve(__dirname, 'client'), 'node_modules']
 
       return config
     },
@@ -164,14 +203,14 @@ module.exports = (phase, defaultConfig, options) => {
         return [
           {
             source: prefix === '' ? '/' : prefix,
-            destination: '/'
+            destination: '/',
           },
           {
             source: prefix + '/:slug*',
-            destination: '/:slug*'
-          }
+            destination: '/:slug*',
+          },
         ]
-      }
+      },
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsgm-cli",
-  "version": "2.1.14",
+  "version": "2.1.15",
   "description": "A CLI tool to run Next/Style-components and Graphql/Mysql fullstack project",
   "main": "index.js",
   "scripts": {
@@ -68,9 +68,11 @@
     "lib/*",
     "public/*",
     "scripts/*",
+    "types/*",
     "*.config.js",
     ".babelrc",
-    "next-env.d.ts"
+    "next-env.d.ts",
+    "next-i18next.config.js"
   ],
   "homepage": "https://github.com/erishen/nsgm#readme",
   "dependencies": {
@@ -79,6 +81,9 @@
     "@types/bcrypt": "6.0.0",
     "@types/express-session": "1.18.2",
     "antd": "5.26.6",
+    "next-i18next": "15.3.0",
+    "react-i18next": "15.2.0",
+    "i18next": "24.1.0",
     "axios": "1.11.0",
     "bcrypt": "6.0.0",
     "body-parser": "2.2.0",

package/pages/_app.tsx

@@ -1,11 +1,21 @@
+// 必须在所有其他导入之前执行
+import '@/utils/suppressWarnings'
+
 import React, { useEffect, useState } from 'react'
 import { Provider } from 'react-redux'
-import { ThemeProvider } from 'styled-components'
+import { Spin } from 'antd'
+import { appWithTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
 import { useStore } from '@/redux/store'
-import { GlobalStyle, Loading } from '@/styled/common'
+import { Loading } from '@/styled/common'
 import LayoutComponent from '@/layout'
+import ClientProviders from '@/components/ClientProviders'
+import SuppressHydrationWarnings from '@/components/SuppressHydrationWarnings'
+import SSRSafeAntdProvider from '@/components/SSRSafeAntdProvider'
 import { login } from '@/utils/sso'
-import { Spin } from 'antd'
+import { getAntdLocale } from '@/utils/i18n'
+import { navigateToLogin } from '@/utils/navigation'
+import nextI18NextConfig from '../next-i18next.config.js'
 import 'antd/dist/reset.css'
 
 const theme = {
@@ -16,16 +26,53 @@ const theme = {
 
 const App = ({ Component, pageProps }) => {
   const store = useStore(pageProps.initialReduxState)
+  const router = useRouter()
   const [ssoUser, setSsoUser] = useState(null)
   const [pageLoad, setPageLoad] = useState(false)
   const [loginChecked, setLoginChecked] = useState(false)
+  const [mounted, setMounted] = useState(false)
+  const [currentLocale, setCurrentLocale] = useState('zh-CN')
+
+  // 检查是否为特殊页面（登录页、错误页）
+  // 避免在服务器端访问 router.pathname
+  const isSpecialPage =
+    Component.displayName === 'ErrorPage' ||
+    Component.name === 'ErrorPage' ||
+    Component.displayName === 'LoginPage' ||
+    Component.name === 'LoginPage'
+
+  // Get Antd locale based on current locale
+  const antdLocale = getAntdLocale(currentLocale)
 
   useEffect(() => {
-    // 检查当前路径是否为登录页
+    setMounted(true)
+    // 只在客户端设置当前语言
+    if (typeof window !== 'undefined') {
+      const locale = router.locale || 'zh-CN'
+      setCurrentLocale(locale)
+    }
+  }, [router.locale])
+
+  useEffect(() => {
+    if (!mounted) return
+
+    // 对于特殊页面，跳过登录检查
+    if (isSpecialPage) {
+      setLoginChecked(true)
+      setPageLoad(true)
+      return
+    }
+
+    // 检查当前路径是否为登录页或错误页
     const isLoginPage = typeof window !== 'undefined' && window.location.pathname === '/login'
+    const isErrorPage =
+      typeof window !== 'undefined' &&
+      (window.location.pathname === '/404' ||
+        window.location.pathname === '/500' ||
+        window.location.pathname === '/_error')
 
-    // 如果是登录页，直接设置加载完成
-    if (isLoginPage) {
+    // 如果是登录页或错误页，直接设置加载完成，不进行登录检查
+    if (isLoginPage || isErrorPage) {
       setLoginChecked(true)
       setPageLoad(true)
       return
@@ -34,9 +81,9 @@ const App = ({ Component, pageProps }) => {
     // 检查是否有登录凭证
     const hasLoginCookie = typeof window !== 'undefined' && document.cookie.includes('_cas_nsgm')
 
-    // 如果没有登录凭证，直接跳转到登录页面
+    // 如果没有登录凭证，直接跳转到登录页面（保持当前语言）
     if (!hasLoginCookie && typeof window !== 'undefined') {
-      window.location.href = `${window.location.origin}/login`
+      navigateToLogin(router)
       return
     }
 
@@ -51,40 +98,42 @@ const App = ({ Component, pageProps }) => {
     setTimeout(() => {
       setPageLoad(true)
     }, 100)
-  }, [])
+  }, [mounted, isSpecialPage])
 
   return (
     <>
-      <GlobalStyle whiteColor={true} />
-      <ThemeProvider theme={theme}>
-        <Provider store={store}>
-          {!loginChecked ? (
-            <Loading>
-              <Spin size="large" />
-            </Loading>
-          ) : pageLoad ? (
-            ssoUser ? (
-              <LayoutComponent user={ssoUser}>
+      <SuppressHydrationWarnings />
+      <SSRSafeAntdProvider locale={antdLocale}>
+        <ClientProviders theme={theme} whiteColor={true}>
+          <Provider store={store}>
+            {isSpecialPage ? (
+              // 特殊页面（错误页、登录页）直接渲染，不使用 Layout
+              <Component {...pageProps} />
+            ) : !loginChecked ? (
+              <Loading>
+                <Spin size="large" />
+              </Loading>
+            ) : pageLoad ? (
+              ssoUser ? (
+                <LayoutComponent user={ssoUser}>
+                  <Component {...pageProps} />
+                </LayoutComponent>
+              ) : (
                 <Component {...pageProps} />
-              </LayoutComponent>
+              )
             ) : (
-              <Component {...pageProps} />
-            )
-          ) : (
-            <Loading>
-              <Spin size="large" />
-            </Loading>
-          )}
-        </Provider>
-      </ThemeProvider>
+              <Loading>
+                <Spin size="large" />
+              </Loading>
+            )}
+          </Provider>
+        </ClientProviders>
+      </SSRSafeAntdProvider>
     </>
   )
 }
 
-App.getInitialProps = async ({ Component, ctx }) => {
-  return {
-    pageProps: await Component?.getInitialProps(ctx),
-  }
-}
+// 移除 getInitialProps 以启用静态优化
+// 如果需要页面级别的数据获取，请在各个页面中使用 getStaticProps 或 getServerSideProps
 
-export default App
+export default appWithTranslation(App, nextI18NextConfig)

package/pages/_document.tsx

@@ -2,9 +2,12 @@ import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/do
 import React from 'react'
 import { ServerStyleSheet } from 'styled-components'
 
-const MyDocument = () => {
+const MyDocument = (props) => {
+  // 从 props 中获取语言信息，如果没有则默认为 zh-CN
+  const locale = props.locale || 'zh-CN'
+
   return (
-    <Html>
+    <Html lang={locale}>
       <title>NSGM CLI</title>
       <meta
         name="viewport"
@@ -44,6 +47,39 @@ const MyDocument = () => {
             -moz-osx-font-smoothing: grayscale;
           }
         `}</style>
+
+        {/* 抑制服务端渲染的 useLayoutEffect 警告 */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if (typeof window === 'undefined') {
+                global.window = {};
+              }
+              
+              // 在服务端抑制 useLayoutEffect 警告
+              if (typeof console !== 'undefined' && process.env.NODE_ENV === 'development') {
+                const originalError = console.error;
+                const originalWarn = console.warn;
+                
+                console.error = function(...args) {
+                  const message = args[0];
+                  if (typeof message === 'string' && message.includes('useLayoutEffect does nothing on the server')) {
+                    return;
+                  }
+                  originalError.apply(console, args);
+                };
+                
+                console.warn = function(...args) {
+                  const message = args[0];
+                  if (typeof message === 'string' && message.includes('useLayoutEffect does nothing on the server')) {
+                    return;
+                  }
+                  originalWarn.apply(console, args);
+                };
+              }
+            `,
+          }}
+        />
       </Head>
       <body>
         <Main />
@@ -69,6 +105,7 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
 
     return {
       ...initialProps,
+      locale: ctx.locale || 'zh-CN',
       styles: [initialProps.styles, sheet.getStyleElement()],
     }
   } finally {

package/pages/_error.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Result, Button } from 'antd'
+import { NextPageContext } from 'next'
+
+interface ErrorProps {
+  statusCode?: number
+}
+
+function ErrorPage({ statusCode }: ErrorProps) {
+  const getErrorMessage = () => {
+    if (statusCode === 404) {
+      return '页面未找到'
+    } else if (statusCode === 500) {
+      return '服务器错误'
+    }
+    return '发生了未知错误'
+  }
+
+  const getErrorTitle = () => {
+    if (statusCode === 404) {
+      return '404'
+    } else if (statusCode === 500) {
+      return '500'
+    }
+    return '错误'
+  }
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '20px',
+      }}
+    >
+      <Result
+        status={statusCode === 404 ? '404' : '500'}
+        title={getErrorTitle()}
+        subTitle={getErrorMessage()}
+        extra={
+          <Button
+            type="primary"
+            onClick={() => {
+              if (typeof window !== 'undefined') {
+                window.location.href = '/'
+              }
+            }}
+          >
+            返回首页
+          </Button>
+        }
+      />
+    </div>
+  )
+}
+
+ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode }
+}
+
+ErrorPage.displayName = 'ErrorPage'
+
+export default ErrorPage

package/pages/index.tsx

@@ -3,14 +3,22 @@ import { Container } from '../client/styled/common'
 import React from 'react'
 import { Card, Typography, Divider, Row, Col, Tag } from 'antd'
 import { CodeOutlined, BookOutlined, DatabaseOutlined, SettingOutlined } from '@ant-design/icons'
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 const { Title, Paragraph, Text } = Typography
 
 const Page = () => {
+  const { t } = useTranslation(['common', 'home'])
+
   return (
     <Container>
       <Typography style={{ padding: '24px' }}>
-        <Title level={1}>NSGM CLI</Title>
+        <Row justify="space-between" align="middle" style={{ marginBottom: '24px' }}>
+          <Col>
+            <Title level={1}>{t('home:page.title')}</Title>
+          </Col>
+        </Row>
 
         <Paragraph>
           <Row gutter={[16, 16]}>
@@ -28,7 +36,7 @@ const Page = () => {
             </Col>
           </Row>
         </Paragraph>
-        <Paragraph>全栈架构，代码模板生成，快速开发</Paragraph>
+        <Paragraph>{t('home:page.description')}</Paragraph>
 
         <Card style={{ marginBottom: '24px' }}>
           <Row gutter={[24, 16]}>
@@ -37,11 +45,11 @@ const Page = () => {
                 type="inner"
                 title={
                   <>
-                    <DatabaseOutlined /> 数据库配置
+                    <DatabaseOutlined /> {t('home:page.sections.database.title')}
                   </>
                 }
               >
-                数据库采用 Mysql, 配置见 mysql.config.js
+                {t('home:page.sections.database.description')}
               </Card>
             </Col>
             <Col xs={24} md={8}>
@@ -49,11 +57,11 @@ const Page = () => {
                 type="inner"
                 title={
                   <>
-                    <SettingOutlined /> 项目配置
+                    <SettingOutlined /> {t('home:page.sections.project.title')}
                   </>
                 }
               >
-                项目配置见 project.config.js
+                {t('home:page.sections.project.description')}
               </Card>
             </Col>
             <Col xs={24} md={8}>
@@ -61,66 +69,68 @@ const Page = () => {
                 type="inner"
                 title={
                   <>
-                    <CodeOutlined /> 框架配置
+                    <CodeOutlined /> {t('home:page.sections.framework.title')}
                   </>
                 }
               >
-                Next 框架配置见 next.config.js
+                {t('home:page.sections.framework.description')}
               </Card>
             </Col>
           </Row>
         </Card>
 
         <Title level={2}>
-          <BookOutlined /> 命令
+          <BookOutlined /> {t('home:page.commands.title')}
         </Title>
         <Divider />
 
         <Row gutter={[16, 16]}>
           <Col xs={24} md={8}>
             <Card hoverable>
-              <Title level={4}>项目管理</Title>
+              <Title level={4}>{t('home:page.commands.categories.projectManagement.title')}</Title>
               <ul>
                 <li>
-                  <Text strong>nsgm init</Text> - 初始化项目
+                  <Text strong>nsgm init</Text> - {t('home:page.commands.categories.projectManagement.items.init')}
                 </li>
                 <li>
-                  <Text strong>nsgm upgrade</Text> - 升级项目基础文件
+                  <Text strong>nsgm upgrade</Text> -{' '}
+                  {t('home:page.commands.categories.projectManagement.items.upgrade')}
                 </li>
               </ul>
             </Card>
           </Col>
           <Col xs={24} md={8}>
             <Card hoverable>
-              <Title level={4}>模板操作</Title>
+              <Title level={4}>{t('home:page.commands.categories.templateOperations.title')}</Title>
               <ul>
                 <li>
-                  <Text strong>nsgm create</Text> - 创建模板页面
+                  <Text strong>nsgm create</Text> - {t('home:page.commands.categories.templateOperations.items.create')}
                 </li>
                 <li>
-                  <Text strong>nsgm delete</Text> - 删除模板页面
+                  <Text strong>nsgm delete</Text> - {t('home:page.commands.categories.templateOperations.items.delete')}
                 </li>
                 <li>
-                  <Text strong>nsgm deletedb</Text> - 删除模板页面及数据库表
+                  <Text strong>nsgm deletedb</Text> -{' '}
+                  {t('home:page.commands.categories.templateOperations.items.deletedb')}
                 </li>
               </ul>
             </Card>
           </Col>
           <Col xs={24} md={8}>
             <Card hoverable>
-              <Title level={4}>运行与构建</Title>
+              <Title level={4}>{t('home:page.commands.categories.runBuild.title')}</Title>
               <ul>
                 <li>
-                  <Text strong>nsgm dev</Text> - 开发模式
+                  <Text strong>nsgm dev</Text> - {t('home:page.commands.categories.runBuild.items.dev')}
                 </li>
                 <li>
-                  <Text strong>nsgm start</Text> - 生产模式
+                  <Text strong>nsgm start</Text> - {t('home:page.commands.categories.runBuild.items.start')}
                 </li>
                 <li>
-                  <Text strong>nsgm build</Text> - 编译
+                  <Text strong>nsgm build</Text> - {t('home:page.commands.categories.runBuild.items.build')}
                 </li>
                 <li>
-                  <Text strong>nsgm export</Text> - 导出静态页面
+                  <Text strong>nsgm export</Text> - {t('home:page.commands.categories.runBuild.items.export')}
                 </li>
               </ul>
             </Card>
@@ -128,21 +138,19 @@ const Page = () => {
         </Row>
 
         <Title level={2} style={{ marginTop: '24px' }}>
-          参数
+          {t('home:page.parameters.title')}
         </Title>
         <Divider />
         <Card>
           <ul>
             <li>
-              <Text strong>dictionary:</Text> 在 export/init 的时候使用, 默认 webapp, 譬如: nsgm export/init
-              dictionary=webapp 或者 nsgm export/init webapp
+              <Text strong>dictionary:</Text> {t('home:page.parameters.items.dictionary')}
             </li>
             <li>
-              <Text strong>controller:</Text> 在 create/delete 的时候使用， 必须有。譬如：nsgm create/delete math
+              <Text strong>controller:</Text> {t('home:page.parameters.items.controller')}
             </li>
             <li>
-              <Text strong>action:</Text> 在 create/delete 的时候使用， 默认 manage, 跟在 controller 后面， 譬如 nsgm
-              create/delete math test
+              <Text strong>action:</Text> {t('home:page.parameters.items.action')}
             </li>
           </ul>
         </Card>
@@ -151,8 +159,17 @@ const Page = () => {
   )
 }
 
-Page.getInitialProps = () => {
-  return {}
+export const getServerSideProps = async ({ locale }) => {
+  // 确保 locale 有默认值，避免 serverSideTranslations 报错
+  const currentLocale = locale || 'zh-CN'
+
+  return {
+    props: {
+      ...(await serverSideTranslations(currentLocale, ['common', 'home', 'layout'])),
+    },
+  }
 }
 
+Page.displayName = 'HomePage'
+
 export default Page