@bdsoft/element 1.1.13 → 1.1.14

package/src/components/layout/layout3.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  headerHeight: {
+    type: [String,Number],
+    default: '50px'
+  },
+  // 是否显示左侧
+  showLeft: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: '左侧菜单栏'
+  },
+  rightStyles: {
+    type: Object,
+    default: () => {
+      return {
+        padding:'20px',
+        margin: '10px 10px 10px 0px'
+      };
+    }
+  },
+  leftStyles: {
+    type: Object
+  }
+});
+// 是否显示标题栏
+const showLeftTop = computed(() => {
+  return props.title ? true : false
+})
+// 兼容string和number两个类型
+const _headerHeight = computed(() => {
+  if (typeof (props.headerHeight) == 'number') {
+    return `${props.headerHeight}px`
+  } else {
+    return props.headerHeight
+  }
+})
+</script>
+
+<template>
+  <el-container class="containerBg">
+    <el-header :height="_headerHeight" class="headwarp"
+      style="border-bottom: 1px solid #e6e6e6; border-radius: 4px 4px 0 0">
+      <div class="headwarp-top" style="border-radius: 4px">
+        <slot name="header">
+          <!-- 顶部区域 -->
+        </slot>
+      </div>
+    </el-header>
+    <el-container class="maincon" style="">
+      <el-aside width="200px" :style="{ ...leftStyles }" v-if="showLeft">
+        <div class="top" v-if="showLeftTop">
+          <div class="topin">{{ title }}</div>
+        </div>
+        <!-- 左侧区域 -->
+        <slot name="left"></slot>
+      </el-aside>
+      <el-main class="main-container" style="background-color: #fff;" :style="{  ...rightStyles }">
+        <!-- 右侧区域 -->
+        <slot></slot>
+      </el-main>
+    </el-container>
+
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+.maincon {
+  background: radial-gradient(circle at 14% 85%, #e7ecf7 0, rgba(231, 236, 247, 0) 37%), radial-gradient(circle at 3.4% 3.7%, rgba(245, 237, 241, 0.5) 0, rgba(245, 237, 241, 0) 28%), radial-gradient(circle at 100% 18%, #e8ebea 0, hsla(160, 7%, 92%, 0) 30%), linear-gradient(180deg, #f5f4f6, #e6ebf7);
+  overflow: hidden;
+}
+
+// 右侧用户信息
+.top_right {
+  position: absolute;
+  right: 10px;
+  top: 0px;
+  height: 100%;
+  /*width:400px;*/
+  color: #fff; // #8c8c8c;
+  font-size: 14px;
+  margin-right: 10px;
+
+  a {
+    color: #fff; // #8c8c8c;
+    margin: 10px 8px 0 5px;
+    cursor: pointer;
+  }
+}
+
+.top_search {
+  border-radius: 30px;
+  width: 180px;
+  float: right;
+  padding-top: 10px;
+  padding-right: 20px;
+
+  :deep(.el-input__wrapper) {
+    border-radius: 20px;
+  }
+}
+</style>

package/src/components/layout/layout4.vue

@@ -0,0 +1,66 @@
+<!--
+* @FileDescription:  上下布局页面
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+
+const props = defineProps({
+  headerHeight: {
+    type: [String, Number],
+    default: '50px'
+  },
+  rightStyles: {
+    type: Object,
+    default: () => {
+      return {
+        backgroundColor: '#EFEFEF'
+      }
+    }
+  },
+  innerBgColor: {
+    type: String,
+    default: '#fff'
+  }
+})
+// 兼容string和number两个类型
+const _headerHeight = computed(() => {
+  if (typeof (props.headerHeight) == 'number') {
+    return `${props.headerHeight}px`
+  } else {
+    return props.headerHeight
+  }
+})
+</script>
+<template>
+  <el-container class="containerBg">
+    <el-header style="background-color: #fff;padding:0;" :height="_headerHeight">
+      <slot name="header"></slot>
+    </el-header>
+    <el-main class="main main-container" :style="{ ...rightStyles }">
+      <div class="page-warp" :style="{ 'background-color': innerBgColor }">
+        <slot></slot>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  background-color: var(--bdBgcolor);
+  padding: 10px;
+  height: 100%;
+
+  .page-warp {
+    background: #fff;
+    color: rgba(0, 0, 0, 0.65);
+    // height: calc(100% - 24px);
+    height: 100%;
+    border-radius: 5px;
+    transition: all 0.3s;
+  }
+}
+</style>

