@blocklet/payment-react 1.20.16 → 1.20.18

package/docs/guides-utilities.ja.md

@@ -0,0 +1,197 @@
+# ユーティリティ
+
+`@blocklet/payment-react` ライブラリは、APIリクエストの作成、キャッシュの管理、日付の処理、価格のフォーマット、国際化の設定といった一般的なタスクを簡素化するために設計された一連のユーティリティ関数とクラスをエクスポートします。これらのツールは、ライブラリのコンポーネントやプロバイダーとシームレスに連携するように構築されています。
+
+## APIクライアント
+
+ライブラリは、支払いバックエンドへのAPIリクエストを行うための事前設定済みAxiosインスタンスを提供します。ベースURLやその他の必要な設定を自動的に処理します。
+
+```tsx API Client Usage icon=logos:javascript
+import { api } from '@blocklet/payment-react';
+
+// 基本的なGETリクエスト
+const getPayments = async () => {
+  const response = await api.get('/api/payments');
+  return response.data;
+};
+
+// ペイロード付きのPOSTリクエスト
+const createCheckout = async (amount) => {
+  const data = await api.post('/api/checkout', { amount });
+  return data;
+};
+
+// クエリパラメータ付きのGETリクエスト
+const getPaidInvoices = async () => {
+  const results = await api.get('/api/invoices', { 
+    params: { status: 'paid' } 
+  });
+  return results.data;
+};
+
+// 追加設定付きのPUTリクエスト
+const updateSubscription = async (data) => {
+  const config = { 
+    headers: { 'Custom-Header': 'value' }
+  };
+  const response = await api.put('/api/subscription', data, config);
+  return response.data;
+};
+```
+
+## CachedRequest
+
+パフォーマンスを最適化し、冗長なネットワークリクエストを削減するために、`CachedRequest` クラスを使用できます。これは、設定可能な戦略と生存期間（TTL）でデータをキャッシュする簡単な方法を提供します。
+
+### 設定オプション
+
+`CachedRequest` インスタンスを作成する際に、以下のオプションを指定できます：
+
+| オプション | タイプ | 説明 | デフォルト |
+| :--- | :--- | :--- | :--- |
+| `strategy` | `'session' \| 'local' \| 'memory'` | キャッシュのストレージメカニズム。 | `'session'` |
+| `ttl` | `number` | キャッシュの生存期間（ミリ秒）。`0` の値は有効期限がないことを意味します。 | `0` |
+
+### 使用例
+
+ここでは、製品価格を取得するためのキャッシュ付きリクエストの作成方法と使用方法を示します。
+
+```tsx CachedRequest Example icon=logos:javascript
+import { CachedRequest, api } from '@blocklet/payment-react';
+
+// 1. キャッシュ付きリクエストインスタンスを作成
+const priceRequest = new CachedRequest(
+  'product-prices', 
+  () => api.get('/api/prices'),
+  {
+    strategy: 'session',  // sessionStorageにデータをキャッシュ
+    ttl: 5 * 60 * 1000   // 5分間キャッシュ
+  }
+);
+
+// 2. コンポーネントでキャッシュ付きリクエストを使用
+async function fetchPrices() {
+  // キャッシュが利用可能で期限切れでない場合、キャッシュが使用されます
+  const prices = await priceRequest.fetch();
+  
+  // キャッシュをバイパスして強制的に新しいデータを取得する
+  const freshPrices = await priceRequest.fetch(true);
+  
+  return prices;
+}
+
+// 3. データが変更されたときにキャッシュをクリア
+async function updatePrices() {
+  await api.post('/api/prices', newPriceData);
+  priceRequest.clearCache(); // または await priceRequest.fetch(true);
+}
+```
+
+## 日付処理
+
+ライブラリは、`relativeTime`、`utc`、`timezone` のような便利なプラグインが既に含まれた事前設定済みの `dayjs` インスタンスを再エクスポートします。これを任意の日時操作のニーズに使用できます。
+
+```tsx Date Handling with dayjs icon=logos:javascript
+import { dayjs } from '@blocklet/payment-react';
+
+// 現在の日付をフォーマット
+const formattedDate = dayjs().format('YYYY-MM-DD HH:mm');
+
+// タイムスタンプをパース
+const dateFromTimestamp = dayjs(1672531200000);
+const unixTimestamp = dateFromTimestamp.unix();
+
+// 相対時間を計算
+const fiveMinutesAgo = dayjs().subtract(5, 'minute');
+const relativeTime = dayjs().from(fiveMinutesAgo); // "5 minutes ago"
+```
+
+## 国際化 (i18n)
+
+`@blocklet/payment-react` には、i18nの組み込みサポートが含まれています。独自の翻訳機を作成するか、ライブラリのデフォルト翻訳とマージすることができます。
+
+### 翻訳機の作成
+
+`createTranslator` 関数を使用して、独自の翻訳インスタンスを設定します。
+
+```tsx Custom Translator Setup icon=logos:javascript
+import { createTranslator } from '@blocklet/payment-react';
+
+const myTranslations = {
+  en: { 
+    checkout: { title: 'Complete Payment' }
+  },
+  zh: { 
+    checkout: { title: '完成支付' }
+  }
+};
+
+const translator = createTranslator({ fallbackLocale: 'en' }, myTranslations);
+
+translator('checkout.title', 'zh'); // '完成支付'
+```
+
+### ライブラリ翻訳とのマージ
+
+コンポーネント用にライブラリの組み込み翻訳を活用しつつ、独自の翻訳を追加するには、それらをマージします。
+
+```tsx Merging Translations icon=logos:javascript
+import { translations as paymentTranslations } from '@blocklet/payment-react';
+import merge from 'lodash/merge';
+
+// アプリケーションの翻訳
+import en from './locales/en';
+import zh from './locales/zh';
+
+export const translations = merge(
+  {
+    en,
+    zh,
+  },
+  paymentTranslations
+);
+```
+
+## フォーマットユーティリティ
+
+表示用のデータをフォーマットするためのヘルパー関数がいくつか利用可能です。
+
+| 関数 | 説明 |
+| :--- | :--- |
+| `formatPrice` | 価格オブジェクトを、定期的な間隔を考慮して人間が読める文字列にフォーマットします。 |
+| `formatRecurring` | 定期的なオブジェクトを "monthly" や "every 3 months" のような文字列にフォーマットします。 |
+| `formatBNStr` | 基本単位からのBigNumber文字列を、指定された精度のトークン値にフォーマットします。 |
+| `formatNumber` | 数値または文字列を、千単位の区切り文字と精度でフォーマットします。 |
+| `formatError` | 様々なエラーフォーマット（GraphQL, Joi, Axios）を読みやすい文字列にパースします。 |
+
+```tsx Formatting Example icon=logos:javascript
+import { formatNumber, formatRecurring } from '@blocklet/payment-react';
+
+// 数値をフォーマット
+const formatted = formatNumber('1234567.89123', 2); // "1,234,567.89"
+
+// 定期的な間隔をフォーマット
+const monthly = formatRecurring({ interval: 'month', interval_count: 1 }); // "per month"
+const quarterly = formatRecurring({ interval: 'month', interval_count: 3 }); // "Quarterly"
+```
+
+## バリデーションユーティリティ
+
+ライブラリには、フォームバリデーション用のヘルパーも含まれています。
+
+### `validatePostalCode`
+
+指定された郵便番号が特定の国で有効かどうかをチェックします。
+
+```tsx Postal Code Validation icon=logos:javascript
+import { validatePostalCode } from '@blocklet/payment-react';
+
+// trueを返します
+const isValidUS = validatePostalCode('90210', 'US');
+
+// falseを返します
+const isInvalidUS = validatePostalCode('ABC-123', 'US');
+
+// 英国の郵便番号に対してtrueを返します
+const isValidGB = validatePostalCode('SW1A 0AA', 'GB');
+```

