All files / src/components/Settings Credits.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from 'react';
 
export function Credits() {
  const [filter, setFilter] = useState<'all' | 'consume' | 'earn'>('all');
 
  const logs = [
    { id: 1, action: 'AutoClaw网页搜索', date: '2026年03月11日 12:02:02', amount: -6 },
    { id: 2, action: 'AutoClaw网页搜索', date: '2026年03月11日 12:01:58', amount: -6 },
    { id: 3, action: 'AutoClaw网页搜索', date: '2026年03月11日 12:01:46', amount: -6 },
    { id: 4, action: 'AutoClaw网页搜索', date: '2026年03月11日 12:01:43', amount: -6 },
  ];
 
  return (
    <div className="max-w-3xl">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-xl font-bold text-gray-900">积分</h1>
        <div className="flex gap-2">
          <button className="text-xs text-gray-500 hover:text-gray-700 px-3 py-1.5 border border-gray-200 rounded-lg transition-colors">
            刷新
          </button>
          <button className="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg transition-colors">
            去充值
          </button>
        </div>
      </div>
 
      <div className="text-center mb-8">
        <div className="text-xs text-gray-500 mb-1">总积分</div>
        <div className="text-3xl font-bold text-gray-900">2268</div>
      </div>
 
      <div className="p-1 mb-6 flex rounded-lg bg-gray-50 border border-gray-100 shadow-sm">
        <button
          onClick={() => setFilter('all')}
          className={`flex-1 py-2 rounded-md text-xs transition-colors ${filter === 'all' ? 'bg-white shadow-sm font-medium text-gray-900' : 'text-gray-500 hover:text-gray-700'}`}
        >
          全部
        </button>
        <button
          onClick={() => setFilter('consume')}
          className={`flex-1 py-2 rounded-md text-xs transition-colors ${filter === 'consume' ? 'bg-white shadow-sm font-medium text-gray-900' : 'text-gray-500 hover:text-gray-700'}`}
        >
          消耗
        </button>
        <button
          onClick={() => setFilter('earn')}
          className={`flex-1 py-2 rounded-md text-xs transition-colors ${filter === 'earn' ? 'bg-white shadow-sm font-medium text-gray-900' : 'text-gray-500 hover:text-gray-700'}`}
        >
          获得
        </button>
      </div>
 
      <div className="bg-white rounded-xl border border-gray-200 divide-y divide-gray-100 shadow-sm">
        {logs.map((log) => (
          <div key={log.id} className="flex justify-between items-center p-4">
            <div>
              <div className="text-sm text-gray-700">{log.action}</div>
              <div className="text-xs text-gray-500 mt-1">{log.date}</div>
            </div>
            <div className={`font-medium ${log.amount < 0 ? 'text-gray-500' : 'text-green-500'}`}>
              {log.amount > 0 ? '+' : ''}{log.amount}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}