duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update Sidebar and Login components with icon integration and localization improvements

Browse Source
This commit is contained in:
DEV_DSW
2026-04-17 16:23:11 +08:00
parent 79bea4f107
commit a2f4eb341e
3 changed files with 52 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/layout/Sidebar.tsx
View File

@@ -1,14 +1,15 @@
import { useLocation, useNavigate } from 'react-router-dom';
import { Book, Clock, Code, Cpu, House, Puzzle, Settings } from 'lucide-react';
import { NAV_ITEMS, normalizeWorkspacePath } from '../../router/routes';
const MENU_MARKS: Record<string, string> = {
'/home': '首',
'/knowledge': '知',
'/agents': '模',
'/skills': '技',
'/cron': '时',
'/scripts': '脚',
'/setting': '设',
const MENU_MARKS: Record<string, typeof House> = {
'/home': House,
'/knowledge': Book,
'/agents': Cpu,
'/skills': Puzzle,
'/cron': Clock,
'/scripts': Code,
'/setting': Settings,
};
export default function Sidebar() {
@@ -17,11 +18,12 @@ export default function Sidebar() {
const currentId = normalizeWorkspacePath(location.pathname);
return (
<aside className="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
<div className="flex flex-col gap-[16px] w-full">
<aside className="box-border flex h-full w-[80px] flex-col items-center pb-[8px]">
<div className="flex w-full flex-col gap-[16px]">
{NAV_ITEMS.map((item) => {
const active = currentId === item.path;
const isSetting = item.path === '/setting';
const MenuMark = MENU_MARKS[item.path];
return (
<div
@@ -30,25 +32,25 @@ export default function Sidebar() {
>
<button
type="button"
className="cursor-pointer flex flex-col items-center justify-center"
className="flex cursor-pointer flex-col items-center justify-center"
onClick={() => navigate(item.path)}
>
<div
className={[
'box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white dark:hover:bg-[#222225]',
'box-border flex h-[48px] w-[48px] flex-col items-center justify-center rounded-[16px] hover:bg-white dark:hover:bg-[#222225]',
active ? 'bg-white dark:bg-[#222225]' : '',
].join(' ')}
>
<span
className="text-[18px] font-semibold leading-none"
<MenuMark
aria-hidden="true"
className="h-[18px] w-[18px]"
strokeWidth={2.1}
style={{ color: active ? '#2B7FFF' : '#525866' }}
>
{MENU_MARKS[item.path]}
</span>
/>
</div>
<div
className="text-[14px] mt-[4px] mb-[8px] hover:text-[#2B7FFF]"
className="mt-[4px] mb-[8px] text-[14px] hover:text-[#2B7FFF]"
style={{ color: active ? '#2B7FFF' : '#525866' }}
>
{item.label}
@@ -59,7 +61,7 @@ export default function Sidebar() {
})}
</div>
<div className="w-[48px] h-[48px] rounded-full overflow-hidden mt-auto bg-white dark:bg-[#222225] flex items-center justify-center border border-black/10 dark:border-[#2a2a2d]">
<div className="mt-auto flex h-[48px] w-[48px] items-center justify-center overflow-hidden rounded-full border border-black/10 bg-white dark:border-[#2a2a2d] dark:bg-[#222225]">
<span className="text-[16px] font-bold text-[#2B7FFF]">Z</span>
</div>
</aside>