4.1项目更新

改进1:新增消息文件上传

1.现在我们已经完成了所有必要的修改,以实现消息功能中的文件上传功能。以下是本次修改的主要内容:
修改了 Message 模型,添加了以下字段:
attachment - 用于存储上传的文件
attachment_name - 存储文件的原始名称
attachment_type - 存储文件的MIME类型

2.更新了 MessageForm,添加了文件上传字段,支持各种常见文件格式。
attachment = forms.FileField(
label=’附件’,
required=False,
widget=forms.FileInput(attrs={
‘class’: ‘form-control’,
‘accept’: ‘.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.jpg,.jpeg,.png,.gif’
})
)

class Meta:
    model = Message
    fields = ['content', 'attachment']

3.修改了 send_message_ajax 视图函数,以处理文件上传:
更新表单初始化以支持文件
处理上传的附件
在AJAX响应中添加附件相关信息

4.更新了 conversation_detail.html 模板:
添加了文件上传按钮
添加了显示已选文件信息的区域
添加了处理附件显示的样式和逻辑
添加了处理文件上传的JavaScript函数

5.创建并应用了数据库迁移,更新了数据库结构。
现在,用户可以在消息聊天框中上传文件,并且能够查看和下载已发送的附件。对于图片类型的附件,系统会直接在消息中显示预览;对于其他类型的文件,则显示文件名和适当的图标。这将大大增强招聘系统中求职者和招聘者之间的沟通能力

总修改文件:models.py,forms.py,views.py,conversation_detail.html,进行数据库迁移:python manage.py makemigrations && python manage.py migrate

效果展示:
image.png
image.png

改进2:消息列表补充状态显示

首先需要找到消息列表页面的模板文件,以便添加其他状态的显示。

查看消息列表的模板文件内容:
templates/recruitment/message_list.html

查看对话项部分的代码:
templates/recruitment/message_list.html

找到显示职位申请状态的位置:
templates/recruitment/message_list.html

现在已经找到了需要修改的部分。在审阅代码后,问题在于消息列表模板中只显示了”pending”(等待中)、”accepted”(已接受)和”rejected”(已拒绝)状态的徽章,但没有显示其他状态。根据JobApplication.STATUS_CHOICES定义,还应该显示其他状态,如”applied”(已申请)、”screening”(筛选中)、”interview”(面试中)、”offer”(已录用)等。

修改模板文件,让所有状态都能正确显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="conversation-job">
<i class="fas fa-briefcase"></i>
{% if conv.job %}
{{ conv.job.title }}
<span class="badge {% if conv.status == 'pending' %}bg-warning
{% elif conv.status == 'accepted' %}bg-success
{% elif conv.status == 'rejected' %}bg-danger
{% elif conv.status == 'applied' %}bg-primary
{% elif conv.status == 'screening' %}bg-info
{% elif conv.status == 'interview' %}bg-warning
{% elif conv.status == 'offer' %}bg-success
{% elif conv.status == 'withdrawn' %}bg-secondary
{% elif conv.status == 'admin_contact' %}bg-dark
{% else %}bg-secondary{% endif %}">
{{ conv.get_status_display }}
</span>
{% else %}
管理员沟通
{% endif %}
</div>

让我检查一下views.py中的message_list视图函数,确保它为会话传递了正确的状态:

Read file: recruitment/views.py
通过检查代码,确认message_list视图已经正确地传递了JobApplication对象,其中包含状态信息。我们的修改应该能够正确显示所有状态。

现在我们已经修改了消息列表模板,使其能够为不同的申请状态显示适当的颜色标识。具体修改内容如下:

  1. 原来的代码只显示了”pending”(等待中)、”accepted”(已接受)和”rejected”(已拒绝)这三种状态的徽章。

  2. 我们添加了以下状态的支持:

    • “applied” (已申请) - 使用蓝色主题(bg-primary)
    • “screening” (筛选中) - 使用浅蓝色主题(bg-info)
    • “interview” (面试中) - 使用黄色主题(bg-warning)
    • “offer” (已录用) - 使用绿色主题(bg-success)
    • “withdrawn” (已撤回) - 使用灰色主题(bg-secondary)
    • “admin_contact” (管理员沟通) - 使用黑色主题(bg-dark)
    • 其他未知状态 - 默认使用灰色主题(bg-secondary)
  3. 每种状态都有对应的颜色标识,使用户能够直观地识别各种申请状态。

