基于 Ant Design 的前端首页 Header 组件设计

首页搭建

本文将演示使用 React 和 Ant Design 构建首页 Header 区域的流程。

首先设置整体页面样式，确保首页至少撑满整个视口，内容过多时自动撑开：

.home-page {
  min-height: 100vh;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
}

一、Header 部分

引入 Ant Design 的 Layout 组件并配置基础结构：

import "./index.scss";
import { Layout } from "antd";
const { Header } = Layout;

const Home = () => {
  return (
    <div className="home-page">
      <Layout>
        <Header className="home-header"></Header>
      </Layout>
    </div>
  );
};
export default Home;

为 Header 添加样式，设置高度、内边距、渐变背景及阴影效果：

.home-header {
  height: 72px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(90deg, #ff2d2d, #ff6a00);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

1. Header-Left

左侧放置 Logo 区域：

<div className="header-left">
  <div className="logo-badge">
    <span className="logo-text">智慧商城</span>
  </div>
</div>

2. Header-Mid

中间位置放置搜索框。Ant Design 的 Search 组件位于 Input 子类中，需解构后使用。通过 enterButton 属性可自定义确认按钮样式：

<div className="header-mid">
  <Search
    allowClear
    placeholder={`搜一搜`}
    enterButton={
      <Button className="search-button" color="danger" variant="solid" icon={<SearchOutlined />}>
        搜索
      </Button>
    }
    onSearch={onSearch}
    size="large"
  />
</div>

注意在组件内部套用样式时，应使用组件自带的类名进行修饰。

3. Header-Right

右侧放置购物车按钮和个人中心入口。用户头像使用 Avatar 组件，购物车使用 Badge 包裹 Button 实现徽标提示。

完整 index.js 代码如下：

import "./index.scss";
import { Layout, Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { Space, Badge, Avatar } from "antd";
import { ShoppingCartOutlined, UserOutlined } from "@ant-design/icons";
import classNames from "classnames";

const { Header } = Layout;
const { Search } = Input;

const onSearch = (value) => {
  console.log("搜索内容:", value);
};

const Home = () => {
  return (
    <div className="home-page">
      <Layout>
        <Header className="home-header">
          <div className="header-left">
            <div className="logo-badge">
              <span className="logo-text">智慧商城</span>
            </div>
          </div>
          <div className="header-mid">
            <Search
              allowClear
              placeholder={`搜一搜`}
              onSearch={onSearch}
              size="large"
              className="search-input"
              enterButton={
                <Button color="danger" variant="solid" icon={<SearchOutlined />}>搜索</Button>
              }
            />
          </div>
          <div className="header-right">
            <Space size={14}>
              <Badge count={3} size="small">
                <Button className="icon-btn" icon={<ShoppingCartOutlined />} />
              </Badge>
              <div className="user-mini">
                <Avatar size={34} icon={<UserOutlined />} />
                <div className="user-mini-text">
                  <div className="user-name">刘同学</div>
                  <div className="user-sub">欢迎回来</div>
                </div>
              </div>
            </Space>
          </div>
        </Header>
      </Layout>
    </div>
  );
};
export default Home;

对应的 SCSS 样式如下：

.home-page {
  min-height: 100vh;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
}

.home-header {
  height: 72px;
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #ff2d2d, #ff6a00);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);

  .header-left {
    width: 180px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo-badge {
      height: 44px;
      padding: 0 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      .logo-text {
        color: #fff;
        font-weight: 800;
        letter-spacing: 2px;
      }
    }
  }

  .header-mid {
    flex: 1;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    .search-input {
      width: 700px;
    }
    .ant-input-search-btn {
      border: 1px solid #fff !important;
    }
  }

  .header-right {
    width: 260px;
    display: flex;
    justify-content: flex-end;
    .icon-btn {
      border-radius: 12px;
    }
    .user-mini {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 10px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(8px);
      .user-mini-text {
        line-height: 1.1;
        .user-name {
          color: #fff;
          font-weight: 700;
          font-size: 13px;
        }
        .user-sub {
          color: rgba(255, 255, 255, 0.85);
          font-size: 12px;
        }
      }
    }
  }
}