✨ feat: add subscription billing system with admin management and user purchase flow

Implement a new subscription-based billing model alongside existing metered/per-request billing:

Backend:
- Add subscription plan models (SubscriptionPlan, SubscriptionPlanItem, UserSubscription, etc.)
- Implement CRUD APIs for subscription plan management (admin only)
- Add user subscription queries with support for multiple active/expired subscriptions
- Integrate payment gateways (Stripe, Creem, Epay) for subscription purchases
- Implement pre-consume and post-consume billing logic for subscription quota tracking
- Add billing preference settings (subscription_first, wallet_first, etc.)
- Enhance usage logs with subscription deduction details

Frontend - Admin:
- Add subscription management page with table view and drawer-based edit form
- Match UI/UX style with existing admin pages (redemption codes, users)
- Support enabling/disabling plans, configuring payment IDs, and model quotas
- Add user subscription binding modal in user management

Frontend - Wallet:
- Add subscription plans card with current subscription status display
- Show all subscriptions (active and expired) with remaining days/usage percentage
- Display purchasable plans with pricing cards following SaaS best practices
- Extract purchase modal to separate component matching payment confirm modal style
- Add skeleton loading states with active animation
- Implement billing preference selector in card header
- Handle payment gateway availability based on admin configuration

Frontend - Usage Logs:
- Display subscription deduction details in log entries
- Show step-by-step breakdown of subscription usage (pre-consumed, delta, final, remaining)
- Add subscription deduction tag for subscription-covered requests

web/src/hooks/subscriptions/useSubscriptionsData.jsx

@@ -0,0 +1,144 @@
+/*
+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 { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { API, showError, showSuccess } from '../../helpers';
+import { useTableCompactMode } from '../common/useTableCompactMode';
+
+export const useSubscriptionsData = () => {
+  const { t } = useTranslation();
+  const [compactMode, setCompactMode] = useTableCompactMode('subscriptions');
+
+  // State management
+  const [plans, setPlans] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [pricingModels, setPricingModels] = useState([]);
+
+  // Drawer states
+  const [showEdit, setShowEdit] = useState(false);
+  const [editingPlan, setEditingPlan] = useState(null);
+  const [sheetPlacement, setSheetPlacement] = useState('left'); // 'left' | 'right'
+
+  // Load pricing models for dropdown
+  const loadModels = async () => {
+    try {
+      const res = await API.get('/api/pricing');
+      if (res.data?.success) {
+        setPricingModels(res.data.data || []);
+      }
+    } catch (e) {
+      setPricingModels([]);
+    }
+  };
+
+  // Load subscription plans
+  const loadPlans = async () => {
+    setLoading(true);
+    try {
+      const res = await API.get('/api/subscription/admin/plans');
+      if (res.data?.success) {
+        setPlans(res.data.data || []);
+      } else {
+        showError(res.data?.message || t('加载失败'));
+      }
+    } catch (e) {
+      showError(t('请求失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Refresh data
+  const refresh = async () => {
+    await loadPlans();
+  };
+
+  // Disable plan
+  const disablePlan = async (planId) => {
+    if (!planId) return;
+    setLoading(true);
+    try {
+      const res = await API.delete(`/api/subscription/admin/plans/${planId}`);
+      if (res.data?.success) {
+        showSuccess(t('已禁用'));
+        await loadPlans();
+      } else {
+        showError(res.data?.message || t('操作失败'));
+      }
+    } catch (e) {
+      showError(t('请求失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Modal control functions
+  const closeEdit = () => {
+    setShowEdit(false);
+    setEditingPlan(null);
+  };
+
+  const openCreate = () => {
+    setSheetPlacement('left');
+    setEditingPlan(null);
+    setShowEdit(true);
+  };
+
+  const openEdit = (planRecord) => {
+    setSheetPlacement('right');
+    setEditingPlan(planRecord);
+    setShowEdit(true);
+  };
+
+  // Initialize data on component mount
+  useEffect(() => {
+    loadModels();
+    loadPlans();
+  }, []);
+
+  return {
+    // Data state
+    plans,
+    loading,
+    pricingModels,
+
+    // Modal state
+    showEdit,
+    editingPlan,
+    sheetPlacement,
+    setShowEdit,
+    setEditingPlan,
+
+    // UI state
+    compactMode,
+    setCompactMode,
+
+    // Actions
+    loadPlans,
+    disablePlan,
+    refresh,
+    closeEdit,
+    openCreate,
+    openEdit,
+
+    // Translation
+    t,
+  };
+};