feat:userLayouts init

.gitignore

@@ -17,3 +17,6 @@
 /src/.umi-production
 /src/.umi-test
 /.env.local
+
+# project
+# mockStatic

config/index.ts → config/config.ts

@@ -4,8 +4,9 @@ import proxy from './proxy'
 import theme from './theme.config'
 
 export default defineConfig({
-  title: 'God-Template',
-  layout: {},
+  title: '瓴犀开放平台',
+  // layout: {},
+  antd: {},
   locale: {
     antd: true,
     // 默认情况下，当前语言环境的识别按照：localStorage 中 umi_locale 值 > 浏览器检测 > default 设置的默认语言 > 中文
@@ -16,8 +17,8 @@ export default defineConfig({
   },
   routes,
   extraBabelPlugins: [
-    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
-    ['import', { libraryName: 'god', libraryDirectory: 'es', style: true }]
+    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'antd'],
+    ['import', { libraryName: 'god', libraryDirectory: 'es', style: true }, 'god']
   ],
   history: {
     type: 'hash', // 'brower' | 'hash'
@@ -48,7 +49,7 @@ export default defineConfig({
     loading: '@/components/Loading'
   },
   // icon
-  favicon: '',
+  // favicon: '',
   hash: true,
   /**
    * 会自动添加到网页html的顶部

config/router.ts

@@ -3,7 +3,16 @@
  * @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
  */
 const router = [
-  { path: '/', component: '@/pages/index' },
+  {
+    path: '/login',
+    component: '@/layouts/UserLayouts',
+    routes: [
+      {
+        path: '/login',
+        component: '@/pages/index'
+      }
+    ]
+  }
 ]
 
 export default router
\ No newline at end of file

config/theme.config.ts

 export default {
-  
+  '@primary-color': '#00B37A'
 }
\ No newline at end of file

package.json

@@ -20,9 +20,10 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@ant-design/icons": "^4.2.1",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
-    "god": "^1.1.21",
+    "god": "^1.1.26",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/layouts/UserLayouts.tsx

+import React from 'react';
+import styles from './styles/UserLayouts.less'
+import UserHeader from './components/UserHeader';
+import BaseFooter from './components/BaseFooter';
+
+/**
+ * 登录、注册等用户界面布局
+ * @author xjm
+ */
+const UserLayouts:React.FC = (props) => {
+  return (
+    <div className={styles.lingxiBusinessUserLayout}>
+      <UserHeader/>
+      <div className={styles.lingxiBusinessUserBg}>
+        { props.children }
+        <BaseFooter/>
+      </div>
+    </div>
+  )
+}
+
+export default UserLayouts
\ No newline at end of file

src/layouts/components/BaseFooter.tsx

+import React from 'react'
+import styles from '../styles/UserLayouts.less'
+
+const BaseFooter: React.FC = (props) => {
+  return (
+    <footer className={styles.lingxiBusinessUserFooter}>Copy Right©广州市数商云网络科技有限公司 粤ICP备13044797号-5</footer>
+  )
+}
+
+export default BaseFooter
\ No newline at end of file

src/layouts/components/HeaderDropdown.tsx

+import React, { useState } from 'react'
+import { Dropdown, Space, Menu, Button } from 'antd'
+import ChinaImg from '../../../mockStatic/china.png'
+import gou from '../../../mockStatic/gou.png'
+import japenImg from '../../../mockStatic/japen.png'
+import korenImg from '../../../mockStatic/koren.png'
+import us from '../../../mockStatic/us.png'
+import { CaretDownOutlined } from '@ant-design/icons'
+
+interface countryItem {
+  name: string,
+  key: string,
+  icon: string
+}
+const countryList: countryItem[] = [
+  {
+    name: '简体中文-ZH',
+    key: 'cn',
+    icon: ChinaImg
+  },
+  {
+    name: 'English-EN',
+    key: 'en',
+    icon: us
+  },
+  {
+    name: '日本語-JP',
+    key: 'jp',
+    icon: japenImg
+  },
+  {
+    name: '한국어-KO',
+    key: 'ko',
+    icon: korenImg
+  }
+]
+const HeaderDropdown: React.FC = () => {
+  // 此处暂时无接口， 对接接口后需用枚举类型做补充
+  const [select, setSelect] = useState<countryItem>({
+    key: 'cn',
+    name: '简体中文-ZH',
+    icon: ChinaImg
+  })
+
+  const menuHeaderDropdown = (
+    <Menu selectedKeys={[]}>
+      {
+        countryList.map(v => <Menu.Item key={v.key} onClick={() => setSelect(v)}>
+          <Space>
+            {select.key === v.key ? <img src={gou} style={{width: 20, height: 20}}/> : <div style={{width: 20, height: 20}}></div> }
+            <img src={v.icon} style={{width: 24, height: 17}}/>
+            <span>{v.name}</span>
+          </Space>
+        </Menu.Item>)
+      }
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menuHeaderDropdown} placement='bottomRight'>
+      <Space style={{cursor: 'pointer'}} size={5}>
+        <img src={select.icon} style={{width: 24, height: 17}}/>
+        <span>{select.name}</span>
+        <CaretDownOutlined />
+      </Space>
+    </Dropdown>
+  )
+}
+
+export default HeaderDropdown
\ No newline at end of file

src/layouts/components/UserHeader.tsx

+import React from 'react';
+import styles from '../styles/UserLayouts.less'
+import { Row, Col } from 'antd';
+import { isString } from '@/utils/type';
+
+import HeaderDropdown from './HeaderDropdown';
+
+export interface UserHeaderProps {
+  logo?: React.ReactNode,
+  countryList?: {key: string, name: string, icon: string}[]
+}
+/**
+ * 登录、注册等用户头部
+ */
+const UserHeader:React.FC<UserHeaderProps> = (props) => {
+  return (
+    <div className={styles.lingxiBusinessUserHeader}>
+      <Row className={styles.lingxiBusinessMarginContent} justify='space-between' align='middle' style={{height: '100%'}}>
+        <Col>
+          { isString(props.logo) ? <img src={props.logo} className={styles.lingxiBusinessLogo}/> :  props.logo }
+        </Col>
+        <Col>
+          <HeaderDropdown/>
+        </Col>
+      </Row>
+    </div>
+  )
+}
+
+UserHeader.defaultProps = {
+  // 开发环境下的替代logo
+  logo: require('../../../mockStatic/logo.png'),
+  countryList: [
+    {
+      name: '中国',
+      key: 'China',
+      icon: require('../../../mockStatic/china.png')
+    },
+    {
+      name: '美国',
+      key: 'US',
+      icon: require('../../../mockStatic/us.png')
+    }
+  ]
+}
+
+export default UserHeader
\ No newline at end of file

src/layouts/styles/Layouts.less

+@import '~@/styles/theme.less';
+
+.@{prefix}-margin_content {
+  width: 1190px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.@{prefix}-logo {
+  max-width: 100%;
+  height: 48px;
+}
\ No newline at end of file

src/layouts/styles/UserLayouts.less

+@import './Layouts.less';
+
+// global
+.@{prefix}-user-layout {
+  width: 100%;
+}
+
+.@{prefix}-user-bg {
+  width: 100%;
+  min-height: @layout-min-content-height;
+  background: url('../../../mockStatic/login_bg.jpg') no-repeat center;
+  background-size: cover;
+}
+
+// header
+.@{prefix}-user-header {
+  height: @header-nav-height;
+  width: 100%;
+  background: @white;
+}
+
+// footer
+.@{prefix}-user-footer {
+  padding: 32px;
+  font-size: 14px;
+  color: #97A0AF;
+  text-align: center;
+}
\ No newline at end of file

src/layouts/styles/UserLayouts.less.d.ts

+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'lingxi-business-logo': string;
+  'lingxi-business-margin_content': string;
+  'lingxi-business-user-bg': string;
+  'lingxi-business-user-footer': string;
+  'lingxi-business-user-header': string;
+  'lingxi-business-user-layout': string;
+  'lingxiBusinessLogo': string;
+  'lingxiBusinessMarginContent': string;
+  'lingxiBusinessUserBg': string;
+  'lingxiBusinessUserFooter': string;
+  'lingxiBusinessUserHeader': string;
+  'lingxiBusinessUserLayout': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

src/pages/index.tsx

-import React, {Component, useState, useRef, useEffect} from 'react';
-import { Button } from 'god';
-import styles from './index.less';
-import { inject, observer } from 'mobx-react'
-import { IUserModule } from '@/module/userModule'
-import { IStore } from '@/store';
-import RequestDemo from '@/components/Request';
+import React, {Component} from 'react';
 
-export interface IIndexProps {
-  userStore?: IUserModule
-}
-
-@inject((store: IStore) => ({
-  userStore: store.userStore
-}))
-@observer
-class Index extends Component<IIndexProps, {}> {
+class Index extends Component<{}, {}> {
   render() {
-    const { name, setName, printNameAndAge, getAsyncAge } = this.props.userStore!
     return <div>
-      <h3>{name}</h3>
-      
-      <h3>{printNameAndAge}</h3>
-      <Button onClick={() => {setName('Jim')}}>change name</Button>
-      <Button onClick={() => {getAsyncAge()}}>async change name</Button>
-
-      <RequestDemo/>
+      index
     </div>
   }
 }

src/styles/theme.less

+/**
+* global
+*/
+@prefix: lingxi-business;
+
+// layout
+@header-nav-height: 64px;
+@layout-min-content-height: calc(100vh - @header-nav-height);
+
+/**
+* colors
+*/
+
+@white: #fff;

src/utils/type.ts

+export function isString(str):str is string {
+  return typeof str === 'string'
+}
\ No newline at end of file

tsconfig.json

@@ -13,6 +13,7 @@
     "strict": true,
     "paths": {
       "@/*": ["src/*"],
+      "@mock/*": ["mockStatic/*"],
       "@@/*": ["src/.umi/*"]
     },
     "allowSyntheticDefaultImports": true