nsgm-cli 2.1.6 → 2.1.7

package/client/layout/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { Layout, Menu, Breadcrumb, Image, Select, Avatar, Dropdown, Space, Tooltip } from 'antd'
-import { Container } from '../styled/layout'
+import { Layout, Menu, Breadcrumb, Image, Select, Dropdown, Space, Tooltip } from 'antd'
+import { Container } from '@/styled/layout'
 import styled from 'styled-components'
 import { useRouter } from 'next/router'
 import _ from 'lodash'
-import menuConfig from '../utils/menu'
-import { logout } from '../utils/sso'
+import menuConfig from '@/utils/menu'
+import { logout } from '@/utils/sso'
 import getConfig from 'next/config'
-import { UserOutlined, LogoutOutlined, SettingOutlined, BellOutlined } from '@ant-design/icons'
+import { LogoutOutlined, SettingOutlined, BellOutlined, UserOutlined } from '@ant-design/icons'
 
 const { Option } = Select
 const { SubMenu } = Menu
@@ -25,24 +25,80 @@ const FlexLayout = styled(Layout)`
 const StyledSider = styled(Sider)`
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-  `
-const SiderFooter = styled.div<{ collapsed: boolean }>`
-    padding: ${props => props.collapsed ? '8px 0' : '8px 16px'};
-    text-align: center;
-    color: rgba(0,0,0,0.45);
-    font-size: 12px;
-    border-top: 1px solid #ebeef5;
-    background: #f5f7fa;
+    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 = () => {
@@ -208,9 +264,9 @@ const LayoutComponent = ({ user, children }) => {
   return (
     <Layout className="main-layout">
       <Container>
-        <Header className="header">
+        <StyledHeader>
           <div className="logo">
-            <Image width={100} src={prefix + "/images/zhizuotu_1.png"} preview={false} />
+            <Image width={120} src={prefix + "/images/zhizuotu_1.png"} preview={false} />
           </div>
           <Menu
             theme="dark"
@@ -221,7 +277,7 @@ const LayoutComponent = ({ user, children }) => {
             className="main-menu"
           />
           <div className="user-actions">
-            <Space size={16} align="center">
+            <Space size={20} align="center">
               <Tooltip title="通知">
                 <BellOutlined className="action-icon" />
               </Tooltip>
@@ -259,10 +315,10 @@ const LayoutComponent = ({ user, children }) => {
               </Dropdown>
             </Space>
           </div>
-        </Header>
+        </StyledHeader>
         <FlexLayout>
           <StyledSider
-            width={200}
+            width={220}
             className="site-layout-background sidebar"
             collapsible
             collapsed={collapsed}
@@ -279,12 +335,9 @@ const LayoutComponent = ({ user, children }) => {
                 className="side-menu"
               />
             </div>
-            <SiderFooter collapsed={collapsed}>
-              {collapsed ? '©' : '© 2025 NSGM'}
-            </SiderFooter>
           </StyledSider>
           <ContentLayout className="content-layout">
-            <Breadcrumb className="breadcrumb-container">
+            <StyledBreadcrumb>
               {_.map(menuConfig, (item, index) => {
                 const { key, text, subMenus } = item
 
@@ -294,7 +347,7 @@ const LayoutComponent = ({ user, children }) => {
                     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}>{subText}</Breadcrumb.Item>)
+                      subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex + '_sub'}>{subText}</Breadcrumb.Item>)
                       return false
                     }
                   })
@@ -305,12 +358,10 @@ const LayoutComponent = ({ user, children }) => {
                   }
                 }
               })}
-            </Breadcrumb>
-            <Content
-              className="site-layout-background content-container"
-            >
+            </StyledBreadcrumb>
+            <StyledContent>
               {children}
-            </Content>
+            </StyledContent>
           </ContentLayout>
         </FlexLayout>
       </Container>

package/client/redux/template/manage/actions.ts

@@ -1,5 +1,5 @@
 import * as types from './types'
