"use client"; // 设置页区块 —— 垂直 Tabs 分区（个人资料/通知/外观/安全）+ 右侧表单内容区。 // 复制后改：NOTIF_ITEMS 通知项配置、initialValues 表单默认值、各 Switch 项。 // toast 用法同 contact-form.tsx：tone 为 "info" | "danger" | "neutral" | "warning"。 import { useState } from "react"; import { Avatar, Button, Field, Heading, Input, Separator, Switch, Tabs, TabsPanel, Text, toast, } from "@hulianui/ui"; import { Bell, Lock, Palette, User } from "lucide-react"; // 侧边导航项配置 —— 复制后按需增删 const NAV_ITEMS = [ { value: "profile", label: "个人资料", icon: User }, { value: "notify", label: "通知设置", icon: Bell }, { value: "appearance", label: "外观偏好", icon: Palette }, { value: "security", label: "账号安全", icon: Lock }, ] as const; type NavValue = (typeof NAV_ITEMS)[number]["value"]; // 通知事件配置 —— 复制后按需增删 const NOTIF_ITEMS = [ { key: "assign", title: "新任务分配通知", desc: "有任务分配给我时，站内 + 邮件同步通知" }, { key: "comment", title: "评论与@提及", desc: "有人评论我的工作项或 @ 我时提醒" }, { key: "status", title: "状态变更通知", desc: "我负责的工单状态变化时通知" }, { key: "weekly", title: "每周汇总周报", desc: "每周一上午推送上周工作量汇总" }, { key: "security", title: "账号安全告警", desc: "异地登录、密码变更等安全事件即时提醒" }, ] as const; type NotifKey = (typeof NOTIF_ITEMS)[number]["key"]; export function SettingsPanelBlock() { // 侧边导航受控值 const [activeTab, setActiveTab] = useState("profile"); // 个人资料表单 const [name, setName] = useState("林晚晴"); const [email, setEmail] = useState("lin@hulian.com"); const [phone, setPhone] = useState("138-0000-8888"); // 通知开关 const [notif, setNotif] = useState>({ assign: true, comment: true, status: true, weekly: false, security: true, }); // 外观偏好 const [compactMode, setCompactMode] = useState(false); const [animEnabled, setAnimEnabled] = useState(true); const [saving, setSaving] = useState(false); const handleSaveProfile = () => { setSaving(true); setTimeout(() => { setSaving(false); toast({ title: "个人资料已保存", description: `姓名：${name}`, tone: "info" }); }, 600); }; return (

{/* 左侧导航：普通按钮列表，受控驱动 Tabs value */} {/* 右侧内容 */}

{/* 个人资料 */} 个人资料修改你的姓名、邮箱及联系方式。 {/* 头像区 */}

PNG / JPG，最大 2MB

setName(e.target.value)} placeholder="你的姓名" /> setEmail(e.target.value)} placeholder="you@company.com" /> setPhone(e.target.value)} placeholder="138-0000-0000" />

{/* 通知设置 */} 通知设置选择你希望接收的通知类型，随时可调整。

{NOTIF_ITEMS.map((n) => (

{n.title}

{n.desc}

setNotif((s) => ({ ...s, [n.key]: c }))} aria-label={n.title} />

))}

{/* 外观偏好 */} 外观偏好调整界面紧凑度与动效偏好。

紧凑模式

缩小间距与字号，显示更多内容

过渡动效

关闭后禁用页面切换与弹窗动画

{/* 账号安全 */} 账号安全定期更换密码，开启两步验证保护账号安全。

); }