nsgm-cli 2.1.14 → 2.1.16

package/README.md

@@ -31,22 +31,26 @@ NSGM CLI is a comprehensive full-stack development framework that combines the p
 ## 🎯 Key Features
 
 ### 🧙‍♂️ **Intelligent CLI Wizard**
+
 - **Smart Mode Detection**: Automatically switches between interactive and command-line modes
 - **Beginner-Friendly**: Step-by-step guided setup for newcomers
 - **Expert-Efficient**: Quick command-line shortcuts for experienced developers
 
 ### ⚡ **Rapid Development**
+
 - **Code Generation**: Automatic CRUD operations, API endpoints, and database schemas
 - **Hot Reload**: Instant development feedback
 - **Type Safety**: Full TypeScript support throughout the stack
 
 ### 🔒 **Production-Ready Security**
+
 - **CSRF Protection**: Built-in cross-site request forgery prevention
 - **Password Encryption**: bcrypt-based secure authentication
 - **Session Management**: Robust user session handling
 - **CSP Headers**: Content Security Policy implementation
 
 ### 🏗️ **Modern Tech Stack**
+
 - **Frontend**: Next.js 13+, React 18+, Styled-components, Redux Toolkit
 - **Backend**: Express.js, GraphQL, REST APIs
 - **Database**: MySQL with native drivers
@@ -87,6 +91,7 @@ nsgm init my-awesome-app
 ```
 
 The wizard will guide you through:
+
 - ✅ Project name and directory
 - ✅ Database configuration
 - ✅ Security settings
@@ -99,9 +104,15 @@ cd your-project-name
 
 # Copy environment template
 cp .env.example .env
+```
 
+**Default Login**: `admin/admin123`
+
+**To change password** (optional):
+
+```bash
 # Generate secure password hash
-npm run generate-password your-secure-password
+npm run generate-password yourNewPassword
 
 # Edit .env file with generated hash
 nano .env
@@ -118,23 +129,24 @@ npm run dev
 ```
 
 Your application will be available at `http://localhost:3000` with:
+
 - 🎛️ Admin dashboard with CRUD interface
 - 📊 Data import/export functionality
 - 🗑️ Batch operations support
-- 🔐 Secure login system
+- 🔐 Secure login system (Default: admin/admin123)
 
 ## 🛠️ CLI Commands
 
 ### Core Commands
 
-| Command | Description | Mode | Example |
-|---------|-------------|------|---------|
-| `nsgm init` | Initialize new project | Interactive/CLI | `nsgm init blog-app` |
-| `nsgm create` | Generate controller with CRUD | Interactive/CLI | `nsgm create user` |
-| `nsgm delete` | Remove controller and files | Interactive/CLI | `nsgm delete product` |
-| `nsgm dev` | Start development server | CLI | `nsgm dev` |
-| `nsgm build` | Build for production | CLI | `nsgm build` |
-| `nsgm start` | Start production server | CLI | `nsgm start` |
+| Command       | Description                   | Mode            | Example               |
+| ------------- | ----------------------------- | --------------- | --------------------- |
+| `nsgm init`   | Initialize new project        | Interactive/CLI | `nsgm init blog-app`  |
+| `nsgm create` | Generate controller with CRUD | Interactive/CLI | `nsgm create user`    |
+| `nsgm delete` | Remove controller and files   | Interactive/CLI | `nsgm delete product` |
+| `nsgm dev`    | Start development server      | CLI             | `nsgm dev`            |
+| `nsgm build`  | Build for production          | CLI             | `nsgm build`          |
+| `nsgm start`  | Start production server       | CLI             | `nsgm start`          |
 
 ### Advanced Commands
 
@@ -157,6 +169,7 @@ npm run test:coverage        # Test coverage report
 Each controller created with `nsgm create` includes:
 
 ### 🔧 **Backend Components**
+
 - **GraphQL Schema**: Typed queries and mutations
 - **GraphQL Resolvers**: Business logic implementation
 - **REST API Endpoints**: RESTful service layer
