257 lines
9.9 KiB
TypeScript
257 lines
9.9 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { PageContainer } from '@/components/layout';
|
||
import { cn } from '@/utils/helpers';
|
||
import styles from './help.module.scss';
|
||
|
||
/**
|
||
* 推荐文档数据接口
|
||
*/
|
||
interface RecommendedDoc {
|
||
id: string;
|
||
title: string;
|
||
description: string;
|
||
}
|
||
|
||
/**
|
||
* 文档列表数据接口
|
||
*/
|
||
interface DocItem {
|
||
id: string;
|
||
title: string;
|
||
category: string;
|
||
lastUpdate: string;
|
||
}
|
||
|
||
/**
|
||
* FAQ 数据接口
|
||
*/
|
||
interface FAQItem {
|
||
question: string;
|
||
answer: string;
|
||
}
|
||
|
||
// 推荐文档数据
|
||
const recommendedDocs: RecommendedDoc[] = [
|
||
{
|
||
id: '1',
|
||
title: '如何进行首次认种？',
|
||
description: '本文将引导您完成从注册到成功认种第一棵榴莲树的全部流程...',
|
||
},
|
||
{
|
||
id: '2',
|
||
title: '结算参数配置指南',
|
||
description: '详细解释各项结算参数的含义，以及如何根据业务需求进行配置...',
|
||
},
|
||
{
|
||
id: '3',
|
||
title: '龙虎榜规则详解',
|
||
description: '了解日榜、周榜、月榜的计算逻辑，以及虚拟账户的排名规则...',
|
||
},
|
||
];
|
||
|
||
// 文档列表数据
|
||
const docList: DocItem[] = [
|
||
{ id: '1', title: '考核规则设置说明', category: '系统设置', lastUpdate: '2023-10-25' },
|
||
{ id: '2', title: '用户管理与角色授权', category: '账号安全', lastUpdate: '2023-10-24' },
|
||
{ id: '3', title: '认种限额策略配置', category: '系统设置', lastUpdate: '2023-10-22' },
|
||
{ id: '4', title: '前端热度展示方式说明', category: '系统设置', lastUpdate: '2023-10-20' },
|
||
];
|
||
|
||
// FAQ 数据
|
||
const faqData: FAQItem[] = [
|
||
{
|
||
question: 'Q: 忘记密码怎么办？',
|
||
answer: 'A: 您可以通过登录页面的"忘记密码"链接，使用注册邮箱或手机号重置密码。',
|
||
},
|
||
{
|
||
question: 'Q: 如何导出数据报表？',
|
||
answer: 'A: 在"数据统计"页面，选择您需要的时间范围和数据类型，然后点击右上角的"导出"按钮即可。',
|
||
},
|
||
{
|
||
question: 'Q: 敏感操作审批流程是怎样的？',
|
||
answer: 'A: 当您执行一项被标记为敏感的操作时，系统会要求多名管理员进行审批。只有达到预设的审批人数后，操作才会生效。',
|
||
},
|
||
];
|
||
|
||
// 搜索图标
|
||
const SearchIcon = () => (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<circle cx="11" cy="11" r="8" />
|
||
<path d="M21 21l-4.35-4.35" />
|
||
</svg>
|
||
);
|
||
|
||
// 点赞图标
|
||
const ThumbUpIcon = () => (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
|
||
</svg>
|
||
);
|
||
|
||
// 点踩图标
|
||
const ThumbDownIcon = () => (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
|
||
</svg>
|
||
);
|
||
|
||
// 电话图标
|
||
const PhoneIcon = () => (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
|
||
</svg>
|
||
);
|
||
|
||
// 邮件图标
|
||
const MailIcon = () => (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
||
<polyline points="22,6 12,13 2,6" />
|
||
</svg>
|
||
);
|
||
|
||
// 聊天图标
|
||
const ChatIcon = () => (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||
</svg>
|
||
);
|
||
|
||
export default function HelpPage() {
|
||
const [searchKeyword, setSearchKeyword] = useState('');
|
||
|
||
return (
|
||
<PageContainer title="帮助中心">
|
||
<div className={styles.help}>
|
||
{/* 页面头部 */}
|
||
<header className={styles.help__header}>
|
||
<h1 className={styles.help__title}>帮助中心</h1>
|
||
<p className={styles.help__desc}>查找文档、常见问题解答，或联系我们的支持团队。</p>
|
||
<div className={styles.help__searchBox}>
|
||
<span className={styles.help__searchIcon}>
|
||
<SearchIcon />
|
||
</span>
|
||
<input
|
||
type="text"
|
||
className={styles.help__searchInput}
|
||
placeholder="搜索文档或问题..."
|
||
value={searchKeyword}
|
||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||
/>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 推荐文档 */}
|
||
<section className={styles.help__section}>
|
||
<h2 className={styles.help__sectionTitle}>推荐文档</h2>
|
||
<div className={styles.help__docCards}>
|
||
{recommendedDocs.map((doc) => (
|
||
<div key={doc.id} className={styles.help__docCard}>
|
||
<h3 className={styles.help__docCardTitle}>{doc.title}</h3>
|
||
<p className={styles.help__docCardDesc}>{doc.description}</p>
|
||
<div className={styles.help__docCardFooter}>
|
||
<span className={styles.help__docCardQuestion}>这篇文章有用吗？</span>
|
||
<div className={styles.help__docCardBtns}>
|
||
<button className={styles.help__docCardBtn}>
|
||
<ThumbUpIcon />
|
||
<span>有用</span>
|
||
</button>
|
||
<button className={styles.help__docCardBtn}>
|
||
<ThumbDownIcon />
|
||
<span>没用</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* 文档列表 */}
|
||
<section className={styles.help__section}>
|
||
<h2 className={styles.help__sectionTitle}>文档列表</h2>
|
||
<div className={styles.help__tableWrapper}>
|
||
<div className={styles.help__table}>
|
||
<div className={styles.help__tableHead}>
|
||
<div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--title'])}>标题</div>
|
||
<div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--category'])}>分类</div>
|
||
<div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--date'])}>最后更新</div>
|
||
<div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--rating'])}>评价</div>
|
||
</div>
|
||
<div className={styles.help__tableBody}>
|
||
{docList.map((doc) => (
|
||
<div key={doc.id} className={styles.help__tableRow}>
|
||
<div className={cn(styles.help__tableCell, styles['help__tableCell--title'])}>{doc.title}</div>
|
||
<div className={cn(styles.help__tableCell, styles['help__tableCell--category'])}>{doc.category}</div>
|
||
<div className={cn(styles.help__tableCell, styles['help__tableCell--date'])}>{doc.lastUpdate}</div>
|
||
<div className={cn(styles.help__tableCell, styles['help__tableCell--rating'])}>
|
||
<button className={styles.help__ratingBtn}>
|
||
<ThumbUpIcon />
|
||
</button>
|
||
<button className={styles.help__ratingBtn}>
|
||
<ThumbDownIcon />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ 和联系支持 */}
|
||
<div className={styles.help__bottomSection}>
|
||
{/* 常见问题 */}
|
||
<div className={styles.help__faqCard}>
|
||
<h2 className={styles.help__faqTitle}>常见问题 (FAQ)</h2>
|
||
<div className={styles.help__faqList}>
|
||
{faqData.map((faq, index) => (
|
||
<div key={index} className={styles.help__faqItem}>
|
||
<p className={styles.help__faqQuestion}>{faq.question}</p>
|
||
<p className={styles.help__faqAnswer}>{faq.answer}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 联系支持 */}
|
||
<div className={styles.help__contactCard}>
|
||
<h2 className={styles.help__contactTitle}>联系支持</h2>
|
||
<div className={styles.help__contactList}>
|
||
<div className={styles.help__contactItem}>
|
||
<span className={styles.help__contactIcon}>
|
||
<PhoneIcon />
|
||
</span>
|
||
<div className={styles.help__contactInfo}>
|
||
<p className={styles.help__contactLabel}>技术支持热线</p>
|
||
<p className={styles.help__contactValue}>400-123-4567 (工作日 9:00 - 18:00)</p>
|
||
</div>
|
||
</div>
|
||
<div className={styles.help__contactItem}>
|
||
<span className={styles.help__contactIcon}>
|
||
<MailIcon />
|
||
</span>
|
||
<div className={styles.help__contactInfo}>
|
||
<p className={styles.help__contactLabel}>支持邮箱</p>
|
||
<p className={styles.help__contactValue}>support@durian-adopt.com</p>
|
||
</div>
|
||
</div>
|
||
<div className={styles.help__contactItem}>
|
||
<span className={styles.help__contactIcon}>
|
||
<ChatIcon />
|
||
</span>
|
||
<div className={styles.help__contactInfo}>
|
||
<p className={styles.help__contactLabel}>在线客服</p>
|
||
<p className={styles.help__contactValue}>点击右下角浮动窗口，立即与我们的客服代表在线沟通。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</PageContainer>
|
||
);
|
||
}
|