smart-customer-service/frontend/src/components/Layout/Header.tsx

import React from 'react';
import { useTheme } from '../../hooks/useTheme';
import { Bell, Search, User, Settings } from 'lucide-react';

export const Header: React.FC = () => {
  const { theme } = useTheme();

  return (
    <header style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
      backgroundColor: theme.colors.background.header,
      borderBottom: `1px solid ${theme.colors.border.light}`,
      boxShadow: theme.shadows.sm,
    }}>
      {/* 左侧：搜索框 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        flex: 1,
        maxWidth: '400px',
      }}>
        <div style={{
          position: 'relative',
          width: '100%',
        }}>
          <Search size={20} style={{
            position: 'absolute',
            left: theme.spacing.sm,
            top: '50%',
            transform: 'translateY(-50%)',
            color: theme.colors.text.secondary,
          }} />
          <input
            type="text"
            placeholder="搜索对话、工单或用户..."
            style={{
              width: '100%',
              padding: `${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.xl}`,
              borderRadius: theme.borderRadius.md,
              border: `1px solid ${theme.colors.border.default}`,
              backgroundColor: theme.colors.background.light,
              fontSize: theme.typography.fontSize.sm,
              color: theme.colors.text.primary,
              outline: 'none',
              transition: `border-color ${theme.transitions.duration.fast} ${theme.transitions.timing.ease}`,
            }}
            onFocus={(e) => {
              e.target.style.borderColor = theme.colors.primary[500];
            }}
            onBlur={(e) => {
              e.target.style.borderColor = theme.colors.border.default;
            }}
          />
        </div>
      </div>

      {/* 右侧：用户操作 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: theme.spacing.md,
      }}>
        {/* 通知 */}
        <button
          style={{
            position: 'relative',
            padding: theme.spacing.sm,
            borderRadius: theme.borderRadius.full,
            border: 'none',
            backgroundColor: 'transparent',
            cursor: 'pointer',
            color: theme.colors.text.secondary,
            transition: `all ${theme.transitions.duration.fast} ${theme.transitions.timing.ease}`,
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.backgroundColor = theme.colors.neutral[100];
            e.currentTarget.style.color = theme.colors.text.primary;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.backgroundColor = 'transparent';
            e.currentTarget.style.color = theme.colors.text.secondary;
          }}
        >
          <Bell size={20} />
          <span style={{
            position: 'absolute',
            top: '4px',
            right: '4px',
            width: '8px',
            height: '8px',
            borderRadius: '50%',
            backgroundColor: theme.colors.semantic.error,
            border: `2px solid ${theme.colors.background.header}`,
          }} />
        </button>

        {/* 设置 */}
        <button
          style={{
            padding: theme.spacing.sm,
            borderRadius: theme.borderRadius.full,
            border: 'none',
            backgroundColor: 'transparent',
            cursor: 'pointer',
            color: theme.colors.text.secondary,
            transition: `all ${theme.transitions.duration.fast} ${theme.transitions.timing.ease}`,
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.backgroundColor = theme.colors.neutral[100];
            e.currentTarget.style.color = theme.colors.text.primary;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.backgroundColor = 'transparent';
            e.currentTarget.style.color = theme.colors.text.secondary;
          }}
        >
          <Settings size={20} />
        </button>

        {/* 用户头像 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: theme.spacing.sm,
          padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
          borderRadius: theme.borderRadius.md,
          cursor: 'pointer',
          transition: `background-color ${theme.transitions.duration.fast} ${theme.transitions.timing.ease}`,
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = theme.colors.neutral[100];
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = 'transparent';
        }}
        >
          <div style={{
            width: '32px',
            height: '32px',
            borderRadius: '50%',
            backgroundColor: theme.colors.primary[500],
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: theme.colors.text.inverse,
            fontWeight: theme.typography.fontWeight.medium,
          }}>
            <User size={16} />
          </div>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
          }}>
            <span style={{
              fontSize: theme.typography.fontSize.sm,
              fontWeight: theme.typography.fontWeight.medium,
              color: theme.colors.text.primary,
            }}>
              管理员
            </span>
            <span style={{
              fontSize: theme.typography.fontSize.xs,
              color: theme.colors.text.secondary,
            }}>
              admin@example.com
            </span>
          </div>
        </div>
      </div>
    </header>
  );
};