nsgm-cli 2.1.5 → 2.1.7

package/README.md

@@ -4,8 +4,6 @@
 - 数据库采用 Mysql, 配置见 mysql.config.js
 - 项目配置见 project.config.js
 - Next 框架配置见 next.config.js
-- [ERISHEN](https://www.erishen.cn/)
-- [Demo](https://nsgm.erishen.cn:8443/)
   
 ## 命令
 - nsgm init    初始化项目

package/client/layout/index.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { Layout, Menu, Breadcrumb, Image, Select } 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 { LogoutOutlined, SettingOutlined, BellOutlined, UserOutlined } from '@ant-design/icons'
 
 const { Option } = Select
 const { SubMenu } = Menu
@@ -15,6 +17,90 @@ 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 = {
     topMenu: '1',
@@ -85,6 +171,7 @@ const LayoutComponent = ({ user, children }) => {
   const router = useRouter()
   const [topMenuKey, setTopMenuKey] = useState('1')
   const [sliderMenuKey, setSliderMenuKey] = useState('1')
+  const [collapsed, setCollapsed] = useState(false)
 
   // console.log('topMenuKey: ' + topMenuKey, ', sliderMenuKey: ' + sliderMenuKey, user)
 
@@ -175,47 +262,92 @@ const LayoutComponent = ({ user, children }) => {
   })
 
   return (
-    <Layout>
+    <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" mode="horizontal" defaultSelectedKeys={['1']} selectedKeys={[topMenuKey]} items={menuItems} />
-          <div className="user">
-            <Select value={user?.displayName} onChange={() => { logout() }}>
-              <Option value=''>{'退出'}</Option>
-            </Select>
+          <Menu
+            theme="dark"
+            mode="horizontal"
+            defaultSelectedKeys={['1']}
+            selectedKeys={[topMenuKey]}
+            items={menuItems}
+            className="main-menu"
+          />
+          <div className="user-actions">
+            <Space size={20} align="center">
+              <Tooltip title="通知">
+                <BellOutlined className="action-icon" />
+              </Tooltip>
+              <Tooltip title="设置">
+                <SettingOutlined className="action-icon" />
+              </Tooltip>
+              <Dropdown
+                menu={{
+                  items: [
+                    {
+                      key: '1',
+                      icon: <UserOutlined />,
+                      label: '个人中心',
+                    },
+                    {
+                      key: '2',
+                      icon: <SettingOutlined />,
+                      label: '账户设置',
+                    },
+                    {
+                      type: 'divider',
+                    },
+                    {
+                      key: '3',
+                      icon: <LogoutOutlined />,
+                      label: '退出登录',
+                      onClick: () => logout(),
+                    },
+                  ],
+                }}
+              >
+                <Space className="user-dropdown">
+                  <span className="username">{user?.displayName || '用户'}</span>
+                </Space>
+              </Dropdown>
+            </Space>
           </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' }}>
+        </StyledHeader>
+        <FlexLayout>
+          <StyledSider
+            width={220}
+            className="site-layout-background sidebar"
+            collapsible
+            collapsed={collapsed}
+            onCollapse={(value) => setCollapsed(value)}
+          >
+            <div>
+              <SideMenu
+                mode="inline"
+                defaultSelectedKeys={['slider_1_0']}
+                defaultOpenKeys={['slider_1']}
+                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) {
-                  // 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>)
+                      subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex + '_sub'}>{subText}</Breadcrumb.Item>)
                       return false
                     }
                   })
@@ -226,19 +358,12 @@ const LayoutComponent = ({ user, children }) => {
                   }
                 }
               })}
-            </Breadcrumb>
-            <Content
-              className="site-layout-background"
-              style={{
-                padding: 24,
-                margin: 0,
-                minHeight: 280
-              }}
-            >
+            </StyledBreadcrumb>
+            <StyledContent>
               {children}
-            </Content>
-          </Layout>
-        </Layout>
+            </StyledContent>
+          </ContentLayout>
+        </FlexLayout>
       </Container>
     </Layout>
   )

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/styled/common.ts

@@ -19,33 +19,29 @@ export const Container = styled.div`
 
 export const LoginContainer = styled.div`
    margin: auto;
