-
{t('选择支付方式')}：
+
+ {t('选择支付方式')}：
+
{/* Stripe / Creem */}
{(hasStripe || hasCreem) && (
diff --git a/web/src/helpers/api.js b/web/src/helpers/api.js
index 6e09bf43c..666d6b7b0 100644
--- a/web/src/helpers/api.js
+++ b/web/src/helpers/api.js
@@ -236,9 +236,7 @@ async function prepareOAuthState(options = {}) {
if (shouldLogout) {
try {
await API.get('/api/user/logout', { skipErrorHandler: true });
- } catch (err) {
-
- }
+ } catch (err) {}
localStorage.removeItem('user');
updateAPI();
}
diff --git a/web/src/helpers/dashboard.jsx b/web/src/helpers/dashboard.jsx
index 8df375f11..d93d04619 100644
--- a/web/src/helpers/dashboard.jsx
+++ b/web/src/helpers/dashboard.jsx
@@ -261,7 +261,7 @@ export const processRawData = (
};
// 检查数据是否跨年
- const showYear = isDataCrossYear(data.map(item => item.created_at));
+ const showYear = isDataCrossYear(data.map((item) => item.created_at));
data.forEach((item) => {
result.uniqueModels.add(item.model_name);
@@ -269,7 +269,11 @@ export const processRawData = (
result.totalQuota += item.quota;
result.totalTimes += item.count;
- const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime, showYear);
+ const timeKey = timestamp2string1(
+ item.created_at,
+ dataExportDefaultTime,
+ showYear,
+ );
if (!result.timePoints.includes(timeKey)) {
result.timePoints.push(timeKey);
}
@@ -328,10 +332,14 @@ export const aggregateDataByTimeAndModel = (data, dataExportDefaultTime) => {
const aggregatedData = new Map();
// 检查数据是否跨年
- const showYear = isDataCrossYear(data.map(item => item.created_at));
+ const showYear = isDataCrossYear(data.map((item) => item.created_at));
data.forEach((item) => {
- const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime, showYear);
+ const timeKey = timestamp2string1(
+ item.created_at,
+ dataExportDefaultTime,
+ showYear,
+ );
const modelKey = item.model_name;
const key = `${timeKey}-${modelKey}`;
@@ -372,7 +380,7 @@ export const generateChartTimePoints = (
);
const showYear = isDataCrossYear(generatedTimestamps);
- chartTimePoints = generatedTimestamps.map(ts =>
+ chartTimePoints = generatedTimestamps.map((ts) =>
timestamp2string1(ts, dataExportDefaultTime, showYear),
);
}
diff --git a/web/src/helpers/render.jsx b/web/src/helpers/render.jsx
index d3a7350a9..5c58ff0e4 100644
--- a/web/src/helpers/render.jsx
+++ b/web/src/helpers/render.jsx
@@ -170,21 +170,21 @@ export const getModelCategories = (() => {
gemini: {
label: 'Gemini',
icon:
,
- filter: (model) =>
- model.model_name.toLowerCase().includes('gemini') ||
+ filter: (model) =>
+ model.model_name.toLowerCase().includes('gemini') ||
model.model_name.toLowerCase().includes('gemma') ||
- model.model_name.toLowerCase().includes('learnlm') ||
+ model.model_name.toLowerCase().includes('learnlm') ||
model.model_name.toLowerCase().startsWith('embedding-') ||
model.model_name.toLowerCase().includes('text-embedding-004') ||
- model.model_name.toLowerCase().includes('imagen-4') ||
- model.model_name.toLowerCase().includes('veo-') ||
- model.model_name.toLowerCase().includes('aqa') ,
+ model.model_name.toLowerCase().includes('imagen-4') ||
+ model.model_name.toLowerCase().includes('veo-') ||
+ model.model_name.toLowerCase().includes('aqa'),
},
moonshot: {
label: 'Moonshot',
icon:
,
- filter: (model) =>
- model.model_name.toLowerCase().includes('moonshot') ||
+ filter: (model) =>
+ model.model_name.toLowerCase().includes('moonshot') ||
model.model_name.toLowerCase().includes('kimi'),
},
zhipu: {
@@ -192,8 +192,8 @@ export const getModelCategories = (() => {
icon:
,
filter: (model) =>
model.model_name.toLowerCase().includes('chatglm') ||
- model.model_name.toLowerCase().includes('glm-') ||
- model.model_name.toLowerCase().includes('cogview') ||
+ model.model_name.toLowerCase().includes('glm-') ||
+ model.model_name.toLowerCase().includes('cogview') ||
model.model_name.toLowerCase().includes('cogvideo'),
},
qwen: {
@@ -209,8 +209,8 @@ export const getModelCategories = (() => {
minimax: {
label: 'MiniMax',
icon:
,
- filter: (model) =>
- model.model_name.toLowerCase().includes('abab') ||
+ filter: (model) =>
+ model.model_name.toLowerCase().includes('abab') ||
model.model_name.toLowerCase().includes('minimax'),
},
baidu: {
@@ -236,7 +236,7 @@ export const getModelCategories = (() => {
cohere: {
label: 'Cohere',
icon:
,
- filter: (model) =>
+ filter: (model) =>
model.model_name.toLowerCase().includes('command') ||
model.model_name.toLowerCase().includes('c4ai-') ||
model.model_name.toLowerCase().includes('embed-'),
@@ -259,7 +259,7 @@ export const getModelCategories = (() => {
mistral: {
label: 'Mistral AI',
icon:
,
- filter: (model) =>
+ filter: (model) =>
model.model_name.toLowerCase().includes('mistral') ||
model.model_name.toLowerCase().includes('codestral') ||
model.model_name.toLowerCase().includes('pixtral') ||
diff --git a/web/src/helpers/statusCodeRules.js b/web/src/helpers/statusCodeRules.js
index a0d5e75f9..5e681e8b8 100644
--- a/web/src/helpers/statusCodeRules.js
+++ b/web/src/helpers/statusCodeRules.js
@@ -35,7 +35,9 @@ export function parseHttpStatusCodeRules(input) {
}
const merged = mergeRanges(ranges);
- const tokens = merged.map((r) => (r.start === r.end ? `${r.start}` : `${r.start}-${r.end}`));
+ const tokens = merged.map((r) =>
+ r.start === r.end ? `${r.start}` : `${r.start}-${r.end}`,
+ );
const normalized = tokens.join(',');
return {
@@ -78,7 +80,9 @@ function isNumber(s) {
function mergeRanges(ranges) {
if (!Array.isArray(ranges) || ranges.length === 0) return [];
- const sorted = [...ranges].sort((a, b) => (a.start !== b.start ? a.start - b.start : a.end - b.end));
+ const sorted = [...ranges].sort((a, b) =>
+ a.start !== b.start ? a.start - b.start : a.end - b.end,
+ );
const merged = [sorted[0]];
for (let i = 1; i < sorted.length; i += 1) {
diff --git a/web/src/helpers/utils.jsx b/web/src/helpers/utils.jsx
index a54676e47..5ce83e678 100644
--- a/web/src/helpers/utils.jsx
+++ b/web/src/helpers/utils.jsx
@@ -217,7 +217,11 @@ export function timestamp2string(timestamp) {
);
}
-export function timestamp2string1(timestamp, dataExportDefaultTime = 'hour', showYear = false) {
+export function timestamp2string1(
+ timestamp,
+ dataExportDefaultTime = 'hour',
+ showYear = false,
+) {
let date = new Date(timestamp * 1000);
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString();
@@ -248,7 +252,9 @@ export function timestamp2string1(timestamp, dataExportDefaultTime = 'hour', sho
nextDay = '0' + nextDay;
}
// 周视图结束日期也仅在跨年时显示年份
- let nextStr = showYear ? nextWeekYear + '-' + nextMonth + '-' + nextDay : nextMonth + '-' + nextDay;
+ let nextStr = showYear
+ ? nextWeekYear + '-' + nextMonth + '-' + nextDay
+ : nextMonth + '-' + nextDay;
str += ' - ' + nextStr;
}
return str;
@@ -257,7 +263,9 @@ export function timestamp2string1(timestamp, dataExportDefaultTime = 'hour', sho
// 检查时间戳数组是否跨年
export function isDataCrossYear(timestamps) {
if (!timestamps || timestamps.length === 0) return false;
- const years = new Set(timestamps.map(ts => new Date(ts * 1000).getFullYear()));
+ const years = new Set(
+ timestamps.map((ts) => new Date(ts * 1000).getFullYear()),
+ );
return years.size > 1;
}
diff --git a/web/src/hooks/model-deployments/useModelDeploymentSettings.js b/web/src/hooks/model-deployments/useModelDeploymentSettings.js
index c53fe55b8..e3578006b 100644
--- a/web/src/hooks/model-deployments/useModelDeploymentSettings.js
+++ b/web/src/hooks/model-deployments/useModelDeploymentSettings.js
@@ -55,13 +55,20 @@ export const useModelDeploymentSettings = () => {
const isIoNetEnabled = settings['model_deployment.ionet.enabled'];
- const buildConnectionError = (rawMessage, fallbackMessage = 'Connection failed') => {
+ const buildConnectionError = (
+ rawMessage,
+ fallbackMessage = 'Connection failed',
+ ) => {
const message = (rawMessage || fallbackMessage).trim();
const normalized = message.toLowerCase();
if (normalized.includes('expired') || normalized.includes('expire')) {
return { type: 'expired', message };
}
- if (normalized.includes('invalid') || normalized.includes('unauthorized') || normalized.includes('api key')) {
+ if (
+ normalized.includes('invalid') ||
+ normalized.includes('unauthorized') ||
+ normalized.includes('api key')
+ ) {
return { type: 'invalid', message };
}
if (normalized.includes('network') || normalized.includes('timeout')) {
@@ -85,7 +92,11 @@ export const useModelDeploymentSettings = () => {
}
const message = response?.data?.message || 'Connection failed';
- setConnectionState({ loading: false, ok: false, error: buildConnectionError(message) });
+ setConnectionState({
+ loading: false,
+ ok: false,
+ error: buildConnectionError(message),
+ });
} catch (error) {
if (error?.code === 'ERR_NETWORK') {
setConnectionState({
@@ -95,8 +106,13 @@ export const useModelDeploymentSettings = () => {
});
return;
}
- const rawMessage = error?.response?.data?.message || error?.message || 'Unknown error';
- setConnectionState({ loading: false, ok: false, error: buildConnectionError(rawMessage, 'Connection failed') });
+ const rawMessage =
+ error?.response?.data?.message || error?.message || 'Unknown error';
+ setConnectionState({
+ loading: false,
+ ok: false,
+ error: buildConnectionError(rawMessage, 'Connection failed'),
+ });
}
}, []);
diff --git a/web/src/hooks/playground/useApiRequest.jsx b/web/src/hooks/playground/useApiRequest.jsx
index 12db9f5ca..8ec50cf45 100644
--- a/web/src/hooks/playground/useApiRequest.jsx
+++ b/web/src/hooks/playground/useApiRequest.jsx
@@ -231,7 +231,10 @@ export const useApiRequest = (
if (data.choices?.[0]) {
const choice = data.choices[0];
let content = choice.message?.content || '';
- let reasoningContent = choice.message?.reasoning_content || choice.message?.reasoning || '';
+ let reasoningContent =
+ choice.message?.reasoning_content ||
+ choice.message?.reasoning ||
+ '';
const processed = processThinkTags(content, reasoningContent);
@@ -318,8 +321,8 @@ export const useApiRequest = (
isStreamComplete = true; // 标记流正常完成
source.close();
sseSourceRef.current = null;
- setDebugData((prev) => ({
- ...prev,
+ setDebugData((prev) => ({
+ ...prev,
response: responseData,
sseMessages: [...(prev.sseMessages || []), '[DONE]'], // 添加 DONE 标记
isStreaming: false,
diff --git a/web/src/hooks/playground/usePlaygroundState.js b/web/src/hooks/playground/usePlaygroundState.js
index 9574a4c3c..79be10134 100644
--- a/web/src/hooks/playground/usePlaygroundState.js
+++ b/web/src/hooks/playground/usePlaygroundState.js
@@ -36,18 +36,23 @@ import { processIncompleteThinkTags } from '../../helpers';
export const usePlaygroundState = () => {
const { t } = useTranslation();
-
+
// 使用惰性初始化，确保只在组件首次挂载时加载配置和消息
const [savedConfig] = useState(() => loadConfig());
const [initialMessages] = useState(() => {
const loaded = loadMessages();
// 检查是否是旧的中文默认消息，如果是则清除
- if (loaded && loaded.length === 2 && loaded[0].id === '2' && loaded[1].id === '3') {
- const hasOldChinese =
- loaded[0].content === '你好' ||
+ if (
+ loaded &&
+ loaded.length === 2 &&
+ loaded[0].id === '2' &&
+ loaded[1].id === '3'
+ ) {
+ const hasOldChinese =
+ loaded[0].content === '你好' ||
loaded[1].content === '你好，请问有什么可以帮助您的吗？' ||
loaded[1].content === '你好！很高兴见到你。有什么我可以帮助你的吗？';
-
+
if (hasOldChinese) {
// 清除旧的默认消息
localStorage.removeItem('playground_messages');
@@ -81,8 +86,10 @@ export const usePlaygroundState = () => {
const [status, setStatus] = useState({});
// 消息相关状态 - 使用加载的消息或默认消息初始化
- const [message, setMessage] = useState(() => initialMessages || getDefaultMessages(t));
-
+ const [message, setMessage] = useState(
+ () => initialMessages || getDefaultMessages(t),
+ );
+
// 当语言改变时，如果是默认消息则更新
useEffect(() => {
// 只在没有保存的消息时才更新默认消息
diff --git a/web/src/hooks/usage-logs/useUsageLogsData.jsx b/web/src/hooks/usage-logs/useUsageLogsData.jsx
index d44ed6ecf..3b12b8daa 100644
--- a/web/src/hooks/usage-logs/useUsageLogsData.jsx
+++ b/web/src/hooks/usage-logs/useUsageLogsData.jsx
@@ -364,32 +364,36 @@ export const useLogsData = () => {
key: t('日志详情'),
value: other?.claude
? renderClaudeLogContent(
- other?.model_ratio,
- other.completion_ratio,
- other.model_price,
- other.group_ratio,
- other?.user_group_ratio,
- other.cache_ratio || 1.0,
- other.cache_creation_ratio || 1.0,
- other.cache_creation_tokens_5m || 0,
- other.cache_creation_ratio_5m || other.cache_creation_ratio || 1.0,
- other.cache_creation_tokens_1h || 0,
- other.cache_creation_ratio_1h || other.cache_creation_ratio || 1.0,
- )
+ other?.model_ratio,
+ other.completion_ratio,
+ other.model_price,
+ other.group_ratio,
+ other?.user_group_ratio,
+ other.cache_ratio || 1.0,
+ other.cache_creation_ratio || 1.0,
+ other.cache_creation_tokens_5m || 0,
+ other.cache_creation_ratio_5m ||
+ other.cache_creation_ratio ||
+ 1.0,
+ other.cache_creation_tokens_1h || 0,
+ other.cache_creation_ratio_1h ||
+ other.cache_creation_ratio ||
+ 1.0,
+ )
: renderLogContent(
- other?.model_ratio,
- other.completion_ratio,
- other.model_price,
- other.group_ratio,
- other?.user_group_ratio,
- other.cache_ratio || 1.0,
- false,
- 1.0,
- other.web_search || false,
- other.web_search_call_count || 0,
- other.file_search || false,
- other.file_search_call_count || 0,
- ),
+ other?.model_ratio,
+ other.completion_ratio,
+ other.model_price,
+ other.group_ratio,
+ other?.user_group_ratio,
+ other.cache_ratio || 1.0,
+ false,
+ 1.0,
+ other.web_search || false,
+ other.web_search_call_count || 0,
+ other.file_search || false,
+ other.file_search_call_count || 0,
+ ),
});
if (logs[i]?.content) {
expandDataLocal.push({
@@ -458,12 +462,12 @@ export const useLogsData = () => {
other.cache_creation_ratio || 1.0,
other.cache_creation_tokens_5m || 0,
other.cache_creation_ratio_5m ||
- other.cache_creation_ratio ||
- 1.0,
+ other.cache_creation_ratio ||
+ 1.0,
other.cache_creation_tokens_1h || 0,
other.cache_creation_ratio_1h ||
- other.cache_creation_ratio ||
- 1.0,
+ other.cache_creation_ratio ||
+ 1.0,
);
} else {
content = renderModelPrice(
@@ -519,7 +523,8 @@ export const useLogsData = () => {
const pre = other?.subscription_pre_consumed ?? 0;
const postDelta = other?.subscription_post_delta ?? 0;
const finalConsumed =
- other?.subscription_consumed ?? (quotaType === 1 ? 1 : pre + postDelta);
+ other?.subscription_consumed ??
+ (quotaType === 1 ? 1 : pre + postDelta);
const remain = other?.subscription_remain;
const total = other?.subscription_total;
// Use multiple Description items to avoid an overlong single line.
@@ -549,7 +554,9 @@ export const useLogsData = () => {
.join('\n');
expandDataLocal.push({
key: t('订阅结算'),
- value:
{settlementLines}
,
+ value: (
+
{settlementLines}
+ ),
});
if (remain !== undefined && total !== undefined) {
expandDataLocal.push({
@@ -638,7 +645,7 @@ export const useLogsData = () => {
// Page handlers
const handlePageChange = (page) => {
setActivePage(page);
- loadLogs(page, pageSize).then((r) => { });
+ loadLogs(page, pageSize).then((r) => {});
};
const handlePageSizeChange = async (size) => {
diff --git a/web/src/pages/Playground/index.jsx b/web/src/pages/Playground/index.jsx
index 6b7f8d16a..68a97c335 100644
--- a/web/src/pages/Playground/index.jsx
+++ b/web/src/pages/Playground/index.jsx
@@ -438,14 +438,17 @@ const Playground = () => {
}, [setMessage, saveMessagesImmediately]);
// 处理粘贴图片
- const handlePasteImage = useCallback((base64Data) => {
- if (!inputs.imageEnabled) {
- return;
- }
- // 添加图片到 imageUrls 数组
- const newUrls = [...(inputs.imageUrls || []), base64Data];
- handleInputChange('imageUrls', newUrls);
- }, [inputs.imageEnabled, inputs.imageUrls, handleInputChange]);
+ const handlePasteImage = useCallback(
+ (base64Data) => {
+ if (!inputs.imageEnabled) {
+ return;
+ }
+ // 添加图片到 imageUrls 数组
+ const newUrls = [...(inputs.imageUrls || []), base64Data];
+ handleInputChange('imageUrls', newUrls);
+ },
+ [inputs.imageEnabled, inputs.imageUrls, handleInputChange],
+ );
// Playground Context 值
const playgroundContextValue = {
@@ -457,10 +460,10 @@ const Playground = () => {
return (
-
- {(showSettings || !isMobile) && (
-
+ {(showSettings || !isMobile) && (
+ {
: 'relative z-[1] w-80 h-[calc(100vh-66px)]'
}
`}
- width={isMobile ? '100%' : 320}
- >
- setShowSettings(false)}
- onConfigImport={handleConfigImport}
- onConfigReset={handleConfigReset}
- onCustomRequestModeChange={setCustomRequestMode}
- onCustomRequestBodyChange={setCustomRequestBody}
- previewPayload={previewPayload}
- messages={message}
- />
-
- )}
-
-
-
-
-
+ setShowDebugPanel(!showDebugPanel)}
- renderCustomChatContent={renderCustomChatContent}
- renderChatBoxAction={renderChatBoxAction}
+ customRequestMode={customRequestMode}
+ customRequestBody={customRequestBody}
+ onInputChange={handleInputChange}
+ onParameterToggle={handleParameterToggle}
+ onCloseSettings={() => setShowSettings(false)}
+ onConfigImport={handleConfigImport}
+ onConfigReset={handleConfigReset}
+ onCustomRequestModeChange={setCustomRequestMode}
+ onCustomRequestBodyChange={setCustomRequestBody}
+ previewPayload={previewPayload}
+ messages={message}
/>
+
+ )}
+
+
+
+
+ setShowDebugPanel(!showDebugPanel)}
+ renderCustomChatContent={renderCustomChatContent}
+ renderChatBoxAction={renderChatBoxAction}
+ />
+
+
+ {/* 调试面板 - 桌面端 */}
+ {showDebugPanel && !isMobile && (
+
+
+
+ )}
+ {/* 调试面板 - 移动端覆盖层 */}
+ {showDebugPanel && isMobile && (
+
setShowDebugPanel(false)}
customRequestMode={customRequestMode}
/>
)}
-
- setShowDebugPanel(false)}
- customRequestMode={customRequestMode}
- />
-
- )}
-
- {/* 浮动按钮 */}
- setShowSettings(!showSettings)}
- onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}
- />
-
-
-
+ {/* 浮动按钮 */}
+
setShowSettings(!showSettings)}
+ onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}
+ />
+
+
+
{t('模型部署设置')}
}
@@ -186,7 +194,9 @@ export default function SettingModelDeployment(props) {
+
io.net
@@ -226,18 +236,16 @@ export default function SettingModelDeployment(props) {
}
disabled={!inputs['model_deployment.ionet.enabled']}
extraText={t('请使用 Project 为 io.cloud 的密钥')}
- mode="password"
+ mode='password'
/>
}
onClick={testApiKey}
loading={testing}
- disabled={
- !inputs['model_deployment.ionet.enabled']
- }
+ disabled={!inputs['model_deployment.ionet.enabled']}
style={{
height: '32px',
fontSize: '13px',
@@ -271,7 +279,10 @@ export default function SettingModelDeployment(props) {
}}
>
-
+
{t('获取 io.net API Key')}
- {t('访问 io.net 控制台的 API Keys 页面')}
- - {t('创建或选择密钥时，将 Project 设置为 io.cloud')}
+ -
+ {t('创建或选择密钥时，将 Project 设置为 io.cloud')}
+
- {t('复制生成的密钥并粘贴到此处')}
}
- type="primary"
- theme="solid"
+ type='primary'
+ theme='solid'
style={{ width: '100%' }}
onClick={() =>
window.open('https://ai.io.net/ai/api-keys', '_blank')
@@ -308,7 +321,7 @@ export default function SettingModelDeployment(props) {
-
diff --git a/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx b/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx
index a5208a502..52476932b 100644
--- a/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx
+++ b/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx
@@ -172,7 +172,9 @@ export default function SettingsCreditLimit(props) {
setInputs({
...inputs,
diff --git a/web/src/pages/Setting/Operation/SettingsMonitoring.jsx b/web/src/pages/Setting/Operation/SettingsMonitoring.jsx
index 6e1743478..29b55e56c 100644
--- a/web/src/pages/Setting/Operation/SettingsMonitoring.jsx
+++ b/web/src/pages/Setting/Operation/SettingsMonitoring.jsx
@@ -18,13 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React, { useEffect, useState, useRef } from 'react';
-import {
- Button,
- Col,
- Form,
- Row,
- Spin,
-} from '@douyinfe/semi-ui';
+import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
import {
compareObjects,
API,
@@ -46,7 +40,8 @@ export default function SettingsMonitoring(props) {
AutomaticEnableChannelEnabled: false,
AutomaticDisableKeywords: '',
AutomaticDisableStatusCodes: '401',
- AutomaticRetryStatusCodes: '100-199,300-399,401-407,409-499,500-503,505-523,525-599',
+ AutomaticRetryStatusCodes:
+ '100-199,300-399,401-407,409-499,500-503,505-523,525-599',
'monitor_setting.auto_test_channel_enabled': false,
'monitor_setting.auto_test_channel_minutes': 10,
});
diff --git a/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx b/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx
index 5f351c105..817bca51a 100644
--- a/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx
+++ b/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx
@@ -252,7 +252,11 @@ export default function SettingsSidebarModulesAdmin(props) {
modules: [
{ key: 'channel', title: t('渠道管理'), description: t('API渠道配置') },
{ key: 'models', title: t('模型管理'), description: t('AI模型配置') },
- { key: 'deployment', title: t('模型部署'), description: t('模型部署管理') },
+ {
+ key: 'deployment',
+ title: t('模型部署'),
+ description: t('模型部署管理'),
+ },
{
key: 'redemption',
title: t('兑换码管理'),
diff --git a/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx b/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
index 32e2e6fbc..18e8192d8 100644
--- a/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
@@ -1,385 +1,404 @@
import React, { useEffect, useState, useRef } from 'react';
import {
- Banner,
- Button,
- Form,
- Row,
- Col,
- Typography,
- Spin,
- Table,
- Modal,
- Input,
- InputNumber,
- Select,
+ Banner,
+ Button,
+ Form,
+ Row,
+ Col,
+ Typography,
+ Spin,
+ Table,
+ Modal,
+ Input,
+ InputNumber,
+ Select,
} from '@douyinfe/semi-ui';
const { Text } = Typography;
-import {
- API,
- showError,
- showSuccess,
-} from '../../../helpers';
+import { API, showError, showSuccess } from '../../../helpers';
import { useTranslation } from 'react-i18next';
import { Plus, Trash2 } from 'lucide-react';
export default function SettingsPaymentGatewayCreem(props) {
- const { t } = useTranslation();
- const [loading, setLoading] = useState(false);
- const [inputs, setInputs] = useState({
- CreemApiKey: '',
- CreemWebhookSecret: '',
- CreemProducts: '[]',
- CreemTestMode: false,
- });
- const [originInputs, setOriginInputs] = useState({});
- const [products, setProducts] = useState([]);
- const [showProductModal, setShowProductModal] = useState(false);
- const [editingProduct, setEditingProduct] = useState(null);
- const [productForm, setProductForm] = useState({
+ const { t } = useTranslation();
+ const [loading, setLoading] = useState(false);
+ const [inputs, setInputs] = useState({
+ CreemApiKey: '',
+ CreemWebhookSecret: '',
+ CreemProducts: '[]',
+ CreemTestMode: false,
+ });
+ const [originInputs, setOriginInputs] = useState({});
+ const [products, setProducts] = useState([]);
+ const [showProductModal, setShowProductModal] = useState(false);
+ const [editingProduct, setEditingProduct] = useState(null);
+ const [productForm, setProductForm] = useState({
+ name: '',
+ productId: '',
+ price: 0,
+ quota: 0,
+ currency: 'USD',
+ });
+ const formApiRef = useRef(null);
+
+ useEffect(() => {
+ if (props.options && formApiRef.current) {
+ const currentInputs = {
+ CreemApiKey: props.options.CreemApiKey || '',
+ CreemWebhookSecret: props.options.CreemWebhookSecret || '',
+ CreemProducts: props.options.CreemProducts || '[]',
+ CreemTestMode: props.options.CreemTestMode === 'true',
+ };
+ setInputs(currentInputs);
+ setOriginInputs({ ...currentInputs });
+ formApiRef.current.setValues(currentInputs);
+
+ // Parse products
+ try {
+ const parsedProducts = JSON.parse(currentInputs.CreemProducts);
+ setProducts(parsedProducts);
+ } catch (e) {
+ setProducts([]);
+ }
+ }
+ }, [props.options]);
+
+ const handleFormChange = (values) => {
+ setInputs(values);
+ };
+
+ const submitCreemSetting = async () => {
+ setLoading(true);
+ try {
+ const options = [];
+
+ if (inputs.CreemApiKey && inputs.CreemApiKey !== '') {
+ options.push({ key: 'CreemApiKey', value: inputs.CreemApiKey });
+ }
+
+ if (inputs.CreemWebhookSecret && inputs.CreemWebhookSecret !== '') {
+ options.push({
+ key: 'CreemWebhookSecret',
+ value: inputs.CreemWebhookSecret,
+ });
+ }
+
+ // Save test mode setting
+ options.push({
+ key: 'CreemTestMode',
+ value: inputs.CreemTestMode ? 'true' : 'false',
+ });
+
+ // Save products as JSON string
+ options.push({ key: 'CreemProducts', value: JSON.stringify(products) });
+
+ // 发送请求
+ const requestQueue = options.map((opt) =>
+ API.put('/api/option/', {
+ key: opt.key,
+ value: opt.value,
+ }),
+ );
+
+ const results = await Promise.all(requestQueue);
+
+ // 检查所有请求是否成功
+ const errorResults = results.filter((res) => !res.data.success);
+ if (errorResults.length > 0) {
+ errorResults.forEach((res) => {
+ showError(res.data.message);
+ });
+ } else {
+ showSuccess(t('更新成功'));
+ // 更新本地存储的原始值
+ setOriginInputs({ ...inputs });
+ props.refresh?.();
+ }
+ } catch (error) {
+ showError(t('更新失败'));
+ }
+ setLoading(false);
+ };
+
+ const openProductModal = (product = null) => {
+ if (product) {
+ setEditingProduct(product);
+ setProductForm({ ...product });
+ } else {
+ setEditingProduct(null);
+ setProductForm({
name: '',
productId: '',
price: 0,
quota: 0,
currency: 'USD',
+ });
+ }
+ setShowProductModal(true);
+ };
+
+ const closeProductModal = () => {
+ setShowProductModal(false);
+ setEditingProduct(null);
+ setProductForm({
+ name: '',
+ productId: '',
+ price: 0,
+ quota: 0,
+ currency: 'USD',
});
- const formApiRef = useRef(null);
+ };
- useEffect(() => {
- if (props.options && formApiRef.current) {
- const currentInputs = {
- CreemApiKey: props.options.CreemApiKey || '',
- CreemWebhookSecret: props.options.CreemWebhookSecret || '',
- CreemProducts: props.options.CreemProducts || '[]',
- CreemTestMode: props.options.CreemTestMode === 'true',
- };
- setInputs(currentInputs);
- setOriginInputs({ ...currentInputs });
- formApiRef.current.setValues(currentInputs);
+ const saveProduct = () => {
+ if (
+ !productForm.name ||
+ !productForm.productId ||
+ productForm.price <= 0 ||
+ productForm.quota <= 0 ||
+ !productForm.currency
+ ) {
+ showError(t('请填写完整的产品信息'));
+ return;
+ }
- // Parse products
- try {
- const parsedProducts = JSON.parse(currentInputs.CreemProducts);
- setProducts(parsedProducts);
- } catch (e) {
- setProducts([]);
- }
- }
- }, [props.options]);
+ let newProducts = [...products];
+ if (editingProduct) {
+ // 编辑现有产品
+ const index = newProducts.findIndex(
+ (p) => p.productId === editingProduct.productId,
+ );
+ if (index !== -1) {
+ newProducts[index] = { ...productForm };
+ }
+ } else {
+ // 添加新产品
+ if (newProducts.find((p) => p.productId === productForm.productId)) {
+ showError(t('产品ID已存在'));
+ return;
+ }
+ newProducts.push({ ...productForm });
+ }
- const handleFormChange = (values) => {
- setInputs(values);
- };
+ setProducts(newProducts);
+ closeProductModal();
+ };
- const submitCreemSetting = async () => {
- setLoading(true);
- try {
- const options = [];
+ const deleteProduct = (productId) => {
+ const newProducts = products.filter((p) => p.productId !== productId);
+ setProducts(newProducts);
+ };
- if (inputs.CreemApiKey && inputs.CreemApiKey !== '') {
- options.push({ key: 'CreemApiKey', value: inputs.CreemApiKey });
- }
+ const columns = [
+ {
+ title: t('产品名称'),
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: t('产品ID'),
+ dataIndex: 'productId',
+ key: 'productId',
+ },
+ {
+ title: t('展示价格'),
+ dataIndex: 'price',
+ key: 'price',
+ render: (price, record) =>
+ `${record.currency === 'EUR' ? '€' : '$'}${price}`,
+ },
+ {
+ title: t('充值额度'),
+ dataIndex: 'quota',
+ key: 'quota',
+ },
+ {
+ title: t('操作'),
+ key: 'action',
+ render: (_, record) => (
+
+
+ }
+ onClick={() => deleteProduct(record.productId)}
+ />
+
+ ),
+ },
+ ];
- if (inputs.CreemWebhookSecret && inputs.CreemWebhookSecret !== '') {
- options.push({ key: 'CreemWebhookSecret', value: inputs.CreemWebhookSecret });
- }
+ return (
+
+