hbte-saas-ui 0.0.1

package/packages/full-table/src/main.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="hb-fulltable" :style="`height: ${height}`">
+    <div class="hb-fulltable__body">
+      <hb-table
+        class="hb-fulltable__body--inner"
+        ref="table"
+        v-bind="$attrs"
+        :tableData="tableData"
+        :columns="columns"
+        v-on="$listeners"
+      >
+        <template v-for="(item, index) in columns">
+          <!-- 插槽项转发 -->
+          <template :slot="item.prop" :index="index">
+            <slot :name="item.prop" :column="item"></slot>
+          </template>
+        </template>
+      </hb-table>
+    </div>
+    <div class="hb-fulltable__footer" v-if="paging">
+      <hb-pagination
+        :columns="columns"
+        :pageData="pageData"
+        :pageSizes="pageSizes"
+        :showFilter="showFilter"
+        :placement="placement"
+        :disabledFilter="disabledFilter"
+        @pageSizeChange="handlePageSizeChange"
+        @pageNumChange="handlePageNumChange"
+        @columnsChange="handleColumnsChange"
+      >
+      </hb-pagination>
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * fulltable
+ * 仅仅是组合pager、filterDrop和table，使其公用一个columns
+ */
+import CONFIG from "./config";
+
+export default {
+  name: "HbFulltable",
+  componentName: "HbFulltable",
+  props: {
+    /** 高度值样式语句 */
+    height: {
+      type: String,
+      default: () => "100%",
+    },
+    /** 列配置 */
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    /** 表格主体数据 */
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    /** 是否启用分页,启用的话，即使是静态表格，也会进行分页 */
+    paging: {
+      type: Boolean,
+      default: () => CONFIG.defPaging,
+    },
+    /** 分页配置 */
+    pageData: {
+      type: Object,
+      default: () => CONFIG.defPageData,
+    },
+    pageSizes: {
+      type: Array,
+      default: () => CONFIG.defPageSizes,
+    },
+    /** 列过滤、顺序配置 */
+    showFilter: {
+      type: Boolean,
+      default: () => CONFIG.defShowFilter,
+    },
+    placement: {
+      type: String,
+      default: "bottom-end",
+    },
+    disabledFilter: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    /** api */
+    /**
+     * @function elTable 转发eltable的api：获取vue的el-table元素
+     */
+    elTable() {
+      return this.$refs?.table?.$refs?.table;
+    },
+    /**
+     * @function validateEdit 转发eltable的api：校验编辑单元格
+     */
+    validateEdit() {
+      return this.$refs.table.validateEdit(...arguments);
+    },
+    /** methods */
+    /**
+     * @function 转发表格openLoading
+     */
+    openLoading() {
+      this.$refs.table.openLoading();
+    },
+    /**
+     * @function 转发表格closeLoading
+     */
+    closeLoading() {
+      this.$refs.table.closeLoading();
+    },
+    /** events  */
+    /**
+     * @event handlePageSizeChange 条数改变等
+     */
+    handlePageSizeChange(size) {
+      this.$emit("pageSizeChange", size);
+    },
+    /**
+     * @event handlePageSizeChange 页码改变等
+     */
+    handlePageNumChange(num) {
+      this.$emit("pageNumChange", num);
+    },
+    /**
+     * @event handleColumnsChange 切换列顺序、显示
+     */
+    handleColumnsChange(newColumns) {
+      this.$emit("columnsChange", newColumns);
+    },
+  },
+};
+</script>

package/packages/image-viewer/index.js

@@ -0,0 +1,8 @@
+import HbImageViewer from "./src/main.vue";
+import hbImageViewer from "./src/main";
+HbImageViewer.install = function (Vue) {
+  Vue.component(HbImageViewer.name, HbImageViewer);
+  Vue.prototype.$hbViewer = hbImageViewer;
+};
+
+export default HbImageViewer;

package/packages/image-viewer/src/main.js

@@ -0,0 +1,14 @@
+import Vue from "vue";
+import imageViewer from "./main.vue";
+let componentConstructor = Vue.extend(imageViewer);
+let instance;
+const hbImageViewer = function (options) {
+  instance = new componentConstructor({
+    data: options,
+  });
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+  return instance;
+};
+
+export default hbImageViewer;