-import { getTemplateService, addTemplateService, updateTemplateService, deleteTemplateService, searchTemplateService, batchDeleteTemplateService } from '../../../service/template/manage'
+import { getTemplateService, addTemplateService, updateTemplateService, deleteTemplateService, searchTemplateService, batchDeleteTemplateService } from '@/service/template/manage'
 
 export const getTemplate = (page=0, pageSize=10) => (
   dispatch: (arg0: {

package/client/service/template/manage.ts

@@ -1,7 +1,7 @@
-import { getLocalGraphql } from '../../utils/fetch'
+import { getLocalGraphql } from '@/utils/fetch'
 import _ from 'lodash'
 
-export const getTemplateService = (page=0, pageSize=10) => {
+export const getTemplateService = (page = 0, pageSize = 10) => {
   const getTemplateQuery = `query ($page: Int, $pageSize: Int) { template(page: $page, pageSize: $pageSize) { 
         totalCounts items { 
           id name
@@ -9,10 +9,10 @@ export const getTemplateService = (page=0, pageSize=10) => {
       } 
     }`
 
-    return getLocalGraphql(getTemplateQuery, {
-      page,
-      pageSize
-    })
+  return getLocalGraphql(getTemplateQuery, {
+    page,
+    pageSize
+  })
 }
 
 export const searchTemplateByIdService = (id: number) => {
@@ -39,7 +39,7 @@ export const searchTemplateService = (page = 0, pageSize = 10, data: any) => {
   }`
 
   return getLocalGraphql(searchTemplateQuery, {
-    page, 
+    page,
     pageSize,
     data: {
       name
@@ -47,7 +47,7 @@ export const searchTemplateService = (page = 0, pageSize = 10, data: any) => {
   })
 }
 
-export const addTemplateService = (data: any) => { 
+export const addTemplateService = (data: any) => {
   const { name } = data
 
   const addTemplateQuery = `mutation ($data: TemplateAddInput) { templateAdd(data: $data) }`
@@ -59,7 +59,7 @@ export const addTemplateService = (data: any) => {
   })
 }
 
-export const updateTemplateService = (id: number, data: any) => { 
+export const updateTemplateService = (id: number, data: any) => {
   const { name } = data
 
   const updateTemplateQuery = `mutation ($id: Int, $data: TemplateAddInput) { templateUpdate(id: $id, data: $data) }`
@@ -72,7 +72,7 @@ export const updateTemplateService = (id: number, data: any) => {
   })
 }
 
-export const deleteTemplateService = (id: number) => { 
+export const deleteTemplateService = (id: number) => {
   const deleteTemplateQuery = `mutation ($id: Int) { templateDelete(id: $id) }`
 
   return getLocalGraphql(deleteTemplateQuery, {
@@ -88,7 +88,7 @@ export const batchAddTemplateService = (datas: any) => {
   })
 }
 
-export const batchDeleteTemplateService = (ids: any) => { 
+export const batchDeleteTemplateService = (ids: any) => {
   const batchDeleteTemplateQuery = `mutation ($ids: [Int]) { templateBatchDelete(ids: $ids) }`
 
   return getLocalGraphql(batchDeleteTemplateQuery, {

package/client/utils/sso.ts

@@ -8,17 +8,17 @@ const env = getLocalEnv()
 const LOGIN_COOKIE_ID = env + '_cas_nsgm'
 const LOGIN_COOKIE_USER = env + '_nsgm_user'
 
-const getPrincipalUrl = () => { 
+const getPrincipalUrl = () => {
   const url = getLocalApiPrefix() + '/rest/sso/sessionCheck'
   return url
 }
 
-const getValidateUrl = () => { 
+const getValidateUrl = () => {
   const url = getLocalApiPrefix() + '/rest/sso/ticketCheck'
   return url
 }
 
-const handleLocationHref = () => { 
+const handleLocationHref = () => {
   let newHref = ''
   if (typeof window !== 'undefined') {
     const locationHref = window.location.href
@@ -27,12 +27,12 @@ const handleLocationHref = () => {
       const locationHrefArrLen = locationHrefArr.length
 
       let newParamStr = ''
-      
+
       if (locationHrefArrLen > 1) {
         const paramStr = locationHrefArr[1]
         if (paramStr.indexOf('&') !== -1) {
           const paramArr = paramStr.split('&')
-          
+
           _.each(paramArr, (item, index) => {
             if (item.indexOf('=') !== -1) {
               const itemArr = item.split('=')
@@ -42,7 +42,7 @@ const handleLocationHref = () => {
               let value = ''
               if (itemArrLen > 1)
                 value = itemArr[1]
-              
+
               if ('ticket' !== key) {
                 newParamStr += key + '=' + value + '&'
               }
@@ -58,11 +58,11 @@ const handleLocationHref = () => {
       }
 
       const locationHrefArrFirst = locationHrefArr[0]
-      if(newParamStr !== '')
+      if (newParamStr !== '')
         newHref = locationHrefArrFirst + '?' + newParamStr
       else
         newHref = locationHrefArrFirst
-    } else { 
+    } else {
       newHref = locationHref
     }
   }
@@ -71,43 +71,43 @@ const handleLocationHref = () => {
   return encodeURIComponent(newHref)
 }
 
-const jumpToLogin = () => { 
+const jumpToLogin = () => {
   delCookie(LOGIN_COOKIE_ID)
   delCookie(LOGIN_COOKIE_USER)
-  
+
   if (typeof window !== 'undefined') {
     window.location.href = window.location.origin + '/login'
   }
 }
 
-const jumpToLogout = () => { 
+const jumpToLogout = () => {
   delCookie(LOGIN_COOKIE_ID)
   delCookie(LOGIN_COOKIE_USER)
-  
+
   if (typeof window !== 'undefined') {
     window.location.href = window.location.origin
   }
 }
 
-const principalLogin = (cookie:string, callback:any) => { 
+const principalLogin = (cookie: string, callback: any) => {
   let url = getPrincipalUrl()
 
   if (typeof window !== 'undefined') {
     url += '?cookieValue=' + cookie + '&redirectUrl=' + handleLocationHref()
   }
 
-  console.log('principalLogin_url', url)
-  axios.get(url, { params: { credentials: 'include' } }).then((res:any) => {
-    console.log('principalLogin_res', res)
+  // console.log('principalLogin_url', url)
+  axios.get(url, { params: { credentials: 'include' } }).then((res: any) => {
+    // console.log('principalLogin_res', res)
     const { data } = res
     if (data) {
       const { returnCode, userAttr } = data
       if (returnCode !== 0) {
         jumpToLogin()
-      } else { 
+      } else {
         storeLoginUser(userAttr, callback)
       }
-    } else { 
+    } else {
       jumpToLogin()
     }
   }).catch((e) => {
@@ -116,42 +116,42 @@ const principalLogin = (cookie:string, callback:any) => {
   })
 }
 
-const storeLoginUser = (userAttr:any, callback:any) => { 
-  console.log('storeLoginUser', userAttr)
+const storeLoginUser = (userAttr: any, callback: any) => {
+  // console.log('storeLoginUser', userAttr)
 
   if (userAttr) {
     const user = JSON.stringify(userAttr, ['city', 'company', 'department', 'displayName', 'employee', 'mail', 'name', 'sn'])
     setCookie(LOGIN_COOKIE_USER, user, null)
     callback && callback(JSON.parse(user))
-  } else { 
+  } else {
     callback && callback()
   }
 }
 
-const storeLogin = (cookie:any, cookieExpire:any, userAttr:any, callback:any) => { 
-  console.log('storeLogin_cookie', cookie)
+const storeLogin = (cookie: any, cookieExpire: any, userAttr: any, callback: any) => {
+  // console.log('storeLogin_cookie', cookie)
 
-  if (cookie) { 
+  if (cookie) {
     setCookie(LOGIN_COOKIE_ID, cookie, cookieExpire)
   }
 
   storeLoginUser(userAttr, callback)
 }
 
-const validateLogin = (ticket:string, name:string = '', callback:any) => { 
+const validateLogin = (ticket: string, name: string = '', callback: any) => {
   let url = getValidateUrl()
 
   if (typeof window !== 'undefined') {
     url += '?ticket=' + ticket
 
-    if(name !== ''){
+    if (name !== '') {
       url += '&name=' + name
     }
   }
-  
-  console.log('validateLogin_url', url)
-  axios.get(url, { params: { credentials: 'include' } }).then((res:any) => {
-    console.log('validateLogin_res', res)
+
+  // console.log('validateLogin_url', url)
+  axios.get(url, { params: { credentials: 'include' } }).then((res: any) => {
+    // console.log('validateLogin_res', res)
 
     if (res) {
       const { data } = res
@@ -159,13 +159,13 @@ const validateLogin = (ticket:string, name:string = '', callback:any) => {
         const { cookieValue, cookieExpire, returnCode, userAttr } = data
         if (returnCode === 0) {
           storeLogin(cookieValue, cookieExpire, userAttr, callback)
-        } else { 
+        } else {
           jumpToLogin()
         }
-      } else { 
+      } else {
         jumpToLogin()
       }
-    } else { 
+    } else {
       jumpToLogin()
     }
   }).catch((e) => {
@@ -173,25 +173,25 @@ const validateLogin = (ticket:string, name:string = '', callback:any) => {
   })
 }
 
-export const login = (callback:any) => { 
+export const login = (callback: any) => {
   const cookieLoginValue = getCookie(LOGIN_COOKIE_ID)
-  console.log('cookieLoginValue', cookieLoginValue)
+  // console.log('cookieLoginValue', cookieLoginValue)
 
-  if(typeof window !== 'undefined'){
+  if (typeof window !== 'undefined') {
     const locationHref = window.location.href
 
-    if(locationHref.indexOf('/login') === -1){
+    if (locationHref.indexOf('/login') === -1) {
 
       if (cookieLoginValue !== '') {
         principalLogin(cookieLoginValue, callback)
-      } else { 
+      } else {
         const urlParamTicket = getUrlParamByKey('ticket')
         const urlParamName = getUrlParamByKey('name')
-        console.log('urlParamTicket', urlParamTicket, urlParamName)
+        // console.log('urlParamTicket', urlParamTicket, urlParamName)
 
         if (urlParamTicket !== '') {
           validateLogin(urlParamTicket, urlParamName, callback)
-        } else { 
+        } else {
           jumpToLogin()
         }
       }
@@ -199,7 +199,7 @@ export const login = (callback:any) => {
   }
 }
 
-export const logout = () => { 
+export const logout = () => {
   jumpToLogout()
 }
 

package/next.config.js

@@ -63,12 +63,17 @@ module.exports = (phase, defaultConfig, options) => {
     // Bundle 优化配置
     experimental: {
       optimizeCss: true, // 启用 CSS 优化（已安装 critters 依赖）
-      swcMinify: true,   // 使用 SWC 压缩器
       esmExternals: true // 支持 ESM 外部依赖
     },
     compiler: {
       removeConsole: phase !== PHASE_DEVELOPMENT_SERVER,
     },
+    allowedDevOrigins: [
+      'http://127.0.0.1:8080',
+      'http://localhost:8080',
+      'http://127.0.0.1:3000',
+      'http://localhost:3000'
+    ],
     webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
       // 启用压缩
       if (!dev && !isServer) {
@@ -105,7 +110,7 @@ module.exports = (phase, defaultConfig, options) => {
           },
           minimize: true,
         }
-        
+
         // 添加分析工具
         if (process.env.ANALYZE === 'true') {
           const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
@@ -117,13 +122,13 @@ module.exports = (phase, defaultConfig, options) => {
           )
         }
       }
-      
+
       // 优化模块解析
       config.resolve.alias = {
         ...config.resolve.alias,
         '@': path.resolve(__dirname, 'client'),
       }
-      
+
       return config
     },
     generateBuildId: async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsgm-cli",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "A CLI tool to run Next/Style-components and Graphql/Mysql fullstack project",
   "main": "index.js",
   "scripts": {

package/pages/_app.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react'
 import { Provider } from 'react-redux'
 import { ThemeProvider } from 'styled-components'
-import { useStore } from '../client/redux/store'
-import { GlobalStyle, Loading } from '../client/styled/common'
-import LayoutComponent from '../client/layout'
-import { login } from '../client/utils/sso'
+import { useStore } from '@/redux/store'
+import { GlobalStyle, Loading } from '@/styled/common'
+import LayoutComponent from '@/layout'
+import { login } from '@/utils/sso'
 import { Spin } from 'antd'
 import 'antd/dist/reset.css'
 

package/pages/_document.tsx

@@ -15,7 +15,9 @@ const MyDocument = () => {
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
       <meta name="apple-mobile-web-app-capable" content="yes" />
       <meta charSet="utf-8" />
-      <Head />
+      <Head>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+      </Head>
       <body>
         <Main />
         <NextScript />

package/pages/template/manage.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react'
 import { ConfigProvider, Table, Modal, Button, Input, Space, Upload, message } from 'antd'
-import { Container, SearchRow, ModalContainer } from '../../client/styled/template/manage'
+import { Container, SearchRow, ModalContainer } from '@/styled/template/manage'
 import styled from 'styled-components'
 import { useDispatch, useSelector } from 'react-redux'
-import { getTemplate, addTemplate, modTemplate, delTemplate, updateSSRTemplate, searchTemplate, batchDelTemplate } from '../../client/redux/template/manage/actions'
-import { getTemplateService } from '../../client/service/template/manage'
-import { RootState } from '../../client/redux/store'
+import { getTemplate, addTemplate, modTemplate, delTemplate, updateSSRTemplate, searchTemplate, batchDelTemplate } from '@/redux/template/manage/actions'
+import { getTemplateService } from '@/service/template/manage'
+import { RootState } from '@/redux/store'
 import _ from 'lodash'
 import dayjs from 'dayjs'
 import locale from 'antd/lib/locale/zh_CN'
-import { handleXSS, checkModalObj } from '../../client/utils/common'
+import { handleXSS, checkModalObj } from '@/utils/common'
 import { UploadOutlined } from '@ant-design/icons'
 import ExcelJS from 'exceljs'
 import { saveAs } from 'file-saver'
@@ -58,6 +58,11 @@ const StyledTable = styled(Table)`
     margin-top: 16px;
     border-radius: 8px;
     overflow: hidden;
+    
+    .styled-pagination {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
   `
 const ModalTitle = styled.div`
     color: #1890ff;
@@ -66,6 +71,21 @@ const ModalTitle = styled.div`
 const ModalInput = styled(Input)`
     border-radius: 4px;
   `
+const IconWrapper = styled.i`
+    margin-right: 5px;
+  `
+const StyledPagination = styled.div`
+    margin-top: 16px;
+    margin-bottom: 16px;
+  `
+const RoundedButton = styled(Button)`
+    border-radius: 4px;
+  `
+const GlobalStyle = styled.div`
+    .rounded-button {
+      border-radius: 4px;
+    }
+  `
 
 const Page = ({ template }) => {
   const dispatch = useDispatch()
@@ -123,13 +143,13 @@ const Page = ({ template }) => {
       render: (_: any, record: any) => {
         return (
           <Space size="small">
-            <Button type="primary" size="small" onClick={() => {
+            <RoundedButton type="primary" size="small" onClick={() => {
               updateTemplate(record)
-            }} style={{ borderRadius: '4px' }}>修改</Button>
-            <Button danger size="small" onClick={() => {
+            }}>修改</RoundedButton>
+            <RoundedButton danger size="small" onClick={() => {
               const { id } = record
               deleteTemplate(id)
-            }} style={{ borderRadius: '4px' }}>删除</Button>
+            }}>删除</RoundedButton>
           </Space>
         )
       }
@@ -281,13 +301,14 @@ const Page = ({ template }) => {
 
   return (
     <Container>
-      <div className="page-title">模板管理</div>
+      <GlobalStyle />
+      <div className="page-title">Template 管理</div>
       <ConfigProvider locale={locale}>
         <SearchRow>
           <Space size="middle" wrap>
             <Space size="small">
               <StyledButton type="primary" onClick={createTemplate} $primary>
-                <i className="fa fa-plus" style={{ marginRight: '5px' }}></i>
+                <IconWrapper className="fa fa-plus"></IconWrapper>
                 新增
               </StyledButton>
               <StyledInput
@@ -298,7 +319,7 @@ const Page = ({ template }) => {
                 onPressEnter={doSearch}
               />
               <StyledButton type="primary" onClick={doSearch} $primary>
-                <i className="fa fa-search" style={{ marginRight: '5px' }}></i>
+                <IconWrapper className="fa fa-search"></IconWrapper>
                 搜索
               </StyledButton>
             </Space>
@@ -335,11 +356,11 @@ const Page = ({ template }) => {
             onChange: (page, pageSize) => {
               dispatch(searchTemplate(page - 1, pageSize, { name: handleXSS(searchName) }))
             },
-            style: { marginTop: '16px', marginBottom: '16px' }
+            className: "styled-pagination"
           }}
         />
         <Modal
-          title={<ModalTitle>{(modalId == 0 ? "新增" : "修改") + " 模板"}</ModalTitle>}
+          title={<ModalTitle>{(modalId == 0 ? "新增" : "修改") + " Template"}</ModalTitle>}
           open={isModalVisiable}
           onOk={handleOk}
           onCancel={handleCancel}
@@ -348,8 +369,8 @@ const Page = ({ template }) => {
           centered
           maskClosable={false}
           destroyOnClose
-          okButtonProps={{ style: { borderRadius: '4px' } }}
-          cancelButtonProps={{ style: { borderRadius: '4px' } }}
+          okButtonProps={{ className: 'rounded-button' }}
+          cancelButtonProps={{ className: 'rounded-button' }}
         >
           <ModalContainer>
             <div className="line">

package/babel.config.js

@@ -1,18 +0,0 @@
-module.exports = {
-  presets: [
-    ['next/babel', {
-      'preset-env': {
-        targets: {
-          node: '18'
-        }
-      }
-    }]
-  ],
-  plugins: [
-    ['styled-components', {
-      ssr: true,
-      displayName: true,
-      preprocess: false
-    }]
-  ]
-}