package/docs/guides-utilities.zh-TW.md

@@ -0,0 +1,197 @@
+# 工具程式
+
+`@blocklet/payment-react` 函式庫匯出一系列工具函式與類別，旨在簡化常見任務，如發送 API 請求、管理快取、處理日期、格式化價格以及設定國際化。這些工具的設計能與函式庫的元件和提供者無縫協作。
+
+## API 客戶端
+
+該函式庫提供了一個預先設定的 Axios 實例，可用於向您的支付後端發送 API 請求。它會自動處理基礎 URL 和其他必要的設定。
+
+```tsx API Client Usage icon=logos:javascript
+import { api } from '@blocklet/payment-react';
+
+// 基本的 GET 請求
+const getPayments = async () => {
+  const response = await api.get('/api/payments');
+  return response.data;
+};
+
+// 帶有 payload 的 POST 請求
+const createCheckout = async (amount) => {
+  const data = await api.post('/api/checkout', { amount });
+  return data;
+};
+
+// 帶有查詢參數的 GET 請求
+const getPaidInvoices = async () => {
+  const results = await api.get('/api/invoices', { 
+    params: { status: 'paid' } 
+  });
+  return results.data;
+};
+
+// 帶有額外設定的 PUT 請求
+const updateSubscription = async (data) => {
+  const config = { 
+    headers: { 'Custom-Header': 'value' }
+  };
+  const response = await api.put('/api/subscription', data, config);
+  return response.data;
+};
+```
+
+## CachedRequest
+
+為優化效能並減少不必要的網路請求，您可以使用 `CachedRequest` 類別。它提供了一種簡單的方式來快取資料，並具備可設定的策略和存留時間 (TTL)。
+
+### 設定選項
+
+建立 `CachedRequest` 實例時，您可以提供以下選項：
+
+| Option | Type | Description | Default |
+| :--- | :--- | :--- | :--- |
+| `strategy` | `'session' \| 'local' \| 'memory'` | 快取的儲存機制。 | `'session'` |
+| `ttl` | `number` | 快取的存留時間（毫秒）。值為 `0` 表示永不過期。 | `0` |
+
+### 使用範例
+
+以下是如何建立和使用快取請求來擷取產品價格。
+
+```tsx CachedRequest Example icon=logos:javascript
+import { CachedRequest, api } from '@blocklet/payment-react';
+
+// 1. 建立快取請求實例
+const priceRequest = new CachedRequest(
+  'product-prices', 
+  () => api.get('/api/prices'),
+  {
+    strategy: 'session',  // 將資料快取在 sessionStorage 中
+    ttl: 5 * 60 * 1000   // 快取 5 分鐘
+  }
+);
+
+// 2. 在您的元件中使用快取請求
+async function fetchPrices() {
+  // 如果快取可用且未過期，將會使用快取
+  const prices = await priceRequest.fetch();
+  
+  // 繞過快取並強制重新擷取資料
+  const freshPrices = await priceRequest.fetch(true);
+  
+  return prices;
+}
+
+// 3. 當資料變更時清除快取
+async function updatePrices() {
+  await api.post('/api/prices', newPriceData);
+  priceRequest.clearCache(); // 或 await priceRequest.fetch(true);
+}
+```
+
+## 日期處理
+
+該函式庫重新匯出了一個預先設定的 `dayjs` 實例，其中已包含 `relativeTime`、`utc` 和 `timezone` 等實用外掛程式。您可以用它來滿足任何日期和時間的操作需求。
+
+```tsx Date Handling with dayjs icon=logos:javascript
+import { dayjs } from '@blocklet/payment-react';
+
+// 格式化目前日期
+const formattedDate = dayjs().format('YYYY-MM-DD HH:mm');
+
+// 解析時間戳
+const dateFromTimestamp = dayjs(1672531200000);
+const unixTimestamp = dateFromTimestamp.unix();
+
+// 計算相對時間
+const fiveMinutesAgo = dayjs().subtract(5, 'minute');
+const relativeTime = dayjs().from(fiveMinutesAgo); // "5 分鐘前"
+```
+
+## 國際化 (i18n)
+
+`@blocklet/payment-react` 內建支援 i18n。您可以建立自己的翻譯器，或將您的翻譯與函式庫的預設翻譯合併。
+
+### 建立翻譯器
+
+使用 `createTranslator` 函式來設定您自己的翻譯實例。
+
+```tsx Custom Translator Setup icon=logos:javascript
+import { createTranslator } from '@blocklet/payment-react';
+
+const myTranslations = {
+  en: { 
+    checkout: { title: 'Complete Payment' }
+  },
+  zh: { 
+    checkout: { title: '完成支付' }
+  }
+};
+
+const translator = createTranslator({ fallbackLocale: 'en' }, myTranslations);
+
+translator('checkout.title', 'zh'); // '完成支付'
+```
+
+### 與函式庫翻譯合併
+
+為利用函式庫為元件提供的內建翻譯，同時加入您自己的翻譯，您可以將它們合併在一起。
+
+```tsx Merging Translations icon=logos:javascript
+import { translations as paymentTranslations } from '@blocklet/payment-react';
+import merge from 'lodash/merge';
+
+// 您應用程式的翻譯
+import en from './locales/en';
+import zh from './locales/zh';
+
+export const translations = merge(
+  {
+    en,
+    zh,
+  },
+  paymentTranslations
+);
+```
+
+## 格式化工具程式
+
+提供數個輔助函式可用於格式化顯示資料。
+
+| Function | Description |
+| :--- | :--- |
+| `formatPrice` | 將價格物件格式化為人類可讀的字串，同時考慮定期區間。 |
+| `formatRecurring` | 將定期物件格式化為「每月」或「每 3 個月」等字串。 |
+| `formatBNStr` | 將 BigNumber 字串從基本單位格式化為具有指定精度的代幣值。 |
+| `formatNumber` | 將數字或字串格式化，加上千分位分隔符和精度。 |
+| `formatError` | 將各種錯誤格式（GraphQL、Joi、Axios）解析為可讀的字串。 |
+
+```tsx Formatting Example icon=logos:javascript
+import { formatNumber, formatRecurring } from '@blocklet/payment-react';
+
+// 格式化數字
+const formatted = formatNumber('1234567.89123', 2); // "1,234,567.89"
+
+// 格式化定期區間
+const monthly = formatRecurring({ interval: 'month', interval_count: 1 }); // "每月"
+const quarterly = formatRecurring({ interval: 'month', interval_count: 3 }); // "每季"
+```
+
+## 驗證工具程式
+
+該函式庫也包含用於表單驗證的輔助工具。
+
+### `validatePostalCode`
+
+檢查給定的郵遞區號對於特定國家是否有效。
+
+```tsx Postal Code Validation icon=logos:javascript
+import { validatePostalCode } from '@blocklet/payment-react';
+
+// 回傳 true
+const isValidUS = validatePostalCode('90210', 'US');
+
+// 回傳 false
+const isInvalidUS = validatePostalCode('ABC-123', 'US');
+
+// 對於英國郵遞區號，回傳 true
+const isValidGB = validatePostalCode('SW1A 0AA', 'GB');
+```

