React+Redux面板布局与最大化/最小化功能实现问题

问题概述 #

1. 面板排列顺序错误：依次添加Panel 1、Panel 2、Panel 3后，期望从右下角向左按Panel 3、Panel 2、Panel 1的顺序排列，实际显示顺序相反
2. 最大化、最小化按钮无交互功能

一、修复面板排列顺序 #

方案1：反转数组渲染顺序 #

在App.tsx中渲染面板时，反转Redux中存储的面板数组：

// App.tsx
export default function App() {
  const panels = useSelector((state) => state.panel.panelItems);
  return (
    <>
      <Header />
      <Content />
      <Footer />
      <div className="cards-container">
        {/* 反转数组后渲染 */}
        {[...panels].reverse().map((name) => (
          <Panel key={name} {...{ name }} />
        ))}
      </div>
    </>
  );
}

方案2：通过CSS Flex布局实现反向排列 #

修改.cards-container的CSS样式，利用flex布局的反向排列特性：

.cards-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: row-reverse; /* 新增反向排列 */
  gap: 10px;
}

二、实现最大化与最小化功能 #

需要为每个面板添加状态管理，控制显示状态并绑定交互事件：

1. 更新Panel组件代码 #

// Panel.jsx
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faSquareMinus,
  faWindowMaximize,
  faWindowRestore,
  faRectangleXmark
} from "@fortawesome/free-solid-svg-icons";
import { useDispatch } from "react-redux";
import { deletePanel } from "../actions/counterActions";

export default function Panel({ name }) {
  const dispatch = useDispatch();
  const [isMinimized, setIsMinimized] = useState(false);
  const [isMaximized, setIsMaximized] = useState(false);

  const handleMinimize = () => setIsMinimized(!isMinimized);
  const handleMaximize = () => setIsMaximized(!isMaximized);

  return (
    <div className={`card ${isMaximized ? "maximized" : ""}`}>
      <div className="card-actions">
        <FontAwesomeIcon 
          icon={faSquareMinus} 
          onClick={handleMinimize}
          style={{ cursor: "pointer" }}
        />
        <FontAwesomeIcon 
          icon={isMaximized ? faWindowRestore : faWindowMaximize} 
          onClick={handleMaximize}
          style={{ cursor: "pointer" }}
        />
        <FontAwesomeIcon
          icon={faRectangleXmark}
          onClick={() => dispatch(deletePanel(name))}
          style={{ cursor: "pointer" }}
        />
      </div>
      {!isMinimized && <div className="card-body">{name}</div>}
    </div>
  );
}

2. 添加对应CSS样式 #

.card {
  position: relative;
  width: 250px;
  height: 180px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 最大化状态样式 */
.card.maximized {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  width: auto;
  height: auto;
  z-index: 999;
}

.card-actions {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  justify-content: flex-end;
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
}

.card-actions svg:hover {
  color: #666;
}

修改后效果：

• 点击最小化按钮会隐藏面板内容，仅保留操作栏
• 点击最大化按钮会让面板铺满屏幕（保留边距），再次点击恢复原大小
• 所有操作按钮添加了鼠标指针提示，提升交互体验

内容的提问来源于stack exchange，提问作者user16860065