Skip to content

Commit de6ddc5

Browse files
HACO8888HACO8888
authored
v2.18.3 (#261)
2 parents 793baac + fb6ac4a commit de6ddc5

12 files changed

Lines changed: 84 additions & 338 deletions

File tree

‎app/(Layout)/desktop/HeaderBar/HeaderBar.module.scss‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎app/(Layout)/desktop/HeaderBar/UserLogin/UserLogin.module.scss‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎app/(Layout)/desktop/HeaderBar/UserLogin/index.tsx‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import Image from "next/image";
22
import Swal from "sweetalert2";
3-
import styles from "./UserLogin.module.scss";
43
import { useUserAccount } from "@/utils/useUserAccount";
54

65
export default function UserLogin() {
76
const { isLogin, userData, isLoading, login, logout } = useUserAccount();
87

98
if (isLoading) {
109
return (
11-
<div className={styles.loginUserPanelWrapper}>
12-
<div className={styles.loginUserPanel}>
13-
<p>Loading ...</p>
10+
<div className="w-[15.75rem] h-14 rounded-full p-0.5 cursor-pointer bg-gradient-to-r from-[#6FA8FF] to-[#003F47]">
11+
<div className="h-full w-full rounded-full bg-white flex justify-center items-center">
12+
<p className="text-[1.2rem] text-[#004C64] font-medium">Loading ...</p>
1413
</div>
1514
</div>
1615
);
1716
} else if (!isLogin) {
1817
return (
19-
<div className={styles.loginUserPanelWrapper} onClick={() => login()}>
20-
<div className={styles.loginUserPanel}>
21-
<p>Login</p>
18+
<div
19+
className="w-[15.75rem] h-14 rounded-full p-0.5 cursor-pointer bg-gradient-to-r from-[#6FA8FF] to-[#003F47]"
20+
onClick={() => login()}
21+
>
22+
<div className="h-full w-full rounded-full bg-white flex justify-center items-center">
23+
<p className="text-[1.2rem] text-[#004C64] font-medium">Login</p>
2224
</div>
2325
</div>
2426
);
@@ -27,29 +29,36 @@ export default function UserLogin() {
2729
<div className="flex items-center justify-center">
2830
{userData && userData.permission === 2 && (
2931
<div
30-
className={styles.adminUserPanelWrapper + " mr-2"}
32+
className="w-[7.7rem] h-14 rounded-full p-[0.15rem] cursor-pointer bg-gradient-to-r from-[#6FA8FF] to-[#003F47] mr-2"
3133
onClick={() => window.open("/admin", "_self")}
3234
>
33-
<div className={styles.adminUserPanel}>
34-
<p>管理平台</p>
35+
<div className="h-full w-full rounded-full bg-white flex justify-center items-center">
36+
<p className="text-[1.25rem] text-[#004C64] font-medium">管理平台</p>
3537
</div>
3638
</div>
3739
)}
38-
<div className={styles.userPanel} onClick={() => confirmLogout(logout)}>
40+
<div
41+
className="w-[15.75rem] h-14 rounded-full bg-white/80 p-1 cursor-pointer flex flex-row items-center"
42+
onClick={() => confirmLogout(logout)}
43+
>
3944
<Image
4045
src={
4146
(userData && userData.avatar) ||
4247
process.env.NEXT_PUBLIC_API_URL +
43-
"/image/653299930b891d1f6b5b4458"
48+
"/image/653299930b891d1f6b5b4458"
4449
}
4550
width={50}
4651
height={50}
4752
alt="Avatar"
48-
className={styles.avatar}
53+
className="rounded-full aspect-square h-full w-auto"
4954
/>
50-
<div className={styles.user}>
51-
<p className={styles.name}>{userData && userData.name}</p>
52-
<p className={styles.email}>{userData && userData.email}</p>
55+
<div className="ml-[0.4rem] h-full flex flex-col justify-evenly items-start">
56+
<p className="text-[1.2rem] leading-[1.2rem] font-medium">
57+
{userData && userData.name}
58+
</p>
59+
<p className="text-[#006180] text-[0.8rem] leading-[0.8rem]">
60+
{userData && userData.email}
61+
</p>
5362
</div>
5463
</div>
5564
</div>
@@ -70,4 +79,4 @@ function confirmLogout(logout: () => void) {
7079
logout();
7180
}
7281
});
73-
}
82+
}