package/packages/image-viewer/src/main.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="hb-image-viewer">
+    <img :src="src" :style="style" @mousedown="drag" />
+    <div class="tool close btn el-icon-close" @click="close"></div>
+    <div class="tool prev btn el-icon-arrow-left" @click="prev"></div>
+    <div class="tool next btn el-icon-arrow-right" @click="next"></div>
+    <div v-show="visible" class="tool size">
+      {{ (scale * 100).toFixed() + "%" }}
+    </div>
+    <div class="tool btn-wrapper">
+      <div class="el-icon-zoom-in btn" @click="changeScale"></div>
+      <div class="el-icon-zoom-out btn" @click="changeScale(false)"></div>
+      <div class="el-icon-refresh btn" @click="changeRotate"></div>
+      <div class="el-icon-full-screen btn" @click="resetScale"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HbImageViewer",
+  componentName: "HbImageViewer",
+  data() {
+    return {
+      visible: false,
+      scale: 1,
+      rotate: 0,
+      left: 0,
+      top: 0,
+      eventName: "", //兼容火狐
+      callBack: null,
+    };
+  },
+  created() {
+    this.bindEvent();
+  },
+  destroyed() {
+    document.removeEventListener(this.eventName, this.callBack);
+    document.onkeyup = null;
+    this.eventName = "";
+    this.callBack = null;
+  },
+  methods: {
+    wheelCallBack(ev) {
+      if (ev.detail) {
+        this.changeScale(ev.detail > 0);
+      } else {
+        this.changeScale(ev.wheelDelta < 0);
+      }
+    },
+    bindEvent() {
+      let ua = navigator.userAgent;
+      this.callBack = this.wheelCallBack.bind(this);
+      if (/firefox/i.test(ua)) {
+        this.eventName = "DOMMouseScroll";
+      } else {
+        this.eventName = "mousewheel";
+      }
+      document.addEventListener(this.eventName, this.callBack);
+      document.onkeyup = (ev) => {
+        if (ev.keyCode === 39) {
+          this.next();
+        } else if (ev.keyCode === 37) {
+          this.prev();
+        } else if (ev.keyCode === 27) {
+          this.close();
+        }
+      };
+    },
+    close() {
+      this.$destroy(true);
+      this.$el.parentNode.removeChild(this.$el);
+    },
+    next() {
+      this.activeIndex += 1;
+      this.activeIndex = Math.min(this.activeIndex, this.urls.length - 1);
+    },
+    prev() {
+      this.activeIndex -= 1;
+      this.activeIndex = Math.max(this.activeIndex, 0);
+    },
+    clear() {
+      this.scale = 1;
+      this.left = this.top = this.rotate = 0;
+    },
+    drag(ev) {
+      let body = document.body;
+      body.style.cursor = "move";
+      document.onmousemove = (ev) => {
+        this.left += ev.movementX;
+        this.top += ev.movementY;
+      };
+      document.onmouseup = () => {
+        body.style.cursor = "auto";
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+      ev.preventDefault();
+    },
+    resetScale() {
+      this.scale = 1;
+      this.left = this.top = 0;
+    },
+    changeScale(boolean = true) {
+      let target = (this.scale += boolean ? 0.1 : -0.1);
+      this.scale = target;
+      this.scale = Math.min(10, this.scale);
+      this.scale = Math.max(0.1, this.scale);
+    },
+    changeRotate() {
+      let target = this.rotate + 90;
+      this.rotate = target > 360 ? target - 360 : target;
+    },
+  },
+  computed: {
+    src() {
+      return this.urls[this.activeIndex];
+    },
+    style() {
+      return {
+        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
+        top: `${this.top}px`,
+        left: `${this.left}px`,
+      };
+    },
+  },
+  watch: {
+    src: function () {
+      this.clear();
+    },
+    scale: function () {
+      this.visible = true;
+      setTimeout(() => {
+        this.visible = false;
+      }, 500);
+    },
+  },
+};
+</script>

