unAccessible
,
+ logo: () => (
+
+
+ ),
+ ...initialState?.settings,
+ };
+};
diff --git a/code/app/src/components/Footer/index.tsx b/code/app/src/components/Footer/index.tsx
new file mode 100644
index 0000000..42d60c6
--- /dev/null
+++ b/code/app/src/components/Footer/index.tsx
@@ -0,0 +1,24 @@
+import { useIntl } from 'umi';
+import { DefaultFooter } from '@ant-design/pro-layout';
+
+export default () => {
+ const intl = useIntl();
+ const defaultMessage = intl.formatMessage({
+ id: 'app.copyright.produced',
+ });
+
+ // TODO: 官网
+ return (
+ {
+ setSearchMode(true);
+ if (searchMode && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }}
+ onTransitionEnd={({ propertyName }) => {
+ if (propertyName === 'width' && !searchMode) {
+ if (onVisibleChange) {
+ onVisibleChange(searchMode);
+ }
+ }
+ }}
+ >
+
+ {
+ if (e.key === 'Enter') {
+ if (restProps.onSearch) {
+ restProps.onSearch(value);
+ }
+ }
+ }}
+ onBlur={() => {
+ setSearchMode(false);
+ }}
+ />
+
+
+ );
+};
+
+export default HeaderSearch;
diff --git a/code/app/src/components/NoticeIcon/NoticeIcon.tsx b/code/app/src/components/NoticeIcon/NoticeIcon.tsx
new file mode 100644
index 0000000..7a530c0
--- /dev/null
+++ b/code/app/src/components/NoticeIcon/NoticeIcon.tsx
@@ -0,0 +1,126 @@
+import { BellOutlined } from '@ant-design/icons';
+import { Badge, Spin, Tabs } from 'antd';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
+import React from 'react';
+import classNames from 'classnames';
+import type { NoticeIconTabProps } from './NoticeList';
+import NoticeList from './NoticeList';
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+
+const { TabPane } = Tabs;
+
+export type NoticeIconProps = {
+ count?: number;
+ bell?: React.ReactNode;
+ className?: string;
+ loading?: boolean;
+ onClear?: (tabName: string, tabKey: string) => void;
+ onItemClick?: (item: API.NoticeIconItem, tabProps: NoticeIconTabProps) => void;
+ onViewMore?: (tabProps: NoticeIconTabProps, e: MouseEvent) => void;
+ onTabChange?: (tabTile: string) => void;
+ style?: React.CSSProperties;
+ onPopupVisibleChange?: (visible: boolean) => void;
+ popupVisible?: boolean;
+ clearText?: string;
+ viewMoreText?: string;
+ clearClose?: boolean;
+ emptyImage?: string;
+ children?: React.ReactElement
+ 
+
+ );
+ }
+ return (
+
+ {emptyText}
+
+
+ className={styles.list}
+ dataSource={list}
+ renderItem={(item, i) => {
+ const itemCls = classNames(styles.item, {
+ [styles.read]: item.read,
+ });
+ // eslint-disable-next-line no-nested-ternary
+ const leftIcon = item.avatar ? (
+ typeof item.avatar === 'string' ? (
+ {
+ onClick?.(item);
+ }}
+ >
+
+ {item.title}
+
+ }
+ description={
+ {item.extra}
+
+
+ }
+ />
+
+ );
+ }}
+ />
+ {item.description}
+ {item.datetime}
+
+ {showClear ? (
+
+
+ );
+};
+
+export default NoticeList;
diff --git a/code/app/src/components/NoticeIcon/index.less b/code/app/src/components/NoticeIcon/index.less
new file mode 100644
index 0000000..45251cd
--- /dev/null
+++ b/code/app/src/components/NoticeIcon/index.less
@@ -0,0 +1,35 @@
+@import '~antd/es/style/themes/default.less';
+
+.popover {
+ position: relative;
+ width: 336px;
+}
+
+.noticeButton {
+ display: inline-block;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+.icon {
+ padding: 4px;
+ vertical-align: middle;
+}
+
+.badge {
+ font-size: 16px;
+}
+
+.tabs {
+ :global {
+ .ant-tabs-nav-list {
+ margin: auto;
+ }
+
+ .ant-tabs-nav-scroll {
+ text-align: center;
+ }
+ .ant-tabs-bar {
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/code/app/src/components/NoticeIcon/index.tsx b/code/app/src/components/NoticeIcon/index.tsx
new file mode 100644
index 0000000..b4d1176
--- /dev/null
+++ b/code/app/src/components/NoticeIcon/index.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { Tag, message } from 'antd';
+import { groupBy } from 'lodash';
+import moment from 'moment';
+import { useModel, useRequest } from 'umi';
+import { getNotices } from '@/services/api/api';
+
+import NoticeIcon from './NoticeIcon';
+import styles from './index.less';
+
+export type GlobalHeaderRightProps = {
+ fetchingNotices?: boolean;
+ onNoticeVisibleChange?: (visible: boolean) => void;
+ onNoticeClear?: (tabName?: string) => void;
+};
+
+const getNoticeData = (notices: API.NoticeIconItem[]): Record
+ {clearText} {title}
+
+ ) : null}
+ {showViewMore ? (
+ {
+ if (onViewMore) {
+ onViewMore(e);
+ }
+ }}
+ >
+ {viewMoreText}
+
+ ) : null}
+ + Want to add more pages? Please refer to{' '} + + use block + + 。 +
+
+
+ {children}
+
+
+);
+
+export default (): React.ReactNode => {
+ const intl = useIntl();
+ return (
+
+
+
+
+
diff --git a/code/app/src/pages/user/Login/index.less b/code/app/src/pages/user/Login/index.less
new file mode 100644
index 0000000..2c2ac57
--- /dev/null
+++ b/code/app/src/pages/user/Login/index.less
@@ -0,0 +1,114 @@
+@import '~antd/es/style/themes/default.less';
+
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: auto;
+ background: @layout-body-background;
+}
+
+.lang {
+ width: 100%;
+ height: 40px;
+ line-height: 44px;
+ text-align: right;
+ :global(.ant-dropdown-trigger) {
+ margin-right: 24px;
+ }
+}
+
+.content {
+ flex: 1;
+ padding: 20vh 0;
+}
+
+@media (min-width: @screen-md-min) {
+ .container {
+ background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+ background-repeat: no-repeat;
+ background-position: center 110px;
+ background-size: 100%;
+ }
+
+ .content {
+ padding: 20vh 0 24px;
+ }
+}
+
+.top {
+ text-align: center;
+}
+
+.header {
+ height: 44px;
+ line-height: 44px;
+ a {
+ text-decoration: none;
+ }
+}
+
+.logo {
+ width: 202px;
+ height: 32px;
+ vertical-align: top;
+}
+
+.title {
+ position: relative;
+ top: 2px;
+ color: @heading-color;
+ font-weight: 600;
+ font-size: 33px;
+ font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.desc {
+ margin-top: 12px;
+ margin-bottom: 40px;
+ color: @text-color-secondary;
+ font-size: @font-size-base;
+}
+
+.main {
+ width: 328px;
+ margin: 0 auto;
+ @media screen and (max-width: @screen-sm) {
+ width: 95%;
+ max-width: 328px;
+ }
+
+ :global {
+ .@{ant-prefix}-tabs-nav-list {
+ margin: auto;
+ font-size: 16px;
+ }
+ }
+
+ .icon {
+ margin-left: 16px;
+ color: rgba(0, 0, 0, 0.2);
+ font-size: 24px;
+ vertical-align: middle;
+ cursor: pointer;
+ transition: color 0.3s;
+
+ &:hover {
+ color: @primary-color;
+ }
+ }
+
+ .other {
+ margin-top: 24px;
+ line-height: 22px;
+ text-align: left;
+ .register {
+ float: right;
+ }
+ }
+
+ .prefixIcon {
+ color: @primary-color;
+ font-size: @font-size-base;
+ }
+}
diff --git a/code/app/src/pages/user/Login/index.tsx b/code/app/src/pages/user/Login/index.tsx
new file mode 100644
index 0000000..390f46a
--- /dev/null
+++ b/code/app/src/pages/user/Login/index.tsx
@@ -0,0 +1,292 @@
+import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
+import { Alert, message, Tabs } from 'antd';
+import React, { useState } from 'react';
+import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
+import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi';
+import Footer from '@/components/Footer';
+import { LoginService } from '@/services/api';
+
+import styles from './index.less';
+
+const LoginMessage: React.FC<{
+ content: string;
+}> = ({ content }) => (
+
+ 
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/code/app/src/pages/user/Setting/index.less b/code/app/src/pages/user/Setting/index.less
new file mode 100644
index 0000000..2c2ac57
--- /dev/null
+++ b/code/app/src/pages/user/Setting/index.less
@@ -0,0 +1,114 @@
+@import '~antd/es/style/themes/default.less';
+
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: auto;
+ background: @layout-body-background;
+}
+
+.lang {
+ width: 100%;
+ height: 40px;
+ line-height: 44px;
+ text-align: right;
+ :global(.ant-dropdown-trigger) {
+ margin-right: 24px;
+ }
+}
+
+.content {
+ flex: 1;
+ padding: 20vh 0;
+}
+
+@media (min-width: @screen-md-min) {
+ .container {
+ background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+ background-repeat: no-repeat;
+ background-position: center 110px;
+ background-size: 100%;
+ }
+
+ .content {
+ padding: 20vh 0 24px;
+ }
+}
+
+.top {
+ text-align: center;
+}
+
+.header {
+ height: 44px;
+ line-height: 44px;
+ a {
+ text-decoration: none;
+ }
+}
+
+.logo {
+ width: 202px;
+ height: 32px;
+ vertical-align: top;
+}
+
+.title {
+ position: relative;
+ top: 2px;
+ color: @heading-color;
+ font-weight: 600;
+ font-size: 33px;
+ font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.desc {
+ margin-top: 12px;
+ margin-bottom: 40px;
+ color: @text-color-secondary;
+ font-size: @font-size-base;
+}
+
+.main {
+ width: 328px;
+ margin: 0 auto;
+ @media screen and (max-width: @screen-sm) {
+ width: 95%;
+ max-width: 328px;
+ }
+
+ :global {
+ .@{ant-prefix}-tabs-nav-list {
+ margin: auto;
+ font-size: 16px;
+ }
+ }
+
+ .icon {
+ margin-left: 16px;
+ color: rgba(0, 0, 0, 0.2);
+ font-size: 24px;
+ vertical-align: middle;
+ cursor: pointer;
+ transition: color 0.3s;
+
+ &:hover {
+ color: @primary-color;
+ }
+ }
+
+ .other {
+ margin-top: 24px;
+ line-height: 22px;
+ text-align: left;
+ .register {
+ float: right;
+ }
+ }
+
+ .prefixIcon {
+ color: @primary-color;
+ font-size: @font-size-base;
+ }
+}
diff --git a/code/app/src/pages/user/Setting/index.tsx b/code/app/src/pages/user/Setting/index.tsx
new file mode 100644
index 0000000..390f46a
--- /dev/null
+++ b/code/app/src/pages/user/Setting/index.tsx
@@ -0,0 +1,292 @@
+import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
+import { Alert, message, Tabs } from 'antd';
+import React, { useState } from 'react';
+import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
+import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi';
+import Footer from '@/components/Footer';
+import { LoginService } from '@/services/api';
+
+import styles from './index.less';
+
+const LoginMessage: React.FC<{
+ content: string;
+}> = ({ content }) => (
+
+ {SelectLang &&
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ dom.pop(),
+ submitButtonProps: {
+ loading: submitting,
+ size: 'large',
+ style: {
+ width: '100%',
+ },
+ },
+ }}
+ onFinish={async (values) => {
+ handleSubmit(values as API.LoginParams);
+ }}
+ >
+
+
+
+ {status === 'error' && loginType === 'account' && (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/code/app/src/service-worker.js b/code/app/src/service-worker.js
new file mode 100644
index 0000000..5f5f8b2
--- /dev/null
+++ b/code/app/src/service-worker.js
@@ -0,0 +1,66 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-underscore-dangle */
+/* globals workbox */
+workbox.core.setCacheNameDetails({
+ prefix: 'antd-pro',
+ suffix: 'v5',
+});
+// Control all opened tabs ASAP
+workbox.clientsClaim();
+
+/**
+ * Use precaching list generated by workbox in build process.
+ * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.precaching
+ */
+workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
+
+/**
+ * Register a navigation route.
+ * https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route
+ */
+workbox.routing.registerNavigationRoute('/index.html');
+
+/**
+ * Use runtime cache:
+ * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.routing#.registerRoute
+ *
+ * Workbox provides all common caching strategies including CacheFirst, NetworkFirst etc.
+ * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies
+ */
+
+/** Handle API requests */
+workbox.routing.registerRoute(/\/api\//, workbox.strategies.networkFirst());
+
+/** Handle third party requests */
+workbox.routing.registerRoute(
+ /^https:\/\/gw\.alipayobjects\.com\//,
+ workbox.strategies.networkFirst(),
+);
+workbox.routing.registerRoute(
+ /^https:\/\/cdnjs\.cloudflare\.com\//,
+ workbox.strategies.networkFirst(),
+);
+workbox.routing.registerRoute(/\/color.less/, workbox.strategies.networkFirst());
+
+/** Response to client after skipping waiting with MessageChannel */
+addEventListener('message', (event) => {
+ const replyPort = event.ports[0];
+ const message = event.data;
+ if (replyPort && message && message.type === 'skip-waiting') {
+ event.waitUntil(
+ self.skipWaiting().then(
+ () => {
+ replyPort.postMessage({
+ error: null,
+ });
+ },
+ (error) => {
+ replyPort.postMessage({
+ error,
+ });
+ },
+ ),
+ );
+ }
+});
diff --git a/code/app/src/services/api/index.ts b/code/app/src/services/api/index.ts
new file mode 100644
index 0000000..d9573f3
--- /dev/null
+++ b/code/app/src/services/api/index.ts
@@ -0,0 +1,7 @@
+// @ts-ignore
+/* eslint-disable */
+
+export * as LoginService from './login';
+export * as NoticeService from './notice';
+export * as RuleService from './rule';
+export * as UserService from './user';
diff --git a/code/app/src/services/api/login.ts b/code/app/src/services/api/login.ts
new file mode 100644
index 0000000..fe63c8d
--- /dev/null
+++ b/code/app/src/services/api/login.ts
@@ -0,0 +1,41 @@
+// @ts-ignore
+/* eslint-disable */
+import { request } from 'umi';
+
+/** 发送验证码 POST /api/login/captcha */
+export async function getFakeCaptcha(
+ params: {
+ // query
+ /** 手机号 */
+ phone?: string;
+ },
+ options?: { [key: string]: any },
+) {
+ return request
+ {SelectLang &&
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ dom.pop(),
+ submitButtonProps: {
+ loading: submitting,
+ size: 'large',
+ style: {
+ width: '100%',
+ },
+ },
+ }}
+ onFinish={async (values) => {
+ handleSubmit(values as API.LoginParams);
+ }}
+ >
+
+
+
+ {status === 'error' && loginType === 'account' && (
+
+
+
+
+
+
+
+