feat(client): 初始化前端壳与鉴权守卫（P1-5）
- 技术栈：React 18 + TypeScript + Vite + Tailwind - API 层：ApiError + 401 自动刷新 + single-flight 重试 - 鉴权：内存 Access Token + Cookie Refresh + 启动 bootstrap - RBAC：权限映射 + RequireAuth/RequirePermission 路由守卫 - 布局：OA 工作台壳层 + 侧边栏 + 5 个占位页面 - 样式：复用 hyb-web 视觉 token（单向同步） - 文档：新增 client README，补充 server 联调说明
这个提交包含在：
@@ -0,0 +1,77 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { EmptyStateCard } from "../components/common/EmptyStateCard";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
|
||||
export function DashboardPage() {
|
||||
const { me, permissions } = useAuth();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="仪表盘"
|
||||
subtitle="前端壳已完成初始化，后续业务模块将在此基础上扩展。"
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<section className="card-std">
|
||||
<h3 className="card-title">当前用户</h3>
|
||||
<dl className="space-y-2 text-sm text-slate-700">
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-secondary">姓名</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.name ?? "-"}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-secondary">员工号</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.employeeNo ?? "-"}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-secondary">邮箱</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.email ?? "-"}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-secondary">角色</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.roleCodes?.join(" / ") ?? "-"}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section className="card-std">
|
||||
<h3 className="card-title">权限摘要</h3>
|
||||
{permissions.length ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{permissions.map((permission) => (
|
||||
<span
|
||||
className="rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary"
|
||||
key={permission}
|
||||
>
|
||||
{permission}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="card-desc">暂无权限信息。</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 lg:grid-cols-3">
|
||||
<EmptyStateCard
|
||||
title="我的报销"
|
||||
description="下一阶段接入报销列表与详情。"
|
||||
footer={<Link className="text-sm font-medium text-primary" to="/reimbursements">进入页面</Link>}
|
||||
/>
|
||||
<EmptyStateCard
|
||||
title="待我处理"
|
||||
description="下一阶段接入 workflow 待办列表与动作。"
|
||||
footer={<Link className="text-sm font-medium text-primary" to="/workflow/tasks">进入页面</Link>}
|
||||
/>
|
||||
<EmptyStateCard
|
||||
title="票据中心"
|
||||
description="下一阶段接入上传、签名 URL 与绑定流程。"
|
||||
footer={<Link className="text-sm font-medium text-primary" to="/invoice-pool">进入页面</Link>}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function ForbiddenPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background-light p-6">
|
||||
<div className="card-std max-w-lg text-center">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-primary">403</p>
|
||||
<h1 className="mt-2 text-2xl font-bold text-slate-900">无权限访问</h1>
|
||||
<p className="mt-2 text-sm text-secondary">
|
||||
当前账号没有访问该页面的权限，请联系管理员或返回可访问页面。
|
||||
</p>
|
||||
<div className="mt-5 flex justify-center gap-3">
|
||||
<Link className="btn-secondary" to="/dashboard">
|
||||
返回仪表盘
|
||||
</Link>
|
||||
<Link className="btn-primary" to="/settings/profile">
|
||||
查看账号信息
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { EmptyStateCard } from "../components/common/EmptyStateCard";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
|
||||
export function InvoicePoolPage() {
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="票据中心"
|
||||
subtitle="此页面已接入权限守卫，后续将接入上传、绑定、签名 URL 等功能。"
|
||||
/>
|
||||
<EmptyStateCard
|
||||
title="功能建设中"
|
||||
description="后续迭代将实现发票池列表、上传、绑定、归档与签名预览。"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { isApiError } from "../api/types";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
|
||||
function resolveRedirect(searchParams: URLSearchParams) {
|
||||
const redirect = searchParams.get("redirect");
|
||||
if (!redirect) {
|
||||
return "/dashboard";
|
||||
}
|
||||
|
||||
if (!redirect.startsWith("/")) {
|
||||
return "/dashboard";
|
||||
}
|
||||
|
||||
return redirect;
|
||||
}
|
||||
|
||||
export function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { login } = useAuth();
|
||||
|
||||
const [identifier, setIdentifier] = useState("[email protected]");
|
||||
const [password, setPassword] = useState("EmployeePassword1234");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const redirectTo = resolveRedirect(searchParams);
|
||||
|
||||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
await login(identifier.trim(), password);
|
||||
navigate(redirectTo, { replace: true });
|
||||
} catch (err) {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${err.message}`);
|
||||
} else {
|
||||
setError("登录失败，请稍后重试");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card-std border-primary-100">
|
||||
<div className="mb-6">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-primary">hyb-oa</p>
|
||||
<h1 className="mt-2 text-2xl font-bold text-slate-900">登录工作台</h1>
|
||||
<p className="mt-2 text-sm text-secondary">使用邮箱/手机号与密码登录。</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||||
<label className="block text-sm font-medium text-slate-700" htmlFor="identifier">
|
||||
账号
|
||||
<input
|
||||
autoComplete="username"
|
||||
className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-100"
|
||||
id="identifier"
|
||||
onChange={(event) => setIdentifier(event.target.value)}
|
||||
placeholder="邮箱或手机号"
|
||||
value={identifier}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block text-sm font-medium text-slate-700" htmlFor="password">
|
||||
密码
|
||||
<input
|
||||
autoComplete="current-password"
|
||||
className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-100"
|
||||
id="password"
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<button className="btn-primary w-full" disabled={submitting} type="submit">
|
||||
{submitting ? "登录中..." : "登录"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function NotFoundPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background-light p-6">
|
||||
<div className="card-std max-w-lg text-center">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-primary">404</p>
|
||||
<h1 className="mt-2 text-2xl font-bold text-slate-900">页面不存在</h1>
|
||||
<p className="mt-2 text-sm text-secondary">请检查地址，或返回工作台首页继续操作。</p>
|
||||
<div className="mt-5 flex justify-center">
|
||||
<Link className="btn-primary" to="/dashboard">
|
||||
回到仪表盘
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
|
||||
export function ProfilePage() {
|
||||
const { me, permissions } = useAuth();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader title="个人设置" subtitle="展示当前登录人的基础信息与权限摘要。" />
|
||||
|
||||
<section className="card-std">
|
||||
<h3 className="card-title">个人信息</h3>
|
||||
<dl className="grid gap-3 text-sm text-slate-700 md:grid-cols-2">
|
||||
<div>
|
||||
<dt className="text-secondary">姓名</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.name ?? "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-secondary">员工号</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.employeeNo ?? "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-secondary">邮箱</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.email ?? "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-secondary">手机号</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.phone ?? "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-secondary">部门ID</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.departmentId ?? "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-secondary">直属上级ID</dt>
|
||||
<dd className="font-medium text-slate-900">{me?.directManagerId ?? "-"}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section className="card-std mt-4">
|
||||
<h3 className="card-title">权限列表</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{permissions.map((permission) => (
|
||||
<span
|
||||
className="rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary"
|
||||
key={permission}
|
||||
>
|
||||
{permission}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { EmptyStateCard } from "../components/common/EmptyStateCard";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
|
||||
export function ReimbursementsPage() {
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="我的报销"
|
||||
subtitle="此页面已完成路由、鉴权与菜单接入，后续将接入真实列表数据。"
|
||||
/>
|
||||
<EmptyStateCard
|
||||
title="功能建设中"
|
||||
description="后续迭代将实现报销列表、筛选、详情与提交能力。"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { EmptyStateCard } from "../components/common/EmptyStateCard";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
|
||||
export function WorkflowTasksPage() {
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="待我处理"
|
||||
subtitle="此页面需要 expense.approve 权限，当前用于壳层联调与权限验证。"
|
||||
/>
|
||||
<EmptyStateCard
|
||||
title="功能建设中"
|
||||
description="后续迭代将接入待办任务列表与 approve/reject/return/transfer 动作。"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户