feat(pricing): 新增按模型分级定价表（C 方案：编程/高性能/低价好用）

在 Pricing 页 calc-section 之后、works-everywhere 之前插入 model pricing
section，3 组共 19 个模型卡片，参照对标站 aiberm 真实定价：

- 编程模型 (8): GPT-5.3 Codex -90% / Claude Opus 4.6 -81% 等
- 高性能模型 (7): Claude Opus 4.6 -26.4% / Gemini 3 Pro -63.2% 等
- 低价好用 (4): GPT-4o-mini -84.7% / Xiaomi Mimo -3% 等

样式沿用 puro 设计 token（card hover lift、provider 色卡）。
i18n 新增 pricing.modelPricing.* 命名空间（中英双语）。

frontend/src/i18n/locales/en.ts

@@ -6677,6 +6677,17 @@ export default {
       a10Link: 'docs',
       a10Part2: '. Full model list available in the docs.',
     },
+    modelPricing: {
+      kicker: '// model pricing',
+      title: 'Per-model pricing · transparent',
+      sub: 'Token-based billing with discount included. No monthly fees, no minimum. Prices shown per 1M tokens.',
+      groupCoding: 'Coding models',
+      groupPerformance: 'Premium models',
+      groupBudget: 'Budget-friendly',
+      inputLabel: 'Input',
+      outputLabel: 'Output',
+      unit: '/ 1M tokens',
+    },
     finalCta: {
       kicker: '// ready to start',
       title: 'Get your first sk-puro-* key in 5 minutes',

frontend/src/i18n/locales/zh.ts

@@ -6867,6 +6867,17 @@ export default {
       a10Link: '文档',
       a10Part2: '。',
     },
+    modelPricing: {
+      kicker: '// model pricing',
+      title: '按模型分级·透明定价',
+      sub: '按 token 计费，价格已含折扣。无月费、无最低消费。下方数字为每百万 tokens 单价。',
+      groupCoding: '编程模型',
+      groupPerformance: '高性能模型',
+      groupBudget: '低价好用模型',
+      inputLabel: 'Input',
+      outputLabel: 'Output',
+      unit: '/ 百万 tokens',
+    },
     finalCta: {
       kicker: '// ready to start',
       title: '5 分钟,拿到你第一个 sk-puro-* key',

frontend/src/views/pricing/PricingView.vue

@@ -161,6 +161,44 @@
       <PricingCalculator />
     </section>
 
+    <!-- MODEL PRICING TABLE -->
+    <section class="model-pricing-section" id="model-pricing">
+      <div class="section-head">
+        <div class="kicker">{{ $t('pricing.modelPricing.kicker') }}</div>
+        <h2>{{ $t('pricing.modelPricing.title') }}</h2>
+        <p>{{ $t('pricing.modelPricing.sub') }}</p>
+      </div>
+
+      <div v-for="group in modelGroups" :key="group.key" class="mp-group">
+        <h3 class="mp-group-title">{{ $t(group.titleKey) }}</h3>
+        <div class="mp-grid">
+          <div v-for="m in group.models" :key="m.name" class="mp-card">
+            <div class="mp-head">
+              <span class="mp-provider" :data-provider="m.provider">{{ m.provider }}</span>
+              <h4 class="mp-name">{{ m.name }}</h4>
+            </div>
+            <div class="mp-prices">
+              <div class="mp-price-row">
+                <div class="mp-label">{{ $t('pricing.modelPricing.inputLabel') }}</div>
+                <div class="mp-value">
+                  <span class="mp-amount">${{ m.input }}</span>
+                  <span class="mp-discount">{{ m.discount }}</span>
+                </div>
+              </div>
+              <div class="mp-price-row">
+                <div class="mp-label">{{ $t('pricing.modelPricing.outputLabel') }}</div>
+                <div class="mp-value">
+                  <span class="mp-amount">${{ m.output }}</span>
+                  <span class="mp-discount">{{ m.discount }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="mp-unit">{{ $t('pricing.modelPricing.unit') }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- WORKS EVERYWHERE -->
     <section class="works">
       <div class="section-head">
@@ -351,6 +389,46 @@ const customBonus = computed(() => {
   return 21
 })
 const customCredit = computed(() => Math.round(customAmt.value * (1 + customBonus.value / 100)))
+
+const modelGroups = [
+  {
+    key: 'coding',
+    titleKey: 'pricing.modelPricing.groupCoding',
+    models: [
+      { name: 'GPT-5.3 Codex', provider: 'OpenAI', input: '0.179', output: '1.435', discount: '-90%' },
+      { name: 'GPT-5.2 Codex', provider: 'OpenAI', input: '0.690', output: '5.520', discount: '-60.6%' },
+      { name: 'Claude Opus 4.6', provider: 'Anthropic', input: '0.950', output: '4.750', discount: '-81%' },
+      { name: 'Claude Opus 4.5', provider: 'Anthropic', input: '0.950', output: '4.750', discount: '-81%' },
+      { name: 'Claude Sonnet 4.5', provider: 'Anthropic', input: '0.570', output: '2.850', discount: '-81%' },
+      { name: 'Claude Haiku 4.5', provider: 'Anthropic', input: '0.190', output: '0.950', discount: '-24%' },
+      { name: 'Grok Code Fast 1', provider: 'xAI', input: '0.147', output: '1.104', discount: '-26.5%' },
+      { name: 'MiniMax m2.1', provider: 'MiniMax', input: '0.230', output: '0.954', discount: '-14.8%' }
+    ]
+  },
+  {
+    key: 'performance',
+    titleKey: 'pricing.modelPricing.groupPerformance',
+    models: [
+      { name: 'Claude Opus 4.6', provider: 'Anthropic', input: '3.680', output: '18.400', discount: '-26.4%' },
+      { name: 'Claude Opus 4.5', provider: 'Anthropic', input: '3.680', output: '18.400', discount: '-26.4%' },
+      { name: 'Claude Sonnet 4.5', provider: 'Anthropic', input: '2.668', output: '13.340', discount: '-11.1%' },
+      { name: 'GPT-5.2', provider: 'OpenAI', input: '0.690', output: '5.520', discount: '-60.6%' },
+      { name: 'Gemini 3 Pro', provider: 'Google', input: '0.460', output: '2.760', discount: '-63.2%' },
+      { name: 'DeepSeek v3.2', provider: 'DeepSeek', input: '0.207', output: '0.311', discount: '-26.1%' },
+      { name: 'Grok 4.1 Fast', provider: 'xAI', input: '0.156', output: '0.391', discount: '-22%' }
+    ]
+  },
+  {
+    key: 'budget',
+    titleKey: 'pricing.modelPricing.groupBudget',
+    models: [
+      { name: 'GPT-5-mini', provider: 'OpenAI', input: '0.069', output: '0.552', discount: '-72.4%' },
+      { name: 'GPT-4o-mini', provider: 'OpenAI', input: '0.023', output: '0.092', discount: '-84.7%' },
+      { name: 'Gemini 3 Flash', provider: 'Google', input: '0.083', output: '0.662', discount: '-83.4%' },
+      { name: 'Xiaomi Mimo v2', provider: 'Xiaomi', input: '0.097', output: '0.290', discount: '-3%' }
+    ]
+  }
+]
 </script>
 
 <style scoped>
@@ -478,9 +556,130 @@ const customCredit = computed(() => Math.round(customAmt.value * (1 + customBonu
 .hex { width: 24px; height: 24px; color: var(--cyan); }
 .nav-links .active { color: var(--cyan); }
 
+/* ===== Model Pricing Section ===== */
+.model-pricing-section {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 40px 32px 60px;
+}
+.mp-group {
+  margin-top: 32px;
+}
+.mp-group:first-of-type {
+  margin-top: 0;
+}
+.mp-group-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-1);
+  margin-bottom: 16px;
+  padding-left: 4px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.04em;
+}
+.mp-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+.mp-card {
+  padding: 18px 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  background: rgba(15, 23, 42, 0.4);
+  transition: all .2s;
+}
+.mp-card:hover {
+  border-color: rgba(34, 211, 238, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px -10px rgba(34, 211, 238, 0.15);
+}
+.mp-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.mp-provider {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: rgba(148, 163, 184, 0.12);
+  color: var(--text-2);
+  border: 1px solid var(--border);
+}
+.mp-provider[data-provider="OpenAI"] { background: rgba(16, 163, 127, 0.12); color: #10a37f; border-color: rgba(16, 163, 127, 0.3); }
+.mp-provider[data-provider="Anthropic"] { background: rgba(217, 119, 87, 0.12); color: #d97757; border-color: rgba(217, 119, 87, 0.3); }
+.mp-provider[data-provider="Google"] { background: rgba(66, 133, 244, 0.12); color: #4285f4; border-color: rgba(66, 133, 244, 0.3); }
+.mp-provider[data-provider="xAI"] { background: rgba(168, 85, 247, 0.12); color: #a855f7; border-color: rgba(168, 85, 247, 0.3); }
+.mp-provider[data-provider="DeepSeek"] { background: rgba(96, 165, 250, 0.12); color: #60a5fa; border-color: rgba(96, 165, 250, 0.3); }
+.mp-provider[data-provider="MiniMax"] { background: rgba(251, 191, 36, 0.12); color: var(--amber); border-color: rgba(251, 191, 36, 0.3); }
+.mp-provider[data-provider="Xiaomi"] { background: rgba(248, 113, 113, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.3); }
+.mp-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-0);
+  margin: 0;
+  word-break: break-word;
+}
+.mp-prices {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.mp-price-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+.mp-label {
+  font-size: 11px;
+  color: var(--text-3);
+  font-family: var(--font-mono);
+  letter-spacing: 0.06em;
+}
+.mp-value {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+}
+.mp-amount {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-0);
+}
+.mp-discount {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--green, #34d399);
+  background: rgba(52, 211, 153, 0.1);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+.mp-unit {
+  font-size: 10px;
+  color: var(--text-3);
+  font-family: var(--font-mono);
+  margin-top: 10px;
+  text-align: right;
+  letter-spacing: 0.04em;
+}
+
 @media (max-width: 960px) {
   .pricing-grid { grid-template-columns: 1fr 1fr; }
   .custom-row { grid-template-columns: 1fr; }
   .tools-grid { grid-template-columns: repeat(3, 1fr); }
+  .mp-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 640px) {
+  .mp-grid { grid-template-columns: 1fr; }
 }
 </style>