aitori-group
/
aitori-stylist


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
							import { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { Helmet } from 'react-helmet-async'
import type { TemplateDetailStats } from '../../../services/api/contracts'
import {
  getTemplateBasicInfo,
  getTemplateStats,
  getTemplateUsageResults,
  type TemplateBasicInfo,
  type TemplateUsageResult,
} from '../../../services/api/templates'
import { usePageContext } from '../../../shared/pageContext'
import { DashboardLayout } from '../../../layouts/DashboardLayout'

const FALLBACK_PAGE_COPY = {
  title: '发型模板详情',
  description: '查看模板封面、基本信息与使用情况。',
  back: '返回发型模板列表',
  badge: '模板详情',
  lead: '确认模板封面、基础信息和顾客使用结果。',
  preview: {
    badge: '预览',
    title: '模板预览',
    imageAlt: '模板封面',
  },
  info: {
    badge: '模板信息',
    title: '发型模板基本信息',
    name: '模板名称',
    status: '状态',
    category: '分类',
    tags: '标签',
    description: '说明',
  },
  stats: {
    customers: '使用顾客数',
    saveRate: '提案后保存率',
    monthlyGenerated: '本月生成次数',
  },
  results: {
    badge: '顾客生成结果',
    title: '使用该模板的顾客',
    action: '查看全部',
    empty: '暂无顾客生成结果',
  },
  states: {
    loading: '正在加载模板详情...',
    notFound: '模板不存在或已删除',
  },
  statusOptions: {
    DRAFT: '草稿',
    PUBLIC: '公开中',
  },
  categoryOptions: {
    LONG: '长发',
    MEDIUM: '中长发',
    SHORT: '短发',
    DYE: '染发',
  },
} as const

function renderValue(value?: string) {
  return value && value.trim() ? value : '-'
}

export function TemplateDetailPage() {
  const { locale, path, copy } = usePageContext()
  const params = useParams<{ templateId: string }>()
  const pageCopy = copy.templateDetailPage ?? FALLBACK_PAGE_COPY
  const [template, setTemplate] = useState<TemplateBasicInfo | null>(null)
  const [loading, setLoading] = useState(true)
  const [notFound, setNotFound] = useState(false)
  const [usageResults, setUsageResults] = useState<TemplateUsageResult[]>([])
  const [stats, setStats] = useState<TemplateDetailStats>({
    customerCount: 0,
    saveRate: 0,
    monthlyGeneratedCount: 0,
  })

  useEffect(() => {
    let cancelled = false

    const load = async () => {
      if (!params.templateId) {
        setNotFound(true)
        setLoading(false)
        return
      }

      setLoading(true)
      setNotFound(false)

      try {
        const [templateData, statsData, usageData] = await Promise.all([
          getTemplateBasicInfo(params.templateId),
          getTemplateStats(params.templateId).catch(() => ({
            customerCount: 0,
            saveRate: 0,
            monthlyGeneratedCount: 0,
          })),
          getTemplateUsageResults(params.templateId).catch(() => []),
        ])

        if (cancelled) return

        setTemplate(templateData)
        setStats(statsData)
        setUsageResults(usageData)
      } catch {
        if (!cancelled) {
          setTemplate(null)
          setNotFound(true)
        }
      } finally {
        if (!cancelled) {
          setLoading(false)
        }
      }
    }

    void load()

    return () => {
      cancelled = true
    }
  }, [params.templateId])

  if (loading) {
    return (
      <DashboardLayout>
        <section className="stylist-workbench-top ipad-top-space-margin mb-2">
          <div className="container">
            <p className="fs-14 text-medium-gray mt-4" role="status">
              {pageCopy.states.loading}
            </p>
          </div>
        </section>
      </DashboardLayout>
    )
  }

  if (notFound || !template) {
    return (
      <DashboardLayout>
        <section className="stylist-workbench-top ipad-top-space-margin mb-2">
          <div className="container">
            <p className="fs-14 text-red mt-4" role="alert">
              {pageCopy.states.notFound}
            </p>
          </div>
        </section>
      </DashboardLayout>
    )
  }

  return (
    <DashboardLayout>
      <Helmet>
        <html lang={locale === 'ja' ? 'ja' : 'zh-CN'} />
        <title>{`Aitori Stylist | ${pageCopy.title}`}</title>
        <meta name="description" content={pageCopy.description} />
      </Helmet>
      <section className="stylist-workbench-top ipad-top-space-margin mb-2">
        <div className="container">
          <div className="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <Link
              to={path('/templates')}
              className="btn btn-small btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700"
            >
              <i className="feather icon-feather-arrow-left me-6px"></i>
              {pageCopy.back}
            </Link>
            <Link
              to={path(`/templates/${template.id}/edit`)}
              className="btn btn-large btn-rounded btn-base-color btn-box-shadow fw-700"
            >
              <i className="feather icon-feather-edit me-10px"></i>
              {copy.common.edit}
            </Link>
          </div>
          <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px">
            <span className="bg-base-color d-inline-block mb-15px fw-600 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-12">
              {pageCopy.badge}
            </span>
            <h1 className="fw-700 text-dark-gray ls-minus-1px mb-10px">{pageCopy.title}</h1>
            <p className="fs-18 lh-30 mb-0">{pageCopy.lead}</p>
          </div>
        </div>
      </section>

      <section className="pt-0">
        <div className="container">
          <div className="row g-4">
            <div className="col-xl-5 col-lg-6">
              <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px h-100">
                <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-25px">
                  <div>
                    <span className="fs-14 fw-700 text-base-color text-uppercase">
                      {pageCopy.preview.badge}
                    </span>
                    <h2 className="fw-700 text-dark-gray fs-26 mb-0">{pageCopy.preview.title}</h2>
                  </div>
                  <span className="template-status-badge">
                    {pageCopy.statusOptions[template.status] ?? template.status}
                  </span>
                </div>
                <div className="template-detail-preview">
                  <img
                    src={template.coverUrl || '/images/aitori-simulation-result.png'}
                    alt={pageCopy.preview.imageAlt}
                  />
                </div>
              </div>
            </div>

            <div className="col-xl-7 col-lg-6">
              <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px h-100">
                <span className="fs-14 fw-700 text-base-color text-uppercase">
                  {pageCopy.info.badge}
                </span>
                <h2 className="fw-700 text-dark-gray fs-26 mb-25px">{pageCopy.info.title}</h2>
                <div className="row g-3">
                  <div className="col-md-7">
                    <span className="customer-edit-label">{pageCopy.info.name}</span>
                    <div className="form-control customer-edit-control d-flex align-items-center">
                      {renderValue(template.templateName)}
                    </div>
                  </div>
                  <div className="col-md-5">
                    <span className="customer-edit-label">{pageCopy.info.status}</span>
                    <div className="form-control customer-edit-control d-flex align-items-center">
                      {pageCopy.statusOptions[template.status] ?? template.status}
                    </div>
                  </div>
                  <div className="col-md-6">
                    <span className="customer-edit-label">{pageCopy.info.category}</span>
                    <div className="form-control customer-edit-control d-flex align-items-center">
                      {pageCopy.categoryOptions[template.category] ?? template.category}
                    </div>
                  </div>
                  <div className="col-md-6">
                    <span className="customer-edit-label">{pageCopy.info.tags}</span>
                    <div className="form-control customer-edit-control d-flex align-items-center">
                      {renderValue(template.tags.join(', '))}
                    </div>
                  </div>
                  <div className="col-12">
                    <span className="customer-edit-label">{pageCopy.info.description}</span>
                    <div className="form-control customer-edit-control min-height-180px">
                      {renderValue(template.description)}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="row g-4 mt-1">
            <div className="col-lg-4">
              <div className="workbench-stat bg-white border-radius-8px p-20px h-100">
                <span className="d-block fs-26 fw-800 text-dark-gray">{stats.customerCount}</span>
                <span className="fs-14">{pageCopy.stats.customers}</span>
              </div>
            </div>
            <div className="col-lg-4">
              <div className="workbench-stat bg-white border-radius-8px p-20px h-100">
                <span className="d-block fs-26 fw-800 text-dark-gray">{stats.saveRate}%</span>
                <span className="fs-14">{pageCopy.stats.saveRate}</span>
              </div>
            </div>
            <div className="col-lg-4">
              <div className="workbench-stat bg-white border-radius-8px p-20px h-100">
                <span className="d-block fs-26 fw-800 text-dark-gray">
                  {stats.monthlyGeneratedCount}
                </span>
                <span className="fs-14">{pageCopy.stats.monthlyGenerated}</span>
              </div>
            </div>
          </div>

          <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px mt-4">
            <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-25px">
              <div>
                <span className="fs-14 fw-700 text-base-color text-uppercase">
                  {pageCopy.results.badge}
                </span>
                <h2 className="fw-700 text-dark-gray fs-26 mb-0">{pageCopy.results.title}</h2>
              </div>
              <a
                href="#"
                className="btn btn-small btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700"
              >
                {pageCopy.results.action}
              </a>
            </div>

            {usageResults.length === 0 ? (
              <p className="fs-14 text-medium-gray" role="status">
                {pageCopy.results.empty}
              </p>
            ) : (
              <div className="template-result-grid">
                {usageResults.map((item, index) => (
                  <article key={`${item.date}-${index}`} className="template-result-card">
                    <div className="template-result-images">
                      {item.beforeImage ? <img src={item.beforeImage} alt="before" /> : null}
                      {item.afterImage ? <img src={item.afterImage} alt="after" /> : null}
                    </div>
                    <div className="template-result-body">
                      <div>
                        <span className="template-status-badge">{item.status}</span>
                        <span className="fs-13 text-medium-gray">{item.date}</span>
                      </div>
                      <p>{item.note}</p>
                    </div>
                  </article>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>
    </DashboardLayout>
  )
}