动态展示/隐藏页面卡片

好的软件设计应该追求优雅简洁。简单优雅的代码更容易理解和维护。页面中使用卡片的情况非常常见，一些卡片既可以展开显示，也可以收起隐藏。传统的做法是为每个卡片定义一个状态，然后根据状态来决定是否显示或隐藏。例如，我们可以使用如下结构来卡片状态：

interface CardState {
  id: string;
  visible: boolean;
}

这种方法虽然简单，但存在以下问题：

1. 需要维护大量状态。当卡片数量较多时，状态管理变得很复杂。
2. 逻辑变得非常复杂。当多个卡片相互影响时，逻辑变得难以理解和维护。
3. 容易出现错误。当逻辑过于复杂时，很容易出现错误。

为了解决这些问题，我们可以使用更优雅的方法来控制页面卡片的显示与隐藏。我们可以将卡片的状态抽象出来，使用一个统一的组件来管理所有卡片的状态。这个组件可以称为“卡片管理组件”。

class CardManager {
  private cards: Map<string, CardState>;

  constructor() {
    this.cards = new Map();
  }

  addCard(id: string) {
    this.cards.set(id, { id, visible: false });
  }

  toggleCard(id: string) {
    const card = this.cards.get(id);
    if (card) {
      card.visible = !card.visible;
    }
  }

  closeAllCards() {
    this.cards.forEach((card) => {
      card.visible = false;
    });
  }

  getVisibleCards() {
    return Array.from(this.cards.values()).filter((card) => card.visible);
  }
}

这样，我们就可以统一管理所有卡片的状态，并通过一个统一的组件来控制卡片的显示与隐藏。

使用这个组件，我们可以轻松实现以下功能：

1. 批量关闭/开启和一键关闭所有卡片。
2. 追加显示卡片（携带参数）。
3. 关闭指定卡片。

例如，要批量关闭/开启和一键关闭所有卡片，我们可以使用以下代码：

const cardManager = new CardManager();
cardManager.closeAllCards(); // 关闭所有卡片
cardManager.toggleAllCards(); // 切换所有卡片的状态

要追加显示卡片，我们可以使用以下代码：

const cardManager = new CardManager();
cardManager.addCard('new-card-id'); // 添加一个新的卡片
cardManager.toggleCard('new-card-id'); // 显示新添加的卡片

要关闭指定卡片，我们可以使用以下代码：

const cardManager = new CardManager();
cardManager.toggleCard('specific-card-id'); // 关闭指定卡片

使用这种方法，我们可以轻松控制页面卡片的显示与隐藏，而无需维护大量状态和复杂的逻辑。

在实际开发中，我们可以根据实际情况选择更合适的方案来控制页面卡片的显示与隐藏。但无论采用哪种方案，都应该追求优雅简洁。