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 React, { useEffect } from 'react'
import { useShallow } from 'zustand/react/shallow' import { useShallow } from 'zustand/react/shallow'
import { RiLayoutRight2Line } from '@remixicon/react' import { RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react'
import { LayoutRight2LineMod } from '../base/icons/src/public/knowledge'
import NavLink from './navLink'
import type { NavIcon } from './navLink' import type { NavIcon } from './navLink'
import NavLink from './navLink'
import AppBasic from './basic' import AppBasic from './basic'
import AppInfo from './app-info' import AppInfo from './app-info'
import DatasetInfo from './dataset-info' import DatasetInfo from './dataset-info'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { useStore as useAppStore } from '@/app/components/app/store' import { useStore as useAppStore } from '@/app/components/app/store'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { useSearchParams } from 'next/navigation'
export type IAppDetailNavProps = { export type IAppDetailNavProps = {
iconType?: 'app' | 'dataset' | 'notion' iconType?: 'app' | 'dataset' | 'notion'
@@ -27,7 +27,16 @@ export type IAppDetailNavProps = {
extraInfo?: (modeState: string) => React.ReactNode 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 => ({ const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
appSidebarExpand: state.appSidebarExpand, appSidebarExpand: state.appSidebarExpand,
setAppSiderbarExpand: state.setAppSiderbarExpand, setAppSiderbarExpand: state.setAppSiderbarExpand,
@@ -47,6 +56,15 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
} }
}, [appSidebarExpand, setAppSiderbarExpand]) }, [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 ( return (
<div <div
className={` className={`
@@ -61,7 +79,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
`} `}
> >
{iconType === 'app' && ( {iconType === 'app' && (
<AppInfo expand={expand} /> <AppInfo expand={expand}/>
)} )}
{iconType === 'dataset' && ( {iconType === 'dataset' && (
<DatasetInfo <DatasetInfo
@@ -85,7 +103,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
)} )}
</div> </div>
<div className='px-4'> <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> </div>
<nav <nav
className={` className={`
@@ -95,7 +113,8 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
> >
{navigation.map((item, index) => { {navigation.map((item, index) => {
return ( 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> </nav>
@@ -108,13 +127,13 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
`} `}
> >
<div <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)} onClick={() => handleToggle(appSidebarExpand)}
> >
{ {
expand expand
? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text' /> ? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text'/>
: <LayoutRight2LineMod className='h-5 w-5 text-components-menu-item-text' /> : <RiLayoutLeft2Line className='h-5 w-5 text-components-menu-item-text'/>
} }
</div> </div>
</div> </div>

View File

@@ -9,9 +9,10 @@ type LogoSiteProps = {
const LogoSite: FC<LogoSiteProps> = ({ const LogoSite: FC<LogoSiteProps> = ({
className, className,
}) => { }) => {
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
return ( return (
<img <img
src={'/logo/logo.png'} src={ `${baseUrl}/logo/logo.png`}
className={classNames('block w-[22.651px] h-[24.5px]', className)} className={classNames('block w-[22.651px] h-[24.5px]', className)}
alt='logo' alt='logo'
/> />

View File

@@ -1,5 +1,5 @@
'use client' 'use client'
import { usePathname } from 'next/navigation' import { usePathname, useSearchParams } from 'next/navigation'
import s from './index.module.css' import s from './index.module.css'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
@@ -11,8 +11,16 @@ const HeaderWrapper = ({
children, children,
}: HeaderWrapperProps) => { }: HeaderWrapperProps) => {
const pathname = usePathname() const pathname = usePathname()
const searchParams = useSearchParams()
const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools'].includes(pathname) const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools'].includes(pathname)
// 当不携带 header 参数时,或者 header 参数为 1 时,显示 header
const headerParam = searchParams.get('header')
const showHeader = !headerParam || headerParam === '1'
// console.log('headerParam: ', headerParam, !headerParam, (headerParam === '1'))
// console.log('showHeader: ', showHeader)
if (!showHeader) return null
return ( return (
<div className={classNames( <div className={classNames(
'sticky top-0 left-0 right-0 z-30 flex flex-col grow-0 shrink-0 basis-auto min-h-[56px]', 'sticky top-0 left-0 right-0 z-30 flex flex-col grow-0 shrink-0 basis-auto min-h-[56px]',

View File

@@ -14,6 +14,8 @@ const withMDX = require('@next/mdx')({
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
basePath: process.env.NEXT_PUBLIC_BASE_URL,
assetPrefix: process.env.NEXT_PUBLIC_BASE_URL,
webpack: (config, { dev, isServer }) => { webpack: (config, { dev, isServer }) => {
config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' })) config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }))
return config return config

View File

@@ -22,8 +22,7 @@
"test": "jest", "test": "jest",
"test:watch": "jest --watch", "test:watch": "jest --watch",
"storybook": "storybook dev -p 6006", "storybook": "storybook dev -p 6006",
"build-storybook": "storybook build", "build-storybook": "storybook build"
"preinstall": "npx only-allow pnpm"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.22.3", "@babel/runtime": "^7.22.3",
@@ -213,4 +212,4 @@
"@types/react-dom": "19.0.4", "@types/react-dom": "19.0.4",
"@storybook/test": "8.5.0" "@storybook/test": "8.5.0"
} }
} }