feat: add some feature

This commit is contained in:
Huangzhe
2025-04-24 09:29:48 +08:00
parent 2c2efe2e1e
commit 4a1913b076
5 changed files with 44 additions and 15 deletions

View File

@@ -1,15 +1,15 @@
import React, { useEffect } from 'react'
import { useShallow } from 'zustand/react/shallow'
import { RiLayoutRight2Line } from '@remixicon/react'
import { LayoutRight2LineMod } from '../base/icons/src/public/knowledge'
import NavLink from './navLink'
import { RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react'
import type { NavIcon } from './navLink'
import NavLink from './navLink'
import AppBasic from './basic'
import AppInfo from './app-info'
import DatasetInfo from './dataset-info'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { useStore as useAppStore } from '@/app/components/app/store'
import cn from '@/utils/classnames'
import { useSearchParams } from 'next/navigation'
export type IAppDetailNavProps = {
iconType?: 'app' | 'dataset' | 'notion'
@@ -27,7 +27,16 @@ export type IAppDetailNavProps = {
extraInfo?: (modeState: string) => React.ReactNode
}
const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
const AppDetailNav = ({
title,
desc,
isExternal,
icon,
icon_background,
navigation,
extraInfo,
iconType = 'app',
}: IAppDetailNavProps) => {
const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
appSidebarExpand: state.appSidebarExpand,
setAppSiderbarExpand: state.setAppSiderbarExpand,
@@ -47,6 +56,15 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
}
}, [appSidebarExpand, setAppSiderbarExpand])
const searchParams = useSearchParams()
// 从 router 查询参数,若有 sidebar选项,按照参数设置,没有的话,默认是展示内容
const showSidebar = !(searchParams?.get('sidebar')) || (searchParams?.get('sidebar') === '1')
// console.log('searchParams?.get("sidebar"): ', searchParams?.get('sidebar'),!(searchParams?.get('sidebar')) , (searchParams?.get('sidebar') === '1'))
// console.log('showSidebar: ', showSidebar)
// 如果showSidebar为false不显示
if (!showSidebar) return null
return (
<div
className={`
@@ -61,7 +79,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
`}
>
{iconType === 'app' && (
<AppInfo expand={expand} />
<AppInfo expand={expand}/>
)}
{iconType === 'dataset' && (
<DatasetInfo
@@ -85,7 +103,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
)}
</div>
<div className='px-4'>
<div className={cn('mx-auto mt-1 h-[1px] bg-divider-subtle', !expand && 'w-6')} />
<div className={cn('mx-auto mt-1 h-[1px] bg-divider-subtle', !expand && 'w-6')}/>
</div>
<nav
className={`
@@ -95,7 +113,8 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
>
{navigation.map((item, index) => {
return (
<NavLink key={index} mode={appSidebarExpand} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
<NavLink key={index} mode={appSidebarExpand} iconMap={{ selected: item.selectedIcon, normal: item.icon }}
name={item.name} href={item.href}/>
)
})}
</nav>
@@ -108,13 +127,13 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
`}
>
<div
className='flex h-6 w-6 cursor-pointer items-center justify-center text-gray-500'
className='flex h-6 w-6 cursor-pointer items-center justify-center'
onClick={() => handleToggle(appSidebarExpand)}
>
{
expand
? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text' />
: <LayoutRight2LineMod className='h-5 w-5 text-components-menu-item-text' />
? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text'/>
: <RiLayoutLeft2Line className='h-5 w-5 text-components-menu-item-text'/>
}
</div>
</div>