ei-base-pc

永达理 PC 端 Vue 组件库。

安装

npm install ei-base-pc

快速开始

import Vue from 'vue'
import EI from 'ei-base-pc'
Vue.use(EI)

按需引入：

import { FhImage, FhPresetImage, RichTextEditor } from 'ei-base-pc'

组件标签名遵循历史命名（FHImage、FHPresetImage 等），保留是为了与现有使用方代码兼容。

命令

| 命令 | 用途 | |------|------| | npm run serve | 启动 demo 站 + 热更新 | | npm run build | 生产构建 | | npm run test:unit | 单元测试 | | npm run lint | 代码校验 / 自动修复 |

构建配置参考 Vue CLI Configuration Reference。

项目结构

src/
├── packages/         # 组件目录（每个子目录一个 Vue 组件，可被 Vue.use 注册）
│   ├── richTextEditor/
│   ├── uploadFile/
│   └── ...
├── plugins/          # Vue 插件、mixin
├── api/              # 接口请求封装
├── assets/           # 静态资源
├── common/           # 公共 js（数据处理、工具）
├── components/       # 业务级公共组件
├── router/           # 路由
├── store/            # vuex
├── tool/             # 工具类
│   ├── floatTools/   # 小数加减乘精确计算
│   ├── func/         # 通用处理函数
│   ├── messageInstance/  # 消息弹出单例（已全局引入）
│   ├── route/        # 路由处理（一般不修改）
│   ├── screen/       # 计算屏幕宽度
│   ├── storage/      # localStorage / sessionStorage 封装
│   ├── validate/     # 校验规则集中维护
│   └── appInfo/      # app 相关信息常量
├── views/            # 业务页面
├── constant/         # 公共枚举常量
├── filters/          # 全局过滤器
├── static/           # 本地静态资源
├── html/             # 静态页
├── App.vue
└── main.js

通用 mixin

• calculateTableHeightMixin — 根据父盒子高度动态计算 table 最大高度
• commonFuncMixin — 判空辅助
• getScreenMixin — 计算屏幕宽度

组件通信方式

按优先级：props / $emit → vuex → provide / inject → $parent / $children → $refs → $attrs / $listeners。

请求封装（业务侧约定，组件库仅提供入口）

this.$post('/xxx/xxx', params).then(data => {}).catch(() => {})
this.$qsPost('/xxx/xxx', params).then(data => {}).catch(() => {})
this.$get('/xxx/xxx', { params }).then(data => {}).catch(() => {})

拦截器已剥离 res.data.data，使用方直接拿到业务数据，无需再判断 res.status。

按钮权限指令

<el-button v-permission="'home/permission'" type="danger">按钮</el-button>

登录接口返回的对象需包含 permissions 数组（参考使用方 store/user.js）。

命名规范

| 类别 | 规则 | |------|------| | 普通变量 | 驼峰命名，复数加 s，与业务相关 | | 方法 | 驼峰 + 动词或动词+名词（jumpPage、getListData） | | 常量 | 全大写 + 下划线（MAX_COUNT） | | 组件声明 / 引用 | PascalCase（EIUploadFile） | | 组件使用 | kebab-case（<ei-upload-file>） | | 公用组件前缀 | EI（EIDatePicker、EITable） | | 页面内组件 | 模块名简写 + Item 结尾（StaffBenchToChargeItem） | | 请求数据方法 | 以 Data 结尾（getListData、postFormData） | | views/ 文件 | 至少两个单词，驼峰，模块名开头（workbenchIndex、workbenchList） |

init / refresh 等单词可独立使用，不强求 Data 后缀。

Vue 文件基本结构

<template>
  <div>
    <!-- 必须有根 div -->
  </div>
</template>

<script>
export default {
  name: 'MyComponentName',
  components: {},
  props: [],
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mixins: [],
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  errorCaptured() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
</style>

多个特性的元素

每个特性一行：

<!-- bad -->
<img src="x.png" alt="Vue Logo">

<!-- good -->
<img
  src="x.png"
  alt="Vue Logo"
>

元素特性顺序

1. class / id / ref / name / data-*
2. src / for / type / href / value / max-length / max / min / pattern
3. title / alt / placeholder
4. aria-* / role / required / readonly / disabled / is
5. v-for / key
6. v-if / v-else-if / v-else / v-show
7. v-cloak / v-pre / v-once
8. v-model
9. v-bind（:）/ v-on（@）
10. v-html / v-text

组件选项顺序

components → props → data → computed → created → mounted → methods → filter → watch

注释规范

• 块注释：/** ... */
• 单行注释：//
• 必须注释：公共组件、重要函数、复杂业务逻辑、特殊 hack、多重 if 判断

/**
 * 组件名称
 * @module 组件存放位置
 * @desc 组件描述
 * @author 组件作者
 * @date 2020-03-27 12:22:43
 * @param {Object} [title] - 参数说明
 * @param {String} [columns] - 参数说明
 * @example <HbTable :title="title" :columns="columns" :tableData="tableData"></HbTable>
 */

单行注释不写在代码同一行后。

编码规范

• ES6：let 定义变量，const 定义常量
• 字符串：静态用单引号 / 反引号，动态用反引号
• 数组 / 对象成员赋值优先解构；数组拷贝用扩展运算符 [...items]
• 箭头函数优先（(...params) => method.apply(this, params)）
• 模块输出：单一值 export default；多个值用 export { ... }，不混用
• 避免 this.$parent
• console.log() / debugger 调试完及时删除

指令

• 缩写优先：v-bind → :，v-on → @
• v-for 必须加 :key，循环内唯一
• 避免 v-if + v-for 同时使用（性能问题）

<!-- bad -->
<li v-for="user in users" v-if="user.isActive" :key="user.id">

<!-- good -->
<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
</ul>

Props

props: {
  status: {
    type: String,
    required: true,
    validator: (value) => ['syncing', 'synced', 'error'].indexOf(value) !== -1
  }
}

CSS 规范

• 类名用 - 连字符
• 值为 0 时省略单位
• 声明顺序：显示属性 → 自身属性 → 文本属性
• 元素选择器避免出现在 scoped 中
• 分类前缀：g- 布局 / m- 模块 / u- 元件 / f- 功能 / s- 皮肤 / z- 状态

SASS 规范

嵌套顺序：

1. 当前选择器样式属性
2. 父选择器伪类（:hover、:active）
3. 伪元素（::before、::after）
4. 父选择器状态类（.active、.selected）
5. 上下文媒体查询
6. 子选择器

.product-teaser {
  display: inline-block;
  padding: 1rem;

  &:hover { color: black; }
  &:before { content: ''; }

  &.active { background: pink; }

  @media (max-width: 640px) { font-size: 2em; }

  > .content > .title { font-size: 1.2em; }
}

特殊规范

• 页面级组件：<style lang="scss" scoped>
• 公用 / 全局组件库：倾向 BEM 策略

<style lang="scss" scoped> /* good: 页面级 scoped */ </style>

<style>
.c-Button { border: none; }
.c-Button--close { background: red; }
</style>