72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
/** 我的 — 1:1 复刻 uni-app pages/profile/index.vue + 真实用户数据绑定 */
|
||
import { useNavigate } from "react-router-dom";
|
||
import { useAuth } from "../contexts/AuthContext";
|
||
import { LogOut } from "lucide-react";
|
||
|
||
export default function ProfilePage() {
|
||
const { user, logout } = useAuth();
|
||
const navigate = useNavigate();
|
||
|
||
// ---- 从 AuthContext 派生真实数据 ----
|
||
const displayName = user?.display_name || user?.username || "未知用户";
|
||
const avatarChar = displayName.charAt(0);
|
||
const roleLabel =
|
||
user?.role === "SUPER_ADMIN"
|
||
? "超级管理员"
|
||
: user?.role || "操作员";
|
||
|
||
function handleLogout() {
|
||
logout();
|
||
navigate("/admin/login", { replace: true });
|
||
}
|
||
|
||
return (
|
||
<div className="flex min-h-full flex-col px-4 pt-safe pb-20">
|
||
{/* 用户卡片 — 与 uni-app user-card 完全一致 */}
|
||
<div className="mt-4 flex items-center gap-3 rounded-xl bg-white p-4 shadow-[0_1px_3px_rgba(0,0,0,0.06)]">
|
||
{/* 头像 — 取真实用户名的第一个字 */}
|
||
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
|
||
{avatarChar}
|
||
</div>
|
||
<div className="flex-1">
|
||
<span className="block text-base font-bold text-gray-800">
|
||
{displayName}
|
||
</span>
|
||
<span className="text-xs text-gray-400">{roleLabel}</span>
|
||
</div>
|
||
<span className="text-xl text-gray-300">›</span>
|
||
</div>
|
||
|
||
{/* 菜单列表 — 与 uni-app menu-card 完全一致 */}
|
||
<div className="mt-4 overflow-hidden rounded-xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.06)]">
|
||
{["工作统计", "设置", "帮助与反馈", "关于"].map((item, i) => (
|
||
<div
|
||
key={item}
|
||
className={`flex items-center justify-between px-4 py-3.5 ${
|
||
i < 3 ? "border-b border-gray-50" : ""
|
||
}`}
|
||
>
|
||
<span className="text-sm text-gray-700">{item}</span>
|
||
<span className="text-xl text-gray-300">›</span>
|
||
</div>
|
||
))}
|
||
|
||
{/* 退出登录 — 红色高亮 */}
|
||
<button
|
||
onClick={handleLogout}
|
||
className="flex w-full items-center justify-between border-t border-gray-50 px-4 py-3.5 transition-colors hover:bg-red-50"
|
||
>
|
||
<span className="flex items-center gap-2 text-sm text-red-500">
|
||
<LogOut size={16} strokeWidth={2} />
|
||
退出登录
|
||
</span>
|
||
<span className="text-xl text-red-300">›</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* 版本号 — 与 uni-app .version 一致 */}
|
||
<p className="mt-8 text-center text-xs text-gray-300">生产流转 v1.0.0</p>
|
||
</div>
|
||
);
|
||
}
|