扩展价格显示

src/views/computingResource/resourceList.vue

@@ -378,19 +378,36 @@
 
           <!-- 分档计费表格 -->
           <template v-else-if="selectedModelBillingMode === 'tiered_expr' && selectedModel.tiers">
-            <div class="tier-table">
-              <div class="tier-header">
-                <div class="tier-cell">档位</div>
-                <div class="tier-cell">输入 (¥/1M tokens)</div>
-                <div class="tier-cell">补全 (¥/1M tokens)</div>
-              </div>
-              <div v-for="(tier, index) in selectedModel.tiers" :key="index" class="tier-row">
-                <div class="tier-cell">
-                  <div class="tier-name">{{ tier.name }}</div>
-                  <div v-if="tier.conditionDesc" class="tier-condition">{{ tier.conditionDesc }}</div>
+            <div class="tier-table-wrapper">
+              <div class="tier-table">
+                <div class="tier-header">
+                  <div class="tier-cell header-cell">
+                    <div class="header-label">档位</div>
+                  </div>
+                  <div class="tier-cell header-cell">
+                    <div class="header-label">输入</div>
+                    <div class="header-unit">(¥/1M tokens)</div>
+                  </div>
+                  <div class="tier-cell header-cell">
+                    <div class="header-label">输出</div>
+                    <div class="header-unit">(¥/1M tokens)</div>
+                  </div>
+                  <div v-for="col in tierExtraPriceColumns" :key="col.key" class="tier-cell header-cell">
+                    <div class="header-label">{{ col.label }}</div>
+                    <div class="header-unit">(¥/1M tokens)</div>
+                  </div>
+                </div>
+                <div v-for="(tier, index) in selectedModel.tiers" :key="index" class="tier-row">
+                  <div class="tier-cell">
+                    <div class="tier-name">{{ tier.name }}</div>
+                    <div v-if="tier.conditionDesc" class="tier-condition">{{ tier.conditionDesc }}</div>
+                  </div>
+                  <div class="tier-cell price-cell">{{ formatModelPrice(tier.inputRatio) }}</div>
+                  <div class="tier-cell price-cell">{{ formatModelPrice(tier.outputRatio) }}</div>
+                  <div v-for="col in tierExtraPriceColumns" :key="col.key" class="tier-cell price-cell">
+                    {{ tier[col.key] != null && tier[col.key] > 0 ? formatModelPrice(tier[col.key]) : '-' }}
+                  </div>
                 </div>
-                <div class="tier-cell price-cell">{{ formatModelPrice(tier.inputRatio) }}</div>
-                <div class="tier-cell price-cell">{{ formatModelPrice(tier.outputRatio) }}</div>
               </div>
             </div>
           </template>
@@ -427,6 +444,18 @@
               <span class="price-label">缓存创建</span>
               <span class="price-value">¥{{ formatModelPrice(selectedModelCacheCreatePrice) }} / 1M tokens</span>
             </div>
+            <div v-if="selectedModel.imageInputPrice > 0" class="price-item">
+              <span class="price-label">图片输入价格</span>
+              <span class="price-value">¥{{ formatModelPrice(selectedModel.imageInputPrice) }} / 1M tokens</span>
+            </div>
+            <div v-if="selectedModel.audioInputPrice > 0" class="price-item">
+              <span class="price-label">音频输入价格</span>
+              <span class="price-value">¥{{ formatModelPrice(selectedModel.audioInputPrice) }} / 1M tokens</span>
+            </div>
+            <div v-if="selectedModel.audioCompletionPrice > 0" class="price-item">
+              <span class="price-label">音频补全价格</span>
+              <span class="price-value">¥{{ formatModelPrice(selectedModel.audioCompletionPrice) }} / 1M tokens</span>
+            </div>
           </template>
         </div>
       </template>
@@ -562,6 +591,46 @@ function formatConditionDesc(desc) {
   return result
 }
 
+// 判断分档表格需要显示哪些扩展价格列
+const tierExtraPriceColumns = computed(() => {
+  if (!selectedModel.value?.tiers || selectedModel.value.tiers.length === 0) {
+    return []
+  }
+  const columns = []
+  const tiers = selectedModel.value.tiers
+
+  // 检查缓存读取 (cr)
+  if (tiers.some(t => t.cacheReadRatio != null && t.cacheReadRatio > 0)) {
+    columns.push({ key: 'cacheReadRatio', label: '缓存读取' })
+  }
+  // 检查缓存创建5分钟 (cc)
+  if (tiers.some(t => t.cacheCreateRatio != null && t.cacheCreateRatio > 0)) {
+    columns.push({ key: 'cacheCreateRatio', label: '缓存创建' })
+  }
+  // 检查1小时缓存创建 (cc1h)
+  if (tiers.some(t => t.cacheCreate1hRatio != null && t.cacheCreate1hRatio > 0)) {
+    columns.push({ key: 'cacheCreate1hRatio', label: '1h缓存创建' })
+  }
+  // 检查图片输入 (img)
+  if (tiers.some(t => t.imageInputRatio != null && t.imageInputRatio > 0)) {
+    columns.push({ key: 'imageInputRatio', label: '图片输入' })
+  }
+  // 检查图片输出 (img_o)
+  if (tiers.some(t => t.imageOutputRatio != null && t.imageOutputRatio > 0)) {
+    columns.push({ key: 'imageOutputRatio', label: '图片输出' })
+  }
+  // 检查音频输入 (ai)
+  if (tiers.some(t => t.audioInputRatio != null && t.audioInputRatio > 0)) {
+    columns.push({ key: 'audioInputRatio', label: '音频输入' })
+  }
+  // 检查音频输出 (ao)
+  if (tiers.some(t => t.audioOutputRatio != null && t.audioOutputRatio > 0)) {
+    columns.push({ key: 'audioOutputRatio', label: '音频输出' })
+  }
+
+  return columns
+})
+
 const tagColors = ['primary', 'success', 'warning', 'danger', '']
 
 
@@ -1499,11 +1568,16 @@ onMounted(() => {
 }
 
 /* 分档计费表格 */
+.tier-table-wrapper {
+  overflow-x: auto;
+  margin-bottom: 16px;
+}
+
 .tier-table {
   border: 1px solid #ebeef5;
   border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 16px;
+  /* 基础列(档位,输入,输出)+扩展价格列(最多7列)，每列最小100px */
+  min-width: 1000px;
 }
 
 .tier-header {
@@ -1538,6 +1612,21 @@ onMounted(() => {
 
 .tier-header .tier-cell {
   text-align: center;
+  /* 表头单元格内的文字竖向排列 */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 50px;
+}
+
+.header-label {
+  font-weight: 600;
+}
+
+.header-unit {
+  font-size: 11px;
+  color: #909399;
+  margin-top: 4px;
 }
 
 .tier-name {