nsgm-cli 2.1.5 → 2.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsgm-cli",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "A CLI tool to run Next/Style-components and Graphql/Mysql fullstack project",
   "main": "index.js",
   "scripts": {
@@ -96,8 +96,8 @@
     "mysql2": "3.14.2",
     "next": "15.4.4",
     "rc-util": "5.44.4",
-    "react": "^19",
-    "react-dom": "^19",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-redux": "9.2.0",
     "redux": "5.0.1",
     "replace": "1.2.2",
@@ -128,8 +128,8 @@
     "@types/mysql": "2.15.27",
     "@types/next": "9.0.0",
     "@types/node": "^24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "18.3.23",
+    "@types/react-dom": "18.3.7",
     "@types/react-redux": "7.1.34",
     "@types/shelljs": "0.8.17",
     "@types/styled-components": "5.1.34",

package/pages/index.tsx

@@ -3,6 +3,10 @@ import _ from 'lodash'
 import { Container } from '../client/styled/common'
 import getConfig from 'next/config'
 import React from 'react'
+import { Card, Typography, Divider, Row, Col, Tag } from 'antd'
+import { CodeOutlined, BookOutlined, DatabaseOutlined, SettingOutlined } from '@ant-design/icons'
+
+const { Title, Paragraph, Text } = Typography
 
 const md = new MarkdownIt({
   html: true,
@@ -14,56 +18,96 @@ const nextConfig = getConfig()
 const { publicRuntimeConfig } = nextConfig
 const { env } = publicRuntimeConfig
 
-const renderArr: any = []
-
-renderArr.push('# NSGM CLI ' + env)
-renderArr.push('- 技术栈: [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/)')
-renderArr.push('- 全栈架构，代码模板生成，快速开发')
-renderArr.push('- 数据库采用 Mysql, 配置见 mysql.config.js')
-renderArr.push('- 项目配置见 project.config.js')
-renderArr.push('- Next 框架配置见 next.config.js')
-
-renderArr.push('## 命令')
-renderArr.push('- nsgm init     初始化项目')
-renderArr.push('- nsgm upgrade  升级项目基础文件')
-renderArr.push('- nsgm create   创建模板页面')
-renderArr.push('- nsgm delete   删除模板页面')
-renderArr.push('- nsgm deletedb 删除模板页面及数据库表')
-renderArr.push('- nsgm dev      开发模式')
-renderArr.push('- nsgm start    生产模式')
-renderArr.push('- nsgm build    编译')
-renderArr.push('- nsgm export   导出静态页面')
 
-renderArr.push('## 参数')
-renderArr.push('- dictionary: 在 export/init 的时候使用, 默认 webapp, 譬如: nsgm export/init dictionary=webapp 或者 nsgm export/init webapp')
-renderArr.push('- controller: 在 create/delete 的时候使用， 必须有。譬如：nsgm create/delete math')
-renderArr.push('- action:     在 create/delete 的时候使用， 默认 manage, 跟在 controller 后面， 譬如 nsgm create/delete math test')
+const Page = ({ html }) => {
+  return (
+    <Container>
+      <Typography style={{ padding: '24px' }}>
+        <Title level={1}>NSGM CLI</Title>
+        <Paragraph>
+          <Row gutter={[16, 16]}>
+            <Col><Tag color="blue">Next</Tag></Col>
+            <Col><Tag color="purple">Styled-components</Tag></Col>
+            <Col><Tag color="magenta">Graphql</Tag></Col>
+            <Col><Tag color="green">Mysql</Tag></Col>
+          </Row>
+        </Paragraph>
+        <Paragraph>
+          全栈架构，代码模板生成，快速开发
+        </Paragraph>
 
+        <Card style={{ marginBottom: '24px' }}>
+          <Row gutter={[24, 16]}>
+            <Col xs={24} md={8}>
+              <Card type="inner" title={<><DatabaseOutlined /> 数据库配置</>}>
+                数据库采用 Mysql, 配置见 mysql.config.js
+              </Card>
+            </Col>
+            <Col xs={24} md={8}>
+              <Card type="inner" title={<><SettingOutlined /> 项目配置</>}>
+                项目配置见 project.config.js
+              </Card>
+            </Col>
+            <Col xs={24} md={8}>
+              <Card type="inner" title={<><CodeOutlined /> 框架配置</>}>
+                Next 框架配置见 next.config.js
+              </Card>
+            </Col>
+          </Row>
+        </Card>
 
-const Page = ({ html }) => {
+        <Title level={2}><BookOutlined /> 命令</Title>
+        <Divider />
 
-  const createMarkup = () => {
-    return {
-      __html: html
-    }
-  }
+        <Row gutter={[16, 16]}>
+          <Col xs={24} md={8}>
+            <Card hoverable>
+              <Title level={4}>项目管理</Title>
+              <ul>
+                <li><Text strong>nsgm init</Text> - 初始化项目</li>
+                <li><Text strong>nsgm upgrade</Text> - 升级项目基础文件</li>
+              </ul>
+            </Card>
+          </Col>
+          <Col xs={24} md={8}>
+            <Card hoverable>
+              <Title level={4}>模板操作</Title>
+              <ul>
+                <li><Text strong>nsgm create</Text> - 创建模板页面</li>
+                <li><Text strong>nsgm delete</Text> - 删除模板页面</li>
+                <li><Text strong>nsgm deletedb</Text> - 删除模板页面及数据库表</li>
+              </ul>
+            </Card>
+          </Col>
+          <Col xs={24} md={8}>
+            <Card hoverable>
+              <Title level={4}>运行与构建</Title>
+              <ul>
+                <li><Text strong>nsgm dev</Text> - 开发模式</li>
+                <li><Text strong>nsgm start</Text> - 生产模式</li>
+                <li><Text strong>nsgm build</Text> - 编译</li>
+                <li><Text strong>nsgm export</Text> - 导出静态页面</li>
+              </ul>
+            </Card>
+          </Col>
+        </Row>
 
-  return (
-    <Container>
-      <div dangerouslySetInnerHTML={createMarkup()} />
+        <Title level={2} style={{ marginTop: '24px' }}>参数</Title>
+        <Divider />
+        <Card>
+          <ul>
+            <li><Text strong>dictionary:</Text> 在 export/init 的时候使用, 默认 webapp, 譬如: nsgm export/init dictionary=webapp 或者 nsgm export/init webapp</li>
+            <li><Text strong>controller:</Text> 在 create/delete 的时候使用， 必须有。譬如：nsgm create/delete math</li>
+            <li><Text strong>action:</Text> 在 create/delete 的时候使用， 默认 manage, 跟在 controller 后面， 譬如 nsgm create/delete math test</li>
+          </ul>
+        </Card>
+      </Typography>
     </Container>
   )
 }
 
 Page.getInitialProps = () => {
-  let html = ''
-  _.each(renderArr, (item, index) => {
-    html += md.render(item)
-  })
-
-  return {
-    html
-  }
+  return {}
 }
 
 export default Page

package/pages/login.tsx

@@ -4,6 +4,8 @@ import { LoginContainer } from '../client/styled/common'
 // import getConfig from 'next/config'
 import React, { useState } from 'react'
 import { handleXSS } from '../client/utils/common'
+import { Input, Button, Form, Typography, message } from 'antd'
+import { UserOutlined, LockOutlined } from '@ant-design/icons'
 
 const md = new MarkdownIt({
   html: true,
@@ -31,11 +33,18 @@ const Page = ({ html }) => {
 
   const doLogin = () => {
     if (typeof window !== "undefined") {
-      let locationHref = window.location.origin + "?ticket=XXX"
-      if (userName !== '') {
-        locationHref += "&name=" + btoa(handleXSS(userName + "," + userPassword))
-        window.location.href = locationHref
+      if (userName === '') {
+        message.error('请输入用户名');
+        return;
+      }
+      if (userPassword === '') {
+        message.error('请输入密码');
+        return;
       }
+
+      let locationHref = window.location.origin + "?ticket=XXX"
+      locationHref += "&name=" + btoa(handleXSS(userName + "," + userPassword))
+      window.location.href = locationHref
     }
   }
 
@@ -50,17 +59,34 @@ const Page = ({ html }) => {
   return (
     <LoginContainer>
       <div dangerouslySetInnerHTML={createMarkup()} />
-      <input type="text" style={{ opacity: 0, position: "absolute", width: 0, height: 0 }}></input>
-      <input type="password" style={{ opacity: 0, position: "absolute", width: 0, height: 0 }}></input>
-      <div className='row'>
-        <input type="text" name="user-name" className='user-input' autoComplete='off' onChange={doChangeName} value={userName}></input>
-      </div>
-      <div className='row'>
-        <input type="password" name="user-password" className='user-input' autoComplete='off' onChange={doChangePassword} value={userPassword}></input>
-      </div>
-      <div className='row right'>
-        <button onClick={doLogin}>login</button>
-      </div>
+      <Typography.Title level={3} style={{ textAlign: 'center', marginBottom: 24 }}>系统登录</Typography.Title>
+      <Form layout="vertical" style={{ width: '100%' }}>
+        <Form.Item>
+          <Input
+            prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+            placeholder="用户名"
+            size="large"
+            value={userName}
+            onChange={doChangeName}
+            autoComplete="off"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Input.Password
+            prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+            placeholder="密码"
+            size="large"
+            value={userPassword}
+            onChange={doChangePassword}
+            autoComplete="off"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" onClick={doLogin} size="large" block>
+            登录
+          </Button>
+        </Form.Item>
+      </Form>
     </LoginContainer>
   )
 }

package/pages/template/manage.tsx

@@ -1,6 +1,7 @@
 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 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'
@@ -16,12 +17,56 @@ import { saveAs } from 'file-saver'
 const pageSize = 100
 const dateFormat = 'YYYY-MM-DD'
 const currentDate = dayjs().format(dateFormat)
-console.log('currentDate', currentDate)
 
 const keyTitles = {
   name: '名称'
 }
 
+// styled-components
+const StyledButton = styled(Button) <{ $primary?: boolean; $export?: boolean; $import?: boolean; $danger?: boolean }>`
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+    ${props => props.$export && `
+      background-color: #f6ffed;
+      color: #52c41a;
+      border-color: #b7eb8f;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s ease;
+    `}
+    ${props => props.$import && `
+      background-color: #e6f7ff;
+      color: #1890ff;
+      border-color: #91d5ff;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s ease;
+    `}
+    ${props => props.$danger && `
+      background-color: #fff1f0;
+      border-color: #ffa39e;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s ease;
+    `}
+  `
+const StyledInput = styled(Input)`
+    width: 200px;
+    border-radius: 6px;
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+  `
+const StyledTable = styled(Table)`
+    margin-top: 16px;
+    border-radius: 8px;
+    overflow: hidden;
+  `
+const ModalTitle = styled.div`
+    color: #1890ff;
+    font-weight: 500;
+  `
+const ModalInput = styled(Input)`
+    border-radius: 4px;
+  `
+
 const Page = ({ template }) => {
   const dispatch = useDispatch()
   const [isModalVisiable, setIsModalVisible] = useState(false)
@@ -36,14 +81,12 @@ const Page = ({ template }) => {
 
   const state = useSelector((state: RootState) => state)
   const { templateManage }: any = state
-  console.log('templateManage', templateManage)
 
   if (!templateManage.firstLoadFlag) {
     template = templateManage.template
   }
 
   const { totalCounts, items: templateItems } = _.cloneDeep(template)
-  console.log('template', template)
 
   _.each(templateItems, (item, index) => {
     const { id } = item
@@ -58,7 +101,9 @@ const Page = ({ template }) => {
       key: 'id',
       sorter: (a: any, b: any) => a.id - b.id,
       sortDirections: ['descend', 'ascend'],
-      showSorterTooltip: false
+      showSorterTooltip: false,
+      width: '15%',
+      align: 'center'
     },
     {
       title: keyTitles.name,
@@ -66,23 +111,25 @@ const Page = ({ template }) => {
       key: 'name',
       sorter: (a: any, b: any) => a.name.length - b.name.length,
       sortDirections: ['descend', 'ascend'],
-      showSorterTooltip: false
+      showSorterTooltip: false,
+      width: '60%',
+      ellipsis: true
     },
     {
       title: '操作',
       dataIndex: '',
+      width: '25%',
+      align: 'center',
       render: (_: any, record: any) => {
         return (
-          <Space>
-            <Button onClick={() => {
-              console.log('record', record)
+          <Space size="small">
+            <Button type="primary" size="small" onClick={() => {
               updateTemplate(record)
-            }}>修改</Button>
-            <Button onClick={() => {
-              console.log('record', record)
+            }} style={{ borderRadius: '4px' }}>修改</Button>
+            <Button danger size="small" onClick={() => {
               const { id } = record
               deleteTemplate(id)
-            }}>删除</Button>
+            }} style={{ borderRadius: '4px' }}>删除</Button>
           </Space>
         )
       }
@@ -91,7 +138,7 @@ const Page = ({ template }) => {
 
   const rowSelection = {
     onChange: (selectedRowKeys: any, selectedRows: any) => {
-      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+      //
       setBatchDelIds(selectedRowKeys)
     }
   }
@@ -138,7 +185,7 @@ const Page = ({ template }) => {
     const modalObj = {
       name: handleXSS(modalName)
     }
-    console.log('handleOk', modalObj)
+    //
 
     const checkResult = checkModalObj(modalObj)
 
@@ -192,8 +239,8 @@ const Page = ({ template }) => {
       wb.xlsx.writeBuffer().then((data) => {
         const blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
         saveAs(blob, "Template.xlsx")
-      }).catch((error) => {
-        console.error('导出失败', error?.message)
+      }).catch(() => {
+        // 导出失败
       })
     } else {
       message.info("没有数据无需导出")
@@ -204,9 +251,7 @@ const Page = ({ template }) => {
     name: 'file',
     action: '/rest/template/import',
     onChange(info: any) {
-      if (info.file.status !== 'uploading') {
-        console.log(info.file, info.fileList)
-      }
+      //
 
       if (info.file.status === 'done') {
         message.success(`${info.file.name} 文件上传成功`)
@@ -236,43 +281,86 @@ const Page = ({ template }) => {
 
   return (
     <Container>
+      <div className="page-title">模板管理</div>
       <ConfigProvider locale={locale}>
         <SearchRow>
-          <Space>
-            <Button type="primary" onClick={createTemplate}>
-              新增
-            </Button>
-            <Input value={searchName} placeholder="" onChange={(e) => setSearchName(e.target.value)} />
-            <Button type="primary" onClick={doSearch}>
-              搜索
-            </Button>
-            <Button type="primary" onClick={exportTemplate}>
-              导出
-            </Button>
-            <Upload {...uploadProps}>
-              <Button icon={<UploadOutlined rev={undefined} />}>导入</Button>
-            </Upload>
-            <Button type="primary" onClick={batchDeleteTemplate}>
-              批量删除
-            </Button>
+          <Space size="middle" wrap>
+            <Space size="small">
+              <StyledButton type="primary" onClick={createTemplate} $primary>
+                <i className="fa fa-plus" style={{ marginRight: '5px' }}></i>
+                新增
+              </StyledButton>
+              <StyledInput
+                value={searchName}
+                placeholder="请输入名称搜索"
+                allowClear
+                onChange={(e) => setSearchName(e.target.value)}
+                onPressEnter={doSearch}
+              />
+              <StyledButton type="primary" onClick={doSearch} $primary>
+                <i className="fa fa-search" style={{ marginRight: '5px' }}></i>
+                搜索
+              </StyledButton>
+            </Space>
+            <Space size="small">
+              <StyledButton onClick={exportTemplate} icon={<UploadOutlined rev={undefined} rotate={180} />} $export>
+                导出
+              </StyledButton>
+              <Upload {...uploadProps}>
+                <StyledButton icon={<UploadOutlined rev={undefined} />} $import>
+                  导入
+                </StyledButton>
+              </Upload>
+              <StyledButton danger onClick={batchDeleteTemplate} $danger>
+                批量删除
+              </StyledButton>
+            </Space>
           </Space>
         </SearchRow>
-        <Table rowSelection={{
-          type: 'checkbox',
-          ...rowSelection,
-        }} dataSource={dataSource} columns={columns} pagination={{
-          total: totalCounts,
-          pageSize: pageSize,
-          onChange: (page, pageSize) => {
-            console.log('onChange', page, pageSize)
-            dispatch(searchTemplate(page - 1, pageSize, { name: handleXSS(searchName) }))
-          }
-        }} />
-        <Modal title={(modalId == 0 ? "新增" : "修改") + " template"} open={isModalVisiable} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
+        <StyledTable
+          rowSelection={{
+            type: 'checkbox',
+            ...rowSelection,
+          }}
+          dataSource={dataSource}
+          columns={columns}
+          bordered
+          rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark'}
+          pagination={{
+            total: totalCounts,
+            pageSize: pageSize,
+            showSizeChanger: false,
+            showQuickJumper: true,
+            showTotal: (total) => `共 ${total} 条记录`,
+            onChange: (page, pageSize) => {
+              dispatch(searchTemplate(page - 1, pageSize, { name: handleXSS(searchName) }))
+            },
+            style: { marginTop: '16px', marginBottom: '16px' }
+          }}
+        />
+        <Modal
+          title={<ModalTitle>{(modalId == 0 ? "新增" : "修改") + " 模板"}</ModalTitle>}
+          open={isModalVisiable}
+          onOk={handleOk}
+          onCancel={handleCancel}
+          okText="确认"
+          cancelText="取消"
+          centered
+          maskClosable={false}
+          destroyOnClose
+          okButtonProps={{ style: { borderRadius: '4px' } }}
+          cancelButtonProps={{ style: { borderRadius: '4px' } }}
+        >
           <ModalContainer>
             <div className="line">
-              <label>{keyTitles.name}</label>
-              <Input value={modalName} placeholder="" onChange={(e) => setModalName(e.target.value)} />
+              <label>{keyTitles.name}：</label>
+              <ModalInput
+                value={modalName}
+                placeholder="请输入名称"
+                allowClear
+                autoFocus
+                onChange={(e) => setModalName(e.target.value)}
+              />
             </div>
           </ModalContainer>
         </Modal>
@@ -285,13 +373,10 @@ Page.getInitialProps = async () => {
   let template = null
 
   await getTemplateService(0, pageSize).then((res: any) => {
-    console.log('res', res)
     const { data } = res
     template = data.template
   })
 
-  console.log('template-getInitialProps', template)
-
   return {
     template
   }