更新文档结构并补充Sharp图片处理说明
This commit is contained in:
Frudrax Cheng
@@ -31,13 +31,29 @@ pnpm astro <command> # Run any astro command directly
|
|||||||
|
|
||||||
```
|
```
|
||||||
src/
|
src/
|
||||||
├── layouts/Layout.astro # Main layout with navigation
|
├── layouts/Layout.astro # Main layout with desktop/mobile navigation
|
||||||
├── pages/ # Route pages (use .astro files)
|
├── pages/ # Route pages (use .astro files)
|
||||||
│ ├── index.astro # Home page
|
│ ├── index.astro # Home page
|
||||||
│ └── [route]/index.astro
|
│ ├── qazk/index.astro # Product center - industrial safety
|
||||||
|
│ ├── elderly/index.astro # Product center - smart elderly care
|
||||||
|
│ ├── construction/index.astro # Product center - smart construction
|
||||||
|
│ ├── education/index.astro # Product center - smart campus
|
||||||
|
│ ├── kitchen/index.astro # Product center - smart kitchen
|
||||||
|
│ ├── customization/index.astro
|
||||||
|
│ ├── partnership/index.astro
|
||||||
|
│ └── intro/*/index.astro # Intro/detail pages
|
||||||
├── components/
|
├── components/
|
||||||
│ └── sections/ # Reusable section components
|
│ └── sections/ # Reusable section components
|
||||||
└── styles/styles.css # Global styles
|
└── styles/styles.css # Global styles
|
||||||
|
|
||||||
|
public/
|
||||||
|
├── img/
|
||||||
|
│ ├── elderly/ # Smart elderly care page assets (webp preferred)
|
||||||
|
│ ├── construction/ # Smart construction page assets (webp preferred)
|
||||||
|
│ ├── education/ # Smart campus page assets (webp + svg)
|
||||||
|
│ ├── kitchen/ # Smart kitchen page assets (webp)
|
||||||
|
│ └── ...
|
||||||
|
└── js/script.js
|
||||||
```
|
```
|
||||||
|
|
||||||
## Code Style Guidelines
|
## Code Style Guidelines
|
||||||
@@ -89,7 +105,8 @@ const { title, activeNav = 'home' } = Astro.props;
|
|||||||
### Layout Pattern
|
### Layout Pattern
|
||||||
|
|
||||||
- All pages use `<Layout>` component with `activeNav` prop for navigation highlighting
|
- All pages use `<Layout>` component with `activeNav` prop for navigation highlighting
|
||||||
- Navigation items defined in Layout.astro: home, qazk, customization, partnership
|
- Product center uses dropdown/submenu in `Layout.astro`
|
||||||
|
- Current product nav IDs: `qazk`, `elderly`, `construction`, `kitchen`, `education`
|
||||||
- Main content wrapped in `<main>` tag
|
- Main content wrapped in `<main>` tag
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
@@ -128,6 +145,16 @@ const { title, activeNav = 'home' } = Astro.props;
|
|||||||
- Reference with absolute paths: `/img/image.webp`
|
- Reference with absolute paths: `/img/image.webp`
|
||||||
- Use responsive sizing classes: `w-full h-full object-cover`
|
- Use responsive sizing classes: `w-full h-full object-cover`
|
||||||
|
|
||||||
|
#### Image optimization with Sharp
|
||||||
|
|
||||||
|
- Use Sharp for converting newly added PNG/JPG/JPEG assets to WebP before commit.
|
||||||
|
- Keep original design/source assets outside `public/` when possible; only optimized assets should be used by the website.
|
||||||
|
- Example (single folder conversion):
|
||||||
|
|
||||||
|
```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);}"
|
||||||
|
```
|
||||||
|
|
||||||
### Color Usage
|
### Color Usage
|
||||||
|
|
||||||
- Primary actions: `bg-primary` (#165DFF)
|
- Primary actions: `bg-primary` (#165DFF)
|
||||||
|
|||||||
@@ -1,258 +1,129 @@
|
|||||||
# 贝凡官网
|
# 贝凡官网
|
||||||
|
|
||||||
浙江贝凡网络科技公司官方网站，提供企业介绍、产品展示、解决方案等信息的现代化网站。
|
浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业/智慧养老/智慧工地/明厨亮灶/智慧学校）、本地化定制与生态合作等页面。
|
||||||
|
|
||||||
## 技术栈
|
## 技术栈
|
||||||
|
|
||||||
- **框架**：[Astro 5.7.3](https://astro.build) - 现代化的静态站点生成器
|
- **框架**：Astro 5.x（静态站点生成）
|
||||||
- **样式**：[Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架
|
- **样式**：Tailwind CSS 3.x
|
||||||
- **包管理器**：[pnpm](https://pnpm.io) - 快速、节省磁盘空间的包管理器
|
- **语言**：TypeScript
|
||||||
|
- **图标**：FontAwesome 4.7.0
|
||||||
## 项目结构
|
- **包管理器**：pnpm
|
||||||
|
- **图片处理**：Sharp（用于转 WebP）
|
||||||
```
|
|
||||||
beifan.cn/
|
|
||||||
├── src/
|
|
||||||
│ ├── layouts/
|
|
||||||
│ │ └── Layout.astro # 主布局组件（包含导航栏、页脚等）
|
|
||||||
│ ├── pages/
|
|
||||||
│ │ ├── index.astro # 首页（公司介绍）
|
|
||||||
│ │ ├── qazk/
|
|
||||||
│ │ │ └── index.astro # 企安智控页面
|
|
||||||
│ │ ├── customization/
|
|
||||||
│ │ │ └── index.astro # 本地化定制页面
|
|
||||||
│ │ ├── partnership/
|
|
||||||
│ │ │ └── index.astro # 生态合作页面
|
|
||||||
│ │ └── intro/ # 独立产品页面
|
|
||||||
│ │ ├── qazk/
|
|
||||||
│ │ │ └── index.astro # 企安智控详情页
|
|
||||||
│ │ ├── hardware/
|
|
||||||
│ │ │ └── index.astro # 硬件物联详情页
|
|
||||||
│ │ ├── customized-deployment/
|
|
||||||
│ │ │ └── index.astro # 本地化定制详情页
|
|
||||||
│ │ └── miniapp-manual/
|
|
||||||
│ │ └── index.astro # 小程序手册页
|
|
||||||
│ ├── components/
|
|
||||||
│ │ ├── sections/
|
|
||||||
│ │ │ ├── Hero.astro # Hero 区域组件
|
|
||||||
│ │ │ ├── CompanyIntro.astro # 公司介绍组件
|
|
||||||
│ │ │ ├── DevelopmentHistory.astro # 发展历程组件
|
|
||||||
│ │ │ ├── DataVisualization.astro # 数据可视化组件
|
|
||||||
│ │ │ ├── Honors.astro # 公司荣誉资质组件
|
|
||||||
│ │ │ ├── Contact.astro # 联系方式组件
|
|
||||||
│ │ │ ├── SaaS.astro # SaaS化系统组件
|
|
||||||
│ │ │ ├── Policy.astro # 政策导向组件
|
|
||||||
│ │ │ ├── AccidentCases.astro # 事故案例组件
|
|
||||||
│ │ │ ├── Hardware.astro # 硬件物联组件
|
|
||||||
│ │ │ ├── AIModel.astro # AI大模型组件
|
|
||||||
│ │ │ ├── Customization.astro # 本地化定制组件
|
|
||||||
│ │ │ ├── Partnership.astro # 生态合作组件
|
|
||||||
│ │ │ └── Footer.astro # 页脚组件
|
|
||||||
│ │ └── script.js # 组件脚本
|
|
||||||
│ └── styles/
|
|
||||||
│ └── styles.css # 全局样式
|
|
||||||
├── public/ # 静态资源
|
|
||||||
│ ├── img/ # 图片资源
|
|
||||||
│ │ ├── partner-search.webp # 合作伙伴搜索图片
|
|
||||||
│ │ ├── cooperation-process.webp # 合作流程图片
|
|
||||||
│ │ └── shake-hands.webp # 握手合作图片
|
|
||||||
│ ├── js/
|
|
||||||
│ │ └── script.js # JavaScript 文件
|
|
||||||
│ ├── docs/
|
|
||||||
│ │ └── 合作申请表.xlsx # 文档资源
|
|
||||||
│ ├── intro/ # Intro 页面的静态资源
|
|
||||||
│ │ ├── qazk/ # 企安智控页面资源
|
|
||||||
│ │ └── hardware/ # 硬件物联页面资源
|
|
||||||
│ ├── favicon.ico # 网站图标
|
|
||||||
│ ├── robots.txt # 爬虫规则
|
|
||||||
│ └── sitemap.xml # 网站地图
|
|
||||||
├── .env # 环境变量
|
|
||||||
├── .gitignore # Git 忽略文件
|
|
||||||
├── astro.config.mjs # Astro 配置文件
|
|
||||||
├── tailwind.config.mjs # Tailwind CSS 配置文件
|
|
||||||
└── package.json # 项目依赖配置
|
|
||||||
```
|
|
||||||
|
|
||||||
## 页面结构
|
|
||||||
|
|
||||||
### 1. 首页（公司介绍）- `/`
|
|
||||||
|
|
||||||
包含以下内容区块：
|
|
||||||
- **Hero 区域**：全场景产业数字化转型服务介绍
|
|
||||||
- **公司介绍**：公司基本信息和发展理念
|
|
||||||
- **发展历程**：浙江贝凡发展历程时间轴
|
|
||||||
- **数据可视化**：企业关键数据展示（视觉理解大模型、SLA可用性、合作伙伴、软著专利）
|
|
||||||
- **生态合作**：合作伙伴展示
|
|
||||||
- **联系我们**：联系方式展示
|
|
||||||
- **页脚**：版权信息、ICP备案等
|
|
||||||
|
|
||||||
### 2. 企安智控页面 - `/qazk`
|
|
||||||
|
|
||||||
包含以下内容区块：
|
|
||||||
- **SaaS化系统**：企安智控智能安全管理解决方案
|
|
||||||
- **最新政策导向**：安全生产相关政策法规
|
|
||||||
- **典型事故案例**：重大事故案例分析
|
|
||||||
- **硬件物联**：12个物联网应用场景
|
|
||||||
- **AI大模型**：15个AI应用场景
|
|
||||||
- **页脚**：版权信息、ICP备案等
|
|
||||||
|
|
||||||
### 3. 本地化定制页面 - `/customization`
|
|
||||||
|
|
||||||
包含以下内容区块：
|
|
||||||
- **本地化定制**：多行业全场景定制服务
|
|
||||||
- **页脚**：版权信息、ICP备案等
|
|
||||||
|
|
||||||
### 4. 生态合作页面 - `/partnership`
|
|
||||||
|
|
||||||
包含以下内容区块：
|
|
||||||
- **携手合作，共创未来，共享市场红利**：合作优势卡片（包含8个合作优势）
|
|
||||||
- **我们需要找的合作伙伴**：目标招商对象卡片（包含4类合作伙伴）
|
|
||||||
- **合作流程**：合作流程卡片（包含4步合作流程）
|
|
||||||
- **页脚**：版权信息、ICP备案等
|
|
||||||
|
|
||||||
### 4. 独立产品页面（Intro）
|
|
||||||
|
|
||||||
这些页面使用独立的导航栏和样式：
|
|
||||||
|
|
||||||
- **企安智控**：智能安全管理平台详细介绍
|
|
||||||
- **硬件物联**：27种智能硬件产品展示
|
|
||||||
- **本地化定制**：全场景产业数字化定制方案
|
|
||||||
- **小程序手册**：企安智控小程序使用指南
|
|
||||||
|
|
||||||
## 快速开始
|
## 快速开始
|
||||||
|
|
||||||
### 安装依赖
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm install
|
pnpm install
|
||||||
```
|
|
||||||
|
|
||||||
### 开发模式
|
|
||||||
|
|
||||||
启动本地开发服务器：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm dev
|
pnpm dev
|
||||||
```
|
```
|
||||||
|
|
||||||
访问 http://localhost:4321 查看网站。
|
本地访问：`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
|
||||||
|
│ │ ├── elderly/index.astro
|
||||||
|
│ │ ├── construction/index.astro
|
||||||
|
│ │ ├── kitchen/index.astro
|
||||||
|
│ │ ├── education/index.astro
|
||||||
|
│ │ ├── customization/index.astro
|
||||||
|
│ │ ├── partnership/index.astro
|
||||||
|
│ │ └── intro/*/index.astro
|
||||||
|
│ ├── components/
|
||||||
|
│ │ └── sections/
|
||||||
|
│ └── styles/styles.css
|
||||||
|
├── public/
|
||||||
|
│ ├── img/
|
||||||
|
│ │ ├── elderly/
|
||||||
|
│ │ ├── construction/
|
||||||
|
│ │ ├── kitchen/
|
||||||
|
│ │ ├── education/
|
||||||
|
│ │ └── ...
|
||||||
|
│ └── js/script.js
|
||||||
|
├── astro.config.mjs
|
||||||
|
├── tailwind.config.mjs
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要页面
|
||||||
|
|
||||||
|
- `/`：公司介绍首页
|
||||||
|
- `/qazk`：工贸企业（企安智控）
|
||||||
|
- `/elderly`：智慧养老
|
||||||
|
- `/construction`：智慧工地
|
||||||
|
- `/kitchen`：明厨亮灶
|
||||||
|
- `/education`：智慧学校
|
||||||
|
- `/customization`：本地化定制
|
||||||
|
- `/partnership`：生态合作
|
||||||
|
- `/intro/*`：产品/能力介绍子页面
|
||||||
|
|
||||||
|
## 导航说明
|
||||||
|
|
||||||
|
导航由 `src/layouts/Layout.astro` 统一管理：
|
||||||
|
|
||||||
|
- 一级：公司介绍 / 产品中心 / 本地化定制 / 生态合作
|
||||||
|
- 产品中心二级：`qazk`、`elderly`、`construction`、`kitchen`、`education`
|
||||||
|
- 页面通过 `<Layout activeNav="...">` 控制高亮
|
||||||
|
|
||||||
|
## 图片规范与 Sharp 用法
|
||||||
|
|
||||||
|
### 图片规范
|
||||||
|
|
||||||
|
- 页面图片优先使用 `.webp`
|
||||||
|
- 静态资源统一放在 `public/img/<module>/`
|
||||||
|
- 代码中使用绝对路径引用，如：`/img/kitchen/hero.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
|
```bash
|
||||||
pnpm build
|
pnpm build
|
||||||
```
|
```
|
||||||
|
|
||||||
构建产物将输出到 `dist/` 目录。
|
`pnpm build` 会先执行 `astro check` 再产出静态文件到 `dist/`。
|
||||||
|
|
||||||
### 预览构建结果
|
|
||||||
|
|
||||||
预览生产构建：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm preview
|
|
||||||
```
|
|
||||||
|
|
||||||
## 配置说明
|
|
||||||
|
|
||||||
### Astro 配置
|
|
||||||
|
|
||||||
项目使用了 Astro 的 Tailwind 集成，在 `astro.config.mjs` 中配置：
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import tailwind from '@astrojs/tailwind';
|
|
||||||
import { defineConfig } from 'astro/config';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
integrations: [tailwind()],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Tailwind 配置
|
|
||||||
|
|
||||||
在 `tailwind.config.mjs` 中扩展了主题颜色：
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
export default {
|
|
||||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: '#165DFF',
|
|
||||||
secondary: '#36D399',
|
|
||||||
dark: '#1E293B',
|
|
||||||
light: '#F8FAFC'
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
inter: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 导航栏配置
|
|
||||||
|
|
||||||
导航栏在 `src/layouts/Layout.astro` 中统一管理，采用**单行紧凑设计**，支持导航高亮：
|
|
||||||
|
|
||||||
**桌面端：**
|
|
||||||
- 单行布局，三个板块并排显示
|
|
||||||
- 胶囊式按钮设计，每个板块包含**图标 + 标题**
|
|
||||||
- 当前页面：**蓝色填充背景 + 白色文字**高亮显示
|
|
||||||
- 非当前页面：灰色文字，悬停显示淡蓝色背景
|
|
||||||
|
|
||||||
**移动端：**
|
|
||||||
- 卡片式设计，包含图标容器和标题
|
|
||||||
- 当前页面蓝色高亮并显示对勾标记
|
|
||||||
|
|
||||||
```astro
|
|
||||||
---
|
|
||||||
const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
|
|
||||||
|
|
||||||
const navItems = [
|
|
||||||
{ id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
|
|
||||||
{ id: 'qazk', { label: '企安智控', href: '/qazk', icon: 'fa-cogs' },
|
|
||||||
{ id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
|
|
||||||
{ id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
|
|
||||||
];
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
## 功能特性
|
|
||||||
|
|
||||||
- 响应式设计，支持桌面端和移动端
|
|
||||||
- 基于 Astro 的静态站点生成，加载速度快
|
|
||||||
- Tailwind CSS 提供丰富的实用样式类
|
|
||||||
- 模块化组件设计，便于维护和扩展
|
|
||||||
- 导航栏自动高亮当前页面
|
|
||||||
- 支持类型检查（通过 Astro Check）
|
|
||||||
|
|
||||||
## 部署
|
## 部署
|
||||||
|
|
||||||
### 静态部署
|
本项目为纯静态站点，可部署到任意静态托管平台（Vercel、Netlify、Cloudflare Pages、OSS/COS 等）。
|
||||||
|
|
||||||
项目构建为静态站点，可部署到任何静态托管服务：
|
---
|
||||||
|
|
||||||
- **Vercel**
|
© 浙江贝凡网络科技有限公司
|
||||||
- **Netlify**
|
|
||||||
- **GitHub Pages**
|
|
||||||
- **Cloudflare Pages**
|
|
||||||
- **阿里云 OSS**
|
|
||||||
- **腾讯云 COS**
|
|
||||||
|
|
||||||
部署时只需将 `dist/` 目录的内容上传到静态托管服务即可。
|
|
||||||
|
|
||||||
## 许可证
|
|
||||||
|
|
||||||
© 2026 浙江贝凡网络科技有限公司. All Rights Reserved.
|
|
||||||
|
|
||||||
- ICP 备案：浙ICP备2025170226号-4
|
|
||||||
- 公安备案：浙公网安备33011002018371号
|
|
||||||
|
|
||||||
## 联系方式
|
|
||||||
|
|
||||||
- 电话：400-998-5710
|
|
||||||
- 网址：https://beifan.cn
|
|
||||||
|
|||||||
Reference in New Issue
Block a user