‎app/(Layout)/desktop/HeaderBar/index.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22

33
import Link from "next/link";
4-
import style from "./HeaderBar.module.scss";
54
import UserLogin from "./UserLogin";
65
import Image from "next/image";
76

@@ -11,21 +10,19 @@ const HeaderBar = () => {
1110
const router = useRouter();
1211

1312
return (
14-
<>
15-
<div className={style.nav}>
16-
<Link href={"/"}>
17-
<Image
18-
src="/images/logo.svg"
19-
alt="Logo"
20-
width={214}
21-
height={46}
22-
priority
23-
/>
24-
</Link>
25-
<UserLogin />
26-
</div>
27-
</>
13+
<nav className="h-[3.7rem] w-[85vw] mx-auto flex flex-row justify-between items-center cursor-default select-none">
14+
<Link href={"/"} className="my-auto cursor-pointer">
15+
<Image
16+
src="/images/logo.svg"
17+
alt="Logo"
18+
width={214}
19+
height={46}
20+
priority
21+
/>
22+
</Link>
23+
<UserLogin />
24+
</nav>
2825
);
2926
};
3027

31-
export default HeaderBar;
28+
export default HeaderBar;

‎app/(Layout)/desktop/ToolBar/ToolBar.module.scss‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎app/(Layout)/desktop/ToolBar/index.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Link from "next/link";
66
import { usePathname } from "next/navigation";
77

88
import { useUserAccount } from "@/utils/useUserAccount";
9-
import styles from "./ToolBar.module.scss";
109

1110
const ToolBar = () => {
1211
const { isLogin, userData, isLoading } = useUserAccount();
@@ -47,43 +46,53 @@ const ToolBar = () => {
4746
},
4847
];
4948

49+
// 計算選中項目的 left 位置 (rem)
50+
const getSelectedPosition = () => {
51+
if (selected === -1) return "0rem";
52+
// 23.5rem / 4 = 5.875rem per item
53+
return `${selected * 5.875}rem`;
54+
};
55+
5056
return (
51-
<div className={styles.toolBarWrapper}>
52-
<div className={styles.iconWrapper}>
57+
<div className="h-20 w-[25rem] mx-auto bg-white/50 border border-white/60 rounded-full select-none flex items-center justify-center">
58+
<div className="relative h-14 w-[23.5rem] flex">
5359
{menu.map((item, index) => {
5460
return (
55-
<div key={index} className={styles.icon}>
61+
<div
62+
key={index}
63+
className="flex-1 rounded-full relative flex justify-center items-center z-10"
64+
>
5665
<div
5766
style={{
5867
cursor: item.clickable ? "pointer" : "not-allowed",
5968
}}
60-
className={styles.iconCursor}
69+
className="absolute inset-0 rounded-full"
6170
/>
6271
<Link
6372
href={item.route}
6473
style={{
6574
opacity: item.clickable ? 1 : 0.5,
6675
pointerEvents: item.clickable ? "auto" : "none",
6776
}}
68-
className={styles.icon}
77+
className="rounded-full cursor-pointer relative flex justify-center items-center transition-opacity duration-500"
6978
onClick={() => setSelected(index)}
7079
>
7180
<Image
7281
src={item.icon}
7382
height={32}
7483
width={32}
7584
alt={item.name}
76-
></Image>
85+
/>
7786
</Link>
7887
</div>
7988
);
8089
})}
8190
<div
8291
style={{
8392
display: selected === -1 ? "none" : "block",
84-
left: `${(selected / 4) * 100}%`,
93+
left: getSelectedPosition(),
8594
}}
86-
className={styles.selected}
95+
className="absolute h-full w-[5.875rem] bg-slate-400/30 rounded-full transition-all duration-300 ease-in-out"
8796
/>
8897
</div>
8998
</div>
@@ -109,4 +118,4 @@ function pathToSelected(path: string) {
109118
}
110119

111120
return -1;
112-
}
121+
}

0 commit comments

Comments
 (0)