leaudit-platform-frontend/app/routes/examples/TooltipExample.tsx

import { Tooltip } from '../../components/ui/Tooltip';

/**
 * Tooltip 组件示例
 * 展示不同主题、位置和风格的提示框
 */
export function TooltipExample() {
  return (
    <div className="tooltip-examples p-4">
      <h2 className="text-lg font-bold mb-4">Tooltip 组件示例</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* 基础提示框 */}
        <div className="example-section">
          <h3 className="text-base font-semibold mb-2">基础提示框</h3>
          <div className="flex space-x-4 mb-4">
            <Tooltip content="这是一个基础提示框">
              <button className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                鼠标悬停
              </button>
            </Tooltip>
            
            <Tooltip content="点击显示的提示框" trigger="click">
              <button className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                点击查看
              </button>
            </Tooltip>
          </div>
        </div>
        
        {/* 不同位置 */}
        <div className="example-section">
          <h3 className="text-base font-semibold mb-2">不同位置</h3>
          <div className="flex space-x-4 mb-4">
            <Tooltip content="顶部提示" placement="top">
              <button className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                顶部
              </button>
            </Tooltip>
            
            <Tooltip content="底部提示" placement="bottom">
              <button className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                底部
              </button>
            </Tooltip>
            
            <Tooltip content="左侧提示" placement="left">
              <button className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                左侧
              </button>
            </Tooltip>
            
            <Tooltip content="右侧提示" placement="right">
              <button className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                右侧
              </button>
            </Tooltip>
          </div>
        </div>
        
        {/* 不同主题 */}
        <div className="example-section">
          <h3 className="text-base font-semibold mb-2">不同主题</h3>
          <div className="flex flex-wrap gap-2">
            <Tooltip content="深色主题" theme="dark">
              <span className="px-3 py-1 border border-gray-300 rounded cursor-default">
                深色
              </span>
            </Tooltip>
            
            <Tooltip content="浅色主题" theme="light">
              <span className="px-3 py-1 border border-gray-300 rounded cursor-default">
                浅色
              </span>
            </Tooltip>
            
            <Tooltip content="主题色" theme="primary">
              <span className="px-3 py-1 border border-gray-300 rounded cursor-default">
                主题色
              </span>
            </Tooltip>
            
            <Tooltip content="成功提示" theme="success">
              <span className="px-3 py-1 border border-gray-300 rounded cursor-default">
                成功
              </span>
            </Tooltip>
            
            <Tooltip content="警告提示" theme="warning">
              <span className="px-3 py-1 border border-gray-300 rounded cursor-default">
                警告
              </span>
            </Tooltip>
            
            <Tooltip content="错误提示" theme="error">
              <span className="px-3 py-1 border border-gray-300 rounded cursor-default">
                错误
              </span>
            </Tooltip>
            
            <Tooltip content="信息提示" theme="info">
              <span className="px-3 py-1 border border-gray-300 rounded cursor-default">
                信息
              </span>
            </Tooltip>
          </div>
        </div>
        
        {/* 富文本提示框 */}
        <div className="example-section">
          <h3 className="text-base font-semibold mb-2">富文本提示框</h3>
          <div className="flex space-x-4">
            <Tooltip
              content={
                <div>
                  <div className="flex items-center mb-1">
                    <span className="w-24 text-gray-500">CPU使用率:</span>
                    <span className="text-green-500 font-medium">32%</span>
                  </div>
                  <div className="flex items-center mb-1">
                    <span className="w-24 text-gray-500">内存使用率:</span>
                    <span className="text-yellow-500 font-medium">76%</span>
                  </div>
                  <div className="flex items-center">
                    <span className="w-24 text-gray-500">磁盘空间:</span>
                    <span className="text-blue-500 font-medium">245GB/500GB</span>
                  </div>
                </div>
              }
              theme="light"
              rich={true}
              header="系统性能报告"
              footer="更新时间: 2023-10-15 15:30:42"
              showArrow={true}
            >
              <button className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                性能分析
              </button>
            </Tooltip>
            
            <Tooltip
              content={
                <div>
                  <div className="flex items-center justify-between mb-1">
                    <span>本月销售额:</span>
                    <span className="text-green-400 font-medium">¥258,432</span>
                  </div>
                  <div className="flex items-center justify-between mb-1">
                    <span>环比增长:</span>
                    <span className="text-green-400 font-medium">+15.8%</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>销售热点:</span>
                    <span className="text-yellow-400 font-medium">电子产品</span>
                  </div>
                </div>
              }
              theme="dark"
              rich={true}
              header="销售数据分析"
              footer="数据来源: 销售管理系统"
              placement="bottom"
            >
              <button className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600">
                销售趋势
              </button>
            </Tooltip>
          </div>
        </div>
        
        {/* 条件渲染示例 */}
        <div className="example-section">
          <h3 className="text-base font-semibold mb-2">状态提示示例</h3>
          <div className="flex space-x-4">
            <Tooltip
              content="优秀：得分在90分以上"
              theme="success"
            >
              <span className="text-green-500 font-bold px-2">95</span>
            </Tooltip>
            
            <Tooltip
              content="良好：得分在60-90分之间"
              theme="warning"
            >
              <span className="text-yellow-500 px-2">75</span>
            </Tooltip>
            
            <Tooltip
              content="不及格：得分低于60分"
              theme="error"
            >
              <span className="text-red-500 px-2">45</span>
            </Tooltip>
          </div>
        </div>
        
        {/* 自定义样式示例 */}
        <div className="example-section">
          <h3 className="text-base font-semibold mb-2">自定义样式</h3>
          <div className="flex space-x-4">
            <Tooltip
              content="带有自定义宽度的提示框"
              maxWidth={150}
            >
              <span className="border-b border-dotted border-gray-500 cursor-help">
                自定义宽度
              </span>
            </Tooltip>
            
            <Tooltip
              content="没有箭头的提示框"
              showArrow={false}
              theme="primary"
            >
              <span className="border-b border-dotted border-blue-500 cursor-help">
                无箭头
              </span>
            </Tooltip>
            
            <Tooltip
              content="自定义类名"
              className="custom-tooltip"
            >
              <span className="border-b border-dotted border-purple-500 cursor-help text-purple-500">
                自定义类名
              </span>
            </Tooltip>
          </div>
        </div>
      </div>
    </div>
  );
}

export default TooltipExample;