@@ -164,6 +177,7 @@ Each controller created with `nsgm create` includes:
 - **Data Validation**: Input sanitization and validation
 
 ### 🎯 **Frontend Components**
+
 - **React Components**: Modern functional components with hooks
 - **Styled Components**: CSS-in-JS styling
 - **Redux Integration**: State management
@@ -171,6 +185,7 @@ Each controller created with `nsgm create` includes:
 - **Data Tables**: Sortable, filterable data grids
 
 ### 📊 **CRUD Operations**
+
 - **Create**: Add new records with validation
 - **Read**: List, search, and pagination
 - **Update**: Edit existing records
@@ -211,7 +226,7 @@ your-project/
 # .env file
 NODE_ENV=development
 LOGIN_USERNAME=admin
-LOGIN_PASSWORD_HASH=your_generated_hash
+LOGIN_PASSWORD_HASH=your_generated_hash  # Default: admin123
 DATABASE_URL=mysql://user:password@localhost:3306/dbname
 
 # Optional
@@ -229,18 +244,22 @@ module.exports = {
     port: process.env.DB_PORT || 3306,
     user: process.env.DB_USER || 'root',
     password: process.env.DB_PASSWORD || '',
-    database: process.env.DB_NAME || 'nsgm_db'
-  }
+    database: process.env.DB_NAME || 'nsgm_db',
+  },
 }
 ```
 
 ## 🔒 Security Setup
 
-### Password Generation
+### Default Authentication
+
+**Default Login Credentials**: `admin/admin123`
+
+### Custom Password Setup (Optional)
 
 ```bash
-# Generate secure hash
-npm run generate-password your-secure-password
+# Generate secure hash for custom password
+npm run generate-password yourNewPassword
 
 # Add to .env file
 LOGIN_PASSWORD_HASH=your_generated_hash_here
@@ -255,13 +274,15 @@ NSGM CLI includes built-in CSRF protection:
 app.use(csrfProtection)
 
 // Custom CSP headers
