nsgm-cli 1.0.27 → 2.0.0

package/README.md

@@ -1,162 +1,161 @@
-# NSGM CLI
-- 技术栈: [Next](https://github.com/vercel/next.js), [Styled-components](https://github.com/styled-components/styled-components), [Graphql](https://graphql.org/), [Mysql](https://www.mysql.com/) (命名取首字母 NSGM)
-- 全栈架构，代码模板生成，快速开发
-- 数据库采用 Mysql, 配置见 mysql.config.js
-- 项目配置见 project.config.js
-- Next 框架配置见 next.config.js
-- [Demo 网站](https://nsgm.erisl.top/)
-
-## 命令
-- nsgm init    初始化项目
-- nsgm upgrade 升级项目基础文件
-- nsgm create  创建模板页面
-- nsgm delete  删除模板页面
-- nsgm dev     开发模式
-- nsgm start   生产模式
-- nsgm build   编译
-- nsgm export  导出静态页面
-        
-## 参数
-- dictionary: 在 export/init 的时候使用, 默认 webapp, 譬如: nsgm init|export dictionary=webapp 或者 nsgm init|export webapp
-- controller: 在 create/delete 的时候使用， 必须有。譬如：nsgm create|delete math
-- action:     在 create/delete 的时候使用， 默认 manage, 跟在 controller 后面， 譬如 nsgm create|delete math test
-
-
-## 根目录新增 next.config.js
-```
-const { nextConfig } = require('nsgm-cli')
-const projectConfig = require('./project.config')
-
-const { version, prefix, protocol, host, port } = projectConfig 
-
-module.exports = (phase, defaultConfig) => {
-    let configObj = nextConfig(phase, defaultConfig, { 
-        version, prefix, protocol, host, port
-    })
-
-    return configObj
-}
-```
-
-## 根目录新增 mysql.config.js
-```
-const { mysqlConfig } = require('nsgm-cli')
-const { mysqlOptions } = mysqlConfig
-const { user, password, host, port, database } = mysqlOptions
-
-module.exports = {
-    mysqlOptions: {
-        user,
-        password,
-        host,
-        port,
-        database
-    }
-}
-```
-
-## 根目录新增 project.config.js
-```
-const { projectConfig } = require('nsgm-cli')
-const pkg = require('./package.json')
-
-const { prefix, protocol, host, port } = projectConfig
-const { version } = pkg
-
-module.exports = {
-    version,
-    prefix,
-    protocol,
-    host,
-    port
-}
-```
-
-## 根目录新增 server 
-- apis    存放 Rest Api 
-- modules 存放 graphql 的 resolver 和 schema
-- plugins 存放 graphql 的 plugin
-- *.js  举例： test.js =>  用于响应 /test/*, ${prefix}/test/* 请求
-
-```
-  const express = require('express')
-  const moment = require('moment')
-
-  const router = express.Router()
-
-  router.use((req, res, next) => {
-      const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl
-      console.log(moment().format('YYYY-MM-DD HH:mm:ss') + ' ' + fullUrl)
-      next()
-  })
-
-  router.get('/*', (req, res) => {
-      res.statusCode = 200
-      res.json({ name: 'TEST' })
-  })
-
-  module.exports = router
-```
-
-- apis/hello.js
-```
-const express = require('express')
-const router = express.Router()
-
-router.get('/*', (req, res) => {
-    res.statusCode = 200
-    res.json({ name: 'Hello' })
-})
-
-module.exports = router
-```
-
-- modules/link/schema.js
-```
-module.exports = {
-    query: `
-        link: String
-    `,
-    mutation: `
-        linkUpdate(link: Date): String
-    `,
-    subscription: ``,
-    type: ``
-} 
-```
-
-- modules/link/resolver.js
-```
-let localLink = ''
-
-module.exports = {
-    link: () => {
-        return localLink
-    },
-    linkUpdate: ({ link }) =>{
-        console.log('link', link)
-        localLink = link
-        return localLink
-    }
-}
-```
-
-- plugins/date.js
-```
-const moment = require('moment')
-const { Kind } = require('graphql/language')
-const { GraphQLScalarType } = require('graphql')
-
-const customScalarDate = new GraphQLScalarType({
-    name: 'Date',
-    description: 'Date custom scalar type',
-    parseValue: value => moment(value).valueOf(),
-    serialize: value => moment(value).format('YYYY-MM-DD HH:mm:ss:SSS'),
-    parseLiteral: ast => (ast.kind === Kind.INT)
-        ? parseInt(ast.value, 10)
-        : null
-})
-
-module.exports = { Date: customScalarDate }
-```
-
+# NSGM CLI
+- 技术栈: [Next](https://github.com/vercel/next.js), [Styled-components](https://github.com/styled-components/styled-components), [Graphql](https://graphql.org/), [Mysql](https://www.mysql.com/)
+- 全栈架构，代码模板生成，快速开发
+- 数据库采用 Mysql, 配置见 mysql.config.js
+- 项目配置见 project.config.js
+- Next 框架配置见 next.config.js
+- [DEMO UAT 链接](https://nsgm.erisl.top/)
+## 命令
+- nsgm init    初始化项目
+- nsgm upgrade 升级项目基础文件
+- nsgm create  创建模板页面
+- nsgm delete  删除模板页面
+- nsgm dev     开发模式
+- nsgm start   生产模式
+- nsgm build   编译
+- nsgm export  导出静态页面
+        
+## 参数
+- dictionary: 在 export/init 的时候使用, 默认 webapp, 譬如: nsgm init|export dictionary=webapp 或者 nsgm init|export webapp
+- controller: 在 create/delete 的时候使用， 必须有。譬如：nsgm create|delete math
+- action:     在 create/delete 的时候使用， 默认 manage, 跟在 controller 后面， 譬如 nsgm create|delete math test
+
+## 根目录新增 next.config.js
+```
+const { nextConfig } = require('nsgm-cli')
+const projectConfig = require('./project.config')
+
+const { version, prefix, protocol, host } = projectConfig 
+
+module.exports = (phase, defaultConfig) => {
+    let configObj = nextConfig(phase, defaultConfig, { 
+        version, prefix, protocol, host
+    })
+
+    return configObj
+}
+```
+
+## 根目录新增 mysql.config.js
+```
+const { mysqlConfig } = require('nsgm-cli')
+const { mysqlOptions, mysqlDBCluster } = mysqlConfig
+const { user, password, host, port, database } = mysqlOptions
+
+module.exports = {
+    mysqlOptions: {
+        user,
+        password,
+        host,
+        port,
+        database
+    },
+    mysqlDBCluster
+}
+```
+
+## 根目录新增 project.config.js
+```
+const { projectConfig } = require('nsgm-cli')
+const pkg = require('./package.json')
+
+const { prefix, protocol, host, port } = projectConfig
+const { version } = pkg
+
+module.exports = {
+    version,
+    prefix,
+    protocol,
+    host,
+    port
+}
+```
+
+## 根目录新增 server 
+- apis    存放 Rest Api 
+- modules 存放 graphql 的 resolver 和 schema
+- plugins 存放 graphql 的 plugin
+- *.js  举例： test.js =>  用于响应 /test/*, ${prefix}/test/* 请求
+
+```
+  const express = require('express')
+  const moment = require('moment')
+
+  const router = express.Router()
+
+  router.use((req, res, next) => {
+      const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl
+      console.log(moment().format('YYYY-MM-DD HH:mm:ss') + ' ' + fullUrl)
+      next()
+  })
+
+  router.get('/*', (req, res) => {
+      res.statusCode = 200
+      res.json({ name: 'TEST' })
+  })
+
+  module.exports = router
+```
+
+- apis/hello.js
+```
+const express = require('express')
+const router = express.Router()
+
+router.get('/*', (req, res) => {
+    res.statusCode = 200
+    res.json({ name: 'Hello' })
+})
+
+module.exports = router
+```
+
+- modules/link/schema.js
+```
+module.exports = {
+    query: `
+        link: String
+    `,
+    mutation: `
+        linkUpdate(link: Date): String
+    `,
+    subscription: ``,
+    type: ``
+} 
+```
+
+- modules/link/resolver.js
+```
+let localLink = ''
+
+module.exports = {
+    link: () => {
+        return localLink
+    },
+    linkUpdate: ({ link }) =>{
+        console.log('link', link)
+        localLink = link
+        return localLink
+    }
+}
+```
+
+- plugins/date.js
+```
+const moment = require('moment')
+const { Kind } = require('graphql/language')
+const { GraphQLScalarType } = require('graphql')
+
+const customScalarDate = new GraphQLScalarType({
+    name: 'Date',
+    description: 'Date custom scalar type',
+    parseValue: value => moment(value).valueOf(),
+    serialize: value => moment(value).format('YYYY-MM-DD HH:mm:ss:SSS'),
+    parseLiteral: ast => (ast.kind === Kind.INT)
+        ? parseInt(ast.value, 10)
+        : null
+})
+
+module.exports = { Date: customScalarDate }
+```
+

package/client/layout/index.tsx

@@ -0,0 +1,245 @@
+import React, { useEffect, useState } from 'react'
+import { Layout, Menu, Breadcrumb, Image, Select } from 'antd'
+import { Container } from '../styled/layout'
+import { useRouter } from 'next/router'
+import _ from 'lodash'
+import menuConfig from '../utils/menu'
+import getConfig from 'next/config'
+import { ItemType, SubMenuType } from 'antd/lib/menu/hooks/useItems'
+
+const { Option } = Select
+const { SubMenu } = Menu
+const { Header, Content, Sider } = Layout
+
+const nextConfig = getConfig()
+const { publicRuntimeConfig } = nextConfig
+const { prefix } = publicRuntimeConfig
+
+const getLocationKey = () => {
+  let result = {
+    topMenu: '1',
+    slideMenu: '0'
+  }
+
+  if (typeof window !== 'undefined') {
+    const locationHref = window.location.href
+
+    let locationHrefArr = locationHref.split('?')
+    if (locationHrefArr.length > 0) {
+      locationHrefArr = locationHrefArr[0].split('//')
+
+      if (locationHrefArr.length > 1) {
+        let locationStr = locationHrefArr[1]
+        const locationIndex = locationStr.indexOf('/')
+        locationStr = locationStr.substring(locationIndex)
+
+        if (prefix && locationStr.indexOf(prefix) !== -1) { 
+          locationStr = locationStr.split(prefix)[1]
+        }
+
+        // console.log('locationStr', locationStr)
+
+        _.each(menuConfig, (item, index) => {
+          const { key, url, subMenus } = item
+
+          if (subMenus) {
+            _.each(subMenus, (subItem, subIndex) => {
+              const { key: subKey, url: subUrl } = subItem
+
+              if (locationStr === subUrl.split('?')[0]) {
+                const subKeyArr = subKey.split('_')
+                const subKeyArrLen = subKeyArr.length
+
+                if (subKeyArrLen > 0) result.topMenu = subKeyArr[0]
+
+                if (subKeyArrLen > 1) result.slideMenu = subKeyArr[1]
+
+                return false
+              }
+            })
+          } else {
+            if (url && locationStr === url.split('?')[0]) {
+              result.topMenu = key
+              return false
+            }
+          }
+        })
+      }
+    }
+  }
+  // console.log('result', result)
+  return result
+}
+
+const routerPush = (router: any, url: string) => {
+  // console.log('routerPush', url)
+  if (router && url) {
+    if (prefix && url.indexOf(prefix) === -1) { 
+      url = prefix + url
+    }
+    router.push(url)
+  }
+}
+
+const LayoutComponent = ({ user, children }) => {
+  const router = useRouter()
+  const [topMenuKey, setTopMenuKey] = useState('1')
+  const [sliderMenuKey, setSliderMenuKey] = useState('1')
+
+  // console.log('topMenuKey: ' + topMenuKey, ', sliderMenuKey: ' + sliderMenuKey, user)
+
+  useEffect(() => {
+    const { topMenu, slideMenu } = getLocationKey()
+    setTopMenuKey(topMenu)
+    setSliderMenuKey(slideMenu)
+  }, [])
+
+  const menuItems:any = []
+  const menuItemsVertical:any = []
+
+  _.each(menuConfig, (item, index) => {
+    const { key, text, url, icon, subMenus } = item
+
+    if (key) {
+      const menuObj:ItemType = {
+        label: text,
+        key,
+        onClick: () => {
+          routerPush(router, url)
+          setTopMenuKey(key)
+
+          if (subMenus) {
+            setSliderMenuKey('1')
+          } else {
+            setSliderMenuKey('0')
+          }
+        }
+      }
+
+      menuItems.push(menuObj)
+    }
+
+    if (subMenus) {
+      const subMenusChildren:any = []
+
+      _.each(subMenus, (subItem, subIndex) => {
+        const { key: subKey, text: subText, url: subUrl } = subItem
+
+        const subMenusChildrenObj:ItemType = {
+          key: 'slider_' + subKey,
+          label: subText,
+          onClick: ()=>{
+            routerPush(router, subUrl)
+
+            const subKeyArr = subKey.split('_')
+            const subKeyArrLen = subKeyArr.length
+
+            // console.log(subKeyArr, subKeyArrLen)
+
+            if (subKeyArrLen >= 1) setTopMenuKey(subKeyArr[0])
+            if (subKeyArrLen >= 2) setSliderMenuKey(subKeyArr[1])
+          }
+        }
+
+        subMenusChildren.push(subMenusChildrenObj)
+      })
+
+      const subMenuObjVertical:SubMenuType = {
+        key: 'slider_' + key,
+        icon,
+        label: text,
+        onTitleClick: () => {
+          setTopMenuKey(key)
+          setSliderMenuKey('1')
+        },
+        children: subMenusChildren
+      }
+
+      menuItemsVertical.push(subMenuObjVertical)
+    } else {
+      if (key) {
+        const menuObjVertical:ItemType = {
+          label: text,
+          icon,
+          key: 'slider_' + key + '_0',
+          onClick: () => {
+            routerPush(router, url)
+            setTopMenuKey(key)
+            setSliderMenuKey('0')
+          }
+        }
+
+        menuItemsVertical.push(menuObjVertical)
+      }
+    }
+  })
+
+  return (
+    <Layout>
+      <Container>
+        <Header className="header">
+          <div className="logo">
+            <Image width={100} src={prefix + "/images/zhizuotu_1.png"} preview={false} />
+          </div>
+          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} selectedKeys={[topMenuKey]} items={menuItems} />
+          <div className="user">
+            <div>Welcome</div>
+          </div>
+        </Header>
+        <Layout>
+          <Sider width={200} className="site-layout-background">
+            <Menu
+              mode="inline"
+              defaultSelectedKeys={['slider_1_0']}
+              defaultOpenKeys={['slider_1']}
+              selectedKeys={['slider_' + topMenuKey + '_' + sliderMenuKey]}
+              openKeys={['slider_' + topMenuKey]}
+              style={{ height: '100%', borderRight: 0 }}
+              items={menuItemsVertical}
+            />
+          </Sider>
+          <Layout style={{ padding: '0 24px 24px' }}>
+            <Breadcrumb style={{ margin: '16px 0' }}>
+              {_.map(menuConfig, (item, index) => {
+                const { key, text, subMenus } = item
+
+                if (subMenus) {
+                  // console.log('subMenus', subMenus)
+
+                  let subContent:any = []
+                  _.each(subMenus, (subItem, subIndex) => {
+                    const { key: subKey, text: subText } = subItem
+                    // console.log('subKey', subKey, key, topMenuKey, sliderMenuKey)
+
+                    if (subKey === topMenuKey + '_' + sliderMenuKey) {
+                      subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex}>{text}</Breadcrumb.Item>)
+                      subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex}>{subText}</Breadcrumb.Item>)
+                      return false
+                    }
+                  })
+                  return subContent
+                } else {
+                  if (key && key === topMenuKey) {
+                    return <Breadcrumb.Item key={'breadcrumb' + index}>{text}</Breadcrumb.Item>
+                  }
+                }
+              })}
+            </Breadcrumb>
+            <Content
+              className="site-layout-background"
+              style={{
+                padding: 24,
+                margin: 0,
+                minHeight: 280
+              }}
+            >
+              {children}
+            </Content>
+          </Layout>
+        </Layout>
+      </Container>
+    </Layout>
+  )
+}
+
+export default LayoutComponent

package/client/redux/reducers.ts

@@ -0,0 +1,5 @@
+import { templateManageReducer } from './template/manage/reducers'
+
+export default {
+  templateManage: templateManageReducer,
+}

package/{generation/client → client}/redux/store.ts

@@ -1,44 +1,50 @@
-import { useMemo } from 'react'
-import { createStore, applyMiddleware, combineReducers } from 'redux'
-import { composeWithDevTools } from 'redux-devtools-extension'
-import thunkMiddleware from 'redux-thunk'
-import reducers from './reducers'
-import _ from 'lodash'
-
-let store:any
-
-const reducersKeysLen = _.keys(reducers).length
-const combineReducer = combineReducers((reducersKeysLen === 0) ? {} : { ...reducers })
-
-export type RootState = ReturnType<typeof combineReducer>
-
-function initStore(initialState:any) {
-  return createStore(
-    combineReducer,
-    initialState,
-    composeWithDevTools(applyMiddleware(thunkMiddleware))
-  )
-}
-
-export const initializeStore = (preloadedState:any) => {
-  let _store = store ?? initStore(preloadedState)
-
-  if (preloadedState && store) {
-    _store = initStore({
-      ...store.getState(),
-      ...preloadedState
-    })
-    store = undefined
-  }
-
-  if (typeof window === 'undefined') return _store
-
-  if (!store) store = _store
-
-  return _store
-}
-
-export function useStore(initialState:any) {
-  const memoStore = useMemo(() => initializeStore(initialState), [initialState])
-  return memoStore
-}
+import { useMemo } from 'react'
+import { combineReducers } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
+import thunkMiddleware from 'redux-thunk'
+import reducers from './reducers'
+import _ from 'lodash'
+
+let store:any
+
+const reducersKeysLen = _.keys(reducers).length
+
+let combineReducer:any = function(){}
+
+if(reducersKeysLen > 0){
+  combineReducer = combineReducers({ ...reducers })
+}
+
+export type RootState = ReturnType<typeof combineReducer>
+
+function initStore(initialState:any) {
+  return configureStore({
+    reducer: combineReducer,
+    preloadedState: initialState,
+    devTools: true,
+    middleware: [thunkMiddleware]
+  })
+}
+
+export const initializeStore = (preloadedState:any) => {
+  let _store = store ?? initStore(preloadedState)
+
+  if (preloadedState && store) {
+    _store = initStore({
+      ...store.getState(),
+      ...preloadedState
+    })
+    store = undefined
+  }
+
+  if (typeof window === 'undefined') return _store
+
+  if (!store) store = _store
+
+  return _store
+}
+
+export function useStore(initialState:any) {
+  const store = useMemo(() => initializeStore(initialState), [initialState])
+  return store
+}