package/docs/guides-utilities.zh.md

@@ -0,0 +1,197 @@
+# 工具函数
+
+`@blocklet/payment-react` 库导出了一套工具函数和类，旨在简化常见任务，例如发出 API 请求、管理缓存、处理日期、格式化价格和设置国际化。这些工具旨在与库的组件和提供程序无缝协作。
+
+## API 客户端
+
+该库提供了一个预配置的 Axios 实例，用于向你的支付后端发出 API 请求。它会自动处理基本 URL 和其他必要的配置。
+
+```tsx API Client Usage icon=logos:javascript
+import { api } from '@blocklet/payment-react';
+
+// 基本的 GET 请求
+const getPayments = async () => {
+  const response = await api.get('/api/payments');
+  return response.data;
+};
+
+// 带负载的 POST 请求
+const createCheckout = async (amount) => {
+  const data = await api.post('/api/checkout', { amount });
+  return data;
+};
+
+// 带查询参数的 GET 请求
+const getPaidInvoices = async () => {
+  const results = await api.get('/api/invoices', { 
+    params: { status: 'paid' } 
+  });
+  return results.data;
+};
+
+// 带附加配置的 PUT 请求
+const updateSubscription = async (data) => {
+  const config = { 
+    headers: { 'Custom-Header': 'value' }
+  };
+  const response = await api.put('/api/subscription', data, config);
+  return response.data;
+};
+```
+
+## CachedRequest
+
+为了优化性能并减少冗余的网络请求，你可以使用 `CachedRequest` 类。它提供了一种简单的方法来缓存数据，具有可配置的策略和生存时间（TTL）。
+
+### 配置选项
+
+在创建 `CachedRequest` 实例时，你可以提供以下选项：
+
+| 选项 | 类型 | 描述 | 默认值 |
+| :--- | :--- | :--- | :--- |
+| `strategy` | `'session' \| 'local' \| 'memory'` | 缓存的存储机制。 | `'session'` |
+| `ttl` | `number` | 缓存的生存时间（毫秒）。值为 `0` 表示永不过期。 | `0` |
+
+### 使用示例
+
+以下是如何创建和使用缓存请求来获取产品价格的示例。
+
+```tsx CachedRequest Example icon=logos:javascript
+import { CachedRequest, api } from '@blocklet/payment-react';
+
+// 1. 创建一个缓存请求实例
+const priceRequest = new CachedRequest(
+  'product-prices', 
+  () => api.get('/api/prices'),
+  {
+    strategy: 'session',  // 在 sessionStorage 中缓存数据
+    ttl: 5 * 60 * 1000   // 缓存 5 分钟
+  }
+);
+
+// 2. 在你的组件中使用缓存请求
+async function fetchPrices() {
+  // 如果缓存可用且未过期，将使用缓存
+  const prices = await priceRequest.fetch();
+  
+  // 绕过缓存并强制获取新数据
+  const freshPrices = await priceRequest.fetch(true);
+  
+  return prices;
+}
+
+// 3. 当数据发生变化时清除缓存
+async function updatePrices() {
+  await api.post('/api/prices', newPriceData);
+  priceRequest.clearCache(); // 或者 await priceRequest.fetch(true);
+}
+```
+
+## 日期处理
+
+该库重新导出了一个预配置的 `dayjs` 实例，其中已包含 `relativeTime`、`utc` 和 `timezone` 等有用的插件。你可以用它来满足任何日期和时间操作的需求。
+
+```tsx Date Handling with dayjs icon=logos:javascript
+import { dayjs } from '@blocklet/payment-react';
+
+// 格式化当前日期
+const formattedDate = dayjs().format('YYYY-MM-DD HH:mm');
+
+// 解析时间戳
+const dateFromTimestamp = dayjs(1672531200000);
+const unixTimestamp = dateFromTimestamp.unix();
+
+// 计算相对时间
+const fiveMinutesAgo = dayjs().subtract(5, 'minute');
+const relativeTime = dayjs().from(fiveMinutesAgo); // "5 分钟前"
+```
+
+## 国际化 (i18n)
+
+`@blocklet/payment-react` 内置了对 i18n 的支持。你可以创建自己的翻译器，也可以将你的翻译与库的默认翻译合并。
+
+### 创建翻译器
+
+使用 `createTranslator` 函数来设置你自己的翻译实例。
+
+```tsx Custom Translator Setup icon=logos:javascript
+import { createTranslator } from '@blocklet/payment-react';
+
+const myTranslations = {
+  en: { 
+    checkout: { title: 'Complete Payment' }
+  },
+  zh: { 
+    checkout: { title: '完成支付' }
+  }
+};
+
+const translator = createTranslator({ fallbackLocale: 'en' }, myTranslations);
+
+translator('checkout.title', 'zh'); // '完成支付'
+```
+
+### 与库翻译合并
+
+为了在添加自己的翻译的同时利用库为组件提供的内置翻译，你可以将它们合并在一起。
+
+```tsx Merging Translations icon=logos:javascript
+import { translations as paymentTranslations } from '@blocklet/payment-react';
+import merge from 'lodash/merge';
+
+// 你的应用程序的翻译
+import en from './locales/en';
+import zh from './locales/zh';
+
+export const translations = merge(
+  {
+    en,
+    zh,
+  },
+  paymentTranslations
+);
+```
+
+## 格式化工具
+
+有几个辅助函数可用于格式化数据显示。
+
+| 函数 | 描述 |
+| :--- | :--- |
+| `formatPrice` | 将价格对象格式化为人类可读的字符串，并考虑重复周期。 |
+| `formatRecurring` | 将重复周期对象格式化为“每月”或“每 3 个月”之类的字符串。 |
+| `formatBNStr` | 将 BigNumber 字符串从基本单位格式化为具有指定精度的代币值。 |
+| `formatNumber` | 使用千位分隔符和指定精度格式化数字或字符串。 |
+| `formatError` | 将各种错误格式（GraphQL、Joi、Axios）解析为可读的字符串。 |
+
+```tsx Formatting Example icon=logos:javascript
+import { formatNumber, formatRecurring } from '@blocklet/payment-react';
+
+// 格式化数字
+const formatted = formatNumber('1234567.89123', 2); // "1,234,567.89"
+
+// 格式化重复周期
+const monthly = formatRecurring({ interval: 'month', interval_count: 1 }); // "每月"
+const quarterly = formatRecurring({ interval: 'month', interval_count: 3 }); // "每季度"
+```
+
+## 验证工具
+
+该库还包含用于表单验证的辅助函数。
+
+### `validatePostalCode`
+
+检查给定的邮政编码对于特定国家是否有效。
+
+```tsx Postal Code Validation icon=logos:javascript
+import { validatePostalCode } from '@blocklet/payment-react';
+
+// 返回 true
+const isValidUS = validatePostalCode('90210', 'US');
+
+// 返回 false
+const isInvalidUS = validatePostalCode('ABC-123', 'US');
+
+// 对于英国邮政编码，返回 true
+const isValidGB = validatePostalCode('SW1A 0AA', 'GB');
+```

