feat: 分组显示应用、联系人弹窗、手机端适配、点击复制

- 应用按6个分组显示：人力资源、企业管理、AI应用中心、文创、工具、个人 - 新增SmartResume人岗匹配应用 - AI图标改为联系人图标，弹窗展示高欣/王立刚两张二维码 - Header品牌改为All by AI / all8ai.top - 手机端取消轮播，改为竖向列表 - 帮助弹窗表格点击复制、手机端横向滚动 - 副标题手机端中英文换行 - 轮播按钮裁切修复
2026-06-29 08:47:18 +08:00
parent 4fadaad383
commit e76ed2d57e
3 changed files with 419 additions and 160 deletions
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>AI 智能工作台 - 企业门户</title>
+  <title>AI 应用门户</title>
  <meta name="description" content="企业 AI Agent 统一门户，一站式访问所有智能应用" />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -203,6 +203,14 @@
    }
    .carousel-wrapper {
      position: relative;
+      overflow: visible;
+      width: 100%;
+      padding: 0 2.5rem;
+    }
+    @media (max-width: 520px) {
+      .carousel-wrapper { padding: 0 2rem; }
+    }
+    .carousel-viewport {
      overflow: hidden;
      width: 100%;
    }
@@ -211,23 +219,46 @@
      width: 100%;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
+    .group-title {
+      font-size: 0.8rem;
+      font-weight: 800;
+      color: oklch(0.72 0.04 260);
+      padding: 0.5rem 0 0.25rem;
+      border-bottom: 1px solid oklch(0.25 0.02 265 / 0.4);
+      margin-bottom: 0.75rem;
+    }
    .carousel-page {
      flex: 0 0 100%;
      min-width: 100%;
      width: 100%;
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-auto-rows: 220px;
-      align-content: start;
-      gap: 1rem;
+      display: block;
      padding: 0 0.25rem;
    }
    @media (max-width: 768px) {
      .carousel-page { grid-template-columns: repeat(2, 1fr); }
+      .carousel-wrapper { display: none; }
    }
    @media (max-width: 520px) {
      .carousel-page { grid-template-columns: 1fr; }
    }
+    /* 手机端竖向列表 */
+    .mobile-app-list { display: none; }
+    @media (max-width: 768px) {
+      .mobile-app-list { display: block; }
+    }
+    .mobile-group-title {
+      font-size: 0.75rem;
+      font-weight: 800;
+      color: oklch(0.72 0.04 260);
+      padding: 0.75rem 0 0.25rem;
+      border-bottom: 1px solid oklch(0.25 0.02 265 / 0.4);
+      margin-bottom: 0.5rem;
+    }
+    .mobile-app-list .portal-card {
+      margin-bottom: 0.75rem;
+      height: auto;
+      min-height: 120px;
+    }
    .carousel-btn {
      position: absolute;
      top: 50%;
@@ -254,8 +285,8 @@
      opacity: 0.3;
      cursor: not-allowed;
    }
-    .carousel-btn.prev { left: -0.75rem; }
-    .carousel-btn.next { right: -0.75rem; }
+    .carousel-btn.prev { left: 0; }
+    .carousel-btn.next { right: 0; }
    .carousel-dots {
      display: flex;
      justify-content: center;
@@ -277,6 +308,23 @@
      width: 1.25rem;
      border-radius: 0.25rem;
    }
