Skip to content

Commit 06aa0c8

Browse files
sunnylqmsunnylqm
committed
optimise
1 parent 98429b0 commit 06aa0c8

8 files changed

Lines changed: 210 additions & 124 deletions

File tree

‎src/pages/audit-logs.tsx‎

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { DownloadOutlined, FileTextOutlined } from '@ant-design/icons';
2-
import { Button, DatePicker, Grid, Table, Typography } from 'antd';
2+
import { Button, DatePicker, Grid, message, Table, Typography } from 'antd';
33
import type { ColumnType } from 'antd/lib/table';
44
import dayjs, { type Dayjs } from 'dayjs';
55
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
66
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
77
import relativeTime from 'dayjs/plugin/relativeTime';
88
import { useMemo, useState } from 'react';
9-
import * as XLSX from 'xlsx';
109
import { useAuditLogs } from '@/utils/hooks';
1110
import 'dayjs/locale/zh-cn';
1211
import { UAParser } from 'ua-parser-js';
@@ -324,72 +323,78 @@ export const AuditLogs = () => {
324323
};
325324

326325
// 导出到 Excel
327-
const handleExportToExcel = () => {
326+
const handleExportToExcel = async () => {
328327
if (filteredAuditLogs.length === 0) {
329328
return;
330329
}
331330

332-
// 格式化数据
333-
const excelData = filteredAuditLogs.map((log) => {
334-
const date = dayjs(log.createdAt);
335-
const actionLabel = getActionLabel(log.method, log.path);
336-
337-
// 解析 UA 信息
338-
let browserInfo = '-';
339-
let osInfo = '-';
340-
if (log.userAgent) {
341-
// 处理特殊的 CLI useragent 格式
342-
if (log.userAgent.startsWith('react-native-update-cli')) {
343-
const version = log.userAgent.split('/')[1] || '';
344-
browserInfo = `cli ${version}`.trim();
345-
osInfo = '-';
346-
} else {
347-
const { browser, os } = UAParser(log.userAgent);
348-
browserInfo =
349-
`${browser.name || '-'} ${browser.version || ''}`.trim();
350-
osInfo = `${os.name || '-'} ${os.version || ''}`.trim();
331+
try {
332+
const XLSX = await import('xlsx');
333+
334+
// 格式化数据
335+
const excelData = filteredAuditLogs.map((log) => {
336+
const date = dayjs(log.createdAt);
337+
const actionLabel = getActionLabel(log.method, log.path);
338+
339+
// 解析 UA 信息
340+
let browserInfo = '-';
341+
let osInfo = '-';
342+
if (log.userAgent) {
343+
// 处理特殊的 CLI useragent 格式
344+
if (log.userAgent.startsWith('react-native-update-cli')) {
345+
const version = log.userAgent.split('/')[1] || '';
346+
browserInfo = `cli ${version}`.trim();
347+
osInfo = '-';
348+
} else {
349+
const { browser, os } = UAParser(log.userAgent);
350+
browserInfo =
351+
`${browser.name || '-'} ${browser.version || ''}`.trim();
352+
osInfo = `${os.name || '-'} ${os.version || ''}`.trim();
353+
}
351354
}
352-
}
353355

354-
return {
355-
时间: date.format('YYYY-MM-DD HH:mm:ss'),
356-
操作: actionLabel,
357-
状态码: log.statusCode,
358-
提交数据: log.data ? JSON.stringify(log.data) : '-',
359-
浏览器: browserInfo,
360-
操作系统: osInfo,
361-
IP地址: log.ip || '-',
362-
'API Key': log.apiTokens
363-
? `${log.apiTokens.name}(${log.apiTokens.tokenSuffix})`
364-
: '-',
365-
};
366-
});
367-
368-
// 创建工作簿
369-
const wb = XLSX.utils.book_new();
370-
const ws = XLSX.utils.json_to_sheet(excelData);
371-
372-
// 设置列宽
373-
const colWidths = [
374-
{ wch: 20 }, // 时间
375-
{ wch: 15 }, // 操作
376-
{ wch: 10 }, // 状态码
377-
{ wch: 40 }, // 提交数据
378-
{ wch: 20 }, // 浏览器
379-
{ wch: 20 }, // 操作系统
380-
{ wch: 15 }, // IP地址
381-
{ wch: 15 }, // 是否使用API
382-
];
383-
ws['!cols'] = colWidths;
384-
385-
// 添加工作表到工作簿
386-
XLSX.utils.book_append_sheet(wb, ws, '操作日志');
387-
388-
// 生成文件名
389-
const fileName = `操作日志_${dayjs().format('YYYY-MM-DD_HH-mm-ss')}.xlsx`;
390-
391-
// 导出文件
392-
XLSX.writeFile(wb, fileName);
356+
return {
357+
时间: date.format('YYYY-MM-DD HH:mm:ss'),
358+
操作: actionLabel,
359+
状态码: log.statusCode,
360+
提交数据: log.data ? JSON.stringify(log.data) : '-',
361+
浏览器: browserInfo,
362+
操作系统: osInfo,
363+
IP地址: log.ip || '-',
364+
'API Key': log.apiTokens
365+
? `${log.apiTokens.name}(${log.apiTokens.tokenSuffix})`
366+
: '-',
367+
};
368+
});
369+
370+
// 创建工作簿
371+
const wb = XLSX.utils.book_new();
372+
const ws = XLSX.utils.json_to_sheet(excelData);
373+
374+
// 设置列宽
375+
const colWidths = [
376+
{ wch: 20 }, // 时间
377+
{ wch: 15 }, // 操作
378+
{ wch: 10 }, // 状态码
379+
{ wch: 40 }, // 提交数据
380+
{ wch: 20 }, // 浏览器
381+
{ wch: 20 }, // 操作系统
382+
{ wch: 15 }, // IP地址
383+
{ wch: 15 }, // 是否使用API
384+
];
385+
ws['!cols'] = colWidths;
386+
387+
// 添加工作表到工作簿
388+
XLSX.utils.book_append_sheet(wb, ws, '操作日志');
389+
390+
// 生成文件名
391+
const fileName = `操作日志_${dayjs().format('YYYY-MM-DD_HH-mm-ss')}.xlsx`;
392+
393+
// 导出文件
394+
XLSX.writeFile(wb, fileName);
395+
} catch (error) {
396+
message.error(`导出失败：${(error as Error).message}`);
397+
}
393398
};
394399

395400
return (

‎src/pages/manage/components/deps-table.tsx‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DownOutlined, JavaScriptOutlined } from '@ant-design/icons';
22
import { Button, Dropdown, Popover } from 'antd';
33
import { useState } from 'react';
44
import { Mode } from 'vanilla-jsoneditor';
5-
import { useVersions } from '@/utils/hooks';
5+
import { useAllVersions } from '@/utils/hooks';
66
import { useManageContext } from '../hooks/useManageContext';
77
import { DepsDiff } from './deps-diff';
88
import JsonEditor from './json-editor';
@@ -14,7 +14,11 @@ export const DepsTable = ({
1414
name?: string;
1515
}) => {
1616
const { packages, appId } = useManageContext();
17-
const { allVersions: versions } = useVersions({ appId });
17+
const [popoverOpen, setPopoverOpen] = useState(false);
18+
const { versions, isLoading: versionsLoading } = useAllVersions({
19+
appId,
20+
enabled: popoverOpen,
21+
});
1822
const [diffs, setDiffs] = useState<{
1923
oldDeps?: Record<string, string>;
2024
newDeps?: Record<string, string>;
@@ -24,6 +28,7 @@ export const DepsTable = ({
2428
<Popover
2529
className="ant-typography-edit"
2630
afterOpenChange={(visible) => {
31+
setPopoverOpen(visible);
2732
if (!visible) {
2833
setDiffs(null);
2934
}
@@ -81,21 +86,36 @@ export const DepsTable = ({
8186
key: 'version',
8287
type: 'group',
8388
label: '热更包',
84-
children: versions.reduce(
85-
(acc, v) => {
86-
if (v.deps) {
87-
acc.push({
88-
key: `v_${v.id}`,
89-
label: v.name,
90-
});
91-
}
92-
return acc;
93-
},
94-
[] as { key: string; label: string }[],
95-
),
89+
children: versionsLoading
90+
? [
91+
{
92+
key: 'version_loading',
93+
label: '加载中...',
94+
disabled: true,
95+
},
96+
]
97+
: versions.reduce(
98+
(acc, v) => {
99+
if (v.deps) {
100+
acc.push({
101+
key: `v_${v.id}`,
102+
label: v.name,
103+
});
104+
}
105+
return acc;
106+
},
107+
[] as {
108+
key: string;
109+
label: string;
110+
disabled?: boolean;
111+
}[],
112+
),
96113
},
97114
],
98115
onClick: ({ key }) => {
116+
if (!key.includes('_')) {
117+
return;
118+
}
99119
const [type, id] = key.split('_');
100120
if (type === 'p') {
101121
const pkg = packages.find((p) => p.id === +id);

‎src/pages/manage/components/package-list.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
import { Link } from 'react-router-dom';
2222
import { rootRouterPath } from '@/router';
2323
import { api } from '@/services/api';
24-
import { usePackageTimestampWarnings } from '@/utils/hooks';
2524
import { useManageContext } from '../hooks/useManageContext';
2625
import { Commit } from './commit';
2726
import { DepsTable } from './deps-table';
@@ -33,8 +32,7 @@ const PackageList = ({
3332
dataSource?: Package[];
3433
loading?: boolean;
3534
}) => {
36-
const { appId } = useManageContext();
37-
const { app, packageTimestampWarnings } = usePackageTimestampWarnings(appId);
35+
const { app, packageTimestampWarnings } = useManageContext();
3836
const realtimeMetricsPath = app?.appKey
3937
? `${rootRouterPath.realtimeMetrics}?${new URLSearchParams({
4038
appKey: app.appKey,
@@ -152,7 +150,6 @@ const Item = ({
152150
const { appId } = useManageContext();
153151
const hasTimestampWarning = warningTimestamps.length > 0;
154152
return (
155-
// const [_, drag] = useDrag(() => ({ item, type: "package" }));
156153
<div className="bg-white my-0 [&_li]:px-0!">
157154
<List.Item className="p-2">
158155
<List.Item.Meta

‎src/pages/manage/hooks/useManageContext.tsx‎

Lines changed: 58 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
1-
import { createContext, type ReactNode, useContext, useState } from 'react';
2-
import { useBinding, usePackages } from '@/utils/hooks';
1+
import {
2+
createContext,
3+
type ReactNode,
4+
useContext,
5+
useMemo,
6+
useState,
7+
} from 'react';
8+
import {
9+
useBinding,
10+
usePackages,
11+
usePackageTimestampWarnings,
12+
} from '@/utils/hooks';
313

414
const noop = () => {};
515
// const asyncNoop = () => Promise.resolve();
616

717
export const defaultManageContext = {
818
appId: 0,
19+
app: undefined,
920
deepLink: '',
1021
setDeepLink: noop,
1122
packages: [],
1223
unusedPackages: [],
1324
bindings: [],
1425
packageMap: new Map(),
26+
packageTimestampWarnings: new Map(),
1527
};
1628

1729
export const ManageContext = createContext<{
1830
appId: number;
31+
app?: App;
1932
deepLink: string;
2033
setDeepLink: (deepLink: string) => void;
2134
packages: Package[];
@@ -24,16 +37,20 @@ export const ManageContext = createContext<{
2437
packageMap: Map<number, Package>;
2538
bindings: Binding[];
2639
bindingsLoading?: boolean;
40+
packageTimestampWarnings: Map<number, string[]>;
41+
packageTimestampWarningsLoading?: boolean;
2742
}>(defaultManageContext);
2843

2944
export const useManageContext = () => useContext(ManageContext);
3045

3146
export const ManageProvider = ({
3247
children,
3348
appId,
49+
app,
3450
}: {
3551
children: ReactNode;
3652
appId: number;
53+
app?: App;
3754
}) => {
3855
const [deepLink, setDeepLink] = useState(
3956
window.localStorage.getItem(`${appId}_deeplink`) ?? '',
@@ -46,22 +63,46 @@ export const ManageProvider = ({
4663
} = usePackages(appId);
4764

4865
const { bindings, isLoading: bindingsLoading } = useBinding(appId);
66+
const {
67+
packageTimestampWarnings,
68+
isLoading: packageTimestampWarningsLoading,
69+
} = usePackageTimestampWarnings({
70+
appId,
71+
app,
72+
packages,
73+
});
74+
75+
const value = useMemo(
76+
() => ({
77+
appId,
78+
app,
79+
deepLink,
80+
setDeepLink,
81+
packages,
82+
packageMap,
83+
unusedPackages,
84+
packagesLoading,
85+
bindings,
86+
bindingsLoading,
87+
packageTimestampWarnings,
88+
packageTimestampWarningsLoading,
89+
}),
90+
[
91+
app,
92+
appId,
93+
bindings,
94+
bindingsLoading,
95+
deepLink,
96+
packageMap,
97+
packages,
98+
packagesLoading,
99+
packageTimestampWarnings,
100+
packageTimestampWarningsLoading,
101+
unusedPackages,
102+
],
103+
);
49104

50105
return (
51-
<ManageContext.Provider
52-
value={{
53-
appId,
54-
deepLink,
55-
setDeepLink,
56-
packages,
57-
packageMap,
58-
unusedPackages,
59-
packagesLoading,
60-
bindings,
61-
bindingsLoading,
62-
}}
63-
>
64-
{children}
65-
</ManageContext.Provider>
106+
<ManageContext.Provider value={value}>{children}</ManageContext.Provider>
66107
);
67108
};

‎src/pages/manage/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ export const Manage = () => {
170170
</Button>
171171
</Space.Compact>
172172
</Row>
173-
<ManageProvider appId={id}>
173+
<ManageProvider appId={id} app={app}>
174174
{contextHolder}
175175
<ManageDashBoard />
176176
</ManageProvider>

0 commit comments

Comments
 (0)