ba6b0637cc
Problem
Semi UI’s Tabs calls `focus()` on the active tab during mount, causing the browser to scroll the page to that element.
Using the bare `preventScroll` shorthand was not picked up reliably, so the page still jumped to the Tabs’ position on first render.
Changes
• Updated both Tabs instances in `web/src/pages/Detail/index.js` to `preventScroll={true}` instead of the shorthand prop.
• Ensures the prop is explicitly interpreted as boolean `true`, converting the internal call to `focus({ preventScroll: true })`.
Result
The `Detail` page now stays at its original scroll position after load, eliminating the unexpected auto-scroll behavior.
1480 lines
50 KiB
JavaScript
1480 lines
50 KiB
JavaScript
import React, { useContext, useEffect, useRef, useState, useMemo, useCallback } from 'react';
|
||
import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Wallet, Activity, Zap, Gauge, PieChart, Server, Bell, HelpCircle } from 'lucide-react';
|
||
|
||
import {
|
||
Card,
|
||
Form,
|
||
Spin,
|
||
IconButton,
|
||
Modal,
|
||
Avatar,
|
||
Tabs,
|
||
TabPane,
|
||
Empty,
|
||
Tag,
|
||
Timeline,
|
||
Collapse,
|
||
Progress,
|
||
Divider
|
||
} from '@douyinfe/semi-ui';
|
||
import {
|
||
IconRefresh,
|
||
IconSearch,
|
||
IconMoneyExchangeStroked,
|
||
IconHistogram,
|
||
IconRotate,
|
||
IconCoinMoneyStroked,
|
||
IconTextStroked,
|
||
IconPulse,
|
||
IconStopwatchStroked,
|
||
IconTypograph,
|
||
IconPieChart2Stroked,
|
||
IconPlus,
|
||
IconMinus
|
||
} from '@douyinfe/semi-icons';
|
||
import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
|
||
import { VChart } from '@visactor/react-vchart';
|
||
import {
|
||
API,
|
||
isAdmin,
|
||
isMobile,
|
||
showError,
|
||
timestamp2string,
|
||
timestamp2string1,
|
||
getQuotaWithUnit,
|
||
modelColorMap,
|
||
renderNumber,
|
||
renderQuota,
|
||
modelToColor,
|
||
copy,
|
||
showSuccess,
|
||
getRelativeTime
|
||
} from '../../helpers';
|
||
import { UserContext } from '../../context/User/index.js';
|
||
import { StatusContext } from '../../context/Status/index.js';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
const Detail = (props) => {
|
||
// ========== Hooks - Context ==========
|
||
const [userState, userDispatch] = useContext(UserContext);
|
||
const [statusState, statusDispatch] = useContext(StatusContext);
|
||
|
||
// ========== Hooks - Navigation & Translation ==========
|
||
const { t } = useTranslation();
|
||
const navigate = useNavigate();
|
||
|
||
// ========== Hooks - Refs ==========
|
||
const formRef = useRef();
|
||
const initialized = useRef(false);
|
||
const apiScrollRef = useRef(null);
|
||
|
||
// ========== Constants & Shared Configurations ==========
|
||
const CHART_CONFIG = { mode: 'desktop-browser' };
|
||
|
||
const CARD_PROPS = {
|
||
shadows: 'always',
|
||
bordered: false,
|
||
headerLine: true
|
||
};
|
||
|
||
const FORM_FIELD_PROPS = {
|
||
className: "w-full mb-2 !rounded-lg",
|
||
size: 'large'
|
||
};
|
||
|
||
const ICON_BUTTON_CLASS = "text-white hover:bg-opacity-80 !rounded-full";
|
||
const FLEX_CENTER_GAP2 = "flex items-center gap-2";
|
||
|
||
const ILLUSTRATION_SIZE = { width: 96, height: 96 };
|
||
|
||
// ========== Constants ==========
|
||
let now = new Date();
|
||
const isAdminUser = isAdmin();
|
||
|
||
// ========== Panel enable flags ==========
|
||
const apiInfoEnabled = statusState?.status?.api_info_enabled ?? true;
|
||
const announcementsEnabled = statusState?.status?.announcements_enabled ?? true;
|
||
const faqEnabled = statusState?.status?.faq_enabled ?? true;
|
||
const uptimeEnabled = statusState?.status?.uptime_kuma_enabled ?? true;
|
||
|
||
const hasApiInfoPanel = apiInfoEnabled;
|
||
const hasInfoPanels = announcementsEnabled || faqEnabled || uptimeEnabled;
|
||
|
||
// ========== Helper Functions ==========
|
||
const getDefaultTime = useCallback(() => {
|
||
return localStorage.getItem('data_export_default_time') || 'hour';
|
||
}, []);
|
||
|
||
const getTimeInterval = useCallback((timeType, isSeconds = false) => {
|
||
const intervals = {
|
||
hour: isSeconds ? 3600 : 60,
|
||
day: isSeconds ? 86400 : 1440,
|
||
week: isSeconds ? 604800 : 10080
|
||
};
|
||
return intervals[timeType] || intervals.hour;
|
||
}, []);
|
||
|
||
const getInitialTimestamp = useCallback(() => {
|
||
const defaultTime = getDefaultTime();
|
||
const now = new Date().getTime() / 1000;
|
||
|
||
switch (defaultTime) {
|
||
case 'hour':
|
||
return timestamp2string(now - 86400);
|
||
case 'week':
|
||
return timestamp2string(now - 86400 * 30);
|
||
default:
|
||
return timestamp2string(now - 86400 * 7);
|
||
}
|
||
}, [getDefaultTime]);
|
||
|
||
const updateMapValue = useCallback((map, key, value) => {
|
||
if (!map.has(key)) {
|
||
map.set(key, 0);
|
||
}
|
||
map.set(key, map.get(key) + value);
|
||
}, []);
|
||
|
||
const initializeMaps = useCallback((key, ...maps) => {
|
||
maps.forEach(map => {
|
||
if (!map.has(key)) {
|
||
map.set(key, 0);
|
||
}
|
||
});
|
||
}, []);
|
||
|
||
const updateChartSpec = useCallback((setterFunc, newData, subtitle, newColors, dataId) => {
|
||
setterFunc(prev => ({
|
||
...prev,
|
||
data: [{ id: dataId, values: newData }],
|
||
title: {
|
||
...prev.title,
|
||
subtext: subtitle,
|
||
},
|
||
color: {
|
||
specified: newColors,
|
||
},
|
||
}));
|
||
}, []);
|
||
|
||
const createSectionTitle = useCallback((Icon, text) => (
|
||
<div className={FLEX_CENTER_GAP2}>
|
||
<Icon size={16} />
|
||
{text}
|
||
</div>
|
||
), []);
|
||
|
||
const createFormField = useCallback((Component, props) => (
|
||
<Component {...FORM_FIELD_PROPS} {...props} />
|
||
), []);
|
||
|
||
// ========== Time Options ==========
|
||
const timeOptions = useMemo(() => [
|
||
{ label: t('小时'), value: 'hour' },
|
||
{ label: t('天'), value: 'day' },
|
||
{ label: t('周'), value: 'week' },
|
||
], [t]);
|
||
|
||
// ========== Hooks - State ==========
|
||
const [inputs, setInputs] = useState({
|
||
username: '',
|
||
token_name: '',
|
||
model_name: '',
|
||
start_timestamp: getInitialTimestamp(),
|
||
end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
|
||
channel: '',
|
||
data_export_default_time: '',
|
||
});
|
||
|
||
const [dataExportDefaultTime, setDataExportDefaultTime] = useState(getDefaultTime());
|
||
|
||
const [loading, setLoading] = useState(false);
|
||
const [quotaData, setQuotaData] = useState([]);
|
||
const [consumeQuota, setConsumeQuota] = useState(0);
|
||
const [consumeTokens, setConsumeTokens] = useState(0);
|
||
const [times, setTimes] = useState(0);
|
||
const [pieData, setPieData] = useState([{ type: 'null', value: '0' }]);
|
||
const [lineData, setLineData] = useState([]);
|
||
|
||
const [modelColors, setModelColors] = useState({});
|
||
const [activeChartTab, setActiveChartTab] = useState('1');
|
||
const [showApiScrollHint, setShowApiScrollHint] = useState(false);
|
||
const [searchModalVisible, setSearchModalVisible] = useState(false);
|
||
|
||
const [trendData, setTrendData] = useState({
|
||
balance: [],
|
||
usedQuota: [],
|
||
requestCount: [],
|
||
times: [],
|
||
consumeQuota: [],
|
||
tokens: [],
|
||
rpm: [],
|
||
tpm: []
|
||
});
|
||
|
||
// ========== Additional Refs for new cards ==========
|
||
const announcementScrollRef = useRef(null);
|
||
const faqScrollRef = useRef(null);
|
||
const uptimeScrollRef = useRef(null);
|
||
const uptimeTabScrollRefs = useRef({});
|
||
|
||
// ========== Additional State for scroll hints ==========
|
||
const [showAnnouncementScrollHint, setShowAnnouncementScrollHint] = useState(false);
|
||
const [showFaqScrollHint, setShowFaqScrollHint] = useState(false);
|
||
const [showUptimeScrollHint, setShowUptimeScrollHint] = useState(false);
|
||
|
||
// ========== Uptime data ==========
|
||
const [uptimeData, setUptimeData] = useState([]);
|
||
const [uptimeLoading, setUptimeLoading] = useState(false);
|
||
const [activeUptimeTab, setActiveUptimeTab] = useState('');
|
||
|
||
// ========== Props Destructuring ==========
|
||
const { username, model_name, start_timestamp, end_timestamp, channel } = inputs;
|
||
|
||
// ========== Chart Specs State ==========
|
||
const [spec_pie, setSpecPie] = useState({
|
||
type: 'pie',
|
||
data: [
|
||
{
|
||
id: 'id0',
|
||
values: pieData,
|
||
},
|
||
],
|
||
outerRadius: 0.8,
|
||
innerRadius: 0.5,
|
||
padAngle: 0.6,
|
||
valueField: 'value',
|
||
categoryField: 'type',
|
||
pie: {
|
||
style: {
|
||
cornerRadius: 10,
|
||
},
|
||
state: {
|
||
hover: {
|
||
outerRadius: 0.85,
|
||
stroke: '#000',
|
||
lineWidth: 1,
|
||
},
|
||
selected: {
|
||
outerRadius: 0.85,
|
||
stroke: '#000',
|
||
lineWidth: 1,
|
||
},
|
||
},
|
||
},
|
||
title: {
|
||
visible: true,
|
||
text: t('模型调用次数占比'),
|
||
subtext: `${t('总计')}：${renderNumber(times)}`,
|
||
},
|
||
legends: {
|
||
visible: true,
|
||
orient: 'left',
|
||
},
|
||
label: {
|
||
visible: true,
|
||
},
|
||
tooltip: {
|
||
mark: {
|
||
content: [
|
||
{
|
||
key: (datum) => datum['type'],
|
||
value: (datum) => renderNumber(datum['value']),
|
||
},
|
||
],
|
||
},
|
||
},
|
||
color: {
|
||
specified: modelColorMap,
|
||
},
|
||
});
|
||
|
||
const [spec_line, setSpecLine] = useState({
|
||
type: 'bar',
|
||
data: [
|
||
{
|
||
id: 'barData',
|
||
values: lineData,
|
||
},
|
||
],
|
||
xField: 'Time',
|
||
yField: 'Usage',
|
||
seriesField: 'Model',
|
||
stack: true,
|
||
legends: {
|
||
visible: true,
|
||
selectMode: 'single',
|
||
},
|
||
title: {
|
||
visible: true,
|
||
text: t('模型消耗分布'),
|
||
subtext: `${t('总计')}：${renderQuota(consumeQuota, 2)}`,
|
||
},
|
||
bar: {
|
||
state: {
|
||
hover: {
|
||
stroke: '#000',
|
||
lineWidth: 1,
|
||
},
|
||
},
|
||
},
|
||
tooltip: {
|
||
mark: {
|
||
content: [
|
||
{
|
||
key: (datum) => datum['Model'],
|
||
value: (datum) => renderQuota(datum['rawQuota'] || 0, 4),
|
||
},
|
||
],
|
||
},
|
||
dimension: {
|
||
content: [
|
||
{
|
||
key: (datum) => datum['Model'],
|
||
value: (datum) => datum['rawQuota'] || 0,
|
||
},
|
||
],
|
||
updateContent: (array) => {
|
||
array.sort((a, b) => b.value - a.value);
|
||
let sum = 0;
|
||
for (let i = 0; i < array.length; i++) {
|
||
if (array[i].key == '其他') {
|
||
continue;
|
||
}
|
||
let value = parseFloat(array[i].value);
|
||
if (isNaN(value)) {
|
||
value = 0;
|
||
}
|
||
if (array[i].datum && array[i].datum.TimeSum) {
|
||
sum = array[i].datum.TimeSum;
|
||
}
|
||
array[i].value = renderQuota(value, 4);
|
||
}
|
||
array.unshift({
|
||
key: t('总计'),
|
||
value: renderQuota(sum, 4),
|
||
});
|
||
return array;
|
||
},
|
||
},
|
||
},
|
||
color: {
|
||
specified: modelColorMap,
|
||
},
|
||
});
|
||
|
||
// ========== Hooks - Memoized Values ==========
|
||
const performanceMetrics = useMemo(() => {
|
||
const timeDiff = (Date.parse(end_timestamp) - Date.parse(start_timestamp)) / 60000;
|
||
const avgRPM = (times / timeDiff).toFixed(3);
|
||
const avgTPM = isNaN(consumeTokens / timeDiff) ? '0' : (consumeTokens / timeDiff).toFixed(3);
|
||
|
||
return { avgRPM, avgTPM, timeDiff };
|
||
}, [times, consumeTokens, end_timestamp, start_timestamp]);
|
||
|
||
const getGreeting = useMemo(() => {
|
||
const hours = new Date().getHours();
|
||
let greeting = '';
|
||
|
||
if (hours >= 5 && hours < 12) {
|
||
greeting = t('早上好');
|
||
} else if (hours >= 12 && hours < 14) {
|
||
greeting = t('中午好');
|
||
} else if (hours >= 14 && hours < 18) {
|
||
greeting = t('下午好');
|
||
} else {
|
||
greeting = t('晚上好');
|
||
}
|
||
|
||
const username = userState?.user?.username || '';
|
||
return `👋${greeting}，${username}`;
|
||
}, [t, userState?.user?.username]);
|
||
|
||
// ========== Hooks - Callbacks ==========
|
||
const getTrendSpec = useCallback((data, color) => ({
|
||
type: 'line',
|
||
data: [{ id: 'trend', values: data.map((val, idx) => ({ x: idx, y: val })) }],
|
||
xField: 'x',
|
||
yField: 'y',
|
||
height: 40,
|
||
width: 100,
|
||
axes: [
|
||
{
|
||
orient: 'bottom',
|
||
visible: false
|
||
},
|
||
{
|
||
orient: 'left',
|
||
visible: false
|
||
}
|
||
],
|
||
padding: 0,
|
||
autoFit: false,
|
||
legends: { visible: false },
|
||
tooltip: { visible: false },
|
||
crosshair: { visible: false },
|
||
line: {
|
||
style: {
|
||
stroke: color,
|
||
lineWidth: 2
|
||
}
|
||
},
|
||
point: {
|
||
visible: false
|
||
},
|
||
background: {
|
||
fill: 'transparent'
|
||
}
|
||
}), []);
|
||
|
||
const groupedStatsData = useMemo(() => [
|
||
{
|
||
title: createSectionTitle(Wallet, t('账户数据')),
|
||
color: 'bg-blue-50',
|
||
items: [
|
||
{
|
||
title: t('当前余额'),
|
||
value: renderQuota(userState?.user?.quota),
|
||
icon: <IconMoneyExchangeStroked size="large" />,
|
||
avatarColor: 'blue',
|
||
onClick: () => navigate('/console/topup'),
|
||
trendData: [],
|
||
trendColor: '#3b82f6'
|
||
},
|
||
{
|
||
title: t('历史消耗'),
|
||
value: renderQuota(userState?.user?.used_quota),
|
||
icon: <IconHistogram size="large" />,
|
||
avatarColor: 'purple',
|
||
trendData: [],
|
||
trendColor: '#8b5cf6'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: createSectionTitle(Activity, t('使用统计')),
|
||
color: 'bg-green-50',
|
||
items: [
|
||
{
|
||
title: t('请求次数'),
|
||
value: userState.user?.request_count,
|
||
icon: <IconRotate size="large" />,
|
||
avatarColor: 'green',
|
||
trendData: [],
|
||
trendColor: '#10b981'
|
||
},
|
||
{
|
||
title: t('统计次数'),
|
||
value: times,
|
||
icon: <IconPulse size="large" />,
|
||
avatarColor: 'cyan',
|
||
trendData: trendData.times,
|
||
trendColor: '#06b6d4'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: createSectionTitle(Zap, t('资源消耗')),
|
||
color: 'bg-yellow-50',
|
||
items: [
|
||
{
|
||
title: t('统计额度'),
|
||
value: renderQuota(consumeQuota),
|
||
icon: <IconCoinMoneyStroked size="large" />,
|
||
avatarColor: 'yellow',
|
||
trendData: trendData.consumeQuota,
|
||
trendColor: '#f59e0b'
|
||
},
|
||
{
|
||
title: t('统计Tokens'),
|
||
value: isNaN(consumeTokens) ? 0 : consumeTokens,
|
||
icon: <IconTextStroked size="large" />,
|
||
avatarColor: 'pink',
|
||
trendData: trendData.tokens,
|
||
trendColor: '#ec4899'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: createSectionTitle(Gauge, t('性能指标')),
|
||
color: 'bg-indigo-50',
|
||
items: [
|
||
{
|
||
title: t('平均RPM'),
|
||
value: performanceMetrics.avgRPM,
|
||
icon: <IconStopwatchStroked size="large" />,
|
||
avatarColor: 'indigo',
|
||
trendData: trendData.rpm,
|
||
trendColor: '#6366f1'
|
||
},
|
||
{
|
||
title: t('平均TPM'),
|
||
value: performanceMetrics.avgTPM,
|
||
icon: <IconTypograph size="large" />,
|
||
avatarColor: 'orange',
|
||
trendData: trendData.tpm,
|
||
trendColor: '#f97316'
|
||
}
|
||
]
|
||
}
|
||
], [
|
||
createSectionTitle, t, userState?.user?.quota, userState?.user?.used_quota, userState?.user?.request_count,
|
||
times, consumeQuota, consumeTokens, trendData, performanceMetrics, navigate
|
||
]);
|
||
|
||
const handleCopyUrl = useCallback(async (url) => {
|
||
if (await copy(url)) {
|
||
showSuccess(t('复制成功'));
|
||
}
|
||
}, [t]);
|
||
|
||
const handleSpeedTest = useCallback((apiUrl) => {
|
||
const encodedUrl = encodeURIComponent(apiUrl);
|
||
const speedTestUrl = `https://www.tcptest.cn/http/${encodedUrl}`;
|
||
window.open(speedTestUrl, '_blank');
|
||
}, []);
|
||
|
||
const handleInputChange = useCallback((value, name) => {
|
||
if (name === 'data_export_default_time') {
|
||
setDataExportDefaultTime(value);
|
||
return;
|
||
}
|
||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
||
}, []);
|
||
|
||
const loadQuotaData = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
let url = '';
|
||
let localStartTimestamp = Date.parse(start_timestamp) / 1000;
|
||
let localEndTimestamp = Date.parse(end_timestamp) / 1000;
|
||
if (isAdminUser) {
|
||
url = `/api/data/?username=${username}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&default_time=${dataExportDefaultTime}`;
|
||
} else {
|
||
url = `/api/data/self/?start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&default_time=${dataExportDefaultTime}`;
|
||
}
|
||
const res = await API.get(url);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
setQuotaData(data);
|
||
if (data.length === 0) {
|
||
data.push({
|
||
count: 0,
|
||
model_name: '无数据',
|
||
quota: 0,
|
||
created_at: now.getTime() / 1000,
|
||
});
|
||
}
|
||
data.sort((a, b) => a.created_at - b.created_at);
|
||
updateChartData(data);
|
||
} else {
|
||
showError(message);
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [start_timestamp, end_timestamp, username, dataExportDefaultTime, isAdminUser]);
|
||
|
||
const loadUptimeData = useCallback(async () => {
|
||
setUptimeLoading(true);
|
||
try {
|
||
const res = await API.get('/api/uptime/status');
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
setUptimeData(data || []);
|
||
if (data && data.length > 0 && !activeUptimeTab) {
|
||
setActiveUptimeTab(data[0].categoryName);
|
||
}
|
||
} else {
|
||
showError(message);
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
} finally {
|
||
setUptimeLoading(false);
|
||
}
|
||
}, [activeUptimeTab]);
|
||
|
||
const refresh = useCallback(async () => {
|
||
await Promise.all([loadQuotaData(), loadUptimeData()]);
|
||
}, [loadQuotaData, loadUptimeData]);
|
||
|
||
const handleSearchConfirm = useCallback(() => {
|
||
refresh();
|
||
setSearchModalVisible(false);
|
||
}, [refresh]);
|
||
|
||
const initChart = useCallback(async () => {
|
||
await loadQuotaData();
|
||
await loadUptimeData();
|
||
}, [loadQuotaData, loadUptimeData]);
|
||
|
||
const showSearchModal = useCallback(() => {
|
||
setSearchModalVisible(true);
|
||
}, []);
|
||
|
||
const handleCloseModal = useCallback(() => {
|
||
setSearchModalVisible(false);
|
||
}, []);
|
||
|
||
// ========== Regular Functions ==========
|
||
const checkApiScrollable = () => {
|
||
if (apiScrollRef.current) {
|
||
const element = apiScrollRef.current;
|
||
const isScrollable = element.scrollHeight > element.clientHeight;
|
||
const isAtBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 5;
|
||
setShowApiScrollHint(isScrollable && !isAtBottom);
|
||
}
|
||
};
|
||
|
||
const handleApiScroll = () => {
|
||
checkApiScrollable();
|
||
};
|
||
|
||
const checkCardScrollable = (ref, setHintFunction) => {
|
||
if (ref.current) {
|
||
const element = ref.current;
|
||
const isScrollable = element.scrollHeight > element.clientHeight;
|
||
const isAtBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 5;
|
||
setHintFunction(isScrollable && !isAtBottom);
|
||
}
|
||
};
|
||
|
||
const handleCardScroll = (ref, setHintFunction) => {
|
||
checkCardScrollable(ref, setHintFunction);
|
||
};
|
||
|
||
// ========== Effects for scroll detection ==========
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
checkApiScrollable();
|
||
checkCardScrollable(announcementScrollRef, setShowAnnouncementScrollHint);
|
||
checkCardScrollable(faqScrollRef, setShowFaqScrollHint);
|
||
|
||
if (uptimeData.length === 1) {
|
||
checkCardScrollable(uptimeScrollRef, setShowUptimeScrollHint);
|
||
} else if (uptimeData.length > 1 && activeUptimeTab) {
|
||
const activeTabRef = uptimeTabScrollRefs.current[activeUptimeTab];
|
||
if (activeTabRef) {
|
||
checkCardScrollable(activeTabRef, setShowUptimeScrollHint);
|
||
}
|
||
}
|
||
}, 100);
|
||
return () => clearTimeout(timer);
|
||
}, [uptimeData, activeUptimeTab]);
|
||
|
||
const getUserData = async () => {
|
||
let res = await API.get(`/api/user/self`);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
userDispatch({ type: 'login', payload: data });
|
||
} else {
|
||
showError(message);
|
||
}
|
||
};
|
||
|
||
// ========== Data Processing Functions ==========
|
||
const processRawData = useCallback((data) => {
|
||
const result = {
|
||
totalQuota: 0,
|
||
totalTimes: 0,
|
||
totalTokens: 0,
|
||
uniqueModels: new Set(),
|
||
timePoints: [],
|
||
timeQuotaMap: new Map(),
|
||
timeTokensMap: new Map(),
|
||
timeCountMap: new Map()
|
||
};
|
||
|
||
data.forEach((item) => {
|
||
result.uniqueModels.add(item.model_name);
|
||
result.totalTokens += item.token_used;
|
||
result.totalQuota += item.quota;
|
||
result.totalTimes += item.count;
|
||
|
||
const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime);
|
||
if (!result.timePoints.includes(timeKey)) {
|
||
result.timePoints.push(timeKey);
|
||
}
|
||
|
||
initializeMaps(timeKey, result.timeQuotaMap, result.timeTokensMap, result.timeCountMap);
|
||
updateMapValue(result.timeQuotaMap, timeKey, item.quota);
|
||
updateMapValue(result.timeTokensMap, timeKey, item.token_used);
|
||
updateMapValue(result.timeCountMap, timeKey, item.count);
|
||
});
|
||
|
||
result.timePoints.sort();
|
||
return result;
|
||
}, [dataExportDefaultTime, initializeMaps, updateMapValue]);
|
||
|
||
const calculateTrendData = useCallback((timePoints, timeQuotaMap, timeTokensMap, timeCountMap) => {
|
||
const quotaTrend = timePoints.map(time => timeQuotaMap.get(time) || 0);
|
||
const tokensTrend = timePoints.map(time => timeTokensMap.get(time) || 0);
|
||
const countTrend = timePoints.map(time => timeCountMap.get(time) || 0);
|
||
|
||
const rpmTrend = [];
|
||
const tpmTrend = [];
|
||
|
||
if (timePoints.length >= 2) {
|
||
const interval = getTimeInterval(dataExportDefaultTime);
|
||
|
||
for (let i = 0; i < timePoints.length; i++) {
|
||
rpmTrend.push(timeCountMap.get(timePoints[i]) / interval);
|
||
tpmTrend.push(timeTokensMap.get(timePoints[i]) / interval);
|
||
}
|
||
}
|
||
|
||
return {
|
||
balance: [],
|
||
usedQuota: [],
|
||
requestCount: [],
|
||
times: countTrend,
|
||
consumeQuota: quotaTrend,
|
||
tokens: tokensTrend,
|
||
rpm: rpmTrend,
|
||
tpm: tpmTrend
|
||
};
|
||
}, [dataExportDefaultTime, getTimeInterval]);
|
||
|
||
const generateModelColors = useCallback((uniqueModels) => {
|
||
const newModelColors = {};
|
||
Array.from(uniqueModels).forEach((modelName) => {
|
||
newModelColors[modelName] =
|
||
modelColorMap[modelName] ||
|
||
modelColors[modelName] ||
|
||
modelToColor(modelName);
|
||
});
|
||
return newModelColors;
|
||
}, [modelColors]);
|
||
|
||
const aggregateDataByTimeAndModel = useCallback((data) => {
|
||
const aggregatedData = new Map();
|
||
|
||
data.forEach((item) => {
|
||
const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime);
|
||
const modelKey = item.model_name;
|
||
const key = `${timeKey}-${modelKey}`;
|
||
|
||
if (!aggregatedData.has(key)) {
|
||
aggregatedData.set(key, {
|
||
time: timeKey,
|
||
model: modelKey,
|
||
quota: 0,
|
||
count: 0,
|
||
});
|
||
}
|
||
|
||
const existing = aggregatedData.get(key);
|
||
existing.quota += item.quota;
|
||
existing.count += item.count;
|
||
});
|
||
|
||
return aggregatedData;
|
||
}, [dataExportDefaultTime]);
|
||
|
||
const generateChartTimePoints = useCallback((aggregatedData, data) => {
|
||
let chartTimePoints = Array.from(
|
||
new Set([...aggregatedData.values()].map((d) => d.time)),
|
||
);
|
||
|
||
if (chartTimePoints.length < 7) {
|
||
const lastTime = Math.max(...data.map((item) => item.created_at));
|
||
const interval = getTimeInterval(dataExportDefaultTime, true);
|
||
|
||
chartTimePoints = Array.from({ length: 7 }, (_, i) =>
|
||
timestamp2string1(lastTime - (6 - i) * interval, dataExportDefaultTime),
|
||
);
|
||
}
|
||
|
||
return chartTimePoints;
|
||
}, [dataExportDefaultTime, getTimeInterval]);
|
||
|
||
const updateChartData = useCallback((data) => {
|
||
const processedData = processRawData(data);
|
||
const { totalQuota, totalTimes, totalTokens, uniqueModels, timePoints, timeQuotaMap, timeTokensMap, timeCountMap } = processedData;
|
||
|
||
const trendDataResult = calculateTrendData(timePoints, timeQuotaMap, timeTokensMap, timeCountMap);
|
||
setTrendData(trendDataResult);
|
||
|
||
const newModelColors = generateModelColors(uniqueModels);
|
||
setModelColors(newModelColors);
|
||
|
||
const aggregatedData = aggregateDataByTimeAndModel(data);
|
||
|
||
const modelTotals = new Map();
|
||
for (let [_, value] of aggregatedData) {
|
||
updateMapValue(modelTotals, value.model, value.count);
|
||
}
|
||
|
||
const newPieData = Array.from(modelTotals).map(([model, count]) => ({
|
||
type: model,
|
||
value: count,
|
||
})).sort((a, b) => b.value - a.value);
|
||
|
||
const chartTimePoints = generateChartTimePoints(aggregatedData, data);
|
||
let newLineData = [];
|
||
|
||
chartTimePoints.forEach((time) => {
|
||
let timeData = Array.from(uniqueModels).map((model) => {
|
||
const key = `${time}-${model}`;
|
||
const aggregated = aggregatedData.get(key);
|
||
return {
|
||
Time: time,
|
||
Model: model,
|
||
rawQuota: aggregated?.quota || 0,
|
||
Usage: aggregated?.quota ? getQuotaWithUnit(aggregated.quota, 4) : 0,
|
||
};
|
||
});
|
||
|
||
const timeSum = timeData.reduce((sum, item) => sum + item.rawQuota, 0);
|
||
timeData.sort((a, b) => b.rawQuota - a.rawQuota);
|
||
timeData = timeData.map((item) => ({ ...item, TimeSum: timeSum }));
|
||
newLineData.push(...timeData);
|
||
});
|
||
|
||
newLineData.sort((a, b) => a.Time.localeCompare(b.Time));
|
||
|
||
updateChartSpec(
|
||
setSpecPie,
|
||
newPieData,
|
||
`${t('总计')}：${renderNumber(totalTimes)}`,
|
||
newModelColors,
|
||
'id0'
|
||
);
|
||
|
||
updateChartSpec(
|
||
setSpecLine,
|
||
newLineData,
|
||
`${t('总计')}：${renderQuota(totalQuota, 2)}`,
|
||
newModelColors,
|
||
'barData'
|
||
);
|
||
|
||
setPieData(newPieData);
|
||
setLineData(newLineData);
|
||
setConsumeQuota(totalQuota);
|
||
setTimes(totalTimes);
|
||
setConsumeTokens(totalTokens);
|
||
}, [
|
||
processRawData, calculateTrendData, generateModelColors, aggregateDataByTimeAndModel,
|
||
generateChartTimePoints, updateChartSpec, updateMapValue, t
|
||
]);
|
||
|
||
// ========== Status Data Management ==========
|
||
const announcementLegendData = useMemo(() => [
|
||
{ color: 'grey', label: t('默认'), type: 'default' },
|
||
{ color: 'blue', label: t('进行中'), type: 'ongoing' },
|
||
{ color: 'green', label: t('成功'), type: 'success' },
|
||
{ color: 'orange', label: t('警告'), type: 'warning' },
|
||
{ color: 'red', label: t('异常'), type: 'error' }
|
||
], [t]);
|
||
|
||
const uptimeStatusMap = useMemo(() => ({
|
||
1: { color: '#10b981', label: t('正常'), text: t('可用率') }, // UP
|
||
0: { color: '#ef4444', label: t('异常'), text: t('有异常') }, // DOWN
|
||
2: { color: '#f59e0b', label: t('高延迟'), text: t('高延迟') }, // PENDING
|
||
3: { color: '#3b82f6', label: t('维护中'), text: t('维护中') } // MAINTENANCE
|
||
}), [t]);
|
||
|
||
const uptimeLegendData = useMemo(() =>
|
||
Object.entries(uptimeStatusMap).map(([status, info]) => ({
|
||
status: Number(status),
|
||
color: info.color,
|
||
label: info.label
|
||
})), [uptimeStatusMap]);
|
||
|
||
const getUptimeStatusColor = useCallback((status) =>
|
||
uptimeStatusMap[status]?.color || '#8b9aa7',
|
||
[uptimeStatusMap]);
|
||
|
||
const getUptimeStatusText = useCallback((status) =>
|
||
uptimeStatusMap[status]?.text || t('未知'),
|
||
[uptimeStatusMap, t]);
|
||
|
||
const apiInfoData = useMemo(() => {
|
||
return statusState?.status?.api_info || [];
|
||
}, [statusState?.status?.api_info]);
|
||
|
||
const announcementData = useMemo(() => {
|
||
const announcements = statusState?.status?.announcements || [];
|
||
return announcements.map(item => ({
|
||
...item,
|
||
time: getRelativeTime(item.publishDate)
|
||
}));
|
||
}, [statusState?.status?.announcements]);
|
||
|
||
const faqData = useMemo(() => {
|
||
return statusState?.status?.faq || [];
|
||
}, [statusState?.status?.faq]);
|
||
|
||
const renderMonitorList = useCallback((monitors) => {
|
||
if (!monitors || monitors.length === 0) {
|
||
return (
|
||
<div className="flex justify-center items-center py-4">
|
||
<Empty
|
||
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
|
||
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
|
||
title={t('暂无监控数据')}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const grouped = {};
|
||
monitors.forEach((m) => {
|
||
const g = m.group || '';
|
||
if (!grouped[g]) grouped[g] = [];
|
||
grouped[g].push(m);
|
||
});
|
||
|
||
const renderItem = (monitor, idx) => (
|
||
<div key={idx} className="p-2 hover:bg-white rounded-lg transition-colors">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
className="w-2 h-2 rounded-full flex-shrink-0"
|
||
style={{ backgroundColor: getUptimeStatusColor(monitor.status) }}
|
||
/>
|
||
<span className="text-sm font-medium text-gray-900">{monitor.name}</span>
|
||
</div>
|
||
<span className="text-xs text-gray-500">{((monitor.uptime || 0) * 100).toFixed(2)}%</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs text-gray-500">{getUptimeStatusText(monitor.status)}</span>
|
||
<div className="flex-1">
|
||
<Progress
|
||
percent={(monitor.uptime || 0) * 100}
|
||
showInfo={false}
|
||
aria-label={`${monitor.name} uptime`}
|
||
stroke={getUptimeStatusColor(monitor.status)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return Object.entries(grouped).map(([gname, list]) => (
|
||
<div key={gname || 'default'} className="mb-2">
|
||
{gname && (
|
||
<>
|
||
<div className="text-md font-semibold text-gray-500 px-2 py-1">
|
||
{gname}
|
||
</div>
|
||
<Divider />
|
||
</>
|
||
)}
|
||
{list.map(renderItem)}
|
||
</div>
|
||
));
|
||
}, [t, getUptimeStatusColor, getUptimeStatusText]);
|
||
|
||
// ========== Hooks - Effects ==========
|
||
useEffect(() => {
|
||
getUserData();
|
||
if (!initialized.current) {
|
||
initVChartSemiTheme({
|
||
isWatchingThemeSwitch: true,
|
||
});
|
||
initialized.current = true;
|
||
initChart();
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div className="bg-gray-50 h-full">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-2xl font-semibold text-gray-800">{getGreeting}</h2>
|
||
<div className="flex gap-3">
|
||
<IconButton
|
||
icon={<IconSearch />}
|
||
onClick={showSearchModal}
|
||
className={`bg-green-500 hover:bg-green-600 ${ICON_BUTTON_CLASS}`}
|
||
/>
|
||
<IconButton
|
||
icon={<IconRefresh />}
|
||
onClick={refresh}
|
||
loading={loading}
|
||
className={`bg-blue-500 hover:bg-blue-600 ${ICON_BUTTON_CLASS}`}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜索条件Modal */}
|
||
<Modal
|
||
title={t('搜索条件')}
|
||
visible={searchModalVisible}
|
||
onOk={handleSearchConfirm}
|
||
onCancel={handleCloseModal}
|
||
closeOnEsc={true}
|
||
size={isMobile() ? 'full-width' : 'small'}
|
||
centered
|
||
>
|
||
<Form ref={formRef} layout='vertical' className="w-full">
|
||
{createFormField(Form.DatePicker, {
|
||
field: 'start_timestamp',
|
||
label: t('起始时间'),
|
||
initValue: start_timestamp,
|
||
value: start_timestamp,
|
||
type: 'dateTime',
|
||
name: 'start_timestamp',
|
||
onChange: (value) => handleInputChange(value, 'start_timestamp')
|
||
})}
|
||
|
||
{createFormField(Form.DatePicker, {
|
||
field: 'end_timestamp',
|
||
label: t('结束时间'),
|
||
initValue: end_timestamp,
|
||
value: end_timestamp,
|
||
type: 'dateTime',
|
||
name: 'end_timestamp',
|
||
onChange: (value) => handleInputChange(value, 'end_timestamp')
|
||
})}
|
||
|
||
{createFormField(Form.Select, {
|
||
field: 'data_export_default_time',
|
||
label: t('时间粒度'),
|
||
initValue: dataExportDefaultTime,
|
||
placeholder: t('时间粒度'),
|
||
name: 'data_export_default_time',
|
||
optionList: timeOptions,
|
||
onChange: (value) => handleInputChange(value, 'data_export_default_time')
|
||
})}
|
||
|
||
{isAdminUser && createFormField(Form.Input, {
|
||
field: 'username',
|
||
label: t('用户名称'),
|
||
value: username,
|
||
placeholder: t('可选值'),
|
||
name: 'username',
|
||
onChange: (value) => handleInputChange(value, 'username')
|
||
})}
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Spin spinning={loading}>
|
||
<div className="mb-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{groupedStatsData.map((group, idx) => (
|
||
<Card
|
||
key={idx}
|
||
{...CARD_PROPS}
|
||
className={`${group.color} border-0 !rounded-2xl w-full`}
|
||
title={group.title}
|
||
>
|
||
<div className="space-y-4">
|
||
{group.items.map((item, itemIdx) => (
|
||
<div
|
||
key={itemIdx}
|
||
className="flex items-center justify-between cursor-pointer"
|
||
onClick={item.onClick}
|
||
>
|
||
<div className="flex items-center">
|
||
<Avatar
|
||
className="mr-3"
|
||
size="small"
|
||
color={item.avatarColor}
|
||
>
|
||
{item.icon}
|
||
</Avatar>
|
||
<div>
|
||
<div className="text-xs text-gray-500">{item.title}</div>
|
||
<div className="text-lg font-semibold">{item.value}</div>
|
||
</div>
|
||
</div>
|
||
{item.trendData && item.trendData.length > 0 && (
|
||
<div className="w-24 h-10">
|
||
<VChart
|
||
spec={getTrendSpec(item.trendData, item.trendColor)}
|
||
option={CHART_CONFIG}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<div className={`grid grid-cols-1 gap-4 ${hasApiInfoPanel ? 'lg:grid-cols-4' : ''}`}>
|
||
<Card
|
||
{...CARD_PROPS}
|
||
className={`shadow-sm !rounded-2xl ${hasApiInfoPanel ? 'lg:col-span-3' : ''}`}
|
||
title={
|
||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between w-full gap-3">
|
||
<div className={FLEX_CENTER_GAP2}>
|
||
<PieChart size={16} />
|
||
{t('模型数据分析')}
|
||
</div>
|
||
<Tabs
|
||
type="button"
|
||
preventScroll={true}
|
||
activeKey={activeChartTab}
|
||
onChange={setActiveChartTab}
|
||
>
|
||
<TabPane tab={
|
||
<span>
|
||
<IconHistogram />
|
||
{t('消耗分布')}
|
||
</span>
|
||
} itemKey="1" />
|
||
<TabPane tab={
|
||
<span>
|
||
<IconPieChart2Stroked />
|
||
{t('调用次数分布')}
|
||
</span>
|
||
} itemKey="2" />
|
||
</Tabs>
|
||
</div>
|
||
}
|
||
>
|
||
<div style={{ height: 400 }}>
|
||
{activeChartTab === '1' ? (
|
||
<VChart
|
||
spec={spec_line}
|
||
option={CHART_CONFIG}
|
||
/>
|
||
) : (
|
||
<VChart
|
||
spec={spec_pie}
|
||
option={CHART_CONFIG}
|
||
/>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
|
||
{hasApiInfoPanel && (
|
||
<Card
|
||
{...CARD_PROPS}
|
||
className="bg-gray-50 border-0 !rounded-2xl"
|
||
title={
|
||
<div className={FLEX_CENTER_GAP2}>
|
||
<Server size={16} />
|
||
{t('API信息')}
|
||
</div>
|
||
}
|
||
>
|
||
<div className="card-content-container">
|
||
<div
|
||
ref={apiScrollRef}
|
||
className="space-y-3 max-h-96 overflow-y-auto card-content-scroll"
|
||
onScroll={handleApiScroll}
|
||
>
|
||
{apiInfoData.length > 0 ? (
|
||
apiInfoData.map((api) => (
|
||
<div key={api.id} className="flex p-2 hover:bg-white rounded-lg transition-colors cursor-pointer">
|
||
<div className="flex-shrink-0 mr-3">
|
||
<Avatar
|
||
size="extra-small"
|
||
color={api.color}
|
||
>
|
||
{api.route.substring(0, 2)}
|
||
</Avatar>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-sm font-medium text-gray-900 mb-1 !font-bold flex items-center gap-2">
|
||
<Tag
|
||
prefixIcon={<Gauge size={12} />}
|
||
size="small"
|
||
color="white"
|
||
shape='circle'
|
||
onClick={() => handleSpeedTest(api.url)}
|
||
className="cursor-pointer hover:opacity-80 text-xs"
|
||
>
|
||
{t('测速')}
|
||
</Tag>
|
||
{api.route}
|
||
</div>
|
||
<div
|
||
className="!text-semi-color-primary break-all cursor-pointer hover:underline mb-1"
|
||
onClick={() => handleCopyUrl(api.url)}
|
||
>
|
||
{api.url}
|
||
</div>
|
||
<div className="text-gray-500">
|
||
{api.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="flex justify-center items-center py-8">
|
||
<Empty
|
||
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
|
||
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
|
||
title={t('暂无API信息')}
|
||
description={t('请联系管理员在系统设置中配置API信息')}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div
|
||
className="card-content-fade-indicator"
|
||
style={{ opacity: showApiScrollHint ? 1 : 0 }}
|
||
/>
|
||
</div>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 系统公告和常见问答卡片 */}
|
||
{hasInfoPanels && (
|
||
<div className="mb-4">
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
||
{/* 公告卡片 */}
|
||
{announcementsEnabled && (
|
||
<Card
|
||
{...CARD_PROPS}
|
||
className="shadow-sm !rounded-2xl lg:col-span-2"
|
||
title={
|
||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 w-full">
|
||
<div className="flex items-center gap-2">
|
||
<Bell size={16} />
|
||
{t('系统公告')}
|
||
<Tag size="small" color="grey" shape="circle">
|
||
{t('显示最新20条')}
|
||
</Tag>
|
||
</div>
|
||
{/* 图例 */}
|
||
<div className="flex flex-wrap gap-3 text-xs">
|
||
{announcementLegendData.map((legend, index) => (
|
||
<div key={index} className="flex items-center gap-1">
|
||
<div
|
||
className="w-2 h-2 rounded-full"
|
||
style={{
|
||
backgroundColor: legend.color === 'grey' ? '#8b9aa7' :
|
||
legend.color === 'blue' ? '#3b82f6' :
|
||
legend.color === 'green' ? '#10b981' :
|
||
legend.color === 'orange' ? '#f59e0b' :
|
||
legend.color === 'red' ? '#ef4444' : '#8b9aa7'
|
||
}}
|
||
/>
|
||
<span className="text-gray-600">{legend.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="card-content-container">
|
||
<div
|
||
ref={announcementScrollRef}
|
||
className="p-2 max-h-96 overflow-y-auto card-content-scroll"
|
||
onScroll={() => handleCardScroll(announcementScrollRef, setShowAnnouncementScrollHint)}
|
||
>
|
||
{announcementData.length > 0 ? (
|
||
<Timeline
|
||
mode="alternate"
|
||
dataSource={announcementData}
|
||
/>
|
||
) : (
|
||
<div className="flex justify-center items-center py-8">
|
||
<Empty
|
||
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
|
||
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
|
||
title={t('暂无系统公告')}
|
||
description={t('请联系管理员在系统设置中配置公告信息')}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div
|
||
className="card-content-fade-indicator"
|
||
style={{ opacity: showAnnouncementScrollHint ? 1 : 0 }}
|
||
/>
|
||
</div>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 常见问答卡片 */}
|
||
{faqEnabled && (
|
||
<Card
|
||
{...CARD_PROPS}
|
||
className="shadow-sm !rounded-2xl lg:col-span-1"
|
||
title={
|
||
<div className={FLEX_CENTER_GAP2}>
|
||
<HelpCircle size={16} />
|
||
{t('常见问答')}
|
||
</div>
|
||
}
|
||
bodyStyle={{ padding: 0 }}
|
||
>
|
||
<div className="card-content-container">
|
||
<div
|
||
ref={faqScrollRef}
|
||
className="p-2 max-h-96 overflow-y-auto card-content-scroll"
|
||
onScroll={() => handleCardScroll(faqScrollRef, setShowFaqScrollHint)}
|
||
>
|
||
{faqData.length > 0 ? (
|
||
<Collapse
|
||
accordion
|
||
expandIcon={<IconPlus />}
|
||
collapseIcon={<IconMinus />}
|
||
>
|
||
{faqData.map((item, index) => (
|
||
<Collapse.Panel
|
||
key={index}
|
||
header={item.question}
|
||
itemKey={index.toString()}
|
||
>
|
||
<p>{item.answer}</p>
|
||
</Collapse.Panel>
|
||
))}
|
||
</Collapse>
|
||
) : (
|
||
<div className="flex justify-center items-center py-8">
|
||
<Empty
|
||
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
|
||
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
|
||
title={t('暂无常见问答')}
|
||
description={t('请联系管理员在系统设置中配置常见问答')}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div
|
||
className="card-content-fade-indicator"
|
||
style={{ opacity: showFaqScrollHint ? 1 : 0 }}
|
||
/>
|
||
</div>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 服务可用性卡片 */}
|
||
{uptimeEnabled && (
|
||
<Card
|
||
{...CARD_PROPS}
|
||
className="shadow-sm !rounded-2xl lg:col-span-1 flex flex-col"
|
||
title={
|
||
<div className="flex items-center justify-between w-full gap-2">
|
||
<div className="flex items-center gap-2">
|
||
<Gauge size={16} />
|
||
{t('服务可用性')}
|
||
</div>
|
||
<IconButton
|
||
icon={<IconRefresh />}
|
||
onClick={loadUptimeData}
|
||
loading={uptimeLoading}
|
||
size="small"
|
||
theme="borderless"
|
||
className="text-gray-500 hover:text-blue-500 hover:bg-blue-50 !rounded-full"
|
||
/>
|
||
</div>
|
||
}
|
||
bodyStyle={{ padding: 0 }}
|
||
>
|
||
{/* 内容区域 */}
|
||
<div className="flex-1 relative">
|
||
<Spin spinning={uptimeLoading}>
|
||
{uptimeData.length > 0 ? (
|
||
uptimeData.length === 1 ? (
|
||
<div className="card-content-container">
|
||
<div
|
||
ref={uptimeScrollRef}
|
||
className="p-2 max-h-[24rem] overflow-y-auto card-content-scroll"
|
||
onScroll={() => handleCardScroll(uptimeScrollRef, setShowUptimeScrollHint)}
|
||
>
|
||
{renderMonitorList(uptimeData[0].monitors)}
|
||
</div>
|
||
<div
|
||
className="card-content-fade-indicator"
|
||
style={{ opacity: showUptimeScrollHint ? 1 : 0 }}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<Tabs
|
||
type="card"
|
||
preventScroll={true}
|
||
collapsible
|
||
activeKey={activeUptimeTab}
|
||
onChange={setActiveUptimeTab}
|
||
size="small"
|
||
>
|
||
{uptimeData.map((group, groupIdx) => {
|
||
if (!uptimeTabScrollRefs.current[group.categoryName]) {
|
||
uptimeTabScrollRefs.current[group.categoryName] = React.createRef();
|
||
}
|
||
const tabScrollRef = uptimeTabScrollRefs.current[group.categoryName];
|
||
|
||
return (
|
||
<TabPane
|
||
tab={
|
||
<span className="flex items-center gap-2">
|
||
<Gauge size={14} />
|
||
{group.categoryName}
|
||
<Tag
|
||
color={activeUptimeTab === group.categoryName ? 'red' : 'grey'}
|
||
size='small'
|
||
shape='circle'
|
||
>
|
||
{group.monitors ? group.monitors.length : 0}
|
||
</Tag>
|
||
</span>
|
||
}
|
||
itemKey={group.categoryName}
|
||
key={groupIdx}
|
||
>
|
||
<div className="card-content-container">
|
||
<div
|
||
ref={tabScrollRef}
|
||
className="p-2 max-h-[21.5rem] overflow-y-auto card-content-scroll"
|
||
onScroll={() => handleCardScroll(tabScrollRef, setShowUptimeScrollHint)}
|
||
>
|
||
{renderMonitorList(group.monitors)}
|
||
</div>
|
||
<div
|
||
className="card-content-fade-indicator"
|
||
style={{ opacity: activeUptimeTab === group.categoryName ? showUptimeScrollHint ? 1 : 0 : 0 }}
|
||
/>
|
||
</div>
|
||
</TabPane>
|
||
);
|
||
})}
|
||
</Tabs>
|
||
)
|
||
) : (
|
||
<div className="flex justify-center items-center py-8">
|
||
<Empty
|
||
image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
|
||
darkModeImage={<IllustrationConstructionDark style={ILLUSTRATION_SIZE} />}
|
||
title={t('暂无监控数据')}
|
||
description={t('请联系管理员在系统设置中配置Uptime')}
|
||
/>
|
||
</div>
|
||
)}
|
||
</Spin>
|
||
</div>
|
||
|
||
{/* 固定在底部的图例 */}
|
||
{uptimeData.length > 0 && (
|
||
<div className="p-3 mt-auto bg-gray-50 rounded-b-2xl">
|
||
<div className="flex flex-wrap gap-3 text-xs justify-center">
|
||
{uptimeLegendData.map((legend, index) => (
|
||
<div key={index} className="flex items-center gap-1">
|
||
<div
|
||
className="w-2 h-2 rounded-full"
|
||
style={{ backgroundColor: legend.color }}
|
||
/>
|
||
<span className="text-gray-600">{legend.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Spin>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Detail;
|