generated from kevisual/vite-react-template
feat: 添加可折叠侧边栏布局,优化仓库列表和工作空间页面
This commit is contained in:
11
src/pages/sidebar/components/CNBBlackLogo.tsx
Normal file
11
src/pages/sidebar/components/CNBBlackLogo.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
export const Logo = (props: React.SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg {...props} width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M228.906 40.2412C229.882 37.5108 228.906 34.3903 226.759 32.44C219.342 26.004 200.799 12.3519 173.082 10.4016C141.852 8.06121 122.528 16.4475 112.769 22.6885C108.474 25.4189 108.279 31.4649 112.183 34.3903L191.625 96.2149C198.652 101.676 208.997 98.5553 211.729 90.169L228.711 40.2412H228.906Z" fill="black" />
|
||||
<path d="M32.9381 223.564C29.6199 225.71 28.2536 229.805 29.2295 233.511C32.1573 244.432 41.3312 266.861 66.9009 287.534C92.4706 308.012 122.725 310.353 135.607 309.963C139.511 309.963 142.829 307.427 144 303.722L194.945 142.627C198.653 130.925 185.576 121.173 175.426 127.999L32.9381 223.564Z" fill="black" />
|
||||
<path d="M70.2169 53.4955C67.6794 52.5203 64.9468 52.7153 62.6045 53.8855C53.2355 58.9563 29.032 74.7538 16.54 107.324C6.78054 132.288 10.0987 159.982 12.8314 173.439C13.6121 177.925 18.2967 180.46 22.5908 178.705L175.424 119.026C186.354 114.735 186.354 99.3276 175.424 95.0369L70.2169 53.4955Z" fill="black" />
|
||||
<path d="M297.03 168.968C301.519 171.893 307.57 169.358 308.351 164.092C310.303 150.05 312.06 125.866 304.057 107.338C293.321 82.9591 274.974 67.7468 266.19 61.7008C263.458 59.7505 259.749 59.9456 257.212 62.2859L218.564 96.4162C212.318 102.072 212.904 112.019 219.931 116.699L297.03 168.968Z" fill="black" />
|
||||
<path d="M189.089 299.428C188.699 303.914 192.603 307.814 197.092 307.229C211.731 305.669 241.79 299.818 264.237 278.365C286.098 257.496 293.32 232.728 295.272 222.781C295.858 220.051 295.272 217.32 293.515 215.175L225.98 131.897C218.758 122.925 204.119 127.411 203.143 138.918L189.089 299.233V299.428Z" fill="black" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
35
src/pages/sidebar/components/Sidebar.tsx
Normal file
35
src/pages/sidebar/components/Sidebar.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { FolderKanban, LayoutDashboard, Settings, PlayCircle } from 'lucide-react'
|
||||
import { Sidebar, type NavItem } from '@/components/a/Sidebar'
|
||||
import { Logo } from './CNBBlackLogo.tsx'
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
title: '仓库管理',
|
||||
path: '/',
|
||||
icon: <FolderKanban className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: '工作空间',
|
||||
path: '/workspaces',
|
||||
icon: <LayoutDashboard className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: '应用配置',
|
||||
path: '/config',
|
||||
icon: <Settings className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
path: '/demo',
|
||||
icon: <PlayCircle className="w-5 h-5" />,
|
||||
isDeveloping: true,
|
||||
},
|
||||
]
|
||||
|
||||
export function SidebarLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<Sidebar items={navItems} title='云原生' logo={<Logo className='w-6 h-6' />}>
|
||||
{children}
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
1
src/pages/sidebar/components/index.ts
Normal file
1
src/pages/sidebar/components/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { SidebarLayout } from './Sidebar'
|
||||
Reference in New Issue
Block a user