R109/A1,A5 优化移动端底部导航和常用页面
这个提交包含在：
@@ -248,10 +248,10 @@ export function MobileLeavePage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<PageScaffold className="space-y-4">
|
||||
<PageScaffold className="space-y-3 pb-4">
|
||||
<PageHeader title="请假" />
|
||||
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-summary">
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-summary">
|
||||
<div className="grid grid-cols-3 gap-3 text-sm">
|
||||
<div>
|
||||
<div className="text-xs text-zinc-500">可用</div>
|
||||
@@ -268,7 +268,7 @@ export function MobileLeavePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-form">
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-form">
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<h3 className="text-base font-semibold text-zinc-900">{editingItem ? "编辑请假" : "新建请假"}</h3>
|
||||
{editingItem ? (
|
||||
@@ -278,7 +278,7 @@ export function MobileLeavePage() {
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<label className="block space-y-2 text-sm text-zinc-700">
|
||||
<span>假期类型</span>
|
||||
<select className="select-std" value={leaveTypeId} onChange={(event) => setLeaveTypeId(event.target.value)}>
|
||||
@@ -353,7 +353,7 @@ export function MobileLeavePage() {
|
||||
</label>
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
className="min-h-12 w-full"
|
||||
type="button"
|
||||
disabled={!canCreateLeave || isSaving || !leaveTypeId || !startDate || !endDate}
|
||||
onClick={() => {
|
||||
@@ -370,7 +370,7 @@ export function MobileLeavePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-balances">
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-balances">
|
||||
<h3 className="text-base font-semibold text-zinc-900">额度</h3>
|
||||
<div className="mt-3 space-y-2">
|
||||
{balancesQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
|
||||
@@ -400,7 +400,7 @@ export function MobileLeavePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-records">
|
||||
<section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-records">
|
||||
<h3 className="text-base font-semibold text-zinc-900">请假记录</h3>
|
||||
<Tabs value={statusFilter} onValueChange={(value) => setStatusFilter(value as LeaveStatusFilter)}>
|
||||
<TabsList className="mt-3 grid h-auto w-full grid-cols-4">
|
||||
|
||||
@@ -31,20 +31,20 @@ function MobileActionLink({
|
||||
}: {
|
||||
to: string;
|
||||
label: string;
|
||||
description: string;
|
||||
description?: string;
|
||||
icon: string;
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className="flex min-h-16 items-center gap-3 rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-left shadow-sm transition-colors hover:bg-zinc-50"
|
||||
className="flex min-h-12 items-center gap-3 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-left shadow-sm transition-colors hover:bg-zinc-50"
|
||||
>
|
||||
<span className="material-symbols-outlined flex size-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-[20px] text-zinc-700">
|
||||
<span className="material-symbols-outlined flex size-8 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-[18px] text-zinc-700">
|
||||
{icon}
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-sm font-semibold text-zinc-900">{label}</span>
|
||||
<span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span>
|
||||
{description ? <span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span> : null}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
@@ -78,12 +78,12 @@ export function MobileMePage() {
|
||||
const departmentName = profile?.department?.name ?? (me?.departmentId ? "已关联组织" : "待管理员维护");
|
||||
|
||||
return (
|
||||
<PageScaffold className="space-y-4">
|
||||
<PageScaffold className="space-y-3 pb-4">
|
||||
<PageHeader title="我的" />
|
||||
|
||||
<SectionPanel title="个人信息">
|
||||
<div className="flex items-center gap-4">
|
||||
<EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="lg" />
|
||||
<div className="flex items-center gap-3">
|
||||
<EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="text-lg font-semibold text-zinc-900">{me?.name ?? "-"}</div>
|
||||
<div className="text-sm text-zinc-500">{departmentName}</div>
|
||||
@@ -100,7 +100,7 @@ export function MobileMePage() {
|
||||
</SectionPanel>
|
||||
|
||||
<SectionPanel title="账号与绑定">
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-2">
|
||||
<MobileActionLink to="/settings/profile" label="个人设置" description="企业微信、账号与通知" icon="manage_accounts" />
|
||||
{me?.id ? (
|
||||
<MobileActionLink to={`/people/${me.id}`} label="员工档案" description="办公地点和紧急联系人" icon="badge" />
|
||||
@@ -109,22 +109,22 @@ export function MobileMePage() {
|
||||
</SectionPanel>
|
||||
|
||||
<SectionPanel title="更多入口">
|
||||
<div className="grid gap-3" data-testid="mobile-more-links">
|
||||
<MobileActionLink to="/notifications" label="通知中心" description="查看全部站内通知" icon="notifications" />
|
||||
<MobileActionLink to="/mobile/leave" label="请假" description="申请和记录" icon="event_available" />
|
||||
<MobileActionLink to="/mobile/reimbursements" label="报销" description="草稿和进度" icon="request_quote" />
|
||||
{canAccessApprovals ? <MobileActionLink to="/mobile/approvals" label="审批" description="待办处理" icon="fact_check" /> : null}
|
||||
{canAccessAssets ? <MobileActionLink to="/assets" label="资产" description="台账和盘点" icon="inventory_2" /> : null}
|
||||
{canAccessProjects ? <MobileActionLink to="/projects" label="项目" description="项目和里程碑" icon="workspaces" /> : null}
|
||||
<div className="grid grid-cols-2 gap-2" data-testid="mobile-more-links">
|
||||
<MobileActionLink to="/notifications" label="通知中心" icon="notifications" />
|
||||
<MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />
|
||||
<MobileActionLink to="/mobile/reimbursements" label="报销" icon="request_quote" />
|
||||
{canAccessApprovals ? <MobileActionLink to="/mobile/approvals" label="审批" icon="fact_check" /> : null}
|
||||
{canAccessAssets ? <MobileActionLink to="/assets" label="资产" icon="inventory_2" /> : null}
|
||||
{canAccessProjects ? <MobileActionLink to="/projects" label="项目" icon="workspaces" /> : null}
|
||||
</div>
|
||||
</SectionPanel>
|
||||
|
||||
{canAccessAdmin ? (
|
||||
<SectionPanel title="管理入口">
|
||||
<div className="grid gap-3">
|
||||
<MobileActionLink to="/people" label="人员管理" description="用户、角色和员工资料" icon="group" />
|
||||
<MobileActionLink to="/organization" label="组织架构" description="部门和汇报关系" icon="account_tree" />
|
||||
<MobileActionLink to="/system/settings" label="系统设置" description="工作区和系统参数" icon="settings" />
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<MobileActionLink to="/people" label="人员管理" icon="group" />
|
||||
<MobileActionLink to="/organization" label="组织架构" icon="account_tree" />
|
||||
<MobileActionLink to="/system/settings" label="系统设置" icon="settings" />
|
||||
</div>
|
||||
</SectionPanel>
|
||||
) : null}
|
||||
|
||||
在新工单中引用
屏蔽一个用户