mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: use hash router to sub-setting pages
This commit is contained in:
@@ -3,7 +3,7 @@ import { BirdIcon } from "lucide-react";
|
||||
const Empty = () => {
|
||||
return (
|
||||
<div className="mx-auto">
|
||||
<BirdIcon strokeWidth={1} className="w-24 h-auto text-gray-500 dark:text-gray-400" />
|
||||
<BirdIcon strokeWidth={0.5} absoluteStrokeWidth={true} className="w-24 h-auto text-gray-500 dark:text-gray-400" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@@ -1,6 +1,7 @@
|
||||
import { Option, Select } from "@mui/joy";
|
||||
import { CogIcon, DatabaseIcon, KeyIcon, LibraryIcon, LucideIcon, Settings2Icon, UserIcon, UsersIcon } from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import MemberSection from "@/components/Settings/MemberSection";
|
||||
import MemoRelatedSettings from "@/components/Settings/MemoRelatedSettings";
|
||||
@@ -37,6 +38,7 @@ const SECTION_ICON_MAP: Record<SettingSection, LucideIcon> = {
|
||||
|
||||
const Setting = () => {
|
||||
const t = useTranslate();
|
||||
const location = useLocation();
|
||||
const commonContext = useCommonContext();
|
||||
const user = useCurrentUser();
|
||||
const workspaceSettingStore = useWorkspaceSettingStore();
|
||||
@@ -53,6 +55,17 @@ const Setting = () => {
|
||||
return settingList;
|
||||
}, [isHost]);
|
||||
|
||||
useEffect(() => {
|
||||
let hash = location.hash.slice(1) as SettingSection;
|
||||
// If the hash is not a valid section, redirect to the default section.
|
||||
if (![...BASIC_SECTIONS, ...ADMIN_SECTIONS].includes(hash)) {
|
||||
hash = "my-account";
|
||||
}
|
||||
setState({
|
||||
selectedSection: hash,
|
||||
});
|
||||
}, [location.hash]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isHost) {
|
||||
return;
|
||||
@@ -67,9 +80,7 @@ const Setting = () => {
|
||||
}, [isHost]);
|
||||
|
||||
const handleSectionSelectorItemClick = useCallback((settingSection: SettingSection) => {
|
||||
setState({
|
||||
selectedSection: settingSection,
|
||||
});
|
||||
window.location.hash = settingSection;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
@@ -100,10 +100,10 @@ const UserProfile = () => {
|
||||
<div className="w-full flex flex-col justify-start items-start pt-4 pb-8 px-3">
|
||||
<UserAvatar className="!w-16 !h-16 drop-shadow rounded-3xl" avatarUrl={user?.avatarUrl} />
|
||||
<div className="mt-2 w-auto max-w-[calc(100%-6rem)] flex flex-col justify-center items-start">
|
||||
<p className="w-full text-3xl text-black leading-tight opacity-80 dark:text-gray-200 truncate">
|
||||
<p className="w-full text-3xl text-black leading-tight font-medium opacity-80 dark:text-gray-200 truncate">
|
||||
{user.nickname || user.username}
|
||||
</p>
|
||||
<p className="w-full text-gray-500 leading-snug opacity-80 dark:text-gray-400 whitespace-pre-wrap truncate line-clamp-6">
|
||||
<p className="w-full text-gray-500 leading-snug dark:text-gray-400 whitespace-pre-wrap truncate line-clamp-6">
|
||||
{user.description}
|
||||
</p>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user