nsgm-cli 2.1.5 → 2.1.6

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 { Layout, Menu, Breadcrumb, Image, Select, Avatar, 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 getConfig from 'next/config'
+import { UserOutlined, LogoutOutlined, SettingOutlined, BellOutlined } from '@ant-design/icons'
 
 const { Option } = Select
 const { SubMenu } = Menu
@@ -15,6 +17,34 @@ 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;
+    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;
+  `
+const SideMenu = styled(Menu)`
+    height: 100%;
+    border-right: 0;
+  `
+const ContentLayout = styled(Layout)`
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  `
+
 const getLocationKey = () => {
   let result = {
     topMenu: '1',
@@ -85,6 +115,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,44 +206,92 @@ const LayoutComponent = ({ user, children }) => {
   })
 
   return (
-    <Layout>
+    <Layout className="main-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">
-            <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={16} 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' }}>
+        <FlexLayout>
+          <StyledSider
+            width={200}
+            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>
+            <SiderFooter collapsed={collapsed}>
+              {collapsed ? '©' : '© 2025 NSGM'}
+            </SiderFooter>
+          </StyledSider>
+          <ContentLayout className="content-layout">
+            <Breadcrumb className="breadcrumb-container">
               {_.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>)
@@ -228,17 +307,12 @@ const LayoutComponent = ({ user, children }) => {
               })}
             </Breadcrumb>
             <Content
-              className="site-layout-background"
-              style={{
-                padding: 24,
-                margin: 0,
-                minHeight: 280
-              }}
+              className="site-layout-background content-container"
             >
               {children}
             </Content>
-          </Layout>
-        </Layout>
+          </ContentLayout>
+        </FlexLayout>
       </Container>
     </Layout>
   )

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 {