From f5cfc09936de009d7d68ab83d2cb2b1bffc0f77a Mon Sep 17 00:00:00 2001 From: eericxu <2681350846@qq.com> Date: Fri, 13 Oct 2023 17:35:07 +0800 Subject: [PATCH 1/4] feat: use hash router --- config/config.ts | 7 +++--- config/defaultSettings.ts | 2 ++ src/components/common/table.tsx | 9 ++++---- src/components/modal/EditorProductSystem.tsx | 6 ++--- src/components/modal/ViewBomInfoModal.tsx | 13 +++++------ src/components/routes/carbon/tags.tsx | 4 ++-- src/components/routes/chain.tsx | 23 ++++++++++---------- src/layout/_app.tsx | 19 ---------------- src/lib/utils.ts | 11 ++++++++-- 9 files changed, 41 insertions(+), 53 deletions(-) diff --git a/config/config.ts b/config/config.ts index 12bddb3..f03db87 100644 --- a/config/config.ts +++ b/config/config.ts @@ -1,6 +1,6 @@ // https://umijs.org/config/ import { defineConfig } from '@umijs/max'; -import defaultSettings, { DefTheme } from './defaultSettings'; +import defaultSettings, { DefTheme, historyType } from './defaultSettings'; import proxy from './proxy'; import routes from './routes'; @@ -8,6 +8,7 @@ const { REACT_APP_ENV = 'dev' } = process.env; export default defineConfig({ esbuildMinifyIIFE: true, + codeSplitting: { jsStrategy: 'granularChunks' }, /** * @name 开启 hash 模式 * @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。 @@ -18,8 +19,8 @@ export default defineConfig({ /** * @name 使用 Router */ - history: { type: 'browser' }, - exportStatic: {}, + history: { type: historyType }, + // exportStatic: {}, /** * @name 兼容性设置 * @description 设置 ie11 不一定完美兼容，需要检查自己使用的所有依赖 diff --git a/config/defaultSettings.ts b/config/defaultSettings.ts index 1cb6a53..7b12417 100644 --- a/config/defaultSettings.ts +++ b/config/defaultSettings.ts @@ -1,6 +1,8 @@ import { ProLayoutProps } from '@ant-design/pro-components'; import { ThemeConfig } from 'antd'; +export const historyType: 'hash' | 'browser' | 'memory' = 'hash'; + export const HEADER_HEIGHT = 56; export const DefTheme: ThemeConfig = { token: { diff --git a/src/components/common/table.tsx b/src/components/common/table.tsx index 25c2f74..a22498d 100644 --- a/src/components/common/table.tsx +++ b/src/components/common/table.tsx @@ -1,5 +1,6 @@ import { Loading } from '@/components/common/loading'; import { SIZE } from '@/components/const'; +import { Tooltip } from 'antd'; import classNames from 'classnames'; import { FC, useEffect, useRef, useState } from 'react'; import { FiChevronRight, FiFilter } from 'react-icons/fi'; @@ -132,11 +133,9 @@ export const Table: FC = ({ )} > {!!v.tip && ( - + + + )} {v.title} {!!filters[v.dataIndex] && ( diff --git a/src/components/modal/EditorProductSystem.tsx b/src/components/modal/EditorProductSystem.tsx index 0580822..4774ded 100644 --- a/src/components/modal/EditorProductSystem.tsx +++ b/src/components/modal/EditorProductSystem.tsx @@ -3,7 +3,7 @@ import { Loading } from '@/components/common/loading'; import { Modal, ModalProps } from '@/components/common/modal'; import { useProductSystem } from '@/lib/hooks/useDatas'; import { useIsVerifier } from '@/lib/hooks/useUser'; -import { shortStr, tryParse } from '@/lib/utils'; +import { shortStr, tryParse, wrapPath } from '@/lib/utils'; import classNames from 'classnames'; import _ from 'lodash'; import { @@ -116,8 +116,8 @@ export function LcaActionInfo(p: { if (modelStatus !== 1) return
等待解析
; return ( (openNewTab ? window.open(`/model?id=${modelId}`, '_blank') : undefined)} - to={!openNewTab ? `/model?id=${modelId}` : undefined} + onClick={() => (openNewTab ? window.open(`${wrapPath('/model')}?id=${modelId}`, '_blank') : undefined)} + to={!openNewTab ? `${wrapPath('/model')}?id=${modelId}` : undefined} action="在线查看" /> ); diff --git a/src/components/modal/ViewBomInfoModal.tsx b/src/components/modal/ViewBomInfoModal.tsx index a367d69..39fe736 100644 --- a/src/components/modal/ViewBomInfoModal.tsx +++ b/src/components/modal/ViewBomInfoModal.tsx @@ -5,6 +5,7 @@ import { PairInfo } from './EditorProductSystem'; import { shortStr } from '@/lib/utils'; import { handleContentRender } from '@/lib/utils'; import { isTagType } from '@/lib/tagtools'; +import { Tooltip } from 'antd'; interface ViewBomInfoModalProps { onClose: () => void; @@ -70,13 +71,11 @@ const ViewBomInfoModal: FC = ({ onClose, ...props }) => { key={`value_${index}`} className="flex max-w-lg items-center bg-[#F1F1F1] h-6 mb-[10px] rounded ml-5" > -
- PN : {shortStr(item, 8, 8)} -
+ +
+ PN : {shortStr(item, 8, 8)} +
+ ); })} diff --git a/src/components/routes/carbon/tags.tsx b/src/components/routes/carbon/tags.tsx index c818ffb..b918ca3 100644 --- a/src/components/routes/carbon/tags.tsx +++ b/src/components/routes/carbon/tags.tsx @@ -3,7 +3,7 @@ import WrapPageContainer from '@/components/ant/WrapPageContainer'; import { ProductQrcode } from '@/components/common/productQrcode'; import { Teacher as SvgTeacher } from '@/components/svgr'; import { useTags } from '@/lib/hooks/useDatas'; -import { getCurrentDate } from '@/lib/utils'; +import { getCurrentDate, wrapPath } from '@/lib/utils'; import _ from 'lodash'; import { useMemo } from 'react'; @@ -97,7 +97,7 @@ export function Tag() { tokenId, name: orgType !== 'aicp' ? 'Certified' : 'Verified', orgName, - qrCode: `${window.origin}/label?vin=${uuid}`, + qrCode: `${window.origin}${wrapPath('/label')}?vin=${uuid}`, }; }); }, [data]); diff --git a/src/components/routes/chain.tsx b/src/components/routes/chain.tsx index 8784772..5c858de 100644 --- a/src/components/routes/chain.tsx +++ b/src/components/routes/chain.tsx @@ -4,7 +4,7 @@ import { Table } from '@/components/common/table'; import { Aicp as SVGAICP, GGX as SvgGgx } from '@/components/svgr'; import { useSBT } from '@/lib/hooks/useDatas'; import { useT } from '@/lib/hooks/useT'; -import { autoFormaterRealTime, genScanUrl, shortStr } from '@/lib/utils'; +import { autoFormaterRealTime, genScanUrl, shortStr, wrapPath } from '@/lib/utils'; import { useSearchParams } from '@umijs/max'; import classNames from 'classnames'; import { now } from 'lodash'; @@ -13,6 +13,7 @@ import { VscQuestion, VscVerified } from 'react-icons/vsc'; import { WrapLink } from '../ant/Link'; import WrapPageContainer from '../ant/WrapPageContainer'; import { HeaderLayout } from '../common/headerLayout'; +import { Tooltip } from 'antd'; function ItemInfo(p: { label: string; text: string; link?: string; tip?: any; className?: string }) { return ( @@ -27,11 +28,9 @@ function ItemInfo(p: { label: string; text: string; link?: string; tip?: any; cl )} > {!!p.tip && ( - + + + )} {p.label}:{' '} {p.link ? ( @@ -128,7 +127,7 @@ export function Blockchain() { ), render: (text: string) => { return ( - + {shortStr(text)} ); @@ -164,7 +163,7 @@ export function Blockchain() { dataIndex: 'fromAddress', render: (text: string) => { return ( - + {shortStr(text)} ); @@ -175,7 +174,7 @@ export function Blockchain() { dataIndex: 'toAddress', render: (text: string) => { return ( - + {shortStr(text)} ); @@ -196,7 +195,7 @@ export function Blockchain() {
@@ -214,14 +213,14 @@ export function Blockchain() {
-
{t('Label Details')}
+
{t('Label Details')}
-

{t('Item Activity on Blockchain')}

+

{t('Item Activity on Blockchain')}

diff --git a/src/layout/_app.tsx b/src/layout/_app.tsx index ec617b1..4c82585 100644 --- a/src/layout/_app.tsx +++ b/src/layout/_app.tsx @@ -5,14 +5,10 @@ import classNames from 'classnames'; import { authGetResData } from '@/lib/http'; import React, { FC, ReactNode } from 'react'; import 'react-tippy/dist/tippy.css'; -import { Tooltip } from 'react-tooltip'; import 'react-tooltip/dist/react-tooltip.css'; import { SWRConfig } from 'swr/_internal'; function InitProvider(p: { children: React.ReactNode }) { - // useEffect(() => { - // modalRootRef.current = document.body as any; - // }, []); return ( - ); -} - function App(p: { children?: ReactNode }) { return (
@@ -47,7 +29,6 @@ function App(p: { children?: ReactNode }) { {p.children} -
); } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 8d53f07..9788937 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,10 +1,10 @@ import { useIntl } from '@umijs/max'; import { AxiosError } from 'axios'; +import dayjs from 'dayjs'; import _, { toInteger } from 'lodash'; import moment from 'moment'; +import { historyType } from '../../config/defaultSettings'; import { LABEL_CONTRACT, SCAN_BASE } from './env'; -import dayjs from 'dayjs'; - export const DATE_FTM = { long: 'YYYY-MM-DD HH:mm:ss', short: 'YYYY-MM-DD', @@ -234,3 +234,10 @@ export const convertArr = (label: string | number, value: string | number, arr?: return { label: item[label], value: item[value] }; }); }; + +export function wrapPath(path: `/${string}`) { + if (historyType === 'hash') { + return '/#' + path; + } + return path; +} From 4e7d849c7813374ef44849c0d6d99a3bdce2ff88 Mon Sep 17 00:00:00 2001 From: YongZL <1679963578@qq.com> Date: Mon, 16 Oct 2023 11:13:26 +0800 Subject: [PATCH 2/4] fix: ui --- src/components/modal/ViewBomInfoModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modal/ViewBomInfoModal.tsx b/src/components/modal/ViewBomInfoModal.tsx index 39fe736..5e65f81 100644 --- a/src/components/modal/ViewBomInfoModal.tsx +++ b/src/components/modal/ViewBomInfoModal.tsx @@ -62,8 +62,8 @@ const ViewBomInfoModal: FC = ({ onClose, ...props }) => { {(result || []).map((e: any, i: number) => { return ( -
-
{e.flowName}
+
+
{e.flowName}
{(e?.partNumbers || []).map((item: any, index: number) => { return ( From 1e95fd3d16ffa84893c7b1bee5241068c6e23499 Mon Sep 17 00:00:00 2001 From: YongZL <1679963578@qq.com> Date: Mon, 16 Oct 2023 11:32:07 +0800 Subject: [PATCH 3/4] feat: carbon tag type --- src/components/routes/carbon/tags.tsx | 5 +++-- src/components/routes/chain.tsx | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/routes/carbon/tags.tsx b/src/components/routes/carbon/tags.tsx index b918ca3..ca3c7e8 100644 --- a/src/components/routes/carbon/tags.tsx +++ b/src/components/routes/carbon/tags.tsx @@ -81,21 +81,22 @@ export function Tag() { }, ]; return records.map(({ loadName, proofTime, tokenId, tokenUrl, uuid, verifyUserName, orgName, orgType }) => { + const name = orgType !== 'aicp' ? 'Certified' : 'Verified'; return { title: loadName, icon: , by: `${getCurrentDate(proofTime, 'YYYY年MM月DD日')}签发 by ${orgName}`, id: uuid, qrcodeDisable: false, + name, link: [ { text: '标签信息', href: `/label?vin=${uuid}` }, { text: '在区块链浏览器查看', - href: `/chain?tokenId=${tokenId}`, + href: `/chain?tokenId=${tokenId}&name=${name}`, }, ], tokenId, - name: orgType !== 'aicp' ? 'Certified' : 'Verified', orgName, qrCode: `${window.origin}${wrapPath('/label')}?vin=${uuid}`, }; diff --git a/src/components/routes/chain.tsx b/src/components/routes/chain.tsx index 5c858de..d20ccea 100644 --- a/src/components/routes/chain.tsx +++ b/src/components/routes/chain.tsx @@ -105,6 +105,7 @@ function CardInfo(p: any) { export function Blockchain() { const [sq] = useSearchParams(); const tokenId = sq.get('tokenId'); + const name = sq.get('name'); const { t, formatRelativeTime } = useT(); const isMobile = useIsMobile(); const [current, setCurrent] = useState(''); @@ -185,8 +186,6 @@ export function Blockchain() { 'GGX (GTech Green Chain) is a shared digital space for the automotive industry. GGX offers 3T (Transparency, Traceability, Trust) featured data as a solid foundation for cross-boundary collaboration between automotive value chain players.', ); - console.log('sbtTagList', sbtTagList); - return ( @@ -195,6 +194,7 @@ export function Blockchain() {
@@ -220,7 +220,7 @@ export function Blockchain() {
-

{t('Item Activity on Blockchain')}

+

{t('Item Activity on Blockchain')}

From 5bcecef04487a5e79685416aacd936e4e8cd7101 Mon Sep 17 00:00:00 2001 From: eericxu <2681350846@qq.com> Date: Mon, 16 Oct 2023 13:32:22 +0800 Subject: [PATCH 4/4] fix: styles --- src/components/routes/chain.tsx | 4 ++-- src/components/routes/label.tsx | 8 ++++---- .../routes/tools/verificationManagement/index.tsx | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/routes/chain.tsx b/src/components/routes/chain.tsx index d20ccea..409eb27 100644 --- a/src/components/routes/chain.tsx +++ b/src/components/routes/chain.tsx @@ -229,7 +229,7 @@ export function Blockchain() {

{t('Platform powered by:')}

- + {t('Automotive Industry Carbon Platform')}

@@ -243,7 +243,7 @@ export function Blockchain() {

{t('Blockchain powered by:')}

- + {t('GGX Blockchain')}

diff --git a/src/components/routes/label.tsx b/src/components/routes/label.tsx index 755d836..6248ded 100644 --- a/src/components/routes/label.tsx +++ b/src/components/routes/label.tsx @@ -2,7 +2,7 @@ import { Carbon3 as SVGCarbon3 } from '@/components/svgr'; import { useTagInfo } from '@/lib/hooks/useDatas'; import { useT } from '@/lib/hooks/useT'; -import { genScanUrl, handleCarbonStr } from '@/lib/utils'; +import { genScanUrl, handleCarbonStr, wrapPath } from '@/lib/utils'; import { useSearchParams } from '@umijs/max'; import { Fragment } from 'react'; import WrapPageContainer from '../ant/WrapPageContainer'; @@ -118,9 +118,9 @@ export function Label() { 'A Soul-bounded Token (a special type of NFT that is not allowed to transfer after created) has been generated on blockchain to make sure the information in this label is immutable and will be maintain for traceability forever. Check {{value}} to verify the SBT on blockchain explorer.', ).replace( '{{value}}', - `${t( - 'here', - )}`, + `${t('here')}`, ), }} /> diff --git a/src/components/routes/tools/verificationManagement/index.tsx b/src/components/routes/tools/verificationManagement/index.tsx index 957cb50..c4c2b6c 100644 --- a/src/components/routes/tools/verificationManagement/index.tsx +++ b/src/components/routes/tools/verificationManagement/index.tsx @@ -123,6 +123,7 @@ export function VerificationManagementList() { title: '验证时间', dataIndex: 'proofTime', valueType: 'dateTime', + width: 170, }, {