-   margin-top: 200px;
-   width: 250px;
+   margin-top: 100px;
+   width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
-   align-items: flex-start;
-   border: 1px solid gray;
-   border-radius: 5px;
-   padding: 20px;
-
-  .row {
-    width: 100%;
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-
-    .user-input {
-      width: 210px;
-      margin-bottom: 5px;
-    }
+   align-items: center;
+   border: 1px solid #e8e8e8;
+   border-radius: 8px;
+   padding: 30px;
+   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+   background-color: #fff;
+
+  .ant-form-item {
+    margin-bottom: 20px;
   }
 
-  .right {
-    margin-top: 10px;
-    justify-content: flex-end;
+  .ant-input-affix-wrapper {
+    border-radius: 4px;
+  }
+
+  .ant-btn {
+    height: 40px;
+    border-radius: 4px;
   }
 `
 

package/client/styled/layout/index.ts

@@ -1,26 +1,148 @@
 import styled from 'styled-components'
 
 export const Container = styled.div`
+  .main-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
   .header {
     position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10;
 
     .logo {
-      float: left;
       width: 120px;
       height: 31px;
-      // margin: 16px 24px 16px 0;
+      margin-right: 24px;
+      display: flex;
+      align-items: center;
     }
 
-    .site-layout-background {
-      background: #fff;
+    .main-menu {
+      flex: 1;
     }
 
-    .user {
-      position: absolute;
-      right: 10px;
-      top: 0;
-      color: white;
+    .user-actions {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      height: 100%;
+      
+      .ant-space {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+      
+      .action-icon {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 20px;
+        cursor: pointer;
+        transition: color 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 32px;
+        width: 32px;
+        
+        &:hover {
+          color: #fff;
+        }
+      }
+      
+      .user-dropdown {
+        cursor: pointer;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+        
+        .username {
+          color: rgba(255, 255, 255, 0.85);
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+  
+  .sidebar {
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+    background: #f5f7fa;
+    border-right: 1px solid #ebeef5;
+    
+    .side-menu {
+      border-right: none;
+      background: #f5f7fa;
+      
+      .ant-menu-item {
+        margin: 0;
+        border-radius: 0;
+        
+        &:hover {
+          background-color: #e6f7ff;
+        }
+        
+        &.ant-menu-item-selected {
+          background-color: #e6f7ff;
+          border-right: 3px solid #1890ff;
+          font-weight: 500;
+        }
+      }
+      
+      .ant-menu-submenu-title {
+        &:hover {
+          background-color: #e6f7ff;
+        }
+      }
+      
+      .ant-menu-submenu-selected > .ant-menu-submenu-title {
+        color: #1890ff;
+        font-weight: 500;
+      }
     }
   }
   
+  .content-layout {
+    padding: 0 24px 24px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    
+    .breadcrumb-container {
+      margin: 16px 0;
+      font-size: 14px;
+    }
+    
+    .content-container {
+      padding: 24px;
+      margin: 0;
+      flex: 1;
+      min-height: 280px;
+      background: #fff;
+      border-radius: 4px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  
+  .site-layout-background {
+    background: #fff;
+  }
+  
+  .ant-layout-sider-trigger {
+    background: #e6f7ff;
+    color: #1890ff;
+    border-top: 1px solid #ebeef5;
+    border-right: 1px solid #ebeef5;
+    
+    &:hover {
+      background: #bae7ff;
+    }
+  }
 `

package/client/styled/template/manage.ts

@@ -2,15 +2,76 @@ import styled from 'styled-components'
 
 export const Container = styled.div`
   margin: 20px;
+  
+  .ant-table {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    }
+  }
+  
+  .table-row-light {
+    background-color: #ffffff;
+  }
+  
+  .table-row-dark {
+    background-color: #f9f9f9;
+  }
+  
+  .ant-table-thead > tr > th {
+    background-color: #f0f5ff;
+    color: #1890ff;
+    font-weight: 500;
+    padding: 12px 16px;
+  }
+  
+  .ant-table-tbody > tr > td {
+    padding: 12px 16px;
+    transition: background-color 0.3s;
+  }
+  
+  .page-title {
+    font-size: 24px;
+    font-weight: 500;
+    color: #1890ff;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #f0f0f0;
+    position: relative;
+    
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 100px;
+      height: 3px;
+      background: linear-gradient(90deg, #1890ff, #69c0ff);
+      border-radius: 3px;
+    }
+  }
 `
 
 export const SearchRow = styled.div`
-  margin: 10px;
+  margin: 10px 0 20px 0;
+  padding: 16px 20px;
   display: flex;
   flex: 1;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  }
 `
 
 export const ModalContainer = styled.div`
@@ -21,6 +82,7 @@ export const ModalContainer = styled.div`
     justify-content: flex-start;
     align-items: flex-start;
     height: 50px;
+    margin-bottom: 16px;
 
     label {
       display: flex;
@@ -29,11 +91,33 @@ export const ModalContainer = styled.div`
       align-items: flex-start;
       width: 80px;
       height: 32px;
-      margin-right: 5px;
+      margin-right: 16px;
+      font-weight: 500;
+      color: #333;
+      position: relative;
+      
+      &:after {
+        content: '';
+        position: absolute;
+        left: -8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        background: #1890ff;
+        border-radius: 3px;
+      }
     }
 
     input {
       flex: 1;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+      
+      &:hover, &:focus {
+        border-color: #40a9ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      }
     }
 
     .row {