Frudrax Cheng
154 lines
4.3 KiB
Markdown
154 lines
4.3 KiB
Markdown
# 贝凡官网
|
||
|
||
浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业 / 物业楼宇 / 智慧养老 / 明厨亮灶 / 智慧学校 / 智慧工地 / 危险化学品 / 烟花爆竹 / 非煤矿山）、本地化定制与生态合作等页面。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**：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 等）。
|
||
|
||
---
|
||
|
||
© 浙江贝凡网络科技有限公司
|