haiwei-ui 1.0.0

package/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 10

package/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential', '@vue/prettier'],
+  rules: {
+    'no-console': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  globals: {
+    $http: 'readonly',
+    $const: 'readonly',
+    BMap: 'readonly',
+    BMAP_STATUS_SUCCESS: 'readonly'
+  }
+}

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 200
+}

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnType": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.tslint": "explicit",
+    "source.fixAll.eslint": "explicit"
+  }
+}

package/README.md

@@ -0,0 +1,23 @@
+# HaiWei.UI
+
+HaiWei.UI是业务模块化前端快速开发框架，基于Vue2全家桶+ElementUI开发，结合实际场景，封装了几十个组件，同时支持自定义皮肤和登录页功能，用户能够灵活的进行自定义。
+
+模块通过npm私服分发与集成，极大的提高了模块的复用。
+
+## Demo(示例)
+
+[https://demo.17mkh.com/](https://demo.17mkh.com/)  
+Account: admin  
+Password: admin
+
+## Documentation(文档)
+
+For full documentation please see [https://docs.17mkh.com/frendEnd/DevEnvironment.html](https://docs.17mkh.com/frendEnd/DevEnvironment.html)
+
+## 启动
+
+```js
+npm i
+
+npm run serve
+```

package/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    [
+      '@vue/cli-plugin-babel/preset',
+      {
+        useBuiltIns: 'entry'
+      }
+    ]
+  ]
+}

package/npm/345/217/221/345/270/203/350/257/246/347/273/206/346/223/215/344/275/234/346/214/207/345/274/225.md

