xk-docs/docs/.vitepress/theme/HomePage.vue

<template>
  <div class="home-page">
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-bg"></div>
      <div class="hero-content">
        <div class="hero-badge">技术文档</div>
        <h1 class="hero-title">XK 项目文档</h1>
        <p class="hero-subtitle">萧康新医疗系统</p>
        <p class="hero-desc">互联网中医诊疗 · 药品供应链 · 监管合规</p>
        <div class="hero-actions">
          <a href="/guide/introduction" class="btn btn-primary">
            <component :is="BookOpen" :size="18" />
            项目介绍
          </a>
          <a href="/guide/architecture" class="btn btn-secondary">
            <component :is="GitBranch" :size="18" />
            系统架构
          </a>
          <a href="/database/overview" class="btn btn-secondary">
            <component :is="Database" :size="18" />
            数据库总览
          </a>
        </div>
      </div>
    </section>

    <!-- Stats Section -->
    <section class="stats">
      <div class="stats-grid">
        <div class="stat-card" v-for="stat in stats" :key="stat.label">
          <div class="stat-icon">
            <component :is="stat.icon" :size="24" />
          </div>
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </section>

    <!-- Projects Section -->
    <section class="projects">
      <h2 class="section-title">项目总览</h2>
      <p class="section-desc">XK 系统由 7 个核心子项目组成，覆盖完整的互联网中医诊疗业务链</p>
      <div class="projects-grid">
        <a
          v-for="project in projects"
          :key="project.name"
          :href="project.link"
          class="project-card"
        >
          <div class="project-header">
            <div class="project-icon-box" :style="{ background: project.color + '15', color: project.color }">
              <component :is="project.icon" :size="22" />
            </div>
            <span class="project-status" :class="project.status">{{ project.statusText }}</span>
          </div>
          <h3 class="project-name">{{ project.name }}</h3>
          <p class="project-desc">{{ project.desc }}</p>
          <div class="project-tech">
            <span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
          </div>
        </a>
      </div>
    </section>

    <!-- Tech Stack Section -->
    <section class="tech-stack">
      <h2 class="section-title">技术栈</h2>
      <div class="stack-grid">
        <div class="stack-item" v-for="item in techStack" :key="item.name">
          <div class="stack-icon" :style="{ color: item.color }">
            <component :is="item.icon" :size="20" />
          </div>
          <span class="stack-name">{{ item.name }}</span>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import {
  BookOpen,
  GitBranch,
  Database,
  Folder,
  Table2,
  Plug,
  Zap,
  LayoutDashboard,
  Server,
  History,
  Smartphone,
  Stethoscope,
  BarChart3,
  Link,
  CircleDot,
  Code,
  Cpu,
  HardDrive,
  Wifi,
  Cloud,
} from '@lucide/vue'

const stats = [
  { icon: Folder, value: '7', label: '子项目' },
  { icon: Table2, value: '167+', label: '数据表' },
  { icon: Plug, value: '50+', label: 'API 接口' },
  { icon: Zap, value: '8', label: '消息队列任务' },
]

const projects = [
  {
    name: 'xk-admin',
    icon: LayoutDashboard,
    color: '#2563EB',
    desc: '管理后台 — Vue 3 + Vben Admin Pro，总后台 / 门店端管理界面',
    tech: ['Vue 3', 'Vben Admin', 'TypeScript'],
    status: 'active',
    statusText: '活跃',
    link: '/projects/xk-admin/overview',
  },
  {
    name: 'xk-api',
    icon: Server,
    color: '#0077B6',
    desc: '新 API 服务 — Laravel 12，核心业务逻辑、支付、处方、监管上报',
    tech: ['Laravel 12', 'PHP 8.4', 'MySQL'],
    status: 'active',
    statusText: '活跃',
    link: '/projects/xk-api/overview',
  },
  {
    name: 'xk-api-yii',
    icon: History,
    color: '#D97706',
    desc: '旧 API 服务 — Yii2 Advanced，遗留系统，部分接口仍在使用',
    tech: ['Yii2', 'PHP', 'MySQL'],
    status: 'legacy',
    statusText: '遗留',
    link: '/projects/xk-api-yii/overview',
  },
  {
    name: 'xk-client-wx',
    icon: Smartphone,
    color: '#16A34A',
    desc: '用户端小程序 — uni-app，患者问诊、购药、挂号、转诊',
    tech: ['uni-app', 'Vue 3', '微信小程序'],
    status: 'active',
    statusText: '活跃',
    link: '/projects/xk-client-wx/overview',
  },
  {
    name: 'xk-doctor-wx',
    icon: Stethoscope,
    color: '#7C3AED',
    desc: '医生端小程序 — uni-app，医生接诊、开方、药师审方、门店管理',
    tech: ['uni-app', 'Vue 3', '微信小程序'],
    status: 'active',
    statusText: '活跃',
    link: '/projects/xk-doctor-wx/overview',
  },
  {
    name: 'xk-data',
    icon: BarChart3,
    color: '#DC2626',
    desc: '数据大屏 — Vue 3 + ECharts，业务数据可视化',
    tech: ['Vue 3', 'ECharts', 'DataV'],
    status: 'active',
    statusText: '活跃',
    link: '/projects/xk-data/overview',
  },
  {
    name: 'xk-hy-forward-go',
    icon: Link,
    color: '#0891B2',
    desc: '监管转发服务 — Go，内网双通道转发至浙江省政务云',
    tech: ['Go', 'HTTP Proxy', 'AES'],
    status: 'active',
    statusText: '活跃',
    link: '/projects/xk-hy-forward-go/overview',
  },
]