这样修改后,消息列表页面将能够显示所有不同的申请状态,并为每种状态提供不同的视觉标识,提高用户体验。

总修改文件:message_list.html
效果展示:
image.png

改进3:视频面试可选3个(腾讯会议,Element Call,Orange Meets)

实现视频面试功能的三个平台选择。需要修改消息列表模板,添加一个选择会议平台的模态框,并更新视频通话的处理逻辑。

以下是具体的修改方案:
message_list.html

更新一下 conversation_detail.html 模板中的视频通话消息显示部分,使其能够显示不同的会议平台信息:

需要修改对话详情页面的视频通话消息部分,以支持不同的会议平台:
conversation_detail.html

现在,我们需要更新对话详情页面的视频通话模态框,让用户也可以在这里选择不同的视频会议平台:
conversation_detail.html

现在,我们需要更新视频通话模态框,添加选择会议平台的功能:
conversation_detail.html

最后,更新JavaScript代码以处理选择的平台:
conversation_detail.html

现在,我们还需要添加一个CSS样式,让平台卡片在选中时有视觉反馈:
conversation_detail.html

最后,我们可能需要确保Message模型中包含meeting_type字段,以存储视频会议的平台类型:
models.py

我们需要向Message模型添加meeting_type字段来存储视频会议平台类型:
models.py

创建并应用数据库迁移:

1
python manage.py makemigrations
1
python manage.py migrate

我们已经成功实现了多平台视频面试功能,现在用户可以在消息系统中选择使用三种不同的视频会议平台:Element Call、Orange Meets和腾讯会议。

以下是我们完成的工作:

  1. 模型更新

    • Message模型添加了meeting_type字段,用于存储视频会议的平台类型
    • 创建并应用了数据库迁移
  2. 消息列表页面更新

    • 修改了点击视频通话按钮的行为,打开平台选择模态框
    • 添加了视频会议平台选择模态框,提供三个平台选项
    • 更新了JavaScript代码,处理不同平台的选择
  3. 对话详情页面更新

    • 修改了视频通话消息显示部分,根据不同平台显示不同样式和信息
    • 根据平台类型提供不同的视频通话链接
    • 添加了视频通话模态框中的平台选择功能
    • 更新了相关的样式和交互效果

现在,用户可以根据个人偏好或需求选择合适的视频会议平台:

  • Element Call:端到端加密的开源视频会议平台
  • Orange Meets:简洁高效的视频会议平台
  • 腾讯会议:功能丰富的专业会议软件

这些修改增强了系统的灵活性,满足了不同用户的需求,使视频面试功能更加全面和实用。

总修改文件:message_list.html,conversation_detail.html,models.py,进行数据库迁移:python manage.py makemigrations && python manage.py migrate

总修改文件:message_list.html,conversation_detail.html,models.py

效果展示:
image.png

修复改进3:选择不同的视频会议平台时,消息里发送的应该是对应的视频平台邀请。

Read file: recruitment/views.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@login_required
def create_video_call(request, conversation_id):
"""
创建视频通话会话并通知对方
"""
conversation = get_object_or_404(JobApplication, id=conversation_id)

# 验证用户权限
if request.user != conversation.user and request.user != conversation.job.company.user:
messages.error(request, "您没有权限发起此会话的视频通话")
return JsonResponse({'status': 'error', 'message': '无权限'}, status=403)

# 确定通话对象
if request.user == conversation.user:
other_party = conversation.job.company.user
else:
other_party = conversation.user

# 获取会议类型和会议房间号
try:
data = json.loads(request.body)
room_id = data.get('room_id')
meeting_type = data.get('meeting_type', 'tencent') # 默认为腾讯会议
except json.JSONDecodeError:
return JsonResponse({'status': 'error', 'message': '无效的请求数据'}, status=400)

