更新文档结构并补充Sharp图片处理说明

2026-04-15 17:01:32 +08:00
parent b7922295c4
commit f2ad8af5ac
2 changed files with 135 additions and 237 deletions
@@ -1,258 +1,129 @@
 # 贝凡官网

-浙江贝凡网络科技公司官方网站，提供企业介绍、产品展示、解决方案等信息的现代化网站。
+浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业/智慧养老/智慧工地/明厨亮灶/智慧学校）、本地化定制与生态合作等页面。

 ## 技术栈

- **框架**：[Astro 5.7.3](https://astro.build) - 现代化的静态站点生成器
- **样式**：[Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架
- **包管理器**：[pnpm](https://pnpm.io) - 快速、节省磁盘空间的包管理器
-
-## 项目结构
-
-```
-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种智能硬件产品展示
- **本地化定制**：全场景产业数字化定制方案
- **小程序手册**：企安智控小程序使用指南
+- **框架**：Astro 5.x（静态站点生成）
+- **样式**：Tailwind CSS 3.x
+- **语言**：TypeScript
+- **图标**：FontAwesome 4.7.0
+- **包管理器**：pnpm
+- **图片处理**：Sharp（用于转 WebP）

 ## 快速开始

-### 安装依赖
-
 ```bash
 pnpm install
-```
-
-### 开发模式
-
-启动本地开发服务器：
-
-```bash
 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
 pnpm build
 ```

-构建产物将输出到 `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）
+`pnpm build` 会先执行 `astro check` 再产出静态文件到 `dist/`。

 ## 部署

-### 静态部署
+本项目为纯静态站点，可部署到任意静态托管平台（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
+© 浙江贝凡网络科技有限公司