fix: 筛选面板删除X关闭按钮,底部加确认按钮点击后关闭
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- 库存/区域/客户三个筛选面板移除X图标 - 底部增加"确认"按钮,点击后关闭面板 - 移除背景遮罩点击关闭,只能通过确认按钮关闭 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
29
src/App.tsx
29
src/App.tsx
@@ -1007,7 +1007,7 @@ export default function App() {
|
|||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{isInventoryFilterOpen && (
|
{isInventoryFilterOpen && (
|
||||||
<>
|
<>
|
||||||
<div className="fixed inset-0 z-40" onClick={() => setIsInventoryFilterOpen(false)} />
|
<div className="fixed inset-0 z-40" />
|
||||||
<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 }}
|
||||||
@@ -1016,17 +1016,12 @@ export default function App() {
|
|||||||
>
|
>
|
||||||
<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>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setInventoryFilters({ region: '', city: '', brand: '', batch: '', model: '' })}
|
onClick={() => setInventoryFilters({ region: '', city: '', brand: '', batch: '', model: '' })}
|
||||||
className="text-[10px] text-blue-500 hover:underline"
|
className="text-[10px] text-blue-500 hover:underline"
|
||||||
>
|
>
|
||||||
重置所有
|
重置所有
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => setIsInventoryFilterOpen(false)} className="text-slate-400 hover:text-slate-600">
|
|
||||||
<PlusCircle className="rotate-45" size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3 text-left">
|
<div className="space-y-3 text-left">
|
||||||
@@ -1056,6 +1051,7 @@ export default function App() {
|
|||||||
<SearchSelect value={inventoryFilters.model} onChange={(v) => setInventoryFilters({...inventoryFilters, model: v})} options={uniqueInventoryModels} placeholder="全部车型" />
|
<SearchSelect value={inventoryFilters.model} onChange={(v) => setInventoryFilters({...inventoryFilters, model: v})} options={uniqueInventoryModels} placeholder="全部车型" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button onClick={() => setIsInventoryFilterOpen(false)} className="w-full mt-4 py-2 bg-blue-600 text-white rounded-lg text-xs font-bold hover:bg-blue-700 transition-colors">确认</button>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -1914,7 +1910,7 @@ export default function App() {
|
|||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{isRegionFilterOpen && (
|
{isRegionFilterOpen && (
|
||||||
<>
|
<>
|
||||||
<div className="fixed inset-0 z-40" onClick={() => setIsRegionFilterOpen(false)} />
|
<div className="fixed inset-0 z-40" />
|
||||||
<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 }}
|
||||||
@@ -1923,17 +1919,12 @@ export default function App() {
|
|||||||
>
|
>
|
||||||
<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>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setRegionFilters({ region: '', city: '', customer: '' })}
|
onClick={() => setRegionFilters({ region: '', city: '', customer: '' })}
|
||||||
className="text-[10px] text-slate-600 hover:text-slate-700 font-medium"
|
className="text-[10px] text-slate-600 hover:text-slate-700 font-medium"
|
||||||
>
|
>
|
||||||
重置所有
|
重置所有
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => setIsRegionFilterOpen(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">
|
||||||
@@ -1959,7 +1950,7 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button onClick={() => setIsRegionFilterOpen(false)} className="w-full mt-4 py-2 bg-slate-800 text-white rounded-lg text-xs font-bold hover:bg-slate-900 transition-colors">确认</button>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -2213,11 +2204,8 @@ export default function App() {
|
|||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{isCustomerFilterOpen && (
|
{isCustomerFilterOpen && (
|
||||||
<>
|
<>
|
||||||
{/* Backdrop for closing */}
|
{/* Backdrop */}
|
||||||
<div
|
<div className="fixed inset-0 z-40" />
|
||||||
className="fixed inset-0 z-40"
|
|
||||||
onClick={() => setIsCustomerFilterOpen(false)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Popover Content */}
|
{/* Popover Content */}
|
||||||
<motion.div
|
<motion.div
|
||||||
@@ -2235,9 +2223,6 @@ export default function App() {
|
|||||||
>
|
>
|
||||||
重置所有
|
重置所有
|
||||||
</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>
|
||||||
|
|
||||||
@@ -2276,7 +2261,7 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button onClick={() => setIsCustomerFilterOpen(false)} className="w-full mt-4 py-2 bg-emerald-600 text-white rounded-lg text-xs font-bold hover:bg-emerald-700 transition-colors">确认</button>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user