kudzues/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-05 19:59:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/base/date-and-time-picker/calendar/days-of-week.tsx
View File

@@ -5,11 +5,11 @@ export const DaysOfWeek = () => {
const daysOfWeek = useDaysOfWeek()
return (
<div className='grid grid-cols-7 gap-x-0.5 p-2 border-b-[0.5px] border-divider-regular'>
<div className='grid grid-cols-7 gap-x-0.5 border-b-[0.5px] border-divider-regular p-2'>
{daysOfWeek.map(day => (
<div
key={day}
className='flex items-center justify-center text-text-tertiary system-2xs-medium'
className='system-2xs-medium flex items-center justify-center text-text-tertiary'
>
{day}
</div>

6
web/app/components/base/date-and-time-picker/calendar/item.tsx
View File

@@ -16,13 +16,13 @@ const Item: FC<CalendarItemProps> = ({
<button
onClick={() => onClick(date)}
className={cn(
'relative px-1 py-2 rounded-lg flex items-center justify-center system-sm-medium',
'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',
isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
isSelected ? 'text-components-button-primary-text system-sm-medium bg-components-button-primary-bg' : 'hover:bg-state-base-hover',
isSelected ? 'system-sm-medium bg-components-button-primary-bg text-components-button-primary-text' : 'hover:bg-state-base-hover',
)}
>
{date.date()}
{isToday && <div className='absolute bottom-1 mx-auto w-1 h-1 rounded-full bg-components-button-primary-bg' />}
{isToday && <div className='absolute bottom-1 mx-auto h-1 w-1 rounded-full bg-components-button-primary-bg' />}
</button>
)
}

2
web/app/components/base/date-and-time-picker/common/option-list-item.tsx
View File

@@ -22,7 +22,7 @@ const OptionListItem: FC<OptionListItemProps> = ({
<li
ref={listItemRef}
className={cn(
'px-1.5 py-1 rounded-md flex items-center justify-center text-components-button-ghost-text system-xs-medium cursor-pointer',
'system-xs-medium flex cursor-pointer items-center justify-center rounded-md px-1.5 py-1 text-components-button-ghost-text',
isSelected ? 'bg-components-button-ghost-bg-hover' : 'hover:bg-components-button-ghost-bg-hover',
)}
onClick={() => {

10
web/app/components/base/date-and-time-picker/date-picker/footer.tsx
View File

@@ -17,18 +17,18 @@ const Footer: FC<DatePickerFooterProps> = ({
return (
<div className={cn(
'flex justify-between items-center p-2 border-t-[0.5px] border-divider-regular',
'flex items-center justify-between border-t-[0.5px] border-divider-regular p-2',
!needTimePicker && 'justify-end',
)}>
{/* Time Picker */}
{needTimePicker && (
<button
type='button'
className='flex items-center rounded-md px-1.5 py-1 gap-x-[1px] border-[0.5px] border-components-button-secondary-border system-xs-medium
bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] text-components-button-secondary-accent-text'
className='system-xs-medium flex items-center gap-x-[1px] rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5
py-1 text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
onClick={handleClickTimePicker}
>
<RiTimeLine className='w-3.5 h-3.5' />
<RiTimeLine className='h-3.5 w-3.5' />
{view === ViewType.date && <span>{displayTime}</span>}
{view === ViewType.time && <span>{t('time.operation.pickDate')}</span>}
</button>
@@ -37,7 +37,7 @@ const Footer: FC<DatePickerFooterProps> = ({
{/* Now */}
<button
type='button'
className='flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text system-xs-medium'
className='system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text'
onClick={handleSelectCurrentDate}
>
<span className='px-[3px]'>{t('time.operation.now')}</span>

14
web/app/components/base/date-and-time-picker/date-picker/header.tsx
View File

@@ -12,27 +12,27 @@ const Header: FC<DatePickerHeaderProps> = ({
const months = useMonths()
return (
<div className='flex items-center mx-2 mt-2'>
<div className='mx-2 mt-2 flex items-center'>
<div className='flex-1'>
<button
onClick={handleOpenYearMonthPicker}
className='flex items-center gap-x-0.5 px-2 py-1.5 rounded-lg hover:bg-state-base-hover text-text-primary system-md-semibold'
className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
>
<span>{`${months[currentDate.month()]} ${currentDate.year()}`}</span>
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
<RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
</button>
</div>
<button
onClick={onClickPrevMonth}
className='p-1.5 hover:bg-state-base-hover rounded-lg'
className='rounded-lg p-1.5 hover:bg-state-base-hover'
>
<RiArrowUpSLine className='w-[18px] h-[18px] text-text-secondary' />
<RiArrowUpSLine className='h-[18px] w-[18px] text-text-secondary' />
</button>
<button
onClick={onClickNextMonth}
className='p-1.5 hover:bg-state-base-hover rounded-lg'
className='rounded-lg p-1.5 hover:bg-state-base-hover'
>
<RiArrowDownSLine className='w-[18px] h-[18px] text-text-secondary' />
<RiArrowDownSLine className='h-[18px] w-[18px] text-text-secondary' />
</button>
</div>
)

14
web/app/components/base/date-and-time-picker/date-picker/index.tsx
View File

@@ -213,25 +213,25 @@ const DatePicker = ({
handleClickTrigger,
})) : (
<div
className='w-[252px] flex items-center gap-x-0.5 rounded-lg px-2 py-1 bg-components-input-bg-normal cursor-pointer group hover:bg-state-base-hover-alt'
className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
onClick={handleClickTrigger}
>
<input
className='flex-1 p-1 bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder truncate system-xs-regular
outline-none appearance-none cursor-pointer'
className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
readOnly
value={isOpen ? '' : displayValue}
placeholder={placeholderDate}
/>
<RiCalendarLine className={cn(
'shrink-0 w-4 h-4 text-text-quaternary',
'h-4 w-4 shrink-0 text-text-quaternary',
isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
(displayValue || (isOpen && selectedDate)) && 'group-hover:hidden',
)} />
<RiCloseCircleFill
className={cn(
'hidden shrink-0 w-4 h-4 text-text-quaternary',
(displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block hover:text-text-secondary',
'hidden h-4 w-4 shrink-0 text-text-quaternary',
(displayValue || (isOpen && selectedDate)) && 'hover:text-text-secondary group-hover:inline-block',
)}
onClick={handleClear}
/>
@@ -239,7 +239,7 @@ const DatePicker = ({
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={popupZIndexClassname}>
<div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
<div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
{/* Header */}
{view === ViewType.date ? (
<DatePickerHeader

4
web/app/components/base/date-and-time-picker/time-picker/footer.tsx
View File

@@ -10,12 +10,12 @@ const Footer: FC<TimePickerFooterProps> = ({
const { t } = useTranslation()
return (
<div className='flex justify-end items-center p-2 border-t-[0.5px] border-divider-regular'>
<div className='flex items-center justify-end border-t-[0.5px] border-divider-regular p-2'>
<div className='flex items-center gap-x-1'>
{/* Now */}
<button
type='button'
className='flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text system-xs-medium'
className='system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text'
onClick={handleSelectCurrentTime}
>
<span className='px-[3px]'>{t('time.operation.now')}</span>

2
web/app/components/base/date-and-time-picker/time-picker/header.tsx
View File

@@ -6,7 +6,7 @@ const Header = () => {
return (
<div className='flex flex-col border-b-[0.5px] border-divider-regular'>
<div className='flex items-center px-2 py-1.5 text-text-primary system-md-semibold'>
<div className='system-md-semibold flex items-center px-2 py-1.5 text-text-primary'>
{t('time.title.pickTime')}
</div>
</div>

14
web/app/components/base/date-and-time-picker/time-picker/index.tsx
View File

@@ -117,25 +117,25 @@ const TimePicker = ({
<PortalToFollowElemTrigger>
{renderTrigger ? (renderTrigger()) : (
<div
className='w-[252px] flex items-center gap-x-0.5 rounded-lg px-2 py-1 bg-components-input-bg-normal cursor-pointer group hover:bg-state-base-hover-alt'
className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
onClick={handleClickTrigger}
>
<input
className='flex-1 p-1 bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder truncate system-xs-regular
outline-none appearance-none cursor-pointer'
className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
readOnly
value={isOpen ? '' : displayValue}
placeholder={placeholderDate}
/>
<RiTimeLine className={cn(
'shrink-0 w-4 h-4 text-text-quaternary',
'h-4 w-4 shrink-0 text-text-quaternary',
isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
(displayValue || (isOpen && selectedTime)) && 'group-hover:hidden',
)} />
<RiCloseCircleFill
className={cn(
'hidden shrink-0 w-4 h-4 text-text-quaternary',
(displayValue || (isOpen && selectedTime)) && 'group-hover:inline-block hover:text-text-secondary',
'hidden h-4 w-4 shrink-0 text-text-quaternary',
(displayValue || (isOpen && selectedTime)) && 'hover:text-text-secondary group-hover:inline-block',
)}
onClick={handleClear}
/>
@@ -143,7 +143,7 @@ const TimePicker = ({
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-50'>
<div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
<div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
{/* Header */}
<Header />

6
web/app/components/base/date-and-time-picker/time-picker/options.tsx
View File

@@ -14,7 +14,7 @@ const Options: FC<TimeOptionsProps> = ({
return (
<div className='grid grid-cols-3 gap-x-1 p-2'>
{/* Hour */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
hourOptions.map((hour) => {
const isSelected = selectedTime?.format('hh') === hour
@@ -31,7 +31,7 @@ const Options: FC<TimeOptionsProps> = ({
}
</ul>
{/* Minute */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
minuteOptions.map((minute) => {
const isSelected = selectedTime?.format('mm') === minute
@@ -48,7 +48,7 @@ const Options: FC<TimeOptionsProps> = ({
}
</ul>
{/* Period */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
periodOptions.map((period) => {
const isSelected = selectedTime?.format('A') === period

6
web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
View File

@@ -11,14 +11,14 @@ const Header: FC<YearAndMonthPickerHeaderProps> = ({
const months = useMonths()
return (
<div className='flex p-2 pb-1 border-b-[0.5px] border-divider-regular'>
<div className='flex border-b-[0.5px] border-divider-regular p-2 pb-1'>
{/* Year and Month */}
<button
onClick={onClick}
className='flex items-center gap-x-0.5 px-2 py-1.5 rounded-lg hover:bg-state-base-hover text-text-primary system-md-semibold'
className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
>
<span>{`${months[selectedMonth]} ${selectedYear}`}</span>
<RiArrowUpSLine className='w-4 h-4 text-text-tertiary' />
<RiArrowUpSLine className='h-4 w-4 text-text-tertiary' />
</button>
</div>
)

4
web/app/components/base/date-and-time-picker/year-and-month-picker/options.tsx
View File

@@ -15,7 +15,7 @@ const Options: FC<YearAndMonthPickerOptionsProps> = ({
return (
<div className='grid grid-cols-2 gap-x-1 p-2'>
{/* Month Picker */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
months.map((month, index) => {
const isSelected = selectedMonth === index
@@ -32,7 +32,7 @@ const Options: FC<YearAndMonthPickerOptionsProps> = ({
}
</ul>
{/* Year Picker */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
yearOptions.map((year) => {
const isSelected = selectedYear === year