一、项目目录结构

压缩机选型系统 (路径：hitachi/src/views/hitachi)

组件	文件路径	说明
头部LOGO与导航栏	components/CommonHeader.vue	顶部导航与品牌标识
导航标签栏	components/CommonTag.vue	页面切换标签导航
左侧过滤器	components/CommonLeft.vue	筛选条件设置区域
右侧结果展示	components/CommonRight.vue	筛选结果展示区域
页脚组件	components/CommonFooder.vue	页面底部信息
运行范围图	eCharts/index.vue	压缩机运行范围可视化图表
PDF下载模块	PDF/index.vue	产品手册生成与下载功能

压缩机管理系统 (路径：hitachi/src/views/comp)

模块	文件路径	说明
基础信息	compressor/index.vue	压缩机基础数据管理
运行范围	envelop/index.vue	运行参数范围管理
系数信息	coefficient/index.vue	性能系数管理

---

二、多语言配置指南

语言包文件格式 在 src/assets/locale/ 目录下的语言文件需按以下格式编写：

javascript

const zhTW = {
  'home': '首頁',       // 左侧键名必须保持全项目一致
  'about': '關於我們',   // 右侧值为对应语言的翻译文本
  'contact': '聯絡我們',
  'filters': '篩選器',
  'download': '下載PDF'
  // 添加其他需要国际化的文本
}
export default zhTW

配置步骤：

1. 添加语言包文件 在 src/assets/locale/ 目录创建新语言文件（如 zh-TW.js），按上述格式编写内容

2. 注册语言包 编辑 src/assets/locale/index.js：

   javascript

   import zh from './zh.js';        // 简体中文
   import en from './en.js';        // 英文
   import zhTW from './zh-TW.js';   // 新增繁体中文包
   
   const supportedLanguages = {
     'zh-CN': zh,     // 键名为语言标识
     'en-US': en,
     'zh-TW': zhTW     // 注册新语言包
   };
   
   export default supportedLanguages;
   

3. 更新语言切换菜单 修改 CommonTag.vue 组件：

   vue

   <template>
     <el-dropdown>
       <!-- 现有菜单项 -->
       <el-dropdown-item @click="changeLanguage('zh-CN')">简体中文</el-dropdown-item>
       <el-dropdown-item @click="changeLanguage('en-US')">English</el-dropdown-item>
       
       <!-- 新增繁体中文选项 -->
       <el-dropdown-item @click="changeLanguage('zh-TW')">
         繁體中文
       </el-dropdown-item>
     </el-dropdown>
   </template>
   
   <script>
   export default {
     methods: {
       changeLanguage(lang) {
         this.$i18n.locale = lang;  // 实际实现可能使用vue-i18n等库
         // 其他语言切换逻辑
       }
     }
   }
   </script>
   

三、项目运行与构建

环境要求 确保已安装 Node.js (推荐 v16.x+)

bash

# 1. 安装依赖
npm install

# 2. 启动开发服务器 (本地调试)
npm run dev

# 3. 生产环境构建 (输出至 /dist 目录)
npm run build

构建完成后，将 /dist 目录内容部署至 Web 服务器即可上线

---

关键说明

1. 所有业务组件均按功能模块化组织，维护时请定位到对应视图目录
2. 多语言扩展需同步完成三步：添加文件 → 注册包 → 更新菜单
3. 生产环境构建前建议执行 npm ci 确保依赖版本一致性