hectorzhao/lislgosms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add manual recharge and operation logs

Browse Source
This commit is contained in:
hectorzhao
2026-07-01 15:54:56 +08:00
parent 50d75f1cf3
commit 7ff6d7eac3
14 changed files with 339 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/admin/AdminRechargeRecordsPage.tsx
+75 -13
View File
@@ -1,6 +1,6 @@
import { useMemo, useState } from 'react';
import { ChevronLeft, ChevronRight, Search } from 'lucide-react';
import { Breadcrumb, Button, DateRangeInput, Input, Select, type DateRangeValue } from '@/components/ui';
import { ChevronLeft, ChevronRight, Plus, Search } from 'lucide-react';
import { Breadcrumb, Button, DateRangeInput, Input, Modal, Select, Textarea, Tag, type DateRangeValue } from '@/components/ui';
type RechargeRecord = {
id: string;
@@ -9,17 +9,23 @@ type RechargeRecord = {
amount?: number;
balance?: number;
operator?: string;
type: 'manual' | 'package';
remark?: string;
};
const rechargeRecords: RechargeRecord[] = [
{ id: 'RCG202601120001', enterprise: 'XXXX科技有限公司', rechargedAt: '2026-01-12 19:27:19', amount: 1000, balance: 1000, operator: '李XXX' },
{ id: 'RCG202601120002', enterprise: 'XXX公司名字', rechargedAt: '2026-01-12 19:27:19', amount: 500, balance: 5896.25, operator: '张三' },
{ id: 'RCG202601120003', enterprise: 'XXX公司名字XXX公司名字', rechargedAt: '2026-01-12 19:27:19', amount: 192.29, balance: 0, operator: '张三' },
{ id: 'RCG202601120004', enterprise: '', rechargedAt: '2026-01-12 19:27:19', amount: 2617.09, balance: 0, operator: '李四' },
{ id: 'RCG202601120005', enterprise: '', rechargedAt: '2026-01-12 19:27:19', amount: 122, balance: 0, operator: '' },
{ id: 'RCG202601120006', enterprise: '', rechargedAt: '2026-01-12 19:27:19' },
{ id: 'RCG202601120007', enterprise: '', rechargedAt: '2026-01-12 19:27:19' },
{ id: 'RCG202601120008', enterprise: '', rechargedAt: '2026-01-12 19:27:19' },
type ManualRechargeForm = {
enterprise: string;
amount: string;
operator: string;
remark: string;
};
const rechargeRecordsSeed: RechargeRecord[] = [
{ id: 'RCG202601120001', enterprise: 'XXXX科技有限公司', rechargedAt: '2026-01-12 19:27:19', amount: 1000, balance: 1000, operator: '李XXX', type: 'manual', remark: '线下转账到账' },
{ id: 'RCG202601120002', enterprise: 'XXX公司名字', rechargedAt: '2026-01-12 19:27:19', amount: 500, balance: 5896.25, operator: '张三', type: 'package' },
{ id: 'RCG202601120003', enterprise: 'XXX公司名字XXX公司名字', rechargedAt: '2026-01-12 19:27:19', amount: 192.29, balance: 0, operator: '张三', type: 'manual', remark: '运营补差额' },
{ id: 'RCG202601120004', enterprise: '北京鸣川科技', rechargedAt: '2026-01-12 19:27:19', amount: 2617.09, balance: 0, operator: '李四', type: 'package' },
{ id: 'RCG202601120005', enterprise: '广州麦芒科技', rechargedAt: '2026-01-12 19:27:19', amount: 122, balance: 0, operator: '王五', type: 'manual', remark: '客服人工充值' },
];
function getDate(value: string) {
@@ -38,18 +44,21 @@ function formatAmount(value?: number) {
}
export function AdminRechargeRecordsPage() {
const [records, setRecords] = useState(rechargeRecordsSeed);
const [enterpriseKeyword, setEnterpriseKeyword] = useState('');
const [dateRange, setDateRange] = useState<DateRangeValue>({});
const [manualOpen, setManualOpen] = useState(false);
const [form, setForm] = useState<ManualRechargeForm>({ enterprise: '', amount: '', operator: '运营', remark: '' });
const filteredRows = useMemo(
() => rechargeRecords.filter((item) => {
() => records.filter((item) => {
const rechargeDate = getDate(item.rechargedAt);
const matchesEnterprise = !enterpriseKeyword || item.enterprise.includes(enterpriseKeyword);
const matchesStartDate = !dateRange.start || rechargeDate >= dateRange.start;
const matchesEndDate = !dateRange.end || rechargeDate <= dateRange.end;
return matchesEnterprise && matchesStartDate && matchesEndDate;
}),
[dateRange.end, dateRange.start, enterpriseKeyword],
[dateRange.end, dateRange.start, enterpriseKeyword, records],
);
function resetFilters() {
@@ -57,6 +66,32 @@ export function AdminRechargeRecordsPage() {
setDateRange({});
}
function updateForm<K extends keyof ManualRechargeForm>(key: K, value: ManualRechargeForm[K]) {
setForm((current) => ({ ...current, [key]: value }));
}
function submitManualRecharge() {
const amount = Number(form.amount);
if (!form.enterprise.trim() || !Number.isFinite(amount) || amount <= 0) {
return;
}
setRecords((current) => [
{
id: `RCG${Date.now()}`,
enterprise: form.enterprise,
rechargedAt: '2026-07-01 13:58:00',
amount,
balance: amount + 1200,
operator: form.operator,
type: 'manual',
remark: form.remark,
},
...current,
]);
setManualOpen(false);
setForm({ enterprise: '', amount: '', operator: '运营', remark: '' });
}
return (
<section className="page-stack admin-recharge-page">
<div className="page-heading">
@@ -64,6 +99,7 @@ export function AdminRechargeRecordsPage() {
<Breadcrumb items={['数据详单', '充值记录']} />
<h1>充值记录</h1>
</div>
<Button icon={<Plus size={16} />} onClick={() => setManualOpen(true)}>人工充值</Button>
</div>
<div className="surface admin-recharge-filter">
@@ -84,7 +120,9 @@ export function AdminRechargeRecordsPage() {
<th>充值时间</th>
<th>充值金额</th>
<th>充值后余额</th>
<th>充值类型</th>
<th>操作人</th>
<th>备注</th>
</tr>
</thead>
<tbody>
@@ -94,7 +132,9 @@ export function AdminRechargeRecordsPage() {
<td>{record.rechargedAt}</td>
<td>{formatAmount(record.amount)}</td>
<td>{formatAmount(record.balance)}</td>
<td><Tag tone={record.type === 'manual' ? 'warning' : 'info'}>{record.type === 'manual' ? '人工充值' : '套餐充值'}</Tag></td>
<td>{record.operator}</td>
<td>{record.remark ?? '-'}</td>
</tr>
))}
</tbody>
@@ -114,6 +154,28 @@ export function AdminRechargeRecordsPage() {
</div>
</div>
</div>
{manualOpen ? (
<Modal
footer={(
<>
<Button onClick={() => setManualOpen(false)} variant="ghost">取消</Button>
<Button onClick={submitManualRecharge}>确认充值</Button>
</>
)}
onClose={() => setManualOpen(false)}
open
size="md"
title="企业人工充值"
>
<div className="admin-system-modal-form">
<Input label="企业名称" onChange={(event) => updateForm('enterprise', event.target.value)} value={form.enterprise} />
<Input label="充值金额" onChange={(event) => updateForm('amount', event.target.value)} prefix="¥" type="number" value={form.amount} />
<Input label="操作人" onChange={(event) => updateForm('operator', event.target.value)} value={form.operator} />
<Textarea className="admin-system-modal-form__wide" label="充值备注" onChange={(event) => updateForm('remark', event.target.value)} rows={4} value={form.remark} />
</div>
</Modal>
) : null}
</section>
);
}
src/apps/admin/AdminSystemLogsPage.tsx
+132
View File
@@ -0,0 +1,132 @@
import { useMemo, useState } from 'react';
import { CalendarDays, Download, FileText, Search } from 'lucide-react';
import { Breadcrumb, Button, Input, Select, Table, Tag, type TableColumn } from '@/components/ui';
type LogLevel = 'info' | 'success' | 'warning' | 'error';
type AdminSystemLog = {
id: string;
time: string;
level: LogLevel;
tenant: string;
module: string;
operator: string;
action: string;
resourceId: string;
detail: string;
ip: string;
};
const levelLabelMap: Record<LogLevel, string> = {
info: '信息',
success: '成功',
warning: '警告',
error: '错误',
};
const levelToneMap: Record<LogLevel, 'info' | 'success' | 'warning' | 'danger'> = {
info: 'info',
success: 'success',
warning: 'warning',
error: 'danger',
};
const logsSeed: AdminSystemLog[] = [
{ id: 'SYS202607010001', time: '2026-07-01 13:42:10', level: 'success', tenant: '上海云舟科技有限公司', module: '账户计费', operator: '运营', action: '人工充值', resourceId: 'RCG202607010001', detail: '人工充值 ¥2,000.00，备注：线下转账到账', ip: '10.0.1.12' },
{ id: 'SYS202607010002', time: '2026-07-01 13:20:33', level: 'info', tenant: '杭州星澜商贸有限公司', module: '短信审核', operator: '审核员A', action: '审核通过', resourceId: 'AUD202607010018', detail: '营销短信任务进入发送队列', ip: '10.0.1.15' },
{ id: 'SYS202607010003', time: '2026-07-01 12:58:44', level: 'warning', tenant: '深圳北辰出行服务有限公司', module: '风控', operator: 'system', action: '触发人工审核', resourceId: 'RISK202607010009', detail: '重复号码比例 21.4%，超过阈值 20%', ip: '127.0.0.1' },
{ id: 'SYS202607010004', time: '2026-07-01 12:11:02', level: 'error', tenant: '广州麦芒科技', module: '发送链路', operator: 'gateway', action: 'SubmitResp失败', resourceId: 'MSG-7b9e', detail: '通道返回 REJECT，错误码 8', ip: '10.0.2.21' },
{ id: 'SYS202607010005', time: '2026-07-01 11:46:29', level: 'info', tenant: '平台', module: '系统管理', operator: '平台管理员', action: '创建用户', resourceId: 'USR202607010006', detail: '新增运营用户：report-admin', ip: '10.0.1.10' },
];
export function AdminSystemLogsPage() {
const [keyword, setKeyword] = useState('');
const [level, setLevel] = useState('all');
const [module, setModule] = useState('all');
const [range, setRange] = useState('today');
const moduleOptions = useMemo(() => {
const modules = Array.from(new Set(logsSeed.map((item) => item.module)));
return [{ label: '全部模块', value: 'all' }, ...modules.map((item) => ({ label: item, value: item }))];
}, []);
const filteredLogs = logsSeed.filter((item) => {
const target = `${item.tenant} ${item.operator} ${item.action} ${item.resourceId} ${item.detail}`;
const matchesKeyword = !keyword || target.toLowerCase().includes(keyword.toLowerCase());
const matchesLevel = level === 'all' || item.level === level;
const matchesModule = module === 'all' || item.module === module;
return matchesKeyword && matchesLevel && matchesModule;
});
const columns = useMemo<Array<TableColumn<AdminSystemLog>>>(() => [
{ key: 'time', title: '时间', width: '180px', render: (record) => <span className="muted">{record.time}</span> },
{ key: 'level', title: '级别', width: '100px', render: (record) => <Tag tone={levelToneMap[record.level]}>{levelLabelMap[record.level]}</Tag> },
{ key: 'tenant', title: '企业', width: '190px', render: (record) => <strong>{record.tenant}</strong> },
{ key: 'module', title: '模块', width: '130px', render: (record) => record.module },
{ key: 'operator', title: '操作人', width: '120px', render: (record) => <strong>{record.operator}</strong> },
{ key: 'action', title: '动作', width: '140px', render: (record) => record.action },
{ key: 'resourceId', title: '资源ID', width: '150px', render: (record) => <span className="muted">{record.resourceId}</span> },
{ key: 'detail', title: '详情', render: (record) => <span className="system-log-detail">{record.detail}</span> },
{ key: 'ip', title: 'IP', width: '120px', render: (record) => <span className="muted">{record.ip}</span> },
], []);
return (
<section className="page-stack system-page">
<div className="system-page-toolbar">
<div className="sms-send-title">
<span className="sms-send-title__icon"><FileText size={22} /></span>
<div>
<Breadcrumb items={['系统管理', '系统日志']} />
<h1>系统日志</h1>
</div>
</div>
<Button icon={<Download size={17} />} variant="secondary">导出日志</Button>
</div>
<div className="system-log-filters">
<Input
onChange={(event) => setKeyword(event.target.value)}
placeholder="搜索企业、操作人、动作、资源ID或详情"
prefix={<Search size={16} />}
value={keyword}
/>
<Select
onChange={(event) => setLevel(event.target.value)}
options={[
{ label: '全部级别', value: 'all' },
{ label: '信息', value: 'info' },
{ label: '成功', value: 'success' },
{ label: '警告', value: 'warning' },
{ label: '错误', value: 'error' },
]}
value={level}
/>
<Select onChange={(event) => setModule(event.target.value)} options={moduleOptions} value={module} />
</div>
<div className="system-log-range">
<span><CalendarDays size={18} /> 时间范围：</span>
{[
{ label: '今天', value: 'today' },
{ label: '近7天', value: '7d' },
{ label: '近30天', value: '30d' },
{ label: '全部', value: 'all' },
].map((item) => (
<Button
key={item.value}
onClick={() => setRange(item.value)}
size="sm"
variant={range === item.value ? 'primary' : 'secondary'}
>
{item.label}
</Button>
))}
</div>
<div className="surface system-table-card">
<Table columns={columns} data={filteredLogs} emptyText="暂无系统日志" rowKey="id" />
</div>
</section>
);
}