package/docs/guides.ja.md

@@ -0,0 +1,18 @@
+# ガイド
+
+ガイドセクションへようこそ。ここでは、個々のコンポーネントの使用法を超えた高度なトピックに関する詳細な記事をご紹介します。これらのガイドは、ライブラリの外観をカスタマイズし、強力なユーティリティ関数を活用して、より高度な決済ソリューションを構築するために設計されています。
+
+以下のガイドを参考にして、テーマ設定とユーティリティをマスターしましょう。
+
+<x-cards data-columns="2">
+  <x-card data-title="テーマ設定" data-icon="lucide:palette" data-href="/guides/theming">
+    アプリケーションのデザインシステムに合わせて決済コンポーネントの外観をカスタマイズする方法を学びます。このガイドでは、組み込みのテーマプロバイダーの使用、Material-UIのテーマオプションによるスタイルの上書き、カスタムCSSの適用について説明します。
+  </x-card>
+  <x-card data-title="ユーティリティ" data-icon="lucide:wrench" data-href="/guides/utilities">
+    APIリクエストの処理、データのキャッシュ、日付と金額のフォーマット、国際化の管理を行うための強力なユーティリティ関数のコレクションをご覧ください。このガイドは、よりクリーンで効率的なコードを書くのに役立ちます。
+  </x-card>
+</x-cards>
+
+これらのガイドを読んだ後は、ライブラリが提供するカスタムReactフックについて学ぶのも良いでしょう。
+
+➡️ **次へ: [フック](./hooks.md)**

