Merge branch 'develop' of github.com:Tencent/tdesign-react-starter in…

…to main

.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
     'import/no-unresolved': 'off',
     'import/order': 'off',
     'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     // 关闭variable必须全部大写规则
     '@typescript-eslint/naming-convention': [
       'error',

.github/workflows/issue-synchronize.temp.yml

@@ -0,0 +1,17 @@
+# force copy from tencent/tdesign
+name: Issue Add Assigness
+
+on:
+  issues:
+    types: [opened, reopened]
+
+jobs:
+  mark-duplicate:
+    runs-on: ubuntu-latest
+    steps:
+      # https://docs.github.com/cn/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#issues
+      - uses: 94dreamer/create-report@main
+        with:
+          wxhook: ${{ secrets.WX_HOOK_URL }}
+          token: ${{ secrets.GITHUB_TOKEN  }}
+          type: 'issue'

package.json

@@ -21,6 +21,7 @@
     "@types/lodash": "^4.14.178",
     "@types/mockjs": "^1.0.6",
     "@types/node": "^16.11.18",
+    "@types/qrcode.react": "^1.0.2",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.2",
@@ -49,6 +50,7 @@
     "echarts-for-react": "^3.0.2",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
+    "qrcode.react": "^2.0.0",
     "query-string": "^6.12.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/configs/menu.ts

@@ -6,6 +6,8 @@ import {
   LayersIcon,
   CheckCircleIcon,
   UserCircleIcon,
+  LogoutIcon,
+  RootListIcon,
 } from 'tdesign-icons-react';
 
 export interface IMenuItem {
@@ -154,10 +156,22 @@ export const menu: IMenuItem[] = [
       },
     ],
   },
