admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: fe mobile responsive next (#1609)

Browse Source
This commit is contained in:
Yuhao
2023-11-27 11:47:48 +08:00
committed by GitHub
parent 3cc697832a
commit a9c1c7d239
89 changed files with 768 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/explore/installed-app/index.tsx
View File

@@ -26,7 +26,7 @@ const InstalledApp: FC<IInstalledAppProps> = ({
}
return (
<div className='h-full p-2'>
<div className='h-full py-2 pl-0 pr-2 sm:p-2'>
{installedApp?.app.mode === 'chat'
? (
<ChatApp isInstalledApp installedAppInfo={installedApp} />

37
web/app/components/explore/sidebar/app-nav-item/index.tsx
View File

@@ -9,6 +9,7 @@ import ItemOperation from '@/app/components/explore/item-operation'
import AppIcon from '@/app/components/base/app-icon'
export type IAppNavItemProps = {
isMobile: boolean
name: string
id: string
icon: string
@@ -21,6 +22,7 @@ export type IAppNavItemProps = {
}
export default function AppNavItem({
isMobile,
name,
id,
icon,
@@ -42,27 +44,30 @@ export default function AppNavItem({
className={cn(
s.item,
isSelected ? s.active : 'hover:bg-gray-200',
'flex h-8 items-center justify-between px-2 rounded-lg text-sm font-normal ',
'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
)}
onClick={() => {
router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
}}
>
<div className='flex items-center space-x-2 w-0 grow'>
<AppIcon size='tiny' icon={icon} background={icon_background} />
<div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
</div>
{
<div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
<ItemOperation
isPinned={isPinned}
isItemHovering={isHovering}
togglePin={togglePin}
isShowDelete={!uninstallable && !isSelected}
onDelete={() => onDelete(id)}
/>
</div>
}
{isMobile && <AppIcon size='tiny' icon={icon} background={icon_background} />}
{!isMobile && (
<>
<div className='flex items-center space-x-2 w-0 grow'>
<AppIcon size='tiny' icon={icon} background={icon_background} />
<div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
</div>
<div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
<ItemOperation
isPinned={isPinned}
isItemHovering={isHovering}
togglePin={togglePin}
isShowDelete={!uninstallable && !isSelected}
onDelete={() => onDelete(id)}
/>
</div>
</>
)}
</div>
)
}

23
web/app/components/explore/sidebar/index.tsx
View File

@@ -11,6 +11,7 @@ import Item from './app-nav-item'
import { fetchInstalledAppList as doFetchInstalledAppList, uninstallApp, updatePinStatus } from '@/service/explore'
import ExploreContext from '@/context/explore-context'
import Confirm from '@/app/components/base/confirm'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
const SelectedDiscoveryIcon = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -36,9 +37,11 @@ const ChatIcon = () => (
</svg>
)
const SideBar: FC<{
export type IExploreSideBarProps = {
controlUpdateInstalledApps: number
}> = ({
}
const SideBar: FC<IExploreSideBarProps> = ({
controlUpdateInstalledApps,
}) => {
const { t } = useTranslation()
@@ -48,6 +51,9 @@ const SideBar: FC<{
const isChatSelected = lastSegment === 'chat'
const { installedApps, setInstalledApps } = useContext(ExploreContext)
const media = useBreakpoints()
const isMobile = media === MediaType.mobile
const fetchInstalledAppList = async () => {
const { installed_apps }: any = await doFetchInstalledAppList()
setInstalledApps(installed_apps)
@@ -84,28 +90,28 @@ const SideBar: FC<{
}, [controlUpdateInstalledApps])
return (
<div className='w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
<div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
<div>
<Link
href='/explore/apps'
className={cn(isDiscoverySelected ? 'text-primary-600 bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center h-9 pl-3 space-x-2 rounded-lg')}
className={cn(isDiscoverySelected ? 'text-primary-600 bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
style={isDiscoverySelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
>
{isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />}
<div className='text-sm'>{t('explore.sidebar.discovery')}</div>
{!isMobile && <div className='text-sm'>{t('explore.sidebar.discovery')}</div>}
</Link>
<Link
href='/explore/chat'
className={cn(isChatSelected ? 'text-primary-600 bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center h-9 pl-3 space-x-2 rounded-lg')}
className={cn(isChatSelected ? 'text-primary-600 bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
style={isChatSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
>
{isChatSelected ? <SelectedChatIcon /> : <ChatIcon />}
<div className='text-sm'>{t('explore.sidebar.chat')}</div>
{!isMobile && <div className='text-sm'>{t('explore.sidebar.chat')}</div>}
</Link>
</div>
{installedApps.length > 0 && (
<div className='mt-10'>
<div className='pl-2 text-xs text-gray-500 font-medium uppercase'>{t('explore.sidebar.workspace')}</div>
<p className='pl-2 mobile:px-0 text-xs text-gray-500 break-all font-medium uppercase'>{t('explore.sidebar.workspace')}</p>
<div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden'
style={{
height: 'calc(100vh - 250px)',
@@ -115,6 +121,7 @@ const SideBar: FC<{
return (
<Item
key={id}
isMobile={isMobile}
name={name}
icon={icon}
icon_background={icon_background}

8
web/app/components/explore/universal-chat/index.tsx
View File

@@ -10,7 +10,6 @@ import produce from 'immer'
import { useBoolean, useGetState } from 'ahooks'
import AppUnavailable from '../../base/app-unavailable'
import useConversation from './hooks/use-conversation'
import s from './style.module.css'
import Init from './init'
import { ToastContext } from '@/app/components/base/toast'
import Sidebar from '@/app/components/share/chat/sidebar'
@@ -721,10 +720,10 @@ const Main: FC<IMainProps> = () => {
return <Loading type='app' />
return (
<div className='bg-gray-100'>
<div className='bg-gray-100 h-full'>
<div
className={cn(
'flex rounded-t-2xl bg-white overflow-hidden rounded-b-2xl',
'flex rounded-t-2xl bg-white overflow-hidden rounded-b-2xl h-full',
)}
style={{
boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
@@ -744,8 +743,7 @@ const Main: FC<IMainProps> = () => {
)}
{/* main */}
<div className={cn(
s.installedApp,
'flex-grow flex flex-col overflow-y-auto',
'h-full flex-grow flex flex-col overflow-y-auto',
)
}>
{(!isNewConversation || isResponsing || errorHappened) && (

10
web/app/components/explore/universal-chat/init/index.tsx
View File

@@ -8,7 +8,7 @@ import Config from '../config'
import s from './style.module.css'
const Line = (
<svg width="720" height="1" viewBox="0 0 720 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="100%" height="1" viewBox="0 0 720 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="0.5" x2="720" y2="0.5" stroke="url(#paint0_linear_6845_53470)"/>
<defs>
<linearGradient id="paint0_linear_6845_53470" x1="0" y1="1" x2="720" y2="1" gradientUnits="userSpaceOnUse">
@@ -26,16 +26,16 @@ const Init: FC<IConfigProps> = ({
const { t } = useTranslation()
return (
<div className='h-full flex items-center'>
<div className='h-full flex items-center justify-center'>
<div>
<div className='w-[480px] mx-auto text-center'>
<div className='text-center'>
<div className={cn(s.textGradient, 'mb-2 leading-[32px] font-semibold text-[24px]')}>{t('explore.universalChat.welcome')}</div>
<div className='mb-2 font-normal text-sm text-gray-500'>{t('explore.universalChat.welcomeDescribe')}</div>
</div>
<div className='flex mb-2 mx-auto h-8 items-center'>
<div className='flex mb-2 h-8 items-center'>
{Line}
</div>
<Config className='w-[480px] mx-auto' {...configProps} />
<Config {...configProps} />
</div>
</div>
)

3
web/app/components/explore/universal-chat/style.module.css
View File

@@ -1,3 +0,0 @@
.installedApp {
height: calc(100vh - 74px);
}