# 贝凡官网

浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业 / 物业楼宇 / 智慧养老 / 明厨亮灶 / 智慧学校 / 智慧工地 / 危险化学品 / 烟花爆竹 / 非煤矿山）、本地化定制与生态合作等页面。

## 技术栈

- **框架**：Astro 5.x（静态站点生成）
- **样式**：Tailwind CSS 3.x
- **语言**：TypeScript
- **图标**：FontAwesome 4.7.0
- **包管理器**：pnpm
- **图片处理**：Sharp（用于转 WebP）

## 快速开始

```bash
pnpm install
pnpm dev
```

本地访问：`http://localhost:4321`

## 常用命令

```bash
# 开发
pnpm dev
pnpm start

# 构建与预览
pnpm build
pnpm preview

# Astro 原生命令
pnpm astro <command>
```

## 项目结构

```text
beifan.cn/
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   ├── qazk/index.astro
│   │   ├── property/index.astro
│   │   ├── elderly/index.astro
│   │   ├── construction/index.astro
│   │   ├── kitchen/index.astro
│   │   ├── education/index.astro
│   │   ├── chemical/index.astro
│   │   ├── fireworks/index.astro
│   │   ├── mining/index.astro
│   │   ├── customization/index.astro
│   │   ├── partnership/index.astro
│   │   └── intro/*/index.astro
│   ├── components/
│   │   └── sections/
│   └── styles/styles.css
├── public/
│   ├── img/
│   │   ├── property/
│   │   ├── elderly/
│   │   ├── construction/
│   │   ├── kitchen/
│   │   ├── education/
│   │   ├── chemical/
│   │   ├── fireworks/
│   │   ├── mining/
│   │   └── ...
│   └── js/script.js
├── astro.config.mjs
├── tailwind.config.mjs
└── package.json
```

## 主要页面

- `/`：公司介绍首页
- `/qazk`：工贸企业（企安智控）
- `/property`：物业楼宇
- `/elderly`：智慧养老
- `/kitchen`：明厨亮灶
- `/education`：智慧学校
- `/construction`：智慧工地
- `/chemical`：危险化学品
- `/fireworks`：烟花爆竹
- `/mining`：非煤矿山
- `/customization`：本地化定制
- `/partnership`：生态合作
- `/intro/*`：产品/能力介绍子页面

## 导航说明

导航由 `src/layouts/Layout.astro` 统一管理：

- 一级：公司介绍 / 产品中心 / 本地化定制 / 生态合作
- 产品中心二级（9 项，桌面下拉为 3×3 网格、移动端为 3 列网格）：
  - 工贸企业（`qazk`）
  - 物业楼宇（`property`）
  - 智慧养老（`elderly`）
  - 明厨亮灶（`kitchen`）
  - 智慧学校（`education`）
  - 智慧工地（`construction`）
  - 危险化学品（`chemical`）
  - 烟花爆竹（`fireworks`）
  - 非煤矿山（`mining`）
- 页面通过 `<Layout activeNav="...">` 控制高亮

## 图片规范与 Sharp 用法

### 图片规范

- 页面图片优先使用 `.webp`
- 静态资源统一放在 `public/img/<module>/`
- 代码中使用绝对路径引用，如：`/img/kitchen/hero.webp`
- 每个行业模块通常包含两类图：
  - `hero.webp`：大屏 IOC 截图，用作 Hero 头图
  - `architecture.webp`：系统架构 / 场景示意图

### 使用 Sharp 转 WebP

安装（如未安装）：

```bash
pnpm add -D sharp
```

单目录批量转换示例（PNG/JPG/JPEG → WebP）：

```bash
node --input-type=module -e "import sharp from 'sharp'; import { promises as fs } from 'node:fs'; import path from 'node:path'; const dir='public/img/kitchen'; const files=await fs.readdir(dir); for (const name of files){ const ext=path.extname(name).toLowerCase(); if(!['.png','.jpg','.jpeg'].includes(ext)) continue; const src=path.join(dir,name); const out=path.join(dir,path.basename(name,ext)+'.webp'); await sharp(src).webp({quality:82,effort:6}).toFile(out);}"
```

建议：设计源文件保留在仓库外或素材目录中，不直接放 `public/img/`，提交前只保留 WebP 成品。

## 质量检查

```bash
pnpm build
```

`pnpm build` 会先执行 `astro check` 再产出静态文件到 `dist/`。

## 部署

本项目为纯静态站点，可部署到任意静态托管平台（Vercel、Netlify、Cloudflare Pages、OSS/COS 等）。

---

© 浙江贝凡网络科技有限公司