Skip to content

phsl / new-api

Go to a project
Commit 4c673d26 by Apple\Apple
Options

✨ feat: major refactor and enhancement of Detail dashboard component & add api url display 

- **Code Organization & Architecture:**
  - Restructured component with clear sections (Hooks, Constants, Helper Functions, etc.)
  - Added comprehensive code organization comments for better maintainability
  - Extracted reusable helper functions and constants for better separation of concerns

- **Performance Optimizations:**
  - Implemented extensive use of useCallback and useMemo hooks for expensive operations
  - Optimized data processing pipeline with dedicated processing functions
  - Memoized chart configurations, performance metrics, and grouped stats data
  - Cached helper functions like getTrendSpec, handleCopyUrl, and modal handlers

- **UI/UX Enhancements:**
  - Added Empty state component with construction illustrations for better UX
  - Implemented responsive grid layout with conditional API info section visibility
  - Enhanced button styling with consistent rounded design and hover effects
  - Added mini trend charts to statistics cards for visual data representation
  - Improved form field consistency with reusable createFormField helper

- **Feature Improvements:**
  - Added self-use mode detection to conditionally hide/show API information section
  - Enhanced chart configurations with centralized CHART_CONFIG constant
  - Improved time handling with dedicated helper functions (getTimeInterval, getInitialTimestamp)
  - Added comprehensive performance metrics calculation (RPM/TPM trends)
  - Implemented advanced data aggregation and processing workflows

- **Code Quality & Maintainability:**
  - Extracted complex data processing logic into dedicated functions
  - Added proper prop destructuring and state organization
  - Implemented consistent naming conventions and helper utilities
  - Enhanced error handling and loading states management
  - Added comprehensive JSDoc-style comments for better code documentation

- **Technical Debt Reduction:**
  - Replaced repetitive form field definitions with reusable components
  - Consolidated chart update logic into centralized updateChartSpec function
  - Improved data flow with better state management patterns
  - Reduced code duplication through strategic use of helper functions

