1. 核心功能

• 展示问题列表
• 选择并回答问题
• 实时更新问答状态
• 记录问答时间和相关方信息

2. 组件结构

2.1 问答列表组件

<template>
<a-modal v-model:visible="visible" title="回答问题" :width="800">
<!-- 问题列表 -->
<a-list :data-source="questionList" :bordered="true">
<template #renderItem="{ item }">
<a-list-item>
<a-list-item-meta>
<!-- 问题标题区 -->
<template #title>
<div class="question-header">
<span>提问者：{{ getAskerName(item.askerId) }}</span>
<span>提问时间：{{ formatDateTime(item.createTime) }}</span>
</div>
<div>问题：{{ item.question }}</div>
</template>
<!-- 回答区 -->
<template #description>
<div v-if="item.answer" class="answer-content">
<p>回答：{{ item.answer }}</p>
<p>回答时间：{{ formatDateTime(item.answerTime) }}</p>
</div>
<div v-else>
<a-radio-group v-model:value="selectedQuestionId">
<a-radio :value="item.id">选择回答此问题</a-radio>
</a-radio-group>
</div>
</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
<!-- 回答输入框 -->
<a-textarea
v-if="selectedQuestionId"
v-model:value="answerContent"
placeholder="请输入回答内容"
:rows="4"
/>
</a-modal>
</template>

2.2 核心数据结构

// 问题对象结构
interface Question {
  id: string; // 问题ID
  askerId: string; // 提问者ID
  question: string; // 问题内容
  answer?: string; // 回答内容
  createTime: string; // 提问时间
  answerTime?: string; // 回答时间
}
// 组件状态管理
const state = {
  visible: false, // 弹窗显示状态
  questionList: [], // 问题列表
  selectedQuestionId: null, // 当前选中的问题
  answerContent: '', // 回答内容
  askerMap: new Map() // 提问者信息映射
}

// 打开问答面板
const showQuestionPanel = (questions, askers) => {
questionList.value = questions;

3. 关键实现逻辑

3.1 问题展示与选择

// 建立提问者映射
askerMap.value.clear();
askers.forEach(asker => {
  askerMap.value.set(asker.id, asker.name);
});
  visible.value = true;
};
// 获取提问者名称
const getAskerName = (askerId) => {
  return askerMap.value.get(askerId) || '未知用户';
};

3.2 回答处理

const handleAnswer = async () => {
if (!selectedQuestionId.value) {
message.warning('请选择要回答的问题');
return;
}
if (!answerContent.value.trim()) {
message.warning('请输入回答内容');
return;
}
try {
const response = await submitAnswer({
questionId: selectedQuestionId.value,
answer: answerContent.value
});
if (response.success) {
// 更新问题列表中的回答
const question = questionList.value.find(
q => q.id === selectedQuestionId.value
);
if (question) {
question.answer = answerContent.value;
question.answerTime = new Date().toISOString();
}
// 重置状态
selectedQuestionId.value = null;
answerContent.value = '';
message.success('回答成功');
}
} catch (error) {
message.error('回答失败：' + error.message);
}
};

4. 样式设计

.question-header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.answer-content {
margin-top: 8px;
color: #52c41a;
}