package/packages/image-viewer/src/svg/cancel.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656468391764" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23111" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M566.613 512l223.574-223.573c15.36-15.36 15.36-39.254 0-54.614s-39.254-15.36-54.614 0L512 457.387 288.427 233.813c-15.36-15.36-39.254-15.36-54.614 0s-15.36 39.254 0 54.614L457.387 512 233.813 733.867c-15.36 15.36-15.36 39.253 0 54.613 6.827 6.827 17.067 11.947 27.307 11.947s20.48-3.414 27.307-11.947L512 564.907 733.867 788.48c6.826 6.827 17.066 11.947 27.306 11.947s20.48-3.414 27.307-11.947c15.36-15.36 15.36-39.253 0-54.613L566.613 512z" p-id="23112"></path></svg>

package/packages/image-viewer/src/svg/delete.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656468353878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15112" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M933.547 203.093H665.6v-25.6c0-78.506-63.147-143.36-141.653-143.36h-20.48c-78.507 0-143.36 64.854-143.36 143.36v25.6H90.453c-18.773 0-34.133 15.36-34.133 34.134s15.36 34.133 34.133 34.133h64.854v568.32c0 83.627 68.266 150.187 150.186 150.187h409.6c83.627 0 150.187-68.267 150.187-150.187V271.36h64.853c18.774 0 34.134-15.36 34.134-34.133s-11.947-34.134-30.72-34.134z m-505.174-25.6c0-40.96 34.134-75.093 75.094-75.093h20.48c40.96 0 75.093 34.133 75.093 75.093v25.6H428.373v-25.6zM798.72 839.68c0 46.08-37.547 81.92-81.92 81.92H307.2c-46.08 0-81.92-37.547-81.92-81.92V271.36h575.147v568.32z" p-id="15113"></path><path d="M361.813 723.627c-18.773 0-34.133-15.36-34.133-34.134V450.56c0-18.773 15.36-34.133 34.133-34.133s34.134 15.36 34.134 34.133v238.933c0 18.774-15.36 34.134-34.134 34.134zM512 773.12c-18.773 0-34.133-15.36-34.133-34.133V397.653c0-18.773 15.36-34.133 34.133-34.133s34.133 15.36 34.133 34.133v341.334c0 18.773-15.36 34.133-34.133 34.133z m143.36-49.493c-18.773 0-34.133-15.36-34.133-34.134V450.56c0-18.773 15.36-34.133 34.133-34.133s34.133 15.36 34.133 34.133v238.933c0 18.774-15.36 34.134-34.133 34.134z" p-id="15114"></path></svg>

package/packages/image-viewer/src/svg/download.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656468348414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14973" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M964.267 375.467c-18.774 0-34.134 15.36-34.134 34.133v436.907c0 47.786-37.546 87.04-83.626 87.04l-669.014 3.413c-46.08 0-83.626-39.253-83.626-87.04V411.307c0-18.774-15.36-34.134-34.134-34.134S25.6 392.533 25.6 411.307v436.906c0 85.334 68.267 155.307 151.893 155.307l669.014-3.413c83.626 0 151.893-69.974 151.893-155.307V409.6c0-20.48-15.36-34.133-34.133-34.133z" p-id="14974"></path><path d="M493.227 738.987c10.24 10.24 27.306 10.24 37.546 0L665.6 597.333a25.295 25.295 0 0 0-18.773-42.666H546.133V71.68c0-18.773-15.36-34.133-34.133-34.133s-34.133 15.36-34.133 34.133v484.693H377.173c-22.186 0-34.133 27.307-18.773 42.667l134.827 139.947z" p-id="14975"></path></svg>