This refactor significantly improves component performance, maintainability, and user experience while maintaining backward compatibility and existing functionality.
parent 03645264
Showing with 1202 additions and 396 deletions
controller/misc.go
...@@ -74,11 +74,33 @@ func GetStatus(c *gin.Context) { ...@@ -74,11 +74,33 @@ func GetStatus(c *gin.Context) {
"oidc_client_id": system_setting.GetOIDCSettings().ClientId, "oidc_client_id": system_setting.GetOIDCSettings().ClientId,
"oidc_authorization_endpoint": system_setting.GetOIDCSettings().AuthorizationEndpoint, "oidc_authorization_endpoint": system_setting.GetOIDCSettings().AuthorizationEndpoint,
"setup": constant.Setup, "setup": constant.Setup,
"api_info": getApiInfo(),
}, },
}) })
return return
} }
func getApiInfo() []map[string]interface{} {
// 从OptionMap中获取API信息，如果不存在则返回空数组
common.OptionMapRWMutex.RLock()
apiInfoStr, exists := common.OptionMap["ApiInfo"]
common.OptionMapRWMutex.RUnlock()
if !exists || apiInfoStr == "" {
// 如果没有配置，返回空数组
return []map[string]interface{}{}
}
// 解析存储的API信息
var apiInfo []map[string]interface{}
if err := json.Unmarshal([]byte(apiInfoStr), &apiInfo); err != nil {
// 如果解析失败，返回空数组
return []map[string]interface{}{}
}
return apiInfo
}
func GetNotice(c *gin.Context) { func GetNotice(c *gin.Context) {
common.OptionMapRWMutex.RLock() common.OptionMapRWMutex.RLock()
defer common.OptionMapRWMutex.RUnlock() defer common.OptionMapRWMutex.RUnlock()
......
controller/option.go
...@@ -2,16 +2,110 @@ package controller ...@@ -2,16 +2,110 @@ package controller
import ( import (
"encoding/json" "encoding/json"
"fmt"
"net/http" "net/http"
"net/url"
"one-api/common" "one-api/common"
"one-api/model" "one-api/model"
"one-api/setting" "one-api/setting"
"one-api/setting/system_setting" "one-api/setting/system_setting"
"regexp"
"strings" "strings"
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
) )
func validateApiInfo(apiInfoStr string) error {
if apiInfoStr == "" {
return nil // 空字符串是合法的
}
var apiInfoList []map[string]interface{}
if err := json.Unmarshal([]byte(apiInfoStr), &apiInfoList); err != nil {
return fmt.Errorf("API信息格式错误：%s", err.Error())
}
// 验证数组长度
if len(apiInfoList) > 50 {
return fmt.Errorf("API信息数量不能超过50个")
}
// 允许的颜色值
validColors := map[string]bool{
"blue": true, "green": true, "cyan": true, "purple": true, "pink": true,
"red": true, "orange": true, "amber": true, "yellow": true, "lime": true,
"light-green": true, "teal": true, "light-blue": true, "indigo": true,
"violet": true, "grey": true,
}
// URL正则表达式
urlRegex := regexp.MustCompile(`^https?://[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*(/.*)?$`)
for i, apiInfo := range apiInfoList {
// 检查必填字段
urlStr, ok := apiInfo["url"].(string)
if !ok || urlStr == "" {
return fmt.Errorf("第%d个API信息缺少URL字段", i+1)
}
route, ok := apiInfo["route"].(string)
if !ok || route == "" {
return fmt.Errorf("第%d个API信息缺少线路描述字段", i+1)
}
description, ok := apiInfo["description"].(string)
if !ok || description == "" {
return fmt.Errorf("第%d个API信息缺少说明字段", i+1)
}
color, ok := apiInfo["color"].(string)
if !ok || color == "" {
return fmt.Errorf("第%d个API信息缺少颜色字段", i+1)
}
// 验证URL格式
if !urlRegex.MatchString(urlStr) {
return fmt.Errorf("第%d个API信息的URL格式不正确", i+1)
}
// 验证URL可解析性
if _, err := url.Parse(urlStr); err != nil {
return fmt.Errorf("第%d个API信息的URL无法解析：%s", i+1, err.Error())
}
// 验证字段长度
if len(urlStr) > 500 {
return fmt.Errorf("第%d个API信息的URL长度不能超过500字符", i+1)
}
if len(route) > 100 {
return fmt.Errorf("第%d个API信息的线路描述长度不能超过100字符", i+1)
}
if len(description) > 200 {
return fmt.Errorf("第%d个API信息的说明长度不能超过200字符", i+1)
}
// 验证颜色值
if !validColors[color] {
return fmt.Errorf("第%d个API信息的颜色值不合法", i+1)
}
// 检查并过滤危险字符（防止XSS）
dangerousChars := []string{"<script", "<iframe", "javascript:", "onload=", "onerror=", "onclick="}
for _, dangerous := range dangerousChars {
if strings.Contains(strings.ToLower(description), dangerous) {
return fmt.Errorf("第%d个API信息的说明包含不允许的内容", i+1)
}
if strings.Contains(strings.ToLower(route), dangerous) {
return fmt.Errorf("第%d个API信息的线路描述包含不允许的内容", i+1)
}
}
}
return nil
}
func GetOptions(c *gin.Context) { func GetOptions(c *gin.Context) {
var options []*model.Option var options []*model.Option
common.OptionMapRWMutex.Lock() common.OptionMapRWMutex.Lock()
...@@ -119,7 +213,15 @@ func UpdateOption(c *gin.Context) { ...@@ -119,7 +213,15 @@ func UpdateOption(c *gin.Context) {
}) })
return return
} }
case "ApiInfo":
err = validateApiInfo(option.Value)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
return
}
} }
err = model.UpdateOption(option.Key, option.Value) err = model.UpdateOption(option.Key, option.Value)
if err != nil { if err != nil {
......
model/option.go
...@@ -122,6 +122,7 @@ func InitOptionMap() { ...@@ -122,6 +122,7 @@ func InitOptionMap() {
common.OptionMap["SensitiveWords"] = setting.SensitiveWordsToString() common.OptionMap["SensitiveWords"] = setting.SensitiveWordsToString()
common.OptionMap["StreamCacheQueueLength"] = strconv.Itoa(setting.StreamCacheQueueLength) common.OptionMap["StreamCacheQueueLength"] = strconv.Itoa(setting.StreamCacheQueueLength)
common.OptionMap["AutomaticDisableKeywords"] = operation_setting.AutomaticDisableKeywordsToString() common.OptionMap["AutomaticDisableKeywords"] = operation_setting.AutomaticDisableKeywordsToString()
common.OptionMap["ApiInfo"] = ""
// 自动添加所有注册的模型配置 // 自动添加所有注册的模型配置
modelConfigs := config.GlobalConfig.ExportAllConfigs() modelConfigs := config.GlobalConfig.ExportAllConfigs()
......
web/src/components/settings/DashboardSetting.js 0 → 100644
import React, { useEffect, useState } from 'react';
import { Card, Spin } from '@douyinfe/semi-ui';
import { API, showError } from '../../helpers';
import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo.js';
const DashboardSetting = () => {
let [inputs, setInputs] = useState({
ApiInfo: '',
});
let [loading, setLoading] = useState(false);
const getOptions = async () => {
const res = await API.get('/api/option/');
const { success, message, data } = res.data;
if (success) {
let newInputs = {};
data.forEach((item) => {
if (item.key in inputs) {
newInputs[item.key] = item.value;
}
});
setInputs(newInputs);
} else {
showError(message);
}
};
async function onRefresh() {
try {
setLoading(true);
await getOptions();
} catch (error) {
showError('刷新失败');
console.error(error);
} finally {
setLoading(false);
}
}
useEffect(() => {
onRefresh();
}, []);
return (
<>
<Spin spinning={loading} size='large'>
{/* API信息管理 */}
<Card style={{ marginTop: '10px' }}>
<SettingsAPIInfo options={inputs} refresh={onRefresh} />
</Card>
</Spin>
</>
);
};
export default DashboardSetting;
\ No newline at end of file
web/src/i18n/locales/en.json
...@@ -1568,5 +1568,22 @@ ...@@ -1568,5 +1568,22 @@
"资源消耗": "Resource Consumption", "资源消耗": "Resource Consumption",
"性能指标": "Performance Indicators", "性能指标": "Performance Indicators",
"模型数据分析": "Model Data Analysis", "模型数据分析": "Model Data Analysis",
"搜索无结果": "No results found" "搜索无结果": "No results found",
"仪表盘配置": "Dashboard Configuration",
"API信息管理，可以配置多个API地址用于状态展示和负载均衡": "API information management, you can configure multiple API addresses for status display and load balancing",
"线路描述": "Route description",
"颜色": "Color",
"标识颜色": "Identifier color",
"添加API": "Add API",
"保存配置": "Save Configuration",
"API信息": "API Information",
"暂无API信息配置": "No API information configured",
"暂无API信息": "No API information",
"请输入API地址": "Please enter the API address",
"请输入线路描述": "Please enter the route description",
"如：大带宽批量分析图片推荐": "e.g. Large bandwidth batch analysis of image recommendations",
"请输入说明": "Please enter the description",
"如：香港线路": "e.g. Hong Kong line",
"请联系管理员在系统设置中配置API信息": "Please contact the administrator to configure API information in the system settings.",
"确定要删除此API信息吗？": "Are you sure you want to delete this API information?"
} }
\ No newline at end of file
web/src/index.css
...@@ -74,6 +74,9 @@ code { ...@@ -74,6 +74,9 @@ code {
.semi-navigation-item, .semi-navigation-item,
.semi-tag-closable, .semi-tag-closable,
.semi-input-wrapper, .semi-input-wrapper,
.semi-tabs-tab-button,
.semi-select,
.semi-button,
.semi-datepicker-range-input { .semi-datepicker-range-input {
border-radius: 9999px !important; border-radius: 9999px !important;
} }
...@@ -323,6 +326,24 @@ code { ...@@ -323,6 +326,24 @@ code {
font-size: 1.1em; font-size: 1.1em;
} }
/* API信息卡片样式 */
.api-info-container {
position: relative;
}
.api-info-fade-indicator {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(transparent, var(--semi-color-bg-1));
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
/* ==================== 调试面板特定样式 ==================== */ /* ==================== 调试面板特定样式 ==================== */
.debug-panel .semi-tabs { .debug-panel .semi-tabs {
height: 100% !important; height: 100% !important;
...@@ -379,6 +400,7 @@ code { ...@@ -379,6 +400,7 @@ code {
} }
/* 隐藏模型设置区域的滚动条 */ /* 隐藏模型设置区域的滚动条 */
.api-info-scroll::-webkit-scrollbar,
.model-settings-scroll::-webkit-scrollbar, .model-settings-scroll::-webkit-scrollbar,
.thinking-content-scroll::-webkit-scrollbar, .thinking-content-scroll::-webkit-scrollbar,
.custom-request-textarea .semi-input::-webkit-scrollbar, .custom-request-textarea .semi-input::-webkit-scrollbar,
...@@ -386,6 +408,7 @@ code { ...@@ -386,6 +408,7 @@ code {
display: none; display: none;
} }
.api-info-scroll,
.model-settings-scroll, .model-settings-scroll,
.thinking-content-scroll, .thinking-content-scroll,
.custom-request-textarea .semi-input, .custom-request-textarea .semi-input,
......
web/src/pages/Detail/index.js
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState, useMemo, useCallback } from 'react';
import { initVChartSemiTheme } from '@visactor/vchart-semi-theme'; import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Wallet, Activity, Zap, Gauge, PieChart } from 'lucide-react'; import { Wallet, Activity, Zap, Gauge, PieChart } from 'lucide-react';
...@@ -10,6 +10,9 @@ import { ...@@ -10,6 +10,9 @@ import {
IconButton, IconButton,
Modal, Modal,
Avatar, Avatar,
Tabs,
TabPane,
Empty,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IconRefresh, IconRefresh,
...@@ -22,7 +25,9 @@ import { ...@@ -22,7 +25,9 @@ import {
IconPulse, IconPulse,
IconStopwatchStroked, IconStopwatchStroked,
IconTypograph, IconTypograph,
IconPieChart2Stroked,
} from '@douyinfe/semi-icons'; } from '@douyinfe/semi-icons';
import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
import { VChart } from '@visactor/react-vchart'; import { VChart } from '@visactor/react-vchart';
import { import {
API, API,
...@@ -35,47 +40,165 @@ import { ...@@ -35,47 +40,165 @@ import {
modelColorMap, modelColorMap,
renderNumber, renderNumber,
renderQuota, renderQuota,
modelToColor modelToColor,
copy,
showSuccess
} from '../../helpers'; } from '../../helpers';
import { UserContext } from '../../context/User/index.js'; import { UserContext } from '../../context/User/index.js';
import { StatusContext } from '../../context/Status/index.js';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const Detail = (props) => { const Detail = (props) => {
// ========== Hooks - Context ==========
const [userState, userDispatch] = useContext(UserContext);
const [statusState, statusDispatch] = useContext(StatusContext);
// ========== Hooks - Navigation & Translation ==========
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
// ========== Hooks - Refs ==========
const formRef = useRef(); 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";
// ========== Constants ==========
let now = new Date(); let now = new Date();
const [userState, userDispatch] = useContext(UserContext); const isAdminUser = isAdmin();
// ========== 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({ const [inputs, setInputs] = useState({
username: '', username: '',
token_name: '', token_name: '',
model_name: '', model_name: '',
start_timestamp: start_timestamp: getInitialTimestamp(),
localStorage.getItem('data_export_default_time') === 'hour'
? timestamp2string(now.getTime() / 1000 - 86400)
: localStorage.getItem('data_export_default_time') === 'week'
? timestamp2string(now.getTime() / 1000 - 86400 * 30)
: timestamp2string(now.getTime() / 1000 - 86400 * 7),
end_timestamp: timestamp2string(now.getTime() / 1000 + 3600), end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
channel: '', channel: '',
data_export_default_time: '', data_export_default_time: '',
}); });
const { username, model_name, start_timestamp, end_timestamp, channel } =
inputs; const [dataExportDefaultTime, setDataExportDefaultTime] = useState(getDefaultTime());
const isAdminUser = isAdmin();
const initialized = useRef(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [quotaData, setQuotaData] = useState([]); const [quotaData, setQuotaData] = useState([]);
const [consumeQuota, setConsumeQuota] = useState(0); const [consumeQuota, setConsumeQuota] = useState(0);
const [consumeTokens, setConsumeTokens] = useState(0); const [consumeTokens, setConsumeTokens] = useState(0);
const [times, setTimes] = useState(0); const [times, setTimes] = useState(0);
const [dataExportDefaultTime, setDataExportDefaultTime] = useState(
localStorage.getItem('data_export_default_time') || 'hour',
);
const [pieData, setPieData] = useState([{ type: 'null', value: '0' }]); const [pieData, setPieData] = useState([{ type: 'null', value: '0' }]);
const [lineData, setLineData] = useState([]); const [lineData, setLineData] = useState([]);
const [apiInfoData, setApiInfoData] = useState([]);
const [modelColors, setModelColors] = useState({});
const [activeChartTab, setActiveChartTab] = useState('1');
const [showApiScrollHint, setShowApiScrollHint] = useState(false);
const [searchModalVisible, setSearchModalVisible] = useState(false); const [searchModalVisible, setSearchModalVisible] = useState(false);
const [trendData, setTrendData] = useState({
balance: [],
usedQuota: [],
requestCount: [],
times: [],
consumeQuota: [],
tokens: [],
rpm: [],
tpm: []
});
// ========== Props Destructuring ==========
const { username, model_name, start_timestamp, end_timestamp, channel } = inputs;
// ========== Chart Specs State ==========
const [spec_pie, setSpecPie] = useState({ const [spec_pie, setSpecPie] = useState({
type: 'pie', type: 'pie',
data: [ data: [
...@@ -132,6 +255,7 @@ const Detail = (props) => { ...@@ -132,6 +255,7 @@ const Detail = (props) => {
specified: modelColorMap, specified: modelColorMap,
}, },
}); });
const [spec_line, setSpecLine] = useState({ const [spec_line, setSpecLine] = useState({
type: 'bar', type: 'bar',
data: [ data: [
...@@ -206,23 +330,35 @@ const Detail = (props) => { ...@@ -206,23 +330,35 @@ const Detail = (props) => {
}, },
}); });
// 添加一个新的状态来存储模型-颜色映射 // ========== Hooks - Memoized Values ==========
const [modelColors, setModelColors] = useState({}); 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 };
const [trendData, setTrendData] = useState({ }, [times, consumeTokens, end_timestamp, start_timestamp]);
balance: [],
usedQuota: [], const getGreeting = useMemo(() => {
requestCount: [], const hours = new Date().getHours();
times: [], let greeting = '';
consumeQuota: [],
tokens: [], if (hours >= 5 && hours < 12) {
rpm: [], greeting = t('早上好');
tpm: [] } else if (hours >= 12 && hours < 14) {
}); greeting = t('中午好');
} else if (hours >= 14 && hours < 18) {
greeting = t('下午好');
} else {
greeting = t('晚上好');
}
// 迷你趋势图配置 const username = userState?.user?.username || '';
const getTrendSpec = (data, color) => ({ return `👋${greeting}，${username}`;
}, [t, userState?.user?.username]);
// ========== Hooks - Callbacks ==========
const getTrendSpec = useCallback((data, color) => ({
type: 'line', type: 'line',
data: [{ id: 'trend', values: data.map((val, idx) => ({ x: idx, y: val })) }], data: [{ id: 'trend', values: data.map((val, idx) => ({ x: idx, y: val })) }],
xField: 'x', xField: 'x',
...@@ -256,33 +392,118 @@ const Detail = (props) => { ...@@ -256,33 +392,118 @@ const Detail = (props) => {
background: { background: {
fill: 'transparent' fill: 'transparent'
} }
}); }), []);
// 显示搜索Modal
const showSearchModal = () => {
setSearchModalVisible(true);
};
// 关闭搜索Modal const groupedStatsData = useMemo(() => [
const handleCloseModal = () => { {
setSearchModalVisible(false); 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
]);
// 搜索Modal确认按钮 const handleCopyUrl = useCallback(async (url) => {
const handleSearchConfirm = () => { if (await copy(url)) {
refresh(); showSuccess(t('复制成功'));
setSearchModalVisible(false); }
}; }, [t]);
const handleInputChange = (value, name) => { const handleInputChange = useCallback((value, name) => {
if (name === 'data_export_default_time') { if (name === 'data_export_default_time') {
setDataExportDefaultTime(value); setDataExportDefaultTime(value);
return; return;
} }
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; }, []);
const loadQuotaData = async () => { const loadQuotaData = useCallback(async () => {
setLoading(true); setLoading(true);
try { try {
let url = ''; let url = '';
...@@ -305,7 +526,6 @@ const Detail = (props) => { ...@@ -305,7 +526,6 @@ const Detail = (props) => {
created_at: now.getTime() / 1000, created_at: now.getTime() / 1000,
}); });
} }
// sort created_at
data.sort((a, b) => a.created_at - b.created_at); data.sort((a, b) => a.created_at - b.created_at);
updateChartData(data); updateChartData(data);
} else { } else {
...@@ -314,72 +534,97 @@ const Detail = (props) => { ...@@ -314,72 +534,97 @@ const Detail = (props) => {
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; }, [start_timestamp, end_timestamp, username, dataExportDefaultTime, isAdminUser]);
const refresh = async () => { const refresh = useCallback(async () => {
await loadQuotaData(); await loadQuotaData();
}; }, [loadQuotaData]);
const handleSearchConfirm = useCallback(() => {
refresh();
setSearchModalVisible(false);
}, [refresh]);
const initChart = async () => { const initChart = useCallback(async () => {
await loadQuotaData(); await loadQuotaData();
}, [loadQuotaData]);
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 updateChartData = (data) => { const handleApiScroll = () => {
let newPieData = []; checkApiScrollable();
let newLineData = []; };
let totalQuota = 0;
let totalTimes = 0; const getUserData = async () => {
let uniqueModels = new Set(); let res = await API.get(`/api/user/self`);
let totalTokens = 0; const { success, message, data } = res.data;
if (success) {
// 趋势数据处理 userDispatch({ type: 'login', payload: data });
let timePoints = []; } else {
let timeQuotaMap = new Map(); showError(message);
let timeTokensMap = new Map(); }
let timeCountMap = new Map(); };
// 收集所有唯一的模型名称和时间点 // ========== 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) => { data.forEach((item) => {
uniqueModels.add(item.model_name); result.uniqueModels.add(item.model_name);
totalTokens += item.token_used; result.totalTokens += item.token_used;
totalQuota += item.quota; result.totalQuota += item.quota;
totalTimes += item.count; result.totalTimes += item.count;
// 记录时间点
const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime); const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime);
if (!timePoints.includes(timeKey)) { if (!result.timePoints.includes(timeKey)) {
timePoints.push(timeKey); result.timePoints.push(timeKey);
} }
// 按时间点累加数据 initializeMaps(timeKey, result.timeQuotaMap, result.timeTokensMap, result.timeCountMap);
if (!timeQuotaMap.has(timeKey)) { updateMapValue(result.timeQuotaMap, timeKey, item.quota);
timeQuotaMap.set(timeKey, 0); updateMapValue(result.timeTokensMap, timeKey, item.token_used);
timeTokensMap.set(timeKey, 0); updateMapValue(result.timeCountMap, timeKey, item.count);
timeCountMap.set(timeKey, 0);
}
timeQuotaMap.set(timeKey, timeQuotaMap.get(timeKey) + item.quota);
timeTokensMap.set(timeKey, timeTokensMap.get(timeKey) + item.token_used);
timeCountMap.set(timeKey, timeCountMap.get(timeKey) + item.count);
}); });
// 确保时间点有序 result.timePoints.sort();
timePoints.sort(); return result;
}, [dataExportDefaultTime, initializeMaps, updateMapValue]);
// 生成趋势数据 const calculateTrendData = useCallback((timePoints, timeQuotaMap, timeTokensMap, timeCountMap) => {
const quotaTrend = timePoints.map(time => timeQuotaMap.get(time) || 0); const quotaTrend = timePoints.map(time => timeQuotaMap.get(time) || 0);
const tokensTrend = timePoints.map(time => timeTokensMap.get(time) || 0); const tokensTrend = timePoints.map(time => timeTokensMap.get(time) || 0);
const countTrend = timePoints.map(time => timeCountMap.get(time) || 0); const countTrend = timePoints.map(time => timeCountMap.get(time) || 0);
// 计算RPM和TPM趋势
const rpmTrend = []; const rpmTrend = [];
const tpmTrend = []; const tpmTrend = [];
if (timePoints.length >= 2) { if (timePoints.length >= 2) {
const interval = dataExportDefaultTime === 'hour' const interval = getTimeInterval(dataExportDefaultTime);
? 60 // 分钟/小时
: dataExportDefaultTime === 'day'
? 1440 // 分钟/天
: 10080; // 分钟/周
for (let i = 0; i < timePoints.length; i++) { for (let i = 0; i < timePoints.length; i++) {
rpmTrend.push(timeCountMap.get(timePoints[i]) / interval); rpmTrend.push(timeCountMap.get(timePoints[i]) / interval);
...@@ -387,23 +632,19 @@ const Detail = (props) => { ...@@ -387,23 +632,19 @@ const Detail = (props) => {
} }
} }
// 更新趋势数据状态 return {
setTrendData({
// 账户数据不在API返回中，保持空数组
balance: [], balance: [],
usedQuota: [], usedQuota: [],
// 使用统计 requestCount: [],
requestCount: [], // 没有总请求次数趋势数据
times: countTrend, times: countTrend,
// 资源消耗
consumeQuota: quotaTrend, consumeQuota: quotaTrend,
tokens: tokensTrend, tokens: tokensTrend,
// 性能指标
rpm: rpmTrend, rpm: rpmTrend,
tpm: tpmTrend tpm: tpmTrend
}); };
}, [dataExportDefaultTime, getTimeInterval]);
// 处理颜色映射 const generateModelColors = useCallback((uniqueModels) => {
const newModelColors = {}; const newModelColors = {};
Array.from(uniqueModels).forEach((modelName) => { Array.from(uniqueModels).forEach((modelName) => {
newModelColors[modelName] = newModelColors[modelName] =
...@@ -411,10 +652,12 @@ const Detail = (props) => { ...@@ -411,10 +652,12 @@ const Detail = (props) => {
modelColors[modelName] || modelColors[modelName] ||
modelToColor(modelName); modelToColor(modelName);
}); });
setModelColors(newModelColors); return newModelColors;
}, [modelColors]);
const aggregateDataByTimeAndModel = useCallback((data) => {
const aggregatedData = new Map();
// 按时间和模型聚合数据
let aggregatedData = new Map();
data.forEach((item) => { data.forEach((item) => {
const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime); const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime);
const modelKey = item.model_name; const modelKey = item.model_name;
...@@ -434,41 +677,58 @@ const Detail = (props) => { ...@@ -434,41 +677,58 @@ const Detail = (props) => {
existing.count += item.count; existing.count += item.count;
}); });
// 处理饼图数据 return aggregatedData;
let modelTotals = new Map(); }, [dataExportDefaultTime]);
for (let [_, value] of aggregatedData) {
if (!modelTotals.has(value.model)) {
modelTotals.set(value.model, 0);
}
modelTotals.set(value.model, modelTotals.get(value.model) + value.count);
}
newPieData = Array.from(modelTotals).map(([model, count]) => ({
type: model,
value: count,
}));
// 生成时间点序列 const generateChartTimePoints = useCallback((aggregatedData, data) => {
let chartTimePoints = Array.from( let chartTimePoints = Array.from(
new Set([...aggregatedData.values()].map((d) => d.time)), new Set([...aggregatedData.values()].map((d) => d.time)),
); );
if (chartTimePoints.length < 7) { if (chartTimePoints.length < 7) {
const lastTime = Math.max(...data.map((item) => item.created_at)); const lastTime = Math.max(...data.map((item) => item.created_at));
const interval = const interval = getTimeInterval(dataExportDefaultTime, true);
dataExportDefaultTime === 'hour'
? 3600
: dataExportDefaultTime === 'day'
? 86400
: 604800;
chartTimePoints = Array.from({ length: 7 }, (_, i) => chartTimePoints = Array.from({ length: 7 }, (_, i) =>
timestamp2string1(lastTime - (6 - i) * interval, dataExportDefaultTime), 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) => { chartTimePoints.forEach((time) => {
// 为每个时间点收集所有模型的数据
let timeData = Array.from(uniqueModels).map((model) => { let timeData = Array.from(uniqueModels).map((model) => {
const key = `${time}-${model}`; const key = `${time}-${model}`;
const aggregated = aggregatedData.get(key); const aggregated = aggregatedData.get(key);
...@@ -480,68 +740,43 @@ const Detail = (props) => { ...@@ -480,68 +740,43 @@ const Detail = (props) => {
}; };
}); });
// 计算该时间点的总计
const timeSum = timeData.reduce((sum, item) => sum + item.rawQuota, 0); const timeSum = timeData.reduce((sum, item) => sum + item.rawQuota, 0);
// 按照 rawQuota 从大到小排序
timeData.sort((a, b) => b.rawQuota - a.rawQuota); timeData.sort((a, b) => b.rawQuota - a.rawQuota);
timeData = timeData.map((item) => ({ ...item, TimeSum: timeSum }));
// 为每个数据点添加该时间的总计
timeData = timeData.map((item) => ({
...item,
TimeSum: timeSum,
}));
// 将排序后的数据添加到 newLineData
newLineData.push(...timeData); newLineData.push(...timeData);
}); });
// 排序
newPieData.sort((a, b) => b.value - a.value);
newLineData.sort((a, b) => a.Time.localeCompare(b.Time)); newLineData.sort((a, b) => a.Time.localeCompare(b.Time));
// 更新图表配置和数据 // 更新图表配置
setSpecPie((prev) => ({ updateChartSpec(
...prev, setSpecPie,
data: [{ id: 'id0', values: newPieData }], newPieData,
title: { `${t('总计')}：${renderNumber(totalTimes)}`,
...prev.title, newModelColors,
subtext: `${t('总计')}：${renderNumber(totalTimes)}`, 'id0'
}, );
color: {
specified: newModelColors,
},
}));
setSpecLine((prev) => ({ updateChartSpec(
...prev, setSpecLine,
data: [{ id: 'barData', values: newLineData }], newLineData,
title: { `${t('总计')}：${renderQuota(totalQuota, 2)}`,
...prev.title, newModelColors,
subtext: `${t('总计')}：${renderQuota(totalQuota, 2)}`, 'barData'
}, );
color: {
specified: newModelColors,
},
}));
// 更新状态
setPieData(newPieData); setPieData(newPieData);
setLineData(newLineData); setLineData(newLineData);
setConsumeQuota(totalQuota); setConsumeQuota(totalQuota);
setTimes(totalTimes); setTimes(totalTimes);
setConsumeTokens(totalTokens); setConsumeTokens(totalTokens);
}; }, [
processRawData, calculateTrendData, generateModelColors, aggregateDataByTimeAndModel,
const getUserData = async () => { generateChartTimePoints, updateChartSpec, updateMapValue, t
let res = await API.get(`/api/user/self`); ]);
const { success, message, data } = res.data;
if (success) {
userDispatch({ type: 'login', payload: data });
} else {
showError(message);
}
};
// ========== Hooks - Effects ==========
useEffect(() => { useEffect(() => {
getUserData(); getUserData();
if (!initialized.current) { if (!initialized.current) {
...@@ -553,160 +788,34 @@ const Detail = (props) => { ...@@ -553,160 +788,34 @@ const Detail = (props) => {
} }
}, []); }, []);
// 数据卡片信息 useEffect(() => {
const groupedStatsData = [ if (statusState?.status?.api_info) {
{ setApiInfoData(statusState.status.api_info);
title: (
<div className="flex items-center gap-2">
<Wallet size={16} />
{t('账户数据')}
</div>
),
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: (
<div className="flex items-center gap-2">
<Activity size={16} />
{t('使用统计')}
</div>
),
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: (
<div className="flex items-center gap-2">
<Zap size={16} />
{t('资源消耗')}
</div>
),
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: (
<div className="flex items-center gap-2">
<Gauge size={16} />
{t('性能指标')}
</div>
),
color: 'bg-indigo-50',
items: [
{
title: t('平均RPM'),
value: (
times /
((Date.parse(end_timestamp) - Date.parse(start_timestamp)) / 60000)
).toFixed(3),
icon: <IconStopwatchStroked size="large" />,
avatarColor: 'indigo',
trendData: trendData.rpm,
trendColor: '#6366f1'
},
{
title: t('平均TPM'),
value: (() => {
const tpm = consumeTokens /
((Date.parse(end_timestamp) - Date.parse(start_timestamp)) / 60000);
return isNaN(tpm) ? '0' : tpm.toFixed(3);
})(),
icon: <IconTypograph size="large" />,
avatarColor: 'orange',
trendData: trendData.tpm,
trendColor: '#f97316'
}
]
}
];
// 获取问候语
const getGreeting = () => {
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('晚上好');
} }
}, [statusState?.status?.api_info]);
const username = userState?.user?.username || ''; useEffect(() => {
return `👋${greeting}，${username}`; const timer = setTimeout(() => {
}; checkApiScrollable();
}, 100);
return () => clearTimeout(timer);
}, []);
return ( return (
<div className="bg-gray-50 h-full"> <div className="bg-gray-50 h-full">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-semibold text-gray-800">{getGreeting()}</h2> <h2 className="text-2xl font-semibold text-gray-800">{getGreeting}</h2>
<div className="flex gap-3"> <div className="flex gap-3">
<IconButton <IconButton
icon={<IconSearch />} icon={<IconSearch />}
onClick={showSearchModal} onClick={showSearchModal}
className="bg-green-500 text-white hover:bg-green-600 !rounded-full" className={`bg-green-500 hover:bg-green-600 ${ICON_BUTTON_CLASS}`}
/> />
<IconButton <IconButton
icon={<IconRefresh />} icon={<IconRefresh />}
onClick={refresh} onClick={refresh}
loading={loading} loading={loading}
className="bg-blue-500 text-white hover:bg-blue-600 !rounded-full" className={`bg-blue-500 hover:bg-blue-600 ${ICON_BUTTON_CLASS}`}
/> />
</div> </div>
</div> </div>
...@@ -722,55 +831,44 @@ const Detail = (props) => { ...@@ -722,55 +831,44 @@ const Detail = (props) => {
centered centered
> >
<Form ref={formRef} layout='vertical' className="w-full"> <Form ref={formRef} layout='vertical' className="w-full">
<Form.DatePicker {createFormField(Form.DatePicker, {
field='start_timestamp' field: 'start_timestamp',
label={t('起始时间')} label: t('起始时间'),
className="w-full mb-2 !rounded-lg" initValue: start_timestamp,
initValue={start_timestamp} value: start_timestamp,
value={start_timestamp} type: 'dateTime',
type='dateTime' name: 'start_timestamp',
name='start_timestamp' onChange: (value) => handleInputChange(value, 'start_timestamp')
size='large' })}
onChange={(value) => handleInputChange(value, 'start_timestamp')}
/> {createFormField(Form.DatePicker, {
<Form.DatePicker field: 'end_timestamp',
field='end_timestamp' label: t('结束时间'),
label={t('结束时间')} initValue: end_timestamp,
className="w-full mb-2 !rounded-lg" value: end_timestamp,
initValue={end_timestamp} type: 'dateTime',
value={end_timestamp} name: 'end_timestamp',
type='dateTime' onChange: (value) => handleInputChange(value, 'end_timestamp')
name='end_timestamp' })}
size='large'
onChange={(value) => handleInputChange(value, 'end_timestamp')} {createFormField(Form.Select, {
/> field: 'data_export_default_time',
<Form.Select label: t('时间粒度'),
field='data_export_default_time' initValue: dataExportDefaultTime,
label={t('时间粒度')} placeholder: t('时间粒度'),
className="w-full mb-2 !rounded-lg" name: 'data_export_default_time',
initValue={dataExportDefaultTime} optionList: timeOptions,
placeholder={t('时间粒度')} onChange: (value) => handleInputChange(value, 'data_export_default_time')
name='data_export_default_time' })}
size='large'
optionList={[ {isAdminUser && createFormField(Form.Input, {
{ label: t('小时'), value: 'hour' }, field: 'username',
{ label: t('天'), value: 'day' }, label: t('用户名称'),
{ label: t('周'), value: 'week' }, value: username,
]} placeholder: t('可选值'),
onChange={(value) => handleInputChange(value, 'data_export_default_time')} name: 'username',
/> onChange: (value) => handleInputChange(value, 'username')
{isAdminUser && ( })}
<Form.Input
field='username'
label={t('用户名称')}
className="w-full mb-2 !rounded-lg"
value={username}
placeholder={t('可选值')}
name='username'
size='large'
onChange={(value) => handleInputChange(value, 'username')}
/>
)}
</Form> </Form>
</Modal> </Modal>
...@@ -780,10 +878,8 @@ const Detail = (props) => { ...@@ -780,10 +878,8 @@ const Detail = (props) => {
{groupedStatsData.map((group, idx) => ( {groupedStatsData.map((group, idx) => (
<Card <Card
key={idx} key={idx}
shadows='always' {...CARD_PROPS}
bordered={false}
className={`${group.color} border-0 !rounded-2xl w-full`} className={`${group.color} border-0 !rounded-2xl w-full`}
headerLine={true}
title={group.title} title={group.title}
> >
<div className="space-y-4"> <div className="space-y-4">
...@@ -810,7 +906,7 @@ const Detail = (props) => { ...@@ -810,7 +906,7 @@ const Detail = (props) => {
<div className="w-24 h-10"> <div className="w-24 h-10">
<VChart <VChart
spec={getTrendSpec(item.trendData, item.trendColor)} spec={getTrendSpec(item.trendData, item.trendColor)}
option={{ mode: 'desktop-browser' }} option={CHART_CONFIG}
/> />
</div> </div>
)} )}
...@@ -822,34 +918,115 @@ const Detail = (props) => { ...@@ -822,34 +918,115 @@ const Detail = (props) => {
</div> </div>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-1 gap-6 mb-6"> <div className="mb-4">
<Card <div className={`grid grid-cols-1 gap-4 ${!statusState?.status?.self_use_mode_enabled ? 'lg:grid-cols-4' : ''}`}>
shadows='always' <Card
bordered={false} {...CARD_PROPS}
className="shadow-sm !rounded-2xl" className={`shadow-sm !rounded-2xl ${!statusState?.status?.self_use_mode_enabled ? 'lg:col-span-3' : ''}`}
headerLine={true} title={
title={ <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between w-full gap-3">
<div className="flex items-center gap-2"> <div className={FLEX_CENTER_GAP2}>
<PieChart size={16} /> <PieChart size={16} />
{t('模型数据分析')} {t('模型数据分析')}
</div> </div>
} <Tabs
> type="button"
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6"> activeKey={activeChartTab}
<div style={{ height: 400 }}> onChange={setActiveChartTab}
<VChart >
spec={spec_line} <TabPane tab={
option={{ mode: 'desktop-browser' }} <span>
/> <IconHistogram />
</div> {t('消耗分布')}
</span>
} itemKey="1" />
<TabPane tab={
<span>
<IconPieChart2Stroked />
{t('调用次数分布')}
</span>
} itemKey="2" />
</Tabs>
</div>
}
>
<div style={{ height: 400 }}> <div style={{ height: 400 }}>
<VChart {activeChartTab === '1' ? (
spec={spec_pie} <VChart
option={{ mode: 'desktop-browser' }} spec={spec_line}
/> option={CHART_CONFIG}
/>
) : (
<VChart
spec={spec_pie}
option={CHART_CONFIG}
/>
)}
</div> </div>
</div> </Card>
</Card>
{!statusState?.status?.self_use_mode_enabled && (
<Card
{...CARD_PROPS}
className="bg-gray-50 border-0 !rounded-2xl"
title={
<div className={FLEX_CENTER_GAP2}>
<IconSearch size={16} />
{t('API信息')}
</div>
}
>
<div className="api-info-container">
<div
ref={apiScrollRef}
className="space-y-3 max-h-96 overflow-y-auto api-info-scroll"
onScroll={handleApiScroll}
>
{apiInfoData.length > 0 ? (
apiInfoData.map((api) => (
<div key={api.id} className="flex items-center justify-between p-2 hover:bg-white rounded-lg transition-colors cursor-pointer">
<div className="flex-1">
<div className="flex items-center gap-2 text-sm font-medium text-gray-900 mb-1">
<Avatar
size="extra-extra-small"
color={api.color}
>
{api.route.substring(0, 2)}
</Avatar>
{api.route}
</div>
<div
className="text-xs !text-semi-color-primary font-mono break-all cursor-pointer hover:underline"
onClick={() => handleCopyUrl(api.url)}
>
{api.url}
</div>
<div className="text-xs text-gray-500 mt-1">
{api.description}
</div>
</div>
</div>
))
) : (
<div className="flex justify-center items-center py-8">
<Empty
image={<IllustrationConstruction style={{ width: 80, height: 80 }} />}
darkModeImage={<IllustrationConstructionDark style={{ width: 80, height: 80 }} />}
title={t('暂无API信息配置')}
description={t('请联系管理员在系统设置中配置API信息')}
style={{ padding: '12px' }}
/>
</div>
)}
</div>
<div
className="api-info-fade-indicator"
style={{ opacity: showApiScrollHint ? 1 : 0 }}
/>
</div>
</Card>
)}
</div>
</div> </div>
</Spin> </Spin>
</div> </div>
......
web/src/pages/Setting/Dashboard/SettingsAPIInfo.js 0 → 100644
import React, { useEffect, useState } from 'react';
import {
Button,
Space,
Table,
Form,
Typography,
Empty,
Divider,
Avatar,
Modal,
Tag
} from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
Plus,
Edit,
Trash2,
Save,
Settings
} from 'lucide-react';
import { API, showError, showSuccess } from '../../../helpers';
import { useTranslation } from 'react-i18next';
const { Text } = Typography;
const SettingsAPIInfo = ({ options, refresh }) => {
const { t } = useTranslation();
const [apiInfoList, setApiInfoList] = useState([]);
const [showApiModal, setShowApiModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deletingApi, setDeletingApi] = useState(null);
const [editingApi, setEditingApi] = useState(null);
const [modalLoading, setModalLoading] = useState(false);
const [loading, setLoading] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
const [apiForm, setApiForm] = useState({
url: '',
description: '',
route: '',
color: 'blue'
});
const colorOptions = [
{ value: 'blue', label: 'blue' },
{ value: 'green', label: 'green' },
{ value: 'cyan', label: 'cyan' },
{ value: 'purple', label: 'purple' },
{ value: 'pink', label: 'pink' },
{ value: 'red', label: 'red' },
{ value: 'orange', label: 'orange' },
{ value: 'amber', label: 'amber' },
{ value: 'yellow', label: 'yellow' },
{ value: 'lime', label: 'lime' },
{ value: 'light-green', label: 'light-green' },
{ value: 'teal', label: 'teal' },
{ value: 'light-blue', label: 'light-blue' },
{ value: 'indigo', label: 'indigo' },
{ value: 'violet', label: 'violet' },
{ value: 'grey', label: 'grey' }
];
const updateOption = async (key, value) => {
const res = await API.put('/api/option/', {
key,
value,
});
const { success, message } = res.data;
if (success) {
showSuccess('API信息已更新');
if (refresh) refresh();
} else {
showError(message);
}
};
const submitApiInfo = async () => {
try {
setLoading(true);
const apiInfoJson = JSON.stringify(apiInfoList);
await updateOption('ApiInfo', apiInfoJson);
setHasChanges(false);
} catch (error) {
console.error('API信息更新失败', error);
showError('API信息更新失败');
} finally {
setLoading(false);
}
};
const handleAddApi = () => {
setEditingApi(null);
setApiForm({
url: '',
description: '',
route: '',
color: 'blue'
});
setShowApiModal(true);
};
const handleEditApi = (api) => {
setEditingApi(api);
setApiForm({
url: api.url,
description: api.description,
route: api.route,
color: api.color
});
setShowApiModal(true);
};
const handleDeleteApi = (api) => {
setDeletingApi(api);
setShowDeleteModal(true);
};
const confirmDeleteApi = () => {
if (deletingApi) {
const newList = apiInfoList.filter(api => api.id !== deletingApi.id);
setApiInfoList(newList);
setHasChanges(true);
showSuccess('API信息已删除，请及时点击“保存配置”进行保存');
}
setShowDeleteModal(false);
setDeletingApi(null);
};
const handleSaveApi = async () => {
if (!apiForm.url || !apiForm.route || !apiForm.description) {
showError('请填写完整的API信息');
return;
}
try {
setModalLoading(true);
let newList;
if (editingApi) {
newList = apiInfoList.map(api =>
api.id === editingApi.id
? { ...api, ...apiForm }
: api
);
} else {
const newId = Math.max(...apiInfoList.map(api => api.id), 0) + 1;
const newApi = {
id: newId,
...apiForm
};
newList = [...apiInfoList, newApi];
}
setApiInfoList(newList);
setHasChanges(true);
setShowApiModal(false);
showSuccess(editingApi ? 'API信息已更新，请及时点击“保存配置”进行保存' : 'API信息已添加，请及时点击“保存配置”进行保存');
} catch (error) {
showError('操作失败: ' + error.message);
} finally {
setModalLoading(false);
}
};
const parseApiInfo = (apiInfoStr) => {
if (!apiInfoStr) {
setApiInfoList([]);
return;
}
try {
const parsed = JSON.parse(apiInfoStr);
setApiInfoList(Array.isArray(parsed) ? parsed : []);
} catch (error) {
console.error('解析API信息失败:', error);
setApiInfoList([]);
}
};
useEffect(() => {
if (options.ApiInfo !== undefined) {
parseApiInfo(options.ApiInfo);
}
}, [options.ApiInfo]);
const columns = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: t('API地址'),
dataIndex: 'url',
render: (text, record) => (
<Tag
color={record.color}
className="!rounded-full"
style={{ maxWidth: '280px' }}
>
{text}
</Tag>
),
},
{
title: t('线路描述'),
dataIndex: 'route',
render: (text, record) => (
<Tag shape='circle'>
{text}
</Tag>
),
},
{
title: t('说明'),
dataIndex: 'description',
ellipsis: true,
render: (text, record) => (
<Tag shape='circle'>
{text || '-'}
</Tag>
),
},
{
title: t('颜色'),
dataIndex: 'color',
render: (color) => (
<Avatar
size="extra-extra-small"
color={color}
/>
),
},
{
title: t('操作'),
fixed: 'right',
render: (_, record) => (
<Space>
<Button
icon={<Edit size={14} />}
theme='light'
type='tertiary'
size='small'
className="!rounded-full"
onClick={() => handleEditApi(record)}
>
{t('编辑')}
</Button>
<Button
icon={<Trash2 size={14} />}
type='danger'
theme='light'
size='small'
className="!rounded-full"
onClick={() => handleDeleteApi(record)}
>
{t('删除')}
</Button>
</Space>
),
},
];
const renderHeader = () => (
<div className="flex flex-col w-full">
<div className="mb-2">
<div className="flex items-center text-blue-500">
<Settings size={16} className="mr-2" />
<Text>{t('API信息管理，可以配置多个API地址用于状态展示和负载均衡')}</Text>
</div>
</div>
<Divider margin="12px" />
<div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
<div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
<Button
theme='light'
type='primary'
icon={<Plus size={14} />}
className="!rounded-full w-full md:w-auto"
onClick={handleAddApi}
>
{t('添加API')}
</Button>
<Button
icon={<Save size={14} />}
onClick={submitApiInfo}
loading={loading}
disabled={!hasChanges}
type='secondary'
className="!rounded-full w-full md:w-auto"
>
{t('保存配置')}
</Button>
</div>
</div>
</div>
);
return (
<>
<Form.Section text={renderHeader()}>
<Table
columns={columns}
dataSource={apiInfoList}
scroll={{ x: 'max-content' }}
pagination={false}
size='middle'
loading={loading}
empty={
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
description={t('暂无API信息')}
style={{ padding: 30 }}
/>
}
className="rounded-xl overflow-hidden"
/>
</Form.Section>
<Modal
title={editingApi ? t('编辑API') : t('添加API')}
visible={showApiModal}
onOk={handleSaveApi}
onCancel={() => setShowApiModal(false)}
okText={t('保存')}
cancelText={t('取消')}
className="rounded-xl"
confirmLoading={modalLoading}
>
<Form layout='vertical' initValues={apiForm} key={editingApi ? editingApi.id : 'new'}>
<Form.Input
field='url'
label={t('API地址')}
placeholder='https://api.example.com'
rules={[{ required: true, message: t('请输入API地址') }]}
onChange={(value) => setApiForm({ ...apiForm, url: value })}
/>
<Form.Input
field='route'
label={t('线路描述')}
placeholder={t('如：香港线路')}
rules={[{ required: true, message: t('请输入线路描述') }]}
onChange={(value) => setApiForm({ ...apiForm, route: value })}
/>
<Form.Input
field='description'
label={t('说明')}
placeholder={t('如：大带宽批量分析图片推荐')}
rules={[{ required: true, message: t('请输入说明') }]}
onChange={(value) => setApiForm({ ...apiForm, description: value })}
/>
<Form.Select
field='color'
label={t('标识颜色')}
optionList={colorOptions}
onChange={(value) => setApiForm({ ...apiForm, color: value })}
render={(option) => (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Avatar
size="extra-extra-small"
color={option.value}
/>
{option.label}
</div>
)}
/>
</Form>
</Modal>
<Modal
title={t('确认删除')}
visible={showDeleteModal}
onOk={confirmDeleteApi}
onCancel={() => {
setShowDeleteModal(false);
setDeletingApi(null);
}}
okText={t('确认删除')}
cancelText={t('取消')}
type="warning"
className="rounded-xl"
okButtonProps={{
type: 'danger',
theme: 'solid'
}}
>
<Text>{t('确定要删除此API信息吗？')}</Text>
</Modal>
</>
);
};
export default SettingsAPIInfo;
\ No newline at end of file
web/src/pages/Setting/index.js
...@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next'; ...@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next';
import SystemSetting from '../../components/settings/SystemSetting.js'; import SystemSetting from '../../components/settings/SystemSetting.js';
import { isRoot } from '../../helpers'; import { isRoot } from '../../helpers';
import OtherSetting from '../../components/settings/OtherSetting'; import OtherSetting from '../../components/settings/OtherSetting';
import PersonalSetting from '../../components/settings/PersonalSetting.js';
import OperationSetting from '../../components/settings/OperationSetting.js'; import OperationSetting from '../../components/settings/OperationSetting.js';
import RateLimitSetting from '../../components/settings/RateLimitSetting.js'; import RateLimitSetting from '../../components/settings/RateLimitSetting.js';
import ModelSetting from '../../components/settings/ModelSetting.js'; import ModelSetting from '../../components/settings/ModelSetting.js';
import DashboardSetting from '../../components/settings/DashboardSetting.js';
const Setting = () => { const Setting = () => {
const { t } = useTranslation(); const { t } = useTranslation();
...@@ -44,6 +44,11 @@ const Setting = () => { ...@@ -44,6 +44,11 @@ const Setting = () => {
content: <OtherSetting />, content: <OtherSetting />,
itemKey: 'other', itemKey: 'other',
}); });
panes.push({
tab: t('仪表盘配置'),
content: <DashboardSetting />,
itemKey: 'dashboard',
});
} }
const onChangeTab = (key) => { const onChangeTab = (key) => {
setTabActiveKey(key); setTabActiveKey(key);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment