wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 5 软件包 项目 发布 百科 活动

MME6 优化移动我的页自适应视觉

浏览代码
这个提交包含在：
wangsli
2026-05-11 23:13:33 +08:00
父节点 b80af78613
当前提交 6359612cd0
共修改 8 个文件，包含 174 行新增和 11 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/layouts/AppShellLayout.tsx
+1 -1
查看文件
@@ -60,7 +60,7 @@ export function AppShellLayout() {
{isMobileRoute ? null : <Sidebar />}
<main
className={`flex min-w-0 flex-1 flex-col ${isMobileRoute ? "overflow-hidden" : "lg:ml-72"}`}
className={`flex min-w-0 flex-1 flex-col ${isMobileRoute ? "hyb-mobile-shell overflow-hidden" : "lg:ml-72"}`}
style={isMobileRoute ? { height: "var(--mobile-viewport-height, 100vh)", maxHeight: "var(--mobile-viewport-height, 100vh)", minHeight: "var(--mobile-viewport-height, 100vh)" } : undefined}
>
{isMobileRoute ? null : <Topbar />}
client/src/pages/MobileMePage.tsx
+14 -9
查看文件
@@ -38,10 +38,11 @@ function MobileActionLink({
return (
<Link
to={to}
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"
className="mobile-me-action-link"
data-testid="mobile-me-action-link"
>
<MobileIcon name={icon} className="size-8 rounded-lg bg-zinc-100 p-1.5 text-zinc-700" />
<span className="min-w-0">
<MobileIcon name={icon} className="mobile-me-action-icon" />
<span className="mobile-me-action-copy">
<span className="block text-sm font-semibold text-zinc-900">{label}</span>
{description ? <span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span> : null}
</span>
@@ -81,10 +82,14 @@ export function MobileMePage() {
<PageHeader title="我的" />
<SectionPanel title="个人信息">
<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="mobile-me-profile-row" data-testid="mobile-me-profile-row">
<div className="mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
<EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
</div>
<div className="mobile-me-profile-copy" data-testid="mobile-me-profile-copy">
<div className="text-lg font-semibold leading-7 text-zinc-900" data-testid="mobile-me-profile-name">
{me?.name ?? "-"}
</div>
<div className="text-sm text-zinc-500">{departmentName}</div>
{me?.employeeNo ? <div className="text-xs text-zinc-400">员工号：{me.employeeNo}</div> : null}
</div>
@@ -108,7 +113,7 @@ export function MobileMePage() {
</SectionPanel>
<SectionPanel title="更多入口">
<div className="mobile-adaptive-grid" data-testid="mobile-more-links">
<div className="mobile-me-entry-grid" data-testid="mobile-more-links">
<MobileActionLink to="/mobile/notifications" label="通知中心" icon="notifications" />
<MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />
<MobileActionLink to="/mobile/reimbursements" label="报销" icon="request_quote" />
@@ -120,7 +125,7 @@ export function MobileMePage() {
{canAccessAdmin ? (
<SectionPanel title="管理入口">
<div className="mobile-adaptive-grid">
<div className="mobile-me-entry-grid">
<MobileActionLink to="/mobile/me" label="人员管理" icon="group" />
<MobileActionLink to="/mobile/me" label="组织架构" icon="account_tree" />
<MobileActionLink to="/mobile/me" label="系统设置" icon="settings" />
client/src/styles/mobile-touch.css
+89
查看文件
@@ -16,6 +16,8 @@
--mobile-bottom-nav-height: 68px;
--mobile-sticky-action-height: 78px;
--mobile-icon-action-min-height: 72px;
--mobile-me-slot-gap: clamp(12px, 3.7vw, 16px);
--mobile-me-action-icon-slot: 36px;
}
.page-scaffold.mobile-fixed-action-page {
@@ -37,6 +39,10 @@
padding: var(--mobile-card-padding);
}
.hyb-mobile-shell .section-panel::before {
display: none;
}
.mobile-icon-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -113,6 +119,87 @@
min-width: 0;
}
.mobile-me-entry-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--mobile-card-gap);
min-width: 0;
}
.mobile-me-profile-row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
column-gap: var(--mobile-me-slot-gap);
align-items: center;
min-width: 0;
}
.mobile-me-avatar-slot {
width: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-me-profile-copy {
min-width: 0;
}
.mobile-me-profile-copy > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-me-action-link {
display: grid;
grid-template-columns: var(--mobile-me-action-icon-slot) minmax(0, 1fr);
column-gap: var(--mobile-me-slot-gap);
align-items: center;
min-width: 0;
min-height: 48px;
border: 1px solid rgb(228 228 231);
border-radius: 10px;
background: rgb(255 255 255);
padding: 8px 12px;
text-align: left;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
transition: background-color 150ms ease, border-color 150ms ease;
}
.mobile-me-action-link:hover {
background: rgb(250 250 250);
}
.mobile-me-action-icon {
width: var(--mobile-me-action-icon-slot);
height: var(--mobile-me-action-icon-slot);
border-radius: 10px;
background: rgb(244 244 245);
color: rgb(63 63 70);
padding: 7px;
}
.mobile-me-action-icon svg {
display: block;
width: 100%;
height: 100%;
}
.mobile-me-action-copy {
display: block;
min-width: 0;
}
.mobile-me-action-copy > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
@@ -151,6 +238,8 @@
--mobile-card-gap: 6px;
--mobile-card-padding: 10px;
--mobile-icon-action-min-height: 68px;
--mobile-me-slot-gap: 12px;
--mobile-me-action-icon-slot: 34px;
}
.mobile-icon-action__icon {