package/docs/guides.zh-TW.md

@@ -0,0 +1,18 @@
+# 指南
+
+歡迎來到指南部分。在這裡，您將找到關於進階主題的深入文章，這些主題超越了單一組件的用法。這些指南旨在幫助您自訂程式庫的外觀，並利用其強大的實用程式函數來建構更複雜的支付解決方案。
+
+探索下面的指南以精通主題化和實用程式。
+
+<x-cards data-columns="2">
+  <x-card data-title="主題化" data-icon="lucide:palette" data-href="/guides/theming">
+    學習如何自訂支付組件的外觀和風格，以符合您應用程式的設計系統。本指南涵蓋了使用內建的主題提供者、使用 Material-UI 主題選項覆寫樣式，以及應用自訂 CSS。
+  </x-card>
+  <x-card data-title="實用程式" data-icon="lucide:wrench" data-href="/guides/utilities">
+    探索一系列強大的實用程式函數，用於處理 API 請求、快取資料、格式化日期和金額，以及管理國際化。本指南將幫助您編寫更簡潔、更高效的程式碼。
+  </x-card>
+</x-cards>
+
+探索完這些指南後，您可能會有興趣了解程式庫提供的自訂 React hooks。
+
+➡️ **下一步：[Hooks](./hooks.md)**

package/docs/guides.zh.md

@@ -0,0 +1,18 @@
+# 指南
+
+欢迎来到指南部分。在这里，您将找到关于超出单个组件使用范围的高级主题的深入文章。这些指南旨在帮助您自定义库的外观，并利用其强大的实用功能来构建更复杂的支付解决方案。
+
+浏览下面的指南以掌握主题和实用程序。
+
+<x-cards data-columns="2">
+  <x-card data-title="主题化" data-icon="lucide:palette" data-href="/guides/theming">
+    学习如何自定义支付组件的外观和感觉，以匹配您应用程序的设计系统。本指南涵盖了使用内置主题提供程序、使用 Material-UI 主题选项覆盖样式以及应用自定义 CSS。
+  </x-card>
+  <x-card data-title="实用程序" data-icon="lucide:wrench" data-href="/guides/utilities">
+    探索一系列强大的实用函数，用于处理 API 请求、缓存数据、格式化日期和金额以及管理国际化。本指南将帮助您编写更清晰、更高效的代码。
+  </x-card>
+</x-cards>
+
+在探索了这些指南之后，您可能会有兴趣了解该库提供的自定义 React 钩子。
+
+➡️ **下一步：[钩子](./hooks.md)**