AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 05:05:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update Line component for dark mode support and improve Empty co… (#20196)

Browse Source 
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Wu Tianwei 2025-05-26 10:42:54 +08:00 committed by GitHub
parent cbfc32b11f
commit 3995f55cbc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/app/components/plugins/marketplace/empty/line.tsx
View File

@ -1,17 +1,39 @@
'use client'
import useTheme from '@/hooks/use-theme'
type LineProps = {
className?: string
}
const Line = ({
className,
}: LineProps) => {
const { theme } = useTheme()
const isDarkMode = theme === 'dark'
if (isDarkMode) {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='2' height='240' viewBox='0 0 2 240' fill='none' className={className}>
<path d='M1 0L1 240' stroke='url(#paint0_linear_6295_52176)' />
<defs>
<linearGradient id='paint0_linear_6295_52176' x1='-7.99584' y1='240' x2='-7.88094' y2='3.95539e-05' gradientUnits='userSpaceOnUse'>
<stop stopOpacity='0.01' />
<stop offset='0.503965' stopColor='#C8CEDA' stopOpacity='0.14' />
<stop offset='1' stopOpacity='0.01' />
</linearGradient>
</defs>
</svg>
)
}
return (
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="241" viewBox="0 0 2 241" fill="none" className={className}>
<path d="M1 0.5L1 240.5" stroke="url(#paint0_linear_1989_74474)"/>
<svg xmlns='http://www.w3.org/2000/svg' width='2' height='241' viewBox='0 0 2 241' fill='none' className={className}>
<path d='M1 0.5L1 240.5' stroke='url(#paint0_linear_1989_74474)' />
<defs>
<linearGradient id="paint0_linear_1989_74474" x1="-7.99584" y1="240.5" x2="-7.88094" y2="0.50004" gradientUnits="userSpaceOnUse">
<stop stopColor="white" stopOpacity="0.01"/>
<stop offset="0.503965" stopColor="#101828" stopOpacity="0.08"/>
<stop offset="1" stopColor="white" stopOpacity="0.01"/>
<linearGradient id='paint0_linear_1989_74474' x1='-7.99584' y1='240.5' x2='-7.88094' y2='0.50004' gradientUnits='userSpaceOnUse'>
<stop stopColor='white' stopOpacity='0.01' />
<stop offset='0.503965' stopColor='#101828' stopOpacity='0.08' />
<stop offset='1' stopColor='white' stopOpacity='0.01' />
</linearGradient>
</defs>
</svg>

20
web/app/components/plugins/plugin-page/empty/index.tsx
View File

@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next'
import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
import { noop } from 'lodash-es'
import { useGlobalPublicStore } from '@/context/global-public-context'
import Button from '@/app/components/base/button'
const Empty = () => {
const { t } = useTranslation()
@ -43,14 +44,14 @@ const Empty = () => {
{/* skeleton */}
<div className='absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden px-12'>
{Array.from({ length: 20 }).fill(0).map((_, i) => (
<div key={i} className='h-[100px] rounded-xl bg-components-card-bg' />
<div key={i} className='h-24 rounded-xl bg-components-card-bg' />
))}
</div>
{/* mask */}
<div className='absolute z-20 h-full w-full bg-gradient-to-b from-components-panel-bg-transparent to-components-panel-bg' />
<div className='relative z-30 flex h-full items-center justify-center'>
<div className='flex flex-col items-center gap-y-3'>
<div className='relative -z-10 flex h-[52px] w-[52px] items-center justify-center rounded-xl
<div className='relative -z-10 flex size-14 items-center justify-center rounded-xl
border-[1px] border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5'>
<Group className='h-5 w-5 text-text-tertiary' />
<Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' />
@ -58,10 +59,10 @@ const Empty = () => {
<Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
</div>
<div className='text-sm font-normal text-text-tertiary'>
<div className='system-md-regular text-text-tertiary'>
{text}
</div>
<div className='flex w-[240px] flex-col'>
<div className='flex w-[236px] flex-col'>
<input
type='file'
ref={fileInputRef}
@ -79,10 +80,9 @@ const Empty = () => {
{ icon: Github, text: t('plugin.list.source.github'), action: 'github' },
{ icon: FileZip, text: t('plugin.list.source.local'), action: 'local' },
].map(({ icon: Icon, text, action }) => (
<div
<Button
key={action}
className='flex cursor-pointer items-center gap-x-1 rounded-lg border-[0.5px] bg-components-button-secondary-bg
px-3 py-2 shadow-xs shadow-shadow-shadow-3 hover:bg-state-base-hover'
className='justify-start gap-x-0.5 px-3'
onClick={() => {
if (action === 'local')
fileInputRef.current?.click()
@ -92,9 +92,9 @@ const Empty = () => {
setSelectedAction(action)
}}
>
<Icon className="h-4 w-4 text-text-tertiary" />
<span className='system-md-regular text-text-secondary'>{text}</span>
</div>
<Icon className='size-4' />
<span className='px-0.5'>{text}</span>
</Button>
))}
</div>
</div>