package/src/components/layout/nav.vue

@@ -0,0 +1,333 @@
+<!--
+* @FileDescription:  导航菜单
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { ref, computed, nextTick, watch, onMounted } from "vue";
+const emits = defineEmits(['selectCategory'])
+const themelistRef = ref()
+
+
+const props = defineProps({
+    // 所有项居中
+    isCenter: {
+        type: Boolean,
+        default: false
+    },
+    themeWarpStyle: {
+        type: Object,
+        default: () => {
+            return {
+                backgroundColor: 'transparent',
+                height: '100px'
+            }
+        }
+    },
+    imgWarp: {
+        type: Object,
+        default: () => {
+            return {
+                width: '40px',
+                height: '40px',
+                right: '0px'
+            }
+        }
+    },
+    // 是否垂直展示
+    isVertical: {
+        type: Boolean,
+        default: true
+    },
+    themelist: {
+        type: Array,
+        required: true,
+        validator: (value) => {
+            // value 是父组件传递的数组
+            if (value.length == 0) {
+                console.error("菜单数组不能为空")
+            }
+            return value.length > 0; // 只有数组长度 > 0 时才通过校验
+        }
+    },
+
+    color: {
+        type: String,
+        default: '#0B101A'
+    },
+    hoverBgColor: {
+        type: String,
+        default: 'var(--hoverbg)'
+    },
+})
+const overlayRefs = ref([]);
+const setItemRefs = ref([])
+const selectTheme = ref(props.themelist[0]) // 选中
+
+// 检测鼠标进入方向
+const getDirection = (event, element) => {
+    const rect = element.getBoundingClientRect();
+    const x = event.clientX - rect.left - rect.width / 2;
+    const y = event.clientY - rect.top - rect.height / 2;
+    let dir = Math.round(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90 + 3) % 4;
+    return dir
+};
+
+// 处理鼠标进入
+const handleMouseEnter = (index, event) => {
+
+    const overlay = overlayRefs.value[index];
+    const element = setItemRefs.value[index];
+    if (overlay) {
+        const direction = getDirection(event, element);
+        overlay.style.transition = ''; // 清除过渡以便即时应用位置变化
+        // 首先清除所有可能的位置类，以避免冲突
+        overlay.classList.remove('overlay-leave-to-left', 'overlay-leave-to-top', 'overlay-leave-to-right', 'overlay-leave-to-bottom');
+        // 应用初始位置类
+        switch (direction) {
+            case 0:
+                overlay.classList.add('overlay-enter-from-top');
+                break;
+            case 1:
+                overlay.classList.add('overlay-enter-from-right');
+                break;
+            case 2:
+                overlay.classList.add('overlay-enter-from-bottom');
+                break;
+            case 3:
+                overlay.classList.add('overlay-enter-from-left');
+                break;
+        }
+
+        // 使用requestAnimationFrame来确保即时应用
+        requestAnimationFrame(() => {
+            overlay.style.transition = 'transform 0.5s ease';
+            switch (direction) {
+                case 0:
+                    overlay.style.transform = 'translateY(0%)';
+                    break;
+                case 1:
+                    overlay.style.transform = 'translateX(0%)';
+                    break;
+                case 2:
+                    overlay.style.transform = 'translateY(0%)';
+                    break;
+                case 3:
+                    overlay.style.transform = 'translateX(0%)';
+                    break;
+            }
+        });
+    }
+
+};
+
+// 处理鼠标离开
+const handleMouseLeave = (index, event) => {
+    const overlay = overlayRefs.value[index];
+    if (overlay) {
+        const element = setItemRefs.value[index];
+        const direction = getDirection(event, element);
+        overlay.style.transition = ''; // 清除过渡以便即时应用位置变化
+        overlay.classList.remove('overlay-enter-from-left', 'overlay-enter-from-top', 'overlay-enter-from-right', 'overlay-enter-from-bottom');
+        // 确定并添加适当的离开动画类
+        switch (direction) {
+            case 0: // 上
+                overlay.classList.add('overlay-leave-to-top');
+                break;
+            case 1: // 右
+                overlay.classList.add('overlay-leave-to-right');
+                break;
+            case 2: // 下
+                overlay.classList.add('overlay-leave-to-bottom');
+                break;
+            case 3: // 左
+                overlay.classList.add('overlay-leave-to-left');
+                break;
+        }
+
+        requestAnimationFrame(() => {
+            overlay.style.transition = 'transform 0.5s ease';
+            // 应用离开动画
+            switch (direction) {
+                case 0: // 上
+                    overlay.style.transform = 'translateY(-100%)';
+                    break;
+                case 1: // 右
+                    overlay.style.transform = 'translateX(100%)';
+                    break;
+                case 2: // 下
+                    overlay.style.transform = 'translateY(100%)';
+                    break;
+                case 3: // 左
+                    overlay.style.transform = 'translateX(-100%)';
+                    break;
+            }
+        });
+    }
+
+};
+
+const themeStyle = computed(() => {
+    let _style = { color: props.color }
+    // 上下排列
+    if (props.isVertical) {
+
+    } else {
+        _style.display = 'flex'
+        _style.justifyContent = 'center'
+    }
+
+    return _style
+})
+// 主题分类选择事件
+const handleClick = (item) => {
+    selectTheme.value = item
+    emits('selectCategory', item)
+}
+
+watch(
+    () => props.themelist,
+    (newValue) => {
+        let aa = themelistRef.value
+        // debugger
+    },
+    {
+        deep: true
+    }
+)
+</script>
+<template>
+    <ul class="theme-list" ref="themelistRef" :style="{ justifyContent: isCenter ? 'center' : 'start' }">
+        <li class="theme-item" :style="themeWarpStyle" :class="{ selected: selectTheme.title == item.title }"
+            v-for="(item, index) in themelist" :key="index" :ref="(el) => setItemRefs[index] = el"
+            @mouseenter="event => handleMouseEnter(index, event)" @mouseleave="event => handleMouseLeave(index, event)"
+            @click="handleClick(item)">
+            <div class="theme-title" :style="themeStyle">
+                <!-- 处理左右排列还是上下排列 -->
+                <div v-if="item.icon" :style="{ height: imgWarp.height, marginRight: imgWarp.right }">
+                    <img style=" vertical-align: middle" :src="item.icon" :style="{ width: imgWarp.width }" />
+                </div>
+                {{ item.title }}
+            </div>
+            <div class="overlay" :ref="(el) => overlayRefs[index] = el"></div>
+        </li>
+    </ul>
+</template>
+<style>
+:root {
+    --hoverbg: rgba(117, 144, 255, 0.05);
+}
+</style>
+<style lang="scss" scoped>
+/* 定义动画 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.theme-item li {
+    animation: fadeIn 0.5s ease;
+}
+
+.theme-list {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px #d9dfed solid;
+    font-family: PingFangSC-Regular;
+
+    .theme-item {
+        width: 120px;
+        height: 100px;
+        text-align: center;
+        line-height: 80px;
+        margin-right: 30px;
+        border-radius: 10px 10px 0 0;
+        // background-color: #fff;
+        // font-weight: bold;
+        font-size: 16px;
+        transition: transform 0.3s ease;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .selected {
+        font-family: PingFangSC-Semibold;
+        color: #256DFF !important;
+        border-bottom: 4px #256DFF solid;
+        font-weight: bold;
+
+        .theme-title {
+            color: #256DFF;
+        }
+    }
+}
+
+.theme-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: #000;
+    text-align: center;
+    z-index: 99;
+}
+
+.overlay {
+    transition: transform 0.5s ease;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+
+.overlay-enter-from-left {
+    background-color: var(--hoverbg);
+    color: #fff !important;
+    transform: translateX(-100%);
+}
+
+.overlay-enter-from-top {
+    background-color: var(--hoverbg);
+    transform: translateY(-100%);
+}
+
+.overlay-enter-from-right {
+    background-color: var(--hoverbg);
+    transform: translateX(100%);
+}
+
+.overlay-enter-from-bottom {
+    background-color: var(--hoverbg);
+    transform: translateY(100%);
+}
+
+.overlay-leave-to-left {
+    transform: translateX(-100%);
+}
+
+.overlay-leave-to-top {
+    transform: translateY(-100%);
+}
+
+.overlay-leave-to-right {
+    transform: translateX(100%);
+}
+
+.overlay-leave-to-bottom {
+    transform: translateY(100%);
+}
+</style>

package/src/components/layout/readme.md

@@ -0,0 +1,61 @@
+## 导航组件
+
+```
+import BdNav from '@bdsoft/element'
+
+export const themelist = ref([
+    { attr: 'fl', icon: getAssetsImgUrl('aat-icon.png'), title: '勘探' },
+    { attr: 'fl', icon: getAssetsImgUrl('cloud-icon.png'), title: '开发' },
+])
+// 选择事件
+const handleSelectCategory = ()=>{
+}
+ <!-- 导航 -->
+ <BdNav :themelist="themelist" @selectCategory="getThemeData_qk"></BdNav>
+
+ 另一种横向展示方式
+ const themeWarpStyle = ref({
+    backgroundColor: 'transparent',
+    height: '40px',
+    lineHeight: '40px',
+    fontSize:'13px',
+    fontWeight:'normal',
+    textAlign:'center',
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center'
+})
+  <BdBar paddingTop="0px">
+                <BdNav isCenter :themelist="navdatas" :isVertical="false" :imgWarp="{ width: '16px', height: '16px',right:'10px' }"
+                    :themeWarpStyle="themeWarpStyle" @selectCategory="handleSelectCategory"></BdNav>
+            </BdBar>
+```
+
+## 布局组件
+
+
+## 布局组件使用
+
+```
+import { BdLayout1 } from '@bdsoft/element'
+
+ <BdLayout1>
+        <template #left>
+            11111
+        </template>
+         
+    </BdLayout1>
+
+```
+
+```
+import { BdLayout4 } from '@bdsoft/element'
+
+ <BdLayout4>
+        <template #header>
+            11111
+        </template>
+        
+    </BdLayout4>
+
+```

package/src/components/loading/index.vue

@@ -0,0 +1,122 @@
+<!--
+* @FileDescription:  loading组件
+* @Author: 李兵泉
+* @Date: 2024-11-25 
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+  <div class="page-loading" :style="{ height: props.height }">
+    <div id="bd-loading-table">
+      <div class="spinner2">
+        <div class="rect1"></div>
+        <div class="rect2"></div>
+        <div class="rect3"></div>
+        <div class="rect4"></div>
+        <div class="rect5"></div>
+      </div>
+      <div class="load_title">数据加载中,请耐心等待...</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+const props = defineProps({
+  height: {
+    type: String,
+    default: '500px'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.page-loading {
+  height: 100%;
+  vertical-align: middle;
+}
+#bd-loading-table {
+  width: 100%;
+  height: 100%;
+  transform: translateY(20%);
+  //   position: fixed;
+  //   top: 0;
+  //   left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99999;
+  background-color: rgba(255, 255, 255, 0.1);
+  transition: 0.2s ease-in;
+  transition-property: background-color;
+
+  .spinner2 {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    font-size: 10px;
+  }
+
+  .spinner2 > div {
+    margin: 0 2px;
+    padding: 0;
+    // background-color: rgb(216, 216, 216);
+    background-color: var(--el-color-primary);
+    border-radius: 5px;
+    height: 100%;
+    width: 6px;
+    display: inline-block;
+    -webkit-animation: sk-stretchdelay 1.5s infinite ease-in-out;
+    animation: sk-stretchdelay 1.5s infinite ease-in-out;
+  }
+
+  .spinner2 .rect2 {
+    -webkit-animation-delay: -1.4s;
+    animation-delay: -1.4s;
+  }
+
+  .spinner2 .rect3 {
+    -webkit-animation-delay: -1.3s;
+    animation-delay: -1.3s;
+  }
+
+  .spinner2 .rect4 {
+    -webkit-animation-delay: -1.2s;
+    animation-delay: -1.2s;
+  }
+
+  .spinner2 .rect5 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+
+  .load_title {
+    font-family: 'Open Sans';
+    // color: #4f4f4f;
+    color: var(--el-color-primary);
+    font-size: 14px;
+    width: 100%;
+    text-align: center;
+    z-index: 9998;
+    position: absolute;
+    top: 35%;
+    opacity: 1;
+    line-height: 30px;
+  }
+}
+@keyframes sk-stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+    -webkit-transform: scaleY(1);
+  }
+}
+</style>

package/src/components/loading/readme.md

@@ -0,0 +1,6 @@
+
+# 使用说明
+
+```
+import {BdLoading } from '@bdsoft/element'
+```