贝凡官网

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

技术栈

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

快速开始

pnpm install
pnpm dev

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

常用命令

# 开发
pnpm dev
pnpm start

# 构建与预览
pnpm build
pnpm preview

# Astro 原生命令
pnpm astro <command>

项目结构

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

安装（如未安装）：

pnpm add -D sharp

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

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 成品。

质量检查

pnpm build

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

部署

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

4.3 KiB Raw Blame History Unescape Escape