200 lines
6.3 KiB
Vue
200 lines
6.3 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref } from 'vue'
|
||
import {
|
||
ArrowRight,
|
||
Equalizer,
|
||
HeadsetOne,
|
||
Help,
|
||
Search,
|
||
Security,
|
||
Wallet
|
||
} from '@icon-park/vue-next'
|
||
|
||
// 分类配置
|
||
const categories = [
|
||
{ key: 'general', name: '常规问题', icon: Help },
|
||
{ key: 'usage', name: '使用技巧', icon: Equalizer },
|
||
{ key: 'billing', name: '订阅支付', icon: Wallet },
|
||
{ key: 'privacy', name: '隐私安全', icon: Security }
|
||
]
|
||
|
||
const activeCategory = ref('general')
|
||
const searchQuery = ref('')
|
||
|
||
// 问题数据
|
||
const faqList = [
|
||
{
|
||
id: 1,
|
||
category: 'general',
|
||
q: '这个 AI 阅读工具是如何工作的？',
|
||
a: '我们利用深度学习模型对书籍文本进行语义分析。它不仅能总结全文，还能根据你选择的“职业背景”提取特定的知识点。'
|
||
},
|
||
{
|
||
id: 2,
|
||
category: 'usage',
|
||
q: '生成的字数可以超过 5000 字吗？',
|
||
a: '目前单次生成上限为 5000 字，以确保内容的逻辑连贯性。如果需要更长篇幅，建议分章节创建任务。'
|
||
},
|
||
{
|
||
id: 3,
|
||
category: 'billing',
|
||
q: '订阅后可以申请退款吗？',
|
||
a: '在订阅后的 24 小时内且未使用过算力资源的情况下，您可以联系客服申请全额退款。'
|
||
},
|
||
{
|
||
id: 4,
|
||
category: 'general',
|
||
q: '支持哪些格式的书籍？',
|
||
a: '目前支持 PDF, EPUB, TXT 格式。为了获得最佳效果，建议上传排版清晰的文档。'
|
||
}
|
||
]
|
||
|
||
// 搜索过滤逻辑
|
||
const filteredFaqs = computed(() => {
|
||
return faqList.filter((item) => {
|
||
const matchesCategory = item.category === activeCategory.value
|
||
const matchesSearch = item.q.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||
return matchesCategory && matchesSearch
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex-1 h-full overflow-y-auto bg-[#FAFAFB] custom-scroll">
|
||
<section class="pt-16 pb-12 px-6 text-center">
|
||
<h2 class="text-3xl font-black text-slate-800 mb-4">有什么可以帮到你？</h2>
|
||
<div class="max-w-2xl mx-auto relative">
|
||
<a-input
|
||
v-model="searchQuery"
|
||
placeholder="搜索您遇到的问题..."
|
||
class="faq-search-input"
|
||
size="large"
|
||
allow-clear
|
||
>
|
||
<template #prefix><search theme="outline" size="18" fill="#94a3b8" /></template>
|
||
</a-input>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="max-w-5xl mx-auto px-6 flex flex-col md:flex-row gap-8 pb-20">
|
||
<aside class="w-full md:w-56 shrink-0">
|
||
<div class="flex md:flex-col gap-2 overflow-x-auto pb-4 md:pb-0">
|
||
<div
|
||
v-for="cat in categories"
|
||
:key="cat.key"
|
||
@click="activeCategory = cat.key"
|
||
:class="[
|
||
'flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer transition-all whitespace-nowrap',
|
||
activeCategory === cat.key
|
||
? 'bg-white shadow-sm text-[#7816ff] font-bold border border-slate-100'
|
||
: 'text-slate-500 hover:bg-white/60'
|
||
]"
|
||
>
|
||
<component :is="cat.icon" theme="outline" size="18" />
|
||
<span class="text-[13px]">{{ cat.name }}</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="flex-1 space-y-4">
|
||
<div v-if="filteredFaqs.length > 0" class="space-y-3">
|
||
<a-collapse :bordered="false" expand-icon-position="right">
|
||
<template #expand-icon="{ active }">
|
||
<div :class="['transition-transform duration-300', active ? 'rotate-90' : '']">
|
||
<arrow-right theme="outline" size="16" :fill="active ? '#7816ff' : '#94a3b8'" />
|
||
</div>
|
||
</template>
|
||
|
||
<a-collapse-item v-for="faq in filteredFaqs" :key="faq.id" class="faq-card">
|
||
<template #header>
|
||
<span class="text-[14px] font-bold text-slate-700">{{ faq.q }}</span>
|
||
</template>
|
||
<div class="text-[13px] leading-relaxed text-slate-500 py-2">
|
||
{{ faq.a }}
|
||
</div>
|
||
</a-collapse-item>
|
||
</a-collapse>
|
||
</div>
|
||
|
||
<div v-else class="bg-white rounded-2xl p-12 text-center border border-slate-100">
|
||
<div
|
||
class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4"
|
||
>
|
||
<search theme="outline" size="24" fill="#cbd5e1" />
|
||
</div>
|
||
<p class="text-sm text-slate-400">未找到相关问题，请尝试其他关键词</p>
|
||
</div>
|
||
|
||
<div
|
||
class="mt-8 bg-white rounded-2xl p-6 border border-slate-100 flex items-center justify-between shadow-sm"
|
||
>
|
||
<div class="flex items-center gap-4">
|
||
<div
|
||
class="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center text-[#7816ff]"
|
||
>
|
||
<headset-one theme="outline" size="24" />
|
||
</div>
|
||
<div>
|
||
<h4 class="text-sm font-bold text-slate-800">仍有疑问？</h4>
|
||
<p class="text-[11px] text-slate-400">我们的团队通常在 2 小时内回复您的邮件</p>
|
||
</div>
|
||
</div>
|
||
<a-button type="primary" shape="round" class="bg-[#7816ff] border-none px-6">
|
||
联系支持
|
||
</a-button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 深度定制搜索框 */
|
||
:deep(.faq-search-input) {
|
||
border-radius: 16px !important;
|
||
border: 1px solid #f1f5f9 !important;
|
||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
|
||
background: white !important;
|
||
padding-left: 12px;
|
||
}
|
||
|
||
:deep(.faq-search-input.arco-input-focus) {
|
||
border-color: #7816ff !important;
|
||
box-shadow: 0 10px 25px -5px rgba(120, 22, 255, 0.1);
|
||
}
|
||
|
||
/* 深度定制手风琴卡片 */
|
||
:deep(.faq-card) {
|
||
background: white !important;
|
||
border: 1px solid #f1f5f9 !important;
|
||
border-radius: 16px !important;
|
||
margin-bottom: 12px !important;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
:deep(.faq-card:hover) {
|
||
border-color: #7816ff;
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
:deep(.arco-collapse-item-header) {
|
||
background: transparent !important;
|
||
padding: 20px 24px !important;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
:deep(.arco-collapse-item-content) {
|
||
padding: 0 24px 20px 24px !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.custom-scroll::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
.custom-scroll::-webkit-scrollbar-thumb {
|
||
background: #e5e7eb;
|
||
border-radius: 10px;
|
||
}
|
||
</style>
|