wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(button): localStorage

Browse Source
This commit is contained in:
hamster1963 2024-12-01 12:37:42 +08:00
parent c7ec85f7f2
commit 555024bc46
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/Server.tsx
View File

@ -22,14 +22,20 @@ export default function Servers() {
}); });
const { lastMessage, readyState } = useWebSocketContext(); const { lastMessage, readyState } = useWebSocketContext();
const [showServices, setShowServices] = useState(false); const [showServices, setShowServices] = useState<string>("0");
const [currentGroup, setCurrentGroup] = useState<string>("All");
const [inline, setInline] = useState<string>("0"); const [inline, setInline] = useState<string>("0");
const [currentGroup, setCurrentGroup] = useState<string>("All");
useEffect(() => {
const showServicesState = localStorage.getItem("showServices");
if (showServicesState !== null) {
setShowServices(showServicesState);
}
}, []);
useEffect(() => { useEffect(() => {
const inlineState = localStorage.getItem("inline"); const inlineState = localStorage.getItem("inline");
if (inlineState !== null) { if (inlineState !== null) {
console.log("inlineState", inlineState);
setInline(inlineState); setInline(inlineState);
} }
}, []); }, []);
@ -115,9 +121,19 @@ export default function Servers() {
<section className="flex mt-6 items-center gap-2 w-full overflow-hidden"> <section className="flex mt-6 items-center gap-2 w-full overflow-hidden">
<button <button
onClick={() => { onClick={() => {
setShowServices(!showServices); setShowServices(showServices === "0" ? "1" : "0");
localStorage.setItem(
"showServices",
showServices === "0" ? "1" : "0",
);
}} }}
className="rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 hover:bg-blue-500 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] hover:shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] " className={cn(
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500":
showServices === "1",
},
)}
> >
<ChartBarSquareIcon className="size-[13px]" /> <ChartBarSquareIcon className="size-[13px]" />
</button> </button>
@ -142,7 +158,7 @@ export default function Servers() {
setCurrentTab={setCurrentGroup} setCurrentTab={setCurrentGroup}
/> />
</section> </section>
{showServices && <ServiceTracker />} {showServices === "1" && <ServiceTracker />}
{inline === "1" && ( {inline === "1" && (
<section className="flex flex-col gap-2 overflow-x-scroll mt-6"> <section className="flex flex-col gap-2 overflow-x-scroll mt-6">
{filteredServers.map((serverInfo) => ( {filteredServers.map((serverInfo) => (