haiwei-ui 1.0.3 → 1.0.4

package/README.md

@@ -5,30 +5,35 @@ HaiWei.UI 是一个基于 Vue2 + ElementUI 的业务模块化前端快速开发
 ## 主要特性
 
 ### 🎯 核心架构
+
 - **模块化设计** - 支持业务模块的独立开发和集成
 - **组件化开发** - 基于 Vue2 的组件化开发模式
 - **统一状态管理** - 使用 Vuex 进行全局状态管理
 - **路由管理** - 支持动态路由和权限控制
 
 ### 🎨 UI 组件库
+
 - **基础组件** - 丰富的表单、表格、弹窗等基础组件
 - **业务组件** - 针对常见业务场景封装的专用组件
 - **布局组件** - 灵活的页面布局和导航组件
 - **图表组件** - 数据可视化图表组件
 
 ### 🔧 开发工具
+
 - **开发服务器** - 内置开发服务器，支持热重载
 - **构建工具** - 基于 Vue CLI 的现代化构建流程
 - **代码规范** - 集成 ESLint 和 Prettier 代码规范
 - **TypeScript 支持** - 可选 TypeScript 支持
 
 ### 🛠️ 功能模块
+
 - **权限管理** - 基于角色的权限控制系统
 - **皮肤主题** - 支持自定义皮肤和主题切换
 - **登录页面** - 可定制的登录页面组件
 - **数据管理** - 统一的数据请求和状态管理
 
 ### 📦 部署与发布
+
 - **npm 发布** - 支持作为 npm 包发布和分发
 - **模块集成** - 模块化的集成和依赖管理
 - **构建优化** - 生产环境构建优化和代码压缩
@@ -36,25 +41,30 @@ HaiWei.UI 是一个基于 Vue2 + ElementUI 的业务模块化前端快速开发
 ## 快速开始
 
 ### 环境要求
+
 - Node.js >= 12.0.0
 - npm >= 6.0.0
 
 ### 安装依赖
+
 ```bash
 npm install
 ```
 
 ### 开发模式
+
 ```bash
 npm run serve
 ```
 
 ### 构建生产版本
+
 ```bash
 npm run build
 ```
 
 ### 代码检查
