81 lines
5.1 KiB
HTML
81 lines
5.1 KiB
HTML
<h2>系统架构总览</h2>
|
||
<p class="subtitle">方案 A：Django 后端 + Vue3 单页应用</p>
|
||
|
||
<div style="display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px;">
|
||
|
||
<!-- 前端 -->
|
||
<div style="flex: 1; min-width: 280px; background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155;">
|
||
<div class="label" style="color: #38bdf8; margin-bottom: 12px;">前端 — Vue3 SPA</div>
|
||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 12px; border-left: 3px solid #38bdf8;">
|
||
<div style="font-weight: 600; color: #e2e8f0; margin-bottom: 4px;">公开门户</div>
|
||
<div style="font-size: 12px; color: #94a3b8;">职位列表 / 搜索 / 职位详情<br>公司介绍 / 注册登录</div>
|
||
</div>
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 12px; border-left: 3px solid #818cf8;">
|
||
<div style="font-weight: 600; color: #e2e8f0; margin-bottom: 4px;">求职者中心</div>
|
||
<div style="font-size: 12px; color: #94a3b8;">我的简历 / 投递记录<br>个人信息管理</div>
|
||
</div>
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 12px; border-left: 3px solid #f472b6;">
|
||
<div style="font-weight: 600; color: #e2e8f0; margin-bottom: 4px;">管理后台</div>
|
||
<div style="font-size: 12px; color: #94a3b8;">超管：组织架构 / 账号管理<br>公司管理员：职位 / 投递管理</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 12px; font-size: 11px; color: #475569;">Vue Router + Pinia + Element Plus</div>
|
||
</div>
|
||
|
||
<!-- 箭头 -->
|
||
<div style="display: flex; align-items: center; justify-content: center; font-size: 28px; color: #475569; min-width: 40px;">⇄</div>
|
||
|
||
<!-- 后端 -->
|
||
<div style="flex: 1; min-width: 280px; background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155;">
|
||
<div class="label" style="color: #34d399; margin-bottom: 12px;">后端 — Django + DRF</div>
|
||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 12px; border-left: 3px solid #34d399;">
|
||
<div style="font-weight: 600; color: #e2e8f0; margin-bottom: 4px;">认证模块</div>
|
||
<div style="font-size: 12px; color: #94a3b8;">JWT 登录 / 注册 / 权限控制<br>角色：超管 / 公司管理员 / 求职者</div>
|
||
</div>
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 12px; border-left: 3px solid #34d399;">
|
||
<div style="font-weight: 600; color: #e2e8f0; margin-bottom: 4px;">职位模块</div>
|
||
<div style="font-size: 12px; color: #94a3b8;">职位 CRUD / 搜索过滤<br>公司隔离权限</div>
|
||
</div>
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 12px; border-left: 3px solid #34d399;">
|
||
<div style="font-weight: 600; color: #e2e8f0; margin-bottom: 4px;">投递模块</div>
|
||
<div style="font-size: 12px; color: #94a3b8;">投递记录 / 状态流转<br>简历存储（表单 + 文件）</div>
|
||
</div>
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 12px; border-left: 3px solid #34d399;">
|
||
<div style="font-weight: 600; color: #e2e8f0; margin-bottom: 4px;">组织架构模块</div>
|
||
<div style="font-size: 12px; color: #94a3b8;">集团 / 子公司 / 管理员绑定</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 12px; font-size: 11px; color: #475569;">Django 4.2 + DRF + JWT</div>
|
||
</div>
|
||
|
||
<!-- 箭头 -->
|
||
<div style="display: flex; align-items: center; justify-content: center; font-size: 28px; color: #475569; min-width: 40px;">⇄</div>
|
||
|
||
<!-- 存储 -->
|
||
<div style="flex: 0 0 160px; background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155;">
|
||
<div class="label" style="color: #fb923c; margin-bottom: 12px;">存储</div>
|
||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 10px; border-left: 3px solid #fb923c;">
|
||
<div style="font-size: 12px; color: #e2e8f0; font-weight: 600;">MySQL</div>
|
||
<div style="font-size: 11px; color: #94a3b8;">业务数据</div>
|
||
</div>
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 10px; border-left: 3px solid #fb923c;">
|
||
<div style="font-size: 12px; color: #e2e8f0; font-weight: 600;">Redis</div>
|
||
<div style="font-size: 11px; color: #94a3b8;">缓存 / 会话</div>
|
||
</div>
|
||
<div style="background: #0f172a; border-radius: 8px; padding: 10px; border-left: 3px solid #fb923c;">
|
||
<div style="font-size: 12px; color: #e2e8f0; font-weight: 600;">文件存储</div>
|
||
<div style="font-size: 11px; color: #94a3b8;">简历附件<br>（本地/OSS）</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="margin-top: 20px; background: #0f172a; border-radius: 8px; padding: 14px; border: 1px solid #1e3a5f;">
|
||
<span class="label" style="color: #38bdf8;">部署方式</span>
|
||
<span style="color: #94a3b8; margin-left: 8px; font-size: 13px;">Nginx 反向代理 → Vue3 静态文件 + Django API (Gunicorn)</span>
|
||
</div>
|