nsgm-cli 2.1.13 → 2.1.15

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/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();
-});
+  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);
-});
+  const handleClick = jest.fn()
+  render(<Button onClick={handleClick}>Click me</Button>)
+  fireEvent.click(screen.getByText('Click me'))
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})

package/client/layout/index.tsx

@@ -1,110 +1,46 @@
 import React, { useEffect, useState } from 'react'
-import { Layout, Menu, Breadcrumb, Image, Select, 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
+  text: string
+  url: string
+}
 
-const { Option } = Select
-const { SubMenu } = Menu
-const { Header, Content, Sider } = Layout
+interface MenuItem {
+  key: string
+  text: string
+  url: string
+  icon?: React.ReactNode
+  subMenus?: SubMenuItem[]
+}
 
 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 = () => {
-  let result = {
+  const result = {
     topMenu: '1',
-    slideMenu: '0'
+    slideMenu: '0',
   }
 
   if (typeof window !== 'undefined') {
@@ -123,13 +59,11 @@ const getLocationKey = () => {
           locationStr = locationStr.split(prefix)[1]
         }
 
-        // console.log('locationStr', locationStr)
-
-        _.each(menuConfig, (item, index) => {
+        _.each(menuConfig, (item) => {
           const { key, url, subMenus } = item
 
           if (subMenus) {
-            _.each(subMenus, (subItem, subIndex) => {
+            _.each(subMenus, (subItem: MenuItem) => {
               const { key: subKey, url: subUrl } = subItem
 
               if (locationStr === subUrl.split('?')[0]) {
@@ -142,6 +76,7 @@ const getLocationKey = () => {
 
                 return false
               }
+              return true
             })
           } else {
             if (url && locationStr === url.split('?')[0]) {
@@ -149,17 +84,16 @@ const getLocationKey = () => {
               return false
             }
           }
+          return true
         })
       }
     }
   }
-  // console.log('result', result)
   return result
 }
 
 const routerPush = (router: any, url: string) => {
-  // console.log('routerPush', url)
-  if (router && url) {
+  if (router && url && typeof window !== 'undefined') {
     if (prefix && url.indexOf(prefix) === -1) {
       url = prefix + url
     }
@@ -168,12 +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)
+  }, [])
 
-  // console.log('topMenuKey: ' + topMenuKey, ', sliderMenuKey: ' + sliderMenuKey, user)
+  // 使用翻译后的菜单配置
+  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()
@@ -184,23 +141,25 @@ const LayoutComponent = ({ user, children }) => {
   const menuItems: any = []
   const menuItemsVertical: any = []
 
-  _.each(menuConfig, (item, index) => {
+  _.each(translatedMenuConfig, (item) => {
     const { key, text, url, icon, subMenus } = item
 
-    if (key) {
+    if (key && text && url) {
       const menuObj = {
         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')
+            }
           }
-        }
+        },
       }
 
       menuItems.push(menuObj)
@@ -209,51 +168,57 @@ const LayoutComponent = ({ user, children }) => {
     if (subMenus) {
       const subMenusChildren: any = []
 
-      _.each(subMenus, (subItem, subIndex) => {
+      _.each(subMenus, (subItem: MenuItem) => {
         const { key: subKey, text: subText, url: subUrl } = subItem
 
-        const subMenusChildrenObj = {
-          key: 'slider_' + subKey,
-          label: subText,
-          onClick: () => {
-            routerPush(router, subUrl)
-
-            const subKeyArr = subKey.split('_')
-            const subKeyArrLen = subKeyArr.length
+        if (subKey && subText && subUrl) {
+          const subMenusChildrenObj = {
+            key: `slider_${subKey}`,
+            label: subText,
+            onClick: () => {
+              if (mounted) {
+                routerPush(router, subUrl)
 
-            // console.log(subKeyArr, subKeyArrLen)
+                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])
+              }
+            },
           }
-        }
 
-        subMenusChildren.push(subMenusChildrenObj)
+          subMenusChildren.push(subMenusChildrenObj)
+        }
       })
 
-      const subMenuObjVertical = {
-        key: 'slider_' + key,
-        icon,
-        label: text,
-        onTitleClick: () => {
-          setTopMenuKey(key)
-          setSliderMenuKey('1')
-        },
-        children: subMenusChildren
-      }
+      if (key && text && icon) {
+        const subMenuObjVertical = {
+          key: `slider_${key}`,
+          icon,
+          label: text,
+          onTitleClick: () => {
+            setTopMenuKey(key)
+            setSliderMenuKey('1')
+          },
+          children: subMenusChildren,
+        }
 
-      menuItemsVertical.push(subMenuObjVertical)
+        menuItemsVertical.push(subMenuObjVertical)
+      }
     } else {
-      if (key) {
+      if (key && text && url) {
         const menuObjVertical = {
           label: text,
           icon,
-          key: 'slider_' + key + '_0',
+          key: `slider_${key}_0`,
           onClick: () => {
-            routerPush(router, url)
-            setTopMenuKey(key)
-            setSliderMenuKey('0')
-          }
+            if (mounted) {
+              routerPush(router, url)
+              setTopMenuKey(key)
+              setSliderMenuKey('0')
+            }
+          },
         }
 
         menuItemsVertical.push(menuObjVertical)
@@ -266,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"
@@ -278,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>
@@ -329,39 +295,41 @@ const LayoutComponent = ({ user, children }) => {
                 mode="inline"
                 defaultSelectedKeys={['slider_1_0']}
                 defaultOpenKeys={['slider_1']}
-                selectedKeys={['slider_' + topMenuKey + '_' + sliderMenuKey]}
-                openKeys={['slider_' + topMenuKey]}
+                selectedKeys={[`slider_${topMenuKey}_${sliderMenuKey}`]}
+                openKeys={[`slider_${topMenuKey}`]}
                 items={menuItemsVertical}
                 className="side-menu"
               />
             </div>
           </StyledSider>
-          <ContentLayout className="content-layout">
-            <StyledBreadcrumb>
-              {_.map(menuConfig, (item, index) => {
-                const { key, text, subMenus } = item
-
-                if (subMenus) {
-                  let subContent: any = []
-                  _.each(subMenus, (subItem, subIndex) => {
-                    const { key: subKey, text: subText } = subItem
-                    if (subKey === topMenuKey + '_' + sliderMenuKey) {
-                      subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex}>{text}</Breadcrumb.Item>)
-                      subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex + '_sub'}>{subText}</Breadcrumb.Item>)
-                      return false
+          <ContentLayout collapsed={collapsed} className="content-layout">
+            <StyledBreadcrumb
+              items={_.compact(
+                _.flatMap(translatedMenuConfig, (item, index) => {
+                  const { key, text, subMenus } = item
+
+                  if (subMenus) {
+                    const subItems: any = []
+                    _.each(subMenus, (subItem: MenuItem, subIndex: number) => {
+                      const { key: subKey, text: subText } = subItem
+                      if (subKey === `${topMenuKey}_${sliderMenuKey}`) {
+                        subItems.push({ title: text, key: `breadcrumb${subIndex}` })
+                        subItems.push({ title: subText, key: `breadcrumb${subIndex}_sub` })
+                        return false
+                      }
+                      return true
+                    })
+                    return subItems
+                  } else {
+                    if (key && key === topMenuKey) {
+                      return { title: text, key: `breadcrumb${index}` }
                     }
-                  })
-                  return subContent
-                } else {
-                  if (key && key === topMenuKey) {
-                    return <Breadcrumb.Item key={'breadcrumb' + index}>{text}</Breadcrumb.Item>
                   }
-                }
-              })}
-            </StyledBreadcrumb>
-            <StyledContent>
-              {children}
-            </StyledContent>
+                  return null
+                })
+              )}
+            />
+            <StyledContent>{children}</StyledContent>
           </ContentLayout>
         </FlexLayout>
       </Container>

package/client/redux/reducers.ts

@@ -2,4 +2,4 @@ import { templateManageReducer } from './template/manage/reducers'
 
 export default {
   templateManage: templateManageReducer,
-}
+}

package/client/redux/store.ts

@@ -16,6 +16,7 @@ if (reducersKeysLen > 0) {
 export type RootState = ReturnType<typeof combineReducer>
 
 // 创建一个临时 store 实例来获取正确的 dispatch 类型
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const tempStore = configureStore({
   reducer: combineReducer,
   middleware: (getDefaultMiddleware) =>
@@ -48,7 +49,7 @@ export const initializeStore = (preloadedState?: any): EnhancedStore => {
   if (preloadedState && store) {
     _store = initStore({
       ...store.getState(),
-      ...preloadedState
+      ...preloadedState,
     })
     store = undefined
   }