fix: fix fallback route logic (#13199)
Wu Tianwei
1 year ago
committed by
GitHub
parent
2710242982
commit
6642fc6012
@ -1,107 +0,0 @@
|
||||
.stepsHeader {
|
||||
@apply flex items-center px-6 py-6;
|
||||
color: #344054;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.navBack {
|
||||
@apply box-border flex justify-center items-center mr-3 w-8 h-8 bg-white bg-center bg-no-repeat cursor-pointer hover:border-gray-300;
|
||||
border: 0.5px solid #F2F4F7;
|
||||
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
||||
border-radius: 32px;
|
||||
background-image: url(../assets/arrow-narrow-left.svg);
|
||||
background-size: 16px;
|
||||
}
|
||||
.stepList {
|
||||
@apply p-4 relative;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.stepItem {
|
||||
@apply relative flex justify-items-start pt-3 pr-0 pb-3 box-content;
|
||||
padding-left: 52px;
|
||||
font-size: 13px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.stepItem.step1::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 23px;
|
||||
width: 2px;
|
||||
height: 7px;
|
||||
background-color: #f2f4f7;
|
||||
}
|
||||
|
||||
.stepItem.step2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 23px;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: #f2f4f7;
|
||||
}
|
||||
.stepItem.step2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 23px;
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.stepItem.step3::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 23px;
|
||||
width: 2px;
|
||||
height: 7px;
|
||||
background-color: #f2f4f7;
|
||||
}
|
||||
|
||||
.stepNum {
|
||||
@apply box-border absolute top-2 left-3 flex justify-center items-center w-6 h-6;
|
||||
color: #98a2b3;
|
||||
font-size: 12px;
|
||||
border: 1px solid #F2F4F7;
|
||||
border-radius: 24px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.stepName {
|
||||
color: #98a2b3;
|
||||
}
|
||||
|
||||
.stepItem.active .stepNum {
|
||||
color: #1c64f2;
|
||||
background-color: #EFF4FF;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.stepItem.active .stepName {
|
||||
color: #1c64f2;
|
||||
}
|
||||
|
||||
.stepItem.done .stepNum {
|
||||
color: #667085;
|
||||
background-color: #f2f4f7;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.stepItem.done .stepNum::after {
|
||||
content: '';
|
||||
display: flex;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: center no-repeat url(../assets/check.svg);
|
||||
background-size: 12px;
|
||||
}
|
||||
|
||||
.stepItem.done .stepName {
|
||||
color: #667085;
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
'use client'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
import { useCallback } from 'react'
|
||||
import s from './index.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
|
||||
type IStepsNavBarProps = {
|
||||
step: number
|
||||
datasetId?: string
|
||||
}
|
||||
|
||||
const STEP_T_MAP: Record<number, string> = {
|
||||
1: 'datasetCreation.steps.one',
|
||||
2: 'datasetCreation.steps.two',
|
||||
3: 'datasetCreation.steps.three',
|
||||
}
|
||||
|
||||
const STEP_LIST = [1, 2, 3]
|
||||
|
||||
const StepsNavBar = ({
|
||||
step,
|
||||
datasetId,
|
||||
}: IStepsNavBarProps) => {
|
||||
const { t } = useTranslation()
|
||||
const router = useRouter()
|
||||
|
||||
const media = useBreakpoints()
|
||||
const isMobile = media === MediaType.mobile
|
||||
|
||||
const navBackHandle = useCallback(() => {
|
||||
if (!datasetId)
|
||||
router.replace('/datasets')
|
||||
else
|
||||
router.replace(`/datasets/${datasetId}/documents`)
|
||||
}, [router, datasetId])
|
||||
|
||||
return (
|
||||
<div className='w-full pt-4'>
|
||||
<div className={cn(s.stepsHeader, isMobile && '!px-0 justify-center')}>
|
||||
<div onClick={navBackHandle} className={cn(s.navBack, isMobile && '!mr-0')} />
|
||||
{!isMobile && (!datasetId ? t('datasetCreation.steps.header.creation') : t('datasetCreation.steps.header.update'))}
|
||||
</div>
|
||||
<div className={cn(s.stepList, isMobile && '!p-0')}>
|
||||
{STEP_LIST.map(item => (
|
||||
<div
|
||||
key={item}
|
||||
className={cn(s.stepItem, s[`step${item}`], step === item && s.active, step > item && s.done, isMobile && 'px-0')}
|
||||
>
|
||||
<div className={cn(s.stepNum)}>{step > item ? '' : item}</div>
|
||||
<div className={cn(s.stepName)}>{isMobile ? '' : t(STEP_T_MAP[item])}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepsNavBar
|
||||
Loading…
Reference in New Issue