Huiyan Platform V2

项目简介

慧眼平台V2版本，基于Vue.js和Webpack构建的前端项目，支持中英文国际化。

安装依赖

yarn install

可用的Yarn命令

开发相关

• yarn dev 或 yarn start - 启动开发服务器
• yarn serve - 使用Vue CLI服务启动开发服务器

构建相关

• yarn build - 构建生产版本
• yarn build:prod - 构建生产版本（别名）
• yarn build:dev - 构建开发版本
• yarn clean - 清理dist目录

代码质量

• yarn lint - 运行ESLint检查代码
• yarn lint:fix - 运行ESLint并自动修复问题
• yarn format - 使用Prettier格式化代码

分析工具

• yarn analyze - 分析打包结果

依赖管理

• yarn install:clean - 清理并重新安装依赖
• yarn update - 交互式更新依赖包

国际化功能

语言切换

项目支持中英文切换，通过以下方式控制：

1. localStorage控制：

   // 设置为英文
   localStorage.setItem('cutoverLanguage', 'en')
      
   // 设置为中文
   localStorage.setItem('cutoverLanguage', 'zh')

2. 语言切换器：

   • 点击右上角的语言切换器
   • 选择中文或英文
   • 切换后会自动保存到localStorage

语言包配置

• 中文语言包：src/i18n/index.js 中的 zhCN 对象
• 英文语言包：src/i18n/index.js 中的 enUS 对象

添加新的翻译

在 src/i18n/index.js 中添加新的翻译键值：

const zhCN = {
  newKey: '中文翻译'
}

const enUS = {
  newKey: 'English translation'
}

然后在组件中使用：

<template>
  <div>{{ $t('newKey') }}</div>
</template>

项目结构

src/
├── assets/          # 静态资源
│   └── imgs/       # 图片资源
├── i18n/           # 国际化配置
│   └── index.js    # 语言包配置
├── index.js        # 入口文件
├── index.vue       # 主组件
├── LanguageSwitcher.vue  # 语言切换组件
├── msgWebSocket.vue      # WebSocket消息组件
├── g_bindvx.vue          # 微信绑定组件
└── utils.js              # 工具函数

技术栈

• Vue.js 2.x
• Webpack 3.x
• Element UI
• Vue I18n
• Axios
• Moment.js

开发指南

1. 克隆项目后运行 yarn install 安装依赖
2. 使用 yarn dev 启动开发服务器
3. 开发完成后使用 yarn build 构建生产版本
4. 使用 yarn lint 和 yarn format 保持代码质量

本地调试

方法一：使用开发服务器

# 启动开发服务器
yarn dev

# 访问 http://localhost:8080 查看效果

方法二：直接打开调试页面

# 先构建项目
yarn build:dev

# 然后直接在浏览器中打开 public/index.html 文件

调试技巧

• 打开浏览器开发者工具查看控制台输出
• 使用Vue DevTools插件进行Vue组件调试
• 修改src/index.vue文件后重新构建即可看到效果
• 切换语言：修改localStorage中的cutoverLanguage值

SVG 图标系统

项目使用 svg-sprite-loader 来处理 SVG 图标，支持动态颜色配置。

配置说明

1. Webpack 配置：在 webpack.config.js 中配置了 svg-sprite-loader
2. 自动导入：src/utils/svgIcons.js 自动导入所有 SVG 文件
3. 组件封装：src/SvgIcon.vue 提供统一的 SVG 图标组件

使用方法

1. 导入组件

import SvgIcon from './SvgIcon.vue'

export default {
  components: { SvgIcon }
}

2. 在模板中使用

<template>
  <svg-icon icon-class="help_center" style="width: 24px; height: 24px; color: #409eff;" />
</template>

3. 可用属性

• icon-class：SVG 文件名（不含 .svg 扩展名）
• className：额外的 CSS 类名
• color：颜色属性（也可使用 style 属性）

4. CSS 自定义

.svg-icon {
  fill: currentColor;
  transition: fill 0.3s ease;
}

.svg-icon:hover {
  fill: #409eff;
}

可用图标

项目中的 SVG 图标包括：

• help_center - 帮助中心
• downsvg - 下载图标
• refresh - 刷新图标
• success - 成功图标
• await - 等待图标
• fail - 失败图标
• jumpTo - 跳转图标
• jumpToHover - 跳转悬停图标
• passwordView - 密码可见图标
• passwordeye - 密码隐藏图标

演示页面

访问 public/svg-demo.html 查看 SVG 图标演示和动态颜色效果。