UI:完成整体暗色适配

This commit is contained in:
宇阳
2024-12-10 13:00:38 +08:00
parent 1b9bc1adeb
commit a0790bbf1c
7 changed files with 37 additions and 18 deletions

View File

@@ -152,7 +152,7 @@ const ListItem = ({ item, type, fetchData }: ListItemProps) => {
<img src={item.avatar || item.image} alt="" className="w-13 h-13 border border-[#eee] rounded-full" />
) : <RandomAvatar className="w-13 h-13 border border-[#eee] rounded-full" />}
<div className="flex flex-col justify-center ml-4 px-4 py-2 min-w-[210px] text-xs md:text-sm bg-[#F9F9FD] rounded-md">
<div className="flex flex-col justify-center ml-4 px-4 py-2 min-w-[210px] text-xs md:text-sm bg-[#F9F9FD] dark:bg-[#4e5969] rounded-md">
{type === "link" ? (
<>
<div>{item.title}</div>
@@ -191,7 +191,7 @@ const ListItem = ({ item, type, fetchData }: ListItemProps) => {
{ key: 'dismiss', label: "驳回", onClick: () => [setIsModalOpen(true), , setBtnType("dismiss")] }
]
}}>
<div className="flex justify-evenly items-center bg-[#F9F9FD] w-11 h-5 rounded-md cursor-pointer">
<div className="flex justify-evenly items-center bg-[#F9F9FD] dark:bg-[#4e5969] w-11 h-5 rounded-md cursor-pointer">
<span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
<span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
</div>
@@ -217,7 +217,7 @@ const ListItem = ({ item, type, fetchData }: ListItemProps) => {
}
const WorkPage = () => {
const activeSty = "bg-[#f9f9ff] text-primary";
const activeSty = "bg-[#f9f9ff] dark:bg-[#3c5370] text-primary";
const [active, setActive] = useState<Menu>("comment");
const [commentList, setCommentList] = useState<any[]>([]);
const [linkList, setLinkList] = useState<any[]>([]);
@@ -255,12 +255,12 @@ const WorkPage = () => {
<Title value="工作台" />
<Card className="mt-2 min-h-[calc(100vh-180px)]">
<div className="flex flex-col md:flex-row w-full">
<div className="w-full min-w-[200px] md:w-2/12 md:min-h-96 mb-5 md:mb-0 pr-4 border-b md:border-b-transparent md:border-r border-[#eee]">
<div className="w-full min-w-[200px] md:w-2/12 md:min-h-96 mb-5 md:mb-0 pr-4 md:border-b-transparent md:border-r border-[#eee] dark:border-strokedark">
<ul className="space-y-1">
{(["comment", "link", "wall"] as Menu[]).map((menu) => (
<li
key={menu}
className={`flex items-center w-full py-3 px-4 hover:bg-[#f9f9ff] hover:text-primary ${active === menu ? activeSty : ''} rounded-md text-base cursor-pointer transition-colors`}
className={`flex items-center w-full py-3 px-4 hover:bg-[#f9f9ff] dark:hover:bg-[#3c5370] hover:text-primary ${active === menu ? activeSty : ''} rounded-md text-base cursor-pointer transition-colors`}
onClick={() => setActive(menu)}
>
<img src={menu === "comment" ? comment : menu === "link" ? link : info} alt="" className="w-8 mr-4" />