From 5a5d9b509bd0fa95962792c002b5d568bb6d7fc8 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Sat, 28 Mar 2026 23:17:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=AD=9B=E9=80=89=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=94=B9=E4=B8=BA=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BA=EF=BC=8C=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E8=A2=AB=E9=81=AE=E6=8C=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.tsx | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 579eb37..d027bf4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -918,7 +918,7 @@ export default function App() {
                         initial={{ opacity: 0, y: 10, scale: 0.95 }}
                         animate={{ opacity: 1, y: 0, scale: 1 }}
                         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">
                           <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 }}
                       animate={{ opacity: 1, y: 0, scale: 1 }}
                       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">
                         <h3 className="text-sm font-bold text-gray-900">区域筛选</h3>
-                        <button 
-                          onClick={() => setRegionFilters({ region: '', city: '', customer: '' })}
-                          className="text-[10px] text-slate-600 hover:text-slate-700 font-medium"
-                        >
-                          重置所有
+                        <div className="flex items-center gap-2">
+                          <button
+                            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>
                       </div>
                       
@@ -2146,20 +2152,25 @@ export default function App() {
                     />
                     
                     {/* Popover Content */}
-                    <motion.div 
+                    <motion.div
                       initial={{ opacity: 0, y: 10, scale: 0.95 }}
                       animate={{ opacity: 1, y: 0, scale: 1 }}
                       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">
                         <h3 className="text-sm font-bold text-gray-900">数据筛选</h3>
-                        <button 
-                          onClick={() => setCustomerFilters({ customer: '', brand: '', department: '', manager: '', region: '' })}
-                          className="text-[10px] text-emerald-600 hover:text-emerald-700 font-medium"
-                        >
-                          重置所有
-                        </button>
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() => setCustomerFilters({ customer: '', brand: '', department: '', manager: '', region: '' })}
+                            className="text-[10px] text-emerald-600 hover:text-emerald-700 font-medium"
+                          >
+                            重置所有
+                          </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 className="space-y-4">