Merge remote-tracking branch 'newapi/main' into sub

# Conflicts: # main.go # web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx # web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
2026-04-19 00:57:27 +00:00 · 2026-02-02 17:03:02 +08:00
parent a74cc93bbc 540cf6c991
commit 16349c98cb
30 changed files with 995 additions and 41 deletions
--- a/web/src/components/playground/CodeViewer.jsx
+++ b/web/src/components/playground/CodeViewer.jsx
@@ -106,6 +106,21 @@ const highlightJson = (str) => {
  );
 };

+const linkRegex = /(https?:\/\/[^\s<"'\]),;}]+)/g;
+
+const linkifyHtml = (html) => {
+  const parts = html.split(/(<[^>]+>)/g);
+  return parts
+    .map((part) => {
+      if (part.startsWith('<')) return part;
+      return part.replace(
+        linkRegex,
+        (url) => `<a href="${url}" target="_blank" rel="noreferrer">${url}</a>`,
+      );
+    })
+    .join('');
+};
+
 const isJsonLike = (content, language) => {
  if (language === 'json') return true;
  const trimmed = content.trim();
@@ -179,6 +194,10 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
    return displayContent;
  }, [displayContent, language, contentMetrics.isVeryLarge, isExpanded]);

+  const renderedContent = useMemo(() => {
+    return linkifyHtml(highlightedContent);
+  }, [highlightedContent]);
+
  const handleCopy = useCallback(async () => {
    try {
      const textToCopy =
@@ -276,6 +295,8 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
        style={{
          ...codeThemeStyles.content,
          paddingTop: contentPadding,
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
        }}
        className='model-settings-scroll'
      >
@@ -303,7 +324,7 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
            {t('正在处理大内容...')}
          </div>
        ) : (
-          <div dangerouslySetInnerHTML={{ __html: highlightedContent }} />
+          <div dangerouslySetInnerHTML={{ __html: renderedContent }} />
        )}
      </div>

--- a/web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx
@@ -20,6 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import {
  Avatar,
+  Button,
  Space,
  Tag,
  Tooltip,
@@ -71,6 +72,34 @@ function formatRatio(ratio) {
  return String(ratio);
 }

+function buildChannelAffinityTooltip(affinity, t) {
+  if (!affinity) {
+    return null;
+  }
+
+  const keySource = affinity.key_source || '-';
+  const keyPath = affinity.key_path || affinity.key_key || '-';
+  const keyHint = affinity.key_hint || '';
+  const keyFp = affinity.key_fp ? `#${affinity.key_fp}` : '';
+  const keyText = `${keySource}:${keyPath}${keyFp}`;
+
+  const lines = [
+    t('渠道亲和性'),
+    `${t('规则')}：${affinity.rule_name || '-'}`,
+    `${t('分组')}：${affinity.selected_group || '-'}`,
+    `${t('Key')}：${keyText}`,
+    ...(keyHint ? [`${t('Key 摘要')}：${keyHint}`] : []),
+  ];
+
+  return (
+    <div style={{ lineHeight: 1.6, display: 'flex', flexDirection: 'column' }}>
+      {lines.map((line, i) => (
+        <div key={i}>{line}</div>
+      ))}
+    </div>
+  );
+}
+
 // Render functions
 function renderType(type, t) {
  switch (type) {
@@ -262,6 +291,7 @@ export const getLogsColumns = ({
  COLUMN_KEYS,
  copyText,
  showUserInfoFunc,
+  openChannelAffinityUsageCacheModal,
  isAdminUser,
 }) => {
  return [
@@ -556,26 +586,19 @@ export const getLogsColumns = ({
            {affinity ? (
              <Tooltip
                content={
-                  <div style={{ lineHeight: 1.6 }}>
-                    <Typography.Text strong>{t('渠道亲和性')}</Typography.Text>
-                    <div>
-                      <Typography.Text type='secondary'>
-                        {t('规则')}：{affinity.rule_name || '-'}
-                      </Typography.Text>
-                    </div>
-                    <div>
-                      <Typography.Text type='secondary'>
-                        {t('分组')}：{affinity.selected_group || '-'}
-                      </Typography.Text>
-                    </div>
-                    <div>
-                      <Typography.Text type='secondary'>
-                        {t('Key')}：
-                        {(affinity.key_source || '-') +
-                          ':' +
-                          (affinity.key_path || affinity.key_key || '-') +
-                          (affinity.key_fp ? `#${affinity.key_fp}` : '')}
-                      </Typography.Text>
+                  <div>
+                    {buildChannelAffinityTooltip(affinity, t)}
+                    <div style={{ marginTop: 6 }}>
+                      <Button
+                        theme='borderless'
+                        size='small'
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          openChannelAffinityUsageCacheModal?.(affinity);
+                        }}
+                      >
+                        {t('查看详情')}
+                      </Button>
                    </div>
                  </div>
                }
--- a/web/src/components/table/usage-logs/UsageLogsTable.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsTable.jsx
@@ -40,6 +40,7 @@ const LogsTable = (logsData) => {
    handlePageSizeChange,
    copyText,
    showUserInfoFunc,
+    openChannelAffinityUsageCacheModal,
    hasExpandableRows,
    isAdminUser,
    t,
@@ -53,9 +54,17 @@ const LogsTable = (logsData) => {
      COLUMN_KEYS,
      copyText,
      showUserInfoFunc,
+      openChannelAffinityUsageCacheModal,
      isAdminUser,
    });
-  }, [t, COLUMN_KEYS, copyText, showUserInfoFunc, isAdminUser]);
+  }, [
+    t,
+    COLUMN_KEYS,
+    copyText,
+    showUserInfoFunc,
+    openChannelAffinityUsageCacheModal,
+    isAdminUser,
+  ]);

  // Filter columns based on visibility settings
  const getVisibleColumns = () => {
--- a/web/src/components/table/usage-logs/index.jsx
+++ b/web/src/components/table/usage-logs/index.jsx
@@ -24,6 +24,7 @@ import LogsActions from './UsageLogsActions';
 import LogsFilters from './UsageLogsFilters';
 import ColumnSelectorModal from './modals/ColumnSelectorModal';
 import UserInfoModal from './modals/UserInfoModal';
+import ChannelAffinityUsageCacheModal from './modals/ChannelAffinityUsageCacheModal';
 import { useLogsData } from '../../../hooks/usage-logs/useUsageLogsData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
@@ -37,6 +38,7 @@ const LogsPage = () => {
      {/* Modals */}
      <ColumnSelectorModal {...logsData} />
      <UserInfoModal {...logsData} />
+      <ChannelAffinityUsageCacheModal {...logsData} />

      {/* Main Content */}
      <CardPro
--- a/web/src/components/table/usage-logs/modals/ChannelAffinityUsageCacheModal.jsx
+++ b/web/src/components/table/usage-logs/modals/ChannelAffinityUsageCacheModal.jsx
@@ -0,0 +1,200 @@
+/*
+Copyright (C) 2025 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 <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, Descriptions, Spin, Typography } from '@douyinfe/semi-ui';
+import { API, showError, timestamp2string } from '../../../../helpers';
+
+const { Text } = Typography;
+
+function formatRate(hit, total) {
+  if (!total || total <= 0) return '-';
+  const r = (Number(hit || 0) / Number(total || 0)) * 100;
+  if (!Number.isFinite(r)) return '-';
+  return `${r.toFixed(2)}%`;
+}
+
+function formatTokenRate(n, d) {
+  const nn = Number(n || 0);
+  const dd = Number(d || 0);
+  if (!dd || dd <= 0) return '-';
+  const r = (nn / dd) * 100;
+  if (!Number.isFinite(r)) return '-';
+  return `${r.toFixed(2)}%`;
+}
+
+const ChannelAffinityUsageCacheModal = ({
+  t,
+  showChannelAffinityUsageCacheModal,
+  setShowChannelAffinityUsageCacheModal,
+  channelAffinityUsageCacheTarget,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [stats, setStats] = useState(null);
+  const requestSeqRef = useRef(0);
+
+  const params = useMemo(() => {
+    const x = channelAffinityUsageCacheTarget || {};
+    return {
+      rule_name: (x.rule_name || '').trim(),
+      using_group: (x.using_group || '').trim(),
+      key_hint: (x.key_hint || '').trim(),
+      key_fp: (x.key_fp || '').trim(),
+    };
+  }, [channelAffinityUsageCacheTarget]);
+
+  useEffect(() => {
+    if (!showChannelAffinityUsageCacheModal) {
+      requestSeqRef.current += 1; // invalidate inflight request
+      setLoading(false);
+      setStats(null);
+      return;
+    }
+    if (!params.rule_name || !params.key_fp) {
+      setLoading(false);
+      setStats(null);
+      return;
+    }
+
+    const reqSeq = (requestSeqRef.current += 1);
+    setStats(null);
+    setLoading(true);
+    (async () => {
+      try {
+        const res = await API.get('/api/log/channel_affinity_usage_cache', {
+          params,
+          disableDuplicate: true,
+        });
+        if (reqSeq !== requestSeqRef.current) return;
+        const { success, message, data } = res.data || {};
+        if (!success) {
+          setStats(null);
+          showError(t(message || '请求失败'));
+          return;
+        }
+        setStats(data || {});
+      } catch (e) {
+        if (reqSeq !== requestSeqRef.current) return;
+        setStats(null);
+        showError(t('请求失败'));
+      } finally {
+        if (reqSeq !== requestSeqRef.current) return;
+        setLoading(false);
+      }
+    })();
+  }, [
+    showChannelAffinityUsageCacheModal,
+    params.rule_name,
+    params.using_group,
+    params.key_hint,
+    params.key_fp,
+    t,
+  ]);
+
+  const rows = useMemo(() => {
+    const s = stats || {};
+    const hit = Number(s.hit || 0);
+    const total = Number(s.total || 0);
+    const windowSeconds = Number(s.window_seconds || 0);
+    const lastSeenAt = Number(s.last_seen_at || 0);
+    const promptTokens = Number(s.prompt_tokens || 0);
+    const completionTokens = Number(s.completion_tokens || 0);
+    const totalTokens = Number(s.total_tokens || 0);
+    const cachedTokens = Number(s.cached_tokens || 0);
+    const promptCacheHitTokens = Number(s.prompt_cache_hit_tokens || 0);
+
+    return [
+      { key: t('规则'), value: s.rule_name || params.rule_name || '-' },
+      { key: t('分组'), value: s.using_group || params.using_group || '-' },
+      {
+        key: t('Key 摘要'),
+        value: params.key_hint || '-',
+      },
+      {
+        key: t('Key 指纹'),
+        value: s.key_fp || params.key_fp || '-',
+      },
+      { key: t('TTL（秒）'), value: windowSeconds > 0 ? windowSeconds : '-' },
+      {
+        key: t('命中率'),
+        value: `${hit}/${total} (${formatRate(hit, total)})`,
+      },
+      {
+        key: t('Prompt tokens'),
+        value: promptTokens,
+      },
+      {
+        key: t('Cached tokens'),
+        value: `${cachedTokens} (${formatTokenRate(cachedTokens, promptTokens)})`,
+      },
+      {
+        key: t('Prompt cache hit tokens'),
+        value: promptCacheHitTokens,
+      },
+      {
+        key: t('Completion tokens'),
+        value: completionTokens,
+      },
+      {
+        key: t('Total tokens'),
+        value: totalTokens,
+      },
+      {
+        key: t('最近一次'),
+        value: lastSeenAt > 0 ? timestamp2string(lastSeenAt) : '-',
+      },
+    ];
+  }, [stats, params, t]);
+
+  return (
+    <Modal
+      title={t('渠道亲和性：上游缓存命中')}
+      visible={showChannelAffinityUsageCacheModal}
+      onCancel={() => setShowChannelAffinityUsageCacheModal(false)}
+      footer={null}
+      centered
+      closable
+      maskClosable
+      width={640}
+    >
+      <div style={{ padding: 16 }}>
+        <div style={{ marginBottom: 12 }}>
+          <Text type='tertiary' size='small'>
+            {t(
+              '命中判定：usage 中存在 cached tokens（例如 cached_tokens/prompt_cache_hit_tokens）即视为命中。',
+            )}
+          </Text>
+        </div>
+        <Spin spinning={loading} tip={t('加载中...')}>
+          {stats ? (
+            <Descriptions data={rows} />
+          ) : (
+            <div style={{ padding: '24px 0' }}>
+              <Text type='tertiary' size='small'>
+                {loading ? t('加载中...') : t('暂无数据')}
+              </Text>
+            </div>
+          )}
+        </Spin>
+      </div>
+    </Modal>
+  );
+};
+
+export default ChannelAffinityUsageCacheModal;
--- a/web/src/helpers/render.jsx
+++ b/web/src/helpers/render.jsx
@@ -605,6 +605,34 @@ export function stringToColor(str) {
  return colors[i];
 }

+// High-contrast color palette for group tags (avoids similar blue/teal shades)
+const groupColors = [
+  'red',
+  'orange',
+  'yellow',
+  'lime',
+  'green',
+  'cyan',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'pink',
+  'amber',
+  'grey',
+];
+
+export function groupToColor(str) {
+  // Use a better hash algorithm for more even distribution
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash = hash & hash;
+  }
+  hash = Math.abs(hash);
+  return groupColors[hash % groupColors.length];
+}
+
 // 渲染带有模型图标的标签
 export function renderModelTag(modelName, options = {}) {
  const {
@@ -673,7 +701,7 @@ export function renderGroup(group) {
    <span key={group}>
      {groups.map((group) => (
        <Tag
-          color={tagColors[group] || stringToColor(group)}
+          color={tagColors[group] || groupToColor(group)}
          key={group}
          shape='circle'
          onClick={async (event) => {
--- a/web/src/helpers/statusCodeRules.js
+++ b/web/src/helpers/statusCodeRules.js
@@ -1,3 +1,21 @@
+/*
+Copyright (C) 2025 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 <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
 export function parseHttpStatusCodeRules(input) {
  const raw = (input ?? '').toString().trim();
  if (raw.length === 0) {
--- a/web/src/hooks/usage-logs/useUsageLogsData.jsx
+++ b/web/src/hooks/usage-logs/useUsageLogsData.jsx
@@ -112,6 +112,14 @@ export const useLogsData = () => {
  const [showUserInfo, setShowUserInfoModal] = useState(false);
  const [userInfoData, setUserInfoData] = useState(null);

+  // Channel affinity usage cache stats modal state (admin only)
+  const [
+    showChannelAffinityUsageCacheModal,
+    setShowChannelAffinityUsageCacheModal,
+  ] = useState(false);
+  const [channelAffinityUsageCacheTarget, setChannelAffinityUsageCacheTarget] =
+    useState(null);
+
  // Load saved column preferences from localStorage
  useEffect(() => {
    const savedColumns = localStorage.getItem(STORAGE_KEY);
@@ -304,6 +312,17 @@ export const useLogsData = () => {
    }
  };

+  const openChannelAffinityUsageCacheModal = (affinity) => {
+    const a = affinity || {};
+    setChannelAffinityUsageCacheTarget({
+      rule_name: a.rule_name || a.reason || '',
+      using_group: a.using_group || '',
+      key_hint: a.key_hint || '',
+      key_fp: a.key_fp || '',
+    });
+    setShowChannelAffinityUsageCacheModal(true);
+  };
+
  // Format logs data
  const setLogsFormat = (logs) => {
    const requestConversionDisplayValue = (conversionChain) => {
@@ -733,6 +752,12 @@ export const useLogsData = () => {
    userInfoData,
    showUserInfoFunc,

+    // Channel affinity usage cache stats modal
+    showChannelAffinityUsageCacheModal,
+    setShowChannelAffinityUsageCacheModal,
+    channelAffinityUsageCacheTarget,
+    openChannelAffinityUsageCacheModal,
+
    // Functions
    loadLogs,
    handlePageChange,
--- a/web/src/pages/Setting/Operation/SettingsChannelAffinity.jsx
+++ b/web/src/pages/Setting/Operation/SettingsChannelAffinity.jsx
@@ -73,6 +73,7 @@ const RULE_TEMPLATES = {
    key_sources: [{ type: 'gjson', path: 'prompt_cache_key' }],
    value_regex: '',
    ttl_seconds: 0,
+    skip_retry_on_failure: false,
    include_using_group: true,
    include_rule_name: true,
  },
@@ -83,6 +84,7 @@ const RULE_TEMPLATES = {
    key_sources: [{ type: 'gjson', path: 'metadata.user_id' }],
    value_regex: '',
    ttl_seconds: 0,
+    skip_retry_on_failure: false,
    include_using_group: true,
    include_rule_name: true,
  },
@@ -112,6 +114,7 @@ const RULES_JSON_PLACEHOLDER = `[
    ],
    "value_regex": "^[-0-9A-Za-z._:]{1,128}$",
    "ttl_seconds": 600,
+    "skip_retry_on_failure": false,
    "include_using_group": true,
    "include_rule_name": true
  }
@@ -153,7 +156,12 @@ const normalizeKeySource = (src) => {
  const type = (src?.type || '').trim();
  const key = (src?.key || '').trim();
  const path = (src?.path || '').trim();
-  return { type, key, path };
+
+  if (type === 'gjson') {
+    return { type, key: '', path };
+  }
+
+  return { type, key, path: '' };
 };

 const makeUniqueName = (existingNames, baseName) => {
@@ -229,6 +237,7 @@ export default function SettingsChannelAffinity(props) {
      user_agent_include_text: (r.user_agent_include || []).join('\n'),
      value_regex: r.value_regex || '',
      ttl_seconds: Number(r.ttl_seconds || 0),
+      skip_retry_on_failure: !!r.skip_retry_on_failure,
      include_using_group: r.include_using_group ?? true,
      include_rule_name: r.include_rule_name ?? true,
    };
@@ -523,6 +532,7 @@ export default function SettingsChannelAffinity(props) {
      key_sources: [{ type: 'gjson', path: '' }],
      value_regex: '',
      ttl_seconds: 0,
+      skip_retry_on_failure: false,
      include_using_group: true,
      include_rule_name: true,
    };
@@ -583,6 +593,9 @@ export default function SettingsChannelAffinity(props) {
        ttl_seconds: Number(values.ttl_seconds || 0),
        include_using_group: !!values.include_using_group,
        include_rule_name: !!values.include_rule_name,
+        ...(values.skip_retry_on_failure
+          ? { skip_retry_on_failure: true }
+          : {}),
        ...(userAgentInclude.length > 0
          ? { user_agent_include: userAgentInclude }
          : {}),
@@ -1041,6 +1054,18 @@ export default function SettingsChannelAffinity(props) {
                  </Text>
                </Col>
              </Row>
+
+              <Row gutter={16}>
+                <Col xs={24} sm={12}>
+                  <Form.Switch
+                    field='skip_retry_on_failure'
+                    label={t('失败后不重试')}
+                  />
+                  <Text type='tertiary' size='small'>
+                    {t('开启后，若该规则命中且请求失败，将不会切换渠道重试。')}
+                  </Text>
+                </Col>
+              </Row>
            </Collapse.Panel>
          </Collapse>

--- a/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
@@ -1,3 +1,21 @@
+/*
+Copyright (C) 2025 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 <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
 import React, { useEffect, useState, useRef } from 'react';
 import {
  Banner,
@@ -27,6 +45,7 @@ export default function SettingsPaymentGatewayCreem(props) {
    CreemProducts: '[]',
    CreemTestMode: false,
  });
+  const [originInputs, setOriginInputs] = useState({});
  const [products, setProducts] = useState([]);
  const [showProductModal, setShowProductModal] = useState(false);
  const [editingProduct, setEditingProduct] = useState(null);
@@ -48,6 +67,7 @@ export default function SettingsPaymentGatewayCreem(props) {
        CreemTestMode: props.options.CreemTestMode === 'true',
      };
      setInputs(currentInputs);
+      setOriginInputs({ ...currentInputs });
      formApiRef.current.setValues(currentInputs);

      // Parse products
@@ -107,6 +127,8 @@ export default function SettingsPaymentGatewayCreem(props) {
        });
      } else {
        showSuccess(t('更新成功'));
+        // 更新本地存储的原始值
+        setOriginInputs({ ...inputs });
        props.refresh?.();
      }
    } catch (error) {