-app.use(createCSPMiddleware({
-  directives: {
-    defaultSrc: ["'self'"],
-    styleSrc: ["'self'", "'unsafe-inline'"],
-    scriptSrc: ["'self'"]
-  }
-}))
+app.use(
+  createCSPMiddleware({
+    directives: {
+      defaultSrc: ["'self'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      scriptSrc: ["'self'"],
+    },
+  })
+)
 ```
 
 ## 🧪 Testing
@@ -312,7 +333,7 @@ router.get('/stats', (req, res) => {
   res.json({
     totalPosts: 42,
     totalUsers: 15,
-    lastUpdate: new Date()
+    lastUpdate: new Date(),
   })
 })
 
@@ -341,7 +362,7 @@ module.exports = {
       createdAt: Date!
       updatedAt: Date!
     }
-  `
+  `,
 }
 ```
 
@@ -403,6 +424,7 @@ npm run tsbuild
 ### Common Issues
 
 **Port already in use**
+
 ```bash
 # Kill process on port 3000
 lsof -ti:3000 | xargs kill -9
@@ -412,6 +434,7 @@ PORT=3001 npm run dev
 ```
 
 **Database connection failed**
+
 ```bash
 # Check MySQL service
 sudo systemctl status mysql
@@ -421,6 +444,7 @@ cat .env | grep DB_
 ```
 
 **Permission denied**
+
 ```bash
 # Fix npm permissions
 sudo chown -R $(whoami) ~/.npm
@@ -449,4 +473,3 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 [GitHub](https://github.com/erishen/nsgm) • [npm](https://www.npmjs.com/package/nsgm-cli) • [Issues](https://github.com/erishen/nsgm/issues)
 
 </div>
-

package/client/components/ClientProviders.tsx

@@ -0,0 +1,29 @@
+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
+}
+
+const ClientProviders: React.FC<ClientProvidersProps> = ({ children, theme, whiteColor = true }) => {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    // 使用更安全的客户端检测
+    setIsClient(true)
+  }, [])
+
+  // 在服务端渲染时，使用一个占位符来保持结构一致性
+  // 但不渲染可能引起 useLayoutEffect 警告的组件
+  return (
+    <ThemeProvider theme={theme}>
+      {isClient && <GlobalStyle whiteColor={whiteColor} />}
+      {children}
+    </ThemeProvider>
+  )
+}
+
+export default ClientProviders

package/client/components/LanguageSwitcher.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import { Select } from 'antd'
+import { useRouter } from 'next/router'
+import { GlobalOutlined } from '@ant-design/icons'
+
+const { Option } = Select
+
+interface LanguageSwitcherProps {
+  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')
+
+  useEffect(() => {
+    setMounted(true)
+    // 只在客户端获取当前语言
+    if (typeof window !== 'undefined' && router.locale) {
+      setCurrentLocale(router.locale)
+    }
+  }, [router.locale])
+
+  const languages = [
+    { 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 })
+    }
+  }
+
+  return (
+    <Select
+      value={currentLocale}
+      onChange={handleLanguageChange}
+      style={{ minWidth: 120, ...style }}
+      size={size}
+      suffixIcon={<GlobalOutlined />}
+      placeholder="Language"
+      disabled={!mounted}
+    >
+      {languages.map((language) => (
+        <Option key={language.code} value={language.code}>
+          <span style={{ marginRight: 8 }}>{language.flag}</span>
+          {language.name}
+        </Option>
+      ))}
+    </Select>
+  )
+}
+
+export default LanguageSwitcher

package/client/components/SSRSafeAntdProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { ConfigProvider } from 'antd'
+
+interface SSRSafeAntdProviderProps {
+  children: React.ReactNode
+  locale?: any
+}
+
+const SSRSafeAntdProvider: React.FC<SSRSafeAntdProviderProps> = ({ children, locale }) => {
+  // 在服务端渲染时，我们仍然使用 ConfigProvider，但使用简化的配置
+  return (
+    <ConfigProvider
+      locale={locale}
+      theme={{
+        // 确保服务端渲染的一致性
+        cssVar: false,
+      }}
+    >
+      {children}
+    </ConfigProvider>
+  )
+}
+
+export default SSRSafeAntdProvider

package/client/components/SuppressHydrationWarnings.tsx

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

package/client/layout/index.tsx

@@ -1,13 +1,23 @@
 import React, { useEffect, useState } from 'react'
-import { Layout, Menu, Breadcrumb, Image, Dropdown, Space, Tooltip } from 'antd'
-import { Container } from '@/styled/layout'
-import styled from 'styled-components'
+import { Layout, Menu, Dropdown, Space } from 'antd'
+import {
+  Container,
+  FlexLayout,
+  StyledSider,
+  SideMenu,
+  ContentLayout,
+  StyledHeader,
+  StyledBreadcrumb,
+  StyledContent,
+} from '@/styled/layout'
 import { useRouter } from 'next/router'
 import _ from 'lodash'
-import menuConfig from '@/utils/menu'
-import { logout } from '@/utils/sso'
+import menuConfig, { getMenuConfig } from '@/utils/menu'
 import getConfig from 'next/config'
-import { LogoutOutlined, SettingOutlined, BellOutlined, UserOutlined } from '@ant-design/icons'
+import { LogoutOutlined } from '@ant-design/icons'
+import LanguageSwitcher from '@/components/LanguageSwitcher'
+import { useTranslation } from 'next-i18next'
+import { navigateToLogin } from '@/utils/navigation'
 
 interface SubMenuItem {
   key: string
@@ -23,96 +33,10 @@ interface MenuItem {
   subMenus?: SubMenuItem[]
 }
 
-const { Header, Content, Sider } = Layout
-
 const nextConfig = getConfig()
 const { publicRuntimeConfig } = nextConfig
 const { prefix } = publicRuntimeConfig
 
-// styled-components
-const FlexLayout = styled(Layout)`
-  display: flex;
-  flex: 1;
-`
-const StyledSider = styled(Sider)`
-  display: flex;
-  flex-direction: column;
-  box-shadow: 2px 0 8px -4px rgba(0, 0, 0, 0.1);
-  z-index: 5;
-  position: relative;
-`
-
-const SideMenu = styled(Menu)`
-  height: 100%;
-  border-right: 0;
-  padding: 8px 0;
-`
-
-const ContentLayout = styled(Layout)`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  background: #f5f7fa;
-  position: relative;
-  z-index: 1;
-`
-const StyledHeader = styled(Header)`
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
-  z-index: 11;
-
-  .logo {
-    margin-right: 24px;
-  }
-
-  .main-menu {
-    flex: 1;
-  }
-
-  .user-actions {
-    display: flex;
-    align-items: center;
-
-    .action-icon {
-      font-size: 18px;
-      color: rgba(255, 255, 255, 0.85);
-      cursor: pointer;
-      padding: 0 8px;
-      transition: color 0.3s;
-
-      &:hover {
-        color: #fff;
-      }
-    }
-
-    .user-dropdown {
-      cursor: pointer;
-      padding: 0 8px;
-
-      .username {
-        color: rgba(255, 255, 255, 0.85);
-        margin-left: 8px;
-      }
-    }
-  }
-`
-const StyledBreadcrumb = styled(Breadcrumb)`
-  margin: 16px 24px;
-  font-size: 14px;
-`
-const StyledContent = styled(Content)`
-  margin: 0 24px 24px;
-  padding: 24px;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  min-height: calc(100vh - 180px);
-  position: relative;
-  z-index: 1;
-`
-
 const getLocationKey = () => {
   const result = {
     topMenu: '1',
@@ -169,7 +93,7 @@ const getLocationKey = () => {
 }
 
 const routerPush = (router: any, url: string) => {
-  if (router && url) {
+  if (router && url && typeof window !== 'undefined') {
     if (prefix && url.indexOf(prefix) === -1) {
       url = prefix + url
     }
@@ -178,10 +102,35 @@ const routerPush = (router: any, url: string) => {
 }
 
 const LayoutComponent = ({ user, children }) => {
+  const { t } = useTranslation(['layout', 'common'])
   const router = useRouter()
   const [topMenuKey, setTopMenuKey] = useState('1')
   const [sliderMenuKey, setSliderMenuKey] = useState('1')
   const [collapsed, setCollapsed] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // 使用翻译后的菜单配置
+  const translatedMenuConfig = getMenuConfig(t)
+
+  // 自定义退出登录函数，保持语言设置
+  const handleLogout = () => {
+    if (!mounted || typeof window === 'undefined') return
+
+    // 删除登录相关的 cookie
+    const deleteCookie = (name: string) => {
+      document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
+    }
+
+    deleteCookie('_cas_nsgm')
+    deleteCookie('_cas_nsgm_user')
+
+    // 跳转到登录页面，保持当前语言
+    navigateToLogin(router)
+  }
 
   useEffect(() => {
     const { topMenu, slideMenu } = getLocationKey()
@@ -192,7 +141,7 @@ const LayoutComponent = ({ user, children }) => {
   const menuItems: any = []
   const menuItemsVertical: any = []
 
-  _.each(menuConfig, (item) => {
+  _.each(translatedMenuConfig, (item) => {
     const { key, text, url, icon, subMenus } = item
 
     if (key && text && url) {
@@ -200,13 +149,15 @@ const LayoutComponent = ({ user, children }) => {
         label: text,
         key,
         onClick: () => {
-          routerPush(router, url)
-          setTopMenuKey(key)
+          if (mounted) {
+            routerPush(router, url)
+            setTopMenuKey(key)
 
-          if (subMenus) {
-            setSliderMenuKey('1')
-          } else {
-            setSliderMenuKey('0')
+            if (subMenus) {
+              setSliderMenuKey('1')
+            } else {
+              setSliderMenuKey('0')
+            }
           }
         },
       }
@@ -225,13 +176,15 @@ const LayoutComponent = ({ user, children }) => {
             key: `slider_${subKey}`,
             label: subText,
             onClick: () => {
-              routerPush(router, subUrl)
+              if (mounted) {
+                routerPush(router, subUrl)
 
-              const subKeyArr = subKey.split('_')
-              const subKeyArrLen = subKeyArr.length
+                const subKeyArr = subKey.split('_')
+                const subKeyArrLen = subKeyArr.length
 
-              if (subKeyArrLen >= 1) setTopMenuKey(subKeyArr[0])
-              if (subKeyArrLen >= 2) setSliderMenuKey(subKeyArr[1])
+                if (subKeyArrLen >= 1) setTopMenuKey(subKeyArr[0])
+                if (subKeyArrLen >= 2) setSliderMenuKey(subKeyArr[1])
+              }
             },
           }
 
@@ -260,9 +213,11 @@ const LayoutComponent = ({ user, children }) => {
           icon,
           key: `slider_${key}_0`,
           onClick: () => {
-            routerPush(router, url)
-            setTopMenuKey(key)
-            setSliderMenuKey('0')
+            if (mounted) {
+              routerPush(router, url)
+              setTopMenuKey(key)
+              setSliderMenuKey('0')
+            }
           },
         }
 
@@ -276,7 +231,7 @@ const LayoutComponent = ({ user, children }) => {
       <Container>
         <StyledHeader>
           <div className="logo">
-            <Image width={120} src={`${prefix}/images/zhizuotu_1.png`} preview={false} />
+            <span className="logo-text">NSGM</span>
           </div>
           <Menu
             theme="dark"
@@ -288,39 +243,40 @@ const LayoutComponent = ({ user, children }) => {
           />
           <div className="user-actions">
             <Space size={20} align="center">
-              <Tooltip title="通知">
+              <LanguageSwitcher size="small" />
+              {/* <Tooltip title="通知">
                 <BellOutlined className="action-icon" />
               </Tooltip>
               <Tooltip title="设置">
                 <SettingOutlined className="action-icon" />
-              </Tooltip>
+              </Tooltip> */}
               <Dropdown
                 menu={{
                   items: [
-                    {
-                      key: '1',
-                      icon: <UserOutlined />,
-                      label: '个人中心',
-                    },
-                    {
-                      key: '2',
-                      icon: <SettingOutlined />,
-                      label: '账户设置',
-                    },
+                    // {
+                    //   key: '1',
+                    //   icon: <UserOutlined />,
+                    //   label: t('layout:layout.userActions.profile'),
+                    // },
+                    // {
+                    //   key: '2',
+                    //   icon: <SettingOutlined />,
+                    //   label: t('layout:layout.userActions.settings'),
+                    // },
                     {
                       type: 'divider',
                     },
                     {
                       key: '3',
                       icon: <LogoutOutlined />,
-                      label: '退出登录',
-                      onClick: () => logout(),
+                      label: t('layout:layout.userActions.logout'),
+                      onClick: () => handleLogout(),
                     },
                   ],
                 }}
               >
                 <Space className="user-dropdown">
-                  <span className="username">{user?.displayName || '用户'}</span>
+                  <span className="username">{user?.displayName || t('layout:layout.userActions.user')}</span>
                 </Space>
               </Dropdown>
             </Space>
@@ -346,10 +302,10 @@ const LayoutComponent = ({ user, children }) => {
               />
             </div>
           </StyledSider>
-          <ContentLayout className="content-layout">
+          <ContentLayout collapsed={collapsed} className="content-layout">
             <StyledBreadcrumb
               items={_.compact(
-                _.flatMap(menuConfig, (item, index) => {
+                _.flatMap(translatedMenuConfig, (item, index) => {
                   const { key, text, subMenus } = item
 
                   if (subMenus) {