@bdsoft/element 1.1.9 → 1.1.11

package/src/components/layout/layout3.vue

@@ -1,107 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-<!--
-* @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

@@ -1,333 +0,0 @@
-<!--
-* @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

@@ -1,61 +0,0 @@
-## 导航组件
-
-```
-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

@@ -1,122 +0,0 @@
-<!--
-* @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

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