br-dionysus 1.6.5 → 1.6.7

package/docs/packages/TabPage/docs/README.md

@@ -0,0 +1,10 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+标签页组件
+=================
+
+<Preview comp-name="TabPage" demo-name="demo">
+  <demo />
+</Preview>

package/docs/packages/TabPage/docs/demo.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="g-demo-tab-page-box">
+    <tab-page
+      v-model="list"
+      :activeKey="activeKey"
+      @close="close($event[0])"
+      @click="open"
+    >
+      <template #icon>
+        <!--<lay-icon-->
+        <!--  v-for="item in list"-->
+        <!--  :key="item.key"-->
+        <!--  :type="item.icon"-->
+        <!--  :data-key="item.key"-->
+        <!--&gt;</lay-icon>-->
+        <div
+          v-for="item in list"
+          :key="item.key"
+          :type="item.icon"
+          :data-key="item.key"
+        >
+          {{ item.icon }}
+        </div>
+      </template>
+    </tab-page>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const list = ref<any[]>([])
+const activeKey = ref<string | number>('0')
+
+list.value = [{
+  key: '0',
+  title: '要货需求列表',
+  icon: '<i>111</i>'
+}, {
+  key: '1',
+  title: '需求汇总',
+  icon: '<i>222</i>'
+}, {
+  key: '2',
+  title: '要货需求',
+  icon: '<i>333</i>'
+}, {
+  key: '3',
+  title: '需求汇总',
+  icon: '<i>444</i>'
+}, {
+  key: '4',
+  title: '要货需求'
+}, {
+  key: '5',
+  title: '需求汇总'
+}, {
+  key: '6',
+  title: '要货需求'
+}, {
+  key: '7',
+  title: '需求汇总'
+}, {
+  key: '8',
+  title: '要货需求'
+}, {
+  key: '9',
+  title: '需求汇总'
+}, {
+  key: '10',
+  title: '要货需求'
+}, {
+  key: '11',
+  title: '要货需求'
+}, {
+  key: '12',
+  title: '需求汇总'
+}, {
+  key: '13',
+  title: '要货需求'
+}]
+
+const close = (data: string | number) => {
+  list.value = list.value.filter(item => item.key !== data)
+}
+
+const open = (data: string | number) => {
+  activeKey.value = data
+}
+</script>
+
+<style scoped>
+.g-demo-tab-page-box {
+  max-width: 1000px;
+}
+</style>

package/docs/packages/TabPage/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import TabPage from './src/TabPage.vue'
+
+export const TabPagePlugin: Plugin = {
+  install (app: App) {
+    app.component('TabPage', TabPage)
+  }
+}
+
+export { TabPage }

package/docs/packages/TabPage/src/TabPage.vue

