Commit 346196a5d0cc8103f6527e5091bd8e10b66f5604
1 parent
ffa4c0e4
新增更新弹窗
Showing
7 changed files
with
113 additions
and
48 deletions
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 './en-US/settingDrawer'; | @@ -6,11 +6,16 @@ import settingDrawer from './en-US/settingDrawer'; | ||
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 './pt-BR/settingDrawer'; | @@ -6,11 +6,16 @@ import settingDrawer from './pt-BR/settingDrawer'; | ||
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 './zh-CN/settingDrawer'; | @@ -6,11 +6,15 @@ import settingDrawer from './zh-CN/settingDrawer'; | ||
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 './zh-TW/settingDrawer'; | @@ -6,11 +6,15 @@ import settingDrawer from './zh-TW/settingDrawer'; | ||
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> |