shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 筛选面板移动端改为固定居中显示，避免被遮挡
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse Source 
库存/区域/客户三个筛选面板在移动端从absolute改为fixed居中，
桌面端保持原有absolute popover样式。移动端增加关闭按钮。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-03-28 23:17:37 +08:00
parent d56011ab8b
commit 5a5d9b509b
1 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.tsx
View File

@@ -918,7 +918,7 @@ export default function App() {
initial={{ opacity: 0, y: 10, scale: 0.95 }} initial={{ opacity: 0, y: 10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }} exit={{ opacity: 0, y: 10, scale: 0.95 }}
className="absolute right-0 top-full mt-2 w-72 bg-white rounded-xl shadow-2xl border border-slate-100 z-50 p-4" className="fixed inset-x-4 top-1/4 sm:absolute sm:inset-auto sm:right-0 sm:top-full sm:mt-2 sm:w-72 bg-white rounded-xl shadow-2xl border border-slate-100 z-50 p-4"
> >
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<h3 className="text-xs font-bold text-slate-800">库存统计 - 数据筛选</h3> <h3 className="text-xs font-bold text-slate-800">库存统计 - 数据筛选</h3>
@@ -1829,15 +1829,21 @@ export default function App() {
initial={{ opacity: 0, y: 10, scale: 0.95 }} initial={{ opacity: 0, y: 10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }} exit={{ opacity: 0, y: 10, scale: 0.95 }}
className="absolute top-full right-4 mt-2 w-72 bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800" className="fixed inset-x-4 top-1/4 sm:absolute sm:inset-auto sm:top-full sm:right-4 sm:mt-2 sm:w-72 bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800"
> >
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-bold text-gray-900">区域筛选</h3> <h3 className="text-sm font-bold text-gray-900">区域筛选</h3>
<button <div className="flex items-center gap-2">
onClick={() => setRegionFilters({ region: '', city: '', customer: '' })} <button
className="text-[10px] text-slate-600 hover:text-slate-700 font-medium" onClick={() => setRegionFilters({ region: '', city: '', customer: '' })}
> className="text-[10px] text-slate-600 hover:text-slate-700 font-medium"
重置所有 >
重置所有
</button>
<button onClick={() => setIsRegionFilterOpen(false)} className="text-slate-400 hover:text-slate-600 sm:hidden">
<PlusCircle className="rotate-45" size={16} />
</button>
</div>
</button> </button>
</div> </div>
@@ -2146,20 +2152,25 @@ export default function App() {
/> />
{/* Popover Content */} {/* Popover Content */}
<motion.div <motion.div
initial={{ opacity: 0, y: 10, scale: 0.95 }} initial={{ opacity: 0, y: 10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }} exit={{ opacity: 0, y: 10, scale: 0.95 }}
className="absolute top-full right-4 mt-2 w-72 bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800" className="fixed inset-x-4 top-1/4 sm:absolute sm:inset-auto sm:top-full sm:right-4 sm:mt-2 sm:w-72 bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800"
> >
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-bold text-gray-900">数据筛选</h3> <h3 className="text-sm font-bold text-gray-900">数据筛选</h3>
<button <div className="flex items-center gap-2">
onClick={() => setCustomerFilters({ customer: '', brand: '', department: '', manager: '', region: '' })} <button
className="text-[10px] text-emerald-600 hover:text-emerald-700 font-medium" onClick={() => setCustomerFilters({ customer: '', brand: '', department: '', manager: '', region: '' })}
> className="text-[10px] text-emerald-600 hover:text-emerald-700 font-medium"
重置所有 >
</button> 重置所有
</button>
<button onClick={() => setIsCustomerFilterOpen(false)} className="text-slate-400 hover:text-slate-600 sm:hidden">
<PlusCircle className="rotate-45" size={16} />
</button>
</div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">