index.js 5.64 KB
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import styles from './index.module.css';

const categories = [
  {
    title: '产品总览',
    description: '产品定位、外观结构、接口定义和基础规格',
    link: '/docs/产品总览/G6产品概览',
    items: [
      { label: 'G6 产品概览', to: '/docs/产品总览/G6产品概览' },
      { label: '外观与接口说明', to: '/docs/产品总览/外观与接口说明' },
    ],
  },
  {
    title: '安装与联网',
    description: '现场安装、覆盖范围、有线/无线连接和登录调试',
    link: '/docs/安装与联网/安装前准备',
    items: [
      { label: '安装前准备', to: '/docs/安装与联网/安装前准备' },
      { label: '覆盖范围计算', to: '/docs/安装与联网/覆盖范围计算' },
      { label: '设备安装方式', to: '/docs/安装与联网/设备安装方式' },
      { label: '有线连接与登录', to: '/docs/安装与联网/有线连接与登录' },
      { label: 'Wi-Fi 连接与调试', to: '/docs/安装与联网/Wi-Fi连接与调试' },
    ],
  },
  {
    title: '基础配置',
    description: 'Web 客户端配置、网络参数和平台地址配置',
    link: '/docs/基础配置/Web客户端基础配置',
    items: [
      { label: 'Web 客户端基础配置', to: '/docs/基础配置/Web客户端基础配置' },
      { label: '网络与平台地址配置', to: '/docs/基础配置/网络与平台地址配置' },
    ],
  },
  {
    title: '算法功能配置',
    description: '进店、过店、区域客流、人员识别、热力图、排队、收银等算法配置',
    link: '/docs/算法功能配置/进店客流配置',
    items: [
      { label: '进店客流配置', to: '/docs/算法功能配置/进店客流配置' },
      { label: '过店客流配置', to: '/docs/算法功能配置/过店客流配置' },
      { label: '区域客流配置', to: '/docs/算法功能配置/区域客流配置' },
      { label: '人员识别配置', to: '/docs/算法功能配置/人员识别配置' },
      { label: '热力图配置', to: '/docs/算法功能配置/热力图配置' },
      { label: '排队配置', to: '/docs/算法功能配置/排队配置' },
      { label: '收银功能配置', to: '/docs/算法功能配置/收银功能配置' },
    ],
  },
  {
    title: '数据查看与验证',
    description: '平台侧数据查看、统计结果验证和异常排查',
    link: '/docs/数据查看与验证/数据查看入口',
    items: [
      { label: '数据查看入口', to: '/docs/数据查看与验证/数据查看入口' },
      { label: '常见问题与排查', to: '/docs/数据查看与验证/常见问题与排查' },
    ],
  },
  {
    title: '升级维护',
    description: '升级工具使用、固件升级 SOP 和维护流程',
    link: '/docs/升级维护/升级工具使用指南',
    items: [
      { label: '升级工具使用指南', to: '/docs/升级维护/升级工具使用指南' },
      { label: 'G6 只读固件升级 SOP', to: '/docs/升级维护/G6只读固件升级SOP' },
    ],
  },
  {
    title: '场景测试',
    description: 'G5Pro/G6 场景覆盖测试和现场适配参考',
    link: '/docs/场景测试/G5Pro-G6场景覆盖测试',
    items: [
      { label: 'G5Pro / G6 场景覆盖测试', to: '/docs/场景测试/G5Pro-G6场景覆盖测试' },
    ],
  },
];

function CategoryCard({ title, description, link, items }) {
  return (
    <div className={styles.categoryCard}>
      <h3 className={styles.categoryTitle}>
        <Link to={link}>{title}</Link>
      </h3>
      <p className={styles.categoryDesc}>{description}</p>
      <ul className={styles.categoryList}>
        {items.slice(0, 5).map((item, i) => (
          <li key={i}>
            <Link to={item.to}>{item.label}</Link>
          </li>
        ))}
        {items.length > 5 && (
          <li className={styles.moreLink}>
            <Link to={link}>...更多</Link>
          </li>
        )}
      </ul>
    </div>
  );
}

export default function Home() {
  return (
    <Layout title="知识中心" description="文安智能产品知识库">
      {/* Hero Search Section */}
      <section className={styles.hero}>
        <div className={styles.heroInner}>
          <h1 className={styles.heroTitle}>如何帮助您?</h1>
          <div className={styles.searchWrap}>
            <svg className={styles.searchIcon} viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="11" cy="11" r="8" />
              <path d="M21 21l-4.35-4.35" />
            </svg>
            <input
              className={styles.searchInput}
              type="text"
              placeholder="搜索知识库..."
              onFocus={(e) => {
                document.querySelector('.navbar__search')?.querySelector('input')?.focus();
                e.target.blur();
              }}
              readOnly
            />
          </div>
        </div>
      </section>

      {/* Categories Grid */}
      <section className={styles.categories}>
        <div className={styles.categoriesInner}>
          {categories.map((cat, i) => (
            <CategoryCard key={i} {...cat} />
          ))}
        </div>
      </section>

      {/* Need Support Section */}
      <section className={styles.support}>
        <div className={styles.supportInner}>
          <h2 className={styles.supportTitle}>需要支持?</h2>
          <p className={styles.supportDesc}>找不到您需要的内容?我们随时为您提供帮助。</p>
          <Link to="/docs/" className={styles.supportBtn}>
            浏览全部文档
          </Link>
        </div>
      </section>
    </Layout>
  );
}