@@ -0,0 +1,296 @@
+# HaiWei.UI npm 发布详细操作指引
+
+## 准备工作
+
+### 1. 检查当前项目状态
+```bash
+# 进入项目目录
+cd haiwei.ui
+
+# 检查 package.json 配置
+cat package.json | grep -E "(name|version|description)"
+
+# 预期输出：
+#   "name": "haiwei-ui",
+#   "version": "2.0.6",
+#   "description": "HaiWei前端组件库",
+```
+
+### 2. 检查 npm 账户状态
+```bash
+# 检查是否已登录
+npm whoami
+
+# 如果显示 "npm ERR! code ENEEDAUTH"，表示需要登录
+# 如果显示用户名，表示已登录
+```
+
+## npm 账户管理
+
+### 1. 注册 npm 账户（如果没有账户）
+访问 [npm 官网](https://www.npmjs.com/signup) 注册账户
+
+### 2. 登录 npm
+```bash
+# 登录 npm
+npm login
+
+# 按提示输入：
+# - 用户名 (Username)
+# - 密码 (Password) 
+# - 邮箱 (Email)
+# - 一次性密码 (如果有启用双重验证)
+
+# 验证登录状态
+npm whoami
+```
+
+### 3. 检查包名可用性
+```bash
+# 检查 haiwei-ui 包名是否可用
+npm view haiwei-ui
+
+# 如果返回 404，表示包名可用
+# 如果返回包信息，表示包名已被占用
+```
+
+## npm 镜像配置
+
+### 1. 检查当前镜像
+```bash
+# 查看当前 npm 镜像源
+npm config get registry
+
+# 默认应该是：https://registry.npmjs.org/
+```
+
+### 2. 设置官方镜像（推荐）
+```bash
+# 设置为官方镜像
+npm config set registry https://registry.npmjs.org/
+```
+
+### 3. 国内镜像配置（可选）
+如果需要使用国内镜像加速：
+
+```bash
+# 淘宝镜像
+npm config set registry https://registry.npmmirror.com/
+
+# 华为云镜像
+npm config set registry https://mirrors.huaweicloud.com/repository/npm/
+
+# 腾讯云镜像  
+npm config set registry https://mirrors.cloud.tencent.com/npm/
+```
+
+**注意**：发布包时必须使用官方镜像！
+
+### 4. 临时切换镜像
+```bash
+# 临时使用官方镜像发布
+npm publish --registry=https://registry.npmjs.org/
+
+# 临时使用淘宝镜像安装
+npm install --registry=https://registry.npmmirror.com/
+```
+
+## 发布前测试
+
+### 1. 安装依赖
+```bash
+# 确保所有依赖已安装
+npm install
+```
+
+### 2. 构建测试
+```bash
+# 执行构建
+npm run build
+
+# 检查 dist 目录是否生成
+ls dist/
+```
+
+### 3. 本地测试
+```bash
+# 启动开发服务器测试
+npm run serve
+
+# 访问 http://localhost:6220 验证功能
+```
+
+### 4. 版本管理
+```bash
+# 查看当前版本
+npm version
+
+# 更新版本（根据需要选择）
+npm version patch    # 小版本更新，如 2.0.6 → 2.0.7
+npm version minor    # 中版本更新，如 2.0.6 → 2.1.0  
+npm version major    # 大版本更新，如 2.0.6 → 3.0.0
+
+# 或手动修改 package.json 中的 version 字段
+```
+
+## 发布流程
+
+### 1. 最终验证
+```bash
+# 确认所有修改已提交
+git status
+
+# 确认包名和版本
+cat package.json | grep -E "(name|version)"
+
+# 确认镜像源为官方
+npm config get registry
+```
+
+### 2. 发布到 npm
+```bash
+# 方法1：使用项目脚本
+npm run pub
+
+# 方法2：直接发布
+npm publish
+
+# 方法3：指定官方镜像发布（确保使用正确镜像）
+npm publish --registry=https://registry.npmjs.org/
+```
+
+### 3. 发布成功验证
+```bash
+# 查看已发布的包信息
+npm view haiwei-ui
+
+# 查看版本信息
+npm view haiwei-ui versions
+
+# 查看最新版本详情
+npm info haiwei-ui
+```
+
+## 发布后操作
+
+### 1. 安装测试
+```bash
+# 在另一个目录测试安装
+cd /tmp
+mkdir test-haiwei-ui
+cd test-haiwei-ui
+npm init -y
+npm install haiwei-ui
+
+# 检查是否安装成功
+ls node_modules/haiwei-ui/
+```
+
+### 2. 标签管理（可选）
+```bash
+# 为版本添加标签
+npm dist-tag add haiwei-ui@2.0.6 latest
+
+# 查看标签
+npm dist-tag ls haiwei-ui
+```
+
+### 3. 撤销发布（如果需要）
+```bash
+# 撤销特定版本（24小时内）
+npm unpublish haiwei-ui@2.0.6
+
+# 撤销整个包（72小时内，且没有其他版本）
+npm unpublish haiwei-ui --force
+```
+
+## 常见问题解决
+
+### 1. 权限问题
+```bash
+# 检查包权限
+npm access ls-packages
+
+# 添加维护者
+npm owner add <username> haiwei-ui
+
+# 查看维护者列表
+npm owner ls haiwei-ui
+```
+
+### 2. 发布失败 - 包名冲突
+```bash
+# 如果包名已被占用，考虑：
+# 1. 使用作用域包名
+# 修改 package.json 中的 name 为 @your-username/haiwei-ui
+
+# 2. 联系包所有者
+# 访问 https://www.npmjs.com/package/haiwei-ui 联系维护者
+```
+
+### 3. 发布失败 - 镜像问题
+```bash
+# 确保使用官方镜像
+npm config set registry https://registry.npmjs.org/
+npm publish
+```
+
+### 4. 发布失败 - 认证问题
+```bash
+# 重新登录
+npm logout
+npm login
+npm publish
+```
+
+### 5. 构建问题
+```bash
+# 清理缓存和重新安装
+npm run cm    # 清理 node_modules 和 dist
+npm i         # 重新安装依赖
+npm run build # 重新构建
+```
+
+## 自动化发布脚本
+
+项目已包含发布脚本 `script/npm_publish.ps1`，可以查看和自定义：
+
+```powershell
+# 查看发布脚本内容
+cat script/npm_publish.ps1
+```
+
+## 最佳实践
+
+1. **版本管理**：遵循语义化版本控制
+2. **文档更新**：确保 README.md 准确反映包功能
+3. **测试充分**：发布前充分测试所有功能
+4. **依赖管理**：定期更新依赖包
+5. **代码质量**：使用 ESLint 和 Prettier 保持代码规范
+
+## 后续维护
+
+### 1. 更新包
+```bash
+# 更新版本号
+npm version patch
+
+# 重新发布
+npm publish
+```
+
+### 2. 弃用版本
+```bash
+# 标记版本为弃用
+npm deprecate haiwei-ui@1.0.0 "此版本已弃用，请升级到最新版本"
+```
+
+### 3. 包信息更新
+```bash
+# 更新包描述等信息后重新发布
+npm publish
+```
+
+## 总结
+
+按照以上步骤，您可以顺利完成 `haiwei-ui` 的 npm 发布。如果在任何步骤遇到问题，请参考对应的问题解决部分。

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "haiwei-ui",
+  "version": "1.0.0",
+  "description": "HaiWei前端组件库",
+  "author": "Eric",
+  "license": "ISC",
+  "main": "packages/index.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "cm": "rimraf node_modules && rimraf dist",
+    "cc": "rimraf node_modules/.cache",
+    "i": "cd ./script && npm_install.bat",
+    "up": "cd ./script && npm_update.bat",
+    "pub": "cd ./script && npm_publish.bat"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.8.7",
+    "axios": "^0.19.2",
+    "core-js": "^3.3.2",
+    "dayjs": "^1.8.22",
+    "element-ui": "^2.12.0",
+    "nprogress": "^0.2.0",
+    "qs": "^6.9.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "screenfull": "^4.2.1",
+    "store": "^2.0.12",
+    "vue": "^2.6.10",
+    "vue-clipboard2": "^0.3.1",
+    "vue-router": "^3.1.6",
+    "vuedraggable": "^2.23.0",
+    "vuex": "^3.1.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-eslint": "^4.2.3",
+    "@vue/cli-plugin-router": "^4.2.3",
+    "@vue/cli-plugin-vuex": "^4.2.3",
+    "@vue/cli-service": "^4.2.3",
+    "@vue/eslint-config-prettier": "^5.0.0",
+    "babel-eslint": "^10.1.0",
+    "codemirror": "^5.52.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-vue": "^5.0.0",
+    "prettier": "^1.18.2",
+    "raw-loader": "^3.1.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.26.2",
+    "sass-loader": "^8.0.2",
+    "vue-highlightjs": "^1.3.3",
+    "vue-template-compiler": "^2.6.10",
+    "vuep": "^0.8.1"
+  },
+  "vetur": {
+    "tags": "packages/vuter/tags.json",
+    "attributes": "packages/vuter/attributes.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iamoldli/haiwei.UI"
+  }
+}

