sz-icnccom - SKILL.md Agent Skill

name: sz-icnc.com description: 苏州艾恩西精密五金有限公司开发指南。当需要修改、更新或开发该网站的页面、样式、功能时使用此技能。

SZ-ICNC 官网开发指南

这是一个企业官网项目，用于展示深圳市智能数控有限公司的信息和产品。

项目结构

sz-icnc.com/
├── index.html          # 主页面
├── css/
│   └── style.css       # 全局样式文件
├── js/
│   ├── main.js         # JavaScript 脚本
│   └── i18n.js         # 国际化(i18n)模块
├── images/             # 图片资源目录
└── docs/               # 文档资源目录
    └── *.pptx          # PPT 演示文稿文件

文档资源

docs/ 目录下存放公司相关的 PPT 演示文稿文件，可作为网站内容的参考资料：

公司介绍 PPT
产品说明 PPT
其他宣传资料

开发网站内容时，可以参考这些 PPT 文件中的文案、图片和设计风格。

技术栈

HTML5: 语义化标签结构
CSS3: 响应式布局，使用 Flexbox/Grid
原生 JavaScript: 交互功能
i18n 国际化: 支持中文、英文、日文三种语言

国际化 (i18n) 说明

网站支持三种语言切换：

🇨🇳 中文 (zh-CN) - 默认语言
🇺🇸 English (en)
🇯🇵 日本語 (ja)

使用方式

语言切换器：位于导航栏右侧，点击可切换语言
自动检测：首次访问时会根据浏览器语言自动选择
语言记忆：用户选择的语言会保存在 localStorage 中

添加翻译文本

在 js/i18n.js 的 translations 对象中添加新的翻译键值对：

// 在每个语言对象中添加
'section.key': '翻译文本',

在 HTML 中使用 data-i18n 属性：

<p data-i18n="section.key">默认文本</p>

支持的 i18n 属性

data-i18n: 替换元素的文本内容
data-i18n-placeholder: 替换 input/textarea 的 placeholder
data-i18n-aria: 替换 aria-label 属性

JavaScript 中使用翻译

// 获取翻译文本
const text = window.i18n.t("key.name");

// 切换语言
window.i18n.switchLanguage("en");

// 获取当前语言
const lang = window.i18n.getCurrentLanguage();

开发规范

HTML 规范

使用语义化标签（header, nav, main, section, footer 等）
页面语言设置为中文 lang="zh-CN"
确保 meta 标签完整（charset, viewport, description）
使用 BEM 命名或语义化的 class 命名

CSS 规范

样式文件位于 css/style.css
使用移动优先的响应式设计
常用断点：
- 移动端：< 768px
- 平板：768px - 1024px
- 桌面：> 1024px
使用 CSS 变量定义主题颜色和通用值
保持样式模块化，按组件分组注释

JavaScript 规范

脚本文件位于 js/main.js
使用原生 ES6+ 语法
DOM 操作使用 querySelector / querySelectorAll
事件监听使用 addEventListener
代码需要添加必要的注释

页面模块

导航栏 (header.nav)

Logo 区域
导航链接：首页、关于我们、产品中心、联系我们
需要支持移动端响应式菜单

主页横幅 (section.hero)

欢迎信息
主要 CTA 按钮

关于我们 (section#about)

公司介绍内容

产品中心 (section#products)

产品卡片网格布局
每个产品卡片包含：图片、标题、描述

联系我们 (section#contact)

联系电话
邮箱地址
可添加地图或表单

页脚 (footer)

版权信息

常用任务

添加新产品卡片

在 #products .products-grid 中添加：

<div class="product-card">
  <img src="images/product-name.jpg" alt="产品名称" />
  <h3>产品名称</h3>
  <p>产品描述</p>
</div>

修改主题颜色

在 css/style.css 的 :root 中修改 CSS 变量

添加新页面

在根目录创建新的 HTML 文件
复用 header 和 footer 结构
在导航栏添加链接

注意事项

图片需要压缩优化后放入 images/ 目录
确保所有链接和图片路径正确
测试不同屏幕尺寸的响应式效果
保持代码整洁，添加必要注释