feat: 渠道展示、订阅套餐、系统配置全功能

- 新增 Channel / SubscriptionPlan / SystemConfig 三个数据模型
- Order 模型扩展支持订阅订单（order_type, plan_id, subscription_group_id）
- Sub2API client 新增分组查询、订阅分配/续期、用户订阅查询
- 订单服务支持订阅履约流程（CAS 锁 + 分组消失安全处理）
- 管理后台：渠道管理、订阅套餐管理、系统配置、Sub2API 分组同步
- 用户页面：双 Tab UI（按量付费/包月订阅）、渠道卡片、充值弹窗、订阅确认
- PaymentForm 支持 fixedAmount 固定金额模式
- 订单状态 API 返回 failedReason 用于订阅异常展示
- 数据库迁移脚本

src/components/PurchaseFlow.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import React from 'react';
+import type { Locale } from '@/lib/locale';
+import { pickLocaleText } from '@/lib/locale';
+
+interface PurchaseFlowProps {
+  isDark: boolean;
+  locale: Locale;
+}
+
+interface Step {
+  icon: React.ReactNode;
+  zh: string;
+  en: string;
+}
+
+const STEPS: Step[] = [
+  {
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+      </svg>
+    ),
+    zh: '选择套餐',
+    en: 'Select Plan',
+  },
+  {
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+      </svg>
+    ),
+    zh: '完成支付',
+    en: 'Complete Payment',
+  },
+  {
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+      </svg>
+    ),
+    zh: '获取激活码',
+    en: 'Get Activation',
+  },
+  {
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+      </svg>
+    ),
+    zh: '激活使用',
+    en: 'Start Using',
+  },
+];
+
+export default function PurchaseFlow({ isDark, locale }: PurchaseFlowProps) {
+  return (
+    <div
+      className={[
+        'rounded-2xl border p-6',
+        isDark ? 'border-slate-700 bg-slate-800/50' : 'border-slate-200 bg-slate-50',
+      ].join(' ')}
+    >
+      <h3 className={['mb-5 text-center text-sm font-medium', isDark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
+        {pickLocaleText(locale, '购买流程', 'How It Works')}
+      </h3>
+
+      {/* Desktop: horizontal */}
+      <div className="hidden items-center justify-center sm:flex">
+        {STEPS.map((step, idx) => (
+          <React.Fragment key={idx}>
+            {/* Step */}
+            <div className="flex flex-col items-center gap-2">
+              <div
+                className={[
+                  'flex h-12 w-12 items-center justify-center rounded-full',
+                  isDark ? 'bg-emerald-900/40 text-emerald-400' : 'bg-emerald-100 text-emerald-600',
+                ].join(' ')}
+              >
+                {step.icon}
+              </div>
+              <span className={['text-xs font-medium', isDark ? 'text-slate-300' : 'text-slate-600'].join(' ')}>
+                {pickLocaleText(locale, step.zh, step.en)}
+              </span>
+            </div>
+
+            {/* Connector */}
+            {idx < STEPS.length - 1 && (
+              <div
+                className={[
+                  'mx-4 h-px w-12 flex-shrink-0',
+                  isDark ? 'bg-slate-700' : 'bg-slate-300',
+                ].join(' ')}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* Mobile: vertical */}
+      <div className="flex flex-col items-start gap-0 sm:hidden">
+        {STEPS.map((step, idx) => (
+          <React.Fragment key={idx}>
+            {/* Step */}
+            <div className="flex items-center gap-3">
+              <div
+                className={[
+                  'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
+                  isDark ? 'bg-emerald-900/40 text-emerald-400' : 'bg-emerald-100 text-emerald-600',
+                ].join(' ')}
+              >
+                {step.icon}
+              </div>
+              <span className={['text-sm font-medium', isDark ? 'text-slate-300' : 'text-slate-600'].join(' ')}>
+                {pickLocaleText(locale, step.zh, step.en)}
+              </span>
+            </div>
+
+            {/* Connector */}
+            {idx < STEPS.length - 1 && (
+              <div
+                className={[
+                  'ml-5 h-6 w-px',
+                  isDark ? 'bg-slate-700' : 'bg-slate-300',
+                ].join(' ')}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}