+
 ```bash
 npm run lint
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haiwei-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "HaiWei前端组件库",
   "author": "Eric",
   "license": "ISC",

package/packages/components/box/index.vue

@@ -45,137 +45,128 @@
   </section>
 </template>
 <script>
-import { mapState } from 'vuex'
-export default {
-  name: 'Box',
-  data() {
-    return {
-      collapse_: false,
-      fullscreen_: false
-    }
-  },
-  props: {
-    /** 标题 */
-    title: String,
-    /** 图标 */
-    icon: String,
-    /** 是否显示头部 */
-    header: Boolean,
-    /** 是否显示底部 */
-    footer: Boolean,
-    /** 底部对齐方式 */
-    footerAlign: {
-      type: String,
-      default: 'right'
-    },
-    /** 高度 */
-    height: String,
-    /** 是否显示顶部边框 */
-    border: Boolean,
-    /** 顶部边框的颜色 */
-    borderColor: {
-      type: String,
-      default: 'success'
-    },
-    /** 标题是否加粗 */
-    titleBold: Boolean,
-    /** 是否显示水平滚动条 */
-    horizontal: Boolean,
-    /** loading */
-    loading: Boolean,
-    /** 是否页模式 */
-    page: Boolean,
-    /** 是否显示全屏按钮 */
-    fullscreen: Boolean,
-    /** 是否显示折叠按钮 */
-    collapse: Boolean,
-    /** 自定义折叠事件 */
-    customCollapseEvent: Function,
-    /** 不显示滚动条 */
-    noScrollbar: Boolean,
-    /** 没有内边距 */
-    noPadding: Boolean,
-    /** 是否显示刷新按钮 */
-    refresh: Boolean
-  },
-  computed: {
-    ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
-    /** 生成class */
-    class_() {
-      let classArr = [
-        'nm-box',
-        this.fontSize,
-        this.fullscreen_ ? 'fullscreen' : '',
-        this.height ? 'has-height' : '',
-        this.page ? 'page' : '',
-        this.noPadding ? 'no-padding' : '',
-        this.border ? 'border' : '',
-        this.titleBold ? 'title-bold' : ''
-      ]
-
-      if (['success', 'primary', 'info', 'warning', 'danger'].includes(this.borderColor)) {
-        classArr.push(this.borderColor)
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Box',
+    data() {
+      return {
+        collapse_: false,
+        fullscreen_: false
       }
-      return classArr
     },
-    style_() {
-      let style = { height: this.height }
-      if (!['success', 'primary', 'info', 'warning', 'danger'].includes(this.borderColor)) {
-        style.borderTopCoder = this.borderColor
-      }
-      return style
-    },
-    /** 是否有滚动条 */
-    hasScrollbar() {
-      return !this.noScrollbar && (this.height || this.page)
+    props: {
+      /** 标题 */
+      title: String,
+      /** 图标 */
+      icon: String,
+      /** 是否显示头部 */
+      header: Boolean,
+      /** 是否显示底部 */
+      footer: Boolean,
+      /** 底部对齐方式 */
+      footerAlign: {
+        type: String,
+        default: 'right'
+      },
+      /** 高度 */
+      height: String,
+      /** 是否显示顶部边框 */
+      border: Boolean,
+      /** 顶部边框的颜色 */
+      borderColor: {
+        type: String,
+        default: 'success'
+      },
+      /** 标题是否加粗 */
+      titleBold: Boolean,
+      /** 是否显示水平滚动条 */
+      horizontal: Boolean,
+      /** loading */
+      loading: Boolean,
+      /** 是否页模式 */
+      page: Boolean,
+      /** 是否显示全屏按钮 */
+      fullscreen: Boolean,
+      /** 是否显示折叠按钮 */
+      collapse: Boolean,
+      /** 自定义折叠事件 */
+      customCollapseEvent: Function,
+      /** 不显示滚动条 */
+      noScrollbar: Boolean,
+      /** 没有内边距 */
+      noPadding: Boolean,
+      /** 是否显示刷新按钮 */
+      refresh: Boolean
     },
-    /** 是否可以折叠 */
-    isCollapse() {
-      return this.collapse && !this.page
-    }
-  },
-  methods: {
-    /** 开启全屏 */
-    openFullscreen() {
-      this.fullscreen_ = true
-      // 全屏事件
-      this.$emit('fullscreen-change', this.fullscreen_)
-    },
-    /** 关闭全屏 */
-    closeFullscreen() {
-      this.fullscreen_ = false
-      // 全屏事件
-      this.$emit('fullscreen-change', this.fullscreen_)
-    },
-    /** 滚动条重置 */
-    scrollbarResize() {
-      if (this.hasScrollbar) {
-        this.$refs.scrollbar.update()
-      }
-    },
-    /** 折叠事件 */
-    onCollapse() {
-      // 如果设置了自定义折叠事件，则覆盖默认的
-      if (this.customCollapseEvent) {
-        this.collapse_ = this.customCollapseEvent()
-      } else if (this.isCollapse) {
-        this.collapse_ = !this.collapse_
+    computed: {
+      ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
+      /** 生成class */
+      class_() {
+        let classArr = ['nm-box', this.fontSize, this.fullscreen_ ? 'fullscreen' : '', this.height ? 'has-height' : '', this.page ? 'page' : '', this.noPadding ? 'no-padding' : '', this.border ? 'border' : '', this.titleBold ? 'title-bold' : '']
+
+        if (['success', 'primary', 'info', 'warning', 'danger'].includes(this.borderColor)) {
+          classArr.push(this.borderColor)
+        }
+        return classArr
+      },
+      style_() {
+        let style = { height: this.height }
+        if (!['success', 'primary', 'info', 'warning', 'danger'].includes(this.borderColor)) {
+          style.borderTopCoder = this.borderColor
+        }
+        return style
+      },
+      /** 是否有滚动条 */
+      hasScrollbar() {
+        return !this.noScrollbar && (this.height || this.page)
+      },
+      /** 是否可以折叠 */
+      isCollapse() {
+        return this.collapse && !this.page
       }
-      // 折叠事件
-      this.$emit('collapse-change', this.collapse_)
     },
-    /** 全屏事件 */
-    onFullscreen() {
-      if (this.fullscreen_) {
-        this.closeFullscreen()
-      } else {
-        this.openFullscreen()
+    methods: {
+      /** 开启全屏 */
+      openFullscreen() {
+        this.fullscreen_ = true
+        // 全屏事件
+        this.$emit('fullscreen-change', this.fullscreen_)
+      },
+      /** 关闭全屏 */
+      closeFullscreen() {
+        this.fullscreen_ = false
+        // 全屏事件
+        this.$emit('fullscreen-change', this.fullscreen_)
+      },
+      /** 滚动条重置 */
+      scrollbarResize() {
+        if (this.hasScrollbar) {
+          this.$refs.scrollbar.update()
+        }
+      },
+      /** 折叠事件 */
+      onCollapse() {
+        // 如果设置了自定义折叠事件，则覆盖默认的
+        if (this.customCollapseEvent) {
+          this.collapse_ = this.customCollapseEvent()
+        } else if (this.isCollapse) {
+          this.collapse_ = !this.collapse_
+        }
+        // 折叠事件
+        this.$emit('collapse-change', this.collapse_)
+      },
+      /** 全屏事件 */
+      onFullscreen() {
+        if (this.fullscreen_) {
+          this.closeFullscreen()
+        } else {
+          this.openFullscreen()
+        }
+      },
+      /** 刷新按钮事件 */
+      onRefresh() {
+        this.$emit('refresh')
       }
-    },
-    /** 刷新按钮事件 */
-    onRefresh() {
-      this.$emit('refresh')
     }
   }
-}
 </script>

package/packages/components/box-col/index.vue

@@ -1,43 +1,40 @@
 <template>
-  <section
-    :class="['nm-box-col', span ? 'nm-box-col-' + span : '', offset ? 'nm-box-col-offset-' + offset : '', push ? 'nm-box-col-push-' + push : '', pull ? 'nm-box-col-pull-' + pull : '']"
-    :style="style"
-  >
+  <section :class="['nm-box-col', span ? 'nm-box-col-' + span : '', offset ? 'nm-box-col-offset-' + offset : '', push ? 'nm-box-col-push-' + push : '', pull ? 'nm-box-col-pull-' + pull : '']" :style="style">
     <slot />
   </section>
 </template>
 <script>
-export default {
-  name: 'BoxCol',
-  props: {
-    // 栅格占据的列数
-    span: {
-      type: Number,
-      default: 24
-    },
-    // 栅格左侧的间隔格数
-    offset: {
-      type: Number,
-      default: 0
-    },
-    // 栅格向右移动格数
-    push: {
-      type: Number,
-      default: 0
+  export default {
+    name: 'BoxCol',
+    props: {
+      // 栅格占据的列数
+      span: {
+        type: Number,
+        default: 24
+      },
+      // 栅格左侧的间隔格数
+      offset: {
+        type: Number,
+        default: 0
+      },
+      // 栅格向右移动格数
+      push: {
+        type: Number,
+        default: 0
+      },
+      // 栅格向左移动格数
+      pull: {
+        type: Number,
+        default: 0
+      }
     },
-    // 栅格向左移动格数
-    pull: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    style() {
-      return {
-        paddingLeft: this.$parent.gutter_,
-        paddingRight: this.$parent.gutter_
+    computed: {
+      style() {
+        return {
+          paddingLeft: this.$parent.gutter_,
+          paddingRight: this.$parent.gutter_
+        }
       }
     }
   }
-}
 </script>

package/packages/components/box-row/index.vue

@@ -4,24 +4,24 @@
   </section>
 </template>
 <script>
-export default {
-  name: 'BoxRow',
-  props: {
-    /** 间隔 */
-    gutter: {
-      type: Number,
-      default: 5
+  export default {
+    name: 'BoxRow',
+    props: {
+      /** 间隔 */
+      gutter: {
+        type: Number,
+        default: 5
+      },
+      /** 高度 */
+      height: {
+        type: String,
+        required: true
+      }
     },
-    /** 高度 */
-    height: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    gutter_() {
-      return this.gutter / 2 + 'px'
+    computed: {
+      gutter_() {
+        return this.gutter / 2 + 'px'
+      }
     }
   }
-}
 </script>

package/packages/components/box-small/index.vue

@@ -17,48 +17,48 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'BoxSmall',
-  props: {
-    /** 文本 */
-    label: String,
-    /** 值 */
-    value: [String, Number],
-    /** 单位 */
-    unit: String,
-    /** 图标 */
-    icon: String,
-    /** 显示更多 */
-    more: Boolean,
-    /** 背景色 */
-    bgColor: {
-      type: String,
-      default: 'success'
-    }
-  },
-  computed: {
-    class_() {
-      let classArr = ['nm-box-small']
-      if (this.includeBgColor) {
-        classArr.push(`nm-bg-${this.bgColor}`)
+  export default {
+    name: 'BoxSmall',
+    props: {
+      /** 文本 */
+      label: String,
+      /** 值 */
+      value: [String, Number],
+      /** 单位 */
+      unit: String,
+      /** 图标 */
+      icon: String,
+      /** 显示更多 */
+      more: Boolean,
+      /** 背景色 */
+      bgColor: {
+        type: String,
+        default: 'success'
       }
-      return classArr
     },
-    style_() {
-      let style = {}
-      if (!this.includeBgColor) {
-        style.backgroundColor = this.bgColor
+    computed: {
+      class_() {
+        let classArr = ['nm-box-small']
+        if (this.includeBgColor) {
+          classArr.push(`nm-bg-${this.bgColor}`)
+        }
+        return classArr
+      },
+      style_() {
+        let style = {}
+        if (!this.includeBgColor) {
+          style.backgroundColor = this.bgColor
+        }
+        return style
+      },
+      includeBgColor() {
+        return ['success', 'primary', 'info', 'warning', 'danger'].includes(this.bgColor)
       }
-      return style
     },
-    includeBgColor() {
-      return ['success', 'primary', 'info', 'warning', 'danger'].includes(this.bgColor)
-    }
-  },
-  methods: {
-    onMore() {
-      this.$emit('more')
+    methods: {
+      onMore() {
+        this.$emit('more')
+      }
     }
   }
-}
 </script>

package/packages/components/button/index.vue

@@ -1,18 +1,5 @@
 <template>
-  <el-button
-    class="nm-button"
-    :type="type"
-    :size="size || fontSize"
-    :plain="plain"
-    :round="round"
-    :circle="circle"
-    :loading="loading"
-    :disabled="disabled"
-    :autofocus="autofocus"
-    :native-type="nativeType"
-    v-nm-has="code"
-    @click="$emit('click')"
-  >
+  <el-button class="nm-button" :type="type" :size="size || fontSize" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" :native-type="nativeType" v-nm-has="code" @click="$emit('click')">
     <nm-icon v-if="!loading && icon" :name="icon" />
     <slot>
       <span v-if="!circle && text" class="nm-button-text" v-html="text" />
@@ -20,33 +7,33 @@
   </el-button>
 </template>
 <script>
-export default {
-  name: 'Button',
-  props: {
-    /** 尺寸，默认按照框架的字号设置 */
-    size: String,
-    /** 类型 primary/success/warning/danger/info/text */
-    type: String,
-    /** 是否朴素按钮 */
-    plain: Boolean,
-    /** 是否圆角按钮 */
-    round: Boolean,
-    /** 是否圆形按钮 */
-    circle: Boolean,
-    /** 是否加载中状态 */
-    loading: Boolean,
-    /** 是否禁用状态 */
-    disabled: Boolean,
-    /** 是否默认聚焦 */
-    autofocus: Boolean,
-    /** 原生 type 属性 button/submit/reset */
-    nativeType: String,
-    /** 图标 */
-    icon: String,
-    // 文本
-    text: String,
-    // 按钮编码，用于按钮权限控制
-    code: String
+  export default {
+    name: 'Button',
+    props: {
+      /** 尺寸，默认按照框架的字号设置 */
+      size: String,
+      /** 类型 primary/success/warning/danger/info/text */
+      type: String,
+      /** 是否朴素按钮 */
+      plain: Boolean,
+      /** 是否圆角按钮 */
+      round: Boolean,
+      /** 是否圆形按钮 */
+      circle: Boolean,
+      /** 是否加载中状态 */
+      loading: Boolean,
+      /** 是否禁用状态 */
+      disabled: Boolean,
+      /** 是否默认聚焦 */
+      autofocus: Boolean,
+      /** 原生 type 属性 button/submit/reset */
+      nativeType: String,
+      /** 图标 */
+      icon: String,
+      // 文本
+      text: String,
+      // 按钮编码，用于按钮权限控制
+      code: String
+    }
   }
-}
 </script>