@@ -0,0 +1,566 @@
+<template>
+  <div class="g-box">
+    <button
+      class="u-page-btn s-previous-btn"
+      v-if="isHorizontal"
+      @click="previous"
+    >
+      <svg
+        t="1704703004061"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4356"
+        width="16"
+        height="16"
+      >
+        <path
+          d="M671.807 927.804l-415.632-415.804 415.632-415.803 63.445 63.616-352.017 352.209 352.017 352.102z"
+          fill="#272636"
+          p-id="4357"
+        ></path>
+      </svg>
+    </button>
+    <div class="g-dionysus-box">
+      <ul
+        class="g-tab-page-box j-dionysus-list-box"
+        :style="ulStyle"
+        @mouseleave="hoverKey = -1"
+      >
+        <li
+          class="u-li j-li"
+          v-for="item in props.modelValue"
+          :key="item.key"
+          :data-active="props.activeKey === item.key"
+          :data-active-before="activeBeforeKey === item.key"
+          :data-active-after="activeAfterKey === item.key"
+          @mouseenter="hoverKey = item.key"
+          :data-hover="hoverKey === item.key"
+          :data-hover-before="hoverBeforeKey === item.key"
+          :data-hover-after="hoverAfterKey === item.key"
+          @click="openPage(item.key)"
+        >
+          <div class="u-gp">
+            <!--<el-icon class="u-icon">-->
+            <!--  <component :is="item.icon"></component>-->
+            <!--</el-icon>-->
+            <i class="u-icon j-icon">
+              <!--<div v-html="item.icon"></div>-->
+            </i>
+            <!--<div v-html="item.icon"></div>-->
+            <span class="u-sn">{{ item.title }}</span>
+            <div
+              class="u-btn"
+              @click.stop="close([item.key])"
+            >
+              <i class="s-icon"></i>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="u-icon-box">
+      <slot name="icon"></slot>
+    </div>
+    <button
+      class="u-page-btn s-next-btn"
+      v-if="isHorizontal"
+      @click="next"
+    >
+      <svg
+        t="1704703004061"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4356"
+        width="16"
+        height="16"
+      >
+        <path
+          d="M671.807 927.804l-415.632-415.804 415.632-415.803 63.445 63.616-352.017 352.209 352.017 352.102z"
+          fill="#272636"
+          p-id="4357"
+        ></path>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+
+const isContentOverflowing = (element: Element) => {
+  return {
+    horizontal: element.scrollWidth > element.clientWidth,
+    vertical: element.scrollHeight > element.clientHeight
+  }
+}
+
+interface MenuItem {
+  title: string,
+  key: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue?: MenuItem[], // 菜单数组
+  activeKey?: string, // 当前激活key
+  showRightClickMenu?: boolean, // 是否显示右键菜单
+  primaryColor?: string, // 主题色
+  primaryBackgroundColor?: string | null // 主题背景色
+}>(), {
+  modelValue: () => [],
+  activeKey: '',
+  showRightClickMenu: false,
+  primaryColor: '#646CFFFF',
+  primaryBackgroundColor: null
+})
+
+const adjustColor = (hex: string, percent: number = 100) => {
+  hex = hex.replace('#', '').toLowerCase()
+
+  if (hex.length === 3) {
+    hex = hex.split('').map(c => c + c).join('')
+  }
+
+  let r: any = parseInt(hex.substring(0, 2), 16)
+  let g: any = parseInt(hex.substring(2, 4), 16)
+  let b: any = parseInt(hex.substring(4, 6), 16)
+
+  r += Math.round((255 - r) * (percent / 100))
+  g += Math.round((255 - g) * (percent / 100))
+  b += Math.round((255 - b) * (percent / 100))
+
+  r = r.toString(16).padStart(2, '0')
+  g = g.toString(16).padStart(2, '0')
+  b = b.toString(16).padStart(2, '0')
+
+  // 返回十六进制颜色值
+  return `#${r}${g}${b}`
+}
+
+onMounted(() => {
+  document.documentElement.style.setProperty('--br-dionysus-primary-color', props.primaryColor)
+  if (props.primaryBackgroundColor) return false
+  document.documentElement.style.setProperty('--br-dionysus-primary-bg-color', adjustColor(props.primaryColor, 90))
+})
+
+const activeKey = ref(props.activeKey)
+watch(
+  () => props.activeKey,
+  (newVal: string) => {
+    activeKey.value = newVal
+  }
+)
+
+const emit = defineEmits(['close', 'click'])
+
+const list = computed(() => {
+  return props.modelValue.map((item: MenuItem) => {
+    return {
+      key: item.key,
+      title: item.title
+    }
+  })
+})
+
+// 渲染图标
+const renderIcon = () => {
+  list.value.forEach((item, index) => {
+    const className = '.j-dionysus-list-box .j-li:nth-of-type(' + (index + 1) + ') .j-icon'
+    const targetContainer: Element | null = document.querySelector(className)
+    if (!targetContainer || targetContainer.children.length) return false
+    const sourceElement: Element | null = document.querySelector('[data-key="' + item.key + '"]')
+    if (!sourceElement) return false
+    const clonedElement: Node = sourceElement.cloneNode(true)
+    targetContainer.appendChild(clonedElement)
+  })
+}
+
+watch(
+  () => list.value,
+  () => {
+    nextTick(() => {
+      renderIcon()
+    })
+  }
+)
+onMounted(() => {
+  renderIcon()
+})
+
+const isHorizontal = ref(false)
+const horizontalMaxSize = ref(0)
+const horizontalSize = ref(0)
+
+const ulStyle = computed(() => {
+  const size = horizontalSize.value > horizontalMaxSize.value ? horizontalMaxSize.value : horizontalSize.value
+  return {
+    transform: 'translateX(-' + (isHorizontal.value ? size : 0) + 'px)'
+  }
+})
+
+const previous = () => {
+  horizontalSize.value = horizontalSize.value < 300 ? 0 : horizontalSize.value - 300
+}
+
+const next = () => {
+  horizontalSize.value = horizontalSize.value > horizontalMaxSize.value - 300 ? horizontalMaxSize.value : horizontalSize.value + 300
+}
+
+const checkHorizontal = () => {
+  const el = document.querySelector('.g-tab-page-box')
+  if (!el) return false
+  const { horizontal } = isContentOverflowing(el)
+  isHorizontal.value = horizontal
+  if (horizontal) horizontalMaxSize.value = el.scrollWidth - el.clientWidth
+}
+
+watch(
+  () => list.value,
+  () => {
+    nextTick(() => {
+      checkHorizontal()
+    })
+  }
+)
+onMounted(() => {
+  checkHorizontal()
+})
+
+const resizeObserver = new ResizeObserver(() => {
+  checkHorizontal()
+})
+onMounted(() => {
+  const el: Element | null = document.querySelector('.g-tab-page-box')
+  if (!el) return false
+  resizeObserver.observe(el)
+})
+
+const activeBeforeKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === props.activeKey)
+  if (index === -1) return -1
+  return list.value[index - 1]?.key
+})
+const activeAfterKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === props.activeKey)
+  if (index === -1) return -1
+  return list.value[index + 1]?.key
+})
+
+const hoverKey: any = ref(2)
+const hoverBeforeKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === hoverKey.value)
+  if (index === -1) return -1
+  return list.value[index - 1]?.key
+})
+const hoverAfterKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === hoverKey.value)
+  if (index === -1) return -1
+  return list.value[index + 1]?.key
+})
+
+// const contextMenuConfig = [{
+//   title: '关闭当前',
+//   callback () {
+//     close([props.activeKey])
+//   }
+// }, {
+//   title: '关闭其他',
+//   callback () {
+//     const keys = list.value.filter((item: TabPage) => item.key !== props.activeKey).map((item: TabPage) => item.key)
+//     close(keys)
+//   }
+// }, {
+//   title: '关闭右侧',
+//   callback () {
+//     const keys = list.value.slice(list.value.findIndex(item => item.key === props.activeKey) + 1).map(item => item.key)
+//     close(keys)
+//   }
+// }, {
+//   title: '关闭左侧',
+//   callback () {
+//     const keys = list.value.slice(0, list.value.findIndex(item => item.key === props.activeKey)).map(item => item.key)
+//     close(keys)
+//   }
+// }]
+// console.log('contextMenuConfig', contextMenuConfig)
+
+// 打开标签页
+const openPage = (key: string) => {
+  emit('click', key)
+}
+
+// 关闭标签页
+const close = (keys: string[] = []) => {
+  emit('close', keys)
+}
+</script>
+
+<style scoped>
+:root {
+  --br-dionysus-primary-color: #646CFFFF;
+  --br-dionysus-primary-bg-color: #979fff;
+}
+
+.u-icon-box {
+  display: none;
+}
+
+.g-box {
+  position: relative;
+  overflow: hidden;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.g-box .u-page-btn {
+  position: absolute;
+  bottom: 0;
+  height: 33px;
+  border: 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  opacity: 0.6;
+  cursor: pointer;
+}
+
+.g-box .s-previous-btn {
+  left: 0;
+}
+
+.g-box .s-next-btn {
+  right: 0;
+  transform: rotate(180deg);
+}
+
+.g-dionysus-box {
+  overflow: hidden;
+  width: 100%;
+}
+
+.g-tab-page-box {
+  display: flex;
+  color: #4a4a4a;
+  white-space: nowrap;
+  box-sizing: border-box;
+  box-shadow: 2px 0 8px #1d23290d;
+  transform: translateX(0);
+  transition: .2s;
+}
+
+.g-tab-page-box .u-li {
+  display: inline-block;
+  position: relative;
+  height: 33px;
+  font-size: 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  /*hover*/
+  /*激活*/
+}
+
+.g-tab-page-box .u-li .u-gp {
+  display: flex;
+  position: relative;
+  z-index: 1;
+  padding: 6px 8px;
+  height: 100%;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 6px 6px 0 0;
+  box-sizing: border-box;
+}
+
+.g-tab-page-box .u-li .u-gp:after {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px 6px 0 6px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li .u-gp:before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px 6px 6px 0;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li:after {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li:before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li[data-hover="true"] .u-gp, .g-tab-page-box .u-li[data-hover="true"] .u-gp:after, .g-tab-page-box .u-li[data-hover="true"] .u-gp:before, .g-tab-page-box .u-li[data-hover="true"][data-active="false"]:after, .g-tab-page-box .u-li[data-hover="true"][data-active="false"]:before {
+  background-color: #dfe1e5;
+}
+
+.g-tab-page-box .u-li[data-hover-before="true"] .u-gp:after {
+  background-color: #dfe1e5;
+}
+
+.g-tab-page-box .u-li[data-hover-before="true"]:after {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-hover-after="true"] .u-gp:before {
+  background-color: #dfe1e5;
+}
+
+.g-tab-page-box .u-li[data-hover-after="true"]:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active-before="true"] .u-gp:after {
+  background-color: var(--br-dionysus-primary-bg-color);
+}
+
+.g-tab-page-box .u-li[data-active-before="true"]:after {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active-after="true"] .u-gp:before {
+  background-color: var(--br-dionysus-primary-bg-color);
+}
+
+.g-tab-page-box .u-li[data-active-after="true"]:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active="true"] {
+  color: var(--br-dionysus-primary-color);
+}
+
+.g-tab-page-box .u-li[data-active="true"] .u-gp, .g-tab-page-box .u-li[data-active="true"] .u-gp:before, .g-tab-page-box .u-li[data-active="true"] .u-gp:after, .g-tab-page-box .u-li[data-active="true"]:after, .g-tab-page-box .u-li[data-active="true"]:before {
+  background-color: var(--br-dionysus-primary-bg-color);
+}
+
+.g-tab-page-box .u-li .u-icon {
+  margin-right: 8px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li .u-sn {
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li .u-btn {
+  position: relative;
+  margin-left: 4px;
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+  border-radius: 50%;
+}
+
+.g-tab-page-box .u-li .u-btn:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  content: '';
+  border-radius: 50%;
+}
+
+.g-tab-page-box .u-li .u-btn:hover {
+  color: #fff;
+  background-color: #9ca3af;
+}
+
+.g-tab-page-box .u-li[data-active="true"] .u-btn:hover {
+  color: #fff;
+  background-color: var(--br-dionysus-primary-color);
+}
+
+.g-tab-page-box .s-icon {
+  display: block;
+  position: relative;
+  width: 14px;
+  height: 14px;
+}
+
+.g-tab-page-box .s-icon:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  width: 1px;
+  height: 10px;
+  background-color: rgba(48, 49, 51);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.g-tab-page-box .s-icon:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  width: 1px;
+  height: 10px;
+  background-color: rgba(48, 49, 51);
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.g-tab-page-box .u-li[data-active="true"] .s-icon:after, .g-tab-page-box .u-li[data-active="true"] .s-icon:before {
+  background-color: var(--br-dionysus-primary-color);
+}
+
+.g-tab-page-box .u-li .u-btn:hover .s-icon:after, .g-tab-page-box .u-li .u-btn:hover .s-icon:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active="true"] .u-btn:hover .s-icon:after, .g-tab-page-box .u-li[data-active="true"] .u-btn:hover .s-icon:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active="false"][data-hover="false"][data-active-before="false"][data-hover-before="false"] .u-sn:after {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  z-index: 2;
+  content: '';
+  width: 1px;
+  height: 50%;
+  transform: translateY(-50%);
+  background-color: #4a4a4a;
+}
+
+.g-tab-page-box .u-li:nth-last-of-type(1)[data-active="false"][data-hover="false"] .u-sn:after {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+</style>

package/docs/packages/Tool/moneyFormat/README.md

@@ -0,0 +1,15 @@
+
+### 1) moneyFormat
+
+| 参数        | 描述           | 类型          | 默认值 |
+| ----------- | -------------- | ------------- | ------ |
+| val         | 要转换的数字   | number,string | 0      |
+| isThousands | 是否需要千分位 | boolean       | true   |
+| roundDTo    | 四舍五入位数   | number        | 2      |
+| config      | 配置项         | ConfigType    | {}     |
+
+### 2) ConfigType
+| 参数        | 描述         | 类型   | 默认值 |
+| ----------- | ------------ | ------ | ------ |
+| moneySymbol | 补的金钱符号 | string | -      |
+| repairZero  | 末尾补几位零 | number | -      |