feat(website): add QQ group QR code to navigation bar (#572)

Add a "QQ Group" tab in the site header that opens a centered modal
with the QR code image. Includes mobile menu support and i18n.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

packages/website/src/components/layout/SiteHeader.vue

@@ -8,6 +8,7 @@ const { t, locale } = useI18n()
 const router = useRouter()
 const { isDark, toggleTheme } = useTheme()
 const mobileMenuOpen = ref(false)
+const showQQModal = ref(false)
 
 function switchLocale() {
   const next = locale.value === 'en' ? 'zh' : 'en'
@@ -50,6 +51,9 @@ function goHome() {
             <line x1="10" y1="14" x2="21" y2="3" />
           </svg>
         </a>
+        <a class="nav-link" @click.prevent="showQQModal = true">
+          {{ t('nav.qqGroup') }}
+        </a>
         <button class="icon-btn" @click="switchLocale" :title="locale === 'en' ? '中文' : 'English'">
           {{ locale === 'en' ? '中' : 'EN' }}
         </button>
@@ -85,6 +89,7 @@ function goHome() {
         <a class="mobile-link" @click.prevent="navigateTo('landing')">{{ t('nav.home') }}</a>
         <a class="mobile-link" @click.prevent="navigateTo('docs.getting-started')">{{ t('nav.docs') }}</a>
         <a class="mobile-link" href="https://github.com/EKKOLearnAI/hermes-web-ui" target="_blank" rel="noopener">{{ t('nav.github') }}</a>
+        <a class="mobile-link" @click.prevent="showQQModal = true; mobileMenuOpen = false">{{ t('nav.qqGroup') }}</a>
         <div class="mobile-actions">
           <button class="mobile-action-btn" @click="switchLocale">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
@@ -115,6 +120,15 @@ function goHome() {
       </div>
     </div>
   </header>
+  <Teleport to="body">
+    <div v-if="showQQModal" class="qq-modal-overlay" @click="showQQModal = false">
+      <div class="qq-modal-content" @click.stop>
+        <h3 class="qq-modal-title">{{ t('nav.qqGroup') }}</h3>
+        <img src="/qrcode.png" alt="QQ Group" class="qq-modal-qr" />
+        <button class="qq-modal-close" @click="showQQModal = false">&times;</button>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped lang="scss">
@@ -304,3 +318,56 @@ function goHome() {
   }
 }
 </style>
+
+<style lang="scss">
+.qq-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qq-modal-content {
+  position: relative;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.qq-modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.qq-modal-qr {
+  width: 260px;
+  height: 260px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+
+.qq-modal-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--text-muted);
+  cursor: pointer;
+  line-height: 1;
+}
+
+.qq-modal-close:hover {
+  color: var(--text-primary);
+}
+</style>

packages/website/src/i18n/en.ts

@@ -3,6 +3,7 @@ export default {
     home: 'Home',
     docs: 'Documentation',
     github: 'GitHub',
+    qqGroup: 'QQ Group',
   },
   hero: {
     title: 'Self-Hosted AI Chat Dashboard',

packages/website/src/i18n/zh.ts

@@ -3,6 +3,7 @@ export default {
     home: '首页',
     docs: '文档',
     github: 'GitHub',
+    qqGroup: 'QQ 群',
   },
   hero: {
     title: '自托管 AI 聊天仪表板',