const techStack = [
  { icon: CircleDot, name: 'Laravel 12', color: '#FF2D20' },
  { icon: Code, name: 'Vue 3', color: '#42B883' },
  { icon: Smartphone, name: 'uni-app', color: '#2B9939' },
  { icon: Cpu, name: 'Go', color: '#00ADD8' },
  { icon: Database, name: 'MySQL', color: '#4479A1' },
  { icon: HardDrive, name: 'Redis', color: '#DC382D' },
  { icon: Wifi, name: 'RabbitMQ', color: '#FF6600' },
  { icon: Cloud, name: '阿里云 OSS', color: '#FF6A00' },
]
</script>

<style scoped>
.home-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hero */
.hero {
  position: relative;
  text-align: center;
  padding: 72px 0 48px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(ellipse at 50% 0%, #0077B6 0%, transparent 60%);
  opacity: 0.06;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  background: linear-gradient(135deg, #0077B608, #0077B615);
  color: #0077B6;
  border: 1px solid #0077B625;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: 52px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.15;
  color: #0F172A;
  letter-spacing: -1px;
}

.hero-subtitle {
  font-size: 26px;
  font-weight: 600;
  color: #334155;
  margin: 0 0 10px;
}

.hero-desc {
  font-size: 16px;
  color: #64748B;
  margin: 0 0 36px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, #0077B6, #0096D6);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 119, 182, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #005F8F, #0077B6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 119, 182, 0.35);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 119, 182, 0.25);
}

.btn-secondary {
  background: white;
  color: #334155;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-secondary:hover {
  border-color: #0077B6;
  color: #0077B6;
  background: #F0F9FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.12);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Stats */
.stats {
  padding: 32px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  text-align: center;
  padding: 28px 16px;
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.stat-card:hover {
  border-color: #0077B630;
  box-shadow: 0 8px 24px rgba(0, 119, 182, 0.1);
  transform: translateY(-4px);
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0077B610, #0077B608);
  color: #0077B6;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
  background: linear-gradient(135deg, #0077B620, #0077B615);
  transform: scale(1.08);
}

.stat-value {
  font-size: 36px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

/* Section Title */
.section-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: 56px 0 10px;
  color: #0F172A;
  letter-spacing: -0.5px;
}

.section-desc {
  text-align: center;
  color: #64748B;
  margin: 0 0 36px;
  font-size: 15px;
}

/* Projects */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.project-card {
  display: block;
  padding: 24px;
  background: linear-gradient(180deg, #FFFFFF, #FAFBFC);
  border: 1px solid #E2E8F0;
  border-left: 3px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.project-card:hover {
  border-color: #E2E8F0;
  border-left-color: #0077B6;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.project-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.project-card:hover .project-icon-box {
  transform: scale(1.08);
}

.project-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 14px;
}

.project-status.active {
  background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
  color: #15803D;
}

.project-status.legacy {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #B45309;
}

.project-name {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 8px;
}

.project-desc {
  font-size: 14px;
  color: #64748B;
  margin: 0 0 16px;
  line-height: 1.6;
}

.project-tech {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tech-tag {
  font-size: 12px;
  padding: 5px 10px;
  background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
  border: none;
  border-radius: 6px;
  color: #475569;
  font-weight: 500;
}

/* Tech Stack */
.tech-stack {
  padding: 32px 0 72px;
}

.stack-grid {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.stack-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #FFFFFF, #F8FAFC);
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stack-item:hover {
  border-color: #0077B630;
  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.08);
  transform: translateY(-2px);
}

.stack-icon {
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
}

.stack-item:hover .stack-icon {
  transform: scale(1.12);
}

.stack-name {
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 34px;
  }
  .hero-subtitle {
    font-size: 20px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

/* Dark mode */
:root.dark .home-page {
  color: #E2E8F0;
}
:root.dark .hero-title {
  color: #F1F5F9;
}
:root.dark .hero-subtitle {
  color: #CBD5E1;
}
:root.dark .hero-badge {
  background: linear-gradient(135deg, #38BDF808, #38BDF815);
  color: #38BDF8;
  border-color: #38BDF825;
}
:root.dark .btn-secondary {
  background: #1E293B;
  border-color: #334155;
  color: #E2E8F0;
}
:root.dark .btn-secondary:hover {
  border-color: #38BDF8;
  color: #38BDF8;
  background: #1E3A5F;
}
:root.dark .stat-card,
:root.dark .project-card,
:root.dark .stack-item {
  background: linear-gradient(180deg, #1E293B, #1A2332);
  border-color: #334155;
}
:root.dark .stat-card:hover,
:root.dark .project-card:hover,
:root.dark .stack-item:hover {
  border-color: #38BDF840;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.08);
}
:root.dark .stat-icon {
  background: linear-gradient(135deg, #38BDF810, #38BDF808);
  color: #38BDF8;
}
:root.dark .stat-value,
:root.dark .project-name {
  color: #F1F5F9;
}
:root.dark .stat-label,
:root.dark .project-desc {
  color: #94A3B8;
}
:root.dark .tech-tag {
  background: linear-gradient(135deg, #0F172A, #1E293B);
  color: #94A3B8;
}
</style>