+    .contact-section {
+      border: 1px solid oklch(0.3 0.03 265 / 0.5);
+      background: linear-gradient(145deg, oklch(0.17 0.02 265 / 0.92), oklch(0.13 0.012 260 / 0.88));
+      border-radius: 1rem;
+      box-shadow: 0 18px 48px oklch(0 0 0 / 0.3), inset 0 1px 0 oklch(0.35 0.03 265 / 0.35);
+    }
+    .contact-qr {
+      border-radius: 0.625rem;
+      border: 2px solid oklch(0.35 0.04 265 / 0.6);
+    }
+    @media (max-width: 520px) {
+      .contact-qr { width: 110px !important; height: 150px !important; }
+    }
+    @media (max-width: 768px) {
+      .hero-subtitle { white-space: normal !important; }
+      .hero-subtitle .sep { display: block; height: 0.25rem; }
+    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
@@ -309,6 +357,10 @@
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
+    @media (max-width: 768px) {
+      .help-overlay { padding: 0.5rem; }
+      .help-modal { max-width: 100% !important; border-radius: 0.75rem; }
+    }
    .help-overlay.active {
      opacity: 1;
      pointer-events: auto;
@@ -317,7 +369,7 @@
      background: oklch(0.13 0.015 260 / 0.98);
      border: 1px solid oklch(0.3 0.03 265 / 0.55);
      box-shadow: 0 30px 80px oklch(0 0 0 / 0.5);
-      max-width: 52rem;
+      max-width: 64rem;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
@@ -342,6 +394,10 @@
      border-collapse: collapse;
      font-size: 11px;
    }
+    .help-table-wrap {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
    .help-table th {
      background: oklch(0.15 0.015 260 / 0.6);
      color: oklch(0.7 0.02 260);
@@ -356,6 +412,21 @@
      border-bottom: 1px solid oklch(0.2 0.015 265 / 0.3);
      color: oklch(0.8 0.01 260);
    }
+    .help-table td.copy-cell {
+      cursor: pointer;
+      transition: color 0.2s ease, background 0.2s ease;
+      border-radius: 0.25rem;
+    }
+    .help-table td.copy-cell:hover {
+      color: oklch(0.9 0.05 260);
+      background: oklch(0.2 0.03 265 / 0.4);
+    }
+    .help-table td.copy-cell:active {
+      background: oklch(0.25 0.04 265 / 0.5);
+    }
+    .copy-feedback {
+      color: oklch(0.72 0.18 150) !important;
+    }
    .help-table tr:last-child td { border-bottom: none; }
    .aurora-paused {
      animation-play-state: paused !important;
@@ -387,21 +458,21 @@
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l7.5 4.25v8.5L12 20l-7.5-4.25v-8.5L12 3z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 9.2L12 7.25l3.5 1.95v3.6L12 14.75l-3.5-1.95v-3.6z"/></svg>
        </div>
        <div>
-          <div class="text-xs font-extrabold tracking-tight text-slate-100">AI 智能工作台 <span class="text-slate-500 font-medium">/ AI Workspace</span></div>
-          <div class="text-[9px] uppercase tracking-[0.22em] text-slate-500 leading-none hidden sm:block">Enterprise Portal</div>
+          <div class="text-xs font-extrabold tracking-tight text-slate-100">All by AI</div>
+          <div class="text-[9px] uppercase tracking-[0.22em] text-slate-500 leading-none hidden sm:block">all8ai.top</div>
        </div>
      </div>
      <div class="flex items-center gap-3">
        <span class="hidden md:inline-flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1 text-[11px] font-semibold text-slate-400 ring-1 ring-white/10">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 shadow-[0_0_12px_oklch(0.72_0.18_150)]"></span>
-          14 个智能应用在线 / 14 Apps Online
+          20 个智能应用在线 / 20 Apps Online
        </span>
        <button class="help-btn w-7 h-7 rounded-full flex items-center justify-center" onclick="toggleHelpModal(true)" aria-label="帮助 / Help">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18v-3"/><circle cx="12" cy="12" r="9"/><path d="M8.5 8.5a3.5 3.5 0 1 1 5 3c-1 .5-1.5 1-1.5 2"/></svg>
        </button>
-        <div class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-white text-[10px] font-bold shadow-lg">
-          AI
-        </div>
+        <button class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-white shadow-lg cursor-pointer hover:ring-2 hover:ring-violet-400/50 transition-all" onclick="toggleContactModal(true)" aria-label="联系方式 / Contact">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/><circle cx="9.5" cy="7" r="4"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 11h4M19 9v4"/></svg>
+        </button>
      </div>
    </div>
  </header>
@@ -414,8 +485,8 @@
      <h1 class="text-xl md:text-2xl font-extrabold tracking-tight mb-1">
        <span class="gradient-text">AI 智能应用中心 / AI Application Hub</span>
      </h1>
-      <p class="text-slate-500 text-[11px] md:text-xs max-w-xl mx-auto leading-relaxed">
-        一站式访问所有智能应用，让 AI 赋能企业每一个环节 · One-stop access to all AI apps, empowering every business workflow
+      <p class="hero-subtitle text-slate-500 text-[10px] md:text-xs mx-auto leading-relaxed whitespace-nowrap overflow-hidden text-ellipsis">
+        一站式访问所有智能应用，让 AI 赋能企业每一个环节<span class="sep"> · </span>One-stop access to all AI apps, empowering every business workflow
      </p>
    </section>

@@ -424,16 +495,21 @@
      <button class="carousel-btn prev" id="carouselPrev" aria-label="上一页 / Previous" onclick="changePage(-1)">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 18l-6-6 6-6"/></svg>
      </button>
-      <div class="carousel-track" id="carouselTrack"></div>
+      <div class="carousel-viewport">
+        <div class="carousel-track" id="carouselTrack"></div>
+      </div>
      <button class="carousel-btn next" id="carouselNext" aria-label="下一页 / Next" onclick="changePage(1)">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 18l6-6-6-6"/></svg>
      </button>
      <div class="carousel-dots" id="carouselDots"></div>
    </section>

+    <!-- Mobile App List -->
+    <section class="mobile-app-list" id="mobileAppList"></section>
+
    <!-- Footer -->
    <footer class="mt-10 pt-5 border-t border-white/10 text-center text-[11px] text-slate-500">
-      <p>&copy; 2026 AI 智能工作台 · AI Workspace · Enterprise AI Portal</p>
+      <p>&copy; 2026 AI 应用门户 · AI Application Portal</p>
    </footer>
  </main>

@@ -450,6 +526,28 @@
    </div>
  </div>

+  <!-- Contact Modal -->
+  <div class="help-overlay" id="contactOverlay" onclick="if(event.target===this)toggleContactModal(false)">
+    <div class="help-modal p-4 md:p-6" style="max-width: 28rem;">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-base font-extrabold text-slate-100">联系方式 / Contact</h2>
+        <button class="help-btn w-7 h-7 rounded-full flex items-center justify-center" onclick="toggleContactModal(false)" aria-label="关闭 / Close">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M6 18L18 6"/></svg>
+        </button>
+      </div>
+      <div class="flex flex-row items-start justify-center gap-3 md:gap-4">
+        <div class="flex flex-col items-center gap-2">
+          <img src="gx.jpg" alt="高欣 / Sidney" class="contact-qr bg-white" style="width: 130px; height: 180px; object-fit: contain;" />
+          <p class="text-[10px] text-slate-400">高欣 / Sidney</p>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <img src="wlg1.jpg" alt="王立刚 / Wang Ligang" class="contact-qr bg-white" style="width: 130px; height: 180px; object-fit: contain;" />
+          <p class="text-[10px] text-slate-400">王立刚 / Wang Ligang</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
  <script>
    const iconPaths = {
      chart: '<path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 16v-5"/><path d="M12 16V8"/><path d="M16 16v-8"/>',
@@ -463,153 +561,242 @@
      landmark: '<path d="M3 21h18"/><path d="M5 10h14"/><path d="M6 10v8"/><path d="M10 10v8"/><path d="M14 10v8"/><path d="M18 10v8"/><path d="M4 10l8-6 8 6"/>'
    };

-    const apps = [
+    const appGroups = [
      {
-        name: 'TalentMatrix',
-        subtitle: '绩效管理 / Performance',
-        desc: '智能绩效管理系统，助力企业高效评估与发展 · Intelligent performance management for efficient evaluation and growth',
-        url: 'https://p.hr8ai.top/',
-        icon: 'chart',
-        accent: 'oklch(0.58 0.22 255)',
-        accent2: 'oklch(0.68 0.17 205)',
-        tag: '绩效 / HR'
+        title: '人力资源 / Human Resources',
+        apps: [
+          {
+            name: 'TalentMatrix',
+            subtitle: '绩效管理 / Performance',
+            desc: '智能绩效管理系统，助力企业高效评估与发展 · Intelligent performance management for efficient evaluation and growth',
+            url: 'https://p.hr8ai.top/',
+            icon: 'chart',
+            accent: 'oklch(0.58 0.22 255)',
+            accent2: 'oklch(0.68 0.17 205)',
+            tag: '绩效 / HR'
+          },
+          {
+            name: 'TurboTalent',
+            subtitle: '人才管理 · 盘点 · 发展 / Talent Management',
+            desc: '全方位人才管理平台，覆盖盘点与发展全流程 · Full-cycle talent management platform for review and development',
+            url: 'http://62.234.107.180:9002/',
+            icon: 'network',
+            accent: 'oklch(0.56 0.25 290)',
+            accent2: 'oklch(0.64 0.22 315)',
+            tag: '人才 / Talent'
+          },
+          {
+            name: 'TurboTalent 测评 / Assessment',
+            subtitle: '在线测评中心 / Online Assessment',
+            desc: '专业人才测评系统，科学评估能力与潜力 · Professional assessment system for scientific capability evaluation',
+            url: 'https://ce.all8ai.top/',
+            icon: 'clipboard',
+            accent: 'oklch(0.62 0.18 160)',
+            accent2: 'oklch(0.66 0.16 190)',
+            tag: '测评 / Test'
+          },
+          {
+            name: 'TalentMentor',
+            subtitle: '企业招聘 · 人才发展 / Recruiting & Development',
+            desc: '智能化招聘与人才发展双引擎平台 · Dual-engine platform for smart recruiting and talent development',
+            url: 'https://m.hr8ai.top/',
+            icon: 'users',
+            accent: 'oklch(0.66 0.2 55)',
+            accent2: 'oklch(0.74 0.18 82)',
+            tag: '招聘 / Recruit'
+          },
+          {
+            name: 'HRBP 智能分析 / HRBP Analytics',
+            subtitle: 'HR 业务伙伴 / HR Business Partner',
+            desc: 'AI 驱动的 HR 智能分析与决策支持系统 · AI-powered HR analytics and decision support system',
+            url: 'https://hrbp.all8ai.top/',
+            icon: 'brain',
+            accent: 'oklch(0.62 0.24 18)',
+            accent2: 'oklch(0.66 0.22 345)',
+            tag: '分析 / Analytics'
+          },
+          {
+            name: '猎头 Agent / Headhunt Agent',
+            subtitle: '智能猎头助手 / Smart Headhunting',
+            desc: 'AI 猎头 Agent，自动化人才寻访与匹配 · AI headhunting agent for automated talent sourcing and matching',
+            url: 'https://h2agent.opc8ai.com/',
+            icon: 'search',
+            accent: 'oklch(0.56 0.24 265)',
+            accent2: 'oklch(0.61 0.2 230)',
+            tag: '猎头 / Search'
+          },
+          {
+            name: '美雇 / MeiGu',
+            subtitle: '劳动关系管理 / Labor Relations',
+            desc: '企业用工权与劳动关系管理平台，合规高效管理雇佣关系 · Enterprise labor relations and employment rights management platform',
+            url: 'https://www.uumeigu.com/',
+            icon: 'briefcase',
+            accent: 'oklch(0.64 0.18 210)',
+            accent2: 'oklch(0.69 0.16 235)',
+            tag: '劳资 / Labor'
+          },
+          {
+            name: '技能人才胜任力',
+            subtitle: '技能胜任力评估 / Skills Assessment',
+            desc: '技能人才胜任力评估系统，科学测评技能水平 · Technical skill competency assessment system',
+            url: 'https://lianxingtest.feihec.com/',
+            icon: 'clipboard',
+            accent: 'oklch(0.58 0.18 210)',
+            accent2: 'oklch(0.65 0.16 235)',
+            tag: '技能 / Skills'
+          },
+          {
+            name: 'SmartResume',
+            subtitle: '人岗匹配 / Resume-Job Matching',
+            desc: '智能人岗匹配系统，精准对接简历与岗位 · Smart resume-to-job matching system for precise talent positioning',
+            url: 'http://62.234.107.180:9005/',
+            icon: 'search',
+            accent: 'oklch(0.6 0.2 145)',
+            accent2: 'oklch(0.68 0.16 170)',
+            tag: '匹配 / Match'
+          }
+        ]
      },
      {
-        name: 'TurboTalent',
-        subtitle: '人才管理 · 盘点 · 发展 / Talent Management',
-        desc: '全方位人才管理平台，覆盖盘点与发展全流程 · Full-cycle talent management platform for review and development',
-        url: 'http://62.234.107.180:9002/',
-        icon: 'network',
-        accent: 'oklch(0.56 0.25 290)',
-        accent2: 'oklch(0.64 0.22 315)',
-        tag: '人才 / Talent'
+        title: '企业管理 / Enterprise Management',
+        apps: [
+          {
+            name: '项目风险管控 / Risk Control',
+            subtitle: '风险管理系统 / Risk Management',
+            desc: '项目风险智能识别与管控平台 · Intelligent project risk identification and control platform',
+            url: 'https://pm.hr8ai.top/',
+            icon: 'shield',
+            accent: 'oklch(0.6 0.22 30)',
+            accent2: 'oklch(0.69 0.18 55)',
+            tag: '风控 / Risk'
+          },
+          {
+            name: 'MaxCount',
+            subtitle: '财务记账 / Finance & Accounting',
+            desc: '智能财务记账系统，高效管理企业收支与账目 · Smart financial bookkeeping for enterprise income and expenses',
+            url: 'http://62.234.107.180:9001/',
+            icon: 'chart',
+            accent: 'oklch(0.56 0.18 150)',
+            accent2: 'oklch(0.62 0.16 180)',
+            tag: '财务 / Finance'
+          },
+          {
+            name: '法时时 / FaShiShi',
+            subtitle: '法律服务平台 / Legal Services',
+            desc: '专业法律服务平台，随时获取法律咨询与支持 · Professional legal services platform for on-demand advice',
+            url: 'http://www.fashishi.cn',
+            icon: 'briefcase',
+            accent: 'oklch(0.55 0.16 30)',
+            accent2: 'oklch(0.62 0.14 55)',
+            tag: '法律 / Legal'
+          }
+        ]
      },
      {
-        name: 'TurboTalent 测评 / Assessment',
-        subtitle: '在线测评中心 / Online Assessment',
-        desc: '专业人才测评系统，科学评估能力与潜力 · Professional assessment system for scientific capability evaluation',
-        url: 'https://ce.all8ai.top/',
-        icon: 'clipboard',
-        accent: 'oklch(0.62 0.18 160)',
-        accent2: 'oklch(0.66 0.16 190)',
-        tag: '测评 / Test'
+        title: 'AI应用中心 / AI Application Center',
+        apps: [
+          {
+            name: '政务AI应用中心 / Gov AI Hub',
+            subtitle: '政务智能服务 / Gov AI Services',
+            desc: '政务场景 AI 应用统一入口与服务中心 · Unified portal for government AI applications and services',
+            url: 'https://gov.opc8ai.com',
+            icon: 'landmark',
+            accent: 'oklch(0.47 0.07 255)',
+            accent2: 'oklch(0.56 0.08 235)',
+            tag: '政务 / Gov'
+          },
+          {
+            name: 'K12AI应用中心 / K12 AI Hub',
+            subtitle: 'K12 AI 教育应用 / K12 AI Education',
+            desc: 'K12 场景 AI 应用统一入口，涵盖管理、家长、课堂多端 · Unified K12 AI education portal for admin, parents and classrooms',
+            url: 'http://101.96.196.218',
+            icon: 'users',
+            accent: 'oklch(0.62 0.2 80)',
+            accent2: 'oklch(0.68 0.18 105)',
+            tag: 'K12 / Edu'
+          },
+          {
+            name: '医科大学AI学习中心 / Med AI Center',
+            subtitle: '医学AI学习平台 / Medical AI Learning',
+            desc: '医科大学 AI 学习平台，助力医学教育与智能训练 · Medical university AI learning center for smart education',
+            url: 'http://101.96.196.218:4100/login',
+            icon: 'brain',
+            accent: 'oklch(0.58 0.18 200)',
+            accent2: 'oklch(0.65 0.16 225)',
+            tag: '医学 / Med'
+          }
+        ]
      },
      {
-        name: 'TalentMentor',
-        subtitle: '企业招聘 · 人才发展 / Recruiting & Development',
-        desc: '智能化招聘与人才发展双引擎平台 · Dual-engine platform for smart recruiting and talent development',
-        url: 'https://m.hr8ai.top/',
-        icon: 'users',
-        accent: 'oklch(0.66 0.2 55)',
-        accent2: 'oklch(0.74 0.18 82)',
-        tag: '招聘 / Recruit'
+        title: '文创 / Culture & Creative',
+        apps: [
+          {
+            name: '故宫雅游 / Palace Tour',
+            subtitle: '故宫文化探索 / Forbidden City Culture',
+            desc: '故宫文化智能游览平台，沉浸式探索历史瑰宝 · Intelligent palace culture tour platform for immersive exploration',
+            url: 'https://gg.all8ai.top/',
+            icon: 'landmark',
+            accent: 'oklch(0.55 0.15 25)',
+            accent2: 'oklch(0.62 0.13 50)',
+            tag: '文创 / Culture'
+          }
+        ]
      },
      {
-        name: 'HRBP 智能分析 / HRBP Analytics',
-        subtitle: 'HR 业务伙伴 / HR Business Partner',
-        desc: 'AI 驱动的 HR 智能分析与决策支持系统 · AI-powered HR analytics and decision support system',
-        url: 'https://hrbp.all8ai.top/',
-        icon: 'brain',
-        accent: 'oklch(0.62 0.24 18)',
-        accent2: 'oklch(0.66 0.22 345)',
-        tag: '分析 / Analytics'
+        title: '工具 / Tools',
+        apps: [
+          {
+            name: 'Markdown 编辑 / Markdown Editor',
+            subtitle: '在线 Markdown 编辑器 / Online Markdown Editor',
+            desc: '轻量级在线 Markdown 编辑器，实时预览与导出 · Lightweight online Markdown editor with live preview and export',
+            url: 'https://mdedit.all8ai.top/',
+            icon: 'clipboard',
+            accent: 'oklch(0.58 0.16 200)',
+            accent2: 'oklch(0.65 0.14 225)',
+            tag: '工具 / Tool'
+          },
+          {
+            name: 'SVG 编辑 / SVG Editor',
+            subtitle: '在线 SVG 编辑器 / Online SVG Editor',
+            desc: '在线 SVG 矢量图编辑工具，轻松创作与编辑 · Online SVG vector editor for easy creation and editing',
+            url: 'https://svgedit.all8ai.top/',
+            icon: 'chart',
+            accent: 'oklch(0.6 0.18 160)',
+            accent2: 'oklch(0.66 0.16 190)',
+            tag: '工具 / Tool'
+          }
+        ]
      },
      {
-        name: '猎头 Agent / Headhunt Agent',
-        subtitle: '智能猎头助手 / Smart Headhunting',
-        desc: 'AI 猎头 Agent，自动化人才寻访与匹配 · AI headhunting agent for automated talent sourcing and matching',
-        url: 'https://h2agent.opc8ai.com/',
-        icon: 'search',
-        accent: 'oklch(0.56 0.24 265)',
-        accent2: 'oklch(0.61 0.2 230)',
-        tag: '猎头 / Search'
-      },
-      {
-        name: '美雇 / MeiGu',
-        subtitle: '劳动关系管理 / Labor Relations',
-        desc: '企业用工权与劳动关系管理平台，合规高效管理雇佣关系 · Enterprise labor relations and employment rights management platform',
-        url: 'https://www.uumeigu.com/',
-        icon: 'briefcase',
-        accent: 'oklch(0.64 0.18 210)',
-        accent2: 'oklch(0.69 0.16 235)',
-        tag: '劳资 / Labor'
-      },
-      {
-        name: '项目风险管控 / Risk Control',
-        subtitle: '风险管理系统 / Risk Management',
-        desc: '项目风险智能识别与管控平台 · Intelligent project risk identification and control platform',
-        url: 'https://pm.hr8ai.top/',
-        icon: 'shield',
-        accent: 'oklch(0.6 0.22 30)',
-        accent2: 'oklch(0.69 0.18 55)',
-        tag: '风控 / Risk'
-      },
-      {
-        name: '政务AI应用中心 / Gov AI Hub',
-        subtitle: '政务智能服务 / Gov AI Services',
-        desc: '政务场景 AI 应用统一入口与服务中心 · Unified portal for government AI applications and services',
-        url: 'https://gov.opc8ai.com',
-        icon: 'landmark',
-        accent: 'oklch(0.47 0.07 255)',
-        accent2: 'oklch(0.56 0.08 235)',
-        tag: '政务 / Gov'
-      },
-      {
-        name: 'MaxCount',
-        subtitle: '财务记账 / Finance & Accounting',
-        desc: '智能财务记账系统，高效管理企业收支与账目 · Smart financial bookkeeping for enterprise income and expenses',
-        url: 'http://62.234.107.180:9001/',
-        icon: 'chart',
-        accent: 'oklch(0.56 0.18 150)',
-        accent2: 'oklch(0.62 0.16 180)',
-        tag: '财务 / Finance'
-      },
-      {
-        name: '法时时 / FaShiShi',
-        subtitle: '法律服务平台 / Legal Services',
-        desc: '专业法律服务平台，随时获取法律咨询与支持 · Professional legal services platform for on-demand advice',
-        url: 'http://www.fashishi.cn',
-        icon: 'briefcase',
-        accent: 'oklch(0.55 0.16 30)',
-        accent2: 'oklch(0.62 0.14 55)',
-        tag: '法律 / Legal'
-      },
-      {
-        name: '技能人才胜任力',
-        subtitle: '技能胜任力评估 / Skills Assessment',
-        desc: '技能人才胜任力评估系统，科学测评技能水平 · Technical skill competency assessment system',
-        url: 'https://lianxingtest.feihec.com/',
-        icon: 'clipboard',
-        accent: 'oklch(0.58 0.18 210)',
-        accent2: 'oklch(0.65 0.16 235)',
-        tag: '技能 / Skills'
-      },
-      {
-        name: 'K12AI应用中心 / K12 AI Hub',
-        subtitle: 'K12 AI 教育应用 / K12 AI Education',
-        desc: 'K12 场景 AI 应用统一入口，涵盖管理、家长、课堂多端 · Unified K12 AI education portal for admin, parents and classrooms',
-        url: 'http://101.96.196.218',
-        icon: 'users',
-        accent: 'oklch(0.62 0.2 80)',
-        accent2: 'oklch(0.68 0.18 105)',
-        tag: 'K12 / Edu'
-      },
-      {
-        name: '医科大学AI学习中心 / Med AI Center',
-        subtitle: '医学AI学习平台 / Medical AI Learning',
-        desc: '医科大学 AI 学习平台，助力医学教育与智能训练 · Medical university AI learning center for smart education',
-        url: 'http://101.96.196.218:4100/login',
-        icon: 'brain',
-        accent: 'oklch(0.58 0.18 200)',
-        accent2: 'oklch(0.65 0.16 225)',
-        tag: '医学 / Med'
+        title: '个人 / Personal',
+        apps: [
+          {
+            name: '八字系统 / BaZi System',
+            subtitle: '传统命理分析 / Traditional Fortune Analysis',
+            desc: '传统八字命理智能分析系统 · Traditional BaZi fortune analysis system',
+            url: 'https://wnote.top',
+            icon: 'brain',
+            accent: 'oklch(0.56 0.2 290)',
+            accent2: 'oklch(0.64 0.18 315)',
+            tag: '命理 / Fortune'
+          },
+          {
+            name: '对话交流 / Chat',
+            subtitle: 'AI 对话平台 / AI Chat Platform',
+            desc: '智能对话交流平台，随时与 AI 互动 · Intelligent chat platform for AI interaction anytime',
+            url: 'https://y.all8ai.top',
+            icon: 'search',
+            accent: 'oklch(0.6 0.2 255)',
+            accent2: 'oklch(0.68 0.16 235)',
+            tag: '对话 / Chat'
+          }
+        ]
      }
    ];

    const grid = document.getElementById('carouselTrack');
-    const PAGE_SIZE = 9;
    let currentPage = 0;
-    const totalPages = Math.ceil(apps.length / PAGE_SIZE);
+    const totalPages = appGroups.length;

    /**
     * 生成统一的专业线性 SVG 图标，保持门户卡片视觉一致性。
@@ -694,20 +881,45 @@
    }

    /**
-     * 渲染分页轮播，每页最多9个应用卡片。
+     * 渲染手机端竖向列表，所有分组和应用平铺。
+     */
+    function renderMobileList() {
+      const container = document.getElementById('mobileAppList');
+      container.innerHTML = '';
+      appGroups.forEach((group) => {
+        const titleEl = document.createElement('div');
+        titleEl.className = 'mobile-group-title';
+        titleEl.textContent = group.title;
+        container.appendChild(titleEl);
+        group.apps.forEach((app, i) => {
+          container.appendChild(createAppCard(app, i));
+        });
+      });
+    }
+
+    /**
+     * 渲染分页轮播，每组一页，带分组标题。
     */
    function renderCarousel() {
      grid.innerHTML = '';
-      for (let p = 0; p < totalPages; p++) {
+      appGroups.forEach((group) => {
        const pageDiv = document.createElement('div');
        pageDiv.className = 'carousel-page';
-        const start = p * PAGE_SIZE;
-        const pageApps = apps.slice(start, start + PAGE_SIZE);
-        pageApps.forEach((app, i) => {
-          pageDiv.appendChild(createAppCard(app, i));
+        pageDiv.style.display = 'block';
+        const titleEl = document.createElement('div');
+        titleEl.className = 'group-title';
+        titleEl.textContent = group.title;
+        pageDiv.appendChild(titleEl);
+        const innerGrid = document.createElement('div');
+        innerGrid.style.display = 'grid';
+        innerGrid.style.gridTemplateColumns = 'repeat(3, 1fr)';
+        innerGrid.style.gap = '1rem';
+        group.apps.forEach((app, i) => {
+          innerGrid.appendChild(createAppCard(app, i));
        });
+        pageDiv.appendChild(innerGrid);
        grid.appendChild(pageDiv);
-      }
+      });
      renderDots();
      updateCarousel();
    }
@@ -758,6 +970,7 @@
    }

    renderCarousel();
+    renderMobileList();

    /**
     * 帮助弹窗的测试账号数据，中英双语展示。
@@ -826,6 +1039,16 @@
        type: 'text',
        content: '用户可注册测试 / Users can self-register for testing'
      },
+      {
+        title: 'SmartResume',
+        subtitle: '人岗匹配 / Resume-Job Matching',
+        url: 'http://62.234.107.180:9005/',
+        type: 'table',
+        headers: ['账号 / Account', '密码 / Password'],
+        rows: [
+          ['freedak@163.com', '123456']
+        ]
+      },
      {
        title: '项目风险管控 / Risk Control',
        subtitle: '风险管理系统 / Risk Management System',
@@ -899,9 +1122,11 @@
        if (item.type === 'table') {
          const thead = item.headers.map(h => `<th>${h}</th>`).join('');
          const tbody = item.rows.map(r =>
-            `<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`
+            `<tr>${r.map(c => `<td class="copy-cell" onclick="copyToClipboard(this,'${c.replace(/'/g,"\\'")}')">${c}</td>`).join('')}</tr>`
          ).join('');
-          bodyHtml = `<table class="help-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
+          bodyHtml = `<div class="help-table-wrap"><table class="help-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table></div>`;
+        } else if (item.type === 'image') {
+          bodyHtml = `<div class="flex flex-col items-center gap-2 py-2"><img src="${item.image}" alt="${item.title}" class="contact-qr" /><p class="text-[11px] text-slate-400">${item.content}</p></div>`;
        } else {
          bodyHtml = `<p class="text-[11px] text-slate-400 px-3 py-2">${item.content}</p>`;
        }
@@ -920,6 +1145,21 @@
      }).join('');
    }

+    /**
+     * 点击复制单元格内容到剪贴板，并显示复制成功反馈。
+     */
+    function copyToClipboard(td, text) {
+      navigator.clipboard.writeText(text).then(() => {
+        const orig = td.textContent;
+        td.classList.add('copy-feedback');
+        td.textContent = '已复制 / Copied!';
+        setTimeout(() => {
+          td.classList.remove('copy-feedback');
+          td.textContent = orig;
+        }, 1200);
+      }).catch(() => {});
+    }
+
    /**
     * 打开或关闭帮助弹窗。
     */
@@ -941,8 +1181,27 @@
    }

    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') toggleHelpModal(false);
+      if (e.key === 'Escape') { toggleHelpModal(false); toggleContactModal(false); }
    });
+
+    /**
+     * 打开或关闭联系方式弹窗。
+     */
+    function toggleContactModal(show) {
+      const overlay = document.getElementById('contactOverlay');
+      const aurora = document.querySelector('.aurora');
+      if (show) {
+        overlay.classList.add('active');
+        document.body.style.overflow = 'hidden';
+        if (aurora) aurora.classList.add('aurora-paused');
+        document.body.classList.add('gpu-off');
+      } else {
+        overlay.classList.remove('active');
+        document.body.style.overflow = '';
+        if (aurora) aurora.classList.remove('aurora-paused');
+        document.body.classList.remove('gpu-off');
+      }
+    }
  </script>
 </body>
 </html>