File size: 12,276 Bytes
f8b03c1 | 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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | {% load i18n %}
<!-- Tech Stack Section -->
<section class="tech-stack" id="tech">
<div class="section-header reveal">
<span class="section-tag">🛠 {% trans "技术栈" %}</span>
<h2 class="section-title">{% trans "现代化技术架构" %}</h2>
<p class="section-desc">{% trans "基于成熟稳定的技术栈构建，确保系统可靠性与可扩展性" %}</p>
</div>
<!-- 技术栈分类展示 -->
<div class="tech-categories">
<!-- 后端核心 -->
<div class="tech-category reveal">
<div class="tech-category-header">
<span class="tech-category-icon">⚙️</span>
<span class="tech-category-title">{% trans "后端核心" %}</span>
</div>
<div class="tech-category-items">
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(55, 118, 171, 0.15); color: #3776AB;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-.5 4.5c.69 0 1.25.56 1.25 1.25S12.19 7 11.5 7s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25zm3 0c.69 0 1.25.56 1.25 1.25S15.19 7 14.5 7s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25zM8 8h8c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-1v2l-3-2H8c-1.1 0-2-.9-2-2v-6c0-1.1.9-2 2-2z"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">Python 3.12</span>
<span class="tech-item-desc">{% trans "高性能运行时" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(9, 180, 100, 0.15); color: #09B464;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M11.146 0h3.924v18.166c-2.013.382-3.491.535-5.096.535-4.791 0-7.288-2.166-7.288-6.32 0-4.002 2.65-6.6 6.753-6.6.637 0 1.121.05 1.707.203V0zm0 9.143a3.894 3.894 0 00-1.325-.204c-1.988 0-3.134 1.223-3.134 3.365 0 2.09 1.096 3.236 3.109 3.236.433 0 .79-.025 1.35-.102V9.143zM21.314 6.06v9.098c0 3.134-.229 4.638-.917 5.937-.637 1.249-1.478 2.039-3.211 2.905l-3.644-1.733c1.733-.815 2.574-1.53 3.109-2.625.56-1.121.739-2.421.739-5.835V6.059h3.924zM17.39.021h3.924v4.026H17.39V.021z"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">Django 6.0</span>
<span class="tech-item-desc">Web {% trans "框架" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(99, 102, 241, 0.15); color: #6366f1;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">Django Ninja</span>
<span class="tech-item-desc">{% trans "高性能 API" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v10M1 12h6m6 0h10"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">Django-Q2</span>
<span class="tech-item-desc">{% trans "异步任务队列" %}</span>
</div>
</div>
</div>
</div>
<!-- AI & 自动化 -->
<div class="tech-category reveal">
<div class="tech-category-header">
<span class="tech-category-icon">🤖</span>
<span class="tech-category-title">AI & {% trans "自动化" %}</span>
</div>
<div class="tech-category-items">
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(16, 185, 129, 0.15); color: #10b981;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">OpenAI SDK</span>
<span class="tech-item-desc">{% trans "兼容式 LLM 接入" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(244, 114, 182, 0.15); color: #f472b6;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">Playwright</span>
<span class="tech-item-desc">{% trans "浏览器自动化" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">RapidOCR</span>
<span class="tech-item-desc">{% trans "文字识别" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">Flow State Machine</span>
<span class="tech-item-desc">{% trans "会话流程编排" %}</span>
</div>
</div>
</div>
</div>
<!-- 数据 & 通信 -->
<div class="tech-category reveal">
<div class="tech-category-header">
<span class="tech-category-icon">💾</span>
<span class="tech-category-title">{% trans "数据 & 通信" %}</span>
</div>
<div class="tech-category-items">
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(0, 150, 199, 0.15); color: #0096c7;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">SQLite</span>
<span class="tech-item-desc">{% trans "轻量级数据库" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4M2 12h4m12 0h4"/><path d="M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">{% trans "向量数据库" %}</span>
<span class="tech-item-desc">RAG {% trans "检索增强" %} <span style="color: var(--accent); font-size: 0.7rem;">{% trans "规划中" %}</span></span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(59, 130, 246, 0.15); color: #3b82f6;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">Channels</span>
<span class="tech-item-desc">WebSocket {% trans "实时通信" %}</span>
</div>
</div>
<div class="tech-item-card">
<div class="tech-item-icon" style="background: rgba(34, 197, 94, 0.15); color: #22c55e;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
</div>
<div class="tech-item-info">
<span class="tech-item-name">{% trans "飞书 API" %}</span>
<span class="tech-item-desc">{% trans "消息通知集成" %}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 架构亮点 -->
<div class="arch-highlights reveal">
<div class="arch-highlight-item">
<div class="arch-highlight-number">4</div>
<div class="arch-highlight-label">{% trans "层架构设计" %}</div>
<div class="arch-highlight-desc">API / Service / Admin / Model</div>
</div>
<div class="arch-highlight-item">
<div class="arch-highlight-number">100%</div>
<div class="arch-highlight-label">{% trans "类型注解覆盖" %}</div>
<div class="arch-highlight-desc">MyPy {% trans "严格模式" %}</div>
</div>
<div class="arch-highlight-item">
<div class="arch-highlight-number">DI</div>
<div class="arch-highlight-label">{% trans "依赖注入" %}</div>
<div class="arch-highlight-desc">ServiceLocator {% trans "模式" %}</div>
</div>
<div class="arch-highlight-item">
<div class="arch-highlight-number">CI/CD</div>
<div class="arch-highlight-label">{% trans "自动化部署" %}</div>
<div class="arch-highlight-desc">GitHub Actions</div>
</div>
</div>
</section>
|