Title
Body
')).toBe( + 'Title
Body
', + ); + }); + + it('removes inline styles and embedded documents', () => { + const clean = sanitizeHtml( + 'Body
', + ); + + expect(clean).toBe('Body
'); + }); +}); diff --git a/web/classic/src/helpers/utils.jsx b/web/classic/src/helpers/utils.jsx index c2e72820a351..1912e2bf7bc9 100644 --- a/web/classic/src/helpers/utils.jsx +++ b/web/classic/src/helpers/utils.jsx @@ -18,7 +18,11 @@ For commercial licensing, please contact support@quantumnous.com */ import { Toast, Pagination } from '@douyinfe/semi-ui'; -import { toastConstants, BILLING_PRICING_VARS, BILLING_VAR_REGEX } from '../constants'; +import { + toastConstants, + BILLING_PRICING_VARS, + BILLING_VAR_REGEX, +} from '../constants'; import React from 'react'; import { toast } from 'react-toastify'; import { @@ -27,9 +31,12 @@ import { } from '../constants/playground.constants'; import { TABLE_COMPACT_MODES_KEY } from '../constants'; import { MOBILE_BREAKPOINT } from '../hooks/common/useIsMobile'; +import { sanitizeHtml } from './sanitizeHtml'; const HTMLToastContent = ({ htmlContent }) => { - return ; + return ( + + ); }; export default HTMLToastContent; export function isAdmin() { @@ -725,7 +732,9 @@ export const calculateModelPrice = ({ ? formatTokenPrice(inputRatioPriceUSD * Number(record.cache_ratio)) : null, createCachePrice: hasRatioValue(record.create_cache_ratio) - ? formatTokenPrice(inputRatioPriceUSD * Number(record.create_cache_ratio)) + ? formatTokenPrice( + inputRatioPriceUSD * Number(record.create_cache_ratio), + ) : null, imagePrice: hasRatioValue(record.image_ratio) ? formatTokenPrice(inputRatioPriceUSD * Number(record.image_ratio)) @@ -771,11 +780,7 @@ export const calculateModelPrice = ({ }; }; -export const getModelPriceItems = ( - priceData, - t, - quotaDisplayType = 'USD', -) => { +export const getModelPriceItems = (priceData, t, quotaDisplayType = 'USD') => { if (priceData.isDynamicPricing) { return [ { @@ -883,7 +888,10 @@ export const getModelPriceItems = ( value: priceData.audioOutputPrice, suffix: unitSuffix, }, - ].filter((item) => item.value !== null && item.value !== undefined && item.value !== ''); + ].filter( + (item) => + item.value !== null && item.value !== undefined && item.value !== '', + ); } return [ @@ -893,12 +901,18 @@ export const getModelPriceItems = ( value: priceData.price, suffix: ` / ${t('次')}`, }, - ].filter((item) => item.value !== null && item.value !== undefined && item.value !== ''); + ].filter( + (item) => + item.value !== null && item.value !== undefined && item.value !== '', + ); }; // 格式化动态计费摘要（用于卡片视图，与 formatPriceInfo 风格统一） export const formatDynamicPriceSummary = (billingExpr, t, groupRatio = 1) => { - if (!billingExpr) return {t('动态计费')}; + if (!billingExpr) + return ( + {t('动态计费')} + ); const quotaDisplayType = localStorage.getItem('quota_display_type') || 'USD'; let symbol = '$'; @@ -929,7 +943,9 @@ export const formatDynamicPriceSummary = (billingExpr, t, groupRatio = 1) => { const varLabels = BILLING_PRICING_VARS.map((v) => [v.key, v.label]); - const hasTimeCondition = /\b(?:hour|minute|weekday|month|day)\(/.test(exprBody); + const hasTimeCondition = /\b(?:hour|minute|weekday|month|day)\(/.test( + exprBody, + ); const hasRequestCondition = /\b(?:param|header)\(/.test(exprBody); const tags = []; @@ -954,35 +970,35 @@ export const formatDynamicPriceSummary = (billingExpr, t, groupRatio = 1) => { )} {(tierCount > 1 || hasTimeCondition || hasRequestCondition) && ( - - - {t('动态计费')} - - {tags.map((tag) => ( + - {tag} + {t('动态计费')} - ))} - + {tags.map((tag) => ( + + {tag} + + ))} + )} ); diff --git a/web/classic/src/i18n/i18n.js b/web/classic/src/i18n/i18n.js index 357ae592fbb9..1c9e2701b7ff 100644 --- a/web/classic/src/i18n/i18n.js +++ b/web/classic/src/i18n/i18n.js @@ -30,6 +30,27 @@ import jaTranslation from './locales/ja.json'; import viTranslation from './locales/vi.json'; import { supportedLanguages } from './language'; +// 默认简体中文：忽略 navigator；一次性迁移历史 en 缓存。 +const I18N_STORAGE_KEY = 'i18nextLng'; +const I18N_DEFAULT_ZH_MIGRATION_KEY = 'i18nDefaultZhCN.v1'; +try { + if (typeof localStorage !== 'undefined') { + if (!localStorage.getItem(I18N_DEFAULT_ZH_MIGRATION_KEY)) { + const cached = localStorage.getItem(I18N_STORAGE_KEY); + if ( + !cached || + cached === 'en' || + String(cached).toLowerCase().startsWith('en-') + ) { + localStorage.setItem(I18N_STORAGE_KEY, 'zh-CN'); + } + localStorage.setItem(I18N_DEFAULT_ZH_MIGRATION_KEY, '1'); + } + } +} catch (e) { + // ignore storage failures +} + i18n .use(LanguageDetector) .use(initReactI18next) @@ -50,6 +71,11 @@ i18n interpolation: { escapeValue: false, }, + detection: { + order: ['localStorage'], + caches: ['localStorage'], + lookupLocalStorage: I18N_STORAGE_KEY, + }, }); window.__i18n = i18n; diff --git a/web/classic/src/pages/About/index.jsx b/web/classic/src/pages/About/index.jsx index 2f8091a9093c..be80ba86bfb7 100644 --- a/web/classic/src/pages/About/index.jsx +++ b/web/classic/src/pages/About/index.jsx @@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com import React, { useEffect, useState } from 'react'; import { API, showError } from '../../helpers'; -import { marked } from 'marked'; +import { renderMarkdown, sanitizeHtml } from '../../helpers/sanitizeHtml'; import { Empty } from '@douyinfe/semi-ui'; import { IllustrationConstruction, @@ -34,13 +34,18 @@ const About = () => { const currentYear = new Date().getFullYear(); const displayAbout = async () => { - setAbout(localStorage.getItem('about') || ''); + const cachedAbout = localStorage.getItem('about') || ''; + setAbout( + cachedAbout.startsWith('https://') + ? cachedAbout + : sanitizeHtml(cachedAbout), + ); const res = await API.get('/api/about'); const { success, message, data } = res.data; if (success) { let aboutContent = data; if (!data.startsWith('https://')) { - aboutContent = marked.parse(data); + aboutContent = renderMarkdown(data); } setAbout(aboutContent); localStorage.setItem('about', aboutContent); diff --git a/web/classic/src/pages/Home/index.jsx b/web/classic/src/pages/Home/index.jsx index bb2dd0d2e749..fbc41cc7a25c 100644 --- a/web/classic/src/pages/Home/index.jsx +++ b/web/classic/src/pages/Home/index.jsx @@ -30,7 +30,7 @@ import { useIsMobile } from '../../hooks/common/useIsMobile'; import { API_ENDPOINTS } from '../../constants/common.constant'; import { StatusContext } from '../../context/Status'; import { useActualTheme } from '../../context/Theme'; -import { marked } from 'marked'; +import { renderMarkdown, sanitizeHtml } from '../../helpers/sanitizeHtml'; import { useTranslation } from 'react-i18next'; import { IconGithubLogo, @@ -82,13 +82,18 @@ const Home = () => { const isChinese = i18n.language.startsWith('zh'); const displayHomePageContent = async () => { - setHomePageContent(localStorage.getItem('home_page_content') || ''); + const cachedContent = localStorage.getItem('home_page_content') || ''; + setHomePageContent( + cachedContent.startsWith('https://') + ? cachedContent + : sanitizeHtml(cachedContent), + ); const res = await API.get('/api/home_page_content'); const { success, message, data } = res.data; if (success) { let content = data; if (!data.startsWith('https://')) { - content = marked.parse(data); + content = renderMarkdown(data); } setHomePageContent(content); localStorage.setItem('home_page_content', content); diff --git a/web/default/bundle-budget.json b/web/default/bundle-budget.json new file mode 100644 index 000000000000..a2a5a5f9d004 --- /dev/null +++ b/web/default/bundle-budget.json @@ -0,0 +1,5 @@ +{ + "entryGzipKiB": 400, + "maxJsGzipKiB": 3000, + "totalJsGzipKiB": 16500 +} diff --git a/web/default/index.html b/web/default/index.html index 7f280b401afd..f9c7642513d5 100644 --- a/web/default/index.html +++ b/web/default/index.html @@ -1,5 +1,5 @@ - + diff --git a/web/default/package.json b/web/default/package.json index 67906f26f473..6afd1230a6b2 100644 --- a/web/default/package.json +++ b/web/default/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "rsbuild dev", "build": "rsbuild build", + "bundle:check": "node scripts/check-bundle-budget.mjs", "build:check": "tsgo -b && rsbuild build", "typecheck": "tsgo -b", "lint": "oxlint -c .oxlintrc.json .", @@ -74,6 +75,7 @@ "tw-animate-css": "^1.4.0", "use-stick-to-bottom": "^1.1.6", "vaul": "^1.1.2", + "web-vitals": "^5.1.0", "zod": "^4.4.3", "zustand": "^5.0.14" }, @@ -99,7 +101,7 @@ "brace-expansion": "2.1.1", "dompurify": "3.4.11", "fast-uri": "3.1.2", - "hono": "4.12.22", + "hono": "4.12.25", "ip-address": "10.2.0", "js-cookie": "3.0.7", "mermaid": "11.15.0", diff --git a/web/default/rsbuild.config.ts b/web/default/rsbuild.config.ts index 3b9d11de6a88..93e2b39c5336 100644 --- a/web/default/rsbuild.config.ts +++ b/web/default/rsbuild.config.ts @@ -50,6 +50,28 @@ export default defineConfig(({ envMode }) => { priority: 0, enforce: true, }, + 'vendor-vchart': { + test: /node_modules[\\/]@visactor[\\/]/, + name: 'vendor-vchart', + chunks: 'all', + priority: 0, + enforce: true, + }, + 'vendor-shiki': { + test: /node_modules[\\/]shiki[\\/]/, + name: 'vendor-shiki', + chunks: 'async', + priority: 0, + enforce: true, + }, + 'vendor-recharts': { + // Legacy shadcn chart helper; keep out of main if unused on critical path. + test: /node_modules[\\/]recharts[\\/]/, + name: 'vendor-recharts', + chunks: 'async', + priority: 0, + enforce: true, + }, }, }, source: { diff --git a/web/default/scripts/check-bundle-budget.mjs b/web/default/scripts/check-bundle-budget.mjs new file mode 100644 index 000000000000..ada03b543fde --- /dev/null +++ b/web/default/scripts/check-bundle-budget.mjs @@ -0,0 +1,21 @@ +/* +Copyright (C) 2023-2026 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published +by the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see({
{t('Rows per page')}
)}
-
+
+ {t('Skip Auto Test')}
+
+ {t(
+ 'Exclude this channel from automatic batch tests; manual test still works'
+ )}
+
+
+
-
+
-
{t('Latency short')}
+ {isMock && (
+
+ ~
+
+ )}
{formatCompactLatency(avg_latency_ms)}
+
{t('Throughput short')}
@@ -95,11 +109,11 @@ export const ModelPerfBadge = memo(function ModelPerfBadge(
- {t('Status short')}
+ {isMock ? t('Est. short') : t('Status short')}
{statusBars.map((rate, index) => (
@@ -114,7 +128,9 @@ export const ModelPerfBadge = memo(function ModelPerfBadge(
? index === 0
? 'bg-muted-foreground/10'
: 'bg-muted-foreground/15'
- : getSuccessRateDotClass(rate)
+ : isMock
+ ? 'bg-muted-foreground/35'
+ : getSuccessRateDotClass(rate)
)}
/>
))}
diff --git a/web/default/src/features/pricing/components/pricing-columns.tsx b/web/default/src/features/pricing/components/pricing-columns.tsx
index 3d19eda2130c..9045375ce410 100644
--- a/web/default/src/features/pricing/components/pricing-columns.tsx
+++ b/web/default/src/features/pricing/components/pricing-columns.tsx
@@ -16,9 +16,10 @@ along with this program. If not, see
}
export function usePricingColumns(
@@ -64,12 +68,12 @@ export function usePricingColumns(
priceRate = 1,
usdExchangeRate = 1,
showRechargePrice = false,
- selectedGroup,
+ perfMap,
} = options
const tokenUnitLabel = tokenUnit === 'K' ? '1K' : '1M'
- return [
+ return useMemo(() => [
// Model column
{
accessorKey: 'model_name',
@@ -94,14 +98,41 @@ export function usePricingColumns(
minSize: 200,
},
+ // Health / live metrics (same badge as card grid; respects liveMetricsOnly via map)
+ {
+ id: 'health',
+ meta: { label: t('Health') },
+ header: ({ column }) => (
+ (
+ () => [
+ {
+ value: FILTER_ALL,
+ label: t('All Vendors'),
+ count: props.models.length,
+ },
+ ...props.vendors
+ .map((vendor) => ({
+ value: vendor.name,
+ label: vendor.name,
+ count: countBy(
+ props.models,
+ (model) => model.vendor_name === vendor.name
+ ),
+ icon: vendor.icon ? getLobeIcon(vendor.icon, 14) : undefined,
+ }))
+ .filter((vendor) => vendor.count > 0),
+ ],
+ [props.models, props.vendors, t]
+ )
- const quotaOptions: FilterOption[] = [
- {
- value: QUOTA_TYPES.ALL,
- label: quotaTypeLabels[QUOTA_TYPES.ALL],
- count: props.models.length,
- },
- {
- value: QUOTA_TYPES.TOKEN,
- label: quotaTypeLabels[QUOTA_TYPES.TOKEN],
- count: countBy(props.models, (model) => model.quota_type === 0),
- },
- {
- value: QUOTA_TYPES.REQUEST,
- label: quotaTypeLabels[QUOTA_TYPES.REQUEST],
- count: countBy(props.models, (model) => model.quota_type === 1),
- },
- ]
+ const groupOptions = useMemo(
+ () => [
+ {
+ value: FILTER_ALL,
+ label: t('All Groups'),
+ },
+ ...props.groups.map((group) => ({
+ value: group,
+ label: group,
+ suffix: formatGroupRatio(props.groupRatios?.[group]),
+ })),
+ ],
+ [props.groupRatios, props.groups, t]
+ )
- const tagOptions: FilterOption[] = [
- {
- value: FILTER_ALL,
- label: t('All Tags'),
- count: props.models.length,
- },
- ...props.tags.map((tag) => ({
- value: tag,
- label: tag,
- count: countBy(props.models, (model) =>
- parseTags(model.tags)
- .map((item) => item.toLowerCase())
- .includes(tag.toLowerCase())
- ),
- })),
- ]
+ const quotaOptions = useMemo(
+ () => [
+ {
+ value: QUOTA_TYPES.ALL,
+ label: quotaTypeLabels[QUOTA_TYPES.ALL],
+ count: props.models.length,
+ },
+ {
+ value: QUOTA_TYPES.TOKEN,
+ label: quotaTypeLabels[QUOTA_TYPES.TOKEN],
+ count: countBy(props.models, (model) => model.quota_type === 0),
+ },
+ {
+ value: QUOTA_TYPES.REQUEST,
+ label: quotaTypeLabels[QUOTA_TYPES.REQUEST],
+ count: countBy(props.models, (model) => model.quota_type === 1),
+ },
+ ],
+ [props.models, quotaTypeLabels]
+ )
- const endpointOptions: FilterOption[] = [
- {
- value: ENDPOINT_TYPES.ALL,
- label: endpointTypeLabels[ENDPOINT_TYPES.ALL],
- count: props.models.length,
- },
- ...Object.entries(endpointTypeLabels)
- .filter(([value]) => value !== ENDPOINT_TYPES.ALL)
- .map(([value, label]) => ({
- value,
- label,
- count: countBy(
- props.models,
- (model) => model.supported_endpoint_types?.includes(value) ?? false
+ const tagOptions = useMemo(
+ () => [
+ {
+ value: FILTER_ALL,
+ label: t('All Tags'),
+ count: props.models.length,
+ },
+ ...props.tags.map((tag) => ({
+ value: tag,
+ label: tag,
+ count: countBy(props.models, (model) =>
+ parseTags(model.tags)
+ .map((item) => item.toLowerCase())
+ .includes(tag.toLowerCase())
),
})),
- ]
+ ],
+ [props.models, props.tags, t]
+ )
+
+ const endpointOptions = useMemo(
+ () => [
+ {
+ value: ENDPOINT_TYPES.ALL,
+ label: endpointTypeLabels[ENDPOINT_TYPES.ALL],
+ count: props.models.length,
+ },
+ ...Object.entries(endpointTypeLabels)
+ .filter(([value]) => value !== ENDPOINT_TYPES.ALL)
+ .map(([value, label]) => ({
+ value,
+ label,
+ count: countBy(
+ props.models,
+ (model) => model.supported_endpoint_types?.includes(value) ?? false
+ ),
+ })),
+ ],
+ [endpointTypeLabels, props.models]
+ )
return (