{
54 | setSearchMode(true);
55 | if (searchMode && inputRef.current) {
56 | inputRef.current.focus();
57 | }
58 | }}
59 | onTransitionEnd={({ propertyName }) => {
60 | if (propertyName === 'width' && !searchMode) {
61 | if (onVisibleChange) {
62 | onVisibleChange(searchMode);
63 | }
64 | }
65 | }}
66 | >
67 |
80 | {
87 | if (e.key === 'Enter') {
88 | if (restProps.onSearch) {
89 | restProps.onSearch(value);
90 | }
91 | }
92 | }}
93 | onBlur={() => {
94 | setSearchMode(false);
95 | }}
96 | />
97 |
98 |
99 | );
100 | };
101 |
102 | export default HeaderSearch;
103 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/NoticeIcon.tsx:
--------------------------------------------------------------------------------
1 | import { BellOutlined } from '@ant-design/icons';
2 | import { Badge, Spin, Tabs } from 'antd';
3 | import useMergeValue from 'use-merge-value';
4 | import React from 'react';
5 | import classNames from 'classnames';
6 | import NoticeList, { NoticeIconTabProps } from './NoticeList';
7 | import HeaderDropdown from '../HeaderDropdown';
8 | import styles from './index.less';
9 |
10 | const { TabPane } = Tabs;
11 |
12 | export interface NoticeIconProps {
13 | count?: number;
14 | bell?: React.ReactNode;
15 | className?: string;
16 | loading?: boolean;
17 | onClear?: (tabName: string, tabKey: string) => void;
18 | onItemClick?: (item: API.NoticeIconData, tabProps: NoticeIconTabProps) => void;
19 | onViewMore?: (tabProps: NoticeIconTabProps, e: MouseEvent) => void;
20 | onTabChange?: (tabTile: string) => void;
21 | style?: React.CSSProperties;
22 | onPopupVisibleChange?: (visible: boolean) => void;
23 | popupVisible?: boolean;
24 | clearText?: string;
25 | viewMoreText?: string;
26 | clearClose?: boolean;
27 | emptyImage?: string;
28 | children?: React.ReactElement
38 | 
42 |
44 | );
45 | }
46 | return (
47 |
42 | {emptyText}
43 |
48 |
49 | className={styles.list}
50 | dataSource={list}
51 | renderItem={(item, i) => {
52 | const itemCls = classNames(styles.item, {
53 | [styles.read]: item.read,
54 | });
55 | // eslint-disable-next-line no-nested-ternary
56 | const leftIcon = item.avatar ? (
57 | typeof item.avatar === 'string' ? (
58 | onClick && onClick(item)}
69 | >
70 |
75 | {item.title}
76 |
78 | }
79 | description={
80 | {item.extra}
77 |
81 |
84 | }
85 | />
86 |
87 | );
88 | }}
89 | />
90 | {item.description}
82 | {item.datetime}
83 |
91 | {showClear ? (
92 |
108 |
109 | );
110 | };
111 |
112 | export default NoticeList;
113 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/es/style/themes/default.less';
2 |
3 | .popover {
4 | position: relative;
5 | width: 336px;
6 | }
7 |
8 | .noticeButton {
9 | display: inline-block;
10 | cursor: pointer;
11 | transition: all 0.3s;
12 | }
13 | .icon {
14 | padding: 4px;
15 | vertical-align: middle;
16 | }
17 |
18 | .badge {
19 | font-size: 16px;
20 | }
21 |
22 | .tabs {
23 | :global {
24 | .ant-tabs-nav-list {
25 | margin: auto;
26 | }
27 |
28 | .ant-tabs-nav-scroll {
29 | text-align: center;
30 | }
31 | .ant-tabs-bar {
32 | margin-bottom: 0;
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useCallback } from 'react';
2 | import { Tag, message } from 'antd';
3 | import { groupBy } from 'lodash';
4 | import moment from 'moment';
5 | import { useModel } from 'umi';
6 | import { queryNotices } from '@/services/user';
7 |
8 | import NoticeIcon from './NoticeIcon';
9 | import styles from './index.less';
10 |
11 | const getNoticeData = (
12 | notices: API.NoticeIconData[],
13 | ): {
14 | [key: string]: API.NoticeIconData[];
15 | } => {
16 | if (!notices || notices.length === 0 || !Array.isArray(notices)) {
17 | return {};
18 | }
19 |
20 | const newNotices = notices.map((notice) => {
21 | const newNotice = { ...notice };
22 |
23 | if (newNotice.datetime) {
24 | newNotice.datetime = moment(notice.datetime as string).fromNow();
25 | }
26 |
27 | if (newNotice.id) {
28 | newNotice.key = newNotice.id;
29 | }
30 |
31 | if (newNotice.extra && newNotice.status) {
32 | const color = {
33 | todo: '',
34 | processing: 'blue',
35 | urgent: 'red',
36 | doing: 'gold',
37 | }[newNotice.status];
38 | newNotice.extra = (
39 |
93 | {clearText} {title}
94 |
95 | ) : null}
96 | {showViewMore ? (
97 | {
99 | if (onViewMore) {
100 | onViewMore(e);
101 | }
102 | }}
103 | >
104 | {viewMoreText}
105 |
106 | ) : null}
107 |
74 |
75 |
78 |
79 | {
80 | networkName === 'Xenon' ?
81 |
82 | {networkName}
83 |
84 | :
85 |
86 | {networkName}
87 | }
88 |
89 |
)
90 | }
91 |
92 | export default connect(({ network }: { network: networkState; }) => ({
93 | network
94 | }))(SwitchNetwork);
--------------------------------------------------------------------------------
/src/components/RightContent/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/es/style/themes/default.less';
2 |
3 | @pro-header-hover-bg: rgba(0, 0, 0, 0.025);
4 |
5 | .menu {
6 | :global(.anticon) {
7 | margin-right: 8px;
8 | }
9 | :global(.ant-dropdown-menu-item) {
10 | min-width: 160px;
11 | }
12 | }
13 |
14 | .right {
15 | display: flex;
16 | float: right;
17 | height: 48px;
18 | margin-left: auto;
19 | overflow: hidden;
20 | .action {
21 | display: flex;
22 | align-items: center;
23 | height: 48px;
24 | padding: 0 12px;
25 | cursor: pointer;
26 | transition: all 0.3s;
27 | &:hover {
28 | background: @pro-header-hover-bg;
29 | }
30 | &:global(.opened) {
31 | background: @pro-header-hover-bg;
32 | }
33 | }
34 | .search {
35 | padding: 0 12px;
36 | &:hover {
37 | background: transparent;
38 | }
39 | }
40 | .account {
41 | .avatar {
42 | margin-right: 8px;
43 | color: @primary-color;
44 | vertical-align: top;
45 | background: rgba(21, 21, 22, 0.85);
46 | }
47 | }
48 | }
49 |
50 | .dark {
51 | .action {
52 | &:hover {
53 | background: #252a3d;
54 | }
55 | &:global(.opened) {
56 | background: #252a3d;
57 | }
58 | }
59 | }
60 |
61 | @media only screen and (max-width: @screen-md) {
62 | :global(.ant-divider-vertical) {
63 | vertical-align: unset;
64 | }
65 | .name {
66 | display: none;
67 | }
68 | .right {
69 | position: absolute;
70 | top: 0;
71 | right: 12px;
72 | .account {
73 | .avatar {
74 | margin-right: 0;
75 | }
76 | }
77 | .search {
78 | display: none;
79 | }
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/RightContent/index.tsx:
--------------------------------------------------------------------------------
1 | import { Tag, Space } from 'antd';
2 | import React from 'react';
3 | import { SelectLang, useModel } from 'umi';
4 | import Avatar from './AvatarDropdown';
5 | import SwitchNetwork from './SwitchNetwork';
6 | import styles from './index.less';
7 |
8 | export type SiderTheme = 'light' | 'dark';
9 |
10 | const ENVTagColor = {
11 | dev: 'orange',
12 | test: 'green',
13 | pre: '#87d068',
14 | };
15 |
16 | const GlobalHeaderRight: React.FC<{}> = () => {
17 | const { initialState } = useModel('@@initialState');
18 |
19 | if (!initialState || !initialState.settings) {
20 | return null;
21 | }
22 |
23 | const { navTheme, layout } = initialState.settings;
24 | let className = styles.right;
25 |
26 | if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
27 | className = `${styles.right} ${styles.dark}`;
28 | }
29 | return (
30 | 93 | {showMessage('是否开启Debug模式: ', 'Debug Mode: ')}
90 |
80 |
107 |
108 |