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 - 交互式更新依赖包

国际化功能

语言切换

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

localStorage控制：

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

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

语言切换器：
- 点击右上角的语言切换器
- 选择中文或英文
- 切换后会自动保存到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

开发指南

克隆项目后运行 yarn install 安装依赖
使用 yarn dev 启动开发服务器
开发完成后使用 yarn build 构建生产版本
使用 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 图标，支持动态颜色配置。

配置说明

Webpack 配置：在 webpack.config.js 中配置了 svg-sprite-loader
自动导入：src/utils/svgIcons.js 自动导入所有 SVG 文件
组件封装：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 图标演示和动态颜色效果。

platform-v2