WuYongJie/gongxiangp2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

应用变更等待态加GSAP动效：清单逐项扫描与按钮呼吸

Browse Source
This commit is contained in:
chenpei 2026-08-28 15:07:03 +08:00
parent d9377b550e
commit 97bcfcf5c9
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/share/[id]/page.tsx
View File

@ -337,7 +337,9 @@ export default function SharePage() {
newFileName?: string
}>>([])
const [taskDetailApplying, setTaskDetailApplying] = useState(false)
const taskDetailPendingBarRef = useRef<HTMLDivElement | null>(null)
// 应用变更的长等待动效：清单项逐项扫描推进 + 按钮呼吸，形成"正在逐项处理"的节奏感。
useGSAP(() => {
if (loading || !material || typeof window.matchMedia !== 'function') return
if (!pageRef.current?.querySelector('[data-detail-preview], [data-detail-meta]')) return
@ -1171,7 +1173,7 @@ export default function SharePage() {
{mappedMaterialType === '任务-详情' ? (
<div data-detail-preview className="mx-auto">
{Boolean(material.canManageTaskDetailAssets) && taskDetailPendingOps.length > 0 && (
<div className="mb-4 rounded-xl border border-[#e7e8ea] bg-white p-4">
<div ref={taskDetailPendingBarRef} data-pending-bar className="mb-4 rounded-xl border border-[#e7e8ea] bg-white p-4">
<div className="flex items-center justify-between gap-3">
<p className="text-[13px] font-semibold text-[#1a1c1d]">
待应用变更 {taskDetailPendingOps.length} 项
@ -1188,6 +1190,7 @@ export default function SharePage() {
<button
type="button"
disabled={taskDetailApplying}
data-apply-btn
onClick={() => void applyTaskDetailPendingOps()}
className="rounded-lg bg-[#1a1c1d] px-4 py-1.5 text-[12px] font-medium text-white transition-all hover:opacity-80 active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-50"
>
@ -1197,7 +1200,7 @@ export default function SharePage() {
</div>
<ul className="mt-3 space-y-1.5">
{taskDetailPendingOps.map((op) => (
<li key={op.key} className="flex items-center justify-between gap-3 rounded-lg bg-[#fafafa] px-3 py-1.5">
<li key={op.key} data-pending-op className="flex items-center justify-between gap-3 rounded-lg bg-[#fafafa] px-3 py-1.5">
<span className="min-w-0 flex-1 truncate text-[12px] text-[#1a1c1d]">
<span className={
op.kind === 'delete'