package/packages/image-viewer/src/svg/rotate.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;}
+	.st1{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
+	.st2{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st3{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:4.038,4.038;}
+	.st4{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
+	.st7{fill:#F2F2F2;}
+	.st8{fill:none;stroke:#999999;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st9{fill-rule:evenodd;clip-rule:evenodd;}
+	.st10{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st11{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st12{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st13{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st14{fill:none;}
+	.st15{clip-path:url(#SVGID_3_);}
+	.st16{fill:#F7F9FF;}
+	.st17{clip-path:url(#SVGID_5_);}
+	.st18{fill:#DBE7FF;}
+	.st19{fill:#F9E3CE;}
+	.st20{fill:#FFE9CF;}
+	.st21{fill:#9999A5;}
+	.st22{fill:#F2F8FF;}
+	.st23{fill:#736352;}
+	.st24{fill:#E6E6E6;}
+	.st25{fill:#F5F5F5;}
+	.st26{fill:#FDE9E2;}
+	.st27{fill:#FEBDB2;}
+	.st28{fill:#FDE8E5;}
+	.st29{fill:#DFDFDF;}
+	.st30{fill:#E5E5E5;}
+	.st31{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
+	.st32{fill:#CFCFCF;}
+	.st33{fill:#BDBDBD;}
+	.st34{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st35{fill:#FFFFFF;stroke:#DFDFDF;stroke-width:2;stroke-miterlimit:10;}
+	.st36{fill:none;stroke:#DFDFDF;stroke-width:2;stroke-miterlimit:10;}
+	.st37{fill:#38CADF;}
+	.st38{fill:#FE854F;}
+	.st39{fill:#4F8FFE;}
+	.st40{fill:#FF6969;}
+	.st41{fill:#6C72E9;}
+	.st42{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+	.st43{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st44{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st45{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
+	.st46{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st47{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st48{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;}
+	.st49{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
+	.st50{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:2;}
+	.st51{fill:none;stroke:#000000;stroke-width:3;stroke-linejoin:round;}
+	.st52{fill:none;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st53{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;}
+	.st54{clip-path:url(#SVGID_7_);}
+	.st55{fill:none;stroke:#040000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st56{clip-path:url(#SVGID_9_);}
+</style>
+<g>
+	<path d="M39.29,29.84H6.09c-1.1,0-2,0.9-2,2V56c0,1.1,0.9,2,2,2h33.2c1.1,0,2-0.9,2-2V31.84C41.29,30.74,40.4,29.84,39.29,29.84z
+		 M37.29,54H8.09V33.84h29.2V54z"/>
+	<path d="M50.21,23.13c-5.44-7.41-13.82-11.79-23.01-12.02l-3.09-0.38l6.99-5.13c0.89-0.65,1.08-1.9,0.43-2.79
+		c-0.65-0.89-1.9-1.08-2.79-0.43L17.67,10.5c-0.01,0.01-0.02,0.02-0.03,0.03c-0.04,0.03-0.07,0.06-0.1,0.09
+		c-0.06,0.06-0.13,0.11-0.18,0.17c-0.03,0.04-0.06,0.08-0.09,0.12c-0.05,0.06-0.1,0.12-0.13,0.19c-0.03,0.05-0.05,0.11-0.08,0.17
+		c-0.03,0.06-0.06,0.12-0.08,0.19c-0.02,0.06-0.03,0.12-0.05,0.19c-0.01,0.06-0.04,0.11-0.04,0.17c0,0.01,0,0.02,0,0.03
+		c0,0.01-0.01,0.02-0.01,0.03c-0.01,0.05,0,0.11,0,0.16c0,0.07-0.01,0.14,0,0.21c0,0.07,0.02,0.13,0.03,0.2
+		c0.01,0.06,0.02,0.12,0.03,0.18c0.02,0.07,0.04,0.13,0.07,0.2c0.02,0.06,0.04,0.11,0.07,0.16c0.03,0.07,0.08,0.13,0.12,0.2
+		c0.02,0.04,0.04,0.08,0.07,0.11l8.11,11.06c0.39,0.53,1,0.82,1.61,0.82c0.41,0,0.82-0.13,1.18-0.39c0.89-0.65,1.08-1.91,0.43-2.79
+		l-5.38-7.33l3.61,0.44c0.07,0.01,0.13,0.01,0.2,0.01c7.98,0.17,15.26,3.96,19.97,10.38c3.46,4.71,5.2,10.52,4.89,16.34
+		c-0.06,1.1,0.79,2.04,1.89,2.1c0.04,0,0.07,0,0.11,0c1.06,0,1.94-0.83,2-1.9C56.22,35.31,54.21,28.59,50.21,23.13z"/>
+</g>
+</svg>

package/packages/image-viewer/src/svg/scaledown.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;}
+	.st1{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
+	.st2{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st3{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:4.038,4.038;}
+	.st4{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
+	.st7{fill:#F2F2F2;}
+	.st8{fill:none;stroke:#999999;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st9{fill-rule:evenodd;clip-rule:evenodd;}
+	.st10{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st11{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st12{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st13{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st14{fill:none;}
+	.st15{clip-path:url(#SVGID_3_);}
+	.st16{fill:#F7F9FF;}
+	.st17{clip-path:url(#SVGID_5_);}
+	.st18{fill:#DBE7FF;}
+	.st19{fill:#F9E3CE;}
+	.st20{fill:#FFE9CF;}
+	.st21{fill:#9999A5;}
+	.st22{fill:#F2F8FF;}
+	.st23{fill:#736352;}
+	.st24{fill:#E6E6E6;}
+	.st25{fill:#F5F5F5;}
+	.st26{fill:#FDE9E2;}
+	.st27{fill:#FEBDB2;}
+	.st28{fill:#FDE8E5;}
+	.st29{fill:#DFDFDF;}
+	.st30{fill:#E5E5E5;}
+	.st31{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
+	.st32{fill:#CFCFCF;}
+	.st33{fill:#BDBDBD;}
+	.st34{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st35{fill:#FFFFFF;stroke:#DFDFDF;stroke-width:2;stroke-miterlimit:10;}
+	.st36{fill:none;stroke:#DFDFDF;stroke-width:2;stroke-miterlimit:10;}
+	.st37{fill:#38CADF;}
+	.st38{fill:#FE854F;}
+	.st39{fill:#4F8FFE;}
+	.st40{fill:#FF6969;}
+	.st41{fill:#6C72E9;}
+	.st42{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+	.st43{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st44{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st45{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
+	.st46{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st47{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st48{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;}
+	.st49{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
+	.st50{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:2;}
+	.st51{fill:none;stroke:#000000;stroke-width:3;stroke-linejoin:round;}
+	.st52{fill:none;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st53{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;}
+	.st54{clip-path:url(#SVGID_7_);}
+	.st55{fill:none;stroke:#040000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st56{clip-path:url(#SVGID_9_);}
+</style>
+<g>
+	<path d="M35.72,25.44H19.17c-1.1,0-2,0.9-2,2s0.9,2,2,2h16.55c1.1,0,2-0.9,2-2S36.82,25.44,35.72,25.44z"/>
+	<path d="M57.41,54.59L46.78,43.95c3.8-4.45,6.11-10.21,6.11-16.51C52.89,13.41,41.47,2,27.44,2C13.41,2,2,13.41,2,27.44
+		c0,14.03,11.41,25.44,25.44,25.44c6.3,0,12.06-2.3,16.51-6.11l10.63,10.63C54.98,57.8,55.49,58,56,58s1.02-0.2,1.41-0.59
+		C58.2,56.63,58.2,55.37,57.41,54.59z M6,27.44C6,15.62,15.62,6,27.44,6s21.44,9.62,21.44,21.44s-9.62,21.44-21.44,21.44
+		S6,39.27,6,27.44z"/>
+</g>
+</svg>

package/packages/image-viewer/src/svg/scaleup.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;}
+	.st1{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
+	.st2{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st3{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:4.038,4.038;}
+	.st4{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
+	.st7{fill:#F2F2F2;}
+	.st8{fill:none;stroke:#999999;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st9{fill-rule:evenodd;clip-rule:evenodd;}
+	.st10{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st11{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st12{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st13{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st14{fill:none;}
+	.st15{clip-path:url(#SVGID_3_);}
+	.st16{fill:#F7F9FF;}
+	.st17{clip-path:url(#SVGID_5_);}
+	.st18{fill:#DBE7FF;}
+	.st19{fill:#F9E3CE;}
+	.st20{fill:#FFE9CF;}
+	.st21{fill:#9999A5;}
+	.st22{fill:#F2F8FF;}
+	.st23{fill:#736352;}
+	.st24{fill:#E6E6E6;}
+	.st25{fill:#F5F5F5;}
+	.st26{fill:#FDE9E2;}
+	.st27{fill:#FEBDB2;}
+	.st28{fill:#FDE8E5;}
+	.st29{fill:#DFDFDF;}
+	.st30{fill:#E5E5E5;}
+	.st31{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
+	.st32{fill:#CFCFCF;}
+	.st33{fill:#BDBDBD;}
+	.st34{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st35{fill:#FFFFFF;stroke:#DFDFDF;stroke-width:2;stroke-miterlimit:10;}
+	.st36{fill:none;stroke:#DFDFDF;stroke-width:2;stroke-miterlimit:10;}
+	.st37{fill:#38CADF;}
+	.st38{fill:#FE854F;}
+	.st39{fill:#4F8FFE;}
+	.st40{fill:#FF6969;}
+	.st41{fill:#6C72E9;}
+	.st42{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+	.st43{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st44{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st45{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
+	.st46{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:2;}
+	.st47{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st48{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;}
+	.st49{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
+	.st50{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:2;}
+	.st51{fill:none;stroke:#000000;stroke-width:3;stroke-linejoin:round;}
+	.st52{fill:none;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st53{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;}
+	.st54{clip-path:url(#SVGID_7_);}
+	.st55{fill:none;stroke:#040000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st56{clip-path:url(#SVGID_9_);}
+</style>
+<g>
+	<path d="M35.72,25.44h-6.27v-6.27c0-1.1-0.9-2-2-2s-2,0.9-2,2v6.27h-6.27c-1.1,0-2,0.9-2,2s0.9,2,2,2h6.27v6.27c0,1.1,0.9,2,2,2
+		s2-0.9,2-2v-6.27h6.27c1.1,0,2-0.9,2-2S36.82,25.44,35.72,25.44z"/>
+	<path d="M57.41,54.59L46.78,43.95c3.8-4.45,6.11-10.21,6.11-16.51C52.89,13.41,41.47,2,27.44,2S2,13.41,2,27.44
+		c0,14.03,11.41,25.44,25.44,25.44c6.3,0,12.06-2.3,16.51-6.11l10.63,10.63C54.98,57.8,55.49,58,56,58s1.02-0.2,1.41-0.59
+		C58.2,56.63,58.2,55.37,57.41,54.59z M6,27.44C6,15.62,15.62,6,27.44,6c11.82,0,21.44,9.62,21.44,21.44s-9.62,21.44-21.44,21.44
+		C15.62,48.89,6,39.27,6,27.44z"/>
+</g>
+</svg>

package/packages/index.js

@@ -0,0 +1,43 @@
+import hbImageViewer from "./image-viewer/src/main";
+const requireComponents = require.context("./", true, /\.vue$/); // 代替import进行动态引入，webpack中方法
+const modulesArr = require.context("./", true, /[\w-]+?\/index.js$/); // 只取二级目录，避免取到内层不符合文件结构的index.js
+import "./theme-chalk/index.scss";
+// import "@/assets/iconfont/iconfont.css"; // 之后看情况是否需要打包到项目中 不需要就删掉
+// import "@/assets/css/global.scss"; // 之后看情况是否需要打包到项目中  不需要就删掉
+let components = {};
+const install = (Vue) => {
+  if (install.installed) return;
+  // 遍历引入组件
+  requireComponents.keys().forEach((fileName) => {
+    const config = requireComponents(fileName); // 当前组件
+    const componentName = config.default.name; // 获取组件名，即vue文件中的name
+    Vue.component(componentName, config.default); // 注册组件
+  });
+  Vue.prototype.$hbViewer = hbImageViewer;
+};
+
+modulesArr.keys().forEach((key) => {
+  const config = modulesArr(key); // 当前组件
+  components[config.default.componentName] = config.default;
+});
+
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+
+// 为部分能提供业务配置的组件提供全局导入
+const config = (configs) => {
+  if (typeof configs === "object") {
+    for (let key in components) {
+      if (configs[key]) {
+        typeof components[key].config === "function" && components[key].config(configs[key]);
+      }
+    }
+  }
+};
+
+export default {
+  install,
+  config,
+  ...components,
+};

package/packages/nav-menu/index.js

@@ -0,0 +1,7 @@
+import HbNavmenu from "./src/main.vue";
+
+HbNavmenu.install = function (Vue) {
+  Vue.component(HbNavmenu.name, HbNavmenu);
+};
+
+export default HbNavmenu;