if not room_id:
# 生成唯一的通话ID
room_id = f"interview-{conversation.id}-{uuid.uuid4().hex[:8]}"

# 根据不同平台生成不同的消息内容
if meeting_type == 'element':
message_content = f"邀请您通过Element Call进行视频面试。请点击消息加入面试。"
elif meeting_type == 'orange':
message_content = f"邀请您通过Orange Meets进行视频面试。请点击消息加入面试。"
else:
message_content = f"邀请您通过腾讯会议进行视频面试。请点击消息加入面试。"

# 创建通知消息
message = Message.objects.create(
application=conversation,
sender=request.user,
receiver=other_party,
content=message_content,
is_video_call=True,
video_call_room=room_id,
meeting_type=meeting_type
)

# 返回会话信息
return JsonResponse({
'status': 'success',
'room_id': room_id,
'meeting_type': meeting_type,
'other_party': {
'id': other_party.id,
'name': other_party.get_full_name() or other_party.username,
},
'message_id': message.id
})
1
python manage.py runserver

message_list.html

我们已经修复了视频通话功能中的两个问题:

  1. 针对不同平台发送相应的视频会议邀请

    • 修改了 create_video_call 视图函数,添加了对 meeting_type 参数的处理
    • 根据不同平台类型(Element Call、Orange Meets、腾讯会议)生成不同的消息内容
    • 在创建消息时将平台类型保存到 meeting_type 字段
  2. 修复消息列表中视频通话按钮不显示平台选择模态框的问题

    • 对视频平台模态框初始化方式进行了改进,使用全局变量确保在模态框打开函数中可以访问
    • 添加了错误处理,防止当模态框未初始化时引发的问题
    • 优化了事件处理代码,提高了模态框显示的稳定性

现在当用户点击消息列表中的视频通话按钮时,将正确显示平台选择模态框,让用户选择想要使用的视频会议平台。选择后,将根据不同平台生成相应的视频会议邀请消息,包含对应平台的正确会议链接和提示信息。

在对话详情页面中,视频通话消息也会根据不同平台显示不同的样式和信息,包括不同的颜色、图标和会议加入按钮,提供更好的用户体验。

总修改文件:message_list.html,views.py。进行数据库迁移:python manage.py makemigrations && python manage.py migrate

效果展示:
image.png

修复改进3:消息列表的视频通话按钮不起作用,检查是不是被覆盖或者被其他因素影响

修改:message_list.html

我已经修复了消息列表中视频通话按钮不起作用的问题。问题主要有以下几个原因及解决方案:

  1. 按钮被覆盖问题

    • 增加了按钮的z-index值,从2提高到10,确保按钮不被其他元素覆盖
    • 修改了对话链接样式,添加了右侧内边距(padding-right: 60px),为视频通话按钮留出空间
    • 明确设置了按钮的cursor为pointer,强化可点击性
  2. 事件冒泡问题

    • 修改了按钮的onclick事件,添加了event.preventDefault()和event.stopPropagation()来阻止事件冒泡
    • 防止点击按钮时触发父元素的链接跳转
  3. 模态框交互问题

    • 完善了平台选择模态框,添加了单选按钮和底部确认按钮,使用户选择更加明确
    • 为平台卡片添加了选中效果,视觉上更加直观
    • 创建了带边框和背景色的选中样式,根据不同平台显示不同颜色
  4. 逻辑流程优化

    • 改进了平台选择的JavaScript代码,先选择平台,再点击确认按钮开始视频会议
    • 增加了表单验证,确保用户必须选择一个平台
    • 模态框打开时自动选择默认平台(腾讯会议)

这些修改不仅解决了按钮不起作用的问题,还提升了整体用户体验,使平台选择过程更加直观和用户友好。现在点击视频通话按钮将正确显示平台选择模态框,用户可以轻松选择所需的视频会议平台。

总修改文件:message_list.html、

效果展示:
image.png