import { useState } from 'react' import { Link } from 'react-router-dom' import { Helmet } from 'react-helmet-async' import { PublicLayout } from '../../layouts/PublicLayout' import { ImageLightbox } from '../../components/common/ImageLightbox' import { publicHairstyleTemplates, type PublicHairstyleTemplate } from '../../shared/demoContent' import { getStoredStylistProfile } from '../../shared/stylistProfileStore' import { usePageContext } from '../../shared/pageContext' type TemplateFilter = '*' | PublicHairstyleTemplate['category'] export function StylistProfilePage() { const { locale, path } = usePageContext() const [profile] = useState(getStoredStylistProfile) const [filter, setFilter] = useState('*') const [preview, setPreview] = useState(null) const visibleTemplates = filter === '*' ? publicHairstyleTemplates : publicHairstyleTemplates.filter((item) => item.category === filter) const structuredData = { '@context': 'https://schema.org', '@type': 'Person', name: profile.displayName, description: profile.lead, image: profile.photo, worksFor: { '@type': 'HairSalon', name: profile.salonName }, } return ( Aitori Stylist | Demo Stylist 发型模板
{`${profile.displayName}
{profile.displayName} 的发型模板

用你的照片，试试这位发型师设计的发型。

这里收录了 {profile.displayName} 常用于咨询的发型模板。选择喜欢的发型后，可以上传自己的照片，用 AI 先看看大致效果。

适合在预约前确认长度、脸周层次、刘海和整体氛围。模拟结果可作为到店咨询时的参考。

用我的照片试发型先看发型模板
{profile.years}经验
8公开模板
{profile.rating}评分
Style Templates

选择你想尝试的发型

点击图片可以放大查看。决定想试哪一款后，进入 AI 试发型流程，上传自己的照片进行模拟。

    {([['*', '全部'], ['long', '长发'], ['medium', '中长发'], ['short', '短发']] as const).map(([value, label]) =>
    • )}
    {visibleTemplates.map((item) =>
    • )}
Stylist

{profile.displayName}

{profile.specialties}

如果你还不确定适合什么长度或风格，可以先用模板模拟，再把结果带到咨询里一起讨论。

Voice

顾客反馈

AI Try-on

选好发型后，用你的照片试试看。

模拟结果不是最终承诺，而是帮助你和发型师更快对齐方向的参考。

开始 AI 试发型
setPreview(null)} action={用我的照片试这款} /> ) } function InfoCard({ label, value }: { label: string; value: string }) { return
{label}{value}
} function Review({ title, body }: { title: string; body: string }) { return
{Array.from({ length: 5 }, (_, index) => )}
{title}

{body}

}