mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-22 01:06:52 +08:00
feat: add some feature
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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'
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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]',
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user