LiuRui/SideBar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SendPage): 重构发送页面为多标签导航布局并新增档案查看功能

Browse Source 
重构发送工具页面为双标签导航布局，新增信息档案查看功能
添加评估档案详情弹窗，支持报告和原始答卷切换查看
优化表单发送逻辑和样式，增加加载状态和错误处理
This commit is contained in:
lbw_9527443
2026-03-16 18:14:51 +08:00
parent 5d25f911d5
commit 47526eb6dc
2 changed files with 1029 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

922
src/components/HomePage.vue
View File

File diff suppressed because it is too large Load Diff

780
src/components/SendPage.vue
View File

@@ -5,176 +5,343 @@
<div class="bg-dot dot-2"></div>
<div class="container">
<!-- 头部区域 -->
<!-- ==================== 全局顶部导航 (App Level) ==================== -->
<div class="app-nav-tabs">
<div class="nav-tab" :class="{ 'active': activeTab === 'send' }" @click="switchTab('send')">
发送工具
</div>
<div class="nav-tab" :class="{ 'active': activeTab === 'data' }" @click="switchTab('data')">
信息档案
</div>
</div>
<!-- ==================== 路由视图切换 ==================== -->
<transition name="page-fade" mode="out-in">
<!-- 🔴 页面 1：发送工具页 -->
<div class="page-view" v-if="activeTab === 'send'" key="send">
<div class="header-section">
<div class="sparkle-icon">✨</div>
<h1 class="main-title">青少年心理健康评估</h1>
<p class="subtitle">专业、科学、个性化的心理健康分析</p>
</div>
<!-- 主体操作卡片 -->
<div class="action-card">
<h2 class="card-headline">选择并发送评估工具</h2>
<div class="info-bar">
只需 <span class="time-badge">5-10 分钟</span>，即可获得专业的评估分析报告
只需 <span class="time-badge">5-10 分钟</span>，即可获得专业的分析报告
</div>
<div class="button-list">
<!-- 按钮 1: 家庭教育档案 -->
<button class="nav-button" :class="{ 'is-active': activeType === 'archive', 'is-disabled': isCoolingDown }"
<button class="nav-button"
:class="{ 'is-active': activeSendType === 'archive', 'is-disabled': isCoolingDown }"
@click="handleSend('archive')">
<div class="btn-left">
<span class="btn-icon-box">📝</span>
<span class="btn-label">发送【家庭教育档案】</span>
</div>
<div class="btn-loading-ring" v-if="isCoolingDown && activeType === 'archive'"></div>
<div class="btn-loading-ring" v-if="isCoolingDown && activeSendType === 'archive'"></div>
<span class="btn-arrow" v-else>→</span>
</button>
<!-- 按钮 2: 入营测评卷 -->
<button class="nav-button" :class="{ 'is-active': activeType === 'campTest', 'is-disabled': isCoolingDown }"
<button class="nav-button"
:class="{ 'is-active': activeSendType === 'campTest', 'is-disabled': isCoolingDown }"
@click="handleSend('campTest')">
<div class="btn-left">
<span class="btn-icon-box">🎯</span>
<span class="btn-label">发送【入营测评卷】</span>
</div>
<div class="btn-loading-ring" v-if="isCoolingDown && activeType === 'campTest'"></div>
<div class="btn-loading-ring" v-if="isCoolingDown && activeSendType === 'campTest'"></div>
<span class="btn-arrow" v-else>→</span>
</button>
</div>
<!-- 倒计时提示 -->
<div v-if="isCoolingDown" class="cooldown-text">
已发送，请在聊天窗口查看 ({{ countdown }}s)
</div>
</div>
</div>
<!-- 底部免责声明 -->
<div class="disclaimer">
<!-- 🔵 页面 2：信息页面 (数据档案) -->
<div class="page-view" v-else-if="activeTab === 'data'" key="data">
<!-- 专属独立 Header -->
<div class="header-section">
<h1 class="main-title">客户评估档案</h1>
<p class="subtitle">全面掌握客户的心理与家庭状况</p>
</div>
<!-- 彻底去掉白色大框，直接平铺卡片，做出完全不同的UI感 -->
<div class="data-list-wrapper">
<div v-if="isLoadingData" class="data-status">
<div class="btn-loading-ring data-loading"></div>
<span>正在获取综合评估数据...</span>
</div>
<div v-else-if="formDataList.length === 0" class="data-status empty-status">
<span class="empty-icon">📭</span>
<span>客户暂未填写任何表单</span>
</div>
<div v-else class="data-list-container">
<!-- 数据卡片 (自带白底和阴影) -->
<div class="info-card" v-for="item in formDataList" :key="item.id">
<div class="info-card-header">
<span class="info-title">{{ item.title }}</span>
<span class="info-badge status-success">{{ item.status }}</span>
</div>
<div class="info-card-body">
<p><strong>填表主体：</strong>{{ item.targetName }}</p>
<p v-if="item.submitTime"><strong>提交时间：</strong>{{ item.submitTime }}</p>
<p v-if="item.totalScore !== undefined"><strong>综合得分：</strong><span class="score-text">{{
item.totalScore }} 分</span></p>
</div>
<div class="info-card-footer">
<button class="view-btn" @click="openDetailModal(item)">
查看详情报告
</button>
</div>
</div>
</div>
</div>
</div>
</transition>
<!-- 全局底部免责声明 -->
<div class="global-disclaimer">
<span class="light-bulb">💡</span>
评估完全免费，结果仅供参考，如需专业帮助请咨询心理医生
<span>评估完全免费，结果仅供参考，如需专业帮助请咨询心理医生</span>
</div>
</div>
<!-- ==================== 档案/报告详情弹窗 ==================== -->
<transition name="fade">
<div class="modal-overlay" v-if="showModal" @click.self="closeModal">
<div class="modal-container">
<div class="modal-header">
<h3 class="modal-title">{{ currentItem?.title || '详情' }}</h3>
<button class="close-btn" @click="closeModal">×</button>
</div>
<div class="modal-sub-tabs" v-if="currentItem?.type === 'campTest'">
<button :class="{ 'sub-active': modalView === 'report' }" @click="modalView = 'report'">分析报告</button>
<button :class="{ 'sub-active': modalView === 'qa' }" @click="modalView = 'qa'">原始答卷</button>
</div>
<div class="modal-body">
<div v-if="modalView === 'report' && currentItem?.reportMarkdown" class="markdown-body">
<div v-html="parseMarkdown(currentItem.reportMarkdown)"></div>
</div>
<div v-if="modalView === 'qa'" class="qa-list">
<div class="qa-item" v-for="q in currentItem?.rawData" :key="q.question_id">
<div class="qa-question">{{ q.question_name }}</div>
<div class="qa-answer" :class="{ 'is-empty': !q.answer }">
{{ formatAnswer(q.answer) }}
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as ww from '@wecom/jssdk'
// --- 状态定义 ---
type FormType = 'archive' | 'campTest'
type TabType = 'send' | 'data'
type ModalViewType = 'qa' | 'report'
interface QuestionItem {
question_id: string;
question_name: string;
answer: string;
storage_key: string;
}
interface FormDataItem {
id: string | number;
type: FormType;
title: string;
status: string;
targetName: string;
submitTime?: string;
totalScore?: number;
rawData: QuestionItem[];
reportMarkdown?: string;
}
const isWWReady = ref(false)
const activeTab = ref<TabType>('send') // 全局导航状态
const isCoolingDown = ref(false)
const countdown = ref(0)
const activeType = ref<FormType | null>(null)
const isWWReady = ref(false)
const activeSendType = ref<FormType | null>(null)
const isLoadingData = ref(false)
const formDataList = ref<FormDataItem[]>([])
const showModal = ref(false)
const currentItem = ref<FormDataItem | null>(null)
const modalView = ref<ModalViewType>('qa')
// --- 配置表 ---
const CONFIG = {
archive: {
id: 0,
title: '家庭教育档案信息表',
desc: '通过专业的评估工具，了解孩子的成长需求。'
},
campTest: {
id: 2,
title: '向阳营入营量表',
desc: '入营前专属专业测评，帮助导师全方位了解营员特质。'
archive: { id: 0, title: '家庭教育档案信息表', desc: '通过专业的评估工具，了解孩子的成长需求。' },
campTest: { id: 2, title: '向阳营入营量表', desc: '入营前专属专业测评，帮助导师全方位了解营员特质。' }
}
const formatAnswer = (val: string) => {
if (!val) return '未填写'
const dict: Record<string, string> = {
'male': '男', 'female': '女', 'yes': '是 / 有', 'no': '否 / 无',
'excellent': '优秀', 'good': '良好', 'average': '一般', 'poor': '较差',
'fully_agree': '完全符合 / 同意', 'partially_agree': '部分符合 / 偶尔', 'disagree': '不符合 / 不同意',
'depression': '情绪低落 / 抑郁', 'anxiety': '焦虑紧张', 'rebellion': '叛逆对抗'
}
return dict[val.toLowerCase()] || val
}
const parseMarkdown = (mdText: string) => {
if (!mdText) return ''
return mdText
.replace(/^### (.*$)/gim, '<h4>$1</h4>')
.replace(/^## (.*$)/gim, '<h3>$1</h3>')
.replace(/^# (.*$)/gim, '<h2>$1</h2>')
.replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
.replace(/^- (.*$)/gim, '<div class="md-list-item">• $1</div>')
.replace(/\n\n/g, '<div class="md-spacing"></div>')
.replace(/\n/g, '<br/>')
}
// 切换全局页面
const switchTab = (tab: TabType) => {
if (activeTab.value === tab) return
activeTab.value = tab
if (tab === 'data' && formDataList.value.length === 0) {
fetchFormData()
}
}
// --- 核心逻辑 ---
const fetchFormData = async () => {
isLoadingData.value = true
try {
let userId = 'wmcr-ECwAA3wT4EQ1xgCtTQDZVnEIAvg'
if (isWWReady.value) {
const contact = await ww.getCurExternalContact()
userId = contact.userId
}
const urlArchive = `https://liaison.nycjy.cn/api/v1/archive/archive-information?wecom_id=${userId}`
const urlCampTest = `https://liaison.nycjy.cn/api/v1/archive/parent-entry-assessment?wecom_id=${userId}`
const [archiveRes, campRes] = await Promise.allSettled([
fetch(urlArchive).then(r => r.json()),
fetch(urlCampTest).then(r => r.json())
])
const list: FormDataItem[] = []
if (archiveRes.status === 'fulfilled' && archiveRes.value.code === 200) {
const archives = archiveRes.value.data?.archive_informations || []
archives.forEach((submission: QuestionItem[], index: number) => {
const childNameItem = submission.find(q => q.storage_key === 'child_name')
list.push({
id: `archive_${index}`, type: 'archive', title: '家庭教育档案信息表', status: '已收录',
targetName: childNameItem?.answer ? `${childNameItem.answer} (孩子)` : '未知姓名',
rawData: submission
})
})
}
if (campRes.status === 'fulfilled' && campRes.value.code === 200) {
const campData = campRes.value.data?.parent_entry_assessment
if (campData) {
const answers = campData.archive_information || []
const parentNameItem = answers.find((q: QuestionItem) => q.storage_key === 'parent_name')
const formattedDate = campData.createdAt ? campData.createdAt.replace('T', ' ').substring(0, 16) : ''
list.push({
id: campData.form_id || 'camp_test', type: 'campTest', title: campData.form_title || '向阳营家长入营测试量表',
status: '已出报告', targetName: parentNameItem?.answer ? `${parentNameItem.answer} (家长)` : '家长答卷',
submitTime: formattedDate, totalScore: campData.total_score,
rawData: answers, reportMarkdown: campData.result_ana
})
}
}
formDataList.value = list.reverse()
} catch (err) {
console.error('获取数据失败:', err)
} finally {
isLoadingData.value = false
}
}
const openDetailModal = (item: FormDataItem) => {
currentItem.value = item
modalView.value = item.type === 'campTest' ? 'report' : 'qa'
showModal.value = true
}
const closeModal = () => {
showModal.value = false
setTimeout(() => { currentItem.value = null }, 300)
}
const handleSend = async (type: FormType) => {
if (isCoolingDown.value) return
activeType.value = type
startTimer(8) // 8秒冷却
activeSendType.value = type
startTimer(8)
try {
// 1. 获取外部联系人ID
const contact = await ww.getCurExternalContact()
const userId = contact.userId
// 2. 请求后端获取表单URL
const apiUrl = `https://liaison.nycjy.cn/api/v1/archive/form-url?user_id=${userId}&form_id=${CONFIG[type].id}`
const res = await fetch(apiUrl).then(r => r.json())
if (res.code === 200 && res.data?.form_url) {
// 3. 调用企微原生接口发送消息卡片
await ww.sendChatMessage({
msgtype: 'news',
news: {
title: CONFIG[type].title,
desc: CONFIG[type].desc,
imgUrl: 'https://forms.nycjy.cn/favicon.ico',
link: res.data.form_url
}
news: { title: CONFIG[type].title, desc: CONFIG[type].desc, imgUrl: 'https://forms.nycjy.cn/favicon.ico', link: res.data.form_url }
})
} else {
alert('获取链接失败：' + (res.message || '未知错误'))
}
} catch (err) {
console.error('发送流程出错:', err)
}
} else alert('获取链接失败：' + (res.message || '未知错误'))
} catch (err) { console.error('发送流程出错:', err) }
}
const startTimer = (seconds: number) => {
isCoolingDown.value = true
countdown.value = seconds
isCoolingDown.value = true; countdown.value = seconds
const timer = setInterval(() => {
countdown.value--
if (countdown.value <= 0) {
clearInterval(timer)
isCoolingDown.value = false
activeType.value = null
}
countdown.value--; if (countdown.value <= 0) { clearInterval(timer); isCoolingDown.value = false; activeSendType.value = null }
}, 1000)
}
// --- 初始化企业微信SDK ---
const initSDK = async () => {
try {
const url = window.location.href.split('#')[0]
// 签名函数 (对应你后端接口)
const getSig = async (apiUrl: string) => {
return await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
}).then(r => r.json())
}
const getSig = async (apiUrl: string) => await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url }) }).then(r => r.json())
await ww.register({
corpId: 'wwf72acc5a681dca93',
agentId: 1000105,
jsApiList: ['sendChatMessage', 'getCurExternalContact', 'getContext'],
getConfigSignature: () => getSig('https://sidebar.wx.nycjy.cn/api/v1/wecom/config-signature'),
getAgentConfigSignature: () => getSig('https://sidebar.wx.nycjy.cn/api/v1/wecom/agent-config-signature')
corpId: 'wwf72acc5a681dca93', agentId: 1000105, jsApiList: ['sendChatMessage', 'getCurExternalContact', 'getContext'],
getConfigSignature: () => getSig('https://sidebar.wx.nycjy.cn/api/v1/wecom/config-signature'), getAgentConfigSignature: () => getSig('https://sidebar.wx.nycjy.cn/api/v1/wecom/agent-config-signature')
})
isWWReady.value = true
console.log('企微SDK初始化成功')
} catch (e) {
console.error('SDK初始化失败', e)
} catch (e) { console.error('SDK初始化失败', e) }
}
}
onMounted(() => initSDK())
</script>
<style scoped>
/* 全局基础设置 */
/* ================= 全局基础 ================= */
.page-wrapper {
min-height: 100vh;
background-color: #f4f7ff;
/* 淡蓝色背景 */
background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
align-items: flex-start;
padding: 20px 20px;
position: relative;
overflow: hidden;
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}
@@ -182,9 +349,11 @@ onMounted(() => initSDK())
width: 100%;
max-width: 420px;
z-index: 10;
display: flex;
flex-direction: column;
}
/* 装饰元素 */
/* 背景点 */
.bg-dot {
position: absolute;
border-radius: 50%;
@@ -208,96 +377,141 @@ onMounted(() => initSDK())
right: -50px;
}
/* 头部样式 */
/* ================= 最顶部 App 级 Tab 导航 ================= */
.app-nav-tabs {
display: flex;
background: #eef0f7;
border-radius: 12px;
padding: 4px;
margin-bottom: 30px;
/* 拉开与内容的距离 */
margin-top: 10px;
}
.nav-tab {
flex: 1;
text-align: center;
padding: 10px 0;
font-size: 14px;
font-weight: 600;
color: #64748b;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s ease;
}
.nav-tab.active {
background: #ffffff;
color: #5c6be5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* ================= 页面视图容器 & 动画 ================= */
.page-view {
width: 100%;
}
.page-fade-enter-active,
.page-fade-leave-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-fade-enter-from {
opacity: 0;
transform: translateX(20px);
/* 页面左右滑入的感觉 */
}
.page-fade-leave-to {
opacity: 0;
transform: translateX(-20px);
}
/* ================= 每个页面独立的 Header ================= */
.header-section {
text-align: center;
margin-bottom: 30px;
margin-bottom: 24px;
}
.sparkle-icon {
font-size: 44px;
margin-bottom: 12px;
font-size: 40px;
margin-bottom: 8px;
}
.main-title {
color: #5c6be5;
/* 核心蓝紫色 */
font-size: 26px;
font-size: 24px;
font-weight: 800;
margin: 0 0 10px 0;
margin: 0 0 8px 0;
letter-spacing: 1px;
}
.subtitle {
color: #8c96a8;
font-size: 15px;
font-size: 14px;
margin: 0;
}
/* 主操作卡片 */
/* ================= 页面一：发送工具卡片 ================= */
.action-card {
background: #ffffff;
border-radius: 24px;
padding: 35px 24px;
box-shadow: 0 10px 30px rgba(92, 107, 229, 0.08);
border-radius: 20px;
padding: 24px;
box-shadow: 0 8px 24px rgba(92, 107, 229, 0.06);
text-align: center;
}
.card-headline {
color: #333c4d;
font-size: 22px;
font-size: 18px;
font-weight: 700;
margin: 0 0 15px 0;
margin: 0 0 10px 0;
}
/* 时间标签栏 */
.info-bar {
font-size: 14px;
font-size: 13px;
color: #64748b;
margin-bottom: 35px;
margin-bottom: 25px;
}
.time-badge {
background: #edf0ff;
/* 淡紫色背景 */
color: #5c6be5;
padding: 3px 10px;
padding: 2px 8px;
border-radius: 6px;
font-weight: 600;
margin: 0 4px;
}
/* 按钮列表 */
.button-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 25px;
gap: 14px;
margin-bottom: 10px;
}
.nav-button {
background: #ffffff;
border: 1px solid #eef0f5;
border-radius: 16px;
padding: 18px 20px;
border-radius: 14px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.nav-button:active:not(.is-disabled) {
transform: scale(0.97);
transform: scale(0.98);
background-color: #f8faff;
}
.btn-left {
display: flex;
align-items: center;
gap: 14px;
gap: 12px;
}
.btn-icon-box {
@@ -306,7 +520,7 @@ onMounted(() => initSDK())
.btn-label {
color: #5c6be5;
font-size: 16px;
font-size: 15px;
font-weight: 600;
}
@@ -316,7 +530,6 @@ onMounted(() => initSDK())
font-weight: bold;
}
/* 冷却状态样式 */
.is-disabled {
opacity: 0.6;
cursor: not-allowed;
@@ -324,30 +537,127 @@ onMounted(() => initSDK())
}
.cooldown-text {
font-size: 13px;
font-size: 12px;
color: #5c6be5;
margin-bottom: 20px;
margin-top: 15px;
font-weight: 500;
}
.btn-loading-ring {
width: 18px;
height: 18px;
width: 16px;
height: 16px;
border: 2px solid #5c6be5;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
/* ================= 页面二：信息页面列表 ================= */
/* 取消大外框，使用错落有致的卡片平铺 */
.data-list-wrapper {
width: 100%;
}
/* 底部声明 */
.disclaimer {
background: #f8f9fc;
.data-status {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0;
color: #94a3b8;
font-size: 14px;
}
.data-loading {
width: 26px;
height: 26px;
border-width: 3px;
margin-bottom: 12px;
}
.empty-icon {
font-size: 40px;
margin-bottom: 12px;
}
.data-list-container {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 20px;
}
.info-card {
background: #ffffff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 6px 20px rgba(92, 107, 229, 0.05);
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.8);
}
.info-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.info-title {
font-weight: 700;
color: #1e293b;
font-size: 16px;
}
.info-badge {
font-size: 12px;
padding: 4px 10px;
border-radius: 8px;
font-weight: 600;
}
.status-success {
background-color: #dcfce7;
color: #16a34a;
}
.info-card-body p {
margin: 0 0 8px 0;
font-size: 14px;
color: #475569;
}
.score-text {
color: #ef4444;
font-weight: 700;
font-size: 15px;
}
.info-card-footer {
margin-top: 16px;
display: flex;
justify-content: flex-end;
}
.view-btn {
background: #f0f2ff;
color: #5c6be5;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.view-btn:hover {
background: #e0e5ff;
}
/* 全局底部免责声明 */
.global-disclaimer {
margin-top: 30px;
background: rgba(248, 249, 252, 0.6);
border-radius: 12px;
padding: 12px 16px;
font-size: 12px;
@@ -357,10 +667,230 @@ onMounted(() => initSDK())
align-items: flex-start;
gap: 8px;
text-align: left;
width: 100%;
}
.light-bulb {
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ================= 弹窗样式 (完全复用之前完美的样式) ================= */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
z-index: 999;
display: flex;
justify-content: center;
align-items: flex-end;
}
.modal-container {
width: 100%;
max-width: 460px;
background: #fff;
border-radius: 20px 20px 0 0;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #f1f5f9;
}
.modal-title {
margin: 0;
font-size: 18px;
color: #1e293b;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.close-btn {
background: #f1f5f9;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 20px;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.modal-sub-tabs {
display: flex;
border-bottom: 1px solid #e2e8f0;
}
.modal-sub-tabs button {
flex: 1;
background: transparent;
border: none;
padding: 12px 0;
font-size: 14px;
font-weight: 600;
color: #64748b;
cursor: pointer;
position: relative;
}
.modal-sub-tabs button.sub-active {
color: #5c6be5;
}
.modal-sub-tabs button.sub-active::after {
content: '';
position: absolute;
bottom: 0;
left: 30%;
right: 30%;
height: 3px;
background: #5c6be5;
border-radius: 3px 3px 0 0;
}
.modal-body {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
}
.qa-list {
display: flex;
flex-direction: column;
}
.qa-item {
margin-bottom: 16px;
background: #f8fafc;
padding: 12px 16px;
border-radius: 10px;
}
.qa-question {
font-size: 13px;
color: #64748b;
margin-bottom: 6px;
}
.qa-answer {
font-size: 15px;
color: #0f172a;
font-weight: 500;
word-break: break-all;
}
.qa-answer.is-empty {
color: #cbd5e1;
font-style: italic;
font-weight: 400;
}
.markdown-body {
font-size: 14px;
color: #334155;
line-height: 1.6;
text-align: left;
}
.markdown-body :deep(h2) {
font-size: 18px;
color: #1e293b;
margin: 0 0 16px 0;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 8px;
}
.markdown-body :deep(h3) {
font-size: 16px;
filter: grayscale(0.2);
color: #5c6be5;
margin: 24px 0 12px 0;
}
.markdown-body :deep(h4) {
font-size: 15px;
color: #334155;
margin: 16px 0 8px 0;
font-weight: 700;
}
.markdown-body :deep(strong) {
color: #0f172a;
font-weight: 700;
}
.markdown-body :deep(blockquote) {
margin: 16px 0;
padding: 12px 16px;
background: #fffbeb;
border-left: 4px solid #f59e0b;
color: #92400e;
border-radius: 0 8px 8px 0;
font-size: 13px;
}
.markdown-body :deep(.md-list-item) {
margin-bottom: 6px;
padding-left: 8px;
color: #475569;
}
.markdown-body :deep(.md-spacing) {
height: 12px;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active .modal-container {
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-leave-active .modal-container {
animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideDown {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
</style>