✨ feat(mobile): add XunlianPage training case list page

- create XunlianPage component to display training cases
- implement data fetching using react-query
- add loading state and empty state handling
- implement expandable stock information toggle functionality
- add click navigation to stock details page
- style with responsive grid layout and hover effects

src/client/mobile/pages/XunlianPage.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import dayjs from "dayjs";
+import { useQuery } from "@tanstack/react-query";
+// import type { XunlianCode } from "../share/types_stock.ts";
+import { useNavigate } from "react-router";
+import { stockXunlianCodesClient } from "@/client/api";
+import { InferResponseType } from "hono";
+
+type XunlianCode = InferResponseType<typeof stockXunlianCodesClient.$get, 200>['data'][0];
+
+export function XunlianPage() {
+  const [visibleStocks, setVisibleStocks] = useState<Record<number, boolean>>({});
+  const navigate = useNavigate();
+
+  const { data: codes, isLoading } = useQuery({
+    queryKey: ["xunlian-codes"],
+    queryFn: async (): Promise<XunlianCode[]> => {
+      const res = await stockXunlianCodesClient.$get({
+        query:{}
+      })
+      if(!res.ok){
+        const { message } = await res.json();
+        throw new Error(message)
+      }
+      const response = await res.json();
+      return response.data;
+    },
+    initialData: []
+  });
+
+  const toggleStockVisibility = (id: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setVisibleStocks((prev: Record<number, boolean>) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  };
+
+  const handleCardClick = (code: XunlianCode) => {
+    navigate(`/mobile/stock?code=${code.code}`);
+  };
+
+  return (
+    <div className="p-4">
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl font-bold">训练案例</h1>
+      </div>
+
+      <div className="grid gap-4">
+        {isLoading ? (
+          <div className="text-center text-gray-500 py-8">
+            <div className="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-blue-600 rounded-full" role="status" aria-label="loading">
+              <span className="sr-only">加载中...</span>
+            </div>
+            <div className="mt-2">加载中...</div>
+          </div>
+        ) : codes.length === 0 ? (
+          <div className="text-center text-gray-500 py-8">
+            暂无训练案例
+          </div>
+        ) : (
+          codes.map((code: XunlianCode) => (
+            <div
+              key={code.id}
+              className="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer"
+              onClick={() => handleCardClick(code)}
+            >
+              <div className="flex justify-between items-start">
+                <div>
+                  <h2 className="text-lg font-semibold flex items-center gap-2">
+                    {visibleStocks[code.id] ? (
+                      <>
+                        {code.stockName} {code.name} ({code.code})
+                        <button
+                          onClick={(e) => toggleStockVisibility(code.id, e)}
+                          className="text-gray-500 hover:text-gray-700"
+                          title="隐藏股票信息"
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                          </svg>
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        {code.name}
+                        <button
+                          onClick={(e) => toggleStockVisibility(code.id, e)}
+                          className="text-gray-400 hover:text-gray-600"
+                          title="显示股票信息"
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+                          </svg>
+                        </button>
+                      </>
+                    )}
+                  </h2>
+                  {code.description && (
+                    <p className="text-gray-600 mt-1">{code.description}</p>
+                  )}
+                </div>
+                <div className="text-sm text-gray-500">
+                  <div>{dayjs(code.tradeDate).format("YYYY-MM-DD")}</div>
+                </div>
+              </div>
+              {code.type && (
+                <div className="mt-2">
+                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
+                    {code.type}
+                  </span>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}