refactor: 优化代码结构，添加中文注释，完善 README 文档

- Hooks/组件添加 useMemo 优化，减少不必要的重计算
- 简化 TokenUsageDashboard 的 Suspense 嵌套层级
- 完善 README: 技术栈、构建产物位置、架构说明

src/orpc/client.ts

@@ -1,11 +1,11 @@
 /**
  * ORPC 同构客户端
  *
- * 根据运行环境自动选择最优调用方式:
- * - SSR (服务端): 直接调用 router，无 HTTP 开销
- * - CSR (客户端): 通过 /api/rpc 端点 HTTP 调用
+ * 根据运行环境自动选择最优的 RPC 调用方式:
+ * - SSR (服务端): 直接调用 router 处理器，零网络开销
+ * - CSR (客户端): 通过 /api/rpc 端点进行 HTTP 调用
  *
- * 同时配置了 TanStack Query 集成，mutation 成功后自动刷新相关查询。
+ * 同时集成 TanStack Query，提供开箱即用的查询/突变 hooks。
  */
 import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
@@ -16,36 +16,58 @@ import { getRequestHeaders } from '@tanstack/react-start/server'
 import { router } from './router'
 import type { RouterClient } from './types'
 
+// ============================================================================
+// 客户端创建
+// ============================================================================
+
 /**
  * 创建同构 ORPC 客户端
  *
- * 服务端: 直接调用路由处理器
- * 客户端: 通过 HTTP 调用 /api/rpc 端点
+ * 使用 TanStack Start 的 createIsomorphicFn 实现服务端/客户端代码分离:
+ * - server(): 在 SSR 时执行，直接调用路由处理器
+ * - client(): 在浏览器中执行，通过 HTTP 调用 API
  */
 const getORPCClient = createIsomorphicFn()
   .server(() =>
+    // 服务端: 创建直接调用路由器的客户端
     createRouterClient(router, {
+      // 传递原始请求的 headers (用于身份验证等)
       context: () => ({
         headers: getRequestHeaders(),
       }),
     }),
   )
   .client(() => {
+    // 客户端: 创建 HTTP 客户端
     const link = new RPCLink({
       url: `${window.location.origin}/api/rpc`,
     })
     return createORPCClient<RouterClient>(link)
   })
 
+/** 同构客户端实例 */
 const client: RouterClient = getORPCClient()
 
+// ============================================================================
+// TanStack Query 集成
+// ============================================================================
+
 /**
- * ORPC + TanStack Query 工具
+ * ORPC + TanStack Query 工具集
  *
- * 使用方式:
+ * 提供类型安全的 queryOptions 和 mutationOptions 方法。
+ *
+ * @example
  * ```tsx
- * // 查询
+ * // 查询 (使用 Suspense)
  * const { data } = useSuspenseQuery(orpc.usage.getUsage.queryOptions())
+ *
+ * // 查询 (不使用 Suspense)
+ * const { data, isLoading } = useQuery(orpc.usage.getUsage.queryOptions())
+ *
+ * // 突变
+ * const mutation = useMutation(orpc.todo.create.mutationOptions())
+ * mutation.mutate({ title: '新任务' })
  * ```
  */
 export const orpc = createTanstackQueryUtils(client)