Commit 346196a5d0cc8103f6527e5091bd8e10b66f5604

Authored by 张志伟
1 parent ffa4c0e4

新增更新弹窗

src/components/GlobalFooter/index.tsx
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 export interface IGlobalFooterProps { 8 export interface IGlobalFooterProps {
8 links?: Array<{ 9 links?: Array<{
@@ -17,25 +18,74 @@ const { Footer } = Layout; @@ -17,25 +18,74 @@ const { Footer } = Layout;
17 const COPYRIGHT = `${new Date().getFullYear()} 重庆霏微科技有限公司 渝ICP备17016156号-3`; 18 const COPYRIGHT = `${new Date().getFullYear()} 重庆霏微科技有限公司 渝ICP备17016156号-3`;
18 19
19 const GlobalFooter = ({ links }: IGlobalFooterProps) => { 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 const clsString = classNames(styles.globalFooter); 67 const clsString = classNames(styles.globalFooter);
21 return ( 68 return (
22 <Footer style={{ padding: 0 }}> 69 <Footer style={{ padding: 0 }}>
23 <div className={clsString}> 70 <div className={clsString}>
24 {links && ( 71 {links && (
25 <div className={styles.links}> 72 <div className={styles.links}>
26 - {links.map(link => ( 73 + {links.map((link) => (
27 <a 74 <a
28 key={link.key} 75 key={link.key}
29 title={link.key} 76 title={link.key}
30 - target={link.blankTarget ? '_blank' : '_self'} 77 + target={link.blankTarget ? "_blank" : "_self"}
31 href={link.href} 78 href={link.href}
  79 + rel="noreferrer"
32 > 80 >
33 {link.title} 81 {link.title}
34 </a> 82 </a>
35 ))} 83 ))}
36 </div> 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 </div> 89 </div>
40 </Footer> 90 </Footer>
41 ); 91 );
src/global.tsx
@@ -82,7 +82,6 @@ if (pwa) { @@ -82,7 +82,6 @@ if (pwa) {
82 } 82 }
83 } 83 }
84 84
85 -  
86 //@ts-ignore 85 //@ts-ignore
87 if (!window.Number.prototype._toFixed) { 86 if (!window.Number.prototype._toFixed) {
88 window.Number.prototype._toFixed = window.Number.prototype.toFixed; 87 window.Number.prototype._toFixed = window.Number.prototype.toFixed;
src/locales/en-US.ts
@@ -6,11 +6,16 @@ import settingDrawer from &#39;./en-US/settingDrawer&#39;; @@ -6,11 +6,16 @@ import settingDrawer from &#39;./en-US/settingDrawer&#39;;
6 import settings from './en-US/settings'; 6 import settings from './en-US/settings';
7 7
8 export default { 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 ...globalHeader, 19 ...globalHeader,
15 ...menu, 20 ...menu,
16 ...settingDrawer, 21 ...settingDrawer,
src/locales/pt-BR.ts
@@ -6,11 +6,16 @@ import settingDrawer from &#39;./pt-BR/settingDrawer&#39;; @@ -6,11 +6,16 @@ import settingDrawer from &#39;./pt-BR/settingDrawer&#39;;
6 import settings from './pt-BR/settings'; 6 import settings from './pt-BR/settings';
7 7
8 export default { 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 ...globalHeader, 19 ...globalHeader,
15 ...menu, 20 ...menu,
16 ...settingDrawer, 21 ...settingDrawer,
src/locales/zh-CN.ts
@@ -6,11 +6,15 @@ import settingDrawer from &#39;./zh-CN/settingDrawer&#39;; @@ -6,11 +6,15 @@ import settingDrawer from &#39;./zh-CN/settingDrawer&#39;;
6 import settings from './zh-CN/settings'; 6 import settings from './zh-CN/settings';
7 7
8 export default { 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 ...globalHeader, 18 ...globalHeader,
15 ...menu, 19 ...menu,
16 ...settingDrawer, 20 ...settingDrawer,
src/locales/zh-TW.ts
@@ -6,11 +6,15 @@ import settingDrawer from &#39;./zh-TW/settingDrawer&#39;; @@ -6,11 +6,15 @@ import settingDrawer from &#39;./zh-TW/settingDrawer&#39;;
6 import settings from './zh-TW/settings'; 6 import settings from './zh-TW/settings';
7 7
8 export default { 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 ...globalHeader, 18 ...globalHeader,
15 ...menu, 19 ...menu,
16 ...settingDrawer, 20 ...settingDrawer,
src/pages/document.ejs
@@ -3,19 +3,16 @@ @@ -3,19 +3,16 @@
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 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 <title>霏微汽车服务平台</title> 7 <title>霏微汽车服务平台</title>
11 <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script> 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 <link rel="icon" href="/favicon.png" type="image/x-icon" /> 10 <link rel="icon" href="/favicon.png" type="image/x-icon" />
14 <!-- 高德地图 --> 11 <!-- 高德地图 -->
15 <script type="text/javascript"> 12 <script type="text/javascript">
16 - window._AMapSecurityConfig = {  
17 - securityJsCode: '235e8683072929e38b792ded30736d2d',  
18 - } 13 + window._AMapSecurityConfig = {
  14 + securityJsCode: "235e8683072929e38b792ded30736d2d",
  15 + };
19 </script> 16 </script>
20 </head> 17 </head>
21 <body> 18 <body>
@@ -23,34 +20,34 @@ @@ -23,34 +20,34 @@
23 <div id="root"> 20 <div id="root">
24 <style> 21 <style>
25 .page-loading-warp { 22 .page-loading-warp {
26 - padding: 120px;  
27 display: flex; 23 display: flex;
28 - justify-content: center;  
29 align-items: center; 24 align-items: center;
  25 + justify-content: center;
  26 + padding: 120px;
30 } 27 }
31 .ant-spin { 28 .ant-spin {
  29 + position: absolute;
  30 + display: none;
32 -webkit-box-sizing: border-box; 31 -webkit-box-sizing: border-box;
33 box-sizing: border-box; 32 box-sizing: border-box;
34 margin: 0; 33 margin: 0;
35 padding: 0; 34 padding: 0;
36 color: rgba(0, 0, 0, 0.65); 35 color: rgba(0, 0, 0, 0.65);
  36 + color: #1890ff;
37 font-size: 14px; 37 font-size: 14px;
38 font-variant: tabular-nums; 38 font-variant: tabular-nums;
39 line-height: 1.5; 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 text-align: center; 40 text-align: center;
47 vertical-align: middle; 41 vertical-align: middle;
  42 + list-style: none;
48 opacity: 0; 43 opacity: 0;
49 -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); 44 -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
50 transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); 45 transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
51 transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); 46 transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
52 transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), 47 transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
53 -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); 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 .ant-spin-spinning { 53 .ant-spin-spinning {
@@ -62,9 +59,9 @@ @@ -62,9 +59,9 @@
62 .ant-spin-dot { 59 .ant-spin-dot {
63 position: relative; 60 position: relative;
64 display: inline-block; 61 display: inline-block;
65 - font-size: 20px;  
66 width: 20px; 62 width: 20px;
67 height: 20px; 63 height: 20px;
  64 + font-size: 20px;
68 } 65 }
69 66
70 .ant-spin-dot-item { 67 .ant-spin-dot-item {
@@ -120,9 +117,9 @@ @@ -120,9 +117,9 @@
120 } 117 }
121 118
122 .ant-spin-lg .ant-spin-dot { 119 .ant-spin-lg .ant-spin-dot {
123 - font-size: 32px;  
124 width: 32px; 120 width: 32px;
125 height: 32px; 121 height: 32px;
  122 + font-size: 32px;
126 } 123 }
127 124
128 .ant-spin-lg .ant-spin-dot i { 125 .ant-spin-lg .ant-spin-dot i {
@@ -166,11 +163,12 @@ @@ -166,11 +163,12 @@
166 <div class="page-loading-warp"> 163 <div class="page-loading-warp">
167 <div class="ant-spin ant-spin-lg ant-spin-spinning"> 164 <div class="ant-spin ant-spin-lg ant-spin-spinning">
168 <span class="ant-spin-dot ant-spin-dot-spin" 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 ></span> 168 ></span>
172 </div> 169 </div>
173 </div> 170 </div>
174 </div> 171 </div>
  172 + <button id="fw_updater" style="display: none"></button>
175 </body> 173 </body>
176 </html> 174 </html>