调整图标和渲染信息
This commit is contained in:
宇阳
@@ -3,7 +3,10 @@ import { Link } from 'react-router-dom';
|
||||
import ClickOutside from '../ClickOutside';
|
||||
import UserOne from '../../images/user/user-01.png';
|
||||
|
||||
import { useUserStore } from '@/stores'
|
||||
|
||||
const DropdownUser = () => {
|
||||
const store = useUserStore()
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
return (
|
||||
@@ -15,13 +18,13 @@ const DropdownUser = () => {
|
||||
>
|
||||
<span className="hidden text-right lg:block">
|
||||
<span className="block text-sm font-medium text-black dark:text-white">
|
||||
Thomas Anree
|
||||
{store.user?.name}
|
||||
</span>
|
||||
<span className="block text-xs">UX Designer</span>
|
||||
<span className="block text-xs">{store.user?.role}</span>
|
||||
</span>
|
||||
|
||||
<span className="h-12 w-12 rounded-full">
|
||||
<img src={UserOne} alt="User" />
|
||||
<span className="overflow-hidden h-12 w-12 rounded-full">
|
||||
<img src={store.user?.avatar} alt="User" />
|
||||
</span>
|
||||
|
||||
<svg
|
||||
@@ -69,7 +72,7 @@ const DropdownUser = () => {
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
My Profile
|
||||
我的资料
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -90,7 +93,7 @@ const DropdownUser = () => {
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
My Contacts
|
||||
我的联系人
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -115,7 +118,7 @@ const DropdownUser = () => {
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
Account Settings
|
||||
系统设置
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -137,7 +140,7 @@ const DropdownUser = () => {
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
Log Out
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -2,7 +2,8 @@ import React, { useEffect, useRef, useState } from 'react';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import SidebarLinkGroup from './SidebarLinkGroup';
|
||||
import Logo from '../../images/logo/logo.svg';
|
||||
import { BiHomeSmile, BiSpa } from "react-icons/bi";
|
||||
import { BiEditAlt, BiFolderOpen, BiHomeSmile, BiSitemap, BiSpa } from "react-icons/bi";
|
||||
import { BiCategoryAlt } from "react-icons/bi";
|
||||
|
||||
interface SidebarProps {
|
||||
sidebarOpen: boolean;
|
||||
@@ -56,6 +57,11 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
|
||||
}
|
||||
}, [sidebarExpanded]);
|
||||
|
||||
// 导航项样式
|
||||
const sidebarItemSty = "group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4"
|
||||
// 导航选中样式
|
||||
const sidebarItemActiveSty = "bg-graydark dark:bg-meta-4"
|
||||
|
||||
return (
|
||||
<aside
|
||||
ref={sidebar}
|
||||
@@ -94,16 +100,14 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
|
||||
<nav className="py-4 px-4 lg:px-6">
|
||||
<div>
|
||||
<h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">
|
||||
MENU
|
||||
Menu
|
||||
</h3>
|
||||
|
||||
<ul className="mb-6 flex flex-col gap-1.5">
|
||||
<li>
|
||||
<NavLink
|
||||
to="/"
|
||||
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${pathname.includes('dashboard') &&
|
||||
'bg-graydark dark:bg-meta-4'
|
||||
}`}
|
||||
className={`${sidebarItemSty} ${pathname.includes('dashboard') && sidebarItemActiveSty}`}
|
||||
>
|
||||
<BiHomeSmile className='text-[22px]' />
|
||||
仪表盘
|
||||
@@ -113,11 +117,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
|
||||
<li>
|
||||
<NavLink
|
||||
to="/create"
|
||||
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${pathname.includes('calendar') &&
|
||||
'bg-graydark dark:bg-meta-4'
|
||||
}`}
|
||||
className={`${sidebarItemSty} ${pathname.includes('create') && sidebarItemActiveSty}`}
|
||||
>
|
||||
<BiSpa className='text-[22px]' />
|
||||
<BiEditAlt className='text-[22px]' />
|
||||
创作
|
||||
</NavLink>
|
||||
</li>
|
||||
@@ -125,11 +127,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
|
||||
<li>
|
||||
<NavLink
|
||||
to="/cate"
|
||||
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${pathname.includes('cate') &&
|
||||
'bg-graydark dark:bg-meta-4'
|
||||
}`}
|
||||
className={`${sidebarItemSty} ${pathname.includes('cate') && sidebarItemActiveSty}`}
|
||||
>
|
||||
<BiSpa className='text-[22px]' />
|
||||
<BiCategoryAlt className='text-[22px]' />
|
||||
分类
|
||||
</NavLink>
|
||||
</li>
|
||||
@@ -144,10 +144,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
|
||||
<React.Fragment>
|
||||
<NavLink
|
||||
to="#"
|
||||
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${(pathname === '/forms' ||
|
||||
pathname.includes('forms')) &&
|
||||
'bg-graydark dark:bg-meta-4'
|
||||
}`}
|
||||
className={`${sidebarItemSty} ${(pathname === '/forms' || pathname.includes('forms')) && sidebarItemActiveSty}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
sidebarExpanded
|
||||
@@ -155,36 +152,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
|
||||
: setSidebarExpanded(true);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.43425 7.5093H2.278C2.44675 7.5093 2.55925 7.3968 2.58737 7.31243L2.98112 6.32805H5.90612L6.27175 7.31243C6.328 7.48118 6.46862 7.5093 6.58112 7.5093H7.453C7.76237 7.48118 7.87487 7.25618 7.76237 7.03118L5.428 1.4343C5.37175 1.26555 5.3155 1.23743 5.14675 1.23743H3.88112C3.76862 1.23743 3.59987 1.29368 3.57175 1.4343L1.153 7.08743C1.0405 7.2843 1.20925 7.5093 1.43425 7.5093ZM4.47175 2.98118L5.3155 5.17493H3.59987L4.47175 2.98118Z"
|
||||
fill=""
|
||||
/>
|
||||
<path
|
||||
d="M10.1249 2.5031H16.8749C17.2124 2.5031 17.5218 2.22185 17.5218 1.85623C17.5218 1.4906 17.2405 1.20935 16.8749 1.20935H10.1249C9.7874 1.20935 9.47803 1.4906 9.47803 1.85623C9.47803 2.22185 9.75928 2.5031 10.1249 2.5031Z"
|
||||
fill=""
|
||||
/>
|
||||
<path
|
||||
d="M16.8749 6.21558H10.1249C9.7874 6.21558 9.47803 6.49683 9.47803 6.86245C9.47803 7.22808 9.75928 7.50933 10.1249 7.50933H16.8749C17.2124 7.50933 17.5218 7.22808 17.5218 6.86245C17.5218 6.49683 17.2124 6.21558 16.8749 6.21558Z"
|
||||
fill=""
|
||||
/>
|
||||
<path
|
||||
d="M16.875 11.1656H1.77187C1.43438 11.1656 1.125 11.4469 1.125 11.8125C1.125 12.1781 1.40625 12.4594 1.77187 12.4594H16.875C17.2125 12.4594 17.5219 12.1781 17.5219 11.8125C17.5219 11.4469 17.2125 11.1656 16.875 11.1656Z"
|
||||
fill=""
|
||||
/>
|
||||
<path
|
||||
d="M16.875 16.1156H1.77187C1.43438 16.1156 1.125 16.3969 1.125 16.7625C1.125 17.1281 1.40625 17.4094 1.77187 17.4094H16.875C17.2125 17.4094 17.5219 17.1281 17.5219 16.7625C17.5219 16.3969 17.2125 16.1156 16.875 16.1156Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
Forms
|
||||
<BiSitemap className='text-[22px]' />
|
||||
管理
|
||||
<svg
|
||||
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${open && 'rotate-180'
|
||||
}`}
|
||||
@@ -242,46 +211,18 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
|
||||
|
||||
<div>
|
||||
<h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">
|
||||
OTHERS
|
||||
New
|
||||
</h3>
|
||||
|
||||
<ul className="mb-6 flex flex-col gap-1.5">
|
||||
<li>
|
||||
<NavLink
|
||||
to="/chart"
|
||||
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${pathname.includes('chart') && 'bg-graydark dark:bg-meta-4'
|
||||
className={`${sidebarItemSty} ${pathname.includes('chart') && 'bg-graydark dark:bg-meta-4'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_130_9801)">
|
||||
<path
|
||||
d="M10.8563 0.55835C10.5188 0.55835 10.2095 0.8396 10.2095 1.20522V6.83022C10.2095 7.16773 10.4907 7.4771 10.8563 7.4771H16.8751C17.0438 7.4771 17.2126 7.39272 17.3251 7.28022C17.4376 7.1396 17.4938 6.97085 17.4938 6.8021C17.2688 3.28647 14.3438 0.55835 10.8563 0.55835ZM11.4751 6.15522V1.8521C13.8095 2.13335 15.6938 3.8771 16.1438 6.18335H11.4751V6.15522Z"
|
||||
fill=""
|
||||
/>
|
||||
<path
|
||||
d="M15.3845 8.7427H9.1126V2.69582C9.1126 2.35832 8.83135 2.07707 8.49385 2.07707C8.40947 2.07707 8.3251 2.07707 8.24072 2.07707C3.96572 2.04895 0.506348 5.53645 0.506348 9.81145C0.506348 14.0864 3.99385 17.5739 8.26885 17.5739C12.5438 17.5739 16.0313 14.0864 16.0313 9.81145C16.0313 9.6427 16.0313 9.47395 16.0032 9.33332C16.0032 8.99582 15.722 8.7427 15.3845 8.7427ZM8.26885 16.3083C4.66885 16.3083 1.77197 13.4114 1.77197 9.81145C1.77197 6.3802 4.47197 3.53957 7.8751 3.3427V9.36145C7.8751 9.69895 8.15635 10.0083 8.52197 10.0083H14.7938C14.6813 13.4958 11.7845 16.3083 8.26885 16.3083Z"
|
||||
fill=""
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_130_9801">
|
||||
<rect
|
||||
width="18"
|
||||
height="18"
|
||||
fill="white"
|
||||
transform="translate(0 0.052124)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
Chart
|
||||
<BiFolderOpen className='text-[22px]' />
|
||||
文件系统
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
11
src/pages/Cate/index.scss
Normal file
11
src/pages/Cate/index.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.ant-tree {
|
||||
.ant-tree-treenode,.ant-tree-node-content-wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-tree-node-selected{
|
||||
.controls{
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Form, Input, Button, Tree, Modal, notification, Spin, Dropdown, Menu, Card } from 'antd';
|
||||
import { Form, Input, Button, Tree, Modal, notification, Spin, Dropdown, Card, MenuProps } from 'antd';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { addCateDataAPI, delCateDataAPI, editCateDataAPI, getCateDataAPI, getCateListAPI } from '@/api/Cate';
|
||||
import Breadcrumb from '@/components/Breadcrumbs';
|
||||
import { Cate } from '@/types/cate'
|
||||
import { Cate } from '@/types/cate';
|
||||
import "./index.scss"
|
||||
|
||||
const CateManager: React.FC = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -12,10 +13,6 @@ const CateManager: React.FC = () => {
|
||||
const [list, setList] = useState<Cate[]>([]);
|
||||
const formRef = useRef<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getCateList();
|
||||
}, []);
|
||||
|
||||
const getCateList = async () => {
|
||||
setLoading(true);
|
||||
const { data } = await getCateListAPI();
|
||||
@@ -30,9 +27,11 @@ const CateManager: React.FC = () => {
|
||||
|
||||
const editCateData = async (id: number) => {
|
||||
setLoading(true);
|
||||
|
||||
setModel(true);
|
||||
const { data } = await getCateDataAPI(id);
|
||||
setCate(data);
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
@@ -47,8 +46,11 @@ const CateManager: React.FC = () => {
|
||||
await addCateDataAPI({ ...cate, ...values });
|
||||
notification.success({ message: '🎉 新增分类成功' });
|
||||
}
|
||||
|
||||
// 初始化表单状态
|
||||
formRef.current.resetFields();
|
||||
setCate({ name: '', mark: '', url: '', icon: '', level: 0 });
|
||||
|
||||
setModel(false);
|
||||
getCateList();
|
||||
})
|
||||
@@ -70,29 +72,60 @@ const CateManager: React.FC = () => {
|
||||
formRef.current.resetFields();
|
||||
};
|
||||
|
||||
const renderTreeNodes = (data: Cate[]) =>
|
||||
data.map(item => (
|
||||
<Tree.TreeNode title={item.name} key={item.id} dataRef={item}>
|
||||
{item.children ? renderTreeNodes(item.children) : null}
|
||||
</Tree.TreeNode>
|
||||
));
|
||||
// 将数据转换为树形结构
|
||||
const treeData = (data: Cate[]): any[] => (
|
||||
data.map(item => {
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: <span onClick={() => addCateData(item.id!)}>新增</span>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: <span onClick={() => editCateData(item.id!)}>编辑</span>,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: <span onClick={() => delCateData(item.id!)}>删除</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const menu = (data: Cate) => (
|
||||
<Menu>
|
||||
<Menu.Item onClick={() => addCateData(data.id!)}>新增</Menu.Item>
|
||||
<Menu.Item onClick={() => editCateData(data.id!)}>编辑</Menu.Item>
|
||||
<Menu.Item onClick={() => delCateData(data.id!)}>删除</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return ({
|
||||
title: (
|
||||
<div className='group w-full flex justify-between items-center'>
|
||||
<h3>{item.name}</h3>
|
||||
|
||||
<div className='controls hidden'>
|
||||
<Dropdown menu={{ items }} arrow>
|
||||
<Button type='link' size='small'>操作 <DownOutlined /></Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
key: item.id,
|
||||
children: item.children ? treeData(item.children) : [],
|
||||
})
|
||||
})
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
getCateList();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (model && formRef.current) {
|
||||
formRef.current.setFieldsValue(cate);
|
||||
}
|
||||
}, [cate, model]);
|
||||
|
||||
return (
|
||||
<Card title={<Breadcrumb pageName="分类" />} className='border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:pt-2'>
|
||||
<div className='mt-2 mb-4 text-center'>
|
||||
<Button type="primary" onClick={() => setModel(true)}>新增分类</Button>
|
||||
<Button type="primary" onClick={() => setModel(true)}>新增一级分类</Button>
|
||||
</div>
|
||||
|
||||
<Spin spinning={loading}>
|
||||
<Tree defaultExpandAll>{renderTreeNodes(list)}</Tree>
|
||||
<Tree defaultExpandAll treeData={treeData(list)} />
|
||||
</Spin>
|
||||
|
||||
<Modal title="新增分类导航" open={model} onCancel={close} footer={null}>
|
||||
|
||||
Reference in New Issue
Block a user