FEV2 / fw-cms

Commit 346196a5d0cc8103f6527e5091bd8e10b66f5604

Authored by 张志伟
1 parent ffa4c0e4

新增更新弹窗

Inline Side-by-side
Showing 7 changed files with 113 additions and 48 deletions
src/components/GlobalFooter/index.tsx
  View file @346196a
1   -import React from 'react';
2   -import { CopyrightOutlined } from '@ant-design/icons';
3   -import { Layout } from 'antd';
4   -import classNames from 'classnames';
5   -import styles from './index.less';
  1 +import React, { useCallback, useEffect, useRef } from "react";
  2 +import { CopyrightOutlined } from "@ant-design/icons";
  3 +import { Button, Layout, Space, notification } from "antd";
  4 +import classNames from "classnames";
  5 +import styles from "./index.less";
  6 +import { useIntl } from "umi";
6 7  
7 8 export interface IGlobalFooterProps {
8 9 links?: Array<{
... ... @@ -17,25 +18,74 @@ const { Footer } = Layout;
17 18 const COPYRIGHT = `${new Date().getFullYear()} 重庆霏微科技有限公司 渝ICP备17016156号-3`;
18 19  
19 20 const GlobalFooter = ({ links }: IGlobalFooterProps) => {
  21 + const notifiShowRef = useRef<boolean>(false);
  22 +
  23 + const intl = useIntl();
  24 +
  25 + useEffect(() => {
  26 + document.getElementById("fw_updater")?.addEventListener("click", showNotification);
  27 + return () => {
  28 + document.getElementById("fw_updater")?.removeEventListener("click", showNotification);
  29 + };
  30 + }, []);
  31 +
  32 + const showNotification = useCallback(() => {
  33 + if (notifiShowRef?.current) {
  34 + return;
  35 + }
  36 + const key = `open${Date.now()}`;
  37 + const btn = (
  38 + <Space>
  39 + <Button
  40 + size="small"
  41 + onClick={() => {
  42 + notification.close(key);
  43 + notifiShowRef.current = false;
  44 + }}
  45 + >
  46 + {intl.formatMessage({ id: "app.update.tip.close" })}
  47 + </Button>
  48 + <Button type="primary" size="small" onClick={() => window.location.reload()}>
  49 + {intl.formatMessage({ id: "app.update.tip.confirm" })}
  50 + </Button>
  51 + </Space>
  52 + );
  53 + notification.open({
  54 + message: intl.formatMessage({ id: "app.update.tip.title" }),
  55 + description: intl.formatMessage({ id: "app.update.tip.message" }),
  56 + btn,
  57 + placement: "bottomRight",
  58 + key,
  59 + duration: 0,
  60 + onClose: () => {
  61 + notifiShowRef.current = false;
  62 + },
  63 + });
  64 + notifiShowRef.current = true;
  65 + }, []);
  66 +
20 67 const clsString = classNames(styles.globalFooter);
21 68 return (
22 69 <Footer style={{ padding: 0 }}>
23 70 <div className={clsString}>
24 71 {links && (
25 72 <div className={styles.links}>
26   - {links.map(link => (
  73 + {links.map((link) => (
27 74 <a
28 75 key={link.key}
29 76 title={link.key}
30   - target={link.blankTarget ? '_blank' : '_self'}
  77 + target={link.blankTarget ? "_blank" : "_self"}
31 78 href={link.href}
  79 + rel="noreferrer"
32 80 >
33 81 {link.title}
34 82 </a>
35 83 ))}
36 84 </div>
37 85 )}
38   - <div className={styles.copyright}>Copyright <CopyrightOutlined /> {COPYRIGHT}</div>
  86 + <div className={styles.copyright}>
  87 + Copyright <CopyrightOutlined /> {COPYRIGHT}
  88 + </div>
39 89 </div>
40 90 </Footer>
41 91 );
... ...
src/global.tsx
  View file @346196a
... ... @@ -82,7 +82,6 @@ if (pwa) {
82 82 }
83 83 }
84 84  
85   -
86 85 //@ts-ignore
87 86 if (!window.Number.prototype._toFixed) {
88 87 window.Number.prototype._toFixed = window.Number.prototype.toFixed;
... ...
src/locales/en-US.ts
  View file @346196a
... ... @@ -6,11 +6,16 @@ import settingDrawer from &#39;./en-US/settingDrawer&#39;;
6 6 import settings from './en-US/settings';
7 7  
8 8 export default {
9   - 'navBar.lang': 'Languages',
10   - 'layout.user.link.help': 'Help',
11   - 'layout.user.link.privacy': 'Privacy',
12   - 'layout.user.link.terms': 'Terms',
13   - 'app.preview.down.block': 'Download this page to your local project',
  9 + "navBar.lang": "Languages",
  10 + "layout.user.link.help": "Help",
  11 + "layout.user.link.privacy": "Privacy",
  12 + "layout.user.link.terms": "Terms",
  13 + "app.preview.down.block": "Download this page to your local project",
  14 + "app.update.tip.title": "Update Tips",
  15 + "app.update.tip.message":
  16 + "It is detected that the content of the website has been updated. Do you want to refresh the page to load the latest version?",
  17 + "app.update.tip.confirm": "Confirm",
  18 + "app.update.tip.close": "Close",
14 19 ...globalHeader,
15 20 ...menu,
16 21 ...settingDrawer,
... ...
src/locales/pt-BR.ts
  View file @346196a
... ... @@ -6,11 +6,16 @@ import settingDrawer from &#39;./pt-BR/settingDrawer&#39;;
6 6 import settings from './pt-BR/settings';
7 7  
8 8 export default {
9   - 'navBar.lang': 'Idiomas',
10   - 'layout.user.link.help': 'ajuda',
11   - 'layout.user.link.privacy': 'política de privacidade',
12   - 'layout.user.link.terms': 'termos de serviços',
13   - 'app.preview.down.block': 'Download this page to your local project',
  9 + "navBar.lang": "Idiomas",
  10 + "layout.user.link.help": "ajuda",
  11 + "layout.user.link.privacy": "política de privacidade",
  12 + "layout.user.link.terms": "termos de serviços",
  13 + "app.preview.down.block": "Download this page to your local project",
  14 + "app.update.tip.title": "Update Tips",
  15 + "app.update.tip.message":
  16 + "It is detected that the content of the website has been updated. Do you want to refresh the page to load the latest version?",
  17 + "app.update.tip.confirm": "Confirm",
  18 + "app.update.tip.close": "Close",
14 19 ...globalHeader,
15 20 ...menu,
16 21 ...settingDrawer,
... ...
src/locales/zh-CN.ts
  View file @346196a
... ... @@ -6,11 +6,15 @@ import settingDrawer from &#39;./zh-CN/settingDrawer&#39;;
6 6 import settings from './zh-CN/settings';
7 7  
8 8 export default {
9   - 'navBar.lang': '语言',
10   - 'layout.user.link.help': '帮助',
11   - 'layout.user.link.privacy': '隐私',
12   - 'layout.user.link.terms': '条款',
13   - 'app.preview.down.block': '下载此页面到本地项目',
  9 + "navBar.lang": "语言",
  10 + "layout.user.link.help": "帮助",
  11 + "layout.user.link.privacy": "隐私",
  12 + "layout.user.link.terms": "条款",
  13 + "app.preview.down.block": "下载此页面到本地项目",
  14 + "app.update.tip.title": "更新提示",
  15 + "app.update.tip.message": "检测到网站内容有更新，是否刷新页面加载最新版本？",
  16 + "app.update.tip.confirm": "确认",
  17 + "app.update.tip.close": "关闭",
14 18 ...globalHeader,
15 19 ...menu,
16 20 ...settingDrawer,
... ...
src/locales/zh-TW.ts
  View file @346196a
... ... @@ -6,11 +6,15 @@ import settingDrawer from &#39;./zh-TW/settingDrawer&#39;;
6 6 import settings from './zh-TW/settings';
7 7  
8 8 export default {
9   - 'navBar.lang': '語言',
10   - 'layout.user.link.help': '幫助',
11   - 'layout.user.link.privacy': '隱私',
12   - 'layout.user.link.terms': '條款',
13   - 'app.preview.down.block': '下載此頁面到本地項目',
  9 + "navBar.lang": "語言",
  10 + "layout.user.link.help": "幫助",
  11 + "layout.user.link.privacy": "隱私",
  12 + "layout.user.link.terms": "條款",
  13 + "app.preview.down.block": "下載此頁面到本地項目",
  14 + "app.update.tip.title": "更新提示",
  15 + "app.update.tip.message": "檢測到網站內容有更新，是否刷新頁面加載最新版本？",
  16 + "app.update.tip.confirm": "確認",
  17 + "app.update.tip.close": "關閉",
14 18 ...globalHeader,
15 19 ...menu,
16 20 ...settingDrawer,
... ...
src/pages/document.ejs
  View file @346196a
... ... @@ -3,19 +3,16 @@
3 3 <head>
4 4 <meta charset="UTF-8" />
5 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6   - <meta
7   - name="viewport"
8   - content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
9   - />
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
10 7 <title>霏微汽车服务平台</title>
11 8 <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
12 9 <!--加载鼠标绘制工具-->
13 10 <link rel="icon" href="/favicon.png" type="image/x-icon" />
14 11 <!-- 高德地图 -->
15 12 <script type="text/javascript">
16   - window._AMapSecurityConfig = {
17   - securityJsCode: '235e8683072929e38b792ded30736d2d',
18   - }
  13 + window._AMapSecurityConfig = {
  14 + securityJsCode: "235e8683072929e38b792ded30736d2d",
  15 + };
19 16 </script>
20 17 </head>
21 18 <body>
... ... @@ -23,34 +20,34 @@
23 20 <div id="root">
24 21 <style>
25 22 .page-loading-warp {
26   - padding: 120px;
27 23 display: flex;
28   - justify-content: center;
29 24 align-items: center;
  25 + justify-content: center;
  26 + padding: 120px;
30 27 }
31 28 .ant-spin {
  29 + position: absolute;
  30 + display: none;
32 31 -webkit-box-sizing: border-box;
33 32 box-sizing: border-box;
34 33 margin: 0;
35 34 padding: 0;
36 35 color: rgba(0, 0, 0, 0.65);
  36 + color: #1890ff;
37 37 font-size: 14px;
38 38 font-variant: tabular-nums;
39 39 line-height: 1.5;
40   - list-style: none;
41   - -webkit-font-feature-settings: 'tnum';
42   - font-feature-settings: 'tnum';
43   - position: absolute;
44   - display: none;
45   - color: #1890ff;
46 40 text-align: center;
47 41 vertical-align: middle;
  42 + list-style: none;
48 43 opacity: 0;
49 44 -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
50 45 transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
51 46 transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
52 47 transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
53 48 -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  49 + -webkit-font-feature-settings: "tnum";
  50 + font-feature-settings: "tnum";
54 51 }
55 52  
56 53 .ant-spin-spinning {
... ... @@ -62,9 +59,9 @@
62 59 .ant-spin-dot {
63 60 position: relative;
64 61 display: inline-block;
65   - font-size: 20px;
66 62 width: 20px;
67 63 height: 20px;
  64 + font-size: 20px;
68 65 }
69 66  
70 67 .ant-spin-dot-item {
... ... @@ -120,9 +117,9 @@
120 117 }
121 118  
122 119 .ant-spin-lg .ant-spin-dot {
123   - font-size: 32px;
124 120 width: 32px;
125 121 height: 32px;
  122 + font-size: 32px;
126 123 }
127 124  
128 125 .ant-spin-lg .ant-spin-dot i {
... ... @@ -166,11 +163,12 @@
166 163 <div class="page-loading-warp">
167 164 <div class="ant-spin ant-spin-lg ant-spin-spinning">
168 165 <span class="ant-spin-dot ant-spin-dot-spin"
169   - ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
170   - ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
  166 + ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
  167 + ><i class="ant-spin-dot-item"></i
171 168 ></span>
172 169 </div>
173 170 </div>
174 171 </div>
  172 + <button id="fw_updater" style="display: none"></button>
175 173 </body>
176 174 </html>
... ...