+  {
+    key: 'login',
+    label: '登录页',
+    Icon: LogoutIcon,
+    children: [
+      {
+        key: '/login/index',
+        label: '登录中心',
+        path: '/login',
+      },
+    ],
+  },
   {
     key: 'level1',
     label: '一级菜单',
-    Icon: UserCircleIcon,
+    Icon: RootListIcon,
     children: [
       {
         key: '/level1/level2',

src/configs/routes.ts

@@ -19,13 +19,15 @@ import Result403 from 'pages/Result/403';
 import Result404 from 'pages/Result/404';
 import Result500 from 'pages/Result/500';
 import ResultBrowserIncompatible from 'pages/Result/BrowserIncompatible';
+import Login from 'pages/Login';
 
 interface IRouteItem {
   key?: string;
   path: string;
   exact?: boolean;
   isHome?: boolean;
   Component: React.FC<BrowserRouterProps>;
+  isFullPage?: boolean;
 }
 
 export const routes: IRouteItem[] = [
@@ -106,4 +108,9 @@ export const routes: IRouteItem[] = [
     path: '/result/browser-incompatible',
     Component: ResultBrowserIncompatible,
   },
+  {
+    path: '/login',
+    Component: Login,
+    isFullPage: true,
+  },
 ];

src/layouts/components/Container.tsx

@@ -2,38 +2,37 @@ import React from 'react';
 import { Layout } from 'tdesign-react';
 import { ELayout } from 'modules/global';
 import Header from './Header';
-import Content from './Content';
 import Footer from './Footer';
 import Menu from './Menu';
 
 import Style from './Content.module.less';
 
-const SideLayout = React.memo(() => (
+const SideLayout = React.memo(({ children }: { children: React.ReactNode }) => (
   <Layout className={Style.sidePanel}>
     <Menu showLogo showOperation />
     <Layout className={Style.sideContainer}>
       <Header />
-      <Content />
+      {children}
       <Footer />
     </Layout>
   </Layout>
 ));
 
-const TopLayout = React.memo(() => (
+const TopLayout = React.memo(({ children }: { children: React.ReactNode }) => (
   <Layout className={Style.topPanel}>
     <Header showMenu={true} />
-    <Content />
+    {children}
     <Footer />
   </Layout>
 ));
 
-const MixLayout = React.memo(() => (
+const MixLayout = React.memo(({ children }: { children: React.ReactNode }) => (
   <Layout className={Style.mixPanel}>
     <Header />
     <Layout className={Style.mixMain}>
       <Menu />
       <Layout className={Style.mixContent}>
-        <Content />
+        {children}
         <Footer />
       </Layout>
     </Layout>

src/layouts/components/Content.tsx

@@ -2,21 +2,40 @@ import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import { Layout } from 'tdesign-react';
 import { routes } from 'configs/routes';
+import { useAppSelector } from 'modules/store';
+import { selectGlobal } from 'modules/global';
 import UnAuthorized from 'pages/Result/403';
 import NotFound from 'pages/Result/404';
 import ServerError from 'pages/Result/500';
+import LayoutMap from './Container';
 
 const { Content } = Layout;
 
 export default React.memo(() => {
   const home = routes.find((item) => item.isHome);
+  const globalState = useAppSelector(selectGlobal);
+  const Container = LayoutMap[globalState.layout];
   return (
     <Content>
       <Switch>
         {home && <Redirect path='/' exact to={home.path} />}
-        {routes.map((route, index) => (
-          <Route key={index} exact={route.exact} path={route.path} component={route.Component} />
-        ))}
+        {routes.map((route, index) => {
+          const { Component } = route;
+          return route.isFullPage ? (
+            <Route key={index} exact={route.exact} path={route.path} component={Component} />
+          ) : (
+            <Route
+              key={index}
+              exact={route.exact}
+              path={route.path}
+              render={() => (
+                <Container>
+                  <Component />
+                </Container>
+              )}
+            />
+          );
+        })}
         <Route path='/403' component={UnAuthorized} />
         <Route path='/500' component={ServerError} />
         <Route path='*' component={NotFound} />

src/layouts/components/HeaderIcon.module.less

@@ -1,8 +1,15 @@
 .dropdown {
   :global {
     .t-dropdown__item {
-      max-width: none!important;
+      max-width: none !important;
       width: 117px;
+      &-text {
+        display: flex;
+        align-items: center;
+      }
+      .t-icon {
+        margin-right: 8px;
+      }
     }
   }
 }

src/layouts/components/HeaderIcon.tsx

@@ -1,11 +1,22 @@
 import React, { memo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, Popup, Badge, Dropdown, Row, Col } from 'tdesign-react';
-import { Icon, LogoGithubIcon, MailIcon, HelpCircleIcon, SettingIcon } from 'tdesign-icons-react';
+import {
+  Icon,
+  LogoGithubIcon,
+  MailIcon,
+  HelpCircleIcon,
+  SettingIcon,
+  PoweroffIcon,
+  UserCircleIcon,
+} from 'tdesign-icons-react';
 import { useAppDispatch } from 'modules/store';
 import { toggleSetting } from 'modules/global';
+import { logout } from 'modules/user';
 import Style from './HeaderIcon.module.less';
 
+const { DropdownMenu, DropdownItem } = Dropdown;
+
 export default memo(() => {
   const dispatch = useAppDispatch();
   const history = useHistory();
@@ -18,22 +29,15 @@ export default memo(() => {
     window.open('https://github.com/Tencent/tdesign-react-starter');
   };
 
-  const options = [
-    {
-      content: '个人中心',
-      value: 1,
-    },
-    {
-      content: '退出登录',
-      value: 2,
-    },
-  ];
-
   const clickHandler = (data: any) => {
     if (data.value === 1) {
       history.push('/user/index');
     }
   };
+  const handleLogout = async () => {
+    await dispatch(logout());
+    history.push('/login/index');
+  };
 
   return (
     <Row align='middle' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -59,14 +63,28 @@ export default memo(() => {
         </Button>
       </Col>
       <Col>
-        <Dropdown className={Style.dropdown} options={options} trigger={'click'} onClick={clickHandler}>
+        <Dropdown className={Style.dropdown} trigger={'click'} onClick={clickHandler}>
           <Button variant='text'>
             <span style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
               <Icon name='user-circle' size='20px' />
               <span style={{ display: 'inline-block', margin: '0 5px' }}>Tencent</span>
               <Icon name='chevron-down' size='20px' />
             </span>
           </Button>
+          <DropdownMenu>
+            <DropdownItem value={1}>
+              <>
+                <UserCircleIcon />
+                个人中心
+              </>
+            </DropdownItem>
+            <DropdownItem value={1} onClick={handleLogout}>
+              <>
+                <PoweroffIcon />
+                退出登录
+              </>
+            </DropdownItem>
+          </DropdownMenu>
         </Dropdown>
       </Col>
       <Col>

src/layouts/index.tsx

@@ -4,7 +4,7 @@ import throttle from 'lodash/throttle';
 import { useAppSelector, useAppDispatch } from 'modules/store';
 import { selectGlobal, toggleSetting, toggleMenu } from 'modules/global';
 import Setting from './components/Setting';
-import LayoutMap from './components/Container';
+import Content from './components/Content';
 import Style from './index.module.less';
 
 export default memo(() => {
@@ -25,11 +25,9 @@ export default memo(() => {
     };
   }, []);
 
-  const Container = LayoutMap[globalState.layout];
-
   return (
     <Layout className={Style.mainPanel}>
-      <Container />
+      <Content />
       <Drawer
         destroyOnClose
         visible={globalState.setting}

src/modules/store.ts

@@ -2,11 +2,13 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { TypedUseSelectorHook, useSelector, useDispatch } from 'react-redux';
 
 import global from './global';
+import user from './user';
 import listBase from './list/base';
 import listSelect from './list/select';
 
 const reducer = combineReducers({
   global,
+  user,
   listBase,
   listSelect,
 });