haiwei-ui 1.0.1 → 1.0.3

package/.prettierrc

@@ -1,6 +1,8 @@
 {
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true,
-    "printWidth": 200
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 500,
+  "vueIndentScriptAndStyle": true,
+  "htmlWhitespaceSensitivity": "ignore"
 }

package/README.md

@@ -1,23 +1,107 @@
 # HaiWei.UI
 
-HaiWei.UI是业务模块化前端快速开发框架，基于Vue2全家桶+ElementUI开发，结合实际场景，封装了几十个组件，同时支持自定义皮肤和登录页功能，用户能够灵活的进行自定义。
+HaiWei.UI 是一个基于 Vue2 + ElementUI 的业务模块化前端快速开发框架，提供丰富的组件库和灵活的模块化架构，帮助开发者快速构建企业级应用。
 
-模块通过npm私服分发与集成，极大的提高了模块的复用。
+## 主要特性
 
-## Demo(示例)
+### 🎯 核心架构
+- **模块化设计** - 支持业务模块的独立开发和集成
+- **组件化开发** - 基于 Vue2 的组件化开发模式
+- **统一状态管理** - 使用 Vuex 进行全局状态管理
+- **路由管理** - 支持动态路由和权限控制
 
-[https://demo.17mkh.com/](https://demo.17mkh.com/)  
-Account: admin  
-Password: admin
+### 🎨 UI 组件库
+- **基础组件** - 丰富的表单、表格、弹窗等基础组件
+- **业务组件** - 针对常见业务场景封装的专用组件
+- **布局组件** - 灵活的页面布局和导航组件
+- **图表组件** - 数据可视化图表组件
 
-## Documentation(文档)
+### 🔧 开发工具
+- **开发服务器** - 内置开发服务器，支持热重载
+- **构建工具** - 基于 Vue CLI 的现代化构建流程
+- **代码规范** - 集成 ESLint 和 Prettier 代码规范
+- **TypeScript 支持** - 可选 TypeScript 支持
 
-For full documentation please see [https://docs.17mkh.com/frendEnd/DevEnvironment.html](https://docs.17mkh.com/frendEnd/DevEnvironment.html)
+### 🛠️ 功能模块
+- **权限管理** - 基于角色的权限控制系统
+- **皮肤主题** - 支持自定义皮肤和主题切换
+- **登录页面** - 可定制的登录页面组件
+- **数据管理** - 统一的数据请求和状态管理
 
-## 启动
+### 📦 部署与发布
+- **npm 发布** - 支持作为 npm 包发布和分发
+- **模块集成** - 模块化的集成和依赖管理
+- **构建优化** - 生产环境构建优化和代码压缩
 
-```js
-npm i
+## 快速开始
 
+### 环境要求
+- Node.js >= 12.0.0
+- npm >= 6.0.0
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 开发模式
+```bash
 npm run serve
 ```
+
+### 构建生产版本
+```bash
+npm run build
+```
+
+### 代码检查
+```bash
+npm run lint
+```
+
+## 项目结构
+
+```
+haiwei-ui/
+├── packages/          # 核心包目录
+│   ├── components/    # 组件库
+│   ├── router/        # 路由配置
+│   ├── store/         # 状态管理
+│   ├── styles/        # 样式文件
+│   └── utils/         # 工具函数
+├── src/               # 源码目录
+├── public/            # 静态资源
+└── script/            # 构建脚本
+```
+
+## 可用脚本
+
+- `npm run serve` - 启动开发服务器
+- `npm run build` - 构建生产版本
+- `npm run lint` - 代码规范检查
+- `npm run i` - 使用淘宝镜像安装依赖
+- `npm run up` - 使用淘宝镜像更新依赖
+- `npm run pub` - 发布到 npm
+- `npm run cm` - 清理 node_modules 和 dist 目录
+- `npm run cc` - 清理 npm 缓存
+
+## 技术栈
+
+- **前端框架**: Vue 2.x
+- **UI 组件库**: Element UI
+- **状态管理**: Vuex
+- **路由管理**: Vue Router
+- **构建工具**: Vue CLI
+- **包管理**: npm
+
+## 浏览器支持
+
+支持现代浏览器和 IE11+。
+
+## 许可证
+
+ISC License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！

package/package.json

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

package/packages/components/list/components/querybar/index.vue

@@ -64,7 +64,9 @@ export default {
   data() {
     return {
       // 是否显示高级查询
-      showAdvanced: false
+      showAdvanced: false,
+      // 动态计算的高度
+      dynamicHeight: ''
     }
   },
   props: {
@@ -104,17 +106,23 @@ export default {
     advancedStyle() {
       return {
         width: this.advanced_.width,
-        height: this.advanced_.height
+        height: this.advanced_.height || this.dynamicHeight
       }
     }
   },
   methods: {
-    query() {
+    query() { 
       this.$parent.page.index = 1
       this.$parent.query()
+      // 如果高级查询框显示，重新计算高度
+      if (this.showAdvanced && !this.advanced_.height) {
+        this.$nextTick(() => {
+          this.calculateAdvancedHeight()
+        })
+      }
     },
     /** 表单重置 */
-    reset() {
+    reset() { 
       if (this.$refs.normalForm) {
         this.$refs.normalForm.reset()
       }
@@ -126,6 +134,25 @@ export default {
     validate(action) {
       return this.$refs.normalForm.validate(action)
     },
+    /** 计算高级查询框高度 */
+    calculateAdvancedHeight() {
+      if (!this.$refs.advancedBox) return
+      
+      const $box = this.$refs.advancedBox
+      const boxHeader = $box.querySelector('.nm-box-header')?.offsetHeight || 0
+      const boxFooter = $box.querySelector('.nm-box-footer')?.offsetHeight || 0
+      const form = $box.querySelector('.nm-form')
+      if (!form) return
+      
+      let boxHeight = form.offsetHeight + boxHeader + boxFooter + 20
+      if (!this.advanced_.inline) {
+        boxHeight += 20
+      }
+      $box.style.height = boxHeight + 'px'
+      // 保存动态计算的高度，避免后续样式被覆盖
+      this.dynamicHeight = boxHeight + 'px'
+    },
+
     /** 高级查询按钮点击事件 */
     onAdvancedClick() {
       this.showAdvanced = !this.showAdvanced
@@ -152,13 +179,7 @@ export default {
 
           // 设置高度
           if (!this.advanced_.height) {
-            const boxHeader = $box.querySelector('.nm-box-header').offsetHeight
-            const boxFooter = $box.querySelector('.nm-box-footer').offsetHeight
-            let boxHeight = $box.querySelector('.nm-form').offsetHeight + boxHeader + boxFooter + 20
-            if (!this.advanced_.inline) {
-              boxHeight += 20
-            }
-            $box.style.height = boxHeight + 'px'
+            this.calculateAdvancedHeight()
           }
         })
       }

package/packages/components/list/index.vue

@@ -260,7 +260,7 @@ export default {
     /**合计行文本 */
     sumText: String,
     /**合计行自定义逻辑方法 */
-    summaryMethod: Function
+    summaryMethod: Function 
   },
   computed: {
     ...mapState('app/loading', { loadingText_: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
@@ -280,7 +280,7 @@ export default {
   },
   methods: {
     /** 查询方法 */
-    query() {
+    query() { 
       if (this.$refs.querybar) {
         this.$refs.querybar.validate(() => {
           this.doQuery()
@@ -292,26 +292,21 @@ export default {
     doQuery() {
       if (this.loading_) {
         return
-      }
-
+      }  
       this.loading_ = true
-      let fullModel = Object.assign({}, this.model)
-
+      let fullModel = Object.assign({}, this.model) 
       // 设置分页
-      fullModel.page = this.page
-
+      fullModel.page = this.page  
       this.action(fullModel)
-        .then(data => {
-          this.rows = data.rows
+        .then(data => { 
+          this.rows = data.rows 
           this.total = data.total
-          this.data = data.data
-
+          this.data = data.data 
           // 回到顶部
           this.$refs.table.scrollTop()
           // 重新绘制布局
           this.$refs.table.doLayout()
-          this.loading_ = false
-
+          this.loading_ = false 
           if (this.noClearSelection) {
             this.$nextTick(() => {
               this.rows.forEach(m => {

package/src/api/config.js

@@ -3,7 +3,7 @@ const getUI = () => {
     resolve({
       system: {
         /** 标题 */
-        title: 'NetModular前端文档',
+        title: 'UI',
         /** logo */
         logo: '',
         /** 用户信息页(路由名称) */

package/src/components/code-preview/index.vue

@@ -10,68 +10,68 @@
   </div>
 </template>
 <script>
-export default {
-  data() {
-    return {
-      visible: false,
-      drawer: {
-        header: true,
-        title: '代码预览',
-        icon: 'preview',
-        width: '50%',
-        draggable: true
-      },
-      timer: null
-    }
-  },
-  props: ['code'],
-  methods: {
-    onCBtnlick() {
-      this.visible = !this.visible
-    },
-    run() {
-      window.addEventListener('message', this.receiveMessage, false)
-      const runUrl = window.location.href.split('#')[0] + '#/run'
-      const runWindow = window.open(runUrl, '_blank')
-      this.timer = setInterval(() => {
-        runWindow.postMessage(this.code, runUrl)
-      }, 300)
+  export default {
+    data() {
+      return {
+        visible: false,
+        drawer: {
+          header: true,
+          title: '代码预览',
+          icon: 'preview',
+          width: '50%',
+          draggable: true
+        },
+        timer: null
+      }
     },
-    receiveMessage(event) {
-      if (this.timer && event.origin === window.location.origin) {
-        clearInterval(this.timer)
+    props: ['code'],
+    methods: {
+      onCBtnlick() {
+        this.visible = !this.visible
+      },
+      run() {
+        window.addEventListener('message', this.receiveMessage, false)
+        const runUrl = window.location.href.split('#')[0] + '#/run'
+        const runWindow = window.open(runUrl, '_blank')
+        this.timer = setInterval(() => {
+          runWindow.postMessage(this.code, runUrl)
+        }, 300)
+      },
+      receiveMessage(event) {
+        if (this.timer && event.origin === window.location.origin) {
+          clearInterval(this.timer)
+        }
       }
     }
   }
-}
 </script>
 <style lang="scss">
-.nm-code-preview {
-  &-btn {
-    padding: 0;
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    width: 44px;
-    height: 44px;
-    line-height: 44px;
-    border-radius: 22px;
-    font-size: 1.5rem;
-    text-align: center;
-    z-index: 9999;
-    transition: all 0.3s ease-in-out;
-  }
-}
-.nm-code-preview-drawer {
-  .nm-drawer-modal,
-  .nm-drawer-dialog {
-    z-index: 9998;
-  }
-  .el-scrollbar__wrap {
-    background: #2b2b2b;
+  .nm-code-preview {
+    &-btn {
+      padding: 0;
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+      width: 44px;
+      height: 44px;
+      line-height: 44px;
+      border-radius: 22px;
+      font-size: 1.5rem;
+      text-align: center;
+      z-index: 9999;
+      transition: all 0.3s ease-in-out;
+    }
   }
-  .el-scrollbar__view {
-    padding: 0;
+  .nm-code-preview-drawer {
+    .nm-drawer-modal,
+    .nm-drawer-dialog {
+      z-index: 9998;
+    }
+    .el-scrollbar__wrap {
+      background: #2b2b2b;
+    }
+    .el-scrollbar__view {
+      padding: 0;
+    }
   }
-}
 </style>

package/src/components/tmpl/components/attributes/index.vue

@@ -13,7 +13,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/components/events/index.vue

@@ -9,7 +9,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/components/methods/index.vue

@@ -9,7 +9,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/components/slots/index.vue

@@ -8,7 +8,7 @@
   </section>
 </template>
 <script>
-export default {
-  props: ['data']
-}
+  export default {
+    props: ['data']
+  }
 </script>

package/src/components/tmpl/index.vue

@@ -24,54 +24,54 @@
   </nm-container>
 </template>
 <script>
-import NmAttributes from './components/attributes'
-import NmMethods from './components/methods'
-import NmEvents from './components/events'
-import NmSlots from './components/slots'
-export default {
-  name: 'Tmpl',
-  components: { NmAttributes, NmMethods, NmEvents, NmSlots },
-  props: {
-    title: {
-      type: String
-    },
-    icon: {
-      type: String
-    },
-    attrs: {
-      type: Array
-    },
-    slots: {
-      type: Array
-    },
-    methods: {
-      type: Array
-    },
-    events: {
-      type: Array
+  import NmAttributes from './components/attributes'
+  import NmMethods from './components/methods'
+  import NmEvents from './components/events'
+  import NmSlots from './components/slots'
+  export default {
+    name: 'Tmpl',
+    components: { NmAttributes, NmMethods, NmEvents, NmSlots },
+    props: {
+      title: {
+        type: String
+      },
+      icon: {
+        type: String
+      },
+      attrs: {
+        type: Array
+      },
+      slots: {
+        type: Array
+      },
+      methods: {
+        type: Array
+      },
+      events: {
+        type: Array
+      }
     }
   }
-}
 </script>
 <style lang="scss">
-.nm-tmpl {
-  &-box {
-    margin-bottom: 30px;
-    &-title {
-      margin: 10px 0;
-      font-size: 25px;
+  .nm-tmpl {
+    &-box {
+      margin-bottom: 30px;
+      &-title {
+        margin: 10px 0;
+        font-size: 25px;
+      }
+    }
+    .el-alert__title {
+      font-size: 17px;
     }
-  }
-  .el-alert__title {
-    font-size: 17px;
-  }
 
-  .el-alert__description {
-    margin-top: 10px;
-    font-size: 15px;
-    p {
-      margin-bottom: 10px;
+    .el-alert__description {
+      margin-top: 10px;
+      font-size: 15px;
+      p {
+        margin-bottom: 10px;
+      }
     }
   }
-}
 </style>

package/src/style/element-ui.scss

@@ -1,11 +1,11 @@
 .el-alert {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .el-row {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
 }
 
 .el-button-group {
-    margin-right: 15px;
-}
+  margin-right: 15px;
+}

package/src/views/components/advanced/details/_index/index.vue

@@ -2,23 +2,23 @@
   <nm-tmpl v-bind="tmpl"></nm-tmpl>
 </template>
 <script>
-import page from './page.js'
-import attrs from './data/attrs.js'
-import slots from './data/slots.js'
-export default {
-  name: page.name,
-  data() {
-    return {
-      tmpl: {
-        title: '详情页(nm-details)',
-        icon: 'detail',
-        attrs,
-        slots
+  import page from './page.js'
+  import attrs from './data/attrs.js'
+  import slots from './data/slots.js'
+  export default {
+    name: page.name,
+    data() {
+      return {
+        tmpl: {
+          title: '详情页(nm-details)',
+          icon: 'detail',
+          attrs,
+          slots
+        }
       }
+    },
+    created() {
+      this.setTabName(this.tmpl.title)
     }
-  },
-  created() {
-    this.setTabName(this.tmpl.title)
   }
-}
 </script>