feat: integrate site display type into pricing components

Add siteDisplayType prop across various pricing components to conditionally render pricing information based on the selected display type. This update enhances the user experience by ensuring that pricing details are accurately represented according to the chosen display mode, particularly for token-based views.
2026-03-07 00:23:36 +08:00
parent aa89ea2db5
commit 287af7ebee
26 changed files with 963 additions and 663 deletions
--- a/web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx
+++ b/web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx
@@ -25,6 +25,7 @@ const PricingDisplaySettings = ({
  setShowWithRecharge,
  currency,
  setCurrency,
+  siteDisplayType,
  showRatio,
  setShowRatio,
  viewMode,
@@ -34,11 +35,17 @@ const PricingDisplaySettings = ({
  loading = false,
  t,
 }) => {
+  const supportsCurrencyDisplay = siteDisplayType !== 'TOKENS';
+
  const items = [
-    {
-      value: 'recharge',
-      label: t('充值价格显示'),
-    },
+    ...(supportsCurrencyDisplay
+      ? [
+          {
+            value: 'recharge',
+            label: t('充值价格显示'),
+          },
+        ]
+      : []),
    {
      value: 'ratio',
      label: t('显示倍率'),
@@ -78,7 +85,7 @@ const PricingDisplaySettings = ({

  const getActiveValues = () => {
    const activeValues = [];
-    if (showWithRecharge) activeValues.push('recharge');
+    if (supportsCurrencyDisplay && showWithRecharge) activeValues.push('recharge');
    if (showRatio) activeValues.push('ratio');
    if (viewMode === 'table') activeValues.push('tableView');
    if (tokenUnit === 'K') activeValues.push('tokenUnit');
@@ -98,7 +105,7 @@ const PricingDisplaySettings = ({
        t={t}
      />

-      {showWithRecharge && (
+      {supportsCurrencyDisplay && showWithRecharge && (
        <SelectableButtonGroup
          title={t('货币单位')}
          items={currencyItems}
--- a/web/src/components/table/model-pricing/layout/PricingPage.jsx
+++ b/web/src/components/table/model-pricing/layout/PricingPage.jsx
@@ -70,6 +70,7 @@ const PricingPage = () => {
        groupRatio={pricingData.groupRatio}
        usableGroup={pricingData.usableGroup}
        currency={pricingData.currency}
+        siteDisplayType={pricingData.siteDisplayType}
        tokenUnit={pricingData.tokenUnit}
        displayPrice={pricingData.displayPrice}
        showRatio={allProps.showRatio}
--- a/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
@@ -40,6 +40,7 @@ const PricingTopSection = memo(
    setShowWithRecharge,
    currency,
    setCurrency,
+    siteDisplayType,
    showRatio,
    setShowRatio,
    viewMode,
@@ -68,6 +69,7 @@ const PricingTopSection = memo(
                setShowWithRecharge={setShowWithRecharge}
                currency={currency}
                setCurrency={setCurrency}
+                siteDisplayType={siteDisplayType}
                showRatio={showRatio}
                setShowRatio={setShowRatio}
                viewMode={viewMode}
@@ -103,6 +105,7 @@ const PricingTopSection = memo(
            setShowWithRecharge={setShowWithRecharge}
            currency={currency}
            setCurrency={setCurrency}
+            siteDisplayType={siteDisplayType}
            showRatio={showRatio}
            setShowRatio={setShowRatio}
            viewMode={viewMode}
--- a/web/src/components/table/model-pricing/layout/header/SearchActions.jsx
+++ b/web/src/components/table/model-pricing/layout/header/SearchActions.jsx
@@ -35,6 +35,7 @@ const SearchActions = memo(
    setShowWithRecharge,
    currency,
    setCurrency,
+    siteDisplayType,
    showRatio,
    setShowRatio,
    viewMode,
@@ -43,6 +44,8 @@ const SearchActions = memo(
    setTokenUnit,
    t,
  }) => {
+    const supportsCurrencyDisplay = siteDisplayType !== 'TOKENS';
+
    const handleCopyClick = useCallback(() => {
      if (copyText && selectedRowKeys.length > 0) {
        copyText(selectedRowKeys);
@@ -91,16 +94,18 @@ const SearchActions = memo(
            <Divider layout='vertical' margin='8px' />

            {/* 充值价格显示开关 */}
-            <div className='flex items-center gap-2'>
-              <span className='text-sm text-gray-600'>{t('充值价格显示')}</span>
-              <Switch
-                checked={showWithRecharge}
-                onChange={setShowWithRecharge}
-              />
-            </div>
+            {supportsCurrencyDisplay && (
+              <div className='flex items-center gap-2'>
+                <span className='text-sm text-gray-600'>{t('充值价格显示')}</span>
+                <Switch
+                  checked={showWithRecharge}
+                  onChange={setShowWithRecharge}
+                />
+              </div>
+            )}

            {/* 货币单位选择 */}
-            {showWithRecharge && (
+            {supportsCurrencyDisplay && showWithRecharge && (
              <Select
                value={currency}
                onChange={setCurrency}
--- a/web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx
+++ b/web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx
@@ -35,6 +35,7 @@ const ModelDetailSideSheet = ({
  modelData,
  groupRatio,
  currency,
+  siteDisplayType,
  tokenUnit,
  displayPrice,
  showRatio,
@@ -92,6 +93,7 @@ const ModelDetailSideSheet = ({
              modelData={modelData}
              groupRatio={groupRatio}
              currency={currency}
+              siteDisplayType={siteDisplayType}
              tokenUnit={tokenUnit}
              displayPrice={displayPrice}
              showRatio={showRatio}
--- a/web/src/components/table/model-pricing/modal/components/FilterModalContent.jsx
+++ b/web/src/components/table/model-pricing/modal/components/FilterModalContent.jsx
@@ -32,6 +32,7 @@ const FilterModalContent = ({ sidebarProps, t }) => {
    setShowWithRecharge,
    currency,
    setCurrency,
+    siteDisplayType,
    handleChange,
    setActiveKey,
    showRatio,
@@ -77,6 +78,7 @@ const FilterModalContent = ({ sidebarProps, t }) => {
        setShowWithRecharge={setShowWithRecharge}
        currency={currency}
        setCurrency={setCurrency}
+        siteDisplayType={siteDisplayType}
        showRatio={showRatio}
        setShowRatio={setShowRatio}
        viewMode={viewMode}
--- a/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
@@ -28,6 +28,7 @@ const ModelPricingTable = ({
  modelData,
  groupRatio,
  currency,
+  siteDisplayType,
  tokenUnit,
  displayPrice,
  showRatio,
@@ -57,6 +58,7 @@ const ModelPricingTable = ({
            tokenUnit,
            displayPrice,
            currency,
+            quotaDisplayType: siteDisplayType,
          })
        : { inputPrice: '-', outputPrice: '-', price: '-' };

@@ -74,7 +76,7 @@ const ModelPricingTable = ({
            : modelData?.quota_type === 1
              ? t('按次计费')
              : '-',
-        priceItems: getModelPriceItems(priceData, t),
+        priceItems: getModelPriceItems(priceData, t, siteDisplayType),
      };
    });

@@ -122,7 +124,7 @@ const ModelPricingTable = ({
    });

    columns.push({
-      title: t('价格摘要'),
+      title: siteDisplayType === 'TOKENS' ? t('计费摘要') : t('价格摘要'),
      dataIndex: 'priceItems',
      render: (items) => (
        <div className='space-y-1'>
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -67,6 +67,7 @@ const PricingCardView = ({
  setModalImageUrl,
  setIsModalOpenurl,
  currency,
+  siteDisplayType,
  tokenUnit,
  displayPrice,
  showRatio,
@@ -246,6 +247,7 @@ const PricingCardView = ({
            tokenUnit,
            displayPrice,
            currency,
+            quotaDisplayType: siteDisplayType,
          });

          return (
@@ -265,7 +267,7 @@ const PricingCardView = ({
                        {model.model_name}
                      </h3>
                      <div className='flex flex-col gap-1 text-xs mt-1'>
-                        {formatPriceInfo(priceData, t)}
+                        {formatPriceInfo(priceData, t, siteDisplayType)}
                      </div>
                    </div>
                  </div>
--- a/web/src/components/table/model-pricing/view/table/PricingTable.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
@@ -37,6 +37,7 @@ const PricingTable = ({
  setModalImageUrl,
  setIsModalOpenurl,
  currency,
+  siteDisplayType,
  tokenUnit,
  displayPrice,
  searchValue,
@@ -54,6 +55,7 @@ const PricingTable = ({
      setModalImageUrl,
      setIsModalOpenurl,
      currency,
+      siteDisplayType,
      tokenUnit,
      displayPrice,
      showRatio,
@@ -66,6 +68,7 @@ const PricingTable = ({
    setModalImageUrl,
    setIsModalOpenurl,
    currency,
+    siteDisplayType,
    tokenUnit,
    displayPrice,
    showRatio,
--- a/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
@@ -109,6 +109,7 @@ export const getPricingTableColumns = ({
  setModalImageUrl,
  setIsModalOpenurl,
  currency,
+  siteDisplayType,
  tokenUnit,
  displayPrice,
  showRatio,
@@ -126,6 +127,7 @@ export const getPricingTableColumns = ({
        tokenUnit,
        displayPrice,
        currency,
+        quotaDisplayType: siteDisplayType,
      });
      priceDataCache.set(record, cache);
    }
@@ -227,12 +229,12 @@ export const getPricingTableColumns = ({
  };

  const priceColumn = {
-    title: t('模型价格'),
+    title: siteDisplayType === 'TOKENS' ? t('计费摘要') : t('模型价格'),
    dataIndex: 'model_price',
    ...(isMobile ? {} : { fixed: 'right' }),
    render: (text, record, index) => {
      const priceData = getPriceData(record);
-      const priceItems = getModelPriceItems(priceData, t);
+      const priceItems = getModelPriceItems(priceData, t, siteDisplayType);

      return (
        <div className='space-y-1'>
--- a/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx
@@ -36,6 +36,10 @@ const ColumnSelectorModal = ({
  showUserInfoFunc,
  t,
 }) => {
+  const isTokensDisplay =
+    typeof localStorage !== 'undefined' &&
+    localStorage.getItem('quota_display_type') === 'TOKENS';
+
  // Get all columns for display in selector
  const allColumns = getLogsColumns({
    t,
@@ -71,8 +75,12 @@ const ColumnSelectorModal = ({
            value={billingDisplayMode}
            onChange={(event) => setBillingDisplayMode(event.target.value)}
          >
-            <Radio value='price'>{t('价格模式（默认）')}</Radio>
-            <Radio value='ratio'>{t('倍率模式')}</Radio>
+            <Radio value='price'>
+              {isTokensDisplay ? t('价格模式') : t('价格模式（默认）')}
+            </Radio>
+            <Radio value='ratio'>
+              {isTokensDisplay ? t('倍率模式（默认）') : t('倍率模式')}
+            </Radio>
          </RadioGroup>
        </div>
        <Checkbox