From f2ad8af5acac7f95989ec79eebba0a30d7ead12f Mon Sep 17 00:00:00 2001 From: Frudrax Cheng Date: Wed, 15 Apr 2026 17:01:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3=E7=BB=93?= =?UTF-8?q?=E6=9E=84=E5=B9=B6=E8=A1=A5=E5=85=85Sharp=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=A4=84=E7=90=86=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 35 +++++- README.md | 337 +++++++++++++++++------------------------------------- 2 files changed, 135 insertions(+), 237 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 49c0586..e0fc344 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -31,13 +31,29 @@ pnpm astro # Run any astro command directly ``` src/ -├── layouts/Layout.astro # Main layout with navigation +├── layouts/Layout.astro # Main layout with desktop/mobile navigation ├── pages/ # Route pages (use .astro files) │ ├── 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/ -│ └── sections/ # Reusable section components +│ └── sections/ # Reusable section components └── 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 @@ -89,7 +105,8 @@ const { title, activeNav = 'home' } = Astro.props; ### Layout Pattern - All pages use `` 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 `
` tag ```astro @@ -128,6 +145,16 @@ const { title, activeNav = 'home' } = Astro.props; - Reference with absolute paths: `/img/image.webp` - 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 - Primary actions: `bg-primary` (#165DFF) diff --git a/README.md b/README.md index 2d06fa9..7ee55b6 100644 --- a/README.md +++ b/README.md @@ -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 +``` + +## 项目结构 + +```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` +- 页面通过 `` 控制高亮 + +## 图片规范与 Sharp 用法 + +### 图片规范 + +- 页面图片优先使用 `.webp` +- 静态资源统一放在 `public/img//` +- 代码中使用绝对路径引用，如：`/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 +© 浙江贝凡网络科技有限公司