feat: Web端关于弹窗 + 帮助反馈Toast + 版本号T1.0.3

frontend/src/pages/ProfilePage.tsx

@@ -1,11 +1,15 @@
-/** 我的 — 1:1 复刻 uni-app pages/profile/index.vue + 真实用户数据绑定 */
+/** 我的 — 与 uni-app pages/profile/index.vue 完全同步 */
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import { useToast } from "../components/ui/Toast";
 import { LogOut } from "lucide-react";
 
 export default function ProfilePage() {
   const { user, logout } = useAuth();
+  const { toast } = useToast();
   const navigate = useNavigate();
+  const [showAbout, setShowAbout] = useState(false);
 
   // ---- 从 AuthContext 派生真实数据 ----
   const displayName = user?.display_name || user?.username || "未知用户";
@@ -20,11 +24,22 @@ export default function ProfilePage() {
     navigate("/admin/login", { replace: true });
   }
 
+  function handleMenuClick(item: string) {
+    switch (item) {
+      case "关于":
+        setShowAbout(true);
+        break;
+      case "帮助与反馈":
+        toast("反馈通道搭建中，敬请期待...", "info");
+        break;
+      // 工作统计、设置 暂不处理
+    }
+  }
+
   return (
     <div className="flex min-h-full flex-col px-4 pt-safe pb-20">
-      {/* 用户卡片 — 与 uni-app user-card 完全一致 */}
+      {/* 用户卡片 */}
       <div className="mt-4 flex items-center gap-3 rounded-xl bg-white p-4 shadow-[0_1px_3px_rgba(0,0,0,0.06)]">
-        {/* 头像 — 取真实用户名的第一个字 */}
         <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
           {avatarChar}
         </div>
@@ -37,12 +52,13 @@ export default function ProfilePage() {
         <span className="text-xl text-gray-300">›</span>
       </div>
 
-      {/* 菜单列表 — 与 uni-app menu-card 完全一致 */}
+      {/* 菜单列表 */}
       <div className="mt-4 overflow-hidden rounded-xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.06)]">
         {["工作统计", "设置", "帮助与反馈", "关于"].map((item, i) => (
           <div
             key={item}
-            className={`flex items-center justify-between px-4 py-3.5 ${
+            onClick={() => handleMenuClick(item)}
+            className={`flex cursor-pointer items-center justify-between px-4 py-3.5 transition-colors hover:bg-gray-50 ${
               i < 3 ? "border-b border-gray-50" : ""
             }`}
           >
@@ -51,7 +67,7 @@ export default function ProfilePage() {
           </div>
         ))}
 
-        {/* 退出登录 — 红色高亮 */}
+        {/* 退出登录 */}
         <button
           onClick={handleLogout}
           className="flex w-full items-center justify-between border-t border-gray-50 px-4 py-3.5 transition-colors hover:bg-red-50"
@@ -64,8 +80,31 @@ export default function ProfilePage() {
         </button>
       </div>
 
-      {/* 版本号 — 与 uni-app .version 一致 */}
+      <p className="mt-8 text-center text-xs text-gray-300">生产流转 T1.0.3</p>
-      <p className="mt-8 text-center text-xs text-gray-300">生产流转 v1.0.0</p>
+
+      {/* 关于弹窗 */}
+      {showAbout && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          <div
+            className="absolute inset-0 bg-black/40"
+            onClick={() => setShowAbout(false)}
+          />
+          <div className="relative z-10 mx-4 w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl">
+            <h3 className="mb-4 text-center text-lg font-bold text-gray-800">
+              关于 Track
+            </h3>
+            <div className="mb-6 whitespace-pre-line text-center text-sm leading-relaxed text-gray-600">
+              Track 生产流转管理系统{"\n"}当前版本：T1.0.3{"\n"}核心架构：FastAPI + React + Tailwind
+            </div>
+            <button
+              onClick={() => setShowAbout(false)}
+              className="w-full rounded-lg bg-blue-600 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
+            >
+              知道了
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }