6c6c282203
视觉统一（Zen Minimal × Future Organic 白皮书语言，全站浅色单主题）： - 登录页：品牌→由壹点·品牌中心，白纸底+发丝线+柔光光晕，黑按钮 - 作品过稿：深灰头→白皮书，返回链接→返回创意资产库 - 绩效考核：桌面+移动双头部换白皮书，标题改绩效考核，返回改链接 - 组织架构：BoardShell+页面 76 处调色板全量替换（#eef1f4→#fafafa 等） - admin 后台：MaterialsHeader（面包屑治理与设置），Tab 栏墨色高亮 - 深色主题废弃：globals.css 移除媒体查询，tailwind darkMode:'class' 不挂 .dark - 设计文档同步更新：AGENTS.md UI 基线/DESIGN.md/PRODUCT.md/README.md/design-qa.md 个人档案（原个人中心）： - API 合并权威人员档案（getEmployeeByUserId → 花名/工号/部门/职位/M-P等级/主管/状态） - 页面白皮书化：权威档案卡（只读 HR 字段）+ 账号区（头像上传）+ 素材/收藏 顶栏平台化： - MaterialsHeader 双模式：首页（五板块导航+全套工具+菜单）/板块（面包屑） - 菜单重排：我的档案/绩效考核/作品过稿看板‖更新记录/提交反馈‖治理与设置‖退出 - 菜单头身份行：花名+职位·部门（权威档案） - 首页排序：01 创意资产库（全员）→ 02 组织管理（管理员）→ 03-05 规划中 - 素材库改名创意资产库，全站同步（索引/导航/卡片/按钮/页脚） - 排行榜换白皮书（白底发丝线+琥珀前三名） 构建修复： - tsconfig 排除 output/（本地审计临时文件不再卡类型检查） - 存储边界门禁豁免 output/（与 .dockerignore 对齐）
91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
'use client'
|
||
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
|
||
export function WorkReviewHeader({
|
||
name,
|
||
avatar,
|
||
secondaryAction,
|
||
primaryAction,
|
||
wide = false,
|
||
}: {
|
||
name: string
|
||
avatar?: string | null
|
||
secondaryAction?: {
|
||
label: string
|
||
onClick: () => void
|
||
icon: 'add' | 'back'
|
||
}
|
||
primaryAction?: {
|
||
label: string
|
||
onClick: () => void
|
||
icon: 'add' | 'back'
|
||
}
|
||
wide?: boolean
|
||
}) {
|
||
const initials = name.trim().slice(0, 2) || '我'
|
||
|
||
return (
|
||
<header className="sticky top-0 z-30 border-b border-[#e7e8ea] bg-[#fafafa]">
|
||
<div className={`mx-auto flex min-h-[64px] w-full flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3 sm:flex-nowrap sm:px-6 ${wide ? 'max-w-[1600px]' : 'max-w-[1280px]'}`}>
|
||
<div className="flex min-w-0 items-center gap-3">
|
||
<div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-[#e7e8ea] bg-[#e9ebef] text-[12px] font-bold text-[#1a1c1d]">
|
||
{avatar ? (
|
||
<Image
|
||
src={avatar}
|
||
alt={name}
|
||
width={36}
|
||
height={36}
|
||
unoptimized
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
) : initials}
|
||
</div>
|
||
<div className="min-w-0">
|
||
<div className="truncate text-[16px] font-bold text-[#1a1c1d]">作品过稿看板</div>
|
||
<div className="truncate text-[11px] font-medium text-[#6b7075]">{name}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={`flex shrink-0 items-center gap-2 ${secondaryAction ? 'w-full sm:w-auto' : ''}`}>
|
||
{secondaryAction && (
|
||
<button
|
||
type="button"
|
||
onClick={secondaryAction.onClick}
|
||
className="inline-flex min-h-10 flex-1 items-center justify-center rounded-lg bg-[#1a1c1d] px-3 text-[12px] font-bold text-white transition-all hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#fafafa] sm:min-h-9 sm:flex-none sm:px-4 sm:text-[13px]"
|
||
>
|
||
<span className="mr-1 text-[17px] font-light leading-none" aria-hidden="true">
|
||
{secondaryAction.icon === 'add' ? '＋' : '←'}
|
||
</span>
|
||
{secondaryAction.label}
|
||
</button>
|
||
)}
|
||
{primaryAction && (
|
||
<button
|
||
type="button"
|
||
onClick={primaryAction.onClick}
|
||
className={`inline-flex items-center justify-center rounded-lg px-3 text-[12px] font-bold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#fafafa] sm:min-h-9 sm:px-4 sm:text-[13px] ${
|
||
secondaryAction
|
||
? 'min-h-10 flex-1 border border-[#1a1c1d] bg-white text-[#1a1c1d] hover:bg-[#1a1c1d] hover:text-white sm:flex-none'
|
||
: 'min-h-9 bg-[#1a1c1d] text-white hover:opacity-80'
|
||
}`}
|
||
>
|
||
<span className="mr-1 text-[17px] font-light leading-none" aria-hidden="true">
|
||
{primaryAction.icon === 'add' ? '＋' : '←'}
|
||
</span>
|
||
{primaryAction.label}
|
||
</button>
|
||
)}
|
||
<Link
|
||
href="/materials"
|
||
className="inline-flex min-h-10 items-center justify-center rounded-lg px-2 text-[12px] font-semibold text-[#6b7075] transition-colors hover:bg-[#e9ebef] hover:text-[#1a1c1d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/60 sm:min-h-9 sm:px-3 sm:text-[13px]"
|
||
>
|
||
返回创意资产库
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
)
|
||
}
|