package/packages/components/box/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <section :class="class_" :style="style_" v-loading="loading" :element-loading-text="loadingText" :element-loading-background="loadingBackground" :element-loading-spinner="loadingSpinner">
+    <!--头部-->
+    <header v-if="header" class="nm-box-header">
+      <slot name="header">
+        <div v-if="icon" class="nm-box-header-icon">
+          <nm-icon v-if="icon" :name="icon" />
+        </div>
+        <!--标题-->
+        <div class="nm-box-header-title">
+          <slot name="title">{{ title }}</slot>
+        </div>
+        <!--工具栏之前-->
+        <div class="nm-box-header-toobar-before">
+          <slot name="toolbar-before" />
+        </div>
+        <!--工具栏-->
+        <div ref="toolbar" class="nm-box-header-toolbar">
+          <!--工具栏插槽-->
+          <slot name="toolbar" />
+          <!--刷新按钮-->
+          <nm-button v-if="refresh" icon="refresh" @click="onRefresh" />
+          <!--折叠按钮-->
+          <nm-button v-if="collapse" :icon="collapse_ ? 'angle-down' : 'angle-up'" @click="onCollapse" />
+          <!--全屏按钮-->
+          <nm-button v-if="fullscreen" :icon="fullscreen_ ? 'min' : 'max'" @click="onFullscreen" />
+        </div>
+      </slot>
+    </header>
+    <el-collapse-transition>
+      <section class="nm-box-dialog" v-show="!collapse_">
+        <section class="nm-box-content">
+          <section class="nm-box-wrapper" v-if="hasScrollbar">
+            <nm-scrollbar ref="scrollbar" :horizontal="horizontal">
+              <slot />
+            </nm-scrollbar>
+          </section>
+          <slot v-else />
+        </section>
+        <footer v-if="footer" :class="['nm-box-footer', footerAlign]">
+          <slot name="footer"></slot>
+        </footer>
+      </section>
+    </el-collapse-transition>
+  </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)
+      }
+      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
+    }
+  },
+  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')
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,43 @@
+<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"
+  >
+    <slot />
+  </section>
+</template>
+<script>
+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
+    }
+  },
+  computed: {
+    style() {
+      return {
+        paddingLeft: this.$parent.gutter_,
+        paddingRight: this.$parent.gutter_
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <section ref="row" class="nm-box-row" :style="{ height }">
+    <slot />
+  </section>
+</template>
+<script>
+export default {
+  name: 'BoxRow',
+  props: {
+    /** 间隔 */
+    gutter: {
+      type: Number,
+      default: 5
+    },
+    /** 高度 */
+    height: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    gutter_() {
+      return this.gutter / 2 + 'px'
+    }
+  }
+}
+</script>